/* ============================================================================
   /seal: the gate and the ledger, the page's one instrument (sub page system v1.1, 9 Oct 2026).
   Every state of the drawing is drawn here from .bd[data-st] (and [data-s], a moment of the live
   sequence: 0 allow, 1 hold, 2 refuse); sub.js only sets the attributes. The drawing is
   SealPage.Drawing (seal.aspx.vb), one square of 0..1000 units; its labels are HTML (.fl), placed
   by the .p-* classes below in % of that square (the page may not carry style attributes: CSP).
   Tokens only (no hex outside tos-site.css).
   ============================================================================ */
.sp .bd .ins-c { container-type: inline-size; }
.sp .bd .ly { opacity: 0; transition: opacity .45s ease; }
.sp .bd.reset, .sp .bd.reset * { transition: none !important; }

/* ---- the gate scene ---- */
.sp .bd .sl-core { transition: opacity .45s ease; }
.sp .bd .path { stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sp .bd .path-out { stroke: var(--lp-ink-2); stroke-dasharray: 4 6; }
.sp .bd .ai { fill: var(--lp-ink); }
.sp .bd .bar { fill: var(--lp-ink); }
.sp .bd .door { fill: var(--lp-ink); transition: opacity .4s ease; }
.sp .bd .sealmk { fill: none; stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .4s ease; }
.sp .bd .humline { stroke: var(--lp-ink-2); stroke-width: 1px; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .4s ease; }
.sp .bd .hum { fill: var(--lp-paper); stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sp .bd .humdot { fill: var(--lp-accent); opacity: 0; transition: opacity .4s ease; }
.sp .bd .sq { fill: var(--lp-accent); opacity: 0; transition: opacity .3s ease, transform 0s linear .3s, fill 0s linear .3s; }
.sp .bd .strike { opacity: 0; transition: opacity .3s ease; }
.sp .bd .strike line { stroke: var(--lp-ink); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.sp .bd .led-l { stroke: var(--lp-rule-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sp .bd .slot { fill: var(--lp-paper); stroke: var(--lp-rule-2); stroke-width: 1px; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.sp .bd .blk { fill: var(--lp-ink); opacity: 0; transition: opacity .4s ease; }

/* ---- the record: the chain and its witness ---- */
.sp .bd .ly-rec > g { transition: opacity .45s ease; }
.sp .bd .wit { fill: var(--lp-paper); stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sp .bd .wit-l { stroke: var(--lp-ink-2); stroke-width: 1px; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.sp .bd .lnk { stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sp .bd .lnk-n { stroke: var(--lp-ink-2); stroke-dasharray: 4 6; }
.sp .bd .cb { fill: var(--lp-ink); }
.sp .bd .cseal { fill: none; stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; transition: stroke .3s ease; }
.sp .bd .nx { fill: var(--lp-paper); stroke: var(--lp-ink-2); stroke-width: 1.5px; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.sp .bd .nowb { fill: var(--lp-accent); }

/* labels: off unless their state is on */
.sp .bd .fl { opacity: 0; transition: opacity .3s ease; }
.sp .bd .fl-ink { color: var(--lp-ink); }
.sp .bd .fl-q { white-space: normal; width: 44%; text-align: center; color: var(--lp-ink); }
.sp .bd .fl-past { white-space: normal; width: 26%; text-align: center; line-height: 1.2; }
.sp .bd .fl-hum { background: var(--lp-paper); padding: 0 3px; }
/* Labels that can land on the ring or its ticks (German: "Liegt dafür eine Befugnis vor?", SEAL / Weiter):
   the stroke breaks behind the words instead of running through them. */
.sp .bd .fl-q, .sp .bd .fl-l, .sp .bd .fl-n { background: var(--lp-paper); padding: 0 3px; }
.sp .bd .fl-ai { white-space: normal; width: 22%; text-align: center; line-height: 1.2; }
.sp .bd .fl-ctr { display: flex; flex-direction: column; align-items: center; width: 30%; white-space: normal; text-align: center; color: var(--lp-ink); }
.sp .bd .fl-ctr b { font: 600 clamp(13px, 3cqw, 17px)/1.15 var(--tos-font-body); letter-spacing: -.01em; }
@media (min-width: 1180px) { .sp .stage .fl { font-size: 14px; } .sp .stage .fl.rec { font-size: 12px; } }

/* ---- the live sequence (seq): the gate scene is on, the record is off ---- */
.sp .bd[data-st="seq"] .fl-core { opacity: 1; }
/* 0 allow: the door opens, the action passes, carries its seal, and is written down */
.sp .bd[data-st="seq"][data-s="0"] .door { opacity: 0; transition-delay: .2s; }
.sp .bd[data-st="seq"][data-s="0"] .sq-a { opacity: 1; transform: translate(528px, 0); transition: opacity .3s ease .3s, transform 1.6s var(--dl-ease) .3s; }
.sp .bd[data-st="seq"][data-s="0"] .sealmk { opacity: 1; transition-delay: 1.8s; }
.sp .bd[data-st="seq"][data-s="0"] .b0 { opacity: 1; transition-delay: 2.1s; }
/* 1 hold: the action waits at the door, and a named human is called */
.sp .bd[data-st="seq"][data-s="1"] .sq-h { opacity: 1; transform: translate(200px, 0); transition: opacity .3s ease .3s, transform 1.2s var(--dl-ease) .3s; }
.sp .bd[data-st="seq"][data-s="1"] .humline,
.sp .bd[data-st="seq"][data-s="1"] .humdot { opacity: 1; transition-delay: 1.5s; }
.sp .bd[data-st="seq"][data-s="1"] .b0 { opacity: 1; }
.sp .bd[data-st="seq"][data-s="1"] .b1 { opacity: 1; transition-delay: 2s; }
/* 2 refuse: the action stops at the door and does not happen; the refusal is written down too */
.sp .bd[data-st="seq"][data-s="2"] .sq-r { opacity: 1; fill: var(--lp-dot-off); transform: translate(200px, 0); transition: opacity .3s ease .3s, transform 1.2s var(--dl-ease) .3s, fill .3s ease 1.5s; }
.sp .bd[data-st="seq"][data-s="2"] .strike { opacity: 1; transition-delay: 1.5s; }
.sp .bd[data-st="seq"][data-s="2"] .b0,
.sp .bd[data-st="seq"][data-s="2"] .b1 { opacity: 1; }
.sp .bd[data-st="seq"][data-s="2"] .b2 { opacity: 1; transition-delay: 2s; }

/* ---- 02 the record: the gate gives way to the chain; each step lights its own part ---- */
.sp .bd[data-st^="rec"] .sl-core,
.sp .bd[data-st="now"] .sl-core { opacity: 0; }
.sp .bd[data-st^="rec"] .ly-rec,
.sp .bd[data-st^="rec"] .fl-rec { opacity: 1; }
.sp .bd[data-st="rec0"] .rg-c, .sp .bd[data-st="rec0"] .rg-l, .sp .bd[data-st="rec0"] .rg-n,
.sp .bd[data-st="rec1"] .rg-w, .sp .bd[data-st="rec1"] .rg-n,
.sp .bd[data-st="rec2"] .rg-w, .sp .bd[data-st="rec2"] .rg-c, .sp .bd[data-st="rec2"] .rg-n,
.sp .bd[data-st="rec3"] .rg-w, .sp .bd[data-st="rec3"] .rg-c, .sp .bd[data-st="rec3"] .rg-l { opacity: .25; }
.sp .bd[data-st="rec0"] .fl-prev, .sp .bd[data-st="rec0"] .fl-l, .sp .bd[data-st="rec0"] .fl-n,
.sp .bd[data-st="rec1"] .fl-w, .sp .bd[data-st="rec1"] .fl-l, .sp .bd[data-st="rec1"] .fl-n,
.sp .bd[data-st="rec2"] .fl-w, .sp .bd[data-st="rec2"] .fl-prev, .sp .bd[data-st="rec2"] .fl-n,
.sp .bd[data-st="rec3"] .fl-w, .sp .bd[data-st="rec3"] .fl-prev, .sp .bd[data-st="rec3"] .fl-l { opacity: .35; }
.sp .bd[data-st="rec2"] .cseal { stroke: var(--lp-accent); stroke-width: 3px; }

/* ---- 03 why now: no past to backfill, a record that starts now ---- */
.sp .bd[data-st="now"] .ly-now,
.sp .bd[data-st="now"] .fl-now { opacity: 1; }

/* ---- where each label sits on the drawing, in % of the square (the gate scene's at its 1.12 scale) ---- */
.sp .bd .p-ai { left: 17.52%; top: 47.98%; }
.sp .bd .p-q { left: 50.00%; top: 29.39%; }
.sp .bd .p-hum { left: 50.00%; top: 67.02%; }
.sp .bd .p-led { left: 50.00%; top: 84.05%; }
.sp .bd .p-w { left: 50.00%; top: 23.00%; }
.sp .bd .p-v0 { left: 31.00%; top: 50.80%; }
.sp .bd .p-v1 { left: 47.00%; top: 50.80%; }
.sp .bd .p-v2 { left: 63.00%; top: 50.80%; }
.sp .bd .p-l { left: 71.00%; top: 46.40%; }
.sp .bd .p-n { left: 86.00%; top: 57.50%; }
.sp .bd .p-past { left: 31.00%; top: 57.50%; }
.sp .bd .p-now { left: 55.00%; top: 57.50%; }

/* the hero's copy on a phone: full column, as on /trust */
.sp .inst.is-hero { margin-top: 22px; --ins-w: 560px; }
.sp .inst.is-hero .ro-set { margin-top: 12px; }
.sp .inst.is-hero .ls-x { font-size: 16px; }
/* a small pinned copy (with JavaScript; without it every copy is full size, and keeps every word): the link words between the records and the witness's name give way (the readout names them) */
.sp.js .run .inst:not(.is-hero) .fl-w { display: none; }
/* the link words between two records need room: below 520px of drawing the gap is narrower than "zurück" */
@container (max-width: 520px) { .sp .bd .fl-prev { display: none; } }
.sp.js .run .inst:not(.is-hero) .fl { font-size: 12.5px; }
.sp.js .run .inst:not(.is-hero) .fl.rec { font-size: 12px; }

/* ---- the copy (Landing.Master links this sheet BEFORE sub.css: an override of a sub.css rule needs more weight, not a later line) ---- */
.sp h1 .ln { display: block; }
.sp .lg-x .lg-h { display: block; margin-bottom: 2px; font-weight: 600; }
.sp .seal-fig .fig-tag { margin-bottom: 10px; }
.sp .seal-quote em { font-style: normal; text-decoration: underline; text-decoration-color: var(--lp-accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.sp .seal-req .ch-h .body { margin-top: 20px; }
.sp .seal-req .ch-h .body > p { font-size: 17px; }
.sp .seal-keep { display: flex; align-items: flex-start; gap: 10px; color: var(--lp-ink); font-weight: 600; }
.sp .seal-keep::before { content: ""; width: 8px; height: 8px; margin-top: .55em; background: var(--lp-accent); flex: none; }
.sp .ch.seal-trust { padding-block: 40px; }
.sp .ch.seal-sign { padding-block: 56px 72px; }
.sp .seal-sign-t { font: 600 clamp(34px, 9vw, 72px)/1.05 var(--tos-font-body); letter-spacing: -.035em; color: var(--lp-ink); overflow-wrap: anywhere; }
@media (min-width: 1180px) {
  .sp .run > .ch.hd .hd-b { margin-top: 0; }
  .sp .seal-req .ch-h .body > p { font-size: 18px; }
  .sp .ch.seal-trust { display: block; padding-block: 64px; }
  .sp .ch.seal-sign { display: block; padding-block: 96px 120px; }
}