@import "@cloudflare/kumo/styles";
@import "tailwindcss";
@source "../node_modules/@cloudflare/kumo/dist/**/*.{js,jsx,ts,tsx}";
@custom-variant dark (&:where([data-mode="dark"], [data-mode="dark"] *));

/* Palette, fonts and radii are the reviewed host tokens applied by theme.ts. */
@theme {
  --text-xs: 0.75rem;
  --text-xs--line-height: 1rem;
  --text-sm: 0.875rem;
  --text-sm--line-height: 1.25rem;
  --text-base: 1rem;
  --text-base--line-height: 1.5rem;
  --text-lg: 1.125rem;
  --text-lg--line-height: 1.75rem;
  --layout-content-wide: 64rem;
  --layout-activity-panel: 320px;
  --default-transition-duration: 150ms;
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
}
html,
body,
#dashboard,
#sidebar {
  margin: 0;
  min-height: 100%;
}
body {
  margin: 0 !important;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  background: var(--color-kumo-base);
  color: var(--text-color-kumo-default);
}
code {
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}
button:not(:disabled),
summary {
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--color-kumo-focus);
  outline-offset: 3px;
}
::selection {
  background: var(--color-selection-bg);
  color: var(--color-selection-text);
}
[hidden] {
  display: none !important;
}
.app-shell {
  display: flex;
  min-height: 100dvh;
}
.main-pane {
  min-width: 0;
  flex: 1;
  container-type: inline-size;
}
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 6) calc(var(--spacing) * 3) calc(var(--spacing) * 6);
}
.page-title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.page-description {
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -0.25px;
  color: var(--text-color-kumo-subtle);
  margin-top: calc(var(--spacing) * 2);
}
h2,
h3 {
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  font-weight: 600;
  color: var(--text-color-kumo-strong);
}
h2 {
  margin-bottom: calc(var(--spacing) * 4);
}
p {
  margin-block: calc(var(--spacing) * 2);
}
.tab-gutter {
  padding-inline: calc(var(--spacing) * 3);
}
.tab-label,
.actions {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}
.actions {
  flex-wrap: wrap;
}
.content {
  padding: calc(var(--spacing) * 6) calc(var(--spacing) * 3);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 6);
}
label {
  display: block;
  margin-bottom: calc(var(--spacing) * 1);
}
input,
select {
  color: var(--text-color-kumo-default);
  background: var(--color-kumo-control);
  border: 1px solid var(--color-kumo-ring);
  border-radius: var(--radius-lg);
  padding: calc(var(--spacing) * 2);
}
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--spacing) * 4);
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2);
}
.section-heading h2 {
  margin: 0;
}
.table-scroll {
  max-width: 100%;
  overflow: auto;
}
.table-scroll td {
  vertical-align: middle;
  font-size: var(--text-sm);
}
.table-scroll tr:hover {
  background: var(--color-kumo-tint);
}
.selected-row {
  background: var(--color-kumo-fill);
}
.receipt {
  margin-block: calc(var(--spacing) * 3);
}
/* FH-078 shares status tokens and identity silks with Work and the fork graph. */
.agent-status-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.agent-status-name .race-saddlecloth { flex: 0 0 auto; min-width: 24px; height: 24px; font-size: 12px; }
.table-agent-status { overflow-x: auto; }
.table-agent-status table { min-width: var(--agent-table-min-width, 0); width: 100%; }
/* Outrank legacy positional widths while retaining the Agents integration hook. */
.table-agents.table-agent-status .column-agent { width: var(--agent-name-width, 19%); }
.table-agents.table-agent-status .column-status { width: var(--agent-status-width, 20%); }
.table-agents.table-agent-status .column-packet { width: var(--agent-packet-width, 10%); }
.table-agents.table-agent-status .column-last-push { width: var(--agent-push-width, 14%); }
.table-agents.table-agent-status .column-waiting-on { width: var(--agent-waiting-width, 17%); }
.table-agents.table-agent-status .column-tokens { width: 20%; }
.table-agent-status .column-packet .caption { display: block; }
.table-agent-status .agent-packet-link { display: block; width: 100%; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.agent-last-push-stacked > code, .agent-last-push-stacked > time { display: block; }
/* RV-rt3-1: the no-push placeholder wraps inside its narrow column instead of painting over the next one. */
.table-agent-status .agent-missing-push { white-space: normal; overflow-wrap: break-word; }
/* Match the existing fold boundaries for both active and disclosed idle rows. */
@container (max-width: 819px) {
  .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%; }
  .table-agents.table-agent-status .column-tokens, .table-agent-status .agent-fork-caption { display: none; }
}
@media (max-width: 899px) {
  .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%; }
  .table-agents.table-agent-status .column-tokens, .table-agent-status .agent-fork-caption { display: none; }
}
.resume-card { margin-bottom: 16px; }
.resume-card dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; }
.resume-card dt { color: var(--text-color-kumo-subtle); }
.resume-card dd { margin: 0; min-width: 0; }
/* FH-081 folds metadata rather than imposing a wider race-list table. */
.table-races table { width: 100%; min-width: 0; }
.table-races th, .table-races td { white-space: normal; overflow-wrap: anywhere; }
.table-races .race-list-column-0 { width: var(--race-list-title-width, 25%); }
.table-races .race-list-column-1 { width: var(--race-list-status-width, 12%); }
.table-races .race-list-column-2 { width: var(--race-list-entrants-width, 20%); }
.table-races .race-list-column-3 { width: var(--race-list-winner-width, 17%); }
.table-races .race-list-column-4 { width: 16%; }
.table-races .race-list-column-5 { width: 10%; }
.table-races td > .caption:not(.folded), .table-races .folded > span { display: block; }
/* RV-rt3-2: Work's folded race caption lists one claim per line, as the Races table does. */
#packets .folded > span { display: block; }
.race-list-runner { display: flex; align-items: center; gap: 8px; min-width: 0; }
.race-list-name { min-width: 0; overflow-wrap: anywhere; }
.race-list-runner .race-saddlecloth { flex: 0 0 24px; min-width: 24px; width: 24px; height: 24px; font-size: 12px; }
.race-list-entrant + .race-list-entrant { margin-top: 8px; }
.race-list-entrant > .caption { display: block; padding-left: 32px; }
.table-races .race-list-link { white-space: normal; overflow-wrap: anywhere; }
@container (max-width: 819px) {
  .table-races { --race-list-title-width: 30%; --race-list-status-width: 17%; --race-list-entrants-width: 28%; --race-list-winner-width: 25%; }
  .table-races .race-list-column-4, .table-races .race-list-column-5 { display: none; }
}
@media (max-width: 899px) {
  .table-races { --race-list-title-width: 30%; --race-list-status-width: 17%; --race-list-entrants-width: 28%; --race-list-winner-width: 25%; }
  .table-races .race-list-column-4, .table-races .race-list-column-5 { display: none; }
}
.caption {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}
.muted,
footer {
  color: var(--text-color-kumo-subtle);
}
footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 3);
  font-size: var(--text-xs);
}
.status-dot > span:first-child {
  background: var(--status-color);
}
.status-info {
  --status-color: var(--color-kumo-info);
}
.status-brand {
  --status-color: var(--color-kumo-brand);
}
.status-success {
  --status-color: var(--color-kumo-success);
}
.status-warning {
  --status-color: var(--color-kumo-warning);
}
.status-danger {
  --status-color: var(--color-kumo-danger);
}
.activity-panel {
  width: var(--layout-activity-panel);
  flex: 0 0 var(--layout-activity-panel);
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: auto;
  background: var(--color-kumo-elevated);
  border-left: 1px solid var(--color-kumo-line);
  padding: calc(var(--spacing) * 4);
}
.activity {
  border-bottom: 1px solid var(--color-kumo-line);
  padding-block: calc(var(--spacing) * 4);
  animation: activity-appear var(--default-transition-duration) var(--ease-out-strong);
}
@keyframes activity-appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (min-width: 640px) {
  .page-header {
    padding: calc(var(--spacing) * 10) calc(var(--spacing) * 10) calc(var(--spacing) * 6);
  }
  .tab-gutter {
    padding-inline: calc(var(--spacing) * 10);
  }
  .content {
    padding-inline: calc(var(--spacing) * 10);
  }
}
@media (max-width: 1023px) {
  .activity-panel {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 20;
    width: min(var(--layout-activity-panel), 92vw);
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    box-shadow: var(--themed-floating-shadow);
  }
}
@media (max-width: 639px) {
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-header {
    flex-wrap: wrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.activity-drawer {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  /* Tailwind 4 translates dialogs with the independent translate property. */
  translate: none !important;
  /* The CSS optimizer may fold translate into transform; clear Tailwind's inputs too. */
  --tw-translate-x: 0 !important;
  --tw-translate-y: 0 !important;
  width: min(var(--layout-activity-panel), 92vw) !important;
  min-width: 0 !important;
  max-height: 100dvh !important;
  height: 100dvh;
  overflow: auto;
  background: var(--color-kumo-elevated);
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  box-shadow: var(--themed-floating-shadow);
  padding: calc(var(--spacing) * 4);
}

/* Header, tabs and content share a single centered host frame. */
.main-container {
  max-width: var(--layout-content-wide);
  margin-inline: auto;
}
.view-stack {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
}
#view-work {
  gap: calc(var(--spacing) * 6);
}
.blockers {
  display: grid;
  gap: calc(var(--spacing) * 4);
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--spacing) * 4);
  margin-top: calc(var(--spacing) * 6);
}
.promotion-dialog > div {
  min-width: 0;
}
.truncated-code {
  display: block;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
}
.path-summary {
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--spacing) * 1.5);
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
}
.path-summary .truncated-code {
  min-width: 0;
  flex: 0 1 auto;
}
.path-more {
  flex-shrink: 0;
}
/* Bound the table's intrinsic path width; reserve the full count before truncating the path. */
.work-paths .path-summary {
  display: inline-flex;
  max-width: 100%;
}
.collision-copy {
  display: block;
}
.collision-copy .path-summary {
  max-width: 20rem;
  vertical-align: bottom;
}
.path-details code {
  overflow-wrap: anywhere;
}
.table-scroll table {
  width: 100%;
}
.table-scroll td {
  white-space: nowrap;
  padding-block: calc(var(--spacing) * 3);
}
.table-scroll th {
  white-space: nowrap;
}
.table-scroll td p {
  margin: 0;
}
.packet-link,
.claim-link {
  color: var(--text-color-kumo-default);
  font-size: var(--text-sm);
  text-align: left;
}
.claim-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.packet-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.packet-label > button { min-width: 0; }
.packet-race-badge { flex-shrink: 0; }
.column-claimed > .caption { display: block; line-height: inherit; }
.packet-link:hover {
  text-decoration: underline;
}
.state-reason {
  white-space: normal;
  max-width: 14rem;
  margin-top: calc(var(--spacing) * 1);
}
.last-push {
  display: grid;
  gap: calc(var(--spacing) * 1);
  min-width: 0;
}
.last-push .path-summary {
  max-width: 16rem;
}
.metric-value {
  /* Preserve the former h3 typography and spacing after correcting its semantics. */
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  font-weight: 600;
  color: var(--text-color-kumo-strong);
  margin-block: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}
.warning-dot {
  width: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 2);
  border-radius: var(--radius-xl);
  background: var(--color-kumo-warning);
}
.panel-heading {
  margin-bottom: calc(var(--spacing) * 4);
}

.packet-link {
  display: block;
  max-width: 16rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.table-scroll th {
  font-size: var(--text-sm);
}
/* The drawer scrim uses the host shadow token instead of an opaque surface. */
[data-base-ui-portal]:has(.activity-drawer) > [role="presentation"][data-open] {
  background: var(--color-kumo-shadow-drop);
  opacity: 1;
}
@media (max-width: 639px) {
  .tab-gutter [role="tab"] {
    flex-shrink: 0;
    padding-inline: calc(var(--spacing) * 3);
  }
}

/* Fixed columns keep intrinsic Git/path text from enlarging any table. */
.table-scroll table {
  table-layout: fixed;
}
.table-scroll th,
.table-scroll td {
  padding-inline: calc(var(--spacing) * 2);
}
.table-scroll .truncated-code,
.truncated-name,
.packet-link {
  max-width: 100%;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.table-scroll .caption,
.table-scroll .state-reason {
  white-space: normal;
}
.table-scroll .path-summary {
  max-width: 100%;
}
.table-scroll .status-dot {
  white-space: normal;
}
.table-work th:nth-child(1) {
  width: 23%;
}
.table-work th:nth-child(2) {
  width: 17%;
}
.table-work th:nth-child(3) {
  width: 15%;
}
.table-work th:nth-child(4) {
  width: 17%;
}
.table-work th:nth-child(5) {
  width: 18%;
}
.table-work th:nth-child(6) {
  width: 10%;
}
.table-review th:nth-child(1) {
  width: 13%;
}
.table-review th:nth-child(2) {
  width: 20%;
}
.table-review th:nth-child(3) {
  width: 12%;
}
.table-review th:nth-child(4) {
  width: 17%;
}
.table-review th:nth-child(5) {
  width: 15%;
}
.table-review th:nth-child(6) {
  width: 11%;
}
.table-review th:nth-child(7) {
  width: 12%;
}
.table-agents th:nth-child(1) {
  width: 19%;
}
.table-agents th:nth-child(2) {
  width: 23%;
}
.table-agents th:nth-child(3) {
  width: 28%;
}
.table-agents th:nth-child(4) {
  width: 13%;
}
.table-agents th:nth-child(5) {
  width: 17%;
}
.folded {
  display: none;
}
/* Frame width is authoritative; also fold when the docked panel narrows the pane. */
@container (max-width: 819px) {
  .folded {
    display: block;
  }
  .column-fork,
  .column-receipts,
  .column-requested,
  .column-claimed {
    display: none;
  }
  .table-work th:nth-child(1) {
    width: 27%;
  }
  .table-work th:nth-child(2) {
    width: 24%;
  }
  .table-work th:nth-child(3) {
    width: 22%;
  }
  .table-work th:nth-child(5) {
    width: 27%;
  }
  .table-review th:nth-child(1) {
    width: 16%;
  }
  .table-review th:nth-child(2) {
    width: 24%;
  }
  .table-review th:nth-child(3) {
    width: 15%;
  }
  .table-review th:nth-child(4) {
    width: 29%;
  }
  .table-review th:nth-child(7) {
    width: 16%;
  }
  .table-agents th:nth-child(1) {
    width: 29%;
  }
  .table-agents th:nth-child(3) {
    width: 34%;
  }
  .table-agents th:nth-child(4) {
    width: 16%;
  }
  .table-agents th:nth-child(5) {
    width: 21%;
  }
}
@media (max-width: 899px) {
  .folded {
    display: block;
  }
  .column-fork,
  .column-receipts,
  .column-requested,
  .column-claimed {
    display: none;
  }
}

.receipt-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: calc(var(--spacing) * 1);
  max-width: 100%;
  white-space: normal;
  font-variant-numeric: tabular-nums;
}
.receipt-cell:hover {
  text-decoration: underline;
}
.receipt-check {
  padding-block: calc(var(--spacing) * 3);
  border-bottom: 1px solid var(--color-kumo-line);
}
.receipt-logs {
  max-height: 24rem;
  overflow: auto;
  white-space: pre;
  font-family: var(--font-mono);
  background: var(--color-kumo-recessed);
  padding: calc(var(--spacing) * 2);
  margin-block: calc(var(--spacing) * 3);
}
.tabular {
  font-variant-numeric: tabular-nums;
}

.receipt-log-toggle {
  margin-top: calc(var(--spacing) * 2);
}
.receipt-link {
  display: block;
  padding-inline: 0;
}
.receipt-error-line {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 2);
}
.receipt-error-line svg {
  flex-shrink: 0;
  color: var(--color-kumo-warning);
}
.receipt-failure > .receipt-link {
  margin-inline-start: calc(var(--spacing) * 7);
}

/* History uses the queue's 14px table and underlined packet controls. */
.table-receipt-history th:nth-child(1) { width: 18%; }
.table-receipt-history th:nth-child(2) { width: 12%; }
.table-receipt-history th:nth-child(3) { width: 16%; }
.table-receipt-history th:nth-child(4) { width: 20%; }
.table-receipt-history th:nth-child(5) { width: 18%; }
.table-receipt-history th:nth-child(6) { width: 16%; }
.receipt-history-row { cursor: pointer; }
.receipt-history-link {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.last-promotion-sha {
  font-family: var(--font-mono);
}
.promotion-receipt {
  display: inline-flex;
  vertical-align: baseline;
  padding: 0;
  height: auto;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Retain the accepted stacked history below 900px without widening the frame. */
@media (max-width: 899px) {
  .table-receipt-history thead { display: none; }
  .table-receipt-history tbody { display: block; }
  .table-receipt-history .receipt-history-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding-block: calc(var(--spacing) * 2);
  }
  .table-receipt-history td { min-width: 0; }
}
@media (max-width: 639px) {
  .table-receipt-history .receipt-history-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* FH-040: detail occupies the content pane; only diff wells may scroll sideways. */
.review-detail { min-width: 0; display: grid; gap: calc(var(--spacing) * 6); }
.review-header { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(var(--spacing) * 4); }
.review-header > div { min-width: 0; }
.review-header code, .review-detail p { overflow-wrap: anywhere; }
.review-milestones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--spacing) * 4); }
.review-milestone { min-width: 0; padding: calc(var(--spacing) * 4); border: 1px solid var(--color-kumo-line); border-radius: var(--radius-lg); }
.review-evidence { display: block; text-align: left; margin-top: calc(var(--spacing) * 2); text-decoration: underline; overflow-wrap: anywhere; }
.status-neutral > span:first-child { background: var(--text-color-kumo-subtle); }
.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); }
.plain-text { white-space: pre-wrap; }
.returned-preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.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; }
.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); }
.review-file-toggle:hover { background: var(--color-kumo-tint); }
.file-status { flex: 0 0 calc(var(--spacing) * 18); }
.review-file-path { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; direction: rtl; text-align: left; }
.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); }
.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); }
.diff-line { display: block; }
.diff-added { background: var(--color-kumo-success-tint); }
.diff-removed { background: var(--color-kumo-danger-tint); }
.diff-hunk { color: var(--text-color-kumo-subtle); }
.review-acceptance { list-style: disc; padding-left: calc(var(--spacing) * 5); }
.review-commit { padding-block: calc(var(--spacing) * 2); border-bottom: 1px solid var(--color-kumo-line); }
.review-commit-caption { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing); }
.review-claimed-paths { min-width: 0; }
.review-claimed-paths code { overflow-wrap: anywhere; }
.review-skeleton { height: calc(var(--spacing) * 12); max-width: 60%; background: var(--color-kumo-recessed); border-radius: var(--radius-lg); }
@media (max-width: 639px) {
  .review-header { flex-direction: column; }
  .review-milestones { grid-template-columns: minmax(0, 1fr); }
}
/* Grid children must shrink below a unified diff's intrinsic line width. */
.review-detail > *, .review-file { min-width: 0; }
.review-diff { width: 100%; box-sizing: border-box; }

/* FH-043: full-row evidence routes wrap rather than clipping Git/path copy. */
.needs-you-heading { display: flex; align-items: center; gap: calc(var(--spacing) * 2); }
.needs-you-heading h2 { margin: 0; }
.needs-you-list { list-style: none; padding: 0; margin-top: calc(var(--spacing) * 3); }
.needs-you-list li { animation: activity-appear 150ms ease-out; }
.needs-you-list li + li { border-top: 1px solid var(--color-kumo-line); }
.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); }
.needs-you-row:hover { background: var(--color-kumo-tint); }
.needs-you-icon { flex-shrink: 0; margin-top: calc(var(--spacing) * 0.5); color: var(--text-color-kumo-subtle); }
.needs-you-copy { display: grid; gap: var(--spacing); min-width: 0; flex: 1; overflow-wrap: anywhere; }
.needs-you-title { font-size: var(--text-sm); line-height: var(--text-sm--line-height); font-weight: 600; }
.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); }
.needs-you-empty { display: flex; align-items: center; gap: calc(var(--spacing) * 2); margin-bottom: 0; }

/* Keep the panel action aligned while conflict copy gets a full line. */
.archive-heading {
  flex-wrap: wrap;
}
.archive-heading h3 {
  flex: 1 1 10rem;
  margin: 0;
}
.archive-heading > button {
  flex-shrink: 0;
}
.archive-heading > .receipt-error-line {
  flex-basis: 100%;
}

/* Keep the agent handoff action readable when the frame is narrow. */
.agent-notice > div { flex-wrap: wrap; }
.agent-notice > div > :first-child { flex: 1 1 20rem; }
.agent-notice > div > :last-child { min-width: 0; max-width: 100%; }
.owner-link-action { min-width: 0; max-width: 100%; }
.owner-link-fallback { min-width: 0; overflow-wrap: anywhere; }
.owner-link-fallback code { user-select: text; }

/* FH-049 history stays quiet; only unresolved collisions use warning banners. */
.collision-heading { font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.collision-history { display: grid; gap: calc(var(--spacing) * 3); }
.collision-row { min-width: 0; overflow-wrap: anywhere; }
.collision-row .collision-copy .path-summary { max-width: 100%; }
.collision-dialog .collision-copy .path-summary { max-width: min(20rem, 100%); }

.collision-highlight:focus-within { background: var(--color-kumo-tint); }
.collision-quick-reasons { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 2); margin-block: calc(var(--spacing) * 3); }
.collision-quick-reasons button { max-width: 100%; height: auto; white-space: normal; text-align: left; justify-content: flex-start; }
.collision-evidence { margin-block: calc(var(--spacing) * 3); }

.collision-dialog { max-height: calc(100dvh - 5rem); overflow-y: auto; }

/* Stack actions so a narrow warning keeps its collision evidence readable. */
@media (max-width: 639px) {
  .collision-banner > div { flex-direction: column; align-items: flex-start; }
  .collision-banner .collision-copy .path-summary { max-width: 100%; }
}

/* Shared FH-055/FH-057 identity: silk means agent; shape and state words mean outcome. */
.race-saddlecloth {
  display: inline-flex;
  min-width: 24px;
  width: max-content;
  height: 24px;
  flex: 0 0 auto;
  padding-inline: 3px;
  box-sizing: border-box;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--lane-silk);
  color: var(--race-cloth-ink);
  font-size: 14px;
  font-weight: 800;
}
.race-runner {
  display: flex;
  gap: 10px;
  min-width: 0;
  align-items: flex-start;
}
.race-runner-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}
.race-fork {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lane-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-kumo-base);
  border-radius: 50%;
  box-sizing: border-box;
  background: var(--lane-silk, var(--entrant-silk));
  color: var(--lane-silk, var(--entrant-silk));
  box-shadow: 0 0 0 1px var(--lane-silk, var(--entrant-silk));
  font-size: 14px;
  line-height: 1;
}
.lane-marker-review,
.lane-marker-unreached {
  background: var(--color-kumo-base);
  border: 2px solid var(--lane-silk, var(--entrant-silk));
  box-shadow: 0 0 0 2px var(--color-kumo-base);
}
.lane-marker-unreached {
  border-color: var(--color-kumo-ring);
}
.lane-marker-approved {
  background: var(--color-kumo-base);
  box-shadow: 0 0 0 2px var(--color-kumo-base);
  border: 0;
  border-radius: 0;
  font-size: 20px;
}
.lane-marker-passed,
.lane-marker-failed,
.lane-marker-interrupted {
  width: 22px;
  height: 22px;
  color: var(--race-hurdle-ink);
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 0 0 1px var(--color-kumo-ring);
}
.lane-marker-passed {
  background: var(--color-kumo-success);
}
.lane-marker-failed {
  background: var(--color-kumo-danger);
}
.lane-marker-interrupted {
  background: var(--color-kumo-warning);
}
.lane-marker-promoted {
  background: var(--color-kumo-success);
  color: var(--color-kumo-success);
}
.fork-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.fork-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.fork-header h2 {
  margin: 0;
}
.fork-window {
  text-align: right;
}
.fork-chips {
  display: flex;
  gap: 4px;
  margin: 8px 0 12px;
}
.fork-window-chip[aria-pressed="true"] {
  background: var(--color-kumo-tint);
  color: var(--text-color-kumo-strong);
  box-shadow: inset 0 0 0 1px var(--color-kumo-ring);
  font-weight: 600;
}
.fork-picture {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  min-width: 0;
}
.fork-labels,
.fork-plot {
  position: relative;
  min-width: 0;
}
.fork-plot {
  overflow: clip;
}
.fork-plot svg {
  position: absolute;
  inset: 0;
}
.fork-main-label {
  position: absolute;
  top: 20px;
}
.fork-lane-label {
  position: absolute;
  left: 0;
  width: 198px;
  display: flex;
  text-align: left;
  gap: 8px;
  align-items: center;
}
.fork-lane-label strong {
  display: block;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 156px;
}
.fork-lane-label code {
  display: block;
}
.fork-state {
  display: block;
  color: var(--text-color-kumo-subtle);
}
.fork-state-success > span {
  color: var(--text-color-kumo-success);
}
.fork-state-info > span {
  color: var(--text-color-kumo-info);
}
.fork-state-danger > span {
  color: var(--text-color-kumo-danger);
}
.fork-state-warning > span {
  color: var(--text-color-kumo-warning);
}
.fork-state-brand > span {
  color: var(--text-color-kumo-brand);
}
.fork-race-label {
  position: absolute;
  left: 0;
  width: 205px;
  text-decoration: underline;
  overflow-wrap: anywhere;
}
.fork-main-line {
  stroke: var(--text-color-kumo-strong);
  stroke-width: 3;
}
.lane-line,
.fork-lane-line {
  stroke: var(--lane-silk);
  stroke-width: 2;
  fill: none;
}
.fork-grid {
  stroke: var(--color-kumo-hairline, var(--color-kumo-line));
  stroke-width: 1;
}
.fork-race-bracket,
.fork-now-line {
  stroke: var(--text-color-kumo-subtle);
  stroke-width: 1;
  fill: none;
}
.fork-now {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}
.fork-tick {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
.fork-main-mark,
.fork-event,
.fork-collision-ring {
  position: absolute;
}
.fork-mark-button {
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
.fork-main-mark .fork-mark-button {
  position: absolute;
}
.fork-commit-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-color-kumo-strong);
  border: 2px solid var(--color-kumo-base);
  box-shadow: 0 0 0 1px var(--text-color-kumo-strong);
}
.fork-sha {
  position: absolute;
  top: -26px;
  transform: translateX(-50%);
  background: var(--color-kumo-base);
  padding: 0 3px;
  white-space: nowrap;
}
.fork-history {
  position: absolute;
  display: flex;
  align-items: baseline;
  gap: 8px;
  max-width: calc(100% - 12px);
  background: var(--color-kumo-base);
  padding-right: 4px;
  white-space: nowrap;
}
.fork-stub {
  color: inherit;
}
.fork-lead-in {
  stroke-dasharray: 3 4;
}
.fork-start {
  position: absolute;
  width: 24px;
  height: 16px;
  border-radius: 3px;
}
.fork-start:focus-visible {
  outline: 2px solid var(--color-kumo-ring);
}
.fork-earlier-events {
  color: var(--text-color-kumo-subtle);
  white-space: nowrap;
}
.fork-earlier {
  font-size: 10px;
}
.fork-collision {
  color: var(--color-kumo-danger);
}
.fork-collision.resolved {
  color: var(--color-kumo-ring);
}
.fork-collision-line {
  position: absolute;
  border-left: 1px dashed currentColor;
}
.fork-collision-ring {
  width: 20px;
  height: 20px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--color-kumo-base);
  font-size: 12px;
}
.fork-collision-caption {
  position: absolute;
  color: var(--text-color-kumo-subtle);
  white-space: nowrap;
  background: var(--color-kumo-base);
  padding-inline: 4px;
}
.fork-collision-caption.right {
  margin-left: 16px;
}
.fork-collision-caption.left {
  margin-left: -16px;
  transform: translateX(-100%);
}
.fork-legend {
  border-top: 1px solid var(--color-kumo-line);
  padding-top: 12px;
}
.fork-disclosure {
  margin-top: 8px;
  text-decoration: underline;
  font-size: 12px;
}
.fork-table {
  max-width: 100%;
}
.fork-table table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 12px;
}
.fork-table th,
.fork-table td {
  text-align: left;
  vertical-align: top;
  padding: 8px 4px;
  border-bottom: 1px solid var(--color-kumo-line);
  overflow-wrap: anywhere;
}
.fork-table td .caption {
  display: block;
}
.fork-table th .race-saddlecloth {
  margin-right: 4px;
}
/* Unlike native closed details, this disclosure always leaves its facts in the accessibility tree. */
.fork-table-collapsed {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.fork-event {
  animation: fork-arrival 150ms ease-out;
}
@keyframes fork-arrival {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fork-event {
    animation: none;
  }
}
@media (max-width: 639px) {
  .fork-picture {
    display: none;
  }
  .fork-window {
    display: none;
  }
  .fork-legend {
    display: none;
  }
  .fork-table,
  .fork-table-collapsed {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip-path: none;
    white-space: normal;
    overflow: visible;
  }
  .fork-table table,
  .fork-table thead,
  .fork-table tbody,
  .fork-table tr,
  .fork-table th,
  .fork-table td {
    display: block;
  }
  .fork-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .fork-table tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-kumo-line);
  }
  .fork-table th,
  .fork-table td {
    border: 0;
    padding: 4px 0;
  }
  .fork-table td::before {
    display: inline-block;
    width: 78px;
    color: var(--text-color-kumo-subtle);
  }
  .fork-table td:nth-child(2)::before {
    content: "Packet";
  }
  .fork-table td:nth-child(3)::before {
    content: "Claimed";
  }
  .fork-table td:nth-child(4)::before {
    content: "Pushes";
  }
  .fork-table td:nth-child(5)::before {
    content: "Review";
  }
  .fork-table td:nth-child(6)::before {
    content: "Checks";
  }
  .fork-table td:nth-child(7)::before {
    content: "Approved";
  }
  .fork-table td:nth-child(8)::before {
    content: "Promoted";
  }
}
@media (max-width: 639px) {
  .fork-table caption { display: block; text-align: left; padding-block: 12px; }
}

.lane-connector { position: absolute; top: 29px; left: 50%; width: 100%; height: 2px; background: var(--lane-silk,var(--entrant-silk)); }

/* FH-062 quantity gauges use semantic host colors and never encode work progress. */
.usage-figures, .usage-source, .budget-usage, .token-budget { display: inline-flex; flex-direction: column; gap: 3px; }
.usage-figure, .usage-source .usage-freshness, .usage-source .usage-model, .usage-missing { white-space: nowrap; }
.usage-split { display: flex; flex-wrap: wrap; gap: 0 4px; white-space: normal; }
.usage-split > span { white-space: nowrap; }
.usage-compact { font-size: 12px; }
.usage-compact .usage-figure:focus-visible { outline: 2px solid var(--color-kumo-ring); outline-offset: 2px; }
.token-budget { width: 200px; max-width: 100%; }
.token-budget meter { width: 100%; height: 5px; accent-color: var(--text-color-kumo-subtle); }
.token-budget-near { color: var(--text-color-kumo-warning); }
.token-budget-over { color: var(--text-color-kumo-danger); }
.token-budget-near meter { accent-color: var(--text-color-kumo-warning); }
.token-budget-over meter { accent-color: var(--text-color-kumo-danger); }
.token-budget meter::-webkit-meter-bar { background: var(--color-kumo-fill); border: 0; }
.token-budget meter::-webkit-meter-optimum-value { background: var(--text-color-kumo-subtle); }
.token-budget-near meter::-webkit-meter-optimum-value { background: var(--text-color-kumo-warning); }
.token-budget-over meter::-webkit-meter-optimum-value { background: var(--text-color-kumo-danger); }
.review-usage { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 8px; }
.review-usage > span:first-child { white-space: nowrap; }
.race-usage { margin-bottom: 24px; }
.race-usage table { width: 100%; border-collapse: collapse; }
.race-usage th, .race-usage td { padding: 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-kumo-line); }
.race-compare { min-width: 520px; }
.race-compare .caption { display: block; }
.race-compare .usage-source, .race-compare .status-dot { display: inline-flex; }
.race-usage h3 { margin-top: 20px; }
.column-tokens { min-width: 0; }
/* Existing tables allocated all width to their original columns. Reserve usage explicitly. */
.table-agents th:nth-child(1) { width: 17%; }
.table-agents th:nth-child(2) { width: 19%; }
.table-agents th:nth-child(3) { width: 22%; }
.table-agents th:nth-child(4) { width: 11%; }
.table-agents th:nth-child(5) { width: 9%; }
.table-agents th:nth-child(6) { width: 22%; }
.table-review:has(.column-tokens) th:nth-child(1) { width: 10%; }
.table-review:has(.column-tokens) th:nth-child(2) { width: 16%; }
.table-review:has(.column-tokens) th:nth-child(3) { width: 10%; }
.table-review:has(.column-tokens) th:nth-child(4) { width: 17%; }
.table-review:has(.column-tokens) th:nth-child(5) { width: 12%; }
.table-review:has(.column-tokens) th:nth-child(6) { width: 17%; }
.table-review:has(.column-tokens) th:nth-child(7) { width: 8%; }
.table-review:has(.column-tokens) th:nth-child(8) { width: 10%; }
@container (max-width: 819px) {
  .table-agents .column-tokens { display: none; }
  .table-agents th:nth-child(1) { width: 35%; }
  .table-agents th:nth-child(3) { width: 32%; }
  .table-agents th:nth-child(4) { width: 16%; }
  .table-agents th:nth-child(5) { width: 17%; }

}
@media (max-width: 639px) {
  .table-agents .column-tokens { display: none; }
  .fork-table td:nth-child(9)::before { content: "Tokens"; }

}

/* FH-055: full-width recorded race lanes; silks are reviewed identity tokens. */
.race-shell .main-container {
  max-width: none;
}
.race-page {
  padding-block: calc(var(--spacing) * 2);
}
.race-page .heading-1 {
  font-size: 30px;
  line-height: 36px;
  font-weight: 600;
  margin: 0;
}
.race-header {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
  margin-block: 24px 36px;
}
.race-flag {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color-kumo-strong);
}
.race-clock {
  display: grid;
  gap: 4px;
  min-width: 120px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.race-clock strong {
  font-family: var(--font-mono);
  font-size: 24px;
  line-height: 32px;
}
.race-photo-caption {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.race-track,
.race-results table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.race-track thead th {
  padding: 12px 8px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  color: var(--text-color-kumo-subtle);
  border-bottom: 1px solid var(--color-kumo-line);
}
.race-track thead th:first-child {
  width: 18%;
  text-align: left;
}
.race-track thead th:last-child {
  width: 18%;
  text-align: left;
}
.race-track tbody th {
  text-align: left;
  font-weight: 400;
  padding: 22px 12px 22px 0;
}
.race-track tbody tr {
  border-bottom: 1px solid var(--color-kumo-line);
}
.race-page .race-runner-copy strong {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-color-kumo-strong);
  overflow-wrap: anywhere;
}
.race-step .lane-marker {
  position: relative;
  z-index: 1;
  vertical-align: middle;
  margin: 0;
}
.race-step .lane-marker-unreached { color: transparent; }
.race-mark-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-inline: auto;
}
.race-step .lane-marker.reached { animation: race-arrival 150ms ease-out; }
.race-step {
  position: relative;
  text-align: center;
  vertical-align: top;
  padding: 20px 4px 24px;
}
.race-step > .lane-connector {
  position: absolute;
  height: 2px;
  background: var(--entrant-silk);
  right: 50%;
  left: auto;
  top: 31px;
  width: calc(var(--race-gap) * 100%);
  pointer-events: none;
}
.race-split {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  margin-top: 12px;
  color: var(--text-color-kumo-subtle);
  font-variant-numeric: tabular-nums;
}
.race-split time {
  white-space: nowrap;
}
.race-finish {
  border-left: 2px solid var(--text-color-kumo-strong);
}
.race-result {
  vertical-align: top;
  padding: 20px 12px;
}
.race-result > * {
  display: block;
  margin-bottom: 6px;
}
.race-result > strong {
  font-weight: 500;
}
.race-result > .race-place {
  display: inline-flex;
}
.race-phone-label {
  display: none;
}
.race-hurdle-button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
}
.race-empty {
  text-align: center;
  padding-block: 48px;
  color: var(--text-color-kumo-subtle);
}
.race-results {
  margin-top: 40px;
}
.race-results th,
.race-results td {
  padding: 16px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-kumo-line);
  font-weight: 400;
}
.race-results thead th {
  font-size: 12px;
  color: var(--text-color-kumo-subtle);
}
.race-results th:first-child {
  width: 8%;
}
.race-results th:nth-child(2) {
  width: 28%;
}
.race-photo {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 32px;
  margin-block: 40px 24px;
  padding: 24px;
  background: var(--color-kumo-elevated);
  border: 1px solid var(--color-kumo-line);
  border-radius: var(--radius-lg);
}
.race-photo-events > * {
  padding-block: 12px;
  border-bottom: 1px solid var(--color-kumo-line);
  margin: 0;
}
.race-photo-events > :last-child {
  border-bottom: none;
}
.race-step .lane-marker.reached ~ .race-split {
  animation: race-arrival 150ms ease-out;
}
@keyframes race-arrival {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .race-step .lane-marker.reached,
  .race-step .lane-marker.reached ~ .race-split {
    animation: none;
  }
}
@media (max-width: 1023px) {
  .race-header {
    flex-direction: column;
    margin-bottom: 24px;
    gap: 12px;
  }
  .race-page .heading-1 {
    font-size: 24px;
    line-height: 32px;
  }
  .race-clock {
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-align: left;
    flex-wrap: wrap;
  }
  .race-clock strong {
    font-size: 18px;
  }
  .race-track,
  .race-track tbody,
  .race-results table,
  .race-results tbody {
    display: block;
  }
  .race-track thead,
  .race-results thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .race-track-empty thead { position: static; width: auto; height: auto; clip-path: none; }
  .race-track-empty thead tr { display: flex; flex-wrap: wrap; gap: 12px; }
  .race-track-empty thead th { padding: 8px 0; }
  .race-track-empty thead th:first-child, .race-track-empty thead th:last-child { display: none; }
  .race-track tbody tr {
    display: block;
    border: 1px solid var(--color-kumo-line);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    padding: 16px;
  }
  .race-track tbody th {
    display: block;
    padding: 0 0 20px;
  }
  .race-step {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    text-align: left;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    min-height: 48px;
  }
  .race-mark-box {
    grid-row: 1;
    grid-column: 1;
    justify-self: center;
    margin: 0;
  }
  .race-phone-label {
    display: block;
    grid-column: 2;
    grid-row: 1;
    font-size: 13px;
  }
  .race-split {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
    text-align: right;
  }
  .race-step > .lane-connector {
    height: calc(var(--race-gap) * 100%);
    width: 2px;
    left: 11px;
    right: auto;
    top: auto;
    bottom: 50%;
  }
  .race-finish {
    border-left: none;
    border-bottom: 2px solid var(--text-color-kumo-strong);
  }
  .race-result {
    display: block;
    padding: 16px 0 0;
  }
  .race-results tr {
    display: block;
    border-bottom: 1px solid var(--color-kumo-line);
    padding-block: 12px;
  }
  .race-results th,
  .race-results td {
    display: block;
    padding: 8px 0;
    width: auto;
    border: none;
  }
  .race-results tbody th {
    width: auto;
  }
  .race-results tbody th:nth-child(2) { width: auto; }
  .race-results .race-runner { width: 100%; }
  .race-results .race-runner-copy { flex: 1; }
  .race-results td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
  }
  .race-results td::before {
    content: attr(data-label);
    color: var(--text-color-kumo-subtle);
  }
  .race-photo {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }
}

/* Usage is an extra facts column; FH-055's milestone geometry and glyph rules stay authoritative. */
.race-track thead th:first-child, .race-track thead th:last-child { width: 16%; }
.race-track thead .race-tokens-heading { width: 220px; text-align: left; }
.race-track .race-tokens { padding: 20px 8px; vertical-align: top; text-align: left; }
@media (max-width: 639px) {
  .race-track .race-tokens { display: block; padding: 16px 0; }
  .race-tokens > .race-phone-label { margin-bottom: 8px; }
  .race-track-empty thead .race-tokens-heading { display: none; }
}

/* Dense usage facts fit the pane with the activity panel docked. */
.table-review .usage-source .usage-figure,
.table-review .usage-missing { white-space: nowrap; }
.table-review .usage-promotion-caption { white-space: normal; }
@container (max-width: 999px) {
  .table-review:has(.column-tokens) .column-receipts,
  .table-review:has(.column-tokens) .column-requested { display: none; }
  .table-review:has(.column-tokens) .folded { display: block; }
  .table-review:has(.column-tokens) th:nth-child(1) { width: 14%; }
  .table-review:has(.column-tokens) th:nth-child(2) { width: 18%; }
  .table-review:has(.column-tokens) th:nth-child(3) { width: 12%; }
  .table-review:has(.column-tokens) th:nth-child(4) { width: 21%; }
  .table-review:has(.column-tokens) th:nth-child(6) { width: 15%; }
  .table-review:has(.column-tokens) th:nth-child(8) { width: 20%; }
}
.fork-table:has(.usage-compact) th:nth-child(1) { width: 12%; }
.fork-table:has(.usage-compact) th:nth-child(2) { width: 12%; }
.fork-table:has(.usage-compact) th:nth-child(3) { width: 9%; }
.fork-table:has(.usage-compact) th:nth-child(4) { width: 11%; }
.fork-table:has(.usage-compact) th:nth-child(5) { width: 10%; }
.fork-table:has(.usage-compact) th:nth-child(6) { width: 12%; }
.fork-table:has(.usage-compact) th:nth-child(7) { width: 9%; }
.fork-table:has(.usage-compact) th:nth-child(8) { width: 9%; }
.fork-table:has(.usage-compact) th:nth-child(9) { width: 16%; }
.compare-entrant { display: none; }
.compare-value { display: block; }
@media (max-width: 639px) {
  .race-usage .table-scroll { overflow: visible; }
  .race-compare { min-width: 0; }
  .race-compare, .race-compare tbody, .race-compare tr { display: block; }
  .race-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .race-compare tr { padding-block: 12px; border-bottom: 1px solid var(--color-kumo-line); }
  .race-compare th { display: block; padding: 0 0 8px; border: 0; }
  .race-compare td { display: grid; grid-template-columns: minmax(88px, 1fr) minmax(0, 2fr); gap: 8px; padding: 8px 0; border: 0; }
  .compare-entrant { display: flex; gap: 6px; align-items: flex-start; min-width: 0; }
  .compare-entrant > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .compare-entrant .race-saddlecloth { flex: 0 0 auto; min-width: 22px; height: 22px; font-size: 12px; }
  .compare-value { min-width: 0; }
  .race-compare .usage-source, .race-compare .token-budget-state, .race-compare .usage-freshness { font-size: 12px; }
}

/* FH-063c advice stays below the factual track, with existing host tokens. */
.race-page { isolation: isolate; } /* Keep positioned lane marks beneath the shared dialog portal. */
.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); }
.judge-advice h4, .judge-pick { display: flex; align-items: center; gap: calc(var(--spacing) * 2); }
.judge-advice h4, .judge-advice p { margin: 0; }
.judge-pick { width: fit-content; margin-block: calc(var(--spacing) * 2); }
.judge-forecast, .judge-forecast > span, .judge-ranking li > div { display: flex; align-items: center; gap: calc(var(--spacing) * 3); }
.judge-forecast { flex-wrap: wrap; }
.judge-ranking { list-style: none; padding: 0; margin: 0; display: grid; gap: calc(var(--spacing) * 3); }
.judge-ranking li, .judge-ranking strong { min-width: 0; overflow-wrap: anywhere; }
.judge-rationale { border-left: 2px solid var(--color-kumo-line); padding-left: calc(var(--spacing) * 4); margin: 0; }
.judge-rationale p { white-space: pre-wrap; overflow-wrap: anywhere; }
.judge-rationale footer { margin-top: calc(var(--spacing) * 2); }
.judge-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.judge-action { display: flex; align-items: center; gap: calc(var(--spacing) * 3); flex-wrap: wrap; }
@media (prefers-reduced-motion: no-preference) { .judge-advice { animation: judge-advice-in 150ms ease-out; } }
@keyframes judge-advice-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 639px) { .judge-action { flex-direction: column; align-items: stretch; } .judge-action > button { width: 100%; } }

/* Freshness uses the existing tab gutter, leaving populated content in place. */
.tab-gutter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2);
  flex-wrap: wrap;
}
.freshness-stamp {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}
.write-hint {
  display: inline-flex;
  align-items: center;
}
/* First-run guidance reuses the Overview clipboard control without duplicating command text. */
.first-run-command {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  width: 100%;
  max-width: 50rem;
  min-width: 0;
}
.first-run-command code {
  flex: 1;
  min-width: 0;
  white-space: pre-wrap;
  text-align: left;
}
.first-run-copy {
  flex-shrink: 0;
}
.first-run-copy > span:first-child {
  display: none;
}