/* =========================================================================
   Epoché — in-lesson blocks (2026-08-21, third and settled cut: pristine)
   -------------------------------------------------------------------------
   The six typeset structures a lesson step may carry: table · ladder ·
   passage · facing · bar · grouping. Authored per lesson by the pass in
   `scripts/authoring/_BLOCK_BRIEF.md`; rendered by `renderBlocks()` in app.js.

   THE CONTRACT (unchanged): the authoring model emits CONTENT ONLY. Every
   colour, size, padding and layout decision lives here, identically for
   every block of a given type. Nothing in this file may be parameterised
   from lesson data.

   THE LANGUAGE, third cut: pristine. The first cut lost its faces to a
   var-scoping bug; the second answered with gradients, glows and engraved
   ornament and read as effortful. This one is the house's quietest voice —
   Fraunces and space and hairlines, ONE accent moment per block, and
   nothing else. If a rule here looks like decoration, it is wrong.

   Colour rides the root --th-* tokens (themes.css) so every theme recolours
   the set intact; everything is plain alpha for the daymode invert. Fonts
   are self-contained: --serif/--sans live inside the .pl scope and the
   lesson player is pre-plates, so var(--serif) resolves to nothing here.
   ========================================================================= */

.il-block{
  margin:32px 0 8px;
  --bs:'Fraunces',Georgia,'Times New Roman',serif;
  --bg:'Schibsted Grotesk',system-ui,sans-serif;
  --bl-line:rgba(var(--th-ink-rgb),0.08);
  --bl-line2:rgba(var(--th-ink-rgb),0.14);
}
.il-block+.il-block{margin-top:38px}

/* the caption above a block — quiet, like a figure title */
.il-block > .blk-title{
  font-family:var(--bs);font-size:1rem;font-weight:400;
  color:var(--th-ink3);margin:0 0 0.9rem;letter-spacing:.002em;
}
.il-block .blk-foot{
  font-family:var(--bg);font-size:0.7188rem;color:var(--th-ink3);
  margin-top:0.8rem;letter-spacing:.02em;
}

/* ── 1 · TABLE ─────────────────────────────────────────────────────────── */
.blk-table{
  background:var(--th-card2);
  border:1px solid var(--bl-line);
  border-radius:14px;
  overflow:hidden;
}
.blk-tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.blk-tr+.blk-tr{border-top:1px solid var(--bl-line)}
.blk-tr.blk-head{background:rgba(var(--th-ink-rgb),0.03)}
.blk-tr.blk-zebra{background:transparent}
.blk-td{
  padding:1.35rem 1.5rem;font-family:var(--bs);font-size:1.0625rem;
  line-height:1.45;color:var(--th-ink);
}
.blk-td+.blk-td{border-left:1px solid var(--bl-line);color:var(--th-ink2)}
.blk-head .blk-td{
  padding:0.95rem 1.5rem;font-family:var(--bg);font-size:0.7188rem;
  font-weight:600;letter-spacing:.06em;color:var(--th-ink3);
}
.blk-tr.blk-head{border-bottom:1px solid rgba(var(--th-acc-rgb),0.35)}

/* ── 2 · LADDER ────────────────────────────────────────────────────────── */
.blk-ladder{padding-top:0.2rem}
.blk-spine{display:none}
.blk-rung{
  display:flex;gap:1.4rem;align-items:baseline;
  padding:1.15rem 0.25rem;
}
.blk-rung+.blk-rung{border-top:1px solid var(--bl-line)}
.blk-num{
  font-family:var(--bg);font-size:0.75rem;font-weight:600;
  letter-spacing:.06em;color:var(--th-acc);min-width:1.9rem;
  font-variant-numeric:tabular-nums;
}
.blk-dot{min-width:1.9rem}
.blk-dot i{display:block;width:7px;height:7px;border-radius:50%;background:var(--th-acc)}
.blk-rlabel{font-family:var(--bs);font-size:1.1875rem;color:var(--th-ink);line-height:1.35;letter-spacing:-.006em}
.blk-rnote{font-family:var(--bs);font-size:0.9063rem;color:var(--th-ink3);margin-top:0.3rem;line-height:1.5}
.blk-rung.blk-resolves .blk-rlabel{color:var(--th-acc)}
.blk-rung.blk-resolves .blk-rnote{color:var(--th-ink2)}

/* ── 3 · PASSAGE ───────────────────────────────────────────────────────── */
.blk-passage{padding:0.4rem 0 0.2rem}
.blk-quotemark{display:none}
.blk-ptext{
  font-family:var(--bs);font-size:1.3125rem;font-weight:400;
  line-height:1.6;letter-spacing:-.008em;color:var(--th-ink);text-wrap:pretty;
}
.blk-ptext.blk-long{font-size:1.125rem;line-height:1.66;letter-spacing:-.004em}
.blk-prule{height:1px;width:2.5rem;margin:1.6rem 0 0.9rem;background:rgba(var(--th-acc-rgb),0.55)}
.blk-pattr{
  font-family:var(--bg);font-size:0.6875rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--th-ink3);line-height:1.9;
}
.blk-pattr em{font-style:normal;color:var(--th-ink2)}

/* ── 4 · FACING ────────────────────────────────────────────────────────── */
.blk-facing{padding-top:0.2rem}
.blk-facing .blk-side{padding:0 0 1.6rem}
.blk-facing .blk-side:last-child{padding-bottom:0}
.blk-sname{
  font-family:var(--bg);font-size:0.6875rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--th-ink3);margin-bottom:0.75rem;
}
.blk-sname em{font-style:normal}
.blk-stext{
  font-family:var(--bs);font-size:1.0625rem;line-height:1.62;
  color:var(--th-ink3);text-wrap:pretty;
}
.blk-stext.blk-long{font-size:1rem}
.blk-gap{display:flex;align-items:center;gap:1rem;padding:0.2rem 0 1.8rem}
.blk-gap i{height:1px;flex:1;background:var(--bl-line2)}
.blk-gap span{
  font-family:var(--bg);font-size:0.6563rem;font-weight:600;
  letter-spacing:.14em;color:var(--th-ink3);
}
.blk-facing .blk-lead{border-left:2px solid var(--th-acc);padding-left:1.4rem}
.blk-facing .blk-lead .blk-sname{color:var(--th-ink2)}
.blk-facing .blk-lead .blk-stext{
  font-size:1.25rem;line-height:1.56;letter-spacing:-.008em;color:var(--th-ink);
}
.blk-facing .blk-lead .blk-stext.blk-long{font-size:1.0938rem}

/* ── 5 · BAR ───────────────────────────────────────────────────────────── */
.blk-barwrap{padding:0.2rem 0 0}
.blk-bar{display:flex;height:3.25rem;border-radius:9px;overflow:hidden}
.blk-seg{min-width:2px}
.blk-seg-0{background:var(--th-acc)}
.blk-seg-1{background:rgba(var(--th-ink-rgb),0.06);box-shadow:inset 0 0 0 1px rgba(var(--th-ink-rgb),0.05)}
.blk-seg-2{background:rgba(var(--th-acc-rgb),0.3)}
.blk-barlabels{display:flex;margin-top:1.15rem}
.blk-barlabels > div{padding-right:1rem;min-width:0}
.blk-bshare{
  font-family:var(--bs);font-size:1.25rem;font-weight:500;line-height:1;
  color:var(--th-acc);font-variant-numeric:lining-nums;
}
.blk-barlabels > div+div .blk-bshare{color:var(--th-ink3)}
.blk-blabel{font-family:var(--bs);font-size:1.0625rem;color:var(--th-ink);margin-top:0.45rem}
.blk-bnote{font-family:var(--bs);font-size:0.875rem;color:var(--th-ink3);margin-top:0.25rem;line-height:1.5}

/* ── 6 · GROUPING ──────────────────────────────────────────────────────── */
.blk-grouping{display:flex;flex-direction:column;gap:1.7rem;padding-top:0.2rem}
.blk-glabel{
  font-family:var(--bg);font-size:0.6875rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--th-ink3);
  display:flex;align-items:center;gap:0.7rem;margin-bottom:0.85rem;
}
.blk-glabel i{width:7px;height:7px;border-radius:50%;background:var(--th-acc);flex-shrink:0}
.blk-group:not(:first-child) .blk-glabel i{
  background:transparent;border:1.5px solid var(--th-ink3);
}
.blk-gitem{
  font-family:var(--bs);font-size:1.1875rem;color:var(--th-ink);
  line-height:1.4;padding:0.4rem 0 0.4rem 1.45rem;letter-spacing:-.006em;
}
.blk-group:not(:first-child) .blk-gitem{color:var(--th-ink2)}

/* ── narrow phones ─────────────────────────────────────────────────────── */
@media (max-width:420px){
  .blk-td{padding:1.05rem 1.05rem;font-size:1rem}
  .blk-head .blk-td{padding:0.8rem 1.05rem}
  .blk-ptext{font-size:1.1875rem}
  .blk-facing .blk-lead .blk-stext{font-size:1.125rem}
  .blk-bar{height:2.75rem}
  .blk-rlabel{font-size:1.0938rem}
  .blk-gitem{font-size:1.0625rem}
}

/* =========================================================================
   THE FIGURES (2026-08-23) — spectrum · argument · nest · compose · radial
   -------------------------------------------------------------------------
   Drawn figures, beside the six typeset structures above. Same contract, same
   voice: hairlines, Fraunces, ONE accent moment, nothing decorative. The
   accent always lands on the thing the lesson is actually claiming — the
   middle band, the inference rule, the outermost whole, the composed result,
   the answer the lesson turns on — and never on more than that.

   All geometry is computed in app.js against a fixed 720-unit width; nothing
   here or there may be parameterised from lesson data. Colour rides --th-*
   so a theme recolours the whole set and the daymode invert has plain alpha
   to work on, exactly as the blocks above do.

   A figure that will not fit scrolls rather than shrinks. Below about 560px
   the type would fall under 12px and the figure would be decoration instead
   of a diagram — so the container scrolls and the drawing stays legible.
   ========================================================================= */

.blk-fig{ margin:2px 0 0; }
.blk-svg{ display:block; width:100%; height:auto; }
/* Two drawings of the same figure; the column width picks one. The first cut
   drew only the wide one and let it scroll on a phone — which is the right
   answer for a wide table and the wrong one for a diagram, since half a
   spectrum off the side of the screen defeats the only thing a spectrum is
   for. Below 34rem the narrow layout takes over: the spectrum stands its axis
   up, the side-by-side figures stack. */
.blk-svg-narrow{ display:none; }
@media (max-width:34rem){
  .blk-svg-wide{ display:none; }
  .blk-svg-narrow{ display:block; }
}

/* — strokes ————————————————————————————————————————————————————
   Figures carry their OWN line weights rather than the block rules' --bl-line.
   Those alphas are tuned for a hairline under a table row, where the eye is
   reading text and the rule is only separating it; a figure's strokes ARE the
   content, and at .08/.14 the first cut of these read as a smudge on the
   ground rather than as a drawing. */
.il-block{
  --fg-line:rgba(var(--th-ink-rgb),0.20);
  --fg-line2:rgba(var(--th-ink-rgb),0.34);
}
.fig-axis, .fig-spoke, .fig-ring, .fig-tie, .fig-dashed{ fill:none; }
.fig-axis{ stroke:var(--fg-line2); stroke-width:1.1; }
.fig-spoke{ stroke:var(--fg-line); stroke-width:1.1; }
.fig-spoke-lead{ stroke:rgba(var(--th-acc-rgb),0.7); stroke-width:1.4; }
.fig-tie{ stroke:var(--fg-line); stroke-width:1; stroke-dasharray:2 4; }
/* the line two positions face each other across — firmer than a rule, because
   in a `versus` it IS the claim, not a separator between two lists */
.fig-divide{ stroke:var(--fg-line2); stroke-width:1; fill:none; }
/* an option that did not survive — dimmed, and ruled through the width of the
   row rather than the width of the words, so nothing has to measure text */
.fig-struck{ stroke:rgba(var(--th-ink-rgb),0.30); stroke-width:1; }
.fig-out{ opacity:.42; }
/* the moment you lose the choice: everything above the bracket is what you
   already allowed */
.fig-bracket{ fill:none; stroke:rgba(var(--th-acc-rgb),0.6); stroke-width:1.3; }
/* the arc that carries a cycle back to its own beginning, and the arc of a
   relation that turns — both are the claim, so both take the accent */
.fig-return{ fill:none; stroke:rgba(var(--th-acc-rgb),0.5); stroke-width:1.3; }
.fig-returntip{ fill:rgba(var(--th-acc-rgb),0.7); }
.fig-arc{ fill:none; stroke:rgba(var(--th-acc-rgb),0.65); stroke-width:1.8; }
.fig-dashed{ stroke:var(--fg-line); stroke-width:1; stroke-dasharray:2 5; }
.fig-tip{ fill:rgba(var(--th-ink-rgb),0.40); }
.fig-box{ fill:rgba(var(--th-ink-rgb),0.045); stroke:var(--fg-line); stroke-width:1; }
/* the anchor of a figure, held by weight rather than by colour — the accent is
   one moment and it belongs to whatever the lesson is claiming */
.fig-box-core{ fill:rgba(var(--th-ink-rgb),0.07); stroke:var(--fg-line2); stroke-width:1.2; }
/* Each band re-applies the same translucent fill; three of them stack into a
   depth ramp on their own, so no layer has to know how deep it is. */
.fig-ring{ fill:rgba(var(--th-ink-rgb),0.038); stroke:var(--fg-line); stroke-width:1; }

/* — the one accent moment ———————————————————————————————————
   It lands on what the lesson is actually claiming — the middle band, the
   inference rule, the outermost whole, the composed result, the answer the
   argument turns on — and on nothing else in the figure. */
.fig-band{ fill:rgba(var(--th-acc-rgb),0.09); }
.fig-bandline{ stroke:var(--th-acc); stroke-width:2.4; stroke-linecap:round; }
.fig-bandtick{ stroke:rgba(var(--th-acc-rgb),0.85); stroke-width:1.2; }
.fig-rule{ stroke:rgba(var(--th-acc-rgb),0.7); stroke-width:1.2; }
.fig-there{ fill:var(--th-acc); font-family:var(--bs); font-size:16px; }
.fig-ring-lead{ stroke:rgba(var(--th-acc-rgb),0.6); stroke-width:1.2; }
.fig-box-lead{ fill:rgba(var(--th-acc-rgb),0.10); stroke:rgba(var(--th-acc-rgb),0.55); stroke-width:1.2; }
.fig-flow{ stroke:rgba(var(--th-acc-rgb),0.6); stroke-width:1.4; }
.fig-flowtip{ fill:rgba(var(--th-acc-rgb),0.8); }
.fig-kick-lead{ fill:var(--th-acc); }

/* — type ————————————————————————————————————————————————————
   Sizes are in viewBox units. At the lesson column's width a figure renders at
   roughly 0.85 scale, so 16 here reads as ~13.5 — the size of the prose it
   sits beside, which is the point: a figure is part of the reading, not a
   caption to it. The hierarchy is set in explicit alpha rather than the
   --th-ink2/3 tokens so the four levels stay four levels in every theme. */
.fig-lead{ font-family:var(--bs); font-size:16px; fill:var(--th-ink); }
.fig-lead-q{ fill:rgba(var(--th-ink-rgb),0.78); }
.fig-line{ font-family:var(--bs); font-size:16px; fill:rgba(var(--th-ink-rgb),0.80); }
.fig-concl{ fill:var(--th-ink); }
.fig-label{ font-family:var(--bg); font-size:13px; fill:rgba(var(--th-ink-rgb),0.80); }
.fig-note{ font-family:var(--bg); font-size:11.5px; fill:rgba(var(--th-ink-rgb),0.56); }
.fig-kick{ font-family:var(--bg); font-size:10.5px; letter-spacing:.15em; fill:rgba(var(--th-ink-rgb),0.50); }
.fig-legend{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; fill:rgba(var(--th-ink-rgb),0.50); }
.fig-op{ font-family:var(--bs); font-size:26px; fill:rgba(var(--th-ink-rgb),0.45); }