:root { color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 13px/1.5 ui-monospace, monospace; background: #111; color: #ccc; height: 100vh; display: flex; flex-direction: column; }
/* Header content lines up with the centered 1200px page column below it. */
header { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 10px max(16px, calc((100% - 1200px) / 2 + 16px)); border-bottom: 1px solid #333; flex: none; }
h1, h2 { font-size: 15px; margin: 0; color: #eee; }
h1 a { color: inherit; text-decoration: none; }
a { color: #aaa; }
nav { margin-left: auto; display: flex; align-items: center; gap: 12px; }
nav a[aria-current="page"] { color: #eee; text-decoration: none; }
select, input, button, .button { background: #1a1a1a; color: #ccc; border: 1px solid #444; padding: 4px 8px; font: inherit; }
button, .button { cursor: pointer; }
button:hover, .button:hover { background: #243224; color: #cfc; }
.button { display: inline-block; text-decoration: none; }
.danger { color: #f88; }
.danger:hover { background: #321d1d; color: #faa; }
button:disabled { opacity: .5; cursor: default; }
main { display: grid; grid-template-columns: 260px 544px 1fr; gap: 16px; padding: 16px; flex: 1; min-height: 0; width: min(1200px, 100%); margin: 0 auto; }
section, aside { overflow-y: auto; overflow-x: hidden; }
video { width: 512px; height: 512px; image-rendering: pixelated; background: #000; display: block; }
#timeline { position: relative; height: 34px; background: #1a1a1a; border: 1px solid #333; margin-top: 6px; cursor: crosshair; overflow: hidden; }
.bar { position: absolute; top: 9px; height: 14px; border-radius: 2px; cursor: pointer; }
.bar:hover { filter: brightness(1.5); }
#playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #f55; pointer-events: none; }
#clock { margin-top: 4px; color: #999; }
#list .row { padding: 6px 8px; border-bottom: 1px solid #222; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#list .row:hover { background: #1d241d; }
#list .row.current { background: #243224; color: #cfc; }
.card { border: 1px solid #333; padding: 10px; margin-bottom: 12px; }
#run { max-width: min(420px, 100%); }
#panel img { width: 128px; height: 128px; image-rendering: pixelated; display: block; }
#panel h3 { margin: 0 0 8px; font-size: 13px; color: #eee; }
#panel p, #panel pre { margin: 0; }
#panel pre { white-space: pre-wrap; word-break: break-word; }
.thinking { white-space: pre-wrap; word-break: break-word; color: #a8c; background: #191420; padding: 8px; border-left: 2px solid #63c; }
.reply { white-space: pre-wrap; word-break: break-word; color: #bbb; background: #181818; padding: 8px; border-left: 2px solid #666; }
.act { color: #7d7; }
.meta { color: #888; }
#pollError, #evalError { color: #f88; white-space: pre-wrap; }

/* Mask the key without password semantics: password managers ignore
   autocomplete="off", but they only target type="password" fields. */
#evalForm input.secret { -webkit-text-security: disc; }

#evalPage { display: block; width: min(720px, 100%); }
#leaderboardPage { display: block; }
#leaderboardPage h2 { margin-bottom: 12px; }
#leaderboardPage label { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 16px; }
.modeswitch { display: inline-flex; border: 1px solid #444; margin: 10px 12px 16px 0; vertical-align: middle; }
.modeswitch button { border: 0; border-right: 1px solid #444; background: #1a1a1a; padding: 5px 16px; color: #aaa; }
.modeswitch button:last-child { border-right: 0; }
.modeswitch button[aria-pressed="true"] { background: #243224; color: #cfc; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid #333; vertical-align: top; }
th { color: #eee; font-weight: normal; }
#evalPage h2 { margin-bottom: 12px; }
#evalJobs .card { overflow-wrap: anywhere; }
.eval-live { width: 256px; height: 256px; margin-top: 8px; display: block; image-rendering: pixelated; background: #000; }
progress { width: 100%; height: 5px; accent-color: #7d7; }
.eval-status { color: #9a9; }
.eval-status.failed { color: #f88; }
.eval-status.running { color: #fd8; }
.eval-status.queued { color: #7ac; }
.eval-error { color: #f88; overflow-wrap: anywhere; }
.eval-error summary { color: #f88; cursor: pointer; overflow-wrap: anywhere; }
.eval-error pre { margin: 4px 0 0; color: #f88; white-space: pre-wrap; word-break: break-word; }
#evalOverlay { position: fixed; inset: 0; z-index: 10; background: rgba(0, 0, 0, .72); display: flex; align-items: center; justify-content: center; padding: 16px; }
/* Size the form (the overlay's flex item) once; the dialog just fills it, so
   hiding or showing harness sections can no longer drag the modal around. */
#evalOverlay form { width: min(880px, 100%); min-width: 0; }
#evalDialog { background: #161616; border: 1px solid #444; width: 100%; max-height: min(660px, 92vh); display: flex; flex-direction: column; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #333; }
.dlg-head h2 { font-size: 14px; font-weight: normal; }
.dlg-body { display: grid; grid-template-columns: minmax(230px, 300px) 1fr; gap: 14px; padding: 14px; overflow: auto; }
.dlg-body .col { display: grid; gap: 8px; align-content: start; min-width: 0; }
#evalForm label { display: grid; gap: 3px; color: #999; }
#evalForm label[hidden] { display: none; }
#evalForm input, #evalForm select { width: 100%; }
#evalForm input[type="checkbox"] { width: auto; justify-self: start; }
#evalForm .formgrid { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 8px; }
#evalForm .formgrid label.wide { grid-column: 1 / -1; }
#evalForm details { color: #999; }
#evalForm summary { cursor: pointer; }
#runRows { display: grid; gap: 6px; align-content: start; min-width: 0; }
.run-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 1fr auto; gap: 6px; align-items: center; }
.run-row input { width: 100%; min-width: 0; }
.run-row .rm { padding: 4px 8px; }
#runHeader span { color: #888; padding: 0 2px; }
#addRun { justify-self: start; }
.dlg-foot { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid #333; }
#evalSubmit { margin-left: auto; padding: 5px 14px; }
#evalSubmit:disabled { opacity: .5; cursor: default; }

@media (max-width: 900px) {
  main { grid-template-columns: minmax(150px, 35%) minmax(0, 1fr); }
  main > section:last-child { grid-column: 1 / -1; }
  video, #liveFrame { max-width: 100%; height: auto !important; }
  #evalDialog .dlg-body { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
  body { height: auto; min-height: 100vh; }
  main { display: flex; flex-direction: column; }
  main aside { max-height: 35vh; }
  main section { width: 100%; }
  #evalForm .formgrid { grid-template-columns: 1fr; }
  header { gap: 8px; }
}

#leaderboardControls { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.selector { position: relative; }
.selector-panel { position: absolute; z-index: 3; top: calc(100% + 6px); left: 0; width: min(360px, 90vw); max-height: 320px; overflow: auto; background: #161616; border: 1px solid #444; padding: 8px; }
.selector-actions { display: flex; gap: 8px; margin-bottom: 6px; }
#leaderboardPage .selector-row { display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 6px; cursor: pointer; }
#leaderboardPage .selector-row:hover { background: #1d241d; }
.selector-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ddd; }
.logo { width: 16px; height: 16px; flex: none; filter: brightness(0) invert(.85); }
.swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--c); flex: none; }
.logo-fallback { width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--c); color: #111; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; }
td .logo, td .logo-fallback { display: inline-block; vertical-align: -3px; margin-right: 6px; }
.chart-wrap { position: relative; width: 100%; height: 360px; background: #161616; border: 1px solid #333; margin-bottom: 16px; }
.chart-wrap svg { width: 100%; height: 100%; display: block; }
.chart-point { cursor: pointer; }
#chart .lbl text { paint-order: stroke fill; stroke: #161616; stroke-width: 3px; stroke-linejoin: round; }
.chart-tooltip { position: absolute; z-index: 2; pointer-events: none; background: #1c1c1c; border: 1px solid #444; padding: 6px 8px; max-width: 280px; font-size: 12px; }
.scale-switch { position: absolute; top: 10px; right: 12px; z-index: 3; margin: 0; background: #1c1c1c; }
.scale-switch button { padding: 3px 12px; font-size: 11px; background: transparent; }
.scale-switch button:hover { background: #243224; color: #cfc; }
#chartEmpty { margin-bottom: 16px; }
@media (max-width: 700px) { .chart-wrap { height: 260px; } }

.row-toggle { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; background: none; color: #ddd; font: inherit; text-align: left; }
.row-toggle:hover { background: none; color: #cfc; }
.row-toggle .logo, .row-toggle .logo-fallback { margin-right: 0; }
.row-toggle .chev { font-size: 10px; line-height: 1; color: #777; transition: transform .15s ease; }
.row-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.run-detail > td { background: #151515; color: #999; }
.run-detail .run-name { padding-left: 26px; }
.run-indent { color: #555; margin-right: 7px; }
.run-detail a { color: #bbb; }
.run-detail a:hover { color: #cfc; }

nav a.gh { display: inline-flex; padding: 5px 2px; }
nav a.gh img { width: 16px; height: 16px; display: block; filter: brightness(0) invert(.85); }
nav a.gh:hover img { filter: brightness(0) invert(1); }

#aboutPage { display: block; width: min(680px, 100%); }
#aboutPage h2 { margin-bottom: 12px; }
#aboutPage h3 { font-size: 13px; margin: 20px 0 6px; color: #eee; }
#aboutPage p { margin: 0 0 10px; }
#aboutPage code { color: #9c9; background: #161616; padding: 1px 4px; }
#aboutDemo { float: right; width: 256px; margin: 2px 0 14px 18px; }
#aboutDemo canvas { width: 256px; height: 256px; image-rendering: pixelated; background: #000; display: block; border: 1px solid #333; }
#aboutDemo figcaption { font-size: 11px; color: #888; margin-top: 4px; }
@media (max-width: 700px) { #aboutDemo { float: none; margin: 0 0 14px; } }