:root {
  /* Modern Glassmorphism Variables */
  --workspace-bg: radial-gradient(circle at 50% -20%, #1e1b4b 0%, #0f172a 40%, #020617 100%);
  --workspace-panel-bg: rgba(15, 23, 42, 0.65);
  --workspace-panel-border: rgba(148, 163, 184, 0.1);
  --workspace-backdrop-blur: 24px;

  /* Accents */
  --workspace-accent: #818cf8;
  /* Indigo 400 */
  --workspace-accent-glow: rgba(129, 140, 248, 0.25);
  --workspace-primary: #6366f1;
  /* Indigo 500 */
  --workspace-success: #34d399;
  /* Emerald 400 */

  /* Text */
  --workspace-text: #f8fafc;
  --workspace-text-muted: #94a3b8;

  /* Shapes */
  --workspace-radius-lg: 24px;
  --workspace-radius-md: 16px;
  --workspace-radius-sm: 12px;

  /* Shadows */
  --workspace-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --workspace-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

/* W-02: paint html dark too so we don't get a white flash above the
   wizard card on cold loads (the body background only takes effect
   after the wizard JS finishes booting). */
html {
  background-color: #0f172a;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--workspace-bg);
  color: var(--workspace-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Center the wizard page shell within the content area, matching every other
   product page. `.wizard-page-shell` (the <main>) gets max-width:1600px from
   app-shell.css's wide-content block, but — unlike .execution-page /
   .habits-container, which carry their own `margin: 0 auto` — it has none, so
   the 1600px cap left-aligned it and the content read visibly off-centre at
   wide widths (extra empty space on the right). 2026-06-28. */
body .wizard-page-shell {
  margin-inline: auto;
}

/* Single Page Layout Container */
.wizard-workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 1400px;
  /* Wider layout to fill the page */
  margin: 0 auto;
  padding: 32px 24px;
  gap: 32px;
  width: 100%;
}

@media (max-width: 1400px) {
  .wizard-workspace {
    grid-template-columns: 260px minmax(0, 1fr) 260px;
    padding: 28px clamp(24px, 4vw, 40px) 36px;
  }
}

@media (max-width: 1200px) {
  .wizard-workspace {
    grid-template-columns: 280px minmax(0, 1fr);
    grid-auto-rows: auto;
  }

  .wizard-workspace__context {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1024px) {
  .wizard-workspace {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px clamp(16px, 6vw, 28px) 32px;
  }

  .wizard-workspace__stage,
  .wizard-workspace__rail,
  .wizard-workspace__context {
    grid-column: 1 / -1;
  }

  .wizard-workspace__stage {
    order: 0;
  }

  .wizard-workspace__rail {
    order: 1;
  }

  .wizard-workspace__context {
    order: 2;
  }
}

@media (max-width: 768px) {
  .wizard-workspace {
    gap: 18px;
    padding: 20px clamp(12px, 4vw, 20px) 28px;
  }

  .wizard-stage__header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Phone — keep wizard-workspace + its stage panel inside the viewport.
   The base layout assumes ≥1024px desktop columns; at 390px the inner
   stage body can still ask for max-content and force horizontal scroll
   if min-width: 0 isn't enforced on the grid track. */
@media (max-width: 480px) {
  .wizard-workspace {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    padding: 16px 12px 24px;
  }
  .wizard-workspace__stage,
  .wizard-workspace__rail,
  .wizard-workspace__context {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .wizard-stage__header,
  .wizard-stage__body,
  .wizard-stage__footer {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Wizard step-indicator chip rows often overflow — let them scroll
     horizontally rather than blow out the page width. */
  .wizard-stage__actions,
  .wizard-unified-progress,
  .wizard-header-top {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.wizard-workspace__rail {
  background: linear-gradient(165deg, rgba(17, 24, 39, 0.82) 0%, rgba(12, 18, 34, 0.92) 100%);
  border: 1px solid var(--workspace-border);
  border-radius: var(--workspace-radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--workspace-shadow-md);
  position: relative;
  overflow: hidden;
}

.wizard-workspace__rail::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(96, 165, 250, 0.08), rgba(139, 92, 246, 0.08));
  opacity: 0.8;
  pointer-events: none;
}

.wizard-workspace__rail-header {
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}

.wizard-workspace__title {
  font-size: 1.65rem;
  letter-spacing: -0.02em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.wizard-workspace__badge {
  background: rgba(96, 165, 250, 0.22);
  color: rgba(226, 232, 240, 0.9);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wizard-workspace__subtitle {
  color: var(--workspace-muted);
  font-size: 0.95rem;
  margin-top: 12px;
  line-height: 1.6;
}

.wizard-workspace__progress {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 1;
}

.wizard-step-pill {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-radius: var(--workspace-radius-md);
  border: 1px solid transparent;
  background: rgba(15, 23, 42, 0.55);
  color: var(--workspace-muted);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.wizard-step-pill__index {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(129, 140, 248, 0.45);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 0.85rem;
  color: rgba(226, 232, 240, 0.9);
}

.wizard-step-pill__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wizard-step-pill__title {
  font-weight: 600;
  color: rgba(241, 245, 249, 0.92);
}

.wizard-step-pill__meta {
  font-size: 0.8rem;
  color: rgba(203, 213, 225, 0.6);
}

.wizard-step-pill.active {
  background: linear-gradient(130deg, rgba(96, 165, 250, 0.25), rgba(139, 92, 246, 0.3));
  border-color: var(--workspace-border-strong);
  color: var(--workspace-text);
  transform: translateX(6px);
}

.wizard-step-pill.completed {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.14);
  color: rgba(226, 232, 240, 0.92);
}

.wizard-step-pill:hover {
  border-color: var(--workspace-border-strong);
  transform: translateX(3px);
}

.wizard-workspace__stage {
  background: rgba(13, 18, 33, 0.9);
  border-radius: var(--workspace-radius-lg);
  border: 1px solid rgba(76, 131, 255, 0.25);
  padding: 32px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--workspace-shadow-lg);
  position: relative;
  overflow: hidden;
}

.wizard-workspace__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 520px at 80% 15%, rgba(99, 102, 241, 0.12), transparent 55%);
  pointer-events: none;
}

.wizard-stage__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}

.wizard-stage__title {
  margin: 0;
  font-size: 1.8rem;
  letter-spacing: -0.03em;
}

.wizard-stage__description {
  color: var(--workspace-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin: 8px 0 0 0;
  max-width: 640px;
}

.wizard-stage__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.wizard-btn {
  /* QA r4 2026-07-17: a bare .wizard-btn (no --primary/--secondary/--ghost
     modifier) used to have transparent border + no background, so the
     Schedule toggle, "pre-fill from what it knows", and "Back to edit"
     buttons rendered as plain text and read as non-clickable. Give the base
     the secondary look so every .wizard-btn is visibly a button; modifiers
     still override. */
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: rgba(226, 232, 240, 0.85);
  border-radius: var(--workspace-radius-sm);
  padding: 10px 18px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.wizard-btn--primary {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.95), rgba(139, 92, 246, 0.95));
  color: white;
  box-shadow: 0 18px 35px rgba(99, 102, 241, 0.28);
}

.wizard-btn--secondary {
  background: rgba(148, 163, 184, 0.1);
  border-color: rgba(148, 163, 184, 0.2);
  color: rgba(226, 232, 240, 0.85);
}

.wizard-btn--ghost {
  background: transparent;
  color: rgba(226, 232, 240, 0.7);
  border-color: rgba(100, 116, 139, 0.2);
}

.wizard-btn:hover {
  transform: translateY(-1px);
  border-color: var(--workspace-border-strong);
}

.wizard-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.wizard-stage__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  overflow-y: auto;
  padding-right: 8px;
  max-height: calc(100vh - 220px);
}

/* The SPEC-WIZARD intake step is a long form, and the app-shell pane above
   turned it into a porthole: measured 2026-08-14 on icp-builder, 3.1k–4.5k px
   of content inside a 680px scroller (calc(100vh - 220px) at 900px) nested in
   a page that ALREADY scrolls, with ~1000px of empty page below the card. The
   cost lands at the worst moment — after Summarise, "Confirmed — go ahead"
   sat 707px below the pane's fold with no auto-scroll, so the click that
   spends a CEC credit was off-screen behind an inner scrollbar.
   `wizard-shell.css` already unsets exactly this for the shell page; the
   workspace — the surface every launcher link and chat deep-link opens —
   never got it. Scoped with :has() so the legacy step bodies keep the pane
   behaviour they were built for. */
.wizard-stage__body:has(.specwiz-doc),
.wizard-stage__body:has(.specwiz-field),
.wizard-stage__body:has(.specwiz-braindump) {
  max-height: none;
  overflow-y: visible;
}

/* §156d — the optional-attachment control was the only unthemed element in the
   intake: a bare <input type="file"> paints the UA's own light-grey "Choose
   File / No file chosen" button, which reads as a bright foreign rectangle on
   the dark card. Match the intake's chips (same metrics as `_styleChip` in
   requirements-step.js) and use color-mix over tokens so cozy re-tints it
   automatically instead of needing a second rule (frontend CLAUDE.md #16). */
.specwiz-attach-input {
  font: inherit;
  font-size: 0.82rem;
  color: var(--text-muted, #8a8a99);
  max-width: 100%;
}

.specwiz-attach-input::file-selector-button {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.28rem 0.7rem;
  margin-right: 0.6rem;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-primary, inherit);
  background: color-mix(in srgb, var(--accent-purple, #7c6cff) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-purple, #7c6cff) 35%, transparent);
}

.specwiz-attach-input::file-selector-button:hover {
  background: color-mix(in srgb, var(--accent-purple, #7c6cff) 20%, transparent);
}

.wizard-panel {
  background: rgba(15, 23, 42, 0.75);
  border-radius: var(--workspace-radius-md);
  border: 1px solid rgba(71, 85, 105, 0.35);
  padding: 24px 28px;
  box-shadow: var(--workspace-shadow-sm);
}

.wizard-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.wizard-panel__title {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.wizard-panel__meta {
  font-size: 0.85rem;
  color: rgba(203, 213, 225, 0.65);
}

.wizard-textarea {
  width: 100%;
  min-height: 220px;
  padding: 20px;
  border-radius: var(--workspace-radius-sm);
  border: 1px solid rgba(94, 234, 212, 0.18);
  background: rgba(8, 12, 26, 0.82);
  color: var(--workspace-text);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.wizard-textarea[data-example="true"] {
  color: var(--workspace-example-color);
}

.wizard-textarea[data-example="true"]:focus {
  color: var(--workspace-text);
}

.wizard-textarea:focus {
  border-color: var(--workspace-border-strong);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.3);
}

.wizard-suggestion-list {
  display: grid;
  gap: 12px;
}

.wizard-suggestion-guide {
  margin-bottom: 12px;
  padding: 14px 18px;
  border-radius: var(--workspace-radius-sm);
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(30, 41, 59, 0.6);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
  line-height: 1.45;
}

.wizard-suggestion-item {
  color: #fff;
  border-radius: var(--workspace-radius-sm);
  border: 1px solid transparent;
  padding: 18px 20px;
  position: relative;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}

.wizard-suggestion-item:hover {
  transform: translateY(-2px);
  border-color: rgba(226, 232, 240, 0.55);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.28);
}

.wizard-suggestion-item--variant-1 {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.55), rgba(37, 99, 235, 0.75));
  border-color: rgba(147, 197, 253, 0.45);
}

.wizard-suggestion-item--variant-2 {
  background: linear-gradient(135deg, rgba(255, 99, 132, 0.55), rgba(240, 113, 67, 0.75));
  border-color: rgba(254, 178, 216, 0.45);
}

.wizard-suggestion-item--variant-3 {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.55), rgba(45, 212, 191, 0.75));
  border-color: rgba(134, 239, 172, 0.45);
}

.wizard-suggestion-item__badge {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.wizard-suggestion-item__body p {
  margin: 0 0 6px;
  color: rgba(255, 255, 255, 0.88);
}

.wizard-suggestion-item__body p:last-child {
  margin-bottom: 0;
}

.wizard-suggestion-item__body ul {
  margin: 6px 0 0 20px;
  padding: 0;
  color: rgba(255, 255, 255, 0.86);
}

.wizard-suggestion-item__body li {
  margin-bottom: 4px;
}

.wizard-suggestion-item__body li:last-child {
  margin-bottom: 0;
}

.wizard-plan {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wizard-plan__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wizard-plan__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.wizard-plan-goal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.wizard-plan-goal__due {
  font-size: 0.85rem;
  color: rgba(226, 232, 240, 0.75);
}

.wizard-plan-milestones {
  margin: 16px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wizard-plan-milestone__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.wizard-plan-milestone__meta {
  display: flex;
  gap: 8px;
  font-size: 0.85rem;
  color: rgba(148, 163, 184, 0.85);
}

.wizard-plan-tasks {
  margin: 12px 0 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wizard-plan-task {
  padding: 10px 12px;
  border-radius: var(--workspace-radius-sm);
  background: rgba(14, 21, 40, 0.7);
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.wizard-plan-task__title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.95);
}

.wizard-plan-task__title small {
  font-weight: 500;
  color: rgba(226, 232, 240, 0.7);
}

.wizard-plan-task__meta {
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: rgba(148, 163, 184, 0.9);
}

.wizard-v2-grid--events {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(280px, 1.25fr);
  gap: 16px;
}

.wizard-plan-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wizard-plan-preview__goal {
  padding: 12px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.wizard-plan-preview__milestone {
  padding: 10px;
  border-radius: 8px;
  border: 1px dashed rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.2);
  margin-top: 8px;
}

.wizard-plan-preview__tasks {
  list-style: disc;
  padding-left: 18px;
  margin: 8px 0 0;
  color: rgba(226, 232, 240, 0.88);
}

.wizard-plan-editor__goal {
  margin-top: 16px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.wizard-plan-editor__goal-body,
.wizard-plan-editor__milestones,
.wizard-plan-editor__tasks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wizard-plan-editor__milestone {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 12px;
  background: rgba(15, 23, 42, 0.25);
}

.wizard-plan-editor__task {
  border: 1px dashed rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  padding: 10px;
  background: rgba(15, 23, 42, 0.15);
}

.wizard-plan-editor__ms-header,
.wizard-plan-editor__task-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.wizard-plan-editor__ms-header h5,
.wizard-plan-editor__task-header h6 {
  margin: 0;
}

.wizard-plan-editor__actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.wizard-btn--icon {
  min-width: 28px;
  height: 28px;
  padding: 2px 6px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: transparent;
  color: rgba(148, 163, 184, 0.8);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wizard-btn--icon:hover {
  background: rgba(148, 163, 184, 0.15);
  color: #e2e8f0;
}

.wizard-btn--danger:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.4);
}

.wizard-btn--add {
  width: 100%;
  padding: 8px 16px;
  margin-top: 8px;
  font-size: 13px;
  text-align: center;
  border-style: dashed;
}

.wizard-plan-editor__step-fields {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 12px;
}

.wizard-plan-editor__milestone-meta,
.wizard-plan-editor__task-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.wizard-event-task-cell {
  background: rgba(11, 16, 30, 0.9);
  padding: 12px 18px;
}

.wizard-event-tasks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wizard-event-tasks__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.wizard-event-task {
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  padding: 12px;
  background: rgba(15, 23, 42, 0.35);
}

.wizard-event-task__fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.wizard-event-task__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.wizard-event-tasks__header h4 {
  margin: 0;
}

.wizard-clarification-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.wizard-clarification {
  background: rgba(76, 131, 255, 0.14);
  border-radius: var(--workspace-radius-md);
  border: 1px solid rgba(76, 131, 255, 0.3);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wizard-clarification__question {
  font-weight: 600;
  color: rgba(226, 232, 240, 0.95);
}

.wizard-clarification__meta {
  font-size: 0.82rem;
  color: rgba(148, 163, 184, 0.85);
  margin: 4px 0 8px;
}

.wizard-option-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wizard-option-chip {
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: rgba(226, 232, 240, 0.88);
  padding: 6px 14px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease;
  text-align: left;
  min-width: 120px;
}

.wizard-option-chip:hover,
.wizard-option-chip.active {
  border-color: rgba(96, 165, 250, 0.5);
  transform: translateY(-1px);
}

.wizard-option-chip.is-selected {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.55);
  color: rgba(240, 253, 244, 0.95);
}

.wizard-option-chip__label {
  display: block;
  font-weight: 600;
}

.wizard-option-chip__example {
  display: block;
  font-size: 0.78rem;
  color: rgba(148, 163, 184, 0.9);
}

.wizard-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: var(--workspace-radius-md);
  border: 1px solid rgba(71, 85, 105, 0.35);
  background: rgba(10, 15, 26, 0.9);
}

.wizard-table th,
.wizard-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(71, 85, 105, 0.25);
  text-align: left;
  font-size: 0.95rem;
}

.wizard-table th {
  background: rgba(15, 23, 42, 0.65);
  font-weight: 600;
  color: rgba(226, 232, 240, 0.8);
}

.wizard-table td input,
.wizard-table td textarea,
.wizard-table td select {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(100, 116, 139, 0.35);
  background: rgba(8, 12, 24, 0.85);
  color: inherit;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.95rem;
}

.wizard-workspace__context {
  background: rgba(15, 23, 42, 0.65);
  border-radius: var(--workspace-radius-lg);
  border: 1px solid rgba(71, 85, 105, 0.35);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: var(--workspace-shadow-sm);
}

.wizard-context-card {
  background: rgba(7, 11, 22, 0.8);
  border-radius: var(--workspace-radius-md);
  border: 1px solid rgba(71, 85, 105, 0.3);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wizard-context-card__title {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(148, 163, 184, 0.7);
}

.wizard-autosave {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: rgba(226, 232, 240, 0.65);
}

/* Breadcrumb color lives HERE, not inline in wizard-workspace.js — an inline
   color can only be beaten by !important, which broke cozy mode (review
   2026-08-14 F3: 1.83:1 on cozy paper). Standard keeps the original blue;
   the cozy override sits with the other cozy rules at the end of the file. */
.wizard-breadcrumb {
  color: rgba(79, 172, 254, 0.8);
}

.wizard-confidence {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
}

.wizard-confidence[data-state="low"] {
  color: rgba(248, 180, 127, 0.9);
}

.wizard-confidence[data-state="ok"] {
  color: rgba(134, 239, 172, 0.9);
}

.wizard-toast {
  position: fixed;
  bottom: 28px;
  right: 32px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(74, 222, 128, 0.35);
  color: rgba(226, 232, 240, 0.95);
  padding: 16px 22px;
  border-radius: var(--workspace-radius-sm);
  box-shadow: var(--workspace-shadow-md);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 999;
}

.wizard-toast[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}

.wizard-stage__footer {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  position: sticky;
  bottom: 0;
  background: linear-gradient(0deg, rgba(13, 18, 33, 0.96) 0%, rgba(13, 18, 33, 0.45) 90%, transparent 100%);
}

.wizard-stage__footer button {
  min-width: 140px;
}

.wizard-shortcut-hint {
  font-size: 0.8rem;
  color: rgba(148, 163, 184, 0.6);
}

.wizard-voice-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: rgba(226, 232, 240, 0.88);
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease;
}

.wizard-voice-chip[data-active="true"] {
  border-color: rgba(16, 185, 129, 0.55);
  background: rgba(16, 185, 129, 0.22);
}

.wizard-voice-chip:hover {
  transform: translateY(-1px);
}

.wizard-review-diff {
  background: rgba(12, 18, 34, 0.85);
  border-radius: var(--workspace-radius-md);
  border: 1px solid rgba(71, 85, 105, 0.4);
  overflow: hidden;
}

.wizard-review-diff__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid rgba(71, 85, 105, 0.2);
}

.wizard-review-diff__cell {
  padding: 20px 24px;
}

.wizard-review-diff__cell h4 {
  margin: 0 0 10px 0;
  font-size: 0.95rem;
  color: rgba(226, 232, 240, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.wizard-review-diff__content {
  background: rgba(8, 11, 22, 0.85);
  border-radius: var(--workspace-radius-sm);
  border: 1px solid rgba(148, 163, 184, 0.15);
  padding: 16px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(226, 232, 240, 0.85);
}

.wizard-final-checklist {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wizard-final-checklist li {
  display: flex;
  gap: 12px;
  align-items: center;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: var(--workspace-radius-sm);
  padding: 12px 16px;
  color: rgba(226, 232, 240, 0.88);
}

.wizard-empty-state {
  border-radius: var(--workspace-radius-md);
  border: 1px dashed rgba(148, 163, 184, 0.4);
  padding: 26px;
  text-align: center;
  color: rgba(148, 163, 184, 0.75);
  font-size: 0.95rem;
}

.wizard-token-stream {
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95rem;
  line-height: 1.6;
  background: rgba(8, 11, 24, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: var(--workspace-radius-sm);
  padding: 18px;
  overflow: auto;
  max-height: 320px;
}

.wizard-v2-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wizard-v2-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px;
}

.wizard-v2-header h3 {
  margin: 0;
  font-size: 20px;
}

.wizard-v2-header p {
  margin: 4px 0 0;
  color: rgba(148, 163, 184, 0.8);
}

.wizard-v2-actions {
  display: flex;
  gap: 8px;
}

.wizard-v2-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.wizard-v2-grid--interview {
  /* Always single column for unified layout */
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.wizard-v2-grid--interview.wizard-v2-grid--single {
  /* Already single column */
}

.wizard-v2-card {
  background: rgba(15, 23, 42, 0.95);
  border-radius: var(--workspace-radius-lg);
  padding: 20px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 24px 60px rgba(8, 14, 35, 0.35);
}

/* ─── Phase 4 launcher home — shown when no ?wizard= param is set. ─── */
.wizard-launcher-home { padding: 32px 0; }
.wizard-launcher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.wizard-launcher-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px; border-radius: 14px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: inherit; text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.wizard-launcher-card:hover {
  transform: translateY(-2px);
  border-color: rgba(96, 165, 250, 0.45);
  box-shadow: 0 12px 30px rgba(8, 14, 35, 0.45);
}
.wizard-launcher-card__title { font-size: 16px; font-weight: 600; margin: 0; line-height: 1.3; }
.wizard-launcher-card__badge {
  align-self: flex-start; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.10em;
  padding: 3px 8px; border-radius: 99px;
  background: rgba(96, 165, 250, 0.14);
  color: rgb(125, 191, 250);
  border: 1px solid rgba(96, 165, 250, 0.30);
}
.wizard-launcher-card__summary {
  font-size: 13px; color: rgba(248, 250, 252, 0.72);
  margin: 0; line-height: 1.5;
}
[data-ux-mode="cozy"] .wizard-launcher-card {
  background: var(--cozy-paper-elevated, #FFFBF2);
  border: var(--cozy-border-hairline, 1px solid rgba(166, 130, 85, 0.20));
  color: var(--cozy-ink, #1A2438);
}
[data-ux-mode="cozy"] .wizard-launcher-card:hover {
  border-color: var(--cozy-rose, #A8475F);
  box-shadow: 0 6px 18px var(--cozy-warm-shadow, rgba(90, 60, 30, 0.10));
}
[data-ux-mode="cozy"] .wizard-launcher-card__summary { color: var(--cozy-ink-muted, #5A5540); }

.wizard-v2-card--suggestions {
  grid-column: 1 / -1;
}

.wizard-v2-card--sidebar {
  min-height: 320px;
}

.wizard-v2-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wizard-textarea--v2 {
  min-height: 420px;
  border-radius: 16px;
  resize: vertical;
  background: rgba(2, 6, 23, 0.6);
}

.wizard-v2-helper {
  margin-top: 8px;
  font-size: 0.85rem;
  color: rgba(148, 163, 184, 0.75);
}

.wizard-v2-card--suggestions .wizard-suggestion-list {
  margin-top: 8px;
}

.wizard-v2-card--table .wizard-table {
  margin: 0;
}

.wizard-v2-card--table .wizard-table-wrapper {
  max-height: 520px;
  overflow: auto;
}





@media (max-width: 1024px) {
  .wizard-unified-stage {
    padding: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.wizard-diagnostics {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 4000;
}

.wizard-diagnostics--visible {
  opacity: 1;
  pointer-events: auto;
}

.wizard-diagnostics__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
}

.wizard-diagnostics__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(960px, 90vw);
  max-height: 80vh;
  overflow-y: auto;
  background: rgba(7, 11, 26, 0.98);
  border-radius: 18px;
  border: 1px solid rgba(100, 116, 139, 0.4);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.65);
  color: rgba(226, 232, 240, 0.95);
  padding: 24px;
}

.wizard-diagnostics__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.wizard-diagnostics__header h3 {
  margin: 0;
}

.wizard-diagnostics__section {
  margin-top: 18px;
}

.wizard-diagnostics__section pre {
  background: rgba(2, 6, 23, 0.8);
  border-radius: 12px;
  padding: 12px;
  font-size: 0.85rem;
  overflow-x: auto;
  border: 1px solid rgba(100, 116, 139, 0.35);
}

/* Unified Header Styles */
.wizard-unified-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--workspace-panel-bg);
  border: 1px solid var(--workspace-panel-border);
  border-radius: var(--workspace-radius-lg);
  padding: 24px 32px;
  backdrop-filter: blur(var(--workspace-backdrop-blur));
  box-shadow: var(--workspace-shadow-md);
}

.wizard-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.wizard-header-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.wizard-header-context {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.9rem;
  color: var(--workspace-text-muted);
}

.wizard-unified-progress {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  /* for scrollbar */
}

.wizard-unified-progress .wizard-step-pill {
  flex: 0 0 auto;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.wizard-unified-progress .wizard-step-pill.active {
  background: var(--workspace-accent-glow);
  border-color: var(--workspace-accent);
}

/* Unified Stage Styles */
.wizard-unified-stage {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: var(--workspace-panel-bg);
  border: 1px solid var(--workspace-panel-border);
  border-radius: var(--workspace-radius-lg);
  padding: 32px;
  backdrop-filter: blur(var(--workspace-backdrop-blur));
  box-shadow: var(--workspace-shadow-lg);
  flex: 1;
  min-height: 500px;
}

.wizard-stage__content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.wizard-unified-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.wizard-stage__footer {
  border-top: 1px solid var(--workspace-panel-border);
  padding-top: 24px;
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wizard-footer__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wizard-footer__confidence {
  font-size: 0.85rem;
  color: rgba(226, 232, 240, 0.7);
}

.wizard-stage__nav {
  display: flex;
  gap: 16px;
}

/* Clarification Formatting */
.wizard-clarification-container {
  margin-top: 24px;
  padding: 24px;
  background: rgba(129, 140, 248, 0.05);
  border: 1px solid rgba(129, 140, 248, 0.15);
  border-radius: var(--workspace-radius-md);
}

.wizard-analysis-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

/* ─── Phase 5 launcher home — redesign matching mockup §17 ─────────────────── */

/* Featured wizard grid count microcopy — em-dash placeholder while
   /api/v1/wizard/sessions is in flight; then "N of yours" / "N 个". */
.wf-count {
  font-size: 11px;
  color: rgba(148, 163, 184, 0.85);
  letter-spacing: 0.02em;
}
[data-ux-mode="cozy"] .wf-count { color: var(--cozy-ink-muted, #5A5540); }

/* Filter pill row — slightly larger, more breathing room than the
   default app-shell .filter-pill (which is sized for timeline). */
.wiz-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 24px;
}
.wiz-filter-row .filter-pill {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 99px;
}
.wiz-filter-row .filter-pill.active {
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.28);
}

/* Category section */
.wiz-cat-section {
  margin-bottom: 32px;
}
.wiz-cat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  padding-bottom: 10px;
}
.wiz-cat-label {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--workspace-text, #f8fafc);
}
.wiz-cat-count {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--workspace-text-muted, #94a3b8);
  white-space: nowrap;
}

/* Template card grid */
.wiz-tmpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

/* Template card */
.wiz-tmpl-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: var(--workspace-text, #f8fafc);
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.wiz-tmpl-card:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 172, 254, 0.40);
  box-shadow: 0 10px 28px rgba(8, 14, 35, 0.40);
}
.wiz-tmpl-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.wiz-tmpl-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  flex: 1;
}
.wiz-duration-chip {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 99px;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: rgba(203, 213, 225, 0.85);
  white-space: nowrap;
}
.wiz-tmpl-desc {
  font-size: 12px;
  color: var(--workspace-text-muted, #94a3b8);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}
.wiz-tmpl-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.wiz-tmpl-label {
  font-size: 11px;
  color: rgba(148, 163, 184, 0.65);
  font-weight: 500;
}
.wiz-tmpl-cta {
  font-size: 12px;
  font-weight: 600;
  color: rgba(79, 172, 254, 0.90);
}
.wiz-tmpl-card:hover .wiz-tmpl-cta {
  color: rgba(79, 172, 254, 1);
}

/* Recent runs panel */
.wiz-runs-panel {
  margin-top: 18px;
  padding: 22px 24px;
  border-radius: 14px;
  background: rgba(13, 19, 35, 0.70);
  border: 1px solid rgba(148, 163, 184, 0.14);
}
.wiz-runs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.wiz-runs-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.wiz-runs-title-ico {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  color: rgba(129, 140, 248, 0.85);
}
.wiz-runs-title-ico > svg { width: 18px; height: 18px; }
.wiz-runs-empty {
  font-size: 13px;
  color: var(--workspace-text-muted, #94a3b8);
  margin: 0;
  padding: 8px 0;
}
[data-ux-mode="cozy"] .wiz-runs-title-ico { color: var(--cozy-rose, #A8475F); }

/* Cozy theme overrides */
[data-ux-mode="cozy"] .wiz-tmpl-card {
  background: var(--cozy-paper-elevated, #FFFBF2);
  border: var(--cozy-border-hairline, 1px solid rgba(166, 130, 85, 0.20));
  color: var(--cozy-ink, #1A2438);
}
[data-ux-mode="cozy"] .wiz-tmpl-card:hover {
  border-color: var(--cozy-rose, #A8475F);
  box-shadow: 0 6px 18px rgba(90, 60, 30, 0.10);
}
[data-ux-mode="cozy"] .wiz-tmpl-title { color: var(--cozy-ink, #1A2438); }
[data-ux-mode="cozy"] .wiz-tmpl-desc { color: var(--cozy-ink-muted, #5A5540); }
[data-ux-mode="cozy"] .wiz-tmpl-label { color: var(--cozy-ink-muted, #5A5540); }
[data-ux-mode="cozy"] .wiz-tmpl-cta { color: var(--cozy-rose, #A8475F); }
[data-ux-mode="cozy"] .wiz-tmpl-card:hover .wiz-tmpl-cta { color: var(--cozy-rose-dark, #8F3A4F); }
[data-ux-mode="cozy"] .wiz-duration-chip {
  /* dark-on-dark in cozy = invisible. Warm gold tint + ink. */
  background: rgba(182, 151, 99, 0.18);
  border-color: rgba(182, 151, 99, 0.40);
  color: #6b5424;
}
[data-ux-mode="cozy"] .wiz-runs-panel {
  background: var(--cozy-paper-elevated, #FFFBF2);
  border-color: rgba(166, 130, 85, 0.20);
}
[data-ux-mode="cozy"] .wiz-runs-title { color: var(--cozy-ink, #1A2438); }
[data-ux-mode="cozy"] .wiz-runs-empty { color: var(--cozy-ink-muted, #5A5540); }
[data-ux-mode="cozy"] .wiz-cat-label { color: var(--cozy-ink, #1A2438); }
[data-ux-mode="cozy"] .wiz-cat-count { color: var(--cozy-ink-muted, #5A5540); }
[data-ux-mode="cozy"] .wiz-cat-head { border-bottom-color: rgba(166, 130, 85, 0.22); }

/* ── Launcher search results (2026-08-02) ─────────────────────────────────
   Shown when the AppShell topbar query is claimed by this page. Reuses
   .wiz-cat-label / .wiz-tmpl-grid so result cards are identical to browse
   cards; only the header row differs (query + a way back to browsing). */
.wiz-search-panel { margin-bottom: 26px; }
.wiz-search-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  /* The heading carries the user's query, so it can be arbitrarily long. On a
     narrow viewport it wrapped to two lines and pushed "Clear search" flush
     against the right edge, reading as clipped (measured at 390px). Wrapping
     drops the button to its own line instead. */
  flex-wrap: wrap;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  padding-bottom: 10px;
}
.wiz-search-head .wiz-cat-label { min-width: 0; overflow-wrap: anywhere; }
.wiz-search-clear {
  background: none;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--workspace-accent, #8b9bff);
}
.wiz-search-clear:hover { text-decoration: underline; }
.wiz-search-clear:focus-visible { outline: 2px solid var(--workspace-accent, #8b9bff); outline-offset: 2px; }
[data-ux-mode="cozy"] .wiz-search-head { border-bottom-color: rgba(166, 130, 85, 0.22); }
[data-ux-mode="cozy"] .wiz-search-clear { color: var(--cozy-rose, #A8475F); }

/* Wizard filter row pills — sit on cream paper. The default
 * .wiz-filter-row .filter-pill uses cyan glass; we re-skin to warm
 * paper for inactive + cozy rose for active so the row matches the
 * filter pills used elsewhere in the cozy theme. */
[data-ux-mode="cozy"] .wiz-filter-row .filter-pill {
  background: var(--cozy-paper-elevated, #FFFBF2);
  border: 1px solid rgba(166, 130, 85, 0.30);
  color: var(--cozy-ink-muted, #5A5540);
  box-shadow: none;
}
[data-ux-mode="cozy"] .wiz-filter-row .filter-pill:hover {
  color: var(--cozy-ink, #1A2438);
  border-color: rgba(168, 71, 95, 0.45);
}
[data-ux-mode="cozy"] .wiz-filter-row .filter-pill.active {
  background: var(--cozy-rose, #A8475F);
  border-color: var(--cozy-rose-dark, #8F3A4F);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(168, 71, 95, 0.28);
}

/* Favourite-wizard star (replaces the old duration chip) */
.wiz-fav-star {
  border: none; background: none; cursor: pointer; font-size: 1.05rem;
  line-height: 1; color: var(--text-muted); padding: 2px 4px;
}
.wiz-fav-star.is-fav { color: var(--accent-gold, #e6b800); }
.wiz-fav-star--corner { position: absolute; top: 8px; right: 10px; z-index: 2; }
.wizard-feature { position: relative; }

/* QA R5 residual: the favourite star used to live INSIDE the <a class="wiz-tmpl-card">
   (a <button> nested inside a link — invalid nested-interactive markup). It is now a
   SIBLING of the card, overlaid via .wiz-fav-star--corner; this wrapper supplies the
   containing block + keeps the anchor filling the same grid-cell footprint it had
   before the wrap (grid items stretch to their cell by default; the wrapper inherits
   that, and the 100%/100% below makes the anchor fill the wrapper in turn). */
.wiz-tmpl-card-wrap { position: relative; }
.wiz-tmpl-card-wrap > .wiz-tmpl-card { width: 100%; height: 100%; box-sizing: border-box; }

/* Wizard filter row pills — sit on cream paper. The default
 * .wiz-filter-row .filter-pill uses cyan glass; we re-skin to warm
 * paper for inactive + cozy rose for active so the row matches the
 * filter pills used elsewhere in the cozy theme. */
[data-ux-mode="cozy"] .wiz-filter-row .filter-pill {
  background: var(--cozy-paper-elevated, #FFFBF2);
  border: 1px solid rgba(166, 130, 85, 0.30);
  color: var(--cozy-ink-muted, #5A5540);
  box-shadow: none;
}
[data-ux-mode="cozy"] .wiz-filter-row .filter-pill:hover {
  color: var(--cozy-ink, #1A2438);
  border-color: rgba(168, 71, 95, 0.45);
}
[data-ux-mode="cozy"] .wiz-filter-row .filter-pill.active {
  background: var(--cozy-rose, #A8475F);
  border-color: var(--cozy-rose-dark, #8F3A4F);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(168, 71, 95, 0.28);
}

/* Favourite-wizard star (replaces the old duration chip) */
.wiz-fav-star {
  border: none; background: none; cursor: pointer; font-size: 1.05rem;
  line-height: 1; color: var(--text-muted); padding: 2px 4px;
}
.wiz-fav-star.is-fav { color: var(--accent-gold, #e6b800); }
.wiz-fav-star--corner { position: absolute; top: 8px; right: 10px; z-index: 2; }
.wizard-feature { position: relative; }

/* QA R5 residual: the favourite star used to live INSIDE the <a class="wiz-tmpl-card">
   (a <button> nested inside a link — invalid nested-interactive markup). It is now a
   SIBLING of the card, overlaid via .wiz-fav-star--corner. */
.wiz-tmpl-card-wrap { position: relative; }
.wiz-tmpl-card-wrap > .wiz-tmpl-card { width: 100%; height: 100%; box-sizing: border-box; }
/* ---- Cozy: wizard-workspace header chrome (review 2026-08-14 F1–F3) ----
   The header status chrome was authored for the dark body only — on cozy
   paper (#FFFBF2) "Autosave ready" measured 1.12:1, the "Ready" confidence
   badge 2.48:1, and the breadcrumb 1.83:1 (all invisible-to-illegible).
   data-state colors picked to clear WCAG AA on paper: #9a5a1f ≈5.2:1,
   #2f7a4f ≈5.0:1. No !important needed — the [data-ux-mode] prefix already
   out-specifies every base rule above (house style for this file's other
   cozy overrides). */
[data-ux-mode="cozy"] .wizard-autosave { color: var(--cozy-ink-muted, #5A5540); }
[data-ux-mode="cozy"] .wizard-confidence { color: var(--cozy-ink-muted, #5A5540); }
[data-ux-mode="cozy"] .wizard-confidence[data-state="low"] { color: #9a5a1f; }
[data-ux-mode="cozy"] .wizard-confidence[data-state="ok"] { color: #2f7a4f; }
[data-ux-mode="cozy"] .wizard-breadcrumb { color: var(--cozy-rose, #A8475F); }