/* === THEOPHYSICS STORY SYSTEM — shared styles === */
:root{
  --bg:#0a0e17;--bg2:#111827;--bg3:#1a2332;
  --fg:#c9d1d9;--fg2:#8b949e;--fg3:#6e7a8a;
  --gold:#c9a227;--gold2:#e5b82a;
  --green:#22c55e;--green2:#4ade80;
  --purple:#a78bfa;--purple2:#c4b5fd;
  --red:#ef4444;--red2:#f87171;
  --blue:#3b82f6;--blue2:#60a5fa;
  --border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:Georgia,'Times New Roman',serif;line-height:1.8;font-size:1.04em;min-height:100vh}
.wrap{max-width:780px;margin:0 auto;padding:0 20px 120px}

/* --- header / hero --- */
.header{text-align:center;padding:52px 16px 30px;border-bottom:1px solid var(--border)}
.header .kicker{font-family:monospace;font-size:.68em;letter-spacing:4px;text-transform:uppercase;color:var(--gold);opacity:.7}
.header h1{font-size:1.9em;margin:10px 0 6px;color:#fff}
.header .sub{font-size:.85em;color:var(--fg2);font-style:italic;max-width:580px;margin:0 auto}
.header .chi{font-size:2.8em;color:var(--gold);font-family:'Cormorant Garamond',Georgia,serif;margin:8px 0 4px;opacity:.85}

/* --- navigation --- */
.nav{text-align:center;padding:14px;font-family:monospace;font-size:.72em}
.nav a{color:var(--gold);text-decoration:none;margin:0 10px;white-space:nowrap}
.nav a:hover{text-decoration:underline}

/* --- typography --- */
h2{color:#fff;font-size:1.32em;margin:36px 0 10px}
h3{color:var(--fg);font-size:1.08em;margin:24px 0 8px}
p{margin:10px 0}
a{color:var(--gold)}a:hover{color:var(--gold2)}

/* --- cards --- */
.card{display:block;text-decoration:none;color:var(--fg);background:rgba(255,255,255,.02);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:8px;padding:18px 22px;margin:14px 0;transition:all .2s}
.card:hover{background:rgba(201,162,39,.06);border-left-color:var(--gold2);transform:translateX(4px)}
.card .tag{font-family:monospace;font-size:.62em;letter-spacing:2px;color:var(--gold);text-transform:uppercase}
.card h2{color:#fff;font-size:1.12em;margin:4px 0 5px}
.card p{font-size:.88em;color:var(--fg2);margin:0}
.card .meta{font-family:monospace;font-size:.58em;color:var(--purple);letter-spacing:1px;margin-top:6px}

.card.purple{border-left-color:var(--purple)}
.card.purple:hover{background:rgba(167,139,250,.06)}
.card.green{border-left-color:var(--green)}
.card.green:hover{background:rgba(34,197,94,.06)}
.card.blue{border-left-color:var(--blue)}
.card.blue:hover{background:rgba(59,130,246,.06)}
.card.red{border-left-color:var(--red)}
.card.red:hover{background:rgba(239,68,68,.06)}

/* --- equation boxes --- */
.eq{text-align:center;padding:24px;margin:24px 0;border:1px solid rgba(201,162,39,.2);border-radius:12px;background:rgba(201,162,39,.04)}
.eq .formula{font-family:'JetBrains Mono',monospace;font-size:1.2em;color:#fff;letter-spacing:1px}
.eq .reading{font-size:.82em;color:var(--fg2);font-style:italic;margin-top:10px;font-family:Georgia,serif}

/* --- keylines / quotes --- */
.keyline{background:rgba(201,162,39,.05);border-left:3px solid var(--gold);padding:10px 16px;margin:14px 0;font-style:italic;color:#fff;font-size:.95em}
.keyline.purple{border-left-color:var(--purple);background:rgba(167,139,250,.05)}
.keyline.green{border-left-color:var(--green);background:rgba(34,197,94,.05)}
.keyline.blue{border-left-color:var(--blue);background:rgba(59,130,246,.05)}

/* --- details / collapsible --- */
details.mirror{background:rgba(255,255,255,.015);border:1px solid var(--border);border-radius:10px;margin:14px 0;overflow:hidden}
details.mirror>summary{display:flex;align-items:center;gap:12px;padding:16px 20px;cursor:pointer;list-style:none;font-weight:600;color:#fff;font-size:1.05em;transition:background .15s}
details.mirror>summary::-webkit-details-marker{display:none}
details.mirror>summary::before{content:'▸';color:var(--gold);font-size:.9em;transition:transform .2s}
details.mirror[open]>summary::before{transform:rotate(90deg)}
details.mirror>summary:hover{background:rgba(201,162,39,.04)}
details.mirror[open]>summary{border-bottom:1px solid var(--border)}
details.mirror .body{padding:18px 22px;font-size:.96em}
details.mirror .body p{margin:8px 0}

details.story-q{background:rgba(167,139,250,.03);border:1px solid rgba(167,139,250,.15);border-radius:10px;margin:12px 0;overflow:hidden}
details.story-q>summary{display:flex;align-items:center;gap:12px;padding:16px 20px;cursor:pointer;list-style:none;font-weight:600;color:#fff;font-size:1.02em;transition:background .15s}
details.story-q>summary::-webkit-details-marker{display:none}
details.story-q>summary::before{content:'▸';color:var(--purple);font-size:.9em;transition:transform .2s}
details.story-q[open]>summary::before{transform:rotate(90deg)}
details.story-q>summary:hover{background:rgba(167,139,250,.04)}
details.story-q[open]>summary{border-bottom:1px solid rgba(167,139,250,.12)}
details.story-q .body{padding:18px 22px;font-size:.96em}
details.story-q .body p{margin:8px 0}

/* --- tables --- */
table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.85em}
th,td{border:1px solid var(--border);padding:6px 9px;text-align:left}
th{color:var(--gold);font-family:monospace;font-size:.73em;letter-spacing:1px}

/* --- status badges --- */
.badge{display:inline-block;font-family:monospace;font-size:.65em;padding:2px 9px;border-radius:10px;letter-spacing:.5px;text-transform:uppercase}
.badge.derived{color:var(--green);background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.3)}
.badge.assumed{color:var(--purple);background:rgba(167,139,250,.15);border:1px solid rgba(167,139,250,.3)}
.badge.bridge{color:var(--gold);background:rgba(201,162,39,.15);border:1px solid rgba(201,162,39,.3)}
.badge.open{color:var(--red);background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3)}

/* --- chips --- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chip{background:rgba(201,162,39,.08);border:1px solid rgba(201,162,39,.25);border-radius:14px;padding:4px 12px;cursor:pointer;font-size:.9em;color:var(--gold);font-family:'JetBrains Mono',monospace}
.chip:hover{background:rgba(201,162,39,.18)}
.chip.derived{color:var(--green);border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.06)}
.chip.open{color:var(--red);border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.06)}

/* --- footer / closer --- */
.closer{text-align:center;font-style:italic;color:#fff;padding:40px 0 12px;line-height:1.9}
.footer{text-align:center;padding:30px 16px;font-size:.7em;opacity:.35;font-family:monospace}

/* --- overlay card (for term definitions) --- */
#overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:flex-end;justify-content:center;z-index:50;font-family:'Segoe UI',Arial,sans-serif}
#overlay.show{display:flex}
@media(min-width:700px){#overlay{align-items:center}}
#ocard{background:var(--bg2);border:1px solid var(--border);border-radius:14px 14px 0 0;max-width:560px;width:100%;max-height:82vh;overflow-y:auto;padding:22px 24px 28px;box-shadow:0 -8px 40px rgba(0,0,0,.5);position:relative}
@media(min-width:700px){#ocard{border-radius:14px;max-height:78vh}}
#ocard .ctitle{font-size:1.3em;font-weight:700;color:#fff;margin-bottom:4px}
#ocard .cstatus{display:inline-block;font-family:monospace;font-size:.68em;padding:2px 9px;border-radius:10px;margin-bottom:16px;letter-spacing:.5px}
#ocard .clayer{margin-bottom:16px;padding-left:12px;border-left:3px solid var(--border)}
#ocard .clabel{font-family:monospace;font-size:.7em;letter-spacing:1px;text-transform:uppercase;color:var(--fg2);margin-bottom:5px}
#ocard .plain .clabel{color:var(--fg)}#ocard .tech .clabel{color:var(--gold)}#ocard .theo .clabel{color:var(--purple)}
#ocard .plain{border-left-color:var(--fg2)}#ocard .tech{border-left-color:var(--gold);font-family:'JetBrains Mono',monospace;font-size:.92em}#ocard .theo{border-left-color:var(--purple)}
#oclose{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--fg2);font-size:1.4em;cursor:pointer;line-height:1}