/* ============================================================
   product-edit-polish.css  ·  task t-009 (+ t-012 fix)  ·  LOADS LAST
   ------------------------------------------------------------
   Cross-cutting polish on TOP of the section partials:
     • a single radius / shadow / motion scale so every section
       reads as one family
     • microinteractions (button hover/active, smooth section +
       preview transitions, live-preview pulse)
     • prefers-reduced-motion safe (local guard on top of
       colors_and_type.css's global reset)

   t-012 FIX (integration):
     • REMOVED the .pe-field:focus-within glow — t-008's fields.css
       owns the field focus ring (.pe-field__input:focus-visible +
       .pe-field--focus + .pe-field__affix:focus-within, terra-100
       glow). Polish no longer touches .pe-field at all → no double ring.
     • SETTLED the radius drift: --radius-card is redefined to the
       16px family (--radius-lg) scoped on .pe-shell, so base sections,
       #pe-preview-card AND the inner partials (variants/photos cards
       that read var(--radius-card)) all resolve to one value.
     • RE-SCOPED button/action-bar polish: .pe-actionbar is a fixed
       full-bleed footer that lives OUTSIDE .pe-shell (product-edit.html
       l.255, sibling of .pe-shell l.84-234), so the old
       `.pe-shell .pe-actionbar #pe-save` selectors never matched.
       Now targeted directly. The bar stays square (full-bleed) — only
       cards get the radius.

   GUARDRAILS:
     • Does NOT redefine the shared .pe-field component (t-008 owns it).
     • Does NOT own macro layout / grid / sticky (t-003) or section
       internals (t-004..t-007). Refines, never fights.
     • Tokens come from colors_and_type.css (linked on the page,
       product-edit.html l.16). Fallbacks inlined for resilience.
   ============================================================ */

/* ── Polish-scoped scale ──────────────────────────────────────
   Scoped to .pe-shell. Redefining --radius-card here cascades to
   every descendant partial (variants/photos cards inherit it), so
   the whole editor lands on the 16px card family — no 16-vs-20 drift. */
.pe-shell {
  --radius-card:     var(--radius-lg, 16px);   /* t-012: unify inner partials to 16px */
  --pe-radius-card:  var(--radius-lg, 16px);
  --pe-radius-pill:  var(--radius-pill, 9999px);
  --pe-shadow:       var(--shadow-warm-sm, 0 2px 8px -2px rgb(26 20 18 / 0.06));
  --pe-shadow-raise: var(--shadow-warm-md, 0 10px 28px -10px rgb(26 20 18 / 0.12));
  --pe-ease:         var(--ease-soft, cubic-bezier(.16, 1, .3, 1));
  --pe-ease-out:     var(--ease-out, cubic-bezier(.4, 0, .2, 1));
  --pe-dur:          var(--dur-fast, 200ms);
}

/* ── Surface family: sections + sticky preview card ───────────
   Both live inside .pe-shell. Unify card radius + warm shadow so the
   two panes read as one family. (Large containers are owned
   structurally by t-001/t-003; polish only harmonises the finish.) */
.pe-shell .pe-section,
.pe-shell #pe-preview-card {
  border-radius: var(--pe-radius-card);
  box-shadow: var(--pe-shadow);
  transition: box-shadow var(--pe-dur) var(--pe-ease),
              transform var(--pe-dur) var(--pe-ease);
}

/* A section gently lifts while you work in it. */
.pe-shell .pe-section:focus-within { box-shadow: var(--pe-shadow-raise); }

/* Sticky preview earns a touch more depth so it reads as floating. */
.pe-shell #pe-preview-card { box-shadow: var(--pe-shadow-raise); }

/* ── Section header typography (Fraunces voice) ───────────────*/
.pe-shell .pe-section__head h2 {
  font-family: var(--font-display, 'Fraunces', ui-serif, Georgia, serif);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.pe-shell .pe-section__head > p,
.pe-shell .pe-section__head .pe-section__sub {
  text-wrap: pretty;
}

/* Soft rhythm between stacked sections (additive margin only — the
   grid gap is owned by t-003). */
.pe-shell .pe-form > .pe-section + .pe-section {
  margin-top: var(--space-5, 20px);
}

/* ── Field focus ring: intentionally NOT styled here ──────────
   t-008's product-edit-fields.css owns the field focus + error rings
   (.pe-field__input:focus-visible / .pe-field--focus /
   .pe-field__affix:focus-within). Polish must not add a second ring. */

/* ── Buttons: save bar + generic .pe-btn ──────────────────────
   NOTE: .pe-actionbar + #pe-save live OUTSIDE .pe-shell (fixed footer),
   so these are targeted directly (NOT under .pe-shell). t-008 owns the
   #pe-save idle/saving/success/error state visuals; this is just the
   shared motion finish. */
#pe-save,
.pe-btn {
  transition: background-color var(--dur-fast, 200ms) var(--ease-out, cubic-bezier(.4, 0, .2, 1)),
              border-color var(--dur-fast, 200ms) var(--ease-out, cubic-bezier(.4, 0, .2, 1)),
              box-shadow var(--dur-fast, 200ms) var(--ease-soft, cubic-bezier(.16, 1, .3, 1)),
              transform var(--dur-fast, 200ms) var(--ease-soft, cubic-bezier(.16, 1, .3, 1));
}
#pe-save:hover:not(:disabled),
.pe-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-warm-md, 0 10px 28px -10px rgb(26 20 18 / 0.12));
}
#pe-save:active:not(:disabled),
.pe-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-warm-sm, 0 2px 8px -2px rgb(26 20 18 / 0.06));
}
#pe-save:disabled,
.pe-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Action bar: full-bleed fixed footer — add soft depth only, NO card
   radius (it spans edge-to-edge; rounding would float oddly). */
.pe-actionbar {
  box-shadow: var(--shadow-warm-md, 0 10px 28px -10px rgb(26 20 18 / 0.12));
  transition: box-shadow var(--dur-fast, 200ms) var(--ease-soft, cubic-bezier(.16, 1, .3, 1));
}

/* ── Live preview "just updated" cue ──────────────────────────
   Opt-in: if t-002 toggles `.is-updated` on #pe-preview-card after a
   render, this pulses. Absent class → no-op. */
@keyframes pe-preview-pulse {
  0%   { box-shadow: var(--pe-shadow-raise); }
  40%  { box-shadow: 0 0 0 2px rgba(184, 69, 31, 0.14), var(--pe-shadow-raise); }
  100% { box-shadow: var(--pe-shadow-raise); }
}
.pe-shell #pe-preview-card.is-updated {
  animation: pe-preview-pulse 600ms var(--pe-ease) 1;
}

/* Category / variant pills land on a consistent pill radius. */
.pe-shell .pe-preview .pe-chip,
.pe-shell .pe-preview .pe-variant-pill {
  border-radius: var(--pe-radius-pill);
}

/* ── Selection (small brand touch) ────────────────────────────*/
.pe-shell ::selection { background: var(--accent, #B8451F); color: var(--canvas, #FBF7F1); }

/* ── Preview collapse toggle (2026-06-10) ─────────────────────
   Visual finish only — layout.css owns visibility (≤1023px) and the
   44px touch target; product-edit.html toggles .pe-preview--collapsed.
   Quiet full-width pill in the brand voice, chevron flips when folded. */
.pe-preview .pe-preview__toggle {
  gap: 0.45rem;
  width: 100%;
  padding: 0.55rem 0.9rem;
  margin-bottom: 0.6rem;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink, #1A1412);
  background: #ffffff;
  border: 1px solid var(--border, rgba(26, 20, 18, 0.10));
  border-radius: var(--pe-radius-pill, 9999px);
  box-shadow: var(--pe-shadow, 0 2px 8px -2px rgb(26 20 18 / 0.06));
  cursor: pointer;
  transition: border-color var(--pe-dur, 200ms) var(--pe-ease-out, ease),
              background var(--pe-dur, 200ms) var(--pe-ease-out, ease);
}
.pe-preview .pe-preview__toggle:hover {
  border-color: var(--terra-500, #B8451F);
  background: var(--terra-50, #FBF3EC);
}
.pe-preview .pe-preview__toggle:focus-visible {
  outline: 2px solid var(--terra-500, #B8451F);
  outline-offset: 2px;
}
.pe-preview .pe-preview__toggle svg {
  flex: 0 0 auto;
  transition: transform var(--pe-dur, 200ms) var(--pe-ease-out, ease);
}
.pe-preview--collapsed .pe-preview__toggle svg { transform: rotate(180deg); }

/* ── Reduced-motion: local guard ──────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  .pe-shell .pe-section,
  .pe-shell #pe-preview-card,
  #pe-save,
  .pe-btn,
  .pe-actionbar {
    transition: none;
  }
  #pe-save:hover:not(:disabled),
  .pe-btn:hover:not(:disabled),
  #pe-save:active:not(:disabled),
  .pe-btn:active:not(:disabled) {
    transform: none;
  }
  .pe-shell #pe-preview-card.is-updated {
    animation: none;
  }
  .pe-preview .pe-preview__toggle,
  .pe-preview .pe-preview__toggle svg {
    transition: none;
  }
}