/* India QSR Tracker — dark, map-first. */
:root {
  --bg: #0b0e13; --surface: #12161d; --surface-2: #1a2029; --line: #262d38;
  --ink: #eef1f5; --ink-2: #a9b2be; --ink-3: #737d8a;
  --accent: #ff8a4c; --accent-ink: #1a0d05; --mark: #d95926; --mark-b: #3987e5; --track: #222a35;
  --good: #3fb37f; --radius: 12px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
h2, h3, p { margin: 0; }
.muted { color: var(--ink-2); } .dim { color: var(--ink-3); } .pad { padding: 20px 16px; }
.num { font-variant-numeric: tabular-nums; }

#app { display: grid; grid-template-columns: 420px 1fr; height: 100dvh; }
#panel { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-right: 1px solid var(--line); }
#mapwrap { position: relative; min-width: 0; }
#map { position: absolute; inset: 0; background: #0a0d12; }

.brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.logo b { display: block; font-size: 16px; letter-spacing: -.01em; }
.logo small { display: block; color: var(--ink-2); font-size: 12px; }
.dot { flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle, #fff1d6 0 16%, #ff8a4c 17% 44%, rgba(217,89,38,.4) 45% 100%); animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(255,138,76,.12); } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }

.btn { border: 1px solid var(--line); background: var(--surface-2); border-radius: 9px; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: #3a4352; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 4px 9px; font-size: 12.5px; border-radius: 7px; }
.btn:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--line); }
.tabs button { white-space: nowrap; flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 4px 10px; color: var(--ink-2); cursor: pointer; font-weight: 500; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.badge { display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; line-height: 16px; }

#view { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 24px; outline: none; }
.foot { padding: 10px 16px 12px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 11.5px; line-height: 1.4; }

/* stat tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; min-width: 0; }
.tile b { display: block; font-size: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.tile span { color: var(--ink-2); font-size: 12px; }
.tile em { font-style: normal; color: var(--good); font-size: 12px; }

.sec { margin-top: 20px; }
.sec > h3 { align-items: center; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sec > h3 small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-3); font-size: 12px; }
.note { color: var(--ink-3); font-size: 12px; margin-top: 8px; }

/* segment chips */
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 999px; padding: 4px 10px 4px 7px; cursor: pointer; font-size: 13px; }
.chip:hover { border-color: #3a4352; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.chip i { font-style: normal; }
.chip small { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] small { color: rgba(26,13,5,.7); }

/* bar lists */
.bars { display: grid; gap: 2px; }
.bar { display: grid; grid-template-columns: minmax(0, 46%) 1fr auto; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 8px; background: none; border: 0; text-align: left; width: 100%; cursor: pointer; }
.bar:hover { background: var(--surface-2); }
.bar .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .lbl small { color: var(--ink-3); }
.bar .trk { height: 8px; background: var(--track); border-radius: 4px; overflow: hidden; }
.bar .trk i { display: block; height: 100%; background: var(--mark); border-radius: 0 4px 4px 0; min-width: 2px; }
.bar .val { font-variant-numeric: tabular-nums; color: var(--ink); min-width: 38px; text-align: right; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { background: none; border: 0; padding: 3px 9px; font-size: 12px; color: var(--ink-2); cursor: pointer; text-transform: none; letter-spacing: 0; }
.seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); }

/* growth sparkline */
.spark { position: relative; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px 6px; }
.spark svg { display: block; width: 100%; height: 64px; overflow: visible; }
.spark .cap { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 11.5px; margin-top: 2px; }
.spark .tip { position: absolute; top: 8px; right: 12px; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* cards / rows */
.rows { display: grid; gap: 6px; }
.row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); text-align: left; width: 100%; cursor: pointer; text-decoration: none; }
.row:hover { border-color: #3a4352; }
.row .em { width: 34px; height: 34px; display: grid; place-items: center; background: var(--bg); border-radius: 9px; font-size: 18px; }
.row .t { min-width: 0; }
.row .t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.row .t small { display: block; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .v { text-align: right; font-variant-numeric: tabular-nums; }
.row .v small { display: block; color: var(--ink-3); font-size: 11.5px; }
.day { margin: 16px 0 8px; color: var(--ink-2); font-size: 12.5px; display: flex; justify-content: space-between; }
.day:first-child { margin-top: 0; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); font-size: 11.5px; }
.pill.new { border-color: var(--accent); color: var(--accent); }

.ev { padding: 10px 0; border-bottom: 1px solid var(--line); }
.ev:last-child { border: 0; }
.ev .meta { color: var(--ink-3); font-size: 12px; margin-bottom: 2px; }
.ev a { text-decoration-color: var(--ink-3); }

.field { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; }
.field::placeholder { color: var(--ink-3); }
.toolbar { display: flex; gap: 8px; margin-bottom: 10px; }
.toolbar select { flex: none; width: auto; }

/* chain detail */
.back { background: none; border: 0; color: var(--ink-2); padding: 0; cursor: pointer; margin-bottom: 10px; }
.back:hover { color: var(--ink); }
.chead { display: flex; gap: 12px; align-items: flex-start; }
.chead .em { flex: none; width: 46px; height: 46px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; font-size: 24px; }
.chead h2 { font-size: 21px; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; }
.chead p { color: var(--ink-2); margin-top: 2px; }
.blurb { margin-top: 12px; color: var(--ink); }
.links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.turf { display: grid; grid-template-columns: 1fr auto 1fr; gap: 3px 8px; align-items: center; }
.turf .a, .turf .b { height: 8px; border-radius: 4px; background: var(--track); position: relative; overflow: hidden; }
.turf .a i, .turf .b i { position: absolute; top: 0; bottom: 0; }
.turf .a i { right: 0; background: var(--mark); border-radius: 4px 0 0 4px; }
.turf .b i { left: 0; background: var(--mark-b); border-radius: 0 4px 4px 0; }
.turf .c { text-align: center; font-size: 12.5px; white-space: nowrap; }
.turf .c small { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.key { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 8px; }
.key i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.priv { border: 1px dashed #3a4352; border-radius: var(--radius); padding: 12px; }
.contact { padding: 8px 0; border-bottom: 1px solid var(--line); }
.contact:last-child { border: 0; }
.contact small { color: var(--ink-2); display: block; overflow-wrap: anywhere; }

/* tables */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; padding: 6px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th button { background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
.tbl th[aria-sort] button { color: var(--ink); }
.tbl td { padding: 7px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl td.r, .tbl th.r { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--surface-2); }
.tbl td small { color: var(--ink-3); display: block; }

/* map overlays */
#mapbar { position: absolute; top: 12px; left: 12px; right: 56px; display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; pointer-events: none; z-index: 4; }
#mapbar > * { pointer-events: auto; }
.mapchip { background: rgba(18,22,29,.92); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; backdrop-filter: blur(6px); display: inline-flex; gap: 8px; align-items: center; max-width: 100%; }
.mapchip button { background: none; border: 0; color: var(--ink-2); cursor: pointer; padding: 0 2px; font-size: 15px; line-height: 1; }
.mapchip select { background: none; border: 0; max-width: 170px; cursor: pointer; }
.mapchip select option { background: var(--surface); }
#legend { position: absolute; left: 12px; bottom: 28px; background: rgba(18,22,29,.92); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 12px; color: var(--ink-2); backdrop-filter: blur(6px); max-width: calc(100% - 24px); }
#legend .ramp { width: 150px; height: 8px; border-radius: 4px; margin: 5px 0 3px; background: linear-gradient(90deg, #5a2410, #b3421a, #e8692c, #ffb265, #fff1d6); }
#legend .ends { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 11px; }
#legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
#legend span { margin-right: 12px; white-space: nowrap; }
.maplibregl-popup-content { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: 13px/1.4 var(--font); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.maplibregl-popup-content b { display: block; }
.maplibregl-popup-content small { color: var(--ink-2); }
.maplibregl-popup-content a { color: var(--accent); }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--surface); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--surface); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface); }
.maplibregl-popup-close-button { color: var(--ink-2); font-size: 16px; }
.maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib-inner { background: rgba(18,22,29,.85) !important; color: var(--ink-2) !important; font-size: 11px; }
.maplibregl-ctrl-attrib-button { filter: invert(1); }
.maplibregl-ctrl-attrib a { color: var(--ink-2) !important; }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: var(--bg); padding: 9px 16px; border-radius: 999px; font-weight: 600; opacity: 0; pointer-events: none; transition: .2s; z-index: 50; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 860px) {
  #app { display: flex; flex-direction: column; height: auto; min-height: 100dvh; }
  #mapwrap { order: 1; height: 52dvh; position: sticky; top: 0; z-index: 2; }
  #panel { order: 2; border-right: 0; border-top: 1px solid var(--line); position: relative; z-index: 3; min-height: 48dvh; }
  #view { overflow: visible; }
  .brand { padding-top: 12px; }
  .tiles b { font-size: 19px; }
  #legend { bottom: 8px; }
}

.tblwrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
@media (max-width: 480px) { .tbl.cities th:nth-child(4), .tbl.cities td:nth-child(4) { display: none; } }

/* share-card mode (?og=1) */
body.og #panel, body.og #mapbar, body.og #legend, body.og .maplibregl-control-container { display: none !important; }
body.og #app { display: block; height: 100vh; }
body.og #mapwrap { position: absolute; inset: 0; height: auto; }
#ogcard { position: fixed; left: 56px; bottom: 52px; z-index: 5; max-width: 560px; }
#ogcard .dot { display: block; width: 44px; height: 44px; margin-bottom: 18px; animation: none; }
#ogcard h1 { margin: 0; font-size: 64px; line-height: 1.02; letter-spacing: -.03em; text-shadow: 0 2px 30px #0b0e13; }
#ogcard p { margin: 14px 0 0; font-size: 24px; color: var(--ink-2); text-shadow: 0 2px 20px #0b0e13; }

/* ---- v2: explore-first panel, map controls ---- */
.tabs button { padding-left: 2px; padding-right: 2px; }
.lead { font-size: 15px; } .lead b { font-size: 22px; letter-spacing: -.02em; }
.bar[aria-pressed="true"] { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.bar[aria-pressed="true"] .trk i { background: var(--accent); }
.row.static { cursor: default; } .row.static:hover { border-color: var(--line); }
.row .em { font-variant-numeric: tabular-nums; }
.btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

.searchbox { position: relative; flex: 1 1 240px; max-width: 340px; min-width: 180px; }
.searchbox input { width: 100%; background: rgba(18,22,29,.94); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; backdrop-filter: blur(6px); }
.searchbox input::placeholder { color: var(--ink-3); }
#results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 4px; box-shadow: 0 12px 30px rgba(0,0,0,.55); max-height: 320px; overflow: auto; }
#results button { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 7px 8px; cursor: pointer; }
#results button:hover, #results button:focus-visible { background: var(--surface-2); }
#results b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#results small { color: var(--ink-3); white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
#results p { margin: 8px; color: var(--ink-2); }
.mapseg { background: rgba(18,22,29,.94); backdrop-filter: blur(6px); border-radius: 999px; }
.mapseg button { padding: 7px 12px; font-size: 13px; }
.mapseg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.mapbtn { background: rgba(18,22,29,.94); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; cursor: pointer; backdrop-filter: blur(6px); white-space: nowrap; }
.mapbtn:hover { border-color: #3a4352; }
#mapchips { display: contents; }
#tourcap { flex-basis: 100%; }
#tourcap:not([hidden]) { display: inline-block; flex: 0 1 auto; background: rgba(18,22,29,.94); border: 1px solid var(--accent); border-radius: 12px; padding: 8px 14px; }
#legend .fams { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; max-width: 420px; }
#legend .fams button { background: none; border: 1px solid transparent; border-radius: 999px; padding: 2px 8px 2px 4px; color: var(--ink); cursor: pointer; font-size: 12px; white-space: nowrap; }
#legend .fams button:hover { border-color: var(--line); }
#legend .fams button[aria-pressed="false"] { color: var(--ink-3); text-decoration: line-through; }
#legend .fams button[aria-pressed="false"] i { opacity: .25; }
#legend .ends span { margin: 0; }
.hovertip .maplibregl-popup-content { padding: 6px 10px; pointer-events: none; }
.hovertip { pointer-events: none; }

@media (max-width: 860px) {
  .searchbox { flex-basis: 100%; max-width: none; }
  #legend .fams { max-width: none; } #legend .ends:last-child { display: none; }
  #tour { display: none; }
}
@media print {
  body { background: #fff; color: #111; }
  #mapwrap, .tabs, .brand .btn, .foot, #toast, .links, .back { display: none !important; }
  #app { display: block; height: auto; } #panel { border: 0; background: #fff; } #view { overflow: visible; }
  .tile, .row, .spark { background: #fff; border-color: #ccc; } .row .em { background: #f2f2f2; }
  .muted, .dim, .note, .row .t small, .tile span, .sec > h3 { color: #555 !important; } .bar .trk { background: #e5e5e5; }
  .logo small, .logo b { color: #111; }
}

#legend .rampline { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-2); }
#legend .rampline .ramp { width: 110px; margin: 0; flex: none; }
#legend .rampline span { margin: 0; }

@media (max-width: 860px) {
  #legend { padding: 6px 10px; right: 44px; }
  #legend .fams { flex-wrap: nowrap; overflow-x: auto; margin-top: 4px; scrollbar-width: none; }
  #legend .rampline + .fams { margin-top: 6px; }
}
[hidden] { display: none !important; }

#ogcard small { display: block; margin-top: 18px; font-size: 20px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); text-shadow: 0 2px 20px #0b0e13; }
.toolbar .chip { white-space: nowrap; }
.sec > h3 small a { color: var(--accent); text-decoration: none; }

/* news tab */
.seg.wide { display: flex; }
.seg.wide button { flex: 1; padding: 7px 8px; font-size: 13px; white-space: nowrap; }
.seg.wide button + button { border-left: 1px solid var(--line); }
.seg.wide button[aria-pressed="true"] { font-weight: 600; }
.ntools { margin: 12px 0 10px; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 6px; padding: 0 16px 2px; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chips.scroll .chip { flex: none; white-space: nowrap; padding-left: 10px; }
.nfilter { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; color: var(--ink-2); }
.nempty { padding: 18px 0; }
.nw { padding: 11px 0 12px; border-bottom: 1px solid var(--line); }
.nw:last-of-type { border-bottom: 0; }
.nw .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; color: var(--ink-3); font-size: 12px; margin-bottom: 4px; }
.nw .meta .pill { background: none; font-size: 11.5px; line-height: 1.5; }
.nw .meta button.pill { cursor: pointer; }
.nw .meta button.pill:hover { border-color: var(--accent); color: var(--accent); }
.nw .ttl { display: block; font-weight: 600; line-height: 1.36; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.nw-x, .nw a.ttl:hover { text-decoration: underline; text-decoration-color: var(--ink-3); }
.nw a.ttl:visited { color: var(--ink-2); }
.nw .sum { color: var(--ink-2); font-size: 13px; margin-top: 3px; }
.nw .tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; margin-top: 7px; font-size: 12px; color: var(--ink-3); }
.ctag { border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; color: var(--accent); text-decoration: none; }
.ctag:hover { border-color: var(--accent); }
.nw .also a { color: var(--ink-2); text-decoration-color: var(--ink-3); }
.nmore { width: 100%; margin-top: 12px; }

/* full-screen news reader (one story per screen) */
.ntools .btn { flex: none; }
.nw .meta .nwfs { margin-left: auto; background: none; border: 0; color: var(--ink-3); cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1; }
.nw .meta .nwfs:hover { color: var(--accent); }
.nw .sum.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
#reader { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: #07090d; }
body.reading { overflow: hidden; }
.rbar { display: flex; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 14px 10px; background: var(--surface); border-bottom: 1px solid var(--line); }
.rbrand { display: flex; align-items: baseline; gap: 8px; margin-right: auto; font-weight: 700; font-size: 15px; min-width: 0; white-space: nowrap; }
.rbrand i { align-self: center; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.rbrand small { font-weight: 400; color: var(--ink-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
#rcount { color: var(--ink-2); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#rscroll { flex: 1; min-height: 0; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; outline: none; scrollbar-width: none; }
#rscroll::-webkit-scrollbar { display: none; }
.rc { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; padding: 24px 76px 24px 24px; }
.rcard { width: min(1080px, 100%); height: min(600px, 100%); display: grid; grid-template-columns: minmax(0, 47%) minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.rimg { position: relative; min-height: 0; background: radial-gradient(120% 90% at 20% 10%, rgba(255,138,76,.28), rgba(217,89,38,.08) 55%, transparent 80%), var(--surface-2); }
.rimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rtopic { position: absolute; left: 14px; top: 14px; padding: 3px 11px; border-radius: 999px; background: rgba(11,14,19,.82); border: 1px solid var(--line); font-size: 12px; font-weight: 600; }
.rbody { display: flex; flex-direction: column; gap: 12px; padding: 28px 30px 24px; min-height: 0; overflow-y: auto; }
.rbody .meta { display: flex; flex-wrap: wrap; gap: 4px 7px; color: var(--ink-2); font-size: 13px; }
.rbody h2 { font-size: 25px; line-height: 1.24; letter-spacing: -.012em; overflow-wrap: anywhere; }
.rbrief { font-size: 17px; line-height: 1.62; color: #dfe4ea; }
.rbrief.none { font-size: 14px; color: var(--ink-3); }
.rbody .tags { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; }
.ract { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.ract .btn { text-decoration: none; white-space: normal; }
.ralso { color: var(--ink-3); font-size: 12.5px; }
.ralso a { color: var(--ink-2); }
.rcard.noimg { grid-template-columns: 1fr; grid-template-rows: 58px minmax(0, 1fr); width: min(720px, 100%); height: auto; max-height: 100%; }
.rend { text-align: center; display: grid; gap: 12px; justify-items: center; }
.rnav { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: grid; gap: 8px; }
.rnav .btn { width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 17px; }
@media (max-width: 860px) {
  .rlbl { display: none; }
  .rbrand small { display: none; }
  .rc { padding: 0; place-items: stretch; }
  .rcard, .rcard.noimg { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; grid-template-columns: 1fr; grid-template-rows: minmax(0, 34%) minmax(0, 1fr); }
  .rcard.noimg { grid-template-rows: 58px minmax(0, 1fr); }
  .rbody { padding: 18px 18px calc(16px + env(safe-area-inset-bottom)); gap: 10px; }
  .rbody h2 { font-size: 20.5px; }
  .rbrief { font-size: 16px; line-height: 1.58; }
  .ract .btn.primary { flex: 1; text-align: center; }
  .rnav { display: none; }
  .rend { align-content: center; padding: 24px; }
}

.ract { position: sticky; bottom: -24px; margin-bottom: -24px; padding-bottom: 24px; background: linear-gradient(transparent, var(--surface) 10px); }
.ract .btn.primary { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; white-space: nowrap; }
.ract .btn.primary span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) {
  .rcard, .rcard.noimg { grid-template-rows: minmax(0, 30%) minmax(0, 1fr); }
  .rcard.noimg { grid-template-rows: 58px minmax(0, 1fr); }
  .rbody h2 { font-size: 19.5px; }
  .rbrief { font-size: 15.5px; line-height: 1.55; }
  .ract { bottom: calc(-16px - env(safe-area-inset-bottom)); margin-bottom: calc(-16px - env(safe-area-inset-bottom)); padding-bottom: calc(16px + env(safe-area-inset-bottom)); justify-content: stretch; }
  .ract .btn.primary { flex: 1; justify-content: center; min-width: 0; }
}

/* Chain Explorer: coverage notice and load-failure fallback */
#mapnote { position: absolute; left: 12px; right: 56px; bottom: 34px; max-width: 520px; background: rgba(18,22,29,.94); border: 1px solid var(--line); border-left: 3px solid #ff8a4c; border-radius: 8px; padding: 9px 12px; font-size: 13px; line-height: 1.4; color: var(--ink, #e9e6df); z-index: 5; }
#mapfail { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; padding: 28px; background: #0a0d12; color: #e9e6df; font-size: 14.5px; }
#mapfail[hidden], #mapnote[hidden] { display: none; }
#mapfail b { font-size: 18px; }
#mapfail p { margin: 6px 0; max-width: 46ch; }

/* ---- phones (2026-11-11): map on top, panel below. Keep every phone rule in this block. ---- */
@media (max-width: 860px) {
  /* 16px inputs stop iOS zooming the page on focus */
  input, select, textarea, .field, .searchbox input, .mapchip select { font-size: 16px; }
  #mapwrap { height: 44vh; height: 44dvh; }
  #app { min-height: 100vh; min-height: 100dvh; }
  #panel { min-height: 56vh; min-height: 56dvh; }
  /* header: one compact row */
  .brand { padding: 8px 12px 6px; gap: 8px; flex-wrap: wrap; }
  .brand .logo { margin-right: auto; gap: 8px; }
  .brand .dot { width: 20px; height: 20px; }
  .logo b { font-size: 15px; white-space: nowrap; }
  .logo small, .brand .lg { display: none; }
  .brand .btn { padding: 9px 11px; min-height: 40px; display: inline-flex; align-items: center; text-decoration: none; }
  /* tabs stay reachable while the panel scrolls */
  .tabs { position: sticky; top: 0; z-index: 4; background: var(--surface); padding: 0 6px; }
  .tabs button { padding: 13px 2px; min-height: 44px; }
  #view { padding: 14px 14px 24px; }
  .foot { font-size: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  /* tap targets */
  .btn { min-height: 40px; }
  .btn.sm { padding: 9px 12px; font-size: 13px; }
  .chip { padding: 9px 13px 9px 10px; }
  .bar { padding: 11px 6px; }
  .seg button { padding: 10px 12px; font-size: 13px; }
  .back { padding: 10px 10px 10px 0; margin: -6px 0 4px; min-height: 40px; }
  .tbl td { padding: 11px 6px; }
  .tbl th button { padding: 8px 0; }
  .nw .meta .nwfs { padding: 10px 10px; margin: -10px -8px -10px auto; font-size: 17px; }
  .nw .meta button.pill { padding: 5px 10px; }
  .ctag { padding: 6px 11px; }
  .toolbar { flex-wrap: wrap; }
  .toolbar .field { flex: 1 1 160px; min-width: 0; }
  .badge, .pill, .nw .meta .pill, .row .v small, .spark .cap, .tbl th, #legend .ends, #legend .rampline { font-size: 12px; }
  /* map overlays */
  #mapbar { top: calc(8px + env(safe-area-inset-top)); left: calc(8px + env(safe-area-inset-left)); right: 52px; gap: 6px; }
  .searchbox input { padding: 9px 14px; }
  #results { max-height: calc(44vh - 70px); max-height: calc(44dvh - 70px); }
  #results button { padding: 11px 8px; }
  .mapseg button { padding: 10px 14px; }
  .mapchip { padding: 2px 4px 2px 12px; }
  .mapchip button { width: 40px; height: 40px; font-size: 20px; }
  #legend { left: 8px; bottom: 8px; }
  #legend .fams button { padding: 9px 10px 9px 6px; }
  #legend .fams::-webkit-scrollbar { display: none; }
  /* the coverage notice sits above the legend instead of on top of it */
  #mapnote { left: 8px; right: 8px; bottom: 56px; font-size: 12.5px; padding: 7px 10px; }
  .maplibregl-ctrl-group button { width: 40px; height: 40px; }
  .maplibregl-ctrl-top-right { top: env(safe-area-inset-top); }
  .maplibregl-popup-content { font-size: 14px; }
  .maplibregl-popup-content a { display: inline-block; padding: 8px 0 2px; }
  .maplibregl-popup-close-button { width: 36px; height: 36px; font-size: 20px; }
  #toast { bottom: calc(24px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); text-align: center; }
  .rbar .btn.sm { min-width: 40px; }
  .brand a.btn { text-transform: capitalize; }
  .searchbox { z-index: 2; }            /* results drop over the Heat/Dots/3D switch, not under it */
}