/* Turnstile gate — shown until challenge completes */
.turnstile-gate {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--demo-surface, #f5f3ef);
}
.turnstile-card {
  text-align: center; padding: 2rem;
  max-width: 360px;
}
.turnstile-card h2 { margin: 0 0 .5rem; font-size: 1.5rem; }
.turnstile-card p  { margin: 0 0 1.5rem; color: var(--demo-text-muted, #666); }
.turnstile-card .cf-turnstile { display: inline-block; }
.turnstile-gate[hidden] { display: none; }
:root {
  --cockpit-bg: #f5f3ef;
  --cockpit-surface: #fdfdfb;
  --cockpit-nav-bg: #efede7;
  --cockpit-accent: #0d9488;
  --cockpit-accent-hover: #0f766e;
  --cockpit-accent-text: #ffffff;
  --cockpit-link: #0f766e;
  --cockpit-accent-50: #e6f7f5;
  --cockpit-selected-bg: #d7efe7;
  --cockpit-selected-fg: #082f2b;
  --cockpit-border: #e2ddd5;
  --cockpit-border-strong: #d0cac1;
  --cockpit-text: #21322b;
  --cockpit-text-secondary: #5b6a60;
  /* Floor token: must hold APCA |Lc| >= 60 on bg, surface, and nav-bg in
     every theme — enforced by scripts/check-contrast-apca.mjs. */
  --cockpit-text-muted: #63746a;
  --cockpit-muted: var(--cockpit-text-muted);
  --cockpit-hover-bg: #eaf4f0;
  --cockpit-success-bg: #ecfdf5;
  --cockpit-success-border: #14b8a6;
  --cockpit-success-text: #134e4a;
  --cockpit-warning-bg: #fff7ed;
  --cockpit-warning-border: #fdba74;
  --cockpit-warning-text: #9a3412;
  --cockpit-danger-bg: #fef2f2;
  --cockpit-danger-border: #fca5a5;
  --cockpit-danger-text: #991b1b;
  --cockpit-radius: 10px;
  /* Minimum interactive target (WCAG 2.1 AAA 2.5.5). Density yields to the HIT
     area, not the visual — see the affordance block near .btn. */
  --cockpit-target-min: 44px;
  --cockpit-radius-sm: 6px;
  --cockpit-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.06);
  --cockpit-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.08);
  --cockpit-focus: var(--cockpit-accent);
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-display: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-label: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body-weight: 400;
  --font-display-weight: 600;
  --font-label-weight: 550;
  --demo-sidebar-width: 200px;
  --demo-sidebar-collapsed-width: 52px;
}

@media (prefers-color-scheme: dark) {
  :root {
  --cockpit-bg: #0f1714;
  --cockpit-surface: #18241f;
  --cockpit-nav-bg: #121c18;
  --cockpit-accent: #469784;
  --cockpit-accent-hover: #3f8877;
  --cockpit-accent-text: #ffffff;
  --cockpit-link: #7ddac3;
  --cockpit-accent-50: #16372f;
  --cockpit-selected-bg: #16453b;
  --cockpit-selected-fg: #f7fffc;
  --cockpit-border: #3a4d45;
  --cockpit-border-strong: #4d5c52;
  --cockpit-text: #f7fffc;
  --cockpit-text-secondary: #d9e8e2;
  --cockpit-text-muted: #b0bcb4;
  --cockpit-hover-bg: #16372f;
  --cockpit-success-bg: #022c22;
  --cockpit-success-border: #14b8a6;
  --cockpit-success-text: #a7f3d0;
  --cockpit-warning-bg: #431407;
  --cockpit-warning-border: #fdba74;
  --cockpit-warning-text: #fed7aa;
  --cockpit-danger-bg: #450a0a;
  --cockpit-danger-border: #fca5a5;
  --cockpit-danger-text: #fecaca;
  --cockpit-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.12);
  }
}

html:has(#theme-light:checked){--cockpit-bg:#f5f3ef;--cockpit-surface:#fdfdfb;--cockpit-nav-bg:#efede7;--cockpit-accent:#0d9488;--cockpit-accent-hover:#0f766e;--cockpit-accent-text:#fff;--cockpit-link:#0f766e;--cockpit-accent-50:#e6f7f5;--cockpit-selected-bg:#d7efe7;--cockpit-selected-fg:#082f2b;--cockpit-border:#e2ddd5;--cockpit-border-strong:#d0cac1;--cockpit-text:#21322b;--cockpit-text-secondary:#5b6a60;--cockpit-text-muted:#63746a;--cockpit-hover-bg:#eaf4f0;--cockpit-success-bg:#ecfdf5;--cockpit-success-border:#14b8a6;--cockpit-success-text:#134e4a;--cockpit-warning-bg:#fff7ed;--cockpit-warning-border:#fdba74;--cockpit-warning-text:#9a3412;--cockpit-danger-bg:#fef2f2;--cockpit-danger-border:#fca5a5;--cockpit-danger-text:#991b1b;--cockpit-shadow-sm:0 1px 2px rgba(0,0,0,0.04),0 1px 4px rgba(0,0,0,0.06)}
html:has(#theme-dark:checked) {
  --cockpit-bg: #0f1714;
  --cockpit-surface: #18241f;
  --cockpit-nav-bg: #121c18;
  --cockpit-accent: #469784;
  --cockpit-accent-hover: #3f8877;
  --cockpit-accent-text: #ffffff;
  --cockpit-link: #7ddac3;
  --cockpit-accent-50: #16372f;
  --cockpit-selected-bg: #16453b;
  --cockpit-selected-fg: #f7fffc;
  --cockpit-border: #3a4d45;
  --cockpit-border-strong: #4d5c52;
  --cockpit-text: #f7fffc;
  --cockpit-text-secondary: #d9e8e2;
  --cockpit-text-muted: #b0bcb4;
  --cockpit-hover-bg: #16372f;
  --cockpit-success-bg: #022c22;
  --cockpit-success-border: #14b8a6;
  --cockpit-success-text: #a7f3d0;
  --cockpit-warning-bg: #431407;
  --cockpit-warning-border: #fdba74;
  --cockpit-warning-text: #fed7aa;
  --cockpit-danger-bg: #450a0a;
  --cockpit-danger-border: #fca5a5;
  --cockpit-danger-text: #fecaca;
  --cockpit-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.12);
}

html:has(#theme-forest:checked) {
  --cockpit-bg: #1c251a;
  --cockpit-surface: #263226;
  --cockpit-nav-bg: #1e281d;
  --cockpit-accent: #5a984a;
  --cockpit-accent-hover: #518943;
  --cockpit-accent-text: #ffffff;
  --cockpit-link: #96cb86;
  --cockpit-accent-50: #1e3819;
  --cockpit-selected-bg: #1e3d1a;
  --cockpit-selected-fg: #f2ffee;
  --cockpit-border: #3f523b;
  --cockpit-border-strong: #495d43;
  --cockpit-text: #e8f2e0;
  --cockpit-text-secondary: #c5d6bf;
  --cockpit-text-muted: #b6c2b8;
  --cockpit-hover-bg: #1e3819;
  --cockpit-success-bg: #0a2e0a;
  --cockpit-success-border: #4ade80;
  --cockpit-success-text: #bbf7d0;
  --cockpit-warning-bg: #3b2e0a;
  --cockpit-warning-border: #facc15;
  --cockpit-warning-text: #fef08a;
  --cockpit-danger-bg: #450a0a;
  --cockpit-danger-border: #fca5a5;
  --cockpit-danger-text: #fecaca;
  --cockpit-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.12);
}

html:has(#theme-ocean:checked) {
  --cockpit-bg: #0f1d2c;
  --cockpit-surface: #182c42;
  --cockpit-nav-bg: #122132;
  --cockpit-accent: #3f85c5;
  --cockpit-accent-hover: #3978b1;
  --cockpit-accent-text: #ffffff;
  --cockpit-link: #93c2e3;
  --cockpit-accent-50: #152a42;
  --cockpit-selected-bg: #1a3d5c;
  --cockpit-selected-fg: #f0f8ff;
  --cockpit-border: #2f4a65;
  --cockpit-border-strong: #3f5d78;
  --cockpit-text: #e6eff7;
  --cockpit-text-secondary: #c5d5e6;
  --cockpit-text-muted: #acc0d1;
  --cockpit-hover-bg: #152a42;
  --cockpit-success-bg: #0a2e1a;
  --cockpit-success-border: #34d399;
  --cockpit-success-text: #a7f3d0;
  --cockpit-warning-bg: #3b300a;
  --cockpit-warning-border: #fbbf24;
  --cockpit-warning-text: #fde68a;
  --cockpit-danger-bg: #450a0a;
  --cockpit-danger-border: #fca5a5;
  --cockpit-danger-text: #fecaca;
  --cockpit-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.12);
}

html:has(#theme-sepia:checked) {
  --cockpit-bg: #2d241a;
  --cockpit-surface: #3c3226;
  --cockpit-nav-bg: #2f261b;
  --cockpit-accent: #b57e3e;
  --cockpit-accent-hover: #a37138;
  --cockpit-accent-text: #ffffff;
  --cockpit-link: #e3b886;
  --cockpit-accent-50: #3a2818;
  --cockpit-selected-bg: #3d2a1a;
  --cockpit-selected-fg: #fff2e0;
  --cockpit-border: #504234;
  --cockpit-border-strong: #5d4e3e;
  --cockpit-text: #efe0cc;
  --cockpit-text-secondary: #d4c5b0;
  --cockpit-text-muted: #d0bca9;
  --cockpit-hover-bg: #3a2818;
  --cockpit-success-bg: #1e2e0a;
  --cockpit-success-border: #65a30d;
  --cockpit-success-text: #d9f99d;
  --cockpit-warning-bg: #3b280a;
  --cockpit-warning-border: #d97706;
  --cockpit-warning-text: #fde68a;
  --cockpit-danger-bg: #450a0a;
  --cockpit-danger-border: #fca5a5;
  --cockpit-danger-text: #fecaca;
  --cockpit-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.12);
}

* {
  box-sizing: border-box;
}

button {
  /* UA ButtonText follows the OS color-scheme (meta color-scheme
     "light dark"), not the app's theme radios — under an OS/app mismatch
     any button without an explicit color renders wrong-polarity text.
     Inherit the themed ink instead. */
  color: inherit;
}

body {
  background: radial-gradient(ellipse at 50% 0%, var(--cockpit-surface) 0%, var(--cockpit-bg) 70%);
  color: var(--cockpit-text);
  font-family: var(--font-family);
  font-weight: var(--font-body-weight);
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

html,
body {
  max-width: 100%;
}

html {
  scrollbar-width: auto;
  scrollbar-color: var(--cockpit-border-strong) var(--cockpit-bg);
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--cockpit-bg);
  border-inset-inline-start: 1px solid var(--cockpit-border);
}

::-webkit-scrollbar-thumb {
  background: var(--cockpit-border-strong);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--cockpit-text-muted);
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-button {
  display: block;
  background: var(--cockpit-nav-bg);
}

::-webkit-scrollbar-button:vertical:decrement,
::-webkit-scrollbar-button:vertical:increment,
::-webkit-scrollbar-button:horizontal:decrement,
::-webkit-scrollbar-button:horizontal:increment {
  background-color: var(--cockpit-text-muted);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

::-webkit-scrollbar-button:vertical:decrement {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path d='M4 2L1 6h6z'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path d='M4 2L1 6h6z'/></svg>");
}

::-webkit-scrollbar-button:vertical:increment {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path d='M1 2l3 4 3-4z'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path d='M1 2l3 4 3-4z'/></svg>");
}

::-webkit-scrollbar-button:horizontal:decrement {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path d='M6 1L2 4l4 3z'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path d='M6 1L2 4l4 3z'/></svg>");
}

::-webkit-scrollbar-button:horizontal:increment {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path d='M2 1l4 3-4 3z'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path d='M2 1l4 3-4 3z'/></svg>");
}

::-webkit-scrollbar-corner {
  background: var(--cockpit-bg);
}

h1,
h2,
h3,
.demo-brand strong,
.demo-card-title {
  font-family: var(--font-family-display);
  font-weight: var(--font-display-weight);
  letter-spacing: normal;
}

::selection {
  background: var(--cockpit-selected-bg);
  color: var(--cockpit-text);
}

:focus-visible {
  outline: 3px solid var(--cockpit-accent);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: 2px solid var(--cockpit-accent);
  outline-offset: 2px;
}

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

@media (forced-colors: active) {
  .btn-primary, .demo-chip[aria-pressed="true"], .demo-state-pill {
    border: 2px solid ButtonText;
  }
  ::-webkit-scrollbar-thumb { background: ButtonText; }
  ::-webkit-scrollbar-track { background: Canvas; }
  ::-webkit-scrollbar-button { background: ButtonFace; }
  .demo-sidebar.nav-rail::-webkit-scrollbar-thumb { background: ButtonText; }
  .demo-cmdk-list::-webkit-scrollbar-thumb { background: ButtonText; }
}

.skip-link {
  background: var(--cockpit-accent);
  border-radius: var(--cockpit-radius-sm);
  color: var(--cockpit-accent-text);
  font-size: 13px;
  font-weight: 560;
  inset-inline-start: 8px;
  padding: 8px 16px;
  position: absolute;
  text-decoration: none;
  top: -100px;
  transition: top 0.12s ease;
  z-index: 10000;
}

.skip-link:focus {
  top: 8px;
}

.btn[hidden] {
  display: none;
}

/* Motor / accessibility affordances (WCAG 2.1 AAA 2.5.5). Buttons and native
   form controls clear the 44px minimum target; a compact control whose visual
   must stay small takes .demo-tap, which expands the HIT area to 44px with a
   centred invisible overlay and leaves the look untouched. Density stays in the
   visual, reach lives in the hit area. */
.btn,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select {
  min-height: var(--cockpit-target-min);
}
.demo-tap {
  position: relative;
}
.demo-tap::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: var(--cockpit-target-min);
  min-height: var(--cockpit-target-min);
  width: 100%;
  height: 100%;
}
/* Decorative motion off for motion-sensitive users; state still reads via color
   and border. */
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
  .btn:active {
    transform: none;
  }
}

.btn {
  align-items: center;
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: 999px;
  color: var(--cockpit-text-secondary);
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 560;
  gap: 6px;
  padding: 6px 14px;
  text-decoration: none;
  transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}

.btn:hover {
  background: var(--cockpit-accent-50);
  border-color: var(--cockpit-accent);
  box-shadow: var(--cockpit-shadow-sm);
}

textarea {
  resize: vertical;
  min-height: 56px;
}
  transform: translateY(-1px);
}

/* Pressed: the button visibly sinks and darkens so every click reads. */
.btn:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--cockpit-selected-bg);
  border-color: var(--cockpit-accent);
  box-shadow: none;
  transform: translateY(1px);
}

.btn:is(:disabled,[aria-disabled="true"]) {
  background: var(--cockpit-bg);
  border-color: var(--cockpit-border);
  color: var(--cockpit-text-muted);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.btn-primary {
  background: var(--cockpit-accent);
  border-color: var(--cockpit-accent);
  color: var(--cockpit-accent-text);
}

.btn-primary:hover {
  background: var(--cockpit-accent-hover);
  border-color: var(--cockpit-accent-hover);
}

.btn-primary:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--cockpit-accent-hover);
  border-color: var(--cockpit-accent-hover);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.22);
  transform: translateY(1px);
}

.btn-primary:is(:disabled,[aria-disabled="true"]) {
  background: var(--cockpit-border-strong);
  border-color: var(--cockpit-border-strong);
  color: var(--cockpit-bg);
}

/* Every other clickable family gets the same pressed acknowledgment. */
.demo-chip:active,
.demo-nav-item:active,
.demo-method-card:active,
.demo-profile-card:active,
.demo-bottom-item:active {
  background: var(--cockpit-selected-bg);
  border-color: var(--cockpit-accent);
  transform: translateY(1px);
}

.demo-card-title:active,
.demo-linkish:active {
  color: var(--cockpit-link);
}

.btn-sm {
  font-size: 12px;
  padding: 3px 10px;
}

.demo-calendar-grid,
.demo-row-actions {
  overflow: visible;
}

.demo-app-shell .sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.demo-clipboard-hidden-target {
  height: 1px;
  inset: 0 auto auto -9999px;
  opacity: 0;
  position: fixed;
  width: 1px;
}

.demo-app-shell {
  background: var(--cockpit-bg);
  color: var(--cockpit-text);
  display: grid;
  grid-template-columns: var(--demo-sidebar-width) minmax(0, 1fr);
  transition: grid-template-columns 0.25s ease;
  min-height: 100vh;
  --demo-font-scale: 1;
  --demo-motion-duration: 0.12s;
  --demo-panel-radius: var(--cockpit-radius);
  --demo-shell-font-size: 14px;
  --demo-shell-line-height: 1.5;
  --demo-card-title-weight: var(--font-display-weight);
  --demo-card-meta-weight: var(--font-body-weight);
  --demo-meta-font-weight: 480;
  --demo-card-bg: var(--cockpit-surface);
  --demo-card-border: var(--cockpit-border);
  --demo-panel-bg: var(--cockpit-surface);
  --demo-panel-shadow: var(--cockpit-shadow-sm);
  --demo-panel-hover-shadow: var(--cockpit-shadow-sm);
  --demo-card-shadow: var(--cockpit-shadow-sm);
  --demo-card-hover-shadow: var(--cockpit-shadow-sm);
  --demo-card-selected-shadow: none;
  --demo-card-head-bg: transparent;
  --demo-card-banner-bg: var(--cockpit-nav-bg);
  --demo-work-card-bg: var(--cockpit-surface);
  --demo-work-card-border: var(--cockpit-border);
  --demo-work-card-shadow: var(--cockpit-shadow-sm);
  --demo-work-card-hover-shadow: var(--cockpit-shadow-md, 0 4px 12px rgba(0,0,0,0.1));
  --demo-work-card-selected-shadow: 0 0 0 2px var(--cockpit-accent);
  --demo-work-card-alert-border: var(--cockpit-warning-border);
  --demo-card-inner-bg: var(--cockpit-nav-bg);
  --demo-card-inner-border: var(--cockpit-border);
  --demo-card-divider: var(--cockpit-border);
  --demo-card-command-bg: var(--cockpit-accent-50);
  --demo-card-memory-bg: var(--cockpit-accent-50);
  --demo-card-memory-border: var(--cockpit-accent);
  --demo-card-meta-bg: var(--cockpit-nav-bg);
  --demo-card-status-bg: var(--cockpit-accent-50);
  --demo-card-status-border: var(--cockpit-accent);
  --demo-focus-ring: var(--cockpit-accent);
  --demo-command-accent: var(--cockpit-selected-bg);
  --demo-command-line-accent: var(--cockpit-border-strong);
  --demo-command-line-border: var(--cockpit-border);
  --demo-command-bg: var(--cockpit-surface);
  --demo-meta-bg: var(--cockpit-nav-bg);
  --demo-primary-bg: var(--cockpit-accent);
  --demo-primary-border: var(--cockpit-accent);
  --demo-primary-focus-bg: var(--cockpit-accent-hover);
  --demo-primary-on-accent: var(--cockpit-accent-text);
  --demo-form-band-bg: var(--cockpit-nav-bg);
  --demo-form-section-bg: var(--cockpit-surface);
  --demo-form-field-bg: var(--cockpit-surface);
  --demo-form-field-border: var(--cockpit-border);
  --demo-form-field-outline: transparent;
  --demo-form-control-bg: var(--cockpit-surface);
  --demo-form-control-border: var(--cockpit-border);
  --demo-form-control-focus-bg: var(--cockpit-surface);
  --demo-form-group-border: var(--cockpit-border);
  --demo-form-outer-border: var(--cockpit-border);
  --demo-form-divider: var(--cockpit-border);
  --demo-form-header-bg: var(--cockpit-nav-bg);
  --demo-form-inner-shadow: inset 0 0 0 1px var(--demo-form-field-outline);
  --demo-form-focus-shadow: 0 0 0 1px var(--cockpit-accent);
  font-size: calc(var(--demo-shell-font-size) * var(--demo-font-scale));
  line-height: var(--demo-shell-line-height);
}

.is-sidebar-collapsed.demo-app-shell {
  grid-template-columns: var(--demo-sidebar-collapsed-width) minmax(0, 1fr);
}
@media (prefers-color-scheme: dark) {
  .demo-app-shell {
  --demo-panel-bg: var(--cockpit-surface);
  --demo-card-bg: var(--cockpit-surface);
  --demo-card-border: var(--cockpit-border-strong);
  --demo-card-head-bg: transparent;
  --demo-card-banner-bg: var(--cockpit-nav-bg);
  --demo-command-accent: var(--cockpit-selected-bg);
  --demo-focus-ring: var(--cockpit-accent);
  --demo-primary-bg: var(--cockpit-accent);
  --demo-primary-border: var(--cockpit-accent);
  --demo-primary-focus-bg: var(--cockpit-accent-hover);
  --demo-primary-on-accent: var(--cockpit-accent-text);
  --demo-command-line-accent: var(--cockpit-border-strong);
  --demo-command-line-border: var(--cockpit-border);
  --demo-command-bg: var(--cockpit-surface);
  --demo-meta-bg: var(--cockpit-nav-bg);
  --demo-work-card-bg: var(--cockpit-surface);
  --demo-work-card-border: var(--cockpit-border);
  --demo-work-card-shadow: var(--cockpit-shadow-sm);
  --demo-work-card-hover-shadow: var(--cockpit-shadow-md, var(--cockpit-shadow-sm));
  --demo-work-card-selected-shadow: 0 0 0 2px var(--cockpit-accent);
  --demo-work-card-alert-border: var(--cockpit-warning-border);
  --demo-card-inner-bg: var(--cockpit-nav-bg);
  --demo-card-inner-border: var(--cockpit-border);
  --demo-card-divider: var(--cockpit-border);
  --demo-card-command-bg: var(--cockpit-accent-50);
  --demo-card-memory-bg: var(--cockpit-accent-50);
  --demo-card-memory-border: var(--cockpit-accent);
  --demo-card-meta-bg: var(--cockpit-nav-bg);
  --demo-card-status-bg: var(--cockpit-accent-50);
  --demo-card-status-border: var(--cockpit-accent);
  }
}


.demo-app-shell.app-shell {
  padding-inline-start: 0;
}

html:has(#theme-dark:checked) .demo-app-shell {
  --demo-panel-bg: var(--cockpit-surface);
  --demo-card-bg: var(--cockpit-surface);
  --demo-card-border: var(--cockpit-border-strong);
  --demo-card-head-bg: transparent;
  --demo-card-banner-bg: var(--cockpit-nav-bg);
  --demo-command-accent: var(--cockpit-selected-bg);
  --demo-focus-ring: var(--cockpit-accent);
  --demo-primary-bg: var(--cockpit-accent);
  --demo-primary-border: var(--cockpit-accent);
  --demo-primary-focus-bg: var(--cockpit-accent-hover);
  --demo-primary-on-accent: var(--cockpit-accent-text);
  --demo-command-line-accent: var(--cockpit-border-strong);
  --demo-command-line-border: var(--cockpit-border);
  --demo-command-bg: var(--cockpit-surface);
  --demo-meta-bg: var(--cockpit-nav-bg);
  --demo-work-card-bg: var(--cockpit-surface);
  --demo-work-card-border: var(--cockpit-border);
  --demo-work-card-shadow: var(--cockpit-shadow-sm);
  --demo-work-card-hover-shadow: var(--cockpit-shadow-md, var(--cockpit-shadow-sm));
  --demo-work-card-selected-shadow: 0 0 0 2px var(--cockpit-accent);
  --demo-work-card-alert-border: var(--cockpit-warning-border);
  --demo-card-inner-bg: var(--cockpit-nav-bg);
  --demo-card-inner-border: var(--cockpit-border);
  --demo-card-divider: var(--cockpit-border);
  --demo-card-command-bg: var(--cockpit-accent-50);
  --demo-card-memory-bg: var(--cockpit-accent-50);
  --demo-card-memory-border: var(--cockpit-accent);
  --demo-card-meta-bg: var(--cockpit-nav-bg);
  --demo-card-status-bg: var(--cockpit-accent-50);
  --demo-card-status-border: var(--cockpit-accent);
}

html:has(#theme-dark:checked) .demo-app-shell {
  --demo-panel-shadow: var(--cockpit-shadow-sm);
  --demo-panel-hover-shadow: var(--cockpit-shadow-sm);
  --demo-card-shadow: var(--cockpit-shadow-sm);
  --demo-card-hover-shadow: var(--cockpit-shadow-sm);
  --demo-card-selected-shadow: none;
}

.demo-sidebar {
  background: linear-gradient(180deg, var(--cockpit-nav-bg), color-mix(in srgb, var(--cockpit-nav-bg) 96%, var(--cockpit-bg)));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 0;
  border-inset-inline-end: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-width: 100%;
  min-width: 0;
  min-height: 100vh;
  padding: 8px 0;
  position: sticky;
  top: 0;
  z-index: 25;
}

.demo-sidebar.nav-rail {
  height: 100dvh;
  transition: width 0.25s ease;
  max-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: sticky;
  scrollbar-gutter: auto;
  scrollbar-width: auto;
  scrollbar-color: var(--cockpit-border-strong) var(--cockpit-bg);
  width: var(--demo-sidebar-width);
}

.is-sidebar-collapsed .demo-sidebar.nav-rail {
  width: var(--demo-sidebar-collapsed-width);
}

.is-sidebar-collapsed .demo-sidebar.nav-rail .demo-nav-item strong,
.is-sidebar-collapsed .demo-sidebar.nav-rail .demo-sidebar-note,
.is-sidebar-collapsed .demo-sidebar.nav-rail .demo-brand span:not(.demo-brand-mark) {
  display: none;
}


.is-sidebar-collapsed .demo-sidebar.nav-rail .demo-nav-item { justify-content: center; padding: 0; }

.is-sidebar-collapsed .demo-sidebar.nav-rail .nav-rail-icon { margin: 0; }

.is-sidebar-collapsed .demo-sidebar.nav-rail .demo-brand { justify-content: center; }

.demo-sidebar.nav-rail::-webkit-scrollbar {
  width: 8px;
}

.demo-sidebar.nav-rail::-webkit-scrollbar-track {
  background: var(--cockpit-bg);
}

.demo-sidebar.nav-rail::-webkit-scrollbar-thumb,
.demo-sidebar.nav-rail::-webkit-scrollbar-thumb:hover {
  border-radius: 4px;
  border: 1px solid transparent;
  background-clip: padding-box;
}

.demo-sidebar.nav-rail::-webkit-scrollbar-thumb {
  background: var(--cockpit-border-strong);
}

.demo-sidebar.nav-rail::-webkit-scrollbar-thumb:hover {
  background: var(--cockpit-text-muted);
}

.demo-sidebar:hover,
.demo-sidebar:focus-within,
.demo-sidebar:hover,
.demo-sidebar:focus-within {
  border-right-color: var(--cockpit-border);
}

.demo-sidebar:focus-visible {
  outline: 3px solid var(--demo-focus-ring);
  outline-offset: -6px;
}

.demo-brand {
  align-items: center;
  color: var(--cockpit-text);
  display: inline-flex;
  gap: 8px;
  margin-bottom: 6px;
  padding: 8px 10px 12px;
  text-decoration: none;
  border-bottom: 1px solid var(--cockpit-border);
  width: 100%;
}

.demo-brand.nav-rail-brand-link {
  flex: 0 0 auto;
}

.demo-brand-mark {
  align-items: center;
  background: var(--cockpit-accent-50);
  border: 1px solid var(--cockpit-accent);
  border-radius: var(--cockpit-radius-sm);
  box-shadow: none;
  color: var(--cockpit-accent);
  display: inline-flex;
  font-weight: var(--font-display-weight);
  height: 28px;
  justify-content: center;
  width: 28px;
}

.demo-brand-mark.nav-rail-brand-mark {
  height: 28px;
  width: 28px;
}

.demo-sidebar-collapse {
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--cockpit-text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
  position: absolute;
  inset-inline-end: 8px;
  top: 12px;
  transition: color 0.15s ease, transform 0.2s ease;
  z-index: 2;
}

.demo-sidebar-collapse:hover {
  color: var(--cockpit-text);
}

.demo-brand strong {
  display: block;
  font-family: var(--font-family-display);
  font-size: 15px;
  font-weight: 670;
  letter-spacing: 0;
  line-height: 1;
}

.demo-brand small,
.demo-kicker,
.section-label,
.demo-command-label {
  color: var(--cockpit-text-muted);
  display: block;
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0;
  text-transform: uppercase;
}

.demo-brand small {
  font-size: 10px;
  font-weight: 580;
  letter-spacing: 0;
  text-transform: none;
}

.demo-nav {
  align-content: start;
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
  padding-top: 4px;
  width: 100%;
}

.demo-nav-sep {
  height: 1px;
  background: var(--cockpit-border);
  margin: 7px 10px 5px;
}

.demo-nav-group {
  border-bottom: 1px solid var(--cockpit-border);
  display: grid;
  gap: 2px;
  padding: 0 0 8px;
}

.demo-nav-group:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.demo-nav-group[open] {
  border-color: var(--cockpit-border);
}

.demo-nav-group-label {
  align-items: center;
  border-radius: var(--cockpit-radius-sm);
  color: var(--cockpit-text-muted);
  cursor: pointer;
  display: flex;
  font-size: 10px;
  font-weight: 660;
  gap: 6px;
  letter-spacing: 0;
  line-height: 1.2;
  list-style: none;
  margin: 0 4px 2px;
  min-height: 26px;
  padding: 4px 12px;
  text-transform: uppercase;
}

.demo-nav-group-label::-webkit-details-marker {
  display: none;
}

.demo-nav-group-label::after {
  color: var(--cockpit-text-muted);
  content: "+";
  font-weight: 720;
  margin-inset-inline-start: auto;
}

.demo-nav-group[open] > .demo-nav-group-label::after {
  content: "-";
}

.demo-nav-group-label:focus-visible {
  outline: 3px solid var(--demo-focus-ring);
  outline-offset: 2px;
}

.demo-nav-group-items {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.demo-nav-item {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--cockpit-text-muted);
  display: flex;
  gap: 8px;
  min-height: 40px;
  margin: 0 4px;
  min-width: 0;
  padding: 0 12px;
  position: relative;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  width: calc(100% - 8px);
}

.demo-nav-item.nav-rail-btn {
  border: 1px solid transparent;
  border-radius: var(--cockpit-radius-sm);
  height: 40px;
}

.demo-nav-item:hover {
  background: var(--cockpit-accent-50);
  color: var(--cockpit-accent);
  transform: translateX(2px);
}

.demo-nav-item:focus-visible {
  outline: 3px solid var(--demo-focus-ring);
  outline-offset: 2px;
}

.demo-nav-item span {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--cockpit-radius-sm);
  color: var(--cockpit-text-muted);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 640;
  height: 20px;
  justify-content: center;
  min-width: 18px;
  width: 18px;
}

.demo-nav-item .nav-rail-icon {
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  color: var(--cockpit-text-muted);
}

.demo-nav-item strong {
  font-size: 13px;
  font-weight: 400;
}

.demo-nav-item.active {
  background: var(--cockpit-selected-bg);
  border-color: var(--cockpit-border);
  color: var(--cockpit-selected-fg);
  font-weight: 480;
}

.demo-nav-item.active::before {
  background: var(--cockpit-accent);
  border-radius: 0 3px 3px 0;
  bottom: 6px;
  content: "";
  left: -4px;
  position: absolute;
  top: 6px;
  width: 3px;
}

.demo-nav-item.active span {
  background: var(--cockpit-accent);
  border-color: var(--cockpit-accent);
  color: var(--cockpit-accent-text);
}

body .demo-sidebar.nav-rail .demo-nav-item.nav-rail-btn.active .nav-rail-icon {
  background: var(--demo-primary-on-accent);
  border-color: var(--demo-primary-on-accent);
  color: var(--cockpit-accent);
}

.demo-sidebar-note {
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  color: var(--cockpit-text-muted);
  font-size: 13px;
  line-height: 1.45;
  margin: auto 10px 0;
  max-width: none;
  padding: 12px;
  background: var(--cockpit-surface);
}

.demo-sidebar-note strong {
  color: var(--cockpit-text);
  display: block;
}

.demo-shell {
  min-width: 0;
  width: 100%;
}

.demo-header-inner {
  max-width: 1240px;
  min-width: 0;
  gap: 12px;
}

.demo-screen-title {
  font-family: var(--font-family-display);
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 670;
  line-height: 1;
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.demo-header-metadata {
  align-items: center;
  border: 0;
  border-inset-inline-start: 1px solid var(--cockpit-border);
  border-radius: 0;
  color: var(--cockpit-text-secondary);
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  padding: 4px 0 4px 12px;
}

html:has(#theme-dark:checked) .demo-header-metadata {
  background: transparent;
  border-color: var(--cockpit-border);
  color: var(--cockpit-text-secondary);
}

.demo-header-metadata small {
  color: var(--cockpit-text-muted);
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0;
  text-transform: uppercase;
}

.demo-header-metadata strong {
  color: var(--cockpit-text);
  font-family: var(--font-family-display);
  font-size: 14px;
  line-height: 1;
}

.demo-header-metadata a {
  color: var(--cockpit-text);
  font-size: 12px;
  font-weight: 560;
  text-decoration: none;
}

.demo-header-metadata a:hover,
.demo-header-metadata a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.demo-header-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-inset-inline-start: auto;
  min-width: 0;
}

.demo-main {
  display: grid;
  gap: 20px;
  margin: 0 auto;
  max-width: 1240px;
  min-width: 0;
  padding: 24px 32px 104px;
}

@media (min-width: 981px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .demo-app-shell {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .demo-sidebar,
  .demo-sidebar.nav-rail {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: auto;
  }

  .demo-shell {
    height: 100dvh;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: auto;
  }

  .demo-main {
    width: 100%;
  }
}

.demo-notice,
.demo-sync,
.demo-command-brief,
.demo-toolbar,
.demo-panel,
.demo-metric,
.demo-work-card,
.demo-review-card,
.demo-row,
.demo-note,
.demo-scenario-card {
  margin-bottom: 0;
  position: relative;
}

.demo-toolbar,
.demo-panel {
  background: var(--demo-panel-bg);
  border: 1px solid transparent;
  border-radius: var(--demo-panel-radius);
  box-shadow: var(--demo-panel-shadow);
  min-width: 0;
  transition: background-color var(--demo-motion-duration) ease, border-color var(--demo-motion-duration) ease, box-shadow var(--demo-motion-duration) ease;
}

.demo-toolbar:hover,
.demo-panel:hover {
  border-color: var(--cockpit-border);
  box-shadow: var(--demo-panel-hover-shadow);
}

.demo-command-brief.sidecar {
  margin-bottom: 0;
}

.demo-notice {  color: var(--cockpit-text-secondary);
  font-size: 13px;
  line-height: 1.35;
  padding: 9px 12px;
}

.demo-notice strong {
  color: var(--cockpit-text);
}

.demo-sync[hidden] {
  display: none;
}

.demo-sync-details {
  border-bottom: 1px solid var(--cockpit-border);
  font-size: 12px;
}

.demo-sync-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--cockpit-text-muted);
  list-style: none;
  user-select: none;
}

.demo-sync-summary::-webkit-details-marker {
  display: none;
}

.demo-sync-summary span {
  font-weight: 560;
  color: var(--cockpit-text);
}

.demo-sync-summary small {
  font-size: 11px;
}

.demo-sync-summary::before {
  content: "▶";
  font-size: 8px;
  transition: transform 0.15s ease;
}

.demo-sync-details[open] .demo-sync-summary::before {
  transform: rotate(90deg);
}

.demo-sync {
  align-items: center;
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--demo-panel-radius);
  color: var(--cockpit-text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: space-between;
  padding: 10px 12px;
}

.demo-sync-copy {
  display: grid;
  gap: 2px;
  min-width: 180px;
}

.demo-sync-copy strong {
  color: var(--cockpit-text);
  font-size: 13px;
  line-height: 1.1;
}

.demo-sync-copy span,
.demo-sync p {
  color: var(--cockpit-text-secondary);
  font-size: 12px;
  line-height: 1.35;
  margin: 0;
}

.demo-sync-controls {
  align-items: center;
  display: flex;
  flex: 1 1 360px;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.demo-sync-controls input {
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius-sm);
  color: var(--cockpit-text);
  flex: 1 1 150px;
  font: inherit;
  font-size: 13px;
  max-width: 190px;
  min-height: 34px;
  min-width: 0;
  padding: 7px 9px;
  text-transform: uppercase;
}

.demo-sync-controls input:focus-visible {
  border-color: var(--cockpit-accent);
  outline: 3px solid var(--demo-focus-ring);
  outline-offset: 2px;
}

.demo-sync-share[hidden] {
  display: none;
}

.demo-sync-share {
  align-items: center;
  border-top: 1px solid var(--cockpit-border);
  display: flex;
  flex: 1 0 100%;
  gap: 12px;
  justify-content: space-between;
  min-width: 0;
  padding-top: 10px;
}

.demo-sync-share a {
  align-items: center;
  color: var(--cockpit-accent);
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  min-height: 34px;
  overflow-wrap: anywhere;
}

.demo-sync-share a:focus-visible {
  outline: 3px solid var(--demo-focus-ring);
  outline-offset: 2px;
}

.demo-sync-qr {
  align-items: center;
  background: #fff;
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius-sm);
  display: flex;
  flex: 0 0 auto;
  height: 118px;
  justify-content: center;
  padding: 8px;
  width: 118px;
}

.demo-sync-qr svg {
  display: block;
  height: 100%;
  width: 100%;
}

.demo-sync p {
  flex: 1 0 100%;
}

.demo-recovery-panel {
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 10px;
}

.demo-recovery-panel summary {
  align-items: center;
  color: var(--cockpit-text);
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  list-style: none;
  min-height: var(--cockpit-target-min);
  padding: 2px 4px;
}

.demo-recovery-panel summary:focus-visible {
  outline: 3px solid var(--demo-focus-ring);
  outline-offset: 2px;
}

.demo-recovery-panel summary::-webkit-details-marker {
  display: none;
}

.demo-recovery-panel summary::after {
  color: var(--cockpit-accent);
  content: "+";
  font-size: 16px;
  line-height: 1;
}

.demo-recovery-panel[open] summary::after {
  content: "-";
}

.demo-recovery-panel summary span {
  font-size: 13px;
  font-weight: 660;
}

.demo-recovery-panel summary small,
.demo-recovery-panel p,
.demo-recovery-panel label {
  color: var(--cockpit-text-secondary);
  font-size: 12px;
  font-weight: 560;
  line-height: 1.35;
  margin: 0;
}

.demo-recovery-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  min-width: 0;
}

.demo-recovery-panel .demo-inline-form {
  align-items: stretch;
  background: var(--demo-card-field-bg);
  border: 1px solid var(--demo-card-inner-border);
  border-radius: var(--cockpit-radius-sm);
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
}

.demo-recovery-panel .btn {
  justify-self: start;
}

.demo-recovery-panel textarea.demo-search-input {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.45;
  margin-top: 0;
  min-height: 132px;
  resize: vertical;
}

.demo-command-brief {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.demo-command-top,
.demo-command-footer,
.demo-panel-head,
.demo-section-header {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.demo-review-head-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: flex-end;
}

.demo-command-top h2,
.demo-panel h2 {
  font-family: var(--font-family-display);
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 680;
  line-height: 1.05;
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.demo-edit-panel .demo-panel-head {
  align-items: flex-start;
}

.demo-edit-panel .demo-panel-head p{margin-top:4px}

.demo-pack-subtitle {
  color: var(--cockpit-text-secondary);
  font-size: 14px;
  font-weight: 520;
  line-height: 1.35;
  margin: 6px 0 0;
  max-width: 72ch;
}

.demo-command-state {
  background: var(--demo-command-accent);
  border: 1px solid var(--demo-command-line-border);
  border-radius: 999px;
  color: var(--cockpit-text);
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 610;
  padding: 6px 10px;
}

.demo-command-lines {
  display: grid;
  gap: 8px;
}

.demo-command-lines.compact {
  gap: 7px;
}

.demo-command-line {
  align-items: center;
  background: var(--demo-command-bg);
  border: 1px solid var(--demo-command-line-border);
  border-radius: var(--cockpit-radius);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(110px, 0.35fr) minmax(0, 1fr);
  min-width: 0;
  overflow: visible;
  padding: 10px 12px;
  position: relative;
}

.demo-command-line::before {
  background: var(--demo-command-line-accent);
  border-radius: 999px;
  bottom: 10px;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 10px;
  width: 1px;
}

.demo-command-line span,
.demo-command-row span {
  color: var(--cockpit-text-muted);
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0;
  text-transform: uppercase;
}

.demo-command-line strong {
  color: var(--cockpit-text);
  font-size: 15px;
  font-weight: 610;
  min-width: 0;
  overflow-wrap: anywhere;
}

.demo-command-memory {
  background: var(--cockpit-selected-bg);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  display: grid;
  gap: 4px;
  padding: 10px 12px;
}

.demo-command-memory[hidden] {
  display: none;
}

.demo-command-memory span {
  color: var(--cockpit-text-muted);
  font-size: 11px;
  font-weight: 610;
  letter-spacing: 0;
  text-transform: uppercase;
}

.demo-command-memory strong {
  color: var(--cockpit-text);
  font-size: 13px;
  font-weight: 590;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.demo-command-receipt {
  animation: demo-clipboard-pop 180ms ease-out;
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  display: grid;
  gap: 10px;
  padding: 12px 14px;
}

.demo-command-receipt[data-receipt-kind="clipboard"] {
  background: var(--cockpit-selected-bg);
  border-color: var(--cockpit-accent);
  box-shadow: var(--cockpit-shadow-sm);
}

.demo-command-receipt[data-receipt-tone="blocked"] {
  background: var(--cockpit-danger-bg);
  border-color: var(--cockpit-danger-border);
  border-color: var(--cockpit-danger-border);
}

.demo-command-receipt[hidden] {
  display: none;
}

.demo-command-receipt-head {
  display: grid;
  gap: 4px;
}

.demo-command-receipt-head span,
.demo-command-receipt-lines span {
  color: var(--cockpit-text-muted);
  font-size: 11px;
  font-weight: 610;
  letter-spacing: 0;
  text-transform: uppercase;
}

.demo-command-receipt-head strong {
  color: var(--cockpit-text);
  font-size: 14px;
  font-weight: 610;
  line-height: 1.3;
}

.demo-command-receipt-lines {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.demo-command-receipt-lines div,
.demo-card-receipt-lines div {
  border-top: 1px solid var(--cockpit-border);
  display: grid;
  gap: 3px;
  min-width: 0;
  padding-top: 8px;
}

.demo-command-receipt-lines strong,
.demo-card-receipt-lines strong {
  color: var(--cockpit-text);
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.demo-card-receipt {
  animation: demo-clipboard-pop 160ms ease-out;
  background: var(--cockpit-selected-bg);
  border: 2px solid var(--cockpit-accent);
  border-radius: var(--cockpit-radius);
  box-shadow: var(--cockpit-shadow-sm);
  color: var(--cockpit-text);
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 10px 12px;
}

.demo-card-receipt span {
  color: var(--cockpit-text-muted);
  font-size: 11px;
  font-weight: 660;
  letter-spacing: 0;
  text-transform: uppercase;
}

.demo-card-receipt strong {
  color: var(--cockpit-text);
  font-size: 14px;
  font-weight: 660;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.demo-card-receipt small {
  color: var(--cockpit-text-secondary);
  font-size: 12px;
  font-weight: 560;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.demo-card-receipt-lines {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.demo-card-receipt-actions {
  align-items: center;
  border-top: 1px solid var(--cockpit-border);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 10px;
  margin-top: 2px;
  padding-top: 8px;
}

.demo-card-receipt-actions .btn {
  justify-content: center;
}

.demo-card-receipt-actions small {
  min-width: 0;
}

.demo-command-receipt-actions {
  align-items: center;
  border-top: 1px solid var(--cockpit-border);
  display: grid;
  gap: 8px 10px;
  grid-template-columns: auto minmax(0, 1fr);
  padding-top: 8px;
}

.demo-command-receipt-actions .btn {
  justify-content: center;
}

.demo-command-receipt-actions small {
  color: var(--cockpit-text-secondary);
  font-size: 12px;
  font-weight: 560;
  line-height: 1.3;
  min-width: 0;
  overflow-wrap: anywhere;
}

.demo-card-receipt:focus-visible {
  outline: 3px solid var(--demo-focus-ring);
  outline-offset: 2px;
}

.demo-route-receipt {
  margin-bottom: 12px;
}

.demo-copy-payload {
  border-radius: calc(var(--cockpit-radius) + 4px);
  padding: 0;
  transition: background-color var(--demo-motion-duration) ease, box-shadow var(--demo-motion-duration) ease, outline-color var(--demo-motion-duration) ease;
}

.demo-inline-form.demo-copy-payload {
  align-items: stretch;
  display: grid;
  gap: 8px;
}

.demo-copy-payload::before {
  border-radius: var(--cockpit-radius-sm);
  color: var(--cockpit-text);
  display: none;
  font-size: 13px;
  font-weight: 640;
  line-height: 1.3;
  padding: 9px 11px;
}

.demo-copy-payload.is-copied {
  background: var(--cockpit-selected-bg);
  box-shadow: var(--cockpit-shadow-sm);
  outline: 2px solid var(--cockpit-accent);
  outline-offset: 2px;
  padding: 8px;
}

.demo-copy-payload.is-copied::before {
  background: var(--cockpit-accent);
  color: var(--demo-primary-on-accent);
  content: "Copied text is highlighted below. Paste it where needed.";
  display: block;
}

.demo-copy-payload.is-blocked {
  background: var(--cockpit-danger-bg);
  box-shadow: var(--cockpit-shadow-sm);
  outline: 2px solid var(--cockpit-danger-border);
  outline-offset: 2px;
  padding: 8px;
}

.demo-copy-payload.is-blocked::before {
  background: var(--cockpit-danger-bg);
  border: 1px solid var(--cockpit-danger-border);
  color: var(--cockpit-danger-text);
  content: "Clipboard was blocked. Select and copy this visible text manually.";
  display: block;
}

.demo-copy-payload.is-copied textarea,
.demo-copy-payload.is-copied .demo-search-input,
.demo-copy-payload.is-blocked textarea,
.demo-copy-payload.is-blocked .demo-search-input {
  background: var(--cockpit-surface);
  border-color: var(--cockpit-accent);
  min-height: min(46vh, 360px);
}

.demo-copy-payload.is-blocked textarea,
.demo-copy-payload.is-blocked .demo-search-input {
  border-color: var(--cockpit-danger-border);
}

.demo-copy-payload.is-pulsing {
  animation: demo-clipboard-pop 180ms ease-out;
}

.demo-clipboard-notice {
  animation: demo-clipboard-pop 160ms ease-out;
  background: var(--cockpit-selected-bg);
  border: 2px solid var(--cockpit-accent);
  border-radius: var(--cockpit-radius);
  box-shadow: var(--cockpit-shadow-sm);
  color: var(--cockpit-text);
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 14px 16px;
}

.demo-clipboard-notice.blocked {
  background: var(--cockpit-danger-bg);
  border-color: var(--cockpit-danger-border);
}

.demo-clipboard-notice-head {
  display: grid;
  gap: 3px;
}

.demo-clipboard-notice-head > span {
  color: var(--cockpit-text-muted);
  font-size: 11px;
  font-weight: 660;
  letter-spacing: 0;
  text-transform: uppercase;
}

.demo-clipboard-notice strong,
.demo-clipboard-next strong {
  color: var(--cockpit-text);
  font-size: 14px;
  font-weight: 660;
  line-height: 1.25;
}

.demo-clipboard-confirmation {
  align-items: center;
  background: var(--cockpit-accent);
  border: 1px solid var(--cockpit-accent);
  border-radius: var(--cockpit-radius);
  color: var(--demo-primary-on-accent);
  display: grid;
  gap: 4px;
  grid-template-columns: minmax(112px, max-content) minmax(0, 1fr);
  padding: 10px 12px;
}

.demo-clipboard-confirmation strong,
.demo-clipboard-confirmation span {
  color: var(--demo-primary-on-accent);
  line-height: 1.25;
}

.demo-clipboard-confirmation strong {
  font-size: 13px;
  font-weight: 690;
}

.demo-clipboard-confirmation span {
  font-size: 13px;
  font-weight: 580;
  overflow-wrap: anywhere;
}

.demo-clipboard-notice.blocked .demo-clipboard-confirmation {
  background: var(--cockpit-danger-bg);
  border-color: var(--cockpit-danger-border);
  color: var(--cockpit-danger-text);
}

.demo-clipboard-notice.blocked .demo-clipboard-confirmation strong,
.demo-clipboard-notice.blocked .demo-clipboard-confirmation span {
  color: var(--cockpit-danger-text);
}

.demo-clipboard-steps {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.demo-clipboard-step {
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius-sm);
  color: var(--cockpit-text-secondary);
  font-size: 12px;
  font-weight: 640;
  line-height: 1.25;
  min-width: 0;
  padding: 8px 9px;
}

.demo-clipboard-step.active {
  border-color: var(--cockpit-accent);
  color: var(--cockpit-text);
}

.demo-clipboard-notice.blocked .demo-clipboard-step.active {
  border-color: var(--cockpit-danger-border);
  color: var(--cockpit-danger-text);
}

.demo-clipboard-next {
  align-items: center;
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  display: grid;
  gap: 4px;
  grid-template-columns: minmax(112px, 0.32fr) minmax(0, 1fr);
  padding: 10px 12px;
}

.demo-clipboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.demo-clipboard-target-action {
  width: fit-content;
}

.demo-clipboard-payload {
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  display: grid;
  gap: 8px;
  padding: 10px;
}

.demo-clipboard-payload summary {
  color: var(--cockpit-text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 660;
  line-height: 1.3;
}

.demo-clipboard-payload .demo-search-input {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.45;
  margin-top: 0;
  min-height: 112px;
}

.demo-clipboard-next span {
  color: var(--cockpit-text-muted);
  font-size: 11px;
  font-weight: 660;
  letter-spacing: 0;
  text-transform: uppercase;
}

.demo-clipboard-detail,
.demo-clipboard-notice small {
  color: var(--cockpit-text-secondary);
  font-size: 13px;
  line-height: 1.35;
}

.demo-clipboard-notice small {
  color: var(--cockpit-text-muted);
  font-size: 11px;
  font-weight: 560;
  text-transform: uppercase;
}

.demo-clipboard-notice:focus-visible {
  outline: 3px solid var(--demo-focus-ring);
  outline-offset: 2px;
}

@keyframes demo-clipboard-pop {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.demo-memory-strip {
  align-items: start;
  background: var(--cockpit-surface);
  border: 1px solid transparent;
  border-radius: var(--cockpit-radius);
  box-shadow: var(--cockpit-shadow-sm);
  color: var(--cockpit-text-secondary);
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 8px 0;
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.demo-memory-strip.has-memory {
  background: var(--cockpit-selected-bg);
  border-color: var(--cockpit-border);
  box-shadow: var(--cockpit-shadow-sm);
}

.demo-memory-strip:hover {
  border-color: var(--cockpit-border);
  box-shadow: var(--cockpit-shadow-md);
}

.demo-memory-strip.is-empty {
  background: var(--cockpit-surface);
  border-style: dashed;
}

.demo-memory-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.demo-memory-strip span {
  color: var(--cockpit-text-muted);
  font-size: 11px;
  font-weight: 550;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.demo-memory-strip strong {
  color: var(--cockpit-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.demo-memory-strip small {
  color: var(--cockpit-text-secondary);
  font-size: 12px;
  line-height: 1.3;
}

.demo-memory-next {
  color: var(--cockpit-text);
  font-weight: 580;
}

.demo-memory-strip.compact {
  border-width: 1px;
  gap: 3px;
  margin: 10px 0 0;
  padding: 8px 10px;
}

.demo-memory-strip.compact strong {
  font-size: 13px;
}

.demo-memory-action {
  align-self: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 550;
  justify-self: end;
  padding: 4px 12px;
  white-space: nowrap;
}

.demo-memory-strip.has-memory .demo-memory-action {
  border-color: var(--cockpit-accent);
  color: var(--cockpit-text);
}

.demo-command-next {
  background: var(--cockpit-surface);
  border-color: var(--cockpit-border-strong);
}

.demo-command-footer {
  color: var(--cockpit-text-muted);
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 550;
}

.demo-command-footer > * {
  margin: 0;
}

.demo-command-flow {
  color: var(--cockpit-text-secondary);
  flex: 1 1 220px;
  font-size: 12px;
  line-height: 1.2;
  margin: 0;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.demo-command-flow {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: calc(1.2em * 2);
  overflow: hidden;
  text-overflow: clip;
  white-space: normal;
  width: 100%;
  max-width: 100%;
}

#command-scope,
#command-flow {
  margin: 0;
}

.demo-command-actions,
.demo-card-actions,
.demo-quick-actions,
.demo-row-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.demo-forward-actions {
  align-items: center;
  border-top: 1px solid var(--cockpit-border);
  margin-top: 12px;
  padding-top: 12px;
}

/* Keep Save reachable while the tall work-path form scrolls (shell mode). */
@media (min-width: 981px) {
  .demo-forward-actions {
    background: var(--cockpit-surface);
    bottom: 0;
    padding-bottom: 10px;
    position: sticky;
    z-index: 5;
  }
}

.demo-forward-actions .demo-pack-primary-action {
  flex: 0 1 280px;
  justify-content: center;
  min-width: min(100%, 220px);
}

.demo-forward-save-note {
  color: var(--cockpit-muted);
  flex: 1 1 280px;
  font-weight: 560;
  line-height: 1.35;
  margin: 0;
  min-width: min(100%, 220px);
}


.demo-start-path {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}

.demo-start-step {
  align-content: start;
  background: var(--cockpit-bg);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  display: grid;
  gap: 8px;
  min-width: 0;
  overflow: visible;
  padding: 12px;
  position: relative;
}

.demo-start-step:not(:last-child)::after {
  background: var(--cockpit-border-strong);
  content: "";
  height: 2px;
  position: absolute;
  inset-inline-end: -11px;
  top: 23px;
  width: 10px;
}

.demo-start-step > span {
  align-items: center;
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius-sm);
  color: var(--cockpit-text-secondary);
  display: inline-flex;
  font-size: 12px;
  font-weight: 680;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.demo-start-step > strong {
  color: var(--cockpit-text);
  font-size: 18px;
  font-weight: 680;
  line-height: 1.1;
}

.demo-start-step > small {
  color: var(--cockpit-text-secondary);
  font-size: 13px;
  font-weight: 520;
  line-height: 1.35;
}

.demo-start-step .btn {
  justify-content: center;
  margin-top: 2px;
  width: 100%;
}

.demo-home-hero {
  display: grid;
  gap: 12px;
}

.demo-home-hero > p {
  color: var(--cockpit-text-secondary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  max-width: 76ch;
}

.demo-home-hero .demo-panel-head {
  align-items: flex-start;
}

.demo-home-counts {
  border-top: 1px solid var(--cockpit-border);
  padding-top: 10px;
}

.demo-home-spotlight,
.demo-review-spotlight,
.demo-create-spotlight {
  background: var(--demo-card-bg);
  border: 1px solid transparent;
  border-radius: var(--demo-panel-radius);
  box-shadow: var(--demo-card-shadow);
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  min-width: 0;
  padding: 14px;
}

.demo-home-hero .demo-home-spotlight {
  border-color: var(--cockpit-accent);
  box-shadow: var(--cockpit-shadow-md);
  background: var(--cockpit-selected-bg);
  box-shadow: var(--cockpit-shadow-sm);
  padding: 16px;
  margin: 4px 0 18px;
}

.demo-home-spotlight-head,
.demo-home-spotlight-actions,
.demo-review-spotlight-head,
.demo-review-spotlight-actions,
.demo-create-spotlight-head,
.demo-create-spotlight-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
}

.demo-home-spotlight-head h3,
.demo-review-spotlight-head h3,
.demo-create-spotlight-head h3 {
  color: var(--cockpit-text);
  font-size: 18px;
  line-height: 1.15;
  margin: 6px 0 0;
}

.demo-home-spotlight > p,
.demo-review-spotlight > p,
.demo-create-spotlight > p {
  color: var(--cockpit-text-secondary);
  font-size: 13px;
  font-weight: 520;
  line-height: 1.4;
  margin: 0;
  max-width: 76ch;
}

.demo-home-spotlight-facts {
  background: var(--demo-card-inner-bg);
  border: 1px solid var(--demo-card-inner-border);
  border-radius: var(--cockpit-radius);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  overflow: hidden;
}

.demo-home-spotlight-fact {
  border-inset-inline-start: 1px solid var(--demo-card-divider);
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 14px;
  position: relative;
}

.demo-home-spotlight-fact:first-child {
  border-inline-start: 0;
}

/* Flow chevrons make the Where -> Blocker -> Next action logic legible. */
.demo-home-spotlight-fact:not(:last-child)::after {
  content: "›";
  color: var(--cockpit-text-muted);
  font-size: 16px;
  line-height: 1;
  position: absolute;
  inset-inline-end: -6px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

/* The Next action is the point of the triad, so its column carries the
   accent tint. The value stays the normal ink color to keep contrast. */
.demo-home-spotlight-fact:last-child {
  background: var(--cockpit-accent-50);
}

.demo-home-spotlight-fact span {
  color: var(--cockpit-text-muted);
  font-size: 10px;
  font-weight: 610;
  letter-spacing: 0.07em;
  line-height: 1.15;
  text-transform: uppercase;
}

.demo-home-spotlight-fact strong {
  color: var(--cockpit-text);
  font-size: 14px;
  font-weight: 610;
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: anywhere;
}

.demo-review-queue-stats {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}

.demo-review-queue-stat {
  background: var(--cockpit-bg);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
}

.demo-review-queue-stat span {
  color: var(--cockpit-text-muted);
  font-size: 10px;
  font-weight: 610;
  line-height: 1.15;
  text-transform: uppercase;
}

.demo-review-queue-stat strong {
  color: var(--cockpit-text);
  font-size: 18px;
  font-weight: 680;
  line-height: 1;
}

.demo-review-queue-stat small {
  color: var(--cockpit-text-secondary);
  font-size: 11px;
  font-weight: 520;
  line-height: 1.2;
  min-width: 0;
  overflow-wrap: anywhere;
}

.demo-create-readiness-list {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}

.demo-create-readiness-step {
  align-items: center;
  background: var(--cockpit-bg);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
  padding: 9px 10px;
}

.demo-create-readiness-step span {
  color: var(--cockpit-text-secondary);
  font-size: 12px;
  font-weight: 610;
  min-width: 0;
  overflow-wrap: anywhere;
}

.demo-create-readiness-step strong {
  background: var(--cockpit-warning-bg);
  border: 1px solid var(--cockpit-warning-border);
  border-radius: var(--cockpit-radius-sm);
  color: var(--cockpit-warning-text);
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 640;
  line-height: 1;
  padding: 5px 7px;
}

.demo-create-readiness-step[data-ready="true"] strong {
  background: var(--cockpit-success-bg);
  border-color: var(--cockpit-success-border);
  color: var(--cockpit-success-text);
}

.demo-home-spotlight-actions,
.demo-review-spotlight-actions,
.demo-create-spotlight-actions {
  border-top: 1px solid var(--demo-card-divider);
  flex-wrap: wrap;
  padding-top: 12px;
}

.demo-home-spotlight-actions .btn,
.demo-review-spotlight-actions .btn,
.demo-create-spotlight-actions .btn {
  justify-content: center;
}

.demo-home-spotlight-actions > small,
.demo-review-spotlight-actions > small,
.demo-create-spotlight-actions > small {
  color: var(--cockpit-text-secondary);
  flex: 1 1 220px;
  font-size: 12px;
  font-weight: 560;
  line-height: 1.3;
  min-width: min(100%, 180px);
}

.demo-secondary-paths {
  border-top: 1px solid var(--cockpit-border);
  margin-top: 12px;
  padding-top: 12px;
}

.demo-home-share {
  border-top: 1px solid var(--cockpit-border);
  margin-top: 18px;
  padding-top: 14px;
}

.demo-home-share h3 {
  font-size: 14px;
  margin: 0 0 10px;
}

.demo-home-share .demo-home-bookmarklet {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.demo-home-share .demo-home-bookmarklet small {
  color: var(--cockpit-text-secondary);
  font-size: 12px;
  line-height: 1.3;
}

.demo-screen {
  display: grid;
  gap: 22px;
  min-width: 0;
  animation: screenIn 0.2s ease-out;
}

@keyframes screenIn {
  from { opacity: 0.6; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.demo-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.demo-summary-strip {
  align-items: stretch;
  background: var(--cockpit-bg);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  box-shadow: none;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: 0;
  padding: 6px;
}

.demo-metric,
.demo-toolbar,
.demo-panel {
  padding: 14px;
}

.demo-metric {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  text-align: left;
}

.demo-summary-strip .demo-metric {
  background: transparent;
  border: 0;
  border-radius: var(--cockpit-radius-sm);
  box-shadow: none;
  min-width: 0;
  padding: 9px 12px;
}

.demo-summary-strip .demo-metric + .demo-metric {
  border-inset-inline-start: 1px solid var(--cockpit-border);
}

.demo-summary-strip .demo-metric:hover {
  border-color: transparent;
  box-shadow: none;
}

.demo-toolbar {
  display: grid;
  gap: 10px;
}

.demo-toolbar:focus-within {
  border-color: var(--cockpit-accent);
  box-shadow: var(--demo-panel-hover-shadow);
}

.demo-panel-head {
  margin-bottom: 4px;
}

.demo-panel-head + .demo-search-input,
.demo-panel-head + .demo-search-results,
.demo-panel-head + .demo-work-list,
.demo-panel-head + .demo-inline-form,
.demo-panel-head + .demo-form-grid,
.demo-panel-head + .demo-profile-grid,
.demo-panel-head + .demo-grid,
.demo-panel-head + .demo-toolbar,
.demo-panel-head + .demo-list,
.demo-panel-head + .demo-quick-actions {
  margin-top: 12px;
}

.demo-panel-head + label {
  display: block;
  margin-top: 10px;
}

.demo-panel-head + .sr-only + .demo-search-input,
.demo-panel-head + .demo-search-input {
  margin-top: 14px;
}

.demo-panel-head + label + .demo-search-input {
  margin-top: 10px;
}

.demo-search-input + .demo-search-results,
.demo-search-input + .demo-work-list {
  margin-top: 10px;
}

.demo-metric span {
  color: var(--cockpit-text-muted);
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0;
  text-transform: uppercase;
}

.demo-metric strong {
  display: block;
  font-size: 20px;
  font-weight: 660;
  line-height: 1.1;
  max-width: none;
  overflow-wrap: anywhere;
}

.demo-summary-strip .demo-metric strong {
  font-size: 19px;
  max-width: none;
}

.demo-panel p {
  color: var(--cockpit-text-secondary);
  font-size: 14px;
  line-height: 1.4;
  margin: 9px 0 0;
}

.demo-metric p {
  color: var(--cockpit-text-secondary);
  font-size: 12px;
  line-height: 1.25;
  margin: 2px 0 0;
}

.demo-summary-strip .demo-metric p {
  font-size: 12px;
}

.demo-search-input,
/* A date only ever holds ten characters — don't stretch it across the row. */
.demo-field input[type="date"] {
  max-width: 200px;
}

.demo-search-input,
.demo-field input,
.demo-field textarea,
.demo-field select {
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  color: var(--cockpit-text);
  font: inherit;
  font-size: 15px;
  font-weight: 450;
  min-width: 0;
  padding: 8px 14px;
  width: 100%;
  transition: border-color var(--demo-motion-duration) ease, background-color var(--demo-motion-duration) ease;
}

.demo-edit-panel .demo-search-input,
.demo-edit-panel .demo-field input,
.demo-edit-panel .demo-field textarea,
.demo-edit-panel .demo-field select {
  background: var(--demo-form-control-bg);
  border-color: var(--demo-form-control-border);
  border-width: 1px;
  box-shadow: none;
}

.demo-edit-panel .demo-field:not(.demo-state-preview):not(.demo-blocker-field),
.demo-panel > .demo-form-grid > .demo-field:not(.demo-state-preview):not(.demo-blocker-field),
.demo-panel > .demo-inline-form > .demo-field:not(.demo-state-preview):not(.demo-blocker-field) {
  background: var(--demo-form-field-bg);
  border: 1px solid var(--demo-form-field-border);
  border-radius: var(--cockpit-radius);
  box-shadow: var(--demo-form-inner-shadow);
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
}

.demo-edit-panel .demo-field:focus-within,
.demo-panel > .demo-form-grid > .demo-field:not(.demo-state-preview):not(.demo-blocker-field):focus-within,
.demo-panel > .demo-inline-form > .demo-field:not(.demo-state-preview):not(.demo-blocker-field):focus-within,
.demo-edit-panel .demo-blocker-field:focus-within,
.demo-edit-panel .demo-state-preview:focus-within {
  border-color: var(--cockpit-accent);
  box-shadow: var(--demo-form-inner-shadow), var(--demo-form-focus-shadow);
}

.demo-edit-panel .demo-field:not(.demo-state-preview):not(.demo-blocker-field) > span,
.demo-panel > .demo-form-grid > .demo-field:not(.demo-state-preview):not(.demo-blocker-field) > span,
.demo-panel > .demo-inline-form > .demo-field:not(.demo-state-preview):not(.demo-blocker-field) > span {
  margin-bottom: 0;
}

.demo-panel .demo-search-input {
  margin-top: 10px;
}

.demo-search-input:focus,
.demo-field input:focus,
.demo-field textarea:focus,
.demo-field select:focus,
.demo-search-input:focus-visible,
.demo-field input:focus-visible,
.demo-field textarea:focus-visible,
.demo-field select:focus-visible {
  border-color: var(--cockpit-accent);
  outline: 3px solid var(--demo-focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

.demo-edit-panel .demo-search-input:focus-visible,
.demo-edit-panel .demo-field input:focus-visible,
.demo-edit-panel .demo-field textarea:focus-visible,
.demo-edit-panel .demo-field select:focus-visible {
  background: var(--demo-form-control-focus-bg);
}

.demo-search-input:focus:not(:focus-visible),
.demo-field input:focus:not(:focus-visible),
.demo-field textarea:focus:not(:focus-visible),
.demo-field select:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.demo-chip:focus-visible,
.demo-profile-card:focus-visible,
.demo-nav-item:focus-visible,
.demo-chip-row .demo-profile-card:focus-visible {
  outline: 3px solid var(--demo-focus-ring);
  outline-offset: 2px;
}

.demo-chip-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
  margin-top: 12px;
  min-width: 0;
}

.demo-chip,
.demo-profile-card {
  background: transparent;
  border: 1px solid var(--cockpit-border);
  color: var(--cockpit-text-secondary);
  cursor: pointer;
  font: inherit;
}

.demo-chip {
  align-items: center;
  border-radius: 999px;
  display: flex;
  font-size: 13px;
  font-weight: 560;
  gap: 6px;
  justify-content: space-between;
  min-height: 42px;
  min-width: 0;
  padding: 8px 12px;
  transition: border-color var(--demo-motion-duration) ease, transform var(--demo-motion-duration) ease, background-color var(--demo-motion-duration) ease;
  width: 100%;
}

.demo-chip:hover,
.demo-chip:focus-visible {
  border-color: var(--cockpit-border-strong);
  background: var(--cockpit-hover-bg);
}

.demo-chip[aria-pressed="true"],
.demo-profile-card[aria-pressed="true"] {
  background: var(--cockpit-accent);
  border-color: var(--cockpit-accent);
  color: var(--cockpit-accent-text);
}

.demo-chip[aria-pressed="true"] .demo-chip-count {
  background: var(--cockpit-bg);
  border-color: var(--cockpit-border-strong);
  color: var(--cockpit-text);
}

.demo-chip-count {
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: 999px;
  color: inherit;
  flex: 0 0 auto;
  min-width: 1.4em;
  padding: 1px 6px;
  text-align: center;
}

.demo-status {
  color: var(--cockpit-accent);
  font-size: 12px;
  font-weight: 560;
  text-align: right;
}

.demo-status-line {
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  color: var(--cockpit-text);
  font-weight: 560;
  padding: 10px 12px;
}

html:has(#theme-dark:checked) .demo-status {
  color: var(--cockpit-link);
}

html:has(#theme-dark:checked) .demo-status-line {
  background: var(--cockpit-surface);
  border-color: var(--cockpit-border);
  color: var(--cockpit-text);
}

.demo-focus-pulse {
  border-color: var(--cockpit-accent) !important;
  outline: 2px solid var(--cockpit-accent);
  outline-offset: 2px;
}

.demo-meta-row {
  align-items: center;
  background: var(--demo-meta-bg);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  color: var(--cockpit-text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: space-between;
  margin-top: 8px;
  padding: 10px 12px;
}

html:has(#theme-dark:checked) .demo-meta-row {
  background: var(--demo-meta-bg);
  border-color: var(--cockpit-border);
  color: var(--cockpit-text-secondary);
}

.demo-meta-row span,
.demo-meta-row strong {
  color: inherit;
}

.demo-meta-row strong {
  color: var(--cockpit-text);
  font-weight: 610;
}

.demo-work-list,
.demo-review-list,
.demo-list {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.demo-work-list,
.demo-review-list {
  gap: 16px;
}

.demo-metric,
.demo-work-card,
.demo-review-card,
.demo-row,
.demo-note,
.demo-scenario-card {
  background: var(--demo-card-bg);
  border: 1px solid transparent;
  border-radius: var(--demo-panel-radius);
  box-shadow: var(--demo-card-shadow);
  min-width: 0;
  overflow: visible;
  padding: 16px;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.demo-metric:hover,
.demo-work-card:hover,
.demo-review-card:hover,
.demo-row:hover,
.demo-note:hover,
.demo-scenario-card:hover {
  border-color: var(--cockpit-border-strong);
  box-shadow: var(--demo-card-hover-shadow);
  transform: translateY(-1px);
}

/* Drag-and-drop affordance */
.demo-work-card,
.demo-table-row {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.demo-work-card:active,
.demo-table-row:active {
  cursor: grabbing;
}
.demo-work-list .demo-work-card.drag-over,
.demo-work-table .demo-table-row.drag-over {
  border-color: var(--cockpit-accent);
  box-shadow: 0 0 0 2px var(--cockpit-accent);
}
.demo-drag-indicator {
  height: 3px;
  background: var(--cockpit-accent);
  border-radius: 999px;
  margin: 2px 0;
  pointer-events: none;
}

.demo-row:hover {
  border-color: var(--cockpit-border-strong);
}

.demo-review-card {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.demo-review-card-head {
  margin-bottom: 0;
}

.demo-review-card-main {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(156px, 0.22fr);
}

.demo-card-facts {
  background: var(--demo-card-inner-bg);
  border: 1px solid var(--demo-card-inner-border);
  border-radius: var(--cockpit-radius);
  display: grid;
  gap: 0;
  min-width: 0;
  overflow: hidden;
}

.demo-card-fact {
  align-items: baseline;
  border-bottom: 1px solid var(--demo-card-divider);
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(112px, 0.32fr) minmax(0, 1fr);
  padding: 10px 12px;
}

.demo-card-fact:last-child {
  border-bottom: 0;
}

.demo-card-purpose {
  color: var(--cockpit-text);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.35;
  padding: 6px 10px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.demo-card-fact span {
  color: var(--cockpit-text-secondary);
  font-size: 11px;
  font-weight: 610;
  line-height: 1.2;
  text-transform: uppercase;
}

.demo-card-fact strong {
  color: var(--cockpit-text);
  font-size: 14px;
  font-weight: 610;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.demo-review-card-actions {
  align-content: start;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.demo-review-card-actions .btn {
  justify-content: center;
  width: 100%;
}

.demo-primary-reason {
  color: var(--cockpit-text-secondary);
  font-size: 12px;
  font-weight: 520;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.demo-command-row .demo-primary-reason {
  grid-column: 1 / -1;
}

.demo-review-card-actions .demo-primary-reason {
  text-align: center;
}

.demo-review-card .demo-card-meta {
  margin-top: 2px;
  padding-top: 8px;
}

.demo-work-card.selected {
  border-color: var(--cockpit-accent);
  background: var(--cockpit-surface);
  box-shadow: var(--demo-card-selected-shadow);
}

.demo-scenario-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.demo-scenario-card {
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 8px;
  text-align: left;
  width: 100%;
}

.demo-scenario-card strong {
  color: var(--cockpit-text);
  font-size: 15px;
  font-weight: 610;
}

.demo-scenario-card span {
  color: var(--cockpit-text-secondary);
  font-size: 13px;
  line-height: 1.35;
}

.demo-scenario-card[aria-pressed="true"] {
  background: var(--cockpit-surface);
  border-color: var(--cockpit-accent);
}

.demo-scenario-card:hover,
.demo-scenario-card:focus-visible {
  border-color: var(--cockpit-border-strong);
}

.demo-card-head,
.demo-card-meta,
.demo-inline-form {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.demo-card-head {
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
  color: var(--cockpit-text);
  background: var(--demo-card-head-bg);
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}

html:has(#theme-dark:checked) .demo-card-head {
  background: var(--demo-card-head-bg);
  border-color: var(--cockpit-border);
  color: var(--cockpit-text);
}

.demo-card-title {
  background: transparent;
  border: 0;
  border-radius: var(--cockpit-radius-sm);
  color: var(--cockpit-text);
  cursor: pointer;
  display: block;
  font-family: var(--font-family-display);
  font-size: 17px;
  font-weight: var(--demo-card-title-weight);
  line-height: 1.18;
  min-height: 30px;
  min-width: 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
  padding: 3px 0;
  text-align: left;
  text-decoration: none;
}

html:has(#theme-dark:checked) .demo-work-card .demo-card-title {
  color: var(--cockpit-text);
}

.demo-card-title:hover,
.demo-card-title:focus-visible {
  color: var(--cockpit-accent);
  outline: 0;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.demo-card-title:focus-visible {
  outline: 3px solid var(--demo-focus-ring);
  outline-offset: 3px;
}

.demo-card-meta {
  color: var(--cockpit-text-muted);
  border-top: 1px solid var(--demo-card-divider);
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: var(--demo-card-meta-weight);
  margin-top: 2px;
  padding-top: 12px;
  gap: 6px 10px;
}

.demo-card-meta span,
.demo-card-meta time {
  align-items: center;
  background: var(--demo-card-meta-bg);
  border: 1px solid var(--demo-card-inner-border);
  border-radius: var(--cockpit-radius-sm);
  color: var(--cockpit-text-secondary);
  display: inline-flex;
  line-height: 1.2;
  min-height: 28px;
  padding: 4px 8px;
}

.demo-card-actions {
  border-top: 1px solid var(--cockpit-border);
  margin-top: 12px;
  padding-top: 10px;
}

.demo-support-action {
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
  line-height: 1.15;
  min-height: 46px;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: normal;
}

.demo-support-label {
  color: inherit;
  display: block;
  font: inherit;
  line-height: inherit;
}

.demo-support-reason {
  color: inherit;
  display: block;
  font-size: 11px;
  font-weight: 520;
  line-height: 1.25;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.15s ease, opacity 0.1s ease;
}

.demo-card-actions .demo-support-reason,
.demo-card-support[open] .demo-support-reason {
  max-height: 3em;
  opacity: 0.78;
}

.demo-row-actions .demo-support-action {
  align-items: center;
  text-align: center;
}

.demo-row-actions .demo-support-reason {
  display: none;
}

.demo-paste-img { max-width: 100%; }

.demo-card-support {
  border-top: 1px solid var(--cockpit-border);
  margin-top: 10px;
  padding-top: 8px;
}

.demo-card-support summary {
  align-items: center;
  color: var(--cockpit-text-secondary);
  cursor: pointer;
  display: flex;
  font-size: 12px;
  font-weight: var(--font-label-weight);
  gap: 8px;
  justify-content: space-between;
  list-style: none;
  text-transform: uppercase;
}

.demo-card-support summary:focus-visible,
.demo-row-support summary:focus-visible {
  outline: 3px solid var(--demo-focus-ring);
  outline-offset: 2px;
}

.demo-card-support summary::-webkit-details-marker {
  display: none;
}

.demo-card-support summary::after {
  content: "+";
  color: var(--cockpit-accent);
  font-size: 16px;
  line-height: 1;
}

.demo-card-support[open] summary::after {
  content: "-";
}

.demo-row-support {
  border-top: 1px solid var(--cockpit-border);
  flex: 1 1 100%;
  margin-top: 2px;
  padding-top: 8px;
}

.demo-row-support summary {
  align-items: center;
  color: var(--cockpit-text-secondary);
  cursor: pointer;
  display: flex;
  font-size: 12px;
  font-weight: var(--font-label-weight);
  gap: 8px;
  justify-content: space-between;
  list-style: none;
  text-transform: uppercase;
}

.demo-row-support summary::-webkit-details-marker {
  display: none;
}

.demo-row-support summary::after {
  color: var(--cockpit-accent);
  content: "+";
  font-size: 16px;
  line-height: 1;
}

.demo-row-support[open] summary::after {
  content: "-";
}

.demo-row-support:not([open]) .demo-row-actions {
  display: none;
}

.demo-row-support > .demo-row-actions {
  border-top: 0;
  margin-top: 8px;
  padding-top: 0;
}

.demo-row-support[open] .demo-support-reason {
  display: block;
}

.demo-card-support:not([open]) .demo-card-actions,
.demo-card-support:not([open]) .demo-inline-form {
  display: none;
}

.demo-card-support .demo-inline-form {
  margin-top: 8px;
}

.demo-card-support > .demo-card-actions {
  border-top: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  margin-top: 8px;
  padding-top: 0;
}

.demo-card-support > .demo-card-actions .demo-support-action {
  width: 100%;
}

.demo-card-support > .demo-card-actions + .demo-inline-form {
  border-top: 1px solid var(--cockpit-border);
  padding-top: 10px;
}

.demo-disabled-reason {
  background: var(--cockpit-nav-bg);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  color: var(--cockpit-text-secondary);
  font-size: 12px;
  font-weight: 520;
  line-height: 1.35;
  margin: 10px 0 0;
  padding: 8px 10px;
}

html:has(#theme-dark:checked) .demo-disabled-reason {
  background: var(--cockpit-nav-bg);
  border-color: var(--cockpit-border);
  color: var(--cockpit-text-secondary);
}

.demo-state-pill {
  align-items: center;
  background: var(--demo-card-status-bg);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--cockpit-text);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  justify-content: center;
  line-height: 1.2;
  padding: 3px 10px;
  text-align: center;
  white-space: normal;
}

.demo-card-head > .demo-state-pill {
  max-width: min(100%, 180px);
}

html:has(#theme-dark:checked) .demo-state-pill {
  background: var(--demo-card-status-bg);
  border-color: var(--demo-card-status-border);
  color: var(--cockpit-text);
}

.demo-command-row {
  align-items: center;
  background: var(--demo-card-command-bg);
  border: 1px solid var(--demo-card-inner-border);
  border-radius: var(--cockpit-radius);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: visible;
  padding: 12px;
  position: relative;
  min-height: 0;
}

.demo-command-row::before {
  content: none;
}

.demo-command-row strong {
  color: var(--cockpit-text);
  display: block;
  font-size: 16px;
  font-weight: 610;
  margin-top: 4px;
  overflow-wrap: anywhere;
  min-width: 0;
}

.demo-empty {
  border: 1px dashed var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  color: var(--cockpit-text-muted);
  display: grid;
  gap: 6px;
  padding: 22px;
  text-align: center;
}

.demo-empty strong {
  color: var(--cockpit-text);
  display: block;
}

.demo-empty span {
  color: var(--cockpit-text-secondary);
  display: block;
}

.demo-empty b {
  color: var(--cockpit-text);
}

.demo-empty small {
  color: var(--cockpit-text-muted);
  display: block;
  font-size: 12px;
  line-height: 1.35;
}

.demo-field-help {
  color: var(--cockpit-text-muted);
  flex: 1 1 100%;
  font-size: 12px;
  line-height: 1.25;
  margin: -4px 0 0;
}

.demo-edit-panel .demo-field:not(.demo-state-preview):not(.demo-blocker-field) .demo-field-help,
.demo-panel > .demo-form-grid > .demo-field:not(.demo-state-preview):not(.demo-blocker-field) .demo-field-help,
.demo-panel > .demo-inline-form > .demo-field:not(.demo-state-preview):not(.demo-blocker-field) .demo-field-help {
  margin: 0;
}

.demo-row {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.demo-row.has-row-support {
  align-items: flex-start;
  align-content: start;
  display: grid;
  gap: 10px 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  justify-content: stretch;
}

.demo-row.has-row-support > div:first-child {
  grid-column: 1;
  min-width: 0;
}

.demo-row.has-row-support > .demo-row-actions {
  grid-column: 2;
  justify-self: end;
  min-width: 0;
}

.demo-row.has-row-support > .demo-row-support {
  grid-column: 1 / -1;
  margin-top: 0;
  min-width: 0;
  width: 100%;
}

.demo-row strong,
.demo-note strong {
  color: var(--cockpit-text);
  display: block;
}

.demo-row span,
.demo-note {
  color: var(--cockpit-text-secondary);
  font-size: 14px;
}

.demo-focus-grid,
.demo-form-grid,
.demo-profile-grid,
.demo-calendar-grid {
  display: grid;
  gap: 12px;
}

.demo-focus-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.demo-calendar-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.demo-fact {
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  padding: 14px;
  background: var(--cockpit-surface);
}

.demo-fact span,
.demo-field > span,
.demo-field > legend,
.demo-blocker-reason > label {
  color: var(--cockpit-text-muted);
  display: block;
  font-size: 12px;
  font-weight: 560;
  letter-spacing: 0;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.demo-fact strong {
  color: var(--cockpit-text);
  font-size: 16px;
  overflow-wrap: anywhere;
}

.demo-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.demo-forward-panel {
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-accent);
  border-radius: var(--cockpit-radius);
  box-shadow: var(--cockpit-shadow-sm);
  display: grid;
  gap: 16px;
  padding: 18px;
}

.demo-forward-head {
  align-items: end;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.demo-forward-head strong {
  color: var(--cockpit-text);
  font-size: 14px;
  font-weight: 620;
  text-align: right;
}

.demo-forward-fields {
  background: var(--cockpit-bg);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  box-shadow: none;
  gap: 12px;
  padding: 12px;
}

.demo-forward-fields .demo-field:not(.demo-state-preview):not(.demo-blocker-field),
.demo-forward-fields > .demo-blocker-field,
.demo-forward-fields > .demo-state-preview {
  background: var(--cockpit-surface);
  border-color: var(--cockpit-border-strong);
}

/* Short fields stack beside the tall blocker box — no hole under Title. */
.demo-form-col{align-content:start;display:grid;gap:12px;min-width:0}
.demo-form-col > .demo-field:not(.demo-state-preview):not(.demo-blocker-field){padding:10px}

.demo-forward-triad {
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.demo-forward-triad .demo-command-line {
  align-content: start;
  gap: 5px;
  grid-template-columns: 1fr;
  min-height: 78px;
  padding: 10px 12px;
}

.demo-forward-triad .demo-command-line strong {
  font-size: 14px;
  line-height: 1.25;
}

.demo-forward-triad .selected-work-where {
  background: var(--cockpit-selected-bg);
  border-color: var(--cockpit-accent);
  padding-inset-inline-start: 10px;
}

.demo-forward-triad .selected-work-where span {
  color: var(--cockpit-accent);
}

.demo-forward-triad .selected-work-where strong {
  font-size: 16px;
  line-height: 1.18;
}

.demo-blocker-field {
  background: var(--demo-form-field-bg);
  border: 1px solid var(--cockpit-border-strong);
  border-radius: var(--cockpit-radius);
  box-shadow: var(--demo-form-inner-shadow);
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 10px;
}

.demo-blocker-field > legend {
  margin-bottom: 0;
  padding: 0;
}

.demo-blocker-field.invalid {
  background: var(--cockpit-danger-bg);
  border: 1px solid var(--cockpit-danger-border);
  border-radius: var(--cockpit-radius);
  padding: 12px;
}

.demo-blocker-field.invalid [data-blocker-help] {
  color: var(--cockpit-danger-text);
  font-weight: 620;
}

.demo-blocker-field.invalid input[aria-invalid="true"] {
  border-color: var(--cockpit-danger-border);
  outline: 2px solid var(--cockpit-danger-border);
  outline-offset: 1px;
}

.demo-state-preview {
  background: var(--demo-form-field-bg);
  border: 1px solid var(--demo-form-field-border);
  border-radius: var(--cockpit-radius);
  box-shadow: var(--demo-form-inner-shadow);
  display: grid;
  gap: 6px;
  padding: 12px;
}

.demo-state-preview strong {
  color: var(--cockpit-text);
  font-size: 16px;
  font-weight: 660;
  line-height: 1.2;
}

.demo-state-preview small {
  color: var(--cockpit-text-secondary);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

.demo-blocker-resolution {
  align-items: center;
  background: var(--cockpit-selected-bg);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  color: var(--cockpit-text);
  display: grid;
  font-size: 12px;
  font-weight: 580;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  line-height: 1.3;
  margin: 0;
  padding: 8px 10px;
}

.demo-blocker-resolution .btn {
  box-shadow: none;
  min-height: 34px;
  white-space: nowrap;
}

.demo-blocker-resolution[hidden] {
  display: none;
}

.demo-segmented-control {
  background: var(--demo-form-control-bg);
  border: 1px solid var(--cockpit-border-strong);
  border-radius: 999px;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 4px;
}

.demo-segment {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--cockpit-text-secondary);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 13px;
  font-weight: 620;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  position: relative;
  text-align: center;
}

.demo-segment.active {
  background: var(--cockpit-accent);
  color: var(--cockpit-accent-text);
}

.demo-segment input {
  cursor: pointer;
  inset: 0;
  opacity: 0;
  position: absolute;
}

.demo-segment span {
  color: inherit;
  display: block;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0;
  text-transform: none;
}

.demo-segment:focus-visible {
  outline: 3px solid var(--cockpit-focus);
  outline-offset: 2px;
}

.demo-segment:has(input:focus-visible) {
  outline: 3px solid var(--cockpit-focus);
  outline-offset: 2px;
}

.demo-blocker-reason {
  background: var(--demo-form-band-bg);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  display: grid;
  gap: 6px;
  padding: 8px;
}

.demo-blocker-reason[hidden] {
  display: none;
}

.demo-owner-blocker-guide {
  background: var(--cockpit-selected-bg);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  display: grid;
  gap: 8px;
  padding: 10px;
}

.demo-owner-blocker-guide > strong {
  color: var(--cockpit-text);
  font-size: 13px;
  font-weight: 620;
  line-height: 1.25;
}

.demo-owner-blocker-guide ol {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.demo-owner-blocker-step {
  align-items: start;
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius-sm);
  color: var(--cockpit-text-secondary);
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 8px;
}

.demo-owner-step-index {
  align-items: center;
  background: var(--cockpit-nav-bg);
  border: 1px solid var(--cockpit-border);
  border-radius: 999px;
  color: var(--cockpit-text-secondary);
  display: inline-flex;
  font-size: 11px;
  font-weight: 660;
  height: 24px;
  justify-content: center;
  line-height: 1;
  width: 24px;
}

.demo-owner-step-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.demo-owner-step-copy strong {
  color: var(--cockpit-text);
  font-size: 13px;
  font-weight: 620;
  line-height: 1.2;
}

.demo-owner-step-copy small {
  color: var(--cockpit-text-secondary);
  font-size: 12px;
  line-height: 1.25;
}

.demo-owner-blocker-step.active {
  background: var(--cockpit-surface);
  border-color: var(--cockpit-accent);
  box-shadow: inset 3px 0 0 var(--cockpit-accent);
  color: var(--cockpit-text);
}

.demo-owner-blocker-step.active .demo-owner-step-index {
  background: var(--cockpit-accent);
  border-color: var(--cockpit-accent);
  color: var(--cockpit-accent-text);
}

.demo-owner-blocker-step.done {
  background: var(--demo-card-memory-bg);
  border-color: var(--demo-card-memory-border);
}

.demo-owner-blocker-step.done .demo-owner-step-index {
  background: var(--cockpit-selected-bg);
  border-color: var(--cockpit-accent);
  color: var(--cockpit-text);
}

.demo-blocker-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.demo-blocker-preset {
  appearance: none;
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius-sm);
  color: var(--cockpit-text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 580;
  line-height: 1.1;
  min-height: 26px;
  padding: 4px 8px;
}

.demo-blocker-preset:hover {
  background: var(--cockpit-hover-bg);
  border-color: var(--cockpit-border-strong);
  color: var(--cockpit-text);
}

.demo-blocker-preset:focus-visible {
  outline: 3px solid var(--demo-focus-ring);
  outline-offset: 2px;
}

.demo-blocker-preset.active {
  background: var(--cockpit-selected-bg);
  border-color: var(--cockpit-accent);
  color: var(--cockpit-text);
}

html:has(#theme-dark:checked) .demo-segmented-control {
  background: var(--demo-form-control-bg);
  border-color: var(--cockpit-border-strong);
}

html:has(#theme-dark:checked) .demo-forward-panel {
  background: var(--cockpit-surface);
  border-color: var(--demo-form-outer-border);
}

html:has(#theme-dark:checked) .demo-forward-fields {
  background: var(--cockpit-bg);
  border-color: var(--demo-form-group-border);
}

html:has(#theme-dark:checked) .demo-edit-panel .demo-field:not(.demo-state-preview):not(.demo-blocker-field),
html:has(#theme-dark:checked) .demo-blocker-field,
html:has(#theme-dark:checked) .demo-state-preview {
  background: var(--demo-form-field-bg);
  border-color: var(--demo-form-field-border);
}

html:has(#theme-dark:checked) .demo-edit-panel .demo-search-input,
html:has(#theme-dark:checked) .demo-edit-panel .demo-field input,
html:has(#theme-dark:checked) .demo-edit-panel .demo-field textarea,
html:has(#theme-dark:checked) .demo-edit-panel .demo-field select {
  background: var(--demo-form-control-bg);
  border-color: var(--demo-form-control-border);
  box-shadow: none;
}

html:has(#theme-dark:checked) .demo-segment.active {
  outline: 1px solid var(--cockpit-border-strong);
  outline-offset: -1px;
}

.demo-work-path {
  align-items: center;
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 10px 12px;
}

.demo-command-work-path {
  background: var(--cockpit-selected-bg);
}

.demo-command-work-path[hidden] {
  display: none;
}

html:has(#theme-dark:checked) .demo-work-path {
  background: var(--cockpit-surface);
  border-color: var(--cockpit-border);
}

html:has(#theme-dark:checked) .demo-command-work-path {
  background: var(--cockpit-selected-bg);
}

.demo-work-path-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.demo-work-path-step {
  background: var(--cockpit-nav-bg);
  border: 1px solid var(--cockpit-border);
  border-radius: 999px;
  color: var(--cockpit-text-secondary);
  font-size: 12px;
  font-weight: 610;
  line-height: 1;
  padding: 7px 9px;
}

.demo-work-path-separator {
  align-self: center;
  color: var(--cockpit-text-muted);
  font-size: 12px;
  font-weight: 640;
  line-height: 1;
}

.demo-work-path-step.active {
  background: var(--cockpit-accent);
  border-color: var(--cockpit-accent);
  color: var(--cockpit-accent-text);
}

.demo-work-path strong {
  color: var(--cockpit-text);
  font-size: 13px;
  font-weight: 620;
  overflow-wrap: anywhere;
  text-align: right;
}

.demo-support-details {
  background: var(--cockpit-bg);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  display: block;
  margin-top: 18px;
  overflow: hidden;
  padding: 0;
}

.demo-forward-panel + .demo-support-details {
  margin-top: 18px;
}

.demo-support-details summary {
  align-items: center;
  background: var(--cockpit-surface);
  border-bottom: 0;
  border-radius: 0;
  color: var(--cockpit-text-secondary);
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  list-style: none;
  min-height: 44px;
  padding: 12px 14px;
}

.demo-support-details summary:focus-visible {
  outline: 3px solid var(--demo-focus-ring);
  outline-offset: -3px;
}

.demo-support-details summary::-webkit-details-marker {
  display: none;
}

.demo-support-details summary::after {
  color: var(--cockpit-accent);
  content: "+";
  font-size: 18px;
  font-weight: 640;
  line-height: 1;
}

.demo-support-details[open] summary::after {
  content: "-";
}

.demo-support-details[open] summary {
  border-bottom: 1px solid var(--cockpit-border-strong);
}

.demo-support-details summary span {
  color: var(--cockpit-text-muted);
  font-size: 11px;
  font-weight: 610;
  letter-spacing: 0;
  text-transform: uppercase;
}

.demo-support-details summary strong {
  color: var(--cockpit-text);
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 580;
  overflow-wrap: anywhere;
}

.demo-support-details .demo-form-grid {
  background: var(--cockpit-bg);
  border-top: 0;
  gap: 16px;
  padding: 18px 14px 16px;
}

.demo-support-details .demo-detail-body {
  background: var(--cockpit-bg);
  display: grid;
  gap: 14px;
  padding: 18px 14px 16px;
}

.demo-support-details .demo-detail-body > .demo-grid,
.demo-support-details .demo-detail-body > .demo-scenario-grid,
.demo-support-details .demo-detail-body > .demo-copy-payload,
.demo-support-details .demo-detail-body > .demo-card-actions {
  margin-top: 0;
}

.demo-support-details .demo-detail-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.demo-support-details .demo-detail-section > h3 {
  color: var(--cockpit-text);
  font-size: 15px;
  line-height: 1.2;
  margin: 0;
}

.demo-support-details .demo-field:not(.demo-state-preview):not(.demo-blocker-field) {
  background: var(--cockpit-surface);
  border-color: var(--cockpit-border);
}

.demo-support-details:not([open]) .demo-form-grid,
.demo-support-details:not([open]) .demo-detail-body {
  display: none;
}

.demo-field-wide {
  grid-column: 1 / -1;
}

.demo-inline-form {
  margin-top: 10px;
}

.demo-inline-form .demo-search-input {
  min-width: 0;
}

.demo-profile-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.demo-profile-card {
  border-radius: var(--cockpit-radius);
  padding: 11px 12px;
  text-align: left;
}

.demo-profile-card strong,
.demo-profile-card span {
  display: block;
}

.demo-profile-card span {
  font-size: 13px;
  margin-top: 4px;
}

.demo-bottom-brief {
  background: color-mix(in srgb, var(--cockpit-surface) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid transparent;
  border-radius: var(--cockpit-radius);
  bottom: 16px;
  box-shadow: var(--cockpit-shadow-md);
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  inset-inline-start: auto;
  max-width: 100%;
  overflow: hidden;
  padding: 6px;
  position: sticky;
  transform: none;
  width: 100%;
  z-index: 8;
}

.demo-bottom-item {
  background: var(--cockpit-surface);
  border: 1px solid transparent;
  border-radius: var(--cockpit-radius);
  box-shadow: var(--cockpit-shadow-sm);
  color: var(--cockpit-text);
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  text-align: left;
  text-decoration: none;
  touch-action: manipulation;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.demo-bottom-item:hover {
  border-color: var(--cockpit-border);
  box-shadow: var(--cockpit-shadow-md);
  transform: translateY(-1px);
}

.demo-bottom-item:focus-visible {
  outline: 3px solid var(--demo-focus-ring);
  outline-offset: 2px;
}

.demo-bottom-item span {
  color: var(--cockpit-text-muted);
  font-size: 10px;
  font-weight: 560;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.demo-bottom-item strong {
  font-size: 14px;
  font-weight: 610;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-bottom-next {
  cursor: pointer;
  font: inherit;
}

.demo-bottom-next strong {
  background: transparent;
  border: 1px solid var(--cockpit-accent);
  border-radius: var(--cockpit-radius-sm);
  color: var(--cockpit-accent);
  padding: 5px 10px;
  text-align: center;
}

html:not(.dark) .demo-theme-toggle {
  background: var(--cockpit-surface);
  border-color: var(--cockpit-border);
  color: var(--cockpit-text-secondary);
}

html:has(#theme-dark:checked) .demo-theme-toggle {
  background: var(--cockpit-surface);
  border-color: var(--cockpit-border);
  color: var(--cockpit-text);
  -webkit-text-fill-color: var(--cockpit-text);
}

html:has(#theme-dark:checked) .demo-theme-toggle:hover,
html:has(#theme-dark:checked) .demo-theme-toggle:focus-visible,
html:has(#theme-dark:checked) .demo-theme-toggle:hover,
html:has(#theme-dark:checked) .demo-theme-toggle:focus-visible {
  border-color: var(--cockpit-text);
  background: var(--cockpit-accent-50);
  color: var(--cockpit-text);
  -webkit-text-fill-color: var(--cockpit-text);
}

html:has(#theme-forest:checked) .demo-theme-toggle,
html:has(#theme-ocean:checked) .demo-theme-toggle,
html:has(#theme-sepia:checked) .demo-theme-toggle {
  background: var(--cockpit-accent-50);
  border-color: var(--cockpit-accent);
  color: var(--cockpit-accent);
  -webkit-text-fill-color: var(--cockpit-accent);
}

html:has(#theme-forest:checked) .demo-theme-toggle:hover,
html:has(#theme-ocean:checked) .demo-theme-toggle:hover,
html:has(#theme-sepia:checked) .demo-theme-toggle:hover {
  background: var(--cockpit-accent);
  color: var(--cockpit-accent-text);
  -webkit-text-fill-color: var(--cockpit-accent-text);
}

.demo-app-shell .btn-primary,
html:has(#theme-dark:checked) .demo-app-shell .btn-primary {
  background: var(--demo-primary-bg);
  border-color: var(--demo-primary-border);
  color: var(--demo-primary-on-accent);
  -webkit-text-fill-color: var(--demo-primary-on-accent);
}

/* ---- Table/compact work list view ---- */
.demo-work-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  overflow: hidden;
}

.demo-table-header {
  display: grid;
  grid-template-columns: 2fr 110px 90px 1fr 1fr auto;
  gap: 0;
  background: transparent;
  border-bottom: 2px solid var(--cockpit-border);
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cockpit-text-muted);
}

.demo-table-header > span {
  padding: 10px 12px;
  border-inline-end: none;
}

.demo-table-header > span:last-child {
  border-inline-end: none;
}

.demo-table-row {
  display: grid;
  grid-template-columns: 2fr 110px 90px 1fr 1fr auto;
  gap: 0;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--cockpit-border);
  background: transparent;
  transition: background 0.1s ease;
  color: var(--cockpit-text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  width: 100%;
  align-items: center;
  transition: background-color 0.12s ease;
}

.demo-table-row:hover {
  background: var(--cockpit-accent-50);
  border-radius: var(--cockpit-radius-sm);
}

.demo-table-row-selected,
.demo-table-row-selected:hover {
  background: var(--cockpit-selected-bg);
  outline: 1px solid var(--cockpit-accent);
  outline-offset: -1px;
}

.demo-table-row:last-child {
  border-bottom: none;
}

.demo-table-cell {
  padding: 7px 10px;
  border-inset-inline-end: 1px solid var(--cockpit-border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-table-cell:last-child {
  border-inline-end: none;
}

.demo-table-title {
  font-weight: 540;
}

.demo-table-status {
  font-size: 11px;
  font-weight: 570;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.demo-table-blocker {
  color: var(--cockpit-text-muted);
  font-size: 12px;
}

.demo-table-next {
  font-weight: 520;
  font-size: 12px;
}

.demo-table-action .btn {
  font-size: 11px;
  padding: 3px 8px;
  white-space: nowrap;
}

.demo-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 560;
  background: var(--cockpit-surface);
  color: var(--cockpit-text);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  padding: 4px 10px;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.demo-view-toggle:hover,
.demo-view-toggle:focus-visible {
  background: var(--cockpit-accent-50);
  border-color: var(--cockpit-accent);
}

.demo-view-toggle[aria-pressed="true"] {
  background: var(--cockpit-accent);
  color: var(--cockpit-accent-text);
  border-color: var(--cockpit-accent);
}

@media (max-width: 640px) {
  .demo-table-header,
  .demo-table-row {
    grid-template-columns: 2fr 70px 1fr auto;
  }
  .demo-table-header > span:nth-child(2),
  .demo-table-cell.demo-table-owner,
  .demo-table-header > span:nth-child(5),
  .demo-table-cell.demo-table-next {
    display: none;
  }
}
/* ---- End table view ---- */

html:has(#theme-dark:checked) .demo-app-shell :is(.demo-chip[aria-pressed="true"], .demo-profile-card[aria-pressed="true"]) {
  color: var(--demo-primary-on-accent) !important;
  -webkit-text-fill-color: var(--demo-primary-on-accent) !important;
}

.demo-shell .btn {
  border-radius: var(--cockpit-radius);
  font-weight: 560;
  gap: 0.28rem;
  letter-spacing: 0;
  transition: border-color var(--demo-motion-duration) ease, background-color var(--demo-motion-duration) ease;
}

.demo-shell .btn:hover {
  z-index: 1;
}

.demo-row .btn:focus-visible,
.demo-row .btn:active {
  transform: none;
}

.demo-shell .btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(1px);
}

.demo-shell button.btn:focus-visible {
  outline: 3px solid var(--demo-focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

.demo-shell button.btn-primary:focus-visible {
  background: var(--demo-primary-focus-bg);
  border-color: var(--demo-primary-border);
  color: var(--demo-primary-on-accent);
  -webkit-text-fill-color: var(--demo-primary-on-accent);
}

.demo-shell .btn,
.demo-shell a.btn,
.demo-shell button.btn {
  max-width: 100%;
  /* Raised from 38px to the shared 44px target (WCAG 2.1 AAA 2.5.5). This is the
     authoritative shell button height, more specific than the base .btn rule. */
  min-height: var(--cockpit-target-min);
  touch-action: manipulation;
}

.demo-shell .btn[data-copy-state="success"],
.demo-shell .btn[data-copy-state="blocked"] {
  align-items: center;
  display: inline-grid;
  gap: 2px;
  justify-items: center;
  line-height: 1.15;
  min-height: 52px;
  padding-block: 8px;
}

.demo-copy-button-label {
  font-weight: 670;
}

.demo-shell .btn[data-copy-state="success"] small,
.demo-shell .btn[data-copy-state="blocked"] small {
  color: inherit;
  font-size: 11px;
  font-weight: 610;
  line-height: 1.15;
  opacity: 0.86;
  overflow-wrap: anywhere;
}

.demo-shell button.btn.is-copied {
  background: var(--cockpit-accent);
  border-color: var(--cockpit-accent);
  box-shadow: var(--cockpit-shadow-sm);
  color: var(--demo-primary-on-accent);
  -webkit-text-fill-color: var(--demo-primary-on-accent);
}

.demo-shell button.btn.is-blocked {
  background: var(--cockpit-danger-bg);
  border-color: var(--cockpit-danger-border);
  color: var(--cockpit-danger-text) !important;
  -webkit-text-fill-color: var(--cockpit-danger-text) !important;
}

@media (prefers-reduced-motion: reduce) {
  .demo-shell,
  .demo-shell * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 1024px) {
  .demo-app-shell {
    grid-template-columns: 1fr;
    max-width: 100%;
    overflow-x: hidden;
    width: 100%;
  }

  .demo-sidebar {
    align-items: center;
    border-bottom: 1px solid var(--cockpit-border);
    border-inline-end: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 12px;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    padding: 10px 24px;
    position: static;
    width: 100%;
  }

  .demo-sidebar.nav-rail {
    display: flex;
    height: auto;
    width: 100%;
  }

  .demo-brand {
    border-bottom: 0;
    margin-bottom: 0;
    padding: 4px 10px 4px 0;
    width: auto;
  }

  .demo-shell,
  .demo-header,
  .demo-header-inner,
  .demo-main {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .demo-header-inner,
  .demo-main {
    margin-inline-start: 0;
    margin-inline-end: 0;
  }

  .demo-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
    padding-bottom: 4px;
    width: 100%;
  }

  .demo-nav-sep {
    display: none;
  }

  .demo-nav-group {
    border-bottom: 0;
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    padding: 0;
  }

  .demo-nav-group-label {
    background: var(--cockpit-surface);
    border: 1px solid var(--cockpit-border);
    border-radius: var(--cockpit-radius-sm);
    flex: 0 0 auto;
    margin: 0;
    min-height: 40px;
    padding: 0 10px;
    text-transform: none;
  }

  .demo-nav-group-items {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
  }

  .demo-nav::-webkit-scrollbar {
    display: none;
  }

  .demo-nav-item {
    flex: 0 0 auto;
    margin: 0;
    width: auto;
  }

  .demo-sidebar-note {
    display: none;
  }

  .demo-bottom-brief {
    inset-inline-start: auto;
    max-width: 100%;
    transform: none;
    width: 100%;
    padding-inline: 4px;
  }
}

@media (max-width: 700px) {
  .demo-header-inner {
    padding: 10px 12px;
  }

  .demo-header-inner,
  .demo-command-top,
  .demo-command-footer,
  .demo-panel-head,
  .demo-home-spotlight-head,
  .demo-home-spotlight-actions,
  .demo-review-spotlight-head,
  .demo-review-spotlight-actions,
  .demo-create-spotlight-head,
  .demo-create-spotlight-actions,
  .demo-row,
  .demo-inline-form {
    align-items: stretch;
    flex-direction: column;
  }

  .demo-header-actions {
    justify-content: flex-start;
    margin-inline-start: 0;
    overflow-x: auto;
    width: 100%;
  }

  .demo-main {
    padding-inline: 12px;
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .demo-command-brief {
    gap: 4px;
  }

  .demo-command-footer {
    align-items: stretch;
    display: grid;
    gap: 4px;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  #command-scope {
    display: none;
  }

  #command-flow {
    grid-column: 1;
  }

  #command-flow {
    grid-row: 2;
  }

  .demo-command-actions {
    align-self: stretch;
    flex-wrap: nowrap;
    grid-column: 1;
    grid-row: 1;
    justify-content: stretch;
    min-width: 0;
    width: 100%;
  }

  .demo-command-actions .btn {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
  }

  .demo-command-flow {
    align-self: start;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    max-width: 100%;
    flex: 0 0 auto;
    width: auto;
  }

  .demo-header-metadata {
    margin-top: 8px;
    width: 100%;
  }

  .demo-grid,
  .demo-focus-grid,
  .demo-form-grid,
  .demo-profile-grid,
  .demo-scenario-grid,
  .demo-calendar-grid {
    grid-template-columns: 1fr;
  }

  .demo-summary-strip {
    gap: 0;
    padding: 0;
  }

  .demo-summary-strip .demo-metric + .demo-metric {
    border-inline-start: 0;
    border-top: 1px solid var(--cockpit-border);
  }

  .demo-home-spotlight-facts {
    grid-template-columns: 1fr;
  }

  /* Stacked vertically, the sideways flow chevrons stop making sense. */
  .demo-home-spotlight-fact:not(:last-child)::after {
    content: none;
  }

  .demo-home-spotlight-fact {
    border-inline-start: 0;
    border-top: 1px solid var(--demo-card-divider);
  }

  .demo-home-spotlight-fact:first-child {
    border-top: 0;
  }

  .demo-review-queue-stats {
    grid-template-columns: 1fr;
  }

  .demo-create-readiness-list {
    grid-template-columns: 1fr;
  }

  .demo-home-spotlight-fact {
    border-inline-start: 0;
    border-top: 1px solid var(--demo-card-divider);
    padding-block: 9px;
  }

  .demo-home-spotlight-fact:first-child {
    border-top: 0;
  }

  .demo-home-spotlight-actions > small {
    flex: 0 1 auto;
    min-width: 0;
  }

  .demo-review-spotlight-actions > small {
    flex: 0 1 auto;
    min-width: 0;
  }

  .demo-create-spotlight-actions > small {
    flex: 0 1 auto;
    min-width: 0;
  }


  .demo-command-line,
  .demo-command-row {
    grid-template-columns: 1fr;
  }

  .demo-work-path {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .demo-work-path strong {
    text-align: left;
  }

  .demo-bottom-brief {
    bottom: calc(8px + env(safe-area-inset-bottom));
    grid-template-columns: repeat(3, minmax(0, 1fr));
    inset-inline-start: 12px;
    margin-top: 0;
    max-width: none;
    position: fixed;
    inset-inline-end: 12px;
    transform: none;
    width: auto;
    z-index: 30;
  }

  .demo-start-step {
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 10px;
  }

  .demo-start-step:not(:last-child)::after {
    bottom: -11px;
    height: 10px;
    inset-inline-start: 21px;
    inset-inline-end: auto;
    top: auto;
    width: 2px;
  }

  .demo-start-step > small,
  .demo-start-step .btn {
    grid-column: 2;
  }
}

@media (max-height: 540px) and (max-width: 900px) {
  .demo-sidebar.nav-rail {
    display: none;
  }
  .demo-app-shell {
    grid-template-columns: 1fr;
  }
  .demo-main,
  .demo-screen {
    padding-bottom: 60px;
  }
  .demo-panel {
    padding: 10px 12px;
  }
  .demo-header-inner,
  .demo-main {
    margin-left: 0;
    margin-right: 0;
  }
  .demo-page-header,
  .demo-page-content {
    padding-inline: 12px;
  }
}

@media (max-width: 560px) {
  .demo-app-shell {
    display: block;
    min-height: 100dvh;
    --demo-panel-radius: var(--cockpit-radius);
    --demo-shell-font-size: 14px;
  }

  .demo-sidebar {
    gap: 8px;
    padding: 8px 8px 6px;
  }

  .demo-brand {
    gap: 8px;
  }

  .demo-brand-mark {
    border-radius: 9px;
    height: 32px;
    width: 32px;
  }

  .demo-brand strong {
    font-size: 16px;
  }

  .demo-brand small {
    font-size: 9px;
  }

  .demo-nav {
    margin-inline: -8px;
    overflow-x: auto;
    padding: 0 8px 2px;
    scroll-padding-inline: 8px;
    scrollbar-width: none;
  }

  .demo-nav-sep {
    display: none;
  }

  .demo-nav::-webkit-scrollbar {
    display: none;
  }

  .demo-nav-group {
    gap: 6px;
  }

  .demo-nav-group-label {
    border-radius: var(--cockpit-radius);
    font-size: 11px;
    min-height: 34px;
    padding: 4px 8px;
    white-space: nowrap;
  }

  .demo-nav-group-items {
    gap: 6px;
  }

  .demo-nav-item {
    border-color: var(--cockpit-border);
    border-radius: var(--cockpit-radius);
    flex-basis: auto;
    gap: 6px;
    min-height: 34px;
    padding: 4px 7px;
    white-space: nowrap;
  }

  .demo-nav-item span {
    border-radius: 7px;
    font-size: 9px;
    height: 20px;
    min-width: 18px;
    width: 18px;
  }

  .demo-nav-item strong {
    font-size: 12px;
  }

  .demo-header {
    position: static;
    z-index: 15;
  }

  .demo-header-inner {
    align-items: center;
    display: grid !important;
    gap: 6px 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 8px 10px !important;
  }

  .demo-kicker {
    font-size: 9px;
  }

  .demo-screen-title {
    font-size: 20px;
    line-height: 1.05;
  }

  .demo-header-metadata {
    display: none;
  }

  .demo-header-actions {
    display: flex;
    gap: 0;
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-content: flex-end;
    margin-inline-start: 0;
    overflow: visible;
    width: auto;
  }

  .demo-header-actions .btn:not(.demo-theme-toggle) {
    display: none;
  }

  .demo-header-actions .btn {
    justify-content: center;
    min-height: 32px;
    min-width: 0;
    padding-inline: 10px;
    width: auto;
  }

  .demo-memory-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .demo-memory-action {
    justify-self: stretch;
  }

  .demo-main {
    gap: 10px;
    padding: 10px 10px calc(14px + env(safe-area-inset-bottom));
  }

  .demo-command-brief,
  .demo-panel,
  .demo-toolbar {
    padding: 12px;
  }

  .demo-command-brief {
    gap: 4px;
  }

  .demo-recovery-grid {
    grid-template-columns: 1fr;
  }

  .demo-recovery-panel .btn {
    justify-self: stretch;
    width: 100%;
  }

  .demo-sync,
  .demo-sync-controls,
  .demo-sync-share {
    align-items: stretch;
  }

  .demo-sync-copy,
  .demo-sync-controls,
  .demo-sync-controls input {
    max-width: none;
    width: 100%;
  }

  .demo-sync-controls .btn {
    flex: 1 1 120px;
    justify-content: center;
  }

  .demo-sync-share {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .demo-command-footer {
    align-items: stretch;
    display: grid;
    gap: 4px;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  #command-scope {
    display: none;
  }

  #command-flow {
    grid-column: 1;
  }

  #command-flow {
    grid-row: 2;
  }

  .demo-command-actions {
    align-self: stretch;
    flex-wrap: nowrap;
    gap: 8px;
    grid-column: 1;
    grid-row: 1;
    justify-content: stretch;
    min-width: 0;
    width: 100%;
  }

  .demo-command-actions .btn {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
  }

  .demo-command-flow {
    align-self: start;
    flex: 0 0 auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-height: calc(1.15em * 2);
    overflow: hidden;
    text-overflow: clip;
    white-space: normal;
    width: auto;
    max-width: 100%;
    line-height: 1.15;
    margin: 0;
    padding: 0;
  }

  .demo-command-top h2,
  .demo-panel h2 {
    font-size: 22px;
    line-height: 1.08;
  }

  .demo-command-state,
  .demo-status {
    align-self: flex-start;
    text-align: left;
  }

  .demo-command-line,
  .demo-command-row {
    gap: 4px;
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 8px 10px;
  }

  .demo-command-line strong {
    font-size: 15px;
    line-height: 1.25;
  }

  .demo-command-receipt-lines {
    grid-template-columns: 1fr;
  }

  .demo-command-receipt-actions,
  .demo-card-receipt-actions {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
  }

  .demo-command-receipt-actions .btn,
  .demo-card-receipt-actions .btn {
    justify-content: center;
    width: 100%;
  }

  .demo-clipboard-steps {
    grid-template-columns: 1fr;
  }

  .demo-clipboard-confirmation {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .demo-clipboard-target-action,
  .demo-clipboard-actions .btn {
    justify-content: center;
    width: 100%;
  }

  .demo-grid {
    gap: 10px;
  }

  .demo-summary-strip {
    display: grid;
    gap: 0;
  }

  .demo-summary-strip .demo-metric {
    padding: 13px 14px;
  }

  .demo-summary-strip .demo-metric + .demo-metric {
    border-inline-start: 0;
    border-top: 1px solid var(--cockpit-border);
    padding-top: 13px;
  }

  .demo-metric {
    padding: 13px 14px;
  }

  .demo-metric strong {
    font-size: 16px;
  }

  .demo-work-card,
  .demo-review-card,
  .demo-row,
  .demo-note {
    border-radius: var(--cockpit-radius);
    padding: 12px;
  }

  .demo-review-card-main {
    grid-template-columns: 1fr;
  }

  .demo-review-card-actions {
    grid-template-columns: 1fr;
  }

  .demo-card-head {
    align-items: flex-start;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 9px 10px;
  }

  .demo-card-title {
    font-size: 16px;
    line-height: 1.22;
  }

  .demo-card-head > .demo-state-pill {
    justify-self: start;
    max-width: 100%;
  }

  .demo-card-meta,
  .demo-inline-form,
  .demo-card-actions,
  .demo-quick-actions,
  .demo-row-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .demo-card-actions .btn,
  .demo-quick-actions .btn,
  .demo-row-actions .btn {
    justify-content: center;
    width: 100%;
  }

  .demo-card-support > .demo-card-actions {
    grid-template-columns: 1fr;
  }

  /* Compact chips on phones: natural-width wrap instead of stretched tiles,
     so the toolbar stops eating the first screenful. Profile/scenario cards
     keep their 2-up grid. */
  .demo-chip-row {
    display: flex;
    flex-wrap: wrap;
  }

  .demo-chip-row .demo-chip {
    width: auto;
  }

  .demo-chip-row.demo-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 16px keeps iOS Safari from auto-zooming focused fields. */
  .demo-search-input,
  .demo-search-filters select,
  .demo-field input,
  .demo-field textarea,
  .demo-field select {
    font-size: 16px;
  }

  .demo-search-input {
    min-height: var(--cockpit-target-min);
  }

  .demo-meta-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .demo-search-input,
  .demo-field input,
  .demo-field textarea,
  .demo-field select {
    min-width: 0;
  }

  .demo-bottom-brief {
    border-radius: var(--cockpit-radius);
    bottom: calc(8px + env(safe-area-inset-bottom));
    gap: 4px;
    inset-inline-start: 8px;
    max-width: none;
    padding: 4px;
    inset-inline-end: 8px;
    width: auto;
    transform: none;
  }

  .demo-bottom-item {
    border-radius: var(--cockpit-radius-sm);
    min-height: 44px;
    min-width: 0;
    padding: 7px 6px;
  }

  .demo-bottom-item span {
    font-size: 9px;
    letter-spacing: 0;
  }

  .demo-bottom-item strong {
    font-size: 12px;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .demo-bottom-next strong {
    padding: 5px 6px;
  }
}

@media (max-width: 380px) {
  .demo-header-inner {
    grid-template-columns: 1fr;
  }

  .demo-header-actions {
    grid-row: 3;
    grid-column: 1;
    justify-content: flex-start;
  }

  .demo-bottom-item {
    min-height: 42px;
  }
}

@media (max-width: 390px) {
  .demo-main {
    padding-inline: 6px;
  }

  .demo-command-flow {
    align-self: center;
    flex: 0 0 auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-height: calc(1.1em * 2);
    overflow: hidden;
    text-overflow: clip;
    white-space: normal;
    width: auto;
    max-width: 100%;
    line-height: 1.1;
  }

  .demo-command-brief {
    gap: 4px;
  }

  .demo-command-footer {
    gap: 3px 6px;
  }

  #command-flow {
    font-size: 11px;
  }

  .demo-bottom-brief {
    inset-inline-start: auto;
    inset-inline-end: auto;
    width: 100%;
    max-width: 100%;
    padding: 4px;
    gap: 3px;
  }

  .demo-blocker-resolution {
    grid-template-columns: minmax(0, 1fr);
  }

  .demo-blocker-resolution .btn {
    justify-self: stretch;
    width: 100%;
  }

  .demo-bottom-item strong {
    font-size: 11px;
  }
}

@media (max-width: 420px) {
  .demo-screen-title {
    font-size: 18px;
  }

  .demo-sync-share {
    grid-template-columns: 1fr;
  }

  .demo-sync-qr {
    justify-self: start;
  }

  .demo-card-title {
    font-size: 15px;
  }

  .demo-header-actions {
    grid-template-columns: 1fr;
  }

  .demo-bottom-item {
    min-height: 42px;
  }
}

@media (max-width: 700px) {
  .demo-command-line {
    padding: 6px 8px;
  }

  .demo-command-line::before {
    bottom: 6px;
    top: 6px;
  }

  .demo-command-lines {
    gap: 4px;
  }

  .demo-command-footer {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  #command-scope {
    display: none;
  }

  #command-flow,
  .demo-command-flow {
    align-self: stretch;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    flex: 0 0 auto;
    grid-column: auto;
    grid-row: auto;
    line-height: 1.18;
    margin: 0;
    max-height: calc(1.18em * 2);
    max-width: 100%;
    order: 1;
    overflow: hidden;
    padding: 0;
    text-overflow: clip;
    white-space: normal;
    width: 100%;
  }

  .demo-command-actions {
    align-self: stretch;
    flex-wrap: nowrap;
    grid-column: auto;
    grid-row: auto;
    justify-content: stretch;
    margin-top: 0;
    min-width: 0;
    order: 2;
    padding-top: 0;
    width: 100%;
  }

  .demo-inline-form {
    margin-top: 6px;
  }

  .demo-support-details {
    margin-top: 6px;
  }

  .demo-support-details .demo-form-grid,
  .demo-support-details .demo-detail-body {
    padding: 12px 10px 12px;
  }

  .demo-card-support,
  .demo-row-support {
    margin-top: 6px;
    padding-top: 6px;
  }
}

@media (max-width: 390px) {
  .demo-command-footer {
    gap: 2px;
  }

  #command-flow,
  .demo-command-flow {
    font-size: 11px;
    line-height: 1.15;
    max-height: calc(1.15em * 2);
  }
}

@media (max-width: 420px) {
  .demo-row.has-row-support {
    grid-template-columns: 1fr;
  }

  .demo-row.has-row-support > div:first-child,
  .demo-row.has-row-support > .demo-row-actions,
  .demo-row.has-row-support > .demo-row-support {
    grid-column: 1;
  }

  .demo-row.has-row-support > .demo-row-actions {
    justify-self: stretch;
  }
}

.demo-app-shell {
  --demo-panel-radius: var(--cockpit-radius);
  --demo-panel-shadow: none;
  --demo-panel-hover-shadow: none;
  --demo-card-shadow: none;
  --demo-card-hover-shadow: none;
  --demo-card-selected-shadow: none;
  --demo-command-accent: transparent;
  --demo-command-bg: transparent;
  --demo-meta-bg: transparent;
}

.demo-sidebar {
  background: var(--cockpit-nav-bg);
}

.demo-brand {
  border-bottom: 1px solid var(--cockpit-border);
  padding: 8px 10px 12px;
}

.demo-brand-mark,
.demo-brand-mark.nav-rail-brand-mark {
  background: var(--cockpit-surface);
  border-color: var(--cockpit-border);
  border-radius: var(--cockpit-radius-sm);
  box-shadow: none;
  color: var(--cockpit-accent);
  height: 28px;
  width: 28px;
}

.demo-brand strong,
.demo-screen-title,
.demo-panel-head h2,
.demo-command-top h2,
.demo-panel h2 {
  letter-spacing: 0;
}

.demo-header.page-header {
  background: var(--cockpit-surface);
  border-bottom: 1px solid var(--cockpit-border);
  box-shadow: none;
}

.demo-header-inner,
.demo-main {
  max-width: 1240px;
}

.demo-header-inner {
  padding: 14px 24px;
  width: 100%;
}

.demo-kicker {
  color: var(--cockpit-text-muted);
  font-size: 12px;
  font-weight: 520;
  text-transform: none;
}

.demo-screen-title {
  font-size: 17px;
  font-weight: 660;
}

.demo-panel-head h2,
.demo-command-top h2,
.demo-panel h2 {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 610;
  line-height: 1.2;
}

.demo-header-metadata {
  background: transparent;
  border-inset-inline-start: 1px solid var(--cockpit-border);
  border-radius: 0;
}

.demo-command-brief.sidecar {
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  box-shadow: none;
  gap: 10px;
  margin-bottom: 14px;
  padding: 14px;
}

.demo-command-lines {
  gap: 0;
}

.demo-command-line,
.demo-command-next {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--cockpit-border);
  grid-template-columns: minmax(112px, 0.34fr) minmax(0, 1fr);
  padding: 7px 0;
}

.demo-command-lines .demo-command-line:first-child {
  border-top: 0;
}

.demo-command-line::before {
  display: none;
}

.demo-command-line strong {
  text-align: right;
}

.demo-command-next strong {
  color: var(--cockpit-accent);
}

.demo-command-footer {
  border-top: 1px solid var(--cockpit-border);
  gap: 10px;
  padding-top: 10px;
}

.demo-command-actions {
  margin-inset-inline-start: auto;
}

.demo-summary-strip {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  overflow: hidden;
  padding: 0;
}

.demo-summary-strip .demo-metric {
  align-items: baseline;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--cockpit-border);
  display: grid;
  gap: 2px 12px;
  grid-template-columns: minmax(132px, 0.38fr) minmax(0, 1fr);
  min-height: 0;
  padding: 7px 0;
}

.demo-summary-strip .demo-metric:first-child {
  border-top: 0;
}

.demo-summary-strip .demo-metric + .demo-metric {
  border-inline-start: 0;
}

.demo-summary-strip .demo-metric span {
  color: var(--cockpit-text-muted);
  font-size: 11px;
  font-weight: 560;
  text-transform: none;
}

.demo-summary-strip .demo-metric strong {
  color: var(--cockpit-text);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 560;
  line-height: 1.2;
  text-align: left;
}

.demo-summary-strip .demo-metric p {
  color: var(--cockpit-text-muted);
  font-size: 11px;
  grid-column: 1 / -1;
  margin: 0;
}

.demo-panel,
.demo-toolbar,
.demo-row,
.demo-note,
.demo-scenario-card {
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  box-shadow: none;
}

.demo-work-card,
.demo-review-card {
  background: var(--demo-work-card-bg);
  background-color: var(--demo-work-card-bg);
  border: 1px solid var(--demo-work-card-border);
  border-radius: var(--cockpit-radius);
  box-shadow: var(--demo-work-card-shadow);
  color: var(--cockpit-text);
  transition: border-color var(--demo-motion-duration) ease;
}

.demo-panel:hover,
.demo-toolbar:hover,
.demo-row:hover,
.demo-note:hover,
.demo-scenario-card:hover {
  box-shadow: none;
}

.demo-work-card:hover,
.demo-review-card:hover {
  border-color: var(--cockpit-border-strong);
  box-shadow: var(--demo-work-card-hover-shadow);
}

.demo-row {
  border-inset-inline-start: 1px solid var(--cockpit-border);
}

.demo-work-card,
.demo-review-card {
  border-inset-inline-start: 1px solid var(--demo-work-card-border);
}

.demo-work-card.selected,
.demo-review-card:focus-within {
  background: var(--demo-work-card-bg);
  border-color: var(--cockpit-accent);
  box-shadow: var(--demo-work-card-selected-shadow);
}

.demo-app-shell .demo-profile-card[aria-pressed="true"] {
  background: var(--cockpit-surface);
  border-color: var(--cockpit-border-strong);
  border-width: 1px;
  border-color: var(--cockpit-accent);
  box-shadow: none;
  color: var(--cockpit-text);
  -webkit-text-fill-color: var(--cockpit-text);
}

.demo-app-shell .demo-profile-card[aria-pressed="true"] strong,
.demo-app-shell .demo-profile-card[aria-pressed="true"] span {
  color: var(--cockpit-text);
  -webkit-text-fill-color: var(--cockpit-text);
}

.demo-work-card.has-blocker,
.demo-review-card.has-blocker {
  border-color: var(--demo-work-card-alert-border);
}

.demo-work-card.needs-next,
.demo-review-card.needs-next {
  border-color: var(--demo-work-card-alert-border);
}

.demo-work-card.has-blocker .demo-state-pill,
.demo-review-card.has-blocker .demo-state-pill,
.demo-work-card.needs-next .demo-state-pill,
.demo-review-card.needs-next .demo-state-pill {
  background: var(--demo-card-status-bg);
  border-color: var(--cockpit-accent);
}

.demo-scenario-grid {
  border-top: 1px solid var(--cockpit-border);
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}

.demo-scenario-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--cockpit-border);
  box-shadow: none;
  display: grid;
  gap: 2px 12px;
  grid-template-columns: minmax(132px, 0.38fr) minmax(0, 1fr);
  padding: 8px 0;
}

.demo-scenario-card:first-child {
  border-top: 0;
}

.demo-scenario-card strong {
  font-size: 13px;
  font-weight: 560;
}

.demo-scenario-card span {
  color: var(--cockpit-text-muted);
  font-size: 12px;
}

.demo-scenario-card:hover,
.demo-scenario-card:focus-visible {
  background: var(--cockpit-hover-bg);
  border-color: var(--cockpit-border);
}

.demo-scenario-card[aria-pressed="true"] {
  background: var(--cockpit-selected-bg);
  border-color: var(--cockpit-border);
  box-shadow: none;
  padding-inset-inline-start: 9px;
}

.demo-card-head {
  background: transparent;
  border-color: var(--cockpit-border);
}

.demo-work-path,
.demo-command-work-path,
html:has(#theme-dark:checked) .demo-command-work-path {
  background: var(--cockpit-surface);
  border-color: var(--cockpit-border);
  box-shadow: none;
}

.demo-command-work-path {
  border: 1px solid var(--cockpit-border-strong);
}

.demo-work-path-step {
  border-radius: var(--cockpit-radius-sm);
}

.demo-card-title {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 610;
}

.demo-state-pill,
.demo-command-state,
.demo-status,
.demo-chip,
.demo-profile-card {
  border-radius: var(--cockpit-radius-sm);
}

.demo-chip[aria-pressed="true"] {
  background: var(--cockpit-selected-bg);
  border-color: var(--cockpit-border-strong);
  color: var(--cockpit-selected-fg);
}

.demo-command-memory,
.demo-memory-strip {
  background: var(--cockpit-surface);
  box-shadow: none;
}

.demo-memory-strip {
  background: var(--demo-card-memory-bg);
  border-color: var(--demo-card-inner-border);
  box-shadow: inset 0 0 0 1px rgba(29, 111, 100, 0.12);
}

.demo-memory-strip.has-memory {
  background: var(--demo-card-memory-bg);
  border-color: var(--demo-card-memory-border);
  border-color: var(--cockpit-accent);
}

.demo-card-receipt,
.demo-command-receipt,
.demo-command-receipt[data-receipt-kind="clipboard"],
.demo-clipboard-notice {
  animation: none;
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  box-shadow: none;
  padding: 9px 10px;
}

.demo-bottom-brief {
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  box-shadow: none;
  margin-top: 14px;
}

.demo-bottom-brief[hidden] {
  display: none;
}

.demo-bottom-item {
  background: transparent;
  border: 0;
  border-radius: var(--cockpit-radius-sm);
}

.demo-bottom-next strong {
  background: transparent;
  border: 1px solid var(--cockpit-border-strong);
  color: var(--cockpit-text);
}

@media (min-width: 701px) {
  .demo-bottom-brief {
    display: none;
  }
}

@media (max-width: 700px) {
  .demo-work-list,
  .demo-review-list {
    gap: 12px;
  }

  .demo-command-brief.sidecar {
    gap: 6px;
    margin-bottom: 10px;
    padding: 10px;
  }

  .demo-command-work-path {
    gap: 5px;
    grid-template-columns: minmax(0, 1fr);
    padding: 8px 10px;
  }

  .demo-command-work-path .section-label {
    font-size: 10px;
  }

  .demo-command-work-path .demo-work-path-steps {
    gap: 4px;
  }

  .demo-command-work-path .demo-work-path-step {
    font-size: 10px;
    padding: 2px 6px;
  }

  .demo-command-work-path > strong {
    font-size: 12px;
    line-height: 1.25;
  }

  .demo-command-memory {
    gap: 3px;
    padding: 8px 10px;
  }

  .demo-command-memory span {
    font-size: 10px;
  }

  .demo-command-memory strong {
    font-size: 12px;
    line-height: 1.25;
  }

  .demo-command-line,
  .demo-command-next {
    grid-template-columns: minmax(96px, 0.38fr) minmax(0, 1fr);
    padding: 6px 0;
  }

  .demo-command-line strong {
    text-align: left;
  }

  .demo-card-fact {
    align-items: start;
    gap: 4px;
    grid-template-columns: 1fr;
  }

  .demo-card-meta span {
    width: 100%;
  }

  .demo-command-footer {
    border-top: 0;
    gap: 6px;
    padding-top: 2px;
  }

  .demo-command-flow {
    font-size: 12px;
    line-height: 1.25;
  }

  .demo-bottom-brief {
    display: grid;
  }
}

@media (min-width: 900px) {
  .demo-summary-strip {
    grid-template-columns: 1fr;
  }

  .demo-summary-strip .demo-metric:nth-child(2) {
    border-top: 1px solid var(--cockpit-border);
  }

  .demo-summary-strip .demo-metric:nth-child(even) {
    border-inline-start: 0;
  }
}

@media (max-width: 700px) {
  .demo-command-line,
  .demo-command-next {
    border: 1px solid var(--cockpit-border);
    border-radius: var(--cockpit-radius);
    padding: 8px 10px;
  }

  .demo-command-lines {
    gap: 8px;
  }

  .demo-forward-triad {
    grid-template-columns: 1fr;
  }

  .demo-forward-triad .demo-command-line {
    min-height: 0;
  }

  .demo-forward-actions {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr;
  }

  .demo-forward-actions .demo-pack-primary-action {
    flex: none;
    justify-content: center;
    min-height: 44px;
    min-width: 0;
    width: 100%;
  }

  .demo-forward-save-note {
    min-width: 0;
    width: 100%;
  }

  .demo-command-lines .demo-command-line:first-child {
    border-top: 1px solid var(--cockpit-border);
  }

  .demo-command-line strong,
  .demo-summary-strip .demo-metric strong {
    text-align: left;
  }

}

.demo-app-shell {
  --demo-work-card-bg: var(--cockpit-surface);
  --demo-work-card-bg-alt: var(--cockpit-nav-bg);
  --demo-work-card-border: var(--cockpit-border);
  --demo-work-card-shadow: var(--cockpit-shadow-sm);
  --demo-work-card-hover-shadow: var(--cockpit-shadow-md, 0 4px 12px rgba(0,0,0,0.12));
  --demo-work-card-selected-shadow: 0 0 0 2px var(--cockpit-accent);
  --demo-card-inner-bg: var(--cockpit-nav-bg);
  --demo-card-inner-border: var(--cockpit-border);
  --demo-card-divider: var(--cockpit-border);
  --demo-card-command-bg: var(--cockpit-accent-50);
  --demo-card-memory-bg: var(--cockpit-accent-50);
  --demo-card-memory-border: var(--cockpit-accent);
  --demo-card-status-bg: var(--cockpit-accent-50);
  --demo-card-status-border: var(--cockpit-accent);
  --demo-card-field-bg: var(--cockpit-surface);
  --demo-card-field-bg-alt: var(--cockpit-nav-bg);
  --demo-card-field-label-bg: var(--cockpit-border);
  --demo-card-action-bg: var(--cockpit-nav-bg);
  --demo-card-action-border: var(--cockpit-border);
  --demo-dock-action-bg: var(--demo-primary-bg);
  --demo-dock-action-border: var(--demo-primary-border);
  --demo-dock-action-text: var(--demo-primary-on-accent);
  --demo-dock-action-label: var(--cockpit-accent-text);
  --demo-work-card-state-rail: var(--cockpit-accent);
  --demo-work-card-setup-border: var(--cockpit-warning-border);
  --demo-work-card-setup-rail: var(--cockpit-warning-border);
}

html:has(#theme-dark:checked) .demo-app-shell {
  --demo-work-card-bg: var(--cockpit-surface);
  --demo-work-card-bg-alt: var(--cockpit-nav-bg);
  --demo-work-card-border: var(--cockpit-border);
  --demo-work-card-shadow: var(--cockpit-shadow-sm);
  --demo-work-card-hover-shadow: var(--cockpit-shadow-md, 0 4px 12px rgba(0,0,0,0.15));
  --demo-work-card-selected-shadow: 0 0 0 2px var(--cockpit-accent);
  --demo-card-inner-bg: var(--cockpit-nav-bg);
  --demo-card-inner-border: var(--cockpit-border);
  --demo-card-divider: var(--cockpit-border);
  --demo-card-command-bg: var(--cockpit-accent-50);
  --demo-card-memory-bg: var(--cockpit-accent-50);
  --demo-card-memory-border: var(--cockpit-accent);
  --demo-card-status-bg: var(--cockpit-accent-50);
  --demo-card-status-border: var(--cockpit-accent);
  --demo-card-field-bg: var(--cockpit-surface);
  --demo-card-field-bg-alt: var(--cockpit-nav-bg);
  --demo-card-field-label-bg: var(--cockpit-border);
  --demo-card-action-bg: var(--cockpit-nav-bg);
  --demo-card-action-border: var(--cockpit-border);
  --demo-dock-action-bg: var(--demo-primary-bg);
  --demo-dock-action-border: var(--demo-primary-border);
  --demo-dock-action-text: var(--demo-primary-on-accent);
  --demo-dock-action-label: var(--cockpit-accent-text);
  --demo-work-card-state-rail: var(--cockpit-accent);
  --demo-work-card-setup-border: var(--cockpit-warning-border);
  --demo-work-card-setup-rail: var(--cockpit-warning-border);
}

.demo-work-list,
.demo-review-list {
  gap: 24px;
}

.demo-list-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.demo-list-panel:hover {
  box-shadow: none;
}

.demo-list-panel > .demo-panel-head {
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  margin-bottom: 14px;
  padding: 14px 16px;
}

.demo-list-panel > .demo-action-receipt,
.demo-list-panel > .demo-card-receipt,
.demo-list-panel > .demo-disabled-reason,
.demo-list-panel > .demo-home-spotlight {
  margin-bottom: 14px;
}

.demo-work-card,
.demo-review-card,
.demo-review-card.selected {
  border-color: var(--demo-work-card-border);
}

.demo-work-card,
.demo-review-card {
  border-width: 1.5px;
  padding: 18px 18px 18px 26px;
}

.demo-work-list > .demo-work-card:nth-child(even),
.demo-review-list > .demo-review-card:nth-child(even) {
  background: var(--demo-work-card-bg-alt);
}

.demo-work-card::before,
.demo-review-card::before {
  content: none;
}

.demo-work-card > .demo-card-head,
.demo-review-card > .demo-card-head {
  border-bottom: 1px solid var(--demo-card-divider);
  padding-bottom: 14px;
}

.demo-review-card-main {
  gap: 18px;
}

.demo-card-facts {
  background: var(--demo-card-field-bg);
  border: 1px solid var(--demo-card-inner-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 0 rgba(35, 29, 18, 0.08);
}

.demo-card-fact {
  background: var(--demo-card-field-bg);
}

.demo-card-fact:nth-child(even) {
  background: var(--demo-card-field-bg-alt);
}

.demo-card-fact span {
  background: var(--demo-card-field-label-bg);
  border: 1px solid var(--demo-card-divider);
  border-radius: var(--cockpit-radius-sm);
  color: var(--cockpit-text-secondary);
  justify-self: start;
  padding: 3px 6px;
}

.demo-card-fact strong {
  color: var(--cockpit-text);
}

.demo-review-card-actions {
  background: var(--demo-card-action-bg);
  border: 1px solid var(--demo-card-action-border);
  border-radius: var(--cockpit-radius);
  padding: 10px;
}

.demo-bottom-next {
  background: var(--demo-dock-action-bg);
  border: 1px solid var(--demo-dock-action-border);
  color: var(--demo-dock-action-text);
}

.demo-bottom-next:hover {
  background: var(--demo-primary-focus-bg);
  border-color: var(--demo-dock-action-border);
}

.demo-bottom-next span {
  color: var(--demo-dock-action-label);
}

.demo-bottom-next strong {
  background: transparent;
  border: 0;
  color: var(--demo-dock-action-text);
  padding: 0;
  text-align: left;
}

.demo-work-card .demo-card-facts {
  margin-bottom: 12px;
}

.demo-command-row {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.demo-work-card.has-blocker .demo-card-facts,
.demo-review-card.has-blocker .demo-card-facts,
.demo-work-card.needs-next .demo-card-facts,
.demo-review-card.needs-next .demo-card-facts {
  border-color: var(--demo-work-card-alert-border);
}

.demo-work-card.has-blocker,
.demo-review-card.has-blocker {
  border-color: var(--demo-work-card-alert-border);
}

.demo-work-card.needs-next,
.demo-review-card.needs-next {
  border-color: var(--demo-work-card-setup-border);
}

/* Finished work recedes so open work carries the list. */
.demo-work-card.is-done,
.demo-review-card.is-done {
  opacity: 0.72;
}

.demo-work-card.is-done:hover,
.demo-work-card.is-done:focus-within,
.demo-review-card.is-done:hover,
.demo-review-card.is-done:focus-within {
  opacity: 1;
}

.demo-work-card.needs-next::before,
.demo-review-card.needs-next::before {
  background: var(--demo-work-card-setup-rail);
  opacity: 1;
}

.demo-work-card.selected,
.demo-review-card.selected {
  box-shadow: var(--demo-work-card-selected-shadow);
}

.demo-work-card.has-blocker .demo-state-pill,
.demo-review-card.has-blocker .demo-state-pill,
.demo-work-card.needs-next .demo-state-pill,
.demo-review-card.needs-next .demo-state-pill {
  color: var(--cockpit-text);
}

.demo-card-meta {
  border-top-color: var(--demo-card-divider);
}

@media (max-width: 700px) {
  .demo-work-list,
  .demo-review-list {
    gap: 18px;
  }

  .demo-list-panel > .demo-panel-head {
    margin-bottom: 12px;
    padding: 12px;
  }

  .demo-work-card,
  .demo-review-card {
    padding: 14px 14px 14px 22px;
  }

  .demo-bottom-brief {
    bottom: calc(8px + env(safe-area-inset-bottom));
    inset-inline-start: 8px;
    margin: 0;
    max-width: none;
    position: fixed;
    inset-inline-end: 8px;
    width: auto;
  }
}

@media (max-width: 700px) {
  .demo-command-brief {
    gap: 3px;
    padding: 10px;
  }

  .demo-command-line {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-inline-start: 0;
    padding-inline-end: 0;
  }

  .demo-command-line::before {
    top: 8px;
    bottom: 8px;
  }

  .demo-command-lines {
    gap: 6px;
  }

  .demo-command-footer {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    border-top: 0;
    gap: 2px;
    margin-top: 0;
    padding-top: 0;
  }

  #command-flow,
  .demo-command-flow {
    align-self: stretch;
    order: 1;
  }

  .demo-command-actions {
    order: 2;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    padding-top: 0;
  }

  #command-flow,
  .demo-command-flow {
    margin: 0;
    padding: 0;
  }
}

@media (max-width: 390px) {
  .demo-command-line {
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .demo-command-footer {
    gap: 1px;
  }
}

@media (max-width: 720px) {
  .demo-command-brief {
    padding: 10px;
    gap: 6px;
  }

  .demo-command-top {
    align-items: start;
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 0;
  }

  .demo-command-top h2 {
    font-size: 18px;
    line-height: 1.1;
  }

  .demo-command-state {
    justify-self: end;
    padding: 5px 8px;
  }

  .demo-command-top h2,
  .demo-command-brief .demo-command-line strong {
    margin: 0;
  }

  .demo-command-lines {
    gap: 4px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .demo-command-line {
    gap: 3px;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    min-height: 0;
    padding: 7px 8px;
  }

  .demo-command-line::before {
    display: none;
  }

  .demo-command-line span {
    font-size: 10px;
    line-height: 1.05;
  }

  .demo-command-line strong {
    font-size: 13px;
    line-height: 1.16;
  }

  .demo-command-work-path {
    gap: 4px;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 6px 8px;
  }

  .demo-command-work-path .section-label,
  .demo-command-work-path > strong {
    display: none;
  }

  .demo-command-work-path .demo-work-path-steps {
    gap: 3px;
  }

  .demo-command-work-path .demo-work-path-step {
    font-size: 10px;
    padding: 2px 5px;
  }

  .demo-command-memory {
    align-items: center;
    display: grid;
    gap: 6px;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 6px 8px;
  }

  .demo-command-memory span {
    font-size: 10px;
  }

  .demo-command-memory strong {
    font-size: 12px;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .demo-command-footer {
    align-items: stretch;
    border-top: 0;
    display: grid;
    gap: 4px;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 0;
  }

  #command-flow,
  .demo-command-flow {
    font-size: 12px;
    line-height: 1.15;
    margin: 0;
    max-height: calc(1.15em * 2);
    max-width: 100%;
    overflow: hidden;
    padding: 0;
  }

  .demo-command-actions {
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .demo-command-actions .btn {
    min-height: var(--cockpit-target-min);
    width: 100%;
  }
}

@media (max-width: 700px) {
  html {
    scroll-padding-bottom: calc(156px + env(safe-area-inset-bottom));
  }

  .demo-main {
    padding-bottom: calc(132px + env(safe-area-inset-bottom));
  }

  .demo-card-actions,
  .demo-forward-actions {
    scroll-margin-bottom: calc(156px + env(safe-area-inset-bottom));
  }

  .demo-bottom-brief {
    align-items: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .demo-bottom-next {
    grid-column: 1 / -1;
  }

  .demo-bottom-next strong {
    font-size: 14px;
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

@media (max-width: 390px) {
  .demo-main {
    padding-bottom: calc(138px + env(safe-area-inset-bottom));
  }

  .demo-bottom-item {
    padding-inline: 8px;
  }
}

/* The tab bar is mobile-only — above 1024px the sidebar rail is the nav. Every
   other .demo-tab-bar rule lives inside the media block below, so without this
   base rule the populated <nav> falls back to display:block and drops a stray
   list of links at the bottom of every desktop page. */
.demo-tab-bar {
  display: none;
}

@media (max-width: 1024px) {
  .demo-sidebar.nav-rail {
    display: none;
  }
  .demo-tab-bar {
    background: var(--cockpit-nav-bg);
    border-top: 1px solid var(--cockpit-border);
    bottom: 0;
    display: flex;
    gap: 4px;
    justify-content: flex-start;
    left: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 8px;
    position: fixed;
    scrollbar-width: none;
    width: 100%;
    z-index: 100;
  }
  .demo-tab-bar::-webkit-scrollbar {
    display: none;
  }
  .demo-tab-bar .demo-nav-item {
    border-radius: 999px;
    flex-shrink: 0;
    font-size: 11px;
    gap: 4px;
    min-height: 36px;
    min-width: 0;
    padding: 4px 8px;
    width: auto;
  }
  .demo-tab-bar .demo-nav-item .nav-rail-icon {
    font-size: 14px;
  }
  .demo-app-shell {
    grid-template-columns: 1fr;
  }
  .demo-main,
  .demo-screen {
    padding-bottom: 100px;
  }
  .demo-bottom-brief {
    bottom: 80px;
  }
}

.demo-help-tip:hover,
.demo-help-tip:focus {
  background: var(--cockpit-accent);
  color: var(--cockpit-accent-text);
}

.demo-help-tip::after {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--cockpit-text);
  color: var(--cockpit-bg);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.35;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: normal;
  max-width: 260px;
  width: max-content;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 100;
}

.demo-help-tip:hover::after,
.demo-help-tip:focus-visible::after {
  opacity: 1;
}

/* ---- Compare page ---- */
.demo-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.demo-compare-col {
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  padding: 16px;
}
.demo-compare-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: var(--cockpit-text-muted);
}
.demo-compare-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}
.demo-compare-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.demo-compare-field span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cockpit-text-muted);
}
.demo-compare-field strong { font-size:14px; font-weight:520; }
.demo-compare-picker { margin-top:20px; }
.demo-compare-chip {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  margin: 4px 0;
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: var(--cockpit-text);
  text-align: left;
  transition: background 0.12s;
}
.demo-compare-chip:hover,.demo-compare-chip:focus-visible { background:var(--cockpit-hover-bg); border-color:var(--cockpit-accent); }
.demo-compare-chip small { color:var(--cockpit-text-muted); }

/* ---- Calendar ---- */
/* ---- Calendar ---- */
.demo-cal-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
}
.demo-cal-today { margin-inset-inline-start: auto; }

.demo-insights-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.demo-insight-bar {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(80px,140px) 1fr auto;
  width: 100%;
}
.demo-insight-bar-label {
  color: var(--cockpit-text-secondary);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.demo-insight-bar-track {
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius-sm);
  display: block;
  height: 14px;
  overflow: hidden;
}
.demo-insight-bar-fill {
  background: var(--cockpit-accent);
  border-radius: inherit;
  display: block;
  height: 100%;
  min-width: 2px;
}
.demo-insight-bar-value {
  color: var(--cockpit-text);
  font-size: 13px;
  font-weight: 520;
}
.demo-bar-fill-0{width:0}.demo-bar-fill-5{width:5%}.demo-bar-fill-10{width:10%}.demo-bar-fill-15{width:15%}.demo-bar-fill-20{width:20%}.demo-bar-fill-25{width:25%}.demo-bar-fill-30{width:30%}
.demo-bar-fill-35{width:35%}.demo-bar-fill-40{width:40%}.demo-bar-fill-45{width:45%}.demo-bar-fill-50{width:50%}.demo-bar-fill-55{width:55%}.demo-bar-fill-60{width:60%}.demo-bar-fill-65{width:65%}
.demo-bar-fill-70{width:70%}.demo-bar-fill-75{width:75%}.demo-bar-fill-80{width:80%}.demo-bar-fill-85{width:85%}.demo-bar-fill-90{width:90%}.demo-bar-fill-95{width:95%}.demo-bar-fill-100{width:100%}

/* ---- Unblock cascade animation ---- */
@keyframes demo-unblock-flash {
0%   { box-shadow: 0 0 0 2px var(--cockpit-accent); transform: translateY(-3px); }
65%  { box-shadow: 0 0 0 2px var(--cockpit-accent); transform: translateY(0); }
100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); transform: translateY(0); }
}
.demo-just-unblocked {
  animation: demo-unblock-flash 1.5s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.demo-just-unblocked { animation: none; box-shadow: 0 0 0 2px var(--cockpit-accent); }
}

/* ---- Command palette (Cmd+K) ---- */
.demo-cmdk {
  width: min(560px, 92vw);
  max-width: 92vw;
  padding: 0;
  border: 1px solid var(--cockpit-border-strong);
  border-radius: var(--cockpit-radius);
  background: var(--cockpit-surface);
  color: var(--cockpit-text);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  margin: 12vh auto auto;
}
.demo-cmdk::backdrop { background: rgba(0, 0, 0, 0.45); }
.demo-cmdk-input {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid var(--cockpit-border);
  background: transparent;
  color: var(--cockpit-text);
  font: inherit;
  font-size: 15px;
  padding: 14px 16px;
  outline: none;
}
.demo-cmdk-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 46vh;
  overflow-y: auto;
  scrollbar-width: auto;
  scrollbar-color: var(--cockpit-border-strong) var(--cockpit-bg);
}

.demo-cmdk-list::-webkit-scrollbar {
  width: 8px;
}

.demo-cmdk-list::-webkit-scrollbar-track {
  background: var(--cockpit-bg);
}

.demo-cmdk-list::-webkit-scrollbar-thumb,
.demo-cmdk-list::-webkit-scrollbar-thumb:hover {
  border-radius: 4px;
  border: 1px solid transparent;
  background-clip: padding-box;
}

.demo-cmdk-list::-webkit-scrollbar-thumb {
  background: var(--cockpit-border-strong);
}

.demo-cmdk-list::-webkit-scrollbar-thumb:hover {
  background: var(--cockpit-text-muted);
}
.demo-cmdk-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--cockpit-radius-sm);
  cursor: pointer;
}
.demo-cmdk-item.is-active { background: var(--cockpit-selected-bg); }
.demo-cmdk-item small {
  color: var(--cockpit-text-muted);
  font-size: 11px;
  white-space: nowrap;
}
.demo-cmdk-empty { padding: 12px 10px; color: var(--cockpit-text-muted); }
.demo-cmdk-hint {
  margin: 0;
  padding: 8px 16px;
  border-top: 1px solid var(--cockpit-border);
  color: var(--cockpit-text-muted);
  font-size: 11px;
}

/* ---- Insights cards + sections ---- */
.demo-insights-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.demo-insights-grid-3 { grid-template-columns:repeat(3,1fr); }
.demo-insight-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--cockpit-surface);
  border: 1px solid transparent;
  border-radius: var(--cockpit-radius);
  padding: 16px 18px;
  box-shadow: var(--cockpit-shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.demo-insight-card:hover {
  border-color: var(--cockpit-border);
  box-shadow: var(--cockpit-shadow-md);
}
.demo-insight-value {
  font-size: 30px;
  font-weight: 650;
  line-height: 1;
  color: var(--cockpit-text);
}
.demo-insight-card strong {
  font-size: 13px;
  font-weight: 550;
  color: var(--cockpit-text);
}
.demo-insight-card small { font-size:12px; color:var(--cockpit-text-muted); }
.demo-insight-good { border-color:var(--cockpit-success-border); }
.demo-insight-good .demo-insight-value { color:var(--cockpit-success-text); }
.demo-insight-warn { border-color:var(--cockpit-warning-border); }
.demo-insight-warn .demo-insight-value { color:var(--cockpit-warning-text); }
.demo-insight-low { border-color:var(--cockpit-danger-border); }
.demo-insight-low .demo-insight-value { color:var(--cockpit-danger-text); }
.demo-insights-section { margin:14px 0; }
.demo-insights-section h3 {
  font-size: 14px;
  font-weight: 520;
  color: var(--cockpit-text);
  margin: 0 0 12px;
}
@media (max-width:720px){ .demo-insights-grid,.demo-insights-grid-3 { grid-template-columns:repeat(2,1fr); } }
.demo-cal-select {
  padding: 4px 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 520;
  background: var(--cockpit-surface);
  color: var(--cockpit-text);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  cursor: pointer;
}
.demo-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 4px;
  background: var(--cockpit-bg);
  border-radius: var(--cockpit-radius);
  padding: 12px;
}
.demo-cal-header {
  padding: 8px 4px;
  font-size: 11px;
  font-weight: 550;
  text-transform: uppercase;
  text-align: center;
  color: var(--cockpit-text-muted);
  letter-spacing: 0.04em;
}
.demo-cal-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 80px;
  padding: 10px 8px;
  background: var(--cockpit-surface);
  border-radius: var(--cockpit-radius);
  cursor: pointer;
  font: inherit;
  color: var(--cockpit-text);
  position: relative;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  box-shadow: var(--cockpit-shadow-sm);
}
.demo-cal-cell:hover,.demo-cal-cell:focus-visible {
  background: var(--cockpit-hover-bg);
  box-shadow: var(--cockpit-shadow-md);
  border-color: var(--cockpit-border);
  transform: translateY(-1px);
}
.demo-cal-empty { background:transparent; cursor:default; }
.demo-cal-empty:hover { background:transparent; box-shadow:none; }
.demo-cal-today {
  border-color: var(--cockpit-accent);
  box-shadow: 0 0 0 1px var(--cockpit-accent);
}
.demo-cal-has-items { background:var(--cockpit-accent-50); }
.demo-cal-selected {
  background: var(--cockpit-accent);
  color: var(--cockpit-accent-text);
  border-color: var(--cockpit-accent);
  box-shadow: var(--cockpit-shadow-md), 0 0 0 2px var(--cockpit-accent);
}
.demo-cal-day {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 4px;
}
.demo-cal-selected .demo-cal-day { color:var(--cockpit-accent-text); }
.demo-cal-count {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 640;
  background: var(--cockpit-accent);
  color: var(--cockpit-accent-text);
  border-radius: 99px;
  padding: 0 6px;
  min-width: 20px;
  text-align: center;
  line-height: 20px;
}
.demo-cal-selected .demo-cal-count { background:var(--cockpit-accent-text); color:var(--cockpit-accent); }
.demo-cal-detail {
  margin-top: 16px;
  padding: 20px;
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  box-shadow: var(--cockpit-shadow-sm);
}
.demo-cal-detail h3 { font-size:18px; margin-bottom:12px; }
.demo-cal-item-detail {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cockpit-border);
}
.demo-cal-item-detail:last-child { border-bottom:none; }
.demo-cal-item-detail small {
  color: var(--cockpit-text-muted);
  font-size: 12px;
  margin-inset-inline-start: auto;
}
@media (max-width:640px) {
.demo-cal-cell { min-height:64px; padding:5px; }
.demo-cal-day { font-size:14px; }
.demo-calendar-grid { padding:8px; gap:2px; }
}

/* Settings screen */
.demo-settings-section {
  margin-top: 0;
  padding: 20px 0;
  border-bottom: 1px solid var(--cockpit-border);
}

.demo-settings-section:last-child {
  border-bottom: none;
}
.demo-settings-section h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
}
.demo-settings-section > .demo-field-help {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--cockpit-text-muted);
}
.demo-settings .demo-recovery-panel { margin-top: 14px; }
.demo-settings .demo-profile-card span { color: var(--cockpit-text-muted); }
.demo-settings .demo-profile-card[aria-pressed="true"] span { color: inherit; }
.demo-copy-layer {
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  padding: 6px 12px;
  margin-bottom: 8px;
}
.demo-copy-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--cockpit-border);
}
.demo-copy-row:last-child { border-bottom:0; }
.demo-copy-row span {
  color: var(--cockpit-text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.demo-copy-row strong {
  color: var(--cockpit-text);
  font-size: 14px;
  font-weight: 520;
  text-align: right;
}
.demo-copy-drift {
  font-size: 12px;
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--cockpit-radius-sm);
  background: var(--cockpit-warning-bg);
  border: 1px solid var(--cockpit-warning-border);
  color: var(--cockpit-warning-text);
}
.demo-copy-drift.is-ok {
  background: var(--cockpit-surface);
  border-color: var(--cockpit-border);
  color: var(--cockpit-text-muted);
}
.demo-scenario-tag {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 520;
  background: var(--cockpit-bg);
  border: 1px solid var(--cockpit-border);
  border-radius: 999px;
  padding: 1px 8px;
}
@media (max-width: 560px) {
.demo-settings .demo-profile-grid { grid-template-columns: 1fr; }
}

/* ---- Year grid ---- */
.demo-cal-year {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--cockpit-border);
}
.demo-cal-year h3 { font-size:14px; margin-bottom:8px; }
.demo-cal-year-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 4px;
}
.demo-cal-year-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 520;
  color: var(--cockpit-text);
  transition: background 0.1s;
}
.demo-cal-year-cell:hover,.demo-cal-year-cell:focus-visible { background:var(--cockpit-hover-bg); }
.demo-cal-year-active { border-color:var(--cockpit-accent); background:var(--cockpit-accent-50); }
.demo-cal-year-has span {
  font-size: 10px;
  font-weight: 640;
  background: var(--cockpit-accent);
  color: var(--cockpit-accent-text);
  border-radius: 99px;
  padding: 1px 7px;
}
@media (max-width:500px) { .demo-cal-year-grid { grid-template-columns:repeat(3,1fr); } }
.demo-url-link {
  display: inline-block;
  color: var(--cockpit-accent);
  font-size: 18px;
  text-decoration: none;
  margin-inset-inline-start: 6px;
  transition: transform 0.12s;
}
.demo-url-link:hover{transform:scale(1.2)}

.demo-method-intro{color:var(--cockpit-text-muted);margin-bottom:20px}
.demo-method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 12px;
}
.demo-method-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px;
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--cockpit-text);
  transition: border-color 0.12s,box-shadow 0.12s;
}
.demo-method-card:hover,.demo-method-card:focus-visible{border-color:var(--cockpit-accent);box-shadow:var(--cockpit-shadow-sm)}
.demo-method-icon{font-size:28px}
.demo-method-card strong{font-size:15px;color:var(--cockpit-text)}
.demo-method-card p {
  font-size: 13px;
  color: var(--cockpit-text-muted);
  line-height: 1.4;
}

.demo-welcome{max-width:760px}
.demo-welcome-head{margin-bottom:22px}
.demo-welcome-head h2 {
  font-size: clamp(24px,3vw,32px);
  margin: 6px 0 10px;
  text-wrap: balance;
}
.demo-welcome-lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--cockpit-text-secondary);
  max-width: 60ch;
  margin: 0;
  text-wrap: pretty;
}
.demo-welcome-skip{margin-top:18px}
.demo-home-lede {
  font-size: 14px;
  line-height: 1.6;
  color: var(--cockpit-text-secondary);
  max-width: 70ch;
  margin: 2px 0 18px;
}
.demo-linkish {
  font: inherit;
  color: var(--cockpit-accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.demo-linkish:hover,.demo-linkish:focus-visible{color:var(--cockpit-link)}

.demo-sidebar-footer {
  padding: 8px 12px;
  border-top: 1px solid var(--cockpit-border);
  font-size: 10px;
  color: var(--cockpit-text-muted);
  line-height: 1.4;
  text-align: center;
}

.demo-prose {
  font-size: 14px;
  line-height: 1.7;
  max-width: 72ch;
}
.demo-prose h3{font-size:15px;margin:16px 0 6px}
.demo-prose p{margin:0 0 10px;color:var(--cockpit-text)}
.demo-prose a{color:var(--cockpit-accent)}

.demo-home-methods {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--cockpit-border);
}
.demo-home-methods h3{font-size:14px;margin-bottom:10px}

/* Boot veil: until the first real render, the command brief, dock, and title
   are placeholders — mute them so they read as loading, then fade in. */
.demo-command-brief,.demo-bottom-brief,.demo-screen-title{transition:opacity 0.25s ease}
.is-booting .demo-command-brief,.is-booting .demo-bottom-brief,.is-booting .demo-screen-title{opacity:0.45}
.is-booting .demo-command-actions .btn,.is-booting .demo-bottom-item{pointer-events:none}

/* Skeleton loading — shimmer placeholder during boot */
.demo-skeleton {
  display: none;
  gap: 16px;
  padding: 24px 32px;
}
.is-booting .demo-skeleton {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  padding: 0;
  position: absolute;
  inset: 0;
  z-index: 10;
  background: var(--cockpit-bg);
}
.is-booting .demo-skeleton .sk-sidebar {
  background: var(--cockpit-nav-bg);
  border-inline-end: 1px solid var(--cockpit-border);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.is-booting .demo-skeleton .sk-content {
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.sk-block {
  background: linear-gradient(90deg, var(--cockpit-border) 35%, var(--cockpit-bg) 50%, var(--cockpit-border) 65%);
  background-size: 200% 100%;
  border-radius: var(--cockpit-radius-sm);
  animation: shimmer 2s ease-in-out infinite;
}
.sk-block-sm { height: 32px; }
.sk-block-md { height: 48px; }
.sk-block-lg { height: 96px; }
.sk-block-full { flex: 1; min-height: 120px; }

.demo-home-receipts {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--cockpit-border);
}
.demo-home-receipts h3{font-size:14px;margin-bottom:10px}
.demo-receipt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap: 8px;
}
.demo-receipt-card {
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  background: var(--cockpit-surface);
  padding: 8px 10px;
}
.demo-receipt-card strong {
  display: block;
  font-size: 13px;
  margin-bottom: 3px;
}
.demo-receipt-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--cockpit-text-muted);
}
.demo-receipts-honesty {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--cockpit-text-muted);
}
.demo-receipts-honesty a{color:var(--cockpit-accent)}

/* Due-date urgency: overdue reads as danger, today/this-week as attention. */
time.demo-due-overdue{color:var(--cockpit-danger-text);font-weight:610}
time.demo-due-today{color:var(--cockpit-warning-text);font-weight:610}
time.demo-due-soon{color:var(--cockpit-warning-text)}

.demo-activity-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.demo-activity-entry {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--cockpit-border);
  position: relative;
}

.demo-activity-entry:last-child {
  border-bottom: none;
}

.demo-activity-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cockpit-accent);
  margin-top: 6px;
  position: relative;
  z-index: 1;
}

.demo-activity-entry:not(:last-child) .demo-activity-dot::after {
  content: "";
  position: absolute;
  top: 16px;
  inset-inline-start: 4px;
  width: 2px;
  height: calc(100% + 28px);
  background: var(--cockpit-border);
}

.demo-activity-body {
  min-width: 0;
}

.demo-activity-body p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--cockpit-text-secondary);
}

.demo-activity-time {
  color: var(--cockpit-text-muted);
  font-size: 11px;
  white-space: nowrap;
  margin-inset-inline-start: 6px;
}
.demo-note {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

/* First-run dashboard nudge: slim, dismissable, three inline steps. */
.demo-home-tour {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
  border: 1px solid var(--cockpit-accent);
  background: var(--cockpit-accent-50);
  border-radius: var(--cockpit-radius);
  padding: 8px 12px;
  margin-bottom: 14px;
}
.demo-home-tour-steps {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 1.4;
}
.demo-home-tour-step b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-inset-inline-end: 5px;
  border-radius: 50%;
  background: var(--cockpit-accent);
  color: var(--cockpit-accent-text);
  font-size: 11px;
  font-weight: 610;
}

.demo-toast-container {
  position: fixed;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
}
.demo-toast {
  background: var(--cockpit-text);
  color: var(--cockpit-bg);
  padding: 10px 14px;
  border-radius: var(--cockpit-radius);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  animation: toastIn 0.25s ease-out;
  cursor: pointer;
}
.demo-toast-error{background:#c0392b;color:#fff}
.demo-toast-success{background:var(--cockpit-accent);color:var(--cockpit-accent-text)}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
[dir="rtl"] .demo-nav-item:hover{transform:translateX(-2px)}
[dir="rtl"] .demo-landing-card.is-attention{box-shadow:inset -3px 0 0 var(--cockpit-warning-text,#c18642)}
.demo-toast-hiding{opacity:0;transition:opacity .3s}@media (prefers-reduced-motion:reduce){.demo-toast{animation:none}.demo-toast-hiding{transition:none}}
@media print{body{background:#fff!important;color:#000!important}.demo-sidebar,.demo-bottom-brief,.demo-command-bar,.demo-quick-actions,.demo-secondary-paths,.demo-home-bookmarklet,.demo-home-methods,.demo-sidebar-footer,.demo-toast-container,button,.btn,details summary,header,footer,nav{display:none!important}.demo-app-shell{grid-template-columns:1fr!important;max-width:100%!important}.demo-screen{padding:0!important;max-width:100%!important}.demo-page-content{padding:0!important}.demo-panel{border:none!important;box-shadow:none!important;padding:0!important;background:none!important}.demo-work-card,.demo-landing-card{border:1px solid #ccc!important;page-break-inside:avoid;margin-bottom:8px;padding:8px;background:none!important}.demo-card-facts{font-size:11px!important;color:#333!important}.demo-card-title{color:#000!important;font-size:14px!important;text-decoration:none!important}.demo-command-row,.demo-card-support,.demo-card-meta{font-size:11px!important;color:#000!important}.demo-command-brief,.demo-activity-panel summary,.demo-optional-fields summary{display:none!important}.demo-screen,.demo-panel{padding:0!important;max-width:100%!important}.demo-work-card,.demo-review-card{break-inside:avoid;border:1px solid #ccc!important;box-shadow:none!important}.demo-optional-fields,.demo-activity-panel,.demo-card-support[open]{display:block!important}.demo-optional-fields summary,.demo-activity-panel summary{display:none}}
.demo-field-error input,
.demo-field-error textarea,
.demo-field-error select {
  border-color: #c0392b;
}
.demo-optional-fields,.demo-activity-panel{margin-top:4px;border:1px solid var(--cockpit-border);border-radius:var(--cockpit-radius);padding:8px 12px;grid-column:1/-1}.demo-optional-fields summary,.demo-activity-panel summary{cursor:pointer;font-size:12px;font-weight:560;color:var(--cockpit-text-muted);padding:2px 0}.demo-optional-fields[open] summary,.demo-activity-panel[open] summary{margin-bottom:8px}.demo-optional-fields[open]{display:grid;gap:12px}.demo-optional-fields[open] summary{display:block;grid-column:1/-1}
.demo-optional-fields[open]>.demo-field-help{grid-column:1/ -1;margin-top:-4px}.demo-activity-panel{margin-top:12px}.demo-activity-panel .demo-list{margin-top:0}
.demo-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-inset-inline-start: auto;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: var(--cockpit-accent);
  border-radius: 99px;
  padding: 0 5px;
}

.demo-landing-card {
  background: var(--cockpit-surface);
  border: 1px solid transparent;
  border-radius: var(--cockpit-radius);
  box-shadow: var(--cockpit-shadow-sm);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.demo-landing-card:hover {
  transform: translateY(-1px);
}
.demo-landing-card:hover,.demo-landing-card:focus-within {
  border-color: var(--cockpit-border);
  box-shadow: var(--cockpit-shadow-md);
}
.demo-landing-card.is-attention { box-shadow:inset 3px 0 0 var(--cockpit-warning-text,#c18642); border-color:var(--cockpit-border) }
.demo-landing-card.is-done { opacity:0.6 }
.demo-landing-card .lp-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.demo-landing-card .lp-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--cockpit-text);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.demo-landing-card .lp-card-meta {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--cockpit-text-muted);
}
.demo-landing-card .lp-command {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.demo-landing-card .lp-command span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cockpit-text-muted);
}
.demo-landing-card .lp-command strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--cockpit-text);
}
.lp-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 730;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 99px;
  text-transform: uppercase;
}
.lp-pill-warn { background:var(--cockpit-warning-bg,#fef3e0); color:var(--cockpit-warning-text,#c18642) }
.lp-pill-accent { background:var(--cockpit-accent-50); color:var(--cockpit-accent) }
.lp-pill-muted { background:var(--cockpit-border); color:var(--cockpit-text-muted) }
.demo-work-landing {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.demo-nl-create {
  margin-bottom: 16px;
  padding: 16px;
  background: var(--cockpit-accent-50);
  border: 1px solid var(--cockpit-accent);
  border-radius: var(--cockpit-radius);
}
.demo-app-shell .demo-nl-field input {
  font-size: 15px;
}
.demo-context-measure {
  position: fixed;
  left: 0;
  top: 0;
  visibility: hidden;
}

.demo-context-menu {
  position: fixed;
  z-index: 300;
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  border-radius: var(--cockpit-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 160px;
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.demo-context-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--cockpit-text);
}
.demo-context-item:hover {
  background: var(--cockpit-hover-bg);
}
.demo-context-show {
  left: var(--ctx-x, 12px);
  top: var(--ctx-y, 12px);
}
.demo-gantt-chart {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  min-width: 0;
  padding-bottom: 20px;
}
.demo-gantt-today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #c0392b;
  z-index: 1;
  font-size: 10px;
  color: #c0392b;
  font-weight: 700;
  padding-top: 4px;
  text-align: center;
  left: var(--bar-left);
  transform: translateX(-50%);
}
.demo-gantt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--cockpit-border);
}
.demo-gantt-label {
  width: 180px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}
.demo-gantt-track {
  flex: 1;
  height: 24px;
  position: relative;
  background: var(--cockpit-border);
  border-radius: 3px;
  min-width: 60px;
  overflow: hidden;
}
.demo-gantt-bar {
  position: absolute;
  top: 2px;
  height: 20px;
  border-radius: 3px;
  transition: opacity 0.2s;
  left: var(--bar-left);
  width: var(--bar-width);
}
.demo-gantt-bar:hover {
  opacity: 1;
}

/* Touch tooltip fallback for title attributes on touch devices */
.demo-tip-measure {
  position: fixed;
  left: 0;
  top: 0;
  visibility: hidden;
  max-width: 240px;
}

.demo-touch-tip {
  position: fixed;
  z-index: 500;
  background: var(--cockpit-text);
  color: var(--cockpit-bg);
  font-size: 12px;
  font-weight: 560;
  line-height: 1.35;
  max-width: 240px;
  padding: 6px 10px;
  border-radius: var(--cockpit-radius-sm);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.demo-touch-tip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.demo-screen-title { view-transition-name: screen-title; }
.demo-command-brief { view-transition-name: command-brief; }
.demo-theme-radios { display: flex; gap: 2px; }
.demo-theme-radios label { cursor: pointer; padding: 4px 6px; font-size: 14px; line-height: 1; border-radius: 999px; border: 1px solid transparent; }
.demo-theme-radios label:hover { border-color: var(--cockpit-border); }
.demo-theme-radios input:checked + label { background: var(--cockpit-accent-50); border-color: var(--cockpit-accent); }
/* Donut completion chart */
.insight-donut {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}
.insight-donut::before {
  content: "";
  position: absolute;
  inset: 10px;
  background: var(--cockpit-surface);
  border-radius: 50%;
  z-index: 1;
}
.insight-donut-value {
  position: relative;
  z-index: 2;
  font-size: 20px;
  font-weight: 700;
  color: var(--cockpit-text);
}
@keyframes donut-fill {
  from { background: conic-gradient(var(--cockpit-accent) 0deg, var(--cockpit-border) 0deg); }
}
/* Sparkline bar animation */
@keyframes sparkbar {
  from { height: 0; }
}
.insight-sparkline {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 40px;
}
.insight-sparkline span {
  flex: 1;
  min-width: 4px;
  background: var(--cockpit-accent);
  border-radius: 2px 2px 0 0;
  animation: sparkbar 0.5s ease-out backwards;
}

/* Compare diff highlights */
.demo-compare-field.diff-changed{border-inline-start:3px solid var(--cockpit-warning-text);background:var(--cockpit-warning-bg);padding-inline-start:8px;border-radius:2px}.demo-compare-field.diff-same{border-inline-start:3px solid var(--cockpit-success-text);padding-inline-start:8px;border-radius:2px}

#scroll-progress{position:fixed;top:0;inset-inline-start:0;height:3px;width:0;background:var(--cockpit-accent);z-index:200;pointer-events:none;border-radius:0 2px 2px 0;transition:width .1s linear}.is-booting #scroll-progress{display:none}

mark.search-match{background:var(--cockpit-accent-50);color:var(--cockpit-accent);border-radius:2px;padding:0 1px;}

.demo-confetti{position:fixed;pointer-events:none;z-index:9999;animation:cf-fall .8s ease-in forwards;font-size:16px;user-select:none}
@keyframes cf-fall{0%{opacity:1;transform:translateY(0) rotate(0deg)}100%{opacity:0;transform:translateY(60px) rotate(180deg)}}

/* Type badge colors */
.demo-type-badge{display:inline-block;font-size:10px;font-weight:550;letter-spacing:0.02em;text-transform:uppercase;padding:1px 6px;border-radius:999px;vertical-align:middle;margin-inline-start:4px;background:var(--cockpit-accent-50);color:var(--cockpit-accent)}
.demo-work-card[demo-type]::before,.demo-landing-card[demo-type]::before{content:"";position:absolute;inset-block:8px;inset-inline-start:-1px;width:3px;border-radius:2px}
.demo-work-card[demo-type="music"]::before,.demo-landing-card[demo-type="music"]::before{background:#e91e63}
.demo-type-badge[data-type="music"]{background:#e91e6322;color:#e91e63}
.demo-work-card[demo-type="design"]::before,.demo-landing-card[demo-type="design"]::before{background:#9c27b0}
.demo-type-badge[data-type="design"]{background:#9c27b022;color:#9c27b0}
.demo-work-card[demo-type="developer"]::before,.demo-landing-card[demo-type="developer"]::before{background:#2196f3}
.demo-type-badge[data-type="developer"]{background:#2196f322;color:#2196f3}
.demo-work-card[demo-type="operations"]::before,.demo-landing-card[demo-type="operations"]::before{background:#4caf50}
.demo-type-badge[data-type="operations"]{background:#4caf5022;color:#4caf50}
.demo-work-card[demo-type="climate"]::before,.demo-landing-card[demo-type="climate"]::before{background:#009688}
.demo-type-badge[data-type="climate"]{background:#00968822;color:#009688}
.demo-work-card[demo-type="prompt"]::before,.demo-landing-card[demo-type="prompt"]::before{background:#ff9800}
.demo-type-badge[data-type="prompt"]{background:#ff980022;color:#ff9800}
.demo-work-card[demo-type="personal"]::before,.demo-landing-card[demo-type="personal"]::before{background:#795548}
.demo-type-badge[data-type="personal"]{background:#79554822;color:#795548}
.demo-work-card[demo-type="chain"]::before,.demo-landing-card[demo-type="chain"]::before{background:#607d8b}
.demo-type-badge[data-type="chain"]{background:#607d8b22;color:#607d8b}
.demo-work-card[demo-type="eval"]::before,.demo-landing-card[demo-type="eval"]::before{background:#f44336}
.demo-type-badge[data-type="eval"]{background:#f4433622;color:#f44336}
.demo-work-card[demo-type="lead"]::before,.demo-landing-card[demo-type="lead"]::before{background:#3f51b5}
.demo-type-badge[data-type="lead"]{background:#3f51b522;color:#3f51b5}
.demo-work-card[demo-type="planning"]::before,.demo-landing-card[demo-type="planning"]::before{background:#8bc34a}
.demo-type-badge[data-type="planning"]{background:#8bc34a22;color:#8bc34a}
.demo-work-card[demo-type="qa"]::before,.demo-landing-card[demo-type="qa"]::before{background:#00bcd4}
.demo-type-badge[data-type="qa"]{background:#00bcd422;color:#00bcd4}
.demo-work-card[demo-type="show"]::before,.demo-landing-card[demo-type="show"]::before{background:#ff5722}
.demo-type-badge[data-type="show"]{background:#ff572222;color:#ff5722}
.demo-work-card[demo-type="demo"]::before,.demo-landing-card[demo-type="demo"]::before{background:#9e9e9e}
.demo-type-badge[data-type="demo"]{background:#9e9e9e22;color:#9e9e9e}
.demo-work-card[demo-type="task"]::before,.demo-landing-card[demo-type="task"]::before{background:#673ab7}
.demo-type-badge[data-type="task"]{background:#673ab722;color:#673ab7}
.demo-shortcuts{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center}.demo-shortcuts[hidden]{display:none}.demo-shortcuts-inner{background:var(--cockpit-surface);border:1px solid var(--cockpit-border);border-radius:var(--cockpit-radius);box-shadow:var(--cockpit-shadow-md);padding:20px;max-width:420px;width:90vw;max-height:80vh;overflow-y:auto}.demo-shortcuts-inner h3{margin:0 0 8px;font-size:15px;font-weight:600}.demo-shortcuts-inner .sk-group{margin-bottom:12px}.demo-shortcuts-inner .sk-group:last-child{margin-bottom:0}.demo-shortcuts-inner kbd{display:inline-block;background:var(--cockpit-nav-bg);border:1px solid var(--cockpit-border);border-radius:4px;padding:1px 6px;font-family:monospace;font-size:12px;margin:2px}.demo-shortcuts-inner .sk-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:13px;border-bottom:1px solid var(--cockpit-border)}.demo-shortcuts-inner .sk-row:last-child{border-bottom:none}.demo-shortcuts-inner .sk-label{color:var(--cockpit-text-muted)}
.demo-gantt-label.clickable-gantt,.demo-gantt-bar.clickable-gantt{cursor:pointer}.demo-gantt-bar.clickable-gantt:hover{opacity:1!important}

.offline-indicator{display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:8px;background:#4ade80;transition:background .3s}.offline-indicator.is-offline{background:#f87171}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.demo-work-card,.demo-landing-card,.demo-table-row{animation:cardIn .2s ease-out both}.demo-work-card:nth-child(2),.demo-landing-card:nth-child(2),.demo-table-row:nth-child(2){animation-delay:.03s}.demo-work-card:nth-child(3),.demo-landing-card:nth-child(3),.demo-table-row:nth-child(3){animation-delay:.06s}.demo-work-card:nth-child(4),.demo-landing-card:nth-child(4),.demo-table-row:nth-child(4){animation-delay:.09s}.demo-work-card:nth-child(5),.demo-landing-card:nth-child(5),.demo-table-row:nth-child(5){animation-delay:.12s}.demo-work-card:nth-child(6),.demo-landing-card:nth-child(6),.demo-table-row:nth-child(6){animation-delay:.15s}.demo-work-card:nth-child(7),.demo-landing-card:nth-child(7),.demo-table-row:nth-child(7){animation-delay:.18s}.demo-work-card:nth-child(8),.demo-landing-card:nth-child(8),.demo-table-row:nth-child(8){animation-delay:.21s}.demo-work-card:nth-child(9),.demo-landing-card:nth-child(9),.demo-table-row:nth-child(9){animation-delay:.24s}.demo-work-card:nth-child(10),.demo-landing-card:nth-child(10),.demo-table-row:nth-child(10){animation-delay:.27s}.demo-work-card:nth-child(11),.demo-landing-card:nth-child(11),.demo-table-row:nth-child(11){animation-delay:.3s}.demo-work-card:nth-child(12),.demo-landing-card:nth-child(12),.demo-table-row:nth-child(12){animation-delay:.33s}.demo-work-card:nth-child(13),.demo-landing-card:nth-child(13),.demo-table-row:nth-child(13){animation-delay:.36s}.demo-work-card:nth-child(14),.demo-landing-card:nth-child(14),.demo-table-row:nth-child(14){animation-delay:.39s}.demo-work-card:nth-child(15),.demo-landing-card:nth-child(15),.demo-table-row:nth-child(15){animation-delay:.42s}.demo-work-card:nth-child(16),.demo-landing-card:nth-child(16),.demo-table-row:nth-child(16){animation-delay:.45s}.demo-work-card:nth-child(17),.demo-landing-card:nth-child(17),.demo-table-row:nth-child(17){animation-delay:.48s}.demo-work-card:nth-child(18),.demo-landing-card:nth-child(18),.demo-table-row:nth-child(18){animation-delay:.51s}.demo-work-card:nth-child(19),.demo-landing-card:nth-child(19),.demo-table-row:nth-child(19){animation-delay:.54s}.demo-work-card:nth-child(20),.demo-landing-card:nth-child(20),.demo-table-row:nth-child(20){animation-delay:.57s}

.demo-age{font-size:10px;color:var(--cockpit-text-muted);margin-inline-start:4px;white-space:nowrap}

@media(max-width:640px){.demo-card-support summary strong{display:none}}

.demo-batch-bar{position:sticky;bottom:0;z-index:50;background:var(--cockpit-accent);color:var(--cockpit-accent-text);padding:8px 12px;border-radius:var(--cockpit-radius) var(--cockpit-radius) 0 0;display:flex;align-items:center;gap:8px;margin-top:8px}.demo-batch-bar .demo-batch-count{font-size:13px;font-weight:560;margin-inline-end:auto}.demo-batch-bar .btn{color:var(--cockpit-accent-text);border-color:var(--cockpit-accent-text);background:transparent}.demo-batch-bar .btn:hover{background:rgba(255,255,255,0.15)}.demo-batch-check{display:none;position:absolute;top:6px;inset-inline-start:6px;width:18px;height:18px;border-radius:3px;border:2px solid var(--cockpit-border-strong);background:var(--cockpit-surface);cursor:pointer;z-index:2;align-items:center;justify-content:center}.demo-batch-check.is-checked{background:var(--cockpit-accent);border-color:var(--cockpit-accent)}.demo-batch-check.is-checked::after{content:"✓";color:var(--cockpit-accent-text);font-size:12px;font-weight:700}html.batch-mode .demo-work-card,html.batch-mode .demo-landing-card,html.batch-mode .demo-table-row{cursor:pointer}html.batch-mode .demo-batch-check{display:flex}html.batch-mode .demo-card-title,html.batch-mode .lp-card-title{padding-inline-start:26px}html.batch-mode .demo-work-list{gap:6px}html.batch-mode .demo-work-card,html.batch-mode .demo-landing-card{padding:8px 12px;animation:none}html.batch-mode .demo-work-card:hover,html.batch-mode .demo-landing-card:hover{transform:none}html.batch-mode .demo-work-card>:not(.demo-card-head):not(.demo-batch-check),html.batch-mode .demo-landing-card>:not(.lp-card-head):not(.demo-batch-check){display:none}
.demo-heatmap{display:grid;grid-template-columns:repeat(84,1fr);gap:2px;padding:8px 0;margin-bottom:8px;border-bottom:1px solid var(--cockpit-border)}.demo-heatmap-cell{aspect-ratio:1;border-radius:2px;min-width:4px}.demo-heat-label{font-size:10px;color:var(--cockpit-text-muted);margin-bottom:4px}.heat-lvl-0{background:var(--cockpit-surface)}.heat-lvl-1{background:hsla(160,60%,40%,0.15)}.heat-lvl-2{background:hsla(160,60%,40%,0.3)}.heat-lvl-3{background:hsla(160,60%,40%,0.5)}.heat-lvl-4{background:hsla(160,60%,40%,0.75)}
.demo-inline-edit{cursor:text;border-bottom:1px dashed var(--cockpit-accent)}.demo-inline-edit:focus{border-bottom-style:solid;outline:none;background:var(--cockpit-accent-50);border-radius:2px}
.demo-achievements{display:flex;gap:4px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid var(--cockpit-border);margin-top:auto}.demo-achievements .ach{font-size:16px;line-height:1;cursor:default;opacity:0.3;transition:opacity .3s}.demo-achievements .ach.is-unlocked{opacity:1}.demo-achievements .ach.is-new{animation:achPop .35s ease-out}@keyframes achPop{0%{transform:scale(0)}50%{transform:scale(1.3)}to{transform:scale(1)}}
html.focus-mode .demo-sidebar.nav-rail{display:none}html.focus-mode .demo-tab-bar{display:none}html.focus-mode .demo-app-shell{grid-template-columns:1fr}html.focus-mode .demo-header-inner{margin-left:0}html.focus-mode .demo-bottom-brief{display:none}html.focus-mode .demo-main{margin-left:0}html.focus-mode .demo-panel{background:transparent;border:none;box-shadow:none}html.focus-mode .demo-screen{padding:0;max-width:720px;margin:0 auto}html.focus-mode .demo-page-content{padding:0}html.focus-mode .demo-toast{display:none}html.focus-mode .demo-home-action-first,html.focus-mode .demo-home-action{display:none}
.demo-subtasks{margin-top:12px;border-top:1px solid var(--cockpit-border);padding-top:10px}.demo-subtasks summary{color:var(--cockpit-text-muted);font-size:11px;font-weight:610;letter-spacing:0;text-transform:uppercase;cursor:pointer}.demo-subtasks-inner{display:grid;gap:4px;margin-top:8px}.demo-subtask{display:flex;align-items:center;gap:8px;padding:4px 0}.demo-subtask input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--cockpit-accent)}.demo-subtask label{flex:1;font-size:13px;color:var(--cockpit-text);cursor:pointer}.demo-subtask.is-done label{text-decoration:line-through;color:var(--cockpit-text-muted)}.demo-subtask .btn{font-size:10px;padding:1px 6px}.demo-subtasks-inner .demo-subtask-add{display:flex;gap:6px;margin-top:6px}.demo-subtasks-inner .demo-subtask-add input{flex:1;font-size:13px;padding:4px 8px;border:1px solid var(--cockpit-border);border-radius:var(--cockpit-radius-sm);background:var(--cockpit-surface);color:var(--cockpit-text)}.demo-subtask-progress{height:4px;background:var(--cockpit-border);border-radius:2px;margin-top:6px;overflow:hidden}.demo-subtask-progress-fill{height:100%;background:var(--cockpit-accent);border-radius:2px;transition:width .3s}
.demo-subtask-remove{background:none;border:0;color:var(--cockpit-text-muted);font-size:15px;line-height:1;padding:2px 6px;cursor:pointer;border-radius:6px}.demo-subtask-remove:hover{color:var(--cockpit-danger-text);background:var(--cockpit-danger-bg)}.demo-subtask-add{display:flex;gap:8px;margin-top:8px}.demo-subtask-add .demo-search-input{flex:1;min-width:0}.demo-subtask-add .btn{flex-shrink:0}
.demo-sidebar-resizer{position:absolute;top:0;right:0;bottom:0;width:4px;cursor:col-resize;z-index:10;background:transparent;transition:background .15s}.demo-sidebar-resizer:hover,.demo-sidebar-resizer.is-dragging{background:var(--cockpit-accent)}.demo-sidebar-resizer.is-dragging{opacity:.6}
.demo-progress-slider{display:grid;gap:6px;background:var(--cockpit-surface);border:1px solid var(--cockpit-border-strong);border-radius:var(--cockpit-radius);padding:10px 12px;margin-top:8px}.demo-progress-slider span{font-size:11px;font-weight:560;color:var(--cockpit-text-muted);text-transform:uppercase;letter-spacing:.02em}.demo-progress-slider .demo-slider-row{display:flex;align-items:center;gap:8px}.demo-progress-slider input[type=range]{flex:1;height:4px;border-radius:2px;background:var(--cockpit-border);accent-color:var(--cockpit-accent);cursor:pointer}.demo-progress-slider span{font-size:12px;font-weight:560;min-width:32px;text-align:right;color:var(--cockpit-text-muted)}
/* Holiday themes */
html:has(#theme-holiday:checked){--cockpit-accent:#ec3b77;--cockpit-accent-hover:#c2185b;--cockpit-accent-text:#fff}html:has(#theme-winter:checked){--cockpit-accent:#3b82f6;--cockpit-accent-hover:#2563eb;--cockpit-accent-text:#fff}html:has(#theme-halloween:checked){--cockpit-accent:#ea580c;--cockpit-accent-hover:#c2410c;--cockpit-accent-text:#fff}
.demo-energy{display:flex;gap:6px;flex-wrap:wrap}.demo-extra-grid .demo-energy{flex-direction:column;gap:4px}.demo-energy-btn{font-size:12px;padding:2px 8px;border:1px solid transparent;background:none;cursor:pointer;opacity:.3;transition:opacity .15s;border-radius:999px;color:var(--cockpit-text-secondary)}.demo-energy-btn.is-active{opacity:1;background:var(--cockpit-selected-bg);border:1px solid var(--cockpit-accent);color:var(--cockpit-selected-fg)}
.demo-insight-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--cockpit-border)}.demo-insight-mini .stat{background:var(--cockpit-surface);border:1px solid var(--cockpit-border);border-radius:var(--cockpit-radius);padding:12px}.demo-insight-mini .stat strong{display:block;font-size:18px;font-weight:650;color:var(--cockpit-text)}.demo-insight-mini .stat small{font-size:11px;color:var(--cockpit-text-muted);text-transform:uppercase;letter-spacing:.02em}
.demo-age-detail{display:block;font-size:10px;color:var(--cockpit-text-muted);margin-top:1px}
.demo-mention{display:inline-block;background:var(--cockpit-accent-50);color:var(--cockpit-accent);border-radius:999px;padding:0 6px;font-weight:550;font-size:inherit;cursor:pointer;transition:background .15s}.demo-mention:hover{background:var(--cockpit-accent);color:var(--cockpit-accent-text)}
.demo-work-card.is-stale,.demo-landing-card.is-stale,.demo-table-row.is-stale{opacity:.6}.demo-work-card.is-stale:hover,.demo-landing-card.is-stale:hover,.demo-table-row.is-stale:hover{opacity:.85}.demo-work-card.is-stale .demo-card-facts,.demo-landing-card.is-stale .demo-card-facts,.demo-table-row.is-stale .demo-card-facts{opacity:.7}
.is-hidden{display:none!important}
@media(max-width:480px){.demo-panel{padding:10px}.demo-forward-fields{padding:12px}.demo-form-grid,.demo-optional-fields[open]{gap:8px}.demo-extra-grid{grid-template-columns:1fr}}.demo-panel>.demo-form-grid>.demo-field:not(.demo-state-preview):not(.demo-blocker-field),.demo-panel>.demo-inline-form>.demo-field:not(.demo-state-preview):not(.demo-blocker-field){padding:10px}.demo-panel-head{margin-bottom:8px;padding:10px}.demo-panel h2{font-size:18px}}
.demo-field-card label{display:block;font-size:11px;font-weight:560;color:var(--cockpit-text-muted);text-transform:uppercase;letter-spacing:.02em;margin-bottom:4px}
.demo-state-field{display:grid;gap:6px;background:var(--cockpit-surface);border:1px solid var(--cockpit-border-strong);border-radius:var(--cockpit-radius);padding:10px 12px;margin-top:8px}.demo-state-field span{font-size:11px;font-weight:560;color:var(--cockpit-text-muted);text-transform:uppercase;letter-spacing:.02em}
.demo-energy-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;font-size:12px;font-weight:550;border:1px solid var(--cockpit-border);border-radius:999px;cursor:pointer;color:var(--cockpit-text-muted);background:var(--cockpit-surface);transition:all .12s}.demo-energy-chip.is-active{background:var(--cockpit-accent);border-color:var(--cockpit-accent);color:var(--cockpit-accent-text)}.demo-energy-chip.is-active{background:var(--cockpit-accent);border-color:var(--cockpit-accent);color:var(--cockpit-accent-text)}
.demo-extra-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}.demo-extra-grid .demo-state-field{margin-top:0}
.demo-card-reactions{display:flex;gap:4px;margin-top:4px;padding-top:4px;border-top:1px solid var(--cockpit-border)}.demo-reaction{font-size:13px;padding:1px 6px;border:1px solid transparent;border-radius:999px;background:transparent;cursor:pointer;transition:all .12s;display:inline-flex;align-items:center;gap:2px;line-height:1.4}.demo-reaction:hover{background:var(--cockpit-hover-bg);border-color:var(--cockpit-border)}.demo-reaction.is-active{background:var(--cockpit-accent-50);border-color:var(--cockpit-accent)}.demo-reaction-count{font-size:11px;color:var(--cockpit-text-muted);font-weight:550}
.demo-compare-history{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.demo-compare-chip{font-size:12px;padding:3px 10px;white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis}.demo-compare-chip:hover{background:var(--cockpit-hover-bg)}.demo-search-page .demo-search-input{max-width:none;width:100%}
.demo-search-controls{display:grid;gap:10px;margin-top:12px}
.demo-search-filters{display:flex;flex-wrap:wrap;gap:10px}.demo-search-filters label{align-items:center;color:var(--cockpit-text-secondary);display:flex;font-size:12px;font-weight:560;gap:6px}.demo-search-filters select{background:var(--cockpit-surface);border:1px solid var(--cockpit-border);border-radius:var(--cockpit-radius-sm);color:var(--cockpit-text);font:inherit;font-size:12px;padding:4px 8px}
.demo-search-results{display:grid;gap:8px;margin-top:12px}
.demo-search-count{color:var(--cockpit-text-muted);font-size:12px;margin:0}
.demo-search-hit{background:var(--cockpit-surface);border:1px solid var(--cockpit-border);border-radius:var(--cockpit-radius);color:var(--cockpit-text);cursor:pointer;display:grid;gap:4px;padding:10px 12px;text-align:left}.demo-search-hit:hover{background:var(--cockpit-hover-bg);border-color:var(--cockpit-border-strong)}
.demo-search-hit-meta{color:var(--cockpit-text-muted);font-size:12px}
.demo-search-hit-snippet{color:var(--cockpit-text-secondary);font-size:12px;line-height:1.4;overflow-wrap:anywhere}.demo-search-hit-snippet em{color:var(--cockpit-text-muted);font-size:10px;font-style:normal;font-weight:620;letter-spacing:.02em;text-transform:uppercase}.demo-search-hit-snippet mark{background:var(--cockpit-selected-bg);border-radius:3px;color:var(--cockpit-selected-fg);padding:0 2px}
.demo-toolbar-modes{display:flex;flex-wrap:wrap;gap:8px}.demo-toolbar-modes .btn,.demo-toolbar-modes .demo-view-toggle{flex:1 1 auto;min-height:36px}
.demo-api-busy #screen-content{cursor:progress}.demo-api-busy .demo-work-card button,.demo-api-busy .demo-card-actions .btn{opacity:.65;pointer-events:none}
.demo-empty .demo-empty-action{justify-self:center;margin-top:4px;min-width:160px}
.demo-pin-flag{display:inline-block;font-size:12px;margin-inline-end:4px}
/* Two-column More options. A <details> can't grid its own fields (display:grid
   there only lays out the summary + ::details-content box), so the grid lives
   on ::details-content. Browsers without it fall back to the single column. */
@media (min-width:1025px){.demo-optional-fields[open]::details-content{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
@media (max-width:480px){.demo-form-col{gap:8px}}

/* SvelteKit shell vocabulary (shared with vanilla where noted); tokens only. */
.demo-summary-label{color:var(--cockpit-text-secondary);display:block;font-size:11px;font-weight:610;letter-spacing:0.02em;line-height:1.2;text-transform:uppercase}
.demo-error{background:var(--cockpit-danger-bg);border:1px solid var(--cockpit-danger-border);border-radius:var(--cockpit-radius);color:var(--cockpit-danger-text);font-size:13px;font-weight:560;margin:10px 0 0;padding:8px 12px}
.demo-warn{color:var(--cockpit-warning-text);font-size:12px;font-weight:610}
.demo-hint{color:var(--cockpit-text-secondary);font-size:12px;font-weight:450;line-height:1.4}
.demo-review-standup{background:var(--demo-card-inner-bg);border:1px solid var(--demo-card-inner-border);border-radius:var(--cockpit-radius);color:var(--cockpit-text);font-size:13px;line-height:1.45;margin-top:10px;max-width:72ch;padding:10px 12px;white-space:pre-line}
.demo-chip-sm{font-size:12px;padding:4px 10px}
/* Toasts are their own dismiss control (button element in the Svelte shell). */
button.demo-toast{border:0;font:inherit;font-size:13px;font-weight:600;text-align:start;width:100%}
/* Receipts/cards are scroll+focus targets after actions; the shell scrolls inside .demo-main. */
#command-receipt,.demo-command-receipt,.demo-work-card,.demo-review-card{scroll-margin-block:12px}
.demo-main{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){.demo-main{scroll-behavior:auto}}
/* Inline-edit values are <button>s in the Svelte pack editor — strip button chrome. */
button.demo-inline-edit{background:none;border:0;border-bottom:1px dashed var(--cockpit-accent);border-radius:0;color:var(--cockpit-text);cursor:text;font:inherit;padding:0;text-align:start}