/*
 * Pathista web app — one theme file.
 *
 * 1. The milepost dashboard's design tokens (C:\repo\WorkflowReminderNode\wwwroot\index.html + chrome.css):
 *    one neutral scale, one accent, status colours only on dots and glyphs. Both themes are authored.
 * 2. The same tokens mapped onto Blazor Blueprint's shadcn variables, so its components (buttons, inputs,
 *    selects, tabs, dialogs, toasts, tables) wear the dashboard's look.
 * 3. The app's own chrome: top bar, page heads, the run strip (state pill + facts), panels with section heads
 *    and counts, step lists with status marks, the graph pane, and the static account pages' forms.
 *
 * Dark mode: `.dark` on <html> (Blueprint's switch) and `data-theme="dark"` (the graph renderer's), both set by
 * js/theme.js before first paint. Unlayered on purpose: Blueprint's CSS lives in cascade layers, so these win.
 */

/* Instrument Sans (SIL OFL, wwwroot/fonts/OFL-InstrumentSans.txt): one self-hosted variable file, width 75-100 for headings and readouts. */
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/InstrumentSans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

/* ── 1. Logbook tokens (docs/design/logbook/PLAN.md) ─────────────────────────────────────────────────── */
:root {
  --bg: #f2f3ef;
  --surface: #fbfbf8;
  --surface-2: #f6f7f3;
  --surface-3: #e6e8e2;
  --line: #e0e3dc;
  --line-strong: #b3bab2;
  --text: #1e2622;
  --text-2: #59635e;
  --text-3: #59635e;
  --placeholder: #8a948e;
  /* The accent: Clever Spark's orange (cleverspark.co). Fills and marks use it as is; text in it uses a darker shade
     (4.5:1 on white), and text on it is dark — white on this orange is only ~2.9:1. */
  --brand: #ff6b00;
  --brand-text: #b03a0a;
  --brand-soft: #fff1e6;
  --on-brand: #1e2622;
  /* chart series after the accent: three neutral lightness steps and a quiet grey for "Other" (funnel page) */
  --series-2: #1e2622; --series-3: #59635e; --series-4: #8a948e; --series-other: #b3bab2;
  --green: #2f7d55;
  --green-soft: #e3f0e8;
  --amber: #a64300;
  --amber-soft: #fff1e6;
  --red: #b9381f;
  --red-soft: #f8e4df;
  --diagram-bg: #fbfbf8;
  --diagram-node: #fbfbf8; /* node fill, as js/graph.js classDefs draw it */
  --diagram-run: #fff1e6; /* the current step's fill (js/graph.js runFill) */
  --ink: #1e2622;
  --ink-text: #fbfbf8;
  --shadow-1: none;
  --shadow-2: 0 6px 20px rgba(30, 38, 34, 0.12);
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 6px;
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
  /* The side margin of the app: 28 px, growing so the content stays within 1264 px (the mockup's 1320 px wrap) and aligned on every page. */
  --page-gutter: max(28px, calc((100% - 1264px) / 2));
  /* The side margin of a working surface (the run page, the editor): its strip and its body share this one gutter, so their edges line up at every width. */
  --work-gutter: 28px;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono-font: ui-monospace, "Cascadia Code", Consolas, monospace;
  color-scheme: light;
}
:root.dark {
  --bg: #191e1b;
  --surface: #212723;
  --surface-2: #242b27;
  --surface-3: #2a312c;
  --line: #2f3731;
  --line-strong: #4a564e;
  --text: #e7ebe5;
  --text-2: #a0aaa3;
  --text-3: #a0aaa3;
  --placeholder: #7f8a83;
  --brand: #ff6b00;
  --brand-text: #ff8a3d;
  --brand-soft: #3a2210;
  --green: #5fbf8a;
  --green-soft: #1b2c23;
  --amber: #ff8a3d;
  --amber-soft: #3a2210;
  --red: #f0806a;
  --red-soft: #3a1f1a;
  --diagram-bg: #212723;
  --diagram-node: #212723;
  --diagram-run: #3a2210;
  --ink: #e7ebe5;
  --ink-text: #191e1b;
  --series-2: #e7ebe5; --series-3: #a0aaa3; --series-4: #7f8a83; --series-other: #4a564e;
  --shadow-1: none;
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

/* ── 2. Blueprint (shadcn) variables ─────────────────────────────────────── */
:root, :root.dark {
  /* shadcn's "background" is what inputs and outline buttons are filled with: the dashboard's white surface.
     The page itself is --bg (set on body). */
  --background: var(--surface);
  --foreground: var(--text);
  --card: var(--surface);
  --card-foreground: var(--text);
  --popover: var(--surface);
  --popover-foreground: var(--text);
  --primary: var(--brand);
  --primary-foreground: var(--on-brand);
  --secondary: var(--surface-3);
  --secondary-foreground: var(--text);
  --muted: var(--surface-3);
  --muted-foreground: var(--text-3);
  --accent: var(--surface-3);
  --accent-foreground: var(--text);
  --destructive: var(--red);
  --destructive-foreground: #ffffff;
  --border: var(--line);
  --input: var(--line-strong);
  --ring: var(--brand);
  --radius: 0.375rem;
  --sidebar: var(--surface);
  --sidebar-foreground: var(--text);
  --sidebar-primary: var(--brand);
  --sidebar-primary-foreground: var(--on-brand);
  --sidebar-accent: var(--surface-3);
  --sidebar-accent-foreground: var(--text);
  --sidebar-border: var(--line);
  --sidebar-ring: var(--brand);
  --chart-1: var(--brand);
  --chart-2: var(--green);
  --chart-3: var(--amber);
  --chart-4: var(--red);
  --chart-5: var(--text-3);
  --alert-success: var(--green);
  --alert-warning: var(--amber);
  --alert-danger: var(--red);
  --alert-info: var(--brand);
  --font-sans: var(--sans);
  --font-mono: var(--mono-font);
  --bb-default-font-family: var(--sans);
  --bb-default-mono-font-family: var(--mono-font);
  --bb-card-shadow: var(--shadow-1);
  /* Blueprint's "compact" density: every control ~12% tighter, closer to the dashboard's 32–36 px rows. */
  --bb-spacing: 0.21875rem;
}
:root.dark { --destructive-foreground: #1a0d0d; }

/* ── 3. Base ─────────────────────────────────────────────────────────────── */
/* Element defaults go into Blueprint's own `base` layer, so its component utilities (a button rendered as <a>,
   focus rings) still win over them; everything class-based below stays unlayered. */
@layer base {
  html, body { min-height: 100%; }
  body {
    margin: 0;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
    background: var(--bg);
    color: var(--text);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  a { color: var(--text); text-underline-offset: 3px; }
  :is(p, li, dd, .foot, .page-note, .empty-state) a:not([class]) { text-decoration: underline; }
  a:hover { text-decoration: underline; }
  /* A Blueprint button rendered as a link is a button: text colour from its variant, never underlined. */
  a[class~="bb:inline-flex"], a[class~="bb:inline-flex"]:hover { color: var(--foreground); text-decoration: none; }
  code, .code-input, .cond { font-family: var(--mono-font); font-size: 0.92em; }
  /* Conditions are read character by character ("=" vs "=="): no programming ligatures anywhere in code text. */
  code, .mono, .code-input, .cond, .dn-sub, .ctx-list dd, input.mono { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
  :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
  h1:focus, h1:focus-visible, main:focus { outline: none; box-shadow: none; }
  ul.list { list-style: disc; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.sr-only { position: absolute; 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: 12px; top: -40px; z-index: 50; background: var(--surface); padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); }
.skip-link:focus { top: 8px; }
.muted { color: var(--text-3); }
.show-sm { display: none; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* ── Top bar: identity, where you are, the sections, the theme ── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  min-height: 48px;
  background: var(--surface);
  padding: 0 16px;
  display: flex; align-items: center; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); text-decoration: none; }
.brand:hover { text-decoration: none; }
.logo-mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--brand); color: var(--on-brand);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.logo-mark svg { width: 13px; height: 13px; }
.brand-name { font-weight: 650; letter-spacing: -0.01em; }
.crumbs { display: flex; align-items: center; min-width: 0; gap: 0; color: var(--text-3); }
.crumbs a, .crumbs span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28vw; color: var(--text-3); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs > *::before { content: '/'; margin: 0 6px 0 6px; color: var(--line-strong); }
.crumbs [aria-current] { color: var(--text-2); }
.spacer { flex: 1; }
.mainnav { display: flex; align-items: center; gap: 2px; }
.mainnav a {
  display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border-radius: var(--radius-sm);
  color: var(--text-2); font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.mainnav a:hover { background: var(--surface-3); color: var(--text); }
.mainnav a.active { color: var(--text); background: var(--surface-3); border-radius: var(--radius-sm); }
/* The public documentation page (/docs): readable prose in the rails, a contents line, links told apart without colour. */
.docs-page { padding: 8px 0 40px; }
.docs-text a, .docs-link { text-decoration: underline; text-underline-offset: 3px; }
/* The help center: a side menu of its pages beside the page (a native <details> at phone width). */
.docs-shell { display: grid; grid-template-columns: 272px minmax(0, 1fr); column-gap: 48px; align-items: start; }
.docs-menu a { display: block; padding: 7px 12px; border-radius: var(--radius-sm); color: var(--text-2); font-size: 14px; font-weight: 500; text-decoration: none; }
.docs-menu a:hover { background: var(--surface-3); color: var(--text); }
.docs-menu a.active { background: var(--surface-3); color: var(--text); box-shadow: inset 2px 0 0 var(--brand); }
.docs-menu-wide { position: sticky; top: 56px; max-height: calc(100vh - 72px); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 16px 0; margin-left: -12px; scrollbar-width: none; }
.docs-menu-wide::-webkit-scrollbar { display: none; }
.docs-menu-narrow { display: none; }
.docs-main { min-width: 0; border-left: 1px solid var(--line); overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .docs-shell { grid-template-columns: 1fr; }
  .docs-menu-wide { display: none; }
  .docs-menu-narrow { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .docs-menu-narrow summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-size: 14px; color: var(--text-2); }
  .docs-menu-narrow summary::after { content: "\25BE"; font-size: 14px; color: var(--text-2); }
  .docs-menu-narrow[open] summary::after { content: "\25B4"; }
  .docs-menu-narrow summary b { color: var(--text); }
  .docs-menu-narrow nav { padding: 4px 0 8px; }
  .docs-main { border-left: none; }
}
.docs-text { max-width: 46ch; }
.docs-text h3 { margin: 22px 0 6px; font-size: 15px; }
.docs-text ul { margin: 6px 0 10px; padding-left: 20px; color: var(--text-2); }
.docs-text li { margin: 0 0 6px; }
.docs-text .legal-table-wrap { max-width: none; }
.concept { padding: 6px 0 18px; }
.concept + .concept { border-top: 1px solid var(--line); padding-top: 20px; }
.concept h3 { font-size: 16px; }
.concept h3 { margin-top: 0; }
.concept-summary { font-weight: 550; color: var(--text); }
.guide-answer { max-width: 46ch; margin: 8px 0 20px; font-size: 16px; font-weight: 550; color: var(--text); line-height: 1.55; }
.docs-text ul.guide-list { list-style: disc; }
.glossary dt { margin-top: 14px; font-weight: 600; color: var(--text); }
.glossary dd { margin: 2px 0 0; color: var(--text-2); }
.concept-index a { display: inline-block; margin: 0 6px 6px 0; padding: 2px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13px; text-decoration: none; }
.concept-index a:hover { background: var(--surface-3); }
.concept-see a { margin-left: 8px; }
.strip-help { grid-column: 3; grid-row: 1; align-self: end; margin: 0 0 4px;  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--text-2); font-size: 13px; font-weight: 600; text-decoration: none; }
.strip-help:hover, .strip-help:focus-visible { color: var(--text); border-color: var(--brand); }
.docs-menu a.child { padding-left: 26px; font-size: 13.5px; }
.docs-menu-group { display: block; padding: 10px 12px 2px 26px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.guide-example { max-width: 62ch; margin: 0 0 20px; font-size: 14.5px; line-height: 1.55; }
.guide-example p { margin: 0 0 10px; }
.guide-example .btn { margin: 0; }
.guide-gloss { font-size: 13.5px; color: var(--text-2); }
.docs-text code, .template-checklist code { font-size: 0.92em; }
.guide-entry h3 { margin: 18px 0 6px; }
.guide-points { margin: 0; display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 8px 16px; }
.guide-points dt { font-weight: 600; color: var(--text); }
.guide-points dd { margin: 0; color: var(--text-2); }
.rail-head .count code { margin-left: 8px; font-size: 12.5px; }
.shot { margin: 12px 0 8px; }
.shot a { display: block; }
.shot img { display: block; width: 100%; max-width: 920px; height: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.shot .shot-dark { display: none; }
:root[data-theme="dark"] .shot .shot-light { display: none; }
:root[data-theme="dark"] .shot .shot-dark { display: block; }
@media (max-width: 760px) { .guide-points { grid-template-columns: 1fr; gap: 2px; } .guide-points dd { margin-bottom: 8px; } }
.mainnav a.nav-trial { background: var(--brand); color: var(--on-brand); font-weight: 650; }
.mainnav a.nav-trial:hover { background: var(--brand); color: var(--on-brand); filter: brightness(0.94); }
/* The account: an avatar that opens a small menu (who, settings, log out, the legal pages). */
.account { position: relative; margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--line); }
.avatar-btn { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }
.avatar-btn::-webkit-details-marker { display: none; }
.avatar-btn:hover .avatar, .account[open] .avatar-btn .avatar { box-shadow: 0 0 0 3px var(--brand-soft); }
.avatar-btn:focus-visible { border-radius: 50%; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface-3); color: var(--text); font-size: 12.5px; font-weight: 650;
  transition: box-shadow .12s ease; }
.avatar.lg { width: 36px; height: 36px; font-size: 15px; }
.acct-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 264px; padding: 6px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); animation: acct-in .12s ease-out; }
@keyframes acct-in { from { opacity: 0; transform: translateY(-4px); } }
.acct-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.acct-who { display: flex; flex-direction: column; min-width: 0; }
.acct-who .k { font-size: 11.5px; color: var(--text-3); }
.acct-who b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-links { display: flex; flex-direction: column; }
.acct-links a, .acct-out button { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: var(--radius-sm);
  background: none; font: inherit; font-size: 13.5px; color: var(--text); text-decoration: none; cursor: pointer; text-align: left; }
.acct-links a svg, .acct-out button svg { color: var(--text-3); flex-shrink: 0; }
.acct-links a:hover, .acct-out button:hover { background: var(--surface-3); text-decoration: none; }
.acct-out { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--line); }
.acct-pop .legal-links { padding: 10px 10px 6px; gap: 4px 12px; font-size: 11.5px; }
.icon-btn {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-2); border: 1px solid transparent; background: none; cursor: pointer; padding: 0;
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--line); }
.theme-btn .i-sun, .theme-btn .i-moon, .theme-btn .i-system { display: none; }
:root[data-theme-choice="light"] .theme-btn .i-sun,
:root[data-theme-choice="dark"] .theme-btn .i-moon,
:root[data-theme-choice="system"] .theme-btn .i-system,
:root:not([data-theme-choice]) .theme-btn .i-system { display: block; }
.btn-plain { font: inherit; }

/* Notice of a change to the terms (TermsNoticeBanner): one quiet strip under the top bar, the brand accent only on the edge. */
.terms-notice { display: flex; align-items: center; gap: 12px; padding: 8px 20px; border-bottom: 1px solid var(--line); border-left: 3px solid var(--brand); background: var(--surface-2); font-size: 13.5px; }
.terms-notice p { margin: 0; flex: 1; min-width: 0; color: var(--text-2); }
.terms-notice b { color: var(--text); font-weight: 600; }
.terms-notice .when { margin: 0 6px; }
.terms-notice a { color: var(--text); white-space: nowrap; }
.terms-notice form { margin: 0; flex: none; }
@media (max-width: 760px) { .terms-notice { padding: 8px 12px; align-items: flex-start; } }

/* ── Pages ── */
.main { min-height: calc(100vh - 49px); display: flex; flex-direction: column; }
.page { width: 100%; max-width: 1180px; margin: 0 auto; padding: 24px 24px 48px; }
.page.narrow { max-width: 760px; }
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head .titles { flex: 1; min-width: 0; }
.page-head h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.page-head p { color: var(--text-3); margin: 2px 0 0; max-width: 70ch; }
.page-head .actions { display: flex; gap: 8px; align-items: center; }
h2.section { font-size: 14px; font-weight: 600; margin: 24px 0 8px; display: flex; align-items: baseline; gap: 8px; }
h2.section .count, .rail-head .count { font-weight: 400; color: var(--text-3); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Panels: a white surface with a hairline, a section head with a count (the dashboard's rails). */
.panel { background: var(--surface); border: 0; border-radius: var(--radius-lg); }
.panel + .panel { margin-top: 16px; }
.rail-head { display: flex; align-items: baseline; gap: 8px; padding: 14px 16px 8px; }
.rail-head h2 { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; margin: 0; }
.rail-head .tail { margin-left: auto; }
.panel-body { padding: 0 16px 14px; }

/* Status: dot + word. Colour only on the dot. */
.status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; color: var(--text-2); }
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; }
.status.open .dot { background: var(--green); }
.status.done .dot { background: var(--green); }
.status.aborted .dot { background: var(--red); }
.status.open { color: var(--text); }
.bb-status { gap: 6px; font-weight: 500; }

/* Tables (Blueprint's DataTable, plus the static account tables). */
.table-wrap { background: var(--surface); border: 0; border-radius: var(--radius-lg); overflow-x: auto; }
.table-wrap table { width: 100%; }
.plain-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.plain-table th { text-align: left; font-weight: 500; color: var(--text-3); font-size: 12.5px; padding: 10px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.plain-table td { padding: 10px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.plain-table tr:last-child td { border-bottom: none; }
/* Comparison guides (spec public-docs-page AC17): long cells wrap, the first column names the point. */
.compare-table th, .compare-table td { white-space: normal; vertical-align: top; min-width: 190px; line-height: 1.5; }
.compare-table tbody th { color: var(--text); font-weight: 600; font-size: 13.5px; text-align: left; border-bottom: 1px solid var(--line); }
@media (max-width: 640px) {
  /* a narrow screen: one point at a time, Pathista above the other product, no sideways scroll */
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare-table, .compare-table caption, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; width: 100%; min-width: 0; }
  .compare-table tbody th { border-bottom: none; padding-bottom: 2px; }
  .compare-table td { border-bottom: none; padding-top: 6px; padding-bottom: 6px; }
  .compare-table td::before { content: attr(data-label); display: block; color: var(--text-3); font-size: 12px; font-weight: 600; }
  .compare-table tr { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
  .compare-table tr:last-child { border-bottom: none; }
}
.compare-table caption { caption-side: bottom; text-align: left; color: var(--text-3); font-size: 12.5px; padding: 10px 16px; }
.cell-title { font-weight: 500; color: var(--text); text-decoration: none; }
.cell-title:hover { text-decoration: underline; }
.cell-sub { display: block; font-size: 12px; color: var(--text-3); }
.cell-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }

/* Empty states: a title, one sentence, where it will come from. */
.empty-state { color: var(--text-3); padding: 28px 16px; text-align: center; }
.empty-state h3 { font-size: 14px; font-weight: 500; color: var(--text-2); margin: 0 0 2px; }
.empty-state p, .account-page .empty-state p { font-size: 13px; max-width: 48ch; margin: 0 auto; }
.empty-state p a { text-decoration: underline; text-underline-offset: 2px; } /* a link inside a sentence is told apart by more than colour */

/* ── The run strip: state pill + facts (the dashboard's run header) ── */
.run {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; column-gap: 12px; row-gap: 16px;
  padding: 18px var(--page-gutter) 2px; min-height: 76px;
  background: var(--surface-3);
}
/* The page's name over one line of state: the dot is orange only while something is live. */
.state-obj {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "word word" "dot sub"; align-items: center; column-gap: 8px; row-gap: 6px;
  min-width: 0; max-width: 100%;
}
.state-obj .dot { grid-area: dot; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; }
.state-obj .word { grid-area: word; font-size: 32px; line-height: 1; font-weight: 650; font-variation-settings: "wdth" 75; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.state-obj .sub { grid-area: sub; font-size: 14px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.state-obj.open .dot { background: var(--brand); }
.state-obj.done .dot { background: var(--green); }
.state-obj.aborted .dot { background: var(--red); }
/* The readout strip under the page's name: one Leaf cell per fact, 2 px apart on the Band. Names (a long run title) shrink to an ellipsis. */
.facts { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: stretch; gap: 2px; min-width: 0; flex-wrap: nowrap; }
.facts:empty { display: none; }
.fact { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 0; padding: 10px 16px 11px; background: var(--surface); }
.fact:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.fact:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.fact:only-child { border-radius: var(--radius-sm); }
.fact.name { flex: 2 1 0; }
.fact .k { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fact .v { font-size: 17px; line-height: 1.2; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.fact .v .num, .fact .v a.num { font-size: 28px; line-height: 1; font-variation-settings: "wdth" 75; }
.fact .v .muted { color: var(--text-2); font-weight: 500; font-size: 15px; }
.show-sm { display: none; }
.fact.name .v { font-weight: 600; }
.fact.name a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.fact.name a:hover { text-decoration-color: currentColor; }
.howto a { text-decoration: underline; text-underline-offset: 3px; } /* a link inside the setup steps' text must not rely on colour alone (axe link-in-text-block) */
.run .actions { grid-column: 2; grid-row: 1; align-self: end; justify-self: end; flex-shrink: 0; display: flex; align-items: center; gap: 8px; }

/* ── Run detail: graph | context + steps | history (the dashboard's three columns) ── */
/* The run page fills the window below the top bar; the graph and the two rails scroll on their own. */
.run-page { display: flex; flex-direction: column; height: calc(100vh - 49px); min-height: 520px; }
.run-body { flex: 1; min-height: 0; background: var(--surface); }
/* Working surfaces: the strip's content and the body (graph + dock, or the editor) share --work-gutter, so the header's left and right edges are the body's. The body sits as a Leaf on the Ledger. */
.run-page .run, .editor-page .run { padding-inline: var(--work-gutter); }
.run-page .dock-bar, .run-page .run-body, .editor-page > .editor { margin-inline: var(--work-gutter); width: calc(100% - 2 * var(--work-gutter)); }
/* The panel group of the editor carries an inline width: 100%, which only !important beats. */
.editor-page > .editor { width: calc(100% - 2 * var(--work-gutter)) !important; }
.editor-page > .getting-started-note { margin-inline: var(--work-gutter); }
/* The server-rendered first paint of the run page, hidden until the browser says which layout it needs; shown after 4 s whatever happens (blocked script or socket). */
.layout-pending { visibility: hidden; animation: layout-reveal 0s 4s forwards; }
@keyframes layout-reveal { to { visibility: visible; } }
.dock-bar { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 4px 12px; border-bottom: 2px solid var(--bg); background: var(--surface); }
.run-dock { border: 0; border-radius: 0; }
/* The graph is a Leaf sheet; the panels beside it (the log, steps, todos…) are the Ledger with Leaf rows on it. The library's own borders go: tone steps divide. */
.run-dock [data-dock-group] { border: 0; }
.run-dock [data-dock-group]:not(:has([data-dock-tab="graph"])), .run-dock [data-dock-group]:not(:has([data-dock-tab="graph"])) > div:last-of-type { background: var(--bg); }
/* The library draws its splitters 0 px wide, so nothing could be grabbed: a 6 px strip over the seam (negative margins, so the layout does not move), orange while aimed at. */
.run-dock [role=separator] { z-index: 5; background: var(--bg); transition: background-color .12s ease; }
.run-dock [role=separator][aria-orientation=vertical] { flex: 0 0 6px; width: 6px; margin: 0 -3px; cursor: col-resize; }
.run-dock [role=separator][aria-orientation=horizontal] { flex: 0 0 6px; height: 6px; margin: -3px 0; cursor: row-resize; }
.run-dock [role=separator]:hover, .run-dock [role=separator]:focus-visible { background: var(--text-2); outline: none; }
.run-dock .graph-wrap { height: 100%; }
/* The dock's tabs: a close mark only on the open or aimed-at tab (a × on every tab reads as "closable" everywhere), and the accent rule only on the tab of the group you work in:
   the graph is a single fixed panel, its tab stays quiet. */
.run-dock [data-dock-tab] > button[aria-label^="Close "] { opacity: 0; transition: opacity .12s ease; }
.run-dock [data-dock-tab][aria-selected="true"] > button[aria-label^="Close "], .run-dock [data-dock-tab]:hover > button[aria-label^="Close "], .run-dock [data-dock-tab]:focus-within > button[aria-label^="Close "] { opacity: .7; }
.run-dock [data-dock-tab="graph"]::after { background: var(--line-strong); }
@media (hover: none) { .run-dock [data-dock-tab] > button[aria-label^="Close "] { opacity: .7; } } /* a touch screen has no hover: the mark is shown, never an invisible target */
.run-pane { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden !important; }
.run-pane > .graph-wrap, .run-pane > .col { flex: 1; min-height: 0; }
.graph-pane { position: relative; min-width: 0; min-height: 0; background: var(--diagram-bg); overflow: auto; display: grid; padding: 24px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.run-body .col { overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.graph-wrap { position: relative; min-width: 0; min-height: 0; display: flex; }
.graph-wrap .graph-pane { flex: 1; }
/* Room around the drawing: edge labels on outer curves reach past the SVG's own box. */
.graph-pane mp-graph { display: block; margin: auto; padding: 8px 56px 56px; }
.graph-pane:focus-visible { box-shadow: inset var(--focus-ring); border-radius: 0; }
/* The dashboard's corner tools: zoom out · % · zoom in · fit. */
.graph-tools { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-1); }
.graph-tools button { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-2);
  background: none; border: 0; cursor: pointer; padding: 0; }
.graph-tools button + button, .graph-tools .zoom + button { border-left: 1px solid var(--line); }
.graph-tools button:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.graph-tools button:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.graph-tools button:hover { background: var(--surface-2); color: var(--text); }
.graph-tools svg { width: 15px; height: 15px; }
/* Full screen (js/graph.js setMax): the wrap covers the window; the page behind stops scrolling. */
.graph-wrap.graph-max { position: fixed; inset: 0; z-index: 80; background: var(--diagram-bg); }
.graph-wrap.graph-max .graph-pane { padding: 24px; }
html.graph-max-open { overflow: hidden; }
.graph-tools .i-min, .graph-max .graph-tools .i-max { display: none; }
.graph-max .graph-tools .i-min { display: block; }
.graph-tools .zoom { font-size: 11.5px; color: var(--text-3); padding: 0 8px; min-width: 48px; text-align: center; border-left: 1px solid var(--line);
  font-variant-numeric: tabular-nums; }
.graph-pane mp-graph svg { display: block; margin: auto; max-width: none; height: auto; }
.col { background: var(--bg); min-width: 0; }
.run-body .rail-head { padding: 14px 12px 8px; }
.col + .col { }
.ctx-list { margin: 0; padding: 0 12px 12px; display: grid; gap: 2px; }
.ctx-list .prop { display: grid; grid-template-columns: minmax(64px, 36%) 1fr; gap: 10px; padding: 8px 12px; background: var(--surface); border-radius: var(--radius-sm); font-size: 13.5px; }
.ctx-list dt { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-list dd { margin: 0; color: var(--text); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; min-width: 0; }
.block + .block { border-top: 2px solid var(--bg); }
.rail-sum { padding: 0 16px 8px; font-size: 12.5px; color: var(--text-3); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.rail-sum span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.rail-sum i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--line-strong); }
.rail-sum .done i { background: var(--green); }
.rail-sum .running i { background: var(--amber); }
.rail-sum .pending i { background: none; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
ul.steps { list-style: none; margin: 0; padding: 0 12px 12px; display: grid; gap: 2px; }
ul.steps li { padding: 9px 14px 9px 12px; border-left: 3px solid transparent; border-radius: var(--radius-sm); background: var(--surface); font-size: 14px; display: flex; align-items: center; gap: 10px; min-width: 0; }
ul.steps li.done { color: var(--text-2); }
ul.steps li.current { color: var(--text); font-weight: 600; border-left-color: var(--brand); }
ul.steps li.pending { color: var(--text-2); }
/* The ways out of the current step, under its row: a small list, not another step. */
ul.steps li.step-ways { display: block; padding: 0 16px 12px 42px; border-left-color: transparent; background: var(--surface); color: var(--text-2); font-weight: 400; }
ul.steps li.step-ways .ways-head { font-size: 12px; color: var(--text-3); margin-bottom: 4px; }
ul.steps li.step-ways .options { padding: 0; }
ul.steps li.step-ways .options li { display: flex; padding: 0; border: 0; background: none; font-size: 12.5px; font-weight: 400; gap: 2px 8px; }
.step-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; font-size: 9px; font-weight: 700; line-height: 1; color: #fff; box-sizing: border-box; }
li.done .step-icon { background: var(--green); }
li.current .step-icon { border: 2px solid var(--amber); border-right-color: transparent; animation: mp-spin 0.9s linear infinite; }
li.pending .step-icon { border: 1.5px solid var(--line-strong); }
li.stopped .step-icon { background: var(--red); }
.step-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.step-meta { color: var(--text-3); font-size: 12px; white-space: nowrap; flex-shrink: 0; font-weight: 400; font-variant-numeric: tabular-nums; }
li.current .step-meta { color: var(--text-2); }
/* The log is the run's logbook: one Leaf row per move on the Ledger, the time in a column, the trace of the route beside it (steps are columns, newest on top). */
ol.history { list-style: none; margin: 0; padding: 0 12px 16px; display: grid; gap: 2px; }
ol.history > li { display: grid; grid-template-columns: 44px var(--trace-w, 0px) minmax(0, 1fr); column-gap: 8px; padding: 8px 14px 9px 12px; background: var(--surface); border-radius: var(--radius-sm); font-size: 14px; }
ol.history time { align-self: start; color: var(--text-2); font-variant-numeric: tabular-nums; font-variation-settings: "wdth" 80; font-weight: 600; font-size: 14px; padding-top: 1px; }
ol.history .move { color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
ol.history .move b { font-weight: 600; color: var(--text); }
ol.history .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 3px; font-size: 13px; color: var(--text-2); }
.log-trace-cell { position: relative; display: block; }
.log-trace { position: absolute; left: 0; top: -8px; height: calc(100% + 17px); display: block; overflow: visible; }
.log-trace .line { fill: none; stroke: var(--text); stroke-width: 1.5; }
.log-trace .stop { fill: var(--text); }
.log-trace.live .stop { fill: var(--surface); stroke: var(--brand); stroke-width: 2.5; }
/* The log: one timeline — moves with the summaries that closed their steps, free-standing notes and closed todos. */
.log-note { margin-top: 6px; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--text); min-width: 0; }
.log-note-head { font-size: 13px; color: var(--text-2); margin-bottom: 3px; }
.log-note-head b { font-weight: 500; color: var(--text-2); }
.note-tag { display: inline-block; padding: 0 6px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600; background: var(--surface-3); color: var(--text); }
.note-body { position: relative; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.note-body.folded { max-height: 6.2em; overflow: hidden; }
.note-body.folded::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.6em; background: linear-gradient(to bottom, transparent, var(--surface-3)); }
.note-text p, .note-text ul, .note-text ol { margin: 0 0 4px; }
.note-text > :last-child { margin-bottom: 0; }
.note-text ul, .note-text ol { padding-left: 18px; }
.note-text ul { list-style: disc; }
.note-text ol { list-style: decimal; }
.note-text .note-h { font-weight: 600; }
.note-text code { font-size: 12px; padding: 0 3px; border-radius: 3px; background: var(--surface); border: 1px solid var(--line); }
.note-more { font: inherit; font-size: 12px; margin-top: 2px; padding: 0; border: none; background: none; color: var(--text); cursor: pointer; }
.note-more:hover { text-decoration: underline; }
.log-evidence summary { cursor: pointer; list-style: none; }
.log-evidence summary::-webkit-details-marker { display: none; }
.log-evidence summary .move::before { content: '▸ '; color: var(--text-3); }
.log-evidence[open] summary .move::before { content: '▾ '; }
.log-evidence .todo-evidence { margin: 4px 0 0 12px; }
.via { display: inline-block; padding: 0 6px; border-radius: var(--radius-sm); font-size: 12.5px; background: var(--surface-3); color: var(--text); }
.actor { display: inline-flex; align-items: center; gap: 4px; }
.actor::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.actor.user::before { background: var(--brand); }
.actor.model::before { background: var(--text-3); }
/* Todos on the run page: one flat list as on the original dashboard; the check is a status mark, not a control. */
ul.todos { list-style: none; margin: 0; padding: 0 0 8px; }
ul.todos li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 16px; font-size: 14px; min-width: 0; border-bottom: 2px solid var(--bg); }
ul.todos li:last-child { border-bottom: none; }
/* A round status mark, as on the dashboard: an empty ring when open, amber when waiting, green with a tick when done. */
.todo-check { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--text-3);
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; line-height: 1; color: #fff; }
li.done .todo-check { background: var(--green); border-color: var(--green); }
li.waiting .todo-check { border-color: var(--amber); }
li.notReached .todo-check { border-style: dashed; }
.todo-body { min-width: 0; flex: 1; }
.todo-head { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.todo-text { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
li.done .todo-text, li.notReached .todo-text { color: var(--text-2); font-weight: 400; }
.todo-props { flex-shrink: 0; max-width: 45%; font-size: 12px; color: var(--text-3); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-props .sep { margin: 0 4px; color: var(--line-strong); }
.todo-props .mono { font-size: 11.5px; }
.todo-meta, .todo-desc, .todo-evidence { margin-top: 2px; font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; line-height: 1.45; }
li.waiting .todo-meta { color: var(--text-2); }
.todos-area textarea, textarea.todos-area { min-height: 72px; }

.options { list-style: none; margin: 0; padding: 0 16px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.options li { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; color: var(--text-2); min-width: 0; }
.options .cond { overflow-wrap: anywhere; min-width: 0; }
.options li.blocked { color: var(--text-3); }
.options .cond { font-size: 11.5px; color: var(--text-3); }

/* ── Status marks inside the graph (identical to the widget and the dashboard) ──
   Sizes are not scoped to mp-graph: Mermaid measures labels in a scratch node outside it, and scoped sizes make the
   boxes too narrow. Colours must beat Mermaid's own "#svg-id .done span { color … !important }", hence G — an
   :is() whose unused two-id branch lends the selector two ids of specificity. */
body .dg { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; font-size: 9px; font-weight: 700; line-height: 1; margin-right: 6px; vertical-align: -2px; }
mp-graph :is(svg, #g#g) .dg-done { background: var(--green) !important; }
mp-graph :is(svg, #g#g) .dg-done span { color: #fff !important; }
/* WebKit (Safari) paints anything with its own compositing layer inside an SVG foreignObject — a transform
   animation, opacity < 1 — relative to the SVG's origin instead of its label, so the spinner and the muted lines left
   their nodes. Inside the graph: muted colours through color-mix, never opacity; the spinner turns a conic gradient's
   angle (a repaint) instead of rotating the element. */
@property --mp-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes mp-sweep { to { --mp-a: 360deg; } }
mp-graph :is(svg, #g#g) .dg-run { background: radial-gradient(closest-side, var(--diagram-run) calc(100% - 2px), transparent calc(100% - 1.5px)),
    conic-gradient(from var(--mp-a), transparent 0 25%, var(--amber) 0) !important;
  animation: mp-sweep 0.9s linear infinite; }
@keyframes mp-spin { to { transform: rotate(360deg); } }
body .dg-pend { display: inline-block; width: 12px; height: 12px; border: 1.5px solid var(--line-strong); border-radius: 50%; margin-right: 6px; vertical-align: -2px; box-sizing: border-box; }
body .dn-sub { font-size: 10px; color: color-mix(in srgb, currentColor 72%, transparent); }
body .dn-loop { font-size: 11px; }
body .dn-meta { font-size: 11px; color: color-mix(in srgb, currentColor 80%, transparent); font-variant-numeric: tabular-nums; }
/* Start and end badges heading a node (ProgressMermaid): the start in the accent, the end quieter. Same in the widget. */
body .dn-start, body .dn-end { display: inline-block; font-size: 12px; font-weight: 600; line-height: 18px; padding: 0 8px; border-radius: 3px; margin: 0 4px 4px 0; }
mp-graph :is(svg, #g#g) .dn-start, .dn-start { background: var(--brand-soft) !important; color: var(--brand-text) !important; }
mp-graph :is(svg, #g#g) .dn-end, .dn-end { background: none !important; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text-3) !important; }
mp-graph .nodeLabel { text-align: left; }
mp-graph :is(svg, #g#g) .edgeLabel, mp-graph :is(svg, #g#g) .edgeLabel p, mp-graph :is(svg, #g#g) .edgeLabel span { color: var(--text-3) !important; background: var(--diagram-bg) !important; font-size: 11px !important; }
mp-graph svg, mp-graph svg foreignObject, mp-graph svg foreignObject div { overflow: visible; }
/* Nodes as cards: rounded, a hairline shadow; the current step glows amber. Edge labels are text, never boxes — a
   bordered label read as one more step: the label cut out of the lines on the diagram's own background, the condition
   under it in small mono. Filters only on SVG shapes, never inside a foreignObject (WebKit, see above). */
mp-graph g.node > rect.label-container { rx: 10px; ry: 10px; filter: drop-shadow(0 1px 1.5px rgba(20, 20, 30, 0.06)); }
mp-graph g.node.inProgress > rect.label-container { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--amber) 45%, transparent)); }
mp-graph g.node.selected > :is(rect, g).label-container { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--brand) 35%, transparent)); }
:root.dark mp-graph g.node > rect.label-container { filter: none; }
:root.dark mp-graph g.node.inProgress > rect.label-container { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--amber) 35%, transparent)); }
mp-graph :is(svg, #g#g) span.edgeLabel:not(:empty) p { color: var(--text-2) !important; }
mp-graph :is(svg, #g#g) span.edgeLabel .dn-sub { color: var(--text-3) !important; }
/* The arrow being edited (js/graph.js markFocusedEdge): its label in the accent too; a self-loop's line on its node. */
mp-graph :is(svg, #g#g) g.edgeLabel.mp-edge-sel span.edgeLabel p, mp-graph :is(svg, #g#g) g.edgeLabel.mp-edge-sel .dn-sub { color: var(--brand-text) !important; }
mp-graph :is(svg, #g#g) g.node.mp-loop-sel .dn-loop { color: var(--brand-text) !important; font-weight: 600; }
/* The open step's other ways out: softly in the accent; its self-loop line likewise. */
mp-graph :is(svg, #g#g) g.edgeLabel.mp-edge-soft span.edgeLabel p, mp-graph :is(svg, #g#g) g.edgeLabel.mp-edge-soft .dn-sub,
mp-graph :is(svg, #g#g) g.node.selected:not(.mp-loop-sel) .dn-loop { color: color-mix(in srgb, var(--brand-text) 60%, var(--text-3)) !important; }
.graph-note { color: var(--text-3); font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  mp-graph :is(svg, #g#g) .dg-run { animation: none !important; background: var(--amber) !important; }
  li.current .step-icon { animation: none !important; border-right-color: var(--amber) !important; }
}

/* Blueprint's select trigger: the chosen text reads from the left and stays on one line. */
button[role="combobox"] { text-align: left; white-space: nowrap; overflow: hidden; }

/* ── Workflow editor: live preview | form (the graph on the left, as on the run page) ── */
/* Preview | form: a BbResizablePanelGroup (sizes remembered per browser, Components/Shared/PaneLayout); each pane
   scrolls on its own. */
.editor { flex: 1; min-height: 0; background: var(--surface); }
.editor-pane { height: 100%; min-height: 0; }
/* The handles of resizable panes: the dashboard's 1 px line, the brand colour while hovered or dragged. */
/* Blueprint's prebuilt CSS lacks the handle's w-px / relative, so it collapsed to 0 px and could not be grabbed:
   a 1 px line with a 7 px grab zone (::after) reaching only to the right: the pane on the left keeps its scrollbar
   at that edge, and a zone over it turned the scrollbar into a resize handle. */
.pane-handle { background: var(--line) !important; flex: 0 0 1px; width: 1px; position: relative; z-index: 5; }
.pane-handle::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 7px !important; transform: none !important; translate: none !important; cursor: col-resize; }
.pane-handle:hover, .pane-handle:active, .pane-handle:focus-visible { background: var(--brand) !important; }
.editor-head .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.editor-form { min-width: 0; padding: 0 24px 64px; height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
/* The form scrolls on its own beside the fixed preview; its name + save row stays in view while steps are opened. */
.editor-preview { height: 100%; display: flex; flex-direction: column; background: var(--diagram-bg); }
.editor-preview .graph-wrap { flex: 1; }
.editor-preview .graph-pane { padding: 12px; }
/* The preview is interactive: click a step to edit it, drag from one step onto another to connect them. */
/* Pan by dragging the background (js/graph.js): a hand while there is something to scroll to. */
[data-graph-scroll].can-pan { cursor: grab; }
[data-graph-scroll].panning, [data-graph-scroll].panning * { cursor: grabbing !important; user-select: none; }
mp-graph[data-connect] g.node { cursor: pointer; touch-action: none; }
mp-graph[data-connect] { user-select: none; -webkit-user-select: none; }
/* Arrows are clickable too (they open that edge's row): a wide transparent twin of each path takes the pointer. */
mp-graph[data-connect] .mp-edge-hit { fill: none; stroke: transparent; stroke-width: 14px; pointer-events: stroke; cursor: pointer; }
mp-graph[data-connect] g.edgeLabel { cursor: pointer; }
/* Hover, drag source and drop target are painted by js/graph.js (Mermaid's inline !important styles win over CSS). */
.mp-band { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; overflow: visible; }
.mp-band line { stroke: var(--brand); stroke-width: 2; stroke-dasharray: 6 4; stroke-linecap: round; }
.mp-band circle { fill: var(--brand); }
html.mp-dragging, html.mp-dragging * { cursor: crosshair !important; }
.preview-hint { font-size: 12px; color: var(--text-3); margin-left: auto; }
.editor-preview .issues { border-top: 2px solid var(--bg); background: var(--surface); max-height: 38%; overflow: auto; padding: 10px 16px 12px; font-size: 13px; }
.issues h3 { font-size: 13px; font-weight: 600; margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.issues ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.issues li { color: var(--text-2); display: flex; gap: 8px; }
.issues li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red); margin-top: 7px; flex-shrink: 0; }
.issues button { all: unset; cursor: pointer; }
.issues button:hover { text-decoration: underline; }
.issues button:focus-visible { box-shadow: var(--focus-ring); border-radius: 3px; }
.ok-line { color: var(--text-3); display: inline-flex; gap: 6px; align-items: center; }
.ok-line::before { content: '✓'; width: 14px; height: 14px; border-radius: 50%; background: var(--green); color: #fff; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.editor-head { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 0 -24px 16px; padding: 16px 24px 12px;
  position: sticky; top: 0; z-index: 4; background: var(--surface); border-bottom: 2px solid var(--bg); }
.editor-head .name { flex: 1; min-width: 220px; }
.save-conflict { flex-basis: 100%; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-radius: var(--radius-md);
  background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--line)); color: var(--text); font-size: 13px; }
.save-conflict span { flex: 1; min-width: 240px; }
/* A company workflow the member may run and read but not change: a quiet note, the form stays visible and disabled. */
.readonly-note { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--surface-2, var(--surface)); border: 0; color: var(--text-2); font-size: 13px; }
.readonly-note > :first-child { flex-shrink: 0; } /* the icon: a wrapped sentence must not squeeze the eye to a dot */
.editor-body { border: 0; padding: 0; margin: 0; min-width: 0; }
.readonly-view { display: flex; flex-direction: column; gap: 10px; }
.readonly-start { margin: 0 0 4px; font-size: 13.5px; }
.readonly-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.readonly-step { border: 0; border-radius: var(--radius-md); background: var(--surface); padding: 10px 14px; }
.readonly-step h3, .readonly-heading { margin: 0 0 4px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.readonly-heading { margin-top: 14px; }
.readonly-prompt { margin: 0 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; color: var(--text); }
.readonly-ways, .readonly-variables { margin: 6px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-2); display: flex; flex-direction: column; gap: 2px; }
.access-modes, .access-people { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.access-people legend { font-size: 12.5px; font-weight: 500; color: var(--text-2); padding: 0; margin-bottom: 4px; }
.access-choice { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); }
.access-save { align-self: flex-start; }
.access-move { margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--bg); }
.access-move h3 { margin: 0 0 4px; font-size: 13.5px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field-label { font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.field .hint { font-size: 12px; color: var(--text-3); }
.field-error { font-size: 12.5px; color: var(--red); display: flex; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.step-card { border: 0; border-radius: var(--radius-lg); background: var(--surface); margin-bottom: 8px; }
.step-card.start { border-color: var(--line-strong); }
.step-card.has-error { border-color: color-mix(in srgb, var(--red) 55%, var(--line)); }
.step-card-head { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; }
.step-card.open .step-card-head { border-bottom: 2px solid var(--bg); }
.step-card.open { border-color: var(--line-strong); box-shadow: var(--shadow-1); margin: 12px 0; }
/* The header's main part is one button: it opens this step and closes the others. */
.step-toggle { all: unset; box-sizing: border-box; flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 8px;
  border-radius: var(--radius-md); cursor: pointer; }
.step-toggle:hover { background: var(--surface-2); }
.step-toggle:focus-visible { box-shadow: var(--focus-ring); }
.step-toggle .chev { display: inline-flex; color: var(--text-3); transition: transform 0.15s; }
.step-card.open .step-toggle .chev { transform: rotate(90deg); }
.step-toggle .edge-count { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.step-toggle .issue-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .step-toggle .chev { transition: none; } }
.step-card-head .no { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 18px; }
.step-card-head .ttl { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-card-head .sid { font-size: 11.5px; color: var(--text-3); }
.step-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.edges { display: flex; flex-direction: column; gap: 8px; }
.edge-row-error { grid-column: 1 / -1; margin-top: -2px; }
/* Step selects: the chosen title truncates, the chevron stays. */
.step-select-trigger { min-width: 0; gap: 6px; }
.step-select-trigger > :not(svg) { min-width: 0; overflow: hidden; flex: 1; }
.step-select-trigger > svg { flex-shrink: 0; }
.step-select-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.edges-head { display: flex; align-items: center; gap: 8px; }
.edges-head .sf-head { flex: 1; }
/* Placeholders read as placeholders, never as a real value: muted, italic, in the text face even in code inputs. */
.editor-form :is(input, textarea)::placeholder { color: var(--placeholder); opacity: 1; font-style: italic; font-family: var(--sans); }
/* Condition help: a toggle beside "Add edge" (and a "?" on the column header), the help itself under it. */
.help-toggle { all: unset; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-3); cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm); }
.help-toggle:hover, .help-toggle[aria-expanded="true"] { color: var(--text); }
.help-toggle:focus-visible { box-shadow: var(--focus-ring); }
.cond-help { border: 0; border-radius: var(--radius-md); background: var(--surface-2); padding: 12px 14px; font-size: 12.5px;
  color: var(--text-2); display: flex; flex-direction: column; gap: 8px; }
.cond-help p { margin: 0; line-height: 1.55; }
.cond-help b { color: var(--text); font-weight: 600; }
.cond-help code { background: var(--surface-3); padding: 1px 5px; border-radius: 4px; color: var(--text); font-size: 12px; }
.cond-help dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; }
.cond-help dt { color: var(--text-3); }
.cond-help dd { margin: 0; }
.cond-examples { display: flex; flex-wrap: wrap; gap: 6px; }
.var-row { display: grid; grid-template-columns: minmax(120px, 1fr) 140px minmax(120px, 1fr) auto; gap: 8px; align-items: start; }
.versions { list-style: none; margin: 0; padding: 0; }
.versions li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 2px solid var(--bg); }
.versions li:first-child { border-top: none; }
.versions .vno { font-weight: 600; min-width: 36px; font-variant-numeric: tabular-nums; }
.versions .vmeta { flex: 1; color: var(--text-3); font-size: 13px; }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--radius-sm); font-size: 11.5px; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.tag.accent { background: var(--surface-3); color: var(--text); }


/* ── Connect ChatGPT ── */
.url-box { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-2); }
.url-box code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13.5px; color: var(--text); }
ol.howto { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; }
ol.howto > li { counter-increment: step; position: relative; padding: 12px 0 12px 40px; border-top: 1px solid var(--line); color: var(--text-2); }
ol.howto > li:first-child { border-top: none; }
ol.howto > li::before { content: counter(step); position: absolute; left: 0; top: 11px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--text-2); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
ol.howto b { color: var(--text); font-weight: 600; }
ol.howto code { background: var(--surface-3); padding: 1px 5px; border-radius: 4px; color: var(--text); overflow-wrap: anywhere; }

/* ── Static account pages (Identity, consent): plain HTML forms on the same tokens ── */
.auth { flex: 1; display: grid; place-items: start center; padding: 56px 16px; }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-1); }
.auth-card.wide { max-width: 520px; }
:is(.auth-card, .auth-form) h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; }
:is(.auth-card, .auth-form) .lede { color: var(--text-3); margin: 0 0 20px; }
:is(.auth-card, .auth-form) .foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
/* Sign-in and register: the form on the left, what Pathista is (with a real run) on the right; stacked on phones. */
.auth-split { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); background: var(--surface); }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 56px 32px; }
.auth-form { width: 100%; max-width: 380px; }
.auth-form h1 { font-size: 26px; letter-spacing: -0.02em; margin-bottom: 6px; }
.form-stack { display: flex; flex-direction: column; gap: 14px; }
.form-stack .field > label { color: var(--text-2); }
.input, .form-control {
  width: 100%; height: 36px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  transition: border-color 0.12s, box-shadow 0.12s;
}
textarea.form-control, textarea.input { height: auto; min-height: 80px; padding: 8px 10px; }
.input:focus, .form-control:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.input:disabled, .form-control:disabled { background: var(--surface-3); color: var(--text-3); }
.input.invalid, .form-control.invalid { border-color: var(--red); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.check input { width: 16px; height: 16px; accent-color: var(--brand); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.btn:hover { background: var(--surface-3); text-decoration: none; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: color-mix(in srgb, var(--brand) 88%, #000); border-color: transparent; }
.btn-danger, .btn-outline-danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, var(--line-strong)); background: var(--surface); }
.btn-danger:hover { background: var(--red-soft); border-color: var(--red); }
.btn-link { border-color: transparent; background: none; color: var(--text); padding: 0 4px; height: auto; }
.btn-outline-secondary { background: var(--surface); }
.btn-lg { height: 40px; font-size: 14px; }
.w-100 { width: 100%; }
.btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.text-danger, .validation-message { color: var(--red); font-size: 12.5px; }
.validation-errors { margin: 0; padding: 10px 12px; list-style: none; border: 1px solid color-mix(in srgb, var(--red) 35%, var(--line)); background: var(--red-soft); border-radius: var(--radius-sm); color: var(--red); font-size: 13px; }
.text-secondary { color: var(--text-3); }
.text-success { color: var(--green); }
.alert { padding: 10px 12px; border-radius: var(--radius-sm); border: 0; background: var(--surface-2); color: var(--text-2); font-size: 13.5px; margin-bottom: 14px; }
.alert-success { border-color: color-mix(in srgb, var(--green) 35%, var(--line)); background: var(--green-soft); color: var(--text); }
.alert-danger { border-color: color-mix(in srgb, var(--red) 35%, var(--line)); background: var(--red-soft); color: var(--text); }
.alert-warning { border-color: color-mix(in srgb, var(--amber) 35%, var(--line)); background: var(--amber-soft); color: var(--text); }
.alert-info { border-color: transparent; background: var(--surface-3); color: var(--text); }
.mb-3 { margin-bottom: 14px; }
.mt-2 { margin-top: 8px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
/* The template's Bootstrap grid and floating labels, kept for the less-visited Identity pages: stacked, label above. */
.row { display: flex; flex-wrap: wrap; gap: 24px; }
.row > [class*="col-"] { flex: 1 1 320px; min-width: 0; }
.form-floating { display: flex; flex-direction: column-reverse; gap: 6px; }
.form-floating > label { font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.form-floating > .form-control::placeholder { color: transparent; }
.form-label { font-size: 13px; color: var(--text-2); }
.input-group { display: flex; gap: 6px; align-items: center; }
.input-group-text { color: var(--green); font-weight: 700; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.table th { color: var(--text-3); font-weight: 500; font-size: 12.5px; }
.list { padding-left: 18px; }
.recovery-code { font-family: var(--mono-font); }

/* Account area: sections on the left, the page on the right. */
.account-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
.account-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.account-nav a { display: block; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; font-size: 13.5px; }
.account-nav a:hover { background: var(--surface-3); color: var(--text); }
.account-nav a.active { background: var(--surface-3); color: var(--text); font-weight: 500; }
.account-page { background: var(--surface); border: 0; border-radius: var(--radius-lg); padding: 24px; min-width: 0; }
.account-page h3, .account-page h4 { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
.account-page p { color: var(--text-2); margin: 0 0 12px; }
.account-page .form-stack, .account-page form { max-width: 440px; }
/* In the account area the accent is kept for a form's one save (the template's large submit); every other btn-primary there is the bar's quiet outline. */
:root .account-page .btn-primary:not(.btn-lg) { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
:root .account-page .btn-primary:not(.btn-lg):hover { background: var(--surface-3); }
.account-page .btn.w-100 { width: auto; }
.account-page .btn-lg { height: 36px; font-size: 13.5px; }
.account-page table form { max-width: none; }
/* Company page: long e-mail addresses wrap inside their cell, the quiet icon buttons keep their own column; nothing scrolls sideways. */
.company-table td { overflow-wrap: anywhere; min-width: 0; vertical-align: middle; }
/* The column names of the member and invitation tables are for a screen reader only: the rows speak for themselves on screen. */
.company-table .sr-only-head { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* A company name is up to 200 characters with no space to break at (company-members-and-invitations AC26): wherever a page prints it, it wraps instead of scrolling the page. */
.page-note, .alert, .admin-confirm p, .plan-card-lead, .company-form { overflow-wrap: anywhere; }
/* The join refusal's way out reads as a link inside its hint: quiet, underlined, on the line of the sentence. */
.page-note .join-signout-link { color: var(--text); text-decoration: underline; text-underline-offset: 3px; min-height: 0; min-width: 0; line-height: inherit; vertical-align: baseline; }
.company-table td.actions-cell { white-space: nowrap; width: 1%; }
/* Only the e-mail cell breaks anywhere; a role is never split inside a word. */
.company-table td:nth-child(2) { white-space: nowrap; overflow-wrap: normal; }
/* A pending invitation's expiry sits on one line under its address. */
.company-table .row-sub { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow-wrap: normal; }
/* Links inside running text are told apart by more than colour (axe link-in-text-block); inactive tabs keep a readable grey. */
.getting-started-note a, .rail-tip a, .copy-status a { text-decoration: underline; }
[role="tab"][aria-selected="false"] { color: var(--text-2); }
/* Company runs: "Started by" holds a whole e-mail address, which wraps instead of widening the page. */
.company-run-rows .row-sub { white-space: normal; overflow-wrap: anywhere; }
/* Personal | Company switch above the workflow lists (members only). */
.space-switch { display: flex; gap: 4px; padding: 8px 16px 0; font-size: 13.5px; }
.space-switch a { padding: 5px 12px; border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; }
.space-switch a:hover { background: var(--surface-3); color: var(--text); }
.space-switch a[aria-current="page"] { background: var(--surface-3); color: var(--text); font-weight: 500; }
.copy-status { margin: 0 20px 12px; font-size: 13px; }
.copy-status .copy-link { margin-left: 8px; white-space: nowrap; text-decoration: underline; }
@media (max-width: 760px) { .copy-status { margin: 0 16px 12px; } }
.company-form .form-control, .company-form .form-select { max-width: 100%; }
@media (max-width: 480px) {
  .company-table th, .company-table td { padding: 8px 6px; }
}

/* Consent */
.consent-scopes { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.consent-scopes li { display: flex; gap: 10px; align-items: baseline; color: var(--text-2); }
.consent-scopes li::before { content: '✓'; width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; transform: translateY(2px); }
.client-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.client-head .pair { display: flex; align-items: center; gap: 6px; color: var(--text-3); }
.client-badge { width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text-2); }
.btn-row { display: flex; gap: 8px; }
.btn-row .btn { flex: 1; }

/* Blazor */
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; padding: 10px 16px; background: var(--amber-soft); color: var(--text); border-top: 1px solid var(--line); font-size: 13px; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }
.blazor-error-boundary { background: var(--red-soft); color: var(--text); padding: 12px 16px; border-radius: var(--radius-sm); }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ── Narrow windows: stack, the page scrolls ── */
@media (max-width: 1100px) {
  .run-page { height: auto; }
  .run-body.stacked { height: auto !important; flex-direction: column !important; }
  .run-pane { flex: none !important; min-width: 0 !important; max-width: none !important; height: auto; overflow: visible !important; }
  .run-body .pane-handle { display: none; }
  .graph-pane { min-height: 560px; max-height: 80vh; }
  .run-body .col { overflow: visible; border-left: none; border-top: 2px solid var(--bg); }
}
@media (max-width: 900px) {
  .editor { height: auto !important; flex-direction: column !important; }
  .editor-pane { flex: none !important; min-width: 0 !important; max-width: none !important; height: auto; overflow: visible !important; }
  .editor .pane-handle { display: none; }
  .editor-form { height: auto; overflow: visible; }
  .editor-head { position: static; }
  .editor-preview { position: static; height: auto; border-right: none; border-bottom: 2px solid var(--bg); }
  .editor-preview .graph-wrap { height: 420px; flex: none; }
  .graph-pane { min-height: 320px; max-height: 70vh; }
  .account-shell { grid-template-columns: 1fr; gap: 16px; }
  .auth-split { grid-template-columns: 1fr; }
  .auth-main { padding: 40px 16px 32px; }
  .account-nav { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  :root { --work-gutter: 16px; }
  /* Phone top bar: one row (brand, where you are, plan, account, theme), the sections on a second row that scrolls with a fade at its edge. */
  .topbar { flex-wrap: wrap; padding: 0 12px; column-gap: 8px; }
  .topbar .brand { height: 48px; }
  .mainnav, .mainnav.guest { order: 10; flex-basis: 100%; overflow-x: auto; margin: 0 -12px; padding: 0 12px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
  /* The fade marks the side where more sections hide (js/theme.js sets more-l / more-r on [data-scroll-tabs], as for the account nav). */
  .mainnav.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .mainnav.more-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); }
  .mainnav.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
  .mainnav a { height: 40px; scroll-snap-align: start; }
  .mainnav::-webkit-scrollbar { display: none; }
  /* A visitor's five short links fit one row at 360 px and up: tighter links, no tall second row, so the whole bar is two 40 px rows, 80 px, with 40 px tap targets kept (spec logbook-design-system AC21). */
  .topbar:has(.mainnav.guest) { row-gap: 0; }
  .topbar:has(.mainnav.guest) .brand { height: 40px; }
  .mainnav.guest { justify-content: space-between; padding-bottom: 0; }
  .mainnav.guest a { height: 40px; padding-left: 6px; padding-right: 6px; }
  /* A signed-in person's seven sections do not fit one row: they wrap onto a second one (two 40 px rows), none cut and no scroll track (spec logbook-design-system AC24). */
  .mainnav:not(.guest) { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; -webkit-mask-image: none; mask-image: none; padding-bottom: 6px; }
  .mainnav:not(.guest) a { padding-left: 8px; padding-right: 8px; }
  .nav-trial-long { display: none; }
  .topbar .icon-btn { width: 40px; height: 40px; }
  .account { border-left: none; padding-left: 0; margin-left: 0; }
  .crumbs a, .crumbs span { max-width: 40vw; }
  .page { padding: 16px 16px 40px; }
  .run { padding: 14px 16px 2px; row-gap: 12px; grid-template-columns: minmax(0, 1fr); }
  .run .actions { grid-column: 1; grid-row: 3; justify-self: start; padding-bottom: 10px; }
  .state-obj .word { font-size: 28px; }
  .state-obj .sub { max-width: 60vw; }
  /* A long word (an account's address in the admin strip) wraps instead of pushing the page sideways. */
  .state-obj .word { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
  /* Phones: the facts in two columns under the pill, the actions on their own line (wrapping, never cut). */
  .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  .facts > .fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .facts > .fact:not(.hide-sm):nth-child(odd):not(:has(~ .fact:not(.hide-sm))) { grid-column: 1 / -1; } /* the last fact shown, when alone in its row (Chat and Deleted are hidden after it) */
  .fact, .fact.name { max-width: 100%; min-width: 0; border-radius: 0; }
  .run .actions { flex-wrap: wrap; flex-shrink: 1; min-width: 0; }
  .editor-form { padding: 0 16px 48px; }
  .editor-head { margin: 0 -16px 16px; padding: 12px 16px; }
  .var-row { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .hide-sm { display: none !important; }
  .show-sm { display: inline; }
  .auth { padding: 24px 16px; }
  .auth-card { padding: 20px; }
}
@media (max-width: 480px) {
  .brand-name { display: none; }
  .crumbs > :first-child::before { display: none; }
}

/* Error toasts: calm surface, red edge and icon (see ToastExtensions.Problem). */
.toast-problem { background: var(--surface); color: var(--text); border: 1px solid color-mix(in srgb, var(--red) 45%, var(--line)); box-shadow: var(--shadow-2); }
.toast-problem svg { color: var(--red); }

/* Editor: a step's problem line with its one-click fix ("Connect from …"). */
.step-problem { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* A phone graph too wide to fit readably: the zoom tools stand out so the reader finds them. */
.zoom-hint .graph-tools { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent), var(--shadow-2); }
.zoom-hint .graph-tools .zoom { color: var(--brand-text); font-weight: 600; }
@media (max-width: 480px) { .graph-pane mp-graph { padding: 8px 24px 52px; } .graph-pane { padding: 12px; } }
/* Runs list: the whole row opens the run; the workflow name stays the real, focusable link. */
.row-links tbody tr { position: relative; cursor: pointer; }
.row-links a.cell-title::after { content: ''; position: absolute; inset: 0; }
.row-links a.cell-title:focus-visible { box-shadow: none; outline: none; }
.row-links tbody tr:focus-within { box-shadow: inset 0 0 0 2px var(--brand); }
@media (max-width: 480px) { .zoom-hint .graph-tools { top: 12px; bottom: auto; } }

/* ── Page grammar (every page): the strip under the top bar, then flat full-bleed rails split by 1 px lines ──
   The dashboard has no floating cards on a grey page: surfaces reach the window's edges, sections are a head
   "Name  count" over dense rows with dot+word status and muted meta on the right. */
.main { background: var(--bg); }
.strip { position: relative; }
.state-obj h1.word { margin: 0; }
.state-obj.warn .dot { background: var(--amber); }
.sheet { flex: 1; min-width: 0; background: var(--bg); display: flex; flex-direction: column; gap: 26px; padding: 26px var(--page-gutter) 48px; }
/* A rail is a head on the Ledger over its rows: every row is its own Leaf strip, 2 px apart (nothing is a card). */
.sheet > .rail { background: none; }
.sheet.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 28px; align-items: start; }

.side-rail { min-width: 0; }
.sheet .rail-head { padding: 0 0 8px; }
.rail-head h2 { font-size: 18px; font-weight: 650; font-variation-settings: "wdth" 85; letter-spacing: -0.005em; margin: 0; }
.rail-head .count { font-size: 15px; }
.rail-head .tail { font-size: 13.5px; }
.link-quiet { color: var(--text-2); font-size: 12.5px; text-decoration: none; }
.link-quiet:hover { color: var(--text); text-decoration: underline; }
.empty-state.left { text-align: left; padding: 14px 16px; background: var(--surface); border-radius: var(--radius-sm); }
.empty-state.left p { margin: 0; }

/* Dense rows: one line of meaning, a muted second line, hover highlight, 1 px lines between. */
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rows > li { display: grid; align-items: center; column-gap: 20px; padding: 11px 14px 11px 12px; min-height: 52px; position: relative; min-width: 0;
  background: var(--surface); border-radius: var(--radius-sm); font-size: 14px; }
.rows > li:hover { background: var(--surface-3); }
.row-cols { display: grid; column-gap: 20px; padding: 0 14px 6px 12px; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.row-main { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.row-title { font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-title:hover { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.row-sub { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { font-size: 13px; color: var(--text-2); white-space: nowrap; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.row-meta.soon { color: var(--text-2); }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.row-links a.row-title::after { content: ''; position: absolute; inset: 0; }
.row-links a.row-title:focus-visible { box-shadow: none; outline: none; }
.row-links li:focus-within { box-shadow: inset 0 0 0 2px var(--brand); }
.row-links li { cursor: pointer; }

/* Workflows: name · the step chain (start first) · runs · actions. */
.wf-grid { grid-template-columns: minmax(200px, 1fr) minmax(0, 1.7fr) 170px 64px; }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; height: 1.6em; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 12.5px; line-height: 1.6; color: var(--text-2); }
.chain-n { flex-shrink: 0; font-size: 12px; color: var(--text-3); margin-right: 6px; min-width: 52px; }
.chain .dn-start { margin: 0; font-size: 10px; line-height: 16px; padding: 0 6px; flex-shrink: 0; }
.chain-first { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; flex: 0 1 auto; }
.chain-item { display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 100%; }
.chain-first .chain-step { flex: 0 1 auto; min-width: 0; }
.chain-step { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* the first step is always shown (an ellipsis if it must); each later step travels with the arrow before it and wraps out of sight when it does not fit (the title lists them all) */
.chain-arrow { color: var(--text-3); flex-shrink: 0; }
.chain-more { color: var(--text-3); flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* Guided start (/start): a Blazor Blueprint stepper (BbStepper) as a wizard. The markers take the accent (--primary is
   the brand); finished steps are green like everything done in a run, and can be clicked to look back. */
.start-wizard { padding-bottom: 8px; }
.onboarding-stepper { padding: 4px 20px 0; }
.onboarding-stepper-indicator { padding: 8px 0 18px; border-bottom: 1px solid var(--line); }
.onboarding-stepper-indicator li > button > span:first-child { background: var(--green); border-color: var(--green); color: #fff; }
.onboarding-stepper-indicator li:has(> button) > span[aria-hidden="true"] { background: var(--green); }
.onboarding-stepper-indicator li > button:hover > span:last-child > span:first-child { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.onboarding-stepper-indicator li[aria-current="step"] > span > span:last-child > span:first-child { color: var(--text); font-weight: 600; }
.onboarding-stepper-content { margin-top: 18px !important; }
.onboarding-stepper .step-body { color: var(--text-2); font-size: 13.5px; max-width: 980px; padding-bottom: 12px; }
.onboarding-stepper .step-body > p { margin: 0 0 12px; }
.onboarding-stepper .step-body > p a { text-decoration: underline; text-underline-offset: 3px; } /* a link inside the step text must not rely on colour alone (axe link-in-text-block) */
.onboarding-stepper .step-body > .url-box { max-width: 720px; margin-bottom: 16px; }
/* The three ways to a first workflow: equal option cards side by side, stacked on phones (also on the empty /workflows). */
.workflow-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.workflow-way { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 16px; border: 0; border-radius: var(--radius-md);
  background: var(--surface); min-width: 0; }
.workflow-way h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.workflow-way p { margin: 0; flex: 1; color: var(--text-2); font-size: 13px; }
.workflow-way .sentence-box { align-self: stretch; }
/* Assistant tabs: a quiet segmented row; the selected one in the accent text, underlined. */
.assistant-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 0; overflow: visible; }
.assistant-tab { font: inherit; font-size: 13.5px; color: var(--text-2); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 8px 12px; cursor: pointer; white-space: nowrap; }
.assistant-tab:hover { color: var(--text); }
.assistant-tab.selected { color: var(--text); border-bottom-color: var(--text); font-weight: 600; }
.assistant-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: var(--radius-sm); }
.sentence-box .sentence { flex: 1; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.setup-steps { margin-bottom: 10px; }
.setup-steps[hidden] { display: none; }
.setup-steps > .rail + .rail { border-top: 2px solid var(--bg); }
.setup-steps .rail-body { padding: 0 0 6px; max-width: none; }
.sheet .setup-steps .rail-head { padding-left: 0; padding-right: 0; }
/* The ChatGPT setup film (TutorialVideo): beside the steps on wide screens so they stay above the fold, first on phones. A facade: poster + play, the iframe replaces it on click. */
.rail-body.has-tutorial { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); column-gap: 24px; align-items: start; }
.rail-body.has-tutorial > .tutorial { grid-column: 2; grid-row: 1 / span 2; margin-top: 12px; }
.rail-body.has-tutorial > ol.howto { grid-column: 1; grid-row: 1; }
.rail-body.has-tutorial > p { grid-column: 1; grid-row: 2; }
.tutorial { margin: 0; }
.tutorial-poster { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow: hidden; background: var(--surface-3); cursor: pointer; }
.tutorial-poster[hidden] { display: none; }
.tutorial-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tutorial-poster:hover .tutorial-play { transform: translate(-50%, -50%) scale(1.06); }
.tutorial-poster:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tutorial-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: var(--brand); color: #1f1206; box-shadow: 0 2px 10px rgb(0 0 0 / 0.3); transition: transform .12s; }
.tutorial-play svg { margin-left: 2px; }
.tutorial-length { position: absolute; right: 8px; bottom: 8px; padding: 1px 6px; border-radius: 4px; background: rgb(0 0 0 / 0.75); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.tutorial-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: var(--radius-md); background: #000; }
.tutorial figcaption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; color: var(--text-2); }
.tutorial figcaption a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) {
  .rail-body.has-tutorial { display: block; }
  .rail-body.has-tutorial > .tutorial { margin: 12px 0; max-width: 520px; }
}

.start-done { margin-top: 12px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--green) 35%, var(--line)); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--green) 8%, var(--surface)); }
.start-done h3 { font-size: 14px; font-weight: 600; margin: 0 0 4px; color: var(--text); }
.start-done p { margin: 0; color: var(--text-2); font-size: 13.5px; }
.getting-started-note { margin: 0 20px 12px; font-size: 13px; }

/* Fitted diagram thumbnails (js/graph.js, data-fit): the whole graph inside a fixed box on the diagram background. */
.graph-thumb { height: 190px; padding: 12px; background: var(--diagram-bg); display: flex; overflow: hidden; pointer-events: none; }
.graph-thumb mp-graph { display: block; flex: 1; min-width: 0; min-height: 0; }
.graph-thumb mp-graph svg { display: block; }
.template-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600;
  color: var(--text); background: var(--surface-3); white-space: nowrap; }

/* Templates: a gallery of cards (diagram, name, description, steps, Add). 3 columns wide, 2 medium, 1 on phones. */
.template-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 4px 20px 20px; }
.template-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden;
  background: var(--surface); }
.template-card .graph-thumb { height: 220px; border-bottom: 1px solid var(--line); }
.template-card-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.template-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.template-card-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.template-description { margin: 0; flex: 1; font-size: 13px; color: var(--text-2); }
.template-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; }
.template-card-foot form { margin: 0; }
.template-alert { margin: 0 20px 12px; }

/* Empty /workflows: a welcome, the three ways and a featured template. */
.workflows-welcome { display: flex; flex-direction: column; gap: 16px; padding: 4px 20px 24px; }
.welcome-head h3 { margin: 0 0 4px; font-size: 18px; font-weight: 600; color: var(--text); }
.welcome-head p { margin: 0; max-width: 70ch; font-size: 13.5px; color: var(--text-2); }
.featured-template { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.featured-template .graph-thumb { border-right: 1px solid var(--line); }
.featured-template-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 16px 20px; }
.featured-template-text h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.featured-template-text p { margin: 0; font-size: 13px; color: var(--text-2); }

@media (max-width: 1100px) {
  .template-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .onboarding-stepper { padding: 4px 16px 0; }
  /* Four titles do not fit one line on a phone: they wrap under their markers, smaller, and the connectors shrink. */
  .onboarding-stepper-indicator li > * > span:last-child > span:first-child { white-space: normal; text-align: center; font-size: 11.5px; line-height: 1.25; max-width: 76px; }
  .onboarding-stepper-indicator li > span[aria-hidden="true"] { margin-left: 2px; margin-right: 2px; }
  /* The end labels align with the outer edges instead of overhanging them (a centred "Finish it" sticks out past its marker). */
  .onboarding-stepper-indicator li:first-child > :first-child { align-items: flex-start; }
  .onboarding-stepper-indicator li:first-child > :first-child > span:last-child { align-items: flex-start; }
  .onboarding-stepper-indicator li:first-child > :first-child > span:last-child > span:first-child { text-align: left; }
  .onboarding-stepper-indicator li:last-child > :first-child { align-items: flex-end; }
  .onboarding-stepper-indicator li:last-child > :first-child > span:last-child { align-items: flex-end; }
  .onboarding-stepper-indicator li:last-child > :first-child > span:last-child > span:first-child { text-align: right; }
  .sheet .setup-steps .rail-head { flex-wrap: wrap; }
  .workflow-ways { grid-template-columns: minmax(0, 1fr); }
  .assistant-tab { padding: 8px 10px; }
  .getting-started-note { margin: 0 16px 12px; }
  .template-gallery { grid-template-columns: minmax(0, 1fr); padding: 4px 16px 16px; }
  .template-alert { margin: 0 16px 12px; }
  .workflows-welcome { padding: 4px 16px 20px; }
  .featured-template { grid-template-columns: minmax(0, 1fr); }
  .featured-template .graph-thumb { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* Runs: status mark · workflow · step · the progress bar · times. */
.run-grid { grid-template-columns: 28px minmax(200px, 1.1fr) minmax(140px, 1fr) 190px 100px 80px 64px; }
/* The dashboard: mark · run · its tape · what to look at (the step, the reason, the result) · the way in. */
.dash-grid { grid-template-columns: 28px minmax(0, 1.3fr) 190px minmax(0, 1fr) 20px; }
.rows > li.dash-grid { column-gap: 14px; min-height: 60px; }
.dash-rows .row-step { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.35; }
.dash-rows .row-step .k { display: block; margin: 0; font-size: 13px; color: var(--text-2); }
.dash-rows li.stalled .row-step .k { color: var(--red); font-weight: 600; }
.rail-more { margin: 8px 0 0; padding: 0; font-size: 13.5px; color: var(--text-2); }
/* The mark at the start of a run row, and the run's tape (the landing's trace in small): shape tells the state, colour only helps. */
.glyph { width: 22px; height: 22px; display: grid; place-items: center; }
.glyph svg { display: block; }
.glyph .ring { fill: none; stroke: var(--brand); stroke-width: 3; }
.glyph .fill { fill: var(--brand); }
.glyph .bar { fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; }
.glyph .mark { fill: none; stroke: var(--surface); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.glyph.stalled .ring { stroke: var(--red); }
.glyph.done .fill { fill: var(--green); }
.glyph.stopped .fill { fill: var(--text-2); }
.tape { display: block; min-width: 0; }
.tape svg { display: block; overflow: visible; max-width: 100%; }
.tape .tick { fill: var(--surface-3); }
.rows > li:hover .tape .tick { fill: var(--surface); }
.tape .seen { fill: var(--text); }
.tape .line, .tape .loop { fill: none; stroke: var(--text); stroke-width: 1.5; }
.tape .now { fill: var(--surface); stroke: var(--brand); stroke-width: 2.5; }
.tape[data-state="idle"] .now { stroke: var(--red); }
.tape[data-state="stopped"] .now { stroke: var(--text-2); }
.tape[data-state="finished"] .now { fill: var(--green); stroke: var(--green); }
.tape-label { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-2); }
/* Above the row's stretched link, so Delete does not open the run. */
.row-links .row-actions { position: relative; z-index: 1; }
/* Runs: filter by workflow (?workflow=<id>, linked from the workflow pages). */
.list-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 20px 4px; }
.list-toolbar .filter { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.list-toolbar .filter .k { font-size: 12px; color: var(--text-3); }
.list-more { display: flex; justify-content: center; padding: 14px 20px; border-top: 2px solid var(--bg); }
.filter-select { height: 32px; min-width: 220px; max-width: min(420px, 100%); padding: 0 32px 0 10px; font: inherit; font-size: 13px; color: var(--text);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); appearance: none; cursor: pointer; }
.filter-select:hover { border-color: var(--text-3); }
.filter-select:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.filter-clear { font-size: 13px; color: var(--text-2); }
.status-link, .fact-link { color: inherit; text-decoration: none; }
.status-link:hover, .fact-link:hover { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
@media (max-width: 760px) { .list-toolbar { padding: 12px 16px 4px; } .filter-select { min-width: 0; flex: 1; } .list-toolbar .filter { flex: 1; } }
/* The row's delete: a quiet trash icon that shows on hover or focus of its row, red when aimed at. */
.row-delete { color: var(--text-3); opacity: 0; transition: opacity .12s ease, color .12s ease, background-color .12s ease; }
.rows > li:hover .row-delete, .rows > li:focus-within .row-delete, .row-delete:focus-visible { opacity: 1; }
.row-delete:hover, .row-delete:focus-visible { color: var(--red); background: var(--red-soft); border-color: transparent; }
@media (hover: none) { .row-delete { opacity: 1; } }
.rows > li.run-grid { column-gap: 16px; }
.row-cols.run-grid { column-gap: 16px; }
.rows > li.funnel-grid { grid-template-columns: 6.5rem minmax(7rem, 1fr) repeat(5, 5.5rem); column-gap: 16px; font-variant-numeric: tabular-nums; }
.funnel-grid > span { white-space: nowrap; color: var(--text-2); text-align: right; }
.funnel-grid > :nth-child(-n+2) { text-align: left; }
.rows > li.funnel-head { padding-top: 6px; padding-bottom: 6px; border-top: 0; font-size: 12px; color: var(--text-2); }
.rows > li.funnel-head:hover { background: transparent; }
@media (max-width: 760px) {
  .rows > li.funnel-grid { grid-template-columns: 1fr 1fr; row-gap: 4px; column-gap: 12px; }
  .rows > li.funnel-head { display: none; }
  .funnel-grid > span { text-align: left; }
  .funnel-grid > span[data-label]::before { content: attr(data-label) " "; font-size: 12px; opacity: .75; }
}
/* The funnel page's charts (docs/specs/funnel-metrics.md): inline SVG, no script. One accent (--brand) and neutral steps, so dark mode
   follows the tokens. Series: the accent, then three neutral lightness steps, then a quiet grey for "Other"; a 1.5px surface gap
   separates stacked segments. Every chart has its numbers in a table next to it. */
.funnel-page .rail-body { max-width: none; }
.window-switch { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; padding: 14px 20px 0; font-size: 13px; }
.window-switch a { text-decoration: underline; text-underline-offset: 3px; color: var(--text-2); }
.window-switch a[aria-current="page"] { color: var(--text); font-weight: 600; text-decoration-color: var(--text); text-decoration-thickness: 2px; }
.chart-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.chart-grid > .rail + .rail { border-top: 0; border-left: 2px solid var(--bg); }
.chart-note { padding: 0 20px 14px; margin: 0; font-size: 12.5px; max-width: 90ch; }
.chart-card + .chart-card, .chart-grid + .chart-card, .chart-card + .chart-note { border-top: 2px solid var(--bg); }
.chart { display: block; width: 100%; height: 140px; }
.chart-bar { stroke: var(--surface); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chart-bar.s1 { fill: var(--brand); } .chart-bar.s2 { fill: var(--series-2); } .chart-bar.s3 { fill: var(--series-3); } .chart-bar.s4 { fill: var(--series-4); }
.chart-bar.s-other, .chart-bar.w-signed { fill: var(--series-other); }
.chart-bar.w-activated { fill: var(--brand); } .chart-bar.w-connected { fill: var(--series-3); }
.chart-bar.chart-zero { fill: var(--line-strong); stroke: none; }
.axis-x { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); margin-top: 4px; font-variant-numeric: tabular-nums; }
.week-labels { display: flex; list-style: none; margin: 4px 0 0; padding: 0; }
.week-labels li { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.week-labels b { color: var(--text-2); font-weight: 600; }
.week-labels span, .week-labels b { white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; margin: 10px 0; padding: 0; font-size: 12.5px; color: var(--text-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend-n { color: var(--text-3); font-variant-numeric: tabular-nums; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.swatch.s1, .swatch.w-activated { background: var(--brand); } .swatch.s2 { background: var(--series-2); } .swatch.s3, .swatch.w-connected { background: var(--series-3); }
.swatch.s4 { background: var(--series-4); } .swatch.s-other, .swatch.w-signed { background: var(--series-other); }
.stage-rows { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.stage-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 2.2rem 2.8rem minmax(0, 9.5rem); align-items: center; gap: 12px; font-variant-numeric: tabular-nums; }
.stage-name { color: var(--text); }
.stage-count { text-align: right; color: var(--text); }
.stage-pct { color: var(--text-2); text-align: right; }
.stage-drop { font-size: 12px; color: var(--text-3); }
.stage-track { display: block; width: 100%; height: 14px; }
.stage-track .track { fill: var(--surface-3); }
.stage-track .fill { fill: var(--brand); }
.stage-note { margin: 4px 0 8px; color: var(--text-2); font-size: 13px; }
.source-rows { list-style: none; margin: 0 0 8px; padding: 0; }
.source-row { display: grid; grid-template-columns: minmax(9rem, 1.1fr) repeat(3, minmax(0, 1fr)); align-items: center; gap: 8px 20px; padding: 9px 0; border-top: 2px solid var(--bg); font-variant-numeric: tabular-nums; }
.source-row:first-child { border-top: 0; }
.source-n { color: var(--text-3); margin-left: 4px; }
.small-sample { font-style: normal; font-size: 11.5px; color: var(--text-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0 7px; margin-left: 6px; white-space: nowrap; }
.metric { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 2.6rem; align-items: center; gap: 8px; }
.metric-label { font-size: 12px; color: var(--text-3); }
.metric b { text-align: right; color: var(--text); font-weight: 600; }
.metric.m-conn .fill { fill: var(--series-3); } .metric.m-w2 .fill { fill: var(--series-2); }
.source-row.small .fill { opacity: .5; }
.source-row.small b { color: var(--text-2); font-weight: 400; }
.tracking-help { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 4px; max-width: 90ch; }
.tracking-link { display: inline-block; max-width: 100%; overflow-wrap: anywhere; font-family: var(--mono-font); font-size: 12.5px; color: var(--text); background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 8px; }
.link-builder { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 12px; margin: 12px 0 8px; }
.link-builder label { display: grid; gap: 3px; font-size: 12px; color: var(--text-3); }
.link-builder input, .link-builder select { font: inherit; font-size: 13.5px; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 5px 8px; min-width: 9rem; }
.table-scroll { overflow-x: auto; max-width: 100%; }
.chart-table { border-collapse: collapse; margin: 8px 0 12px; font-variant-numeric: tabular-nums; }
.chart-table th, .chart-table td { padding: 2px 16px 2px 0; text-align: left; font-weight: normal; }
.chart-table th { color: var(--text-2); font-size: 12px; }
@media (max-width: 1000px) {
  .chart-grid { grid-template-columns: minmax(0, 1fr); }
  .chart-grid > .rail + .rail { border-left: 0; border-top: 2px solid var(--bg); }
}
@media (max-width: 760px) {
  .window-switch { padding: 12px 16px 0; }
  .stage-row { grid-template-columns: 1fr 2.2rem 2.8rem; row-gap: 4px; }
  .stage-row .stage-track { grid-column: 1 / -1; grid-row: 2; }
  .stage-row .stage-drop { grid-column: 1 / -1; grid-row: 3; }
  .source-row { grid-template-columns: 1fr; gap: 6px; }
  .metric { grid-template-columns: 4.6rem minmax(0, 1fr) 2.6rem; }
  .chart-note { padding: 0 16px 14px; }
}
/* Admin users list (docs/specs/admin-panel.md): the funnel grid with a wider first column and the account tags. */
.rows > li.admin-grid { grid-template-columns: minmax(14rem, 1.7fr) 4.5rem 6rem 6rem 6rem 5.5rem 6rem 3rem; column-gap: 16px; font-variant-numeric: tabular-nums; }
.admin-grid > span { white-space: nowrap; color: var(--text-2); text-align: right; min-width: 0; }
.admin-grid > :first-child { text-align: left; white-space: normal; overflow-wrap: anywhere; }
.admin-account a { color: var(--text); }
.admin-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-size: 11px; line-height: 18px; color: var(--text-2); }
.admin-tag.warn { color: var(--text); background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 50%, var(--line-strong)); }
/* Admin beta access codes (docs/specs/beta-access.md): a form of four fields, the link shown once, and a code per row with the accounts that came in on it. */
.beta-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 12px 16px; margin-bottom: 12px; }
.beta-form .beta-note { grid-column: 1 / -1; }
.beta-notice a { text-decoration: underline; text-underline-offset: 2px; }
.beta-link { align-items: flex-start; margin-bottom: 16px; }
.beta-link-url { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 13px; }
.beta-list-title { margin: 28px 0 8px; font-size: 15px; font-weight: 600; }
.rows > li.beta-code { display: block; }
.beta-code-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.beta-code-head .admin-tag { margin-left: 0; }
.beta-code-note { overflow-wrap: anywhere; }
.beta-code-facts { margin: 4px 0 0; overflow-wrap: anywhere; }
.beta-accounts { list-style: none; margin: 8px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--line); display: grid; gap: 4px; }
.beta-accounts li { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.beta-account-email { overflow-wrap: anywhere; }
/* Admin sessions page (docs/specs/admin-panel.md, "Sessions"). */
.rows > li.session-grid { grid-template-columns: minmax(12rem, 1.5fr) minmax(10rem, 1.5fr) 6rem 8rem; column-gap: 16px; font-variant-numeric: tabular-nums; }
.session-grid > span { color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
.session-grid .sort { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.session-grid .sort:hover, .session-grid .sort:focus-visible { color: var(--text); text-decoration: underline; }
.session-verdict { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); }
.session-verdict.safe { background: var(--green-soft); }
.session-verdict.busy { background: var(--amber-soft); }
@media (max-width: 760px) {
  .rows > li.session-grid { grid-template-columns: 1fr 1fr; row-gap: 4px; column-gap: 12px; }
  .rows > li.session-grid > :first-child { grid-column: 1 / -1; }
  .session-grid > span[data-label]::before { content: attr(data-label) " "; font-size: 12px; opacity: .75; }
}
.admin-search { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.admin-search .field { flex: 0 1 auto; }
.admin-search .field:first-child { flex: 1 1 16rem; max-width: 28rem; }
.admin-search .field label { font-size: 12px; }
.admin-grid .sort-head { color: inherit; text-decoration: none; }
.admin-grid .sort-head:hover, .admin-grid .sort-head[data-sort] { color: var(--text); text-decoration: underline; }
.admin-paging { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.admin-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 12px; }
.admin-facts dt { color: var(--text-3); font-size: 12.5px; }
.admin-facts dd { margin: 0; overflow-wrap: anywhere; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.admin-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 12px; margin-top: 12px; background: var(--surface-2, var(--surface)); }
.admin-confirm > p, .admin-confirm > .field { flex: 1 1 100%; margin: 0 0 4px; }
.admin-actions + h3 { margin-top: 24px; }
@media (max-width: 760px) {
  .rows > li.admin-grid { grid-template-columns: 1fr 1fr; row-gap: 4px; column-gap: 12px; }
  .rows > li.admin-grid > :first-child { grid-column: 1 / -1; }
  .admin-grid > span { text-align: left; }
  .admin-grid > span[data-label]::before { content: attr(data-label) " "; font-size: 12px; opacity: .75; }
}
.row-step { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.row-step .k { color: var(--text-3); font-size: 12px; margin-right: 4px; }
li.current .row-step { color: var(--text); }
/* Rails beside a list: the dashboard's step list (icon · title · meta). */
.side-rail ul.steps { padding: 0; }
.side-rail ul.steps li { padding: 9px 14px 9px 12px; }
.side-rail ul.steps a.step-title { color: inherit; text-decoration: none; }
.side-rail ul.steps a.step-title:hover { text-decoration: underline; text-decoration-color: var(--line-strong); }
.side-rail ul.steps li.current { font-weight: 500; }
/* Recent runs: several can be running at once; the amber band marks the one current step of a run, so a list of runs
   keeps only the spinner (a column of amber rows read as an alarm). */
ul.steps.recent li.current { border-left-color: transparent; }
.side-rail ul.steps li:hover { background: var(--surface-3); }

@media (max-width: 1100px) {
  .sheet.two-col { grid-template-columns: minmax(0, 1fr) 300px; }
  .wf-grid { grid-template-columns: minmax(180px, 1fr) minmax(0, 1.2fr) 140px 64px; }
}
@media (max-width: 900px) {
  .sheet.two-col { grid-template-columns: minmax(0, 1fr); }
  .side-rail { border-left: none; border-top: 2px solid var(--bg); }
  .run-grid { grid-template-columns: 28px minmax(0, 1.2fr) minmax(0, 1fr) 120px 84px 60px 56px; } /* the columns shrink with the window: the row never reaches past it (spec logbook-design-system AC17) */
  .dash-grid { grid-template-columns: 28px minmax(0, 1fr) 190px 20px; }
  .dash-rows .row-step { grid-column: 2 / 4; grid-row: 2; margin-top: 6px; }
  .dash-rows .row-actions { grid-column: 4; grid-row: 1; }
}
@media (max-width: 760px) {
  .sheet { padding-inline: 16px; }
  .sheet .rail-head { padding-inline: 0; }
  .rows > li, .row-cols { padding-left: 12px; padding-right: 10px; }
  .rail-head .tail.muted { display: none; }
  .wf-grid { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .wf-rows .row-main { grid-column: 1; grid-row: 1; }
  .wf-rows .row-actions { grid-column: 2; grid-row: 1; }
  .wf-rows .chain { grid-column: 1 / -1; grid-row: 2; }
  .wf-rows .row-meta { grid-column: 1 / -1; grid-row: 3; flex-direction: row; gap: 10px; align-items: center; }
  .run-grid, .rows > li.run-grid, .dash-grid, .rows > li.dash-grid { grid-template-columns: 26px minmax(0, 1fr) auto; row-gap: 6px; column-gap: 12px; }
  .run-rows .row-main, .run-rows .row-step, .run-rows .row-progress, .run-rows .tape { grid-column: 2; }
  .dash-rows .row-step { margin-top: 0; }
  .run-rows .row-actions { grid-column: 3; grid-row: 1; align-self: start; }
  .run-rows .step-icon, .run-rows .glyph { align-self: start; }
}

/* Connect: the how-to sections as rails; the connected apps as the side rail. */
.main-rail { min-width: 0; }
.main-rail > .rail + .rail { border-top: 2px solid var(--bg); }
.main-rail > .alert { margin: 16px 20px 0; }
.rail-body { padding: 0 20px 18px; max-width: 820px; color: var(--text-2); }
.rail-body > p { margin: 0 0 12px; }
.rail-body .small, p.small { font-size: 12.5px; }
.rail-body .url-box { max-width: 720px; }
.rail-body .ctx-list.kv { padding: 0; margin: 0 0 12px; }
.rail-body .ctx-list.kv .prop { grid-template-columns: minmax(160px, 34%) 1fr; }
.rail-head .tail.status { font-size: 12.5px; }
.state-obj.ok .dot, .status.ok .dot { background: var(--green); }
.url-fact .v { max-width: 460px; }
.url-fact .mono { font-size: 13px; }
.client-badge.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 13px; }
.app-rows > li { grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 12px; }
@media (max-width: 760px) {
  .rail-body { padding: 0 16px 16px; }
  .url-fact .v { max-width: calc(100vw - 32px); }
  .rail-body .ctx-list.kv .prop { grid-template-columns: 1fr; gap: 2px; }
}

/* Account: the sections as a rail (the dashboard's step list: a 2 px accent edge on the current one), the section beside it. */
.account-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0; }
.account-rail { border-right: 2px solid var(--bg); min-width: 0; }
.account-rail .account-nav { padding: 0 0 12px; gap: 0; }
.account-rail .account-nav a { border-radius: 0; padding: 7px 20px 7px 18px; border-left: 2px solid transparent; font-size: 13.5px; color: var(--text-2); }
.account-rail .account-nav a:hover { background: var(--surface-2); color: var(--text); }
.account-rail .account-nav a.active { background: var(--surface-3); color: var(--text); font-weight: 600; }
.account-page { background: none; border: 0; border-radius: 0; padding: 16px 24px 48px; }
.account-page h3 { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; margin: 0 0 12px; }
.account-page h4 { font-size: 13.5px; font-weight: 600; margin: 24px 0 8px; }
.account-page .rail-head { padding: 0 0 8px; }
.account-page .rows { margin: 0 -24px; }
.account-page .rows > li { padding-left: 24px; padding-right: 24px; }
.account-page .empty-state.left { padding: 2px 0 12px; }
.page-note { color: var(--text-3); font-size: 12.5px; margin: 12px 0 0 !important; max-width: 70ch; }
/* A link inside a sentence is told apart by more than its colour (WCAG 1.4.1). */
.page-note a { text-decoration: underline; text-underline-offset: 2px; }
.account-page .table { max-width: 720px; }
@media (max-width: 900px) {
  .account-shell { grid-template-columns: minmax(0, 1fr); }
  .account-rail { border-right: none; border-bottom: 2px solid var(--bg); }
  .account-rail .rail-head { display: none; }
  .account-rail .account-nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding: 0 8px; scrollbar-width: none; }
  .account-rail .account-nav a { white-space: nowrap; padding: 10px 10px; border-left: 0; border-bottom: 2px solid transparent; }
  .account-rail .account-nav a.active { background: none; border-bottom-color: var(--text); }
  .account-page { padding: 16px 16px 40px; }
  .account-page .rows { margin: 0 -16px; }
  .account-page .rows > li { padding-left: 16px; padding-right: 16px; }
}

/* The template's Identity pages inside the sign-in layout: its h1 / h2 / hr / Bootstrap grid read as our title, lede and stack. */
.auth-form.identity h1, .auth-form.identity header h1 { color: var(--text); }
.auth-form.identity h2, .auth-form.identity h3 { font-size: 14px; font-weight: 400; color: var(--text-3); margin: 0 0 20px; letter-spacing: 0; }
.auth-form.identity > hr, .auth-form.identity hr:first-of-type { display: none; }
.auth-form.identity .row { display: block; }
.auth-form.identity .row > [class*="col-"] { max-width: none; }
.auth-form.identity form { display: flex; flex-direction: column; gap: 14px; }
.auth-form.identity .mb-3 { margin-bottom: 0; }
.auth-form.identity p { color: var(--text-2); margin: 0 0 14px; }
.auth-form.identity p.text-danger, .auth-form.identity [role="alert"].text-danger { font-size: 14px; }
.auth-form.consent .client-head { margin-bottom: 20px; }
.auth-form.consent .foot { font-size: 12.5px; }
.rail > .empty-state.left:first-child { padding-top: 18px; }


/* Editor steps as the dashboard's rows: full-bleed in the form column, 1 px lines between, the open step marked by a
   2 px accent edge (the dashboard's current stage), not a floating card. */
.editor-form .step-card { border: 0; border-top: 2px solid var(--bg); border-radius: 0; margin: 0 -24px; box-shadow: none; background: var(--surface); }
.editor-form .step-card:last-of-type { border-bottom: 2px solid var(--bg); }
.editor-form .step-card-head { padding: 2px 16px 2px 20px; border-left: 2px solid transparent; }
.editor-form .step-card.open { margin: 0 -24px; box-shadow: none; }
.editor-form .step-card.open .step-card-head { border-left-color: var(--text); background: var(--surface-2); border-bottom: 2px solid var(--bg); }
.editor-form .step-card.has-error .step-card-head { border-left-color: var(--red); }
.editor-form .step-card-body { padding: 14px 24px 18px 26px; border-left: 2px solid var(--text); }
.editor-form .step-card.has-error .step-card-body { border-left-color: var(--red); }
.editor-form .step-toggle:hover { background: none; }
.editor-form .step-card:not(.open) .step-card-head:hover { background: var(--surface-2); }
.editor-form .step-card + :not(.step-card) { margin-top: 16px; }
@media (max-width: 760px) {
  .editor-form .step-card, .editor-form .step-card.open { margin: 0 -16px; }
  .editor-form .step-card-head { padding-left: 12px; padding-right: 10px; }
  .editor-form .step-card-body { padding: 12px 16px 16px 18px; }
}
/* Stacked (one column), the rails take their own height; only the last one stretches to the bottom of the window. */
@media (max-width: 900px) {
  .sheet.two-col, .account-shell { grid-template-rows: auto; grid-auto-rows: auto; align-content: start; }
}

/* Account sections as labelled rows: a setting (name + one line) · its state as dot + word · its actions. */
.set-rows > li { grid-template-columns: minmax(0, 1fr) 140px minmax(120px, auto); column-gap: 16px; align-items: center; padding-top: 12px; padding-bottom: 12px; }
/* The state sits beside its way in, and the way in is a quiet link with a chevron, not a bordered button per row (visual-language: a row opens its object). */
.set-rows > li > .status { justify-self: end; min-width: 120px; justify-content: flex-end; }
.set-rows .row-actions a.btn:not(.btn-danger) { border-color: transparent; background: none; color: var(--text); font-weight: 600; padding: 0 10px; text-decoration: underline; text-underline-offset: 3px; }
.set-rows .row-actions a.btn:not(.btn-danger)::after { content: '\203A'; margin-left: 4px; font-size: 1.15em; line-height: 1; }
.set-rows .row-actions a.btn:not(.btn-danger):hover { background: var(--surface-3); }
/* The destructive action sits apart: its own head, a line above and room, so it is never one tap from a safe one. */
.danger-head { margin-top: 32px; }
.rail-head.danger-head { border-top: 2px solid var(--bg); padding-top: 20px; }
h3.danger-head { padding-top: 20px; border-top: 2px solid var(--bg); font-size: 14px; }
.set-rows .row-title { font-weight: 500; }
.set-rows .row-actions { flex-wrap: wrap; }
.status.warn .dot { background: var(--amber); }
.set-foot { margin-top: 16px; }
.account-page .small { font-size: 12.5px; }
.account-page > .alert { margin-top: 16px; max-width: 720px; }
.account-page > .rail-head + .rows, .account-page > .rail-head + .empty-state { margin-top: 4px; }
/* The template's Identity forms (profile, email, password, …): label | field rows split by 1 px lines, the submit under the fields. */
.account-page .row, .account-page .row > [class*="col-"] { display: block; }
.account-page form { max-width: none; }
.account-page .form-floating { display: grid; grid-template-columns: 200px minmax(0, 420px) auto; column-gap: 24px; row-gap: 4px; align-items: center;
  padding: 12px 0; margin: 0; border-top: 2px solid var(--bg); }
.account-page .form-floating:last-of-type { border-bottom: 2px solid var(--bg); }
.account-page .form-floating > label { order: -1; grid-column: 1; font-size: 13.5px; font-weight: 500; color: var(--text); }
.account-page .form-floating > .form-control { grid-column: 2; }
.account-page .form-floating > :not(label):not(.form-control):not(.input-group-append) { grid-column: 2; }
.account-page .form-floating > .input-group-append { grid-column: 3; }
.account-page .form-floating > .btn-link { justify-self: start; padding: 0; }
.account-page form:not(.row-actions):not(.set-foot) > .btn[type="submit"], .account-page form:not(.row-actions):not(.set-foot) > button[type="submit"] { margin: 14px 0 0 224px; }
.account-page h3 + .alert, .account-page h3 + form, .account-page h3 + .row { margin-top: 4px; }
@media (max-width: 760px) {
  .set-rows > li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .set-rows .row-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .account-page .form-floating { grid-template-columns: minmax(0, 1fr) auto; }
  .account-page .form-floating > label, .account-page .form-floating > :not(label):not(.input-group-append) { grid-column: 1; }
  .account-page .form-floating > .input-group-append { grid-column: 2; grid-row: 2; }
  .account-page form:not(.row-actions):not(.set-foot) > .btn[type="submit"], .account-page form:not(.row-actions):not(.set-foot) > button[type="submit"] { margin-left: 0; }
}

.auth-split { align-items: stretch; }
.auth-main { align-items: flex-start; padding-top: 88px; }
@media (max-width: 900px) {
  .auth-main { padding-top: 40px; }
}

/* Workflows list: a workflow its runs pin shows a lock (with the reason on hover or focus) where others have the trash. */
.in-use { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); cursor: help; }
/* Connect's discovery values: mono, wrapped only at "/" boundaries, one URI per line. */
.rail-body .ctx-list.kv dd { overflow-wrap: normal; word-break: normal; }
.rail-body .ctx-list.kv .uri { display: block; }

/* Editor: the strip on top, the editor below filling the window; the form scrolls on its own, so the strip's Save stays
   in reach. Phones stack and scroll as one page, so there Save lives in the form's sticky head instead. */
.editor-page { display: flex; flex-direction: column; height: calc(100vh - 49px); min-height: 560px; }
.editor-page > .editor { flex: 1; min-height: 0; height: auto !important; }
.editor-page .editor-form { height: auto; min-height: 100%; }
.editor-page .editor-preview { position: static; height: 100%; min-height: 0; }
.strip-actions { display: flex; gap: 8px; align-items: center; }
.head-actions { display: none !important; }
/* A save with nothing to save reads as intentionally off: a quiet filled surface, not a washed-out accent. */
:root .save-btn:disabled, :root .save-btn[disabled] { opacity: 1 !important; background: var(--surface-3) !important; color: var(--text-3) !important;
  box-shadow: inset 0 0 0 1px var(--line) !important; cursor: default; }
@media (max-width: 900px) {
  .editor-page { height: auto; min-height: 0; }
  .editor-page .editor-preview { height: auto; }
  .strip-actions { display: none; }
  .head-actions { display: flex !important; }
}
/* Wide windows: the sign-in layout is at least the window (like the dashboard); a form taller than the window grows the page, so the page's own scrollbar
   is the only one (no scroll container in the middle of the layout, spec logbook-design-system AC23). */
@media (min-width: 901px) {
  .auth-split { flex: 0 0 auto; height: auto; min-height: max(600px, calc(100vh - 49px)); grid-template-rows: minmax(0, 1fr); }
  .auth-main { min-height: 0; }
  .auth-aside { min-height: 0; overflow: hidden; }
}
.set-rows .row-sub { white-space: normal; }

/* Phones: the account sections scroll sideways; a fade marks the edge where more sections hide (js/theme.js). */
@media (max-width: 900px) {
  .account-rail .account-nav.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .account-rail .account-nav.more-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
  .account-rail .account-nav.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
}

/* Touch screens have no hover: a tapped row must not stay grey (sticky :hover) as if it were selected. */
@media (hover: none) {
  .rows > li:hover, .side-rail ul.steps li:not(.current):hover, ul.steps li:not(.current):hover,
  .editor-form .step-card:not(.open) .step-card-head:hover, .account-rail .account-nav a:not(.active):hover { background: none; }
}
/* Phones: a setting's state stays beside its name; its actions go on the line below. */
@media (max-width: 760px) {
  .set-rows > li { grid-template-columns: minmax(0, 1fr) auto; }
  .set-rows > li > .status { grid-column: 2; grid-row: 1; align-self: start; margin-top: 2px; }
  .set-rows .row-actions:empty { display: none; }
}

/* Rows that open their object: a chevron that wakes on hover; the row's other links and icons sit above the stretched link. */
.row-go { color: var(--line-strong); flex-shrink: 0; transition: color .12s ease, transform .12s ease; }
.rows > li:hover .row-go, .rows > li:focus-within .row-go { color: var(--text); transform: translateX(2px); }
.row-links .status-link { position: relative; z-index: 1; }
.row-actions { gap: 4px; }
:root .row-delete.in-use { cursor: help; padding: 0; }
:root .row-delete.in-use:hover, :root .row-delete.in-use:focus-visible { color: var(--text-2); background: var(--surface-3); }
@media (hover: none) { .row-go { display: none; } }

/* A list's closing tip: a quiet line with an icon, what to do next. */
.rail-tip { display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 0; padding: 11px 14px; border: 0; border-radius: var(--radius-sm); background: var(--surface); color: var(--text-2); font-size: 13.5px;}
.rail-tip svg { color: var(--text-2); flex-shrink: 0; margin-top: 1px; }
.rail-tip q { color: var(--text); }
.rail-tip a { margin-left: 6px; white-space: nowrap; }
@media (max-width: 760px) { .rail-tip { margin: 2px 0 0; } }

/* The strip's delete: a quiet icon, red only when aimed at. */
:root .strip-delete { color: var(--text-2); }
:root .strip-delete:hover { color: var(--red); background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 40%, var(--line-strong)); }

/* Editor step rows: move / remove wake on the row's hover or focus (always on touch); remove turns red when aimed at. */
.step-tools { display: inline-flex; align-items: center; gap: 2px; opacity: 0; transition: opacity .12s ease; }
.step-card-head:hover .step-tools, .step-card-head:focus-within .step-tools { opacity: 1; }
@media (hover: none) { .step-tools { opacity: 1; } }
:root .tool-delete { color: var(--text-3); }
:root .tool-delete:hover:not(:disabled) { color: var(--red); background: var(--red-soft); }

.rail-note { margin: 0 20px 18px; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.rail-note svg { display: inline-block; vertical-align: -2px; }
.account-page .rail-note { margin: 4px 0 0; }
@media (max-width: 760px) { .rail-note { margin: 0 16px 16px; } }

/* The step form: three groups (what the model does · before the run moves on · where it goes next), each under a
   small head with an icon, split by a line; a field is its label, a hint on its own line, then the input. Ways forward
   are cards of their own: where to, the label and the condition, one full-width field under another. */
.editor-form .step-card-body { gap: 0; padding-top: 4px; padding-bottom: 8px; }
.sf-group { display: flex; flex-direction: column; gap: 18px; padding: 20px 0 22px; }
.sf-group + .sf-group { border-top: 2px solid var(--bg); }
.sf-head { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.sf-head svg { color: var(--text-2); flex-shrink: 0; }
.editor-form .field { gap: 5px; }
.editor-form .field > label, .edge-k { font-size: 13px; font-weight: 600; color: var(--text); }
.opt { margin-left: 6px; font-size: 11.5px; font-weight: 400; color: var(--text-3); }
.field-hint { margin: 0 0 3px; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }
.editor-form .prompt-area, .editor-form textarea.prompt-area { min-height: 132px; line-height: 1.55; }
.sf-switch { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 0; border-radius: var(--radius-md);
  background: var(--surface-2); }
.sf-switch > button { margin-top: 1px; flex-shrink: 0; }
.sf-switch-title { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.sf-switch .field-hint { margin: 0; }
.sf-group.edges { gap: 12px; }
.sf-group.edges > .field-hint { margin-top: -6px; }
.edge-card { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 12px 12px; align-items: start; padding: 12px 12px 14px 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-2); }
.edge-card > .field { grid-column: 1; }
.edge-card > .edge-remove { grid-column: -2; grid-row: 1; justify-self: end; }
.edge-card.has-error { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); border-left-color: var(--red); background: var(--red-soft); }
.edge-k { display: inline-flex; align-items: center; gap: 6px; }
.edge-k svg { color: var(--text-3); }
:root .edge-card input, :root .edge-card button[role="combobox"] { background: var(--surface); }
@media (max-width: 760px) { .edges-head { flex-wrap: wrap; } .edges-head .sf-head { flex: 1 1 100%; } .sf-switch { padding: 10px 12px; } }

/* Import result dialog: the workflows created, or why nothing was. */
.import-list { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; max-height: 50vh; overflow: auto; }
.import-list.problems li { color: var(--text); }

/* The Pathista mark (Components/Shared/LogoMark.razor): inline SVG, no tile behind it. */
.logo-svg { flex-shrink: 0; display: block; }

/* ---- Plan entry in the top bar, usage and the subscription cards ---- */
/* The plan entry while payments are on (spec pricing-and-refund-pages AC11): the one accent for the primary call, a quiet link for a paying account. */
.plan-upgrade, .plan-manage { display: inline-flex; align-items: center; justify-content: center; height: 32px; margin-left: auto; padding: 0 14px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.plan-upgrade { background: var(--brand); color: var(--on-brand); }
.plan-upgrade:hover { background: color-mix(in srgb, var(--brand) 88%, #000); color: var(--on-brand); text-decoration: none; }
.plan-manage { padding: 0 10px; color: var(--text-2); font-weight: 500; }
.plan-manage:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.plan-upgrade + .account, .plan-manage + .account { margin-left: 8px; }
.plan-card { border: 0; border-radius: var(--radius-lg); padding: 0 20px 16px; margin: 0 0 24px; background: var(--surface); }
.plan-card.ended { border-color: var(--amber); }
.plan-card-title { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.plan-card-lead { color: var(--text-2); margin: 0 0 12px; }
.plan-card-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.plan-card-cols h4 { font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.plan-card-cols ul { list-style: disc; margin: 0; padding-left: 18px; color: var(--text-2); font-size: 13.5px; }
.plan-card-foot { margin: 12px 0 0; color: var(--text-2); font-size: 13.5px; }
/* Pricing page and subscription section (docs/specs/payments-paddle.md): the plan cards side by side, the purchase buttons in a row. */
.pricing-buy, .subscription-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.pricing-buy form, .subscription-actions form { margin: 0; }
.subscription-actions + .plan-card-foot { margin-top: 14px; }
/* The account page lines a form's submit button up under its labels (margin-left 224px); a purchase button sits where it is. */
.account-page form.inline-action:not(.row-actions):not(.set-foot) > button[type="submit"] { margin: 0; }
/* Usage is a flat sheet like everything else here: a 1 px line under it, no box. */
.plan-usage { border: 0; border-bottom: 2px solid var(--bg); border-radius: 0; padding: 12px 0 8px; margin: 0 20px 8px; background: transparent; }
.plan-usage-rows { list-style: none; margin: 0; padding: 0; }
.plan-usage-rows li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 2px solid var(--bg); font-size: 13.5px; }
.plan-usage-rows li:first-child { border-top: 0; }
.plan-usage-label { color: var(--text-2); }
.plan-usage-rows li.full .plan-usage-text { color: var(--amber); font-weight: 600; }
@media (max-width: 760px) {
  .plan-upgrade, .plan-manage { min-height: 44px; min-width: 44px; }
  .plan-card-cols { grid-template-columns: 1fr; }
  }
.rows li.frozen .row-title, .rows li.frozen .chain { opacity: .6; }
.plan-start-line { margin: 0 20px 12px; color: var(--text-2); font-size: 13.5px; }

/* Public template pages: the detail page (graph left, steps and checklists right) and the gallery's quiet badge. */
.template-badge.quiet { background: var(--surface-2); color: var(--text-2); }
.template-fit-summary { margin: 0 20px 14px; font-size: 13.5px; line-height: 1.5; } /* the one sentence the Premium badges of the gallery refer to */
.template-card-head h3 a { color: inherit; text-decoration: none; }
.template-card-head h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sheet.two-col > .main-rail { min-width: 0; display: flex; flex-direction: column; }
.main-rail .template-graph { flex: 1; min-height: 480px; }
.template-steps { list-style: none; counter-reset: template-step; margin: 0; padding: 0 20px 4px; }
.template-steps > li { counter-increment: template-step; position: relative; padding: 10px 0 10px 30px; border-top: 1px solid var(--line); }
.template-steps > li::before { content: counter(template-step); position: absolute; left: 0; top: 11px; width: 20px; height: 20px; border-radius: 999px;
  border: 1px solid var(--line-strong); font-size: 11.5px; line-height: 18px; text-align: center; color: var(--text-2); }
.template-steps h3 { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
.template-checklist { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.template-checklist li { position: relative; padding-left: 18px; font-size: 12.5px; color: var(--text-2); }
.template-checklist li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); } /* a bullet: the old hollow square looked like a checkbox the visitor could tick */
.template-use-form { margin: 0; display: inline-block; }
@media (max-width: 900px) { .main-rail .template-graph { min-height: 320px; } }

/* /demo: the replay's frames. Without JavaScript all frames show as a transcript; with it (class demo-js) one at a time. */
.demo-controls { display: none; align-items: center; gap: 6px; }
.demo-js .demo-controls { display: inline-flex; }
.demo-frames { list-style: none; margin: 0; padding: 0 20px 8px; counter-reset: demo-frame; }
.demo-frames > li { counter-increment: demo-frame; padding: 12px 0; border-top: 1px solid var(--line); font-size: 13px; }
.demo-js .demo-frames > li:not(.is-active) { display: none; }
.demo-js .demo-frames > li { border-top: 0; padding-top: 4px; }
.demo-call { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.demo-call code { font-size: 12.5px; padding: 1px 6px; border-radius: 4px; background: var(--surface-2); color: var(--text); }
.demo-frames p { margin: 6px 0 0; color: var(--text-2); }
.demo-frames .loop .demo-call code { box-shadow: inset 0 0 0 1px var(--brand); }
.demo-blocked { padding: 6px 10px; border-left: 3px solid var(--amber); background: var(--surface-2); color: var(--text) !important; }
.demo-todos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.demo-todos li { position: relative; padding-left: 18px; font-size: 12.5px; color: var(--text-2); }
.demo-todos li::before { content: ''; position: absolute; left: 2px; top: 5px; width: 8px; height: 8px; border-radius: 2px; border: 1.5px solid var(--text-3); }
.demo-todos li.done::before { background: var(--brand); border-color: var(--brand); }
.demo-todos .muted { display: block; }
.demo .main-rail .template-graph { flex: none; height: min(76vh, 720px); min-height: 360px; }

/* A detour's return reminder on the run page: model-written text, kept as written (line breaks), clipped with a way to read it all. */
.reminder .reminder-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0 0; }
.reminder details { margin-top: 6px; font-size: 12.5px; }
.reminder summary { cursor: pointer; color: var(--text-2); }
/* Activity grid (spec activity-statistics AC7, AC19): the year is plain HTML, one button per day; the shades below repeat the ones the dashboard's small chart is given
   in ActivityHeatmap.razor (one list of five, from "nothing" to the accent). The tooltip is js/heat-grid.js's .heat-tip, fixed to the window so nothing clips it. */
.heat-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; }
.heat-grid { --heat-0: rgba(128,128,128,0.16); --heat-1: rgba(255,107,0,0.30); --heat-2: rgba(255,107,0,0.52); --heat-3: rgba(255,107,0,0.76); --heat-4: #ff6b00;
  display: grid; width: max-content; gap: 3px; grid-template-columns: 28px repeat(var(--weeks), 14px); grid-template-rows: 16px repeat(7, 14px); }
.heat-month, .heat-weekday { font-size: 10px; color: var(--text-3); line-height: 14px; white-space: nowrap; }
.heat-weekday { align-self: center; }
.heat-day { width: 14px; height: 14px; padding: 0; border: 0; border-radius: 3px; cursor: pointer; min-height: 0; min-width: 0; }
.heat-day.lv0, .heat-swatch.lv0 { background: var(--heat-0, rgba(128,128,128,0.16)); }
.heat-day.lv1, .heat-swatch.lv1 { background: var(--heat-1, rgba(255,107,0,0.30)); }
.heat-day.lv2, .heat-swatch.lv2 { background: var(--heat-2, rgba(255,107,0,0.52)); }
.heat-day.lv3, .heat-swatch.lv3 { background: var(--heat-3, rgba(255,107,0,0.76)); }
.heat-day.lv4, .heat-swatch.lv4 { background: var(--heat-4, #ff6b00); }
.heat-day[aria-pressed="true"] { outline: 2px solid var(--text); outline-offset: 1px; }
.heat-day[aria-current="date"] { box-shadow: 0 0 0 1px var(--text-3); }
.heat-day:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.heat-legend { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 11px; color: var(--text-3); }
.heat-legend .heat-swatch { width: 12px; height: 12px; border-radius: 2px; display: block; }
.heat-tip { position: fixed; z-index: 2000; max-width: min(320px, calc(100vw - 16px)); padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); font-size: 12.5px; line-height: 1.35; box-shadow: 0 4px 14px rgba(0,0,0,0.18); pointer-events: none; overflow-wrap: anywhere; }
.heat-tip[hidden] { display: none; }
.heat-compact { position: relative; width: max-content; max-width: 100%; height: 92px; overflow: hidden; margin: 0; }
.heat-link { position: absolute; inset: 0; z-index: 2; }
/* Under a rail's head the page's gutter already sets the margin; what is not a row is a Leaf strip of its own. */
.sheet .heat:not(.heat-compact), .sheet .rail > details { background: var(--surface); border-radius: var(--radius-sm); padding: 14px 16px; margin: 0; }
.sheet .stats-scope, .sheet .stats-day, .sheet .rail > p.muted, .sheet .rail > .empty-state { margin: 0; }
.stats-scope { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.sheet .seg, .sheet [data-scope-note] { margin-left: 20px; margin-right: 20px; }
@media (max-width: 700px) { .sheet .seg, .sheet [data-scope-note] { margin-left: 16px; margin-right: 16px; } }
.seg { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 0; margin-bottom: 8px; padding: 0; border: 0; min-width: 0; }
.seg-small { font-size: 12.5px; }
.seg-option { position: relative; margin: 0; }
.seg-option input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg-option span { display: block; padding: 5px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text-2); font-size: 13.5px; overflow-wrap: anywhere; }
.seg-small .seg-option span { font-size: 12.5px; padding: 3px 10px; }
.seg-option:hover span { background: var(--surface-3); color: var(--text); }
/* The chosen option is told apart by more than a grey fill: weight and the accent's 2 px underline, the same mark the tabs wear. */
.seg-option input:checked + span { background: var(--surface-3); color: var(--text); font-weight: 600; border-color: var(--line-strong); box-shadow: inset 0 -2px 0 var(--text); }
.seg-option input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }
.stats-day { margin: 16px 0; padding: 12px 16px; border: 0; border-radius: 8px; background: var(--surface); }
.stats-day h3 { margin: 0 0 4px; font-size: 15px; }

/* Run outcomes and workflow statistics (spec activity-statistics). */
.outcomes { margin: 0 20px 16px; }
.outcome-periods { display: flex; gap: 6px; margin: 0 0 10px; }
.outcome-periods .btn[aria-pressed="true"] { background: var(--surface-3); font-weight: 600; box-shadow: inset 0 -2px 0 var(--text); }
.outcome-bar { display: block; width: 100%; max-width: 560px; height: 14px; border-radius: 4px; overflow: hidden; background: var(--surface-3); }
.outcome-done { fill: var(--green); background: var(--green); }
.outcome-aborted { fill: var(--text-3); background: var(--text-3); }
.outcome-running { fill: var(--amber); background: var(--amber); }
.outcome-stalled { fill: var(--red); background: var(--red); }
.outcome-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0; padding: 0; font-size: 13px; }
.outcome-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.wf-scroll { overflow-x: auto; margin: 0 20px 12px; }
.wf-scroll .wf-scroll { margin: 0; }
.wf-stats { min-width: 100%; margin: 0; }
.wf-stats > tbody > tr > td { vertical-align: top; padding-top: 6px; padding-bottom: 6px; }
/* Numbers read down a column: right-aligned, tabular figures (the workflow's name stays left). */
.wf-stats > thead > tr > th:nth-child(n+2), .wf-stats > tbody > tr > td:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wf-row summary { cursor: pointer; font-weight: 600; }
.wf-detail { padding: 8px 0 4px; min-width: 0; max-width: 100%; }
.wf-graph { max-width: 100%; overflow-x: auto; }
.wf-graph { display: block; margin: 8px 0; }
@media (max-width: 700px) { .outcomes { margin: 0 16px 16px; } .wf-scroll { margin: 0 16px 12px; } }

/* The visible "Updated" line of a public page (docs/specs/seo.md): it lines up with the rails below it. */
.updated-on { margin: 12px 20px 0; }

/* ── Shared look settled by the design review (docs/visual-language.md, "Shared look settled by the design review") ── */

/* Help center prose: a real type scale (heads above the body, not at its size), links and code that read as text. */
.docs-main .rail-head { padding-top: 28px; max-width: 860px; } /* a badge in a section head stays inside the text column */
.docs-main .rail-head h2 { font-size: 19px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; }
.docs-text { font-size: 15px; line-height: 1.6; }
.docs-text h3 { font-size: 16px; font-weight: 650; margin: 28px 0 8px; }
.docs-text a { text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.docs-text a:hover { text-decoration-color: currentColor; }
.docs-text code, .docs-main code { padding: 1px 5px; border-radius: 4px; background: var(--surface-3); color: var(--text-2); font-size: .9em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.docs-main .rail-head .count code { background: none; padding: 0; } /* a path in a count is a label, not a chip: no fill keeps its grey readable */
.docs-menu a.child { color: var(--text-3); }
.docs-menu a.child.active { color: var(--text); }
.concept h3 { font-size: 17px; font-weight: 650; }
/* The help center's tables (.legal-table) are flat sheets with one column grid: 1 px row lines, no box. Below 561 px legal.css stacks them into rows. */
@media (min-width: 561px) {
  .docs-main .legal-table { width: 100%; border-collapse: collapse; table-layout: fixed; border: 0; border-radius: 0; }
  .docs-main .legal-table th { text-align: left; font-size: 12.5px; font-weight: 500; color: var(--text-3); padding: 8px 12px; border-bottom: 1px solid var(--line-strong); }
  .docs-main .legal-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
  .docs-main .legal-table th:first-child, .docs-main .legal-table td:first-child { width: 28%; }
}

/* "On this page" (js/theme.js builds it on long static pages); a jump lands below the sticky top bar. */
.page-toc { margin: 8px 20px 16px; border-bottom: 2px solid var(--bg); padding-bottom: 12px; font-size: 14px; }
.page-toc summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-weight: 600; color: var(--text); }
.page-toc ol { margin: 4px 0 0; padding: 0; list-style: none; columns: 2 260px; column-gap: 24px; }
.page-toc li { break-inside: avoid; }
.page-toc a { display: block; padding: 5px 0; color: var(--text-2); text-decoration: none; }
.page-toc a:hover { color: var(--brand-text); text-decoration: underline; }
.legal-doc .page-toc { margin-left: 0; margin-right: 0; }
.legal-doc h2[id], .docs-main .rail-head h2[id] { scroll-margin-top: 112px; }

/* Flat notes and strips: a tip between two 1 px lines, the finished guide as a line with a green dot, a loading page as a static skeleton of bars. */
.rail-tip { border: 0; padding: 11px 14px; }
.start-done { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; padding: 16px 0 4px; }
.start-done h3::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--green); vertical-align: 1px; }
.empty-state.loading { min-height: 260px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty-state.loading::before { content: ''; width: min(560px, 90%); height: 70px; margin-bottom: 48px;
  background: linear-gradient(var(--surface-3) 0 14px, transparent 14px 28px, var(--surface-3) 28px 42px, transparent 42px 56px, var(--surface-3) 56px 70px); border-radius: 4px; }

/* Lists: recent runs on two lines (title, then where it stands), the member table as wide as its sheet, long notes at a readable measure. */
.side-rail ul.steps.recent .step-title { white-space: normal; display: block; }
.side-rail ul.steps.recent .step-title .muted { display: block; font-size: 12.5px; }
.side-rail ul.steps.recent .step-title .sep { display: none; } /* on its own line the second part needs no leading middle dot */
.account-page .company-table { width: 100%; }
.outcomes p.muted, .sheet .rail > p.muted { max-width: 70ch; }

@media (min-width: 901px) {
  .rail-body.has-tutorial > .tutorial { position: sticky; top: 64px; } /* the setup video stays in view beside its steps */
}
@media (max-width: 760px) {
  .demo .main-rail .rail-head { position: sticky; top: 96px; z-index: 5; background: var(--surface); } /* the replay's controls stay in reach while its text is read */
  .run:has(> .strip-help) { position: relative; } /* the strip's help mark sits in its corner, not on a row of its own */
  .run > .strip-help { position: absolute; top: 12px; right: 16px; margin: 0; }
  .run:has(> .strip-help) .state-obj { padding-right: 36px; }
}
@media (max-width: 700px) {
  .heat-scroll { direction: rtl; } /* the heat map opens on today; its cells keep reading left to right */
  .heat-scroll > * { direction: ltr; }
}
@media (max-width: 560px) {
  .docs-main .legal-table td code { white-space: nowrap; overflow-wrap: normal; } /* a tool name stays whole in its stacked row */
  .plan-usage { margin: 0 16px 8px; }
}
@media (max-width: 480px) {
  /* A graph pane takes the height its drawing needs (nothing cut off); the zoom tools sit at the top where they cover no step. */
  .graph-pane { max-height: 85vh; min-height: 0; } /* a long workflow scrolls inside its pane instead of pushing the page down */
  .graph-wrap:not(.graph-max) .graph-pane mp-graph { padding: 8px 24px 16px; }
  .graph-max .graph-pane mp-graph { padding: 52px 24px 16px; } /* the full screen keeps its tools in the corner: room above the drawing */
  .wf-graph.graph-wrap:not(.graph-max) { display: flex; } /* the statistics graph is a block elsewhere; the column needs flex */
  /* The zoom tools are a bar above the drawing, not an overlay: a pane that scrolls would slide steps under them. Full screen keeps them in its corner. */
  .graph-wrap:not(.graph-max) { flex-direction: column; }
  .graph-wrap:not(.graph-max) .graph-tools, .graph-wrap:not(.graph-max).zoom-hint .graph-tools { position: static; order: -1; align-self: flex-end; margin: 8px 12px 0; }
  .graph-max .graph-tools, .graph-max.zoom-hint .graph-tools { top: 8px; bottom: auto; }
  /* The log gives its width to the moves: the route trace is for wider screens. */
  ol.history > li { grid-template-columns: 44px minmax(0, 1fr); }
  .log-trace-cell { display: none; }
  .editor-preview .graph-wrap { height: auto; }
  .editor-preview .graph-wrap .graph-pane { min-height: 280px; }
  .icon-btn, .row-delete { min-width: 40px; min-height: 40px; }
  .strip-help { width: 40px; height: 40px; }
  .url-box code { overflow-x: auto; overflow-wrap: normal; white-space: nowrap; } /* a command scrolls instead of breaking inside a word */
  .page-toc a { padding: 10px 0; }
}

/* ── Logbook grammar for the public gallery and the help center (spec logbook-design-system AC9) ──
   The templates are rows on the Ledger ground (a thumbnail on a Band, the text on a Leaf), not a grid of identical cards. */
.template-gallery { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 4px 20px 20px; }
.template-card { display: grid; grid-template-columns: 240px minmax(0, 1fr); border: 0; border-radius: var(--radius-sm); background: var(--surface); }
.template-card .graph-thumb { height: 150px; border-bottom: 0; background: var(--surface-3); }
.template-card-body { padding: 16px 20px; }
.docs-menu a.active { box-shadow: none; }
.docs-main { border-left: 0; }
/* The help center's layout rule (docs/visual-language.md, "Help center"): the title and the menu start at the sheet's gutter, the article is one column with one left edge
   (date, lead, contents, heads and body), a measure of about 75 characters (46ch: this face averages about 1.5 characters per ch, measured), no scrollbar drawn between the menu and the article. */
.docs-main .updated-on, .docs-main .page-toc { margin-left: 0; margin-right: 0; }
.docs-main :is(p, li, dd, dt) { max-width: 46ch; }
.docs-main .page-toc ol { columns: 1; }
.state-obj:not(:has(.dot)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "word" "sub"; } /* a line without a dot starts at the strip's edge */
.state-obj:not(:has(.sub)) { row-gap: 0; } /* a strip without a state line has no second row to space */
@media (max-width: 760px) {
  .template-card { grid-template-columns: minmax(0, 1fr); }
  .template-card .graph-thumb { height: 120px; }
}

/* The sheet's own gutter (--page-gutter) sets the side margin of everything in a rail: the 20 px offsets older layouts gave what sits under a head go. */
.sheet .rail-body, .sheet .onboarding-stepper, .sheet .template-gallery, .sheet .workflows-welcome, .sheet .window-switch, .sheet .chart-note, .sheet .list-toolbar { padding-left: 0; padding-right: 0; }
.sheet .getting-started-note, .sheet .copy-status, .sheet .template-alert, .sheet .rail-note, .sheet .plan-start-line, .sheet .outcomes, .sheet .wf-scroll, .sheet .updated-on, .sheet .seg,
.sheet [data-scope-note], .sheet .main-rail > .alert, .sheet .plan-usage { margin-left: 0; margin-right: 0; }

/* A row of sections that scrolls says so twice: the fade at its edge and a thin visible scroll track under it (spec logbook-design-system AC18). */
@media (max-width: 900px) {
  .mainnav.more-l, .mainnav.more-r, .account-rail .account-nav.more-l, .account-rail .account-nav.more-r { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
}

/* The dashboard's Activity grid sits beside "Needs you" on a wide window (it is a small block), stacked on a narrow one. */
.dash-pair { display: contents; }
@media (min-width: 901px) {
  .dash-pair.with-activity { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 32px; align-items: start; }
}

/* The workflow editor at a middle width: the preview's head stays on one line (the hint ends in an ellipsis), every scrolling region of the page wears the app's thin track,
   and the step slug leaves room for the step's name (it shows again in the open card). */
.editor-preview .rail-head { flex-wrap: nowrap; min-width: 0; }
.editor-preview .rail-head .count { white-space: nowrap; flex-shrink: 0; }
.editor-preview .preview-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.editor-page :where(.issues, .graph-pane, .editor-form, textarea, pre) { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
@media (max-width: 1200px) {
  .editor-form .step-card-head .sid { display: none; }
}