/* Shared shell for the competitor map and the development pages.
   Same identity as the market-intelligence atlas: drafting vellum, Spectral + IBM Plex,
   pine-teal accent, semantic colours kept separate from the accent. */

:root{
  --ground:#EDEFEA; --surface:#F6F7F4; --surface-2:#E3E6DF; --surface-3:#D8DDD3;
  --ink:#14181B; --ink-soft:#3B454C; --slate:#5A6470;
  --rule:#C9CFC6; --rule-soft:#DBE0D6;
  --accent:#0F6E63; --accent-soft:#7FB3AB; --accent-wash:#DCE8E4;
  --ok:#2E7D5B; --warn:#A87824; --crit:#9E3B2E;
  --ok-wash:#DCE9E0; --warn-wash:#F0E6D0; --crit-wash:#F1DED9;
  --shadow:0 2px 8px rgba(20,24,27,.10), 0 8px 28px rgba(20,24,27,.08);

  --f-display:"Spectral",Georgia,"Times New Roman",serif;
  --f-body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --header-h:60px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#101413; --surface:#171C1B; --surface-2:#1F2624; --surface-3:#28312E;
    --ink:#E8EDE9; --ink-soft:#B3BDB8; --slate:#8C978F;
    --rule:#2C3533; --rule-soft:#232B29;
    --accent:#59B5A6; --accent-soft:#2F6A61; --accent-wash:#15302C;
    --ok:#5FBF8C; --warn:#D6A64C; --crit:#D97663;
    --ok-wash:#152A20; --warn-wash:#2C2415; --crit-wash:#2E1A16;
    --shadow:0 2px 8px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --ground:#101413; --surface:#171C1B; --surface-2:#1F2624; --surface-3:#28312E;
  --ink:#E8EDE9; --ink-soft:#B3BDB8; --slate:#8C978F;
  --rule:#2C3533; --rule-soft:#232B29;
  --accent:#59B5A6; --accent-soft:#2F6A61; --accent-wash:#15302C;
  --ok:#5FBF8C; --warn:#D6A64C; --crit:#D97663;
  --ok-wash:#152A20; --warn-wash:#2C2415; --crit-wash:#2E1A16;
  --shadow:0 2px 8px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-body); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
.top{
  height:var(--header-h); display:flex; align-items:center; gap:1rem;
  padding:0 1rem; border-bottom:1px solid var(--rule); background:var(--surface);
  position:sticky; top:0; z-index:1200;
}
.brand{display:flex; align-items:baseline; gap:.6rem; min-width:0}
.brand b{
  font-family:var(--f-display); font-weight:500; font-size:1.12rem;
  letter-spacing:-.01em; white-space:nowrap;
}
.brand span{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); white-space:nowrap;
}
.top .spacer{flex:1}
.top-stats{display:flex; gap:1.1rem; font-family:var(--f-mono); font-size:.72rem; color:var(--slate)}
.top-stats b{color:var(--ink); font-weight:600}
.btn{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.36rem .6rem; border:1px solid var(--rule); background:var(--surface);
  color:var(--ink-soft); cursor:pointer; border-radius:2px;
}
.btn:hover{border-color:var(--accent); color:var(--accent)}
.btn[aria-pressed="true"]{background:var(--accent-wash); border-color:var(--accent); color:var(--accent)}
.lang{display:flex}
.lang .btn:first-child{border-radius:2px 0 0 2px}
.lang .btn:last-child{border-radius:0 2px 2px 0; border-left:0}

/* ---------- pills / bars ---------- */
.pill{
  display:inline-block; font-family:var(--f-mono); font-size:.62rem; font-weight:500;
  letter-spacing:.05em; text-transform:uppercase; padding:.14rem .42rem;
  border:1px solid currentColor; border-radius:2px; white-space:nowrap;
}
.pill.ok{color:var(--ok); background:var(--ok-wash)}
.pill.warn{color:var(--warn); background:var(--warn-wash)}
.pill.crit{color:var(--crit); background:var(--crit-wash)}
.pill.mute{color:var(--slate); background:var(--surface-2)}
.pill.accent{color:var(--accent); background:var(--accent-wash)}

.bar{display:flex; height:7px; background:var(--surface-3); border-radius:1px; overflow:hidden}
.bar i{display:block; height:100%}
.bar .s{background:var(--ok)} .bar .r{background:var(--warn)} .bar .a{background:var(--accent-soft)}

/* ---------- map pins ---------- */
.pin{
  width:44px; height:44px; border-radius:50%; background:var(--surface);
  border:2px solid var(--accent); box-shadow:var(--shadow);
  display:grid; place-items:center; overflow:hidden; cursor:pointer;
  transition:transform .12s ease, border-color .12s ease;
}
.pin img{width:34px; height:34px; object-fit:contain; display:block}
.pin.generic{font-family:var(--f-mono); font-size:.8rem; font-weight:600; color:var(--accent)}
.pin:hover,.pin.on{transform:scale(1.12); border-color:var(--ink)}
.leaflet-marker-icon:focus{outline:2px solid var(--accent)}

/* ---------- hover card ---------- */
.card{
  width:290px; font-family:var(--f-body);
}
.card h3{
  font-family:var(--f-display); font-size:1.05rem; font-weight:500; margin:0 0 .1rem;
  line-height:1.25;
}
.card .sub{font-family:var(--f-mono); font-size:.66rem; color:var(--slate); letter-spacing:.04em}
.card dl{display:grid; grid-template-columns:auto 1fr; gap:.28rem .8rem; margin:.7rem 0 0}
.card dt{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--slate)}
.card dd{margin:0; font-family:var(--f-mono); font-size:.8rem; font-variant-numeric:tabular-nums; text-align:right}
.card .mixline{margin-top:.6rem; font-size:.76rem; color:var(--ink-soft); line-height:1.4}
.card .foot{
  margin-top:.7rem; padding-top:.5rem; border-top:1px solid var(--rule-soft);
  font-family:var(--f-mono); font-size:.64rem; color:var(--accent); letter-spacing:.05em;
}
.leaflet-popup-content-wrapper{
  background:var(--surface); color:var(--ink); border:1px solid var(--rule);
  border-radius:3px; box-shadow:var(--shadow);
}
.leaflet-popup-content{margin:.85rem .9rem}
.leaflet-popup-tip{background:var(--surface); border:1px solid var(--rule)}
.leaflet-popup-close-button{color:var(--slate)!important}
.leaflet-container{background:var(--surface-2); font-family:var(--f-body)}
.leaflet-bar a{background:var(--surface); color:var(--ink); border-color:var(--rule)}
.leaflet-bar a:hover{background:var(--surface-2)}
.leaflet-control-attribution{
  background:var(--surface)!important; color:var(--slate)!important;
  font-family:var(--f-mono); font-size:.6rem!important;
}
.leaflet-control-attribution a{color:var(--slate)!important}

/* ---------- generic table ---------- */
.scroll{overflow-x:auto; border:1px solid var(--rule-soft); background:var(--surface); border-radius:2px}
table{border-collapse:collapse; width:100%; font-size:.83rem}
th,td{padding:.5rem .65rem; text-align:left; white-space:nowrap}
thead th{
  position:sticky; top:0; z-index:2; background:var(--surface-2);
  font-family:var(--f-mono); font-size:.62rem; font-weight:500; letter-spacing:.07em;
  text-transform:uppercase; color:var(--slate); border-bottom:1px solid var(--rule);
  cursor:pointer; user-select:none;
}
thead th.sorted{color:var(--accent)}
thead th .ar{font-size:.7em; opacity:.8}
tbody tr{border-bottom:1px solid var(--rule-soft); cursor:pointer}
tbody tr:hover{background:var(--accent-wash)}
tbody tr.on{background:var(--accent-wash); box-shadow:inset 3px 0 0 var(--accent)}
td.num{text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.empty{padding:2rem 1rem; text-align:center; color:var(--slate); font-size:.9rem}

@media (max-width:820px){
  :root{--header-h:auto}
  .top{flex-wrap:wrap; gap:.5rem .8rem; padding:.55rem .8rem; position:static}
  .top-stats{width:100%; order:3; gap:.9rem; font-size:.68rem}
}