static-fire 0.0.0-stage → 0.44.0

package/web/styles.css

@@ -0,0 +1,333 @@
+/* Offset (The AI Launchpad visual system). Every colour, font, radius and shadow comes from
+   ./brand/offset-tokens.css; nothing is defined here that is not a token or a token role.
+   Light scheme only: Offset's dark scheme is for packaging. */
+@import url("./brand/offset-tokens.css");
+
+* { box-sizing: border-box; }
+html, body { margin: 0; background: var(--ground); color: var(--fg); font-family: var(--font-text); font-size: 15px; line-height: var(--leading-text); -webkit-font-smoothing: antialiased; }
+button { font: inherit; color: inherit; cursor: pointer; }
+code { font-family: var(--font-mono); font-size: 0.9em; }
+.app { max-width: 1240px; margin: 0 auto; padding: var(--spacing-24) var(--spacing-16) var(--spacing-64); }
+.muted { color: var(--fg-3); }
+.error { color: var(--fg); background: var(--color-blush); border: var(--outline-width) solid var(--outline); border-radius: var(--radius-xs); padding: var(--spacing-8) var(--spacing-12); font-size: var(--text-sm); }
+.kicker { font-family: var(--font-kicker); font-weight: var(--weight-kicker); font-size: var(--text-sm); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--fg-3); display: flex; align-items: center; gap: var(--spacing-8); }
+
+/* top bar */
+.topbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-12); margin-bottom: var(--spacing-32); }
+.brand { font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); font-size: var(--text-xl); display: flex; align-items: center; gap: var(--spacing-8); }
+.brand::before { content: ""; width: 22px; height: 22px; border-radius: var(--radius-xs); background: var(--accent); border: var(--outline-width) solid var(--outline); }
+.spacer { flex: 1; }
+
+/* page navigation (#24): one pill per page, the current one filled */
+.nav { display: flex; gap: var(--spacing-4, 4px); }
+.nav a { font-weight: 800; color: var(--fg-3); text-decoration: none; border: var(--outline-width) solid transparent; border-radius: var(--radius-pill); padding: 4px var(--spacing-16); }
+.nav a:hover { color: var(--fg); }
+.nav a.on { color: var(--fg); background: var(--accent); border-color: var(--outline); }
+.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--spacing-16); }
+.page-head .sub { color: var(--fg-3); margin: 0; max-width: 72ch; }
+select, .btn, input[type="number"] { border: var(--outline-width) solid var(--outline); background: var(--raised); border-radius: var(--radius-sm); padding: var(--spacing-8) var(--spacing-12); font: inherit; color: var(--fg); max-width: 100%; }
+.btn { font-weight: 700; box-shadow: var(--shadow-sm); transition: transform .08s, box-shadow .08s; }
+.btn:hover:not(:disabled) { transform: translateY(var(--press-y)); box-shadow: var(--shadow-sm-pressed); }
+.btn-primary { background: var(--accent); }
+.btn-quiet { box-shadow: none; background: var(--surface); margin-top: var(--spacing-16); font-size: var(--text-sm); }
+.btn-quiet:hover:not(:disabled) { transform: none; box-shadow: none; background: var(--color-cream); }
+.btn:disabled { opacity: 0.5; cursor: default; }
+
+/* hero */
+.hero { margin-bottom: var(--spacing-24); }
+.hero h1 { font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); line-height: var(--leading-display); font-size: clamp(2rem, 5vw, var(--text-5xl)); margin: var(--spacing-8) 0 var(--spacing-12); }
+.meta { display: flex; flex-wrap: wrap; gap: var(--spacing-8) var(--spacing-24); color: var(--fg-3); font-size: var(--text-sm); margin-bottom: var(--spacing-16); }
+.meta b { color: var(--fg); }
+.progress { display: flex; align-items: center; gap: var(--spacing-12); }
+.progress-track { flex: 1; height: 12px; border-radius: var(--radius-pill); background: var(--raised); border: var(--outline-width) solid var(--outline); overflow: hidden; }
+.progress-fill { height: 100%; background: var(--accent); transition: width .4s ease; }
+.pill { font-size: var(--text-sm); font-weight: 700; padding: 2px var(--spacing-12); border-radius: var(--radius-pill); border: var(--outline-width) solid var(--outline); background: var(--raised); white-space: nowrap; }
+.pill.live { background: var(--color-mint); }
+.pill.live::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--outline); margin-right: 6px; animation: pulse 1.4s infinite; }
+@keyframes pulse { 50% { opacity: 0.25; } }
+
+/* view chips */
+.chips { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin-bottom: var(--spacing-16); }
+.chip { border: var(--outline-width) solid var(--outline); background: var(--raised); border-radius: var(--radius-pill); padding: 4px var(--spacing-16); font-weight: 700; font-size: var(--text-sm); }
+.chip.on { background: var(--accent); box-shadow: var(--shadow-sm-pressed); }
+
+/* filter bar */
+.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--spacing-8) var(--spacing-12); margin-bottom: var(--spacing-24); }
+.filters label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); font-weight: 700; color: var(--fg-3); min-width: 0; }
+.filters select, .filters input[type="date"] { border: var(--outline-width) solid var(--outline); background: var(--raised); border-radius: var(--radius-sm); padding: 6px var(--spacing-8); font: inherit; font-weight: 500; color: var(--fg); max-width: 260px; }
+.filters .btn-quiet { margin-top: 0; }
+
+/* filter bar: one Filter button with a searchable menu, and a tag per active filter (#26) */
+.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8); margin-bottom: var(--spacing-24); }
+.filter-bar .pop { position: relative; }
+.filter-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px var(--spacing-16); border-radius: var(--radius-pill); font-size: var(--text-sm); }
+.filter-btn.on { background: var(--accent); }
+.filter-bar .menu { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: min(340px, calc(100vw - 32px)); background: var(--raised); border: var(--outline-width) solid var(--outline); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: var(--spacing-8); }
+.filter-bar .menu input[type="search"] { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--text-sm); border: 1.5px solid var(--outline); border-radius: var(--radius-xs); padding: 6px var(--spacing-8); margin-bottom: 6px; background: var(--ground); color: var(--fg); }
+.filter-bar .menu-list { max-height: 320px; overflow: auto; }
+.filter-bar .sec, .filter-bar .opt { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: var(--spacing-8); border: 0; background: none; font: inherit; color: var(--fg); text-align: left; cursor: pointer; border-radius: 6px; }
+.filter-bar .sec { padding: 6px; font-weight: 700; font-size: var(--text-sm); }
+.filter-bar .sec i { display: inline-block; width: 14px; font-style: normal; }
+.filter-bar .sec span:last-child { color: var(--fg-3); font-weight: 400; font-size: 12px; text-align: right; }
+.filter-bar .sec span.sec-on { color: var(--fg); font-weight: 700; }
+.filter-bar .sec:hover, .filter-bar .opt:hover, .filter-bar .sec:focus-visible, .filter-bar .opt:focus-visible { background: var(--surface); }
+.filter-bar .opt { padding: 4px 6px; font-size: var(--text-sm); }
+.filter-bar .opt.on { font-weight: 700; }
+.filter-bar .opt em, .filter-bar .menu-flat-dates em { font-style: normal; color: var(--fg-3); }
+.filter-bar .opt small { display: block; color: var(--fg-3); font-weight: 400; font-size: 12px; }
+.filter-bar .opt-count { color: var(--fg-3); font-family: var(--font-mono); font-size: 12px; }
+.filter-bar .in { padding-left: 14px; }
+.filter-bar .grp { font-weight: 800; font-size: var(--text-xs); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--fg-3); padding: 6px 6px 2px; }
+.filter-bar .menu-dates { display: flex; flex-wrap: wrap; gap: var(--spacing-8); padding: 4px 6px; }
+.filter-bar .menu-dates label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-weight: 700; color: var(--fg-3); }
+.filter-bar .menu-dates input { border: 1.5px solid var(--outline); background: var(--raised); border-radius: var(--radius-xs); padding: 4px 6px; font: inherit; font-size: var(--text-sm); color: var(--fg); }
+.filter-bar .menu-flat-dates { padding: 4px 6px; font-size: var(--text-sm); }
+.filter-bar .menu-none { margin: 0; padding: 6px; font-size: var(--text-sm); }
+.tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); background: var(--surface); border: 1.5px solid var(--outline); border-radius: var(--radius-xs); padding: 2px 4px 2px 8px; }
+.tag em { font-style: normal; color: var(--fg-3); }
+.tag.grading { background: var(--color-lavender); }
+.tag button { font: inherit; border: 0; background: none; cursor: pointer; padding: 0 4px; font-weight: 800; color: var(--fg); }
+.clear-all { padding: 3px var(--spacing-12); border-radius: var(--radius-pill); border-style: dashed; box-shadow: none; font-size: var(--text-sm); }
+.clear-all:hover:not(:disabled) { transform: none; box-shadow: none; background: var(--surface); }
+
+/* cards */
+.card { background: var(--raised); border: var(--outline-width) solid var(--outline); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--spacing-24); margin-bottom: var(--spacing-32); min-width: 0; }
+.card h2 { font-family: var(--font-heading); font-weight: var(--weight-heading); letter-spacing: var(--tracking-heading); line-height: var(--leading-heading); font-size: var(--text-2xl); margin: var(--spacing-4) 0 var(--spacing-8); }
+.card h3 { font-family: var(--font-heading); font-weight: var(--weight-heading-card); letter-spacing: -0.02em; font-size: var(--text-lg); margin: 0 0 2px; }
+.card .sub { color: var(--fg-3); font-size: var(--text-sm); margin: 0 0 var(--spacing-16); max-width: 72ch; }
+.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-24); margin-bottom: var(--spacing-32); }
+.grid3 .card { margin-bottom: 0; }
+@media (max-width: 900px) { .grid3 { grid-template-columns: 1fr; } }
+.note { color: var(--fg-3); font-size: var(--text-sm); margin: var(--spacing-12) 0 0; }
+.empty { text-align: center; padding: var(--spacing-64) var(--spacing-24); }
+.empty .kicker { justify-content: center; }
+.empty h1 { font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); font-size: var(--text-4xl); margin: var(--spacing-8) 0; }
+
+/* legend */
+.legend { display: flex; flex-wrap: wrap; gap: var(--spacing-8) var(--spacing-16); font-size: var(--text-sm); color: var(--fg-2); margin-bottom: var(--spacing-8); }
+.legend span { display: inline-flex; align-items: center; gap: 6px; }
+.legend .sep { width: 2px; height: 16px; background: var(--line); }
+.swatch { width: 14px; height: 14px; border-radius: 4px; border: var(--outline-width) solid var(--outline); display: inline-block; }
+.marker { flex: none; overflow: visible; }
+.quad-key { width: 18px; height: 12px; background: var(--color-mint); border: var(--outline-width) solid var(--color-mint-2); border-radius: 3px; }
+.pareto-key { width: 20px; border-top: 2px dotted var(--fg); }
+.human-key { width: 20px; border-top: 3px solid var(--color-ink); }
+.chart .human-line { stroke: var(--color-ink); stroke-width: 3; stroke-linecap: round; }
+.chart .human-label { fill: var(--fg); font-size: 12.5px; font-weight: 700; paint-order: stroke; stroke: var(--raised); stroke-width: 4px; stroke-linejoin: round; }
+
+/* charts */
+.chart-wrap { position: relative; }
+.chart { width: 100%; display: block; overflow: visible; }
+.chart text { font-family: var(--font-text); fill: var(--fg-3); font-size: 12px; }
+.chart .axis-title { fill: var(--fg-2); font-size: 13px; font-weight: 700; }
+.chart .gridline { stroke: var(--dataviz-grid); }
+.chart .quadrant { fill: var(--color-mint); opacity: 0.55; }
+.chart .pt-label { fill: var(--fg); font-size: 12.5px; font-weight: 500; paint-order: stroke; stroke: var(--raised); stroke-width: 4px; stroke-linejoin: round; }
+.chart .muted { fill: var(--fg-3); }
+.tooltip { position: absolute; pointer-events: none; background: var(--raised); color: var(--fg); border: var(--outline-width) solid var(--outline); box-shadow: var(--shadow-sm); padding: var(--spacing-12); border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: 1.5; min-width: 220px; transform: translate(-50%, calc(-100% - 16px)); z-index: 5; }
+.tooltip .tt-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
+.tooltip .row { display: flex; justify-content: space-between; gap: var(--spacing-16); }
+.tooltip .row span:first-child { color: var(--fg-3); }
+
+/* bars */
+.bars { display: flex; flex-direction: column; gap: 10px; }
+.bar-row { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: var(--spacing-8); align-items: center; font-size: var(--text-sm); }
+.bar-label { display: flex; align-items: center; gap: 6px; line-height: 1.25; color: var(--fg-2); }
+.bar-label .marker { flex: none; }
+.bar-track { position: relative; height: 20px; }
+.bar { position: absolute; left: 0; top: 0; bottom: 0; border: var(--outline-width) solid var(--outline); border-radius: 0 4px 4px 0; min-width: 4px; transition: width .5s ease; }
+.bar-val { position: absolute; top: 50%; transform: translateY(-50%); font-variant-numeric: tabular-nums; font-weight: 700; padding-left: 6px; white-space: nowrap; }
+
+/* tables */
+.table-wrap { overflow-x: auto; }
+table { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: var(--text-sm); }
+th { font-weight: 700; color: var(--fg-3); font-size: 12px; text-align: center; padding: 6px 4px; vertical-align: bottom; }
+th:first-child, td:first-child { text-align: left; }
+td { padding: var(--spacing-8) 6px; border-radius: var(--radius-xs); text-align: center; font-variant-numeric: tabular-nums; }
+td.cfg, .cfg { white-space: nowrap; display: flex; align-items: center; gap: var(--spacing-8); }
+td.strong, th.strong { font-weight: 800; }
+td .ci { color: var(--fg-3); font-weight: 500; }
+tr.group td { text-align: left; font-family: var(--font-kicker); font-weight: var(--weight-kicker); text-transform: uppercase; letter-spacing: var(--tracking-kicker); font-size: 12px; color: var(--fg-3); padding-top: var(--spacing-16); }
+table.criteria td.q { font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
+.tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: var(--radius-pill); border: var(--outline-width) solid var(--outline); margin-left: 6px; }
+.tag.floor { background: var(--color-cream); }
+.tag.strong { background: var(--color-sky); }
+.tag.ceiling { background: var(--color-lavender); }
+.tag.warn { background: var(--color-blush); }
+td > .tag:first-child { margin-left: 0; }
+td.q .tag { margin-left: var(--spacing-8); }
+
+/* trials */
+.trial-task + .trial-task { margin-top: var(--spacing-24); }
+.trial-rows { display: flex; flex-direction: column; gap: var(--spacing-8); margin-top: var(--spacing-8); }
+.trial-row { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--spacing-12); align-items: center; font-size: var(--text-sm); }
+@media (max-width: 700px) { .trial-row { grid-template-columns: 1fr; } }
+.trial-cells { display: flex; gap: var(--spacing-8); flex-wrap: wrap; }
+.cell { min-width: 96px; padding: 6px 10px; border-radius: var(--radius-xs); border: var(--outline-width) solid var(--outline); background: var(--raised); font-size: 12px; text-align: left; display: flex; flex-direction: column; }
+.cell .k { color: var(--fg-3); font-size: 11px; }
+.cell .v { font-weight: 800; font-variant-numeric: tabular-nums; }
+.cell.done { box-shadow: var(--shadow-sm); }
+.cell.done:hover { transform: translateY(var(--press-y)); box-shadow: var(--shadow-sm-pressed); }
+.cell.running, .cell.grading { background: var(--color-butter); }
+.cell.running .v, .cell.grading .v { animation: pulse 1.4s infinite; font-weight: 600; }
+.cell.invalid { background: var(--color-sun-2); }
+.cell.failed { background: var(--color-blush); }
+.cell.queued { opacity: 0.5; }
+
+/* drawer */
+.scrim { position: fixed; inset: 0; background: color-mix(in srgb, var(--color-ink) 35%, transparent); z-index: 10; }
+.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(1120px, 100vw); background: var(--ground); border-left: var(--outline-width) solid var(--outline); z-index: 11; display: flex; flex-direction: column; }
+.drawer-head { padding: var(--spacing-16) var(--spacing-24); border-bottom: var(--outline-width) solid var(--outline); display: flex; align-items: flex-start; gap: var(--spacing-12); background: var(--raised); }
+.drawer-head h2 { font-family: var(--font-heading); font-weight: var(--weight-heading); letter-spacing: var(--tracking-heading); font-size: var(--text-2xl); margin: 4px 0 0; }
+.drawer-body { flex: 1; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
+@media (max-width: 800px) { .drawer-body { grid-template-columns: 1fr; overflow-y: auto; } .drawer-body > div { overflow: visible !important; } }
+.drawer-body > div { overflow-y: auto; padding: var(--spacing-24); }
+.drawer-body > div + div { border-left: var(--outline-width) solid var(--line); background: var(--surface); }
+.drawer-body h3 { font-family: var(--font-heading); font-weight: var(--weight-heading); letter-spacing: var(--tracking-heading); font-size: var(--text-xl); margin: 0 0 var(--spacing-12); }
+.stats { display: flex; gap: var(--spacing-24); flex-wrap: wrap; margin-top: var(--spacing-8); }
+.stat .k { color: var(--fg-3); font-size: 12px; }
+.stat .v { font-size: var(--text-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
+.close { margin-left: auto; border: var(--outline-width) solid var(--outline); background: var(--raised); border-radius: var(--radius-pill); width: 36px; height: 36px; font-size: 20px; line-height: 1; }
+.tabs { display: flex; gap: 6px; margin-bottom: var(--spacing-16); }
+.tab { border: var(--outline-width) solid var(--outline); background: var(--raised); border-radius: var(--radius-pill); padding: 2px var(--spacing-12); font-size: var(--text-sm); font-weight: 700; }
+.tab.on { background: var(--accent); }
+.prose { line-height: 1.65; max-width: 680px; }
+.prose h1, .prose h2, .prose h3 { font-family: var(--font-heading); font-weight: var(--weight-heading-card); letter-spacing: -0.02em; line-height: 1.15; }
+.prose code { background: var(--surface); padding: 1px 5px; border-radius: 6px; }
+.prose pre { background: var(--surface); border: var(--outline-width) solid var(--line); padding: var(--spacing-12); border-radius: var(--radius-xs); overflow-x: auto; }
+.prose pre code { background: none; padding: 0; }
+.prose blockquote { border-left: 4px solid var(--accent); margin: 0; padding-left: var(--spacing-16); color: var(--fg-2); }
+.prose img { display: none; }
+.prose table { font-size: var(--text-sm); }
+.prose td, .prose th { border: 1px solid var(--line); }
+/* An image output in the trial drawer: never wider than the drawer column. */
+.output-image { display: block; max-width: 100%; height: auto; border: var(--outline-width) solid var(--outline); border-radius: var(--radius-xs); }
+pre.raw { white-space: pre-wrap; font-family: var(--font-mono); font-size: 12.5px; }
+.verdict-group { margin-bottom: var(--spacing-24); }
+.verdict-group > .crit-head { display: flex; justify-content: space-between; font-size: var(--text-lg); margin-bottom: var(--spacing-8); }
+.crit-score { font-weight: 800; font-variant-numeric: tabular-nums; }
+.crit { background: var(--raised); border: var(--outline-width) solid var(--outline); border-radius: var(--radius-sm); padding: var(--spacing-12); margin-bottom: var(--spacing-8); }
+.crit-top { display: flex; gap: var(--spacing-8); align-items: flex-start; }
+.crit-top .q { font-size: var(--text-sm); font-weight: 600; }
+.crit-meta { display: flex; gap: var(--spacing-8); align-items: center; margin: 6px 0 2px; font-size: 12px; }
+.crit-meta .tag { margin-left: 0; }
+.reason { margin: 4px 0 0; font-size: var(--text-sm); color: var(--fg-2); }
+.badge { flex: none; font-size: 12px; font-weight: 800; padding: 0 8px; border-radius: var(--radius-pill); border: var(--outline-width) solid var(--outline); }
+.badge.pass { background: var(--color-mint); }
+.badge.fail { background: var(--color-blush); }
+.badge.split { background: var(--color-sun-2); }
+.badge.err { background: var(--color-cream); }
+.conditions { color: var(--fg-3); font-size: 12px; font-weight: 400; }
+.conditions-list, .gradings { margin-bottom: var(--spacing-24); }
+.conditions-list dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--spacing-12); margin: 0; font-size: var(--text-sm); }
+.conditions-list dt { color: var(--fg-3); }
+.conditions-list dd { margin: 0; overflow-wrap: anywhere; }
+.gradings ul { list-style: none; margin: 0; padding: 0; }
+.gradings li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--spacing-12); padding: var(--spacing-8) var(--spacing-12); margin-bottom: 6px; background: var(--raised); border: var(--outline-width) solid var(--line); border-radius: var(--radius-sm); font-size: var(--text-sm); }
+.gradings li.counted { border-color: var(--outline); box-shadow: inset 4px 0 0 var(--accent); }
+.gradings .g-name { flex-basis: 100%; font-weight: 700; }
+.gradings .g-score { font-weight: 800; font-variant-numeric: tabular-nums; }
+.gradings .g-status.invalid { color: var(--fg-2); }
+.gradings .g-counted { margin-left: auto; font-size: 12px; font-weight: 800; padding: 0 8px; border-radius: var(--radius-pill); border: var(--outline-width) solid var(--outline); background: var(--accent); }
+
+/* modal */
+.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--raised); border: var(--outline-width) solid var(--outline); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); padding: var(--spacing-24); z-index: 11; }
+.modal h2 { font-family: var(--font-heading); font-weight: var(--weight-heading); letter-spacing: var(--tracking-heading); font-size: var(--text-2xl); margin: 0 0 var(--spacing-16); }
+.modal fieldset { border: none; padding: 0; margin: 0 0 var(--spacing-16); }
+.modal legend { font-family: var(--font-kicker); font-weight: var(--weight-kicker); text-transform: uppercase; letter-spacing: var(--tracking-kicker); font-size: 12px; color: var(--fg-3); margin-bottom: 4px; }
+.modal label.opt { display: flex; align-items: center; gap: var(--spacing-8); padding: 6px 2px; border-bottom: 1px solid var(--line-soft); font-size: var(--text-sm); }
+.modal label.opt .muted { margin-left: auto; font-size: 12px; }
+.modal select { width: 100%; }
+.modal .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-16); margin-top: var(--spacing-12); font-size: var(--text-sm); }
+.modal .row label { display: flex; align-items: center; gap: var(--spacing-8); }
+.modal .row.end { justify-content: flex-end; }
+.modal input[type="number"] { width: 72px; padding: 4px var(--spacing-8); }
+.envelope { background: var(--surface); border: var(--outline-width) solid var(--outline); border-radius: var(--radius-sm); padding: var(--spacing-12) var(--spacing-16); margin-bottom: var(--spacing-16); font-size: var(--text-sm); }
+.envelope .k { font-family: var(--font-kicker); font-weight: var(--weight-kicker); text-transform: uppercase; letter-spacing: var(--tracking-kicker); font-size: 11px; color: var(--fg-3); margin-top: 4px; }
+.envelope .subject { font-weight: 800; font-size: var(--text-lg); }
+.img-ph { display: inline-block; background: var(--color-sky); border: var(--outline-width) dashed var(--outline); border-radius: var(--radius-xs); padding: 2px var(--spacing-8); font-size: var(--text-sm); }
+
+/* batches panel (#13) */
+.batches { margin-bottom: var(--spacing-24); }
+.batch-list { list-style: none; margin: var(--spacing-12) 0 0; padding: 0; display: grid; gap: var(--spacing-12); }
+.batch { border: var(--outline-width) solid var(--outline); border-radius: var(--radius-sm); padding: var(--spacing-12); background: var(--raised); }
+/* one row per batch, in the columns of .batch-cols; stacked on narrow screens */
+.batch-cols, .batch-head { display: grid; grid-template-columns: minmax(10em, 1fr) minmax(0, 2fr) minmax(150px, 1.5fr) 7.5em; gap: var(--spacing-8) var(--spacing-16); align-items: center; }
+.batch-cols { margin: var(--spacing-12) 0 0; padding: 0 calc(var(--spacing-12) + var(--outline-width)); font-family: var(--font-kicker); font-weight: var(--weight-kicker); font-size: 12px; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--fg-3); }
+.batch-head { width: 100%; text-align: left; background: none; border: 0; padding: 0; }
+.batch-id { display: flex; flex-direction: column; min-width: 0; }
+.batch-id code { color: var(--fg-3); font-size: 12px; }
+.batch-asked { color: var(--fg-3); font-size: var(--text-sm); min-width: 0; }
+.batch-progress { display: flex; flex-direction: column; min-width: 0; }
+.batch-head .batch-state { justify-self: start; }
+@media (max-width: 720px) { .batch-cols { display: none; } .batch-head { grid-template-columns: 1fr; } }
+.batch-state { font-size: var(--text-sm); font-weight: 700; padding: 2px var(--spacing-12); border-radius: var(--radius-pill); border: var(--outline-width) solid var(--outline); background: var(--surface); white-space: nowrap; }
+.batch-state.running { background: var(--color-mint); }
+.batch-state.stalled { background: var(--color-sun-2); }
+.batch-bar { display: flex; height: 10px; margin: 0 0 var(--spacing-4, 4px); border-radius: var(--radius-pill); border: var(--outline-width) solid var(--outline); overflow: hidden; background: var(--surface); }
+.batch-bar .seg { flex-basis: 0; transition: flex-grow .4s ease; }
+.batch-bar .seg.done { background: var(--color-mint); }
+.batch-bar .seg.failed { background: var(--color-blush); }
+.batch-bar .seg.invalid { background: var(--color-sun-2); }
+.batch-bar .seg.running { background: var(--color-butter); }
+.batch-bar .seg.queued { background: var(--surface); }
+.batch-line { font-size: var(--text-sm); }
+.batch-trials { width: 100%; border-collapse: collapse; margin-top: var(--spacing-8); font-size: var(--text-sm); }
+.batch-trials th, .batch-trials td { text-align: left; padding: 2px var(--spacing-8); border-top: 1px solid var(--dataviz-grid); }
+.status.done { color: var(--fg); }
+.status.failed, .status.invalid { font-weight: 700; }
+
+/* left-out notice (under the chart) */
+.left-out { margin-top: var(--spacing-12); }
+.left-out .btn-quiet { margin-top: var(--spacing-8); }
+.left-out .error { margin-top: var(--spacing-8); }
+.empty .left-out { text-align: left; max-width: 72ch; margin: var(--spacing-24) auto 0; }
+.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--fg); text-decoration: underline; cursor: pointer; }
+
+/* chart card: Chart / Table toggle and the config table */
+.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-8) var(--spacing-16); }
+.view-toggle { display: inline-flex; border: var(--outline-width) solid var(--outline); border-radius: var(--radius-pill); overflow: hidden; background: var(--raised); }
+.view-toggle button { font: inherit; font-weight: 700; font-size: var(--text-sm); color: var(--fg); border: 0; background: transparent; padding: 4px var(--spacing-16); cursor: pointer; }
+.view-toggle button + button { border-left: var(--outline-width) solid var(--outline); }
+.view-toggle button.on { background: var(--accent); }
+table.configs th.num, table.configs td.num { text-align: right; white-space: nowrap; }
+table.configs th:last-child, table.configs td:last-child { text-align: left; white-space: nowrap; }
+table.configs tbody tr { cursor: pointer; }
+table.configs tbody tr:hover td { background: var(--ground); }
+table.configs .why { color: var(--fg-3); font-size: 12px; margin-top: 2px; }
+
+/* Compare page (#27): the two picked versions, what changed between them, and the moved criteria */
+.compare-picks { margin-bottom: var(--spacing-16); }
+.compare-picks select { max-width: 420px; }
+.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-12); }
+@media (max-width: 720px) { .two { grid-template-columns: 1fr; } }
+.ver { border: var(--outline-width) solid var(--outline); border-radius: var(--radius-sm); padding: var(--spacing-12); background: var(--color-lavender); min-width: 0; }
+.ver .ver-name { display: block; font-size: var(--text-lg); margin: 2px 0; }
+.ver .muted { font-size: var(--text-sm); }
+.pill.current { background: var(--accent); font-size: 11px; padding: 0 var(--spacing-8); letter-spacing: 0; text-transform: none; }
+.changes { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--spacing-12); }
+.change { min-width: 0; }
+.diff { font-family: var(--font-mono); font-size: var(--text-sm); background: var(--ground); border: var(--outline-width) solid var(--outline); border-radius: var(--radius-xs); padding: var(--spacing-8) var(--spacing-12); margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
+.diff del { background: var(--color-blush); text-decoration: line-through; }
+.diff ins { background: var(--color-mint); text-decoration: none; }
+.diff .field { color: var(--fg-3); font-weight: 700; }
+.pill.mark { font-size: 11px; padding: 0 var(--spacing-8); }
+.pill.mark.changed, .pill.mark.added, .pill.mark.removed { background: var(--color-lavender); }
+.pill.mark.same { background: var(--color-cream); }
+.delta { font-weight: 700; padding: 1px 6px; border-radius: var(--radius-xs); }
+.delta.up { background: var(--color-mint); }
+.delta.down { background: var(--color-blush); }
+.moved-head { margin-top: var(--spacing-24) !important; }
+.reading { background: var(--color-butter); border: var(--outline-width) solid var(--outline); border-radius: var(--radius-sm); padding: var(--spacing-8) var(--spacing-12); margin: var(--spacing-16) 0 0; font-weight: 600; }
+/* run status indicator in the top bar (#25): a pill that opens the Runs page */
+.run-status { display: flex; align-items: center; gap: var(--spacing-8); font-size: var(--text-sm); font-weight: 600; border: var(--outline-width) solid var(--outline); border-radius: var(--radius-pill); padding: 3px var(--spacing-12); background: var(--raised); max-width: 100%; text-align: left; }
+.run-status:hover { background: var(--color-cream); }
+.run-status .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--outline); background: var(--color-mint-2); }
+.run-status .dot.none { background: var(--surface); }
+.run-status .dot.run { background: var(--color-sun); animation: run-pulse 1.2s infinite; }
+.run-status .dot.stalled, .run-status .dot.unavailable { background: var(--color-blush-2); }
+@keyframes run-pulse { 50% { opacity: .35; } }
+@media (prefers-reduced-motion: reduce) { .run-status .dot.run { animation: none; } }
+.run-status .mini { flex: none; width: 70px; height: 7px; border: 1.5px solid var(--outline); border-radius: 4px; overflow: hidden; background: var(--raised); }
+.run-status .mini b { display: block; height: 100%; background: var(--color-sun); transition: width .4s ease; }
+.run-status-count { white-space: nowrap; font-variant-numeric: tabular-nums; }

package/web/suite-notes.ts

@@ -0,0 +1,20 @@
+// The suite descriptions the Results page shows with a chart. A suite can state facts that must stand next to any
+// chart of it (for example where its tasks and criteria come from), so every chart that draws a suite shows them.
+import type { Suite } from "../src/core/types";
+import type { Scope } from "../src/core/view-query";
+
+export interface SuiteNote { title: string; description: string }
+
+/**
+ * The described suites a chart draws: the chosen suite, every suite in the view for the Workflow Index, or each
+ * suite that holds the chosen task (a task's view has no suites of its own). Suites without a description are left out.
+ */
+export function suiteNotes(sel: Scope, suiteIds: string[], suites: Map<string, Suite>): SuiteNote[] {
+  const ids = sel.kind === "suite" ? [sel.id]
+    : sel.kind === "index" ? suiteIds
+    : [...suites.keys()].filter((id) => suites.get(id)!.tasks.includes(sel.id));
+  return ids.flatMap((id) => {
+    const s = suites.get(id), description = s?.description?.trim();
+    return s && description ? [{ title: s.title, description }] : [];
+  });
+}

package/web/wording.ts

@@ -0,0 +1,38 @@
+// The changed words between two wordings of one text (a reworded question, a changed context), for the Compare
+// page to mark. Display only: what changed between two grading versions comes from the server's difference.
+
+export interface WordPart { kind: "same" | "added" | "removed"; text: string }
+
+/** Words, runs of spaces and single punctuation marks, so "(the subject" and "(subject" share the "(". */
+const tokens = (s: string) => s.match(/\w+|\s+|[^\w\s]/g) ?? [];
+
+/** Above this many token pairs the texts are shown as one removed and one added part. */
+const MAX_CELLS = 4_000_000;
+
+/**
+ * The parts of `b` against `a`, in reading order: kept, removed (only in `a`) and added (only in `b`). In a run of
+ * changes the removed part comes first. Joined, the kept and removed parts give `a`; the kept and added parts give `b`.
+ */
+export function wordChanges(a: string, b: string): WordPart[] {
+  const x = tokens(a), y = tokens(b);
+  const parts: WordPart[] = [];
+  const push = (kind: WordPart["kind"], text: string) => {
+    const last = parts.at(-1);
+    if (last?.kind === kind) last.text += text; else if (text) parts.push({ kind, text });
+  };
+  if (x.length * y.length > MAX_CELLS) { push("removed", a); push("added", b); return parts; }
+  // lcs[i][j]: the longest common run of tokens of x from i and y from j.
+  const w = y.length + 1, lcs = new Uint32Array((x.length + 1) * w);
+  for (let i = x.length - 1; i >= 0; i--) {
+    for (let j = y.length - 1; j >= 0; j--) {
+      lcs[i * w + j] = x[i] === y[j] ? lcs[(i + 1) * w + j + 1]! + 1 : Math.max(lcs[(i + 1) * w + j]!, lcs[i * w + j + 1]!);
+    }
+  }
+  let i = 0, j = 0;
+  while (i < x.length || j < y.length) {
+    if (i < x.length && j < y.length && x[i] === y[j]) { push("same", x[i]!); i++; j++; }
+    else if (j >= y.length || (i < x.length && lcs[(i + 1) * w + j]! >= lcs[i * w + j + 1]!)) { push("removed", x[i]!); i++; }
+    else { push("added", y[j]!); j++; }
+  }
+  return parts;
+}