/* Alef pages (/scientific/alef/ and its sub-pages), ported from the former Industrial site; prefix fi-.
   Loaded only on the pages of the "alef" group (<link data-group="alef"> in scripts/scientific-pages/alef.html);
   body[data-page] is alef, alef_how, alef_materials, ... so [data-page^="alef"] selects them all. */

/* Sections with a figure: the figure goes first on wide screens */
@media (min-width: 861px) {
  .fi-flip > :last-child{ order: -1; }
}
/* Beside a longer text column the figure sits level with it, not hung from the top edge. */
[data-page^="alef"] .ff-section > .ff-figure, [data-page^="gimel"] .ff-section > .ff-figure{ align-self: center; }
.fi-figure-cap{ width: 100%; max-width: 520px; }
.fi-figures{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.fi-list li > strong,
.fi-list li > span{ display: block; }
.fi-list li > span{ margin-top: 2px; }

/* A figure that is a revealed section's second child opens as a window. */
[data-page^="alef"] .ff-section[data-ff-reveal] > .ff-figure[data-ff-reveal]{
  transform: scaleX(var(--ff-p, 1));
  opacity: min(calc(var(--ff-p, 1) * 2), 1);
}
/* Stacked layout: fade only, no scaleX "book" opening (see shared/ff/site.css, small screens). */
@media (max-width: 860px) {
  [data-page^="alef"] .ff-section[data-ff-reveal] > .ff-figure[data-ff-reveal]{ transform: none; }
}

/* Nesting drawing: inline SVG in tokens, its parts draw themselves in as --ff-p advances */
.fi-nest svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.fi-nest__plate{ fill: var(--stage-100); stroke: var(--rule); stroke-width: 2; }
.fi-nest__plate--auto{ stroke: var(--accent); }
.fi-nest__parts > *{ fill: none; stroke: var(--ink-muted); stroke-width: 2; }
.fi-nest__guests > *{ fill: none; stroke: var(--accent); stroke-width: 2; }
.fi-nest__leftover{ fill: url(#fi-hatch); }
.fi-nest__hatch{ stroke: var(--accent); stroke-width: 1.4; opacity: 0.5; }
.fi-nest__edge{ stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 9 7; }
.fi-nest__key-box{ stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 4 3; }
.fi-nest__key{ fill: none; stroke: var(--accent); stroke-width: 1.8; }
.fi-nest__rule{ stroke: var(--rule); stroke-width: 1.4; }
.fi-nest__label, .fi-nest__small{ font-family: var(--font-sans); fill: var(--ink-muted); }
.fi-nest__label{ font-size: 26px; }
.fi-nest__small{ font-size: 22px; }
.fi-nest__label--accent, .fi-nest__small--accent{ fill: var(--accent-ink); }
.fi-nest .fi-draw{
  --fi-d: clamp(0, calc((var(--ff-p, 1) - var(--i, 0) * 0.045) * 2.2), 1);
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--fi-d));
}
.fi-nest .fi-late{ opacity: clamp(0, calc((var(--ff-p, 1) - 0.55) * 2.5), 1); }

/* The other Alef drawings: same draw-in, filled shapes fill as their outline closes,
   text and dashed lines (which cannot be dash-drawn) fade in on the same --i clock.
   --fi-p holds the drawing back until the figure window is a third open. */
.fi-anim{ --fi-p: clamp(0, calc((var(--ff-p, 1) - 0.3) / 0.7), 1); }
.fi-anim > svg{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fi-anim .fi-draw{
  --fi-d: clamp(0, calc((var(--fi-p) - var(--i, 0) * 0.045) * 2.2), 1);
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--fi-d));
  fill-opacity: var(--fi-d);
}
.fi-anim .fi-fade{ opacity: clamp(0, calc((var(--fi-p) - var(--i, 0) * 0.045) * 2.2), 1); }
.fi-a__bg{ fill: var(--stage-100); }
.fi-a__grid{ fill: none; stroke: var(--stage-200); stroke-width: 1; }
.fi-a__part{ fill: var(--paper); stroke: var(--ink); stroke-width: 2.4; }
.fi-a__part--thin{ stroke-width: 2; }
.fi-a__part--accent{ stroke: var(--accent); stroke-width: 3; }
.fi-a__hole{ fill: var(--stage-100); stroke: var(--ink); stroke-width: 2.2; }
.fi-a__hole--thin{ stroke-width: 2; }
.fi-a__hole--accent{ stroke: var(--accent); stroke-width: 2.4; }
.fi-a__line{ fill: none; stroke: var(--ink); stroke-width: 1.4; }
.fi-a__rule{ fill: none; stroke: var(--stage-300); stroke-width: 1.4; }
.fi-a__accent{ fill: none; stroke: var(--accent); stroke-width: 2; }
.fi-a__accent--bold{ stroke-width: 2.6; }
.fi-a__axis line{ stroke: var(--rule); stroke-width: 1; stroke-dasharray: 18 5 3 5; }
.fi-a__bc{ fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 12 5 3 5; }
.fi-a__soft-bold line{ fill: none; stroke: var(--stage-300); stroke-width: 2; }
.fi-a__loose{ fill: none; stroke: var(--rule); stroke-width: 2.6; stroke-linecap: round; }
.fi-a__loose-node rect{ fill: var(--paper); stroke: var(--rule); stroke-width: 2; }
.fi-a__dim line{ stroke: var(--accent); stroke-width: 1.6; }
.fi-a__dim .fi-a__ext{ stroke-width: 1; stroke-dasharray: 4 4; }
.fi-a__arrow{ fill: var(--accent); }
.fi-a__sheet{ stroke-width: 2; }
.fi-a__sheet--4{ fill: var(--stage-300); stroke: var(--rule); }
.fi-a__sheet--3{ fill: var(--stage-300); stroke: var(--rule); }
.fi-a__sheet--2{ fill: var(--stage-200); stroke: var(--rule); }
.fi-a__sheet--1{ fill: var(--stage-200); stroke: var(--rule); }
.fi-a__sheet--top{ fill: var(--accent); stroke: var(--accent-ink); stroke-width: 2.4; }
.fi-a__cut{ fill: var(--stage-100); stroke: var(--ink); stroke-width: 2; }
.fi-a__cut--ring{ fill: var(--accent); }
.fi-a__t{ font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.08em; fill: var(--ink-muted); }
.fi-a__t--soft{ fill: var(--rule); }
.fi-a__t--muted{ fill: var(--ink-muted); }
.fi-a__t--ink{ fill: var(--ink); }
.fi-a__t--accent{ fill: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) {
  .fi-nest .fi-draw, .fi-anim .fi-draw{ stroke-dashoffset: 0; fill-opacity: 1; }
  .fi-nest .fi-late, .fi-anim .fi-fade{ opacity: 1; }
}

@media (max-width: 860px) {
  .fi-figures{ grid-template-columns: 1fr; }
  .fi-figure-cap{ max-width: none; }
  /* A three-column table reads as stacked rows on a phone: name, basis, when. */
  .fi-table-stack thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fi-table-stack tr{ display: block; padding: var(--space-3) 0; border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
  .fi-table-stack tbody tr:last-child{ border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
  .fi-table-stack th, .fi-table-stack td,
  .fi-table-stack tbody tr:last-child th, .fi-table-stack tbody tr:last-child td{ display: block; padding: 0; border: 0; }
  .fi-table-stack td{ margin-top: var(--space-1); }
  .fi-table-stack td + td{ font-size: 13px; }
}

/* The 3D scenes (scenes.css) follow the site tokens on the Alef pages, so a restyle of the tokens carries through. */
body[data-page^="alef"]{
  --fi-scene-bg: var(--stage-200);
  --fi-scene-line: var(--ink);
  --fi-scene-muted: var(--ink-muted);
  --fi-scene-accent: var(--accent);
  --fi-scene-accent-ink: var(--accent-ink);
  --fi-scene-rule: var(--rule);
}

/* A section that carries a scene under its heading. */
.fi-scene{ min-width: 0; }
.fi-scene .scn-gasket { max-width: 100%; }

/* The path an order follows, as a row of chips. */
.fi-path{ gap: var(--space-2) var(--space-3); align-items: center; }
.fi-path li{ padding: 0; border: 0; }
.fi-path li + li::before{ content: '→'; margin-right: var(--space-3); color: var(--ink-muted); }
.fi-path li > span{ display: inline-block; padding: 2px var(--space-2); border: 1px solid var(--accent); border-radius: var(--radius-sm); color: var(--accent-ink); }