/* ═══════════════════════════════════════════════════════════
   PyPath site theme — matches the landing trail aesthetic
   Loads after style.css + pypath-fast.css on every page.
   Keep it clean: shared tokens, chrome, and page polish only.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* One sky-blue family: deep ink + bright line accents */
  --pp-ink: #0c4566;
  --pp-ink-soft: #165a7a;
  --pp-fog: #e8f4fb;
  --pp-mist: #f3f9fc;
  --pp-paper: #f7fbfe;
  --pp-line: #0ea5e9;
  --pp-line-deep: #0284c7;
  --pp-mark: #0ea5e9;
  --pp-muted: #4a7390;
  --pp-border: #d0e4ef;
  --pp-display: "Syne", ui-sans-serif, system-ui, sans-serif;
  --pp-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  /* Remap legacy tokens so the whole site picks up the trail palette */
  --bg: var(--pp-paper);
  --bg-elevated: var(--pp-fog);
  --panel: #ffffff;
  --text: var(--pp-ink-soft);
  --text-strong: var(--pp-ink);
  --muted: var(--pp-muted);
  --border: var(--pp-border);
  --primary: var(--pp-line);
  --primary-strong: var(--pp-line-deep);
  --accent: var(--pp-line);
  --accent-alt: var(--pp-line-deep);
  --shadow: 0 4px 20px rgba(12, 69, 102, 0.07);
  --shadow-strong: 0 12px 36px rgba(12, 69, 102, 0.12);
  --warm: #7dd3fc;
  --warm-soft: #bae6fd;
}

[data-theme="dark"] {
  --pp-ink: #e8f4fb;
  --pp-ink-soft: #b7d4e4;
  --pp-fog: #101820;
  --pp-mist: #0c131a;
  --pp-paper: #0e161d;
  --pp-line: #38bdf8;
  --pp-line-deep: #7dd3fc;
  --pp-mark: #7dd3fc;
  --pp-muted: #89a8ba;
  --pp-border: #2a3c48;

  --bg: var(--pp-paper);
  --bg-elevated: #152028;
  --panel: #152028;
  --text: var(--pp-ink-soft);
  --text-strong: var(--pp-ink);
  --muted: var(--pp-muted);
  --border: var(--pp-border);
  --primary: var(--pp-line);
  --primary-strong: #7dd3fc;
  --accent: var(--pp-line);
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
  --shadow-strong: 0 12px 36px rgba(0, 0, 0, 0.36);
}

/* ── Type ───────────────────────────────────────────────── */
body {
  font-family: var(--pp-body);
  background: var(--pp-paper);
  color: var(--pp-ink-soft);
}

h1, h2, h3, h4, h5, h6,
.headline, .page-title,
.brand-text, .founder-showcase-name,
.section-head h2, .feature h3,
.about-mission-headline, .team-card-name,
.unit-card h3, .cofounder-name {
  font-family: var(--pp-display);
  color: var(--pp-ink);
  letter-spacing: -0.03em;
}

/* Kill gradient text everywhere — solid ink only */
.gradient-text,
.lesson-content h2,
.lesson-content h2.gradient-text,
.content-section h2,
.cofounder-name {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  color: var(--pp-ink) !important;
}

.lesson-content h2 {
  font-family: var(--pp-display);
  letter-spacing: -0.03em;
}

/* Soft page atmosphere (subtle, not noisy) */
body.page:not(.page-home)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 55% at 85% -10%, color-mix(in srgb, var(--pp-line) 14%, transparent), transparent 55%),
    radial-gradient(70% 45% at 0% 100%, color-mix(in srgb, var(--pp-mark) 10%, transparent), transparent 50%);
  opacity: 0.9;
}

/* Keep chrome above the atmosphere — never override .site-header fixed positioning */
body.page:not(.page-home) > main,
body.page:not(.page-home) > .site-footer {
  position: relative;
  z-index: 1;
}

/* ── Header / top bar ───────────────────────────────────── */
:root {
  --header-accent: 0px;
  --header-bar: 72px;
  --header-progress: 0px;
  /* Match measured fixed header (bar + chrome) so content sits flush beneath it */
  --header-height: 76px;
  --inspire-banner-h: 0px;
}

/* Attribution banner — slides in above the fixed header.
   Use fixed deep blues (not theme --pp-line tokens): in dark mode those
   tokens become pale sky cyan and white/light text disappears into them. */
.inspire-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-topbar);
  height: 2.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2.75rem;
  background: linear-gradient(90deg, #075985 0%, #0369a1 55%, #0284c7 100%);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(3, 40, 70, 0.28);
  transform: translateY(-110%);
  transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.inspire-banner.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}

.inspire-banner.is-hiding {
  transform: translateY(-110%);
  pointer-events: none;
}

.inspire-banner__text {
  margin: 0;
  font-family: var(--pp-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(3, 40, 70, 0.35);
}

.inspire-banner__link {
  color: #ffffff !important; /* beat global `a { color: var(--primary) }` */
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(255, 255, 255, 0.7);
  transition: text-decoration-color 160ms ease, opacity 160ms ease;
}

.inspire-banner__link:hover {
  color: #ffffff !important;
  text-decoration-color: #ffffff;
  opacity: 0.95;
}

.inspire-banner__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 2px;
}

.inspire-banner__close {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, #fff 18%, transparent);
  color: #ffffff;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}

.inspire-banner__close:hover {
  background: color-mix(in srgb, #fff 24%, transparent);
}

.inspire-banner__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.inspire-banner__close svg {
  width: 14px;
  height: 14px;
}

body.has-inspire-banner {
  --inspire-banner-h: 2.625rem;
  --header-height: calc(76px + var(--inspire-banner-h));
}

body.has-inspire-banner .site-header {
  top: var(--inspire-banner-h) !important;
  transition: top 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}

html.reduced-motion .inspire-banner,
html.reduced-motion body.has-inspire-banner .site-header {
  transition: none;
}

@media (max-width: 520px) {
  .inspire-banner {
    padding: 0 2.5rem;
  }

  .inspire-banner__text {
    font-size: 0.84rem;
  }
}

/* Document scrollport so sticky sidebars track correctly on every page */
html {
  height: auto !important;
  overflow-x: clip;
  overflow-y: scroll !important;
}

body.page {
  height: auto !important;
  min-height: 100%;
  overflow-x: clip;
  overflow-y: visible !important;
  padding-top: var(--header-height) !important;
}

.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: var(--z-header) !important;
  background: color-mix(in srgb, var(--pp-mist) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid color-mix(in srgb, var(--pp-ink) 8%, transparent);
  box-shadow: none;
}

.header-inner {
  min-height: var(--header-bar);
  padding-top: 10px;
  padding-bottom: 10px;
}

.site-header.is-scrolled {
  background: color-mix(in srgb, var(--pp-mist) 94%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--pp-ink) 6%, transparent);
}

[data-theme="dark"] .site-header,
[data-theme="dark"] .site-header.is-scrolled {
  background: color-mix(in srgb, var(--pp-paper) 90%, transparent);
  border-bottom-color: var(--pp-border);
}

.site-header .brand {
  font-family: var(--pp-display);
  font-weight: 750;
  font-size: 1.18rem;
  letter-spacing: -0.04em;
  color: var(--pp-ink);
  gap: 0.6rem;
}

.site-header .brand-text {
  color: var(--pp-ink);
}

.site-header .brand .logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

/* 3D logo — tilt + click spin (driven by motion.js) */
.site-header .brand.brand--motion {
  perspective: 480px;
}

.site-header .brand .logo.logo--3d {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 220ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    filter 220ms ease;
  filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--pp-ink) 12%, transparent));
}

.site-header .brand:hover .logo.logo--3d:not(.is-spinning) {
  filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--pp-line) 28%, transparent));
}

.site-header .brand .logo.logo--3d.is-spinning {
  animation: pp-logo-spin 0.9s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

@keyframes pp-logo-spin {
  0% {
    transform: perspective(420px) rotateY(0deg) translateZ(0);
  }
  45% {
    transform: perspective(420px) rotateY(200deg) translateZ(14px) scale(1.06);
  }
  100% {
    transform: perspective(420px) rotateY(360deg) translateZ(0) scale(1);
  }
}

html.reduced-motion .site-header .brand .logo.logo--3d,
html.reduced-motion .site-header .brand .logo.logo--3d.is-spinning {
  animation: none !important;
  transform: none !important;
  filter: none;
}

/* Ambient idle rotation for the header mountain mark.
   Lives on a WRAPPER, not .logo itself, so it never collides with the
   pointer-tilt / click-flip transform that motion.js writes on .logo. */
.site-header .brand .logo-spin-wrap {
  display: inline-block;
  line-height: 0; /* no extra inline-box whitespace under the icon */
  animation: pp-logo-idle-rotate 12s linear infinite;
  /* pyPathLogo.png's artwork sits ~57% down its canvas, not 50% —
     this keeps the peak spinning in place instead of visibly orbiting. */
  transform-origin: 50% 57%;
}

@keyframes pp-logo-idle-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Pause only during the click-flip so tilt + idle spin can compose on hover.
   (Hover-pause made the mark look broken — mousing over to check it froze it.) */
.site-header .brand .logo-spin-wrap:has(.is-spinning) {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .site-header .brand .logo-spin-wrap {
    animation: none;
  }
}

html.reduced-motion .site-header .brand .logo-spin-wrap {
  animation: none;
}

/* Richer scroll reveals — override the flat fast.css defaults */
.js-enabled [data-reveal] {
  opacity: 0 !important;
  transition:
    transform 520ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    opacity 480ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    filter 520ms ease !important;
  will-change: transform, opacity;
}

.js-enabled [data-reveal="up"],
.js-enabled [data-reveal=""] {
  transform: translateY(22px) !important;
  filter: blur(2px);
}

.js-enabled [data-reveal="fade"] {
  transform: none !important;
  opacity: 0 !important;
  filter: none;
}

.js-enabled [data-reveal="scale"] {
  transform: scale(0.96) translateY(10px) !important;
  filter: blur(1px);
}

.js-enabled [data-reveal="left"] {
  transform: translateX(-22px) !important;
  filter: blur(1px);
}

.js-enabled [data-reveal="right"] {
  transform: translateX(22px) !important;
  filter: blur(1px);
}

.js-enabled [data-reveal].is-visible,
.js-enabled [data-reveal].revealed {
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}

html.reduced-motion.js-enabled [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

.unit-card[data-reveal],
.team-card[data-reveal],
.content-section[data-reveal] {
  transition-duration: 560ms;
}

.nav-pill {
  background: color-mix(in srgb, var(--pp-fog) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--pp-ink) 7%, transparent);
  border-radius: 16px;
  box-shadow: none;
  padding: 5px;
}

[data-theme="dark"] .nav-pill {
  background: color-mix(in srgb, var(--pp-fog) 55%, transparent);
  border-color: var(--pp-border);
}

.nav-pill .menu {
  gap: 3px;
}

.nav-pill .menu a,
.nav-pill .dd-trigger {
  font-family: var(--pp-body);
  font-weight: 550;
  font-size: 0.92rem;
  color: var(--pp-muted);
  border-radius: 11px;
  padding: 0.55rem 0.9rem;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

.nav-pill .menu a:hover,
.nav-pill .dd-trigger:hover {
  color: var(--pp-ink);
  background: color-mix(in srgb, var(--pp-line) 10%, transparent);
}

.nav-pill .menu a.active {
  color: var(--pp-ink);
  background: #fff;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--pp-ink) 6%, transparent);
}

[data-theme="dark"] .nav-pill .menu a.active {
  background: var(--panel);
  color: var(--pp-ink);
}

.header-cta,
.btn.btn-primary.header-cta {
  border-radius: 12px !important;
  border-width: 0 !important;
  background: var(--pp-ink) !important;
  color: var(--pp-mist) !important;
  font-family: var(--pp-body);
  font-weight: 650;
  font-size: 0.92rem !important;
  padding: 11px 20px !important;
  min-height: 44px;
  box-shadow: none !important;
}

.header-cta:hover,
.btn.btn-primary.header-cta:hover {
  background: var(--pp-ink-soft) !important;
  color: var(--pp-mist) !important;
}

[data-theme="dark"] .header-cta,
[data-theme="dark"] .btn.btn-primary.header-cta {
  background: var(--pp-line) !important;
  color: #04202c !important;
}

.mobile-toggle {
  min-width: 44px;
  min-height: 44px;
}

/* ── Buttons (sitewide) ─────────────────────────────────── */
.btn {
  font-family: var(--pp-body);
  border-radius: 12px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.btn-primary {
  background: var(--pp-ink);
  border-color: var(--pp-ink);
  color: var(--pp-mist);
}

.btn-primary:hover {
  background: var(--pp-ink-soft);
  border-color: var(--pp-ink-soft);
  color: var(--pp-mist);
}

[data-theme="dark"] .btn-primary {
  background: var(--pp-line);
  border-color: var(--pp-line);
  color: #04202c;
}

.btn-ghost {
  background: transparent;
  border-color: color-mix(in srgb, var(--pp-ink) 16%, transparent);
  color: var(--pp-ink);
}

.btn-ghost:hover {
  border-color: color-mix(in srgb, var(--pp-line) 50%, transparent);
  color: var(--pp-line-deep);
}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
  background: var(--pp-mist);
  border-top: 1px solid color-mix(in srgb, var(--pp-ink) 8%, transparent);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(2rem, 4vw, 2.75rem) 0;
}

.page-about .site-footer,
.page-unit .site-footer,
.page-curriculum .site-footer,
.page-sandbox .site-footer {
  margin-top: 0;
}

/* Curriculum / learn pages — less empty vertical air */
.page-curriculum main > .section,
.page-learn main > .section,
.page-settings main > .section {
  padding-top: clamp(1.25rem, 3vh, 2rem);
  padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
}

.page-curriculum .section-head,
.page-learn .section-head {
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.site-footer .brand-text {
  font-family: var(--pp-display);
  font-weight: 700;
  color: var(--pp-ink);
}

.footer-heading {
  font-family: var(--pp-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pp-ink);
}

.footer-tagline,
.footer-links a {
  color: var(--pp-muted);
}

.footer-links a:hover {
  color: var(--pp-line-deep);
}

.site-footer .footer-grid {
  grid-template-columns: minmax(0, 1.6fr) auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  justify-content: space-between;
}

.site-footer .footer-tagline {
  max-width: 42ch;
}

/* ── Global content gutters ─────────────────────────────── */
main .container,
.section .container {
  padding-left: clamp(1.5rem, 4.5vw, 3.5rem);
  padding-right: clamp(1.5rem, 4.5vw, 3.5rem);
}

/*
  Footer was stuck in the narrow .container box (min 1120px + heavy side
  padding), so the copyright / tagline sat with huge empty left/right gaps.
  Match the header: full-width container + the same side gutters.
*/
.site-footer .container {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0;
  margin-right: 0;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

@media (min-width: 1400px) {
  main .container,
  .section .container {
    padding-left: clamp(2rem, 5vw, 4rem);
    padding-right: clamp(2rem, 5vw, 4rem);
  }

  .site-footer .container {
    padding-left: 36px;
    padding-right: 36px;
  }
}

@media (min-width: 1600px) {
  main .container,
  .section .container {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

@media (max-width: 720px) {
  .site-footer .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* ── Curriculum / unit cards ────────────────────────────── */
.page-curriculum .section,
.page-curriculum main > .section {
  background: transparent;
}

.page-title,
.section-head h1,
.section-head h2 {
  font-family: var(--pp-display);
}

.unit-card {
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--pp-ink) 8%, transparent);
  background: color-mix(in srgb, var(--panel) 88%, var(--pp-fog));
  box-shadow: none;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.unit-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--pp-line) 40%, transparent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--pp-ink) 7%, transparent);
}

.unit-ribbon {
  background: color-mix(in srgb, var(--pp-line) 16%, transparent);
  color: var(--pp-line-deep);
  font-family: var(--pp-display);
  font-weight: 750;
  border-radius: 10px;
}

.unit-card h3 {
  letter-spacing: -0.03em;
}

.unit-card .pill {
  border-radius: 8px;
  background: color-mix(in srgb, var(--pp-fog) 80%, transparent);
  border: 0;
  color: var(--pp-muted);
}

[data-theme="dark"] .unit-card {
  background: var(--panel);
}

/* ── Lesson / course layout ─────────────────────────────── */
.page-unit {
  background: var(--pp-paper);
}

.page-unit main > .section {
  padding: 0.75rem 0 2.5rem !important;
}

.page-unit .layout-course {
  display: grid !important;
  grid-template-columns: 248px minmax(0, 1fr) !important;
  gap: 1.1rem !important;
  align-items: start;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  /* Match site-wide container gutters; equal left/right breathing room */
  padding: 0 clamp(1.5rem, 4.5vw, 3.5rem) 1.5rem !important;
}

.page-unit .course-sidebar {
  position: sticky !important;
  top: calc(var(--header-height) + 10px) !important;
  align-self: start;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 12px 10px 14px;
  background: color-mix(in srgb, var(--panel) 92%, var(--pp-fog));
  border: 1px solid color-mix(in srgb, var(--pp-ink) 9%, transparent);
  border-radius: 14px;
  box-shadow: none;
  max-height: calc(100vh - var(--header-height) - 20px) !important;
  overflow-y: auto;
  overflow-x: hidden;
}

[data-theme="dark"] .page-unit .course-sidebar {
  background: var(--panel);
  border-color: var(--pp-border);
}

@media (min-width: 981px) {
  body.sidebar-closed .page-unit .layout-course {
    grid-template-columns: 0 minmax(0, 1fr) !important;
    gap: 0 !important;
    padding-left: clamp(1.5rem, 4.5vw, 3.5rem) !important;
  }

  body.sidebar-closed .page-unit .course-sidebar {
    margin: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
}

.page-unit .course-sidebar .sidebar-title,
.page-unit .course-sidebar h2,
.page-unit .course-sidebar h3,
.page-unit .course-sidebar .unit-label,
.page-unit .sidebar-unit-label {
  font-family: var(--pp-body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pp-muted);
}

.page-unit .course-sidebar a {
  border-radius: 10px;
  font-family: var(--pp-body);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.35;
  padding: 0.55rem 0.7rem;
}

.page-unit .course-sidebar a.active,
.page-unit .course-sidebar a[aria-current="page"] {
  background: color-mix(in srgb, var(--pp-line) 14%, transparent);
  color: var(--pp-line-deep);
  font-weight: 650;
}

.page-unit .course-main {
  background: transparent;
  min-width: 0;
  width: 100%;
  padding: 0;
  max-width: none;
}

.page-unit .course-main .lesson-content,
.page-unit .course-main .lesson-overview,
.page-unit .course-main .content-section,
.page-unit .course-main .interactive-editor,
.page-unit .course-main .editor-container {
  width: 100%;
  max-width: none;
}

.page-unit .course-main .CodeMirror,
.page-unit .course-main .cm-s-pypath.CodeMirror {
  width: 100% !important;
}

/* Readable lesson type — body font, not display Syne */
.page-unit .lesson-title,
.page-unit .lesson-content h2,
.page-unit .lesson-content h3,
.page-unit .lesson-overview h2,
.page-unit .gradient-text,
.page-unit .content-section h2,
.page-unit .content-section h3,
.page-unit .info-card h4 {
  font-family: var(--pp-body) !important;
  letter-spacing: -0.02em;
  color: var(--pp-ink) !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
}

.page-unit .lesson-title {
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0.35rem 0 1rem;
  max-width: 38em;
}

.page-unit .lesson-content h2,
.page-unit .content-section h2,
.page-unit .lesson-overview h2 {
  font-size: clamp(1.08rem, 1.4vw, 1.22rem);
  font-weight: 650;
  line-height: 1.35;
  margin: 0 0 0.7rem;
  letter-spacing: -0.01em;
}

/* Keep breadcrumbs clear of the floating Lessons chip */
@media (min-width: 981px) {
  body.sidebar-closed .page-unit .course-main > nav[aria-label="Breadcrumb"],
  body.sidebar-closed .page-unit .course-main > .sidebar-toggle {
    padding-left: 7.25rem;
  }
}

.page-unit .lesson-content h3,
.page-unit .content-section h3 {
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.35;
  margin: 1.35rem 0 0.55rem;
  color: var(--pp-ink-soft) !important;
}

.page-unit .lesson-content p,
.page-unit .content-section p,
.page-unit .lesson-overview p {
  font-family: var(--pp-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--pp-ink-soft);
  max-width: 62ch;
}

.page-unit .eyebrow {
  font-family: var(--pp-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pp-muted);
}

.page-unit .lesson-overview,
.page-unit .info-card,
.page-unit .feature-card,
.page-unit .content-section,
.page-unit .exercise-section,
.page-unit .exercise-item,
.page-unit .interactive-editor {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--pp-ink) 8%, transparent);
  background: color-mix(in srgb, var(--panel) 94%, var(--pp-fog));
  box-shadow: none;
  color: var(--pp-ink-soft);
}

[data-theme="dark"] .page-unit .lesson-overview,
[data-theme="dark"] .page-unit .info-card,
[data-theme="dark"] .page-unit .feature-card,
[data-theme="dark"] .page-unit .content-section,
[data-theme="dark"] .page-unit .exercise-section,
[data-theme="dark"] .page-unit .exercise-item,
[data-theme="dark"] .page-unit .interactive-editor {
  background: var(--panel);
  border-color: var(--pp-border);
  color: var(--pp-ink-soft);
}

[data-theme="dark"] .page-unit .lesson-title,
[data-theme="dark"] .page-unit .lesson-content h2,
[data-theme="dark"] .page-unit .lesson-content h3,
[data-theme="dark"] .page-unit .lesson-overview h2,
[data-theme="dark"] .page-unit .content-section h2,
[data-theme="dark"] .page-unit .content-section h3,
[data-theme="dark"] .page-unit .info-card h4,
[data-theme="dark"] .page-unit .gradient-text {
  color: var(--pp-ink) !important;
}

[data-theme="dark"] .page-unit .lesson-content p,
[data-theme="dark"] .page-unit .content-section p,
[data-theme="dark"] .page-unit .lesson-overview p,
[data-theme="dark"] .page-unit .info-card p {
  color: var(--pp-ink-soft);
}

[data-theme="dark"] .page-unit .lesson-overview .pill,
[data-theme="dark"] .page-unit .pill {
  background: color-mix(in srgb, var(--pp-line) 18%, transparent);
  color: var(--pp-line);
}

.page-unit .content-section {
  padding: 1.25rem 1.35rem 1.4rem;
  margin-bottom: 1rem;
}

.page-unit .lesson-overview {
  padding: 1.15rem 1.25rem 1.25rem;
  margin-bottom: 1.25rem;
}

.page-unit .lesson-nav .btn,
.page-unit .lesson-actions .btn {
  border-radius: 12px;
}

.page-unit .btn-run,
.page-unit .btn-check {
  border-radius: 10px;
  font-family: var(--pp-body);
}

/* Reopen control floats over the lesson, but under the header: an open nav
   or account popup has to stay on top of it. */
.sidebar-reopen-btn {
  position: fixed !important;
  left: max(12px, env(safe-area-inset-left)) !important;
  top: calc(var(--header-height) + 12px) !important;
  z-index: var(--z-floating) !important;
}

@media (max-width: 980px) {
  .page-unit .layout-course {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    width: 100% !important;
    padding: 0 1rem 1.5rem !important;
  }

  .page-unit .course-sidebar {
    position: fixed !important;
    top: calc(var(--header-height) + 8px) !important;
    left: 12px;
    right: 12px;
    z-index: var(--z-sticky);
    max-height: min(70vh, 520px) !important;
    width: auto !important;
  }

  .page-unit .course-main {
    max-width: none;
  }
}

/* Code panels: keep readable, soft shell */
.page-unit .CodeMirror,
.cm-s-pypath.CodeMirror {
  border-radius: 12px;
}

/* ── About (restore mission + founder layout; fill width) ─ */
.page-about .about-page {
  background:
    radial-gradient(ellipse 90% 60% at 50% -20%, color-mix(in srgb, var(--pp-line) 12%, transparent), transparent),
    var(--pp-paper);
  padding: clamp(1.75rem, 4vh, 2.75rem) clamp(1.5rem, 4.5vw, 3.5rem) clamp(2rem, 5vh, 3.25rem);
}

.page-about .about-page-inner {
  width: min(1480px, 100%);
  margin: 0 auto;
}

.page-about .about-eyebrow {
  color: var(--pp-line-deep);
  font-family: var(--pp-body);
  font-weight: 700;
}

.page-about .about-mission {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.page-about .about-mission-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}

.page-about .about-mission-headline {
  font-family: var(--pp-display);
  letter-spacing: -0.04em;
}

.page-about .about-mission-lead {
  max-width: none;
}

/* Solo founder: use the full row instead of a narrow centered card */
.page-about .about-team-row {
  grid-template-columns: 1fr;
  justify-content: stretch;
}

.page-about .about-team-row .team-card {
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: clamp(1.25rem, 3vw, 2rem);
  padding: clamp(1.35rem, 2.5vw, 1.85rem) clamp(1.35rem, 2.5vw, 2rem);
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--pp-ink) 8%, transparent);
  background: color-mix(in srgb, var(--panel) 90%, var(--pp-fog));
  box-shadow: none;
}

.page-about .team-card:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--pp-line) 35%, transparent);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--pp-ink) 7%, transparent);
}

.page-about .team-card-photo {
  margin: 0;
  flex-shrink: 0;
}

.page-about .team-card-photo img {
  border: 3px solid color-mix(in srgb, var(--pp-line) 35%, transparent);
}

.page-about .team-card-body {
  align-items: flex-start;
}

.page-about .team-card-name {
  font-family: var(--pp-display);
}

.page-about .team-card-role {
  color: var(--pp-line-deep);
}

.page-about .team-card-bio {
  max-width: 62ch;
}

.page-about .about-contact {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.page-about .about-contact-title {
  font-family: var(--pp-display);
}

.page-about .about-contact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 2rem;
  grid-template-columns: none;
}

.page-about .about-contact-list li {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
}

.page-about .about-contact-list a {
  font-weight: 600;
}

@media (max-width: 960px) {
  .page-about .about-mission-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .page-about .about-team-row .team-card {
    flex-direction: column;
    text-align: center;
  }

  .page-about .team-card-body {
    align-items: center;
  }

  .page-about .team-card-bio {
    max-width: none;
  }

  .page-about .about-contact-list li {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Full-bleed main content — avoid legacy fixed shells */
.page-sandbox .sandbox-shell {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* Layout wrapper only — don't clip the page heading in a card */
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* ── Sandbox / certs / settings — light polish ──────────── */
.page-sandbox main,
.page-settings main,

.page-sandbox .sandbox-page {
  padding: clamp(2rem, 4.5vh, 3rem) clamp(1.5rem, 4.5vw, 3.5rem) clamp(2.5rem, 5vh, 3.5rem) !important;
  overflow: visible !important;
}

.page-sandbox .sandbox-head,
.page-sandbox .sandbox-head[data-reveal] {
  overflow: visible !important;
  padding-top: 0.35rem;
}

.page-sandbox .sandbox-eyebrow {
  display: inline-block;
  line-height: 1.7 !important;
  letter-spacing: 0.08em;
  padding-top: 0.4em;
  padding-bottom: 0.2em;
  overflow: visible !important;
}

.page-sandbox .sandbox-title {
  line-height: 1.3 !important;
  letter-spacing: -0.02em;
  padding-top: 0.2em;
  overflow: visible !important;
}

.page-settings .settings-card,
.cert-card {
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--pp-ink) 8%, transparent);
  background: color-mix(in srgb, var(--panel) 90%, var(--pp-fog));
  box-shadow: none;
}

[data-theme="dark"] .page-settings .settings-card,
[data-theme="dark"] .cert-card,
[data-theme="dark"] .page-about .team-card {
  background: var(--panel);
}

/* Dropdown panels */
.dd-panel {
  border-radius: 14px;
  border-color: color-mix(in srgb, var(--pp-ink) 10%, transparent);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--pp-ink) 10%, transparent);
}

.dd-item__num {
  background: color-mix(in srgb, var(--pp-line) 14%, transparent);
  color: var(--pp-line-deep);
  font-family: var(--pp-display);
  font-weight: 700;
  border-radius: 8px;
}

.dd-item:hover {
  background: color-mix(in srgb, var(--pp-line) 8%, transparent);
}

/* 404 */
.page-404 h1 {
  font-family: var(--pp-display);
}

/* ═══════════════════════════════════════════════════════════════
   Boot intro + entrance choreography + Pyodide boot console
   (branch claude/boot-and-motion — all effects transform/opacity
   only, gated on prefers-reduced-motion)
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

  /* ── First-visit terminal boot overlay (homepage only) ────────
     html.pp-boot is set pre-paint by the inline gate script; the
     body::before cover guarantees zero flash of page content
     before motion.js injects the overlay. Terminal always uses the
     dark palette values — a terminal is dark in either site theme. */
  html.pp-boot body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: #0c131a;
    z-index: 9998;
  }

  .pp-boot-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0c131a;
    transition: transform 280ms cubic-bezier(0.55, 0, 0.3, 1), opacity 280ms ease;
  }

  .pp-boot-overlay.pp-boot-exit {
    transform: translateY(-100%);
    opacity: 0.6;
  }

  .pp-boot-term {
    margin: 0;
    min-width: min(420px, 86vw);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(0.85rem, 1.6vw, 1rem);
    line-height: 1.9;
    color: #b7d4e4;
    white-space: pre-wrap;
  }

  .pp-boot-term .pp-boot-prompt { color: #89a8ba; }
  .pp-boot-term .pp-boot-cmd { color: #e8f4fb; }
  .pp-boot-term .pp-boot-ok { color: #38bdf8; }

  .pp-boot-caret {
    display: inline-block;
    width: 0.6em;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: #38bdf8;
    animation: pp-caret-blink 820ms steps(1) infinite;
  }

  /* ── Entrance choreography (homepage) ─────────────────────────
     Hidden only while html.pp-wait is set (inline script, motion
     allowed); html.pp-go starts the sequence. Both classes gone
     (JS off) → everything renders statically. Total ≤ 900ms.
     Deliberately does NOT touch .brand/.logo (logo tilt/flip owns
     those) or the .path-journey trail section. */
  html.pp-wait body.page-home .site-header,
  html.pp-wait body.page-home .home-brand,
  html.pp-wait body.page-home .home-hero__headline,
  html.pp-wait body.page-home .home-hero__lead,
  html.pp-wait body.page-home .home-hero__intro .home-cta-row .btn-path,
  html.pp-wait body.page-home .home-hero__scrollhint,
  html.pp-wait body.page-home .home-summit {
    opacity: 0;
  }

  html.pp-go body.page-home .site-header {
    animation: pp-enter-drop 360ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 0ms both;
  }
  html.pp-go body.page-home .home-brand {
    animation: pp-enter-rise 420ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 80ms both;
  }
  html.pp-go body.page-home .home-hero__headline {
    animation: pp-enter-rise 420ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 160ms both;
  }
  html.pp-go body.page-home .home-hero__lead {
    animation: pp-enter-rise 420ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 240ms both;
  }
  html.pp-go body.page-home .home-summit {
    animation: pp-enter-fade 500ms ease-out 220ms both;
  }
  html.pp-go body.page-home .home-hero__intro .home-cta-row .btn-path {
    animation: pp-enter-pop 260ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 320ms both;
  }
  html.pp-go body.page-home .home-hero__intro .home-cta-row .btn-path:nth-child(2) {
    animation-delay: 360ms;
  }
  html.pp-go body.page-home .home-hero__scrollhint {
    animation: pp-enter-fade 380ms ease-out 440ms both;
  }

  /* ── Micro-interactions (Feature 4 additions) ─────────────────
     Card hover lift already exists (.unit-card:hover); buttons get
     a gentle press state. */
  .btn-path:active,
  .btn:active,
  .hero-live-run:active {
    transform: translateY(1px) scale(0.985);
  }
}

@keyframes pp-caret-blink {
  50% { opacity: 0; }
}

@keyframes pp-enter-drop {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}

@keyframes pp-enter-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes pp-enter-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pp-enter-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* ── Pyodide boot console (all code runners) ────────────────────
   Lines are appended by pyodide-loader.js on real load events.
   Inherits each panel's background; accents use theme tokens so it
   reads correctly in light and dark panels alike. Outside the
   reduced-motion gate: the lines themselves must always render —
   only the type-in animation and caret blink are motion. */
.pp-boot-console {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  line-height: 1.8;
  white-space: pre-wrap;
}

.pp-boot-console .pp-line { display: block; }
.pp-boot-console .pp-ok { color: var(--pp-line, #0ea5e9); }
.pp-boot-console .pp-ready { color: var(--pp-line-deep, #0284c7); }
.pp-boot-console .pp-err { color: #d64545; }

.pp-boot-retry {
  margin-top: 6px;
  padding: 4px 12px;
  font: inherit;
  font-size: 0.9em;
  color: var(--pp-line-deep, #0284c7);
  background: transparent;
  border: 1px solid var(--pp-border, #d0e4ef);
  border-radius: 8px;
  cursor: pointer;
}

.pp-boot-retry:hover {
  border-color: var(--pp-line, #0ea5e9);
}

@media (prefers-reduced-motion: no-preference) {
  .pp-boot-console .pp-line {
    animation: pp-enter-fade 240ms ease-out both;
  }
  .pp-boot-console .pp-boot-caret {
    background: var(--pp-line, #0ea5e9);
  }
}

/* Reduced motion: no caret, lines appear instantly */
@media (prefers-reduced-motion: reduce) {
  .pp-boot-console .pp-boot-caret { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Cool pass — signature motion moments (owner-requested upgrade)
   Still transform/opacity only; everything gated on motion pref.
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

  /* Brand shine — a light sweep crosses "PyPath" after the entrance,
     then again every few seconds. Gradient uses the page's own ink
     and line tokens, clipped to the letterforms. */
  html.pp-go body.page-home .home-brand span {
    background: linear-gradient(
      105deg,
      var(--home-ink, var(--pp-ink)) 0%,
      var(--home-ink, var(--pp-ink)) 40%,
      var(--home-line, var(--pp-line)) 50%,
      var(--home-ink, var(--pp-ink)) 60%,
      var(--home-ink, var(--pp-ink)) 100%
    );
    background-size: 300% 100%;
    background-position: 110% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: pp-brand-shine 5.5s ease-in-out 1.3s infinite;
  }

  @keyframes pp-brand-shine {
    0% { background-position: 110% 0; }
    22% { background-position: -60% 0; }
    100% { background-position: -60% 0; }
  }

  /* Summit art — slow levitation, like the mountain is breathing.
     Lives on the inner img so it composes with the container's
     entrance fade. */
  body.page-home .home-summit__art,
  body.page-home .home-summit__canvas {
    animation: pp-float 7s ease-in-out 1.6s infinite;
  }

  @keyframes pp-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
  }

  /* Trail stops — springier arrival pop. home-path.css loads after
     this sheet, so the extra .path-map ancestor is required to win
     over its flatter path-stop-pop. Settles at the same 1.18
     steady-state scale the lit dot already uses. */
  .path-map .g-stop.is-lit .path-stop-dot {
    animation: pp-stop-spring 560ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  @keyframes pp-stop-spring {
    0% { transform: scale(0.6); }
    55% { transform: scale(1.5); }
    100% { transform: scale(1.18); }
  }

  /* Primary buttons — a light streak sweeps across on hover. */
  .btn-path--primary,
  .btn.btn-primary {
    position: relative;
    overflow: hidden;
  }

  .btn-path--primary::after,
  .btn.btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      105deg,
      transparent 38%,
      rgba(255, 255, 255, 0.32) 50%,
      transparent 62%
    );
    transform: translateX(-130%);
  }

  .btn-path--primary:hover::after,
  .btn.btn-primary:hover::after {
    animation: pp-btn-shine 650ms ease;
  }

  @keyframes pp-btn-shine {
    to { transform: translateX(130%); }
  }
}

/* ═══════════════════════════════════════════════════════════════
   Lesson layout — one shared width for cards and copy

   The lesson grid was explicitly uncapped (max-width: none), so on a
   wide monitor the cards grew to the full viewport while paragraphs
   stayed pinned at 62ch. The result was a very large, mostly empty
   card with its text crumpled into the top-left corner, and headings
   (which had no cap) visibly out of line with the paragraphs under
   them. Cap the column rather than the text, so both share a width.
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 981px) {
  .page-unit .layout-course {
    /* Fluid: the lesson uses most of the window, with a modest gutter
       rather than a narrow centred column. The ceiling only engages on
       very wide displays, so laptops are effectively full-width. */
    max-width: 2000px !important;
    margin-inline: auto !important;
    padding-inline: clamp(1.5rem, 3.5vw, 4rem) !important;
  }
}

/* Copy fills its card instead of stopping short at 62ch. The column
   width is what now sets line length. */
.page-unit .lesson-content p,
.page-unit .content-section p,
.page-unit .lesson-overview p {
  max-width: none;
}

/* End-of-course certificate call to action (final capstone lesson + progress). */
.lesson-finish {
  margin: 32px 0 8px;
  padding: 24px 26px;
  border: 1px solid var(--border, #cfe3f2);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.08), transparent);
  text-align: center;
}
.lesson-finish h2 { margin: 0 0 6px; }
.lesson-finish p { margin: 0 auto 16px; max-width: 52ch; }

/* ------------------------------------------------- end of unit: the summit
   The card at the foot of the last lesson in every unit, handing the learner
   the end of unit test instead of letting the nav skip past it.

   It used to be a wash of yellow -- rgba(250, 204, 21, 0.10) fading to nothing
   -- picked only so that two stacked cards on the capstone lesson would not
   read as one block. It solved that and nothing else: muddy against a
   sky-blue site, and flat at the one moment in a unit that has earned some
   ceremony. Two stacked cards still read as two, because this one is now a
   dark panel and the certificate card above it is not. */
.lesson-finish--test {
  position: relative;
  overflow: hidden;
  text-align: left;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  border: 0;
  border-radius: 18px;
  color: #eaf6fd;
  background:
    /* A summit ridge, low and quiet. PyPath is a path up to a summit -- the
       logo, the trail, the 3D peak on the home page all say so -- and the end
       of a unit is the one place in the course where that image is literally
       true. Kept to the lower band so it never crosses the content, and drawn
       in CSS rather than authored into ten lesson files. It is decoration:
       everything it suggests, the words already say. */
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" preserveAspectRatio="none"><path d="M0 300 L180 170 L260 215 L420 90 L520 175 L640 120 L760 220 L900 140 L1010 205 L1200 95 L1200 300 Z" fill="rgba(125,211,252,0.05)" stroke="rgba(125,211,252,0.20)" stroke-width="2"/></svg>')
      right bottom / 100% 42% no-repeat,
    radial-gradient(120% 140% at 12% 0%, rgba(56, 189, 248, 0.28), transparent 58%),
    linear-gradient(135deg, #0c4566 0%, #082f47 100%);
  background-color: #0c3d5c;
  box-shadow: 0 14px 40px rgba(9, 51, 76, 0.28);
}

/* The badge: a summit flag, which is the whole idea of the card in one shape.
   Sized to sit level with the eyebrow and title beside it. */
.lesson-finish__badge {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 50%;
  color: #0c4566;
  background: linear-gradient(140deg, #bae6fd, #7dd3fc);
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}
.lesson-finish__badge svg { width: 1.5rem; height: 1.5rem; }

.lesson-finish__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.lesson-finish--test h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  line-height: 1.15;
}

.lesson-finish--test p {
  margin: 0;
  max-width: 62ch;
  color: rgba(234, 246, 253, 0.82);
}
/* The paper, as four facts rather than one sentence of arithmetic.
   "ten multiple choice questions worth 7 points each and one free response
   problem worth 30 -- 100 points in total, score 70 or more" is a table
   somebody wrote out longhand, and it reads like one. */
.lesson-finish__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.6rem;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}

.lesson-finish__stat {
  padding: 0.7rem 0.85rem;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(186, 230, 253, 0.16);
}

.lesson-finish__stat b {
  display: block;
  font-family: var(--pp-display, inherit);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}

.lesson-finish__stat span {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: rgba(186, 230, 253, 0.78);
}

/* The one that is the actual bar to clear, marked rather than left to be
   spotted among the other three. */
.lesson-finish__stat--pass {
  background: rgba(125, 211, 252, 0.16);
  border-color: rgba(125, 211, 252, 0.42);
}

@media (max-width: 560px) {
  /* The badge gives up a little room before the title does: at 390px the
     heading is the thing that has to keep its line length. */
  .lesson-finish__head { gap: 0.8rem; }
  .lesson-finish__badge { width: 2.5rem; height: 2.5rem; }
  .lesson-finish__badge svg { width: 1.25rem; height: 1.25rem; }
}

/* The call to action, on a panel that is now darker than the button was
   designed for. The site's primary blue on deep ink is two dark surfaces
   touching; white on ink is the contrast this panel can actually carry. */
.lesson-finish--test .btn-primary {
  margin-top: 1.4rem;
  background: #fff;
  border-color: #fff;
  color: #0c4566;
}

.lesson-finish--test .btn-primary:hover {
  background: #e0f2fe;
  border-color: #e0f2fe;
  color: #0a3a55;
}

.lesson-finish__eyebrow {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #5b7c92);
}

.lesson-finish--test .lesson-finish__eyebrow { color: #7dd3fc; }

/* The score line only appears once a paper has been sat, so it carries its own
   gap rather than the 16px every other paragraph in the card gets. */
/* The score, once a paper has been sat.
   It used to be a grey sentence under a grey paragraph -- the single most
   useful thing on the card for a returning learner, styled as an aside. */
.lesson-finish--test .unit-test-status {
  display: block;
  margin: 1.35rem 0 0;
  color: rgba(234, 246, 253, 0.9);
  font-size: 0.95rem;
}

.lesson-finish--test .unit-test-status.is-pass { color: #86efac; }

.ut-score { display: block; }

.ut-score__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  max-width: 30rem;
  margin-bottom: 0.5rem;
}

.ut-score__value {
  font-family: var(--pp-display, inherit);
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
}

.ut-score__note { font-size: 0.9rem; color: rgba(186, 230, 253, 0.8); }

.ut-score__track {
  /* display:block matters. These are spans so the whole meter can live inside
     the <p> the markup already had, and an inline span ignores height --
     the track rendered as a 2px sliver until this line existed. */
  display: block;
  position: relative;
  height: 10px;
  max-width: 30rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  /* Not hidden: the pass-mark notch overhangs the track by 3px at each end on
     purpose, so it reads as a line across it rather than a gap in it. */
  overflow: visible;
}

.ut-score__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #38bdf8, #7dd3fc);
}

.ut-score__fill.is-pass { background: linear-gradient(90deg, #34d399, #86efac); }

/* The pass mark, drawn on the track. A notch rather than a colour change, so
   it survives greyscale and a printout like every other mark on this site. */
.ut-score__mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: #eaf6fd;
  border-radius: 2px;
}