/* Explorer styles. Tokens (fonts, sizes, colours) come from ../../css/design.css; spec in docs/11-Design.md. */
:root { --panel:var(--surface); --txt:var(--text); --dim:var(--muted); --acc:#2f81f7;
        --blue:#2b8cbe; --orange:#ff7828; --green:#31a354; --purple:#be50dc; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--txt); font:var(--fs-md)/var(--lh) var(--font); -webkit-font-smoothing:antialiased; }
body { padding-top:var(--bar-h); }
a { color:#58a6ff; }
h1 { margin:0; font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.01em; line-height:var(--lh-tight); }
.sub { color:var(--dim); font-size:var(--fs-sm); }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:12px; margin-bottom:12px; }
.panel h3 { margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim); }
.row { display:flex; gap:8px; align-items:center; margin:6px 0; flex-wrap:wrap; }
button, select { background:var(--surface-2); color:var(--txt); border:1px solid var(--line); border-radius:var(--r-sm); padding:5px 10px; font:500 var(--fs-sm) var(--font); cursor:pointer; }
button.primary, button.on { background:var(--acc); border-color:var(--acc); color:#fff; }
button:disabled { opacity:.45; cursor:default; }
input[type=text] { width:100%; background:#0d1117; color:var(--txt); border:1px solid var(--line); border-radius:6px; padding:6px 8px; font-size:13px; }
.ok { color:#3fb950; } .bad { color:#f85149; }
.legend span { display:inline-block; width:12px; height:12px; border-radius:2px; margin-right:6px; vertical-align:-2px; }
.legend div { margin:3px 0; font-size:12.5px; }
.badge { display:inline-block; padding:1px 7px; border-radius:10px; font-size:11.5px; background:#21262d; border:1px solid var(--line); }

/* ---------- globe ---------- */
#app { display:grid; grid-template-columns: 1fr 380px; grid-template-rows: 100%; height:calc(100vh - var(--bar-h)); height:calc(100dvh - var(--bar-h)); overflow:hidden; }
#leftcol { position:relative; display:flex; flex-direction:column; height:100%; min-width:0; }
#map { flex:1; min-height:200px; }
          padding:6px 8px; font-size:12px; white-space:nowrap; z-index:1000; box-shadow:0 4px 12px #0008; }
#app aside { border-left:1px solid var(--line); overflow:auto; padding:14px; }
#app aside .panel { margin-top:12px; margin-bottom:0; }
.card { border:1px solid var(--line); border-radius:6px; padding:8px 10px; margin:6px 0; cursor:pointer; }
.card:hover { border-color:var(--acc); }
.bar { height:8px; background:#21262d; border-radius:4px; overflow:hidden; margin:6px 0; }
.bar > div { height:100%; background:var(--acc); width:0; transition:width .4s; }
.stack { font-size:12.5px; padding:4px 0; border-bottom:1px dashed var(--line); }
.drawing #map { cursor:crosshair; }
.leaflet-container { background:#0b0f14; }

/* ---------- site viewer ---------- */
body.full header { padding:var(--s4) var(--s5) var(--s2); border-bottom:1px solid var(--line); }
.backlink { font-size:var(--fs-sm); }
header p { margin:3px 0 0; }
#controls { padding:8px 20px 4px; }
#timeline { width:100%; height:92px; display:block; cursor:pointer; margin-top:4px; }
#tlText { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12.5px; }
#tlText b { color:#fff; }
main { display:grid; grid-template-columns: 1fr 380px; gap:14px; padding:10px 20px 20px; }
#mapwrap { position:relative; background:#000; border:1px solid var(--line); border-radius:8px; overflow:hidden; height:calc(100vh - 290px); min-height:420px; cursor:grab; }
#stage { position:absolute; left:0; top:0; transform-origin:0 0; }
#stage img, #stage canvas { position:absolute; left:0; top:0; image-rendering:pixelated; user-select:none; -webkit-user-drag:none; }
#swipe { position:absolute; top:0; bottom:0; width:3px; background:#fff; left:50%; cursor:ew-resize; z-index:5; box-shadow:0 0 6px #000; }
#swipe::after { content:"⟷"; position:absolute; top:50%; left:-12px; width:27px; height:27px; border-radius:50%; background:#fff; color:#000; text-align:center; line-height:27px; font-size:14px; }
.tag { position:absolute; top:10px; padding:3px 8px; border-radius:4px; background:#000a; font-size:12px; z-index:6; pointer-events:none; }
#tagL { left:10px; } #tagR { right:10px; }
#marker { position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px; border:2px solid #fff; border-radius:50%; box-shadow:0 0 4px #000; display:none; z-index:7; pointer-events:none; }
.big { font-size:26px; font-weight:600; }
.kpis { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
canvas.chart { width:100%; display:block; }
#story { font-size:13px; color:#c9d1d9; }
#story b { color:#fff; }

details.more { display:inline; } details.more summary { display:inline; cursor:pointer; color:var(--acc, #2f81f7); }
details.more[open] { display:block; margin-top:4px; }
.keys { margin-left:8px; opacity:.75; }
#event:empty { display:none; }

.evi { width:22px; height:22px; border-radius:50%; border:2px solid var(--c); background:rgba(13,17,23,.55);
  display:flex; align-items:center; justify-content:center; font-size:13px; line-height:1; box-shadow:0 0 4px #000; }
.evi.ok { background:var(--c); }
.evi.ch { box-shadow:0 0 0 2px #fff, 0 0 6px #000; }
.score { float:right; font-weight:700; color:var(--orange); }

/* ---------- globe: feed + time bar ---------- */
#app aside { display:flex; flex-direction:column; gap:var(--s3); min-height:0; height:100%; overflow:hidden; padding:var(--s5) var(--s4) var(--s4); background:var(--bg); }
#app aside > :not(#feed) { flex:none; }
#chips { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
#chips button { padding:3px 8px; font-size:12px; border-radius:12px; }
#chips .sep { width:8px; } #fcount { margin-left:auto; }
#feed { flex:1 1 0; overflow:auto; min-height:120px; border-top:1px solid var(--line); padding-top:var(--s1); }
.fmonth { position:sticky; top:0; background:var(--bg); color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.06em; padding:6px 2px 3px; z-index:1; }
.fitem { display:flex; gap:var(--s3); padding:var(--s3); border-radius:var(--r-md); cursor:pointer; border:1px solid var(--line); margin:var(--s2) 0; background:var(--surface); transition:border-color .15s, background .15s; }
.fitem.red { border-color:#f8514955; } .fitem:hover { background:var(--surface-2); border-color:var(--accent); }
.fic { font-size:20px; width:26px; text-align:center; } .fbody { flex:1; min-width:0; } .ftitle { font-weight:600; font-size:var(--fs-md); }
.fbars { display:flex; gap:12px; font-size:11.5px; color:var(--dim); margin-top:2px; } .fbars b { color:var(--txt); }
#tbar { display:flex; gap:8px; align-items:center; padding:6px 12px; background:var(--panel); border-top:1px solid var(--line); }
#tlabel { min-width:240px; text-align:right; }
#trange { position:relative; flex:1; height:30px; }
#thist { position:absolute; left:7px; right:7px; top:0; width:calc(100% - 14px); height:12px; }
#ttrack, #tfill { position:absolute; top:17px; height:4px; border-radius:2px; }
#ttrack { left:7px; right:7px; background:var(--line); } #tfill { background:#ff7828; }
#trange input { position:absolute; left:0; top:11px; width:100%; height:16px; margin:0; background:none; pointer-events:none; -webkit-appearance:none; appearance:none; }
#trange input::-webkit-slider-runnable-track { background:none; }
#trange input::-webkit-slider-thumb { -webkit-appearance:none; pointer-events:auto; width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid #ff7828; cursor:grab; }
#trange input::-moz-range-thumb { pointer-events:auto; width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid #ff7828; cursor:grab; }
#trange input::-moz-range-track { background:none; }
#trange input:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 3px #ff782855; }
.hl .evi { transform:scale(1.6); } .evi { transition:transform .15s; }
.evi.an { outline:2px solid #3fb950; outline-offset:2px; }
details.more2 summary { cursor:pointer; color:var(--dim); font-size:12px; }

/* in-map analysis panel (js/inmap.js) */
#sp { position:absolute; left:54px; top:10px; width:330px; max-height:calc(100% - 70px); overflow-y:auto; overflow-x:hidden; box-sizing:border-box; z-index:1000;
      background:rgba(22,27,34,.95); border:1px solid var(--line); border-radius:10px; padding:10px 12px; box-shadow:0 6px 24px #0008; }
#sp .sph { display:flex; align-items:center; gap:8px; font-size:14px; } #sp .sph b { flex:1; }
#sp .sph button { background:none; border:0; color:var(--dim); font-size:16px; cursor:pointer; }
#sp .sprow { display:flex; align-items:center; gap:8px; margin:8px 0 4px; } #spR { flex:1; } #spD { font-size:12px; min-width:120px; text-align:right; }
#sp .spseg { display:flex; gap:0; margin:6px 0; } #sp .spseg button { flex:1; border-radius:0; }
#sp .spseg button:first-child { border-radius:6px 0 0 6px; } #sp .spseg button:last-child { border-radius:0 6px 6px 0; }
#sp .spseg button.on { background:var(--acc); color:#fff; border-color:var(--acc); }
#sp .spk { display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; margin:8px 0; }
#sp .spk div { display:flex; flex-direction:column; } #sp .spk b { font-size:18px; } #sp .spk span { font-size:11px; color:var(--dim); }
#spC { width:100%; height:70px; display:block; cursor:pointer; margin:4px 0 6px; }
#sp .legend { display:grid; grid-template-columns:1fr 1fr; gap:2px 8px; margin-bottom:6px; }
#spN { margin:4px 0 6px; } #spF { display:block; }
.fnew { background:#f85149; color:#fff; font-size:10px; font-weight:700; border-radius:4px; padding:0 4px; margin-left:6px; vertical-align:1px; }
#toast { position:absolute; left:50%; top:12px; transform:translateX(-50%); z-index:1100; background:#21262d; border:1px solid #f85149;
         border-radius:8px; padding:7px 12px; font-size:13px; cursor:pointer; box-shadow:0 4px 16px #0008; }
#jobtoast { position:absolute; left:50%; bottom:56px; transform:translateX(-50%); z-index:1100; min-width:280px; max-width:70%;
            background:rgba(22,27,34,.96); border:1px solid var(--line); border-radius:8px; padding:7px 12px; font-size:13px; }
#jobtoast .bar { margin-top:5px; } #jobtoast[hidden] { display:none; }
.ptip { background:#3fb950; color:#fff; border:0; font-weight:700; box-shadow:none; }
#q { width:100%; box-sizing:border-box; background:#0d1117; color:var(--txt); border:1px solid var(--line); border-radius:6px; padding:6px 9px; font-size:13px; }
#q:focus { outline:none; border-color:var(--acc); }
.fitem mark { background:none; color:var(--orange); font-weight:700; }
/* job queue (bottom-right of the map) */
#jobs { position:absolute; right:10px; bottom:56px; width:300px; max-height:45%; overflow:auto; z-index:1000; background:rgba(22,27,34,.95);
        border:1px solid var(--line); border-radius:10px; padding:6px 10px; font-size:12.5px; box-shadow:0 6px 24px #0008; }
#jobs[hidden] { display:none; } #jobs .jh { display:flex; gap:6px; align-items:center; cursor:pointer; padding:2px 0; }
#jobs .jr { display:flex; gap:8px; align-items:flex-start; padding:6px 0; border-top:1px solid var(--line); }
#jobs .js { width:16px; text-align:center; } #jobs .jb { flex:1; min-width:0; } #jobs .jn { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#jobs .jr button { padding:1px 6px; font-size:12px; } #jobs .error .sub { color:#f85149; } #jobs .bar { margin:4px 0 0; height:5px; }
/* credits: just an ⓘ until hovered */
.leaflet-control-attribution { max-width:18px; overflow:hidden; white-space:nowrap; opacity:.6; transition:max-width .2s; }
.leaflet-control-attribution:hover { max-width:900px; opacity:1; }
#batch { display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:12px; } #batch button { padding:3px 9px; font-size:12px; }
#batch[hidden], #batch [hidden] { display:none; }
.fsel { margin:2px 0 0; accent-color:var(--acc); cursor:pointer; } .fitem.picked { outline:1px solid var(--acc); }
#sp .sph2 { display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; margin:8px 0; }
#sp .hk { display:flex; flex-direction:column; min-width:0; } #sp .hk b { font-size:17px; } #sp .hk b small { font-size:11px; color:var(--dim); font-weight:400; }
#sp .hk span { font-size:11.5px; } #sp .hk i { font-size:10.5px; color:var(--dim); font-style:normal; line-height:1.25; }
#sp .hk.strong { grid-column:1 / -1; } #sp .hk.strong b { font-size:24px; color:var(--orange); }
#sp select { background:#0d1117; color:var(--txt); border:1px solid var(--line); border-radius:6px; padding:2px 4px; font-size:12px; max-width:170px; }
.fhead { font-size:var(--fs-xs); color:var(--dim); margin-top:2px; } .fhead b { color:var(--accent); font-variant-numeric:tabular-nums; }
#sp .spv { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:4px 0 6px; } #sp .spv .sub { grid-column:1 / -1; }
#sp .spv figure { margin:0; cursor:pointer; } #sp .spv img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px; border:1px solid var(--line); background:#000; }
#sp .spv figcaption { font-size:11px; color:var(--dim); text-align:center; } #sp .spv[hidden] { display:none; }
#sp .spv .strip { grid-column: 1 / -1; display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
#sp .spv .strip figure { flex: 0 0 64px; margin: 0; cursor: pointer; border: 2px solid transparent; border-radius: 4px; }
#sp .spv .strip figure.erup { border-color: #ff9a2e; }
#sp .spv .strip img { width: 60px; height: 60px; object-fit: cover; display: block; background: #333; }
#sp .spv .strip figcaption { font-size: 9px; text-align: center; }
#sp .spchk { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; max-height: 150px; overflow-y: auto; }
#sp .spchk label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
#sp .spchk label.pr { display: none; }
#sp .spv .strip figure.sel { outline: 2px solid #fff; }

/* ---------- sidebar: list head + one selected event (globe.js showFocus) ---------- */
.eyebrow { font-size:var(--fs-xs); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
#listhead .sub { margin-top:6px; }
body.focused #listhead, body.focused #feed, body.focused aside > details.more2 { display:none !important; }
#focus[hidden] { display:none; }
#focus { display:flex; flex-direction:column; gap:var(--s4); flex:1 1 0; min-height:0; overflow:auto; }
.fback { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 var(--s4); border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--line-2); color:var(--text); font:600 var(--fs-sm) var(--font); }
.fback:hover { border-color:var(--accent); color:var(--accent); }
.fcard { background:var(--surface); border:1px solid var(--accent); border-radius:var(--r-lg); padding:var(--s4); }
.fcard h2 { margin:0 0 var(--s1); font-size:var(--fs-xl); line-height:var(--lh-tight); letter-spacing:-.01em; }
.fcard .hero { margin:var(--s4) 0 var(--s3); }
.fcard .hero b { display:block; font-size:var(--fs-3xl); font-weight:800; color:var(--accent); line-height:1; font-variant-numeric:tabular-nums; }
.fcard .hero b small { font-size:var(--fs-lg); font-weight:600; color:var(--muted); }
.fcard .hero span { font-size:var(--fs-sm); color:var(--muted); }
.fcard .stats { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); padding-top:var(--s3); border-top:1px solid var(--line); }
.fcard .stats b { display:block; font-size:var(--fs-lg); font-variant-numeric:tabular-nums; } .fcard .stats span { font-size:var(--fs-xs); color:var(--muted); }
.fhint { font-size:var(--fs-sm); color:var(--muted); }

@media (max-width: 760px) {
  #app { grid-template-columns:1fr; grid-template-rows:55% 45%; }
  #app aside { border-left:0; border-top:1px solid var(--line); padding:var(--s4); }
  #sp { left:10px; right:10px; width:auto; max-height:calc(100% - 60px); }
  #tlabel { min-width:0; }
}