/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 * SPDX-License-Identifier: Apache-2.0 */
#scenario-comparison { --sc-good: #5eead4; --sc-warn: #fbbf24; }
[data-theme="light"] #scenario-comparison { --sc-good: #0f766e; --sc-warn: #a16207; }
.sc-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.sc-eyebrow { color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 8px; }
.sc-intro h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); line-height: 1.2; letter-spacing: -.025em; }
.sc-intro > div > p:last-child { max-width: 780px; margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.sc-protocol-link { flex-shrink: 0; color: var(--accent); font-size: 12px; text-decoration: none; }
.sc-controls { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); padding: 20px; }
.sc-scenarios { padding: 0; border: 0; margin: 0; min-width: 0; }
.sc-scenarios legend { padding: 0; margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.sc-scenario-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sc-scenario-options label { position: relative; min-width: 0; cursor: pointer; }
.sc-scenario-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sc-scenario-options span { display: block; height: 100%; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 7px; transition: background 120ms, border-color 120ms; }
.sc-scenario-options strong { display: block; font-size: 14px; font-weight: 600; }
.sc-scenario-options small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.sc-scenario-options input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 2px var(--accent); }
.sc-scenario-options input:checked + span strong { color: var(--accent); }
.sc-scenario-options label:hover span { border-color: var(--accent); }
.sc-scenario-options input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.sc-scenario-explainer { display: flex; gap: 12px; align-items: center; min-height: 60px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.sc-code { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 26px; padding-inline: 6px; flex-shrink: 0; background: var(--accent-soft); border: 1px solid var(--border); border-radius: 4px; color: var(--accent); font-size: 11px; font-weight: 600; white-space: nowrap; }
.sc-scenario-explainer p { margin: 0; color: var(--muted); font-size: 12px; }
.sc-split-control { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.4fr); gap: 28px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); }
.sc-split-slider > div { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.sc-split-slider label { font-size: 12px; color: var(--text); }
.sc-split-slider output { font-size: 17px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.sc-split-slider input { display: block; width: 100%; margin: 12px 0 6px; accent-color: var(--accent); cursor: pointer; }
.sc-split-slider input:disabled { cursor: default; opacity: .5; }
.sc-split-endpoints { color: var(--muted); font-size: 10px; }
.sc-split-explanation p { margin: 0; font-size: 12px; line-height: 1.6; }
#sc-split-note { margin-top: 4px; color: var(--muted); font-size: 11px; }
#sc-split-note[data-state="unavailable"] { color: var(--sc-warn); }
.sc-filters { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)) minmax(180px, 1.15fr) auto; gap: 12px; align-items: end; margin-top: 16px; }
.sc-filters label { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: var(--muted); font-size: 11px; }
.sc-filters select { width: 100%; min-width: 0; min-height: 36px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); padding: 6px 8px; font-size: 12px; }
.sc-availability-toggle { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--muted); font-size: 12px; cursor: pointer; }
.sc-availability-toggle input { accent-color: var(--accent); }
.sc-reset { min-height: 36px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; }
.sc-reset:hover { color: var(--accent); background: var(--accent-soft); }
.sc-status { padding: 16px 0 2px; color: var(--muted); font-size: 12px; }
.sc-status:empty { padding: 0; }
.sc-status[data-state="error"] { color: var(--danger); }
.sc-matrix { margin-top: 16px; }
.sc-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.sc-panel-heading h3 { margin: 0; font-size: 15px; font-weight: 600; }
.sc-panel-heading p:not(.sc-eyebrow) { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.sc-panel-heading > span, #sc-count { white-space: normal; text-align: right; }
.sc-panel-heading > a { color: var(--muted); font-size: 12px; white-space: nowrap; }
#sc-count { white-space: normal; text-align: right; }
.sc-panel-heading > a { color: var(--accent); text-decoration: none; }
#scenario-comparison .table-scroll { position: relative; }
#scenario-comparison table { width: 100%; min-width: 1000px; table-layout: fixed; }
#scenario-comparison th, #scenario-comparison td { padding: 12px 16px; text-align: left; vertical-align: middle; white-space: normal; border-bottom: 1px solid var(--border); }
#scenario-comparison thead th { font-size: 12px; background: var(--bg); font-weight: 500; color: var(--muted); }
#scenario-comparison th small { display: block; margin-top: 2px; font-size: 10px; font-weight: 400; }
#sc-table th:first-child { width: 27%; }
#sc-table th:nth-child(2) { width: 15%; }
#sc-table th[data-method] { width: 11.6%; }
#scenario-comparison th button { text-align: left; padding: 0; color: inherit; background: transparent; border: 0; cursor: pointer; }
#scenario-comparison th[aria-sort="ascending"] button::after { content: " ↑"; color: var(--accent); }
#scenario-comparison th[aria-sort="descending"] button::after { content: " ↓"; color: var(--accent); }
#scenario-comparison td { font-variant-numeric: tabular-nums; font-size: 12px; }
#scenario-comparison tbody th { font-size: 12px; font-weight: 500; background: transparent; }
#scenario-comparison tbody tr:last-child > * { border-bottom: 0; }
#sc-table tbody tr[data-selected="true"] { background: var(--accent-soft); }
#sc-table tbody tr[data-selected="true"] th:first-child { box-shadow: inset 3px 0 var(--accent); }
#scenario-comparison .sc-config { display: block; max-width: 100%; overflow-wrap: anywhere; color: var(--text); }
#scenario-comparison .sc-config:hover, #scenario-comparison .sc-config[aria-pressed="true"] { color: var(--accent); }
.sc-config small, .sc-identity small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; margin-top: 4px; }
#scenario-comparison .sc-score { display: block; width: 100%; padding: 5px 7px; margin: -5px -7px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.sc-score:hover { background: var(--accent-soft); border-color: var(--border) !important; }
.sc-score.sc-empty-score { min-height: 32px; position: relative; }
.sc-score[data-tone="bad"] .sc-unavailable { color: var(--danger); }
.sc-score strong { display: block; font-size: 16px; line-height: 1.4; font-weight: 600; }
.sc-score[data-tone="good"] strong { color: var(--sc-good); }
.sc-score[data-tone="warn"] strong { color: var(--sc-warn); }
.sc-score[data-tone="bad"] strong { color: var(--danger); }
.sc-score small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.sc-score .sc-unavailable { display: inline-block; max-width: 100%; color: var(--muted); font-size: 11px; line-height: 1.5; }
.sc-unsupported { background: repeating-linear-gradient(135deg, transparent, transparent 5px, var(--accent-soft) 5px, var(--accent-soft) 6px); }
.sc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 12px 20px; color: var(--muted); font-size: 10px; border-top: 1px solid var(--border); }
.sc-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.sc-blank-key { display: inline-block; width: 15px; height: 12px; border: 1px solid var(--border); background: repeating-linear-gradient(135deg, transparent, transparent 3px, var(--accent-soft) 3px, var(--accent-soft) 4px); }
.sc-pending-key { width: 5px; height: 5px; background: var(--muted); border-radius: 50%; }
.sc-empty { padding: 40px 20px !important; color: var(--muted); text-align: center !important; white-space: normal; }
.sc-detail { margin-top: 24px; scroll-margin-top: 100px; }
#sc-detail-table th:first-child { width: 25%; }
#sc-detail-table td { width: 15%; }
#sc-detail-table tbody th small { max-width: 220px; line-height: 1.5; white-space: normal; margin-top: 4px; color: var(--muted); }
.sc-evidence { padding: 18px 20px; background: var(--bg); border-top: 1px solid var(--border); scroll-margin-top: 100px; }
.sc-evidence h4 { margin: 0; font-size: 13px; }
.sc-evidence > p { margin: 5px 0 16px; color: var(--muted); font-size: 12px; }
.sc-evidence dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; margin: 0; }
.sc-evidence dl > div { min-width: 0; }
.sc-evidence dt { color: var(--muted); font-size: 10px; }
.sc-evidence dd { margin: 3px 0 0; color: var(--text); font-size: 12px; overflow-wrap: anywhere; }
.sc-evidence a { color: var(--accent); }
.sc-protocols { margin-top: 36px; }
.sc-protocols > h3 { margin: 0; font-size: 17px; }
.sc-protocols > p { color: var(--muted); font-size: 12px; margin-top: 7px; }
.sc-protocol-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.sc-protocol-grid article { border-top: 1px solid var(--border); padding-top: 16px; }
.sc-protocol-grid h4 { margin: 12px 0 6px; font-size: 12px; font-weight: 600; }
.sc-protocol-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.sc-protocol-notes { margin-top: 24px; padding: 16px 20px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; font-size: 12px; color: var(--muted); }
.sc-protocol-notes summary { cursor: pointer; color: var(--text); }
.sc-protocol-notes p { max-width: 1100px; line-height: 1.7; }
.sc-footer { margin-top: 28px; color: var(--muted); font-size: 11px; }
.sc-footer a { text-decoration: none; }
#scenario-comparison button:focus-visible, #scenario-comparison select:focus-visible, #scenario-comparison a:focus-visible, #sc-train-percent:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 1100px) {
  .sc-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sc-protocol-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sc-intro { align-items: flex-start; }
  .sc-scenario-options span { padding: 10px; }
}
@media (max-width: 700px) {
  .sc-intro { flex-direction: column; gap: 12px; }
  .sc-matrix .sc-panel-heading::after, .sc-detail .sc-panel-heading::after { content: "Scroll horizontally to see all methods →"; display: block; width: 100%; font-size: 11px; color: var(--accent); }
  .sc-controls { padding: 14px; }
  .sc-scenario-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sc-scenario-options small { font-size: 10px; }
  .sc-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-split-control { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sc-panel-heading { padding: 14px; flex-wrap: wrap; }
  .sc-panel-heading > span { white-space: normal; }
  .sc-protocol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-evidence dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-legend { padding: 12px 14px; }
}

/* Seven methods share the same layout across all published evaluations. */
#scenario-comparison table { min-width: 1320px; }
#sc-table th:first-child { width: 22%; }
#sc-table th:nth-child(2) { width: 11.5%; }
#sc-table th[data-method] { width: 9.5%; }
#sc-detail-table th:first-child { width: 19.5%; }
#sc-detail-table td { width: 11.5%; }
.sc-source-note { color: var(--muted); font-size: 12px; line-height: 1.7; }
.sc-native-evidence { margin-top: 20px; color: var(--muted); font-size: 12px; }
.sc-native-evidence summary { cursor: pointer; }
.sc-native-evidence pre { max-height: 360px; padding: 16px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; }