/* ═══════════════════════════════════════════════════════
   Beetle Terminal — Apple-inspired long-scroll redesign
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700&display=swap');

:root {
  /* Typography */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Text */
  --text:        #1d1d1f;
  --text-sec:    #6e6e73;
  --text-ter:    #aeaeb2;

  /* Backgrounds — progressive grey as page scrolls */
  --bg-hero:     #ffffff;
  --bg-section1: #ffffff;
  --bg-section2: #ffffff;
  --bg-section3: #f0f0f2;
  --bg-section4: #ebebed;
  --bg-footer:   #e8e8ea;

  /* Card */
  --card-bg:     #ffffff;
  --card-border: rgba(0,0,0,0.08);
  --card-shadow: 0 2px 20px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  --card-radius: 20px;

  /* Accent */
  --blue:        #00a7e1;
  --blue-dark:   #0058b0;
  --green:       #34c759;
  --red:         #ff3b30;

  /* Layout */
  --content-w:   900px;
  --header-h:    52px;

  /* ── Viewport-proportional display sizes ──
     These scale fluidly between laptop (1100px) and large desktop (1920px).
     Below 1100px the mobile breakpoints take over. */
  --hero-fs:        clamp(28px, 2.85vw, 48px);
  --hero-sub-fs:    clamp(12px, 0.9vw, 14px);
  --section-fs:     clamp(22px, 1.95vw, 32px);
  --section2-fs:    clamp(18px, 1.55vw, 24px);
  --stat-fs:        clamp(18px, 1.55vw, 28px);
  --body-fs:        clamp(12px, 0.88vw, 14px);
  --label-fs:       clamp(10px, 0.72vw, 12px);
  --eyebrow-fs:     clamp(9px, 0.66vw, 11px);
  --pill-fs:        clamp(10px, 0.72vw, 13px);
  --pill-h:         clamp(22px, 1.55vw, 30px);
  --chart-h:        clamp(260px, 22vw, 320px);
  --section-pad:    clamp(28px, 2.75vw, 48px);
  --section-pad-x:  clamp(16px, 1.5vw, 24px);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg-hero);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ══════════════════════════════════════════
   HEADER — sticky, frosted, Apple-style
══════════════════════════════════════════ */
.topHeader {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.topHeaderInner {
  height: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;   /* anchor for the viewport-centred search */
}

.brandRow {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.brandLogo {
  width: 44px;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* The brand anchor must be flex or the wordmark renders as an
   underlined inline link and wraps under the logo. */
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

/* Brand wordmark — "Beetle IO" in the thin hero weight. Same rule
   lives in results.css: keep in lockstep. */
.brandName {
  margin-left: 10px;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}

.crumbs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 16px;
  /* Cap so a long artist name can never collide with the
     viewport-centred search bar */
  max-width: 200px;
  min-width: 0;
  overflow: hidden;
}

.crumbLine {
  font-size: var(--body-fs, 13px);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crumbBack {
  font-size: var(--eyebrow-fs, 11px);
  color: var(--text-sec);
  text-decoration: none;
  transition: color .15s;
}
.crumbBack:hover { color: var(--blue); }

/* Header action buttons (right side). margin-left:auto because the
   centred search sits out of the flex flow on desktop — without it
   the actions collapse leftwards next to the brand. */
.headerActions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.headerBtn {
  height: clamp(28px, 2vw, 32px);
  padding: 0 clamp(8px, 0.7vw, 12px);
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--text);
  font-size: var(--label-fs);
  font-weight: 500;
  font-family: var(--font);
  letter-spacing: -0.1px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.headerBtn:hover {
  background: rgba(0,0,0,0.05);
}
.headerBtn--active {
  background: transparent;
  color: var(--brand, #00a7e1);
}
.headerBtn--active:hover {
  background: rgba(0, 167, 225, 0.08);
}

.normBadge {
  font-size: 10px;
  font-weight: 600;
  color: currentColor;
  opacity: 0.75;
  letter-spacing: 0.04em;
}

.headerDividerSep {
  display: none;
}

/* ── Header Search — YouTube-style centered search ── */
.headerSearchWrap {
  flex: 1;
  display: flex;
  justify-content: center;
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}

/* Desktop: centre against the VIEWPORT, not the leftover flex space.
   Flex auto-margins centre the bar between whatever happens to sit
   left and right of it — and the terminal's left side (hamburger +
   logo + crumbs) is wider than the homepage's (logo only), so the two
   bars landed at different x positions. Absolute centring pins both
   to the same spot on every page. results.css carries the IDENTICAL
   rule for .headerSearch — change one, change both. */
@media (min-width: 1100px) {
  .headerSearchWrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(600px, calc(100vw - 700px));
    max-width: none;
    margin: 0;
  }
}

.headerSearchBar {
  width: 100%;
  height: clamp(32px, 2.4vw, 38px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 980px;
  transition: background .15s, border-color .15s, box-shadow .15s;
}

.headerSearchBar:focus-within {
  background: #fff;
  border-color: rgba(0, 167, 225,0.35);
  box-shadow: 0 1px 6px rgba(0, 167, 225,0.10);
}

.headerSearchIcon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: rgba(0,0,0,0.40);
  pointer-events: none;
}

.headerSearchWrap #artistSearch {
  flex: 1;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 14px;
  font-family: var(--font);
  color: var(--text);
  outline: none;
}
.headerSearchWrap #artistSearch::placeholder { color: rgba(0,0,0,0.35); }

/* Suggestions dropdown — anchored to header search */
.headerSearchWrap .sideSug {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 200;
}

/* ── Mobile Back to Homepage bar ── */
.mobileBackBar {
  display: none;
  padding: 10px 16px;
  background: var(--bg-section1);
}
.mobileBackLink {
  font-size: 13px;
  color: var(--text-sec);
  text-decoration: none;
  font-family: var(--font);
}
.mobileBackLink:hover { color: var(--blue); }

/* Legacy .headerDivider — now hidden, actions moved inline */
.headerDivider { display: none; }

/* ══════════════════════════════════════════
   SEARCH BAR — full-width centered hero search
══════════════════════════════════════════ */
.heroSearch {
  background: var(--bg-section1);
  padding: 48px 24px 40px;
  text-align: center;
}

.heroSearchLabel {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--text);
  margin-bottom: 20px;
}

.heroSearchBar {
  position: relative;
  max-width: 560px;
  margin: 0 auto;

  /* Glass pill — matches index.html searchBar */
  height: 50px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(28px) saturate(1.08);
  -webkit-backdrop-filter: blur(28px) saturate(1.08);
  border: 1px solid rgba(255,255,255,0.60);
  border-radius: 25px;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.88),
    inset 0 -1px 1px rgba(0,0,0,0.055),
    0 0 0 1px rgba(255,255,255,0.25),
    0 1px 3px rgba(0,0,0,0.045);
  display: flex;
  align-items: center;
  padding: 0 18px 0 16px;
  gap: 10px;
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Rainbow gradient border ring */
.heroSearchBar::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 27px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(104, 209,  93, 0.55),
    rgba(255, 195,  74, 0.55),
    rgba(255, 122,  74, 0.55),
    rgba(214,  84, 140, 0.55),
    rgba( 77, 124, 255, 0.55)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  filter: blur(0.25px);
  opacity: 0.55;
}

.heroSearchBar:focus-within {
  background: rgba(255,255,255,0.96);
  border-color: rgba(255,255,255,0.74);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.92),
    inset 0 -1px 1px rgba(0,0,0,0.065),
    0 0 0 1px rgba(255,255,255,0.96),
    0 1px 4px rgba(0,0,0,0.06);
}

.heroSearchBar:focus-within::before {
  opacity: 0.85;
}

/* SVG magnifying glass — grey, flex child, always left-pinned */
.heroSearchIcon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: rgba(0,0,0,0.40);
  pointer-events: none;
  padding-left: 4px;
}

#artistSearch {
  flex: 1;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 15px;
  font-family: var(--font);
  color: var(--text);
  outline: none;
}
#artistSearch::placeholder { color: rgba(0,0,0,0.35); }

#artistSug {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  overflow: hidden;
  z-index: 200;
  text-align: left;
}

.sugRow {
  padding: 12px 18px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: baseline;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: background .12s;
}
.sugRow:last-child { border-bottom: none; }
.sugRow:hover { background: #f5f5f7; }
.sugTicker { color: var(--text); font-weight: 600; }
.sugName   { color: var(--text-sec); font-weight: 400; }
.sugId     { margin-left: auto; color: var(--text-ter); font-size: 11px; }

/* ══════════════════════════════════════════
   MAIN SCROLL SHELL — no more 3-col grid
══════════════════════════════════════════ */
.shell {
  display: flex;
  flex-direction: column;
}

/* Legacy grid3 — now unused visually, kept for JS compatibility */
.grid3 {
  display: contents;
}
.side, .right {
  display: none; /* sidebar content migrated inline */
}

/* ══════════════════════════════════════════
   SECTION WRAPPER — each scroll section
══════════════════════════════════════════ */
.scrollSection {
  padding: var(--section-pad) var(--section-pad-x);
}
.scrollSection--white { padding-top: 32px; }
.scrollSection--white  { background: var(--bg-section1); }
.scrollSection--light  { background: var(--bg-section2); }
.scrollSection--mid    { background: var(--bg-section2); }
.scrollSection--dark   { background: var(--bg-section2); }

.sectionInner {
  max-width: var(--content-w);
  margin: 0 auto;
}

/* Section label (e.g. "Price History") */
.sectionEyebrow {
  font-size: var(--eyebrow-fs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-ter);
  margin-bottom: 10px;
}

/* Section heading */
.sectionHeading {
  font-size: var(--section-fs);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.05;
  margin-bottom: 10px;
}

.sectionHeading .dateString {
  font-weight: 400;
}

.sectionHeading2 {
  font-size: var(--section2-fs);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.05;
  margin-bottom: 10px;
}

.sectionSub {
  font-size: var(--body-fs);
  color: var(--text-sec);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* ══════════════════════════════════════════
   ARTIST HERO — top of page after search
══════════════════════════════════════════ */
.artistHero {
  background: var(--bg-section1);
  padding: clamp(24px, 2.5vw, 40px) var(--section-pad-x) clamp(20px, 2vw, 32px);
}

/* Inline hero lives inside a scrollSection — no separate section padding */
.artistHero--inline {
  padding: 0 0 20px 0;
  background: transparent;
}

.artistHeroInner {
  max-width: var(--content-w);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}

.artistHero--inline .artistHeroInner {
  max-width: none;
}

.artistHeroLeft {}

.artistHeroLabel {
  font-size: var(--label-fs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-ter);
  margin-bottom: 10px;
}

/* Artist name + lifespan, inline on one line. Name stays heavy (600);
   dates trail off lighter at 82% size, same colour. */
.artistNameRow {
  margin: 0 0 10px;
  line-height: 1.05;
}

#artistName {
  font-size: var(--hero-fs);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.05;
}

.artistNameDates {
  font-size: calc(var(--hero-fs) * 0.82);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-left: 12px;
  white-space: nowrap;
}

#artistSub {
  font-size: var(--hero-sub-fs);
  color: var(--text);
  letter-spacing: -0.1px;
}

.viewCount {
  display: block;
  font-size: var(--body-fs, 13px);
  color: var(--muted);
  margin-top: 4px;
}

.artistHeroRight {
  text-align: right;
  flex-shrink: 0;
  background: #fcfcfd;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 14px 20px 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  min-width: clamp(260px, 22vw, 340px);
}

[data-theme="dark"] .artistHeroRight {
  background: #2c2c2e;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.artistHeroPriceLabel {
  font-size: var(--label-fs);
  color: var(--text-ter);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  font-weight: 400;
}

#marketValue {
  font-size: var(--hero-fs);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.05;
}

.artistHeroMeta {
  margin-top: 8px;
  font-size: var(--body-fs, 13px);
  color: var(--text-sec);
  font-weight: 400;
}

/* ══════════════════════════════════════════
   CARD — shared card style
══════════════════════════════════════════ */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

/* ══════════════════════════════════════════
   CHART SECTION
══════════════════════════════════════════ */
.chartCard {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.chartCardHeader {
  padding: 0 0 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: none;
}

.chartCardTitle {
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--text);
}

.chartCardMeta {
  font-size: 12px;
  color: var(--text-ter);
  margin-top: 2px;
}

.marketPills {
  display: flex;
  gap: 6px;
  align-items: center;
}

.mPill {
  height: var(--pill-h);
  padding: 0 clamp(10px, 1vw, 16px);
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  font-size: var(--pill-fs);
  font-weight: 500;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  line-height: 1;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  color: rgba(0,0,0,0.48);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.mPill:hover {
  background: rgba(0,0,0,0.04);
  color: rgba(0,0,0,0.72);
}
.mPill.active {
  background: #00a7e1;
  color: #fff;
  border-color: #00a7e1;
}
.mPill.active:hover {
  background: #0077ed;
  border-color: #0077ed;
  box-shadow: 0 2px 10px rgba(0, 167, 225, 0.25);
}

.mPillDivider {
  width: 1px;
  height: 16px;
  align-self: center;
  background: rgba(0,0,0,0.12);
  margin: 0 2px;
}

.mPillEst {
  border: 1px dashed rgba(0,0,0,0.22);
}
.mPillEst.active {
  background: rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.72);
  border: 1px dashed rgba(0,0,0,0.40);
}

/* ── Graph mode pills (Net / Sold / Unsold) ── */
.mPillMode {
  padding: 0 16px;
}
.mPillMode[data-gmode="sold"].active {
  background: #00a7e1;
  color: #fff;
  border-color: #00a7e1;
}
.mPillMode[data-gmode="sold"].active:hover {
  background: #0085b8;
  border-color: #0085b8;
  box-shadow: 0 2px 10px rgba(0, 167, 225, 0.3);
}
.mPillMode[data-gmode="unsold"].active {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.mPillMode[data-gmode="unsold"].active:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.3);
}

.marketCanvasWrap {
  padding: 0;
}

#marketChart {
  width: 100%;
  height: var(--chart-h);
  display: block;
  background: transparent;
}

.marketHint {
  padding: 0 28px 20px;
  font-size: var(--eyebrow-fs);
  color: var(--text-ter);
  line-height: 1.5;
}

/* ══════════════════════════════════════════
   STATS ROW — open/high/low/volume strip
══════════════════════════════════════════ */
.statsStrip {
  display: flex;
  gap: 40px;
  margin-top: 24px;
  padding: 20px 0 4px 0;
  border-top: 1px solid rgba(0,0,0,0.07);
  flex-wrap: wrap;
}

.statCell {
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.statLabel {
  font-size: var(--label-fs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-ter);
}

.statValue {
  font-size: var(--stat-fs);
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--text);
  line-height: 1.1;
}

.statSub {
  margin-top: 6px;
  font-size: var(--label-fs);
  color: var(--text-sec);
}

/* ══════════════════════════════════════════
   PRICE LOOKUP
══════════════════════════════════════════ */
/* ══════════════════════════════════════════
   APPLE-STYLE GRID — Price Lookup + Analysis side by side
══════════════════════════════════════════ */
.appleSection {
  padding: 24px 24px 48px;
  background: var(--bg-section1);
}
.appleGrid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.appleCard {
  border-radius: 20px;
  padding: 32px 24px;
  overflow: hidden;
}
.appleCard--dark {
  background: linear-gradient(160deg, #1d1d1f 0%, #2c2c2e 50%, #1d1d1f 100%);
}
.appleCard--dark .priceLookupHeading { color: #fff; }
.appleCard--dark .priceLookupResults .statLabel { color: rgba(255,255,255,0.5); }
.appleCard--dark .priceLookupResults .statValue { color: rgba(255,255,255,0.85); }
.appleCard--dark .statLabel { color: rgba(255,255,255,0.55); }
.appleCard--dark .statValue { color: #fff; }
.appleCard--dark .priceLookupSelect { background: #fff; color: #1d1d1f; border-color: rgba(255,255,255,0.25); border-radius: 10px; }
.appleCard--dark .priceLookupBtn { background: #fff; color: #1d1d1f; }
.appleCard--dark .priceLookupEmpty { color: rgba(255,255,255,0.5); }

.appleCard--light {
  background: linear-gradient(160deg, #f0f5ff 0%, #e8f0fe 50%, #dce8fa 100%);
}
.appleCard--light .analysisHeroCard { background: transparent !important; border: none !important; box-shadow: none !important; }
.appleCard--light .analysisHeroBg { display: none; }
.appleCard--light .analysisGrid { margin: 0; }

.priceLookupSection {
  background: #f5f5f7;
  padding: 48px 24px;
}

.priceLookup {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.priceLookupHeader {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.priceLookupHeading {
  font-size: clamp(24px, 3vw, 48px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
  white-space: nowrap;
  line-height: 1.05;
}

.priceLookupControls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.priceLookupSelect {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,0.14);
  border-radius: 10px;
  padding: 11px 36px 11px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  min-width: 140px;
  transition: border-color 0.15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.priceLookupSelect:focus {
  outline: none;
  border-color: #00a7e1;
}

.priceLookupBtn {
  background: var(--text, #111);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 11px 24px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.priceLookupBtn:hover { opacity: 0.8; }

/* Two-row grid of stats, no gap background */
.priceLookupResults {
  display: none;
  flex-wrap: wrap;
  row-gap: 28px;
  column-gap: 0;
}
.priceLookupResults.visible {
  display: flex;
}

.priceLookupResults .statCell {
  min-width: 200px;
  padding-right: 48px;
  flex: 0 0 auto;
}

.priceLookupResults .statLabel {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-ter);
  margin-bottom: 6px;
}

.priceLookupResults .statValue {
  font-size: clamp(24px, 2.25vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.05;
}

.priceLookupEmpty {
  display: none;
  font-size: 14px;
  color: var(--text-sec);
}
.priceLookupEmpty.visible { display: block; }

/* ══════════════════════════════════════════
   TABLE SECTION
══════════════════════════════════════════ */
.tableCard { /* extends .card */ }

.tabsRow {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: transparent;
}

.tab {
  height: 36px;
  padding: 0 4px;
  margin: 0 10px 0 0;
  border-radius: 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-size: var(--body-fs, 13px);
  font-weight: 400;
  font-family: var(--font);
  color: var(--text-sec);
  cursor: pointer;
  transition: color .15s, border-color .15s;
  position: relative;
  top: 1px;
}
.tab:hover {
  color: var(--text);
  background: transparent;
}
.tab.active {
  color: var(--text);
  font-weight: 500;
  border-bottom-color: var(--text);
  background: transparent;
}

.tabsSpacer { margin-left: auto; }

/* Lot search */
.lotSearchWrap {
  position: relative;
  display: flex;
  align-items: center;
}
.lotSearchIcon {
  position: absolute;
  left: 10px;
  font-size: 13px;
  color: var(--text-ter);
  pointer-events: none;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
}
.lotSearchInput {
  height: 32px;
  width: 180px;
  border-radius: 980px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #f5f5f7;
  padding: 0 28px 0 28px;
  font-size: 12px;
  font-family: var(--font);
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s, width .2s;
}
.lotSearchInput:focus {
  border-color: rgba(0,0,0,0.24);
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  width: 220px;
}
.lotSearchInput::placeholder { color: var(--text-ter); }
.lotSearchClear {
  position: absolute;
  right: 8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.15);
  color: rgba(0,0,0,0.55);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.miniBtn {
  height: 32px;
  padding: 0 14px;
  border-radius: 980px;
  border: 1px solid rgba(0,0,0,0.12);
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font);
  color: var(--text-sec);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.miniBtn:hover {
  background: rgba(0,0,0,0.05);
  color: var(--text);
}

/* Lots table */
.tableWrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.lotsTable {
  width: 100%;
  min-width: 680px;
  border-collapse: separate;
  border-spacing: 0;
}

.lotsTable th {
  padding: 10px 20px;
  font-size: var(--eyebrow-fs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-ter);
  background: #f5f5f7;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  position: sticky;
  top: 0;
  z-index: 5;
  white-space: nowrap;
}

.lotsTable td {
  padding: 14px 20px;
  font-size: var(--body-fs);
  color: var(--text);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  line-height: 1.4;
}

.lotsTable tr:last-child td { border-bottom: none; }
.lotsTable tr:hover td { background: rgba(0,0,0,0.015); }
.lotRow { cursor: pointer; }
.tdTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; }
.rightNum { text-align: right; font-variant-numeric: tabular-nums; }

/* Expand row */
.expandRow td { background: #fafafa; border-bottom: 1px solid rgba(0,0,0,0.05); }
.expandCell { padding: 16px 20px !important; }
.expandGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 20px;
  font-size: 13px;
  color: var(--text-sec);
  margin-bottom: 12px;
}
.expandGrid div strong {
  color: var(--text-ter);
  font-weight: 500;
  margin-right: 4px;
}
.expandActions {
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: 6px;
}

/* Pagination */
/* ── Google-style pagination ── */
.googlePager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px 0 16px;
  flex-wrap: wrap;
}
.gpBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  border-radius: 50%;
  border: none;
  background: transparent;
  font-family: arial, sans-serif;
  font-size: 13px;
  color: #00a7e1;
  cursor: pointer;
  transition: background .12s;
  text-decoration: none;
  font-weight: 400;
}
.gpBtn:hover:not(.gpNum--active):not(.gpArrow--disabled) {
  background: rgba(26, 13, 171, 0.07);
}
.gpNum--active {
  background: #00a7e1;
  color: #fff !important;
  font-weight: 700;
  border-radius: 50%;
  cursor: default;
}
.gpArrow {
  font-size: 20px;
  color: #00a7e1;
  font-weight: 400;
  padding: 0 10px;
  border-radius: 4px;
  min-width: 44px;
}
.gpArrow--disabled {
  color: rgba(0,0,0,0.18) !important;
  cursor: default;
  pointer-events: none;
}
.gpNumbers {
  display: flex;
  align-items: center;
  gap: 2px;
}
.pageMeta {
  margin-left: 16px;
  font-size: 12px;
  color: var(--text-ter);
  white-space: nowrap;
}

/* dark mode overrides for pagination */
[data-theme="dark"] .gpBtn { color: #00a7e1; }
[data-theme="dark"] .gpNum--active { background: #00a7e1; color: #202124 !important; }
[data-theme="dark"] .gpArrow { color: #00a7e1; }
[data-theme="dark"] .gpBtn:hover:not(.gpNum--active):not(.gpArrow--disabled) { background: rgba(0, 167, 225,0.1); }

/* ══════════════════════════════════════════
   FILTER BROWSER — two-panel overlay
══════════════════════════════════════════ */
.fbOverlay {
  background: #fff;
  border-radius: 16px;
  margin-bottom: 8px;
  animation: fbSlideIn .22s cubic-bezier(.16,1,.3,1);
  max-height: 55vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@keyframes fbSlideIn {
  from { opacity: 0; max-height: 0; }
  to   { opacity: 1; max-height: 55vh; }
}
.fbOverlay--hiding {
  animation: fbSlideOut .25s cubic-bezier(.4,0,1,1) forwards;
}
@keyframes fbSlideOut {
  from { opacity: 1; max-height: 55vh; transform: translateY(0); }
  to   { opacity: 0; max-height: 0; transform: translateY(-12px); }
}
[data-theme="dark"] .fbOverlay {
  background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
}

/* ── Panel: left nav + right content ── */
.fbPanel {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Left nav ── */
.fbNavWrap {
  display: contents; /* On desktop, wrapper is invisible — nav renders as direct child */
}
.fbNavArrow { display: none; } /* Hidden on desktop */
.fbNav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 0 16px 0;
  min-width: 140px;
  max-width: 160px;
  border-right: 1px solid rgba(0,0,0,0.04);
  overflow-y: auto;
  flex-shrink: 0;
}
[data-theme="dark"] .fbNav { border-right-color: rgba(255,255,255,0.06); }
.fbNavItem {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  font-family: var(--font);
  font-size: var(--body-fs, 12.5px);
  font-weight: 400;
  color: var(--text-sec, #666);
  background: none;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: all .12s;
  text-align: left;
  white-space: nowrap;
  letter-spacing: .2px;
}
.fbNavItem:hover { color: var(--text-pri, #111); background: rgba(0,0,0,0.025); }
.fbNavItem.active {
  color: var(--text-pri, #111);
  font-weight: 500;
  border-left-color: #00a7e1;
  background: rgba(0, 167, 225,0.03);
}
.fbNavItem.fb-has-active::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #00a7e1;
  margin-left: auto;
  flex-shrink: 0;
}
[data-theme="dark"] .fbNavItem { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .fbNavItem:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.04); }
[data-theme="dark"] .fbNavItem.active {
  color: #e8eaed;
  border-left-color: #00a7e1;
  background: rgba(0, 167, 225,0.06);
}
[data-theme="dark"] .fbNavItem.fb-has-active::after { background: #00a7e1; }

/* ── Right content ── */
.fbContent {
  flex: 1;
  padding: 16px 20px;
  overflow-y: auto;
  min-height: 0;
}
.fbSectionTitle {
  font-family: var(--font);
  font-size: var(--eyebrow-fs, 10px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-ter, #999);
  margin: 0 0 14px 0;
}
[data-theme="dark"] .fbSectionTitle { color: rgba(255,255,255,0.35); }

/* ── Card grid ── */
/* ── Card row: single horizontal line with scroll arrows ── */
.fbCardRow {
  position: relative;
}
.fbCardScroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 8px;
  margin: -8px -8px;
}
.fbCardScroll::-webkit-scrollbar { display: none; }
.fbCardArrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(22px, 1.75vw, 28px);
  height: clamp(22px, 1.75vw, 28px);
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 1px 6px rgba(0,0,0,0.12);
  font-size: clamp(11px, 0.88vw, 14px);
  font-weight: 400;
  color: var(--text-sec, #555);
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s, background .12s;
  line-height: 1;
  padding: 0;
}
.fbCardArrow:hover { background: #fff; }
.fbCardArrow--left { left: -4px; }
.fbCardArrow--right { right: -4px; }
.fbCardArrow--hidden { opacity: 0; pointer-events: none; }
[data-theme="dark"] .fbCardArrow { background: rgba(50,50,50,0.85); color: rgba(255,255,255,0.7); box-shadow: 0 1px 6px rgba(0,0,0,0.3); }
[data-theme="dark"] .fbCardArrow:hover { background: rgba(70,70,70,0.95); }
.fbCard {
  position: relative;
  border-radius: clamp(10px, 0.75vw, 12px);
  padding: clamp(10px, 0.88vw, 14px) clamp(9px, 0.75vw, 12px);
  min-height: clamp(48px, 4vw, 64px);
  min-width: clamp(76px, 6.25vw, 100px);
  max-width: clamp(105px, 8.75vw, 140px);
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.25,.1,.25,1), box-shadow .35s ease, opacity .2s;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  text-align: left;
  font-family: var(--font);
}
.fbCard:hover {
  transform: scale(1.015);
  box-shadow: 0 3px 10px rgba(0,0,0,0.07);
}
.fbCard:active { transform: scale(0.99); }
.fbCardLabel {
  position: relative;
  z-index: 1;
  font-size: var(--body-fs, 12.5px);
  font-weight: 400;
  color: var(--text);
  line-height: 1.35;
  word-break: break-word;
  letter-spacing: .15px;
}
.fbCardCount {
  position: absolute;
  top: clamp(6px, 0.5vw, 8px);
  right: clamp(7px, 0.6vw, 10px);
  z-index: 1;
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 300;
  color: rgba(0,0,0,0.35);
  letter-spacing: -.5px;
  line-height: 1;
}
.fbCard--active {
  box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px #00a7e1, 0 4px 16px rgba(0, 167, 225,0.25);
}
[data-theme="dark"] .fbCard--active {
  box-shadow: 0 0 0 2.5px rgba(30,30,30,0.9), 0 0 0 4.5px #00a7e1, 0 4px 16px rgba(0, 167, 225,0.3);
}
.fbCard--active .fbCardLabel { font-weight: 500; }
.fbCard--active .fbCardCount { color: rgba(255,255,255,0.9); }
/* Cycle indicator check */
.fbCard--active::after {
  content: "✓";
  position: absolute;
  top: clamp(6px, 0.5vw, 8px); left: clamp(7px, 0.6vw, 10px);
  font-size: var(--label-fs);
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  z-index: 2;
}
/* Three-state attribution/house cards */
.fbCard--show {
  box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px #00a7e1, 0 4px 16px rgba(0, 167, 225,0.25);
}
.fbCard--show::after { content: "Show"; position: absolute; top: 10px; left: 12px; font-size: 9px; font-weight: 400; color: rgba(255,255,255,0.85); z-index: 2; letter-spacing: .5px; text-transform: uppercase; background: rgba(255,255,255,0.15); padding: 2px 6px; border-radius: 4px; }
.fbCard--hide {
  box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px #c53030, 0 4px 16px rgba(197,48,48,0.25);
  opacity: 0.7;
}
.fbCard--hide::after { content: "Hide"; position: absolute; top: 10px; left: 12px; font-size: 9px; font-weight: 400; color: rgba(255,255,255,0.85); z-index: 2; letter-spacing: .5px; text-transform: uppercase; background: rgba(197,48,48,0.35); padding: 2px 6px; border-radius: 4px; }
[data-theme="dark"] .fbCard--show { box-shadow: 0 0 0 2.5px rgba(30,30,30,0.9), 0 0 0 4.5px #00a7e1, 0 4px 16px rgba(0, 167, 225,0.3); }
[data-theme="dark"] .fbCard--hide { box-shadow: 0 0 0 2.5px rgba(30,30,30,0.9), 0 0 0 4.5px #f87171, 0 4px 16px rgba(248,113,113,0.3); }

/* Gradient palette — muted, restrained tones */
.fbCard[data-grad="0"]  { background: #fff; }
.fbCard[data-grad="1"]  { background: #fff; }
.fbCard[data-grad="2"]  { background: #fff; }
.fbCard[data-grad="3"]  { background: #fff; }
.fbCard[data-grad="4"]  { background: #fff; }
.fbCard[data-grad="5"]  { background: #fff; }
.fbCard[data-grad="6"]  { background: #fff; }
.fbCard[data-grad="7"]  { background: #fff; }
.fbCard[data-grad="8"]  { background: #fff; }
.fbCard[data-grad="9"]  { background: #fff; }
.fbCard[data-grad="10"] { background: #fff; }
.fbCard[data-grad="11"] { background: #fff; }
.fbCard[data-grad="12"] { background: #fff; }
.fbCard[data-grad="13"] { background: #fff; }
.fbCard[data-grad="14"] { background: #fff; }
.fbCard[data-grad="15"] { background: #fff; }
.fbCard[data-grad="neutral"] { background: #fff; }

/* Active state — blue fill */
.fbCard--active {
  background: #00a7e1 !important;
  border-color: #00a7e1;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #00a7e1;
}
.fbCard--active .fbCardLabel { color: #fff; font-weight: 500; }
.fbCard--active .fbCardCount { color: rgba(255,255,255,0.9); }
.fbCard--active::after { color: rgba(255,255,255,0.85); }

/* Disabled cards — greyed out when filter would yield 0 results */
.fbCard--disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}
.fbCard--disabled .fbCardLabel::after {
  content: "No results";
  display: block;
  font-size: 9px;
  font-weight: 400;
  color: var(--text-ter);
  margin-top: 2px;
  letter-spacing: 0;
}

/* Disabled list items */
.fbListItem--disabled {
  opacity: 0.35;
  pointer-events: none;
}
/* dark card grads removed — overridden below */
/* dark card grads removed — overridden below */
/* dark card grads removed — overridden below */
/* dark card grads removed — overridden below */
/* dark card grads removed — overridden below */
/* dark card grads removed — overridden below */
/* dark card grads removed — overridden below */
/* dark card grads removed — overridden below */
/* dark card grads removed — overridden below */
/* dark card grads removed — overridden below */
/* dark card grads removed — overridden below */
/* dark card grads removed — overridden below */
/* dark card grads removed — overridden below */
/* dark card grads removed — overridden below */
/* dark card grads removed — overridden below */
/* dark card grads removed — overridden below */
/* dark card grads removed — overridden below */

/* ── Price range custom inputs inside fbContent ── */
.fbPriceInputRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.fbPriceInputWrap {
  display: flex;
  align-items: center;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  height: clamp(30px, 2.25vw, 36px);
  padding: 0 10px;
  gap: 4px;
  flex: 1;
  max-width: 140px;
}
.fbPricePrefix { font-size: var(--body-fs, 13px); color: var(--text-ter); font-weight: 500; }
.fbPriceInput {
  border: none; outline: none; background: transparent;
  width: 100%; font-size: var(--body-fs, 13px); color: var(--text-pri);
  font-family: var(--font);
  -moz-appearance: textfield;
}
.fbPriceInput::-webkit-outer-spin-button,
.fbPriceInput::-webkit-inner-spin-button { -webkit-appearance: none; }
.fbPriceDash { font-size: 14px; color: var(--text-ter); }
[data-theme="dark"] .fbPriceInputWrap { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
[data-theme="dark"] .fbPriceInput { color: rgba(255,255,255,0.85); }

/* ── Apple-style toggle list (mediums, attributions, houses) ── */
.fbList {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: clamp(10px, 0.88vw, 14px);
  max-height: clamp(200px, 16.25vw, 260px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0;
}
[data-theme="dark"] .fbList {
  background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
}
.fbListItem {
  display: flex;
  align-items: center;
  padding: clamp(6px, 0.6vw, 10px) clamp(10px, 1vw, 16px) clamp(6px, 0.6vw, 10px) clamp(8px, 0.75vw, 12px);
  cursor: pointer;
  transition: background .1s;
  gap: clamp(6px, 0.6vw, 10px);
  font-family: var(--font);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.fbListItem:hover { background: rgba(0,0,0,0.03); }
[data-theme="dark"] .fbListItem:hover { background: rgba(255,255,255,0.04); }
.fbListCheck {
  width: clamp(15px, 1.25vw, 20px);
  height: clamp(15px, 1.25vw, 20px);
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .12s;
  font-size: clamp(8px, 0.68vw, 11px);
  color: transparent;
  background: transparent;
}
.fbListItem--active .fbListCheck {
  border-color: #00a7e1;
  background: #00a7e1;
  color: #fff;
}
.fbListItem--show .fbListCheck {
  border-color: #00a7e1;
  background: #00a7e1;
  color: #fff;
}
.fbListItem--hide .fbListCheck {
  border-color: #c53030;
  background: #c53030;
  color: #fff;
}
[data-theme="dark"] .fbListCheck { border-color: rgba(255,255,255,0.18); }
[data-theme="dark"] .fbListItem--active .fbListCheck { border-color: #00a7e1; background: #00a7e1; color: #202124; }
[data-theme="dark"] .fbListItem--show .fbListCheck { border-color: #00a7e1; background: #00a7e1; color: #202124; }
[data-theme="dark"] .fbListItem--hide .fbListCheck { border-color: #f87171; background: #f87171; color: #202124; }
.fbListLabel {
  flex: 1;
  font-size: var(--body-fs, 13px);
  font-weight: 400;
  color: var(--text-pri, #1d1d1f);
  letter-spacing: .1px;
}
[data-theme="dark"] .fbListLabel { color: rgba(255,255,255,0.85); }
.fbListCount {
  font-size: var(--label-fs);
  font-weight: 300;
  color: var(--text-ter, #999);
  letter-spacing: -.3px;
  flex-shrink: 0;
}
[data-theme="dark"] .fbListCount { color: rgba(255,255,255,0.35); }
.fbListTag {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.fbListItem--show .fbListTag { background: rgba(0, 167, 225,0.08); color: #00a7e1; }
.fbListItem--hide .fbListTag { background: rgba(197,48,48,0.08); color: #c53030; }
[data-theme="dark"] .fbListItem--show .fbListTag { background: rgba(0, 167, 225,0.12); color: #00a7e1; }
[data-theme="dark"] .fbListItem--hide .fbListTag { background: rgba(248,113,113,0.12); color: #f87171; }

/* ── Close bar ── */
.fbCloseBar {
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  border-top: none;
  flex-shrink: 0;
  order: -1;
}
[data-theme="dark"] .fbCloseBar { border-bottom-color: rgba(255,255,255,0.06); border-top: none; }
.fbCloseBtn {
  padding: 7px 28px;
  border-radius: 980px;
  border: 1px solid rgba(0,0,0,0.12);
  background: var(--bg, #fff);
  color: var(--text, #1d1d1f);
  font-size: var(--label-fs);
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all .15s;
}
.fbCloseBtn:hover { background: var(--text, #1d1d1f); color: #fff; border-color: var(--text); }
[data-theme="dark"] .fbCloseBtn { border-color: rgba(255,255,255,0.18); }
[data-theme="dark"] .fbCloseBtn:hover { background: #e8e8ed; color: #1d1d1f; }

/* Unsold toggle pill */
.fbUnsoldToggle {
  padding: 7px 20px;
  border-radius: 980px;
  border: 1px solid rgba(0,0,0,0.12);
  background: var(--bg, #fff);
  color: var(--text-sec, #6e6e73);
  font-size: var(--label-fs);
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
}
.fbUnsoldToggle:hover { border-color: #00a7e1; color: #00a7e1; }
.fbUnsoldToggle--on {
  background: #00a7e1;
  border-color: #00a7e1;
  color: #fff;
}
.fbUnsoldToggle--on:hover { background: #005bb5; border-color: #005bb5; }
[data-theme="dark"] .fbUnsoldToggle { border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.5); }
[data-theme="dark"] .fbUnsoldToggle:hover { border-color: #00a7e1; color: #00a7e1; }
[data-theme="dark"] .fbUnsoldToggle--on { background: #00a7e1; border-color: #00a7e1; color: #fff; }
[data-theme="dark"] .fbUnsoldToggle--on:hover { background: #1a7fe0; border-color: #1a7fe0; }

/* ── Show filter trigger (appears after hide) ── */
.fbShowTrigger {
  text-align: left;
  margin: 0 0 6px;
  animation: fbFadeIn .2s ease;
}
@keyframes fbFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fbShowBtn {
  padding: 7px 24px;
  border-radius: 980px;
  border: 1px solid rgba(0,0,0,0.1);
  background: transparent;
  color: var(--text-sec, #666);
  font-size: var(--label-fs);
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all .15s;
  letter-spacing: .2px;
}
.fbShowBtn:hover { background: var(--text, #1d1d1f); color: #fff; border-color: var(--text); }
[data-theme="dark"] .fbShowBtn { border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.5); }
[data-theme="dark"] .fbShowBtn:hover { background: #e8e8ed; color: #1d1d1f; }

/* ── Auction house "show all" link ── */
.fbShowAll {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-ter);
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .12s;
}
.fbShowAll:hover { color: var(--text-pri); }
[data-theme="dark"] .fbShowAll { color: rgba(255,255,255,0.4); }
[data-theme="dark"] .fbShowAll:hover { color: rgba(255,255,255,0.8); }


/* ── Sales search bar (hero, sits above tabs) ── */
.salesSearchBar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.lotSearchWrap--hero {
  flex: 1;
}
.lotSearchWrap--hero .lotSearchInput {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: 1.5px solid rgba(0,0,0,0.13);
  background: #fff;
  font-size: 15px;
  padding: 0 44px 0 42px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: border-color .15s, box-shadow .15s;
}
.lotSearchWrap--hero .lotSearchInput:focus {
  width: 100%;
  border-color: rgba(0, 167, 225,0.4);
  box-shadow: 0 2px 12px rgba(0, 167, 225,0.1);
  background: #fff;
}
.lotSearchWrap--hero .lotSearchIcon {
  left: 14px;
  font-size: 17px;
  color: rgba(0,0,0,0.35);
}
.lotSearchWrap--hero .lotSearchClear {
  right: 12px;
  width: 20px;
  height: 20px;
  font-size: 12px;
  background: rgba(0,0,0,0.18);
}

/* ── Sales tabs row (no card border) ── */
.salesTabsRow {
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding: 0 0 0 0;
  margin-bottom: 0;
  background: transparent;
}

/* ── View mode tabs (Google / Table) ── */
.viewTabGroup {
  display: flex;
  align-items: center;
  gap: 2px;
}
.viewTab {
  height: 30px;
  padding: 0 14px;
  border-radius: 980px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--font);
  color: var(--text-ter);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.viewTab:hover {
  background: rgba(0,0,0,0.04);
  color: var(--text-sec);
}
.viewTab.active {
  color: #0085b8;
  background: rgba(0, 167, 225,0.07);
  border-color: rgba(0, 167, 225,0.18);
}

/* ── View toggle (replaced by .viewTab) ── */

/* ── Search / Google-style list view ── */
.lotsSearchList {
  padding: 4px 0;
}

.lotSearchResult {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  cursor: default;
  transition: background .12s;
}
.lotSearchResult:last-child { border-bottom: none; }

.lsrLeft {
  flex: 1;
  min-width: 0;
}

.lsrBreadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--eyebrow-fs);
  color: var(--text-ter);
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}
.lsrBreadcrumb .lsrSep {
  opacity: 0.4;
  font-size: 10px;
}

.lsrTitle {
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 400;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 4px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lsrTitleLink {
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
}
.lsrTitleLink .lsrTitle {
  color: #5b8db8;
  margin-bottom: 0;
  text-decoration: none;
}
.lsrTitleLink:hover .lsrTitle {
  color: #4a7aa3;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lsrMeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 5px;
}
.lsrPrice {
  font-size: var(--body-fs, 13px);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.lsrPriceSep {
  font-size: 11px;
  color: rgba(0,0,0,0.2);
}
.lsrEst {
  font-size: var(--label-fs);
  color: var(--text-ter);
  font-variant-numeric: tabular-nums;
}
.lsrDate {
  font-size: var(--label-fs);
  color: var(--text-ter);
  margin-left: auto;
}

.lsrSnippet {
  font-size: var(--body-fs, 13px);
  color: var(--text-sec);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: none;
}
.lsrSnippet--expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.lsrMoreBtn {
  font-size: var(--eyebrow-fs);
  font-weight: 500;
  color: #0085b8;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font);
  text-decoration: none;
  transition: opacity .12s;
  line-height: 1.6;
}
.lsrMoreBtn:hover { opacity: 0.7; }

/* ── Price Vector Badge — scales with viewport ── */
.pvBadge {
  font-size: var(--body-fs) !important;
  font-weight: 400;
}

.lsrRight {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 6px;
  padding-top: 2px;
}

.lsrHousePill {
  font-size: var(--eyebrow-fs);
  font-weight: 500;
  color: #bdbdbd;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
}

.lsrActions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.lsrAiSearchBtn {
  font-size: var(--eyebrow-fs);
  font-weight: 500;
  color: #0085b8;
  background: rgba(0, 167, 225,0.07);
  border: 1px solid rgba(0, 167, 225,0.18);
  border-radius: 980px;
  padding: 4px 12px;
  cursor: pointer;
  font-family: var(--font);
  transition: background .12s, border-color .12s;
  text-decoration: none;
  display: inline-block;
  line-height: 1.6;
}
.lsrAiSearchBtn:hover {
  background: rgba(0, 167, 225,0.13);
  border-color: rgba(0, 167, 225,0.3);
}
.lsrGoogleBtn {
  font-size: var(--eyebrow-fs);
  font-weight: 500;
  color: #6c8cac;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(0, 167, 225,0.18);
  border-radius: 980px;
  padding: 4px 12px;
  cursor: pointer;
  font-family: var(--font);
  transition: background .12s, border-color .12s;
  text-decoration: none;
  display: inline-block;
  line-height: 1.6;
}
.lsrGoogleBtn:hover {
  background: rgba(0, 167, 225,0.13);
  border-color: rgba(0, 167, 225,0.3);
}
.lsrLotrankBtn {
  font-size: var(--eyebrow-fs);
  font-weight: 500;
  color: var(--text-sec);
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 980px;
  padding: 4px 12px;
  cursor: pointer;
  font-family: var(--font);
  transition: background .12s;
}
.lsrLotrankBtn:hover { background: rgba(0,0,0,0.04); }
.lsrLotrankBtn:disabled { opacity: 0.5; cursor: wait; }

.lsrExpandPanel {
  background: #fafafa;
  border-top: 1px solid rgba(0,0,0,0.05);
  padding: 14px 24px 16px;
  display: none;
}
.lsrExpandPanel.open { display: block; }
.lsrExpandGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 6px 20px;
  font-size: 13px;
  color: var(--text-sec);
  margin-bottom: 12px;
}
.lsrExpandGrid div strong {
  color: var(--text-ter);
  font-weight: 500;
  margin-right: 4px;
}
.lsrLotrankResults { margin-top: 10px; }

/* House-by-house in search view */
.lsrHouseRow {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.lsrHouseRow:last-child { border-bottom: none; }
.lsrHouseRank {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-ter);
  width: 20px;
  text-align: right;
  flex-shrink: 0;
}
.lsrHouseName {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.lsrHouseTop {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}


.keyTableWrap { overflow-x: auto; }
.keyTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.keyTable th, .keyTable td {
  padding: 12px 20px;
  font-size: 13px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  white-space: nowrap;
}
.keyTable th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-ter);
  background: #f5f5f7;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.keyTable tr:last-child td { border-bottom: none; }
.keyTable a { color: var(--blue); text-decoration: none; }
.keyTable a:hover { text-decoration: underline; }
.right { text-align: right; }

.keyFooter {
  padding: 16px 20px;
  display: flex;
  justify-content: center;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.viewBtn {
  height: 36px;
  padding: 0 20px;
  border-radius: 980px;
  border: 1px solid rgba(0,0,0,0.14);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  color: var(--text);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.viewBtn:hover {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.22);
}

/* ══════════════════════════════════════════
   KEY DATA / METADATA SECTION
══════════════════════════════════════════ */
.kvGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.kvCard {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.k {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-ter);
  margin-bottom: 6px;
}

.v {
  font-size: clamp(14px, 1.15vw, 18px);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.3px;
}

/* .kv / .kvRow — typographic hierarchy, no cards */
.kv {
  display: flex;
  flex-direction: column;
  padding: 8px 28px 20px;
  gap: 0;
}

.kvRow {
  display: flex;
  flex-direction: column;
  padding: 18px 0;
  gap: 5px;
}
.kvRow .k {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(29,29,31,0.38);
  font-family: var(--font);
  margin-bottom: 0;
}

.kvRow .v {
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 600;
  letter-spacing: -0.5px;
  color: rgba(29,29,31,0.88);
  font-family: var(--font);
  line-height: 1.1;
  margin-left: 0;
}

.kvRow--artist .v {
  font-size: clamp(18px, 1.6vw, 26px);
  font-weight: 500;
  letter-spacing: -0.8px;
  color: rgba(29,29,31,0.92);
}

.kvRow--ticker .v {
  font-size: var(--body-fs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(29,29,31,0.45);
  text-transform: uppercase;
}

/* Total value row */
.kvRow--total .v {
  font-size: clamp(16px, 1.5vw, 24px);
  font-weight: 600;
  letter-spacing: -0.5px;
  color: rgba(29,29,31,0.88);
}

/* ══════════════════════════════════════════
   ANALYSIS SECTION — unified gradient card
   MacBook Air sky-blue clean gradient
══════════════════════════════════════════ */

/* Single full-width unified card — no grid split */
.analysisGrid {
  display: block;
}

/* ── The one card: sharp corners, gradient bg ── */
.analysisHeroCard {
  position: relative;
  overflow: hidden;
  background: transparent !important;
  border: 1px solid rgba(180,210,240,0.60) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Gradient — faithful to MacBook Air: cool sky at top-left, fades to near-white */
.analysisHeroBg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 0% 0%,   rgba(168,210,250,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 0%, rgba(190,222,255,0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 100%, rgba(230,242,255,0.40) 0%, transparent 55%),
    linear-gradient(175deg, #e8f4ff 0%, #f0f8ff 25%, #f6fbff 55%, #fafcff 80%, #ffffff 100%);  z-index: 0;
}

.analysisHeroBg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 5%, rgba(255,255,255,0.70) 0%, transparent 40%);
  z-index: 1;
}

.analysisHeroInner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  grid-template-rows: auto 1fr;
  min-height: 420px;
}

/* ── Header bar spans full width ── */
.analysisHeroHeader {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px 16px;
  border-bottom: none;
}

.subTitleLight {
  font-size: clamp(20px, 1.75vw, 28px);
  font-weight: 500;
  letter-spacing: -0.5px;
  color: rgba(0, 0, 0, 0.9);
}

/* ── Left column: donut + legend ── */
.analysisLeftCol {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  padding-bottom: 28px;
}

/* Donut canvas */
.pieWrapHero {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 28px 16px;
}

.pieWrapHero #pieChart {
  width: 100%;
  max-width: 280px;
  height: 280px;
  display: block;
}

/* ── Divider ── */
.analysisDivider {
  display: none;
}

/* ── Right column: key data ── */
.analysisRightCol {
  grid-column: 3;
  grid-row: 2;
  display: flex;
  flex-direction: column;
}

.analysisRightCol .subTitle {
  border-bottom: none;
  background: transparent;
  color: rgba(29,29,31,0.88);
}
.analysisRightCol .kv {
  flex: 1;
}

.analysisRightCol .keyFooter {
  border-top: none;
  background: transparent;
}
/* ── House legend ── */
.houseLegend {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 20px 8px;
}

.houseLegendRow {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 1px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.houseLegendRow:hover {
  background: rgba(255,255,255,0.55);
}

.houseDot {
  grid-row: 1 / 3;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}

.houseLegendName {
  font-size: var(--body-fs, 13px);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.houseLegendPct {
  font-size: var(--body-fs, 13px);
  font-weight: 600;
  color: var(--text);
  text-align: right;
  padding-left: 12px;
}

.houseLegendSub {
  grid-column: 2;
  font-size: var(--eyebrow-fs);
  color: var(--text-ter);
}
.legendToggleBtn {
  margin: 8px 12px 4px;
  padding: 6px 14px;
  border: 1px solid rgba(160,200,240,0.50);
  border-radius: 980px;
  background: rgba(255,255,255,0.50);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font);
  color: rgba(29,29,31,0.60);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.legendToggleBtn:hover {
  background: rgba(255,255,255,0.80);
  color: rgba(29,29,31,0.90);
}
/* ── Toggle pill ── */
.togglePill {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.togglePill input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}

.toggleTrack {
  position: relative;
  display: block;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: rgba(0,0,0,0.15);
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.togglePill input:checked ~ .toggleTrack {
  background: rgba(29,29,31,0.80);
}

.toggleThumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.20);
  transition: transform 0.2s ease;
}

.togglePill input:checked ~ .toggleTrack .toggleThumb {
  transform: translateX(16px);
}

.toggleLbl {
  font-size: 12px;
  font-weight: 500;
  color: rgba(29,29,31,0.65);
  min-width: 72px;
}

/* ── Key data card suppressed (merged in) ── */
.analysisKeyCard {
  display: none;
}
/* ══════════════════════════════════════════
   COLUMNS PANEL (show/hide columns)
══════════════════════════════════════════ */
#columnsPanel {
  position: fixed;
  top: calc(var(--header-h) + 12px);
  right: 24px;
  width: 240px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  padding: 16px;
  z-index: 200;
}

.sidePanelTitle {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-ter);
  margin-bottom: 12px;
}

.columnsList { display: flex; flex-direction: column; gap: 8px; }
.colItem {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
}
.colItem input { accent-color: var(--blue); }

/* ══════════════════════════════════════════
   SECTION DIVIDERS
══════════════════════════════════════════ */
.sectionDivider {
  height: 1px;
  background: rgba(0,0,0,0.07);
  max-width: var(--content-w);
  margin: 0 auto;
}

/* ══════════════════════════════════════════
   SUBHEADING inside card
══════════════════════════════════════════ */
.subTitle {
  padding: 22px 28px 14px;
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--text);
  border-bottom: none;
}

/* ══════════════════════════════════════════
   LOTRANK
══════════════════════════════════════════ */
.lotrankBtn { font-weight: 600; letter-spacing: 0.01em; }
.lotrankBtn:disabled { opacity: 0.5; cursor: wait; }
.lotrankResults { margin-top: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lotrankHeader { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.lotrankLabel {
  font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--blue);
}
.lotrankMeta { font-size: 11px; color: var(--text-sec); }
.lotrankMeta em { font-style: italic; color: var(--text); }
.lotrankTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.lotrankTable thead th {
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-ter);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  white-space: nowrap;
  text-align: left;
}
.lotrankTable thead th.rightNum { text-align: right; }
.lotrankRow td {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  white-space: nowrap;
  cursor: pointer;
}
.lotrankRow:hover td { background: rgba(0,0,0,0.02); }
.lotrankRow.lrExpanded td { background: rgba(0,0,0,0.02); color: var(--blue); }
.lotrankTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; }
.lotrankPrice { font-variant-numeric: tabular-nums; }
.lotrankDate { color: var(--text-sec); font-size: 11px; }
.lotrankHouse { color: var(--text-sec); font-size: 11px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }

/* Expand panel */
.lotrankExpandRow td { padding: 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.lotrankExpandCell { padding: 10px 14px !important; background: #fafafa; }
.lotrankExpandGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px 16px;
  font-size: 12px;
  color: var(--text-sec);
}
.lotrankExpandGrid div { display: flex; flex-direction: column; gap: 1px; }
.lotrankExpandGrid strong {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-ter);
}
.lotrankEmpty, .lotrankError { font-size: 12px; color: var(--text-sec); padding: 8px 0; }

/* ══════════════════════════════════════════
   SCROLLBARS
══════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.14);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.24); }
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.14) transparent; }

/* ══════════════════════════════════════════
   YOUTUBE LAYOUT — Chart left + Sales sidebar right
   Desktop ≥1100px: full-bleed side-by-side
   Below 1100px: stacked (unchanged)
══════════════════════════════════════════ */

/* --- Desktop: YouTube full-bleed grid --- */
@media (min-width: 1100px) {

  /* Make room for the fixed-left filter sidebar. The sidebar itself uses
     var(--sidebar-w) (declared in sidebar.css at this breakpoint) so the
     shell shifts by exactly the sidebar width. */
  .shell {
    padding-left: var(--sidebar-w);
  }
  /* Header is independent of sidebar state. The sidebar starts below the
     header (top: var(--header-h)), so the brand/logo can sit at the true
     top-left corner regardless of whether the sidebar is shown or hidden. */

  /* The YouTube grid — padding for breathing room, no max-width cap */
  .ytLayout {
    display: grid;
    grid-template-columns: 5fr 2fr;
    column-gap: clamp(12px, 1.5vw, 24px);
    padding: 0 clamp(20px, 3.75vw, 60px);
    background: var(--bg-section1);
    min-height: 600px;
  }

  /* Remove max-width on sectionInner inside ytLayout — grid handles width */
  .ytLayout .sectionInner {
    max-width: none;
  }

  /* --- Left column: chart area (the "video player") --- */
  .ytLayout__main {
    padding: clamp(20px, 2.5vw, 40px) 0 clamp(24px, 3vw, 48px) 0 !important;
    background: var(--bg-section1) !important;
  }

  /* Inline hero inside the chart column — no extra section padding */
  .artistHero--inline {
    padding: 0;
    margin-bottom: clamp(12px, 1.5vw, 24px);
    background: transparent;
  }
  .artistHero--inline .artistHeroInner {
    max-width: none;
    margin: 0;
  }

  /* Enlarge chart — dominant like a YouTube video, capped by vh to keep navigator visible */
  .ytLayout__main #marketChart {
    height: min(clamp(260px, 24vw, 520px), 45vh);
  }

  /* --- Right column: sales sidebar (the "recommendations") --- */
  .ytLayout__sidebar {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: clamp(20px, 2.5vw, 40px) 16px clamp(24px, 3vw, 48px) 0 !important;
    background: var(--bg-section1) !important;
  }

  /* Slim scrollbar for the sidebar */
  .ytLayout__sidebar::-webkit-scrollbar { width: 4px; }
  .ytLayout__sidebar::-webkit-scrollbar-track { background: transparent; }
  .ytLayout__sidebar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.10); border-radius: 999px; }
  .ytLayout__sidebar::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.20); }

  /* Tighten the Sales heading in sidebar context */
  .ytLayout__sidebar .sectionHeading2 {
    font-size: clamp(14px, 1.15vw, 22px);
    margin-bottom: 4px;
  }
  .ytLayout__sidebar .sectionSub {
    margin-bottom: 8px;
    font-size: clamp(10px, 0.68vw, 13px);
  }

  /* Compact the filter panel in sidebar */
  .ytLayout__sidebar .fbOverlay {
    border-radius: 12px;
  }
  .ytLayout__sidebar .fbNav {
    flex-wrap: wrap;
  }

  /* Compact lot cards in sidebar — reduce padding */
  .ytLayout__sidebar .lotSearchResult {
    padding: clamp(8px, 0.65vw, 14px) 0;
  }
  .ytLayout__sidebar .lsrTitle {
    font-size: clamp(11px, 0.78vw, 14px);
  }
  .ytLayout__sidebar .lsrBreadcrumb {
    font-size: clamp(8.5px, 0.58vw, 10.5px);
  }

  /* Lot search input slightly smaller in sidebar */
  .ytLayout__sidebar .lotSearchWrap--hero .lotSearchInput {
    height: clamp(32px, 2.2vw, 40px);
    font-size: clamp(11px, 0.78vw, 13px);
    border-radius: 10px;
  }

  /* Performance Tracker label — compact */
  .ytLayout__sidebar .pvLabel {
    font-size: clamp(9px, 0.62vw, 11px);
  }

  /* Sidebar lot result details — scale down aggressively */
  .ytLayout__sidebar .lsrPrice {
    font-size: clamp(10px, 0.68vw, 12px);
  }
  .ytLayout__sidebar .lsrEst {
    font-size: clamp(8.5px, 0.58vw, 10.5px);
  }
  .ytLayout__sidebar .lsrSnippet {
    font-size: clamp(10px, 0.68vw, 12px);
    line-height: 1.45;
  }
  .ytLayout__sidebar .lsrDate {
    font-size: clamp(8.5px, 0.58vw, 10.5px);
  }
  .ytLayout__sidebar .lsrMeta {
    gap: 4px;
    margin-bottom: 3px;
    font-size: clamp(10px, 0.68vw, 12px);
  }
  .ytLayout__sidebar .lsrAiSearchBtn,
  .ytLayout__sidebar .lsrGoogleBtn,
  .ytLayout__sidebar .lsrLotrankBtn,
  .ytLayout__sidebar .lsrMoreBtn {
    font-size: clamp(8.5px, 0.58vw, 10.5px);
    padding: 2px 8px;
  }
  .ytLayout__sidebar .lsrHousePill {
    font-size: clamp(8.5px, 0.55vw, 10px);
  }
  .ytLayout__sidebar .lsrPriceSep {
    font-size: clamp(8.5px, 0.55vw, 10px);
  }
  .ytLayout__sidebar .lsrActions {
    gap: 4px;
  }

  /* Sidebar filter browser — scale aggressively for 4+ cards visible */
  .ytLayout__sidebar .fbNavItem {
    font-size: clamp(10px, 0.68vw, 12px);
    padding: 5px 10px;
  }
  .ytLayout__sidebar .fbNav {
    min-width: clamp(100px, 8vw, 130px);
    max-width: clamp(110px, 8.5vw, 145px);
    padding: 12px 0;
  }
  .ytLayout__sidebar .fbCardLabel {
    font-size: clamp(8.5px, 0.55vw, 10.5px);
  }
  .ytLayout__sidebar .fbCardCount {
    font-size: clamp(9px, 0.65vw, 13px);
    top: clamp(4px, 0.35vw, 6px);
    right: clamp(5px, 0.4vw, 8px);
  }
  .ytLayout__sidebar .fbCard {
    min-height: clamp(36px, 2.8vw, 50px);
    min-width: clamp(50px, 4vw, 72px);
    max-width: clamp(68px, 5.5vw, 95px);
    padding: clamp(6px, 0.5vw, 10px) clamp(5px, 0.4vw, 8px);
    border-radius: 8px;
  }
  .ytLayout__sidebar .fbCard--active::after {
    top: clamp(4px, 0.35vw, 6px);
    left: clamp(5px, 0.4vw, 7px);
    font-size: clamp(8px, 0.55vw, 10px);
  }
  .ytLayout__sidebar .fbCardScroll {
    gap: clamp(5px, 0.4vw, 8px);
  }
  .ytLayout__sidebar .fbCloseBtn,
  .ytLayout__sidebar .fbUnsoldToggle,
  .ytLayout__sidebar .fbPerfToggle {
    font-size: clamp(9.5px, 0.65vw, 11px);
    padding: 5px clamp(12px, 1vw, 18px);
  }
  .ytLayout__sidebar .fbSectionTitle {
    font-size: clamp(7.5px, 0.52vw, 9px);
    margin-bottom: clamp(8px, 0.65vw, 14px);
  }
  .ytLayout__sidebar .fbListLabel {
    font-size: clamp(9px, 0.62vw, 11.5px);
  }
  .ytLayout__sidebar .fbListCount {
    font-size: clamp(8.5px, 0.55vw, 10.5px);
  }
  .ytLayout__sidebar .fbListItem {
    padding: clamp(4px, 0.35vw, 7px) clamp(8px, 0.6vw, 12px) clamp(4px, 0.35vw, 7px) clamp(6px, 0.5vw, 10px);
    gap: clamp(5px, 0.4vw, 8px);
  }
  .ytLayout__sidebar .fbListCheck {
    width: clamp(13px, 1vw, 17px);
    height: clamp(13px, 1vw, 17px);
    font-size: clamp(7px, 0.5vw, 9px);
  }
  .ytLayout__sidebar .fbList {
    max-height: clamp(160px, 13vw, 240px);
    border-radius: clamp(8px, 0.65vw, 12px);
  }

  /* Sidebar price range inputs — proportional */
  .ytLayout__sidebar .fbPriceInputRow {
    gap: clamp(4px, 0.35vw, 8px);
    margin-bottom: clamp(10px, 0.8vw, 16px);
  }
  .ytLayout__sidebar .fbPricePrefix,
  .ytLayout__sidebar .fbPriceInput {
    font-size: clamp(9.5px, 0.62vw, 11.5px);
  }
  .ytLayout__sidebar .fbPriceInputWrap {
    height: clamp(26px, 1.8vw, 32px);
    max-width: clamp(90px, 8vw, 140px);
    padding: 0 clamp(6px, 0.5vw, 10px);
    border-radius: 8px;
  }
  .ytLayout__sidebar .fbPriceDash {
    font-size: clamp(10px, 0.68vw, 14px);
  }

  /* Sidebar tabs */
  .ytLayout__sidebar .tab {
    font-size: clamp(10px, 0.68vw, 12px);
  }

  /* Sidebar search bar */
  .ytLayout__sidebar .lotSearchWrap--hero .lotSearchIcon {
    font-size: clamp(13px, 1vw, 17px);
  }

  /* Pagination compact in sidebar */
  .ytLayout__sidebar .googlePager {
    padding: 12px 0;
  }

  /* Tabs compact */
  .ytLayout__sidebar .salesTabsRow {
    padding: 0;
    margin-bottom: 0;
  }

  /* Full-bleed the SSR sections too */
  .ssrSummary .sectionInner,
  .ssrPagerBar .sectionInner {
    max-width: none;
    padding-left: clamp(20px, 3.75vw, 60px);
    padding-right: clamp(20px, 3.75vw, 60px);
  }

  /* Cap the disclaimer width so it doesn't run across full viewport */
  .artistDisclaimer {
    max-width: 560px;
  }

  /* Match sections below the grid to the same padding */
  .appleSection {
    padding: 20px clamp(20px, 3.75vw, 60px) 48px;
  }
  .appleGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  /* Apple-style cards */
  .appleCard {
    border-radius: 24px;
    padding: clamp(24px, 2.5vw, 40px) clamp(20px, 2.25vw, 36px);
    min-height: clamp(280px, 25vw, 400px);
    overflow: hidden;
  }
  .appleCard--dark {
    background: linear-gradient(160deg, #1d1d1f 0%, #2c2c2e 50%, #1d1d1f 100%);
    color: #fff;
  }
  .appleCard--dark .priceLookupHeading {
    color: #fff;
    font-size: clamp(24px, 2.25vw, 36px);
  }
  .appleCard--dark .statLabel {
    color: rgba(255,255,255,0.55);
  }
  .appleCard--dark .statValue {
    color: #fff;
  }
  .appleCard--dark .priceLookupSelect {
    background: #fff;
    color: #1d1d1f;
    border-color: rgba(255,255,255,0.25);
    border-radius: 10px;
  }
  .appleCard--dark .priceLookupBtn {
    background: #fff;
    color: #1d1d1f;
  }
  .appleCard--dark .priceLookupEmpty {
    color: rgba(255,255,255,0.5);
  }

  .appleCard--light {
    background: linear-gradient(160deg, #f0f5ff 0%, #e8f0fe 50%, #dce8fa 100%);
  }
  .appleCard--light .analysisHeroCard {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .appleCard--light .analysisHeroBg {
    display: none;
  }
  .appleCard--light .analysisGrid {
    margin: 0;
  }
}

/* --- Wider screens: give sidebar more room --- */
@media (min-width: 1600px) {
  .ytLayout {
    grid-template-columns: 5fr 2fr;
  }

  .ytLayout__main #marketChart {
    height: min(580px, 48vh);
  }
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
/* ══════════════════════════════════════════
   MOBILE — 768px and below
══════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --content-w: 100%;
    --header-h: 48px;
    /* Pin scale variables to mobile-friendly fixed sizes */
    --hero-fs: 28px;
    --hero-sub-fs: 13px;
    --section-fs: 22px;
    --section2-fs: 28px;
    --stat-fs: 20px;
    --body-fs: 13px;
    --label-fs: 11px;
    --eyebrow-fs: 10px;
    --pill-fs: 12px;
    --pill-h: 28px;
    --chart-h: 280px;
    --section-pad: 32px;
    --section-pad-x: 16px;
  }

  /* ── Header ── */
  .topHeaderInner { padding: 0 10px; gap: 6px; }
  .crumbs { display: none; }
  /* Wordmark stays on mobile, just a touch smaller and tighter.
     results.css mirrors this. */
  .brandName { font-size: 15px; margin-left: 8px; }

  /* Show mobile back bar */
  .mobileBackBar { display: block; }

  /* Beetle icon at tablet/mobile width */
  .brandLogo { width: 40px; }

  /* Keep header search, just compact it */
  .headerSearchWrap { max-width: none; }
  .headerSearchBar { height: 34px; padding: 0 12px; }
  .headerSearchWrap #artistSearch { font-size: 13px; }

  /* Hide standalone heroSearch — header handles it */
  .heroSearch--mobileOnly { display: none !important; }

  /* Fix content padding on mobile — increase from 10px to 16px */
  .scrollSection { padding: 32px 16px; }
  .scrollSection--white { padding-top: 24px; }

  /* Hide text labels in header buttons, keep icons */
  .headerBtn span:nth-child(2) { display: none; }
  .headerBtn { padding: 0 10px; gap: 4px; min-width: 32px; height: 30px; justify-content: center; }
  .headerDividerSep { margin: 0; }
  .headerActions { gap: 4px; flex-shrink: 0; }

  /* ── Hero search ── */
  .heroSearch { padding: 32px 16px 28px; }
  .heroSearchLabel { font-size: 22px; margin-bottom: 14px; }
  .heroSearchBar { max-width: 100%; height: 46px; }

  /* ── Artist hero ── */
  .artistHero { padding: 28px 16px 24px; }
  .artistHero--inline { padding: 0 0 16px 0; }
  .artistHeroInner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .artistHeroRight { text-align: left; }
  #artistName { font-size: 28px; }
  #marketValue { font-size: 32px; }
  #artistSub { font-size: 13px; }
  .artistDisclaimer { max-width: 100%; font-size: 11px; }
  .artistHeroPriceLabel { font-size: 11px; }
  .artistHeroMeta { font-size: 12px; }

  /* ── Sections ── */
  .scrollSection { padding: 32px 16px; }
  .scrollSection--white { padding-top: 24px; }
  .sectionHeading { font-size: 22px; }
  .sectionHeading2 { font-size: 28px; }
  .sectionEyebrow { font-size: 10px; margin-bottom: 8px; }
  .sectionSub { font-size: 13px; margin-bottom: 16px; }

  /* ── Chart section ── */
  .chartCardHeader { flex-direction: column; align-items: flex-start; gap: 12px; }
  .marketPills { width: 100%; justify-content: flex-start; }
  .marketCanvasWrap { min-height: 220px; }

  /* ── Price Lookup ── */
  .priceLookupSection { padding: 32px 16px; }
  .priceLookupHeader { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: clamp(12px, 1.5vw, 24px); }
  .priceLookupHeading { font-size: 24px; white-space: normal; }
  .priceLookupResults .statCell { min-width: calc(50% - 12px); padding-right: 12px; }
  .priceLookupResults .statValue { font-size: 22px; }

  /* ── Sales section ── */
  .salesSearchBar { flex-direction: column; gap: 10px; }
  .lotSearchWrap--hero { width: 100%; }
  .lotSearchWrap--hero .lotSearchInput { height: 44px; font-size: 14px; }

  /* Tabs wrap on small screens */
  .tabsRow { flex-wrap: wrap; gap: 4px; padding: 12px 0; }
  .tabsSpacer { display: none; }
  .tab { font-size: 12px; height: 32px; padding: 0 10px; }
  .viewTabGroup { margin-left: auto; }

  /* Filter browser — stack on mobile */
  .fbOverlay { border-radius: 12px; max-height: 50vh; }
  .fbPanel { flex-direction: column; }
  .fbNavWrap {
    display: flex;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
  }
  [data-theme="dark"] .fbNavWrap { border-bottom-color: rgba(255,255,255,0.06); }
  .fbNavArrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    font-size: 13px;
    color: var(--text-sec, #555);
    cursor: pointer;
    flex-shrink: 0;
    z-index: 2;
    padding: 0;
    line-height: 1;
    transition: opacity .15s;
  }
  .fbNavArrow--hidden { opacity: 0; pointer-events: none; }
  .fbNavArrow--left { margin-left: 4px; }
  .fbNavArrow--right { margin-right: 4px; }
  [data-theme="dark"] .fbNavArrow { background: rgba(50,50,50,0.8); color: rgba(255,255,255,0.6); }
  .fbNav {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 0;
    max-width: none;
    border-right: none;
    border-bottom: none;
    padding: 6px 4px;
    gap: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1;
  }
  .fbNav::-webkit-scrollbar { display: none; }
  [data-theme="dark"] .fbNav { border-bottom-color: rgba(255,255,255,0.06); }
  .fbNavItem {
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 5px 10px;
    font-size: 11px;
    flex-shrink: 0;
  }
  .fbNavItem.active { border-left-color: transparent; border-bottom-color: #00a7e1; }
  [data-theme="dark"] .fbNavItem.active { border-bottom-color: #00a7e1; }
  .fbContent { padding: 10px 12px; }
  .fbSectionTitle { font-size: 9px; margin-bottom: 10px; }
  .fbCardScroll { gap: 8px; }
  .fbCard { min-height: 56px; min-width: 90px; max-width: 120px; padding: 12px 10px; border-radius: 11px; }
  .fbCardLabel { font-size: 10.5px; }
  .fbCardCount { font-size: 14px; top: 8px; right: 8px; }
  .fbCard--active::after { top: 8px; left: 8px; font-size: 11px; }
  .fbCardArrow { width: 24px; height: 24px; font-size: 12px; }
  .fbListItem { padding: 8px 12px 8px 10px; gap: 8px; }
  .fbListCheck { width: 18px; height: 18px; font-size: 10px; }
  .fbListLabel { font-size: 12px; }
  .fbListCount { font-size: 11px; }
  .fbCloseBtn { font-size: 11px; padding: 6px 22px; }
  .fbShowBtn { font-size: 11px; padding: 6px 20px; }
  .fbUnsoldToggle { font-size: 11px; padding: 6px 16px; }
  .fbPerfToggle { font-size: 11px; padding: 6px 16px; }

  /* Lot search results */
  .lotSearchResult { gap: 10px; padding: 16px 0; }
  .lsrTitle { font-size: 14px; }
  .lsrPrice { font-size: 12px; }
  .lsrDate { font-size: 11px; }
  .lsrSnippet { font-size: 12px; }
  .pvBadge { font-size: 10px !important; display: inline; }

  /* Google pager — ‹ 1 2 3 4 5 › on ONE row. Buttons shrink so five
     numbers + both arrows fit even a 320px screen; the "N lots" meta
     drops to its own centred line instead of squeezing beside ›. */
  .googlePager { flex-wrap: wrap; gap: 2px; justify-content: center; }
  .googlePager .gpBtn { min-width: 30px; height: 30px; font-size: 12px; padding: 0 4px; }
  .googlePager .gpArrow { min-width: 34px; font-size: 17px; padding: 0 6px; }
  .googlePager .gpNumbers { gap: 2px; flex-wrap: nowrap; }
  .googlePager .pageMeta { flex-basis: 100%; text-align: center; margin: 6px 0 0; }

  /* Recent Activity expanded table — keep Date/Status/Price/Title,
     drop the analyst columns so the grid fits without sideways scroll */
  .raExpanded__table .col-est,
  .raExpanded__table .col-forecast,
  .raExpanded__table .col-house { display: none; }

  /* ── Analysis / Market Insight ── */
  .analysisGrid { grid-template-columns: 1fr; }
  .analysisHeroInner {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }
  .analysisHeroHeader {
    padding: 18px 16px 14px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .subTitleLight { font-size: 20px; }
  .analysisLeftCol {
    grid-column: auto;
    grid-row: auto;
    padding-bottom: 16px;
  }
  .analysisRightCol {
    grid-column: auto;
    grid-row: auto;
  }
  .analysisDivider { display: none; }
  .pieWrapHero { padding: 20px 16px 12px; }
  .pieWrapHero #pieChart { max-width: 220px; height: 220px; }

  .statsStrip { grid-template-columns: 1fr 1fr; }
}

/* ── Scroll-reveal (Apple-style float-up) — all screen sizes ── */
.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-reveal--d1 { transition-delay: 0.06s; }
.scroll-reveal--d2 { transition-delay: 0.14s; }
.scroll-reveal--d3 { transition-delay: 0.22s; }
.scroll-reveal--d4 { transition-delay: 0.30s; }
.scroll-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Legacy mobile class — keep working */
.mob-reveal {
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.mob-reveal--d1 { transition-delay: 0.06s; }
.mob-reveal--d2 { transition-delay: 0.14s; }
.mob-reveal--d3 { transition-delay: 0.22s; }
.mob-reveal--d4 { transition-delay: 0.30s; }
.mob-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════
   MOBILE — 480px and below (small iPhones)
══════════════════════════════════════════ */
@media (max-width: 480px) {
  /* ── Header — small iPhone ── */
  :root {
    --header-h: 44px;
    --hero-fs: 24px;
    --hero-sub-fs: 12px;
    --section-fs: 20px;
    --section2-fs: 24px;
    --stat-fs: 18px;
    --body-fs: 12px;
    --label-fs: 10px;
    --eyebrow-fs: 9px;
    --pill-fs: 11px;
    --pill-h: 26px;
    --chart-h: 260px;
    --section-pad: 24px;
    --section-pad-x: 12px;
  }
  .topHeaderInner { padding: 0 10px; gap: 6px; }
  .brandLogo { width: 36px; }
  .crumbs { padding-left: 6px; }
  .crumbLine { font-size: 10px; max-width: 110px; }
  .crumbBack { font-size: 9px; }
  .headerBtn { padding: 0 8px; height: 28px; font-size: 11px; }
  .headerDividerSep { display: none; }

  /* ── Chart — shorter canvas so Y labels breathe ── */
  #marketChart { height: 260px; }

  .heroSearchLabel { font-size: 20px; }
  #artistName { font-size: 24px; }
  #marketValue { font-size: 28px; }
  .sectionHeading2 { font-size: 24px; }
  .priceLookupHeading { font-size: 20px; }
  .priceLookupResults .statCell { min-width: 100%; }
  .priceLookupResults .statValue { font-size: 20px; }
  .statsStrip { grid-template-columns: 1fr; }
  .tab { padding: 0 8px; font-size: 11px; }
  .pvBadge { font-size: 9px !important; }

  /* Filter browser — extra compact for small iPhones */
  .fbOverlay { max-height: 45vh; border-radius: 10px; }
  .fbNavItem { padding: 4px 8px; font-size: 10.5px; }
  .fbContent { padding: 8px 10px; }
  .fbCard { min-height: 50px; min-width: 80px; max-width: 110px; padding: 10px 8px; border-radius: 10px; }
  .fbCardLabel { font-size: 10px; }
  .fbCardCount { font-size: 12px; top: 6px; right: 6px; }
  .fbCard--active::after { top: 6px; left: 6px; font-size: 10px; }
  .fbListItem { padding: 7px 10px 7px 8px; }
  .fbListLabel { font-size: 11.5px; }
  .fbList { max-height: 180px; }
}
/* ══════════════════════════════════════════
   VISIBLE SUGGESTION DROPDOWN (#artistSugVisible)
   Anchored to .heroSearchBar via position:absolute
   on the parent which is position:relative
══════════════════════════════════════════ */
.sideSug {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.14);
  overflow: hidden;
  z-index: 200;
  text-align: left;
  display: none;
}
/* ══════════════════════════════════════════
   CHART — open/flush layout (no card)
══════════════════════════════════════════ */
/* chartCardTitle sits like Apple's "NASDAQ: AAPL" label */
.chartCardTitle {
  font-size: var(--body-fs, 14px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: var(--text-sec) !important;
}

.chartCardMeta {
  display: none; /* redundant with sectionSub above chart */
}

/* Time range pills — sit right-aligned flush */
.marketPills {
  gap: 4px;
}

.mPill {
  height: var(--pill-h) !important;
  padding: 0 clamp(10px, 1vw, 14px) !important;
  font-size: var(--pill-fs) !important;
  font-weight: 500 !important;
}

.mPill.active {
  color: #fff !important;
}

/* Stats strip — horizontal, clean */
.statValue[style] {
  font-size: var(--stat-fs) !important;
}

.artistDisclaimer {
  margin-top: 14px;
  max-width: 420px;
  font-size: var(--label-fs);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.01em;
}
/* ── Performance Tracker toggle button ── */
/* Performance Tracker pill — matches Hide / Show Unsolds */
.fbPerfToggle {
  padding: 7px 20px;
  border-radius: 980px;
  border: 1px solid rgba(0,0,0,0.12);
  background: var(--bg, #fff);
  color: var(--text-sec, #6e6e73);
  font-size: var(--label-fs);
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
}
.fbPerfToggle:hover { border-color: #00a7e1; color: #00a7e1; }
.fbPerfToggle--on {
  background: #00a7e1;
  border-color: #00a7e1;
  color: #fff;
}
.fbPerfToggle--on:hover { background: #0085b8; border-color: #0085b8; }
[data-theme="dark"] .fbPerfToggle { border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.5); }
[data-theme="dark"] .fbPerfToggle:hover { border-color: #3deb6e; color: #3deb6e; }
[data-theme="dark"] .fbPerfToggle--on { background: #00a7e1; border-color: #00a7e1; color: #fff; }
[data-theme="dark"] .fbPerfToggle--on:hover { background: #0085b8; border-color: #0085b8; }


/* ── Copyright footer ─────────────────────────────────────── */
.beetle-footer {
  text-align: center;
  width: 100%;
  padding: 12px 16px 20px;
  font-size: var(--label-fs);
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  color: rgba(0, 0, 0, 0.35);
  letter-spacing: 0.02em;
}
.beetle-footer-link {
  color: inherit;
  text-decoration: none;
}
.beetle-footer-link:hover {
  text-decoration: underline;
}

/* ══════════════════════════════════════════
   SALE CAROUSEL
══════════════════════════════════════════ */
.saleCarousel {
  width: 100%;
  margin: 32px 0 16px;
}

.saleCarousel__viewport {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 300px;
  border: none;
  border-radius: 0;
  overflow: hidden;
}

/* Faded table backdrop — sits to the RIGHT of the card */
.saleCarousel__backdrop {
  flex: 1;
  min-width: 0;
  margin-left: 300px;
  opacity: 0.65;
  transition: opacity 0.3s ease;
  font-size: 11px;
  color: var(--text, #1d1d1f);
  padding: 24px 20px;
  line-height: 1.5;
  overflow-y: auto;
  max-height: 340px;
  cursor: pointer;
}
.saleCarousel__backdrop:hover,
.saleCarousel__backdrop--active {
  opacity: 1;
}

.saleCarousel__card {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  min-height: 300px;
  background: #fff;
  border-right: 1px solid rgba(0,0,0,0.06);
  /* Quarter circle: flat left and bottom, full curve top-right */
  border-radius: 0 100% 0 0;
  padding: 80px 60px 24px 24px;
  cursor: pointer;
  transition: transform 0.85s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.7s ease;
  transform-origin: bottom left;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.saleCarousel__card:hover {
  box-shadow: 2px 0 12px rgba(0,0,0,0.04);
}

/* Rotation animations — pivot from bottom-left, two-card wheel */
.saleCarousel__card--exitNext {
  transform: rotate(90deg);
  opacity: 0;
  transition: transform 0.85s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.7s ease;
}
.saleCarousel__card--enterNext {
  transform: rotate(-90deg);
  opacity: 0;
  transition: transform 0.85s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.55s ease 0.15s;
}
.saleCarousel__card--exitPrev {
  transform: rotate(-90deg);
  opacity: 0;
  transition: transform 0.85s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.7s ease;
}
.saleCarousel__card--enterPrev {
  transform: rotate(90deg);
  opacity: 0;
  transition: transform 0.85s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.55s ease 0.15s;
}

/* Controls */
.saleCarousel__controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 14px 0 0;
}

.saleCarousel__btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  color: var(--text, #1d1d1f);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s;
}
.saleCarousel__btn:hover {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.18);
  transform: scale(1.08);
}
.saleCarousel__btn:active {
  transform: scale(0.95);
}
.saleCarousel__btn--disabled {
  opacity: 0.25;
  pointer-events: none;
}

.saleCarousel__counter {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-ter, rgba(0,0,0,0.35));
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  text-align: center;
}

/* Card inner text — clean white card style */
.saleCarousel__card .saleCard__label {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--text, #1d1d1f);
  margin-bottom: 3px;
  line-height: 1.15;
}

.saleCarousel__card .saleCard__date {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-ter, rgba(0,0,0,0.38));
  margin-bottom: 16px;
  letter-spacing: 0.01em;
}

.saleCarousel__card .saleCard__rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.saleCarousel__card .saleCard__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.saleCarousel__card .saleCard__row:last-child { border-bottom: none; }

.saleCarousel__card .saleCard__lotDate {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text, #1d1d1f);
  flex: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.saleCarousel__card .saleCard__delta {
  font-size: 12.5px;
  font-weight: 400;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.saleCard__delta--sold   { color: var(--green, #34c759); }
.saleCard__delta--unsold { color: var(--red, #ff3b30); }

.saleCarousel__card .saleCard__priceWrap {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.saleCarousel__card .saleCard__price {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text, #1d1d1f);
}

.saleCard__more {
  font-size: 12px;
  color: var(--text-ter, rgba(0,0,0,0.38));
  padding-top: 8px;
  text-align: center;
  font-weight: 400;
}



/* ══════════════════════════════════════════
   SALE MODAL — fullscreen expanded table
══════════════════════════════════════════ */
.saleModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.saleModal.active { display: flex; }

.saleModalBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.saleModalContent {
  position: relative;
  width: 90vw;
  max-width: 960px;
  max-height: 80vh;
  background: linear-gradient(to bottom, #ffffff 0%, #f5f5f7 100%);
  border-radius: var(--card-radius, 20px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: saleModalIn 0.25s ease;
}

@keyframes saleModalIn {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.saleModalHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 28px 28px 20px;
  flex-shrink: 0;
}

.saleModalHeaderText {
  display: flex;
  flex-direction: column;
}

.saleModalEyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-ter, #aeaeb2);
  margin-bottom: 6px;
}

.saleModalTitle {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text, #1d1d1f);
  line-height: 1.05;
  margin-bottom: 6px;
}

.saleModalSub {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-sec, #6e6e73);
  line-height: 1.4;
}

.saleModalClose {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg-section3, #f0f0f2);
  color: var(--text-sec, #6e6e73);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.saleModalClose:hover {
  background: var(--bg-section4, #ebebed);
}

.saleModalTableWrap {
  overflow: auto;
  flex: 1;
  padding: 0 28px 24px;
}

.saleModalTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 4px;
}

.saleModalTable th {
  text-align: left;
  padding: 10px 10px 8px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--text-ter, #aeaeb2);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  position: sticky;
  top: 0;
  background: linear-gradient(to bottom, #ffffff, #f8f8fa);
  z-index: 1;
}

.saleModalTable td {
  padding: 10px 10px;
  color: var(--text, #1d1d1f);
  border-bottom: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Subtle alternating row tint instead of lines */
.saleModalTable tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.015);
}

.saleModalTable .sold   { color: var(--green, #34c759); font-weight: 500; }
.saleModalTable .unsold { color: var(--red, #ff3b30); font-weight: 500; }

.saleModalTable .lotTitleCol {
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ── Mobile: hide carousel, show white scroll panels ── */
.saleCardsRow--mobile { display: none; }

.saleCardsRow--mobile .saleCard {
  flex: 0 0 160px;
  min-height: auto;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 12px 12px 10px;
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.saleCardsRow--mobile .saleCard:hover {
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.saleCardsRow--mobile .saleCard__label {
  font-size: 12px; font-weight: 700; color: var(--text, #1d1d1f); margin-bottom: 1px;
}
.saleCardsRow--mobile .saleCard__date {
  font-size: 9px; color: var(--text-ter, rgba(0,0,0,0.38)); margin-bottom: 8px;
}
.saleCardsRow--mobile .saleCard__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px; padding: 3px 0; border-bottom: 1px solid rgba(0,0,0,0.04);
}
.saleCardsRow--mobile .saleCard__row:last-child { border-bottom: none; }
.saleCardsRow--mobile .saleCard__lotDate {
  font-size: 9px; color: var(--text, #1d1d1f); font-variant-numeric: tabular-nums;
}
.saleCardsRow--mobile .saleCard__price {
  font-size: 9px; font-weight: 500; color: var(--text, #1d1d1f);
}
.saleCardsRow--mobile .saleCard__delta {
  font-size: 8px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.saleCardsRow--mobile .saleCard__priceWrap {
  white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .saleCarousel--desktop { display: none !important; }
  .saleCardsRow--mobile {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 16px 0 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.15) transparent;
  }
  .saleCardsRow--mobile::-webkit-scrollbar { height: 3px; }
  .saleCardsRow--mobile::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
  .saleModalContent { width: 100vw; max-width: 100vw; max-height: 100vh; border-radius: 0; }
  .saleModalHeader { padding: 16px 16px 12px; }
  .saleModalTitle { font-size: 22px; }
  .saleModalEyebrow { font-size: 9px; margin-bottom: 3px; }
  .saleModalSub { font-size: 11px; }
  .saleModalClose { width: 28px; height: 28px; font-size: 12px; }
  .saleModalTableWrap { padding: 0 12px 16px; }
  .saleModalTable { font-size: 11px; min-width: 0; }
  .saleModalTable th { padding: 8px 6px 6px; font-size: 10px; }
  .saleModalTable td { padding: 8px 6px; }
  .saleModalTable .col-est,
  .saleModalTable .col-house { display: none; }
  .saleModalTable .lotTitleCol { max-width: 120px; }
}

/* Small phones (iPhone SE, etc) */
@media (max-width: 390px) {
  .saleCarousel__card {
    padding: 50px 30px 16px 12px;
    min-height: 190px;
  }
  .saleCarousel__card .saleCard__label { font-size: 14px; }
  .saleCarousel__card .saleCard__lotDate { font-size: 9px; }
  .saleCarousel__card .saleCard__delta { font-size: 8px; }
  .saleCarousel__card .saleCard__price { font-size: 9px; }
  .saleCard__priceWrap { font-size: 7px; }
}

/* ══════════════════════════════════════════
   SSR SUMMARY — visible to crawlers, hidden once JS hydrates
══════════════════════════════════════════ */
.ssrSummary {
  padding: 24px 0 32px;
}
.ssrSummary .sectionInner {
  max-width: 920px;
}
.ssrTitle {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.ssrMeta {
  font-size: 13px;
  opacity: 0.55;
  margin: 0 0 20px;
}
.ssrStats {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.ssrStat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ssrStatLabel {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.45;
  font-weight: 500;
}
.ssrStatValue {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ssrSubhead {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px;
}
.ssrTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ssrTable th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.45;
  font-weight: 500;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.ssrTable td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  vertical-align: top;
}
.ssrTable tr:last-child td { border-bottom: none; }

/* Hide SSR summary once JS has hydrated */
.beetle-hydrated .ssrSummary {
  display: none;
}
.beetle-hydrated .ssrPagerBar {
  display: none;
}

/* SSR Pagination links — crawlable by Google */
.ssrPager {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* Always-visible pagination bar — never hidden by hydration */
.ssrPagerBar {
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.ssrPagerBarInner {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}
.ssrPagerLink {
  font-size: 13px;
  font-weight: 500;
  color: #4a7c9b;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(74,124,155,0.2);
  transition: background 0.15s, border-color 0.15s;
}
.ssrPagerLink:hover {
  background: rgba(74,124,155,0.06);
  border-color: rgba(74,124,155,0.35);
}
.ssrPagerInfo {
  font-size: 12px;
  opacity: 0.45;
  font-weight: 500;
}

@media (max-width: 600px) {
  .ssrStats { gap: 16px; }
  .ssrStatValue { font-size: 15px; }
  .ssrTitle { font-size: 18px; }
  .ssrTable { font-size: 11px; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV + RESULTS-STYLE HEADER ON TERMINAL
   Mirrors the results.html mobile chrome 1:1: a fixed pill at the
   bottom of the viewport with five quick actions, a search-icon button
   in the header that expands the input, and a bottom-sheet for the
   Sort button containing the existing filter panel. All of this is
   mobile-only; desktop is untouched.
═══════════════════════════════════════════════════════════════════════ */

/* Search icon button in the header — hidden on desktop, shown on mobile.
   When the header has .mobSearchOpen, the icon hides and the search
   input expands to fill the available width. */
.mobSearchToggle {
  display: none;
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mobSearchToggle:active { background: rgba(0,0,0,0.06); }

/* Bottom nav: two floating pills (icons left, + right), liquid glass.
   The nav itself is just a transparent container that positions and
   spaces the two pills. Each pill has its own glass treatment. */
.mobileBottomNav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  height: calc(74px + env(safe-area-inset-bottom, 0px));
  padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font);
}

/* Left pill — holds the four labelled quick-action icons. The pill
   stretches to fill the available width minus the + button + gap. */
.mobNavPill {
  display: inline-flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0 4px;
  border-radius: 980px;
  background: rgba(255,255,255,0.62);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  /* Same liquid-glass rim treatment as the + button: thin top
     highlight, faint bottom shadow, hairline outer ring, soft drop. */
  box-shadow:
    0 0.5px 0 rgba(255,255,255,0.65) inset,
    0 -0.5px 0 rgba(0,0,0,0.10)      inset,
    0 0 0 0.5px rgba(255,255,255,0.40),
    0 4px 14px rgba(0,0,0,0.10),
    0 1px 2px rgba(0,0,0,0.06);
}
.mobNavPill .mobBottomBtn {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  width: auto;
  height: 46px;
  padding: 0 2px;
}

/* Each button stacks icon over label, centred. */
.mobBottomBtn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 46px;
  height: 46px;
  background: transparent;
  border: none;
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, transform 0.12s;
}
.mobBottomBtn svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.7;
}
.mobBottomBtn__label {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  color: inherit;
  opacity: 0.85;
}
.mobBottomBtn:active { background: rgba(0,0,0,0.06); transform: scale(0.94); }
.mobBottomBtn.active { color: #0085b8; }
.mobCcySymbol {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  font-family: var(--font);
  letter-spacing: -0.02em;
}

/* Right pill: the + Creative Search button. Standalone, smaller than
   the previous 56px so it doesn't dominate. */
.mobBottomBtn--primary {
  background: rgba(0, 167, 225,0.88);
  color: #fff;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  max-width: 50px;
  border-radius: 50%;
  margin-top: 0;
  /* Liquid-glass rim — flat translucent body, thin highlights at the
     edges only. */
  box-shadow:
    0 0.5px 0 rgba(255,255,255,0.55) inset,
    0 -0.5px 0 rgba(0,0,0,0.15)      inset,
    0 0 0 0.5px rgba(255,255,255,0.18),
    0 4px 14px rgba(0,90,200,0.30),
    0 1px 2px rgba(0,0,0,0.10);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /* Override the column flex from .mobBottomBtn — primary doesn't
     have a label. */
  flex-direction: row;
  gap: 0;
}
.mobBottomBtn--primary svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.2;
}
.mobBottomBtn--primary:active {
  background: rgba(0,82,165,0.88);
  transform: scale(0.96);
}

/* ── Notification-style count badges ──────────────────────────────
   Small circular badge in the top-right corner of a button. Used for
   the active-filter count on the Sort button (and the active-currency
   indicator on iOS-style chrome). Hidden until count > 0. */
.mobBottomBtn { position: relative; }

.mobCountBadge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  font-family: var(--font);
  line-height: 17px;
  text-align: center;
  letter-spacing: -0.2px;
  display: none;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.22);
}
.mobCountBadge--visible {
  display: block;
}
.mobBottomBtn--primary .mobCountBadge {
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 11px;
}

/* Theme button: show moon in light mode, sun in dark mode */
.mobIconMoon, .mobIconSun { display: none; }
[data-theme="light"] .mobIconMoon { display: inline-flex; }
[data-theme="dark"]  .mobIconSun  { display: inline-flex; }

/* ── Mobile rules ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hide the desktop "Back to Homepage" mobile bar — the bottom nav's
     Home button replaces it. */
  .mobileBackBar { display: none !important; }

  /* Visual parity with results.html mobile header: drop the bottom
     divider line. Sized to match the icon width used elsewhere. */
  .topHeader { border-bottom: 0; }
  .topHeader .brandLogo { width: 40px; }

  /* Header: hide desktop search/actions, show search-icon toggle */
  .topHeader .headerSearchWrap { display: none; }
  .topHeader .headerActions    { display: none; }
  .mobSearchToggle             { display: inline-flex; margin-left: auto; }

  /* When .mobSearchOpen is set, the search bar takes over the header.
     Brand and toggle hide; the input fills the row. */
  .topHeader.mobSearchOpen .brandRow         { display: none; }
  .topHeader.mobSearchOpen .mobSearchToggle  { display: none; }
  .topHeader.mobSearchOpen .headerSearchWrap {
    display: block;
    flex: 1;
    max-width: none;
    width: 100%;
  }
  .topHeader.mobSearchOpen .headerSearchBar {
    height: 36px;
    padding: 0 12px;
  }

  /* Show the bottom nav and reserve space at the page bottom so content
     doesn't sit under the fixed bar. */
  .mobileBottomNav { display: flex; }
  body { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Sort sheet backdrop ────────────────────────────────────────────
   Dimmed layer behind the mobile filter sheet. Tap to close. */
.mobSortBackdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0,0,0,0.4);
}
body.mobSortOpen .mobSortBackdrop {
  display: block;
  animation: mobSortFade 0.18s ease;
}
@keyframes mobSortFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Mobile filter sheet ────────────────────────────────────────────
   Standalone iOS-style FULL-SCREEN sheet. Two stacked views: sections
   list and detail. Hidden by default; shown when .mobFilterSheet--open.
   Only one view visible at any time (controlled via [hidden]). */
.mobFilterSheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--surface, #fff);
  font-family: var(--font);
  overflow: hidden;
  flex-direction: column;
}
.mobFilterSheet.mobFilterSheet--open {
  display: flex;
  animation: mobSortSlide 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes mobSortSlide {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Each view fills the sheet entirely. The [hidden] attribute toggles
   visibility — we set !important to beat any flex/display rules. */
.mobFilterSheet__view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.mobFilterSheet__view[hidden] { display: none !important; }

.mobFilterSheet__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  flex-shrink: 0;
  /* Add safe-area padding on iOS so the close button doesn't sit
     under the notch/Dynamic Island */
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
.mobFilterSheet__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  text-align: left;
  letter-spacing: -0.01em;
}
.mobFilterSheet__close,
.mobFilterSheet__back {
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  flex-shrink: 0;
}
.mobFilterSheet__close:active,
.mobFilterSheet__back:active { background: rgba(0,0,0,0.06); }

/* Optional in-detail search bar — shown when the section has many
   options (Auction House, Attribution, Category). JS toggles this. */
.mobFilterSheet__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  flex-shrink: 0;
}
.mobFilterSheet__searchInput {
  flex: 1;
  height: 38px;
  padding: 0 14px;
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 980px;
  outline: none;
  -webkit-appearance: none;
}
.mobFilterSheet__searchInput:focus {
  background: #fff;
  border-color: rgba(0, 167, 225,0.35);
}
.mobFilterSheet__searchInput::placeholder { color: rgba(0,0,0,0.40); }

/* The sections list (top level) and the options list (detail) share
   the same scroll/list styling. */
.mobFilterSheet__sections,
.mobFilterSheet__options {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 calc(20px + env(safe-area-inset-bottom, 0px));
}

/* Section row (top level — tap to drill into options) */
.mobFilterRow {
  display: flex;
  align-items: center;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 16px 20px;
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  text-align: left;
}
.mobFilterRow:active { background: rgba(0,0,0,0.04); }
.mobFilterRow__label { flex: 1; }
.mobFilterRow__chev {
  display: inline-flex;
  align-items: center;
  color: rgba(0,0,0,0.35);
}

/* Per-section active-count: a small coloured pagination-style dot
   with the number sitting to its left. Only renders when at least
   one filter is applied in that section. */
.mobFilterRow__count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}
.mobFilterRow__count::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--countDot, #7eb8da);
  /* Subtle top inner shadow — matches the pagination dots */
  box-shadow: inset 0 1.5px 2px rgba(0,0,0,0.22);
  flex-shrink: 0;
}
[data-theme="dark"] .mobFilterRow__count {
  color: var(--text);
}

/* Footer area inside the sections view — Clear All button. */
.mobFilterSheet__footer {
  margin-top: auto;
  padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(0,0,0,0.06);
}
.mobFilterClearAllBtn {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 14px;
  background: #ff3b30;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.1px;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.mobFilterClearAllBtn:active {
  background: #e0322a;
  transform: scale(0.99);
}
.mobFilterClearAllBtn--disabled {
  opacity: 0.35;
  pointer-events: none;
}
[data-theme="dark"] .mobFilterSheet__footer {
  border-top-color: rgba(255,255,255,0.08);
}

/* Sections view needs to fill the sheet so the footer can pin to bottom */
.mobFilterSheet__view--sections {
  display: flex;
  flex-direction: column;
}

/* Option row (detail level — tap to apply, ✓ shows when active) */
.mobFilterOption {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 14px 20px;
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
}
.mobFilterOption:active { background: rgba(0,0,0,0.04); }
.mobFilterOption[hidden] { display: none !important; }
.mobFilterOption__label { flex: 1; }
.mobFilterOption__tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 167, 225,0.10);
  color: #0085b8;
}
.mobFilterOption__check {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0085b8;
  flex-shrink: 0;
}
.mobFilterOption--active { color: #0085b8; font-weight: 500; }
.mobFilterOption--disabled { opacity: 0.35; pointer-events: none; }

.mobFilterEmpty {
  padding: 32px 20px;
  text-align: center;
  font-size: 14px;
  color: rgba(0,0,0,0.45);
}

/* When the sheet is open, lock the page scroll */
body.mobSortOpen { overflow: hidden; }

/* ── Mobile rules: hide all inline filter UI on mobile ──────────────
   The filter UI moves to the sheet; the page itself only shows the
   chart, the search-lots input, and the lots list. */
@media (max-width: 768px) {
  /* Hide the desktop filter panel and hide-trigger. The fbOverlay is kept
     in the DOM (visually hidden) because the sheet's renderProxiedOptions()
     calls into the desktop renderer which writes into #fbContent before
     we read it. The .salesTabsRow stays visible on mobile so users can
     switch between Top Sales / Most Recent / Headlines inline. */
  #salesSection #fbShowTrigger {
    display: none !important;
  }
  #salesSection .salesTabsRow {
    display: flex !important;
    gap: clamp(14px, 4vw, 22px);
    padding: 8px 2px 6px;
    margin: 4px 0 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: transparent;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #salesSection .salesTabsRow::-webkit-scrollbar { display: none; }
  #salesSection .salesTabsRow .tab {
    flex-shrink: 0;
    padding: 6px 2px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-sec);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
  }
  #salesSection .salesTabsRow .tab.active {
    color: var(--text);
    border-bottom-color: var(--text);
  }
  #salesSection #fbOverlay {
    /* Keep mounted but invisible & non-interactive so renderFbSection
       still has a target to write into. */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
  }
}

/* Dark mode for the sheet */
[data-theme="dark"] .mobFilterSheet {
  background: #1c1c1e;
}
[data-theme="dark"] .mobFilterSheet__header {
  border-bottom-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .mobFilterSheet__title { color: rgba(255,255,255,0.92); }
[data-theme="dark"] .mobFilterSheet__close:active,
[data-theme="dark"] .mobFilterSheet__back:active { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .mobFilterRow {
  color: rgba(255,255,255,0.92);
  border-bottom-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .mobFilterRow:active { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .mobFilterRow__chev { color: rgba(255,255,255,0.30); }
[data-theme="dark"] .mobFilterOption { color: rgba(255,255,255,0.92); }
[data-theme="dark"] .mobFilterOption:active { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .mobFilterOption--active { color: #00a7e1; }
[data-theme="dark"] .mobFilterOption__check { color: #00a7e1; }
[data-theme="dark"] .mobFilterOption__tag {
  background: rgba(78,161,255,0.12);
  color: #00a7e1;
}
[data-theme="dark"] .mobFilterSheet__searchInput {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
}
[data-theme="dark"] .mobFilterSheet__searchInput:focus {
  background: rgba(255,255,255,0.08);
  border-color: rgba(78,161,255,0.45);
}
[data-theme="dark"] .mobFilterSheet__searchInput::placeholder {
  color: rgba(255,255,255,0.35);
}
[data-theme="dark"] .mobileBottomNav {
  background: transparent;
  border-top: 0;
}
[data-theme="dark"] .mobNavPill {
  background: rgba(28,28,30,0.65);
  box-shadow:
    0 0.5px 0 rgba(255,255,255,0.18) inset,
    0 -0.5px 0 rgba(0,0,0,0.40)      inset,
    0 0 0 0.5px rgba(255,255,255,0.10),
    0 4px 14px rgba(0,0,0,0.35),
    0 1px 2px rgba(0,0,0,0.20);
}
[data-theme="dark"] .mobBottomBtn:active { background: rgba(255,255,255,0.08); }

/* ════════════════════════════════════════════════════════════════════
   MOBILE CONTENT TRIM ON TERMINAL
   The artist hero on mobile is too dense — long disclaimer paragraph,
   duplicate "Price History" heading repeating the artist name, and a
   redundant currency tagline. Trim them on mobile and surface the
   artist's dates inline next to the name (since the dates were living
   in the now-hidden duplicate heading).
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Tone down the bold net realised value — was 32px on mobile, the
     hero feels heavier than it needs to. */
  #marketValue { font-size: 24px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   ARTIST ACTIONS HEADER BUTTONS (mobile-only)
   Plain transparent icon buttons sitting in the header next to the
   search icon. No pill, no glass — just icons. Hidden when mobile
   search is expanded full-screen.
═══════════════════════════════════════════════════════════════════════ */
.mobHeaderBtn {
  display: none;
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.mobHeaderBtn:active { background: rgba(0,0,0,0.06); }
.mobHeaderBtn--flash { color: #0085b8; }

/* Mobile search back arrow — only visible when search is expanded. */
.mobSearchBack {
  display: none;
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  flex-shrink: 0;
}
.mobSearchBack:active { background: rgba(0,0,0,0.06); }

@media (max-width: 768px) {
  /* Show share/copy in header (when search is closed) */
  .mobHeaderBtn { display: inline-flex; }

  /* When mobile search is OPEN, the input takes over the header.
     Hide share/copy and reveal the back arrow instead. */
  .topHeader.mobSearchOpen .mobHeaderBtn { display: none; }
  .topHeader.mobSearchOpen .mobSearchBack { display: inline-flex; }

  /* Hide the redundant "TICKER · Last Sale Date" line on mobile —
     dates are already shown via .artistNameDates. */
  #artistSub { display: none !important; }

  /* ── Full-screen mobile search overlay ───────────────────────────
     When mobile search is open (body has .mobSearchActive set by JS),
     #artistSugVisible (the visible suggestion container that mirrors
     the legacy hidden #artistSug) takes over the viewport below the
     header. Tickers + stock IDs hidden, name uses Google-style
     bolding (typed prefix regular, rest bolder but loose). Back arrow
     at top-left of the header closes the search. */
  body.mobSearchActive #artistSugVisible {
    display: block !important;
    position: fixed !important;
    top: var(--header-h, 48px);
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    background: var(--surface, #fff);
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 90;
    padding: 4px 0 calc(20px + env(safe-area-inset-bottom, 0px));
  }

  /* Suggestion rows — clean Google-style list. Hide ticker + stock
     id columns; show only the artist name with a leading magnifier
     icon. Looser bold weight on the autocompleted portions. */
  body.mobSearchActive #artistSugVisible .sugRow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
  }
  body.mobSearchActive #artistSugVisible .sugRow::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,0.45)' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='16.65' y1='16.65' x2='21' y2='21'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
  }
  body.mobSearchActive #artistSugVisible .sugTicker,
  body.mobSearchActive #artistSugVisible .sugId {
    display: none !important;
  }
  body.mobSearchActive #artistSugVisible .sugName {
    flex: 1;
    font-size: 15px;
    font-weight: 400;
    color: var(--text);
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Looser bold on the non-typed portions — Bloomberg/Google style.
     Was 600 in the desktop version; using 500 here for a thinner
     look. */
  body.mobSearchActive #artistSugVisible .sugName b {
    font-weight: 500;
    color: var(--text);
  }
}

/* Dark mode */
[data-theme="dark"] .mobHeaderBtn { color: rgba(255,255,255,0.92); }
[data-theme="dark"] .mobHeaderBtn:active { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .mobHeaderBtn--flash { color: #00a7e1; }
[data-theme="dark"] .mobSearchBack { color: rgba(255,255,255,0.92); }
[data-theme="dark"] .mobSearchBack:active { background: rgba(255,255,255,0.08); }
[data-theme="dark"] body.mobSearchActive #artistSugVisible {
  background: #0f0f11;
}
[data-theme="dark"] body.mobSearchActive #artistSugVisible .sugRow {
  border-bottom-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] body.mobSearchActive #artistSugVisible .sugRow::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='16.65' y1='16.65' x2='21' y2='21'/></svg>");
}

/* Sale modal — Forecast column + chip styling */
.saleModalTable .col-forecast {
  white-space: nowrap;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.saleModalTable .forecast {
  color: rgb(180, 50, 50);
  font-weight: 400;
}
.saleModalTable .hChip {
  margin-left: 4px;
  font-size: 11px;
}
}

/* ══════════════════════════════════════════
   HEADLINES — major sales + significant fails
══════════════════════════════════════════ */
.yearlyReport {
  margin-top: 56px;
  padding-top: 8px;
}
.yReport__header {
  margin-bottom: 22px;
}
.yReport__title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: rgba(0,0,0,0.92);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
}
.yReport__sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: rgba(0,0,0,0.50);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* News feed */
.hFeed {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

.hItem {
  padding: 14px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.hItem:first-child {
  border-top: none;
  padding-top: 4px;
}

.hItem__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: rgba(0,0,0,0.55);
  flex-wrap: wrap;
}

/* Meta chip — small arrow + percentage for sales. No background,
   just the coloured arrow + number sitting inline with the meta row. */
.hChip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  margin-right: 4px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.hChip--up      { color: rgb(22, 132, 70); }
.hChip--down    { color: rgb(180, 50, 50); }
.hChip--neutral { color: rgba(0, 0, 0, 0.45); }

.hItem__source {
  font-weight: 500;
  color: rgba(0,0,0,0.78);
}
.hItem__sep {
  color: rgba(0,0,0,0.28);
}
.hItem__date {
  font-feature-settings: "tnum";
  color: rgba(0,0,0,0.50);
}

/* Headline + lot title are wrapped in an anchor → opens Google search
   for the lot (same pattern as the Top Sales / Most Recent lot cards).
   Anchor inherits colour, removes underline; hover surfaces a subtle one. */
.hItem__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.hItem__link:hover .hItem__headline {
  color: #4a7aa3;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Headline — matches Sales section title weight (400) and blue link colour */
.hItem__headline {
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 400;
  line-height: 1.3;
  color: #5b8db8;
  letter-spacing: -0.005em;
  margin: 0 0 4px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* Lot title — sits below the headline as a secondary identifier.
   Same body size as Sales section snippet, muted secondary text colour. */
.hItem__lot {
  font-size: var(--body-fs, 13px);
  line-height: 1.45;
  color: var(--text-sec);
  margin: 0 0 4px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.002em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Lede — matches Sales section estimate label scale, ternary text colour */
.hItem__lede {
  font-size: var(--label-fs);
  line-height: 1.5;
  color: var(--text-ter);
  margin: 0;
  letter-spacing: -0.002em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Re-entry forecast — inline orange text underneath the lede.
   Matches the lede type scale; differentiated by colour. */
.hItem__forecast {
  display: block;
  margin-top: 4px;
  font-size: var(--label-fs);
  line-height: 1.5;
  color: rgb(180, 50, 50);
  letter-spacing: -0.002em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.hItem__forecastLabel {
  font-weight: 500;
  margin-right: 4px;
}
.hItem__forecastValue {
  font-weight: 400;
}


/* ══════════════════════════════════════════
   RECENT ACTIVITY — expanded inline grid
   Replaces the carousel in-flow when clicked. Keeps pagination at the
   bottom; chevron-up at the top right collapses back to the carousel.
══════════════════════════════════════════ */
.raExpanded {
  margin-top: 18px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

.raExpanded__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 4px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.raExpanded__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.raExpanded__label {
  font-size: var(--body-fs, 14px);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}
.raExpanded__meta {
  font-size: var(--label-fs, 12px);
  color: var(--text-ter, rgba(0,0,0,0.5));
  font-variant-numeric: tabular-nums;
}

.raExpanded__close {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-ter);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
.raExpanded__close:hover {
  background: rgba(0,0,0,0.05);
  color: var(--text);
}

.raExpanded__tableWrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.raExpanded__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  table-layout: auto;
}
.raExpanded__table th {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-ter, rgba(0,0,0,0.45));
  text-align: left;
  padding: 9px 48px 9px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  white-space: nowrap;
}
.raExpanded__table td {
  padding: 9px 48px 9px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  color: var(--text);
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.4;
}
.raExpanded__table th:last-child,
.raExpanded__table td:last-child { padding-right: 0; }
.raExpanded__table tr:last-child td { border-bottom: none; }

.raExpanded__table td:first-child { color: var(--text); }

/* Spotify-style stacked primary cell: title on top, house underneath
   (only used by the carousel backdrop preview) */
.raExpanded__table .col-primary {
  width: 50%;
  min-width: 240px;
  max-width: 480px;
  padding-right: 24px;
}
.raPrimary { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.raPrimary__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.raPrimary__house {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-ter, rgba(0,0,0,0.5));
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.raExpanded__table .col-status   { white-space: nowrap; }
.raExpanded__table .col-date     { white-space: nowrap; color: var(--text-sec); }
.raExpanded__table .col-price    { white-space: nowrap; }
.raExpanded__table .col-est      { white-space: nowrap; color: var(--text-ter); }
.raExpanded__table .col-forecast { white-space: nowrap; font-weight: 400; }
.raExpanded__table .col-house    { white-space: nowrap; color: var(--text-sec); }

/* Title column gets the remaining width and ellipsises */
.raExpanded__table td.col-title {
  width: 100%;
  max-width: 0; /* enables ellipsis inside table-cell w/ overflow:hidden */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-sec);
}

/* Brighter green / red palette */
.raExpanded__table .sold        { color: rgb(34, 168, 88); font-weight: 500; }
.raExpanded__table .unsold      { color: rgb(220, 80, 80); font-weight: 500; }
.raExpanded__table .unsoldDelta { color: rgb(220, 80, 80); font-weight: 400; }
.raExpanded__table .forecast    { color: rgb(220, 80, 80); font-weight: 400; }
.raExpanded__table .hChip { margin-left: 6px; font-size: 11px; }

.raExpanded__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 0 4px;
}
.raExpanded__pagerBtn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.10);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.raExpanded__pagerBtn:hover:not(:disabled) { background: rgba(0,0,0,0.05); }
.raExpanded__pagerBtn:disabled { opacity: 0.3; cursor: default; }
.raExpanded__pagerLabel {
  font-size: var(--label-fs, 12px);
  color: var(--text-ter);
  font-variant-numeric: tabular-nums;
  min-width: 50px;
  text-align: center;
}

/* ── Carousel backdrop: faded ghost preview of the expanded grid ─── */
.carouselBackdropTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  table-layout: auto;
}
.carouselBackdropTable th {
  font-size: 10px;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-ter);
  text-align: left;
  padding: 6px 14px 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  white-space: nowrap;
}
.carouselBackdropTable td {
  padding: 6px 14px 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.03);
  vertical-align: middle;
}
/* Spotify-style stacked title/house in backdrop too */
.carouselBackdropTable .col-primary {
  width: 60%;
  min-width: 0;
  max-width: 260px;
  padding-right: 16px;
}
.carouselBackdropTable .raPrimary { gap: 1px; }
.carouselBackdropTable .raPrimary__title {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.25;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carouselBackdropTable .raPrimary__house {
  font-size: 9.5px;
  font-weight: 300;
  line-height: 1.25;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-ter);
}
.carouselBackdropTable .col-date  { white-space: nowrap; color: var(--text-ter); font-weight: 300; }
.carouselBackdropTable .col-price { white-space: nowrap; font-weight: 400; }

/* Brighter palette in the backdrop preview */
.carouselBackdropTable .sold        { color: rgb(34, 168, 88); font-weight: 400; }
.carouselBackdropTable .unsold      { color: rgb(220, 80, 80); font-weight: 400; }
.carouselBackdropTable .unsoldDelta { color: rgb(220, 80, 80); font-weight: 300; }
.carouselBackdropTable .hChip--up   { color: rgb(34, 168, 88); font-weight: 400; }
.carouselBackdropTable .hChip--down { color: rgb(220, 80, 80); font-weight: 400; }
.carouselBackdropTable .hChip { margin-left: 4px; font-size: 9.5px; font-weight: 400; }

/* ═══════════════════════════════════════════════════════
   SALES EXPLORER REDESIGN — macOS Tahoe grouping aesthetic
   Section sits on warm grey; lot rows + filter pills sit
   on lighter cards. Seamless, no rings, no scale-up.

   NOTE: .ytLayout__sidebar (the wrapping class on #salesSection)
   uses background: var(--bg-section1) !important and a desktop
   media query that re-pads .lotSearchResult — so several rules
   below must use !important or extra specificity to override
   those without ripping out the rest of the sidebar layout.
   ═══════════════════════════════════════════════════════ */

:root {
  --bg-sales-explorer: #f5f5f7;   /* macOS Tahoe sidebar grey */
  --bg-sales-card:     #fcfcfd;   /* warm off-white — softer than glaring #fff */
  --sales-card-radius: 14px;
}

[data-theme="dark"] {
  --bg-sales-explorer: #1c1c1e;
  --bg-sales-card:     #2c2c2e;
}

/* ── Section background ──
   Must use !important to beat .ytLayout__sidebar's !important. */
#salesSection.ytLayout__sidebar,
#salesSection.scrollSection,
#salesSection.scrollSection--light {
  background: var(--bg-sales-explorer) !important;
}

/* ── Inset the section so the grey panel breathes on all sides ──
   Defeats the desktop .ytLayout__sidebar padding: ... 0 !important.
   Symmetric left/right padding so the section reads as a contained
   surface, not a column-fill bleeding to the chart edge.

   Depth model: the chart column is the foreground/elevated layer,
   the Sales Explorer is the recessed background panel. An inset
   shadow on the left edge makes it read as set BACK into the page,
   with the chart column casting onto it. */
/* ── Sales Explorer container ──
   The base .ytLayout__sidebar rule has position:sticky + top:52px.
   We override top:0 so the panel sits flush at .ytLayout top.

   margin-top equals the chart column's padding-top so the panel's
   top edge aligns with the Net Realised card's top edge — no strip
   of grey peeking above the card. */
#salesSection.ytLayout__sidebar {
  padding: clamp(14px, 1.2vw, 20px) clamp(18px, 1.5vw, 24px) clamp(24px, 3vw, 48px) clamp(18px, 1.5vw, 24px) !important;
  border-radius: 16px;
  border-left: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: none;
  top: 0 !important;
  margin-top: clamp(20px, 2.5vw, 40px);
  z-index: 0;
}

[data-theme="dark"] #salesSection.ytLayout__sidebar {
  border-left-color: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

/* ── Header: bigger, lighter weight ── */
#salesSection .sectionHeading2,
.ytLayout__sidebar#salesSection .sectionHeading2 {
  font-size: clamp(26px, 2.2vw, 34px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

/* ── Lot rows become lighter-grey cards ──
   Extra specificity (.ytLayout__sidebar#salesSection) beats the
   desktop media-query rule .ytLayout__sidebar .lotSearchResult. */
#salesSection .lotsSearchList,
.ytLayout__sidebar#salesSection .lotsSearchList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

#salesSection .lotSearchResult,
.ytLayout__sidebar#salesSection .lotSearchResult {
  background: var(--bg-sales-card);
  border-radius: var(--sales-card-radius);
  border: none;
  border-bottom: none;
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

#salesSection .lotSearchResult:last-child,
.ytLayout__sidebar#salesSection .lotSearchResult:last-child {
  border-bottom: none;
}

/* ── Filter pills: no blue ring, no scale-up, flush with grey ── */
#salesSection .fbCard {
  background: var(--bg-sales-card);
  border: none;
  box-shadow: none;
  transition: background .15s ease, opacity .2s;
}

#salesSection .fbCard:hover {
  transform: none;
  box-shadow: none;
  background: #ececef;
}

#salesSection .fbCard:active {
  transform: none;
}

#salesSection .fbCard--active,
#salesSection .fbCard--active:hover {
  background: #00a7e1 !important;
  border: none;
  box-shadow: none;
  transform: none;
}

[data-theme="dark"] #salesSection .fbCard:hover {
  background: #3a3a3c;
}
[data-theme="dark"] #salesSection .fbCard--active,
[data-theme="dark"] #salesSection .fbCard--active:hover {
  background: #00a7e1 !important;
  box-shadow: none;
}

#salesSection .fbCard--active::after {
  box-shadow: none;
}

/* ── Filter overlay card: warm off-white to match lot cards ── */
#salesSection .fbOverlay {
  background: var(--bg-sales-card);
}
[data-theme="dark"] #salesSection .fbOverlay {
  background: var(--bg-sales-card);
}

/* ── Sales search input (warm off-white, matches card surface) ── */
#salesSection .lotSearchWrap--hero .lotSearchInput {
  background: var(--bg-sales-card);
}

/* ── Close bar: inset the Hide / Unsolds On buttons so they don't
   clip against the panel/overlay edges. ── */
#salesSection .fbCloseBar {
  padding: 8px 14px;
}

/* Mobile: keep the card padding (don't let global mobile rules strip it) */
@media (max-width: 760px) {
  #salesSection .lotSearchResult {
    padding: 14px 16px;
    gap: 12px;
  }
  #salesSection .sectionHeading2 {
    font-size: 30px;
    font-weight: 500;
  }
}




/* ═══════════════════════════════════════════════════════
   SEARCH SUGGESTION ROWS — Image 4 design
   Layout: [icon] [Artist Name + ticker pill] [12,345 lots]
   - Greyed magnifier icon on the left
   - Name with bolded matched substring
   - Small ticker pill badge (Stripe-style, light grey)
   - Right-aligned muted lot count
   ═══════════════════════════════════════════════════════ */

.sugRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: none;
  transition: background .12s ease;
  cursor: pointer;
}
.sugRow:hover {
  background: #f5f5f7;
}
[data-theme="dark"] .sugRow:hover {
  background: rgba(255, 255, 255, 0.06);
}

.sugIcon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .sugIcon { color: rgba(255, 255, 255, 0.45); }

.sugName {
  flex: 0 1 auto;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Bold portions = matched substring */
.sugName b {
  font-weight: 600;
  color: var(--text);
}

.sugTicker {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-sec);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
}
[data-theme="dark"] .sugTicker {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.sugLots {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--text-ter);
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}

/* ── Lot card: Re-entry forecast (unsold lots only) ──
   Matches the Headlines view treatment — red label-value pair,
   sits just under the description. */
.lsrForecast {
  margin-top: 6px;
  font-size: var(--label-fs, 11px);
  line-height: 1.5;
  color: rgb(180, 50, 50);
  letter-spacing: -0.002em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.lsrForecastLabel {
  font-weight: 500;
  margin-right: 4px;
}
.lsrForecastValue {
  font-weight: 400;
}
[data-theme="dark"] .lsrForecast {
  color: rgb(240, 130, 130);
}

/* ════════════════════════════════════════════════════════════
   UPCOMING SALES — Past/Upcoming toggle, header, lot cards.
   Additive layer; uses existing tokens plus a local turquoise accent.
════════════════════════════════════════════════════════════ */
:root {
  --up-accent:     #00a7e1;   /* brand turquoise */
  --up-accent-bg:  rgba(0, 167, 225,0.10);
  --up-accent-brd: rgba(0, 167, 225,0.28);
  --rc-sold:       #00a7e1;   /* recent sales — brand turquoise */
  --rc-sold-bg:    rgba(0, 167, 225, 0.10);
  --rc-unsold:     #b5513c;   /* unsold — warm red */
  --rc-unsold-bg:  rgba(181, 81, 60, 0.10);
}
[data-theme="dark"] {
  --up-accent:     #00a7e1;
  --up-accent-bg:  rgba(0, 167, 225,0.12);
  --up-accent-brd: rgba(0, 167, 225,0.30);
  --rc-sold:       #00a7e1;
  --rc-sold-bg:    rgba(0, 167, 225, 0.12);
  --rc-unsold:     #e2735b;
  --rc-unsold-bg:  rgba(226, 115, 91, 0.12);
}

/* ── Segmented Past / Upcoming control ── */
.saleModeToggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 18px 20px 0;
  padding: 3px;
  background: rgba(0,0,0,0.05);
  border-radius: 999px;
}
[data-theme="dark"] .saleModeToggle { background: rgba(255,255,255,0.07); }

.saleModeBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font);
  font-size: var(--label-fs, 12px);
  font-weight: 500;
  color: var(--text-sec);
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.saleModeBtn:hover { color: var(--text); }
.saleModeBtn.active {
  background: var(--card-bg);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}
[data-theme="dark"] .saleModeBtn.active {
  background: rgba(255,255,255,0.16);
  box-shadow: none;
}

.saleModeCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--up-accent-bg);
  color: var(--up-accent);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Upcoming view header (summary of the soonest sale) ── */
.upcomingHeader { padding: 18px 20px 6px; }
.upcomingHeader:empty { display: none; }

.upHeaderPill {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #0085b8;
  background: linear-gradient(160deg, rgba(255,255,255,0.72), rgba(255,255,255,0.28));
  border: 0.5px solid rgba(255,255,255,0.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 2px rgba(0, 133, 184, 0.06),
    0 1px 6px rgba(0, 90, 130, 0.10),
    0 4px 14px rgba(0, 90, 130, 0.06);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
}
[data-theme="dark"] .upHeaderPill {
  color: #6fd6ff;
  background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
  border-color: rgba(255,255,255,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 1px 6px rgba(0,0,0,0.30);
}
.upHeaderTitle {
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 5px;
}
.upHeaderSub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: var(--eyebrow-fs, 12px);
  color: var(--text-ter);
}
.upHeaderSub .upHeaderDate { color: var(--up-accent); font-weight: 600; }
.upHeaderSub .lsrSep { opacity: 0.4; font-size: 10px; }
.upHeaderMeta {
  margin-top: 6px;
  font-size: var(--label-fs, 12px);
  color: var(--text-sec);
  font-variant-numeric: tabular-nums;
}

/* ── Upcoming lot cards (reuse .lotSearchResult; add accent rail + pill) ── */
.lotSearchResult--upcoming {
  position: relative;
  padding-left: 14px;
}
.lotSearchResult--upcoming::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 3px;
  border-radius: 3px;
  background: var(--up-accent);
  opacity: 0.55;
}
.upPill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #0085b8;
  background: linear-gradient(160deg, rgba(255,255,255,0.70), rgba(255,255,255,0.26));
  border: 0.5px solid rgba(255,255,255,0.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 1px 4px rgba(0, 90, 130, 0.10);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
}
[data-theme="dark"] .upPill {
  color: #6fd6ff;
  background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
  border-color: rgba(255,255,255,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 1px 4px rgba(0,0,0,0.28);
}

.lsrUpcomingEmpty {
  padding: 28px 4px;
  text-align: center;
  font-size: var(--body-fs, 13px);
  color: var(--text-ter);
}

/* ── Upcoming lot thumbnail (YouTube-style: image left, text right) ── */
.lotSearchResult--upcoming .lsrThumb {
  flex: 0 0 auto;
  width: 116px;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--up-accent-bg);
  display: block;
  text-decoration: none;
  position: relative;
}
.lotSearchResult--upcoming .lsrThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .2s ease;
}
.lotSearchResult--upcoming .lsrThumb:hover img { transform: scale(1.04); }
.lotSearchResult--upcoming .lsrThumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}
.lotSearchResult--upcoming .lsrThumbPh {
  font-size: 10px;
  color: var(--text-ter);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .lotSearchResult--upcoming .lsrThumb { width: 92px; border-radius: 10px; }
}

/* ══════════════════════════════════════════════════════════════
   RECENTLY SOLD — completed tinycrawl lot cards with bid events
═══════════════════════════════════════════════════════════════ */

/* ── Recently sold lot card (reuses upcoming thumbnail layout) ── */
.lotSearchResult--recent {
  position: relative;
  padding-left: 14px;
}
.lotSearchResult--recent::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 3px;
  border-radius: 3px;
  background: var(--rc-sold);
  opacity: 0.45;
}

/* ── Status pills ── */
.statusPill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.recentPillSold {
  background: var(--rc-sold-bg);
  color: var(--rc-sold);
}
.recentPillUnsold {
  background: rgba(255, 44, 44, 0.10);
  color: #ff2c2c;
}
.recentPill {
  background: var(--rc-sold-bg);
  color: var(--rc-sold);
}

/* ── Thumbnail for recently sold cards ── */
.lotSearchResult--recent .lsrThumb {
  flex: 0 0 auto;
  width: 116px;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--rc-sold-bg);
  display: block;
  text-decoration: none;
  position: relative;
}
.lotSearchResult--recent .lsrThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .2s ease;
}
.lotSearchResult--recent .lsrThumb:hover img { transform: scale(1.04); }
.lotSearchResult--recent .lsrThumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}
.lotSearchResult--recent .lsrThumbPh {
  font-size: 10px;
  color: var(--text-ter);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .lotSearchResult--recent .lsrThumb { width: 92px; border-radius: 10px; }
}

/* ── Bid events toggle button ── */
.lsrBidEventsBtn {
  background: none;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sec);
  cursor: pointer;
  transition: all .15s ease;
  letter-spacing: 0.01em;
}
.lsrBidEventsBtn:hover {
  background: var(--card-bg);
  color: var(--text-pri);
  border-color: var(--text-ter);
}

/* ── Bid events timeline ── */
.bidEventsWrap {
  margin-top: 10px;
  padding: 10px 0 4px;
  border-top: 1px solid var(--card-border);
}
.bidEventsTimeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.bidEvt {
  display: grid;
  grid-template-columns: 18px 56px 80px 76px auto;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  font-size: 11px;
  color: var(--text-sec);
  border-bottom: 1px solid var(--card-border);
}
.bidEvt:last-child { border-bottom: none; }

.bidEvtIcon {
  font-size: 9px;
  text-align: center;
  line-height: 1;
}
.bidEvtLabel {
  font-weight: 600;
  letter-spacing: 0.02em;
}
.bidEvtAmt {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--text-pri);
}
.bidEvtTime {
  font-variant-numeric: tabular-nums;
  color: var(--text-ter);
  font-size: 10px;
}
.bidEvtGap {
  font-size: 10px;
  color: var(--text-ter);
  font-variant-numeric: tabular-nums;
}

/* ── Event type colours ── */
.bidEvt--active .bidEvtIcon { color: #00c710; }
.bidEvt--active .bidEvtLabel { color: #00c710; }
.bidEvt--bid .bidEvtIcon { color: var(--text-sec); }
.bidEvt--sold .bidEvtIcon { color: #00c710; }
.bidEvt--sold .bidEvtLabel { color: #00c710; }
.bidEvt--sold .bidEvtAmt { color: #00c710; font-weight: 700; }
.bidEvt--unsold .bidEvtIcon { color: #ff2c2c; }
.bidEvt--unsold .bidEvtLabel { color: #ff2c2c; }

/* ── Sidebar mobile squash ── */
@media (max-width: 600px) {
  .bidEvt {
    grid-template-columns: 16px 48px 70px 64px auto;
    font-size: 10px;
  }
}

/* ══════════════════════════════════════════
   FEED — quiet expandable cards, v4 (Trading-212 register)
   Small, calm, all-light. House Breakdown · Price Lookup ·
   Recent Activity · Similar Artists. Nothing shouts; the section
   reads as a feed under the chart, not a billboard.
══════════════════════════════════════════ */
.knowSection {
  margin-top: 24px;
}

.knowSectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.knowHeading {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--text, #1d1d1f);
  margin: 0;
}

/* ── Gemini-flavoured AI Search: quiet pill, gradient underneath ── */
.geminiBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #3c4043;
  background: rgba(0,0,0,0.045);
  border: none;
  border-radius: 980px;
  padding: 7px 14px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.geminiBtn:hover {
  background: rgba(0,0,0,0.08);
}
.geminiBtn__spark {
  font-size: 12px;
  background: linear-gradient(120deg, #4285F4 0%, #9B72CB 55%, #D96570 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* ── Grid: four small cards, wrapping gracefully ── */
/* The Feed is a horizontal strip — cards slide left/right on every
   screen size (desktop trackpad, mobile thumb). No vertical piling. */
.knowGrid {
  display: flex;
  gap: 12px;
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* ── Card shell — small, soft, quiet ── */
.knowCard {
  position: relative;
  flex: 0 0 280px;
  scroll-snap-align: start;
  border-radius: 16px;
  padding: 16px 16px 14px;
  height: 250px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  background: var(--card-bg, #fff);
  border: 1px solid rgba(0,0,0,0.07);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.knowCard:hover:not(.knowCard--open) {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.10);
}
.knowCard:focus-visible {
  outline: 2px solid var(--brand, #00a7e1);
  outline-offset: 2px;
}
/* palette modifiers kept as aliases — everything is light now */
.knowCard--dark,
.knowCard--light,
.knowCard--white {
  background: var(--card-bg, #fff);
}

/* ── Head: modest title, quiet subline ── */
.knowCard__head { flex: 0 0 auto; position: relative; z-index: 1; }

.knowCard__title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.2;
  margin: 0;
  color: var(--text, #1d1d1f);
}

.knowCard__sub {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: 3px 0 0 0;
  color: var(--text-sec, rgba(0,0,0,0.52));
}

/* ── Body: live preview, hard-cropped, opaque bottom fade ── */
.knowCard__body {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 16px;
  position: relative;
}
.knowCard:not(.knowCard--open) .knowCard__body {
  overflow: hidden;
  pointer-events: none;
}
/* No bottom fade — collapsed bodies hard-crop via overflow:hidden.
   (The gradient wash read as smear on the small feed cards.) */

/* ── Collapsed-preview surgery per card ── */

/* House Breakdown: donut + legend, single column */
.knowCard:not(.knowCard--open)[data-know="houses"] .analysisHeroHeader,
.knowCard:not(.knowCard--open)[data-know="houses"] .analysisDivider,
.knowCard:not(.knowCard--open)[data-know="houses"] .analysisRightCol {
  display: none;
}
.knowCard:not(.knowCard--open)[data-know="houses"] .analysisHeroInner {
  display: block;
}
.knowCard:not(.knowCard--open)[data-know="houses"] .pieWrapHero {
  max-width: 160px;
  margin: 0 auto 12px;
  padding: 4px 0 0;
}
.knowCard:not(.knowCard--open)[data-know="houses"] .pieWrapHero #pieChart {
  max-width: 160px;
  height: 160px;
}

/* Price Lookup: stacked stats, no controls, T212-scale numerals */
.knowCard:not(.knowCard--open)[data-know="lookup"] .priceLookupHeader {
  display: none;
}
.knowCard:not(.knowCard--open)[data-know="lookup"] .priceLookupResults.visible {
  flex-direction: column;
  row-gap: 15px;
}
.knowCard[data-know="lookup"] .priceLookupResults .statValue {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.012em;
}
.knowCard[data-know="lookup"] .priceLookupResults .statLabel {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}
.statDetail {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-sec, rgba(0,0,0,0.5));
}

/* Recent Activity: rows only, quiet */
.knowCard[data-know="activity"] .saleCard__label,
.knowCard[data-know="activity"] .saleCard__date {
  display: none;
}
.knowCard:not(.knowCard--open)[data-know="activity"] .saleCarousel__backdrop,
.knowCard:not(.knowCard--open)[data-know="activity"] .saleCarousel__controls {
  display: none;
}
/* The feed teases the single latest lot — the rest live behind expand */
.knowCard:not(.knowCard--open)[data-know="activity"] .saleCard__rows .saleCard__row:nth-child(n+2) {
  display: none;
}
/* Inside the feed the desktop carousel IS the renderer at every
   viewport — the separate mobile panel row never applies here */
.knowCard[data-know="activity"] .saleCarousel--desktop { display: block !important; }
.knowCard[data-know="activity"] .saleCardsRow--mobile { display: none !important; }

.knowCard[data-know="activity"] .saleCarousel,
.knowCard[data-know="activity"] .saleCarousel__viewport,
.knowCard[data-know="activity"] .saleCarousel__card {
  position: static;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: none;
  transform: none;
}
.knowCard[data-know="activity"] .saleCard__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.knowCard[data-know="activity"] .saleCard__row:last-child { border-bottom: none; }
.saleCard__rowMain { flex: 1 1 auto; min-width: 0; }
.saleCard__lotTitle { display: block; }
.saleCard__lotTitleLine {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: 1.35;
  color: var(--text, #1d1d1f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.saleCard__rowMeta {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-sec, rgba(0,0,0,0.5));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.saleCard__house {
  color: var(--brand, #00a7e1);
  font-weight: 500;
}
.saleCard__amt {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-top: 1px;
}
.saleCard__amt--sold   { color: #1d9a46; }
.saleCard__amt--unsold { color: #e0302d; }
.knowCard[data-know="activity"] .saleCard__more {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-ter, rgba(0,0,0,0.38));
  padding-top: 9px;
  text-align: left;
}

/* Similar Artists — one small slide per artist in the feed strip */
.feedArtistCard {
  flex: 0 0 170px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  border-radius: 16px;
  padding: 16px;
  height: 250px;
  background: var(--card-bg, #fff);
  border: 1px solid rgba(0,0,0,0.07);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.feedArtistCard:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.10);
}
.feedArtistCard__img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(0,0,0,0.05);
  margin-bottom: 10px;
}
.feedArtistCard__img--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 500;
  color: var(--text-sec, rgba(0,0,0,0.45));
}
.feedArtistCard__name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text, #1d1d1f);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feedArtistCard__meta {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-sec, rgba(0,0,0,0.5));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.feedArtistCard__stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}
.feedArtistCard__value {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text, #1d1d1f);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.feedArtistCard__spark {
  flex: 0 0 auto;
  display: block;
}
.feedArtistCard__count {
  margin-top: auto;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-ter, rgba(0,0,0,0.38));
  font-variant-numeric: tabular-nums;
}

/* Tier drill-down — click a legend tier, its houses scroll out */
.houseLegendRow--clickable { cursor: pointer; }
.houseLegendRow--clickable:hover .houseLegendName { color: var(--brand, #00a7e1); }
.houseLegendChevron {
  margin-left: 6px;
  font-size: 10px;
  color: var(--text-ter, rgba(0,0,0,0.4));
}
.houseTierList {
  max-height: 220px;
  overflow-y: auto;
  margin: 4px 0 10px 18px;
  padding-right: 6px;
  border-left: 2px solid rgba(0,0,0,0.06);
}
.houseTierRow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0 5px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.houseTierRow:last-child { border-bottom: none; }
.houseTierRow__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text, #1d1d1f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.houseTierRow__lots {
  font-size: 12px;
  color: rgba(0,0,0,0.55);
  white-space: nowrap;
}
.houseTierRow__usd {
  font-size: 12px;
  color: rgba(0,0,0,0.55);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Open card: a full-width slide at the front of the strip.
   order:-1 gives it focus position; the others keep their exact
   relative order behind it — nothing shuffles. ── */
.knowCard--open {
  order: -1;
  flex: 0 0 100%;
  height: auto;
  min-height: 0;
  cursor: default;
  background: #f5f5f7;
  border-color: rgba(0,0,0,0.05);
}
/* Grey surface needs darker secondary ink — the default washes out */
.knowCard--open .knowCard__sub,
.knowCard--open .statLabel,
.knowCard--open .statDetail,
.knowCard--open .houseLegendSub,
.knowCard--open .saleCard__rowMeta,
.knowCard--open .subTitleLight,
.knowCard--open .kv,
.knowCard--open .toggleLbl {
  color: rgba(0,0,0,0.64);
}
.knowCard--open .knowCard__body {
  overflow: visible;
  pointer-events: auto;
}

/* ── + / × toggle — small, grey, T212-quiet ── */
.knowCard__toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  padding: 0 0 1px 0;
  cursor: pointer;
  background: rgba(0,0,0,0.06);
  color: var(--text-sec, rgba(0,0,0,0.55));
  transition: background 0.15s ease;
  z-index: 3;
}
.knowCard__toggle:hover { background: rgba(0,0,0,0.11); }

/* ── Nested legacy chrome neutralised ── */
.knowCard .analysisGrid { margin: 0; }
.knowCard .priceLookup { padding: 0; background: transparent; }
.knowCard .raExpanded { margin-top: 4px; }
.knowCard .analysisHeroCard { background: transparent !important; border: none !important; box-shadow: none !important; }
.knowCard .analysisHeroBg { display: none; }

/* ── Mobile: SAME horizontal strip, thumb-sized slides. Cards never
   pile vertically — you slide across, exactly like desktop. ── */
@media (max-width: 900px) {
  .knowGrid { scroll-snap-type: x mandatory; }
  .knowCard { flex: 0 0 78vw; height: 250px; }
  .knowCard--open { flex: 0 0 100%; height: auto; }
  .feedArtistCard { flex: 0 0 150px; }
}

/* ── Grey-pill treatment for the lot-card AI Search buttons ── */
.lsrGoogleBtn {
  color: #3c4043;
  background: rgba(0,0,0,0.045);
  border: 1px solid transparent;
}
.lsrGoogleBtn:hover {
  background: rgba(0,0,0,0.08);
  border-color: transparent;
}

/* ── Timed sale strip (upcoming lots with a closing timer + bid watch) ── */
.lsrTimed {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-sec, #6e6e73);
}
.lsrTimedPill {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #0071e3) 12%, transparent);
  color: var(--accent, #0071e3);
}
.lsrTimedBid strong { color: var(--text, #1d1d1f); font-weight: 600; }
.lsrTimedClose { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lsrTimedClose--hot { color: #c0392b; font-weight: 600; }
.lsrTimedClose--closed { color: var(--text-ter, #98989d); }