/* ===========================================================================
   Mr. Deeds — design tokens + site styles
   Family hues are OKLCH-derived and validated with the dataviz palette
   validator (dark mode, surface #151c26, adjacent pairs):
     Lightness band PASS · Chroma floor PASS · CVD separation PASS (worst
     adjacent ΔE 10.5 deutan) · Normal-vision floor PASS (worst ΔE 15.5) ·
     Contrast vs surface PASS (all >= 3:1)
   IMPORTANT: family hue is PAGE AMBIENCE, never a data encoding. Eight
   families cannot be distinguished by colour alone in a single view (best
   achievable all-pairs normal-vision ΔE is 13.7, below the 15 hard gate).
   Every family colour is always accompanied by its NAME.
   =========================================================================== */

:root{
  /* surfaces & ink */
  --bg:#0e1319; --card:#151c26; --card-2:#1a2331;
  --line:#33414f;            /* raised from #25303f — old value was 1.28:1, invisible */
  --line-soft:#222c3a;
  --txt:#e6ecf4;             /* 14.4:1 on card  AAA */
  --dim:#8f9cb0;             /* 6.16:1 on card  AA  */
  --dimmer:#6c7788;          /* 3.6:1  — decorative/large only */
  --acc:#7fa8cc;             /* 6.83:1 on card  AA  */
  --amb:#d4b273;             /* 8.50:1 on card  AAA */
  --ok:#5fbf8f; --warn:#e0b24f; --bad:#e07a6b;
  --brand:#f59245;           /* the mark's orange — identity and CTA only */

  /* tier ramp — SEQUENTIAL, one hue light→dark (never a 2-hue gradient) */
  --t1:#7fc0ea; --t2:#429cd0; --t3:#0077b1;
  --track:#2f3d4d;           /* raised from #202b3a — the empty tier dot MUST be visible */

  /* family fills + ink (ink = text-safe on card, >=4.6:1) */
  --fam-volcanic:#b0532d;    --fam-volcanic-ink:#ca6c47;
  --fam-decay:#a89023;       --fam-decay-ink:#a89023;
  --fam-growth:#2e7b35;      --fam-growth-ink:#49954e;
  --fam-mineral:#1da4a0;     --fam-mineral-ink:#1da4a0;
  --fam-harsh:#0c709c;       --fam-harsh-ink:#368dba;
  --fam-spirit:#8e83e1;      --fam-spirit-ink:#8e84dd;
  --fam-chaos:#885390;       --fam-chaos-ink:#a972b1;
  --fam-psychedelic:#d36a96; --fam-psychedelic-ink:#cf6e96;

  --fam-volcanic-deep:#511b00;    --fam-decay-deep:#323000;
  --fam-growth-deep:#003b1b;      --fam-mineral-deep:#003841;
  --fam-harsh-deep:#032f54;       --fam-spirit-deep:#371e57;
  --fam-chaos-deep:#461b3d;       --fam-psychedelic-deep:#540f23;

  --fam:var(--fam-harsh); --fam-ink:var(--fam-harsh-ink); --fam-deep:var(--fam-harsh-deep);
  --r:16px; --r-lg:22px;
}
[data-family=volcanic]{--fam:var(--fam-volcanic);--fam-ink:var(--fam-volcanic-ink);--fam-deep:var(--fam-volcanic-deep)}
[data-family=decay]{--fam:var(--fam-decay);--fam-ink:var(--fam-decay-ink);--fam-deep:var(--fam-decay-deep)}
[data-family=growth]{--fam:var(--fam-growth);--fam-ink:var(--fam-growth-ink);--fam-deep:var(--fam-growth-deep)}
[data-family=mineral]{--fam:var(--fam-mineral);--fam-ink:var(--fam-mineral-ink);--fam-deep:var(--fam-mineral-deep)}
[data-family=harsh]{--fam:var(--fam-harsh);--fam-ink:var(--fam-harsh-ink);--fam-deep:var(--fam-harsh-deep)}
[data-family=spirit]{--fam:var(--fam-spirit);--fam-ink:var(--fam-spirit-ink);--fam-deep:var(--fam-spirit-deep)}
[data-family=chaos]{--fam:var(--fam-chaos);--fam-ink:var(--fam-chaos-ink);--fam-deep:var(--fam-chaos-deep)}
[data-family=psychedelic]{--fam:var(--fam-psychedelic);--fam-ink:var(--fam-psychedelic-ink);--fam-deep:var(--fam-psychedelic-deep)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);margin:0;padding:0 0 64px;
  font:15px/1.6 'Segoe UI',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--acc)}
.wrap{max-width:1060px;margin:0 auto;padding:0 16px}
.tnum{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}

/* ---- top bar ----
   The brand orange comes from the Mr. Deeds mark, not from the family palette.
   It is reserved for identity and the one commercial call to action, so it
   never competes with --acc (data) or --fam (page ambience). */
.top{position:sticky;top:0;z-index:20;backdrop-filter:blur(9px);
  background:
    radial-gradient(560px 120% at 0% 0%, rgba(199,101,40,.20) 0%, transparent 66%),
    rgba(13,18,24,.94)}
/* molten hairline, brightest under the mark and fading out to the right */
.top::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--brand) 0%,rgba(245,146,69,.42) 22%,var(--line-soft) 62%,var(--line-soft) 100%)}
.top .wrap{display:flex;align-items:center;gap:20px;height:64px}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none;white-space:nowrap}
.brand .mark{width:36px;height:36px;flex:none;
  filter:drop-shadow(0 2px 7px rgba(245,146,69,.34));transition:transform .22s ease}
.brand:hover .mark{transform:rotate(-6deg) scale(1.06)}
/* column: name on one line, tagline under it. The name needs its own element —
   without it "Mr." and <b>Deeds</b> become separate flex items and stack. */
.brandtext{display:flex;flex-direction:column;line-height:1.05}
.brandname{font:800 21px system-ui;color:var(--txt);letter-spacing:-.45px;white-space:nowrap}
.brandname b{color:var(--amb);font-weight:800}
/* the tagline must stay quieter than the name — smaller, tighter, dimmer, and
   never wider than the wordmark above it */
.brandtext em{font:700 8.5px system-ui;font-style:normal;letter-spacing:1.25px;text-transform:uppercase;
  color:var(--dimmer);margin-top:4px}

.nav{display:flex;gap:15px;margin-left:auto;flex-wrap:wrap}
.nav a{color:var(--dim);text-decoration:none;font:600 14px system-ui;position:relative;padding:2px 0}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:var(--brand);border-radius:2px;transition:right .18s ease}
.nav a:hover,.nav a[aria-current=page]{color:var(--txt)}
.nav a:hover::after,.nav a[aria-current=page]::after{right:0}

/* the one commercial CTA — the only molten-filled element on the page */
.askcta{display:inline-flex;align-items:center;gap:8px;flex:none;text-decoration:none;
  background:linear-gradient(135deg,#ffc25e 0%,#f2913c 46%,#d9701f 100%);
  color:#2a1405;font:800 13.5px system-ui;letter-spacing:.1px;
  padding:8px 15px 8px 9px;border-radius:999px;
  box-shadow:0 2px 12px rgba(232,138,55,.30),inset 0 1px 0 rgba(255,240,205,.55);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.askcta .mark{width:24px;height:24px;flex:none}
.askcta i{font-style:normal;font-size:12px;opacity:.72}
.askcta:hover{transform:translateY(-1px);filter:brightness(1.06);
  box-shadow:0 5px 18px rgba(232,138,55,.44),inset 0 1px 0 rgba(255,240,205,.6)}
.askcta:active{transform:none}

@media (max-width:900px){
  .top .wrap{height:auto;padding-top:10px;padding-bottom:10px;flex-wrap:wrap;gap:8px 14px}
  .brandtext em{display:none}
  .brandname{font-size:19px}
  .nav{order:3;width:100%;margin-left:0;gap:13px}
  .nav a{font-size:13.5px}
  .askcta{margin-left:auto;font-size:12.5px;padding:6px 12px 6px 7px}
  .askcta .mark{width:20px;height:20px}
}
/* Very narrow: shorten the CTA to "Ask" without removing the element, so the
   accessible name stays "Ask Mr. Deeds" and the arrow keeps its position.
   display:none would have dropped it from the accessibility tree and pushed
   the arrow ahead of the label. */
@media (max-width:400px){
  .askcta span{font-size:0}
  .askcta span::after{content:'Ask';font:800 12.5px system-ui}
}

/* ---- breadcrumb ---- */
.crumb{color:var(--dim);font-size:13px;margin:18px 0 12px}
.crumb a{color:var(--dim);text-decoration:none} .crumb a:hover{color:var(--txt)}
.crumb span{margin:0 7px;color:var(--dimmer)}

/* ---- hero ---- */
.hero{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:
    radial-gradient(120% 90% at 6% 0%, color-mix(in srgb,var(--fam) 40%,transparent) 0%, transparent 62%),
    linear-gradient(146deg, var(--fam-deep) 0%, color-mix(in srgb,var(--fam-deep) 55%,var(--card)) 42%, var(--card) 78%)}
.hero .in{display:flex;gap:30px;padding:28px;align-items:center;flex-wrap:wrap}
.hero .art{flex:0 0 clamp(280px,36%,400px);max-width:400px}
.hero img{width:100%;height:auto;display:block;border-radius:var(--r);
  box-shadow:0 14px 40px rgba(0,0,0,.58);background:var(--card-2)}
.hero img.zoomable{cursor:zoom-in;transition:transform .18s ease,box-shadow .18s ease}
.hero img.zoomable:hover{transform:translateY(-3px);box-shadow:0 20px 48px rgba(0,0,0,.66)}
.noart{width:100%;aspect-ratio:3/4;border-radius:var(--r);background:var(--card-2);border:1px dashed var(--line);display:grid;place-items:center;color:var(--dimmer);font:600 12px system-ui;text-align:center;padding:12px}
.noart.sm{aspect-ratio:3/4;font-size:11px;border-radius:0;border:0;border-bottom:1px dashed var(--line)}
.noart-inline{display:inline-block;width:38px;height:38px;border-radius:8px;background:var(--card-2);border:1px dashed var(--line);vertical-align:middle;margin-right:9px}
.hero .meta{flex:1;min-width:270px}
.fam{display:inline-block;background:var(--fam);color:#0b1118;font:800 11px system-ui;
  letter-spacing:1.6px;padding:4px 12px;border-radius:999px;text-transform:uppercase;text-decoration:none}
.fam.out{background:none;border:1.5px solid var(--fam-ink);color:var(--fam-ink)}
h1{font-size:38px;margin:10px 0 0;letter-spacing:-.6px;line-height:1.1}
h1 small{display:block;font:600 12px system-ui;letter-spacing:2.2px;color:var(--dim);margin-bottom:2px}
.env{font-size:16.5px;margin:6px 0 14px;color:var(--txt)}
.env a{color:var(--fam-ink);text-decoration:none;font-weight:700;border-bottom:1px solid color-mix(in srgb,var(--fam-ink) 45%,transparent)}

/* ---- estimate chip ---- */
.est{display:block;flex:1 1 320px;min-width:0;background:#13202e;border:2px solid var(--acc);border-radius:14px;padding:11px 18px}
.est .k{font:800 10.5px system-ui;letter-spacing:1.6px;color:var(--acc);display:block}
.est .v{font-size:26px;font-weight:800;color:var(--acc);line-height:1.25}
.est .rng{font-size:12.5px;color:var(--dim);font-weight:600;display:block;margin-top:1px}
.est .s{font-size:12px;color:var(--dim);display:block;margin-top:2px}
.est summary{cursor:pointer;font:700 11.5px system-ui;color:var(--acc);margin-top:6px;list-style:none}
.est summary::-webkit-details-marker{display:none}
.est summary::after{content:' ▾'}
.est details[open] summary::after{content:' ▴'}
.thinwarn{background:#231a0d;border:1px solid color-mix(in srgb,var(--amb) 45%,transparent);border-radius:10px;padding:9px 12px;margin:8px 0 0;font-size:12.5px;color:var(--amb);line-height:1.5}
.thinwarn b{color:var(--txt)}
.factors{margin:8px 0 0;padding:0;list-style:none;border-top:1px solid var(--line);padding-top:8px}
.factors li{display:flex;justify-content:space-between;gap:16px;font-size:12.5px;color:var(--dim);padding:2px 0}
.factors li b{color:var(--txt);font-variant-numeric:tabular-nums}
.factors .nn{font-style:normal;color:var(--dimmer);font-size:11px;margin-left:4px}
.factors li.fit{color:var(--dimmer);font-size:11px;border:0;padding-top:2px}
.factors li.tot{border-top:1px solid var(--line);margin-top:4px;padding-top:5px;color:var(--txt);font-weight:700}

/* ---- plot-size distribution ---- */
.estrow{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap}
.tdist{background:#13202e;border:1px solid var(--line);border-radius:14px;padding:11px 14px 10px;
  display:flex;flex-direction:column;flex:1 1 208px;min-width:196px}
.tdist .k{font:800 10.5px system-ui;letter-spacing:1.4px;color:var(--dim);text-transform:uppercase}
.tdist .k b{color:var(--txt)}
.bars{display:flex;gap:8px;align-items:flex-end;margin:10px 0 2px;flex:1;min-height:72px}
.bcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:26px}
.bwrap{width:100%;height:62px;display:flex;align-items:flex-end}
.bwrap i{display:block;width:100%;background:var(--dimmer);border-radius:4px 4px 0 0;opacity:.55}
.bcol.on .bwrap i{background:var(--acc);opacity:1}
.bt{font:800 10.5px system-ui;color:var(--dim);letter-spacing:.4px}
.bn{font:700 10px system-ui;color:var(--dimmer);font-variant-numeric:tabular-nums}
.bcol.on .bt,.bcol.on .bn{color:var(--acc)}
.tsub{font-size:11.5px;color:var(--dim);margin-top:4px}

/* ---- stat grid ---- */
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px;margin:16px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px}
.stat .k{font:800 10.5px system-ui;letter-spacing:1.5px;color:var(--dim);text-transform:uppercase}
.stat .name{font-size:17.5px;font-weight:800;margin:5px 0 2px;line-height:1.25;overflow-wrap:anywhere}
.stat .name a{color:var(--txt);text-decoration:none;border-bottom:2px solid var(--fam)}
.stat .name a:hover{border-bottom-color:var(--acc)}
.stat .sub{color:var(--dim);font-size:13px}
.stat.empty .name{color:var(--dimmer);font-weight:700}

/* trait detail cropped from the deed's own artwork */
.stat.withpic .pic{display:flex;gap:13px;align-items:flex-start;margin-top:5px}
.stat.withpic .name{font-size:16.5px}
.stat.withpic .picbody{min-width:0;flex:1}
.stat.withpic .name{margin-top:0}
.crop{flex:none;display:block;border-radius:10px;background-repeat:no-repeat;
  border:1px solid var(--line);background-color:var(--card-2);box-shadow:inset 0 0 22px -8px #000}
.crop.sq{width:76px;height:76px}
.crop.lg{width:112px;height:112px}
.traithead{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.traithead>div{flex:1;min-width:260px}
.sec.sedring{position:relative}
.crop.sm{width:54px;height:54px;border-radius:50%}
/* the icon box clips; the image inside is scaled so every tier reads at the
   same visual weight (Yuga draws T1 much smaller inside the same canvas) */
.crop{overflow:hidden;display:inline-flex;align-items:center;justify-content:center;flex:none}
.crop > img{width:100%;height:100%;object-fit:contain;display:block;
  transform:scale(var(--iz,1));transform-origin:center}
.crop.mock{background-size:contain;background-position:center;border-color:transparent;box-shadow:none;background-color:transparent}
.stat.withpic .dots{margin-top:6px}
img.crop{object-fit:cover;display:block}
.stat.rare .crop{border-color:color-mix(in srgb,var(--amb) 55%,transparent)}
.stat.rare{border-color:color-mix(in srgb,var(--amb) 62%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--amb) 22%,transparent), 0 0 18px -6px color-mix(in srgb,var(--amb) 40%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--amb) 5%,var(--card)),var(--card))}
.stat.rare .k{color:var(--amb)}
.stat.rare .name{color:var(--amb)}
.stat.rare.empty-rare{box-shadow:0 0 0 1px color-mix(in srgb,var(--amb) 14%,transparent);background:var(--card)}
.stat.rare.empty-rare .name{color:var(--dimmer)}

/* sediment ring — the frame picks up the sediment's own colour */
.stat.sedring{position:relative;border-color:transparent;background:var(--card);isolation:isolate}
.stat.sedring::before{content:'';position:absolute;inset:0;border-radius:var(--r);padding:1.5px;
  background:var(--sed-edge,linear-gradient(120deg,var(--line),var(--line)));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none;z-index:1}
.stat.sedring::after{content:'';position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  box-shadow:0 0 20px -8px var(--sed,transparent);z-index:0}
.stat.sedring .k{color:color-mix(in srgb,var(--sed,#8f9cb0) 62%,#c9d3e0)}
.stat.sedring .name a{border-bottom-color:var(--sed,var(--fam))}

/* ---- tier dots: colour + NUMERAL, never colour alone ---- */
.dots{margin-top:9px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;row-gap:6px}
.dots i{width:15px;height:15px;border-radius:4px;background:var(--track);
  border:1px solid #3b4a5c;display:inline-block;flex:none}
.dots i.on{border-color:transparent}
.dots i.on:nth-child(1){background:var(--t1)}
.dots i.on:nth-child(2){background:var(--t2)}
.dots i.on:nth-child(3){background:var(--t3)}
.dots.sed i.on:nth-child(1){background:color-mix(in srgb,var(--sed,#7fc0ea) 55%,#0b1118)}
.dots.sed i.on:nth-child(2){background:color-mix(in srgb,var(--sed,#7fc0ea) 78%,#0b1118)}
.dots.sed i.on:nth-child(3){background:var(--sed,#7fc0ea)}
.dots .lbl{font-size:12.5px;color:var(--dim);margin-left:4px}
.dots .lbl b{color:var(--txt)}
/* T3 MAX — unchanged flat amber. It states a fact about THIS deed's deposit. */
/* Tags sit on their own row rather than trailing the tier dots. Inline, a deed
   with BOTH pills pushed the second onto its own line while a deed with one kept
   it inline — so cards in the same row had different heights and the pills
   landed at different depths. Their own row makes every card identical. */
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.tags > *{margin-left:0}
.t3tag{display:inline-block;background:var(--amb);color:#1f1a0d;font:800 10px system-ui;
  padding:2px 7px;border-radius:6px;margin-left:4px;letter-spacing:.4px;white-space:nowrap}
/* RARE — metallic gold, deliberately louder. It states a fact about the
   resource's scarcity across all 100,000 plots, which is the bigger claim.
   Separated from T3 MAX by three cues, not one: hue (gold vs tan), a vertical
   gradient with a lit top edge, and a soft outer glow. The gradient and glow
   survive colour-vision deficiency, where hue alone would not. */
.raretag{display:inline-block;
  background:linear-gradient(180deg,#ffdd80 0%,#f2ba43 52%,#dc9b22 100%);
  color:#2a1f04;font:900 10px system-ui;
  padding:2.5px 8px;border-radius:6px;margin-left:4px;letter-spacing:.7px;white-space:nowrap;
  border-top:1px solid #ffeaad;
  box-shadow:0 0 0 1px rgba(255,190,60,.30),0 2px 9px rgba(240,175,50,.30)}

/* ---- percentile bar ---- */
.pct{margin:6px 0 0}
.pct .bar{height:8px;background:var(--track);border-radius:999px;overflow:hidden}
.pct .bar i{display:block;height:100%;background:var(--acc);border-radius:999px}
.pct .cap{font-size:12.5px;color:var(--dim);margin-top:5px}
.pct .cap b{color:var(--txt)}

/* ---- CTA ---- */
.ctabar{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 8px}
.cta{flex:1;min-width:210px;text-align:center;background:var(--acc);color:#0a1420;
  font:800 15px system-ui;padding:13px;border-radius:14px;text-decoration:none}
.cta.o{background:none;border:2px solid var(--amb);color:var(--amb)}
.cta.g{background:none;border:2px solid var(--line);color:var(--dim)}
.cta:hover{filter:brightness(1.08)}

/* ---- section ---- */
.sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;margin:22px 0}
.sec h2{font-size:26px;margin:0 0 4px;letter-spacing:-.3px}
.sec h3{font-size:14px;letter-spacing:1.4px;text-transform:uppercase;color:var(--dim);margin:0 0 12px}
.note{color:var(--dim);font-size:13.5px}

/* ---- tier ladder (sequential bars) ---- */
.ladder{margin:16px 0}
.lrow{display:flex;align-items:center;gap:12px;margin:8px 0}
.lrow .t{width:92px;font-weight:800;font-size:13.5px}
.lrow .t.hot{color:var(--amb)}
.lbar{flex:1;height:16px;background:var(--track);border-radius:8px;overflow:hidden}
.lbar i{display:block;height:100%;border-radius:8px}
.lrow:nth-child(1) .lbar i{background:var(--t1)}
.lrow:nth-child(2) .lbar i{background:var(--t2)}
.lrow:nth-child(3) .lbar i{background:var(--t3)}
.lrow .n{width:142px;text-align:right;font-variant-numeric:tabular-nums;color:var(--dim);font-size:13.5px}

/* ---- comps table ---- */
.comps{width:100%;border-collapse:collapse;font-size:14px}
.comps th{text-align:left;font:800 10.5px system-ui;letter-spacing:1.4px;color:var(--dim);
  text-transform:uppercase;padding:0 10px 8px 0;border-bottom:1px solid var(--line)}
.comps td{padding:10px 10px 10px 0;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.comps tr:last-child td{border-bottom:0}
.comps a{color:var(--txt);text-decoration:none;font-weight:700}
.comps a:hover{color:var(--acc)}
.gap{font-variant-numeric:tabular-nums;font-weight:800}
.gap.u{color:var(--ok)} .gap.o{color:var(--bad)} .gap.n{color:var(--dim)}
.comps .thumb{width:38px;height:38px;border-radius:8px;object-fit:contain;background:var(--card-2);vertical-align:middle;margin-right:9px}

/* ---- best-value rotator ---- */
.sec.value h3{margin-bottom:16px}
.vwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.vcard{display:flex;gap:14px;background:var(--card-2);border:1px solid var(--line);border-radius:16px;
  padding:12px;text-decoration:none;color:var(--txt);position:relative;overflow:hidden}
.vcard::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--fam)}
.vcard:hover{border-color:var(--acc)}
.vart{flex:none;width:74px}
.vart img{width:100%;height:auto;border-radius:10px;display:block;background:var(--card)}
.vart .gph{aspect-ratio:3/4;display:grid;place-items:center;border-radius:10px;background:var(--card);
  color:var(--dimmer);font:600 10px system-ui;text-align:center;padding:4px}
.vb{flex:1;min-width:0}
.vtop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.vid{font-size:17px;font-weight:800}
.vgap{font:800 13px system-ui;font-variant-numeric:tabular-nums;padding:2px 8px;border-radius:7px}
.vgap.u{color:#0b1a12;background:var(--ok)} .vgap.o{color:#1d0d0a;background:var(--bad)}
.vsub{color:var(--dim);font-size:12.5px;margin:2px 0 8px}
.vrow{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--dim);
  border-top:1px solid var(--line-soft);padding:3px 0}
.vrow b{color:var(--txt);font-variant-numeric:tabular-nums}
.vfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;flex-wrap:wrap}
.vdots{display:flex;gap:7px}
.vdot{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--track)}
.vdot.on{background:var(--acc)}
.vdot:hover{background:var(--dim)}
.vall{color:var(--acc);text-decoration:none;font:700 13px system-ui}
.vall:hover{text-decoration:underline}

/* ---- deed grid (browse) ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:14px}
.dcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  text-decoration:none;display:block;color:var(--txt)}
.dcard:hover{border-color:var(--acc)}
.dcard img{width:100%;aspect-ratio:3/4;object-fit:contain;display:block;background:var(--card-2)}
.dcard .b{padding:11px 13px}
.dcard .n{font-weight:800;font-size:15px}
.dcard .e{color:var(--dim);font-size:12.5px;margin-top:1px}
.dcard .p{margin-top:7px;font-size:13.5px;font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums}
.dcard .fambar{height:3px;background:var(--fam)}

/* ---- disclosure ---- */
.disc{border:1px solid var(--line);border-left:3px solid var(--amb);border-radius:12px;
  background:#12181f;padding:16px 18px;margin:26px 0 0;color:var(--dim);font-size:12.8px;line-height:1.65}
.disc b{color:var(--amb);display:block;margin-bottom:5px;font-size:12px;letter-spacing:1.2px;text-transform:uppercase}
.disc p{margin:0 0 8px} .disc p:last-child{margin:0}
.disc a{color:var(--acc)}

.lb{position:fixed;inset:0;z-index:100;background:rgba(6,9,13,.94);
  display:grid;place-items:center;padding:28px}
.lb[hidden]{display:none}
.lb img{max-width:min(94vw,900px);max-height:92vh;width:auto;height:auto;border-radius:14px;
  box-shadow:0 30px 90px rgba(0,0,0,.7);cursor:zoom-out}
.lbx{position:absolute;top:18px;right:22px;width:42px;height:42px;border-radius:50%;
  background:var(--card);border:1px solid var(--line);color:var(--txt);font-size:17px;cursor:pointer;
  display:grid;place-items:center}
.lbx:hover{border-color:var(--acc);color:var(--acc)}

.foot{color:var(--dimmer);font-size:12.5px;text-align:center;margin-top:34px}
.stamp{color:var(--dimmer);font-size:12px;font-variant-numeric:tabular-nums}

@media (max-width:640px){
  .hero .art{flex:1 1 100%;max-width:320px}
  h1{font-size:30px}
  .hero .in{padding:18px;gap:18px}
  .hero .art{width:100%;max-width:260px}
  .lrow .n{width:96px;font-size:12.5px}
  .lrow .t{width:74px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── environment + sediment artwork ───────────────────────────────────────── */
/* Tier plate on a deed page: 1000×994 from Yuga, shown small and cropped to a
   band so it reads as terrain context rather than competing with the deed art. */
.envplate{display:block;position:relative;margin-top:14px;border-radius:var(--r);
  overflow:hidden;border:1px solid var(--line);text-decoration:none;
  transition:border-color .18s ease,transform .18s ease}
.envplate:hover{border-color:var(--fam);transform:translateY(-2px)}
.envplate img{display:block;width:100%;height:132px;object-fit:cover;object-position:center 58%}
.envplate span{position:absolute;left:0;right:0;bottom:0;padding:16px 13px 8px;
  font:800 11px system-ui;letter-spacing:1.3px;text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(6,10,16,.88),rgba(6,10,16,0))}

/* Hero banner on an environment page. Yuga ships these 1080×1920 portrait, so
   they are cropped to a wide band — never letterboxed to their native ratio. */
.envhero{position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);margin-bottom:18px}
.envhero img{display:block;width:100%;height:clamp(200px,30vw,340px);
  object-fit:cover;object-position:center 42%}
.envhero .cap{position:absolute;left:0;right:0;bottom:0;padding:44px 26px 20px;
  background:linear-gradient(to top,rgba(6,10,16,.92),rgba(6,10,16,0))}
.envhero .cap h1{margin:6px 0 0;font-size:clamp(28px,4.4vw,44px);line-height:1.05;color:#fff}
.envhero .cap .fam{display:inline-block}

/* Tier plate strip: the five terrain variants side by side. */
.plates{display:grid;gap:11px;margin-top:18px;
  grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
.plates figure{margin:0;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--card)}
.plates img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.plates figcaption{padding:8px 10px;display:flex;justify-content:space-between;
  align-items:baseline;gap:8px;font-size:12.5px}
.plates figcaption b{font-weight:800}
.plates figcaption span{color:var(--dim);font-size:11.5px}

.sedart{margin-top:16px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.sedart img{display:block;width:100%;height:auto}

@media (max-width:560px){
  .envplate img{height:104px}
  .plates{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
}

/* ── typographic orphan control ───────────────────────────────────────────────
   text-wrap:pretty asks the browser to avoid a last line holding a single
   short word. It fixes prose blurbs; structured pairs like "tier 1" are bound
   with a literal non-breaking space in build.mjs instead, because that works
   in every browser rather than only the ones that ship `pretty`.
   Headings get `balance`, which evens the line lengths outright. */
.picbody .name,.stat .name,figcaption,.dcard .e,.envplate span,p{text-wrap:pretty}
/* short blurbs get `balance`, which evens the line lengths outright rather
   than only avoiding a one-word last line — the right tool under ~6 lines. */
.sub,.note,.cap,.tsub,.lbl,.blurb{text-wrap:balance}
h1,h2,h3,.est .s,.est .rng{text-wrap:balance}
/* never let a number break away from its unit inside a tight box */
.tsub,.dots .lbl,.plates figcaption,.lrow .t,.lrow .n{white-space:normal;overflow-wrap:break-word}

/* ═══ BROWSE — market bar, filter rail, results ══════════════════════════════ */

/* Market strip. Deliberately NOT a floor-first stat row: the number that
   matters here is how many listings sit below the model, not the floor. */
.mkt{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;
  padding:13px 16px;margin:14px 0 18px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);font-size:13.5px;color:var(--dim)}
.mkt b{color:var(--txt);font-size:16px;font-weight:800;margin-right:5px;font-variant-numeric:tabular-nums}
.mkt .good b{color:var(--ok)}
.mkt .dimx{margin-left:auto;color:var(--dimmer);font-size:12.5px}

.topval{margin-bottom:22px}
.tvhead{display:flex;align-items:baseline;gap:14px;margin-bottom:12px}
.tvhead h2{margin:0;font-size:20px}
.tvhead .vall{margin-left:auto;font-size:13px;color:var(--acc);text-decoration:none;white-space:nowrap}

/* ---- two-column browse shell ---- */
.browse{display:grid;grid-template-columns:246px minmax(0,1fr);gap:22px;align-items:start}
.filters{position:sticky;top:72px;max-height:calc(100vh - 90px);overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 14px 18px;
  scrollbar-width:thin}
.fhead{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.fhead h3{margin:0;font:800 12px system-ui;letter-spacing:1.6px;text-transform:uppercase;color:var(--dim)}
.freset{margin-left:auto;background:none;border:1px solid var(--line);color:var(--dim);
  font:700 11px system-ui;padding:3px 9px;border-radius:999px;cursor:pointer}
.freset:hover{color:var(--txt);border-color:var(--acc)}

.fgroup{border-top:1px solid var(--line-soft);padding:12px 0 4px}
.fgroup:first-of-type{border-top:0}
.fgroup>h4{margin:0 0 9px;font:800 12.5px system-ui;color:var(--txt);cursor:pointer;
  display:flex;align-items:center;letter-spacing:.2px}
.fgroup>h4::after{content:'−';margin-left:auto;color:var(--dimmer);font-weight:700}
.fgroup.closed>h4::after{content:'+'}
.fgroup.closed>*:not(h4){display:none}
/* the valuation group is the differentiator — give it a visible frame */
.fgroup.val{background:#131e2b;border:1px solid color-mix(in srgb,var(--acc) 34%,transparent);
  border-radius:12px;padding:11px 12px 9px;margin-bottom:4px}
.fgroup.val>h4{color:var(--acc)}

.flab{display:block;font:700 10.5px system-ui;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--dim);margin:9px 0 5px}
.flab em{font-style:normal;display:inline-grid;place-items:center;width:13px;height:13px;
  border-radius:50%;background:var(--track);color:var(--dim);font-size:9px;margin-left:5px;cursor:help}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{background:var(--card-2);border:1px solid var(--line);color:var(--dim);
  font:700 11.5px system-ui;padding:4px 9px;border-radius:999px;cursor:pointer;white-space:nowrap}
.chip:hover{color:var(--txt);border-color:var(--acc)}
.chip.on{background:var(--acc);border-color:var(--acc);color:#0a1420}
.chip.sm{font-size:11px;padding:3px 8px}
.ftog{display:inline-flex;align-items:center;gap:5px;background:var(--card-2);
  border:1px solid var(--line);color:var(--dim);font:700 11.5px system-ui;
  padding:4px 9px;border-radius:999px;cursor:pointer;white-space:nowrap}
.ftog input{margin:0;accent-color:var(--acc)}
.ftog:has(input:checked){background:var(--acc);border-color:var(--acc);color:#0a1420}
.ftog.sm{font-size:11px;padding:3px 7px}
.frange{display:flex;align-items:center;gap:6px;margin:9px 0}
.frange input{width:100%;min-width:0;background:var(--bg);border:1px solid var(--line);
  color:var(--txt);border-radius:8px;padding:5px 8px;font:600 12.5px system-ui}
.frange span{color:var(--dimmer)}

.ffind{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);
  border-radius:8px;padding:5px 8px;font:600 12px system-ui;margin-bottom:7px}
.fopts{max-height:196px;overflow-y:auto;scrollbar-width:thin;padding-right:2px}
.fopt{display:flex;align-items:center;gap:7px;padding:3px 2px;font-size:12.5px;
  color:var(--dim);cursor:pointer;border-radius:6px}
.fopt:hover{color:var(--txt);background:var(--card-2)}
.fopt input{margin:0;accent-color:var(--acc);flex:none}
.fopt span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fopt b{color:var(--dimmer);font:600 11px system-ui;font-variant-numeric:tabular-nums;flex:none}
.fopt:has(input:checked){color:var(--txt)}
.fopt:has(input:checked) b{color:var(--acc)}

/* ---- results ---- */
.rbar{display:flex;gap:10px;margin-bottom:10px}
.rsearch{flex:1;min-width:0;background:var(--card);border:1px solid var(--line);color:var(--txt);
  border-radius:10px;padding:9px 13px;font:600 14px system-ui}
.rsearch:focus{border-color:var(--acc);outline:none}
.rsort{background:var(--card);border:1px solid var(--line);color:var(--txt);
  border-radius:10px;padding:9px 11px;font:600 13px system-ui;cursor:pointer}
.rcount{font-size:13px;color:var(--dim);margin-bottom:12px;display:flex;flex-wrap:wrap;gap:4px 12px}
.rcount b{color:var(--txt);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.more{display:block;width:100%;margin-top:16px;background:var(--card);border:1px solid var(--line);
  color:var(--txt);font:700 13.5px system-ui;padding:12px;border-radius:12px;cursor:pointer}
.more:hover{border-color:var(--acc)}

/* card pills — a compact read of why a deed is interesting */
.cpills{display:flex;flex-wrap:wrap;gap:4px;margin:5px 0 2px}
.cp{font:800 9.5px system-ui;letter-spacing:.4px;text-transform:uppercase;padding:2px 6px;
  border-radius:5px;font-style:normal;white-space:nowrap}
.cp.rare{background:linear-gradient(180deg,#ffdd80,#e8ab30);color:#2a1f04}
.cp.t3{background:var(--amb);color:#1f1a0d}
.cp.club{background:var(--fam-spirit);color:#0b1118}
.cp.koda{background:var(--fam-mineral);color:#04201f}
.cgap{float:right;font:800 11.5px system-ui;font-variant-numeric:tabular-nums}
.cgap.u{color:var(--ok)} .cgap.o{color:var(--dimmer)}
.cest{color:var(--dim);font-weight:600;font-size:11.5px}

@media (max-width:900px){
  .browse{grid-template-columns:1fr}
  .filters{position:static;max-height:none}
  .fopts{max-height:168px}
}

/* ═══ presets, export, compare ══════════════════════════════════════════════ */

/* One-click views. "Deals" is four filters deep by hand — the most-used view
   should not be the most work to reach. */
.presets{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 18px}
.pre{flex:1 1 210px;text-align:left;background:var(--card);border:1px solid var(--line);
  color:var(--txt);border-radius:12px;padding:10px 13px;cursor:pointer;
  font:800 14px system-ui;transition:border-color .16s ease,transform .16s ease}
.pre:hover{border-color:var(--acc);transform:translateY(-1px)}
.pre em{display:block;font:600 11.5px system-ui;font-style:normal;color:var(--dim);margin-top:2px}
.pre.deal{border-color:color-mix(in srgb,var(--ok) 46%,transparent);background:#111f1a}
.pre.deal:hover{border-color:var(--ok)}
.mkt .acc b{color:var(--acc)}
.ftog.conf{display:flex;margin-top:9px;width:100%;justify-content:flex-start}
.ftog.conf em{font-style:normal;display:inline-grid;place-items:center;width:13px;height:13px;
  border-radius:50%;background:var(--track);color:var(--dim);font-size:9px;margin-left:auto;cursor:help}

.rcsv{background:var(--card);border:1px solid var(--line);color:var(--txt);
  border-radius:10px;padding:9px 13px;font:700 13px system-ui;cursor:pointer;white-space:nowrap}
.rcsv:hover:not(:disabled){border-color:var(--acc)}
.rcsv:disabled{opacity:.45;cursor:default}

/* compare control sits on the card art. A button, not a checkbox: the card is
   a link, and cancelling the link's navigation also cancels a native
   checkbox's state change — a button has no default action to fight. */
.dcard{position:relative}
.cpick{position:absolute;top:8px;left:8px;z-index:2;display:grid;place-items:center;
  width:26px;height:26px;border-radius:8px;background:rgba(8,13,20,.72);
  border:1px solid rgba(255,255,255,.16);cursor:pointer;padding:0;
  opacity:0;transition:opacity .14s ease}
.cpick::before{content:'+';font:700 15px system-ui;color:#fff;line-height:1}
.dcard:hover .cpick,.cpick[aria-pressed=true],.cpick:focus-visible{opacity:1}
.cpick[aria-pressed=true]{background:var(--acc);border-color:var(--acc)}
.cpick[aria-pressed=true]::before{content:'✓';color:#0a1420;font-size:14px}
.cp.thin{background:var(--track);color:var(--dim)}

/* ---- tray ---- */
.tray{position:fixed;left:0;right:0;bottom:0;z-index:30;transform:translateY(110%);
  transition:transform .2s ease;background:rgba(14,19,25,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line)}
.tray.on{transform:none}
.tray .wrap{display:flex;align-items:center;gap:12px;padding:11px 16px;max-width:1060px}
.tlab{font:800 10.5px system-ui;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);flex:none}
.titems{display:flex;gap:7px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}
.tchip{display:inline-flex;align-items:center;gap:6px;background:var(--card-2);
  border:1px solid var(--line);border-radius:999px;padding:3px 9px 3px 3px;
  font:700 12px system-ui;color:var(--txt);cursor:pointer;white-space:nowrap}
.tchip img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.tchip b{color:var(--dimmer);font-size:14px;margin-left:2px}
.tchip:hover b{color:var(--bad)}
.tclear{background:none;border:0;color:var(--dim);font:700 12px system-ui;cursor:pointer;flex:none}
.tclear:hover{color:var(--txt)}
.tgo{background:var(--acc);border:0;color:#0a1420;font:800 13px system-ui;
  padding:8px 16px;border-radius:10px;cursor:pointer;flex:none}
.tgo:disabled{opacity:.4;cursor:default}

/* ---- compare modal ---- */
.modal{position:fixed;inset:0;z-index:40;background:rgba(6,10,16,.82);
  display:grid;place-items:start center;padding:28px 14px;overflow-y:auto}
.modal[hidden]{display:none}
.mbox{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px;max-width:1000px;width:100%}
.mbox h2{margin:0 0 14px;font-size:22px}
.mclose{position:absolute;top:12px;right:14px;background:none;border:0;color:var(--dim);
  font-size:26px;line-height:1;cursor:pointer}
.mclose:hover{color:var(--txt)}
.cmptab{width:100%;border-collapse:collapse;font-size:13.5px}
.cmptab th,.cmptab td{border-bottom:1px solid var(--line-soft);padding:9px 10px;
  text-align:left;vertical-align:top}
.cmptab tr>th:first-child{width:150px;color:var(--dim);font:700 11.5px system-ui;
  letter-spacing:.6px;text-transform:uppercase;white-space:nowrap}
.cmptab tr:first-child th{border-bottom:1px solid var(--line);text-align:center}
.cmptab tr:first-child a{display:block;text-decoration:none;color:var(--txt);font-weight:800}
.cmptab tr:first-child img,.cmptab tr:first-child .noart{width:100%;max-width:132px;
  height:172px;object-fit:cover;border-radius:10px;display:block;margin:0 auto 7px;
  aspect-ratio:auto;border:0;background:var(--card-2)}
.cmptab tr.big td{font-size:16px;font-weight:800}
.cmptab td em{font-style:normal;color:var(--dim);font-size:11.5px}
.cmptab td.win{background:color-mix(in srgb,var(--ok) 13%,transparent);
  box-shadow:inset 3px 0 0 var(--ok)}
.cmptab .gu{color:var(--ok)} .cmptab .go{color:var(--dimmer)}
@media (max-width:600px){
  .cmptab tr>th:first-child{width:96px;font-size:10.5px}
  .cmptab th,.cmptab td{padding:7px 6px;font-size:12.5px}
}

/* a held-out row is a disclosure, not a footnote — give it a visible edge */
.vexcl{border-left:2px solid var(--amb);padding-left:11px;margin-top:12px}
.cmptab .go{color:var(--dimmer)}

.gridmore{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line-soft)}
.gridmore a{font-weight:700}
.gridmore span{color:var(--dimmer);font-size:12.5px}

/* ── estimate vs ask ─────────────────────────────────────────────────────────
   The ask used to be a 12px footnote under a 26px estimate, which invited the
   eye to read the estimate as the price. They are the two numbers a buyer is
   actually comparing, so they get the same type size and sit side by side. */
.est .figs{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:flex-start}
.est .fig{display:flex;flex-direction:column;min-width:118px}
.est .fig .k{font:800 10px system-ui;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--dim);margin-bottom:2px}
.est .fig .v{font-size:25px;font-weight:800;color:var(--acc);line-height:1.15;white-space:nowrap}
.est .fig .v em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--dim);margin-left:4px}
.est .fig .rng{font-size:12px;color:var(--dim);font-weight:600;margin-top:3px}
.est .fig .rng b{font-weight:800}
/* the ask is deliberately a different hue from the estimate — same size, so the
   comparison is fair, different colour, so they are never confused */
.est .fig.under .v,.est .fig.over .v{color:var(--txt)}
.est .fig.under .rng b{color:var(--ok)}
.est .fig.over  .rng b{color:var(--bad)}
.est .fig.none .v{color:var(--dimmer);font-size:20px}
.est .fig .nolist{font-size:20px}
@media (max-width:420px){ .est .fig .v{font-size:21px} }

/* freshness stamp — the page must never imply live data it does not have */
/* the sample-size tag belongs to the factor name, never alone on its own line */
.factors li span{text-wrap:pretty}
.factors .nb{white-space:nowrap}
.factors .nn{margin-left:4px}

.pxstamp{font:700 10px system-ui;letter-spacing:.6px;text-transform:uppercase;margin-top:8px}
.pxstamp.live{color:var(--ok)}
.pxstamp.live::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--ok);margin-right:6px;vertical-align:1px;animation:pxpulse 2.4s ease-in-out infinite}
.pxstamp.stale{color:var(--warn)}
.pxstamp.stale::before{content:'⚠ ';animation:none}
.mkt .dimx.live{color:var(--ok)}
.mkt .dimx.stale{color:var(--warn)}
@keyframes pxpulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.pxstamp.live::before{animation:none}}

/* ── search: the primary control on a busy page ──────────────────────────── */
.rsearch{flex:1;min-width:0;background:var(--card);color:var(--txt);
  border:2px solid color-mix(in srgb,var(--acc) 46%,transparent);
  border-radius:12px;padding:13px 16px 13px 44px;font:700 15.5px system-ui;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 8%,transparent);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fa8cc' stroke-width='2.4' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>");
  background-repeat:no-repeat;background-position:14px 50%;background-size:18px;
  transition:border-color .16s ease,box-shadow .16s ease}
.rsearch::placeholder{color:var(--dim);font-weight:600}
.rsearch:hover{border-color:color-mix(in srgb,var(--acc) 66%,transparent)}
.rsearch:focus{outline:none;border-color:var(--acc);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--acc) 20%,transparent)}
.rbar{gap:12px;margin-bottom:14px}
.rsort,.rcsv{padding:13px 14px;border-radius:12px}

/* last sale reads differently from a live ask — it is history, not an offer */
.est .fig.sold .k{color:var(--amb)}
.est .fig.sold .v{color:var(--txt)}

/* ── flex card ───────────────────────────────────────────────────────────── */
.cta.flex{background:linear-gradient(135deg,#ffc25e,#f2913c 46%,#d9701f);
  color:#2a1405;border:0;cursor:pointer;font-weight:800;
  box-shadow:0 2px 12px rgba(232,138,55,.28),inset 0 1px 0 rgba(255,240,205,.5)}
.cta.flex:hover{filter:brightness(1.06)}
.flexbox{max-width:880px}
.flexcard-wrap{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0b0f14}
#flexcanvas{display:block;width:100%;height:auto}
.flexlabel{display:block;font:800 10.5px system-ui;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--dim);margin:16px 0 6px}
.flextext{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);
  border-radius:10px;padding:11px 13px;font:600 14px/1.5 system-ui;resize:vertical}
.flextext:focus{outline:none;border-color:var(--acc)}
.flexrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.flexrow .cta{flex:1 1 180px;min-width:0;cursor:pointer}