/* AURORA COURSE — the virtual classroom.
   Same night palette as the app, because the guides go from one to the other,
   and because a course they read on the bus at four in the afternoon in
   December should not be a white page in a dark van. */
:root {
  --bg: #070b14;
  --panel: #0e1526;
  --panel2: #131c31;
  --line: rgba(150, 190, 255, .14);
  --ink: #e8eefc;
  --mut: #9fb0cc;
  --faint: #6b7c99;
  --acc: #3fd8a8;          /* aurora green: the thing itself */
  --acc2: #7fb2ff;         /* the cold blue of the data */
  --warn: #ffd166;         /* what to watch */
  --bad: #ff5c74;
  --rail: 268px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1200px 700px at 20% -10%, #12203a 0%, var(--bg) 60%) fixed;
  color: var(--ink);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: grid; grid-template-columns: var(--rail) 1fr;
}
b, strong { font-weight: 700; }
.mut { color: var(--mut); font-weight: 400; }
.grow { flex: 1; }

/* ---------------- the rail ---------------- */
.rail {
  background: linear-gradient(180deg, var(--panel), #0a1020);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0;
}
.railtop { padding: 16px 16px 10px; display: grid; gap: 2px; border-bottom: 1px solid var(--line); position: relative; }
.railtop b { font-size: 15px; letter-spacing: .02em; }
.railtop .mut { font-size: 11.5px; }
.railx { display: none; position: absolute; right: 10px; top: 10px; background: none; border: 0; color: var(--mut); font-size: 18px; cursor: pointer; }
.find { margin: 10px 10px 4px; padding: 9px 11px; font: inherit; font-size: 13px; color: var(--ink);
  background: #0a1020; border: 1px solid var(--line); border-radius: 10px; outline: none; }
.find:focus { border-color: var(--acc); }
.toc { overflow-y: auto; flex: 1; padding: 8px 8px 16px; }
.toc .hit { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--ink);
  padding: 8px; border-radius: 9px; cursor: pointer; font: inherit; line-height: 1.35; }
.toc .hit:hover { background: rgba(127, 178, 255, .08); }
.toc .hit b { display: block; font-size: 12.5px; }
.toc .hit i { font-style: normal; font-size: 10.5px; color: var(--faint); }
.toc .hit mark { background: rgba(255, 209, 102, .28); color: var(--warn); border-radius: 3px; padding: 0 2px; }
.toc .none { padding: 14px 8px; font-size: 12px; color: var(--faint); }
.toc .ch {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px;
  width: 100%; text-align: left; background: none; border: 0; color: var(--ink);
  padding: 9px 8px; border-radius: 10px; cursor: pointer; font: inherit; line-height: 1.3;
}
.toc .ch:hover { background: rgba(127, 178, 255, .08); }
.toc .ch.on { background: rgba(63, 216, 168, .13); box-shadow: inset 2px 0 0 var(--acc); }
.toc .ch .n { color: var(--faint); font: 700 11px/1 ui-monospace, monospace; text-align: right; }
.toc .ch.on .n { color: var(--acc); }
.toc .ch .t { font-size: 13.5px; }
.toc .ch .t i { display: block; font-style: normal; font-size: 11px; color: var(--faint); }
.toc .ch .done { font-size: 11px; color: var(--acc); }
.railfoot { padding: 10px; display: grid; gap: 6px; border-top: 1px solid var(--line); }
.lbtn {
  display: block; text-align: center; text-decoration: none; font: 600 12px/1 system-ui, sans-serif;
  color: var(--mut); background: var(--panel2); border: 1px solid var(--line);
  border-radius: 9px; padding: 9px; cursor: pointer;
}
.lbtn:hover { color: var(--ink); }

/* ---------------- the stage ---------------- */
.stage { display: flex; flex-direction: column; min-height: 100vh; min-width: 0; }
.bar {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  border-bottom: 1px solid var(--line); background: rgba(10, 16, 30, .7); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 5;
}
.where { display: grid; min-width: 0; }
.where b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.where .mut { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iconbtn {
  background: var(--panel2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 9px; width: 36px; height: 36px; cursor: pointer; font-size: 15px; flex: 0 0 auto;
}
.iconbtn:hover { border-color: var(--acc); }
#btnMenu { display: none; }
.pill {
  font: 700 11px/1 ui-monospace, monospace; color: var(--acc2);
  background: rgba(127, 178, 255, .12); border-radius: 99px; padding: 6px 10px; white-space: nowrap;
}
.prog { height: 3px; background: rgba(150, 190, 255, .10); }
.prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--acc2), var(--acc)); width: 0; transition: width .35s ease; }

/* ---------------- a slide ---------------- */
.slide { flex: 1; padding: 26px clamp(18px, 4vw, 54px) 10px; outline: none; }
.slide .in { max-width: 1080px; margin: 0 auto; animation: rise .32s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .slide .in { animation: none; } }

.kicker { font: 700 11px/1 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); margin-bottom: 10px; }
.slide h1 { font-size: clamp(21px, 3.1vw, 31px); line-height: 1.18; margin: 0 0 18px; letter-spacing: -.01em; }
.cols { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
.cols.art { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .cols.art { grid-template-columns: 1fr; } }

.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.points li { position: relative; padding-left: 24px; font-size: 15.5px; }
.points li::before {
  content: ""; position: absolute; left: 4px; top: .58em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px rgba(63, 216, 168, .55);
}

/* his own words, kept as his own words */
.quote { margin: 20px 0 0; padding: 14px 16px; border-left: 3px solid var(--acc2);
  background: linear-gradient(90deg, rgba(127, 178, 255, .10), transparent 70%); border-radius: 0 10px 10px 0; }
.quote p { margin: 0; font-size: 15px; font-style: italic; color: #dce7ff; }
.quote footer { margin-top: 7px; font: 600 11px/1 ui-monospace, monospace; color: var(--faint); display: flex; gap: 10px; align-items: center; }
.quote footer a { color: var(--acc2); text-decoration: none; }
.quote footer a:hover { text-decoration: underline; }

.artbox { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.artbox img { display: block; width: 100%; height: auto; }
.artbox svg { display: block; width: 100%; height: auto; }
.artcap { padding: 8px 12px; font-size: 11px; color: var(--faint); border-top: 1px solid var(--line); }

/* the check: his question, put back to the reader */
.check { margin-top: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.check .q { font-weight: 700; margin-bottom: 12px; font-size: 15.5px; }
.check .q span { color: var(--warn); font-size: 11px; letter-spacing: .14em; display: block; margin-bottom: 5px; }
.opts { display: grid; gap: 8px; }
.opt {
  text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 11px; padding: 11px 14px;
  display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start;
}
.opt:hover:not(:disabled) { border-color: var(--acc2); }
.opt em { font-style: normal; font-weight: 700; color: var(--faint); }
.opt.right { border-color: var(--acc); background: rgba(63, 216, 168, .14); }
.opt.right em { color: var(--acc); }
.opt.wrong { border-color: var(--bad); background: rgba(255, 92, 116, .12); }
.opt.wrong em { color: var(--bad); }
.opt:disabled { cursor: default; }
.why { margin-top: 12px; font-size: 14px; color: var(--mut); display: none; }
.why.show { display: block; animation: rise .25s ease both; }
.why b { color: var(--acc); }

/* the title card and the closing card */
.hero { text-align: center; padding: 30px 0 10px; }
.hero h1 { font-size: clamp(26px, 5vw, 44px); margin-bottom: 8px; }
.hero .lead { color: var(--mut); max-width: 60ch; margin: 0 auto 22px; font-size: 16px; }
.facts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 24px; }
.fact { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; }
.fact b { display: block; font-size: 20px; color: var(--acc); }
.fact span { font-size: 11px; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; }
.startbtn {
  font: 700 15px/1 system-ui, sans-serif; color: #04241a; background: var(--acc);
  border: 0; border-radius: 12px; padding: 15px 30px; cursor: pointer;
}
.startbtn:hover { filter: brightness(1.08); }

/* ---------------- the footer nav ---------------- */
.nav { display: flex; align-items: center; gap: 14px; padding: 14px clamp(18px, 4vw, 54px) 22px; }
.nbtn {
  font: 600 14px/1 system-ui, sans-serif; color: var(--ink); background: var(--panel2);
  border: 1px solid var(--line); border-radius: 11px; padding: 12px 20px; cursor: pointer;
}
.nbtn:hover:not(:disabled) { border-color: var(--acc2); }
.nbtn:disabled { opacity: .35; cursor: default; }
.nbtn.primary { background: var(--acc); color: #04241a; border-color: transparent; font-weight: 700; }
.dots { flex: 1; display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(150, 190, 255, .22); cursor: pointer; }
.dots i.on { background: var(--acc); transform: scale(1.35); }
.dots i.seen { background: rgba(63, 216, 168, .45); }

/* ---------------- phone ---------------- */
.scrim { display: none; position: fixed; inset: 0; background: rgba(4, 7, 15, .6); z-index: 8; }
@media (max-width: 860px) {
  body { grid-template-columns: 1fr; }
  .rail { position: fixed; left: 0; top: 0; bottom: 0; width: 84vw; max-width: 320px; z-index: 9;
    transform: translateX(-102%); transition: transform .25s ease; }
  body.drawer .rail { transform: none; }
  body.drawer .scrim { display: block; }
  .railx { display: block; }
  #btnMenu { display: block; }
  .slide { padding: 20px 16px 6px; }
  .nav { padding: 12px 16px 20px; }
  .dots i { width: 6px; height: 6px; }
}
@media print { .rail, .bar, .nav, .prog { display: none; } body { grid-template-columns: 1fr; } }