/* Syntology Atlas — dark inversion of the brand: warm near-black, Archivo,
   zero radius, the brand red #ec3013 as the electric accent. */

:root {
  --bg: #0e0d0c;
  --surface: #171514;
  --surface-2: #1f1c1a;
  --text: #ece8e4;
  --text-dim: #9b938c;
  --accent: #ec3013;
  --hairline: rgba(236, 232, 228, 0.14);
  --font: "Archivo", system-ui, sans-serif;
  --font-exp: "Archivo Expanded", "Archivo", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* author display values (flex on the panels/overlays) beat the UA
   stylesheet's [hidden]{display:none} -- without this, the "hidden"
   #fatal overlay covered the whole app at z-60 as a pure black screen
   (found live in the user's Chrome, invisible to canvas-readback checks) */
[hidden] { display: none !important; }
html, body { height: 100%; overflow: hidden; background: var(--bg); }
body { font-family: var(--font); color: var(--text); }
button { font-family: var(--font); cursor: pointer; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---- labels overlay ---- */
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.nlabel {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  color: rgba(236, 232, 228, 0.82);
  text-shadow: 0 0 6px rgba(14, 13, 12, 0.95), 0 1px 2px rgba(14, 13, 12, 0.9);
  transform: translate(-50%, -160%);
  transition: opacity 240ms ease;
}
.nlabel.big { font-size: 13px; font-weight: 700; }

/* ---- boot ---- */
#boot {
  position: fixed; inset: 0; z-index: 50; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 700ms ease;
}
#boot.done { opacity: 0; pointer-events: none; }
.boot-inner { text-align: center; max-width: 420px; padding: 24px; }
.boot-mark {
  font-family: var(--font-exp); font-weight: 800; font-size: 34px;
  letter-spacing: 0.08em;
}
.boot-sub {
  font-family: var(--font-exp); font-weight: 800; font-size: 15px;
  letter-spacing: 0.66em; color: var(--accent); margin: 2px 0 26px 6px;
}
.boot-counts { font-size: 13px; color: var(--text-dim); min-height: 18px;
  font-variant-numeric: tabular-nums; }
.boot-bar { height: 2px; background: var(--surface-2); margin: 14px 0; }
#bootFill { height: 100%; width: 0%; background: var(--accent);
  transition: width 300ms ease; }
.boot-note { font-size: 11px; color: var(--text-dim); }

/* ---- chrome ---- */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  background: linear-gradient(to bottom, rgba(14,13,12,0.92), rgba(14,13,12,0.0));
}
.wordmark {
  font-family: var(--font-exp); font-weight: 800; font-size: 15px;
  letter-spacing: 0.06em; color: var(--text); text-decoration: none;
  flex: none;
}
.wordmark span { color: var(--accent); margin-left: 8px; letter-spacing: 0.3em; font-size: 11px; }

#searchWrap { position: relative; flex: 0 1 340px; }
#search {
  width: 100%; padding: 8px 12px; font-family: var(--font); font-size: 13px;
  background: rgba(23, 21, 20, 0.9); color: var(--text);
  border: 1px solid var(--hairline); outline: none;
}
#search:focus { border-color: var(--accent); }
#searchResults {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--hairline);
  max-height: 60vh; overflow-y: auto;
}
.sres {
  display: block; width: 100%; text-align: left; padding: 8px 12px;
  background: none; border: 0; border-bottom: 1px solid var(--hairline);
  color: var(--text); font-size: 12.5px; line-height: 1.35;
}
.sres:hover, .sres.hot { background: var(--surface-2); }
.sres small { color: var(--text-dim); display: block; font-size: 11px; margin-top: 2px; }
.sres-head { padding: 6px 12px; font-size: 10px; letter-spacing: 0.14em;
  color: var(--text-dim); text-transform: uppercase; background: var(--surface-2); }
.sres-wait { padding: 8px 12px; font-size: 12px; color: var(--text-dim); font-style: italic; }

.modes { display: flex; gap: 1px; margin-left: auto; border: 1px solid var(--hairline); }
.modes button, #legendBtn {
  padding: 7px 12px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  background: rgba(23,21,20,0.9); color: var(--text-dim); border: 0;
}
.modes button.on { color: #fff; background: var(--accent); }
#legendBtn { border: 1px solid var(--hairline); flex: none; }
#legendBtn.on { color: #fff; border-color: var(--accent); }

/* ---- panels (shared) ---- */
#panel, #legend, #honesty {
  position: fixed; z-index: 30; background: var(--surface);
  border: 1px solid var(--hairline);
  display: flex; flex-direction: column;
}
#panel { top: 60px; right: 14px; width: 372px; max-height: calc(100vh - 130px); }
#legend { top: 60px; right: 14px; width: 320px; max-height: calc(100vh - 130px); }
#honesty { z-index: 40; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 28px)); max-height: 80vh; }

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--hairline);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim); flex: none;
}
.panel-head .x {
  background: none; border: 0; color: var(--text-dim); font-size: 18px; line-height: 1;
  padding: 0 2px;
}
.panel-head .x:hover { color: var(--accent); }

#panelBody, #legendList, #honestyBody { overflow-y: auto; padding: 14px; }
#panelBody h2 { font-size: 16px; line-height: 1.3; font-weight: 700; margin-bottom: 8px; }
#panelMeta { font-size: 12.5px; color: var(--text-dim); margin-bottom: 10px; }
#panelMeta .chip, .provchip {
  display: inline-block; padding: 2px 7px; margin: 0 6px 4px 0;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em;
  border: 1px solid var(--hairline); color: var(--text-dim);
}
#panelMeta .chip.ok { border-color: rgba(82, 210, 115, 0.5); color: #52d273; }
#panelMeta .chip.warn { border-color: rgba(255, 176, 31, 0.5); color: #ffb01f; }
#panelMeta .chip.stub { border-color: rgba(155, 147, 140, 0.6); }
#panelCounts { display: flex; gap: 18px; margin-bottom: 12px; }
#panelCounts div { font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; }
#panelCounts b { display: block; font-size: 19px; color: var(--text);
  font-variant-numeric: tabular-nums; }
#panelLive { font-size: 12.5px; }
#panelLive .sect { margin: 10px 0 4px; font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-dim); }
#panelLive a { color: var(--text); }
#panelLive .err { color: var(--text-dim); font-style: italic; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.panel-actions a, .panel-actions button {
  padding: 7px 11px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  text-decoration: none; border: 1px solid var(--hairline); color: var(--text);
  background: none;
}
.panel-actions a:hover, .panel-actions button:hover { border-color: var(--accent); }
.panel-actions .primary { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- legend ---- */
.legend-note { padding: 10px 14px 0; font-size: 11.5px; color: var(--text-dim);
  line-height: 1.45; }
.lrow {
  display: flex; align-items: baseline; gap: 9px; width: 100%;
  background: none; border: 0; border-bottom: 1px solid var(--hairline);
  padding: 8px 2px; color: var(--text); text-align: left; font-size: 12px;
  line-height: 1.3;
}
.lrow:hover, .lrow.on { background: var(--surface-2); }
.lrow .sw { flex: none; width: 10px; height: 10px; transform: translateY(1px); }
.lrow small { color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* ---- time machine ---- */
#timebar {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
  z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; background: rgba(23, 21, 20, 0.88);
  border: 1px solid var(--hairline); backdrop-filter: blur(6px);
}
#playBtn {
  background: none; border: 1px solid var(--hairline); color: var(--text);
  width: 30px; height: 30px; font-size: 12px;
}
#playBtn.playing { background: var(--accent); border-color: var(--accent); color: #fff; }
#yearSlider { width: min(420px, 44vw); accent-color: var(--accent); }
#yearLabel { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; min-width: 52px;
  font-variant-numeric: tabular-nums; color: var(--accent); }

/* ---- stats bar ---- */
#statsbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px; padding: 7px 14px;
  font-size: 11px; color: var(--text-dim); letter-spacing: 0.03em;
  background: linear-gradient(to top, rgba(14,13,12,0.9), rgba(14,13,12,0));
  font-variant-numeric: tabular-nums;
}
#honestyBtn {
  background: none; border: 0; color: var(--text-dim); font-size: 11px;
  text-decoration: underline dotted; letter-spacing: 0.03em; padding: 0;
}
#honestyBtn:hover { color: var(--accent); }
#fps { margin-left: auto; }
#honestyBody { font-size: 12.5px; line-height: 1.5; }
#honestyBody table { width: 100%; border-collapse: collapse; margin-top: 10px; }
#honestyBody td { padding: 5px 6px; border-top: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums; }
#honestyBody td:last-child { text-align: right; }

#hint {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 10; font-size: 11.5px; letter-spacing: 0.06em; color: var(--text-dim);
  transition: opacity 800ms ease; pointer-events: none;
}
#hint.gone { opacity: 0; }

#fatal {
  position: fixed; inset: 0; z-index: 60; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center; font-size: 14px; line-height: 1.6;
  color: var(--text);
}

/* ---- mobile ---- */
@media (max-width: 720px) {
  #topbar { flex-wrap: wrap; gap: 8px; }
  #searchWrap { order: 3; flex: 1 1 100%; }
  .modes { margin-left: 0; }
  #panel, #legend {
    top: auto; bottom: 0; left: 0; right: 0; width: auto;
    max-height: 58vh; border-left: 0; border-right: 0; border-bottom: 0;
  }
  #timebar { bottom: 30px; width: calc(100vw - 20px); padding: 6px 10px; }
  #yearSlider { flex: 1; width: auto; }
  #hint { display: none; }
  #fps { display: none; }
}