/* ==========================================================================
   compass.css — de Chamber Compass en de Challenge Player
   --------------------------------------------------------------------------
   Overgenomen uit The_Door_COMPLETE_HTML_Transfer_2026-08-24 op 25 augustus
   2026, uit 09-compass-challenges.html.

   Gegenereerd met tools/compass-css.py. Niet met de hand aanpassen -- een
   correctie hoort in het correctieblok onderaan dat script, zodat zichtbaar
   blijft wat uit de overdracht komt en wat wij hebben moeten bijstellen.

   Alles staat onder .chamber-page, zodat dit blad de rest van de site niet
   aanraakt. Geladen door de acht compass-paginas, naast site.css.
   ========================================================================== */

.chamber-page {
  --line: rgba(17,17,17,.13);
  --head: var(--font-head);
  --sans: var(--font-body);

  /* De faseklkeuren uit de :root van de overdrachtspagina. De extractor pakt
     alleen klasseregels, dus zonder dit blok zou var(--explore) nergens op
     slaan en bleven drie van de vier stippen doorzichtig -- precies het gat dat
     curious.css had toen de --bc-* variabelen ontbraken.

     --spark komt exact overeen met de onze in chambers.css. Gecontroleerd, niet
     aangenomen.

     De -deep varianten zijn de tekstveilige versies. De lichte kleuren halen op
     papier de 4,5:1 niet: spark komt op 2,33. Kleur mag een stip vullen, geen
     letter dragen. */
  --spark: #E68A3C;   --spark-deep: #955615;
  --explore: #4A90E2; --explore-deep: #33649b;
  --exchange: #7AC74F; --exchange-deep: #3e712e;
  --develop: #9B6BA8; --develop-deep: #7b4f84;
  --gold: hsl(43 74% 48%);
  --teal: hsl(168 76% 29%);

  /* --paper-raised werd op drie plekken gebruikt en NERGENS gedefinieerd.
     var() zonder waarde en zonder terugval levert niets op, dus het paneel met
     de Challenge had geen achtergrond: de donkere kaart schemerde er dwars
     doorheen. Geen ontwerpkeuze maar een gat, gevonden op 27 augustus 2026.

     Een half tintje boven paper, zodat het paneel op papier ligt in plaats van
     erin. */
  --paper-raised: #faf8f2;
}

/* DE TWEE BEWEGINGEN DIE NOOIT BESTONDEN

   `animation: pulse` en `animation: panelIn` stonden in de regels, maar de
   @keyframes zijn nooit meegekomen -- de extractor pakt alleen klasseregels.
   Hetzelfde gat als --paper-raised: een naam die naar niets wijst, en CSS zegt
   daar niets over. Een stip die niet ademt merk je niet, een paneel zonder
   achtergrond wel.

   Gevonden met een scan, niet met het oog. Die scan zit nu in tools/check.mjs
   als twee regels, zodat de volgende ontbrekende naam meteen opvalt. */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 7px rgba(114,219,168,.11); opacity: 1; }
  50%      { box-shadow: 0 0 0 11px rgba(114,219,168,.03); opacity: .68; }
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chamber-page .live-pulse,
  .chamber-page .doorway-panel { animation: none; }
}

.chamber-page .eyebrow { margin: 0 0 14px; font-family: var(--head); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; }
.chamber-page .eyebrow.on-dark { color: rgba(244,242,236,.65); }
.chamber-page .button-light { color: var(--ink); background: var(--paper); }
.chamber-page .button-light:hover { background: var(--gold); }
.chamber-page .button-ghost { color: var(--paper); background: transparent; border-color: rgba(244,242,236,.35); }
.chamber-page .button-ghost:hover { color: var(--ink); background: var(--paper); }
.chamber-page .button-ink { color: var(--paper); background: var(--ink); }
.chamber-page .hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.chamber-page .chamber-hero { position: relative; min-height: calc(100vh - 66px); overflow: hidden; padding: 56px 0 22px; color: var(--paper); background: linear-gradient(180deg,#10231f 0,#18332e 56%,#0d1c1a 100%); }
.chamber-page .chamber-title-row { display: grid; grid-template-columns: 1.15fr .85fr; gap: 7vw; align-items: end; margin-bottom: 42px; }
.chamber-page .chamber-title-row h1 { font-size: clamp(56px,7.4vw,112px); }
.chamber-page .chamber-title-row h1 span { display: inline-block; max-width: 790px; color: var(--gold); font-size: .48em; line-height: 1.04; letter-spacing: -.025em; }
.chamber-page .chamber-intro { max-width: 560px; padding-bottom: 6px; }
.chamber-page .chamber-intro>p { margin: 0; color: rgba(244,242,236,.72); font-size: clamp(18px,1.6vw,24px); }
.chamber-page .atlas-shell { position: relative; min-height: 610px; overflow: hidden; border: 1px solid rgba(244,242,236,.2); border-radius: 18px; background: linear-gradient(rgba(244,242,236,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(244,242,236,.055) 1px,transparent 1px),radial-gradient(circle at 32% 45%,rgba(63,115,180,.21),transparent 25%),radial-gradient(circle at 78% 38%,rgba(199,154,56,.18),transparent 24%),rgba(3,13,12,.45); background-size: 48px 48px,48px 48px,auto,auto,auto; }
.chamber-page .atlas-topbar,
.chamber-page .atlas-footer { position: relative; z-index: 4; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 16px; background: rgba(9,27,24,.64); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(244,242,236,.14); }
.chamber-page .atlas-status { display: flex; align-items: center; gap: 8px; color: rgba(244,242,236,.72); font-size: 12px; }
.chamber-page .atlas-status b { margin-left: 12px; color: var(--paper); font-weight: 500; }
.chamber-page .live-pulse { width: 7px; height: 7px; background: #72dba8; border-radius: 50%; box-shadow: 0 0 0 7px rgba(114,219,168,.11); animation: pulse 2.8s ease-in-out infinite; }
.chamber-page .atlas-actions { display: flex; gap: 6px; }
.chamber-page .atlas-actions button,
.chamber-page .atlas-footer button { color: var(--paper); background: transparent; border: 1px solid rgba(244,242,236,.2); border-radius: 999px; padding: 8px 12px; cursor: pointer; font-family: var(--head); font-size: 11px; }
.chamber-page .atlas-actions button span { margin-left: 10px; opacity: .55; }
.chamber-page .node-dot { position: relative; display: block; width: 27px; height: 27px; border: 1px solid rgba(244,242,236,.52); border-radius: 50%; transition: transform .25s ease,background .25s ease; }
.chamber-page .node-dot i { position: absolute; inset: 7px; display: block; border-radius: 50%; }
.chamber-page .phase-spark .node-dot i,
.chamber-page .legend-spark { background: var(--spark); }
.chamber-page .phase-explore .node-dot i,
.chamber-page .legend-explore { background: var(--explore); }
.chamber-page .phase-exchange .node-dot i,
.chamber-page .legend-exchange { background: var(--exchange); }
.chamber-page .phase-develop .node-dot i,
.chamber-page .legend-develop { background: var(--develop); }
.chamber-page .atlas-footer { min-height: 56px; border-top: 1px solid rgba(244,242,236,.14); border-bottom: 0; }
.chamber-page .atlas-footer>span { color: rgba(244,242,236,.45); font-family: var(--head); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.chamber-page .phase-legend { display: flex; gap: 4px; }
.chamber-page .phase-legend button { display: inline-flex; align-items: center; gap: 6px; border-color: transparent; }
.chamber-page .phase-legend i { width: 6px; height: 6px; border-radius: 50%; }
.chamber-page .no-results { align-self: center; display: grid; gap: 14px; min-width: 280px; padding: 26px; text-align: center; background: rgba(244,242,236,.08); border: 1px solid rgba(244,242,236,.2); border-radius: 14px; }
.chamber-page .no-results button { color: var(--ink); background: var(--paper); border: 0; border-radius: 999px; padding: 10px; cursor: pointer; }
.chamber-page .panel-head { display: flex; justify-content: space-between; align-items: flex-start; min-height: 64px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.chamber-page .panel-head>div { display: flex; align-items: center; gap: 10px; }
.chamber-page .panel-head p { margin: 0; color: var(--ink-soft); font-size: 11px; }
.chamber-page .close-button { width: 34px; height: 34px; padding: 0; background: transparent; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; font-size: 21px; line-height: 1; }
.chamber-page .panel-copy { padding: 24px 22px 17px; }
.chamber-page .panel-copy h2 { margin: 10px 0 14px; font-size: clamp(36px,4vw,58px); }
.chamber-page .prompt-label { margin: 0 0 9px; color: var(--ink-soft); font-family: var(--head); font-size: 9px; text-transform: uppercase; letter-spacing: .13em; }
.chamber-page .mode-options { display: flex; flex-wrap: wrap; gap: 6px; }
.chamber-page .mode-options button { padding: 8px 10px; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 11px; }
.chamber-page .mode-options button.active { color: var(--paper); background: var(--ink); }
.chamber-page .proof-box { padding: 15px; background: #e7e3d8; border-left: 3px solid var(--gold); border-radius: 2px 12px 12px 2px; }
.chamber-page .proof-box b { font-family: var(--head); font-size: 13px; line-height: 1.5; }
.chamber-page /* Standard Challenge Player */
.challenge-player { width: min(720px,96%); }
.chamber-page .challenge-preview,
.chamber-page .challenge-runner,
.chamber-page .challenge-proof,
.chamber-page .challenge-done { padding-bottom: 28px; }
.chamber-page .challenge-preview .panel-copy { padding-bottom: 22px; }
.chamber-page .challenge-preview .panel-copy h2 { max-width: 620px; }
.chamber-page .challenge-promise { margin: 0 22px 20px; padding: 17px 18px; background: #e8e3d6; border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; }
.chamber-page .challenge-promise b { display: block; font-family: var(--head); font-size: 15px; line-height: 1.45; }
.chamber-page .challenge-explainer { display: grid; grid-template-columns: 34px 1fr; gap: 13px; margin: 0 22px 20px; padding: 16px; background: color-mix(in srgb,var(--teal) 9%,var(--paper-raised)); border: 1px solid color-mix(in srgb,var(--teal) 32%,transparent); border-radius: 14px; }
.chamber-page .challenge-explainer>span { display: grid; place-items: center; width: 30px; height: 30px; color: var(--paper); background: var(--teal); border-radius: 50%; font-family: var(--head); font-size: 13px; }
.chamber-page .challenge-explainer .prompt-label { margin: 1px 0 5px; color: var(--teal); }
.chamber-page .challenge-explainer p:last-child { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }
.chamber-page .challenge-facts { display: grid; grid-template-columns: repeat(4,1fr); margin: 0 22px 22px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.chamber-page .challenge-facts>div { min-height: 92px; display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 7px; padding: 13px 10px 13px 0; border-right: 1px solid var(--line); }
.chamber-page .challenge-facts>div+div { padding-left: 10px; }
.chamber-page .challenge-facts>div:last-child { border-right: 0; }
.chamber-page .challenge-facts span { grid-row: 1/3; align-self: center; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 50%; font-family: var(--head); font-size: 11px; }
.chamber-page .challenge-facts small { color: var(--ink-soft); font-size: 9px; text-transform: uppercase; letter-spacing: .09em; }
.chamber-page .challenge-facts b { align-self: start; font-family: var(--head); font-size: 11px; line-height: 1.3; }
.chamber-page .challenge-mode { display: grid; gap: 13px; margin: 0 22px 25px; }
.chamber-page .challenge-mode>div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; }
.chamber-page .challenge-mode .prompt-label { margin-bottom: 0; }
.chamber-page .challenge-mode small { color: var(--ink-soft); font-size: 10px; }
.chamber-page .route-dot { display: grid; place-items: center; width: 32px; height: 32px; color: #fff; border-radius: 50%; font-family: var(--head); font-size: 11px; }
.chamber-page .route-dot.phase-spark { background: var(--spark); }
.chamber-page .route-dot.phase-explore { background: var(--explore); }
.chamber-page .route-dot.phase-exchange { background: var(--exchange); }
.chamber-page .route-dot.phase-develop { background: var(--develop); }
.chamber-page .challenge-actions { display: grid; gap: 9px; margin: 22px; }
.chamber-page .challenge-start { width: 100%; min-height: 51px; }
.chamber-page .runner-progress { padding: 18px 22px 0; }
.chamber-page .runner-progress>div { display: flex; justify-content: space-between; margin-bottom: 12px; color: var(--ink-soft); font-family: var(--head); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.chamber-page .runner-progress>div b { color: var(--ink); }
.chamber-page .runner-progress ol { list-style: none; display: grid; grid-template-columns: repeat(4,1fr); margin: 0; padding: 0; }
.chamber-page .runner-progress li { position: relative; display: grid; gap: 7px; color: var(--ink-soft); font-family: var(--head); font-size: 9px; }
.chamber-page .runner-progress li:before { content: ""; position: absolute; top: 5px; left: 9px; right: -9px; height: 1px; background: var(--line); }
.chamber-page .runner-progress li:last-child:before { display: none; }
.chamber-page .runner-progress li>button { position: relative; z-index: 1; display: grid; justify-items: start; gap: 7px; padding: 0; color: inherit; text-align: left; background: transparent; border: 0; cursor: pointer; font-family: inherit; font-size: inherit; }
.chamber-page .runner-progress li>button:disabled { cursor: default; }
.chamber-page .runner-progress li.complete>button:hover span { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.chamber-page .runner-progress i { position: relative; z-index: 1; width: 11px; height: 11px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 50%; }
.chamber-page .runner-progress li.active i { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 5px rgba(199,154,56,.14); }
.chamber-page .runner-progress li.complete i { background: var(--ink); border-color: var(--ink); }
.chamber-page .runner-progress li.active { color: var(--ink); }
.chamber-page .runner-step-back { margin-top: 15px; padding: 8px 0; color: var(--teal); background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb,var(--teal) 45%,transparent); cursor: pointer; font-family: var(--head); font-size: 10px; }
.chamber-page .runner-step { position: relative; margin: 28px 22px 0; padding: 24px 0 0; border-top: 1px solid var(--ink); }
.chamber-page .runner-phase-letter { position: absolute; right: 0; top: 18px; color: rgba(20,20,18,.055); font-family: var(--head); font-size: 125px; line-height: 1; }
.chamber-page .runner-step .eyebrow { position: relative; z-index: 1; color: var(--ink-soft); }
.chamber-page .runner-step h2 { position: relative; z-index: 1; max-width: 610px; margin: 0 0 24px; font-size: clamp(34px,4vw,52px); line-height: 1.03; }
.chamber-page .runner-context { max-width: 600px; margin: 0 0 23px; padding: 14px 16px; background: #ebe7dd; border-radius: 12px; }
.chamber-page .runner-context b { font-family: var(--head); font-size: 11px; }
.chamber-page .runner-context p { margin: 4px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.chamber-page .runner-note { display: grid; gap: 8px; }
.chamber-page .runner-note>span { font-family: var(--head); font-size: 11px; font-weight: 600; }
.chamber-page .runner-note textarea { width: 100%; min-height: 108px; resize: vertical; padding: 13px 14px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 12px; font: 13px/1.5 var(--sans); }
.chamber-page .runner-note textarea:focus { outline: 3px solid var(--gold); outline-offset: 2px; }
.chamber-page .runner-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.chamber-page .challenge-proof,
.chamber-page .challenge-done { padding: 26px 22px 32px; }
.chamber-page .challenge-proof>h2,
.chamber-page .challenge-done>h2 { max-width: 600px; margin-bottom: 12px; }
.chamber-page .proof-intro,
.chamber-page .challenge-done>p:not(.eyebrow) { max-width: 580px; color: var(--ink-soft); font-size: 13px; }
.chamber-page .proof-target { margin: 23px 0; padding: 16px; background: #e8e3d6; border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; }
.chamber-page .proof-target b { font-family: var(--head); font-size: 14px; }
.chamber-page .proof-review { list-style: none; margin: 0 0 23px; padding: 0; border-top: 1px solid var(--line); }
.chamber-page .proof-review li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.chamber-page .proof-review b { font-family: var(--head); font-size: 12px; }
.chamber-page .proof-review p { margin: 3px 0 0; color: var(--ink-soft); font-size: 11px; }
.chamber-page .challenge-proof .challenge-actions,
.chamber-page .challenge-done .challenge-actions { margin-inline: 0; }
.chamber-page .done-mark { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 22px; color: var(--paper); background: var(--teal); border-radius: 50%; font-family: var(--head); font-size: 24px; }
.chamber-page .done-card { margin: 24px 0; padding: 18px; background: #e8e3d6; border-radius: 14px; }
.chamber-page .done-card small { color: var(--ink-soft); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.chamber-page .done-card blockquote { margin: 13px 0 18px; font-family: var(--head); font-size: 22px; line-height: 1.24; }
.chamber-page .done-card span { color: var(--ink-soft); font-size: 10px; }
.chamber-page .other-chambers { padding: 100px 0; background: #dcd7cc; border-top: 1px solid var(--line); }
.chamber-page .chamber-list { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--ink); }
.chamber-page .chamber-list :is(button,a) { min-height: 200px; display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; padding: 18px 14px; text-align: left; background: transparent; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; }
.chamber-page .chamber-list :is(button,a):nth-child(4n) { border-right: 0; }
.chamber-page .chamber-list :is(button,a):hover,
.chamber-page .chamber-list :is(button,a).active { color: var(--paper); background: var(--ink); }
.chamber-page .chamber-list span,
.chamber-page .chamber-list em { font-family: var(--head); font-size: 10px; font-style: normal; }
.chamber-page .chamber-list b { font-family: var(--head); font-size: 18px; font-weight: 500; }
.chamber-page .chamber-list p { color: currentColor; opacity: .62; font-size: 12px; }
.chamber-page .not-a-test { position: relative; z-index: 1; margin: 17px 0 0; color: rgba(244,242,236,.55); font-size: 10px; }
.chamber-page .not-a-test b { color: var(--paper); }


@media (max-width:980px) {
.chamber-page .chamber-title-row { grid-template-columns: 1fr; }
.chamber-page .chamber-title-row { gap: 28px; }
.chamber-page .chamber-intro { max-width: 680px; }
.chamber-page .chamber-list { grid-template-columns: repeat(2,1fr); }
.chamber-page .chamber-list :is(button,a):nth-child(2n) { border-right: 0; }
.chamber-page .chamber-list :is(button,a):nth-child(odd) { border-right: 1px solid var(--line); }
}

@media (max-width:650px) {
.chamber-page .chamber-hero { padding-top: 38px; }
.chamber-page .chamber-title-row h1 { font-size: 54px; }
.chamber-page .chamber-title-row { margin-bottom: 28px; }
.chamber-page .atlas-shell { width: calc(100% - 14px); min-height: 570px; }
.chamber-page .atlas-status b,
.chamber-page .phase-legend,
.chamber-page .atlas-footer>span { display: none; }
.chamber-page .atlas-topbar { padding: 0 10px; }
.chamber-page .atlas-actions button { padding: 8px 9px; }
.chamber-page .atlas-actions button span { display: none; }
.chamber-page .panel-copy h2 { font-size: 39px; }
.chamber-page .other-chambers { padding: 76px 0; }
.chamber-page .chamber-list { grid-template-columns: 1fr; }
.chamber-page .chamber-list :is(button,a),
.chamber-page .chamber-list :is(button,a):nth-child(odd) { min-height: 150px; border-right: 0; }
}

@media (max-width:650px) {
.chamber-page .challenge-player .panel-head p { max-width: 245px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chamber-page .challenge-facts { grid-template-columns: 1fr 1fr; }
.chamber-page .challenge-facts>div:nth-child(2) { border-right: 0; }
.chamber-page .challenge-facts>div:nth-child(n+3) { border-top: 1px solid var(--line); }
.chamber-page .challenge-mode>div:first-child { align-items: flex-start; flex-direction: column; gap: 3px; }
.chamber-page .runner-progress li span { font-size: 7px; }
.chamber-page .runner-step h2 { font-size: 34px; }
.chamber-page .runner-phase-letter { font-size: 90px; }
.chamber-page .runner-actions { align-items: stretch; flex-direction: column-reverse; }
.chamber-page .challenge-proof,
.chamber-page .challenge-done { padding-inline: 18px; }
}


/* -------------------------------------------------------------- correcties */

/* Sierranden mogen buiten de sectie steken, de pagina mag niet schuiven.
   clip en niet hidden -- hidden breekt sticky in alles wat eronder hangt. */
.chamber-page section,
.chamber-page .atlas-shell { overflow-x: clip; }

/* De gekozen fase in de legenda.

   In de overdracht kwam die staat van `.atlas-filters button.active`. Maar
   .atlas-filters is daar de lichte zoeklade, met `background: var(--paper)`.
   Die klasse stond bij ons per ongeluk op dezelfde rij als .phase-legend, en
   toen stond papierkleurige tekst op een papierkleurige achtergrond: contrast
   precies 1,00. Onzichtbaar, en door de meting gevonden in plaats van door het
   oog.

   De legenda hangt bij ons in de donkere Compass-schil, dus de gekozen knop
   keert daar om: papier als vlak, het donker van de schil als letter. */
.chamber-page .phase-legend button.active {
  color: #10231f; background: var(--paper); border-color: var(--paper);
}
.chamber-page .phase-legend button { padding: 9px 12px; border-radius: 999px; cursor: pointer; }


/* ============================================================================
   HET VELD STAAT RECHTOP -- 27 augustus 2026
   ----------------------------------------------------------------------------
   In de overdracht lag de baan: twaalf knooppunten naast elkaar op een lijn
   van 2680px, horizontaal scrollen. Op een scherm zag je er vier. De rest moest
   je opzij duwen, en de halve breedte rechts stond leeg -- terwijl de Challenge
   daar juist thuishoort.

   Nu een pad dat je afloopt: links de twaalf onder elkaar, met een lijntje dat
   ze verbindt, en rechts wat er opengaat. De pagina scrollt, niet een venstertje
   binnenin; het rechterpaneel blijft staan terwijl je langs de Doorways gaat.

   De overgenomen regels voor .doorway-track, .atlas-node, .energy-atlas,
   .doorway-panel en de twee zwevende cirkels worden hierboven weggefilterd
   (zie WEG). Ze horen bij een liggende baan en zouden hier alleen tegenwerken.
   ========================================================================== */

/* clip en niet hidden. hidden maakt een scrollcontext, en dan blijft het
   paneel hieronder niet meer staan bij het scrollen. */
.chamber-page .atlas-shell { overflow: clip; }

.chamber-page .atlas-veld { display: grid; grid-template-columns: minmax(0,360px) minmax(0,1fr); }
.chamber-page .energy-atlas { position: relative; display: grid; align-content: start; min-height: 0; border-right: 1px solid rgba(244,242,236,.14); }
.chamber-page .doorway-track { position: static; display: flex; flex-direction: column; }

.chamber-page .atlas-node {
  position: relative; display: grid; grid-template-columns: 27px minmax(0,1fr);
  align-items: start; gap: 3px 16px; width: 100%; margin: 0; padding: 26px 20px;
  color: var(--paper); text-align: left; background: transparent;
  border: 0; border-bottom: 0; cursor: pointer; transition: background .18s;
}
.chamber-page .atlas-node:hover { background: rgba(244,242,236,.05); }
.chamber-page .atlas-node small { grid-column: 2; margin: 0; color: rgba(244,242,236,.62); font-family: var(--head); font-style: normal; font-size: 9px; text-transform: uppercase; letter-spacing: .13em; }
.chamber-page .atlas-node b { grid-column: 2; max-width: none; font-family: var(--head); font-size: 16px; font-weight: 500; line-height: 1.2; }
.chamber-page .atlas-node em { grid-column: 2; max-width: none; color: rgba(244,242,236,.58); font-family: var(--sans); font-size: 10px; font-style: normal; line-height: 1.4; }

/* De stip staat op een vaste afstand van de bovenrand en niet in het midden.
   Dat is wat het lijntje hieronder mogelijk maakt: twee vaste maten in plaats
   van een positie die met de hoogte van de titel meebeweegt. */
.chamber-page .node-dot { grid-row: 1 / span 3; align-self: start; margin-top: 4px; }
.chamber-page .atlas-node:hover .node-dot,
.chamber-page .atlas-node.selected .node-dot { transform: scale(1.3); background: rgba(244,242,236,.11); }
.chamber-page .atlas-node.selected { background: rgba(244,242,236,.07); box-shadow: inset 3px 0 var(--gold); }

/* HET LIJNTJE DAT ZE VERBINDT

   Van de onderkant van deze stip tot net boven de volgende. Beide uiteinden
   meten vanaf een rand van de knop -- 26px padding + 4px marge + 27px stip --
   dus het klopt ook als de ene titel over twee regels loopt en de andere niet.
   Een lijn door het midden zou dat niet doen.

   De laatste krijgt hem niet: een pad dat doorloopt na de laatste halte
   belooft iets wat er niet is. */
.chamber-page .atlas-node:not(:last-child):after {
  content: ""; position: absolute; left: 33px; top: 61px; bottom: -26px; width: 1px;
  background: rgba(244,242,236,.22);
}

/* Het paneel blijft staan terwijl je de lijst afloopt. */
.chamber-page .panel-kolom {
  position: sticky; top: 10px; align-self: start; display: grid;
  min-width: 0; min-height: 440px; max-height: calc(100vh - 20px); overflow: auto;
}
.chamber-page .doorway-panel {
  position: static; width: auto; z-index: 1; display: flex; flex-direction: column;
  min-width: 0; color: var(--ink); background: var(--paper-raised);
  animation: panelIn .38s cubic-bezier(.2,.75,.2,1);
}
.chamber-page .panel-leeg { align-self: center; justify-self: center; max-width: 30ch; margin: 0; padding: 30px; color: rgba(244,242,236,.6); font-family: var(--head); font-size: 13px; line-height: 1.5; text-align: center; }
.chamber-page #paneel:not([hidden]) + .panel-leeg { display: none; }


/* ============================================================================
   KNOPPEN DIE GEEN KNOP WAREN
   ----------------------------------------------------------------------------
   .button-ink, .button-light en .button-ghost kregen uit de overdracht alleen
   een KLEUR mee. Hun vorm -- rondje, padding, letter -- zat daar in een regel
   op de container (`.atlas-actions button`), en die kwam niet mee omdat onze
   knoppen ergens anders staan.

   Gevolg: elke knop buiten de bovenbalk was een kale browserknop, en de twee
   links in het paneel ("See what SEED is", "Sign in") waren onderstreepte
   blauwe tekst onder elkaar. Dat is de rommel op Oscars schermafdruk.
   ========================================================================== */
.chamber-page :is(.button-ink, .button-light, .button-ghost) {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 42px; padding: 11px 18px;
  border: 1px solid transparent; border-radius: 999px;
  font-family: var(--head); font-size: 12.5px; font-weight: 500; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
/* De rand van ghost moet ná de vormregel terug: die zette hem op transparant. */
.chamber-page .button-ghost { border-color: rgba(244,242,236,.35); }

/* In het lichte paneel keert ghost om. Papierkleurige letters op papier is
   contrast 1,00 -- dezelfde fout als eerder bij de fasefilters. */
.chamber-page .doorway-panel .button-ghost { color: var(--ink); border-color: var(--ink); background: transparent; }
.chamber-page .doorway-panel .button-ghost:hover { color: var(--paper); background: var(--ink); }
.chamber-page .challenge-actions { grid-auto-flow: column; justify-content: start; }


/* ============================================================================
   TWEE BLOKKEN DIE ANDERE HTML VERWACHTTEN
   ----------------------------------------------------------------------------
   .challenge-explainer staat in de overdracht op twee kolommen: 34px voor een
   pictogram, de rest voor de tekst. Wij hebben daar geen pictogram maar een
   kopje, en dat werd dus in 34px geperst -- "WHAT HAPPENS BEHIND THIS DOORWAY"
   viel over vijf regels naast de zin waar het bij hoort.

   .challenge-facts is daar een balk van vier vakjes met een cijfer in een
   rondje. Bij ons is het één zin met de werelden die deze Doorway raakt. De
   4-kolomsregel maakte van "Life, Interaction" twee halve kolommen met een
   streep ertussen.

   Allebei geen fout in de overdracht en geen fout in onze HTML -- ze passen
   alleen niet op elkaar. De opmaak buigt hier mee, niet de inhoud.
   ========================================================================== */
.chamber-page .challenge-explainer { grid-template-columns: minmax(0,1fr); gap: 6px; }
.chamber-page p.challenge-facts {
  display: block; margin: 0 22px 20px; padding: 0 0 14px;
  border-top: 0; border-bottom: 1px solid var(--line);
  color: var(--ink-soft); font-family: var(--head); font-size: 10px;
  text-transform: uppercase; letter-spacing: .11em;
}
.chamber-page p.challenge-facts span {
  display: inline; width: auto; height: auto; place-items: initial;
  border: 0; border-radius: 0; font-size: inherit;
}


/* ============================================================================
   HET STAPPENSCHERM
   ----------------------------------------------------------------------------
   Weer drie keer dezelfde soort mismatch: de overdracht verwacht andere HTML
   dan onze speler bouwt.

   1. .runner-progress is daar een omhulsel met een <div> en een <ol> erin, en
      de opmaak staat op die kinderen. Onze speler zet de vier stippen er
      rechtstreeks in -- dus raakte geen enkele regel ze en vielen ze als vier
      losse bollen onder elkaar.

   2. .runner-phase-letter is daar de reusachtige letter als watermerk ACHTER
      de stap. Bij ons staat die letter IN de stip, waar hij de S van Spark
      hoort te zijn. Absoluut geplaatst zocht hij de dichtstbijzijnde
      voorouder met positie -- de panelkolom -- en belandde als vaag grijs vlak
      rechtsboven in het paneel. Dat is die schim op de schermafdruk.

   3. .runner-note is daar het omhulsel ROND het invoerveld. Bij ons is het het
      zinnetje eronder, en staat het veld er los naast. Gevolg: het invoerveld
      kreeg nul opmaak en werd het kale bakje van de browser, in de
      standaardletter, vier regels hoog.

   Dat derde punt geldt ook voor het proof-scherm: daar staat hetzelfde kale
   veld. Vandaar dat de regel hieronder elk invoerveld in het paneel pakt en
   niet alleen die ene.
   ========================================================================== */

.chamber-page .runner-progress {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  max-width: 300px; margin: 0 22px; padding: 20px 0 6px;
}
.chamber-page .runner-progress:before {
  content: ""; position: absolute; left: 15px; right: 15px; top: calc(50% + 7px);
  height: 1px; background: var(--line);
}
.chamber-page .route-dot { position: relative; z-index: 1; width: 30px; height: 30px; }
.chamber-page .route-dot i { display: none; }
.chamber-page .route-dot .runner-phase-letter {
  position: static; color: #fff; font-family: var(--head); font-size: 11px;
  font-weight: 600; line-height: 1;
}
/* Waar je nog niet bent geweest is er wel, maar niet luid. */
.chamber-page .route-dot:not(.active):not(.complete) { opacity: .32; }
.chamber-page .route-dot.active { box-shadow: 0 0 0 3px var(--paper-raised), 0 0 0 4px var(--ink); }

.chamber-page .doorway-panel label.prompt-label { display: block; margin: 0 0 8px; }
.chamber-page .doorway-panel textarea {
  display: block; box-sizing: border-box; width: 100%; min-height: 132px; resize: vertical;
  margin: 0 0 12px; padding: 13px 14px; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 12px; font: 14px/1.55 var(--sans);
}
.chamber-page .doorway-panel textarea:focus { outline: 3px solid var(--gold); outline-offset: 2px; }
.chamber-page .doorway-panel textarea::placeholder { color: rgba(17,17,17,.45); }

/* Het zinnetje onder het veld is kleine letter, geen tweede alinea. */
.chamber-page .doorway-panel .runner-note {
  display: block; margin: 0; color: var(--ink-soft); font-size: 11.5px; line-height: 1.5;
}
.chamber-page .runner-step { padding-bottom: 4px; }
.chamber-page .proof-review { margin: 0 22px; }

/* Onder de 950px past geen tweede kolom: de lijst zou op 360px staan met een
   restje van 300px ernaast, en daar past geen Challenge in. Dan onder elkaar,
   en niets blijft staan -- sticky op een smal scherm neemt de halve hoogte in. */
@media (max-width: 950px) {
  .chamber-page .atlas-veld { grid-template-columns: minmax(0,1fr); }
  .chamber-page .energy-atlas { border-right: 0; border-bottom: 1px solid rgba(244,242,236,.14); }
  .chamber-page .panel-kolom { position: static; max-height: none; min-height: 320px; }
  .chamber-page .atlas-node { padding: 22px 14px; }
  .chamber-page .atlas-node:not(:last-child):after { left: 27px; top: 57px; bottom: -22px; }
}