/* SPDX-FileCopyrightText: 2026 Jukka Aho
 * SPDX-License-Identifier: AGPL-3.0-or-later */
.learning-opening { width: var(--openpfc-wrap); margin: 2rem auto 0; }
.learning-opening .article-title { padding-top: 2rem; }
.learning-opening .article-title h1 { max-width: 16ch; }
.learning-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }
.learning-card { border: 1px solid var(--openpfc-line); padding: 1.6rem; background: var(--openpfc-wash); }
.learning-card h3 { margin: .4rem 0 .8rem; }
.learning-card p:last-child { margin-bottom: 0; }
.learning-label { font: .72rem/1.5 var(--openpfc-font-mono); color: var(--openpfc-copper-ink); text-transform: uppercase; letter-spacing: .05em; }
.learning-next { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 3rem; padding: 1.5rem 0; border-top: 1px solid var(--openpfc-line); }
.learning-note { padding: 1rem 1.4rem; border-left: 3px solid var(--openpfc-tide); background: var(--openpfc-stone); }
.learning-lab { margin: 2rem 0; padding: 1.4rem; border: 1px solid var(--openpfc-line); background: var(--openpfc-wash); min-width: 0; }
.lab-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem 1.6rem; margin: 1rem 0; }
.lab-controls label { display: grid; gap: .5rem; font-size: .9rem; min-width: 9rem; }
.lab-controls input[type=range] { width: 100%; accent-color: var(--openpfc-tide); }
.lab-controls select, .lab-controls button, .lab-presets button { font: inherit; padding: .5rem .7rem; color: var(--openpfc-text); border: 1px solid var(--openpfc-muted); background: var(--openpfc-paper); border-radius: 0; }
.lab-presets { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
.lab-presets button { cursor: pointer; font-size: .85rem; }
.lab-controls button:focus-visible, .lab-presets button:focus-visible, .lab-controls input:focus-visible, .lab-controls select:focus-visible { outline: 3px solid var(--openpfc-tide); outline-offset: 3px; }
.lab-plot { width: 100%; min-height: 370px; }
.lab-status { min-height: 3rem; font-size: .92rem; padding: .8rem 0; }
.lab-results { display: flex; flex-wrap: wrap; gap: .7rem 1.5rem; font: .8rem/1.7 var(--openpfc-font-mono); }
.lab-caption { color: var(--openpfc-muted); font-size: .85rem; }
.learning-article pre { max-width: 100%; overflow-x: auto; padding: 1.2rem; background: var(--openpfc-stone); }
.learning-article .sourceCode { max-width: 100%; }
.learning-article :is(p, li) code { overflow-wrap: anywhere; }
.learning-search { display: flex; gap: .7rem; margin: 2rem 0 1rem; }
.learning-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.learning-search input { min-width: 0; flex: 1; padding: .8rem; background: var(--openpfc-paper); color: var(--openpfc-text); border: 1px solid var(--openpfc-muted); font: inherit; }
.learning-search button { padding: .7rem 1rem; border: 1px solid var(--openpfc-tide); background: var(--openpfc-tide); color: var(--openpfc-paper); font: inherit; cursor: pointer; }
.learning-search :focus-visible { outline: 3px solid var(--openpfc-copper-ink); outline-offset: 3px; }
.search-results { padding-left: 1.4rem; }
.search-results li { margin: 1.6rem 0; }
.search-results a { font: 500 1.4rem/1.3 var(--openpfc-font-serif); }
.search-results p { font-size: .95rem; color: var(--openpfc-muted); }
@media (max-width: 650px) {
  .article-body table { display: block; max-width: 100%; overflow-x: auto; }
  .learning-paths { grid-template-columns: 1fr; }
  .learning-lab { padding: .6rem; }
  .lab-controls { gap: 1rem; }
  .lab-controls label { min-width: 7rem; flex: 1; }
  .lab-plot { min-height: 340px; }
}

.course-navigation { margin: 1.5rem 0 2.5rem; padding: 1.2rem; border: 1px solid var(--openpfc-line); background: var(--openpfc-wash); }
.course-navigation ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem 1.6rem; padding-left: 1.6rem; }
.course-navigation [aria-current=step] { font-weight: 700; text-decoration-thickness: 3px; }
.course-navigation [data-completed=true]::after { content: " ✓"; color: var(--openpfc-tide); }
.course-progress { border-top: 1px solid var(--openpfc-line); padding-top: 1rem; font-size: .85rem; }
.course-progress label { display: flex; gap: .6rem; align-items: baseline; }
.course-progress input { accent-color: var(--openpfc-tide); }
.course-progress p { margin: .7rem 0; }
.course-progress button { font: inherit; padding: .4rem .6rem; background: var(--openpfc-paper); color: var(--openpfc-text); border: 1px solid var(--openpfc-muted); cursor: pointer; }
.course-progress small { display: block; margin-top: .7rem; color: var(--openpfc-muted); }
.course-checkpoint { padding: 1.2rem; margin: 1.5rem 0; border-left: 3px solid var(--openpfc-copper-ink); background: var(--openpfc-stone); }
.course-checkpoint summary { font-weight: 500; cursor: pointer; }
.course-checkpoint[open] summary { margin-bottom: 1rem; }
.experiment-actions { display: flex; gap: .8rem 1.5rem; flex-wrap: wrap; font-size: .85rem; }
.course-navigation :focus-visible, .course-checkpoint summary:focus-visible { outline: 3px solid var(--openpfc-tide); outline-offset: 3px; }
[hidden] { display: none !important; }
@media (max-width: 650px) { .course-navigation ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.halo-illustration { padding: 1.2rem; margin: 2rem 0; background: var(--openpfc-wash); border: 1px solid var(--openpfc-line); }
.halo-illustration > div { display: grid; grid-template-columns: 4rem 1fr 2fr 1fr; align-items: center; gap: .6rem; margin: .7rem 0; font: .8rem/1.5 var(--openpfc-font-mono); text-align: center; }
.halo-illustration span { padding: .8rem .2rem; }
.halo-owned { border: 1px solid var(--openpfc-tide); background: var(--openpfc-stone); }
.halo-ghost { border: 1px dashed var(--openpfc-copper-ink); }
.halo-illustration p { font-size: .85rem; margin-bottom: 0; }
@media (max-width: 450px) { .halo-illustration { padding: .6rem; } .halo-illustration > div { grid-template-columns: 3rem 1fr 1.5fr 1fr; gap: .3rem; font-size: .65rem; } }

.spectral-pipeline { display: flex; flex-wrap: wrap; gap: .7rem; padding: 0; margin: 2rem 0; list-style-position: inside; }
.spectral-pipeline li { flex: 1; min-width: 8rem; padding: .8rem; border: 1px solid var(--openpfc-line); background: var(--openpfc-wash); font: .85rem/1.5 var(--openpfc-font-mono); }

/* A complete default reading path also survives disabled or failed scripts. */
.learning-lab:not([data-ready=true]) :is(.lab-controls, .lab-presets, .lab-results, .experiment-actions) { display: none; }
.learning-lab:not([data-ready=true]) .lab-plot { max-height: 0; min-height: 0; overflow: hidden; visibility: hidden; }
.learning-lab[data-ready=true] .lab-fallback { display: none; }
.lab-fallback img { display: block; width: 100%; height: auto; }
@media (max-width: 650px) { .lab-fallback img { aspect-ratio: 280 / 440; } }

.search-results .learning-label { display: block; margin-bottom: .4rem; }
.lab-controls select { min-width: 0; max-width: 100%; width: 100%; }
.course-navigation a, .learning-next a { display: inline-block; min-height: 24px; }