/* Evaluation page. Mobile first; grids widen at 640 and 1024px. */











.panel-evaluation .small { font-size: 12px; }
.panel-evaluation .muted { color: var(--muted); }
.panel-evaluation .mono { font-variant-numeric: tabular-nums; }
.panel-evaluation .pos { color: var(--pos); font-weight: 600; }
.panel-evaluation .neg { color: var(--neg); font-weight: 600; }
.panel-evaluation h3 { font-size: 14px; margin: 16px 0 6px; }

.panel-evaluation .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.panel-evaluation .pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.panel-evaluation .pill.plain::before { display: none; }
.panel-evaluation .pill-paper { background: var(--warn-bg); color: var(--warn); }
.panel-evaluation .pill-ok { background: var(--ok-bg); color: var(--ok); }
.panel-evaluation .pill-off { background: var(--muted-bg); color: var(--muted); }
.panel-evaluation .pill-warn { background: var(--warn-bg); color: var(--warn); }
.panel-evaluation .pill-bad { background: var(--bad-bg); color: var(--bad); }
.panel-evaluation .pill-accent { background: var(--accent-bg); color: var(--accent); }

.panel-evaluation .grid { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 640px) { .panel-evaluation .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .panel-evaluation .grid { grid-template-columns: 1fr 1fr 1fr; } }
.panel-evaluation .field label { margin-top: 12px; }
.panel-evaluation .field label .hint { color: var(--muted); font-size: 12px; }
.panel-evaluation .picker { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 640px) { .panel-evaluation .picker { grid-template-columns: 1fr 2fr; } }
.panel-evaluation .two { display: grid; grid-template-columns: 1fr; gap: 0 24px; }
@media (min-width: 768px) { .panel-evaluation .two { grid-template-columns: 1fr 1fr; } }
.panel-evaluation dl { grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.panel-evaluation dd { white-space: normal; overflow-wrap: anywhere; }

.panel-evaluation table { font-size: 12px; }
.panel-evaluation th, .panel-evaluation td { white-space: nowrap; }
.panel-evaluation td.r, .panel-evaluation th.r { text-align: right; font-variant-numeric: tabular-nums; }
.panel-evaluation tbody tr.selectable { cursor: pointer; }
.panel-evaluation tbody tr.selected { outline: 2px solid var(--accent); }
.panel-evaluation table button { min-height: 44px; padding: 4px 12px; }
.panel-evaluation #runs-table td:nth-child(4) { white-space: normal; }

.panel-evaluation .status-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.panel-evaluation .progress { height: 8px; border-radius: 999px; background: var(--muted-bg); overflow: hidden; flex: 1 1 160px; max-width: 320px; }
.panel-evaluation .progress .fill { height: 100%; background: var(--accent); }
.panel-evaluation .interpretation { border-left: 4px solid var(--accent); padding: 8px 12px; margin: 8px 0; background: var(--accent-bg); border-radius: 0 6px 6px 0; font-size: 13px; }
.panel-evaluation .interpretation p { margin: 4px 0; }
.panel-evaluation .interpretation .bad-line { color: var(--bad); font-weight: 600; }
.panel-evaluation .charts { display: grid; grid-template-columns: 1fr; gap: 8px 16px; }
@media (min-width: 900px) { .panel-evaluation .charts { grid-template-columns: 1fr 1fr; } }
.panel-evaluation .chart { position: relative; width: 100%; height: 220px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); overflow: hidden; }
.panel-evaluation .chart svg { display: block; width: 100%; height: 100%; }
.panel-evaluation .chart .empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; text-align: center; padding: 8px; }
.panel-evaluation .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.panel-evaluation .chips .chip { border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 12px; }
.panel-evaluation .chips .chip b { font-variant-numeric: tabular-nums; }
.panel-evaluation .sample { margin: 8px 0; padding: 8px 12px; border-radius: 6px; font-weight: 600; font-size: 13px; }
/* Paper-forward metrics: a grid of compact items (two per row from 640px), every metric the same component. */
.panel-evaluation .metric-legend { margin: 6px 0 4px; }
.panel-evaluation .metric-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 10px; margin: 6px 0 10px; }
@media (min-width: 640px) { .panel-evaluation .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.panel-evaluation .metric { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); }
.panel-evaluation .metric-k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-evaluation .metric-v { font-size: 15px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.panel-evaluation .metric-v.pos { color: var(--pos); }
.panel-evaluation .metric-v.neg { color: var(--neg); }
.panel-evaluation .metric-c { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-evaluation .metric-c .pos { color: var(--pos); }
.panel-evaluation .metric-c .neg { color: var(--neg); }
.panel-evaluation .sample.insufficient { background: var(--bad-bg); color: var(--bad); }
.panel-evaluation .sample.early { background: var(--warn-bg); color: var(--warn); }
.panel-evaluation .sample.usable { background: var(--ok-bg); color: var(--ok); }
.panel-evaluation .oos-label { font-size: 11px; color: var(--warn); font-weight: 600; }
.panel-evaluation .message:empty { display: none; }
.panel-evaluation .message.ok { color: var(--ok); font-weight: 600; }
.panel-evaluation .message.bad { color: var(--bad); font-weight: 600; }

/* Wide tables scroll inside their container; the label column stays put so every value keeps its name. */
.panel-evaluation #metrics-table td:first-child, .panel-evaluation #metrics-table th:first-child, .panel-evaluation #fwd-table td:first-child, .panel-evaluation #fwd-table th:first-child, .panel-evaluation #sens-table td:first-child, .panel-evaluation #sens-table th:first-child, .panel-evaluation #wf-table td:first-child, .panel-evaluation #wf-table th:first-child {
  position: sticky; left: 0; background: var(--card); z-index: 1; box-shadow: 1px 0 0 var(--border);
}
@media (max-width: 639px) {
  .panel-evaluation table { font-size: 11px; }
  .panel-evaluation th, .panel-evaluation td { padding: 6px 4px; }
  .panel-evaluation .chart { height: 180px; }
}