/* ============================================================================
   /research: the series on the dial, the page's one instrument (sub page system v1.1,
   approved by the founder 9 Oct 2026 as the mockup Subpage_Research_v1.0_2026-10-08_2059).
   The instrument is the year 2026 on the mark's twelve dots, five of them the papers:
     ser  the page header: the hand visits each paper in turn (tabs + Pause; the page's only autoplay)
     th   01 the central thesis, held in the dial
     pap  02 the paper being read puts the hand on its month (data-s = the paper's place in the series)
     ch   03 from research to reality: four stops, a full turn
     au   04 the five components of Paper II, five levels each (Paper III's maturity model)
   Every state is drawn here from .bd[data-st] / [data-s]; sub.js only sets the attributes. The drawing
   is ResearchPage.Drawing (research.aspx.vb); its words are HTML (.fl), placed by the .p-* classes at
   the end of this file. GENERATED from the mockup's own page CSS (scratchpad sub2/research/gen-css.js),
   so the numbers are the approved ones. Tokens only (no hex outside tos-site.css).
   NOTE: the hand's angle per paper ([data-s="n"] .rs-ix) is the paper's month (I February ... V June),
   the same months ResearchPage.MonthOf gives the dots. A sixth paper needs both changed together.
   ============================================================================ */
/* ============ /research: the series on the dial (the page's one instrument) ============ */
.sp.rs .rs-disc { fill: none; stroke: var(--lp-rule-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sp.rs .rs-con { stroke: var(--lp-rule-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sp.rs .rs-track { fill: none; stroke: var(--lp-rule-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sp.rs .rs-on { fill: var(--lp-accent); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.5); transition: opacity .3s ease, transform .5s var(--dl-ease); }
.sp.rs .rs-arc { fill: none; stroke: var(--lp-ink); stroke-width: 2px; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .5s ease; }
.sp.rs .rs-ix { transform-box: view-box; transform-origin: 500px 500px; transform: rotate(30deg); transition: transform .9s var(--dl-ease), opacity .3s ease; }
.sp.rs .rs-ix line { stroke: var(--lp-accent); stroke-width: 14; stroke-linecap: round; }
.sp.rs .rs-hub { fill: var(--lp-ink); opacity: 0; transition: opacity .3s ease; }
.sp.rs .rs-spl { stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; transition: stroke .25s; }
.sp.rs .rs-lv { fill: var(--lp-paper); stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.3); transition: opacity .25s ease, transform .35s var(--dl-ease), stroke .25s, fill .25s; }
.sp.rs .rs-sp { transform-box: view-box; transform-origin: 500px 500px; opacity: 0; transition: transform 1s var(--dl-ease), opacity .45s ease; }
.sp.rs .rs-sp[data-u="0"] { transform: rotate(30deg); }
.sp.rs .bd[data-st="au"] .rs-sp[data-u="0"] { transform: rotate(0deg); opacity: 1; }
.sp.rs .rs-sp[data-u="1"] { transform: rotate(60deg); }
.sp.rs .bd[data-st="au"] .rs-sp[data-u="1"] { transform: rotate(72deg); opacity: 1; }
.sp.rs .rs-sp[data-u="2"] { transform: rotate(90deg); }
.sp.rs .bd[data-st="au"] .rs-sp[data-u="2"] { transform: rotate(144deg); opacity: 1; }
.sp.rs .rs-sp[data-u="3"] { transform: rotate(120deg); }
.sp.rs .bd[data-st="au"] .rs-sp[data-u="3"] { transform: rotate(216deg); opacity: 1; }
.sp.rs .rs-sp[data-u="4"] { transform: rotate(150deg); }
.sp.rs .bd[data-st="au"] .rs-sp[data-u="4"] { transform: rotate(288deg); opacity: 1; }
.sp.rs .bd[data-st="au"] .rs-lv[data-l="1"] { transition-delay: 0.45s; }
.sp.rs .bd[data-st="au"] .rs-lv[data-l="2"] { transition-delay: 0.53s; }
.sp.rs .bd[data-st="au"] .rs-lv[data-l="3"] { transition-delay: 0.61s; }
.sp.rs .bd[data-st="au"] .rs-lv[data-l="4"] { transition-delay: 0.69s; }
.sp.rs .bd[data-st="au"] .rs-lv[data-l="5"] { transition-delay: 0.77s; }
.sp.rs .bd[data-st="au"] .rs-lv { opacity: 1; transform: none; }
.sp.rs .bd[data-hu="0"] .rs-sp[data-u="0"] .rs-spl, .sp.rs .bd[data-hu="0"] .rs-sp[data-u="0"] .rs-lv { stroke: var(--lp-accent); }
.sp.rs .bd[data-hu="0"] .rs-sp[data-u="0"] .rs-lv { fill: var(--lp-accent); transition-delay: 0s; }
.sp.rs .bd[data-hu="0"] .rs-al[data-u="0"] { color: var(--lp-accent-text); }
.sp.rs .bd[data-hu="1"] .rs-sp[data-u="1"] .rs-spl, .sp.rs .bd[data-hu="1"] .rs-sp[data-u="1"] .rs-lv { stroke: var(--lp-accent); }
.sp.rs .bd[data-hu="1"] .rs-sp[data-u="1"] .rs-lv { fill: var(--lp-accent); transition-delay: 0s; }
.sp.rs .bd[data-hu="1"] .rs-al[data-u="1"] { color: var(--lp-accent-text); }
.sp.rs .bd[data-hu="2"] .rs-sp[data-u="2"] .rs-spl, .sp.rs .bd[data-hu="2"] .rs-sp[data-u="2"] .rs-lv { stroke: var(--lp-accent); }
.sp.rs .bd[data-hu="2"] .rs-sp[data-u="2"] .rs-lv { fill: var(--lp-accent); transition-delay: 0s; }
.sp.rs .bd[data-hu="2"] .rs-al[data-u="2"] { color: var(--lp-accent-text); }
.sp.rs .bd[data-hu="3"] .rs-sp[data-u="3"] .rs-spl, .sp.rs .bd[data-hu="3"] .rs-sp[data-u="3"] .rs-lv { stroke: var(--lp-accent); }
.sp.rs .bd[data-hu="3"] .rs-sp[data-u="3"] .rs-lv { fill: var(--lp-accent); transition-delay: 0s; }
.sp.rs .bd[data-hu="3"] .rs-al[data-u="3"] { color: var(--lp-accent-text); }
.sp.rs .bd[data-hu="4"] .rs-sp[data-u="4"] .rs-spl, .sp.rs .bd[data-hu="4"] .rs-sp[data-u="4"] .rs-lv { stroke: var(--lp-accent); }
.sp.rs .bd[data-hu="4"] .rs-sp[data-u="4"] .rs-lv { fill: var(--lp-accent); transition-delay: 0s; }
.sp.rs .bd[data-hu="4"] .rs-al[data-u="4"] { color: var(--lp-accent-text); }
/* the layers, by state */
.sp.rs .rs-mo, .sp.rs .rs-lp, .sp.rs .rs-lc { transition: opacity .45s ease; }
.sp.rs .bd:not([data-st="ser"]):not([data-st="pap"]) .rs-lp { opacity: 0; }
.sp.rs .bd:not([data-st="ch"]) .rs-lc { opacity: 0; }
.sp.rs .bd:is([data-st="au"], [data-st="ch"]) .rs-mo { opacity: 0; }
.sp.rs .bd:is([data-st="th"], [data-st="au"]) .rs-ix { opacity: 0; }
.sp.rs .bd:is([data-st="ser"], [data-st="pap"])[data-s="0"] .rs-ix { transform: rotate(30deg); }
.sp.rs .bd:is([data-st="ser"], [data-st="pap"])[data-s="0"] .rs-lp .rs-on[data-i="0"] { opacity: 1; transform: none; }
.sp.rs .bd:is([data-st="ser"], [data-st="pap"])[data-s="1"] .rs-ix { transform: rotate(60deg); }
.sp.rs .bd:is([data-st="ser"], [data-st="pap"])[data-s="1"] .rs-lp .rs-on[data-i="1"] { opacity: 1; transform: none; }
.sp.rs .bd:is([data-st="ser"], [data-st="pap"])[data-s="2"] .rs-ix { transform: rotate(90deg); }
.sp.rs .bd:is([data-st="ser"], [data-st="pap"])[data-s="2"] .rs-lp .rs-on[data-i="2"] { opacity: 1; transform: none; }
.sp.rs .bd:is([data-st="ser"], [data-st="pap"])[data-s="3"] .rs-ix { transform: rotate(120deg); }
.sp.rs .bd:is([data-st="ser"], [data-st="pap"])[data-s="3"] .rs-lp .rs-on[data-i="3"] { opacity: 1; transform: none; }
.sp.rs .bd:is([data-st="ser"], [data-st="pap"])[data-s="4"] .rs-ix { transform: rotate(150deg); }
.sp.rs .bd:is([data-st="ser"], [data-st="pap"])[data-s="4"] .rs-lp .rs-on[data-i="4"] { opacity: 1; transform: none; }
.sp.rs .bd[data-st="ch"][data-s="0"] .rs-ix { transform: rotate(0deg); }
.sp.rs .bd[data-st="ch"][data-s="0"] .rs-lc .rs-on[data-i="0"] { opacity: 1; transform: none; }
.sp.rs .bd[data-st="ch"][data-s="1"] .rs-ix { transform: rotate(90deg); }
.sp.rs .bd[data-st="ch"][data-s="1"] .rs-lc .rs-on[data-i="1"] { opacity: 1; transform: none; }
.sp.rs .bd[data-st="ch"][data-s="2"] .rs-ix { transform: rotate(180deg); }
.sp.rs .bd[data-st="ch"][data-s="2"] .rs-lc .rs-on[data-i="2"] { opacity: 1; transform: none; }
.sp.rs .bd[data-st="ch"][data-s="3"] .rs-ix { transform: rotate(270deg); }
.sp.rs .bd[data-st="ch"][data-s="3"] .rs-lc .rs-on[data-i="3"] { opacity: 1; transform: none; }
.sp.rs .bd[data-st="ch"][data-s="1"] .rs-arc:is([data-j="0"]) { opacity: 1; }
.sp.rs .bd[data-st="ch"][data-s="2"] .rs-arc:is([data-j="0"], [data-j="1"]) { opacity: 1; }
.sp.rs .bd[data-st="ch"][data-s="3"] .rs-arc:is([data-j="0"], [data-j="1"], [data-j="2"]) { opacity: 1; }
/* a loop back to the start (sub.js .reset/.pre): the hand jumps, then the first paper arrives */
.sp.rs .bd.reset .rs-ix, .sp.rs .bd.reset .rs-on, .sp.rs .bd.reset .rs-n { transition: none !important; }
.sp.rs .bd.pre .rs-on { opacity: 0 !important; }
/* the drawing's words are HTML (12px and up at any size): months and numerals for the papers, step
   numbers for the turn, component numbers for the audit */
.sp.rs .rs-ml, .sp.rs .rs-pn, .sp.rs .rs-cl, .sp.rs .rs-al { transition: opacity .35s ease, color .3s; }
.sp.rs .rs-ml { color: var(--lp-muted); }
.sp.rs .rs-ml.is-p { color: var(--lp-ink); font-weight: 600; }
.sp.rs .rs-pn { color: var(--lp-paper); font-weight: 600; display: none; }
.sp.rs .rs-cl, .sp.rs .rs-al { color: var(--lp-ink); font-weight: 600; opacity: 0; }
.sp.rs .bd:not([data-st="ser"]):not([data-st="pap"]) .rs-pn, .sp.rs .bd:is([data-st="au"], [data-st="ch"]) .rs-ml { opacity: 0; }
.sp.rs .bd[data-st="th"] .rs-ml { opacity: .5; }
.sp.rs .bd[data-st="ch"] .rs-cl, .sp.rs .bd[data-st="au"] .rs-al { opacity: 1; }
/* the open paper's numeral in the disc (where the readout sits under the dial) */
.sp.rs .rs-n { font: 600 clamp(38px, 12vw, 64px)/1 var(--tos-font-body); letter-spacing: -.02em; color: var(--lp-ink); opacity: 0; transition: opacity .16s ease; }
.sp.rs .bd:is([data-st="ser"], [data-st="pap"])[data-s="0"] .rs-n[data-i="0"] { opacity: 1; transition: opacity .26s ease .16s; }
.sp.rs .bd:is([data-st="ser"], [data-st="pap"])[data-s="1"] .rs-n[data-i="1"] { opacity: 1; transition: opacity .26s ease .16s; }
.sp.rs .bd:is([data-st="ser"], [data-st="pap"])[data-s="2"] .rs-n[data-i="2"] { opacity: 1; transition: opacity .26s ease .16s; }
.sp.rs .bd:is([data-st="ser"], [data-st="pap"])[data-s="3"] .rs-n[data-i="3"] { opacity: 1; transition: opacity .26s ease .16s; }
.sp.rs .bd:is([data-st="ser"], [data-st="pap"])[data-s="4"] .rs-n[data-i="4"] { opacity: 1; transition: opacity .26s ease .16s; }
/* the readout's own words */
.sp.rs .ro-x.rs-t, .sp.rs .ls-x.rs-t { margin-top: 4px; font: 600 21px/1.22 var(--tos-font-body); letter-spacing: -.02em; color: var(--lp-ink); text-wrap: balance; }
.sp.rs .rs-th span { color: var(--lp-muted); }
.sp.rs .ro-x.rs-th { font-size: 17px; line-height: 1.32; }
.sp.rs .rs-s { margin-top: 6px; color: var(--lp-muted); }
.sp.rs .ro-x.rs-x { margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--lp-ink-2); }
.sp.rs .rs-k2 { display: none; }
.sp.rs .rs-ms { display: grid; }
.sp.rs .rs-m { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform 0s linear .16s, visibility 0s linear .16s; }
.sp.rs .bd[data-s="0"] .rs-m[data-j="0"],
.sp.rs .bd[data-s="1"] .rs-m[data-j="1"],
.sp.rs .bd[data-s="2"] .rs-m[data-j="2"],
.sp.rs .bd[data-s="3"] .rs-m[data-j="3"],
.sp.rs .bd[data-s="4"] .rs-m[data-j="4"] { opacity: 1; visibility: visible; transform: none; transition: opacity .26s ease .16s, transform .32s var(--dl-ease) .16s, visibility 0s linear .16s; }
.sp.rs .rs-base { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--lp-muted); transition: opacity .3s ease; }
.sp.rs .rs-base::before { content: ""; width: 7px; height: 7px; background: var(--lp-ink); flex: none; }
.sp.rs .stage:not(.is-live) .rs-base { opacity: 0; }

/* the hero's copy on a phone: the dial at the column's width, the readout left under it */
.sp.rs .inst.is-hero { --ins-w: 340px; margin-top: 22px; }
.sp.rs .inst.is-hero .ro-set { margin-top: 12px; }
/* a pinned band: no month names (the readout names the paper), the numeral gives way to the hub */
.sp.rs .inst:not(.is-hero) .rs-ml, .sp.rs .inst:not(.is-hero) .rs-n, .sp.rs .inst:not(.is-hero) .g-ticks line:not(.h) { display: none; }
.sp.rs .inst:not(.is-hero) .rs-hub { opacity: 1; }
.sp.rs .inst:not(.is-hero) .tag-set { display: none; }
.sp.rs .inst:not(.is-hero) .rs-k2 { display: inline; }
.sp.rs .inst:not(.is-hero) .ro-k.rs-k2 { display: flex; }
.sp.rs .inst:not(.is-hero) .rs-t { font-size: 18px; }
.sp.rs .inst:not(.is-hero) .rs-th { font-size: 16px; }
.sp.rs.js .run .inst:not(.is-hero) { --ins-w: clamp(168px, calc(36vh - 84px), 260px); }
.sp.rs.js .run .inst[data-st="th"] { --ins-w: clamp(150px, calc(30vh - 60px), 210px); }

/* ---------- the hero copy ---------- */
.sp.rs .hd-b .cta { margin-top: 26px; }
.sp.rs .hd-b .more { margin-top: 14px; }

/* ---------- 01: the thesis as one statement (read in the instrument once JS runs) ---------- */
.sp.rs .rs-thesis { border-top: 1px solid var(--lp-ink); padding-top: 22px; }
.sp.rs .rs-st { font: 600 clamp(27px, 7.2vw, 38px)/1.12 var(--tos-font-body); letter-spacing: -.03em; color: var(--lp-ink); text-wrap: balance; }
.sp.rs .rs-st span { display: block; color: var(--lp-muted); }
.sp.rs .rs-coda { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--lp-ink); }
.sp.rs .rs-coda::before { content: ""; width: 7px; height: 7px; background: var(--lp-accent); flex: none; }
.sp.rs.js .rs-echo { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- 02: the papers, listed once; the dial is their index ---------- */
.sp.rs .rs-list { border-top: 1px solid var(--lp-ink); }
.sp.rs .rs-list > li.step { padding: 22px 0 16px; margin: 0; border-bottom: 1px solid var(--lp-rule); }
.sp.rs .rs-rk { display: flex; align-items: center; gap: 8px; color: var(--lp-muted); }
.sp.rs .rs-rk::before { content: ""; width: 8px; height: 8px; background: var(--lp-ink); flex: none; transition: background-color .3s; }
.sp.rs.js .rs-list > li.cur .rs-rk { color: var(--lp-ink); }
.sp.rs.js .rs-list > li.cur .rs-rk::before { background: var(--lp-accent); }
.sp.rs .rs-list h3 { margin-top: 8px; }
.sp.rs .rs-ft { margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--lp-muted); }
.sp.rs .rs-ab { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--lp-ink-2); max-width: 36em; }
.sp.rs .rs-a { display: flex; flex-wrap: wrap; column-gap: 22px; margin-top: 6px; }
.sp.rs .rs-a a { display: inline-flex; align-items: center; min-height: 44px; color: var(--lp-ink); text-decoration: underline; text-decoration-color: var(--lp-accent); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.sp.rs .rs-a a.rs-read { font-weight: 600; min-width: 44px; }
.sp.rs .rs-a a.rec { text-decoration-color: var(--lp-rule-2); }
.sp.rs .rs-a a.rec:hover { text-decoration-color: var(--lp-accent); }
.sp.rs .rs-exs p.big { font-size: clamp(20px, 5.6vw, 28px); }
/* research updates: the one form on the page */
.sp.rs .rs-sub form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.sp.rs .rs-sub input[type="email"] { min-height: 52px; width: 100%; padding: 0 14px; border: 1px solid var(--lp-rule-2); border-radius: 2px; background: var(--lp-paper); font: 500 16px/1 var(--tos-font-body); color: var(--lp-ink); }
.sp.rs .rs-sub input[type="email"]::placeholder { color: var(--lp-muted); }
.sp.rs .rs-sub input[type="email"]:focus { outline: 2px solid var(--lp-ink); outline-offset: 0; border-color: var(--lp-ink); }
.sp.rs .rs-sub { position: relative; }
.sp.rs .rs-sub .hp { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sp.rs .rs-sub .btn { width: 100%; }
.sp.rs .rs-sub .sub-ok { display: none; margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--lp-ink); }
.sp.rs .rs-sub .sub-ok.is-on { display: flex; align-items: center; gap: 8px; }
.sp.rs .rs-sub .sub-error { display: none; margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--lp-accent-text); }
.sp.rs .rs-sub .sub-error.is-on { display: block; }
.sp.rs .rs-sub .sub-ok::before { content: ""; width: 7px; height: 7px; background: var(--lp-accent); flex: none; }
@media (min-width: 480px) { .sp.rs .rs-sub form { grid-template-columns: minmax(0, 1fr) auto; } .sp.rs .rs-sub .btn { width: auto; } }

/* ---------- 03: from research to reality, the four stops ---------- */
.sp.rs .rs-steps { border-top: 1px solid var(--lp-ink); }
.sp.rs .rs-steps > li.step { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-content: start; margin: 0; padding: 16px 0 18px; border-bottom: 1px solid var(--lp-rule); }
.sp.rs .rs-steps .rec { grid-row: 1 / 3; padding-top: 4px; font-size: 13px; font-weight: 600; color: var(--lp-muted); transition: color .3s; }
.sp.rs.js .rs-steps > li.cur .rec { color: var(--lp-accent-text); }
.sp.rs .rs-steps b { font: 600 19px/1.3 var(--tos-font-body); letter-spacing: -.015em; color: var(--lp-ink); }
.sp.rs .rs-steps p { grid-column: 2; margin-top: 2px; font-size: 16px; line-height: 1.5; color: var(--lp-ink-2); }

/* ---------- 04: the instrument's five components ---------- */
.sp.rs .rs-comp { border-top: 1px solid var(--lp-ink); }
.sp.rs .rs-comp li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; min-height: 54px; padding: 8px 0; border-bottom: 1px solid var(--lp-rule); font-size: 17px; line-height: 1.35; color: var(--lp-ink); }
.sp.rs .rs-comp .rec { font-size: 13px; font-weight: 600; color: var(--lp-muted); transition: color .2s; }
.sp.rs .rs-comp li:hover .rec { color: var(--lp-accent-text); }
.sp.rs .rs-comp + .fig-cap { border-top: 0; margin-top: 12px; padding-top: 0; }
.sp.rs .rs-ctl { margin-top: 28px; }

/* ---------- desktop: the stage holds the readout inside its disc, sized by the dial ---------- */
@media (min-width: 1180px) {
  .sp.rs.js .stage { display: grid; grid-template-areas: "tag" "fig" "ctl" "base"; }
  .sp.rs .run > .ch.hd > .hd-a { max-width: 640px; }
  .sp.rs .stage > .tag-set { grid-area: tag; }
  .sp.rs .stage > .ins-c { grid-area: fig; container-type: inline-size; }
  .sp.rs .stage > .ro-set { grid-area: fig; align-self: center; justify-self: center; width: calc(var(--fig-hero) * .38); margin: 0; min-height: 0; z-index: 1; }
  .sp.rs .stage > .ro-set > * { align-self: center; }
  .sp.rs .stage > .live-ctl { grid-area: ctl; }
  .sp.rs .stage > .rs-base { grid-area: base; justify-content: center; }
  .sp.rs .stage .rs-pn { display: block; }
  .sp.rs .stage .rs-n { display: none; }
  .sp.rs .stage .rs-t { font-size: clamp(19px, calc(var(--fig-hero) * .042), 26px); }
  .sp.rs .stage .rs-th { font-size: clamp(16px, calc(var(--fig-hero) * .034), 21px); line-height: 1.28; }
  .sp.rs .stage .rs-x { font-size: 15px; max-width: none; }
  .sp.rs .stage .ls-k, .sp.rs .stage .ro-k { justify-content: center; }
  .sp.rs .rs-list > li.step { padding: 30px 0 22px; min-height: 0; }
  .sp.rs .rs-ab { font-size: 17px; }
  .sp.rs.js .rs-list > li.step:not(.cur) .rs-ab { color: var(--lp-muted); }
  .sp.rs .rs-steps > li.step { min-height: 26vh; padding: 22px 0 0; border-bottom: 0; border-top: 1px solid var(--lp-rule); }
  .sp.rs .rs-steps > li.step:first-child { border-top: 0; }
  .sp.rs .rs-steps > li.step:last-child { min-height: 0; padding-bottom: 8px; }
  .sp.rs.js .rs-steps > li.step:not(.cur) p { color: var(--lp-muted); }
  .sp.rs:not(.js) .run > .ch > .inst .rs-n { display: none; }
}

/* ---- where each label sits on the drawing, in % of the square (the mockup set these per label;
   the page may not carry style attributes, so here a class per position) ---- */
/* the month names, round the outside of the dots */
.sp.rs .bd .p-m0 { left: 50.00%; top: 10.40%; }
.sp.rs .bd .p-m1 { left: 69.80%; top: 15.71%; }
.sp.rs .bd .p-m2 { left: 84.29%; top: 30.20%; }
.sp.rs .bd .p-m3 { left: 89.60%; top: 50.00%; }
.sp.rs .bd .p-m4 { left: 84.29%; top: 69.80%; }
.sp.rs .bd .p-m5 { left: 69.80%; top: 84.29%; }
.sp.rs .bd .p-m6 { left: 50.00%; top: 89.60%; }
.sp.rs .bd .p-m7 { left: 30.20%; top: 84.29%; }
.sp.rs .bd .p-m8 { left: 15.71%; top: 69.80%; }
.sp.rs .bd .p-m9 { left: 10.40%; top: 50.00%; }
.sp.rs .bd .p-m10 { left: 15.71%; top: 30.20%; }
.sp.rs .bd .p-m11 { left: 30.20%; top: 15.71%; }
/* on a dot (a paper's numeral) */
.sp.rs .bd .p-d0 { left: 50.00%; top: 17.80%; }
.sp.rs .bd .p-d1 { left: 66.10%; top: 22.11%; }
.sp.rs .bd .p-d2 { left: 77.89%; top: 33.90%; }
.sp.rs .bd .p-d3 { left: 82.20%; top: 50.00%; }
.sp.rs .bd .p-d4 { left: 77.89%; top: 66.10%; }
.sp.rs .bd .p-d5 { left: 66.10%; top: 77.89%; }
.sp.rs .bd .p-d6 { left: 50.00%; top: 82.20%; }
.sp.rs .bd .p-d7 { left: 33.90%; top: 77.89%; }
.sp.rs .bd .p-d8 { left: 22.11%; top: 66.10%; }
.sp.rs .bd .p-d9 { left: 17.80%; top: 50.00%; }
.sp.rs .bd .p-d10 { left: 22.11%; top: 33.90%; }
.sp.rs .bd .p-d11 { left: 33.90%; top: 22.11%; }
/* the five components, outside their spokes */
.sp.rs .bd .p-u0 { left: 50.00%; top: 8.00%; }
.sp.rs .bd .p-u1 { left: 89.94%; top: 37.02%; }
.sp.rs .bd .p-u2 { left: 74.69%; top: 83.98%; }
.sp.rs .bd .p-u3 { left: 25.31%; top: 83.98%; }
.sp.rs .bd .p-u4 { left: 10.06%; top: 37.02%; }
/* the four stops of the chain (their numbers sit where the months do) */
.sp.rs .bd .p-c0 { left: 50.00%; top: 10.40%; }
.sp.rs .bd .p-c1 { left: 89.60%; top: 50.00%; }
.sp.rs .bd .p-c2 { left: 50.00%; top: 89.60%; }
.sp.rs .bd .p-c3 { left: 10.40%; top: 50.00%; }
/* the centre (the open paper's numeral) */
.sp.rs .bd .p-mid { left: 50%; top: 50%; }
/* a chapter's own small copy: the component numbers start past their spoke and run outward */
.sp.rs .inst .rs-al { line-height: 1; padding: 0 1px; background: var(--lp-paper); }
.sp.rs .inst .p-u0 { left: 50.00%; top: 9.60%; --tx: -50%; --ty: -100%; }
.sp.rs .inst .p-u1 { left: 88.42%; top: 37.52%; --tx: 0%; --ty: -50%; }
.sp.rs .inst .p-u2 { left: 73.75%; top: 82.68%; --tx: 0%; --ty: 0%; }
.sp.rs .inst .p-u3 { left: 26.25%; top: 82.68%; --tx: -100%; --ty: 0%; }
.sp.rs .inst .p-u4 { left: 11.58%; top: 37.52%; --tx: -100%; --ty: -50%; }
/* Arabic month names are longer than three letters: a little further out, on the paper */
html[lang="ar"] .sp.rs .bd .rs-ml { line-height: 1; padding: 0 1px; background: var(--lp-paper); }
html[lang="ar"] .sp.rs .bd .p-m0 { left: 50.00%; top: 9.00%; }
html[lang="ar"] .sp.rs .bd .p-m1 { left: 70.50%; top: 14.49%; }
html[lang="ar"] .sp.rs .bd .p-m2 { left: 85.51%; top: 29.50%; }
html[lang="ar"] .sp.rs .bd .p-m3 { left: 91.00%; top: 50.00%; }
html[lang="ar"] .sp.rs .bd .p-m4 { left: 85.51%; top: 70.50%; }
html[lang="ar"] .sp.rs .bd .p-m5 { left: 70.50%; top: 85.51%; }
html[lang="ar"] .sp.rs .bd .p-m6 { left: 50.00%; top: 91.00%; }
html[lang="ar"] .sp.rs .bd .p-m7 { left: 29.50%; top: 85.51%; }
html[lang="ar"] .sp.rs .bd .p-m8 { left: 14.49%; top: 70.50%; }
html[lang="ar"] .sp.rs .bd .p-m9 { left: 9.00%; top: 50.00%; }
html[lang="ar"] .sp.rs .bd .p-m10 { left: 14.49%; top: 29.50%; }
html[lang="ar"] .sp.rs .bd .p-m11 { left: 29.50%; top: 14.49%; }