/* ============================================================
   Backyard Studio 4.0 — polish layer (loads last)
   Loaded last. Override-only: delete this file + its <link> to
   revert every change in this layer.
   ============================================================ */

html, body { background: #dde2da; }
.stage-wrap { background: #cdd3ca; }

/* ---------- Type floor: nothing informative below ~10px ---------- */
.eyebrow { font-size: calc(10px * var(--bs-font-scale, 1)); letter-spacing: .1em; }
.tool-button span { font-size: calc(10px * var(--bs-font-scale, 1)); }
.save-state { font-size: calc(10.5px * var(--bs-font-scale, 1)); }
.brand span { font-size: calc(11px * var(--bs-font-scale, 1)); }

.ds-step-copy strong { font-size: calc(11.5px * var(--bs-font-scale, 1)); }
.ds-step-copy small,
.ds-status-row small,
.ds-next-action small,
.ds-section-head small { font-size: calc(10px * var(--bs-font-scale, 1)); }
.ds-step-time,
.ds-status-row > em,
.ds-session-meter span,
.ds-score span { font-size: calc(9.5px * var(--bs-font-scale, 1)); }
.ds-drawer-tab { font-size: calc(11px * var(--bs-font-scale, 1)); padding: 8px 11px; }
.ds-drawer-header p,
.ds-hero-card p { font-size: calc(11px * var(--bs-font-scale, 1)); }
.ds-check-card { font-size: calc(10.5px * var(--bs-font-scale, 1)); }
.ds-status-row strong { font-size: calc(11px * var(--bs-font-scale, 1)); }
.panel-tab { font-size: calc(11.5px * var(--bs-font-scale, 1)); }
.button { font-size: calc(12.5px * var(--bs-font-scale, 1)); }
.mini-button { font-size: calc(11.5px * var(--bs-font-scale, 1)); }

/* v3 pilot layer floors */
.v3-role-card p { font-size: calc(10.5px * var(--v3-font)); }
.v3-role-card strong { font-size: calc(14px * var(--v3-font)); }
.v3-role-card em,
.v3-trust-row,
.v3-resume span { font-size: calc(9.5px * var(--v3-font)); }
.v3-resume strong { font-size: calc(11.5px * var(--v3-font)); }
.v3-property-card > span { font-size: calc(9.5px * var(--v3-font)); }
.v3-property-proof b { font-size: calc(9.5px * var(--v3-font)); }

/* ---------- Display face: brand moments only ---------- */
.v3-welcome-copy h1,
.v3-pro-hero h1,
.v3-step-head h1,
.ds-hero-card h3,
.ds-drawer-header h2 {
  font-family: var(--display-font);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.v3-welcome-copy h1 { line-height: 1.06; }
.ds-hero-card h3,
.ds-drawer-header h2 { font-size: calc(19px * var(--bs-font-scale, 1)); }

/* ---------- Radius + surface consistency ---------- */
.button, .mini-button, .icon-button, .chip-toggle, .zoom-label { border-radius: var(--radius-sm); }
.ds-card, .ds-score, .ds-status-row, .ds-workflow-step { border-radius: var(--radius); }
.ds-hero-card { border-radius: var(--radius-lg); }
.tool-button { border-radius: var(--radius-sm); }

.ds-card { box-shadow: 0 1px 2px rgba(15, 39, 31, .04), 0 4px 14px rgba(15, 39, 31, .05); }
.ds-hero-card {
  background: linear-gradient(140deg, #143a2f 0%, #1e5a48 78%, #256a54 100%);
  box-shadow: 0 2px 4px rgba(12, 34, 28, .18), 0 18px 44px rgba(12, 34, 28, .22);
}

/* ---------- Primary action discipline ---------- */
.button.primary {
  background: var(--accent);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 4px 12px rgba(211,255,130,.35);
  font-weight: 700;
}
.button.primary:hover { filter: brightness(.97); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 16px rgba(211,255,130,.45); }

/* ---------- Focus visibility ---------- */
:where(button, [role="button"], input, select, textarea, a, [tabindex]):focus-visible {
  outline: 2px solid #2f7a60;
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.topbar :where(button, select):focus-visible { outline-color: var(--accent); }

/* ---------- Micro-polish ---------- */
.ds-workflow-step { transition: border-color .14s ease, box-shadow .14s ease, background .14s ease; }
.ds-workflow-step.active { box-shadow: inset 0 0 0 1.5px var(--ds-forest-2), 0 4px 12px rgba(24, 55, 47, .10); }
.ds-drawer { border-radius: 16px 0 0 0; }
.tool-button.active { box-shadow: 0 3px 8px rgba(24,55,47,.22); }
.v3-role-card { transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }

* { scrollbar-color: #b9c2ba transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #b9c2ba; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: #97a49b; }

@media (prefers-reduced-motion: reduce) {
  .ds-workflow-step, .button, .mini-button, .icon-button, .v3-role-card { transition: none; }
}

/* ============================================================
   4.0 Launch mode — product scope control
   product-config.js sets launchMode; index.html mirrors it to
   <body data-launch>. "core" ships the 60-minute decision loop
   and keeps Creator Studio surfaces out of the interface.
   ============================================================ */
body[data-launch="core"] #creatorStudioButton,
body[data-launch="core"] [data-creator-launch],
body[data-launch="core"] .creator-launch-button { display: none !important; }

/* ---------- 4.0 Chrome quieting: one workspace, fewer boxes ---------- */
.panel-tabs { background: transparent; }
.stage-toolbar { background: var(--panel); }
.toolrail { background: var(--panel); }
.ds-workflow-bar { background: var(--panel); box-shadow: none; }
.ds-workflow-step { border-color: transparent; background: transparent; }
.ds-workflow-step:hover { background: white; border-color: #dfe5e0; }
.ds-workflow-step.active { background: white; }
.ds-workflow-step.complete { background: transparent; border-color: transparent; }
.ds-workflow-step.complete:hover { background: #f2f8f4; }

/* ---------- 5.0 Conversion: paywall price anchor ---------- */
.v3-anchor { display: block; margin: 8px 0 12px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--brand-2); font-size: calc(10px * var(--v3-font, 1)); font-weight: 650; line-height: 1.45; }

/* ---------- 5.1 Waitlist (payments-later launch) ---------- */
.v3-waitlist-backdrop { display: grid; place-items: center; padding: 24px; z-index: 9999; }
.v3-waitlist { position: relative; width: min(460px, 100%); background: var(--paper); border-radius: 16px; padding: 30px 28px 26px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.v3-waitlist .eyebrow { color: var(--brand-2); }
.v3-waitlist h2 { font-family: var(--display-font); font-weight: 600; font-size: calc(21px * var(--v3-font, 1)); line-height: 1.15; margin: 8px 0 8px; letter-spacing: -.01em; }
.v3-waitlist p { margin: 0 0 16px; color: var(--muted); font-size: calc(13px * var(--v3-font, 1)); line-height: 1.55; }
.v3-wl-field { display: block; margin: 0 0 12px; }
.v3-wl-field span { display: block; font-size: calc(10px * var(--v3-font, 1)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.v3-wl-field input { width: 100%; padding: 12px 13px; border: 1.5px solid var(--line); border-radius: 10px; font: 500 15px/1.2 var(--body, inherit); background: white; }
.v3-wl-field input:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 1px; border-color: var(--brand-2); }
.v3-wl-invalid { border-color: var(--danger) !important; }
.v3-waitlist .v3-primary.large { width: 100%; justify-content: center; }
.v3-waitlist em { display: block; margin-top: 10px; text-align: center; font-size: calc(10.5px * var(--v3-font, 1)); color: var(--muted); font-style: normal; }
.v3-waitlist .v3-close { position: absolute; top: 12px; right: 14px; }