/* 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. */

/* Milestone 3B Stage 14 (Legacy Builder Removal): removed
   .studio-header, .studio-phases, and .studio-main — the legacy
   #journey-studio header, phase nav, and question mount, all deleted
   from index.html in Stage 12. */

/* Question area (shared by the booklet mount) */

/* The dominant text on this screen: one clear, inviting question.
   Weight comes from size and space, not boldness. */
.emt-journey-studio .studio-question__heading {
  font-size: var(--emt-js-text-display-md);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: var(--emt-js-space-3);
  max-width: 22ch;
}

.emt-journey-studio .studio-question__support {
  font-size: var(--emt-js-text-support);
  color: var(--emt-js-color-ink-muted);
  max-width: 58ch;
  margin-bottom: 0;
}

/* Option cards */

.emt-journey-studio .option-grid {
  display: grid;
  gap: var(--emt-js-space-3);
  margin-top: var(--emt-js-space-6);
}

.emt-journey-studio .option-grid--private {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.emt-journey-studio .option-grid--celebration {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.emt-journey-studio .option-card {
  position: relative;
}

.emt-journey-studio .option-card__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.emt-journey-studio .option-card__input:focus-visible {
  outline: none;
}

/* Typography is the card's identity — no icon, no floating checkbox.
   Selection is shown by a quiet accent on the leading edge plus a
   faint background tint, echoing a chosen chapter in a contents
   list rather than a checked form field. */
.emt-journey-studio .option-card__label {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--emt-js-space-2);
  height: 100%;
  padding: var(--emt-js-space-4);
  background: var(--emt-js-color-surface);
  border: 1px solid var(--emt-js-color-border);
  border-left: 3px solid transparent;
  border-radius: var(--emt-js-radius-lg);
  box-shadow: var(--emt-js-shadow-card);
  cursor: pointer;
  transition: border-color var(--emt-js-motion-standard) var(--emt-js-ease-standard),
    background-color var(--emt-js-motion-standard) var(--emt-js-ease-standard),
    box-shadow var(--emt-js-motion-standard) var(--emt-js-ease-standard);
}

.emt-journey-studio .option-card__label:hover {
  border-left-color: var(--emt-js-color-terracotta);
  box-shadow: var(--emt-js-shadow-card-elevated);
}

.emt-journey-studio .option-card__input:focus-visible + .option-card__label {
  outline: 3px solid var(--emt-js-color-focus);
  outline-offset: 3px;
}

.emt-journey-studio .option-card__input:checked + .option-card__label {
  border-left-color: var(--emt-js-color-terracotta-strong);
  background: var(--emt-js-color-bg-alt);
  box-shadow: var(--emt-js-shadow-selected);
}

.emt-journey-studio .option-card__title {
  font-family: var(--emt-js-font-display);
  font-size: var(--emt-js-text-card-title);
  letter-spacing: -0.01em;
  color: var(--emt-js-color-ink);
}

.emt-journey-studio .option-card__copy {
  color: var(--emt-js-color-ink-muted);
  font-size: var(--emt-js-text-card-copy);
  line-height: 1.6;
}

/* Group details (Question 2): steppers + child age selectors */

.emt-journey-studio .group-details {
  display: flex;
  flex-direction: column;
  gap: var(--emt-js-space-4);
  margin-top: var(--emt-js-space-5);
  max-width: 32rem;
}

.emt-journey-studio .stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--emt-js-space-3);
  padding-bottom: var(--emt-js-space-3);
  border-bottom: 1px solid var(--emt-js-color-bg-alt);
}

.emt-journey-studio .stepper__label {
  font-family: var(--emt-js-font-display);
  font-size: var(--emt-js-text-card-title);
  color: var(--emt-js-color-ink);
}

.emt-journey-studio .stepper__control {
  display: flex;
  align-items: center;
  gap: var(--emt-js-space-3);
}

.emt-journey-studio .stepper__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--emt-js-color-border);
  background: var(--emt-js-color-surface);
  color: var(--emt-js-color-terracotta-strong);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--emt-js-motion-standard) var(--emt-js-ease-standard),
    border-color var(--emt-js-motion-standard) var(--emt-js-ease-standard);
}

.emt-journey-studio .stepper__button:hover:not(:disabled) {
  background: var(--emt-js-color-bg-alt);
  border-color: var(--emt-js-color-terracotta);
}

.emt-journey-studio .stepper__button:disabled {
  color: var(--emt-js-color-disabled-text);
  border-color: var(--emt-js-color-disabled-bg);
  cursor: not-allowed;
}

.emt-journey-studio .stepper__value {
  min-width: 2ch;
  text-align: center;
  font-family: var(--emt-js-font-display);
  font-size: var(--emt-js-text-card-title);
  color: var(--emt-js-color-ink);
}

.emt-journey-studio .child-ages {
  display: flex;
  flex-direction: column;
  gap: var(--emt-js-space-3);
}

.emt-journey-studio .child-age {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--emt-js-space-3);
  transition: opacity var(--emt-js-motion-standard) var(--emt-js-ease-standard),
    transform var(--emt-js-motion-standard) var(--emt-js-ease-standard);
}

.emt-journey-studio .child-age__label {
  color: var(--emt-js-color-ink-muted);
  font-size: var(--emt-js-text-support);
}

.emt-journey-studio .child-age__select {
  min-height: 44px;
  padding: 0.6rem 2rem 0.6rem 1rem;
  border: 1px solid var(--emt-js-color-border);
  border-radius: var(--emt-js-radius-md);
  background: var(--emt-js-color-surface);
  color: var(--emt-js-color-ink);
  font-family: var(--emt-js-font-body);
  font-size: var(--emt-js-text-button);
  cursor: pointer;
}

/* Labeled native-field stack: introduced for Travel Timing's (Question
   3) conditional follow-ups, reused as-is by Contact (Question 7).
   Reuses the same input treatment established for child age selects. */

.emt-journey-studio .timing-fields {
  display: flex;
  flex-direction: column;
  gap: var(--emt-js-space-3);
  margin-top: var(--emt-js-space-4);
  max-width: 24rem;
}

/* Country Code + WhatsApp Number share a row when space permits,
   wrapping to a stack on narrow viewports without a manual breakpoint. */
.emt-journey-studio .timing-fields--row {
  flex-direction: row;
  flex-wrap: wrap;
  max-width: none;
}

.emt-journey-studio .timing-fields--row .timing-field {
  flex: 1 1 10rem;
  /* Booklet UX-Polish milestone: without this, a flex item's default
     min-width:auto lets its content dictate a floor — Contact's own
     Country Code <select> (the only current user of this row modifier)
     sizes to its longest option text (country names run long),
     overflowing this field and, at narrow booklet/mobile widths,
     getting silently clipped by .journey-booklet__frame's
     overflow:hidden. Travel Timing's own follow-up fields all use
     plain .timing-fields (a column stack), never this --row modifier,
     so this fix is scoped to Contact in practice. */
  min-width: 0;
}

.emt-journey-studio .timing-field {
  display: flex;
  flex-direction: column;
  gap: var(--emt-js-space-1);
}

.emt-journey-studio .timing-field label {
  color: var(--emt-js-color-ink-muted);
  font-size: var(--emt-js-text-support);
}

.emt-journey-studio .timing-field input[type="date"],
.emt-journey-studio .timing-field input[type="text"],
.emt-journey-studio .timing-field input[type="email"],
.emt-journey-studio .timing-field input[type="tel"],
.emt-journey-studio .timing-field select {
  min-height: 44px;
  padding: 0.6rem 1rem;
  border: 1px solid var(--emt-js-color-border);
  border-radius: var(--emt-js-radius-md);
  background: var(--emt-js-color-surface);
  color: var(--emt-js-color-ink);
  font-family: var(--emt-js-font-body);
  font-size: var(--emt-js-text-button);
}

.emt-journey-studio .timing-field input:invalid[aria-invalid="true"] {
  border-color: var(--emt-js-color-terracotta);
}

/* Contact (Question 7): reset the fieldset/legend UA defaults so the
   Email/WhatsApp choice reads like the rest of the option-card
   groups, not a boxed form section. */
.emt-journey-studio .contact-method {
  margin-top: var(--emt-js-space-5);
  padding: 0;
  border: none;
}

.emt-journey-studio .contact-method legend {
  padding: 0;
  margin-bottom: var(--emt-js-space-2);
}

/* The legend already sits directly above the cards — .option-grid's
   default margin-top (tuned for sitting under a full question heading)
   would otherwise leave an oversized gap here. */
.emt-journey-studio .contact-method .option-grid {
  margin-top: 0;
}

/* Generic sub-section grouping within one question — first used by
   Experiences (Question 5) for its two presentation-only carousel
   groups, reused by Stay Experience (Question 6) for its optional
   preferences section. */

.emt-journey-studio .studio-question__group {
  margin-top: var(--emt-js-space-5);
}

.emt-journey-studio .studio-question__subheading {
  font-size: var(--emt-js-text-card-title);
  font-weight: 500;
  color: var(--emt-js-color-ink);
  margin-bottom: 0;
}

/* Generic label + native-control field, reusable anywhere a screen
   needs a single free-text answer (see Special Wishes, Question 8). */

.emt-journey-studio .studio-field {
  display: flex;
  flex-direction: column;
  gap: var(--emt-js-space-1);
  margin-top: var(--emt-js-space-5);
  max-width: 36rem;
}

.emt-journey-studio .studio-field label {
  color: var(--emt-js-color-ink-muted);
  font-size: var(--emt-js-text-support);
}

.emt-journey-studio .studio-field textarea {
  padding: 0.75rem 1rem;
  border: 1px solid var(--emt-js-color-border);
  border-radius: var(--emt-js-radius-md);
  background: var(--emt-js-color-surface);
  color: var(--emt-js-color-ink);
  font-family: var(--emt-js-font-body);
  font-size: var(--emt-js-text-button);
  resize: vertical;
}

/* Stay Experience (Question 6): optional secondary preferences reveal
   softly once a primary style is chosen (see stay-experience.js's
   revealPreferencesSoftly) — the transition is neutralised globally
   under prefers-reduced-motion by base.css, so no JS branch is needed
   here. Compact rows, not another carousel — these are supporting
   preferences, not the main emotional choice. */

.emt-journey-studio .stay-preferences {
  transition: opacity var(--emt-js-motion-standard) var(--emt-js-ease-standard),
    transform var(--emt-js-motion-standard) var(--emt-js-ease-standard);
}

.emt-journey-studio .stay-preferences__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--emt-js-space-2);
  margin-top: var(--emt-js-space-3);
}

.emt-journey-studio .stay-preference {
  display: flex;
  align-items: center;
  gap: var(--emt-js-space-2);
  min-height: 44px;
  padding: 0.6rem 1rem;
  border: 1px solid var(--emt-js-color-border);
  border-radius: var(--emt-js-radius-md);
  background: var(--emt-js-color-surface);
  transition: border-color var(--emt-js-motion-standard) var(--emt-js-ease-standard),
    background-color var(--emt-js-motion-standard) var(--emt-js-ease-standard);
}

.emt-journey-studio .stay-preference:has(.stay-preference__input:checked) {
  border-color: var(--emt-js-color-terracotta);
  background: var(--emt-js-color-bg-alt);
}

.emt-journey-studio .stay-preference__input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--emt-js-color-terracotta-strong);
}

.emt-journey-studio .stay-preference__label {
  color: var(--emt-js-color-ink);
  font-size: var(--emt-js-text-card-copy);
  cursor: pointer;
}

/* Wedding Details (Celebration branch): optional wedding touches reuse
   the exact same compact checkbox-card treatment and reveal-softly
   behavior as Stay Experience's preferences section — same visual
   language under Wedding-specific class names, not a new pattern. */

.emt-journey-studio .wedding-touches {
  transition: opacity var(--emt-js-motion-standard) var(--emt-js-ease-standard),
    transform var(--emt-js-motion-standard) var(--emt-js-ease-standard);
}

.emt-journey-studio .wedding-touches__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--emt-js-space-2);
  margin-top: var(--emt-js-space-3);
}

.emt-journey-studio .wedding-touch {
  display: flex;
  align-items: center;
  gap: var(--emt-js-space-2);
  min-height: 44px;
  padding: 0.6rem 1rem;
  border: 1px solid var(--emt-js-color-border);
  border-radius: var(--emt-js-radius-md);
  background: var(--emt-js-color-surface);
  transition: border-color var(--emt-js-motion-standard) var(--emt-js-ease-standard),
    background-color var(--emt-js-motion-standard) var(--emt-js-ease-standard);
}

.emt-journey-studio .wedding-touch:has(.wedding-touch__input:checked) {
  border-color: var(--emt-js-color-terracotta);
  background: var(--emt-js-color-bg-alt);
}

.emt-journey-studio .wedding-touch__input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--emt-js-color-terracotta-strong);
}

.emt-journey-studio .wedding-touch__label {
  color: var(--emt-js-color-ink);
  font-size: var(--emt-js-text-card-copy);
  cursor: pointer;
}

/* Milestone 3B Stage 14 (Legacy Builder Removal): removed
   .studio-footer (legacy #journey-studio's own footer nav) and
   .journey-widget__change (the [data-flow-change] button removed in
   Stage 13) — both dead. */

/* Review (Question 9): stacked sections with a subtle divider between
   them, not a dense table or a dashboard of cards — the detailed
   counterpart to the compact right sidebar, not a duplicate of it. */

.emt-journey-studio .review-section {
  padding: var(--emt-js-space-4) 0;
  border-bottom: 1px solid var(--emt-js-color-border);
}

.emt-journey-studio .review-section:first-of-type {
  padding-top: 0;
}

.emt-journey-studio .review-section:last-of-type {
  border-bottom: none;
}

.emt-journey-studio .review-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--emt-js-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--emt-js-space-2);
}

.emt-journey-studio .review-section__heading {
  font-size: var(--emt-js-text-card-title);
  font-weight: 500;
  color: var(--emt-js-color-ink);
  margin: 0;
}

.emt-journey-studio .review-section__edit-group {
  display: flex;
  gap: var(--emt-js-space-3);
  flex-wrap: wrap;
}

.emt-journey-studio .review-section__value {
  color: var(--emt-js-color-ink);
  font-size: var(--emt-js-text-card-copy);
  line-height: 1.6;
  margin: 0 0 var(--emt-js-space-1);
}

.emt-journey-studio .review-section__value--muted {
  color: var(--emt-js-color-ink-muted);
}

.emt-journey-studio .review-section__value--multiline {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.emt-journey-studio .review-section__value--wrap {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Restrained — reuses the terracotta accent rather than introducing a
   separate danger/red palette, consistent with the rest of the app's
   colour vocabulary. Text carries the meaning; colour reinforces it. */
.emt-journey-studio .review-error {
  border: 1px solid var(--emt-js-color-terracotta);
  background: var(--emt-js-color-bg-alt);
  border-radius: var(--emt-js-radius-md);
  padding: var(--emt-js-space-3);
  margin-bottom: var(--emt-js-space-4);
}

.emt-journey-studio .review-error__message {
  color: var(--emt-js-color-ink);
  margin: 0 0 var(--emt-js-space-2);
}

/* Phase 4.15B: the required Terms & Conditions / Privacy Policy
   acknowledgement — last thing on Review, above the shared footer's own
   Send Journey action. A real, native checkbox (not a styled div) so
   keyboard/screen-reader operation, native :checked state, and the
   label's own click-to-toggle behavior all come for free.
   Consent-refinement milestone: the required-but-unmet state is now
   communicated by .review-consent__error below, an inline field-level
   message beside the checkbox itself — not the screen-level
   .review-error box, which sat at the *top* of Review while this
   checkbox lives at the bottom, leaving a traveller looking at a large
   warning with no visible connection to what it referred to. */
.emt-journey-studio .review-consent {
  padding-top: var(--emt-js-space-4);
}

.emt-journey-studio .review-consent__label {
  display: flex;
  align-items: flex-start;
  gap: var(--emt-js-space-2);
  cursor: pointer;
}

.emt-journey-studio .review-consent__checkbox {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0.15em 0 0;
  cursor: pointer;
}

.emt-journey-studio .review-consent__checkbox:focus-visible {
  outline: 3px solid var(--emt-js-color-focus);
  outline-offset: 2px;
}

.emt-journey-studio .review-consent__text {
  font-size: var(--emt-js-text-card-copy);
  color: var(--emt-js-color-ink);
  line-height: 1.5;
}

.emt-journey-studio .review-consent__text a {
  color: var(--emt-js-color-terracotta-strong);
  text-decoration: underline;
}

.emt-journey-studio .review-consent__text a:hover,
.emt-journey-studio .review-consent__text a:focus-visible {
  color: var(--emt-js-color-terracotta-deep);
}

/* Consent-refinement milestone: the field-level counterpart to the
   screen-level .review-error above — restrained on purpose (no border,
   no background panel, no icon), matching this app's existing "text
   carries the meaning, colour reinforces it" vocabulary. Indented to
   align under the label text rather than the checkbox, so it reads as
   belonging to the sentence above it, not as a separate block. Hidden
   by default via the native `hidden` attribute (toggled from
   review.js's showConsentError()/clearConsentError(), never CSS
   alone) — no [hidden] override needed, matching every other native
   `hidden` usage already in this codebase. */
.emt-journey-studio .review-consent__error {
  margin: var(--emt-js-space-2) 0 0;
  padding-left: calc(20px + var(--emt-js-space-2));
  color: var(--emt-js-color-terracotta-strong);
  font-size: var(--emt-js-text-card-copy);
  line-height: 1.4;
}

/* Success / Error screens: an in-content action row, since neither
   screen's actions map to a single shared Back/Continue pair — the
   shared footer is hidden entirely on both (see updateBookletFooter). */
.emt-journey-studio .studio-question__actions {
  display: flex;
  gap: var(--emt-js-space-3);
  flex-wrap: wrap;
  margin-top: var(--emt-js-space-5);
}

.emt-journey-studio .studio-question__note {
  margin-top: var(--emt-js-space-4);
  color: var(--emt-js-color-ink-muted);
  font-size: var(--emt-js-text-eyebrow);
}