packages/forkhorse-dashboard/src/styles.css

1@import "@cloudflare/kumo/styles";
2@import "tailwindcss";
3@source "../node_modules/@cloudflare/kumo/dist/**/*.{js,jsx,ts,tsx}";
4@custom-variant dark (&:where([data-mode="dark"], [data-mode="dark"] *));
5
6/* Palette, fonts and radii are the reviewed host tokens applied by theme.ts. */
7@theme {
8  --text-xs: 0.75rem;
9  --text-xs--line-height: 1rem;
10  --text-sm: 0.875rem;
11  --text-sm--line-height: 1.25rem;
12  --text-base: 1rem;
13  --text-base--line-height: 1.5rem;
14  --text-lg: 1.125rem;
15  --text-lg--line-height: 1.75rem;
16  --layout-content-wide: 64rem;
17  --layout-activity-panel: 320px;
18  --default-transition-duration: 150ms;
19  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
20}
21html,
22body,
23#dashboard,
24#sidebar {
25  margin: 0;
26  min-height: 100%;
27}
28body {
29  margin: 0 !important;
30  font-family: var(--font-sans);
31  font-size: var(--text-sm);
32  line-height: var(--text-sm--line-height);
33  background: var(--color-kumo-base);
34  color: var(--text-color-kumo-default);
35}
36code {
37  font-family: var(--font-mono);
38  overflow-wrap: anywhere;
39}
40button:not(:disabled),
41summary {
42  cursor: pointer;
43}
44:focus-visible {
45  outline: 2px solid var(--color-kumo-focus);
46  outline-offset: 3px;
47}
48::selection {
49  background: var(--color-selection-bg);
50  color: var(--color-selection-text);
51}
52[hidden] {
53  display: none !important;
54}
55.app-shell {
56  display: flex;
57  min-height: 100dvh;
58}
59.main-pane {
60  min-width: 0;
61  flex: 1;
62  container-type: inline-size;
63}
64.page-header {
65  display: flex;
66  align-items: flex-start;
67  justify-content: space-between;
68  gap: calc(var(--spacing) * 4);
69  padding: calc(var(--spacing) * 6) calc(var(--spacing) * 3) calc(var(--spacing) * 6);
70}
71.page-title {
72  font-size: 24px;
73  line-height: 32px;
74  font-weight: 600;
75  letter-spacing: -0.025em;
76}
77.page-description {
78  font-size: 13px;
79  line-height: 18px;
80  letter-spacing: -0.25px;
81  color: var(--text-color-kumo-subtle);
82  margin-top: calc(var(--spacing) * 2);
83}
84h2,
85h3 {
86  font-size: var(--text-lg);
87  line-height: var(--text-lg--line-height);
88  font-weight: 600;
89  color: var(--text-color-kumo-strong);
90}
91h2 {
92  margin-bottom: calc(var(--spacing) * 4);
93}
94p {
95  margin-block: calc(var(--spacing) * 2);
96}
97.tab-gutter {
98  padding-inline: calc(var(--spacing) * 3);
99}
100.tab-label,
101.actions {
102  display: flex;
103  align-items: center;
104  gap: calc(var(--spacing) * 2);
105}
106.actions {
107  flex-wrap: wrap;
108}
109.content {
110  padding: calc(var(--spacing) * 6) calc(var(--spacing) * 3);
111  display: flex;
112  flex-direction: column;
113  gap: calc(var(--spacing) * 6);
114}
115label {
116  display: block;
117  margin-bottom: calc(var(--spacing) * 1);
118}
119input,
120select {
121  color: var(--text-color-kumo-default);
122  background: var(--color-kumo-control);
123  border: 1px solid var(--color-kumo-ring);
124  border-radius: var(--radius-lg);
125  padding: calc(var(--spacing) * 2);
126}
127.metrics {
128  display: grid;
129  grid-template-columns: repeat(4, minmax(0, 1fr));
130  gap: calc(var(--spacing) * 4);
131}
132.section-heading {
133  display: flex;
134  align-items: center;
135  justify-content: space-between;
136  gap: calc(var(--spacing) * 2);
137}
138.section-heading h2 {
139  margin: 0;
140}
141.table-scroll {
142  max-width: 100%;
143  overflow: auto;
144}
145.table-scroll td {
146  vertical-align: middle;
147  font-size: var(--text-sm);
148}
149.table-scroll tr:hover {
150  background: var(--color-kumo-tint);
151}
152.selected-row {
153  background: var(--color-kumo-fill);
154}
155.receipt {
156  margin-block: calc(var(--spacing) * 3);
157}
158/* FH-078 shares status tokens and identity silks with Work and the fork graph. */
159.agent-status-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
160.agent-status-name .race-saddlecloth { flex: 0 0 auto; min-width: 24px; height: 24px; font-size: 12px; }
161.table-agent-status { overflow-x: auto; }
162.table-agent-status table { min-width: var(--agent-table-min-width, 0); width: 100%; }
163/* Outrank legacy positional widths while retaining the Agents integration hook. */
164.table-agents.table-agent-status .column-agent { width: var(--agent-name-width, 19%); }
165.table-agents.table-agent-status .column-status { width: var(--agent-status-width, 20%); }
166.table-agents.table-agent-status .column-packet { width: var(--agent-packet-width, 10%); }
167.table-agents.table-agent-status .column-last-push { width: var(--agent-push-width, 14%); }
168.table-agents.table-agent-status .column-waiting-on { width: var(--agent-waiting-width, 17%); }
169.table-agents.table-agent-status .column-tokens { width: 20%; }
170.table-agent-status .column-packet .caption { display: block; }
171.table-agent-status .agent-packet-link { display: block; width: 100%; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
172.agent-last-push-stacked > code, .agent-last-push-stacked > time { display: block; }
173/* RV-rt3-1: the no-push placeholder wraps inside its narrow column instead of painting over the next one. */
174.table-agent-status .agent-missing-push { white-space: normal; overflow-wrap: break-word; }
175/* Match the existing fold boundaries for both active and disclosed idle rows. */
176@container (max-width: 819px) {
177  .table-agent-status { --agent-table-min-width: 0; --agent-name-width: 35%; --agent-status-width: 23%; --agent-packet-width: 12%; --agent-push-width: 14%; --agent-waiting-width: 16%; }
178  .table-agents.table-agent-status .column-tokens, .table-agent-status .agent-fork-caption { display: none; }
179}
180@media (max-width: 899px) {
181  .table-agent-status { --agent-table-min-width: 0; --agent-name-width: 35%; --agent-status-width: 23%; --agent-packet-width: 12%; --agent-push-width: 14%; --agent-waiting-width: 16%; }
182  .table-agents.table-agent-status .column-tokens, .table-agent-status .agent-fork-caption { display: none; }
183}
184.resume-card { margin-bottom: 16px; }
185.resume-card dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; }
186.resume-card dt { color: var(--text-color-kumo-subtle); }
187.resume-card dd { margin: 0; min-width: 0; }
188/* FH-081 folds metadata rather than imposing a wider race-list table. */
189.table-races table { width: 100%; min-width: 0; }
190.table-races th, .table-races td { white-space: normal; overflow-wrap: anywhere; }
191.table-races .race-list-column-0 { width: var(--race-list-title-width, 25%); }
192.table-races .race-list-column-1 { width: var(--race-list-status-width, 12%); }
193.table-races .race-list-column-2 { width: var(--race-list-entrants-width, 20%); }
194.table-races .race-list-column-3 { width: var(--race-list-winner-width, 17%); }
195.table-races .race-list-column-4 { width: 16%; }
196.table-races .race-list-column-5 { width: 10%; }
197.table-races td > .caption:not(.folded), .table-races .folded > span { display: block; }
198/* RV-rt3-2: Work's folded race caption lists one claim per line, as the Races table does. */
199#packets .folded > span { display: block; }
200.race-list-runner { display: flex; align-items: center; gap: 8px; min-width: 0; }
201.race-list-name { min-width: 0; overflow-wrap: anywhere; }
202.race-list-runner .race-saddlecloth { flex: 0 0 24px; min-width: 24px; width: 24px; height: 24px; font-size: 12px; }
203.race-list-entrant + .race-list-entrant { margin-top: 8px; }
204.race-list-entrant > .caption { display: block; padding-left: 32px; }
205.table-races .race-list-link { white-space: normal; overflow-wrap: anywhere; }
206@container (max-width: 819px) {
207  .table-races { --race-list-title-width: 30%; --race-list-status-width: 17%; --race-list-entrants-width: 28%; --race-list-winner-width: 25%; }
208  .table-races .race-list-column-4, .table-races .race-list-column-5 { display: none; }
209}
210@media (max-width: 899px) {
211  .table-races { --race-list-title-width: 30%; --race-list-status-width: 17%; --race-list-entrants-width: 28%; --race-list-winner-width: 25%; }
212  .table-races .race-list-column-4, .table-races .race-list-column-5 { display: none; }
213}
214.caption {
215  font-size: var(--text-xs);
216  line-height: var(--text-xs--line-height);
217}
218.muted,
219footer {
220  color: var(--text-color-kumo-subtle);
221}
222footer {
223  display: flex;
224  justify-content: space-between;
225  flex-wrap: wrap;
226  gap: calc(var(--spacing) * 3);
227  font-size: var(--text-xs);
228}
229.status-dot > span:first-child {
230  background: var(--status-color);
231}
232.status-info {
233  --status-color: var(--color-kumo-info);
234}
235.status-brand {
236  --status-color: var(--color-kumo-brand);
237}
238.status-success {
239  --status-color: var(--color-kumo-success);
240}
241.status-warning {
242  --status-color: var(--color-kumo-warning);
243}
244.status-danger {
245  --status-color: var(--color-kumo-danger);
246}
247.activity-panel {
248  width: var(--layout-activity-panel);
249  flex: 0 0 var(--layout-activity-panel);
250  position: sticky;
251  top: 0;
252  height: 100dvh;
253  overflow: auto;
254  background: var(--color-kumo-elevated);
255  border-left: 1px solid var(--color-kumo-line);
256  padding: calc(var(--spacing) * 4);
257}
258.activity {
259  border-bottom: 1px solid var(--color-kumo-line);
260  padding-block: calc(var(--spacing) * 4);
261  animation: activity-appear var(--default-transition-duration) var(--ease-out-strong);
262}
263@keyframes activity-appear {
264  from {
265    opacity: 0;
266  }
267  to {
268    opacity: 1;
269  }
270}
271@media (min-width: 640px) {
272  .page-header {
273    padding: calc(var(--spacing) * 10) calc(var(--spacing) * 10) calc(var(--spacing) * 6);
274  }
275  .tab-gutter {
276    padding-inline: calc(var(--spacing) * 10);
277  }
278  .content {
279    padding-inline: calc(var(--spacing) * 10);
280  }
281}
282@media (max-width: 1023px) {
283  .activity-panel {
284    position: fixed;
285    inset: 0 0 0 auto;
286    z-index: 20;
287    width: min(var(--layout-activity-panel), 92vw);
288    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
289    box-shadow: var(--themed-floating-shadow);
290  }
291}
292@media (max-width: 639px) {
293  .metrics {
294    grid-template-columns: repeat(2, minmax(0, 1fr));
295  }
296  .page-header {
297    flex-wrap: wrap;
298  }
299}
300@media (prefers-reduced-motion: reduce) {
301  *,
302  *::before,
303  *::after {
304    animation: none !important;
305    transition: none !important;
306    scroll-behavior: auto !important;
307  }
308}
309.activity-drawer {
310  position: fixed !important;
311  top: 0 !important;
312  bottom: 0 !important;
313  right: 0 !important;
314  left: auto !important;
315  transform: none !important;
316  /* Tailwind 4 translates dialogs with the independent translate property. */
317  translate: none !important;
318  /* The CSS optimizer may fold translate into transform; clear Tailwind's inputs too. */
319  --tw-translate-x: 0 !important;
320  --tw-translate-y: 0 !important;
321  width: min(var(--layout-activity-panel), 92vw) !important;
322  min-width: 0 !important;
323  max-height: 100dvh !important;
324  height: 100dvh;
325  overflow: auto;
326  background: var(--color-kumo-elevated);
327  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
328  box-shadow: var(--themed-floating-shadow);
329  padding: calc(var(--spacing) * 4);
330}
331
332/* Header, tabs and content share a single centered host frame. */
333.main-container {
334  max-width: var(--layout-content-wide);
335  margin-inline: auto;
336}
337.view-stack {
338  display: flex;
339  flex-direction: column;
340  gap: calc(var(--spacing) * 4);
341}
342#view-work {
343  gap: calc(var(--spacing) * 6);
344}
345.blockers {
346  display: grid;
347  gap: calc(var(--spacing) * 4);
348}
349.dialog-actions {
350  display: flex;
351  justify-content: flex-end;
352  gap: calc(var(--spacing) * 4);
353  margin-top: calc(var(--spacing) * 6);
354}
355.promotion-dialog > div {
356  min-width: 0;
357}
358.truncated-code {
359  display: block;
360  max-width: 16rem;
361  overflow: hidden;
362  text-overflow: ellipsis;
363  white-space: nowrap;
364  overflow-wrap: normal;
365}
366.path-summary {
367  display: inline-flex;
368  align-items: baseline;
369  gap: calc(var(--spacing) * 1.5);
370  max-width: 100%;
371  min-width: 0;
372  white-space: nowrap;
373}
374.path-summary .truncated-code {
375  min-width: 0;
376  flex: 0 1 auto;
377}
378.path-more {
379  flex-shrink: 0;
380}
381/* Bound the table's intrinsic path width; reserve the full count before truncating the path. */
382.work-paths .path-summary {
383  display: inline-flex;
384  max-width: 100%;
385}
386.collision-copy {
387  display: block;
388}
389.collision-copy .path-summary {
390  max-width: 20rem;
391  vertical-align: bottom;
392}
393.path-details code {
394  overflow-wrap: anywhere;
395}
396.table-scroll table {
397  width: 100%;
398}
399.table-scroll td {
400  white-space: nowrap;
401  padding-block: calc(var(--spacing) * 3);
402}
403.table-scroll th {
404  white-space: nowrap;
405}
406.table-scroll td p {
407  margin: 0;
408}
409.packet-link,
410.claim-link {
411  color: var(--text-color-kumo-default);
412  font-size: var(--text-sm);
413  text-align: left;
414}
415.claim-link {
416  text-decoration: underline;
417  text-underline-offset: 3px;
418}
419.packet-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
420.packet-label > button { min-width: 0; }
421.packet-race-badge { flex-shrink: 0; }
422.column-claimed > .caption { display: block; line-height: inherit; }
423.packet-link:hover {
424  text-decoration: underline;
425}
426.state-reason {
427  white-space: normal;
428  max-width: 14rem;
429  margin-top: calc(var(--spacing) * 1);
430}
431.last-push {
432  display: grid;
433  gap: calc(var(--spacing) * 1);
434  min-width: 0;
435}
436.last-push .path-summary {
437  max-width: 16rem;
438}
439.metric-value {
440  /* Preserve the former h3 typography and spacing after correcting its semantics. */
441  font-size: var(--text-lg);
442  line-height: var(--text-lg--line-height);
443  font-weight: 600;
444  color: var(--text-color-kumo-strong);
445  margin-block: 0;
446  display: flex;
447  align-items: center;
448  gap: calc(var(--spacing) * 2);
449}
450.warning-dot {
451  width: calc(var(--spacing) * 2);
452  height: calc(var(--spacing) * 2);
453  border-radius: var(--radius-xl);
454  background: var(--color-kumo-warning);
455}
456.panel-heading {
457  margin-bottom: calc(var(--spacing) * 4);
458}
459
460.packet-link {
461  display: block;
462  max-width: 16rem;
463  overflow: hidden;
464  white-space: nowrap;
465  text-overflow: ellipsis;
466}
467.table-scroll th {
468  font-size: var(--text-sm);
469}
470/* The drawer scrim uses the host shadow token instead of an opaque surface. */
471[data-base-ui-portal]:has(.activity-drawer) > [role="presentation"][data-open] {
472  background: var(--color-kumo-shadow-drop);
473  opacity: 1;
474}
475@media (max-width: 639px) {
476  .tab-gutter [role="tab"] {
477    flex-shrink: 0;
478    padding-inline: calc(var(--spacing) * 3);
479  }
480}
481
482/* Fixed columns keep intrinsic Git/path text from enlarging any table. */
483.table-scroll table {
484  table-layout: fixed;
485}
486.table-scroll th,
487.table-scroll td {
488  padding-inline: calc(var(--spacing) * 2);
489}
490.table-scroll .truncated-code,
491.truncated-name,
492.packet-link {
493  max-width: 100%;
494  display: block;
495  overflow: hidden;
496  white-space: nowrap;
497  text-overflow: ellipsis;
498}
499.table-scroll .caption,
500.table-scroll .state-reason {
501  white-space: normal;
502}
503.table-scroll .path-summary {
504  max-width: 100%;
505}
506.table-scroll .status-dot {
507  white-space: normal;
508}
509.table-work th:nth-child(1) {
510  width: 23%;
511}
512.table-work th:nth-child(2) {
513  width: 17%;
514}
515.table-work th:nth-child(3) {
516  width: 15%;
517}
518.table-work th:nth-child(4) {
519  width: 17%;
520}
521.table-work th:nth-child(5) {
522  width: 18%;
523}
524.table-work th:nth-child(6) {
525  width: 10%;
526}
527.table-review th:nth-child(1) {
528  width: 13%;
529}
530.table-review th:nth-child(2) {
531  width: 20%;
532}
533.table-review th:nth-child(3) {
534  width: 12%;
535}
536.table-review th:nth-child(4) {
537  width: 17%;
538}
539.table-review th:nth-child(5) {
540  width: 15%;
541}
542.table-review th:nth-child(6) {
543  width: 11%;
544}
545.table-review th:nth-child(7) {
546  width: 12%;
547}
548.table-agents th:nth-child(1) {
549  width: 19%;
550}
551.table-agents th:nth-child(2) {
552  width: 23%;
553}
554.table-agents th:nth-child(3) {
555  width: 28%;
556}
557.table-agents th:nth-child(4) {
558  width: 13%;
559}
560.table-agents th:nth-child(5) {
561  width: 17%;
562}
563.folded {
564  display: none;
565}
566/* Frame width is authoritative; also fold when the docked panel narrows the pane. */
567@container (max-width: 819px) {
568  .folded {
569    display: block;
570  }
571  .column-fork,
572  .column-receipts,
573  .column-requested,
574  .column-claimed {
575    display: none;
576  }
577  .table-work th:nth-child(1) {
578    width: 27%;
579  }
580  .table-work th:nth-child(2) {
581    width: 24%;
582  }
583  .table-work th:nth-child(3) {
584    width: 22%;
585  }
586  .table-work th:nth-child(5) {
587    width: 27%;
588  }
589  .table-review th:nth-child(1) {
590    width: 16%;
591  }
592  .table-review th:nth-child(2) {
593    width: 24%;
594  }
595  .table-review th:nth-child(3) {
596    width: 15%;
597  }
598  .table-review th:nth-child(4) {
599    width: 29%;
600  }
601  .table-review th:nth-child(7) {
602    width: 16%;
603  }
604  .table-agents th:nth-child(1) {
605    width: 29%;
606  }
607  .table-agents th:nth-child(3) {
608    width: 34%;
609  }
610  .table-agents th:nth-child(4) {
611    width: 16%;
612  }
613  .table-agents th:nth-child(5) {
614    width: 21%;
615  }
616}
617@media (max-width: 899px) {
618  .folded {
619    display: block;
620  }
621  .column-fork,
622  .column-receipts,
623  .column-requested,
624  .column-claimed {
625    display: none;
626  }
627}
628
629.receipt-cell {
630  display: flex;
631  flex-direction: column;
632  align-items: flex-start;
633  text-align: left;
634  gap: calc(var(--spacing) * 1);
635  max-width: 100%;
636  white-space: normal;
637  font-variant-numeric: tabular-nums;
638}
639.receipt-cell:hover {
640  text-decoration: underline;
641}
642.receipt-check {
643  padding-block: calc(var(--spacing) * 3);
644  border-bottom: 1px solid var(--color-kumo-line);
645}
646.receipt-logs {
647  max-height: 24rem;
648  overflow: auto;
649  white-space: pre;
650  font-family: var(--font-mono);
651  background: var(--color-kumo-recessed);
652  padding: calc(var(--spacing) * 2);
653  margin-block: calc(var(--spacing) * 3);
654}
655.tabular {
656  font-variant-numeric: tabular-nums;
657}
658
659.receipt-log-toggle {
660  margin-top: calc(var(--spacing) * 2);
661}
662.receipt-link {
663  display: block;
664  padding-inline: 0;
665}
666.receipt-error-line {
667  display: flex;
668  align-items: flex-start;
669  gap: calc(var(--spacing) * 2);
670}
671.receipt-error-line svg {
672  flex-shrink: 0;
673  color: var(--color-kumo-warning);
674}
675.receipt-failure > .receipt-link {
676  margin-inline-start: calc(var(--spacing) * 7);
677}
678
679/* History uses the queue's 14px table and underlined packet controls. */
680.table-receipt-history th:nth-child(1) { width: 18%; }
681.table-receipt-history th:nth-child(2) { width: 12%; }
682.table-receipt-history th:nth-child(3) { width: 16%; }
683.table-receipt-history th:nth-child(4) { width: 20%; }
684.table-receipt-history th:nth-child(5) { width: 18%; }
685.table-receipt-history th:nth-child(6) { width: 16%; }
686.receipt-history-row { cursor: pointer; }
687.receipt-history-link {
688  max-width: 100%;
689  overflow: hidden;
690  text-overflow: ellipsis;
691  white-space: nowrap;
692}
693.last-promotion-sha {
694  font-family: var(--font-mono);
695}
696.promotion-receipt {
697  display: inline-flex;
698  vertical-align: baseline;
699  padding: 0;
700  height: auto;
701  text-decoration: underline;
702  text-underline-offset: 3px;
703}
704/* Retain the accepted stacked history below 900px without widening the frame. */
705@media (max-width: 899px) {
706  .table-receipt-history thead { display: none; }
707  .table-receipt-history tbody { display: block; }
708  .table-receipt-history .receipt-history-row {
709    display: grid;
710    grid-template-columns: minmax(0, 1fr) auto auto;
711    padding-block: calc(var(--spacing) * 2);
712  }
713  .table-receipt-history td { min-width: 0; }
714}
715@media (max-width: 639px) {
716  .table-receipt-history .receipt-history-row {
717    grid-template-columns: minmax(0, 1fr) auto;
718  }
719}
720
721/* FH-040: detail occupies the content pane; only diff wells may scroll sideways. */
722.review-detail { min-width: 0; display: grid; gap: calc(var(--spacing) * 6); }
723.review-header { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(var(--spacing) * 4); }
724.review-header > div { min-width: 0; }
725.review-header code, .review-detail p { overflow-wrap: anywhere; }
726.review-milestones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--spacing) * 4); }
727.review-milestone { min-width: 0; padding: calc(var(--spacing) * 4); border: 1px solid var(--color-kumo-line); border-radius: var(--radius-lg); }
728.review-evidence { display: block; text-align: left; margin-top: calc(var(--spacing) * 2); text-decoration: underline; overflow-wrap: anywhere; }
729.status-neutral > span:first-child { background: var(--text-color-kumo-subtle); }
730.returned-reason { border-left: 2px solid var(--color-kumo-danger); padding: calc(var(--spacing) * 4); background: var(--color-kumo-recessed); border-radius: var(--radius-lg); }
731.plain-text { white-space: pre-wrap; }
732.returned-preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
733.return-dialog textarea { width: 100%; min-height: calc(var(--spacing) * 28); padding: calc(var(--spacing) * 2); border: 1px solid var(--color-kumo-ring); background: var(--color-kumo-control); border-radius: var(--radius-lg); color: var(--text-color-kumo-default); resize: vertical; }
734.review-file-toggle { display: flex; align-items: center; width: 100%; gap: calc(var(--spacing) * 3); padding: calc(var(--spacing) * 3); text-align: left; border-bottom: 1px solid var(--color-kumo-line); }
735.review-file-toggle:hover { background: var(--color-kumo-tint); }
736.file-status { flex: 0 0 calc(var(--spacing) * 18); }
737.review-file-path { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; direction: rtl; text-align: left; }
738.review-diff { max-width: 100%; max-height: 480px; overflow: auto; background: var(--color-kumo-recessed); border-radius: var(--radius-lg); padding: calc(var(--spacing) * 3); }
739.review-diff pre { font-family: var(--font-mono); font-size: var(--text-xs); white-space: pre; width: max-content; min-width: 100%; color: var(--text-color-kumo-default); }
740.diff-line { display: block; }
741.diff-added { background: var(--color-kumo-success-tint); }
742.diff-removed { background: var(--color-kumo-danger-tint); }
743.diff-hunk { color: var(--text-color-kumo-subtle); }
744.review-acceptance { list-style: disc; padding-left: calc(var(--spacing) * 5); }
745.review-commit { padding-block: calc(var(--spacing) * 2); border-bottom: 1px solid var(--color-kumo-line); }
746.review-commit-caption { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing); }
747.review-claimed-paths { min-width: 0; }
748.review-claimed-paths code { overflow-wrap: anywhere; }
749.review-skeleton { height: calc(var(--spacing) * 12); max-width: 60%; background: var(--color-kumo-recessed); border-radius: var(--radius-lg); }
750@media (max-width: 639px) {
751  .review-header { flex-direction: column; }
752  .review-milestones { grid-template-columns: minmax(0, 1fr); }
753}
754/* Grid children must shrink below a unified diff's intrinsic line width. */
755.review-detail > *, .review-file { min-width: 0; }
756.review-diff { width: 100%; box-sizing: border-box; }
757
758/* FH-043: full-row evidence routes wrap rather than clipping Git/path copy. */
759.needs-you-heading { display: flex; align-items: center; gap: calc(var(--spacing) * 2); }
760.needs-you-heading h2 { margin: 0; }
761.needs-you-list { list-style: none; padding: 0; margin-top: calc(var(--spacing) * 3); }
762.needs-you-list li { animation: activity-appear 150ms ease-out; }
763.needs-you-list li + li { border-top: 1px solid var(--color-kumo-line); }
764.needs-you-row { display: flex; align-items: flex-start; gap: calc(var(--spacing) * 3); width: 100%; padding: calc(var(--spacing) * 3) calc(var(--spacing) * 2); text-align: left; border-radius: var(--radius-lg); }
765.needs-you-row:hover { background: var(--color-kumo-tint); }
766.needs-you-icon { flex-shrink: 0; margin-top: calc(var(--spacing) * 0.5); color: var(--text-color-kumo-subtle); }
767.needs-you-copy { display: grid; gap: var(--spacing); min-width: 0; flex: 1; overflow-wrap: anywhere; }
768.needs-you-title { font-size: var(--text-sm); line-height: var(--text-sm--line-height); font-weight: 600; }
769.needs-you-open { display: flex; align-items: center; gap: var(--spacing); flex-shrink: 0; font-size: var(--text-xs); color: var(--text-color-kumo-subtle); padding-top: var(--spacing); }
770.needs-you-empty { display: flex; align-items: center; gap: calc(var(--spacing) * 2); margin-bottom: 0; }
771
772/* Keep the panel action aligned while conflict copy gets a full line. */
773.archive-heading {
774  flex-wrap: wrap;
775}
776.archive-heading h3 {
777  flex: 1 1 10rem;
778  margin: 0;
779}
780.archive-heading > button {
781  flex-shrink: 0;
782}
783.archive-heading > .receipt-error-line {
784  flex-basis: 100%;
785}
786
787/* Keep the agent handoff action readable when the frame is narrow. */
788.agent-notice > div { flex-wrap: wrap; }
789.agent-notice > div > :first-child { flex: 1 1 20rem; }
790.agent-notice > div > :last-child { min-width: 0; max-width: 100%; }
791.owner-link-action { min-width: 0; max-width: 100%; }
792.owner-link-fallback { min-width: 0; overflow-wrap: anywhere; }
793.owner-link-fallback code { user-select: text; }
794
795/* FH-049 history stays quiet; only unresolved collisions use warning banners. */
796.collision-heading { font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
797.collision-history { display: grid; gap: calc(var(--spacing) * 3); }
798.collision-row { min-width: 0; overflow-wrap: anywhere; }
799.collision-row .collision-copy .path-summary { max-width: 100%; }
800.collision-dialog .collision-copy .path-summary { max-width: min(20rem, 100%); }
801
802.collision-highlight:focus-within { background: var(--color-kumo-tint); }
803.collision-quick-reasons { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 2); margin-block: calc(var(--spacing) * 3); }
804.collision-quick-reasons button { max-width: 100%; height: auto; white-space: normal; text-align: left; justify-content: flex-start; }
805.collision-evidence { margin-block: calc(var(--spacing) * 3); }
806
807.collision-dialog { max-height: calc(100dvh - 5rem); overflow-y: auto; }
808
809/* Stack actions so a narrow warning keeps its collision evidence readable. */
810@media (max-width: 639px) {
811  .collision-banner > div { flex-direction: column; align-items: flex-start; }
812  .collision-banner .collision-copy .path-summary { max-width: 100%; }
813}
814
815/* Shared FH-055/FH-057 identity: silk means agent; shape and state words mean outcome. */
816.race-saddlecloth {
817  display: inline-flex;
818  min-width: 24px;
819  width: max-content;
820  height: 24px;
821  flex: 0 0 auto;
822  padding-inline: 3px;
823  box-sizing: border-box;
824  white-space: nowrap;
825  font-variant-numeric: tabular-nums;
826  align-items: center;
827  justify-content: center;
828  border-radius: var(--radius-sm);
829  background: var(--lane-silk);
830  color: var(--race-cloth-ink);
831  font-size: 14px;
832  font-weight: 800;
833}
834.race-runner {
835  display: flex;
836  gap: 10px;
837  min-width: 0;
838  align-items: flex-start;
839}
840.race-runner-copy {
841  display: flex;
842  flex-direction: column;
843  min-width: 0;
844  gap: 4px;
845}
846.race-fork {
847  overflow: hidden;
848  text-overflow: ellipsis;
849  white-space: nowrap;
850}
851.lane-marker {
852  display: inline-flex;
853  align-items: center;
854  justify-content: center;
855  width: 16px;
856  height: 16px;
857  border: 2px solid var(--color-kumo-base);
858  border-radius: 50%;
859  box-sizing: border-box;
860  background: var(--lane-silk, var(--entrant-silk));
861  color: var(--lane-silk, var(--entrant-silk));
862  box-shadow: 0 0 0 1px var(--lane-silk, var(--entrant-silk));
863  font-size: 14px;
864  line-height: 1;
865}
866.lane-marker-review,
867.lane-marker-unreached {
868  background: var(--color-kumo-base);
869  border: 2px solid var(--lane-silk, var(--entrant-silk));
870  box-shadow: 0 0 0 2px var(--color-kumo-base);
871}
872.lane-marker-unreached {
873  border-color: var(--color-kumo-ring);
874}
875.lane-marker-approved {
876  background: var(--color-kumo-base);
877  box-shadow: 0 0 0 2px var(--color-kumo-base);
878  border: 0;
879  border-radius: 0;
880  font-size: 20px;
881}
882.lane-marker-passed,
883.lane-marker-failed,
884.lane-marker-interrupted {
885  width: 22px;
886  height: 22px;
887  color: var(--race-hurdle-ink);
888  font-size: 15px;
889  font-weight: 800;
890  box-shadow: 0 0 0 1px var(--color-kumo-ring);
891}
892.lane-marker-passed {
893  background: var(--color-kumo-success);
894}
895.lane-marker-failed {
896  background: var(--color-kumo-danger);
897}
898.lane-marker-interrupted {
899  background: var(--color-kumo-warning);
900}
901.lane-marker-promoted {
902  background: var(--color-kumo-success);
903  color: var(--color-kumo-success);
904}
905.fork-card {
906  width: 100%;
907  max-width: 100%;
908  min-width: 0;
909  box-sizing: border-box;
910}
911.fork-header {
912  display: flex;
913  justify-content: space-between;
914  gap: 16px;
915}
916.fork-header h2 {
917  margin: 0;
918}
919.fork-window {
920  text-align: right;
921}
922.fork-chips {
923  display: flex;
924  gap: 4px;
925  margin: 8px 0 12px;
926}
927.fork-window-chip[aria-pressed="true"] {
928  background: var(--color-kumo-tint);
929  color: var(--text-color-kumo-strong);
930  box-shadow: inset 0 0 0 1px var(--color-kumo-ring);
931  font-weight: 600;
932}
933.fork-picture {
934  display: grid;
935  grid-template-columns: 210px minmax(0, 1fr);
936  min-width: 0;
937}
938.fork-labels,
939.fork-plot {
940  position: relative;
941  min-width: 0;
942}
943.fork-plot {
944  overflow: clip;
945}
946.fork-plot svg {
947  position: absolute;
948  inset: 0;
949}
950.fork-main-label {
951  position: absolute;
952  top: 20px;
953}
954.fork-lane-label {
955  position: absolute;
956  left: 0;
957  width: 198px;
958  display: flex;
959  text-align: left;
960  gap: 8px;
961  align-items: center;
962}
963.fork-lane-label strong {
964  display: block;
965  font-weight: 600;
966  overflow: hidden;
967  text-overflow: ellipsis;
968  white-space: nowrap;
969  max-width: 156px;
970}
971.fork-lane-label code {
972  display: block;
973}
974.fork-state {
975  display: block;
976  color: var(--text-color-kumo-subtle);
977}
978.fork-state-success > span {
979  color: var(--text-color-kumo-success);
980}
981.fork-state-info > span {
982  color: var(--text-color-kumo-info);
983}
984.fork-state-danger > span {
985  color: var(--text-color-kumo-danger);
986}
987.fork-state-warning > span {
988  color: var(--text-color-kumo-warning);
989}
990.fork-state-brand > span {
991  color: var(--text-color-kumo-brand);
992}
993.fork-race-label {
994  position: absolute;
995  left: 0;
996  width: 205px;
997  text-decoration: underline;
998  overflow-wrap: anywhere;
999}
1000.fork-main-line {
1001  stroke: var(--text-color-kumo-strong);
1002  stroke-width: 3;
1003}
1004.lane-line,
1005.fork-lane-line {
1006  stroke: var(--lane-silk);
1007  stroke-width: 2;
1008  fill: none;
1009}
1010.fork-grid {
1011  stroke: var(--color-kumo-hairline, var(--color-kumo-line));
1012  stroke-width: 1;
1013}
1014.fork-race-bracket,
1015.fork-now-line {
1016  stroke: var(--text-color-kumo-subtle);
1017  stroke-width: 1;
1018  fill: none;
1019}
1020.fork-now {
1021  position: absolute;
1022  top: 0;
1023  transform: translateX(-50%);
1024}
1025.fork-tick {
1026  position: absolute;
1027  transform: translateX(-50%);
1028  white-space: nowrap;
1029}
1030.fork-main-mark,
1031.fork-event,
1032.fork-collision-ring {
1033  position: absolute;
1034}
1035.fork-mark-button {
1036  transform: translate(-50%, -50%);
1037  width: 24px;
1038  height: 24px;
1039  display: inline-flex;
1040  justify-content: center;
1041  align-items: center;
1042  z-index: 2;
1043}
1044.fork-main-mark .fork-mark-button {
1045  position: absolute;
1046}
1047.fork-commit-dot {
1048  width: 12px;
1049  height: 12px;
1050  border-radius: 50%;
1051  background: var(--text-color-kumo-strong);
1052  border: 2px solid var(--color-kumo-base);
1053  box-shadow: 0 0 0 1px var(--text-color-kumo-strong);
1054}
1055.fork-sha {
1056  position: absolute;
1057  top: -26px;
1058  transform: translateX(-50%);
1059  background: var(--color-kumo-base);
1060  padding: 0 3px;
1061  white-space: nowrap;
1062}
1063.fork-history {
1064  position: absolute;
1065  display: flex;
1066  align-items: baseline;
1067  gap: 8px;
1068  max-width: calc(100% - 12px);
1069  background: var(--color-kumo-base);
1070  padding-right: 4px;
1071  white-space: nowrap;
1072}
1073.fork-stub {
1074  color: inherit;
1075}
1076.fork-lead-in {
1077  stroke-dasharray: 3 4;
1078}
1079.fork-start {
1080  position: absolute;
1081  width: 24px;
1082  height: 16px;
1083  border-radius: 3px;
1084}
1085.fork-start:focus-visible {
1086  outline: 2px solid var(--color-kumo-ring);
1087}
1088.fork-earlier-events {
1089  color: var(--text-color-kumo-subtle);
1090  white-space: nowrap;
1091}
1092.fork-earlier {
1093  font-size: 10px;
1094}
1095.fork-collision {
1096  color: var(--color-kumo-danger);
1097}
1098.fork-collision.resolved {
1099  color: var(--color-kumo-ring);
1100}
1101.fork-collision-line {
1102  position: absolute;
1103  border-left: 1px dashed currentColor;
1104}
1105.fork-collision-ring {
1106  width: 20px;
1107  height: 20px;
1108  border: 1px solid currentColor;
1109  border-radius: 50%;
1110  background: var(--color-kumo-base);
1111  font-size: 12px;
1112}
1113.fork-collision-caption {
1114  position: absolute;
1115  color: var(--text-color-kumo-subtle);
1116  white-space: nowrap;
1117  background: var(--color-kumo-base);
1118  padding-inline: 4px;
1119}
1120.fork-collision-caption.right {
1121  margin-left: 16px;
1122}
1123.fork-collision-caption.left {
1124  margin-left: -16px;
1125  transform: translateX(-100%);
1126}
1127.fork-legend {
1128  border-top: 1px solid var(--color-kumo-line);
1129  padding-top: 12px;
1130}
1131.fork-disclosure {
1132  margin-top: 8px;
1133  text-decoration: underline;
1134  font-size: 12px;
1135}
1136.fork-table {
1137  max-width: 100%;
1138}
1139.fork-table table {
1140  width: 100%;
1141  table-layout: fixed;
1142  border-collapse: collapse;
1143  margin-top: 12px;
1144  font-size: 12px;
1145}
1146.fork-table th,
1147.fork-table td {
1148  text-align: left;
1149  vertical-align: top;
1150  padding: 8px 4px;
1151  border-bottom: 1px solid var(--color-kumo-line);
1152  overflow-wrap: anywhere;
1153}
1154.fork-table td .caption {
1155  display: block;
1156}
1157.fork-table th .race-saddlecloth {
1158  margin-right: 4px;
1159}
1160/* Unlike native closed details, this disclosure always leaves its facts in the accessibility tree. */
1161.fork-table-collapsed {
1162  position: absolute;
1163  width: 1px;
1164  height: 1px;
1165  padding: 0;
1166  margin: -1px;
1167  overflow: hidden;
1168  clip-path: inset(50%);
1169  white-space: nowrap;
1170}
1171.fork-event {
1172  animation: fork-arrival 150ms ease-out;
1173}
1174@keyframes fork-arrival {
1175  from {
1176    opacity: 0;
1177  }
1178  to {
1179    opacity: 1;
1180  }
1181}
1182@media (prefers-reduced-motion: reduce) {
1183  .fork-event {
1184    animation: none;
1185  }
1186}
1187@media (max-width: 639px) {
1188  .fork-picture {
1189    display: none;
1190  }
1191  .fork-window {
1192    display: none;
1193  }
1194  .fork-legend {
1195    display: none;
1196  }
1197  .fork-table,
1198  .fork-table-collapsed {
1199    position: static;
1200    width: auto;
1201    height: auto;
1202    margin: 0;
1203    clip-path: none;
1204    white-space: normal;
1205    overflow: visible;
1206  }
1207  .fork-table table,
1208  .fork-table thead,
1209  .fork-table tbody,
1210  .fork-table tr,
1211  .fork-table th,
1212  .fork-table td {
1213    display: block;
1214  }
1215  .fork-table thead {
1216    position: absolute;
1217    width: 1px;
1218    height: 1px;
1219    overflow: hidden;
1220    clip-path: inset(50%);
1221  }
1222  .fork-table tr {
1223    padding: 12px 0;
1224    border-bottom: 1px solid var(--color-kumo-line);
1225  }
1226  .fork-table th,
1227  .fork-table td {
1228    border: 0;
1229    padding: 4px 0;
1230  }
1231  .fork-table td::before {
1232    display: inline-block;
1233    width: 78px;
1234    color: var(--text-color-kumo-subtle);
1235  }
1236  .fork-table td:nth-child(2)::before {
1237    content: "Packet";
1238  }
1239  .fork-table td:nth-child(3)::before {
1240    content: "Claimed";
1241  }
1242  .fork-table td:nth-child(4)::before {
1243    content: "Pushes";
1244  }
1245  .fork-table td:nth-child(5)::before {
1246    content: "Review";
1247  }
1248  .fork-table td:nth-child(6)::before {
1249    content: "Checks";
1250  }
1251  .fork-table td:nth-child(7)::before {
1252    content: "Approved";
1253  }
1254  .fork-table td:nth-child(8)::before {
1255    content: "Promoted";
1256  }
1257}
1258@media (max-width: 639px) {
1259  .fork-table caption { display: block; text-align: left; padding-block: 12px; }
1260}
1261
1262.lane-connector { position: absolute; top: 29px; left: 50%; width: 100%; height: 2px; background: var(--lane-silk,var(--entrant-silk)); }
1263
1264/* FH-062 quantity gauges use semantic host colors and never encode work progress. */
1265.usage-figures, .usage-source, .budget-usage, .token-budget { display: inline-flex; flex-direction: column; gap: 3px; }
1266.usage-figure, .usage-source .usage-freshness, .usage-source .usage-model, .usage-missing { white-space: nowrap; }
1267.usage-split { display: flex; flex-wrap: wrap; gap: 0 4px; white-space: normal; }
1268.usage-split > span { white-space: nowrap; }
1269.usage-compact { font-size: 12px; }
1270.usage-compact .usage-figure:focus-visible { outline: 2px solid var(--color-kumo-ring); outline-offset: 2px; }
1271.token-budget { width: 200px; max-width: 100%; }
1272.token-budget meter { width: 100%; height: 5px; accent-color: var(--text-color-kumo-subtle); }
1273.token-budget-near { color: var(--text-color-kumo-warning); }
1274.token-budget-over { color: var(--text-color-kumo-danger); }
1275.token-budget-near meter { accent-color: var(--text-color-kumo-warning); }
1276.token-budget-over meter { accent-color: var(--text-color-kumo-danger); }
1277.token-budget meter::-webkit-meter-bar { background: var(--color-kumo-fill); border: 0; }
1278.token-budget meter::-webkit-meter-optimum-value { background: var(--text-color-kumo-subtle); }
1279.token-budget-near meter::-webkit-meter-optimum-value { background: var(--text-color-kumo-warning); }
1280.token-budget-over meter::-webkit-meter-optimum-value { background: var(--text-color-kumo-danger); }
1281.review-usage { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 8px; }
1282.review-usage > span:first-child { white-space: nowrap; }
1283.race-usage { margin-bottom: 24px; }
1284.race-usage table { width: 100%; border-collapse: collapse; }
1285.race-usage th, .race-usage td { padding: 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-kumo-line); }
1286.race-compare { min-width: 520px; }
1287.race-compare .caption { display: block; }
1288.race-compare .usage-source, .race-compare .status-dot { display: inline-flex; }
1289.race-usage h3 { margin-top: 20px; }
1290.column-tokens { min-width: 0; }
1291/* Existing tables allocated all width to their original columns. Reserve usage explicitly. */
1292.table-agents th:nth-child(1) { width: 17%; }
1293.table-agents th:nth-child(2) { width: 19%; }
1294.table-agents th:nth-child(3) { width: 22%; }
1295.table-agents th:nth-child(4) { width: 11%; }
1296.table-agents th:nth-child(5) { width: 9%; }
1297.table-agents th:nth-child(6) { width: 22%; }
1298.table-review:has(.column-tokens) th:nth-child(1) { width: 10%; }
1299.table-review:has(.column-tokens) th:nth-child(2) { width: 16%; }
1300.table-review:has(.column-tokens) th:nth-child(3) { width: 10%; }
1301.table-review:has(.column-tokens) th:nth-child(4) { width: 17%; }
1302.table-review:has(.column-tokens) th:nth-child(5) { width: 12%; }
1303.table-review:has(.column-tokens) th:nth-child(6) { width: 17%; }
1304.table-review:has(.column-tokens) th:nth-child(7) { width: 8%; }
1305.table-review:has(.column-tokens) th:nth-child(8) { width: 10%; }
1306@container (max-width: 819px) {
1307  .table-agents .column-tokens { display: none; }
1308  .table-agents th:nth-child(1) { width: 35%; }
1309  .table-agents th:nth-child(3) { width: 32%; }
1310  .table-agents th:nth-child(4) { width: 16%; }
1311  .table-agents th:nth-child(5) { width: 17%; }
1312
1313}
1314@media (max-width: 639px) {
1315  .table-agents .column-tokens { display: none; }
1316  .fork-table td:nth-child(9)::before { content: "Tokens"; }
1317
1318}
1319
1320/* FH-055: full-width recorded race lanes; silks are reviewed identity tokens. */
1321.race-shell .main-container {
1322  max-width: none;
1323}
1324.race-page {
1325  padding-block: calc(var(--spacing) * 2);
1326}
1327.race-page .heading-1 {
1328  font-size: 30px;
1329  line-height: 36px;
1330  font-weight: 600;
1331  margin: 0;
1332}
1333.race-header {
1334  display: flex;
1335  gap: 24px;
1336  justify-content: space-between;
1337  align-items: flex-start;
1338  margin-block: 24px 36px;
1339}
1340.race-flag {
1341  font-size: 18px;
1342  font-weight: 600;
1343  color: var(--text-color-kumo-strong);
1344}
1345.race-clock {
1346  display: grid;
1347  gap: 4px;
1348  min-width: 120px;
1349  text-align: right;
1350  font-variant-numeric: tabular-nums;
1351}
1352.race-clock strong {
1353  font-family: var(--font-mono);
1354  font-size: 24px;
1355  line-height: 32px;
1356}
1357.race-photo-caption {
1358  display: flex;
1359  align-items: center;
1360  flex-wrap: wrap;
1361  gap: 8px;
1362  margin-bottom: 24px;
1363}
1364.race-track,
1365.race-results table {
1366  width: 100%;
1367  border-collapse: collapse;
1368  table-layout: fixed;
1369}
1370.race-track thead th {
1371  padding: 12px 8px;
1372  font-size: 12px;
1373  font-weight: 500;
1374  text-align: center;
1375  color: var(--text-color-kumo-subtle);
1376  border-bottom: 1px solid var(--color-kumo-line);
1377}
1378.race-track thead th:first-child {
1379  width: 18%;
1380  text-align: left;
1381}
1382.race-track thead th:last-child {
1383  width: 18%;
1384  text-align: left;
1385}
1386.race-track tbody th {
1387  text-align: left;
1388  font-weight: 400;
1389  padding: 22px 12px 22px 0;
1390}
1391.race-track tbody tr {
1392  border-bottom: 1px solid var(--color-kumo-line);
1393}
1394.race-page .race-runner-copy strong {
1395  font-size: 14px;
1396  line-height: 20px;
1397  color: var(--text-color-kumo-strong);
1398  overflow-wrap: anywhere;
1399}
1400.race-step .lane-marker {
1401  position: relative;
1402  z-index: 1;
1403  vertical-align: middle;
1404  margin: 0;
1405}
1406.race-step .lane-marker-unreached { color: transparent; }
1407.race-mark-box {
1408  display: flex;
1409  align-items: center;
1410  justify-content: center;
1411  width: 24px;
1412  height: 24px;
1413  margin-inline: auto;
1414}
1415.race-step .lane-marker.reached { animation: race-arrival 150ms ease-out; }
1416.race-step {
1417  position: relative;
1418  text-align: center;
1419  vertical-align: top;
1420  padding: 20px 4px 24px;
1421}
1422.race-step > .lane-connector {
1423  position: absolute;
1424  height: 2px;
1425  background: var(--entrant-silk);
1426  right: 50%;
1427  left: auto;
1428  top: 31px;
1429  width: calc(var(--race-gap) * 100%);
1430  pointer-events: none;
1431}
1432.race-split {
1433  display: flex;
1434  flex-direction: column;
1435  gap: 2px;
1436  position: relative;
1437  margin-top: 12px;
1438  color: var(--text-color-kumo-subtle);
1439  font-variant-numeric: tabular-nums;
1440}
1441.race-split time {
1442  white-space: nowrap;
1443}
1444.race-finish {
1445  border-left: 2px solid var(--text-color-kumo-strong);
1446}
1447.race-result {
1448  vertical-align: top;
1449  padding: 20px 12px;
1450}
1451.race-result > * {
1452  display: block;
1453  margin-bottom: 6px;
1454}
1455.race-result > strong {
1456  font-weight: 500;
1457}
1458.race-result > .race-place {
1459  display: inline-flex;
1460}
1461.race-phone-label {
1462  display: none;
1463}
1464.race-hurdle-button {
1465  position: relative;
1466  z-index: 1;
1467  display: inline-flex;
1468  width: 24px;
1469  height: 24px;
1470  align-items: center;
1471  justify-content: center;
1472  padding: 0;
1473  background: none;
1474  border: none;
1475}
1476.race-empty {
1477  text-align: center;
1478  padding-block: 48px;
1479  color: var(--text-color-kumo-subtle);
1480}
1481.race-results {
1482  margin-top: 40px;
1483}
1484.race-results th,
1485.race-results td {
1486  padding: 16px 12px;
1487  text-align: left;
1488  border-bottom: 1px solid var(--color-kumo-line);
1489  font-weight: 400;
1490}
1491.race-results thead th {
1492  font-size: 12px;
1493  color: var(--text-color-kumo-subtle);
1494}
1495.race-results th:first-child {
1496  width: 8%;
1497}
1498.race-results th:nth-child(2) {
1499  width: 28%;
1500}
1501.race-photo {
1502  display: grid;
1503  grid-template-columns: 1fr 2fr;
1504  gap: 32px;
1505  margin-block: 40px 24px;
1506  padding: 24px;
1507  background: var(--color-kumo-elevated);
1508  border: 1px solid var(--color-kumo-line);
1509  border-radius: var(--radius-lg);
1510}
1511.race-photo-events > * {
1512  padding-block: 12px;
1513  border-bottom: 1px solid var(--color-kumo-line);
1514  margin: 0;
1515}
1516.race-photo-events > :last-child {
1517  border-bottom: none;
1518}
1519.race-step .lane-marker.reached ~ .race-split {
1520  animation: race-arrival 150ms ease-out;
1521}
1522@keyframes race-arrival {
1523  from {
1524    opacity: 0;
1525  }
1526  to {
1527    opacity: 1;
1528  }
1529}
1530@media (prefers-reduced-motion: reduce) {
1531  .race-step .lane-marker.reached,
1532  .race-step .lane-marker.reached ~ .race-split {
1533    animation: none;
1534  }
1535}
1536@media (max-width: 1023px) {
1537  .race-header {
1538    flex-direction: column;
1539    margin-bottom: 24px;
1540    gap: 12px;
1541  }
1542  .race-page .heading-1 {
1543    font-size: 24px;
1544    line-height: 32px;
1545  }
1546  .race-clock {
1547    display: flex;
1548    align-items: baseline;
1549    gap: 8px;
1550    text-align: left;
1551    flex-wrap: wrap;
1552  }
1553  .race-clock strong {
1554    font-size: 18px;
1555  }
1556  .race-track,
1557  .race-track tbody,
1558  .race-results table,
1559  .race-results tbody {
1560    display: block;
1561  }
1562  .race-track thead,
1563  .race-results thead {
1564    position: absolute;
1565    width: 1px;
1566    height: 1px;
1567    overflow: hidden;
1568    clip-path: inset(50%);
1569  }
1570  .race-track-empty thead { position: static; width: auto; height: auto; clip-path: none; }
1571  .race-track-empty thead tr { display: flex; flex-wrap: wrap; gap: 12px; }
1572  .race-track-empty thead th { padding: 8px 0; }
1573  .race-track-empty thead th:first-child, .race-track-empty thead th:last-child { display: none; }
1574  .race-track tbody tr {
1575    display: block;
1576    border: 1px solid var(--color-kumo-line);
1577    border-radius: var(--radius-lg);
1578    margin-bottom: 16px;
1579    padding: 16px;
1580  }
1581  .race-track tbody th {
1582    display: block;
1583    padding: 0 0 20px;
1584  }
1585  .race-step {
1586    display: grid;
1587    grid-template-columns: 24px minmax(0, 1fr) auto;
1588    text-align: left;
1589    align-items: center;
1590    gap: 8px;
1591    padding: 12px 0;
1592    min-height: 48px;
1593  }
1594  .race-mark-box {
1595    grid-row: 1;
1596    grid-column: 1;
1597    justify-self: center;
1598    margin: 0;
1599  }
1600  .race-phone-label {
1601    display: block;
1602    grid-column: 2;
1603    grid-row: 1;
1604    font-size: 13px;
1605  }
1606  .race-split {
1607    grid-column: 3;
1608    grid-row: 1;
1609    margin: 0;
1610    text-align: right;
1611  }
1612  .race-step > .lane-connector {
1613    height: calc(var(--race-gap) * 100%);
1614    width: 2px;
1615    left: 11px;
1616    right: auto;
1617    top: auto;
1618    bottom: 50%;
1619  }
1620  .race-finish {
1621    border-left: none;
1622    border-bottom: 2px solid var(--text-color-kumo-strong);
1623  }
1624  .race-result {
1625    display: block;
1626    padding: 16px 0 0;
1627  }
1628  .race-results tr {
1629    display: block;
1630    border-bottom: 1px solid var(--color-kumo-line);
1631    padding-block: 12px;
1632  }
1633  .race-results th,
1634  .race-results td {
1635    display: block;
1636    padding: 8px 0;
1637    width: auto;
1638    border: none;
1639  }
1640  .race-results tbody th {
1641    width: auto;
1642  }
1643  .race-results tbody th:nth-child(2) { width: auto; }
1644  .race-results .race-runner { width: 100%; }
1645  .race-results .race-runner-copy { flex: 1; }
1646  .race-results td {
1647    display: flex;
1648    justify-content: space-between;
1649    gap: 16px;
1650  }
1651  .race-results td::before {
1652    content: attr(data-label);
1653    color: var(--text-color-kumo-subtle);
1654  }
1655  .race-photo {
1656    grid-template-columns: 1fr;
1657    gap: 16px;
1658    padding: 16px;
1659  }
1660}
1661
1662/* Usage is an extra facts column; FH-055's milestone geometry and glyph rules stay authoritative. */
1663.race-track thead th:first-child, .race-track thead th:last-child { width: 16%; }
1664.race-track thead .race-tokens-heading { width: 220px; text-align: left; }
1665.race-track .race-tokens { padding: 20px 8px; vertical-align: top; text-align: left; }
1666@media (max-width: 639px) {
1667  .race-track .race-tokens { display: block; padding: 16px 0; }
1668  .race-tokens > .race-phone-label { margin-bottom: 8px; }
1669  .race-track-empty thead .race-tokens-heading { display: none; }
1670}
1671
1672/* Dense usage facts fit the pane with the activity panel docked. */
1673.table-review .usage-source .usage-figure,
1674.table-review .usage-missing { white-space: nowrap; }
1675.table-review .usage-promotion-caption { white-space: normal; }
1676@container (max-width: 999px) {
1677  .table-review:has(.column-tokens) .column-receipts,
1678  .table-review:has(.column-tokens) .column-requested { display: none; }
1679  .table-review:has(.column-tokens) .folded { display: block; }
1680  .table-review:has(.column-tokens) th:nth-child(1) { width: 14%; }
1681  .table-review:has(.column-tokens) th:nth-child(2) { width: 18%; }
1682  .table-review:has(.column-tokens) th:nth-child(3) { width: 12%; }
1683  .table-review:has(.column-tokens) th:nth-child(4) { width: 21%; }
1684  .table-review:has(.column-tokens) th:nth-child(6) { width: 15%; }
1685  .table-review:has(.column-tokens) th:nth-child(8) { width: 20%; }
1686}
1687.fork-table:has(.usage-compact) th:nth-child(1) { width: 12%; }
1688.fork-table:has(.usage-compact) th:nth-child(2) { width: 12%; }
1689.fork-table:has(.usage-compact) th:nth-child(3) { width: 9%; }
1690.fork-table:has(.usage-compact) th:nth-child(4) { width: 11%; }
1691.fork-table:has(.usage-compact) th:nth-child(5) { width: 10%; }
1692.fork-table:has(.usage-compact) th:nth-child(6) { width: 12%; }
1693.fork-table:has(.usage-compact) th:nth-child(7) { width: 9%; }
1694.fork-table:has(.usage-compact) th:nth-child(8) { width: 9%; }
1695.fork-table:has(.usage-compact) th:nth-child(9) { width: 16%; }
1696.compare-entrant { display: none; }
1697.compare-value { display: block; }
1698@media (max-width: 639px) {
1699  .race-usage .table-scroll { overflow: visible; }
1700  .race-compare { min-width: 0; }
1701  .race-compare, .race-compare tbody, .race-compare tr { display: block; }
1702  .race-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
1703  .race-compare tr { padding-block: 12px; border-bottom: 1px solid var(--color-kumo-line); }
1704  .race-compare th { display: block; padding: 0 0 8px; border: 0; }
1705  .race-compare td { display: grid; grid-template-columns: minmax(88px, 1fr) minmax(0, 2fr); gap: 8px; padding: 8px 0; border: 0; }
1706  .compare-entrant { display: flex; gap: 6px; align-items: flex-start; min-width: 0; }
1707  .compare-entrant > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
1708  .compare-entrant .race-saddlecloth { flex: 0 0 auto; min-width: 22px; height: 22px; font-size: 12px; }
1709  .compare-value { min-width: 0; }
1710  .race-compare .usage-source, .race-compare .token-budget-state, .race-compare .usage-freshness { font-size: 12px; }
1711}
1712
1713/* FH-063c advice stays below the factual track, with existing host tokens. */
1714.race-page { isolation: isolate; } /* Keep positioned lane marks beneath the shared dialog portal. */
1715.judge-advice { border: 1px solid var(--color-kumo-line); background: var(--color-kumo-base); border-radius: var(--radius-lg); padding: calc(var(--spacing) * 4); display: grid; gap: calc(var(--spacing) * 3); margin-block: calc(var(--spacing) * 4); }
1716.judge-advice h4, .judge-pick { display: flex; align-items: center; gap: calc(var(--spacing) * 2); }
1717.judge-advice h4, .judge-advice p { margin: 0; }
1718.judge-pick { width: fit-content; margin-block: calc(var(--spacing) * 2); }
1719.judge-forecast, .judge-forecast > span, .judge-ranking li > div { display: flex; align-items: center; gap: calc(var(--spacing) * 3); }
1720.judge-forecast { flex-wrap: wrap; }
1721.judge-ranking { list-style: none; padding: 0; margin: 0; display: grid; gap: calc(var(--spacing) * 3); }
1722.judge-ranking li, .judge-ranking strong { min-width: 0; overflow-wrap: anywhere; }
1723.judge-rationale { border-left: 2px solid var(--color-kumo-line); padding-left: calc(var(--spacing) * 4); margin: 0; }
1724.judge-rationale p { white-space: pre-wrap; overflow-wrap: anywhere; }
1725.judge-rationale footer { margin-top: calc(var(--spacing) * 2); }
1726.judge-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
1727.judge-action { display: flex; align-items: center; gap: calc(var(--spacing) * 3); flex-wrap: wrap; }
1728@media (prefers-reduced-motion: no-preference) { .judge-advice { animation: judge-advice-in 150ms ease-out; } }
1729@keyframes judge-advice-in { from { opacity: 0; } to { opacity: 1; } }
1730@media (max-width: 639px) { .judge-action { flex-direction: column; align-items: stretch; } .judge-action > button { width: 100%; } }
1731
1732/* Freshness uses the existing tab gutter, leaving populated content in place. */
1733.tab-gutter {
1734  display: flex;
1735  align-items: center;
1736  justify-content: space-between;
1737  gap: calc(var(--spacing) * 2);
1738  flex-wrap: wrap;
1739}
1740.freshness-stamp {
1741  margin-left: auto;
1742  display: flex;
1743  align-items: center;
1744  gap: calc(var(--spacing) * 2);
1745}
1746.write-hint {
1747  display: inline-flex;
1748  align-items: center;
1749}
1750/* First-run guidance reuses the Overview clipboard control without duplicating command text. */
1751.first-run-command {
1752  display: flex;
1753  align-items: center;
1754  gap: calc(var(--spacing) * 3);
1755  width: 100%;
1756  max-width: 50rem;
1757  min-width: 0;
1758}
1759.first-run-command code {
1760  flex: 1;
1761  min-width: 0;
1762  white-space: pre-wrap;
1763  text-align: left;
1764}
1765.first-run-copy {
1766  flex-shrink: 0;
1767}
1768.first-run-copy > span:first-child {
1769  display: none;
1770}
1771