@openpalm/ui 0.11.5-rc.8 → 0.12.0-rc.1

package/build/client/setup/wizard.css

@@ -1,1509 +0,0 @@
-/* =========================================================================
-   OpenPalm Setup Wizard — Standalone CSS
-   ========================================================================= */
-
-/* ── CSS Custom Properties (Design Tokens) ─────────────────────────────── */
-:root {
-  /* Spacing scale */
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-5: 20px;
-  --space-6: 24px;
-  --space-7: 28px;
-  --space-8: 32px;
-
-  /* Typography */
-  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;
-  --text-xs: 0.75rem;
-  --text-sm: 0.8125rem;
-  --text-base: 0.875rem;
-  --text-lg: 1.125rem;
-  --text-xl: 1.25rem;
-  --text-2xl: 1.5rem;
-  --font-medium: 500;
-  --font-semibold: 600;
-  --font-bold: 700;
-  --leading-tight: 1.25;
-
-  /* Radii */
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-full: 9999px;
-
-  /* Accent colors for provider/badge chrome. The core --color-* design tokens
-     (bg, text, border, primary, success, danger, surface, etc.) are inherited
-     from app.css, which defines BOTH light and dark values — that is what makes
-     the wizard theme-aware. Only the accent hues below are wizard-specific and
-     absent from app.css, so they are (re)declared here with light + dark values. */
-  --color-blue: #2563EB;
-  --color-blue-soft: #EFF6FF;
-  --color-teal: #0d9488;
-  --color-teal-soft: #f0fdfa;
-
-  /* Transitions */
-  --transition-fast: 0.15s ease;
-}
-
-:root[data-theme='dark'] {
-  /* Dark variants for the wizard-specific accent hues. Brighter foregrounds on
-     dark, faint translucent "soft" backgrounds so badges/buttons stay legible. */
-  --color-blue: #93c5fd;
-  --color-blue-soft: rgba(37, 99, 235, 0.18);
-  --color-teal: #5eead4;
-  --color-teal-soft: rgba(13, 148, 136, 0.18);
-}
-
-/* ── Reset / Base ──────────────────────────────────────────────────────── */
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-body {
-  font-family: var(--font-sans);
-  font-size: var(--text-base);
-  color: var(--color-text);
-  background: var(--color-bg-secondary);
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* ── Page Layout ───────────────────────────────────────────────────────── */
-.setup-page {
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  /* flex instead of grid+place-items avoids the grid column being sized to the
-     card's max-width, which caused the card to exceed the viewport width on
-     narrow screens (< 720px). */
-  padding: var(--space-6);
-  background:
-    radial-gradient(ellipse 80% 60% at 15% 10%, rgba(255, 157, 0, 0.06) 0%, transparent 60%),
-    radial-gradient(ellipse 60% 50% at 85% 90%, rgba(99, 102, 241, 0.05) 0%, transparent 55%),
-    var(--color-bg-secondary);
-  position: relative;
-  /* Only clip horizontally (to hide the decorative radial-gradient bleed).
-     overflow:hidden was clipping the card vertically on short viewports. */
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-/* ── Wizard Card ───────────────────────────────────────────────────────── */
-.wizard-card {
-  width: 100%;
-  max-width: min(100%, 720px);
-  /* Cap height so the card never taller than the viewport minus the page
-     padding (2 × 24px). The body scrolls internally; step-actions sticks
-     at the bottom of the visible card area, not at the bottom of the
-     full scroll-height. Use calc() so it responds to any viewport height. */
-  max-height: calc(100vh - 48px);
-  background: var(--color-bg);
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  border-radius: 20px;
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.04),
-    0 4px 6px -1px rgba(0, 0, 0, 0.06),
-    0 16px 40px -8px rgba(0, 0, 0, 0.1);
-  padding: 0;
-  position: relative;
-  z-index: 1;
-  min-height: 520px;
-  display: flex;
-  flex-direction: column;
-  animation: card-enter 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
-}
-
-@keyframes card-enter {
-  from { opacity: 0; transform: translateY(16px) scale(0.98); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(6px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .wizard-card { animation: none; }
-}
-
-.wizard-header {
-  padding: var(--space-6) var(--space-8) var(--space-5);
-  border-bottom: 1px solid var(--color-border);
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.hdr-logo {
-  width: 30px;
-  height: 30px;
-  border-radius: 8px;
-  background: var(--color-primary);
-  display: grid;
-  place-items: center;
-  font-weight: 700;
-  font-size: 12px;
-  color: #1a1a1a;
-  flex-shrink: 0;
-}
-
-.wizard-header h1 {
-  font-size: 15px;
-  font-weight: var(--font-semibold);
-  color: var(--color-text);
-  letter-spacing: -0.01em;
-  line-height: 1.1;
-}
-
-.hdr-suffix {
-  /* AA contrast (WCAG 1.4.3): secondary passes ≥4.5:1 in both themes; tertiary did not. */
-  color: var(--color-text-secondary);
-  font-weight: 400;
-  margin-left: 4px;
-}
-
-.wizard-body {
-  padding: var(--space-6) var(--space-8) var(--space-8);
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-/* ── Segmented Progress Bar ───────────────────────────────────────────── */
-.prog-bar {
-  margin-bottom: var(--space-6);
-  /* F1 (WCAG 1.4.10 Reflow): never let segments/labels spill past the card edge. */
-  overflow: hidden;
-}
-
-.prog-segments {
-  display: flex;
-  gap: 3px;
-  margin-bottom: 6px;
-}
-
-.prog-seg {
-  flex: 1;
-  height: 3px;
-  border-radius: 2px;
-  background: var(--color-border);
-  transition: background 0.3s;
-}
-
-.prog-seg.on {
-  background: var(--color-primary-hover);
-}
-
-.prog-labels {
-  display: flex;
-  gap: 3px;
-}
-
-.prog-lbl {
-  flex: 1;
-  min-width: 0;
-  font-size: 12px;
-  font-weight: var(--font-medium);
-  /* F4 (WCAG 1.4.3): secondary passes AA ≥4.5:1 in both themes; tertiary failed in light. */
-  color: var(--color-text-secondary);
-  transition: color 0.3s;
-  cursor: pointer;
-  /* F3 (WCAG 2.5.8): ≥24px tall interactive target. */
-  min-height: 24px;
-  padding: 4px 2px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  border-radius: var(--radius-sm, 6px);
-  /* The full label text is the accessible name; the dot is a compact fallback. */
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.prog-lbl:hover {
-  background: var(--color-bg-secondary);
-}
-
-.prog-lbl.on {
-  color: var(--color-text);
-}
-
-.prog-lbl.active {
-  color: var(--color-text);
-  font-weight: var(--font-semibold);
-}
-
-/* F1: on narrow viewports the 7 word-labels cannot fit at 320px without
-   clipping, so collapse them to numbered dots that reflow cleanly. The
-   accessible name (aria-label="Go to step …") is unchanged. */
-.prog-lbl-num {
-  display: none;
-}
-
-@media (max-width: 560px) {
-  .prog-labels {
-    gap: 4px;
-  }
-  .prog-lbl {
-    flex: 1 1 0;
-    font-size: 0;
-    padding: 4px 0;
-  }
-  .prog-lbl-text {
-    display: none;
-  }
-  .prog-lbl-num {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 22px;
-    height: 22px;
-    min-width: 22px;
-    border-radius: var(--radius-full, 999px);
-    font-size: 12px;
-    font-weight: var(--font-semibold);
-    background: var(--color-bg-secondary);
-    color: var(--color-text-secondary);
-    line-height: 1;
-  }
-  .prog-lbl.on .prog-lbl-num {
-    color: var(--color-text);
-  }
-  .prog-lbl.active .prog-lbl-num {
-    background: var(--color-primary);
-    color: #1a1a1a;
-  }
-}
-
-/* ── Step Content ──────────────────────────────────────────────────────── */
-.step-content {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  /* Make step-content the scroll container so sticky step-actions works.
-     wizard-body provides the flex layout; step-content scrolls internally. */
-  overflow-y: auto;
-  min-height: 0;
-  animation: fadeIn 0.25s ease;
-}
-
-.step-content h2 {
-  font-size: var(--text-2xl);
-  font-weight: var(--font-bold);
-  color: var(--color-text);
-  margin-bottom: var(--space-2);
-  letter-spacing: -0.01em;
-}
-
-.step-description {
-  font-size: var(--text-sm);
-  color: var(--color-text-secondary);
-  margin-bottom: var(--space-6);
-  line-height: 1.5;
-}
-
-/* ── Welcome Hero ──────────────────────────────────────────────────────── */
-.welcome-hero {
-  text-align: center;
-  padding: 40px 0 24px;
-  animation: fadeIn 0.25s ease;
-}
-
-.welcome-icon {
-  font-size: 48px;
-  margin-bottom: var(--space-4);
-}
-
-.welcome-hero h2 {
-  font-size: 28px;
-  text-align: center;
-}
-
-.welcome-subtitle {
-  max-width: 380px;
-  margin: 8px auto 28px;
-  font-size: var(--text-sm);
-  color: var(--color-text-secondary);
-  line-height: 1.5;
-}
-
-/* ── Step Actions ──────────────────────────────────────────────────────── */
-.step-actions {
-  display: flex;
-  /* Wrap buttons onto a second line at narrow widths so nothing extends
-     off-screen at 320px — e.g. the review step has 3 buttons. */
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  align-items: center;
-  gap: var(--space-3);
-  /* Stick to the bottom of the visible wizard-body scroll area. This keeps
-     nav buttons permanently in view on content-heavy steps (providers,
-     models, voice, options, review) where the step-content scroll height
-     exceeds the body's client height.
-     NOTE: negative margins break sticky in most browsers, so the separator
-     is achieved with a box-shadow inset rather than a border-top + bleed. */
-  position: sticky;
-  bottom: 0;
-  background: var(--color-bg);
-  padding-top: var(--space-5);
-  padding-bottom: var(--space-2);
-  /* Use inset box-shadow as top separator — avoids needing negative-margin
-     bleed that would break sticky positioning. */
-  box-shadow: 0 -1px 0 var(--color-border);
-}
-
-.nav-info {
-  font-size: var(--text-xs);
-  /* Secondary token meets AA (>=4.5:1) against the footer bg in both themes;
-     tertiary fails in light mode (2.5:1). */
-  color: var(--color-text-secondary);
-  margin-right: auto;
-  margin-left: var(--space-2);
-}
-
-.nav-info b {
-  /* WCAG AA: --color-success fails as text on light bg; use the text-safe token. */
-  color: var(--color-success-text);
-  font-weight: var(--font-semibold);
-}
-
-/* ── Buttons ───────────────────────────────────────────────────────────── */
-/* Button system (.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-sm,
-   .btn-lg, …) lives in the app's shared design system (app.css). The wizard
-   inherits those classes — do not re-declare them here. */
-
-/* ── Form Fields ───────────────────────────────────────────────────────── */
-/* Form controls, hints, and error/warning banners use the app design system
-   (.form-field / .form-label / .form-input / .field-hint and .feedback /
-   .feedback--error / .feedback--warning, all defined in app.css). The wizard's
-   bespoke .field-group / .field-error / .field-warning copies were removed. */
-
-/* ── Provider Card Grid ──────────────────────────────────────────────── */
-/* NOTE: app.css also defines a global `.provider-grid` (the admin UI's 96px
-   provider-chip grid). The wizard page loads app.css, so that rule collides
-   with this one and crushed cards below their content width (F1 clipping).
-   The #provider-grid ID selector wins regardless of stylesheet order. */
-#provider-grid {
-  display: grid;
-  /* Wide enough for a provider name + status check + "N models · M auth
-     methods" meta line without internal clipping. */
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: var(--space-3);
-  margin-bottom: var(--space-4);
-  min-width: 0;
-}
-
-.provider-group-header {
-  display: flex;
-  align-items: baseline;
-  gap: var(--space-3);
-  margin-bottom: var(--space-2);
-  padding-bottom: var(--space-2);
-  border-bottom: 1px solid var(--color-border);
-}
-
-.provider-group-label {
-  font-size: var(--text-base);
-  font-weight: var(--font-semibold);
-  color: var(--color-text);
-  margin: 0;
-}
-
-.provider-group-desc {
-  font-size: var(--text-sm);
-  color: var(--color-text-secondary);
-}
-
-.provider-group-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 8px;
-}
-
-/* ── Provider Cards ──────────────────────────────────────────────────── */
-.pcard {
-  background: var(--color-bg);
-  border: 1.5px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 14px;
-  cursor: pointer;
-  transition: all 0.15s;
-  /* F1 (WCAG 1.4.10 Reflow): clip any overflowing content (e.g. auth-row
-     input+button combos) so the card never widens its flex/grid container.
-     min-width:0 prevents the card itself from overflowing its flex parent. */
-  overflow: hidden;
-  min-width: 0;
-}
-
-.pcard:hover {
-  border-color: var(--color-border-hover);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
-}
-
-.pcard.selected {
-  border-color: var(--color-primary-hover);
-  background: var(--color-primary-subtle);
-}
-
-/* WCAG AA: secondary text drops below 4.5:1 on the primary-subtle tint of a
-   selected/expanded card (axe color-contrast on .wide .pcard-desc). */
-.pcard.selected .pcard-desc {
-  color: var(--color-text);
-}
-
-.pcard.verified {
-  border-color: var(--color-success);
-  background: var(--color-success-bg);
-}
-
-.pcard.wide {
-  grid-column: 1 / -1;
-}
-
-.pcard-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-/* WCAG 2.4.7: role="button" elements must show a focus ring. The global
-   :focus-visible rule in app.css handles native buttons; interactive divs
-   need explicit focus styling. */
-.pcard-header[role="button"]:focus-visible,
-.model-group-header[role="button"]:focus-visible {
-  outline: 2px solid var(--color-primary);
-  outline-offset: 2px;
-  border-radius: var(--radius-sm);
-}
-
-.pcard-icon {
-  width: 36px;
-  height: 36px;
-  border-radius: var(--radius-md);
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  display: grid;
-  place-items: center;
-  font-size: 18px;
-  flex-shrink: 0;
-}
-
-.pcard-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.pcard-name {
-  font-size: var(--text-sm);
-  font-weight: var(--font-semibold);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-
-.pcard-desc {
-  font-size: var(--text-xs);
-  /* --color-text-tertiary fails WCAG AA in light mode. Use secondary. */
-  color: var(--color-text-secondary);
-  margin-top: 1px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.pcard-check {
-  width: 18px;
-  height: 18px;
-  border-radius: 6px;
-  border: 2px solid var(--color-border);
-  flex-shrink: 0;
-  display: grid;
-  place-items: center;
-  font-size: 11px;
-  color: white;
-  transition: all 0.15s;
-}
-
-.pcard.selected .pcard-check {
-  background: var(--color-primary-hover);
-  border-color: var(--color-primary-hover);
-}
-
-.pcard.verified .pcard-check {
-  background: var(--color-success);
-  border-color: var(--color-success);
-}
-
-/* ── Badges ──────────────────────────────────────────────────────────── */
-/* Badges use the app design system (.badge + .badge-neutral / .badge-success /
-   .badge-recommended, defined in app.css). The wizard's bespoke .badge /
-   .badge-cloud / .badge-local / .badge-hybrid copies were removed. */
-
-/* ── Verification Status ─────────────────────────────────────────────── */
-.vs {
-  font-size: var(--text-sm);
-  flex-shrink: 0;
-  margin-left: 2px;
-}
-
-.vs-ok { color: var(--color-success); }
-.vs-err { color: var(--color-error); }
-.vs-wait { color: var(--color-primary-hover); animation: blink 1.2s ease infinite; }
-
-@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
-
-/* ── Inline Auth Panel ───────────────────────────────────────────────── */
-.pcard-auth {
-  margin-top: var(--space-3);
-  padding-top: var(--space-3);
-  border-top: 1px solid var(--color-border);
-  animation: fadeIn 0.2s ease;
-}
-
-.auth-row {
-  display: flex;
-  /* Wrap input+button onto two lines at narrow widths so controls
-     never extend beyond the card edge at 320px. */
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-bottom: var(--space-2);
-}
-
-.auth-row input {
-  flex: 1 1 120px;
-  min-width: 0;
-  /* Ensure input fills the full row width when alone (no button on same line). */
-  width: 100%;
-  padding: 9px 12px;
-  border-radius: var(--radius-md);
-  border: 1.5px solid var(--color-border);
-  background: var(--color-bg);
-  color: var(--color-text);
-  font-size: 13px;
-  font-family: var(--font-mono);
-  outline: none;
-  transition: border-color 0.15s;
-}
-
-.auth-row input:focus {
-  border-color: var(--color-primary);
-}
-.auth-row input:focus-visible {
-  /* WCAG 2.4.7: restore focus indicator removed by outline:none above. */
-  outline: 2px solid var(--color-primary);
-  outline-offset: 2px;
-}
-
-.auth-row input::placeholder {
-  color: var(--color-text-tertiary);
-}
-
-.auth-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  padding: 9px 14px;
-  border-radius: var(--radius-md);
-  border: none;
-  font-family: var(--font-sans);
-  font-size: 13px;
-  font-weight: var(--font-semibold);
-  cursor: pointer;
-  transition: all 0.15s;
-  white-space: nowrap;
-}
-
-.auth-btn:hover:not(:disabled) { filter: brightness(0.95); }
-.auth-btn:disabled { opacity: 0.35; cursor: not-allowed; }
-.auth-btn-verify { background: var(--color-primary); color: #1a1a1a; }
-.auth-btn-verified { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
-.auth-btn-detect { background: var(--color-teal); color: white; }
-.auth-btn-detected { background: var(--color-teal-soft); color: var(--color-teal); border: 1px solid var(--color-teal); }
-
-/* ── Auth Feedback ───────────────────────────────────────────────────── */
-/* In-panel verification feedback uses the app .feedback / .feedback--success /
-   .feedback--error banners (app.css). The bespoke .auth-feedback* copies were
-   removed. A small top gap is added so the banner clears the auth rows above. */
-.pcard-auth .feedback {
-  margin-top: var(--space-2);
-}
-
-/* ── Ollama Mode Prompt ──────────────────────────────────────────────── */
-.ollama-mode-prompt {
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 14px;
-  text-align: center;
-}
-
-.ollama-mode-prompt p {
-  font-size: 13px;
-  color: var(--color-text-secondary);
-  margin-bottom: 10px;
-}
-
-.ollama-mode-buttons {
-  display: flex;
-  gap: 8px;
-  justify-content: center;
-}
-
-.ollama-mode-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  padding: 9px 18px;
-  border-radius: var(--radius-md);
-  border: none;
-  font-family: var(--font-sans);
-  font-size: 13px;
-  font-weight: var(--font-semibold);
-  cursor: pointer;
-  transition: all 0.15s;
-  white-space: nowrap;
-}
-
-.ollama-mode-btn:hover { filter: brightness(0.95); }
-.ollama-mode-btn-detect { background: var(--color-teal); color: white; }
-.ollama-mode-btn-stack { background: var(--color-bg); color: var(--color-text-secondary); border: 1px solid var(--color-border); }
-.ollama-mode-btn-stack:hover { border-color: var(--color-border-hover); color: var(--color-text); }
-
-/* ── Advanced Toggle ─────────────────────────────────────────────────── */
-.adv-toggle {
-  grid-column: 1 / -1;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 0;
-  cursor: pointer;
-  color: var(--color-text-tertiary);
-  font-size: 13px;
-  font-weight: var(--font-medium);
-  user-select: none;
-  border: none;
-  background: none;
-  width: 100%;
-}
-
-.adv-toggle:hover { color: var(--color-text-secondary); }
-.adv-toggle::before, .adv-toggle::after {
-  content: '';
-  flex: 1;
-  height: 1px;
-  background: var(--color-border);
-}
-
-.adv-toggle .arr {
-  display: inline-block;
-  transition: transform 0.2s;
-  font-size: 10px;
-  margin-left: 2px;
-}
-
-.adv-toggle.open .arr { transform: rotate(90deg); }
-
-/* ── Model Groups ────────────────────────────────────────────────────── */
-.model-group {
-  background: var(--color-bg);
-  border: 1.5px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: var(--space-4);
-  margin-bottom: 10px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  /* Constrain model option lists so each group shows ~5 options before
-     scrolling, rather than expanding to show all 100+ models and pushing
-     the step-actions button 600px below the visible area. */
-  display: flex;
-  flex-direction: column;
-}
-
-/* The list of .model-opt rows within a group scrolls independently */
-.model-group .model-filter-row ~ .model-opt,
-.model-group > .model-opt {
-  /* Handled via the scroll container below */
-}
-
-/* Wrap the scrollable option list so only options scroll, not the header */
-.model-opts-scroll {
-  max-height: 220px;
-  overflow-y: auto;
-  /* Subtle inner shadow indicates there is more content to scroll */
-  mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent 100%);
-  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent 100%);
-}
-
-.model-group-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  /* WCAG 2.5.8: interactive header must have a minimum 24px touch target height.
-     44px is the recommended minimum for primary interactive controls. */
-  min-height: 44px;
-  padding: 10px 0;
-  margin-bottom: 2px;
-}
-
-.model-group-title {
-  font-size: var(--text-sm);
-  font-weight: var(--font-bold);
-}
-
-.model-group-tag {
-  /* WCAG 1.4.4: 10px body text falls below the 11px legibility floor. */
-  font-size: 12px;
-  font-weight: var(--font-semibold);
-  padding: 2px 6px;
-  border-radius: 4px;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.model-group-tag-required {
-  background: var(--color-primary-subtle);
-  /* --color-primary-hover (orange) on near-white fails WCAG AA contrast (~3:1).
-     Use --color-text (dark) to ensure ≥4.5:1 in both themes. */
-  color: var(--color-text);
-}
-
-.model-group-tag-optional {
-  background: var(--color-teal-soft);
-  /* WCAG AA: teal-on-teal-soft fails contrast (axe color-contrast). Match the
-     required tag: full-contrast text on the soft background. */
-  color: var(--color-text);
-}
-
-.model-group-desc {
-  font-size: var(--text-xs);
-  /* --color-text-tertiary (~#9ca3af) fails WCAG AA contrast on white in light
-     mode (~2.5:1). --color-text-secondary (~#6b7280) passes (~4.6:1). */
-  color: var(--color-text-secondary);
-  margin-bottom: var(--space-3);
-}
-
-/* Empty embedding role — akm self-embeds locally, so no model is offered. */
-.model-auto-note {
-  font-size: var(--text-sm);
-  color: var(--color-text-secondary);
-  background: var(--color-surface);
-  border: 1px dashed var(--color-border);
-  border-radius: var(--radius-md, 8px);
-  padding: var(--space-3, 12px);
-}
-
-/* ── Model Search Filter ──────────────────────────────────────────── */
-.model-filter-row {
-  margin-bottom: 6px;
-}
-.model-filter-input {
-  width: 100%;
-  padding: 8px 12px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  font-size: 0.85rem;
-  background: var(--color-surface);
-  color: var(--color-text-primary);
-  outline: none;
-  transition: border-color 0.15s;
-}
-.model-filter-input:focus {
-  border-color: var(--color-primary);
-}
-.model-filter-input:focus-visible {
-  /* WCAG 2.4.7: restore focus indicator removed by outline:none above. */
-  outline: 2px solid var(--color-primary);
-  outline-offset: 2px;
-}
-.model-filter-input::placeholder {
-  color: var(--color-text-tertiary);
-}
-.model-opt-filtered {
-  display: none !important;
-}
-
-/* ── Model Option (radio-style) ──────────────────────────────────────── */
-.model-opt {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  /* WCAG 2.5.8: touch target must be ≥24px; 44px is the recommended minimum
-     for primary interactive controls. The padding provides height; explicitly
-     enforce min-height so even empty-content rows meet the floor. */
-  min-height: 44px;
-  padding: 10px 12px;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: all 0.1s;
-  margin-bottom: 2px;
-  border: 1.5px solid transparent;
-}
-
-.model-opt:hover { background: var(--color-bg-secondary); }
-.model-opt:focus-visible {
-  /* WCAG 2.4.7: ensure focus ring is visible on keyboard navigation. */
-  outline: 2px solid var(--color-primary);
-  outline-offset: 2px;
-}
-
-.model-opt.on {
-  background: var(--color-primary-subtle);
-  border-color: var(--color-primary-border);
-}
-
-.model-opt-dot {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  border: 2px solid var(--color-border);
-  flex-shrink: 0;
-  display: grid;
-  place-items: center;
-}
-
-.model-opt.on .model-opt-dot {
-  border-color: var(--color-primary-hover);
-}
-
-.model-opt-dot-inner {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: transparent;
-}
-
-.model-opt.on .model-opt-dot-inner {
-  background: var(--color-primary-hover);
-}
-
-.model-opt-name {
-  font-size: 13px;
-  color: var(--color-text-secondary);
-}
-
-.model-opt.on .model-opt-name {
-  color: var(--color-text);
-  font-weight: var(--font-medium);
-}
-
-.model-opt-meta {
-  font-size: 12px;
-  /* --color-text-tertiary fails AA contrast in light mode. Use secondary. */
-  color: var(--color-text-secondary);
-  margin-top: 1px;
-}
-
-.model-opt-badge {
-  /* WCAG 1.4.4: 9px falls below the 11px legibility floor. */
-  font-size: 12px;
-  font-weight: var(--font-semibold);
-  padding: 2px 6px;
-  border-radius: 4px;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  margin-left: auto;
-  flex-shrink: 0;
-}
-
-.model-opt-badge-top {
-  background: var(--color-primary-subtle);
-  /* Orange-on-near-white fails AA. Use --color-text for sufficient contrast. */
-  color: var(--color-text);
-}
-
-.model-opt-badge-auto {
-  background: var(--color-blue-soft);
-  color: var(--color-blue);
-}
-
-/* ── Review Summary ──────────────────────────────────────────────────── */
-.review-card {
-  background: var(--color-bg);
-  border: 1.5px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 18px;
-  margin-bottom: var(--space-4);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
-}
-
-.review-card-title {
-  font-size: 12px;
-  font-weight: var(--font-semibold);
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  /* --color-text-tertiary fails AA contrast. Use secondary for ≥4.5:1. */
-  color: var(--color-text-secondary);
-  margin-bottom: 8px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.review-edit-btn {
-  background: none;
-  border: none;
-  /* --color-primary (orange) on white/near-white fails WCAG AA (~2.7:1 light).
-     Use --color-text-secondary which passes ≥4.5:1 in both themes. */
-  color: var(--color-text-secondary);
-  font-size: var(--text-xs);
-  font-weight: var(--font-medium);
-  cursor: pointer;
-  /* WCAG 2.5.8: minimum 24×24 target; 32px height with padding is practical. */
-  min-height: 32px;
-  padding: 6px 8px;
-  border-radius: var(--radius-md);
-  transition: all 0.15s ease;
-  text-transform: none;
-  letter-spacing: normal;
-}
-
-.review-edit-btn:hover { background: var(--color-bg-secondary); color: var(--color-text); }
-
-.review-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 6px 0;
-  border-bottom: 1px solid var(--color-bg-secondary);
-  font-size: 13px;
-}
-
-.review-row:last-child { border-bottom: none; }
-
-.review-row-label {
-  color: var(--color-text-secondary);
-}
-
-.review-row-value {
-  font-family: var(--font-mono);
-  font-size: var(--text-xs);
-  color: var(--color-text);
-  text-align: right;
-  /* Raised from 240px — model names like
-     "adrienbrault/nous-hermes2theta-llama3-8b:q4_K_M (Ollama)" are 404px wide
-     and were always truncated. 60% of the row gives the value enough room
-     while keeping the label readable. */
-  max-width: 60%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Alert rows (e.g. the password row) hold token-like values that can be long.
-   Allow them to wrap and break so content is never clipped at narrow widths. */
-.review-row--alert .review-row-value {
-  max-width: 100%;
-  white-space: normal;
-  word-break: break-all;
-  text-align: left;
-}
-
-.review-row-value-ok {
-  /* WCAG AA: --color-success fails as text on light bg; use the text-safe token. */
-  color: var(--color-success-text);
-  font-family: var(--font-sans);
-}
-
-.review-json-toggle {
-  margin-bottom: var(--space-3);
-}
-
-.btn-json-toggle {
-  background: none;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  color: var(--color-text-secondary);
-  font-size: var(--text-xs);
-  font-weight: var(--font-medium);
-  padding: 6px 12px;
-  cursor: pointer;
-  transition: all 0.15s;
-  font-family: var(--font-sans);
-}
-
-.btn-json-toggle:hover {
-  border-color: var(--color-border-hover);
-  color: var(--color-text);
-}
-
-.review-json pre {
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 14px;
-  font-family: var(--font-mono);
-  font-size: 12px;
-  line-height: 1.6;
-  color: var(--color-text-secondary);
-  white-space: pre;
-  overflow-x: auto;
-  max-height: 360px;
-  margin-bottom: var(--space-3);
-}
-
-/* (Removed: unused legacy review-grid, optional add-on row, and
-   reranking/field-layout blocks — no setup markup referenced them.) */
-
-/* ── Deploy Screen ─────────────────────────────────────────────────────── */
-.deploy-header { text-align: center; margin-bottom: var(--space-6); }
-
-.deploy-progress-summary {
-  margin-bottom: var(--space-5);
-  padding: var(--space-4);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  background: var(--color-bg-secondary);
-}
-
-.deploy-progress-meta {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--space-3);
-  margin-bottom: var(--space-3);
-}
-
-.deploy-progress-label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); }
-.deploy-progress-value { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-primary-hover); }
-.deploy-progress-value--error { color: var(--color-danger); }
-
-.deploy-progress-bar {
-  height: 10px;
-  border-radius: 999px;
-  overflow: hidden;
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-}
-
-.deploy-progress-bar--error { background: var(--color-danger-bg); border-color: var(--color-danger-border); }
-
-.deploy-progress-fill {
-  height: 100%;
-  border-radius: inherit;
-  background: linear-gradient(90deg, #ffb020 0%, #2f9e44 100%);
-  transition: width 0.4s ease;
-}
-
-.deploy-progress-fill--error { background: linear-gradient(90deg, #f59e0b 0%, #dc2626 100%); }
-
-.deploy-progress-note { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--color-text-secondary); line-height: 1.5; }
-
-.deploy-services { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
-
-.deploy-service-row {
-  display: grid;
-  grid-template-columns: 28px 1fr 120px;
-  align-items: center;
-  gap: var(--space-3);
-  padding: var(--space-3) var(--space-4);
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-}
-
-.deploy-service-indicator { display: flex; align-items: center; justify-content: center; }
-.deploy-check,
-.deploy-warning,
-.deploy-spinner { display: flex; align-items: center; justify-content: center; }
-.deploy-service-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-.deploy-service-name { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text); }
-.deploy-service-status { font-size: var(--text-xs); color: var(--color-text-tertiary); }
-
-.deploy-service-bar { height: 6px; background: var(--color-bg-secondary); border-radius: 3px; overflow: hidden; }
-.deploy-bar-fill { height: 100%; border-radius: 3px; transition: all 0.4s ease; }
-.deploy-bar-fill.indeterminate { width: 40%; background: var(--color-primary); animation: indeterminate-bar 1.5s ease-in-out infinite; }
-.deploy-bar-fill.ready { width: 72%; background: #ffb020; animation: none; }
-.deploy-bar-fill.stopped { width: 72%; background: #d97706; animation: none; opacity: 0.9; }
-.deploy-bar-fill.complete { width: 100%; background: var(--color-success); animation: none; }
-
-@keyframes indeterminate-bar { 0% { transform: translateX(-100%); } 50% { transform: translateX(150%); } 100% { transform: translateX(-100%); } }
-@media (prefers-reduced-motion: reduce) { .deploy-bar-fill.indeterminate { animation: none; width: 100%; opacity: 0.5; } }
-
-.deploy-done { text-align: center; margin-top: var(--space-4); }
-
-/* Deploy failure card */
-.deploy-failure-card {
-  margin-bottom: var(--space-5);
-  padding: var(--space-4);
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--color-danger-border);
-  background: var(--color-danger-bg);
-}
-
-.deploy-failure-header { margin-bottom: var(--space-2); }
-.deploy-failure-kicker { display: inline-block; margin-bottom: var(--space-1); font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-badge-danger-fg); }
-.deploy-failure-header h3 { margin: 0; font-size: var(--text-lg); color: var(--color-text); }
-.deploy-failure-summary { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.55; }
-
-/* Deploy tips */
-.deploy-tips {
-  margin-top: var(--space-5);
-  padding: var(--space-4);
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--color-warning-border);
-  background: var(--color-warning-bg);
-}
-
-.deploy-tips-header { margin-bottom: var(--space-3); }
-.deploy-tips-kicker { display: inline-block; font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-caution); margin-bottom: var(--space-1); }
-.deploy-tips h3 { margin: 0; font-size: var(--text-base); color: var(--color-text); }
-.deploy-tips ul { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--space-2); }
-.deploy-tips li { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.5; }
-
-/* Deploy error details */
-.deploy-error-details {
-  margin-top: var(--space-3);
-  padding: var(--space-3);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-bg-secondary);
-}
-
-.deploy-error-details summary { cursor: pointer; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); }
-.deploy-error-details pre { margin: var(--space-3) 0 0; white-space: pre-wrap; word-break: break-word; font-size: var(--text-xs); color: var(--color-text-secondary); line-height: 1.5; }
-
-/* ── Spinner ───────────────────────────────────────────────────────────── */
-/* The wizard uses the shared common/Spinner.svelte component (self-contained
-   styles + reduced-motion handling). The bespoke .spinner copy was removed. */
-
-/* ── Loading State ─────────────────────────────────────────────────────── */
-.loading-state { display: flex; justify-content: center; align-items: center; padding: var(--space-8); }
-
-/* ── Done State ────────────────────────────────────────────────────────── */
-.done-state { text-align: center; padding: var(--space-4) 0; }
-.done-icon { display: inline-block; margin-bottom: var(--space-4); }
-.done-state h2 { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-text); margin-bottom: var(--space-2); }
-.done-subtitle { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-5); }
-
-.service-list {
-  list-style: none;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-2);
-  justify-content: center;
-  margin-bottom: var(--space-6);
-}
-
-.service-list li {
-  font-size: var(--text-sm);
-  background: var(--color-success-bg);
-  color: var(--color-text);
-  border: 1px solid var(--color-success-border);
-  padding: var(--space-2) var(--space-4);
-  border-radius: var(--radius-md);
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  width: 100%;
-  justify-content: flex-start;
-}
-
-.service-list {
-  flex-direction: column;
-  align-items: stretch;
-  max-width: 420px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.deploy-svc-name {
-  font-weight: var(--font-semibold);
-  min-width: 130px;
-}
-
-.deploy-svc-link {
-  font-family: var(--font-mono);
-  font-size: var(--text-xs);
-  color: var(--color-accent);
-  text-decoration: none;
-}
-
-.deploy-svc-link:hover {
-  text-decoration: underline;
-}
-
-.deploy-svc-status {
-  font-size: var(--text-xs);
-  color: var(--color-success);
-  margin-left: auto;
-}
-
-/* ── Voice Hint ───────────────────────────────────────────────────────── */
-.voice-hint {
-  font-size: var(--text-sm);
-  color: var(--color-text-secondary);
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: var(--space-3) var(--space-4);
-  margin-bottom: var(--space-4);
-  line-height: 1.5;
-}
-
-/* ── Options Sections ─────────────────────────────────────────────────── */
-.options-section {
-  margin-bottom: var(--space-5);
-}
-
-.options-section-title {
-  font-size: var(--text-base);
-  font-weight: var(--font-bold);
-  color: var(--color-text);
-  margin-bottom: var(--space-1);
-}
-
-.options-section-desc {
-  font-size: var(--text-xs);
-  color: var(--color-text-secondary);
-  margin-bottom: var(--space-3);
-  line-height: 1.5;
-  /* Cap the readable measure so long-form descriptions stay <=~75ch (F2). */
-  max-width: 70ch;
-}
-
-/* ── Toggle Card Grid ─────────────────────────────────────────────────── */
-.toggle-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-/* WCAG 2.4.7: programmatic/AT focus does not match :focus-visible after
-   pointer input, so voice-step controls get plain :focus indicators. */
-.engine-card:focus,
-.voice-configure-summary:focus,
-#voice-groups select:focus,
-#voice-groups input:focus,
-.voice-profile-inline select:focus,
-.step-actions .btn:focus {
-  outline: 2px solid var(--color-primary);
-  outline-offset: 2px;
-}
-
-.toggle-card {
-  background: var(--color-bg);
-  border: 1.5px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 10px 14px;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.toggle-card:hover {
-  border-color: var(--color-border-hover);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
-}
-
-.toggle-card.on {
-  border-color: var(--color-primary-hover);
-  background: var(--color-primary-subtle);
-}
-
-.toggle-card.locked {
-  cursor: default;
-  opacity: 0.85;
-}
-
-.toggle-card.locked:hover {
-  box-shadow: none;
-}
-
-.toggle-card-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.toggle-card-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: var(--radius-sm);
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  display: grid;
-  place-items: center;
-  font-size: 16px;
-  flex-shrink: 0;
-}
-
-.toggle-card-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.toggle-card-name {
-  font-size: var(--text-sm);
-  font-weight: var(--font-semibold);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-
-.toggle-card-desc {
-  font-size: var(--text-xs);
-  /* Secondary (not tertiary) so the description meets AA (>=4.5:1) on both the
-     plain card bg and the tinted .toggle-card.on (--color-primary-subtle) state,
-     in light and dark themes. */
-  color: var(--color-text-secondary);
-  margin-top: 1px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.toggle-card-switch {
-  flex-shrink: 0;
-}
-
-/* ── Toggle Track (iOS-style) ─────────────────────────────────────────── */
-/*
- * WCAG 1.4.11 Non-Text Contrast fix: the off-state track must achieve ≥3:1
- * against the card background in both light and dark themes.
- *
- * Light mode  card bg = #ffffff (L=1.000)
- *   --wizard-toggle-off = #8b9198 → L≈0.289
- *   track vs card:  1.05 / 0.339 ≈ 3.10:1  ✓
- *   thumb vs track: 1.05 / 0.339 ≈ 3.10:1  ✓
- *
- * Dark mode   card bg = #101418 (L≈0.005)
- *   --wizard-toggle-off = #5b6471 → L≈0.130
- *   track vs card: 0.180 / 0.055 ≈ 3.27:1  ✓
- *   thumb vs track: 1.05 / 0.180 ≈ 5.83:1  ✓
- *
- * Previous value var(--color-border) = #e5e7eb → 1.14:1 (failed).
- */
-:root {
-  --wizard-toggle-off: #8b9198;
-}
-:root[data-theme='dark'] {
-  --wizard-toggle-off: #5b6471;
-}
-
-.toggle-track {
-  width: 36px;
-  height: 20px;
-  border-radius: 10px;
-  background: var(--wizard-toggle-off);
-  position: relative;
-  transition: background 0.2s;
-}
-
-.toggle-track.on {
-  background: var(--color-primary-hover);
-}
-
-.toggle-track.locked {
-  background: var(--color-success);
-}
-
-.toggle-thumb {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: white;
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  transition: transform 0.2s;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-}
-
-.toggle-track.on .toggle-thumb,
-.toggle-track.locked .toggle-thumb {
-  transform: translateX(16px);
-}
-
-/* ── Channel Credential Expansion ─────────────────────────────────────── */
-.toggle-card.wide {
-  grid-column: 1 / -1;
-}
-
-.toggle-card .pcard-auth {
-  margin-top: var(--space-3);
-  padding-top: var(--space-3);
-  border-top: 1px solid var(--color-border);
-  animation: fadeIn 0.2s ease;
-}
-
-.channel-cred-label {
-  display: block;
-  font-size: var(--text-xs);
-  font-weight: var(--font-semibold);
-  color: var(--color-text-secondary);
-  margin-bottom: 4px;
-}
-
-.channel-cred-required {
-  color: var(--color-error, #ef4444);
-}
-
-/* ── Hidden utility ────────────────────────────────────────────────────── */
-.hidden { display: none !important; }
-
-/* ── Responsive ────────────────────────────────────────────────────────── */
-@media (min-width: 900px) {
-  .wizard-card { max-width: 800px; }
-}
-
-@media (min-width: 1200px) {
-  /* On wide displays give the card more room so the provider grid and
-     model lists don't feel cramped with 400px of empty gutter on each side. */
-  .wizard-card { max-width: 920px; }
-}
-
-@media (max-width: 540px) {
-  /* Reduce page padding so the card has more usable width on phones */
-  .setup-page { padding: var(--space-3); }
-  .wizard-card {
-    max-height: calc(100vh - 24px);
-    min-height: 0;
-    border-radius: 16px;
-  }
-  .wizard-header { padding: var(--space-4) var(--space-5) var(--space-3); }
-  .wizard-body { padding: var(--space-4) var(--space-5) var(--space-4); }
-  /* No margin compensation needed — step-actions no longer uses negative margins */
-}
-
-@media (max-width: 480px) {
-  .review-item { flex-direction: column; align-items: flex-start; }
-  .review-value { text-align: left; }
-  .deploy-service-row { grid-template-columns: 28px 1fr; }
-  .deploy-service-bar { display: none; }
-  /* Stack review rows vertically on narrow phones so long values don't clip. */
-  .review-row {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 4px;
-  }
-  .review-row-value {
-    max-width: 100%;
-    text-align: left;
-    white-space: normal;
-    word-break: break-all;
-  }
-}
-
-.rerun-banner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 16px;
-  background: var(--color-surface, #f0f4ff);
-  border-bottom: 1px solid var(--color-border, #dde3f0);
-  font-size: 0.8rem;
-  color: var(--color-text-secondary, #555);
-}
-.rerun-back-link {
-  color: var(--color-primary, #4f6ef7);
-  text-decoration: none;
-  font-weight: 500;
-}
-.rerun-back-link:hover { text-decoration: underline; }