/* ============================================================================
   /two-ways-to-build-organizational-memory: the two ways, 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 TwoWaysPage.Drawing (the page's code-behind), one square
   of 0..1000 units: the memory's twelve marks inside its ring, twelve places for tools outside it.
   Connecting: a record travels in from each tool and lights its mark, as it arrives. Running the
   work: a piece of work leaves the hub and is kept as a decision, with its reasoning (lines to
   three marks) and who approved it. Labels are HTML (.fl), placed by the .p-* classes in % of the
   square (CSP: no style attributes). GENERATED by scratchpad/sub3/explainers/gen-tw-css.py from
   one state table. Tokens only (no hex outside tos-site.css); every rule under .sp.
   ============================================================================ */

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

/* ---- 01 the short answer: the citable block ---- */
.sp .tw-def .tw-term { margin-top: 6px; }
.sp .tw-def #twCiteText { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--lp-rule); }
.sp .tw-def .tw-def-x { margin-top: 0; font-size: 17px; line-height: 1.6; color: var(--lp-ink); }
.sp .tw-def .tw-def-attr { margin-top: 16px; font: 450 12px/1.6 var(--tos-font-mono); color: var(--lp-muted); overflow-wrap: anywhere; }
.sp .tw-def .tw-cite { margin-top: 20px; }

/* ---- 02 the table: the question narrow, the two ways equal ---- */
.sp .tw-fig .fig-tag { margin-bottom: 12px; }
@media (min-width: 760px) {
  .sp .tw-cmp thead th:first-child { width: 26%; }
  .sp .tw-cmp thead th:last-child { width: 37%; }
}
@media (min-width: 1180px) {
  .sp .tw-def { padding: 28px 32px; }
  .sp .tw-def .tw-def-x { font-size: 18px; }
  .sp .tw-cmp td { font-size: 15px; }
  .sp .tw-cmp th[scope="row"] { font-size: 16px; }
}

/* ---- the dial ---- */
.sp .bd .ins-c { container-type: inline-size; }
.sp .bd .tw-tk .g-bezel { fill: none; stroke: var(--lp-rule-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sp .bd .tw-ring { fill: none; stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sp .bd .tw-hub { fill: var(--lp-ink); }
.sp .bd .tw-t { fill: var(--lp-paper); stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .4s ease; }
.sp .bd .tw-slot { fill: none; stroke: var(--lp-rule-2); stroke-width: 1.5px; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .4s ease; }
.sp .bd .tw-l { stroke: var(--lp-rule-2); stroke-width: 1.5px; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .4s ease; }
.sp .bd .tw-p rect { fill: var(--lp-accent); opacity: 0; transform-box: view-box; }
.sp .bd .tw-i { fill: var(--lp-ink); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.7); transition: opacity .3s ease, transform .3s ease; }
.sp .bd .tw-why line { stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sp .bd .tw-why, .sp .bd .tw-wi { opacity: 0; transition: opacity .45s ease; }
.sp .bd .tw-wi { fill: var(--lp-ink); }
.sp .bd .tw-work { fill: var(--lp-accent); opacity: 0; transform-box: view-box; }
.sp .bd .tw-dec { fill: var(--lp-accent); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity .35s ease, transform .45s var(--dl-ease); }
.sp .bd.reset, .sp .bd.reset * { transition: none !important; }

/* a record travels in along its line (once, each time the state is entered); the work leaves the hub */
@keyframes tw-in { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; } 78% { opacity: 1; transform: translateY(133px); } 100% { opacity: 0; transform: translateY(133px); } }
@keyframes tw-work { 0% { opacity: 0; transform: none; } 12% { opacity: 1; } 72% { opacity: 1; transform: translate(100px, -173.2px); } 100% { opacity: 0; transform: translate(100px, -173.2px); } }

/* 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-dk { background: var(--lp-paper); padding: 0 3px; }
.sp .bd .fl-apr { display: inline-flex; align-items: center; gap: 6px; background: var(--lp-paper); padding: 0 3px; }
.sp .bd .fl-apr .av { width: 22px; height: 22px; }
@media (min-width: 1180px) { .sp .stage .fl { font-size: 14px; } .sp .stage .fl.rec { font-size: 12px; } }

/* ---- connecting: the tools a company keeps (every other place) ---- */
.sp .bd[data-st="con"] .tw-t.tk-0,
.sp .bd[data-st="con"] .tw-t.tk-2,
.sp .bd[data-st="con"] .tw-t.tk-4,
.sp .bd[data-st="con"] .tw-t.tk-6,
.sp .bd[data-st="con"] .tw-t.tk-8,
.sp .bd[data-st="con"] .tw-t.tk-10,
.sp .bd[data-st="both"] .tw-t.tk-0,
.sp .bd[data-st="both"] .tw-t.tk-2,
.sp .bd[data-st="both"] .tw-t.tk-4,
.sp .bd[data-st="both"] .tw-t.tk-6,
.sp .bd[data-st="both"] .tw-t.tk-8,
.sp .bd[data-st="both"] .tw-t.tk-10,
.sp .bd[data-st="seq"][data-s="0"] .tw-t.tk-0,
.sp .bd[data-st="seq"][data-s="0"] .tw-t.tk-2,
.sp .bd[data-st="seq"][data-s="0"] .tw-t.tk-4,
.sp .bd[data-st="seq"][data-s="0"] .tw-t.tk-6,
.sp .bd[data-st="seq"][data-s="0"] .tw-t.tk-8,
.sp .bd[data-st="seq"][data-s="0"] .tw-t.tk-10,
.sp .bd[data-st="seq"][data-s="2"] .tw-t.tk-0,
.sp .bd[data-st="seq"][data-s="2"] .tw-t.tk-2,
.sp .bd[data-st="seq"][data-s="2"] .tw-t.tk-4,
.sp .bd[data-st="seq"][data-s="2"] .tw-t.tk-6,
.sp .bd[data-st="seq"][data-s="2"] .tw-t.tk-8,
.sp .bd[data-st="seq"][data-s="2"] .tw-t.tk-10,
.sp .bd[data-st="con"] .tw-l.tk-0,
.sp .bd[data-st="con"] .tw-l.tk-2,
.sp .bd[data-st="con"] .tw-l.tk-4,
.sp .bd[data-st="con"] .tw-l.tk-6,
.sp .bd[data-st="con"] .tw-l.tk-8,
.sp .bd[data-st="con"] .tw-l.tk-10,
.sp .bd[data-st="both"] .tw-l.tk-0,
.sp .bd[data-st="both"] .tw-l.tk-2,
.sp .bd[data-st="both"] .tw-l.tk-4,
.sp .bd[data-st="both"] .tw-l.tk-6,
.sp .bd[data-st="both"] .tw-l.tk-8,
.sp .bd[data-st="both"] .tw-l.tk-10,
.sp .bd[data-st="seq"][data-s="0"] .tw-l.tk-0,
.sp .bd[data-st="seq"][data-s="0"] .tw-l.tk-2,
.sp .bd[data-st="seq"][data-s="0"] .tw-l.tk-4,
.sp .bd[data-st="seq"][data-s="0"] .tw-l.tk-6,
.sp .bd[data-st="seq"][data-s="0"] .tw-l.tk-8,
.sp .bd[data-st="seq"][data-s="0"] .tw-l.tk-10,
.sp .bd[data-st="seq"][data-s="2"] .tw-l.tk-0,
.sp .bd[data-st="seq"][data-s="2"] .tw-l.tk-2,
.sp .bd[data-st="seq"][data-s="2"] .tw-l.tk-4,
.sp .bd[data-st="seq"][data-s="2"] .tw-l.tk-6,
.sp .bd[data-st="seq"][data-s="2"] .tw-l.tk-8,
.sp .bd[data-st="seq"][data-s="2"] .tw-l.tk-10 { opacity: 1; }
.sp .bd[data-st="con"] .tw-p.tk-0,
.sp .bd[data-st="con"] .tw-p.tk-2,
.sp .bd[data-st="con"] .tw-p.tk-4,
.sp .bd[data-st="con"] .tw-p.tk-6,
.sp .bd[data-st="con"] .tw-p.tk-8,
.sp .bd[data-st="con"] .tw-p.tk-10,
.sp .bd[data-st="both"] .tw-p.tk-0,
.sp .bd[data-st="both"] .tw-p.tk-2,
.sp .bd[data-st="both"] .tw-p.tk-4,
.sp .bd[data-st="both"] .tw-p.tk-6,
.sp .bd[data-st="both"] .tw-p.tk-8,
.sp .bd[data-st="both"] .tw-p.tk-10,
.sp .bd[data-st="seq"][data-s="0"] .tw-p.tk-0,
.sp .bd[data-st="seq"][data-s="0"] .tw-p.tk-2,
.sp .bd[data-st="seq"][data-s="0"] .tw-p.tk-4,
.sp .bd[data-st="seq"][data-s="0"] .tw-p.tk-6,
.sp .bd[data-st="seq"][data-s="0"] .tw-p.tk-8,
.sp .bd[data-st="seq"][data-s="0"] .tw-p.tk-10,
.sp .bd[data-st="seq"][data-s="2"] .tw-p.tk-0,
.sp .bd[data-st="seq"][data-s="2"] .tw-p.tk-2,
.sp .bd[data-st="seq"][data-s="2"] .tw-p.tk-4,
.sp .bd[data-st="seq"][data-s="2"] .tw-p.tk-6,
.sp .bd[data-st="seq"][data-s="2"] .tw-p.tk-8,
.sp .bd[data-st="seq"][data-s="2"] .tw-p.tk-10 rect { animation: tw-in 1.5s var(--dl-ease) both; }
.sp .bd[data-st="con"] .tw-i.tk-0,
.sp .bd[data-st="con"] .tw-i.tk-2,
.sp .bd[data-st="con"] .tw-i.tk-4,
.sp .bd[data-st="con"] .tw-i.tk-6,
.sp .bd[data-st="con"] .tw-i.tk-8,
.sp .bd[data-st="con"] .tw-i.tk-10,
.sp .bd[data-st="both"] .tw-i.tk-0,
.sp .bd[data-st="both"] .tw-i.tk-2,
.sp .bd[data-st="both"] .tw-i.tk-4,
.sp .bd[data-st="both"] .tw-i.tk-6,
.sp .bd[data-st="both"] .tw-i.tk-8,
.sp .bd[data-st="both"] .tw-i.tk-10,
.sp .bd[data-st="seq"][data-s="0"] .tw-i.tk-0,
.sp .bd[data-st="seq"][data-s="0"] .tw-i.tk-2,
.sp .bd[data-st="seq"][data-s="0"] .tw-i.tk-4,
.sp .bd[data-st="seq"][data-s="0"] .tw-i.tk-6,
.sp .bd[data-st="seq"][data-s="0"] .tw-i.tk-8,
.sp .bd[data-st="seq"][data-s="0"] .tw-i.tk-10,
.sp .bd[data-st="seq"][data-s="2"] .tw-i.tk-0,
.sp .bd[data-st="seq"][data-s="2"] .tw-i.tk-2,
.sp .bd[data-st="seq"][data-s="2"] .tw-i.tk-4,
.sp .bd[data-st="seq"][data-s="2"] .tw-i.tk-6,
.sp .bd[data-st="seq"][data-s="2"] .tw-i.tk-8,
.sp .bd[data-st="seq"][data-s="2"] .tw-i.tk-10 { opacity: 1; transform: none; }
/* ---- a full stack: a tool in every place, every mark fed ---- */
.sp .bd[data-st="stack"] .tw-t.tk-0,
.sp .bd[data-st="stack"] .tw-t.tk-1,
.sp .bd[data-st="stack"] .tw-t.tk-2,
.sp .bd[data-st="stack"] .tw-t.tk-3,
.sp .bd[data-st="stack"] .tw-t.tk-4,
.sp .bd[data-st="stack"] .tw-t.tk-5,
.sp .bd[data-st="stack"] .tw-t.tk-6,
.sp .bd[data-st="stack"] .tw-t.tk-7,
.sp .bd[data-st="stack"] .tw-t.tk-8,
.sp .bd[data-st="stack"] .tw-t.tk-9,
.sp .bd[data-st="stack"] .tw-t.tk-10,
.sp .bd[data-st="stack"] .tw-t.tk-11,
.sp .bd[data-st="stack"] .tw-l.tk-0,
.sp .bd[data-st="stack"] .tw-l.tk-1,
.sp .bd[data-st="stack"] .tw-l.tk-2,
.sp .bd[data-st="stack"] .tw-l.tk-3,
.sp .bd[data-st="stack"] .tw-l.tk-4,
.sp .bd[data-st="stack"] .tw-l.tk-5,
.sp .bd[data-st="stack"] .tw-l.tk-6,
.sp .bd[data-st="stack"] .tw-l.tk-7,
.sp .bd[data-st="stack"] .tw-l.tk-8,
.sp .bd[data-st="stack"] .tw-l.tk-9,
.sp .bd[data-st="stack"] .tw-l.tk-10,
.sp .bd[data-st="stack"] .tw-l.tk-11 { opacity: 1; }
.sp .bd[data-st="stack"] .tw-p.tk-0,
.sp .bd[data-st="stack"] .tw-p.tk-1,
.sp .bd[data-st="stack"] .tw-p.tk-2,
.sp .bd[data-st="stack"] .tw-p.tk-3,
.sp .bd[data-st="stack"] .tw-p.tk-4,
.sp .bd[data-st="stack"] .tw-p.tk-5,
.sp .bd[data-st="stack"] .tw-p.tk-6,
.sp .bd[data-st="stack"] .tw-p.tk-7,
.sp .bd[data-st="stack"] .tw-p.tk-8,
.sp .bd[data-st="stack"] .tw-p.tk-9,
.sp .bd[data-st="stack"] .tw-p.tk-10,
.sp .bd[data-st="stack"] .tw-p.tk-11 rect { animation: tw-in 1.5s var(--dl-ease) both; }
.sp .bd[data-st="stack"] .tw-i.tk-0,
.sp .bd[data-st="stack"] .tw-i.tk-1,
.sp .bd[data-st="stack"] .tw-i.tk-2,
.sp .bd[data-st="stack"] .tw-i.tk-3,
.sp .bd[data-st="stack"] .tw-i.tk-4,
.sp .bd[data-st="stack"] .tw-i.tk-5,
.sp .bd[data-st="stack"] .tw-i.tk-6,
.sp .bd[data-st="stack"] .tw-i.tk-7,
.sp .bd[data-st="stack"] .tw-i.tk-8,
.sp .bd[data-st="stack"] .tw-i.tk-9,
.sp .bd[data-st="stack"] .tw-i.tk-10,
.sp .bd[data-st="stack"] .tw-i.tk-11 { opacity: 1; transform: none; }
/* ---- a factory: two tools (spreadsheets, inboxes), the other places empty ---- */
.sp .bd[data-st="fac"] .tw-t.tk-3,
.sp .bd[data-st="fac"] .tw-t.tk-9,
.sp .bd[data-st="fac"] .tw-l.tk-3,
.sp .bd[data-st="fac"] .tw-l.tk-9 { opacity: 1; }
.sp .bd[data-st="fac"] .tw-p.tk-3,
.sp .bd[data-st="fac"] .tw-p.tk-9 rect { animation: tw-in 1.5s var(--dl-ease) both; }
.sp .bd[data-st="fac"] .tw-i.tk-3,
.sp .bd[data-st="fac"] .tw-i.tk-9 { opacity: 1; transform: none; }
.sp .bd[data-st="fac"] .tw-slot.tk-0,
.sp .bd[data-st="fac"] .tw-slot.tk-1,
.sp .bd[data-st="fac"] .tw-slot.tk-2,
.sp .bd[data-st="fac"] .tw-slot.tk-4,
.sp .bd[data-st="fac"] .tw-slot.tk-5,
.sp .bd[data-st="fac"] .tw-slot.tk-6,
.sp .bd[data-st="fac"] .tw-slot.tk-7,
.sp .bd[data-st="fac"] .tw-slot.tk-8,
.sp .bd[data-st="fac"] .tw-slot.tk-10,
.sp .bd[data-st="fac"] .tw-slot.tk-11 { opacity: 1; }
.sp .bd[data-st="fac"] .fl-fac { opacity: 1; }
/* ---- running the work: it leaves the hub and is kept as a decision, with its reasons and who approved it ---- */
.sp .bd[data-st="run"] .tw-work,
.sp .bd[data-st="both"] .tw-work,
.sp .bd[data-st="fac"] .tw-work,
.sp .bd[data-st="seq"][data-s="1"] .tw-work,
.sp .bd[data-st="seq"][data-s="2"] .tw-work { animation: tw-work 1.2s var(--dl-ease) both; }
.sp .bd[data-st="run"] .tw-dec,
.sp .bd[data-st="both"] .tw-dec,
.sp .bd[data-st="fac"] .tw-dec,
.sp .bd[data-st="seq"][data-s="1"] .tw-dec,
.sp .bd[data-st="seq"][data-s="2"] .tw-dec { opacity: 1; transform: none; transition-delay: .8s; }
.sp .bd[data-st="run"] .tw-why,
.sp .bd[data-st="both"] .tw-why,
.sp .bd[data-st="fac"] .tw-why,
.sp .bd[data-st="seq"][data-s="1"] .tw-why,
.sp .bd[data-st="seq"][data-s="2"] .tw-why,
.sp .bd[data-st="run"] .tw-wi,
.sp .bd[data-st="both"] .tw-wi,
.sp .bd[data-st="fac"] .tw-wi,
.sp .bd[data-st="seq"][data-s="1"] .tw-wi,
.sp .bd[data-st="seq"][data-s="2"] .tw-wi { opacity: 1; transition-delay: 1.1s; }
.sp .bd[data-st="run"] .fl-run,
.sp .bd[data-st="both"] .fl-run,
.sp .bd[data-st="fac"] .fl-run,
.sp .bd[data-st="seq"][data-s="1"] .fl-run,
.sp .bd[data-st="seq"][data-s="2"] .fl-run { opacity: 1; transition-delay: 1.3s; }
/* ---- the arrivals, one tool after another (by place round the dial) ---- */
.sp .bd .tw-p.tk-0 rect { animation-delay: 0ms; }
.sp .bd .tw-i.tk-0 { transition-delay: 1000ms; }
.sp .bd .tw-p.tk-1 rect { animation-delay: 0ms; }
.sp .bd .tw-i.tk-1 { transition-delay: 1000ms; }
.sp .bd .tw-p.tk-2 rect { animation-delay: 140ms; }
.sp .bd .tw-i.tk-2 { transition-delay: 1140ms; }
.sp .bd .tw-p.tk-3 rect { animation-delay: 140ms; }
.sp .bd .tw-i.tk-3 { transition-delay: 1140ms; }
.sp .bd .tw-p.tk-4 rect { animation-delay: 280ms; }
.sp .bd .tw-i.tk-4 { transition-delay: 1280ms; }
.sp .bd .tw-p.tk-5 rect { animation-delay: 280ms; }
.sp .bd .tw-i.tk-5 { transition-delay: 1280ms; }
.sp .bd .tw-p.tk-6 rect { animation-delay: 420ms; }
.sp .bd .tw-i.tk-6 { transition-delay: 1420ms; }
.sp .bd .tw-p.tk-7 rect { animation-delay: 420ms; }
.sp .bd .tw-i.tk-7 { transition-delay: 1420ms; }
.sp .bd .tw-p.tk-8 rect { animation-delay: 560ms; }
.sp .bd .tw-i.tk-8 { transition-delay: 1560ms; }
.sp .bd .tw-p.tk-9 rect { animation-delay: 560ms; }
.sp .bd .tw-i.tk-9 { transition-delay: 1560ms; }
.sp .bd .tw-p.tk-10 rect { animation-delay: 700ms; }
.sp .bd .tw-i.tk-10 { transition-delay: 1700ms; }
.sp .bd .tw-p.tk-11 rect { animation-delay: 700ms; }
.sp .bd .tw-i.tk-11 { transition-delay: 1700ms; }

/* a loop back to the first moment: nothing carries over */
.sp .bd.pre .tw-i, .sp .bd.pre .tw-dec { opacity: 0; }

/* ---- 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; }
.sp .inst:not(.is-hero) .fl-apr, .sp .inst:not(.is-hero) .p-why, .sp .inst:not(.is-hero) .p-dec { 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-dec { left: 60.00%; top: 27.40%; }
.sp .bd .p-why { left: 65.00%; top: 46.30%; }
.sp .bd .p-apr { left: 47.60%; top: 47.00%; }
.sp .bd .p-sheets { left: 6.40%; top: 53.20%; }
.sp .bd .p-inbox { left: 93.60%; top: 53.20%; }