/* MOO-384 / Tildespace ASCII-first replay viewer.
 * Vanilla CSS, no external assets, no fonts/CDN/analytics.
 */

:root {
  --bg: #0a0b0d;
  --panel: #14171b;
  --panel-soft: #1a1d22;
  --panel-strong: #1f2329;
  --rule: #2a2e34;
  --rule-strong: #3a3f47;
  --text: #d8d4cc;
  --text-strong: #f1ede4;
  --muted: #8a8a82;

  /* cave palette — warm earth, dim glow on active tiles */
  --wall:        #7a5a44;          /* stone */
  --wall-active: #c4a07a;          /* lit stone */
  --floor:       #6a6a52;          /* dim warm floor */
  --floor-active:#b8d8b8;          /* glowing floor */
  --tunnel:      #4a423a;          /* dim earth */
  --tunnel-heavy:#d4a574;          /* warm tan, well-trodden path */
  --label:       #8a8a82;
  --label-active:#b8d8b8;

  --accent-floor: #b8d8b8;
  --accent-tan:   #d4a574;
  --accent-sub:   #c79bd5;
  --accent-link:  #9ec5e6;
  --warn:         #e3a96a;

  /* archetype tints */
  --resident-c:   #ff6b6b;         /* contrarian — red */
  --resident-s:   #c79bd5;         /* sleeper — purple */
  --resident-m:   #6dc7d4;
  --resident-g:   #88c98e;
  --resident-w:   #a09a92;
  --resident-p:   #d780d0;

  --serif: Georgia, "Iowan Old Style", "Source Serif Pro", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, "Cascadia Code", "JetBrains Mono", "SF Mono",
           "Source Code Pro", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}
body { padding: 0 1.25rem; }

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.25rem 0 4rem;
}

/* ----------------------------- HERO ------------------------------ */

header.hero {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.4rem;
  margin-bottom: 1.4rem;
}
.hero h1 {
  font-family: var(--mono);
  font-size: 1.85rem;
  margin: 0 0 0.4rem;
  color: var(--text-strong);
  letter-spacing: 0.01em;
}
.hero .subtitle {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent-floor);
  margin: 0 0 0.8rem;
  font-size: 1.04rem;
}
.hero .summary { margin: 0 0 1rem; }
.statusline {
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--muted);
}
.statusline span strong { color: var(--accent-tan); font-weight: 600; }

/* ---------------------------- SECTIONS ---------------------------- */

section { margin: 2.4rem 0; }
section > h2 {
  font-family: var(--mono);
  font-size: 1.12rem;
  margin: 0 0 0.8rem;
  color: var(--accent-tan);
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.4rem;
}
section h3 {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--accent-floor);
  margin: 1.4rem 0 0.5rem;
}
p { margin: 0.55rem 0; }
ul, ol { padding-left: 1.4rem; }
li { margin: 0.22rem 0; }

a {
  color: var(--accent-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--text-strong); }
strong { color: var(--text-strong); }
em { color: var(--accent-floor); font-style: italic; }

code {
  background: var(--panel-soft);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.05em 0.4em;
  font-family: var(--mono);
  font-size: 0.93em;
  color: var(--text-strong);
}

pre.cmd {
  background: var(--panel-soft);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent-tan);
  padding: 0.8rem 1rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0.7rem 0;
}

/* --------------------------- CAVE SECTION ------------------------- */

.cave-section { margin-top: 1rem; }
.cave-section > h2 {
  border: none;
  padding: 0;
  font-size: 1.5rem;
  color: var(--text-strong);
  font-family: var(--mono);
}
.cave-subtitle {
  font-family: var(--mono);
  color: var(--accent-tan);
  font-size: 0.95rem;
  margin: 0.1rem 0 0.4rem;
}
.viewer-caption {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-style: italic;
}
.cave-why {
  font-family: var(--mono);
  background: var(--panel);
  border-left: 3px solid var(--accent-floor);
  padding: 0.55rem 0.8rem;
  margin: 0.6rem 0 1rem;
  color: var(--text-strong);
  font-size: 0.93rem;
}

/* --- How to read this --- */

.how-to-read {
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 0.7rem 1rem 0.5rem;
  margin: 0.6rem 0;
}
.how-to-read h3 {
  font-family: var(--mono);
  font-size: 0.9rem;
  margin: 0 0 0.35rem;
  color: var(--accent-tan);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.how-to-read ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  font-size: 0.92rem;
}
.how-to-read li { padding: 0.1rem 0; }
.how-to-read code {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--accent-floor);
  font-weight: 600;
}

/* --- Cave terminal --- */

.cave-terminal {
  background: #04050a;
  border: 1px solid var(--rule-strong);
  padding: 0.6rem 0.9rem;
  margin: 0.4rem 0;
  font-family: var(--mono);
  overflow-x: auto;
  position: relative;
}
.cave-banner {
  font-family: var(--mono);
  margin: 0 0 0.55rem;
  padding: 0 0 0.3rem;
  border-bottom: 1px dashed var(--rule);
  color: var(--accent-tan);
  font-size: 0.86rem;
  white-space: pre;
}
.cave-pre {
  font-family: var(--mono);
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.18;
  white-space: pre;
  color: var(--muted);          /* base char tone for bare grid */
}

/* ASCII grid token classes (set by site.js) */
.cave-pre .wall          { color: var(--wall); }
.cave-pre .wall.active   { color: var(--wall-active); font-weight: 700; }
.cave-pre .floor         { color: var(--floor); }
.cave-pre .floor.active  { color: var(--floor-active); }
.cave-pre .tunnel        { color: var(--tunnel); }
.cave-pre .tunnel.heavy  { color: var(--tunnel-heavy); }
.cave-pre .label         { color: var(--label); font-style: italic; }
.cave-pre .label.active  { color: var(--label-active); }
.cave-pre .resident-contrarian { color: var(--resident-c); font-weight: 700; }
.cave-pre .resident-sleeper    { color: var(--resident-s); font-weight: 700; }
.cave-pre .resident-memorist   { color: var(--resident-m); font-weight: 700; }
.cave-pre .resident-geometer   { color: var(--resident-g); font-weight: 700; }
.cave-pre .resident-walker     { color: var(--resident-w); font-weight: 700; }
.cave-pre .resident-poet       { color: var(--resident-p); font-weight: 700; }
.cave-pre .resident-unknown    { color: var(--muted); font-weight: 700; }
.cave-pre .followed { background: rgba(184, 216, 184, 0.18); }
.cave-pre .trail-contrarian { color: var(--resident-c); opacity: 0.55; }
.cave-pre .trail-sleeper    { color: var(--resident-s); opacity: 0.55; }
.cave-pre .trail-memorist   { color: var(--resident-m); opacity: 0.55; }
.cave-pre .trail-geometer   { color: var(--resident-g); opacity: 0.55; }
.cave-pre .trail-walker     { color: var(--resident-w); opacity: 0.55; }
.cave-pre .trail-poet       { color: var(--resident-p); opacity: 0.55; }

/* --- Cave controls --- */

.cave-controls {
  display: flex; align-items: center; gap: 0.4rem;
  flex-wrap: wrap; margin: 0.6rem 0 0.4rem;
  font-family: var(--mono); font-size: 0.86rem;
}
.cave-controls button,
.cave-jump button,
.cave-tour button,
.cave-options select,
.cave-controls select {
  background: var(--panel-soft);
  color: var(--text);
  border: 1px solid var(--rule);
  padding: 0.32rem 0.6rem;
  font-family: var(--mono);
  font-size: 0.84rem;
  cursor: pointer;
}
.cave-controls button { min-width: 2.2rem; text-align: center; }
.cave-controls button:hover,
.cave-jump button:hover,
.cave-tour button:hover,
.cave-options select:hover {
  color: var(--text-strong);
  border-color: var(--accent-floor);
}
.cave-controls button:focus-visible,
.cave-jump button:focus-visible,
.cave-tour button:focus-visible,
.cave-options select:focus-visible,
.cave-options input:focus-visible,
#tick-slider:focus-visible {
  outline: 2px solid var(--accent-floor);
  outline-offset: 1px;
}
.cave-tour button[aria-current="true"],
.cave-jump button[aria-pressed="true"] {
  border-color: var(--accent-floor);
  color: var(--accent-floor);
  background: var(--panel-strong);
}
#tick-slider {
  flex: 1 1 200px;
  min-width: 100px;
  accent-color: var(--accent-floor);
}
.tick-readout, .speed { color: var(--muted); white-space: nowrap; }
.speed { display: inline-flex; align-items: center; gap: 0.35rem; }

.cave-jump,
.cave-tour {
  display: flex; align-items: center; gap: 0.4rem;
  flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.85rem;
  margin: 0.35rem 0;
  color: var(--muted);
}
.jump-label, .tour-label { color: var(--muted); }

.cave-options {
  display: flex; align-items: center; gap: 0.6rem 1rem;
  flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.85rem;
  color: var(--muted);
  margin: 0.35rem 0 0.7rem;
}
.cave-options label { display: inline-flex; align-items: center; gap: 0.35rem; }
.cave-options input[type="checkbox"] { accent-color: var(--accent-floor); }

/* --- Tour explanation panel --- */

.cave-tour-panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent-tan);
  padding: 0.6rem 0.9rem;
  margin: 0.5rem 0 0.9rem;
}
.cave-tour-panel h4 {
  font-family: var(--mono);
  font-size: 0.92rem;
  color: var(--accent-tan);
  margin: 0 0 0.25rem;
}
.cave-tour-panel p {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.88rem;
  color: var(--text);
}

/* --- Ledger blocks --- */

.ledger-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.7rem;
  margin: 0.7rem 0;
}
.ledger-block {
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 0.55rem 0.8rem;
}
.ledger-block h3 {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--accent-tan);
  margin: 0 0 0.45rem;
  text-transform: uppercase;
}
.ledger-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 0.86rem;
}
.ledger-list li {
  padding: 0.18rem 0;
  border-bottom: 1px dashed var(--rule);
}
.ledger-list li:last-child { border-bottom: none; }
.ledger-list .glyph { font-weight: 700; margin-right: 0.45rem; }
.ledger-list .glyph.resident-contrarian { color: var(--resident-c); }
.ledger-list .glyph.resident-sleeper    { color: var(--resident-s); }
.ledger-list .glyph.resident-memorist   { color: var(--resident-m); }
.ledger-list .glyph.resident-geometer   { color: var(--resident-g); }
.ledger-list .glyph.resident-walker     { color: var(--resident-w); }
.ledger-list .glyph.resident-poet       { color: var(--resident-p); }
.ledger-list .room-label { color: var(--accent-floor); }
.ledger-list .visits     { color: var(--muted); }
.ledger-list .ev-tick    { color: var(--muted); }
.ledger-list .sub        { color: var(--accent-sub); display: inline-block; padding-left: 1.4rem; font-size: 0.8rem; }
.ledger-list li.followed {
  background: rgba(184, 216, 184, 0.10);
  padding-left: 0.4rem;
  margin-left: -0.4rem;
}
.ledger-notice p {
  margin: 0;
  font-style: italic;
  color: var(--accent-floor);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* --- Cave legend --- */

.cave-legend {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem;
  font-family: var(--mono); font-size: 0.84rem;
  color: var(--muted);
  margin: 0.4rem 0 0.2rem;
  padding: 0.5rem 0.8rem;
  background: var(--panel);
  border: 1px solid var(--rule);
}
.cave-legend code {
  background: transparent;
  border: none;
  padding: 0;
  font-weight: 700;
}
.cave-legend code.wall            { color: var(--wall-active); }
.cave-legend code.floor           { color: var(--floor-active); }
.cave-legend code.tunnel          { color: var(--tunnel-heavy); }
.cave-legend code.resident-contrarian { color: var(--resident-c); }
.cave-legend code.trail-contrarian    { color: var(--resident-c); opacity: 0.6; }
.cave-legend code.resident-sleeper    { color: var(--resident-s); }
.cave-legend code.trail-sleeper       { color: var(--resident-s); opacity: 0.6; }
.cave-legend .legend-note { font-style: italic; color: var(--accent-floor); }

/* --- Mobile --- */

@media (max-width: 720px) {
  .cave-pre, .cave-banner { font-size: 0.72rem; }
}

/* -------------------------- FLOWS / DIAGRAMS ---------------------- */

.flow {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent-floor);
  padding: 0.85rem 1rem;
  font-family: var(--mono);
  font-size: 0.88rem;
  margin: 0.9rem 0;
  white-space: pre-wrap;
  line-height: 1.55;
}
.flow.contrast { border-left-color: var(--warn); margin-top: 0.6rem; }
.flow .arrow { color: var(--accent-tan); }
.flow .label { color: var(--muted); display: block; margin-bottom: 0.15rem; font-style: italic; }

/* -------------------------- TIMELINE ------------------------------ */

.timeline { list-style: none; padding: 0; margin: 1rem 0 0; border-left: 1px solid var(--rule); }
.timeline li { margin: 0; padding: 0.55rem 0 0.55rem 1.1rem; position: relative; }
.timeline li::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-tan);
  position: absolute; left: -4px; top: 0.95rem;
}
.timeline li.failed::before { background: var(--warn); }
.timeline .ver { font-family: var(--mono); font-size: 0.85rem; color: var(--accent-floor); margin-right: 0.5rem; }
.timeline .title { font-weight: 600; color: var(--text-strong); }
.timeline .body { color: var(--text); display: block; margin-top: 0.05rem; }

/* ----------------------- METRICS BLOCK --------------------------- */

.metrics {
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 0.8rem 1rem;
  font-family: var(--mono);
  font-size: 0.9rem;
  margin: 1rem 0;
}
.metrics dt { color: var(--muted); display: inline-block; min-width: 19ch; }
.metrics dd { display: inline; margin: 0; color: var(--text-strong); }
.metrics dd::after { content: "\A"; white-space: pre; }

/* ----------------------- COMPARISON CARDS ------------------------ */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
  margin-top: 0.6rem;
}
.card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--rule-strong);
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.card h3 {
  font-family: var(--mono);
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-strong);
}
.card-thumb {
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.05;
  color: var(--wall-active);
  background: #04050a;
  border: 1px solid var(--rule);
  margin: 0;
  padding: 0.35rem 0.45rem;
  white-space: pre;
  overflow-x: auto;
}
.card ul { padding-left: 1.1rem; margin: 0.2rem 0 0; font-size: 0.86rem; color: var(--text); }
.card.card-best   { border-top-color: var(--accent-floor); }
.card.card-best h3 { color: var(--accent-floor); }
.card.card-failed { border-top-color: var(--warn); }
.card.card-failed h3 { color: var(--warn); }
.card.card-failed .card-thumb { color: var(--muted); }

/* ------------------- DOES NOT CLAIM ------------------------------ */

.does-not-claim {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--warn);
  padding: 0.9rem 1.1rem;
}
.does-not-claim h2 {
  border: none;
  padding: 0;
  margin: 0 0 0.55rem;
  color: var(--warn);
}
.does-not-claim ul { margin: 0; padding-left: 1.2rem; }

/* ----------------------------- FOOTER ---------------------------- */

footer {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.88rem;
}
footer .declarations {
  font-family: var(--mono);
  font-size: 0.82rem;
  margin: 0.5rem 0 0.9rem;
}
footer .declarations span { display: inline-block; margin-right: 1.1rem; }
footer .links {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem;
  font-family: var(--mono); font-size: 0.83rem;
}

/* ----------------------------- NOSCRIPT -------------------------- */

.noscript-warning {
  background: var(--panel);
  border: 1px solid var(--warn);
  padding: 0.7rem 1rem;
  margin: 0.6rem 0;
  color: var(--warn);
}

/* -------------------------- MOBILE TWEAKS ------------------------ */

@media (max-width: 600px) {
  body { padding: 0 0.7rem; font-size: 15px; }
  .container { padding: 1.4rem 0 3rem; }
  .hero h1 { font-size: 1.45rem; }
  .hero .subtitle { font-size: 0.96rem; }
  pre.cmd { font-size: 0.78rem; }
  .cave-pre, .cave-banner { font-size: 0.66rem; }
  .card-thumb { font-size: 0.72rem; }
}