/* ==========================================================================
   DARJA RIHLA — LINUX LEARNING CONSOLE V1
   File:  dr-linux-console.css
   Scope: alles onder .dr-linux-console. Geen globale selectors, geen
          overschrijving van dr-theme-tokens.css of andere hubstijlen.
   Deps:  geen. Geen @import, geen externe fonts, geen externe assets.
   Kleur: cyber-accent #1f9fc0 uit de hubregistry in dr-theme-tokens.css.
   Motion: alleen functioneel (lesswitch), uitgeschakeld bij reduced motion.
   ========================================================================== */

.dr-linux-console {
  /* ---- typografie -------------------------------------------------- */
  /* Geen webfonts: geen externe request, en op elk apparaat voorspelbaar.
     Bewust géén serif — dr-typography.css zet de site op Playfair Display,
     en dat leest slecht bij kleine technische tekst. */
  --lc-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --lc-mono: ui-monospace, 'DejaVu Sans Mono', 'Liberation Mono', Menlo, Consolas, monospace;
  --lc-fs: 17px;

  /* ---- graphite basis (donkere console, standaard) ------------------ */
  --lc-bg: #0c1116;
  --lc-surface: #121a21;
  --lc-surface-2: #172128;
  --lc-surface-3: #1d2931;
  --lc-terminal: #080d11;

  --lc-text: #e7e4dd;            /* warm off-white */
  --lc-text-muted: #a3b0b8;
  --lc-text-faint: #7b8993;

  --lc-line: rgba(231, 228, 221, 0.10);
  --lc-line-strong: rgba(231, 228, 221, 0.22);

  --lc-accent: #45c2e0;          /* cyber-accent, opgehelderd voor donkere grond */
  --lc-accent-deep: #1f9fc0;     /* registerwaarde */
  --lc-accent-ink: #06222b;

  --lc-ok: #6fbf92;
  --lc-open: #d3ae5c;
  --lc-warn: #dd8a70;

  /* ---- maat en ritme ------------------------------------------------ */
  --lc-rail-w: clamp(13rem, 17vw, 18rem);
  --lc-ev-w: clamp(15rem, 21vw, 22rem);
  --lc-max: 2280px;
  --lc-prose: 68ch;
  --lc-gap: clamp(0.75rem, 1.4vw, 1.5rem);
  --lc-pad: clamp(1rem, 2.2vw, 2.25rem);
  --lc-radius: 3px;
  --lc-speed: 180ms;
  --lc-ease: cubic-bezier(.22, .61, .36, 1);

  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-inline: auto;
  background: var(--lc-bg);
  color: var(--lc-text);
  font-family: var(--lc-sans);
  font-size: var(--lc-fs);
  line-height: 1.6;
  overflow-x: clip;
}

.dr-linux-console *,
.dr-linux-console *::before,
.dr-linux-console *::after { box-sizing: inherit; }

/* De pagina levert haar eigen H1 binnen de content; de wrapper mag de volle
   breedte van de contentkolom nemen zonder de globale layout te forceren. */
body.dr-page-linux-console .wp-block-post-content > .dr-linux-console {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* ---- schaalgedrag op zeer grote schermen ---------------------------------
   Geen vaste pixellayout: de basisgrootte groeit mee, de leesbreedte niet. */
@media (min-width: 2400px) { .dr-linux-console { --lc-fs: 18px; --lc-max: 2600px; } }
@media (min-width: 3400px) { .dr-linux-console { --lc-fs: 21px; --lc-max: 3000px; } }
@media (min-width: 5200px) { .dr-linux-console { --lc-fs: 26px; --lc-max: 3400px; } }

/* ---- lichte modus (volgt het bestaande themamechanisme) ------------------ */
body.theme-light .dr-linux-console,
html[data-theme="light"] .dr-linux-console {
  --lc-bg: #eef2f5;
  --lc-surface: #ffffff;
  --lc-surface-2: #e6edf1;
  --lc-surface-3: #dae4ea;
  --lc-terminal: #0b1116;
  --lc-text: #14202a;
  --lc-text-muted: #47606d;
  --lc-text-faint: #5d7280;
  --lc-line: rgba(20, 32, 42, 0.12);
  --lc-line-strong: rgba(20, 32, 42, 0.26);
  --lc-accent: #0e7490;
  --lc-accent-deep: #1f9fc0;
  --lc-accent-ink: #ffffff;
  --lc-ok: #1f7a52;
  --lc-open: #8a6412;
  --lc-warn: #9a4530;
}

/* ==========================================================================
   0b. Typografie terugpakken van het thema
   dr-typography.css zet body, h1 t/m h6 en p met ELEMENT-selectors op
   var(--font-serif) = 'Playfair Display'. Overerving verliest het altijd van
   een directe elementregel, dus moet elk element hier expliciet worden gezet.
   Zelfde reden voor code/pre: dat bestand geeft ze een eigen achtergrond,
   padding en color, wat in lichte modus donkere tekst op ons donkere
   terminalvlak oplevert.
   ========================================================================== */
.dr-linux-console :is(p, li, dd, dt, span, small, b, i, em, strong, figcaption,
                      label, input, button, summary, blockquote, td, th) {
  font-family: var(--lc-sans);
}

/* Koppen en machinelabels in mono: dat is de stem van een console, en het is
   het lettertype dat bij kleine tekst het scherpst blijft. */
.dr-linux-console :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--lc-mono);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: inherit;
  margin: 0;
}

.dr-linux-console :is(code, pre, samp, kbd) {
  font-family: var(--lc-mono);
  background: none;
  padding: 0;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.dr-linux-console kbd {
  padding: 0.05em 0.4em;
  border: 1px solid var(--lc-line-strong);
  border-radius: var(--lc-radius);
  font-size: 0.85em;
}

/* ==========================================================================
   1. Basiselementen binnen scope
   ========================================================================== */
.dr-linux-console h1,
.dr-linux-console h2,
.dr-linux-console h3,
.dr-linux-console p,
.dr-linux-console ul,
.dr-linux-console ol,
.dr-linux-console dl,
.dr-linux-console pre,
.dr-linux-console figure { margin: 0; }

.dr-linux-console ul,
.dr-linux-console ol { list-style: none; padding: 0; }

.dr-linux-console a { color: var(--lc-accent); text-decoration: none; }
.dr-linux-console a:hover { text-decoration: underline; text-underline-offset: 3px; }

.dr-linux-console :is(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--lc-accent);
  outline-offset: 2px;
  border-radius: var(--lc-radius);
}

.dr-linux-console button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  min-height: 44px;
  border: 1px solid var(--lc-line-strong);
  border-radius: var(--lc-radius);
  background: var(--lc-surface-2);
}

.dr-linux-console code { font-family: var(--lc-mono); font-size: 0.92em; }

.lc-skip {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.lc-skip:focus {
  left: 0.5rem;
  top: 0.5rem;
  z-index: 30;
  width: auto;
  height: auto;
  padding: 0.6rem 1rem;
  overflow: visible;
  clip: auto;
  clip-path: none;
  background: var(--lc-accent);
  color: var(--lc-accent-ink);
  font-family: var(--lc-mono);
  font-size: 0.8rem;
}

.dr-linux-console :is(.lc-code, .lc-num, .lc-chip, .lc-block-h, .lc-ev-h,
                      .lc-lesson-meta, .lc-rail-title, .lc-module-state,
                      .lc-step-k, .lc-track-item, .lc-phase) {
  font-family: var(--lc-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ==========================================================================
   2. Topbar — de vaste statusregel van de console
   ========================================================================== */
.lc-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem var(--lc-gap);
  max-width: var(--lc-max);
  margin-inline: auto;
  padding: 0.9rem var(--lc-pad);
  border-bottom: 1px solid var(--lc-line-strong);
  background: var(--lc-surface);
}

.lc-brand {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--lc-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lc-brand-a { color: var(--lc-text); }
.lc-brand-sep { color: var(--lc-text-faint); }
.lc-brand-b { color: var(--lc-accent); }

.lc-readout { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.lc-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--lc-line-strong);
  border-radius: var(--lc-radius);
  color: var(--lc-text-muted);
  white-space: nowrap;
}
.lc-chip.is-mode { border-color: color-mix(in srgb, var(--lc-accent) 45%, transparent); color: var(--lc-accent); }

.lc-live {
  flex-basis: 100%;
  font-family: var(--lc-mono);
  font-size: 0.72rem;
  color: var(--lc-text-faint);
  min-height: 1rem;
}
.lc-live:empty { display: none; }

/* ==========================================================================
   3. Body — module rail | stage
   ========================================================================== */
.lc-body {
  display: grid;
  grid-template-columns: var(--lc-rail-w) minmax(0, 1fr);
  gap: 0;
  max-width: var(--lc-max);
  margin-inline: auto;
  border-bottom: 1px solid var(--lc-line);
}

/* ---- module rail --------------------------------------------------- */
.lc-rail {
  border-right: 1px solid var(--lc-line-strong);
  padding: var(--lc-pad) 0 var(--lc-pad) var(--lc-pad);
  background: var(--lc-surface);
  align-self: start;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lc-rail-title {
  color: var(--lc-text-faint);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--lc-line);
  margin-bottom: 0.75rem;
}
.lc-rail-title + * { margin-top: 0; }
.lc-modules + .lc-rail-title { margin-top: 1.75rem; }

.lc-module { border-bottom: 1px solid var(--lc-line); padding-bottom: 0.5rem; margin-bottom: 0.5rem; }
.lc-module:last-child { border-bottom: 0; }

.lc-module-head {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0 0.5rem;
  align-items: baseline;
  padding: 0.35rem 0.5rem 0.35rem 0;
}
.lc-module-head .lc-code { color: var(--lc-accent); }
.lc-module-head .lc-name {
  font-family: var(--lc-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--lc-text);
}
.lc-module-state {
  grid-column: 2;
  color: var(--lc-text-faint);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.lc-module[data-lc-active="true"] .lc-module-head .lc-name { color: var(--lc-accent); }
.lc-module[data-lc-active="true"] { box-shadow: inset 2px 0 0 var(--lc-accent); }

.lc-rail-link {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr) 1.1rem;
  gap: 0.35rem;
  align-items: start;
  padding: 0.4rem 0.5rem 0.4rem 0.6rem;
  border-left: 1px solid var(--lc-line);
  color: var(--lc-text-muted);
  min-height: 44px;
}
.lc-rail-link:hover { background: var(--lc-surface-2); text-decoration: none; color: var(--lc-text); }
.lc-rail-link .lc-num { color: var(--lc-text-faint); padding-top: 0.15rem; }
.lc-rail-link .lc-t { font-size: 0.92rem; line-height: 1.4; font-family: var(--lc-sans); }
.lc-rail-link .lc-mark { font-family: var(--lc-mono); font-size: 0.8rem; color: var(--lc-text-faint); text-align: right; }

.lc-rail-link[aria-current="true"] {
  background: var(--lc-surface-3);
  border-left-color: var(--lc-accent);
  color: var(--lc-text);
}
.lc-rail-link[aria-current="true"] .lc-num { color: var(--lc-accent); }

.lc-rail-link[data-lc-state="viewed"] .lc-mark { color: var(--lc-text-muted); }
.lc-rail-link[data-lc-state="practiced"] .lc-mark { color: var(--lc-open); }
.lc-rail-link[data-lc-state="verified"] .lc-mark { color: var(--lc-ok); }

.lc-planned li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0 0.5rem;
  padding: 0.3rem 0.5rem 0.3rem 0;
  color: var(--lc-text-faint);
}
.lc-planned .lc-code { color: var(--lc-text-faint); }
.lc-planned .lc-name { font-family: var(--lc-mono); font-size: 0.72rem; letter-spacing: 0.08em; }
.lc-planned .lc-module-state { grid-column: 2; }

.lc-rail-note {
  margin-top: 0.9rem;
  padding-right: var(--lc-pad);
  font-size: 0.78rem;
  color: var(--lc-text-faint);
  line-height: 1.5;
}

/* rail-toggle wordt alleen door JS toegevoegd */
.dr-linux-console .lc-rail-toggle {
  display: none;
  width: calc(100% - var(--lc-pad));
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0 0.75rem;
  font-family: var(--lc-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ==========================================================================
   4. Stage
   ========================================================================== */
.lc-stage { min-width: 0; padding: var(--lc-pad); }
.lc-stage:focus { outline: none; }
.lc-stage:focus-visible { outline: 3px solid var(--lc-accent); outline-offset: -3px; }

.lc-h1 {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin-bottom: 0.6rem;
}
.lc-h2 {
  font-family: var(--lc-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lc-accent);
  margin-bottom: 0.6rem;
}
.lc-lede { max-width: var(--lc-prose); color: var(--lc-text-muted); font-size: 1.05rem; }

.lc-intro { padding-bottom: var(--lc-pad); border-bottom: 1px solid var(--lc-line-strong); }

/* Met JavaScript wordt de toelichting ingeklapt zodat de actieve les bovenaan
   begint. Zonder JavaScript blijft alles gewoon staan en leesbaar. */
.dr-linux-console .lc-intro-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0 0.9rem;
  background: transparent;
  border-color: var(--lc-line);
  color: var(--lc-text-faint);
  font-family: var(--lc-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dr-linux-console .lc-intro-toggle:hover { color: var(--lc-text); border-color: var(--lc-line-strong); }
.dr-linux-console.lc-js .lc-intro-toggle { display: inline-flex; }
.lc-js .lc-intro-detail[hidden] { display: none; }
.lc-js .lc-intro-detail { margin-top: var(--lc-gap); }
.lc-js .lc-intro-grid { margin-top: 0; }

.lc-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--lc-gap);
  margin-top: calc(var(--lc-gap) * 1.4);
  align-items: start;
}

.lc-method,
.lc-doctrine,
.lc-artifacts,
.lc-diagram-wrap {
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius);
  background: var(--lc-surface);
  padding: calc(var(--lc-pad) * 0.75);
}
.lc-doctrine, .lc-artifacts { margin-top: var(--lc-gap); }
.lc-doctrine p, .lc-artifacts p { max-width: var(--lc-prose); color: var(--lc-text-muted); }
.lc-doctrine { border-left: 3px solid var(--lc-accent); }

.lc-method-line {
  font-family: var(--lc-mono);
  font-size: clamp(0.7rem, 1.05vw, 0.86rem);
  letter-spacing: 0.1em;
  color: var(--lc-text);
  overflow-x: auto;
  padding-bottom: 0.4rem;
  white-space: nowrap;
}
.lc-method-note { margin-top: 0.75rem; max-width: var(--lc-prose); color: var(--lc-text-muted); font-size: 0.92rem; }

.lc-diagram-wrap figcaption {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--lc-text-faint);
}
.lc-diagram { display: block; width: 100%; height: auto; max-width: 34rem; margin-inline: auto; }
.lc-diagram rect { fill: var(--lc-surface-2); stroke: var(--lc-line-strong); stroke-width: 1; }
.lc-diagram text { fill: var(--lc-text-muted); font-family: var(--lc-mono); font-size: 10px; letter-spacing: 0.1em; }
.lc-diagram .lc-layer-code { fill: var(--lc-text-faint); }
.lc-diagram .lc-layer-link { stroke: var(--lc-line-strong); stroke-width: 1; }
.lc-diagram .lc-layer[data-lc-current="true"] rect { fill: var(--lc-surface-3); stroke: var(--lc-accent); stroke-width: 2; }
.lc-diagram .lc-layer[data-lc-current="true"] text { fill: var(--lc-accent); }

.lc-artifact-list { display: grid; gap: 0.4rem; margin-top: 0.25rem; }
.lc-artifact-list li {
  display: grid;
  grid-template-columns: 2.6rem minmax(11rem, auto) minmax(0, 1fr);
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.35rem 0;
  border-top: 1px solid var(--lc-line);
  font-size: 0.9rem;
  color: var(--lc-text-muted);
}
.lc-artifact-list code { color: var(--lc-text); }
.lc-artifact-note { margin-top: 0.6rem; font-size: 0.85rem; color: var(--lc-text-faint); }

/* ==========================================================================
   5. Les
   ========================================================================== */
.lc-lessons-stage { display: grid; gap: calc(var(--lc-gap) * 2); padding-top: var(--lc-pad); }

.lc-lesson {
  border: 1px solid var(--lc-line-strong);
  border-radius: var(--lc-radius);
  background: var(--lc-surface);
  overflow: hidden;
}

.lc-lesson-head {
  padding: calc(var(--lc-pad) * 0.8);
  border-bottom: 1px solid var(--lc-line-strong);
  background: var(--lc-surface-2);
}
.lc-lesson-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; color: var(--lc-text-faint); }
.lc-lesson-meta .lc-lesson-module { color: var(--lc-accent); }
.lc-lesson-title {
  margin-top: 0.5rem;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  max-width: 26ch;
}
.lc-lesson-sub { margin-top: 0.4rem; color: var(--lc-text-muted); max-width: var(--lc-prose); }

.lc-phases { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.9rem; }
.lc-phase {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius);
  color: var(--lc-text-faint);
  font-size: 0.72rem;
}
.lc-phase.is-on {
  border-color: var(--lc-accent);
  color: var(--lc-accent);
  background: color-mix(in srgb, var(--lc-accent) 12%, transparent);
}

.lc-lesson-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lc-ev-w);
}

.lc-lesson-main { min-width: 0; padding: calc(var(--lc-pad) * 0.8); display: grid; gap: 1.25rem; }

.lc-block { max-width: var(--lc-prose); }
.lc-block-h { color: var(--lc-text-faint); margin-bottom: 0.35rem; }
.lc-block p + p { margin-top: 0.6rem; }
.lc-block.is-question { max-width: none; }
.lc-block.is-question p {
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.35;
  color: var(--lc-text);
  max-width: 42ch;
}
.lc-block.is-question .lc-block-h { color: var(--lc-accent); }
.lc-block.is-command, .lc-block.is-output { max-width: none; }

.lc-block.is-notproof {
  border-left: 3px solid var(--lc-warn);
  padding-left: 0.9rem;
  max-width: var(--lc-prose);
}
.lc-block.is-notproof .lc-block-h { color: var(--lc-warn); }

.lc-block.is-verify { border-left: 3px solid var(--lc-accent); padding-left: 0.9rem; }
.lc-block.is-verify .lc-block-h { color: var(--lc-accent); }

.lc-block.is-artifact .lc-block-h { color: var(--lc-open); }

/* Het terminalvlak is in beide modi donker; alleen dan blijft een commando
   herkenbaar als iets wat je typt. De tekstkleuren staan daarom vast en
   worden NIET per thema gewisseld — dat was precies de fout waardoor het
   commando in lichte modus onleesbaar werd. */
.dr-linux-console .lc-pre {
  background: #05090d;
  border: 1px solid #2a3a46;
  border-radius: var(--lc-radius);
  padding: 0.9rem 1.05rem;
  overflow-x: auto;
  font-family: var(--lc-mono);
  font-size: 0.95rem;
  line-height: 1.65;
  color: #e8f4fa;
  tab-size: 4;
}
.dr-linux-console .lc-pre code {
  font-size: inherit;
  white-space: pre;
  color: inherit;
  background: none;
  padding: 0;
}
.dr-linux-console .lc-pre.is-command {
  border-left: 3px solid #4bd6a0;
  color: #b8f5d4;
  font-weight: 500;
}
.dr-linux-console .lc-pre.is-output { color: #b9cdd8; }

/* knoppenrij onder een commandoblok (door JS toegevoegd) */
.lc-cmd-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.55rem; }
.lc-cmd-actions button {
  padding: 0 0.85rem;
  font-family: var(--lc-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  background: var(--lc-surface-2);
  color: var(--lc-text);
}
.lc-cmd-actions button[data-lc-to-term] {
  border-color: var(--lc-accent);
  color: var(--lc-accent);
}
.lc-cmd-actions button:hover { background: var(--lc-surface-3); }

/* ---- evidence rail --------------------------------------------------- */
.lc-evidence {
  min-width: 0;
  padding: calc(var(--lc-pad) * 0.8);
  border-left: 1px solid var(--lc-line-strong);
  background: var(--lc-surface-2);
  display: grid;
  gap: 1rem;
  align-content: start;
}

.lc-facts { display: grid; gap: 0.5rem; }
.lc-facts > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.5rem; align-items: baseline; }
.lc-facts dt {
  font-family: var(--lc-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lc-text-faint);
}
.lc-facts dd { font-size: 0.86rem; color: var(--lc-text); }

.lc-ev-h { color: var(--lc-accent); border-top: 1px solid var(--lc-line); padding-top: 0.75rem; }

.lc-ev-list { display: grid; gap: 0.45rem; }
.lc-ev {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.4;
}
.lc-ev-mark { font-family: var(--lc-mono); }
.lc-ev.is-gate .lc-ev-mark { color: var(--lc-ok); }
.lc-ev.is-open .lc-ev-mark { color: var(--lc-open); }
.lc-ev-text { color: var(--lc-text); }
.lc-ev-state {
  grid-column: 2;
  font-family: var(--lc-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lc-text-faint);
}
.lc-ev.is-open .lc-ev-state { color: var(--lc-open); }

.lc-terms { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.lc-terms li {
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius);
  font-family: var(--lc-mono);
  font-size: 0.76rem;
  color: var(--lc-text-muted);
}

.lc-gate { font-size: 0.86rem; color: var(--lc-text-muted); }

/* ---- voortgangsknoppen (alleen met JS) -------------------------------- */
.lc-progress-slot:empty { display: none; }
.lc-progress {
  display: grid;
  gap: 0.4rem;
  border-top: 1px solid var(--lc-line);
  padding-top: 0.75rem;
}
.lc-progress-h {
  font-family: var(--lc-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lc-text-faint);
}
.lc-progress-buttons { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.lc-progress-buttons button {
  flex: 1 1 6rem;
  padding: 0 0.6rem;
  font-family: var(--lc-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lc-text-muted);
}
.lc-progress-buttons button[aria-pressed="true"] {
  border-color: var(--lc-accent);
  background: color-mix(in srgb, var(--lc-accent) 16%, transparent);
  color: var(--lc-text);
}
.lc-progress-note { font-size: 0.78rem; color: var(--lc-text-faint); line-height: 1.45; }

/* ---- lesvoet ---------------------------------------------------------- */
.lc-lesson-foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid var(--lc-line-strong);
  background: var(--lc-line-strong);
}
.lc-step {
  display: grid;
  gap: 0.15rem;
  padding: 0.9rem calc(var(--lc-pad) * 0.8);
  background: var(--lc-surface);
  min-height: 64px;
  align-content: center;
  color: var(--lc-text);
}
.lc-step:hover { background: var(--lc-surface-3); text-decoration: none; }
.lc-step.is-next { text-align: right; }
.lc-step.is-empty { background: var(--lc-surface); }
.lc-step-k { color: var(--lc-text-faint); }
.lc-step-t { font-size: 0.9rem; line-height: 1.3; }

/* ==========================================================================
   6. Footer
   ========================================================================== */
.lc-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem var(--lc-gap);
  max-width: var(--lc-max);
  margin-inline: auto;
  padding: 0.9rem var(--lc-pad);
  border-top: 1px solid var(--lc-line-strong);
  background: var(--lc-surface);
}
.lc-track { display: flex; flex-wrap: wrap; gap: 0.3rem 0.75rem; }
.lc-track-item { color: var(--lc-text-faint); font-size: 0.66rem; }
.lc-track-item[data-lc-on="true"] { color: var(--lc-accent); }
.lc-track-item[data-lc-on="true"]::before { content: "\25CF\00a0"; }
.lc-track-item[data-lc-on="false"]::before { content: "\25CB\00a0"; }

.lc-footer-nav { display: flex; gap: 0.4rem; }
.lc-footer-nav:empty { display: none; }
.lc-footer-nav button {
  padding: 0 0.9rem;
  font-family: var(--lc-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lc-footer-nav button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ==========================================================================
   7. JS-gedrag: één les tegelijk
   Zonder JS blijft alles zichtbaar en leesbaar; er wordt niets verborgen.
   ========================================================================== */
.lc-js .lc-lesson[hidden] { display: none; }
.lc-js .lc-lessons-stage { gap: 0; }
.lc-js .lc-lesson { animation: lc-enter var(--lc-speed) var(--lc-ease) both; }

@keyframes lc-enter {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   8. Responsive
   ========================================================================== */

/* evidence onder de les zodra de derde kolom te smal wordt */
@media (max-width: 1180px) {
  .dr-linux-console { --lc-prose: 64ch; }
  .lc-lesson-grid { grid-template-columns: minmax(0, 1fr); }
  .lc-evidence { border-left: 0; border-top: 1px solid var(--lc-line-strong); }
  .lc-intro-grid { grid-template-columns: minmax(0, 1fr); }
  .lc-diagram { max-width: 26rem; }
}

/* rail boven de stage; met JS wordt hij inklapbaar */
@media (max-width: 900px) {
  .lc-body { grid-template-columns: minmax(0, 1fr); }
  .lc-rail {
    position: static;
    max-height: 22rem;
    padding: var(--lc-pad);
    border-right: 0;
    border-bottom: 1px solid var(--lc-line-strong);
  }
  .lc-rail-note { padding-right: 0; }
  .dr-linux-console.lc-js .lc-rail-toggle { display: flex; }
  .lc-js .lc-rail[data-lc-collapsed="true"] .lc-modules,
  .lc-js .lc-rail[data-lc-collapsed="true"] .lc-planned,
  .lc-js .lc-rail[data-lc-collapsed="true"] .lc-rail-title,
  .lc-js .lc-rail[data-lc-collapsed="true"] .lc-rail-note { display: none; }
  .lc-js .lc-rail[data-lc-collapsed="true"] { max-height: none; overflow: visible; }
}

@media (max-width: 620px) {
  .dr-linux-console { --lc-prose: 100%; }
  .lc-lesson-title { max-width: none; }
  .lc-lesson-foot { grid-template-columns: minmax(0, 1fr); }
  .lc-step.is-next { text-align: left; }
  .lc-step.is-empty { display: none; }
  .lc-facts > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .lc-artifact-list li { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .lc-footer { flex-direction: column; align-items: flex-start; }
  .lc-footer-nav { width: 100%; }
  .lc-footer-nav button { flex: 1; }
}

/* ==========================================================================
   9. Reduced motion — verplicht, geen uitzonderingen binnen deze scope
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .dr-linux-console *,
  .dr-linux-console *::before,
  .dr-linux-console *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   10. Print — de leerlijn moet op papier leesbaar blijven
   ========================================================================== */
@media print {
  .dr-linux-console { background: #fff; color: #000; }
  .lc-rail, .lc-footer, .lc-skip, .lc-progress-slot { display: none; }
  .lc-body { grid-template-columns: minmax(0, 1fr); }
  .lc-lesson { break-inside: avoid; border-color: #999; }
  .lc-js .lc-lesson[hidden] { display: block; }
}

/* ==========================================================================
   11. Hoe deze pagina werkt — uitleg voor wie hier voor het eerst komt
   ========================================================================== */
.lc-howto {
  margin-top: var(--lc-gap);
  border: 1px solid var(--lc-line);
  border-left: 3px solid var(--lc-accent);
  border-radius: var(--lc-radius);
  background: var(--lc-surface);
  padding: calc(var(--lc-pad) * 0.8);
}
.lc-howto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--lc-gap);
  margin-top: 0.5rem;
}
.lc-howto-h3 {
  font-family: var(--lc-mono);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: var(--lc-accent);
  margin-bottom: 0.45rem;
}
.lc-howto-col p { color: var(--lc-text-muted); font-size: 0.96rem; }
.lc-howto-col p + p { margin-top: 0.5rem; }
.lc-howto-col b { color: var(--lc-text); font-weight: 600; }
.lc-howto-list { display: grid; gap: 0.35rem; margin-top: 0.5rem; }
.lc-howto-list li {
  position: relative;
  padding-left: 1rem;
  color: var(--lc-text-muted);
  font-size: 0.94rem;
  line-height: 1.5;
}
.lc-howto-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  background: var(--lc-accent);
}
.lc-howto-warn {
  margin-top: var(--lc-gap);
  border-top: 1px solid var(--lc-line);
  padding-top: 0.85rem;
  max-width: var(--lc-prose);
  color: var(--lc-text-muted);
  font-size: 0.94rem;
}
.lc-howto-warn b { color: var(--lc-warn); }

/* ==========================================================================
   12. Oefenterminal
   Volledig door JavaScript opgebouwd; zonder JS is de slot leeg en blijft de
   lesinhoud onveranderd leesbaar.
   ========================================================================== */
.lc-term-slot:empty { display: none; }

.lc-term {
  margin-top: calc(var(--lc-gap) * 1.5);
  border: 1px solid #2a3a46;
  border-radius: var(--lc-radius);
  background: #070c11;
  overflow: hidden;
}

.lc-term-head { padding: calc(var(--lc-pad) * 0.6) calc(var(--lc-pad) * 0.75); border-bottom: 1px solid #1b2731; }
.lc-term-title {
  font-family: var(--lc-mono);
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4bd6a0;
}
.lc-term-title::before { content: "\25CF\00a0"; color: #4bd6a0; }
.lc-term-sub { margin-top: 0.35rem; color: #8fa8b4; font-size: 0.88rem; max-width: 70ch; }

.lc-term-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.6rem calc(var(--lc-pad) * 0.75);
  border-bottom: 1px solid #1b2731;
  background: #0b131a;
}
.lc-term-bar button {
  padding: 0 0.85rem;
  min-height: 40px;
  border: 1px solid #2f4450;
  background: #101c25;
  color: #cfe3ec;
  font-family: var(--lc-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
}
.lc-term-bar button:hover { background: #16262f; color: #fff; }
.lc-term-bar button:first-child { border-color: #4bd6a0; color: #8ff0c6; }

.lc-term-body { padding: 0.75rem calc(var(--lc-pad) * 0.75) calc(var(--lc-pad) * 0.7); }

.lc-term-log {
  min-height: 16rem;
  max-height: 26rem;
  overflow: auto;
  padding: 0.5rem 0;
  font-family: var(--lc-mono);
  font-size: 0.92rem;
  line-height: 1.6;
  color: #d3e6ef;
  overscroll-behavior: contain;
}
.lc-term-log div { white-space: pre-wrap; overflow-wrap: anywhere; }
.lc-term-log .is-note { color: #7f97a3; }
.lc-term-log .is-err { color: #ff9d84; }
.lc-term-log .is-teach { color: #f0c66b; }
.lc-term-log .is-in { margin-top: 0.35rem; }
.lc-term-echo { color: #4bd6a0; }
.lc-term-cmd { color: #ffffff; font-weight: 600; }

.lc-term-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.5rem;
  border-top: 1px solid #1b2731;
  padding-top: 0.75rem;
}
.lc-term-prompt {
  grid-column: 1 / -1;
  font-family: var(--lc-mono);
  font-size: 0.9rem;
  line-height: 1.4;
  color: #4bd6a0;
  white-space: pre;
}
.lc-term-form input {
  width: 100%;
  min-height: 48px;
  border: 1px solid #2f4450;
  border-radius: var(--lc-radius);
  background: #05090d;
  color: #eaf6fb;
  padding: 0 0.85rem;
  font-family: var(--lc-mono);
  font-size: 0.95rem;
}
.lc-term-form input::placeholder { color: #6d838f; }
.lc-term-form input:focus-visible { outline: 3px solid #4bd6a0; outline-offset: 2px; }
.dr-linux-console .lc-term-go {
  min-height: 48px;
  padding: 0 1.1rem;
  border: 1px solid #4bd6a0;
  border-radius: var(--lc-radius);
  background: #123328;
  color: #8ff0c6;
  font-family: var(--lc-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}
.dr-linux-console .lc-term-go:hover { background: #174936; color: #fff; }

@media (max-width: 620px) {
  .lc-term-bar button { flex: 1 1 100%; }
  .lc-term-form { grid-template-columns: minmax(0, 1fr); }
  .lc-term-go { width: 100%; }
}

@media print { .lc-term, .lc-cmd-actions { display: none; } }

.lc-lab-note {
  margin-top: 0.5rem;
  color: var(--lc-text-faint);
  font-size: 0.86rem;
  max-width: var(--lc-prose);
}

/* Alleen voor schermlezers. Deze klasse ontbrak, waardoor het label van de
   terminalinvoer zichtbaar op het scherm stond. */
.dr-linux-console .lc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   13. Werkbank — opdracht links, terminal rechts, samen één schermhoogte
   Alleen met JavaScript. Zonder JS blijft de pagina een gewoon document.
   ========================================================================== */
.dr-linux-console.dr-linux-console.is-workbench .lc-body { height: var(--lc-work-h, 42rem); }
.dr-linux-console.is-workbench .lc-rail { position: static; max-height: none; height: 100%; }
.dr-linux-console.is-workbench .lc-stage {
  min-height: 0;
  height: 100%;
  padding: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.dr-linux-console.is-workbench [data-lc-intro][data-lc-stowed] { display: none; }

.lc-work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(24rem, 38%);
  gap: 1px;
  min-height: 0;
  background: var(--lc-line-strong);
}
.lc-pane { min-width: 0; min-height: 0; background: var(--lc-bg); }
.lc-pane.is-lesson { overflow-y: auto; overscroll-behavior: contain; padding: var(--lc-pad); }
.lc-pane.is-terminal { display: grid; grid-template-rows: minmax(0, 1fr); overflow: hidden; }

.dr-linux-console.is-workbench .lc-lessons-stage { gap: 0; padding-top: 0; }
.dr-linux-console.is-workbench .lc-lesson-grid { grid-template-columns: minmax(0, 1fr); }
.dr-linux-console.is-workbench .lc-evidence { border-left: 0; border-top: 1px solid var(--lc-line-strong); }
.dr-linux-console.is-workbench .lc-term-slot { height: 100%; }
.dr-linux-console.is-workbench .lc-term {
  margin: 0;
  height: 100%;
  border: 0;
  border-radius: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}
.dr-linux-console.is-workbench .lc-term-body {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
.dr-linux-console.is-workbench .lc-term-log { max-height: none; min-height: 0; }

/* Volgende opdracht valt in de werkbank meer op: dat is de motor van de les. */
.dr-linux-console.is-workbench .lc-step.is-next { background: var(--lc-surface-3); }
.dr-linux-console.is-workbench .lc-step.is-next .lc-step-t { color: var(--lc-accent); font-weight: 600; }

/* tabs — alleen zichtbaar wanneer de twee panelen niet naast elkaar passen */
.lc-pane-tabs { display: none; gap: 1px; background: var(--lc-line-strong); }
.dr-linux-console .lc-pane-tabs button {
  flex: 1;
  border: 0;
  border-radius: 0;
  background: var(--lc-surface);
  color: var(--lc-text-muted);
  font-family: var(--lc-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dr-linux-console .lc-pane-tabs button[aria-pressed="true"] {
  background: var(--lc-surface-3);
  color: var(--lc-accent);
  box-shadow: inset 0 -2px 0 var(--lc-accent);
}

@media (max-width: 1100px) {
  .dr-linux-console.is-workbench .lc-pane-tabs { display: flex; }
  .dr-linux-console.is-workbench .lc-work { grid-template-columns: minmax(0, 1fr); }
  .dr-linux-console.is-workbench[data-lc-pane="lesson"] .lc-pane.is-terminal,
  .dr-linux-console.is-workbench[data-lc-pane="terminal"] .lc-pane.is-lesson { display: none; }
}

@media (max-width: 900px) {
  .dr-linux-console.is-workbench .lc-body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .dr-linux-console.is-workbench .lc-rail { height: auto; }
  .dr-linux-console.is-workbench .lc-work { height: var(--lc-work-h, 34rem); }
}



/* ==========================================================================
   14. Startpoort als slidecards
   Vormtaal overgenomen uit LesApp (01-Website/ChildTheme/LesApp/styles.css):
   panel, question, option met een letter, feedback, dots en een balk.
   Eén kaart, één stap tegelijk, past zonder scrollen op een laptopscherm.
   ========================================================================== */
.lc-startgate {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  background: rgba(4, 8, 11, 0.88);
  backdrop-filter: blur(4px);
}

.dr-linux-console .lc-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(44rem, 100%);
  max-height: min(88vh, 44rem);
  border: 1px solid var(--lc-line-strong);
  border-radius: 14px;
  background: var(--lc-surface);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.lc-card-head {
  display: grid;
  gap: 0.6rem;
  padding: 1.15rem 1.4rem 0.9rem;
  border-bottom: 1px solid var(--lc-line);
}
.dr-linux-console .lc-kicker {
  font-family: var(--lc-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lc-accent);
}
.lc-kicker:focus-visible { outline: 3px solid var(--lc-accent); outline-offset: 4px; }

.lc-bar { height: 4px; border-radius: 999px; background: var(--lc-line); overflow: hidden; }
.lc-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--lc-accent);
  transition: width 240ms var(--lc-ease);
}
.lc-dots { display: flex; gap: 7px; }
.lc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lc-line-strong); }
.lc-dot.is-done { background: var(--lc-ok); }
.lc-dot.is-current { background: var(--lc-accent); box-shadow: 0 0 9px var(--lc-accent); }
.lc-step-count { font-family: var(--lc-mono); font-size: 0.72rem; color: var(--lc-text-faint); }

.lc-card-stage {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.3rem 1.4rem;
}

/* uitlegkaart */
.lc-card-stage .lc-howto-col { max-width: 60ch; }
.lc-card-stage .lc-howto-h3 { font-size: 1.02rem; margin-bottom: 0.7rem; }
.lc-card-stage .lc-howto-col p { font-size: 1rem; line-height: 1.6; }

/* vraagkaart */
.dr-linux-console .lc-q {
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
}
.lc-q-legend { display: block; width: 100%; padding: 0; }
.dr-linux-console .lc-question {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--lc-sans);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--lc-text);
  max-width: 46ch;
}

.lc-opts { display: grid; gap: 0.5rem; margin-top: 1.1rem; }
.lc-opt { display: grid; }
.lc-opt-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.lc-opt-label {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  min-height: 60px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--lc-line-strong);
  border-radius: 10px;
  background: var(--lc-surface-2);
  cursor: pointer;
}
.lc-opt-label:hover { border-color: var(--lc-text-faint); }
.lc-opt-key {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid var(--lc-line-strong);
  border-radius: 50%;
  font-family: var(--lc-mono);
  font-size: 0.76rem;
  color: var(--lc-text-muted);
}
.lc-opt-text { font-size: 1rem; line-height: 1.4; color: var(--lc-text); }

.lc-opt-input:focus-visible + .lc-opt-label { outline: 3px solid var(--lc-accent); outline-offset: 2px; }

.lc-opt-input:checked + .lc-opt-label { border-width: 2px; padding: calc(0.85rem - 1px) calc(1rem - 1px); }
.lc-opt-input[data-lc-correct]:checked + .lc-opt-label {
  border-color: var(--lc-ok);
  background: color-mix(in srgb, var(--lc-ok) 12%, transparent);
}
.lc-opt-input[data-lc-correct]:checked + .lc-opt-label .lc-opt-key { border-color: var(--lc-ok); color: var(--lc-ok); }
.lc-opt-input:not([data-lc-correct]):checked + .lc-opt-label {
  border-color: var(--lc-warn);
  background: color-mix(in srgb, var(--lc-warn) 12%, transparent);
}
.lc-opt-input:not([data-lc-correct]):checked + .lc-opt-label .lc-opt-key { border-color: var(--lc-warn); color: var(--lc-warn); }

.dr-linux-console .lc-feedback {
  margin-top: 0.45rem;
  margin-left: 2.55rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--lc-line-strong);
  border-radius: 0 8px 8px 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--lc-text-muted);
}
.lc-feedback.is-ok { border-left-color: var(--lc-ok); background: color-mix(in srgb, var(--lc-ok) 8%, transparent); }
.lc-feedback.is-no { border-left-color: var(--lc-warn); background: color-mix(in srgb, var(--lc-warn) 8%, transparent); }

/* Met JavaScript verschijnt de toelichting pas na een keuze; zonder JS staat
   alles gewoon te lezen. Het is een leermoment, geen tentamen. */
.lc-js .lc-feedback { display: none; }
.lc-js .lc-opt-input:checked ~ .lc-feedback { display: block; }

.lc-card-done { display: grid; gap: 0.7rem; }
.lc-card-done-text { color: var(--lc-text-muted); max-width: 56ch; line-height: 1.6; }

.lc-card-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.4rem;
  border-top: 1px solid var(--lc-line);
  background: var(--lc-surface-2);
}
.dr-linux-console .lc-btn {
  min-height: 52px;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 10px;
  background: var(--lc-accent);
  color: var(--lc-accent-ink);
  font-family: var(--lc-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.dr-linux-console .lc-btn:last-child { margin-left: auto; }
.dr-linux-console .lc-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.dr-linux-console .lc-btn.is-ghost {
  border: 1px solid var(--lc-line-strong);
  background: none;
  color: var(--lc-text-muted);
  margin-left: auto;
}
.dr-linux-console .lc-btn.is-quiet {
  border: 0;
  background: none;
  color: var(--lc-text-faint);
  font-family: var(--lc-sans);
  font-size: 0.88rem;
  letter-spacing: 0;
  text-transform: none;
  padding: 0 0.6rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dr-linux-console .lc-btn.is-quiet:hover { color: var(--lc-text); }
.dr-linux-console.is-gated { overflow: clip; }

@media (max-width: 560px) {
  .dr-linux-console .lc-card { max-height: 92vh; border-radius: 10px; }
  .lc-card-foot { flex-wrap: wrap; }
  .dr-linux-console .lc-btn { flex: 1 1 8rem; }
  .dr-linux-console .lc-btn.is-quiet { flex-basis: 100%; order: 3; }
}

/* ==========================================================================
   15. De vragen zoals ze in de pagina zelf staan (zonder poort)
   ========================================================================== */
.lc-quiz {
  border: 1px solid var(--lc-line);
  border-left: 3px solid var(--lc-open);
  border-radius: var(--lc-radius);
  background: var(--lc-surface);
  padding: calc(var(--lc-pad) * 0.8);
  margin-top: var(--lc-gap);
}
.lc-quiz-lede { color: var(--lc-text-muted); max-width: var(--lc-prose); }
.lc-quiz-note { margin-top: var(--lc-gap); color: var(--lc-text-faint); font-size: 0.86rem; max-width: var(--lc-prose); }
.lc-quiz .lc-q { margin-top: calc(var(--lc-gap) * 1.4); }

.dr-linux-console .lc-reopen {
  min-height: 34px;
  padding: 0 0.7rem;
  border: 1px solid var(--lc-line-strong);
  border-radius: var(--lc-radius);
  background: none;
  color: var(--lc-text-faint);
  font-family: var(--lc-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dr-linux-console .lc-reopen:hover { color: var(--lc-accent); border-color: var(--lc-accent); }

@media print { .lc-startgate { display: none; } }