/* ============================================================================
   lesson.css — shared design system for the inductance workspace.
   Linked by every lesson and every reference sheet.

   Direction: an engineering document with an instrument recessed into it.
   The page is quiet, dense and printable — datasheet discipline. All of the
   boldness is spent in one place: the Bench Scope panel (see rl-sim.js),
   which is the instrument this bench does not have.

   Type roles:  Archivo      — headings, eyebrows, labels (technical grotesque)
                Source Serif — body (Adobe's documentation serif; reads long)
                IBM Plex Mono— data, units, equations, component values
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap');

/* ---------------------------------------------------------------- tokens - */

:root {
  --paper:      #F2F3F1;   /* cool bench-paper, deliberately not cream        */
  --paper-sunk: #E7E9E5;   /* recessed fills, table zebra                     */
  --ink:        #171C21;   /* blue-slate near-black                           */
  --ink-soft:   #5C666E;   /* margin notes, captions                          */
  --ink-faint:  #8B949A;   /* units, de-emphasised data                       */
  --rule:       #CFD3CD;   /* hairlines                                       */

  --steel:      #1F5673;   /* the clamp. safety, containment, the fix.        */
  --steel-wash: #E2EAEF;
  --copper:     #A5511F;   /* magnet wire. stored energy, the transient.      */
  --copper-wash:#F3E5DA;

  --panel:      #111A21;   /* the instrument face                             */
  --panel-edge: #2C3B45;
  --graticule:  #24333D;
  --trace-i:    #5FB8D4;   /* current                                         */
  --trace-v:    #E8933F;   /* voltage                                         */
  --panel-ink:  #C3D0D8;

  --measure: 34rem;        /* body column                                     */
  --margin-col: 13rem;     /* Tufte side notes                                */
  --gutter: 2.25rem;

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #14181B;
    --paper-sunk: #1C2226;
    --ink:        #DFE4E3;
    --ink-soft:   #98A3A9;
    --ink-faint:  #6E7A80;
    --rule:       #2B3338;
    --steel:      #6FB2D6;
    --steel-wash: #17272F;
    --copper:     #E0904F;
    --copper-wash:#2A1E14;
    --panel:      #0C1317;
    --panel-edge: #2C3B45;
  }
}

/* ------------------------------------------------------------------ base - */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
}

/* The document grid: body column + a margin column for notes and citations.
   Below 62rem the margin column collapses and notes flow inline.            */
.doc {
  max-width: calc(var(--measure) + var(--gutter) + var(--margin-col));
  margin: 0 auto;
  padding: 3.5rem 1.5rem 6rem;
}

.doc > * { max-width: var(--measure); }

@media (min-width: 62rem) {
  .doc { padding-left: 3rem; padding-right: 3rem; }
}

/* --------------------------------------------------------------- masthead */

.masthead {
  border-top: 2px solid var(--ink);
  padding-top: 0.9rem;
  margin-bottom: 3rem;
  max-width: none;
}

.masthead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.6rem;
}

.masthead__meta strong { color: var(--copper); font-weight: 700; }

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.05rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
  max-width: 18ch;
}

.standfirst {
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 40ch;
}

/* -------------------------------------------------------------- sections -
   Section eyebrows name the STATE OF THE CIRCUIT, not an arbitrary index.
   The lesson is a physical sequence, so the labels carry real information.  */

section { margin-top: 3.25rem; }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 0.5rem;
}

.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.18;
  letter-spacing: -0.018em;
  margin: 0 0 1rem;
}

h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  margin: 2rem 0 0.6rem;
}

p { margin: 0 0 1.1rem; }

a {
  color: var(--steel);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
a:hover { color: var(--copper); }

strong { font-weight: 600; }

em.term {
  font-style: normal;
  font-weight: 600;
  border-bottom: 1.5px solid var(--copper);
  padding-bottom: 0.05em;
}

/* --------------------------------------------------------- margin notes -
   Tufte side notes. Citations live here rather than in footnotes, so the
   evidence sits beside the claim instead of at the end of the document.    */

.note {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-soft);
  border-left: 2px solid var(--rule);
  padding-left: 0.85rem;
  margin: 0 0 1.1rem;
}

.note a { font-weight: 600; }

@media (min-width: 62rem) {
  .note {
    float: right;
    clear: right;
    width: var(--margin-col);
    margin-right: calc(-1 * (var(--margin-col) + var(--gutter)));
    margin-top: 0.35rem;
    margin-bottom: 1.4rem;
    border-left-width: 1px;
  }
}

/* -------------------------------------------------------------- equation - */

.eq {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  background: var(--paper-sunk);
  border-left: 3px solid var(--copper);
  padding: 1rem 1.15rem;
  margin: 1.5rem 0;
  overflow-x: auto;
}

.eq__label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}

.eq__gloss {
  display: block;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-top: 0.65rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------- callout - */

.callout {
  border: 1px solid var(--rule);
  border-top: 2px solid var(--steel);
  background: var(--steel-wash);
  padding: 1.25rem 1.35rem;
  margin: 2rem 0;
}

.callout--danger { border-top-color: var(--copper); background: var(--copper-wash); }

.callout__title {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 0.55rem;
}

.callout--danger .callout__title { color: var(--copper); }
.callout > p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- tables -
   Deliberately datasheet-flavoured: hairlines, tiny tracked headers, mono
   figures. This is the visual language of the documents the reader must
   learn to read.                                                            */

.data {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.data caption {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
  padding-bottom: 0.6rem;
}

.data th {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-soft);
  border-bottom: 1.5px solid var(--ink);
  padding: 0.4rem 0.7rem 0.4rem 0;
}

.data td {
  padding: 0.42rem 0.7rem 0.42rem 0;
  border-bottom: 1px solid var(--rule);
}

.data tr:last-child td { border-bottom: 1.5px solid var(--ink); }

/* Row headers that are symbols, not words. Uppercasing them is wrong —
   it turns tau into T and V-sub-S into VS. */
.data--symbols th {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--ink);
}

.data .hl { color: var(--copper); font-weight: 600; }
.data .unit { color: var(--ink-faint); }

.scroll-x { overflow-x: auto; }

/* ------------------------------------------------------------ experiment - */

.bench {
  border: 1px solid var(--rule);
  padding: 1.4rem 1.5rem;
  margin: 2rem 0;
  background: var(--paper-sunk);
}

.bench ol { margin: 0; padding-left: 1.2rem; }
.bench li { margin-bottom: 0.6rem; }
.bench li:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ toc -
   The contents list on the home page. Rows, not cards: this is a document
   index, so it borrows the datasheet hairlines already in use rather than
   inventing a second visual language for the one page that has no lesson
   in it. The number is what the eye scans, so it gets its own column and
   stays put when the title wraps.                                          */

.toc {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.toc li {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 0 1rem;
  align-items: baseline;
  border-top: 1px solid var(--rule);
  padding: 1.05rem 0;
}

.toc li:last-child { border-bottom: 1px solid var(--rule); }

.toc__num {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.toc__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 0 0 0.35rem;
}

.toc__title a { text-decoration: none; }
.toc__title a:hover { text-decoration: underline; }

.toc__blurb {
  grid-column: 2;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.toc__meta {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin: 0.55rem 0 0;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Announced but unwritten. Dimmed rather than hidden — knowing what is coming
   is part of knowing where you are in the sequence. */
.toc--soon .toc__num,
.toc--soon .toc__title { color: var(--ink-faint); }

/* ------------------------------------------------------------- footer nav */

.endnav {
  margin-top: 4.5rem;
  border-top: 2px solid var(--ink);
  padding-top: 1.25rem;
  max-width: none;
}

.endnav__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
}

.endnav__label {
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.4rem;
}

.endnav p { font-size: 0.9375rem; line-height: 1.5; }

.ask {
  border: 1px dashed var(--copper);
  padding: 1rem 1.2rem;
  margin-top: 2rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.ask strong { color: var(--copper); }

/* ----------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------------------------------------------------ focus */

:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ print -
   Printed sheets are the durable artifact. Controls disappear; the traces
   and the graticule stay, because a frozen instrument reading is still a
   useful figure on paper.                                                   */

@media print {
  :root {
    --paper: #fff; --paper-sunk: #f4f4f2; --ink: #000; --ink-soft: #444;
    --ink-faint: #666; --rule: #bbb; --steel: #14425a; --copper: #8a3f14;
    --steel-wash: #f2f6f8; --copper-wash: #faf1ea;
  }
  @page { margin: 16mm 14mm; }
  body { font-size: 10.5pt; }
  /* Re-cut the grid in millimetres so the margin notes survive on paper.
     122 + 8 + 52 = 182mm, the printable width of A4 at these margins.
     122mm at 10.5pt is about 66 characters — a proper measure. */
  .doc { padding: 0; max-width: none; --measure: 122mm; --gutter: 8mm; --margin-col: 52mm; }
  .note {
    float: right; clear: right; width: 52mm;
    margin: 0.2rem -60mm 1rem 0; padding-left: 3mm;
    border-left-width: 1px; font-size: 8pt;
  }
  /* Link URLs are deliberately not expanded. These are 200-character
     manufacturer URLs; printing them tripled the page count and nobody
     retypes them. Sources are cited by name in the text. */
  a { color: inherit; text-decoration: underline; text-decoration-color: #999; }
  /* Only atomic blocks avoid breaking. Sections are long — telling them not to
     break pushes each one to a fresh page and leaves half-empty sheets. */
  .callout, .scope, .quiz__item, .eq, .bench, .data, .endnav, .note,
  .toc li { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  .no-print, .scope__controls, .quiz__reset { display: none !important; }
}