/* GO DEEPER INTO HISTORY (goals/history.js): the ages chosen, the line through them, the age you're on, its questions and the
   game. The controls are the site's own (nav/ui.css, and goals.css's); gold for what you do, the door's color only on a row's
   kicker and icon, saying which app it opens */

/* ---- setting it up: the ages, in their three stretches, and what draws you */
.gh-pick { margin: 4px 0 14px; }
.gh-presets { margin: 0 0 12px; }
.gh-presets > button { font: 700 12.5px var(--sans); }
.gh-band { margin: 0 0 12px; }
.gh-band > b { display: block; margin: 0 0 6px; font: 800 10.5px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.gh-ages { display: flex; flex-wrap: wrap; gap: 6px; }
.gh-chip, .gh-topic { position: relative; cursor: pointer; }
.gh-chip input, .gh-topic input { position: absolute; opacity: 0; pointer-events: none; }
.gh-chip > span { display: flex; flex-direction: column; padding: 7px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg-raised); }
.gh-chip b { font: 700 13px/1.25 var(--sans); }
.gh-chip small { font: 12px var(--sans); color: var(--muted); }
.gh-chip input:checked + span { border-color: color-mix(in srgb, var(--gold) 70%, var(--rule)); background: color-mix(in srgb, var(--gold) 16%, var(--bg-raised)); }
.gh-chip input:focus-visible + span, .gh-topic input:focus-visible ~ span { outline: 2px solid var(--gold); outline-offset: 2px; }
.gh-l2 { margin-top: 18px; }
.gh-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 0 0 14px; }
.gh-topic { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); }
.gh-topic > i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 6%, var(--bg)); color: var(--muted); }
.gh-topic > span { display: flex; flex-direction: column; }
.gh-topic b { font: 700 14px/1.3 var(--sans); }
.gh-topic small { font: 12.5px/1.4 var(--sans); color: var(--muted); }
.gh-topic:has(input:checked) { border-color: color-mix(in srgb, var(--gold) 70%, var(--rule)); background: color-mix(in srgb, var(--gold) 12%, var(--bg-raised)); }
.gh-topic:has(input:checked) > i { background: var(--gold); color: var(--on-gold, #1c1a17); }
.gh-count { margin: 4px 0 0; }

/* ---- the line through time: each age a stretch, filled as far as you've come */
.gh-line { display: flex; gap: 3px; margin: 6px 0 4px; }
.gh-seg { position: relative; flex: 1; min-width: 6px; height: 14px; padding: 0; overflow: hidden; border: none; border-radius: 4px; background: color-mix(in srgb, var(--ink) 9%, var(--bg)); cursor: pointer; }
.gh-seg > i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--gl-good) 70%, var(--bg)); }
.gh-seg.is-done > i { background: var(--gl-good); }
.gh-seg.is-on { outline: 2.5px solid var(--gold); outline-offset: 1.5px; }
.gh-seg.is-now:not(.is-on) { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent); }
.gh-ends { display: flex; justify-content: space-between; margin: 0 0 14px; font: 12px var(--sans); color: var(--muted); }

/* ---- the age you're on */
.gh-age { padding: 18px 16px 14px; border: 1px solid var(--rule); border-radius: 18px; background: var(--bg-raised); scroll-margin-top: 10px; }
.gh-h { margin: 4px 0 6px; font: italic 26px/1.15 var(--serif); }
.gh-lede { margin: 0 0 12px; font: 15px/1.55 var(--sans); color: var(--ink); }
.gh-prog { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.gh-prog > span { flex: 1; height: 6px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--ink) 8%, var(--bg)); }
.gh-prog > span > i { display: block; height: 100%; background: var(--gl-good); border-radius: 3px; }
.gh-prog small { font: 12.5px var(--sans); color: var(--muted); white-space: nowrap; }
.gh-label { margin: 16px 0 2px; }
.gh-stops { margin: 0; padding: 0; list-style: none; }
.gh-stop { display: flex; align-items: center; gap: 8px; }
.gh-stop .gl-tick { width: 26px; height: 26px; border-radius: 8px; }
.gh-stop .gl-tick svg { width: 15px; height: 15px; }
.gh-stop.is-done .gl-tick { background: var(--gl-good); border-color: var(--gl-good); color: #fff; }
.gh-stop .ui-row { flex: 1; min-width: 0; }
.gh-stop .ui-row small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; line-height: 1.35; }
.gh-stop.is-done .ui-row b { color: var(--muted); }
.gh-stop .ui-row em svg { width: 15px; height: 15px; color: var(--muted); }

/* Check yourself, Remember it */
.gh-do { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--gold) 9%, var(--bg)); }
.gh-do > svg { flex: none; width: 22px; height: 22px; color: var(--gold); }
.gh-do > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gh-do b { font: 700 14.5px var(--sans); }
.gh-do small { font: 13px/1.4 var(--sans); color: var(--muted); }
.gh-do.is-done > svg { color: var(--gl-good); }
.gh-quiz { margin: 14px 0 0; padding: 14px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--rule)); border-radius: 14px; background: var(--bg); }
.gh-quiz-n { font: 800 10.5px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.gh-q { display: block; margin: 6px 0 10px; font: 700 16px/1.35 var(--sans); }
.gh-opts { display: grid; gap: 6px; }
.gh-opt { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg-raised); color: var(--ink); font: 600 14.5px/1.3 var(--sans); text-align: left; cursor: pointer; }
.gh-opt:disabled { cursor: default; opacity: 1; }
.gh-opt.is-right { border-color: var(--gl-good); background: color-mix(in srgb, var(--gl-good) 16%, var(--bg-raised)); }
.gh-opt.is-wrong { border-color: color-mix(in srgb, var(--ink) 30%, var(--rule)); color: var(--muted); text-decoration: line-through; }
.gh-why { margin: 10px 0 0; font: 14px/1.5 var(--sans); color: var(--muted); }
.gh-quiz-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 12px 0 0; }
.gh-quiz.is-end b { display: block; font: 700 16px var(--sans); }
.gh-quiz.is-end small { display: block; margin-top: 2px; font: 13.5px var(--sans); color: var(--muted); }
.gh-nav { display: flex; justify-content: space-between; gap: 8px; margin: 16px 0 0; }
.gh-nav .gl-mini { max-width: 48%; }
.gh-nav .gl-mini span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Put them in order */
.gh-order { padding: 4px 0 6px; }
.gh-ord { display: grid; gap: 6px; }
.gh-ord-it { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg-raised); color: var(--ink); font: 600 14.5px/1.3 var(--sans); text-align: left; cursor: pointer; }
.gh-ord-it > i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--rule); border-radius: 50%; font: 800 13px var(--sans); font-style: normal; }
.gh-ord-it > span { display: flex; flex-direction: column; }
.gh-ord-it small { font: 12.5px var(--sans); color: var(--muted); }
.gh-ord-it.is-on > i { border-color: var(--gold); background: var(--gold); color: var(--on-gold, #1c1a17); }
.gh-ord-it.is-right { border-color: var(--gl-good); }
.gh-ord-it.is-right > i { border-color: var(--gl-good); background: var(--gl-good); color: #fff; }
.gh-ord-right { margin: 8px 0 0; padding-left: 22px; font: 14px/1.6 var(--sans); }
.gh-ord-right small { color: var(--muted); }
.gh .ui-fold { margin-top: 14px; }