/* Figure 4. The owed statement, drawn: an exchange beside one full turn of one record about the other.
   Every class is prefixed ss4- and every token is scoped to the figure. */
.ss4 {
  --ss-paper: #faf8f3; --ss-ink: #1d1d1b; --ss-body: #2a2926; --ss-soft: #3c3a36; --ss-hair: #8a8a8a;
  --ss-rule: color-mix(in srgb, var(--ss-ink) 16%, var(--ss-paper));
  --ss-m: #e6007e; --ss-c: #009fe3; --ss-c-text: #0072b5; --ss-open: #c8401f;
  --ss-text: "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ss-display: "Inter Display", "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ss-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  margin: 0; padding: clamp(1rem, 2.4vw, 1.75rem); background: var(--ss-paper); color: var(--ss-body);
  border: 1px solid var(--ss-ink); font-family: var(--ss-text); font-weight: 420; line-height: 1.42;
  font-optical-sizing: auto; box-sizing: border-box; position: relative;
}
@media (prefers-color-scheme: dark) {
  .ss4 { --ss-paper: #141413; --ss-ink: #faf8f3; --ss-body: #e9e6df; --ss-soft: #c9c5bc; --ss-m: #ff3d9e; --ss-c: #2bb3f0; --ss-c-text: #2bb3f0; --ss-open: #ff6a3d; }
}
.ss4[data-frame="none"] { border: 0; padding: 0; background: transparent; }
.ss4 *, .ss4 *::before, .ss4 *::after { box-sizing: border-box; }
.ss4-label { margin: 0 0 .45rem; font: 700 .7rem/1.3 var(--ss-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ss-soft); }
.ss4-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; align-items: baseline;
  padding-bottom: .7rem; margin-bottom: 1rem; border-bottom: 1px solid var(--ss-rule); }
.ss4-head .ss4-label { margin: 0; color: var(--ss-open); }
.ss4-title { margin: 0; font: 780 1.15rem/1.15 var(--ss-display); letter-spacing: -.02em; color: var(--ss-ink); }
.ss4[data-header="none"] .ss4-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; padding: 0; border: 0; }
.ss4-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(.6rem, 2vw, 1.6rem); align-items: center; }
.ss4-panel { min-width: 0; }
.ss4-panel .ss4-label { text-align: center; }
.ss4-svg { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; overflow: visible; }
.ss4-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ss4-trace { fill: none; stroke: var(--ss-ink); stroke-width: 1.6; }
.ss4-path { fill: none; stroke: var(--ss-hair); stroke-width: 1; stroke-dasharray: 4 3; }
.ss4-pivot { fill: var(--ss-hair); }
.ss4-rec { fill: var(--ss-paper); stroke: var(--ss-ink); stroke-width: 1.6; }
.ss4-pos { fill: var(--ss-paper); stroke: var(--ss-ink); stroke-width: 1.2; }
.ss4-core { fill: var(--ss-ink); }
.ss4-eq { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.ss4-eqsign { font: 860 3rem/1 var(--ss-display); color: var(--ss-ink); }
.ss4-q { font: 860 2.4rem/1 var(--ss-display); color: var(--ss-open); }
.ss4-eqtag { font: 700 .66rem/1 var(--ss-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ss-open); margin-top: .3rem; }
.ss4-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-top: 1rem; }
.ss4-ctl button { appearance: none; border: 1px solid var(--ss-ink); border-radius: 0; background: var(--ss-ink); color: var(--ss-paper);
  font: 700 .7rem/1 var(--ss-mono); letter-spacing: .14em; text-transform: uppercase; padding: .78rem .95rem; min-height: 44px; cursor: pointer; }
.ss4-ctl button:focus-visible, .ss4-sl input:focus-visible { outline: 2px solid var(--ss-c-text); outline-offset: 2px; }
.ss4-sl { display: inline-flex; align-items: center; gap: .6rem; }
.ss4-sl .ss4-label { margin: 0; }
.ss4-sl input { width: min(16rem, 50vw); accent-color: var(--ss-ink); min-height: 44px; }
.ss4-read { margin: .7rem 0 0; font: 400 .8rem/1.45 var(--ss-mono); color: var(--ss-body); min-height: 4.4em; white-space: pre-line; max-width: 46rem; }
.ss4-status[hidden] { display: none; }
.ss4-status { display: flex; align-items: baseline; gap: .45rem; margin: .6rem 0 0; font-size: .9rem; line-height: 1.4; color: var(--ss-body); max-width: 60rem; }
.ss4-dot { flex: none; display: inline-block; width: .6rem; height: .6rem; border: 2px solid var(--ss-open); transform: translateY(.05rem); }
.ss4-tag { font: 700 .66rem/1 var(--ss-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ss-open); margin-right: .3rem; }
.ss4-cap { margin: 1rem 0 0; padding-top: .7rem; border-top: 1px solid var(--ss-rule); font-size: .9rem; line-height: 1.42; color: var(--ss-body); max-width: 62rem; }
.ss4[data-caption="none"] .ss4-cap { display: none; }
@media (max-width: 640px) {
  .ss4-grid { grid-template-columns: minmax(0, 1fr); }
  .ss4-eq { flex-direction: row; gap: .6rem; justify-content: center; }
}
@media (forced-colors: active) {
  .ss4 { border-color: CanvasText; }
  .ss4-pos, .ss4-path { stroke: CanvasText; }
  .ss4-pos { fill: Canvas; }
  .ss4-core { fill: CanvasText; }
  .ss4-rec { fill: Canvas; stroke: CanvasText; }
  .ss4-ctl button { background: ButtonText; color: ButtonFace; forced-color-adjust: none; }
}
@media print {
  .ss4 { border-color: #000; background: #fff; color: #000; --ss-paper: #fff; --ss-ink: #000; --ss-body: #000; --ss-soft: #333; }
  .ss4-ctl { display: none; }
  .ss4-panel { break-inside: avoid; }   /* a panel's label row stays with its drawing */
}