/* ==========================================================================
   results.css - PM Countdown daily results pages
   Used by tools/results/build_results.py for
   /markets/crypto/<coin>/<coin>-15m/results/<date> and its archive index.

   Load order: site.css, dock.css, results.css, patterns.css.
   Everything here is prefixed .rs- so it cannot collide with the desks
   (.dk-), the boards (.bd-) or the hubs (.hb-). Colour comes from the
   site tokens, so light and dark both work with no extra rules.
   ========================================================================== */

/* ------------------------------------------------------------------ counts */

.rs-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-count {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px 16px;
  min-width: 0;
}

.rs-count dt {
  font: 700 11px/1.3 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.rs-count dd {
  margin: 6px 0 0;
  font: 700 clamp(22px, 2.4vw, 28px)/1.05 var(--cond);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  word-break: break-word;
}

.rs-count dd small {
  display: block;
  margin-top: 5px;
  font: 500 12.5px/1.45 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}

/* -------------------------------------------------------------- comparison */

.rs-cmp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-side {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 18px 20px;
  min-width: 0;
}

.rs-side h3 {
  margin: 0;
  font: 800 24px/1 var(--cond);
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--ink);
}

.rs-side-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  margin-top: 10px;
  border-radius: 999px;
  font: 700 11px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--chip);
  color: var(--ink-2);
}

.rs-side dl {
  margin: 14px 0 0;
  display: grid;
  gap: 0;
}

.rs-side dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.rs-side dl > div:first-child { border-top: 0; }

.rs-side dt {
  font: 500 13.5px/1.35 var(--sans);
  color: var(--ink-2);
}

.rs-side dd {
  margin: 0;
  text-align: right;
  font: 700 15px/1.3 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}

.rs-side dd small {
  display: block;
  font: 500 12px/1.35 var(--sans);
  color: var(--ink-3);
  white-space: normal;
}

.rs-up   { color: #0a7a49; }
.rs-down { color: var(--loss-ink); }
:root[data-theme="dark"] .rs-up { color: var(--up); }

/* ------------------------------------------------------------- milestones */

.rs-miles {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-miles li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}

.rs-miles b {
  font: 700 16px/1.2 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  min-width: 5.5em;
}

.rs-miles span {
  font: 500 14.5px/1.45 var(--sans);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- tables */

.rs-scroll {
  max-height: 640px;
  overflow: auto;
  overscroll-behavior: contain;
}

.rs-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.rs-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  font: 700 11px/1.2 var(--sans);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: 10px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-2);
  /* headers wrap so an 11-column day table still fits a 1200px wrap on desktop
     and only scrolls sideways on a narrow screen */
  white-space: normal;
}

.rs-table td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  white-space: nowrap;
  color: var(--ink-2);
}

.rs-table tbody tr:last-child td { border-bottom: 0; }
.rs-table tbody tr:hover td { background: var(--surface-2); }

.rs-table td.rs-t,
.rs-table td.rs-k { color: var(--ink); font-weight: 600; }

.rs-table td.rs-k {
  font: 500 11px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink-3);
}

.rs-table td.rs-t small {
  display: block;
  font: 600 11px/1.2 var(--sans);
  color: var(--ink-3);
}

/* `.rs-table td` sets a colour and outranks a bare `.rs-res--up`, so these have
   to be written at table-cell specificity or the arrows come out grey. */
.rs-res { font-weight: 700; }
.rs-res--up,   .rs-table td.rs-res--up   { color: #0a7a49; }
.rs-res--down, .rs-table td.rs-res--down { color: var(--loss-ink); }
:root[data-theme="dark"] .rs-res--up,
:root[data-theme="dark"] .rs-table td.rs-res--up { color: var(--up); }

.rs-hint {
  margin: 10px 0 0;
  font: 500 12.5px/1.5 var(--sans);
  color: var(--ink-3);
}

/* ------------------------------------------------------------ paid-link cta */

.rs-go {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
}

.rs-go-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 16px 0 0;
}

.rs-fine {
  margin: 10px 0 0;
  font: 500 12.5px/1.55 var(--sans);
  color: var(--ink-3);
}

/* ------------------------------------------------------------- archive index */

.rs-days {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-day {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  transition: border-color .15s, transform .15s;
}

.rs-day:hover { border-color: var(--line-2); transform: translateY(-1px); }

.rs-day-h {
  font: 800 26px/1 var(--cond);
  text-transform: uppercase;
  color: var(--ink);
}

.rs-day-h span {
  display: block;
  margin-top: 6px;
  font: 600 13px/1.4 var(--sans);
  text-transform: none;
  color: var(--brand-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rs-day-m {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 12px;
  font: 500 13.5px/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.rs-day-m b { color: var(--ink); font-weight: 700; }

/* ---------------------------------------------------------------- narrow */

@media (max-width: 599px) {
  .rs-counts { grid-template-columns: 1fr; gap: 10px; }
  .rs-count { padding: 12px 14px 14px; }
  .rs-cmp { gap: 12px; }
  .rs-side { padding: 15px 15px 17px; }
  .rs-side dd { font-size: 14px; }
  .rs-scroll { max-height: 70vh; }
  .rs-table { font-size: 13px; }
  .rs-table th { padding: 9px 10px; }
  .rs-table td { padding: 9px 10px; }
  .rs-go { padding: 16px; }
  .rs-go .btn { width: 100%; }
  .rs-miles b { min-width: 0; }
}


/* A results page is about a day that already settled, so nothing floats over it:
   the lesson pill and the pop-up are off via the body flags, and the live odds dock
   is hidden here because its numbers belong to the current window, not this one. */
body[data-results-day] #od,
body[data-results-day] [data-floater],
body[data-results-day] [data-pop]{display:none !important}


/* ---------- the extremes: a side priced near zero that still won ---------- */
.rs-exs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rs-ex{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--paper);box-shadow:var(--shadow)}
.rs-ex-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rs-ex-t{font:700 13px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.rs-ex-big{display:flex;flex-direction:column;gap:4px;font:800 40px/1 var(--cond);color:var(--ink)}
.rs-ex-sub{font:600 13.5px/1.35 var(--sans);color:var(--ink-2)}
.rs-ex-m{font-size:13.5px;color:var(--ink-2)}
.rs-ex .rs-k{font-size:11.5px}
.rs-track{display:block;width:100%;height:auto;overflow:visible}
.rs-track-base{stroke:var(--line-2);stroke-width:1}
.rs-track-path{fill:none;stroke:var(--brand);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.rs-track-dot{fill:var(--brand)}
.rs-track-end{fill:var(--up)}
.rs-track-low{fill:var(--loss)}
.rs-track-l{font:600 10.5px/1 var(--sans);fill:var(--ink-3)}
.rs-track-l--low{fill:var(--loss-ink,var(--ink-2));font-weight:800}
/* the same windows, flagged where they appear in the comeback table */
.rs-table tr.is-extreme{background:var(--brand-soft)}
.rs-flag{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:999px;background:var(--ink);color:var(--paper);
  font:800 10px/1.6 var(--sans);letter-spacing:.08em;text-transform:uppercase;vertical-align:middle}
@media (max-width:1023px){ .rs-exs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:639px){ .rs-exs{grid-template-columns:1fr} .rs-ex-big{font-size:34px} }


/* the time cell keeps the clock and the flag in their own columns, so every
   EXTREME chip lines up instead of hanging off a ragged time */
.rs-table td.rs-t{display:flex;align-items:center;gap:10px;white-space:nowrap}
.rs-t-v{min-width:8.5ch;display:inline-block}
.rs-t-flag{min-width:7.5em;display:inline-flex;justify-content:flex-start}
.rs-flag{margin-left:0}
/* every ticker opens that window on Kalshi */
.rs-k-link{color:inherit;text-decoration:none;border-bottom:1px dotted var(--line-2)}
.rs-k-link:hover,.rs-k-link:focus-visible{color:var(--brand-ink);border-bottom-color:currentColor}
.rs-ex .rs-k-link{border-bottom:0}
.rs-ex .rs-k-link:hover,.rs-ex .rs-k-link:focus-visible{text-decoration:underline}
@media (max-width:639px){ .rs-t-flag{min-width:0} }

/* ------------------------------------------------- side-by-side run player */

.rs-sim {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  padding: 18px;
}

.rs-sim-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.rs-sim-mode {
  flex: 1 1 220px;
  display: block;
  text-align: left;
  padding: 10px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink-2);
  font: 700 14px/1.2 var(--sans);
  cursor: pointer;
  min-width: 0;
}

.rs-sim-mode small {
  display: block;
  margin-top: 3px;
  font: 500 12px/1.35 var(--sans);
  color: var(--ink-3);
}

.rs-sim-mode:hover { border-color: var(--brand); }

.rs-sim-mode.is-on {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--brand);
}

.rs-sim-mode.is-on small { color: var(--ink-2); }

.rs-sim-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.rs-sim-step {
  margin: 0;
  font: 700 11px/1.3 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.rs-sim-step b {
  font: 800 16px/1 var(--cond);
  color: var(--ink);
  letter-spacing: 0;
}

.rs-sim-when {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
}

.rs-sim-when b {
  font: 800 18px/1 var(--cond);
  color: var(--ink);
}













/* the direct child only: the played-window count lives inside the <small> */






/* Figures sit in their own right-hand column and each row keeps one height,
   so a row that gains a fee line does not push the rows under it down. */


/* Zero sits in the middle: a run that is down should not draw the same bar as a
   run that is up. Both meters share one scale, so the two panes are comparable. */
.rs-sim-meter {
  position: relative;
  margin-top: 12px;
  height: 9px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

/* the starting bankroll sits in the middle: no bar at all means untouched */
.rs-sim-meter::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  background: var(--ink-3);
  z-index: 2;
  border-radius: 2px;
}

/* the bar is the account balance against the deposit: it fills from the left and
   empties as the run draws the account down.
   One state wins per bar, so each state is written once and the dark overrides
   follow the whole set. A dark rule for the base colour placed after `.is-mid`
   has equal specificity and silently repaints an amber bar green. */
.rs-sim-meter i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: auto;
  border-radius: 0 999px 999px 0;
  transition: width .2s ease;
}

.rs-sim-meter i.is-down {
  left: auto;
  right: 50%;
  border-radius: 999px 0 0 999px;
}
.rs-sim-meter i.is-up   { background: #0a7a49; }
.rs-sim-meter i.is-down { background: var(--loss-ink); }

:root[data-theme="dark"] .rs-sim-meter i.is-up   { background: var(--up); }
:root[data-theme="dark"] .rs-sim-meter i.is-down { background: var(--dn); }

/* chips read as words first, colour second */
.rs-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font: 700 11px/1 var(--sans);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  background: var(--paper);
}

.rs-chip--win { border-color: rgba(10, 122, 73, .5); color: #0a7a49; background: rgba(10, 122, 73, .08); }
.rs-chip--loss { border-color: rgba(176, 42, 55, .5); color: var(--loss-ink); background: rgba(176, 42, 55, .08); }

:root[data-theme="dark"] .rs-chip--win { color: var(--up); border-color: rgba(39, 212, 137, .5); background: rgba(39, 212, 137, .12); }
:root[data-theme="dark"] .rs-chip--loss { color: var(--dn); border-color: rgba(255, 107, 120, .5); background: rgba(255, 107, 120, .12); }

.rs-sim-track {
  margin: 18px 0 0;
}

.rs-sim-track div {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  overflow: hidden;
}

.rs-sim-track svg {
  display: block;
  width: 100%;
  height: 226px;
  cursor: crosshair;
  touch-action: pan-y;
}

/* hour labels sit in HTML under the chart: the svg is stretched with
   preserveAspectRatio="none", which would stretch any text inside it */
.rs-sim-xaxis {
  position: relative;
  height: 18px;
  margin-top: 5px;
}

.rs-sim-xaxis span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font: 600 11px/1 var(--sans);
  color: var(--ink-3);
  white-space: nowrap;
}

.rs-sim-xaxis span:first-child { transform: none; }
.rs-sim-xaxis span:last-child { transform: translateX(-100%); }

.rs-sim-zero { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.rs-sim-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.rs-sim-line--u { stroke: var(--brand); }
.rs-sim-line--d { stroke: var(--amber); }
.rs-sim-line--p { stroke: var(--ink-3); stroke-width: 1.5; }
.rs-sim-bandbg { fill: var(--chip, rgba(0,0,0,.03)); stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rs-sim-dot--p { fill: var(--ink-2); }
.rs-sim-head-line { stroke: var(--ink-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.rs-sim-dot--u { fill: var(--brand); }
.rs-sim-dot--d { fill: var(--amber); }
/* three densities of time grid: half hour, hour, every third hour */
.rs-sim-tick { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rs-sim-tick--0 { opacity: .45; }
.rs-sim-tick--1 { opacity: .8; }
.rs-sim-tick--2 { stroke: var(--line-2); }


.rs-sim-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 10px 0 0;
  font: 600 12px/1.3 var(--sans);
  color: var(--ink-2);
}

.rs-sim-key span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.rs-sim-key i {
  width: 18px;
  height: 3px;
  border-radius: 2px;
  flex: none;
}

.rs-sim-key .k-u { background: var(--brand); }
.rs-sim-key .k-d { background: var(--amber); }
.rs-sim-key .k-z { background: var(--line-2); height: 1px; }

.rs-sim-track figcaption {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-3);
}

.rs-sim-ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.rs-sim-ctl .btn {
  height: 38px;
  padding: 0 14px;
  font-size: 14px;
}

.rs-sim-scrub {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  min-width: 160px;
}

.rs-sim-scrub input {
  width: 100%;
  accent-color: var(--brand);
  cursor: pointer;
}

.rs-sim-ledger {
  max-height: 440px;
  overflow: auto;
}

/* Two header rows, so each one sticks at its own offset. They share one solid
   backdrop: a sticky cell that lets rows show through is unreadable. */
.rs-led thead th {
  position: sticky;
  z-index: 2;
  background: var(--paper);
  height: 34px;
}

.rs-led thead tr:first-child th { top: 0; }
.rs-led thead tr:nth-child(2) th { top: 34px; }

.rs-led tbody .rs-led-u { background: rgba(36, 89, 240, .05); }
.rs-led tbody .rs-led-d { background: rgba(245, 181, 61, .07); }

/* the same tint, painted as an image over the solid paper, so it stays opaque */
.rs-led thead .rs-led-u {
  background-color: var(--paper);
  background-image: linear-gradient(rgba(36, 89, 240, .05), rgba(36, 89, 240, .05));
  box-shadow: inset 0 -2px 0 var(--brand);
}

.rs-led thead .rs-led-d {
  background-color: var(--paper);
  background-image: linear-gradient(rgba(245, 181, 61, .07), rgba(245, 181, 61, .07));
  box-shadow: inset 0 -2px 0 var(--amber);
}

.rs-led td { font-variant-numeric: tabular-nums; }
.rs-led .rs-led-c b { font-weight: 800; }

.rs-led tr[data-i] { cursor: pointer; }
.rs-led tr.is-now > td { background: var(--brand-soft); }
.rs-led tr.is-now > td:first-child { box-shadow: inset 3px 0 0 var(--brand); }

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Side by side is the whole point, so the two panes stay paired on a phone.
   The rows stack their label over the figure instead, which is what actually
   runs out of room at this width. */
@media (max-width: 720px) {
  .rs-sim { padding: 12px; }


  .rs-sim-mode { flex-basis: 100%; padding: 8px 11px; font-size: 13px; }

  .rs-sim-ctl .btn { flex: 0 0 auto; height: 36px; padding: 0 11px; }
  .rs-sim-scrub { flex-basis: 100%; order: 5; margin-top: 4px; }
  .rs-sim-ledger { max-height: 380px; }
  .rs-sim-track svg { height: 150px; }

  .rs-side .rs-side-bank { margin-left: -16px; margin-right: -16px; padding-left: 13px; }
}

/* under about 380px two dense panes stop being readable at all */
@media (max-width: 379px) {
}

@media (prefers-reduced-motion: reduce) {
  .rs-sim-meter i { transition: none; }
}

.rs-nil { color: var(--ink-3); font-weight: 600; }


/* Two runs can finish within a thousand dollars of each other and still have
   demanded wildly different deposits. That row is the comparison, so it is set
   apart rather than left to be found in a list. */
.rs-side .rs-side-bank {
  background: var(--rg-bg);
  border-left: 3px solid var(--amber);
  padding-left: 11px;
  margin-left: -14px;
  padding-right: 14px;
  margin-right: -14px;
}

.rs-side .rs-side-bank dd { font-size: 19px; }

/* The one thing on the panel that needs explaining: why a window was sat out.
   It reserves its space at all times and is only made visible when it applies,
   so sweeping the chart never resizes the card under the reader's pointer. */


/* the assumption is the biggest number on this page, so it is stated inside the
   module rather than left in the prose above it */
.rs-sim-caveat {
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid var(--rg-line);
  border-left: 3px solid var(--amber);
  border-radius: var(--r-sm);
  background: var(--rg-bg);
  color: var(--rg-ink);
  font: 500 13px/1.55 var(--sans);
}

.rs-sim-caveat b { color: var(--ink); }

/* the stake carries its fee in the same row, because a bet is one number */


.rs-sim-key .k-p { background: var(--ink-3); height: 2px; }

/* ------------------------------------------------- the sat-out windows, named */

.rs-so {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.rs-so li {
  display: grid;
  grid-template-columns: 11ch 1fr auto auto;
  gap: 14px;
  align-items: baseline;
  padding: 10px 14px;
  background: var(--paper);
  font-size: 14px;
  color: var(--ink-2);
}

.rs-so li.rs-so-h {
  display: block;
  background: var(--bg);
  font: 700 11px/1.3 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 9px 14px;
}

.rs-so b {
  font: 700 14px/1.3 var(--sans);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rs-so-px {
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  white-space: nowrap;
}

.rs-so-k { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.rs-so-k a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--line-2); }

@media (max-width: 700px) {
  .rs-so li { grid-template-columns: 1fr; gap: 3px; }
  .rs-so-k { overflow: hidden; text-overflow: ellipsis; }
}


/* ------------------------------------------- whole-run stats, and the live bar

   Two kinds of figure, two places. What is true of the whole run sits still on
   the page. What belongs to the window under the pointer follows the reader to
   the foot of the screen, so the chart and the numbers it is describing can be
   read at the same time without scrolling between them.
   ========================================================================== */

.rs-sim-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.rs-stat {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  padding: 12px 14px 13px;
  min-width: 0;
}

.rs-stat h4 {
  margin: 0 0 9px;
  font: 800 16px/1 var(--cond);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.rs-stat dl { margin: 0; display: grid; gap: 7px; }

.rs-stat dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.rs-stat dt { font: 600 12px/1.3 var(--sans); color: var(--ink-3); }

.rs-stat dd {
  margin: 0;
  text-align: right;
  font: 700 15px/1.2 var(--sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rs-stat dd small {
  display: block;
  font: 500 11px/1.3 var(--sans);
  color: var(--ink-3);
}

/* ------------------------------------------------------------- the live bar */

.rs-sim-live {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}

/* pinned only while the module is on screen, and only when JS is there to pin it */
.rs-sim-live.is-float {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  margin: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  box-shadow: 0 -8px 24px -12px rgba(10, 18, 38, .35);
  transform: translateY(101%);
  transition: transform .18s ease;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.rs-sim.is-pinned .rs-sim-live.is-float { transform: none; }

.rs-lv-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 9px 18px 11px;
}

.rs-lv-meta {
  margin: 0 0 8px;
  font: 500 12px/1.3 var(--sans);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rs-lv-meta b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.rs-lv-panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.rs-lv {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  padding: 8px 11px 9px;
  min-width: 0;
}

.rs-lv header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rs-lv h4 {
  margin: 0;
  font: 800 14px/1 var(--cond);
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}

.rs-lv-figs {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 0 0;
}

.rs-lv-tot {
  font: 800 clamp(19px, 2.1vw, 26px)/1 var(--cond);
  font-variant-numeric: tabular-nums;
}

.rs-lv-bal {
  font: 700 14px/1 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}

.rs-lv-sub {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 0 0;
  font: 500 10px/1.3 var(--sans);
  color: var(--ink-3);
  white-space: nowrap;
}

.rs-lv .rs-sim-meter { margin-top: 7px; height: 7px; }

/* one line each, held open, so the bar is the same height on every window */
.rs-lv-line {
  margin: 6px 0 0;
  height: 17px;
  font: 500 11px/17px var(--sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--rg-ink);
}

.rs-lv-bet {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.rs-lv-bet b { margin-left: auto; font-weight: 800; }
.rs-lv-bet small { color: var(--ink-3); font-size: 10px; }

@media (max-width: 720px) {
  .rs-sim-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rs-stat { padding: 10px 11px; }
  .rs-stat h4 { font-size: 14px; }
  .rs-stat dl > div { flex-direction: column; align-items: flex-start; gap: 1px; }
  .rs-stat dt { font-size: 10px; }
  .rs-stat dd { text-align: left; font-size: 14px; }

  .rs-lv-wrap { padding: 7px 12px 9px; }
  .rs-lv-meta { margin-bottom: 6px; font-size: 11px; }
  .rs-lv-panes { gap: 7px; }
  .rs-lv { padding: 7px 8px 8px; }
  .rs-lv h4 { font-size: 12px; }
  .rs-lv header .rs-chip { height: 18px; padding: 0 6px; font-size: 9px; }
  .rs-lv-figs { flex-direction: column; align-items: flex-start; gap: 0; }
  .rs-lv-tot { font-size: 18px; }
  .rs-lv-bal { font-size: 12px; }
  .rs-lv-sub { flex-direction: column; gap: 0; font-size: 9px; }
  .rs-lv-line { font-size: 10px; height: 15px; line-height: 15px; }
  .rs-lv-bet { gap: 5px; font-size: 11px; }
  .rs-lv-bet small { display: none; }   /* the fee is named in the ledger */
}

@media (prefers-reduced-motion: reduce) {
  .rs-sim-live.is-float { transition: none; }
}

/* The bar is fixed, so it no longer occupies the space it was laid out in.
   Give that space back, once and always, rather than on pin: adding it when the
   bar pins would move the page at the moment the reader starts using it. */
.rs-sim.has-bar { padding-bottom: 206px; }

@media (max-width: 720px) {
  .rs-sim.has-bar { padding-bottom: 198px; }
}