/* Reusable interactive/visual components for Academy courses: click-through
   triangle diagrams, flip cards, severity ladders, warning-card grids and
   matching exercises. Theme-aware (light/dark) via the site's existing
   custom-property tokens in styles.css, which this file is always loaded
   after. */

/* ---- Click-through triangle / pyramid diagram ---- */
.tri-diagram{margin-top:1.75rem;display:grid;gap:1.1rem}
.tri-shape{display:flex;flex-direction:column;align-items:center;gap:5px}
.tri-band{
  all:unset;box-sizing:border-box;cursor:pointer;
  display:flex;align-items:center;justify-content:center;text-align:center;
  width:100%;padding:.9rem 1rem;border-radius:var(--r-sm);
  font-family:var(--font-head);font-weight:700;font-size:var(--fs-sm);
  color:#fff;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.tri-band:hover{transform:scale(1.012)}
.tri-band:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.tri-band.is-active{box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--fg)}
.tri-shape:has(.tri-band.is-active) .tri-band:not(.is-active){opacity:.55}
.tri-band-1{max-width:100%;background:var(--brand-600)}
.tri-band-2{max-width:72%;background:var(--accent-600)}
.tri-band-3{max-width:42%;background:var(--danger-600)}
.tri-panels{position:relative;min-height:6.5rem}
.tri-panel{display:none;margin:0;padding:1.15rem 1.35rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-alt);line-height:1.75}
.tri-panel.is-active{display:block}
.tri-hint{margin:0;text-align:center;color:var(--fg-subtle);font-size:var(--fs-xs);font-style:italic}
.tri-hint.is-hidden{display:none}

/* Horizontal variant of the same click-through diagram, for a sequence
   (e.g. Antecedent -> Behaviour -> Consequence) instead of a pyramid. Same
   data-tri-diagram JS; only the layout differs. */
.tri-diagram--flow .tri-shape{display:flex;flex-direction:row;align-items:stretch;gap:.4rem}
.tri-diagram--flow .tri-band{flex:1 1 0;min-width:0}
.tri-diagram--flow .tri-band{max-width:none;flex-direction:column;gap:.2rem;padding:1rem .8rem}
.tri-diagram--flow .tri-band small{font-family:var(--font-body,inherit);font-weight:500;font-size:var(--fs-xs);opacity:.9}
.flow-band-a{background:var(--accent-600)}
.flow-band-b{background:var(--brand-600)}
.flow-band-c{background:var(--brand-800)}
.flow-band-d{background:#5b3f8f}
.flow-band-e{background:#334155}
.flow-band-f{background:#7a4b12}
.flow-arrow{align-self:center;color:var(--fg-subtle);font-size:1.4rem;line-height:1}
html[dir="rtl"] .flow-arrow{transform:scaleX(-1)}
@media (max-width:640px){
  .tri-diagram--flow .tri-shape{flex-direction:column}
  .flow-arrow,html[dir="rtl"] .flow-arrow{justify-self:center;transform:rotate(90deg)}
}

/* ---- Flip cards (grid of category cards / dashboard-vs-reality reveals) ---- */
.flip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-top:1.4rem}
.flip-card{position:relative;display:block;height:320px;perspective:1200px;cursor:pointer}
.flip-card-toggle{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.flip-card-inner{display:block;position:relative;width:100%;height:100%;transition:transform .55s var(--ease-out);transform-style:preserve-3d}
.flip-card-toggle:checked ~ .flip-card-inner{transform:rotateY(180deg)}
.flip-card-toggle:focus-visible ~ .flip-card-inner{outline:3px solid var(--ring);outline-offset:3px;border-radius:var(--r-md)}
.flip-card-face{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:1.25rem;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--surface);backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.flip-card-front{align-items:center;text-align:center;gap:.55rem}
.flip-card-front svg{width:30px;height:30px;color:var(--brand-strong)}
.flip-card-front strong{font-size:var(--fs-sm);line-height:1.3}
.flip-hint{color:var(--fg-subtle);font-size:var(--fs-xs)}
.flip-card-back{transform:rotateY(180deg);justify-content:flex-start;background:var(--brand-soft);overflow-y:auto}
.flip-card-back p{margin:0;font-size:var(--fs-sm);line-height:1.6}

.flip-card--stat{height:210px}
.flip-card--stat .flip-card-front .stat-num{font-family:var(--font-head);font-size:var(--fs-2xl);font-weight:700;color:var(--brand-strong)}
.flip-card--stat .flip-card-front .stat-label{font-size:var(--fs-xs);color:var(--fg-subtle);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.flip-card--stat .flip-card-back{justify-content:center;background:#fbefef}
.flip-card--stat .flip-card-back strong{display:block;margin-bottom:.4rem;color:#8c1d24;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em}
:root[data-theme="dark"] .flip-card--stat .flip-card-back{background:#2a1416}
:root[data-theme="dark"] .flip-card--stat .flip-card-back strong{color:#f8b4b8}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .flip-card--stat .flip-card-back{background:#2a1416}
  :root:not([data-theme="light"]) .flip-card--stat .flip-card-back strong{color:#f8b4b8}
}

/* Short-content flip card: a one-line front and at most a sentence or two
   on the back. Height verified against the longest EN/AR/KU strings at
   375px and 1900px -- anything longer belongs in .example-bars. */
.flip-card--short{height:210px}
.flip-card--short .flip-card-back{justify-content:center}
.pic-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.6rem}
.pic-tag{display:inline-block;padding:.2rem .55rem;border-radius:var(--r-pill);font-size:.72rem;font-weight:700;letter-spacing:.02em;border:1px solid transparent}
.pic-tag--pos{background:var(--brand-100);color:#075b3e}
.pic-tag--neg{background:#fbe2e3;color:#8c1d24}
.pic-tag--strong{background:var(--brand-800);color:#fff}
.pic-tag--weak{background:transparent;color:var(--fg-muted);border-color:var(--border-strong)}

/* ---- Example bars (full-width details rows -- auto-height, so unlike
   .flip-card they can never clip long text: a narrow multi-column grid at
   some viewport width will always eventually lose to long enough text at a
   fixed height, so text-heavy "tap to see an example" content belongs here,
   not in .flip-grid. Reserve .flip-grid/.flip-card for short content only
   (a stat number, a one-line finding) where a fixed height is safe. ---- */
.example-bars{display:grid;gap:.75rem;margin-top:1.4rem}
.example-bar{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.example-bar summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.9rem;padding:1rem 1.3rem;font-weight:700}
.example-bar summary::-webkit-details-marker{display:none}
.example-bar svg{width:26px;height:26px;flex:none;color:var(--brand-strong)}
.example-bar strong{flex:1;font-size:var(--fs-sm)}
.example-chevron{width:18px;height:18px;flex:none;color:var(--fg-subtle);transition:transform .25s var(--ease-out)}
.example-bar[open] .example-chevron{transform:rotate(180deg)}
.example-bar[open] summary{border-bottom:1px solid var(--border)}
.example-detail{margin:0;padding:1rem 1.3rem;color:var(--fg-muted);line-height:1.75;font-size:var(--fs-sm);background:var(--brand-soft)}
.step-num{display:inline-flex;flex:none;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--brand-600);color:#fff;font-family:var(--font-head);font-size:var(--fs-sm)}

/* ---- Scenario choice (pick an answer, see why it is or isn't the best one).
   Practice only -- the graded assessment is server-side. ---- */
.scenario-choice{margin-top:1.5rem;padding:1.3rem 1.4rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-alt)}
.scenario-prompt{margin:0 0 1rem;line-height:1.7}
.scenario-prompt strong{display:block;margin-bottom:.35rem;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--brand-strong)}
.scenario-options{display:grid;gap:.55rem}
.scenario-option{
  all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;
  padding:.85rem 1rem;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  background:var(--surface);font-size:var(--fs-sm);line-height:1.5;
  transition:border-color .15s,background .15s;
}
.scenario-option:hover{border-color:var(--brand-500)}
.scenario-option:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.scenario-option.is-correct{border-color:var(--brand-600);background:var(--brand-soft);color:var(--brand-strong);font-weight:700}
.scenario-option.is-wrong{border-color:var(--danger-500);background:var(--danger-100);color:#8c1d24}
.scenario-feedback{margin:1rem 0 0;padding:1rem 1.1rem;border-inline-start:4px solid var(--brand-600);background:var(--surface);line-height:1.7;font-size:var(--fs-sm)}
.scenario-feedback.is-wrong{border-color:var(--danger-500)}

/* ---- Severity ladder (details-based accordion rungs, colour-graded) ---- */
.severity-ladder{display:grid;gap:.6rem;margin-top:1.5rem}
.ladder-rung{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.ladder-rung summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.9rem;padding:1rem 1.2rem;font-weight:700}
.ladder-rung summary::-webkit-details-marker{display:none}
.ladder-num{display:inline-flex;flex:none;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;color:#fff;font-family:var(--font-head);font-size:var(--fs-sm)}
.ladder-rung-1 .ladder-num{background:var(--brand-500)}
.ladder-rung-2 .ladder-num{background:var(--accent-500)}
.ladder-rung-3 .ladder-num{background:#c2650f}
.ladder-rung-4 .ladder-num{background:var(--danger-600)}
.ladder-title{flex:1}
.ladder-chevron{width:18px;height:18px;flex:none;color:var(--fg-subtle);transition:transform .25s var(--ease-out)}
.ladder-rung[open] .ladder-chevron{transform:rotate(180deg)}
.ladder-detail{margin:0;padding:0 1.2rem 1.2rem 3.5rem;color:var(--fg-muted);line-height:1.8}
html[dir="rtl"] .ladder-detail{padding:0 3.5rem 1.2rem 1.2rem}

/* ---- Warning-card grid (details-based, icon + expandable detail) ---- */
.warn-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1.5rem}
.warn-card{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
.warn-card summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.7rem;padding:1rem 1.1rem;font-weight:700;font-size:var(--fs-sm)}
.warn-card summary::-webkit-details-marker{display:none}
.warn-card svg{width:22px;height:22px;flex:none;color:var(--accent-600)}
.warn-card[open] summary{border-bottom:1px solid var(--border)}
.warn-card-detail{margin:0;padding:1rem 1.1rem;color:var(--fg-muted);line-height:1.75;font-size:var(--fs-sm)}
@media (max-width:640px){.warn-cards{grid-template-columns:1fr}}

/* ---- Matching exercise (click left item, then its right-hand pair) ---- */
.match-exercise{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.4rem}
.match-col{display:grid;gap:.55rem;align-content:start}
.match-col h4{margin:0 0 .3rem;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--fg-subtle)}
.match-item{
  all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;
  padding:.85rem 1rem;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  background:var(--surface);font-size:var(--fs-sm);line-height:1.5;
  transition:border-color .15s,background .15s;
}
.match-item:hover{border-color:var(--brand-500)}
.match-item:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.match-item.is-selected{border-color:var(--brand-600);background:var(--brand-soft)}
.match-item.is-matched{border-color:var(--brand-600);background:var(--brand-soft);color:var(--brand-strong);cursor:default;font-weight:700}
.match-item.is-wrong{animation:match-shake .35s var(--ease-out);border-color:var(--danger-500);background:var(--danger-100);color:#8c1d24}
@keyframes match-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.match-status{grid-column:1/-1;margin:0;font-size:var(--fs-xs);color:var(--fg-subtle)}
@media (max-width:640px){.match-exercise{grid-template-columns:1fr}}

/* ==========================================================================
   Added 2026-10-02 for the Academy-wide interactive rollout. All of these
   are either native <details>/<input> (no JS) or driven by the delegated
   handlers in course-interactive.js, so they survive a Level 1 language
   switch that replaces .prose innerHTML. They sit inside .prose, so list
   bullets/margins from .prose ul/ol are reset here.
   ========================================================================== */

/* ---- Tap tiles: a grid of short "term -> explanation" reveals. Auto
   height, so unlike flip cards they can never clip text. ---- */
.tap-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem;margin:1.25rem 0 1.5rem;align-items:start}
.tap-tile{border:1px solid var(--ap-hairline,var(--border));border-radius:18px;background:var(--ap-surface,var(--surface));overflow:hidden;transition:border-color .2s}
.tap-tile summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.75rem;padding:1rem 1.1rem;font-weight:600;line-height:1.3;color:var(--ap-ink,var(--fg))}
.tap-tile summary::-webkit-details-marker{display:none}
.tap-tile summary span{flex:1}
.tap-tile-icon{position:relative;flex:none;width:24px;height:24px;border-radius:50%;background:var(--ap-action-soft,var(--brand-soft))}
.tap-tile-icon::before,.tap-tile-icon::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:2px;margin:-1px 0 0 -5px;border-radius:2px;background:var(--ap-action,var(--brand-700));transition:transform .25s var(--ease-out)}
.tap-tile-icon::after{transform:rotate(90deg)}
.tap-tile[open]{border-color:var(--ap-action,var(--brand-600))}
.tap-tile[open] .tap-tile-icon::after{transform:rotate(0deg)}
.tap-tile p,.prose .tap-tile p{margin:0;padding:0 1.1rem 1.1rem;color:var(--ap-muted,var(--fg-muted));font-size:1rem;line-height:1.55}
.tap-tile summary:focus-visible{outline:2px solid var(--ap-action,var(--ring));outline-offset:-2px;border-radius:18px}

/* ---- Stepper: one step of a sequence at a time ---- */
.stepper{margin:1.25rem 0 1.5rem;padding:1.25rem 1.35rem;border-radius:18px;background:var(--ap-inset,var(--bg-alt))}
.prose .stepper-steps,.stepper-steps{list-style:none;margin:0;padding:0;min-height:4.5rem}
.stepper-step{display:none;margin:0;font-size:1.0625rem;line-height:1.55;color:var(--ap-ink,var(--fg))}
.stepper-step.is-active{display:flex;gap:1rem;align-items:flex-start;animation:stepIn .35s var(--ease-out)}
.stepper-step-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--ap-action,var(--brand-700));color:var(--ap-on-action,#fff);font-weight:600}
@keyframes stepIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.stepper-controls{display:flex;align-items:center;gap:.6rem;margin-top:1.1rem;flex-wrap:wrap}
.stepper-dots{display:flex;gap:.35rem;flex:1;flex-wrap:wrap}
.stepper-dot,.stepper-arrow{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-size:.875rem;font-weight:600}
.stepper-dot{min-width:2rem;height:2rem;padding:0 .5rem;border:1px solid var(--ap-hairline-strong,var(--border-strong));color:var(--ap-muted,var(--fg-muted));background:var(--ap-surface,var(--surface))}
.stepper-dot.is-seen{border-color:var(--ap-action,var(--brand-600));color:var(--ap-action,var(--brand-700))}
.stepper-dot.is-active{background:var(--ap-action,var(--brand-700));border-color:var(--ap-action,var(--brand-700));color:var(--ap-on-action,#fff)}
.stepper-arrow{width:2.5rem;height:2.5rem;background:var(--ap-action,var(--brand-700));color:var(--ap-on-action,#fff);font-size:1.15rem}
.stepper-arrow[disabled]{opacity:.3;cursor:default}
.stepper-arrow:active:not([disabled]){transform:scale(.95)}
.stepper-count{font-variant-numeric:tabular-nums;color:var(--ap-subtle,var(--fg-subtle));font-size:.875rem;min-width:3rem;text-align:center}
.stepper-dot:focus-visible,.stepper-arrow:focus-visible{outline:2px solid var(--ap-action,var(--ring));outline-offset:2px}
html[dir="rtl"] .stepper-arrow{transform:scaleX(-1)}
@media (prefers-reduced-motion:reduce){.stepper-step.is-active{animation:none}}

/* ---- Tick list: a checklist the learner ticks off as they go ---- */
.prose .tick-list,.tick-list{list-style:none;margin:1.25rem 0 .5rem;padding:0;display:grid;gap:.5rem}
.tick-list li{margin:0}
.tick-list label{display:flex;gap:.85rem;align-items:flex-start;cursor:pointer;padding:.85rem 1rem;border:1px solid var(--ap-hairline,var(--border));border-radius:12px;background:var(--ap-surface,var(--surface));line-height:1.5;color:var(--ap-ink,var(--fg));transition:border-color .2s,background .2s}
.tick-list input{appearance:none;-webkit-appearance:none;flex:none;width:1.4rem;height:1.4rem;margin:.05rem 0 0;border:1.5px solid var(--ap-hairline-strong,var(--border-strong));border-radius:50%;display:grid;place-content:center;cursor:pointer}
.tick-list input::before{content:"";width:.7rem;height:.38rem;border:solid var(--ap-on-action,#fff);border-width:0 0 2px 2px;transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform .15s}
.tick-list input:checked{background:var(--ap-action,var(--brand-700));border-color:var(--ap-action,var(--brand-700))}
.tick-list input:checked::before{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.tick-list input:focus-visible{outline:2px solid var(--ap-action,var(--ring));outline-offset:2px}
.tick-list label:has(input:checked){border-color:var(--ap-action,var(--brand-600));background:var(--ap-action-soft,var(--brand-soft))}
.tick-status{margin:.25rem 0 1.5rem;font-size:.875rem;color:var(--ap-subtle,var(--fg-subtle));font-variant-numeric:tabular-nums}
.tick-status:empty{display:none}
.tick-status.is-complete{color:var(--ap-action,var(--brand-700));font-weight:600}

/* ---- Knowledge check, question-first: the question is visible, the
   answer opens underneath ---- */
.knowledge-check details{border-radius:18px;overflow:hidden}
.knowledge-check summary{list-style:none;display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 1.25rem}
.knowledge-check summary::-webkit-details-marker{display:none}
.kc-label{font-size:.8125rem;font-weight:600;color:var(--ap-action,var(--brand-700))}
.kc-q{display:flex;gap:.75rem;align-items:flex-start;justify-content:space-between;font-size:1.0625rem;font-weight:600;line-height:1.4;color:var(--ap-ink,var(--fg))}
.kc-q .tap-tile-icon{margin-top:.1rem}
.knowledge-check details[open] .tap-tile-icon::after{transform:rotate(0deg)}
.knowledge-check details[open]{border-color:var(--ap-action,var(--brand-600))}
.knowledge-check details > p,.prose .knowledge-check details > p{margin:0;padding:0 1.25rem 1.15rem;color:var(--ap-muted,var(--fg-muted));font-size:1rem;line-height:1.55}

/* Lists inside interactive pieces should never pick up .prose bullets. */
.prose .tap-tiles,.prose .stepper,.prose .tick-list,.prose .match-exercise,.prose .scenario-choice,.prose .tri-diagram,.prose .example-bars{margin-inline-start:0}
.prose .scenario-choice p,.prose .tri-panel{margin-bottom:0}

/* ==========================================================================
   Layout sections added 2026-10-08: Mirror Hall, Cards Cascade, Colonnade
   and Roadmap Ascent. Our own implementations of those four interaction
   patterns (the getlayers.ai prompts are paid and were not used). Same rules
   as the rest of this file: auto-height detail panels so text can never
   clip, delegated handlers in course-interactive.js, deep green/teal mesh
   gradients kept dark enough for white text (>= 4.5:1), and every control
   is a real <button> or checkbox. Markup carries its own initial state
   (--o/--a, is-active, data-active), so it still renders after a Level 1
   language switch replaces a lesson's .prose innerHTML.
   ========================================================================== */
.mh-tile,.col-pillar,.cc-card,.rm-step.is-reached{
  --mesh:
    radial-gradient(120% 90% at 12% 8%,hsl(calc(var(--hue,165) + 22) 70% 30%) 0%,transparent 58%),
    radial-gradient(90% 80% at 92% 28%,hsl(calc(var(--hue,165) - 14) 66% 27%) 0%,transparent 62%),
    radial-gradient(110% 90% at 40% 108%,hsl(var(--hue,165) 62% 21%) 0%,transparent 72%),
    hsl(var(--hue,165) 58% 15%);
}
.mh-panel,.col-cap,.rm-panel{display:none}
.mh-panel.is-active,.col-cap.is-active,.rm-panel.is-active{display:block;animation:stepIn .35s var(--ease-out)}
.mh-detail,.col-caption,.rm-detail{margin-top:1rem;padding:1.15rem 1.3rem;border-radius:18px;background:var(--ap-inset,var(--bg-alt))}
.prose .mh-panel h4,.prose .col-cap h4,.prose .rm-panel h4,.mh-panel h4,.col-cap h4,.rm-panel h4{margin:0 0 .35rem;font-size:1.0625rem;font-weight:600;color:var(--ap-ink,var(--fg))}
.prose .mh-panel p,.prose .col-cap p,.prose .rm-panel p,.mh-panel p,.col-cap p,.rm-panel p{margin:0;color:var(--ap-muted,var(--fg-muted));line-height:1.6}
.mh-controls,.rm-controls{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-top:.9rem}

/* ---- Mirror Hall: a 3D hall of tall mirror panels. Drag, swipe, arrow
   keys or tap a panel to bring it to the front; the detail opens below. ---- */
.mirror-hall{--s:1;margin:1.5rem 0 1.75rem}
html[dir="rtl"] .mirror-hall{--s:-1}
.mh-stage{position:relative;height:300px;perspective:1000px;overflow:hidden;overflow:clip;border-radius:18px;background:var(--ap-tile,#1d1f1e);touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;cursor:grab}
.mh-stage.is-dragging{cursor:grabbing}
.mh-tile{
  all:unset;box-sizing:border-box;position:absolute;left:50%;top:30px;width:150px;height:196px;margin-left:-75px;
  border-radius:14px;background:var(--mesh);color:#fff;cursor:pointer;
  display:flex;flex-direction:column;justify-content:flex-end;gap:.2rem;padding:.9rem .95rem;
  border:1px solid rgba(255,255,255,.16);
  transform:translateX(calc(var(--o,0) * var(--s) * 92%)) translateZ(calc(var(--a,0) * -60px + var(--lift,0px))) rotateY(calc(var(--o,0) * var(--s) * -22deg));
  opacity:calc(1 - var(--a,0) * .22);z-index:calc(20 - var(--a,0));
  transition:transform .6s var(--ease-out),opacity .6s,visibility .6s;
  -webkit-box-reflect:below 5px linear-gradient(transparent 58%,rgba(255,255,255,.22));
}
.mh-tile.is-active{--lift:70px;border-color:rgba(255,255,255,.4)}
.mh-tile[data-far]{pointer-events:none;opacity:0;visibility:hidden}
.mh-tile:focus-visible{outline:2px solid var(--ap-tile-action,#3ec090);outline-offset:3px}
/* Optional picture on a panel: fills the top and fades into the card colour above the label. */
.mh-tile{overflow:hidden}
.mh-img{position:absolute;inset:0 0 auto;width:100%;height:72%;object-fit:cover;pointer-events:none;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.mh-num,.mh-name{position:relative}
.mh-num{font-size:.75rem;font-weight:600;letter-spacing:.04em;opacity:.85;font-variant-numeric:tabular-nums}
.mh-name{font-size:1.05rem;font-weight:650;line-height:1.2}

/* ---- Cards Cascade: scroll down and each card slides over the last,
   stacking like a hand of cards. Pure CSS (position:sticky). ---- */
.cards-cascade{margin:1.5rem 0 1.75rem;padding-bottom:.25rem}
.cc-card{margin-bottom:1.1rem}
.cc-card:last-child{margin-bottom:0}
.cc-card{
  position:sticky;top:calc(96px + var(--i,0) * 16px);box-sizing:border-box;min-height:9.5rem;
  display:grid;grid-template-columns:auto 1fr;column-gap:1.15rem;row-gap:.45rem;align-content:start;
  padding:1.35rem 1.5rem;border-radius:18px;background:var(--mesh);color:#fff;border:1px solid rgba(255,255,255,.16);
}
.cc-num{grid-row:1 / span 3;font-size:2.6rem;font-weight:600;line-height:1;opacity:.5;font-variant-numeric:tabular-nums;min-width:2.8rem}
.prose .cc-card h4,.cc-card h4{margin:0;font-size:1.1875rem;font-weight:650;color:#fff}
.prose .cc-card p,.cc-card p{margin:0;color:rgba(255,255,255,.92);line-height:1.55}
.cc-check{display:inline-flex;align-items:center;gap:.55rem;margin-top:.35rem;cursor:pointer;font-size:.9375rem;font-weight:600;color:#fff}
.cc-check input{appearance:none;-webkit-appearance:none;flex:none;width:1.35rem;height:1.35rem;margin:0;border:2px solid rgba(255,255,255,.75);border-radius:50%;background:transparent;cursor:pointer;display:grid;place-content:center}
.cc-check input::after{content:"";width:.5rem;height:.5rem;border-radius:50%;background:#fff;transform:scale(0);transition:transform .2s var(--ease-out)}
.cc-check input:checked::after{transform:scale(1)}
.cc-check input:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:560px){.cc-card{top:calc(84px + var(--i,0) * 12px);padding:1.15rem 1.15rem;grid-template-columns:1fr}.cc-num{grid-row:auto;font-size:1.9rem}}

/* ---- Colonnade: a row of pillars. The active pillar widens and its
   gradient panel slides up from below while the previous one leaves through
   the top, like one upward conveyor. Headline and caption below swap in
   sync. Hover (mouse), tap, focus or arrow keys all work. ---- */
.colonnade{margin:1.5rem 0 1.75rem}
.col-row{display:flex;gap:.6rem;height:280px}
.col-pillar{
  all:unset;box-sizing:border-box;position:relative;overflow:hidden;flex:1 1 0;min-width:0;cursor:pointer;
  display:flex;flex-direction:column;justify-content:space-between;padding:1rem .9rem;border-radius:18px;
  background:var(--ap-inset,var(--bg-alt));border:1px solid var(--ap-hairline,var(--border));color:var(--ap-ink,var(--fg));
  transition:flex-grow .6s var(--ease-out),color .3s;
}
.col-pillar::before{content:"";position:absolute;inset:0;background:var(--mesh);transform:translateY(100%);transition:transform .65s var(--ease-out)}
.col-pillar > *{position:relative}
.col-pillar.is-active{flex-grow:3.6;color:#fff;border-color:transparent}
.col-pillar.is-active::before{transform:translateY(0)}
.col-pillar.is-past::before{transform:translateY(-100%)}
.col-pillar:focus-visible{outline:2px solid var(--ap-action,var(--ring));outline-offset:2px}
.col-num{font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums;opacity:.75}
.col-title{font-size:1.0625rem;font-weight:650;line-height:1.25;writing-mode:vertical-rl;transform:rotate(180deg);align-self:flex-start}
.col-pillar.is-active .col-title{writing-mode:horizontal-tb;transform:none;align-self:stretch}
@media (max-width:719px){
  .col-row{flex-direction:column;height:auto}
  .col-pillar{flex:none;height:64px;flex-direction:row;align-items:center;justify-content:flex-start;gap:.9rem;padding:0 1rem;transition:height .5s var(--ease-out),color .3s}
  .col-pillar.is-active{height:96px}
  .col-title,.col-pillar.is-active .col-title{writing-mode:horizontal-tb;transform:none;align-self:center}
}

/* ---- Roadmap Ascent: a staircase that climbs as you go. Steps rise in
   as the roadmap scrolls into view; pick a step (or use the arrows) and
   every step up to it lights up. ---- */
.roadmap{margin:1.5rem 0 1.75rem}
.prose .rm-steps,.rm-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:.45rem;align-items:end}
.prose .rm-steps li,.rm-steps li{margin:0;padding:0;display:flex;align-items:flex-end}
.rm-step{
  all:unset;box-sizing:border-box;position:relative;width:100%;height:calc(92px + var(--i,0) * 26px);cursor:pointer;
  display:flex;flex-direction:column;justify-content:space-between;gap:.4rem;padding:.7rem .7rem;border-radius:14px 14px 6px 6px;
  background:var(--ap-inset,var(--bg-alt));border:1px solid var(--ap-hairline,var(--border));color:var(--ap-ink,var(--fg));
  transition:background .35s,color .35s,transform .6s var(--ease-out),opacity .6s;
}
.rm-step.is-reached{background:var(--mesh);color:#fff;border-color:transparent}
.rm-step.is-active{box-shadow:0 0 0 2px var(--ap-surface,#fff),0 0 0 4px var(--ap-action,var(--brand-600))}
.rm-step:focus-visible{outline:2px solid var(--ap-action,var(--ring));outline-offset:3px}
.rm-num{display:inline-flex;align-items:center;justify-content:center;width:1.65rem;height:1.65rem;border-radius:50%;font-size:.8125rem;font-weight:650;background:var(--ap-action-soft,var(--brand-soft));color:var(--ap-action,var(--brand-700))}
.rm-step.is-reached .rm-num{background:rgba(255,255,255,.2);color:#fff}
.rm-label{font-size:.8125rem;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.roadmap.is-armed:not(.is-in) .rm-step{opacity:0;transform:translateY(28px)}
.roadmap.is-armed.is-in .rm-step{transition-delay:calc(var(--i,0) * 70ms)}
@media (max-width:600px){
  .prose .rm-steps,.rm-steps{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}
  .prose .rm-steps li,.rm-steps li{width:calc(52% + var(--i,0) * 48% / (var(--n,6) - 1))}
  .rm-step{height:56px;flex-direction:row;align-items:center;justify-content:flex-start;padding:0 .8rem;gap:.7rem;border-radius:12px}
}
@media (prefers-reduced-motion:reduce){
  .mh-tile,.col-pillar,.col-pillar::before,.rm-step{transition:none}
  .mh-panel.is-active,.col-cap.is-active,.rm-panel.is-active{animation:none}
  .roadmap.is-armed:not(.is-in) .rm-step{opacity:1;transform:none}
}

/* ---- Diagonal carousel (added 2026-10-08, after the Vengeance UI
   "diagonal-carousel" idea; own plain-JS implementation, no React). Slides
   sit on a diagonal: each step away from the front slide rotates, drops and
   shrinks it. Used as a picture gallery, so images keep their own aspect
   ratio (object-fit:contain) and never get cropped. Always laid out
   left-to-right, also on RTL pages, because it moves spatially. ---- */
.diag-carousel{--dc-size:min(400px,66vw);--dc-step:178px;--dc-rot:24deg;--dc-drop:104px;--dc-h:440px;direction:ltr;margin:1.5rem 0 1.75rem}
.diag-carousel:focus-visible{outline:2px solid var(--ap-action,var(--ring));outline-offset:4px;border-radius:18px}
.dc-viewport{position:relative;height:var(--dc-h);overflow:hidden;overflow:clip;border-radius:18px;background:var(--ap-inset,var(--bg-alt));touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;cursor:grab}
.dc-viewport.is-dragging{cursor:grabbing}
.dc-track{position:absolute;left:50%;top:22px;display:flex;width:max-content;transform:translateX(calc(var(--a,0) * var(--dc-step) * -1 - var(--dc-step) / 2));transition:transform .85s cubic-bezier(.34,1.16,.5,1)}
.dc-slide{--sc:.56;flex:none;width:var(--dc-step);display:flex;flex-direction:column;align-items:center;gap:.5rem;
  z-index:calc(20 - var(--ad,0));
  transform:translateY(calc(var(--d,0) * var(--dc-drop))) rotate(calc(var(--d,0) * var(--dc-rot))) scale(var(--sc));
  transition:transform .85s cubic-bezier(.34,1.16,.5,1);will-change:transform}
.dc-slide.is-active{--sc:1}
.dc-title{margin:0;width:max-content;max-width:var(--dc-size);padding:.2rem .8rem;border-radius:999px;background:var(--ap-inset,var(--bg-alt));text-align:center;font-size:.9375rem;font-weight:600;line-height:1.3;color:var(--ap-ink,var(--fg));opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s}
.prose .dc-title{margin:0}
html[dir="rtl"] .dc-title{direction:rtl}
.dc-slide.is-active .dc-title{opacity:1;transform:none}
.dc-pic{all:unset;box-sizing:border-box;flex:none;width:var(--dc-size);aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--ap-hairline-strong,var(--border-strong));cursor:pointer}
.dc-pic img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none}
.dc-pic:focus-visible{outline:2px solid var(--ap-action,var(--ring));outline-offset:3px}
.dc-controls{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-top:.9rem}
.dc-dots{display:flex;align-items:center;gap:0;flex-wrap:wrap;justify-content:center}
.dc-dot{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.6rem;cursor:pointer}
.dc-dot::before{content:"";width:.55rem;height:.55rem;border-radius:999px;background:var(--ap-subtle,var(--fg-subtle));opacity:.35;transition:width .3s,opacity .3s,background .3s}
.dc-dot.is-active{width:2.2rem}
.dc-dot.is-active::before{width:1.5rem;opacity:1;background:var(--ap-action,var(--brand-700))}
.dc-dot:focus-visible{outline:2px solid var(--ap-action,var(--ring));outline-offset:3px}
.prose .dc-hint,.dc-hint{margin:.6rem 0 0;text-align:center;font-size:.875rem;color:var(--ap-subtle,var(--fg-subtle))}
html[dir="rtl"] .dc-hint{direction:rtl}
.dc-count{display:none}
.diag-carousel .stepper-arrow,html[dir="rtl"] .diag-carousel .stepper-arrow{transform:none}
@media (max-width:620px){
  .diag-carousel{--dc-size:min(230px,60vw);--dc-step:110px;--dc-drop:76px;--dc-rot:22deg;--dc-h:330px}
  .dc-controls{gap:.4rem}
  .diag-carousel .stepper-arrow{width:2.25rem;height:2.25rem}
  .dc-dots{display:none}
  .dc-count{display:inline-block}
}
@media (prefers-reduced-motion:reduce){.dc-track,.dc-slide,.dc-title,.dc-dot{transition:none}}

/* Course pages: a wide table scrolls inside its own box instead of pushing
   the whole page sideways on laptop and tablet widths. */
.split>*{min-width:0}
@media (max-width:1100px){.prose table{display:block;max-width:100%;overflow-x:auto}}
/* Flow diagrams with five or more stages stack vertically below large-laptop
   width, so the row never runs past the lesson card. */
.tri-diagram--flow .tri-band{overflow-wrap:break-word}
@media (max-width:1100px){
  .tri-diagram--flow .tri-shape:has(> .tri-band:nth-of-type(5)){flex-direction:column}
  .tri-diagram--flow .tri-shape:has(> .tri-band:nth-of-type(5)) .flow-arrow{transform:rotate(90deg)}
}