/* Results tab: rollout video on the dark stage (left), the experiment tree in the reading column (right). */
.results-stage{position:relative;min-width:0;min-height:0;overflow:hidden;background:#000}
.results-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#000;outline:0}
.stage-empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:32px;background:#2a2928;color:#c9c5bd}
.stage-empty p{margin:0}.stage-empty-title{font:italic 24px/1.25 Georgia,'Times New Roman',serif;color:#efece6;margin-bottom:10px!important}
.stage-empty-note{font:13px/1.5 Arial,sans-serif;color:#a8a49c;max-width:300px}
.clip-card{position:absolute;left:16px;top:14px;max-width:min(72%,440px);display:flex;flex-direction:column;gap:3px;background:#fbfbfaeb;border:1px solid #d8d8d4cc;border-radius:5px;padding:9px 12px;box-shadow:0 6px 18px #1a1a1a14;pointer-events:none}
.clip-label{font:11px/1.35 Arial,sans-serif;color:var(--secondary)}
.clip-title{font:italic 21px/1.2 Georgia,'Times New Roman',serif;color:var(--accent)}
.clip-outcome{font:12px/1.35 Arial,sans-serif;color:var(--ink)}
.outcome-mark{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px;background:#2f7d4f}.outcome-mark.is-miss{background:#b0472c}
.step-counter{color:var(--secondary);font-size:14px}

.results-article .reading-block{padding-top:32px}
.results-lede{font-size:16px!important;line-height:1.6!important;color:var(--secondary)}
.results-note{font-size:14px!important;line-height:1.6!important;color:var(--secondary)}
.tree-block{padding-top:8px!important}

/* legend */
.tree-legend{display:flex;gap:18px;font:12px/1 Arial,sans-serif;color:var(--secondary);margin:0 0 18px}
.lg::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:-1px;box-sizing:border-box}
.lg-main::before{background:var(--accent)}.lg-dead::before{border:1.5px solid #a9a9a2;background:var(--paper)}.lg-running::before{border:1.5px solid var(--accent);background:var(--paper)}

/* the tree: a trunk line on the left, side branches indented with a short connector */
.tree{list-style:none;margin:0;padding:0}
.node{position:relative;padding:0 0 4px 30px}
.node::before{content:'';position:absolute;left:6px;top:0;bottom:0;width:1px;background:var(--rule)}
.node:first-child::before{top:14px}.node:last-child::before{bottom:auto;height:14px}
.node[data-depth="1"]{padding-left:58px}
.node[data-depth="1"]>.node-head::after{content:'';position:absolute;left:-43px;top:15px;width:27px;height:1px;background:var(--rule)}
.node-head{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;align-items:baseline;width:calc(100% + 8px);text-align:left;padding:6px 8px 7px;margin-left:-8px;border-radius:4px}
.node-head:hover{background:#1a1a1a05}
.node-head::before{content:'';position:absolute;left:-21px;top:10px;width:11px;height:11px;border-radius:50%;box-sizing:border-box;background:var(--accent)}
.node[data-depth="1"]>.node-head::before{left:-16px}
.node[data-kind=dead]>.node-head::before{background:var(--paper);border:1.5px solid #a9a9a2}
.node[data-kind=running]>.node-head::before,.node[data-kind=finished]>.node-head::before{background:var(--paper);border:1.5px solid var(--accent)}
.node[data-kind=queued]>.node-head::before{background:var(--paper);border:1.5px dashed #7d8fc0}
.node[aria-current=true]>.node-head::before{box-shadow:0 0 0 4px #1f3a8a1f}
.node-when{grid-column:1/-1;font:11px/1.3 Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#8b8b84}
.node-name{font-size:17px;line-height:1.3}
.node[data-kind=dead] .node-name{color:var(--secondary)}
.node[aria-current=true] .node-name{color:var(--accent)}
.node-score{display:flex;align-items:center;gap:8px;font:12px/1 Arial,sans-serif;color:var(--secondary);white-space:nowrap;font-variant-numeric:tabular-nums}
.node-score b{font-weight:400;color:var(--ink)}.node-num{min-width:54px;text-align:right}
.bar{display:block;width:64px;height:3px;border-radius:2px;background:#e6e5e0;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}
.node[data-kind=dead] .bar i{background:#a9a9a2}.node[data-kind=running] .bar i,.node[data-kind=finished] .bar i{background:#7d8fc0}
.node-clips{display:inline-block;width:24px;font:11px/1 Arial,sans-serif;color:var(--accent);margin-left:2px}

/* per-checkpoint scores of a node's runs */
.run-table-wrap{overflow-x:auto;margin:2px 0 12px;scrollbar-width:thin}
.run-table{border-collapse:collapse;font:12px/1.35 Arial,sans-serif;font-variant-numeric:tabular-nums;color:var(--ink)}
.run-table caption{text-align:left;color:#8b8b84;font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:0 0 5px}
.run-table th,.run-table td{padding:4px 10px 4px 0;text-align:right;white-space:nowrap;border-bottom:1px solid #ecebe6}
.run-table th.step-head{color:#8b8b84;font-weight:400}
.run-table th[scope=row]{text-align:left;font-weight:400;color:var(--secondary);padding-right:16px}
.run-table td{min-width:34px}
.results-updated{font:12px/1.5 Arial,sans-serif!important;color:#8b8b84;margin:14px 0 0!important}

/* detail, opened under the selected node */
.node-detail{padding:4px 0 18px}
.node-detail p{font-size:16px;line-height:1.6;margin:0 0 10px;color:var(--ink)}
.node-detail p span{font:11px/1.4 Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#8b8b84;display:block;margin-bottom:1px}
.node-detail .score-note{font:12px/1.4 Arial,sans-serif;color:var(--secondary);margin:-4px 0 10px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.chip{font:13px/1.25 Arial,sans-serif;padding:6px 10px;border:1px solid var(--rule);border-radius:3px;color:var(--secondary);display:flex;align-items:center;gap:7px}
.chip:hover{border-color:var(--secondary);color:var(--ink)}
.chip[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:#1f3a8a08}
.chip i{width:6px;height:6px;border-radius:50%;background:#2f7d4f}.chip i.is-miss{background:#b0472c}

@media(prefers-reduced-motion:no-preference){.node-detail{animation:detail-in .18s ease-out}@keyframes detail-in{from{opacity:0;transform:translateY(-3px)}}}
@media(max-width:760px){.results-page .workspace{grid-template-columns:minmax(0,1fr)}.clip-goal{display:none}.clip-card{left:10px;top:10px;padding:7px 10px}.clip-title{font-size:17px}.node-name{font-size:16px}.bar{width:44px}.node[data-depth="1"]{padding-left:44px}.node[data-depth="1"]>.node-head::after{left:-29px;width:15px}.node[data-depth="1"]>.node-head::before{left:-14px}.node-detail p{font-size:15px}.tree-legend{gap:12px}}

/* Video | Loss switch (top right of the stage) and the loss chart */
.stage-switch{position:absolute;z-index:3;right:16px;top:14px;display:flex;gap:2px;padding:3px;background:#fbfbfaeb;border:1px solid #d8d8d4cc;border-radius:5px;box-shadow:0 6px 18px #1a1a1a14}
.stage-switch button{padding:4px 10px;border-radius:3px;font:12px/1.2 Arial,sans-serif;color:var(--secondary)}
.stage-switch button:hover{color:var(--ink);background:#1a1a1a08}
.stage-switch button[aria-pressed=true]{background:var(--accent);color:#fff}
.results-stage.show-loss{background:var(--paper)}
.loss-view{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--paper);padding:16px 24px 18px;border-right:1px solid var(--rule)}
.loss-head{display:flex;flex-direction:column;gap:3px;padding-right:120px;margin-bottom:10px}
.loss-label{font:11px/1.35 Arial,sans-serif;color:var(--secondary)}
.loss-title{font:italic 21px/1.2 Georgia,'Times New Roman',serif;color:var(--accent)}
.loss-legend{display:flex;flex-wrap:wrap;gap:4px 16px;font:12px/1.4 Arial,sans-serif;color:var(--ink);margin-top:4px}
.loss-legend span{display:inline-flex;align-items:center;gap:6px}
.loss-legend svg{width:18px;height:6px;overflow:visible}
.loss-metric{display:flex;gap:2px;margin-top:8px;align-self:flex-start;padding:2px;border:1px solid var(--rule);border-radius:4px}
.loss-metric button{padding:3px 9px;border-radius:3px;font:11.5px/1.2 Arial,sans-serif;color:var(--secondary)}
.loss-metric button[aria-pressed=true]{background:#1f3a8a12;color:var(--accent)}
.loss-plot{position:relative;flex:1;min-height:0}
.loss-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;touch-action:none}
.loss-plot text{font:11px Arial,sans-serif;fill:#8b8b84}
.loss-tip{position:absolute;pointer-events:none;background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:6px 9px;font:11.5px/1.45 Arial,sans-serif;color:var(--ink);box-shadow:0 6px 18px #1a1a1a12;white-space:nowrap}
.loss-tip b{font-weight:600}.loss-tip i{display:inline-block;width:10px;height:2px;margin-right:6px;vertical-align:3px}
.loss-foot{font:11px/1.45 Arial,sans-serif;color:#8b8b84;margin-top:8px}
.loss-empty{flex:1;display:grid;place-content:center;text-align:center;font:13px/1.5 Arial,sans-serif;color:var(--secondary);padding:24px}
@media(max-width:760px){.stage-switch{right:10px;top:10px}.stage-switch button{padding:3px 8px;font-size:11.5px}.clip-card{max-width:calc(100% - 130px)}.loss-view{padding:12px 14px 12px}.loss-head{padding-right:104px;margin-bottom:6px}.loss-title{font-size:17px}.loss-foot{display:none}}

/* List | Tree: how the reading column shows the experiments */
.results-page .reading-nav{gap:14px}
.layout-switch{display:flex;gap:2px;padding:3px;border:1px solid var(--rule);border-radius:5px;margin-left:auto}
.layout-switch button{padding:4px 10px;border-radius:3px;font:12px/1.2 Arial,sans-serif;color:var(--secondary)}
.layout-switch button:hover{color:var(--ink);background:#1a1a1a06}
.layout-switch button[aria-pressed=true]{background:var(--accent);color:#fff}

/* Tree view: the lineage of every experiment */
.lineage{position:relative;margin:0 0 8px}
.lineage-tools{display:flex;align-items:center;gap:6px;margin:0 0 6px;font:12px/1.4 Arial,sans-serif;color:var(--secondary)}
.lineage-hint{margin-right:auto}
.lineage-tools button{width:26px;height:24px;border:1px solid var(--rule);border-radius:4px;font:15px/1 Arial,sans-serif;color:var(--secondary)}
.lineage-tools button:hover{color:var(--ink);border-color:var(--secondary)}
.lineage-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding:2px 0 6px;border-bottom:1px solid var(--rule)}
.lineage-svg{display:block}
.lineage-svg .edge{fill:none;stroke-width:1.4}
.lineage-svg .edge-main,.lineage-svg .edge-running,.lineage-svg .edge-finished{stroke:#1f3a8a}
.lineage-svg .edge-dead{stroke:#bdbdb6}
.lineage-svg .edge-queued{stroke:#1f3a8a66;stroke-dasharray:3 3}
.lineage-svg .edge-test{stroke-dasharray:1.5 3}
.lineage-svg .mark{cursor:pointer;outline:none}
.lineage-svg .mark-root{cursor:default}
.lineage-svg .dot{stroke-width:1.6}
.lineage-svg .mark-main .dot{fill:#1f3a8a;stroke:#1f3a8a}
.lineage-svg .mark-dead .dot{fill:var(--paper);stroke:#9a9a93}
.lineage-svg .mark-running .dot,.lineage-svg .mark-finished .dot{fill:var(--paper);stroke:#1f3a8a}
.lineage-svg .mark-queued .dot{fill:var(--paper);stroke:#1f3a8a80;stroke-dasharray:2 2}
.lineage-svg .mark-root .dot{fill:#1a1a1a}
.lineage-svg .ring-base{fill:none;stroke:#1a1a1a10;stroke-width:2}
.lineage-svg .ring{fill:none;stroke:#1f3a8a55;stroke-width:2;stroke-linecap:round}
.lineage-svg .mark-dead .ring{stroke:#9a9a9366}
.lineage-svg .end{stroke:#9a9a93;stroke-width:1.6}
.lineage-svg .label{font:12px/1 Arial,sans-serif;fill:var(--ink)}
.lineage-svg .mark-dead .label{fill:var(--secondary)}
.lineage-svg .mark-queued .label{fill:#8b8b84}
.lineage-svg .mark-root .label{font:italic 13px Georgia,'Times New Roman',serif}
.lineage-svg .mark:hover .label,.lineage-svg .mark:focus-visible .label,.lineage-svg .mark.is-current .label{fill:var(--accent)}
.lineage-svg .mark.is-current .dot{stroke-width:2.4}
.lineage-svg .mark:focus-visible .dot{stroke:var(--accent);stroke-width:2.6}
.lineage-svg .pulse{fill:none;stroke:#1f3a8a;stroke-width:1.2;opacity:0}
@media(prefers-reduced-motion:no-preference){.lineage-svg .pulse{animation:node-pulse 2.4s ease-out infinite;transform-box:fill-box;transform-origin:center}}
@keyframes node-pulse{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
.lineage-card{position:absolute;z-index:6;width:min(300px,calc(100% - 16px));background:var(--paper);border:1px solid var(--rule);border-radius:5px;box-shadow:0 10px 26px #1a1a1a14;padding:10px 12px;pointer-events:none}
.lineage-card .card-when{display:block;font:10.5px/1.4 Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--secondary)}
.lineage-card .card-name{display:block;font:400 16px/1.3 Georgia,'Times New Roman',serif;color:var(--accent);margin:2px 0 4px}
.lineage-card p{margin:0 0 4px;font:13px/1.45 Arial,sans-serif;color:var(--ink)}
.lineage-card .card-score{font-variant-numeric:tabular-nums}
.lineage-card .card-meta{color:var(--secondary);font-size:12px}
.lineage-detail .node-detail{padding-top:12px}
.robust-table td{min-width:64px}
@media(max-width:760px){.layout-switch button{padding:3px 8px;font-size:11.5px}.results-page .step-counter{display:none}.lineage-hint{font-size:11px}}