/* Model performance page. Rules: DESIGN.md (no shadow, gradient, pills; orange only for gaps, so nothing here is orange).
   Chart marks are SVG elements styled by these classes; bar widths come from --w set via the CSSOM. No inline style anywhere. */

.rec-sample { margin-top: var(--space-3); font-size: var(--fs-h3); font-weight: 700; font-stretch: var(--stretch-heading); line-height: 1.2; overflow-wrap: anywhere; }
.page-head .meta { margin-top: var(--space-2); max-width: 70ch; }
.rec-jump { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin-top: var(--space-3); }
.rec-jump a { display: inline-flex; align-items: center; min-height: var(--touch); font-weight: 600; }

.rec-section { margin-top: var(--space-5); }
.rec-section .panel-foot { color: var(--ink-3); font-size: var(--fs-meta); }
.rec-section .panel-body > p { max-width: 70ch; }
.rec-intro { max-width: 70ch; }
.rec-skel-line { height: 18px; width: 90%; }
.rec-skel-block { height: 120px; width: 100%; }
.rec-section .panel-body > .state { padding-inline: 0; }

/* scores table */
.rec-section .table-wrap { margin-inline: calc(var(--space-4) * -1); }
.rec-section .table-wrap:focus-visible { outline-offset: -2px; }
.rec-table { min-width: 0; table-layout: auto; }
.rec-caption { padding: 0 var(--space-4) var(--space-2); color: var(--ink-3); font-size: var(--fs-meta); text-align: left; caption-side: top; }
.rec-table th, .rec-table td, .rec-bands th, .rec-bands td { padding-inline: var(--space-3); vertical-align: top; }
.rec-table th:first-child, .rec-table td:first-child, .rec-bands th:first-child, .rec-bands td:first-child { padding-left: var(--space-4); }
.rec-table th:last-child, .rec-table td:last-child, .rec-bands th:last-child, .rec-bands td:last-child { padding-right: var(--space-4); }
.rec-table tbody th[scope="row"], .rec-bands tbody th[scope="row"] { font-size: var(--fs-table); font-weight: 400; color: var(--ink); text-align: left; white-space: normal; border-bottom: 1px solid var(--rule); }
.rec-table tr:last-child th[scope="row"], .rec-bands tr:last-child th[scope="row"] { border-bottom: 0; }
.rec-league { min-width: 150px; overflow-wrap: anywhere; }
.rec-league-name { display: block; font-weight: 700; }
.rec-league-market { display: block; }
.rec-score { min-width: 148px; }
.rec-score.rec-narrow { min-width: 0; }
.rec-score.rec-draws { min-width: 112px; }
.rec-score-value { display: block; font-weight: 700; }
.rec-base { display: block; margin-top: var(--space-1); color: var(--ink-3); font-size: var(--fs-meta-sm); font-weight: 400; }
.rec-base.is-worse, .is-worse { font-weight: 700; color: var(--ink); }
.rec-verdict { min-width: 140px; }
.rec-verdict-text { display: block; }
.rec-verdict-text.is-worse { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rec-experimental { display: inline-block; margin-top: var(--space-1); padding: 2px var(--space-2); border: 1px solid var(--ink-3); border-radius: var(--radius-tag); font-weight: 600; }
.rec-collecting { min-width: 360px; }
.rec-collecting > * + * { margin-top: var(--space-1); }
.rec-collecting-text { display: block; font-weight: 600; }
.rec-collecting .meter { max-width: 360px; }
.rec-collecting-inline { display: none; }
.rec-draws .rec-score-value { font-size: var(--fs-body); }
.rec-unverifiable { font-weight: 700; }
.rec-verdict .rec-unverifiable + .rec-verdict-text { margin-top: var(--space-1); }
/* Monitoring notes: a bordered box (state is weight and border, never colour or a coloured edge, DESIGN.md). */
.rec-alerts { margin-top: var(--space-4); max-width: 70ch; padding: var(--space-3) var(--space-4); border: 2px solid var(--ink-3); border-radius: var(--radius-panel); }
.rec-alerts > * + * { margin-top: var(--space-2); }
.rec-notes { margin-top: var(--space-4); max-width: 70ch; }
.rec-alert-groups > li + li { margin-top: var(--space-3); }
.rec-alert-groups ul { margin-top: var(--space-1); padding-left: var(--space-4); list-style: disc; }
.rec-alert-groups li { overflow-wrap: anywhere; }

/* calibration charts */
.rc-grid-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--space-5); }
.rc-figure { margin: 0; min-width: 0; }
.rc-figure figcaption { display: flex; flex-direction: column; margin-bottom: var(--space-2); }
.rc-name { font-weight: 700; overflow-wrap: anywhere; }
.rc-note { margin-top: var(--space-2); max-width: 44ch; }
.rc-svg { display: block; width: 100%; height: auto; max-width: 420px; }
.rc-grid { stroke: var(--rule); stroke-width: 1; }
.rc-frame { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.rc-diagonal { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 5 4; }
.rc-interval, .rc-cap { stroke: var(--ink); stroke-width: 2; }
.rc-dot { fill: var(--ink); stroke: var(--surface); stroke-width: 1.5; }
.rc-count { fill: var(--bar-mid); }
.rc-tick, .rc-axis { fill: var(--ink-3); font-family: var(--font-ui); font-size: 11px; font-variant-numeric: tabular-nums; }
.rc-axis { fill: var(--ink-2); font-size: 12px; }
.rc-details { margin-top: var(--space-2); }
.rc-details > summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch); cursor: pointer; font-weight: 600; list-style: none; }
.rc-details > summary::-webkit-details-marker { display: none; }
.rc-details > summary::before { content: '+'; width: 1em; text-align: center; font-weight: 700; }
.rc-details[open] > summary::before { content: '\2212'; }
.rc-details .table-wrap { margin-inline: 0; }
.rc-details .rec-bands { min-width: 480px; }
.rec-bands { min-width: 560px; }
.rc-details .rec-bands th:first-child, .rc-details .rec-bands td:first-child { padding-left: 0; }

/* full log */
.rec-hash { overflow-wrap: anywhere; word-break: break-all; }
#log .link-block { font-weight: 600; }
#log .btn { text-decoration: none; }
.rec-columns-title { margin-top: var(--space-5); }
.rec-columns { min-width: 480px; }
.rec-columns td { white-space: normal; }
.rec-columns tbody th[scope="row"] { white-space: nowrap; }

/* method and sources */
.rec-method-layout { margin-top: var(--space-7); }
.rec-prose { max-width: 68ch; }
.rec-prose h2 { margin-bottom: var(--space-4); }
.rec-prose h3 { margin-top: var(--space-5); margin-bottom: var(--space-2); font-size: var(--fs-section); font-stretch: 100%; }
.rec-prose p { max-width: 68ch; }
.rec-prose p + p { margin-top: var(--space-3); }
.rec-cmd { font-family: var(--font-ui); font-weight: 600; padding: 1px var(--space-1); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius-tag); overflow-wrap: anywhere; }
.rec-sources { padding-top: var(--space-1); }
.rec-sources > * + * { margin-top: var(--space-3); }
.rec-source-list > li { display: flex; flex-direction: column; padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); }
.rec-source-list a, .rec-source-name { display: inline-flex; align-items: center; min-height: var(--touch); align-self: flex-start; font-weight: 600; }
.rec-source-list .meta { margin-top: calc(var(--space-1) * -1); padding-bottom: var(--space-1); }
@media (min-width: 900px) {
  .rec-sources { position: sticky; top: var(--space-4); }
}

@media (max-width: 719.98px) {
  .rec-collecting-inline { display: block; margin-top: var(--space-2); font-weight: 600; }
  .rec-collecting-inline .meter { margin-top: var(--space-1); }
  .rec-inline-reason { display: block; font-weight: 400; }
  .rec-collecting { min-width: 0; }
  .rec-collecting > * { display: none; }
  .rec-sample { font-size: var(--fs-section); }
  .rec-section .table-wrap { margin-inline: calc(var(--space-4) * -1); }
  .rec-caption { white-space: normal; }
}

/* High-contrast mode: marks follow the system colours instead of the tokens. */
@media (forced-colors: active) {
  .rc-grid { stroke: GrayText; }
  .rc-frame, .rc-diagonal { stroke: CanvasText; }
  .rc-interval, .rc-cap { stroke: CanvasText; }
  .rc-dot { fill: CanvasText; stroke: Canvas; }
  .rc-count { fill: GrayText; }
  .rc-tick, .rc-axis { fill: CanvasText; }
  .meter, .meter-fill { forced-color-adjust: none; }
  .meter { background: Canvas; border: 1px solid CanvasText; }
  .meter-fill { background: CanvasText; }
}

@media (prefers-contrast: more) {
  .rc-grid { stroke: var(--ink-3); }
  .rc-count { fill: var(--ink-2); }
  .rec-base { color: var(--ink); }
}