/* GENERATED by tools/build-academy.py — do not edit by hand.
   Layered on top of /guide/guide.css, which supplies the shell, the type
   scale and the palette. Only what is specific to a lesson lives here. */

.ac-index{ padding:26px 0 60px; }
.ac-track{ margin:0 0 34px; }
.ac-track h2{ margin:0 0 4px; }
.ac-chapno{ color:var(--ac-accent, #2563eb); font-weight:700; }
.ac-blurb{ color:var(--muted); margin:0 0 12px; max-width:62ch; }
.ac-list{ margin:0; padding:0 0 0 22px; }
.ac-list li{ margin:0 0 7px; }
.ac-time{ color:var(--muted); font-size:13px; margin-inline-start:8px; }

/* NO max-width HERE — and that is the fix, not an omission.
   <main> carries `class="wrap ac-lesson"`, so .wrap already supplies this
   page's side margins and its 1160px measure: the same gutter every other page
   on this site uses, which is what the owner asked for.
   Setting max-width:none here overrode .wrap and ran the article edge to edge —
   measured at 1600px: left margin 0, right margin 15px. The column rule below
   is what makes the article USE that width instead of a narrow ribbon inside
   it; the width itself was never the thing to change. */
.ac-lesson{ padding:26px 0 60px; }
/* ONE COLUMN — owner, 2026-08-18, same instruction as the user guide: the
   newspaper flow (down the left, back up the right) made it impossible to
   tell where a section starts and ends. The page reads top to bottom now. */
/* The lesson-on-one-card infographic. Motif left, words right; stacks on a
   phone. The muted caption keeps it honest about what it is — a summary,
   not the lesson. */
.ac-infogfx{
  display:grid; grid-template-columns:200px 1fr; gap:6px 22px; align-items:center;
  margin:0 0 26px; padding:16px 18px;
  border:1px solid var(--line); border-radius:12px; background:rgba(37,99,235,.05);
}
.ac-infogfx-motif svg{ width:100%; height:auto; display:block; }
.ac-infogfx-thesis{ font-size:17px; font-weight:700; margin:0 0 8px; line-height:1.35; }
.ac-infogfx-points{ margin:0; padding-inline-start:20px; }
.ac-infogfx-points li{ margin:0 0 5px; }
.ac-infogfx-cap{ grid-column:1 / -1; color:var(--muted); font-size:11.5px; margin-top:2px; }
@media (max-width:640px){ .ac-infogfx{ grid-template-columns:1fr; } .ac-infogfx-motif{ max-width:180px; margin:0 auto; } }
.ac-crumb{ color:var(--muted); font-size:14px; margin:0 0 6px; }
.ac-meta{ color:var(--muted); font-size:14px; margin:0 0 18px; }
.ac-body h3{ margin:30px 0 8px; }
.ac-body h4{ margin:22px 0 6px; }
.ac-body table{ border-collapse:collapse; margin:16px 0; }
.ac-body th,.ac-body td{ border:1px solid var(--line); padding:6px 12px;
  text-align:start; }

/* WIDE CONTENT SCROLLS INSIDE ITSELF, never by taking the page with it.
   Measured on a 375px viewport before this existed: the income-statement block
   in "Revenue vs profit" is 553px of hand-aligned columns, and without a
   scroller of its own it made the whole document 553px wide — so every
   paragraph on the page overflowed, and reading required scrolling sideways and
   back on each line. The block itself must stay unwrapped, because the columns
   ARE the explanation. So the box scrolls and the page does not. */
.ac-body pre{
  overflow-x:auto; max-width:100%; margin:16px 0;
  padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  background:color-mix(in srgb, var(--muted) 7%, transparent);
  font-size:13px; line-height:1.55;
}
.ac-body table{ display:block; overflow-x:auto; max-width:100%; }

/* THE VIDEO SLOT, reserved rather than hidden.
   16:9 through aspect-ratio, so the box is exactly the height the file will
   need and nothing under it moves on the day it arrives. Dashed, muted, and
   carrying its own explanation — an empty frame with no caption reads as an
   image that failed to load. */
.ac-video{ margin:0 0 26px; }
.ac-video-frame{
  aspect-ratio:16/9; width:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; text-align:center;
  padding:20px; border:2px dashed var(--line); border-radius:12px;
  background:color-mix(in srgb, var(--muted) 7%, transparent);
}
.ac-video-mark{ font-size:30px; color:var(--muted); opacity:.5; }
/* "Video coming soon" — the headline of an empty box (owner, 2026-08-19).
   The public half of the pair in styles/main.css: same two lines, same roles.
   --ink rather than --muted because this line answers "is this broken?", and
   because --ink is what /guide/guide.css actually defines. */
.ac-video-soon{ color:var(--ink); font-size:17px; font-weight:700; }
/* --mut FIRST, and that is a fix rather than a preference. /guide/guide.css
   names its grey --mut; this file has been asking for --muted throughout, which
   is defined nowhere, so every "muted" line on these pages has been rendering
   in full ink. Nobody noticed while the quiet text stood alone. It matters here
   because this line's whole job is to be quieter than the headline above it, and
   two identical greys would make the pair read as one paragraph. The --muted
   fallback stays so the rule still works if the palette is ever renamed back.
   The other --muted uses on this page are left alone deliberately: fixing them
   all at once would restyle half the Academy in a commit about a video slot. */
.ac-video-note{ color:var(--mut, var(--muted)); font-size:14px; max-width:46ch; }

.ac-disclaimer{
  margin:26px 0; padding:12px 14px; border-radius:10px;
  border:1px solid var(--line); color:var(--muted); font-size:14px;
}
.ac-pager{ display:flex; justify-content:space-between; gap:14px;
  margin:26px 0; flex-wrap:wrap; }
.ac-next{ margin-inline-start:auto; }
.ac-cta{ margin:30px 0 0; }
.ac-note{ margin-top:40px; }