/* Ember Hollow: a village chronicle. Tokens first, then components. Lamplight follows the sim clock via --lamp. */
:root {
  --ink:#10201a; --loam:#1b2b24; --loam-2:#223630; --line:#2d423a; --linen:#efe6d3; --ash:#9aa89b;
  --ember:#e2a24a; --moss:#8fbf6a; --clay:#c96a4a; --pond:#6fb3c9; --violet:#b8a2e0;
  --lamp:1; --lamp-hue:38; /* driven by the clock: 1 at noon, 0.25 at night */
  --display:"Fraunces", Georgia, serif; --body:"Nunito Sans", system-ui, sans-serif; --mono:"JetBrains Mono", ui-monospace, monospace;
  --r:10px; --gap:14px;
}
* { box-sizing:border-box }
html, body { height:100%; margin:0 }
body { background:var(--ink); color:var(--linen); font:15px/1.5 var(--body); -webkit-font-smoothing:antialiased }
a { color:var(--pond); text-decoration:none } a:hover { text-decoration:underline }
button, select, input { font:inherit; color:inherit }
:focus-visible { outline:2px solid var(--ember); outline-offset:2px }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important } }

/* ---- register bar ---- */
.register { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px; padding:4px 14px; min-height:40px; border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 140px at 18% -40%, hsl(var(--lamp-hue) 70% 55% / calc(0.28 * var(--lamp))), transparent 70%),
    linear-gradient(180deg, #17271f, var(--ink)); transition:background 1.2s linear }
.wordmark { font:700 18px/1 var(--display); font-variation-settings:"opsz" 24, "SOFT" 60, "WONK" 1; letter-spacing:-0.01em; color:var(--linen); white-space:nowrap; display:flex; align-items:baseline; gap:8px }
.wordmark em { font-style:normal; color:var(--ash); font-weight:600 }
.wordmark .mark { width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 50% 50%, var(--linen) 0 22%, var(--ember) 24% 58%, transparent 60%); align-self:center; box-shadow:0 0 10px rgba(226,162,74,.45) }
.wordmark small { font:600 9.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ember) }
.about .credit { margin:-10px 0 24px; padding:10px 14px; border-left:3px solid var(--ember); background:rgba(226,162,74,.07); border-radius:0 10px 10px 0; max-width:70ch; font-size:14px }
.about h2 { font:700 24px/1.15 var(--display); margin:30px 0 10px } .about h3 { margin:0 0 6px }
.about .card p { margin:6px 0 } .about .card p:last-child { margin-bottom:0 }
.about .num { font:700 30px/1 var(--display); color:var(--ember) } .about .cap { font-size:12.5px; color:var(--ash); margin-top:4px }
.about .jev { border-color:rgba(226,162,74,.45); background:linear-gradient(180deg, rgba(226,162,74,.08), transparent 70%), var(--loam) }
.about .tag { display:inline-block; font:600 10.5px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; padding:3px 7px; border-radius:4px; margin-bottom:8px }
.about .tag.j { background:rgba(226,162,74,.18); color:var(--ember) } .about .tag.c { background:rgba(143,191,106,.14); color:var(--moss) }
.about table { width:100%; border-collapse:collapse; font-size:13.5px } .about td, .about th { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top } .about th { color:var(--ash); font-weight:600 }
.about td:first-child { white-space:nowrap; font-family:var(--mono); font-size:12.5px; color:var(--linen) }
@media (max-width:760px) { .about table thead, .about tr th { display:none } .about tr { display:block; padding:8px 0; border-bottom:1px solid var(--line) } .about td { display:block; border:0; padding:1px 0 } .about td:nth-child(2)::before { content:"answer: "; color:var(--ash) } .about td:nth-child(3) { color:var(--ash); font-size:12.5px } }
nav.pages { display:flex; gap:2px; margin-left:8px; flex-wrap:wrap }
nav.pages a { padding:4px 9px; border-radius:6px; color:var(--ash); font-weight:600; font-size:13px } nav.pages a:hover { color:var(--linen); text-decoration:none; background:rgba(255,255,255,.04) }
nav.pages a.active { color:var(--linen); background:var(--loam-2) }
.clockwrap { margin-left:auto; display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:13px; white-space:nowrap }
.clockwrap svg { width:15px; height:15px; color:var(--ember) } .clockwrap .day { color:var(--ash); font-size:12px }
.controls { display:flex; align-items:center; gap:8px }
.controls label { display:flex; align-items:center; gap:5px; color:var(--ash); font-size:12px }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:26px; min-width:26px; padding:0 7px; font-size:12.5px; border:1px solid var(--line); border-radius:8px; background:var(--loam); color:var(--linen); cursor:pointer }
.btn:hover { border-color:var(--ember) } .btn svg { width:14px; height:14px }
select.btn { padding-right:20px } input[type=range] { accent-color:var(--ember); width:80px }
.stat-strip { font-family:var(--mono); font-size:11px; color:var(--ash); padding:3px 14px; border-bottom:1px solid var(--line); background:var(--ink); display:flex; gap:18px; flex-wrap:wrap }
.stat-strip b { color:var(--linen); font-weight:500 }

/* ---- layout ---- */
#view { min-height:calc(100vh - var(--chrome, 62px)) }
.page { max-width:1180px; margin:0 auto; padding:28px 20px 60px }
.page h1 { font:700 clamp(30px, 4vw, 44px)/1.05 var(--display); font-variation-settings:"opsz" 72, "SOFT" 40, "WONK" 1; margin:0 0 6px; letter-spacing:-0.015em }
.page .lede { color:var(--ash); max-width:62ch; margin:0 0 22px }
h2 { font:700 20px/1.2 var(--display); font-variation-settings:"opsz" 24; margin:26px 0 10px } h2:first-child { margin-top:0 }
h3 { font:700 12px/1.2 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--ash); margin:18px 0 8px }
.muted { color:var(--ash) } .mono { font-family:var(--mono) } .pos { color:var(--moss) } .neg { color:var(--clay) } .ember { color:var(--ember) }
.grid { display:grid; gap:var(--gap) } .grid.cards { grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)) } .grid.two { grid-template-columns:1fr 1fr } .grid.three { grid-template-columns:repeat(3, 1fr) }
@media (max-width:820px) { .grid.two, .grid.three { grid-template-columns:1fr } }
.card { background:var(--loam); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px }
.card.link { cursor:pointer; transition:transform .12s ease, border-color .12s ease } .card.link:hover { border-color:var(--ember); transform:translateY(-1px) }
.chip { display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border-radius:999px; background:var(--loam-2); font-size:12.5px; color:var(--linen) }
.chip .dot { width:8px; height:8px; border-radius:50% }
.chips { display:flex; flex-wrap:wrap; gap:6px }
.kv { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:14px } .kv dt { color:var(--ash) } .kv dd { margin:0; font-family:var(--mono); font-size:13.5px }
.empty { color:var(--ash); padding:18px; border:1px dashed var(--line); border-radius:var(--r); text-align:center }

/* bars */
.bar { display:grid; grid-template-columns:96px 1fr 44px; gap:10px; align-items:center; margin:4px 0; font-size:13.5px }
.bar .track { height:8px; background:rgba(0,0,0,.35); border-radius:4px; overflow:hidden; position:relative } .bar .fill { height:100%; border-radius:4px }
.bar .val { text-align:right; font-family:var(--mono); font-size:12.5px; color:var(--ash) }
.bipolar .track { background:linear-gradient(90deg, rgba(0,0,0,.35) 49.5%, var(--line) 49.5%, var(--line) 50.5%, rgba(0,0,0,.35) 50.5%) } .bipolar .fill { position:absolute; top:0 }

/* portraits */
.portrait { width:64px; height:64px; image-rendering:pixelated; border-radius:12px; background:radial-gradient(circle at 50% 70%, rgba(226,162,74,.18), transparent 70%) }
.portrait.lg { width:128px; height:128px; border-radius:18px }
.person-card { display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:start }
.person-card .name { font:700 18px/1.15 var(--display); font-variation-settings:"opsz" 20, "WONK" 1 }
.person-card .sub { color:var(--ash); font-size:13px }
.mini { display:flex; gap:4px; margin-top:8px } .mini i { display:block; height:5px; flex:1; border-radius:3px; background:rgba(0,0,0,.35); overflow:hidden } .mini i b { display:block; height:100%; border-radius:3px }

/* chronicle (person page) */
.chronicle { display:grid; grid-template-columns:320px 1fr; gap:22px } @media (max-width:900px) { .chronicle { grid-template-columns:1fr } }
.chronicle .side { position:sticky; top:74px; align-self:start } @media (max-width:900px) { .chronicle .side { position:static } }
.timeline { list-style:none; margin:0; padding:0 } .timeline li { display:grid; grid-template-columns:76px 1fr; gap:10px; padding:5px 0; border-top:1px dashed var(--line); font-size:13.5px } .timeline li:first-child { border-top:none } .timeline time { font-family:var(--mono); font-size:12px; color:var(--ash) }
.judgments { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:8px }
.judgments div { background:rgba(0,0,0,.2); border-radius:8px; padding:8px 10px; font-size:13px } .judgments div b { display:block; font:700 15px/1.2 var(--display) }
.prob { display:grid; grid-template-columns:120px 1fr 40px; gap:8px; align-items:center; font-size:13px; margin:3px 0 }
.prob .track { height:6px; background:rgba(0,0,0,.35); border-radius:3px } .prob .track div { height:100%; background:var(--ember); border-radius:3px }
.feed div { padding:7px 0; border-top:1px dashed var(--line); font-size:14px } .feed div:first-child { border-top:none } .feed time { font-family:var(--mono); font-size:12px; color:var(--ash); margin-right:8px }

/* ---- map page ---- */
#map-page { position:relative; height:calc(100vh - var(--chrome, 62px)); display:none } #map-page.active { display:block }
#map { width:100%; height:100%; display:block; background:#1d2b1f; cursor:crosshair }
.lantern { position:absolute; right:16px; bottom:16px; width:320px; max-height:calc(100% - 32px); overflow:auto; background:rgba(27,43,36,.94); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:0 18px 50px rgba(0,0,0,.45) }
.lantern .close { position:absolute; top:8px; right:8px } .lantern h2 { margin:0 0 2px; padding-right:36px }
.maptools { position:absolute; left:12px; top:12px; display:flex; gap:6px } .maptools .btn { height:30px; min-width:30px } .maptools .btn { background:rgba(27,43,36,.9) }
.legend { position:absolute; left:16px; bottom:16px; display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--ash); background:rgba(16,32,26,.75); padding:6px 10px; border-radius:8px }
.legend span::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; background:var(--c) }
@media (max-width:760px) {
  .lantern { left:10px; right:10px; width:auto; max-height:50% }
  .register { flex-wrap:wrap; gap:8px 10px; padding:8px 12px }
  .wordmark { order:0 } .clockwrap { order:1; margin-left:auto } .wordmark small { display:none }
  nav.pages { order:2; width:100%; margin:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch } nav.pages::-webkit-scrollbar { display:none }
  nav.pages a { padding:6px 9px; white-space:nowrap }
  .controls { order:3; width:100%; justify-content:space-between } .controls label span, .controls label { font-size:12px }
  .stat-strip { display:none }
  .page { padding:20px 14px 48px }
}

/* map tooltip for plots and stalls */
.maptip { position:fixed; z-index:30; max-width:250px; padding:8px 10px; background:rgba(27,43,36,.96); border:1px solid var(--line); border-radius:10px; font-size:12.5px; line-height:1.4; pointer-events:none; box-shadow:0 10px 30px rgba(0,0,0,.4) }
.maptip b { display:block; font:700 14px var(--display); margin-bottom:2px }

/* read-only public stream */
.live { display:inline-flex; align-items:center; gap:8px; font:600 12.5px var(--body); letter-spacing:.06em; text-transform:uppercase; color:var(--ember) }
.live i { width:8px; height:8px; border-radius:50%; background:var(--clay); box-shadow:0 0 0 0 rgba(201,106,74,.6); animation:pulse 2s infinite }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(201,106,74,.6) } 70% { box-shadow:0 0 0 8px rgba(201,106,74,0) } 100% { box-shadow:0 0 0 0 rgba(201,106,74,0) } }
body.readonly .controls > button, body.readonly .controls > label { display:none }

/* corner pills: feedback bottom-left, X bottom-right, on every page */
.corner { position:fixed; bottom:14px; z-index:40 } .corner-left { left:14px } .corner-right { right:14px }
.pill { display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border-radius:999px; border:1px solid var(--line); background:rgba(27,43,36,.94); backdrop-filter:blur(8px); color:var(--linen); font:600 12.5px var(--body); cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.35); text-decoration:none }
.pill:hover { border-color:var(--ember); text-decoration:none } .pill svg { width:14px; height:14px; color:var(--ember) }
a.corner-right svg { color:var(--linen) }
.fb-panel { position:absolute; left:0; bottom:40px; width:min(340px, calc(100vw - 28px)); background:rgba(27,43,36,.97); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:14px; padding:12px 14px 14px; box-shadow:0 18px 50px rgba(0,0,0,.45); display:flex; flex-direction:column; gap:10px }
.fb-panel[hidden] { display:none }
.fb-head { display:flex; justify-content:space-between; align-items:center } .fb-head b { font:700 15px var(--display) }
.fb-panel label { display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--ash) }
.fb-panel input, .fb-panel textarea { font:14px/1.4 var(--body); color:var(--linen); background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:8px; padding:7px 9px; resize:vertical }
.fb-panel input:focus, .fb-panel textarea:focus { outline:2px solid var(--ember); outline-offset:1px; border-color:transparent }
.fb-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12.5px }
.btn.primary { background:var(--ember); color:var(--ink); border-color:var(--ember); font-weight:700; height:30px; padding:0 14px } .btn.primary:hover { filter:brightness(1.08) }
.fb-thanks { font-size:13.5px; padding:4px 0 }
/* keep the map overlays clear of the pills */
.legend { bottom:54px } .lantern { bottom:54px } .page { padding-bottom:84px }
@media (max-width:760px) { .legend { bottom:54px; right:14px } }