/* Anchors page. Tokens come from system.css; diagram frame styles from dg.css. */
.an-mount { min-width: 0; }
.an-fallback { color: var(--text-dim); font-size: var(--text-body-size); display: grid; gap: .4rem; padding-left: 1.2rem; }
.an-fallback dt { color: var(--text); font-weight: 500; }
.an-fallback dd { margin: 0 0 .4rem; }

/* hero: title and text centred on top, the "history that outlives the host" diagram (built in anchors.mjs, fixed viewBox) below it at the full content width */
.an-top { display: grid; justify-items: center; gap: clamp(1.75rem, 3.5vw, 2.75rem); text-align: center; }
.an-intro { display: grid; justify-items: start; text-align: left; gap: var(--hero-gap); max-width: 46rem; min-width: 0; }
.an-intro h1 { max-width: 26ch; }
.an-intro .lede, .an-intro .meta { text-wrap: pretty; }
.an-intro .cta-row { justify-content: flex-start; }
.an-hero { min-width: 0; width: 100%; text-align: left; }
.an-hero .nn { font-size: max(13.5px, calc(11px / var(--k, 1))); fill: var(--text-dim); }
.an-hero .nl { font-size: max(15px, calc(11px / var(--k, 1))); }
.an-hero .ns { font-size: max(12.5px, calc(11px / var(--k, 1))); }
/* group label and sub text use the shared diagram sizes (dg.css) */
.an-hero .ns { visibility: hidden; }
.an-hero .n:not(.is-on):not(.is-bad) .ns[data-v~="idle"], .an-hero .n.is-on:not(.is-bad) .ns[data-v~="lit"], .an-hero .n.is-bad .ns[data-v~="bad"] { visibility: visible; }
.an-hero .n.is-on .ns { fill: var(--text-dim); }
.an-hero .n.is-bad .ns { fill: var(--invalid); }
.an-hero .res { font: 600 15px var(--font); font-size: max(15px, calc(11px / var(--k, 1))); visibility: hidden; }
.an-hero .n.is-ok .res--ok { visibility: visible; fill: var(--valid); }
.an-hero .n.is-bad .res--bad { visibility: visible; fill: var(--invalid); }
.an-hero .n.is-ok rect { fill: rgba(95, 211, 154, .12); stroke: var(--valid); }
.an-hero .n.is-ok .nl { fill: var(--text); }
.an-hero .n.is-bad .nl { fill: var(--text); }
.an-hero .n.is-bad rect { fill: rgba(255, 107, 122, .1); }
.an-hero .an-lane { stroke: rgba(255, 255, 255, .22); stroke-dasharray: none; }
/* the boundary between the host and the independent copies: a dashed frame with a brighter label */
.an-hero .an-zone { stroke: rgba(138, 180, 255, .55); stroke-dasharray: 6 6; fill: rgba(138, 180, 255, .04); }
.an-hero .an-zone__l { fill: var(--text); }
.an-hero .n.an-entry rect { stroke-width: 1.2; }
@media (prefers-reduced-motion: no-preference) {
  .an-hero .n.is-glitch { animation: an-glitch .55s steps(2, jump-none) 1; }
  @keyframes an-glitch { 0% { transform: translate(0, 0); } 20% { transform: translate(-2.5px, 1px); } 40% { transform: translate(2.5px, -1px); } 60% { transform: translate(-1.5px, 0); } 80% { transform: translate(1.5px, 1px); } 100% { transform: translate(0, 0); } }
}

/* text columns */
.an-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.4vw, 2.25rem); margin-top: clamp(2rem, 3vw, 3rem); }
.an-cols article { display: grid; gap: .6rem; align-content: start; padding-top: 1rem; border-top: 2px solid; border-image: linear-gradient(90deg, var(--brand-amber), var(--brand-red), var(--brand-blue)) 1; }
.an-cols p { color: var(--text-dim); font-size: var(--text-body-size); line-height: 1.6; }
.an-proves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(1.5rem, 2.5vw, 2.25rem); }
.an-proves > div { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-1); display: grid; gap: .5rem; align-content: start; }
.an-proves p { color: var(--text-dim); }
@media (max-width: 63.99rem) { .an-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 75rem) { .an-proves { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 48rem) and (max-width: 63.99rem) { .an-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* anatomy */
.an { display: grid; gap: 1rem; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-1); min-width: 0; }
.an__tabs { display: flex; flex-wrap: wrap; gap: var(--btn-row); }
.an__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem 1.5rem; align-items: start; }
.an__card { display: grid; border: 1px solid var(--border); border-radius: var(--r-control); background: rgba(0, 0, 0, .28); overflow: hidden; min-width: 0; }
.an__bar { padding: .6rem 1rem; font-size: var(--text-small-size); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); background: rgba(255, 255, 255, .03); border-bottom: 1px solid var(--border); }
.an__row { appearance: none; display: grid; grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr); gap: .25rem 1rem; text-align: left; padding: .6rem 1rem; border: 0; border-top: 1px solid var(--border); border-left: 3px solid transparent; background: none; color: var(--text-dim); font: 400 var(--text-code-size)/1.55 var(--mono); cursor: pointer; transition: background var(--dg-hover) var(--ease), border-color var(--dg-hover) var(--ease); min-height: 2.75rem; }
.an__bar + .an__row { border-top: 0; }
.an__key { color: var(--text-faint); overflow-wrap: anywhere; }
.an__val { overflow-wrap: anywhere; word-break: break-all; }
.an__row--hash .an__val { color: #8ab4ff; } .an__row--sig .an__val { color: #FC6A02; } .an__row--time .an__val { color: #5BE0A6; } .an__row--id .an__val { color: #FBBA02; } .an__row--num .an__val { color: var(--text); }
.an__row:hover { background: rgba(255, 255, 255, .03); }
.an__row.is-rel { background: rgba(251, 186, 2, .06); border-left-color: rgba(251, 186, 2, .55); }
.an__row.is-on { background: rgba(90, 93, 203, .16); border-left-color: #5A5DCB; color: var(--text); }
.an__row.is-on .an__key { color: var(--text); }
.an__row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.an__panel { position: sticky; top: calc(var(--header-h, 4rem) + 4rem); display: grid; gap: .55rem; padding: 1.1rem 1.2rem; border: 1px solid var(--border); border-radius: var(--r-control); background: rgba(0, 0, 0, .22); font-size: var(--text-body-size); align-content: start; }
.an__k { font: 400 var(--text-code-size) var(--mono); color: #FBBA02; overflow-wrap: anywhere; }
.an__panel b { font-weight: 500; font-size: var(--text-card-title-size); } .an__panel p { color: var(--text-dim); line-height: 1.6; }
.an__note { max-width: none; }
.an__bind { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; counter-reset: b; }
.an__bind li { counter-increment: b; display: grid; gap: .4rem; padding-top: .8rem; border-top: 1px solid var(--border-hover); color: var(--text-dim); font-size: var(--text-body-size); line-height: 1.55; }
.an__bind li::before { content: counter(b); --bf: var(--text); }
@media (max-width: 63.99rem) { .an__grid { grid-template-columns: minmax(0, 1fr); } .an__panel { position: static; } .an__bind { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 47.99rem) { .an__row { grid-template-columns: minmax(0, 1fr); } }

/* consistency */
.cs { display: grid; gap: .9rem; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-1); min-width: 0; }
.cs .dg__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; }
.cs .dg__chips, .cs .dg__tools, .cs .cs__ctl { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cs .dg__chip[aria-pressed="true"] { color: var(--text); border-color: transparent; background: linear-gradient(135deg, rgba(196, 86, 29, .55), rgba(176, 42, 94, .55) 55%, rgba(63, 98, 200, .55)); }
.cs .cs__tamper[aria-pressed="true"] { color: var(--text); border-color: var(--invalid); background: rgba(255, 107, 122, .12); }
.cs .dg__chip:focus-visible, .cs .dg__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cs__body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1rem 1.5rem; align-items: start; }
.cs__stage { min-width: 0; }
.cs__svg { width: 100%; height: auto; display: block; }
.cs__axis { stroke: var(--border-hover); stroke-width: 1.4; fill: none; }
.cs__pt { fill: var(--bg); stroke-width: 2; } .cs__pt--a { stroke: #FBBA02; } .cs__pt--b { stroke: #0189FD; }
.cs__t { fill: var(--text-dim); font: 500 13px var(--font); } .cs__t.is-dim { fill: var(--text-faint); font-weight: 400; }
.cs__leaf rect { fill: var(--surface-2); stroke: var(--border-hover); stroke-width: 1.2; transition: fill var(--dg-step, var(--dg-step-default)) var(--ease), stroke var(--dg-step, var(--dg-step-default)) var(--ease); }
.cs__leaf.is-new rect { stroke: #0189FD; fill: rgba(1, 137, 253, .1); }
.cs__leaf:not(.is-new) rect { stroke: #FBBA02; }
.cs__leaf.is-bad rect { stroke: var(--invalid); fill: rgba(255, 107, 122, .2); }
.cs__n { fill: var(--text-dim); font: 500 12px var(--mono); }
.cs__bad { fill: var(--invalid); font: 500 12px var(--font); }
.cs__br { fill: none; stroke-width: 1.6; } .cs__br.is-a { stroke: #FBBA02; } .cs__br.is-b { stroke: #0189FD; }
.cs__bl { font: 500 12.5px var(--font); } .cs__bl.is-a { fill: #FBBA02; } .cs__bl.is-b { fill: #6cb6ff; }
.cs__ph rect { fill: rgba(90, 93, 203, .16); stroke: #5A5DCB; stroke-width: 1.3; }
.cs__ph.is-bad rect { stroke: var(--invalid); fill: rgba(255, 107, 122, .1); }
.cs__phl { fill: var(--text); font: 500 11.5px var(--mono); text-anchor: middle; }
.cs__phc { stroke: #5A5DCB; stroke-width: 1.3; fill: none; stroke-dasharray: 3 3; }
.cs__res { display: grid; gap: .6rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--r-control); background: rgba(0, 0, 0, .22); font-size: var(--text-body-size); align-content: start; }
.cs__res b { font-weight: 500; font-size: var(--text-card-title-size); } .cs__res b.is-ok { color: var(--valid); } .cs__res b.is-no { color: var(--invalid); }
.cs__res p { color: var(--text-dim); line-height: 1.55; }
.cs__list { display: grid; gap: .5rem; }
.cs__list li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .1rem .6rem; color: var(--text-dim); line-height: 1.45; }
.cs__list li code { grid-column: 2; color: var(--text-faint); font-size: var(--text-small-size); overflow-wrap: anywhere; white-space: normal; min-width: 0; max-width: 100%; }
.cs__mark { font: 600 var(--text-small-size) var(--mono); letter-spacing: .06em; text-transform: uppercase; padding-top: .2rem; }
.cs__list .is-ok .cs__mark { color: var(--valid); } .cs__list .is-no .cs__mark { color: var(--invalid); } .cs__list .is-no { color: var(--text); }
.cs__cap { color: var(--text); font-size: var(--text-body-size); line-height: 1.55; padding: .6rem .9rem; border-left: 2px solid var(--brand-blue); background: rgba(255, 255, 255, .025); border-radius: 0 10px 10px 0; min-height: 3.2em; }
@media (max-width: 63.99rem) { .cs__body { grid-template-columns: minmax(0, 1fr); } }

/* verify: one compact panel */
.av { gap: .7rem; padding: clamp(1rem, 1.6vw, 1.3rem) clamp(1rem, 2vw, 1.5rem); }
.av .ipanel__head { row-gap: .15rem; }
.av-cmds { border: 1px solid var(--border); border-radius: var(--r-control); background: rgba(0, 0, 0, .18); }
.av-cmds > summary { min-height: 2.5rem; display: flex; align-items: center; padding: 0 .9rem; cursor: pointer; font-size: var(--text-body-size); color: var(--text); }
.av-cmds[open] > summary { border-bottom: 1px solid var(--border); }
.av-cmds .code { margin: .75rem; }
.av-cmds .code pre { font-size: var(--text-code-size); overflow-x: auto; }
.av-cmds .code[hidden] { display: none; }
.av-cmds__note { margin: 0 .9rem .75rem; color: var(--text-dim); font-size: var(--text-body-size); line-height: 1.55; }
.av-cmds__note[hidden] { display: none; }
.av-sub { display: grid; gap: .5rem; }
.av-sub .rows2__lab { margin: 0; }
.av-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.av-checks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: .6rem; align-items: start; padding: .5rem .8rem; border: 1px solid var(--border); border-radius: var(--r-control); background: rgba(255, 255, 255, .02); --bl: 1.5em; font-size: var(--text-body-size); line-height: 1.5; }
.av-checks code { font-size: var(--text-small-size); white-space: nowrap; }
.av-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.25rem; }
.av-foot .callout { padding: .45rem .9rem; flex: 1 1 22rem; }
.av-foot .callout .c-ico { width: 1.6rem; height: 1.6rem; }
.av-foot .callout .c-ico svg { width: .9rem; height: .9rem; }
@media (max-width: 63.99rem) { .av-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.99rem) { .av-checks { grid-template-columns: minmax(0, 1fr); } }
.cs .dg__bar, .cs .dg__cap, .cs .dg__stage { grid-area: auto; }

/* consistency: newly appearing leaves and proof hashes fade in at the shared step pace */
@media (prefers-reduced-motion: no-preference) {
  .cs__leaf.is-fresh, .cs__ph.is-fresh { animation: cs-in var(--dg-step, var(--dg-step-default)) var(--ease) both; animation-delay: calc(var(--i, 0) * var(--dg-stagger, 180ms) / 3); }
  @keyframes cs-in { from { opacity: 0; } to { opacity: 1; } }
}

/* the idle line of an inspector, under the anatomy card and the consistency diagram */
.an__hint, .cs__hint { margin: .5rem 0 0; font-size: var(--text-body-size); line-height: 1.55; }
.cs__leaf, .cs__pt { cursor: pointer; }

@media (max-width: 47.99rem) { .av-checks { gap: .5rem; } }
/* label floor for the checkpoint svg (see dg.css): never under 11px on screen */
.cs__n { font-size: max(12px, calc(11px / var(--k, 1))); }
.cs__bl { font-size: max(12.5px, calc(11px / var(--k, 1))); }
.cs__phl { font-size: max(11.5px, calc(11px / var(--k, 1))); }