/* ============ tokens ============ */
:root{
  --bg:#e9ece7; --panel:#f6f7f4; --panel2:#eef1ec; --ink:#1d2420; --muted:#5f6b64;
  --line:#c9d0c8; --line-soft:#dde2dc;
  --accent:#0f766e; --accent-ink:#ffffff;
  --plabel:#75817a;
  --prime:#1a9e5c; --good:#2f6fbf; --marginal:#c07f1f; --avoid:#c23b34;
  --look:#178a4e; --watch:#b27a1a; --oobb:#c23b34;
  --card-shadow:0 10px 30px rgba(20,30,25,.18);
  --chip:#e3e8e2;
}
:root[data-theme="dark"]{
  --bg:#0d1211; --panel:#151c19; --panel2:#1a231f; --ink:#e4eae5; --muted:#93a099;
  --line:#2a352e; --line-soft:#212b25;
  --accent:#45c4b4; --accent-ink:#08110f;
  --plabel:#6d7a72;
  --prime:#2fbf71; --good:#4b8fe0; --marginal:#dfa03f; --avoid:#e0564e;
  --look:#2fbf71; --watch:#dfa03f; --oobb:#e0564e;
  --card-shadow:0 12px 34px rgba(0,0,0,.55);
  --chip:#232d27;
}
/* ============ base ============ */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); overflow:hidden;
}
.mono{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace}
#map{position:fixed;inset:0;background:var(--bg)}
.maplibregl-map{font:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
/* maplibre chrome, theme-aware */
.maplibregl-ctrl-group{background:var(--panel)!important;border:1px solid var(--line)!important;box-shadow:var(--card-shadow)!important}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--line-soft)!important}
.maplibregl-ctrl-group button{width:32px;height:32px}
.maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:none}
:root[data-theme="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1) hue-rotate(180deg) brightness(1.1)}
.maplibregl-ctrl-attrib{background:color-mix(in srgb,var(--panel) 82%,transparent)!important;color:var(--muted)!important;
  border-radius:4px 0 0 0;font-size:10px}
.maplibregl-ctrl-attrib a{color:var(--muted)!important}
/* ============ top bar ============ */
#topbar{
  position:fixed;top:0;left:0;right:0;z-index:1200;display:flex;align-items:center;gap:14px;
  padding:10px 16px;pointer-events:none;
}
#topbar>*{pointer-events:auto}
.brand{
  display:flex;align-items:baseline;gap:10px;background:var(--panel);border:1px solid var(--line);
  padding:8px 14px;border-radius:4px;box-shadow:var(--card-shadow);
}
.brand b{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:13px;letter-spacing:.18em;text-transform:uppercase}
.brand span{font-size:11px;color:var(--muted);letter-spacing:.06em}
#crumb{
  background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:8px 12px;
  font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--muted);
  box-shadow:var(--card-shadow);display:flex;gap:8px;align-items:center;
}
#crumb .cur{color:var(--ink)}
#crumb button{color:var(--accent);font-size:12px}
.editbadge{
  background:var(--watch);color:#fff;font-family:ui-monospace,Menlo,monospace;font-size:10px;font-weight:700;
  letter-spacing:.14em;padding:6px 10px;border-radius:4px;box-shadow:var(--card-shadow);
}
#themeBtn{
  margin-left:auto;background:var(--panel);border:1px solid var(--line);border-radius:4px;
  width:34px;height:34px;box-shadow:var(--card-shadow);font-size:15px;line-height:1;
}
/* ============ left rail ============ */
#rail{
  position:fixed;top:60px;left:16px;bottom:16px;width:322px;z-index:1100;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:6px;box-shadow:var(--card-shadow);
  transition:transform .25s ease;
}
#rail.hidden{transform:translateX(-360px)}
#railTab{
  position:fixed;top:64px;left:0;z-index:1099;background:var(--panel);border:1px solid var(--line);
  border-left:none;border-radius:0 4px 4px 0;padding:10px 6px;font-family:ui-monospace,Menlo,monospace;
  font-size:11px;letter-spacing:.14em;writing-mode:vertical-rl;color:var(--muted);
}
#railHead{padding:14px 16px 10px;border-bottom:1px solid var(--line-soft)}
#railHead h1{margin:0;font-size:15px;font-weight:650;letter-spacing:.01em;text-wrap:balance}
#railHead .sub{font-size:11.5px;color:var(--muted);margin-top:2px}
#railHead .hidebtn{float:right;color:var(--muted);font-size:16px;margin:-2px -4px 0 0}
#railBody{flex:1;overflow-y:auto;overscroll-behavior:contain}
.sect{padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.sect h2{
  margin:0 0 8px;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.grouphd{
  padding:12px 16px 4px;font-family:ui-monospace,Menlo,monospace;font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
/* stats strip */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:var(--panel2);border:1px solid var(--line-soft);border-radius:4px;padding:8px 10px}
.stat .v{font-family:ui-monospace,Menlo,monospace;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.stat .k{font-size:10px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:1px}
/* chips */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  background:var(--chip);border:1px solid var(--line-soft);border-radius:999px;
  padding:4px 11px;font-size:12px;color:var(--muted);
}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.toggles{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.toggles label{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);padding:3px 0;cursor:pointer}
.toggles input{accent-color:var(--accent)}
select{
  width:100%;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:4px;
  padding:7px 9px;font:inherit;font-size:12.5px;
}
.lensnote{font-size:11.5px;color:var(--muted);margin-top:7px;line-height:1.5}
.lensnote b{color:var(--ink)}
/* market cards (regions view) */
.mcard{
  display:block;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--line);
  border-radius:6px;padding:12px 14px;margin:0 16px 10px;width:calc(100% - 32px);transition:border-color .15s;
}
.mcard:hover{border-color:var(--accent)}
.mcard .nm{font-weight:650;font-size:14px}
.mcard .row{display:flex;gap:14px;margin-top:8px}
.mcard .row .v{font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.mcard .row .k{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.mcard .zline{display:flex;gap:4px;margin-top:10px;height:5px;border-radius:3px;overflow:hidden}
.mcard .zline i{display:block;height:100%}
/* comp / subject list rows */
.crow{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:7px 16px;border-bottom:1px solid var(--line-soft);transition:background .12s;
}
.crow:hover{background:var(--panel2)}
.crow.sel{background:var(--panel2);box-shadow:inset 3px 0 0 var(--accent)}
.crow.dim{opacity:.32}
.crow .dot{width:11px;height:11px;border-radius:50%;flex:none;border:1.5px solid var(--panel)}
.crow .t{flex:1;min-width:0;display:flex;flex-direction:column}
.crow .t .n{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .t .m{display:block;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .rv{flex:none;margin-left:4px;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums}
.subrow .dot{border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
/* ============ detail card ============ */
#card{
  position:fixed;top:60px;right:16px;z-index:1150;width:348px;max-height:calc(100% - 86px);
  overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:6px;
  box-shadow:var(--card-shadow);display:none;
}
#card.open{display:block;animation:cardin .18s ease}
@keyframes cardin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#card .close{position:absolute;top:8px;right:10px;color:var(--muted);font-size:18px;z-index:2}
.cardhead{padding:14px 16px 10px;border-bottom:1px solid var(--line-soft)}
.cardhead .eyebrow{
  font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.cardhead h3{margin:0;font-size:15px;line-height:1.3;font-weight:650;text-wrap:balance;padding-right:16px}
.bigrev{font-family:ui-monospace,Menlo,monospace;font-size:24px;font-weight:700;margin-top:6px;font-variant-numeric:tabular-nums}
.bigrev small{font-size:11px;color:var(--muted);font-weight:400;letter-spacing:.05em}
.verdict{display:inline-block;padding:3px 10px;border-radius:3px;font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:700;letter-spacing:.1em;color:#fff}
.verdict.LOOK{background:var(--look)}
.verdict.WATCH{background:var(--watch)}
.verdict.OOBB{background:var(--oobb)}
.tierchip{display:inline-block;padding:2px 8px;border-radius:3px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.grid2{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line-soft);border-bottom:1px solid var(--line-soft)}
.grid2 .cell{background:var(--panel);padding:9px 12px}
.grid2 .cell .v{font-family:ui-monospace,Menlo,monospace;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.grid2 .cell .k{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:1px}
.cardsect{padding:11px 16px;border-bottom:1px solid var(--line-soft)}
.cardsect:last-child{border-bottom:none}
.cardsect .lbl{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.cardsect p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink)}
.drivers{display:flex;flex-wrap:wrap;gap:5px}
.drv{background:var(--chip);border-radius:3px;padding:3px 8px;font-size:11px;color:var(--ink)}
.linkrow{display:flex;gap:8px;padding:12px 16px}
.btn{
  flex:1;text-align:center;padding:9px 10px;border-radius:4px;font-size:12.5px;font-weight:600;
  background:var(--accent);color:var(--accent-ink)!important;
}
.btn:hover{text-decoration:none;filter:brightness(1.07)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)!important}
.flagline{font-size:11.5px;color:var(--watch);line-height:1.5}
/* ============ legend ============ */
#legend{
  position:fixed;left:16px;bottom:16px;z-index:1100;background:var(--panel);border:1px solid var(--line);
  border-radius:6px;box-shadow:var(--card-shadow);font-size:11.5px;
}
#rail:not(.hidden) ~ #legend{left:354px}
#legend .lhead{display:flex;align-items:center;gap:8px;padding:8px 12px;color:var(--muted);width:100%;text-align:left;
  font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase}
#legend .lbody{display:none;padding:2px 12px 10px;line-height:1.9;white-space:nowrap}
#legend.open .lbody{display:block}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:7px;vertical-align:-1px}
.swd{border-radius:50%}
.swx{transform:rotate(45deg);border-radius:1px;width:8px;height:8px}
.swp{border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:1.5px solid var(--panel)}
.ramp{display:inline-block;width:64px;height:8px;border-radius:4px;vertical-align:-1px;margin-right:7px;
  background:linear-gradient(90deg,#c9973f,#ff6a2a)}
#counts{color:var(--muted);font-size:10.5px;margin-top:4px}
/* ============ map markers (HTML — translate with the map, never balloon) ============ */
.cdot{border-radius:50%;border:1.6px solid var(--panel);box-shadow:0 1px 4px rgba(0,0,0,.35);
  cursor:pointer;width:100%;height:100%}
.cm-comp{transition:opacity .2s}
.cm-comp.dim{opacity:.14;pointer-events:none}
.cm-comp.hidden{display:none}
.anch-wrap{position:relative;cursor:pointer}
.anch{width:8px;height:8px;background:var(--plabel);transform:rotate(45deg);border-radius:1px;opacity:.8}
.anch-l{
  position:absolute;left:14px;top:-4px;white-space:nowrap;font-family:ui-monospace,Menlo,monospace;
  font-size:10px;color:var(--plabel);text-shadow:0 0 4px var(--bg),0 0 4px var(--bg);display:none;
}
#map.lz-anch .anch-l{display:block}
/* subject = teardrop pin whose TIP is the geo anchor (anchor:'bottom' in JS) — a distinct
   silhouette from the comp dot, and pixel-accurate at every zoom (the tip stays on the
   coordinate; no center-offset drift). */
.subjpin{cursor:pointer;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.subjpin svg{display:block}
.subjpin .subj-body{stroke:var(--panel);stroke-width:2.5;vector-effect:non-scaling-stroke}
.subjpin .subj-dot{fill:var(--panel)}
.subjpin.LOOK .subj-body{fill:var(--look)}
.subjpin.WATCH .subj-body{fill:var(--watch)}
.subjpin.OOBB .subj-body{fill:var(--oobb)}
/* region market marker */
.mkmark{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.mkmark .pulse{
  width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid var(--panel);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent),0 2px 8px rgba(0,0,0,.4);
}
.mkmark .mklbl{
  font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:var(--panel);border:1px solid var(--line);padding:3px 9px;border-radius:3px;white-space:nowrap;
}
/* ============ error banner ============ */
#errbar{
  position:fixed;top:0;left:0;right:0;z-index:9999;background:var(--oobb);color:#fff;
  padding:8px 14px;font:12px ui-monospace,Menlo,monospace;display:none;
}
/* ============ edit mode (phase 4) ============ */
#editbar{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:1180;display:none;gap:8px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px;box-shadow:var(--card-shadow);
}
#editbar.on{display:flex}
#editbar button{border:1px solid var(--line);border-radius:5px;padding:8px 12px;font-size:12.5px;font-weight:600;background:var(--panel2)}
#editbar button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
#editbar button.danger{color:var(--oobb)}
#editform{
  position:fixed;top:60px;right:16px;z-index:1160;width:348px;max-height:calc(100% - 86px);overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:6px;box-shadow:var(--card-shadow);display:none;
}
#editform.on{display:block}
#editform .fld{padding:9px 16px;border-bottom:1px solid var(--line-soft)}
#editform label{display:block;font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
#editform input,#editform textarea{width:100%;background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  border-radius:4px;padding:7px 9px;font:inherit;font-size:12.5px}
#editform textarea{min-height:56px;resize:vertical}
/* mobile */
@media (max-width:760px){
  #rail{left:8px;right:8px;width:auto;top:auto;bottom:8px;max-height:46%}
  #rail:not(.hidden) ~ #legend{display:none}
  #card,#editform{left:8px;right:8px;width:auto;top:56px;max-height:55%}
  .brand span{display:none}
}