/* ============================================================
   The Undersold — dark editorial.
   Cousin of corydickes.com: shares its accent (#ec8a3e) and
   restraint; diverges on a cooler graphite base and a denser,
   feed-first layout. Token values mirror undersold.css.
   ============================================================ */

:root {
  --bg:        #0d0f11;
  --bg-2:      #14171a;
  --panel:     #1b1f23;
  --panel-2:   #242a2f;
  --panel-hi:  #2b3238;
  --line:      rgba(var(--accent-rgb), 0.14);
  --line-soft: rgba(var(--accent-rgb), 0.07);
  --text:      #eceef0;
  --muted:     #9aa3aa;
  --muted-2:   #5c656c;              /* dim: decorative dots/LEDs only (fails AA as text) */
  --muted-text: #98a1a8;             /* AA-passing for small meta text */

  --accent-rgb: 236, 138, 62;          /* #ec8a3e — shared with corydickes.com. JS remaps per vertical */
  --green:     rgb(var(--accent-rgb));  /* legacy var name; the accent is orange now */
  --green-dim: #a35f22;                 /* JS overrides to a darker shade per vertical */
  --green-glow: rgba(var(--accent-rgb), 0.35);

  --amber:  #f0a020;
  --red:    #ef4444;
  --blue:   #38bdf8;
  --gold:   #facc15;

  --radius:   14px;
  --radius-s: 9px;

  /* Type system (self-hosted, see fonts.css — NO Google Fonts request).
     Archivo carries both display and body: a grotesque with real 700/800
     weights, so the hierarchy is set by weight, not by a second serif family.
     Spline Sans Mono is the data face — tabular-ish figures for prices,
     percentages, counts and every uppercase micro-label on the board. */
  --mono: "Spline Sans Mono", ui-monospace, "DejaVu Sans Mono", "SFMono-Regular", Menlo, monospace;
  --sans: "Archivo", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Archivo", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --shadow: 0 18px 40px -20px rgba(0,0,0,0.9);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.45;
  /* dvh, not vh: on iOS 100vh includes the browser chrome, so the page height
     changes as the URL bar hides/shows and the layout jumps mid-scroll. */
  min-height: 100vh;
  min-height: 100dvh;
  /* NO overflow-x here. Clipping the root makes it a scroll container, which
     breaks `position: sticky` on the nav — the header detaches and jitters on
     iOS. Horizontal clipping is done on .wrap instead (see below). */
  /* atmosphere: two green glows + grain */
  background-image:
    radial-gradient(1100px 520px at 82% -8%, rgba(var(--accent-rgb),0.10), transparent 60%),
    radial-gradient(900px 500px at 8% 4%, rgba(205,162,78,0.04), transparent 55%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 40%);
  /* `fixed` forces a full repaint of the gradient on every scroll frame and is
     a well-known source of iOS stutter; the desktop keeps it, touch does not. */
  background-attachment: fixed;
}
@media (hover: none), (max-width: 900px) {
  body { background-attachment: scroll; }
}

/* Film grain overlay. A full-viewport fixed layer with mix-blend-mode forces
   the compositor to re-blend the whole screen every frame — on iOS that shows
   up as tearing and a header that lags the content. Desktop only. */
@media (hover: none), (max-width: 900px) {
  body::after { display: none; }
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--green); color: #0b0d0a; }

/* thin acid scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--green-dim) transparent; }
*::-webkit-scrollbar { height: 8px; width: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),0.3); border-radius: 20px; }

/* overflow-x:hidden clips the inner flex rows (tab strip, filter bar) that
   run wider than a phone screen, so the page never scrolls sideways. Applied
   to .wrap (not html/body) so the sticky nav keeps working — clipping the root
   makes it a scroll container and breaks position:sticky. */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; overflow-x: hidden; }

/* ============================================================ NAV */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  /* Promote to its own layer so the sticky header is composited rather than
     repainted against the scrolling content underneath it. */
  will-change: transform;
  transform: translateZ(0);
  background: linear-gradient(180deg, rgba(11,13,10,0.94), rgba(11,13,10,0.78));
  border-bottom: 1px solid var(--line);
}

/* A 14px backdrop blur behind a sticky bar is expensive on phones; soften it. */
@media (hover: none), (max-width: 900px) {
  .nav { backdrop-filter: blur(6px); }
}
/* Wrap, don't clip. .wrap sets overflow-x:hidden (it has to — a scroll
   container would break position:sticky on .nav), so anything that overflows
   this row is unreachable rather than scrollable. Between ~900px and the
   1280px .wrap cap the buttons used to run off the right edge and "Tracked"
   simply vanished. Wrapping is the only fix that keeps every control usable
   at every width. */
.nav__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 13px 0 12px;
}

.brand { display: flex; align-items: center; gap: 12px; cursor: pointer; flex-shrink: 0; }
.brand__mark {
  font-size: 30px;
  line-height: 1;
  filter: drop-shadow(0 0 10px var(--green-glow));
  animation: jitter 6s ease-in-out infinite;
}
.brand__mark img { width: 40px; height: 40px; object-fit: contain; display: block; }
@keyframes jitter {
  0%, 92%, 100% { transform: rotate(0) translateY(0); }
  94% { transform: rotate(-7deg) translateY(-2px); }
  96% { transform: rotate(6deg); }
  98% { transform: rotate(-3deg); }
}
.brand__txt { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.015em;
  color: var(--green);
  text-shadow: 0 0 18px var(--green-glow);
}
.brand__name b { color: var(--text); font-weight: 800; }
.brand__tag {
  font-size: 10.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--mono);
}

.nav__spacer { flex: 1; }

.nav__btn {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: border-color .15s, background .15s, transform .1s;
  white-space: nowrap;
}
.nav__btn:hover { border-color: var(--green); background: var(--panel-hi); }
.nav__btn:active { transform: translateY(1px); }

/* deal-type tabs — wrap, don't scroll: a hidden-scrollbar overflow row is
   unreachable with a mouse, and the pill count keeps growing with sections */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 4px 0 14px;
  /* The tab list ships empty and is built by JS, so without a reserved row the
     nav grew from 18px to 63px on hydration and shoved the page down (~0.35 of
     CLS). One row of .tab (35px) plus this padding. Populated tabs are always
     at least one row, so this can never open a gap. */
  min-height: 53px;
}

.tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.3px;
  transition: all .16s ease;
  position: relative;
}
.tab:hover { color: var(--text); border-color: rgba(var(--accent-rgb),0.4); transform: translateY(-1px); }
.tab__emoji { font-size: 15px; }
.tab__count {
  font-size: 11px;
  font-weight: 700;
  background: rgba(var(--accent-rgb),0.12);
  color: var(--green);
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
}
.tab.is-active {
  color: #0b0d0a;
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 22px -4px var(--green-glow);
}
.tab.is-active .tab__count { background: rgba(11,13,10,0.22); color: #0b0d0a; }

.statline {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  padding: 0 0 12px;
  display: flex;
  align-items: center;
  /* Built by JS from the live counts, so it starts at 0px and shoved the whole
     page down on hydration. Reserve one populated row; narrower viewports wrap
     TALLER than this, never shorter, so it cannot open a gap. */
  min-height: 56px;
  gap: 8px;
  flex-wrap: wrap;
}
.statline b { color: var(--green); font-weight: 700; }
.statline .blip {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* section blurb */
.section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 22px 0 6px;
  flex-wrap: wrap;
}
.section-head h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.section-head .blurb { color: var(--muted); font-size: 13.5px; font-style: italic; }
.section-head .rule {
  flex: 1; height: 1px; min-width: 30px;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* ============================================================ FILTER BAR */
.filters {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px;
  margin-top: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.filters .grp { display: flex; align-items: center; gap: 8px; }
.filters label.cap {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted-text);
}
.field {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 8px 11px;
  outline: none;
  transition: border-color .15s;
}
.field:focus { border-color: var(--green); }
select.field { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23ec8a3e'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }
input.field.price { width: 82px; }

/* stock toggle switch */
.toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.toggle input { display: none; }
.toggle .track {
  width: 40px; height: 22px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line);
  position: relative; transition: background .18s, border-color .18s;
}
.toggle .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--muted); transition: transform .18s, background .18s;
}
.toggle input:checked + .track { background: rgba(var(--accent-rgb),0.2); border-color: var(--green); }
.toggle input:checked + .track::after { transform: translateX(18px); background: var(--green); }
.toggle .lbl { font-family: var(--mono); font-size: 12.5px; color: var(--text); }

.filters .flex-sp { flex: 1; }
.filters .result-count { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* ============================================================ GRID + CARDS */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 16px;
  padding: 18px 0 40px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  opacity: 0;
  transform: translateY(14px);
  animation: cardIn .5s cubic-bezier(.2,.7,.2,1) forwards;
}
/* subtle per-category color stripe (color set inline via --cat; absent = no stripe) */
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--cat, transparent); opacity: .8; z-index: 2; pointer-events: none;
}
@keyframes cardIn { to { opacity: 1; transform: translateY(0); } }
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb),0.4);
  box-shadow: 0 26px 50px -22px rgba(0,0,0,0.95), 0 0 0 1px rgba(var(--accent-rgb),0.15);
}

/* out of stock dim */
.card.oos { opacity: 0.55; }
.card.oos .card__img, .card.oos .price-row { filter: saturate(0.5) brightness(0.82); }

.card__imgwrap {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0 12px, transparent 12px 24px),
    #0f120c;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
/* product photos sit on a consistent inset white tile so white-background JPEGs
   and transparent PNGs both look intentional against the dark card. */
.card__img {
  width: calc(100% - 16px); height: calc(100% - 16px);
  object-fit: contain; padding: 9px;
  background: #fff; border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.card__img-fallback {
  font-size: 54px; opacity: 0.5;
  filter: grayscale(0.3) drop-shadow(0 0 12px rgba(var(--accent-rgb),0.15));
}

/* corner ribbon for hoard / crime */
.ribbon {
  position: absolute; top: 12px; left: -34px;
  transform: rotate(-45deg);
  background: var(--gold); color: #0b0d0a;
  font-family: var(--mono); font-weight: 700; font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 4px 40px; box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  z-index: 3;
}
.ribbon.crime { background: var(--red); color: #fff; }

.pct-chip {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  font-family: var(--mono); font-weight: 700; font-size: 13px;
  color: #0b0d0a; background: var(--green);
  padding: 4px 9px; border-radius: 8px;
  box-shadow: 0 4px 14px -2px var(--green-glow), 0 0 0 1.5px rgba(11,13,10,0.55);
}
.openbox-flag {
  position: absolute; bottom: 10px; left: 10px; z-index: 3;
  font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: #7dd3fc; font-weight: 700;
  background: rgba(11,13,10,0.88); border: 1px solid rgba(56,189,248,0.6);
  padding: 3px 8px; border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.openbox-flag.used { color: #e0b878; background: rgba(224,184,120,0.12); border-color: rgba(224,184,120,0.45); }
.openbox-flag.refurb { color: #d8b4fe; border-color: rgba(168,85,247,0.6); }
.openbox-flag.refurb {
  color: #c084fc;
  background: rgba(192,132,252,0.12); border-color: rgba(192,132,252,0.45);
}

.card__body { padding: 14px 14px 15px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.card__meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--muted-text);
  display: flex; gap: 6px; align-items: center;
}
.card__meta .dot { color: var(--green-dim); }
.card__meta .card__cat { color: var(--cat, var(--muted-text)); }
.coll-chip {
  align-self: flex-start; font: 600 10.5px/1 var(--mono); text-transform: capitalize;
  color: #d8b36a; background: rgba(216,179,106,0.10);
  border: 1px solid rgba(216,179,106,0.30); padding: 3px 8px; border-radius: 999px;
}
.melt-chip {
  align-self: flex-start; font: 600 10.5px/1 var(--mono);
  color: var(--muted-text); background: var(--panel-hi);
  border: 1px solid var(--line); padding: 3px 8px; border-radius: 999px;
}
.melt-chip.under {
  color: #7bd88f; background: rgba(123,216,143,0.12); border-color: rgba(123,216,143,0.4);
}

/* Master leaderboard: rank medals, "why it wins" proof, #1 spotlight — gold in Master
   because --accent-rgb is remapped to gold there; these only render in Master view. */
.master-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rank-badge {
  font: 700 11px/1 var(--mono); letter-spacing: .03em;
  padding: 4px 8px; border-radius: 7px; color: var(--muted-text);
  background: var(--panel-hi); border: 1px solid var(--line);
}
.rank-badge.rank-top {
  color: var(--green); background: rgba(var(--accent-rgb), .15);
  border-color: rgba(var(--accent-rgb), .5);
}
.win-chip {
  font: 600 11px/1 var(--mono); color: var(--green);
  background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .3);
  padding: 4px 9px; border-radius: 999px;
}
.card--rank1 {
  border-color: rgba(var(--accent-rgb), .55);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .3),
              0 22px 46px -20px rgba(0,0,0,.92),
              0 0 30px -8px var(--green-glow);
}

.card__name {
  font-size: 14.5px; font-weight: 600; line-height: 1.3;
  color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.6em;
  transition: color .15s;
}
.card__name:hover { color: var(--green); }

/* parsed spec chips — scannable CPU/RAM/storage/display/GPU/OS at a glance */
.card__specs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: -2px; }
.spec {
  font-family: var(--mono); font-size: 10.5px; line-height: 1; white-space: nowrap;
  color: var(--text); background: var(--panel-2);
  border: 1px solid var(--line-soft); border-radius: 6px;
  padding: 4px 7px; display: inline-flex; align-items: center; gap: 4px;
}
.spec::before { font-size: 10px; opacity: 0.85; }
.spec--cpu::before  { content: "🧠"; }
.spec--ram::before  { content: "🧮"; }
.spec--ssd::before  { content: "💾"; }
.spec--disp::before { content: "🖥️"; }
.spec--gpu::before  { content: "🎮"; }
.spec--os::before   { content: "🪟"; }
.spec--touch::before{ content: "✋"; }
/* the two specs that most drive value pop in the accent colour */
.spec--cpu, .spec--gpu { color: var(--green); border-color: var(--line); }
.card__specline { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* ===== fulfillment row — shipping + warranty pills ===== */
.card__fulfill { display: flex; flex-wrap: wrap; gap: 5px; margin-top: -2px; }
.fulfill-pill {
  font-family: var(--mono); font-size: 10px; line-height: 1;
  letter-spacing: 0.3px; white-space: nowrap;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 4px 8px; display: inline-flex; align-items: center; gap: 4px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
/* shippable reads positive — accent border/tint (auto-flips to the Pro accent) */
.fulfill-pill.fp-ships {
  color: var(--green); background: var(--panel-2);
  border-color: var(--line);
}
/* in-store only is muted */
.fulfill-pill.fp-pickup {
  color: var(--muted); background: var(--panel-2);
  border-color: var(--line-soft);
}
/* warranty is a calm neutral/shield tone */
.fulfill-pill.fp-warranty {
  color: var(--muted); background: var(--panel);
  border-color: var(--line-soft); min-width: 0;
}
.fulfill-pill.fp-released {
  color: var(--muted); background: var(--panel);
  border-color: var(--line-soft); min-width: 0;
}
/* arbitrage / flip view */
body.flip-mode .filters, body.flip-mode .tabs, body.flip-mode .section-head { display: none; }
.flip-empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--muted, #8a948a); line-height: 1.8; }
.flip-card .card__body { display: flex; flex-direction: column; gap: 5px; }
.flip-name { font-weight: 640; font-size: 13.5px; line-height: 1.35; margin-bottom: 3px; }
.flip-row { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.flip-row > span:first-child { color: var(--muted, #8a948a); min-width: 74px; }
.flip-row b { font-family: var(--mono, monospace); }
.flip-row .flip-site { color: var(--faint, #6f7a68); font-size: 11.5px; margin-left: auto; }
.flip-row.muted { color: var(--muted, #8a948a); font-size: 12px; }
.flip-row.muted span:last-child { margin-left: auto; font-family: var(--mono, monospace); }
.flip-net { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; padding-top: 7px;
  border-top: 1px solid var(--line); font-size: 14px; }
.flip-net b { font-family: var(--mono, monospace); font-size: 20px; color: var(--green); }
.flip-roi { margin-left: auto; font-family: var(--mono, monospace); font-weight: 700; color: var(--green); }
.flip-buy { margin-top: 8px; display: block; text-align: center; padding: 9px; border-radius: 8px;
  background: var(--green); color: #04140a; font-weight: 700; text-decoration: none; font-size: 13px; }
.flip-buy:hover { filter: brightness(1.08); }
.nav__flip { position: relative; }

.card__ppm { display: inline-block; margin: 6px 0 2px; padding: 3px 9px; border-radius: 999px;
  font-family: var(--mono, monospace); font-size: 12px; font-weight: 600;
  color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 25%, transparent); }
.card__offers { margin: 8px 0 2px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.offers-head { padding: 6px 10px; font-family: var(--mono, monospace); font-size: 11.5px;
  color: var(--muted, #8a948a); background: var(--panel, rgba(255,255,255,.03)); }
.offer-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; text-decoration: none;
  color: var(--ink, #dfe7d8); border-top: 1px solid var(--line); font-size: 12.5px; }
.offer-row:hover { background: color-mix(in srgb, var(--green) 8%, transparent); }
.offer-row.best { background: color-mix(in srgb, var(--green) 10%, transparent); }
.offer-site { font-weight: 600; }
.offer-cond { color: var(--muted, #8a948a); font-size: 11px; }
.offer-price { margin-left: auto; font-family: var(--mono, monospace); font-weight: 700; }
.offer-row.best .offer-price { color: var(--green); }

.card__fmv {
  margin: 6px 0 2px; padding: 7px 9px; border-radius: 8px;
  background: color-mix(in srgb, var(--green) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 22%, transparent);
  display: flex; flex-direction: column; gap: 3px;
}
.fmv-line { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.fmv-margin { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--muted); }
.fmv-margin.good { color: var(--green); }

.price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price {
  font-family: var(--mono); font-weight: 700; font-size: 26px;
  color: var(--green); letter-spacing: -0.5px;
  text-shadow: 0 0 20px rgba(var(--accent-rgb),0.25);
}
.msrp {
  font-family: var(--mono); font-size: 14px; color: var(--muted-text);
  text-decoration: line-through; text-decoration-color: var(--red);
}
.save {
  font-family: var(--mono); font-size: 11px; color: var(--amber);
  margin-left: auto;
}

/* badges */
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.8px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px;
  border: 1px solid currentColor;
  display: inline-flex; align-items: center; gap: 4px;
}
.badge b { font-size: 11px; }
.badge.danny_approved   { color: var(--green); background: rgba(var(--accent-rgb),0.08); }
.badge.dumpster_diamond { color: var(--amber); background: rgba(240,160,32,0.08); }
.badge.msrp_crime       { color: var(--red);   background: rgba(239,68,68,0.09); }
.badge.caffeine_pick    { color: var(--blue);  background: rgba(56,189,248,0.08); }
.badge.hoard_immediately{ color: var(--gold);  background: rgba(250,204,21,0.09);
  animation: glowpulse 2s ease-in-out infinite; }
@keyframes glowpulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(250,204,21,0.0); }
  50%     { box-shadow: 0 0 14px -2px rgba(250,204,21,0.5); }
}

/* danny score */
.score-row {
  display: flex; align-items: center; gap: 10px;
  padding: 3px 0;
  border-top: 1px dashed var(--line-soft);
  padding-top: 11px; margin-top: 2px;
}
.mugs { display: inline-flex; gap: 1px; font-size: 15px; letter-spacing: 1px; }
.mug.on  { filter: none; color: var(--green); }
.mug.off { filter: none; color: var(--line2); opacity: 0.9; }
.score-tier {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted);
}
.score-tier.t5 { color: var(--gold); animation: pulse 1.6s ease-in-out infinite; }
.score-tier.t4 { color: var(--green); }
.score-tier.t3 { color: var(--amber); }

/* card footer: stock + spark + watch */
.card__foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: auto; padding-top: 4px;
}
.stock {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.4px;
  color: var(--green-dim); display: flex; align-items: center; gap: 6px;
}
.stock.out { color: var(--muted-text); }
.stock .led { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px var(--green); }
.stock.out .led { background: var(--muted-2); box-shadow: none; }

.spark { margin-left: auto; width: 92px; height: 30px; opacity: 0.9; }
.spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* invisible spacer while a sparkline is (maybe) drawn — no perpetual shimmer,
   so cards with no usable history never leave an animated artifact behind */
.spark-loading {
  width: 92px; height: 30px; margin-left: auto; border-radius: 6px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.cart-btn {
  flex-shrink: 0;
  width: 38px; height: 34px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg);
  cursor: pointer; font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; filter: grayscale(1) brightness(0.75); opacity: 0.72;
}
.cart-btn:hover { border-color: var(--green); transform: translateY(-1px); filter: none; opacity: 1; }
.cart-btn.on { filter: none; opacity: 1; border-color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }

/* nav cart button + count badge */
.nav__cart { position: relative; }
.cart-badge {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 9px; background: var(--green); color: #04140a;
  font: 700 11px/17px var(--mono, monospace); text-align: center;
}

/* cart drawer contents */
.cart-empty { color: var(--muted-text, #8a948a); text-align: center; padding: 40px 12px; line-height: 1.7; }
.cart-group { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cart-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 11px; background: var(--panel, rgba(255,255,255,.03)); font-size: 13px; }
.cart-group-head b { color: var(--ink, #e7efe0); }
.cart-row { display: flex; flex-direction: column; gap: 5px; padding: 9px 11px; border-top: 1px solid var(--line); }
.cart-name { font-size: 12.5px; color: var(--ink, #dfe7d8); text-decoration: none; line-height: 1.35; }
.cart-name:hover { text-decoration: underline; }
.cart-ctl { display: flex; align-items: center; gap: 8px; }
.qtn { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--bg); color: inherit; cursor: pointer; font-size: 15px; line-height: 1; }
.qtn:hover { border-color: var(--green); }
.qty { font-family: var(--mono, monospace); min-width: 18px; text-align: center; }
.cart-price { margin-left: auto; font-family: var(--mono, monospace); font-weight: 700; color: var(--green); }
.crm { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line);
  background: transparent; color: var(--muted-text, #8a948a); cursor: pointer; }
.crm:hover { border-color: var(--red, #ff6b5c); color: var(--red, #ff6b5c); }
.cart-open { width: 100%; padding: 8px; border: 0; border-top: 1px solid var(--line);
  background: transparent; color: var(--green); cursor: pointer; font-size: 12px; }
.cart-open:hover { background: color-mix(in srgb, var(--green) 8%, transparent); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 4px; font-size: 15px; border-top: 1px solid var(--line); margin-top: 6px; }
.cart-total b { font-family: var(--mono, monospace); font-size: 20px; color: var(--green); }
.cart-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cart-actions button { flex: 1 1 auto; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: inherit; cursor: pointer; font-size: 12.5px; }
.cart-actions button:hover { border-color: var(--green); }
.cart-actions .cart-primary { background: var(--green); color: #04140a; border-color: var(--green); font-weight: 700; }

.watch-btn {
  flex-shrink: 0;
  width: 38px; height: 34px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg);
  cursor: pointer; font-size: 17px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; filter: grayscale(1) brightness(0.7); opacity: 0.7;
}
.watch-btn:hover { border-color: var(--blue); transform: translateY(-1px); filter: none; opacity: 1; }
.watch-btn.on {
  filter: none; opacity: 1;
  border-color: var(--blue); background: rgba(56,189,248,0.12);
  box-shadow: 0 0 14px -3px rgba(56,189,248,0.6);
}
.watch-btn.on:hover { border-color: var(--red); }

/* ============================================================ STATES */
.state {
  text-align: center; padding: 70px 20px; max-width: 460px; margin: 0 auto;
}
.state__art { font-size: 62px; margin-bottom: 14px; display: inline-block; }
.state__art.sniff { animation: sniff 1.1s ease-in-out infinite; }
@keyframes sniff {
  0%,100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-4px) rotate(-5deg); }
  75% { transform: translateX(5px) rotate(5deg); }
}
.state__art.art-img { font-size: 0; }
.state__art.art-img img {
  width: 220px; max-width: 70vw; height: auto; border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.25), 0 10px 30px rgba(0,0,0,0.5);
}
/* section-header mascot */
#secTitle { display: flex; align-items: center; gap: 14px; }
.sec-mascot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 13px; overflow: hidden;
  background: #0c0e0a; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),0.3);
  flex: 0 0 auto; font-size: 30px;
}
.sec-mascot img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
@media (max-width: 640px) { .sec-mascot { width: 46px; height: 46px; } }
.state h3 {
  font-family: var(--mono); font-size: 18px; margin: 0 0 8px; color: var(--text);
}
.state p { color: var(--muted); font-size: 13.5px; margin: 0; }
.state .dots::after {
  content: ""; animation: dots 1.4s steps(4,end) infinite;
}
@keyframes dots { 0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."} }

/* skeleton loading grid */
.skel {
  height: 330px; border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: linear-gradient(100deg, var(--panel) 30%, var(--panel-hi) 50%, var(--panel) 70%);
  background-size: 220% 100%; animation: shimmer 1.4s linear infinite;
}

/* ============================================================ DRAWER */
.scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(4,6,3,0.6); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.scrim.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 81;
  width: min(420px, 92vw);
  background: var(--bg-2);
  border-left: 1px solid var(--line);
  box-shadow: -30px 0 60px -20px rgba(0,0,0,0.9);
  transform: translateX(100%); transition: transform .26s cubic-bezier(.2,.7,.2,1);
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer__head {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 14px; border-bottom: 1px solid var(--line);
}
.drawer__head h3 {
  margin: 0; font-family: var(--mono); font-size: 16px; color: var(--green);
  flex: 1; letter-spacing: 0.3px;
}
.drawer__close {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 15px;
}
.drawer__close:hover { border-color: var(--green); }
.drawer__body { padding: 14px 16px 24px; overflow-y: auto; flex: 1; }

.cat {
  display: flex; align-items: center; gap: 12px;
  padding: 13px; border-radius: var(--radius-s);
  border: 1px solid var(--line-soft); background: var(--panel);
  margin-bottom: 10px;
}
.cat__info { flex: 1; min-width: 0; }
.cat__view { cursor: pointer; border-radius: 7px; padding: 4px 6px; margin: -4px -6px; transition: background .12s; }
.cat__view:hover { background: color-mix(in srgb, var(--green) 10%, transparent); }
.cat__view:hover .cat__name { color: var(--green); }
.cat__name { font-weight: 600; font-size: 14px; }
.cat__sub {
  font-family: var(--mono); font-size: 10.5px; color: var(--muted-text);
  letter-spacing: 0.4px; margin-top: 2px;
}
.cat__count {
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--green);
  background: rgba(var(--accent-rgb),0.1); padding: 2px 8px; border-radius: 999px;
}
.cat__btn {
  flex-shrink: 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--green);
  background: transparent; border: 1px solid var(--green-dim);
  border-radius: 8px; padding: 7px 11px; cursor: pointer;
  transition: all .15s;
}
.cat__btn:hover:not(:disabled) { background: var(--green); color: #0b0d0a; }
.cat__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.cat__btn.running { color: var(--amber); border-color: var(--amber); }

.sniff-banner {
  margin: 4px 0 14px; padding: 13px 14px; border-radius: var(--radius-s);
  background: rgba(240,160,32,0.08); border: 1px solid rgba(240,160,32,0.35);
  font-family: var(--mono); font-size: 12px; color: var(--amber);
  display: flex; align-items: center; gap: 10px;
}
.sniff-banner .art { font-size: 22px; animation: sniff 1.1s ease-in-out infinite; }
.sniff-banner .ph { color: var(--text); }

/* global refresh toast */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(120%);
  z-index: 90; background: var(--panel-hi); border: 1px solid var(--line);
  border-radius: 999px; padding: 11px 20px; box-shadow: var(--shadow);
  font-family: var(--mono); font-size: 12.5px; color: var(--text);
  display: flex; align-items: center; gap: 10px;
  opacity: 0; visibility: hidden;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s, visibility .3s;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; }
.toast .art { font-size: 18px; animation: sniff 1.1s ease-in-out infinite; }
.toast b { color: var(--amber); }

/* ============================================================ FOOTER */
.foot {
  border-top: 1px solid var(--line);
  margin-top: 30px; padding: 26px 0 44px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  color: var(--muted-text); font-family: var(--mono); font-size: 11.5px;
  line-height: 1.7;
}
.foot .sleep { font-size: 26px; filter: grayscale(0.4); }
.foot img.sleep { width: 34px; height: 34px; object-fit: contain; }
.foot b { color: var(--green-dim); }

/* ============================================================ RESPONSIVE */
/* Above the phone breakpoint .tabs wraps to two rows and the retailer <select>
   fills with ~30 options. Both ship empty, so both grew on hydration and
   rewrapped .nav__top, moving every element on the page. Reserve their settled
   size. Scoped to desktop: below 620px .tabs is a single scrolling row and
   .site-switch is capped at 42vw. */
@media (min-width: 621px) {
  .tabs { min-height: 97px; }
  /* Fixed basis, not min-width. The <select> ships empty and sizes itself to its
     longest option once JS fills it (~210px); at 200px it still grew by 10px,
     which was enough to tip .nav__top into an extra wrapped row — 44px taller,
     and 0.73 of CLS on its own. A fixed basis makes the row's geometry
     independent of the retailer list. */
  .site-switch { flex: 0 0 210px; }
}

@media (max-width: 620px) {
  /* one nowrap scrolling row here, not two wrapped ones */
  .tabs { min-height: 63px; }
  .wrap { padding: 0 13px; }
  .brand__tag { display: none; }
  .grid { grid-template-columns: 1fr; gap: 13px; }
  .filters { padding: 12px; gap: 9px; }
  .filters .grp.price-grp { width: 100%; }
  input.field.price { flex: 1; width: auto; }
  /* drop the greedy spacer so price/sort wrap cleanly instead of stranding
     the max field + sort on their own lines */
  .filters .flex-sp { display: none; }
  .section-head h2 { font-size: 19px; }
  .nav__btn .lbl-full { display: none; }
  .price { font-size: 24px; }
  /* nav wraps: brand + persona + site + buttons on top, search on its own full row */
  .nav__top { flex-wrap: wrap; gap: 8px 10px; }
  .nav__spacer { display: none; }
  .search-box { order: 5; flex: 1 1 100%; min-width: 0; max-width: none; }
  /* Same reservation as desktop, phone-sized. Empty the <select> is 26px wide
     and full it is ~210px, which pushed .nav__top from 113px to 158px on
     hydration. A fixed basis (with min-width:0 so flex may actually shrink it)
     makes the row height independent of the retailer list. */
  .site-switch { flex: 0 0 42vw; width: 42vw; min-width: 0; max-width: 42vw; }
  .persona-switch .lbl-full { display: none; }   /* just the emoji on phones */
  .nav__btn { padding: 8px 10px; min-height: 40px; }   /* ≥40px tap targets */
  /* drawers span the screen so the cart / categories aren't cramped */
  .drawer { width: 100%; max-width: 100%; }
  /* tabs scroll horizontally instead of squashing */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .tabs::-webkit-scrollbar { display: none; }
  .hero__title { font-size: 30px; }
}
@media (max-width: 400px) {
  .brand__name { font-size: 16px; }
  .brand__mark { font-size: 26px; }
}

/* narrow screens: let the result count drop to its own line so it can't
   run past the right edge of the filter bar (body is overflow-x:hidden) */
@media (max-width: 640px) {
  .filters .result-count { width: 100%; text-align: right; margin-top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  .card { opacity: 1; transform: none; }
}

/* ===== hero banner ===== */
.hero {
  position: relative; margin: 14px 0 16px; border-radius: 18px; overflow: hidden;
  min-height: 176px; display: flex; align-items: center;
  background:
    radial-gradient(130% 150% at 82% 25%, var(--green-glow), transparent 58%),
    linear-gradient(120deg, #12160e 0%, var(--bg) 62%);
  box-shadow: inset 0 0 0 1px var(--line);
}
.hero__art {
  position: absolute; right: 0; top: 0; bottom: 0; width: 54%;
  background-image: url("/mcwatch/assets/danny-scanning-inventory.png");
  background-size: cover; background-position: left center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 44%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 44%);
}
.hero__body { position: relative; z-index: 2; padding: 24px 26px; max-width: 60%; }
.hero__title {
  margin: 0; font-family: var(--display); font-weight: 800; font-size: 32px;
  letter-spacing: -0.02em; color: var(--text); text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.hero__title b { color: var(--green); }
.hero__tag {
  margin: 8px 0 13px; color: var(--muted); font-size: 13px;
  max-width: 40ch; line-height: 1.5;
}
.hero .statline { margin: 0; }
/* House credit. Deliberately quiet and below the stat line: it is a byline, not
   an ad, and this page's whole claim is that no commercial relationship moves
   the rankings. The hero is hidden outright under 560px, so this goes with it. */
.hero__credit {
  margin: 11px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.4px;
  color: var(--muted-text); max-width: 46ch; line-height: 1.5;
}
.hero__credit a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
.hero__credit a:hover { color: var(--green); border-bottom-color: var(--green-dim); }
@media (max-width: 720px) {
  .hero { min-height: 150px; }
  .hero__art { width: 66%; opacity: 0.45;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 58%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 58%); }
  .hero__body { max-width: 92%; padding: 16px 18px; }
  .hero__title { font-size: 23px; }
  .hero__tag { font-size: 12px; }
}
/* phones: the hero was eating half the screen — drop the art image, hide the flavor
   tag, and let the band size to its content instead of a fixed min-height. This block
   is intentionally AFTER the 720px block so it wins the cascade at phone widths. */
@media (max-width: 560px) {
  /* phones: the hero (duplicate title + glow box + stat line) isn't worth the
     vertical space — hide it entirely so content starts right under the nav */
  .hero { display: none; }
}

/* ===== new value-based badges ===== */
.badge.legendary    { color: var(--gold);  background: rgba(250,204,21,0.10);
  animation: glowpulse 2s ease-in-out infinite; }
.badge.diamond      { color: var(--amber); background: rgba(240,160,32,0.08); }
.badge.rare_find    { color: #c084fc;      background: rgba(192,132,252,0.10); }
.badge.fresh_find   { color: var(--green);  background: rgba(var(--accent-rgb),0.08); }
.badge.open_box     { color: var(--blue);   background: rgba(56,189,248,0.08); }
.badge.build_worthy { color: #5eead4;       background: rgba(94,234,212,0.08); }
.badge.hoard_now    { color: var(--gold);   background: rgba(250,204,21,0.10);
  animation: glowpulse 2s ease-in-out infinite; }
.badge.auction      { color: #fb923c;       background: rgba(251,146,60,0.10); }

/* MSRP demoted to a tiny tag next to the struck price */
.msrp-tag {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted-text);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 4px; align-self: center;
}
/* auction: the price is a live bid, flagged next to it so it never reads as firm */
.bid-tag {
  font-family: var(--mono); font-size: 9px; letter-spacing: .5px;
  text-transform: uppercase; color: #fb923c; align-self: center;
  border: 1px solid rgba(251,146,60,0.4); border-radius: 4px; padding: 1px 5px;
}

/* the REAL "why it's a deal" line */
.value-line {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12px; color: var(--text);
  padding: 6px 9px; border-radius: 8px; background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.value-line .vtxt { flex: 1; min-width: 0; }
.value-line .vdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 8px currentColor; }
.value-line.conf-high .vdot { background: var(--green); color: var(--green); }
.value-line.conf-med  .vdot { background: var(--amber); color: var(--amber); }
.value-line.conf-low  .vdot { background: var(--muted-2); color: var(--muted-2); }
.value-line .conf {
  font-size: 8.5px; letter-spacing: 1px; color: var(--muted-text);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px;
}
.value-line.conf-high .conf { color: var(--green); border-color: rgba(var(--accent-rgb),0.3); }

/* ===== legend / key modal ===== */
.modal-back {
  position: fixed; inset: 0; z-index: 200; padding: 20px;
  background: rgba(0,0,0,0.72); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.modal-back[hidden] { display: none; }
.legend {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; max-width: 640px; width: 100%; max-height: 86vh;
  overflow-y: auto; padding: 24px 26px; box-shadow: var(--shadow);
}
.legend__close {
  position: absolute; top: 12px; right: 14px; width: 30px; height: 30px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 8px; cursor: pointer; font-size: 14px;
}
.legend__close:hover { color: var(--text); border-color: var(--green); }
.legend h2 { font-family: var(--mono); margin: 0 0 10px; font-size: 20px; }
.legend h3 { font-family: var(--mono); margin: 20px 0 10px; font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--green); }
.lg-intro { color: var(--muted); font-size: 13px; margin: 0 0 4px; line-height: 1.55; }
.lg-list { display: flex; flex-direction: column; gap: 9px; }
.lg-row { display: grid; grid-template-columns: 158px 1fr; gap: 12px; align-items: start; }
.lg-row .badge { justify-self: start; white-space: nowrap; }
.lg-desc { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.lg-foot { color: var(--muted-text); font-size: 11px; margin-top: 18px;
  border-top: 1px solid var(--line); padding-top: 12px; }
.cdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  vertical-align: middle; margin: 0 2px 0 10px; }
.cdot.high { background: var(--green); } .cdot.med { background: var(--amber); } .cdot.low { background: var(--muted-2); }
.badge.refurbished { color: #c084fc; background: rgba(192,132,252,0.10); }
@media (max-width: 520px) { .lg-row { grid-template-columns: 1fr; gap: 3px; } }

/* ===== persona switch ===== */
.persona-switch {
  display: inline-flex; background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px; gap: 2px; flex: 0 0 auto;
}
.ps {
  font-family: var(--mono); font-size: 13px; border: 0; background: transparent;
  color: var(--muted); padding: 7px 13px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: all .15s;
}
.ps.active { background: var(--green); color: #0b0d0a; font-weight: 700;
  box-shadow: 0 0 16px -4px var(--green-glow); }
.ps:not(.active):hover { color: var(--text); }

/* Pro Mode — clean professional blue theme */
:root[data-persona="chris"] {
  --green: #4f9cf0; --green-dim: #2f7bd0; --green-glow: rgba(79,156,240,0.36);
  --line: rgba(79,156,240,0.16); --line-soft: rgba(79,156,240,0.08);
}
:root[data-persona="chris"] body {
  background-image:
    radial-gradient(1100px 520px at 82% -8%, rgba(79,156,240,0.10), transparent 60%),
    radial-gradient(900px 500px at 8% 4%, rgba(56,189,248,0.05), transparent 55%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 40%);
}
:root[data-persona="chris"] ::selection { background: #4f9cf0; color: #0b0d0a; }

/* Chris margin / bulk note on cards */
.margin-note {
  font-family: var(--mono); font-size: 11.5px; color: var(--green);
  background: var(--panel-2); border-radius: 7px; padding: 5px 9px;
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Chris badges */
.badge.strong_margin    { color: var(--gold); background: rgba(250,204,21,0.11);
  animation: glowpulse 2s ease-in-out infinite; }
.badge.margin_alert    { color: var(--red);  background: rgba(239,68,68,0.09); }
.badge.high_margin     { color: #f5b027;     background: rgba(245,176,39,0.11); }
.badge.quote_worthy     { color: var(--gold); background: rgba(250,204,21,0.08); }
.badge.bulk_ready      { color: var(--blue); background: rgba(56,189,248,0.08); }
.badge.fresh_drop    { color: var(--green);     background: rgba(var(--accent-rgb),0.08); }
.badge.watchlist_pick { color: #f472b6;     background: rgba(244,114,182,0.10); }
.badge.pro_approved   { color: var(--gold); background: rgba(250,204,21,0.08); }

/* ===== similar-machine finder ===== */
.similar-wrap { margin-top: 2px; }
.similar-btn {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px;
  color: var(--muted); background: transparent; border: 1px dashed var(--line);
  border-radius: 7px; padding: 5px 9px; cursor: pointer; width: 100%;
  text-align: left; transition: all .15s;
}
.similar-btn:hover { color: var(--text); border-color: var(--green); }
.similar-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.sim-row {
  display: grid; grid-template-columns: auto auto 1fr; gap: 4px 8px; align-items: baseline;
  padding: 6px 8px; border-radius: 6px; background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line); font-size: 11.5px;
}
.sim-row:hover { box-shadow: inset 0 0 0 1px var(--green); }
.sim-price { font-family: var(--mono); font-weight: 700; color: var(--green); }
.sim-delta { font-family: var(--mono); font-size: 10px; }
.sim-delta.down { color: var(--green); } .sim-delta.up { color: var(--muted-text); }
.sim-name { grid-column: 1 / -1; color: var(--text); font-size: 11px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-spec { grid-column: 1 / -1; color: var(--muted); font-family: var(--mono); font-size: 10px; }
.sim-empty { color: var(--muted-text); font-size: 11px; padding: 6px 8px; font-style: italic; }

/* ===== Chris: "Sold Before" price-watch drawer ===== */
.sold-form {
  display: flex; flex-direction: column; gap: 8px;
  padding: 13px; margin-bottom: 16px; border-radius: var(--radius-s);
  border: 1px solid var(--line); background: var(--panel);
}
.sold-form__title {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--green);
}
.sold-form__row { display: flex; gap: 8px; }
.sold-form__row .field { flex: 1; width: auto; min-width: 0; }
.sold-form .btn-primary {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.5px;
  color: #0b0d0a; background: var(--green); border: none;
  border-radius: 8px; padding: 9px 12px; cursor: pointer; font-weight: 700;
  transition: filter .15s;
}
.sold-form .btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.sold-form .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.sold-form__hint {
  font-family: var(--mono); font-size: 10px; line-height: 1.5; color: var(--muted-text);
}
.sold-form__hint b { color: var(--muted); font-weight: 600; }

.sold-hits {
  font-size: 12.5px; color: var(--text); margin-bottom: 12px;
  padding: 9px 11px; border-radius: var(--radius-s);
  background: rgba(245,176,39,0.10); box-shadow: inset 0 0 0 1px var(--line);
}
.sold-hits b { color: var(--green); }
.sold-list { display: flex; flex-direction: column; gap: 9px; }
.sold-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px; border-radius: var(--radius-s);
  border: 1px solid var(--line-soft); background: var(--panel);
}
.sold-row__main { flex: 1; min-width: 0; }
.sold-label { font-weight: 600; font-size: 13.5px; line-height: 1.25; }
.sold-label a { color: var(--text); text-decoration: none; }
.sold-label a:hover { color: var(--green); text-decoration: underline; }
.sold-meta {
  font-family: var(--mono); font-size: 10px; color: var(--muted-text);
  letter-spacing: 0.3px; margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap;
}
.sold-tgt { color: var(--muted); }
.sold-row__price { text-align: right; flex-shrink: 0; }
.sold-price { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--text); }
.sold-price.under { color: var(--green); }
.sold-price.over { color: var(--muted); }
.sold-price.none { font-size: 10.5px; font-weight: 400; color: var(--muted-text); font-style: italic; }
.sold-ob {
  font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--blue); background: rgba(56,189,248,0.10); padding: 1px 5px; border-radius: 4px;
  vertical-align: middle;
}
.sold-oos {
  font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--red); vertical-align: middle;
}
.sold-vsline { margin-top: 3px; }
.sold-vs { font-family: var(--mono); font-size: 10px; }
.sold-vs.good { color: var(--green); }
.sold-vs.bad { color: var(--muted-text); }
.sold-seen { font-family: var(--mono); font-size: 9px; color: var(--muted-text); margin-top: 2px; }
.sold-del {
  flex-shrink: 0; background: transparent; border: 1px solid var(--line-soft);
  color: var(--muted-text); width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  font-size: 12px; line-height: 1; transition: all .15s;
}
.sold-del:hover:not(:disabled) { color: var(--red); border-color: var(--red); }
.sold-del:disabled { opacity: 0.4; cursor: not-allowed; }
.sold-empty { color: var(--muted); font-size: 12.5px; line-height: 1.55; font-family: var(--mono); }

/* ===== retailer / master site switcher + source pills ===== */
.site-switch {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.3px;
  color: var(--text); background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 12px; cursor: pointer; appearance: none;
  transition: border-color .15s;
  /* the master option ("★ Master · best of all") is long enough to blow the
     nav row out on its own; cap it and let the native select truncate. */
  max-width: 210px; text-overflow: ellipsis;
}
.site-switch:hover { border-color: var(--green); }
.site-switch:focus { outline: none; border-color: var(--green); }
.src-pill {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase; color: #0b0d0a; background: var(--green);
  padding: 2px 8px; border-radius: 999px; line-height: 1.4;
  white-space: nowrap; flex-shrink: 0; align-self: center;
}
.card__meta > span:not(.src-pill), .card__meta { min-width: 0; }
.src-pill.src-newegg { background: #f5a623; color: #1a1200; }   /* Newegg orange */
.src-pill.src-mc     { background: var(--green); }
.src-pill.src-walmart { background: #4dabf7; color: #04142a; }
.src-pill.src-bh { background: #b98cff; color: #17082e; }
.src-pill.src-serversupply { background: #5c7cfa; color: #060a1e; }
.src-pill.src-monoprice { background: #ff922b; color: #1e0e00; }
.src-pill.src-ulta { background: #ff6fae; color: #2b0016; }
.src-pill.src-lenovo { background: #e2231a; color: #fff; }
.src-pill.src-sephora { background: #ff2f6d; color: #0b0d0a; }
.src-pill.src-kendrascott { background: #c9a227; color: #0b0d0a; }
.src-pill.src-adorama { background: #ffb703; color: #0b0d0a; }
.src-pill.src-bestbuy { background: #ffe000; color: #0b0d0a; }
.src-pill.src-chewy { background: #2f7bd0; color: #0b0d0a; }
.src-pill.src-wayfair { background: #7048e8; color: #0b0d0a; }
.src-pill.src-target { background: #e53935; color: #0b0d0a; }
.src-pill.src-delloutlet { background: #0f6fc5; color: #0b0d0a; }
.src-pill.src-carters { background: #f78fb3; color: #2b0016; }

/* ===== master product search box ===== */
.search-box {
  font-family: var(--mono); font-size: 12.5px; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  /* shrinkable: min-width on a flex item is auto-floored at its content size,
     which is what forced the row to overflow instead of giving ground. */
  padding: 8px 14px; flex: 1 1 190px; min-width: 0; max-width: 280px;
  transition: border-color .15s, flex-basis .2s;
}
.search-box::placeholder { color: var(--muted-text); }
.search-box:focus { outline: none; border-color: var(--green); flex-basis: 240px; }
@media (max-width: 760px) { .search-box { min-width: 130px; flex: 1; } }

/* ============================================================ IN-FEED ADS */
/* Spans the whole grid row and reserves its height BEFORE anything loads into
   it. The 250px is a standard medium-rectangle; the slot occupies that space
   from first paint, so a late-loading ad cannot push the grid and undo the
   nav/statline/tab CLS work.

   Styled to read as an ad, not as a deal. Muted background, dashed border and
   a standing label — the opposite of "native", on purpose. A paid slot that
   passes for a ranked deal would break the only promise this site makes. */
.ad-slot {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.015);
}
.ad-slot__label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted-text);
}
/* min-height, not height: a taller unit may grow downward, but the slot can
   never be SHORTER than the space already reserved for it. */
.ad-slot__unit {
  min-height: 250px;
  width: 100%;
  max-width: 336px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 560px) {
  .ad-slot { padding: 10px; }
  .ad-slot__unit { max-width: 300px; }
}

/* ============================================================ THE UNIVERSE */
.nav__btn--star { border-color: var(--green-dim); color: var(--green); }
.nav__btn--star:hover { background: var(--green); color: #0b0d0a; }
.universe-back {
  position: fixed; inset: 0; z-index: 200; overflow-y: auto;
  background: rgba(6,7,5,0.86); backdrop-filter: blur(8px);
  padding: 40px 20px; display: flex; justify-content: center; align-items: flex-start;
}
.universe {
  width: min(1180px, 100%); background: linear-gradient(180deg, var(--panel), var(--bg));
  border: 1px solid var(--line); border-radius: 20px; padding: 30px 28px 36px;
  box-shadow: var(--shadow); position: relative;
}
.universe__close {
  position: absolute; top: 18px; right: 18px; width: 36px; height: 36px;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; cursor: pointer; font-size: 16px;
}
.universe__close:hover { border-color: var(--green); }
.universe__head { text-align: center; margin-bottom: 26px; }
.universe__head h2 { font-family: var(--mono); font-size: 27px; margin: 0 0 6px; color: var(--green); letter-spacing: -0.5px; }
.universe__head h2 b { color: var(--text); }
.universe__head p { color: var(--muted); font-size: 14px; margin: 0; }
.universe__grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.uni-loading { grid-column: 1/-1; text-align: center; color: var(--muted); font-family: var(--mono); padding: 40px; }
.uni-card {
  --uni: var(--green);
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--uni) 35%, transparent);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--uni) 16%, transparent), transparent 70%),
    var(--panel-2);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.uni-card.live { cursor: pointer; }
.uni-card.live:hover {
  transform: translateY(-4px);
  border-color: var(--uni);
  box-shadow: 0 16px 40px -14px color-mix(in srgb, var(--uni) 60%, transparent);
}
.uni-card.soon { opacity: 0.66; }
.uni-art {
  height: 168px; display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(70% 60% at 50% 90%, color-mix(in srgb, var(--uni) 22%, transparent), transparent 72%);
}
.uni-art img { height: 152px; width: auto; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5)); }
.uni-emoji { font-size: 90px; line-height: 168px; }
.uni-body { padding: 4px 15px 17px; }
.uni-status {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 1px; font-weight: 700;
  color: var(--uni); text-transform: uppercase; margin-bottom: 4px;
}
.uni-card.soon .uni-status { color: var(--muted-text); }
.uni-name { font-family: var(--mono); font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -0.3px; }
.uni-name b { color: var(--uni); }
.uni-section { font-size: 12px; color: var(--uni); margin: 2px 0 8px; font-weight: 600; }
.uni-catch { font-size: 12px; color: var(--muted); font-style: italic; line-height: 1.4; }
@media (max-width: 560px) { .universe__grid { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); } .uni-art { height: 130px; } .uni-art img { height: 118px; } }

/* empty-state "browse this retailer" call-to-action */
.browse-cta {
  margin-top: 16px; font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: #0b0d0a; background: var(--green); border: none; border-radius: 999px;
  padding: 11px 20px; cursor: pointer; transition: filter .15s, transform .1s;
  box-shadow: 0 6px 20px -6px var(--green-glow);
}
.browse-cta:hover { filter: brightness(1.08); }
.browse-cta:active { transform: translateY(1px); }

/* ===== pool-derived facet pills + sort chips (search results) ===== */
.facet-bar {
  display: flex; flex-direction: column; gap: 7px;
  margin: 2px 0 14px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--panel);
}
.facet-bar[hidden] { display: none; }
.facet-grp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.facet-lbl {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--muted-text); margin-right: 3px;
  min-width: 62px;
}
.facet-pill {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 11px; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.facet-pill:hover { color: var(--text); border-color: var(--green); }
.facet-pill.on { color: #0b0d0a; background: var(--green); border-color: var(--green); font-weight: 700; }
.facet-pill.on .facet-ct { color: #0b0d0a; opacity: 0.7; }
.facet-ct { opacity: 0.6; font-size: 10.5px; margin-left: 2px; }

/* ===== compare-across-retailers modal ===== */
.legend.compare { max-width: 880px; }
.cmp-head { display: flex; align-items: flex-start; gap: 12px; margin: 0 34px 12px 0; }
.cmp-mascot { font-size: 26px; line-height: 1; flex: none; }
.cmp-title { font-family: var(--mono); font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.25; }
.cmp-sub { color: var(--muted); font-size: 12.5px; font-family: var(--mono); margin-top: 3px; }
.cmp-loading { color: var(--muted); padding: 28px 8px; text-align: center; font-size: 13px; }

.tierband {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 2px 0 14px; padding: 8px 13px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--panel-2); font-size: 12.5px;
}
.tierband .tp {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
  padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap;
}
.tierband .tnote { color: var(--muted); font-size: 11.5px; }
.tierband.exact { border-color: rgba(var(--accent-rgb),.4); }
.tierband.exact .tp { color: var(--green); border-color: rgba(var(--accent-rgb),.5); background: rgba(var(--accent-rgb),.1); }
.tierband.close .tp { color: var(--blue); border-color: rgba(56,189,248,.5); background: rgba(56,189,248,.1); }
.tierband.class { border-color: rgba(240,160,32,.35); }
.tierband.class .tp { color: var(--amber); border-color: rgba(240,160,32,.5); background: rgba(240,160,32,.1); }

.cmp-verdict { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0 16px; }
.cmp-verdict .vbox {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 15px; min-width: 96px;
}
.cmp-verdict .vbox .n { font-family: var(--mono); font-size: 21px; font-weight: 800; color: var(--text); }
.cmp-verdict .vbox .k {
  font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px;
}
.cmp-verdict .vbox.win .n { color: var(--green); }
.cmp-verdict .vbox.lose .n { color: var(--amber); }

.cmp-empty {
  color: var(--muted); font-size: 12.5px; line-height: 1.6;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 16px; margin: 4px 0 14px;
}
.cmp-wsrow { margin-top: 12px; }
.cmp-wsbtn {
  display: inline-block; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--blue); border-radius: 9px; padding: 9px 18px;
  font-weight: 700; font-size: 13px; cursor: pointer; text-decoration: none;
}
.cmp-wsbtn:hover { background: rgba(56,189,248,.12); }
.cmp-wsbtn.sm { border-color: var(--line); color: var(--muted); padding: 6px 13px; font-size: 11.5px; font-weight: 600; }
.cmp-wsbtn.sm:hover { border-color: var(--blue); color: var(--text); background: none; }

.cmp-count { font-size: 11.5px; color: var(--muted-text); font-family: var(--mono); margin: 6px 0 8px; }
.cmp-table { display: flex; flex-direction: column; gap: 5px; }
.cmp-row {
  display: grid; grid-template-columns: 46px 1fr auto auto; gap: 4px 12px;
  align-items: center; padding: 8px 10px; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--line);
  text-decoration: none; transition: border-color .15s, background .15s;
}
.cmp-row:hover { border-color: var(--green); background: var(--panel-hi); }
.cmp-c-img { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; }
.cmp-thumb { max-width: 46px; max-height: 46px; object-fit: contain; border-radius: 6px; background: #fff; }
.cmp-c-name { color: var(--text); font-size: 12.5px; line-height: 1.35; min-width: 0; }
.cmp-star { color: var(--gold); }
.cmp-spec { display: block; color: var(--muted); font-family: var(--mono); font-size: 10.5px; margin-top: 2px; }
.cmp-c-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: flex-end; }
.cmp-cond { font-size: 10.5px; color: var(--amber); font-family: var(--mono); }
.cmp-stock { font-size: 10.5px; font-family: var(--mono); }
.cmp-stock.in { color: var(--green); } .cmp-stock.out { color: var(--muted-text); }
.cmp-c-price { font-family: var(--mono); font-weight: 800; font-size: 15px; color: var(--green); text-align: right; white-space: nowrap; }
.cmp-delta { display: block; font-family: var(--mono); font-size: 10px; font-weight: 600; }
.cmp-delta.down { color: var(--green); } .cmp-delta.up { color: var(--muted-text); }
.cmp-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
@media (max-width: 560px) {
  .cmp-row { grid-template-columns: 40px 1fr auto; }
  .cmp-c-meta { grid-column: 2 / -1; justify-content: flex-start; }
  .cmp-c-img { width: 40px; height: 40px; }
}