/* ================================================================
   EaseAway · Editorial Polish
   --------------------------------------------------------------
   Loaded AFTER easeaway-polish.css — overrides only the regions
   touched by the trip_planner editorial redesign:
     · destination scroller (horizontal rail of all 26 chips)
     · inline-editable sentence (replaces the 5-input config bar)
     · day-cluster itinerary canvas with margin annotations
     · subtle desktop budget bar / sticky mobile HUD
     · welcome-back / save-status / post-trip-review restyle
   No new selectors are invented for elements that don't already
   exist in trip_planner.html.
   ================================================================ */

/* ---------- 0. Tokens (additive only — base tokens come from polish.css) */
:root{
  --ea-cream-deep:#f3ecd9;
  --ea-paper-warm:#fffcf7;
  --ea-rule-hair:rgba(232,220,197,0.8);
  --ea-rule-soft:rgba(232,220,197,0.5);
  --ea-clay:#5a4a3a;
  --ea-dust-amber:#c89e4d;
  --ea-terracotta:#e8734a;
  --ea-forest-soft:#2d4a33;
  --ea-ink:#0f1c10;
  --ea-ease-editorial:cubic-bezier(0.4,0,0.2,1);
}

/* ---------- 1. Page-level paper tone */
body.ea-paper-bg{
  background:var(--ea-cream,#faf7f2);
  background-image:none; /* kill the diamond pattern from polish base */
}

/* ---------- 2. Old dark-navy "dest-picker" → editorial cream rail */
.dest-picker{
  background:var(--ea-paper-warm) !important;
  padding:24px 40px 18px !important;
  border-bottom:1px solid var(--ea-rule-hair);
}
.dest-picker-inner{max-width:1180px;margin:0 auto}
.dest-picker h2{
  font-family:'Fraunces',Georgia,serif !important;
  font-weight:700 !important;
  font-size:28px !important;
  letter-spacing:-0.015em;
  color:var(--ea-forest,#1b2e1f) !important;
  margin-bottom:4px !important;
}
.dest-picker h2::before{
  content:'A field guide for the family weekend';
  display:block;
  font-family:'Inter',sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ea-dust-amber);
  margin-bottom:6px;
}
.dest-picker p{
  font-family:'Fraunces',Georgia,serif !important;
  font-style:italic;
  font-size:14px !important;
  color:var(--ea-clay) !important;
  margin-bottom:16px !important;
}

/* Horizontal scroller (was a 6-col grid) */
.dest-cards{
  display:flex !important;
  grid-template-columns:none !important;
  gap:10px !important;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  padding:4px 4px 14px;
  border-bottom:1px solid var(--ea-rule-hair);
  scrollbar-width:thin;
  scrollbar-color:var(--ea-dust-amber) transparent;
}
.dest-cards::-webkit-scrollbar{height:6px}
.dest-cards::-webkit-scrollbar-thumb{background:var(--ea-dust-amber);border-radius:3px}

/* Each card → editorial chip */
.dest-card{
  flex:0 0 auto !important;
  background:rgba(232,220,197,0.22) !important;
  border:1px solid var(--ea-rule-hair) !important;
  border-radius:99px !important;
  padding:9px 18px !important;
  text-align:left !important;
  scroll-snap-align:start;
  transition:background 0.2s var(--ea-ease-editorial), border-color 0.2s var(--ea-ease-editorial), transform 0.2s var(--ea-ease-editorial);
  display:flex !important;
  flex-direction:column !important;
  gap:1px;
  min-width:auto !important;
}
.dest-card:hover{
  background:rgba(232,220,197,0.4) !important;
  border-color:var(--ea-dust-amber) !important;
  transform:none !important;
}
.dest-card.active{
  background:var(--ea-forest,#1b2e1f) !important;
  border-color:var(--ea-forest,#1b2e1f) !important;
}
.dest-card .dc-name{
  font-family:'Fraunces',Georgia,serif !important;
  font-weight:600 !important;
  font-size:14px !important;
  color:var(--ea-forest-soft) !important;
  letter-spacing:-0.005em;
  margin:0 !important;
}
.dest-card.active .dc-name{color:#faf7f2 !important}
.dest-card .dc-drive{
  font-family:'Inter',sans-serif !important;
  font-size:9px !important;
  font-weight:600 !important;
  letter-spacing:0.08em;
  color:var(--ea-dust-amber) !important;
  text-transform:uppercase;
  margin:0 !important;
}
.dest-card.active .dc-drive{color:#e6c989 !important}
.dest-card .dc-vibe{display:none !important}  /* vibe text was for grid card, not chip */

/* ---------- 3. Inline-editable sentence (replaces config-bar visuals) */
/* The wrapper #configBar stays, the .config-inner stays, the <select>s
   and <input type="date"> stay (kept off-screen for native a11y + form
   semantics). We OVERLAY a sentence-styled span row on top via ::before
   pseudo-content. Approach: hide the original controls, render sentence
   + chips through a sibling .ea-trip-sentence wrapper that shares the
   same .config-bar ancestor. The trip_planner.html markup adds that
   wrapper next to .config-inner. */

.config-bar{
  background:var(--ea-paper-warm) !important;
  border-bottom:1px solid var(--ea-rule-hair) !important;
  padding:0 40px !important;
  position:static !important;
  box-shadow:none !important;
}
.config-bar .config-inner{
  max-width:1180px;
  margin:0 auto;
  padding:14px 0;
  display:none !important; /* hide the legacy 5-input bar */
}

.ea-trip-sentence{
  max-width:1180px;
  margin:0 auto;
  padding:30px 0 14px;
  font-family:'Fraunces',Georgia,serif;
  font-size:26px;
  line-height:1.55;
  letter-spacing:-0.01em;
  color:var(--ea-forest,#1b2e1f);
}
.ea-trip-sentence em{
  font-style:italic;
  color:var(--ea-clay);
  font-weight:400;
}
.ea-trip-sentence .ea-chip{
  display:inline-block;
  padding:0 6px;
  margin:0 1px;
  border-bottom:2px dashed var(--ea-terracotta);
  color:var(--ea-terracotta);
  font-weight:700;
  cursor:pointer;
  border-radius:3px;
  transition:background 0.18s var(--ea-ease-editorial);
  font-feature-settings:'lnum';
  white-space:nowrap;
}
.ea-trip-sentence .ea-chip:hover{
  background:rgba(232,115,74,0.08);
}
.ea-trip-sentence .ea-chip:focus-visible{
  outline:2px solid var(--ea-terracotta);
  outline-offset:2px;
  background:rgba(232,115,74,0.08);
}

/* Floating editor popover (one shared instance, positioned by JS) */
.ea-chip-editor{
  position:absolute;
  z-index:120;
  background:#fff;
  border:1px solid var(--ea-rule-hair);
  border-radius:8px;
  box-shadow:0 12px 40px -8px rgba(20,28,16,0.25);
  padding:10px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  font-family:'Inter',sans-serif;
  font-size:13px;
  max-width:280px;
}
.ea-chip-editor[hidden]{display:none}
.ea-chip-editor button{
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:600;
  padding:6px 12px;
  border:1px solid var(--ea-rule-hair);
  background:#fffcf7;
  color:var(--ea-forest);
  border-radius:99px;
  cursor:pointer;
  transition:all 0.15s var(--ea-ease-editorial);
}
.ea-chip-editor button:hover{
  border-color:var(--ea-terracotta);
  color:var(--ea-terracotta);
}
.ea-chip-editor button[aria-pressed="true"]{
  background:var(--ea-forest);
  color:#faf7f2;
  border-color:var(--ea-forest);
}
.ea-chip-editor input[type="date"]{
  font-family:'Inter',sans-serif;
  font-size:13px;
  padding:6px 10px;
  border:1px solid var(--ea-rule-hair);
  border-radius:6px;
  width:100%;
}

/* Visually-hidden helpers — used to keep the legacy <select>/<input> reachable
   for screen readers and direct .value reads/writes from existing JS */
.ea-vh{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ---------- 4. Subtle desktop budget bar / sticky mobile HUD */
.budget-bar{
  background:rgba(27,46,31,0.04) !important;
  border:1px solid var(--ea-rule-hair) !important;
  border-radius:4px;
  margin:0 40px 18px !important;
  max-width:1180px;
  padding:10px 18px !important;
  position:static !important;
  top:auto !important;
  color:var(--ea-forest-soft) !important;
  font-family:'Inter',sans-serif !important;
  font-size:12px !important;
  box-shadow:none !important;
}
.budget-bar .bb-total{
  font-family:'Fraunces',Georgia,serif !important;
  font-weight:800 !important;
  font-size:16px !important;
  color:var(--ea-terracotta) !important;
}
.budget-bar .bb-cat{
  font-family:'Inter',sans-serif !important;
  font-size:11px !important;
  color:var(--ea-clay) !important;
}
.budget-bar .bb-cat b{color:var(--ea-forest) !important;font-weight:700 !important}
.budget-bar .bb-sep{color:var(--ea-rule-soft) !important}

/* Mobile HUD — same DOM, sticky bottom, single-row */
@media(max-width:768px){
  .budget-bar{
    position:fixed !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    margin:0 !important;
    border-radius:0 !important;
    background:rgba(27,46,31,0.96) !important;
    color:#fff !important;
    border:none !important;
    border-top:1px solid rgba(255,255,255,0.1) !important;
    z-index:90;
    padding:10px 16px !important;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    display:flex;
    justify-content:space-between !important;
    align-items:center;
    gap:10px;
    flex-wrap:nowrap !important;
  }
  .budget-bar .bb-total{
    color:#ff9a7a !important;
    font-size:15px !important;
  }
  .budget-bar .bb-cats{
    display:none !important; /* collapse breakdown on phones — opens as sheet */
  }
  .budget-bar .bb-sep{display:none}
  /* room for the HUD above the page bottom on mobile */
  body{padding-bottom:60px}
}

/* ---------- 5. Hide the legacy progress-bar (day cards ARE progress) */
#progressBar{display:none !important}

/* ---------- 6. Day-cluster itinerary canvas */
.planner-content{
  max-width:1180px !important;
  margin:0 auto !important;
  padding:24px 40px 40px !important;
}
.no-dest-msg{
  font-family:'Fraunces',Georgia,serif !important;
  font-style:italic;
  color:var(--ea-clay) !important;
  font-size:18px !important;
  padding:80px 20px;
  text-align:center;
}
.no-dest-msg .big-emoji{display:none !important}
.no-dest-msg::before{
  content:'Pick a destination above to start planning.';
  display:block;
  font-family:'Fraunces',Georgia,serif;
  font-style:italic;
  color:var(--ea-clay);
}
/* The original text inside the element duplicates — hide via attribute */
.no-dest-msg{font-size:0 !important}
.no-dest-msg::before{font-size:18px !important}

/* The script-rendered day cards. Two renderer paths exist:
   • DEFAULT path (buildItinerary, used 99% of the time): emits
     `<div class="itin-day itin-day-v2"><div class="itin-day-header"
     data-day-num="01"><div class="itin-day-title">…</div></div>
     <div class="time-slot">…<div class="itin-item">…</div></div>`
   • AUTO-CLUSTER path (dayClusterRun → "Auto-cluster into N days"
     button at L2823): emits `<div class="day-section">
     <div class="day-section__header"><h3 class="day-section__title">
     </h3><span class="day-section__pill"></span></div>
     <div class="day-section__items"><div class="day-item">…</div>
     </div></div>`
   Both must render with the editorial day-cluster aesthetic. */
.itin-empty{
  background:transparent !important;
  border:1px dashed var(--ea-rule-hair) !important;
  font-family:'Fraunces',Georgia,serif !important;
  font-style:italic;
  color:var(--ea-clay) !important;
}

/* ── DEFAULT renderer path (.itin-day-v2 / .itin-item) ── */
.itin-day, .itin-day-v2{
  background:transparent !important;
  border:none !important;
  border-bottom:1px solid var(--ea-rule-hair) !important;
  border-radius:0 !important;
  padding:24px 0 28px !important;
  margin-bottom:0 !important;
  position:relative;
}
.itin-day:last-child, .itin-day-v2:last-child{border-bottom:none !important}

.itin-day-header{
  display:flex !important;
  align-items:flex-start !important;
  gap:18px !important;
  margin-bottom:18px !important;
  padding-left:0 !important;
  flex-wrap:wrap;
}
.itin-day-header::before{
  /* Big italic numeral — buildItinerary already emits data-day-num="01"
     on .itin-day-header, so the CSS attr() reads it directly. */
  content:attr(data-day-num);
  font-family:'Fraunces',Georgia,serif;
  font-size:54px;
  font-weight:300;
  font-style:italic;
  color:var(--ea-dust-amber);
  letter-spacing:-0.02em;
  line-height:0.8;
  flex-shrink:0;
  font-feature-settings:'lnum';
  min-width:60px;
}

.itin-day-title{
  font-family:'Fraunces',Georgia,serif !important;
  font-size:22px !important;
  font-weight:700 !important;
  color:var(--ea-forest,#1b2e1f) !important;
  letter-spacing:-0.015em !important;
  margin:0 !important;
  flex:1;
}
.itin-day-cost{
  font-family:'Inter',sans-serif !important;
  font-size:11px !important;
  letter-spacing:0.06em;
  color:var(--ea-clay) !important;
  margin-left:auto !important;
  text-align:right;
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  align-self:center;
}
.itin-day-cost strong{
  font-family:'Fraunces',Georgia,serif !important;
  font-weight:700;
  color:var(--ea-forest) !important;
  font-size:14px !important;
  display:block;
  margin-top:2px;
}

.time-slot{
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  margin:0 !important;
}
.time-slot-header{
  font-family:'Inter',sans-serif !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:0.14em !important;
  text-transform:uppercase !important;
  color:var(--ea-clay) !important;
  margin:14px 0 6px !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
}

.itin-item{
  display:grid !important;
  grid-template-columns:90px 1fr auto;
  gap:18px !important;
  align-items:center !important;
  padding:12px 0 !important;
  border-bottom:1px solid var(--ea-rule-soft) !important;
  font-family:'DM Sans',sans-serif;
  font-size:13px !important;
  background:transparent !important;
  box-shadow:none !important;
  border-left:none !important;
  border-right:none !important;
  border-top:none !important;
}
.itin-item:last-child{border-bottom:none !important}
.itin-item .itin-time{
  font-family:'Inter',sans-serif !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:0.1em !important;
  color:var(--ea-clay) !important;
  text-align:right;
  text-transform:uppercase;
  width:auto !important;
  padding-top:2px;
}
.itin-item .itin-name{
  font-family:'Fraunces',Georgia,serif !important;
  font-size:16px !important;
  font-weight:700 !important;
  color:var(--ea-forest,#1b2e1f) !important;
  letter-spacing:-0.01em !important;
}
.itin-item .itin-dur{
  font-family:'Inter',sans-serif !important;
  font-size:10px !important;
  letter-spacing:0.06em;
  color:var(--ea-clay) !important;
}
.itin-item[data-why-this-fits]{
  grid-template-rows:auto auto;
}
.itin-item[data-why-this-fits]::after{
  content:'\201C' attr(data-why-this-fits) '\201D';
  grid-column:2 / 4;
  grid-row:2;
  font-family:'Fraunces',Georgia,serif;
  font-style:italic;
  font-size:13px;
  line-height:1.5;
  color:var(--ea-clay);
  border-left:2px solid var(--ea-rule-hair);
  padding-left:14px;
  margin-top:4px;
}
@media(max-width:768px){
  .itin-item{grid-template-columns:1fr !important;gap:6px !important}
  .itin-item .itin-time{text-align:left;font-size:9px !important}
  .itin-item[data-why-this-fits]::after{
    grid-column:1 / -1;
    border-left:none;
    border-top:1px solid var(--ea-rule-hair);
    padding-left:0;
    padding-top:8px;
    margin-top:6px;
    font-size:12px;
  }
  .itin-day-header::before{font-size:42px;min-width:48px}
}

/* ── AUTO-CLUSTER renderer path (.day-section / .day-item) ── */
.day-section{
  background:transparent !important;
  border:none !important;
  border-bottom:1px solid var(--ea-rule-hair) !important;
  border-radius:0 !important;
  padding:24px 0 28px !important;
  margin-bottom:0 !important;
  position:relative;
}
.day-section:last-child{border-bottom:none !important}

.day-section__header{
  display:flex !important;
  align-items:flex-start !important;
  gap:18px !important;
  margin-bottom:18px !important;
  padding-left:0 !important;
  flex-wrap:wrap;
}
.day-section__header::before{
  /* Big italic numeral — set on .day-section__header by the wiring
     script's annotateDays() (data-day-num="01" etc). */
  content:attr(data-day-num);
  font-family:'Fraunces',Georgia,serif;
  font-size:54px;
  font-weight:300;
  font-style:italic;
  color:var(--ea-dust-amber);
  letter-spacing:-0.02em;
  line-height:0.8;
  flex-shrink:0;
  font-feature-settings:'lnum';
  min-width:60px;
}

.day-section__title{
  font-family:'Fraunces',Georgia,serif !important;
  font-size:22px !important;
  font-weight:700 !important;
  color:var(--ea-forest,#1b2e1f) !important;
  letter-spacing:-0.015em !important;
  margin:0 !important;
}
.day-section__pill{
  font-family:'Inter',sans-serif !important;
  font-size:11px !important;
  letter-spacing:0.06em;
  color:var(--ea-clay) !important;
  margin-left:auto !important;
  text-align:right;
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  align-self:center;
}
.day-section__meta{
  font-family:'Fraunces',Georgia,serif !important;
  font-style:italic;
  font-size:13px !important;
  color:var(--ea-clay) !important;
  flex-basis:100%;
  padding-left:78px; /* align under the title, past the numeral */
  margin-top:-8px;
}
.day-section__items{
  padding-left:0 !important;
}

/* Stop rows inside a cluster (.day-item — emitted around L2832) */
.day-item{
  display:grid !important;
  grid-template-columns:90px 1fr auto;
  gap:18px !important;
  align-items:center !important;
  padding:12px 0 !important;
  border-bottom:1px solid var(--ea-rule-soft) !important;
  font-family:'DM Sans',sans-serif;
  font-size:13px !important;
  background:transparent !important;
}
.day-item:last-child{border-bottom:none !important}
.day-item__time{
  font-family:'Inter',sans-serif !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:0.1em;
  color:var(--ea-clay) !important;
  text-align:right;
  text-transform:uppercase;
  padding-top:2px;
}
.day-item__name{
  font-family:'Fraunces',Georgia,serif;
  font-size:16px;
  font-weight:700;
  color:var(--ea-forest,#1b2e1f);
  letter-spacing:-0.01em;
}
.day-item__lock,
.day-item__lock-toggle,
.day-item__remove{
  background:transparent;
  border:none;
  font-size:13px;
  cursor:pointer;
  padding:4px 6px;
  color:var(--ea-clay);
  opacity:0.6;
  transition:opacity 0.15s var(--ea-ease-editorial);
}
.day-item__lock-toggle:hover,
.day-item__remove:hover{opacity:1}

/* Margin annotation — rendered when a .day-item has data-why-this-fits.
   buildItinerary() can populate this via setAttribute('data-why-this-fits',
   item.d || item.reason). Empty / missing → no attribute, no annotation,
   no fabricated copy. */
.day-item[data-why-this-fits]{
  grid-template-columns:90px 1fr auto;
  grid-template-rows:auto auto;
}
.day-item[data-why-this-fits]::after{
  content:'\201C' attr(data-why-this-fits) '\201D';
  grid-column:2 / 4;
  grid-row:2;
  font-family:'Fraunces',Georgia,serif;
  font-style:italic;
  font-size:13px;
  line-height:1.5;
  color:var(--ea-clay);
  border-left:2px solid var(--ea-rule-hair);
  padding-left:14px;
  margin-top:4px;
}
/* Mobile: annotations stack below the card with a hairline */
@media(max-width:768px){
  .day-item{grid-template-columns:1fr !important;gap:4px !important}
  .day-item__time{text-align:left;font-size:9px !important}
  .day-item[data-why-this-fits]::after{
    grid-column:1 / -1;
    border-left:none;
    border-top:1px solid var(--ea-rule-hair);
    padding-left:0;
    padding-top:8px;
    margin-top:6px;
    font-size:12px;
  }
  .day-section__header::before{font-size:42px;min-width:48px}
  .day-section__meta{padding-left:0}
}

/* Cluster-level alternates strip — emitted by buildItinerary() at the foot
   of each .itin-day as <div class="ea-day-alts" data-day-idx="N"> with up
   to three .ea-alt-chip children. If the strip would be empty, the day
   omits it entirely (handled in JS). */
.ea-day-alts{
  margin-top:14px;
  padding:10px 16px;
  background:rgba(232,220,197,0.16);
  border:1px dashed var(--ea-rule-hair);
  border-radius:4px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.ea-day-alts .alts-label{
  font-family:'Inter',sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ea-clay);
}
.ea-day-alts .alts-chips{display:flex;gap:8px;flex-wrap:wrap}
.ea-alt-chip{
  font-family:'Inter',sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.04em;
  color:var(--ea-terracotta);
  background:#fff;
  border:1px solid rgba(232,115,74,0.4);
  padding:5px 12px;
  border-radius:99px;
  cursor:pointer;
  transition:all 0.18s var(--ea-ease-editorial);
}
.ea-alt-chip:hover{
  background:var(--ea-terracotta);
  color:#fff;
}

/* ---------- 7. Welcome-back banner (post-trip review + load-existing) */
.welcome-back-banner{
  background:rgba(232,220,197,0.22) !important;
  border:1px solid var(--ea-rule-hair) !important;
  border-radius:6px !important;
  box-shadow:none !important;
  margin:18px 40px !important;
  max-width:1180px;
  padding:18px 22px !important;
}
.welcome-back-banner .wb-icon{display:none !important}
.welcome-back-banner .wb-text{
  font-family:'Fraunces',Georgia,serif !important;
  font-size:17px !important;
  font-weight:700 !important;
  color:var(--ea-forest,#1b2e1f) !important;
  letter-spacing:-0.01em;
  font-style:normal !important;
}
.welcome-back-banner .wb-text::before{
  content:'Welcome back';
  display:block;
  font-family:'Inter',sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ea-dust-amber);
  margin-bottom:4px;
}
.wb-continue{
  background:var(--ea-forest,#1b2e1f) !important;
  border-radius:99px !important;
  font-family:'Inter',sans-serif !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:8px 18px !important;
}
.wb-fresh{
  background:transparent !important;
  border:1px solid var(--ea-rule-hair) !important;
  color:var(--ea-forest-soft) !important;
  font-family:'Inter',sans-serif !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:8px 18px !important;
  border-radius:99px !important;
}

/* ---------- 8. Save status bar restyle */
.save-status-bar{
  background:rgba(232,220,197,0.18) !important;
  border-top:1px solid var(--ea-rule-hair) !important;
  font-family:'Inter',sans-serif !important;
  font-size:12px !important;
  color:var(--ea-forest-soft) !important;
}
.save-status-bar.has-data{
  background:rgba(232,220,197,0.22) !important;
  color:var(--ea-forest-soft) !important;
}
.save-status-bar .save-icon{color:var(--ea-dust-amber)}
.save-status-bar .save-share-link{
  color:var(--ea-terracotta) !important;
  font-weight:700 !important;
}
@media(max-width:768px){
  .save-status-bar{
    /* sit above the sticky budget HUD */
    bottom:48px !important;
  }
}

/* ---------- 9. Post-trip review restyle (Phase 6) */
#postTripReview > div{
  background:rgba(232,220,197,0.22) !important;
  border:1px solid var(--ea-rule-hair) !important;
  border-radius:6px !important;
  box-shadow:none !important;
}
#postTripReview h2{
  font-family:'Fraunces',Georgia,serif !important;
  font-weight:700 !important;
}

/* ---------- 10. Trip banner restyle */
.trip-banner{
  background:rgba(232,220,197,0.22) !important;
  border-bottom:1px solid var(--ea-rule-hair) !important;
  color:var(--ea-forest,#1b2e1f) !important;
  font-family:'Fraunces',Georgia,serif;
  font-style:italic;
  padding:12px 40px !important;
}
.trip-banner .banner-hotel{color:var(--ea-terracotta) !important;font-weight:700}

/* ---------- 11. Reduced-motion: kill all transforms / animations */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .dest-card{transform:none !important}
  .ea-trip-sentence .ea-chip{transition:none !important}
}

/* ---------- 12. Mobile sentence wrap */
@media(max-width:768px){
  .ea-trip-sentence{
    padding:20px 0 12px !important;
    font-size:18px !important;
    line-height:1.55;
  }
  .dest-picker{padding:18px 16px 14px !important}
  .config-bar{padding:0 16px !important}
  .planner-content{padding:18px 16px 80px !important}
  .budget-bar{margin:0 !important}
  .welcome-back-banner{margin:14px 16px !important}
  .trip-banner{padding:10px 16px !important}
}