/* =========================================================
   DESIGN LANGUAGE STUDIO — APP SHELL
   Full-viewport workspace. Fixed app bar + step tabs + footer;
   the workspace zones scroll independently. Uses website theme
   tokens (variables.css), so it respects light/dark.
   ========================================================= */

.studio-app {
   display: flex;
   flex-direction: column;
   height: 100vh;
   overflow: hidden;
   background: var(--bg-primary);
   color: var(--text-primary);
}

/* ── App bar ─────────────────────────────────────────── */

.sa-bar {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 0 1.1rem;
   height: 58px;
   flex: 0 0 auto;
   background: var(--surface-primary);
   border-bottom: 1px solid var(--border-subtle);
}

.sa-brand {
   display: flex;
   align-items: center;
   gap: 0.55rem;
   flex: 0 0 auto;
   text-decoration: none;
   color: var(--text-primary);
   font-weight: 600;
   font-size: 0.95rem;
}

.sa-brand-mark {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
}
.sa-brand-mark img {
   display: block;
   width: 30px;
   height: 30px;
   border-radius: 8px;
}

.sa-brand-text {
   color: var(--text-secondary);
   font-weight: 500;
}

.sa-bar-actions {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   flex: 0 0 auto;
}

.sa-icon-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: 8px;
   border: 1px solid var(--border-primary);
   background: var(--surface-primary);
   color: var(--text-secondary);
   cursor: pointer;
   transition: background var(--transition-fast);
}
.sa-icon-btn:hover { background: var(--surface-hover); }

.sa-btn {
   font-size: 0.85rem;
   font-weight: 600;
   padding: 0.5rem 0.95rem;
   border-radius: 8px;
   border: 1px solid var(--border-primary);
   background: var(--surface-primary);
   color: var(--text-secondary);
   cursor: pointer;
   transition: background var(--transition-fast), border-color var(--transition-fast);
}
.sa-btn:hover { background: var(--surface-hover); border-color: var(--border-secondary); }

.sa-btn--primary {
   background: var(--color-primary);
   border-color: var(--color-primary);
   color: #fff;
}
.sa-btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

/* ── Stepper — single-color segmented progress bar ────────────────────
   Connected segments centered in the app bar. Three states from ONE brand
   color: future = neutral, done = soft brand tint, current = solid brand.
   step-manager toggles state classes on the persistent segments, so the
   fill transitions animate as you advance. */

.sa-steps {
   flex: 1 1 auto;
   min-width: 0;
   display: flex;
   justify-content: center;
}

.sa-steps .dls-progress-list {
   display: inline-flex;
   align-items: stretch;
   list-style: none;
   margin: 0;
   padding: 0;
   max-width: 100%;
   overflow-x: auto;
   scrollbar-width: none;
   border: 1px solid var(--border-subtle);
   border-radius: 999px;
}
.sa-steps .dls-progress-list::-webkit-scrollbar { display: none; }

.sa-steps .dls-progress-step {
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
   padding: 0.42rem 0.95rem;
   font-size: 0.8rem;
   font-weight: 500;
   white-space: nowrap;
   cursor: pointer;
   color: var(--text-muted);
   background: var(--surface-secondary);
   border-right: 1px solid var(--border-subtle);
   transition: background var(--transition-normal), color var(--transition-normal);
}
.sa-steps .dls-progress-step:last-child { border-right: 0; }
.sa-steps .dls-progress-step:hover { color: var(--text-secondary); }
.sa-steps .dls-progress-step:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: -2px;
}

/* Subtle leading number — orientation, not emphasis */
.sa-steps .dls-progress-n {
   font-size: 0.72rem;
   font-weight: 600;
   opacity: 0.5;
}

/* Done = soft brand tint */
.sa-steps .dls-progress-step.is-complete {
   background: var(--color-primary-soft);
   color: var(--color-primary);
}
.sa-steps .dls-progress-step.is-complete .dls-progress-n { opacity: 0.6; }

/* Current = solid brand fill (the only saturated segment) */
.sa-steps .dls-progress-step.is-active {
   background: var(--color-primary);
   color: #fff;
   border-right-color: transparent;
   font-weight: 600;
}
.sa-steps .dls-progress-step.is-active .dls-progress-n { opacity: 0.7; }

/* Stay compact on tighter widths — labels carry the segments, so keep them */
@media (max-width: 1180px) {
   .sa-steps .dls-progress-step { padding: 0.4rem 0.72rem; font-size: 0.76rem; }
}

@media (prefers-reduced-motion: reduce) {
   .sa-steps .dls-progress-step { transition: none; }
}

/* ── Workspace: two columns — controls card | live stage ─────────────
   A tinted, padded canvas with two elevated cards (separated by gap +
   shadow, not hard borders) reads more premium than full-bleed columns. */

.sa-workspace {
   flex: 1 1 auto;
   min-height: 0;
   display: grid;
   grid-template-columns: 280px minmax(0, 1fr);   /* matches the tools' --tool-panel-w */
   grid-template-rows: minmax(0, 1fr);   /* row fills height so the stage/preview can fill */
   gap: 1rem;
   padding: 1rem;
   /* Subtle dot-grid page backdrop; the cards sit on top of it */
   background:
      radial-gradient(circle, var(--border-subtle) 1px, transparent 1px) 0 0 / 22px 22px,
      var(--bg-secondary);
   overflow: hidden;
}

/* Shared card surface for both columns */
.sa-controls,
.sa-stage {
   background: var(--surface-primary);
   border: 1px solid var(--border-subtle);
   border-radius: 16px;
   overflow: hidden;
}

/* LEFT — controls card, step nav pinned to its foot */
.sa-controls {
   position: relative;
   display: flex;
   flex-direction: column;
   box-shadow: var(--shadow-sm);
}
.sa-controls-body {
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
   padding: 0 1.15rem 1.25rem;   /* top padding lives in the sticky .sc-head */
}

/* Thin, NEUTRAL scrollbars for the controls + health panels — chrome should
   recede; a saturated brand thumb competes with the actual controls. */
.sa-controls-body,
.sa-health-scroll {
   scrollbar-width: thin;
   scrollbar-color: var(--border-secondary) transparent;
}
.sa-controls-body::-webkit-scrollbar,
.sa-health-scroll::-webkit-scrollbar { width: 6px; }
.sa-controls-body::-webkit-scrollbar-track,
.sa-health-scroll::-webkit-scrollbar-track { background: transparent; }
.sa-controls-body::-webkit-scrollbar-thumb,
.sa-health-scroll::-webkit-scrollbar-thumb {
   background: var(--border-secondary);
   border-radius: 6px;
}
.sa-controls-body::-webkit-scrollbar-thumb:hover,
.sa-health-scroll::-webkit-scrollbar-thumb:hover {
   background: var(--text-muted);
}

.sa-stepnav {
   flex: 0 0 auto;
   display: flex;
   gap: 0.5rem;
   padding: 0.8rem 1rem;
   border-top: 1px solid var(--border-subtle);
   background: var(--surface-primary);
}
.sa-stepnav .sa-nav-btn {
   flex: 1 1 0;
   justify-content: center;
   padding: 0.6rem 0.6rem;
   font-size: 0.85rem;
}
.sa-nav-icon { display: inline-flex; align-items: center; }

/* RIGHT — the stage: live preview + docked health, unified in one card */
.sa-stage {
   display: flex;
   min-width: 0;
   box-shadow: var(--shadow-md);
}

/* Preview half — tabs + screen are ONE unit that fills the stage card:
   no inner card, no padding, no scroll. The website's own background fills
   any slack below the content (reads like a real browser viewport). */
.sa-stage-main {
   flex: 1 1 auto;
   min-width: 0;
   min-height: 0;
   display: flex;
   flex-direction: column;
   overflow: hidden;
}

/* Tab bar attached to the top of the preview, like the 6 tools */
.sa-stage-main .tool-tabs-nav {
   flex: 0 0 auto;
}

/* Canvas chrome: view tabs left; state + device segmented controls right */
.sa-canvas-chrome .sa-canvas-right {
   margin-left: auto;
   display: flex;
   align-items: center;
   gap: 0.5rem;
}
.sa-canvas-right .tool-device-toggle { margin-left: 0; }

/* Base host — used standalone on the Review board, where it IS a card */
.cv-host {
   width: 100%;
   max-width: 100%;
   margin: 0 auto;
   background: var(--surface-primary);
   border: 1px solid var(--border-subtle);
   border-radius: 14px;
   box-shadow: var(--shadow-md);
   overflow: hidden;
   transition: max-width var(--transition-normal), border-radius var(--transition-normal);
}

/* In the stage the host IS the card — fill it, drop the inner chrome */
.sa-stage-main .cv-host {
   flex: 1 1 auto;
   min-height: 0;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   background: transparent;
}
.sa-stage-main .cv-host iframe { height: 100%; display: block; }

/* Soft device bezel when previewing tablet / mobile inside the stage */
.sa-stage-main .cv-host[data-device="tablet"],
.sa-stage-main .cv-host[data-device="mobile"] {
   align-self: center;
   margin: 0.5rem auto;
   border: 6px solid var(--surface-secondary);
   border-radius: 26px;
   box-shadow: 0 18px 40px -14px rgba(15, 23, 42, 0.28);
}

/* ── Docked, collapsible health panel ─────────────────── */
.sa-healthdock {
   position: relative;
   flex: 0 0 224px;
   display: flex;
   flex-direction: column;
   min-height: 0;
   border-left: 1px solid var(--border-primary);
   background: var(--surface-primary);
   transition: flex-basis var(--transition-normal);
}
.sa-health-scroll {
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
   padding: 0.9rem 0.85rem;
}
.sa-health-toggle {
   position: absolute;
   top: 0.7rem;
   right: 0.7rem;
   z-index: 2;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 26px;
   height: 26px;
   border-radius: 7px;
   border: 1px solid var(--border-primary);
   background: var(--surface-primary);
   color: var(--text-muted);
   cursor: pointer;
   transition: background var(--transition-fast), color var(--transition-fast);
}
.sa-health-toggle:hover { background: var(--surface-hover); color: var(--text-primary); }
.sa-health-toggle-icon { transition: transform var(--transition-normal); }

/* Collapsed (the default) — dock shrinks to a slim, LABELLED rail that names the
   panel and shows the current step's score; clicking it expands. */
.sa-stage.is-health-collapsed .sa-healthdock { flex-basis: 46px; }
.sa-stage.is-health-collapsed .sa-health-scroll { display: none; }
.sa-stage.is-health-collapsed .sa-health-toggle { display: none; }

.sa-health-rail { display: none; }
.sa-stage.is-health-collapsed .sa-health-rail {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.55rem;
   width: 100%;
   height: 100%;
   padding: 0.85rem 0;
   border: 0;
   background: transparent;
   cursor: pointer;
   transition: background var(--transition-fast);
}
.sa-stage.is-health-collapsed .sa-health-rail:hover { background: var(--surface-hover); }
.sa-health-rail-score {
   font-size: 0.82rem;
   font-weight: 700;
   font-variant-numeric: tabular-nums;
   line-height: 1;
   color: var(--text-muted);
}
.sa-health-rail-score.hr-ok   { color: var(--success); }
.sa-health-rail-score.hr-warn { color: var(--warning); }
.sa-health-rail-score.hr-crit { color: var(--danger); }
.sa-health-rail-text {
   writing-mode: vertical-rl;
   transform: rotate(180deg);
   font-size: 0.72rem;
   font-weight: 600;
   letter-spacing: 0.09em;
   text-transform: uppercase;
   color: var(--text-secondary);
}
.sa-health-rail-icon { color: var(--text-muted); margin-top: auto; }
.sa-stage.is-health-collapsed .sa-health-rail:hover .sa-health-rail-text { color: var(--text-primary); }

/* ── Controls collapse-to-rail (like the standalone tools) ───────────── */
.sa-controls-toggle {
   position: absolute;
   top: 0.7rem;
   right: 0.7rem;
   z-index: 2;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 26px;
   height: 26px;
   border-radius: 7px;
   border: 1px solid var(--border-primary);
   background: var(--surface-primary);
   color: var(--text-muted);
   cursor: pointer;
   transition: background var(--transition-fast), color var(--transition-fast);
}
.sa-controls-toggle:hover { background: var(--surface-hover); color: var(--text-primary); }

/* Collapsed rail (expand affordance) — hidden until collapsed */
.sa-controls-rail {
   display: none;
   flex: 1 1 auto;        /* grows so the step nav can pin to the rail foot */
   flex-direction: column;
   align-items: center;
   gap: 0.7rem;
   width: 100%;
   padding: 0.9rem 0;
   border: 0;
   background: transparent;
   color: var(--text-muted);
   cursor: pointer;
   transition: color var(--transition-fast);
}
.sa-controls-rail:hover { color: var(--text-primary); }
.sa-controls-rail-text {
   writing-mode: vertical-rl;
   transform: rotate(180deg);
   font-size: 0.8rem;
   font-weight: 600;
   letter-spacing: 0.02em;
}

/* Collapsed state — controls card shrinks to a slim rail */
.studio-app.is-controls-collapsed .sa-workspace { grid-template-columns: 56px minmax(0, 1fr); }
.studio-app.is-controls-collapsed .sa-controls-body,
.studio-app.is-controls-collapsed .sa-controls-toggle { display: none; }
.studio-app.is-controls-collapsed .sa-controls-rail { display: flex; }

/* Collapsed step nav — icon-only buttons stacked (Next on top) at the rail foot */
.studio-app.is-controls-collapsed .sa-stepnav {
   flex-direction: column;
   align-items: center;
   gap: 0.4rem;
   padding: 0.6rem 0;
}
.studio-app.is-controls-collapsed .sa-stepnav .sa-nav-label { display: none; }
.studio-app.is-controls-collapsed .sa-stepnav .sa-nav-btn {
   flex: 0 0 auto;
   width: 36px;
   height: 36px;
   padding: 0;
}
.studio-app.is-controls-collapsed .sa-stepnav #sa-next { order: 1; }
.studio-app.is-controls-collapsed .sa-stepnav #sa-prev { order: 2; }

/* Zone placeholders (A1 — replaced in A2–A4) */
.sa-zone-ph {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   height: 100%;
   min-height: 180px;
   color: var(--text-muted);
   border: 1px dashed var(--border-primary);
   border-radius: 12px;
   padding: 1.5rem;
}
.sa-zone-ph-title { font-size: 0.95rem; font-weight: 600; color: var(--text-secondary); margin: 0 0 0.35rem; }
.sa-zone-ph-text  { font-size: 0.82rem; margin: 0; }

/* ── Step-change transition ───────────────────────────
   Panels are display-toggled per step; re-display restarts the animation,
   giving a soft fade/rise on every step change with zero JS. */
@keyframes sa-panel-in {
   from { opacity: 0; transform: translateY(6px); }
   to   { opacity: 1; transform: none; }
}
.sc-panel,
.hr-panel { animation: sa-panel-in 0.18s ease-out; }
@media (prefers-reduced-motion: reduce) {
   .sc-panel,
   .hr-panel { animation: none; }
}

/* ── Controls zone (StudioControls) ──────────────────── */

/* Sticky step header — keeps the step title (and the collapse chevron's
   landing zone) fixed while the controls scroll beneath it. Full-bleed
   background so content never collides with the floating chevron. */
.sc-head {
   position: sticky;
   top: 0;
   z-index: 1;   /* below the chevron (z-index 2), above the controls */
   margin: 0 -1.15rem 1rem;
   padding: 1.05rem 2.9rem 0.65rem 1.15rem;   /* right clears the chevron */
   background: var(--surface-primary);
   border-bottom: 1px solid transparent;
   transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
/* Scrolled — hairline + soft shadow so the header reads as a shelf */
.sa-controls-body.is-scrolled .sc-head {
   border-bottom-color: var(--border-subtle);
   box-shadow: 0 8px 12px -10px rgba(15, 23, 42, 0.18);
}
.sc-title {
   font-size: 1.05rem;
   font-weight: 700;
   color: var(--text-primary);
   margin: 0;
}

/* Sub-panel tabs for grouped steps (Type Scale | Font Pairing) */
.sc-subtabs {
   display: flex;
   gap: 2px;
   background: var(--surface-secondary);
   border-radius: 9px;
   padding: 3px;
   margin-bottom: 1rem;
}
.sc-subtab {
   flex: 1;
   font-size: 0.8rem;
   font-weight: 500;
   padding: 6px 8px;
   border: 0;
   border-radius: 7px;
   background: transparent;
   color: var(--text-muted);
   cursor: pointer;
}
.sc-subtab.is-active {
   background: var(--surface-primary);
   color: var(--text-primary);
   box-shadow: var(--shadow-sm);
}

.sc-review-note,
.sc-missing { font-size: 0.85rem; color: var(--text-muted); }

/* Lean color control */
.sc-color { display: flex; flex-direction: column; }
.sc-generate {
   background: var(--color-primary);
   color: #fff;
   border: 0;
   border-radius: 9px;
   padding: 0.65rem;
   font-size: 0.88rem;
   font-weight: 600;
   cursor: pointer;
   margin-bottom: 1rem;
}
.sc-generate:hover { background: var(--color-primary-hover); }
.sc-label {
   font-size: 0.7rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--text-muted);
   margin: 0 0 0.5rem;
}
.sc-seg {
   display: flex;
   gap: 2px;
   background: var(--surface-secondary);
   border-radius: 9px;
   padding: 3px;
   margin-bottom: 1rem;
   flex-wrap: wrap;
}
.sc-seg-btn {
   flex: 1 1 auto;
   font-size: 0.78rem;
   font-weight: 500;
   padding: 6px 8px;
   border: 0;
   border-radius: 7px;
   background: transparent;
   color: var(--text-muted);
   cursor: pointer;
   white-space: nowrap;
}
.sc-seg-btn.is-active {
   background: var(--surface-primary);
   color: var(--text-primary);
   box-shadow: var(--shadow-sm);
}
.sc-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-sw {
   width: 30px;
   height: 30px;
   border-radius: 7px;
   border: 1px solid var(--border-subtle);
}

/* ── Reused tool controls inside the studio inspector ──────────────────
   The standalone builders wrap their controls in their own card
   (.<tool>-controls-panel) + a header + a reset footer. The header/reset
   styling lives in tool-shell.css, which this app intentionally does NOT load.
   So: flatten the card (no card-in-card), hide the redundant tool header (the
   step title / sub-tab already labels it), align sections to the inspector's
   padding, and restyle the reset action. */

.sa-controls-body .fp-controls-panel,
.sa-controls-body .tb-controls-panel,
.sa-controls-body .sp-controls-panel,
.sa-controls-body .rd-controls-panel,
.sa-controls-body .sh-controls-panel {
   border: 0;
   border-radius: 0;
   padding: 0;
   background: transparent;
   box-shadow: none;
   overflow: visible;
}

.sa-controls-body .fp-panel-header,
.sa-controls-body .tb-panel-header,
.sa-controls-body .sp-panel-header,
.sa-controls-body .rd-panel-header,
.sa-controls-body .sh-panel-header {
   display: none;
}

/* Sections align to the inspector padding (no double indent); the first one
   sits flush under the sub-tab / title. */
.sa-controls-body .tool-section {
   padding-left: 0;
   padding-right: 0;
}
.sa-controls-body .tool-section:first-child { padding-top: 0; }

/* Reset action (its tool-shell.css styling isn't loaded in this app) */
.sa-controls-body .tool-reset-row {
   margin-top: 1rem;
   padding: 1rem 0 0;
   border-top: 0;
}
.sa-controls-body .tool-reset-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   width: 100%;
   padding: 0.6rem 0.9rem;
   border: 1px solid var(--border-primary);
   border-radius: 0.625rem;
   background: var(--surface-secondary);
   color: var(--text-secondary);
   font-size: 0.85rem;
   font-weight: 600;
   cursor: pointer;
   transition: background var(--transition-fast), color var(--transition-fast);
}
.sa-controls-body .tool-reset-btn:hover { background: var(--surface-hover); color: var(--text-primary); }

/* ── Color step: the embedded REAL palette controls (.pp-embed) ────────
   Reuses PalettePreview controls (controls-only) + the shared dropdown
   component. Fit to the inspector: full-width generate, stacked dropdowns,
   3-up swatch+lock cards (no hex/copy — not needed in the studio). */
.sa-controls-body .pp-embed {
   display: flex;
   flex-direction: column;
   gap: 0.9rem;   /* flex gap = reliable spacing (the generate btn has inline margin:0) */
}

/* Generate — full-width BRAND button (.tool-btn--primary uses --color-secondary) */
.sa-controls-body .pp-embed .pp-generate-btn {
   width: 100%;
   background: var(--color-primary);
   color: #fff;
}
.sa-controls-body .pp-embed .pp-generate-btn:hover { background: var(--color-primary-hover); }

/* Family / Personality / Mode — shared dropdown, stacked, opening downward */
.sa-controls-body .pp-embed-dds {
   display: flex;
   flex-direction: column;
   gap: 0.55rem;
}
.sa-controls-body .pp-embed-dds .tool-dropdown-card { width: 100%; }
.sa-controls-body .pp-embed .tool-dropdown-list {
   top: calc(100% + 6px);
   bottom: auto;
   max-height: 240px;
   overflow-y: auto;
}

/* Color cards — swatch fills the card; lock floats top-right on a frosted chip
   (no bottom bar). 3 per row. Self-contained (no palette-builder.css). */
.sa-controls-body .pp-embed .pp-color-cards-wrap {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0.5rem;
}
.sa-controls-body .pp-embed .pp-color-card {
   position: relative;
   min-width: 0;
   height: 60px;
   border-radius: 10px;
   overflow: hidden;
   border: 1px solid var(--border-subtle);
}
.sa-controls-body .pp-embed .pp-color-area {
   position: absolute;
   inset: 0;
   cursor: pointer;
}
.sa-controls-body .pp-embed .pp-color-input-card {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   border: 0;
   padding: 0;
   cursor: pointer;
}
.sa-controls-body .pp-embed .pp-color-hex,
.sa-controls-body .pp-embed .pp-color-copy { display: none; }
/* The old bottom bar becomes a floating top-right lock chip */
.sa-controls-body .pp-embed .pp-color-bottom {
   position: absolute;
   top: 4px;
   right: 4px;
   z-index: 2;
   padding: 0;
   border: 0;
   background: transparent;
   height: auto;
}
.sa-controls-body .pp-embed .pp-color-bottom-actions { display: flex; }
.sa-controls-body .pp-embed .pp-color-lock {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 20px;
   height: 20px;
   border: 0;
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.3);
   -webkit-backdrop-filter: blur(2px);
   backdrop-filter: blur(2px);
   color: #fff;
   font-size: 0.6rem;
   cursor: pointer;
   transition: background var(--transition-fast);
}
.sa-controls-body .pp-embed .pp-color-lock:hover { background: rgba(0, 0, 0, 0.5); }
.sa-controls-body .pp-embed .pp-color-lock.locked { background: var(--color-primary); color: #fff; }

/* Secondary actions (Try Another / Copy) */
.sa-controls-body .pp-embed-actions {
   display: flex;
   gap: 0.5rem;
}
.sa-controls-body .pp-embed-actions > * { flex: 1 1 0; }

/* Hide the embed's Light/Dark "Mode" dropdown (3rd control) — in the studio,
   dark is owned by the auto-derived + editable Dark-theme panel below, not by
   flipping the single palette. (Order in .pp-embed-dds: Family, Personality, Mode.) */
.sa-controls-body .pp-embed-dds > :nth-child(3) { display: none; }

/* ── Dark theme editor (Color step) ──────────────────── */
.sc-dark {
   margin-top: 1rem;
   padding-top: 1rem;
   border-top: 1px solid var(--border-subtle);
}
.sc-dark-head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 0.75rem;
   margin-bottom: 0.75rem;
}
.sc-dark-titles { display: flex; flex-direction: column; min-width: 0; }
.sc-dark-title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.sc-dark-sub { font-size: 0.74rem; color: var(--text-muted); margin-top: 0.15rem; line-height: 1.35; }
.sc-dark-reset {
   flex: 0 0 auto;
   font-size: 0.74rem;
   font-weight: 600;
   color: var(--color-primary);
   background: none;
   border: 0;
   padding: 0.2rem 0.1rem;
   cursor: pointer;
   white-space: nowrap;
}
.sc-dark-reset:hover { text-decoration: underline; }

/* Light/Dark preview toggle (moved here from the canvas toolbar) */
.sc-dark-preview {
   display: flex;
   align-items: center;
   gap: 0.6rem;
   margin-bottom: 0.75rem;
}
.sc-dark-preview-lab { font-size: 0.78rem; font-weight: 500; color: var(--text-secondary); }
.sc-dark-seg {
   display: inline-flex;
   background: var(--surface-secondary);
   border: 1px solid var(--border-subtle);
   border-radius: 9px;
   padding: 2px;
   gap: 2px;
}
.sc-dark-seg-btn {
   font: inherit;
   font-size: 0.78rem;
   font-weight: 600;
   color: var(--text-secondary);
   background: transparent;
   border: 0;
   border-radius: 7px;
   padding: 0.3rem 0.75rem;
   cursor: pointer;
   transition: background var(--transition-fast), color var(--transition-fast);
}
.sc-dark-seg-btn:hover { color: var(--text-primary); }
.sc-dark-seg-btn.is-active {
   background: var(--surface-primary);
   color: var(--text-primary);
   box-shadow: var(--shadow-sm);
}

.sc-dark-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0.5rem;
}
.sc-dark-cell {
   position: relative;
   display: flex;
   align-items: center;
   gap: 0.55rem;
   padding: 0.45rem 0.55rem;
   border: 1px solid var(--border-subtle);
   border-radius: 10px;
   background: var(--surface-secondary);
   cursor: pointer;
   min-width: 0;
}
.sc-dark-cell:hover { border-color: var(--border-secondary); }
.sc-dark-cell.is-edited { border-color: var(--color-primary); }
.sc-dark-sw {
   width: 24px;
   height: 24px;
   flex: 0 0 auto;
   border-radius: 7px;
   border: 1px solid var(--border-subtle);
}
/* The native color input covers the cell (invisible) so a click anywhere opens
   the picker; the swatch + label show the current value. */
.sc-dark-input {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   border: 0;
   padding: 0;
   cursor: pointer;
}
.sc-dark-lbl {
   font-size: 0.8rem;
   font-weight: 500;
   color: var(--text-secondary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.sc-dark-cell.is-edited .sc-dark-lbl { color: var(--text-primary); }

/* ── Health rail (StudioHealth) ──────────────────────── */

.hr-section + .hr-section {
   margin-top: 0.9rem;
   padding-top: 0.9rem;
   border-top: 1px solid var(--border-subtle);
}
.hr-title {
   font-size: 0.9rem;
   font-weight: 700;
   color: var(--text-primary);
   margin-bottom: 0.5rem;
}
.hr-ringwrap {
   position: relative;
   width: 104px;
   height: 104px;
   margin: 0 auto 0.3rem;
}
.hr-ring { width: 104px; height: 104px; transform: rotate(-90deg); }
.hr-ring-track { fill: none; stroke: var(--border-primary); stroke-width: 7; }
.hr-ring-prog {
   fill: none;
   stroke: var(--success);
   stroke-width: 7;
   stroke-linecap: round;
   transition: stroke-dashoffset var(--transition-normal), stroke var(--transition-fast);
}
.hr-ring-prog.hr-ok   { stroke: var(--success); }
.hr-ring-prog.hr-warn { stroke: var(--warning); }
.hr-ring-prog.hr-crit { stroke: var(--danger); }
.hr-ring-c {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}
.hr-score { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); line-height: 1; }
.hr-of { font-size: 0.68rem; color: var(--text-muted); }

.hr-overall {
   text-align: center;
   font-size: 0.82rem;
   font-weight: 600;
   margin-bottom: 0.55rem;
}
.hr-overall.hr-ok   { color: var(--success); }
.hr-overall.hr-warn { color: var(--warning); }
.hr-overall.hr-crit { color: var(--danger); }

.hr-rows { display: flex; flex-direction: column; gap: 0.3rem; }
.hr-subhead {
   font-size: 0.68rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--text-muted);
   margin-top: 0.35rem;
}
.hr-subhead:first-child { margin-top: 0; }
.hr-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
.hr-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.hr-dot.hr-ok   { background: var(--success); }
.hr-dot.hr-warn { background: var(--warning); }
.hr-dot.hr-crit { background: var(--danger); }
.hr-row-label { color: var(--text-secondary); font-weight: 500; }
.hr-row-detail { margin-left: auto; color: var(--text-muted); font-size: 0.75rem; text-align: right; }

.hr-note { font-size: 0.82rem; color: var(--text-muted); }

/* Suggestion card — appears under the checks when a section needs attention */
.hr-suggest {
   display: flex;
   gap: 0.5rem;
   margin-top: 0.8rem;
   padding: 0.6rem 0.7rem;
   border-radius: 10px;
   background: color-mix(in srgb, var(--warning) 11%, var(--surface-primary));
   border: 1px solid color-mix(in srgb, var(--warning) 26%, transparent);
}
.hr-suggest.hr-crit {
   background: color-mix(in srgb, var(--danger) 11%, var(--surface-primary));
   border-color: color-mix(in srgb, var(--danger) 26%, transparent);
}
.hr-suggest-icon { flex: 0 0 auto; color: var(--warning); line-height: 1.2; }
.hr-suggest.hr-crit .hr-suggest-icon { color: var(--danger); }
.hr-suggest-title { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); }
.hr-suggest-text { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.1rem; line-height: 1.4; }

/* One-click auto-fix inside the suggestion card */
.hr-fix-btn {
   display: inline-flex;
   align-items: center;
   margin-top: 0.55rem;
   padding: 0.35rem 0.75rem;
   border: 0;
   border-radius: 7px;
   background: var(--color-primary);
   color: #fff;
   font-size: 0.74rem;
   font-weight: 600;
   cursor: pointer;
   transition: background var(--transition-fast);
}
.hr-fix-btn:hover { background: var(--color-primary-hover); }

/* ── Review & Export ──────────────────────────────────────────────────────
   The Review step reuses the SAME two-column shell as every other step —
   nothing is torn down. The `.is-review` class on `.studio-app` swaps the
   contents: the left controls body becomes a read-only summary, and the stage
   swaps the live canvas for the export panel (with an Export | Preview switch).
   Because the shell survives, the pinned Prev button keeps working. */

/* LEFT — controls body out, summary in; Next hidden (last step). */
.studio-app.is-review .sa-controls-body,
.studio-app.is-review .sa-controls-toggle { display: none; }

/* Foot swaps Next → Download all (bundles every format into one .zip). Previous
   sizes to its content; Download all takes the remaining width as the primary,
   so its label never wraps to two lines. */
#sa-download-all { display: none; }
.studio-app.is-review #sa-next { display: none; }
.studio-app.is-review #sa-download-all { display: inline-flex; flex: 1 1 auto; }
.studio-app.is-review #sa-prev { flex: 0 0 auto; }

.sa-summary { display: none; }
.studio-app.is-review .sa-summary {
   display: block;
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
   padding: 1.15rem;
   scrollbar-width: thin;
   scrollbar-color: var(--border-secondary) transparent;
}
.sa-summary::-webkit-scrollbar { width: 6px; }
.sa-summary::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: 6px; }

.sm-eyebrow {
   font-size: 0.68rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--text-muted);
   margin: 0 0 0.85rem;
}

/* Overall health */
.sm-overall {
   display: flex;
   align-items: center;
   gap: 0.85rem;
   padding: 0.85rem 0.9rem;
   background: var(--surface-secondary);
   border: 1px solid var(--border-subtle);
   border-radius: 14px;
   margin-bottom: 0.85rem;
}
.sm-ringwrap { position: relative; width: 52px; height: 52px; flex: 0 0 auto; }
.sm-ring { width: 52px; height: 52px; transform: rotate(-90deg); }
.sm-ring-track { fill: none; stroke: var(--border-primary); stroke-width: 5; }
.sm-ring-prog { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset var(--transition-normal); }
.sm-ring-prog.hr-ok   { stroke: var(--success); }
.sm-ring-prog.hr-warn { stroke: var(--warning); }
.sm-ring-prog.hr-crit { stroke: var(--danger); }
.sm-ring-score {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.9rem;
   font-weight: 700;
   color: var(--text-primary);
}
.sm-overall-title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.sm-overall-sub { font-size: 0.78rem; font-weight: 600; margin: 0.12rem 0 0; color: var(--text-muted); }
.sm-overall-sub.hr-ok   { color: var(--success); }
.sm-overall-sub.hr-warn { color: var(--warning); }
.sm-overall-sub.hr-crit { color: var(--danger); }

/* Per-step scores — each row jumps back to that step. */
.sm-steps {
   display: flex;
   flex-direction: column;
   gap: 2px;
   padding: 4px;
   background: var(--surface-secondary);
   border: 1px solid var(--border-subtle);
   border-radius: 14px;
   margin-bottom: 0.85rem;
}
.sm-step {
   display: flex;
   align-items: center;
   gap: 0.55rem;
   width: 100%;
   text-align: left;
   padding: 0.5rem 0.6rem;
   border: 0;
   border-radius: 9px;
   background: transparent;
   font: inherit;
   color: var(--text-secondary);
   cursor: pointer;
   transition: background var(--transition-fast), color var(--transition-fast);
}
.sm-step:hover { background: var(--surface-hover); color: var(--text-primary); }
.sm-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.sm-dot.hr-ok   { background: var(--success); }
.sm-dot.hr-warn { background: var(--warning); }
.sm-dot.hr-crit { background: var(--danger); }
.sm-step-label { flex: 1 1 auto; font-size: 0.85rem; font-weight: 500; }
.sm-step-score { font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sm-step-caret { color: var(--text-muted); flex: 0 0 auto; }
.sm-step:hover .sm-step-caret { color: var(--color-primary); }

/* Palette + typography snapshot */
.sm-card {
   background: var(--surface-secondary);
   border: 1px solid var(--border-subtle);
   border-radius: 14px;
   padding: 0.8rem 0.9rem;
   margin-bottom: 0.85rem;
}
.sm-card:last-child { margin-bottom: 0; }
.sm-card-t {
   font-size: 0.66rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--text-muted);
   margin: 0 0 0.6rem;
}
.sm-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.sm-sw { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border-subtle); flex: 0 0 auto; }
.sm-type-primary {
   font-size: 1rem;
   font-weight: 700;
   color: var(--text-primary);
   margin: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.sm-sub { font-size: 0.76rem; color: var(--text-muted); margin: 0.3rem 0 0; }

/* RIGHT — stage content wrapper (holds the switch, canvas, and export). */
.sa-stage-content {
   flex: 1 1 auto;
   min-width: 0;
   min-height: 0;
   display: flex;
   flex-direction: column;
   overflow: hidden;
}

/* Export | Preview switch — shown only on the Review step. */
.sa-stage-switch { display: none; }
.studio-app.is-review .sa-stage-switch {
   display: flex;
   gap: 0.25rem;
   flex: 0 0 auto;
   padding: 0.55rem 0.7rem;
   border-bottom: 1px solid var(--border-subtle);
   background: var(--surface-primary);
}
.sa-seg-btn {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   padding: 0.45rem 0.9rem;
   border: 0;
   border-radius: 9px;
   background: transparent;
   color: var(--text-secondary);
   font-size: 0.85rem;
   font-weight: 600;
   cursor: pointer;
   transition: background var(--transition-fast), color var(--transition-fast);
}
.sa-seg-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.sa-seg-btn.is-active { background: var(--color-primary-soft); color: var(--color-primary); }
.sa-seg-btn svg { flex: 0 0 auto; }

/* Export panel mount — the default face of the stage on Review. */
.sa-export { display: none; }
.studio-app.is-review .sa-export {
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
   padding: 1.15rem;
   scrollbar-width: thin;
   scrollbar-color: var(--border-secondary) transparent;
}
.sa-export::-webkit-scrollbar { width: 6px; }
.sa-export::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: 6px; }

/* Pane toggle: Export hides the canvas; Preview hides the export.
   (Default to Export before JS sets data-pane.) */
.studio-app.is-review #sa-stage[data-pane="export"] .sa-stage-main,
.studio-app.is-review #sa-stage:not([data-pane]) .sa-stage-main { display: none; }
.studio-app.is-review #sa-stage[data-pane="export"] .sa-export,
.studio-app.is-review #sa-stage:not([data-pane]) .sa-export { display: block; }
.studio-app.is-review #sa-stage[data-pane="preview"] .sa-export { display: none; }

/* Health dock is redundant on Review (health lives in the left summary). */
.studio-app.is-review .sa-healthdock { display: none; }

/* ── Step navigation buttons (foot of the health rail) ─── */

.sa-nav-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.4rem;
   white-space: nowrap;   /* keep labels (e.g. "Download all") on one line */
   font-size: 0.88rem;
   font-weight: 600;
   padding: 0.55rem 1.05rem;
   border-radius: 9px;
   border: 1px solid var(--border-primary);
   background: var(--surface-primary);
   color: var(--text-secondary);
   cursor: pointer;
   transition: background var(--transition-fast), border-color var(--transition-fast);
}
.sa-nav-btn:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-secondary); }
.sa-nav-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.sa-nav-btn--primary {
   background: var(--color-primary);
   border-color: var(--color-primary);
   color: #fff;
}
.sa-nav-btn--primary:hover:not(:disabled) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

/* ── Responsive ──────────────────────────────────────── */

@media (max-width: 1100px) {
   .sa-workspace { grid-template-columns: 260px minmax(0, 1fr); }
   /* Fold the health dock on tablet — the preview takes the full stage.
      (Health stays on the Review step and on desktop.) The step nav lives
      under the controls, so navigation is unaffected. */
   .sa-healthdock { display: none; }
}

@media (max-width: 760px) {
   .studio-app { height: auto; min-height: 100vh; overflow: visible; }
   .sa-workspace {
      grid-template-columns: 1fr;
      grid-template-rows: auto;   /* stacked rows size to content on mobile */
      padding: 0.75rem;
      gap: 0.75rem;
      overflow: visible;
   }
   .sa-controls-body { overflow: visible; }
   .sa-stage { min-height: 78vh; }   /* give the filling preview a height when stacked */
   .sa-brand-text { display: none; }
}