/* 530utopian.help · assets/report.css
   ==========================================================================================
   SITE: written for the /report/ page and loaded by it alone (ruling 17, 2026-09-17, reversing the site-wide ruling).
   Proposed back to the Engine; see handback/06 §8. It never uses the 6px heavy rule, which the Engine reserves
   for the deadline component (ruling 13, 2026-09-17): emphasis here is the 2px rule, in mark red where it matters.
   Engine tokens, type roles and rules only: no new colors, no radius, nothing centered, no motion.
   Acid stays with the deadline component; the turn (Reform 1) uses the engine's inversion.
   ========================================================================================== */

/* ---------- opening: the title at its full width, the way to the PDF beside it ---------- */
.rp-open h1{font-size:var(--t-cry); line-height:.86; letter-spacing:-.032em; margin:0 0 var(--s3);
  font-variation-settings:"wdth" 76,"opsz" 96}
.rp-open h1 em{font-variation-settings:"wdth" 100,"opsz" 96}
.rp-open-grid{display:grid; gap:var(--s5)}
@media(min-width:920px){ .rp-open-grid{grid-template-columns:minmax(0,1fr) 21rem; align-items:end} }
.rp-lead{max-width:34em; margin:0}

/* component 08, enlarged: the full report */
.rp-get{display:grid; gap:var(--s2); border-top:var(--mid) solid var(--ink); border-bottom:var(--hair) solid var(--ink);
  padding:var(--s4) 0; color:var(--ink); text-decoration:none}
.rp-get .k{font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--mark)}
.rp-get .t{font-family:var(--voice); font-weight:700; font-size:clamp(1.7rem,3.4vw,2.3rem); line-height:.95; letter-spacing:-.02em;
  font-variation-settings:"wdth" 82,"opsz" 72}
.rp-get .t .f{font-family:var(--mach); font-weight:400; font-size:var(--t-xs); letter-spacing:.12em; color:var(--paper);
  background:var(--mark); padding:3px 7px; vertical-align:.45em; margin-left:.25em}
.rp-get .m{font-family:var(--mach); font-weight:300; font-size:var(--t-xs); line-height:1.8; color:var(--quiet)}
.rp-get:hover .t{color:var(--mark)}
.rp-get:focus-visible{outline:2px solid var(--mark); outline-offset:4px}
.rp-alt{font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.06em; margin:var(--s2) 0 0}
.rp-at{font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.04em}

/* ---------- the problem in one picture: five steps, the threat marked ---------- */
.rp-steps{list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr)}
.rp-steps > li{position:relative; min-width:0; padding:var(--s2) 0 var(--s4) var(--s5); border-left:var(--mid) solid var(--ink)}
.rp-steps > li::before{content:""; position:absolute; left:-7px; top:var(--s2); width:12px; height:12px; background:var(--paper);
  border:var(--mid) solid var(--ink); box-sizing:border-box}
.rp-steps .n{display:block; font-family:var(--mach); font-size:var(--t-xs); color:var(--mark)}
.rp-steps h3{font-size:1.32rem; margin:var(--s1) 0 var(--s2)}
.rp-steps p{margin:0; max-width:30em}
.rp-steps > li.is-threat{border-left-color:var(--mark)}
.rp-steps > li.is-threat::before{background:var(--mark); border-color:var(--mark)}
.rp-steps > li.is-threat h3{color:var(--mark)}
.rp-flag{display:inline-block; font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper); background:var(--mark); padding:3px 8px; margin:0 0 var(--s2)}
@media(min-width:920px){
  .rp-steps{grid-template-columns:repeat(5,minmax(0,1fr)); gap:0 var(--s5); padding-top:var(--s6)}
  .rp-steps > li{border-left:0; border-top:var(--mid) solid var(--ink); padding:var(--s4) 0 0}
  .rp-steps > li::before{left:0; top:-7px}
  .rp-steps > li.is-threat{border-top:var(--mid) solid var(--mark)}
  .rp-flag{position:absolute; left:0; top:calc(-1 * var(--s6) + 6px); margin:0}
  .rp-steps > li:not(:last-child)::after{content:"→"; position:absolute; top:-.78em; right:calc(-1 * var(--s5) + 4px);
    font-family:var(--mach); font-size:1rem; line-height:1.5; color:var(--ink); background:var(--paper); padding:0 3px}
}
.rp-after{margin-top:var(--s5)}
.rp-law{font-family:var(--mach); font-weight:300; font-size:var(--t-xs); line-height:2; color:var(--quiet);
  border-left:var(--mid) solid var(--mark); padding-left:var(--s3); max-width:42em; margin:0}
.rp-verdict{font-family:var(--voice); font-weight:700; font-size:var(--t-h3); line-height:1.05; letter-spacing:-.015em;
  font-variation-settings:"wdth" 84,"opsz" 36; max-width:20em; margin:var(--s4) 0 0}

/* ---------- the program in figures ---------- */
.rp-figs{list-style:none; margin:var(--s5) 0 var(--s6); padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5) var(--s4)}
.rp-figs li{border-top:var(--mid) solid var(--ink); padding-top:var(--s2); display:flex; flex-direction:column; min-width:0}
.rp-figs li.rp-wide{grid-column:span 2}
/* SITE: six figures, two rows of three (2026-09-17: the unread-memo figures came off; positions and officers are two figures) */
.rp-figs .pre{font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--mark); min-height:1.3em}
.rp-figs .num{font-family:var(--voice); font-weight:700; font-size:clamp(2.7rem,6.4vw,4.6rem); line-height:.9; letter-spacing:-.035em;
  font-variation-settings:"wdth" 76,"opsz" 96; font-variant-numeric:lining-nums; margin:var(--s1) 0 var(--s2); white-space:nowrap;
  text-align:left /* the engine's global .num right-aligns table figures; these are not in a table */}
.rp-figs .txt{font-size:.97rem; line-height:1.4; color:var(--ink-soft); max-width:22em}
@media(min-width:720px){
  .rp-figs{grid-template-columns:repeat(12,minmax(0,1fr))}
  .rp-figs li.rp-fig-a{grid-column:span 4}
  .rp-figs li.rp-fig-b{grid-column:span 4}
}

/* Table 1 as bars, drawn to one scale: $0 to $1.8M */
.rp-chart{margin:0}
.rp-legend{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s4); margin:0 0 var(--s3);
  font-family:var(--mach); font-size:var(--t-xs); color:var(--quiet)}
.rp-legend .sw{display:inline-block; width:22px; height:10px; margin-right:6px; vertical-align:-1px}
.rp-legend .sw.exp,.rp-rows .bar.exp{background:var(--ink-soft)}
.rp-legend .sw.fin,.rp-rows .bar.fin{background:var(--mark)}
.rp-rows{list-style:none; margin:0; padding:0; border-top:var(--mid) solid var(--ink)}
.rp-rows li{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"yr val" "bars bars";
  gap:var(--s1) var(--s3); align-items:center; padding:var(--s2) 0; border-bottom:var(--hair) solid var(--paper-3)}
.rp-rows .yr{grid-area:yr; font-family:var(--mach); font-size:var(--t-sm)}
.rp-rows .kind{font-size:var(--t-xs); color:var(--quiet)}
.rp-rows .bars{grid-area:bars; display:grid; gap:3px; padding:2px 0;
  background-image:linear-gradient(to right, var(--paper-3) 1px, transparent 1px); background-size:33.333% 100%}
.rp-rows .bar{display:block; height:12px}
.rp-rows .val{grid-area:val; display:grid; font-family:var(--mach); font-size:var(--t-xs); line-height:1.5; text-align:right; font-variant-numeric:tabular-nums}
.rp-rows .val .fin{color:var(--mark)}
.rp-scale{position:relative; height:1.6em; margin:var(--s1) 0 0; font-family:var(--mach); font-size:var(--t-xs); color:var(--quiet)}
.rp-scale span{position:absolute; top:0; white-space:nowrap}
.rp-scale span:nth-child(1){left:0}
.rp-scale span:nth-child(2){left:33.333%; transform:translateX(-50%)}
.rp-scale span:nth-child(3){left:66.667%; transform:translateX(-50%)}
.rp-scale span:nth-child(4){left:100%; transform:translateX(-100%)}
.rp-chart figcaption{font-family:var(--mach); font-weight:300; font-size:var(--t-xs); line-height:2; color:var(--quiet); margin:var(--s2) 0 0; max-width:48em}
@media(min-width:720px){
  .rp-rows li{grid-template-columns:8.5rem minmax(0,1fr) 7.5rem; grid-template-areas:"yr bars val"}
  .rp-scale{margin-left:calc(8.5rem + var(--s3)); margin-right:calc(7.5rem + var(--s3))}
}
.rp-rows .bar.w0{width:0%}
.rp-rows .bar.w4_5{width:4.5%}
.rp-rows .bar.w5_8{width:5.8%}
.rp-rows .bar.w7_9{width:7.9%}
.rp-rows .bar.w8_1{width:8.1%}
.rp-rows .bar.w65_2{width:65.2%}
.rp-rows .bar.w66_8{width:66.8%}
.rp-rows .bar.w70_0{width:70.0%}
.rp-rows .bar.w88_1{width:88.1%}
.rp-rows .bar.w92_2{width:92.2%}
.rp-rows .bar.w98_1{width:98.1%}

/* ---------- the four findings ---------- */
.rp-panels{display:grid; gap:var(--s6) var(--s6); margin-top:var(--s5)}
@media(min-width:760px){ .rp-panels{grid-template-columns:repeat(2,minmax(0,1fr))} }
.rp-panel{border-top:var(--mid) solid var(--ink); padding-top:var(--s3); min-width:0; display:flex; flex-direction:column}
.rp-panel .k{font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--mark); margin:0 0 var(--s2)}
.rp-panel h3{font-size:var(--t-h3); margin:0 0 var(--s3); max-width:17em}
.rp-panel > p{max-width:34em}
.rp-panel blockquote{margin:var(--s3) 0 var(--s2); padding:0 0 0 var(--s3); border-left:var(--mid) solid var(--mark)}
.rp-panel blockquote p{font-size:1.24rem; line-height:1.34; font-variation-settings:"opsz" 30; margin:0}
.rp-panel .who{font-family:var(--mach); font-weight:300; font-size:var(--t-xs); line-height:1.8; color:var(--quiet); margin:0 0 var(--s3)}
.rp-panel .go{margin:auto 0 0}
.rp-mini{overflow-x:auto; margin:0 0 var(--s2)}
.rp-mini table{border-collapse:collapse; width:100%; min-width:21rem; font-family:var(--mach); font-weight:300; font-size:var(--t-xs); line-height:1.6}
.rp-mini th,.rp-mini td{text-align:left; vertical-align:top; padding:var(--s1) var(--s3) var(--s1) 0; border-bottom:var(--hair) solid var(--paper-3)}
.rp-mini thead th{font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:var(--mark); border-bottom:var(--mid) solid var(--ink)}
.rp-mini tbody th{font-weight:400; color:var(--ink)}
.rp-mini td{font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink)}
.rp-mini:focus-visible,.rp-paths:focus-visible{outline:2px solid var(--mark); outline-offset:3px}

/* ---------- Reform 1, on the inverted ground ---------- */
.invert .rp-at{color:var(--mark-lit)}
.invert .grid + .grid{margin-top:var(--s6)}
.rp-paths{overflow-x:auto; margin:0 0 var(--s4)}
.rp-paths table{border-collapse:collapse; width:100%; min-width:36rem}
.rp-paths th,.rp-paths td{text-align:left; vertical-align:top; padding:var(--s3) var(--s4) var(--s3) 0; border-bottom:var(--hair) solid var(--rule-dk)}
.rp-paths thead th{font-family:var(--voice); font-weight:600; font-size:1.25rem; line-height:1.1; color:var(--paper);
  font-variation-settings:"wdth" 88,"opsz" 36; vertical-align:bottom; border-bottom:var(--mid) solid var(--paper-3)}
.rp-paths tbody th{width:26%; font-family:var(--mach); font-weight:400; font-size:var(--t-xs); line-height:1.7; letter-spacing:.06em;
  text-transform:uppercase; color:var(--quiet-dk)}
.rp-paths td{color:var(--paper-2); line-height:1.42}
.rp-paths tr.hot td{font-family:var(--voice); font-weight:700; font-size:1.45rem; line-height:1.05; color:var(--paper);
  font-variation-settings:"wdth" 84,"opsz" 48}
.rp-paths tr.hot td:last-child{color:var(--mark-lit)}
.invert .rp-paths:focus-visible{outline-color:var(--mark-lit)}
.rp-combine{font-family:var(--voice); font-weight:700; font-size:var(--t-h3); line-height:1.08; letter-spacing:-.012em; color:var(--paper);
  font-variation-settings:"wdth" 84,"opsz" 36; max-width:22em; margin:0}
.rp-flow{list-style:none; margin:var(--s4) 0 0; padding:0; display:grid; gap:var(--s4)}
.rp-flow > li{position:relative; min-width:0; border-top:var(--mid) solid var(--paper-3); padding-top:var(--s3)}
.rp-flow .n{font-family:var(--mach); font-size:var(--t-xs); color:var(--mark-lit)}
.rp-flow h4{font-family:var(--voice); font-weight:600; font-size:1.25rem; line-height:1.1; color:var(--paper);
  font-variation-settings:"wdth" 88,"opsz" 36; margin:var(--s1) 0 var(--s2)}
.rp-flow p{margin:0; font-size:.97rem; line-height:1.45; color:var(--paper-2)}
.rp-flow .chips{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3)}
.rp-flow .chip{font-family:var(--mach); font-weight:300; font-size:var(--t-xs); line-height:1.4; color:var(--paper-2);
  border:var(--hair) solid var(--paper-3); padding:5px 8px}
.rp-flow .chip b{display:block; font-family:var(--voice); font-weight:700; font-size:1.6rem; line-height:1; color:var(--paper);
  font-variation-settings:"wdth" 80,"opsz" 48; margin-bottom:2px}
.rp-flow > li.out{border-top:var(--mid) solid var(--mark-lit)}
.rp-out{list-style:none; margin:0; padding:0}
.rp-out li{border-bottom:var(--hair) solid var(--rule-dk); padding:var(--s1) 0; font-size:.97rem; line-height:1.4; color:var(--paper)}
@media(min-width:920px){
  .rp-flow{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.3fr); gap:0 var(--s5); margin-top:var(--s5)}
  .rp-flow > li:not(:last-child)::after{content:"→"; position:absolute; top:-.8em; right:calc(-1 * var(--s5) + 4px);
    font-family:var(--mach); font-size:1rem; line-height:1.5; color:var(--paper-3); background:var(--ink); padding:0 3px}
}
.rp-exs{display:grid; gap:var(--s4); margin-top:var(--s5)}
@media(min-width:720px){ .rp-exs{grid-template-columns:repeat(2,minmax(0,1fr))} }
.rp-ex{border:var(--hair) solid var(--paper-3); padding:var(--s3) var(--s4) var(--s4)}
.rp-ex .k{font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--mark-lit); margin:0 0 var(--s1)}
.rp-ex h4{font-family:var(--voice); font-weight:600; font-size:1.3rem; color:var(--paper); font-variation-settings:"wdth" 88,"opsz" 36; margin:0 0 var(--s2)}
.rp-ex p{margin:0; color:var(--paper-2)}

/* ---------- eleven reforms ---------- */
.rp-reforms{list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s5) var(--s5)}
@media(min-width:640px){ .rp-reforms{grid-template-columns:repeat(2,minmax(0,1fr))} .rp-reform.lead-card{grid-column:span 2} }
@media(min-width:1000px){ .rp-reforms{grid-template-columns:repeat(3,minmax(0,1fr))} }
.rp-reform{display:flex; flex-direction:column; min-width:0; border-top:var(--mid) solid var(--ink); padding-top:var(--s2)}
.rp-reform .n{font-family:var(--mach); font-size:var(--t-xs); color:var(--mark)}
.rp-reform h3{font-size:1.36rem; margin:var(--s1) 0 var(--s2)}
.rp-reform > p{margin:0 0 var(--s3); font-size:1rem; line-height:1.45; max-width:34em}
.rp-reform.lead-card{border-top:var(--mid) solid var(--mark)}
.rp-reform.lead-card h3{font-size:var(--t-h3); color:var(--mark)}
.rp-reform.lead-card > p{font-size:var(--t-lg)}
.rp-reform dl{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2) var(--s3); margin:auto 0 0;
  padding-top:var(--s2); border-top:var(--hair) solid var(--paper-3)}
.rp-reform dt{font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--mark)}
.rp-reform dd{margin:0; font-family:var(--mach); font-weight:300; font-size:var(--t-xs); line-height:1.7; color:var(--ink)}

/* ---------- other places: went wrong, seems to work ---------- */
.rp-compare{display:grid; gap:var(--s6); margin-top:var(--s5)}
@media(min-width:860px){ .rp-compare{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)} }
.rp-side{min-width:0}
.rp-side h3{font-size:var(--t-h3); margin:0 0 var(--s2); padding-top:var(--s3); border-top:var(--mid) solid var(--ink)}
.rp-side.wrong h3{border-top-color:var(--mark)}
.rp-side ul{list-style:none; margin:0; padding:0}
.rp-side li{padding:var(--s3) 0; border-bottom:var(--hair) solid var(--paper-3); min-width:0}
.rp-side h4{font-family:var(--voice); font-weight:600; font-size:1.18rem; line-height:1.1; margin:0 0 var(--s1); font-variation-settings:"wdth" 90,"opsz" 24}
.rp-side li p{margin:0; font-size:.97rem; line-height:1.45}
.rp-side .st{margin-top:var(--s2); font-family:var(--mach); font-size:var(--t-xs); line-height:1.8}
.rp-side .res{margin-top:var(--s1); font-family:var(--mach); font-weight:300; font-size:var(--t-xs); line-height:1.8; color:var(--quiet)}
.rp-side .tag{display:inline-block; font-family:var(--mach); font-weight:400; font-size:var(--t-xs); line-height:1.5; letter-spacing:.08em;
  text-transform:uppercase; padding:1px 6px; border:var(--hair) solid var(--mark); vertical-align:.3em; font-variation-settings:normal}
.rp-side.wrong .tag{color:var(--paper); background:var(--mark)}
.rp-side.works .tag{color:var(--mark)}
@media(min-width:560px){ .rp-side.works ul{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--s5)} }
.rp-side .note{font-family:var(--mach); font-weight:300; font-size:var(--t-xs); line-height:2; color:var(--quiet);
  border-left:var(--hair) solid var(--paper-3); padding-left:var(--s3); margin:var(--s3) 0 0; max-width:44em}

/* ---------- the schedule ---------- */
.rp-time{list-style:none; margin:var(--s4) 0 0; padding:0; border-left:var(--mid) solid var(--ink)}
.rp-time li{position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s1); padding:0 0 var(--s4) var(--s4)}
.rp-time li:last-child{padding-bottom:0}
.rp-time li::before{content:""; position:absolute; left:-7px; top:.3em; width:12px; height:12px; background:var(--mark)}
.rp-time .when{margin:0; font-family:var(--mach); font-size:var(--t-xs); line-height:1.7; letter-spacing:.1em; text-transform:uppercase; color:var(--mark)}
.rp-time .what{margin:0; line-height:1.45}
.rp-time .who{margin:var(--s1) 0 0; font-family:var(--mach); font-weight:300; font-size:var(--t-xs); line-height:1.8; color:var(--quiet)}
@media(min-width:640px){ .rp-time li{grid-template-columns:9.5rem minmax(0,1fr); gap:var(--s4)} }

/* ---------- objections ---------- */
.rp-faq{display:grid; gap:var(--s5) var(--s6); margin-top:var(--s5)}
@media(min-width:820px){ .rp-faq{grid-template-columns:repeat(2,minmax(0,1fr))} }
.rp-qa{border-top:var(--mid) solid var(--ink); padding-top:var(--s3); min-width:0}
.rp-qa h3{font-size:1.42rem; margin:0 0 var(--s2); max-width:20em}
.rp-qa p{margin:0; max-width:36em}

/* ---------- closing ---------- */
.rp-fine{margin-top:var(--s5)}
.rp-fine p{font-family:var(--mach); font-weight:300; font-size:var(--t-xs); line-height:2; color:var(--quiet); margin:0 0 var(--s1); max-width:52em}

/* SITE fix, 2026-09-17: on short phones the route line (movement II) fell below the first screen.
   The Engine requires it above the fold on every page, so the opening tightens under 600px. */
@media (max-width:600px){
  .rp-open{padding-top:var(--s4); padding-bottom:var(--s3)}
  .rp-open-grid{gap:var(--s3)}
  .rp-open .lbl{margin-bottom:var(--s2)}
  .rp-open .deck{margin-bottom:var(--s2)}
  .rp-get{padding:var(--s3) 0}
}

/* Touch targets: the chapter links sit in running text, but a thumb still has to hit them */
.rp-at{display:inline-block; padding:5px 0}

/* Touch targets: the chapter links sit in running text, but a thumb still has to hit them */
.rp-at{display:inline-block; padding:5px 0}