/* Helios 1 — desktop web slice v0.1
   Night sky, solar gold, brass and glass. Calm, not gamified. */

:root {
  /* Evidence-tier colour language (03_KNOWLEDGE/Evidence_Tiers.md) */
  --tier-a: #f2b441; /* Solar gold */
  --tier-b: #f3ece0; /* Warm white */
  --tier-c: #7fb6e8; /* Sky blue */
  --tier-d: #a98ce8; /* Violet */
  --tier-e: #e8853f; /* Ember orange */
  --tier-f: #e05a5a; /* Lantern red */
  --tier-u: #8794a3; /* Slate */

  --night-0: #06080f;
  --night-1: #0a0e19;
  --night-2: #101728;
  --night-3: #17203a;
  --brass: #b8905a;
  --brass-dim: #6b563a;
  --glass: rgba(199, 214, 240, 0.06);
  --glass-line: rgba(184, 144, 90, 0.28);
  --ink: #e8ecf5;
  --ink-soft: #a7b2c6;
  --ink-faint: #7a8598;
  --gold: #f2b441;
  --gold-soft: rgba(242, 180, 65, 0.16);

  --radius: 3px;
  --maxw: 1180px;
  --step: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);

  --font-display: 'Zodiak', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-body: 'Satoshi', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Roboto Mono', Menlo, monospace;
}

* { box-sizing: border-box; }

html { font-size: 16px; background-color: #06080f; }
body.text-large { font-size: 18.5px; }
body.text-x-large { font-size: 21px; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step);
  line-height: 1.6;
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(242, 180, 65, 0.10), transparent 62%),
    radial-gradient(900px 600px at 8% 110%, rgba(127, 182, 232, 0.07), transparent 60%),
    linear-gradient(180deg, var(--night-0), var(--night-1) 40%, var(--night-0));
  background-attachment: fixed;
  min-height: 100vh;
}

body.low-stim {
  background: linear-gradient(180deg, #080b13, #0a0e19);
}
body.low-stim .starfield { display: none; }
body.low-stim .glow { box-shadow: none !important; }

/* Star field — decorative, removed by reduced motion and low stimulation */
.starfield {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.55;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #fff, transparent),
    radial-gradient(1px 1px at 32% 68%, #cfe0ff, transparent),
    radial-gradient(1px 1px at 55% 14%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 72% 44%, #ffe9c0, transparent),
    radial-gradient(1px 1px at 88% 76%, #fff, transparent),
    radial-gradient(1px 1px at 46% 88%, #cfe0ff, transparent),
    radial-gradient(1px 1px at 22% 52%, #fff, transparent),
    radial-gradient(1px 1px at 66% 92%, #fff, transparent),
    radial-gradient(1px 1px at 92% 18%, #cfe0ff, transparent);
  animation: drift 120s linear infinite alternate;
}
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-16px); } }

/* Reduced motion — genuinely removes animation, not just shortens it */
body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
body.reduced-motion .starfield { animation: none !important; }

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #ffd27d; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 .5rem; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.08rem; }
p { margin: 0 0 .85rem; }
small, .small { font-size: .82rem; }

.wrap { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem 5rem; }

/* ---------------------------------------------------------------- chrome */
header.top {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(9px);
  background: linear-gradient(180deg, rgba(6, 8, 15, 0.94), rgba(6, 8, 15, 0.72));
  border-bottom: 1px solid var(--glass-line);
}
.top-in { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; gap: 1.1rem; padding: .7rem 1.25rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; font-family: var(--font-display); letter-spacing: .06em; text-transform: uppercase; font-size: .95rem; }
.brand svg { color: var(--gold); }
nav.main { display: flex; gap: .2rem; flex-wrap: wrap; margin-left: auto; align-items: center; }
nav.main a {
  color: var(--ink-soft); text-decoration: none; padding: .35rem .6rem; border-radius: var(--radius);
  font-size: .86rem; letter-spacing: .03em; border: 1px solid transparent;
}
nav.main a:hover { color: var(--ink); border-color: var(--glass-line); background: var(--glass); }
nav.main a.active { color: var(--gold); border-color: var(--glass-line); background: var(--gold-soft); }

footer.bottom {
  border-top: 1px solid var(--glass-line); margin-top: 3rem; padding: 1.2rem 1.25rem 2.5rem;
  color: var(--ink-faint); font-size: .8rem; position: relative; z-index: 1;
}
footer.bottom .fin { max-width: var(--maxw); margin: 0 auto; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- surfaces */
.panel {
  background: linear-gradient(180deg, rgba(23, 32, 58, 0.55), rgba(10, 14, 25, 0.55));
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  margin: 0 0 1.1rem;
}
.panel.tight { padding: .8rem .9rem; }
.grid { display: grid; gap: 1.1rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.spread { display: flex; gap: .8rem; justify-content: space-between; align-items: baseline; flex-wrap: wrap; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.mono { font-family: var(--font-mono); font-size: .84em; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .7rem; color: var(--brass); margin-bottom: .4rem; }

hr.rule { border: 0; border-top: 1px solid var(--glass-line); margin: 1.2rem 0; }

/* ---------------------------------------------------------------- controls */
button, .btn {
  font: inherit; font-size: .88rem; cursor: pointer;
  background: linear-gradient(180deg, rgba(242, 180, 65, 0.16), rgba(242, 180, 65, 0.06));
  color: var(--gold); border: 1px solid rgba(242, 180, 65, 0.45);
  border-radius: var(--radius); padding: .45rem .85rem; text-decoration: none; display: inline-block;
  transition: background 160ms ease, border-color 160ms ease;
}
button:hover, .btn:hover { background: rgba(242, 180, 65, 0.24); border-color: var(--gold); }
button.ghost, .btn.ghost { background: transparent; color: var(--ink-soft); border-color: var(--glass-line); }
button.ghost:hover { color: var(--ink); border-color: var(--brass-dim); background: var(--glass); }
button.danger { color: #ffb1b1; border-color: rgba(224, 90, 90, .5); background: rgba(224, 90, 90, .1); }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
#main:focus, #main:focus-visible { outline: none; }

label { display: block; font-size: .84rem; color: var(--ink-soft); margin-bottom: .25rem; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  font: inherit; font-size: .9rem; width: 100%; color: var(--ink);
  background: rgba(6, 9, 16, .7); border: 1px solid var(--glass-line); border-radius: var(--radius);
  padding: .45rem .6rem;
}
textarea { min-height: 5.5rem; resize: vertical; }
input[type=range] { width: 100%; accent-color: var(--gold); }
input[type=checkbox] { accent-color: var(--gold); width: 1rem; height: 1rem; }
.field { margin-bottom: .85rem; }
.check { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .5rem; }
.check label { margin: 0; color: var(--ink); font-size: .88rem; }

/* ---------------------------------------------------------------- tiers */
.tier {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; border: 1px solid currentColor; border-radius: 999px; padding: .1rem .5rem;
  white-space: nowrap;
}
.tier .dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.tier-A { color: var(--tier-a); }
.tier-B { color: var(--tier-b); }
.tier-C { color: var(--tier-c); }
.tier-D { color: var(--tier-d); }
.tier-E { color: var(--tier-e); }
.tier-F { color: var(--tier-f); }
.tier-U { color: var(--tier-u); }

.badge {
  display: inline-block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--glass-line); color: var(--brass); border-radius: 999px; padding: .12rem .55rem;
}
.badge.live { color: var(--tier-c); }
.badge.sealed { color: var(--tier-u); }
.badge.warn { color: var(--tier-e); border-color: rgba(232, 133, 63, .5); }

/* ---------------------------------------------------------------- knowledge sun */
.sun-stage { position: relative; }
.sun-svg { width: 100%; height: auto; display: block; touch-action: none; }
.sun-svg .edge { stroke: rgba(199, 214, 240, .18); stroke-width: 1; pointer-events: none; }
.sun-svg .edge.uncertain { stroke-dasharray: 3 4; stroke: rgba(127, 182, 232, .4); }
.sun-svg .edge.speculative { stroke-dasharray: 1 5; stroke: rgba(232, 133, 63, .45); }
.sun-svg .edge.fiction { stroke-dasharray: 6 3; stroke: rgba(224, 90, 90, .4); }
.sun-svg .edge.unknown { stroke-dasharray: 2 6; stroke: rgba(135, 148, 163, .5); }
.sun-svg .node { cursor: pointer; }
.sun-svg .node circle { transition: r 140ms ease; }
.sun-svg .node:hover circle, .sun-svg .node:focus circle { stroke: #fff; stroke-width: 1.5; }
.sun-svg text { font-family: var(--font-body); font-size: 11px; fill: var(--ink-soft); pointer-events: none; }
.sun-core { fill: url(#coreGlow); pointer-events: none; }
.sun-svg .node circle { pointer-events: all; }

/* ---------------------------------------------------------------- charts */
.chart { width: 100%; height: auto; display: block; }
.chart .axis { stroke: rgba(199, 214, 240, .22); stroke-width: 1; }
.chart .gridline { stroke: rgba(199, 214, 240, .08); stroke-width: 1; }
.chart text { font-size: 9px; fill: var(--ink-faint); font-family: var(--font-mono); }
.legend { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .78rem; color: var(--ink-soft); }
.legend i { width: .7rem; height: .7rem; border-radius: 2px; display: inline-block; margin-right: .3rem; vertical-align: -1px; }

table { width: 100%; border-collapse: collapse; font-size: .84rem; }
th, td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid rgba(184, 144, 90, .16); vertical-align: top; }
th { color: var(--brass); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; }
.scroll-x { overflow-x: auto; }

.kv { display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem; font-size: .87rem; }
.kv dt { color: var(--ink-soft); }
.kv dd { margin: 0; font-family: var(--font-mono); }

.stat { border: 1px solid var(--glass-line); border-radius: var(--radius); padding: .7rem .8rem; background: rgba(6, 9, 16, .45); }
.stat .n { font-family: var(--font-display); font-size: 1.5rem; color: var(--gold); display: block; line-height: 1.1; }
.stat .l { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); }

/* ---------------------------------------------------------------- dawn gate */
.dawn {
  background:
    radial-gradient(900px 420px at 50% 108%, rgba(242, 180, 65, .28), transparent 65%),
    linear-gradient(180deg, #070a14 0%, #0d1220 45%, #1b1a24 78%, #3a2a25 100%);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  padding: 2.6rem 1.6rem 2.2rem;
  text-align: center;
}
.dawn h1 { font-size: 2.1rem; }
.guide-quote {
  max-width: 46rem; margin: 1.2rem auto; font-family: var(--font-display); font-size: 1.12rem;
  line-height: 1.55; color: #f6e7c8; border-left: 2px solid var(--gold); padding-left: 1rem; text-align: left;
}

/* ---------------------------------------------------------------- portals */
.portal { border: 1px solid var(--glass-line); border-radius: var(--radius); padding: .9rem 1rem; background: rgba(10, 14, 25, .55); }
.portal.sealed { border-style: dashed; opacity: .78; }
.portal h3 { margin-bottom: .2rem; }
.portal .why { font-size: .82rem; color: var(--ink-faint); }

/* ---------------------------------------------------------------- feedback widget */
.fb-btn {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 40; border-radius: 999px; padding: .5rem .9rem;
}
.fb-panel {
  position: fixed; right: 1rem; bottom: 3.6rem; z-index: 41; width: min(23rem, calc(100vw - 2rem));
  background: #0b1020; border: 1px solid var(--glass-line); border-radius: var(--radius); padding: 1rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
}

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 1.2rem; z-index: 60;
  background: #10182b; border: 1px solid var(--glass-line); color: var(--ink);
  padding: .55rem 1rem; border-radius: var(--radius); font-size: .86rem; max-width: 90vw;
}

.notice { border-left: 2px solid var(--tier-e); padding: .5rem .8rem; background: rgba(232, 133, 63, .07); font-size: .86rem; }
.notice.info { border-color: var(--tier-c); background: rgba(127, 182, 232, .07); }
.notice.ok { border-color: var(--tier-a); background: rgba(242, 180, 65, .08); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: .5rem; position: fixed; z-index: 80; background: #0b1020; padding: .5rem .8rem; border: 1px solid var(--gold); }

.code-block { font-family: var(--font-mono); font-size: .82rem; background: rgba(6, 9, 16, .8); border: 1px solid var(--glass-line); padding: .7rem .8rem; white-space: pre-wrap; word-break: break-word; border-radius: var(--radius); }

.slider-row { display: grid; grid-template-columns: 1fr; gap: .2rem; margin-bottom: .9rem; }
.slider-row .top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.slider-row .val { font-family: var(--font-mono); font-size: .82rem; color: var(--gold); }

/* ---------------------------------------------------------------- region exhibits (v0.2) */
.exhibit { padding: 0; overflow: hidden; }
.exhibit-toggle {
  display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--ink);
  padding: 1.05rem 1.2rem; border-radius: 0; font: inherit;
}
.exhibit-toggle:hover { background: var(--glass); }
.exhibit-toggle .chev { font-family: var(--font-mono); color: var(--brass); font-size: 1.1rem; line-height: 1; }
.exhibit-body { padding: 0 1.2rem 1.15rem; }
.exhibit-body p:last-child { margin-bottom: 0; }
.crosslinks { margin-top: 1rem; }

.fiction-tag {
  display: inline-block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tier-f); border: 1px solid var(--tier-f); border-radius: 999px; padding: .05rem .45rem;
  margin-right: .4rem; vertical-align: middle;
}
.fiction-exhibit { border-color: rgba(224, 90, 90, .38); }
.notice.fiction { border-color: var(--tier-f); background: rgba(224, 90, 90, .08); }

#scale-readout.notice { font-family: var(--font-mono); }

@media (max-width: 860px) {
  h1 { font-size: 1.5rem; }
  .top-in { gap: .5rem; }
  nav.main {
    margin-left: 0; width: 100%; display: flex; flex-wrap: nowrap;
    overflow-x: auto; white-space: nowrap; gap: .35rem;
    padding-bottom: .25rem; scrollbar-width: thin;
  }
  nav.main a { flex: 0 0 auto; }
  .dawn { padding: 1.6rem 1rem; }
  .fb-btn { bottom: .6rem; right: .6rem; font-size: .8rem; }
  .sun-svg text { font-size: 17px; }
}