.math-static-lesson {
  margin-top: 1.5rem;
}

.math-static-intro {
  max-width: 44rem;
  margin: 0 0 1rem;
  color: #536171;
  font-size: 1.05rem;
  line-height: 1.55;
}

.math-static-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.5rem 0 1.25rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  background: #fff;
  color: #536171;
  font-size: 0.96rem;
}

.math-static-swatch {
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid #0b6bcb;
  border-radius: 4px;
  background: #e7f1ff;
}

.math-static-playbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.35rem 0 1.15rem;
}

.math-static-play-button {
  appearance: none;
  border: 1px solid #0b6bcb;
  border-radius: 8px;
  background: #0b6bcb;
  color: #fff;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  padding: 0.65rem 0.95rem;
  cursor: pointer;
}

.math-static-play-button:hover,
.math-static-play-button:focus-visible {
  background: #084f9a;
  border-color: #084f9a;
}

.math-static-play-button:focus-visible {
  outline: 3px solid #bfdbfe;
  outline-offset: 2px;
}

.math-static-slideshow-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.math-static-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.15rem;
  /* box-sizing/min-width containment on this and the shared selectors below (.math-static-step,
     .math-static-math, .math-static-diagram) is law's addition, confirmed load-bearing for their
     flex/grid-embedded diagrams (queue #16308 thread) -- safe and inert for every other track's
     plain block-flow layout, so folded into the shared baseline rather than a law-only section. */
  min-width: 0;
}

.math-static-step {
  box-sizing: border-box;
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid #d8dee8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(28, 36, 48, 0.08);
}

.math-static-step.math-static-slideshow-current {
  border-color: #0b6bcb;
  box-shadow: 0 18px 42px rgba(11, 107, 203, 0.16);
}

.math-static-step h2 {
  margin: 0 0 0.65rem;
  font-size: 1.28rem;
  line-height: 1.25;
  letter-spacing: 0;
}

.math-static-instruction {
  margin: 0 0 1.3rem;
  color: #536171;
  font-size: 1rem;
  line-height: 1.55;
  /* `overflow-wrap` fixes INK overflow (an unbroken token overpainting its box), NOT min-content
     track expansion — the grid rule `grid-template-columns: minmax(0, 1fr)` is what prevents that.
     Under the grid rule `break-word` and `anywhere` behave identically, so the keyword is moot
     here; the two diverge only where a container's minimum is auto, and neither is safe in
     general. Do NOT switch to `break-word`. */
  overflow-wrap: anywhere;
}

.math-static-math {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  padding: 1.1rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fbfdff;
}

.math-static-math .katex-display {
  margin: 0;
}

.math-static-math .katex {
  font-size: clamp(1.1rem, 2.7vw, 1.45rem);
}

.math-static-diagram {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  margin-top: 1rem;
  overflow-x: auto;
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fbfdff;
}

.math-static-diagram svg {
  display: block;
  max-width: none;
  height: auto;
  margin: 0 auto;
}

@media print {
  .math-static-playbar {
    display: none !important;
  }

  /* Print has no scrolling: without this, a natively-wide figure would be
     clipped by its overflow container on paper. Restores fit-to-page for
     print only; screen rendering is unchanged. */
  .math-static-diagram svg {
    max-width: 100%;
  }

  /* db's print page-break proposal (queue #16308), evidenced but not itself verified as a
     working remedy by db: measured on 2,636 diagrams / 512 lessons, 171 (6.5%) have an effective
     height >400px after max-width:100% scaling and are at risk of straddling a page break without
     this. 44 of those (1.7%) are >600px effective height -- taller than half a page -- and cannot
     be made to fit on one page by this or any CSS rule; that cohort needs a different remedy and
     is an open follow-up, not solved here. */
  .math-static-diagram {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* --------------------------------------------------------------------------------------------
   law-track-specific rules. law signed off on these selectors by name (queue #16308 thread,
   "CARRY FORWARD -- load-bearing for law's structured visual previews... and readable native
   trees": visual-preview styling, data-law-model native viewport handling, horizontal
   scroll/touch/scrollbar behaviour, and a 12px SVG label floor). Inert on every other track
   (these selectors never match markup any other track emits).

   The scroll/touch/scrollbar and 12px-label-floor rules were pulled forward from law's own
   vendored copy on 2026-09-22, AFTER their team landed real CSS (not just generator-injected
   inline styles) for them -- confirmed via origin/master, 14 commits ahead of the snapshot this
   file was first built from ("Fit the Intestacy property caption at the 12px floor", "Expose
   full legal diagrams through mobile scroll viewports", etc). The original build of this file
   found these three items living only in law's generator (analytical_glance.py's render_model(),
   inline overflow-x:auto/max-width:none) and left them out as genuinely untouched by the
   migration -- that was correct at the time, but law's team moved two of the three into real CSS
   within hours, while this migration's canonical snapshot was already published without them.
   URL overflow-wrap is still generator-only (already covered here via .math-static-instruction's
   own overflow-wrap: anywhere, inherited from math's file, not law-specific).

   NOT carried forward here, pending clarification rather than a unilateral call: law's answer
   also said "RETIRE: Play/slideshow control styling," but .math-static-playbar/.math-static-play-
   button/.math-static-slideshow-status above are the SHARED baseline every track has, not a
   law-specific addition -- stripping them would affect every track still running slideshow.js
   live, not just law. **Resolved by math (#16328-2nd-addendum): leave it, do not retire** -- the
   one-button slideshow is a live June feature on math's own track, and law's "retire" meant "law
   doesn't need these carried forward," not "remove them fleet-wide."
   -------------------------------------------------------------------------------------------- */

.math-static-visual-preview {
  box-sizing: border-box;
  min-width: 0;
  margin: 1rem 0 1.15rem;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  border: 1px solid #d8dee8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(28, 36, 48, 0.08);
}

.math-static-visual-preview h2 {
  margin: 0 0 0.75rem;
  font-size: 1.12rem;
  line-height: 1.25;
  letter-spacing: 0;
}

.math-static-visual-preview .math-static-diagram {
  margin-top: 0;
}

.math-static-diagram .law-static-model,
.math-static-diagram [data-law-model] {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  overflow-x: scroll !important;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  touch-action: pan-x;
}

.math-static-diagram [data-law-model]::-webkit-scrollbar {
  height: 0.75rem;
}

.math-static-diagram [data-law-model]::-webkit-scrollbar-thumb {
  border: 3px solid #fbfdff;
  border-radius: 999px;
  background: #7c8da1;
}

.math-static-diagram [data-law-model]::-webkit-scrollbar-track {
  background: #dfe7ef;
}

.math-static-diagram svg text.dres,
.math-static-diagram svg text.dsmall,
.math-static-diagram svg text.dlbl {
  font-size: 12px !important;
}