/* Roof-Rank decorative graphics — the bespoke mockups tied to specific
   content (hero citation trace, entity/schema diagrams, close-rate charts,
   schematic node detail panels). Built from the same tokens as everything
   else; nothing here introduces a new color or a shadow. */

/* ---- hero: citation trace (pipeline) ---- */

.gfx-pipeline { position: relative; margin: 52px auto 0; max-width: 788px; text-align: left; }
.gfx-pipeline__glow { position: absolute; left: 50%; top: -40px; width: 620px; height: 280px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(var(--color-primary-rgb), 0.13), transparent 72%); pointer-events: none; }
.gfx-pipeline__panel { position: relative; border: 1px solid var(--border-hairline); border-radius: 22px; background: var(--color-card); overflow: hidden; }
.gfx-pipeline__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--border-hairline-soft); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; color: var(--color-faint); }
.gfx-pipeline__live { display: flex; align-items: center; gap: 8px; color: var(--color-primary); }
.gfx-pipeline__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); display: inline-block; animation: rr-pulse 1.8s ease-in-out infinite; }
@keyframes rr-pulse { 0%, 100% { opacity: .28; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } }
.gfx-pipeline__body {
  display: grid;
  grid-template-columns: 1.22fr 1fr;
  grid-template-areas: "query sources" "answer sources";
  gap: 16px 22px;
  padding: 20px 20px 0;
}
.gfx-pipeline__col-query { grid-area: query; }
.gfx-pipeline__col-sources { grid-area: sources; }
.gfx-pipeline__col-answer { grid-area: answer; }
.gfx-pipeline__query { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--border-hairline-soft); border-radius: 11px; background: var(--color-nested); }
.gfx-pipeline__query-text { font-family: var(--font-mono); font-size: 0.66rem; color: var(--color-muted); }
.gfx-pipeline__answer-label { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.14em; color: var(--color-faint); }
.gfx-pipeline__answer { margin-top: 9px; display: flex; flex-direction: column; gap: 5px; font-size: 0.82rem; line-height: 1.5; color: var(--color-subject); }
.gfx-pipeline__answer .cite-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 5px; background: var(--color-active); border: 1px solid var(--border-primary-strong); font-family: var(--font-mono); font-size: 0.56rem; color: var(--color-ink); }
.gfx-pipeline__sources-label { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.14em; color: var(--color-faint); }
.gfx-pipeline__sources { margin-top: 11px; display: flex; flex-direction: column; gap: 7px; }
.gfx-pipeline__source { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--border-hairline-soft); background: var(--color-nested); }
.gfx-pipeline__source--active { position: relative; border-color: var(--border-primary-strong); background: var(--color-active); animation: rr-hl 14s ease-out infinite; }
.gfx-pipeline__source-n { font-family: var(--font-mono); font-size: 0.6rem; color: var(--color-faint); }
.gfx-pipeline__source--active .gfx-pipeline__source-n { color: var(--color-primary); }
.gfx-pipeline__source-name { flex: 1; min-width: 0; font-size: 0.74rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gfx-pipeline__source--active .gfx-pipeline__source-name { color: var(--color-ink); }
.gfx-pipeline__source-cited { font-family: var(--font-mono); font-size: 0.54rem; letter-spacing: 0.1em; color: var(--color-primary); animation: rr-cited 14s ease-out infinite; }
.gfx-pipeline__foot { display: flex; align-items: center; gap: 16px; margin-top: 20px; padding: 13px 20px; border-top: 1px solid var(--border-hairline-soft); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; color: var(--color-faint); }
.gfx-pipeline__meter { flex: 1; height: 4px; border-radius: 2px; background: var(--color-active); overflow: hidden; }
.gfx-pipeline__meter-fill { display: block; height: 100%; border-radius: 2px; background: rgba(var(--color-primary-rgb), 0.7); width: 68%; animation: rr-meter 14s ease-out infinite; }

/* ---- bento: entity/schema tree ---- */

.gfx-tree { border: 1px solid var(--border-hairline-soft); border-radius: var(--radius-inset); background: var(--color-nested); padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 0; }
.gfx-tree__root { padding: 7px 12px; border-radius: 8px; background: var(--color-active); border: 1px solid var(--border-primary); font-family: var(--font-mono); font-size: 0.62rem; color: var(--color-primary); }
.gfx-tree__stem { width: 1px; height: 14px; background: var(--border-primary-soft); }
.gfx-tree__branch-row { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
.gfx-tree__branch-row .gfx-tree__h-line { grid-column: 1; height: 1px; background: var(--border-primary-soft); margin-left: 50%; }
.gfx-tree__branch-row .gfx-tree__h-line:nth-child(2) { grid-column: 2; margin-left: 0; }
.gfx-tree__branch-row .gfx-tree__h-line:nth-child(3) { grid-column: 3; margin-left: 0; margin-right: 50%; }
.gfx-tree__stem-row { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
.gfx-tree__stem-row .gfx-tree__v-line { width: 1px; height: 12px; background: var(--border-primary-soft); justify-self: center; }
.gfx-tree__leaves { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.gfx-tree__leaf { padding: 6px 4px; border-radius: 7px; background: var(--color-card); border: 1px solid var(--border-hairline-soft); font-family: var(--font-mono); font-size: 0.56rem; color: var(--color-muted); text-align: center; }

/* ---- bento: zero-JS payload bars ---- */

.gfx-payload { border: 1px solid var(--border-hairline-soft); border-radius: var(--radius-inset); background: var(--color-nested); padding: 16px; display: flex; align-items: center; gap: 18px; }
.gfx-payload__num { font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em; color: var(--color-ink); line-height: 1; }
.gfx-payload__num-label { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.14em; color: var(--color-caption); }
.gfx-payload__bars { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.gfx-payload__bar-row { display: flex; align-items: center; gap: 8px; }
.gfx-payload__bar-label { width: 34px; font-family: var(--font-mono); font-size: 0.52rem; color: var(--color-caption); }
.gfx-payload__bar { height: 6px; border-radius: 3px; background: rgba(var(--color-primary-rgb), 0.5); }
.gfx-payload__bar--dashed { height: 6px; width: 18px; border-radius: 3px; border: 1px dashed var(--border-primary-soft); }
.gfx-payload__bar-none { font-family: var(--font-mono); font-size: 0.52rem; color: var(--color-faint); white-space: nowrap; }

/* ---- bento: llms.txt file mock ---- */

.gfx-llms { border: 1px solid var(--border-hairline-soft); border-radius: var(--radius-inset); background: var(--color-nested); overflow: hidden; }
.gfx-llms__head { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--border-hairline-soft); font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; color: var(--color-caption); }
.gfx-llms__valid { display: inline-flex; align-items: center; gap: 5px; color: var(--color-primary); }
.gfx-llms__body { padding: 14px; display: flex; flex-direction: column; gap: 8px; font-family: var(--font-mono); font-size: 0.56rem; color: var(--color-caption); }
.gfx-llms__key { color: var(--color-primary); }
.gfx-llms__bar { height: 5px; width: 58%; border-radius: 2px; background: rgba(var(--color-primary-rgb), 0.13); margin-top: 2px; }

/* ---- bento: service-hub tree (4-column variant of gfx-tree) ---- */

.gfx-hub { border: 1px solid var(--border-hairline-soft); border-radius: var(--radius-inset); background: var(--color-nested); padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 0; }
.gfx-hub__root { padding: 7px 12px; border-radius: 8px; background: var(--color-active); border: 1px solid var(--border-primary); font-family: var(--font-mono); font-size: 0.6rem; color: var(--color-primary); }
.gfx-hub__stem { width: 1px; height: 12px; background: var(--border-primary-soft); }
.gfx-hub__branch-row { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
.gfx-hub__branch-row .gfx-hub__h-line { height: 1px; background: var(--border-primary-soft); }
.gfx-hub__branch-row .gfx-hub__h-line:nth-child(1) { margin-left: 50%; }
.gfx-hub__branch-row .gfx-hub__h-line:nth-child(4) { margin-right: 50%; }
.gfx-hub__stem-row { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
.gfx-hub__stem-row .gfx-hub__v-line { width: 1px; height: 11px; background: var(--border-primary-soft); justify-self: center; }
.gfx-hub__leaves { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.gfx-hub__leaf { padding: 8px 0; border-radius: 7px; background: var(--color-card); border: 1px solid var(--border-hairline-soft); font-family: var(--font-mono); font-size: 0.52rem; color: var(--color-muted); text-align: center; }

/* ---- hero: blueprint -> shipped page (rebuild) ---- */

.gfx-build { position: relative; margin: 46px auto 0; max-width: 700px; border: 1px solid var(--border-hairline); border-radius: var(--radius-card); background: var(--color-card); overflow: hidden; text-align: left; }
.gfx-build__head { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid var(--border-hairline-soft); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; color: var(--color-faint); }
.gfx-build__live { display: flex; align-items: center; gap: 8px; color: var(--color-primary); }
.gfx-build__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); display: inline-block; animation: rr-pulse 1.8s ease-in-out infinite; }
.gfx-build__cols { display: grid; grid-template-columns: 1fr 1fr; }
.gfx-build__col { padding: 20px 18px; display: flex; flex-direction: column; gap: 9px; }
.gfx-build__col--left { border-right: 1px solid var(--border-hairline-soft); }
.gfx-build__col-label { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.14em; color: var(--color-faint); }
.gfx-build__stack { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.gfx-build__stack-row { display: flex; gap: 7px; }
/* Base .gfx-build__ph is used both as a direct (column-axis) stack child,
   where it needs a fixed height, and nested inside .gfx-build__stack-row
   (a row), where it needs flex:1 for equal width — flex:1 must stay scoped
   to the row context or it fights the fixed-height variants above it. */
.gfx-build__ph { height: 30px; flex: none; border-radius: 8px; border: 1px dashed var(--border-primary-soft); }
.gfx-build__stack-row .gfx-build__ph { flex: 1; }
.gfx-build__ph--a { height: 26px; }
.gfx-build__ph--b { height: 42px; }
.gfx-build__ph--c { height: 22px; }
.gfx-build__block { height: 26px; border-radius: 8px; background: var(--color-active); border: 1px solid rgba(var(--color-primary-rgb), 0.28); display: flex; align-items: center; padding: 0 10px; animation: rr-stack 6s ease-in-out infinite; }
.gfx-build__block-bar { height: 5px; width: 58%; border-radius: 3px; background: rgba(var(--color-primary-rgb), 0.55); }
.gfx-build__block--tall { height: 42px; background: var(--color-nested); border-color: var(--border-hairline-soft); padding: 9px 10px; flex-direction: column; justify-content: center; gap: 6px; animation-delay: 0.45s; }
.gfx-build__block-line { height: 5px; border-radius: 3px; background: rgba(var(--color-primary-rgb), 0.32); }
.gfx-build__block-line--short { width: 66%; background: rgba(var(--color-primary-rgb), 0.2); }
.gfx-build__block-line--full { width: 88%; }
.gfx-build__block--sq { flex: 1; height: 30px; background: var(--color-nested); border-color: var(--border-hairline-soft); }
.gfx-build__block--schema { height: 22px; background: var(--color-nested); border-color: rgba(var(--color-primary-rgb), 0.22); gap: 7px; }
.gfx-build__block-tag { font-family: var(--font-mono); font-size: 0.54rem; letter-spacing: 0.1em; color: var(--color-primary); }
.gfx-build__block-fill { flex: 1; height: 4px; border-radius: 2px; background: rgba(var(--color-primary-rgb), 0.28); }
.gfx-build__foot { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-top: 1px solid var(--border-hairline-soft); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; color: var(--color-faint); }
.gfx-build__launch-track { flex: 1; height: 4px; border-radius: 2px; background: var(--color-nested); overflow: hidden; }
.gfx-build__launch-fill { height: 100%; border-radius: 2px; background: rgba(var(--color-primary-rgb), 0.6); animation: rr-fill 6s ease-in-out infinite; }
.gfx-build__cited { display: inline-flex; align-items: center; gap: 7px; color: var(--color-subject); animation: rr-emit 6s ease-in-out infinite; }

/* ---- bento: small data-panel graphics (compound / ontology / unit / copy) ----
   Shared shell + row primitives reused across all four About-page bento
   graphics, the same way .mini-preview is reused across card previews. */

.gfx-mini { border: 1px solid var(--border-hairline-soft); border-radius: var(--radius-inset); background: var(--color-nested); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.gfx-mini__head { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.14em; color: var(--color-caption); white-space: nowrap; }
.gfx-mini__head-rule { flex: 1; min-width: 8px; height: 1px; background: rgba(var(--color-primary-rgb), 0.16); }
.gfx-mini__foot { display: flex; justify-content: space-between; padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--border-hairline-soft); font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.12em; color: var(--color-caption); }
.gfx-mini__foot span:last-child { color: var(--color-primary); }

.gfx-mini__row { display: flex; align-items: center; gap: 9px; }
.gfx-mini__row-label { flex: none; font-family: var(--font-mono); font-size: 0.5rem; color: var(--color-caption); }
.gfx-mini__row-label--wide { width: 80px; }
.gfx-mini__row-label--lead { color: var(--color-ink); }
.gfx-mini__row-delta { width: 22px; flex: none; text-align: right; font-family: var(--font-mono); font-size: 0.5rem; color: var(--color-muted); }
.gfx-mini__row-track { flex: 1; height: 7px; border-radius: 3px; background: rgba(var(--color-primary-rgb), 0.08); overflow: hidden; }
.gfx-mini__row-fill { display: block; height: 100%; border-radius: 3px; background: rgba(var(--color-primary-rgb), 0.32); }
.gfx-mini__row-fill--lead { background: var(--color-subject); }
.gfx-mini__row-value { width: 28px; flex: none; text-align: right; font-family: var(--font-mono); font-size: 0.5rem; color: var(--color-muted); }
.gfx-mini__row-value--lead { color: var(--color-ink); }

.gfx-mini__tree-root { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 7px; background: rgba(var(--color-primary-rgb), 0.14); font-family: var(--font-mono); font-size: 0.52rem; color: var(--color-ink); }
.gfx-mini__tree-root span:last-child { flex: 1; text-align: right; }
.gfx-mini__tree-children { display: flex; gap: 6px; padding-left: 10px; }
.gfx-mini__tree-rule { width: 1px; background: rgba(var(--color-primary-rgb), 0.2); }
.gfx-mini__tree-list { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.gfx-mini__tree-child { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border-hairline-soft); font-family: var(--font-mono); font-size: 0.5rem; color: var(--color-muted); }
.gfx-mini__tree-child span:last-child { flex: 1; text-align: right; }

.gfx-mini__quote { border-left: 2px solid rgba(var(--color-primary-rgb), 0.5); padding-left: 9px; display: flex; flex-direction: column; gap: 5px; }
.gfx-mini__quote-text { font-family: var(--font-mono); font-size: 0.54rem; color: var(--color-elevated-text); line-height: 1.5; }
.gfx-mini__quote-label { font-family: var(--font-mono); font-size: 0.46rem; color: var(--color-caption); letter-spacing: 0.12em; }
.gfx-mini__lines { display: flex; flex-direction: column; gap: 5px; }
.gfx-mini__line { height: 4px; border-radius: 2px; background: rgba(var(--color-primary-rgb), 0.13); }
.gfx-mini__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.gfx-mini__chip { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border-hairline-soft); font-family: var(--font-mono); font-size: 0.46rem; color: var(--color-caption); letter-spacing: 0.1em; }
.gfx-mini__chip--lead { border-color: var(--border-primary-soft); color: var(--color-primary); }

/* ---- proof: organic vs paid close rate ---- */

.gfx-close-card { width: 100%; border: 1px solid var(--border-hairline); border-radius: var(--radius-nested); background: var(--color-nested); padding: 16px; text-align: left; display: flex; flex-direction: column; gap: 14px; }
.gfx-close-card__head { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.14em; color: var(--color-caption); }
.gfx-close-card__head-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--color-primary-rgb), 0.6); }
.gfx-close-card__head-rule { flex: 1; height: 1px; background: var(--border-hairline-soft); }
.gfx-close-card__stat { display: flex; flex-direction: column; gap: 7px; }
.gfx-close-card__stat-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.54rem; letter-spacing: 0.1em; color: var(--color-primary); }
.gfx-close-card__stat-row--muted { color: var(--color-caption); }
.gfx-close-card__track { height: 8px; border-radius: 4px; background: rgba(var(--color-primary-rgb), 0.12); overflow: hidden; }
.gfx-close-card__fill { height: 100%; background: var(--color-primary); }
.gfx-close-card__fill--muted { height: 100%; background: rgba(var(--color-primary-rgb), 0.34); }
.gfx-close-card__foot { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.12em; color: var(--color-faint); padding-right: 104px; }
.gfx-close-badge { position: absolute; right: -10px; bottom: 0; padding: 12px 15px; border-radius: var(--radius-inset); background: var(--color-active); border: 1px solid var(--border-primary); text-align: left; }
.gfx-close-badge__num { font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; color: var(--color-ink); line-height: 1.1; }
.gfx-close-badge__label { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.14em; color: var(--color-primary); margin-top: 3px; }

.gfx-cold-ring { position: relative; width: 172px; height: 172px; display: flex; align-items: center; justify-content: center; }
.gfx-cold-ring__dash { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed var(--border-primary-soft); }
.gfx-cold-ring__center { position: relative; text-align: center; }
.gfx-cold-ring__num { font-weight: 700; font-size: 1.45rem; letter-spacing: -0.02em; color: var(--color-ink); line-height: 1; }
.gfx-cold-ring__label { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.14em; color: var(--color-caption); margin-top: 6px; }
.gfx-cold-badge { position: absolute; right: -4px; bottom: 0; padding: 12px 14px; border-radius: var(--radius-inset); background: var(--color-active); border: 1px solid var(--border-primary); display: flex; flex-direction: column; gap: 8px; text-align: left; }
.gfx-cold-badge__row { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.12em; color: var(--color-caption); }
.gfx-cold-badge__row-label { width: 44px; }
.gfx-cold-badge__bar { height: 5px; border-radius: 2px; background: rgba(var(--color-primary-rgb), 0.5); }

/* ---- measurement framework: citation coverage / lead ledger / crawl report ---- */

.gfx-coverage-card { width: 100%; border: 1px solid var(--border-hairline); border-radius: var(--radius-nested); background: var(--color-nested); padding: 16px; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.gfx-coverage-card__head { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.14em; color: var(--color-caption); white-space: nowrap; }
.gfx-coverage-card__head-rule { flex: 1; min-width: 8px; height: 1px; background: var(--border-hairline-soft); }
.gfx-coverage-card__rows { display: flex; flex-direction: column; gap: 7px; }
.gfx-coverage-card__row { display: flex; align-items: center; gap: 8px; }
.gfx-coverage-card__dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--color-subject); border: 1px solid var(--color-subject); }
.gfx-coverage-card__dot--off { background: transparent; border-color: var(--border-primary-soft); }
.gfx-coverage-card__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 0.52rem; color: var(--color-elevated-text); }
.gfx-coverage-card__row--off .gfx-coverage-card__text { color: var(--color-caption); }
.gfx-coverage-card__tag { flex: none; font-family: var(--font-mono); font-size: 0.44rem; color: var(--color-caption); letter-spacing: 0.1em; }
.gfx-coverage-card__foot { display: flex; flex-direction: column; gap: 7px; padding-top: 10px; border-top: 1px solid var(--border-hairline-soft); }
.gfx-coverage-card__foot-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.52rem; color: var(--color-caption); letter-spacing: 0.1em; }
.gfx-coverage-card__foot-row span:last-child { color: var(--color-primary); }
.gfx-coverage-card__track { height: 6px; border-radius: 3px; background: rgba(var(--color-primary-rgb), 0.1); overflow: hidden; }
.gfx-coverage-card__fill { height: 100%; border-radius: 3px; background: var(--color-primary); }

.gfx-ledger-card { width: 100%; border: 1px solid var(--border-hairline); border-radius: var(--radius-nested); background: var(--color-nested); padding: 16px; text-align: left; display: flex; flex-direction: column; gap: 13px; }
.gfx-ledger-card__head { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.14em; color: var(--color-caption); }
.gfx-ledger-card__head-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--color-primary-rgb), 0.6); }
.gfx-ledger-card__head-rule { flex: 1; height: 1px; background: var(--border-hairline-soft); }
.gfx-ledger-card__rows { display: flex; flex-direction: column; gap: 9px; }
.gfx-ledger-card__row { display: flex; align-items: center; gap: 8px; }
.gfx-ledger-card__bar { height: 6px; border-radius: 2px; background: rgba(var(--color-primary-rgb), 0.45); }
.gfx-ledger-card__arrow { font-family: var(--font-mono); font-size: 0.55rem; color: var(--color-faint); }
.gfx-ledger-card__track { flex: 1; height: 6px; border-radius: 2px; background: rgba(var(--color-primary-rgb), 0.16); }
.gfx-ledger-card__label { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.1em; color: var(--color-caption); }
.gfx-ledger-card__stack { display: flex; gap: 3px; height: 8px; border-radius: 4px; overflow: hidden; }
.gfx-ledger-card__foot { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; color: var(--color-caption); }
.gfx-ledger-card__foot span:last-child { color: var(--color-primary); }

.gfx-crawl-card { width: 100%; border: 1px solid var(--border-hairline); border-radius: var(--radius-nested); background: var(--color-nested); padding: 16px; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.gfx-crawl-card__head { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.14em; color: var(--color-caption); }
.gfx-crawl-card__head-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--color-primary-rgb), 0.6); }
.gfx-crawl-card__head-rule { flex: 1; height: 1px; background: var(--border-hairline-soft); }
.gfx-crawl-card__rows { display: flex; flex-direction: column; gap: 9px; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; }
.gfx-crawl-card__row { display: flex; align-items: center; gap: 9px; color: var(--color-caption); }
.gfx-crawl-card__row span:first-child { flex: 1; }
.gfx-crawl-card__row span:last-child { color: var(--color-primary); }
.gfx-crawl-card__foot { display: flex; justify-content: space-between; padding-top: 11px; border-top: 1px solid var(--border-hairline-soft); font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; color: var(--color-caption); }
.gfx-crawl-card__foot span:last-child { color: var(--color-primary); }

/* ---- schematic node detail content ---- */

.schematic-detail { display: flex; flex-direction: column; gap: 8px; }
.schematic-detail__query { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--border-hairline-soft); border-radius: 9px; background: var(--color-nested); }
.schematic-detail__query-text { min-width: 0; flex: 1; font-family: var(--font-mono); font-size: 0.58rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schematic-detail__bars { display: flex; flex-direction: column; gap: 5px; }
.schematic-detail__bar { height: 5px; border-radius: 3px; background: var(--color-active); }
.schematic-detail__quote { padding-left: 10px; border-left: 2px solid var(--border-primary-strong); font-size: 0.7rem; line-height: 1.55; color: var(--color-subject); }
.schematic-detail__source { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 5px 8px; border-radius: 7px; background: var(--color-active); border: 1px solid var(--border-primary); }
.schematic-detail__source-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary); }
.schematic-detail__source-name { font-family: var(--font-mono); font-size: 0.55rem; color: var(--color-ink); }
.schematic-detail__kv { display: flex; justify-content: space-between; gap: 8px; padding: 7px 9px; border-radius: 8px; background: var(--color-nested); font-size: 0.66rem; }
.schematic-detail__kv-k { color: var(--color-faint); }
.schematic-detail__kv-v { color: var(--color-subject); }
.schematic-detail__confirm { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 8px; background: var(--color-active); border: 1px solid var(--border-primary); font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.1em; color: var(--color-ink); }
.schematic-detail__job { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 10px; border-radius: 10px; border: 1px dashed var(--border-primary-strong); background: var(--color-nested); }
.schematic-detail__job-label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; color: var(--color-ink); }
.schematic-detail__job-note { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.1em; color: var(--color-faint); }

/* ---- listable-card preview graphics: glossary / resources / FAQ ---- */

.mp-nested { border: 1px solid var(--border-hairline-soft); border-radius: var(--radius-inset); background: var(--color-nested); overflow: hidden; margin-top: auto; height: 126px; }

.mp-faq { padding: 13px; display: flex; flex-direction: column; gap: 8px; }
.mp-faq__q { display: flex; align-items: center; gap: 9px; padding-bottom: 8px; border-bottom: 1px solid var(--border-hairline-soft); }
.mp-faq__bar { height: 5px; flex: 1; border-radius: 2px; background: rgba(var(--color-primary-rgb), 0.45); }
.mp-faq__mark { font-family: var(--font-mono); font-size: 0.62rem; color: var(--color-primary); }
.mp-faq__mark--dim { color: var(--color-faint); }
.mp-faq__lines { display: flex; flex-direction: column; gap: 5px; padding-bottom: 6px; }
.mp-faq__line { height: 4px; border-radius: 2px; background: rgba(var(--color-primary-rgb), 0.14); }
.mp-faq__q-closed { display: flex; align-items: center; gap: 9px; padding-bottom: 8px; border-bottom: 1px solid var(--border-hairline-soft); }
.mp-faq__q-closed:last-child { border-bottom: none; padding-bottom: 0; }
.mp-faq__bar--dim { height: 5px; border-radius: 2px; background: rgba(var(--color-primary-rgb), 0.2); }

.mp-terms { padding: 13px; display: flex; flex-direction: column; gap: 9px; min-height: 130px; }
.mp-terms__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-terms__chip { padding: 6px 9px; border-radius: 7px; background: var(--color-active); border: 1px solid var(--border-primary-soft); font-family: var(--font-mono); font-size: 0.52rem; color: var(--color-primary); }
.mp-terms__chip--dim { background: none; border-color: var(--border-hairline); color: var(--color-muted); }
.mp-terms__foot { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.12em; color: var(--color-caption); }
.mp-terms__foot-em { color: var(--color-primary); }

.mp-vs { display: grid; grid-template-columns: 1fr 52px 52px; gap: 1px; background: var(--border-hairline); }
.mp-vs__cell { background: var(--color-card); padding: 8px 12px; font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.1em; color: var(--color-caption); }
.mp-vs__cell--us { text-align: center; padding: 8px 0; color: var(--color-primary); }
.mp-vs__cell--them { text-align: center; padding: 8px 0; color: var(--color-caption); }
.mp-vs__row-label { background: var(--color-nested); padding: 5px 12px; display: flex; align-items: center; }
.mp-vs__row-bar { display: block; height: 4px; border-radius: 2px; background: rgba(var(--color-primary-rgb), 0.16); }
.mp-vs__row-mark { background: var(--color-nested); padding: 5px 0; text-align: center; display: flex; align-items: center; justify-content: center; }
.mp-vs__row-dash { background: var(--color-nested); padding: 5px 0; text-align: center; font-family: var(--font-mono); font-size: 0.6rem; color: var(--color-faint); display: flex; align-items: center; justify-content: center; }

.mp-guides { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.mp-guides__head { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.14em; color: var(--color-caption); margin-bottom: 2px; }
.mp-guides__head-rule { flex: 1; min-width: 6px; height: 1px; background: var(--border-hairline-soft); }
.mp-guides__head-tag { color: var(--color-primary); }
.mp-guides__row { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-mono); font-size: 0.48rem; line-height: 1.4; }
.mp-guides__row-k { color: var(--color-caption); }
.mp-guides__row-k--lead { color: var(--color-primary); }
.mp-guides__row-rule { flex: 1; border-bottom: 1px dotted var(--border-hairline-soft); }
.mp-guides__row-v { color: var(--color-muted); }
.mp-guides__row-v--lead { color: var(--color-ink); }

/* ================================================================
   MOTION SYSTEM — every loop on the site is CSS-only and infinite.
   Percent timings are load-bearing; they keep the hero pipeline and
   the mechanism rail in sync with each other. Do not round them.
   ================================================================ */

@keyframes rr-pulse { 0%, 100% { opacity: .28; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } }
@keyframes rr-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes rr-cpulse { 0%, 55% { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0); } 72% { box-shadow: 0 0 0 5px rgba(var(--color-primary-rgb), 0.13); } 100% { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0); } }
@keyframes rr-sweepx { 0% { transform: translateX(-140%); } 100% { transform: translateX(420%); } }
@keyframes rr-rev1 { 0%, 66% { clip-path: inset(0 0 0 0); } 66.5%, 68% { clip-path: inset(0 100% 0 0); } 73%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes rr-rev2 { 0%, 66% { clip-path: inset(0 0 0 0); } 66.5%, 71.5% { clip-path: inset(0 100% 0 0); } 76.5%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes rr-rev3 { 0%, 66% { clip-path: inset(0 0 0 0); } 66.5%, 75% { clip-path: inset(0 100% 0 0); } 80%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes rr-rev4 { 0%, 66% { clip-path: inset(0 0 0 0); } 66.5%, 78.5% { clip-path: inset(0 100% 0 0); } 83.5%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes rr-rev5 { 0%, 66% { clip-path: inset(0 0 0 0); } 66.5%, 82% { clip-path: inset(0 100% 0 0); } 87%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes rr-pop { 0%, 86% { opacity: 1; transform: scale(1); } 86.5%, 88% { opacity: 0; transform: scale(.5); } 90% { opacity: 1; transform: scale(1.18); } 92%, 100% { opacity: 1; transform: scale(1); } }
@keyframes rr-hl { 0%, 66% { border-color: var(--border-primary-soft); background: var(--color-active); } 66.5%, 90% { border-color: var(--border-hairline-soft); background: var(--color-nested); } 94%, 100% { border-color: var(--border-primary-soft); background: var(--color-active); } }
@keyframes rr-link { 0%, 88% { stroke-dashoffset: 0; opacity: 1; } 88.5%, 90% { stroke-dashoffset: 90; opacity: 0; } 91% { stroke-dashoffset: 90; opacity: 1; } 95%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes rr-cited { 0%, 90% { opacity: 1; transform: translateY(0); } 90.5%, 92% { opacity: 0; transform: translateY(4px); } 96%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes rr-meter { 0%, 66% { width: 68%; } 66.5%, 68% { width: 8%; } 94%, 100% { width: 68%; } }
@keyframes rr-st { 0%, 15% { background: rgba(var(--color-primary-rgb), 0.055); } 25%, 100% { background: rgba(var(--color-primary-rgb), 0); } }
@keyframes rr-d { 0%, 15% { background: var(--color-ink); transform: scale(1.15); } 25%, 100% { background: rgba(var(--color-primary-rgb), 0.55); transform: scale(1); } }
@keyframes rr-run4 { 0%, 14% { left: 12.5%; } 25%, 39% { left: 37.5%; } 50%, 64% { left: 62.5%; } 75%, 88% { left: 87.5%; } 100% { left: 12.5%; } }
/* Same generation rule as rr-run4 (hold at each chunk's midpoint for 0.56
   of the chunk, then glide to the next), parameterized for a 3-node rail. */
@keyframes rr-run3 { 0%, 18.67% { left: 16.67%; } 33.33%, 52% { left: 50%; } 66.67%, 85.33% { left: 83.33%; } 100% { left: 16.67%; } }
@keyframes rr-stack { 0%, 4% { opacity: 0; transform: translateY(16px) scaleX(.96); } 14%, 88% { opacity: 1; transform: translateY(0) scaleX(1); } 100% { opacity: 0; transform: translateY(-6px) scaleX(.99); } }
@keyframes rr-fill { 0% { width: 8%; } 100% { width: 96%; } }
@keyframes rr-emit { 0%, 58% { opacity: 0; transform: translateY(8px); } 70%, 90% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }

.gfx-pipeline__query-caret { width: 1px; height: 12px; background: var(--color-primary); animation: rr-caret 1.05s steps(1) infinite; flex: none; }
.gfx-pipeline__answer [data-line] { animation-duration: 14s; animation-timing-function: linear; animation-iteration-count: infinite; }
.gfx-pipeline__answer [data-line="1"] { animation-name: rr-rev1; }
.gfx-pipeline__answer [data-line="2"] { animation-name: rr-rev2; }
.gfx-pipeline__answer [data-line="3"] { animation-name: rr-rev3; }
.gfx-pipeline__answer [data-line="4"] { animation-name: rr-rev4; }
.gfx-pipeline__answer [data-line="5"] { animation-name: rr-rev5; }
.gfx-pipeline .cite-mark { animation: rr-pop 14s ease-out infinite; }
.gfx-pipeline__source-link { position: absolute; left: -34px; top: 50%; margin-top: -9px; overflow: visible; }
.gfx-pipeline__source-link path { animation: rr-link 14s ease-out infinite; }

/* Search -> sources -> answer reads as the actual sequence of events
   (ask, then see what got pulled, then see what got written from it),
   so the citation-trace graphic restacks in that order below 720px
   rather than falling back to DOM order. Kept in this file, not
   components.css, so the override can't lose the cascade to the
   base .gfx-pipeline__body rule two lines above — same specificity,
   and this file loads after components.css in the page head. */
@media (max-width: 720px) {
  .gfx-pipeline__body {
    grid-template-columns: 1fr;
    grid-template-areas: "query" "sources" "answer";
    gap: 20px;
  }
  .gfx-pipeline__source-link { display: none; }
}