/* Results and Archive (#/results, #/archive, #/archive/:id): screen-only
   styles (D88, spec §4.3 and §4.4). Tokens only (no raw colour values; colours
   come from var(--…) or color-mix of them), and every selector sits under
   .scr-results, the class on both screens' outermost wrapper (the Archive adds
   .scr-archive for its own rules). The shared components in style.css are
   reused wherever they fit. Breakpoint: max-width 640px is the phone. */

/* ------------------------------------------------------------------ head */
.scr-results .page-head { margin-bottom: var(--s7); }
.scr-results .rs-meta { margin: 0 0 var(--s4); }
.scr-results .rs-meta .rs-past { margin-left: 6px; white-space: nowrap; }
.scr-results .rs-meta + .answer { margin-top: 0; }
.scr-results .answer .up, .scr-results .answer .down { font-variant-numeric: lining-nums; }
.scr-results .answer a { color: var(--crowd); }
.scr-results .figure-sub .up, .scr-results .figure-sub .down { font-weight: 500; }
.scr-results .page-head + .notice { margin-bottom: var(--s6); }
@media (max-width: 640px) {
  .scr-results .page-head { margin-bottom: var(--s6); }
  .scr-results .rs-meta .rs-past { margin-left: 0; }
}

/* ------------------------------------------------------------------ lists */
.scr-results .rs-sub { display: flex; align-items: center; gap: 4px; margin-top: 1px; font-size: var(--fs-small);
  color: var(--text-2); font-weight: 400; }
.scr-results .row-cell.num .rs-sub { justify-content: flex-end; }
.scr-results .rs-sub svg { color: var(--text-3); }
.scr-results .rs-key-quiet { color: var(--text-2); font-weight: 500; }
.scr-results .rs-list .row-key { font-variant-numeric: tabular-nums; }
.scr-results .rs-calls .row-lead { font-size: var(--fs-small); }
.scr-results .rs-did, .scr-results .rs-ended { color: var(--text); font-size: var(--fs-small); }
.scr-results .rs-ended .tag { vertical-align: middle; }
.scr-results .rs-gapcell { line-height: 0; }

/* "Showing 30 of 71" + Show more */
.scr-results .rs-more { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  flex-wrap: wrap; margin-top: var(--s3); min-height: 32px; }
.scr-results .rs-more-count { font-size: var(--fs-small); }
.scr-results #rs-calls-help { margin-top: var(--s2); }

/* small lists inside folds: no outer frame, hairline rows */
.scr-results .fold-body .rs-list { background: none; border: 0; border-radius: 0; border-top: 1px solid var(--line);
  margin: 0 calc(-1 * var(--s5)); }
.scr-results .fold-body .rs-list:last-child { margin-bottom: calc(-1 * var(--s5)); }
.scr-results .fold-body .rs-list .row { min-height: 48px; padding-top: 10px; padding-bottom: 10px; }
.scr-results .fold-body .rs-list .row-cell.num { color: var(--text); }
.scr-results .fold-body .rs-list .list-head { min-height: 36px; }
.scr-results .fold-body .rs-list + .rs-note, .scr-results .fold-body .rs-list + details { margin-top: var(--s4); }
.scr-results .rs-flagged { margin: var(--s2) 0 0 !important; border: 1px solid var(--line) !important;
  border-radius: var(--r-nested) !important; }
.scr-results details.fold-inline .fold-body > .rs-flagged:last-child { margin-bottom: 0 !important; }
.scr-results .rs-flag-why { color: var(--text); font-size: var(--fs-small); display: flex; flex-direction: column; gap: 2px; }
.scr-results .rs-flagged .row-cell { font-size: var(--fs-small); }
.scr-results .rs-flagged .row-title { font-weight: 400; font-size: var(--fs-small); }
.scr-results details.fold-inline:has(> .fold-body .rs-flagged) .fold-body { padding-left: 0; }

/* ------------------------------------------------------------------ folds */
.scr-results .rs-folds > details.fold + details.fold { margin-top: var(--s2); }
.scr-results .rs-note { margin: var(--s4) 0 0; color: var(--text-2); font-size: var(--fs-small); max-width: 72ch; }
.scr-results .rs-note-top { margin: 0 0 var(--s4); }
.scr-results .rs-h3 { font-size: var(--fs-body); font-weight: 600; margin: var(--s5) 0 var(--s2); color: var(--text); }
.scr-results .rs-h3:first-child { margin-top: 0; }
.scr-results .fold-body .rs-h3 + .rs-list { border-top: 1px solid var(--line); }
.scr-results .fold-body .rs-list + .rs-h3 { margin-top: var(--s6); }
.scr-results .rs-notes { margin: var(--s4) 0 0; padding-left: 18px; color: var(--text-2); font-size: var(--fs-small); }
.scr-results .rs-notes li + li { margin-top: 2px; }

/* the pipeline table (a table is allowed inside a fold, spec §2.3) */
.scr-results .rs-table-wrap { margin: 0 calc(-1 * var(--s5)); padding: 0 var(--s5); }
.scr-results .rs-table { min-width: 640px; }
.scr-results .rs-table th, .scr-results .rs-table td { padding: 8px 10px; font-size: var(--fs-small); }
.scr-results .rs-table th:first-child, .scr-results .rs-table td:first-child { padding-left: 0; }
.scr-results .rs-table th, .scr-results .rs-table td { white-space: nowrap; }
.scr-results .rs-table th.num, .scr-results .rs-table td.num { text-align: right; }

/* ------------------------------------------------------------------ paired forecast-error bars */
.scr-results .rs-legend { margin: 0 0 var(--s3); }
.scr-results .rs-lg-coin { width: 0 !important; height: 12px !important; border-radius: 0 !important; background: none !important;
  border-left: 1.5px dashed var(--text-2); margin-right: 8px !important; vertical-align: -2px !important; }
.scr-results .rs-bars { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); column-gap: var(--s4); }
.scr-results .rs-bar-row { display: contents; }
.scr-results .rs-bar-lbl, .scr-results .rs-bar-pair { padding: 8px 0; border-top: 1px solid var(--line); }
.scr-results .rs-bar-row:first-child > * { border-top: 0; }
.scr-results .rs-bar-lbl { font-size: var(--fs-small); color: var(--text); overflow-wrap: anywhere; display: flex; flex-direction: column; }
.scr-results .rs-bar-n { color: var(--text-2); font-size: var(--fs-micro); }
.scr-results .rs-bar-pair { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; }
.scr-results .rs-bar { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: var(--s2); }
.scr-results .rs-bar b { font-weight: 500; font-size: var(--fs-small); color: var(--text); text-align: right; }
.scr-results .rs-bar-track { position: relative; height: 8px; border-radius: var(--r-pill); background: var(--surface-2); }
.scr-results .rs-bar-track::after { content: ""; position: absolute; left: var(--coin); top: -3px; bottom: -3px;
  border-left: 1.5px dashed var(--text-2); opacity: .7; }
.scr-results .rs-bar-track i { display: block; height: 100%; border-radius: inherit; }
.scr-results .rs-fill-crowd { background: var(--crowd); }
.scr-results .rs-fill-market { background: var(--market); }

/* ------------------------------------------------------------------ the balance line */
/* the first point is the batch start, not a bet: no dot for it */
.scr-results .rs-has-start circle[data-i="0"] { display: none; }
.scr-results .rs-chart { margin: 0; min-height: 200px; }

/* ------------------------------------------------------------------ "Past batches" */
.scr-results .rs-next { display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  margin-top: var(--s7); padding: var(--s4) var(--s5); border: 1px solid var(--line); border-radius: var(--r-panel);
  background: var(--surface); color: var(--text); }
.scr-results .rs-next:hover { background: var(--surface-2); text-decoration: none; }
.scr-results .rs-next svg { color: var(--text-2); flex: none; }
.scr-results .rs-next-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scr-results .rs-next-title { font-weight: 600; }
.scr-results .rs-next-sub { font-size: var(--fs-small); color: var(--text-2); }

/* ------------------------------------------------------------------ Archive */
.scr-archive .ar-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--s2); }
.scr-archive .ar-name { font-weight: 600; }
.scr-archive .ar-dates { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--text-2); font-weight: 400; }
.scr-archive .ar-batches .row { min-height: 72px; }
.scr-archive .ar-batches .row-cell { font-size: var(--fs-small); color: var(--text); }
.scr-archive .ar-batches .row-cell .rs-sub { margin-top: 1px; }
.scr-archive .ar-batches .row-key-sub { max-width: 240px; white-space: normal; }
.scr-archive .ar-batches .row.is-current { background: color-mix(in srgb, var(--text) 3%, transparent); }
.scr-archive .ar-batches a.row.is-current:hover { background: var(--surface-2); }
.scr-archive .ar-empty-toggle { margin-top: var(--s3); display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.scr-archive .ar-intro { margin: var(--s3) 0 0; color: var(--text-2); font-size: var(--fs-small); max-width: 72ch; }
.scr-archive .page-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.scr-archive .page-title-row .page-title { margin: 0; }
.scr-archive .ar-close .dl-row dd { color: var(--text); }
.scr-archive .ar-close .dl-row dd .t2 { font-size: var(--fs-small); }
.scr-archive .ar-bet-below { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 12px;
  border-radius: var(--r-nested); background: var(--surface-2); font-size: var(--fs-small); color: var(--text-2); }
.scr-archive .ar-bet-below b { color: var(--text); font-weight: 500; }
.scr-archive .ar-bets .row-cell { font-size: var(--fs-small); color: var(--text); }
.scr-archive .ar-bets .row-cell .t2 { color: var(--text-2); }
.scr-archive .ar-filter { margin-bottom: var(--s3); }
.scr-archive .ar-runs .row-lead { font-size: var(--fs-small); }

@media (max-width: 640px) {
  .scr-results .row-cell.num .rs-sub { justify-content: flex-start; }
  .scr-results .rs-sub { display: inline-flex; margin: 0 0 0 4px; }
  .scr-results .row-meta .rs-sub::before { content: ","; margin-right: 2px; margin-left: -6px; color: var(--text-2); }
  .scr-results .rs-flagged .rs-flag-why { flex-basis: 100%; order: 0; }
  .scr-results .rs-flagged .row-meta .rs-flag-why .rs-flag::before { content: none; }
  .scr-results .rs-did, .scr-results .rs-ended { font-size: var(--fs-small); }
  .scr-results .fold-body .rs-list { margin: 0 calc(-1 * var(--s4)); }
  .scr-results .fold-body .rs-list:last-child { margin-bottom: calc(-1 * var(--s4)); }
  .scr-results .rs-flagged { margin: var(--s2) 0 0 !important; }
  .scr-results .rs-table-wrap { margin: 0 calc(-1 * var(--s4)); padding: 0 var(--s4); }
  .scr-results .rs-bars { grid-template-columns: minmax(0, 1fr); }
  .scr-results .rs-bar-row { display: block; border-top: 1px solid var(--line); padding: 8px 0; }
  .scr-results .rs-bar-row:first-child { border-top: 0; }
  .scr-results .rs-bar-lbl, .scr-results .rs-bar-pair { border-top: 0; padding: 0; }
  .scr-results .rs-bar-lbl { flex-direction: row; justify-content: space-between; gap: var(--s2); margin-bottom: 6px; }
  .scr-results .rs-next { margin-top: var(--s6); padding: var(--s4); }
  .scr-archive .ar-batches .row { min-height: 0; }
  .scr-archive .ar-batches .row-key-sub { max-width: 130px; }
  .scr-archive .ar-bet-below { margin-top: var(--s2); }
}