/* Bubble Fresh Training — LMS
   Restyled to the approved Bubble Fresh design system (Feb 2026 style guide):
   cream pages, dark atmospheric sections (coral + teal glows, grain), coral-led
   accents, Fraunces display (italic-coral signature) + Plus Jakarta Sans body.
   Signature element: the coral learning thread — the course spine fills with
   coral as outcomes complete; course cards carry the area-card gradient top bar. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..800;1,9..144,300..800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* brand palette — straight from BubbleFresh-Style-Guide.md */
  --dark:#0C1117; --dark-mid:#151C24; --dark-soft:#1E2730;
  --coral:#D4715E; --coral-dark:#B85A49;
  /* AA text/fill steps: coral + teal darkened until they pass 4.5:1 on the
     light surfaces they sit on (computed against white/cream/tints) */
  --coral-deep:#A85040; --teal-text:#116B60;
  --teal:#4AAFA0; --teal-dark:#1FA393;
  --cream:#FDFAF6; --warm-light:#F8F3ED; --warm-grey:#F0ECE6; --white:#FFFFFF;
  --text:#1A1A1A; --text-mid:#5A5550; --text-soft:#6E6862;
  --paper:#F8F3ED; /* compat: embedded course diagrams stroke text halos with var(--paper) */
  --border:#E5DFD6;
  --green:#22C55E;                      /* live dot only */
  /* LMS-only extension: wrong-answer red — deeper + browner than coral so the
     two never read as the same hue; always paired with an icon, never colour alone */
  --brick:#A8402F; --brick-dark:#8C3323;
  /* tints */
  --coral-tint:#FAEFEA; --teal-tint:#E9F5F1; --brick-tint:#F7E8E4;
  /* dark-section atmosphere */
  --glow-coral:rgba(224,120,86,.15); --glow-teal:rgba(42,191,171,.12);
  /* radii per style guide: large cards 20, medium 16, buttons 12, pills 50 */
  --r-lg:20px; --r-md:16px; --r-sm:12px; --r-pill:50px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow-card:0 25px 60px rgba(12,17,23,.08);
  --shadow-btn:0 4px 20px rgba(212,113,94,.2);
  --shadow-btn-hover:0 10px 30px rgba(212,113,94,.35);
  --display:'Fraunces',Georgia,serif;
  --body-font:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  /* grain texture for dark sections (SVG noise, opacity applied on the layer) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--text);
  font-family:var(--body-font); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;line-height:1.15;letter-spacing:-.01em}
h1 em,h2 em,h3 em{font-style:italic;color:var(--coral);font-weight:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 2.5rem}
.eyebrow{font-family:var(--body-font);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-deep)}
.mono{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* skip link (WCAG) */
.skip-link{position:absolute;left:1rem;top:-3.5rem;z-index:100;background:var(--dark);color:#fff;padding:.6rem 1.1rem;border-radius:var(--r-sm);font-size:.85rem;font-weight:700;transition:top .2s var(--ease)}
.skip-link:focus{top:1rem}

:focus-visible{outline:3px solid var(--coral);outline-offset:2px;border-radius:6px}

/* ---------- dark-section atmosphere (hero, login, certificate ribbon) ---------- */
.dark-atmos{
  position:relative;background:
    radial-gradient(ellipse 90% 70% at 18% -12%, var(--glow-coral), transparent 55%),
    radial-gradient(ellipse 80% 65% at 88% 112%, var(--glow-teal), transparent 55%),
    var(--dark);
  color:#fff;overflow:hidden;
}
.dark-atmos::before{ /* grain */
  content:"";position:absolute;inset:0;background:var(--grain);background-size:120px 120px;
  opacity:.04;pointer-events:none;
}
.dark-atmos::after{ /* gradient accent line at section top */
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--coral),transparent);opacity:.25;pointer-events:none;
}

/* ---------- top bar: dark glass nav ---------- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(12,17,23,.85);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-bottom:1px solid rgba(255,255,255,.06)}
.topbar .wrap{display:flex;align-items:center;gap:1rem;height:72px}
.brand{display:flex;flex-direction:column;line-height:1.05}
.brand .logo{font-family:var(--display);font-weight:600;font-size:1.5rem;color:#fff;letter-spacing:-.01em}
.brand .logo i{font-style:italic;color:var(--coral)}
.brand .logo-sub{font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:2px}
.topbar .spacer{flex:1}
.topnav{display:flex;gap:1.3rem;margin-right:.6rem}
.topnav a{font-size:.88rem;color:rgba(255,255,255,.55);font-weight:600;transition:color .2s}
.topnav a:hover{color:#fff}
.topbar .who{display:flex;align-items:center;gap:.6rem;font-size:.82rem}
.topbar .who .av{width:34px;height:34px;border-radius:50%;background:var(--coral-dark);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.8rem;flex:none}
.who .who-meta{display:flex;flex-direction:column;line-height:1.2}
.who .who-name{font-size:.82rem;font-weight:700;color:#fff}
.who .who-role{font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--coral)}
.who .who-out{margin-left:.4rem;border:2px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:rgba(255,255,255,.75);border-radius:var(--r-sm);padding:.45rem .9rem;font-family:var(--body-font);font-size:.78rem;font-weight:700;cursor:pointer;transition:all .2s var(--ease)}
.who .who-out:hover{border-color:rgba(255,255,255,.4);color:#fff}

/* ---------- dashboard hero ---------- */
.hero .wrap{padding:4.5rem 2.5rem 4.8rem;position:relative;z-index:1}
.hero .eyebrow{color:var(--coral)} /* coral leads (guide §2); 5.7:1 on the dark bg */
.hero h1{font-size:clamp(2.8rem,5.5vw,4.5rem);color:#fff;font-weight:300;line-height:1.08;max-width:18ch;margin:1rem 0 0}
.hero h1 strong{font-weight:600}
.hero p{max-width:54ch;color:rgba(255,255,255,.6);font-size:1.05rem;line-height:1.75;margin:1.2rem 0 0}
.stats{display:flex;flex-wrap:wrap;gap:2.4rem;margin-top:2.4rem}
.stat .n{font-family:var(--display);font-size:1.8rem;font-weight:600;color:var(--coral);line-height:1}
.stat .n em{font-style:italic;color:var(--coral)}
.stat .l{font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:.5rem}

/* hero load animation */
@media (prefers-reduced-motion:no-preference){
  @keyframes heroUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
  .hero .eyebrow{animation:heroUp 1.2s var(--ease) .25s backwards}
  .hero h1{animation:heroUp 1.2s var(--ease) both}
  .hero p{animation:heroUp 1.2s var(--ease) .15s backwards}
  .hero .stats{animation:heroUp 1.2s var(--ease) .45s backwards}
}

/* scroll reveal (JS adds .in; html.js gate keeps content visible without JS) */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0;transform:translateY(36px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
  html.js .reveal.in{opacity:1;transform:none}
  html.js .reveal.d1{transition-delay:.08s}html.js .reveal.d2{transition-delay:.16s}
  html.js .reveal.d3{transition-delay:.24s}html.js .reveal.d4{transition-delay:.32s}
  html.js .reveal.d5{transition-delay:.4s}html.js .reveal.d6{transition-delay:.48s}
}

/* ---------- catalogue ---------- */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin:3.2rem 0 1.4rem}
.section-head h2{font-size:2.5rem;font-weight:400}
.section-head h2 em{font-style:italic;color:var(--coral)}
.search{display:flex;align-items:center;gap:.55rem;background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-pill);padding:.6rem 1.1rem;transition:border-color .2s}
.search:focus-within{border-color:var(--coral)}
.search input{border:0;font-family:var(--body-font);font-size:.88rem;background:transparent;color:var(--text);width:210px}
.search input:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.search input::placeholder{color:var(--text-soft)}
.search svg{color:var(--text-soft)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:1.2rem;padding-bottom:5rem}
.card{position:relative;background:var(--white);border:2px solid var(--border);border-radius:var(--r-lg);padding:1.3rem;padding-top:1.55rem;display:flex;flex-direction:column;gap:.85rem;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.card::before{ /* area-card gradient top bar */
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,var(--dark),var(--coral));transition:background .35s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card);border-color:var(--coral)}
.card:hover::before{background:linear-gradient(90deg,var(--coral),var(--teal))}
.card .tile{height:104px;border-radius:var(--r-sm);display:flex;align-items:flex-end;padding:.8rem .9rem;color:#fff;position:relative;overflow:hidden}
.card .tile .init{font-family:var(--display);font-weight:600;font-style:italic;font-size:1.15rem;line-height:1.15;max-width:85%;text-shadow:0 1px 10px rgba(12,17,23,.35);position:relative;z-index:1}
.card .tile::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(12,17,23,.02),rgba(12,17,23,.3))}
.card h3{font-size:1.3rem;font-weight:600;line-height:1.25}
.card .meta{display:flex;flex-wrap:wrap;gap:.85rem;font-size:.74rem;font-weight:600;color:var(--text-soft);margin-top:auto;font-variant-numeric:tabular-nums}
.card .meta b{color:var(--text);font-weight:700}
.card-prog{height:4px;border-radius:99px;background:var(--warm-grey);overflow:hidden}
.card-prog span{display:block;height:100%;background:linear-gradient(90deg,var(--coral),var(--coral-dark));border-radius:99px}
.tag{align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .7rem;border-radius:var(--r-pill);font-weight:700}
.tag.ready{background:var(--teal-tint);color:var(--teal-text)}
.tag.ready::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
@media (prefers-reduced-motion:no-preference){
  @keyframes breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.5}}
  .tag.ready::before{animation:breathe 2.5s infinite}
}
.tag.pending{background:var(--warm-grey);color:var(--text-soft)}
.card.is-pending{opacity:.85}
.card.is-pending .tile{filter:saturate(.4)}
.card.is-pending::before{background:linear-gradient(90deg,var(--border),var(--warm-grey))}
.done-tag{color:var(--teal-text);font-weight:700;font-size:.74rem}

/* ---------- course page ---------- */
.crumbs{display:flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:600;color:var(--text-soft);padding:1.4rem 0 0}
.crumbs a:hover{color:var(--coral)}
.course-head{padding:.9rem 0 1.7rem;border-bottom:1.5px solid var(--border);margin-bottom:2rem}
.course-head h1{font-size:clamp(2.2rem,4.2vw,2.8rem);font-weight:400;margin-top:.5rem;max-width:24ch}
.course-head p{color:var(--text-mid);max-width:62ch;margin:.8rem 0 0;font-size:.98rem}
.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.pill{font-size:.76rem;font-weight:700;background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-pill);padding:.4rem .85rem;color:var(--text-mid)}
.pill b{color:var(--coral-deep);font-weight:700}
.pill-pass{background:var(--teal-tint);border-color:#CBE8E0;color:var(--teal-text)}

.layout{display:grid;grid-template-columns:310px 1fr;gap:2.6rem;align-items:start;padding-bottom:5.5rem}

/* ---------- the coral learning thread (signature) ---------- */
.spine{position:sticky;top:88px;max-height:calc(100vh - 104px);overflow-y:auto}
.spine .prog{background:var(--white);border:2px solid var(--border);border-radius:var(--r-md);padding:1rem 1.1rem .95rem;margin-bottom:1.1rem}
.spine .prog .row{display:flex;justify-content:space-between;align-items:baseline;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft)}
.spine .prog .pct{font-family:var(--display);font-size:1.8rem;letter-spacing:0;text-transform:none;color:var(--coral);font-weight:600}
.bar{height:7px;border-radius:99px;background:var(--warm-grey);overflow:hidden;margin-top:.6rem}
.bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--coral),var(--coral-dark));border-radius:99px;transition:width .6s var(--ease)}

.spine ol{list-style:none;margin:0;padding:0;position:relative}
.spine ol::before{ /* track */
  content:"";position:absolute;left:15px;top:14px;bottom:14px;width:2px;background:var(--border);
}
.spine ol::after{ /* the thread: fills coral with progress (JS sets --thread) */
  content:"";position:absolute;left:15px;top:14px;width:2px;height:calc((100% - 28px) * var(--thread,0)/100);
  background:linear-gradient(180deg,var(--coral),var(--coral-dark));transition:height .6s var(--ease);
}
.node{position:relative;display:flex;gap:.85rem;align-items:flex-start;padding:.5rem .5rem .5rem 0;border:0;background:none;width:100%;text-align:left;cursor:pointer;font-family:var(--body-font);border-radius:10px;transition:background .2s}
.node:hover{background:var(--warm-light)}
.node .dot{flex:none;width:32px;height:32px;border-radius:50%;background:var(--white);border:2px solid var(--border);display:grid;place-items:center;font-size:.74rem;font-weight:700;color:var(--text-soft);z-index:1;transition:all .25s var(--ease);font-variant-numeric:tabular-nums}
.node .lbl{font-size:.85rem;line-height:1.35;color:var(--text-mid);padding-top:6px}
.node.done .dot{background:var(--coral-dark);border-color:var(--coral-dark);color:#fff}
.node.done .lbl{color:var(--text)}
.node.active .dot{background:var(--dark);border-color:var(--dark);color:#fff;box-shadow:0 0 0 4px rgba(212,113,94,.22)}
.node.active .lbl{color:var(--text);font-weight:700}
@media (prefers-reduced-motion:no-preference){
  @keyframes ringBreathe{0%,100%{box-shadow:0 0 0 4px rgba(212,113,94,.22)}50%{box-shadow:0 0 0 7px rgba(212,113,94,.1)}}
  .node.active .dot{animation:ringBreathe 2.5s infinite}
}

/* ---------- the active outcome panel ---------- */
.panel{background:var(--white);border:2px solid var(--border);border-radius:var(--r-lg);overflow:hidden;min-height:60vh;display:flex;flex-direction:column}
.panel .head{padding:1.7rem 2.1rem 1.4rem;border-bottom:1.5px solid var(--warm-grey);display:flex;gap:1.2rem;align-items:flex-start}
.panel .head .num{flex:none;font-family:var(--display);font-size:2.9rem;font-weight:300;line-height:.85;color:transparent;-webkit-text-stroke:1.5px var(--coral);padding-top:.2rem}
.panel .head .t .eyebrow{margin-bottom:.35rem}
.panel .head h2{font-size:1.55rem;font-weight:600}
.panel .head .obj{color:var(--text-mid);font-size:.88rem;margin-top:.5rem}
.panel .body{padding:1.7rem 2.1rem;flex:1}

/* content slot — where provider material goes */
.slot{border:2px dashed var(--border);border-radius:var(--r-md);background:var(--warm-light);padding:2rem;text-align:center;color:var(--text-mid)}
.slot .ico{width:46px;height:46px;border-radius:var(--r-sm);background:var(--white);border:1.5px solid var(--border);display:grid;place-items:center;margin:0 auto .9rem;color:var(--coral)}
.slot h4{font-family:var(--display);font-size:1.15rem;color:var(--text);margin:0 0 .35rem;font-weight:600}
.slot p{margin:0 auto;max-width:46ch;font-size:.85rem}
.slot .kinds{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1rem}
.slot .kinds span{font-size:.7rem;font-weight:700;background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-pill);padding:.3rem .7rem}

/* objectives in the panel head */
.objectives{margin-top:.9rem;background:var(--warm-light);border:1px solid var(--warm-grey);border-radius:var(--r-sm);padding:.75rem .95rem}
.objectives .ol-label{font-size:.62rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--coral-deep)}
.objectives ul{margin:.4rem 0 0;padding-left:1.1rem}
.objectives li{font-size:.85rem;color:var(--text-mid);margin:.2rem 0}

/* ---------- "in a nutshell" summary ---------- */
.nutshell{display:flex;gap:.85rem;align-items:flex-start;background:var(--coral-tint);border:1px solid #F0DCD4;border-left:4px solid var(--coral);border-radius:var(--r-sm);padding:.95rem 1.1rem;margin-bottom:1.4rem}
.nutshell .n-ic{flex:none;width:32px;height:32px;border-radius:9px;background:var(--white);display:grid;place-items:center;color:var(--coral);box-shadow:0 1px 3px rgba(212,113,94,.18)}
.nutshell .n-lbl{font-size:.62rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--coral-deep);display:block;margin-bottom:.2rem}
.nutshell p{margin:0;font-size:.9rem;line-height:1.6;color:var(--text)}

/* ---------- rich outcome content ---------- */
.content{font-size:.96rem;line-height:1.75;color:var(--text);max-width:64ch}
.content h4{font-family:var(--display);font-size:1.25rem;font-weight:600;color:var(--text);margin:2.1rem 0 .7rem;letter-spacing:-.01em}
.content h4::before{content:"";display:block;width:30px;height:3px;border-radius:2px;background:var(--coral);margin-bottom:.75rem}
.content h4:first-child{margin-top:0}
.content > p:first-of-type{font-size:1.08rem;line-height:1.72;color:var(--text)}
.content p{margin:0 0 .95rem}
.content ul,.content ol{margin:0 0 1rem;padding-left:1.4rem}
.content li{margin:.3rem 0}
.content li::marker{color:var(--coral)}
.content strong{color:var(--text);font-weight:700}

.content .callout{border-radius:var(--r-sm);padding:.95rem 1.1rem;margin:1.15rem 0;border:1px solid var(--border);background:var(--white);position:relative}
.content .callout>strong:first-child{display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:.4rem}
.content .callout p{margin:0;font-size:.9rem}
.content .callout p strong{font-weight:700;color:var(--text)}
.content .callout p+p{margin-top:.5rem}
.content .callout.key{border-left:4px solid var(--coral);background:var(--coral-tint);border-color:#F0DCD4}
.content .callout.key>strong:first-child{color:var(--coral-deep)}
.content .callout.practice{border-left:4px solid var(--teal);background:var(--teal-tint);border-color:#CBE8E0}
.content .callout.practice>strong:first-child{color:var(--teal-text)}
.content .callout.legal{border-left:4px solid var(--dark-soft);background:var(--warm-grey);border-color:#E0DAD1}
.content .callout.legal>strong:first-child{color:var(--dark-soft)}
.content .callout.reflect{border-left:4px solid var(--text-soft);background:var(--warm-light);border-color:#EAE4DB}
.content .callout.reflect>strong:first-child{color:var(--text-mid)}

.content .c-table{width:100%;border-collapse:collapse;margin:1.15rem 0;font-size:.88rem}
.content .c-table th,.content .c-table td{text-align:left;padding:.65rem .8rem;border:1px solid var(--border);vertical-align:top}
.content .c-table thead th{background:var(--warm-grey);font-family:var(--body-font);font-weight:700;color:var(--text)}
.content .c-table tbody tr:nth-child(even){background:var(--warm-light)}

.content blockquote{margin:1.15rem 0;padding:1rem 1.15rem;border-left:4px solid var(--coral);background:var(--warm-light);border-radius:0 var(--r-sm) var(--r-sm) 0;font-style:italic;color:var(--text-mid)}
.content blockquote p{margin:0 0 .5rem}
.content blockquote p:last-child{margin:0}

/* ---------- figures / SVG diagrams ---------- */
.c-figure{margin:1.5rem 0;border:1.5px solid var(--border);border-radius:var(--r-md);background:linear-gradient(180deg,var(--white),var(--cream));padding:1.4rem 1.4rem 1rem;overflow:hidden}
.c-figure svg{display:block;width:100%;height:auto;max-width:660px;margin:0 auto}
.c-figure figcaption{font-size:.74rem;font-weight:600;color:var(--text-soft);text-align:center;margin-top:.85rem;line-height:1.5}
.c-figure figcaption b{color:var(--coral-deep);font-weight:700} /* 4.9:1+ on the figure's cream gradient */
.figure-hero{margin:0 0 1.6rem}

/* ---------- key takeaways recap card ---------- */
.recap{margin-top:1.9rem;background:var(--teal-tint);border:1px solid #CBE8E0;border-radius:var(--r-md);padding:1.25rem 1.4rem}
.recap .r-lbl{display:flex;align-items:center;gap:.55rem;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--teal-text);font-weight:700;margin-bottom:.75rem}
.recap .r-lbl svg{color:var(--teal-text)}
.recap ul{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}
.recap li{position:relative;padding-left:1.75rem;font-size:.9rem;line-height:1.55;color:var(--text)}
.recap li::before{content:"✓";position:absolute;left:0;top:.1rem;width:19px;height:19px;border-radius:50%;background:var(--teal-text);color:#fff;font-size:.66rem;font-weight:700;display:grid;place-items:center}

/* reading time in the outcome eyebrow */
.read-time{color:var(--text-soft);text-transform:none;letter-spacing:.02em}
.read-time::before{content:"·";margin:0 .45rem;color:var(--border)}

/* ============ interactive components ============ */
.content .ix-acc,.content .ix-reveals,.content .ix-try,.content .ix-reflect{max-width:none}

/* accordion — progressive detail (native <details>) */
.content details.ix-acc{border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--white);margin:1.15rem 0;overflow:hidden;transition:border-color .2s}
.content details.ix-acc:hover{border-color:var(--coral)}
.content details.ix-acc>summary{cursor:pointer;list-style:none;padding:.85rem 3rem .85rem 1.05rem;font-weight:700;font-size:.9rem;color:var(--text);position:relative}
.content details.ix-acc>summary::-webkit-details-marker{display:none}
.content details.ix-acc>summary::after{content:"+";position:absolute;right:1rem;top:50%;transform:translateY(-50%);width:23px;height:23px;border-radius:50%;background:var(--coral-tint);color:var(--coral-deep);display:grid;place-items:center;font-size:1rem;font-weight:600;line-height:1}
.content details.ix-acc[open]>summary::after{content:"\2212"}
.content details.ix-acc .ix-acc-body{padding:.1rem 1.05rem .95rem}
.content details.ix-acc .ix-acc-body>*:first-child{margin-top:0}

/* reveal cards — e.g. myth -> evidence */
.content .ix-reveals{display:grid;gap:.6rem;margin:1.25rem 0}
.content .ix-reveal{display:block;width:100%;text-align:left;border:1.5px solid var(--border);border-left:4px solid var(--coral);border-radius:var(--r-sm);background:var(--coral-tint);padding:.8rem 1rem;cursor:pointer;font-family:var(--body-font);transition:background .2s,border-color .2s}
.content .ix-reveal:hover{border-left-color:var(--coral-dark)}
.content .ix-reveal-q{display:block;font-weight:700;color:var(--text);font-size:.9rem;line-height:1.45}
.content .ix-reveal-q::after{content:" ⌄ reveal";font-size:.68rem;color:var(--coral-deep);font-weight:700;white-space:nowrap;letter-spacing:.04em}
.content .ix-reveal-a{display:none;margin-top:.6rem;font-size:.88rem;color:var(--text-mid);line-height:1.6}
.content .ix-reveal.open{background:var(--white);border-left-color:var(--teal)}
.content .ix-reveal.open .ix-reveal-q::after{content:""}
.content .ix-reveal.open .ix-reveal-a{display:block}

/* try-it — inline applied scenario with feedback */
.content .ix-try{position:relative;border:1.5px solid #CBE8E0;border-radius:var(--r-md);background:var(--teal-tint);padding:2.2rem 1.25rem 1.15rem;margin:1.5rem 0}
.content .ix-try::before{content:"◆ TRY IT";position:absolute;top:.85rem;left:1.25rem;font-size:.64rem;letter-spacing:.11em;color:var(--teal-text);font-weight:700}
.content .ix-try-q{font-weight:700;color:var(--text);margin:0 0 .8rem;font-size:.93rem;line-height:1.5}
.content .ix-try-opts{display:grid;gap:.55rem}
.content .ix-try-opt{text-align:left;border:1.5px solid var(--border);background:var(--white);border-radius:var(--r-sm);padding:.7rem .95rem;cursor:pointer;font-size:.88rem;font-family:var(--body-font);color:var(--text);transition:border-color .2s}
.content .ix-try-opt:hover{border-color:var(--coral)}
.content .ix-try.answered .ix-try-opt{cursor:default}
.content .ix-try-opt.correct{border-color:var(--teal-text);background:#DFF0EB;font-weight:600}
.content .ix-try-opt.chosen-wrong{border-color:var(--brick);background:var(--brick-tint)}
.content .ix-try-fb{display:none;margin-top:.8rem;font-size:.85rem;line-height:1.6;padding:.75rem .95rem;border-radius:var(--r-sm);background:var(--white);border:1px solid #CBE8E0;color:var(--text-mid)}
.content .ix-try-fb strong{color:var(--teal-text)}
.content .ix-try.answered .ix-try-fb{display:block}

/* reflection — saved note */
.content .ix-reflect{border:2px dashed var(--border);border-radius:var(--r-sm);background:var(--warm-light);padding:.95rem 1.1rem 1rem;margin:1.4rem 0}
.content .ix-reflect::before{content:"✎ Reflection";display:block;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-deep);font-weight:700;margin-bottom:.5rem}
.content .ix-reflect-l{display:block;font-weight:600;color:var(--text);font-size:.88rem;margin-bottom:.6rem;line-height:1.5}
.content .ix-reflect-t{width:100%;min-height:76px;border:1.5px solid var(--border);border-radius:9px;padding:.65rem .8rem;font-family:var(--body-font);font-size:.88rem;line-height:1.55;resize:vertical;background:var(--white);color:var(--text)}
.content .ix-reflect-t:focus{outline:3px solid var(--coral);outline-offset:2px;border-color:var(--coral)}
.content .ix-reflect-saved{font-size:.68rem;font-weight:700;color:var(--teal-text);margin-top:.4rem;opacity:0;transition:opacity .2s}
.content .ix-reflect-saved.show{opacity:1}

/* SVG element vocabulary (course diagrams keep their class names; re-toned to brand) */
.d-bg{fill:var(--warm-light)}
.d-card{fill:var(--white);stroke:var(--border);stroke-width:1.5}
.d-hub{fill:var(--dark)}
.d-node{fill:var(--coral-tint);stroke:var(--coral);stroke-width:1.5}
.d-node-a{fill:var(--teal-tint);stroke:var(--teal);stroke-width:1.5}
.d-node-s{fill:#DFF0EB;stroke:var(--teal-dark);stroke-width:1.5}
.d-node-n{fill:var(--warm-grey);stroke:#B8AEA2;stroke-width:1.5}
.d-line{stroke:#C9C1B5;stroke-width:2;fill:none}
.d-line-t{stroke:var(--coral);stroke-width:2;fill:none}
.d-title{font-family:var(--body-font);fill:var(--text);font-weight:700}
.d-sub{font-family:var(--body-font);fill:var(--text-mid)}
.d-on{font-family:var(--body-font);fill:#fff;font-weight:700}
.d-on-s{font-family:var(--body-font);fill:rgba(255,255,255,.75)}
.d-eye{font-family:var(--body-font);fill:var(--coral-deep);font-weight:700;letter-spacing:.08em}
.d-num{font-family:var(--body-font);fill:var(--coral-deep);font-weight:700}
.d-fill-teal{fill:var(--teal-dark)}.d-fill-amber{fill:var(--coral)}.d-fill-sage{fill:var(--teal)}.d-fill-ink{fill:var(--text-mid)}

/* ---------- knowledge check (multi-question) ---------- */
.check{margin-top:1.9rem;border-top:1.5px solid var(--warm-grey);padding-top:1.5rem}
.check .k-eye{display:flex;align-items:center;gap:.6rem;margin-bottom:1.1rem;flex-wrap:wrap}
.check .k-eye .badge{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;background:var(--coral-tint);color:var(--coral-deep);padding:.3rem .7rem;border-radius:var(--r-pill);font-weight:700}
.check .k-eye .k-count{font-size:.76rem;font-weight:700;color:var(--text-soft);font-variant-numeric:tabular-nums}
.check .k-pass{margin-left:auto;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-text);font-weight:700;background:var(--teal-tint);border-radius:var(--r-pill);padding:.3rem .7rem}
.check .q{margin-bottom:1.4rem}
.check .q h4{font-family:var(--body-font);font-size:.95rem;font-weight:700;color:var(--text);margin:0 0 .75rem;display:flex;gap:.6rem;align-items:baseline;line-height:1.5}
.check .q h4 .q-n{flex:none;width:23px;height:23px;border-radius:50%;background:var(--dark);color:#fff;font-size:.72rem;font-weight:700;display:grid;place-items:center;transform:translateY(3px)}
.check .q h4 .q-n.ok{background:var(--teal-text)}
.opts{display:grid;gap:.55rem}
.opt{display:flex;align-items:center;gap:.75rem;padding:.75rem .95rem;border:2px solid var(--border);border-radius:var(--r-sm);background:var(--white);cursor:pointer;transition:border-color .2s,background .2s;font-size:.9rem;text-align:left;font-family:var(--body-font);color:var(--text)}
.opt:hover{border-color:var(--coral)}
.opt .mk{width:24px;height:24px;border-radius:50%;border:2px solid var(--border);flex:none;display:grid;place-items:center;font-size:.72rem;font-weight:700;color:var(--text-soft)}
.opt.chosen{border-color:var(--coral);background:var(--coral-tint)}
.opt.chosen .mk{border-color:var(--coral-dark);background:var(--coral-dark);color:#fff}
.opt.right{border-color:var(--teal-text);background:var(--teal-tint)}
.opt.right .mk{border-color:var(--teal-text);background:var(--teal-text);color:#fff}
.opt.wrong{border-color:var(--brick);background:var(--brick-tint)}
.opt.wrong .mk{border-color:var(--brick);background:var(--brick);color:#fff}
.opt[disabled]{cursor:default}
.opt.was-wrong{border-color:#E4C4BB;background:#FBF1EE;opacity:.75}
.opt.was-wrong .mk{border-color:var(--brick);background:var(--brick);color:#fff}
.opt.muted{opacity:.5}
.explain{margin-top:.6rem;font-size:.85rem;line-height:1.6;padding:.7rem .9rem;border-radius:var(--r-sm);color:var(--text-mid)}
.explain.ok{background:var(--teal-tint);border:1px solid #CBE8E0}
.explain.no{background:var(--brick-tint);border:1px solid #EFD4CC}
.explain strong{color:var(--text)}

/* ---------- graded final assessment ---------- */
.assess-result{display:flex;align-items:center;gap:1.1rem;border-radius:var(--r-md);padding:1.1rem 1.4rem;margin-bottom:1.6rem;border:2px solid var(--border)}
.assess-result.pass{background:var(--teal-tint);border-color:#BFE3D9}
.assess-result.fail{background:var(--brick-tint);border-color:#EBCFC6}
.assess-result .ar-score{font-family:var(--display);font-size:2.5rem;font-weight:600;line-height:1;flex:none;font-variant-numeric:tabular-nums}
.assess-result.pass .ar-score{color:var(--teal-text)}
.assess-result.fail .ar-score{color:var(--brick)}
.assess-result .ar-score span{font-size:1.4rem;opacity:.6}
.assess-result .ar-txt{font-size:.88rem;line-height:1.55;color:var(--text-mid)}
.assess-result .ar-txt strong{display:block;font-family:var(--body-font);font-weight:800;font-size:1rem;color:var(--text);margin-bottom:.15rem}
.assess .aq{padding:1rem 0;border-top:1.5px solid var(--warm-grey)}
.assess .aq:first-child{border-top:0;padding-top:0}
.assess .aq h4{font-family:var(--body-font);font-size:.93rem;font-weight:700;color:var(--text);margin:0 0 .75rem;display:flex;gap:.6rem;align-items:baseline;line-height:1.5}
.assess .aq h4 .aq-n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--dark);color:#fff;font-size:.72rem;font-weight:700;display:grid;place-items:center;transform:translateY(3px)}
.assess .aq.right h4 .aq-n{background:var(--teal-text)}
.assess .aq.wrong h4 .aq-n{background:var(--brick)}
.aopts{display:grid;gap:.55rem}
.aopt{display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;border:2px solid var(--border);border-radius:var(--r-sm);background:var(--white);cursor:pointer;font-size:.88rem;font-family:var(--body-font);color:var(--text);text-align:left;transition:border-color .2s,background .2s}
.aopt:hover{border-color:var(--coral)}
.aopt[disabled]{cursor:default}
.aopt .amk{width:24px;height:24px;border-radius:50%;border:2px solid var(--border);flex:none;display:grid;place-items:center;font-size:.68rem;font-weight:700;color:var(--text-soft)}
.aopt.sel{border-color:var(--coral);background:var(--coral-tint)}
.aopt.sel .amk{border-color:var(--coral-dark);background:var(--coral-dark);color:#fff}
.aopt.right{border-color:var(--teal-text);background:var(--teal-tint)}
.aopt.right .amk{border-color:var(--teal-text);background:var(--teal-text);color:#fff}
.aopt.wrong{border-color:var(--brick);background:var(--brick-tint)}
.aopt.wrong .amk{border-color:var(--brick);background:var(--brick);color:#fff}

.panel .foot{padding:1.1rem 2.1rem;border-top:1.5px solid var(--warm-grey);display:flex;align-items:center;justify-content:space-between;gap:.9rem;background:var(--warm-light)}
.panel .foot .hint{font-size:.8rem;color:var(--text-mid)}

/* ---------- buttons (style guide: 12px radius, 2px border, PJS 700) ---------- */
.btn{font-family:var(--body-font);font-weight:700;font-size:.95rem;border-radius:var(--r-sm);padding:1rem 2rem;border:2px solid transparent;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s,color .2s;display:inline-flex;align-items:center;gap:.5rem}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(0)}
/* coral-dark fill: white label passes 4.5:1 (pure coral is 3.32:1); shadows keep the coral tone */
.btn-primary{background:var(--coral-dark);border-color:var(--coral-dark);color:#fff;box-shadow:var(--shadow-btn)}
.btn-primary:hover{background:var(--coral-deep);border-color:var(--coral-deep);box-shadow:var(--shadow-btn-hover)}
.btn-primary:disabled{background:var(--warm-grey);border-color:var(--warm-grey);color:var(--text-soft);cursor:not-allowed;box-shadow:none;transform:none}
.btn-ghost{background:transparent;color:var(--text-mid);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--coral);color:var(--coral-deep);box-shadow:0 4px 14px rgba(12,17,23,.08)}
.btn-ghost:disabled{opacity:.45;cursor:not-allowed;transform:none;border-color:var(--border);color:var(--text-mid)}

/* ---------- certificate: the dark, atmospheric payoff ---------- */
.cert{background:var(--white);border:2px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:0;overflow:hidden;text-align:center}
.cert .ribbon{padding:2.8rem 1.5rem;position:relative}
.cert .seal{width:76px;height:76px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;margin:0 auto 1rem;font-size:1.9rem;box-shadow:0 0 0 6px rgba(255,255,255,.12);position:relative;z-index:1}
.cert .ribbon .eyebrow{color:var(--coral);position:relative;z-index:1}
.cert .ribbon h2{color:#fff;font-size:1.9rem;font-weight:400;margin-top:.5rem;position:relative;z-index:1}
.cert .body{padding:1.9rem 2rem 2.3rem}
.cert .body .nm{font-family:var(--display);font-size:1.6rem;font-weight:600;color:var(--text)}
.cert .body p{color:var(--text-mid);margin:.4rem 0 0;font-size:.92rem}
.cert .body .date{font-size:.76rem;font-weight:600;color:var(--text-soft);margin-top:1.1rem}
.cert .actions{display:flex;gap:.75rem;justify-content:center;margin-top:1.5rem;flex-wrap:wrap}

/* certificate assessment score */
.cert-score{display:flex;justify-content:center;gap:.85rem;margin:1.4rem auto .2rem;flex-wrap:wrap}
.cert-score .cs-item{background:var(--warm-light);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:.75rem 1.1rem;min-width:104px}
.cert-score .cs-n{display:block;font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--coral-deep);line-height:1;font-variant-numeric:tabular-nums}
.cert-score .cs-l{display:block;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);margin-top:.4rem}

.toast{position:fixed;left:50%;bottom:1.6rem;transform:translateX(-50%) translateY(20px);background:var(--dark);color:#fff;padding:.75rem 1.4rem;border-radius:var(--r-sm);font-size:.88rem;font-weight:600;opacity:0;pointer-events:none;transition:all .3s var(--ease);z-index:50;box-shadow:0 20px 50px rgba(12,17,23,.35);border-left:3px solid var(--coral)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============ login / register: glass card on dark atmosphere ============ */
.auth-body{min-height:100vh;display:grid;place-items:center;overflow:auto} /* overrides .dark-atmos overflow:hidden — body overflow propagates to the viewport and would scroll-lock short screens */
.auth-wrap{width:100%;max-width:430px;padding:1.5rem;position:relative;z-index:1}
.auth-card{background:rgba(255,255,255,.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:2rem 1.9rem 2.2rem}
.auth-brand{margin-bottom:1.4rem}
.auth-brand .logo{font-size:1.7rem}
.auth-tabs{display:flex;gap:.3rem;background:rgba(255,255,255,.07);border-radius:var(--r-sm);padding:.3rem;margin-bottom:1.4rem}
.auth-tab{flex:1;border:0;background:transparent;border-radius:9px;padding:.6rem;min-height:44px;font-family:var(--body-font);font-size:.88rem;font-weight:700;color:rgba(255,255,255,.55);cursor:pointer;transition:all .2s}
.auth-tab.active{background:var(--coral-dark);color:#fff}
.auth-form{display:flex;flex-direction:column;gap:.9rem}
.auth-form[hidden]{display:none} /* author display beats the hidden attr otherwise */
.auth-form label{display:flex;flex-direction:column;gap:.35rem;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.85)}
.auth-form input{border:1.5px solid rgba(255,255,255,.15);border-radius:10px;padding:.7rem .85rem;font-family:var(--body-font);font-size:.95rem;background:rgba(255,255,255,.06);color:#fff;transition:border-color .2s}
.auth-form select{border:1.5px solid rgba(255,255,255,.15);border-radius:10px;padding:.7rem .85rem;font-family:var(--body-font);font-size:.95rem;background:var(--dark-mid);color:#fff;transition:border-color .2s}
.auth-form select option{background:var(--dark-mid);color:#fff}
.auth-form input::placeholder{color:rgba(255,255,255,.55)}
.auth-form input:focus,.auth-form select:focus{outline:3px solid var(--coral);outline-offset:2px;border-color:var(--coral)}
.hint-inline{font-weight:500;color:rgba(255,255,255,.55);font-size:.68rem}
.auth-err{margin:0;font-size:.82rem;font-weight:600;color:#F2A08A;min-height:1px}
.auth-err:empty{display:none}
.auth-submit{margin-top:.3rem;justify-content:center}
.auth-foot{color:rgba(255,255,255,.55);font-size:.76rem;text-align:center;margin-top:1.1rem;position:relative;z-index:1}

/* ============ records & admin ============ */
.records-head{padding:2.6rem 0 1.4rem}
.records-head h1{font-size:clamp(2.2rem,4.2vw,2.8rem);font-weight:400;margin-top:.4rem}
.records-head h1 em{font-style:italic;color:var(--coral)}
.records-sub{color:var(--text-mid);margin-top:.5rem;font-size:.95rem}
.rec-table{border:2px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--white);margin-bottom:4rem}
.rec-row{display:grid;grid-template-columns:2fr 1.4fr 1fr auto;gap:.9rem;align-items:center;padding:.9rem 1.2rem;border-top:1px solid var(--warm-grey)}
.admin-table .rec-row{grid-template-columns:1.6fr 1.6fr 1.4fr 1fr}
.rec-row.rec-hd{border-top:0;background:var(--warm-light);font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-soft);padding-top:.7rem;padding-bottom:.7rem}
.rec-course{display:flex;flex-direction:column;gap:.1rem}
.rec-course strong{font-size:.9rem;color:var(--text);overflow-wrap:anywhere}
.rec-course em{font-style:normal;font-size:.72rem;font-weight:600;color:var(--text-soft);overflow-wrap:anywhere}
.rec-score{font-size:.78rem;font-weight:600;color:var(--text-mid);font-variant-numeric:tabular-nums}
.rec-date{font-size:.78rem;font-weight:600;color:var(--text-mid);font-variant-numeric:tabular-nums}
.rec-lvl{font-size:.7rem;font-weight:600;color:var(--text-soft)}
.rec-link{font-size:.82rem;font-weight:700;color:var(--coral-deep)}
.rec-link:hover{color:var(--coral-dark)}
.rec-actions{display:flex;flex-direction:column;gap:.2rem;align-items:flex-start}
.rec-cert{border:0;background:none;padding:0;cursor:pointer;font-family:var(--body-font);font-size:.78rem;font-weight:700;color:var(--coral-deep);text-align:left}
.rec-cert:hover{color:var(--coral-dark);text-decoration:underline}
.pass-badge{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:.22rem .6rem;border-radius:var(--r-pill)}
.pass-badge.ok{background:var(--teal-tint);color:var(--teal-text)}
.pass-badge.no{background:var(--brick-tint);color:var(--brick)}
.empty{background:var(--white);border:2px dashed var(--border);border-radius:var(--r-lg);padding:2.8rem;text-align:center;color:var(--text-mid);margin-bottom:4rem;display:flex;flex-direction:column;align-items:center;gap:1rem}
.admin-stats{gap:2rem;margin:0 0 .5rem}
.admin-stats .stat .n{color:var(--coral)}
.admin-stats .stat .l{color:var(--text-soft)}
.admin-tools{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.admin-search{border:1.5px solid var(--border);border-radius:var(--r-pill);padding:.6rem 1.1rem;font-family:var(--body-font);font-size:.88rem;background:var(--white);color:var(--text);width:230px;transition:border-color .2s}
.admin-search:focus{outline:3px solid var(--coral);outline-offset:2px;border-color:var(--coral)}
.admin-search::placeholder{color:var(--text-soft)}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .wrap{padding-left:1.5rem;padding-right:1.5rem}
  .hero .wrap{padding-top:3.2rem;padding-bottom:3.4rem}
}
@media (max-width:860px){
  .layout{grid-template-columns:1fr;gap:1.4rem}
  .spine{position:static;max-height:none;overflow-y:visible}
  /* the thread becomes a horizontal dot rail — course nav stays reachable on mobile */
  .spine ol{display:flex;overflow-x:auto;gap:.35rem;padding:.5rem;-webkit-overflow-scrolling:touch}
  .spine ol::before,.spine ol::after{display:none}
  .spine li{flex:none}
  .node{padding:.375rem;width:auto;flex:none} /* 32px dot + 2x6px = 44px touch target */
  /* keep the outcome title in the accessible name — visually hidden, not display:none */
  .node .lbl{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
  .panel .head .num{font-size:2.1rem}
  .panel .head,.panel .body,.panel .foot{padding-left:1.25rem;padding-right:1.25rem}
}
@media (max-width:720px){
  .topbar .wrap{gap:.7rem}
  .brand .logo{font-size:1.3rem}
  .brand .logo-sub{display:none}
  .topnav{gap:.85rem;margin-right:.2rem}
  .topnav a{font-size:.78rem}
  .who .who-meta{display:none}
  .who .who-out{padding:.4rem .7rem;font-size:.72rem}
  .section-head{flex-direction:column;align-items:stretch}
  .search input{width:100%}
  .search{width:100%}
  .rec-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.5rem}
  .admin-table .rec-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rec-hd span:empty{display:none}
  .panel .foot{flex-wrap:wrap}
  .panel .foot .hint{order:3;width:100%}
  .who .who-out{min-height:44px}
  /* embedded course tables scroll sideways instead of clipping under panel overflow:hidden */
  .content .c-table{display:block;overflow-x:auto}
}
@media (max-width:480px){
  /* keep the whole nav reachable without page-wide horizontal scroll:
     the link strip itself shrinks and scrolls, the page never pans */
  .topbar .wrap{gap:.5rem}
  .brand .logo{font-size:1.05rem}
  .topnav{flex:1;min-width:0;overflow-x:auto;gap:.6rem;-webkit-overflow-scrolling:touch}
  .topnav a{font-size:.72rem;white-space:nowrap}
  .topbar .who .av{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------- print: the certificate prints clean, everything else hides ---------- */
@media print{
  .topbar,.crumbs,.course-head,.spine,.toast,.cert .actions,.skip-link,.hero{display:none!important}
  body{background:#fff}
  .wrap{max-width:none;padding:0}
  .layout{display:block;padding:0}
  .cert{border:2px solid var(--border);box-shadow:none;margin:0}
  /* deterministic light ribbon: many print pipelines strip backgrounds, which
     would leave the white course title invisible — print dark-on-white instead */
  .cert .ribbon{background:#fff!important;color:var(--text)}
  .cert .ribbon::before,.cert .ribbon::after{display:none}
  .cert .ribbon h2{color:var(--text)}
  .cert .ribbon .eyebrow{color:var(--coral-deep)}
  .cert .ribbon{border-bottom:3px solid var(--coral)}
  .cert .seal{background:#fff;color:var(--coral-deep);border:3px solid var(--coral-deep);box-shadow:none}
}