/* Shared Meridian skin for the existing workspace engine. This file changes
   presentation only: links, form names, action attributes and API paths stay
   owned by their existing pages. */
.trips-ui.meridian-page {
  color: var(--color-text);
  background-color: var(--color-neutral-300);
  background-image: var(--page-art);
  font-family: var(--font-body);
}
.trips-ui.meridian-page .ws-main { width: min(calc(100% - 64px), 1344px); margin: 0 auto; padding: 34px 0 72px; }
.trips-ui.meridian-page .ws-hero { min-height: 0; color: var(--color-text); background: var(--sheet) !important; border-bottom: var(--rule) solid var(--rule-color); box-shadow: none; }
.trips-ui.meridian-page .ws-hero__inner { width: min(calc(100% - 64px), 1344px); min-height: 170px; margin: auto; padding: 32px 0 28px; }
.trips-ui.meridian-page .ws-hero__eyebrow { color: var(--color-accent-700); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.trips-ui.meridian-page .ws-hero h1 { color: var(--color-text); font: 700 clamp(42px, 5vw, 72px)/.9 var(--font-display); letter-spacing: var(--heading-track); text-shadow: none; text-transform: var(--heading-case); }
.trips-ui.meridian-page .ws-hero__facts { color: var(--color-neutral-700); }
.trips-ui.meridian-page .ws-nav { border-top: var(--rule) solid var(--rule-soft); border-bottom: 0; color: var(--color-text); background: var(--sheet); }
.trips-ui.meridian-page .ws-nav__scroll { width: min(calc(100% - 64px), 1344px); margin: auto; }
.trips-ui.meridian-page .ws-nav__link { min-height: 54px; border-radius: 0; color: var(--color-neutral-700); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.trips-ui.meridian-page .ws-nav__link:hover,
.trips-ui.meridian-page .ws-nav__link.is-active { color: var(--color-text); background: var(--tint); box-shadow: inset 0 -4px 0 var(--color-accent); }
.trips-ui.meridian-page .ws-tools { border-top: var(--rule) solid var(--rule-soft); }
.trips-ui.meridian-page .ws-tools__summary { color: var(--color-neutral-700); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.trips-ui.meridian-page .ws-tools__summary:hover { color: var(--color-text); }
.trips-ui.meridian-page .ws-tools__link { color: var(--color-neutral-700); border-radius: var(--radius-ctl); }
.trips-ui.meridian-page .ws-tools__link:hover,
.trips-ui.meridian-page .ws-tools__link.is-active { color: var(--color-text); background: var(--tint); }
.trips-ui.meridian-page .ws-flow { color: var(--color-text); background: var(--tint); border-bottom: var(--rule) solid var(--rule-color); }
.trips-ui.meridian-page .ws-flow__where strong { color: var(--color-accent-700); }
.trips-ui.meridian-page .ws-flow__where span { color: var(--color-neutral-700); }
.trips-ui.meridian-page .ws-flow__inner { width: min(calc(100% - 64px), 1344px); margin: auto; }
.trips-ui.meridian-page .ws-flow__next { border-radius: var(--radius-card); color: var(--color-text); background: var(--sheet); border: var(--rule) solid var(--rule-color); box-shadow: none; }
.trips-ui.meridian-page .ws-flow__next-tag,
.trips-ui.meridian-page .ws-flow__next-go { color: var(--color-accent-700); }
.trips-ui.meridian-page .ws-progress__dot { border-color: var(--rule-color); color: var(--color-text); background: var(--sheet); }
.trips-ui.meridian-page .ws-progress__step.is-done .ws-progress__dot,
.trips-ui.meridian-page .ws-progress__step.is-current .ws-progress__dot { color: var(--select-ink); background: var(--select-bg); border-color: var(--select-edge); }
.trips-ui.meridian-page .ws-progress__label { color: var(--color-neutral-700); }
.trips-ui.meridian-page .page-head { padding-bottom: 26px; border-bottom: var(--rule) solid var(--rule-color); }
.trips-ui.meridian-page .page-head h2,
.trips-ui.meridian-page .page-head h1 { color: var(--color-text); font: 700 clamp(42px, 5vw, 68px)/.9 var(--font-display); letter-spacing: var(--heading-track); text-transform: var(--heading-case); }
.trips-ui.meridian-page .page-head p { color: var(--color-neutral-800); }
.trips-ui.meridian-page .panel,
.trips-ui.meridian-page .card,
.trips-ui.meridian-page .ui-modal,
.trips-ui.meridian-page .glass-panel,
.trips-ui.meridian-page .smart-trip,
.trips-ui.meridian-page .alert { border: var(--rule) solid var(--rule-color); border-radius: var(--radius-card); color: var(--color-text); background: var(--sheet); box-shadow: var(--shadow-sm); }
.trips-ui.meridian-page .panel h1,
.trips-ui.meridian-page .panel h2,
.trips-ui.meridian-page .panel h3,
.trips-ui.meridian-page .card h2,
.trips-ui.meridian-page .card h3 { color: var(--color-text); font-family: var(--font-display); text-transform: var(--heading-case); }
.trips-ui.meridian-page .muted,
.trips-ui.meridian-page .panel > p,
.trips-ui.meridian-page .card > p,
.trips-ui.meridian-page .form-hint { color: var(--color-neutral-700); }
.trips-ui.meridian-page .btn { border-radius: var(--radius-ctl); box-shadow: none; }
.trips-ui.meridian-page .btn--primary { border-color: var(--role-action); color: var(--role-action-ink); background: var(--role-action); box-shadow: var(--btn-glow); }
.trips-ui.meridian-page .btn--soft,
.trips-ui.meridian-page .btn--outline,
.trips-ui.meridian-page .btn--ghost { border: var(--rule) solid var(--rule-color); color: var(--color-text); background: transparent; }
.trips-ui.meridian-page .btn:hover:not(:disabled) { transform: translateY(-1px); }
.trips-ui.meridian-page input,
.trips-ui.meridian-page select,
.trips-ui.meridian-page textarea { border-color: var(--rule-color); border-radius: var(--radius-ctl); color: var(--color-text); background: var(--sheet); box-shadow: none; }
.trips-ui.meridian-page input:focus,
.trips-ui.meridian-page select:focus,
.trips-ui.meridian-page textarea:focus { border-color: var(--color-accent); outline: 3px solid color-mix(in srgb, var(--color-accent) 22%, transparent); box-shadow: none; }
.trips-ui.meridian-page table { color: var(--color-text); background: var(--sheet); }
.trips-ui.meridian-page th { color: var(--color-neutral-700); background: var(--tint); border-color: var(--rule-color); }
.trips-ui.meridian-page td { border-color: var(--rule-soft); }
.trips-ui.meridian-page .badge { border-radius: var(--radius-ctl); }
.trips-ui.meridian-page .empty-state { border: var(--rule) solid var(--rule-color); border-radius: var(--radius-card); color: var(--color-text); background: var(--sheet); }

@media (max-width: 760px) {
  html { overflow-x: clip; }
  .trips-ui.meridian-page { overflow-x: clip; }
  .trips-ui.meridian-page .ws-nav { width: 100%; min-width: 0; max-width: 100vw; overflow: hidden; }
  .trips-ui.meridian-page .ws-main { width: 100%; padding: 24px 16px 88px; }
  .trips-ui.meridian-page .ws-hero__inner { width: 100%; min-height: 0; padding: 23px 16px; }
  .trips-ui.meridian-page .ws-hero h1 { font-size: 46px; }
  .trips-ui.meridian-page .ws-nav__scroll { width: 100%; max-width: 100%; min-width: 0; padding-inline: 8px; overflow-x: auto; contain: inline-size paint; }
  .trips-ui.meridian-page .ws-nav__link { min-height: 50px; padding-inline: 4px; font-size: 10px; }
  .trips-ui.meridian-page .ws-tools { width: 100%; min-width: 0; padding-inline: 16px; }
  .trips-ui.meridian-page .ws-tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trips-ui.meridian-page .ws-flow { width: 100%; min-width: 0; max-width: 100vw; overflow: hidden; }
  .trips-ui.meridian-page .ws-flow__inner { width: 100%; min-width: 0; max-width: 100%; }
  .trips-ui.meridian-page .ws-progress { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; contain: inline-size paint; }
  .trips-ui.meridian-page .page-head { align-items: stretch; }
  .trips-ui.meridian-page .page-head h2,
  .trips-ui.meridian-page .page-head h1 { font-size: 44px; }
  .trips-ui.meridian-page .page-head__actions,
  .trips-ui.meridian-page .page-head__actions .btn { width: 100%; }
}

/* Sticky journey nav (trips-ui.css) needs a surface solid enough to read over
   whatever page content has scrolled beneath it. --sheet is a near-transparent
   film meant to sit on the page background, not carry text on its own once it
   is the thing being scrolled under; --color-neutral-300 is each theme's own
   opaque page ground, so this stays correct across every theme without
   hand-picking a colour per skin. */
@media (max-width: 720px) {
  .trips-ui.meridian-page:not([data-page="journey"]) .ws-nav {
    background: color-mix(in srgb, var(--color-neutral-300) 96%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .trips-ui.meridian-page .btn { transition: none; }
}

/* Phase 4 surfaces in the Meridian skin. */
.trips-ui.meridian-page .trip-state,
.trips-ui.meridian-page .trip-facts__item,
.trips-ui.meridian-page .trip-agreement,
.trips-ui.meridian-page .ideas-explainer > div,
.trips-ui.meridian-page .trip-watch > summary { border: var(--rule) solid var(--rule-color); border-radius: var(--radius-card); color: var(--color-text); background: var(--sheet); box-shadow: none; }
.trips-ui.meridian-page .trip-state__where { color: var(--color-accent-700); }
.trips-ui.meridian-page .trip-state__do-label,
.trips-ui.meridian-page .trip-state__do-text,
.trips-ui.meridian-page .trip-state__escape,
.trips-ui.meridian-page .trip-facts__item span,
.trips-ui.meridian-page .trip-facts__item small,
.trips-ui.meridian-page .ideas-explainer p,
.trips-ui.meridian-page .trip-state__nudge p,
.trips-ui.meridian-page .trip-agreement__copy p { color: var(--color-neutral-700); }
.trips-ui.meridian-page .trip-state__steps a { border: var(--rule) solid var(--rule-color); border-radius: var(--radius-ctl); }
.trips-ui.meridian-page .trip-state__dot { border-color: var(--rule-color); }
.trips-ui.meridian-page .trip-state__steps .is-done .trip-state__dot,
.trips-ui.meridian-page .trip-state__steps .is-current .trip-state__dot { color: var(--select-ink); background: var(--select-bg); border-color: var(--select-edge); }
.trips-ui.meridian-page .trip-state__steps .is-current a { background: var(--tint); border-color: var(--select-edge); }
.trips-ui.meridian-page .trip-state__nudge { border: var(--rule) solid var(--rule-color); border-radius: var(--radius-card); background: var(--tint); }
.trips-ui.meridian-page .trip-agreement__tag { border-radius: var(--radius-ctl); background: var(--tint); color: var(--color-accent-700); }
.trips-ui.meridian-page .go-now__slot,
.trips-ui.meridian-page .go-aside > summary,
.trips-ui.meridian-page .invite-what,
.trips-ui.meridian-page .invite-ways { border: var(--rule) solid var(--rule-color); border-radius: var(--radius-card); color: var(--color-text); background: var(--sheet); }
.trips-ui.meridian-page .go-now__slot.is-now { background: var(--tint); border-color: var(--select-edge); }
.trips-ui.meridian-page .go-now__heading,
.trips-ui.meridian-page .go-now__when,
.trips-ui.meridian-page .invite-what li span,
.trips-ui.meridian-page .invite-what__note,
.trips-ui.meridian-page .invite-ways__grid p { color: var(--color-neutral-700); }
.trips-ui.meridian-page .go-now__slot.is-now .go-now__heading { color: var(--color-accent-700); }
.trips-ui.meridian-page .go-now__slot.is-now .go-now__when { color: var(--color-text); }
.trips-ui.meridian-page .pilot-ask { border: var(--rule) solid var(--rule-color); border-radius: var(--radius-card); color: var(--color-text); background: var(--tint); }
.trips-ui.meridian-page .pilot-ask__tag { color: var(--color-accent-700); }
.trips-ui.meridian-page .pilot-ask__intro p,
.trips-ui.meridian-page .pilot-ask__comment small,
.trips-ui.meridian-page .pilot-ask__done p { color: var(--color-neutral-700); }
.trips-ui.meridian-page .pilot-ask__choices label { border: var(--rule) solid var(--rule-color); border-radius: var(--radius-ctl); background: var(--sheet); }
.trips-ui.meridian-page .pilot-ask__choices label:has(input:checked) { border-color: var(--select-edge); background: var(--tint); }