/* ═══════════════════════════════════════════════════════════════
   THE GOOD HARVEST — 21st Century Design System
   Aesthetic: Organic Luxury × Modern Editorial
   Fonts: Fraunces (display) + Plus Jakarta Sans (body)
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Deep palette */
  --deep:        #0C1F17;
  --deep-mid:    #132E22;
  --forest:      #1B4332;
  --forest-mid:  #2D6A4F;
  --emerald:     #40916C;
  --sage:        #74C69D;
  --sage-pale:   #D8F3DC;
  --teal:        #2DD4BF;
  --gold:        #C9900C;
  --gold-bright: #E3C06E;
  --gold-pale:   #FFF8E1;
  --cream:       #FEFBF3;
  --warm:        #F5EFE0;
  --warm-mid:    #EDE4D0;
  --ink:         #1A1E1C;
  --ink-soft:    #3A4038;
  --muted:       #6B7B6A;
  --white:       #FFFFFF;
  --white-10:    rgba(255,255,255,0.1);
  --white-20:    rgba(255,255,255,0.2);
  --white-60:    rgba(255,255,255,0.6);
  /* Small text on the sign-in card. --white-60 sat on the 4.5 line that body
     text needs with little to spare (about 4.6 to 4.9 to 1); this measures 5.3 or
     better. Both arms: evidence/password-reset/before-arm.log and
     browser-drive.log. */
  --white-70:    rgba(255,255,255,0.7);
  --black-5:     rgba(0,0,0,0.05);
  --black-10:    rgba(0,0,0,0.1);
  --danger:      #E63946;
  --success:     #2A9D8F;

  /* Typography scale */
  --f-display:  clamp(3rem, 7vw, 5.5rem);
  --f-hero:     clamp(2.25rem, 5vw, 4rem);
  --f-h1:       clamp(1.75rem, 3.5vw, 2.75rem);
  --f-h2:       clamp(1.5rem, 3vw, 2.25rem);
  --f-h3:       clamp(1.125rem, 2vw, 1.5rem);
  --f-body:     1rem;
  --f-small:    0.875rem;
  --f-xs:       0.75rem;
  --f-xxs:      0.6875rem;
  --lh-body:    1.65;

  /* Spacing */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem;
  --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem;
  --s-32: 8rem;

  /* Radius */
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 40px; --r-full: 9999px;

  /* Shadows */
  --sh-sm: 0 1px 3px rgba(12,31,23,0.04), 0 1px 2px rgba(12,31,23,0.06);
  --sh-md: 0 4px 16px rgba(12,31,23,0.06), 0 1px 4px rgba(12,31,23,0.04);
  --sh-lg: 0 12px 40px rgba(12,31,23,0.08), 0 4px 12px rgba(12,31,23,0.04);
  --sh-xl: 0 24px 64px rgba(12,31,23,0.1), 0 8px 20px rgba(12,31,23,0.05);
  --sh-glow: 0 0 60px rgba(45,212,191,0.15);
  --sh-gold: 0 0 40px rgba(201,144,12,0.2);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 0.2s var(--ease-out);
  --t-normal: 0.4s var(--ease-out);
  --t-slow: 0.6s var(--ease-out);

  --nav-h: 72px;
  --max-w: 1240px;

  /* The width of the band a reader actually sees, and the thing every content
     container should line up with.

     `.nav__inner` is the reference: `max-width: var(--max-w)` + `padding: 0
     var(--s-6)`. Under the global `border-box`, that padding is INSIDE the
     1240px, so the header's content runs 364..1556 at 1920 — a 1192px band,
     not a 1240px one. A container that sets `max-width: var(--max-w)` with no
     padding gets the full 1240 and therefore sits 24px WIDER on each side.
     That is the whole -24/+24 defect, and it is why the two numbers must be
     subtracted rather than eyeballed.

     Why this token and not simply copying the header's `padding: 0 var(--s-6)`
     onto each container: these containers already sit inside a parent that
     carries the gutter (`.section`, `.hero`, `.footer`, `.topic-hero`,
     `.cta-section` — every one of them `... var(--s-6) ...`).
     Adding a second gutter is invisible at 1920, where `max-width` binds and
     the extra padding just eats into the band, but at 390 `max-width` does not
     bind: the padding then lands on top of the parent's, and the content moves
     from 24..366 to 48..342 while the logo above it stays at 24. Measured, not
     assumed — that is exactly where `.wrap` sits on a phone today. Capping the
     max-width instead reproduces the header's band precisely wherever the cap
     binds, and does nothing at all where it does not. */
  --band-w: calc(var(--max-w) - 2 * var(--s-6));

  /* Form fields. The height is the one .admin__input and .admin__select
     already drew on the screens that used them, which were most of the admin:
     one 20px line, 12px above and below it, and a 1.5px border top and
     bottom, 47 in all. */
  --field-h: calc(1.25rem + 2 * var(--s-3) + 3px);
  /* The placeholder grey every admin field already showed, because none
     declared one and the browser drew its own. Written down, not changed:
     4.6 to 1 on white. --muted, the nearest colour in the palette, measures
     4.49 and would fall under the 4.5 that text needs.
     design-taste-ok: the browser's own grey, kept as it was on every screen. */
  --field-placeholder: #757575;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  line-height: 1.1;
  color: var(--forest);
  font-variation-settings: "SOFT" 50, "WONK" 1;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

/* ── GRAIN TEXTURE ── */
.grain::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* ── CONTAINER ── */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s-6); }

/* ── NAVIGATION ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  transition: background 0.3s, box-shadow 0.3s;
}
.nav.scrolled {
  background: rgba(12,31,23,0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
.nav__inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s-6);
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.nav__logo {
  display: flex; align-items: center; gap: var(--s-3); text-decoration: none; z-index: 2;
}
.nav__mark {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  display: grid; place-items: center;
  box-shadow: 0 0 20px rgba(201,144,12,0.3);
}
.nav__wordmark {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: 1.125rem; color: var(--white); letter-spacing: -0.02em;
}
.nav__wordmark em { font-style: italic; color: var(--gold-bright); }

.nav__menu {
  display: none; list-style: none; gap: var(--s-1); align-items: center;
}
.nav__menu a {
  color: var(--white-60); font-size: var(--f-small); font-weight: 500;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-full);
  transition: all var(--t-fast);
}
.nav__menu a:hover { color: var(--white); background: var(--white-10); }
.nav__menu a.active { color: var(--white); background: var(--white-10); }

.nav__actions { display: none; gap: var(--s-3); align-items: center; }

.nav__burger {
  display: flex; flex-direction: column; gap: 5px;
  background: none; border: none; padding: var(--s-2); z-index: 2;
}
.nav__burger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--white); border-radius: 2px; transition: var(--t-fast);
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; background: var(--deep);
  z-index: 99; padding: calc(var(--nav-h) + var(--s-8)) var(--s-8) var(--s-8);
  display: flex; flex-direction: column; gap: var(--s-4);
  transform: translateY(-100%); transition: transform 0.5s var(--ease-out);
}
.drawer.open { transform: translateY(0); }
.drawer a {
  color: var(--white); font-size: var(--f-h3); font-weight: 600;
  padding: var(--s-4) 0; border-bottom: 1px solid var(--white-10);
}
/* .drawer a outranks .btn--gold, so the gold button drew white on gold. */
.drawer a.btn--gold { color: var(--deep); }

@media (min-width: 768px) {
  .nav__menu { display: flex; }
  .nav__actions { display: flex; }
  .nav__burger { display: none; }
}

/* ── BUTTONS ── */
/* The line-height is said here because a <button> does not inherit one: the
   browser gives it its own, and the same classes on an <a> drew a taller
   button (35.8 against 31 at --sm). The page's own value, so no <a> moves. */
.btn {
  line-height: var(--lh-body);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-weight: 600; font-size: var(--f-small); border: none; cursor: pointer;
  border-radius: var(--r-full); transition: all var(--t-fast);
  text-decoration: none; white-space: nowrap; position: relative;
}

.btn--lg { padding: 0.875rem 2rem; font-size: var(--f-body); }
.btn--md { padding: 0.625rem 1.5rem; }
.btn--sm { padding: 0.5rem 1.25rem; font-size: var(--f-xs); }

.btn--gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  color: var(--deep); font-weight: 700;
}
.btn--gold:hover {
  transform: translateY(-2px); box-shadow: var(--sh-gold);
}

.btn--glass {
  background: var(--white-10); color: var(--white);
  border: 1px solid var(--white-20);
  backdrop-filter: blur(10px);
}
.btn--glass:hover {
  background: var(--white-20); border-color: rgba(255,255,255,0.35);
  transform: translateY(-1px);
}

.btn--forest {
  background: var(--forest); color: var(--white);
}
.btn--forest:hover {
  background: var(--forest-mid); transform: translateY(-2px); box-shadow: var(--sh-lg);
}

.btn--outline {
  background: transparent; color: var(--forest);
  border: 1.5px solid var(--forest); padding: calc(0.625rem - 1.5px) calc(1.5rem - 1.5px);
}
.btn--outline:hover {
  background: var(--forest); color: var(--white);
}

/* A destructive action that sits in a row or at the foot of a dialog: a pale
   red fill rather than the solid --danger, which is a different red. No token
   holds any of these four, so they are written out. */
.btn--danger {
  background: #fef2f2; color: #b91c1c;
  border: 1.5px solid #fecaca;
}
.btn--danger:hover {
  background: #fee2e2;
}

.btn--ghost {
  background: transparent; color: var(--forest); font-weight: 600;
  padding: 0.5rem 0; border-radius: 0;
}
.btn--ghost::after {
  content: ''; position: absolute; bottom: 6px; left: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform var(--t-normal);
}
.btn--ghost:hover::after { transform: scaleX(1); transform-origin: left; }

/* Gradient border button */
.btn--glow {
  padding: 0.875rem 2rem; font-size: var(--f-body); font-weight: 700;
  color: var(--white); background: var(--forest);
  position: relative; z-index: 1;
}
.btn--glow::before {
  content: ''; position: absolute; inset: -2px;
  border-radius: inherit; z-index: -1;
  background: linear-gradient(135deg, var(--teal), var(--gold), var(--sage));
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ── HERO ── */
.hero {
  min-height: 100vh;
  min-height: 100dvh;   /* iOS counts its toolbar in vh; dvh does not */
  position: relative; overflow: hidden;
  background: var(--deep);
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + var(--s-12)) var(--s-6) var(--s-16);
}

/* Gradient mesh */
.hero__mesh {
  position: absolute; inset: 0; overflow: hidden;
}
.hero__mesh-orb {
  position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.4;
}
.hero__mesh-orb:nth-child(1) {
  width: 60vw; height: 60vw; top: -20%; right: -15%;
  background: radial-gradient(circle, var(--forest-mid), transparent 70%);
  animation: orbFloat 20s ease-in-out infinite;
}
.hero__mesh-orb:nth-child(2) {
  width: 40vw; height: 40vw; bottom: -10%; left: -10%;
  background: radial-gradient(circle, rgba(201,144,12,0.3), transparent 70%);
  animation: orbFloat 15s ease-in-out infinite reverse;
}
.hero__mesh-orb:nth-child(3) {
  width: 30vw; height: 30vw; top: 30%; left: 40%;
  background: radial-gradient(circle, rgba(45,212,191,0.15), transparent 70%);
  animation: orbFloat 18s ease-in-out infinite 3s;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(3%, -5%) scale(1.05); }
  66% { transform: translate(-2%, 3%) scale(0.95); }
}

.hero__inner {
  max-width: var(--band-w); margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1fr; gap: var(--s-12);
  position: relative; z-index: 2;
}

.hero__tag {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--white-10); border: 1px solid var(--white-20);
  backdrop-filter: blur(8px); color: var(--gold-bright);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-full);
  font-size: var(--f-xxs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  width: fit-content; margin-bottom: var(--s-8);
  animation: fadeUp 0.8s var(--ease-out) 0.1s both;
}

.hero__title {
  font-size: var(--f-display); color: var(--white);
  font-weight: 300; letter-spacing: -0.03em;
  margin-bottom: var(--s-6);
  animation: fadeUp 0.8s var(--ease-out) 0.2s both;
}
.hero__title strong {
  font-weight: 800;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold), var(--sage));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero__title em {
  font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1;
}

.hero__lead {
  font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--white-60);
  max-width: 520px; line-height: 1.8;
  animation: fadeUp 0.8s var(--ease-out) 0.35s both;
}

.hero__ctas {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  margin-top: var(--s-8);
  animation: fadeUp 0.8s var(--ease-out) 0.5s both;
}

.hero__proof {
  display: flex; gap: var(--s-10); margin-top: var(--s-12);
  padding-top: var(--s-8); border-top: 1px solid var(--white-10);
  animation: fadeUp 0.8s var(--ease-out) 0.65s both;
}
.hero__proof-n {
  font-family: 'Fraunces', serif; font-size: var(--f-h2);
  font-weight: 800; color: var(--gold-bright); line-height: 1;
}
.hero__proof-l {
  font-size: var(--f-xxs); color: var(--white-60);
  text-transform: uppercase; letter-spacing: 0.08em; margin-top: var(--s-1);
}

/* Hero visual */
.hero__visual {
  display: none;
  position: relative;
}
.hero__card-stack {
  position: relative; width: 100%; max-width: 440px; margin-left: auto;
}
.hero__card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(24px);
  border-radius: var(--r-xl); padding: var(--s-6);
  position: relative; overflow: hidden;
  transition: transform 0.5s var(--ease-out);
}
.hero__card:hover { transform: translateY(-4px); }
.hero__card + .hero__card { margin-top: calc(-1 * var(--s-12)); margin-left: var(--s-8); }
.hero__card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--teal), var(--sage));
}
.hero__card-label {
  font-size: var(--f-xxs); color: var(--gold-bright); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--s-3);
}
.hero__card-title {
  font-size: var(--f-h3); color: var(--white); font-weight: 700; margin-bottom: var(--s-2);
}
.hero__card-desc {
  font-size: var(--f-small); color: var(--white-60); line-height: 1.6;
}
.hero__card-meta {
  display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4);
  padding-top: var(--s-4); border-top: 1px solid var(--white-10);
}
.hero__card-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sage), var(--teal));
  display: grid; place-items: center;
  font-size: var(--f-xxs); font-weight: 800; color: var(--deep);
}
.hero__card-by { font-size: var(--f-xs); color: var(--white-60); }
.hero__card-price {
  margin-left: auto; font-family: 'Fraunces', serif;
  font-weight: 800; color: var(--gold-bright); font-size: var(--f-body);
}

@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
  .hero__visual { display: block; }
  .hero { padding-top: 0; padding-bottom: 0; }
}

/* ── REVEAL ANIMATION ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0; transform: translateY(32px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"] { transition-delay: 0.4s; }

/* ── SECTION SCAFFOLDING ── */
.section { padding: var(--s-20) var(--s-6); }
.section--dark { background: var(--deep); }
.section--warm { background: var(--warm); }
.section--white { background: var(--white); }

.section__eyebrow {
  font-size: var(--f-xxs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--gold); margin-bottom: var(--s-4);
}
.section__heading {
  font-size: var(--f-h1); margin-bottom: var(--s-4);
  letter-spacing: -0.02em;
}
.section__sub {
  font-size: var(--f-body); color: var(--muted); max-width: 560px; line-height: 1.75;
}
.section__header { margin-bottom: var(--s-12); }
.section__header--center { text-align: center; }
.section__header--center .section__sub { margin: 0 auto; }

/* ── COURSE CARDS ── */
.courses { max-width: var(--band-w); margin: 0 auto; }
.courses__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-6);
}
.c-card {
  background: var(--white); border-radius: var(--r-xl);
  border: 1px solid var(--black-5); overflow: hidden;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
  display: flex; flex-direction: column;
}
.c-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--sh-xl);
}
.c-card__cover {
  position: relative; height: 200px; overflow: hidden;
}
.c-card__cover-bg {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
.c-card__cover-bg svg { opacity: 0.15; }
.c-card__cover::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60%;
  background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
}
.c-card__tag {
  position: absolute; top: var(--s-4); left: var(--s-4); z-index: 2;
  font-size: var(--f-xxs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--white);
  background: var(--white-20); backdrop-filter: blur(8px);
  padding: var(--s-1) var(--s-3); border-radius: var(--r-full);
  border: 1px solid var(--white-20);
}
.c-card__price-badge {
  position: absolute; top: var(--s-4); right: var(--s-4); z-index: 2;
  font-family: 'Fraunces', serif; font-weight: 800;
  font-size: var(--f-small); color: var(--deep);
  background: var(--gold-bright); padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full);
}
.c-card__price-badge--free {
  background: var(--sage-pale); color: var(--forest);
}
.c-card__body {
  padding: var(--s-6); flex: 1; display: flex; flex-direction: column;
}
.c-card__maker {
  display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3);
}
.c-card__maker-av {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sage), var(--emerald));
  display: grid; place-items: center;
  font-size: var(--f-xxs); font-weight: 800; color: var(--white);
  border: 2px solid var(--cream);
}
.c-card__maker-name { font-size: var(--f-xs); color: var(--muted); font-weight: 600; }
.c-card__title {
  font-size: var(--f-h3); margin-bottom: var(--s-2);
  letter-spacing: -0.01em; line-height: 1.25;
}
.c-card__desc {
  font-size: var(--f-small); color: var(--muted); line-height: 1.65;
  flex: 1; margin-bottom: var(--s-5);
}
.c-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--s-4); border-top: 1px solid var(--black-5);
}
.c-card__lessons {
  font-size: var(--f-xs); color: var(--muted); font-weight: 600;
  display: flex; align-items: center; gap: var(--s-1);
}

@media (min-width: 640px) {
  .courses__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .courses__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── RESOURCE CARDS ── */
.resources { max-width: var(--band-w); margin: 0 auto; }
.resources__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-4);
}
.r-card {
  background: var(--white); border: 1px solid var(--black-5);
  border-radius: var(--r-lg); padding: var(--s-5) var(--s-6);
  display: flex; align-items: center; gap: var(--s-5);
  transition: all 0.3s var(--ease-out);
}
.r-card:hover {
  border-color: var(--gold); box-shadow: var(--sh-md);
  transform: translateX(4px);
}
.r-card__icon {
  width: 52px; height: 52px; border-radius: var(--r-md);
  display: grid; place-items: center; flex-shrink: 0;
}
.r-card__icon--pdf { background: #FEE2E2; }
.r-card__icon--doc { background: #DBEAFE; }
.r-card__icon--ppt { background: #FEF3C7; }
.r-card__info { flex: 1; min-width: 0; }
.r-card__name {
  font-weight: 700; font-size: var(--f-small); color: var(--ink);
  margin-bottom: 2px;
}
.r-card__meta { font-size: var(--f-xs); color: var(--muted); }
.r-card__end {
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-1); flex-shrink: 0;
}
.r-card__price {
  font-family: 'Fraunces', serif; font-weight: 800;
  font-size: var(--f-body); color: var(--gold);
}
.r-card__price--free { color: var(--success); }

@media (min-width: 768px) {
  .resources__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .resources__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── STEPS / HOW IT WORKS ── */
.steps { max-width: 900px; margin: 0 auto; }
.steps__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-8);
  position: relative;
}
.step {
  display: flex; gap: var(--s-6); align-items: flex-start;
}
.step__marker {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: 'Fraunces', serif; font-weight: 800; font-size: var(--f-h3);
  background: var(--cream); border: 2px solid var(--gold);
  color: var(--gold); position: relative; z-index: 2;
}
.step__content h3 {
  font-size: var(--f-h3); margin-bottom: var(--s-2);
}
.step__content p {
  font-size: var(--f-small); color: var(--muted); line-height: 1.7;
}

@media (min-width: 768px) {
  .steps__grid {
    grid-template-columns: repeat(3, 1fr); gap: var(--s-10); text-align: center;
  }
  .step { flex-direction: column; align-items: center; }
}

/* ── TESTIMONIALS (Dark section) ── */
.testimonials { max-width: var(--band-w); margin: 0 auto; }
.t-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-6);
}
.t-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-xl); padding: var(--s-8);
  position: relative;
  transition: border-color 0.3s, transform 0.3s var(--ease-out);
}
.t-card:hover {
  border-color: rgba(201,144,12,0.3); transform: translateY(-4px);
}
.t-card__quote-mark {
  font-family: 'Fraunces', serif; font-size: 4rem; line-height: 1;
  color: var(--gold); opacity: 0.4; margin-bottom: var(--s-2);
}
.t-card__text {
  font-size: var(--f-body); color: rgba(255,255,255,0.8);
  line-height: 1.75; margin-bottom: var(--s-6); font-style: italic;
}
.t-card__author { font-weight: 700; color: var(--gold-bright); font-size: var(--f-small); }
.t-card__role { font-size: var(--f-xs); color: var(--white-60); margin-top: 2px; }

@media (min-width: 768px) {
  .t-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── CTA BANNER ── */
.cta-section { padding: var(--s-20) var(--s-6); }
.cta-box {
  max-width: var(--band-w); margin: 0 auto;
  background: linear-gradient(160deg, var(--forest) 0%, var(--deep) 100%);
  border-radius: var(--r-2xl); padding: var(--s-16) var(--s-8);
  text-align: center; position: relative; overflow: hidden;
}
.cta-box::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(45,212,191,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 50%, rgba(201,144,12,0.08) 0%, transparent 60%);
}
.cta-box h2 {
  font-size: var(--f-h1); color: var(--white); margin-bottom: var(--s-4);
  position: relative; letter-spacing: -0.02em;
}
.cta-box p {
  color: var(--white-60); font-size: var(--f-body);
  max-width: 480px; margin: 0 auto var(--s-8); position: relative;
}
.cta-box .btn { position: relative; }

/* ── ABOUT / PILLARS ── */
.pillars { max-width: var(--band-w); margin: 0 auto; }
.pillars__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-5);
}
.pillar {
  background: var(--white); border: 1px solid var(--black-5);
  border-radius: var(--r-xl); padding: var(--s-8);
  text-align: center; position: relative; overflow: hidden;
  transition: all 0.35s var(--ease-out);
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.pillar__icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto var(--s-4);
}
.pillar h3 { font-size: var(--f-h3); margin-bottom: var(--s-2); }
.pillar p { font-size: var(--f-small); color: var(--muted); line-height: 1.65; }

@media (min-width: 640px) {
  .pillars__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .pillars__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── FOOTER ── */
.footer {
  background: var(--deep); padding: var(--s-16) var(--s-6) var(--s-8);
}
.footer__inner {
  max-width: var(--band-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: var(--s-10);
}
.footer__brand h3 {
  font-size: var(--f-h3); color: var(--white); margin-bottom: var(--s-3);
}
.footer__brand h3 em { font-style: italic; color: var(--gold-bright); }
.footer__brand p {
  font-size: var(--f-small); color: var(--white-60); max-width: 280px; line-height: 1.65;
}
.footer__col h4 {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: var(--f-xs);
  font-weight: 700; color: var(--white-60); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: var(--s-4);
}
.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: var(--s-2); }
.footer__col a {
  font-size: var(--f-small); color: rgba(255,255,255,0.4);
  transition: color var(--t-fast);
}
.footer__col a:hover { color: var(--gold-bright); }

.footer__line {
  max-width: var(--band-w); margin: var(--s-10) auto 0;
  padding-top: var(--s-6); border-top: 1px solid var(--white-10);
  display: flex; flex-direction: column; gap: var(--s-3); align-items: center;
}
.footer__line p { font-size: var(--f-xs); color: rgba(255,255,255,0.25); }
.footer__line a { color: rgba(255,255,255,0.4); font-size: var(--f-xs); }

@media (min-width: 768px) {
  .footer__inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .footer__line { flex-direction: row; justify-content: space-between; }
}

/* ── PAGE HEADER (inner pages) ── */
.pg-header {
  background: var(--deep); position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + var(--s-16)) var(--s-6) var(--s-12);
  text-align: center;
}
.pg-header::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 80%, var(--forest-mid), transparent 60%);
  opacity: 0.4;
}
.pg-header h1 {
  font-size: var(--f-hero); color: var(--white); position: relative;
  margin-bottom: var(--s-4); letter-spacing: -0.02em;
}
.pg-header p {
  font-size: var(--f-body); color: var(--white-60);
  max-width: 520px; margin: 0 auto; position: relative;
}

/* ── FILTERS ── */
.filters {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  justify-content: center; margin-bottom: var(--s-10);
}
.filters__btn {
  padding: var(--s-2) var(--s-5); border-radius: var(--r-full);
  border: 1px solid var(--black-10); background: var(--white);
  font-size: var(--f-small); font-weight: 600; color: var(--muted);
  transition: all var(--t-fast);
}
.filters__btn:hover { border-color: var(--forest); color: var(--forest); }
.filters__btn.active {
  background: var(--forest); color: var(--white); border-color: var(--forest);
}

/* ── SEARCH ── */
.search-wrap {
  max-width: 500px; margin: 0 auto var(--s-8); position: relative;
}
.search-wrap input {
  width: 100%; padding: var(--s-4) var(--s-5) var(--s-4) var(--s-12);
  border: 1px solid var(--black-10); border-radius: var(--r-full);
  font-family: inherit; font-size: var(--f-body);
  background: var(--white); color: var(--ink);
  transition: all var(--t-fast);
}
.search-wrap input:focus {
  outline: none; border-color: var(--forest);
  box-shadow: 0 0 0 4px rgba(27,67,50,0.08);
}
.search-wrap svg {
  position: absolute; left: var(--s-5); top: 50%; transform: translateY(-50%);
  color: var(--muted);
}

/* ── TOPIC DETAIL ── */
.topic-detail {
  background: var(--white); border-radius: var(--r-xl); border: 1px solid var(--black-5);
  overflow: hidden; max-width: 840px; margin: 0 auto;
  box-shadow: var(--sh-sm);
}
.topic-detail__head {
  padding: var(--s-8); display: flex; gap: var(--s-5); align-items: flex-start;
}
.topic-detail__thumb {
  width: 72px; height: 72px; border-radius: var(--r-lg); flex-shrink: 0;
  display: grid; place-items: center;
}
.topic-detail__info h3 { font-size: var(--f-h3); margin-bottom: var(--s-2); }
.topic-detail__info p { font-size: var(--f-small); color: var(--muted); line-height: 1.6; margin-bottom: var(--s-3); }
.topic-detail__tags { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.tag {
  font-size: var(--f-xxs); font-weight: 700;
  padding: var(--s-1) var(--s-3); border-radius: var(--r-full);
}
.tag--forest { background: rgba(27,67,50,0.08); color: var(--forest); }
.tag--gold { background: var(--gold-pale); color: var(--gold); }
.tag--free { background: rgba(42,157,143,0.1); color: var(--success); }

.topic-detail__lessons { border-top: 1px solid var(--black-5); }
.lesson-row {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-8); border-bottom: 1px solid var(--black-5);
  transition: background var(--t-fast); cursor: pointer; text-decoration: none; color: inherit;
}
.lesson-row:last-child { border-bottom: none; }
.lesson-row:hover { background: var(--cream); }
.lesson-row__n {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--cream); display: grid; place-items: center;
  font-size: var(--f-xs); font-weight: 700; color: var(--forest); flex-shrink: 0;
}
.lesson-row__info { flex: 1; min-width: 0; }
.lesson-row__title { font-weight: 700; font-size: var(--f-small); }
.lesson-row__meta { font-size: var(--f-xs); color: var(--muted); margin-top: 1px; }
.lesson-row__check {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--black-10);
}
.lesson-row__check--done {
  background: var(--success); border-color: var(--success);
  display: grid; place-items: center;
}
.lesson-row__arrow { color: var(--muted); flex-shrink: 0; }

@media (max-width: 640px) {
  .topic-detail__head { flex-direction: column; }
  .lesson-row { padding: var(--s-4) var(--s-5); }
}

/* ── RESOURCE FULL CARDS (Resources page) ── */
.rf-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-6);
  max-width: var(--band-w); margin: 0 auto;
}
.rf-card {
  background: var(--white); border: 1px solid var(--black-5);
  border-radius: var(--r-xl); overflow: hidden;
  transition: all 0.35s var(--ease-out);
}
.rf-card:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); }
.rf-card__top {
  padding: var(--s-6) var(--s-6) var(--s-4);
  display: flex; gap: var(--s-5); align-items: flex-start;
}
.rf-card__icon {
  width: 60px; height: 60px; border-radius: var(--r-lg);
  display: grid; place-items: center; flex-shrink: 0;
}
.rf-card__info { flex: 1; min-width: 0; }
.rf-card__title {
  font-family: 'Fraunces', serif; font-size: var(--f-h3);
  font-weight: 700; color: var(--forest); margin-bottom: var(--s-2);
}
.rf-card__desc {
  font-size: var(--f-small); color: var(--muted); line-height: 1.6; margin-bottom: var(--s-3);
}
.rf-card__bottom {
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--black-5); background: var(--cream);
  display: flex; align-items: center; justify-content: space-between;
}
.rf-card__bottom-left {
  display: flex; align-items: center; gap: var(--s-2);
}
.rf-card__bottom-right {
  display: flex; align-items: center; gap: var(--s-4);
}
.rf-card__price {
  font-family: 'Fraunces', serif; font-weight: 800; font-size: var(--f-body);
  color: var(--gold);
}
.rf-card__price--free { color: var(--success); }

@media (min-width: 768px) {
  .rf-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .rf-card__top { flex-direction: column; }
  .rf-card__bottom { flex-direction: column; gap: var(--s-3); align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════
   AUTH / LOGIN PAGE
   ═══════════════════════════════════════════════════════════════ */
.auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--deep) 0%, var(--forest) 50%, var(--deep-mid) 100%);
  padding: var(--s-6); position: relative; overflow: hidden;
}
.auth::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(45,212,191,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(201,144,12,0.1) 0%, transparent 50%);
}
.auth::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
}

.auth__card {
  width: 100%; max-width: 440px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
  border-radius: var(--r-2xl);
  padding: var(--s-10) var(--s-8);
  position: relative; z-index: 1;
  box-shadow: 0 32px 80px rgba(0,0,0,0.3);
}

.auth__logo {
  display: flex; align-items: center; gap: var(--s-3);
  justify-content: center; margin-bottom: var(--s-8); text-decoration: none;
}
.auth__logo-mark {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  display: grid; place-items: center;
  box-shadow: 0 0 24px rgba(201,144,12,0.3);
}
.auth__logo-text {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: 1.25rem; color: var(--white);
}
.auth__logo-text em { font-style: italic; color: var(--gold-bright); }

.auth__tabs {
  display: flex; background: rgba(255,255,255,0.05);
  border-radius: var(--r-full); padding: 3px;
  margin-bottom: var(--s-8);
}
.auth__tab {
  flex: 1; padding: var(--s-3) var(--s-4);
  border-radius: var(--r-full); border: none; background: none;
  font-family: inherit; font-size: var(--f-small); font-weight: 600;
  color: var(--white-60); cursor: pointer;
  transition: all var(--t-fast);
}
.auth__tab.active {
  background: var(--white-10); color: var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.auth__form { display: flex; flex-direction: column; gap: var(--s-5); }
.auth__field { display: flex; flex-direction: column; gap: var(--s-2); }
.auth__label {
  font-size: var(--f-xs); font-weight: 600;
  color: var(--white-70); text-transform: uppercase; letter-spacing: 0.06em;
}
.auth__input {
  width: 100%; padding: var(--s-4) var(--s-5);
  background: rgba(255,255,255,0.06);
  /* The outline is what shows where a field is, so it is held to 3 to 1
     against both the card around it and the field's own fill. */
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: var(--r-lg); color: var(--white);
  font-family: inherit; font-size: var(--f-body);
  transition: all var(--t-fast);
}
/* A placeholder here carries a rule ("At least 6 characters"), so it is held
   to the 4.5 to 1 of body text. */
.auth__input::placeholder { color: rgba(255,255,255,0.75); }
.auth__input:focus {
  outline: none; border-color: var(--gold);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 4px rgba(201,144,12,0.1);
}

/* Password field with show/hide eye — login.html and password.html.
   The eye was #5C6B73, and #1B4332 under the pointer: about 1.5 and 1.4 to 1 on
   this card (evidence/password-reset/before-arm.log), so it could barely be
   seen and vanished on hover. It is 44px wide, a full touch target. */
.auth__pw{position:relative}
.auth__pw .auth__input{padding-right:44px}
.auth__pw-toggle{position:absolute;top:0;right:0;height:100%;width:44px;display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--white-70)}
.auth__pw-toggle:hover{color:var(--white)}
.auth__pw-toggle svg{width:20px;height:20px}
.auth__pw-toggle .eye-off{display:none}
.auth__pw-toggle.is-on .eye{display:none}
.auth__pw-toggle.is-on .eye-off{display:block}

/* A card with no tabs names itself — password.html */
.auth__title {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: var(--f-h3); color: var(--white);
  text-align: center; margin-bottom: var(--s-2);
}
.auth__lead {
  font-size: var(--f-small); color: var(--white-70);
  text-align: center; line-height: 1.6; margin-bottom: var(--s-6);
}

.auth__btn {
  width: 100%; padding: var(--s-4) var(--s-6);
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  color: var(--deep); font-family: inherit;
  font-size: var(--f-body); font-weight: 700;
  border: none; border-radius: var(--r-full);
  cursor: pointer; transition: all var(--t-fast);
  margin-top: var(--s-2);
}
.auth__btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-gold);
}
.auth__btn:disabled {
  opacity: 0.5; cursor: not-allowed; transform: none;
  box-shadow: none;
}

.auth__error {
  background: rgba(230,57,70,0.12);
  border: 1px solid rgba(230,57,70,0.25);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4);
  font-size: var(--f-small); color: #FCA5A5;
  display: none;
}
/* A message shown above a form keeps a field's distance from it. */
.auth__error.show, .auth__success.show { margin-bottom: var(--s-5); }
.auth__error.show { display: block; }

.auth__success {
  background: rgba(42,157,143,0.12);
  border: 1px solid rgba(42,157,143,0.25);
  border-radius: var(--r-md); padding: var(--s-4);
  /* --sage measured about 4.0 to 1 on this panel (before-arm.log); --sage-pale is the same hue, readable. */
  font-size: var(--f-small); color: var(--sage-pale);
  text-align: center; display: none; line-height: 1.6;
}
.auth__success.show { display: block; }
/* The address a message names is whatever was typed, so it may be one long
   unbroken word: it takes a line of its own and breaks wherever it must. */
.auth__success { overflow-wrap: anywhere; }
.auth__sent-to { display: block; }

.auth__footer {
  margin-top: var(--s-6); text-align: center;
  font-size: var(--f-small); color: var(--white-70);
}
.auth__footer a {
  color: var(--gold-bright); text-decoration: underline;
  text-underline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   TOPIC PAGE
   ═══════════════════════════════════════════════════════════════ */
.topic-hero {
  background: var(--deep); position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + var(--s-16)) var(--s-6) var(--s-16);
}
.topic-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 80%, var(--forest-mid), transparent 60%),
    radial-gradient(ellipse at 70% 30%, rgba(201,144,12,0.08), transparent 50%);
  opacity: 0.5;
}
.topic-hero::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
}
.topic-hero__inner {
  max-width: var(--band-w); margin: 0 auto;
  position: relative; z-index: 2;
}
.topic-hero__breadcrumb {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--f-xs); color: var(--white-60);
  margin-bottom: var(--s-8);
}
.topic-hero__breadcrumb a {
  color: var(--white-60); transition: color var(--t-fast);
}
.topic-hero__breadcrumb a:hover { color: var(--gold-bright); }
.topic-hero__breadcrumb svg { width: 12px; height: 12px; }

.topic-hero__tag {
  display: inline-flex; align-items: center;
  font-size: var(--f-xxs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--gold-bright);
  background: var(--white-10); border: 1px solid var(--white-20);
  padding: var(--s-1) var(--s-3); border-radius: var(--r-full);
  margin-bottom: var(--s-5);
}

.topic-hero__title {
  font-size: var(--f-hero); color: var(--white);
  margin-bottom: var(--s-4); letter-spacing: -0.02em; max-width: 700px;
}

.topic-hero__desc {
  font-size: var(--f-body); color: var(--white-60);
  line-height: 1.8; max-width: 600px; margin-bottom: var(--s-8);
}

.topic-hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-6);
  align-items: center;
}
.topic-hero__meta-item {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--f-small); color: var(--white-60);
}
.topic-hero__meta-item svg {
  width: 16px; height: 16px; stroke: var(--gold-bright); fill: none; stroke-width: 2;
}
.topic-hero__meta-item strong { color: var(--white); font-weight: 600; }

/* Lesson list */
.topic-lessons {
  max-width: 840px; margin: 0 auto;
  padding: var(--s-12) var(--s-6);
}
.topic-lessons__header {
  margin-bottom: var(--s-8);
}
.topic-lessons__header h2 {
  font-size: var(--f-h2); margin-bottom: var(--s-2);
}
.topic-lessons__header p {
  font-size: var(--f-small); color: var(--muted);
}

.lesson-list { display: flex; flex-direction: column; gap: var(--s-4); }

.lesson-item {
  display: flex; align-items: center; gap: var(--s-5);
  background: var(--white); border: 1px solid var(--black-5);
  border-radius: var(--r-xl); padding: var(--s-6);
  text-decoration: none; color: inherit;
  transition: all 0.35s var(--ease-out);
  position: relative; overflow: hidden;
}
.lesson-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: linear-gradient(to bottom, var(--gold), var(--sage));
  opacity: 0; transition: opacity var(--t-fast);
}
.lesson-item:hover {
  border-color: var(--gold); transform: translateX(4px);
  box-shadow: var(--sh-md);
}
.lesson-item:hover::before { opacity: 1; }

.lesson-item__num {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--cream), var(--warm));
  display: grid; place-items: center;
  font-family: 'Fraunces', serif; font-weight: 800;
  font-size: var(--f-body); color: var(--forest);
  border: 2px solid var(--black-5);
}

.lesson-item__body { flex: 1; min-width: 0; }
.lesson-item__title {
  font-family: 'Fraunces', serif;
  font-size: var(--f-h3); font-weight: 700; color: var(--forest);
  margin-bottom: var(--s-1); line-height: 1.3;
}
.lesson-item__desc {
  font-size: var(--f-small); color: var(--muted);
  line-height: 1.6; margin-bottom: var(--s-2);
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.lesson-item__time {
  font-size: var(--f-xs); color: var(--muted);
  display: flex; align-items: center; gap: var(--s-1);
}
.lesson-item__time svg {
  width: 13px; height: 13px; stroke: var(--muted); fill: none; stroke-width: 2;
}

.lesson-item__status {
  flex-shrink: 0; display: flex; align-items: center;
}
.lesson-item__check {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--black-10); display: grid; place-items: center;
  transition: all var(--t-fast);
}
.lesson-item__check--done {
  background: var(--success); border-color: var(--success);
}
.lesson-item__check--done svg {
  width: 14px; height: 14px; stroke: var(--white); fill: none; stroke-width: 3;
}
.lesson-item__check--progress {
  border-color: var(--gold); background: var(--gold-pale);
}

.lesson-item__arrow {
  flex-shrink: 0; color: var(--muted);
  transition: transform var(--t-fast);
}
.lesson-item:hover .lesson-item__arrow { transform: translateX(4px); color: var(--gold); }

@media (max-width: 640px) {
  .lesson-item { padding: var(--s-4); gap: var(--s-3); }
  .lesson-item__num { width: 36px; height: 36px; font-size: var(--f-small); }
  .lesson-item__desc { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   LESSON VIEWER
   ═══════════════════════════════════════════════════════════════ */
.lesson-page {
  padding-top: var(--nav-h);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--cream);
}

.lesson__layout {
  display: flex; max-width: 1400px; margin: 0 auto;
}

/* Sidebar */
.lesson__sidebar {
  width: 300px; flex-shrink: 0;
  border-right: 1px solid var(--black-5);
  background: var(--white);
  height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));
  position: sticky; top: var(--nav-h);
  overflow-y: auto;
  display: none;
}
.lesson__sidebar-header {
  padding: var(--s-6);
  border-bottom: 1px solid var(--black-5);
}
.lesson__sidebar-header h3 {
  font-size: var(--f-small); color: var(--forest);
  line-height: 1.3; margin-bottom: var(--s-1);
}
.lesson__sidebar-header p {
  font-size: var(--f-xs); color: var(--muted);
}

.lesson__sidebar-nav { padding: var(--s-2) 0; }
.lesson__sidebar-link {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-6);
  font-size: var(--f-small); color: var(--muted);
  transition: all var(--t-fast); text-decoration: none;
  border-left: 3px solid transparent;
}
.lesson__sidebar-link:hover {
  background: var(--cream); color: var(--forest);
}
.lesson__sidebar-link.active {
  background: var(--cream); color: var(--forest);
  font-weight: 700; border-left-color: var(--gold);
}
.lesson__sidebar-link.completed { color: var(--success); }
.lesson__sidebar-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--cream); display: grid; place-items: center;
  font-size: var(--f-xxs); font-weight: 700; color: var(--forest);
  flex-shrink: 0;
}
.lesson__sidebar-link.active .lesson__sidebar-num {
  background: var(--gold); color: var(--deep);
}
.lesson__sidebar-link.completed .lesson__sidebar-num {
  background: var(--success); color: var(--white);
}

/* Mobile lesson dropdown */
.lesson__mobile-nav {
  display: block; padding: var(--s-4) var(--s-6);
  background: var(--white); border-bottom: 1px solid var(--black-5);
}
.lesson__mobile-select {
  width: 100%; padding: var(--s-3) var(--s-4);
  background: var(--cream); border: 1px solid var(--black-10);
  border-radius: var(--r-md); font-family: inherit;
  font-size: var(--f-small); color: var(--ink);
  cursor: pointer;
}

/* Content area */
.lesson__main {
  flex: 1; min-width: 0;
  padding: var(--s-8) var(--s-6) var(--s-16);
}
.lesson__container {
  max-width: 720px; margin: 0 auto;
}

/* Breadcrumbs */
.lesson__breadcrumbs {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--f-xs); color: var(--muted);
  margin-bottom: var(--s-8); flex-wrap: wrap;
}
.lesson__breadcrumbs a {
  color: var(--muted); transition: color var(--t-fast);
}
.lesson__breadcrumbs a:hover { color: var(--forest); }
.lesson__breadcrumbs svg { width: 12px; height: 12px; flex-shrink: 0; }

/* Lesson header */
.lesson__header {
  margin-bottom: var(--s-10);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid var(--black-5);
}
.lesson__header-tag {
  display: inline-flex;
  font-size: var(--f-xxs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--gold);
  background: var(--gold-pale); padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full); margin-bottom: var(--s-4);
}
.lesson__header h1 {
  font-size: var(--f-h1); margin-bottom: var(--s-4);
  letter-spacing: -0.02em;
}
.lesson__header-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-5);
  font-size: var(--f-small); color: var(--muted);
}
.lesson__header-meta span {
  display: flex; align-items: center; gap: var(--s-1);
}

/* Content blocks */
.lesson__content { margin-bottom: var(--s-12); }
.lesson__heading {
  font-size: var(--f-h2); margin: var(--s-10) 0 var(--s-4);
  letter-spacing: -0.01em;
}
.lesson__subheading {
  font-size: var(--f-h3); margin: var(--s-8) 0 var(--s-3);
}
.lesson__text {
  font-size: var(--f-body); line-height: 1.85;
  color: var(--ink-soft); margin-bottom: var(--s-5);
}
.lesson__quote {
  border-left: 4px solid var(--gold);
  padding: var(--s-5) var(--s-6);
  margin: var(--s-6) 0;
  background: var(--gold-pale);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-style: italic; font-size: var(--f-body);
  color: var(--ink); line-height: 1.8;
}
.lesson__scripture {
  border-left: 4px solid var(--sage);
  padding: var(--s-5) var(--s-6);
  margin: var(--s-6) 0;
  background: rgba(116,198,157,0.08);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-style: italic; font-size: var(--f-body);
  color: var(--forest); line-height: 1.8;
}
.lesson__scripture-icon {
  margin-right: var(--s-2); font-style: normal;
}
.lesson__callout {
  background: linear-gradient(135deg, rgba(45,212,191,0.06), rgba(45,212,191,0.02));
  border: 1px solid rgba(45,212,191,0.15);
  border-radius: var(--r-lg); padding: var(--s-6);
  margin: var(--s-6) 0; font-size: var(--f-body);
  color: var(--ink); line-height: 1.75;
}
.lesson__divider {
  border: none; height: 1px;
  background: linear-gradient(90deg, transparent, var(--black-10), transparent);
  margin: var(--s-8) 0;
}

/* QA Pairs */
.lesson__qa {
  background: var(--white); border: 1px solid var(--black-5);
  border-radius: var(--r-xl); overflow: hidden;
  margin: var(--s-5) 0;
  box-shadow: var(--sh-sm);
}
.lesson__qa-q {
  padding: var(--s-5) var(--s-6);
  background: linear-gradient(135deg, var(--cream), var(--warm));
  font-weight: 700; font-size: var(--f-body); color: var(--forest);
  display: flex; align-items: flex-start; gap: var(--s-3);
  line-height: 1.5;
}
.lesson__qa-num {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--forest); color: var(--white);
  display: grid; place-items: center;
  font-size: var(--f-xs); font-weight: 800;
  font-family: 'Fraunces', serif;
}
.lesson__qa-a {
  padding: var(--s-5) var(--s-6);
  font-size: var(--f-body); color: var(--ink-soft);
  line-height: 1.8; padding-left: calc(var(--s-6) + 28px + var(--s-3));
}

/* ═══════════════════════════════════════════════════════════════
   ASSESSMENTS
   ═══════════════════════════════════════════════════════════════ */
.assess {
  margin-top: var(--s-12);
  border-top: 2px solid var(--black-5);
  padding-top: var(--s-10);
}
.assess__header {
  margin-bottom: var(--s-8);
}
.assess__header h2 {
  font-size: var(--f-h2); margin-bottom: var(--s-2);
}
.assess__header p {
  font-size: var(--f-small); color: var(--muted);
}

.assess__list { display: flex; flex-direction: column; gap: var(--s-6); }

.assess__item {
  background: var(--white); border: 1px solid var(--black-5);
  border-radius: var(--r-xl); padding: var(--s-6);
  box-shadow: var(--sh-sm);
}
.assess__question {
  font-size: var(--f-body); font-weight: 600;
  color: var(--ink); margin-bottom: var(--s-5);
  display: flex; align-items: flex-start; gap: var(--s-3);
  line-height: 1.5;
}
.assess__num {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  color: var(--deep); display: grid; place-items: center;
  font-size: var(--f-xs); font-weight: 800;
  font-family: 'Fraunces', serif;
}

.assess__options {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding-left: calc(28px + var(--s-3));
}
.assess__option {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--cream); border: 1px solid var(--black-5);
  border-radius: var(--r-md); cursor: pointer;
  transition: all var(--t-fast);
  font-size: var(--f-small);
}
.assess__option:hover {
  border-color: var(--forest); background: rgba(27,67,50,0.03);
}
.assess__option.selected {
  border-color: var(--forest); background: rgba(27,67,50,0.05);
}
.assess__option.correct {
  border-color: var(--success); background: rgba(42,157,143,0.08);
}
.assess__option.incorrect {
  border-color: var(--danger); background: rgba(230,57,70,0.05);
}

.assess__radio {
  width: 18px; height: 18px; accent-color: var(--forest);
  flex-shrink: 0;
}
.assess__option-text {
  font-size: var(--f-small); color: var(--ink); line-height: 1.5;
}

.assess__textarea {
  width: 100%; padding: var(--s-4);
  border: 1px solid var(--black-10); border-radius: var(--r-md);
  font-family: inherit; font-size: var(--f-body);
  background: var(--cream); color: var(--ink);
  resize: vertical; min-height: 100px;
  margin-left: calc(28px + var(--s-3));
  max-width: calc(100% - 28px - var(--s-3));
  transition: border-color var(--t-fast);
}
.assess__textarea:focus {
  outline: none; border-color: var(--forest);
  box-shadow: 0 0 0 4px rgba(27,67,50,0.08);
}

.assess__input {
  width: 100%; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--black-10); border-radius: var(--r-md);
  font-family: inherit; font-size: var(--f-body);
  background: var(--cream); color: var(--ink);
  margin-left: calc(28px + var(--s-3));
  max-width: calc(100% - 28px - var(--s-3));
  transition: border-color var(--t-fast);
}
.assess__input:focus {
  outline: none; border-color: var(--forest);
  box-shadow: 0 0 0 4px rgba(27,67,50,0.08);
}

.assess__feedback {
  margin-top: var(--s-4); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md); font-size: var(--f-small);
  line-height: 1.6;
  margin-left: calc(28px + var(--s-3));
}
.assess__feedback--correct {
  background: rgba(42,157,143,0.08); border: 1px solid rgba(42,157,143,0.2);
  color: var(--success);
}
.assess__feedback--incorrect {
  background: rgba(230,57,70,0.05); border: 1px solid rgba(230,57,70,0.15);
  color: var(--danger);
}

.assess__actions {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  margin-top: var(--s-8); padding-top: var(--s-6);
  border-top: 1px solid var(--black-5);
}
.assess__btn {
  padding: var(--s-4) var(--s-8);
  font-family: inherit; font-size: var(--f-body); font-weight: 700;
  border: none; border-radius: var(--r-full); cursor: pointer;
  transition: all var(--t-fast);
}
.assess__btn--check {
  background: var(--forest); color: var(--white);
}
.assess__btn--check:hover {
  background: var(--forest-mid); transform: translateY(-2px);
  box-shadow: var(--sh-lg);
}
.assess__btn--complete {
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  color: var(--deep);
}
.assess__btn--complete:hover {
  transform: translateY(-2px); box-shadow: var(--sh-gold);
}
.assess__btn:disabled {
  opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none;
}

@media (min-width: 1024px) {
  .lesson__sidebar { display: block; }
  .lesson__mobile-nav { display: none; }

  /* The two-column area shares the header's band, edge for edge: the same
     --max-w and the same --s-6 gutter .nav__inner uses, so the sidebar's left
     edge sits under the logo and the reading column's right edge under the
     Sign Out button. Reused, never restated as a number — a literal that
     happens to match today is how these two drifted apart in the first place. */
  .lesson__layout { max-width: var(--max-w); padding: 0 var(--s-6); }
  /* No right padding: the reading column IS the band's right edge. The left
     padding is the gutter off the sidebar. */
  .lesson__main { padding: var(--s-10) 0 var(--s-20) var(--s-12); }
  .lesson__container { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD
   ═══════════════════════════════════════════════════════════════ */
.dash {
  padding-top: var(--nav-h);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--cream);
}

.dash__header {
  background: var(--deep); position: relative; overflow: hidden;
  padding: var(--s-12) var(--s-6) var(--s-10);
}
.dash__header::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 80%, var(--forest-mid), transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(201,144,12,0.08), transparent 50%);
  opacity: 0.4;
}
.dash__header::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
}
.dash__header-inner {
  max-width: var(--max-w); margin: 0 auto;
  position: relative; z-index: 2;
}
.dash__welcome {
  font-size: var(--f-h1); color: var(--white);
  letter-spacing: -0.02em; margin-bottom: var(--s-2);
}
.dash__welcome-sub {
  font-size: var(--f-body); color: var(--white-60);
}

/* Stats row */
.dash__stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4);
  max-width: var(--max-w); margin: calc(-1 * var(--s-8)) auto var(--s-8);
  padding: 0 var(--s-6); position: relative; z-index: 3;
}
.dash__stat {
  background: var(--white); border: 1px solid var(--black-5);
  border-radius: var(--r-xl); padding: var(--s-6);
  box-shadow: var(--sh-sm);
}
.dash__stat-value {
  font-family: 'Fraunces', serif; font-size: var(--f-h2);
  font-weight: 800; color: var(--forest);
  line-height: 1; margin-bottom: var(--s-1);
}
.dash__stat-label {
  font-size: var(--f-xs); color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}

.dash__body {
  max-width: var(--max-w); margin: 0 auto;
  padding: var(--s-4) var(--s-6) var(--s-16);
}

/* Grid */
.dash__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-6);
}

/* Cards */
.dash__card {
  background: var(--white); border: 1px solid var(--black-5);
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-sm);
}
.dash__card-header {
  padding: var(--s-6) var(--s-6) var(--s-4);
  display: flex; align-items: center; justify-content: space-between;
}
.dash__card-header h3 {
  font-size: var(--f-h3); letter-spacing: -0.01em;
}
.dash__card-body { padding: 0 var(--s-6) var(--s-6); }

/* Progress bar */
.dash__progress {
  background: var(--cream); border-radius: var(--r-full);
  height: 8px; overflow: hidden; margin-bottom: var(--s-2);
}
.dash__progress-bar {
  height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--forest), var(--sage));
  transition: width 0.8s var(--ease-out);
}
.dash__progress-text {
  font-size: var(--f-xs); color: var(--muted); font-weight: 600;
}

/* Course progress card */
.dash__course {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-4); border-radius: var(--r-lg);
  transition: background var(--t-fast);
}
.dash__course:hover { background: var(--cream); }
.dash__course + .dash__course {
  border-top: 1px solid var(--black-5); margin-top: var(--s-2); padding-top: var(--s-6);
}
.dash__course-icon {
  width: 44px; height: 44px; border-radius: var(--r-md); flex-shrink: 0;
  background: linear-gradient(135deg, var(--forest), var(--forest-mid));
  display: grid; place-items: center;
}
.dash__course-icon svg {
  width: 20px; height: 20px; stroke: var(--white); fill: none; stroke-width: 2;
}
.dash__course-info { flex: 1; min-width: 0; }
.dash__course-title {
  font-weight: 700; font-size: var(--f-small); color: var(--ink);
  margin-bottom: var(--s-2);
}

/* Activity item */
.dash__activity {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-3) 0;
}
.dash__activity + .dash__activity {
  border-top: 1px solid var(--black-5);
}
.dash__activity-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sage); flex-shrink: 0;
  margin-top: 6px;
}
.dash__activity-text {
  font-size: var(--f-small); color: var(--ink-soft); line-height: 1.5;
}
.dash__activity-time {
  font-size: var(--f-xs); color: var(--muted); margin-top: 2px;
}

/* Empty state */
.dash__empty {
  text-align: center; padding: var(--s-10) var(--s-6);
}
.dash__empty-icon {
  width: 64px; height: 64px; margin: 0 auto var(--s-4);
  background: var(--cream); border-radius: 50%;
  display: grid; place-items: center;
}
.dash__empty-icon svg {
  width: 28px; height: 28px; stroke: var(--muted); fill: none; stroke-width: 1.5;
}
.dash__empty p {
  font-size: var(--f-small); color: var(--muted); margin-bottom: var(--s-4);
  line-height: 1.6;
}

/* Training row. It is a .dash__course row with a date where the icon sits and
   a line of text where the progress bar sits. */
.dash__date {
  width: 44px; height: 44px; border-radius: var(--r-md); flex-shrink: 0;
  background: var(--gold-pale); border: 1px solid var(--gold);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1;
}
.dash__date-mon {
  font-size: var(--f-xxs); font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.dash__date-day {
  font-family: 'Fraunces', serif; font-size: var(--f-body);
  font-weight: 800; color: var(--forest); margin-top: 2px;
}
/* The title keeps the line; the status wraps under it when there is no room. */
.dash__course-title--split {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-1) var(--s-3);
}
.dash__pill {
  flex-shrink: 0; font-size: var(--f-xxs); font-weight: 700; line-height: 1.65;
  padding: 0 var(--s-2); border-radius: var(--r-full);
  background: var(--gold-pale); color: var(--ink-soft);
}
/* One --s-4 line: the height of a course row's bar plus the gap under it, so a
   training row and a course row are the same height and two lists of the same
   length end on the same line. */
.dash__meta { font-size: var(--f-xs); line-height: var(--s-4); color: var(--muted); }

/* Courses and Trainings: ONE tree, two layouts.
   Below 1024 .dash__learning is a single card, "My Learning", and its two
   panels are tabs with one showing. From 1024 it has no box of its own
   (display: contents), so the two panels are cards in .dash__grid's own two
   columns and the tab strip is not rendered at all. */
/* .admin__tabs is declared further down this file, so the strip's own rules
   carry the card's class to out-rank it. */
.dash__learning .dash__tabs { margin: 0 var(--s-6) var(--s-4); }
@media (max-width: 1023.98px) {
  /* The panel and its header dissolve instead, which puts the panel's own
     Browse link on the card's title row and leaves one link in the markup. */
  .dash__learning { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .dash__learning-title {
    font-size: var(--f-h3); letter-spacing: -0.01em;
    padding: var(--s-6) 0 var(--s-4) var(--s-6);
  }
  .dash__panel, .dash__panel > .dash__card-header { display: contents; }
  .dash__panel > .dash__card-header h3 { display: none; }
  .dash__panel > .dash__card-header .btn { grid-area: 1 / 2; margin: var(--s-6) var(--s-6) var(--s-4) 0; }
  .dash__tabs, .dash__panel > .dash__card-body { grid-column: 1 / -1; min-width: 0; }
  .dash__learning[data-tab="courses"] .dash__panel[data-panel="trainings"],
  .dash__learning[data-tab="trainings"] .dash__panel[data-panel="courses"] { display: none; }
}
@media (min-width: 1024px) {
  .dash__stats { grid-template-columns: repeat(4, 1fr); }
  .dash__grid { grid-template-columns: 1fr 1fr; }
  .dash__learning { display: contents; }
  .dash__learning-title, .dash__learning .dash__tabs { display: none; }
  /* Each card is as tall as what is in it and no taller, the two lists
     included: three courses beside one training is a long card beside a short
     one, level at the top. Quick Links is four buttons and stays four buttons
     tall however long the activity beside it runs. */
  .dash__grid { align-items: start; }
}

/* ═══════════════════════════════════════════════════════════════
   LOADING STATES
   ═══════════════════════════════════════════════════════════════ */
.loading__text {
  font-size: var(--f-small); color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hide-mobile { display: none; }
@media (min-width: 768px) { .hide-mobile { display: block; } }
.hide-desktop { display: block; }
@media (min-width: 768px) { .hide-desktop { display: none; } }

/* ═══════════════════════════════════════════════════════════════
   ADMIN PANEL
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout ── */
.admin {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── Sidebar ── */
.admin__sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--deep);
  color: var(--white);
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  z-index: 50;
  overflow-y: auto;
  transition: transform 0.3s var(--ease-out);
}

.admin__sidebar-header {
  padding: var(--s-6);
  border-bottom: 1px solid var(--white-10);
}

.admin__sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--white);
}

.admin__sidebar-logo .nav__mark {
  width: 32px;
  height: 32px;
}

.admin__sidebar-logo span {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.admin__sidebar-logo em {
  font-style: italic;
  color: var(--gold-bright);
}

/* ── Nav Links ── */
/* The list of links is what scrolls, so the account block under it stays at
   the foot of the sidebar however short the window is. */
.admin__nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s-4) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.admin__nav-label {
  font-size: var(--f-xxs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding: var(--s-3) var(--s-3) var(--s-1);
}

.admin__nav a, .admin__nav button, .admin__sidebar-signout {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  color: var(--white-60);
  font-size: var(--f-small);
  font-weight: 500;
  text-decoration: none;
  transition: all var(--t-fast);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.admin__nav a:hover, .admin__nav button:hover, .admin__sidebar-signout:hover {
  color: var(--white);
  background: var(--white-10);
}

.admin__nav a.active {
  color: var(--gold-bright);
  background: rgba(201,144,12,0.12);
  font-weight: 600;
}

.admin__nav a svg, .admin__nav button svg, .admin__sidebar-signout svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.admin__nav a.active svg {
  opacity: 1;
}

/* A link the markup ships hidden stays out of the list until the roles have
   been read. The rule above would otherwise lay it out. */
.admin__nav a[hidden] {
  display: none;
}

.admin__nav-divider {
  height: 1px;
  flex-shrink: 0;
  background: var(--white-10);
  margin: var(--s-2) var(--s-3);
}

/* Sidebar footer: who is signed in. The one place the account is named. */
.admin__sidebar-footer {
  padding: var(--s-4) var(--s-4) var(--s-6);
  background: var(--deep-mid);
  border-top: 1px solid var(--white-10);
}

.admin__sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2);
}

.admin__sidebar-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--forest-mid);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--f-small);
  color: var(--gold-bright);
  flex-shrink: 0;
}

.admin__sidebar-info {
  min-width: 0;
}

/* Sign Out sits under the account, in the block that stays in view. It wears
   the link style of the list above it, so it reads as an action and not as
   a third line about the account. A button does not take the page's line
   height unless told to: left alone it is shorter than the links, under 44
   on a phone, and a pixel taller until the font arrives. */
.admin__sidebar-signout {
  margin-top: var(--s-2);
  line-height: inherit;
}

.admin__sidebar-name {
  font-size: var(--f-small);
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin__sidebar-role {
  font-size: var(--f-xxs);
  color: var(--white-70);
}

/* Both lines are filled once the roles have been read. Until then each holds
   its line empty, so the block does not change height when the account arrives. */
.admin__sidebar-name:empty::before,
.admin__sidebar-role:empty::before {
  content: '\00a0';
}

/* ── Main Content ── */
.admin__main {
  flex: 1;
  min-width: 0;
  background: var(--cream);
  display: flex;
  flex-direction: column;
}

/* Top bar */
.admin__topbar {
  background: var(--white);
  border-bottom: 1px solid var(--black-5);
  padding: var(--s-4) var(--s-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  position: sticky;
  top: 0;
  z-index: 40;
}

.admin__topbar-left {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.admin__burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  padding: var(--s-2);
  cursor: pointer;
}

.admin__burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

.admin__breadcrumb {
  font-size: var(--f-xs);
  color: var(--muted);
}

.admin__breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.admin__breadcrumb a:hover {
  color: var(--forest);
}

.admin__page-title {
  font-family: 'Fraunces', serif;
  font-size: var(--f-h3);
  color: var(--forest);
  font-weight: 700;
}

/* Its buttons are the field's height, so two of them (the course editor's
   Save Draft and Save & Publish) are wider than a phone leaves beside the
   title: there they stack at the right instead of pushing the page sideways. */
.admin__topbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-3);
  align-items: center;
}

/* The brand block and the bar beside it share one height, so their bottom
   edges meet in one line across the page. Only where the sidebar stands
   beside the page: on a phone it is a drawer over it, and the bar there is
   as tall as its breadcrumb and title wrap. */
@media (min-width: 768px) {
  .admin__sidebar-header,
  .admin__topbar {
    min-height: var(--s-24);
  }

  .admin__sidebar-header {
    display: flex;
    align-items: center;
    padding-top: var(--s-4);
    padding-bottom: var(--s-4);
  }
}

/* ── Content Area ── */
.admin__content {
  padding: var(--s-8);
  flex: 1;
}

/* ── Stat Cards ── */
.admin__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-6);
  margin-bottom: var(--s-8);
}

.admin__stat {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--sh-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  transition: box-shadow var(--t-fast);
}

.admin__stat:hover {
  box-shadow: var(--sh-md);
}

.admin__stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.admin__stat-icon--users { background: rgba(45,212,191,0.12); color: var(--teal); }
.admin__stat-icon--courses { background: rgba(64,145,108,0.12); color: var(--emerald); }
.admin__stat-icon--revenue { background: rgba(201,144,12,0.12); color: var(--gold); }
.admin__stat-icon--resources { background: rgba(116,198,157,0.12); color: var(--sage); }

.admin__stat-value {
  font-family: 'Fraunces', serif;
  font-size: var(--f-h2);
  font-weight: 700;
  color: var(--forest);
  line-height: 1;
}

.admin__stat-label {
  font-size: var(--f-small);
  color: var(--muted);
  margin-top: var(--s-1);
}

/* ── Cards ── */
.admin__card {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

.admin__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--black-5);
  gap: var(--s-4);
}

.admin__card-header h3 {
  font-family: 'Fraunces', serif;
  font-size: var(--f-h3);
  color: var(--forest);
  font-weight: 600;
}

.admin__card-body {
  padding: var(--s-6);
}

.admin__card-body--flush {
  padding: 0;
}

/* ── Tables ── */
.admin__table-wrap {
  overflow-x: auto;
}

.admin__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--f-small);
}

.admin__table th {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  background: var(--warm);
  font-weight: 600;
  color: var(--ink-soft);
  font-size: var(--f-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border-bottom: 1px solid var(--black-5);
}

.admin__table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--black-5);
  vertical-align: middle;
}

.admin__table tbody tr:hover {
  background: var(--warm);
}

.admin__table tbody tr:last-child td {
  border-bottom: none;
}

/* ── Badges ── */
.admin__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--f-xxs);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin__badge--published { background: rgba(42,157,143,0.12); color: var(--success); }
.admin__badge--draft { background: rgba(107,123,106,0.12); color: var(--muted); }
.admin__badge--free { background: rgba(45,212,191,0.12); color: var(--teal); }
.admin__badge--paid { background: rgba(201,144,12,0.12); color: var(--gold); }
.admin__badge--active { background: rgba(42,157,143,0.12); color: var(--success); }
.admin__badge--inactive { background: rgba(230,57,70,0.12); color: var(--danger); }
.admin__badge--pending { background: rgba(201,144,12,0.12); color: var(--gold); }
.admin__badge--approved { background: rgba(42,157,143,0.12); color: var(--success); }
/* The email marker on admin/users.html, and only that. Same two tints as
   --approved and --pending, with text dark enough to read at this size: those
   two measure 2.92 and 2.51 to 1 against their own tint, and body text needs
   4.5. tests/users_verified_drive.mjs measures both, at rest and on a hovered
   row. The other badges are left as they are: that is a separate decision.
   design-taste-ok: no dark gold in the palette; #7A5600 is --gold darkened
   until it reads on its own tint. */
.admin__badge--verified { background: rgba(42,157,143,0.12); color: var(--forest-mid); }
.admin__badge--unverified { background: rgba(201,144,12,0.12); color: #7A5600; }

/* ── Buttons in the admin ──
   Every text button in the admin is the shared field's twin: the field's
   height, text size, border width and radius (see Forms), so a button and a
   dropdown in one toolbar are one height and read as a pair. The size
   classes (--sm, --md, --lg) still size a button on the public pages; in the
   admin all three draw this one button, and the inline padding is the 20px
   --sm already had, the size most admin buttons wore. The level classes
   keep their colours; every level is 600, where --gold alone was 700.
   The selector reaches the dialogs as well, which every admin page writes
   after its .admin block rather than inside it.
   Checked by tests/button_uniform_measure.mjs. */
:is(.admin, .admin ~ *) .btn {
  height: var(--field-h);
  padding: 0 var(--s-5);
  font-size: var(--f-body);
  font-weight: 600;
  line-height: 1.25;
  border-width: 1.5px;
  border-style: solid;
  border-radius: var(--r-md);
}

/* The levels with no border of their own draw it in their own fill, so every
   level is the same box. --outline and --danger keep the colour they set. */
:is(.admin, .admin ~ *) :is(.btn--gold, .btn--forest, .btn--ghost) {
  border-color: transparent;
}

/* A ghost button keeps no fill and no border at rest, and on hover takes the
   fill a table row takes, in place of the underline it draws on the public
   pages, which ran under the padding. */
:is(.admin, .admin ~ *) .btn--ghost::after { content: none; }
:is(.admin, .admin ~ *) .btn--ghost:hover { background: var(--warm); }

/* A button that cannot be pressed, such as Save while it saves. The look was
   on the officer programme's staff page alone. */
:is(.admin, .admin ~ *) .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* A button as wide as the box it sits in. */
:is(.admin, .admin ~ *) .btn--block { width: 100%; }

/* A card header's controls: its filters and its button, kept together at the
   right of the title and wrapping under it when the card is too narrow.
   .of-filters is the same box under the name the officer programme's staff
   page gave it first; markup on that page still uses it, so both names lay
   out alike. */
.admin__card-tools,
.of-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
  max-width: 100%;
}

/* The dashboard's Quick Actions: one button a line, its icon and label at the
   left like a menu. */
.admin__quick-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.admin__quick-actions .btn { justify-content: flex-start; }

/* ── Action Buttons (table row) ── */
.admin__actions {
  display: flex;
  gap: var(--s-2);
  align-items: center;
}

.admin__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  border: 1px solid var(--black-5);
  background: var(--white);
  cursor: pointer;
  transition: all var(--t-fast);
  color: var(--muted);
}

.admin__action-btn:hover {
  background: var(--warm);
  color: var(--forest);
  border-color: var(--black-10);
}

.admin__action-btn--danger:hover {
  background: rgba(230,57,70,0.08);
  color: var(--danger);
  border-color: rgba(230,57,70,0.2);
}

.admin__action-btn--success:hover {
  background: rgba(42,157,143,0.08);
  color: var(--success);
  border-color: rgba(42,157,143,0.2);
}

/* Wear the colour at rest, not only under the pointer, so the button says what
   it does before anyone reaches it. It is a separate modifier because
   --danger alone is worn by eight delete buttons on four other admin pages
   that are meant to stay grey until hovered; this one composes with it. */
.admin__action-btn--tinted.admin__action-btn--danger {
  color: var(--danger);
  border-color: rgba(230,57,70,0.2);
}

.admin__action-btn--tinted.admin__action-btn--success {
  color: var(--success);
  border-color: rgba(42,157,143,0.2);
}

/* ── Forms ── */
.admin__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.admin__form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}

/* min-width: 0 lets a field sitting in a row of two (a grid or flex cell)
   narrow with the dialog on a phone, instead of holding the cell open at the
   width the browser gives an empty input and running past the edge. */
.admin__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.admin__label {
  font-size: var(--f-small);
  font-weight: 600;
  color: var(--ink-soft);
}

/* Every text input, search box, dropdown, date field and text area in the
   admin wears one of these four, and this is what all four share. A field in
   a page's toolbar is .admin__filter-input (see Filters), which differs only
   in its width. */
.admin__input,
.admin__select,
.admin__textarea,
.admin__filter-input {
  font-family: inherit;
  font-size: var(--f-body);
  line-height: 1.25;
  padding: var(--s-3) var(--s-4);
  border: 1.5px solid var(--black-10);
  border-radius: var(--r-md);
  background-color: var(--white);
  color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
}

/* One line high: every field but the text area. */
.admin__input,
.admin__select,
.admin__filter-input {
  height: var(--field-h);
}

.admin__input:focus,
.admin__select:focus,
.admin__textarea:focus,
.admin__filter-input:focus {
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px rgba(64,145,108,0.1);
}

.admin__input::placeholder,
.admin__textarea::placeholder,
.admin__filter-input::placeholder {
  color: var(--field-placeholder);
  opacity: 1;
}

/* A field that cannot be changed, such as the price beside "Free". The look
   is the one the officer's worksheet page already gives a closed field
   (good-harvest.html, .ws-card textarea:disabled). */
.admin__input:disabled,
.admin__select:disabled,
.admin__textarea:disabled,
.admin__filter-input:disabled {
  background-color: var(--warm-mid);
  color: var(--ink-soft);
  cursor: not-allowed;
}

/* Date and time fields. The browser draws their text in a box of its own,
   one pixel taller above and below than a text field's line, so at the same
   padding a date stood 2px taller than the text field beside it (39 against
   37 in a toolbar, 49 against 47 in a dialog). The shared height settles the
   field; this settles the text inside it on the same line as its
   neighbours', keeps it at the left where Safari on an iPhone centres it, and
   shows the calendar button as one that can be pressed. */
.admin__input::-webkit-datetime-edit,
.admin__filter-input::-webkit-datetime-edit {
  padding: 0;
}

.admin__input::-webkit-date-and-time-value,
.admin__filter-input::-webkit-date-and-time-value {
  text-align: left;
}

.admin__input::-webkit-calendar-picker-indicator,
.admin__filter-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

.admin__textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}

/* Every dropdown, in a dialog or a toolbar: the one drawn arrow, never the
   browser's. */
.admin__select,
select.admin__filter-input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7B6A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: var(--s-10);
}

.admin__checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.admin__checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--emerald);
}

/* ── Form Actions ── */
.admin__form-actions {
  display: flex;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--black-5);
}

/* ── Grid Layouts ── */
.admin__grid {
  display: grid;
  gap: var(--s-6);
}

.admin__grid--2 {
  grid-template-columns: 1fr;
}

.admin__grid--3 {
  grid-template-columns: 1fr;
}

/* ── Activity List ── */
.admin__activity {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) 0;
}

.admin__activity + .admin__activity {
  border-top: 1px solid var(--black-5);
}

.admin__activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sage);
  flex-shrink: 0;
  margin-top: 6px;
}

.admin__activity-text {
  font-size: var(--f-small);
  color: var(--ink);
  line-height: 1.5;
}

.admin__activity-time {
  font-size: var(--f-xs);
  color: var(--muted);
  margin-top: 2px;
}

/* ── Empty State ── */
.admin__empty {
  text-align: center;
  padding: var(--s-12) var(--s-6);
  color: var(--muted);
}

.admin__empty svg {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--s-4);
  opacity: 0.3;
}

.admin__empty p {
  font-size: var(--f-small);
  margin-bottom: var(--s-4);
}

/* ── Modal / Overlay ── */
.admin__modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12,31,23,0.5);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
}

.admin__modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.admin__modal {
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  transform: translateY(20px);
  transition: transform 0.3s var(--ease-out);
}

.admin__modal-overlay.open .admin__modal {
  transform: translateY(0);
}

.admin__modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--black-5);
}

.admin__modal-header h3 {
  font-family: 'Fraunces', serif;
  font-size: var(--f-h3);
  color: var(--forest);
}

.admin__modal-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: all var(--t-fast);
}

.admin__modal-close:hover {
  background: var(--warm);
  color: var(--ink);
}

.admin__modal-body {
  padding: var(--s-6);
}

.admin__modal-footer {
  display: flex;
  gap: var(--s-3);
  justify-content: flex-end;
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--black-5);
}

/* ── Tabs ── */
/* The strip WRAPS; it does not scroll. `overflow-x: auto` was the whole defect:
   per CSS Overflow 3 3.3 an `overflow-y` of `visible` computes to `auto` the
   moment the other axis is not `visible`, so this box became a scroll container
   on BOTH axes. It then found 2px of VERTICAL overflow to scroll - .admin__tab
   below pulls its 2px underline onto this border with `margin-bottom: -2px`, so
   the tab's border box (44px) is 2px taller than this box's content box (42px).
   Measured on donations at 1440 with this file served from 1a4c280
   (evidence/admin-tabs/tabs-overflow.NEGATIVE-CONTROL-origin-main.log:6,8):
   scrollWidth 1101 == clientWidth 1101 - nothing overflowed sideways at all -
   while scrollHeight 44 > clientHeight 42 and a 15px vertical scrollbar was
   laid out. The strip's border box was 292->1408 (1116 wide) in that arm and is
   unchanged in the fixed one, so the 1101 content box IS the bar: after the fix
   clientWidth reads 1116 (tabs-overflow.AFTER.log:6), exactly 15px wider.
   Deleting overflow-x is
   safe here only because there is a wrap to fall back on: dfvf.html's four tabs
   DO overflow at 390 (scrollWidth 440 vs clientWidth 358), and without
   flex-wrap that would hide "Site Content" instead of moving it to a second
   row. Do not remove one of these two lines without the other. */
.admin__tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--black-5);
  gap: 0;
  margin-bottom: var(--s-6);
}

.admin__tab {
  padding: var(--s-3) var(--s-5);
  font-size: var(--f-small);
  font-weight: 600;
  color: var(--muted);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--t-fast);
  white-space: nowrap;
  font-family: inherit;
}

.admin__tab:hover {
  color: var(--forest);
}

.admin__tab.active {
  color: var(--forest);
  border-bottom-color: var(--gold);
}

.admin__tab-panel {
  display: none;
}

.admin__tab-panel.active {
  display: block;
}

/* ── Course Editor ── */
.admin__section {
  margin-bottom: var(--s-8);
}

.admin__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-4);
}

.admin__section-title {
  font-family: 'Fraunces', serif;
  font-size: var(--f-h3);
  color: var(--forest);
  font-weight: 600;
}

/* Lesson items in editor */
.admin__lesson-item {
  background: var(--warm);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
  cursor: pointer;
  transition: all var(--t-fast);
  border: 1.5px solid transparent;
}

.admin__lesson-item:hover {
  border-color: var(--black-10);
}

.admin__lesson-item.expanded {
  background: var(--white);
  border-color: var(--emerald);
  box-shadow: var(--sh-sm);
}

.admin__lesson-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.admin__lesson-item-left {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

.admin__lesson-grip {
  color: var(--muted);
  cursor: grab;
  flex-shrink: 0;
}

.admin__lesson-title {
  font-weight: 600;
  font-size: var(--f-small);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin__lesson-meta {
  font-size: var(--f-xs);
  color: var(--muted);
  flex-shrink: 0;
}

.admin__lesson-expand {
  padding: var(--s-4) 0 0;
  display: none;
}

.admin__lesson-item.expanded .admin__lesson-expand {
  display: block;
}

/* Content blocks in editor */
.admin__block {
  background: var(--warm);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-2);
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--f-small);
}

.admin__block-type {
  font-size: var(--f-xxs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--emerald);
  flex-shrink: 0;
  min-width: 70px;
}

.admin__block-content {
  flex: 1;
  min-width: 0;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Q&A blocks show question + answer on two truncated lines */
.admin__block-content--qa {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: normal;
}

.admin__block-qa-q,
.admin__block-qa-a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin__block-qa-q { font-weight: 600; color: var(--ink); }
.admin__block-qa-a { color: var(--muted); }

.admin__block-actions {
  display: flex;
  gap: var(--s-1);
  flex-shrink: 0;
}

/* ── Filters ── */
.admin__filters {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
}

/* A search box, date or dropdown in a page's toolbar. It is the shared field
   (see Forms); all it adds is room for its placeholder. */
.admin__filter-input {
  min-width: 180px;
}

/* A word set before a toolbar field, such as From and To before two dates:
   the label and its field sit on one line, the field's own size unchanged. */
.admin__filter-label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--f-small);
  color: var(--muted);
  white-space: nowrap;
}

/* ── Toast Notification ── */
.admin__toast {
  position: fixed;
  bottom: var(--s-6);
  right: var(--s-6);
  background: var(--forest);
  color: var(--white);
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-md);
  font-size: var(--f-small);
  font-weight: 500;
  box-shadow: var(--sh-lg);
  z-index: 300;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s var(--ease-out);
}

.admin__toast.show {
  transform: translateY(0);
  opacity: 1;
}

.admin__toast--error {
  background: var(--danger);
}

.admin__toast--success {
  background: var(--success);
}

/* ── Mobile overlay for sidebar ── */
.admin__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(12,31,23,0.4);
  z-index: 49;
}

.admin__overlay.open {
  display: block;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .admin__sidebar {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    z-index: 60;
  }

  .admin__sidebar.open {
    transform: translateX(0);
  }

  .admin__burger {
    display: flex;
  }

  .admin__content {
    padding: var(--s-4);
  }

  .admin__topbar {
    padding: var(--s-3) var(--s-4);
  }

  .admin__stats {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
  }

  .admin__stat {
    padding: var(--s-4);
    flex-direction: column;
    gap: var(--s-2);
  }

  .admin__stat-icon {
    width: 36px;
    height: 36px;
  }

  .admin__modal {
    max-width: 100%;
    margin: var(--s-4);
    max-height: 90vh;
  }
}

@media (min-width: 768px) {
  .admin__form-row {
    grid-template-columns: 1fr 1fr;
  }

  .admin__grid--2 {
    grid-template-columns: 2fr 1fr;
  }

  .admin__grid--3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAID COURSES & PAID DOWNLOADS  (added 2026-08-31)
   The buy call-to-action in the course hero, the locked rows in the lesson
   list, and the paywall panel that stands in for a lesson body the database
   has refused to hand over.
   ═══════════════════════════════════════════════════════════════════════════ */

.topic-buy {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-top: var(--s-6);
  padding: var(--s-4) var(--s-5);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--r-lg);
  background: rgba(212, 175, 55, 0.08);
}
.topic-buy__price {
  font-size: var(--f-h2);
  font-weight: 800;
  color: var(--gold);
  letter-spacing: -0.02em;
}
.topic-buy__note {
  flex: 1 1 14rem;
  margin: 0;
  font-size: var(--f-xs);
  color: rgba(255, 255, 255, 0.72);
}
.topic-buy--owned { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }

/* A locked lesson row: same shape as a real one, but it is not a link and it
   does not pretend to be clickable. */
.lesson-item--locked {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  cursor: not-allowed;
  opacity: 0.62;
}
.lesson-item--locked:hover { transform: none; }
.lesson-item--locked .lesson-item__status { color: var(--muted); display: flex; }

.lesson-paywall {
  text-align: center;
  padding: var(--s-8) var(--s-5);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--r-lg);
  background: rgba(212, 175, 55, 0.06);
  color: var(--gold);
}
.lesson-paywall h3 { margin: var(--s-3) 0 var(--s-2); font-size: var(--f-h3); }
.lesson-paywall p { color: var(--muted); max-width: 34rem; margin: 0 auto var(--s-5); }
.lesson-paywall__back { margin-top: var(--s-4); font-size: var(--f-xs); }
.lesson-paywall__back a { color: var(--muted); text-decoration: underline; }

/* ── The admin shell (js/gh_admin_shell.js) ──
   A sidebar link opens its page in a frame beside the sidebar. The frame is
   not on screen until the page inside it says it has arrived; from then on
   it stands where the first page's own content stood. */
.admin__frame { display: none; }
.admin--shell > .admin__frame { display: block; flex: 1; min-width: 0; border: 0; height: 100vh; height: 100dvh; }
.admin--shell > .admin__main { display: none; }
/* The page inside the frame: the sidebar beside it is the one that stays. */
.admin-embedded .admin__sidebar,
.admin-embedded .admin__overlay { display: none; }
/* The framed page is asking a question (css/gh_dialog.css): the sidebar is
   dimmed as the page is, by the scrim's own colour and at its pace. Fixed, so
   it covers the sidebar however far its list has scrolled; on a phone the
   sidebar is moved by a transform and the dim moves with it.
   design-taste-ok: the colour, the blur and the 0.18s are the scrim's, which css/gh_dialog.css keeps to itself. */
.admin--shell > .admin__sidebar::after {
  content: ''; position: fixed; top: 0; left: 0; width: inherit; height: 100vh; height: 100dvh;
  background: rgba(12,31,23,0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s var(--ease-out);
}
.admin--asked > .admin__sidebar::after { opacity: 1; }
/* On paper the frame has one width whatever the sheet, and is as tall as the
   page inside it is at that width (measured by the shell as printing starts,
   at this same width), so all of it is printed however its text rewraps. The
   width is an A4 sheet less half an inch each side and the 260px sidebar
   beside it; a sheet with less room has the whole print shrunk to fit. */
.admin--shell { --admin-frame-paper: calc(210mm - 1in - 260px); }
.admin--measuring > .admin__frame { flex: none; width: var(--admin-frame-paper); }
@media print {
  .admin--shell > .admin__frame { flex: none; width: var(--admin-frame-paper); height: var(--admin-frame-print, 100vh); }
}