/* ============================================================================
   /bi-temporal-memory: the two clocks, the page's one instrument (sub page system v1.1,
   9 Oct 2026). Loaded from PageStyles, AFTER sub.css. Every state of the dial is drawn here from
   .bd[data-st] (and [data-s] for a moment of the header's live sequence); sub.js only sets the
   attributes. The drawing is BiTemporalMemoryPage.Drawing (bi-temporal-memory.aspx.vb), one
   square of 0..1000 units, one month round the face (1 March at twelve, clockwise); its labels
   are HTML (.fl), placed by the .p-* classes below in % of that square (the page may not carry
   style attributes: CSP). The homepage's chapter 06 dial is the model: the ink hand is when it
   became true, the orange hand when the memory learned it, the wedge the time between.
   Tokens only (no hex outside tos-site.css); every rule under .sp.
   ============================================================================ */

/* ---- the copy ---- */
.sp .bt-mu { display: block; margin-top: .12em; color: var(--lp-muted); }
.sp .lg-x .lg-h { display: block; margin-bottom: 2px; font-weight: 600; }
.sp .bt .ledger.steps + .body.steps { margin-top: 28px; }

/* ---- 01 the definition: the citable block ---- */
.sp .bt-def .bt-term { margin-top: 6px; }
.sp .bt-def #btCiteText { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--lp-rule); }
.sp .bt-def .bt-def-x { margin-top: 0; font-size: 17px; line-height: 1.6; color: var(--lp-ink); }
.sp .bt-def .bt-def-x + .bt-def-x { margin-top: 14px; }
.sp .bt-def .bt-def-x.is-why { color: var(--lp-ink-2); }
.sp .bt-def .bt-def-attr { margin-top: 16px; font: 450 12px/1.6 var(--tos-font-mono); color: var(--lp-muted); overflow-wrap: anywhere; }
.sp .bt-def .bt-cite { margin-top: 20px; }
@media (min-width: 1180px) {
  .sp .bt-def { padding: 28px 32px; }
  .sp .bt-def .bt-def-x { font-size: 18px; }
}

/* ---- the dial ---- */
.sp .bd .ins-c { container-type: inline-size; }
/* the opaque wedge tint: the homepage's wedge colour on the paper, so overlapping day slices show no seam */
.sp .bd { --bt-wedge: color-mix(in srgb, var(--lp-accent) 11%, var(--lp-paper)); }
.sp .bd .bt-tk .g-bezel { fill: none; stroke: var(--lp-rule-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sp .bd .bt-wg path { fill: var(--bt-wedge); opacity: 0; transition: opacity .35s ease; }
.sp .bd .bt-wg .bt-wg-e { fill: none; stroke: var(--lp-accent); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sp .bd .bt-un { fill: none; stroke: var(--lp-muted); stroke-width: 2px; stroke-dasharray: 3 7; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .45s ease; }
.sp .bd .bt-h { transform-box: view-box; transform-origin: 500px 500px; opacity: 0; transition: transform 1.1s var(--dl-ease), opacity .4s ease; }
.sp .bd .bt-h line { stroke-width: 11; stroke-linecap: round; }
.sp .bd .bt-ht { transform: rotate(23.23deg); }
.sp .bd .bt-ht line { stroke: var(--lp-ink); }
.sp .bd .bt-hk { transform: rotate(220.65deg) scale(.2); }
.sp .bd .bt-hk line { stroke: var(--lp-accent); }
.sp .bd .bt-m3, .sp .bd .bt-m20, .sp .bd .bt-m28 { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.4); transition: opacity .35s ease, transform .45s var(--dl-ease); }
.sp .bd .bt-m3, .sp .bd .bt-m28 { fill: var(--lp-ink); }
.sp .bd .bt-m20 { fill: var(--lp-accent); }
.sp .bd .bt-hub { fill: var(--lp-ink); }
.sp .bd .bt-ix, .sp .bd .bt-src, .sp .bd .bt-hst, .sp .bd .bt-q { opacity: 0; transition: opacity .45s ease; }
.sp .bd .bt-ix rect { fill: var(--lp-ink); }
.sp .bd .bt-ixl { stroke: var(--lp-ink); stroke-width: 1.5px; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; }
.sp .bd .bt-doc { fill: var(--lp-paper); stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sp .bd .bt-src line { stroke: var(--lp-rule-2); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.sp .bd .bt-src .bt-srcl { stroke: var(--lp-ink); stroke-width: 1.5px; stroke-dasharray: 5 5; }
.sp .bd .bt-hl { fill: none; stroke: var(--lp-ink-2); stroke-width: 1.5px; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.sp .bd .bt-strike { stroke: var(--lp-ink); stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.sp .bd .bt-q { fill: var(--lp-ink); }
.sp .bd.reset, .sp .bd.reset * { transition: none !important; }

/* labels: off unless their state is on */
.sp .bd .fl { opacity: 0; transition: opacity .3s ease; color: var(--lp-ink); }
.sp .bd .fl.rec { color: var(--lp-muted); }
.sp .bd .fl-sc { opacity: 1; }
.sp .bd .fl-two, .sp .bd .fl-val, .sp .bd .fl-ix, .sp .bd .fl-hst, .sp .bd .fl-q, .sp .bd .fl-src, .sp .bd .fl-gap { background: var(--lp-paper); padding: 0 3px; }
.sp .bd .fl-two { display: flex; flex-direction: column; align-items: flex-end; }
.sp .bd .fl-two b { font-weight: 600; }
.sp .bd .fl-two .rec { color: var(--lp-muted); }
.sp .bd .fl-d20 b { color: var(--lp-accent-text); }
.sp .bd .fl-gap { color: var(--lp-accent-text); font-weight: 600; background: var(--bt-wedge); }
.sp .bd .fl-old { color: var(--lp-ink-2); }
.sp .bd .fl-q, .sp .bd .fl-src { white-space: normal; width: 30%; line-height: 1.25; }
.sp .bd .fl-q { text-align: end; }
.sp .bd .fl-src { text-align: center; }
@media (min-width: 1180px) { .sp .stage .fl { font-size: 14px; } .sp .stage .fl.rec { font-size: 12px; } }

/* ---- the header's live sequence (seq): 0 agreed, 1 the 17 days, 2 recorded, 3 both (rest) ---- */
/* the first clock: from the first moment on */
.sp .bd[data-st="seq"] .bt-ht { opacity: 1; transform: rotate(23.23deg); }
.sp .bd[data-st="seq"] .bt-m3 { opacity: 1; transform: none; }
.sp .bd[data-st="seq"] .fl-d3 { opacity: 1; }
/* the 17 days: the wedge fills day by day, then says how long */
.sp .bd[data-st="seq"][data-s="1"] .bt-wg path,
.sp .bd[data-st="seq"][data-s="2"] .bt-wg path,
.sp .bd[data-st="seq"][data-s="3"] .bt-wg path,
.sp .bd[data-st="seq"][data-s="1"] .fl-gap,
.sp .bd[data-st="seq"][data-s="2"] .fl-gap,
.sp .bd[data-st="seq"][data-s="3"] .fl-gap { opacity: 1; }
.sp .bd[data-st="seq"][data-s="1"] .fl-gap { transition-delay: 1.4s; }
/* the second clock: the orange hand arrives on 20 March */
.sp .bd[data-st="seq"][data-s="2"] .bt-hk,
.sp .bd[data-st="seq"][data-s="3"] .bt-hk { opacity: 1; transform: rotate(220.65deg); }
.sp .bd[data-st="seq"][data-s="2"] .bt-m20,
.sp .bd[data-st="seq"][data-s="3"] .bt-m20 { opacity: 1; transform: none; }
.sp .bd[data-st="seq"][data-s="2"] .fl-d20,
.sp .bd[data-st="seq"][data-s="3"] .fl-d20 { opacity: 1; }
.sp .bd[data-st="seq"][data-s="2"] .bt-m20, .sp .bd[data-st="seq"][data-s="2"] .fl-d20 { transition-delay: .5s; }
/* a loop back to the first moment: the first clock arrives again */
.sp .bd.pre .bt-ht { opacity: 0; transform: rotate(23.23deg) scale(.2); }
.sp .bd.pre .bt-m3, .sp .bd.pre .fl-d3 { opacity: 0; }

/* ---- the other states ---- */
/* the first clock (ink hand on 3 March) */
.sp .bd[data-st="def"] .bt-ht, .sp .bd[data-st="c1"] .bt-ht, .sp .bd[data-st="c2"] .bt-ht,
.sp .bd[data-st="t0"] .bt-ht, .sp .bd[data-st="t1"] .bt-ht, .sp .bd[data-st="t2"] .bt-ht, .sp .bd[data-st="t3"] .bt-ht, .sp .bd[data-st="t4"] .bt-ht,
.sp .bd[data-st="src0"] .bt-ht { opacity: 1; transform: rotate(23.23deg); }
.sp .bd[data-st="def"] .bt-m3, .sp .bd[data-st="c1"] .bt-m3, .sp .bd[data-st="c2"] .bt-m3,
.sp .bd[data-st="t0"] .bt-m3, .sp .bd[data-st="t1"] .bt-m3, .sp .bd[data-st="t2"] .bt-m3, .sp .bd[data-st="t3"] .bt-m3, .sp .bd[data-st="t4"] .bt-m3,
.sp .bd[data-st="src0"] .bt-m3 { opacity: 1; transform: none; }
.sp .bd[data-st="def"] .fl-d3, .sp .bd[data-st="c1"] .fl-d3, .sp .bd[data-st="c2"] .fl-d3,
.sp .bd[data-st="t0"] .fl-d3, .sp .bd[data-st="t1"] .fl-d3, .sp .bd[data-st="t2"] .fl-d3, .sp .bd[data-st="t3"] .fl-d3, .sp .bd[data-st="t4"] .fl-d3,
.sp .bd[data-st="src0"] .fl-d3 { opacity: 1; }
/* the second clock (orange hand on 20 March) */
.sp .bd[data-st="def"] .bt-hk, .sp .bd[data-st="c2"] .bt-hk, .sp .bd[data-st="one"] .bt-hk,
.sp .bd[data-st="t0"] .bt-hk, .sp .bd[data-st="t1"] .bt-hk, .sp .bd[data-st="t2"] .bt-hk, .sp .bd[data-st="t3"] .bt-hk, .sp .bd[data-st="t4"] .bt-hk,
.sp .bd[data-st="src0"] .bt-hk, .sp .bd[data-st="src1"] .bt-hk { opacity: 1; transform: rotate(220.65deg); }
.sp .bd[data-st="def"] .bt-m20, .sp .bd[data-st="c2"] .bt-m20, .sp .bd[data-st="one"] .bt-m20,
.sp .bd[data-st="t0"] .bt-m20, .sp .bd[data-st="t1"] .bt-m20, .sp .bd[data-st="t2"] .bt-m20, .sp .bd[data-st="t3"] .bt-m20, .sp .bd[data-st="t4"] .bt-m20,
.sp .bd[data-st="src0"] .bt-m20, .sp .bd[data-st="src1"] .bt-m20 { opacity: 1; transform: none; }
.sp .bd[data-st="def"] .fl-d20, .sp .bd[data-st="c2"] .fl-d20, .sp .bd[data-st="one"] .fl-d20,
.sp .bd[data-st="t0"] .fl-d20, .sp .bd[data-st="t1"] .fl-d20, .sp .bd[data-st="t2"] .fl-d20, .sp .bd[data-st="t3"] .fl-d20, .sp .bd[data-st="t4"] .fl-d20,
.sp .bd[data-st="src0"] .fl-d20, .sp .bd[data-st="src1"] .fl-d20 { opacity: 1; }
/* the time between them */
.sp .bd[data-st="def"] .bt-wg path, .sp .bd[data-st="c2"] .bt-wg path,
.sp .bd[data-st="t0"] .bt-wg path, .sp .bd[data-st="t1"] .bt-wg path, .sp .bd[data-st="t2"] .bt-wg path, .sp .bd[data-st="t3"] .bt-wg path, .sp .bd[data-st="t4"] .bt-wg path { opacity: 1; }
.sp .bd[data-st="def"] .fl-gap, .sp .bd[data-st="c2"] .fl-gap { opacity: 1; }
/* 02 one clock: only the moment it was saved; the 17 days unseen */
.sp .bd[data-st="one"] .bt-un { opacity: 1; }
/* 03 as it stood on 10 March: the index inside the wedge; then each clock read in turn */
.sp .bd[data-st="t0"] .bt-ix, .sp .bd[data-st="t1"] .bt-ix, .sp .bd[data-st="t2"] .bt-ix, .sp .bd[data-st="t3"] .bt-ix, .sp .bd[data-st="t4"] .bt-ix,
.sp .bd[data-st="t0"] .fl-ix, .sp .bd[data-st="t1"] .fl-ix, .sp .bd[data-st="t2"] .fl-ix, .sp .bd[data-st="t3"] .fl-ix, .sp .bd[data-st="t4"] .fl-ix { opacity: 1; }
.sp .bd[data-st="t1"] .bt-hk, .sp .bd[data-st="t1"] .bt-m20, .sp .bd[data-st="t1"] .fl-d20 { opacity: .22; }
.sp .bd[data-st="t2"] .bt-ht, .sp .bd[data-st="t2"] .bt-m3, .sp .bd[data-st="t2"] .fl-d3 { opacity: .22; }
.sp .bd .bt-wg { transition: opacity .45s ease; }
.sp .bd[data-st="t1"] .bt-wg, .sp .bd[data-st="t2"] .bt-wg, .sp .bd[data-st="t3"] .bt-wg, .sp .bd[data-st="t4"] .bt-wg { opacity: .5; }
.sp .bd[data-st="t1"] .fl-new, .sp .bd[data-st="t2"] .fl-old { opacity: 1; }
.sp .bd[data-st="t3"] .bt-hst, .sp .bd[data-st="t3"] .bt-m28, .sp .bd[data-st="t3"] .fl-hst { opacity: 1; }
.sp .bd[data-st="t3"] .bt-m28 { transform: none; transition-delay: .3s; }
.sp .bd[data-st="t4"] .bt-q, .sp .bd[data-st="t4"] .fl-q { opacity: 1; }
/* 04 where the dates come from: a source that states the date; then one that does not, and the
   first clock falls back onto the moment it was recorded (the ink hand turns onto the orange one) */
.sp .bd[data-st="src0"] .bt-src, .sp .bd[data-st="src0"] .fl-src { opacity: 1; }
.sp .bd[data-st="src1"] .bt-ht { opacity: 1; transform: rotate(220.65deg); }
.sp .bd[data-st="src1"] .bt-hk { transform: rotate(220.65deg) scale(.82); }

/* ---- the staggered arrivals: the wedge fills day by day in the live sequence ---- */
.sp .bd[data-st="seq"][data-s="1"] .bt-wg path:nth-child(2) { transition-delay: 70ms; }
.sp .bd[data-st="seq"][data-s="1"] .bt-wg path:nth-child(3) { transition-delay: 140ms; }
.sp .bd[data-st="seq"][data-s="1"] .bt-wg path:nth-child(4) { transition-delay: 210ms; }
.sp .bd[data-st="seq"][data-s="1"] .bt-wg path:nth-child(5) { transition-delay: 280ms; }
.sp .bd[data-st="seq"][data-s="1"] .bt-wg path:nth-child(6) { transition-delay: 350ms; }
.sp .bd[data-st="seq"][data-s="1"] .bt-wg path:nth-child(7) { transition-delay: 420ms; }
.sp .bd[data-st="seq"][data-s="1"] .bt-wg path:nth-child(8) { transition-delay: 490ms; }
.sp .bd[data-st="seq"][data-s="1"] .bt-wg path:nth-child(9) { transition-delay: 560ms; }
.sp .bd[data-st="seq"][data-s="1"] .bt-wg path:nth-child(10) { transition-delay: 630ms; }
.sp .bd[data-st="seq"][data-s="1"] .bt-wg path:nth-child(11) { transition-delay: 700ms; }
.sp .bd[data-st="seq"][data-s="1"] .bt-wg path:nth-child(12) { transition-delay: 770ms; }
.sp .bd[data-st="seq"][data-s="1"] .bt-wg path:nth-child(13) { transition-delay: 840ms; }
.sp .bd[data-st="seq"][data-s="1"] .bt-wg path:nth-child(14) { transition-delay: 910ms; }
.sp .bd[data-st="seq"][data-s="1"] .bt-wg path:nth-child(15) { transition-delay: 980ms; }
.sp .bd[data-st="seq"][data-s="1"] .bt-wg path:nth-child(16) { transition-delay: 1050ms; }
.sp .bd[data-st="seq"][data-s="1"] .bt-wg path:nth-child(17) { transition-delay: 1120ms; }
.sp .bd[data-st="seq"][data-s="1"] .bt-wg path:nth-child(18) { transition-delay: 1190ms; }

/* ---- the copies: the header's on a phone, a chapter's pinned one ---- */
.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 labels give way (the readout says the same) */
.sp .inst:not(.is-hero) .fl-q, .sp .inst:not(.is-hero) .fl-src, .sp .inst:not(.is-hero) .fl-hst, .sp .inst:not(.is-hero) .fl-two .rec { display: none; }
.sp .inst:not(.is-hero) .fl { font-size: 12.5px; }
.sp .inst:not(.is-hero) .fl.rec { font-size: 12px; }
@media (min-width: 1180px) {
  .sp .run > .ch.hd .hd-b { margin-top: 0; }
}

/* ---- where each label sits on the dial, in % of the square ---- */
.sp .bd .p-s0 { left: 51.40%; top: 2.60%; }
.sp .bd .p-s1 { left: 48.60%; top: 2.60%; }
.sp .bd .p-d3 { left: 58.40%; top: 21.40%; }
.sp .bd .p-d20 { left: 33.00%; top: 66.00%; }
.sp .bd .p-gap { left: 67.80%; top: 61.10%; }
.sp .bd .p-d10 { left: 91.50%; top: 63.00%; }
.sp .bd .p-val { left: 80.00%; top: 50.80%; }
.sp .bd .p-rep { left: 28.20%; top: 81.20%; }
.sp .bd .p-later { left: 25.00%; top: 26.80%; }
.sp .bd .p-q { left: 78.00%; top: 59.00%; }
.sp .bd .p-src { left: 70.00%; top: 42.40%; }