/* ==========================================================================
   adoe design system — base + components
   Depends on tokens.css (+ fonts.css). Framework-agnostic: plain class names
   and ARIA attributes, so the static site and the React app render the same
   markup. Markup contracts: design-system/README.md.
   ========================================================================== */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-semibold); color: var(--ink); }
p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--s-4); padding-left: var(--s-5); }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-6) 0; }
::selection { background: var(--cobalt-tint); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
[hidden] { display: none !important; }

/* ---------- layout ---------- */
.container { max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; } .col-12 { grid-column: span 12; }
@media (max-width: 959px) { .grid-12 > [class*="col-"] { grid-column: 1 / -1; } }
.section { padding-block: var(--section-pad); border-top: 1px solid var(--rule); }
.section:first-of-type { border-top: 0; }
.stack > * + * { margin-top: var(--s-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.measure { max-width: var(--measure); }

/* ---------- type ---------- */
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-display); }
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-semibold); }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semibold); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }
.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.t-small { font-size: var(--fs-small); line-height: var(--lh-small); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); }
.t-secondary { color: var(--slate); }
.t-tertiary { color: var(--slate-2); }
.t-medium { font-weight: var(--fw-medium); }
.tnum { font-variant-numeric: tabular-nums; }
/* Machine values only: alert names, hosts, incident IDs, timestamps, commands. */
.mono { font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-mono); font-variant-numeric: tabular-nums; }
code.mv, .mv {
  font-family: var(--font-mono); font-size: 0.875em; font-variant-numeric: tabular-nums;
  padding: 0 4px; border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--mist); color: var(--ink); overflow-wrap: anywhere;
}
.table .mv, .tabs .mv { white-space: nowrap; }
.code {
  margin: 0 0 var(--s-4); padding: var(--s-4); overflow: auto;
  background: var(--mist); border: 1px solid var(--rule); border-radius: var(--r-lg);
  font-family: var(--font-mono); font-size: var(--fs-mono-table); line-height: var(--lh-mono-table); color: var(--ink);
}
.code:focus-visible { outline-offset: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 300; padding: var(--s-2) var(--s-4); background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: var(--r-md); }
.skip-link:focus { top: var(--s-2); }

/* ---------- icon ---------- */
.icon { display: inline-block; flex: none; width: var(--icon); height: var(--icon); vertical-align: middle; color: currentColor; }
.icon-sm { width: 16px; height: 16px; }
.icon-xs { width: 14px; height: 14px; }

/* ---------- link ---------- */
.link { color: var(--cobalt); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-out); }
.link:hover { color: var(--cobalt-hover); text-decoration-thickness: 2px; }
.link-quiet { color: inherit; text-decoration: none; }
.link-quiet:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- button ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: var(--control-h); padding: 0 var(--s-4);
  border: 1px solid transparent; border-radius: var(--r-md);
  font: inherit; font-size: var(--fs-small); line-height: 1; font-weight: var(--fw-medium);
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn .icon { width: 16px; height: 16px; }
.btn-primary { background: var(--cobalt); color: var(--on-cobalt); }
.btn-primary:hover { background: var(--cobalt-hover); }
.btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--rule-strong); }
.btn-secondary:hover { background: var(--mist); }
.btn-tertiary { background: transparent; color: var(--cobalt); }
.btn-tertiary:hover { background: var(--cobalt-tint); }
.btn-danger { background: var(--paper); color: var(--crit); border-color: var(--rule-strong); }
.btn-danger:hover { background: var(--crit-tint); }
.btn-sm { height: var(--control-h-sm); padding: 0 var(--s-3); }
.btn-lg { height: 48px; padding: 0 var(--s-5); font-size: var(--fs-body); }
.btn-icon { width: var(--control-h); padding: 0; background: transparent; color: var(--slate); }
.btn-icon.btn-sm { width: var(--control-h-sm); }
.btn-icon:hover { background: var(--mist); color: var(--ink); }
.btn-icon .icon { width: var(--icon); height: var(--icon); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.btn-group .btn[aria-pressed="true"] { background: var(--mist); color: var(--ink); position: relative; }

/* ---------- badge (status / severity: icon + text + colour, never colour alone) ---------- */
/* tone defaults at zero specificity so [data-tone] always wins */
:where(.badge, .toast) { --tone: var(--info); --tone-tint: var(--info-tint); }
:where(.tl-step) { --tone: var(--slate); --tone-tint: var(--paper); }
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--tone) 32%, transparent); border-radius: var(--r-sm);
  background: var(--tone-tint); color: var(--tone);
  font-size: var(--fs-caption); line-height: 1; font-weight: var(--fw-medium); white-space: nowrap;
}
.badge .icon { width: 14px; height: 14px; }
[data-tone="ok"] { --tone: var(--ok); --tone-tint: var(--ok-tint); }
[data-tone="warn"] { --tone: var(--warn); --tone-tint: var(--warn-tint); }
[data-tone="crit"] { --tone: var(--crit); --tone-tint: var(--crit-tint); }
[data-tone="approve"] { --tone: var(--approve); --tone-tint: var(--approve-tint); }
[data-tone="info"] { --tone: var(--info); --tone-tint: var(--info-tint); }
.badge-neutral { --tone: var(--slate); --tone-tint: var(--paper); border-color: var(--rule); }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--approve); color: var(--on-cobalt); font-size: 12px; line-height: 1; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.count-neutral { background: var(--mist); color: var(--slate); border: 1px solid var(--rule); }

/* ---------- form controls ---------- */
.field { display: grid; gap: 6px; }
.label { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-medium); color: var(--ink); }
.help { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--slate); }
.field-error { display: flex; gap: 6px; align-items: center; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--crit); }
.input, .select, .textarea {
  width: 100%; height: var(--control-h); padding: 0 var(--s-3);
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
  font: inherit; font-size: var(--fs-small); line-height: var(--lh-small);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.textarea { height: auto; min-height: 96px; padding: var(--s-2) var(--s-3); resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--slate-2); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--slate); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--focus); outline-offset: 1px; border-radius: var(--r-sm); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--crit); }
.input:disabled, .select:disabled { background: var(--mist); color: var(--slate-2); cursor: not-allowed; }
.select { appearance: none; padding-right: 36px; cursor: pointer; }
.select-wrap, .input-wrap { position: relative; display: block; }
.select-wrap > .icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--slate); width: 16px; height: 16px; }
.input-wrap > .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--slate); width: 16px; height: 16px; }
.input-wrap > .input { padding-left: 34px; }
.input-sm, .select-sm { height: var(--control-h-sm); }

/* ---------- panel ---------- */
.panel { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule); }
.panel-title { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-semibold); }
.panel-body { padding: var(--s-5); }
.panel-footer { display: flex; gap: var(--s-2); justify-content: flex-end; padding: var(--s-3) var(--s-5); border-top: 1px solid var(--rule); }
.panel[data-tone="approve"] { background: var(--cobalt-tint); border-color: color-mix(in srgb, var(--cobalt) 32%, transparent); }
.panel[data-tone="approve"] .panel-header, .panel[data-tone="approve"] .panel-footer { border-color: color-mix(in srgb, var(--cobalt) 20%, transparent); }
.dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-5); margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); }
.dl dt { color: var(--slate); }
.dl dd { margin: 0; min-width: 0; color: var(--ink); }
@media (max-width: 559px) { .dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .dl dd + dt { margin-top: var(--s-2); } }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--rule); overflow-x: auto; }
.tab {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-bottom: -1px; padding: 10px var(--s-3);
  background: none; border: 0; border-bottom: 2px solid transparent;
  font: inherit; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-medium);
  color: var(--slate); white-space: nowrap; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tab:focus-visible { outline-offset: -2px; }
.tab-panel { padding-top: var(--s-4); }

/* ---------- menu ---------- */
.menu-wrap { position: relative; display: inline-block; }
.menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 60; min-width: 220px; padding: 4px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-float);
}
.menu-start { left: 0; right: auto; }
.menu-item {
  display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: 8px 10px;
  background: none; border: 0; border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink); text-align: left; text-decoration: none; cursor: pointer;
}
.menu-item .icon { width: 16px; height: 16px; color: var(--slate); }
.menu-item:hover { background: var(--mist); }
.menu-item:focus-visible { background: var(--mist); outline-offset: -2px; }
.menu-item[data-tone="crit"], .menu-item[data-tone="crit"] .icon { color: var(--crit); }
.menu-item[aria-disabled="true"] { color: var(--slate-2); cursor: not-allowed; }
.menu-sep { height: 1px; margin: 4px 0; background: var(--rule); }
.menu-label { padding: 6px 10px 4px; font-size: var(--fs-caption); color: var(--slate); }

/* ---------- modal ---------- */
.modal {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-float);
}
.modal::backdrop { background: var(--backdrop); }
.modal[open] { animation: ds-pop var(--dur) var(--ease-out); }
@keyframes ds-pop { from { opacity: 0; transform: translateY(4px) scale(0.99); } to { opacity: 1; transform: none; } }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: var(--s-5) var(--s-5) 0; }
.modal-title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }
.modal-body { padding: var(--s-4) var(--s-5); color: var(--slate); font-size: var(--fs-small); line-height: var(--lh-small); }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--s-5) var(--s-5); }

/* ---------- toast ---------- */
.toast-region { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 100; display: grid; gap: var(--s-2); width: min(400px, calc(100vw - 32px)); }
.toast {
  display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid var(--tone);
  border-radius: var(--r-lg); box-shadow: var(--shadow-float);
  font-size: var(--fs-small); line-height: var(--lh-small);
  animation: ds-pop var(--dur) var(--ease-out);
}
.toast > .icon { color: var(--tone); margin-top: 0; }
.toast-body { flex: 1; min-width: 0; padding-top: 1px; }
.toast-title { margin: 0; font-weight: var(--fw-medium); color: var(--ink); }
.toast-detail { margin: 2px 0 0; color: var(--slate); }

/* ---------- tooltip ---------- */
.tooltip {
  position: fixed; z-index: 200; max-width: 280px; padding: 6px 8px; pointer-events: none;
  background: var(--ink); color: var(--paper); border-radius: var(--r-sm); box-shadow: var(--shadow-float);
  font-size: var(--fs-caption); line-height: var(--lh-caption);
}

/* ---------- table (Carbon-style data table) ---------- */
.table-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
.table-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-3); border-bottom: 1px solid var(--rule); }
.table-toolbar .input-wrap { flex: 1 1 220px; max-width: 320px; }
.table-toolbar .spacer { flex: 1; }
.table-scroll { overflow: auto; max-height: var(--table-max-h, none); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-small); line-height: var(--lh-small); }
.table th {
  position: sticky; top: 0; z-index: 1; height: 40px; padding: 0 var(--s-3);
  background: var(--mist); border-bottom: 1px solid var(--rule);
  text-align: left; font-weight: var(--fw-medium); color: var(--slate); white-space: nowrap;
}
.table td { height: var(--row-comfortable); padding: 6px var(--s-3); border-bottom: 1px solid var(--rule); vertical-align: middle; color: var(--ink); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
.table tbody tr:hover { background: var(--mist); }
.table tbody tr[data-href] { cursor: pointer; }
.table tbody tr[data-selected="true"] { background: var(--cobalt-tint); }
[data-density="compact"] .table td { height: var(--row-compact); padding-block: 0; white-space: nowrap; }
[data-density="compact"] .table .cell-title { min-width: 0; }
[data-density="compact"] .badge { height: 22px; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table td.mono, .table time, .table .num { white-space: nowrap; }
.table .mono, .table .mv { font-size: var(--fs-mono-table); line-height: var(--lh-mono-table); }
.table .cell-title { display: flex; flex-direction: column; gap: 2px; min-width: 220px; }
.table .cell-title a { color: var(--ink); text-decoration: none; font-weight: var(--fw-medium); }
.table .cell-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.th-sort { all: unset; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; border-radius: 2px; }
.th-sort:hover { color: var(--ink); }
.th-sort:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.th-sort .icon { width: 14px; height: 14px; }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--ink); }
.table-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--slate); }

/* ---------- timeline: the signature component ("the incident record") ----------
   Same markup on the website hero, /how-it-works and the app incident detail.
   Rail = time on the left, facts on the right. */
.tl { --tl-time: 72px; --tl-mark: 24px; --tl-gap: var(--s-3); position: relative; margin: 0; padding: 0; list-style: none; }
.tl::before {
  content: ""; position: absolute; top: 14px; bottom: 14px; width: 1px; background: var(--rule);
  left: calc(var(--tl-time) + var(--tl-gap) + var(--tl-mark) / 2 - 0.5px);
}
.tl-step { position: relative; display: grid; grid-template-columns: var(--tl-time) var(--tl-mark) minmax(0, 1fr); column-gap: var(--tl-gap); padding: 8px 0; }
.tl-time { padding-top: 2px; font-family: var(--font-mono); font-size: var(--fs-mono-table); line-height: var(--lh-mono-table); color: var(--slate); font-variant-numeric: tabular-nums; text-align: right; }
.tl-marker {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: var(--tl-mark); height: var(--tl-mark); border-radius: 50%;
  background: var(--paper); border: 1px solid var(--rule); color: var(--tone);
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.tl-marker .icon { width: 14px; height: 14px; }
.tl-step[data-tone] .tl-marker { border-color: color-mix(in srgb, var(--tone) 40%, transparent); background: var(--tone-tint); }
.tl-step[data-tone="info"] .tl-marker { background: var(--paper); border-color: var(--rule-strong); }
.tl-body { min-width: 0; padding-top: 1px; }
.tl-title { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-medium); color: var(--ink); }
.tl-detail { margin: 2px 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate); overflow-wrap: anywhere; }
.tl-more { margin-top: var(--s-2); }
.tl-more > summary {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none;
  font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-medium); color: var(--slate); border-radius: 2px;
}
.tl-more > summary::-webkit-details-marker { display: none; }
.tl-more > summary .icon { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
.tl-more[open] > summary .icon { transform: rotate(90deg); }
.tl-more > summary:hover { color: var(--ink); }
.tl-more .code { margin: var(--s-2) 0 0; }
/* playback states (set by components.js only when motion is allowed) */
/* pending text stays at 4.5:1 or better (WCAG), it just reads as "not yet" */
.tl-step[data-state="pending"] .tl-title, .tl-step[data-state="pending"] .tl-detail, .tl-step[data-state="pending"] .tl-time { color: var(--slate-2); }
.tl-step[data-state="pending"] .tl-title { font-weight: var(--fw-regular); }
.tl-step[data-state="pending"] .mv { color: var(--slate-2); }
.tl-step[data-state="pending"] .tl-marker { color: var(--slate-2); background: var(--paper); border: 1px dashed var(--rule-strong); }
.tl-step[data-state="active"] .tl-marker { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 22%, transparent); }
.tl-step .tl-title, .tl-step .tl-detail, .tl-step .tl-time { transition: color var(--dur) var(--ease-out); }
/* wide variant for marketing sections: label column instead of a timestamp */
.tl--wide { --tl-time: 132px; --tl-mark: 32px; }
.tl--wide .tl-step { padding: var(--s-4) 0; }
.tl--wide .tl-marker .icon { width: 18px; height: 18px; }
.tl--wide .tl-time { font-family: var(--font-sans); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-medium); color: var(--slate); padding-top: 6px; }
.tl--wide .tl-title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }
.tl--wide .tl-detail { font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--measure); margin-top: var(--s-1); }
@media (max-width: 559px) {
  .tl { --tl-time: 64px; --tl-gap: 10px; }
  .tl-card .tl { padding-left: var(--s-3); padding-right: var(--s-3); }
  .tl--wide { --tl-time: 0px; --tl-gap: var(--s-3); }
  .tl--wide .tl-step { grid-template-columns: var(--tl-mark) minmax(0, 1fr); }
  .tl--wide .tl-time { grid-column: 2; grid-row: 1; text-align: left; padding: 0 0 2px; }
  .tl--wide .tl-marker { grid-column: 1; grid-row: 1 / span 2; }
  .tl--wide .tl-body { grid-column: 2; }
  .tl--wide::before { left: calc(var(--tl-mark) / 2 - 0.5px); }
}
/* hero card wrapper — the only place the 12px radius is used */
.tl-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-xl); overflow: hidden; }
.tl-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--rule); background: var(--mist); }
.tl-card-id { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate); }
.tl-card-id .mono { color: var(--ink); font-weight: var(--fw-medium); }
.tl-card .tl { padding: var(--s-3) var(--s-4) var(--s-3) var(--s-2); }
.tl-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-4); border-top: 1px solid var(--rule); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--slate); }
.tl-card[data-playing] [data-tl-when="done"], .tl-card:not([data-playing]) [data-tl-when="playing"] { display: none; }

/* ---------- site header (marketing) ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--rule); }
.site-header-inner { display: flex; align-items: center; gap: var(--s-6); height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 18px; line-height: 1; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.brand-mark { width: 24px; height: 24px; color: var(--ink); }
.site-nav { display: flex; align-items: center; gap: var(--s-5); }
.site-nav a { color: var(--slate); text-decoration: none; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-medium); transition: color var(--dur-fast) var(--ease-out); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 22px; }
.site-actions { display: flex; align-items: center; gap: var(--s-4); margin-left: auto; }
.site-actions .signin { color: var(--slate); text-decoration: none; font-size: var(--fs-small); font-weight: var(--fw-medium); }
.site-actions .signin:hover { color: var(--ink); }
.menu-toggle { display: none; }
.mobile-nav { border-top: 1px solid var(--rule); background: var(--paper); padding: var(--s-2) var(--gutter) var(--s-5); }
.mobile-nav a:not(.btn) { display: block; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: var(--fs-body); }
.mobile-nav .btn { margin-top: var(--s-4); width: 100%; }
@media (max-width: 959px) {
  .site-nav, .site-actions .signin, .site-actions .btn:not(.menu-toggle) { display: none; }
  .menu-toggle { display: inline-flex; }
}
@media (min-width: 960px) { .mobile-nav { display: none !important; } }

/* ---------- site footer ---------- */
.site-footer { border-top: 1px solid var(--rule); padding: var(--s-8) 0 var(--s-6); background: var(--paper); }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: var(--s-6); }
.footer-col h2 { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-semibold); margin: 0 0 var(--s-3); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.footer-col a { color: var(--slate); text-decoration: none; font-size: var(--fs-small); }
.footer-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule); font-size: var(--fs-caption); color: var(--slate); }
@media (max-width: 959px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* ---------- app shell: sidebar + page header ---------- */
.app-shell { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 100vh; background: var(--paper); }
.sidebar {
  display: flex; flex-direction: column; gap: 2px; width: 240px; padding: var(--s-3) var(--s-2);
  border-right: 1px solid var(--rule); background: var(--paper);
  transition: width var(--dur) var(--ease-out);
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; margin-bottom: var(--s-3); color: var(--ink); text-decoration: none; font-weight: var(--fw-semibold); }
.nav-item {
  position: relative; display: flex; align-items: center; gap: var(--s-3); height: 36px; padding: 0 10px;
  border-radius: var(--r-md); color: var(--slate); text-decoration: none;
  font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-medium); white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-item:hover { background: var(--mist); color: var(--ink); }
.nav-item[aria-current="page"] { background: var(--mist); color: var(--ink); }
.nav-item[aria-current="page"]::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--ink); }
.nav-item .count { margin-left: auto; }
.nav-section { margin: var(--s-4) 10px var(--s-1); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--slate); }
.sidebar-foot { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.sidebar[data-collapsed="true"] { width: 64px; }
.sidebar[data-collapsed="true"] .nav-label, .sidebar[data-collapsed="true"] .sidebar-brand-text, .sidebar[data-collapsed="true"] .nav-section {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.sidebar[data-collapsed="true"] .nav-item { justify-content: center; padding: 0; }
.sidebar[data-collapsed="true"] .nav-item .count { position: absolute; top: 2px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
.sidebar[data-collapsed="true"] .sidebar-brand { justify-content: center; padding: 0; }
.sidebar[data-collapsed="true"] [data-ds-sidebar-toggle] .icon { transform: scaleX(-1); }
.app-main { min-width: 0; }
.app-topbar { display: flex; align-items: center; gap: var(--s-3); height: 56px; padding: 0 var(--s-5); border-bottom: 1px solid var(--rule); }
.app-topbar .input-wrap { flex: 0 1 360px; }
.kbd { display: inline-flex; align-items: center; height: 20px; padding: 0 5px; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: var(--r-sm); background: var(--paper); font-family: var(--font-mono); font-size: 11px; color: var(--slate); }
.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-5); border-bottom: 1px solid var(--rule); }
.page-title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }
.page-body { padding: var(--s-5); }

/* ---------- view states: loading (skeleton), empty, error ---------- */
.skeleton { display: block; height: 12px; border-radius: var(--r-sm); background: var(--mist); }
.skeleton + .skeleton { margin-top: var(--s-2); }
.skeleton-row { display: grid; grid-template-columns: 80px 1fr 120px 80px; gap: var(--s-4); align-items: center; height: var(--row-comfortable); padding: 0 var(--s-3); border-bottom: 1px solid var(--rule); }
.state { display: grid; justify-items: start; gap: var(--s-2); padding: var(--s-6) var(--s-5); }
.state > .icon { width: 24px; height: 24px; color: var(--slate); }
.state-title { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-semibold); }
.state-text { margin: 0; max-width: 56ch; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate); }
.state[data-tone="crit"] > .icon { color: var(--crit); }
.state .cluster { margin-top: var(--s-2); }

/* ---------- logo row (monochrome integration marks) ---------- */
.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5) var(--s-7); list-style: none; margin: 0; padding: 0; }
.logo-row li { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--slate); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.logo-row svg { height: 24px; width: auto; color: var(--slate); fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
}