/* Figures on The Actuals: the live Love instrument, the determination diagrams and the reading list.
   Page type, paper and ink come from actuals.css. Colour carries one meaning each:
   magenta = strain (cost), cyan = what is conserved, green = proved or determined, red = open. */
.actuals-page{--ac-ink:var(--rpi-ink,#1d1d1b);--ac-soft:var(--rpi-muted,#4e625d);--ac-line:var(--rpi-line,#c4d4cc);
  --ac-paper:var(--rpi-paper,#faf8f3);--ac-m:#e6007e;--ac-c:#009fe3;--ac-ok:#0b7a3e;--ac-open:#c8401f;
  --ac-mono:var(--rpi-mono,"JetBrains Mono",ui-monospace,Menlo,monospace)}
.actuals-page .ac-label{display:block;font:700 .72rem/1.3 var(--ac-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ac-soft);margin:0 0 1rem}

/* The live instrument */
.actuals-page .ac-instrument{border:1px solid var(--ac-ink);padding:2rem 2rem 1.6rem;margin:0 0 3.5rem;scroll-margin-top:1rem}
.ac-instrument-head{max-width:46rem;margin-bottom:1.6rem}
.actuals-body .actuals-page .ac-instrument h2{max-width:20ch}
.actuals-page .ac-instrument-lede{max-width:42rem;font-size:1.08rem;color:var(--ac-ink)}
.ac-live{display:inline-block;color:#fff;background:var(--ac-ok);padding:.15rem .45rem;margin-right:.7rem;letter-spacing:.14em}
.ac-love{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.6rem 2.4rem}
.ac-pane{margin:0;min-width:0}
.ac-pane svg{display:block;width:100%;height:auto;overflow:visible}
.ac-key{margin-left:.8rem;color:var(--ac-m)}
.ac-key::before{content:"";display:inline-block;width:1.3em;height:.32em;background:var(--ac-m);vertical-align:.22em;margin-right:.45em}
.ac-track line{stroke:var(--ac-ink);stroke-width:1}
.ac-track .ac-balance{stroke:var(--ac-ok);stroke-dasharray:3 3}
.ac-ticks line{stroke:var(--ac-ink)}
.ac-tick-text text,.ac-axis-text{font:400 10.5px var(--ac-mono);fill:var(--ac-soft);text-anchor:middle}
.ac-tick-text text:first-child{text-anchor:start}.ac-tick-text text:last-child{text-anchor:end}
.ac-bond-name{font:700 10.5px var(--ac-mono);letter-spacing:.12em;text-transform:uppercase;fill:var(--ac-ink)}
.ac-bond-strain{stroke:var(--ac-m);stroke-width:7;stroke-linecap:butt}
.ac-bond-knob,.ac-curve-dot{fill:var(--ac-ink);stroke:var(--ac-paper);stroke-width:2}
.ac-readout,.ac-numbers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin:1rem 0 0;border-top:1px solid var(--ac-line);padding-top:.9rem}
.ac-readout dt{font:700 .68rem/1.2 var(--ac-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ac-soft);margin-bottom:.3rem}
.ac-readout dd{margin:0;font:860 1.7rem/.95 var(--rpi-sans);letter-spacing:-.04em;color:var(--ac-ink);font-variant-numeric:tabular-nums lining-nums}
.ac-readout small,.ac-numbers small{display:block;font:400 .78rem/1.3 var(--ac-mono);letter-spacing:0;margin-top:.4rem}
.ac-readout small{color:var(--ac-m)}
.ac-readout .ac-conserved :is(dd,small){color:var(--ac-c)}
.ac-axis{stroke:var(--ac-ink);stroke-width:1}
.ac-axis-caption{font-size:10px}
.ac-curve-line{fill:none;stroke:var(--ac-m);stroke-width:2.5}
.ac-curve-min{stroke:var(--ac-ok);stroke-width:1.2;stroke-dasharray:3 3}
.ac-curve-min-label{font:700 10.5px var(--ac-mono);letter-spacing:.1em;text-transform:uppercase;fill:var(--ac-ok)}
.actuals-page .ac-numbers p{margin:0}
.ac-num{display:block;font:860 clamp(1.7rem,3vw,2.5rem)/.86 var(--rpi-sans);letter-spacing:-.05em;color:var(--ac-ink);font-variant-numeric:tabular-nums lining-nums}
.ac-num-now{color:var(--ac-m)}
.ac-num-least{color:var(--ac-ok)}
.ac-numbers small{color:var(--ac-soft)}
.ac-controls{grid-column:1/-1;border-top:1px solid var(--ac-ink);padding-top:1.2rem}
.ac-controls .ac-label{margin-bottom:.5rem}
.ac-controls input[type=range]{width:100%;min-height:44px;accent-color:var(--ac-m);margin:0}
.ac-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;margin-top:.6rem}
.ac-presets{display:inline-flex;flex-wrap:wrap;gap:.5rem}
.actuals-page .ac-controls button{font:700 .74rem/1 var(--ac-mono);letter-spacing:.1em;text-transform:uppercase;min-height:44px;padding:0 1rem;
  border:1px solid var(--ac-ink);background:transparent;color:var(--ac-ink);cursor:pointer;border-radius:0}
.actuals-page .ac-controls button:hover{background:var(--rpi-mint,#e9ffe9)}
.actuals-page .ac-controls button[data-action=love]{background:var(--ac-ink);color:var(--ac-paper)}
.actuals-page .ac-controls button[data-action=love]:hover{background:var(--ac-ok);border-color:var(--ac-ok)}
.actuals-page .ac-controls button[aria-pressed=true]{box-shadow:inset 0 -3px 0 var(--ac-m)}
.actuals-page .ac-controls button:focus-visible,.ac-controls input:focus-visible{outline:3px solid var(--ac-ink);outline-offset:4px}
.actuals-page .ac-verdict{margin:1.2rem 0 0;font-weight:560;color:var(--ac-ink);min-height:1.6em}
.ac-love:not(.is-live) .ac-controls{display:none}
.actuals-page .ac-instrument-note{max-width:50rem;margin:1.6rem 0 0;font-size:.92rem;line-height:1.55;color:var(--ac-soft);border-top:1px solid var(--ac-line);padding-top:1rem}

@media(max-width:860px){.ac-love{grid-template-columns:1fr}}
@media(max-width:560px){
  .actuals-page .ac-instrument{padding:1.3rem 1rem 1.1rem}
  .ac-readout dd{font-size:1.35rem}
  .ac-tick-text text,.ac-axis-text{font-size:16px}
  .ac-bond-name,.ac-curve-min-label,.ac-axis-caption{font-size:14px}
}
@media print{.ac-controls{display:none}.actuals-page .ac-instrument{border-color:#000}}

/* The criterion of unique determination, three cases */
.actuals-page .ac-cases{display:grid;gap:1rem;margin-top:1.8rem}
.actuals-page .ac-cases>.ac-label{margin:0}
.actuals-page .ac-case{margin:0;border:1px solid var(--ac-line);padding:.9rem 1rem}
.ac-case svg{display:block;width:100%;max-width:360px;height:auto}
.actuals-page .ac-case figcaption{font-size:.92rem;line-height:1.45}
.actuals-page .ac-case figcaption .ac-label{margin:.2rem 0 .3rem}
.actuals-page .ac-ok{color:var(--ac-ok)}
.actuals-page .ac-bad{color:var(--ac-open)}
.ac-same{stroke:var(--ac-ink);stroke-width:2;fill:none}
.ac-opposite{stroke:var(--ac-ink);stroke-width:2;stroke-dasharray:6 4;fill:none}
.ac-edge-text{font:400 10px var(--ac-mono);fill:var(--ac-soft);text-anchor:middle}
.ac-probe{fill:var(--ac-ink)}
.ac-probe-text{font:700 9.5px var(--ac-mono);letter-spacing:.1em;text-transform:uppercase;fill:var(--ac-paper);text-anchor:middle}
.ac-node{fill:var(--ac-paper);stroke-width:2}
.ac-node-ok{stroke:var(--ac-ok)}
.ac-node-open{stroke:var(--ac-open);stroke-dasharray:4 3}
.ac-node-text{font:700 11px var(--ac-mono);fill:var(--ac-ink);text-anchor:middle}
.ac-open-text{fill:var(--ac-open);font-size:14px}
@media print{.actuals-page .ac-case{border-color:#000}}

/* The Actuals, one by one: formula, what earns "the", the open step, a comparison table */
.actuals-page .ac-keep{text-transform:none;letter-spacing:0;font-family:var(--rpi-sans);font-size:1.15em}
.actuals-page .ac-formula{font:600 clamp(1.3rem,2.4vw,1.7rem)/1.2 var(--rpi-sans);color:var(--ac-ink);border-top:1px solid var(--ac-ink);border-bottom:1px solid var(--ac-ink);padding:.9rem 0;margin:1.2rem 0}
.actuals-page var{font-style:italic;font-family:inherit}
.actuals-page .ac-earned,.actuals-page .ac-open{border-top:1px solid var(--ac-line);padding-top:.8rem;margin:1.3rem 0 0;font-size:.98rem;line-height:1.5}
.actuals-page .ac-open{margin-top:.9rem}
.actuals-page .ac-earned .ac-label{color:var(--ac-ok);margin-bottom:.35rem}
.actuals-page .ac-open .ac-label{color:var(--ac-open);margin-bottom:.35rem}
.actuals-page .ac-earned+.actuals-links,.actuals-page .ac-open+.actuals-links{margin-top:1rem}
.actuals-page .ac-table{width:100%;border-collapse:collapse;margin:.4rem 0 1.4rem;font-size:.95rem;line-height:1.35}
.actuals-page .ac-table caption{text-align:left;margin-bottom:.6rem}
.actuals-page .ac-table th,.actuals-page .ac-table td{text-align:left;padding:.55rem .6rem .55rem 0;border-bottom:1px solid var(--ac-line);vertical-align:top}
.actuals-page .ac-table thead th{font:700 .68rem/1.25 var(--ac-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ac-soft);border-bottom:1px solid var(--ac-ink)}
.actuals-page .ac-table tbody th{font-weight:560;color:var(--ac-ink)}
.actuals-page .ac-table td{font-variant-numeric:tabular-nums}
.actuals-page .ac-table td.ac-ok,.actuals-page .ac-table td.ac-bad{font-weight:700}

/* Reading list */
.actuals-page .ac-reading{list-style:none;margin:0;padding:0;border-top:1px solid var(--ac-ink);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3rem}
.actuals-page .ac-reading li{border-bottom:1px solid var(--ac-line);padding:1rem 0}
.actuals-page .ac-reading>li>a{font:780 1.12rem/1.25 var(--rpi-sans);letter-spacing:-.015em}
.actuals-page .ac-reading span{display:block;font-size:.92rem;line-height:1.45;color:var(--ac-soft);margin-top:.3rem}
@media(max-width:760px){.actuals-page .ac-reading{grid-template-columns:1fr}}
.actuals-page .ac-table caption.ac-label{display:table-caption;caption-side:top;text-align:left;margin:0 0 .6rem}
.actuals-page .actuals-links a{gap:.35em}
@media(min-width:761px){.actuals-page .actuals-domain>div:first-child,.actuals-page .actuals-explanation>div:first-child,.actuals-page .actuals-paper>div:first-child{position:sticky;top:1.5rem;align-self:start}}

/* The Actuals at a glance: one cell per Actual, each with the glyph of its key fact */
.actuals-page .ac-glance{margin:0 0 1rem;scroll-margin-top:1rem}
.actuals-body .actuals-page .ac-glance h2.ac-label{font:700 .72rem/1.3 var(--ac-mono);letter-spacing:.14em;max-width:none;margin:0 0 1rem}
.actuals-page .ac-glance-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ac-ink);border-left:1px solid var(--ac-line)}
.actuals-page .ac-glance-list li{border-right:1px solid var(--ac-line);border-bottom:1px solid var(--ac-line)}
.actuals-page .ac-glance-list a{display:grid;grid-template-columns:4.6rem minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:1rem;padding:1.1rem 1.1rem 1.2rem;height:100%;color:var(--ac-ink);text-decoration:none}
.actuals-page .ac-glance-list a:hover{background:var(--rpi-mint,#e9ffe9)}
.actuals-page .ac-glance-list a:hover strong{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.ac-glyph{grid-row:1/3;font:860 2.3rem/1 var(--rpi-sans);letter-spacing:-.04em;color:var(--ac-ink);white-space:nowrap;align-self:start}
.ac-over{text-decoration:overline;text-decoration-thickness:2px}
.actuals-page .ac-glance-list .ac-label{margin:.15rem 0 .45rem}
.actuals-page .ac-glance-list strong{font:700 1.02rem/1.3 var(--rpi-sans);letter-spacing:-.01em}
@media(max-width:900px){.actuals-page .ac-glance-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.actuals-page .ac-glance-list{grid-template-columns:1fr}.actuals-page .ac-glance-list a{grid-template-columns:3.6rem minmax(0,1fr)}.ac-glyph{font-size:1.9rem}}
.ac-glyph-sym{font-size:3.1rem;line-height:.78;font-weight:500}
@media(max-width:560px){.ac-glyph-sym{font-size:2.5rem}}
.actuals-page .actuals-criteria dt{font-weight:760;letter-spacing:-.015em;color:var(--ac-ink)}
/* The five Actuals carry the page: their headings match the section headings */
.actuals-body .actuals-page .actuals-domain h3{font-size:clamp(1.6rem,2.7vw,2.25rem);line-height:1.04;letter-spacing:-.028em;max-width:17ch}
.actuals-page .actuals-domain .actuals-eyebrow{color:var(--ac-ink)}
.actuals-page .ac-codes td{font:600 1.25rem/1.2 var(--rpi-sans);text-align:center}
.actuals-page .ac-codes thead th:not(:first-child){text-align:center}
/* Accent text keeps AA contrast on the warm paper: the bright inks stay on strokes and large numbers,
   small text uses deeper cuts of the same hues (magenta 5.6:1, cyan 5.2:1). */
.actuals-page{--ac-m-text:#c4006b;--ac-c-text:#006fa8}
.ac-key,.ac-readout small{color:var(--ac-m-text)}
.ac-key::before{background:var(--ac-m)}
.ac-readout .ac-conserved :is(dd,small){color:var(--ac-c-text)}