/* ══════════════════════════════════════════════
   Wireless 101 — Design System
   Aesthetic: Technical Editorial
   ══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Libre+Franklin:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

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

:root {
  /* Core palette */
  --ink: #0f1b2d;
  --ink-light: #1a2d4a;
  --ink-muted: #2a3f5f;
  --amber: #e8a838;
  /* --amber is a BACKGROUND/BORDER/ACCENT colour only. As text on cream it is 1.96:1,
     which fails WCAG 1.4.3 for both normal (4.5:1) and large (3:1) text — section
     eyebrows and one link class were effectively invisible to low-vision readers on every
     index and landing page. --amber-text is the same hue and saturation darkened to
     4.93:1 on --cream and 4.64:1 on --paper, so it passes AA on both surfaces.
     Use --amber-text for any `color:` declaration on a light background.
     (The earlier focus-ring fix introduced --focus-ring at 4.00:1, which is enough for a
     2px outline under 1.4.11 but NOT for text; and the .badge-amber value #996a10 is
     4.48:1, which just misses 4.5:1.) */
  --amber-text: #926311;
  --amber-hot: #f5b731;
  --amber-pale: rgba(232, 168, 56, 0.1);
  --amber-glow: rgba(232, 168, 56, 0.06);
  /* Focus ring: a darkened amber that clears WCAG 1.4.11 (3:1) on BOTH grounds —
     4.0:1 on --cream and 4.07:1 on --ink — so one value works on light and dark
     surfaces without an override. Plain --amber is only 1.96:1 on cream. */
  --focus-ring: #a86f10;
  --cream: #faf8f4;
  --paper: #f4f1eb;
  --white: #ffffff;
  --sage: #7c9a8e;
  --sage-pale: rgba(124, 154, 142, 0.1);

  /* Text */
  --text: #1a1a1a;
  --text-secondary: #52596b;
  --text-tertiary: #717a8e;
  --text-on-dark: #e8e6e1;
  --text-on-dark-muted: rgba(255,255,255,0.65);

  /* Borders & surfaces */
  --border: #e2dfd8;
  --border-light: #ece9e2;
  --surface: #f7f5f0;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 27, 45, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 27, 45, 0.06);
  --shadow-md: 0 4px 20px rgba(15, 27, 45, 0.08);
  --shadow-lg: 0 8px 40px rgba(15, 27, 45, 0.1);
  --shadow-xl: 0 16px 64px rgba(15, 27, 45, 0.12);

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* Fonts */
  --font-display: 'Bricolage Grotesque', serif;
  --font-body: 'Libre Franklin', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Grain overlay (atmospheric texture) ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.025;
  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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

/* ── Skip link ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 10000;
  background: var(--ink);
  color: var(--cream);
  padding: 0.75rem 1.5rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 1rem;
}

/* ── Focus ── */
a:focus-visible,
button:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-amber:focus-visible,
.nav-cta:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── Layout ── */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 2rem;
}

section { padding: 6rem 2rem; }

/* ── Typography ── */
.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--amber-text);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.section-label::before,
.section-label::after {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--amber);
  opacity: 0.4;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── Navbar ── */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar.scrolled {
  padding: 0.75rem 2rem;
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 1px 0 var(--border);
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  letter-spacing: -0.01em;
}

.nav-logo img {
  height: 80px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
}

.nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s;
  position: relative;
}

.nav-links a:not(.nav-cta):hover { color: var(--ink); }

.nav-links a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--amber);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-links a:not(.nav-cta):hover::after { width: 100%; }

.nav-cta {
  background: var(--ink) !important;
  color: var(--cream) !important;
  padding: 0.55rem 1.4rem;
  border-radius: 100px;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  transition: all 0.25s !important;
  letter-spacing: 0.01em;
}

.nav-cta:hover {
  background: var(--ink-light) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 27, 45, 0.15);
}

.nav-cta::after { display: none !important; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Buttons ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ink);
  color: var(--cream);
  padding: 0.9rem 2rem;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.01em;
}

.btn-primary:hover {
  background: var(--ink-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 27, 45, 0.2);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--ink);
  padding: 0.9rem 2rem;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: all 0.25s;
}

.btn-secondary:hover {
  border-color: var(--ink);
  background: var(--white);
}

.btn-amber {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--amber);
  color: var(--ink);
  padding: 0.9rem 2rem;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  letter-spacing: 0.01em;
}

.btn-amber:hover {
  background: var(--amber-hot);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(232, 168, 56, 0.3);
}

.btn-sm {
  padding: 0.55rem 1.3rem;
  font-size: 0.85rem;
}

/* ── Cards ── */
.card {
  background: var(--white);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-xs);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border);
}

/* ── Badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.badge-navy { background: rgba(15, 27, 45, 0.08); color: var(--ink); }
.badge-amber { background: var(--amber-pale); color: #996a10; }
.badge-green { background: rgba(16, 185, 129, 0.08); color: #047857; }

/* ── Color dots ── */
.navy-dot { background: var(--ink); }
.amber-dot { background: var(--amber); }

/* ── Progress bar ── */
.progress-bar {
  height: 5px;
  background: var(--border-light);
  border-radius: 5px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-fill.navy { background: var(--ink); }
.progress-fill.amber { background: var(--amber); }
.progress-fill.green { background: #10b981; }

/* ── Footer ── */
.footer {
  border-top: 1px solid var(--border);
  padding: 4.5rem 2rem 2.5rem;
  background: var(--paper);
}

.footer-grid {
  display: grid;
  /* The brand gets an explicit track; every remaining column is IMPLICIT, so the layout
     adapts to however many there are. W1b-2 removed the Resources and Connect columns
     from 166 pages (every link in them pointed at one "Content Coming Soon" page), so
     most footers now carry brand + Courses, the two landing pages carry brand + Courses
     + a real Connect link, and some pages carry brand alone. The old fixed
     `2.5fr 1fr 1fr 1fr` left those pages pinned left with two empty tracks and 6rem of
     dead gap.
     NOT `repeat(auto-fit, minmax(150px, 1fr))`: auto-repeat may not be combined with a
     flexible (`fr`) track in the same track list, so that declaration is INVALID and the
     browser drops the whole line -- which silently collapsed the footer to one column and
     stacked it vertically at every width. Verified in a real browser, since the CSS
     looked right and `make check` stayed green. */
  grid-template-columns: 2.5fr;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  gap: 3rem;
  max-width: 1120px;
  margin: 0 auto 3rem;
}

.footer-brand-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-brand-name img {
  height: 64px;
  width: auto;
}

.footer-brand p {
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.65;
  max-width: 280px;
}

.footer-col-title {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-tertiary);
  margin-bottom: 1.25rem;
}

.footer-col a {
  display: block;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  padding: 0.3rem 0;
  transition: color 0.2s;
}

.footer-col a:hover { color: var(--amber-text); }

.footer-bottom {
  text-align: center;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-tertiary);
  max-width: 1120px;
  margin: 0 auto;
}

/* ── Entrance animations ── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.1s; }
.stagger-3 { transition-delay: 0.15s; }
.stagger-4 { transition-delay: 0.2s; }
.stagger-5 { transition-delay: 0.25s; }
.stagger-6 { transition-delay: 0.3s; }

/* ── Responsive: shared ── */
@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(250, 248, 244, 0.98);
    backdrop-filter: blur(16px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
  }

  .nav-links.open { display: flex; }
  .nav-links a { font-size: 1.2rem; color: var(--ink); }
  .nav-links a::after { display: none; }
  .hamburger { display: flex; z-index: 1001; }

  /* An 80px logo made the navbar 120px tall — on a 390px-wide phone that is
     roughly a third of the fold spent on chrome, and it is what forced the
     landing page's icon rail to collide with it. 52px keeps the mark legible and
     brings the navbar to 92px. landing.css derives --nav-h from this number, so
     changing it here means changing it there too. */
  .nav-logo img { height: 52px; }
  .navbar { padding: 1.25rem 1.15rem; }
  .navbar.scrolled { padding: 0.75rem 1.15rem; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    /* back to row flow: the base rule sets `grid-auto-flow: column`, which would keep
       laying columns out sideways and defeat this two-up stack */
    grid-auto-flow: row;
    gap: 2rem;
  }

  .footer-brand { grid-column: 1 / -1; }

  section { padding: 4rem 1.5rem; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; grid-auto-flow: row; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   Honours the OS setting, and mirrors it under a manual .animations-off
   class on <body> so a user-facing toggle is one classList.toggle away.

   Neutralised, by name:
     landing.css loops     pulse-beacon (:51)  orbit-spin (:118, :143)
                           float-a (:190, :212)  float-b (:201, :221)
     story-slide loops     orbDrift1, orbDrift2, eqBar, e1, e2, e3, e4,
                           shimmer, pulse, pulse-dot
     story-slide entrances fadeUp, fadeIn, fadeSlideIn, popIn, cardSlideUp,
                           titleReveal, eqReveal, barReveal, scaleIn,
                           pulseGlow, slideInLeft, slideInRight
     GenAI-101             attnLineDraw, attnLineDrawMed, attnLineDrawWeak,
                           attnGlow, attnHighlight, nnPulseTravel, nnFadeIn,
                           neuronPulse2, mlpPulse, mlpPop, mlGlow,
                           perceptronFlow, drawLine, blink, float-icon
     theme.css             .fade-up transition (:481), scroll-behavior (:56)

   The universal selector covers every keyframe by construction, so this block
   does not need updating when a new animation is added — which is the point.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto !important; }   /* overrides theme.css:56 */

  /* Collapse all timed motion. Durations go to 0.01ms rather than 0 so that
     any transitionend/animationend listener added in future still fires. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  /* Continuous decorative loops: stop outright rather than snap to the end
     frame, which for a drift or spin is an arbitrary offset. */
  .hero-eyebrow::before,
  .hero-visual-orbit, .hero-visual-orbit-2,
  .hero-float-1, .hero-float-2, .hero-float-3, .hero-float-4,
  .s.on .orb-1, .s.on .orb-2,
  .eq.on span, .eq.on span:nth-child(1), .eq.on span:nth-child(2),
  .eq.on span:nth-child(3), .eq.on span:nth-child(4),
  .pulse-dot, .pulse-dot::after,
  .ntp-prompt .ntp-cursor,
  .reveal .slides section.present .nn-diagram .nn-pulse,
  .reveal .slides section.present .attn-word.highlight,
  .reveal .slides section.present .ml-flow-diagram .mlrow .ml-flow-glow,
  .ptron2-svg .out-ring.fired {
    animation: none !important;
  }

  /* Decorative orbs and floats: hold their rest position and stay visible. */
  .orb, .orb-1, .orb-2,
  .hero-float-1, .hero-float-2, .hero-float-3, .hero-float-4 {
    transform: none !important;
  }

  /* The audio equaliser is a state indicator, not decoration — keep it
     legible as a static set of bars rather than hiding it. */
  .eq.on span { height: 3px !important; }

  /* .fade-up is a transition, not a keyframe (theme.css:481). Reveal it
     unconditionally so content is readable even if the IntersectionObserver
     never fires. */
  .fade-up,
  .fade-up.visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Progress fill is a timing indicator, not motion — keep it. Its duration
     is set inline from JS (`cf.style.transition = 'width ' + audio.duration
     + 's linear'`), and an author !important rule would otherwise outrank
     that inline style and snap the bar to 100%. */
  .progress-fill,
  .topbar-pfill {
    transition-property: width !important;
    transition-duration: inherit;
    transition-timing-function: linear !important;
  }

  /* Parallax / sticky effects that read as motion while scrolling. */
  [data-parallax] { transform: none !important; }
}

/* ── Manual escape hatch: body.animations-off ──────────────────────────────
   Identical effect, no media query. Wire to a toggle with
   document.body.classList.toggle('animations-off').
   Kept as a separate block rather than a comma-joined selector list so the
   media query above stays readable and so neither can silently break the
   other.                                                                   */
body.animations-off,
body.animations-off *,
body.animations-off *::before,
body.animations-off *::after {
  animation-duration: 0.01ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

body.animations-off .hero-eyebrow::before,
body.animations-off .hero-visual-orbit,
body.animations-off .hero-visual-orbit-2,
body.animations-off [class^="hero-float-"],
body.animations-off .s.on .orb-1,
body.animations-off .s.on .orb-2,
body.animations-off .eq.on span,
body.animations-off .pulse-dot,
body.animations-off .pulse-dot::after {
  animation: none !important;
}

body.animations-off .fade-up,
body.animations-off .fade-up.visible {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

body.animations-off .progress-fill,
body.animations-off .topbar-pfill {
  transition-property: width !important;
  transition-duration: inherit;
  transition-timing-function: linear !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ACRONYM GLOSSARY — article pages
   Behaviour: glossary-article.js. Data: courses/{id}/acronyms.js (shared EN/AR).
   Lives here rather than inline because articles link theme.css — the story
   decks have to inline their copy only because they are self-contained.
   Logical properties throughout (inset-inline-end, padding-inline) so the RTL
   sheet needs almost nothing. Motion is covered by the blanket
   prefers-reduced-motion rule above; do not add a second guard.
   ══════════════════════════════════════════════════════════════════════════ */

.ag-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;                 /* 44px touch target, as on the decks */
  margin-inline-start: 0.75rem;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--white); color: var(--text-secondary);
  cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ag-btn:hover { background: var(--surface); color: var(--ink); border-color: var(--ink-muted); }
.ag-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
              stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ag-btn[aria-expanded="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }

.ag-scrim {
  position: fixed; inset: 0; z-index: 998;
  background: rgba(15, 27, 45, 0.35);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.ag-scrim.on { opacity: 1; pointer-events: auto; }

.ag-panel {
  position: fixed; top: 0; inset-inline-end: 0; z-index: 999;
  width: min(420px, 92vw); height: 100%;
  display: flex; flex-direction: column;
  background: var(--cream); color: var(--text);
  border-inline-start: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
  transform: translateX(110%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
html[dir="rtl"] .ag-panel { transform: translateX(-110%); }
.ag-panel.on { transform: translateX(0); }

.ag-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--border-light);
}
.ag-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.ag-x {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--text-secondary); border-radius: var(--r-sm);
}
.ag-x:hover { background: var(--surface); color: var(--ink); }

.ag-search { padding: 0.9rem 1.25rem 0.6rem; }
.ag-search input {
  width: 100%; box-sizing: border-box;
  padding: 0.6rem 0.75rem; font: inherit; font-size: 0.9rem;
  color: var(--text); background: var(--white);
  border: 1px solid var(--border); border-radius: var(--r-sm);
}
.ag-search input::placeholder { color: var(--text-tertiary); }
.ag-count { margin: 0.45rem 0 0; font-size: 0.75rem; color: var(--text-secondary); }

.ag-list { flex: 1 1 auto; overflow-y: auto; padding: 0.25rem 1.25rem 1.5rem; }
.ag-item { padding: 0.9rem 0; border-bottom: 1px solid var(--border-light); }
.ag-item:last-child { border-bottom: none; }
.ag-a {
  margin: 0 0 0.35rem; font-size: 0.95rem; font-weight: 700; color: var(--ink);
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
}
.ag-full { font-size: 0.8rem; font-weight: 500; color: var(--amber-text); }
.ag-what { margin: 0 0 0.4rem; font-size: 0.85rem; line-height: 1.6; color: var(--text); }
.ag-ex {
  margin: 0; font-size: 0.8rem; line-height: 1.6; color: var(--text-secondary);
  border-inline-start: 2px solid var(--amber); padding-inline-start: 0.65rem;
}
.ag-none { margin: 1rem 0; font-size: 0.875rem; color: var(--text-secondary); }
.ag-list mark { background: var(--amber-pale); color: var(--ink); font-weight: 700; padding: 0 1px; }

@media (max-width: 480px) { .ag-panel { width: 100vw; } }

/* ═══ LESSON BREADCRUMB ═════════════════════════════════════════════════════
   The lesson-hero breadcrumb. Every article page inlines these three rules in
   its own <style> block -- roughly 330 duplicated copies -- and they are NOT
   here, which is why 74 lesson articles that used a bare
   `<nav style="margin-bottom:1.5rem">` with hand-written inline colours had no
   breadcrumb styling to fall back on at all (wrl101 70 of them, la101 2,
   ml101 2; every other course was already class-based).
   Declared here so the markup fix needs no per-file CSS. The existing inline
   copies still win the cascade -- an article's <style> block comes after this
   file's <link> -- so nothing that already rendered correctly changes.
   RTL is already handled: theme-rtl.css carries `html[dir="rtl"] .breadcrumb`,
   which the bare <nav> could never match. That is the real reason the AR files
   in this set were broken and not merely unstyled. */
.lesson-hero .breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.lesson-hero .breadcrumb a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.2s;
}
.lesson-hero .breadcrumb a:hover { color: #fff; }