/* Bad Boss — a map application.
   The map IS the page: fixed, full-bleed, pannable. Everything else floats on
   top of it as white cards with soft shadows. Colour is spent almost entirely
   on the data; the chrome stays out of the way. */

:root {
  /* Modern Korean app: bright, soft, heavily rounded, one vivid accent.
     The greys are cool rather than warm — that blue-grey ground is what makes
     a white card read as floating rather than pasted on. */
  --surface:   #ffffff;
  --surface-2: #f2f4f6;
  --land:      #dfe3e8;      /* unreported state fill */
  --ground:    #eaedf0;      /* around the landmass */
  --text:      #191f28;
  --text-2:    #4e5968;
  --text-3:    #8b95a1;
  --line:      #e5e8eb;
  --accent:    #3182f6;
  --accent-w:  #e8f2fe;
  --danger:    #f04452;
  --good:      #12b886;

  /* Severity keeps its own meaning: this is data, not decoration. */
  --s1:        #ffc453;
  --s2:        #ff922b;
  --s3:        #f04452;

  /* Shadows are wide and faint. A tight dark shadow reads Western-corporate;
     a soft wide one reads like a card resting on paper. */
  --sh-1: 0 1px 3px rgba(25, 31, 40, .06), 0 6px 18px rgba(25, 31, 40, .07);
  --sh-2: 0 4px 12px rgba(25, 31, 40, .10), 0 18px 44px rgba(25, 31, 40, .13);

  --r: 20px;
  --r-sm: 14px;

  /* Overshoot on press. Everything springs, nothing eases politely. */
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  --ui:      'IBM Plex Sans KR', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --display: 'Black Han Sans', 'IBM Plex Sans KR', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0; overflow: hidden;
  background: var(--ground); color: var(--text);
  font: 400 14px/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-w); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── the map surface ────────────────────────────────────────────────────── */

.mapstage { position: fixed; inset: 0; background: var(--ground); }
#map { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#map.is-panning { cursor: grabbing; }

.st {
  fill: var(--land);
  stroke: #ffffff;
  stroke-width: calc(.07 / var(--k, 1));
  cursor: pointer;
  transition: opacity .16s ease, filter .16s ease;
}
.st:hover { filter: brightness(.94); }
.st:focus { outline: none; filter: brightness(.94); }
.st.is-sel { stroke: var(--text); stroke-width: calc(.16 / var(--k, 1)); }
.st.is-dim { opacity: .5; }
.st.is-new { animation: flash 2.4s ease-out; }

@keyframes flash {
  0%, 100% { filter: none; }
  10% { filter: brightness(1.35) saturate(1.5); }
  45% { filter: brightness(1); }
  70% { filter: brightness(1.25); }
}

/* map pins */
.pin { cursor: pointer; }
.pin-shadow { fill: rgba(24, 26, 29, .28); }
.pin-body { stroke: #fff; stroke-width: calc(.09 / var(--k, 1)); paint-order: stroke; }
.pin-eye { fill: #fff; }
.pin-badge { fill: var(--good); stroke: #fff; stroke-width: calc(.07 / var(--k, 1)); }
.pin-txt {
  fill: var(--text); font: 500 calc(.44px) var(--ui); text-anchor: middle;
  paint-order: stroke; stroke: #fff; stroke-width: calc(.2px); pointer-events: none;
}
.pin:hover .pin-body, .pin:focus .pin-body { stroke: var(--text); }
.pin:focus { outline: none; }
.pin.is-sel .pin-body { stroke: var(--accent); stroke-width: calc(.16 / var(--k, 1)); }

.tip {
  position: absolute; z-index: 6; max-width: 300px; pointer-events: none;
  display: grid; gap: 4px; padding: 12px 14px;
  background: var(--surface); color: var(--text);
  border-radius: var(--r); box-shadow: var(--sh-2);
}
.tip b { font: 700 15px/1.25 var(--ui); }
.tip-kind { font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.tip-rank { font: 500 11px/1 var(--mono); color: var(--accent); }
.tip-big { font: 400 12px/1 var(--ui); color: var(--text-2); margin-top: 2px; }
.tip-big em { font: 700 26px/1 var(--ui); font-style: normal; color: var(--text); margin-right: 6px; }
.tip-row { font: 400 12px/1.45 var(--ui); color: var(--text-2); }
.tip-row i { font-style: normal; font-weight: 700; color: var(--danger); }
.tip-none { font: 400 12px/1.45 var(--ui); color: var(--text-3); }

/* ── floating UI ────────────────────────────────────────────────────────── */

.ui { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
.ui > * { pointer-events: auto; }

.panel-l {
  position: absolute; top: 12px; left: 12px; bottom: 12px; width: 372px;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.panel-l > * { pointer-events: auto; }

/* search */
.searchcard { background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden; }
.searchrow { display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 12px; }
.logo { display: grid; place-items: center; color: var(--danger); flex: none; }
#searchInput {
  flex: 1; min-width: 0; border: 0; outline: none; background: none;
  padding: 13px 4px; font: 400 15px/1 var(--ui); color: var(--text);
}
#searchInput::placeholder { color: var(--text-3); }
#searchInput::-webkit-search-cancel-button { cursor: pointer; }

.iconbtn {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none; color: var(--text-2); cursor: pointer;
}
.iconbtn:hover { background: var(--surface-2); color: var(--text); }

.pills { display: flex; gap: 6px; padding: 0 10px 10px; overflow-x: auto; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pill {
  flex: none; padding: 6px 13px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text-2);
  font: 500 12.5px/1.5 var(--ui);
}
.pill:hover { background: var(--surface-2); }
.pill.is-on { background: var(--accent-w); border-color: #bcd6f4; color: var(--accent); }

/* results card */
.listcard {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden;
}
.cardhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 0; }
.cardhead h1 { margin: 0; font: 700 24px/1.05 var(--ui); letter-spacing: -.02em; }
.sub { margin: 4px 0 0; font: 400 11.5px/1.35 var(--ui); color: var(--text-3); }

.score { flex: none; text-align: center; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); }
.score b { display: block; font: 700 21px/1 var(--ui); color: var(--danger); }
.score span { font: 500 9px/1.15 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }

.natline { margin: 12px 16px 0; font: 400 12px/1.5 var(--ui); color: var(--text-2); }
.natline b { color: var(--text); font-weight: 700; }
.natline .fixcount { color: var(--good); }
.modenote { margin: 3px 16px 12px; font: 400 11px/1.4 var(--mono); color: var(--text-3); }

.filterbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 16px 10px; padding: 8px 10px 8px 12px;
  background: var(--accent-w); border-radius: 8px;
  font: 400 12px/1.3 var(--ui); color: var(--accent);
}
.filterbar b { font-weight: 700; }
.filterbar button {
  border: 0; background: none; cursor: pointer; color: var(--accent);
  font: 700 11px/1 var(--ui); text-transform: uppercase; letter-spacing: .05em;
}

.panel { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 8px; }
.panelnote {
  margin: 0 8px 10px; padding: 10px 12px; border-radius: 8px;
  background: #eef6f1; color: #245c47; font: 400 12px/1.5 var(--ui);
}

/* ── ranked rows ────────────────────────────────────────────────────────── */

.ranks { list-style: none; margin: 0; padding: 0; }
.rank {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 11px; align-items: center;
  padding: 11px 8px; border-radius: 8px; cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.rank:last-child { border-bottom: 0; }
.rank:hover { background: var(--surface-2); }
.rank.is-sel { background: var(--accent-w); }
.rk { font: 700 15px/1 var(--ui); color: var(--text-3); text-align: right; }
.ranks:not(.redeemed) .rank:nth-child(-n+3) .rk { color: var(--danger); }
.fixrk { color: var(--good) !important; }
.rmain { min-width: 0; }
.rmain b { display: block; font: 500 14px/1.3 var(--ui); overflow-wrap: anywhere; }
.rmain small { display: block; margin-top: 1px; font: 400 11.5px/1.4 var(--ui); color: var(--text-3); overflow-wrap: anywhere; }
.rnum { text-align: right; }
.rnum em { display: block; font: 700 18px/1 var(--ui); font-style: normal; }
.rnum small { font: 400 9.5px/1 var(--mono); color: var(--text-3); }

.badge {
  display: inline-block; margin-left: 6px; padding: 2px 7px; vertical-align: 1px;
  border-radius: 999px; font: 500 10px/1.4 var(--ui);
  background: #e6f3ec; color: var(--good);
}
.badge.b-listening { background: var(--surface-2); color: var(--text-2); }
.badge.b-turned { background: var(--good); color: #fff; }

.bars { display: flex; gap: 2px; height: 3px; margin-top: 6px; border-radius: 2px; overflow: hidden; }
.bars i { display: block; min-width: 3px; }
.bars .s1 { background: var(--s1); } .bars .s2 { background: var(--s2); } .bars .s3 { background: var(--s3); }

.empty { font: 400 13px/1.65 var(--ui); color: var(--text-3); padding: 22px 10px; }
.railfoot {
  display: flex; flex-wrap: wrap; gap: 14px; flex: none;
  padding: 10px 16px; border-top: 1px solid var(--line); background: var(--surface);
}
.lnk { background: none; border: 0; padding: 0; cursor: pointer; font: 400 11.5px/1 var(--ui); color: var(--text-3); }
.lnk:hover { color: var(--accent); text-decoration: underline; }
.lnk.danger:hover { color: var(--danger); }

/* ── report cards ───────────────────────────────────────────────────────── */

.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.card { padding: 12px 13px; border-radius: 8px; background: var(--surface-2); border-left: 3px solid var(--s1); }
.card.sev-2 { border-left-color: var(--s2); }
.card.sev-3 { border-left-color: var(--s3); }
.card.is-fix { border-left-color: var(--good); background: #f0f7f3; }
.card header { display: flex; flex-wrap: wrap; gap: 7px; align-items: baseline; }
.card header b { font: 500 14px/1.3 var(--ui); overflow-wrap: anywhere; }
.sevtag {
  margin-left: auto; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  font: 500 10px/1.5 var(--ui); background: var(--s1); color: #fff;
}
.sevtag.s2 { background: var(--s2); } .sevtag.s3 { background: var(--s3); }
.sevtag.fix { background: var(--good); }
.tagdemo { padding: 1px 6px; border-radius: 999px; font: 500 9.5px/1.5 var(--ui); background: #fff; color: var(--text-3); border: 1px solid var(--line); }
.meta { margin: 5px 0 0; font: 400 11px/1 var(--mono); color: var(--text-3); }
.tr { display: flex; flex-wrap: wrap; gap: 4px; margin: 9px 0 0; }
.tr span { padding: 2px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font: 400 10.5px/1.5 var(--ui); color: var(--text-2); }
.q { margin: 10px 0 0; font: 400 13px/1.55 var(--ui); overflow-wrap: anywhere; }
.q span { display: block; margin-bottom: 2px; font: 500 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.q.fix span { color: var(--good); }

/* ── derby card (right) ─────────────────────────────────────────────────── */

.panel-r { position: absolute; top: 12px; right: 12px; width: 330px; max-height: calc(100% - 24px); overflow: auto; }
.derbycard { background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-1); padding: 14px 16px 16px; }
.derbyhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.derbyhead h2 { margin: 0; font: 700 15px/1.2 var(--ui); letter-spacing: -.01em; }
.collapse {
  width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; background: none; color: var(--text-2);
  transition: transform .2s ease;
}
.collapse:hover { background: var(--surface-2); }
.collapse[aria-expanded="false"] { transform: rotate(180deg); }
.derbynote { margin: 2px 0 0; font: 400 11.5px/1.45 var(--ui); color: var(--text-3); }

.barchart { position: relative; margin-top: 12px; transition: height .35s ease; }
.barchart.is-empty::after { content: 'No organisation has been named yet.'; font: 400 12px/1.6 var(--ui); color: var(--text-3); }

.bar {
  position: absolute; left: 0; right: 0; height: 44px;
  display: grid; grid-template-columns: 18px minmax(0, 1fr) 30px; align-items: center; gap: 8px;
  cursor: pointer; border-radius: 6px;
  transition: transform .5s cubic-bezier(.22, .8, .24, 1);
}
.bar:hover { background: var(--surface-2); }
.bar-rk { font: 500 12px/1 var(--mono); color: var(--text-3); text-align: right; }
.bar:nth-child(-n+3) .bar-rk { color: var(--danger); }
.bar-body { min-width: 0; }
.bar-lab { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.bar-lab b { font: 500 12.5px/1.3 var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-lab i { font: 400 10px/1 var(--ui); font-style: normal; color: var(--text-3); white-space: nowrap; }
.bar-track { display: block; height: 7px; margin-top: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.bar-fill { display: block; height: 100%; width: 0; border-radius: 4px; transition: width .55s cubic-bezier(.22,.8,.24,1), background .3s ease; }
.bar-v { font: 700 14px/1 var(--ui); text-align: right; }
.bar.has-badge .bar-lab b::after { content: '●'; margin-left: 5px; font-size: 8px; color: var(--good); vertical-align: 2px; }

.candlewrap { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.candlehead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.candlehead b { font: 700 13px/1.2 var(--ui); }
.delta { font: 500 11px/1 var(--mono); }
.delta.worse { color: var(--danger); }
.delta.better { color: var(--good); }
.delta.flat { color: var(--text-3); }
.candles { display: block; width: 100%; height: 108px; margin-top: 8px; }
.candles .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.candles .wick { stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.candles .worse { stroke: var(--danger); fill: var(--danger); }
.candles .better { stroke: var(--good); fill: var(--good); }
.candles .flat { stroke: var(--text-3); fill: var(--text-3); }
.candles .body { stroke-width: 1; vector-effect: non-scaling-stroke; }
.candleaxis { display: flex; justify-content: space-between; margin-top: 3px; }
.candleaxis span { font: 400 9px/1 var(--mono); color: var(--text-3); }
.nocandle { margin: 8px 0 0; font: 400 11.5px/1.55 var(--ui); color: var(--text-3); }

/* ── map controls ───────────────────────────────────────────────────────── */

.mapctl { position: absolute; right: 12px; bottom: 26px; display: grid; gap: 10px; justify-items: center; }
.ctlgroup { background: var(--surface); border-radius: 8px; box-shadow: var(--sh-1); overflow: hidden; }
.ctl {
  width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
  border: 0; background: var(--surface); color: var(--text-2);
}
.ctl:hover { background: var(--surface-2); color: var(--text); }
.ctlgroup .ctl + .ctl { border-top: 1px solid var(--line); }
.ctl.solo { border-radius: 8px; box-shadow: var(--sh-1); }

.fab {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 26px;
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 13px 22px 13px 18px; border: 0; border-radius: 999px;
  background: var(--danger); color: #fff; box-shadow: var(--sh-2);
  font: 500 14px/1 var(--ui);
}
.fab:hover { filter: brightness(1.06); }

.legendbar {
  position: absolute; left: 396px; bottom: 14px; right: 354px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.legend { display: flex; gap: 2px; align-items: center; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.9); box-shadow: var(--sh-1); }
.legend span { font: 400 8.5px/1 var(--mono); color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.legend i { display: block; width: 20px; height: 7px; margin-bottom: 3px; border-radius: 2px; }
.mapfoot { margin: 0; flex: 1; min-width: 220px; font: 400 10.5px/1.45 var(--ui); color: var(--text-2); text-shadow: 0 1px 2px rgba(255,255,255,.9); }
#unmapped { color: var(--danger); }

.btn.ghost {
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text); cursor: pointer; font: 500 12px/1 var(--ui);
  box-shadow: var(--sh-1);
}
.btn.ghost:hover { background: var(--surface-2); }

/* ── ad slots: reserved so an arriving ad never shifts the layout ───────── */

.adslot { display: none; }
body.ads-on .adslot { display: block; background: var(--surface-2); border-radius: 8px; }
body.ads-on .lead { position: absolute; left: 50%; transform: translateX(-50%); top: 12px; width: 728px; max-width: calc(100vw - 760px); height: 90px; box-shadow: var(--sh-1); }
body.ads-on .rail-ad { height: 254px; margin: 0 16px 12px; }
body.ads-on .feedad { height: 254px; margin: 6px 0; list-style: none; }

/* ── the report sheet ───────────────────────────────────────────────────── */

.sheet {
  width: min(560px, 94vw); max-height: 92vh; padding: 0; color: var(--text);
  background: var(--surface); border: 0; border-radius: 14px; box-shadow: var(--sh-2);
}
.sheet::backdrop { background: rgba(24, 26, 29, .45); }
.sheet form:not(.sheet-x) { padding: 22px clamp(16px, 4vw, 28px) 24px; }
.sheet h2 { margin: 0 0 14px; font: 700 22px/1.2 var(--ui); letter-spacing: -.02em; }
.sheet .lede { margin: 13px 0 20px; font: 400 12.5px/1.55 var(--ui); color: var(--text-2); }
.sheet-x { position: absolute; top: 8px; right: 8px; }
.sheet-x button {
  width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer;
  background: none; border: 0; border-radius: 50%; color: var(--text-2);
}
.sheet-x button:hover { background: var(--surface-2); }

.kindpick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kindpick label { cursor: pointer; }
.kindpick input { position: absolute; opacity: 0; width: 0; height: 0; }
.kindpick span { display: block; height: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; }
.kindpick b { display: block; font: 500 14px/1.2 var(--ui); }
.kindpick small { display: block; margin-top: 2px; font: 400 11px/1.4 var(--ui); color: var(--text-3); }
.kindpick input:checked + .k-toxic { border-color: var(--danger); background: #fdf1ef; }
.kindpick input:checked + .k-fixed { border-color: var(--good); background: #eff7f2; }

.fld { display: block; margin-bottom: 15px; border: 0; padding: 0; }
.fld > span, .fld legend {
  display: block; margin-bottom: 5px; padding: 0;
  font: 500 11px/1 var(--ui); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3);
}
.fld b { color: var(--danger); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
[data-kind="fixed"] .only-toxic { display: none; }

input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=search]), select, textarea {
  width: 100%; padding: 11px 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  font: 400 14px/1.4 var(--ui); resize: vertical;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-w); }

.sevgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sevgrid label { cursor: pointer; }
.sevgrid input { position: absolute; opacity: 0; width: 0; height: 0; }
.sevgrid span { display: block; height: 100%; padding: 10px 10px; border: 1px solid var(--line); border-radius: 10px; font: 500 12.5px/1.3 var(--ui); }
.sevgrid b { display: block; font: 700 22px/1 var(--ui); color: var(--text-3); }
.sevgrid small { display: block; margin-top: 3px; font: 400 10.5px/1.35 var(--ui); color: var(--text-3); }
.sevgrid input:checked + span.s1 { border-color: var(--s1); background: #fdf6e6; }
.sevgrid input:checked + span.s2 { border-color: var(--s2); background: #fdf0e6; }
.sevgrid input:checked + span.s3 { border-color: var(--s3); background: #fdeeeb; }
.sevgrid input:checked + span b { color: var(--text); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span { display: block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font: 400 12px/1.4 var(--ui); color: var(--text-2); }
.chip input:checked + span { border-color: var(--accent); background: var(--accent-w); color: var(--accent); }

.counter { margin: -7px 0 14px; font: 400 11px/1 var(--mono); color: var(--text-3); }
.counter b { color: var(--text); }
.counter.over, .counter.over b { color: var(--danger); font-weight: 500; }

.guard { margin: 0 0 15px; padding: 12px 14px; border-radius: 10px; background: #fdf1ef; border: 1px solid #f3d4ce; }
.guard p { margin: 0 0 6px; font: 500 11px/1 var(--ui); letter-spacing: .05em; text-transform: uppercase; color: var(--danger); }
.guard ul { margin: 0; padding-left: 16px; }
.guard li { font: 400 12.5px/1.55 var(--ui); }
.guard li.warn { color: #8a5a06; }
.guard code { font: 400 11.5px/1 var(--mono); background: #fff; padding: 1px 5px; border-radius: 4px; }

.check { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 18px; }
.check input { margin-top: 2px; accent-color: var(--accent); width: 16px; height: 16px; }
.check span { font: 400 11.5px/1.55 var(--ui); color: var(--text-2); }

.actions { display: flex; gap: 10px; justify-content: flex-end; }
.btn {
  padding: 11px 20px; border: 0; border-radius: 999px; cursor: pointer;
  font: 500 13.5px/1 var(--ui);
}
.btn.primary { background: var(--danger); color: #fff; }
.btn.primary:hover { filter: brightness(1.06); }
.actions .ghost { background: var(--surface); border: 1px solid var(--line); }

/* ── consent bar ────────────────────────────────────────────────────────── */

.consent {
  position: fixed; z-index: 20; left: 12px; right: 12px; bottom: 12px;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-radius: var(--r);
  background: var(--surface); box-shadow: var(--sh-2);
}
.consent p { margin: 0; max-width: 68ch; font: 400 12.5px/1.5 var(--ui); color: var(--text-2); }
.consent div { display: flex; gap: 8px; }
.consent .btn-file { background: var(--danger); color: #fff; padding: 10px 18px; border: 0; border-radius: 999px; cursor: pointer; font: 500 13px/1 var(--ui); }

/* ── responsive: the phone gets a bottom sheet, as a map app should ─────── */

@media (max-width: 1180px) {
  .panel-r { display: none; }
  .legendbar { right: 70px; }
}

@media (max-width: 820px) {
  .panel-l {
    top: auto; left: 0; right: 0; bottom: 0; width: auto;
    height: var(--sheet-h); gap: 0;
    transition: height .22s ease;
  }
  .panel-l.is-dragging { transition: none; }
  .searchcard {
    position: fixed; top: 10px; left: 10px; right: 10px; z-index: 3;
    box-shadow: var(--sh-2);
  }
  .listcard { border-radius: 16px 16px 0 0; box-shadow: var(--sh-2); }

  /* A real grab handle, not a decorative bar: it is the gesture people expect
     on a bottom sheet, and it is the only way to see the map behind it. */
  .grabber {
    flex: none; display: block; width: 100%; height: 26px; padding: 0;
    border: 0; background: none; cursor: grab; touch-action: none;
    position: relative;
  }
  .grabber::before {
    content: ''; position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 2px; background: var(--line);
  }
  .grabber:active { cursor: grabbing; }
  .grabber:active::before, .grabber:hover::before { background: var(--text-3); }

  .legendbar { left: 10px; right: 10px; bottom: calc(var(--sheet-h) + 12px); }
  .mapfoot { display: none; }
  .mapctl { bottom: calc(var(--sheet-h) + 12px); right: 10px; }
  .fab { bottom: calc(var(--sheet-h) + 12px); left: 10px; transform: none; padding: 12px 18px; font-size: 13px; }
  .row, .sevgrid, .kindpick { grid-template-columns: 1fr; }

  /* Footer links are 12px of text; give them a real tap target. */
  .railfoot { gap: 4px; padding: 4px 10px; }
  .railfoot .lnk { min-height: 40px; padding: 0 8px; display: flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .st.is-new { animation: none; }
  .bar, .bar-fill, .barchart, .collapse { transition: none; }
}

.tip-badge { margin-top: 2px; font: 500 11px/1.5 var(--ui); color: var(--good); }

/* The Derby pill only exists where the right-hand column does not. */
.pill.only-narrow { display: none; }
@media (max-width: 1180px) {
  .pill.only-narrow { display: block; }
  #panel > .derbycard { box-shadow: none; padding: 4px 8px 8px; }
}

:root { --sheet-h: 58vh; }

/* ── motion: the map should feel like a place, not a picture ─────────────── */

.pin.is-drop { animation: pindrop .5s cubic-bezier(.2, 1.5, .4, 1) backwards; }
@keyframes pindrop {
  0%   { opacity: 0; transform: translateY(-14px) scale(.5); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.pin .pin-body, .pin .pin-eye { transition: transform .16s cubic-bezier(.2, 1.4, .4, 1); transform-origin: center bottom; }
.pin:hover .pin-body, .pin:focus .pin-body { transform: scale(1.18); }
.pin-badge { animation: badgepop .45s cubic-bezier(.2, 1.6, .4, 1) backwards; }
@keyframes badgepop { 0% { transform: scale(0); } 100% { transform: none; } }

.rank, .bar, .pill, .ctl, .fab, .iconbtn { transition: background .14s ease, transform .14s ease, color .14s ease; }
.rank:active, .bar:active { transform: scale(.985); }
.ctl:active, .iconbtn:active { transform: scale(.9); }
.fab:active { transform: translateX(-50%) scale(.96); }

.tip { animation: tipin .13s ease-out; }
@keyframes tipin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (max-width: 820px) { .fab:active { transform: scale(.96); } }

@media (prefers-reduced-motion: reduce) {
  .pin.is-drop, .pin-badge, .tip { animation: none; }
  .pin .pin-body, .pin .pin-eye, .rank, .bar, .pill, .ctl, .fab, .iconbtn { transition: none; }
}

/* ── the good pole ──────────────────────────────────────────────────────── */

:root { --g1: #8dbda4; --g2: #3f9370; --g3: #176b4e; }

.is-good, .tip-row i.good { color: var(--good); }
.is-bad { color: var(--danger); }

.bars .g1 { background: var(--g1); }
.bars .g2 { background: var(--g2); }
.bars .g3 { background: var(--g3); }

.rnum em { font: 700 17px/1 var(--ui); }
.stars { display: flex; gap: 1.5px; justify-content: flex-end; margin: 3px 0 1px; }
.stars i {
  width: 8px; height: 8px; border-radius: 2px; background: var(--line);
}
.stars i.on { background: currentColor; }
.stars i.half { background: linear-gradient(90deg, currentColor 50%, var(--line) 50%); }
.rnum small { display: block; text-transform: lowercase; }

.panelnote.good { background: #eef6f1; color: #245c47; }

.kindpick { grid-template-columns: repeat(3, 1fr); }
.kindpick input:checked + .k-good { border-color: var(--good); background: #eef6f1; }

.sevgrid .g1, .sevgrid .g2, .sevgrid .g3 { border-color: var(--line); }
.sevgrid input:checked + span.g1 { border-color: var(--g1); background: #f0f7f3; }
.sevgrid input:checked + span.g2 { border-color: var(--g2); background: #e9f4ee; }
.sevgrid input:checked + span.g3 { border-color: var(--g3); background: #e2f0e8; }

.sevtag.g1 { background: var(--g1); color: #12352a; }
.sevtag.g2 { background: var(--g2); }
.sevtag.g3 { background: var(--g3); }
.card.good-1, .card.good-2, .card.good-3 { background: #f2f8f4; }
.card.good-1 { border-left-color: var(--g1); }
.card.good-2 { border-left-color: var(--g2); }
.card.good-3 { border-left-color: var(--g3); }

.bar-track { background: linear-gradient(90deg, var(--surface-2) 0 calc(50% - 1px), var(--line) calc(50% - 1px) calc(50% + 1px), var(--surface-2) calc(50% + 1px) 100%); }
.bar-v.is-good { color: var(--good); }
.bar-v.is-bad { color: var(--danger); }

[data-kind="fixed"] .only-rating { display: none; }

/* ── the insights report (screen: hidden; print: the whole page) ─────────── */

#printHost { display: none; }

@media print {
  @page { margin: 16mm 14mm; }
  body.is-printing > *:not(#printHost) { display: none !important; }
  body.is-printing { overflow: visible; background: #fff; }
  #printHost { display: block; }
}

.report { color: #111; font: 400 11pt/1.5 var(--ui); }
.rhead { border-bottom: 2px solid #111; padding-bottom: 10px; margin-bottom: 18px; }
.rhead h1 { margin: 0; font: 700 22pt/1.1 var(--ui); letter-spacing: -.02em; }
.rsub { margin: 5px 0 0; font: 400 10pt/1.4 var(--mono); color: #555; }
.rwarn {
  margin: 12px 0 0; padding: 9px 11px; border: 1pt solid #999;
  font: 400 9pt/1.45 var(--ui); color: #333;
}
.rsec { margin: 0 0 20px; break-inside: avoid; }
.rsec h2 { margin: 0 0 8px; font: 700 13pt/1.2 var(--ui); }
.rnote { margin: 0 0 8px; font: 400 9.5pt/1.5 var(--ui); color: #444; }

.rstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rstat { border: 1pt solid #ccc; padding: 9px 11px; }
.rstat b { display: block; font: 700 17pt/1.1 var(--ui); }
.rstat span { font: 400 8.5pt/1.3 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: #666; }

.rt { width: 100%; border-collapse: collapse; font: 400 10pt/1.4 var(--ui); }
.rt th, .rt td { padding: 5px 7px; border-bottom: .5pt solid #bbb; text-align: left; }
.rt th { font: 700 8.5pt/1.3 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: #555; border-bottom: 1pt solid #333; }
.rt td:first-child, .rt th:first-child { width: 1%; white-space: nowrap; }

.rlegal { break-before: page; }
.rlegal dt { font: 700 10pt/1.4 var(--ui); margin-top: 9px; }
.rlegal dd { margin: 2px 0 0; font: 400 9.5pt/1.5 var(--ui); color: #333; }
.rmethod { margin: 14px 0 0; padding-top: 9px; border-top: .5pt solid #bbb; font: 400 8.5pt/1.5 var(--ui); color: #555; }

/* ── the chappal ────────────────────────────────────────────────────────── */

.chappal-svg { width: 100%; height: 100%; display: block; }
.ch-sole { fill: #6b4a2f; stroke: #3f2b1a; stroke-width: 3; }
.ch-strap { stroke: #c68a4a; stroke-width: 5; stroke-linecap: round; }

.chapparow { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.chappalbig {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; cursor: pointer;
  border: 1px solid #e3d3c2; border-radius: 999px;
  background: #fdf6ef; color: #7a4a22; font: 500 12.5px/1 var(--ui);
}
.chappalbig:hover { background: #fbeee1; }
.chappalbig .ch-ico {
  width: 13px; height: 19px; border-radius: 7px 7px 6px 6px;
  background: #6b4a2f; box-shadow: inset 0 -6px 0 -3px #c68a4a;
}
.chappalbig.is-hit { animation: hitshake .4s ease; }
@keyframes hitshake {
  0%,100% { transform: none; }
  25% { transform: translateX(-4px) rotate(-1.5deg); }
  60% { transform: translateX(4px) rotate(1.5deg); }
}

.mutebtn {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text-2);
}
.mutebtn:hover { background: var(--surface-2); }
.mutebtn .cross { display: none; }
.mutebtn.is-muted .wave { display: none; }
.mutebtn.is-muted .cross { display: block; }
.mutebtn.is-muted { color: var(--text-3); }

.chapnote { margin: 6px 0 0; font: 400 10.5px/1.4 var(--ui); color: var(--text-3); }

.rank .chappal {
  flex: none; display: flex; align-items: center; gap: 4px; margin-left: 6px;
  padding: 4px 8px 4px 5px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font: 500 11px/1 var(--mono); color: var(--text-2);
}
.rank { grid-template-columns: 26px minmax(0, 1fr) auto auto; }
.chappal .chappal-svg { width: 13px; height: 19px; }
.chappal:hover { background: #fdf6ef; border-color: #e3d3c2; }
.chappal:active { transform: scale(.92); }

.is-whacked { animation: whacked .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes whacked {
  0%,100% { transform: none; }
  20% { transform: translateX(-6px) rotate(-1deg); }
  45% { transform: translateX(5px) rotate(.8deg); }
  70% { transform: translateX(-3px); }
}

.chappal-fx {
  position: fixed; z-index: 40; pointer-events: none;
  transform: translate(-50%, -50%);
}
.chappal-fx .chappal-svg {
  width: 54px; height: 80px;
  animation: chappalthrow .55s cubic-bezier(.3, 1.4, .5, 1) forwards;
  transform-origin: 50% 90%;
}
@keyframes chappalthrow {
  0%   { opacity: 0; transform: translate(90px, -140px) rotate(-70deg) scale(.7); }
  45%  { opacity: 1; transform: translate(0, 0) rotate(8deg) scale(1.05); }
  70%  { transform: translate(-6px, 6px) rotate(-6deg) scale(1); }
  100% { opacity: 0; transform: translate(-40px, 70px) rotate(-40deg) scale(.85); }
}
.chappal-fx .thwack {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) rotate(-9deg);
  font: 700 22px/1 var(--ui); letter-spacing: .02em; color: #fff;
  -webkit-text-stroke: 3px var(--danger); paint-order: stroke;
  animation: thwackpop .6s ease-out forwards; animation-delay: .22s; opacity: 0;
}
@keyframes thwackpop {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(-9deg) scale(.4); }
  30%  { opacity: 1; transform: translate(-50%, -50%) rotate(-9deg) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -80%) rotate(-9deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .chappal-fx, .is-whacked, .chappalbig.is-hit { animation: none; }
}

/* ── the kiss: like, to the chappal's dislike ───────────────────────────── */

.kiss-svg { width: 100%; height: 100%; display: block; }
.ki-heart { fill: #e0567a; }

.reacts { display: flex; gap: 4px; align-items: center; margin-left: 6px; }
.rank { grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 8px; }

.kissbtn {
  flex: none; display: flex; align-items: center; gap: 4px;
  padding: 4px 8px 4px 5px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font: 500 11px/1 var(--mono); color: var(--text-2);
}
.kissbtn .kiss-svg { width: 14px; height: 14px; }
.kissbtn:hover { background: #fdeff3; border-color: #f2cfda; }
.kissbtn:active { transform: scale(.92); }
.rank .chappal { margin-left: 0; }

.kissbig {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 16px; cursor: pointer;
  border: 1px solid #f2cfda; border-radius: 999px;
  background: #fdeff3; color: #a33356; font: 500 12.5px/1 var(--ui);
}
.kissbig:hover { background: #fbe4eb; }
.kissbig .ki-ico {
  width: 13px; height: 12px; background: #e0567a;
  clip-path: path('M6.5 12S0 8 0 4.4A3.2 3.2 0 0 1 6.5 3 3.2 3.2 0 0 1 13 4.4C13 8 6.5 12 6.5 12Z');
}
.kissbig.is-hit { animation: hitshake .4s ease; }
.chappalbig { flex: 1; }

.is-kissed { animation: kissed .5s ease; }
@keyframes kissed {
  0%,100% { transform: none; }
  35% { transform: scale(1.025); }
}

.kiss-fx { position: fixed; z-index: 40; pointer-events: none; transform: translate(-50%, -50%); }
.kiss-fx .kiss-svg {
  position: absolute; width: 26px; height: 26px; left: 0; top: 0;
  animation: floatup 1.15s cubic-bezier(.25, .8, .4, 1) forwards;
}
.kiss-fx .kiss-svg:nth-child(1) { animation-delay: 0ms; --dx: -34px; }
.kiss-fx .kiss-svg:nth-child(2) { animation-delay: 110ms; --dx: 8px; width: 20px; height: 20px; }
.kiss-fx .kiss-svg:nth-child(3) { animation-delay: 220ms; --dx: 34px; width: 15px; height: 15px; }
@keyframes floatup {
  0%   { opacity: 0; transform: translate(-50%, -20%) scale(.4) rotate(-8deg); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -180%) scale(1) rotate(10deg); }
}
.kiss-fx .muah {
  position: absolute; left: 50%; top: -6px; transform: translate(-50%, -50%) rotate(-5deg);
  font: 700 19px/1 var(--ui); color: #fff;
  -webkit-text-stroke: 3px #e0567a; paint-order: stroke;
  animation: thwackpop .8s ease-out forwards; animation-delay: .3s; opacity: 0;
}

@media (prefers-reduced-motion: reduce) { .kiss-fx, .is-kissed, .kissbig.is-hit { animation: none; } }

/* ── trust surface ──────────────────────────────────────────────────────── */

.sheetbody { padding: 22px clamp(16px, 4vw, 28px) 24px; }
.sheet.mini { width: min(420px, 92vw); }
.sheet .hint { display: block; margin: 5px 0 0; font: 400 11px/1.5 var(--ui); color: var(--text-3); }
.lede.small { font-size: 11.5px; color: var(--text-3); }

.fp { margin: 0; font: 500 20px/1 var(--mono); letter-spacing: .06em; }
#idCode { font: 400 11px/1.5 var(--mono); word-break: break-all; }
.guardline { margin: 0 0 14px; padding: 9px 12px; border-radius: 8px; background: #eef6f1; color: #245c47; font: 400 12.5px/1.5 var(--ui); }
.guardline.is-bad { background: #fdf1ef; color: var(--danger); }
.btn.danger-btn { background: var(--surface); border: 1px solid #f0cdc6; color: var(--danger); }
.btn.danger-btn:hover { background: #fdf1ef; }

.rulelist { margin: 0 0 16px; padding-left: 20px; }
.rulelist li { margin-bottom: 9px; font: 400 13px/1.55 var(--ui); color: var(--text-2); }
.rulelist b { color: var(--text); }

.reasons { display: grid; gap: 6px; margin-bottom: 16px; }
.reason {
  text-align: left; padding: 11px 13px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  font: 400 13px/1.3 var(--ui); color: var(--text);
}
.reason:hover { background: var(--surface-2); border-color: var(--text-3); }

.cardacts { display: flex; gap: 14px; margin: 11px 0 0; padding-top: 9px; border-top: 1px solid var(--line); }
.cardacts .lnk { font-size: 10.5px; }

.prov {
  display: inline-block; margin-left: 6px; padding: 1px 7px; vertical-align: 1px;
  border-radius: 999px; background: var(--surface-2); color: var(--text-3);
  font: 500 9.5px/1.5 var(--ui);
}

.toast {
  position: fixed; z-index: 60; left: 50%; bottom: 22px; transform: translateX(-50%);
  max-width: min(460px, 92vw); padding: 12px 18px; border-radius: 999px;
  background: var(--text); color: #fff; box-shadow: var(--sh-2);
  font: 400 13px/1.4 var(--ui); text-align: center;
  animation: toastin .2s ease-out;
}
.toast.is-out { opacity: 0; transition: opacity .45s ease; }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 820px) { .toast { bottom: auto; top: 76px; } }

/* ── native shell ───────────────────────────────────────────────────────── */

/* The status bar and home indicator draw over the web view, so the floating
   chrome has to sit inside the safe area or it lands under them. */
.is-native .panel-l { top: calc(12px + env(safe-area-inset-top)); }
.is-native .panel-r { top: calc(12px + env(safe-area-inset-top)); }
.is-native .mapctl { bottom: calc(26px + env(safe-area-inset-bottom)); }
.is-native .fab { bottom: calc(26px + env(safe-area-inset-bottom)); }

@media (max-width: 820px) {
  .is-native .searchcard { top: calc(10px + env(safe-area-inset-top)); }
  .is-native .railfoot { padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
  .is-native .mapctl,
  .is-native .fab,
  .is-native .legendbar { bottom: calc(var(--sheet-h) + 12px); }
}

/* No text selection or callout on chrome inside the app shell; it reads as web
   the moment a long press pops a "Copy" bubble over a button. */
.is-native .pill, .is-native .ctl, .is-native .fab, .is-native .tab,
.is-native .rk, .is-native .bar, .is-native .chappal, .is-native .kissbtn {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.is-native { -webkit-tap-highlight-color: transparent; }

.filteracts { display: flex; gap: 10px; align-items: center; }
.filteracts button {
  border: 0; background: none; cursor: pointer; color: var(--accent);
  font: 700 11px/1 var(--ui); text-transform: uppercase; letter-spacing: .05em;
}

/* ── the transparency ledger ────────────────────────────────────────────── */

.binhead { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 12px; }
.binstat { padding: 10px 12px; border-radius: 8px; background: var(--surface-2); text-align: center; }
.binstat b { display: block; font: 700 20px/1.1 var(--ui); }
.binstat span { font: 500 9.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.binstat.alarm b { color: var(--danger); }

.binlist { list-style: none; margin: 0; padding: 0; }
.binlist li {
  display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: baseline;
  padding: 9px 8px; border-bottom: 1px solid var(--line);
}
.binlist li:last-child { border-bottom: 0; }
.binlist b { font: 700 15px/1 var(--ui); text-align: right; color: var(--text-2); }
.binlist li.is-top b { color: var(--danger); }
.binlist span { font: 400 13px/1.45 var(--ui); color: var(--text-2); }
.binfoot { margin: 12px 8px 0; font: 400 11.5px/1.5 var(--ui); color: var(--text-3); }

/* ── escalation notice in the form ──────────────────────────────────────── */

.escalate { margin: 0 0 18px; padding: 13px 15px; border-radius: 10px; background: #fdf1ef; border: 1px solid #f3d4ce; }
.escalate p { margin: 0 0 7px; font: 700 11px/1 var(--ui); letter-spacing: .05em; text-transform: uppercase; color: var(--danger); }
.escalate ul { margin: 0; padding-left: 17px; }
.escalate li { font: 400 12.5px/1.6 var(--ui); color: var(--ink2, #4a4f57); margin-bottom: 5px; }
.escalate b { color: var(--danger); }

a.lnk { text-decoration: none; }

/* ── the published boundary ─────────────────────────────────────────────── */

.oos { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 9px; }
.oos summary {
  cursor: pointer; list-style: none;
  font: 500 11.5px/1.4 var(--ui); color: var(--accent);
}
.oos summary::-webkit-details-marker { display: none; }
.oos summary::before { content: '＋ '; font-weight: 700; }
.oos[open] summary::before { content: '－ '; }
.oos ul { margin: 9px 0 0; padding-left: 16px; }
.oos li { margin-bottom: 7px; font: 400 12px/1.5 var(--ui); color: var(--text-3); }
.oos li b { display: block; color: var(--text-2); font-weight: 500; }

.oos-why { margin: 10px 0 4px; font: 500 11.5px/1.4 var(--ui); color: var(--danger); }
.oos-why-list { margin: 0; padding-left: 17px; }
.oos-why-list li { font: 400 12px/1.55 var(--ui); color: var(--text-2); }

.binoos { margin: 14px 8px 0; border-top: 1px solid var(--line); }

/* ── beta banner ────────────────────────────────────────────────────────── */

.betabar {
  position: absolute; left: 50%; transform: translateX(-50%); top: 12px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  max-width: min(680px, calc(100vw - 800px));
  padding: 9px 10px 9px 16px; border-radius: 999px;
  background: var(--text); color: #fff; box-shadow: var(--sh-2);
  font: 400 12.5px/1.4 var(--ui);
}
.betaright { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.betabar a { color: #fff; font-weight: 500; }
.betabar code { font: 400 10.5px/1 var(--mono); opacity: .6; }
.betabar button {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff;
  font-size: 15px; line-height: 1; cursor: pointer;
}
.betabar button:hover { background: rgba(255,255,255,.28); }

@media (max-width: 1180px) { .betabar { max-width: calc(100vw - 460px); } }
@media (max-width: 820px) {
  .betabar { top: auto; bottom: calc(var(--sheet-h) + 62px); left: 10px; right: 10px; transform: none; max-width: none; }
}

/* Territories too small to draw faithfully get a marker so they can still be
   seen and hovered. The circle inherits the group's fill, so it is coloured by
   the same climate ramp as every other territory. */
.st .speck { stroke: var(--text); stroke-width: calc(.05 / var(--k, 1)); }
.st.is-speck:hover .speck, .st.is-speck:focus .speck { stroke-width: calc(.12 / var(--k, 1)); }
.st > path { pointer-events: all; }

/* ── the complaint log ──────────────────────────────────────────────────── */

.logcard { border-left-color: var(--text-3); background: var(--surface-2); }
.logcard.is-published { border-left-color: var(--good); }
.logcard.is-held { border-left-color: var(--s1); }
.logcard.is-removed { border-left-color: var(--danger); }
.logcard header { justify-content: space-between; }
.ref {
  font: 500 11px/1.4 var(--mono); letter-spacing: .04em;
  padding: 2px 7px; border-radius: 6px; background: var(--surface); color: var(--text-2);
  border: 1px solid var(--line); white-space: nowrap;
}
.logstate { margin: 8px 0 0; font: 400 12.5px/1.5 var(--ui); color: var(--text-2); }
.logreply { margin: 8px 0 0; font: 500 12px/1.5 var(--ui); color: var(--accent); }

.timeline { list-style: none; margin: 10px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--line); }
.timeline li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.timeline b { font: 500 12px/1.5 var(--ui); color: var(--text); }
.timeline span { font: 400 11px/1.5 var(--mono); color: var(--text-3); }

/* Public reaction counts, shown wherever a rating is shown. */
.tip-react { font: 500 11.5px/1.5 var(--ui); color: var(--text-2); }
.tip-react i { font-style: normal; font-weight: 700; }
.tip-react .ch { color: #7a4a22; }
.tip-react .ki { color: #a33356; }
.kissbtn b, .rank .chappal b { min-width: 1ch; text-align: right; }

/* ═══════════════════════════════════════════════════════════════════════════
   KOREAN RESTYLE — MOBILE FIRST

   The reference points are Korean consumer apps, not Western dashboards: a cool
   blue-grey ground, white cards with wide soft shadows and no borders, heavily
   rounded everything, filled inputs rather than outlined ones, and a single
   vivid blue reserved for actions. The memorable move is scale — ratings are
   set enormous in a Korean display face while all the chrome around them stays
   deliberately quiet.

   This is a phone app first. Every target is thumb-sized, the sheet is the
   primary surface, and the desktop layout is the adaptation.
   ═══════════════════════════════════════════════════════════════════════════ */

body { background: var(--ground); letter-spacing: -0.01em; }
.grain { display: none; }              /* the riso texture belonged to the old look */

/* ── floating cards ─────────────────────────────────────────────────────── */

.searchcard, .listcard, .derbycard, .ctlgroup, .ctl.solo, .tip, .sheet, .consent {
  border: 0;
  border-radius: var(--r);
  box-shadow: var(--sh-1);
}
.derbycard { padding: 20px 22px 22px; }

/* ── search ─────────────────────────────────────────────────────────────── */

.searchrow { padding: 6px 8px 6px 16px; }
#searchInput { font: 400 15.5px/1 var(--ui); padding: 15px 4px; }
.logo { color: var(--danger); }
.iconbtn { width: 44px; height: 44px; border-radius: 14px; color: var(--text-2); }
.iconbtn:hover { background: var(--surface-2); }
.iconbtn:active { transform: scale(.9); }

.pills { padding: 0 12px 12px; gap: 7px; }
.pill {
  border: 0; padding: 10px 16px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-2);
  font: 600 12.5px/1.4 var(--ui);
  transition: transform .16s var(--spring), background .16s ease, color .16s ease;
}
.pill:hover { background: #e8ebee; }
.pill:active { transform: scale(.94); }
.pill.is-on { background: var(--text); border: 0; color: #fff; }

/* ── results card header ────────────────────────────────────────────────── */

.cardhead { padding: 20px 20px 0; }
.cardhead h1 { font: 400 30px/1 var(--display); letter-spacing: 0; color: var(--text); }
.sub { margin-top: 7px; font: 400 12px/1.4 var(--ui); color: var(--text-3); }
.modenote { margin: 4px 20px 14px; font: 400 11px/1.4 var(--ui); color: var(--text-3); }
.natline { margin: 14px 20px 0; font: 400 12.5px/1.5 var(--ui); color: var(--text-2); }
.natline b { font-weight: 700; }

.score { padding: 10px 14px; border-radius: var(--r-sm); background: #fff1f2; }
.score b { font: 400 26px/1 var(--display); color: var(--danger); }
.score span { font: 600 9px/1.2 var(--ui); letter-spacing: .02em; color: #d1495b; text-transform: none; }

.filterbar {
  margin: 0 16px 12px; padding: 12px 12px 12px 15px;
  border-radius: var(--r-sm); background: var(--accent-w);
  font: 500 12.5px/1.3 var(--ui);
}
.filteracts button { font: 700 11.5px/1 var(--ui); letter-spacing: 0; text-transform: none; }

/* ── ranked rows: the rating is the hero ────────────────────────────────── */

.panel { padding: 6px 10px 10px; }

.rank {
  border-bottom: 0; margin-bottom: 4px; padding: 14px 12px;
  border-radius: var(--r-sm);
  transition: transform .18s var(--spring), background .16s ease;
}
.rank:hover { background: var(--surface-2); }
.rank:active { transform: scale(.985); }
.rank.is-sel { background: var(--accent-w); box-shadow: none; }

.rk { font: 400 17px/1 var(--display); color: var(--text-3); }
.ranks:not(.redeemed) .rank:nth-child(-n+3) .rk { color: var(--danger); }
.rmain b { font: 600 14.5px/1.35 var(--ui); }
.rmain small { font: 400 11.5px/1.45 var(--ui); color: var(--text-3); }

.rnum em { font: 400 26px/1 var(--display); letter-spacing: -.01em; }
.rnum small { font: 500 10px/1.3 var(--ui); color: var(--text-3); letter-spacing: 0; }
.stars i { width: 7px; height: 7px; border-radius: 999px; }
.bars { height: 4px; border-radius: 999px; }

.badge, .prov { border-radius: 999px; font: 600 10px/1.5 var(--ui); padding: 2px 9px; }

.reacts { gap: 6px; }
.kissbtn, .rank .chappal {
  border: 0; background: var(--surface-2); border-radius: 999px;
  padding: 8px 12px 8px 9px; font: 600 11.5px/1 var(--ui); color: var(--text-2);
  transition: transform .16s var(--spring), background .16s ease;
}
.kissbtn:hover { background: #ffeef2; }
.rank .chappal:hover { background: #fdf0e6; }
.kissbtn:active, .rank .chappal:active { transform: scale(.88); }

/* ── the derby ──────────────────────────────────────────────────────────── */

.derbyhead h2 { font: 400 19px/1.1 var(--display); }
.derbynote { font: 400 12px/1.5 var(--ui); color: var(--text-3); }
.bar { border-radius: var(--r-sm); }
.bar-lab b { font: 600 13px/1.3 var(--ui); }
.bar-lab i { font: 400 10.5px/1 var(--ui); }
.bar-track { height: 8px; border-radius: 999px; }
.bar-fill { border-radius: 999px; }
.bar-v { font: 400 17px/1 var(--display); }
.bar-rk { font: 400 13px/1 var(--display); }

.chappalbig, .kissbig {
  border: 0; border-radius: 999px; padding: 13px 18px;
  font: 600 12.5px/1 var(--ui);
  transition: transform .16s var(--spring), filter .16s ease;
}
.chappalbig { background: #fdf0e6; color: #a4551b; }
.kissbig { background: #ffeef2; color: #c2255c; }
.chappalbig:active, .kissbig:active { transform: scale(.94); }
.mutebtn { border: 0; background: var(--surface-2); border-radius: 999px; width: 38px; height: 38px; }

.candlehead b { font: 400 16px/1.1 var(--display); }
.delta { font: 600 11.5px/1 var(--ui); }

/* ── map chrome ─────────────────────────────────────────────────────────── */

.ctl { width: 46px; height: 46px; }
.ctlgroup, .ctl.solo { border-radius: var(--r-sm); }
.ctl:active { transform: scale(.88); }

.fab {
  padding: 16px 24px 16px 20px; border-radius: 999px;
  background: var(--danger); box-shadow: 0 6px 20px rgba(240, 68, 82, .34);
  font: 700 14px/1 var(--ui);
  transition: transform .18s var(--spring), box-shadow .18s ease;
}
.fab:hover { filter: none; box-shadow: 0 10px 28px rgba(240, 68, 82, .42); }
.fab:active { transform: translateX(-50%) scale(.95); }

.legend { border-radius: 999px; padding: 7px 13px; box-shadow: var(--sh-1); background: #fff; }
.legend i { border-radius: 999px; height: 8px; width: 22px; }
.legend span { font: 600 8.5px/1 var(--ui); letter-spacing: .02em; color: var(--text-3); text-transform: none; }
.mapfoot { font: 400 11px/1.5 var(--ui); }

.tip { padding: 15px 17px; border-radius: var(--r-sm); }
.tip b { font: 400 19px/1.15 var(--display); text-transform: none; }
.tip-kind, .tip-rank { font: 600 10px/1 var(--ui); letter-spacing: .02em; text-transform: none; }
.tip-big em { font: 400 30px/1 var(--display); }
.tip-row, .tip-none, .tip-react { font: 400 12px/1.5 var(--ui); }

/* ── the sheet ──────────────────────────────────────────────────────────── */

.sheet { border-radius: 26px; }
.sheet h2 { font: 400 26px/1.15 var(--display); letter-spacing: 0; }
.sheet .lede { font: 400 13px/1.6 var(--ui); }
.sheet-x button { border-radius: 999px; }

.kindpick span, .sevgrid span { border-radius: var(--r-sm); border-width: 2px; }
.kindpick b { font: 600 14.5px/1.2 var(--ui); }
.sevgrid b { font: 400 24px/1 var(--display); }

.fld > span, .fld legend {
  font: 600 12px/1.3 var(--ui); letter-spacing: 0; text-transform: none; color: var(--text-2);
}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=search]), select, textarea {
  border: 0; background: var(--surface-2); border-radius: var(--r-sm);
  padding: 15px; font: 400 15.5px/1.4 var(--ui);
}
input:focus, select:focus, textarea:focus { background: #fff; box-shadow: 0 0 0 2px var(--accent); }
.chip span { border: 0; background: var(--surface-2); border-radius: 999px; padding: 10px 15px; font: 500 12.5px/1.3 var(--ui); }
.chip input:checked + span { background: var(--accent); color: #fff; }

.btn { border-radius: var(--r-sm); padding: 15px 22px; font: 700 14.5px/1 var(--ui); border: 0; }
.btn.primary { background: var(--danger); box-shadow: 0 4px 14px rgba(240, 68, 82, .3); }
.btn.ghost { background: var(--surface-2); border: 0; color: var(--text-2); }
.btn:active { transform: scale(.96); }

.guard, .escalate { border: 0; border-radius: var(--r-sm); background: #fff1f2; }
.guard p, .escalate p { font: 700 12px/1.3 var(--ui); letter-spacing: 0; text-transform: none; }
.oos summary { font: 600 12px/1.4 var(--ui); }

/* ── log, ledger, misc ──────────────────────────────────────────────────── */

.card { border-radius: var(--r-sm); border-left-width: 4px; }
.sevtag { border-radius: 999px; font: 600 10.5px/1.5 var(--ui); padding: 3px 10px; }
.tr span { border: 0; background: var(--surface-2); border-radius: 999px; font: 500 10.5px/1.5 var(--ui); }
.q span { font: 600 10px/1.3 var(--ui); letter-spacing: 0; text-transform: none; }
.ref { border: 0; background: var(--surface-2); border-radius: 999px; font: 600 11px/1.4 var(--ui); letter-spacing: 0; }
.binstat { border-radius: var(--r-sm); padding: 14px; }
.binstat b { font: 400 24px/1.05 var(--display); }
.binstat span { font: 600 9.5px/1.3 var(--ui); letter-spacing: 0; text-transform: none; }
.binlist b { font: 400 16px/1 var(--display); }
.panelnote { border-radius: var(--r-sm); border-left: 0; background: var(--accent-w); color: #1b64da; }
.panelnote.good { background: #e6f9f2; color: #0b7a5b; }
.toast { border-radius: 999px; padding: 14px 22px; font: 500 13.5px/1.4 var(--ui); }
.empty { font: 400 13.5px/1.7 var(--ui); }
.lnk { font: 500 12px/1 var(--ui); }
.railfoot { border-top: 1px solid var(--line); }
.betabar { border-radius: 999px; font: 500 12.5px/1.4 var(--ui); }

/* A soft halo, not a hard outline. */
:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(49, 130, 246, .38); }
.st:focus-visible, .pin:focus-visible { box-shadow: none; outline: none; }

/* ═══ the phone, which is the point ═══════════════════════════════════════ */

@media (max-width: 820px) {
  /* The sheet is the app. Give it a proper lip, a real grab handle, and let it
     sit over the map the way a native sheet does. */
  .listcard {
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -6px 28px rgba(25, 31, 40, .13);
  }
  .grabber { height: 30px; }
  .grabber::before { width: 44px; height: 5px; background: #d5dae0; top: 11px; }

  .searchcard { border-radius: 18px; box-shadow: var(--sh-2); }
  .cardhead { padding: 12px 18px 0; }
  .cardhead h1 { font-size: 25px; }
  .natline { margin: 10px 18px 0; }
  .modenote { margin: 3px 18px 10px; }

  /* Thumb-sized everything. */
  .pill { padding: 11px 16px; font-size: 13px; }
  .rank { padding: 15px 12px; }
  .ctl { width: 48px; height: 48px; }
  .fab { padding: 15px 22px; font-size: 14px; box-shadow: 0 6px 22px rgba(240, 68, 82, .4); }
  .btn { width: 100%; padding: 17px 22px; font-size: 15px; }
  .actions { flex-direction: column-reverse; gap: 8px; }
  .kissbtn, .rank .chappal { padding: 9px 13px 9px 10px; }

  /* A full-height sheet on a phone, not a floating dialog. */
  .sheet {
    width: 100vw; max-width: none; max-height: 94vh;
    margin: auto 0 0; border-radius: 26px 26px 0 0;
    box-shadow: 0 -8px 34px rgba(25, 31, 40, .22);
  }
  .sheet form:not(.sheet-x) { padding: 22px 18px calc(24px + env(safe-area-inset-bottom)); }
  .sheet h2 { font-size: 24px; }

  .legend { padding: 6px 11px; }
  .legend span:empty { display: none; }
}

/* ── phone chrome: give the floating pieces their own lanes ──────────────── */
/* The legend, the action button and the beta banner were all pinned to the
   same bottom offset and landed on top of each other. Each gets its own band. */

@media (max-width: 820px) {
  .legendbar {
    bottom: calc(var(--sheet-h) + 74px);
    left: 10px; right: 10px;
    justify-content: flex-start;
  }
  .fab { bottom: calc(var(--sheet-h) + 14px); left: 10px; }
  .mapctl { bottom: calc(var(--sheet-h) + 14px); right: 10px; }

  /* The banner belongs at the top, under the search card — not over the map
     furniture at the bottom. */
  .betabar {
    top: auto; bottom: auto;
    position: fixed; left: 10px; right: 10px;
    top: calc(112px + env(safe-area-inset-top));
    max-width: none; transform: none;
  }
}

/* The severity strip is a distribution, not a rule under the text. Cap it so it
   reads as a small bar chart rather than an underline. */
.bars { max-width: 86px; }

@media (max-width: 820px) {
  /* Clear the search card properly: it is the icon row plus the pill row. */
  .betabar { top: calc(130px + env(safe-area-inset-top)); }

  /* Let the map breathe. At 58vh the sheet left a sliver of map, which is the
     wrong balance for an app whose whole point is the map. */
  :root { --sheet-h: 46vh; }
}

/* The three report kinds need a column each only when there is room. This has
   to come after the good-pole rules, which set three columns unconditionally. */
@media (max-width: 620px) {
  .kindpick { grid-template-columns: 1fr; }
  .kindpick span { display: flex; align-items: baseline; gap: 8px; padding: 13px 14px; }
  .kindpick b { flex: none; }
  .kindpick small { margin-top: 0; }
  .row, .sevgrid { grid-template-columns: 1fr; }
}

/* On wide screens the action button and the legend were both pinned near the
   bottom of the map and overlapped. The button takes the upper band. */
@media (min-width: 821px) {
  .legendbar { bottom: 14px; }
  .fab { bottom: 66px; }
}