/*
 * 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.
 */

/* ── 1. Dashboard tokens ─────────────────────────────────────────────────── */
:root {
  --bg: #f6f6f7;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --surface-3: #f2f2f3;
  --line: #e5e5e8;
  --line-strong: #d6d6db;
  --text: #1c1c21;
  --text-2: #5c5c66;
  --text-3: #6f6f79;
  --placeholder: #a8a8b1;
  /* 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: #c2410c;
  --brand-soft: #fff1e6;
  --on-brand: #1d0e00;
  /* chart series after the accent: three neutral lightness steps and a quiet grey for "Other" (funnel page) */
  --series-2: #1c1c21; --series-3: #6f6f79; --series-4: #8c8c97; --series-other: #b6b6bf;
  --green: #1a9e50;
  --green-soft: #e8f7ee;
  --amber: #c98a04;
  --amber-soft: #fdf3d8;
  --red: #d33d3d;
  --red-soft: #fdeaea;
  --diagram-bg: #fcfcfd;
  --diagram-node: #ffffff; /* node fill, as js/graph.js classDefs draw it */
  --diagram-run: #fef8e7; /* the current step's fill (js/graph.js runFill) */
  --ink: #1c1c21;
  --ink-text: #ffffff;
  --shadow-1: 0 1px 2px rgba(20, 20, 30, 0.05);
  --shadow-2: 0 8px 24px rgba(20, 20, 30, 0.10);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono-font: ui-monospace, "Cascadia Code", Consolas, monospace;
  color-scheme: light;
}
:root.dark {
  --bg: #131316;
  --surface: #1b1b1f;
  --surface-2: #202025;
  --surface-3: #26262c;
  --line: #2b2b32;
  --line-strong: #3a3a42;
  --text: #ececf1;
  --text-2: #a7a7b3;
  --text-3: #8a8a96;
  --placeholder: #6f6f7a;
  --brand: #ff6b00;
  --brand-text: #ff8a3d;
  --brand-soft: #3a2210;
  --green: #3ecf72;
  --green-soft: #16281d;
  --amber: #e8b33e;
  --amber-soft: #2d2513;
  --red: #ef6a6a;
  --red-soft: #321a1a;
  --diagram-bg: #202025;
  --diagram-node: #242429;
  --diagram-run: #2d2513;
  --ink: #ececf1;
  --ink-text: #131316;
  --series-2: #c9c9d3; --series-3: #9a9aa7; --series-4: #727280; --series-other: #50505b;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.5);
  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.5rem;
  --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);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  a { color: var(--brand-text); }
  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, .mono { 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);
  border-bottom: 1px solid var(--line);
  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); }
/* 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-contents { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 24px 4px; font-size: 14px; }
.docs-contents a, .docs-text a, .docs-link { text-decoration: underline; text-underline-offset: 3px; }
.docs-text { max-width: 78ch; }
.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; }
.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: linear-gradient(135deg, #ff8a3d, var(--brand)); color: var(--on-brand); 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(--brand-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: 1px solid var(--line); 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(--text-3); }
.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: 1px solid var(--line); 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; }
.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: flex; align-items: center; flex-wrap: wrap; gap: 24px;
  padding: 12px 20px; min-height: 76px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.state-obj {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 6px 18px 6px 14px; border-radius: 26px;
  background: var(--surface); border: 1px solid var(--line-strong);
  flex-shrink: 0; max-width: 100%;
}
:root.dark .state-obj { background: var(--surface-2); }
.state-obj .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; }
.state-obj .word { font-size: 15px; font-weight: 600; white-space: nowrap; }
.state-obj .sub { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
.state-obj .sub::before { content: '·'; margin: 0 8px 0 0; color: var(--text-3); }
.state-obj.open .dot { background: var(--green); animation: att-pulse 1.8s ease-in-out infinite; }
.state-obj.done .dot { background: var(--text-3); }
.state-obj.aborted .dot { background: var(--red); }
@keyframes att-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
/* One line, as on the dashboard: names (a long run title) shrink to an ellipsis, the short facts keep their width. */
.facts { display: flex; align-items: center; gap: 28px; min-width: 0; flex: 1; flex-wrap: nowrap; row-gap: 10px; }
.fact { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex-shrink: 0; }
.fact.name { flex-shrink: 1; min-width: 80px; max-width: 420px; }
.fact .k { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.fact .v { font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.fact .v .muted { color: var(--text-3); }
.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 { color: var(--brand-text); 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 { margin-left: auto; flex-shrink: 0; display: flex; 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); }
/* 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: 1px solid var(--line); background: var(--surface); }
.run-dock { border: 0; border-radius: 0; }
/* 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: transparent; 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(--brand); outline: none; }
.run-dock .graph-wrap { height: 100%; }
.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 { border-left: 1px solid var(--line); background: var(--surface); min-width: 0; }
.col + .col { }
.ctx-list { margin: 0; padding: 0 16px 12px; }
.ctx-list .prop { display: grid; grid-template-columns: minmax(64px, 36%) 1fr; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.ctx-list .prop:first-child { border-top: none; padding-top: 0; }
.ctx-list dt { color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-list dd { margin: 0; color: var(--text-2); font-family: var(--mono-font); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; min-width: 0; }
.block + .block { border-top: 1px solid var(--line); }
.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 0 12px; }
ul.steps li { padding: 7px 16px 7px 14px; border-left: 2px solid transparent; font-size: 13.5px; 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(--amber); background: var(--amber-soft); }
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: none; 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); }
ol.history { list-style: none; margin: 0; padding: 0 16px 16px; }
ol.history li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
ol.history li:first-child { border-top: none; padding-top: 0; }
ol.history time { color: var(--text-3); font-variant-numeric: tabular-nums; font-size: 12px; padding-top: 1px; }
ol.history .move { color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
ol.history .move b { font-weight: 500; color: var(--text); }
ol.history .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 3px; font-size: 12px; color: var(--text-3); }
/* 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: 6px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); min-width: 0; }
.log-note.summary { border-left: 3px solid var(--brand); }
.log-note-head { font-size: 12px; color: var(--text-3); margin-bottom: 3px; }
.log-note-head b { font-weight: 500; color: var(--text-2); }
.note-tag { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; background: var(--brand-soft); color: var(--brand-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-2)); }
.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 .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(--brand-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: 4px; font-size: 11.5px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line); }
.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: 1px solid var(--line); }
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-family: var(--mono-font); 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-family: var(--mono-font); 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); font-family: var(--mono-font); }
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: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; line-height: 18px; padding: 0 8px; border-radius: 9px; 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: 1px solid var(--line); 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: 1px solid var(--line); }
.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: 1px solid var(--line); color: var(--text-2); font-size: 13px; }
.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: 1px solid var(--line); 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: 1px solid var(--line); }
.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: 1px solid var(--line); 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: 1px solid var(--line); }
.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-family: var(--mono-font); 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(--brand-text); }
.help-toggle:focus-visible { box-shadow: var(--focus-ring); }
.cond-help { border: 1px solid var(--line); 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: 1px solid var(--line); }
.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: 10px; font-size: 11.5px; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.tag.accent { background: var(--brand-soft); color: var(--brand-text); }

/* Product shots on the signed-out pages are pictures that happen to be live: no inner scrollbar, and a graph taller than its
   window fades out at the bottom instead of being cut mid-node (it still scrolls on wheel or touch). */
.auth-graph .graph-pane { scrollbar-width: none; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); }
.auth-graph .graph-pane::-webkit-scrollbar { display: none; }

/* ── 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; }
.auth-graph .graph-tools { right: 12px; bottom: 12px; }
.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(--brand-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: 1px solid var(--line); 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: color-mix(in srgb, var(--brand) 30%, var(--line)); background: var(--brand-soft); 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: 1px solid var(--line); 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 a save is an ordinary action: the bar's quiet outline button, not a full-width accent block. */
:root .account-page .btn-primary { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
:root .account-page .btn-primary: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; }
.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), .company-table td.expires-cell { 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; }
  .company-table td.expires-cell { font-size: 12px; color: var(--text-3); white-space: normal; overflow-wrap: normal; }
}

/* 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: 10px; 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: 1px solid var(--line); }
}
@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: 1px solid var(--line); }
  .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) {
  .topbar { flex-wrap: wrap; padding: 0 12px; column-gap: 8px; }
  .topbar .brand { height: 48px; }
  .mainnav { order: 10; flex-basis: 100%; overflow-x: auto; margin: 0 -12px; padding: 0 8px 8px; scrollbar-width: none; }
  .mainnav.guest { order: 0; flex-basis: auto; overflow: visible; margin: 0; padding: 0; } /* two links fit beside the brand */
  .account { border-left: none; padding-left: 0; margin-left: 0; }
  .crumbs a, .crumbs span { max-width: 40vw; }
  .page { padding: 16px 16px 40px; }
  .run { padding: 12px 16px; gap: 12px 20px; }
  .state-obj { flex-basis: 100%; }
  .state-obj .sub { max-width: 60vw; }
  /* Phones: the facts in two columns under the pill, the actions on their own line (wrapping, never cut). */
  .facts { flex-basis: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .fact, .fact.name { max-width: 100%; min-width: 0; }
  .run .actions { margin-left: 0; 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(--surface); }
.strip { position: relative; }
.state-obj h1.word { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.state-obj.idle .dot { background: none; box-shadow: inset 0 0 0 1.5px var(--text-3); }
.state-obj.brand .dot { background: var(--brand); }
.state-obj.warn .dot { background: var(--amber); }
.sheet { flex: 1; min-width: 0; background: var(--surface); display: flex; flex-direction: column; }
.sheet.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: stretch; }
.sheet > .rail + .rail { border-top: 1px solid var(--line); }
.side-rail { border-left: 1px solid var(--line); min-width: 0; }
.sheet .rail-head { padding: 16px 20px 8px; }
.rail-head h2 { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; margin: 0; }
.rail-head .tail { font-size: 12px; }
.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: 2px 20px 20px; }
.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 0 12px; }
.rows > li { display: grid; align-items: center; column-gap: 20px; padding: 10px 20px; border-top: 1px solid var(--line); position: relative; min-width: 0;
  font-size: 13.5px; }
.rows > li:hover { background: var(--surface-2); }
.row-cols { display: grid; column-gap: 20px; padding: 0 20px 6px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.row-main { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.row-title { font-size: 14px; font-weight: 500; 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: 12.5px; color: var(--text-3); 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; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 12.5px; color: var(--text-2);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.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-step { flex-shrink: 0; }
.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(--brand-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: 1px solid var(--line); 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(--brand-text); border-bottom-color: var(--brand); 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: 1px solid var(--line); }
.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: 999px; font-size: 11.5px; font-weight: 600;
  color: var(--brand-text); background: color-mix(in srgb, var(--brand) 12%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  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: 16px minmax(200px, 1.1fr) minmax(140px, 1fr) 200px 100px 80px 64px; }
/* The dashboard: status mark · run · what to look at (the step, the reason, the result) · the way in. */
.dash-grid { grid-template-columns: 16px minmax(200px, 1.1fr) minmax(240px, 2fr) 24px; }
.rows > li.dash-grid { column-gap: 16px; }
.dash-rows .row-step { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dash-rows .row-step.soon .k { color: var(--text); }
.rail-more { margin: 0; padding: 6px 20px 14px; font-size: 12.5px; color: var(--text-3); }
/* 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: 1px solid var(--line); }
.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(--brand); 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: 1px solid var(--line); }
.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: 1px solid var(--line); }
.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: 1px solid var(--line); 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: 999px; 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; }
.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: 1px solid var(--line); }
}
@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: 999px; 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 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: 1 1 16rem; max-width: 28rem; }
.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); }
.row-progress { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-3); min-width: 0; }
.seg-bar { display: flex; gap: 2px; flex: 1; min-width: 60px; height: 6px; }
.seg-bar i { flex: 1; min-width: 3px; border-radius: 2px; background: var(--line); }
:root.dark .seg-bar i { background: var(--line-strong); }
:root .seg-bar i.done { background: var(--green); }
:root .seg-bar i.current { background: var(--amber); }
:root .seg-bar i.stopped { background: var(--red); }

/* Rails beside a list: the dashboard's step list (icon · title · meta). */
.side-rail ul.steps li { padding: 7px 20px 7px 18px; }
.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 { background: none; border-left-color: transparent; }
.side-rail ul.steps.recent li.current:hover { background: var(--surface-2); }
.side-rail ul.steps li:hover { background: var(--surface-2); }
.side-rail ul.steps li.current:hover { background: var(--amber-soft); }

@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: 1px solid var(--line); }
  .run-grid { grid-template-columns: 16px minmax(160px, 1fr) minmax(120px, 1fr) 150px 90px 70px 64px; }
  .dash-grid { grid-template-columns: 16px minmax(160px, 1fr) minmax(160px, 1.6fr) 24px; }
}
@media (max-width: 760px) {
  .sheet .rail-head, .rows > li, .row-cols, .empty-state.left { padding-left: 16px; padding-right: 16px; }
  .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: 16px minmax(0, 1fr) auto; row-gap: 6px; column-gap: 12px; }
  .rail-more { padding-left: 16px; padding-right: 16px; }
  .run-rows .row-main, .run-rows .row-step, .run-rows .row-progress { grid-column: 2; }
  .run-rows .row-actions { grid-column: 3; grid-row: 1; align-self: start; }
  .run-rows .step-icon { align-self: start; margin-top: 3px; }
}

/* 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: 1px solid var(--line); }
.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: 1px solid var(--line); 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); border-left-color: var(--brand); color: var(--text); font-weight: 500; }
.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: 1px solid var(--line); }
  .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(--brand); }
  .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: 1px solid var(--line); border-radius: 0; margin: 0 -24px; box-shadow: none; background: var(--surface); }
.editor-form .step-card:last-of-type { border-bottom: 1px solid var(--line); }
.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(--brand); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.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(--brand); }
.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) 150px minmax(180px, auto); column-gap: 20px; padding-top: 12px; padding-bottom: 12px; }
.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: 1px solid var(--line); }
.account-page .form-floating:last-of-type { border-bottom: 1px solid var(--line); }
.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 exactly the window (like the dashboard); the form side scrolls if it must, the graph pane scrolls inside. */
@media (min-width: 901px) {
  .auth-split { flex: 0 0 auto; height: calc(100vh - 49px); min-height: 600px; grid-template-rows: minmax(0, 1fr); }
  .auth-main { overflow-y: auto; 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(--brand-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: 4px 20px 20px; padding: 12px 14px; border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md); color: var(--text-2); font-size: 13px; line-height: 1.5; }
.rail-tip svg { color: var(--brand-text); 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: 4px 16px 16px; } }

/* 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: 1px solid var(--line); }
.sf-head { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 11.5px; font-weight: 650; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-3); }
.sf-head svg { color: var(--brand-text); 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: 1px solid var(--line); 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: 1px solid var(--line); 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; }
.plan-usage { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0 20px 8px; margin: 0 0 16px; background: var(--surface); }
.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: 1px solid var(--line); 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-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: 2px; top: 5px; width: 8px; height: 8px; border-radius: 2px; border: 1.5px solid var(--text-3); }
.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); }