.eval-controls{display:flex;flex-wrap:wrap;gap:14px;align-items:end;margin:20px 0}
.menubar{min-height:54px;padding-bottom:6px;padding-top:4px}
.eval-controls label{display:flex;flex-direction:column;gap:5px;font:12px var(--mono);color:var(--muted)}
.eval-controls select,.replay-controls select{font:13px var(--body, sans-serif);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:9px;max-width:100%}
.eval-controls label:first-child{max-width:100%}.eval-controls select{max-width:min(380px,80vw)}
.provider-initial{font:500 12px var(--mono);border:1px solid var(--line);width:26px;height:26px;display:grid;place-items:center;border-radius:50%}
.solve-matrix{overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--paper);max-width:100%}
/* Fixed table layout: the model column has its own width and the ten workflow columns share the rest equally,
 * so header and body use one geometry. Each workflow head is a centred number over a reserved label block. */
.solve-matrix table{border-collapse:separate;border-spacing:0;table-layout:fixed;min-width:1480px;width:100%;font:12px var(--mono)}
.solve-matrix col.model{width:150px}
.solve-matrix th,.solve-matrix td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:9px 6px;text-align:center;vertical-align:middle;white-space:nowrap}
.solve-matrix thead th{position:sticky;top:0;background:var(--warm);z-index:2;vertical-align:top;padding:8px 6px 6px;font:11px/1.2 var(--mono)}
.solve-matrix thead th > span{display:block;font:500 12px/16px var(--mono);color:var(--ink)}
.solve-matrix thead th small{display:block;width:100%;min-height:36px;margin:3px auto 0;white-space:normal;overflow-wrap:normal;word-break:normal;text-align:center;color:var(--muted);font:10px/1.2 var(--mono)}
.solve-matrix thead th[rowspan],.solve-matrix tbody th{position:sticky;left:0;text-align:left;background:var(--paper);z-index:3;color:var(--ink);font:500 13px var(--body);vertical-align:middle}
.solve-matrix thead th[rowspan]{z-index:4;background:var(--warm)}
/* a quiet label row groups the workflows by domain; a darker rule closes each group */
.solve-matrix thead tr.grp th:not([rowspan]){padding:6px;font:500 10.5px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);vertical-align:middle}
.solve-matrix .grp-end{border-right-color:var(--muted)}
.solve-matrix thead th[data-task]{cursor:help}
.solve-matrix thead th[data-task]:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.solve-matrix tr:last-child>*{border-bottom:0}.solve-matrix tr>*:last-child{border-right:0}
.solve-matrix td.solved-one{background:#F3DDCD;color:#7B3511;font-weight:600}.solve-matrix td.solved-both{background:#E2EEDC;color:#1A6E40;font-weight:600}.solve-matrix td.unsolved{color:var(--muted)}.solve-matrix td.unavailable{color:var(--muted);background:var(--soft)}
@media(max-width:600px){.eval-controls{gap:10px}.solve-matrix{margin-left:-2px;margin-right:-2px}.solve-matrix table{min-width:900px}.solve-matrix col.model{width:120px}}
.win[data-app=sample-task] .pane[data-pane=rollouts]{padding:24px 28px 28px;overflow:hidden;height:100%;box-sizing:border-box}
.replay{height:100%;min-height:0;display:flex;flex-direction:column;gap:8px;outline:none}
.replay-heading h2{font-size:24px!important;margin:0 0 2px!important}
.replay-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.replay-controls .btn{padding:7px 12px;min-height:34px;font-size:12px}.replay-controls select{margin-right:auto}
.replay-meta{font:11px var(--mono);margin:0!important;color:var(--muted)}
.replay-stage{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:90px;background:#E9E4DB;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.replay-frame{position:relative;flex-shrink:0}.replay-frame[hidden]{display:none}
.replay-image{width:100%;height:100%;display:block;object-fit:contain}
.click-ring{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid #F26125;border-radius:50%;box-shadow:0 0 0 1px #F8F7F2;pointer-events:none;box-sizing:border-box}
.click-ring::after{content:'';position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:#F26125;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #F8F7F2}
.click-ring[hidden],.agent-bubble[hidden]{display:none}
.agent-bubble{position:absolute;background:#F8F7F2F2;border:1px solid #F26125;border-radius:6px;padding:7px 9px;font:11px/1.4 var(--body,sans-serif);color:#171616;white-space:pre-wrap;box-sizing:border-box;pointer-events:none;box-shadow:0 2px 8px #17161620}
.replay-range{width:100%;height:15px;accent-color:var(--orange);flex-shrink:0}
.replay-note{font-size:11px!important;line-height:1.4!important;margin:0!important;color:var(--muted)}.replay-note[hidden]{display:none}
.replay-details{font-size:12px;flex-shrink:0}.replay-details summary{cursor:pointer}.replay-details pre{white-space:pre-wrap;overflow:auto;max-height:180px;font:11px/1.5 var(--mono);padding:10px;background:var(--paper);border:1px solid var(--line)}
.replay-empty{padding:20px;font-size:13px}.replay-empty[hidden]{display:none}
@media(max-width:600px){.win[data-app=sample-task] .pane[data-pane=rollouts]{padding:10px}.replay-heading{display:none}.replay-controls{gap:5px}.replay-controls select{width:100%}.replay-controls .btn{padding:6px 9px}.agent-bubble{font-size:9px}.replay-meta{font-size:10px}}