/* ==================================================================
   LAERD MATHEMATICS — shared design system
   Single source of truth for every page (index, intro, Q&A).
   Tokens are WCAG-verified:
     *-text >= 4.5:1 on white (AA, the Standard theme)
     *-deep >= 7:1 on white (used by the High-contrast theme)
   The html element carries theme-aa or theme-aaa, set server-side
   by PHP from the lm-theme cookie / ?theme= parameter and synced
   client-side by lm-boot.js.
================================================================== */

    @font-face {
      font-family: "Montserrat";
      src: url("/fonts/montserrat-v1.woff2") format("woff2-variations");
      font-weight: 400 700;
      font-style: normal;
      font-display: swap;
    }

    /* ============================================================
       DESIGN TOKENS — Laerd Mathematics brand
       Every value below is verified against WCAG 2.2:
       *-text  ≥ 4.5:1 on white (AA normal text)
       *-deep  ≥ 7:1   on white (AAA, used by the high-contrast theme)
       *-tint  ≥ 17:1  with ink text on top
    ============================================================ */
    :root,
    html.theme-aa {
      --ink:            #0B0C0C;
      --ink-2:          #3A3F41;   /* brand subtitle grey, 10.7:1 on white */
      --paper:          #FFFFFF;
      --border:         #D5D9DC;
      --border-strong:  #3A3F41;

      --blue:           #338ECA;   /* brand anchor — graphics & large text only */
      --blue-text:      #2D7CB1;   /* 4.5:1 */
      --blue-deep:      #225D85;   /* 7.1:1 */
      --blue-tint:      #EFF6FB;

      --violet:         #7B5BC9;   /* 5.0:1 — passes AA as-is */
      --violet-text:    #7B5BC9;
      --violet-deep:    #643FBE;
      --violet-tint:    #F4F2FB;

      --teal:           #2BB3A3;
      --teal-text:      #208479;
      --teal-deep:      #18635B;
      --teal-tint:      #EEF9F8;

      --amber:          #E8A33D;
      --amber-text:     #A46A14;   /* warm bronze */
      --amber-deep:     #7B500F;
      --amber-tint:     #FDF8EF;

      --magenta:        #C04A8E;   /* 4.6:1 — passes AA as-is */
      --magenta-text:   #C04A8E;
      --magenta-deep:   #95346C;
      --magenta-tint:   #FAF1F6;

      --focus:          #FFDD00;
      --focus-ink:      #0B0C0C;

      --grid-line:      #DCEAF5;   /* decorative squared-paper line */

      --font: "Montserrat", Arial, sans-serif;
      --fs-s:    0.875rem;
      --fs-base: 1rem;
      --fs-l:    1.125rem;
      --fs-xl:   1.375rem;
      --fs-xxl:  1.875rem;
      --fs-hero: 2.375rem;
      --lh:      1.55;
      --lh-tight:1.25;

      --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem;  --sp-4: 1rem;
      --sp-5: 1.25rem;  --sp-6: 1.5rem;  --sp-8: 2rem;     --sp-10: 2.5rem;
      --sp-12: 3rem;    --sp-16: 4rem;

      --target-min: 44px;          /* universal — not behind pointer queries */
      --container: 1100px;
    }

    /* High contrast & larger text — same structure, different tokens */
    html.theme-aaa {
      --ink:            #000000;
      --ink-2:          #1F2425;
      --border:         #3A3F41;

      --blue-text:      var(--blue-deep);
      --violet-text:    var(--violet-deep);
      --teal-text:      var(--teal-deep);
      --amber-text:     var(--amber-deep);
      --magenta-text:   var(--magenta-deep);

      --grid-line:      transparent;   /* remove decorative texture */

      --fs-s:    1rem;
      --fs-base: 1.125rem;
      --fs-l:    1.25rem;
      --fs-xl:   1.5rem;
      --fs-xxl:  2.125rem;
      --fs-hero: 2.625rem;
      --lh:      1.65;
      --lh-tight:1.3;

      --sp-4: 1.25rem;  --sp-6: 1.75rem;  --sp-8: 2.5rem;
    }

    /* ============================================================
       BASE
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; }

    html {
      font-family: var(--font);
      color: var(--ink);
      background: var(--paper);
      -webkit-text-size-adjust: 100%;
    }

    body {
      margin: 0;
      font-size: var(--fs-base);
      line-height: var(--lh);
      color: var(--ink);
      background: var(--paper);
    }

    h1, h2, h3 {
      font-weight: 650;
      line-height: var(--lh-tight);
      color: var(--ink);
      margin: 0 0 var(--sp-4);
      letter-spacing: -0.01em;
    }
    h1 { font-size: var(--fs-hero); }
    h2 { font-size: var(--fs-xxl); }
    h3 { font-size: var(--fs-xl); }

    p { margin: 0 0 var(--sp-4); }

    a {
      color: var(--blue-text);
      text-decoration: underline;
      text-underline-offset: 0.18em;
    }
    a:hover { color: var(--blue-deep); text-decoration-thickness: 3px; }

    img, svg { vertical-align: middle; }

    ul, ol { margin: 0; padding: 0; }

    .container {
      max-width: var(--container);
      margin: 0 auto;
      padding-left: var(--sp-6);
      padding-right: var(--sp-6);
    }

    .visually-hidden {
      position: absolute !important;
      width: 1px; height: 1px;
      margin: -1px; padding: 0; border: 0;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    /* ============================================================
       FOCUS — gold flag + ink ring (visible on any background)
    ============================================================ */
    :focus-visible {
      outline: 3px solid var(--focus-ink);
      outline-offset: 0;
      background-color: var(--focus);
      color: var(--focus-ink) !important;
      box-shadow: 0 -2px var(--focus), 0 4px var(--focus-ink);
      text-decoration: none;
    }

    /* ============================================================
       SKIP LINK
    ============================================================ */
    .skip-link {
      position: absolute;
      top: -999px; left: 0;
      z-index: 9999;
      background: var(--focus);
      color: var(--focus-ink);
      font-weight: 600;
      padding: var(--sp-3) var(--sp-4);
      text-decoration: none;
    }
    .skip-link:focus { top: 0; }

    .site-search__input:focus-visible {
      background: var(--paper);
      color: var(--ink) !important;
      outline: 3px solid var(--focus-ink);
      outline-offset: 0;
      box-shadow: 0 0 0 3px var(--focus);
    }

    /* ============================================================
       PROGRESSIVE ENHANCEMENT VISIBILITY
    ============================================================ */
    .js-only { display: none; }
    /* Every .js-only element in this page is a flex button */
    html.js-enhanced .js-only { display: inline-flex; }
    html.js-enhanced .no-js-only { display: none; }

    /* ============================================================
       HEADER / MASTHEAD
    ============================================================ */
    .masthead { position: relative; background: var(--paper); }

    /* Row 1 — identity + Display control (same DOM order on every page,
       WCAG 3.2.3 Consistent Navigation) */
    .masthead__top-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-6);
      flex-wrap: wrap;
      padding-top: var(--sp-4);
      padding-bottom: var(--sp-4);
    }
    .logo-link {
      display: inline-flex;
      align-items: center;
      min-height: var(--target-min);
    }
    .logo { display: block; height: 96px; width: 257px; } /* 835:312 lockup */

    /* Row 2 — primary navigation + search, bound to the content below */
    .masthead__navrow {
      /* No separator above the menu — whitespace does the work.
         The blue base rule closes the header; remove border-bottom
         too if an even quieter top-of-page is preferred. */
      background: var(--paper);
      border-bottom: 4px solid var(--blue);
    }

    /* Primary nav */
    .site-nav { display: flex; align-items: center; }
    .site-nav__list {
      list-style: none;
      display: flex;
      align-items: center;
      gap: var(--sp-2);
    }
    .site-nav__link,
    .site-nav__disclosure {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-2);
      min-height: 56px;
      padding: var(--sp-2) var(--sp-4) var(--sp-3);
      font: inherit;
      font-weight: 650;
      font-size: var(--fs-xl);
      color: var(--ink);
      text-decoration: none;
      background: transparent;
      border: none;
      border-bottom: 4px solid transparent;
      cursor: pointer;
    }
    .site-nav__link:hover,
    .site-nav__disclosure:hover {
      color: var(--blue-deep);
      border-bottom-color: var(--blue);
    }
    .site-nav__chevron { width: 18px; height: 18px; }
    .site-nav__disclosure[aria-expanded="true"] {
      border-bottom-color: var(--blue);
      color: var(--blue-deep);
    }
    .site-nav__disclosure[aria-expanded="true"] .site-nav__chevron {
      transform: rotate(180deg);
    }

    /* Disclosure panel — static links, present in initial HTML */
    .topics-panel {
      position: absolute;
      left: 0; right: 0;
      top: 100%;
      background: var(--paper);
      border-bottom: 4px solid var(--blue);
      box-shadow: 0 12px 24px rgba(11, 12, 12, 0.12);
      z-index: 50;
    }
    .topics-panel[hidden] { display: none; }
    .topics-panel__inner {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: var(--sp-8);
      padding-top: var(--sp-8);
      padding-bottom: var(--sp-8);
    }
    .topics-panel__group { list-style: none; }
    .topics-panel__section-link {
      display: inline-flex;
      align-items: center;
      min-height: var(--target-min);
      font-weight: 650;
      font-size: var(--fs-l);
      text-decoration: none;
      border-bottom: 3px solid currentColor;
      margin-bottom: var(--sp-3);
    }
    .topics-panel__section-link:hover { text-decoration: underline; }
    .topics-panel__sublist { list-style: none; }
    .topics-panel__sublist a {
      display: inline-flex;
      align-items: center;
      min-height: var(--target-min);
      padding: var(--sp-1) 0;
      color: var(--ink);
      text-decoration: none;
    }
    .topics-panel__sublist a:hover {
      color: var(--blue-deep);
      text-decoration: underline;
    }

    /* Section accent colours — always paired with the label, never alone */
    .accent-violet  { color: var(--violet-text); }
    .accent-teal    { color: var(--teal-text); }
    .accent-amber   { color: var(--amber-text); }
    .accent-magenta { color: var(--magenta-text); }

    .masthead__navrow-inner {
      display: flex;
      align-items: flex-end;       /* nav sits on the blue rule */
      gap: var(--sp-4);
      flex-wrap: wrap;
      padding-top: var(--sp-3);
      padding-bottom: 0;
    }

    /* Search — floats just above the rule the nav sits on */
    .site-search {
      display: flex;
      margin-left: auto;
      margin-bottom: var(--sp-3);
    }
    .site-search__input {
      font: inherit;
      font-size: var(--fs-s);
      color: var(--ink);
      min-height: var(--target-min);
      width: 13rem;
      max-width: 40vw;
      padding: var(--sp-2) var(--sp-3);
      border: 2px solid var(--border-strong);
      border-right: none;
      background: var(--paper);
    }
    .site-search__input::placeholder { color: var(--ink-2); opacity: 1; }
    .site-search__submit {
      font: inherit;
      font-weight: 600;
      font-size: var(--fs-s);
      min-height: var(--target-min);
      min-width: var(--target-min);
      padding: var(--sp-2) var(--sp-4);
      border: 2px solid var(--blue-text);
      background: var(--blue-text);
      color: #FFFFFF;
      cursor: pointer;
    }
    .site-search__submit:hover { background: var(--blue-deep); border-color: var(--blue-deep); }

    /* Display (theme) control */
    .display-control {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
    }
    .display-control__label {
      font-size: var(--fs-s);
      font-weight: 600;
      color: var(--ink-2);
    }
    .display-control__option {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: var(--target-min);
      padding: var(--sp-1) var(--sp-3);
      font: inherit;
      font-size: var(--fs-s);
      font-weight: 500;
      color: var(--ink-2);
      background: transparent;
      border: 1px solid var(--border);
      text-decoration: none;
      cursor: pointer;
    }
    .display-control__option:hover { border-color: var(--ink-2); color: var(--ink); }
    /* Active state driven by the html theme class, so links and buttons
       share one source of truth */
    html.theme-aa  .display-control__option[data-theme="aa"],
    html.theme-aaa .display-control__option[data-theme="aaa"] {
      /* 1px border + 1px inset ring = 2px outline, no layout shift */
      border-color: var(--ink);
      box-shadow: inset 0 0 0 1px var(--ink);
      color: var(--ink);
      font-weight: 600;
    }

    /* ============================================================
       HERO — squared exercise-book paper, the material of the subject
    ============================================================ */
    .hero {
      background:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
      background-size: 28px 28px;
      background-color: var(--paper);
      border-bottom: 1px solid var(--border);
    }
    .hero__inner {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      gap: var(--sp-12);
      align-items: center;
      padding-top: var(--sp-16);
      padding-bottom: var(--sp-16);
    }
    .hero h1 { margin-bottom: var(--sp-5); max-width: 22ch; }
    .hero__lede {
      font-size: var(--fs-l);
      color: var(--ink-2);
      max-width: 46ch;
      margin-bottom: var(--sp-8);
    }
    .hero__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: var(--target-min);
      padding: var(--sp-3) var(--sp-6);
      font: inherit;
      font-weight: 650;
      text-decoration: none;
      border: 2px solid transparent;
      cursor: pointer;
    }
    .button--primary {
      background: var(--blue-text);
      color: #FFFFFF;
      border-color: var(--blue-text);
    }
    .button--primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: #FFFFFF; }
    .button--secondary {
      background: var(--paper);
      color: var(--ink);
      border-color: var(--ink);
    }
    .button--secondary:hover { background: var(--blue-tint); }
    html.theme-aaa .button--secondary:hover { background: var(--paper); }  /* [RF L3] */

    /* Hero demo — a real, working solution reveal */
    .hero-demo {
      background: var(--paper);
      border: 1px solid var(--border-strong);
      border-top: 6px solid var(--blue);
      box-shadow: 6px 6px 0 var(--blue-tint);
      padding: var(--sp-6);
    }
    html.theme-aaa .hero-demo { box-shadow: none; }  /* AAA strips decorative tints [RF L3] */
    .hero-demo__tag {
      font-size: var(--fs-s);
      font-weight: 650;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--blue-text);
      margin-bottom: var(--sp-3);
    }
    .hero-demo__q {
      font-size: var(--fs-l);
      font-weight: 500;
      margin-bottom: var(--sp-5);
    }
    .hero-demo__solution {
      border: 1px solid var(--border);
      border-left: 4px solid var(--teal-text);
    }
    .hero-demo__solution summary {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      min-height: var(--target-min);
      padding: var(--sp-3) var(--sp-4);
      font-weight: 650;
      cursor: pointer;
      background: var(--teal-tint);
      list-style: none;
    }
    html.theme-aaa .hero-demo__solution summary { background: var(--paper); }  /* [RF L3] */
    .hero-demo__solution summary::-webkit-details-marker { display: none; }
    .hero-demo__solution summary::before {
      content: "";
      width: 0; height: 0;
      border-left: 8px solid var(--teal-text);
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      flex-shrink: 0;
    }
    .hero-demo__solution[open] summary::before {
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 8px solid var(--teal-text);
      border-bottom: none;
    }
    .hero-demo__steps {
      list-style: none;
      counter-reset: step;
      padding: var(--sp-4) var(--sp-5);
      border-top: 1px solid var(--border);
    }
    .hero-demo__steps li {
      counter-increment: step;
      display: flex;
      gap: var(--sp-3);
      margin-bottom: var(--sp-3);
    }
    .hero-demo__steps li::before {
      content: counter(step);
      content: counter(step) / "";   /* alt-text-empty: stops double announce [RF L2] */
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.6rem; height: 1.6rem;
      background: var(--teal-text);
      color: #FFFFFF;
      font-size: var(--fs-s);
      font-weight: 650;
    }
    .hero-demo__answer { font-weight: 650; color: var(--teal-text); }

    /* ============================================================
       HOW IT WORKS — a genuine sequence, hence numbered
    ============================================================ */
    .how {
      padding-top: var(--sp-12);
      padding-bottom: var(--sp-12);
    }
    .how h2 { text-align: center; }
    .how__lede {
      text-align: center;
      color: var(--ink-2);
      max-width: 52ch;
      margin: 0 auto var(--sp-10);
    }
    .how__steps {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: var(--sp-6);
      counter-reset: how;
    }
    .how__step {
      counter-increment: how;
      border: 1px solid var(--border);
      padding: var(--sp-6);
      background: var(--paper);
    }
    .how__step::before {
      content: counter(how);
      content: counter(how) / "";    /* alt-text-empty: stops double announce [RF L2] */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.25rem; height: 2.25rem;
      background: var(--blue-text);
      color: #FFFFFF;
      font-weight: 650;
      margin-bottom: var(--sp-4);
    }
    .how__step h3 { font-size: var(--fs-l); margin-bottom: var(--sp-3); }
    .how__step p { color: var(--ink-2); font-size: var(--fs-s); margin: 0; }

    /* ============================================================
       TOPIC SECTIONS — four cards, accent spine + icon + label
       (colour is never the only differentiator)
    ============================================================ */
    .topics {
      padding-top: var(--sp-10);
      padding-bottom: var(--sp-16);
    }
    .topics h2 { text-align: center; }
    .topics__lede {
      text-align: center;
      color: var(--ink-2);
      max-width: 56ch;
      margin: 0 auto var(--sp-10);
    }
    .topics__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: var(--sp-6);
    }
    .topic-card {
      border: 1px solid var(--border);
      border-left: 6px solid var(--accent, var(--blue));
      background: var(--paper);
      padding: var(--sp-6);
      display: flex;
      flex-direction: column;
    }
    /* --accent-tint is set by these carriers but not yet consumed:
       RESERVED for the post-deployment colour-enhancement pass
       (Handoff backlog; content-pass register). Do not remove. [RF N1] */
    .lm-section--violet,
    .topic-card--violet  { --accent: var(--violet);  --accent-text: var(--violet-text);  --accent-tint: var(--violet-tint); }
    .lm-section--teal,
    .topic-card--teal    { --accent: var(--teal);    --accent-text: var(--teal-text);    --accent-tint: var(--teal-tint); }
    .lm-section--amber,
    .topic-card--amber   { --accent: var(--amber);   --accent-text: var(--amber-text);   --accent-tint: var(--amber-tint); }
    .lm-section--magenta,
    .topic-card--magenta { --accent: var(--magenta); --accent-text: var(--magenta-text); --accent-tint: var(--magenta-tint); }

    .topic-card__icon {
      width: 48px; height: 48px;
      margin-bottom: var(--sp-4);
    }
    .topic-card__icon .i-a      { stroke: var(--accent-text); }
    .topic-card__icon .i-a-fill { fill:   var(--accent-text); }
    .topic-card__icon .i-b      { stroke: var(--blue-text); }
    .topic-card__icon .i-b-fill { fill:   var(--blue-text); }
    .topic-card__title { margin-bottom: var(--sp-2); }
    .topic-card__title a {
      color: var(--accent-text);
      text-decoration: none;
    }
    .topic-card__title a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
    .topic-card__meta {
      font-size: var(--fs-s);
      font-weight: 600;
      color: var(--ink-2);
      margin-bottom: var(--sp-4);
    }
    .topic-card__desc {
      color: var(--ink-2);
      font-size: var(--fs-s);
      margin-bottom: var(--sp-4);
    }
    .topic-card__list {
      list-style: none;
      margin-top: auto;
      border-top: 1px solid var(--border);
      padding-top: var(--sp-3);
    }
    .topic-card__list a {
      display: inline-flex;
      align-items: center;
      min-height: var(--target-min);
      color: var(--ink);
      text-decoration: none;
      padding: var(--sp-1) 0;
    }
    .topic-card__list a:hover {
      color: var(--accent-text);
      text-decoration: underline;
    }
    .topic-card__list .q-count {
      font-size: var(--fs-s);
      color: var(--ink-2);
      margin-left: var(--sp-2);
    }

    /* ============================================================
       FOOTER
    ============================================================ */
    .site-footer {
      background: var(--blue-tint);
      border-top: 4px solid var(--blue);
      margin-top: var(--sp-8);
    }
    html.theme-aaa .site-footer { background: var(--paper); }
    .site-footer__inner {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      gap: var(--sp-10);
      padding-top: var(--sp-10);
      padding-bottom: var(--sp-10);
    }
    .site-footer h2 {
      font-size: var(--fs-s);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink-2);
      margin-bottom: var(--sp-4);
    }
    .site-footer__nav ul { list-style: none; }
    .site-footer__nav a,
    .site-footer__share a {
      display: inline-flex;
      align-items: center;
      min-height: var(--target-min);
      color: var(--ink);
      text-decoration: none;
    }
    .site-footer__nav a:hover,
    .site-footer__share a:hover { color: var(--blue-deep); text-decoration: underline; }
    .site-footer__about p { color: var(--ink-2); font-size: var(--fs-s); }
    .site-footer__share ul { list-style: none; }
    .legal {
      background: var(--ink);
      color: #FFFFFF;
    }
    .legal__inner {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-2) var(--sp-8);
      align-items: center;
      padding-top: var(--sp-2);
      padding-bottom: var(--sp-2);
      font-size: var(--fs-s);
    }
    .legal a {
      color: #FFFFFF;
      display: inline-flex;
      align-items: center;
      min-height: var(--target-min);
    }
    .legal a:hover { color: #FFFFFF; }  /* explicit: don't rely on source order vs a:hover [RF N2] */

    /* ============================================================
       MOTION — opt in only when the user has not asked otherwise
    ============================================================ */
    @media (prefers-reduced-motion: no-preference) {
      .site-nav__chevron { transition: transform 0.2s ease; }
      .site-nav__link, .site-nav__disclosure,
      .button, .display-control__option,
      .topic-card__list a { transition: background 0.15s, color 0.15s, border-color 0.15s; }
    }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width: 960px) {
      .hero__inner { grid-template-columns: 1fr; gap: var(--sp-8); padding-top: var(--sp-10); padding-bottom: var(--sp-10); }
      .site-footer__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
    }
    @media (max-width: 760px) {
      .masthead__top-inner { gap: var(--sp-3); }
      .logo { height: 60px; width: 161px; }
      .site-search { width: 100%; margin-left: 0; }
      .site-search__input { width: 100%; max-width: none; }
      .topics-panel__inner { grid-template-columns: 1fr; gap: var(--sp-5); max-height: 70vh; overflow-y: auto; }
    }

        /* ============================================================
       PER-SECTION ACCENT
       Content components read --acc-* (question side) and --acc-sol-*
       (solution side). Defaults reproduce the approved look (blue
       question, teal solution). A class on <body> — set by the pipeline
       from the question's section — carries that section's colour
       through its pages. Site chrome (header, breadcrumb, footer)
       always stays brand blue. The AAA theme is automatic: *-text
       tokens remap to *-deep, and the existing tint-stripping rules
       still apply.
    ============================================================ */
    :root {
      --acc:          var(--blue);
      --acc-text:     var(--blue-text);
      --acc-deep:     var(--blue-deep);
      --acc-tint:     var(--blue-tint);
      --acc-sol-text: var(--teal-text);
      --acc-sol-tint: var(--teal-tint);
    }
    .lm-accent-violet {
      --acc: var(--violet); --acc-text: var(--violet-text);
      --acc-deep: var(--violet-deep); --acc-tint: var(--violet-tint);
      --acc-sol-text: var(--violet-text); --acc-sol-tint: var(--violet-tint);
    }
    .lm-accent-teal {
      --acc: var(--teal); --acc-text: var(--teal-text);
      --acc-deep: var(--teal-deep); --acc-tint: var(--teal-tint);
      --acc-sol-text: var(--teal-text); --acc-sol-tint: var(--teal-tint);
    }
    .lm-accent-amber {
      --acc: var(--amber); --acc-text: var(--amber-text);
      --acc-deep: var(--amber-deep); --acc-tint: var(--amber-tint);
      --acc-sol-text: var(--amber-text); --acc-sol-tint: var(--amber-tint);
    }
    .lm-accent-magenta {
      --acc: var(--magenta); --acc-text: var(--magenta-text);
      --acc-deep: var(--magenta-deep); --acc-tint: var(--magenta-tint);
      --acc-sol-text: var(--magenta-text); --acc-sol-tint: var(--magenta-tint);
    }

/* ============================================================
       CONTENT PAGES (intro + Q&A)
    ============================================================ */
    .lm-content {
      max-width: 50rem;          /* comfortable reading measure */
      padding-top: var(--sp-8);
      padding-bottom: var(--sp-10);
    }

    /* Plain content lists (prose pages; any list not using an lm-
       component). Scoped to unclassed lists so lm-* components, which
       manage their own list styling, are untouched. Restores the
       padding removed by the global reset so markers don't hang into
       the margin. (Found by the quadratic-formula cutover batch.) */
    .lm-content ul:not([class]),
    .lm-content ol:not([class]) {
      padding-left: 1.5rem;
      margin-bottom: var(--sp-4);
    }
    .lm-content ul:not([class]) { list-style: disc; }
    .lm-content ol:not([class]) { list-style: decimal; }
    .lm-content ul:not([class]) li,
    .lm-content ol:not([class]) li { margin-bottom: var(--sp-2); }

    .lm-section-tag {
      display: inline-block;
      font-size: var(--fs-s);
      font-weight: 650;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--acc-text);
      margin: 0 0 var(--sp-2);
    }

    .lm-page-meta {
      display: flex;
      align-items: center;
      gap: var(--sp-4);
      flex-wrap: wrap;
      margin-bottom: var(--sp-2);
    }
    .lm-question-number {
      font-size: var(--fs-s);
      font-weight: 600;
      color: var(--ink-2);
      border: 1px solid var(--border);
      padding: var(--sp-1) var(--sp-3);
    }

    /* ============================================================
       BREADCRUMB
    ============================================================ */
    .lm-breadcrumb-nav {
      background: var(--paper);
      border-bottom: 1px solid var(--border);
    }
    .lm-breadcrumb {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0 var(--sp-2);
      font-size: var(--fs-s);
    }
    .lm-breadcrumb__item {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-2);
    }
    .lm-breadcrumb__link {
      display: inline-flex;
      align-items: center;
      min-height: var(--target-min);
      color: var(--blue-text);
    }
    .lm-breadcrumb__link:hover { color: var(--blue-deep); }
    .lm-breadcrumb__separator { color: var(--ink-2); }
    .lm-breadcrumb__current { color: var(--ink); }

    /* ============================================================
       PAGE NAVIGATION (Intro · 1 · 2 … N · prev/next)
       The current page stays a real link (aria-current="page"),
       fully clickable — no pointer-events tricks.
    ============================================================ */
    .lm-page-nav {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      flex-wrap: wrap;
      margin: var(--sp-6) 0;
    }
    .lm-page-nav__label {
      font-size: var(--fs-s);
      font-weight: 650;
      color: var(--ink-2);
    }
    .lm-page-nav__list {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-2);
    }
    .lm-page-nav__link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: var(--target-min);
      min-height: var(--target-min);
      padding: var(--sp-2) var(--sp-3);
      font-size: var(--fs-s);
      font-weight: 600;
      color: var(--ink);
      text-decoration: none;
      border: 1px solid var(--border);
      background: var(--paper);
    }
    .lm-page-nav__link:hover {
      color: var(--blue-deep);
      border-color: var(--ink-2);
      text-decoration: underline;
    }
    .lm-page-nav__link[aria-current="page"] {
      background: var(--ink);
      border-color: var(--ink);
      color: #FFFFFF;
      font-weight: 650;
    }
    .lm-page-nav__link--prev,
    .lm-page-nav__link--next { padding: var(--sp-2) var(--sp-4); }

    /* ============================================================
       QUESTION BLOCK
    ============================================================ */
    .lm-question {
      border: 1px solid var(--border-strong);
      border-left: 6px solid var(--acc);
      background: var(--paper);
      padding: var(--sp-6);
      margin: var(--sp-6) 0;
    }
    .lm-question__heading {
      font-size: var(--fs-s);
      font-weight: 650;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--acc-text);
      margin: 0 0 var(--sp-4);
    }
    .lm-question__body > p:last-child { margin-bottom: 0; }

    /* ============================================================
       SOLUTION — native <details> disclosure
    ============================================================ */
    .lm-solution-wrapper { margin: var(--sp-6) 0; }
    .lm-solution {
      border: 1px solid var(--border);
      border-left: 4px solid var(--acc-sol-text);
    }
    .lm-solution > summary {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      min-height: var(--target-min);
      padding: var(--sp-3) var(--sp-4);
      font-weight: 650;
      cursor: pointer;
      background: var(--acc-sol-tint);
      list-style: none;
    }
    html.theme-aaa .lm-solution > summary { background: var(--paper); }
    .lm-solution > summary::-webkit-details-marker { display: none; }
    .lm-solution__icon {
      width: 0; height: 0;
      border-left: 8px solid var(--acc-sol-text);
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      flex-shrink: 0;
    }
    .lm-solution[open] .lm-solution__icon {
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 8px solid var(--acc-sol-text);
      border-bottom: none;
    }
    /* Show/Hide label swap — CSS only, no JavaScript required */
    .lm-solution__hide { display: none; }
    .lm-solution[open] .lm-solution__show { display: none; }
    .lm-solution[open] .lm-solution__hide { display: inline; }
    .lm-solution__summary-hint {
      display: block;
      font-size: var(--fs-s);
      font-weight: 400;
      color: var(--ink-2);
    }
    .lm-solution__body {
      padding: var(--sp-5);
      border-top: 1px solid var(--border);
    }

    /* ============================================================
       SOLUTION STEPS
    ============================================================ */
    .lm-steps {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--sp-5);
    }
    .lm-step { display: flex; gap: var(--sp-4); }
    .lm-step__number {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem; height: 2rem;
      background: var(--acc-sol-text);
      color: #FFFFFF;
      font-weight: 650;
    }
    .lm-tick { width: .9em; height: .9em; vertical-align: -0.08em; }
    .lm-step__content { min-width: 0; }    /* lets formulae scroll, not overflow */
    .lm-step__label {
      display: block;
      font-weight: 650;
      margin-bottom: var(--sp-2);
    }
    .lm-step--answer {
      border-left: 4px solid var(--acc-sol-text);
      background: var(--acc-sol-tint);
      padding: var(--sp-4);
    }
    html.theme-aaa .lm-step--answer { background: var(--paper); }

    /* ============================================================
       FORMULA BLOCK
       Plain container: MathJax 4 makes the expression focusable and
       attaches its own generated speech — no role/aria-label here.
    ============================================================ */
    .lm-formula-block {
      padding: var(--sp-3) 0;
      /* No overflow handling here: wrappers with overflow-x/y clip math
         descenders and create phantom scrollbars. MathJax 4 owns overflow
         via displayOverflow:'linebreak' (see lm-mathjax-config.js). */
    }

    /* ============================================================
       DEFINITION TABLE — native <table>
    ============================================================ */
    .lm-definition-table {
      border-collapse: collapse;
      font-size: var(--fs-s);
      margin: var(--sp-4) 0;
    }
    .lm-definition-table th,
    .lm-definition-table td {
      text-align: left;
      padding: var(--sp-2) var(--sp-5) var(--sp-2) 0;
      border-bottom: 1px solid var(--border);
      font-weight: 400;
    }
    .lm-definition-table th { font-weight: 650; }

    /* ============================================================
       RULES LIST (named formulae)
    ============================================================ */
    .lm-rules-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--sp-4);
      margin: var(--sp-4) 0;
    }
    .lm-rule {
      border: 1px solid var(--border);
      border-left: 4px solid var(--acc);
      padding: var(--sp-4) var(--sp-5);
    }
    .lm-rule--solo { margin: var(--sp-4) 0; }   /* lone rule, no list wrapper */
    .lm-rule__heading {
      font-size: var(--fs-l);
      margin-bottom: var(--sp-2);
    }

    /* ============================================================
       PROCEDURE / METHOD LIST (intro pages — amendment A4.10)
       Numbered method steps. The ol carries the semantics; the visual
       counter uses alt-text-empty content so screen readers do not
       announce the number twice (plain-counter fallback for older
       browsers precedes it).
    ============================================================ */
    .lm-procedure {
      list-style: none;
      counter-reset: lm-proc;
      display: flex;
      flex-direction: column;
      gap: var(--sp-3);
      margin: var(--sp-4) 0 var(--sp-6);
      padding: 0;
    }
    .lm-procedure > li {
      counter-increment: lm-proc;
      display: flex;
      gap: var(--sp-3);
      align-items: flex-start;
    }
    .lm-procedure > li::before {
      content: counter(lm-proc);
      content: counter(lm-proc) / "";
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.75rem;
      height: 1.75rem;
      border: 2px solid var(--blue-text);
      color: var(--blue-text);
      font-weight: 650;
      font-size: var(--fs-s);
    }

    /* ============================================================
       WORKED EXAMPLES (intro pages — always open)
    ============================================================ */
    .lm-worked-example {
      border: 1px solid var(--border-strong);
      margin: var(--sp-6) 0;
    }
    .lm-worked-example__header {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      padding: var(--sp-4) var(--sp-5);
      border-bottom: 1px solid var(--border);
      background: var(--acc-tint);
    }
    html.theme-aaa .lm-worked-example__header { background: var(--paper); }
    .lm-worked-example__badge {
      font-size: var(--fs-s);
      font-weight: 650;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--acc-deep);
      border: 1px solid var(--acc-text);
      padding: var(--sp-1) var(--sp-2);
      flex-shrink: 0;
    }
    .lm-worked-example__title { font-size: var(--fs-l); margin: 0; }
    .lm-worked-example__question,
    .lm-worked-example__solution { padding: var(--sp-4) var(--sp-5); }
    .lm-worked-example__question { border-bottom: 1px solid var(--border); }
    .lm-worked-example__question-label,
    .lm-worked-example__solution-label {
      display: block;
      font-size: var(--fs-s);
      font-weight: 650;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: var(--sp-2);
    }
    .lm-worked-example__question-label { color: var(--acc-text); }
    .lm-worked-example__solution-label { color: var(--acc-sol-text); }
    .lm-worked-example__solution-steps {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .lm-worked-example__solution-step { margin-bottom: var(--sp-4); }
    .lm-worked-example__solution-step:last-child { margin-bottom: 0; }
    .lm-worked-example__step-label {
      display: block;
      font-weight: 650;
      margin-bottom: var(--sp-1);
    }

    /* ============================================================
       INSET NOTE
    ============================================================ */
    .lm-inset {
      border-left: 4px solid var(--amber-text);
      background: var(--amber-tint);
      padding: var(--sp-4) var(--sp-5);
      margin: var(--sp-6) 0;
    }
    html.theme-aaa .lm-inset { background: var(--paper); }
    .lm-inset p:last-child { margin-bottom: 0; }

    /* ============================================================
       DIAGRAM
    ============================================================ */
    .lm-diagram { margin: var(--sp-6) 0; text-align: center; }
    .lm-diagram__img { max-width: 100%; height: auto; }
    .lm-diagram svg {
      display: block;
      width: 100%;
      max-width: 420px;
      height: auto;
      margin-inline: auto;
    }
    .lm-diagram__caption {
      font-size: var(--fs-s);
      color: var(--ink-2);
      margin-top: var(--sp-2);
    }

    /* ============================================================
       PREV / NEXT QUESTION CARDS
    ============================================================ */
    .lm-question-nav {
      display: flex;
      gap: var(--sp-4);
      margin: var(--sp-8) 0 var(--sp-4);
      flex-wrap: wrap;
    }
    .lm-question-nav__link {
      flex: 1 1 16rem;
      display: flex;
      flex-direction: column;
      gap: var(--sp-1);
      min-height: var(--target-min);
      padding: var(--sp-4) var(--sp-5);
      border: 1px solid var(--border);
      text-decoration: none;
      color: var(--ink);
    }
    .lm-question-nav__link:hover {
      border-color: var(--ink-2);
      color: var(--blue-deep);
    }
    .lm-question-nav__link--next { text-align: right; align-items: flex-end; }
    .lm-question-nav__direction {
      font-size: var(--fs-s);
      font-weight: 650;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--acc-text);
    }
    .lm-question-nav__title { font-weight: 650; }

    /* ============================================================
       PRINT
       lm.js opens every <details> on beforeprint (CSS alone cannot
       reveal closed details content) and restores them afterwards.
    ============================================================ */
    @media print {
      .masthead__navrow,
      .display-control,
      .site-search,
      .topics-panel,
      .skip-link,
      .lm-page-nav,
      .lm-question-nav,
      .lm-breadcrumb-nav,
      .site-footer { display: none !important; }
      body { font-size: 11pt; }
      .lm-solution,
      .lm-question,
      .lm-worked-example { border-color: #000000; }
      .lm-solution > summary { background: none; }
    }

    /* ============================================================
       SECTION LANDING PAGES (/algebra.php etc.)
       The wrapper carries lm-section--<accent>, reusing the same
       variable carriers as the homepage topic cards, so the section's
       homepage colour-and-icon pairing continues onto its own page.
       Site chrome stays brand blue. AAA remaps are automatic.
    ============================================================ */
    .lm-section-hero {
      display: flex;
      gap: var(--sp-6);
      align-items: flex-start;
      padding-top: var(--sp-10);
      padding-bottom: var(--sp-8);
      border-bottom: 1px solid var(--border);
      margin-bottom: var(--sp-8);
    }
    .lm-section-hero__icon {
      width: 72px; height: 72px;
      flex-shrink: 0;
      margin-top: var(--sp-2);
    }
    .lm-section-hero__title {
      color: var(--accent-text, var(--ink));
      margin-bottom: var(--sp-2);
    }
    .lm-section-hero__meta {
      font-size: var(--fs-s);
      font-weight: 650;
      color: var(--ink-2);
      margin-bottom: var(--sp-3);
    }
    .lm-section-hero__desc {
      color: var(--ink-2);
      max-width: 60ch;
      margin: 0;
    }
    .lm-topic-rows {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--sp-4);
      margin: var(--sp-6) 0 var(--sp-10);
    }
    .lm-topic-row {
      border: 1px solid var(--border);
      border-left: 6px solid var(--accent, var(--blue));
      padding: var(--sp-5) var(--sp-6);
    }
    .lm-topic-row__title {
      font-size: var(--fs-xl);
      margin: 0 0 var(--sp-1);
    }
    .lm-topic-row__title a {
      display: inline-flex;
      align-items: center;
      min-height: var(--target-min);
      color: var(--ink);
      text-decoration: none;
    }
    .lm-topic-row__title a:hover {
      color: var(--accent-text, var(--blue-deep));
      text-decoration: underline;
      text-decoration-thickness: 3px;
    }
    .lm-topic-row__meta {
      font-size: var(--fs-s);
      color: var(--ink-2);
      margin: 0;
    }
    @media (max-width: 760px) {
      .lm-section-hero { flex-direction: column; gap: var(--sp-4); }
    }

    /* ============================================================
       SEARCH PAGE (client-side; see lm-search.js)
    ============================================================ */
    .lm-search-form {
      display: flex;
      max-width: 34rem;
      margin: var(--sp-4) 0 var(--sp-6);
    }
    .lm-search-form .site-search__input {
      flex: 1;
      width: auto;
      max-width: none;
    }
    .lm-search-status {
      font-weight: 600;
      margin-bottom: var(--sp-5);
    }
    .lm-search-browse {
      list-style: none;
      margin: 0 0 var(--sp-6);
    }
    .lm-search-browse a {
      display: inline-flex;
      align-items: center;
      min-height: var(--target-min);
      padding: var(--sp-1) 0;
      color: var(--ink);
      text-decoration: none;
    }
    .lm-search-browse a:hover {
      color: var(--blue-deep);
      text-decoration: underline;
    }
    .lm-search-browse .q-count {
      font-size: var(--fs-s);
      color: var(--ink-2);
      margin-left: var(--sp-2);
    }
    .lm-search-browse-heading {
      font-size: var(--fs-l);
      margin: var(--sp-6) 0 var(--sp-2);
    }

/* A4.14 — Pascal's-triangle table (Binomial part-2 adjudication) */
.lm-pascal-triangle { margin: 1.5rem auto; border-collapse: collapse; }
.lm-pascal-triangle caption { font-weight: 650; margin-bottom: .5rem; }
.lm-pascal-triangle th, .lm-pascal-triangle td { padding: .2rem .6rem; text-align: center; }
.lm-pascal-triangle th { font-weight: 650; text-align: right; }

    /* ============================================================
       COLOUR-ENHANCEMENT LAYER (rev 2) — RATIFIED 2026-07-16
       (owner proof-sheet approval + design check of the rebased
       delivery: base integrity to de760818, block hygiene, alias
       design confirmed).
       Strictly additive decoration per ruling #2: the page structure
       already carries every distinction this layer colours. Deleting
       this block (everything from this banner to the CE-END marker)
       restores the shipped rendering byte-for-byte — that deletion is
       the one-touch revert.
       Palette discipline: every value below is an alias of a ratified
       brand family (magenta / amber / blue / teal). No new hue is
       authored in this pass — the legacy reference images were not
       received (design-note flag F1), and the one legacy role with no
       surviving family or carrier (red bring-down arrows) is flagged,
       not invented (F3).
       Theme model: the shipped stylesheet defines exactly two themes
       (theme-aa, theme-aaa) — cutover-handoff backlog: "both themes,
       AA/AAA contrast". The kickoff's third ("dark") theme does not
       exist in the ratified corpus and is flagged for owner ruling
       (F2); no dark tokens are authored here.
       Contrast: every pair verified programmatically — see
       contrast-verification.txt (WCAG 2.2 relative-luminance method).
    ============================================================ */

    /* ---- Role tokens (one value per existing theme) ------------- */
    :root,
    html.theme-aa {
      /* legacy magenta side-annotations → step labels (the labels
         carry the annotations' narration per the cutover record) */
      --lm-anno-text: var(--magenta-text);   /* 4.55:1 on paper */

      /* legacy orange "subtract:"-style tags — token RESERVED:
         the tags were merged into unclassed step prose at cutover
         ("presentational, not carried"), so no zero-edit carrier
         exists. Kept unconsumed per the N1 reserved-token precedent;
         see design note F3. Do not remove. */
      --lm-tag-text:  var(--amber-text);     /* 4.52:1 on paper */

      /* legacy coloured figure elements → inline-SVG diagrams
         (A4.12: strokes/fills are currentColor so themes restyle)
         RESERVED since the 2026-07-16 emphasis-first amendment —
         consumers removed; see Role 4 below. Do not remove. */
      --lm-fig-line:  var(--blue-text);      /* primary geometry, 4.53:1 */
      --lm-fig-aux:   var(--teal-text);      /* dashed auxiliary lines, 4.53:1 */
    }

    /* AAA follows the shipped pattern: foreground accents remap to
       the *-deep values (>=7:1); tint backgrounds strip to paper. */
    html.theme-aaa {
      --lm-anno-text: var(--magenta-deep);   /* 7.03:1 */
      --lm-tag-text:  var(--amber-deep);     /* 7.01:1 */
      --lm-fig-line:  var(--blue-deep);      /* 7.06:1 */
      --lm-fig-aux:   var(--teal-deep);      /* 7.06:1 */
    }

    /* ---- Role 1: annotation labels ------------------------------ */
    .lm-step__label,
    .lm-worked-example__step-label {
      color: var(--lm-anno-text);
    }
    /* The answer step keeps its ratified teal-and-ink idiom: a
       magenta label inside the teal-tint card also measures 4.18:1
       (below AA) — verified, so this override is load-bearing. */
    .lm-step--answer .lm-step__label { color: var(--ink); }

    /* ---- Role 4: inline-SVG figure colour — AMENDED 2026-07-16 -- */
    /* EMPHASIS-FIRST (owner ruling, figure-emphasis round 2): the
       whole-figure blue and dashed-auxiliary teal are WITHDRAWN.
       Figure bodies, dashed auxiliaries and labels return to ink —
       the dash pattern itself carries the structural distinction
       (ruling #2 holds) — and the FE layer's --lm-fig-em magenta is
       the sole figure hue, matching the sighted legacy palette
       (red-on-black throughout, 28-file ferry, sighting records
       39599639e5991388 / c05d3ffe49cc0798 / e9bbf5d1eb63c881).
       The three former consumer rules and the two figure print
       rules are removed; --lm-fig-line / --lm-fig-aux remain
       defined but UNCONSUMED (reserved-token precedent, N1 /
       --lm-tag-text). Block revert contract unchanged: deleting
       banner→CE-END restores the shipped stylesheet byte-for-byte. */

    /* ---- Reserved-token consumer: section-hero wash -------------- */
    /* --accent-tint has been RESERVED for this pass since cold-review
       N1. The lm-section--* carriers gain a deep value (appended here,
       shipped carrier lines untouched) because the harness showed
       three of the four *-text titles fail AA on their own tint
       (teal 4.21, amber 4.27, magenta 4.12); the *-deep values
       measure 6.32–6.62 on-tint. */
    .lm-section--violet  { --accent-deep: var(--violet-deep); }
    .lm-section--teal    { --accent-deep: var(--teal-deep); }
    .lm-section--amber   { --accent-deep: var(--amber-deep); }
    .lm-section--magenta { --accent-deep: var(--magenta-deep); }

    .lm-section .lm-section-hero {
      background: var(--accent-tint);
      padding-left: var(--sp-6);
      padding-right: var(--sp-6);
    }
    .lm-section .lm-section-hero__title {
      color: var(--accent-deep, var(--accent-text));
    }
    html.theme-aaa .lm-section .lm-section-hero {
      background: var(--paper);          /* AAA strips decorative tints */
    }

    /* ---- Print safety ------------------------------------------- */
    @media print {
      .lm-step__label,
      .lm-worked-example__step-label { color: #000000; }
    }
    /* ================== CE-END (colour-enhancement layer) ======== */

    /* ============================================================
       FIGURE-EMPHASIS LAYER (rev 2) — RATIFIED 2026-07-16
       (figure-emphasis-survey.md §3 rulings 1–3 + FE-A1; sightings
       and mapping: batch-1 record 39599639e5991388, batch-2 record
       c05d3ffe49cc0798 — 9 figures, 17 elements, 6 pages.)
       Strictly additive decoration per ruling #2: every emphasised
       distinction is already carried by its figcaption narration and
       by structure (stroke-width-6 markers, dash patterns, the
       right-angle square). Deleting this block (banner → FE-END) and
       removing the 17 class="lm-fig-em" attributes restores the
       pre-emphasis rendering; the block deletion alone restores the
       pre-emphasis COLOURS (the classes are inert without it). The
       colour-enhancement layer's own revert contract (banner →
       CE-END) is untouched.
       Palette discipline: the legacy emphasis hue is red; per the
       ratified no-red-family rule it aliases the magenta family. One
       class only — the lm-fig-em2 conditional's trigger was not met
       by any sighted figure and it is not authored.
       Contrast (WCAG 2.2, re-verified programmatically at apply):
       magenta-text on paper 4.55:1 (AA); magenta-deep 7.03:1 (AAA).
    ============================================================ */

    /* ---- Role token (one value per existing theme) -------------- */
    :root,
    html.theme-aa {
      /* legacy red per-element figure emphasis (two candidate
         triangle positions, exterior ray + 57° arc, obtuse-height
         construction, solution-set markers) → magenta family */
      --lm-fig-em: var(--magenta-text);   /* 4.55:1 on paper */
    }
    html.theme-aaa {
      --lm-fig-em: var(--magenta-deep);   /* 7.03:1 */
    }

    /* ---- Consumers ---------------------------------------------- */
    /* Base: currentColor inheritance recolours stroke- and fill-
       painted elements alike (A4.12 contract). */
    .lm-diagram svg .lm-fig-em { color: var(--lm-fig-em); }
    /* Companion 1: out-specifies the aux dashed rule (0,3,1 beats
       0,2,1, order-independent) — carrier: the SCR-4 exterior ray,
       the SCR-intro obtuse construction lines. */
    .lm-diagram svg [stroke-dasharray].lm-fig-em { stroke: var(--lm-fig-em); }
    /* Companion 2: out-specifies the text ink-pin (0,2,2). No
       current carrier — the sighted legacy set colours no labels —
       kept per the ratified §3.3 consumer set and the reserved-
       carrier precedent (N1 / --lm-tag-text). */
    .lm-diagram svg text.lm-fig-em { fill: var(--lm-fig-em); }

    /* ---- Print safety ------------------------------------------- */
    @media print {
      .lm-diagram svg .lm-fig-em,
      .lm-diagram svg [stroke-dasharray].lm-fig-em { color: #000000; stroke: #000000; }
      .lm-diagram svg text.lm-fig-em { fill: #000000; }
    }
    /* ================== FE-END (figure-emphasis layer) =========== */