/* ============================================================================
   /trust: the boundary, the page's one instrument (sub page system v1.1, approved 9 Oct 2026).
   Every state of the drawing is drawn here from .bd[data-st] (and [data-s] for a moment of the
   live sequence); sub.js only sets the attributes. The drawing itself is TrustPage.Drawing
   (trust.aspx.vb), one square of 0..1000 units; its labels are HTML (.fl), placed by the
   .p-* classes below in % of that square, because the page may not carry style attributes (CSP).
   Generated from the approved mockup's page CSS; tokens only (no hex outside tos-site.css).
   ============================================================================ */
/* ---- /trust: the boundary, the page's one instrument ---- */
.sp .bd .ins-c { container-type: inline-size; }
.sp .bd .core { transform-box: view-box; transform-origin: 500px 500px; transition: transform .9s var(--dl-ease); }
.sp .bd .ly { opacity: 0; transition: opacity .45s ease; }
.sp .bd .b-ring { fill: none; stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sp .bd .b-tk { transition: opacity .45s ease; }
.sp .bd .b-seal { fill: none; stroke: var(--lp-ink); stroke-width: 1px; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; transform: scale(1.04); transition: opacity .5s ease, transform .6s var(--dl-ease); }
.sp .bd .b-door { transform-box: view-box; transform-origin: 901px 585.2px; transition: transform .7s var(--dl-ease); }
.sp .bd .b-door-ink { transition: opacity .4s ease; fill: none; stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sp .bd .b-door-on { fill: none; stroke: var(--lp-accent); stroke-width: 4px; vector-effect: non-scaling-stroke; }
.sp .bd .b-off circle { fill: var(--lp-dot-off); }
.sp .bd .ly-src circle, .sp .bd .ly-ink { fill: var(--lp-ink); }
.sp .bd .ly-line circle { fill: var(--lp-paper); stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sp .bd .ly-ch line, .sp .bd .ly-rel line { stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sp .bd .ly-prov line { stroke: var(--lp-ink); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.sp .bd .ly-spk line { stroke: var(--lp-ink-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sp .bd .ly-hist .h-old { fill: var(--lp-dot-off); }
.sp .bd .ly-hist .h-strike { stroke: var(--lp-ink); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.sp .bd .ly-hist .h-link { stroke: var(--lp-ink-2); stroke-width: 1px; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.sp .bd .ly-hist .h-new { fill: var(--lp-ink); }
.sp .bd .ly-hands line { stroke-width: 11; stroke-linecap: round; }
.sp .bd .ly-hands .hd-e { stroke: var(--lp-ink); }
.sp .bd .ly-hands .hd-r { stroke: var(--lp-accent); }
.sp .bd .ly-rights circle { fill: var(--lp-accent); opacity: 0; transition: opacity .35s ease; }
.sp .bd .ly-paper rect { fill: var(--lp-paper); stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sp .bd .ly-paper line { stroke: var(--lp-rule-2); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.sp .bd .b-hub { fill: var(--lp-ink); transform-box: fill-box; transform-origin: center; transition: opacity .4s ease, transform .5s var(--dl-ease); }
.sp .bd .b-note { transition: transform 1.1s var(--dl-ease), opacity .45s ease; opacity: 0; }
.sp .bd .b-note rect { fill: var(--lp-accent); transform-box: fill-box; transform-origin: center; transition: transform .5s var(--dl-ease); }
.sp .bd .b-msg { opacity: 0; transform: translate(470px, 0); transition: transform 1.5s var(--dl-ease) .2s, opacity .3s ease .2s; }
.sp .bd .b-msg rect { fill: var(--lp-accent); }
.sp .bd .cs-box { fill: var(--lp-paper); stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sp .bd .cs-bar { stroke: var(--lp-rule-2); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.sp .bd .cs-pw { fill: var(--lp-ink); }
.sp .bd .cs-ok { fill: var(--lp-ink); transition: opacity .4s ease; }
.sp .bd .ly-cline { stroke: var(--lp-ink); stroke-width: 1.5px; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; }
.sp .bd .b-tok { opacity: 0; transform: translate(270px, 0); transition: transform 1.2s var(--dl-ease), opacity .4s ease; }
.sp .bd .b-tok rect { fill: var(--lp-accent); }
.sp .bd .ly-enc { fill: none; stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sp .bd .iso-ring { fill: none; stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sp .bd .iso-dot { fill: var(--lp-dot-off); }
.sp .bd .iso-line, .sp .bd .chn-l { stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sp .bd .chn-b { fill: var(--lp-ink); }
.sp .bd .chn-seal { fill: none; stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
/* labels: off unless their state is on */
.sp .bd .fl, .sp .bd .b-who { opacity: 0; transition: opacity .3s ease; }
.sp .bd .fl { color: var(--lp-muted); font-size: 13px; }
.sp .bd .fl.rec { font-size: 12px; }
.sp .bd .fl-ink, .sp .bd .fl-dk { color: var(--lp-ink); }
.sp .bd .fl-acc { color: var(--lp-accent-text); }
.sp .bd .fl-top { color: var(--lp-muted); }
.sp .bd .fl-dk { background: var(--lp-paper); padding: 0 3px; }
/* Labels that can land on the ring (German: Übertragbarkeit, Berichtigung, Einschränkung, Löschung,
   Zustimmungsbildschirm): the ring stroke breaks behind the word instead of running through it. */
.sp .bd .fl-gdpr, .sp .bd .fl-con.fl-ink { background: var(--lp-paper); padding: 0 3px; }
.sp .bd .fl-ctr { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 48%; white-space: normal; text-align: center; color: var(--lp-ink); }
.sp .bd .fl-ctr b { font: 600 clamp(15px, 4.4cqw, 26px)/1.15 var(--tos-font-body); letter-spacing: -.02em; }
.sp .bd .fl-ctr .rec { color: var(--lp-muted); }
.sp .bd .fl-ctr > * { background: var(--lp-paper); padding: 0 4px; }
.sp .bd .fl-two { display: flex; flex-direction: column; align-items: center; color: var(--lp-ink); }
.sp .bd .fl-two b { font-weight: 600; }
.sp .bd .fl-two .rec { color: var(--lp-muted); }
.sp .bd .fl-org { white-space: normal; text-align: center; width: 34%; line-height: 1.2; }
.sp .bd .b-who { position: absolute; display: flex; flex-direction: row; align-items: center; gap: 8px; transform: translate(-100%, -50%); }
.sp .bd .b-wn { font: 600 13px/1.2 var(--tos-font-body); letter-spacing: -.01em; color: var(--lp-ink); background: var(--lp-paper); padding: 0 2px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.sp .bd .b-wn::before { content: ""; width: 7px; height: 7px; background: var(--lp-accent); opacity: 0; transition: opacity .3s; }
.sp .bd .b-av { display: grid; }
.sp .bd .b-av > * { grid-area: 1 / 1; }
.sp .bd .b-av-w { background: var(--lp-paper); color: var(--lp-ink); outline: 1.5px solid var(--lp-ink); outline-offset: -1.5px; }
.sp .bd .b-av-ok { opacity: 0; transition: opacity .4s ease; }
@media (min-width: 1180px) { .sp .stage .fl { font-size: 14px; } .sp .stage .fl.rec { font-size: 12px; } }

/* the boundary moment (seq): 0 proposed, 1 waiting at the boundary, 2 approved and out, 3 sealed */
.sp .bd[data-st="seq"] .ly-src, .sp .bd[data-st="seq"] .b-note, .sp .bd[data-st="seq"] .fl-seq { opacity: 1; }
.sp .bd[data-st="seq"][data-s="0"] .ly-ch { opacity: 1; }
.sp .bd[data-st="seq"][data-s="1"] .b-note { transform: translate(238px, 0); }
.sp .bd[data-st="seq"][data-s="1"] .ly-don { opacity: 1; }
.sp .bd[data-st="seq"][data-s="1"] .b-wn::before { opacity: 1; }
.sp .bd[data-st="seq"][data-s="2"] .b-door { transform: rotate(58deg); }
.sp .bd[data-st="seq"][data-s="2"] .b-note { transform: translate(560px, 0); opacity: 0; transition: transform 1.5s var(--dl-ease) .35s, opacity .5s ease 1.2s; }
.sp .bd[data-st="seq"][data-s="3"] .b-note { transform: translate(560px, 0); opacity: 0; }
.sp .bd[data-st="seq"][data-s="2"] .b-av-ok { opacity: 1; }
.sp .bd[data-st="seq"][data-s="3"] .b-av-ok { opacity: 1; }
.sp .bd[data-st="seq"][data-s="3"] .ly-seal { opacity: 1; transform: none; }
.sp .bd.pre .b-note rect { transform: scale(0); }
.sp .bd.reset, .sp .bd.reset * { transition: none !important; }

/* 01 where it lives: the memory lit, inside the boundary; who runs it, in the middle */
.sp .bd[data-st="res"] .ly-ink,
.sp .bd[data-st="iso"] .ly-ink,
.sp .bd[data-st="exp0"] .ly-ink,
.sp .bd[data-st="exp1"] .ly-ink,
.sp .bd[data-st="exp2"] .ly-ink,
.sp .bd[data-st="exp3"] .ly-ink,
.sp .bd[data-st="exp4"] .ly-ink,
.sp .bd[data-st="exp5"] .ly-ink { opacity: 1; }
.sp .bd[data-st="res"] .b-hub,
.sp .bd[data-st="gdpr0"] .b-hub,
.sp .bd[data-st="gdpr1"] .b-hub,
.sp .bd[data-st="soc0"] .b-hub,
.sp .bd[data-st="soc1"] .b-hub { opacity: 0; transform: scale(.4); }
.sp .bd[data-st="res"] .fl-res { opacity: 1; }
/* 02 isolation: yours shrinks onto a shared line, beside two others it never touches */
.sp .bd[data-st="iso"] .core { transform: scale(.34); }
.sp .bd[data-st="iso"] .b-tk { opacity: 0; }
.sp .bd[data-st="iso"] .ly-iso, .sp .bd[data-st="iso"] .fl-iso { opacity: 1; }
/* 04 a connection: consent at the provider, an encrypted token inside, disconnect removes it */
.sp .bd[data-st="con0"] .core,
.sp .bd[data-st="con1"] .core,
.sp .bd[data-st="con2"] .core { transform: translate(-160px, 0) scale(.66); }
.sp .bd[data-st="con0"] .ly-con, .sp .bd[data-st="con0"] .fl-con, .sp .bd[data-st="con1"] .fl-con, .sp .bd[data-st="con2"] .fl-con,
.sp .bd[data-st="con1"] .ly-con, .sp .bd[data-st="con0"] .fl-con, .sp .bd[data-st="con1"] .fl-con, .sp .bd[data-st="con2"] .fl-con,
.sp .bd[data-st="con2"] .ly-con, .sp .bd[data-st="con0"] .fl-con, .sp .bd[data-st="con1"] .fl-con, .sp .bd[data-st="con2"] .fl-con { opacity: 1; }
.sp .bd[data-st="con0"] .cs-ok { fill: var(--lp-accent); }
.sp .bd[data-st="con0"] .ly-cline,
.sp .bd[data-st="con1"] .ly-cline { opacity: 1; }
.sp .bd[data-st="con1"] .b-door-ink { opacity: 0; }
.sp .bd[data-st="con1"] .b-tok { opacity: 1; transform: none; }
.sp .bd[data-st="con1"] .ly-enc, .sp .bd[data-st="con1"] .fl-tok { opacity: 1; transition-delay: .9s; }
.sp .bd[data-st="con2"] .ly-con { opacity: .4; }
/* 05 GDPR: five rights lit round the dial; then the paperwork */
.sp .bd[data-st="gdpr0"] .ly-rights, .sp .bd[data-st="gdpr0"] .ly-rights circle, .sp .bd[data-st="gdpr0"] .fl-gdpr { opacity: 1; }
.sp .bd[data-st="gdpr1"] .ly-paper { opacity: 1; }
/* 06 status: said in words, nothing drawn as progress; then the published architecture */
.sp .bd[data-st="soc0"] .fl-soc0 { opacity: 1; }
.sp .bd[data-st="soc1"] .ly-line, .sp .bd[data-st="soc1"] .ly-spk, .sp .bd[data-st="soc1"] .fl-soc1 { opacity: 1; }
/* 07 the export, part by part */
.sp .bd[data-st="exp1"] .ly-prov,
.sp .bd[data-st="exp2"] .ly-prov,
.sp .bd[data-st="exp3"] .ly-prov,
.sp .bd[data-st="exp4"] .ly-prov,
.sp .bd[data-st="exp5"] .ly-prov { opacity: 1; }
.sp .bd[data-st="exp2"] .ly-rel { opacity: 1; }
.sp .bd[data-st="exp3"] .ly-rel,
.sp .bd[data-st="exp4"] .ly-rel,
.sp .bd[data-st="exp5"] .ly-rel { opacity: .3; }
.sp .bd[data-st="exp3"] .fl-exp3 { opacity: 1; }
.sp .bd[data-st="exp3"] .ly-hist,
.sp .bd[data-st="exp4"] .ly-hist,
.sp .bd[data-st="exp5"] .ly-hist { opacity: 1; }
.sp .bd[data-st="exp4"] .ly-hands, .sp .bd[data-st="exp4"] .fl-exp4 { opacity: 1; }
.sp .bd[data-st="exp5"] .core { transform: translate(-170px, 0) scale(.6); }
.sp .bd[data-st="exp5"] .ly-chain, .sp .bd[data-st="exp5"] .fl-exp5 { opacity: 1; }
/* 08 reporting: one square straight in through the gate, to a person */
.sp .bd[data-st="rep"] .b-door-ink { opacity: 0; }
.sp .bd[data-st="rep"] .b-msg { opacity: 1; transform: none; }
.sp .bd[data-st="rep"] .fl-rep { opacity: 1; transition-delay: 1.2s; }

/* the hero's copy of the instrument on a phone: full column, readout left as on the homepage */
.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: the long top label and the name give way (the readout names her) */
.sp .inst:not(.is-hero) .fl-top, .sp .inst:not(.is-hero) .b-wn, .sp .inst:not(.is-hero) .fl-tok, .sp .inst:not(.is-hero) .fl-exp3, .sp .inst:not(.is-hero) .fl-res .rec:first-child { display: none; }
.sp .inst:not(.is-hero) .fl { font-size: 12.5px; }
.sp .inst:not(.is-hero) .fl.rec { font-size: 12px; }
/* the record card is a step: it sits in the copy */
.sp .rc-fig .fig-tag { margin-bottom: 10px; }
@media (min-width: 1180px) {
  .sp .run > .ch.hd .hd-b { margin-top: 0; }
}

/* ---- 03: each ledger row is a label over its sentence (the keys are separate, so no punctuation is added between them) ---- */
.sp .lg-x .lg-h { display: block; margin-bottom: 2px; font-weight: 600; }

/* ---- the outer ring (restored 9 Oct 2026, founder: "trust's dial appears to be missing the outer
   circle"): the homepage dial's bezel round the ticks, hidden with them when the boundary shrinks ---- */
.sp .bd .b-tk .g-bezel { fill: none; stroke: var(--lp-rule-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }

/* ---- the staggered arrivals (the mockup set them per element; here by position) ---- */
.sp .bd .b-ink .ly-ink:nth-child(1) { transition-delay: 0ms; }
.sp .bd .b-ink .ly-ink:nth-child(2) { transition-delay: 45ms; }
.sp .bd .b-ink .ly-ink:nth-child(3) { transition-delay: 90ms; }
.sp .bd .b-ink .ly-ink:nth-child(4) { transition-delay: 135ms; }
.sp .bd .b-ink .ly-ink:nth-child(5) { transition-delay: 180ms; }
.sp .bd .b-ink .ly-ink:nth-child(6) { transition-delay: 225ms; }
.sp .bd .b-ink .ly-ink:nth-child(7) { transition-delay: 270ms; }
.sp .bd .b-ink .ly-ink:nth-child(8) { transition-delay: 315ms; }
.sp .bd .b-ink .ly-ink:nth-child(9) { transition-delay: 360ms; }
.sp .bd .b-ink .ly-ink:nth-child(10) { transition-delay: 405ms; }
.sp .bd .b-ink .ly-ink:nth-child(11) { transition-delay: 450ms; }
.sp .bd .ly-rights circle:nth-child(1) { transition-delay: 0ms; }
.sp .bd .ly-rights circle:nth-child(2) { transition-delay: 90ms; }
.sp .bd .ly-rights circle:nth-child(3) { transition-delay: 180ms; }
.sp .bd .ly-rights circle:nth-child(4) { transition-delay: 270ms; }
.sp .bd .ly-rights circle:nth-child(5) { transition-delay: 360ms; }

/* ---- where each label sits on the drawing, in % of the square ---- */
.sp .bd .p-top { left: 50.00%; top: 2.20%; }
.sp .bd .p-agr { left: 39.15%; top: 20.39%; }
.sp .bd .p-eml { left: 60.85%; top: 20.39%; }
.sp .bd .p-pal { left: 50.00%; top: 53.40%; }
.sp .bd .p-who { left: 88.40%; top: 44.00%; }
.sp .bd .p-c { left: 50.00%; top: 50.00%; }
.sp .bd .p-iso1 { left: 17.00%; top: 36.40%; }
.sp .bd .p-iso0 { left: 50.00%; top: 65.20%; }
.sp .bd .p-iso2 { left: 83.00%; top: 36.40%; }
.sp .bd .p-isol { left: 50.00%; top: 74.40%; }
.sp .bd .p-con { left: 91.00%; top: 39.20%; }
.sp .bd .p-conp { left: 84.00%; top: 60.80%; }
.sp .bd .p-tok { left: 58.40%; top: 45.20%; }
.sp .bd .p-eff { left: 30.60%; top: 60.20%; }
.sp .bd .p-sup { left: 32.20%; top: 74.20%; }
.sp .bd .p-rec { left: 30.60%; top: 39.80%; }
.sp .bd .p-gra { left: 33.00%; top: 80.00%; }
.sp .bd .p-cha { left: 82.00%; top: 71.40%; }
.sp .bd .p-rep { left: 50.00%; top: 54.00%; }
.sp .bd .p-r0 { left: 50.00%; top: 22.70%; }
.sp .bd .p-r1 { left: 76.41%; top: 37.95%; }
.sp .bd .p-r2 { left: 65.25%; top: 73.21%; }
.sp .bd .p-r3 { left: 34.75%; top: 73.21%; }
.sp .bd .p-r4 { left: 23.59%; top: 37.95%; }