/* Milestone 1 (Safety Baseline and CSS Isolation): every selector in
   this file is now scoped beneath .emt-journey-studio and every
   var() reference renamed to the --emt-js-* prefix (see
   styles/tokens.css) — no behavior/appearance change, only isolation
   from a host WordPress page's own styles. */

/* Page structure: dev panel, two-column shell, sticky widget, boundary. */

/* Discreet developer-only control — fixed, out of normal flow, so it
   cannot affect page layout or read as site chrome. */
.emt-journey-studio .dev-panel {
  position: fixed;
  left: var(--emt-js-space-2);
  bottom: var(--emt-js-space-2);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 220px;
  padding: 0.6rem 0.75rem;
  background: rgba(36, 53, 44, 0.94);
  color: #ffffff;
  border-radius: var(--emt-js-radius-md);
  box-shadow: var(--emt-js-shadow-card-elevated);
  font-size: 0.75rem;
}

.emt-journey-studio .dev-panel__label {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.65rem;
  opacity: 0.75;
}

.emt-journey-studio .dev-panel__buttons {
  display: flex;
  gap: 0.4rem;
}

.emt-journey-studio .dev-panel__button {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #ffffff;
  padding: 0.3rem 0.6rem;
  border-radius: var(--emt-js-radius-sm);
  cursor: pointer;
  font-size: 0.75rem;
}

.emt-journey-studio .dev-panel__button[aria-pressed="true"] {
  background: #ffffff;
  color: var(--emt-js-color-green-strong);
  border-color: #ffffff;
}

/* Phase 4.2 Stage 1 (Runnable Private Builder Foundation): the one
   dev-panel control that's a real <a href> rather than a <button> (it
   needs a real navigation, not a click handler — see index.html's own
   comment on it). Flex items are already "blockified" per spec, so
   .dev-panel__button--full's width:100%/text-align:center already
   apply correctly without an explicit display change here — this
   rule only overrides the browser's default anchor underline, which
   neither .dev-panel__button rule above happens to touch. */
.emt-journey-studio a.dev-panel__button {
  text-decoration: none;
}

.emt-journey-studio .dev-panel__checkbox {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  opacity: 0.9;
}

/* Full-width variant for standalone dev actions (not part of the
   Private/Celebration button pair), e.g. the journey reset button. */
.emt-journey-studio .dev-panel__button--full {
  width: 100%;
  text-align: center;
}

.emt-journey-studio .dev-panel__status {
  margin: 0;
  opacity: 0.85;
  line-height: 1.4;
}

.emt-journey-studio .site-header {
  padding: var(--emt-js-space-4) var(--emt-js-space-3) var(--emt-js-space-2);
  max-width: var(--emt-js-content-max-width);
  margin-inline: auto;
}

.emt-journey-studio .site-header__eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--emt-js-text-eyebrow);
  color: var(--emt-js-color-ink-muted);
}

.emt-journey-studio .studio-layout {
  max-width: var(--emt-js-content-max-width);
  margin-inline: auto;
  padding: 0 var(--emt-js-space-3) var(--emt-js-space-6);
}

.emt-journey-studio .studio-layout__columns {
  display: grid;
  grid-template-columns: 72fr 28fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.emt-journey-studio .studio-layout__workspace {
  min-width: 0;
}

/* Milestone 3B Stage 14 (Legacy Builder Removal): removed
   .inspiration and #journey-studio — the legacy .inspiration placeholder
   and #journey-studio panel, both deleted from index.html in Stage 12. */

/* Sticky right widget */

.emt-journey-studio .journey-widget {
  position: sticky;
  top: var(--emt-js-space-4);
}

.emt-journey-studio .journey-widget__card {
  background: var(--emt-js-color-surface-quiet);
  border-radius: var(--emt-js-radius-panel);
  box-shadow: var(--emt-js-shadow-widget);
  padding: var(--emt-js-space-5) var(--emt-js-space-3);
  text-align: center;
}

.emt-journey-studio .journey-widget__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--emt-js-text-eyebrow);
  color: var(--emt-js-color-ink-muted);
  margin-bottom: var(--emt-js-space-2);
}

.emt-journey-studio .journey-widget__prompt {
  font-family: var(--emt-js-font-display);
  font-size: var(--emt-js-text-display-sm);
  margin-bottom: var(--emt-js-space-3);
}

/* Visual treatment for this button now comes from .btn / .btn--primary
   (styles/components.css); only its widget-specific layout stays here. */
.emt-journey-studio .journey-widget__cta {
  width: 100%;
}

/* Fades the summary content when its value changes (see
   context-selection.js) so the companion feels like it notices a
   choice, rather than silently rewriting itself. */
/* Neutral boundary marking the end of the page — deliberately not a
   footer. Its only job is to give the sticky widget a point in the
   document flow to release before. No branding, no visible copy. */
.emt-journey-studio .page-boundary {
  height: 6rem;
  border-top: 1px dashed var(--emt-js-color-border);
}

/* Demo context toggling (driven by data-context on <html>) */

:root[data-context="private"] .context-label--celebration {
  display: none;
}

:root[data-context="celebration"] .context-label--private {
  display: none;
}

/* Journey widget internal states (Task 2) */

.emt-journey-studio .journey-widget__body {
  position: relative;
}

/* Brochure cover (Editorial Milestone) — the closed, pre-opening state
   of the widget, restyled to resemble a wrapped premium brochure
   rather than a flat card. Restyles only the launcher state via
   :has() — the only state [data-widget-state] has left, since the
   legacy "active" summary state was removed in Stage 13.
   Layered background = a warm ivory-to-terracotta wash (palette
   already established elsewhere in this app, not a new hue) plus a
   very faint diagonal hairline grain standing in for paper texture —
   at ~1.5% opacity it can never reduce text contrast. The embossed
   edge is a pair of inset highlight/shadow lines (light top-left, soft
   dark bottom-right) layered under the existing outer widget shadow,
   the same technique real print-brochure mockups use for a pressed
   border rather than a printed one. */
/* Shares .journey-booklet__frame's own frame language (cover as the
   same physical object) — same 20px radius, same resting shadow scale
   (--emt-js-shadow-card-elevated), and now the exact same height (760px,
   matching the frame's own min-height precisely) so the closed cover
   reads as the unopened form of the exact same brochure — a front
   cover, not a smaller, unrelated launcher card. Narrower while closed
   (it still lives in the 28fr sidebar column) is expected and
   intentional; only the height needs to match exactly. */
.emt-journey-studio .journey-widget__card:has([data-widget-state="launcher"]:not([hidden])) {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 760px;
  border-radius: 20px;
  background: repeating-linear-gradient(
      115deg,
      rgba(43, 38, 33, 0.015) 0px,
      rgba(43, 38, 33, 0.015) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(165deg, #fffdf9 0%, var(--emt-js-color-surface-quiet) 55%, #f6ecdd 100%);
  border: 1px solid var(--emt-js-color-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(43, 38, 33, 0.08),
    inset 0 0 0 1px rgba(156, 78, 44, 0.12), var(--emt-js-shadow-card-elevated);
  padding-top: var(--emt-js-space-5);
  padding-bottom: var(--emt-js-space-6);
  transition: box-shadow var(--emt-js-motion-standard) var(--emt-js-ease-standard),
    transform var(--emt-js-motion-standard) var(--emt-js-ease-standard);
}

/* Spine cue on the cover's left edge — echoes .journey-brochure-scene__cover's
   transform-origin: left center (the same edge the opening motion
   hinges from), so the closed cover visibly hints at where it's about
   to swing open from. Restrained: a thin, low-opacity accent, not a
   printed line. */
.emt-journey-studio .journey-widget__card:has([data-widget-state="launcher"]:not([hidden]))::before {
  content: "";
  position: absolute;
  top: var(--emt-js-space-4);
  bottom: var(--emt-js-space-4);
  left: 0;
  width: 3px;
  border-radius: var(--emt-js-radius-sm);
  background: rgba(156, 78, 44, 0.18);
}

/* Launcher content fills the remaining height (below the eyebrow
   masthead) and centers vertically within it — the CTA reads as the
   cover's one deliberate invitation, sitting at the cover's true
   vertical center rather than biased toward either edge. */
.emt-journey-studio .journey-widget__card:has([data-widget-state="launcher"]:not([hidden]))
  .journey-widget__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.emt-journey-studio .journey-widget__card:has([data-widget-state="launcher"]:not([hidden]))
  [data-widget-state="launcher"] {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Subtle hover: a gentle lift, echoing how a physical brochure shifts
   when you reach for it — never the only cue anything is interactive
   (the CTA itself remains a real, always-operable button). */
.emt-journey-studio .journey-widget__card:has([data-widget-state="launcher"]:not([hidden])):hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(43, 38, 33, 0.08),
    inset 0 0 0 1px rgba(156, 78, 44, 0.18), var(--emt-js-shadow-card-elevated),
    0 14px 30px rgba(43, 38, 33, 0.1);
}

.emt-journey-studio .journey-widget__cover-heading {
  font-family: var(--emt-js-font-display);
  font-weight: 500;
  font-size: var(--emt-js-text-display-sm);
  color: var(--emt-js-color-ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: var(--emt-js-space-4) 0 var(--emt-js-space-5);
  padding-top: var(--emt-js-space-4);
  position: relative;
}

/* Restrained ornamental rule — decorative only, never sits behind
   text, so it never affects contrast. */
.emt-journey-studio .journey-widget__cover-heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 2px;
  background: var(--emt-js-color-terracotta-strong);
}

/* Premium CTA: same .btn--primary treatment as every other primary
   action in the app (reused, not reinvented), just given a little more
   room and letter-spacing to read as the brochure's one deliberate
   invitation rather than a generic form-submit button. */
.emt-journey-studio .journey-widget__cta {
  padding-top: 1.05rem;
  padding-bottom: 1.05rem;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

/* Milestone 3B Stage 14 (Legacy Builder Removal): removed
   .journey-widget__status and .journey-widget__group-label — generated
   only by widgetSummaryMarkup(), removed in Stage 13. */

/* Responsive: single column below the stack breakpoint */

@media (max-width: 900px) {
  .emt-journey-studio .studio-layout__columns {
    grid-template-columns: 1fr;
  }

  /* Phase 3.2 (Mobile Journey Studio Launcher): the sticky brochure
     cover card is a considered desktop sidebar moment — full brochure
     height, hinge-ready — that has no good mobile translation; shrunk
     to a plain compact card it just reads as a compressed desktop
     widget wasting scroll space, exactly the problem this milestone
     exists to fix. Mobile gets its own dedicated entry point instead
     (.emt-journey-studio-mobile-launcher, the edge tab — see
     styles/journey-booklet.css), not this card at a smaller size, so
     it's hidden outright rather than resized. This also removes the
     now-unreachable "compact cover" sub-rules the previous, smaller-only
     treatment needed (position: static; min-height: 0 on the
     [data-widget-state="launcher"] card) — dead once the whole aside is
     display:none. */
  .emt-journey-studio .journey-widget {
    display: none;
  }
}