/* ===========================================================================
   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:#7b8899;          /* 4.6:1 — was #6c7788 (3.6:1), which leaked into small body text and data values (a11y review) */
  --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:grid;grid-template-columns:auto 1fr auto auto;
  grid-template-areas:"brand nav x cta";
  align-items:center;column-gap:20px;padding-top:9px;padding-bottom:9px}
.brand{grid-area:brand}
.top .nav2{grid-area:nav}
.top .xlink{grid-area:x}
.top .askcta{grid-area:cta}

/* ── Phase A1 products-first nav (tools/nav-shared.mjs emits the markup) ──
   CSS-only dropdowns: :hover for pointers, :focus-within for keyboard AND
   touch (group tops are <button>s — tap focuses, links inside navigate). */
.nav2{display:flex;gap:2px;justify-content:flex-end;flex-wrap:wrap}
.ng{position:relative}
.ng>button,.nsolo{background:none;border:0;color:var(--dim);font:600 14px system-ui;
  padding:7px 11px;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-block}
.ng>button i{font-style:normal;font-size:9px;opacity:.6;margin-left:4px}
.ng>button:hover,.ng:focus-within>button,.ng>button.cur,.nsolo:hover,.nsolo.cur{color:var(--txt);background:var(--card-2)}
.ng>button.cur,.nsolo.cur{box-shadow:inset 0 -2px 0 var(--brand)}
.nd{position:absolute;top:100%;left:0;min-width:205px;background:var(--card);
  border:1px solid var(--line);border-radius:11px;padding:7px;display:none;z-index:30;
  box-shadow:0 10px 28px rgba(0,0,0,.5)}
.ng:hover .nd,.ng:focus-within .nd,.ng.open .nd{display:block}
.ng.shut:not(.open):focus-within .nd{display:none}   /* Batch 6: Escape really closes the menu while its button keeps focus (review FP11) */
.ng.open>button{color:var(--txt);background:var(--card-2)}
.ng:nth-last-child(-n+2) .nd{left:auto;right:0}
.nd a{display:block;color:var(--dim);font:500 13.5px system-ui;padding:6px 10px;border-radius:7px;text-decoration:none}
.nd a:hover,.nd a[aria-current=page]{color:var(--txt);background:var(--card-2)}
/* section labels inside dropdowns — visibly NOT links (2026-08-17, operator:
   un-clickable rows read as bugs without this) */
.ndh{display:block;color:var(--amb);opacity:.75;font:700 10px system-ui;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 10px 3px;margin-top:7px;border-top:1px solid var(--line-soft);cursor:default;user-select:none}
.nd>.ndh:first-child{margin-top:0;border-top:0;padding-top:4px}

/* segmented tabs — My Otherside Deeds/Kodas + the alert-page switcher */
.segtabs{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:12px 0 4px}
.segtabs>a,.segtabs>button{background:var(--card);border:0;color:var(--dim);font:600 13.5px system-ui;
  padding:8px 18px;cursor:pointer;text-decoration:none;border-right:1px solid var(--line-soft)}
.segtabs>:last-child{border-right:0}
.segtabs>.on{background:var(--card-2);color:var(--txt);box-shadow:inset 0 -2px 0 var(--amb)}
.segtabs b{color:var(--amb);font-weight:700;margin-left:5px}

/* My Otherside portfolio highlights */
.mdhl{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:12px 0 4px}
.mdhl .k{color:var(--dimmer);font:700 10.5px system-ui;text-transform:uppercase;letter-spacing:.1em}
.mdhl .k em{font-style:normal;font-weight:500;text-transform:none;letter-spacing:0;margin-left:6px}
.mdhl ul{margin:8px 0 12px;padding-left:20px;color:var(--dim);font-size:14px;line-height:1.7}
.mdhl li b,.mdhl li a b{color:var(--txt)}
.mdhlcta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}

/* top-100 resource rank page */
.r100{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.r100 a.rrow{display:grid;grid-template-columns:74px 110px 1fr auto;gap:14px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:11px;padding:11px 16px;text-decoration:none;color:var(--txt)}
.r100 a.rrow:hover{border-color:var(--acc)}
.r100 .rrk{font:800 21px system-ui;color:var(--amb)}
.r100 .rrk em{display:block;font:600 10px system-ui;font-style:normal;color:var(--dimmer);letter-spacing:.08em}
.r100 .rid{font:700 15px system-ui}
.r100 .rid em{display:block;font:500 11.5px system-ui;font-style:normal;color:var(--dim)}
.r100 .rres{color:var(--dim);font-size:13px;line-height:1.5}
.r100 .rtail{text-align:right;font-size:12.5px;color:var(--dim)}
.r100 .rtail b{display:block;font-size:14px;color:var(--txt)}
.r100 a.rrow.top3{border-color:#6a5220;background:linear-gradient(180deg,#1b1710,var(--card))}
@media (max-width:700px){.r100 a.rrow{grid-template-columns:56px 1fr;grid-auto-rows:auto}.r100 .rres{grid-column:1/-1}.r100 .rtail{text-align:left;grid-column:1/-1}}

/* ── Phase A2: homepage hero + universal search (height-conscious) ─────── */
.uhero{text-align:center;padding:20px 0 4px}
.uhero h1{font:800 29px/1.12 system-ui;letter-spacing:-.7px;margin:0 0 5px}
.uhero h1 b{color:var(--amb)}
.uhsub{color:var(--dim);margin:0 auto 13px;max-width:66ch;font-size:14.5px}
.usearch{position:relative;max-width:620px;margin:0 auto}
.usearch input{width:100%;background:var(--card);border:1.5px solid var(--line);color:var(--txt);
  border-radius:12px;padding:12px 18px;font:500 15px system-ui;box-sizing:border-box}
.usearch input:focus{border-color:var(--acc);outline:none}
.usearch input::placeholder{color:var(--dimmer)}
.usdrop{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:6px;z-index:40;text-align:left;
  box-shadow:0 12px 32px rgba(0,0,0,.55);max-height:330px;overflow:auto}
.usrow{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:8px 12px;border-radius:8px;color:var(--txt);text-decoration:none;font:500 14px system-ui}
.usrow em{font-style:normal;color:var(--dimmer);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;flex:none}
.usrow:hover,.usrow.on{background:var(--card-2)}
.uacts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:11px 0 7px}
.uact{background:var(--card);border:1px solid var(--line);color:var(--dim);border-radius:999px;
  padding:7px 15px;font:600 13px system-ui;text-decoration:none;cursor:pointer}
.uact:hover{color:var(--txt);border-color:var(--acc)}
@media (max-width:700px){.uhero h1{font-size:25px}.uacts{gap:6px}.uact{font-size:12px;padding:6px 11px}}

/* numeric polish (Phase 0): data reads in aligned columns everywhere */
table,.tnum,.kbig,.kfloor,.kask,.rcount b,.stat b{font-variant-numeric:tabular-nums}

.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}

/* quiet X/Twitter icon — deliberately ghost-styled so the molten CTA next to
   it stays the page's only filled element */
.xlink{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:999px;border:1px solid #33414f;color:var(--dim);
  transition:color .16s ease,border-color .16s ease,transform .16s ease}
.xlink svg{width:14px;height:14px;fill:currentColor}
.xlink:hover{color:var(--txt);border-color:var(--brand);transform:translateY(-1px)}
.xlink:active{transform:none}
@media (max-width:600px){.xlink{width:30px;height:30px}.xlink svg{width:12px;height:12px}}

/* 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{display:flex;height:auto;padding-top:10px;padding-bottom:10px;flex-wrap:wrap;gap:6px 8px}
  .brandtext em{display:none}
  .brandname{font-size:19px}
  .nav2{order:3;width:100%;justify-content:flex-start;gap:0}
  .ng>button,.nsolo{font-size:13.5px;padding:6px 9px}
  .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}
/* "See the math" — a filled pill so it reads as a control, not a caption
   (the plain accent text vanished against .est's accent-heavy chrome) */
.est summary{cursor:pointer;display:inline-block;font:800 11px system-ui;letter-spacing:.8px;
  text-transform:uppercase;color:#0a1420;background:var(--acc);padding:4px 12px;
  border-radius:999px;margin-top:9px;list-style:none;user-select:none}
.est summary:hover{filter:brightness(1.12)}
.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)}
/* segment market check — receipts panel on thin/grail deed pages */
.grailck{background:var(--card);border:1px solid color-mix(in srgb,var(--amb) 45%,transparent);border-radius:10px;padding:11px 13px;margin:8px 0 0}
.grailck .gk{font:800 10.5px system-ui;letter-spacing:1.5px;text-transform:uppercase;color:var(--amb)}
.grailck .gk em{font:600 10.5px system-ui;letter-spacing:.3px;text-transform:none;color:var(--dimmer);margin-left:8px}
.grailck .gtab{border-collapse:collapse;margin-top:8px;font-size:13px;width:100%}
.grailck .gtab td{padding:3px 14px 3px 0;color:var(--dim);border-bottom:1px solid var(--line)}
.grailck .gtab tr:last-child td{border-bottom:0}
.grailck .gtab a{color:var(--txt)}
.grailck .gtab .tnum{color:var(--txt);font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.grailck .gsum{margin:8px 0 0;font-size:13px;color:var(--dim)}
.grailck .gsum b{color:var(--amb)}
.grailck .gasks{margin:6px 0 0;font-size:13px;color:var(--dim)}
.grailck .gasks a{color:var(--txt)}
.gask.unlisted a,.gask.unlisted b{text-decoration:line-through;opacity:.7}   /* Batch 6b: a segment ask that left the live book */
/* graduated small segment: green accent — the estimate passed its sales test */
.grailck.ok{border-color:color-mix(in srgb,var(--good,#5fbf8a) 45%,transparent)}
.grailck.ok .gk{color:var(--good,#5fbf8a)}
.grailck.ok .gsum b{color:var(--good,#5fbf8a)}
/* market-anchored: accent blue — the prints that set the headline estimate */
.grailck.anc{border-color:color-mix(in srgb,var(--acc) 50%,transparent)}
.grailck.anc .gk{color:var(--acc)}
.grailck.anc .gsum b{color:var(--acc)}
.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 a.howlink{color:var(--acc);text-decoration:none;font-size:11px}
.factors a.howlink:hover{text-decoration:underline}
.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)}
/* the bars grow with the card: when "See the math" or a market-check panel
   stretches the estimate box, the distribution rescales instead of pooling
   dead space above 62px bars. Capped so a very tall grail page doesn't
   produce skyscrapers; min-height preserves the compact look elsewhere. */
.bars{display:flex;gap:8px;align-items:stretch;margin:10px 0 2px;flex:1;min-height:72px;max-height:440px}
.bcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:26px}
.bwrap{width:100%;flex:1;min-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 ---- */
/* on-site alert mechanics (2026-08-15 r2): compact hidden row on deed pages +
   the browse filter-column builder the pill toggles */
.alertbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 4px;
  padding:11px 14px;border:1.5px solid var(--amb);border-radius:12px;background:rgba(255,178,66,.06)}
.alertbar .abc{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.alertbar .abc label{font-size:13px;color:var(--dim);display:flex;align-items:center;gap:6px}
.alertbar input[type=number]{width:84px;background:var(--card);border:1px solid var(--line);
  color:var(--txt);border-radius:8px;padding:7px 8px;font:600 13px system-ui}
.alertbar input[type=url]{width:230px;background:var(--card);border:1px solid var(--line);
  color:var(--txt);border-radius:8px;padding:7px 8px;font:500 12.5px system-ui}
.alertbar .cta.sm,.alertform .cta.sm{background:var(--amb);color:#0a1420;cursor:pointer;border:none}
.abmsg{flex-basis:100%;font-size:13px;color:var(--dim);line-height:1.5}
.abmsg a{color:var(--amb)}.abmsg.err{color:#ff8f8f}
.abhelp{flex-basis:100%;font-size:12.5px;color:var(--dim)}
.abhelp a{color:var(--amb)}
/* deed-alert page: Discord webhook walkthrough (ported from the old Ask form help) */
.dsteps{margin:10px 0 14px;padding-left:22px}
.dsteps li{margin:6px 0}
.dwarn{color:#ff5d5d;font-weight:700}
.dicon{display:flex;align-items:center;gap:12px;background:var(--card-2);border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;margin:10px 0;font-size:13.5px}
.dicon img{border-radius:50%;flex:none}
.dicon ol{margin:6px 0 0;padding-left:18px}
.dicon a{color:var(--amb)}
.dsample{background:#313338;border-radius:8px;padding:10px 14px;display:flex;gap:10px;margin-top:6px;max-width:640px}
.dsample .av{width:36px;height:36px;border-radius:50%;background:#f0a429;color:#0a1420;
  font:700 16px system-ui;display:flex;align-items:center;justify-content:center;flex:none}
.dsample .body{font:13.5px/1.45 system-ui;color:#dbdee1}
.dsample .name{color:#fff;font-weight:600}
.dsample .bot{background:#5865f2;color:#fff;font-size:10px;border-radius:3px;padding:0 4px;margin-left:4px;vertical-align:1px}
.dsample .ts{color:#949ba4;font-size:11px;margin-left:6px}
.dsample a{color:#00a8fc;text-decoration:none}
.alertform.apage{max-width:640px;margin:18px 0 26px;padding:18px 20px}
.alertform.apage .afgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
.alertform.apage .afgrid label{flex-direction:column;align-items:flex-start;gap:5px;font-size:13px}
.alertform.apage .afgrid select,.alertform.apage .afgrid input{max-width:none;width:100%;box-sizing:border-box}
.alertform.apage .afin{display:flex;align-items:center;gap:8px;width:100%}
.alertform.apage .afin input{flex:1}
.alertform.apage label:last-child{grid-column:1/-1}
.alertform.apage .cta.sm{margin-top:12px;padding:10px 22px;font-size:14px}
@media(max-width:560px){.alertform.apage .afgrid{grid-template-columns:1fr}}
.alertform{background:var(--card);border:1.5px solid var(--amb);border-radius:12px;
  padding:12px 13px;margin:0 0 12px;display:flex;flex-direction:column;gap:8px}
.alertform .afr{font-size:12.5px;color:var(--dim);line-height:1.45}
.alertform label{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12.5px;color:var(--dim)}
.alertform select,.alertform input{background:#13202e;border:1px solid var(--line);color:var(--txt);
  border-radius:8px;padding:6px 8px;font:500 12.5px system-ui;max-width:150px}
.alertform input[type=url]{max-width:none;width:100%}
/* resource-rank card (2026-08-15, v6.2 ship r2 — sibling of Plot Size per the mock) */
.rcol{display:flex;flex-direction:column;gap:12px;flex:1 1 208px;min-width:196px}
.rcol .tdist{flex:0 0 auto;min-width:0}
.rrank{background:#13202e;border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.rrank .k{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--dimmer);font-weight:600}
.rrank .rring{float:right;font-size:10.5px;color:var(--amb);font-weight:700;text-transform:none;letter-spacing:.02em}
.rrank .rnum{font-size:22px;font-weight:800;margin-top:3px}
.rrank .rnum .of{font-size:12.5px;color:var(--dim);font-weight:500}
.rtrack{position:relative;height:8px;background:#22384a;border-radius:4px;margin:10px 0 4px}
.rband{position:absolute;top:0;bottom:0;background:#3F7FA5;border-radius:4px}
.rdot{position:absolute;top:-3px;width:3px;height:14px;background:#9FDCF5;border-radius:2px}
.rticks{display:flex;justify-content:space-between;font-size:10px;color:var(--dimmer)}
.rbase{font-size:11.5px;color:var(--amb);margin-top:7px}
.rdet{margin-top:8px}.rdet summary{cursor:pointer;font-size:12px;color:var(--amb)}
.rmeta{font-size:12px;color:var(--dim);line-height:1.5;margin:8px 0 4px}
.rdet table{font-size:12.5px}.rdet .note{font-size:12px;line-height:1.55}
/* Free Deed Alert pill at the top of the browse filter panel (2026-08-15) */
.alertpill{display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;
  width:100%;box-sizing:border-box;margin:0 0 12px;
  background:linear-gradient(135deg,#ffc25e 0%,#f2913c 46%,#d9701f 100%);
  color:#2a1405;font:800 13.5px system-ui;letter-spacing:.1px;
  padding:9px 15px;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,filter .16s ease}
.alertpill i{font-style:normal;font-size:12px;opacity:.72}
.alertpill:hover{transform:translateY(-1px);filter:brightness(1.06)}
/* Weekly Market Update banner under the homepage hero (2026-08-31) */
.wkbanner{display:flex;align-items:center;gap:9px;margin:14px 0 2px;padding:10px 16px;border-radius:999px;
  background:linear-gradient(135deg,#7ff0dc 0%,#2dd4bf 46%,#0e9488 100%);
  color:#03201c;font:700 13.5px system-ui;text-decoration:none;
  box-shadow:0 2px 12px rgba(45,212,191,.28),inset 0 1px 0 rgba(224,255,249,.55);
  transition:transform .16s ease,filter .16s ease}
.wkbanner b{font-weight:900;white-space:nowrap}
.wkbanner span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wkbanner em{font-style:normal;font-size:12px;opacity:.6;white-space:nowrap}
.wkbanner i{font-style:normal;font-size:12px;opacity:.72}
.wkbanner:hover{transform:translateY(-1px);filter:brightness(1.05)}
.wkbanner .wkshort{display:none}
@media (max-width:560px){
  .wkbanner{gap:7px;padding:9px 13px;font-size:13px}
  .wkbanner .wkfull{display:none}.wkbanner .wkshort{display:inline}
  .wkbanner em{display:none}
}
.ctabar{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 8px}
/* five actions since OSWiki (2026-08-15): tighter buttons so the row fits one line */
.ctabar .cta{flex:1 1 auto;min-width:0;white-space:nowrap;font-size:13px;padding:10px 14px;border-radius:12px}
.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;aspect-ratio:3/4;object-fit:cover;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:4px}
/* 24px hit target with a small visual dot — 9×9 buttons at 16px pitch were
   unhittable on touch (a11y review) */
.vdot{width:24px;height:24px;border-radius:50%;border:0;padding:0;cursor:pointer;background:transparent;position:relative}
.vdot::after{content:'';position:absolute;inset:7px;border-radius:50%;background:var(--track)}
.vdot.on::after{background:var(--acc)}
.vdot:hover::after{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)}
/* always rendered; merely dimmed when everything is at its default */
.freset:disabled{opacity:.45;cursor:default}
.freset:disabled:hover{color:var(--dim);border-color:var(--line)}

.fgroup{border-top:1px solid var(--line-soft);padding:12px 0 4px}
.fgroup:first-of-type{border-top:0}
.fgbtn{all:unset;cursor:pointer;font:inherit;color:inherit;flex:1}
.fgbtn:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
.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}
/* min-count sliders (rare resources / tier-3 deposits) — four slots is the
   hard cap, so the readout runs any → 1+ → 2+ → 3+ → 4, never a fake "4+" */
.fslide{display:flex;align-items:center;gap:10px;margin:2px 2px 8px}
.fslide input[type=range]{flex:1;min-width:0;margin:0;accent-color:var(--acc);cursor:pointer}
.fslide output{font:700 11.5px system-ui;color:var(--acc);min-width:30px;text-align:right}
/* plot size T1–T5: five equal cells so the row can never wrap 4-and-1; the
   native box is visually hidden — the filled pill is the checked state */
.chips.tierrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.chips.tierrow .ftog{position:relative;justify-content:center;padding:4px 2px}
.chips.tierrow .ftog input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.chips.tierrow .ftog:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:2px}
.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;flex-wrap:wrap;gap:10px;margin-bottom:10px}   /* no-wrap forced 662px min-width — pushed the filter rail off every phone */
.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}

.tofilters{display:none}
@media (max-width:900px){
  .browse{grid-template-columns:minmax(0,1fr)}   /* plain 1fr lets a child's min-content width blow out the page */
  /* results first on phones (2026-09-03, site review finding 4): the filter
     panel was 1,500px of controls before the first card. The panel now follows
     the results and its groups start collapsed (browse.js); the "Filters ↓"
     link in the results bar jumps to it. */
  .results{order:1}
  .filters{order:2;position:static;max-height:none}
  .tofilters{display:inline-block;font-size:13px;color:var(--acc);text-decoration:none;white-space:nowrap;align-self:center}
  .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}

/* ---- deed map (pill + modal) --------------------------------------------
   The pill takes its color from the sediment card's --sed variable, so it
   always matches the deed's own ring. The modal reuses the lightbox shell;
   the marker is positioned by build-time percentages over one shared map. */
.mappill{display:inline-flex;align-items:center;gap:5px;margin-top:10px;cursor:pointer;
  background:color-mix(in srgb,var(--sed,#33414f) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--sed,#7fa8cc) 65%,transparent);
  color:color-mix(in srgb,var(--sed,#cfe0f0) 75%,#fff);
  font:800 11.5px system-ui;letter-spacing:.6px;text-transform:uppercase;
  padding:4px 12px;border-radius:999px}
.mappill:hover{background:color-mix(in srgb,var(--sed,#33414f) 34%,transparent)}
.maptools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px}
.maptools .mappill{margin-top:0}
.proximitypill{position:relative;display:inline-flex;align-items:baseline;gap:5px;
  border:1px solid #405063;border-radius:999px;padding:4px 10px;
  background:#15202d;color:#cdd7e4;font:600 11.5px system-ui;cursor:help}
.proximitypill b{color:#f2f6fb;font-weight:800;font-variant-numeric:tabular-nums}
.proximityof{color:#9eafc2;font-size:10px}
.proximitypill:focus-visible{outline:2px solid var(--acc,#81d4fa);outline-offset:3px}
.proximityhelp{position:absolute;z-index:5;left:0;bottom:calc(100% + 9px);
  width:220px;max-width:calc(100vw - 72px);padding:9px 11px;border:1px solid #405063;
  border-radius:8px;background:#101923;color:#e3ebf5;font:500 12px/1.5 system-ui;
  text-align:left;visibility:hidden;opacity:0;pointer-events:none;
  box-shadow:0 8px 24px #0008}
.proximitypill:hover .proximityhelp,.proximitypill:focus .proximityhelp{visibility:visible;opacity:1}
.mapwrap{position:relative;display:inline-block}
.mapviewport{position:relative;width:min(92vw,82vh,760px);aspect-ratio:1;overflow:hidden;
  border-radius:14px;background:#0a0f17;box-shadow:0 30px 90px rgba(0,0,0,.7);
  touch-action:none;cursor:grab}
.mapviewport:active{cursor:grabbing}
.mapcanvas{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.mapcv{position:absolute;inset:0;width:100%;height:100%}
.mapcanvas img{display:block;width:100%;height:100%;user-select:none;pointer-events:none}
.mapmark{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:#ffd977;box-shadow:0 0 0 3px #0b1018,0 0 0 5px #fff,0 0 18px 4px rgba(255,217,119,.65);
  animation:mapPulse 1.6s ease-out infinite;
  transform:scale(var(--invs,1));transform-origin:center}
@keyframes mapPulse{0%{box-shadow:0 0 0 3px #0b1018,0 0 0 5px #fff,0 0 0 6px rgba(255,217,119,.55)}
  70%{box-shadow:0 0 0 3px #0b1018,0 0 0 5px #fff,0 0 0 22px rgba(255,217,119,0)}
  100%{box-shadow:0 0 0 3px #0b1018,0 0 0 5px #fff,0 0 0 22px rgba(255,217,119,0)}}
@media (prefers-reduced-motion:reduce){.mapmark{animation:none}}
.mapcap{position:absolute;left:14px;bottom:12px;z-index:2;background:rgba(8,13,20,.82);
  border:1px solid color-mix(in srgb,var(--sed,#33414f) 55%,transparent);
  border-radius:999px;padding:6px 14px;font:600 13px system-ui;color:var(--txt);pointer-events:none}
.mapcap b{color:color-mix(in srgb,var(--sed,#cfe0f0) 80%,#fff)}
.mapzoom{position:absolute;right:14px;top:12px;z-index:2;display:flex;gap:6px}
.mapzoom button{background:rgba(8,13,20,.82);border:1px solid var(--line);color:var(--txt);
  font:800 14px system-ui;min-width:34px;padding:6px 10px;border-radius:10px;cursor:pointer}
.mapzoom button:hover{border-color:color-mix(in srgb,var(--sed,#7fa8cc) 70%,transparent)}
/* ---- sales page ---------------------------------------------------------- */
.sbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:14px 0 16px}
.sbar .rsearch.sq{flex:0 1 130px;padding:6px 11px 6px 34px;font-size:13px;background-position:11px 50%;background-size:15px}
#salelist{display:flex;flex-direction:column;gap:8px}
.salerow{display:grid;grid-template-columns:56px minmax(0,1fr) 86px 110px 110px 84px 92px;
  align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:8px 14px 8px 8px;text-decoration:none;color:var(--txt)}
.salerow:hover{border-color:var(--acc)}
.salerow.hid{display:none}
.salerow.fresh{border-color:color-mix(in srgb,var(--ok,#5fbf8f) 55%,transparent)}
.salerow img,.salerow .sph{width:56px;height:56px;border-radius:9px;background:var(--card-2);display:block;object-fit:cover}
.sinfo{min-width:0}
.sinfo b{display:block;font-size:14.5px}
.sinfo em{display:block;font-style:normal;color:var(--dim);font-size:12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stype{font:800 10.5px system-ui;letter-spacing:.5px;text-transform:uppercase;text-align:center;
  padding:3px 0;border-radius:999px;background:#12281e;color:#5fbf8f;border:1px solid #2a4f3c}
.stype.weth{background:#241a33;color:#b9a3e8;border-color:#463366}
.snum{text-align:right}
.snum i{display:block;font-style:normal;color:var(--dimmer);font-size:10.5px;text-transform:uppercase;letter-spacing:.6px}
.snum b{font-size:14.5px;font-variant-numeric:tabular-nums}
.snum.sest b{color:var(--acc)}
.salerow .vgap{justify-self:end}
/* the gap badge carries its own label (08-13) — a green pill showing a negative
   number read as a contradiction; "GAP" above it names the measure, and the
   label also means the sign is no longer communicated by colour alone */
.snum.sgap .vgap{display:inline-block;margin-top:2px}
.swhen{color:var(--dim);font-size:12px;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:720px){
  .salerow{grid-template-columns:44px minmax(0,1fr) auto auto;grid-auto-rows:auto;row-gap:2px}
  .salerow img,.salerow .sph{width:44px;height:44px}
  .stype,.swhen{display:none}
  .snum i{font-size:9.5px}
}
/* sort control on trait-page example grids (reuses the .rsort look) */
.gsortbar{display:flex;justify-content:flex-end;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.gridpills{margin-right:auto;display:flex;gap:8px}
/* my-deeds: summary tiles double as click-to-filter controls */
.stat.filt{cursor:pointer;transition:border-color .14s ease}
.stat.filt:hover{border-color:var(--acc)}
.stat.filt.on{border-color:var(--acc);background:#13202e}
.stat.filt.on .k{color:var(--acc)}
.mdhead{display:flex;align-items:center;gap:12px}
.mdhead h2{margin:0}
.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)}
/* artifact pill, colored by class (ac0..ac3 = common/medium/rare/ultra) —
   gold intentionally matches the site's gold=rare convention; ultra glows */
.cp.ac0{background:#8f9cb0;color:#101821}
.cp.ac1{background:#63c6ad;color:#062019}
.cp.ac2{background:linear-gradient(180deg,#ffdd80,#e8ab30);color:#2a1f04}
.cp.ac3{background:linear-gradient(180deg,#cfc0ff,#9c86e8);color:#1b1038;box-shadow:0 0 10px rgba(165,140,255,.45)}
/* matching class-colored text labels (artifact index + pages, deed pages) —
   completes the set beside the existing goldk (rare) and ultrak (ultra).
   The .stat .k variants are needed to outrank the stat card's dim label. */
.commonk, .stat .k.commonk, h3 .commonk{color:#a9b6c6}
.mediumk, .stat .k.mediumk, h3 .mediumk{color:#7fdcc3}

/* ---- 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}

.emptystate{grid-column:1/-1;text-align:center;padding:42px 18px;border:1px dashed var(--line);border-radius:var(--r-lg)}
.emptystate b{font-size:16px}
.emptystate .note{margin:8px 0 16px}
/* ---- 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%;min-width:0}
.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}
/* small screens: tables scroll inside their card instead of clipping columns */
@media (max-width:640px){
  .cmptab,.comps{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* touch devices have no hover: the compare toggle must simply be visible —
   invisible-but-tappable was silently adding deeds to compare on mistaps */
@media (hover:none){.cpick{opacity:1}}
.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'/bayc/><path d='M20 20l-3.5-3.5'/bayc/></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}

/* the disclosure toggle was picking up a persistent focus ring after a click */
.est summary:focus{outline:none}
.est summary:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:999px}

/* ---- My Deeds (mydeeds.js) ---------------------------------------------- */
.famchips{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.famchip{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--txt);text-decoration:none;
  font:600 13px system-ui;text-transform:capitalize}
.famchip i{width:9px;height:9px;border-radius:50%;background:var(--fam);flex:none}
.famchip b{color:var(--fam-ink)}
.famchip:hover{border-color:var(--fam)}

/* ---- inline estimate panel (ask.js) ------------------------------------- */
.askpanel{border-color:var(--acc)}
.askpanel h2{font-size:22px}
.asklbl{display:block;font:800 10.5px system-ui;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--dim);margin:16px 0 6px}
.asklbl em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:600}
.asknote{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);
  border-radius:10px;padding:10px 12px;font:500 14px/1.5 system-ui;resize:vertical;box-sizing:border-box}
.asknote:focus{outline:none;border-color:var(--acc)}
.askrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px}
.askrow .cta{flex:0 1 auto;min-width:180px}
.askerr{color:var(--bad,#e07a6b);font:600 13.5px system-ui}
.asksender{flex:1;min-width:240px;background:var(--bg);border:1px solid var(--line);color:var(--txt);
  border-radius:10px;padding:11px 12px;font:600 14px ui-monospace,Consolas,monospace;box-sizing:border-box}
.asksender:focus{outline:none;border-color:var(--acc)}
.paycard{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-top:12px}
.payline{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding:6px 0}
.payline .k{font:800 10.5px system-ui;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);min-width:104px}
.payline b{font-size:16px}
.payline em{font-style:normal;color:var(--dim);font-size:12.5px}
.payaddr{font:600 13px ui-monospace,Consolas,monospace;color:var(--txt);word-break:break-all;
  background:var(--card);border:1px solid var(--line);border-radius:8px;padding:4px 8px}
.payaddr.dim{color:var(--dim)}
.cta.sm{flex:0 0 auto;min-width:0;padding:6px 14px;font-size:13px;border-radius:9px}
.askspin{width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--acc);
  border-radius:50%;display:inline-block;vertical-align:-2px;margin-right:8px;animation:askspin 0.9s linear infinite}
@keyframes askspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.askspin{animation:none}}

/* ---- sold/delisted marking on ranked surfaces (prices.js) --------------- */
.vcard.gone{opacity:.45;filter:saturate(.4)}
.vcard.gone .vrow b{text-decoration:line-through;text-decoration-color:var(--dim)}
tr.gone{opacity:.45}
tr.gone .tnum{text-decoration:line-through;text-decoration-color:var(--dim)}
.vgap.n,.gap.n{color:var(--dim)}

/* ---- estimate progress bar (ask.js) ------------------------------------- */
.askprog{height:8px;background:var(--track,#1c2635);border-radius:999px;overflow:hidden;margin-top:12px}
.askprog i{display:block;height:100%;background:var(--acc);border-radius:999px;transition:width .8s ease}
.askpct{color:var(--dim);font:600 12px system-ui;margin-top:6px}

/* rare class labels in gold; ultra class in violet glow — the tier above.
   Same grammar as the deed cards: color signals class, layout never moves. */
.stat .k.goldk, h3 .goldk{color:var(--amb)}
.stat .k.ultrak, h3 .ultrak{color:#b9a8ff;text-shadow:0 0 12px rgba(165,140,255,.45)}
/* family labels take their family's ink (each pre-validated ≥4.6:1 on card) */
.stat .k.famk{color:var(--fam-ink)}

.tvsub{display:block;font:600 12.5px system-ui;letter-spacing:.2px;color:var(--dim);font-style:normal;margin-top:2px}
@media (min-width:760px){.tvsub{display:inline;margin-left:10px}}

/* ---- accessibility chrome (batch 4) ------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--acc);color:#0a1420;
  padding:10px 18px;border-radius:0 0 10px 0;font:700 14px system-ui;text-decoration:none}
.skip:focus{left:0}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.eyebrow{font-size:14px;letter-spacing:1.4px;text-transform:uppercase;color:var(--dim);margin:0 0 12px;font-weight:700}
/* touch devices: bigger targets without changing the desktop look */
@media (pointer:coarse){
  .chip{padding:9px 14px}
  .nav a{padding:10px 2px}
  .cpick{width:30px;height:30px}
}

/* ---- print ---------------------------------------------------------------
   A deed page is exactly what someone saves as a PDF. Light background,
   chrome hidden; prices.js opens collapsed <details> for the print pass. */
@media print{
  :root{--bg:#fff;--card:#fff;--card-2:#f4f6f8;--txt:#111;--dim:#444;--dimmer:#666;--line:#bbb}
  body{background:#fff;color:#111}
  .top,.askcta,.skip,.cta,#askbtn,.askpanel,.pxstamp,.lb,#lb,.vdots,.howlink{display:none !important}
  .hero{background:#eef2f6 !important}
  .hero,.sec,.stat,.grailck,.tdist{box-shadow:none;border-color:#ccc}
  .est,.est .fig,.tdist,.thinwarn,.grailck{background:#fff !important;color:#111 !important;border-color:#bbb !important}
  .est .k,.est .v,.est .rng,.tdist .k,.tdist .k b,.bt,.bn,.tsub,.thinwarn,.grailck .gk,.grailck .gsum{color:#222 !important}
  .est summary{background:none !important;color:#111 !important;padding:0}
  .thinwarn b,.grailck .gsum b{color:#111 !important}
  .bwrap i{background:#8892a0 !important;opacity:1}
  .bcol.on .bwrap i{background:#334 !important}
  a{color:#0b3d66;text-decoration:none}
  .disc{border-color:#ccc}
  main{max-width:100%}
}

/* owned-by chip — top right of the deed header; hydrated by prices.js from
   /api/owner (live ownerOf + verified reverse ENS). Hidden until data lands. */
.meta{position:relative}
.ownerbox{position:absolute;top:0;right:0;z-index:2}
.ownerbox a{display:inline-flex;gap:6px;align-items:center;border:1px solid #33414f;border-radius:999px;
  padding:4px 13px;font:600 12.5px system-ui;color:var(--dim);text-decoration:none;background:rgba(16,23,37,.55);
  transition:color .15s ease,border-color .15s ease}
.ownerbox a b{color:var(--txt);font-weight:700}
.ownerbox a:hover{border-color:var(--brand);color:var(--txt)}
@media (max-width:700px){.ownerbox{position:static;display:block;margin:0 0 8px}}

/* ── report archive (2026-08-12) — archived Ask Mr. Deeds Q&As ─────────────
   The answer body ships pre-rendered from the oracle (same renderer the
   customer saw), so these styles mirror the oracle's ANSWER_CSS. */
.report .archban{border:1px solid #7a5c1e;border-left:4px solid #e8b04b;background:#241c08;
  color:#ffd97a;border-radius:10px;padding:12px 16px;margin:14px 0 18px;font-size:14px;line-height:1.6}
.report .archban a{color:#e8b04b}
.report .qq{display:block;font-style:italic;font-weight:700;font-size:15px;line-height:1.5;color:#eaf0fa;
  background:#1d2634;border-left:4px solid #d4b273;border-radius:8px;padding:8px 12px;margin-bottom:14px}
.report .qq .qlabel{font-style:normal;font-weight:800;color:#d4b273;margin-right:8px;font-size:11.5px;letter-spacing:1px}
.report .answer{white-space:pre-wrap;font-size:14.5px;line-height:1.6;background:#151c26;
  border:1px solid #25303f;border-radius:12px;padding:18px;max-width:80ch}
.report .answer a{color:#7fa8cc}
.report .answer .h{display:block;font-size:19.5px;font-weight:800;color:#d4b273;letter-spacing:.3px;
  margin:22px 0 6px;padding-bottom:5px;border-bottom:1px solid #25303f}
.report .answer .h:first-child{margin-top:2px}
.report .vgood{color:#59d69a;font-weight:800}
.report .vmid{color:#e8b04b;font-weight:800}
.report .vbad{color:#e06c75;font-weight:800}
.report .vline{display:block;margin:10px 0 2px}
.report .vtag{display:inline-block;font-weight:800;letter-spacing:.8px;padding:2px 12px;border:2px solid;border-radius:8px;margin-right:8px;text-indent:0}
.report .vline .vwhy{font-weight:600}
.report .fvline{display:block;margin:12px 0;padding:9px 14px;border:1px solid #3a5f80;border-left:4px solid #7fa8cc;background:#13202e;border-radius:10px}
.report .fvtag{display:inline-block;font:800 11.5px system-ui;letter-spacing:1.2px;color:#7fa8cc;margin-right:10px;vertical-align:2px}
.report .fvnum{font-size:20px;font-weight:800;color:#7fa8cc}
.report .fvline.fvfloor{border-color:#7a5c1e;border-left-color:#e8b04b;background:#241c08}
.report .fvfloor .fvtag,.report .fvfloor .fvnum{color:#e8b04b}
.report .answer .li{display:block;margin:5px 0;padding-left:16px;text-indent:-16px;line-height:1.75}
.report .answer table.mdt{border-collapse:collapse;margin:10px 0 14px;font-size:14px;line-height:1.45}
.report .answer .mdt th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;
  color:#8f9cb0;font-weight:700;padding:7px 22px 7px 0;border-bottom:2px solid #2e3950}
.report .answer .mdt td{padding:7px 22px 7px 0;border-bottom:1px solid #25303f;vertical-align:top}
.report .answer .mdt tr:last-child td{border-bottom:0}
.report .answer hr{border:0;border-top:1px solid #25303f;margin:4px 0}
.report .pill{display:inline-block;padding:3px 13px;border-radius:999px;font-size:14px;font-weight:600;text-decoration:none;margin:3px 6px 3px 0;border:1px solid;line-height:1.5;text-indent:0}
.report .pill.os{color:#6ab7ff;border-color:#2b5c8a;background:#0d1a28}
.report .pill.os:hover{background:#122539}
.report .pill.wiki{color:#7fa8cc;border-color:#2e4a63;background:#101b28}
.report .pill.wiki:hover{background:#122b21}
.report .deedimg{display:block;width:100%;max-width:300px;height:auto;margin:0 0 18px;
  border-radius:10px;border:1px solid #25303f;background:#0e1319}
.report .deedimg.pick{max-width:190px;margin:8px 0 4px}
.replist{list-style:none;margin:18px 0 0;padding:0}
.repitem{background:#151c26;border:1px solid #25303f;border-radius:12px;padding:14px 18px;margin-bottom:12px}
.repitem a{text-decoration:none;color:var(--txt);font-size:16px}
.repitem a:hover b{color:#d4b273}
.repitem .note{display:block;margin-top:4px}
.repitem .repq{font-style:italic;color:#aab6c8}
/* promoted report headings (2026-08-12): h2/h3 replace the renderer's .h spans
   at bake time — same look, real semantics for crawlers */
.report .answer h2,.report .answer h3{display:block;font-weight:800;color:#d4b273;letter-spacing:.3px;
  margin:22px 0 6px;padding-bottom:5px;border-bottom:1px solid #25303f;font-family:inherit}
.report .answer h2{font-size:19.5px}
.report .answer h3{font-size:16.5px;border-bottom-style:dashed}
.report .answer h2:first-child,.report .answer h3:first-child{margin-top:2px}
/* AI-powered analysis footer on archived reports (2026-08-12) — a feature
   statement, not an apology: transparency + EU AI Act future-proofing */
.report .aidisc{margin-top:18px;border:1px solid #2e4a63;border-left:4px solid #7fa8cc;
  background:#101b28;border-radius:10px;padding:11px 15px;font-size:13.5px;line-height:1.6;color:#aab6c8}
.report .aidisc b{color:#7fa8cc}

/* ── /koda/ census section (Stage 1, 2026-08-16 — census only, no prices) ── */
.khead{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start;margin:14px 0 18px}
.khead img{border-radius:14px;border:1px solid var(--line);background:var(--card);flex:none;max-width:100%;height:auto}
.khead h1{margin:0 0 8px}
.kbadges{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.kbadge{font-size:12px;font-weight:700;letter-spacing:.04em;border-radius:999px;padding:4px 11px;border:1px solid var(--line);color:var(--dim)}
.kbadge.mega{background:linear-gradient(180deg,#ffe9b4,#eda038);color:#0a1420;border:none}
.kbadge.pend{color:var(--amb);border-color:var(--amb)}
.kbadge.lock{color:#8fb8ff;border-color:#3a5a8a}
.kbadge.trip{color:#7ee0a3;border-color:#2e6a45}
.ksup,.kmt{font-size:14px;color:var(--dim);margin:6px 0;max-width:64ch}
.ksup a,.kmt b{color:var(--txt)}
.kmt.dim2,.kcard.dim2 .kv{color:var(--dimmer)}
.kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:16px 0}
.kcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.kcard.mg{border-color:var(--amb)}
.kcard .kk{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dimmer);margin-bottom:4px}
.kcard .kv{font-size:16.5px;font-weight:700}
.kcard .kv.none{color:var(--dimmer);font-weight:400}
.kcard .kn{font-size:12.5px;color:var(--dim);margin-top:4px;line-height:1.45}
.kmega{display:inline-block;background:#2a2113;color:var(--amb);border:1px solid #6a5220;border-radius:6px;padding:1px 7px;font-size:11px;font-weight:700;margin-top:3px}
.kstats{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:6px 0 14px}
.kstats .kk{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dimmer)}
.kstats .kk em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:400;color:var(--dim);margin-left:6px}
.kstatrow{display:flex;gap:16px;flex-wrap:wrap;margin:8px 0}
.kstatrow span{font-size:13px;color:var(--dim)}
.kstatrow b{color:var(--txt);margin-left:4px}
.kstrip{display:flex;gap:20px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:14px 0;font-size:13.5px;color:var(--dim)}
.kstrip b{color:var(--txt)}
.kstrip em{font-style:normal;color:var(--dimmer)}
.kfilters{margin:16px 0 10px}
.kchips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.kchips button{background:var(--card);border:1px solid var(--line);color:var(--dim);border-radius:999px;padding:6px 13px;font-size:13px;cursor:pointer}
.kchips button.on{background:#2b4a75;border-color:#4a79b8;color:#dfeaff}
.krow2{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.krow2 select,.krow2 input{background:var(--card);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:7px 10px;font-size:13.5px}
.krow2 input{min-width:260px}
.kcells{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:16px 0}
.kcell{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px;text-decoration:none;color:var(--txt)}
.kcell:hover{border-color:var(--amb)}
.kcell img{width:100%;height:auto;border-radius:8px;display:block}
.kcell .kid{display:block;font-weight:700;margin:7px 2px 2px}
.kcell .ktags{display:flex;gap:5px;flex-wrap:wrap;margin:2px}
.kcell .ktags i{font-style:normal;font-size:10.5px;border-radius:5px;padding:1px 6px}
.kcell .tmega{background:linear-gradient(180deg,#ffe9b4,#eda038);color:#0a1420;font-weight:700}
.kcell .tmt{background:#1d3a28;color:#7ee0a3}
.kcell .tpend{background:#2a2113;color:var(--amb)}
.kcell .tlock{background:#16283f;color:#8fb8ff}
@media(max-width:560px){.khead img{width:100%;max-width:360px}}

/* koda stage 1.5: deed-style layout — market column left, identity right */
.khero{display:flex;gap:20px;align-items:flex-start;margin:14px 0 6px}
.kleft{flex:0 1 340px;min-width:270px;display:flex;flex-direction:column;gap:12px}
.kright{flex:1 1 480px;min-width:0}
.kmkt{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.kmkt .kk{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dimmer)}
.kmkt .kk em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:400;color:var(--dim);margin-left:6px}
.kmkt .kbig{font-size:26px;font-weight:800;margin:4px 0 2px}
.kmkt .kbig em{font-style:normal;font-size:14px;font-weight:600;color:var(--dim)}
.kmkt .kbig.none{color:var(--dimmer);font-weight:500;font-size:20px}
.kmkt .gtab{margin:6px 0 2px}
.kmkt .kn{font-size:12.5px;color:var(--dim);margin-top:4px;line-height:1.45}
.klinks{display:flex;flex-direction:column;gap:8px}
.klinks .cta.g{text-align:center}
.kcard .kv a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--dimmer)}
.kcard .kv a:hover{color:var(--amb);border-bottom-color:var(--amb)}
.kgrid.ksm{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));margin:10px 0 4px}
.kcard.sm{padding:9px 12px}
.kcard.sm .kv{font-size:19px}
.kactive{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.kvchip{background:#2a2113;border:1px solid #6a5220;color:var(--amb);border-radius:999px;padding:5px 12px;font-size:12.5px;cursor:pointer}
.kvchip b{color:var(--txt)}
.kcell .kask{font-style:normal;font-weight:600;font-size:11.5px;color:var(--amb);margin-left:6px}
@media(max-width:760px){.khero{flex-direction:column-reverse}.kleft{flex:1 1 auto;width:100%}}

/* koda batch 3: trait-value pages + hubs */
.kcatsub{font-size:15px;font-weight:400;color:var(--dim)}
#khubf{margin:10px 0 14px}
/* batch 11: census neighbors + compare + compound facts */
.tsim{background:#13262a;color:#7fd8c8;border:1px solid #1e4a44;border-radius:5px;padding:0 5px;font-size:10px;font-weight:700}
.ksim{margin-top:26px}
/* (batch 13: ksim cells use the site-standard .kcells sizing — a 140px override made them look off) */
.kfacts{margin-top:26px}
.kfacts .khub{max-width:720px}
.kfacts td.tnum{white-space:nowrap;padding-right:14px}
.cmpin{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0 18px}
.cmpin label{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:13px}
.cmpin input{width:110px;background:var(--card-2);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:7px 10px;font-size:14px}
.cmp{border-collapse:collapse;min-width:520px}
.cmp th{text-align:left;color:var(--dim);font-weight:600;font-size:12.5px;padding:7px 14px 7px 0;border-bottom:1px solid var(--line);vertical-align:top;max-width:200px}
.cmp td{padding:7px 12px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:top}
.cmp td.cimg{padding:0 12px 8px 0}
.cmp td.cimg img{border-radius:12px;display:block}
.cmp td.cshare{background:rgba(90,200,170,.08);box-shadow:inset 0 0 0 1px #1e4a44;border-radius:4px}
@media (max-width:700px){.cmp td.cimg img{width:120px;height:120px}}
.khub{max-width:560px}
.khub td:first-child{padding-right:24px}
.khub .kmega{font-size:10px;padding:0 6px;margin-left:6px}

/* two-row header (2026-08-17): row 2 is the KODA section strip, site-wide */
/* .kodarow retired in Phase A1 — the koda links live in the Kodas dropdown (nav-shared.mjs) */

/* rank card: percentile + robustness label (2026-08-17) */
.rpct{font-size:12.5px;font-weight:400;color:var(--dim)}
.rbase .rrob{font-weight:700}
.rrob.vr{color:#7ee0a3}.rrob.rb{color:var(--txt)}.rrob.ms{color:#e8c268}.rrob.as{color:#ff9d7a}
.m99{line-height:2.1}
.m99 a{background:var(--card);border:1px solid var(--line);border-radius:7px;padding:3px 8px;margin:0 2px;text-decoration:none;color:var(--txt);font-size:13px;white-space:nowrap}
.m99 a:hover{border-color:var(--amb)}


/* koda market page (batch 7) */
.ksalest{font-size:13.5px;border-collapse:collapse;min-width:640px}
.ksalest th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dimmer);padding:6px 14px 6px 0;border-bottom:1px solid var(--line)}
.ksalest td{padding:7px 14px 7px 0;border-bottom:1px solid var(--line-soft);color:var(--dim)}
.ksalest td:first-child{color:var(--txt)}
.ksalest .tnum{font-variant-numeric:tabular-nums}
.ksfeed .kcell.kweth{opacity:.62}
.ksfeed .tweth{background:#3a2a3f;color:#d9a7e8}
.ksfeed .tday{background:none;color:var(--dimmer)}

/* ---- koda model estimate (Session B, 2026-08-23) ------------------------ */
.kest{border-color:color-mix(in srgb,var(--amb,#eda038) 35%,var(--line))}
.kgap.neg{color:var(--ok)} .kgap.pos{color:var(--bad)}
.kgapline b:first-child{font-variant-numeric:tabular-nums}
.kesthow{margin-top:8px}
.kesthow summary{cursor:pointer;font-size:12px;color:var(--dim)}
.kesthow[open] summary{color:var(--amb,#eda038)}
.kcell .tgap.neg{background:#12281c;color:var(--ok)}
.kcell .tgap.pos{background:#2a1713;color:var(--bad)}

/* ---- browse sidebar overflow fix (2026-08-23): the search input's intrinsic
   width forced a horizontal scrollbar on the Search & sort group ---- */
.filters{overflow-x:hidden}
.filters input,.filters select{max-width:100%;min-width:0;box-sizing:border-box}
.filters .rsearch,.filters .rsort{width:100%}
.rsort.then{font-size:12.5px;color:var(--dim)}
.thenhint{flex-basis:100%;font-size:12px;color:var(--dim);margin-top:-2px} /* secondary "then by" sort (2026-08-31) */
.filters .frange input{width:100%}

/* ---- estimate new-feature disclosure + results bar (2026-08-23) ---- */
.kestnew{background:color-mix(in srgb,var(--amb,#eda038) 9%,transparent);border:1px solid color-mix(in srgb,var(--amb,#eda038) 35%,transparent);border-radius:10px;padding:8px 12px;font-size:13px;color:var(--dim);margin:0 0 12px}
.kestnew b{color:var(--amb,#eda038)}
.kest .knew{color:var(--amb,#eda038);opacity:.85;font-size:12px}
.rbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.rbar .rcount{margin:0}
.rsortlab{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dim)}
.rsortlab .rsort{width:auto;min-width:180px}

/* ---- koda landing: compact trait-intersection chips (2026-08-24) ---- */
.kfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin:8px 0 4px}
.kfchip{display:flex;gap:10px;align-items:baseline;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:12.5px;line-height:1.35;color:var(--dim);text-decoration:none}
.kfchip b{font-size:16px;font-variant-numeric:tabular-nums}
.kfchip:hover{border-color:var(--amb,#eda038)}
.kfacts h2{margin-top:22px}

/* ---- koda page: deed-parity hero (2026-08-24) ---- */
.khero2{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:26px;align-items:start;margin-bottom:22px}
.kimgcol img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.kinfocol h1{margin:2px 0 8px}
.keyebrow{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer);margin:0}
.kest2{margin-top:14px}
.k2cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.k2cols.one{grid-template-columns:1fr}
.k2col .kbig{margin:4px 0 2px}
.kpills{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.kpill{min-width:0}
.kpill summary{cursor:pointer;display:inline-block;border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);list-style:none}
.kpill summary::-webkit-details-marker{display:none}
.kpill summary::after{content:" ▾";font-weight:400}
.kpill[open] summary{color:var(--amb,#eda038);border-color:color-mix(in srgb,var(--amb,#eda038) 40%,var(--line))}
.kpill .gtab,.kpill .kn{margin-top:8px}
.kpills .kesthow{margin-top:0} /* 2026-08-31: the math pill carried .kesthow's 8px top margin and sat lower than Sale history in the same row */
.rare .xn{font-weight:600;color:var(--dim);font-size:.85em}
.klinks.krow{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 6px}
@media (max-width:760px){.khero2{grid-template-columns:1fr}.k2cols{grid-template-columns:1fr}}

/* ---- koda hero: owner chip, estimate range, live-ask indicator (2026-08-24) ---- */
.keyerow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.kowner{font-size:12px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-variant-numeric:tabular-nums}
.krange{font-variant-numeric:tabular-nums}
.klive-ind{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dimmer);margin-top:6px}
.klive-ind.on{color:var(--ok,#5fbf8f)}

/* owner chip is a live wallet link now (2026-08-24, deed parity) */
a.kowner{text-decoration:none;display:inline-block}
a.kowner b{color:var(--txt);font-weight:700}
a.kowner:hover{border-color:var(--acc)}

/* value.html: the seam at zero — below-model above it, at/above-model under it */
.vsplit td{text-align:center;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--dim);background:color-mix(in srgb,var(--card) 60%,transparent);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 8px}

/* review chip (Batch 1, 2026-09-06): short context on the card, the review sentence behind a summary.
   The generic .est summary rule above turns EVERY summary in the panel into the
   uppercase accent pill ("See the math"); this one must undo all of it — on b330
   the two-chip label ("Leans on an attested sale · Mostly a named-resource value")
   rendered as one wrapping accent box on top of the "why this result?" caret
   (6 Sept, the operator's screenshot of #75181). Each chip is now its own pill and the
   question is plain text with its own caret, so any number of chips wrap cleanly. */
.est .revwhy{font-size:12.5px;color:var(--dim);margin-top:6px}
.est .revwhy summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
  font:600 12.5px/1.4 system-ui;letter-spacing:0;text-transform:none;color:var(--dim);background:none;
  padding:0;border-radius:0;margin-top:0;user-select:auto}
.est .revwhy summary:hover{filter:none}
.est .revwhy summary::-webkit-details-marker{display:none}
.est .revwhy summary::after,.est .revwhy[open] summary::after{content:none}
.est .revchip{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-weight:700;color:var(--txt);background:var(--card-2);line-height:1.35}
.est .revq{text-decoration:underline dotted;white-space:nowrap;color:var(--acc)}
.est .revq::after{content:' \25BE'}
.est .revwhy[open] .revq::after{content:' \25B4'}
.est .revwhy p{margin:6px 0 0;line-height:1.45;font-weight:500}

/* ═══ Batch 2 (2026-09-06) — first visit and the phone journey ═══════════════ */
/* A05 phone filter sheet. Applies only when scripting is on — decided by the
   CSS media feature (scripting: enabled), which is known at FIRST layout, so
   the panel never renders in the page and then jumps out of it (a deferred
   class on <html> did exactly that: a layout shift of 1.0 on every phone
   visit in the lab run). Browsers without the feature (pre-2023) evaluate the
   query as false and keep the panel in the page below the results, exactly
   as before Batch 2 — browse.js checks the panel's real position, not a
   flag, so the two agree. Desktop (>900px) is untouched. */
.fclose,.fsheetfoot,.fpill,.fback{display:none}
#browse,#grid,.results{scroll-margin-top:72px}
.fcnt{display:inline-block;min-width:18px;height:18px;line-height:18px;margin-left:6px;padding:0 5px;border-radius:999px;background:var(--acc);color:#0a1420;font:800 11px system-ui;text-align:center}
.fcnt[hidden]{display:none}
.newlisted{margin:-6px 0 12px;font-size:13px;color:var(--dim)}
.newlisted[hidden]{display:none}
.linkish{background:none;border:0;padding:0;color:var(--acc);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline}
@media (max-width:900px) and (scripting:enabled){
  .filters{position:fixed;top:0;right:0;bottom:0;width:min(92vw,380px);max-height:none;overflow-y:auto;
    background:var(--bg);border-left:1px solid var(--line);box-shadow:-12px 0 32px rgba(0,0,0,.45);
    z-index:60;padding:14px 16px 16px;transform:translateX(104%);transition:transform .22s ease;order:0}
  .filters.open{transform:none}
  .filters .fhead{position:sticky;top:0;background:var(--bg);padding:4px 0 8px;z-index:1}
  .fclose{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
    background:var(--card-2);border:1px solid var(--line);color:var(--txt);font:700 20px system-ui;cursor:pointer;margin-left:8px}
  .fsheetfoot{display:block;position:sticky;bottom:-16px;margin:18px -16px -16px;padding:10px 16px 14px;background:var(--bg);border-top:1px solid var(--line)}
  .fsheetfoot .cta{width:100%;min-height:44px}
  .fback{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:59}
  .fback[hidden]{display:none}
  .fpill{display:inline-flex;align-items:center;position:fixed;right:14px;bottom:14px;z-index:40;min-height:44px;padding:0 16px;
    border-radius:999px;background:var(--acc);color:#0a1420;border:0;font:800 14px system-ui;box-shadow:0 6px 20px rgba(0,0,0,.4);cursor:pointer}
  .fpill .fcnt{background:#0a1420;color:var(--acc)}
  /* Batch 6 (review FP06): with the compare tray open the pill sits above it (the tray is ~66px tall incl. its border) — the two never overlap, and safe-area insets are honoured */
  body.traylive .fpill{bottom:calc(80px + env(safe-area-inset-bottom, 0px))}
  .tray .wrap{padding-bottom:calc(11px + env(safe-area-inset-bottom, 0px))}
  .fpill[hidden]{display:none}
  .tofilters{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--card-2);color:var(--txt);font:700 13px system-ui}
}
@media (max-width:900px){
  /* 12–20 phone cards before JS: the server renders 36 for crawlers; the
     first paint on a phone shows 16, browse.js then paginates by 16 */
  #grid.ssr .dcard:nth-child(n+17){display:none}
}
@media (prefers-reduced-motion: reduce){ .filters{transition:none} }
/* A10 touch targets: every filter control at least 24×24 with 8px spacing
   (WCAG 2.5.8); the phone sheet gives them 36px */
.chips{gap:8px}
.chip,.ftog{min-height:28px}
.ftog input{width:16px;height:16px}
@media (max-width:900px){ .chip,.ftog,.ftog.sm{min-height:36px;padding-left:12px;padding-right:12px} .ftog input{width:20px;height:20px} }
/* rotator pause/play (A03) */
.vpause{background:var(--card-2);border:1px solid var(--line);color:var(--dim);border-radius:999px;padding:6px 12px;font:700 12px system-ui;cursor:pointer;min-height:32px}
.vpause:hover{color:var(--txt);border-color:var(--acc)}
.vpause[aria-pressed="true"]{color:var(--txt)}
.cmptab em{font-style:normal;color:var(--dim);font-size:11px}
.tchip img{width:22px;height:22px;object-fit:cover;border-radius:4px}
.rtie{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--card-2);border:1px solid var(--line);color:var(--dim);font:700 11px system-ui;vertical-align:middle;cursor:help}