/* The operator-learning article (operator-learning.html): the interactive charts of operators.js and a few article
   blocks. The design tokens come from main.css; the series colours are set here once and read by the charts. */

:root {
  --ops-daedalus: #34d399;
  --ops-gaot: #ff922b;
  --ops-rigno: #4dabf7;
  --ops-latent: #845ef7;
  --ops-physical: #fcc419;
  --ops-cooldown: #34d399;
  --ops-unfrozen: #e64980;
  --ops-surface: #0f1220;
  --ops-grid: rgba(255, 255, 255, 0.08);
  --ops-axis: rgba(255, 255, 255, 0.22);
  --ops-up: #ff8787;
  --ops-down: #69db7c;
  --ops-train: #34d399;
  --ops-frozen: #74c0fc;
  --ops-grad: #ff6b6b;
  --ops-cache: #fcc419;
  --ops-chunk1: #1c5cab;
  --ops-chunk4: #3987e5;
  --ops-chunk16: #6da7ec;
  --ops-chunk64: #9ec5f4;
  --ops-chunk256: #cde2fb;
}

:root[data-theme="light"] {
  --ops-daedalus: #0ca678;
  --ops-gaot: #e8590c;
  --ops-rigno: #1c7ed6;
  --ops-latent: #7048e8;
  --ops-physical: #e0a800;
  --ops-cooldown: #0ca678;
  --ops-unfrozen: #d6336c;
  --ops-surface: #ffffff;
  --ops-grid: rgba(15, 23, 42, 0.08);
  --ops-axis: rgba(15, 23, 42, 0.25);
  --ops-up: #e03131;
  --ops-down: #2b8a3e;
  --ops-train: #0ca678;
  --ops-frozen: #1c7ed6;
  --ops-grad: #e03131;
  --ops-cache: #e0a800;
  --ops-chunk1: #0b3d7a;
  --ops-chunk4: #1c5cab;
  --ops-chunk16: #2f74c8;
  --ops-chunk64: #4f8fdc;
  --ops-chunk256: #7aaee8;
}

/* terms of the setting */
.ops-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0 26px; }
.ops-terms > div { padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.ops-terms dt { font-weight: 700; color: var(--text); font-size: 0.95rem; margin-bottom: 4px; }
.ops-terms dd { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
@media (max-width: 680px) { .ops-terms { grid-template-columns: 1fr; } }

.ops-formula { font-size: 0.98rem; line-height: 2; overflow-wrap: anywhere; }

/* the benchmark in numbers, and the three models */
.ops-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 26px; }
.ops-facts > div { padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.ops-facts b { display: block; font-size: 1.9rem; line-height: 1.1; letter-spacing: -0.02em; color: var(--strong); }
.ops-facts span { color: var(--muted); font-size: 0.86rem; }
@media (max-width: 680px) { .ops-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ops-models { margin: 26px 0 10px; gap: 14px; }
.ops-models .card { padding: 18px; }
.ops-models h3 { font-size: 1.05rem; margin: 0 0 8px; display: flex; align-items: center; gap: 9px; }
.ops-models p { font-size: 0.88rem; color: var(--muted); margin: 0; line-height: 1.55; }
@media (max-width: 980px) { .ops-models.grid.three { grid-template-columns: 1fr; } }
i.key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }
i.key.daedalus { background: var(--ops-daedalus); }
i.key.gaot { background: var(--ops-gaot); }
i.key.rigno { background: var(--ops-rigno); }

.ops-stats { margin: 26px 0; gap: 14px; }
.ops-stats .stat { padding: 18px; display: flex; flex-direction: column; }
.ops-stats .stat .value { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.ops-stats .stat .label { font-size: 0.84rem; flex: 1; }
/* the seven performance cards two per row, so that each keeps room for its visual badge */
.ops-stats.seven { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ops-stats.seven > .stat:last-child { grid-column: span 2; }
@media (max-width: 520px) { .ops-stats, .ops-stats.seven { grid-template-columns: 1fr; } .ops-stats.seven > .stat:last-child { grid-column: auto; } }

/* the chart cards */
.ops-figure { margin: 30px 0; }
.ops-card {
  background: var(--ops-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 20px 16px;
  box-shadow: 0 20px 50px -30px var(--shadow); position: relative;
}
@media (max-width: 600px) { .ops-card { padding: 14px 12px 12px; } }
.ops-controls { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end; margin-bottom: 14px; }
.ops-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ops-group > span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.ops-group .chips { gap: 6px; }
.ops-group .chip { padding: 5px 12px; font-size: 0.82rem; }
.ops-sub { font-size: 0.82rem; color: var(--faint); margin: 0 0 8px; }

/* summary tiles of the accuracy explorer */
.ops-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 16px; }
.ops-tile { padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.ops-tile .v { font-size: 1.35rem; font-weight: 750; color: var(--strong); line-height: 1.2; letter-spacing: -0.01em; }
.ops-tile .v small { font-size: 0.8rem; font-weight: 600; color: var(--muted); margin-left: 4px; }
.ops-tile .l { font-size: 0.78rem; color: var(--muted); line-height: 1.4; margin-top: 4px; }
.ops-tile .l2 { font-size: 0.74rem; color: var(--faint); line-height: 1.4; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ops-tile .pair { display: flex; gap: 12px; flex-wrap: wrap; }
.ops-tile .pair > span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 760px) { .ops-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ops-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.82rem; color: var(--muted); margin: 0 0 10px; }
.ops-legend .item { display: inline-flex; align-items: center; gap: 7px; }
.ops-legend button.item {
  background: none; border: 1px solid transparent; border-radius: 8px; padding: 3px 7px; margin: -3px -7px; cursor: pointer;
  color: var(--muted); font-family: inherit; font-size: inherit;
}
.ops-legend button.item:hover { color: var(--text); border-color: var(--border); }
.ops-legend button.item.off { opacity: 0.38; }
.ops-legend svg { flex: none; overflow: visible; }

/* the accuracy table: problem, three values, the bars */
.acc-table { width: 100%; font-size: 0.86rem; }
.acc-row {
  display: grid; grid-template-columns: minmax(150px, 1.25fr) 62px 112px 112px minmax(150px, 2fr); gap: 0 12px;
  align-items: center; padding: 5px 6px; border-radius: 8px;
}
.acc-row.head { color: var(--faint); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding-bottom: 2px; }
.acc-row.body:hover, .acc-row.body.hot { background: var(--surface); }
.acc-row.group { display: block; padding: 12px 6px 4px; color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.acc-row .name { color: var(--text); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.acc-row .name small { display: block; color: var(--faint); font-weight: 500; font-size: 0.74rem; }
.acc-row .num { font-variant-numeric: tabular-nums; color: var(--text-soft); white-space: nowrap; }
.acc-row .num .d { font-size: 0.76rem; color: var(--muted); margin-left: 5px; }
.acc-row .num .d.up::before { content: "\25B2"; color: var(--ops-up); margin-right: 3px; font-size: 0.68rem; }
.acc-row .num .d.down::before { content: "\25BC"; color: var(--ops-down); margin-right: 3px; font-size: 0.68rem; }
.acc-row .bars { min-width: 0; }
.acc-row .bars svg, .acc-axis svg { display: block; width: 100%; overflow: visible; }
.acc-sort {
  background: none; border: none; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px; text-align: left;
}
.acc-sort:hover, .acc-sort.active { color: var(--text); }
.acc-sort .arrow { font-size: 0.7rem; opacity: 0.8; }
.acc-empty { color: var(--muted); padding: 14px 6px; }
@media (max-width: 720px) {
  .acc-row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "name name name" "f g r" "bars bars bars"; gap: 3px 10px; padding: 8px 4px; }
  .acc-row .name { grid-area: name; }
  .acc-row .c-f { grid-area: f; } .acc-row .c-g { grid-area: g; } .acc-row .c-r { grid-area: r; }
  .acc-row .bars { grid-area: bars; }
  .acc-row.head { grid-template-areas: "name name name" "f g r" "bars bars bars"; }
  .acc-row .num { white-space: normal; }
}

/* the line charts */
.ops-plot { position: relative; }
.ops-plot svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.ops-plot text, .acc-axis text { fill: var(--muted); font-family: var(--font); font-size: 11px; }
.ops-plot .axis-label { fill: var(--faint); font-size: 11.5px; }
.ops-plot .row-label { fill: var(--text-soft); font-size: 12px; font-weight: 500; }
.ops-plot .row-label.mean { fill: var(--strong); font-weight: 700; }
.ops-plot .group-label { fill: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; }
.ops-plot .regime-row { cursor: default; outline: none; }
.ops-plot .regime-row:hover rect, .ops-plot .regime-row:focus rect { fill: var(--surface); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ops-plot .grid line, .acc-axis .grid line { stroke: var(--ops-grid); stroke-width: 1; shape-rendering: crispEdges; }
.ops-plot .frame { stroke: var(--ops-axis); stroke-width: 1; fill: none; shape-rendering: crispEdges; }
.ops-plot .cross { stroke: rgba(var(--ink-rgb), 0.35); stroke-width: 1; shape-rendering: crispEdges; }
.ops-note { font-size: 0.8rem; color: var(--faint); margin: 10px 0 0; }

/* the floating tooltip shared by every chart */
.ops-tip {
  position: fixed; z-index: 80; pointer-events: none; min-width: 170px; max-width: 320px; padding: 10px 12px; border-radius: 10px;
  background: rgba(var(--bg-rgb), 0.97); border: 1px solid var(--border-strong); box-shadow: 0 14px 40px var(--shadow);
  font-size: 0.8rem; color: var(--muted); line-height: 1.45;
}
.ops-tip .t { color: var(--text); font-weight: 700; margin-bottom: 5px; font-size: 0.82rem; }
.ops-tip .r { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ops-tip .r b { color: var(--strong); font-variant-numeric: tabular-nums; min-width: 58px; }
.ops-tip .r.best b { color: var(--strong); text-decoration: underline; text-underline-offset: 3px; }
.ops-tip .r.none b { color: var(--faint); font-weight: 500; }
.ops-tip svg { flex: none; overflow: visible; }

/* the table view of the performance explorer */
.ops-details { margin: 14px 0 0; }
.ops-details > summary {
  cursor: pointer; color: var(--muted); font-size: 0.86rem; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); display: inline-block;
}
.ops-details > summary:hover { color: var(--text); border-color: var(--border-strong); }
.ops-details[open] > summary { color: var(--text); }
.article figure.ops-narrow img { max-width: min(620px, 100%); margin: 0 auto; }
.article figure.ops-narrow figcaption { max-width: 620px; margin-left: auto; margin-right: auto; }
.ops-table-wrap { overflow-x: auto; overscroll-behavior-x: contain; margin-top: 8px; border-radius: 10px; border: 1px solid var(--border); contain: inline-size; }
.ops-table { border-collapse: collapse; font-size: 0.78rem; width: 100%; font-variant-numeric: tabular-nums; }
.ops-table th, .ops-table td { padding: 6px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border); }
.ops-table th { color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--ops-surface); }
.ops-table th:first-child, .ops-table td:first-child { text-align: left; }
.ops-table td { color: var(--text-soft); }
.ops-table td.none { color: var(--faint); }

/* the performance figures of the paper, in the theme of the page */
.article details.ops-details figure { margin: 0; }
.fig-perf { margin-top: 14px; gap: 16px; }
.article .fig-perf figure img { padding: 6px; }
.article .fig-perf figcaption { margin-top: 6px; }

/* the article column may not grow past the viewport with a wide table inside it (the grid item's automatic minimum
   would otherwise be the table's width) */
.article-layout > .article { min-width: 0; width: 100%; }

/* the concept animations (operators-anim.js) and the canvas charts */
.ops-canvas { display: block; width: 100%; height: auto; }
.ops-canvas.grouping { aspect-ratio: 2.15 / 1; }
.ops-canvas.frozen, .ops-canvas.modes, .ops-canvas.cooldown { aspect-ratio: auto; }
.ops-canvas.chart { aspect-ratio: 2.5 / 1; }
/* the pause button of an animation, small and tucked into the corner the drawings keep free for it */
.ops-card .anim-wrap .stage-play { right: 4px; bottom: 4px; width: 30px; height: 30px; }
.ops-card .anim-wrap .stage-play svg { width: 12px; height: 12px; }
@media (max-width: 700px) {
  .ops-canvas.grouping { aspect-ratio: 0.72 / 1; }
  .ops-canvas.chart { aspect-ratio: 1.3 / 1; }
}
.ops-seg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ops-seg-row.top { margin: 0 0 12px; }
.ops-seg-row.bottom { margin: 12px 0 0; }
.ops-seg-row .segmented { width: auto; }
.ops-seg-row .segmented button { white-space: nowrap; }
.ops-seg-row .note { margin: 0; }
@media (max-width: 560px) { .ops-seg-row .segmented { flex-wrap: wrap; } }

/* the split of the problems into baseline above, within 5% of, and below Daedalus */
.ops-split { margin-top: 8px; }
.ops-split .bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: rgba(var(--ink-rgb), 0.06); gap: 2px; }
.ops-split .bar i { flex: 0 0 0; flex-basis: 0; min-width: 0; transition: flex-grow 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ops-split .bar i.up { background: var(--ops-up); }
.ops-split .bar i.eq { background: rgba(var(--ink-rgb), 0.35); }
.ops-split .bar i.down { background: var(--ops-down); }
.ops-split .keys { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 5px; font-size: 0.72rem; color: var(--faint); }
.ops-split .keys b { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.ops-tile.none .ops-split { display: none; }
.ops-tile .v .n.na { font-size: 0.9rem; font-weight: 600; color: var(--faint); }
@media (prefers-reduced-motion: reduce) { .ops-split .bar i { transition: none; } }

/* the caption that heads a group of headline cards, in bold, and the projections' note above their cards */
.ops-lead-note { margin: 4px 0 14px; font-size: 0.92rem; color: var(--text-soft); line-height: 1.55; }
.ops-lead-note b { color: var(--text); font-weight: 700; }