/*
 * The full course: the course page, the study plan and the station pages. Linked AFTER course.css (which defines the
 * course tokens such as --warn and --ok-soft) on those pages only, so the free check and its report stay light.
 * Same rules as course.css: theme tokens only (a test fails on any written-out colour), rem sizes, motion stops under
 * prefers-reduced-motion.
 */
/*
 * Motion idea: the station's own clock is the signature. On the course page and at the top of every station the
 * timeline draws itself once, to the real NMC length of that station, and the prompt marker settles where the NMC prompt
 * comes (5 minutes before the end of an APIE station, 3 before the end of a skills station). While a station runs, the
 * clock bar is live; at the prompt it turns to the warning colour with one pop. Everything else is feedback (ticks, the result). Reduced motion: nothing moves.
 */
@keyframes oc-bell { 0% { transform: translateX(-50%) scale(0.4); opacity: 0; } 70% { transform: translateX(-50%) scale(1.18); opacity: 1; } 100% { transform: translateX(-50%) scale(1); } }

/* the station timeline (course hero and station pages) */
.oc-tl { position: relative; display: flex; height: 2.6rem; border-radius: 0.8rem; overflow: visible; font-size: 0.82rem; font-weight: 700; line-height: 1; }
.oc-tl > span { display: flex; align-items: center; gap: 0.35rem; padding: 0 0.7rem; flex-shrink: 1; flex-basis: 0; min-width: 0; transform-origin: left; animation: oc-draw 700ms var(--ease) both; white-space: nowrap; }
.oc-tl b { font-weight: 800; }
.oc-tl-main { background: var(--accent); color: var(--accent-ink); border-radius: 0.8rem 0 0 0.8rem; animation-delay: 200ms !important; animation-duration: 800ms !important; }
.oc-tl-solo { border-radius: 0.8rem; background: var(--ink); color: var(--page); }
.oc-tl-last { position: relative; justify-content: flex-end; background: var(--warn-soft); color: var(--ink); border-radius: 0 0.8rem 0.8rem 0; box-shadow: inset 0 0 0 1.5px var(--warn); animation-delay: 650ms !important; }
.oc-tl-bell { position: absolute; left: 0; top: -0.55rem; bottom: -0.55rem; width: 0.2rem; background: var(--warn); border-radius: 999px; transform: translateX(-50%); animation: oc-bell 500ms 1250ms var(--ease) both; }
.oc-tl-bell span { font-style: normal; position: absolute; top: -1.45rem; left: 50%; transform: translateX(-50%); font-size: 0.75rem; font-weight: 800; color: var(--warn); background: var(--page); padding: 0 0.3rem; border-radius: 0.3rem; }
.oc-tl-text { font-size: 0.9rem; color: var(--ink-2); margin-top: 0.65rem; line-height: 1.5; }
@media (max-width: 380px) { .oc-tl { font-size: 0.74rem; } .oc-tl > span { padding: 0 0.45rem; } }
/* flex-grow by minutes, so every bar is drawn to its real length without inline styles */
.g-1 { flex-grow: 1; } .g-2 { flex-grow: 2; } .g-3 { flex-grow: 3; } .g-4 { flex-grow: 4; } .g-5 { flex-grow: 5; } .g-6 { flex-grow: 6; } .g-7 { flex-grow: 7; } .g-8 { flex-grow: 8; } .g-9 { flex-grow: 9; } .g-10 { flex-grow: 10; } .g-11 { flex-grow: 11; } .g-12 { flex-grow: 12; } .g-13 { flex-grow: 13; } .g-14 { flex-grow: 14; } .g-15 { flex-grow: 15; } .g-16 { flex-grow: 16; } .g-17 { flex-grow: 17; } .g-18 { flex-grow: 18; } .g-19 { flex-grow: 19; } .g-20 { flex-grow: 20; } .g-21 { flex-grow: 21; }

/* course page hero: a real station, with the timeline drawing itself */
.oc-course-hero .oc-hero-copy .display { max-width: 14ch; }
@media (min-width: 1000px) { .oc-course-hero .display { font-size: clamp(2.8rem, 4.2vw, 3.9rem); } }
.oc-door-demo .oc-sample-panel { padding: clamp(0.75rem, 3.6vw, 2rem); }
.oc-door-demo .oc-door-panel { box-shadow: var(--sh-2, none); animation: none; }
.oc-door-demo { margin: 0; }
.oc-door-panel { position: relative; border-radius: 1.75rem; padding: clamp(1.25rem, 4vw, 2.25rem); padding-top: clamp(2.25rem, 5vw, 2.75rem); background: var(--page); box-shadow: var(--sh-3, none), inset 0 0 0 1px var(--line); animation: oc-rise 800ms 100ms var(--ease) both; }
.oc-door-k { font-size: 0.85rem; font-weight: 700; color: var(--accent-deep); }
.oc-door-t { font-size: clamp(1.3rem, 3vw, 1.65rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin-top: 0.35rem; text-wrap: balance; }
.oc-door-s { color: var(--ink-2); font-weight: 600; font-size: 0.92rem; margin: 0.35rem 0 1.9rem; }
.oc-door-pts { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 0.5rem; }
.oc-door-pts li { display: grid; gap: 0.4rem; justify-items: start; padding: 0.75rem 0.85rem; border-radius: 0.9rem; background: var(--wash); font-size: 0.93rem; line-height: 1.45; animation: oc-rise 500ms var(--ease) both; }
.oc-door-pts li:nth-child(1) { animation-delay: 1500ms; }
.oc-door-pts li:nth-child(2) { animation-delay: 1620ms; }
.oc-door-pts li:nth-child(3) { animation-delay: 1740ms; }
.oc-door-std { display: flex; flex-wrap: wrap; gap: 0.3rem; }

/* platform and Code chips */
.oc-stds { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.15rem; }
.oc-std { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; font-weight: 600; line-height: 1.2; padding: 0.15rem 0.55rem 0.15rem 0.2rem; border-radius: 999px; background: var(--page); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.oc-std b { display: inline-grid; place-items: center; min-width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); font-size: 0.72rem; font-weight: 800; }

/* what you get */
.oc-get { list-style: none; padding: 0; margin: 0 0 2.25rem; display: grid; gap: 0.25rem 2.5rem; max-width: 64rem; }
@media (min-width: 860px) { .oc-get { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.oc-get li { padding: 0.95rem 0; border-top: 1.5px solid var(--ink); line-height: 1.5; }
.oc-get strong { font-size: 1.08rem; }
.oc-get [data-course-count] { font-variant-numeric: tabular-nums; }
.oc-isnot-c { margin-top: 0.5rem; }

/* the station map */
.oc-progress-line { margin-top: 1rem; font-weight: 700; color: var(--ok-ink); }
.oc-map { display: grid; gap: 2.75rem; }
.oc-map-domain { display: grid; gap: 1.25rem; }
.oc-map-dname { font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; padding-bottom: 0.6rem; border-bottom: 2px solid var(--ink); }
@media (min-width: 960px) { .oc-map-domain { grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr); align-items: start; gap: 1.25rem 2.5rem; } .oc-map-dname { grid-row: span 9; border-bottom: 0; border-top: 2px solid var(--ink); padding: 0.8rem 0 0; position: sticky; top: 6rem; } }
.oc-map-type + .oc-map-type { margin-top: 0.5rem; }
.oc-map-tname { display: flex; align-items: center; gap: 0.5rem; font-size: 1.02rem; font-weight: 800; margin-bottom: 0.4rem; }
.oc-map-tcount { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.4rem; border-radius: 999px; background: var(--wash-2); font-size: 0.78rem; font-weight: 800; }
.oc-map-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.oc-map-row { border-bottom: 1px solid var(--line); }
.oc-map-link { position: relative; isolation: isolate; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: 0.3rem 0.85rem; align-items: center; padding: 0.85rem 0.5rem; text-decoration: none; color: var(--ink); min-height: 3rem; }
.oc-map-link::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 0.8rem; background: var(--accent-soft); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease); }
a.oc-map-link:hover::before, a.oc-map-link:focus-visible::before { transform: scaleX(1); }
.oc-map-n { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.is-locked .oc-map-n { background: var(--wash-2); color: var(--ink); }
.oc-map-t { font-weight: 700; line-height: 1.3; }
.oc-map-m { display: block; font-weight: 500; font-size: 0.86rem; color: var(--ink-2); margin-top: 0.2rem; }
.oc-map-tag { font-size: 0.78rem; font-weight: 700; padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--wash-2); color: var(--ink); white-space: nowrap; }
.oc-map-lock { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--ink-2); }
.oc-map-lock .oc-ic { width: 1.05rem; height: 1.05rem; }
.oc-map-tag.is-free { background: var(--ok-soft); color: var(--ok-ink); }
.oc-map-done { grid-column: 2 / -1; justify-self: start; font-size: 0.8rem; font-weight: 800; color: var(--ok-ink); }
.is-done .oc-map-n { background: var(--ok); }
@media (max-width: 479px) { .oc-map-link { grid-template-columns: 2.2rem minmax(0, 1fr) auto; } .oc-map-tag { grid-column: 2; justify-self: start; } }

/* price and buying */
.oc-buy { display: grid; gap: 2rem; }
@media (min-width: 960px) { .oc-buy { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 3.5rem; align-items: start; } }
.oc-buy .oc-ticklist { margin-top: 1.5rem; }
.oc-price { background: var(--page); border-radius: 1.6rem; padding: clamp(1.25rem, 4vw, 2rem); box-shadow: var(--sh-2, none), inset 0 0 0 1px var(--line); }
.oc-price-amt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; }
.oc-price-amt [data-price] { font-size: clamp(2.4rem, 8vw, 3.4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.oc-price-once { font-weight: 700; color: var(--ink-2); }
.oc-soon { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 1rem; padding: 0.85rem 1rem; border-radius: 1rem; background: var(--wash); line-height: 1.45; }
.oc-soon .oc-ic { color: var(--accent-deep); margin-top: 0.15rem; }
.oc-price-try { margin: 1.25rem 0 0.5rem; }
.oc-price-try .btn, .oc-price [data-buy] { width: 100%; }
.oc-wl-h { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.oc-wl-one { font-weight: 600; margin: 0.4rem 0 1rem; }
.oc-price-terms { list-style: none; padding: 0; margin: 1.1rem 0 1.3rem; display: grid; gap: 0.5rem; font-size: 0.95rem; line-height: 1.45; }
.oc-price-terms li { position: relative; padding-left: 1.2rem; }
.oc-price-terms li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--ok); }
.oc-buy-status { min-height: 1.4rem; margin-top: 0.6rem; font-weight: 600; }
.oc-legal { max-width: 58rem; margin-top: 2rem; font-size: 0.88rem; color: var(--ink-2); line-height: 1.55; }
.oc-free-list { list-style: none; padding: 0; margin: 0.9rem 0 1.25rem; display: grid; gap: 0.4rem; }
.oc-free-list a { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0.75rem; align-items: center; padding: 0.55rem 0; font-weight: 700; line-height: 1.3; text-decoration: none; }
.oc-free-list a:hover span:last-child { text-decoration: underline; text-decoration-color: var(--accent); }

/* study plan */
.oc-plan-page { max-width: 52rem; padding-block: clamp(1.75rem, 5vw, 3.5rem) clamp(3rem, 6vw, 5rem); }
.oc-plan-h1 { font-size: clamp(2.2rem, 8vw, 3.6rem); }
.oc-next { margin: 2rem 0 0; padding: 1.25rem 1.3rem; border-radius: 1.4rem; background: var(--night); color: var(--on-night); }
.oc-next-t { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
.oc-next-empty { color: var(--on-night-2); margin-top: 0.5rem; line-height: 1.5; }
.oc-next-empty a, .oc-next a { color: var(--on-night); text-decoration-color: var(--on-night-2); }
.oc-next-list { list-style: none; padding: 0; margin: 0.9rem 0 0; display: grid; gap: 0.6rem; }
.oc-next-item { display: grid; gap: 0.2rem; padding: 0.75rem 0 0; border-top: 1px solid var(--night-line); }
.oc-next-link { font-weight: 800; }
.oc-next-why { color: var(--on-night-2); font-size: 0.92rem; }
.oc-weeks { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 2rem; }
.oc-week { padding-top: 1rem; border-top: 2px solid var(--ink); }
.oc-week-t { font-size: clamp(1.3rem, 3.4vw, 1.6rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.oc-week-first { margin: 0.5rem 0 0.9rem; color: var(--ink-2); line-height: 1.5; }
.oc-week-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.15rem; }
.oc-week-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); line-height: 1.35; }
.oc-week-list a, .oc-circuit a { font-weight: 700; }
.oc-week-list .oc-map-done { grid-column: auto; }
.oc-plan-sec { margin-top: 2.5rem; }
.oc-plan-sec .h3 { margin-bottom: 0.8rem; }
.oc-plan-sec > p { line-height: 1.55; max-width: 44rem; }
.oc-circuit { margin: 1rem 0 0; padding-left: 1.5rem; display: grid; gap: 0.5rem; }
.oc-circuit li { line-height: 1.4; }
.oc-circuit-type { display: block; font-size: 0.86rem; color: var(--ink-2); }
.oc-plan-page .band-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- a station page ---------- */
.oc-st-head { background: var(--night); color: var(--on-night); padding-block: clamp(1.25rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.75rem); }
.oc-crumbs { font-size: 0.9rem; color: var(--on-night-2); }
.oc-crumbs a { color: var(--on-night); text-decoration-color: var(--on-night-2); display: inline-block; padding: 0.4rem 0; }
.oc-st-n { margin-top: 0.75rem; font-weight: 700; color: var(--on-night-2); }
.oc-free { color: var(--on-night); }
.oc-st-title { font-size: clamp(1.85rem, 6.5vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-top: 0.35rem; text-wrap: balance; max-width: 22ch; }
.oc-st-meta { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.45rem 1rem; align-items: center; font-weight: 600; font-size: 0.92rem; color: var(--on-night-2); }
.oc-st-meta .tag { background: var(--accent); color: var(--accent-ink); }
.oc-st { max-width: 50rem; padding-block: 1.5rem clamp(3rem, 6vw, 5rem); display: grid; gap: 1.75rem; }
.oc-run { padding: 1.4rem 1.2rem 1.1rem; border-radius: 1.4rem; background: var(--wash); }
.oc-run-ctl { margin-top: 1.1rem; display: grid; gap: 0.6rem; justify-items: start; }
.oc-run-help { color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; }
.oc-st > .oc-clock { margin: 0; }
.oc-clock-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.oc-perform { padding: 1.1rem 1.2rem; border-radius: 1.3rem; background: var(--accent-soft); line-height: 1.5; animation: oc-rise 400ms var(--ease) both; }
.oc-perform-h { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.015em; color: var(--accent-deep); margin-bottom: 0.3rem; }
.is-running .oc-run { display: none; }
.oc-clock-bell { position: absolute; top: 0; bottom: 0; left: 80%; width: 3px; margin-left: -1px; background: var(--night); }
.oc-clock .oc-clock-split { left: 20%; }
.oc-clock[data-phase="last"] .oc-clock-fill, .oc-clock[data-phase="over"] .oc-clock-fill { background: var(--warn-soft); }
.oc-clock[data-phase="last"] .oc-clock-phase { color: var(--warn-soft); }
.oc-clock.is-bell .oc-clock-time { animation: oc-pop 450ms var(--ease) both; }
.oc-clock .oc-clock-row { flex-wrap: wrap; }
.oc-run-note { margin-top: 1rem; padding: 0.85rem 1rem; border-radius: 1rem; background: var(--page); box-shadow: inset 0 0 0 1.5px var(--warn); line-height: 1.5; }
.oc-peek { justify-self: start; }

.oc-ci { position: relative; padding: clamp(1.25rem, 4vw, 1.9rem); border-radius: 1.4rem; background: var(--page); box-shadow: inset 0 0 0 2px var(--ink); line-height: 1.6; }
.oc-ci-h { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.015em; }
.oc-ci-set { margin-top: 0.5rem; color: var(--ink-2); }
.oc-ci-body { display: grid; gap: 0.8rem; margin-top: 1rem; font-size: 1.05rem; }
.oc-ci-tasks-h { margin-top: 1.25rem; font-size: 1.05rem; font-weight: 800; }
.oc-ci-tasks { margin: 0.4rem 0 0; padding-left: 1.4rem; display: grid; gap: 0.35rem; font-weight: 600; }
.oc-ci-eq { margin-top: 1.1rem; font-size: 0.93rem; color: var(--ink-2); }
.oc-ci-eq strong { color: var(--ink); }
.oc-ci-end { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.3rem; font-size: 0.78rem; font-weight: 800; color: var(--ink-2); text-align: center; }
.oc-ci-end::before, .oc-ci-end::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.is-perform .oc-ci { animation: none; }

.oc-fold { border-radius: 1.2rem; box-shadow: inset 0 0 0 1.5px var(--line-2); background: var(--page); }
.oc-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; padding: 0.6rem 1.1rem; font-weight: 700; cursor: pointer; list-style: none; }
.oc-fold > summary::-webkit-details-marker { display: none; }
.oc-fold > summary::after { content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-right: 2.5px solid var(--accent-deep); border-bottom: 2.5px solid var(--accent-deep); transform: translateY(-0.15rem) rotate(45deg); transition: transform 220ms var(--ease); }
.oc-fold[open] > summary::after { transform: translateY(0.1rem) rotate(225deg); }
.oc-fold-body { padding: 0 1.1rem 1.1rem; }

.oc-st-h2 { font-size: clamp(1.4rem, 4.4vw, 1.75rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 0.5rem; }
.oc-st-sub { color: var(--ink-2); margin-bottom: 1rem; line-height: 1.5; }
.oc-st-check .oc-checklist { margin-top: 0; }
.oc-item-num { padding: 1rem; }
.oc-num-in { display: grid; gap: 0.45rem; justify-items: start; }
.oc-num-in label { margin: 0; }
.oc-num-out { font-weight: 700; min-height: 0; line-height: 1.45; }
.oc-num-out:empty { display: none; }
.oc-item-num.is-ok { box-shadow: inset 0 0 0 2px var(--ok); }
.oc-item-num.is-ok .oc-num-out { color: var(--ok-ink); }
.oc-item-num.is-miss { box-shadow: inset 0 0 0 2px var(--danger); }
.oc-item-num.is-miss .oc-num-out { color: var(--danger); }
.oc-num-key { color: var(--ink-2); font-size: 0.92rem; }
.oc-item-num .oc-why { margin-left: 0; }

.oc-st-result { padding: clamp(1.25rem, 4vw, 1.75rem); border-radius: 1.5rem; background: var(--night); color: var(--on-night); }
.oc-st-result .oc-st-h2 { color: var(--on-night); }
.oc-res-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; }
.oc-res-pct { font-size: clamp(3rem, 14vw, 4.4rem); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; font-variant-numeric: tabular-nums; animation: oc-pop 450ms var(--ease) both; }
.oc-res-words { flex: 1 1 12rem; display: grid; gap: 0.45rem; justify-items: start; }
.oc-res-line { color: var(--on-night-2); }
.oc-res-miss { margin-top: 1.1rem; padding: 0.9rem 1rem; border-radius: 1rem; background: var(--danger-soft); color: var(--ink); }
.oc-res-miss-h { font-weight: 800; color: var(--danger); margin-bottom: 0.4rem; }
.oc-res-miss ul { padding-left: 1.1rem; display: grid; gap: 0.4rem; line-height: 1.45; }
.oc-res-clear { margin-top: 1rem; padding: 0.8rem 1rem; border-radius: 1rem; background: var(--ok-soft); color: var(--ok-ink); font-weight: 700; }
.oc-res-note { margin-top: 0.9rem; font-size: 0.88rem; color: var(--on-night-2); }
.oc-res-acts { margin: 1.25rem 0 0; }
.oc-st-result .btn-ghost { color: var(--on-night); box-shadow: inset 0 0 0 1.5px var(--on-night-2); background: transparent; }
.oc-st-result .oc-flash { color: var(--ink); }

.oc-walk-list { list-style: none; margin: 0; padding: 0 1.1rem 1.1rem; display: grid; }
.oc-walk-list li { position: relative; display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0.9rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.oc-walk-t { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent-deep); padding-top: 0.05rem; }
.oc-walk-b { display: grid; gap: 0.5rem; line-height: 1.5; }
.oc-say { padding: 0.65rem 0.85rem; border-radius: 0.9rem; background: var(--accent-soft); color: var(--ink); line-height: 1.5; }
.oc-say::before { content: "\201C"; font-weight: 800; color: var(--accent-deep); }
.oc-say::after { content: "\201D"; font-weight: 800; color: var(--accent-deep); }
@media (max-width: 479px) { .oc-walk-list li { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; } }

.oc-mistakes { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.oc-mistakes li { padding: 0.9rem 1rem; border-radius: 1.1rem; background: var(--wash); display: grid; gap: 0.45rem; line-height: 1.45; }
.oc-mis-m, .oc-mis-f { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: 0.6rem; align-items: start; }
.oc-mis-m { font-weight: 700; }
.oc-mis-m .oc-ic { color: var(--danger); margin-top: 0.15rem; }
.oc-mis-f .oc-ic { color: var(--ok-ink); margin-top: 0.15rem; }

.oc-pn-nav { display: grid; gap: 0.6rem; }
@media (min-width: 640px) { .oc-pn-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.oc-pn { display: grid; gap: 0.2rem; padding: 0.9rem 1.1rem; border-radius: 1.1rem; box-shadow: inset 0 0 0 1.5px var(--line-2); text-decoration: none; color: var(--ink); line-height: 1.35; transition: box-shadow 150ms var(--ease); }
.oc-pn:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.oc-pn-k { font-size: 0.85rem; font-weight: 700; color: var(--ink-2); }
.oc-pn-t { font-weight: 800; }
.oc-pn-lock { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 700; color: var(--accent-deep); }
.oc-st-links { color: var(--ink-2); }
.oc-st-links a { font-weight: 700; }

/* while a station runs, keep the answers out of sight */
.is-running .oc-st-check, .is-running .oc-st-result, .is-running .oc-st-walk, .is-running .oc-st-mis, .is-running .oc-st-facts, .is-running .oc-pn-nav, .is-running .oc-st-links { display: none; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .oc-run, .oc-pn-nav, .oc-clock, .oc-dock, .oc-perform, .oc-peek { display: none !important; }
  .oc-st-head { background: var(--page); color: var(--ink); }
  .oc-fold > summary::after { display: none; }
}