/* ═══════════════════════════════════════════════════════════
   DOORS Digital Skills · shared lesson stylesheet
   Used by all mini-module lesson pages and games. Load
   css/doors-core.css first — brand colours and the reset
   live there now. Page-specific rules stay in a small
   <style> block in each page's head.
   ═══════════════════════════════════════════════════════════ */

/* ── Slim top bar ──
   Lessons and games keep learners focused, so instead of the
   full site header they get one quiet line: the DOORS logo
   (→ home) and a "Back" link (→ the section they came from). */
.slimbar{
  background:var(--bar); padding:8px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.slimbar-brand{display:flex; align-items:center; text-decoration:none}
.slimbar-brand img{height:36px; filter:brightness(0) invert(1)}
.slimbar-back{
  font-family:Verdana, Geneva, sans-serif; font-size:16px; font-weight:700;
  color:rgba(255,255,255,.9); text-decoration:none; padding:8px 0;
}
.slimbar-back:hover{color:var(--bar-ink-white)}

/* Breadcrumb trail inside the slim bar: Home › Learn › This module.
   Links are white; the current module is dimmer and not a link. */
.slimbar-crumbs{
  font-family:"Sylexiad Serif Medium", Georgia, serif; font-size:18px; font-weight:700;
  color:rgba(255,255,255,.6); padding:8px 0;
}
.slimbar-crumbs a{color:rgba(255,255,255,.95); text-decoration:none}
.slimbar-crumbs a:hover{color:var(--bar-ink-white); text-decoration:underline}
.slimbar-crumbs .crumb-sep{padding:0 5px}
@media (max-width:480px){
  /* tight phones: hide the module name, keep the two links */
  .slimbar-crumbs .crumb-here,
  .slimbar-crumbs .crumb-sep:last-of-type{display:none}
}

/* ── Dark mode link, slim variant ──
   The same control as site.css, in the slimbar's quieter frame: underlined
   text, no pill, no switch. The 44px touch target and the words do not
   shrink. Colours are the two --bar-* values, which never flip, so this
   component needs no dark rule of its own. */
.slimbar .theme-toggle{
  display:inline-flex; align-items:center;
  min-height:44px;          /* touch target — never take this below 44px */
  flex-shrink:0;
  padding:6px 2px;
  border:0; background:transparent; cursor:pointer;
  font-family:Verdana, Geneva, sans-serif; font-size:16px; font-weight:700;
  line-height:1.2; color:var(--bar-ink-white);
  text-decoration:underline; text-underline-offset:3px;
}
.slimbar .theme-toggle:hover{color:var(--bar-accent-yellow)}

/* A recolour of the global focus ring, not a removal: --blue is 2.24:1
   against the green bar in light mode and too faint to find there. */
.slimbar .theme-toggle:focus-visible{
  outline:3px solid var(--bar-accent-yellow); outline-offset:2px;
}

/* The label swap, same as site.css. The head snippet sets data-theme before
   the first paint, so the correct wording is the one that renders — the
   other is display:none and is never read out either. */
.slimbar .theme-toggle .theme-toggle-to-light{display:none}
[data-theme="dark"] .slimbar .theme-toggle .theme-toggle-to-dark {display:none}
[data-theme="dark"] .slimbar .theme-toggle .theme-toggle-to-light{display:inline}

@media (max-width:480px){
  /* The words stay visible at every width. The bar wraps to a second
     line instead of shortening the link to something unreadable. */
  .slimbar{flex-wrap:wrap; row-gap:8px}
}

body{
  background:var(--bg); color:var(--ink);
  font-family:"Atkinson Hyperlegible", Verdana, Geneva, sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.7;
}
a{color:var(--link)} a:hover{color:var(--link-hover)}
.hero{
  min-height:90vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:48px 32px; text-align:center; background:var(--surface);
}
.eyebrow{
  font-size:17.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--orange); margin-bottom:14px;
}
.hero h1{font-size:clamp(42.5px,6.25vw,65px); font-weight:700; line-height:1.1; max-width:640px}
.hero .sub{font-size:clamp(22.5px,3vw,27.5px); line-height:1.65; margin-top:16px; max-width:540px; color:var(--mid)}
.scrollhint{
  margin-top:40px; display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--green); font-weight:700; font-size:20px; animation:bobDown 1.8s ease-in-out infinite;
}
@keyframes bobDown{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
@media (prefers-reduced-motion: reduce){ .scrollhint{animation:none} }
.section{padding:48px 32px 36px; max-width:600px; margin:0 auto}
.section h2{font-size:clamp(32.5px,4.75vw,45px); font-weight:700; line-height:1.15; margin-bottom:16px}
.section p{font-size:25px; line-height:1.7; color:var(--mid); margin-top:18px}
.section p:first-of-type{margin-top:0}
.section strong{color:var(--ink)}
.demo-wrap{max-width:640px; margin:0 auto; padding:12px 32px 56px}
.tcards{display:flex; flex-direction:column; gap:14px}
.tcard{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:22px 26px;
  box-shadow:0 2px 8px var(--shadow);
}
.tcard .ai-who{font-weight:700; font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); display:block; margin-bottom:6px}
.tcard .ai-text{font-size:22.5px; line-height:1.6; color:var(--mid); margin-bottom:14px}
.topts{display:flex; gap:8px; flex-wrap:wrap}
.tbtn{
  font-family:inherit; font-size:20px; font-weight:700; padding:10px 20px; border-radius:999px;
  border:2px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer;
}
.tbtn:hover{border-color:var(--green)}
.tbtn:focus-visible{outline:3px solid var(--blue); outline-offset:2px}
.tbtn.right{border-color:var(--green); background:var(--p-green)}
.tbtn.wrong{border-color:var(--pink); background:var(--p-pink)}
.tbtn:disabled{cursor:default}
.tresult{margin-top:12px; font-size:21.25px; line-height:1.55; color:var(--mid); min-height:1.5em}
.demo-summary{
  margin-top:18px; border-radius:14px; padding:20px 24px; font-size:22.5px; line-height:1.6;
  background:var(--chip-yellow-bg); border:1px solid var(--edge-yellow); display:none;
}
.demo-summary.show{display:block; animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .demo-summary.show{animation:none} }
.demo-summary strong{color:var(--ink)}
.cards{display:flex; flex-direction:column; gap:14px}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px 26px;
  display:flex; gap:16px; align-items:flex-start; box-shadow:0 2px 8px var(--shadow);
}
.card .icon{
  flex:none; width:48px; height:48px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
}
.card h3{font-weight:700; font-size:25px; margin-bottom:4px}
.card p{font-size:22.5px; line-height:1.6; color:var(--mid)}
.card p + p{margin-top:8px}
.callout{max-width:600px; margin:0 auto; padding:0 32px 20px}
.callout-inner{
  background:var(--chip-pink-bg); border:1px solid var(--edge-pink); border-radius:14px; padding:20px 24px;
  font-size:22.5px; line-height:1.6; color:var(--mid);
}
.callout-inner strong{color:var(--ink)}
.bridge{max-width:600px; margin:0 auto; padding:20px 32px 28px}
.bridge-inner{background:var(--purple); color:#FFFFFF; border-radius:18px; padding:28px 30px}
.bridge-inner .label{font-size:16.25px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--p-purple); margin-bottom:8px}
.bridge-inner p{font-size:23.75px; line-height:1.6}
.bridge-inner a{color:#FFFFFF; font-weight:700; text-decoration:underline}
.bridge-inner a:hover{color:var(--p-purple)}
.seriesnav{max-width:600px; margin:0 auto; padding:8px 32px 40px}
.seriesnav h3{font-size:20px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mid); margin-bottom:12px}
.seriesnav .navlist{display:flex; flex-direction:column; gap:8px}
.navitem{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 18px; text-decoration:none; color:var(--ink); font-size:21.25px}
.navitem:hover{border-color:var(--blue); color:var(--ink)}
.navitem .chip{flex:none; font-weight:700; font-size:15px; letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:3px 10px}
.navitem.here{border-color:var(--green); background:var(--card-tint)}
.navitem.here .chip{background:var(--chip-on-tint)}
.chip.c0{background:var(--card-tint); color:var(--green)}
.chip.c1{background:var(--chip-blue-bg); color:var(--chip-blue-ink)}
.chip.c2{background:var(--chip-green-bg); color:var(--chip-green-ink)}
.chip.c3{background:var(--chip-yellow-bg); color:var(--chip-yellow-ink)}
.chip.c4{background:var(--p-purple); color:var(--purple)}
.chip.c5{background:var(--chip-pink-bg); color:var(--chip-pink-ink)}
.footer{text-align:center; padding:28px 32px 56px; color:var(--mid); font-size:20px}
.footer .brand{font-weight:700; color:var(--orange); letter-spacing:.12em; text-transform:uppercase; font-size:16.25px; margin-bottom:8px}

/* ── Hero variants ──
   Base .hero above is the full-height "start of module" hero. Lesson pages
   (not the intro) use the compact variant: no forced viewport height, tighter
   padding, and a small coloured chip identifying the lesson. */
.hero.compact{ min-height:0; justify-content:flex-start; padding:56px 32px 44px; }
.hero-chip{
  font-weight:700; font-size:16.25px; letter-spacing:.06em; text-transform:uppercase;
  border-radius:999px; padding:4px 14px; margin-bottom:14px;
}
/* Colour comes from pairing with a .chip cN class, e.g. class="hero-chip chip c1" */

/* ── Nav "here" highlight, per lesson colour ──
   The plain .navitem.here rule above is the default (green/Start). Lesson
   pages add a cN class to match their own accent, e.g. class="navitem here c1" */
.navitem.here.c0{border-color:var(--green); background:var(--card-tint)}
.navitem.here.c1{border-color:var(--blue); background:var(--p-blue)}
.navitem.here.c2{border-color:var(--green); background:var(--p-green)}
.navitem.here.c3{border-color:var(--orange); background:var(--p-yellow)}
.navitem.here.c4{border-color:var(--purple); background:var(--p-purple)}
.navitem.here.c5{border-color:var(--pink); background:var(--p-pink)}

/* ── Callout box: titled yellow callout used mid-lesson ──
   Different from .callout-inner above (a plain wrapped strip with no title)
   — this one always has an h3 heading followed by one or more paragraphs. */
.calloutbox-wrap{padding:20px 32px 36px}
.calloutbox{
  background:var(--chip-yellow-bg); border:1px solid var(--edge-yellow); border-radius:14px; padding:26px 30px;
  max-width:600px; margin:0 auto;
}
.calloutbox h3{font-size:27.5px; font-weight:700; margin-bottom:12px}
.calloutbox p{font-size:23.75px; line-height:1.65; color:var(--mid)}
.calloutbox p + p{margin-top:14px}
/* The 988 / Talk Suicide callout on DOORS-the-object. Its fill and border
   were both pinned literals inline, so the fill flipped with the theme and
   the border did not — 2.90:1 in dark, on the one box that most needs to
   look urgent. Named so both halves move together. */
.calloutbox-urgent{background:var(--p-pink); border-color:var(--pink)}

/* ── Quiz: plain multiple-choice cards ──
   Different from the .tcard/.tbtn true-false demo cards above — this is an
   open-ended list of qcard/opt buttons, any number of options per question. */
.quiz{display:flex; flex-direction:column; gap:14px}
.qcard{
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px 26px;
  box-shadow:0 2px 8px var(--shadow);
}
.qcard .qtext{font-weight:700; font-size:23.75px; line-height:1.45; margin-bottom:14px}
.opts{display:flex; flex-direction:column; gap:8px}
.opt{
  font-family:inherit; font-size:21.25px; text-align:left; padding:12px 16px; border-radius:12px;
  border:2px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; line-height:1.4;
}
.opt:hover{border-color:var(--green)}
.opt:focus-visible{outline:3px solid var(--blue); outline-offset:2px}
.opt.right{border-color:var(--green); background:var(--p-green)}
.opt.wrong{border-color:var(--pink); background:var(--p-pink)}
.opt:disabled{cursor:default}
.qresult{margin-top:12px; font-size:21.25px; line-height:1.55; color:var(--mid); min-height:1.5em}

/* ── Dark mode: text on brand fills ── */
[data-theme="dark"] .bridge-inner { color: var(--on-brand-ink); }
[data-theme="dark"] .bridge-inner a { color: var(--on-brand-ink); }
[data-theme="dark"] .bridge-inner a:hover { color: var(--on-brand-ink-hover); }

/* ── Lesson card icons ──
   These sit on a plain card, not a brand fill, so they take the STRONG
   brand colour rather than the pale companion. The SVGs use
   stroke="currentColor" so the colour lives here and follows the theme.
   Distinct from .card-icon in site.css, which has the opposite need. */
.card .icon svg { color: var(--ink); }
.card .icon.icon-green  svg { color: var(--green); }
.card .icon.icon-orange svg { color: var(--orange); }
.card .icon.icon-purple svg { color: var(--purple); }
.card .icon.icon-blue   svg { color: var(--blue); }
.card .icon.icon-pink   svg { color: var(--pink); }

/* ── The "here" pill, per lesson colour ──
   .navitem.here .chip paints every pill --chip-on-tint, which was tuned
   against --card-tint. .navitem.here.cN then repaints the ROW in the
   lesson's own colour, and the pill does not follow: in dark it landed
   between 1.020:1 and 1.186:1 against its row, so on three of the five the
   pill simply stopped being a pill.

   Dark-only, and additions only. The light rule above is untouched and
   still paints all six rows, because one white pill separates from every
   pale companion light mode has. */
[data-theme="dark"] .navitem.here.c1 .chip { background: var(--chip-on-blue); }
[data-theme="dark"] .navitem.here.c2 .chip { background: var(--chip-on-green); }
[data-theme="dark"] .navitem.here.c3 .chip { background: var(--chip-on-yellow); }
[data-theme="dark"] .navitem.here.c4 .chip { background: var(--chip-on-purple); }
[data-theme="dark"] .navitem.here.c5 .chip { background: var(--chip-on-pink); }