/* Analysis concepts (/analysis-concepts). Only this page's figures live here;
   sections, tables, steps, panels and FAQ are the shared world in site.css and
   home.css. scroll.js plays the chain ([data-seq]) and the route chips
   ([data-stagger]); at rest, or without the script, everything shows. */

/* ── the chain: six links, lit in turn ── */
.ac-chain { margin-top: 56px; }
.ac-chain__row { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ac-chain__row::before { content: ""; position: absolute; left: 6%; right: 6%; top: 28px; height: 1px; background: linear-gradient(90deg, rgba(92, 200, 255, 0.1), rgba(92, 200, 255, 0.55), rgba(110, 231, 183, 0.5)); }
.ac-chain__row li {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 44px 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: #0a1019;
}
.ac-chain__row li::before { content: ""; position: absolute; top: 23px; left: 14px; width: 11px; height: 11px; border: 1px solid rgba(92, 200, 255, 0.8); border-radius: 50%; background: var(--bg); box-shadow: 0 0 10px rgba(92, 200, 255, 0.5); }
.ac-chain__row li.is-on { border-color: rgba(92, 200, 255, 0.45); box-shadow: 0 0 40px -16px rgba(92, 200, 255, 0.7); }
.ac-chain__row li.is-on::before { background: #5cc8ff; }
.ac-chain__row li.is-end::before { border-color: var(--live); box-shadow: 0 0 10px rgba(110, 231, 183, 0.6); }
.ac-chain__row li.is-end.is-on { border-color: rgba(110, 231, 183, 0.45); box-shadow: 0 0 40px -16px rgba(110, 231, 183, 0.6); }
.ac-chain__row li.is-end.is-on::before { background: var(--live); }
.ac-chain__row small { font: 500 9.5px/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #9fd8ff; }
.ac-chain__row li.is-end small { color: var(--live); }
.ac-chain__row b { margin-top: 10px; font: 500 22px/1.15 var(--font-display); letter-spacing: -0.01em; color: var(--fg); overflow-wrap: anywhere; }
.ac-chain__row span { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.ac-chain__note { margin: 22px 0 0; max-width: 84ch; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
/* At rest the lit state is the finished one. */
.ac-chain:not(.is-armed) .ac-chain__row li { border-color: rgba(92, 200, 255, 0.3); }

.ac-defs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.ac-defs .define { margin-top: 40px; }

.ac-proof { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 28px 56px; align-items: start; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line-soft); }
.ac-proof__head h3 { margin: 12px 0 0; font: 500 25px/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--fg); }
.ac-proof__head > p:not(.kicker) { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.ac-proof__nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; margin: 0; }
.ac-proof__nums div { padding-top: 14px; border-top: 1px solid var(--line); }
.ac-proof__nums dt { font: 500 10px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.ac-proof__nums dd { margin: 8px 0 0; font: 500 40px/1 var(--font-display); letter-spacing: -0.02em; color: var(--fg); }
.ac-proof__nums dd small { font: 500 13px var(--font-mono); letter-spacing: 0.06em; color: var(--muted); }
.ac-proof__nums span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ── OpenStudyBuilder routes ── */
.ac-routes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 18px; list-style: none; }
.ac-routes li { padding: 7px 11px; border: 1px solid rgba(92, 200, 255, 0.3); border-radius: 8px; background: rgba(92, 200, 255, 0.06); font: 500 11.5px var(--font-mono); letter-spacing: 0.02em; color: rgba(236, 239, 244, 0.9); }

/* ── statuses ── */
.ac-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 36px 0 0; font-size: 13px; color: var(--muted); }
.ac-legend .ac-tag:not(:first-child) { margin-left: 14px; }
.ac-tag { display: inline-block; padding: 3px 8px; border-radius: 4px; font: 600 9px/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.ac-tag--live { border: 1px solid rgba(110, 231, 183, 0.4); background: rgba(110, 231, 183, 0.08); color: var(--live); }
.ac-tag--built { border: 1px solid rgba(92, 200, 255, 0.4); background: rgba(92, 200, 255, 0.07); color: #9fd8ff; }
.ac-tag--draft { border: 1px dashed rgba(236, 239, 244, 0.35); color: rgba(236, 239, 244, 0.75); }
.ac-legend + .table-wrap { margin-top: 18px; }
.ac-table td:last-child { white-space: nowrap; }

/* ── the public-protocol run ── */
.ac-run { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 48px; }
.ac-run__cell { padding: 22px 22px 20px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--card); }
.ac-run__cell b { display: block; font: 500 44px/1 var(--font-display); letter-spacing: -0.025em; color: var(--fg); font-variant-numeric: tabular-nums; }
.ac-run__cell span { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.ac-run__cell--held { border-style: dashed; border-color: rgba(236, 239, 244, 0.25); }
.ac-run__cell--held b { color: rgba(236, 239, 244, 0.75); }

@media (max-width: 1100px) {
  .ac-chain__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ac-chain__row::before { display: none; }
}
@media (max-width: 900px) {
  .ac-defs, .ac-proof { grid-template-columns: 1fr; }
  .ac-run { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ac-chain__row { grid-template-columns: 1fr; gap: 8px; }
  .ac-chain__row li { padding: 14px 14px 14px 40px; }
  .ac-chain__row li::before { top: 17px; }
  .ac-chain__row b { margin-top: 6px; font-size: 20px; }
  .ac-proof__nums, .ac-run { grid-template-columns: 1fr; }
  .ac-table td:last-child { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-chain__row li { transition: none; }
}

/* ══ The page's own world: the statistical table shell. A TFL in mono with
   real table rules and x placeholders, a lineage traced back from one cell,
   section heads numbered like outputs under table rules. ══ */
.page-tfl main { counter-reset: tfl; }
.tfl-hero { padding: 136px 0 80px; }
.tfl-hero__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px 64px; align-items: start; }
.tfl { margin: 0; padding: 26px 28px 22px; border: 1px solid rgba(255, 255, 255, 0.14); background: #070b11; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9); animation: heroUp 0.9s var(--ease-out) 0.15s both; }
.tfl__title { margin: 0 0 14px; font: 500 13px/1.6 var(--font-mono); text-align: center; color: #e6edf5; }
.tfl__title b { display: block; font-weight: 600; color: #fff; }
.tfl__title span { display: block; color: var(--muted); }
.tfl__table { width: 100%; border-collapse: collapse; border-top: 1px solid rgba(255, 255, 255, 0.7); border-bottom: 1px solid rgba(255, 255, 255, 0.7); font: 400 12.5px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.8); }
.tfl__table thead th { padding: 8px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.7); font-weight: 500; text-align: center; color: #fff; }
.tfl__table tbody th { padding: 7px 6px; font-weight: 400; text-align: left; color: rgba(255, 255, 255, 0.74); }
.tfl__table td { padding: 7px 6px; text-align: center; white-space: nowrap; }
.tfl__table .is-traced th, .tfl__table .is-traced td { color: #fff; }
.tfl__table mark { padding: 2px 6px; border-radius: 2px; background: rgba(92, 200, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(92, 200, 255, 0.7); color: #fff; }
.tfl__foot { margin: 10px 0 0; font: 400 11px/1.5 var(--font-mono); color: var(--label); }
.tfl__trace { position: relative; display: grid; gap: 7px; margin: 18px 0 0; padding: 14px 0 0 26px; list-style: none; border-top: 1px dashed rgba(92, 200, 255, 0.35); }
.tfl__trace::before { content: ""; position: absolute; left: 8px; top: 20px; bottom: 8px; width: 1px; background: linear-gradient(180deg, #5cc8ff, rgba(110, 231, 183, 0.8)); }
.tfl__trace li { position: relative; display: grid; grid-template-columns: 70px auto minmax(0, 1fr); align-items: baseline; gap: 10px; font: 400 12px var(--font-mono); }
.tfl__trace li::before { content: ""; position: absolute; left: -22px; top: 0.4em; width: 7px; height: 7px; border: 1px solid #5cc8ff; border-radius: 50%; background: #070b11; }
.tfl__trace small { font: 600 9.5px var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(159, 216, 255, 0.78); }
.tfl__trace code { font-size: 12.5px; color: #b6f6ff; }
.tfl__trace span { font-family: var(--font-ui); color: var(--muted); }
.tfl__trace .is-src { grid-template-columns: 70px minmax(0, 1fr); }
.tfl__trace .is-src::before { border-color: var(--live); background: var(--live); }
.tfl__trace q { font: italic 400 15.5px/1.4 var(--font-display); color: #fff; }

/* sections are numbered like outputs, under a table rule */
.page-tfl .section { counter-increment: tfl; }
.page-tfl .section-head { max-width: none; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.5); background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)) 0 3px / 100% 1px no-repeat; }
.page-tfl .section-head > * { max-width: 760px; }
.page-tfl .section-head .kicker::before { content: "14." counter(tfl) "   "; white-space: pre; color: #9fd8ff; }

@media (max-width: 1100px) { .tfl-hero__grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .tfl-hero { padding-top: 112px; }
  .tfl { padding: 18px 14px; overflow-x: auto; }
  .tfl__table { font-size: 11px; }
  .tfl__trace li, .tfl__trace .is-src { grid-template-columns: 1fr; gap: 2px; }
}