/* ============================================================================
   Advance Basis articles: landing-family presentation pages (/articles/*).
   Inherits the landing tokens ([data-theme] blocks live in landing.css, which
   is always loaded alongside this sheet). First use: the report-anatomy
   explainer, whose centerpiece is the real example report embedded in a
   shadow root and scaled down, flanked by explanation cards with measured
   connector paths.
   ============================================================================ */

.article-main { position:relative; z-index:2; width:min(1240px,100%); margin:0 auto; padding:0 32px; }

.article-head { max-width:64ch; padding:64px 0 36px; }
.article-eyebrow { font:500 11px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.06em; color:var(--sig); }
.article-head h1 { font:600 clamp(30px,4vw,44px)/1.1 'Hanken Grotesk',sans-serif; color:var(--ink); letter-spacing:-0.02em; margin-top:14px; }
/* The brand word inside article prose and headings: the wordmark face at
   the surrounding text size (AI-319). */
.ergo-name {
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:700;
  letter-spacing:0.005em;
}
.article-dek { font:400 clamp(15px,1.6vw,17.5px)/1.6 'Hanken Grotesk',sans-serif; color:var(--soft); margin-top:16px; max-width:58ch; }
.article-dek a { color:var(--sig); }

/* ---- Anatomy diagram: sheet center, cards in side rails, SVG overlay ---- */
.anatomy { position:relative; display:grid; grid-template-columns:1fr 470px 1fr; gap:34px; align-items:start; padding:26px 0 40px; }
.anatomy-rail { position:relative; z-index:2; align-self:stretch; }
.anatomy-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.anatomy-svg path { fill:none; stroke-width:1.5; stroke-dasharray:1 7; stroke-linecap:round; opacity:.62; }
.anatomy-svg circle { opacity:.9; }

/* Explanation cards */
.anat-card { border:1px solid var(--rule); border-radius:12px; background:var(--panel); padding:16px 18px 17px; box-shadow:0 12px 32px rgba(5,8,14,.42), 0 2px 8px rgba(5,8,14,.28); }
/* Per-organ accents: kicker, chip, and (via script) the connector share a hue. */
.anat-card[data-anchor="r-metrics"] .anat-card-kicker { color:var(--sig); }
.anat-card[data-anchor="r-claims"] .anat-card-kicker { color:var(--sig2); }
.anat-card[data-anchor="r-tiers"] .anat-card-kicker { color:var(--amber); }
.anat-card[data-anchor="r-unknowns"] .anat-card-kicker { color:var(--rose); }
.anat-card[data-anchor="r-appendix"] .anat-card-kicker { color:var(--green); }
.anat-card[data-anchor="r-colophon-foot"] .anat-card-kicker { color:var(--brand); }
.anat-card-kicker { font:500 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.07em; color:var(--sig); }
.anat-card h3 { font:600 16px/1.3 'Hanken Grotesk',sans-serif; color:var(--ink); margin-top:8px; }
.anat-card p { font:400 13.5px/1.6 'Hanken Grotesk',sans-serif; color:var(--soft); margin-top:8px; }
.anat-card .stage-chip { display:inline-block; margin-top:11px; font:500 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.05em; color:var(--brand); border:1px solid var(--rule2); border-radius:5px; padding:5px 8px; }

/* ---- The embedded report sheet ----
   The real report, truncated, inside a shadow root carrying the artifact
   stylesheets; scaled to fit the column by the page script. The frame owns
   the document look on the page: rounded, floated, clipped. */
.report-sheet { position:relative; z-index:2; border-radius:10px; overflow:hidden; box-shadow:0 18px 44px rgba(5,8,14,.35); border:1px solid rgba(127,127,127,.35); }
.sheet-host { width:820px; transform-origin:top left; display:block; }

/* ---- Prose + close ---- */
.article-prose { max-width:66ch; padding:12px 0 26px; }
.article-prose h2 { font:600 22px/1.3 'Hanken Grotesk',sans-serif; color:var(--ink); margin-top:26px; }
.article-prose p { font:400 15.5px/1.7 'Hanken Grotesk',sans-serif; color:var(--soft); margin-top:14px; }
.article-prose .accent { color:var(--sig); }
.article-prose a { color:var(--sig); }
.article-cta { display:flex; gap:14px; flex-wrap:wrap; padding:8px 0 78px; }
.article-cta a { font:500 11px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.02em; border:1px solid var(--rule2); border-radius:6px; padding:11px 16px; color:var(--ink); transition:border-color .25s,color .25s; }
.article-cta a:hover { border-color:var(--sig); color:var(--sig); }

/* ---- Narrow: stack sheet then cards, no connectors ---- */
@media (max-width: 1120px) {
  .anatomy { grid-template-columns:1fr; }
  .anatomy-rail { display:flex; flex-direction:column; gap:22px; }
  .anatomy-svg { display:none; }
  .report-sheet { order:0; max-width:520px; margin:0 auto; }
  .anatomy-rail.is-left { order:1; }
  .anatomy-rail.is-right { order:2; }
}

/* ---- Part one: the run funnel ----
   A single real run traced top to bottom. Flow segments are SVG trapezoids
   whose widths map to the run's actual counts; a dashed current drifts
   through them. Unique to this article, but built from the site's tokens. */
.flow { max-width:820px; margin:0 auto; padding:10px 0 30px; }
.flow-stage { border:1px solid var(--rule); border-radius:14px; background:var(--panel); padding:22px 26px 20px; display:grid; grid-template-columns:1fr auto; gap:6px 24px; }
.flow-kicker { font:500 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.07em; color:var(--sig); grid-column:1; }
.flow-stage h2 { font:600 21px/1.25 'Hanken Grotesk',sans-serif; color:var(--ink); margin-top:6px; grid-column:1; }
.flow-count { grid-column:2; grid-row:1 / span 2; align-self:center; text-align:right; }
.flow-count b { display:block; font:600 34px/1 'IBM Plex Mono',monospace; color:var(--sig); letter-spacing:-0.02em; }
.flow-count span { display:block; font:500 9.5px/1.4 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); margin-top:6px; max-width:150px; }
.flow-stage p { grid-column:1 / -1; font:400 14.5px/1.65 'Hanken Grotesk',sans-serif; color:var(--soft); margin-top:10px; }
.flow-note { grid-column:1 / -1; margin-top:14px; padding-top:11px; border-top:1px dashed var(--rule); font:400 13px/1.6 'Hanken Grotesk',sans-serif; color:var(--faint); }
.flow-note a { color:var(--sig); }
.flow-out { grid-column:1 / -1; margin-top:12px; }
.flow-out span { display:inline-block; font:500 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.05em; color:var(--brand); border:1px solid var(--rule2); border-radius:5px; padding:5px 8px; }
.flow-seg { display:block; width:300px; height:84px; margin:0 auto; }
.flow-seg path.band { fill:var(--sigsoft); stroke:var(--sig); stroke-opacity:.34; stroke-width:1; }
.flow-seg line.current { stroke:var(--sig); stroke-width:1.4; stroke-dasharray:3 7; opacity:.65; animation:drwFlowDash 1.6s linear infinite; }
@keyframes drwFlowDash { to { stroke-dashoffset:-20; } }
@media (prefers-reduced-motion: reduce) { .flow-seg line.current { animation:none; } }
.flow-end { text-align:center; padding:6px 0 10px; }
.flow-end .dots { display:inline-flex; gap:2px; margin-right:8px; vertical-align:-1px; }
.flow-end .dots i { width:7px; height:7px; background:var(--brand); display:inline-block; }
.flow-end .dots i:nth-child(1){opacity:.4} .flow-end .dots i:nth-child(2){opacity:.68}
.flow-end strong { font:600 13px/1 'IBM Plex Mono',monospace; letter-spacing:.03em; color:var(--ink); text-transform:uppercase; }
.flow-end a { color:var(--sig); }

/* ---- Field notes ToC: translucent tape strips, like the hero pull quote ---- */
.toc { display:grid; grid-template-columns:1fr; gap:20px; padding:8px 0 80px; max-width:860px; }
.toc-entry { display:block; border-radius:12px; padding:20px 24px 19px; transition:filter .25s; }
.toc-entry.is-green { background:linear-gradient(to right, var(--sigsoft), transparent 88%); }
.toc-entry.is-orange { background:linear-gradient(to right, color-mix(in srgb, var(--brand) 15%, transparent), transparent 88%); }
.toc-entry:hover { filter:brightness(1.18); }
.toc-kicker { font:500 10px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.07em; color:var(--sig); }
.toc-entry.is-orange .toc-kicker, .toc-entry.is-orange .toc-go { color:var(--brand); }
.toc-entry h2 { font:600 19px/1.3 'Hanken Grotesk',sans-serif; color:var(--ink); margin-top:9px; }
.toc-entry p + h2 { margin-top:0; }
.toc-entry > p:not(.toc-kicker) { font:400 14px/1.6 'Hanken Grotesk',sans-serif; color:var(--soft); margin-top:9px; }
.toc-go { display:inline-block; margin-top:14px; font:500 10.5px/1 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.03em; color:var(--sig); }
/* ---- Policy prose ---- */
.article-prose.policy { padding-bottom:70px; }
.article-prose.policy h2 { font-size:19px; margin-top:30px; }

/* ---- Unlisted legal review pages ----
   These pages reuse the public article surface, but long policy text needs a
   stronger reading measure and explicit draft state. Nothing here is product
   UI precedent. */
.legal-review-main { width:min(1040px,100%); }
.legal-review-head { max-width:76ch; padding:48px 0 20px; }
.legal-review-state {
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  gap:28px;
  align-items:start;
  padding:18px 0;
  border-top:1px solid var(--rule2);
  border-bottom:1px solid var(--rule2);
}
.legal-review-state .article-eyebrow { margin:0; }
.legal-review-state strong {
  display:block;
  margin-top:8px;
  font:500 11px/1.4 'IBM Plex Mono',monospace;
  letter-spacing:0;
  text-transform:uppercase;
  color:var(--brand);
}
.legal-review-state p {
  margin:0;
  font:400 14px/1.65 'Hanken Grotesk',sans-serif;
  letter-spacing:0;
  color:var(--soft);
}
.legal-review-state a { color:var(--sig); text-underline-offset:3px; }
.legal-review-switch {
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:20px;
  border-bottom:1px solid var(--rule);
}
.legal-review-switch a {
  position:relative;
  padding:0 0 12px;
  font:500 11px/1 'IBM Plex Mono',monospace;
  letter-spacing:0;
  text-transform:uppercase;
  color:var(--faint);
}
.legal-review-switch a:hover,
.legal-review-switch a:focus-visible { color:var(--ink); }
.legal-review-switch a.is-active { color:var(--sig); }
.legal-review-switch a.is-active::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:var(--sig);
}
.legal-document { max-width:76ch; padding-top:16px; }
.legal-document h1 {
  margin:16px 0 0;
  font:600 36px/1.15 'Hanken Grotesk',sans-serif;
  letter-spacing:0;
  color:var(--ink);
}
.legal-document h2 {
  scroll-margin-top:100px;
  margin-top:40px;
  padding-top:8px;
  border-top:1px solid var(--rule);
  font-size:19px;
  letter-spacing:0;
}
.legal-document h3 {
  margin-top:28px;
  font:600 15px/1.4 'Hanken Grotesk',sans-serif;
  letter-spacing:0;
  color:var(--ink);
}
.legal-document p,
.legal-document li { letter-spacing:0; }
.legal-document ul,
.legal-document ol {
  margin:14px 0 0;
  padding-left:24px;
  color:var(--soft);
  font:400 15.5px/1.7 'Hanken Grotesk',sans-serif;
}
.legal-document li + li { margin-top:7px; }
.legal-document strong { color:var(--ink); font-weight:600; }
.legal-document blockquote {
  margin:20px 0 26px;
  padding:5px 0 5px 18px;
  border-left:2px solid var(--brand);
}
.legal-document blockquote p {
  margin:0;
  color:var(--faint);
  font:400 13px/1.65 'IBM Plex Mono',monospace;
  letter-spacing:0;
}
.legal-document blockquote p + p { margin-top:8px; }
.legal-document code {
  font-family:'IBM Plex Mono',monospace;
  font-size:.9em;
  color:var(--sig);
}

@media (max-width:760px) {
  .article-main.legal-review-main { padding:0 22px; }
  .legal-review-head { padding-top:34px; }
  .legal-review-state { grid-template-columns:1fr; gap:12px; }
  .legal-review-switch { gap:18px; }
  .legal-document h1 { font-size:30px; }
}