/* The own apps at work on their case-study pages (scripts/build-cases.mjs DEMOS), played by demo.js.
   HoldFn's pill is the app's own dark capsule in both themes (UI/RecordingOverlay.swift); the Meetfacts card follows
   the page's theme, with the app's track colours: amber for your microphone, blue for everyone else; idenflow's
   Changes view follows it too, in Winkel colours, and so do Eigenlaut's run page, in its own tokens, and Chronato's
   menu, drawn as macOS draws a menu; Spoor's Applications view keeps its one, light theme.
   Only transform and opacity move. Everything is visible as written until demo.js sets .live / .playing. */

.demo { display: grid; justify-items: center; gap: 12px; }
.demo .stand { justify-self: stretch; }

/* ───── HoldFn's pill ───── */
.hf-pill {
  display: inline-flex; align-items: center; gap: 25px; min-height: 44px; max-width: 100%; margin: 28px 0;
  padding: 11px 18px 11px 14px; border-radius: 22px; color: #f4f6f5; text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0) 50%), #1d2326;
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.5), inset 0 0 0 1px rgb(255 255 255 / 0.22), 0 6px 18px rgb(0 0 0 / 0.28);
}
.hf-glyph { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 22px; }
.hf-glyph > * { grid-area: 1 / 1; }
.hf-glyph::after { content: ""; position: absolute; right: -12.5px; top: 0; width: 0.5px; height: 22px; background: rgb(255 255 255 / 0.14); }
.hf-lines { display: grid; gap: 2px; min-width: 0; }
.hf-main, .hf-help { display: grid; }
.hf-main > *, .hf-help > * { grid-area: 1 / 1; }
.hf-main { font-size: 14px; font-weight: 500; line-height: 1.35; }
.hf-help { font-size: 12px; line-height: 1.3; color: #b5bec2; }
.hf-alt { opacity: 0; }
.hf-bars { display: flex; align-items: center; gap: 4px; height: 22px; }
.hf-bars i { width: 2.5px; height: 22px; border-radius: 2px; background: #8eaaff; transform: scaleY(0.4); }
.hf-bars i:nth-child(1) { transform: scaleY(0.32); } .hf-bars i:nth-child(2) { transform: scaleY(0.66); }
.hf-bars i:nth-child(3) { transform: scaleY(0.94); } .hf-bars i:nth-child(4) { transform: scaleY(0.78); }
.hf-bars i:nth-child(5) { transform: scaleY(0.5); } .hf-bars i:nth-child(6) { transform: scaleY(0.26); }
.hf-spin { position: relative; width: 20px; height: 20px; opacity: 0; }
.hf-spin i { position: absolute; left: 8.4px; top: 0.4px; width: 3.2px; height: 3.2px; border-radius: 50%; background: #fff; transform-origin: 1.6px 9.6px; }
.hf-spin i:nth-child(1) { opacity: 0.95; }
.hf-spin i:nth-child(2) { opacity: 0.25; transform: rotate(45deg); } .hf-spin i:nth-child(3) { opacity: 0.35; transform: rotate(90deg); }
.hf-spin i:nth-child(4) { opacity: 0.45; transform: rotate(135deg); } .hf-spin i:nth-child(5) { opacity: 0.55; transform: rotate(180deg); }
.hf-spin i:nth-child(6) { opacity: 0.65; transform: rotate(225deg); } .hf-spin i:nth-child(7) { opacity: 0.75; transform: rotate(270deg); }
.hf-spin i:nth-child(8) { opacity: 0.85; transform: rotate(315deg); }
.hf-bars, .hf-spin, .hf-pill .w { transition: opacity 0.18s ease; }
.hf-pill.is-working .hf-bars { opacity: 0; }
.hf-pill.is-working .hf-spin { opacity: 1; animation: hf-spin 0.8s steps(8, end) infinite; }
.hf-pill.live .w:not(.said) { opacity: 0; }
@keyframes hf-spin { to { transform: rotate(360deg); } }

/* ───── A Meetfacts transcript ───── */
.mf-card {
  --mf-me: light-dark(#e08a00, #ffb547); --mf-them: light-dark(#2f5bff, #7fa2ff);
  --mf-me-text: light-dark(#8a4b00, #ffc977); --mf-them-text: light-dark(#1f3fb8, #adc2ff);
  --mf-rec: light-dark(#9a2d25, #ffb3aa);
  width: 100%; padding: 22px 22px 20px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow); text-align: left;
}
.mf-state { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font: 500 13px/1.4 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.mf-dot { width: 7px; height: 7px; margin-right: 2px; border-radius: 50%; background: var(--mf-rec); transition: opacity 0.3s ease; }
.mf-card.is-paused .mf-dot { opacity: 0.3; }
.mf-clock { display: inline-block; min-width: 2.6em; }
.mf-tracks { display: grid; gap: 8px; margin-bottom: 16px; }
.mf-track { display: grid; grid-template-columns: 3.4em 1fr; align-items: center; gap: 12px; font-size: 14px; }
.mf-wave { display: flex; align-items: center; gap: 3px; height: 30px; overflow: hidden; transition: opacity 0.3s ease; }
.mf-wave i { flex: 1 1 3px; max-width: 4px; height: 100%; border-radius: 2px; transform: scaleY(0.5); }
.mf-me .mf-wave i { background: var(--mf-me); }
.mf-them .mf-wave i { background: var(--mf-them); }
.mf-wave i:nth-child(5n+1) { transform: scaleY(0.26); } .mf-wave i:nth-child(5n+2) { transform: scaleY(0.64); }
.mf-wave i:nth-child(5n+3) { transform: scaleY(0.92); } .mf-wave i:nth-child(5n+4) { transform: scaleY(0.48); }
.mf-wave i:nth-child(5n) { transform: scaleY(0.14); }
.mf-card.is-paused .mf-wave { opacity: 0.45; }
.mf-transcript { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.mf-turn { display: grid; grid-template-columns: auto auto 1fr; gap: 0 12px; align-items: baseline; font-size: 15px; line-height: 1.5; }
.mf-at { font: 500 12px var(--mono); color: var(--muted); min-width: 2.6em; }
.mf-who { font-weight: 650; min-width: 2.6em; }
.mf-me .mf-who { color: var(--mf-me-text); }
.mf-them .mf-who { color: var(--mf-them-text); }
.mf-gap { text-align: center; font: 500 12px var(--mono); color: var(--muted); }
.mf-card .w, .mf-who, .mf-at, .mf-gap { transition: opacity 0.18s ease; }
.mf-card.playing .mf-turn:not(.on) .mf-who, .mf-card.playing .mf-turn:not(.on) .mf-at,
.mf-card.playing .mf-gap:not(.on), .mf-card.playing .w:not(.said) { opacity: 0; }
@media (max-width: 560px) {
  .mf-turn { grid-template-columns: auto 1fr; }
  .mf-at { display: none; }
}

/* ───── idenflow's Changes view ───── */
/* After web/src/pages/Changes.tsx and Audit.tsx, in idenflow's own type and Winkel colours
   (docs/brand/winkel/BRAND.md §5, §6), light or dark with the page. Atkinson is self-hosted (latin subsets, OFL beside
   them) and is fetched only where a page uses it. Parts of the other stages are .if-alt, hidden until demo.js plays. */
@font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('/fonts/atkinson-next-var.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Mono'; src: url('/fonts/atkinson-mono-var.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
.if-app {
  --if-bg: light-dark(#f9f8f3, #090e21); --if-card: light-dark(#fefefd, #0f162c); --if-fg: light-dark(#141b42, #f2f0ea);
  --if-muted: light-dark(#f1efe8, #1b2035); --if-muted-fg: light-dark(#545a6f, #a7adc2); --if-border: light-dark(#e1ded5, #272d42);
  --if-input: light-dark(#7a8093, #68708c); --if-primary: light-dark(#141b42, #cbf138); --if-primary-fg: light-dark(#cbf138, #141b42);
  --if-applied: light-dark(#046b51, #6bddb5); --if-applied-bg: light-dark(#d9f7ea, #083124);
  --if-scheduled: light-dark(#545a6f, #b0b7cb); --if-scheduled-bg: light-dark(#eaedf4, #202538);
  --if-mono: 'Atkinson Hyperlegible Mono', ui-monospace, monospace;
  --if-cols: 5.75rem minmax(0, 9.5rem) minmax(0, 1fr) 10.5rem;
  width: 100%; padding: 16px 20px 20px; border-radius: var(--radius); border: 1px solid var(--if-border); box-shadow: var(--shadow);
  background: var(--if-bg); color: var(--if-fg); text-align: left; overflow-wrap: normal;
  font: 400 14px/1.45 'Atkinson Hyperlegible Next', ui-sans-serif, system-ui, sans-serif;
}
.if-app svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.if-app .if-sq { fill: currentColor; stroke: none; }
.if-app .if-mark { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.if-app .if-mark .if-sq { fill: light-dark(currentColor, #cbf138); } /* the square turns Libelle on ink */
.if-crumb { display: flex; align-items: center; gap: 8px; margin: 0 -20px 18px; padding: 0 20px 14px; border-bottom: 1px solid var(--if-border); color: var(--if-muted-fg); }
.if-crumb .if-mark { margin-right: 6px; color: var(--if-fg); }
.if-crumb > svg:not(.if-mark) { width: 14px; height: 14px; }
.if-crumb b { font-weight: 400; color: var(--if-fg); }
.if-title { font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.025em; }
.if-desc { margin-top: 6px; color: var(--if-muted-fg); }
.if-tabs { display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 14px 0 16px; }
.if-tab { position: relative; padding: 6px 8px; font-weight: 500; opacity: 0.6; }
.if-tab.on { opacity: 1; }
.if-line { position: absolute; inset: auto 0 -2px; height: 2px; background: var(--if-fg); }
.if-alt { opacity: 0; }
.if-lead, .if-when, .if-count, .if-foot { display: grid; }
.if-lead > *, .if-when > *, .if-count > *, .if-foot > * { grid-area: 1 / 1; }
.if-lead { justify-items: start; align-items: center; }
.if-table { overflow: hidden; border: 1px solid var(--if-border); border-radius: 12px; background: var(--if-card); }
.if-th, .if-row, .if-person { display: grid; grid-template-columns: var(--if-cols); align-items: center; gap: 0 16px; padding: 0 16px; }
.if-th {
  padding-block: 9px; border-bottom: 2px solid var(--if-fg); background: color-mix(in srgb, var(--if-muted) 50%, var(--if-card));
  font: 500 12px/1.4 var(--if-mono); letter-spacing: 0.01em; color: var(--if-muted-fg);
}
.if-person { grid-template-columns: calc(5.75rem + 4px) auto minmax(0, 1fr); gap: 0 12px; padding-block: 10px; background: color-mix(in srgb, var(--if-muted) 60%, var(--if-card)); border-bottom: 1px solid var(--if-border); }
.if-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--if-border); background: var(--if-muted); font-size: 12px; font-weight: 500; }
.if-who { display: grid; line-height: 1.3; }
.if-who > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.if-who b { font-weight: 500; }
.if-who small { font-size: 12px; color: var(--if-muted-fg); }
.if-row { position: relative; isolation: isolate; padding-block: 12px; }
.if-picked { position: absolute; inset: 0; z-index: -1; background: var(--if-muted); }
.if-row .if-field { padding-left: 44px; } /* under the name, past the avatar, as the app indents a person's changes */
.if-box { position: relative; display: block; width: 16px; height: 16px; border: 1px solid var(--if-input); border-radius: 4px; background: light-dark(transparent, color-mix(in oklch, var(--if-input) 30%, transparent)); }
.if-tick { position: absolute; inset: -1px; display: grid; place-items: center; border-radius: 4px; background: var(--if-primary); color: var(--if-primary-fg); }
.if-app .if-tick svg { width: 14px; height: 14px; }
.if-badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px 0 6px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.if-app .if-badge svg { width: 14px; height: 14px; }
.if-applied { background: var(--if-applied-bg); color: var(--if-applied); }
.if-scheduled { background: var(--if-scheduled-bg); color: var(--if-scheduled); }
.if-change { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.if-change del { color: var(--if-muted-fg); text-decoration-color: color-mix(in oklch, var(--if-muted-fg) 60%, transparent); }
.if-change ins { font-weight: 500; text-decoration: none; }
.if-app .if-change svg { width: 14px; height: 14px; color: var(--if-muted-fg); }
.if-when { justify-items: start; color: var(--if-muted-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.if-pre { display: none; }
.if-foot { margin-top: 14px; align-items: start; }
.if-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.if-count { justify-items: end; margin-right: 4px; color: var(--if-muted-fg); }
.if-btns { display: flex; gap: 8px; }
.if-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 10px 0 8px; border-radius: 8px; border: 1px solid var(--if-border); background: var(--if-card); font-weight: 500; }
.if-primary { border-color: transparent; background: var(--if-primary); color: var(--if-primary-fg); }
.if-toast, .if-audit { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--if-border); border-radius: 12px; background: var(--if-card); }
.if-toast { justify-self: end; box-shadow: 0 4px 14px rgb(0 0 0 / 0.08); }
.if-toast b { font-weight: 500; }
.if-toast span { font-size: 13px; color: var(--if-muted-fg); }
.if-audit { gap: 6px; }
.if-label { display: flex; align-items: center; gap: 6px; font: 500 12px/1.4 var(--if-mono); letter-spacing: 0.01em; color: var(--if-muted-fg); }
.if-app .if-label svg { width: 14px; height: 14px; }
.if-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.if-entry b { font-weight: 500; }
.if-seq { font: 500 12px var(--if-mono); color: var(--if-primary); text-decoration: underline; text-underline-offset: 4px; }
.if-at, .if-detail { color: var(--if-muted-fg); font-variant-numeric: tabular-nums; }
.if-entry code { padding: 1px 8px; border: 1px solid var(--if-border); border-radius: 999px; font: 500 12px/1.4 var(--if-mono); background: none; color: var(--if-fg); }
@media (max-width: 560px) {
  .if-app { --if-cols: 5.75rem minmax(0, 1fr); padding: 14px 14px 16px; }
  .if-crumb { margin-inline: -14px; padding-inline: 14px; }
  .if-title { font-size: 20px; }
  .if-th { display: none; }
  .if-person { grid-template-columns: 5.75rem auto minmax(0, 1fr); }
  .if-row { align-items: start; gap: 4px 12px; }
  .if-row .if-lead { grid-row: 1 / span 3; padding-top: 1px; }
  .if-row .if-field { padding-left: 0; }
  .if-pre { display: inline; }
  .if-when { font-size: 12px; }
  .if-count { justify-items: start; width: 100%; }
  .if-btns, .if-btn { flex: 1; }
  .if-toast { justify-self: stretch; }
}

/* ───── Spoor's Applications view ───── */
/* After frontend/src/styles.css's tokens: Spoor has one, light theme, so the view stays light on a dark page. Inter is
   the app's font; it is not fetched here, so the system face stands in. */
.sp-app {
  --sp-canvas: #f8fafc; --sp-surface: #fff; --sp-subtle: #f1f5f9; --sp-fg: #0f172a; --sp-fg2: #475569; --sp-muted: #64748b;
  --sp-line: #e2e8f0; --sp-selected: #eff6ff;
  --sp-cols: minmax(0, 1fr) 11.5rem 4.5rem 8.75rem;
  color-scheme: light; width: 100%; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--sp-line); box-shadow: var(--shadow);
  background: var(--sp-canvas); color: var(--sp-fg); text-align: left; overflow-wrap: normal;
  font: 400 14px/1.45 'Inter Variable', Inter, ui-sans-serif, system-ui, sans-serif;
}
.sp-bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--sp-line); background: var(--sp-surface); }
.sp-app .sp-bar img { flex: none; width: 22px; height: 22px; max-width: none; margin: 0; border-radius: 5px; box-shadow: none; }
.sp-bar b { font-weight: 600; }
.sp-crumb { margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--sp-line); color: var(--sp-fg2); }
.sp-bar .sp-badge { margin-left: auto; }
.sp-body { padding: 18px 20px 20px; }
.sp-title { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.sp-src { margin: 6px 0 14px; font-size: 12px; color: var(--sp-fg2); }
.sp-swap { display: inline-grid; vertical-align: bottom; }
.sp-swap > * { grid-area: 1 / 1; }
.sp-syncing { display: inline-flex; align-items: center; gap: 5px; color: #1e40af; }
.sp-spin { width: 10px; height: 10px; border: 1.5px solid #bfdbfe; border-top-color: #1e40af; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .sp-spin { animation: sp-spin 0.9s linear infinite; } }
@keyframes sp-spin { to { transform: rotate(1turn); } }
.sp-alt { opacity: 0; }
.sp-table { overflow: hidden; border: 1px solid var(--sp-line); border-radius: 8px; background: var(--sp-surface); }
.sp-th, .sp-row { display: grid; grid-template-columns: var(--sp-cols); align-items: center; gap: 0 14px; padding: 0 14px; }
.sp-th { padding-block: 9px; border-bottom: 1px solid var(--sp-line); background: var(--sp-subtle); font-size: 12px; font-weight: 500; color: var(--sp-fg2); }
.sp-row { position: relative; isolation: isolate; padding-block: 9px; border-top: 1px solid var(--sp-line); }
.sp-th + .sp-row { border-top: 0; }
.sp-flash { position: absolute; inset: 0; z-index: -1; background: var(--sp-selected); }
.sp-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sp-name > span:last-child { display: grid; min-width: 0; line-height: 1.3; }
.sp-name b { font-weight: 500; }
.sp-name small { font-size: 12px; color: var(--sp-muted); }
.sp-tile { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1px solid var(--sp-line); border-radius: 6px; background: var(--sp-subtle); font-size: 12px; font-weight: 600; color: var(--sp-fg2); }
.sp-num { text-align: right; font-variant-numeric: tabular-nums; }
.sp-source { color: var(--sp-fg2); white-space: nowrap; }
.sp-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.sp-info { color: #1e40af; background: #eff6ff; border-color: #bfdbfe; }
.sp-neutral { color: #475569; background: #f1f5f9; border-color: #cbd5e1; }
.sp-attention { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.sp-failure { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.sp-issues { display: grid; gap: 8px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--sp-line); border-radius: 8px; background: var(--sp-surface); }
.sp-label { font-size: 12px; font-weight: 500; color: var(--sp-fg2); }
.sp-issue { display: flex; align-items: flex-start; gap: 10px; }
.sp-issue .sp-badge { flex: none; min-width: 44px; justify-content: center; }
.sp-issue > span:last-child { display: grid; min-width: 0; line-height: 1.35; }
.sp-issue b { font-weight: 500; }
.sp-issue small { font-size: 12px; color: var(--sp-muted); overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .sp-app { --sp-cols: minmax(0, 1fr) auto; }
  .sp-body { padding: 14px 14px 16px; }
  .sp-crumb { display: none; }
  .sp-title { font-size: 19px; }
  .sp-th, .sp-source { display: none; }
  .sp-row { gap: 6px 12px; }
  .sp-status { grid-column: 1; grid-row: 2; padding-left: 40px; }
  .sp-num { grid-column: 2; grid-row: 1 / span 2; }
}

/* ───── Chronato's status item and menu ───── */
/* After Sources/Chronato/MenuBarController.swift: the status item (StatusLook: Brand.menuBarGlyph, never tinted, and
   h:mm) and its native menu in system colours, light or dark with the page. No tomato: the spec keeps the accent out of
   the menu and the menu bar (design/chronato-interaction-spec.md §2). The menu runs past the card's foot, faded there;
   the idle state's parts are .ch-alt, hidden until demo.js plays. */
.ch-mac {
  --ch-fg: light-dark(rgb(0 0 0 / 0.85), rgb(255 255 255 / 0.88)); --ch-fg2: light-dark(rgb(0 0 0 / 0.56), rgb(255 255 255 / 0.56));
  --ch-bar: light-dark(#ececee, #1e1f22); --ch-menu: light-dark(#f6f6f6, #2a2a2d); --ch-line: light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.1));
  --ch-sel: light-dark(#0064e1, #0058d0);
  width: min(100%, 24rem); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  background: linear-gradient(160deg, light-dark(#dfe4e8, #1b1e22), light-dark(#c8d0d6, #0f1113));
  color: var(--ch-fg); text-align: left; overflow-wrap: normal; white-space: nowrap;
  font: 13px/16px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-variant-numeric: tabular-nums;
}
.ch-mac svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ch-mac .ch-fill { fill: currentColor; stroke: none; }
.ch-bar { display: flex; justify-content: flex-end; align-items: center; gap: 4px; height: 26px; padding: 0 8px; background: var(--ch-bar); }
.ch-item { display: flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; }
.ch-item.ch-open { background: light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.18)); }
.ch-glyph { display: grid; }
.ch-mac .ch-glyph svg { grid-area: 1 / 1; width: 18px; height: 18px; fill: currentColor; stroke: none; }
.ch-title { margin-left: 5px; }
.ch-title:empty { display: none; }
.ch-clock { padding: 0 6px; }
/* Fixed px rows, so the crop falls in the same place in every font: the running menu shows down to Show Reports. */
.ch-screen { display: grid; justify-items: end; align-items: start; height: 384px; padding: 4px 6px 0; mask-image: linear-gradient(#000 calc(100% - 60px), transparent); }
.ch-menu {
  grid-area: 1 / 1; display: grid; width: max-content; padding: 5px 0; border-radius: 11px; background: var(--ch-menu);
  box-shadow: 0 0 0 0.5px light-dark(rgb(0 0 0 / 0.2), #000), inset 0 0 0 1px light-dark(transparent, rgb(255 255 255 / 0.1)), 0 10px 28px rgb(0 0 0 / 0.22);
}
.ch-info, .ch-cmd, .ch-head { margin: 0 5px; padding: 3px 10px; }
.ch-info { padding-left: 32px; } /* titles line up past the image column, as AppKit lays out a menu with images */
.ch-info b, .ch-head { font-weight: 600; }
.ch-sec, .ch-head, .ch-key, .ch-cmd small { color: var(--ch-fg2); }
.ch-head { font-size: 11px; }
.ch-cmd { display: grid; grid-template-columns: 15px 1fr auto; align-items: center; gap: 0 7px; border-radius: 7px; }
.ch-cmd small { display: block; font-size: 11px; line-height: 14px; }
.ch-key { display: flex; justify-content: flex-end; padding-left: 16px; }
.ch-cmd.ch-on { background: var(--ch-sel); color: #fff; }
.ch-on small { color: rgb(255 255 255 / 0.85); }
.ch-dot { justify-self: center; width: 10px; height: 10px; border-radius: 50%; }
.ch-c1 { background: #e0a030; }
.ch-c2 { background: #4c9a6a; }
.ch-sep { height: 1px; margin: 5px 14px; background: var(--ch-line); }
.ch-alt { opacity: 0; }

/* ───── Eigenlaut's run page ───── */
/* After src/dashboard/editor/RunDetail.tsx in the frame's narrow top bar (Shell.tsx), with the tokens of src/ui/theme.css,
   kit.css, dash.css and editor.css, light or dark with the page; the brand accent is site.config.json's Cobalt. Inter is
   the copy already in /fonts/ (the same file as Eigenlaut's). Below it the signature, white like a mail in either theme,
   is the Card starter (src/shared/builtins.ts) with the hero demo's branding (src/marketing/demo.ts). Parts of the
   other stages are .el-alt, hidden until demo.js plays. */
@font-face { font-family: 'Inter Variable'; src: url('/fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
.el-demo { display: grid; gap: 12px; width: 100%; text-align: left; overflow-wrap: normal; }
.el-app {
  --el-bg: light-dark(#f6f6f4, #0f1012); --el-surface: light-dark(#ffffff, #16181b); --el-surface-2: light-dark(#f3f3f1, #1d2024);
  --el-surface-3: light-dark(#e9e9e6, #262a2f); --el-border: light-dark(#e2e2de, #2a2e33); --el-text: light-dark(#17181a, #ecedee);
  --el-muted: light-dark(#5f646a, #9aa0a6); --el-ok: light-dark(#12623c, #4cc38a); --el-info: light-dark(#1f5bb5, #6aa7ff);
  --el-accent: #2340b5; --el-accent-text: light-dark(#2340b5, color-mix(in srgb, #2340b5 55%, #fff));
  --el-accent-soft: color-mix(in srgb, #2340b5 16%, transparent);
  --el-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  overflow: hidden; border-radius: var(--radius); border: 1px solid var(--el-border); box-shadow: var(--shadow);
  background: var(--el-bg); color: var(--el-text);
  font: 400 13.5px/1.45 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-feature-settings: 'cv11', 'ss01';
}
.el-app svg { flex: none; width: 16px; height: 16px; }
.el-top { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; border-bottom: 1px solid var(--el-border); background: var(--el-surface); }
.el-brand { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 4px; font-size: 15px; font-weight: 680; letter-spacing: -0.01em; }
.el-app .el-mark { width: 24px; height: 24px; }
.el-menu { display: grid; place-items: center; width: 32px; height: 32px; color: var(--el-muted); }
.el-app .el-menu svg { width: 18px; height: 18px; }
.el-page { display: grid; gap: 12px; padding: 20px 20px 24px; }
.el-back { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-bottom: 4px; color: var(--el-muted); font-size: 12px; }
.el-app .el-back svg { width: 14px; height: 14px; }
.el-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; }
.el-head-text { display: grid; gap: 4px; }
.el-h1 { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.el-one { display: grid; justify-items: start; }
.el-one > * { grid-area: 1 / 1; }
.el-alt { opacity: 0; }
.el-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.el-neutral { background: var(--el-surface-3); color: var(--el-muted); }
.el-ok { background: color-mix(in srgb, var(--el-ok) 16%, transparent); color: var(--el-ok); }
.el-info { background: color-mix(in srgb, var(--el-info) 16%, transparent); color: var(--el-info); }
.el-btn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--el-border); background: var(--el-surface-2); font-weight: 520; white-space: nowrap; }
.el-card { min-width: 0; overflow: hidden; border: 1px solid var(--el-border); border-radius: 12px; background: var(--el-surface); }
.el-body { display: grid; gap: 12px; padding: 16px; }
.el-card-head { padding: 12px 16px; border-bottom: 1px solid var(--el-border); font-size: 15px; font-weight: 620; }
.el-num { font-family: var(--el-mono); font-size: 0.94em; font-variant-numeric: tabular-nums; }
.el-progress { display: flex; align-items: center; gap: 12px; }
.el-track { flex: 1; height: 8px; overflow: hidden; border-radius: 999px; background: var(--el-surface-3); }
.el-fill { display: block; height: 100%; border-radius: 999px; background: var(--el-accent); transform-origin: 0 50%; }
.el-meta { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 12px 40px; margin: 0; }
.el-meta dt { color: var(--el-muted); font-size: 11px; }
.el-meta dd { margin: 2px 0 0; }
.el-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.el-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--el-border);
  background: var(--el-surface); color: var(--el-muted); font-size: 12px; font-weight: 540; white-space: nowrap;
}
.el-chip b {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--el-accent); color: #fff;
  font: 650 10.5px var(--el-mono); font-variant-numeric: tabular-nums;
}
.el-pressed { color: var(--el-accent-text); border-color: color-mix(in srgb, var(--el-accent-text) 45%, transparent); background: var(--el-accent-soft); }
.el-list { display: grid; }
.el-list > * { grid-area: 1 / 1; align-self: start; }
.el-th, .el-item { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem 4.5rem 3.5rem; align-items: center; border-bottom: 1px solid var(--el-border); font-size: 12px; }
.el-item:last-child { border-bottom: 0; }
.el-th > *, .el-item > * { padding: 10px 12px; }
.el-th { color: var(--el-muted); font-size: 11px; font-weight: 620; }
.el-item .el-badge { justify-self: start; padding: 0 7px; margin-left: 12px; }
.el-addr { overflow-wrap: anywhere; } /* breaks before the domain (a <wbr>) only where a line is too narrow, as at 320 px */
.el-muted { color: var(--el-muted); }
/* The mail: Eigenlaut's preview document (demo.ts demoDocument), then the Card starter's table as a flex box. */
.el-mail { padding: 16px 20px 20px; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); background: #fff; color: #30343b; font: 14px/1.5 Arial, Helvetica, sans-serif; }
.el-mail p { margin: 0 0 8px; }
.el-sig {
  display: inline-flex; align-items: flex-start; gap: 20px; max-width: 100%; margin-top: 14px; padding: 15px; border: 1px solid #e0e0e0; border-radius: 8px;
  font-family: 'Segoe UI', Arial, sans-serif; line-height: 1.4;
}
.el-logo { flex: none; width: 64px; height: 64px; }
.el-lines { display: grid; min-width: 0; font-size: 13px; }
.el-name { padding-bottom: 2px; font-size: 18px; color: #2340b5; }
.el-title { display: grid; padding-bottom: 10px; font-size: 14px; color: #5b6170; }
.el-title > * { grid-area: 1 / 1; }
.el-co { padding-bottom: 3px; }
.el-link { padding-bottom: 3px; color: #2340b5; overflow-wrap: anywhere; }
.el-mailto { padding-top: 5px; }
@media (max-width: 560px) {
  .el-top { padding-inline: 12px; }
  .el-page { padding: 16px 12px 16px; }
  .el-h1 { font-size: 18px; }
  .el-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .el-body { padding: 12px; }
  .el-th, .el-item { grid-template-columns: minmax(0, 1fr) auto; }
  .el-th > *, .el-item > * { padding-inline: 8px; }
  .el-item .el-badge { margin: 0 8px; }
  .el-wide { display: none; }
  .el-mail { padding: 14px 14px 16px; }
  .el-sig { gap: 14px; padding: 12px; }
  .el-logo { width: 48px; height: 48px; }
}