/* Mirage Tape: foundations and component rules. */
@import "./documentation.css";
@font-face { font-family: "Geist Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/geist-sans-variable.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-mono-600-latin.woff2") format("woff2"); }
:root,
.tape {
  --chart-neutral: color-mix(in srgb, CanvasText 30%, transparent);
  --chart-grid: color-mix(in srgb, CanvasText 7%, transparent);
  --chart-axis: color-mix(in srgb, CanvasText 22%, transparent);
  --chart-hover: color-mix(in srgb, CanvasText 5%, transparent);
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans: "Geist Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-xs: .75rem;
  --text-sm: .8125rem;
  --text-md: .875rem;
  --text-title: 1.875rem;
  --text-figure: 1.75rem;
  --ground: light-dark(#faf8f4, #0c0c0d);
  --rail: light-dark(#f3efe8, #131314);
  --muted: light-dark(
    color-mix(in srgb, CanvasText 64%, transparent),
    color-mix(in srgb, CanvasText 52%, transparent)
  );
  --line: light-dark(
    color-mix(in srgb, CanvasText 11%, transparent),
    color-mix(in srgb, CanvasText 13%, transparent)
  );
  --line-strong: light-dark(
    color-mix(in srgb, CanvasText 22%, transparent),
    color-mix(in srgb, CanvasText 26%, transparent)
  );
  --panel: transparent;
  --panel-strong: light-dark(
    color-mix(in srgb, CanvasText 6%, transparent),
    color-mix(in srgb, CanvasText 8%, transparent)
  );
  --green: light-dark(#157a41, #3ddc84);
  --amber: light-dark(#8f5a05, #e8a33d);
  --accent: light-dark(#0d7391, #4cc2e0);
  --red: light-dark(#c7382c, #f2554a);
  --chart-1: light-dark(#0088ac, #009cc4);
  --chart-2: light-dark(#009342, #2aa654);
  --chart-3: light-dark(#8362cd, #9575e2);
  --chart-4: light-dark(#ae6700, #c5770f);
  --chart-5: light-dark(#c24976, #d65c88);
  --chart-6: light-dark(#7f8006, #929300);
  --chart-7: light-dark(#3d77d7, #4f8aec);
  --chart-8: light-dark(#c64e31, #db6143);
  --chart-surface: var(--ground);
  background: var(--ground);
  color: CanvasText;
  font-family: var(--font-sans);
  font-synthesis-weight: none;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
:root { color-scheme: light dark; }
.tape { color-scheme: inherit; font-size: var(--text-md); }
:root:has(.theme-light),
.tape.theme-light { color-scheme: light; }
:root:has(.theme-dark),
.tape.theme-dark { color-scheme: dark; }
.tape-sources.runs-awaiting-approval { margin-top: 1.5rem; }
.tape-ledger-job-types { min-width: 36rem; }
.tape-list { --list-inset: 0.85rem; overflow: auto hidden; }
.tape-list-heads {
  display: grid;
  grid-template-columns: var(--list-columns);
  column-gap: 0.65rem;
  align-items: center;
  /* The box's border sits outside the rows' padding, so the heads carry it
     too to stay on the rows' tracks. */
  padding: 0.5rem calc(var(--list-inset) + 1px) 0.4rem;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}
.tape-list-sort {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-self: start;
  gap: 0.25rem;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  transition: color 120ms ease;
}
.tape-list-sort:hover,
.tape-list-sort[data-sorted] { color: CanvasText; }
.tape-list-sort:focus-visible { border-radius: 2px; outline: 2px solid var(--accent); outline-offset: 2px; }
.tape-list-sort[data-sorted]::after {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10m-4-4 4 4 4-4' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10m-4-4 4 4 4-4' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.tape-list-sort[data-sorted="ascending"]::after { transform: rotate(180deg); }
.tape-list-box { border: 1px solid var(--line); --shared-hover-background: var(--panel-strong); --shared-hover-radius: 0; }
.tape-list-row {
  display: grid;
  grid-template-columns: var(--list-columns);
  column-gap: 0.65rem;
  align-items: center;
  min-height: 2.8rem;
  padding: 0.18rem var(--list-inset);
  color: inherit;
  line-height: 1.25;
  text-decoration: none;
}
.tape-list-name { display: flex; min-width: 0; align-items: center; gap: 0.55rem; overflow: hidden; }
.tape-list-cell { min-width: 0; overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.tape-list-empty,
.tape-list-empty.inline-error { margin: 0; padding: 0.95rem var(--list-inset); font-size: var(--text-sm); }
.tape-list-empty:not(.inline-error) { color: var(--muted); }
.tape-list-machines { --list-min-width: 52rem; --list-columns: 0.72rem minmax(10rem, 0.8fr) minmax(12rem, 1.1fr)
    minmax(15rem, 1fr) 5.5rem 1rem; }
.tape-list-runner-jobs { --list-columns: 0.72rem minmax(11rem, 1fr) 8rem minmax(10rem, 0.9fr) 5.5rem; }
.tape-list-lifecycle-waiting { --list-min-width: 46rem; --list-columns: 0.72rem minmax(10rem, 1.2fr) minmax(5rem, 0.5fr)
    minmax(6.5rem, 0.7fr) minmax(11rem, 1.2fr) 4rem 1rem; }
.tape-lifecycle-why { display: flex; }
.tape-lifecycle-waited { text-align: right; font-variant-numeric: tabular-nums; }
.tape-lifecycle-waited.over { color: var(--amber); }
.tape-list-awaiting-approval { --list-min-width: 50rem; --list-columns: 0.72rem minmax(9rem, 0.9fr) minmax(6rem, 0.55fr)
    minmax(6rem, 0.55fr) minmax(6rem, 0.55fr) minmax(9rem, 1fr) 4rem 1rem; }
.tape-list-external { display: flex; justify-content: flex-end; color: var(--muted); }
.tape-list-repos { --list-min-width: 50rem; --list-columns: 0.72rem minmax(10rem, 1fr) 10rem 5.5rem 5.5rem 5.5rem 5.5rem
    1rem; }
.tape-list-repos.with-timeout { --list-min-width: 52rem; --list-columns: 0.72rem minmax(10rem, 1fr) 8rem 5rem 4.75rem 4.75rem 4.75rem
    4.75rem 1rem; }
.tape-list-repos .tape-list-sort { white-space: normal; line-height: 1.3; }
.pair-mac-guide { border-top: 1px solid var(--line); padding: 0.9rem 1.2rem; font-size: var(--text-sm); }
.tape-list-agent-vms { --list-min-width: 52rem; --list-columns: 0.72rem minmax(10rem, 1.3fr) 8rem 4.5rem minmax(8rem, 0.8fr)
    17rem; }
.tape-sources { margin: 0 0 1rem; }
.tape-sources[id] { scroll-margin-top: 1rem; }
.tape-sources-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.tape-sources-note { max-width: 64rem; margin: 0.6rem 0 0; font-size: var(--text-xs); line-height: 1.55; }
.tape-ledger-scroll { overflow-x: auto; }
.tape-ledger { min-width: 52rem; border: 1px solid var(--line); }
.tape-ledger-settings { min-width: 0; }
.tape-api-token-form { margin-bottom: 1rem; }
.tape-api-token-secret { margin-bottom: 1rem; padding: 0.85rem 1rem; border: 1px solid var(--line); background: var(--panel-strong); font-size: var(--text-sm); }
.tape-api-token-secret-value { display: flex; align-items: center; gap: 0.75rem; margin: 0.65rem 0; }
.tape-ledger-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(13rem, 1.7fr) 5.5rem 7rem 7.5rem 7rem;
  gap: 1rem;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 0.6rem 0.85rem;
}
.tape-ledger-row.expanded { background: var(--panel-strong); }
.tape-ledger-head {
  border-bottom: 1px solid var(--line);
  padding-block: 0.45rem;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.tape-cell {
  min-width: 0;
  overflow: hidden;
  font-size: var(--text-sm);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tape-source-cell { min-width: 0; }
.tape-source {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}
.tape-source-toggle { cursor: pointer; }
.tape-source-toggle::before { position: absolute; inset: 0; content: ""; }
.tape-source-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tape-ledger-row:has(.tape-source-toggle):hover { background: var(--panel-strong); }
.tape-caret {
  flex: 0 0 auto;
  width: 0.7rem;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1;
  transition: transform 120ms ease;
}
.tape-dot { flex: 0 0 auto; width: 0.42rem; height: 0.42rem; background: var(--billing-series-color, var(--chart-neutral)); }
.tape-ledger-sub { border-top: 1px solid color-mix(in srgb, var(--line) 45%, transparent); padding-block: 0.36rem; }
.tape-sub-name { display: block; overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.tape-group-note { max-width: 56rem; margin: 0; padding: 0.1rem 0.85rem 0.6rem calc(0.85rem + 2.12rem); font-size: var(--text-xs); line-height: 1.5; }
.tape-ledger-total { position: relative; border-top: 1px solid var(--line); background: var(--panel-strong); }
.tape-plan { display: grid; gap: 0.3rem; border-top: 1px solid color-mix(in srgb, var(--line) 45%, transparent); padding: 0.55rem 0.85rem 0.5rem calc(0.85rem + 2.12rem); }
.tape-plan-label { color: var(--muted); font-family: var(--font-sans); font-size: var(--text-xs); }
.tape-plan-allowances {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
}
.tape-plan-months {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
}
.tape-plan-over { color: var(--amber); }
.tape-plan-candidates { display: grid; grid-template-columns: 8.5rem 1fr; align-items: baseline; gap: 1rem; }
.tape-plan-reason { max-width: 56rem; margin: 0; font-family: var(--font-sans); font-size: var(--text-xs); line-height: 1.5; }
.tape-source-tag { flex: 0 0 auto; font-family: var(--font-sans); font-size: var(--text-xs); }
.tape-source-link { position: relative; z-index: 1; color: var(--muted); font-size: var(--text-sm); text-decoration: none; }
.tape-source-link:hover { color: CanvasText; }
.tape-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  margin-bottom: 1rem;
  background: var(--line);
}
.tape-overview-cell {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-start;
  padding: 1rem 1.1rem;
  background: var(--ground);
}
.tape-overview-link.active { box-shadow: inset 0 -2px 0 var(--accent); }
.tape-overview-inline { margin-bottom: 0; }
.tape-overview-cell[data-tooltip-trigger] { position: relative; }
.tape-overview-cell[data-tooltip-trigger]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tape-ledger-billing { border: 0; }
.tape-mirage { margin-top: 1.4rem; }
.tape-saved { padding: 0 0.85rem 1rem; }
.tape-range { position: relative; }
.button.tape-range-trigger { min-width: 11rem; justify-content: space-between; }
.tape-range-pop {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 0;
  width: min(34rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 1rem);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--ground);
  color: CanvasText;
  box-shadow: 0 10px 30px rgb(0 0 0 / 18%);
}
.tape-range-pop::backdrop { background: transparent; }
.tape-range-body { display: grid; grid-template-columns: minmax(0, 1fr) 11rem; }
.tape-range-cal { padding: 0.85rem 0.95rem; border-right: 1px solid var(--line); }
.tape-range-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.tape-range-nav { display: flex; gap: 0.25rem; }
.tape-range-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.tape-range-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 0.25rem; }
.tape-range-presets { position: relative; display: flex; flex-direction: column; padding: 0.55rem 0.5rem; --shared-hover-background: var(--panel-strong); --shared-hover-radius: 2px; }
.tape-range-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; border-top: 1px solid var(--line); padding: 0.7rem 0.95rem; }
.tape-range-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line);
  padding: 0.6rem 0.95rem;
}
.tape-ledger-limits { min-width: 34rem; }
.tape-repo-name { display: flex; align-items: center; gap: 0.4rem; }
.tape-lock { width: 0.72rem; height: 0.72rem; flex: 0 0 auto; color: var(--muted); }
.tape-account-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.8rem 0.85rem;
}
.tape-account-identity { display: flex; min-width: 0; flex-direction: column; gap: 0.12rem; }
.tape-account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.tape-policy-heading { border-bottom: 1px solid var(--line); }
.tape-policy-source { max-width: 30rem; font-size: var(--text-xs); line-height: 1.45; }
.tape-policy-controls { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(18rem, 1.25fr); gap: 1rem; align-items: start; padding: 0.85rem; }
.tape-policy-plan { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tape-policy-plan-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1.2fr) minmax(10rem, 1fr) minmax(
      10rem,
      1fr
    );
  gap: 0.75rem;
  align-items: center;
  padding: 0.48rem 0.85rem;
  font-size: var(--text-xs);
}
.tape-policy-plan-head {
  display: grid;
  grid-template-columns: minmax(12rem, 1.2fr) minmax(10rem, 1fr) minmax(
      10rem,
      1fr
    );
  gap: 0.75rem;
  align-items: center;
  padding: 0.48rem 0.85rem;
  padding-block: 0.38rem;
  background: var(--panel);
  font-size: var(--text-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.tape-policy-message,
.tape-policy-message.inline-error { margin: 0; border-bottom: 1px solid var(--line); padding: 0.6rem 0.85rem; font-size: var(--text-xs); line-height: 1.5; }
.tape-policy-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; padding: 0.7rem 0.85rem; }
.tape-policy-preview {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(8rem, 11rem) auto;
  gap: 0.7rem;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 0.75rem 0.85rem;
}
.tape-policy-number-prefix {
  position: absolute;
  top: 50%;
  left: 0.5rem;
  color: var(--muted);
  font-size: var(--text-xs);
  transform: translateY(-50%);
}
.tape-policy-previews { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; border-top: 1px solid var(--line); padding: 0.55rem 0.85rem; }
.tape-inline-edit { display: flex; min-width: 0; align-items: center; gap: 0.6rem; }
.tape-value { min-width: 0; overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.tape-edit {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.16rem 0.42rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-xs);
}
.tape-edit:hover { border-color: var(--line-strong); color: CanvasText; }
.tape-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tape-edit-pop {
  position: fixed;
  margin: 0;
  inset: auto;
  width: 16rem;
  max-width: calc(100vw - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
  overflow: auto;
  border: 1px solid var(--line);
  padding: 0.8rem 0.85rem;
  background: var(--ground);
  color: CanvasText;
  box-shadow: 0 10px 30px rgb(0 0 0 / 18%);
  font-family: var(--font-sans);
}
.tape-edit-pop::backdrop { background: transparent; }
.tape-edit-body { min-width: 0; margin: 0; padding: 0; border: 0; }
.tape-edit-title { display: block; margin-bottom: 0.55rem; color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
.tape-edit-field { display: flex; align-items: center; gap: 0.45rem; }
.tape-edit-switches { display: flex; flex-direction: column; gap: 0.5rem; }
.tape-edit-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.tape-edit-confirm { display: flex; gap: 0.4rem; }
.tape-add-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 0.6rem 0.85rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
}
.tape-add-row:hover { background: var(--panel-strong); color: CanvasText; }
.tape-add-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tape-add-glyph {
  display: inline-grid;
  width: 0.78rem;
  height: 0.78rem;
  place-items: center;
  font-size: var(--text-md);
  line-height: 1;
}
.tape-dialog {
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--ground);
  color: CanvasText;
  box-shadow: 0 20px 60px rgb(0 0 0 / 35%);
  font-family: var(--font-sans);
}
.tape-dialog::backdrop { background: rgb(0 0 0 / 42%); }
.tape-dialog.wide { width: min(34rem, calc(100vw - 2rem)); }
.tape-dialog-head { display: flex; flex-direction: column; gap: 0.6rem; border-bottom: 1px solid var(--line); padding: 0.9rem 0.95rem; }
.tape-dialog-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line);
  padding: 0.7rem 0.95rem;
}
.tape-dialog-body { display: grid; gap: 0.85rem; padding: 0.9rem 0.95rem; }
.tape-dialog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
fieldset.tape-dialog-body { margin: 0; min-width: 0; border: 0; }
.tape-dialog-toggle { justify-content: end; grid-column: 1 / -1; }
.tape-dialog-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
}
.tape-connect-options { gap: 0.6rem; }
.tape-connect-option {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 0.85rem 0.9rem;
  color: CanvasText;
  text-decoration: none;
  transition: border-color 100ms ease,
    background 100ms ease;
}
.tape-connect-option-icon {
  display: inline-grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border-radius: 2px;
  background: var(--panel-strong);
}
.tape-connect-option-copy { display: grid; gap: 0.25rem; }
.tape-connect-option-arrow { color: var(--muted); font-size: var(--text-md); transition: color 100ms ease,
    transform 100ms ease; }
.tape-connect-option:hover { border-color: CanvasText; background: var(--panel-strong); color: CanvasText; }
.tape-connect-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tape-confirm-line { display: flex; align-items: baseline; gap: 0.6rem; margin: 0; font-size: var(--text-md); }
.tape-confirm-arrow { font-size: var(--text-sm); }
.tape-confirm-note { margin: 0; font-size: var(--text-xs); line-height: 1.5; }
.tape-scopes { display: inline-flex; gap: 1px; padding: 1px; margin-bottom: 1.3rem; background: var(--line); }
.tape-fleet-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1.3rem;
}
.tape-modes { display: flex; flex: 0 0 auto; gap: 1px; padding: 1px; background: var(--line); }
.tape-mode {
  border: 0;
  padding: 0.4rem 0.7rem;
  background: var(--ground);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
}
.tape-mode[aria-pressed="true"] { background: var(--panel-strong); color: CanvasText; font-weight: 600; }
.tape-mode:hover { color: CanvasText; }
.tape-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1px; border-top: 1px solid var(--line); background: var(--line); }
.tape-fact { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.7rem 0.85rem; background: var(--ground); }
.tape-meter {
  display: block;
  width: 100%;
  max-width: 9rem;
  height: 2px;
  margin-top: 0.35rem;
  background: var(--line);
}
.tape-label-list { display: flex; flex-wrap: wrap; gap: 0.4rem; border-top: 1px solid color-mix(in srgb, var(--line) 45%, transparent); padding: 0.6rem 0.85rem; }
.tape-form { border-top: 1px solid var(--line); padding: 0.85rem 0.85rem 0.9rem; }
.tape-form-title { display: block; font-size: var(--text-sm); font-weight: 600; }
.tape-form-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.7rem; }
.tape-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.85rem; }
.tape-byo-ready { justify-content: space-between; margin: 0 0 0.85rem; font-size: var(--text-xs); }
.tape-form-spacer { flex: 1; }
.tape-repo-job-routes { margin-top: 1.3rem; }
.tape-list-job-routes { --list-columns: 0.72rem minmax(12rem, 1.5fr) 9rem 8rem minmax(7rem, 1fr)
    8.5rem; --list-min-width: 54rem; }
.tape-job-route-repo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-sans); font-size: var(--text-sm); }
.tape-ledger-people { min-width: 28rem; }
.tape-person { display: flex; min-width: 0; align-items: center; gap: 0.55rem; }
.tape-person-login { overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.tape-person-avatar {
  position: relative;
  display: inline-grid;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  overflow: hidden;
  place-items: center;
  border-radius: 50%;
  background: var(--panel-strong);
  color: var(--muted);
  font-size: var(--text-xs);
}
.tape-ledger-sharing { min-width: 36rem; }
.tape-ledger-passkeys { min-width: 24rem; }
.tape-mobile-label { display: none; }
.link-button.tape-danger { color: var(--red); }
.tape-repo-title { align-items: center; }
.tape-repo-sections { margin-top: 1.3rem; }
.tape-ledger-repo-settings { min-width: 32rem; }
.tape-detail-actions {
  display: flex;
  grid-column: 2;
  grid-row: 2 / 4;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.45rem;
}
.tape-setup-step-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.85rem; min-width: 0; }
.tape-setup-step-number {
  flex: 0 0 0.72rem;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.tape-setup-selection-count { font-family: var(--font-sans); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.tape-setup-step-note {
  max-width: 68ch;
  margin: 0 0 0.75rem;
  padding-left: calc(0.72rem + 0.6rem);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.tape-list-setup { --list-min-width: 36rem; --list-columns: 0.72rem minmax(12rem, 1fr) minmax(14rem, 1.3fr) 0; }
.tape-list-setup.with-actions { --list-min-width: 44rem; --list-columns: 0.72rem minmax(12rem, 1fr) minmax(14rem, 1.3fr) 10rem; }
.tape-list-setup.tape-list-setup-stages { --list-min-width: 38rem; --list-columns: 0.72rem minmax(12rem, 1fr) minmax(14rem, 1.3fr) 1rem; }
.tape-setup-note {
  min-width: 0;
  overflow: hidden;
  flex: 0 1 auto;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tape-setup-action { display: flex; justify-content: flex-end; }
.tape-list-setup-jobs { --list-min-width: 46rem; --list-columns: 0.72rem minmax(11rem, 1.3fr) minmax(8rem, 0.8fr)
    minmax(7.5rem, 0.7fr) minmax(8rem, 0.8fr); }
.tape-setup-workflows { display: flex; flex-direction: column; gap: 0.75rem; }
.tape-setup-workflow-head { display: flex; min-width: 0; align-items: baseline; gap: 0.6rem; padding: 0.75rem var(--list-inset) 0.4rem; }
.tape-setup-workflow-note { margin: 0; padding: 0.2rem var(--list-inset) 0.65rem; font-size: var(--text-sm); line-height: 1.55; }
.tape-setup-runner { overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.tape-setup-span { grid-column: 3 / -1; }
.tape-setup-span-wide { grid-column: 2 / -1; }
.tape-setup-checkbox {
  display: grid;
  width: 0.78rem;
  height: 0.78rem;
  justify-self: center;
  place-items: center;
  border: 1.5px solid color-mix(in srgb, CanvasText 42%, transparent);
  border-radius: 2px;
  transition: border-color 120ms ease,
    background-color 120ms ease;
}
.tape-setup-child { min-height: 2rem; }
.tape-setup-rail-line { width: 1px; align-self: stretch; justify-self: center; margin-block: -0.18rem; background: repeating-linear-gradient(
    to bottom,
    var(--line-strong) 0 3px,
    transparent 3px 6px
  ); }
.tape-setup-proposal { min-width: 0; border: 1px solid var(--line); --setup-preview-height: clamp(10rem, 32svh, 20rem); }
.tape-setup-open {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.2rem;
  padding: 0.85rem var(--list-inset, 0.85rem);
}
.tape-setup-open-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-left: auto; }
.tape-setup-preview { min-width: 0; }
.tape-setup-preview-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1.3rem; padding: 0.85rem var(--list-inset, 0.85rem); }
.tape-setup-preview-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.85rem;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
}
.tape-setup-preview-message,
.tape-setup-preview-message.inline-error { margin: 0; padding: 0 var(--list-inset, 0.85rem) 0.85rem; font-size: var(--text-sm); }
.tape-setup-preview-files { position: relative; border-top: 1px solid var(--line); --shared-hover-radius: 0; }
.tape-setup-preview-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tape-setup-preview-directory { color: var(--muted); }
.tape-setup-code {
  margin: 0;
  padding: 0.65rem 0;
  max-height: var(--setup-preview-height);
  overflow: auto;
  border-top: 1px solid var(--line);
  font: var(--text-sm)/1.65 var(--font-mono);
  tab-size: 2;
  --sh-class: var(--amber);
  --sh-identifier: var(--accent);
  --sh-sign: var(--muted);
  --sh-property: var(--accent);
  --sh-entity: var(--amber);
  --sh-jsxliterals: CanvasText;
  --sh-string: var(--green);
  --sh-keyword: var(--amber);
  --sh-comment: var(--muted);
}
.tape-setup-code:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tape-setup-code-added { background: color-mix(in srgb, var(--green) 7%, transparent); }
.tape-setup-code-removed { background: color-mix(in srgb, var(--red) 7%, transparent); }
.tape-setup-code-hunk { color: var(--muted); }
.tape-setup-preview-description { padding-inline: var(--list-inset, 0.85rem); }
.tape-setup-preview-placeholder-row { display: flex; align-items: center; min-height: 2.8rem; padding-inline: var(--list-inset, 0.85rem); border-top: 1px solid var(--line); }
.tape-setup-preview-placeholder-code {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: var(--setup-preview-height);
  padding: 0.85rem var(--list-inset, 0.85rem);
  border-top: 1px solid var(--line);
}
.tape-setup-done { margin: 0.75rem 0 0; padding: 0 var(--list-inset, 0.85rem); font-size: var(--text-sm); }
.tape-runs-scroll { overflow-x: auto; overflow-y: hidden; margin-top: 1.3rem; }
.tape-detail-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; margin-bottom: 1.1rem; }
.tape-back {
  grid-column: 1 / -1;
  justify-self: start;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-xs);
}
.tape-back:hover { color: CanvasText; }
.tape-detail-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.7rem; margin-top: 0.4rem; }
.tape-detail-sub { grid-column: 1; margin: 0.25rem 0 0; font-size: var(--text-sm); }
.tape-detail-revision {
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 0.15rem;
  grid-row: 2 / 4;
  grid-column: 2;
  font-size: var(--text-xs);
}
.tape-overview-dense { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tape-machine-diagnostics { margin: -0.2rem 0 1.4rem; font-size: var(--text-sm); }
.tape-machine-diagnostics > summary { width: fit-content; color: var(--muted); cursor: pointer; }
.tape-machine-diagnostics > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tape-machine-diagnostics[open] > summary { margin-bottom: 0.65rem; color: CanvasText; }
.tape-machine-diagnostics .tape-config { border: 1px solid var(--line); }
.tape-heading-meta { flex: 0 0 auto; font-size: var(--text-xs); }
.tape-ledger-slots { min-width: 49.5rem; }
.tape-ledger-slot-usage { min-width: 49.5rem; }
.tape-ledger-phases { min-width: 22.5rem; }
.tape-ledger-failures { min-width: 40rem; }
.tape-machine-name { display: flex; min-width: 0; flex-direction: column; gap: 0.08rem; }
.tape-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.tape-metric { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.8rem; background: var(--ground); }
.tape-slot-metrics { margin-top: 1rem; }
.tape-slot-metric-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
  font-size: var(--text-sm);
}
.tape-slot-empty {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border: 1px solid var(--line);
  padding: 0.9rem 0.85rem;
  font-size: var(--text-sm);
}
.tape-profile { border-top: 1px solid var(--line); padding: 0.75rem 0.85rem; }
.tape-profile:first-child { border-top: 0; }
.tape-profile-head { display: flex; align-items: baseline; gap: 0.7rem; }
.tape-state.attention { background: var(--red); }
.tape-profile-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1rem;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: var(--text-xs);
}
.tape-profile-checks { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; margin-top: 0.4rem; font-size: var(--text-xs); }
.tape-profile-note { margin: 0.45rem 0 0; font-size: var(--text-xs); line-height: 1.5; }
.tape-profile-remedy { margin: 0.3rem 0 0; font-size: var(--text-xs); line-height: 1.5; }
.tape-detail-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.tape-targets { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 0.85rem; }
.tape-target {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--line);
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  font-size: var(--text-sm);
}
.tape-target.selected { border-color: var(--line-strong); background: var(--panel-strong); }
.tape-config { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; border-top: 1px solid var(--line); }
.tape-config-toggle { border-top: 1px solid color-mix(in srgb, var(--line) 45%, transparent); padding: 0.6rem 0.85rem; }
.tape-runner-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; }
.tape-runner-field { display: inline-flex; align-items: center; gap: 0.35rem; }
.tape-runner-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
  padding: 0.55rem 0.85rem;
}
.tape-transfer { border-top: 1px solid var(--line); padding: 0.8rem 0.85rem; }
.tape-transfer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.tape-state { width: 0.42rem; height: 0.42rem; flex: 0 0 auto; background: color-mix(in srgb, CanvasText 26%, transparent); }
.tape-state.available { background: var(--green); }
.tape-state.pending { background: var(--amber); }
.tape-empty-line,
.tape-empty-line.inline-error { margin: 0; padding: 1rem 0.85rem; font-size: var(--text-sm); }
.tape-ledger-lifecycle { min-width: 52rem; }
.tape-lifecycle-timing-note { margin: 0.2rem 0 0.7rem; font-size: var(--text-xs); line-height: 1.45; }
.tape-lifecycle-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1.3rem;
}
.tape-lifecycle-freshness { margin-left: auto; font-family: var(--font-sans); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.tape-lifecycle-timing { cursor: default; }
.tape-lifecycle-quiet { border: 1px solid var(--line); }
.tape-lifecycle-step { display: flex; min-width: 0; align-items: baseline; gap: 0.45rem; }
.tape-lifecycle-terminal { font-size: var(--text-xs); letter-spacing: 0.04em; }
.tape-lifecycle-layer-count { font-size: var(--text-xs); }
.tape-grant { font-size: var(--text-sm); }
.tape-grant.active { color: var(--green); }
.tape-grant.pending { color: var(--amber); }
.tape-grant.revoked { color: var(--muted); }
.tape-ledger-entitlements { min-width: 49.5rem; }
.tape-ledger-audit { min-width: 34rem; }
.tape-runner-jobs { margin-top: 1.4rem; }
.tape-list-more { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.9rem 0 0.15rem; }
.tape-admin-link {
  display: block;
  width: 100%;
  text-decoration: none;
  margin-top: auto;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 0.5rem 0.55rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
}
.tape-admin-link:hover { color: CanvasText; }
.tape-admin-link[aria-current="page"] { color: CanvasText; font-weight: 600; }
.tape-switch {
  display: flex;
  gap: 1px;
  overflow: hidden;
  width: 100%;
  margin-top: auto;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
}
.tape-runs-card {
  min-width: 46rem;
  border: 0;
  padding: 0;
  --tree-step: 1.3rem;
  --tree-rail: calc(0.36rem - 0.5px);
  --sticky-surface: color-mix(in srgb, var(--ground) 72%, transparent);
}
.tape-blocked-runners {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1rem;
  border-radius: 3px;
  padding: 0.5rem 0.65rem;
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.tape-blocked-runners-action { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.tape-github-status {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  border-block: 1px solid var(--line);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.tape-github-status > .decision-icon { flex: 0 0 auto; }
.tape-github-status > div { min-width: 0; }
.tape-github-status-detail { color: var(--muted); }
.tape-github-status-detail a { color: var(--accent); }
* { box-sizing: border-box; }
html { min-width: 20rem; }
body { min-height: 100vh; margin: 0; line-height: 1.45; background: var(--ground); color: CanvasText; }
button,
input { font: inherit; }
p { margin-top: 0; margin-bottom: 0; }
.muted { color: var(--muted); }
/* One moving surface belongs to the collection; its rows stay transparent. */
:where(.shared-hover-container) { position: relative; isolation: isolate; }
.shared-hover-highlight {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: var(--shared-hover-radius, 7px);
  background: var(--shared-hover-background, var(--panel-strong));
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  will-change: transform;
}
.shared-hover-highlight[data-glide] { transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1),
    width 200ms cubic-bezier(0.2, 0.7, 0.2, 1),
    height 200ms cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 120ms ease; }
.app-shell { display: grid; min-height: 100vh; grid-template-columns: 13.5rem minmax(0, 1fr); }
.navigation-progress.tape {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
  animation: navigation-progress-appear 120ms step-end both;
}
.navigation-progress::before {
  content: "";
  display: block;
  width: 35%;
  height: 100%;
  background: var(--accent);
  animation: navigation-progress-travel 1.6s linear infinite;
}
@keyframes navigation-progress-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes navigation-progress-travel {
  from { transform: translateX(-100%); }
  to { transform: translateX(286%); }
}
.page-switcher-trigger {
  display: flex;
  width: 100%;
  min-height: 2.35rem;
  align-items: center;
  gap: 0.55rem;
  margin: 0.85rem 0 0.55rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0.45rem 0.6rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--text-sm);
  text-align: left;
  transition: border-color 120ms ease,
    color 120ms ease,
    background 120ms ease;
}
.page-switcher-trigger:hover { border-color: var(--line-strong); background: var(--panel); color: CanvasText; }
.page-switcher-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-switcher-trigger svg,
.page-switcher-search svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.5;
}
.page-switcher-trigger kbd {
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.1rem 0.3rem;
  color: var(--muted);
  font: inherit;
  font-size: var(--text-xs);
}
.page-switcher-dialog:not([open]) { display: none; }
.page-switcher-dialog[open] {
  position: fixed;
  inset: 0;
  display: flex;
  width: min(36rem, calc(100vw - 1.5rem));
  max-height: min(36rem, calc(100dvh - 1.5rem));
  flex-direction: column;
  margin: min(12vh, 7rem) auto auto;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  padding: 0;
  background: Canvas;
  color: CanvasText;
  box-shadow: 0 30px 80px rgb(0 0 0 / 28%),
    0 4px 18px rgb(0 0 0 / 12%);
}
.page-switcher-dialog::backdrop { background: color-mix(in srgb, #07060f 54%, transparent); backdrop-filter: blur(3px); }
.page-switcher-search {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--line);
  padding: 0 1rem;
  color: var(--muted);
}
.page-switcher-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: CanvasText;
  font-size: 1rem;
}
.page-switcher-search input::placeholder { color: var(--muted); }
.page-switcher-search input::-webkit-search-cancel-button { cursor: pointer; }
.page-switcher-search:focus-within { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 66%, transparent); }
.page-switcher-search > kbd,
.page-switcher-footer kbd {
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 0.12rem 0.3rem;
  color: var(--muted);
  font-family: inherit;
  font-size: var(--text-xs);
  line-height: 1.2;
  white-space: nowrap;
}
.page-switcher-results {
  --shared-hover-background: color-mix(
    in srgb,
    var(--panel-strong) 68%,
    transparent
  );
  --shared-hover-radius: 8px;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0.35rem 0.55rem 0.6rem;
}
.page-switcher-group + .page-switcher-group { margin-top: 0.4rem; }
.page-switcher-group-title { margin: 0; padding: 0.65rem 0.5rem 0.3rem; color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
.page-switcher-result {
  display: flex;
  width: 100%;
  min-height: 3rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 0;
  border-radius: 8px;
  padding: 0.45rem 0.65rem;
  background: transparent;
  color: CanvasText;
  cursor: pointer;
  text-align: left;
}
.page-switcher-result:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.page-switcher-result-copy { display: flex; min-width: 0; flex-direction: column; gap: 0.05rem; }
.page-switcher-result-copy strong { overflow: hidden; font-size: var(--text-md); font-weight: 670; text-overflow: ellipsis; white-space: nowrap; }
.page-switcher-result-copy small { overflow: hidden; color: var(--muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.page-switcher-current { flex: none; color: var(--muted); font-size: var(--text-xs); }
.page-switcher-empty { margin: 0; padding: 1.5rem 0.7rem; color: var(--muted); font-size: var(--text-sm); text-align: center; }
.page-switcher-footer {
  display: flex;
  flex: none;
  gap: 1rem;
  border-top: 1px solid var(--line);
  padding: 0.6rem 1rem;
  color: var(--muted);
  font-size: var(--text-xs);
}
.page-switcher-footer span { display: inline-flex; align-items: center; gap: 0.25rem; }
.sidebar-installation { position: relative; min-width: 0; margin: 0; }
.sidebar-installation-control:hover,
.sidebar-installation-control[aria-expanded="true"] { border-color: var(--line-strong); background: var(--panel); }
.sidebar-installation-control:focus-visible { outline: 0; border-color: color-mix(in srgb, var(--accent) 72%, CanvasText 28%); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
.sidebar-installation-avatar {
  position: relative;
  display: inline-grid;
  width: 1.9rem;
  height: 1.9rem;
  overflow: hidden;
  place-items: center;
  border-radius: 7px;
  background: CanvasText;
  color: Canvas;
  font-size: var(--text-sm);
  font-weight: 850;
  letter-spacing: -0.04em;
}
.sidebar-installation-avatar-fallback { display: grid; width: 100%; height: 100%; place-items: center; }
:is(.sidebar-installation-avatar, .tape-person-avatar, .sidebar-user-avatar) img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--panel-strong);
  object-fit: cover;
  opacity: 0;
}
:is(.sidebar-installation-avatar, .tape-person-avatar, .sidebar-user-avatar) img[data-loaded="true"] { opacity: 1; }
.sidebar-installation-copy { display: flex; min-width: 0; flex-direction: column; }
.sidebar-installation-copy small {
  margin-top: 0.12rem;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 620;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-installation-chevron { width: 0.7rem; height: 0.7rem; color: var(--muted); transition: color 120ms ease,
    transform 120ms ease; }
.sidebar-installation-chevron path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.sidebar-installation-control:hover .sidebar-installation-chevron { color: CanvasText; }
.sidebar-installation-control[aria-expanded="true"]
  .sidebar-installation-chevron { color: CanvasText; transform: rotate(180deg); }
.sidebar-installation-menu-label {
  padding: 0.38rem 0.48rem 0.3rem;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sidebar-installation-menu-error { margin: 0.28rem 0.48rem 0.18rem; color: var(--danger); font-size: var(--text-xs); line-height: 1.35; }
.sidebar-installation-option:disabled { opacity: 0.55; cursor: wait; }
.sidebar-installation-option:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.sidebar-installation-option .sidebar-installation-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 6px;
  background: var(--panel-strong);
  color: CanvasText;
  font-size: var(--text-xs);
}
.sidebar-installation-connect-icon svg { width: 0.9rem; height: 0.9rem; }
.sidebar-installation-connect-icon path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
.sidebar-installation-connect:hover { color: CanvasText; }
.sidebar-installation-connect:focus-visible { color: CanvasText; outline: 2px solid var(--accent); outline-offset: -1px; }
.brand-mark {
  display: inline-grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  border-radius: 0.46rem;
  background: CanvasText;
  color: Canvas;
  font-size: var(--text-sm);
  font-weight: 850;
  letter-spacing: -0.07em;
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 1rem;
  --shared-hover-background: color-mix(
    in srgb,
    var(--panel-strong) 48%,
    transparent
  );
  --shared-hover-radius: 6px;
}
.sidebar-link::before {
  position: absolute;
  top: 0.48rem;
  bottom: 0.48rem;
  left: 0.25rem;
  width: 2px;
  border-radius: 999px;
  background: transparent;
  content: "";
  transition: background 120ms ease;
}
.sidebar-link:hover { color: CanvasText; }
.sidebar-link.active { background: transparent; color: CanvasText; font-weight: 600; }
.sidebar-link.active::before { background: var(--accent); }
.sidebar-link:focus-visible,
.sidebar-user-button:focus-visible,
.sidebar-user-menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sidebar-link svg { width: 1rem; height: 1rem; flex: 0 0 auto; overflow: visible; }
.sidebar-link svg path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.45; }
.sidebar-nav.has-docs-navigation { min-height: 0; flex: 1; overflow-y: auto; padding-bottom: 0.55rem; scrollbar-width: thin; }
.sidebar-docs-section { display: flex; min-width: 0; flex-direction: column; }
.sidebar-docs-parent { position: relative; }
.sidebar-docs-parent button.sidebar-link { width: 100%; border: 0; background: transparent; cursor: pointer; }
.sidebar-link .sidebar-docs-chevron { margin-left: auto; width: 0.72rem; height: 0.72rem; transition: transform 160ms ease; }
.sidebar-docs-parent button[aria-expanded="true"] { color: CanvasText; }
.sidebar-docs-parent button[aria-expanded="true"] .sidebar-docs-chevron { transform: rotate(180deg); }
.sidebar-docs-chevron path,
.sidebar-docs-group path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.sidebar-docs-tree { margin: 0.18rem 0 0.25rem 0.78rem; padding: 0.1rem 0 0.15rem 0.48rem; }
.sidebar-docs-tree-mobile { display: none; }
.sidebar-docs-navigation { --shared-hover-background: color-mix(
    in srgb,
    var(--panel-strong) 66%,
    transparent
  ); --shared-hover-radius: 5px; }
.sidebar-docs-navigation section + section { margin-top: 0.18rem; }
.sidebar-docs-group {
  position: relative;
  z-index: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  border: 0;
  border-radius: 5px;
  padding: 0.38rem 0.42rem;
  background: transparent;
  color: color-mix(in srgb, CanvasText 76%, transparent);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 680;
  letter-spacing: 0.015em;
  text-align: left;
}
.sidebar-docs-group-current { margin: 0; cursor: default; }
.sidebar-docs-group:focus-visible,
.sidebar-docs-group-pages a:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.sidebar-docs-group svg { width: 0.65rem; height: 0.65rem; flex: 0 0 auto; transition: transform 160ms ease; }
.sidebar-docs-group[aria-expanded="true"] svg { transform: rotate(90deg); }
.sidebar-docs-group-pages { padding: 0.05rem 0 0.18rem 0.22rem; }
.sidebar-docs-group-pages a {
  position: relative;
  z-index: 0;
  display: block;
  overflow: hidden;
  border-radius: 5px;
  padding: 0.34rem 0.42rem;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.3;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-docs-group-pages a:hover { color: CanvasText; }
.sidebar-docs-group-pages a.active { background: var(--panel-strong); color: CanvasText; font-weight: 650; }
.sidebar-user { position: relative; margin-top: auto; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.sidebar-user-button:hover,
.sidebar-user-button[aria-expanded="true"] { background: color-mix(in srgb, var(--panel-strong) 52%, transparent); }
.sidebar-user-avatar {
  position: relative;
  overflow: hidden;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 auto;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: color-mix(in srgb, CanvasText 82%, Canvas 18%);
  color: Canvas;
  font-size: var(--text-xs);
  font-weight: 800;
}
.sidebar-user-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.sidebar-user-copy small { margin-top: 0.08rem; color: var(--muted); font-size: var(--text-xs); line-height: 1.2; }
.sidebar-user-chevron { width: 0.64rem; height: 0.64rem; flex: 0 0 auto; color: var(--muted); transition: transform 120ms ease; }
.sidebar-user-chevron path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }
.sidebar-user-button[aria-expanded="true"] .sidebar-user-chevron { transform: rotate(180deg); }
.sidebar-user-menu button:disabled { opacity: 0.55; cursor: wait; }
@keyframes sidebar-menu-in {
  from { opacity: 0; transform: translateY(0.2rem) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.link-button {
  color: inherit;
  border: 0;
  padding: 0;
  background: transparent;
  text-decoration: underline;
  cursor: pointer;
}
.link-button:disabled { opacity: 0.55; cursor: wait; }
.dashboard-content { width: 100%; min-width: 0; max-width: 60rem; margin: 0 auto; padding: 2.7rem clamp(1.4rem, 3vw, 3rem) 5rem; }
.dashboard-route-pending {
  display: flex;
  min-height: 12rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 650;
}
.dashboard-route-pending-dot {
  width: 0.42rem;
  height: 0.42rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  animation: running-pulse 1.5s ease-in-out infinite;
}
.fleet + .fleet { margin-top: 3rem; }
.status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.34rem;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 650;
  white-space: nowrap;
}
.dot { width: 0.48rem; height: 0.48rem; border-radius: 50%; background: color-mix(in srgb, CanvasText 24%, transparent); }
.status.connected { color: color-mix(in srgb, var(--green) 78%, CanvasText); }
.status.connected .dot { width: 0.38rem; height: 0.38rem; background: var(--green); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; margin: 1.25rem 0; }
.machine-state {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  text-align: right;
}
.mode { border-color: color-mix(in srgb, var(--amber) 42%, var(--line)); }
.socket.live { border-color: color-mix(in srgb, var(--green) 52%, var(--line)); color: CanvasText; }
.empty { text-align: center; padding: 3.5rem 1.5rem; }
.empty .muted { margin-top: 0.55rem; }
.notice.error { background: color-mix(in srgb, var(--red) 13%, transparent); }
.pairing-code { font-family: var(--font-mono); font-size: 1.2rem; letter-spacing: 0.07em; }
/* Pair a machine: a floating sheet on the page ground. The header (title
   and the Mac / Linux switch) pins while the body scrolls under it.
   Commands are the task, so each gets one hairline field with a copy icon;
   everything else is quiet text. */
.pair-mac-dialog {
  --pair-inset: 1.5rem;
  width: min(calc(100% - 2rem), 40rem);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 0;
  background: var(--ground, Canvas);
  color: CanvasText;
  font-family: var(--font-sans);
  box-shadow: 0 24px 64px rgb(0 0 0 / 22%),
    0 6px 20px rgb(0 0 0 / 14%);
  transition: opacity 180ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pair-mac-dialog::backdrop { background: rgb(0 0 0 / 42%); transition: background-color 180ms ease; }
@starting-style {
  .pair-mac-dialog[open] { opacity: 0; transform: translateY(0.5rem) scale(0.985); }
  .pair-mac-dialog[open]::backdrop { background-color: rgb(0 0 0 / 0%); }
}
.pair-mac-dialog:focus { outline: none; }
.pair-mac-head { position: sticky; z-index: 1; top: 0; padding: 1.3rem var(--pair-inset) 1.1rem; background: var(--ground, Canvas); }
/* The rule under the pinned header appears only once content scrolls
   beneath it, as the ledger's pinned heads do. */
@supports (animation-timeline: scroll()) {
  .pair-mac-head { animation: pair-head-rule linear both; animation-timeline: scroll(nearest block); animation-range: 0 0.75rem; }
}
@keyframes pair-head-rule {
  from { box-shadow: 0 1px 0 transparent; }
  to { box-shadow: 0 1px 0 var(--line); }
}
.pair-mac-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.pair-mac-title h2 { margin: 0; font-size: 1.2rem; line-height: 1.25; }
.pair-mac-head .tape-scopes { margin: 0; }
.pair-mac-close {
  display: grid;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  margin-right: -0.45rem;
  place-items: center;
  border: 0;
  border-radius: 2px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 120ms ease,
    color 120ms ease;
}
.pair-mac-close:hover { background: var(--panel-strong); color: CanvasText; }
.pair-mac-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.pair-mac-close span { width: 0.8rem; height: 0.8rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 4 8 8m0-8-8 8' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E")
    center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 4 8 8m0-8-8 8' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E")
    center / contain no-repeat; }
.pair-mac-body { padding: 0.1rem var(--pair-inset) 1.5rem; }
.pair-mac-lede { margin: 0 0 1rem; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.pair-mac-note { margin: 0.9rem 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }
.pair-mac-body code:not(.pair-mac-field code) { font-family: var(--font-mono); color: CanvasText; overflow-wrap: anywhere; }
.pair-mac-field {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 0.3rem 0.3rem 0.3rem 0.8rem;
  transition: border-color 160ms ease;
}
.pair-mac-field.block { align-items: flex-start; padding-block: 0.55rem 0.3rem; }
.pair-mac-field:has(.pair-copy.copied) { border-color: color-mix(in srgb, CanvasText 48%, transparent); }
.pair-mac-field > code {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  scrollbar-width: none;
  line-height: 1.75rem;
  white-space: nowrap;
  user-select: all;
}
.pair-mac-field pre {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  scrollbar-width: none;
  padding-bottom: 0.25rem;
  line-height: 1.65;
  white-space: pre;
}
.pair-mac-field pre code { font: inherit; }
.pair-mac-field > code::-webkit-scrollbar,
.pair-mac-field pre::-webkit-scrollbar { display: none; }
.pair-copy {
  display: grid;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border: 0;
  border-radius: 2px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 120ms ease,
    color 120ms ease;
}
.pair-mac-field.block .pair-copy { margin-top: -0.25rem; }
.pair-copy:hover,
.pair-copy.copied { background: var(--panel-strong); color: CanvasText; }
.pair-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.pair-copy span { width: 0.85rem; height: 0.85rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.75' y='5.75' width='7.5' height='7.5' rx='1'/%3E%3Cpath d='M10.25 3.5v-.25a.75.75 0 0 0-.75-.75H3.25a.75.75 0 0 0-.75.75V9.5c0 .41.34.75.75.75h.25'/%3E%3C/g%3E%3C/svg%3E")
    center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.75' y='5.75' width='7.5' height='7.5' rx='1'/%3E%3Cpath d='M10.25 3.5v-.25a.75.75 0 0 0-.75-.75H3.25a.75.75 0 0 0-.75.75V9.5c0 .41.34.75.75.75h.25'/%3E%3C/g%3E%3C/svg%3E")
    center / contain no-repeat; }
.pair-copy.copied span { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.75 8.5 6.25 12l7-7.75' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.75 8.5 6.25 12l7-7.75' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat; }
.pair-runtime { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-bottom: 1.2rem; }
.pair-runtime p { flex: 1 1 14rem; margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
/* Proxmox setup is two runs on two machines, so its steps share a numbered
   track: the number, then a sans heading, a muted sentence and the command. */
.pair-steps {
  display: grid;
  gap: 1.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pair-step;
}
.pair-steps li { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); column-gap: 0.55rem; row-gap: 0.45rem; counter-increment: pair-step; }
.pair-steps li > * { grid-column: 2; }
.pair-steps li::before {
  content: counter(pair-step);
  grid-row: 1;
  grid-column: 1;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.35rem;
}
.pair-steps h3 { grid-row: 1; margin: 0; font-size: var(--text-md); line-height: 1.35rem; }
.pair-steps li > p { margin: 0 0 0.2rem; color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }
/* Pairing an installed agent under the one-line Linux setup: a quiet
   fallback below a hairline that bleeds to the sheet's edges. */
.pair-fallback { margin: 1.5rem calc(-1 * var(--pair-inset)) 0; border-top: 1px solid var(--line); padding: 1.1rem var(--pair-inset) 0; }
.pair-fallback > h3 { margin: 0; font-size: var(--text-md); line-height: 1.3; }
.pair-fallback > p { margin: 0.2rem 0 0.8rem; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
/* Approve a pairing request. The verification code is the check that
   matters, so it is the loudest figure on the page; the device and code sit
   in one bordered band like the overview tiles, and the accounts are a Tape
   list of radio rows. No outer card. */
.mac-pairing-review { max-width: 40rem; }
.pair-approve-pending { margin: 0; color: var(--muted); font-size: var(--text-sm); }
/* Errors are the Tape failure band; the no-account notice is the same band
   in muted ink. */
.mac-pairing-review .notice {
  margin: 0;
  border-radius: 3px;
  padding: 0.6rem 0.75rem;
  background: var(--panel-strong);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.mac-pairing-review .notice.error { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.pair-approve-targets + .pair-approve-actions,
.mac-pairing-review .notice + .pair-approve-actions { margin-top: 1.1rem; }
.pair-approve-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1px;
  margin: 0;
  padding: 1px;
  background: var(--line);
}
.pair-approve-facts > div { min-width: 0; padding: 1rem 1.1rem 1.05rem; background: var(--ground); }
.pair-approve-facts dt { color: var(--muted); font-family: var(--font-sans); font-size: var(--text-sm); }
.pair-approve-facts dd { margin: 0.35rem 0 0; }
.pair-approve-device {
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pair-approve-code {
  font-family: var(--font-mono);
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.05;
  white-space: nowrap;
}
.pair-approve-check { margin: 0.75rem 0 1.6rem; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.pair-approve-targets { --list-columns: 0.95rem minmax(0, 1fr); --list-min-width: 0; margin: 0; border: 0; padding: 0; }
.pair-approve-targets > legend { display: block; width: 100%; float: none; }
.pair-approve-targets .tape-list-row { cursor: pointer; }
.pair-approve-targets .tape-list-name strong { font-family: var(--font-sans); font-size: var(--text-md); font-weight: 500; }
.pair-approve-targets .tape-list-row:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
/* The radio is drawn like a machine mark: a hollow ring, filled once chosen. */
.pair-approve-radio {
  width: 0.78rem;
  height: 0.78rem;
  justify-self: center;
  border: 1.5px solid color-mix(in srgb, CanvasText 42%, transparent);
  border-radius: 50%;
  transition: border-color 120ms ease,
    box-shadow 120ms ease;
}
.pair-approve-targets .tape-list-row:hover .pair-approve-radio { border-color: CanvasText; }
.pair-approve-targets .tape-list-row.selected .pair-approve-radio { border-color: CanvasText; box-shadow: inset 0 0 0 2.5px var(--ground),
    inset 0 0 0 10px CanvasText; }
.pair-approve-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 1.1rem; }
.pair-approve-actions .button { margin: 0; }
.pair-approve-actions .button:disabled { cursor: not-allowed; }
.pair-approve-hint { color: var(--muted); font-size: var(--text-sm); }
.pair-approve-outcome { display: grid; grid-template-columns: 0.95rem minmax(0, 1fr); gap: 0.65rem; align-items: start; }
.pair-approve-outcome .status-mark-icon { margin-top: 0.2rem; }
.pair-approve-outcome strong { font-family: var(--font-sans); font-size: 1.125rem; font-weight: 500; }
.pair-approve-outcome p { margin: 0.3rem 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.fleet-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(7rem, 1fr)) auto;
  gap: 1rem;
  align-items: end;
  border-bottom: 1px solid var(--line);
  padding: 0 0.15rem 1rem;
}
.fleet-metrics > div { display: flex; min-width: 0; flex-direction: column; gap: 0.12rem; }
.fleet-metrics > div span { overflow: hidden; color: var(--muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.fleet-metrics > div strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.target-picker-status { min-width: 2.8rem; color: var(--green); font-size: var(--text-xs); }
.runs-card { border: 0; border-radius: 0; padding: 0.35rem 0 0; background: transparent; }
.runs-heading > span:first-child { grid-column: 1 / 3; letter-spacing: normal; text-transform: none; }
.revision-title {
  min-width: 0;
  overflow: hidden;
  flex: 0 1 auto;
  color: CanvasText;
  font-weight: 650;
  text-overflow: ellipsis;
}
.revision-meta {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex: 0 4 auto;
  align-items: baseline;
  color: var(--muted);
  font-size: var(--text-xs);
}
/* The PR number rides with the title but never truncates with it. */
.revision-pull-request { flex: 0 0 auto; margin-left: -0.45rem; color: var(--muted); text-decoration: none; }
a.revision-pull-request:hover { color: CanvasText; text-decoration: underline; text-underline-offset: 0.16rem; }
.revision-meta > span { flex: 0 0 auto; }
.revision-meta > span + span::before { margin: 0 0.38rem; content: "·"; }
.revision-meta > .revision-branch {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex: 0 1 auto;
  align-items: baseline;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
}
.revision-branch > span { flex: 0 0 auto; }
.revision-branch > .revision-branch-head { min-width: 0; overflow: hidden; flex: 0 1 auto; text-overflow: ellipsis; }
.revision-branch-arrow { margin: 0 0.35rem; }
/* A trigger stands in for a change title, so it keeps the title's face but
   steps back a shade: nothing changed, the clock or another workflow fired. */
.revision-trigger { color: color-mix(in srgb, CanvasText 62%, var(--muted)); }
.revision-workflows { display: grid; gap: 0.1rem; }
.run-card { position: relative; }
.run-row { position: relative; z-index: 0; }
/* Skipped rows dim by colour, not opacity, so the tooltip that explains the
   skip reads at full strength. */
.run-card.skipped > .run-row,
.run-card.skipped .run-identity strong,
.run-card.skipped .run-provider-name { color: var(--muted); }
.run-card.skipped .run-github-button { opacity: 0.58; }
.run-identity { display: flex; min-width: 0; align-items: baseline; gap: 0.55rem; }
.run-provider { position: relative; display: flex; min-width: 0; align-items: center; }
/* Provider is context, not status: plain text, with tone only when Mirage
   fell back or was refused. Result is the ledger's one coloured column. */
.run-provider-name.none,
.run-provider-name.pending { color: var(--muted); }
.run-provider-name.hosted { color: var(--amber); }
.run-metric-label { display: none; }
.run-github-button:hover,
.job-github-button:hover { background: var(--panel-strong); color: CanvasText; }
.run-github-button:focus-visible,
.job-github-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.run-github-button svg,
.job-github-button svg { display: block; width: 0.9rem; height: 0.9rem; fill: currentColor; }
.run-replay-notice {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  margin: -0.1rem 0.75rem 0.45rem 1.75rem;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.run-replay-notice.failure { border-color: color-mix(in srgb, var(--red) 36%, var(--line)); background: color-mix(in srgb, var(--red) 7%, transparent); }
.run-replay-notice.success { border-color: color-mix(in srgb, var(--green) 34%, var(--line)); background: color-mix(in srgb, var(--green) 7%, transparent); }
.run-replay-notice > .decision-icon { margin-top: 0.1rem; }
.run-replay-copy { display: grid; gap: 0.12rem; min-width: 0; }
.run-replay-copy strong { font-size: var(--text-sm); }
.run-replay-copy > span { color: var(--muted); overflow-wrap: anywhere; }
.run-details { padding: 0.35rem 0.75rem 0.8rem 1.75rem; }
.run-attempt { position: relative; padding: 0.35rem 0 0.1rem; }
.run-attempt + .run-attempt { margin-top: 0.55rem; padding-top: 0.85rem; }
.run-attempt + .run-attempt::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 1.1rem;
  height: 1px;
  background: color-mix(in srgb, var(--line) 62%, transparent);
  content: "";
}
.attempt-header { padding: 0 0.25rem; }
.attempt-header strong { font-size: var(--text-md); }
.attempt-jobs { margin-top: 0; }
.run-attempt.has-header .attempt-jobs { margin-top: 0.35rem; }
.attempt-empty { margin: 0.5rem 0 0.15rem 1.1rem; font-size: var(--text-sm); }
.jobs-list { display: grid; gap: 0.1rem; }
.job-row > .decision-icon { position: absolute; top: 50%; left: -1.25rem; translate: 0 -50%; }
.job-card,
.job-row-shell { position: relative; }
.job-card + .job-card::before { display: block; height: 1px; margin: 0.05rem 0.25rem 0.05rem 1.1rem; background: color-mix(in srgb, var(--line) 56%, transparent); content: ""; }
.job-github-button {
  position: absolute;
  z-index: 1;
  top: 50%;
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 6px;
  color: var(--muted);
  place-items: center;
  text-decoration: none;
  transform: translateY(-50%);
  right: -0.25rem;
}
.job-row:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--accent); outline-offset: -2px; }
.job-row.skipped,
.job-row.skipped .job-identity strong { color: var(--muted); }
/* Rows with nothing to open: keep the hover, drop the pointer. */
.run-static,
.job-static { cursor: default; }
/* The name and its tooltip share a box, so the tooltip opens just past the
   name on the row's own line instead of covering the rows around it. */
.row-name { position: relative; display: inline-flex; min-width: 0; flex: 0 1 auto; align-items: baseline; }
.row-name > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-static:hover .row-tooltip,
.run-static:focus-visible .row-tooltip,
.job-static:hover .row-tooltip,
.job-static:focus-visible .row-tooltip { opacity: 1; transform: translate(0, -50%); }
.decision-icon.success::after {
  width: 0.7rem;
  height: 0.7rem;
  background: Canvas;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6 2.2 2.2 4.8-4.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6 2.2 2.2 4.8-4.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.decision-icon.failure::after {
  width: 0.7rem;
  height: 0.7rem;
  background: Canvas;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3.2 3.2 5.6 5.6m0-5.6-5.6 5.6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3.2 3.2 5.6 5.6m0-5.6-5.6 5.6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.job-identity { grid-column: 1 / 3; display: flex; min-width: 0; align-items: baseline; gap: 0.65rem; }
.job-identity strong { min-width: 0; overflow: hidden; flex: 0 1 auto; text-overflow: ellipsis; white-space: nowrap; }
.job-provider { position: relative; display: flex; min-width: 0; align-items: center; }
.job-provider-empty { color: var(--muted); }
.job-metric { color: var(--muted); font-size: var(--text-sm); min-width: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.job-metric-label { display: none; }
.job-duration { white-space: normal; }
.job-duration-value { min-width: 0; overflow: hidden; color: inherit; text-overflow: ellipsis; white-space: nowrap; }
.job-duration-value.waiting { color: var(--muted); }
.job-details { padding: 0.25rem 0.25rem 0.5rem 1.1rem; }
.job-card.collapsed-into-run .job-details { padding: 0.15rem 0.25rem 0.1rem 0; }
.job-resource-metrics { margin: 0.35rem 0 0.8rem; border-block: 1px solid var(--line); padding: 0.8rem 0.1rem 0.9rem; }
.job-resource-note { margin: 0.45rem 0 0.35rem; color: var(--muted); font-size: var(--text-xs); }
.job-resource-note .link-button { color: inherit; font: inherit; }
.job-resource-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.job-resource-chart { min-width: 0; padding: 0.8rem 0.85rem 0.65rem; }
.job-resource-chart:nth-child(even) { border-left: 1px solid var(--line); }
.job-resource-chart:nth-child(n + 3) { border-top: 1px solid var(--line); }
.job-resource-chart-heading { display: flex; min-height: 2.15rem; align-items: start; justify-content: space-between; gap: 0.85rem; }
.job-resource-chart h4 { font-size: var(--text-sm); letter-spacing: -0.01em; }
.chart-legend.job-resource-legend { margin: 0.25rem 0 0; font-size: var(--text-xs); }
.job-resource-chart .chart { --chart-height: 5.3rem; margin-top: 0.9rem; }
.job-resource-summary {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 0.28rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.job-resource-summary > strong { font-size: var(--text-sm); }
.job-resource-summary > span { color: var(--muted); font-size: var(--text-xs); font-weight: 680; text-transform: uppercase; }
/* Disk's figures are two groups, its peak and its totals, which wrap as
   units rather than word by word. */
.job-resource-summary:has(> .job-resource-peak) { flex-wrap: wrap; justify-content: flex-end; gap: 0.12rem 0.65rem; }
.job-resource-peak { position: relative; display: inline-flex; align-items: baseline; gap: 0.28rem; cursor: default; }
.job-resource-peak > strong { font-size: var(--text-sm); }
.job-resource-peak > span:not(.status-tooltip) { color: var(--muted); font-size: var(--text-xs); font-weight: 680; text-transform: uppercase; }
.job-resource-peak.over > strong:first-child { color: var(--amber); }
.job-resource-percentiles { display: grid; gap: 0.06rem; margin: 0; }
.job-resource-percentiles > div { display: grid; grid-template-columns: 2rem auto; gap: 0.32rem; }
.job-resource-percentiles dt { color: var(--muted); font-size: var(--text-xs); font-weight: 680; text-transform: uppercase; }
.job-resource-percentiles dd { margin: 0; font-size: var(--text-xs); font-weight: 720; text-align: right; }
.job-steps { display: grid; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }
.step-row.skipped { opacity: 0.55; }
.step-icon { justify-self: start; }
.step-name { min-width: 0; overflow-wrap: anywhere; }
.step-duration { justify-self: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.job-steps-empty { margin: 0.3rem 0; font-size: var(--text-sm); }
@keyframes running-pulse {
  0%,
  100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.82); }
}
.runs-history-sentinel { width: 100%; height: 1px; pointer-events: none; }
.runs-history-more { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.9rem 0 0.15rem; }
.runs-history-more .inline-error { margin: 0; }
.settings-title { margin-bottom: 1.5rem; }
.runner-priorities { margin-top: 1.3rem; }
.runner-priority-intro, .runner-priority-instruction { margin: 0.6rem 0 1rem; font-size: var(--text-sm); }
.runner-priority-tabs { position: relative; display: flex; border-bottom: 1px solid var(--line); width: fit-content;
  --shared-hover-background: var(--panel-strong); --shared-hover-radius: 0px; }
.runner-priority-tabs .tape-mode { position: relative; background: transparent; padding: 0.65rem 0.85rem; }
.runner-priority-tabs [aria-selected="true"] { color: CanvasText; box-shadow: inset 0 -2px CanvasText; }
.runner-priority-list { position: relative; padding: 0; margin: 0; list-style: none; max-width: 46rem; border: 1px solid var(--line);
  --shared-hover-background: var(--panel-strong); --shared-hover-radius: 0px; }
.runner-priority-row { position: relative; display: grid; grid-template-columns: 1.8rem 2rem minmax(0, 1fr) auto 4.5rem;
  align-items: center; gap: 0.65rem; padding: 0.5rem 0.85rem; min-height: 3rem; background: transparent; }
.runner-priority-row + .runner-priority-row { border-top: 1px solid var(--line); }
.runner-priority-row.is-dragging { outline: 1px solid var(--muted); outline-offset: -1px; }
.runner-priority-handle { display: grid; place-items: center; width: 1.8rem; height: 2rem; padding: 0; color: var(--muted);
  background: transparent; border: 0; font: inherit; cursor: grab; touch-action: none; user-select: none; }
.runner-priority-handle:active { cursor: grabbing; }
.runner-priority-handle:disabled { cursor: default; }
.runner-priority-handle span { font-size: 1.4rem; }
.runner-priority-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.runner-priority-position, .runner-priority-status { font-size: var(--text-sm); }
.runner-priority-moves { display: flex; justify-content: end; gap: 0.25rem; }
.runner-priority-moves .button.compact-button { width: 2rem; height: 2rem; padding: 0.35rem; }
.runner-priority-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; margin-top: 0.85rem; font-size: var(--text-sm); }
@media (max-width: 34rem) {
  .runner-priority-row { grid-template-columns: 2.75rem 1.25rem minmax(0, 1fr) auto; gap: 0.4rem; padding-inline: 0.5rem; }
  .runner-priority-status { grid-column: 3; grid-row: 2; }
  .runner-priority-moves { grid-column: 4; grid-row: 1 / 3; }
  .runner-priority-handle { grid-row: 1 / 3; width: 2.75rem; height: 2.75rem; }
  .runner-priority-moves .button.compact-button { width: 2.75rem; height: 2.75rem; }
  .runner-priority-actions .button { min-height: 2.75rem; }
  .runner-priority-position { grid-row: 1 / 3; }
  .runner-priority-tabs .tape-mode { padding-inline: 0.6rem; }
}
/* Floats in the top layer (see LiveStatus), centred on the content column
   by script, so the popover's own inset and margin step aside. */
.machines-live-status {
  position: fixed;
  inset: auto;
  top: 0.75rem;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--ground);
  box-shadow: 0 6px 20px rgb(0 0 0 / 14%);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
}
.routing-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: 0;
  padding: 0.25rem 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 650;
  white-space: nowrap;
}
.routing-switch:disabled { opacity: 0.55; cursor: not-allowed; }
.routing-switch-track {
  position: relative;
  display: inline-block;
  width: 2rem;
  height: 1.12rem;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel-strong);
  transition: border-color 120ms ease,
    background 120ms ease;
}
.routing-switch-track > span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 0.76rem;
  height: 0.76rem;
  border-radius: 50%;
  background: color-mix(in srgb, CanvasText 62%, Canvas);
  transition: transform 120ms ease,
    background 120ms ease;
}
.routing-switch.enabled { color: CanvasText; }
.routing-switch.enabled .routing-switch-track { border-color: color-mix(in srgb, var(--green) 70%, var(--line)); background: color-mix(in srgb, var(--green) 62%, Canvas); }
.routing-switch.enabled .routing-switch-track > span { background: Canvas; transform: translateX(0.86rem); }
.settings-inline-action { display: flex; align-items: center; gap: 0.8rem; margin-top: 1rem; }
.settings-inline-action .button,
.settings-inline-action .inline-error { margin-top: 0; }
.button.danger { color: var(--red); }
.settings-detail { margin-top: 0.3rem; color: var(--muted); font-size: var(--text-sm); }
.billing-title { margin-bottom: 1.15rem; }
.billing-empty { margin-top: 0.8rem; color: var(--muted); font-size: var(--text-sm); }
.billing-job-list { overflow-x: auto; margin-top: 0.85rem; border-top: 1px solid var(--line); }
.billing-job-row:hover { background: color-mix(in srgb, var(--panel-strong) 45%, transparent); }
.billing-job-identity,
.billing-job-runner { display: flex; min-width: 0; flex-direction: column; }
.billing-job-identity strong,
.billing-job-runner strong { overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.billing-job-identity small,
.billing-job-runner small { overflow: hidden; color: var(--muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.billing-job-runtime { color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.billing-job-quota { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; white-space: nowrap; }
.billing-job-quota strong { font-size: var(--text-sm); }
.billing-job-quota small { color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
.billing-job-row > svg { width: 0.7rem; color: var(--muted); }
.billing-job-row > svg path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.3; }
.billing-footnote strong { color: CanvasText; }
.billing-footnote p { margin-top: 0.18rem; }
.billing-chart-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.billing-chart-heading h2 { font-size: 1rem; }
.billing-chart-heading-actions { display: flex; align-items: center; gap: 0.75rem; }
.billing-chart-heading-actions > span { flex: 0 0 auto; color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
/* An unavailable-data line (DESIGN.md, Body): one muted sentence above the
   figures it qualifies. */
.billing-history-note { max-width: 64rem; margin: 0 0 1rem; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.billing-chart-dimension button:hover { color: CanvasText; }
.billing-chart-dimension button:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.billing-chart-dimension button[aria-pressed="true"] { background: var(--panel-strong); color: CanvasText; box-shadow: 0 1px 3px rgb(0 0 0 / 12%); }
/* Ledger dots share the chart's categorical slots so an entity keeps its
   colour between a table and the chart beside it. */
.billing-series-0 { --billing-series-color: var(--chart-1); }
.billing-series-1 { --billing-series-color: var(--chart-2); }
.billing-series-2 { --billing-series-color: var(--chart-3); }
.billing-series-3 { --billing-series-color: var(--chart-4); }
.billing-series-4 { --billing-series-color: var(--chart-5); }
.billing-series-5 { --billing-series-color: var(--chart-6); }
.billing-series-6 { --billing-series-color: var(--chart-7); }
.billing-series-7 { --billing-series-color: var(--chart-8); }
.billing-chart-card .chart { margin-top: 0.9rem; }
/* ── Charts (chart.tsx) ─────────────────────────────────────
   Categorical slots come from --chart-1…8 (validated per theme in
   tape.css); marks never carry text, and text never carries a series
   colour. */
.chart-slot-0 { --chart-color: var(--chart-1); }
.chart-slot-1 { --chart-color: var(--chart-2); }
.chart-slot-2 { --chart-color: var(--chart-3); }
.chart-slot-3 { --chart-color: var(--chart-4); }
.chart-slot-4 { --chart-color: var(--chart-5); }
.chart-slot-5 { --chart-color: var(--chart-6); }
.chart-slot-6 { --chart-color: var(--chart-7); }
.chart-slot-7 { --chart-color: var(--chart-8); }
.chart-slot-neutral { --chart-color: var(--chart-neutral); }
.chart { --chart-height: 9.5rem; min-width: 0; margin: 0; transition: opacity 160ms ease; }
.chart[aria-busy="true"] { opacity: 0.5; }
.chart-spark { --chart-height: 2.75rem; }
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  margin: 0 0 0.75rem;
  padding: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  list-style: none;
}
.chart-legend li { display: inline-flex; align-items: center; gap: 0.38rem; white-space: nowrap; }
.chart-key {
  display: inline-block;
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 1px;
  background: var(--chart-color);
}
.chart-key.line { width: 0.7rem; height: 2px; border-radius: 1px; }
.chart-body { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.6rem; }
.chart-spark .chart-body { grid-template-columns: minmax(0, 1fr); }
.chart-y-axis {
  position: relative;
  color: var(--muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
}
.chart-y-axis > span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; }
.chart-y-axis > .chart-y-sizer {
  position: static;
  display: block;
  height: 0;
  overflow: hidden;
  transform: none;
  visibility: hidden;
}
.chart-plot {
  position: relative;
  min-width: 0;
  height: var(--chart-height);
  cursor: crosshair;
  outline: none;
  touch-action: pan-y;
}
.chart-plot:has(> .chart-empty) { cursor: default; }
.chart-grid > span { position: absolute; right: 0; left: 0; height: 0; border-top: 1px solid var(--chart-grid); }
.chart-grid > span.baseline { border-top-color: var(--chart-axis); }
.chart-marks {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.chart-hover-band { fill: var(--chart-hover); }
.chart-bar { transition: opacity 120ms ease; }
.chart-marks.has-active .chart-bar:not(.active) { opacity: 0.4; }
.chart-bar-mark { fill: var(--chart-color); }
.chart-line-mark { fill: none; stroke: var(--chart-color); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.chart-spark .chart-line-mark { stroke-width: 1.5; }
.chart-area-mark { fill: var(--chart-color); opacity: 0.1; }
.chart-point { fill: var(--chart-color); }
.chart-crosshair { stroke: var(--chart-axis); stroke-width: 1; }
.chart-dot { fill: var(--chart-color); stroke: var(--chart-surface); stroke-width: 2; }
.chart-x-axis {
  position: relative;
  grid-column: 2;
  height: 0.6rem;
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.chart-x-axis > span { position: absolute; top: 0; white-space: nowrap; }
.chart-empty {
  display: grid;
  height: 100%;
  place-items: center;
  border-bottom: 1px solid var(--chart-axis);
  color: var(--muted);
  font-size: var(--text-xs);
}
.chart-spark .chart-empty { border-bottom: 0; }
/* The readout floats above the plot so the marks being read stay visible. */
/* Tooltips shown in the top layer (see top-layer.ts) are placed by script at
   viewport coordinates; the in-flow offsets, transforms and hover-driven
   opacity that position them otherwise don't apply. */
.chart-tooltip:popover-open,
[data-floating-tooltip]:popover-open {
  position: fixed;
  inset: auto;
  margin: 0;
  overflow: visible;
  opacity: 1 !important;
  transform: none !important;
  transition: none;
}
.chart-tooltip-heading { color: var(--muted); font-size: var(--text-xs); }
.chart-tooltip-value { font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-tooltip-detail { color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
.chart-tooltip-rows {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.28rem 0.45rem;
  margin: 0.3rem 0 0;
  border-top: 1px solid var(--line);
  padding: 0.38rem 0 0;
  list-style: none;
}
.chart-tooltip-rows > li { display: contents; }
.chart-tooltip-rows span { overflow: hidden; color: var(--muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.chart-tooltip-rows strong { font-size: var(--text-xs); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.chart-tooltip-rows > .chart-tooltip-more { display: block; grid-column: 1 / -1; color: var(--muted); font-size: var(--text-xs); }
.chart-spark .chart-tooltip { min-width: 0; padding: 0.36rem 0.48rem; }
.chart-spark .chart-tooltip-value { font-size: var(--text-sm); }
.billing-jobs-card > summary::-webkit-details-marker { display: none; }
.billing-jobs-card > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.billing-jobs-card > summary > span { display: flex; min-width: 0; flex-direction: column; }
.billing-jobs-card > summary > svg { width: 0.7rem; color: var(--muted); transition: transform 120ms ease; }
.billing-jobs-card > summary > svg path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.3; }
.billing-jobs-card[open] > summary > svg { transform: rotate(180deg); }
.billing-jobs-detail { border-top: 1px solid var(--line); padding: 0.85rem 1.25rem 1rem; }
.billing-jobs-detail .billing-job-list { margin-top: 0; border-top: 0; }
.billing-job-row {
  display: grid;
  align-items: center;
  gap: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
  padding: 0.57rem 0.5rem;
  text-decoration: none;
  transition: background 100ms ease;
  min-width: 42rem;
  grid-template-columns: minmax(13rem, 1.5fr) minmax(8rem, 0.8fr) 6rem 7rem 1rem;
}
.billing-footnote { max-width: 68rem; color: var(--muted); font-size: var(--text-xs); line-height: 1.45; margin-top: 0.85rem; }
.button:hover:not(:disabled) { border-color: var(--button-hover-border); background: var(--button-hover-background); color: var(--button-hover-color); }
.button:active:not(:disabled) { transform: translateY(1px); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.button.secondary {
  --button-background: transparent;
  --button-border: var(--line-strong);
  --button-color: CanvasText;
  --button-hover-background: var(--panel-strong);
  --button-hover-border: color-mix(in srgb, CanvasText 42%, transparent);
  --button-hover-color: CanvasText;
  margin-top: 0;
}
.button:disabled { opacity: 0.55; cursor: wait; }
.button.compact-button { margin-top: 0; padding: 0.5rem 0.8rem; border-radius: 2px; font-size: var(--text-sm); }
.button.secondary.danger { --button-border: color-mix(in srgb, var(--red) 38%, var(--line-strong)); --button-color: var(--red); --button-hover-background: color-mix(in srgb, var(--red) 9%, transparent); --button-hover-border: color-mix(in srgb, var(--red) 62%, var(--line-strong)); --button-hover-color: color-mix(in srgb, var(--red) 86%, CanvasText); }
.shell { max-width: 46rem; margin: 0 auto; padding: 3.5rem 1.4rem 5rem; }
.route-error { max-width: 36rem; margin: 0 auto; padding: 3.5rem 1.4rem; }
.route-error h1 { font-size: var(--text-title); font-weight: 600; line-height: 1.2; }
.route-error > p { margin-top: 0.8rem; }
.route-error-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.route-error-actions .button { margin: 0; }
.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: CanvasText;
  font-size: 1rem;
  text-decoration: none;
  margin-bottom: 2rem;
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0;
}
.auth-card h1 { margin-bottom: 0.7rem; font-size: var(--text-title); }
.auth-card .notice { margin-top: 1rem; }
.connect-github-card > p { margin-block: 0 1.2rem; }
.connect-github-card .ci-permission-warning { margin-top: 1.8rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.connect-github-card .ci-permission-warning p { margin-block: 0.45rem 1rem; max-width: 40rem; }
.auth-actions { display: grid; width: min(100%, 22rem); gap: 0.65rem; margin: 1.2rem 0 0; }
.auth-actions .button { width: 100%; margin-top: 0; }
.sign-in-provider-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; }
.sign-in-provider-icon { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; fill: currentColor; }
.auth-docs-link { margin-top: 1.25rem; font-size: var(--text-sm); }
.sign-in-dialog {
  width: min(calc(100% - 2rem), 28rem);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 0;
  color: CanvasText;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--ground);
  box-shadow: 0 6px 20px rgb(0 0 0 / 14%);
}
.sign-in-dialog::backdrop { backdrop-filter: blur(3px); background: rgb(0 0 0 / 32%); }
.sign-in-dialog:focus { outline: none; }
.sign-in-sheet { padding: 1.25rem; }
.sign-in-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sign-in-sheet h2 { margin: 0; font-size: 1.125rem; letter-spacing: 0; }
.sign-in-dialog .auth-actions { width: 100%; margin-top: 1.25rem; }
.sign-in-sheet .notice { margin-top: 1rem; text-align: left; }
.sign-in-close {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border: 0;
  padding: 0;
  color: var(--muted);
  cursor: pointer;
  border-radius: 2px;
  background: transparent;
}
.sign-in-close:hover { color: CanvasText; }
.sign-in-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sign-in-close svg { width: 0.8rem; height: 0.8rem; }
.sign-in-close path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.5; }
code, pre, kbd { font-family: var(--font-mono); }
.ci-route-pending,
.ci-permission-warning { color: color-mix(in srgb, var(--amber) 72%, CanvasText); }
.job-experiment-heading,
.job-experiment-launch { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.experiment-comparison-actions { display: flex; gap: 0.5rem; justify-content: end; }
/* Documentation */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Account-scoped runner inventory (/runners) */
.field {
  display: grid;
  min-width: 0;
  gap: 0.25rem;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 650;
}
.field-input::placeholder { color: color-mix(in srgb, CanvasText 34%, transparent); }
.field-input:focus-visible,
.field-select:focus-visible { outline: 0; border-color: color-mix(in srgb, var(--accent) 72%, CanvasText 28%); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
.field-select:disabled { opacity: 0.55; cursor: wait; }
/* Device authorization (/device) */
.device-code-form { display: flex; flex-wrap: wrap; align-items: end; gap: 0.65rem; }
.device-code-form .field { width: 14rem; }
.device-code-input { letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-mono); font-size: var(--text-sm); }
.device-code-form + .settings-detail,
.device-code-form + .inline-error { margin-top: 0.75rem; }
.device-authorization-review { display: grid; gap: 1rem; margin-top: 1.25rem; border-top: 1px solid var(--line); padding-top: 1.15rem; }
.device-authorization-review > p { margin: 0; font-size: var(--text-sm); }
.device-authorization-review .notice { margin: 0; line-height: 1.45; font-size: var(--text-sm); }
.device-authorization-review .settings-inline-action { margin-top: 0.25rem; }
.device-facts { display: grid; gap: 0.55rem; margin: 0; }
.device-facts > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.75rem; font-size: var(--text-sm); }
.device-facts dt { color: var(--muted); font-family: var(--font-sans); font-weight: 400; }
.device-facts dd { margin: 0; }
::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); color: CanvasText; }
a { color: var(--accent); }
a:hover { color: color-mix(in srgb, var(--accent) 78%, CanvasText); }
/* A proportional interface face with real semibold headings; code stays mono. */
h1 {
  margin-top: 0;
  margin-bottom: 0.45rem;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0;
}
h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.3rem;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0;
}
h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.15rem;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0;
}
.app-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh;
  min-height: 28rem;
  flex-direction: column;
  border-right: 1px solid var(--line);
  padding: 1.1rem 0.7rem 0.7rem;
  background: var(--rail);
  border-right-color: var(--line);
}
.sidebar-user-copy strong {
  overflow: hidden;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 500;
}
.sidebar-installation-copy strong {
  overflow: hidden;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 500;
}
.sidebar-installation-control {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: 1.9rem minmax(0, 1fr) 0.75rem;
  align-items: center;
  gap: 0.58rem;
  border: 1px solid var(--line);
  padding: 0.52rem 0.58rem;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  color: CanvasText;
  box-shadow: 0 1px 0 color-mix(in srgb, CanvasText 4%, transparent);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 120ms ease,
    background 120ms ease,
    box-shadow 120ms ease;
  border-radius: 2px;
}
.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem 0.55rem 0.8rem;
  color: var(--muted);
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  transition: color 120ms ease;
  font-size: var(--text-md);
  font-weight: 400;
  border-radius: 2px;
}
.sidebar-installation-connect {
  display: grid;
  width: 100%;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  border: 0;
  border-top: 1px solid var(--line);
  margin-top: 0.32rem;
  padding: 0.58rem 0.48rem 0.42rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 680;
  text-align: left;
  text-decoration: none;
  transition: color 100ms ease;
  border-radius: 0;
}
.notice { margin: 0 0 1rem; padding: 0.8rem 1rem; background: color-mix(in srgb, var(--amber) 14%, transparent); border-radius: 0; }
.sidebar-installation-option {
  display: grid;
  width: 100%;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  border: 0;
  padding: 0.48rem;
  background: transparent;
  color: CanvasText;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: color 100ms ease;
  border-radius: 2px;
}
.sidebar-installation-connect-icon {
  display: inline-grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  background: var(--panel-strong);
  color: CanvasText;
  border-radius: 2px;
}
.sidebar-user-button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.55rem;
  border: 0;
  padding: 0.45rem 0.5rem;
  background: transparent;
  color: CanvasText;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease;
  border-radius: 2px;
}
.sidebar-user-menu button {
  width: 100%;
  border: 0;
  padding: 0.48rem 0.52rem;
  background: transparent;
  color: CanvasText;
  cursor: pointer;
  font-size: var(--text-sm);
  text-align: left;
  border-radius: 2px;
}
.chart-plot:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.billing-chart-dimension {
  display: inline-flex;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  padding: 2px;
  background: color-mix(in srgb, var(--panel-strong) 55%, transparent);
  border-radius: 2px;
}
.billing-chart-dimension button {
  border: 0;
  padding: 0.28rem 0.48rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 680;
  border-radius: 2px;
}
/* Card descriptions drop into the same band as the page description, so the
   heading stays the loudest thing in the card. */
.eyebrow {
  margin-bottom: 0.5rem;
  color: var(--muted);
  text-transform: uppercase;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: normal;
}
.page-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.6rem;
  padding-bottom: 0;
}
.page-title h1 { font-family: var(--font-sans); letter-spacing: 0; font-size: var(--text-title); font-weight: 600; }
.page-title .muted { margin-top: 0.55rem; font-size: var(--text-sm); }
.card { border: 1px solid var(--line); background: var(--panel); border-radius: 0; padding: 1.1rem 1.15rem; }
.button {
  --button-background: CanvasText;
  --button-border: CanvasText;
  --button-color: Canvas;
  --button-hover-background: color-mix(in srgb, CanvasText 84%, Canvas);
  --button-hover-border: color-mix(in srgb, CanvasText 84%, Canvas);
  --button-hover-color: Canvas;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 1rem;
  border: 1px solid var(--button-border);
  padding: 0.7rem 1rem;
  background: var(--button-background);
  color: var(--button-color);
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    transform 80ms ease;
  border-radius: 2px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.field-input {
  width: 100%;
  min-height: 2.25rem;
  border: 1px solid var(--line-strong);
  padding: 0.45rem 0.65rem;
  background: Canvas;
  color: CanvasText;
  font: inherit;
  transition: border-color 120ms ease,
    box-shadow 120ms ease;
  border-radius: 2px;
  font-family: inherit;
  font-size: var(--text-sm);
}
.field-select {
  width: 100%;
  min-height: 2.25rem;
  border: 1px solid var(--line-strong);
  padding: 0.45rem 0.65rem;
  background: Canvas;
  color: CanvasText;
  font: inherit;
  transition: border-color 120ms ease,
    box-shadow 120ms ease;
  padding-right: 1.9rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23888' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 0.8rem;
  border-radius: 2px;
  font-family: inherit;
  font-size: var(--text-sm);
}
/* ── Ledger ─────────────────────────────────────────────── */
.runs-heading {
  display: grid;
  grid-template-columns: 0.72rem minmax(16rem, 1fr) 10rem 7rem 5.5rem 1rem 1rem;
  gap: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
  padding: 0 1.35rem 0.35rem 0.6rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}
.runs-list { display: grid; gap: 0; }
.revision-group { min-width: 0; padding: 0; }
.revision-group + .revision-group { margin-top: 0; }
/* The group header sits no louder than the rows it heads: same size, and the
   space above it (not a heavier face) is what separates one change from the
   next. */
.revision-header {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 0.75rem;
  line-height: 1.35;
  white-space: nowrap;
  padding: 1.05rem 0.6rem 0.35rem;
  font-size: var(--text-sm);
}
.run-card + .run-card::before { height: 1px; margin: 0.15rem 0.75rem 0.15rem 1.75rem; background: color-mix(in srgb, var(--line) 70%, transparent); content: ""; display: none; }
.run-toggle {
  display: grid;
  grid-template-columns: 0.72rem minmax(16rem, 1fr) 10rem 7rem 5.5rem 1rem 1rem;
  gap: 0.85rem;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  line-height: 1.25;
  text-align: left;
  width: calc(100% + 1.2rem);
  min-height: 2.2rem;
  margin-inline: -0.6rem;
  border-radius: 0;
  padding: 0.18rem 1.35rem 0.18rem 0.6rem;
}
/* Hover is one surface per change box (SlidingHighlight), not a fill on each
   row: it glides between the box's workflow and job rows and stays inside. */
.run-toggle:focus-visible { outline: 2px solid var(--accent); border-radius: 0; outline-offset: -2px; }
/* A provider's tooltip opens directly over the provider's name, not over the
   middle of its wider column. */
.provider-tooltip-line { display: block; }
.run-provider .provider-tooltip,
.job-provider .provider-tooltip { left: 0; transform: translateY(0.2rem); }
.run-provider:hover .provider-tooltip,
.run-toggle:focus-visible .run-provider .provider-tooltip,
.job-provider:hover .provider-tooltip,
.job-row:focus-visible .provider-tooltip { opacity: 1; transform: translateY(0); }
/* Fill means hover and nothing else; whether a row is open is the chevron's
   job. It sits in its own track just before the GitHub link. */
.row-chevron {
  width: 0.8rem;
  height: 0.8rem;
  justify-self: center;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m6 3.5 4.5 4.5L6 12.5' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m6 3.5 4.5 4.5L6 12.5' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  transition: transform 140ms ease,
    background-color 140ms ease;
}
.run-toggle:hover .row-chevron,
.job-toggle:hover .row-chevron { background: CanvasText; }
.run-card.expanded > .run-row .row-chevron,
.job-card.expanded .job-toggle .row-chevron { transform: rotate(90deg); }
.run-identity strong {
  min-width: 0;
  overflow: hidden;
  flex: 0 1 auto;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 600;
}
.run-attempt-label { flex: 0 0 auto; color: var(--muted); white-space: nowrap; font-size: var(--text-sm); }
.run-provider-name {
  min-width: 0;
  overflow: hidden;
  color: CanvasText;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
}
.run-metric {
  display: flex;
  min-width: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: var(--text-sm);
}
.run-github-button {
  position: absolute;
  z-index: 1;
  top: 50%;
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--muted);
  place-items: center;
  text-decoration: none;
  transform: translateY(-50%);
  border-radius: 2px;
  right: 0.35rem;
}
.job-row {
  position: relative;
  z-index: 0;
  display: grid;
  width: 100%;
  grid-template-columns: 0.72rem minmax(16rem, 1fr) 10rem 7rem 5.5rem 1rem 1rem;
  gap: 0.85rem;
  align-items: center;
  border: 0;
  padding: 0.45rem 0.25rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  min-height: 2rem;
  font-size: var(--text-sm);
}
.step-row {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr) 5rem;
  gap: 0.75rem;
  align-items: center;
  min-height: 2.1rem;
  color: var(--muted);
  line-height: 1.25;
  font-size: var(--text-sm);
}
/* ── State: sigil + word ────────────────────────────────── */
.decision-icon {
  justify-self: center;
  display: inline-grid;
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 0;
  background: none;
  place-items: center;
  overflow: visible;
  animation: none;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
}
.decision-icon.neutral {
  display: inline-grid;
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 0;
  background: none;
  place-items: center;
  overflow: visible;
  animation: none;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
}
.decision-icon::after { display: none; }
.decision-icon::before { content: "·"; color: var(--muted); }
.decision-icon.success,
.decision-icon.failure,
.decision-icon.queued,
.decision-icon.cancelled,
.decision-icon.skipped,
.decision-icon.running {
  display: inline-grid;
  border-radius: 0;
  background: none;
  place-items: center;
  overflow: visible;
  animation: none;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  width: 0.95rem;
  height: 0.95rem;
}
/* Result states are drawn marks rather than mono glyphs: the font's ✓, ✗, ⋯
   and ⊘ read thin at ledger size, and the mark is the only result signal. */
.decision-icon.success::before {
  width: 100%;
  height: 100%;
  background: currentColor;
  content: "";
  color: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.75 8.5 6.25 12l7-7.75' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.75 8.5 6.25 12l7-7.75' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.decision-icon.failure::before {
  width: 100%;
  height: 100%;
  background: currentColor;
  content: "";
  color: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 4 8 8m0-8-8 8' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 4 8 8m0-8-8 8' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.decision-icon.running::before {
  width: 100%;
  height: 100%;
  background: currentColor;
  content: "";
  z-index: 1;
  grid-area: 1 / 1;
  color: var(--amber);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23000'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23000'/%3E%3C/svg%3E")
    center / contain no-repeat;
  animation: tape-pulse-core 1.8s ease-in-out infinite;
}
/* Running pulses rather than blinks: a steady dot that breathes, with a soft
   ring swelling out from it on the same beat. */
.decision-icon.running::after {
  display: block;
  z-index: 0;
  width: 50%;
  height: 50%;
  grid-area: 1 / 1;
  border-radius: 50%;
  background: var(--amber);
  content: "";
  animation: tape-pulse-ring 1.8s ease-out infinite;
}
.decision-icon.queued::before {
  width: 100%;
  height: 100%;
  background: currentColor;
  content: "";
  color: var(--amber);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23000'%3E%3Ccircle cx='3.25' cy='8' r='1.7'/%3E%3Ccircle cx='8' cy='8' r='1.7'/%3E%3Ccircle cx='12.75' cy='8' r='1.7'/%3E%3C/g%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23000'%3E%3Ccircle cx='3.25' cy='8' r='1.7'/%3E%3Ccircle cx='8' cy='8' r='1.7'/%3E%3Ccircle cx='12.75' cy='8' r='1.7'/%3E%3C/g%3E%3C/svg%3E")
    center / contain no-repeat;
}
.decision-icon.cancelled::before {
  width: 100%;
  height: 100%;
  background: currentColor;
  content: "";
  color: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='5.75'/%3E%3Cpath d='m4 12 8-8'/%3E%3C/g%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='5.75'/%3E%3Cpath d='m4 12 8-8'/%3E%3C/g%3E%3C/svg%3E")
    center / contain no-repeat;
}
.decision-icon.skipped::before {
  width: 100%;
  height: 100%;
  background: currentColor;
  content: "";
  color: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='5.75'/%3E%3Cpath d='M5.5 8h5'/%3E%3C/g%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='5.75'/%3E%3Cpath d='M5.5 8h5'/%3E%3C/g%3E%3C/svg%3E")
    center / contain no-repeat;
}
.decision-icon.neutral::before { content: "·"; color: var(--muted); }
/* Machine marks. Online is a steady green dot; a machine that is up but
   cannot take work is the same dot hollowed out; offline uses the slashed
   circle of a cancelled run. Busy machines reuse the running pulse. */
.decision-icon.online,
.decision-icon.limited,
.decision-icon.offline { width: 0.95rem; height: 0.95rem; }
.decision-icon.online::before {
  width: 100%;
  height: 100%;
  background: currentColor;
  content: "";
  color: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23000'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23000'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.decision-icon.limited::before {
  width: 100%;
  height: 100%;
  background: currentColor;
  content: "";
  color: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.25' fill='none' stroke='%23000' stroke-width='1.75'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.25' fill='none' stroke='%23000' stroke-width='1.75'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.decision-icon.offline::before {
  width: 100%;
  height: 100%;
  background: currentColor;
  content: "";
  color: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='5.75'/%3E%3Cpath d='m4 12 8-8'/%3E%3C/g%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='5.75'/%3E%3Cpath d='m4 12 8-8'/%3E%3C/g%3E%3C/svg%3E")
    center / contain no-repeat;
}
/* The mark names its state on hover, straight away rather than after the
   browser's native title delay. */
.status-mark-icon { position: relative; }
.status-mark-icon:hover > .status-tooltip { opacity: 1; transform: translateY(0); }
@keyframes tape-pulse-core {
  0%,
  100% { opacity: 1; }
  50% { opacity: 0.7; }
}
@keyframes tape-pulse-ring {
  0% { opacity: 0.5; transform: scale(1); }
  80%,
  100% { opacity: 0; transform: scale(2.3); }
}
.run-provider-name.cloudflare-unavailable { color: var(--red); }
.inline-error {
  margin-top: 0.65rem;
  align-items: center;
  /* The band bleeds past the step column so its mark and text still sit on
     the steps' own tracks. */
  margin: 0.35rem -0.6rem 0.45rem;
  border-radius: 3px;
  padding: 0.45rem 0.6rem;
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
  font-size: var(--text-sm);
}
.job-cancellation-reason {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  gap: 0.75rem;
  line-height: 1.35;
  align-items: center;
  /* The band bleeds past the step column so its mark and text still sit on
     the steps' own tracks. */
  margin: 0.35rem -0.6rem 0.45rem;
  border-radius: 3px;
  padding: 0.45rem 0.6rem;
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
  font-size: var(--text-sm);
}
.job-cancellation-reason .decision-icon { margin-top: 0; }
/* ── Floating surfaces need an opaque ground ────────────
   Tape's --panel-strong is a translucent tint, so anything that
   overlays content sets the page ground explicitly. */
.chart-tooltip {
  position: absolute;
  z-index: 5;
  bottom: calc(100% + 0.55rem);
  display: flex;
  width: max-content;
  min-width: 8rem;
  max-width: 17rem;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.5rem 0.6rem;
  cursor: default;
  pointer-events: none;
  background: var(--ground);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 14%);
}
.provider-tooltip {
  position: absolute;
  z-index: 10;
  bottom: calc(100% + 0.55rem);
  left: 50%;
  width: max-content;
  max-width: min(22rem, 80vw);
  padding: 0.48rem 0.62rem;
  opacity: 0;
  color: CanvasText;
  font-size: var(--text-sm);
  line-height: 1.35;
  pointer-events: none;
  text-align: left;
  transform: translate(-50%, 0.2rem);
  transition: opacity 120ms ease,
    transform 120ms ease;
  white-space: normal;
  background: var(--ground);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 14%);
}
.row-tooltip {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: calc(100% + 0.6rem);
  width: max-content;
  max-width: min(22rem, 80vw);
  padding: 0.4rem 0.55rem;
  opacity: 0;
  color: CanvasText;
  font-size: var(--text-sm);
  line-height: 1.3;
  pointer-events: none;
  transform: translate(-0.2rem, -50%);
  transition: opacity 120ms ease,
    transform 120ms ease;
  white-space: nowrap;
  background: var(--ground);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 14%);
}
.status-tooltip {
  position: absolute;
  z-index: 10;
  bottom: calc(100% + 0.35rem);
  left: -0.35rem;
  width: max-content;
  padding: 0.3rem 0.45rem;
  opacity: 0;
  color: CanvasText;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  pointer-events: none;
  transform: translateY(0.15rem);
  transition: opacity 100ms ease,
    transform 100ms ease;
  white-space: nowrap;
  background: var(--ground);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 14%);
}
.sidebar-installation-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  z-index: 40;
  width: max(100%, 15rem);
  overflow: hidden;
  padding: 0.38rem;
  transform-origin: top left;
  animation: sidebar-menu-in 120ms ease-out;
  --shared-hover-background: var(--panel-strong);
  --shared-hover-radius: 7px;
  background: var(--ground);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 14%);
}
.sidebar-user-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 20;
  overflow: hidden;
  padding: 0.22rem;
  transform-origin: bottom center;
  animation: sidebar-menu-in 120ms ease-out;
  --shared-hover-background: var(--panel-strong);
  --shared-hover-radius: 5px;
  background: var(--ground);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 14%);
}
.billing-chart-card { min-width: 0; margin-bottom: 1rem; border-radius: 0; overflow: visible; }
/* Pages whose title says everything carry it alone. Opt in per page: a
   header that is explaining something — the CLI authorization page says what
   you are about to approve — keeps its copy. */
.tape-title-solo > div:first-child > .eyebrow,
.tape-title-solo > div:first-child > .muted { display: none; }
.billing-chart-heading p { color: var(--muted); font-size: var(--text-xs); margin-top: 0.12rem; display: none; }
/* Grid-display components ignore the hidden attribute without this. */
[hidden] { display: none !important; }
/* ── Runs ───────────────────────────────────────────────── */
.runs-repository-filter {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  min-width: 0;
  margin-top: 1.3rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}
.runs-repository-shortcuts {
  --shared-hover-background: var(--panel-strong);
  --shared-hover-radius: 2px;
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.runs-repository-shortcuts::-webkit-scrollbar { display: none; }
.runs-repository-choice, .runs-repository-picker {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  max-width: 15rem;
  min-height: 2.75rem;
  border: 0;
  padding: .65rem .85rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}
.runs-repository-choice::after, .runs-repository-picker::after {
  position: absolute;
  right: .85rem;
  bottom: 0;
  left: .85rem;
  height: 2px;
  background: CanvasText;
  content: "";
  opacity: 0;
}
.runs-repository-choice[aria-pressed="true"], .runs-repository-picker.is-selected { color: CanvasText; font-weight: 500; }
.runs-repository-choice[aria-pressed="true"]::after, .runs-repository-picker.is-selected::after { opacity: 1; }
.runs-repository-choice:hover, .runs-repository-picker:hover, .runs-repository-picker[aria-expanded="true"] { color: CanvasText; }
.runs-repository-choice:focus-visible, .runs-repository-picker:focus-visible, .runs-repository-dismiss:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.runs-repository-name { overflow: hidden; text-overflow: ellipsis; }
.runs-repository-all-short { display: none; }
.runs-repository-filter svg, .runs-repository-popover svg { flex: 0 0 auto; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }
.runs-repository-choice svg { opacity: .6; }
.runs-repository-picker { max-width: 18rem; border-radius: 2px; }
.runs-repository-picker:hover, .runs-repository-picker[aria-expanded="true"] { background: var(--panel-strong); }
.runs-repository-chevron { transition: transform 140ms ease; }
.runs-repository-picker[aria-expanded="true"] .runs-repository-chevron { transform: rotate(180deg); }
.runs-repository-filter + .tape-runs-scroll { margin-top: 0; }
.runs-repository-popover {
  position: fixed;
  inset: auto;
  width: 20rem;
  max-width: calc(100vw - 1rem);
  max-height: calc(100dvh - 1rem);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 0;
  background: var(--ground);
  color: CanvasText;
  box-shadow: 0 6px 20px rgb(0 0 0 / 14%);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}
.runs-repository-popover:popover-open { display: flex; flex-direction: column; }
.runs-repository-search { display: flex; flex: 0 0 auto; align-items: center; gap: .55rem; border-bottom: 1px solid var(--line); padding: .55rem .7rem; color: var(--muted); }
.runs-repository-search:focus-within { border-bottom-color: var(--accent); box-shadow: inset 0 -1px 0 var(--accent); }
.runs-repository-search input { min-width: 0; width: 100%; border: 0; padding: .4rem 0; background: transparent; color: CanvasText; outline: none; font: inherit; }
.runs-repository-search input::placeholder { color: var(--muted); }
.runs-repository-dismiss { display: grid; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; place-items: center; border: 0; border-radius: 2px; padding: 0; background: transparent; color: var(--muted); cursor: pointer; }
.runs-repository-dismiss:hover { color: CanvasText; background: var(--panel-strong); }
.runs-repository-results { --shared-hover-background: var(--panel-strong); --shared-hover-radius: 2px; min-height: 0; max-height: min(21rem, calc(100dvh - 8rem)); overflow-y: auto; overscroll-behavior: contain; padding: .35rem; }
.runs-repository-group-label { margin: .55rem .5rem .2rem; color: var(--muted); font-size: var(--text-xs); }
.runs-repository-option { display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 2.25rem; border: 0; border-radius: 2px; padding: .5rem; background: transparent; color: CanvasText; text-align: left; cursor: pointer; font: inherit; }
.runs-repository-option > span { min-width: 0; overflow-wrap: anywhere; }
.runs-repository-option > svg:first-child { color: var(--muted); }
.runs-repository-option .runs-repository-check { margin-left: auto; }
.runs-repository-no-results { margin: 0; padding: 1.5rem .5rem; color: var(--muted); text-align: center; font-size: var(--text-sm); }
.runs-repository-picker-foot { display: flex; flex: 0 0 auto; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--line); padding: .55rem .85rem; color: var(--muted); font-size: var(--text-xs); }
.runs-repository-picker-foot kbd { margin-right: .15rem; font-family: var(--font-mono); font-size: var(--text-xs); }
.runs-repository-picker-foot kbd:not(:first-child) { margin-left: .4rem; }
.runs-repository-picker-foot > span:last-child { font-variant-numeric: tabular-nums; }
@media (max-width: 34rem) {
  .runs-repository-filter { gap: .25rem; }
  .runs-repository-choice { max-width: 12rem; padding-inline: .65rem; }
  .runs-repository-all { min-width: 2.75rem; }
  .runs-repository-all-full { display: none; }
  .runs-repository-all-short { display: inline; }
  .runs-repository-choice::after { right: .65rem; left: .65rem; }
  .runs-repository-picker { max-width: 10rem; padding-inline: .6rem; }
  .runs-repository-more { display: none; }
  .runs-repository-picker::after { right: .6rem; left: .6rem; }
  .runs-repository-search input { font-size: 1rem; }
}
@media (pointer: coarse) {
  .runs-repository-option { min-height: 2.75rem; }
  .runs-repository-dismiss { width: 2.75rem; height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) { .runs-repository-chevron { transition: none; } }
/* The job-type split hangs off the totals: the tiles drop their gap and the
   ledger its top rule, so a single hairline joins them. */
.runs-overview.runs-overview-joined { margin-bottom: 0; }
.runs-job-types { margin-bottom: 1rem; }
.runs-job-types .tape-ledger { border-top: 0; }
/* The approval list follows the totals rather than another section, so it
   takes the gap between sections itself; otherwise its heading sits as close
   to the ledger above as to its own column heads. */
.tape-ledger-job-types .tape-ledger-row { grid-template-columns: minmax(9rem, 1.25fr) repeat(4, minmax(6rem, 1fr)); align-items: baseline; }
.tape-ledger-job-types .tape-cell:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.runs-job-type-label { display: block; }
.runs-job-type-label strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runs-job-type-value { display: flex; flex-direction: column; align-items: flex-end; gap: 0.12rem; }
.runs-job-type-value small { color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
.runs-job-type-value small.over { color: var(--amber); }
/* A scroll container captures position: sticky, so once the card fits the
   content column (sidebar + 46rem card + gutters) the scroller steps aside and
   the column heads can pin to the top of the page. */
/* No outer frame: each change (revision group) is its own box, with space
   between boxes, under one set of column heads. */
/* Hold the column layout at every width instead of stacking. */
.tape-runs-card .run-toggle {
  grid-template-columns: 0.72rem minmax(12rem, 1fr) 10rem 7rem 5rem 1rem 1rem;
  grid-template-rows: auto;
  gap: 0 0.65rem;
  /* The row owns the space around its text, so its hover fill reaches the
     group's rule instead of stopping short of it. */
  min-height: 2.8rem;
  margin-inline: -0.85rem;
  width: calc(100% + 1.7rem);
  padding: 0.18rem 1.6rem 0.18rem 0.85rem;
  line-height: 1.25;
}
.tape-runs-card .run-toggle > .decision-icon,
.tape-runs-card .job-row > .decision-icon { grid-row: 1; position: static; align-self: center; translate: none; }
/* Column heads read title case here, like every other Tape ledger. */
/* Pinned, the heads get a rule under them (a shadow, so nothing shifts). */
.tape-runs-card .runs-heading-sentinel { height: 1px; margin-bottom: -1px; }
.tape-runs-card .runs-heading.is-stuck { box-shadow: 0 1px 0 var(--line); }
.tape-runs-card .step-row { min-height: 1.75rem; }
/* "Workflow" heads the whole identity block, so it starts on the same edge
   as the group titles and status marks beneath it. */
.tape-runs-card .runs-heading > :first-child { grid-column: 1 / 3; }
.tape-runs-card .run-provider { grid-row: 1; grid-column: auto; gap: 0; }
/* Columns hold still while data changes, so a long duration truncates rather
   than running into the count beside it. */
.tape-runs-card .run-metric {
  grid-row: 1;
  grid-column: auto;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tape-runs-card .run-provider::before { content: none; }
.tape-runs-card .run-metric-label { display: none; }
/* Jobs sit flush under their run, on the same tracks and under the same
   heads, rather than as an indented table of their own. */
/* An open workflow reads as a tree: a rail drops from its status mark and
   its contents (jobs, or a single job's steps) step in one mark's width to
   sit beside it. Only the mark and name move; the 1fr name track absorbs the
   step, so Provider, Duration and Finished keep their columns. An open job
   does the same for its steps, one level down. */
/* The rail runs through the centre of the mark's .72rem track. */
.tape-runs-card .run-card.expanded > .run-details,
.tape-runs-card .job-card.expanded:not(.collapsed-into-run) > .job-details { position: relative; }
/* Charts are their own full-width block: a single job's rail gives way to
   them entirely, and elsewhere the charts sit over the rail on the ground
   colour so it resumes below them. */
.tape-runs-card
  .run-card.expanded
  > .run-details:has(
    > .job-card.collapsed-into-run .job-resource-charts
  )::before,
.tape-runs-card
  .job-card.expanded:not(.collapsed-into-run)
  > .job-details:has(.job-resource-charts)::before { display: none; }
/* From just under the workflow's mark (the row is 2.8rem; the mark .95rem). */
.tape-runs-card .run-card.expanded > .run-details::before {
  position: absolute;
  /* Above the pinned workflow (4, earlier in the DOM) and job (3) rows, so
     the rail runs unbroken from its mark and past an open job's band; below
     the pinned change header (5), so scrolled content still slides under it. */
  z-index: 4;
  left: var(--tree-rail);
  width: 1px;
  /* Dashed: 3px dash, 3px gap. */
  background: repeating-linear-gradient(
    to bottom,
    var(--line-strong) 0 3px,
    transparent 3px 6px
  );
  content: "";
  pointer-events: none;
  top: -0.9rem;
  bottom: 0.7rem;
}
/* From just under the job's mark (job rows are about 2rem). */
.tape-runs-card
  .job-card.expanded:not(.collapsed-into-run)
  > .job-details::before {
  position: absolute;
  /* Above the pinned workflow (4, earlier in the DOM) and job (3) rows, so
     the rail runs unbroken from its mark and past an open job's band; below
     the pinned change header (5), so scrolled content still slides under it. */
  z-index: 4;
  left: var(--tree-rail);
  width: 1px;
  /* Dashed: 3px dash, 3px gap. */
  background: repeating-linear-gradient(
    to bottom,
    var(--line-strong) 0 3px,
    transparent 3px 6px
  );
  content: "";
  pointer-events: none;
  top: -0.5rem;
  bottom: 0.55rem;
}
.tape-runs-card .run-details .attempt-header,
.tape-runs-card .run-details .attempt-empty { margin-left: var(--tree-step); }
/* Mirage's note on a retried workflow is the first thing on its tree: a band
   in the note's tone like a job's failure band, its mark and words on the
   job rows' tracks, the explanation muted under the headline. */
.tape-runs-card .run-replay-notice {
  --replay-tone: var(--amber);
  grid-template-columns: 0.72rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  margin: 0.35rem -0.6rem 0.45rem calc(var(--tree-step) - 0.6rem);
  border: 0;
  border-radius: 3px;
  padding: 0.45rem 0.6rem;
  background: color-mix(in srgb, var(--replay-tone) 12%, transparent);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.tape-runs-card .run-replay-notice.failure { --replay-tone: var(--red); }
.tape-runs-card .run-replay-notice.success { --replay-tone: var(--green); }
.tape-runs-card .run-replay-copy { gap: 0.15rem; }
/* Headline and explanation read like a group header: the headline in the
   title sans at the names' size, the explanation in muted text. */
.tape-runs-card .run-replay-copy strong { color: var(--replay-tone); font-family: var(--font-sans); font-size: var(--text-md); font-weight: 500; line-height: 1.25; }
.tape-runs-card .run-replay-copy > span { font-size: var(--text-sm); }
.tape-runs-card .run-replay-notice > .decision-icon { margin-top: 0.18rem; }
/* A job's "no steps yet" line is a note like the metrics one above it. */
.tape-runs-card .job-steps-empty { font-size: var(--text-xs); line-height: 1.5; }
/* Provider experiments sit in a job's details like a chart block: a title in
   the chart titles' sans with a muted note under it, compact controls, and a
   comparison that reads as ledger rows under column heads. */
section.job-experiments { border: 0; padding: 0.5rem 0 0.65rem; }
.job-experiments .job-experiment-heading > div { display: grid; gap: 0.12rem; }
.job-experiments .job-experiment-title { margin: 0; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; line-height: 1.25; }
.job-experiments .job-experiment-summary,
.job-experiments .job-experiment-body > .muted { margin: 0; color: var(--muted); font-size: var(--text-xs); }
.job-experiments .button,
.job-experiments .button.compact-button { min-height: 0; padding: 0.32rem 0.65rem; font-size: var(--text-xs); }
.job-experiments .job-experiment-body { display: grid; gap: 0.55rem; margin-top: 0.55rem; }
.job-experiments .job-experiment-providers { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.job-experiments .job-experiment-providers label { display: flex; align-items: center; gap: 0.4rem; font-size: var(--text-sm); text-transform: none; }
.job-experiments .job-experiment-providers input { width: 0.8rem; height: 0.8rem; margin: 0; accent-color: var(--accent); }
.job-experiments .job-experiment-history { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.9rem; font-size: var(--text-sm); }
.job-experiments .job-experiment-history > span { color: var(--muted); font-size: var(--text-xs); }
.job-experiments .link-button { font: inherit; text-decoration: none; }
.job-experiments .link-button:hover { text-decoration: underline; }
.job-experiments .inline-error,
.job-experiments .ci-route-pending { margin: 0; font-size: var(--text-sm); }
.job-experiments .experiment-comparison { overflow: hidden; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.job-experiments .experiment-comparison-row {
  display: grid;
  gap: 0.65rem;
  align-items: center;
  grid-template-columns: minmax(8rem, 1.3fr) minmax(7rem, 1fr)
    5rem 5rem 5.5rem 7.5rem;
  padding: 0.45rem 0;
  font-size: var(--text-sm);
}
.job-experiments .experiment-comparison-row + .experiment-comparison-row { border-top: 1px solid var(--line); border-top-color: var(--line); }
.job-experiments .experiment-comparison-row.authoritative { background: transparent; }
.job-experiments .experiment-comparison-row.header { color: var(--muted); background: transparent; padding-block: 0.35rem; font-family: var(--font-sans); font-size: var(--text-sm); }
.job-experiments .experiment-comparison-row strong { font-weight: 500; }
.job-experiments .experiment-comparison-row
  > span:not(.experiment-comparison-actions) { color: var(--muted); }
.job-experiments .experiment-comparison-row > a { justify-self: end; }
.job-experiments .experiment-comparison-row a { color: CanvasText; text-decoration: none; }
.job-experiments .experiment-comparison-row a:hover { text-decoration: underline; }
/* The attempt note is a note like a job's "no steps yet" line. */
.tape-runs-card .attempt-empty { margin-block: 0.35rem 0.5rem; color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }
/* Attempts read like the column heads: a quiet sans label on the tree, and a
   full-width rule between them like the one that closes an open job. */
.tape-runs-card .attempt-header { padding: 0; }
.tape-runs-card .attempt-header strong { color: var(--muted); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; }
.tape-runs-card .run-attempt + .run-attempt::before { right: calc(-1 * var(--bleed-right)); left: calc(-1 * var(--bleed-left)); background: var(--line); }
/* Stepped-in rows and charts still reach the box's edges. */
.tape-runs-card .run-details .job-card:not(.collapsed-into-run) { margin-left: var(--tree-step); --bleed-left: calc(0.85rem + var(--tree-step)); }
.tape-runs-card .job-card.collapsed-into-run > .job-details { padding-left: var(--tree-step); --bleed-left: calc(0.85rem + var(--tree-step)); }
/* Resource charts bleed to the card's edges like the rows above them. Each
   wrapper records how far its content sits in from each edge so the grid can
   reach back out; the chart cells' own padding then lands titles on the rows'
   first track. */
.tape-runs-card .run-details { padding: 0.1rem 0.75rem 0.6rem 0; --bleed-left: 0.85rem; --bleed-right: 1.6rem; }
.tape-runs-card .job-details { --bleed-right: 1.85rem; }
.tape-runs-card .job-card:not(.collapsed-into-run) .job-details { --bleed-left: 1.95rem; }
/* When the charts lead a job's details they sit flush under its row, with
   no rule between them: they open straight out of the row. */
.tape-runs-card .job-details > .job-resource-metrics:first-child { margin-top: 0; }
.tape-runs-card
  .job-details
  > .job-resource-metrics:first-child
  .job-resource-charts { border-top: 0; }
.tape-runs-card .job-details:has(> .job-resource-metrics:first-child),
.tape-runs-card
  .run-details:has(
    > .job-card.collapsed-into-run
      > .job-details
      > .job-resource-metrics:first-child
  ) { padding-top: 0; }
/* An open job closes with a full-width rule before the next job's row. */
.tape-runs-card .job-card.expanded + .job-card::before { display: block; height: 1px; margin: 0 calc(-1 * var(--bleed-right)) 0 calc(-1 * var(--bleed-left)); background: var(--line); content: ""; }
.tape-runs-card .job-resource-charts {
  position: relative;
  z-index: 2;
  background: var(--ground);
  margin-inline: calc(-1 * var(--bleed-left)) calc(-1 * var(--bleed-right));
  border-inline: 0;
  border-radius: 0;
}
.job-resource-chart-detail { margin-top: 0.15rem; color: var(--muted); font-size: var(--text-xs); }
/* Loading cells: the real titles over muted bars, pulsing like the list
   skeletons. The plot bar stands the height of a plot and its x axis. */
.job-resource-skeleton {
  display: inline-block;
  width: 3.5rem;
  height: 0.5rem;
  vertical-align: middle;
  background: color-mix(in srgb, CanvasText 6%, transparent);
  animation: tape-skeleton 1.4s ease-in-out infinite;
}
/* A bar in place of a line of figures keeps that line's height. */
.job-resource-summary > .job-resource-skeleton { margin-block: 0.24rem; }
.job-resource-percentiles .job-resource-skeleton { width: 1.6rem; height: 0.42rem; }
.job-resource-chart-skeleton .chart > .job-resource-skeleton { display: block; width: auto; height: calc(var(--chart-height) + 1.05rem); border-radius: 2px; }
/* Step boundaries: round dots, quiet enough to sit behind the data. */
.job-resource-chart .chart-marker { stroke: color-mix(in srgb, var(--muted) 55%, transparent); stroke-width: 1.5; stroke-dasharray: 0 4; stroke-linecap: round; pointer-events: none; }
.job-resource-chart .chart-tooltip-context { color: CanvasText; }
/* A single value gets the same rule under the heading as a list of rows, so
   CPU and memory read like disk and network. */
.job-resource-chart .chart-tooltip-heading + .chart-tooltip-value { display: block; margin-top: 0.3rem; border-top: 1px solid var(--line); padding-top: 0.38rem; }
/* Wide enough for four charts across (the ledger at desktop widths), the
   metrics read as one strip: summaries tuck under their titles, CPU keeps
   P50 and P99 (P90 and P95 drop), totals sit on one line, and plots shorten.
   Narrower, they stay 2×2. */
.tape-runs-card .job-resource-metrics { margin: 0.35rem 0 0.6rem; border: 0; padding: 0; container-type: inline-size; }
/* While the card scrolls sideways, its 46rem is wider than the column shows.
   The charts hold to the visible part instead: sized to the scroller and
   pinned where they sit, so every chart and its figures stay in view and
   still while the rows scroll. `--chart-inset` is how far the grid sits in
   from the scroller's left edge: the group's 1px border, plus the tree step
   for a job under its workflow. */
/* Rules sit on top of each group, not under each row, so an expanded run's
   details stay inside its own group. Groups and the runs within them bleed
   to the card's edges like the rows do; the padding keeps the tracks put. */
.tape-runs-card .revision-group { --shared-hover-background: var(--panel-strong); --shared-hover-radius: 0; border: 1px solid var(--line); padding: 0 0.85rem; }
.tape-runs-card .revision-group + .revision-group { margin-top: 0.75rem; }
.tape-runs-card .run-card + .run-card { margin-inline: -0.85rem; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); padding-inline: 0.85rem; }
/* The group's top space lives in its header, and the header reaches the
   box's inner edges, so it can pin (see "Sticky stack") as a solid band. */
.tape-runs-card .job-row {
  grid-template-columns: 0.72rem minmax(12rem, 1fr) 10rem 7rem 5rem 1rem 1rem;
  grid-template-rows: auto;
  gap: 0 0.65rem;
  /* The row box reaches the change box's edges, so the shared hover surface
     spans the full width; the padding keeps its content on the tracks. */
  width: calc(100% + var(--bleed-left) + var(--bleed-right));
  margin-inline: calc(-1 * var(--bleed-left)) calc(-1 * var(--bleed-right));
  padding: 0.2rem var(--bleed-right) 0.2rem var(--bleed-left);
  line-height: 1.25;
}
/* Jobs under a workflow read as one list: no rules between them. */
.tape-runs-card .job-card + .job-card::before { display: none; }
.tape-runs-card .job-provider { grid-row: 1; grid-column: auto; flex-direction: row; align-items: center; }
.tape-runs-card .job-metric-label { display: none; }
.tape-runs-card .job-metric {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  grid-row: 1;
  grid-column: auto;
  font-size: var(--text-sm);
}
/* Job rows sit inside the run's details (.75rem in from the right), so their
   link reaches back out to share the run link's column. */
.tape-runs-card .job-github-button { top: 50%; transform: translateY(-50%); right: 1.2rem; }
/* ═══ Tape list ════════════════════════════════════════════════
   The Runs ledger's shape for every other list (DESIGN.md, "The ledger
   row"): unframed column heads over one hairline box, one-line rows on
   shared tracks, a drawn mark first, names and data in the sans with tabular numerals. A list sets --list-columns; the first track is the
   mark and the second the name. */
/* Columns hold their tracks; a narrow screen scrolls the list sideways
   rather than stacking its cells. */
.runs-filter-loading { --list-columns: 0.72rem minmax(12rem, 1fr) 10rem 7rem 5rem; --list-min-width: 40rem; }
.tape-list > * { min-width: var(--list-min-width, 40rem); }
/* The first head names the mark and the name together. */
.tape-list-heads > :first-child { grid-column: 1 / 3; }
/* A head that sorts is a button in the head's own type. The sorted head is
   in ink with an arrow for its direction; the others darken on hover. */
.tape-list-row + .tape-list-row { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
a.tape-list-row:hover { color: inherit; }
a.tape-list-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
a.tape-list-row:hover .row-chevron { background: CanvasText; }
/* The name keeps its width; a chip beside it gives way first. */
.tape-list-name > strong {
  flex: 0 0 auto;
  max-width: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tape-list-name > .repo-name-tooltip { max-width: calc(100vw - 1rem); overflow-wrap: anywhere; white-space: normal; }
/* Placeholder rows for a list still loading: one muted bar per column, on
   the same tracks and at the same height as the rows they stand in for. */
.tape-list-skeleton > i {
  display: block;
  width: 100%;
  max-width: 7rem;
  height: 0.5rem;
  background: color-mix(in srgb, CanvasText 8%, transparent);
  animation: tape-skeleton 1.4s ease-in-out infinite;
}
.tape-list-skeleton > i:first-child { width: 0.5rem; }
.tape-list-skeleton > i:nth-child(2) { max-width: 9rem; }
.tape-list-skeleton > i:last-child { max-width: 3.5rem; }
@keyframes tape-skeleton {
  0%,
  100% { opacity: 1; }
  50% { opacity: 0.45; }
}
/* Machines: mark, name,
   profiles, slots, last seen, chevron. The one list whose rows grow: the
   Slots column gives each slot its own line (DESIGN.md, "The One Line
   Rule"). */
.tape-list-machines .tape-list-row { padding-block: 0.6rem; }
/* An exception must remain readable even beside a long machine name.
   When both cannot fit inline, it gets a second line within the same cell. */
.tape-list-machines .tape-list-name { flex-wrap: wrap; gap: 0.25rem 0.55rem; }
.tape-list-machines .exception-chip { flex: none; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.machine-slots { display: flex; min-width: 0; flex-direction: column; gap: 0.28rem; }
.machine-slot { display: grid; grid-template-columns: 0.42rem 4.8rem minmax(0, 1fr); gap: 0.5rem; align-items: baseline; font-size: var(--text-xs); }
.machine-slot b { font-weight: 500; }
.machine-slot-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.machine-slot-usage { position: relative; display: block; min-width: 0; max-width: 100%; cursor: help; }
.machine-slot-usage:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.machine-slot-account { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-tooltip.machine-slot-tooltip { max-width: min(26rem, calc(100vw - 16px)); white-space: normal; overflow-wrap: anywhere; line-height: 1.5; text-align: left; }
.machine-slot-tooltip > span { display: block; }
.machine-slot-mark { width: 0.42rem; height: 0.42rem; align-self: center; background: color-mix(in srgb, CanvasText 26%, transparent); }
.machine-slot.running .machine-slot-mark { background: var(--accent); }
.machine-slot.idle .machine-slot-mark { background: var(--green); }
.machine-slot.preparing .machine-slot-mark { background: var(--amber); }
/* Neutral state words are labels, not captions, so they keep the coloured
   ones' legibility. */
.machine-slot.stopped b,
.machine-slot.unavailable b { color: color-mix(in srgb, CanvasText 68%, transparent); }
.machine-slot.stopped .machine-slot-mark,
.machine-slot.unavailable .machine-slot-mark { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, CanvasText 68%, transparent); }
.machine-profiles-tooltip { display: grid; gap: 0.2rem; }
.machine-profiles-reason { display: block; }
/* Lifecycle's waiting jobs: mark, job, repository, runner, why, how long,
   and GitHub's mark, since each row opens the job there. */
.tape-list-lifecycle-waiting .tape-list-heads > :nth-child(5) { text-align: right; }
/* Runs awaiting approval: mark, workflow, repository, branch, environment,
   reviewers, how long, and GitHub's mark, since approving happens there. */
.tape-list-awaiting-approval .tape-list-heads > :last-child,
.tape-awaiting-approval-waited { text-align: right; font-variant-numeric: tabular-nums; }
.tape-list-external svg { display: block; width: 0.85rem; height: 0.85rem; fill: currentColor; }
a.tape-list-row:hover .tape-list-external { color: CanvasText; }
/* Repos: mark, name, routing, queue timeout (only when served repositories
   differ), runs, failed, median, last run, chevron. Repositories Mirage does
   not serve keep their place in name order as quiet rows with no chevron. */
.tape-list-row.is-static .tape-list-name > strong { color: var(--muted); }
/* Agent VMs: mark, name, resources, disk, what it holds, actions. Commands
   are copied from the row rather than printed in it; the create line sits
   under the list on the same inset. */
.tape-list-name > .agent-vm-id { font-family: var(--font-mono); font-size: var(--text-sm); }
.agent-vm-actions { display: flex; justify-content: flex-end; gap: 0.4rem; white-space: nowrap; }
.agent-vm-create { margin-top: 1rem; padding: 0 var(--list-inset, 0.85rem); }
.agent-vm-create-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; }
.agent-vm-profile { width: auto; }
.agent-vm-create-label { font-family: var(--font-sans); font-size: var(--text-md); }
.agent-vm-name { width: 12rem; }
.agent-vm-command {
  flex: 1 1 16rem;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-vm-line { margin: 0.45rem 0 0; max-width: 46rem; font-size: var(--text-xs); line-height: 1.5; }
.agent-vm-create > .agent-vm-line { margin-top: 0.4rem; }
/* ═══ Tape components ════════════════════════════════════════
   The direction's own ledger vocabulary. These classes have no
   counterpart in styles.css — the pages below are built from them. */
/* ── Section + ledger ───────────────────────────────────── */
/* An overview tile can jump to a section; leave a little air above it. */
.tape-sources-heading h2 { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -.02em; }
.tape-sources-heading span { flex: 0 0 auto; font-size: var(--text-xs); }
/* Band cards are not tables, so they do not inherit the table floor.
   Each ledger variant below sets its own. */
.tape-ledger-api-tokens .tape-ledger-row { grid-template-columns: minmax(10rem, 1.7fr) 6rem 7rem 7rem 5rem; }
.tape-api-token-secret-value code { flex: 1; overflow-wrap: anywhere; user-select: all; }
.tape-ledger-row:first-child,
.tape-ledger-head + .tape-ledger-row { border-top: 0; }
.tape-ledger-row > .tape-cell:first-child { text-align: left; }
.tape-ledger-sort-head > .tape-cell { overflow: visible; }
.tape-ledger-sort-head .tape-list-sort { width: 100%; justify-content: flex-end; }
.tape-ledger-sort-head > .tape-cell:first-child .tape-list-sort { justify-content: flex-start; }
.tape-source strong { overflow: hidden; font-size: var(--text-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tape-ledger-row.expanded .tape-caret,
.tape-caret.open { transform: rotate(90deg); }
/* A row that is not a chart series gets the neutral mark. */
.billing-series--1 { --billing-series-color: color-mix(in srgb, CanvasText 34%, transparent); }
/* Children sit on the page ground, names aligned under the parent's name. */
.tape-ledger-sub .tape-source-cell { padding-left: 2.12rem; }
.tape-ledger-sub .tape-cell { font-size: var(--text-sm); }
/* Starts where the sub-row names do: the row padding plus their indent. */
.tape-ledger-total .tape-cell { font-weight: 600; }
/* A source's included allowances sit inside its expansion, under its runner
   shapes and aligned with their names: a muted heading, then each plan's name
   beside its tabular figure, wrapping whole. */
.tape-plan-allowances li { display: flex; align-items: baseline; gap: 0.45rem; white-space: nowrap; }
.tape-plan-allowances span { color: var(--muted); font-family: var(--font-sans); }
.tape-plan-allowances strong { font-weight: 500; }
/* GitHub's plan minutes: a line per month with the month, the plan minutes
   drawn against the plan's, a meter, then what is unused or how far over.
   Running over is the one state here that needs attention, so only it has
   colour. */
.tape-plan-months li { display: grid; grid-template-columns: 8.5rem 9.5rem 9rem auto; align-items: center; gap: 1rem; white-space: nowrap; }
.tape-plan-months li > span:first-child { color: var(--muted); font-family: var(--font-sans); }
.tape-plan-months strong { font-weight: 500; }
.tape-plan-months .tape-meter { margin-top: 0; }
.tape-plan-months .tape-meter > rect { fill: color-mix(in srgb, CanvasText 55%, transparent); }
.tape-plan-months .tape-meter.over > rect { fill: var(--amber); }
.tape-plan-reason a { color: var(--accent); text-decoration: none; }
.tape-plan-reason a:hover { text-decoration: underline; }
/* Runner shapes under a subtotal such as "Private repositories" step in one
   mark's width further, in muted ink. */
.tape-ledger-sub-nested .tape-source-cell { padding-left: calc(2.12rem + 1.3rem); }
.tape-ledger-sub-nested .tape-sub-name { color: var(--muted); }
.billing-source-estimate { display: grid; justify-items: end; gap: 0.15rem; }
.billing-source-estimate small { color: var(--muted); font-family: var(--font-sans); font-size: var(--text-xs); }
.billing-resource-usage { border-top: 1px solid var(--line); padding: 0.85rem 0.85rem 0.7rem calc(0.85rem + 2.12rem); }
.billing-resource-usage h3 { margin: 0 0 0.3rem; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; }
.billing-resource-usage p { max-width: 76ch; margin: 0; font-size: var(--text-xs); line-height: 1.55; }
.billing-resource-usage table {
  width: 100%;
  margin: 0.7rem 0;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.billing-resource-usage th {
  font-family: var(--font-sans);
  font-weight: 400;
  padding: 0.45rem 0.7rem;
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
}
.billing-resource-usage td { padding: 0.45rem 0.7rem; text-align: right; vertical-align: top; white-space: nowrap; }
.billing-resource-usage th:first-child { text-align: left; }
.billing-resource-usage thead th { border: 0; font-size: var(--text-sm); }
.billing-resource-usage tbody th { font-size: var(--text-sm); }
.billing-resource-usage tbody tr > * { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.billing-resource-usage tbody tr:first-child > * { border-top-color: var(--line); }
.billing-resource-usage tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
.billing-resource-usage tbody tr > :first-child { border-left: 1px solid var(--line); }
.billing-resource-usage tbody tr > :last-child { border-right: 1px solid var(--line); }
.billing-resource-usage thead { color: var(--muted); }
.billing-resource-usage small { display: block; margin-top: 0.2rem; color: var(--muted); font-family: var(--font-sans); font-size: var(--text-xs); }
.billing-resource-estimates { display: flex; gap: 2rem; margin: 0.7rem 0; font-size: var(--text-sm); }
.billing-resource-estimates > div { display: flex; gap: 0.6rem; align-items: baseline; }
.billing-resource-estimates dt { font-family: var(--font-sans); }
.billing-resource-estimates dd { margin: 0; font-weight: 500; }
/* The GitHub plan multiplier is the point of that expansion, so it reads. */
/* Period totals strip: one contiguous bordered band. The frame is the 1px
   padding showing through, so it is exactly the same hairline as the gaps
   and as every other border on the page. */
/* Top-aligned so labels and figures share a line across tiles, and a
   caption that wraps differently never moves its neighbours. */
.tape-overview-cell > span { color: var(--muted); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; }
.tape-overview-cell > strong {
  margin-top: 0.3rem;
  font-size: var(--text-figure);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.05;
  white-space: nowrap;
}
.tape-overview-cell > strong.over { color: var(--amber); }
.tape-overview-cell > small { margin-top: 0.35rem; color: var(--muted); font-size: var(--text-xs); line-height: 1.4; }
.tape-admin-capacity .tape-overview-cell > strong { white-space: normal; overflow-wrap: anywhere; }
.tape-admin-capacity .tape-overview-cell > small { overflow-wrap: anywhere; }
/* A tile that links to the section breaking its figure down: the label takes
   the link colour on hover, the tile keeps its ground. */
a.tape-overview-link { color: inherit; text-decoration: none; }
a.tape-overview-link:hover > span { color: var(--accent); }
a.tape-overview-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* A tile that filters the page to its figure. The one in force is where you
   are, so it takes the sidebar's treatment: a 2px teal bar (along its foot)
   and its label in ink. */
.tape-overview-link.active > span { color: CanvasText; }
.status-tooltip.tape-overview-tooltip { padding: 0.6rem 0.7rem; font-weight: 400; line-height: 1.5; }
.runs-failure-breakdown { margin: 0; }
.runs-failure-breakdown > div { display: flex; justify-content: space-between; gap: 1.5rem; }
.runs-failure-breakdown dt { font-family: var(--font-sans); }
.runs-failure-breakdown dd { margin: 0; font-variant-numeric: tabular-nums; }
.runs-failure-breakdown-note { margin: 0.45rem 0 0; color: var(--muted); font-size: var(--text-xs); }
/* ── Billing ────────────────────────────────────────────── */
.tape-billing-section .tape-sources-heading h2,
.billing-jobs-card > summary strong { font-family: var(--font-sans); font-size: 1.125rem; font-weight: 600; }
.tape-billing-section .tape-source-link { font-family: var(--font-sans); font-size: var(--text-sm); }
.tape-ledger-billing .tape-ledger-row {
  min-height: 2.8rem;
  column-gap: 0.65rem;
  border-top-color: color-mix(in srgb, var(--line) 55%, transparent);
  padding: 0.18rem 0.85rem;
  background: transparent;
  line-height: 1.25;
}
.tape-ledger-billing .tape-ledger-row:has(.tape-source-toggle):hover { background: transparent; }
.tape-ledger-billing .shared-hover-highlight + .tape-ledger-row { border-top: 0; }
.tape-ledger-billing .tape-ledger-head {
  min-height: 0;
  border: 0;
  padding: 0.5rem calc(0.85rem + 1px) 0.4rem;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0;
}
.tape-ledger-billing .tape-cell { font-family: var(--font-sans); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.tape-ledger-billing .tape-ledger-head .tape-cell { overflow: visible; font: inherit; }
.tape-ledger-billing .tape-source strong,
.tape-ledger-billing .tape-sub-name { font-family: var(--font-sans); font-size: var(--text-md); font-weight: 500; }
.tape-ledger-billing .tape-ledger-sub { min-height: 2rem; }
.tape-ledger-billing .tape-ledger-sub .tape-sub-name { font-size: var(--text-sm); }
.tape-ledger-billing .tape-ledger-total { border-top-color: var(--line); }
.tape-ledger-billing .tape-ledger-total .tape-cell { font-weight: 500; }
.tape-ledger-billing .tape-ledger-total > .tape-cell:first-child { font-family: var(--font-sans); font-size: var(--text-md); font-weight: 400; }
.billing-jobs-card {
  margin-top: 1rem;
  overflow: visible;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.billing-jobs-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  padding: 0 0 0.5rem;
}
.billing-jobs-card > summary:hover { background: transparent; }
.billing-jobs-card > summary small { margin-top: 0.08rem; color: var(--muted); font-family: var(--font-sans); font-size: var(--text-xs); }
.billing-jobs-card .billing-jobs-detail { border: 0; padding: 0; }
.billing-jobs-card .billing-job-list { overflow: visible; margin: 0; border: 0; }
.billing-job-list .tape-ledger-row { min-width: 0; grid-template-columns: minmax(15rem, 1.5fr) minmax(11rem, 1fr) 6rem 10rem 1rem; row-gap: 1rem; }
.tape-ledger-billing .billing-job-row { color: inherit; text-decoration: none; }
.tape-ledger-billing .billing-job-row:hover { background: transparent; }
.tape-ledger-billing .billing-job-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tape-ledger-billing .billing-job-identity strong { font-family: var(--font-sans); font-size: var(--text-md); font-weight: 500; }
.tape-ledger-billing .billing-job-identity small { font-family: var(--font-sans); font-size: var(--text-sm); }
.tape-ledger-billing .billing-job-runner strong,
.tape-ledger-billing .billing-job-quota strong { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; }
.tape-ledger-billing .billing-job-runner small,
.tape-ledger-billing .billing-job-quota small { font-size: var(--text-xs); font-weight: 400; }
.tape-ledger-billing .billing-job-runtime { font-size: var(--text-sm); text-align: right; }
.tape-ledger-billing .billing-job-quota { text-align: right; }
.tape-saved > span { display: block; color: var(--muted); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 400; }
.tape-saved > strong {
  display: block;
  margin-top: 0.35rem;
  color: CanvasText;
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.tape-saved > small { display: block; margin-top: 0.4rem; color: var(--muted); font-size: var(--text-xs); }
.tape-ledger-savings .tape-ledger-row { grid-template-columns: minmax(13rem, 1.7fr) 7rem 8.5rem 8rem 7rem; }
/* ── Date range picker ──────────────────────────────────── */
.tape-range-cal-head strong { font-size: var(--text-sm); font-weight: 600; }
.tape-range-nav button {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  color: CanvasText;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1;
}
.tape-range-nav button:hover { background: var(--panel-strong); }
.tape-range-dow span { padding: 0.2rem 0; color: var(--muted); font-size: var(--text-xs); text-align: center; }
.tape-range-grid button {
  height: 1.75rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: CanvasText;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
}
.tape-range-grid button:hover:not(:disabled) { background: var(--panel-strong); }
.tape-range-grid button:disabled { color: color-mix(in srgb, CanvasText 26%, transparent); cursor: default; }
.tape-range-grid button.in { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.tape-range-grid button.edge { background: var(--accent); color: Canvas; font-weight: 600; }
.tape-range-presets button {
  border: 0;
  border-radius: 2px;
  padding: 0.4rem 0.55rem;
  background: transparent;
  color: CanvasText;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
}
.tape-range-presets button[aria-pressed="true"] { background: var(--panel-strong); font-weight: 600; }
.tape-range-fields label { display: flex; flex-direction: column; gap: 0.25rem; color: var(--muted); font-size: var(--text-xs); }
.tape-range-fields input {
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0 0.5rem;
  background: transparent;
  color: CanvasText;
  font: inherit;
  font-size: var(--text-sm);
}
.tape-range-foot .muted { margin: 0; font-size: var(--text-xs); }
/* ── Settings ───────────────────────────────────────────── */
.tape-settings-section + .tape-settings-section { margin-top: 1.5rem; }
.tape-ledger-settings .tape-cell { overflow: visible; text-align: left; white-space: normal; }
.tape-ledger-settings .cloudflare-backend-error { margin: 0.65rem 0.85rem; overflow-wrap: anywhere; }
.tape-lock rect,
.tape-lock path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.1; }
.tape-ledger-limits .tape-ledger-row { grid-template-columns: minmax(11rem, 1.4fr) minmax(9rem, 1fr) 6rem 7rem; }
.tape-account-row + .tape-ledger-head { border-top: 1px solid var(--line); }
.tape-account-identity strong { font-size: var(--text-sm); font-weight: 600; }
.tape-account-identity span { font-size: var(--text-xs); }
.tape-policy-source strong { color: CanvasText; font-weight: 600; }
.tape-policy-source code { color: CanvasText; font-size: var(--text-xs); }
.tape-policy-controls > div:first-child { display: flex; flex-direction: column; gap: 0.2rem; }
.tape-policy-controls strong { font-size: var(--text-sm); font-weight: 600; }
.tape-policy-controls .muted { max-width: 32rem; font-size: var(--text-xs); line-height: 1.5; }
.tape-policy-plan-row + .tape-policy-plan-row { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.tape-policy-plan-row strong { font-weight: 500; }
.tape-policy-plan-row.changed strong { color: var(--green); font-weight: 600; }
.tape-policy-actions > .muted { flex: 1 1 20rem; font-size: var(--text-xs); line-height: 1.45; text-align: right; }
.tape-policy-preview > div { display: flex; flex-direction: column; gap: 0.18rem; }
.tape-policy-preview strong { font-size: var(--text-sm); font-weight: 600; }
.tape-policy-preview .muted { font-size: var(--text-xs); line-height: 1.45; }
.tape-policy-preview label { position: relative; }
.tape-policy-preview .field-input { width: 100%; padding-left: 1.25rem; }
.tape-policy-previews > span { display: flex; gap: 0.45rem; align-items: baseline; font-size: var(--text-xs); }
.tape-policy-previews strong { font-weight: 600; }
/* The value truncates rather than pushing the Edit button into the next
   column; the editor holds the full string. */
.tape-edit-field .field-input {
  width: 4.5rem;
  min-width: 0;
  min-height: 2rem;
  flex: 0 0 4.5rem;
  padding-inline: 0.5rem;
  font-size: var(--text-sm);
}
.tape-edit-field em { font-size: var(--text-xs); font-style: normal; }
/* A choice in an inline editor spans the popover, its options sharing it. */
.tape-edit-pop .tape-modes > .tape-mode { flex: 1 1 0; }
.tape-edit-pop > p { margin: 0.55rem 0 0.7rem; font-size: var(--text-xs); line-height: 1.45; }
.tape-edit-actions .link-button { flex: 0 0 auto; font-size: var(--text-xs); white-space: nowrap; }
.tape-dialog-head strong { font-size: var(--text-md); font-weight: 600; }
.tape-dialog-foot .muted { max-width: 17rem; font-size: var(--text-xs); line-height: 1.4; }
.tape-connect-option-icon svg { width: 1.05rem; height: 1.05rem; }
.tape-connect-option-icon path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.tape-connect-option strong { font-size: var(--text-sm); font-weight: 600; }
.tape-connect-option .muted { font-size: var(--text-xs); line-height: 1.5; }
.tape-connect-option:hover .tape-connect-option-arrow { color: CanvasText; transform: translateX(2px); }
.tape-fleet-toolbar .tape-scopes { margin-bottom: 0; }
.tape-fact span { color: var(--muted); font-size: var(--text-xs); }
.tape-fact strong { font-size: var(--text-sm); font-weight: 600; }
.tape-meter > rect { fill: var(--green); }
.tape-label-list code { border: 1px solid var(--line); padding: 0.14rem 0.4rem; font-size: var(--text-xs); }
.tape-form > p { margin: 0.3rem 0 0.75rem; max-width: 44rem; font-size: var(--text-xs); line-height: 1.5; }
.tape-form-fields label {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
}
.tape-list-job-routes [data-tooltip-trigger]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* One setup PR per repository, after its workflows. */
.tape-ledger-people .tape-ledger-row { grid-template-columns: minmax(13rem, 1fr) 10rem; }
.tape-person .muted { flex: 0 0 auto; font-size: var(--text-xs); }
.tape-ledger-sharing .tape-ledger-row { grid-template-columns: minmax(12rem, 1.3fr) minmax(14rem, 1.4fr) 6rem; }
.tape-ledger-sharing .tape-cell:last-child { text-align: right; }
.tape-ledger-passkeys .tape-ledger-row { grid-template-columns: minmax(10rem, 1.6fr) 9rem 5rem; }
.tape-ledger-passkeys .tape-cell:last-child { text-align: right; }
.tape-ledger-passkeys .link-button { font-size: var(--text-xs); }
/* ── Repo detail ────────────────────────────────────────── */
.tape-ledger-repo-settings .tape-ledger-row { grid-template-columns: minmax(15rem, 1.4fr) minmax(12rem, 1fr); }
.tape-ledger-repo-settings .tape-cell:first-child { display: flex; flex-direction: column; gap: 0.15rem; }
.tape-ledger-repo-settings .tape-cell:first-child .muted { font-size: var(--text-xs); }
/* ── Set up routing ─────────────────────────────────────── */
/* The page's one action sits at the right of its head, level with the
   title; on a phone it drops under the description. */
.tape-detail-actions .button { margin: 0; }
/* Three numbered steps, each a section: the number is a muted figure before
   the headline, and one muted line says why the step matters. */
.tape-setup-step,
.tape-setup-step + .tape-setup-step { margin-top: 1.3rem; }
.tape-setup-step .tape-sources-heading { align-items: baseline; margin-bottom: 0.25rem; }
.tape-setup-step .tape-sources-heading h2 { display: flex; align-items: baseline; gap: 0.6rem; font-weight: 600; }
/* The ready check and the pull request's stages: mark, name, one line of
   detail, then the fix (or GitHub's mark) at the right. */
/* Each row is its own grid, so the fix column is a fixed track, there only
   when some check has a fix: an auto track would shift the details wherever
   a row has a button. */
.tape-list-setup .tape-list-heads > :last-child { justify-self: end; }
/* A variant beside a name, such as the jobs a machine type serves: muted
   text that gives way before the name does. */
.tape-setup-action .button { margin: 0; }
.status-tooltip.tape-setup-tooltip { max-width: min(24rem, 80vw); line-height: 1.4; white-space: normal; }
/* A check still being worked out keeps its name over skeleton bars. */
.tape-setup-skeleton > i {
  display: block;
  width: 100%;
  max-width: 14rem;
  height: 0.5rem;
  background: color-mix(in srgb, CanvasText 8%, transparent);
  animation: tape-skeleton 1.4s ease-in-out infinite;
}
.tape-setup-check > .tape-setup-skeleton:first-child > i { width: 0.5rem; }
/* Jobs: one box per workflow, titled like a ledger group, with a row per job
   on the same tracks: what it runs on now, where Mirage runs it, and what it
   falls back to. */
.tape-setup-workflow-head strong { font-family: var(--font-sans); font-size: var(--text-md); font-weight: 500; }
.tape-setup-workflow-head .muted { overflow: hidden; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.tape-setup-workflow-head + .tape-list-row,
.tape-setup-workflow-note + .tape-list-row { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
/* Reasons and read errors span the data columns: one muted line, the whole
   sentence in the tooltip when it doesn't fit. */
/* A job you can pick is a label over a hidden native checkbox; the box is
   drawn in the mark's track, like the pairing page's radio. */
label.tape-setup-job { cursor: pointer; }
label.tape-setup-job:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
label.tape-setup-job:hover .tape-setup-checkbox { border-color: CanvasText; }
.tape-setup-job.selected .tape-setup-checkbox { border-color: CanvasText; background: CanvasText; }
.tape-setup-job.selected .tape-setup-checkbox::after {
  width: 100%;
  height: 100%;
  background: var(--ground);
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.75 8.5 6.25 12l7-7.75' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 90% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.75 8.5 6.25 12l7-7.75' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 90% no-repeat;
}
/* Children (a matrix's runners, a pull request's checks) sit on their
   parent's tracks under a dashed rail in the mark's track. */
.tape-setup-child .tape-list-name > .status-mark-icon { flex: 0 0 auto; }
.tape-setup-child .tape-list-name > strong { min-width: 0; flex: 0 1 auto; font-size: var(--text-sm); }
/* One review frame: proposal header, file ledger, then the opening action. */
.tape-list-setup + .tape-setup-proposal { margin-top: 0.75rem; }
.tape-setup-preview + .tape-setup-open { border-top: 1px solid var(--line); }
.tape-setup-open > p { flex: 1 1 20rem; max-width: 60ch; margin: 0; font-size: var(--text-sm); line-height: 1.55; }
.tape-setup-open-actions > .muted { font-size: var(--text-sm); }
.tape-setup-open-actions .button { margin: 0; }
.tape-setup-preview-head h3 {
  flex: 1 1 16rem;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 600;
}
.tape-setup-preview-head .button { margin: 0; flex-shrink: 0; }
.tape-setup-preview-meta > span { min-width: 0; overflow-wrap: anywhere; }
.tape-setup-preview-meta code { color: CanvasText; font: inherit; }
.tape-setup-preview-file + .tape-setup-preview-file { border-top: 1px solid var(--line); }
.tape-setup-preview-file > summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem var(--list-inset, 0.85rem);
  min-height: 2.8rem;
  background: transparent;
  cursor: pointer;
  list-style: none;
  font-size: var(--text-sm);
}
.tape-setup-preview-file > summary .row-chevron { flex-shrink: 0; }
.tape-setup-preview-file > summary::-webkit-details-marker { display: none; }
.tape-setup-preview-file > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tape-setup-preview-file > summary > .muted { margin-left: auto; flex-shrink: 0; font-size: var(--text-xs); }
.tape-setup-preview-file[open] > summary .row-chevron { transform: rotate(90deg); }
.tape-setup-code code { display: block; width: max-content; min-width: 100%; font: inherit; }
.tape-setup-code code > span { display: block; padding-inline: var(--list-inset, 0.85rem); white-space: pre; }
.tape-setup-code-added > .tape-setup-code-prefix { color: var(--green); }
.tape-setup-code-removed > .tape-setup-code-prefix { color: var(--red); }
.tape-setup-code .sh__token--class { color: var(--sh-class); }
.tape-setup-code .sh__token--identifier { color: var(--sh-identifier); }
.tape-setup-code .sh__token--sign { color: var(--sh-sign); }
.tape-setup-code .sh__token--property { color: var(--sh-property); }
.tape-setup-code .sh__token--entity { color: var(--sh-entity); }
.tape-setup-code .sh__token--jsxliterals { color: var(--sh-jsxliterals); }
.tape-setup-code .sh__token--string { color: var(--sh-string); }
.tape-setup-code .sh__token--keyword { color: var(--sh-keyword); }
.tape-setup-code .sh__token--comment { color: var(--sh-comment); }
.tape-setup-preview-description code { width: auto; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tape-setup-preview-placeholder i {
  display: block;
  width: 60%;
  max-width: 24rem;
  height: 0.5rem;
  background: color-mix(in srgb, CanvasText 8%, transparent);
  animation: tape-skeleton 1.4s ease-in-out infinite;
}
.tape-setup-preview-placeholder-code > i:nth-child(even) { width: 40%; }
.tape-setup-preview-placeholder-row > i { max-width: 16rem; }
.pair-approve-outcome .pair-approve-next { margin-top: 0.55rem; }
/* ── Runs ───────────────────────────────────────────────── */
/* The overview's own space sets the ledger off; no section heading. */
/* Group names use a real medium weight; metadata stays quiet beside them. */
.tape-runs-card .revision-title { font-family: var(--font-sans); font-weight: 500; letter-spacing: 0; font-size: var(--text-md); }
.tape-runs-card .revision-pull-request,
.tape-runs-card .run-identity strong,
.tape-runs-card .job-identity strong { font-family: var(--font-sans); font-weight: 500; letter-spacing: 0; font-size: var(--text-md); }
/* An account with no runs yet reads like an empty ledger group: the group
   title's sans and a muted note, on the same box and rule as the groups. */
.runs-empty { margin-top: 1.3rem; padding: 0.9rem 0.85rem 1rem; text-align: left; }
.runs-empty h2 { margin: 0; font-family: var(--font-sans); font-size: var(--text-md); font-weight: 600; }
.runs-empty p { margin: 0.3rem 0 0; font-size: var(--text-sm); }
/* ── Machine detail ─────────────────────────────────────── */
.tape-detail-title h1 { margin: 0; font-size: var(--text-title); font-weight: 600; }
.tape-detail-title span { font-size: var(--text-sm); }
.tape-overview-dense .tape-overview-cell { padding: 0.7rem 0.8rem; }
.tape-overview-dense .tape-overview-cell > strong { margin-top: 0.2rem; font-size: 1rem; white-space: normal; }
.tape-ledger-slots .tape-ledger-row { grid-template-columns: minmax(7rem, 1fr) minmax(6.5rem, 0.8fr) minmax(10rem, 1.3fr)
    minmax(8rem, 1.1fr) minmax(7rem, 0.9fr) minmax(3.5rem, 0.5fr); }
.tape-ledger-slot-usage .tape-ledger-row { grid-template-columns: minmax(7rem, 1fr) minmax(6.5rem, 0.8fr) minmax(14rem, 1.5fr)
    minmax(8rem, 1.1fr) minmax(7rem, 0.9fr); }
.tape-ledger-phases .tape-ledger-row { grid-template-columns: minmax(6rem, 1fr) minmax(4rem, 0.6fr) minmax(4rem, 0.6fr)
    minmax(4.5rem, 0.6fr); }
.tape-ledger-failures .tape-ledger-row { grid-template-columns: minmax(12rem, 1.4fr) 7rem 7rem 9rem 7rem; }
.tape-machine-name strong { overflow: hidden; font-size: var(--text-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tape-machine-name span { overflow: hidden; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.tape-machine-name code,
.tape-slot-metric-head code { color: var(--muted); font-size: var(--text-xs); }
.tape-metric > span { color: var(--muted); font-size: var(--text-xs); }
.tape-metric > strong { font-size: 1rem; font-weight: 600; }
.tape-metric .chart { margin-top: 0.45rem; }
.tape-slot-empty span { font-size: var(--text-xs); }
.tape-profile-head strong { font-size: var(--text-sm); font-weight: 600; }
.tape-profile-head .tape-grant { display: inline-flex; align-items: center; gap: 0.45rem; }
.tape-profile-checks .passed { color: var(--green); }
.tape-profile-checks .failed { color: var(--red); }
.tape-profile-remedy strong { margin-right: 0.4rem; font-weight: 600; }
.tape-target small { display: block; font-size: var(--text-xs); }
.tape-config > div {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
  padding: 0.45rem 0.85rem;
  font-size: var(--text-sm);
}
.tape-config > div:first-child { border-top: 0; }
.tape-config dt { color: var(--muted); }
.tape-config dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
/* The design system's switch is inline-flex + nowrap at a fixed width, so
   its label is allowed to wrap here rather than overrun the card. */
.tape-config-toggle .routing-switch { align-items: start; white-space: normal; text-align: left; }
.tape-runner-settings .tape-config > div { align-items: center; }
.tape-runner-field .field-input { width: 3.5rem; min-width: 0; min-height: 1.9rem; padding-inline: 0.45rem; font-size: var(--text-sm); }
.tape-runner-field em { font-size: var(--text-xs); font-style: normal; }
.tape-runner-actions .link-button { font-size: var(--text-xs); }
.tape-runner-settings .inline-error { margin: 0; padding: 0 0.85rem 0.6rem; }
.tape-transfer strong { font-size: var(--text-sm); font-weight: 600; }
.tape-transfer > p { margin: 0.3rem 0 0.7rem; font-size: var(--text-xs); line-height: 1.5; }
.tape-transfer-row .field-select { width: auto; min-width: 12rem; }
/* ── Runners / fleet ────────────────────────────────────── */
/* Neutral state words are semantic labels, not captions, so they sit in the
   same legibility band as the coloured ones. */
.tape-state-off,
.tape-row-unavailable .tape-cell:first-child strong { color: color-mix(in srgb, CanvasText 68%, transparent); }
.tape-ledger-lifecycle .tape-ledger-row { grid-template-columns: minmax(11rem, 1.1fr) 4rem repeat(3, 4.5rem) minmax(15rem, 1.5fr); gap: 0.75rem; align-items: baseline; }
.tape-ledger-lifecycle .tape-cell:last-child { white-space: normal; text-align: left; }
.tape-ledger-lifecycle .tape-cell:not(:first-child):not(:last-child) { font-variant-numeric: tabular-nums; }
/* A layer with nothing in it keeps its heading and note, and one line where
   the ledger would be, inside the same hairline. */
.tape-lifecycle-step .tape-state { align-self: center; }
.tape-lifecycle-step .tape-state.active { background: var(--green); }
.tape-lifecycle-step .tape-state.slow { background: var(--amber); }
.tape-ledger-entitlements .tape-ledger-row { grid-template-columns: minmax(9rem, 1.4fr) minmax(5.5rem, 0.8fr) minmax(3.5rem, 0.5fr)
    minmax(3.5rem, 0.5fr) minmax(5rem, 0.7fr) minmax(5.5rem, 0.8fr) minmax(
      5rem,
      0.7fr
    )
    minmax(3rem, 0.4fr); }
.tape-ledger-audit .tape-ledger-row { grid-template-columns: minmax(11rem, 1.4fr) minmax(9rem, 1fr) 8rem 8rem; }
.tape-list-more .inline-error { margin: 0; }
/* ── Theme switch + admin link ──────────────────────────── */
.tape-admin-link + .tape-switch { margin-top: 0.5rem; }
.tape-switch + .sidebar-user { margin-top: 0.7rem; }
.tape-switch button {
  flex: 1;
  border: 0;
  padding: 0.34rem 0.5rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: uppercase;
}
.tape-switch button[aria-pressed="true"] { background: var(--panel-strong); color: CanvasText; }
.tape-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* The mobile utility header keeps account controls compact while product
   destinations move into the fixed bottom dock. */
/* ── Sticky stack ───────────────────────────────────────────
   Scrolling a long box keeps its context pinned, each layer inside its own
   section and under the one above: column heads, then the change's header,
   then the open workflow's row, then the open job's row. RunsContent
   measures the layer heights into --stick-* so the offsets follow the fonts,
   and marks an open row .is-stuck only while it is actually pinned. */
.tape-runs-card .job-row-shell { margin-inline: calc(-1 * var(--bleed-left, 0.85rem))
    calc(-1 * var(--bleed-right, 0.85rem)); padding-inline: var(--bleed-left, 0.85rem) var(--bleed-right, 0.85rem); }
.tape-runs-card .run-row { margin-inline: calc(-1 * var(--bleed-left, 0.85rem))
    calc(-1 * var(--bleed-right, 0.85rem)); padding-inline: var(--bleed-left, 0.85rem) var(--bleed-right, 0.85rem); --bleed-left: 0.85rem; --bleed-right: 0.85rem; }
.tape-runs-card .run-github-button { top: 50%; transform: translateY(-50%); right: 1.2rem; }
.tape-runs-card .run-card.expanded > .run-row { position: sticky; top: calc(var(--stick-heading, 2rem) + var(--stick-group, 2.1rem)); z-index: 4; }
.tape-runs-card .job-card.expanded > .job-row-shell { position: sticky; top: calc(
    var(--stick-heading, 2rem) + var(--stick-group, 2.1rem) +
      var(--stick-run, 2.8rem)
  ); z-index: 3; }
/* Pinned layers are frosted rather than solid: a translucent ground with
   the rows scrolling beneath blurred through it. At rest nothing sits behind
   them, so they read the same as before. */
.tape-runs-card .runs-heading {
  display: grid;
  grid-template-columns: 0.72rem minmax(12rem, 1fr) 10rem 7rem 5rem 1rem 1rem;
  gap: 0.65rem;
  /* The heads sit over the group boxes; the padding (box border included)
     keeps them on the rows' tracks. */
  border-bottom: 0;
  padding: 0.5rem calc(1.6rem + 1px) 0.4rem calc(0.85rem + 1px);
  position: sticky;
  top: 0;
  z-index: 2;
  text-transform: none;
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0;
  font-size: var(--text-sm);
  background: var(--sticky-surface);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
}
.tape-runs-card .revision-header {
  margin-inline: -0.85rem;
  padding: 0.9rem 1rem 0.05rem 0.85rem;
  position: sticky;
  top: var(--stick-heading, 2rem);
  z-index: 5;
  background: var(--sticky-surface);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
}
.tape-runs-card .run-card.expanded > .run-row.is-stuck,
.tape-runs-card .job-card.expanded > .job-row-shell.is-stuck { background: var(--sticky-surface); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
/* Open rows stay transparent, and so part of the box's one gliding hover
   surface, until they actually pin. Pinned, their frosted ground covers that
   surface, so a pinned row shows its hover itself. */
.tape-runs-card .run-card.expanded > .run-row.is-stuck:hover,
.tape-runs-card .job-card.expanded > .job-row-shell.is-stuck:hover { background: color-mix(
    in srgb,
    var(--panel-strong) 100%,
    var(--sticky-surface)
  ); }
/* Chart heads use the interface sans and tabular figures, like the ledger. */
.tape-runs-card .job-resource-chart-heading,
.tape-runs-card .job-resource-chart-heading * { font-family: var(--font-sans); font-weight: 400; }
.tape-runs-card .job-resource-chart h4 { margin: 0; font-size: var(--text-sm); line-height: 1.25; letter-spacing: 0; font-weight: 500; }
.tape-runs-card .chart-legend.job-resource-legend { font-size: var(--text-xs); }
.tape-runs-card .job-resource-chart-heading .job-resource-chart-detail,
.tape-runs-card .job-resource-summary > strong,
.tape-runs-card .job-resource-percentiles dd { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 500; }
.tape-runs-card .job-resource-summary > span,
.tape-runs-card .job-resource-percentiles dt { font-size: var(--text-xs); letter-spacing: 0.04em; }
.tape-runs-card .job-resource-peak > strong { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 500; }
.tape-runs-card .job-resource-peak > span:not(.status-tooltip) { font-size: var(--text-xs); letter-spacing: 0.04em; }
/* Series totals as plain figures in a muted version of their line's colour,
   separated by a quiet slash, at the size of the P50/P99 figures. */
.job-resource-totals-inline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.35rem; }
.job-resource-total-group { display: inline-flex; align-items: baseline; gap: 0.35rem; }
.tape-runs-card .job-resource-chart-heading .job-resource-total { position: relative; color: color-mix(in srgb, var(--chart-color) 72%, var(--muted)); font-family: var(--font-sans); font-size: var(--text-xs); cursor: default; }
.tape-runs-card .job-resource-chart-heading .job-resource-total-separator { color: var(--muted); font-size: var(--text-xs); }
/* The step a failed job broke on, beside its name: the failure band's red on
   its tint, small and truncating so it never pushes the columns. */
.tape-runs-card .failed-step,
.exception-chip {
  min-width: 0;
  max-width: 16rem;
  overflow: hidden;
  flex: 0 1 auto;
  border-radius: 3px;
  padding: 0.08rem 0.4rem;
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Queued jobs no runner can ever take: the one queue state a person has to
   act on, so it gets the failure band's tint above the list it summarises. */
.tape-blocked-runners > .decision-icon { flex: 0 0 auto; margin-top: 0; }
.tape-blocked-runners-action a { color: var(--accent); }
.tape-runs-card .job-identity {
  flex-direction: row;
  grid-row: 1;
  grid-column: auto;
  overflow: hidden;
  align-items: center;
  gap: 0.55rem;
}
.tape-runs-card .run-identity { grid-row: 1; grid-column: auto; overflow: hidden; align-items: center; gap: 0.55rem; }
/* The chip gives way first: the name keeps its full width and truncates only
   when it alone is wider than the cell. */
.tape-runs-card .job-identity > .row-name,
.tape-runs-card .run-identity > .row-name { flex: 0 0 auto; max-width: 100%; }
.tape-runs-card .failed-step-more { opacity: 0.75; }
.card.tape-runs-card { border: 0; padding: 0; }
.auth-card.empty { border: 0; padding: 0; background: transparent; text-align: left; }
.device-authorization { max-width: 62rem; border-top: 1px solid var(--line); padding-top: 1rem; }
/* A recommendation names the patch and keeps its benefit beside the action. */
.tape-improvements-intro { margin: 0 0 .75rem; font-size: var(--text-sm); line-height: 1.55; }
.tape-improvements-list { margin: 0; padding: 0; list-style: none; }
.tape-improvement { padding: .85rem 0; border-top: 1px solid var(--line); }
.tape-improvement-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  align-items: center; gap: .65rem 1.3rem;
}
.tape-improvement-identity, .tape-improvement-benefit {
  display: flex; flex-direction: column; min-width: 0; gap: .2rem;
  font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere;
}
.tape-improvement-identity > strong { font-family: var(--font-sans); font-size: var(--text-md); font-weight: 400; }
.tape-improvement-benefit > strong { font-size: var(--text-md); font-weight: 600; }
.tape-improvement-action { min-width: 0; font-size: var(--text-sm); }
.tape-improvement-proof { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .6rem; font-size: var(--text-sm); }
.tape-improvement-proof > span { min-width: 0; overflow-wrap: anywhere; }
.tape-improvement-status { margin: .5rem 0 0; font-size: var(--text-sm); line-height: 1.55; }
.tape-improvement-status:empty { margin: 0; }
.tape-improvement-details { margin-top: .5rem; font-size: var(--text-sm); line-height: 1.55; }
.tape-improvement-details > summary { cursor: pointer; width: fit-content; padding: .2rem 0; }
.tape-improvement-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tape-improvement-evidence { max-width: 75ch; overflow-wrap: anywhere; }
.tape-improvement-evidence p { margin: .65rem 0; }
.tape-improvement-evidence pre {
  margin: .75rem 0; padding: .75rem; background: transparent; border: 1px solid var(--line);
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: inherit; line-height: 1.6;
}
@media (max-width: 640px) {
  .tape-improvement-row { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .tape-improvement-action .button { min-height: 44px; width: 100%; white-space: normal; }
  .tape-improvement-details > summary { min-height: 44px; line-height: 44px; }
  .tape-improvement-proof { gap: .3rem .75rem; }
}

/* Subscription setup stays an inline disclosure within verified improvements. */
.tape-subscription-settings { margin-top: 1rem; }
.tape-subscription-form { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
.tape-subscription-form label { display: grid; gap: .375rem; font-size: var(--text-sm); }
.tape-subscription-form input, .tape-subscription-form select { min-height: 44px; max-width: 100%; }
.tape-subscription-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.tape-subscription-settings code { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .tape-subscription-form { flex-direction: column; align-items: stretch; }
  .tape-subscription-actions .button { width: 100%; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .navigation-progress::before { width: 100%; animation: none; }
}
@media (min-width: 50.01rem) {
  .sidebar-nav.has-docs-navigation
    .sidebar-docs-parent
    .sidebar-link.active::before { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .pair-mac-dialog,
  .pair-mac-dialog::backdrop,
  .pair-mac-close,
  .pair-copy,
  .pair-mac-field { transition: none; }
}
@media (max-width: 34rem) {
  .pair-approve-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .pair-approve-radio { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .decision-icon.running,
  .dashboard-route-pending-dot { animation: none; }
}
@media (max-width: 58rem) {
  .job-resource-charts { grid-template-columns: minmax(0, 1fr); }
  .job-resource-chart:nth-child(even) { border-left: 0; }
  .job-resource-chart:nth-child(n + 2) { border-top: 1px solid var(--line); }
}
@media (max-width: 36rem) {
  .job-resource-chart-heading { flex-direction: column; gap: 0.45rem; }
  .job-resource-summary { align-self: stretch; text-align: left; }
  .job-resource-summary:has(> .job-resource-peak) { justify-content: flex-start; }
  .job-resource-percentiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.15rem 0.8rem; }
  .job-resource-percentiles > div { grid-template-columns: auto auto; justify-content: start; }
}
@media (max-width: 58rem) {
  .runs-heading,
  .run-toggle,
  .job-row { grid-template-columns: 0.72rem minmax(10rem, 1fr) 9rem 6.5rem 5rem 1rem 1rem; gap: 0.65rem; }
}
@media (max-width: 50rem) {
  .app-shell { --app-mobile-header-height: 3.5rem; --app-mobile-nav-height: calc(3.5rem + env(safe-area-inset-bottom)); display: block; }
  .app-sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    width: 100%;
    height: var(--app-mobile-header-height);
    min-height: 0;
    flex-direction: row;
    align-items: center;
    gap: 0.65rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0.6rem 0.8rem;
  }
  .sidebar-installation { width: min(10.5rem, 36vw); }
  .page-switcher-trigger {
    width: 2.35rem;
    height: 2.35rem;
    flex: none;
    justify-content: center;
    margin: 0;
    padding: 0;
  }
  .page-switcher-trigger span,
  .page-switcher-trigger kbd { display: none; }
  .sidebar-installation-control { grid-template-columns: 1.5rem minmax(0, 1fr) 0.65rem; gap: 0.42rem; padding: 0.38rem 0.45rem; }
  .sidebar-installation-avatar { width: 1.5rem; height: 1.5rem; border-radius: 5px; font-size: var(--text-xs); }
  .sidebar-installation-copy small { display: none; }
  .sidebar-installation-menu { width: min(16rem, calc(100vw - 1.6rem)); }
  .sidebar-installation-option .sidebar-installation-copy small { display: block; }
  .sidebar-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: flex;
    height: var(--app-mobile-nav-height);
    min-width: 0;
    flex-direction: row;
    gap: 0.15rem;
    margin: 0;
    overflow-x: auto;
    border-top: 1px solid var(--line);
    padding: 0.35rem max(0.45rem, env(safe-area-inset-right))
      max(0.35rem, env(safe-area-inset-bottom))
      max(0.45rem, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--rail, Canvas) 94%, transparent);
    backdrop-filter: blur(18px);
  }
  .sidebar-nav.has-docs-navigation { min-height: auto; overflow-x: auto; overflow-y: hidden; padding-bottom: 0; }
  .sidebar-docs-section { flex: 1 1 0; }
  .sidebar-docs-parent,
  .sidebar-docs-parent .sidebar-link { height: 100%; }
  .sidebar-docs-tree-desktop { display: none; }
  .sidebar-docs-tree-mobile:not([hidden]) {
    position: fixed;
    right: 0.7rem;
    bottom: calc(var(--app-mobile-nav-height) + 0.5rem);
    left: 0.7rem;
    z-index: 61;
    display: block;
    max-height: min(70dvh, 36rem);
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin: 0;
    padding: 0.5rem;
    background: var(--rail, Canvas);
    box-shadow: 0 16px 40px rgb(0 0 0 / 16%);
  }
  .sidebar-docs-chevron { display: none; }
  .sidebar-link { min-width: 2.75rem; min-height: 2.75rem; flex: 1 1 0; justify-content: center; padding: 0.48rem 0.58rem; }
  .sidebar-link::before {
    top: auto;
    right: 0.5rem;
    bottom: 0.1rem;
    left: 0.5rem;
    width: auto;
    height: 2px;
  }
  .sidebar-user { margin-top: 0; margin-left: auto; padding-top: 0; border-top: 0; }
  .sidebar-user-button { width: auto; padding: 0.35rem; }
  .sidebar-user-copy,
  .sidebar-user-chevron { display: none; }
  .sidebar-user-menu {
    top: calc(100% + 0.45rem);
    right: 0;
    bottom: auto;
    left: auto;
    width: 9rem;
    transform-origin: top right;
  }
  .dashboard-content { padding: 2rem 1rem calc(3rem + var(--app-mobile-nav-height)); }
  .machines-live-status { top: calc(var(--app-mobile-header-height) + 0.75rem); }
  .page-title { align-items: start; flex-direction: column; }
  .page-title .button { width: 100%; text-align: center; }
  .stats { grid-template-columns: 1fr 1fr; }
  .machine-state { flex-direction: row; align-items: baseline; gap: 0.55rem; text-align: left; }
  .runs-card { padding-top: 0; }
  .runs-heading { display: none; }
  .revision-group { padding-top: 0.75rem; }
  .revision-group + .revision-group { margin-top: 0.65rem; }
  .revision-header { flex-direction: column; gap: 0.1rem; padding: 0.45rem 0.15rem 0.5rem; }
  .revision-title,
  .revision-meta { max-width: 100%; }
  .run-card + .run-card::before { margin-right: 0; margin-left: 1.5rem; }
  .run-toggle { grid-template-columns: 0.72rem minmax(0, 1fr) 1rem; gap: 0.3rem 0.8rem; padding: 0.8rem 1.4rem; line-height: 1.45; }
  .run-toggle > .decision-icon { grid-column: 1; grid-row: 1 / 5; }
  .run-identity { grid-column: 2; grid-row: 1; }
  .run-metric { display: flex; grid-column: 2; gap: 0.45rem; }
  .run-provider { display: flex; grid-column: 2; gap: 0.45rem; grid-row: 2; }
  .run-provider::before { color: var(--muted); content: "Provider"; }
  .run-duration { grid-row: 3; }
  .run-finished { grid-row: 4; }
  .run-metric-label { display: inline; min-width: 4.5rem; color: var(--muted); }
  .run-github-button { right: -0.1rem; }
  .run-details { padding: 0.45rem 0.1rem 0.7rem 1.5rem; }
  .job-row { grid-template-columns: 0.72rem minmax(0, 1fr) 1rem; gap: 0.35rem 0.8rem; padding: 0.75rem 0.15rem; line-height: 1.45; }
  .job-row > .decision-icon { position: static; translate: none; grid-row: 1 / 7; align-self: start; margin-top: 0.45rem; }
  .job-identity { grid-column: 2; align-items: start; flex-direction: column; gap: 0.18rem; }
  .job-provider { grid-column: 2; flex-direction: row; align-items: center; }
  .job-metric { display: flex; grid-column: 2; gap: 0.45rem; }
  .job-metric-label { display: inline; min-width: 4.5rem; color: var(--muted); }
  .job-metric-value { color: CanvasText; }
  .job-github-button { top: 0.75rem; transform: none; }
  .job-details { padding: 0.35rem 0.15rem 0.65rem 1.1rem; }
  .step-row { grid-template-columns: 1.15rem minmax(0, 1fr) 4rem; }
  .provider-tooltip { left: 0; transform: translateY(-0.2rem); }
  .job-provider:hover .provider-tooltip,
  .job-row:focus-visible .provider-tooltip,
  .run-provider:hover .provider-tooltip,
  .run-toggle:focus-visible .run-provider .provider-tooltip { transform: translateY(0); }
  .shell { padding-top: 2rem; }
  .fleet-metrics { grid-template-columns: repeat(2, minmax(7rem, 1fr)); }
}
@media (max-width: 36rem) {
  .sidebar-link span { display: none; }
  .sidebar-link { padding: 0.55rem; }
  .pair-mac-dialog { --pair-inset: 1.1rem; width: calc(100% - 1rem); max-height: calc(100vh - 1rem); }
  .pair-mac-field:not(.block) { align-items: flex-start; }
  .pair-mac-field > code { padding-block: 0.2rem; overflow-wrap: anywhere; line-height: 1.6; white-space: normal; }
  .pair-mac-field pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  .billing-chart-card { padding-inline: 1rem; }
  .billing-chart-card .chart { --chart-height: 7.5rem; }
  .billing-chart-heading { align-items: start; flex-direction: column; gap: 0.25rem; }
}
@media (min-width: 36.01rem) and (max-width: 50rem) {
  .sidebar-link,
  .sidebar-docs-section { flex: 0 0 auto; }
}
@media (max-width: 58rem) {
  .experiment-comparison-row { grid-template-columns: 1fr 1fr; }
  .experiment-comparison-row > :nth-child(3)::before { content: "Queue · "; color: var(--muted); }
  .experiment-comparison-row > :nth-child(4)::before { content: "Startup · "; color: var(--muted); }
  .experiment-comparison-row > :nth-child(5)::before { content: "Execution · "; color: var(--muted); }
  .experiment-comparison-row.header { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .button,
  .page-switcher-trigger,
  .shared-hover-highlight,
  .docs-sidebar,
  .docs-header-nav :is(a, .docs-sign-in),
  .docs-navigation a,
  .docs-on-this-page a,
  .docs-toc-range,
  .docs-toc-dot,
  .docs-pagination a { transition: none; }
}
@media (max-width: 36rem) {
  .device-facts > div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .device-code-form .field { width: 100%; }
}
@media (min-width: 50.01rem) {
  .sidebar-installation-menu { width: max(100%, 17rem); }
}
@media (max-width: 50rem) {
  /* The top bar is not boxed in by the 13.5rem rail, so the menu can take
     the same 17rem there, still clamped to the viewport. */
  .sidebar-installation-menu { width: min(17rem, calc(100vw - 1.6rem)); }
}
@media (prefers-reduced-motion: reduce) {
  .row-chevron { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .decision-icon.running::before { animation: none; }
  .decision-icon.running::after { display: none; }
}
@media (min-width: 66rem) {
  .tape-runs-scroll { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .job-resource-skeleton { animation: none; }
}
@container (min-width: 48rem) {
  .tape-runs-card .job-resource-charts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tape-runs-card .job-resource-chart:nth-child(n) { border-top: 0; border-left: 1px solid var(--line); padding: 0.75rem 0.75rem 0.55rem; }
  .tape-runs-card .job-resource-chart:first-child { border-left: 0; }
  .tape-runs-card .job-resource-summary { align-items: baseline; text-align: left; }
  .tape-runs-card .job-resource-summary:has(> .job-resource-peak) { justify-content: flex-start; }
  .tape-runs-card .job-resource-percentiles { display: flex; flex-wrap: wrap; gap: 0.1rem 0.65rem; }
  .tape-runs-card .job-resource-percentiles > div { display: flex; align-items: baseline; gap: 0.25rem; }
  .tape-runs-card .job-resource-percentiles dd { text-align: left; }
  /* The list runs P99, P95, P90, P50: keep the ends, median first. */
  .tape-runs-card .job-resource-percentiles > div:nth-child(2),
  .tape-runs-card .job-resource-percentiles > div:nth-child(3) { display: none; }
  .tape-runs-card .job-resource-percentiles > div:nth-child(4) { order: -1; }
  /* Plots sit at the foot of their cells. The four cells share a row
     height, so the plots align even when one head runs to two lines (long
     totals wrapping). */
  .tape-runs-card .job-resource-chart { border-top: 0; border-left: 1px solid var(--line); padding: 0.75rem 0.75rem 0.55rem; display: flex; flex-direction: column; }
  .tape-runs-card .job-resource-chart-heading { min-height: 2.35rem; flex-direction: column; justify-content: start; gap: 0.25rem; margin-bottom: 0.45rem; }
  .tape-runs-card .job-resource-chart .chart { --chart-height: 4.2rem; margin-top: auto; }
}
@media (max-width: 66rem) {
  .tape-runs-scroll { container-type: inline-size; }
  .tape-runs-card .job-resource-metrics { --chart-inset: 1px; position: sticky; left: calc(var(--bleed-left) + var(--chart-inset)); width: calc(
      100cqi - var(--bleed-left) - var(--bleed-right) - var(--chart-inset) - 1px
    ); }
  .tape-runs-card
    .run-details
    .job-card:not(.collapsed-into-run)
    .job-resource-metrics { --chart-inset: calc(1px + var(--tree-step)); }
  /* A failure band wraps within the visible column rather than running
     past it, so its explanation reads without scrolling sideways. */
  .tape-runs-card .job-details > .job-cancellation-reason { max-width: calc(
      100cqi - var(--bleed-left) - var(--bleed-right) + 0.6rem - 1px
    ); }
}
@media (prefers-reduced-motion: reduce) {
  .tape-list-skeleton > i { animation: none; }
}
@media (max-width: 44rem) {
  .tape-api-token-secret-value { align-items: stretch; flex-direction: column; }
  .tape-ledger-api-tokens,
  .tape-ledger-passkeys,
  .tape-ledger-sharing { min-width: 0; }
  :is(.tape-ledger-api-tokens, .tape-ledger-passkeys, .tape-ledger-sharing) .tape-ledger-head { display: none; }
  :is(.tape-ledger-api-tokens, .tape-ledger-passkeys, .tape-ledger-sharing) .tape-ledger-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem 0.7rem;
    padding-block: 0.75rem;
  }
  :is(.tape-ledger-api-tokens, .tape-ledger-passkeys, .tape-ledger-sharing) .tape-cell:first-child { grid-column: 1; grid-row: 1; white-space: normal; }
  :is(.tape-ledger-api-tokens, .tape-ledger-passkeys, .tape-ledger-sharing) .tape-cell:last-child { grid-column: 2; grid-row: 1; text-align: right; }
  :is(.tape-ledger-api-tokens, .tape-ledger-passkeys, .tape-ledger-sharing) .tape-cell:not(:first-child):not(:last-child) { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 0.5rem; white-space: normal; }
  .tape-mobile-label { display: inline; color: var(--muted); }
  .tape-ledger-sharing .tape-cell:nth-child(2) { flex-direction: column; text-align: left; }
  .tape-ledger-sharing .tape-inline-edit { justify-content: space-between; }
  :is(.tape-ledger-api-tokens, .tape-ledger-passkeys, .tape-ledger-sharing) .link-button { min-height: 2.75rem; }
  .tape-ledger-repo-settings { min-width: 0; }
  .tape-ledger-repo-settings .tape-ledger-row { grid-template-columns: minmax(0, 1fr); gap: 0.65rem; padding-block: 0.8rem; }
  .tape-ledger-repo-settings .tape-cell { text-align: left; white-space: normal; }
  .tape-ledger-repo-settings .tape-inline-edit { justify-content: space-between; }
}
@media (min-width: 60rem) {
  .tape-overview { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 34rem) {
  .tape-overview-cell { padding: 0.8rem; }
  .tape-overview:not(.tape-overview-dense) .tape-overview-cell > strong { font-size: 1.625rem; white-space: normal; }
}
@media (max-width: 40rem) {
  .tape-range-body { grid-template-columns: minmax(0, 1fr); }
  .tape-range-cal { border-right: 0; border-bottom: 1px solid var(--line); }
  .tape-range-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 44rem) {
  .tape-policy-controls,
  .tape-policy-preview { grid-template-columns: 1fr; }
  .tape-policy-plan { overflow-x: auto; }
  .tape-policy-plan-head,
  .tape-policy-plan-row { min-width: 36rem; }
  .tape-policy-actions > .muted { flex-basis: 100%; text-align: left; }
}
@media (max-width: 34rem) {
  .tape-detail-actions { grid-column: 1; grid-row: auto; margin-top: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tape-setup-skeleton > i { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tape-setup-preview-placeholder i { animation: none; }
}
@media (max-width: 34rem) {
  .tape-setup-proposal { --setup-preview-height: clamp(9rem, 22svh, 12rem); }
  .tape-setup-open-actions { width: 100%; }
  .tape-setup-open-actions .button { margin-left: auto; }
}
@media (min-width: 52rem) {
  .tape-overview-dense { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .tape-detail-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
  .tape-detail-split .tape-settings-section + .tape-settings-section { margin-top: 1.5rem; }
}
@media (max-width: 50rem) {
  .tape-switch { width: auto; flex: 0 0 auto; margin-top: 0; order: 1; }
  .tape-switch button { padding: 0.3rem 0.4rem; letter-spacing: 0.08em; }
  .tape-admin-link {
    width: auto;
    flex: 0 0 auto;
    margin-top: 0;
    border-top: 0;
    padding: 0.48rem 0.58rem;
    order: 1;
    white-space: nowrap;
  }
  .sidebar-user { order: 2; }
}
@media (max-width: 34rem) {
  /* Below this the icons and the account control are all that fit. */
  .tape-switch,
  .tape-admin-link { display: none; }
}

.machine-vm-budget { margin-block-end: 1.25rem; }
.machine-vm-budget h3 { font-size: .875rem; font-weight: 500; }
.machine-vm-budget table { width: 100%; border-collapse: collapse; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.machine-vm-budget th, .machine-vm-budget td { padding: .5rem; text-align: start; border-bottom: 1px solid var(--hairline); }
.machine-vm-budget th { font-weight: 500; }

/* Public status uses the same paper, type and hairlines as the dashboard. */
.status-page { max-width: 50rem; margin: 0 auto; padding: 0 2rem; }
.status-page-header { display: flex; align-items: center; gap: 1.25rem; min-height: 6rem; border-bottom: 1px solid var(--line); }
.status-page-brand { display: inline-flex; gap: .55rem; align-items: center; color: CanvasText; font-size: 1rem; font-weight: 600; text-decoration: none; }
.status-page-site-name { border-left: 1px solid var(--line-strong); padding-left: 1.25rem; color: var(--muted); font-size: var(--text-sm); }
.status-page-home { margin-left: auto; font-size: var(--text-sm); }
.status-page a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.status-page-summary { padding: 4.5rem 0 3.75rem; }
.status-page-headline { display: flex; align-items: baseline; gap: .85rem; }
.status-page h1 { margin: 0; font-size: var(--text-title); line-height: 1.2; font-weight: 600; letter-spacing: -.03em; }
.status-page-mark { width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; }
.status-page-mark[data-state="operational"] { color: var(--green); }
.status-page-mark[data-state="degraded"], .status-page-mark[data-state="degraded"]::before { color: var(--amber); }
.status-page-mark[data-state="unavailable"] { color: var(--red); }
.status-page-mark[data-state="unknown"] { color: var(--muted); }
.status-page-headline .status-page-mark { width: 1.75rem; height: 1.75rem; flex-basis: 1.75rem; align-self: center; }
.status-page-description { margin: .9rem 0 0 2.6rem; color: var(--muted); }
.status-page-checked { display: flex; flex-wrap: wrap; gap: .35rem 1.2rem; margin: 1.5rem 0 0 2.6rem; color: var(--muted); font-size: var(--text-xs); }
.status-page-cadence { margin-left: auto; }
.status-page-notice { margin: 1rem 0 0 2.6rem; color: var(--muted); }
.status-page-section { margin-bottom: 3rem; }
.status-page-section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; margin-bottom: .75rem; }
.status-page h2 { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -.02em; }
.status-page-section-heading > span { color: var(--muted); font-size: var(--text-xs); }
.status-page-section-heading > a { font-size: var(--text-xs); }
.status-page-note.status-page-upstream-note { margin: 0 0 1rem; }
.status-page-upstream-notice { margin: 0 0 1rem; color: var(--muted); font-size: var(--text-sm); }
.status-page-github-incidents { margin-top: 1rem; }
.status-page-github-incidents ul { padding: 0; margin: .6rem 0 0; list-style: none; }
.status-page-github-incidents li { padding: .65rem 0; border-top: 1px solid var(--line); font-size: var(--text-sm); }
.status-page-github-incidents p { margin: .25rem 0 0; font-size: var(--text-xs); color: var(--muted); }
.status-page-services, .status-page-interruptions { padding: 0; margin: 0; list-style: none; }
.status-page-service { display: flex; align-items: center; gap: .85rem; border-top: 1px solid var(--line); padding: 1.1rem 0; }
.status-page h3 { margin: 0; font-size: var(--text-md); font-weight: 500; }
.status-page-service-name p { margin: .25rem 0 0; color: var(--muted); font-size: var(--text-sm); }
.status-page-service-state { display: grid; gap: .25rem; margin-left: auto; text-align: right; white-space: nowrap; font-size: var(--text-sm); }
.status-page-service-state small { color: var(--muted); font-size: var(--text-xs); }
.status-page-availability { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.status-page-availability dt { font-size: var(--text-sm); color: var(--muted); }
.status-page-availability dd { margin: 0; }
.status-page-percentage { padding: .65rem 0 .4rem; font-size: var(--text-figure); font-weight: 600; line-height: 1.05; letter-spacing: -.035em; }
.status-page-sample-count, .status-page-since { color: var(--muted); font-size: var(--text-xs); }
.status-page-since { padding-top: .25rem; }
.status-page-note { margin: 1.25rem 0 0; color: var(--muted); font-size: var(--text-xs); max-width: 42rem; }
.status-page-empty { padding: 1.1rem 0; border-top: 1px solid var(--line); margin: 0; color: var(--muted); font-size: var(--text-sm); }
.status-page-interruptions li { display: flex; align-items: baseline; gap: .85rem; border-top: 1px solid var(--line); padding: 1.1rem 0; }
.status-page-interruptions p { margin: .35rem 0 0; color: var(--muted); font-size: var(--text-xs); }
.status-page-footer { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; padding: 1.5rem 0 2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-xs); }
@media (max-width: 34rem) {
  .status-page { padding: 0 1.25rem; }
  .status-page-header { min-height: 4.75rem; gap: .75rem; flex-wrap: wrap; padding: 1rem 0; }
  .status-page-site-name { padding-left: .75rem; }
  .status-page-home { font-size: var(--text-xs); }
  .status-page-summary { padding: 3rem 0; }
  .status-page h1 { font-size: 1.5rem; }
  .status-page-checked, .status-page-description, .status-page-notice { margin-left: 0; }
  .status-page-cadence { margin-left: 0; }
  .status-page-service { gap: .6rem; align-items: baseline; flex-wrap: wrap; }
  .status-page-service-name { flex: 1 1 calc(100% - 2rem); }
  .status-page-service-state { display: flex; width: 100%; justify-content: space-between; margin-left: 1.85rem; text-align: left; }
  .status-page-availability { grid-template-columns: 1fr; gap: 1.25rem; }
  .status-page-availability > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .2rem 1rem; }
  .status-page-percentage { grid-column: 2; grid-row: 1 / span 2; padding: 0; font-size: 1.5rem; }
  .status-page-since { grid-column: 1 / -1; }
}