/* New UI for the web workbook (owner opt-in from ⚙ Workbook; classic is the default).
   Everything is scoped to html.wb-new, so the classic look is untouched.
   The trip's theme colour stays in --forest / --forest-deep (applyTripTheme). */

html.wb-new {
  /* Warm cream page, lighter cards so they lift off it (was near-white on near-white). */
  --paper: #f5f2e9;
  --paper-2: #ece8dc;
  --cream: #fffcf7;
  --ink: #293c33;
  --ink-soft: #5f685f;
  --line: #dedfd4;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nu-radius: 12px;
}

html.wb-new body {
  /* A soft step down from the dark hero instead of one flat sheet of white. */
  background: linear-gradient(180deg, #f1eee4 0, var(--paper) 26rem, #f6f3eb 100%) var(--paper);
  font-family: var(--sans);
  color: var(--ink);
}

html.wb-new .grain,
html.wb-new .batik {
  display: none;
}

/* Fields keep the paper look, even when the device is in dark mode. */
html.wb-new input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
html.wb-new select,
html.wb-new textarea {
  background-color: #fff;
  color: var(--ink);
  color-scheme: light;
}

/* ——— Header ——— */
html.wb-new .mast {
  background: var(--forest);
  padding-bottom: 1rem;
}

html.wb-new .mast h1 {
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

html.wb-new .mast h1 em {
  color: #e6c98e;
}

html.wb-new .mast-kicker {
  color: #ecd2c7;
  font-weight: 700;
  letter-spacing: 0.2em;
}

html.wb-new .mast-meta {
  color: #eed9d0;
}

/* ——— Sheet tabs: one underlined row on the trip colour ——— */
html.wb-new .sheet-nav {
  background: var(--forest);
  border-bottom: 0;
}

@media (min-width: 48rem) {
  html.wb-new .sheet-tabs {
    gap: 1.4rem;
  }

  html.wb-new .sheet-tabs [role="tab"] {
    min-height: 2.75rem;
    padding: 0.6rem 0 0.7rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    color: #ead2c9;
    font-size: 0.85rem;
    letter-spacing: 0;
    box-shadow: none;
  }

  html.wb-new .sheet-tabs [role="tab"]:hover {
    color: #fff;
  }

  html.wb-new .sheet-tabs [role="tab"][aria-selected="true"] {
    background: none;
    color: #fff;
    font-weight: 600;
    border-bottom-color: #e6c98e;
  }
}

/* ——— Sheets ——— */
html.wb-new .sheet {
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  padding-top: 1.4rem;
}

html.wb-new .panel-head h2 {
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 1.95rem);
  letter-spacing: -0.01em;
}

html.wb-new .panel-head p {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

html.wb-new .card,
html.wb-new .detail,
html.wb-new .agenda {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--nu-radius);
}

html.wb-new .btn-solid {
  border-radius: 8px;
}

html.wb-new .btn-quiet {
  border-radius: 8px;
}

/* ——— Itinerary (view): days · plan · detail ——— */
html.wb-new .nu-itin {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin-top: 1rem;
}

html.wb-new .nu-days {
  position: sticky;
  top: 4.5rem;
  display: grid;
  /* One column no wider than the 12rem rail — an auto column grew to a long route's full width
     ("Manila → Japan → New York · 0 stops") and ran over the day title (owner 2026-10-03); the line ends in … */
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 0.2rem;
}

html.wb-new .nu-day {
  display: flex;
  gap: 0.65rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ink-soft);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

html.wb-new .nu-day:hover {
  background: var(--paper-2);
}

html.wb-new .nu-day.is-on {
  background: color-mix(in srgb, var(--forest) 12%, var(--cream));
}

html.wb-new .nu-day-num {
  flex: 0 0 1.6rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1;
  color: #a2a79c;
}

html.wb-new .nu-day.is-on .nu-day-num {
  color: var(--forest);
}

html.wb-new .nu-day-copy {
  flex: 1 1 auto;
  min-width: 0;
}

html.wb-new .nu-day-copy b {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
}

html.wb-new .nu-day-copy small {
  display: block;
  font-size: 0.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.wb-new .nu-pill {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: #2f7d57;
  color: #fff;
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}

html.wb-new .nu-wrap {
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
  gap: 1.5rem;
}

html.wb-new .nu-wrap #detail-slot {
  position: sticky;
  top: 4.5rem;
}

html.wb-new .nu-wrap .detail {
  position: static;
  max-height: calc(100dvh - 6rem);
  overflow: auto;
}

/* The plan reads as cards on paper, not a table. */
html.wb-new .nu-wrap .agenda {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

html.wb-new .nu-wrap .agenda-head {
  padding: 0 0 0.6rem;
  background: none;
  color: var(--ink);
}

html.wb-new .nu-wrap .agenda.is-live .agenda-head {
  background: none;
}

html.wb-new .nu-wrap .agenda-head strong {
  font-size: 1.55rem;
  font-weight: 400;
}

html.wb-new .nu-wrap .agenda-head small,
html.wb-new .nu-wrap .agenda.is-live .agenda-head small {
  color: var(--ink-soft);
}

html.wb-new .nu-wrap .agenda-list {
  display: grid;
  gap: 0.55rem;
  padding: 0;
}

html.wb-new .nu-wrap .agenda-item {
  grid-template-columns: 4.3rem 1.9rem minmax(0, 1fr);
  gap: 0.2rem 0.75rem;
  padding: 0.8rem 1rem 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-left: 4px solid currentColor;
  border-radius: 10px;
  background: var(--cream);
  cursor: pointer;
}

html.wb-new .nu-wrap .agenda-item:hover {
  border-color: #bdb9a9;
  border-left-color: currentColor;
}

html.wb-new .nu-wrap .agenda-rail {
  display: none;
}

html.wb-new .nu-wrap .agenda-item time {
  font-size: 0.8rem;
  color: var(--ink);
  opacity: 1;
}

html.wb-new .nu-wrap .agenda-copy b {
  font-size: 0.98rem;
}

html.wb-new .nu-wrap .agenda-item.is-on {
  outline: 0;
  box-shadow: 0 0 0 2px var(--forest) inset;
}

html.wb-new .nu-wrap .agenda-item.is-now {
  animation: none;
  background: #eaf4ed;
  box-shadow: 0 0 0 2px #2f7d57 inset;
}

html.wb-new .nu-wrap .agenda-list > li:last-child .agenda-item {
  border-bottom: 1px solid var(--line);
}

html.wb-new .nu-wrap .agenda-gap {
  min-height: 1.1rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

html.wb-new .nu-wrap .agenda-gap.is-now {
  border-radius: 8px;
}

html.wb-new .nu-wrap .agenda-carry,
html.wb-new .nu-wrap .agenda-crew-note {
  padding: 0.55rem 0.8rem;
  border-radius: 9px;
  background: var(--paper-2);
  font-size: 0.8rem;
  color: var(--ink-soft);
}

html.wb-new .nu-wrap .tt-stack {
  gap: 1.8rem;
}

/* Detail panel: a coloured cap, then the stop. */
html.wb-new .nu-wrap .detail {
  padding: 0;
  overflow: hidden auto;
}

html.wb-new .nu-wrap .detail > * {
  margin-left: 1.1rem;
  margin-right: 1.1rem;
}

html.wb-new .nu-wrap .detail::before {
  content: "Stop details";
  display: block;
  margin-bottom: 0.9rem;
  padding: 0.75rem 1.1rem;
  background: linear-gradient(140deg, var(--forest), var(--forest-deep));
  color: #fbeee6;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html.wb-new .nu-wrap .detail > :last-child {
  margin-bottom: 1.1rem;
}

html.wb-new .nu-wrap .detail h3 {
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.25;
}

@media (max-width: 64rem) {
  html.wb-new .nu-itin {
    grid-template-columns: minmax(0, 1fr);
  }

  html.wb-new .nu-days {
    position: static;
    display: flex;
    overflow-x: auto;
    gap: 0.35rem;
    padding-bottom: 0.25rem;
  }

  html.wb-new .nu-day {
    flex: 0 0 auto;
    width: auto;
  }

  html.wb-new .nu-wrap {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem);
  }
}

/* ——— Trip detail → Destinations (view) ——— */
html.wb-new .nu-dest {
  display: grid;
  gap: 1rem;
}

html.wb-new .nu-route {
  display: flex;
  flex-wrap: wrap;
}

html.wb-new .nu-route-stop {
  flex: 1 1 13rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  background: var(--cream);
}

html.wb-new .nu-route-stop:first-child {
  border-radius: var(--nu-radius) 0 0 var(--nu-radius);
}

html.wb-new .nu-route-stop:last-child {
  border-radius: 0 var(--nu-radius) var(--nu-radius) 0;
}

html.wb-new .nu-route-stop + .nu-route-stop {
  border-left: 0;
}

html.wb-new .nu-route-stop.is-home {
  background: var(--paper-2);
}

html.wb-new .nu-route-n {
  font-family: var(--serif);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--forest);
}

html.wb-new .nu-route-stop h4 {
  margin: 0.4rem 0 0;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
}

html.wb-new .nu-route-sub {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

html.wb-new .nu-route-when {
  display: grid;
  gap: 0.2rem;
  margin-top: 0.6rem;
  font-size: 0.8rem;
}

html.wb-new .nu-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.7rem 1.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--nu-radius);
  background: var(--cream);
  font-size: 0.85rem;
}

html.wb-new .nu-facts span {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 47.99rem) {
  html.wb-new .nu-route-stop,
  html.wb-new .nu-route-stop:first-child,
  html.wb-new .nu-route-stop:last-child {
    flex-basis: 100%;
    border-radius: 0;
  }

  html.wb-new .nu-route-stop + .nu-route-stop {
    border-left: 1px solid var(--line);
    border-top: 0;
  }

  html.wb-new .nu-route-stop:first-child {
    border-radius: var(--nu-radius) var(--nu-radius) 0 0;
  }

  html.wb-new .nu-route-stop:last-child {
    border-radius: 0 0 var(--nu-radius) var(--nu-radius);
  }
}

/* ——— Flights: every boarding pass at once ——— */
html.wb-new .nu-passes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
  gap: 1rem;
}

html.wb-new .flight-pass {
  border-radius: 14px;
}

/* ——— Trip detail sections: a compact switch, not a full-width bar ——— */
html.wb-new .detail-subtabs {
  display: inline-flex;
  width: auto;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-2);
}

html.wb-new .detail-subtabs button {
  flex: 0 0 auto;
  min-height: 2.25rem;
  padding: 0.45rem 1rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink-soft);
  font-size: 0.82rem;
  box-shadow: none;
}

html.wb-new .detail-subtabs button.is-on {
  background: var(--cream);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* ——— Food places: cards ——— */
html.wb-new .nu-food {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  gap: 0.9rem;
  padding: 0;
  list-style: none;
}

html.wb-new .nu-food .food-card {
  margin: 0;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brick);
  border-radius: var(--nu-radius);
  background: var(--cream);
}

html.wb-new .nu-food .food-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.25rem;
}

/* ——— Emergency: numbers are big call buttons ——— */
html.wb-new .sos {
  border-left: 0;
  padding-left: 0;
}

html.wb-new .sos h4 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

html.wb-new .sos-card {
  border: 1px solid var(--line);
  border-radius: var(--nu-radius);
  background: var(--cream);
}

html.wb-new .sos > .sos-grid:first-of-type .sos-card {
  border: 0;
  background: #a8322a;
}

html.wb-new .sos > .sos-grid:first-of-type .sos-card:nth-child(3n + 2) {
  background: #b8542a;
}

html.wb-new .sos > .sos-grid:first-of-type .sos-card:nth-child(3n + 3) {
  background: #7a3b6b;
}

html.wb-new .sos > .sos-grid:first-of-type .sos-main,
html.wb-new .sos > .sos-grid:first-of-type .sos-label,
html.wb-new .sos > .sos-grid:first-of-type .sos-num,
html.wb-new .sos > .sos-grid:first-of-type .sos-note {
  color: #fff;
}

html.wb-new .sos > .sos-grid:first-of-type .sos-num {
  font-size: 1.7rem;
}

/* ——— Expenses: the one summary card (group total · split · spending level), in the new look ——— */
html.wb-new .exp-hero {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: 1.6rem;
  row-gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.2rem 1.4rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--cream);
  box-shadow: none;
}

html.wb-new .exp-hero-top {
  align-self: center;
}

/* The "?" sits top right of its metric: the label keeps room for it (UI hunt 2026-10-12: it sat on "ADDITIONAL
   SHARING" at 900 px / 150% zoom). */
html.wb-new .exp-hero-metric:has(> .stat-help) small {
  padding-right: 1.6rem;
}

html.wb-new .exp-hero-kicker,
html.wb-new .exp-hero-metric small,
html.wb-new .exp-spend-head span {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}

html.wb-new .exp-hero-amount {
  margin-top: 0.3rem;
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4vw, 2.8rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* The total keeps its spending-level colour, in the new palette. */
html.wb-new .exp-hero.is-budget .exp-hero-amount { color: #2f7d57; }
html.wb-new .exp-hero.is-moderate .exp-hero-amount { color: #3e6d8e; }
html.wb-new .exp-hero.is-comfortable .exp-hero-amount { color: #6f6a9a; }
html.wb-new .exp-hero.is-luxury .exp-hero-amount { color: #9a7a2c; }

html.wb-new .exp-hero-sub {
  font-size: 0.84rem;
}

html.wb-new .exp-hero-split {
  align-self: center;
  gap: 1.2rem;
  padding: 0 0 0 1.4rem;
  border-top: 0;
  border-left: 1px solid var(--line);
}

html.wb-new .exp-hero-metric strong {
  margin-top: 0.3rem;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 400;
  /* Never break a number mid-way ("₱1,000,013,261.3" + "4"): long ones step down (app: same). */
  white-space: nowrap;
}

html.wb-new .exp-hero-metric strong.is-long {
  font-size: clamp(0.95rem, 4.4vw, 1.25rem);
}

html.wb-new .exp-hero-metric strong.is-xlong {
  font-size: clamp(0.8rem, 3.6vw, 1.1rem);
}

html.wb-new .exp-hero-amount {
  white-space: nowrap;
}

html.wb-new .exp-hero-amount.is-xlong {
  font-size: clamp(1.5rem, 7.4vw, 2.4rem);
}

html.wb-new .exp-hero-metric small i {
  background: #b0572f;
}

html.wb-new .exp-hero-metric.is-additional small i {
  background: #3e6d8e;
}

html.wb-new .exp-spend {
  grid-column: 1 / -1;
  gap: 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

html.wb-new .exp-spend-head strong {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
}

html.wb-new .exp-spend-track {
  height: 0.5rem;
  background: linear-gradient(90deg, #2f7d57 0%, #3e6d8e 34%, #6f6a9a 68%, #b8892f 100%);
}

html.wb-new .exp-spend-track i {
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border: 3px solid var(--forest);
  background: var(--cream);
  box-shadow: 0 2px 8px rgba(26, 20, 16, 0.18);
}

html.wb-new .exp-spend-scale li {
  font-size: 0.7rem;
}

html.wb-new .exp-spend-scale li.is-on {
  color: var(--forest);
}

html.wb-new .exp-spend-note {
  font-size: 0.78rem;
}

@media (max-width: 47.99rem) {
  html.wb-new .exp-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  html.wb-new .exp-hero-split {
    padding: 0.9rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* =====================================================================
   Full new-UI layouts (workbook-new.js). Later rules win over the ones above.
   ===================================================================== */

/* ——— Header: one block — title, facts, crew; owner tools top-right ——— */
html.wb-new .mast {
  gap: 0.4rem;
  padding: 1.1rem max(1rem, 3%) 0.6rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--forest) 92%, black), var(--forest));
}

/* Phone, scrolled: the sticky tab strip starts where the collapsed header ends (its padding
   plus the back button). styles.css's 3.15rem left the header over the top of the tabs. */
@media (max-width: 47.99rem) {
  html.wb-new .mast.is-collapsed ~ .sheet-nav {
    top: calc(1.1rem + var(--mast-btn-h, var(--tap)) + 0.6rem);
  }
}

html.wb-new .mast h1 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
}

html.wb-new .mast-meta {
  display: grid;
  gap: 0.7rem;
  max-width: none;
  margin-top: 0.7rem;
}

html.wb-new .nu-facts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

html.wb-new .nu-fact {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid color-mix(in srgb, #fff 16%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, #fff 10%, transparent);
  color: #fbf1e8;
  font-size: 0.82rem;
  line-height: 1.25;
}

html.wb-new .nu-fact small {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e6c98e;
}

html.wb-new .nu-fact-arrow {
  color: #e6c98e;
}

html.wb-new .nu-people {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

html.wb-new .mast-countdown-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.8rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, #fff 14%, transparent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
}

html.wb-new .mast-countdown-chip.is-live {
  background: #2f7d57;
}

@media (min-width: 48rem) {
  html.wb-new .workbook {
    position: relative;
  }

  /* Publish, Sync, ⚙ and the account sit top-right in the header, like the mock. */
  html.wb-new .sheet-nav-tray {
    position: absolute;
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, 3%);
    z-index: 6;
  }

  html.wb-new .mast-full {
    padding-right: 18rem;
  }

  html.wb-new .sheet-nav {
    padding: 0 max(1rem, 3%);
  }
}

html.wb-new .sheet-tabs [role="tab"]#tab-recap,
html.wb-new #tab-recap {
  background: none;
  color: #f3d9a0;
  box-shadow: none;
  border-image: none;
}

html.wb-new #tab-recap[aria-selected="true"] {
  color: #fff;
}

/* ——— Sheet frame ——— */
html.wb-new .sheet {
  max-width: 1340px;
  padding: 1.6rem max(1rem, 3%) 7rem;
}

html.wb-new .panel-head {
  margin-bottom: 1.2rem;
}

html.wb-new .panel-head h2 {
  font-size: clamp(1.7rem, 3vw, 2rem);
}

/* ——— Building blocks ——— */
html.wb-new .nu-card {
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--nu-radius);
  background: var(--cream);
}

html.wb-new .nu-stack {
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

html.wb-new .nu-stack.is-tight {
  gap: 0.5rem;
}

html.wb-new .nu-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
}

html.wb-new .nu-sec-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  margin: 1.2rem 0 0.7rem;
}

html.wb-new .nu-card > .nu-sec-title:first-child,
html.wb-new .nu-stack > .nu-sec-title:first-child {
  margin-top: 0;
}

html.wb-new .nu-sec-title h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
}

html.wb-new .nu-sec-title p,
html.wb-new .nu-muted {
  color: var(--ink-soft);
  font-size: 0.82rem;
}

html.wb-new .nu-row-between {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem 1rem;
}

html.wb-new .nu-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

html.wb-new .nu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.5rem;
  padding: 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream);
  color: var(--ink);
  font: 600 0.8rem var(--sans);
  text-decoration: none;
  cursor: pointer;
}

html.wb-new .nu-btn:hover {
  border-color: #bdb9a9;
}

html.wb-new .nu-btn.is-solid {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
}

html.wb-new .nu-icon-btn {
  min-width: 2.4rem;
  min-height: 2.4rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream);
  cursor: pointer;
}

html.wb-new .nu-pill {
  flex: 0 0 auto;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
}

html.wb-new .nu-pill.is-ok {
  background: #eaf4ed;
  color: #1f5a3d;
}

html.wb-new .nu-box {
  padding: 0.7rem 0.8rem;
  border-radius: 9px;
  background: var(--paper-2);
  font-size: 0.82rem;
}

html.wb-new .nu-box b {
  display: block;
  margin-bottom: 0.15rem;
}

html.wb-new .nu-total-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
}

html.wb-new .nu-total-line b {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
}

html.wb-new .nu-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

html.wb-new .nu-chip {
  min-height: 2.15rem;
  padding: 0 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font: 500 0.8rem var(--sans);
  cursor: pointer;
}

html.wb-new .nu-chip small {
  margin-left: 0.3rem;
  opacity: 0.7;
}

html.wb-new .nu-chip[aria-pressed="true"] {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
  font-weight: 600;
}

html.wb-new .nu-search {
  min-height: 2.4rem;
  min-width: min(100%, 15rem);
  padding: 0 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
}

html.wb-new .nu-toolbar {
  align-items: center;
  margin-bottom: 0.9rem;
}

html.wb-new .nu-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: #ecebe2;
  overflow: hidden;
}

html.wb-new .nu-bar.is-big {
  flex: 1 1 14rem;
  height: 10px;
}

html.wb-new .nu-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #2f7d57;
  transition: width 0.2s;
}

/* ——— Hotel ——— */
html.wb-new .nu-hotel {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--cream);
}

html.wb-new .nu-hotel-photo .hotel-media {
  width: 100%;
  height: 100%;
  min-height: 14rem;
  aspect-ratio: auto;
  border-radius: 0;
}

html.wb-new .nu-hotel-photo .hotel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html.wb-new .nu-hotel-info {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 1rem 1.2rem 1.2rem;
}

html.wb-new .nu-hotel-info h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
}

html.wb-new .nu-hotel-info .nu-muted {
  display: block;
}

html.wb-new .nu-hotel-dates {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.6rem;
  align-items: center;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  background: var(--paper-2);
}

html.wb-new .nu-hotel-dates b {
  display: block;
  font-size: 0.95rem;
}

html.wb-new .nu-hotel-dates small {
  display: block;
  color: var(--ink-soft);
  font-size: 0.72rem;
}

html.wb-new .nu-hotel-dates .is-end {
  text-align: right;
}

html.wb-new .nu-hotel-nights {
  color: var(--forest);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

html.wb-new .nu-nights {
  margin-top: 1rem;
}

html.wb-new .nu-nights .wb-nights-label,
html.wb-new .nu-nights .hotel-nights-hint {
  display: none;
}

@media (max-width: 47.99rem) {
  html.wb-new .nu-hotel {
    grid-template-columns: minmax(0, 1fr);
  }

  html.wb-new .nu-hotel-photo .hotel-media {
    min-height: 11rem;
    max-height: 14rem;
  }
}

/* ——— Prep ——— */
html.wb-new .nu-overall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
  margin-bottom: 0.9rem;
}

html.wb-new .nu-overall b {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
}

html.wb-new .nu-know {
  margin-bottom: 0.9rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid #eadcb4;
  border-radius: var(--nu-radius);
  background: #f6f0de;
}

html.wb-new .nu-know h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
}

html.wb-new .nu-know ul {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}

html.wb-new .nu-prep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 0.9rem;
  align-items: stretch;
}
/* The floating 📍 / + dock (≈94 px at the right edge) never sits over a list card (W-41 follow-up, 2026-10-21). */
@media (min-width: 600px) {
  html.wb-new #panel-prep .nu-prep-grid { padding-right: 80px; }
}

html.wb-new .nu-prep-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--nu-radius);
  background: var(--cream);
}

html.wb-new .nu-prep-card h3 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.2;
}

html.wb-new .nu-prep-card h3 small {
  font: 600 0.78rem var(--sans);
  color: var(--ink-soft);
}

html.wb-new .nu-prep-items {
  display: grid;
  gap: 0.15rem;
  margin-top: 0.2rem;
}

html.wb-new .nu-prep-items .check-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.2rem 0.5rem;
  min-width: 0;
  padding: 0.3rem 0;
  border: 0;
  background: none;
}

html.wb-new .nu-prep-items .check-row label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
}

html.wb-new .nu-prep-items .check-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.1rem 0 0;
  accent-color: #2f7d57;
}

html.wb-new .nu-prep-items .check-row label span,
html.wb-new .nu-prep-items .prep-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

html.wb-new .nu-prep-items .check-row.is-readonly {
  gap: 0.75rem;
  font-size: 0.92rem;
  line-height: 1.4;
}

html.wb-new .nu-prep-items .check-row:has(input:checked) label span {
  color: var(--ink-soft);
  text-decoration: line-through;
}

html.wb-new .nu-prep-items .check-link {
  margin-left: 1.9rem;
  font-size: 0.78rem;
}

html.wb-new .nu-know li {
  margin: 0.15rem 0;
  font-size: 0.9rem;
}

/* ——— Food ——— */
html.wb-new #panel-food .nu-chips {
  margin-bottom: 0.9rem;
}

html.wb-new .nu-food .food-card {
  padding: 1rem 1.1rem;
  box-shadow: none;
}

/* ——— Files ——— */
html.wb-new .nu-files {
  display: grid;
  gap: 0.55rem;
}

html.wb-new .nu-file {
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
}

html.wb-new .nu-file-ico {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 9px;
  background: color-mix(in srgb, var(--forest) 12%, var(--cream));
  color: var(--forest);
}

html.wb-new .nu-file-ico svg {
  width: 1.2rem;
  height: 1.2rem;
}

html.wb-new .nu-file-copy {
  min-width: 0;
}

html.wb-new .nu-file-copy b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.wb-new .nu-file-copy small {
  display: block;
  color: var(--ink-soft);
  font-size: 0.74rem;
}

html.wb-new .nu-file-acts {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

html.wb-new .nu-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  display: grid;
  min-width: 10rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
}

html.wb-new .nu-menu[hidden] {
  display: none;
}

html.wb-new .nu-menu button {
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: 7px;
  background: none;
  text-align: left;
  font: 0.82rem var(--sans);
  cursor: pointer;
}

html.wb-new .nu-menu button:hover {
  background: var(--paper-2);
}

html.wb-new .nu-empty {
  display: grid;
  gap: 0.4rem;
  justify-items: start;
}

/* ——— Emergency ——— */
html.wb-new .nu-live {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  margin-bottom: 0.4rem;
  padding: 0.9rem 1rem;
  border-radius: var(--nu-radius);
  background: #2f7d57;
  color: #fff;
}

html.wb-new .nu-live b {
  display: block;
}

html.wb-new .nu-dials {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 0.8rem;
}

html.wb-new .nu-dial {
  display: grid;
  gap: 0.25rem;
  padding: 1rem;
  border-radius: var(--nu-radius);
  background: #a8322a;
  color: #fff;
  text-decoration: none;
}

html.wb-new .nu-dial:nth-child(3n + 2) {
  background: #b8542a;
}

html.wb-new .nu-dial:nth-child(3n + 3) {
  background: #7a3b6b;
}

html.wb-new .nu-dial span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.92;
}

html.wb-new .nu-dial b {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 400;
}

html.wb-new .nu-dial small {
  font-size: 0.76rem;
  opacity: 0.88;
}

html.wb-new .nu-contact {
  display: grid;
  gap: 0.45rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--nu-radius);
  background: var(--cream);
}

html.wb-new .nu-contact h4 {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
}

html.wb-new .nu-play {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
}

html.wb-new .nu-play summary {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

html.wb-new .nu-play summary::-webkit-details-marker {
  display: none;
}

html.wb-new .nu-play summary::after {
  content: "+";
  color: var(--forest);
  font-size: 1.2rem;
  line-height: 1;
}

html.wb-new .nu-play[open] summary::after {
  content: "–";
}

html.wb-new .nu-play p {
  padding: 0 1rem 1rem;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

/* ——— Expenses ——— */
html.wb-new .nu-exp-days {
  display: grid;
  gap: 1.1rem;
  margin-top: 0.9rem;
}

html.wb-new .nu-exp-day {
  display: grid;
  gap: 0.5rem;
}

html.wb-new .nu-exp-day:not(:has([data-group-row]:not([hidden]))) {
  display: none;
}

html.wb-new .nu-exp-day h4 {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
}

html.wb-new .nu-exp-day h4 small {
  font: 600 0.82rem var(--sans);
  color: var(--ink-soft);
}

html.wb-new .nu-exp-row {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1.6fr) minmax(0, 1fr) auto auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
  font-size: 0.86rem;
}

html.wb-new .nu-exp-row[hidden] {
  display: none;
}

html.wb-new .nu-exp-ico {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 8px;
  background: var(--paper-2);
  color: var(--forest);
}

html.wb-new .nu-exp-ico svg {
  width: 1.1rem;
  height: 1.1rem;
}

html.wb-new .nu-exp-main,
html.wb-new .nu-exp-status {
  min-width: 0;
}

html.wb-new .nu-exp-main b {
  display: block;
}

html.wb-new .nu-exp-main small,
html.wb-new .nu-exp-status small,
html.wb-new .nu-exp-amt small {
  display: block;
  color: var(--ink-soft);
  font-size: 0.74rem;
}

html.wb-new .nu-exp-amt {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* A total filled from the built-in rate (shared expense-rules estimateTotals; app: same). */
html.wb-new .nu-exp-amt small.exp-est {
  color: #8a5a12;
  font-style: italic;
  white-space: nowrap;
}

html.wb-new .nu-exp-row .exp-row-actions {
  display: flex;
  gap: 0.3rem;
}

@media (max-width: 64rem) {
  html.wb-new .nu-exp-row {
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  }

  html.wb-new .nu-exp-status {
    display: none;
  }

  html.wb-new .nu-exp-row .exp-row-actions {
    grid-column: 2 / -1;
  }
}

html.wb-new .exp-table-wrap {
  border: 0;
  background: none;
  box-shadow: none;
}

html.wb-new .exp-table-head h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
}

html.wb-new .exp-filters,
html.wb-new .exp-table-tools {
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--nu-radius);
  background: var(--cream);
}

/* ——— Trip detail · Travellers ——— */
html.wb-new .traveller-list {
  display: grid;
  gap: 0;
  padding: 0.4rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--nu-radius);
  background: var(--cream);
}

html.wb-new .traveller-row {
  padding: 0.75rem 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

html.wb-new .traveller-row:first-child {
  border-top: 0;
}

/* ——— Dock: one dark bar, bottom right ——— */
html.wb-new .exp-fab-stack,
html.wb-new .exp-fab-dock {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem;
  border-radius: 14px;
  background: #1d2622;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

html.wb-new .exp-fab {
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 2.5rem;
  padding: 0 0.9rem;
  border: 1px solid #34413b;
  border-radius: 9px;
  background: #2a3531;
  color: #eef0e8;
  font: 600 0.8rem var(--sans);
  box-shadow: none;
}

html.wb-new .exp-fab-edit,
html.wb-new .exp-fab-save {
  background: #e6c98e;
  border-color: #e6c98e;
  color: #1d2622;
}

html.wb-new .exp-fab[hidden] {
  display: none;
}

/* =====================================================================
   Everything else in the new look: cover, passes, travellers, split bill,
   edit forms, dialogs, recap frame.
   ===================================================================== */

/* ——— Trip detail → Cover ——— */
html.wb-new .nu-cover {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* Same 16:9 as the crop sheet and every cover card, so what you see here is what Explore shows. */
html.wb-new .nu-cover-photo {
  position: relative;
  display: grid;
  align-content: end;
  width: 100%;
  max-width: 44rem;
  aspect-ratio: 16 / 9;
  background-position: center;
  overflow: hidden;
  border-radius: 14px;
  background: var(--forest) center / cover no-repeat;
}

html.wb-new .nu-cover-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(40, 15, 15, 0.78));
}

html.wb-new .nu-cover-text {
  position: relative;
  padding: 1.2rem 1.4rem;
  color: #fff;
}

html.wb-new .nu-cover-text p {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f1d9cf;
}

html.wb-new .nu-cover-text h3 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 400;
}

html.wb-new .nu-cover-text h3 em {
  color: #e6c98e;
}

html.wb-new .nu-cover-text small {
  font-size: 0.85rem;
  opacity: 0.9;
}

html.wb-new .nu-swatch {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.2rem;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line);
}

/* ——— Flights: the mock's boarding pass ——— */
html.wb-new .nu-pass {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--cream);
}

html.wb-new .nu-pass-main {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
  padding: 1rem 1.2rem 1.1rem;
}

html.wb-new .nu-pass-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

html.wb-new .nu-pass-top b {
  color: var(--ink);
}

html.wb-new .nu-pass-logo {
  display: inline-grid;
  place-items: center;
  min-width: 1.9rem;
  height: 1.9rem;
  margin-right: 0.5rem;
  padding: 0 0.3rem;
  border-radius: 7px;
  background: color-mix(in srgb, var(--forest) 14%, var(--cream));
  color: var(--forest);
  font-size: 0.7rem;
  font-weight: 700;
}

html.wb-new .nu-pass-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(5.5rem, 1.2fr) minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
}

html.wb-new .nu-pass-end b {
  display: block;
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
}

html.wb-new .nu-pass-end strong {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9rem;
}

html.wb-new .nu-pass-end small {
  display: block;
  color: var(--ink-soft);
  font-size: 0.74rem;
}

html.wb-new .nu-pass-end.is-to {
  text-align: right;
}

html.wb-new .nu-pass-mid {
  display: grid;
  gap: 0.35rem;
  text-align: center;
  font-size: 0.72rem;
  color: var(--ink-soft);
}

html.wb-new .nu-pass-line {
  position: relative;
  height: 2px;
  background: repeating-linear-gradient(90deg, #c9c6b8 0 6px, transparent 6px 11px);
}

html.wb-new .nu-pass-line::after {
  content: "✈";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  padding: 0 0.35rem;
  background: var(--cream);
  color: var(--forest);
  font-size: 0.95rem;
}

html.wb-new .nu-pass-stub {
  display: grid;
  align-content: center;
  gap: 0.8rem;
  padding: 1rem;
  border-left: 2px dashed var(--line);
  background: color-mix(in srgb, var(--forest) 8%, var(--cream));
  font-size: 0.72rem;
  color: var(--ink-soft);
}

html.wb-new .nu-pass-stub b {
  display: block;
  font-size: 0.95rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

html.wb-new .nu-pass .flight-pass-disrupt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

@media (max-width: 36rem) {
  html.wb-new .nu-pass {
    grid-template-columns: minmax(0, 1fr);
  }

  html.wb-new .nu-pass-stub {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-left: 0;
    border-top: 2px dashed var(--line);
  }

  html.wb-new .nu-pass-end b {
    font-size: 1.9rem;
  }
}

html.wb-new .flight-section-head h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
}

html.wb-new .flight-section-head p {
  color: var(--ink-soft);
  font-size: 0.82rem;
}

html.wb-new .flight-section + .flight-section {
  margin-top: 1.4rem;
}

/* ——— Trip detail → Travellers ——— */
html.wb-new .traveller-row-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

html.wb-new .traveller-row strong {
  font-weight: 600;
}

/* (role chip colours live in styles.css: .traveller-role.is-*) */

html.wb-new .traveller-flights {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.55rem 0 0 2.8rem;
  padding: 0;
  list-style: none;
}

html.wb-new .traveller-flight {
  padding: 0.4rem 0.65rem;
  border-radius: 9px;
  background: var(--paper-2);
  font-size: 0.76rem;
}

html.wb-new .traveller-flight small {
  display: block;
  color: var(--ink-soft);
}

html.wb-new .traveller-noflights {
  margin: 0.3rem 0 0 2.8rem;
  color: var(--ink-soft);
  font-size: 0.76rem;
}

html.wb-new .traveller-chips-meta,
html.wb-new .traveller-head {
  margin-bottom: 0.7rem;
}

/* ——— Split bill ——— */
html.wb-new .ledger-block {
  overflow: hidden;
  margin-top: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
  box-shadow: none;
}

html.wb-new .ledger-head {
  padding: 0.75rem 0.95rem;
  background: none;
}

html.wb-new .ledger-head strong,
html.wb-new .ledger-head h3 {
  font-family: var(--sans);
  font-weight: 600;
}

html.wb-new .ledger-body {
  padding: 0 0.95rem 0.8rem;
  border-top: 1px solid var(--line);
}

html.wb-new .ledger-body .person {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  background: none;
}

html.wb-new .ledger-body .person:last-child {
  border-bottom: 0;
}

html.wb-new .settle-due-flag {
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
}

html.wb-new .fx-disclaimer {
  padding: 0.55rem 0.8rem;
  border-radius: 9px;
  background: var(--paper-2);
  color: var(--ink-soft);
  font-size: 0.76rem;
}

/* ——— Edit forms: paper fields, small caps labels. Not the Itinerary: its editor stays as it is. ——— */
html.wb-new .panel:not(#panel-itinerary) .wb-field {
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--ink-soft);
}

html.wb-new .panel:not(#panel-itinerary) .wb-field > span {
  letter-spacing: 0.06em;
}

html.wb-new .panel:not(#panel-itinerary) .wb-field input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html.wb-new .panel:not(#panel-itinerary) .wb-field select,
html.wb-new .panel:not(#panel-itinerary) .wb-field textarea,
html.wb-new .panel:not(#panel-itinerary) .wb-check-text,
html.wb-new .panel:not(#panel-itinerary) .wb-head input,
html.wb-new .panel:not(#panel-itinerary) .sheet-table input,
html.wb-new .panel:not(#panel-itinerary) .sheet-table select {
  min-height: 2.5rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font: 0.88rem var(--sans);
  color: var(--ink);
}

html.wb-new .panel:not(#panel-itinerary) .wb-field input:focus,
html.wb-new .panel:not(#panel-itinerary) .wb-field select:focus,
html.wb-new .panel:not(#panel-itinerary) .wb-field textarea:focus,
html.wb-new .panel:not(#panel-itinerary) .wb-check-text:focus,
html.wb-new .panel:not(#panel-itinerary) .sheet-table input:focus {
  border-color: var(--forest);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--forest) 18%, transparent);
}

html.wb-new .panel:not(#panel-itinerary) .wb-card,
html.wb-new .panel:not(#panel-itinerary) .wb-hotel,
html.wb-new .panel:not(#panel-itinerary) .wb-sos,
html.wb-new .panel:not(#panel-itinerary) .list-card,
html.wb-new .panel:not(#panel-itinerary) .flight-card.is-editing,
html.wb-new .panel:not(#panel-itinerary) .food-card.is-edit {
  border: 1px solid var(--line);
  border-radius: var(--nu-radius);
  background: var(--cream);
  box-shadow: none;
}

html.wb-new .panel:not(#panel-itinerary) .wb-sos {
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}

html.wb-new .panel:not(#panel-itinerary) .wb-sos h4,
html.wb-new .panel:not(#panel-itinerary) .list-card h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Tables used while editing (Food, Expenses) */
html.wb-new .panel:not(#panel-itinerary) .sheet-table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--nu-radius);
  background: var(--cream);
}

html.wb-new .panel:not(#panel-itinerary) .sheet-table th {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-soft);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

html.wb-new .panel:not(#panel-itinerary) .sheet-table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--line);
  background: none;
}

html.wb-new .panel:not(#panel-itinerary) .sheet-table tr:last-child td {
  border-bottom: 0;
}

/* Buttons everywhere */
html.wb-new .panel:not(#panel-itinerary) .btn-solid {
  min-height: 2.5rem;
  border-color: var(--forest);
  background: var(--forest);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

html.wb-new .panel:not(#panel-itinerary) .btn-quiet {
  min-height: 2.5rem;
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

html.wb-new .mast .btn-quiet,
html.wb-new .sheet-nav .btn-quiet {
  border-color: color-mix(in srgb, #fff 32%, transparent);
  background: color-mix(in srgb, #fff 8%, transparent);
  color: #fbf1e8;
}

/* ——— Dialogs ——— */
html.wb-new dialog.pass-modal {
  border: 0;
  border-radius: 14px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

html.wb-new dialog.pass-modal::backdrop {
  background: rgba(10, 14, 12, 0.55);
}

html.wb-new dialog.pass-modal h2 {
  font-family: var(--serif);
  font-weight: 400;
}

/* Form dialogs (settle, group cost, crew file, receipt, reviews, flight scan, options…) wear the
   branded confirm's look (shared/lb-confirm.css): cream card, sentence-case kicker, pill buttons,
   forest-green primary. Simple yes/no questions are LakbayConfirm itself. Fields / logic unchanged. */
html.wb-new dialog.pass-modal:not(.lbq) {
  border-radius: 1.2rem;
  background: #fffdf8;
  color: #1b2a23;
  font-family: "DM Sans", "Outfit", var(--sans), system-ui, sans-serif;
}

html.wb-new dialog.pass-modal:not(.lbq)::backdrop {
  background: rgba(19, 37, 30, 0.55);
}

html.wb-new dialog.pass-modal:not(.lbq) .pass-kicker {
  margin: 0 0 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #8a5a2b;
}

html.wb-new dialog.pass-modal:not(.lbq) h2 {
  font-family: "Playfair Display", "Fraunces", var(--serif), Georgia, serif;
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.2;
  color: #1f3d30;
}

html.wb-new dialog.pass-modal:not(.lbq) .pass-actions {
  gap: 0.55rem;
}

html.wb-new dialog.pass-modal:not(.lbq) .pass-actions :is(.btn-quiet, .btn-solid, .btn-danger) {
  min-height: 2.9rem;
  padding: 0 1rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

html.wb-new dialog.pass-modal:not(.lbq) .pass-actions .btn-quiet {
  border: 1px solid #d8cfbd;
  background: transparent;
  color: #1f3d30;
}

html.wb-new dialog.pass-modal:not(.lbq) .pass-actions .btn-solid {
  border: 0;
  background: #1f3d30;
  color: #fbf6ec;
}

html.wb-new dialog.pass-modal:not(.lbq) .pass-actions .btn-danger {
  border: 0;
  background: #b3261e;
  color: #fff;
}

html.wb-new dialog.pass-modal:not(.lbq) .pass-actions :is(.btn-quiet, .btn-solid, .btn-danger):focus-visible {
  outline: 3px solid #e6c98e;
  outline-offset: 2px;
}

html.wb-new .wb-opt-block {
  border-top-color: var(--line);
}

html.wb-new .wb-opt-block h3 {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
}

/* ——— Recap tab frame ——— */
html.wb-new .rc-tab {
  font-family: var(--sans);
}

html.wb-new .rc-tab h2,
html.wb-new .rc-tab h3 {
  font-family: var(--serif);
  font-weight: 400;
}

html.wb-new .rc-tab-head,
html.wb-new .rc-rate-card,
html.wb-new .rc-award-card {
  border-radius: 14px;
}

/* ——— Food cards: tidy the card text ——— */
html.wb-new .nu-food .food-kicker {
  color: var(--ink-soft);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

html.wb-new .nu-food .food-meta-view {
  gap: 0.5rem;
}

html.wb-new .nu-food .food-meta-cell {
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  background: var(--paper-2);
}

html.wb-new .nu-food .food-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

html.wb-new .nu-food .food-card-actions > * {
  border-radius: 8px;
}

/* =====================================================================
   Edit layouts from the mock (not the Itinerary editor), Itinerary views,
   and the dock's unsaved label.
   ===================================================================== */

/* ——— Dock: say there are unsaved changes, like the mock ——— */
/* “N unsaved” = fields that differ from the saved copy (workbook-new.js nuPaintUnsaved). */
html.wb-new .exp-fab-stack[data-nu-unsaved]:has(.exp-fab-save:not([hidden]))::before {
  content: attr(data-nu-unsaved);
  white-space: nowrap;
  padding: 0 0.4rem 0 0.3rem;
  color: #e6c98e;
  font: 600 0.78rem var(--sans);
}

/* ——— Trip detail → Cover (edit): wide preview, then two short fields a row (title + accent, workbook title + home
   currency), the long label and the tags full width (owner 2026-10-21: five fields in one row cut their text) ——— */
html.wb-new [data-detail-panel="cover"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  align-content: start;
  align-items: start;
}

html.wb-new [data-detail-panel="cover"] > .nu-cover {
  margin-bottom: 0.2rem;
}

html.wb-new [data-detail-panel="cover"] .nu-cover-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1rem;
  align-items: start;
}

/* One line per label, so the boxes in a row start on the same line. */
html.wb-new [data-detail-panel="cover"] .wb-field > span:first-child {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

html.wb-new [data-detail-panel="cover"] .wb-field :is(input, select) {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

html.wb-new [data-detail-panel="cover"] .wb-field .hint {
  white-space: normal;
}

@media (max-width: 600px) {
  html.wb-new [data-detail-panel="cover"] .nu-cover-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

html.wb-new .theme-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.3rem;
}

html.wb-new .theme-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

html.wb-new .theme-swatches button,
html.wb-new .theme-swatch {
  width: 2.1rem;
  height: 2.1rem;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line);
}

html.wb-new .theme-swatches button.is-on,
html.wb-new .theme-swatches button[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--ink);
}

html.wb-new .theme-pick {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream);
  font: 600 0.8rem var(--sans);
}


/* ——— Trip detail → Destinations (edit): one card per stop, fields in a grid ——— */
/* Edited in the Destinations window (at most 760 px wide): two fields a row, so a town like "General Luna, Surigao
   del Norte" fits (owner 2026-10-21). */
html.wb-new .detail-stop {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  align-content: start;
  align-items: start;
  margin-bottom: 0.9rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--nu-radius);
  background: var(--cream);
}

html.wb-new .detail-stop > .wb-head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

html.wb-new .detail-stop > .wb-head h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
}

html.wb-new .detail-stop .wb-row-2 {
  display: contents;
}

/* The tick box right beside its words, on the left (owner 2026-10-21: it sat far left with the words mid-row). */
html.wb-new .detail-oneway {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--nu-radius);
  background: var(--cream);
}

@media (max-width: 480px) {
  html.wb-new .detail-stop {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ——— Trip detail → Travellers (edit): one line per person ——— */
html.wb-new .detail-people {
  display: grid;
  gap: 0;
  margin: 0 0 0.8rem;
  padding: 0.3rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--nu-radius);
  background: var(--cream);
  list-style: none;
}

/* One grid for every row: face · name · roles (or the unlock note) · chip · Remove.
   Remove always sits in the last column, so the column lines up like the mock. */
html.wb-new .detail-people > li {
  display: grid;
  grid-template-columns: 2.4rem minmax(10rem, 1fr) minmax(12rem, 22rem) 4.2rem 6.2rem;
  column-gap: 0.8rem;
  align-items: center;
  padding: 0.65rem 0;
  border-top: 1px solid var(--line);
  background: none;
  box-shadow: none;
}

html.wb-new .detail-people .detail-person-main,
html.wb-new .detail-people .detail-person-actions {
  display: contents;
}

html.wb-new .detail-people .detail-person-main > :first-child {
  grid-column: 1;
  grid-row: 1;
}

html.wb-new .detail-people .detail-person-id {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

html.wb-new .detail-people .detail-person-id input {
  width: 100%;
}

html.wb-new .detail-people .wb-role-picks,
html.wb-new .detail-people .detail-person-unlock {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  margin: 0;
}

html.wb-new .detail-people .detail-person-unlock {
  max-width: 16rem;
  color: var(--ink-soft);
  font-size: 0.74rem;
  text-align: right;
}

html.wb-new .detail-people .wb-pending-chip {
  grid-column: 4;
  grid-row: 1;
  justify-self: center;
}

html.wb-new .detail-people .detail-person-remove {
  grid-column: 5;
  grid-row: 1;
  justify-self: end;
  padding: 0.35rem 0;
  border: 0;
  background: none;
  color: #a24a3c;
  font: 600 0.8rem var(--sans);
  cursor: pointer;
}

html.wb-new .detail-people .wb-warn {
  grid-column: 2 / -1;
  grid-row: 2;
  margin: 0.3rem 0 0;
}

@media (max-width: 64rem) {
  html.wb-new .detail-people > li {
    grid-template-columns: 2.4rem minmax(0, 1fr) auto 6.2rem;
    row-gap: 0.45rem;
  }

  html.wb-new .detail-people .wb-role-picks,
  html.wb-new .detail-people .detail-person-unlock {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-self: start;
    text-align: left;
  }

  html.wb-new .detail-people .wb-pending-chip {
    grid-column: 3;
  }

  html.wb-new .detail-people .detail-person-remove {
    grid-column: 4;
  }

  html.wb-new .detail-people .wb-warn {
    grid-row: 3;
  }
}

html.wb-new .detail-people > li:first-child {
  border-top: 0;
}

html.wb-new .detail-person-note {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

html.wb-new .wb-role-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

html.wb-new .detail-contrib {
  display: grid;
  gap: 0.55rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--nu-radius);
  background: var(--paper-2);
}

html.wb-new .detail-contrib-title {
  margin: 0;
  font: 600 0.92rem var(--sans);
  color: var(--ink);
}

html.wb-new .detail-contrib > .hint {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

/* The field label repeats the placeholder; keep it for screen readers only. */
html.wb-new .detail-contrib .plan-who-unified > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

html.wb-new .detail-contrib #wb-contrib-search {
  width: 100%;
}

html.wb-new .detail-contrib .detail-contrib-title ~ .detail-contrib-title {
  margin-top: 0.4rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

html.wb-new .detail-contrib .wb-invite-row .wb-person-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 4.6rem;
  gap: 0.8rem;
  align-items: center;
}

html.wb-new .detail-contrib .wb-revoke {
  justify-self: end;
  border: 0;
  background: none;
  color: #a24a3c;
  font: 600 0.8rem var(--sans);
  cursor: pointer;
}

/* ——— Prep (edit): cards with inline item fields ——— */
html.wb-new #panel-prep .prep-grid {
  display: grid;
  /* 20rem: edit rows carry a checkbox, the text, 🔗 📎 and × — at 17rem the text got ~90px. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 0.9rem;
  align-items: start;
}

html.wb-new #panel-prep .list-card {
  display: grid;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
}

html.wb-new #panel-prep .check-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border: 0;
  background: none;
}

html.wb-new #panel-prep .wb-check-text {
  flex: 1 1 auto;
  min-height: 2.2rem;
}

html.wb-new .prep-remove {
  border: 0;
  background: none;
  color: #a24a3c;
  font-size: 1.1rem;
  cursor: pointer;
}

html.wb-new .prep-add-item {
  justify-self: start;
  border: 0;
  background: none;
  color: var(--forest);
  font: 600 0.8rem var(--sans);
  cursor: pointer;
}

html.wb-new #panel-prep aside.know {
  margin-top: 0.9rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid #eadcb4;
  border-radius: var(--nu-radius);
  background: #f6f0de;
}

/* ——— Food (edit): the cards are the form ——— */
html.wb-new .nu-food.is-editing .food-card.is-edit {
  display: grid;
  gap: 0.6rem;
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--brick);
}

html.wb-new .nu-food .food-card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

/* ——— Hotel (edit): photo on the left, fields in a grid ——— */
html.wb-new .hotel-grid:has(.wb-hotel) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

html.wb-new .wb-hotel {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  overflow: hidden;
}

html.wb-new .wb-hotel > .hotel-media {
  height: 100%;
  min-height: 12rem;
  border-radius: 0;
}

html.wb-new .wb-hotel .hotel-body {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  align-content: start;
  padding: 1rem 1.1rem;
}

html.wb-new .wb-hotel .hotel-body .wb-row-2 {
  display: contents;
}

html.wb-new .wb-hotel .hotel-body [data-hotel-geo-i],
html.wb-new .wb-hotel .hotel-body > .wb-field:first-child,
html.wb-new .wb-hotel .hotel-body > button,
html.wb-new .wb-hotel .hotel-body > .hotel-booking-actions,
html.wb-new .wb-hotel .hotel-body > div:not(.wb-field):not(.wb-row-2) {
  grid-column: 1 / -1;
}

@media (max-width: 64rem) {
  html.wb-new .wb-hotel {
    grid-template-columns: minmax(0, 1fr);
  }

  html.wb-new .wb-hotel .hotel-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Hotel nights: a paper table in a card */
html.wb-new .wb-nights {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--nu-radius);
  background: var(--cream);
}

html.wb-new .wb-nights-label {
  font-family: var(--serif);
  font-size: 1.2rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

html.wb-new .hotel-nights {
  width: 100%;
  border: 0;
}

/* ——— Emergency (edit): one card per row, fields side by side ——— */
html.wb-new .wb-sos .wb-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 0.6rem;
  align-items: end;
  margin-bottom: 0.6rem;
  padding: 0.8rem 0.9rem;
}

@media (max-width: 64rem) {
  html.wb-new .wb-sos .wb-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ——— Flights (edit): the pass fields in a grid ——— */
html.wb-new .flight-edit-list {
  display: grid;
  gap: 0.9rem;
}

html.wb-new .flight-card.is-editing {
  padding: 1rem 1.1rem;
}

html.wb-new .flight-edit-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.7rem;
}

@media (max-width: 64rem) {
  html.wb-new .flight-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* In the flight window (34 rem): pairs a row — From | To, Leaves | Time, Lands | Time — so dates show in full
   (owner 2026-10-21: five columns cut them to "mm/dd/yy"). */
html.wb-new dialog.nu-flight-win .flight-edit-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

/* ——— Itinerary views ——— */
html.wb-new .nu-views {
  display: inline-flex;
  gap: 3px;
  margin-top: 0.6rem;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-2);
}

html.wb-new .nu-views button {
  min-height: 2.25rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink-soft);
  font: 500 0.82rem var(--sans);
  cursor: pointer;
}

html.wb-new .nu-views button[aria-pressed="true"] {
  background: var(--cream);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

html.wb-new .nu-itin.is-wide {
  grid-template-columns: minmax(0, 1fr);
}

html.wb-new .nu-timeline {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--nu-radius);
  background: var(--cream);
}

html.wb-new .nu-tl-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
}

html.wb-new .nu-tl-day {
  display: grid;
  padding: 0.2rem 0;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

html.wb-new .nu-tl-day b {
  font-size: 0.82rem;
}

html.wb-new .nu-tl-day small {
  color: var(--ink-soft);
  font-size: 0.7rem;
}

html.wb-new .nu-tl-track {
  position: relative;
  height: 2.2rem;
  overflow: hidden;
  border-radius: 8px;
  background: repeating-linear-gradient(90deg, #efeee6 0 calc(100% / 24 - 1px), #e4e3d9 calc(100% / 24 - 1px) calc(100% / 24));
}

html.wb-new .nu-tl-hours {
  position: relative;
  height: 1rem;
  font-size: 0.66rem;
  color: var(--ink-soft);
}

html.wb-new .nu-tl-hours span {
  position: absolute;
  top: 0;
}

html.wb-new .nu-tl-block {
  position: absolute;
  top: 3px;
  bottom: 3px;
  min-width: 4px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: currentColor;
  box-shadow: none;
  opacity: 0.85;
  cursor: pointer;
}

html.wb-new .nu-tl-block.is-on {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  opacity: 1;
}

html.wb-new .nu-tl-block.is-now {
  outline: 2px solid #2f7d57;
  outline-offset: 1px;
  opacity: 1;
}

html.wb-new .nu-tl-now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #2f7d57;
}

html.wb-new .nu-story {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 0.9rem;
}

html.wb-new .nu-story-day {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--nu-radius);
  background: var(--cream);
}

html.wb-new .nu-story-day.is-live {
  box-shadow: 0 0 0 2px #2f7d57 inset;
}

html.wb-new .nu-story-n {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
}

html.wb-new .nu-story-day ul {
  display: grid;
  gap: 0.25rem;
  margin: 0.2rem 0;
  padding: 0;
  list-style: none;
  font-size: 0.84rem;
}

html.wb-new .nu-story-day li span {
  display: inline-block;
  min-width: 4.3rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

html.wb-new .nu-story-day .nu-btn {
  justify-self: start;
  border: 0;
  background: none;
  padding: 0;
  min-height: 2rem;
  color: var(--forest);
}

/* Dock text in sentence case like the mock — not on the Itinerary (its editor stays as it is). */
html.wb-new .panel:not(#panel-itinerary) .exp-fab {
  letter-spacing: 0;
  text-transform: none;
}

/* Blue note with one action on the right (Flights: use my flights for Trip detail). */
html.wb-new .nu-guide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem 1rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: #eef3f6;
  color: #2d5470;
  font-size: 0.86rem;
}

html.wb-new .flight-apply-disclose {
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid #c9dbe6;
  border-radius: var(--nu-radius);
  background: #eef3f6;
  color: #2d5470;
}

html.wb-new .flight-apply-disclose h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
}

/* ——— LakBi notes: one window per destination (open while the stay is ahead or on) ——— */
html.wb-new .dest-notes-section {
  margin-top: 1.4rem;
  padding: 0;
  border: 0;
  background: none;
}

html.wb-new .dest-notes-head {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.8rem;
}

html.wb-new .dest-notes-head h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
}

html.wb-new .dest-notes-head p {
  color: var(--ink-soft);
  font-size: 0.84rem;
}

html.wb-new .dest-notes-list {
  display: grid;
  gap: 0.7rem;
}

html.wb-new .dest-notes-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--nu-radius);
  background: var(--cream);
  box-shadow: none;
}

html.wb-new .dest-notes-card.is-open {
  border-color: #d9d3bf;
  box-shadow: 0 6px 18px rgba(41, 60, 51, 0.06);
}

html.wb-new .dest-notes-toggle {
  gap: 0.8rem;
  min-height: 3.4rem;
  padding: 0.85rem 1.1rem;
  background: none;
  font-family: var(--sans);
  cursor: pointer;
}

html.wb-new .dest-notes-toggle > span {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--ink);
}

html.wb-new .dest-notes-toggle > span::before {
  content: "✦";
  margin-right: 0.55rem;
  color: #b8892f;
  font-size: 0.85rem;
  vertical-align: 2px;
}

html.wb-new .dest-notes-when {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-soft);
  font-size: 0.72rem;
  opacity: 1;
}

html.wb-new .dest-notes-when.is-now {
  background: #eaf4ed;
  color: #1f5a3d;
}

html.wb-new .dest-notes-when.is-next {
  background: #f6f0de;
  color: #6d5325;
}

html.wb-new .dest-notes-card:not(.is-open) .dest-notes-when.is-done {
  opacity: 0.8;
}

html.wb-new .dest-notes-card:has(.dest-notes-when.is-done):not(.is-open) .dest-notes-toggle > span {
  color: var(--ink-soft);
}

html.wb-new .dest-notes-toggle em {
  flex: 0 0 auto;
  opacity: 0.6;
}

html.wb-new .dest-notes-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 0.8rem;
  padding: 0.2rem 1.1rem 1.1rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

html.wb-new .dest-notes-body[hidden] {
  display: none;
}

html.wb-new .dest-notes-body > .lakbi-state,
html.wb-new .dest-notes-body > p {
  grid-column: 1 / -1;
}

html.wb-new .dest-notes-cat {
  padding: 0.85rem 0.95rem;
  border-radius: 10px;
  background: var(--paper);
}

html.wb-new .dest-notes-cat h4 {
  margin: 0 0 0.5rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

html.wb-new .dest-notes-ico {
  margin-right: 0.45rem;
  font-size: 0.95rem;
  letter-spacing: 0;
}

html.wb-new .dest-notes-cat ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

html.wb-new .dest-notes-cat li {
  display: grid;
  gap: 0.1rem;
  padding: 0 0 0 0.75rem;
  border-left: 3px solid var(--line);
  font-size: 0.86rem;
  line-height: 1.4;
}

html.wb-new .dest-notes-cat li strong {
  font-weight: 600;
  color: var(--ink);
}

html.wb-new .dest-notes-cat li span {
  color: var(--ink-soft);
}

html.wb-new .dest-notes-cat li.is-critical {
  border-left-color: #a8322a;
}

html.wb-new .dest-notes-cat li.is-critical strong {
  color: #8d2a23;
}

html.wb-new .dest-notes-cat li.is-caution {
  border-left-color: #c98a2b;
}

html.wb-new .dest-notes-cat li.is-info {
  border-left-color: #3e6d8e;
}

html.wb-new .dest-notes-loading,
html.wb-new .dest-notes-empty {
  color: var(--ink-soft);
  font-size: 0.86rem;
}

/* ——— Header like the mock: back on its own row, tools on that row at the right,
       the cover faint behind the title and the tabs ——— */
@media (min-width: 48rem) {
  html.wb-new .workbook::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1; /* under the header text; .workbook is its own stacking context */
    height: var(--nu-head-h, 0px);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--forest) 70%, transparent), color-mix(in srgb, var(--forest) 90%, transparent)),
      var(--nu-cover, none) center 40% / cover no-repeat,
      var(--forest);
    pointer-events: none;
  }

  html.wb-new .mast,
  html.wb-new .sheet-nav {
    background: transparent;
  }

  html.wb-new .mast {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.25rem max(1rem, 3%) 0.4rem;
  }

  html.wb-new .mast-top,
  html.wb-new .mast-full {
    grid-column: auto;
    grid-row: auto;
    margin: 0;
    padding: 0;
  }

  html.wb-new .mast-top {
    min-height: 2.6rem;
    margin-bottom: 0.9rem;
  }

  html.wb-new .mast-full {
    padding-right: 0;
  }

  /* The back arrow: a rounded square, level with the title below it. */
  html.wb-new .mast-back {
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid color-mix(in srgb, #fff 18%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, #fff 12%, transparent);
    color: #fbf1e8;
  }

  html.wb-new .mast-back:hover {
    background: color-mix(in srgb, #fff 20%, transparent);
  }

  html.wb-new .mast-back svg {
    width: 1.05rem;
    height: 1.05rem;
  }

  /* Tools on the back row, right side. */
  html.wb-new .sheet-nav-tray {
    top: 1.25rem;
    right: max(1rem, 3%);
    gap: 0.5rem;
  }

  html.wb-new .sheet-nav-tray .public-nav {
    gap: 0.5rem;
    padding: 0;
  }

  html.wb-new .sheet-nav-tray .public-nav-ico,
  html.wb-new .sheet-nav-tray .public-nav-label,
  html.wb-new .sheet-nav-tray #mast-publish.public-nav-label {
    min-width: 2.6rem;
    min-height: 2.6rem;
    padding: 0 0.85rem;
    border: 1px solid color-mix(in srgb, #fff 32%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, #fff 8%, transparent);
    color: #fbf1e8;
    font: 600 0.8rem var(--sans);
    letter-spacing: 0;
    text-transform: none;
  }

  html.wb-new .sheet-nav-tray .public-nav-ico {
    padding: 0;
  }

  html.wb-new .sheet-nav-tray #mast-publish.is-published {
    border-color: color-mix(in srgb, #fff 32%, transparent);
    background: color-mix(in srgb, #fff 8%, transparent);
  }

  html.wb-new .sheet-nav-tray .account-slot > * {
    min-height: 2.6rem;
    border: 1px solid color-mix(in srgb, #fff 32%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, #fff 8%, transparent);
    color: #fbf1e8;
  }

  html.wb-new .mast-kicker {
    font-size: 0.68rem;
  }

  html.wb-new .mast h1 {
    margin-top: 0.5rem;
    font-size: clamp(2rem, 3.4vw, 2.7rem);
  }

  html.wb-new .sheet-nav {
    border-bottom: 0;
  }
}

/* ——— Header, tighter: the back arrow shares the workbook-title line ——— */
@media (min-width: 48rem) {
  html.wb-new .mast {
    position: relative;
  }

  html.wb-new .mast-top {
    position: absolute;
    top: 1.25rem;
    left: max(1rem, 3%);
    z-index: 2;
    min-height: 0;
    margin: 0;
  }

  html.wb-new .mast-back {
    width: 2.4rem;
    height: 2.4rem;
  }

  html.wb-new .mast-kicker {
    display: flex;
    align-items: center;
    min-height: 2.4rem;
    padding-left: 3.1rem;
    padding-right: 18rem;
  }

  html.wb-new .mast h1 {
    margin-top: 0.35rem;
  }

  html.wb-new .sheet-nav-tray {
    top: calc(1.25rem - 0.1rem);
  }
}

/* ——— Crew faces like the mock: overlapping, ringed in the trip colour ——— */
html.wb-new .mast-avatars {
  display: inline-flex;
  align-items: center;
}

html.wb-new .mast-avatar {
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--forest);
  border-radius: 50%;
  box-shadow: none;
  font-size: 0.75rem;
  font-weight: 700;
}

html.wb-new .mast-avatar + .mast-avatar {
  margin-left: -0.55rem;
}

html.wb-new .mast-avatar.is-more {
  background: color-mix(in srgb, #fff 20%, transparent);
  color: #fbf1e8;
  font-size: 0.68rem;
}

/* ——— Live chip like the mock: bold, green, a pulsing dot ——— */
html.wb-new .mast-countdown-chip {
  padding: 0.4rem 0.9rem;
  font-size: 0.84rem;
  font-weight: 700;
}

html.wb-new .mast-countdown-chip.is-live {
  background: #2f7d57;
  color: #fff;
}

html.wb-new .mast-countdown-chip.is-live .mast-countdown-ico {
  display: none;
}

html.wb-new .mast-countdown-chip.is-live::before {
  content: "";
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #8fe0b3;
  animation: nu-pulse 2s ease-out infinite;
}

@keyframes nu-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(143, 224, 179, 0.7);
  }
  70% {
    box-shadow: 0 0 0 0.5rem rgba(143, 224, 179, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(143, 224, 179, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.wb-new .mast-countdown-chip.is-live::before {
    animation: none;
  }
}

html.wb-new .mast-countdown-chip strong {
  font-weight: 700;
}

/* ——— Flights while editing (mock): scan box, passes with Edit / Remove, one form open in place ——— */
html.wb-new .nu-drop {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  margin-bottom: 1.2rem;
  padding: 1.3rem 1rem;
  border: 2px dashed #cfc9b6;
  border-radius: var(--nu-radius);
  background: #faf8f1;
  color: var(--ink-soft);
  font-size: 0.86rem;
  text-align: center;
}

html.wb-new .nu-drop b {
  color: var(--ink);
  font-size: 0.95rem;
}

html.wb-new .nu-drop .nu-actions {
  margin-top: 0.4rem;
}

html.wb-new .nu-pass-form {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.6rem;
}

html.wb-new .nu-pass-form .nu-actions {
  justify-content: flex-end;
}

html.wb-new .nu-btn.is-danger {
  border-color: transparent;
  background: none;
  color: #a24a3c;
}

html.wb-new .nu-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ——— Slim bar once the header has scrolled away (mock) ——— */
html.wb-new .nu-mini {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem max(1rem, 3%);
  background: var(--forest);
  color: #fbf1e8;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

html.wb-new .nu-mini.is-on {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

html.wb-new .nu-mini strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font: 400 1.15rem var(--serif);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.wb-new .nu-mini-back {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, #fff 12%, transparent);
  color: #fbf1e8;
  font-size: 1.3rem;
  line-height: 1;
  text-decoration: none;
}

html.wb-new .nu-mini-badge {
  flex: 0 0 auto;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, #fff 16%, transparent);
  font-size: 0.74rem;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  html.wb-new .nu-mini {
    transition: none;
  }
}

@media (max-width: 47.99rem) {
  html.wb-new .nu-mini {
    display: none;
  }
}

/* ——— Itinerary view: the colours behind a small button (mock) ——— */
html.wb-new .nu-legend {
  position: relative;
  display: inline-block;
  margin: 0.6rem 0 0 0.5rem;
  vertical-align: top;
}

html.wb-new .nu-legend-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  display: grid;
  gap: 0.4rem;
  width: 13rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  font-size: 0.8rem;
}

html.wb-new .nu-legend-pop[hidden] {
  display: none;
}

html.wb-new .nu-legend-pop i {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  margin-right: 0.5rem;
  border-radius: 3px;
  background: currentColor;
  box-shadow: none;
  vertical-align: -1px;
}

/* ——— Food Places (view), the mock's card; buttons pinned to the bottom so rows line up ——— */
html.wb-new .nu-food-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-bottom: 1rem;
}

html.wb-new #panel-food .nu-food-bar .nu-chips {
  margin: 0;
}

html.wb-new .nu-food-bar > .nu-btn:only-child {
  margin-left: auto;
}

html.wb-new .nu-food-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
  gap: 0.9rem;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

html.wb-new .nu-food-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brick, #b0572f);
  border-radius: var(--nu-radius);
  background: var(--cream);
}

html.wb-new .nu-food-card h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.2;
}

html.wb-new .nu-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

html.wb-new .nu-tag {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 0.74rem;
  line-height: 1.5;
}

html.wb-new .nu-tag.is-when {
  background: #f7e7de;
  color: #8b3f1f;
  font-weight: 600;
}

html.wb-new .nu-tag.is-on {
  background: #eaf4ed;
  color: #1f5a3d;
  font-weight: 600;
}

html.wb-new .nu-food-area {
  display: block;
  font-size: 0.8rem;
}

html.wb-new .nu-food-rev {
  padding: 0.6rem 0.75rem;
  border-radius: 9px;
  background: var(--paper-2);
  font-size: 0.84rem;
}

html.wb-new .nu-food-rev p {
  margin-top: 0.3rem;
  color: var(--ink);
}

html.wb-new .nu-stars {
  color: #b8892f;
}

/* Everything above grows; the buttons always sit on the card's bottom edge. */
html.wb-new .nu-food-actions {
  margin-top: auto;
  padding-top: 0.35rem;
}

html.wb-new .nu-food-actions .nu-btn svg {
  display: none;
}

/* Map + schedule share one row, equal widths, on every card. */
html.wb-new .nu-food-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

html.wb-new .nu-food-actions .nu-btn {
  width: 100%;
  padding: 0.3rem 0.4rem;
  font-size: 0.8rem;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

html.wb-new .nu-food-card .nu-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brick, #b0572f);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

html.wb-new .nu-food-card .nu-link:hover {
  text-decoration: underline;
}

html.wb-new .nu-food-card .food-reviews-btn {
  align-self: flex-start;
  width: auto;
  min-height: 0;
  margin: 0;
  text-align: left;
}

/* Editing: Edit / Remove sit quietly under the buttons. */
html.wb-new .nu-food-manage {
  display: flex;
  justify-content: space-between;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--line);
}

html.wb-new .nu-food-card .nu-link.is-danger {
  color: var(--muted, #6b6b6b);
}

html.wb-new .nu-food-card .nu-link.is-danger:hover {
  color: #a3321c;
}

/* ——— Recap tab like the mock: gold text in the row, not the classic gold box.
       recap.css forces its box with !important (for phones), so this answers in kind. ——— */
html.wb-new .sheet-tabs [role="tab"].is-recap {
  overflow: visible;
  background: none !important;
  color: #f3d9a0 !important;
  font-weight: 600 !important;
  box-shadow: none;
  animation: none;
}

html.wb-new .sheet-tabs [role="tab"].is-recap::after {
  display: none;
}

html.wb-new .sheet-tabs [role="tab"].is-recap[aria-selected="true"] {
  color: #fff !important;
  border-bottom-color: #e6c98e !important;
  box-shadow: none;
}

html.wb-new .sheet-tabs [role="tab"].is-recap .rc-tab-spark {
  margin-right: 0.3rem;
}

/* ——— Recap as one page (new UI; shared/recap-ui.js layout "page") ——— */
html.wb-new .rc-tab--page {
  max-width: none;
  padding: 0;
}

html.wb-new .rc-page {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

html.wb-new .rc-page-sec {
  min-width: 0;
}

/* Order like the mock: hero, actions, summary, highlights · awards, memories, MVP · stamps, tips. */
html.wb-new .rc-page-sec--cover { order: 1; grid-column: 1 / -1; }
html.wb-new .rc-page-sec--actions { order: 2; grid-column: 1 / -1; }
html.wb-new .rc-page-sec--summary { order: 3; grid-column: 1 / -1; }
html.wb-new .rc-page-sec--highlights { order: 4; }
html.wb-new .rc-page-sec--awards { order: 6; grid-column: 1 / -1; }
html.wb-new .rc-page-sec--memories { order: 7; grid-column: 1 / -1; }
html.wb-new .rc-page-sec--mvp { order: 7; }
html.wb-new .rc-page-sec--stamps { order: 5; }
html.wb-new .rc-page-sec--tips { order: 9; grid-column: 1 / -1; }

@media (max-width: 64rem) {
  html.wb-new .rc-page {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Paper slides become plain cards, headings in the page serif. */
html.wb-new .rc-page .rc-story--paper,
html.wb-new .rc-tab .rc-page .rc-story--paper {
  min-height: 0;
  padding: 1.2rem 1.3rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--nu-radius);
  background: var(--cream);
  box-shadow: none;
}

html.wb-new .rc-page .rc-story--paper .rc-showcase-heading {
  padding: 0 0 0.8rem;
  text-align: left;
}

html.wb-new .rc-page .rc-story--paper .rc-showcase-heading h2 {
  margin: 0 0 0.3rem;
  font: 400 1.45rem/1.2 var(--serif);
  color: var(--ink);
}

html.wb-new .rc-page .rc-story--paper .rc-showcase-heading p {
  color: var(--ink-soft);
  font-size: 0.84rem;
}

/* The cover: wide hero, like the mock. */
html.wb-new .rc-page .rc-story--cover {
  overflow: hidden;
  border-radius: 16px;
}

html.wb-new .rc-page .rc-story--cover h1,
html.wb-new .rc-page .rc-story--cover h2 {
  font-family: var(--serif);
  font-weight: 400;
}

html.wb-new .rc-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

html.wb-new .rc-page-actions .rc-secondary {
  min-height: 2.5rem;
  padding: 0 0.9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream);
  color: var(--ink);
  font: 600 0.82rem var(--sans);
}

html.wb-new .rc-page-note {
  margin-top: 0.4rem;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

html.wb-new .rc-tab--page .rc-story-nav {
  display: none;
}

/* Summary: the travellers' words about the itinerary, under the rating. */
html.wb-new .rc-page .rc-story-summary > .rc-itin-notes {
  justify-self: stretch;
  width: 100%;
  grid-area: notes;
  margin: 1.1rem 0 0;
  text-align: left;
}

html.wb-new .rc-page .rc-itin-notes > .rc-kick {
  margin: 0 0 0.5rem;
  text-align: left;
}

html.wb-new .rc-page .rc-itin-notes ul {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

html.wb-new .rc-page .rc-itin-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid #e8cf94;
  border-radius: 12px;
  background: color-mix(in srgb, var(--cream) 60%, #fff);
}

html.wb-new .rc-page .rc-itin-note .rc-av {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
}

html.wb-new .rc-page .rc-itin-note-copy {
  min-width: 0;
  flex: 1;
}

html.wb-new .rc-page .rc-itin-note-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.6rem;
  font-size: 0.86rem;
  color: var(--ink);
}

html.wb-new .rc-page .rc-itin-note-stars {
  color: #b08a3e;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

html.wb-new .rc-page .rc-itin-note p,
html.wb-new .rc-page .rc-itin-note summary {
  margin: 0.2rem 0 0;
  color: var(--ink-soft);
  font: italic 400 0.9rem/1.5 var(--sans);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

html.wb-new .rc-page .rc-itin-note summary {
  cursor: pointer;
  list-style: none;
}

html.wb-new .rc-page .rc-itin-note summary::-webkit-details-marker {
  display: none;
}

html.wb-new .rc-page .rc-itin-note-toggle {
  font-style: normal;
  font-weight: 700;
  color: var(--forest);
}

html.wb-new .rc-page .rc-itin-note-more[open] summary {
  display: none;
}

/* Awards (page): MVP headline card on top, then the awards as a grid of ribbons with what each means. */
html.wb-new .rc-page .rc-mvp-feature {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0 0 1.1rem;
  padding: 1.2rem 1.5rem;
  border: 1px solid #e3c77f;
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, #fff6d9 0%, transparent 60%),
    linear-gradient(135deg, #f7e6b4, #f1d894 60%, #e9c877);
  box-shadow: 0 6px 18px #8a6a1f22;
}

html.wb-new .rc-page .rc-mvp-feature-faces {
  position: relative;
  display: flex;
  flex: 0 0 auto;
}

html.wb-new .rc-page .rc-mvp-feature-faces .rc-av {
  width: 88px;
  height: 88px;
  border: 4px solid #fff9ea;
  border-radius: 50%;
  box-shadow: 0 3px 8px #6b4f1433;
}

html.wb-new .rc-page .rc-mvp-feature-faces .rc-av + .rc-av {
  margin-left: -1.2rem;
}

html.wb-new .rc-page .rc-mvp-feature-trophy {
  position: absolute;
  top: -0.7rem;
  right: -0.6rem;
  font-size: 1.7rem;
  filter: drop-shadow(0 2px 2px #6b4f1440);
}

html.wb-new .rc-page .rc-mvp-feature-copy {
  display: grid;
  justify-items: start;
  gap: 0.2rem;
  min-width: 0;
}

html.wb-new .rc-page .rc-mvp-feature .rc-mvp-name {
  margin: 0.25rem 0 0;
  font-size: 1.9rem;
  text-align: left;
}

html.wb-new .rc-page .rc-mvp-feature-line {
  margin: 0;
  color: #5d4a22;
  font: 500 0.9rem/1.4 var(--sans);
}

html.wb-new .rc-page .rc-mvp-feature .rc-mvp-votes {
  margin: 0.15rem 0 0;
  text-align: left;
}

html.wb-new .rc-page .rc-award-showcase .rc-award-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

html.wb-new .rc-page .rc-award-showcase .rc-award-row {
  align-items: flex-start;
  height: 100%;
  margin: 0;
  transform: none;
}

html.wb-new .rc-page .rc-award-showcase .rc-award-row .rc-award-person {
  white-space: normal;
}

@media (max-width: 47.99rem) {
  html.wb-new .rc-page .rc-mvp-feature {
    flex-direction: column;
    text-align: center;
  }

  html.wb-new .rc-page .rc-mvp-feature-copy {
    justify-items: center;
  }

  html.wb-new .rc-page .rc-mvp-feature .rc-mvp-name,
  html.wb-new .rc-page .rc-mvp-feature .rc-mvp-votes {
    text-align: center;
  }
}

/* Page mode: polaroid on the left; dates, title, line, numbers and rating stacked beside it. */
html.wb-new .rc-page .rc-story-summary {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  grid-template-areas:
    "photo kick"
    "photo title"
    "photo sub"
    "photo stats"
    "photo score"
    "photo notes";
  grid-template-rows: auto auto auto auto auto 1fr;
  column-gap: 2.4rem;
  row-gap: 0;
  align-items: start;
  text-align: left;
  padding: 1.6rem 2rem;
}

html.wb-new .rc-page .rc-story-summary > .rc-kick { grid-area: kick; justify-self: start; margin: 0.4rem 0 0.35rem; text-align: left; }
html.wb-new .rc-page .rc-story-summary > .rc-title { grid-area: title; justify-self: start; margin: 0; text-align: left; }
html.wb-new .rc-page .rc-story-summary > .rc-sub { grid-area: sub; justify-self: start; max-width: none; margin: 0.35rem 0 1.2rem; text-align: left; color: var(--ink-soft); }
html.wb-new .rc-page .rc-story-summary > .rc-summary-photo { grid-area: photo; align-self: center; }
/* the official trip recap beside the wrap (owner 2026-10-14): its poster / player takes the photo's place */
html.wb-new .rc-page .rc-story-summary > .rc-summary-player { grid-area: photo; align-self: start; }

html.wb-new .rc-page .rc-story-summary > .rc-summary-stats {
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
  width: 100%;
}

html.wb-new .rc-page .rc-summary-stats > div {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  padding: 0.8rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--cream) 70%, #fff);
}

html.wb-new .rc-page .rc-summary-stats > div > span {
  color: var(--brick, #b5433c);
  font-size: 1rem;
}

html.wb-new .rc-page .rc-story-summary > .rc-score {
  grid-area: score;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.8rem;
  justify-self: start;
  margin: 0.9rem 0 0;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: color-mix(in srgb, #e8cf94 30%, transparent);
  text-align: left;
}

html.wb-new .rc-page .rc-story-summary > .rc-score .rc-score-num {
  font-size: 1.8rem;
  line-height: 1;
}

html.wb-new .rc-page .rc-story-summary > .rc-score .rc-sub {
  margin: 0;
}

html.wb-new .rc-page .rc-summary-photo {
  width: 100%;
  max-width: 20rem;
  margin: 0;
}

html.wb-new .rc-page .rc-summary-photo img {
  width: 100%;
  height: auto;
  max-height: 17rem;
  object-fit: cover;
}

html.wb-new .rc-page .rc-highlight img,
html.wb-new .rc-page .rc-highlight-placeholder {
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
}

html.wb-new .rc-page .rc-highlight--place img,
html.wb-new .rc-page .rc-highlight--place .rc-highlight-placeholder {
  aspect-ratio: 2 / 1;
}

@media (max-width: 47.99rem) {
  html.wb-new .rc-page .rc-story-summary {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kick" "title" "sub" "photo" "stats" "score" "notes";
    grid-template-rows: none;
    padding: 1.2rem;
  }

  html.wb-new .rc-page .rc-story-summary > .rc-summary-photo {
    justify-self: center;
    margin-bottom: 1rem;
  }

  html.wb-new .rc-page .rc-story-summary > .rc-summary-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ——— Expenses · Split bill as tabs under the summary card ——— */
html.wb-new .nu-exp-tabs {
  margin: 0.2rem 0 1rem;
}

html.wb-new .detail-subtabs button[aria-selected="true"] {
  background: var(--cream);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

html.wb-new .nu-exp-tabs small {
  margin-left: 0.3rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-soft);
  font-size: 0.7rem;
}

html.wb-new .nu-exp-pane[hidden] {
  display: none;
}

/* "Split booked costs" (owner-approved mock C, 2026-10-16): one wide button above the Split bill list (app twin:
   mobile workbook-new.css). The form it runs each cost through stays out of sight. */
html.wb-new .exp-split-batch {
  display: grid;
  gap: 0.1rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--forest);
  border-radius: var(--nu-radius);
  background: var(--paper);
  color: var(--forest);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
html.wb-new .exp-split-batch b { font-size: 0.95rem; }
html.wb-new .exp-split-batch small { font-size: 0.8rem; color: var(--ink-soft); }
html.wb-new .exp-split-batch:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
/* Empty Expenses: the add is right under the words (W-73, 2026-10-21). */
html.wb-new .exp-empty-add { justify-self: start; margin-top: 0.6rem; min-height: 2.4rem; padding: 0 1rem; border: 1px solid var(--forest); border-radius: 999px; background: #fff; color: var(--forest); font: inherit; font-weight: 700; cursor: pointer; }
html.wb-new .exp-empty-add:hover { background: color-mix(in srgb, var(--forest) 8%, #fff); }
#settle-modal.is-batch { opacity: 0; pointer-events: none; }

/* ——— Split bill (mock): one panel — title + help, filters, then the rows ——— */
html.wb-new [data-nu-exp-pane="split"] .settle-wrap {
  display: grid;
  gap: 0.8rem;
  /* No panel or grey well around the bills (W-32, 2026-10-21): bill card → its people's lines, nothing more. */
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

html.wb-new [data-nu-exp-pane="split"] .exp-table-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  margin: 0;
}

html.wb-new [data-nu-exp-pane="split"] .exp-table-head p {
  max-width: 34rem;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

/* Filters in one row: traveller · All / Due / Paid chips · search. */
html.wb-new [data-nu-exp-pane="split"] .nu-settle-chips {
  order: 0;
}

html.wb-new [data-nu-exp-pane="split"] .exp-table-tools.is-settle {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
  padding: 0;
  border: 0;
  background: none;
}

html.wb-new [data-nu-exp-pane="split"] .exp-table-tools.is-settle label {
  display: grid;
  gap: 0.25rem;
  min-width: 11rem;
}

html.wb-new [data-nu-exp-pane="split"] .exp-table-tools.is-settle label:has(#settle-search) {
  flex: 1 1 14rem;
}

/* The chips replace the status dropdown (it still does the filtering). */
html.wb-new [data-nu-exp-pane="split"] .exp-table-tools.is-settle label:has(#settle-status-filter) {
  display: none;
}

html.wb-new [data-nu-exp-pane="split"] .exp-table-tools.is-settle label > span {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

html.wb-new [data-nu-exp-pane="split"] .settle-list {
  display: grid;
  gap: 0.6rem;
  padding: 0;
  background: none;
}

/* A split row: item + who collects on the left, total + x/N paid on the right. */
html.wb-new [data-nu-exp-pane="split"] .ledger-block {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
  box-shadow: none;
}

html.wb-new [data-nu-exp-pane="split"] .ledger-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

html.wb-new [data-nu-exp-pane="split"] .ledger-toggle > span:first-child {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

html.wb-new [data-nu-exp-pane="split"] .ledger-toggle strong {
  font-size: 0.95rem;
  font-weight: 600;
}

html.wb-new [data-nu-exp-pane="split"] .ledger-toggle small {
  color: var(--ink-soft);
  font-size: 0.76rem;
}

html.wb-new .nu-settle-end {
  display: grid;
  justify-items: end;
  gap: 0.2rem;
  flex: 0 0 auto;
}

html.wb-new .nu-settle-end b {
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

html.wb-new .nu-settle-paid {
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--warn-bg, #fbeee0);
  color: var(--warn, #8a5a1f);
  font-size: 0.7rem;
  font-weight: 700;
}

html.wb-new .nu-settle-paid.is-done {
  background: #eaf4ed;
  color: #1f5a3d;
}

html.wb-new [data-nu-exp-pane="split"] .ledger-block.is-open {
  border-color: #d3cdb9;
}

html.wb-new [data-nu-exp-pane="split"] .ledger-block:not(.is-open) .ledger-body {
  display: none;
}

/* Open split: a light facts band, then the people as tiles (paid ones turn green). */
html.wb-new [data-nu-exp-pane="split"] .ledger-body {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--line);
}

html.wb-new [data-nu-exp-pane="split"] .ledger-head {
  margin: 0 -1rem 0.8rem;
  padding: 0.75rem 1rem;
  border: 0;
  background: var(--paper-2);
}

html.wb-new [data-nu-exp-pane="split"] .ledger-head h3 {
  display: none; /* the row above already names it */
}

html.wb-new [data-nu-exp-pane="split"] .ledger-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
}

html.wb-new [data-nu-exp-pane="split"] .ledger-facts span {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

html.wb-new [data-nu-exp-pane="split"] .people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
  gap: 0.5rem;
  border: 0;
}

html.wb-new [data-nu-exp-pane="split"] .people .person {
  display: grid;
  gap: 0.15rem;
  align-content: start;
  min-height: 4.6rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--cream);
}

html.wb-new [data-nu-exp-pane="split"] .people .person.paid {
  border-color: #cfe0cc;
  background: #e8f1e4;
}

html.wb-new [data-nu-exp-pane="split"] .people .person.is-collect {
  background: var(--paper-2);
}

html.wb-new [data-nu-exp-pane="split"] .people .person b {
  font-size: 0.86rem;
}

html.wb-new [data-nu-exp-pane="split"] .people .pay-status {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a24a3c;
}

html.wb-new [data-nu-exp-pane="split"] .people .person.paid .pay-status {
  color: #2f7d57;
}

html.wb-new [data-nu-exp-pane="split"] .people .pay-status.is-collect {
  color: var(--forest);
}

/* ——— Travellers (view): roomier rows, role chips, flights as small passes ——— */
html.wb-new .traveller-row-head strong {
  font-size: 0.98rem;
}

html.wb-new .traveller-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

html.wb-new .traveller-role {
  padding: 0.22rem 0.6rem;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
}

html.wb-new .traveller-flight {
  display: grid;
  gap: 0.15rem;
  padding: 0.55rem 0.8rem 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-left: 3px solid #3e6d8e;
  border-radius: 9px;
  background: var(--cream);
}

html.wb-new .traveller-flight strong {
  font-size: 0.86rem;
}

html.wb-new .traveller-flight strong span {
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: #e4eef5;
  color: #2d5f82;
  font-size: 0.68rem;
  font-weight: 700;
}

/* Cover focal point: drag the wide preview while editing. */
html.wb-new .nu-cover-photo.is-focusable {
  cursor: grab;
  touch-action: none;
}

html.wb-new .nu-cover-photo.is-dragging {
  cursor: grabbing;
}

/* The photo is a layer under the shade + title so the saved zoom scales inside the frame. */
html.wb-new .nu-cover-photo {
  z-index: 0;
}

html.wb-new .nu-cover-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}

/* Cover zoom: − 1.4× + Reset under the preview (same row in the app). */
html.wb-new .cover-zoom-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

html.wb-new .cover-zoom-btn {
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 0.7rem;
  border: 1px solid rgba(30, 58, 47, 0.2);
  border-radius: 999px;
  background: #fff;
  color: var(--forest);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

html.wb-new .cover-zoom-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

html.wb-new .cover-zoom-value {
  min-width: 3.2rem;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Travellers (edit): one list with dividers (no box per row); Remove is a small outlined button. */
html.wb-new .detail-people > li,
html.wb-new .detail-people > li.detail-person {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

html.wb-new .detail-people > li:first-child {
  border-top: 0;
}

html.wb-new .detail-people .detail-person-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 2.1rem;
  padding: 0 0.7rem;
  border: 1px solid #ecd3cd;
  border-radius: 8px;
  background: #fff;
  color: #a24a3c;
  font: 600 0.76rem var(--sans);
}

html.wb-new .detail-people .detail-person-remove:hover {
  border-color: #a24a3c;
  background: #fbeeea;
}

html.wb-new .detail-people .detail-person-remove::before {
  content: "✕";
  font-size: 0.7rem;
}

/* Can't remove (owner, finished trip, a name in use…): a lock that says why on hover / focus. App twin:
   mobile/www/css/workbook-new.css .detail-person-lock. */
html.wb-new .detail-people .detail-person-lock {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink-soft);
  cursor: help;
}
html.wb-new .detail-people .detail-person-lock svg {
  width: 0.95rem;
  height: 0.95rem;
}
html.wb-new .detail-people .detail-person-lock::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 6;
  width: max-content;
  max-width: 16rem;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  background: #1f2a24;
  color: #fff;
  font: 500 0.76rem/1.4 var(--sans);
  text-align: left;
  white-space: normal;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
html.wb-new .detail-people .detail-person-lock:hover::after,
html.wb-new .detail-people .detail-person-lock:focus-visible::after {
  opacity: 1;
  transform: none;
}
html.wb-new .detail-people .detail-person-lock:hover,
html.wb-new .detail-people .detail-person-lock:focus-visible {
  border-color: var(--forest);
  color: var(--forest);
}

/* ——— Reviews panel (Google-style) ——— */
html.wb-new .nu-rv {
  display: grid;
  gap: 0.9rem;
}

html.wb-new .nu-rv-sum {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: center;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}

html.wb-new .nu-rv-bars {
  display: grid;
  gap: 0.3rem;
}

html.wb-new .nu-rv-bar {
  display: grid;
  grid-template-columns: 0.8rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: center;
  color: var(--muted, #6b6b6b);
  font-size: 0.8rem;
}

html.wb-new .nu-rv-bar b {
  height: 0.55rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--paper-2, #efece4);
}

html.wb-new .nu-rv-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #e2a93b;
}

html.wb-new .nu-rv-avg {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  min-width: 6.5rem;
}

html.wb-new .nu-rv-avg strong {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1;
}

html.wb-new .nu-rv-avg small {
  color: var(--muted, #6b6b6b);
  font-size: 0.8rem;
}

html.wb-new .nu-rv-stars {
  color: #e2a93b;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}

html.wb-new .nu-rv-stars i {
  color: #d9d4c7;
  font-style: normal;
}

html.wb-new .nu-rv-write-row {
  display: flex;
  justify-content: center;
}

html.wb-new .nu-rv-write {
  padding: 0.55rem 1.2rem;
  border: 0;
  border-radius: 999px;
  background: #eaf4ed;
  color: #1f5a3d;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

html.wb-new .nu-rv-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}

html.wb-new .nu-rv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
}

html.wb-new .nu-rv-chip,
html.wb-new .nu-rv-sort {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

html.wb-new .nu-rv-chip small {
  margin-left: 0.2rem;
  color: var(--muted, #6b6b6b);
}

html.wb-new .nu-rv-chip[aria-pressed="true"] {
  border-color: transparent;
  background: #eaf4ed;
  color: #1f5a3d;
  font-weight: 600;
}

html.wb-new .nu-rv-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

html.wb-new .nu-rv-item {
  display: grid;
  gap: 0.35rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
}

html.wb-new .nu-rv-item.is-mine {
  padding: 0.9rem 0.8rem;
  border: 1px solid #cfe0d4;
  border-radius: 10px;
  background: #f3f8f4;
}

html.wb-new .nu-rv-who {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

html.wb-new .nu-rv-avatar {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: #f7e7de;
  color: #8b3f1f;
  font-weight: 700;
}

html.wb-new .nu-rv-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

html.wb-new .nu-rv-when {
  color: var(--muted, #6b6b6b);
  font-size: 0.8rem;
}

html.wb-new .nu-rv-tags {
  color: var(--muted, #6b6b6b);
  font-size: 0.82rem;
}

html.wb-new .nu-rv-note {
  white-space: pre-line;
}

html.wb-new .nu-rv-note.is-clamped {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

html.wb-new .nu-rv-more {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: #1f6f8b;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

html.wb-new .nu-rv-photo {
  width: 100%;
  max-height: 18rem;
  border-radius: 10px;
  object-fit: cover;
}

html.wb-new .nu-rv-mine-actions {
  display: flex;
  gap: 1rem;
}

html.wb-new .nu-rv .nu-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brick, #b0572f);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

html.wb-new .nu-rv .nu-link.is-danger {
  color: var(--muted, #6b6b6b);
}

/* ——— Food cards with a photo header ——— */
html.wb-new .nu-food-card.has-media {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-left-width: 1px;
  box-shadow: 0 1px 2px rgba(31, 42, 36, 0.05);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

html.wb-new .nu-food-card.has-media:hover {
  box-shadow: 0 10px 24px rgba(31, 42, 36, 0.1);
  transform: translateY(-2px);
}

html.wb-new .nu-food-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #efe7da;
}

html.wb-new .nu-food-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

html.wb-new .nu-food-card:hover .nu-food-photo {
  transform: scale(1.04);
}

/* No photo yet: a warm illustrated tile per meal. */
html.wb-new .nu-food-media.is-art {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.35), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(255, 255, 255, 0.2), transparent 40%),
    var(--nu-food-art, linear-gradient(135deg, #f3dcc4, #e7b98f));
}

html.wb-new .nu-food-media.is-lunch { --nu-food-art: linear-gradient(135deg, #f6dfb8, #e9a864); }
html.wb-new .nu-food-media.is-dinner { --nu-food-art: linear-gradient(135deg, #e9c3b1, #b8653f); }
html.wb-new .nu-food-media.is-brunch { --nu-food-art: linear-gradient(135deg, #f4e6c9, #d9b27a); }
html.wb-new .nu-food-media.is-party { --nu-food-art: linear-gradient(135deg, #d9cbe8, #7d5ea8); }
html.wb-new .nu-food-media.is-snack { --nu-food-art: linear-gradient(135deg, #f7d9e0, #de8fa3); }

html.wb-new .nu-food-art {
  font-size: 3.2rem;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18));
}

/* Chips on the image. */
html.wb-new .nu-food-over {
  position: absolute;
  inset: 0.65rem 0.65rem auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.4rem;
  pointer-events: none;
}

html.wb-new .nu-food-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.92);
  color: #263b32; /* dark, not the old orange (one set of colours, 2026-10-11) */
  font-size: 0.74rem;
  font-weight: 700;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

html.wb-new .nu-food-pill.is-rating {
  color: #7a5a14;
}

html.wb-new .nu-food-pill.is-rating small {
  color: #8e877b;
  font-weight: 600;
}

html.wb-new .nu-food-pill.is-slot {
  position: absolute;
  left: 0.65rem;
  bottom: 0.65rem;
  background: rgba(31, 90, 61, 0.9);
  color: #fff;
}

html.wb-new .nu-food-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9rem 1rem 1rem;
}

html.wb-new .nu-food-body h3 {
  margin: 0;
}

html.wb-new .nu-food-facts {
  display: grid;
  gap: 0.2rem;
  color: var(--muted, #6b6b6b);
  font-size: 0.82rem;
}

html.wb-new .nu-food-quote {
  margin: 0.1rem 0 0;
  padding: 0.1rem 0 0.1rem 0.7rem;
  border-left: 3px solid #e2a93b;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.35;
}

html.wb-new .nu-food-none {
  font-size: 0.82rem;
}

/* Sheet toasts (saved, LakBi errors…) float where you can see them — in the header row they had no width. */
html.wb-new .exp-toast:not([hidden]) {
  position: fixed;
  left: 50%;
  bottom: 5.5rem;
  z-index: 13000;
  width: max-content;
  max-width: min(92vw, 34rem);
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background: #1f2a24;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  /* Long notes (hotel import summary) wrap instead of ellipsing mid-sentence. */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  transform: translateX(-50%);
}

html.wb-new .exp-toast.is-warn:not([hidden]) {
  background: #a3321c;
  color: #fff;
}

/* ——— Trip detail · Destinations: journey strip ——— */
html.wb-new .nu-jr {
  display: grid;
  gap: 0.9rem;
}

html.wb-new .nu-jr-track {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  padding: 0.2rem 0.1rem 0.6rem;
  scrollbar-width: thin;
}

html.wb-new .nu-jr-home {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  min-width: 9.5rem;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  background: linear-gradient(160deg, #1e3a2f, #2b4f40);
  color: #f3efe2;
}

html.wb-new .nu-jr-homeico {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  font-size: 1.05rem;
}

html.wb-new .nu-jr-home small {
  display: block;
  color: #e6c98e;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html.wb-new .nu-jr-home strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.15;
}

html.wb-new .nu-jr-home span:last-child {
  color: rgba(243, 239, 226, 0.75);
  font-size: 0.8rem;
}

/* The flight between two places. */
html.wb-new .nu-jr-leg {
  position: relative;
  display: grid;
  flex: 0 0 5.2rem;
  place-items: center;
  align-content: center;
  gap: 0.3rem;
  padding: 0 0.3rem;
}

html.wb-new .nu-jr-leg::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 2px dashed #cbbd9b;
}

html.wb-new .nu-jr-plane {
  position: relative;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 0 2px #cbbd9b;
  color: #8b3f1f;
  font-size: 0.95rem;
}

html.wb-new .nu-jr-leg small {
  position: relative;
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

/* A destination. */
html.wb-new .nu-jr-stop {
  display: flex;
  flex: 1 0 17rem;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 17rem;
  padding: 1rem 1.15rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--cream);
  box-shadow: 0 1px 2px rgba(31, 42, 36, 0.04);
}

html.wb-new .nu-jr.is-single .nu-jr-stop {
  flex-basis: 24rem;
}

html.wb-new .nu-jr-stop.is-here {
  border-color: #2f7d57;
  box-shadow: 0 0 0 3px rgba(47, 125, 87, 0.15);
}

html.wb-new .nu-jr-stop.is-done {
  opacity: 0.78;
}

html.wb-new .nu-jr-stop header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

html.wb-new .nu-jr-n {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: #b0572f;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

html.wb-new .nu-jr-country {
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
}

html.wb-new .nu-jr-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

html.wb-new .nu-jr-chip.is-here {
  background: #e3f1e8;
  color: #1f5a3d;
}

html.wb-new .nu-jr-chip.is-here i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #2f7d57;
  box-shadow: 0 0 0 3px rgba(47, 125, 87, 0.2);
}

html.wb-new .nu-jr-chip.is-next {
  background: #f6ecd6;
  color: #7a5a14;
}

html.wb-new .nu-jr-chip.is-done {
  background: var(--paper-2);
  color: var(--ink-soft);
}

html.wb-new .nu-jr-stop h4 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.1;
}

html.wb-new .nu-jr-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
}

html.wb-new .nu-jr-dates b {
  margin-left: auto;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: #f6ecd6;
  color: #7a5a14;
  font-size: 0.74rem;
}

html.wb-new .nu-jr-stay {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: var(--paper);
  font-size: 0.84rem;
}

html.wb-new .nu-jr-stay.is-empty {
  color: var(--ink-soft);
  font-style: italic;
}

html.wb-new .nu-jr-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: auto 0 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

/* Trip progress + facts. */
html.wb-new .nu-jr-progress {
  display: grid;
  gap: 0.5rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--cream);
}

html.wb-new .nu-jr-progress > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

html.wb-new .nu-jr-progress strong {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
}

html.wb-new .nu-jr-progress span {
  color: var(--ink-soft);
  font-size: 0.82rem;
}

html.wb-new .nu-jr-progress b {
  position: relative;
  height: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--paper-2);
}

html.wb-new .nu-jr-progress b::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, #2f7d57, #6fb28d);
}

html.wb-new .nu-jr-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.6rem;
}

html.wb-new .nu-jr-facts > div {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.65rem;
  align-items: center;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--cream);
}

html.wb-new .nu-jr-facts > div > span {
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 10px;
  background: var(--paper);
  font-size: 1rem;
}

html.wb-new .nu-jr-facts small {
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

html.wb-new .nu-jr-facts strong {
  font-size: 0.95rem;
  font-weight: 600;
}

/* Home time card: stop zones that differ from home (display only). */
html.wb-new .nu-jr-facts .nu-jr-zones {
  grid-column: 2;
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-style: normal;
}

/* Phones: the journey reads top to bottom. */
@media (max-width: 720px) {
  html.wb-new .nu-jr-track {
    flex-direction: column;
    overflow: visible;
  }

  html.wb-new .nu-jr-stop,
  html.wb-new .nu-jr-home {
    min-width: 0;
  }

  html.wb-new .nu-jr-leg {
    flex-basis: 3.6rem;
    grid-auto-flow: column;
  }

  html.wb-new .nu-jr-leg::before {
    top: 0;
    bottom: 0;
    left: 50%;
    right: auto;
    border-top: 0;
    border-left: 2px dashed #cbbd9b;
  }
}

/* ——— Food card added from LakBi: golden border + shine ——— */
html.wb-new .nu-food-card.is-lakbi {
  position: relative;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--cream), var(--cream)) padding-box,
    linear-gradient(135deg, #f7e2a6, #d4a441 30%, #fff3c8 50%, #c8912c 70%, #f3d58a) border-box;
  box-shadow: 0 0 0 1px rgba(212, 164, 65, 0.15), 0 8px 22px rgba(200, 145, 44, 0.18);
}

/* A slow shine sweeping across the photo. */
html.wb-new .nu-food-card.is-lakbi .nu-food-media::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* The shine moves with a transform (compositor) instead of background-position (a
     repaint of every photo on every frame). Same picture as before: the 250%-wide
     gradient tile sits 90% of the photo width into a 340%-wide box (its repeat fills the
     left), and the box travels from the old 150% position to the old -60% one (app: same). */
  width: 340%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 240, 190, 0.55) 45%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 240, 190, 0.55) 55%, transparent 70%);
  background-size: 73.5294% 100%;
  background-position: 100% 0;
  background-repeat: repeat-x;
  transform: translateX(-92.6471%);
  mix-blend-mode: soft-light;
  animation: nu-gold-shine 4.5s ease-in-out infinite;
}

@keyframes nu-gold-shine {
  0%, 55% { transform: translateX(-92.6471%); }
  100% { transform: translateX(0); }
}

html.wb-new .nu-food-lakbi {
  position: absolute;
  left: 0.65rem;
  bottom: 0.65rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #f7e2a6, #d4a441 45%, #f3d58a);
  color: #4a3208;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(160, 110, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* When a schedule chip is also there, lift the LakBi badge above it. */
html.wb-new .nu-food-card.is-lakbi .nu-food-pill.is-slot + .nu-food-lakbi {
  bottom: 2.6rem;
}

html.wb-new .nu-food-card.is-lakbi:hover {
  box-shadow: 0 0 0 1px rgba(212, 164, 65, 0.3), 0 14px 30px rgba(200, 145, 44, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  html.wb-new .nu-food-card.is-lakbi .nu-food-media::after {
    animation: none;
    display: none;
  }
}

/* ——— Destinations: how you travel between stops ——— */
html.wb-new button.nu-jr-leg {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

html.wb-new .nu-jr-leg.is-pickable:hover .nu-jr-plane,
html.wb-new .nu-jr-leg.is-pickable:focus-visible .nu-jr-plane {
  box-shadow: 0 0 0 2px #b0572f;
  transform: scale(1.08);
}

html.wb-new .nu-jr-plane {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

html.wb-new .nu-jr-leg small {
  max-width: 6.5rem;
}

html.wb-new .nu-jr-leg.is-missing .nu-jr-plane {
  box-shadow: 0 0 0 2px #e2a93b;
  opacity: 0.8;
}

html.wb-new .nu-jr-leg.is-missing small {
  color: #8a5a1f;
  font-style: italic;
}

html.wb-new .nu-jr-chip.is-moving {
  background: #fbefe0;
  color: #8a5a1f;
}

.nu-leg-picker {
  position: absolute;
  z-index: 13000;
  display: grid;
  gap: 0.15rem;
  width: 12rem;
  padding: 0.5rem;
  border: 1px solid #e3dccb;
  border-radius: 14px;
  background: #fffcf7;
  box-shadow: 0 14px 34px rgba(19, 37, 30, 0.2);
}

.nu-leg-picker p {
  margin: 0.15rem 0.4rem 0.35rem;
  color: #6b6b6b;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nu-leg-picker button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.55rem;
  border: 0;
  border-radius: 9px;
  background: none;
  color: #293c33;
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}

.nu-leg-picker button:hover {
  background: #f3eee2;
}

.nu-leg-picker button span {
  width: 1.4rem;
  text-align: center;
}

.nu-leg-picker .is-auto {
  margin-top: 0.2rem;
  border-top: 1px dashed #e3dccb;
  border-radius: 0 0 9px 9px;
  color: #6b6b6b;
}

/* ——— Prep: Checklists | LakBi's destination guide ——— */
html.wb-new .prep-subtabs {
  margin: 0 0 1.1rem;
}

html.wb-new .prep-subtabs button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

html.wb-new .prep-subtabs img {
  width: 18px;
  height: 18px;
  border-radius: 6px;
}

/* Guide heading with LakBi */
.dest-notes-title {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.dest-notes-lakbi {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 4px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff3cf, #e6c98e);
  box-shadow: 0 4px 10px rgba(160, 110, 20, 0.2);
}

.dest-notes-title h3 {
  margin: 0;
}

.dest-notes-title p {
  margin: 0.2rem 0 0;
}

.dest-notes-when.is-moving {
  background: #fbefe0;
  color: #8a5a1f;
}

/* A leg backed by a saved flight: solid, not tappable. */
html.wb-new .nu-jr-leg.is-booked .nu-jr-plane {
  background: #1e3a2f;
  box-shadow: 0 0 0 2px #1e3a2f;
  color: #fff;
}

/* LakBi's guide tab: golden and easy to spot. */
html.wb-new .prep-subtabs [data-prep-tab="guide"] {
  position: relative;
  overflow: hidden;
  padding-inline: 0.9rem 1.05rem;
  border: 1.5px solid transparent;
  background:
    linear-gradient(#fffaf0, #fffaf0) padding-box,
    linear-gradient(135deg, #f7e2a6, #d4a441 45%, #f3d58a) border-box;
  color: #6a4a10;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(200, 145, 44, 0.25);
}

html.wb-new .prep-subtabs [data-prep-tab="guide"]::before {
  content: "✨";
  order: 3;
  font-size: 0.8rem;
}

html.wb-new .prep-subtabs [data-prep-tab="guide"]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* Transform-driven shine (compositor) with the same picture as the old
     250% / 150% → -60% background-position one (app: same rule). */
  width: 340%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.85) 50%, transparent 65%);
  background-size: 73.5294% 100%;
  background-position: 100% 0;
  background-repeat: repeat-x;
  transform: translateX(-92.6471%);
  animation: prep-guide-shine 3.6s ease-in-out infinite;
}

@keyframes prep-guide-shine {
  0%, 60% { transform: translateX(-92.6471%); }
  100% { transform: translateX(0); }
}

html.wb-new .prep-subtabs [data-prep-tab="guide"] img {
  width: 24px;
  height: 24px;
  margin: -3px 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff3cf, #e6c98e);
  padding: 2px;
}

html.wb-new .prep-subtabs [data-prep-tab="guide"].is-on {
  background:
    linear-gradient(135deg, #f7e2a6, #e6c98e 50%, #f3d58a) padding-box,
    linear-gradient(135deg, #d4a441, #b8862b) border-box;
  color: #3e2a06;
}

html.wb-new .prep-subtabs [data-prep-tab="guide"]:hover {
  box-shadow: 0 6px 18px rgba(200, 145, 44, 0.38);
}

@media (prefers-reduced-motion: reduce) {
  html.wb-new .prep-subtabs [data-prep-tab="guide"]::after {
    animation: none;
    display: none;
  }
}


/* Flights: the pass stub wears the trip's theme colour. */
html.wb-new .nu-pass-stub {
  background: linear-gradient(160deg, var(--forest), var(--forest-deep, var(--forest)));
  border-left-color: color-mix(in srgb, #fff 45%, var(--forest));
  color: color-mix(in srgb, #fff 72%, var(--forest));
}
html.wb-new .nu-pass-stub b {
  color: #fff;
  letter-spacing: 0.03em;
}
@media (max-width: 36rem) {
  html.wb-new .nu-pass-stub {
    border-top-color: color-mix(in srgb, #fff 45%, var(--forest));
  }
}

/* Sheet tabs: bigger, and the open sheet is a bright pill you can't miss. */
@media (min-width: 48rem) {
  html.wb-new .sheet-tabs {
    gap: 0.3rem;
    padding: 0.35rem 0 0.7rem;
  }

  html.wb-new .sheet-tabs [role="tab"] {
    min-height: 2.35rem;
    padding: 0.45rem 0.95rem;
    border: 0;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #f0e2da;
    transition: background 0.15s, color 0.15s;
  }

  html.wb-new .sheet-tabs [role="tab"]:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  html.wb-new .sheet-tabs [role="tab"][aria-selected="true"] {
    background: var(--cream);
    color: var(--forest);
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22), inset 0 -2px 0 #e6c98e;
  }

  html.wb-new .sheet-tabs [role="tab"]:focus-visible {
    outline: 2px solid #e6c98e;
    outline-offset: 2px;
  }
}

/* ——— Itinerary Day view, like the mock ——— */
html.wb-new #panel-itinerary > .panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}
html.wb-new .nu-itin-tools {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}
html.wb-new .nu-itin-tools .nu-views { margin: 0; }
html.wb-new .nu-itin-tools .nu-legend { position: relative; margin: 0; }
html.wb-new .nu-itin-tools .nu-legend-pop { right: 0; left: auto; }

/* Day list */
html.wb-new .nu-day.is-on {
  background: color-mix(in srgb, var(--brick, #8c4646) 12%, var(--cream));
}
html.wb-new .nu-day.is-on .nu-day-num { color: var(--brick, #8c4646); }
html.wb-new .nu-day-copy b { font-size: 0.86rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; }
html.wb-new .nu-day-copy small { font-size: 0.74rem; margin-top: 0.1rem; }
html.wb-new .nu-pill.is-today { background: #2f7d57; }
html.wb-new .nu-pill.is-fly {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.05rem 0.4rem;
  background: #e4eef5;
  color: #2d5f82;
}
html.wb-new .nu-pill.is-fly svg { width: 0.72rem; height: 0.72rem; }
html.wb-new .nu-faces { display: inline-flex; align-items: center; }
html.wb-new .nu-faces .itin-flight-face {
  width: 1rem;
  height: 1rem;
  margin-left: -0.25rem;
  border: 1.5px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  font-size: 0.5rem;
}
html.wb-new .nu-faces .itin-flight-face:first-child { margin-left: 0; }
html.wb-new .nu-faces .itin-flight-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Day title */
html.wb-new .nu-wrap .agenda-head:has(.nu-ag-title) {
  display: block;
  padding: 0 0 0.4rem;
  background: none;
  border: 0;
}
html.wb-new .nu-ag-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.4vw, 1.75rem);
  color: var(--ink);
}
html.wb-new .nu-ag-where { margin: 0.25rem 0 0; font-size: 0.84rem; color: var(--ink-soft); }

/* Stop rows: time column + card */
html.wb-new .nu-wrap .agenda-list { gap: 0.6rem; }
html.wb-new .nu-wrap .agenda-list .nu-ag-row {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}
html.wb-new .nu-ag-time {
  padding-top: 0.95rem;
  font-size: 0.82rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
html.wb-new .nu-ag-time small { display: block; font-size: 0.66rem; font-weight: 500; color: var(--ink-soft); }
html.wb-new .nu-wrap .agenda-item.nu-ag-card {
  --c: var(--line);
  display: grid;
  gap: 0.2rem;
  width: 100%;
  padding: 0.8rem 0.95rem 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--c);
  border-radius: 12px;
  background: var(--cream);
  box-shadow: none;
  color: var(--ink);
  text-align: left;
}
html.wb-new .nu-ag-card.type-transpo { --c: #3e6d8e; }
html.wb-new .nu-ag-card.type-food { --c: var(--brick, #8c4646); }
html.wb-new .nu-ag-card.type-attraction,
html.wb-new .nu-ag-card.type-see { --c: #8c3d3d; }
html.wb-new .nu-ag-card.type-rest { --c: #6b5b8e; }
html.wb-new .nu-ag-card.type-activity { --c: #2f7d57; }
html.wb-new .nu-ag-card.type-tour { --c: #a16207; }
html.wb-new .nu-ag-card.type-shop { --c: #4338ca; }
html.wb-new .nu-ag-card.type-rr,
html.wb-new .nu-ag-card.type-freetime { --c: #7a8076; }
html.wb-new .nu-wrap .agenda-item.nu-ag-card:hover { border-color: #bdb9a9; border-left-color: var(--c); }
html.wb-new .nu-wrap .agenda-item.nu-ag-card.is-on { box-shadow: inset 0 0 0 2px var(--forest); }
html.wb-new .nu-wrap .agenda-item.nu-ag-card.is-now {
  background: color-mix(in srgb, #2f7d57 9%, var(--cream));
  box-shadow: inset 0 0 0 2px #2f7d57;
}
html.wb-new .nu-ag-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.2rem;
}
html.wb-new .nu-ag-type {
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
html.wb-new .nu-ag-mark.is-now {
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: #2f7d57;
  color: #fff;
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
html.wb-new .nu-ag-fly {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.5rem 0.1rem 0.4rem;
  border-radius: 999px;
  background: #e4eef5;
  color: #2d5f82;
  font-size: 0.7rem;
  font-weight: 700;
}
html.wb-new .nu-ag-fly.is-mine { background: #2d5f82; color: #fff; }
html.wb-new .nu-ag-fly svg { width: 0.8rem; height: 0.8rem; }
html.wb-new .nu-ag-fly .nu-faces { margin-left: 0.15rem; }
html.wb-new .nu-ag-card > b {
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--ink);
}
html.wb-new .nu-ag-meta {
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
html.wb-new .nu-ag-addr,
html.wb-new .nu-ag-card .itin-crew-address {
  font-size: 0.76rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.wb-new .nu-wrap .nu-ag-row ~ .agenda-gap,
html.wb-new .nu-wrap .agenda-list .agenda-gap { margin-left: 4.95rem; }
html.wb-new .nu-wrap .agenda-list .agenda-carry { margin-left: 4.95rem; }

/* Right panel with no stop picked */
html.wb-new .nu-wrap .detail.nu-day-panel { padding: 0; overflow: auto; } /* was hidden: tall stops (LakBi note + tip + reviews) got cut off with no way to scroll */
html.wb-new .nu-dp-top {
  margin: 0;
  padding: 0.85rem 1.1rem;
  background: linear-gradient(140deg, var(--brick, #8c4646), color-mix(in srgb, var(--brick, #8c4646) 70%, #000));
  color: #fbeee6;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html.wb-new .nu-dp-body { display: grid; gap: 0.8rem; padding: 1.1rem 1.15rem 1.2rem; }
html.wb-new .nu-dp-body h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.6rem; }
html.wb-new .nu-dp-body > p { margin: 0; font-size: 0.86rem; color: var(--ink-soft); }
html.wb-new .nu-dp-hotel {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  padding: 0.55rem;
  border-radius: 12px;
  background: var(--paper-2, #f1efe8);
  font-size: 0.82rem;
}
html.wb-new .nu-dp-hotel .hotel-media { width: 5rem; height: 3.9rem; border-radius: 8px; overflow: hidden; }
html.wb-new .nu-dp-hotel .hotel-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.wb-new .nu-dp-hotel b { display: block; line-height: 1.35; }
html.wb-new .nu-dp-hotel small { display: block; margin-top: 0.15rem; color: var(--ink-soft); font-size: 0.78rem; }
html.wb-new .nu-dp-edit {
  min-height: 2.6rem;
  border: 0;
  border-radius: 10px;
  background: var(--brick, #8c4646);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
html.wb-new .nu-dp-edit:hover { filter: brightness(1.08); }
html.wb-new .nu-day-panel > :not(.nu-dp-top):not(.nu-dp-body) { margin: 0 1.15rem 1rem; }

/* Day view fixes: one-column card, the day panel has its own cap, trip colour like the mock. */
html.wb-new .nu-wrap .agenda-item.nu-ag-card {
  grid-template-columns: minmax(0, 1fr);
  border-left: 4px solid var(--c);
}
html.wb-new .nu-ag-top .tt-mark,
html.wb-new .nu-ag-top .review-badge,
html.wb-new .nu-ag-top [class*="badge"] { position: static; margin: 0; }
html.wb-new .nu-wrap .detail.nu-day-panel::before { content: none; display: none; }
html.wb-new .nu-wrap .detail.nu-day-panel > .nu-dp-top,
html.wb-new .nu-wrap .detail.nu-day-panel > .nu-dp-body { margin-left: 0; margin-right: 0; }
html.wb-new .nu-wrap .detail.nu-day-panel > .nu-dp-body:last-child { margin-bottom: 0; }
html.wb-new .nu-dp-top { background: linear-gradient(140deg, var(--forest), var(--forest-deep, var(--forest))); }
html.wb-new .nu-dp-edit { background: var(--forest); }
html.wb-new .nu-day.is-on { background: color-mix(in srgb, var(--forest) 12%, var(--cream)); }
html.wb-new .nu-day.is-on .nu-day-num { color: var(--forest); }
/* Day list beside the day only when there is room; ≤64rem it sits on top (see the 64rem block). */
@media (min-width: 64.01rem) {
  html.wb-new .nu-itin:not(.is-wide) { grid-template-columns: 13.5rem minmax(0, 1fr); }
}
html.wb-new .nu-dp-hotel .hotel-media,
html.wb-new .nu-dp-hotel .hotel-media.has-photo {
  width: 5rem;
  height: 3.9rem;
  min-height: 0;
  aspect-ratio: auto;
  margin: 0;
}

/* Stop cards: the same colours as the Colours legend (.type-* in styles.css). */
html.wb-new .nu-wrap .agenda-item.nu-ag-card.type-transpo { --c: #0369a1; }
html.wb-new .nu-wrap .agenda-item.nu-ag-card.type-food { --c: var(--brick); }
html.wb-new .nu-wrap .agenda-item.nu-ag-card.type-attraction,
html.wb-new .nu-wrap .agenda-item.nu-ag-card.type-see { --c: var(--forest); }
html.wb-new .nu-wrap .agenda-item.nu-ag-card.type-rest { --c: #a21caf; }
html.wb-new .nu-wrap .agenda-item.nu-ag-card.type-activity { --c: #9f1239; }
html.wb-new .nu-wrap .agenda-item.nu-ag-card.type-tour { --c: #a16207; }
html.wb-new .nu-wrap .agenda-item.nu-ag-card.type-shop { --c: #4338ca; }
html.wb-new .nu-wrap .agenda-item.nu-ag-card.type-rr,
html.wb-new .nu-wrap .agenda-item.nu-ag-card.type-freetime { --c: #15803d; }
html.wb-new .nu-wrap .agenda-item.nu-ag-card .nu-ag-type { color: var(--c); }

/* ——— Stop panel (a stop is picked) ——— */
html.wb-new .nu-dp-top.is-now { background: linear-gradient(140deg, #2f7d57, #1f5a3d); }
html.wb-new .nu-stop-panel .nu-dp-body { gap: 0.9rem; }
html.wb-new .nu-sp-head { display: grid; gap: 0.3rem; }
html.wb-new .nu-sp-kind {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  background: none;
  box-shadow: none;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
html.wb-new .nu-sp-kind.type-food { color: var(--brick); }
html.wb-new .nu-sp-kind.type-attraction, html.wb-new .nu-sp-kind.type-see { color: var(--forest); }
html.wb-new .nu-stop-panel .nu-sp-head h3 { margin: 0; font-size: 1.55rem; line-height: 1.2; }
html.wb-new .nu-sp-where { margin: 0; font-size: 0.82rem; color: var(--ink-soft); }
html.wb-new .nu-sp-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin: 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
html.wb-new .nu-sp-facts dt {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
html.wb-new .nu-sp-facts dd { margin: 0.2rem 0 0; font-size: 0.9rem; font-weight: 650; color: var(--ink); }
html.wb-new .nu-sp-facts dd small { display: block; font-size: 0.76rem; font-weight: 500; color: var(--ink-soft); }
html.wb-new .nu-sp-box {
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  background: var(--paper-2, #f1efe8);
}
html.wb-new .nu-sp-label {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
html.wb-new .nu-sp-text { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
html.wb-new .nu-sp-text .itin-address-live { display: block; margin-top: 0.2rem; color: var(--ink-soft); font-size: 0.8rem; }
html.wb-new .nu-sp-map {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  justify-self: start;
  margin-top: 0.2rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  background: var(--forest);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}
html.wb-new .nu-sp-map:hover { filter: brightness(1.12); }
html.wb-new .nu-sp-map svg { width: 1rem; height: 1rem; }
html.wb-new .nu-sp-links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
html.wb-new .nu-sp-links a {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.78rem;
  color: var(--ink);
  text-decoration: none;
}
html.wb-new .nu-sp-flyers { display: grid; gap: 0.45rem; }
html.wb-new .nu-sp-flyers .itin-flight-crew { margin: 0; }
html.wb-new .nu-stop-panel .itin-flight-overlap-detail { margin: 0; }
html.wb-new .nu-stop-panel .nu-sp-kind.type-transpo { color: #0369a1; }
html.wb-new .nu-stop-panel .nu-sp-kind.type-food { color: var(--brick); }
html.wb-new .nu-stop-panel .nu-sp-kind.type-attraction,
html.wb-new .nu-stop-panel .nu-sp-kind.type-see { color: var(--forest); }
html.wb-new .nu-stop-panel .nu-sp-kind.type-rest { color: #a21caf; }
html.wb-new .nu-stop-panel .nu-sp-kind.type-activity { color: #9f1239; }
html.wb-new .nu-stop-panel .nu-sp-kind.type-tour { color: #a16207; }
html.wb-new .nu-stop-panel .nu-sp-kind.type-shop { color: #4338ca; }
html.wb-new .nu-stop-panel .nu-sp-kind.type-rr,
html.wb-new .nu-stop-panel .nu-sp-kind.type-freetime { color: #15803d; }

/* Itinerary: map of the day under the panel */
html.wb-new .nu-itin-map {
  margin-top: 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--cream);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(30, 58, 47, 0.08);
}
html.wb-new .nu-itin-map[hidden] { display: none; }
html.wb-new .nu-itin-map header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
}
html.wb-new .nu-itin-map header b { font-size: 0.86rem; }
html.wb-new .nu-itin-map header small { font-size: 0.74rem; color: var(--ink-soft); }
html.wb-new .nu-itin-map-canvas { height: 20rem; background: #e8eadf; }
html.wb-new .nu-itin-map-hint { margin: 0; padding: 0.5rem 1rem 0.65rem; font-size: 0.74rem; color: var(--ink-soft); }
html.wb-new .nu-wrap #detail-slot { max-height: none; }

/* Day recap (owner 2026-10-13): a finished day / the public view plays on our map (shared/day-recap.css) */
html.wb-new .nu-day-recap {
  margin: 0 0 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--cream);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(30, 58, 47, 0.08);
}
html.wb-new .nu-day-recap header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); }
html.wb-new .nu-day-recap header b { font-size: 0.86rem; }
html.wb-new .nu-day-recap header small { font-size: 0.74rem; color: var(--ink-soft); }
html.wb-new .nu-day-recap-host { padding: 0.75rem; }
html.wb-new .nu-day-recap-host .dr-box { height: 22rem; }
/* Public trip: "Map of the day" across the top; the list + the details side by side below (owner 2026-10-13) */
html.wb-new .nu-wrap > .nu-day-recap.is-top { grid-column: 1 / -1; margin: 0 0 0.25rem; }
html.wb-new .nu-day-recap.is-top header { padding: 0.8rem 1.1rem; }
html.wb-new .nu-day-recap.is-top header b { font-size: 1rem; }
html.wb-new .nu-day-recap.is-top .nu-day-recap-host { padding: 0; }
html.wb-new .nu-day-recap.is-top .dr-box { height: min(30rem, 58vh); border-radius: 0; box-shadow: none; }
html.wb-new .nu-day-recap.is-top .dr-stubs { display: none; } /* the list beside the details is the stop list */
html.wb-new .nu-day-recap.is-top .dr-acts,
html.wb-new .nu-day-recap.is-top .dr-fine { padding: 0 1.1rem; }
html.wb-new .nu-day-recap.is-top .dr-acts { padding-top: 0.75rem; }
html.wb-new .nu-day-recap.is-top .dr-fine { padding-bottom: 0.9rem; }

/* Source tags: From flight / hotel / food places */
html.wb-new .nu-ag-src {
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}
html.wb-new .nu-ag-src.is-flight { background: #e4eef5; color: #2d5f82; }
html.wb-new .nu-ag-src.is-hotel { background: #f3e6f5; color: #86198f; }
html.wb-new .nu-ag-src.is-food { background: #fbe8df; color: #9a4a26; }
html.wb-new .nu-sp-kind .nu-ag-src { letter-spacing: 0.02em; }

/* Stop panel reviews: summary + button to the full window */
html.wb-new .nu-sp-rv-row { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
html.wb-new .nu-sp-rv-score { font-family: var(--serif); font-size: 1.7rem; font-weight: 400; line-height: 1; color: var(--ink); }
html.wb-new .nu-sp-rv-stars { color: #d9a441; letter-spacing: 0.05em; }
html.wb-new .nu-sp-rv-stars i { color: #d8d2c2; font-style: normal; }
html.wb-new .nu-sp-rv-row small { font-size: 0.8rem; color: var(--ink-soft); }
html.wb-new .nu-sp-rv-note { margin: 0; font-size: 0.84rem; font-style: italic; color: var(--ink); line-height: 1.45; }
html.wb-new .nu-sp-rv-later { margin: 0; font-size: 0.8rem; color: var(--ink-soft); }
html.wb-new .nu-sp-rv-open {
  justify-self: start;
  margin-top: 0.15rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--forest);
  border-radius: 999px;
  background: #fff;
  color: var(--forest);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
html.wb-new .nu-sp-rv-open:hover { background: var(--forest); color: #fff; }

/* Map card: above the stop details, with Open */
html.wb-new .nu-itin-map { margin: 0 0 1rem; }
html.wb-new .nu-itin-map header { align-items: center; }
html.wb-new .nu-itin-map header > span { display: grid; gap: 0.05rem; }
html.wb-new .nu-itin-map-open {
  padding: 0.4rem 0.95rem;
  border: 0;
  border-radius: 999px;
  background: var(--forest);
  color: #fff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
html.wb-new .nu-itin-map-open:hover { filter: brightness(1.12); }
html.wb-new .nu-itin-map-home .nu-itin-map-canvas { height: 17rem; }

/* Full map: web version of the phone's Live Map (no live nav) */
.nu-map-full {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--paper, #f5f2e9);
}
.nu-map-full[hidden] { display: none; }
html.nu-map-full-open { overflow: hidden; }
.nu-mf-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  background: var(--forest);
  color: #fff;
}
.nu-mf-day {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.4rem 0.3rem 0.75rem;
  border-radius: 12px;
  background: var(--cream, #fffcf7);
  color: var(--ink, #1a1410);
}
.nu-mf-day select {
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
}
.nu-mf-nav,
.nu-mf-close {
  width: 2.3rem;
  height: 2.3rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.nu-mf-nav:disabled { opacity: 0.35; cursor: default; }
.nu-mf-nav:not(:disabled):hover,
.nu-mf-close:hover { background: rgba(255, 255, 255, 0.26); }
.nu-mf-where { margin-left: 0.4rem; font-size: 0.86rem; color: #e6efe9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nu-mf-close { margin-left: auto; font-size: 1rem; }
.nu-mf-body { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; min-height: 0; }
.nu-mf-map { position: relative; min-height: 0; }
.nu-mf-map .nu-itin-map-canvas { position: absolute; inset: 0; height: auto; }
.nu-mf-fit {
  position: absolute;
  right: 0.9rem;
  top: 0.9rem;
  z-index: 2;
  width: 2.6rem;
  height: 2.6rem;
  border: 0;
  border-radius: 12px;
  background: var(--cream, #fffcf7);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  font-size: 1.15rem;
  cursor: pointer;
}
.nu-mf-list {
  min-height: 0;
  overflow: auto;
  padding: 1rem 1rem 1.4rem;
  border-left: 1px solid var(--line, #ddd6c6);
  background: var(--paper, #f5f2e9);
}
.nu-mf-list h3 { margin: 0 0 0.8rem; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; }
.nu-mf-list ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.nu-mf-row {
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line, #ddd6c6);
  border-radius: 14px;
  background: var(--cream, #fffcf7);
  color: var(--ink, #1a1410);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.nu-mf-row:hover { border-color: #bdb9a9; }
.nu-mf-row.is-on { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); }
.nu-mf-row.is-unpinned .nu-mf-n { opacity: 0.45; }
.nu-mf-n {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--c, #5f685f);
  color: #fff;
  font-weight: 700;
}
.nu-mf-row.is-on .nu-mf-n { background: #e6c98e; color: #1a1410; }
.nu-mf-copy { display: grid; gap: 0.15rem; min-width: 0; }
.nu-mf-copy b { font-size: 0.98rem; font-weight: 650; }
.nu-mf-copy small { font-size: 0.8rem; color: var(--ink-soft, #5f685f); }
.nu-mf-addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 52rem) {
  .nu-mf-body { grid-template-columns: 1fr; grid-template-rows: 55% minmax(0, 1fr); }
  .nu-mf-list { border-left: 0; border-top: 1px solid var(--line, #ddd6c6); }
  .nu-mf-where { display: none; }
}

/* Full map fills its area (beats the card's height and Google's inline position). */
html.wb-new .nu-mf-map { display: flex; }
html.wb-new .nu-mf-map .nu-itin-map-canvas {
  flex: 1 1 auto;
  width: 100%;
  height: 100% !important;
  min-height: 0;
}

/* Reviews: avatar photos, and From this trip / All */
html.wb-new .nu-rv-avatar.has-photo { padding: 0; overflow: hidden; background: #e8e3d6; }
html.wb-new .nu-rv-avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
html.wb-new .nu-rv-tools-end { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
html.wb-new .nu-rv-scope { display: inline-flex; gap: 0.3rem; }
html.wb-new .nu-sp-rv-trip {
  justify-self: start;
  margin: 0;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--forest) 12%, #fff);
  color: var(--forest);
  font-size: 0.74rem;
  font-weight: 700;
}

/* ——— Whole trip: full width, days grouped by where you stay ——— */
html.wb-new .nu-itin.is-story .nu-wrap { grid-template-columns: minmax(0, 1fr); }
html.wb-new .nu-itin.is-story #detail-slot { display: none; }
html.wb-new .nu-trip { display: grid; gap: 1.6rem; }
html.wb-new .nu-trip-leg-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  margin-bottom: 0.7rem;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid color-mix(in srgb, var(--forest) 25%, transparent);
}
html.wb-new .nu-trip-leg-head h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.45rem; color: var(--ink); }
html.wb-new .nu-trip-leg-head p { margin: 0; font-size: 0.82rem; color: var(--ink-soft); }
html.wb-new .nu-trip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.8rem;
  align-items: start;
}
html.wb-new .nu-td {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--cream);
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
}
html.wb-new .nu-td:hover { border-color: #bdb9a9; box-shadow: 0 6px 18px rgba(30, 58, 47, 0.09); }
html.wb-new .nu-td.is-past { opacity: 0.72; }
html.wb-new .nu-td.is-live { border-color: #2f7d57; box-shadow: 0 0 0 2px #2f7d57 inset; opacity: 1; }
html.wb-new .nu-td-head,
html.wb-new .nu-td.is-empty {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
html.wb-new .nu-td-head { background: color-mix(in srgb, var(--forest) 6%, var(--cream)); border-bottom: 1px solid var(--line); }
html.wb-new .nu-td.is-live .nu-td-head { background: color-mix(in srgb, #2f7d57 12%, var(--cream)); }
html.wb-new .nu-td-n {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 12px;
  background: var(--forest);
  color: #fff;
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1;
}
html.wb-new .nu-td-n small { font-family: inherit; font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
html.wb-new .nu-td.is-live .nu-td-n { background: #2f7d57; }
html.wb-new .nu-td-date,
html.wb-new .nu-td-empty { display: grid; gap: 0.1rem; min-width: 0; flex: 1 1 auto; }
html.wb-new .nu-td-date b,
html.wb-new .nu-td-empty b { font-size: 0.95rem; }
html.wb-new .nu-td-date small,
html.wb-new .nu-td-empty small { font-size: 0.76rem; color: var(--ink-soft); }
html.wb-new .nu-td-badges { display: flex; align-items: center; gap: 0.3rem; }
html.wb-new .nu-td-today {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #2f7d57;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
html.wb-new .nu-td-fly {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #e4eef5;
  color: #2d5f82;
}
html.wb-new .nu-td-fly svg { width: 0.8rem; height: 0.8rem; }
html.wb-new .nu-td-list { list-style: none; margin: 0; padding: 0.55rem 0.9rem 0.2rem; display: grid; gap: 0.1rem; }
html.wb-new .nu-td-list li {
  display: grid;
  grid-template-columns: 4.4rem 0.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.28rem 0;
  font-size: 0.84rem;
}
html.wb-new .nu-td-list time { font-size: 0.76rem; font-weight: 650; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
html.wb-new .nu-td-list i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--c); }
html.wb-new .nu-td-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
html.wb-new .nu-td-list li.is-now span { font-weight: 700; }
html.wb-new .nu-td-list em {
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: #2f7d57;
  color: #fff;
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 750;
  text-transform: uppercase;
}
html.wb-new .nu-td-open {
  justify-self: start;
  margin: 0.2rem 0.9rem 0.8rem;
  padding: 0.3rem 0;
  border: 0;
  background: none;
  color: var(--forest);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
html.wb-new .nu-td-open:hover { text-decoration: underline; }
html.wb-new .nu-td.is-empty { border-style: dashed; background: transparent; }
html.wb-new .nu-td.is-empty .nu-td-n { background: color-mix(in srgb, var(--forest) 45%, #fff); }
html.wb-new .nu-itin-map-home { position: relative; }
/* The map stays inside its own box and under the card's header (owner 2026-10-10: "you didn't enclose it properly" —
   the map's top drew over the header's Open button and count line). */
html.wb-new .nu-itin-map { isolation: isolate; }
html.wb-new .nu-itin-map > header { position: relative; z-index: 2; background: var(--cream); }
html.wb-new .nu-itin-map-home { z-index: 1; overflow: hidden; contain: paint; }
html.wb-new .nu-itin-map-fit {
  position: absolute;
  right: 0.6rem;
  bottom: 1.9rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: var(--forest);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}
html.wb-new .nu-itin-map-fit:hover { background: var(--forest); color: #fff; }
html.wb-new .nu-itin-map-fit svg { width: 1.15rem; height: 1.15rem; }

/* ——— Itinerary editor panel (edit a stop / new event), planning ——— */
html.wb-new #detail-slot > .detail:is(.wb-detail, :has([data-update-event])) {
  padding: 0 0 1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--cream);
  box-shadow: 0 8px 22px rgba(30, 58, 47, 0.08);
  overflow: hidden auto;
}
html.wb-new #detail-slot > .detail:is(.wb-detail, :has([data-update-event])) > :not(.when):not(.wb-detail-head) {
  margin-left: 1.1rem;
  margin-right: 1.1rem;
}
/* Header band */
html.wb-new #detail-slot > .detail:is(.wb-detail, :has([data-update-event])) > .when,
html.wb-new #detail-slot > .detail.is-draft > .wb-detail-head {
  margin: 0 0 1rem;
  padding: 0.85rem 1.1rem;
  background: linear-gradient(140deg, var(--forest), var(--forest-deep, var(--forest)));
  color: #fbeee6;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html.wb-new #detail-slot > .detail.is-draft > .wb-detail-head .when { margin: 0; color: #e6c98e; font-size: 0.68rem; }
html.wb-new #detail-slot > .detail.is-draft > .wb-detail-head h3 {
  margin: 0.25rem 0 0.2rem;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}
html.wb-new #detail-slot > .detail.is-draft > .wb-detail-head .wb-detail-lede {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #dfe9e3;
}
html.wb-new #detail-slot > .detail.is-draft .wb-detail-fields { display: grid; gap: 0.9rem; margin: 0 1.1rem; }
html.wb-new #detail-slot > .detail:is(.wb-detail, :has([data-update-event])) .wb-field { margin: 0 0 0.9rem; gap: 0.35rem; }
html.wb-new #detail-slot > .detail.is-draft .wb-detail-fields .wb-field { margin: 0; }
/* Labels */
html.wb-new #detail-slot > .detail:is(.wb-detail, :has([data-update-event])) .wb-field > span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
html.wb-new #detail-slot > .detail .wb-req {
  padding: 0.02rem 0.4rem;
  border-radius: 999px;
  background: #fbe8df;
  color: #9a4a26;
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 750;
  letter-spacing: 0.06em;
}
/* Inputs */
html.wb-new #detail-slot > .detail:is(.wb-detail, :has([data-update-event])) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  box-shadow: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
html.wb-new #detail-slot > .detail:is(.wb-detail, :has([data-update-event])) :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--forest) 18%, transparent);
}
html.wb-new #detail-slot > .detail .wb-field.is-empty :is(input, select) { border-color: #e2a48c; background: #fffaf6; }
/* Address row: field + Map button */
html.wb-new #detail-slot > .detail [data-geo-root] button,
html.wb-new #detail-slot > .detail .geo-map-btn {
  min-height: 2.75rem;
  border-radius: 12px;
}
/* Time: start / end + a pill with − duration + */
html.wb-new #detail-slot > .detail .wb-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
html.wb-new #detail-slot > .detail .wb-row-2 .wb-field { margin-bottom: 0.5rem; }
html.wb-new #detail-slot > .detail .event-fit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--forest) 7%, var(--cream));
}
html.wb-new #detail-slot > .detail .event-fit [data-event-duration] { font-size: 0.86rem; font-weight: 700; color: var(--forest); }
html.wb-new #detail-slot > .detail .event-fit .btn-quiet {
  min-height: 2.1rem;
  padding: 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}
html.wb-new #detail-slot > .detail .event-fit [data-event-fit="shrink"]::before { content: "− "; }
html.wb-new #detail-slot > .detail .event-fit [data-event-fit="grow"]::before { content: "+ "; }
html.wb-new #detail-slot > .detail .event-fit .btn-quiet:hover { border-color: var(--forest); color: var(--forest); }
html.wb-new #detail-slot > .detail .wb-duration {
  display: inline-flex;
  gap: 0.4rem;
  margin: 0 0 0.9rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--forest) 7%, var(--cream));
  color: var(--forest);
  font-size: 0.8rem;
  font-weight: 700;
}
html.wb-new #detail-slot > .detail .wb-nextday { color: #9a4a26; font-size: 0.74rem; font-weight: 700; }
/* Actions */
html.wb-new #detail-slot > .detail .wb-draft-actions { margin-top: 0.3rem; }
html.wb-new #detail-slot > .detail .wb-draft-actions-row { display: grid; grid-template-columns: 1fr 2fr; gap: 0.6rem; }
html.wb-new #detail-slot > .detail :is(.wb-draft-actions-row, .wb-actions) :is(.btn-solid, .btn-quiet) {
  min-height: 2.9rem;
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  text-transform: none;
}
html.wb-new #detail-slot > .detail :is(.wb-draft-actions-row, .wb-actions) .btn-solid { background: var(--forest); border-color: var(--forest); color: #fff; }
html.wb-new #detail-slot > .detail .wb-draft-actions-row [data-remove-event] {
  border: 1px solid color-mix(in srgb, #b44a2a 40%, var(--line));
  background: #fff;
  color: #9a4a26;
}
html.wb-new #detail-slot > .detail .wb-draft-actions-row [data-remove-event]:hover { background: #fbe8df; }
/* Footer tools */
html.wb-new #detail-slot > .detail .detail-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--line);
}
html.wb-new #detail-slot > .detail .detail-tools :is(.btn-solid, .btn-quiet) {
  min-height: 2.5rem;
  padding: 0 0.6rem;
  border-radius: 10px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}
html.wb-new #detail-slot > .detail .detail-tools .btn-solid { background: color-mix(in srgb, var(--forest) 10%, #fff); border: 1px solid var(--forest); color: var(--forest); }
html.wb-new #detail-slot > .detail .detail-tools .btn-solid::before { content: "+ "; }
html.wb-new #detail-slot > .detail .detail-tools .btn-quiet { border: 1px solid var(--line); background: #fff; }
html.wb-new #detail-slot > .detail .detail-tools .btn-quiet[aria-disabled="true"] { opacity: 0.5; }

/* Stop panel: photos from reviews */
html.wb-new .nu-sp-photos { display: grid; gap: 0.4rem; }
html.wb-new .nu-sp-photos button {
  display: block;
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #e8e3d6;
  cursor: zoom-in;
}
html.wb-new .nu-sp-photos img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s; }
html.wb-new .nu-sp-photos button:hover img { transform: scale(1.04); }
html.wb-new .nu-sp-photo-lead { aspect-ratio: 16 / 10; width: 100%; }
html.wb-new .nu-sp-photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
html.wb-new .nu-sp-photo-thumb { aspect-ratio: 1 / 1; }
html.wb-new .nu-sp-photo-thumb.has-more span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(20, 30, 25, 0.55);
  color: #fff;
  font-size: 1rem;
  font-weight: 750;
}
html.wb-new .nu-sp-photo-cap { margin: 0; font-size: 0.76rem; color: var(--ink-soft); }
/* New event: the duration is a small pill, not a full-width bar */
html.wb-new #detail-slot > .detail .wb-time-block { display: grid; justify-items: start; gap: 0.2rem; margin-bottom: 0.9rem; }
html.wb-new #detail-slot > .detail .wb-time-block .wb-row-2 { justify-self: stretch; width: 100%; }
html.wb-new #detail-slot > .detail .wb-time-block .wb-duration { width: fit-content; margin: 0; }

/* Ask LakBi (itinerary editor): gold, with explorer LakBi — easy to spot */
html.wb-new #detail-slot .wb-draft-ask {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 3.6rem;
  margin-top: 0.4rem;
  padding: 0.45rem 1rem 0.45rem 0.5rem;
  overflow: hidden;
  border: 1.5px solid #d4a441;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff6dc 0%, #f7e2a6 55%, #eecb78 100%);
  color: #3e2a06;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 6px 18px rgba(200, 145, 44, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
html.wb-new #detail-slot .wb-draft-ask:hover:not([aria-disabled="true"]):not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(200, 145, 44, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
html.wb-new #detail-slot .wb-draft-ask::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* Moves with a transform (compositor), not background-position (a repaint every frame).
     Same picture as the old 250% / 150% → -60% shine: the 250% tile sits 90% of the
     button width into a 340% box (its repeat fills the left) — app: same rule. */
  width: 340%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%);
  background-size: 73.5294% 100%;
  background-position: 100% 0;
  background-repeat: repeat-x;
  transform: translateX(-92.6471%);
  animation: wb-ask-shine 3.8s ease-in-out infinite;
}
@keyframes wb-ask-shine {
  0%, 60% { transform: translateX(-92.6471%); }
  100% { transform: translateX(0); }
}
html.wb-new #detail-slot .wb-draft-ask-face-wrap {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: -0.6rem 0 -0.6rem 0;
  background: none;
  box-shadow: none;
}
html.wb-new #detail-slot .wb-draft-ask-face {
  width: 3.4rem;
  height: 3.4rem;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(80, 50, 0, 0.3));
  animation: lakbi-ask-bob 2.6s ease-in-out infinite;
}
@keyframes lakbi-ask-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
html.wb-new #detail-slot .wb-draft-ask-text { display: grid; gap: 0.05rem; flex: 1 1 auto; min-width: 0; }
html.wb-new #detail-slot .wb-draft-ask-label { font-size: 1rem; font-weight: 800; color: #3e2a06; }
html.wb-new #detail-slot .wb-draft-ask-sub { font-size: 0.74rem; font-weight: 600; color: #7a5a14; }
html.wb-new #detail-slot .wb-draft-ask-spark { font-size: 1.1rem; }
html.wb-new #detail-slot .wb-draft-ask[aria-disabled="true"],
html.wb-new #detail-slot .wb-draft-ask:disabled {
  filter: grayscale(0.55);
  opacity: 0.7;
  cursor: not-allowed;
  box-shadow: none;
}
html.wb-new #detail-slot .wb-draft-ask[aria-disabled="true"]::after,
html.wb-new #detail-slot .wb-draft-ask:disabled::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  html.wb-new #detail-slot .wb-draft-ask::after,
  html.wb-new #detail-slot .wb-draft-ask-face { animation: none; }
}

/* LakBi's pick in the itinerary: the same gold as Food places */
html.wb-new .nu-ag-lakbi {
  padding: 0.08rem 0.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #f7e2a6, #d4a441);
  color: #3e2a06;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
  box-shadow: 0 1px 4px rgba(184, 134, 43, 0.35);
}
html.wb-new .nu-wrap .agenda-item.nu-ag-card.is-lakbi {
  border: 2px solid transparent;
  border-left: 4px solid var(--c);
  background:
    linear-gradient(var(--cream), var(--cream)) padding-box,
    linear-gradient(135deg, #f7e2a6, #d4a441 30%, #fff3c8 50%, #c8912c 70%, #f3d58a) border-box;
  box-shadow: 0 6px 18px rgba(200, 145, 44, 0.18);
}
html.wb-new .nu-wrap .agenda-item.nu-ag-card.is-lakbi.is-on { box-shadow: 0 0 0 2px var(--forest), 0 6px 18px rgba(200, 145, 44, 0.18); }
html.wb-new .nu-stop-panel.is-lakbi .nu-dp-top { background: linear-gradient(140deg, #b8862b, #7a5a14); }
/* Edit a stop: Remove · Cancel · Update */
html.wb-new #detail-slot > .detail .wb-draft-actions-row.wb-edit-actions { grid-template-columns: 1fr 1fr 1.6fr; }
html.wb-new #detail-slot > .detail .wb-edit-actions [data-cancel-event] { border: 1px solid var(--line); background: #fff; color: var(--ink); }

/* Hotel edit: the photo fills its left column (a 16:9 ratio + full height made it 1300px wide over the fields) */
html.wb-new .wb-hotel > .hotel-media {
  aspect-ratio: auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 12rem;
}
@media (max-width: 64rem) {
  html.wb-new .wb-hotel > .hotel-media { height: 12rem; }
}

/* ——— Hotel edit, like the mock ——— */
html.wb-new .nu-stay-add {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  padding: 1.2rem 1rem 1.3rem;
  border: 2px dashed color-mix(in srgb, var(--forest) 25%, var(--line));
  border-radius: var(--nu-radius, 16px);
  background: color-mix(in srgb, var(--cream) 70%, transparent);
  text-align: center;
}
html.wb-new .nu-stay-add h3 { margin: 0; font-size: 1rem; font-weight: 750; }
html.wb-new .nu-stay-add p { margin: 0; max-width: 44rem; font-size: 0.86rem; color: var(--ink-soft); }
html.wb-new .nu-stay-add-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.35rem; }
html.wb-new .nu-stay-add-btns button {
  min-height: 2.6rem;
  padding: 0 1.1rem;
  border-radius: 10px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}
html.wb-new .nu-stay-upload { border: 0; background: var(--brick, #8c4646); color: #fff; }
html.wb-new .nu-stay-hand { border: 1px solid var(--line); background: #fff; color: var(--ink); }
html.wb-new .nu-hotel-edit-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
html.wb-new .wb-hotel.nu-hotel-edit {
  display: block;
  padding: 1.1rem 1.2rem 1.2rem;
  overflow: visible;
}
html.wb-new .nu-he-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
html.wb-new .nu-he-head h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.4rem; }
html.wb-new .nu-he-remove { border: 0; background: none; color: #9a4a26; font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; }
html.wb-new .nu-he-remove:hover { text-decoration: underline; }
html.wb-new .wb-hotel.nu-hotel-edit .hotel-body.nu-he-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0;
}
html.wb-new .nu-he-grid .nu-he-wide { grid-column: span 2; }
html.wb-new .nu-he-grid .nu-he-full { grid-column: 1 / -1; }
html.wb-new .nu-he-grid .nu-he-wide > .wb-field,
html.wb-new .nu-he-grid .nu-he-full > .wb-field,
html.wb-new .nu-he-grid [data-hotel-geo-i] .wb-field { margin: 0; }
html.wb-new .nu-he-grid .wb-field > span { font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); text-transform: none; letter-spacing: 0; }
html.wb-new .nu-he-grid :is(input, select, textarea) {
  width: 100%;
  min-height: 2.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 0.9rem;
}
html.wb-new .nu-he-grid input[readonly] { background: color-mix(in srgb, var(--forest) 5%, var(--cream)); }
html.wb-new .nu-he-grid textarea { min-height: 3.6rem; resize: vertical; }
html.wb-new .nu-he-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
html.wb-new .nu-he-actions > * { margin: 0; }
html.wb-new .nu-he-actions :is(button, .btn-quiet, a) {
  min-height: 2.4rem;
  border-radius: 10px;
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: 0;
}
@media (max-width: 70rem) {
  html.wb-new .wb-hotel.nu-hotel-edit .hotel-body.nu-he-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  html.wb-new .wb-hotel.nu-hotel-edit .hotel-body.nu-he-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.wb-new .nu-he-grid .nu-he-wide { grid-column: 1 / -1; }
}
html.wb-new .wb-hotel.nu-hotel-edit .hotel-body.nu-he-grid > .wb-field:first-child { grid-column: span 2; }
html.wb-new .wb-hotel.nu-hotel-edit .hotel-body.nu-he-grid > [data-hotel-geo-i] { grid-column: span 3; }
html.wb-new .wb-hotel.nu-hotel-edit .hotel-body.nu-he-grid > .nu-he-wide:not([data-hotel-geo-i]) { grid-column: span 2; }
html.wb-new .wb-hotel.nu-hotel-edit .hotel-body.nu-he-grid > .nu-he-full { grid-column: 1 / -1; }
@media (max-width: 70rem) {
  html.wb-new .wb-hotel.nu-hotel-edit .hotel-body.nu-he-grid > [data-hotel-geo-i] { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  html.wb-new .wb-hotel.nu-hotel-edit .hotel-body.nu-he-grid > .wb-field:first-child,
  html.wb-new .wb-hotel.nu-hotel-edit .hotel-body.nu-he-grid > .nu-he-wide { grid-column: 1 / -1; }
}

/* Hotel card: the reviews sit on the bottom of the photo */
html.wb-new .nu-hotel-photo { position: relative; }
html.wb-new .nu-hotel-rv {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  padding: 0.7rem 0.8rem 0.75rem;
  border-radius: 14px;
  background: rgba(16, 28, 22, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #f3efe2;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}
html.wb-new .nu-hotel-rv .hotel-review-tease { display: grid; gap: 0.35rem; margin: 0; padding: 0; border: 0; background: none; }
html.wb-new .nu-hotel-rv .food-review-line { margin: 0; font-size: 0.84rem; font-weight: 700; color: #fff; }
html.wb-new .nu-hotel-rv .tt-rating { background: #e6c98e; color: #2a1d05; }
html.wb-new .nu-hotel-rv .food-review-note {
  margin: 0;
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.4;
  color: #e9e4d4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html.wb-new .nu-hotel-rv .rv-later { margin: 0; font-size: 0.8rem; color: #e9e4d4; }
html.wb-new .nu-hotel-rv .food-reviews-btn {
  justify-self: start;
  min-height: 2.1rem;
  width: auto;
  padding: 0 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
html.wb-new .nu-hotel-rv .food-reviews-btn:hover { background: #fff; color: var(--forest); }

/* Hotel card actions: colour-coded */
html.wb-new .nu-hotel .nu-actions .nu-btn { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; transition: background 0.15s, color 0.15s, border-color 0.15s; }
html.wb-new .nu-hotel .nu-actions a.nu-btn { border-color: #b9d3e4; background: #eef5fa; color: #2d5f82; }
html.wb-new .nu-hotel .nu-actions a.nu-btn::before { content: "📍"; }
html.wb-new .nu-hotel .nu-actions a.nu-btn:hover { background: #2d5f82; border-color: #2d5f82; color: #fff; }
html.wb-new .nu-hotel .nu-actions [data-download-booking] { border-color: color-mix(in srgb, var(--forest) 30%, #fff); background: color-mix(in srgb, var(--forest) 8%, #fff); color: var(--forest); }
html.wb-new .nu-hotel .nu-actions [data-download-booking]:hover { background: var(--forest); border-color: var(--forest); color: #fff; }
html.wb-new .nu-hotel .nu-actions [data-hotel-expense] { border-color: #ecd9a8; background: #fff7e4; color: #7a5a14; }
html.wb-new .nu-hotel .nu-actions [data-hotel-expense]::before { content: "💸"; }
html.wb-new .nu-hotel .nu-actions [data-hotel-expense]:hover { background: #c9a24a; border-color: #c9a24a; color: #fff; }
html.wb-new .nu-hotel .nu-actions [data-hotel-expense].is-linked::before { content: "🧾"; }

/* Hotel edit: every box the same height, rows aligned at the top */
html.wb-new .wb-hotel.nu-hotel-edit .hotel-body.nu-he-grid { align-items: start; }
html.wb-new .nu-he-grid .wb-field { display: grid; grid-template-rows: auto auto; align-content: start; gap: 0.35rem; margin: 0; }
html.wb-new .nu-he-grid .wb-field > span { display: flex; align-items: center; gap: 0.35rem; min-height: 1.1rem; line-height: 1.1; }
html.wb-new .nu-he-grid :is(input, select) { height: 2.6rem; min-height: 2.6rem; box-sizing: border-box; }
html.wb-new .nu-he-grid [data-geo-root] { display: grid; gap: 0.35rem; }
html.wb-new .nu-he-grid [data-geo-root] :is(button, .geo-map-btn) { height: 2.6rem; min-height: 2.6rem; }
html.wb-new .nu-he-grid [data-geo-root] .hint,
html.wb-new .nu-he-grid [data-geo-root] [data-geo-status] { margin: 0; font-size: 0.76rem; color: var(--ink-soft); font-weight: 500; }
/* The plan tick: one plain row, the box right by its words (owner 2026-10-21: a 2.6 rem box in a grid cell). */
html.wb-new .nu-he-grid .lb-hotel-plan-tick { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.88rem; color: var(--ink); }
html.wb-new .nu-he-grid .lb-hotel-plan-tick input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; flex: none; }
/* In the window the columns follow the window, not the screen (owner 2026-10-21: five columns in a 34 rem window cut
   dates and lists to "11/20/202", "C…"). places-days.css's 34 rem window rule loads later: this one is more specific. */
dialog.lpd-formwin.nu-hotel-win { width: min(52rem, calc(100vw - 1.5rem)); }
dialog.nu-hotel-win > .nu-hotel-edit { container-type: inline-size; }
dialog.nu-hotel-win .wb-hotel.nu-hotel-edit .hotel-body.nu-he-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
dialog.nu-hotel-win .wb-hotel.nu-hotel-edit .hotel-body.nu-he-grid > :is(.wb-field:first-child, [data-hotel-geo-i], .nu-he-wide) { grid-column: span 2; }
@container (max-width: 600px) {
  dialog.nu-hotel-win .wb-hotel.nu-hotel-edit .hotel-body.nu-he-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  dialog.nu-hotel-win .wb-hotel.nu-hotel-edit .hotel-body.nu-he-grid > :is(.wb-field:first-child, [data-hotel-geo-i], .nu-he-wide) { grid-column: 1 / -1; }
}
@container (max-width: 300px) {
  dialog.nu-hotel-win .wb-hotel.nu-hotel-edit .hotel-body.nu-he-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Itinerary alignment: tools flush right with the content; dividers span the whole day column */
html.wb-new #panel-itinerary > .panel-head .exp-toolbar { order: 2; margin-left: auto; }
html.wb-new #panel-itinerary > .panel-head .exp-toolbar:not(:has(:not([hidden]))) { display: none; }
html.wb-new #panel-itinerary > .panel-head .nu-itin-tools { order: 3; margin-left: auto; margin-right: 0; }
html.wb-new .nu-wrap .agenda-list > .agenda-gap,
html.wb-new .nu-wrap .agenda-list > .agenda-carry,
html.wb-new .nu-wrap .agenda-list > .agenda-crew-note { margin-left: 0; }
html.wb-new .nu-wrap .agenda-head:has(.nu-ag-title) { padding-bottom: 0.2rem; }
html.wb-new .nu-days { padding-top: 0; }

/* ——— Files: colour per type, kind tag, a real ⋯ menu ——— */
html.wb-new .nu-file { --ft: #6b7280; --ft-bg: #f1f2f4; position: relative; border-left: 4px solid var(--ft); transition: box-shadow 0.15s, transform 0.15s; }
html.wb-new .nu-file:hover { box-shadow: 0 6px 18px rgba(30, 58, 47, 0.08); }
html.wb-new .nu-file.is-ticket { --ft: #2d5f82; --ft-bg: #e4eef5; }
html.wb-new .nu-file.is-booking { --ft: #2f7d57; --ft-bg: #e3f1e9; }
html.wb-new .nu-file.is-guide { --ft: #b8862b; --ft-bg: #fbf0d6; }
html.wb-new .nu-file.is-other { --ft: #7b4f8a; --ft-bg: #f1e8f4; }
html.wb-new .nu-file .nu-file-ico { background: var(--ft-bg); color: var(--ft); border-radius: 12px; }
html.wb-new .nu-file .nu-file-ico svg { stroke: currentColor; color: var(--ft); }
html.wb-new .nu-file-copy b { display: flex; align-items: center; gap: 0.45rem; min-width: 0; white-space: normal; }
/* A long name: one line cut with …; the lines under it wrap anywhere (audit 2026-10-15; app twin .nu-file-name). */
html.wb-new .nu-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.wb-new .nu-file-kind { flex: 0 0 auto; }
html.wb-new .nu-file-copy small { overflow-wrap: anywhere; }
html.wb-new .nu-file-kind {
  padding: 0.05rem 0.45rem;
  border-radius: 6px;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html.wb-new .nu-file-kind.is-pdf { background: #fbe4e0; color: #b3261e; }
html.wb-new .nu-file-kind.is-img { background: #dff3f1; color: #0f766e; }
html.wb-new .nu-file-kind.is-doc { background: #eef0f3; color: #4b5563; }
html.wb-new .nu-file-acts [data-crew-download] { border-color: color-mix(in srgb, var(--ft) 30%, #fff); background: var(--ft-bg); color: var(--ft); font-weight: 700; }
html.wb-new .nu-file-acts [data-crew-download]:hover { background: var(--ft); border-color: var(--ft); color: #fff; }
/* The ⋯ menu: a solid card that floats above the next rows */
html.wb-new .nu-file.is-menu-open { z-index: 20; }
html.wb-new .nu-file .crew-file-menu-wrap { position: relative; }
html.wb-new .nu-file .crew-file-menu.nu-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 11rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(20, 30, 25, 0.18);
}
html.wb-new .nu-file .crew-file-menu.nu-menu[hidden] { display: none; }
html.wb-new .nu-file .crew-file-menu.nu-menu button {
  display: block;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
}
html.wb-new .nu-file .crew-file-menu.nu-menu button:hover { background: var(--paper-2, #f1efe8); }
html.wb-new .nu-file .crew-file-menu.nu-menu [data-crew-remove] { color: #b3261e; }
html.wb-new .nu-file .crew-file-menu.nu-menu [data-crew-remove]:hover { background: #fbe4e0; }
/* ⋯ menu: size to its buttons (a row-level span rule was squeezing it to 13px) */
html.wb-new .nu-file .nu-file-acts .crew-file-menu-wrap .crew-file-menu.nu-menu {
  width: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  grid-template-rows: none;
  grid-auto-rows: auto;
  align-content: start;
  gap: 0.15rem;
  overflow: visible;
}
html.wb-new .nu-file .nu-file-acts .crew-file-menu-wrap .crew-file-menu.nu-menu { bottom: auto; left: auto; inset-block-end: auto; }

/* ——— Expenses filters: one tidy filter card ——— */
html.wb-new #panel-expenses .exp-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 0.6rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--cream);
}
html.wb-new #panel-expenses .exp-filters.is-scope { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 1px dashed var(--line); }
html.wb-new #panel-expenses .exp-filters.is-scope + .exp-filters,
html.wb-new #panel-expenses .exp-filters.is-scope ~ .exp-filters.is-group-only { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
html.wb-new #panel-expenses .exp-filters label { display: grid; gap: 0.35rem; margin: 0; min-width: 0; }
html.wb-new #panel-expenses .exp-filters label > span {
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
html.wb-new #panel-expenses .exp-filters :is(select, input) {
  width: 100%;
  height: 2.6rem;
  padding: 0 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background-color: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  box-shadow: none;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
html.wb-new #panel-expenses .exp-filters select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235f685f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  cursor: pointer;
}
html.wb-new #panel-expenses .exp-filters input[type="search"] {
  padding-left: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f685f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.75rem center;
}
html.wb-new #panel-expenses .exp-filters :is(select, input):hover { border-color: #bdb9a9; }
html.wb-new #panel-expenses .exp-filters :is(select, input):focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--forest) 16%, transparent);
}
html.wb-new #panel-expenses .exp-filters label:has(#group-status-filter) > span::before { content: "● "; color: #2f7d57; }
html.wb-new #panel-expenses .exp-filters label:has([id*="day"]) > span::before { content: "📅 "; }
html.wb-new #panel-expenses .exp-filters label:has([id*="country"]) > span::before { content: "🌏 "; }
@media (min-width: 64rem) {
  html.wb-new #panel-expenses .exp-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 36rem) {
  html.wb-new #panel-expenses .exp-filters { grid-template-columns: minmax(0, 1fr); }
}
html.wb-new #panel-expenses .nu-exp-days .nu-exp-row { grid-template-columns: 2.6rem minmax(0, 1fr) 13.5rem 9.5rem auto; }
@media (max-width: 60rem) {
  html.wb-new #panel-expenses .nu-exp-days .nu-exp-row { grid-template-columns: 2.6rem minmax(0, 1fr) 9.5rem auto; }
  html.wb-new #panel-expenses .nu-exp-days .nu-exp-row .nu-exp-status { grid-column: 2; grid-row: 2; }
  html.wb-new #panel-expenses .nu-exp-days .nu-exp-row .nu-exp-amt { grid-column: 3; grid-row: 1 / span 2; }
}
html.wb-new #panel-expenses .nu-exp-days .nu-exp-row .nu-exp-ico { background: var(--k-bg); color: var(--k); }
html.wb-new #panel-expenses .nu-exp-days .nu-exp-row .nu-exp-ico svg { stroke: var(--k); color: var(--k); }

/* Expenses by day: icons + left accent coloured by category */
html.wb-new #panel-expenses .nu-exp-days .nu-exp-row { --k: #6b7280; --k-bg: #f1f2f4; border-left: 4px solid var(--k); }
html.wb-new #panel-expenses .nu-exp-days .nu-exp-row.is-k-flight { --k: #2d5f82; --k-bg: #e4eef5; }
html.wb-new #panel-expenses .nu-exp-days .nu-exp-row.is-k-stay { --k: #7b4f8a; --k-bg: #f1e8f4; }
html.wb-new #panel-expenses .nu-exp-days .nu-exp-row.is-k-food { --k: #b44a2a; --k-bg: #fbe8df; }
html.wb-new #panel-expenses .nu-exp-days .nu-exp-row.is-k-transport { --k: #0f766e; --k-bg: #dff3f1; }
html.wb-new #panel-expenses .nu-exp-days .nu-exp-row.is-k-activity { --k: #a16207; --k-bg: #fbf0d6; }
html.wb-new #panel-expenses .nu-exp-days .nu-exp-row .nu-exp-ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; }
html.wb-new #panel-expenses .nu-exp-days .nu-exp-row .nu-exp-ico svg { width: 1.2rem; height: 1.2rem; }
html.wb-new #panel-expenses .nu-exp-days .nu-exp-row .nu-exp-status { display: grid; justify-items: start; gap: 0.2rem; }
html.wb-new #panel-expenses .nu-exp-days .nu-exp-row .nu-exp-amt { display: grid; justify-items: end; text-align: right; }

/* Linked-to chips (expense ↔ hotel ↔ split bill) */
html.wb-new .nu-link-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
html.wb-new .nu-link-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.12rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s, box-shadow 0.15s;
}
html.wb-new .nu-link-chip:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); filter: brightness(0.97); }
html.wb-new .nu-link-chip.is-hotel { background: #f1e8f4; border-color: #dcc7e3; color: #6a3f7a; }
html.wb-new .nu-link-chip.is-split { background: #e3f1e9; border-color: #bfdcca; color: #1f5a3d; }
html.wb-new .nu-link-chip.is-expense { margin-top: 0.3rem; background: #fff7e4; border-color: #ecd9a8; color: #7a5a14; }

/* ——— Header stamp (finished trip): a fresh round airport stamp on the right of the cover ——— */
@media (min-width: 48rem) {
  html.wb-new .mast { position: relative; }
  html.wb-new .mast .mast-stamp:not(.is-compact) {
    --stamp-ink: #f08f7c;
    --pp-page: #22392f;
    position: absolute;
    top: 50%;
    right: clamp(12rem, 22vw, 20rem);
    z-index: 3;
    width: 9.5rem;
    height: 9.5rem;
    margin-top: -5.2rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 57, 47, 0.2), rgba(34, 57, 47, 0) 70%);
    color: var(--stamp-ink);
    box-shadow: none;
    opacity: 0.93;
    transform: rotate(-14deg);
    filter: drop-shadow(0 0 1px rgba(240, 143, 124, 0.45));
    /* worn ink: a few speckles where the stamp didn't fully touch */
    -webkit-mask-image: radial-gradient(circle at 30% 26%, transparent 0 2px, #000 3px), radial-gradient(circle at 72% 68%, transparent 0 3px, #000 4px), radial-gradient(circle at 60% 18%, transparent 0 1.5px, #000 2.5px), radial-gradient(circle at 20% 70%, transparent 0 2px, #000 3px);
    -webkit-mask-composite: source-in;
    mask-image: radial-gradient(circle at 30% 26%, transparent 0 2px, #000 3px), radial-gradient(circle at 72% 68%, transparent 0 3px, #000 4px), radial-gradient(circle at 60% 18%, transparent 0 1.5px, #000 2.5px), radial-gradient(circle at 20% 70%, transparent 0 2px, #000 3px);
    mask-composite: intersect;
    animation: mast-stamp-press 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) 0.25s both;
    transition: opacity 0.2s, transform 0.2s;
  }
  html.wb-new .mast .mast-stamp:not(.is-compact):hover { opacity: 1; transform: rotate(-10deg) scale(1.04); }
  html.wb-new .mast .mast-stamp:not(.is-compact) .mast-stamp-ring {
    inset: 0;
    border: 3px solid currentColor;
    border-radius: 50%;
    box-shadow: inset 0 0 0 5px transparent, inset 0 0 0 6.5px currentColor;
  }
  html.wb-new .mast .mast-stamp:not(.is-compact) .mast-stamp-ring::after {
    inset: 0.85rem;
    border: 1.5px dashed currentColor;
    border-radius: 50%;
    opacity: 0.8;
  }
  html.wb-new .mast .mast-stamp:not(.is-compact) .mast-stamp-face { gap: 0.1rem; padding: 1.25rem 1rem; }
  html.wb-new .mast .mast-stamp:not(.is-compact) .mast-stamp-brand { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; }
  html.wb-new .mast .mast-stamp:not(.is-compact) .pp-lakbi { width: 1.5rem; height: 1.5rem; }
  html.wb-new .mast .mast-stamp:not(.is-compact) .mast-stamp-face strong { font-size: 1.05rem; letter-spacing: 0.06em; line-height: 1.05; }
  html.wb-new .mast .mast-stamp:not(.is-compact) .mast-stamp-country { font-size: 0.6rem; letter-spacing: 0.16em; }
  html.wb-new .mast .mast-stamp:not(.is-compact) .mast-stamp-date {
    margin-top: 0.1rem;
    padding: 0.05rem 0.4rem;
    border-top: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
  }
}
@keyframes mast-stamp-press {
  0% { opacity: 0; transform: rotate(-4deg) scale(1.6); }
  60% { opacity: 0.95; transform: rotate(-15deg) scale(0.94); }
  100% { opacity: 0.93; transform: rotate(-14deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  html.wb-new .mast .mast-stamp:not(.is-compact) { animation: none; }
}
html.wb-new .ledger-meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
html.wb-new .ledger-meta-line .nu-link-chip.is-expense { margin: 0; padding: 0.05rem 0.5rem; font-size: 0.68rem; }
/* Header stamp: sits just right of the title (not against the account button) */
@media (min-width: 48rem) {
  html.wb-new .mast .mast-stamp:not(.is-compact) {
    left: clamp(32rem, 38vw, 48rem);
    right: auto;
    top: 1.1rem;
    margin-top: 0;
  }
}

/* Header: a row of passport stamps, one per place you've left */
html.wb-new .mast-stamps { display: none; }
@media (min-width: 48rem) {
  html.wb-new .mast .mast-stamps {
    position: absolute;
    left: clamp(32rem, 38vw, 48rem);
    top: 1.1rem;
    z-index: 3;
    display: flex;
    align-items: center;
  }
  html.wb-new .mast .mast-stamps .mast-stamp.is-multi {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin: 0 0 0 -1.4rem;
    color: var(--stamp-ink);
    transform: rotate(var(--stamp-turn));
    animation: mast-stamp-press-multi 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
    animation-delay: calc(0.25s + var(--i) * 0.22s);
  }
  html.wb-new .mast .mast-stamps .mast-stamp.is-multi:first-child { margin-left: 0; }
  html.wb-new .mast .mast-stamps .mast-stamp.is-multi:nth-child(even) { margin-top: 1.6rem; }
  html.wb-new .mast .mast-stamps .mast-stamp.is-multi:hover { z-index: 5; transform: rotate(0deg) scale(1.05); opacity: 1; }
}
@keyframes mast-stamp-press-multi {
  0% { opacity: 0; transform: rotate(0deg) scale(1.6); }
  60% { opacity: 0.95; transform: rotate(var(--stamp-turn)) scale(0.94); }
  100% { opacity: 0.93; transform: rotate(var(--stamp-turn)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  html.wb-new .mast .mast-stamps .mast-stamp.is-multi { animation: none; }
}

/* Emergency: a tab per destination */
html.wb-new .nu-em-tabs { margin: 0 0 1rem; flex-wrap: wrap; }
html.wb-new .nu-em-tabs button { display: inline-grid; justify-items: start; gap: 0.05rem; padding: 0.45rem 0.95rem; text-align: left; line-height: 1.15; }
html.wb-new .nu-em-tabs button small { font-size: 0.66rem; font-weight: 600; color: var(--ink-soft); }
html.wb-new .nu-em-tabs button[aria-selected="true"] small { color: var(--forest); }

/* Hotel card: the photo stays clean — reviews sit in their own panel under it */
html.wb-new .nu-hotel-photo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--line);
}
html.wb-new .nu-hotel-photo .hotel-media {
  flex: 1 1 auto;
  height: auto;
  min-height: 12rem;
}
html.wb-new .nu-hotel-rv {
  position: static;
  flex: 0 0 auto;
  padding: 0.8rem 0.95rem 0.9rem;
  border-top: 3px solid #e6c98e;
  border-radius: 0;
  background: #fbf6ea;
  color: var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
html.wb-new .nu-hotel-rv .food-review-line { color: var(--ink); }
html.wb-new .nu-hotel-rv .food-review-note,
html.wb-new .nu-hotel-rv .rv-later { color: var(--ink-soft); }
html.wb-new .nu-hotel-rv .food-reviews-btn {
  border-color: #d9c08a;
  background: #fff;
  color: #7a5a14;
}
html.wb-new .nu-hotel-rv .food-reviews-btn:hover { background: #7a5a14; border-color: #7a5a14; color: #fff; }
@media (max-width: 47.99rem) {
  html.wb-new .nu-hotel-photo { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ——— Recap: globe with this trip's stops (under Passport Stamps) ——— */
html.wb-new .rc-page .rc-globe-slot {
  margin-top: 1.2rem;
}
html.wb-new .nu-globe-kick {
  margin: 0 0 0.5rem;
  color: var(--brick, #b5433c);
  font: 700 0.68rem/1.2 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: left;
}
html.wb-new .nu-globe-stage {
  position: relative;
  height: 24rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #c9a45c 28%, var(--line));
  border-radius: 18px;
  background: #050b12;
  box-shadow: 0 18px 50px rgba(19, 37, 30, 0.25), 0 0 30px color-mix(in srgb, #c9a45c 10%, transparent);
}
html.wb-new .nu-globe-map .maplibregl-canvas { outline: none; }
html.wb-new .nu-globe-map .maplibregl-ctrl-attrib {
  background: rgba(19, 37, 30, 0.7);
  color: rgba(243, 236, 220, 0.7);
  font-size: 0.6rem;
}
html.wb-new .nu-globe-map .maplibregl-ctrl-attrib a { color: #e8cf94; }
html.wb-new .nu-globe-tools {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 4;
  display: grid;
  gap: 0.4rem;
}
html.wb-new .nu-globe-tools button {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(201, 164, 92, 0.35);
  border-radius: 10px;
  background: #1c3228;
  color: #f3ecdc;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
html.wb-new .nu-globe-tools button:hover { border-color: #e8cf94; color: #e8cf94; }
html.wb-new .nu-globe-hud {
  position: absolute;
  left: 1rem;
  bottom: 0.85rem;
  z-index: 2;
  margin: 0;
  color: #eadfbf;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(19, 37, 30, 0.7);
}
html.wb-new .nu-globe-map {
  position: absolute;
  inset: 0;
}
html.wb-new .nu-globe.is-off {
  display: none;
}
html.wb-new .nu-globe-hint {
  margin: 0.45rem 0 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  text-align: left;
}
html.wb-new .nu-globe-pin {
  /* no position here: MapLibre places markers absolutely (top/left 0 + transform) */
  width: 28px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
html.wb-new .nu-globe-pin-pulse {
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border: 2px solid rgba(196, 85, 48, 0.7);
  border-radius: 50%;
  animation: nu-globe-ping 2.2s ease-out infinite;
  pointer-events: none;
}
html.wb-new .nu-globe-pushpin {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45));
  transition: transform 0.18s ease;
}
html.wb-new .nu-globe-pushpin-head {
  position: absolute;
  left: 50%;
  top: 1px;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffb199 0%, #e25a38 38%, #b33a22 72%, #7a2416 100%);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.55), inset 0 -2px 4px rgba(80, 16, 8, 0.35);
}
html.wb-new .nu-globe-pushpin-eye {
  position: absolute;
  left: 50%;
  top: 5px;
  width: 6px;
  height: 5px;
  margin-left: -5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}
html.wb-new .nu-globe-pushpin-needle {
  position: absolute;
  left: 50%;
  top: 17px;
  width: 7px;
  height: 26px;
  margin-left: -3.5px;
  background: linear-gradient(90deg, #9a958a 0%, #e8e4d8 45%, #6f6a60 100%);
  clip-path: polygon(32% 0, 68% 0, 50% 100%);
}
html.wb-new .nu-globe-pin-label {
  position: absolute;
  left: 26px;
  top: 2px;
  padding: 5px 9px;
  border: 1px solid rgba(201, 164, 92, 0.4);
  border-radius: 6px;
  background: #13251e;
  color: #f3ecdc;
  font: 600 0.7rem/1.2 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(19, 37, 30, 0.4);
}
html.wb-new .nu-globe-pin:hover,
html.wb-new .nu-globe-pin.is-on,
html.wb-new .nu-globe-pin:focus-visible { z-index: 40; }
html.wb-new .nu-globe-pin:hover .nu-globe-pushpin,
html.wb-new .nu-globe-pin.is-on .nu-globe-pushpin { transform: translateY(-3px) scale(1.08); }
html.wb-new .nu-globe-pin:hover .nu-globe-pin-label,
html.wb-new .nu-globe-pin.is-on .nu-globe-pin-label,
html.wb-new .nu-globe-pin:focus-visible .nu-globe-pin-label { opacity: 1; visibility: visible; }
@keyframes nu-globe-ping {
  0% { transform: scale(0.7); opacity: 0.8; }
  80% { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}
html.wb-new .nu-globe-card {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 3;
  padding: 0.8rem 0.9rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 252, 244, 0.97);
  box-shadow: 0 10px 26px rgba(20, 30, 25, 0.22);
  text-align: left;
}
html.wb-new .nu-globe-card[hidden] {
  display: none;
}
html.wb-new .nu-globe-card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
html.wb-new .nu-globe-card-num {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font: 800 0.8rem/1 var(--sans);
}
html.wb-new .nu-globe-card-name {
  display: grid;
  flex: 1;
  min-width: 0;
}
html.wb-new .nu-globe-card-name b {
  font: 400 1.15rem/1.2 var(--serif);
  color: var(--ink);
}
html.wb-new .nu-globe-card-name small {
  color: var(--ink-soft);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html.wb-new .nu-globe-x {
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
html.wb-new .nu-globe-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 0.65rem 0 0.2rem;
}
html.wb-new .nu-globe-facts span {
  display: grid;
  gap: 0.1rem;
  padding: 0.4rem 0.55rem;
  border-radius: 10px;
  background: #f3ecdc;
}
html.wb-new .nu-globe-facts small {
  color: var(--ink-soft);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
html.wb-new .nu-globe-facts b {
  color: var(--ink);
  font-size: 0.86rem;
}
html.wb-new .nu-globe-line {
  margin: 0.35rem 0 0;
  color: var(--ink);
  font-size: 0.82rem;
}



/* Highlights · Passport Stamps: same height side by side; the globe takes up the rest of the stamps card */
html.wb-new .rc-page-sec--highlights,
html.wb-new .rc-page-sec--stamps { align-self: stretch; display: flex; flex-direction: column; }
html.wb-new .rc-page-sec--highlights > .rc-story,
html.wb-new .rc-page-sec--stamps > .rc-story { flex: 1 1 auto; display: flex; flex-direction: column; }
html.wb-new .rc-page-sec--stamps .rc-stamp-showcase { flex: 1 1 auto; display: flex; flex-direction: column; }
html.wb-new .rc-page-sec--stamps .rc-globe-slot { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 20rem; }
html.wb-new .rc-page-sec--stamps .nu-globe { flex: 1 1 auto; display: flex; flex-direction: column; }
html.wb-new .rc-page-sec--stamps .nu-globe-stage { flex: 1 1 auto; height: auto; min-height: 18rem; }

/* Recap cover (page): the rating badge sits on the right, over the open part of the photo */
html.wb-new .rc-page .rc-story--cover .rc-story-cover { position: relative; }
html.wb-new .rc-page .rc-story--cover .rc-story-rating {
  position: absolute;
  top: 3.2rem;
  right: clamp(2rem, 8%, 6rem);
  z-index: 2;
  margin: 0;
  transform: rotate(4deg) scale(1.3);
  transform-origin: top right;
}
@media (max-width: 47.99rem) {
  html.wb-new .rc-page .rc-story--cover .rc-story-rating {
    position: static;
    transform: rotate(-3deg);
  }
}

/* Tablet / small laptop: the day panel (stops + map) stacks once the column gets narrow. */
@media (max-width: 52rem) {
  html.wb-new .nu-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Header stamps need the space right of the title; on tablets the title fills the row, so they
   stay in the recap / passport instead of spilling off the page. */
@media (min-width: 48rem) and (max-width: 60rem) {
  html.wb-new .mast .mast-stamps,
  html.wb-new .mast .mast-stamp:not(.is-compact) { display: none; }
}

/* Sticky side columns only when they fit: stacked (narrow) or short screens (phone on its side)
   scroll them with the page so their lower part stays reachable. */
@media (max-width: 52rem), (max-height: 40rem) {
  html.wb-new .nu-wrap #detail-slot,
  html.wb-new .nu-days { position: static; }
}

/* Header: when the passport stamps show, a long title wraps before it reaches them
   (the stamp row starts at clamp(32rem, 38vw, 48rem) — see .mast .mast-stamps). */
@media (min-width: 60.01rem) {
  html.wb-new .mast:has(.mast-stamps) #mast-title {
    max-width: calc(clamp(32rem, 38vw, 48rem) - 5rem);
  }

  /* The When / From → To chips wrap before the stamps instead of running under them
     (the stamps are links and took the taps). */
  html.wb-new .mast:has(.mast-stamps, .mast-stamp:not(.is-compact)) .nu-facts-row {
    max-width: calc(clamp(32rem, 38vw, 48rem) - max(1rem, 3%) - 1.25rem);
  }

  /* Room between the stamp row's start and the account / refresh buttons on the right. When
     the row would reach them, the stamps overlap more (same size, stacked tighter). */
  html.wb-new .mast .mast-stamps {
    --stamps-room: calc(100vw - clamp(32rem, 38vw, 48rem) - 3vw - 12.25rem);
  }
  html.wb-new .mast .mast-stamps:has(> :nth-child(2):last-child) > .mast-stamp.is-multi:not(:first-child) {
    margin-left: min(-1.4rem, var(--stamps-room) - 19rem);
  }
  html.wb-new .mast .mast-stamps:has(> :nth-child(3):last-child) > .mast-stamp.is-multi:not(:first-child) {
    margin-left: min(-1.4rem, (var(--stamps-room) - 28.5rem) / 2);
  }
  html.wb-new .mast .mast-stamps:has(> :nth-child(4):last-child) > .mast-stamp.is-multi:not(:first-child) {
    margin-left: min(-1.4rem, (var(--stamps-room) - 38rem) / 3);
  }
}

/* ——— Phones: the new Itinerary ——— */
@media (max-width: 47.99rem) {
  /* The day map opens full screen from the floating Map button; no map card on the page. */
  html.wb-new #panel-itinerary .nu-itin-map { display: none; }
  html.wb-new .nu-itin { gap: 0.9rem; }
}

/* Phones: an expense row is icon + text; status and amount sit under the name instead of
   squeezing it into a narrow middle column. */
@media (max-width: 36rem) {
  html.wb-new #panel-expenses .nu-exp-days .nu-exp-row { grid-template-columns: 2.4rem minmax(0, 1fr); row-gap: 0.35rem; }
  html.wb-new #panel-expenses .nu-exp-days .nu-exp-row .nu-exp-ico { grid-row: 1 / span 3; align-self: start; }
  html.wb-new #panel-expenses .nu-exp-days .nu-exp-row .nu-exp-status { grid-column: 2; grid-row: 2; }
  html.wb-new #panel-expenses .nu-exp-days .nu-exp-row .nu-exp-amt { grid-column: 2; grid-row: 3; justify-self: start; text-align: left; }
  html.wb-new #panel-expenses .nu-exp-days .nu-exp-row .exp-row-actions { grid-column: 2; }
}

/* Full-screen day map: clear of the phone's notch / home bar (viewport-fit=cover). */
html.wb-new .nu-mf-head {
  padding-top: calc(0.7rem + env(safe-area-inset-top, 0px));
  padding-left: calc(1rem + env(safe-area-inset-left, 0px));
  padding-right: calc(1rem + env(safe-area-inset-right, 0px));
}
html.wb-new .nu-map-full { padding-bottom: env(safe-area-inset-bottom, 0px); }


/* LakBi-suggested address: a small "can be off — double-check" note (wraps, never widens the card) */
html.wb-new .nu-lakbi-addr-note {
  margin: 0.2rem 0 0;
  max-width: 100%;
  color: #8a6d2a;
  font-size: 0.7rem;
  font-style: italic;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
html.wb-new .lbx .nu-lakbi-addr-note { margin: 0.15rem 0 0.2rem; color: #e6c98e; opacity: 0.9; }
html.wb-new .nu-sp-address .nu-lakbi-addr-note { margin: 0.35rem 0 0.4rem; }
html.wb-new .nu-food-body .nu-lakbi-addr-note,
html.wb-new .lbx .nu-lakbi-addr-note,
html.wb-new .nu-sp-address .nu-lakbi-addr-note { font-size: 0.7rem; line-height: 1.35; font-style: italic; }

/* ——— Food: notes (edit + card), LakBi's saved pick info, search / sort / groups (app: same in mobile workbook-new.css) ——— */
html.wb-new .food-card-field.is-notes textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 4.5rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.4;
  resize: vertical;
}
html.wb-new .nu-food-lakbi-info { display: grid; gap: 0.45rem; }
html.wb-new .nu-food-lakbi-info .lbx-why { font-size: 0.86rem; }
html.wb-new .nu-food-lakbi-info .lbx-reco { padding: 0.55rem 0.7rem; }
html.wb-new .nu-food-lakbi-info .lbx-reco p { font-size: 0.82rem; }
html.wb-new .nu-food-why.is-clamped:not(.is-open) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
html.wb-new .nu-food-more { justify-self: start; margin-top: -0.3rem; font-size: 0.78rem; }
html.wb-new .nu-food-note {
  padding: 0.5rem 0.7rem;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--paper, #fffdf7);
}
html.wb-new .nu-food-note b {
  display: block;
  margin-bottom: 0.1rem;
  color: var(--muted, #6b6b6b);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html.wb-new .nu-food-note p { margin: 0; font-size: 0.85rem; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }
html.wb-new .nu-food-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-bottom: 1rem;
}
html.wb-new .nu-food-search {
  flex: 1 1 16rem;
  min-height: 2.4rem;
  padding: 0 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
}
html.wb-new .nu-food-sort { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--muted, #6b6b6b); }
html.wb-new .nu-food-sort select { min-height: 2.4rem; border-radius: 999px; padding: 0 0.8rem; }
html.wb-new .nu-food-group + .nu-food-group { margin-top: 1.4rem; }
html.wb-new .nu-food-group-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
}
html.wb-new .nu-food-count {
  min-width: 1.5rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: #ecebe2;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}
html.wb-new .nu-food-group[hidden],
html.wb-new .nu-food-card[hidden],
html.wb-new .nu-food-nomatch[hidden] { display: none !important; }


/* Food toolbar: search with icon + sort toggle on one row, then All / On the schedule / Not scheduled */
html.wb-new .nu-food-tools { display: flex; align-items: center; gap: 0.5rem; margin: 0.2rem 0 0.6rem; }
html.wb-new .nu-food-searchbox {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  height: 2.75rem;
  padding: 0 0.85rem;
  border: 1px solid var(--line, #dedfd4);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-soft, #5f685f);
}
html.wb-new .nu-food-searchbox:focus-within { border-color: var(--forest, #1e3a2f); box-shadow: 0 0 0 3px color-mix(in srgb, var(--forest, #1e3a2f) 16%, transparent); }
html.wb-new .nu-food-searchbox svg { flex: none; width: 1.05rem; height: 1.05rem; }
html.wb-new .nu-food-searchbox input.nu-food-search,
html.wb-new .nu-food-searchbox input {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  color: var(--ink, #293c33);
  font: 400 16px var(--sans, system-ui);
}
html.wb-new .nu-food-sortbtn {
  flex: none;
  height: 2.75rem;
  padding: 0 0.95rem;
  border: 1px solid var(--line, #dedfd4);
  border-radius: 999px;
  background: var(--cream, #fffcf7);
  color: var(--ink, #293c33);
  font: 600 0.82rem var(--sans, system-ui);
  white-space: nowrap;
  cursor: pointer;
}
html.wb-new .nu-food-scope {
  display: flex;
  gap: 3px;
  margin: 0 0 0.7rem;
  padding: 3px;
  border-radius: 999px;
  background: var(--paper-2, #ece8dc);
}
html.wb-new .nu-food-scope button {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.4rem;
  padding: 0 0.6rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-soft, #5f685f);
  font: 600 0.8rem var(--sans, system-ui);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
html.wb-new .nu-food-scope button small { margin-left: 0.2rem; font-size: 0.72rem; opacity: 0.75; }
html.wb-new .nu-food-scope button[aria-pressed="true"] { background: var(--cream, #fffcf7); color: var(--ink, #293c33); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
html.wb-new .nu-food-sort { display: none; }


/* "✨ LakBi's picks" filter chip — the gold LakBi's pick badge as a chip */
html.wb-new .nu-chip.nu-chip-lakbi {
  border: 0;
  background: linear-gradient(135deg, #f7e2a6, #d4a441 45%, #f3d58a);
  color: #4a3208;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(160, 110, 20, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
html.wb-new .nu-chip.nu-chip-lakbi.is-on,
html.wb-new .nu-chip.nu-chip-lakbi[aria-pressed="true"] {
  outline: 2px solid #8a6414;
  outline-offset: 1px;
  box-shadow: 0 3px 10px rgba(160, 110, 20, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* The planner: a time held for a Crew HQ vote (owner 2026-10-10) */
#panel-itinerary .wbx-held { display: grid; gap: 0.3rem; margin: 0.35rem 0 0.6rem; }
#panel-itinerary .wbx-held p {
  margin: 0;
  padding: 0.45rem 0.7rem;
  border: 1px dashed #b4401a;
  border-radius: 10px;
  background: #fff6f1;
  color: #7a2e12;
  font-size: 0.82rem;
}

/* Saved places: LakBi's picks in one folded row under the crew's places (owner 2026-10-10) */
html.wb-new .plc-lakbi-fold {
  margin-top: 1.4rem;
  border: 1px solid #ecd9a8;
  border-radius: 14px;
  background: #fffaf0;
}
html.wb-new .plc-lakbi-fold > summary {
  margin: 0;
  padding: 0.85rem 1rem;
  cursor: pointer;
  list-style: none;
  flex-wrap: wrap;
}
html.wb-new .plc-lakbi-fold > summary::-webkit-details-marker { display: none; }
html.wb-new .plc-lakbi-fold > summary::after {
  content: "▸";
  margin-left: auto;
  color: #8a6414;
  transition: transform 0.15s ease;
}
html.wb-new .plc-lakbi-fold[open] > summary::after { transform: rotate(90deg); }
html.wb-new .plc-lakbi-fold > summary:focus-visible { outline: 2px solid #8a6414; outline-offset: 2px; border-radius: 12px; }
html.wb-new .plc-lakbi-spark { font-size: 1rem; }
html.wb-new .plc-lakbi-sub { font-family: var(--sans, inherit); font-size: 0.78rem; color: var(--muted, #6b6b6b); }
html.wb-new .plc-lakbi-fold > .nu-food-grid { padding: 0 1rem 1rem; }


/* Stop panel: a Food places stop shows the place's saved LakBi info + crew note */
html.wb-new .nu-sp-food { display: grid; gap: 0.5rem; }
html.wb-new .nu-sp-food .nu-food-lakbi-info { display: grid; gap: 0.45rem; }
html.wb-new .nu-sp-food .nu-food-note { margin: 0; }


/* Food chips on one row (scroll sideways when there are more) */
html.wb-new .nu-chips.is-one-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
html.wb-new .nu-chips.is-one-row::-webkit-scrollbar { display: none; }
html.wb-new .nu-chips.is-one-row > .nu-chip { flex: none; white-space: nowrap; }

/* Trip tags editor (Trip detail → Cover edit) — same block on web and app. */
.trip-tags-edit { display: grid; gap: 0.5rem; margin-top: 0.3rem; }
.trip-tags-chosen, .trip-tags-presets { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.trip-tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  min-height: 1.9rem; padding: 0.2rem 0.65rem; border-radius: 999px;
  font: inherit; font-size: 0.8rem; line-height: 1.2;
}
.trip-tag.is-chosen { background: var(--forest, #1e3a2f); color: #fff; padding-right: 0.3rem; }
.trip-tag-x {
  display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: inherit;
  font-size: 0.95rem; line-height: 1; cursor: pointer;
}
.trip-tag.is-preset {
  border: 1px dashed rgba(30, 58, 47, 0.35); background: #eef0e7; color: #3f4e38; cursor: pointer;
}
.trip-tag.is-preset:disabled { opacity: 0.45; cursor: not-allowed; }
.trip-tags-add { display: flex; gap: 0.4rem; align-items: center; }
.trip-tags-add input { flex: 1 1 auto; min-width: 0; }
.trip-tag-add-btn {
  flex: none; min-height: 2.2rem; padding: 0 0.9rem; border-radius: 0.6rem;
  border: 1px solid var(--forest, #1e3a2f); background: transparent; color: var(--forest, #1e3a2f);
  font: inherit; font-weight: 600; cursor: pointer;
}
.trip-tag-add-btn:disabled, .trip-tags-add input:disabled { opacity: 0.5; cursor: not-allowed; }
.trip-tags-hint { color: #7a8472; font-size: 0.72rem; }

/* Cover edit: Tags is its own full-width row under the fields (not a tall column in the grid) */
html.wb-new .trip-tags-field { grid-column: 1 / -1; order: 99; }
html.wb-new .trip-tags-field .trip-tags-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.6rem;
}
html.wb-new .trip-tags-field .trip-tags-chosen,
html.wb-new .trip-tags-field .trip-tags-presets { display: contents; }
html.wb-new .trip-tags-field .trip-tags-add { flex: 0 1 18rem; min-width: 12rem; }
html.wb-new .trip-tags-field .trip-tags-hint { flex-basis: 100%; }

/* Pending invitee: inert role buttons, and the "Roles apply once … accepts" note under them (not on top). */
html.wb-new .detail-people .wb-role-picks.is-pending + .detail-person-unlock {
  grid-column: 2 / -1;
  grid-row: 2;
  justify-self: end;
  max-width: none;
}

@media (max-width: 64rem) {
  html.wb-new .detail-people .wb-role-picks.is-pending + .detail-person-unlock {
    grid-row: 3;
    justify-self: start;
  }
}

/* Role note inside the header: "Got it" is a light pill on the light note, not the header's glass button. */
html.wb-new .mast .crew-role-note .crew-role-ok {
  border: 1px solid #2d5a45;
  background: #fff;
  color: #1f3d30;
}
html.wb-new .mast .crew-role-note .crew-role-ok:hover {
  background: #1f3d30;
  color: #fff;
}

/* Public trip: the creator card in the page flow (narrow / no room beside the column) —
   a compact card at the top of the sheet instead of floating over the content. */
.creator-float.is-inline {
  position: static;
  inset: auto;
  z-index: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  width: auto;
  max-width: 100%;
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.9rem;
  box-shadow: none;
}
.creator-float.is-inline .creator-float-head { flex: 1 1 14rem; min-width: 0; align-items: center; }
.creator-float.is-inline .creator-float-actions,
.creator-float.is-inline .creator-float-safety { margin-top: 0; flex-wrap: wrap; }
.creator-float.is-inline .creator-float-safety { padding-top: 0; border-top: 0; }
.creator-float.is-inline .creator-float-dismiss { margin: 0 -0.2rem 0 0; }

/* Trip detail → Travellers: a traveller's face + name open their profile. */
.traveller-row-head.is-link { color: inherit; text-decoration: none; border-radius: 12px; cursor: pointer; }
.traveller-row-head.is-link:hover strong { text-decoration: underline; text-underline-offset: 2px; }
.traveller-row-head.is-link:focus-visible { outline: 2px solid #8a5a14; outline-offset: 3px; }

/* ——— Public header below the floating creator card (< 901px): the app's public mast (261001-zhead1).
   "Itinerary by" chip (+ ⋯ Follow / Passport / Report / Block) instead of the big inline creator card,
   ★ rate + ♡ like pills, the app's When / From → To cards, calm round tray buttons. ——— */
.pub-creator {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  max-width: 100%;
}
.pub-mast-creator {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  box-sizing: border-box;
  min-width: 0;
  min-height: 2.75rem;
  max-width: min(100%, 17rem);
  padding: 0.3rem 0.8rem 0.3rem 0.3rem;
  border: 1px solid rgba(251, 246, 236, 0.22);
  border-radius: 999px;
  background: rgba(19, 37, 30, 0.45);
  color: #fbf6ec;
  text-align: left;
  text-decoration: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
a.pub-mast-creator,
a.pub-mast-creator:visited { color: #fbf6ec; text-decoration: none; }
a.pub-mast-creator:hover { background: rgba(19, 37, 30, 0.62); }
.pub-mast-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  overflow: hidden;
  border-radius: 50%;
  background: #e6c98e;
  color: #1f3d30;
  font: 700 0.78rem var(--sans, system-ui, sans-serif);
  box-shadow: 0 0 0 2px rgba(230, 201, 142, 0.85);
}
.pub-mast-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pub-mast-creator-text { display: grid; min-width: 0; line-height: 1.15; }
.pub-mast-creator-text small {
  font: 700 0.62rem var(--sans, system-ui, sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e6c98e;
}
.pub-mast-creator-text b {
  overflow: hidden;
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pub-mast-creator-go { margin-left: 0.15rem; font-size: 1.2rem; line-height: 1; opacity: 0.7; }
.pub-mast-more {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(251, 246, 236, 0.22);
  border-radius: 50%;
  background: rgba(19, 37, 30, 0.45);
  color: #fbf6ec;
  cursor: pointer;
}
.pub-mast-more:hover,
.pub-mast-more[aria-expanded="true"] { background: rgba(19, 37, 30, 0.62); }
.pub-creator-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 60;
  display: grid;
  min-width: 12.5rem;
  padding: 0.3rem;
  border: 1px solid rgba(31, 61, 48, 0.12);
  border-radius: 12px;
  background: #fbf6ec;
  color: #1f3d30;
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.4);
}
.pub-creator-menu[hidden] { display: none; }
.pub-creator-menu button {
  min-height: 2.75rem;
  padding: 0 0.85rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: 600 0.9rem var(--sans, system-ui, sans-serif);
  text-align: left;
  cursor: pointer;
}
.pub-creator-menu button[hidden] { display: none; }
.pub-creator-menu button:hover,
.pub-creator-menu button:focus-visible { background: rgba(31, 61, 48, 0.08); outline: none; }
.pub-creator-menu button:focus-visible { box-shadow: inset 0 0 0 2px #8a5a14; }
.pub-creator-menu button.is-danger { color: #a13d2d; }

.pub-mast-pills {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}
.pub-mast-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2.75rem;
  padding: 0 0.85rem;
  border: 1px solid rgba(251, 246, 236, 0.22);
  border-radius: 999px;
  background: rgba(19, 37, 30, 0.45);
  color: #fbf6ec;
  font: 700 0.86rem var(--sans, system-ui, sans-serif);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.pub-mast-pill small { font-size: 0.74rem; font-weight: 600; opacity: 0.75; }
.pub-mast-star { color: #e6c98e; }
.pub-mast-pill.is-like .pub-mast-heart { color: #f2b8a6; }
.pub-mast-pill.is-like.is-on { border-color: transparent; background: rgba(251, 246, 236, 0.92); color: #1f3d30; }
.pub-mast-pill.is-like.is-on .pub-mast-heart { color: #c0643f; }
.pub-mast-pill:hover { background: rgba(19, 37, 30, 0.62); }
.pub-mast-pill.is-like.is-on:hover { background: #fbf6ec; }
.pub-mast-pill:disabled { opacity: 0.7; cursor: progress; }
.pub-mast-pill:active,
a.pub-mast-creator:active,
.pub-mast-more:active { transform: scale(0.96); }
.pub-mast-pill:focus-visible,
.pub-mast-creator:focus-visible,
.pub-mast-more:focus-visible {
  outline: 2px solid #e6c98e;
  outline-offset: 2px;
}
@media (max-width: 360px) {
  .pub-mast-pill small { display: none; }
  .pub-mast-pill { padding: 0 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pub-mast-pill:active,
  a.pub-mast-creator:active,
  .pub-mast-more:active { transform: none; }
}

/* Jumped to from the rate pill: a soft gold ring on the ratings card for a moment. */
[data-lb-itin-ratings].is-spotlit .lb-ir { animation: pub-spotlight 1.5s ease-out; }
@keyframes pub-spotlight {
  0%, 30% { box-shadow: 0 0 0 3px rgba(230, 201, 142, 0.95), 0 12px 30px -12px rgba(0, 0, 0, 0.25); }
  100% { box-shadow: 0 0 0 0 rgba(230, 201, 142, 0), 0 1px 2px rgba(26, 20, 16, 0.04); }
}
@media (prefers-reduced-motion: reduce) {
  [data-lb-itin-ratings].is-spotlit .lb-ir { animation: none; box-shadow: 0 0 0 3px rgba(230, 201, 142, 0.95); }
}

/* Room to float (html:not(.pub-chip), set by placeCreatorPanel): keep the floating
   creator card and the tray heart. No room: the header chip + pills take over. */
html.pub-mast:not(.pub-chip) #mast .pub-creator,
html.pub-mast:not(.pub-chip) #mast .pub-mast-pills { display: none; }
.creator-float.is-in-mast { display: none !important; }
/* The header pill is the like button here; the tray heart would be a second one. */
html.pub-mast.pub-chip .workbook:has(#mast [data-pub-like]) #nav-upvote { display: none !important; }
html.pub-mast.pub-chip .mast .nu-people { row-gap: 0.5rem; }

@media (max-width: 47.99rem) {
  /* Top row: back · pills (the app's order). */
  html.pub-mast .mast .mast-top { align-items: center; }
  html.pub-mast .mast.is-collapsed .pub-mast-pills { display: none; }

  /* When / From → To: two quiet cards side by side, text ellipsised (no wrapping boxes). */
  html.wb-new .mast-meta .nu-facts-row.pub-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }
  .pub-hf {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.45rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(10, 24, 18, 0.32);
    color: #fbf1e8;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  .pub-hf > svg { flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: 0.1rem; color: #e6c98e; }
  .pub-hf > span { display: grid; min-width: 0; line-height: 1.25; }
  .pub-hf small {
    font: 700 0.58rem var(--sans, system-ui, sans-serif);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #e6c98e;
  }
  .pub-hf b,
  .pub-hf em {
    overflow: hidden;
    font: 500 0.78rem var(--sans, system-ui, sans-serif);
    font-style: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgba(251, 241, 232, 0.92);
  }
  .pub-hf em { font-size: 0.72rem; color: rgba(251, 241, 232, 0.66); }

  /* Passport stamps: small round stamps at the end of the creator row, in the flow (never over the tabs). */
  html.wb-new.pub-mast .mast .mast-stamps {
    display: flex;
    position: static;
    align-items: center;
    margin: 0 0 0 auto;
    padding-right: 0.2rem;
  }
  html.wb-new.pub-mast .mast .mast-stamps .mast-stamp.is-multi {
    --pp-page: #22392f;
    position: relative;
    width: 4rem;
    height: 4rem;
    margin: 0 0 0 -0.95rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 57, 47, 0.25), rgba(34, 57, 47, 0) 70%);
    color: var(--stamp-ink);
    box-shadow: none;
    opacity: 0.93;
    transform: rotate(var(--stamp-turn));
    filter: drop-shadow(0 0 1px color-mix(in srgb, var(--stamp-ink) 45%, transparent));
    animation: mast-stamp-press-multi 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
    animation-delay: calc(0.25s + var(--i) * 0.22s);
  }
  html.wb-new.pub-mast .mast .mast-stamps .mast-stamp.is-multi:first-child { margin-left: 0; }
  html.wb-new.pub-mast .mast .mast-stamps .mast-stamp.is-multi:nth-child(even) { margin-top: 0.5rem; }
  html.wb-new.pub-mast .mast .mast-stamps .mast-stamp-ring {
    inset: 0;
    border: 2px solid currentColor;
    border-radius: 50%;
    box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4px currentColor;
  }
  html.wb-new.pub-mast .mast .mast-stamps .mast-stamp-ring::after { inset: 0.5rem; border: 1px dashed currentColor; border-radius: 50%; opacity: 0.8; }
  html.wb-new.pub-mast .mast .mast-stamps .mast-stamp-face { gap: 0.02rem; padding: 0.55rem 0.35rem; }
  html.wb-new.pub-mast .mast .mast-stamps .mast-stamp-brand { font-size: 0.36rem; letter-spacing: 0.12em; text-transform: uppercase; }
  html.wb-new.pub-mast .mast .mast-stamps .pp-lakbi { width: 0.68rem; height: 0.68rem; }
  html.wb-new.pub-mast .mast .mast-stamps .mast-stamp-face strong {
    display: block;
    overflow: hidden;
    max-width: 100%;
    font-size: 0.42rem;
    letter-spacing: 0;
    line-height: 1.05;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  html.wb-new.pub-mast .mast .mast-stamps .mast-stamp-country { max-width: 88%; font-size: 0.32rem; letter-spacing: 0.06em; }
  html.wb-new.pub-mast .mast .mast-stamps .mast-stamp-date {
    margin-top: 0.05rem;
    padding: 0.01rem 0.2rem;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    font: 700 0.32rem ui-monospace, monospace;
    letter-spacing: 0.04em;
  }

  /* Tray under the tabs: account on the left, calm round icons + a labelled Copy pill on the right
     (was five equal-width chunky pills). */
  html.pub-mast .sheet-nav-tray:has(#public-nav:not([hidden])) {
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.45rem 0 0.55rem;
  }
  html.pub-mast .sheet-nav-tray:has(#public-nav:not([hidden])) #public-nav > a:not([hidden]),
  html.pub-mast .sheet-nav-tray:has(#public-nav:not([hidden])) #public-nav > button:not([hidden]) {
    flex: 0 0 auto;
    width: 2.75rem !important;
    min-width: 2.75rem;
    height: 2.75rem !important;
    min-height: 2.75rem !important;
    padding: 0 !important;
    border: 1px solid rgba(251, 246, 236, 0.2) !important;
    border-radius: 999px !important;
    background: rgba(19, 37, 30, 0.35) !important;
    color: #fbf6ec !important;
  }
  html.pub-mast .sheet-nav-tray:has(#public-nav:not([hidden])) #public-nav > #nav-home:not([hidden]) { margin-left: auto; }
  html.pub-mast .sheet-nav-tray:has(#public-nav:not([hidden])) #public-nav > #nav-edit:not([hidden]) {
    gap: 0.4rem;
    width: auto !important;
    padding: 0 1rem 0 0.85rem !important;
    border-color: transparent !important;
    background: #fbf6ec !important;
    color: #1f3d30 !important;
    font: 700 0.84rem var(--sans, system-ui, sans-serif) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-shadow: none !important;
  }
  html.pub-mast .sheet-nav-tray:has(#public-nav:not([hidden])) #public-nav > #nav-edit:not([hidden]) .public-nav-svg { color: #1f3d30 !important; stroke: currentColor; opacity: 1; }
  /* The label is a real span now ("Copy this itinerary", owner 2026-10-04); Share stays a round icon here. */
  html.pub-mast .sheet-nav-tray:has(#public-nav:not([hidden])) #public-nav > #nav-share .public-nav-text { display: none; }
  html.pub-mast .sheet-nav-tray:has(#public-nav:not([hidden])) #public-nav > a:hover,
  html.pub-mast .sheet-nav-tray:has(#public-nav:not([hidden])) #public-nav > button:not(#nav-edit):hover { background: rgba(19, 37, 30, 0.55) !important; }
  html.pub-mast .sheet-nav-tray:has(#public-nav:not([hidden])) #public-nav > :focus-visible,
  html.pub-mast .sheet-nav-tray .account-slot :focus-visible {
    outline: 2px solid #e6c98e !important;
    outline-offset: 2px;
  }
  html.pub-mast .sheet-nav-tray:has(#public-nav:not([hidden])) .account-slot .auth-menu-trigger { min-height: 2.75rem; }
}

/* Desktop: the stamp row starts at the top of the header and is ~11rem tall with the lower
   (even) stamps; a short header grows to hold it instead of letting it sit on the tab row. */
@media (min-width: 60.01rem) {
  html.wb-new .mast:has(.mast-stamps) { min-height: 13rem; }
}

/* ======== Map of the day: viewing window (like "Pick on map"), not a flat full screen (2026-10-01) ======== */
html.wb-new .nu-map-full {
  display: grid;
  place-items: center;
  grid-template-rows: none;
  padding: 1.5rem;
  background: transparent;
}
html.wb-new .nu-map-full[hidden] { display: none; }
.nu-mf-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(19, 37, 30, 0.55);
  cursor: default;
}
html.wb-new .nu-mf-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
  grid-template-rows: none;
  width: min(100%, 72rem);
  height: min(90vh, 50rem);
  border-radius: 18px;
  overflow: hidden;
  background: var(--paper, #f5f2e9);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.55);
  animation: nuMfPop 0.2s cubic-bezier(0.2, 0.8, 0.3, 1.1);
}
@keyframes nuMfPop { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
html.wb-new .nu-mf-list {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 1.2rem 1.1rem;
  border-left: 0;
  border-right: 1px solid var(--line, #ddd6c6);
  background: var(--cream, #fffcf7);
}
html.wb-new .nu-mf-list ol { overflow: auto; min-height: 0; padding-bottom: 0.4rem; }
.nu-mf-kicker { margin: 0 0 0.55rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #b8933f; }
html.wb-new .nu-mf-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  background: transparent;
  color: var(--ink, #293c33);
}
html.wb-new .nu-mf-day { flex: 1 1 auto; min-width: 0; }
html.wb-new .nu-mf-day select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.7rem;
  border: 1px solid var(--line, #ddd6c6);
  border-radius: 12px;
  background: #fff;
  color: var(--ink, #293c33);
  font: inherit;
  font-weight: 600;
}
html.wb-new .nu-mf-nav {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border: 1px solid var(--line, #ddd6c6);
  border-radius: 12px;
  background: #fff;
  color: var(--forest);
  font-size: 1.2rem;
}
html.wb-new .nu-mf-nav:not(:disabled):hover { background: #f1ece0; }
html.wb-new .nu-mf-where { display: block; margin: 0.5rem 0 0.9rem; font-size: 0.85rem; color: var(--ink-soft, #5f685f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.wb-new .nu-mf-list h3 { margin: 0 0 0.7rem; font-size: 1.25rem; }
html.wb-new .nu-mf-map { grid-column: 2; grid-row: 1; position: relative; min-height: 0; }
html.wb-new .nu-mf-close,
html.wb-new .nu-mf-fit {
  position: absolute;
  right: 0.9rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  border: 0;
  border-radius: 12px;
  background: var(--cream, #fffcf7);
  color: var(--forest);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  font-size: 1.05rem;
  cursor: pointer;
}
html.wb-new .nu-mf-close { top: 0.9rem; }
html.wb-new .nu-mf-fit { top: 4.1rem; }
html.wb-new .nu-mf-fit svg,
.nu-itin-map-expand svg { width: 1.15rem; height: 1.15rem; }
html.wb-new .nu-mf-close:hover,
html.wb-new .nu-mf-fit:hover { background: #fff; }
html.wb-new .nu-mf-close:focus-visible,
html.wb-new .nu-mf-fit:focus-visible,
html.wb-new .nu-mf-nav:focus-visible,
.nu-itin-map-expand:focus-visible { outline: 3px solid #e6c98e; outline-offset: 2px; }
/* Card: "View bigger" sits above "Show every stop" in the map's corner. */
.nu-itin-map-expand {
  position: absolute;
  right: 0.6rem;
  bottom: 3.6rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: var(--forest);
  box-shadow: 0 2px 10px rgba(19, 37, 30, 0.2);
  cursor: pointer;
}
@media (max-width: 52rem) {
  html.wb-new .nu-map-full { padding: 0; }
  html.wb-new .nu-mf-panel {
    grid-template-columns: 1fr;
    grid-template-rows: 55% minmax(0, 1fr);
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  html.wb-new .nu-mf-map { grid-column: 1; grid-row: 1; }
  html.wb-new .nu-mf-list { grid-column: 1; grid-row: 2; border-right: 0; border-top: 1px solid var(--line, #ddd6c6); }
  html.wb-new .nu-mf-close { top: calc(0.9rem + env(safe-area-inset-top, 0px)); }
  html.wb-new .nu-mf-fit { top: calc(4.1rem + env(safe-area-inset-top, 0px)); }
}
@media (prefers-reduced-motion: reduce) { html.wb-new .nu-mf-panel { animation: none; } }

/* Phones: Home time with local zones takes a full row (it wrapped into a tall narrow tile). */
@media (max-width: 47.99rem) {
  html.wb-new .nu-jr-facts > div.is-zones { grid-column: 1 / -1; }
  /* Travel window (with its days) on its own row, so Travellers + Stops pair up (no lone tile). */
  html.wb-new .nu-jr-facts > div.is-window { grid-column: 1 / -1; }
}

/* Phones: the stop / day panel sits in the page flow, so no height cap (it clipped the bottom of tall stops). */
@media (max-width: 47.99rem) {
  html.wb-new .nu-wrap .detail,
  html.wb-new .nu-wrap .detail.nu-day-panel { max-height: none; overflow: clip; } /* clip = keep rounded corners, never cut content (no cap) */
}

/* Guide "🎉 What's on" (renderDestNotesWhatsOn, web + app): first in each stop's guide. */
.dest-notes-cat.is-whats-on li .dest-notes-wo-when {
  color: #7a5212;
  font-size: 0.78rem;
  font-weight: 700;
}
.dest-notes-cat.is-whats-on li.is-during {
  border-left: 3px solid #d9a441;
  padding-left: 0.55rem;
}
.dest-notes-wo-fine {
  margin: 0.35rem 0 0;
  color: #8a8a8a;
  font-size: 0.75rem;
}

/* 🎉 What's on chip in a day header (whatsOnDayChipsHtml, web + app). Tap = the one-line note. */
.wo-day {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.35rem;
  flex-basis: 100%;
}
.wo-chip {
  max-width: 100%;
  border-radius: 0.8rem;
  background: #fbefd6;
  color: #7a5212;
  font-size: 0.78rem;
  font-weight: 700;
}
.wo-chip.is-holiday {
  background: #ece6dc;
  color: #5a4a3a;
}
.wo-chip summary {
  padding: 0.15rem 0.6rem;
  cursor: pointer;
  list-style: none;
}
.wo-chip summary::-webkit-details-marker {
  display: none;
}
.wo-chip p {
  margin: 0;
  padding: 0 0.6rem 0.4rem;
  font-weight: 500;
  line-height: 1.35;
}

/* Hotel booking scan screen (hotelScanScreen in player.js; app twin .flight-scan-modal.is-hotel-scan) */
.hs-scan {
  position: fixed;
  inset: 0;
  z-index: 12500;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(26, 20, 16, 0.42);
}
.hs-scan-card {
  width: min(440px, 100%);
  padding: 1.4rem 1.4rem 1.2rem;
  border-radius: 18px;
  background: var(--cream, #fffcf7);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.hs-scan-kicker {
  margin: 0;
  color: var(--gold, #b0893a);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hs-scan-card h2 {
  margin: 0.35rem 0 0.4rem;
  font-family: var(--serif, Georgia, serif);
  font-size: 1.5rem;
}
.hs-scan-file,
.hs-scan-note {
  margin: 0;
  color: var(--ink-soft, #4a3f36);
  font-size: 0.9rem;
  line-height: 1.45;
}
.hs-scan-bar {
  height: 0.45rem;
  margin: 1rem 0 0.7rem;
  border-radius: 999px;
  background: rgba(30, 58, 47, 0.12);
  overflow: hidden;
}
.hs-scan-bar span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: 999px;
  background: var(--forest, #1e3a2f);
  animation: hs-web-scan 1.15s ease-in-out infinite;
}
@keyframes hs-web-scan {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(290%); }
}
@media (prefers-reduced-motion: reduce) {
  .hs-scan-bar span { animation: none; width: 100%; opacity: 0.5; }
}
.hs-scan-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

/* Trip detail: clear space between the journey and the facts (owner 2026-10-02; app: same). */
html.wb-new .nu-jr .nu-jr-facts {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px dashed rgba(30, 58, 47, 0.18);
}

/* ——— Phone itinerary like the app (owner 2026-10-02) ———
 * The stop / editor / new-stop panel (#detail-slot) is a bottom sheet over the day on phones:
 * grip + day band + ×, scrim, slide up once (is-entering), slide down on close (is-leaving).
 * js/player.js itinPhoneSheetOpen / closeItinPhoneSheet. Browser Back closes it. */
@media (max-width: 47.99rem) {
  html.itin-sheet-open,
  html.itin-sheet-open body {
    overflow: hidden;
  }
  html.itin-sheet-open #itin-fab-wrap,
  html.itin-sheet-open .lakbi-chat-launch {
    visibility: hidden;
  }
  html.wb-new .nu-sheet-scrim {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(26, 20, 16, 0.42);
    -webkit-tap-highlight-color: transparent;
  }
  html.wb-new #detail-slot.is-phone-sheet {
    position: fixed;
    top: auto; /* the desktop sticky panel sets top: 72px */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 61;
    max-height: min(88dvh, calc(100dvh - 48px));
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--cream, #fffcf7);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.28);
    padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
  }
  html.wb-new #detail-slot.is-phone-sheet > aside.detail {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    max-height: none;
    position: static;
  }
  /* The sheet's band replaces the panel's own day strip. */
  html.wb-new #detail-slot.is-phone-sheet .nu-dp-top {
    display: none;
  }
  html.wb-new .nu-sheet-band {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.95rem 1rem 0.8rem 1.1rem;
    background: linear-gradient(140deg, var(--forest, #1e3a2f), var(--forest-deep, var(--forest, #1e3a2f)));
    color: #fbeee6;
    border-radius: 22px 22px 0 0;
  }
  html.wb-new .nu-sheet-band b {
    font-size: 0.74rem;
    font-weight: 750;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  html.wb-new .nu-sheet-grip {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
    transform: translateX(-50%);
  }
  html.wb-new .nu-sheet-x {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
  }
  html.wb-new #detail-slot.is-phone-sheet.is-entering {
    animation: nu-sheet-in 300ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  html.wb-new .nu-sheet-scrim.is-entering {
    animation: nu-scrim-in 240ms ease-out both;
  }
  html.wb-new #detail-slot.is-phone-sheet.is-leaving {
    animation: nu-sheet-out 200ms ease-in both;
  }
  html.wb-new .nu-sheet-scrim.is-leaving {
    animation: nu-scrim-out 200ms ease-in both;
  }
  /* App's edit bar while editing: + Add · Unsaved · Done/Undo · Save. */
  html.wb-new .nu-edit-dock {
    gap: 0.4rem;
  }
  html.wb-new .nu-edit-dock .nu-edit-add {
    background: var(--gold-soft, #e9d3a1);
    color: var(--ink, #1a1410);
    font-weight: 700;
  }
  html.wb-new .nu-edit-unsaved {
    padding: 0 0.4rem;
    color: #f3d9a4;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
}
@keyframes nu-sheet-in {
  from { transform: translateY(100%); }
  to { transform: none; }
}
@keyframes nu-sheet-out {
  from { transform: none; }
  to { transform: translateY(100%); }
}
@keyframes nu-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes nu-scrim-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.wb-new #detail-slot.is-phone-sheet.is-entering,
  html.wb-new #detail-slot.is-phone-sheet.is-leaving,
  html.wb-new .nu-sheet-scrim.is-entering,
  html.wb-new .nu-sheet-scrim.is-leaving {
    animation: none;
  }
}
@media (max-width: 47.99rem) {
  /* In the sheet the band shows the day: no desktop cap / day strip, one scroller (the sheet). */
  html.wb-new #detail-slot.is-phone-sheet .detail::before,
  html.wb-new #detail-slot.is-phone-sheet .wb-detail > .when {
    display: none;
  }
  html.wb-new #detail-slot.is-phone-sheet > aside.detail {
    padding-top: 1rem;
    overflow: visible;
  }
}
@media (max-width: 47.99rem) {
  /* App: Remove · Cancel · Update stay pinned at the bottom of the sheet. */
  html.wb-new #detail-slot.is-phone-sheet .wb-edit-actions,
  html.wb-new #detail-slot.is-phone-sheet .wb-draft-actions {
    position: sticky;
    bottom: calc(-1 * max(18px, env(safe-area-inset-bottom, 0px)));
    z-index: 2;
    margin-left: 0;
    margin-right: 0;
    padding: 0.75rem 1.1rem max(0.75rem, env(safe-area-inset-bottom, 0px));
    background: var(--cream, #fffcf7);
    box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.08);
  }
  /* Day tools live above the list on phones (.nu-itin-tools-edit), not inside a stop. */
  html.wb-new #detail-slot.is-phone-sheet .detail-tools,
  html.wb-new #detail-slot:not(.is-phone-sheet) > .is-add-hint {
    display: none;
  }
  html.wb-new .nu-itin-tools-edit {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.9rem;
  }
}
@media (max-width: 47.99rem) {
  html.wb-new .nu-itin-tools-edit > * {
    flex: 0 1 auto;
    min-height: 40px;
    margin: 0;
    padding: 0 0.9rem;
    border-radius: 999px;
    font-size: 0.82rem;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
  }
}
@media (max-width: 47.99rem) {
  /* New stop in the sheet: the band says "New event"; the draft head is plain text (LakBi's lede stays). */
  html.wb-new #detail-slot.is-phone-sheet > .detail.is-draft > .wb-detail-head {
    margin: 0 1.1rem 0.6rem;
    padding: 0;
    background: none;
    color: var(--ink, #1a1410);
    box-shadow: none;
  }
  html.wb-new #detail-slot.is-phone-sheet > .detail.is-draft > .wb-detail-head .when,
  html.wb-new #detail-slot.is-phone-sheet > .detail.is-draft > .wb-detail-head h3 {
    display: none;
  }
  html.wb-new #detail-slot.is-phone-sheet > .detail.is-draft > .wb-detail-head .wb-detail-lede {
    margin: 0;
    color: var(--ink-soft, #4a3f36);
    font-size: 0.86rem;
  }
}
@media (max-width: 47.99rem) {
  /* Ask LakBi windows are bottom sheets on phones, like the app. */
  html.wb-new dialog#ask-lakbi-draft-modal,
  html.wb-new dialog#ask-lakbi-food-modal {
    width: 100%;
    max-width: 100%;
    max-height: 90dvh;
    margin: auto 0 0;
    border-radius: 22px 22px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  html.wb-new dialog#ask-lakbi-draft-modal[open],
  html.wb-new dialog#ask-lakbi-food-modal[open] {
    animation: nu-sheet-in 300ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards; /* not "both": a kept transform clips pickers mounted inside */
  }
}
@media (max-width: 47.99rem) and (prefers-reduced-motion: reduce) {
  html.wb-new dialog#ask-lakbi-draft-modal[open],
  html.wb-new dialog#ask-lakbi-food-modal[open] { animation: none; }
}

/* Split bill: room between "Split equally" and the people, and below the last row (owner 2026-10-03). */
html.wb-new [data-nu-exp-pane="split"] .apply-all + .people,
html.wb-new [data-nu-exp-pane="split"] .people {
  padding: 0.75rem 0.85rem 0.9rem;
}

/* Prep edit rows: the item's text fills the row; 🔗 📎 × stay compact — names were cut to
   "Travel essentia" in a 300px card (owner 2026-10-03). */
#panel-prep .check-row .wb-check-text {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
#panel-prep .check-row .prep-link-btn,
#panel-prep .check-row .prep-remove {
  flex: 0 0 auto;
  width: 1.9rem;
  min-width: 1.9rem;
  height: 1.9rem;
  min-height: 1.9rem;
  padding: 0;
}
#panel-prep .check-row {
  gap: 0.3rem;
}

/* Prep edit row (owner 2026-10-03 "messy to edit"): one line ☐ · text · 🔗 · 📎 · ×; the link
   field and file chip on a second line under the text; the New/Edited tag on the row's top edge. */
html.wb-new #panel-prep .check-row:has(> .wb-check-text) {
  position: relative;
  display: grid;
  /* ⋮⋮ (drag, owner 2026-10-14) · ☐ · text · 🔗 · 📎 · × — the handle has its own column, so it never stacks */
  grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  column-gap: 0.35rem;
  row-gap: 0.35rem;
}
html.wb-new #panel-prep .check-row:has(> .wb-check-text) > .prep-drag { grid-column: 1; grid-row: 1; }
html.wb-new #panel-prep .check-row:has(> .wb-check-text) > label { grid-column: 2; }
html.wb-new #panel-prep .check-row:has(> .wb-check-text) > .wb-check-text { grid-column: 3; }
html.wb-new #panel-prep .check-row:has(> .wb-check-text) > .prep-crew-mark { display: none; }
html.wb-new #panel-prep .check-row:has(> .wb-check-text) > .prep-link-btn:not(.prep-file-btn) { grid-column: 4; }
html.wb-new #panel-prep .check-row:has(> .wb-check-text) > .prep-file-btn { grid-column: 5; }
html.wb-new #panel-prep .check-row:has(> .wb-check-text) > .prep-remove { grid-column: 6; }
html.wb-new #panel-prep .check-row:has(> .wb-check-text) > .prep-item-link,
html.wb-new #panel-prep .check-row:has(> .wb-check-text) > .prep-file-line {
  grid-column: 3 / -1;
  width: 100%;
  min-width: 0;
  margin: 0;
}
html.wb-new #panel-prep .check-row:has(> .wb-check-text) > .prep-item-link[hidden] { display: none; }
html.wb-new #panel-prep .check-row.is-new:has(> .wb-check-text)::before,
html.wb-new #panel-prep .check-row.is-edited:has(> .wb-check-text)::before {
  top: -0.55rem;
  right: 2.4rem;
  font-size: 0.55rem;
  padding: 0.05rem 0.35rem;
}

/* The slim bar (.nu-mini, fixed, ~3.2rem) covers the top of the page once you scroll. Anything scrolled
   into view (a jump, a focus, a tester tool) stopped under it, so "Add new event" sat behind the bar and
   clicks hit the bar (tester 2026-10-04). Scroll stops clear it. */
html.wb-new {
  scroll-padding-top: 4.5rem;
}
html.wb-new .nu-itin-map-hint.is-warn { color: #9a5b12; }

/* ═══ Map planner, desktop (owner 2026-10-04): Edit on the Itinerary at 48rem and wider is the app's map
   planner, full screen — the plan in a side column, the day's map beside it (06a–06c; nuPlan* in
   workbook-new.js). Scoped to #panel-itinerary.wbp-on / html.wbp-open; the look is the app's
   (live-nav.css .lmp-* / .lm-plan-*) on the web tokens: calm rows, one accent, no heavy borders.
   The stop editor (#detail-slot) keeps its own look — only its place in the column is set here. ═══ */
html.wbp-open,
html.wbp-open body {
  overflow: hidden;
}
/* The creator card and the slim bar (body level, z 19 / 60) would sit over the planner. */
html.wbp-open #creator-panel,
html.wbp-open .nu-mini {
  display: none !important;
}
/* Inside .workbook's stacking context: above the mast, the tabs and the edit buttons (18). LakBi's
   launcher and chat (body level) stay on top on purpose. */
#panel-itinerary.wbp-on {
  position: fixed;
  inset: 0;
  z-index: 50;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}
#panel-itinerary.wbp-on > .wbp {
  --wbp-side: 23rem;
  display: grid;
  grid-template-columns: var(--wbp-side) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100dvh;
}
#panel-itinerary.wbp-on > .wbp.is-editing {
  --wbp-side: 26rem;
}

/* ——— The side column: day + Undo / Save, the day strip, the stops (or the stop editor) ——— */
#panel-itinerary.wbp-on .wbp-side {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--cream);
  border-right: 1px solid var(--line);
  box-shadow: 6px 0 24px -18px rgba(19, 37, 30, 0.35);
}
#panel-itinerary.wbp-on .wbp-side > * {
  flex: none;
}
/* The list and the editor scroll; the LakBi launcher sits bottom-left over this column, so both
   scroll clear of it. */
#panel-itinerary.wbp-on .wbp-side .lmp-list,
#panel-itinerary.wbp-on .wbp-side #detail-slot {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding-bottom: 5.5rem;
}
/* The editor takes the focus after its row's Edit (wbPlanFocusRestore) — no ring round the whole column. */
#panel-itinerary.wbp-on .wbp-side #detail-slot:focus { outline: none; }
#panel-itinerary.wbp-on .lmp-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.2rem 1.1rem 0.85rem 1.25rem;
}
#panel-itinerary.wbp-on .lmp-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 1 1 auto;
  gap: 0.1rem;
  min-width: 0;
  line-height: 1.25;
}
#panel-itinerary.wbp-on .lmp-title b {
  overflow: hidden;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}
#panel-itinerary.wbp-on .lmp-title small {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.8rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#panel-itinerary.wbp-on .lmp-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
}
#panel-itinerary.wbp-on .lmp-actions button {
  min-height: 2.35rem;
  margin: 0;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
#panel-itinerary.wbp-on .lmp-actions button[hidden],
#panel-itinerary.wbp-on .lmp-actions #itin-dirty:empty {
  display: none;
}
#panel-itinerary.wbp-on .lmp-actions #itin-dirty {
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 600;
}
/* Done and Save are filled (easy to find); Undo is quiet beside Save. */
#panel-itinerary.wbp-on .lmp-actions :is(.lmp-done, .lmp-save) {
  border: 1px solid var(--forest);
  background: var(--forest);
  color: var(--cream);
}
#panel-itinerary.wbp-on .lmp-actions .lmp-done {
  box-shadow: 0 4px 12px rgba(19, 37, 30, 0.18);
}
#panel-itinerary.wbp-on .lmp-actions :is(.lmp-done, .lmp-save):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--forest) 84%, #000);
  background: color-mix(in srgb, var(--forest) 84%, #000);
}
#panel-itinerary.wbp-on .lmp-actions .lmp-undo {
  border: 1px solid color-mix(in srgb, var(--forest) 22%, transparent);
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}
#panel-itinerary.wbp-on .lmp-actions .lmp-undo:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--forest) 40%, transparent);
  background: color-mix(in srgb, var(--forest) 7%, transparent);
}
#panel-itinerary.wbp-on .lmp-actions button:disabled {
  opacity: 0.6;
  cursor: default;
}
#panel-itinerary.wbp-on .wbp-side :is(.itin-edit-until, .itin-lock-banner) {
  margin: 0 1.25rem 0.6rem;
  font-size: 0.8rem;
}
#panel-itinerary.wbp-on .lmp-warn {
  margin: 0 1.1rem 0.6rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid #f5b5ae;
  border-radius: 10px;
  background: #fdecea;
  color: #8a1c12;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.4;
}

/* One line of days: weekday over the date, the picked one filled. A thin scrollbar shows on hover. */
#panel-itinerary.wbp-on .lmp-days {
  display: flex;
  gap: 0.2rem;
  margin: 0;
  padding: 0 1rem 0.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1rem), transparent);
}
#panel-itinerary.wbp-on .lmp-days:is(:hover, :focus-within) {
  scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent;
}
#panel-itinerary.wbp-on .lmp-day {
  flex: none;
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  width: 2.75rem;
  min-height: 0;
  margin: 0;
  padding: 0.35rem 0 0.4rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  cursor: pointer;
}
#panel-itinerary.wbp-on .lmp-day small {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
#panel-itinerary.wbp-on .lmp-day b {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 700;
  transition: background-color 0.15s, color 0.15s;
}
#panel-itinerary.wbp-on .lmp-day:hover b {
  background: color-mix(in srgb, var(--forest) 9%, transparent);
}
#panel-itinerary.wbp-on .lmp-day:is(.is-on, [aria-pressed="true"]) small {
  color: var(--forest);
}
#panel-itinerary.wbp-on .lmp-day:is(.is-on, [aria-pressed="true"]) b {
  background: var(--forest);
  color: var(--cream);
}

/* Placing: one line that says what's waiting; the slots are in the list. */
#panel-itinerary.wbp-on .lmp-placing {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 1rem 0.65rem;
  padding: 0.55rem 0.55rem 0.55rem 0.9rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--forest) 9%, var(--cream));
  color: var(--ink);
  font-size: 0.85rem;
  line-height: 1.35;
}
#panel-itinerary.wbp-on .lmp-placing span {
  flex: 1 1 auto;
  min-width: 0;
}
#panel-itinerary.wbp-on .lmp-placing button {
  flex: none;
  min-height: 2rem;
  margin: 0;
  padding: 0.3rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--forest) 22%, transparent);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
#panel-itinerary.wbp-on .lmp-placing button:hover {
  border-color: color-mix(in srgb, var(--forest) 45%, transparent);
}

/* ——— The stops: number pin in the type's colour · name over one quiet line · Edit · grip ——— */
#panel-itinerary.wbp-on .lmp-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.6rem 0.75rem 5.5rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
#panel-itinerary.wbp-on .lmp-list.is-plan-dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}
/* The pin colours are the day map's (NU_MAP_TYPE_COLORS); the bare .type-* tints are undone here. */
#panel-itinerary.wbp-on .lmp-stop {
  --wbp-c: #5f685f;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 3.4rem;
  margin: 0;
  padding: 0.3rem 0.25rem 0.3rem 0.5rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  transition: background-color 0.15s, box-shadow 0.15s;
}
#panel-itinerary.wbp-on .lmp-stop:is(.type-transpo, .type-flight) { --wbp-c: #0369a1; }
#panel-itinerary.wbp-on .lmp-stop.type-food { --wbp-c: #b44a2a; }
#panel-itinerary.wbp-on .lmp-stop:is(.type-attraction, .type-see) { --wbp-c: #1e3a2f; }
#panel-itinerary.wbp-on .lmp-stop.type-rest { --wbp-c: #a21caf; }
#panel-itinerary.wbp-on .lmp-stop.type-activity { --wbp-c: #9f1239; }
#panel-itinerary.wbp-on .lmp-stop.type-tour { --wbp-c: #a16207; }
#panel-itinerary.wbp-on .lmp-stop.type-shop { --wbp-c: #4338ca; }
#panel-itinerary.wbp-on .lmp-stop:is(.type-rr, .type-freetime) { --wbp-c: #15803d; }
#panel-itinerary.wbp-on .lmp-stop:hover {
  background: color-mix(in srgb, var(--forest) 5%, transparent);
}
#panel-itinerary.wbp-on .lmp-stop.is-on {
  background: #fff;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wbp-c) 45%, transparent), 0 4px 14px rgba(19, 37, 30, 0.07);
}
#panel-itinerary.wbp-on .lmp-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.8rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#panel-itinerary.wbp-on .lmp-pin {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--wbp-c);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
#panel-itinerary.wbp-on .lmp-stop.is-fixed .lmp-pin {
  background: color-mix(in srgb, var(--ink) 10%, #fff);
  color: var(--ink-soft);
}
#panel-itinerary.wbp-on .lmp-stop.is-unmapped .lmp-pin {
  border: 1.5px dashed color-mix(in srgb, var(--wbp-c) 60%, transparent);
  background: transparent;
  color: var(--wbp-c);
}
#panel-itinerary.wbp-on .lmp-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.05rem;
  min-width: 0;
  line-height: 1.3;
}
#panel-itinerary.wbp-on .lmp-body strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 650;
  /* Two lines before the … (web audit W-18 2026-10-20: "Arrive · Osaka, J…" cut on one line). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow-wrap: anywhere;
}
#panel-itinerary.wbp-on .lmp-body small {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.76rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* A row that never moves (a flight, a Trip detail travel row, hotel check-in / out) keeps the normal ink (owner
   2026-10-13 "I don't know why it's greyed out"): the faint 🔒 in its right column says it's fixed (shared/plan-drag.css). */
/* The picked stop (shown on the map) offers Edit; a second click on it does the same. Keyboard focus
   in the row shows it too, so Tab reaches it. */
#panel-itinerary.wbp-on .lmp-edit {
  display: none;
  flex: none;
  align-self: center;
  align-items: center;
  min-height: 2rem;
  margin: 0;
  padding: 0.3rem 0.85rem;
  border: 0;
  border-radius: 999px;
  background: var(--forest);
  color: var(--cream);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
/* :focus-within, not :has(:focus-visible) (2026-10-04): the row keeps matching while Tab moves from its
   name to Edit — with focus-visible, Edit vanished as the name blurred and the focus fell to the page. */
#panel-itinerary.wbp-on .lmp-stop:is(.is-on, :focus-within) .lmp-edit {
  display: inline-flex;
}
#panel-itinerary.wbp-on .lmp-edit:hover {
  background: color-mix(in srgb, var(--forest) 84%, #000);
}
/* The grip: shown on hover / focus with a mouse; always there on touch screens. */
#panel-itinerary.wbp-on .lm-plan-drag {
  flex: none;
  display: grid;
  place-items: center;
  align-self: stretch;
  width: 2.1rem;
  min-height: 2.8rem;
  margin: 0;
  border-radius: 10px;
  color: color-mix(in srgb, var(--ink) 38%, transparent);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.15s, background-color 0.15s, color 0.15s;
}
#panel-itinerary.wbp-on .lm-plan-drag i {
  width: 12px;
  height: 18px;
  background: radial-gradient(circle, currentColor 1.6px, transparent 1.8px) 0 0 / 6px 6px;
}
#panel-itinerary.wbp-on .lm-plan-drag:hover {
  background: color-mix(in srgb, var(--forest) 8%, transparent);
  color: var(--ink);
}
#panel-itinerary.wbp-on .lm-plan-drag.is-locked {
  color: color-mix(in srgb, var(--ink) 35%, transparent);
  font-size: 0.8rem;
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  #panel-itinerary.wbp-on .lmp-stop .lm-plan-drag {
    opacity: 0;
  }
  #panel-itinerary.wbp-on .lmp-stop:is(:hover, .is-on, .is-dragging, :focus-within) .lm-plan-drag,
  #panel-itinerary.wbp-on .lmp-list.is-plan-dragging .lm-plan-drag {
    opacity: 1;
  }
}
#panel-itinerary.wbp-on .lmp-stop.is-dragging {
  z-index: 3;
  background: #fff;
  opacity: 0.96;
  box-shadow: 0 12px 28px rgba(19, 37, 30, 0.2), inset 0 0 0 1.5px color-mix(in srgb, var(--forest) 40%, transparent);
}
#panel-itinerary.wbp-on .lmp-stop.is-dragging .lm-plan-drag {
  cursor: grabbing;
}
#panel-itinerary.wbp-on .lmp-stop.is-drop-before {
  box-shadow: 0 -2px 0 0 var(--forest);
}
#panel-itinerary.wbp-on .lmp-stop.is-drop-after {
  box-shadow: 0 2px 0 0 var(--forest);
}
/* Between pinned stops: a quiet travel line. */
#panel-itinerary.wbp-on .lmp-leg {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.15rem 0 0.15rem 1.05rem;
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.3;
}
#panel-itinerary.wbp-on .lmp-leg span {
  font-size: 0.8rem;
}
#panel-itinerary.wbp-on .lmp-leg.is-far {
  color: #9a3412;
}
#panel-itinerary.wbp-on .lmp-slot {
  display: block;
  width: 100%;
  margin: 0.2rem 0;
  padding: 0.55rem 0.8rem;
  border: 1.5px dashed color-mix(in srgb, var(--forest) 35%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--forest) 5%, transparent);
  color: var(--forest);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
#panel-itinerary.wbp-on .lmp-slot:hover {
  border-color: color-mix(in srgb, var(--forest) 60%, transparent);
  background: color-mix(in srgb, var(--forest) 11%, transparent);
}
#panel-itinerary.wbp-on .lmp-empty {
  margin: 0.5rem 0.25rem;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.45;
}

/* Add a place: one quiet button → four tiles, one list at a time, a few small links. */
#panel-itinerary.wbp-on .lmp-add {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0.6rem 0 0;
  padding: 0.75rem 0.9rem;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--forest) 7%, transparent);
  color: var(--forest);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s;
}
#panel-itinerary.wbp-on .lmp-add:is(:hover, [aria-expanded="true"]) {
  background: color-mix(in srgb, var(--forest) 12%, transparent);
}
#panel-itinerary.wbp-on .lmp-add span {
  font-size: 1.05rem;
  line-height: 1;
}
#panel-itinerary.wbp-on .lmp-addmenu {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.6rem;
}
#panel-itinerary.wbp-on :is(.lmp-addmenu, .lmp-picks)[hidden] {
  display: none;
}
#panel-itinerary.wbp-on .lmp-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
}
#panel-itinerary.wbp-on .lmp-tile {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.25rem;
  min-height: 0;
  margin: 0;
  padding: 0.7rem 0.25rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
#panel-itinerary.wbp-on .lmp-tile span {
  font-size: 1.2rem;
  line-height: 1;
}
#panel-itinerary.wbp-on .lmp-tile b {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
#panel-itinerary.wbp-on .lmp-tile:hover {
  border-color: color-mix(in srgb, var(--forest) 35%, transparent);
}
#panel-itinerary.wbp-on .lmp-tile.is-on {
  border-color: var(--forest);
  background: color-mix(in srgb, var(--forest) 5%, #fff);
  box-shadow: inset 0 0 0 1px var(--forest);
}
#panel-itinerary.wbp-on .lmp-picks {
  display: grid;
  gap: 0.15rem;
}
#panel-itinerary.wbp-on .lmp-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.1rem;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.8rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#panel-itinerary.wbp-on .lmp-pick:hover {
  background: color-mix(in srgb, var(--forest) 6%, transparent);
}
#panel-itinerary.wbp-on .lmp-pick b,
#panel-itinerary.wbp-on .lmp-pick small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#panel-itinerary.wbp-on .lmp-pick b {
  font-size: 0.88rem;
  font-weight: 650;
}
#panel-itinerary.wbp-on .lmp-pick small {
  color: var(--ink-soft);
  font-size: 0.74rem;
}
#panel-itinerary.wbp-on .lmp-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
#panel-itinerary.wbp-on .lmp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2rem;
  margin: 0;
  padding: 0.35rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--forest) 18%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
}
#panel-itinerary.wbp-on .lmp-link:hover:not([aria-disabled="true"]):not(:disabled) {
  border-color: color-mix(in srgb, var(--forest) 35%, transparent);
  background: color-mix(in srgb, var(--forest) 6%, transparent);
}
#panel-itinerary.wbp-on .lmp-link:is([aria-disabled="true"], :disabled) {
  opacity: 0.5;
  cursor: default;
}

/* The stop editor: in the column, scrolling with it (layout only — the fields keep their look). */
#panel-itinerary.wbp-on #detail-slot {
  position: static;
  max-height: none;
}
#panel-itinerary.wbp-on #detail-slot > .detail {
  position: static;
  max-height: none;
  margin: 0.75rem;
}
#panel-itinerary.wbp-on #detail-slot > :not(.detail) {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}
/* Under the address: "Pin on the map" / "Show on map" use the planner's map (no picker map). */
#panel-itinerary.wbp-on .lm-plan-geo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.5rem;
}
#panel-itinerary.wbp-on :is(#detail-slot, .wbp-side) .lm-plan-geo-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.25rem;
  margin: 0;
  padding: 0.4rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--forest) 28%, transparent);
  border-radius: 999px;
  background: #fff;
  color: var(--forest);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
#panel-itinerary.wbp-on :is(#detail-slot, .wbp-side) .lm-plan-geo-btn:hover {
  border-color: color-mix(in srgb, var(--forest) 50%, transparent);
  background: color-mix(in srgb, var(--forest) 6%, #fff);
}
#panel-itinerary.wbp-on :is(#detail-slot, .wbp-side) .lm-plan-geo-btn[hidden] {
  display: none;
}
#panel-itinerary.wbp-on .lm-plan-geo-btn svg {
  width: 0.95rem;
  height: 0.95rem;
}

/* ——— The map: fills its side; search top-left, Show every stop top-right, the found place bottom centre ——— */
#panel-itinerary.wbp-on .wbp-stage {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #e8eadf;
}
/* Its own stacking context, so Google's / Leaflet's layers stay under the planner's buttons. */
#panel-itinerary.wbp-on .wbp-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #e8eadf;
}
/* The Day card's Google canvas (moved in) or the free map: full size (beats the card's height and
   Google's inline position). */
#panel-itinerary.wbp-on .wbp-map > :is(.nu-itin-map-canvas, .wbp-free) {
  position: absolute !important;
  inset: 0;
  width: auto;
  height: auto !important;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #e8eadf;
}
/* The free map's zoom buttons (Leaflet: top-left, under the search) sit right-centre, like Google's. */
#panel-itinerary.wbp-on .wbp-free .leaflet-top.leaflet-left {
  top: 50%;
  right: 0;
  left: auto;
  transform: translateY(-50%);
}
#panel-itinerary.wbp-on .wbp-free .leaflet-top.leaflet-left .leaflet-control {
  margin: 0 1rem 0 0;
}
/* Pin on the map: a crosshair over the map (Google's and Leaflet's own grab cursors included). */
#panel-itinerary.wbp-on .wbp.is-picking .wbp-map,
#panel-itinerary.wbp-on .wbp.is-picking .wbp-map div {
  cursor: crosshair !important;
}
#panel-itinerary.wbp-on .wbp-search {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 5;
  width: min(24rem, calc(100% - 5rem));
}
#panel-itinerary.wbp-on .wbp-search input {
  display: block;
  width: 100%;
  min-height: 2.85rem;
  margin: 0;
  padding: 0.6rem 1rem 0.6rem 2.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f685f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 1rem 50% / 1rem 1rem;
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  box-shadow: 0 6px 20px rgba(26, 20, 16, 0.14), 0 1px 2px rgba(26, 20, 16, 0.08);
  appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#panel-itinerary.wbp-on .wbp-search input::placeholder {
  color: var(--ink-soft);
  opacity: 0.85;
}
#panel-itinerary.wbp-on .wbp-search input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--forest) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--forest) 16%, transparent), 0 6px 20px rgba(26, 20, 16, 0.14);
}
/* Suggestions: in the flow under the box (never clipped), the place on one line and its area under it. */
#panel-itinerary.wbp-on .live-map-search-list {
  position: static;
  max-height: 60vh;
  margin: 0.4rem 0 0;
  padding: 0.35rem;
  overflow: auto;
  overscroll-behavior: contain;
  list-style: none;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(26, 20, 16, 0.16);
}
#panel-itinerary.wbp-on .live-map-search-list[hidden] {
  display: none;
}
#panel-itinerary.wbp-on .live-map-search-list > li:not(.g-attr-row) {
  margin: 0;
  padding: 0;
}
#panel-itinerary.wbp-on .live-map-search-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.1rem;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
}
#panel-itinerary.wbp-on .live-map-search-list button:is(:hover, :focus-visible) {
  outline: none;
  background: color-mix(in srgb, var(--forest) 7%, transparent);
}
#panel-itinerary.wbp-on .live-map-search-list button:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--forest) 45%, transparent);
}
#panel-itinerary.wbp-on .live-map-search-list button > span,
#panel-itinerary.wbp-on .live-map-search-list button > small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#panel-itinerary.wbp-on .live-map-search-list button > span {
  font-weight: 650;
}
#panel-itinerary.wbp-on .live-map-search-list button > small {
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 500;
}
#panel-itinerary.wbp-on .live-map-search-list .live-map-search-deep > span {
  color: var(--forest);
}
#panel-itinerary.wbp-on .live-map-search-list .live-map-search-empty {
  padding: 0.55rem 0.7rem;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.4;
}
#panel-itinerary.wbp-on .live-map-search-list .g-attr-row {
  background: #fff;
}
/* The found place's pin on the free map (GeoAddress.searchPinIcon). */
#panel-itinerary.wbp-on .live-map-search-pin {
  border: 0 !important;
  background: transparent !important;
}
#panel-itinerary.wbp-on .live-map-search-mark {
  display: block;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--gold, #b0893a);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
/* Pin on the map: what to do, under the search. */
#panel-itinerary.wbp-on .lm-plan-pickbar {
  position: absolute;
  top: 4.25rem;
  left: 1rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: max-content;
  max-width: min(30rem, calc(100% - 5rem));
  padding: 0.55rem 0.55rem 0.55rem 0.9rem;
  border-radius: 14px;
  background: var(--forest);
  color: var(--cream);
  font-size: 0.84rem;
  line-height: 1.35;
  box-shadow: 0 10px 26px rgba(24, 32, 26, 0.25);
}
#panel-itinerary.wbp-on .lm-plan-pickbar[hidden] {
  display: none;
}
#panel-itinerary.wbp-on .lm-plan-pickbar > span {
  flex: 1 1 auto;
  min-width: 0;
}
#panel-itinerary.wbp-on .lm-plan-pickbar svg {
  width: 1rem;
  height: 1rem;
  margin-right: 0.3rem;
  vertical-align: -0.15em;
}
#panel-itinerary.wbp-on .lm-plan-pickbar button {
  flex: none;
  min-height: 2rem;
  margin: 0;
  padding: 0.35rem 0.85rem;
  border: 0;
  border-radius: 999px;
  background: var(--cream);
  color: var(--forest);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
#panel-itinerary.wbp-on .lm-plan-pickbar button:hover {
  background: #fff;
}
/* The found place: its name and when it would go, "Show in Google Maps" (a link, no API call),
   Add to Day N / Use this place, ×. */
#panel-itinerary.wbp-on .lm-plan-addbar {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: max-content;
  min-width: min(22rem, calc(100% - 2rem));
  max-width: min(34rem, calc(100% - 2rem));
  padding: 0.65rem 0.6rem 0.65rem 1rem;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(24, 32, 26, 0.22), 0 1px 2px rgba(24, 32, 26, 0.06);
  transform: translateX(-50%);
  animation: wbpRise 0.18s ease-out;
}
@keyframes wbpRise {
  from {
    opacity: 0;
    transform: translate(-50%, 0.4rem);
  }
}
#panel-itinerary.wbp-on .lm-plan-addbar[hidden] {
  display: none;
}
#panel-itinerary.wbp-on .lm-plan-addbar-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 1 1 auto;
  gap: 0.1rem;
  min-width: 0;
  line-height: 1.3;
}
#panel-itinerary.wbp-on .lm-plan-addbar-text b,
#panel-itinerary.wbp-on .lm-plan-addbar-text small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#panel-itinerary.wbp-on .lm-plan-addbar-text b {
  font-size: 0.95rem;
  font-weight: 700;
}
#panel-itinerary.wbp-on .lm-plan-addbar-text small {
  color: var(--ink-soft);
  font-size: 0.76rem;
}
#panel-itinerary.wbp-on .lm-plan-addbar a {
  flex: none;
  justify-self: start;
  color: #1a73e8;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
#panel-itinerary.wbp-on .lm-plan-addbar a:hover {
  text-decoration: underline;
}
#panel-itinerary.wbp-on .lm-plan-addbar-go {
  flex: none;
  min-height: 2.35rem;
  margin: 0;
  padding: 0.45rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--forest);
  color: var(--cream);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
#panel-itinerary.wbp-on .lm-plan-addbar-go:hover:not(:disabled) {
  background: color-mix(in srgb, var(--forest) 84%, #000);
}
#panel-itinerary.wbp-on .lm-plan-addbar-go:disabled {
  opacity: 0.5;
  cursor: default;
}
#panel-itinerary.wbp-on .lm-plan-addbar-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
#panel-itinerary.wbp-on .lm-plan-addbar-x:hover {
  background: color-mix(in srgb, var(--forest) 7%, transparent);
  color: var(--ink);
}
#panel-itinerary.wbp-on .wbp-fit {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: var(--forest);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  cursor: pointer;
}
#panel-itinerary.wbp-on .wbp-fit[hidden] {
  display: none;
}
#panel-itinerary.wbp-on .wbp-fit:hover {
  background: color-mix(in srgb, var(--forest) 6%, #fff);
}
#panel-itinerary.wbp-on .wbp-fit svg {
  width: 1.15rem;
  height: 1.15rem;
}
/* A note on the map (no map can load): bottom-left, above Google's logo; centred when the map is empty. */
#panel-itinerary.wbp-on .wbp-mapnote {
  position: absolute;
  left: 1rem;
  bottom: 2.25rem;
  z-index: 3;
  max-width: min(26rem, calc(100% - 2rem));
  margin: 0;
  padding: 0.5rem 0.85rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.4;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
#panel-itinerary.wbp-on .wbp-mapnote[hidden] {
  display: none;
}
#panel-itinerary.wbp-on .wbp-stage:has(> .wbp-map:empty) .wbp-mapnote {
  top: 50%;
  left: 50%;
  bottom: auto;
  text-align: center;
  transform: translate(-50%, -50%);
}
/* Toasts: centred on the map, above the found place's bar (at the top they covered the search box on
   every width); they never take a click meant for the map. */
#panel-itinerary.wbp-on .exp-toast:not([hidden]) {
  top: auto;
  bottom: 6.75rem;
  left: calc(var(--wbp-side, 23rem) + (100% - var(--wbp-side, 23rem)) / 2);
  max-width: min(34rem, calc(100% - var(--wbp-side, 23rem) - 2rem));
  pointer-events: none;
}

/* Keyboard focus: one ring in the trip colour (cream on the dark pick bar). */
#panel-itinerary.wbp-on :is(.lmp-actions button, .lmp-day, .lmp-main, .lmp-edit, .lm-plan-drag, .lmp-slot, .lmp-add, .lmp-tile, .lmp-pick, .lmp-link, .lmp-placing button, .lm-plan-geo-btn, .lm-plan-addbar button, .lm-plan-addbar a, .wbp-fit):focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}
/* Inside a scroller (the day strip) or tight to the row's edge: the ring sits inside. */
#panel-itinerary.wbp-on .wbp :is(.lm-plan-drag, .lmp-day):focus-visible {
  outline-offset: -2px;
}
#panel-itinerary.wbp-on .lm-plan-pickbar button:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 2px;
}

/* Narrower desktops and tablets (48–64rem): slimmer column, slimmer search. */
@media (max-width: 63.99rem) {
  #panel-itinerary.wbp-on > .wbp {
    --wbp-side: 20rem;
  }
  #panel-itinerary.wbp-on > .wbp.is-editing {
    --wbp-side: 24rem;
  }
  #panel-itinerary.wbp-on .wbp-search {
    width: min(20rem, calc(100% - 5rem));
  }
  #panel-itinerary.wbp-on .lm-plan-addbar {
    min-width: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  #panel-itinerary.wbp-on .lm-plan-addbar {
    animation: none;
  }
  #panel-itinerary.wbp-on :is(.lmp-stop, .lmp-actions button, .lmp-day b, .lm-plan-drag, .lmp-slot, .lmp-add, .lmp-tile, .wbp-search input) {
    transition: none;
  }
}

/* No dates → no days (owner 2026-10-04): "Set your dates" under the itinerary's empty card. */
html.wb-new .nu-no-days .nu-no-days-go {
  margin-top: 0.75rem;
}

/* ——— Map planner: the Ideas shelf and Fit times (owner 2026-10-05; app twin at the end of mobile/www/css/live-nav.css) ——— */
/* A way with no time for it: the travel line turns red. */
#panel-itinerary.wbp-on .lmp-leg.is-tight {
  color: #b42318;
}
#panel-itinerary.wbp-on .lmp-leg.is-tight b {
  font-weight: 700;
}
/* A stop Fit times moved: "· was 10:00" on its line until another day shows. */
#panel-itinerary.wbp-on .lmp-was {
  color: #8a6a2a;
  font-weight: 600;
}
/* Fit times: a quiet pill under the day's line, not a big button. */
#panel-itinerary.wbp-on .lmp-fit {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0.3rem 0 0;
  padding: 0.25rem 0.7rem;
  border: 1px solid color-mix(in srgb, #b42318 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #b42318 5%, #fff);
  color: #8f1d14;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s;
}
#panel-itinerary.wbp-on .lmp-fit:hover {
  background: color-mix(in srgb, #b42318 10%, #fff);
}
/* The offer bar's second choice: keep it for later. */
#panel-itinerary.wbp-on .lm-plan-addbar-idea {
  flex: none;
  min-height: 2.35rem;
  margin: 0;
  padding: 0.4rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--forest) 25%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--forest);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
#panel-itinerary.wbp-on .lm-plan-addbar-idea:hover {
  background: color-mix(in srgb, var(--forest) 7%, transparent);
}
/* Add a place → Food places / Hotels: the row places it, the bookmark keeps it as an idea. */
#panel-itinerary.wbp-on .lmp-pickrow {
  display: flex;
  align-items: stretch;
  gap: 0.2rem;
}
#panel-itinerary.wbp-on .lmp-pickrow .lmp-pick {
  flex: 1 1 auto;
  min-width: 0;
}
#panel-itinerary.wbp-on .lmp-pick-idea {
  flex: none;
  width: 2.4rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 0.9rem;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.15s, background-color 0.15s;
}
#panel-itinerary.wbp-on .lmp-pickrow:hover .lmp-pick-idea,
#panel-itinerary.wbp-on .lmp-pick-idea:focus-visible {
  opacity: 1;
}
#panel-itinerary.wbp-on .lmp-pick-idea:hover {
  background: color-mix(in srgb, var(--forest) 6%, transparent);
}
/* The shelf: a quiet box of chips under the day's list. */
#panel-itinerary.wbp-on .lmp-ideas {
  margin-top: 0.75rem;
  padding: 0.6rem 0.65rem 0.65rem;
  border: 1.5px dashed color-mix(in srgb, var(--forest) 22%, transparent);
  border-radius: 12px;
}
#panel-itinerary.wbp-on .lmp-ideas-title {
  margin: 0 0 0.45rem 0.15rem;
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
#panel-itinerary.wbp-on .lmp-ideas-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
#panel-itinerary.wbp-on .lmp-idea {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}
#panel-itinerary.wbp-on .lmp-idea.is-on {
  box-shadow: inset 0 0 0 1.5px #b0893a;
}
#panel-itinerary.wbp-on .lmp-idea-go {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  margin: 0;
  padding: 0.35rem 0.2rem 0.35rem 0.75rem;
  border: 0;
  border-radius: 999px 0 0 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
}
#panel-itinerary.wbp-on .lmp-idea-go span {
  overflow: hidden;
  max-width: 13rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#panel-itinerary.wbp-on .lmp-idea-go b {
  color: var(--forest);
  font-size: 0.9rem;
}
#panel-itinerary.wbp-on .lmp-idea-go:hover span {
  text-decoration: underline;
}
#panel-itinerary.wbp-on .lmp-idea-x {
  flex: none;
  width: 1.9rem;
  margin: 0;
  padding: 0.3rem 0;
  border: 0;
  border-radius: 0 999px 999px 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
#panel-itinerary.wbp-on .lmp-idea-x:hover {
  color: var(--ink);
}
#panel-itinerary.wbp-on :is(.lmp-fit, .lmp-idea-go, .lmp-idea-x, .lmp-pick-idea, .lm-plan-addbar-idea):focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}
/* An idea's pin on the free map (the Google map draws the same SVG). */
.lm-idea-pin {
  background: none;
  border: 0;
  opacity: 0.9;
}

/* ——— Map planner: travel lines are estimates + Google Maps routes (owner 2026-10-05; app twin at the end of mobile/www/css/live-nav.css) ——— */
/* "Route" on a travel line: a small link, not a button — the real way in Google Maps. */
#panel-itinerary.wbp-on .lmp-leg-route {
  margin: -0.25rem 0 -0.25rem auto; /* a 24px+ target, the line keeps its height */
  padding: 0.35rem 0.3rem;
  color: var(--forest);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--forest) 35%, transparent);
  text-underline-offset: 2px;
}
/* "Route for the day" under the day's line. */
#panel-itinerary.wbp-on .lmp-day-route {
  justify-self: start;
  /* A finger-sized target (24px+, touch screens) without pushing the head down. */
  display: inline-block;
  margin: -0.2rem 0 -0.3rem;
  padding: 0.3rem 0.1rem 0.35rem;
  color: var(--forest);
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--forest) 35%, transparent);
  text-underline-offset: 2px;
}
#panel-itinerary.wbp-on :is(.lmp-leg-route, .lmp-day-route):hover {
  text-decoration-color: currentColor;
}
#panel-itinerary.wbp-on :is(.lmp-leg-route, .lmp-day-route):focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ═══ Map planner: the light stop card (owner 2026-10-05; app twin at the end of mobile/www/css/live-nav.css) ═══
   A stop or New event opened on the planner: the name typed in place, a time chip (→ the range picker), a type
   chip (the type list), the address with Pin on the map / Show on map, and More for the rest (06f). Calm: no
   header band, few borders. 64rem and wider: the card is a second panel between the list and the map, the list
   stays (dimmed — no drag, no Add a place while it's open). 48–64rem: the card takes the column, as before. */
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card {
  --lmp-c: #5f685f;
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 1.15rem 1.1rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card > * {
  margin-left: 0;
  margin-right: 0;
}
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card .lmp-card-kick {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}
#panel-itinerary.wbp-on #detail-slot .lmp-card-pill {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.08rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--forest) 10%, transparent);
  color: var(--forest);
  font-size: 0.7rem;
  font-weight: 700;
}
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card .wb-field {
  margin: 0;
}
/* The name: a big line you type on, no box. */
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card .lmp-card-namefield {
  margin-top: -0.4rem;
}
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card input.lmp-card-name {
  width: 100%;
  min-height: 3rem;
  padding: 0.3rem 0.1rem;
  border: 0;
  border-bottom: 1.5px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  box-shadow: none;
}
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card input.lmp-card-name::placeholder {
  color: color-mix(in srgb, var(--ink-soft) 55%, transparent);
}
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card input.lmp-card-name:placeholder-shown {
  border-bottom-color: color-mix(in srgb, var(--forest) 18%, transparent);
}
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card input.lmp-card-name:focus {
  outline: none;
  border-bottom-color: color-mix(in srgb, var(--forest) 50%, transparent);
  box-shadow: none;
}
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card .is-empty input.lmp-card-name {
  border-bottom-color: #e2a48c;
  background: transparent;
}
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card .is-lakbi input.lmp-card-name {
  border-bottom-color: #d9b45a;
}
/* The chips. */
#panel-itinerary.wbp-on #detail-slot .lmp-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card :is(button, select).lmp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: auto;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.45rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--forest) 16%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--forest) 5%, #fff);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.15s, border-color 0.15s;
}
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card :is(button, select).lmp-chip:hover {
  border-color: color-mix(in srgb, var(--forest) 34%, transparent);
  background: color-mix(in srgb, var(--forest) 9%, #fff);
}
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card :is(button, select).lmp-chip:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}
#panel-itinerary.wbp-on #detail-slot .lmp-chip svg {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--forest);
}
#panel-itinerary.wbp-on #detail-slot .lmp-chip-select {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}
#panel-itinerary.wbp-on #detail-slot .lmp-chip-select::before {
  content: "";
  position: absolute;
  left: 0.85rem;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: -0.3rem;
  border-radius: 999px;
  background: var(--lmp-c);
  pointer-events: none;
}
#panel-itinerary.wbp-on #detail-slot .lmp-chip-select::after {
  content: "";
  position: absolute;
  right: 0.9rem;
  top: 50%;
  width: 0.38rem;
  height: 0.38rem;
  margin-top: -0.3rem;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg);
  pointer-events: none;
}
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card select.lmp-chip.is-type {
  padding-left: 1.85rem;
  padding-right: 2.1rem;
  -webkit-appearance: none;
  appearance: none;
  background-image: none;
}
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card select.lmp-chip.is-type:invalid {
  color: var(--ink-soft);
  border-style: dashed;
}
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card .is-empty select.lmp-chip.is-type {
  border-color: #e2a48c;
  background: #fffaf6;
}
#panel-itinerary.wbp-on #detail-slot .lmp-chip-select:is([data-lmp-type="type-transpo"], [data-lmp-type="type-flight"]) { --lmp-c: #0369a1; }
#panel-itinerary.wbp-on #detail-slot .lmp-chip-select:is([data-lmp-type="type-food"]) { --lmp-c: #b44a2a; }
#panel-itinerary.wbp-on #detail-slot .lmp-chip-select:is([data-lmp-type="type-attraction"], [data-lmp-type="type-see"]) { --lmp-c: #1e3a2f; }
#panel-itinerary.wbp-on #detail-slot .lmp-chip-select:is([data-lmp-type="type-rest"]) { --lmp-c: #a21caf; }
#panel-itinerary.wbp-on #detail-slot .lmp-chip-select:is([data-lmp-type="type-activity"]) { --lmp-c: #9f1239; }
#panel-itinerary.wbp-on #detail-slot .lmp-chip-select:is([data-lmp-type="type-tour"]) { --lmp-c: #a16207; }
#panel-itinerary.wbp-on #detail-slot .lmp-chip-select:is([data-lmp-type="type-shop"]) { --lmp-c: #4338ca; }
#panel-itinerary.wbp-on #detail-slot .lmp-chip-select:is([data-lmp-type="type-rr"], [data-lmp-type="type-freetime"]) { --lmp-c: #15803d; }
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card .pt-hint {
  margin: -0.4rem 0 0;
}
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card .pt-hint[hidden] {
  display: none;
}
/* The address: the field itself, a little label, the planner's map buttons under it. */
#panel-itinerary.wbp-on #detail-slot .lmp-card-where {
  display: grid;
  gap: 0;
}
#panel-itinerary.wbp-on #detail-slot .lmp-card-where .lm-plan-geo-actions {
  margin-top: 0.55rem;
}
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card .lmp-card-lakbi:empty {
  display: none;
}
/* More: a quiet row; what it opens keeps the full editor's fields. */
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card .lmp-card-more {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 2.9rem;
  margin: 0;
  padding: 0.5rem 0.15rem;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--forest) 10%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--forest);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  cursor: pointer;
}
#panel-itinerary.wbp-on #detail-slot .lmp-card-more small {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#panel-itinerary.wbp-on #detail-slot .lmp-card-more i {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.35rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.12rem) rotate(45deg);
  transition: transform 0.18s ease;
}
#panel-itinerary.wbp-on #detail-slot .lmp-card-more[aria-expanded="true"] i {
  transform: translateY(0.12rem) rotate(-135deg);
}
#panel-itinerary.wbp-on #detail-slot .lmp-card-more:hover small {
  color: var(--ink);
}
#panel-itinerary.wbp-on #detail-slot .lmp-card-more:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: -2px;
}
#panel-itinerary.wbp-on #detail-slot .lmp-card-extra {
  display: grid;
  gap: 0.85rem;
  margin-top: -0.4rem;
}
#panel-itinerary.wbp-on #detail-slot .lmp-card-extra[hidden] {
  display: none;
}
#panel-itinerary.wbp-on #detail-slot .lmp-card-extra :is(.wb-time-block, .event-fit) {
  margin: 0;
}
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card .lmp-card-remove {
  justify-self: start;
  min-height: 2.6rem;
  padding: 0.45rem 1rem;
  border: 1px solid #ebc3b2;
  border-radius: 999px;
  background: transparent;
  color: #9a4a26;
}
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card .lmp-card-remove:hover {
  background: #fbe8df;
}
/* Cancel / Update stay in reach at the bottom of the panel. */
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card .lmp-card-bar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0 -1.1rem;
  padding: 0.75rem 1.1rem 1rem;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--cream) 80%, transparent), var(--cream) 40%);
}

/* The list while an editor is open: it waits, dimmed — no grips (no drag), Add a place says finish first. */
#panel-itinerary.wbp-on > .wbp.is-editing [data-wbp-list] {
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
#panel-itinerary.wbp-on > .wbp.is-editing [data-wbp-list]:is(:hover, :focus-within) {
  opacity: 0.85;
}
#panel-itinerary.wbp-on > .wbp.is-editing [data-wbp-list] .lm-plan-drag {
  display: none;
}
#panel-itinerary.wbp-on > .wbp.is-editing [data-wbp-list] .lmp-stop.is-on {
  opacity: 1;
}

/* 64rem and wider: list | card | map. The card is #detail-slot (in the side column's markup), laid over the
   second column; the map moves to the third and resizes itself (nuPlan ResizeObserver / Google). */
@media (min-width: 64rem) {
  #panel-itinerary.wbp-on > .wbp.is-editing {
    --wbp-side: clamp(18rem, 22vw, 23rem);
    --wbp-ed: clamp(23rem, 27vw, 27rem);
    grid-template-columns: var(--wbp-side) var(--wbp-ed) minmax(0, 1fr);
  }
  #panel-itinerary.wbp-on > .wbp.is-editing > .wbp-stage {
    grid-column: 3;
  }
  #panel-itinerary.wbp-on > .wbp.is-editing > .wbp-side #detail-slot {
    position: fixed;
    top: 0;
    bottom: 0;
    left: var(--wbp-side);
    z-index: 3;
    width: var(--wbp-ed);
    padding-bottom: 0;
    overflow: auto;
    background: var(--cream);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    box-shadow: 8px 0 24px -18px rgba(19, 37, 30, 0.4);
  }
  #panel-itinerary.wbp-on > .wbp.is-editing .exp-toast:not([hidden]) {
    left: calc(var(--wbp-side) + var(--wbp-ed) + (100% - var(--wbp-side) - var(--wbp-ed)) / 2);
    max-width: min(30rem, calc(100% - var(--wbp-side) - var(--wbp-ed) - 2rem));
  }
}
/* 48–64rem: the card takes the side column (the list comes back on Update / Cancel). */
@media (max-width: 63.99rem) {
  #panel-itinerary.wbp-on > .wbp.is-editing [data-wbp-list] {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #panel-itinerary.wbp-on #detail-slot .lmp-card-more i,
  #panel-itinerary.wbp-on > .wbp.is-editing [data-wbp-list] {
    transition: none;
  }
}
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card .lmp-card-chips > * {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
}
#panel-itinerary.wbp-on #detail-slot > .detail.lmp-card .lmp-card-remove {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}

/* ——— Map planner: long press to drag + the whole trip on one map (owner 2026-10-05; app twin at the end of mobile/www/css/live-nav.css) ——— */
/* A touch screen: a long press on a movable row starts its drag — no text callout or selection under the finger.
   any-pointer: a touch laptop or an iPad with a trackpad has a finger too. */
@media (any-pointer: coarse) {
  #panel-itinerary.wbp-on .lmp-stop.is-movable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}
/* "All" first in the day strip: the number of days in a quiet ring until it's picked. */
#panel-itinerary.wbp-on .lmp-day-all b {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--forest) 30%, transparent);
  font-size: 0.8rem;
}
#panel-itinerary.wbp-on .lmp-day-all:is(.is-on, [aria-pressed="true"]) b {
  box-shadow: none;
}
#panel-itinerary.wbp-on .lmp-all-hint {
  margin: 0 0.25rem 0.5rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.35;
}
/* The legend: a dot per day, quiet, one row that wraps. */
#panel-itinerary.wbp-on .lmp-legend {
  flex: none; /* the list is a flex column: never squeezed */
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  margin: 0 0.25rem 0.6rem;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
}
#panel-itinerary.wbp-on .lmp-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
#panel-itinerary.wbp-on .lmp-legend i {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--lmp-dc);
}
/* A day: its title + count, then its stops (read only — a click opens the day with it picked). */
#panel-itinerary.wbp-on .lmp-all-day {
  flex: none;
  margin: 0 0 0.3rem;
}
#panel-itinerary.wbp-on .lmp-all-day > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.6rem;
  padding: 0.2rem 0.4rem;
  border-radius: 10px;
  list-style: none;
  cursor: pointer;
}
#panel-itinerary.wbp-on .lmp-all-day > summary::-webkit-details-marker {
  display: none;
}
#panel-itinerary.wbp-on .lmp-all-day > summary:hover {
  background: color-mix(in srgb, var(--forest) 5%, transparent);
}
#panel-itinerary.wbp-on .lmp-all-day > summary::after {
  content: "";
  flex: none;
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.3rem;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
#panel-itinerary.wbp-on .lmp-all-day[open] > summary::after {
  transform: rotate(45deg);
}
#panel-itinerary.wbp-on .lmp-all-day > summary b {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 650;
}
#panel-itinerary.wbp-on .lmp-all-day > summary small {
  flex: none;
  color: var(--ink-soft);
  font-size: 0.74rem;
}
#panel-itinerary.wbp-on .lmp-all-dot {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--lmp-dc);
  color: #fffdf7;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}
#panel-itinerary.wbp-on .lmp-stop.lmp-all-stop {
  width: 100%;
  min-height: 2.75rem;
  gap: 0.65rem;
  padding: 0.25rem 0.5rem;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#panel-itinerary.wbp-on .lmp-all-stop .lmp-pin {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.72rem;
}
#panel-itinerary.wbp-on :is(.lmp-all-stop, .lmp-all-day > summary):focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 1px;
}
#panel-itinerary.wbp-on .lmp-all-empty {
  margin: 0 0 0.35rem 2.45rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
}
/* The All map's day pins (Leaflet divIcon): the SVG only. */
.lm-day-pin {
  background: none;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  #panel-itinerary.wbp-on .lmp-all-day > summary::after {
    transition: none;
  }
}
/* A day's rows take its colour (.lmp-stop sets its own --wbp-c). */
#panel-itinerary.wbp-on .lmp-stop.lmp-all-stop {
  --wbp-c: var(--lmp-dc);
}

/* ═══ Map planner · three columns (Places Phase 1, owner 2026-10-09; mock docs/mocks/places/WebPlanner + WebAdd1/2,
   WebEditStop, WebPin): the day | Explore | the map. Cream ground, white cards, forest green for what's active,
   gold only for LakBi's pick tags. Scoped to .wbp.wbp3 (06a / 06f / 06h). ═══ */
#panel-itinerary.wbp-on > .wbp.wbp3,
#panel-itinerary.wbp-on > .wbp.wbp3.is-editing {
  --wbx-ink: #1b2a23;
  --wbx-muted: #44544a;
  --wbx-quiet: #8a917f;
  --wbx-line: #e3d8c2;
  --wbx-soft-line: #f0e9da;
  --wbx-ground: #fbf6ec;
  --wbx-forest: var(--forest, #1f3d30);
  --wbx-forest-soft: #e6efe8;
  --wbx-gold: #7a5c1c;
  --wbx-gold-soft: #f5ecd3;
  --wbx-gold-line: #b8892f;
  /* Day column wider, Your places narrower (web audit W-18 2026-10-20: at 1280 titles read "Depart · Manila,…"). */
  --wbp-side: clamp(22rem, 33vw, 30rem);
  --wbx-w: clamp(17.5rem, 21vw, 21rem);
  grid-template-columns: var(--wbp-side) var(--wbx-w) minmax(0, 1fr);
  background: var(--wbx-ground);
  color: var(--wbx-ink);
}
#panel-itinerary.wbp-on > .wbp.wbp3 > .wbp-stage,
#panel-itinerary.wbp-on > .wbp.wbp3.is-editing > .wbp-stage {
  grid-column: 3;
}
#panel-itinerary.wbp-on > .wbp.wbp3 > .wbp-side {
  background: var(--wbx-ground);
  border-right: 1px solid var(--wbx-line);
  box-shadow: none;
}

/* ——— Day column: the trip, the day strip, the day's line ——— */
#panel-itinerary.wbp-on .wbp3 .wbx-head-day {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem 0.5rem;
  border-bottom: 0;
}
#panel-itinerary.wbp-on .wbp3 .wbx-trip {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  min-width: 0;
}
#panel-itinerary.wbp-on .wbp3 .wbx-trip h1 {
  margin: 0;
  font-family: var(--serif, "Playfair Display", Georgia, serif);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--wbx-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#panel-itinerary.wbp-on .wbp3 .wbx-trip span {
  flex: none;
  font-size: 0.85rem;
  color: var(--wbx-muted);
}
#panel-itinerary.wbp-on .wbp3 .lmp-days {
  padding-inline: 1.25rem;
}
#panel-itinerary.wbp-on .wbp3 .lmp-day.is-on {
  color: #c0643f;
  box-shadow: inset 0 -3px 0 #c0643f;
}
#panel-itinerary.wbp-on .wbp3 .wbx-daytitle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
  padding: 0.75rem 1.25rem 0.5rem;
  border-bottom: 1px solid var(--wbx-line);
}
#panel-itinerary.wbp-on .wbp3 .wbx-daytitle b {
  font-size: 1rem;
  color: var(--wbx-ink);
}
#panel-itinerary.wbp-on .wbp3 .wbx-daytitle small {
  font-size: 0.8rem;
  color: var(--wbx-muted);
}

/* ——— The stops: numbered dots on a dashed line, white cards ——— */
#panel-itinerary.wbp-on .wbp3 .wbx-list {
  padding: 1rem 1.25rem 5.5rem; /* clear of the LakBi launcher (bottom-left) */
  background: transparent;
}
#panel-itinerary.wbp-on .wbp3 .wbx-line {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
#panel-itinerary.wbp-on .wbp3 .wbx-line::before {
  content: "";
  position: absolute;
  top: 0.9rem;
  bottom: 0.9rem;
  left: 0.8rem;
  border-left: 2px dashed #d9d2c0;
  pointer-events: none;
}
#panel-itinerary.wbp-on .wbp3 .wbx-stop {
  position: relative;
  display: grid;
  grid-template-columns: 1.65rem minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.7rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
#panel-itinerary.wbp-on .wbp3 .wbx-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  margin-top: 0.85rem;
  border-radius: 50%;
  background: var(--wbp-c, #2f6a4f);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 0 0 3px var(--wbx-ground);
}
#panel-itinerary.wbp-on .wbp3 .wbx-stopcard {
  min-width: 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--wbx-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 16px -14px rgba(0, 0, 0, 0.4);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-on .wbx-stopcard {
  border-color: var(--wbx-forest);
  box-shadow: 0 10px 24px -18px rgba(19, 37, 30, 0.6);
}
/* Its picture (the approved app planner mock, 2026-10-11): a square on the right, the text beside it. */
#panel-itinerary.wbp-on .wbp3 .wbx-stopcard.has-thumb {
  position: relative;
  padding-right: calc(0.9rem + 4.5rem);
}
#panel-itinerary.wbp-on .wbp3 .wbx-stopthumb {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  border-radius: 12px;
  background: var(--wbx-soft-line);
}
#panel-itinerary.wbp-on .wbp3 .wbx-stopthumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#panel-itinerary.wbp-on .wbp3 .wbx-stop .lmp-main {
  display: block;
  width: 100%;
  margin: 0 0 0.45rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wbx-ink);
  text-align: left;
  cursor: pointer;
}
#panel-itinerary.wbp-on .wbp3 .wbx-stop .lmp-main strong {
  display: block;
  color: var(--wbx-ink, #1b2a23); /* = a stop card's name (owner 2026-10-13: a flight's title isn't greyed) */
  font-size: 1.05rem;
  line-height: 1.3;
}
#panel-itinerary.wbp-on .wbp3 .wbx-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
#panel-itinerary.wbp-on .wbp3 .wbx-stoprow {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
#panel-itinerary.wbp-on .wbp3 .wbx-tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 4rem;
  height: 3.85rem;
  border-radius: 10px;
  background: var(--wbx-gold-soft);
  font-size: 1.6rem;
  line-height: 1;
}
#panel-itinerary.wbp-on .wbp3 .wbx-tile.is-sm {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.2rem;
}
#panel-itinerary.wbp-on .wbp3 .wbx-tile.is-lg {
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  font-size: 1.45rem;
}
#panel-itinerary.wbp-on .wbp3 .wbx-lines {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  font-size: 0.82rem;
  color: var(--wbx-muted);
}
#panel-itinerary.wbp-on .wbp3 .wbx-lines > * {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  margin: 0;
}
#panel-itinerary.wbp-on .wbp3 .wbx-lines svg {
  flex: none;
}
#panel-itinerary.wbp-on .wbp3 .wbx-note {
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wbx-quiet);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#panel-itinerary.wbp-on .wbp3 .wbx-note span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#panel-itinerary.wbp-on .wbp3 .wbx-note.has-note {
  color: var(--wbx-muted);
}
#panel-itinerary.wbp-on .wbp3 .wbx-note:hover span {
  text-decoration: underline;
}
#panel-itinerary.wbp-on .wbp3 .wbx-lines .lmp-leg {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: inherit;
  color: var(--wbx-muted);
}
#panel-itinerary.wbp-on .wbp3 .wbx-lines .lmp-leg.is-tight {
  color: #b5452b;
}
#panel-itinerary.wbp-on .wbp3 .wbx-stop .lm-plan-drag {
  align-self: center;
  margin-top: 0.75rem;
}

/* Tags: kind · source · Added. Gold = LakBi's pick only. */
#panel-itinerary.wbp-on .wbp3 .wbx-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}
#panel-itinerary.wbp-on .wbp3 .wbx-tag {
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: #e9eddf;
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--wbx-ink);
}
#panel-itinerary.wbp-on .wbp3 .wbx-tag.is-food {
  background: var(--wbx-forest);
  color: #fbf6ec;
  font-weight: 700;
}
#panel-itinerary.wbp-on .wbp3 .wbx-tag.is-saved {
  background: #e3dcec;
  color: #6b5a7a;
  font-weight: 700;
}
#panel-itinerary.wbp-on .wbp3 .wbx-tag.is-lakbi {
  background: var(--wbx-gold-soft);
  color: var(--wbx-gold);
  font-weight: 700;
}
#panel-itinerary.wbp-on .wbp3 .wbx-tag.is-added {
  background: #e6eef6;
  color: #2d5a7b;
  font-weight: 700;
}
#panel-itinerary.wbp-on .wbp3 .wbx-tag.is-closed {
  background: #fbe3dc;
  color: #8f3a22;
  font-weight: 700;
}

/* ——— Free rows ——— */
#panel-itinerary.wbp-on .wbp3 .wbx-freerow {
  position: relative;
  display: grid;
  grid-template-columns: 1.65rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
}
#panel-itinerary.wbp-on .wbp3 .wbx-freedot {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid #b8b29f;
  border-radius: 50%;
  background: var(--wbx-ground);
}
#panel-itinerary.wbp-on .wbp3 .wbx-free {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px dashed #b8b29f;
  border-radius: 10px;
  background: transparent;
  color: var(--wbx-muted);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
#panel-itinerary.wbp-on .wbp3 .wbx-free b {
  flex: none;
  color: var(--wbx-forest);
}
#panel-itinerary.wbp-on .wbp3 .wbx-free:hover {
  border-color: var(--wbx-forest);
  background: #fff;
}
#panel-itinerary.wbp-on .wbp3 .wbx-freerow.is-on .wbx-freedot {
  border-color: var(--wbx-forest);
  background: var(--wbx-forest-soft);
}
#panel-itinerary.wbp-on .wbp3 .wbx-freerow.is-on .wbx-free {
  min-height: 3rem;
  border: 2px solid var(--wbx-forest);
  border-radius: 12px;
  background: var(--wbx-forest-soft);
  color: var(--wbx-forest);
  font-weight: 700;
}
#panel-itinerary.wbp-on .wbp3 .wbx-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin-top: 1rem;
  padding-left: 2.35rem;
}
#panel-itinerary.wbp-on .wbp3 .wbx-links .lmp-link {
  padding: 0.35rem 0;
  font-size: 0.82rem;
}

/* ——— The open card sits in the list (no fourth column); the rest of the day waits, dimmed ——— */
#panel-itinerary.wbp-on > .wbp.wbp3.is-editing > .wbp-side #detail-slot,
#panel-itinerary.wbp-on > .wbp.wbp3 #detail-slot.is-inline {
  position: static;
  width: auto;
  margin: 0 0 0 2.35rem;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}
#panel-itinerary.wbp-on > .wbp.wbp3.is-editing [data-wbp-list] {
  display: block;
}
#panel-itinerary.wbp-on .wbp3 .wbx-list.is-waiting .wbx-line > :not(#detail-slot):not(.wbx-freerow.is-on) {
  opacity: 0.55;
}
#panel-itinerary.wbp-on .wbp3 #detail-slot > .detail.lmp-card {
  margin: 0;
  padding: 1rem;
  border: 2px solid var(--wbx-forest);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.5);
}
#panel-itinerary.wbp-on .wbp3 #detail-slot > .detail.lmp-card.wbx-edit {
  border-color: #c0643f;
}
#panel-itinerary.wbp-on .wbp3 .wbx-cf-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
#panel-itinerary.wbp-on .wbp3 .wbx-cf-title {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
#panel-itinerary.wbp-on .wbp3 .wbx-cf-title b {
  font-size: 1.06rem;
  line-height: 1.3;
  /* A long name with no spaces wraps (bug hunt 2026-10-12: the card grew to ~920 px, Change and Add cut off). */
  overflow-wrap: anywhere;
}
#panel-itinerary.wbp-on .wbp3 .wbx-cf-title small {
  font-size: 0.8rem;
  color: var(--wbx-muted);
}
#panel-itinerary.wbp-on .wbp3 .wbx-change {
  min-height: 2.5rem;
  padding: 0 0.6rem;
  border: 0;
  background: transparent;
  color: var(--wbx-forest);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
#panel-itinerary.wbp-on .wbp3 .wbx-cf-hint {
  margin: 0.6rem 0;
  font-size: 0.76rem;
  color: var(--wbx-muted);
}
#panel-itinerary.wbp-on .wbp3 .wbx-cf-go {
  display: block;
  width: 100%;
  min-height: 3.1rem;
  margin: 0.25rem 0 0.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--wbx-forest);
  color: #fbf6ec;
  font-size: 1rem;
  font-weight: 700;
}
#panel-itinerary.wbp-on .wbp3 .wbx-cancel {
  margin-top: 0.35rem;
  font-size: 0.8rem;
}
#panel-itinerary.wbp-on .wbp3 .wbx-edit-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
#panel-itinerary.wbp-on .wbp3 .wbx-edit-bar > .lmp-card-more {
  width: auto;
  min-height: 2.5rem;
  padding: 0 0.8rem;
  border: 1px solid var(--wbx-line);
  border-radius: 999px;
  background: #fff;
}
#panel-itinerary.wbp-on .wbp3 .wbx-edit-bar > .lmp-card-more small {
  display: none;
}
#panel-itinerary.wbp-on .wbp3 .wbx-edit-bar > .lmp-card-extra {
  flex-basis: 100%;
}
#panel-itinerary.wbp-on .wbp3 .wbx-done {
  min-height: 2.85rem;
  padding: 0 1.25rem;
  border-radius: 999px;
  background: var(--wbx-forest);
  color: #fbf6ec;
  font-weight: 700;
}
#panel-itinerary.wbp-on .wbp3 .wbx-soft {
  min-height: 2.5rem;
  padding: 0 0.8rem;
  border: 1px solid var(--wbx-line);
  border-radius: 999px;
  background: #fff;
  color: var(--wbx-ink);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
#panel-itinerary.wbp-on .wbp3 .wbx-remove {
  margin-left: auto;
  min-height: 2.5rem;
  padding: 0 0.75rem;
  border: 0;
  background: transparent;
  color: #b5452b;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

/* ——— Where to? (inline, on the picked free row) ——— */
#panel-itinerary.wbp-on .wbp3 .wbx-where-box {
  position: relative;
  display: block;
}
#panel-itinerary.wbp-on .wbp3 .wbx-where-box > span {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  color: var(--wbx-muted);
  transform: translateY(-50%);
  pointer-events: none;
}
#panel-itinerary.wbp-on .wbp3 .wbx-where-box input {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.9rem;
  padding: 0 0.75rem 0 2.6rem;
  border: 0;
  border-radius: 12px;
  background: #f4efe4;
  color: var(--wbx-ink);
  font: inherit;
  font-size: 1rem;
}
#panel-itinerary.wbp-on .wbp3 .wbx-where-box input:focus-visible {
  outline: 2px solid var(--wbx-forest);
  outline-offset: 1px;
}
#panel-itinerary.wbp-on .wbp3 .wbx-where-head {
  margin: 0.85rem 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--wbx-muted);
}
#panel-itinerary.wbp-on .wbp3 .wbx-where-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.25rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#panel-itinerary.wbp-on .wbp3 .wbx-where-row:hover,
#panel-itinerary.wbp-on .wbp3 .wbx-where-row:focus-visible {
  background: #f4efe4;
}
#panel-itinerary.wbp-on .wbp3 .wbx-where-row > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#panel-itinerary.wbp-on .wbp3 .wbx-where-row small {
  font-size: 0.75rem;
  color: var(--wbx-muted);
}
#panel-itinerary.wbp-on .wbp3 .wbx-where-none {
  margin: 0.6rem 0.2rem;
  font-size: 0.88rem;
  color: var(--wbx-muted);
}
#panel-itinerary.wbp-on .wbp3 .wbx-droppin {
  width: 100%;
  min-height: 3rem;
  border: 1px dashed var(--wbx-forest);
  border-radius: 12px;
  background: #f4f6ee;
  color: var(--wbx-forest);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
#panel-itinerary.wbp-on .wbp3 .wbx-where-more {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--wbx-soft-line);
}
/* Nothing typed yet: no empty rows taking the card's gap twice (owner 2026-10-10: the blank stripe under the search). */
#panel-itinerary.wbp-on .wbp3 .wbx-where-list:empty,
#panel-itinerary.wbp-on .wbp3 .wbx-where-google[hidden] {
  display: none;
}
#panel-itinerary.wbp-on .wbp3 .wbx-where-box + .wbx-where-list:empty ~ .wbx-where-more {
  margin-top: 0;
}

/* ——— Explore ——— */
#panel-itinerary.wbp-on .wbp3 > .wbx {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--wbx-line);
  background: var(--wbx-ground);
}
#panel-itinerary.wbp-on .wbp3 .wbx-head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem 1.1rem 0.6rem;
}
#panel-itinerary.wbp-on .wbp3 .wbx-head h2 {
  margin: 0;
  font-family: var(--serif, "Playfair Display", Georgia, serif);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--wbx-ink);
}
#panel-itinerary.wbp-on .wbp3 .wbx .wbp-search {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
}
#panel-itinerary.wbp-on .wbp3 .wbx-search-icon {
  position: absolute;
  top: 0.68rem;
  left: 0.8rem;
  z-index: 1;
  color: var(--wbx-muted);
  pointer-events: none;
}
#panel-itinerary.wbp-on .wbp3 .wbx .wbp-search input {
  min-height: 2.65rem;
  padding-left: 2.4rem;
  border: 1px solid var(--wbx-line);
  background: #fff;
  box-shadow: none;
}
#panel-itinerary.wbp-on .wbp3 .wbx .live-map-search-list {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  left: 0;
  z-index: 6;
  max-height: 22rem;
}
#panel-itinerary.wbp-on .wbp3 .wbx-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 0;
  padding: 0 1.1rem 1.25rem;
  overflow: auto;
  overscroll-behavior: contain;
}
#panel-itinerary.wbp-on .wbp3 .wbx-adding {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.35rem 0.35rem 0.85rem;
  border: 2px solid var(--wbx-forest);
  border-radius: 999px;
  background: var(--wbx-forest-soft);
}
#panel-itinerary.wbp-on .wbp3 .wbx-adding > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--wbx-forest);
  text-overflow: ellipsis;
  white-space: nowrap;
}
#panel-itinerary.wbp-on .wbp3 .wbx-adding.is-quiet {
  border: 1px solid var(--wbx-line);
  background: #fff;
}
#panel-itinerary.wbp-on .wbp3 .wbx-adding.is-quiet > span {
  font-weight: 500;
  color: var(--wbx-muted);
}
#panel-itinerary.wbp-on .wbp3 .wbx-ask {
  flex: none;
  min-height: 2.3rem;
  padding: 0 0.8rem;
  border: 0;
  border-radius: 999px;
  background: var(--wbx-forest);
  color: #fbf6ec;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
#panel-itinerary.wbp-on .wbp3 .wbx-ask.is-soft {
  border: 1px solid var(--wbx-gold-line);
  background: var(--wbx-gold-soft);
  color: var(--wbx-gold);
}
#panel-itinerary.wbp-on .wbp3 .wbx-addx {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wbx-forest);
  font-size: 1rem;
  cursor: pointer;
}
#panel-itinerary.wbp-on .wbp3 .wbx-hint {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--wbx-gold-line);
  border-radius: 14px;
  background: #fffaf0;
}
#panel-itinerary.wbp-on .wbp3 .wbx-hint p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--wbx-ink);
}
#panel-itinerary.wbp-on .wbp3 .wbx-hint .wbx-ask {
  align-self: flex-start;
}
#panel-itinerary.wbp-on .wbp3 .wbx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
#panel-itinerary.wbp-on .wbp3 .wbx-chip {
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid var(--wbx-line);
  border-radius: 999px;
  background: #fff;
  color: var(--wbx-ink);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
#panel-itinerary.wbp-on .wbp3 .wbx-chip:hover {
  border-color: var(--wbx-forest);
}
#panel-itinerary.wbp-on .wbp3 .wbx-chip.is-on {
  border-color: var(--wbx-forest);
  background: var(--wbx-forest);
  color: #fbf6ec;
  font-weight: 700;
}
#panel-itinerary.wbp-on .wbp3 .wbx-count {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: var(--wbx-muted);
}
#panel-itinerary.wbp-on .wbp3 .wbx-cards {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
#panel-itinerary.wbp-on .wbp3 .wbx-card {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--wbx-line);
  border-radius: 16px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#panel-itinerary.wbp-on .wbp3 .wbx-card.is-on {
  border-color: var(--wbx-forest);
  box-shadow: 0 10px 24px -18px rgba(19, 37, 30, 0.55);
}
#panel-itinerary.wbp-on .wbp3 .wbx-card .wbx-tile {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 12px;
  font-size: 1.55rem;
}
#panel-itinerary.wbp-on .wbp3 .wbx-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
#panel-itinerary.wbp-on .wbp3 .wbx-card-name {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wbx-ink);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
#panel-itinerary.wbp-on .wbp3 .wbx-card-name:hover {
  text-decoration: underline;
}
#panel-itinerary.wbp-on .wbp3 .wbx-why {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 0.8rem;
  color: var(--wbx-muted);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
#panel-itinerary.wbp-on .wbp3 .wbx-card .wbx-tags {
  margin-top: 0.3rem;
}
#panel-itinerary.wbp-on .wbp3 .wbx-plus {
  display: grid;
  flex: none;
  place-items: center;
  align-self: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--wbx-forest);
  border-radius: 50%;
  background: #fff;
  color: var(--wbx-forest);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
#panel-itinerary.wbp-on .wbp3 .wbx-plus:hover {
  background: var(--wbx-forest);
  color: #fbf6ec;
}
#panel-itinerary.wbp-on .wbp3 .wbx-plus:active {
  transform: scale(0.94);
}
#panel-itinerary.wbp-on .wbp3 .wbx-empty {
  margin: 1rem 0;
  font-size: 0.85rem;
  color: var(--wbx-muted);
}
#panel-itinerary.wbp-on .wbp3 :is(.wbx-chip, .wbx-plus, .wbx-free, .wbx-ask, .wbx-addx, .wbx-card-name, .wbx-note, .wbx-soft, .wbx-change, .wbx-remove, .wbx-cf-go, .wbx-droppin):focus-visible {
  outline: 2px solid var(--wbx-forest);
  outline-offset: 2px;
}

/* ——— The map's key + right-click "Add a stop here" ——— */
#panel-itinerary.wbp-on .wbp3 .wbx-legend {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  font-size: 0.74rem;
  color: var(--wbx-ink);
  pointer-events: none;
}
#panel-itinerary.wbp-on .wbp3 .wbx-ctx {
  position: absolute;
  z-index: 8;
  min-height: 2.6rem;
  padding: 0 0.9rem;
  border: 0;
  border-radius: 999px;
  background: var(--wbx-forest);
  color: #fbf6ec;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.55);
  cursor: pointer;
}
#panel-itinerary.wbp-on > .wbp.wbp3 .exp-toast:not([hidden]) {
  left: calc(var(--wbp-side) + var(--wbx-w) + (100% - var(--wbp-side) - var(--wbx-w)) / 2);
  max-width: min(30rem, calc(100% - var(--wbp-side) - var(--wbx-w) - 2rem));
}

/* 48–64rem: Explore above the map (two columns: the day | Explore over the map). */
@media (max-width: 63.99rem) {
  #panel-itinerary.wbp-on > .wbp.wbp3,
  #panel-itinerary.wbp-on > .wbp.wbp3.is-editing {
    --wbp-side: 20rem;
    grid-template-columns: var(--wbp-side) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr);
  }
  #panel-itinerary.wbp-on > .wbp.wbp3 > .wbp-side {
    grid-row: 1 / span 2;
  }
  #panel-itinerary.wbp-on .wbp3 > .wbx {
    grid-column: 2;
    grid-row: 1;
    border-right: 0;
    border-bottom: 1px solid var(--wbx-line);
  }
  #panel-itinerary.wbp-on > .wbp.wbp3 > .wbp-stage,
  #panel-itinerary.wbp-on > .wbp.wbp3.is-editing > .wbp-stage {
    grid-column: 2;
    grid-row: 2;
  }
  #panel-itinerary.wbp-on > .wbp.wbp3 .exp-toast:not([hidden]) {
    left: calc(var(--wbp-side) + (100% - var(--wbp-side)) / 2);
    max-width: min(26rem, calc(100% - var(--wbp-side) - 2rem));
  }
  #panel-itinerary.wbp-on .wbp3 .wbx-tile {
    width: 3rem;
    height: 3rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  #panel-itinerary.wbp-on .wbp3 :is(.wbx-stopcard, .wbx-free, .wbx-chip, .wbx-card, .wbx-plus) {
    transition: none;
  }
}
/* Polish (Places Phase 1): the card's own buttons in sentence case, inside the column; the bar wraps. */
#panel-itinerary.wbp-on .wbp3 #detail-slot > .detail.lmp-card {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
#panel-itinerary.wbp-on .wbp3 #detail-slot > .detail.lmp-card :is(.wbx-cf-go, .wbx-cancel, .wbx-done, .wbx-soft, .wbx-remove, .wbx-ask) {
  box-sizing: border-box;
  max-width: 100%;
  text-transform: none;
  letter-spacing: 0;
}
#panel-itinerary.wbp-on .wbp3 #detail-slot > .detail.lmp-card .wbx-cancel {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--wbx-muted);
}
#panel-itinerary.wbp-on .wbp3 #detail-slot .wbx-where-box input[type="search"] {
  padding-left: 2.6rem !important;
}
#panel-itinerary.wbp-on .wbp3 .wbx-adding > span {
  white-space: normal;
  line-height: 1.25;
  font-size: 0.8rem;
}

/* ═══ Places tab (Places Phase 1, owner 2026-10-09; mock docs/mocks/places/WebPlaces + WebAddPlace): the Food
   tab's spot. Explore view (chips, "Our food list" pinned on Restaurants / Cafés), the Saved places column,
   place details, Add a place. Same look as the planner's Explore: cream, white cards, forest green active,
   gold only for LakBi's pick tags. ═══ */
#panel-places,
#plc-add {
  --wbx-ink: #1b2a23;
  --wbx-muted: #44544a;
  --wbx-quiet: #8a917f;
  --wbx-line: #e3d8c2;
  --wbx-soft-line: #f0e9da;
  --wbx-ground: #fbf6ec;
  --wbx-forest: var(--forest, #1f3d30);
  --wbx-forest-soft: #e6efe8;
  --wbx-gold: #7a5c1c;
  --wbx-gold-soft: #f5ecd3;
  --wbx-gold-line: #b8892f;
}
#panel-places .plc-head .exp-toolbar {
  align-items: center;
  gap: 0.6rem;
}
#panel-places .plc-ask,
#plc-add .wbx-ask {
  min-height: 2.6rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--wbx-forest);
  color: #fbf6ec;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
#plc-add .wbx-ask.is-soft {
  border: 1px solid var(--wbx-gold-line);
  background: var(--wbx-gold-soft);
  color: var(--wbx-gold);
}
#panel-places .plc-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
}
#panel-places .plc-main {
  flex: 999 1 34rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
#panel-places :is(.wbx-chips, #plc-add .wbx-chips) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
#panel-places .wbx-chip,
#plc-add .wbx-chip {
  min-height: 2.5rem;
  padding: 0 0.9rem;
  border: 1px solid var(--wbx-line);
  border-radius: 999px;
  background: #fff;
  color: var(--wbx-ink);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#panel-places .wbx-chip:hover,
#plc-add .wbx-chip:hover {
  border-color: var(--wbx-forest);
}
#panel-places .wbx-chip.is-on,
#plc-add .wbx-chip.is-on {
  border-color: var(--wbx-forest);
  background: var(--wbx-forest);
  color: #fbf6ec;
  font-weight: 700;
}
#panel-places .wbx-count,
#plc-add .wbx-count {
  margin: 0;
  font-size: 0.82rem;
  color: var(--wbx-muted);
}
#panel-places .plc-pinned {
  padding: 1rem;
  border: 2px solid var(--wbx-forest);
  border-radius: 20px;
  background: var(--wbx-forest-soft);
}
#panel-places .plc-pinned h3,
#panel-places .plc-more {
  margin: 0 0 0.75rem;
  font-family: var(--serif, "Playfair Display", Georgia, serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--wbx-ink);
}
#panel-places .plc-pinned h3 span {
  font-family: var(--sans, "DM Sans", sans-serif);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--wbx-forest);
}
#panel-places .plc-more {
  margin-top: 0.5rem;
}
#panel-places .plc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
#panel-places .plc-card {
  position: relative;
  display: flex;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid var(--wbx-line);
  border-radius: 18px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
#panel-places .plc-card:hover {
  border-color: #cdbf9f;
  box-shadow: 0 12px 26px -20px rgba(19, 37, 30, 0.45);
}
#panel-places .plc-card.is-on {
  border-color: var(--wbx-forest);
}
#panel-places .plc-tile,
#plc-add .plc-tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 14px;
  background: var(--wbx-gold-soft);
  font-size: 1.7rem;
  line-height: 1;
}
#panel-places .plc-tile.is-lg,
#plc-add .plc-tile.is-lg {
  width: 4rem;
  height: 4rem;
}
#plc-add .plc-tile.is-sm {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  font-size: 1.15rem;
}
#panel-places .plc-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
#panel-places .plc-name {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wbx-ink);
  font: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
#panel-places .plc-name:hover {
  text-decoration: underline;
}
#panel-places .plc-why {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 0.85rem;
  color: var(--wbx-muted);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
#panel-places .plc-tags,
#panel-places .plc-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.3rem;
}
#panel-places .wbx-tag {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #e9eddf;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--wbx-ink);
}
#panel-places .wbx-tag.is-food {
  background: var(--wbx-forest);
  color: #fbf6ec;
  font-weight: 700;
}
#panel-places .wbx-tag.is-saved {
  background: #e3dcec;
  color: #6b5a7a;
  font-weight: 700;
}
#panel-places .wbx-tag.is-lakbi {
  background: var(--wbx-gold-soft);
  color: var(--wbx-gold);
  font-weight: 700;
}
#panel-places .wbx-tag.is-added {
  background: #e6eef6;
  color: #2d5a7b;
  font-weight: 700;
}
#panel-places .plc-act {
  min-height: 2.25rem;
  padding: 0 0.8rem;
  border: 1px solid var(--wbx-forest);
  border-radius: 999px;
  background: #fff;
  color: var(--wbx-forest);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
#panel-places .plc-act.is-go {
  background: var(--wbx-forest);
  color: #fbf6ec;
}
#panel-places .plc-x {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wbx-quiet);
  font-size: 1.1rem;
  cursor: pointer;
}
#panel-places .plc-x:hover {
  background: #f4efe4;
  color: var(--wbx-ink);
}
#panel-places .plc-empty,
#plc-add .plc-empty {
  margin: 0.75rem 0;
  font-size: 0.9rem;
  color: var(--wbx-muted);
}

/* The Saved places column */
#panel-places .plc-saved {
  flex: 1 1 18rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.1rem;
  border: 1px solid var(--wbx-line);
  border-radius: 18px;
  background: #fff;
}
#panel-places .plc-saved-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
#panel-places .plc-saved-head h3 {
  margin: 0;
  font-family: var(--serif, "Playfair Display", Georgia, serif);
  font-size: 1.35rem;
  font-weight: 600;
}
#panel-places .plc-saved-head span {
  font-size: 0.82rem;
  color: var(--wbx-muted);
}
#panel-places .plc-addbtn {
  min-height: 2.75rem;
  border: 1px dashed #a9ad98;
  border-radius: 12px;
  background: transparent;
  color: var(--wbx-forest);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
#panel-places .plc-addbtn:hover {
  border-color: var(--wbx-forest);
  background: var(--wbx-forest-soft);
}
#panel-places .plc-saved-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
#panel-places .plc-saved-list li + li {
  border-top: 1px solid var(--wbx-soft-line);
}
#panel-places .plc-saved-row {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: 100%;
  padding: 0.65rem 0.25rem;
  border: 0;
  background: transparent;
  color: var(--wbx-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#panel-places .plc-saved-row span {
  font-size: 0.82rem;
  color: var(--wbx-muted);
}
#panel-places .plc-saved-row:hover b {
  text-decoration: underline;
}

/* Place details: a side sheet */
#panel-places .plc-detail-wrap {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  justify-content: flex-end;
  background: rgba(19, 37, 30, 0.28);
  animation: plc-fade 0.18s ease;
}
#panel-places .plc-detail {
  position: relative;
  box-sizing: border-box;
  width: min(26rem, 100%);
  height: 100%;
  padding: 1.5rem 1.4rem 2rem;
  overflow: auto;
  background: var(--wbx-ground);
  box-shadow: -18px 0 40px -24px rgba(0, 0, 0, 0.5);
  animation: plc-slide 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes plc-fade {
  from {
    opacity: 0;
  }
}
@keyframes plc-slide {
  from {
    transform: translateX(2rem);
    opacity: 0;
  }
}
#panel-places .plc-dt-x,
#plc-add .plc-dt-x {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--wbx-ink);
  font-size: 1.25rem;
  cursor: pointer;
}
#plc-add .plc-dt-x {
  position: static;
}
#panel-places .plc-dt-head,
#plc-add .plc-dt-head {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  margin: 0.5rem 0 1rem;
}
#panel-places .plc-dt-head h3,
#plc-add .plc-dt-head h3 {
  margin: 0;
  font-family: var(--serif, "Playfair Display", Georgia, serif);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.2;
}
#panel-places .plc-dt-head p,
#plc-add .plc-dt-head p {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--wbx-muted);
}
#panel-places .plc-dt-why {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: #fff;
  font-size: 0.95rem;
  line-height: 1.45;
}
#panel-places .plc-dt-why cite {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  font-style: normal;
  color: var(--wbx-muted);
}
#panel-places .plc-dt-facts {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0 0 1.1rem;
}
#panel-places .plc-dt-facts dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wbx-muted);
}
#panel-places .plc-dt-facts dd {
  margin: 0.1rem 0 0;
  font-size: 0.92rem;
}
#panel-places .plc-detail h4 {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wbx-muted);
}
#panel-places .plc-dt-stars {
  margin: 0 0 0.5rem;
  font-weight: 700;
}
#panel-places .plc-dt-stars span,
#panel-places .plc-dt-reviews span {
  color: #b8892f;
  letter-spacing: 0.05em;
}
#panel-places .plc-dt-reviews {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
}
#panel-places .plc-dt-quiet,
#plc-add .plc-dt-quiet {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--wbx-muted);
}
#panel-places .plc-dt-gmaps,
#plc-add .plc-dt-gmaps {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.25rem 0 1rem;
  color: var(--wbx-forest);
  font-weight: 700;
}
#panel-places .plc-dt-gmaps small {
  font-weight: 400;
  color: var(--wbx-muted);
}
#panel-places .plc-dt-remove {
  display: block;
  min-height: 2.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #b5452b;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Add a place (a dialog: search + ways on the left, the place on the right) */
#plc-add {
  box-sizing: border-box;
  width: min(60rem, calc(100vw - 2rem));
  max-height: min(44rem, calc(100dvh - 2rem));
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: var(--wbx-ground);
  color: var(--wbx-ink);
  font-family: var(--sans, "DM Sans", sans-serif);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.55);
}
#plc-add[open] {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
#plc-add::backdrop {
  background: rgba(19, 37, 30, 0.4);
}
#plc-add .plc-add-left,
#plc-add .plc-add-right {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
  padding: 1.5rem;
  overflow: auto;
}
#plc-add .plc-add-right {
  border-left: 1px solid var(--wbx-line);
  background: #fff;
}
#plc-add .plc-add-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#plc-add h2 {
  margin: 0;
  font-family: var(--serif, "Playfair Display", Georgia, serif);
  font-size: 1.75rem;
  font-weight: 600;
}
#plc-add .wbx-where-box {
  position: relative;
  display: block;
}
#plc-add .wbx-where-box > span {
  position: absolute;
  top: 50%;
  left: 0.85rem;
  color: var(--wbx-muted);
  transform: translateY(-50%);
}
#plc-add .wbx-where-box input,
#plc-add .plc-add-link input {
  box-sizing: border-box;
  width: 100%;
  min-height: 3rem;
  padding: 0 0.85rem 0 2.75rem;
  border: 1px solid var(--wbx-line);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 1rem;
}
/* Save a place: one box for a name or a link (owner 2026-10-15: "2 text box and 2 goofy buttons") */
#plc-add .plc-add-one {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3.25rem;
  padding: 0 0.4rem 0 0.95rem;
  border: 1px solid var(--wbx-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(19, 37, 30, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#plc-add .plc-add-one:focus-within {
  border-color: var(--wbx-forest);
  box-shadow: 0 0 0 3px var(--wbx-forest-soft);
}
#plc-add .plc-add-one-ico {
  display: flex;
  flex: none;
  color: var(--wbx-muted);
}
#plc-add .plc-add-one-ico .i-link,
#plc-add .plc-add-one.is-link .plc-add-one-ico .i-find {
  display: none;
}
#plc-add .plc-add-one.is-link .plc-add-one-ico .i-link {
  display: block;
}
#plc-add .plc-add-one.is-link .plc-add-one-ico {
  color: var(--wbx-forest);
}
#plc-add .plc-add-one input {
  flex: 1;
  min-width: 0;
  min-height: 3.1rem;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--wbx-ink);
  font: inherit;
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
  text-overflow: ellipsis;
}
/* the box's own ring shows focus — not a second square one around the text */
#plc-add .plc-add-one input:focus,
#plc-add .plc-add-one input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
#plc-add .plc-add-one input::-webkit-search-cancel-button {
  display: none;
}
#plc-add .plc-add-one-paste {
  flex: none;
  min-height: 2.25rem;
  padding: 0 0.85rem;
  border: 0;
  border-radius: 11px;
  background: var(--wbx-forest-soft);
  color: var(--wbx-forest);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
#plc-add .plc-add-one-x {
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: rgba(19, 37, 30, 0.07);
  color: var(--wbx-muted);
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
#plc-add .plc-add-one:not(.has-text) .plc-add-one-x,
#plc-add .plc-add-one.has-text .plc-add-one-paste {
  display: none;
}
#plc-add .plc-add-hint {
  margin: -0.2rem 0.3rem 0;
  font-size: 0.8rem;
  color: var(--wbx-muted);
}
#plc-add .wbx-soft {
  min-height: 2.5rem;
  padding: 0 0.85rem;
  border: 1px solid var(--wbx-line);
  border-radius: 999px;
  background: #fff;
  color: var(--wbx-ink);
  font: inherit;
  font-size: 0.85rem;
  text-wrap: balance; /* no word alone on a second line (bug hunt 2026-10-15) */
  cursor: pointer;
}
#plc-add .wbx-soft.is-on {
  border-color: var(--wbx-forest);
  background: var(--wbx-forest-soft);
  color: var(--wbx-forest);
  font-weight: 700;
}
#plc-add .plc-add-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--wbx-forest);
}
#plc-add .plc-add-rows {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
#plc-add .plc-add-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#plc-add .plc-add-row > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#plc-add .plc-add-row small {
  font-size: 0.78rem;
  color: var(--wbx-muted);
}
#plc-add .plc-add-row:hover {
  background: #fff;
}
#plc-add .plc-add-row.is-on {
  border: 2px solid var(--wbx-forest);
  background: #fff;
}
#plc-add .plc-add-row.is-saved {
  opacity: 0.6;
  cursor: default;
}
#plc-add .plc-add-empty p {
  margin: 0 0 0.5rem;
  color: var(--wbx-muted);
}
#plc-add .plc-far {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #b5452b;
}
/* The picked place (Save / Recommend a place, Add a food place): one field per row, room between them. */
#plc-add .plc-add-card {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
}
#plc-add .plc-add-card > * {
  max-width: 100%;
  margin: 0;
}
#plc-add .plc-add-card .plc-dt-head {
  margin-bottom: 0.1rem;
}
#plc-add .plc-add-card .plc-dt-gmaps {
  align-self: flex-start;
  margin-top: -0.4rem;
}
#plc-add .plc-add-card .plc-add-save {
  margin-top: 0.3rem;
}
#plc-add .plc-add-card .plc-dt-quiet {
  margin-top: -0.5rem;
}
#plc-add .plc-add-type p {
  margin: 0 0 0.45rem;
  font-weight: 700;
}
#plc-add .plc-add-type p span {
  font-weight: 400;
  color: var(--wbx-muted);
}
#plc-add .plc-add-type [role="radiogroup"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
#plc-add .plc-add-why {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-weight: 700;
}
#plc-add .plc-add-why span {
  font-weight: 400;
  color: var(--wbx-muted);
}
#plc-add .plc-add-why textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--wbx-line);
  border-radius: 12px;
  font: inherit;
  font-weight: 400;
  resize: vertical;
}
#plc-add .plc-add-save {
  min-height: 3.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--wbx-forest);
  color: #fbf6ec;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
#plc-add :is(button, input, textarea, a):focus-visible,
#panel-places :is(.plc-name, .plc-act, .plc-x, .plc-addbtn, .plc-saved-row, .plc-dt-x, .wbx-chip, .plc-ask):focus-visible {
  outline: 2px solid var(--wbx-forest);
  outline-offset: 2px;
}
@media (max-width: 47.99rem) {
  #plc-add[open] {
    grid-template-columns: 1fr;
    /* as tall as what's in it — no empty half (owner 2026-10-15: "many deadspace") */
    grid-auto-rows: min-content;
    align-content: start;
  }
  /* a modal dialog sits between top: 0 and bottom: 0 — "auto" stretches it to the screen; fit-content doesn't */
  #plc-add {
    height: fit-content;
  }
  #plc-add .plc-add-right {
    border-left: 0;
    border-top: 1px solid var(--wbx-line);
  }
  #plc-add .plc-add-right:has(> .plc-add-empty) {
    display: none;
  }
  /* a picked place: its card is the window (‹ Back at the top), not a form under the list */
  #plc-add.has-pick .plc-add-left {
    display: none;
  }
  #plc-add.has-pick .plc-add-right {
    border-top: 0;
  }
}
/* typing hides the "what works" block straight away (the window repaints only its results while you type) */
#plc-add .plc-add-one.has-text ~ .plc-add-start {
  display: none;
}
#plc-add .plc-add-unpick {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 0.95rem 0 0.75rem;
  border: 1px solid var(--wbx-line);
  border-radius: 999px;
  background: #fff;
  color: var(--wbx-ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
#plc-add .plc-add-start {
  display: grid;
  gap: 0.55rem;
  padding: 0 0.15rem;
}
#plc-add .plc-add-srcs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--wbx-muted);
}
#plc-add .plc-add-srcs > span {
  margin-right: 0.15rem;
}
#plc-add .plc-add-srcs b {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem 0.25rem 0.45rem;
  font-size: 0.78rem;
  border: 1px solid var(--wbx-line);
  border-radius: 999px;
  background: #fff;
  color: var(--wbx-ink);
  font-weight: 600;
}
#plc-add .plc-add-srcs b::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--src, #999);
}
#plc-add .plc-add-srcs .is-gm {
  --src: #34a853;
}
#plc-add .plc-add-srcs .is-tt {
  --src: #fe2c55;
}
#plc-add .plc-add-srcs .is-yt {
  --src: #ff0000;
}
#plc-add .plc-add-start p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--wbx-muted);
}
#plc-add .plc-add-empty {
  display: grid;
  place-items: center;
  gap: 0.4rem;
  min-height: 12rem;
  color: var(--wbx-muted);
  text-align: center;
}
#plc-add .plc-add-empty span {
  font-size: 1.6rem;
  opacity: 0.6;
}
#plc-add .plc-add-empty p {
  margin: 0;
  font-size: 0.9rem;
}
@media (prefers-reduced-motion: reduce) {
  #panel-places :is(.plc-detail-wrap, .plc-detail) {
    animation: none;
  }
  #panel-places :is(.plc-card, .wbx-chip),
  #plc-add .wbx-chip {
    transition: none;
  }
}
#plc-add .plc-add-why input {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.85rem;
  border: 1px solid var(--wbx-line);
  border-radius: 12px;
  font: inherit;
  font-weight: 400;
}
#plc-add .plc-add-save {
  width: 100%;
  padding: 0 1.25rem;
}

/* ——— Recommended places (owner 2026-10-09; mock BJoavw1NAgCjPv7MiQ9aeD): the Food card's look (nu-food-card)
   with a type tile, who recommended it on the image, a why box, Details / Edit / Remove links. ——— */
html.wb-new #panel-places .nu-chips {
  margin-bottom: 0.9rem;
}
html.wb-new #panel-places .nu-food-bar .nu-chips {
  margin: 0;
}
#panel-places .plc-bar-acts {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}
#panel-places .nu-food-media.plc-media {
  background-image: none;
}
#panel-places .nu-food-card .nu-food-over .plc-x {
  pointer-events: auto;
  border: 0;
  min-width: 2rem;
  min-height: 2rem;
  justify-content: center;
  color: var(--wbx-muted);
  font-size: 1.05rem;
  cursor: pointer;
}
html.wb-new .nu-food-pill.plc-who {
  position: absolute;
  left: 0.65rem;
  bottom: 0.65rem;
  /* a long name wraps inside the photo, not past its edge (bug hunt 2026-10-12) */
  max-width: calc(100% - 1.3rem);
  overflow-wrap: anywhere;
  background: #1f3d30;
  color: #fff;
}
html.wb-new .nu-food-pill.is-slot ~ .nu-food-pill.plc-who {
  bottom: 2.6rem;
}
#panel-places .nu-food-pill.plc-who.is-gold {
  background: linear-gradient(135deg, #f7e2a6, #d4a441 45%, #f3d58a);
  color: #4a3208;
}
html.wb-new .nu-food-pill.plc-who.is-off {
  position: absolute;
  left: 0.65rem;
  bottom: 0.65rem;
  background: #5d655f;
  color: #fff;
}
html.wb-new .nu-food-card.is-off .nu-food-media {
  filter: grayscale(0.85);
  opacity: 0.75;
}
html.wb-new .nu-food-card.is-off .nu-food-body h3 {
  color: #6b746f;
}
#panel-places .nu-food-body h3 .plc-name {
  all: unset;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
#panel-places .nu-food-body h3 .plc-name:hover,
#panel-places .nu-food-body h3 .plc-name:focus-visible {
  text-decoration: underline;
}
#panel-places .plc-whybox {
  margin: 0;
  padding: 0.6rem 0.75rem;
  overflow-wrap: anywhere;
  border-radius: 10px;
  background: var(--wbx-gold-soft);
  color: var(--wbx-ink);
  font-size: 0.88rem;
  line-height: 1.4;
}
#panel-places .plc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
}
#panel-places .plc-nodest {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  margin: 0 0 1.2rem;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--wbx-line);
  border-radius: 16px;
  background: #fffdf8;
}
#panel-places .plc-nodest h3 {
  margin: 0;
  font-size: 1.2rem;
}
#panel-places .plc-nodest p {
  margin: 0;
  color: var(--wbx-muted);
}
#plc-add .plc-add-row.is-off small {
  color: #8a2f2f;
}
/* Places: one top tab, two inner tabs — Food places · Recommended (owner 2026-10-09). */
html.wb-new :is(#panel-food, #panel-places) .plc-sub {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 1.1rem;
  padding: 4px;
  border-radius: 999px;
  background: #e9e4d6;
}
html.wb-new .plc-sub .plc-sub-tab {
  min-height: 2.5rem;
  padding: 0 1.15rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #55625b;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
html.wb-new .plc-sub .plc-sub-tab.is-on {
  background: #fdfbf5;
  color: #1f3d30;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
html.wb-new .plc-sub .plc-sub-tab small {
  margin-left: 0.25rem;
  color: #8a917f;
  font-weight: 600;
}
html.wb-new .plc-sub .plc-sub-tab:focus-visible {
  outline: 2px solid #1f3d30;
  outline-offset: 2px;
}
/* A recommendation edited in its card (02q): the Food edit card's fields. */
#panel-places .plc-edit {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}
#panel-places .plc-edit .food-card-field input,
#panel-places .plc-edit .food-card-field textarea {
  box-sizing: border-box;
  width: 100%;
}
#panel-places .plc-edit-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
#panel-places .plc-added {
  margin: 0;
  font-size: 0.85rem;
}
/* 48–64rem: the day column is narrow — compact stop cards (no tile, one line each), slimmer free rows. */
@media (max-width: 63.99rem) {
  #panel-itinerary.wbp-on .wbp3 .wbx-stopcard .wbx-tile {
    display: none;
  }
  #panel-itinerary.wbp-on .wbp3 .wbx-stopcard {
    padding: 0.55rem 0.7rem;
  }
  #panel-itinerary.wbp-on .wbp3 .wbx-stop .lmp-main {
    margin-bottom: 0.25rem;
  }
  #panel-itinerary.wbp-on .wbp3 .wbx-stop .lmp-main strong {
    font-size: 0.95rem;
  }
  #panel-itinerary.wbp-on .wbp3 .wbx-lines {
    gap: 0.1rem;
    font-size: 0.78rem;
  }
  #panel-itinerary.wbp-on .wbp3 .wbx-lines > * {
    white-space: nowrap;
  }
  #panel-itinerary.wbp-on .wbp3 .wbx-dot {
    margin-top: 0.55rem;
  }
  #panel-itinerary.wbp-on .wbp3 .wbx-line {
    gap: 0.4rem;
  }
  #panel-itinerary.wbp-on .wbp3 .wbx-free {
    min-height: 2.1rem;
    font-size: 0.76rem;
  }
  #panel-itinerary.wbp-on .wbp3 .wbx-list {
    padding: 0.75rem 1rem 5rem;
  }
  #panel-itinerary.wbp-on .wbp3 .wbx-head-day {
    padding: 1rem 1rem 0.35rem;
  }
  #panel-itinerary.wbp-on .wbp3 .wbx-trip h1 {
    font-size: 1.45rem;
  }
  #panel-itinerary.wbp-on .wbp3 .wbx-daytitle {
    padding: 0.5rem 1rem 0.4rem;
  }
}

/* ═══ Crew HQ (owner 2026-10-09, Places Phase 1 step H; no mock — the look of docs/mocks/places): a
   full-screen panel from the header button "Crew HQ · 3". Forest band, cream ground, white cards, forest
   green for what's active, gold only for LakBi. 13a / 13b in src/web/player. ═══ */
.crewhq-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.crewhq-btn .crewhq-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: #c0643f;
  color: #fff;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}
html.hq-open,
html.hq-open body {
  overflow: hidden;
}
.hq {
  --hq-ink: #1b2a23;
  --hq-muted: #44544a;
  --hq-line: #e3d8c2;
  --hq-soft: #f0e9da;
  --hq-ground: #fbf6ec;
  --hq-forest: var(--forest, #1f3d30);
  --hq-forest-soft: #e6efe8;
  --hq-gold: #e6c98e;
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: var(--hq-ground);
  color: var(--hq-ink);
  font-family: var(--sans, "DM Sans", system-ui, sans-serif);
  animation: hq-in 0.2s ease;
}
@keyframes hq-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}
.hq-band {
  flex: none;
  background: var(--hq-forest);
  color: #fbf6ec;
}
.hq-band-in {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  max-width: 77.5rem;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 1.25rem;
}
.hq-band h2 {
  margin: 0.25rem 0 0;
  font-family: var(--serif, "Playfair Display", Georgia, serif);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.05;
}
.hq-kick {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hq-muted);
}
.hq-kick.is-gold {
  color: var(--hq-gold);
}
.hq-band-tools {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.hq-notify {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: rgba(251, 246, 236, 0.85);
}
.hq-notify select {
  min-height: 2.25rem;
  padding: 0 0.5rem;
  border: 1px solid rgba(251, 246, 236, 0.35);
  border-radius: 999px;
  background: transparent;
  color: #fbf6ec;
  font: inherit;
}
.hq-notify select option {
  color: var(--hq-ink);
}
.hq-close {
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: rgba(251, 246, 236, 0.14);
  color: #fbf6ec;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.hq-close:hover {
  background: rgba(251, 246, 236, 0.24);
}
.hq-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.hq-body.is-busy {
  cursor: progress;
}
.hq-loading {
  max-width: 77.5rem;
  margin: 2rem auto;
  padding: 0 1.5rem;
}
.hq-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-start;
  max-width: 77.5rem;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;
}
.hq-main {
  flex: 999 1 34rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.hq-side {
  flex: 1 1 20rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.hq-card {
  padding: 1.25rem;
  border: 1px solid var(--hq-line);
  border-radius: 20px;
  background: #fff;
}
.hq-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.hq-card-head h3 {
  margin: 0;
  font-family: var(--serif, "Playfair Display", Georgia, serif);
  font-size: 1.45rem;
  font-weight: 600;
}
.hq-quiet {
  margin: 0;
  font-size: 0.88rem;
  color: var(--hq-muted);
}
.hq-btn {
  min-height: 2.6rem;
  padding: 0 1.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--hq-forest);
  color: #fbf6ec;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.hq-btn.is-soft {
  border: 1px solid var(--hq-forest);
  background: #fff;
  color: var(--hq-forest);
}
.hq-btn.is-sm {
  min-height: 2.1rem;
  padding: 0 0.7rem;
  font-size: 0.78rem;
}
.hq-link {
  padding: 0.3rem 0;
  border: 0;
  background: transparent;
  color: var(--hq-forest);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.hq-x {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--hq-muted);
  font-size: 1.05rem;
  cursor: pointer;
}
.hq-x:hover {
  background: #f4efe4;
}
.hq-pill {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: #f4efe4;
  font-size: 0.74rem;
  font-weight: 700;
}
.hq-pill.is-blue {
  background: #e6eef6;
  color: #2d5a7b;
}
.hq-statement blockquote {
  margin: 0;
  font-family: var(--serif, "Playfair Display", Georgia, serif);
  font-size: 1.25rem;
  line-height: 1.45;
}
.hq-statement cite {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--sans, "DM Sans", sans-serif);
  font-size: 0.85rem;
  font-style: normal;
  color: var(--hq-muted);
}
.hq-form,
.hq-statement form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--hq-soft);
  border-radius: 16px;
  background: var(--hq-ground);
}
.hq-form label,
.hq-places legend {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 700;
}
.hq-form :is(input, select, textarea),
.hq-statement textarea,
.hq-inline input,
.hq-title-form input {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.6rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--hq-line);
  border-radius: 12px;
  background: #fff;
  color: var(--hq-ink);
  font: inherit;
  font-weight: 400;
}
.hq-form .hq-check,
.hq-places .hq-check {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}
.hq-form .hq-check input,
.hq-places .hq-check input {
  width: auto;
  min-height: 0;
}
.hq-check small {
  color: var(--hq-muted);
}
.hq-places {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 14rem;
  overflow: auto;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--hq-line);
  border-radius: 12px;
  background: #fff;
}
.hq-row2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.65rem;
}
.hq-seg {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.2rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--hq-line);
}
.hq-seg button {
  min-height: 2.25rem;
  padding: 0 0.9rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--hq-ink);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.hq-seg button.is-on {
  background: var(--hq-forest);
  color: #fbf6ec;
  font-weight: 700;
}
.hq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hq-ann {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hq-soft);
}
.hq-ann:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.hq-ann.is-pinned {
  padding: 0.9rem;
  border: 1px solid var(--hq-gold);
  border-radius: 14px;
  background: #fffaf0;
}
.hq-ann-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
}
.hq-ann-head small {
  color: var(--hq-muted);
}
.hq-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}
.hq-ann p {
  margin: 0.5rem 0 0;
  line-height: 1.5;
}
.hq-face {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--hq-ink);
}
.hq-faces {
  display: inline-flex;
}
.hq-faces .hq-face + .hq-face {
  margin-left: -0.4rem;
}
.hq-comments {
  margin-top: 0.4rem;
}
.hq-comment-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.3rem 0 0.5rem;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
}
.hq-comment-list small {
  margin-left: 0.3rem;
  color: var(--hq-muted);
}
.hq-inline {
  display: flex;
  gap: 0.4rem;
}

/* Polls (the owner's web style: full-width fill bars + faces + count; Details beside a place) */
.hq-poll {
  padding: 1.1rem;
  border: 1px solid var(--hq-line);
  border-radius: 18px;
}
.hq-poll-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
}
.hq-deadline {
  margin-left: auto;
  color: var(--hq-muted);
}
.hq-deadline.is-open {
  color: #b5452b;
  font-weight: 700;
}
.hq-poll h4 {
  margin: 0.6rem 0 0.9rem;
  font-family: var(--serif, "Playfair Display", Georgia, serif);
  font-size: 1.35rem;
  font-weight: 600;
}
.hq-votes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.hq-vote-row {
  display: flex;
  gap: 0.5rem;
}
.hq-vote {
  position: relative;
  flex: 1;
  min-height: 3.35rem;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--hq-line);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.hq-vote:disabled {
  cursor: default;
}
.hq-vote.is-mine {
  border-color: #e8a48c;
}
.hq-vote.is-won {
  border-color: var(--hq-forest);
}
.hq-vote-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: #e6eef6;
  transition: width 0.3s ease;
}
.hq-vote.is-mine .hq-vote-fill {
  background: #fbe3dc;
}
.hq-vote.is-won .hq-vote-fill {
  background: var(--hq-forest-soft);
}
.hq-vote-in {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.35rem;
  padding: 0 1rem;
}
.hq-vote-in > b:first-of-type {
  flex: 1;
}
.hq-vote.is-mine svg {
  color: #b5452b;
}
.hq-vote-dot {
  width: 1rem;
  height: 1rem;
  border: 2px solid #c9c2b0;
  border-radius: 50%;
}
.hq-vote-n {
  min-width: 1.25rem;
  text-align: right;
}
.hq-details {
  flex: none;
  width: 4.25rem;
  border: 1px solid var(--hq-line);
  border-radius: 12px;
  background: #fff;
  color: var(--hq-forest);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.hq-place-detail {
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: var(--hq-ground);
  font-size: 0.88rem;
}
.hq-place-detail p {
  margin: 0 0 0.3rem;
}
.hq-place-detail a {
  color: var(--hq-forest);
  font-weight: 700;
}
.hq-poll-foot {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--hq-muted);
}
.hq-tie {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.hq-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.hq-choice {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1rem;
  border: 2px solid var(--hq-forest);
  border-radius: 18px;
}
.hq-choice .hq-kick {
  color: #7a5c1c;
}
.hq-choice-name {
  font-size: 1.15rem;
}
.hq-choice .hq-btn {
  align-self: flex-start;
  /* The button sits on each card's bottom edge, whatever the text above it wraps to (owner 2026-10-10). */
  margin-top: auto;
}
.hq-choice p {
  margin: 0 0 0.35rem;
}

/* Jobs + From Prep */
.hq-job {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.hq-jobs {
  gap: 0.6rem;
}
.hq-tick {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 2px solid var(--hq-forest);
  border-radius: 8px;
  background: #fff;
  color: #fbf6ec;
  font-weight: 700;
  cursor: pointer;
}
.hq-tick[aria-checked="true"] {
  background: var(--hq-forest);
}
.hq-tick:disabled {
  border-color: #c9c2b0;
  cursor: default;
}
.hq-tick.is-sm {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.8rem;
}
.hq-job-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.hq-job-text small {
  color: var(--hq-muted);
}
.hq-job.is-done .hq-job-text b {
  color: var(--hq-muted);
  text-decoration: line-through;
}
.hq-warn {
  color: #b5452b;
  font-weight: 700;
}
.hq-job select {
  min-height: 2.25rem;
  border: 1px solid var(--hq-line);
  border-radius: 10px;
  font: inherit;
}
.hq-prep {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: var(--hq-ground);
}
.hq-prep ul {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.5rem 0;
  padding: 0;
  list-style: none;
}
.hq-prep li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
}

/* Crew & roles + Activity log */
.hq-crew ul,
.hq-activity ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hq-crew li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.hq-crew .hq-face {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 0.85rem;
}
.hq-crew-name {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.hq-crew-name small {
  color: var(--hq-muted);
}
.hq-title-form {
  display: flex;
  flex-basis: 100%;
  gap: 0.4rem;
  padding-left: 2.85rem;
}
.hq-title-form input {
  min-height: 2.1rem;
  font-size: 0.85rem;
}
.hq-activity li {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--hq-soft);
  font-size: 0.88rem;
}
.hq-activity li:last-child {
  border-bottom: 0;
}
.hq-activity small {
  color: var(--hq-muted);
}

/* Memories (= reviews; the honesty copy) */
.hq-honest {
  margin: 0 0 0.9rem;
  font-size: 0.88rem;
  line-height: 1.5;
}
.hq-honest.is-first {
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: var(--hq-forest-soft);
  color: var(--hq-forest);
}
.hq-memories {
  display: grid;
  /* Two across on a phone (8rem — at 9rem a 375 px screen got one huge tile per row). */
  grid-template-columns: repeat(auto-fill, minmax(min(8rem, 100%), 1fr));
  gap: 0.75rem;
}
.hq-memory {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.5rem;
  border: 1px solid var(--hq-line);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.hq-memory img,
.hq-memory-tile {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  object-fit: cover;
  font-size: 1.8rem;
}
.hq-memory:not(.is-mine) {
  border-style: dashed;
  color: var(--hq-muted);
}
.hq-memory small {
  font-size: 0.75rem;
  color: #b8892f;
}
.hq-memory:not(.is-mine) small {
  color: var(--hq-muted);
}
/* Memories (owner 2026-10-10): the done ones stand out — green frame, colour, a ✓ and their stars; the rest wait quietly. */
.hq-mem-done { font-size: 0.85rem; font-weight: 700; color: var(--hq-forest); }
.hq-mem-due { margin: -0.4rem 0 0.75rem; font-size: 0.82rem; font-weight: 600; color: #8a5a12; }
.hq-mem-due.is-closed { color: var(--hq-muted, #6b6a63); }
.hq-memory.is-closed { cursor: default; }
.hq-memory.is-closed:not(.is-mine) { opacity: 0.75; }
.hq-mem-bar { height: 6px; margin: -0.35rem 0 0.9rem; overflow: hidden; border-radius: 999px; background: #ecebe2; }
.hq-mem-bar > span { display: block; height: 100%; border-radius: inherit; background: #2d6a4f; }
.hq-memory-pic { position: relative; display: block; }
.hq-memory.is-mine {
  border: 2px solid #2d6a4f;
  background: #f1f8f4;
  box-shadow: 0 4px 14px rgba(45, 106, 79, 0.14);
}
.hq-memory.is-mine b { color: var(--hq-ink); }
.hq-memory-check {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #2d6a4f;
  color: #fff;
}
.hq-memory small.hq-memory-stars { font-size: 0.95rem; letter-spacing: 0.06em; color: #d4a017; }
.hq-memory-stars span { color: #d8d4c8; }
.hq-memory small.hq-memory-yours { color: #2d6a4f; font-weight: 700; }
.hq-memory small em { font-style: normal; font-weight: 600; }
.hq-memory:not(.is-mine) .hq-memory-tile { filter: grayscale(1); }
.hq-memory:not(.is-mine) small.hq-memory-add { color: var(--hq-forest); font-weight: 700; }
.hq-memory:not(.is-mine):hover { border-style: solid; border-color: var(--hq-forest); }
.hq-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  z-index: 2;
  margin: 0;
  padding: 0.75rem 1.1rem;
  border-radius: 14px;
  background: var(--hq-forest);
  color: #fbf6ec;
  font-weight: 700;
  transform: translateX(-50%);
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.55);
}
.hq-toast.is-warn {
  background: #8f3a22;
}
.hq :is(button, select, input, textarea, a):focus-visible {
  outline: 2px solid var(--hq-forest);
  outline-offset: 2px;
}
.hq-band :is(button, select):focus-visible {
  outline-color: var(--hq-gold);
}
@media (max-width: 47.99rem) {
  .hq-band-in {
    flex-wrap: wrap;
    padding: 1rem;
  }
  .hq-band h2 {
    font-size: 1.85rem;
  }
  .hq-grid {
    padding: 1rem 1rem 3rem;
  }
  .hq-deadline {
    margin-left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hq,
  .hq-vote-fill {
    animation: none;
    transition: none;
  }
}

/* ——— Place window (owner 2026-10-09): cards keep one size; "View details" opens the rest here —
   centered on a wide screen, a bottom sheet on a phone. Food places + Saved places. ——— */
html.wb-new .plw-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  margin: 0;
  color: #44544a;
  font-size: 0.88rem;
}
html.wb-new .plw-more {
  align-self: flex-start;
}
html.wb-new dialog.plw {
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(88vh, 52rem);
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: #fffdf8;
  color: inherit;
  overflow: auto;
  overscroll-behavior: contain;
  box-shadow: 0 24px 60px rgba(19, 37, 30, 0.35);
}
html.wb-new dialog.plw::backdrop {
  background: rgba(19, 37, 30, 0.45);
}
html.wb-new dialog.plw .plw-card {
  position: relative;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
html.wb-new dialog.plw .plw-card:hover {
  transform: none;
  box-shadow: none;
}
html.wb-new dialog.plw .plw-x {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.95);
  color: #1b2a23;
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
html.wb-new dialog.plw .plw-x:focus-visible {
  outline: 2px solid #1f3d30;
  outline-offset: 2px;
}
html.wb-new dialog.plw .plw-body {
  gap: 0.7rem;
  padding: 1.1rem 1.25rem 1.3rem;
}
/* Long unbroken words (a name, an address, why go) wrap inside the window, never clipped (bug hunt 2026-10-12). */
html.wb-new dialog.plw .plw-body,
html.wb-new dialog.plw .plw-body > * {
  min-width: 0;
  overflow-wrap: anywhere;
}
html.wb-new dialog.plw .plw-body h3 {
  margin: 0;
  padding-right: 2rem;
}
html.wb-new dialog.plw .plw-addr {
  margin: 0;
  color: #44544a;
  font-size: 0.9rem;
  line-height: 1.45;
}
html.wb-new dialog.plw .nu-food-media .nu-food-over {
  right: 3.6rem;
}
html.wb-new dialog.plw .plc-edit {
  padding: 0;
  border: 0;
  box-shadow: none;
}
@media (max-width: 47.99rem) {
  html.wb-new dialog.plw {
    width: 100vw;
    max-width: 100vw;
    margin: auto 0 0;
    border-radius: 20px 20px 0 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html.wb-new dialog.plw[open] {
    animation: plw-in 160ms ease-out;
  }
}
@keyframes plw-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Saved places card: View details + (Owner / Planner / Foodie) "+ Add to Food places" on one line. */
html.wb-new #panel-places .plc-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  align-items: center;
}
html.wb-new #panel-places .plc-promote {
  font-weight: 700;
  white-space: normal;
  line-height: 1.15;
  text-align: center;
}

/* Floating "Recommend a place" (Foodie / Finance / Traveller, any tab): bottom-right, on one line with the Edit / Save
   buttons (placesFloatLift sets bottom when the tab has them). */
html.wb-new .plc-float {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: #1f3d30;
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(19, 37, 30, 0.3);
  cursor: pointer;
}
html.wb-new .plc-float:hover {
  background: #13251e;
}
html.wb-new .plc-float:focus-visible {
  outline: 3px solid #e3c06f;
  outline-offset: 2px;
}
html.wb-new .plc-float[hidden],
html.wb-new .plc-float.is-editing {
  display: none;
}
@media (max-width: 47.99rem) {
  html.wb-new .plc-float {
    right: max(0.75rem, env(safe-area-inset-right));
    bottom: max(0.75rem, env(safe-area-inset-bottom));
  }
}

/* …inside the tab's dark Edit / Save bar: one of its buttons, Edit's gold, first in the row. */
html.wb-new .plc-float.is-docked {
  position: static;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  white-space: nowrap;
  letter-spacing: normal;
  text-transform: none;
  min-height: 2.5rem;
  padding: 0 0.9rem;
  gap: 0.35rem;
  border: 1px solid #e6c98e;
  border-radius: 9px;
  background: #e6c98e;
  color: #1d2622;
  font: 600 0.8rem var(--sans);
  box-shadow: none;
}
html.wb-new .plc-float.is-docked span {
  display: inline;
  transform: none !important;
}
html.wb-new .plc-float.is-docked:hover {
  background: #dcbb78;
}

/* Places from social links: the post LakBi read (Recommend a place) and "From TikTok ↗" on the card. */
#plc-add .plc-add-post {
  display: grid;
  gap: 0.15rem;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  background: var(--wbx-cream, #faf6ec);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.82rem;
}
#plc-add .plc-add-post small {
  color: var(--wbx-forest);
}
#plc-add .plc-add-post p {
  margin: 0;
  color: inherit;
  opacity: 0.8;
  /* two lines of the caption — context, not the main thing (owner 2026-10-16: "messy") */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* A post's places: tick → Add (owner 2026-10-16: paste a link, pick one or many, add, edit later) */
#plc-add .plc-tick-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
#plc-add .plc-tick-head p {
  margin: 0;
  font-weight: 700;
  color: var(--wbx-ink);
}
#plc-add .plc-tick-all {
  flex: none;
  border: 0;
  background: none;
  color: var(--wbx-forest);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
#plc-add .plc-ticks {
  display: grid;
  border: 1px solid var(--wbx-line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
#plc-add .plc-tick {
  display: flex;
  align-items: center;
  min-height: 3.4rem;
}
#plc-add .plc-tick + .plc-tick {
  border-top: 1px solid var(--wbx-line);
}
#plc-add .plc-tick-main,
#plc-add .plc-tick.is-done,
#plc-add .plc-tick.is-off {
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
}
#plc-add .plc-tick-main {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#plc-add .plc-tick-box {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border: 2px solid var(--wbx-line);
  border-radius: 7px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
}
#plc-add .plc-tick.is-on .plc-tick-box,
#plc-add .plc-tick.is-done .plc-tick-box {
  border-color: var(--wbx-forest);
  background: var(--wbx-forest);
}
#plc-add .plc-tick.is-done .plc-tick-box {
  opacity: 0.55;
}
#plc-add .plc-tick-txt {
  display: grid;
  min-width: 0;
}
#plc-add .plc-tick-txt b {
  overflow: hidden;
  color: var(--wbx-ink);
  font-size: 0.97rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#plc-add .plc-tick-txt small {
  overflow: hidden;
  color: var(--wbx-muted);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#plc-add .plc-tick.is-done .plc-tick-txt,
#plc-add .plc-tick.is-off .plc-tick-txt {
  opacity: 0.6;
}
#plc-add .plc-tick-edit {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: 0.3rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--wbx-muted);
  font-size: 1.05rem;
  cursor: pointer;
}
#plc-add .plc-tick-go {
  min-height: 3.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--wbx-forest);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
#plc-add .plc-tick-go:disabled {
  opacity: 0.45;
  cursor: default;
}
html.wb-new #panel-places .plc-social,
.plw .plc-social {
  font-size: 0.82rem;
}
.plw .plc-social-row {
  margin: 0.2rem 0;
}

/* Planner (owner 2026-10-09): Explore's box filters your places; nothing matches → hand the words to the map's search. */
#panel-itinerary.wbp-on .wbp3 .wbx-tomap {
  align-self: flex-start;
  margin: 0.15rem 0 0;
  padding: 0.35rem 0;
  border: 0;
  background: none;
  color: var(--wbx-forest, #1f3d30);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* A flight card hidden from the day: still in the planner, faded, so it can be shown again (owner 2026-10-09). */
#panel-itinerary.wbp-on .wbx-stop.is-hidden-activity .wbx-stopcard {
  opacity: 0.55;
}
#panel-itinerary.wbp-on .wbx-tag.is-hidden-day {
  border: 1px dashed currentColor;
  background: transparent;
}
/* "Our stay · Sat 28 – Tue 31": the trip's own hotel (Hotel section) in Explore. */
#panel-itinerary.wbp-on .wbp3 .wbx-tag.is-stay {
  background: #1f3d30;
  color: #fbf6ec;
  font-weight: 700;
}

/* Planner stop cards (owner 2026-10-09): the whole card clicks (show, then edit); travel line wraps between its
   parts instead of squeezing; "Add notes" sits left under the time. */
#panel-itinerary.wbp-on .wbp3 .wbx-stopcard {
  cursor: pointer;
}
#panel-itinerary.wbp-on .wbp3 .wbx-lines .wbx-note {
  display: inline-flex;
  align-self: flex-start;
  justify-content: flex-start;
  min-height: 0;
  max-width: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--wbx-quiet);
}
#panel-itinerary.wbp-on .wbp3 .wbx-lines .wbx-note.has-note {
  color: var(--wbx-muted);
}
#panel-itinerary.wbp-on .wbp3 .wbx-lines .lmp-leg {
  flex-wrap: wrap;
  row-gap: 0.1rem;
  white-space: nowrap;
}
#panel-itinerary.wbp-on .wbp3 .wbx-lines .lmp-leg .lmp-leg-route {
  margin-left: auto;
}
#panel-itinerary.wbp-on .wbp3 .wbx-edit-hint {
  display: block;
  margin-top: 0.5rem;
  color: var(--wbx-forest, #1f3d30);
  font-size: 0.76rem;
  font-weight: 700;
}

/* LakBi's ideas in the planner's day column (owner 2026-10-09: squeezed into two columns there): always one
   column — LakBi + the words on top, the idea card under it, full width. */
#panel-itinerary.wbp-on .wbp3 .lbx.lbx-itin {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "side" "stage" "foot" "note";
  gap: 0.8rem;
  padding: 1rem 1rem 0.9rem;
  border-radius: 20px;
}
#panel-itinerary.wbp-on .wbp3 .lbx.lbx-itin .lbx-side {
  align-items: center;
  gap: 0.75rem;
  padding-right: 2.2rem;
}
#panel-itinerary.wbp-on .wbp3 .lbx.lbx-itin .lbx-face {
  width: 72px;
  height: 72px;
}
#panel-itinerary.wbp-on .wbp3 .lbx.lbx-itin h3 {
  font-size: 1.3rem;
  line-height: 1.2;
}
#panel-itinerary.wbp-on .wbp3 .lbx.lbx-itin .lbx-stage,
#panel-itinerary.wbp-on .wbp3 .lbx.lbx-itin .lbx-card {
  min-width: 0;
  width: 100%;
}
#panel-itinerary.wbp-on .wbp3 .lbx.lbx-itin .lbx-foot {
  padding: 0;
}
#panel-itinerary.wbp-on .wbp3 .lbx.lbx-itin .lbx-card {
  grid-template-columns: minmax(0, 1fr);
}
#panel-itinerary.wbp-on .wbp3 .lbx.lbx-itin .lbx-stage {
  gap: 0.3rem;
}
#panel-itinerary.wbp-on .wbp3 .lbx.lbx-itin .lbx-nav {
  width: 2rem;
  height: 2rem;
}
/* …the idea card takes the full width; ‹ › sit under it (owner 2026-10-09: "how can I click next"). */
#panel-itinerary.wbp-on .wbp3 .lbx.lbx-itin .lbx-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "card card card" "prev . next";
  gap: 0.5rem;
}
#panel-itinerary.wbp-on .wbp3 .lbx.lbx-itin .lbx-card {
  grid-area: card;
}
#panel-itinerary.wbp-on .wbp3 .lbx.lbx-itin .lbx-nav {
  width: 2.4rem;
  height: 2.4rem;
}
#panel-itinerary.wbp-on .wbp3 .lbx.lbx-itin .lbx-nav.is-prev {
  grid-area: prev;
}
#panel-itinerary.wbp-on .wbp3 .lbx.lbx-itin .lbx-nav.is-next {
  grid-area: next;
}

/* Stop editor (owner 2026-10-09): More (and what it opens) first, then one bottom row — Done · Change place … Remove. */
#panel-itinerary.wbp-on .wbp3 .wbx-edit-foot {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--wbx-line);
}
#panel-itinerary.wbp-on .wbp3 .wbx-edit-foot {
  gap: 0.35rem;
  min-width: 0;
}
#panel-itinerary.wbp-on .wbp3 .wbx-edit-foot .wbx-remove {
  margin-left: auto;
}
#panel-itinerary.wbp-on .wbp3 .wbx-edit-foot .wbx-done {
  min-height: 2.5rem;
  padding: 0 1rem;
}
#panel-itinerary.wbp-on .wbp3 .wbx-edit-foot .wbx-soft {
  min-width: 0;
  min-height: 2.5rem;
  padding: 0 0.7rem;
  white-space: nowrap;
}
#panel-itinerary.wbp-on .wbp3 .wbx-edit-foot .wbx-remove {
  flex: none;
  padding: 0 0.3rem;
}

/* Your access level on this trip, under your name in the header (owner 2026-10-09): "🍴 Foodie". */
#account-slot .auth-menu-label {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}
#account-slot .auth-role {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.85;
  white-space: nowrap;
}
#account-slot .auth-role svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* "In Japan · before your 12:15 PM flight from Manila": a soft note, wraps inside the card (never overflows). */
#panel-itinerary.wbp-on .wbp3 .wbx-tag.is-flightnote {
  display: inline-block;
  max-width: 100%;
  padding: 0.25rem 0.55rem;
  border-radius: 10px;
  background: #fbefd9;
  color: #8a5a12;
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Crew HQ faces: the crewmate's profile photo when they have one. */
.hq-face.has-photo {
  overflow: hidden;
  padding: 0;
  background: #e9e3d6;
}
.hq-face.has-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Explore cards (owner 2026-10-09: "labels too jam packed"): kind · source as one quiet line under the name;
   only LakBi's gold tag and the "Added · Day 3 · 7:30 PM" line stay at the bottom. */
#panel-itinerary.wbp-on .wbp3 .wbx-meta {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--wbx-muted);
}
#panel-itinerary.wbp-on .wbp3 .wbx-meta .wbx-tag {
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  font-weight: 500;
}
#panel-itinerary.wbp-on .wbp3 .wbx-meta .wbx-tag.is-food {
  color: var(--wbx-forest, #1f3d30);
  font-weight: 700;
}
#panel-itinerary.wbp-on .wbp3 .wbx-card .wbx-tags {
  margin-top: 0.4rem;
}
#panel-itinerary.wbp-on .wbp3 .wbx-card .wbx-tag.is-added {
  padding: 0;
  background: none;
  color: #2d5a7b;
  font-size: 0.78rem;
  font-weight: 700;
}

/* === Crew HQ as a page of the trip (owner 2026-10-09 redesign; mock https://claude.ai/artifact/7qXVHfBwj6mSeLyhu36KLw):
   the tabs stay, the other sheets step aside, the page scrolls with the trip. === */
html.hq-open,
html.hq-open body {
  overflow: visible;
}
html.hq-open #sheet > .panel:not(#crew-hq) {
  display: none !important;
}
.hq.panel {
  position: static;
  inset: auto;
  z-index: auto;
  display: block;
  background: transparent;
  animation: none;
}
.hq-page {
  max-width: 74rem;
  margin: 0 auto;
  padding: 2rem 0 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.hq-page.is-busy {
  opacity: 0.7;
}
.hq-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.hq-head h2 {
  margin: 0;
  font-family: var(--serif, "Playfair Display", Georgia, serif);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.05;
}
.hq-head p {
  margin: 0.35rem 0 0;
  color: var(--hq-muted);
  font-size: 0.95rem;
}
.hq-head .hq-notify {
  color: var(--hq-muted);
}
.hq-head .hq-notify select {
  min-height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--hq-line);
  border-radius: 10px;
  background: #fff;
  color: var(--hq-ink);
}
.hq-note {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--hq-line);
  border-radius: 20px;
  background: #fff;
}
.hq-note-mark {
  flex: none;
  margin-top: 0.15rem;
  color: #b58a3a;
}
.hq-note-text {
  flex: 1;
  min-width: 0;
}
.hq-note-text p {
  margin: 0;
  font-family: var(--serif, "Playfair Display", Georgia, serif);
  font-size: 1.3rem;
  line-height: 1.45;
}
.hq-note-text p.is-empty {
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--hq-muted);
}
.hq-note-text small {
  display: block;
  margin-top: 0.45rem;
  color: var(--hq-muted);
}
.hq-note-form {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
}
.hq-note-tools {
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* Opening note as a postcard (owner 2026-10-10, mock A) */
.hq-postcard {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.4rem 4rem 1.25rem 1.6rem;
  border: 1px solid #e9c47a;
  border-radius: 20px;
  background: #fbf1dc;
  color: #412402;
}
.hq-postcard.is-editing { grid-template-columns: minmax(0, 1fr); padding: 1.4rem 1.6rem 1.25rem; background: #fffaf0; }
/* Editing: the count on the left, Cancel + Save together on the right (owner 2026-10-10). */
.hq-postcard.is-editing .hq-note-tools { justify-content: flex-end; gap: 0.6rem; }
.hq-postcard.is-editing .hq-btn.is-ghost { border: 1px solid #e9c47a; background: #fff; color: #633806; }
.hq-postcard.is-editing .hq-btn.is-ghost:hover { background: #fbf1dc; }
.hq-postcard-kick {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a5a12;
}
.hq-postcard-text {
  margin: 0 0 0.85rem;
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.hq-postcard-text.is-empty { font-family: inherit; font-size: 1rem; color: #8a5a12; }
.hq-postcard-sign { display: flex; align-items: center; gap: 0.55rem; font-size: 0.88rem; color: #633806; }
.hq-stamp {
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  width: 6rem;
  min-height: 6.6rem;
  margin-top: 1.4rem;
  border: 2px dashed #ba7517;
  border-radius: 8px;
  color: #633806;
  text-align: center;
  transform: rotate(3deg);
}
.hq-stamp b { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.hq-stamp small { font-size: 0.72rem; }
.hq-postcard-edit { position: absolute; top: 0.85rem; right: 1rem; }
.hq-postcard textarea {
  width: 100%;
  min-height: 6rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid #e9c47a;
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
  color: #412402;
  resize: vertical;
}
.hq-starters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: #8a5a12; }
.hq-starter {
  min-height: 2rem;
  padding: 0 0.8rem;
  border: 1px solid #e9c47a;
  border-radius: 999px;
  background: #fff;
  color: #633806;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.hq-starter:hover { background: #fbf1dc; }
.hq-note-count { margin-right: auto; font-size: 0.82rem; color: #8a5a12; }
.hq-note-count.is-near { color: #b4401a; font-weight: 700; }
@media (max-width: 560px) {
  .hq-postcard { grid-template-columns: minmax(0, 1fr); }
  .hq-stamp { display: none; }
  .hq-postcard-text { font-size: 1.3rem; }
}
/* Announcements as banners (owner 2026-10-10, mock B) */
.hq-ann.hq-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border: 0;
  border-radius: 16px;
  background: #e6f4ee;
}
.hq-ann.hq-banner + .hq-ann.hq-banner { margin-top: 0.75rem; }
.hq-ann.hq-banner.is-pinned { border: 1px solid #5dcaa5; background: #def2e9; }
.hq-banner-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: #0f6e56;
  color: #e1f5ee;
}
.hq-banner-main { flex: 1; min-width: 0; }
.hq-banner-kick { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #0f6e56; }
.hq-ann .hq-banner-text {
  margin: 0.35rem 0 0.5rem;
  font-family: inherit;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.45;
  color: #04342c;
  overflow-wrap: anywhere;
}
.hq-banner-by { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: #085041; }
/* Poll card (owner 2026-10-10 poll mock): kind + when, the question, when it closes, round choices with ⓘ, who voted,
   the comment box. Results (bars, counts) only once you've voted or it closed. */
.hq-list > .hq-poll + .hq-poll { margin-top: 1rem; }
.hq-poll {
  padding: 1.15rem 1.25rem 1.1rem;
  border: 1px solid var(--hq-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(40, 30, 10, 0.05);
}
.hq-poll-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding-right: 2.25rem; font-size: 0.8rem; }
.hq-kind {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: #e6eef6;
  color: #0c447c;
  font-size: 0.74rem;
  font-weight: 700;
}
.hq-kind.is-place { background: #fbe6de; color: #993c1d; }
.hq-poll-for { color: var(--hq-muted); }
.hq-poll-more { position: absolute; top: 0.85rem; right: 0.9rem; }
.hq-more {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--hq-ink);
  cursor: pointer;
}
.hq-more:hover, .hq-more[aria-expanded="true"] { background: #f1eee6; }
.hq-menu {
  position: absolute;
  top: 2.3rem;
  right: 0;
  z-index: 5;
  min-width: 10rem;
  padding: 0.35rem;
  border: 1px solid var(--hq-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(40, 30, 10, 0.12);
}
.hq-menu button {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #a32d2d;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.hq-menu button:hover { background: #fcebeb; }
.hq-poll h4 {
  margin: 0.55rem 0 0.7rem;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.hq-poll-close {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  background: #f1f0ea;
  font-size: 0.82rem;
  color: var(--hq-ink);
}
.hq-poll-close.is-closed { color: var(--hq-muted); }
.hq-poll .hq-vote { min-height: 3.6rem; border-radius: 14px; }
.hq-poll .hq-vote-in { min-height: 3.6rem; gap: 0.85rem; }
.hq-vote-name { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.hq-vote-name b { font-weight: 700; overflow-wrap: anywhere; }
.hq-vote-name small { font-size: 0.76rem; color: #8a5a12; }
.hq-radio {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border: 2px solid #b9b4a6;
  border-radius: 50%;
  color: #fff;
}
.hq-radio.is-on { border-color: #b4401a; background: #b4401a; }
.hq-poll .hq-details {
  display: grid;
  place-items: center;
  width: 3.4rem;
  border-radius: 14px;
  color: var(--hq-ink);
}
a.hq-details { text-decoration: none; }
.hq-poll .hq-details:hover { border-color: var(--hq-forest); background: var(--hq-forest-soft, #e7f0ea); }
.hq-poll-who {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid #efece4;
}
.hq-poll-who .hq-faces { display: inline-flex; }
.hq-poll-who .hq-face + .hq-face { margin-left: -0.35rem; }
.hq-face.is-waiting { border: 1.5px dashed #b9b4a6; background: #fff !important; color: var(--hq-muted); font-size: 0.6rem; }
.hq-poll-who .hq-poll-foot { margin: 0; }
.hq-comments.is-inline { margin-top: 0.85rem; }
.hq-comments.is-inline .hq-comment-list li { display: flex; align-items: flex-start; gap: 0.45rem; }
.hq-comments.is-inline .hq-inline input {
  flex: 1;
  min-height: 2.6rem;
  padding: 0 0.9rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #f1f0ea;
}
.hq-send {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 0;
  border-radius: 12px;
  background: #e5e9e1;
  color: var(--hq-ink);
  cursor: pointer;
}
.hq-send:hover { background: var(--hq-forest); color: #fff; }
/* A closed poll folds to its Group's choice (owner 2026-10-10); "See how the vote went" opens it. */
.hq-fold-won {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
  padding: 0.85rem 1rem;
  border: 2px solid #2d6a4f;
  border-radius: 14px;
  background: #e7f3ec;
}
.hq-fold-won .hq-won-tag { flex-basis: 100%; }
.hq-fold-won b { font-size: 1.05rem; }
.hq-fold-won small { font-weight: 700; color: #2d6a4f; }
.hq-fold-won .hq-won-state { flex-basis: 100%; margin-top: 0.2rem; }
.hq-fold-foot { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.hq-poll-toggle {
  padding: 0;
  border: 0;
  background: none;
  color: var(--hq-forest);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.hq-poll-toggle:hover { text-decoration: underline; }
.hq-poll.is-folded h4 { margin-bottom: 0.75rem; }
/* A closed poll reads as finished (owner 2026-10-10): grey card, "Closed", the winner green with 🏆, the rest faded. */
.hq-poll.is-closed { background: #f7f6f1; }
.hq-kind.is-closed { background: #e4e2da; color: #44443f; }
.hq-poll .hq-vote.is-closed { cursor: default; }
.hq-poll .hq-vote.is-closed.is-won { border: 2px solid #2d6a4f; background: #e7f3ec; }
.hq-poll .hq-vote.is-closed.is-won .hq-vote-in { padding-top: 0.7rem; padding-bottom: 0.7rem; }
.hq-won-tag { margin-bottom: 0.15rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #2d6a4f; }
.hq-won-state { margin-top: 0.35rem; font-size: 0.82rem; }
.hq-won-state .hq-added { color: #2d6a4f; font-weight: 700; }
.hq-poll .hq-vote.is-closed.is-lost { border-color: #e6e2d6; background: #fff; }
.hq-poll .hq-vote.is-closed.is-won .hq-vote-n { min-width: 6.5rem; font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.hq-poll .hq-vote.is-closed.is-won .hq-vote-n { color: #2d6a4f; }

.hq-needs {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.hq-needs h3 {
  margin: 0;
  color: #b58a3a;
}
/* "Needs you" readable (owner 2026-10-10), its cards tinted like what they lead to: a vote (coral) / news (teal). */
.hq-needs .hq-needs-title {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7a4f0e;
}
.hq-need.is-vote { border-color: #f1c4b2; background: #fff6f1; }
.hq-need.is-vote .hq-kick { color: #b4401a; }
.hq-need.is-news { border-color: #9fdcc5; background: #e6f4ee; }
.hq-need.is-news .hq-kick { color: #0f6e56; }
.hq-needs .hq-need small { color: #4a5a50; }
.hq-needs-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}
.hq-need {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--hq-line);
  border-radius: 16px;
  background: #fff;
  color: var(--hq-ink);
  text-decoration: none;
}
.hq-need:hover {
  border-color: var(--hq-forest);
}
.hq-need .hq-kick {
  color: var(--hq-forest);
}
.hq-need b {
  font-size: 1rem;
  line-height: 1.35;
}
.hq-need small {
  color: var(--hq-muted);
}
.hq-page .hq-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.75rem;
  max-width: none;
  margin: 0;
  padding: 0;
}
.hq-page .hq-main {
  flex: 999 1 34rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.hq-page .hq-side {
  flex: 1 1 18rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.hq-page .hq-card {
  padding: 1.5rem 1.6rem;
  border-radius: 20px;
}
.hq-page .hq-card-head h3 {
  font-size: 1.55rem;
}
.hq-count {
  font-family: var(--sans, "DM Sans", sans-serif);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--hq-muted);
}
.hq-crew ul {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hq-crew li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.hq-crew .hq-face {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1rem;
}
.hq-crew-name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.hq-crew-name small {
  color: var(--hq-muted);
  font-size: 0.8rem;
}
.hq-crew .hq-title-form {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.hq-crew .hq-title-form input {
  flex: 1;
  min-width: 0;
}
.hq-pencil {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--hq-line);
  border-radius: 50%;
  background: #fff;
  color: var(--hq-forest);
  cursor: pointer;
}
.hq-pencil[aria-expanded="true"] {
  background: var(--hq-forest-soft);
}
.hq-activity ul {
  display: flex;
  flex-direction: column;
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
}
.hq-activity li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--hq-soft);
  font-size: 0.9rem;
}
.hq-activity li:last-child {
  border-bottom: 0;
}
.hq-activity li small {
  color: var(--hq-muted);
  font-size: 0.78rem;
}
.hq.panel .hq-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 1002;
}

/* Start a vote: a window over the page. */
.hqv-back {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(19, 37, 30, 0.45);
}
.hqv {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1001;
  transform: translate(-50%, -50%);
  width: min(44rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  color: var(--hq-ink);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.55);
}
.hqv-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 1.6rem 0.4rem;
}
.hqv-top h2 {
  margin: 0;
  font-family: var(--serif, "Playfair Display", Georgia, serif);
  font-size: 1.7rem;
}
.hqv-x {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--hq-line);
  border-radius: 50%;
  background: #fff;
  font-size: 1.2rem;
  cursor: pointer;
}
.hqv-body {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  padding: 0.6rem 1.6rem 1.5rem;
  overflow: auto;
}
.hqv-seg {
  display: inline-flex;
  align-self: flex-start;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: var(--hq-soft);
}
.hqv-seg button {
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--hq-ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.hqv-seg button.is-on {
  background: var(--hq-forest);
  color: #fbf6ec;
}
/* The vote's time (owner 2026-10-10): Start – End open the planner's picker. */
.hqv-range { display: flex; align-items: center; gap: 0.4rem; }
.hqv-range input { flex: 1; min-width: 0; }
.hqv-warn { margin: 0 0 0.75rem; padding: 0.55rem 0.75rem; border-radius: 10px; background: #fcebeb; color: #a32d2d; font-size: 0.85rem; font-weight: 600; }
.hqv-hold-hint { margin: -0.25rem 0 0.75rem; font-size: 0.76rem; color: var(--hq-muted, #6b6a63); }
.hqv-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.hqv-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.hqv-field > span {
  font-size: 0.88rem;
  font-weight: 700;
}
.hqv-field :is(input, select) {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.85rem;
  padding: 0 0.85rem;
  border: 1px solid var(--hq-line);
  border-radius: 12px;
  background: #fff;
  color: var(--hq-ink);
  font: inherit;
  font-size: 0.95rem;
}
.hqv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.hqv-head small {
  color: var(--hq-muted);
  font-weight: 500;
}
.hqv-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.hqv-pickchip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.35rem 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--hq-forest);
  color: #fbf6ec;
  font-size: 0.82rem;
  font-weight: 600;
}
.hqv-pickchip button {
  width: 1.4rem;
  height: 1.4rem;
  border: 0;
  border-radius: 50%;
  background: rgba(251, 246, 236, 0.18);
  color: inherit;
  cursor: pointer;
}
.hqv-browse {
  overflow: hidden;
  border: 1px solid var(--hq-line);
  border-radius: 16px;
}
.hqv-tools {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--hq-soft);
  background: var(--hq-ground);
}
.hqv-tools input[type="search"] {
  border-radius: 999px;
}
.hqv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.hqv-chip {
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--hq-line);
  border-radius: 999px;
  background: #fff;
  color: var(--hq-ink);
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
}
.hqv-chip.is-on {
  border-color: var(--hq-forest);
  background: var(--hq-forest);
  color: #fbf6ec;
  font-weight: 700;
}
.hqv-chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.hqv-rows {
  max-height: 14rem;
  overflow: auto;
}
.hqv-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
}
.hqv-row:hover,
.hqv-row.is-on {
  background: var(--hq-forest-soft);
}
.hqv-row input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--hq-forest);
}
.hqv-row span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hqv-row small {
  color: var(--hq-muted);
  font-size: 0.78rem;
}
.hqv-empty {
  padding: 1rem;
}
.hqv-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
  font-weight: 600;
}
.hqv-switch button {
  position: relative;
  width: 2.75rem;
  height: 1.6rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d9d2c3;
  cursor: pointer;
}
.hqv-switch button i {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: left 0.15s ease;
}
.hqv-switch button[aria-checked="true"] {
  background: var(--hq-forest);
}
.hqv-switch button[aria-checked="true"] i {
  left: 1.35rem;
}
.hqv-answer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hqv-answer input {
  flex: 1;
}
.hqv-answer button {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--hq-soft);
  font-size: 1.1rem;
  cursor: pointer;
}
.hqv-add {
  align-self: flex-start;
  padding: 0.55rem 1rem;
  border: 1px dashed #c9c0ad;
  border-radius: 999px;
  background: #fff;
  color: var(--hq-forest);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}
.hqv-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.6rem;
  border-top: 1px solid var(--hq-soft);
  background: var(--hq-ground);
}
.hqv-foot p {
  flex: 1;
  margin: 0;
  color: var(--hq-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}
@media (max-width: 47.99rem) {
  .hq-page {
    padding: 1.25rem 0 3rem;
  }
  .hqv-two {
    grid-template-columns: minmax(0, 1fr);
  }
  .hqv-foot {
    flex-direction: column;
    align-items: stretch;
  }
}

/* The day title never takes the column's spare height (owner 2026-10-09: a ~350 px gap under it on short days —
   .lmp-title's flex: 1 1 auto split the free height with the list). */
#panel-itinerary.wbp-on .wbp3 .wbp-side > .lmp-title {
  flex: none;
}

/* A departure that lands on a later day: "✈ Lands tomorrow in Tokyo · 6 PM" (planner + Day view). */
#panel-itinerary.wbp-on .wbp3 .wbx-tag.is-lands,
html.wb-new .nu-ag-lands {
  display: inline-block;
  max-width: 100%;
  padding: 0.2rem 0.55rem;
  border-radius: 10px;
  background: #e6eef6;
  color: #2d5a7b;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: normal;
}
html.wb-new .nu-ag-lands {
  margin-top: 0.35rem;
}

/* Food places + Saved places cards: the whole card opens its details window. */
html.wb-new #panel-food .nu-food-grid > .nu-food-card,
html.wb-new #panel-places .nu-food-grid > [data-plc-card] {
  cursor: pointer;
}

/* Explore cards: the area on every card, the why / note below it (one line each). */
#panel-itinerary.wbp-on .wbp3 .wbx-area {
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
  color: var(--wbx-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#panel-itinerary.wbp-on .wbp3 .wbx-card .wbx-why {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* A poll's remove (x) sits in its top-right corner — a long "Closes when everyone has voted" no longer pushes it
   onto a line of its own (owner 2026-10-09). */
.hq-poll {
  position: relative;
}
.hq-poll .hq-poll-meta {
  padding-right: 2rem;
}
.hq-poll .hq-poll-meta > .hq-x {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

/* A decided place vote: "✓ Added · Day 1 · 12:30 PM" (or the Add button when it's off the schedule). */
.hq-poll-foot .hq-added {
  margin-left: 0.35rem;
  color: #2d6a4f;
  font-weight: 700;
}
.hq-poll-foot .hq-btn {
  margin-left: 0.5rem;
}

/* A poll's closing line: its own left-aligned line under the day chip (it hung right-aligned when it wrapped). */
.hq-poll .hq-deadline {
  flex-basis: 100%;
  margin-left: 0;
}

/* Explore grouped by country → city (a Japan + Korea trip). */
#panel-itinerary.wbp-on .wbp3 .wbx-group {
  margin: 0.4rem 0 -0.1rem;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--wbx-ink, #2b2a26);
}
#panel-itinerary.wbp-on .wbp3 .wbx-subgroup {
  margin: 0.15rem 0 -0.2rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wbx-muted);
}
#panel-itinerary.wbp-on .wbp3 .wbx-group small,
#panel-itinerary.wbp-on .wbp3 .wbx-subgroup small {
  font-weight: 600;
  color: var(--wbx-muted);
}

/* Saved places: "Same place as Tirta Ganges Temple on Day 3?" — Yes / No (02s-places-same.js). */
.nu-food-card .plc-same {
  margin-top: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  background: #fbf3e2;
  border: 1px solid #ecdcb8;
}
.nu-food-card .plc-same p {
  margin: 0 0 0.3rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: #5b4a26;
}
.nu-food-card .plc-same div {
  display: flex;
  gap: 1rem;
}
.nu-food-card .plc-same .is-quiet {
  color: var(--muted, #6b6b6b);
}

/* Explore: a traveller's photo of the place instead of the type tile, + "★ 4.3 (3)" (owner 2026-10-10). */
#panel-itinerary.wbp-on .wbp3 .wbx-tile.is-photo {
  overflow: hidden;
  padding: 0;
  background: #e9e3d6;
}
#panel-itinerary.wbp-on .wbp3 .wbx-tile.is-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#panel-itinerary.wbp-on .wbp3 .wbx-rating {
  color: #8a5a00;
  font-weight: 700;
  white-space: nowrap;
}
#panel-itinerary.wbp-on .wbp3 .wbx-rating small {
  font-weight: 600;
  color: var(--wbx-muted);
}

/* Place peek (06l): a place's details over the Explore column — our photos + reviews, why, area, Add / map. */
#panel-itinerary.wbp-on .wbp3 section.wbx {
  position: relative;
}
#panel-itinerary.wbp-on .wbp3 .wbx-peek {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  background: rgba(31, 61, 48, 0.12);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}
#panel-itinerary.wbp-on .wbp3 .wbx-peek-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: 100%;
  padding: 1rem 1.1rem 1.1rem;
  overflow: auto;
  border-radius: 16px;
  background: #fffdf8;
  box-shadow: 0 18px 40px -22px rgba(19, 37, 30, 0.55);
}
#panel-itinerary.wbp-on .wbp3 .wbx-peek-x {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-size: 0.9rem;
  cursor: pointer;
}
#panel-itinerary.wbp-on .wbp3 .wbx-peek-card h3 {
  margin: 0;
  padding-right: 2.2rem;
  font-family: var(--font-display, inherit);
  font-size: 1.3rem;
  line-height: 1.2;
}
#panel-itinerary.wbp-on .wbp3 .wbx-peek-photos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 0.4rem;
  margin: -0.2rem -0.2rem 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
#panel-itinerary.wbp-on .wbp3 .wbx-peek-photos img {
  width: 100%;
  height: 9.5rem;
  border-radius: 12px;
  object-fit: cover;
  scroll-snap-align: start;
  cursor: zoom-in;
}
#panel-itinerary.wbp-on .wbp3 .wbx-peek-photos img:only-child {
  grid-column: 1 / -1;
}
#panel-itinerary.wbp-on .wbp3 .wbx-peek-photos:has(img:only-child) {
  grid-auto-columns: 100%;
}
#panel-itinerary.wbp-on .wbp3 .wbx-peek-credit,
#panel-itinerary.wbp-on .wbp3 .wbx-peek-quiet {
  margin: -0.2rem 0 0;
  font-size: 0.76rem;
  color: var(--wbx-muted);
}
#panel-itinerary.wbp-on .wbp3 .wbx-peek-line {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.35;
}
#panel-itinerary.wbp-on .wbp3 .wbx-peek-line.is-warn {
  color: #9a5b12;
}
#panel-itinerary.wbp-on .wbp3 .wbx-peek-why {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: #f4ecd9;
  font-size: 0.86rem;
  line-height: 1.4;
}
#panel-itinerary.wbp-on .wbp3 .wbx-peek-reviews {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-top: 0.5rem;
  border-top: 1px solid #ece4d3;
}
#panel-itinerary.wbp-on .wbp3 .wbx-peek-rating {
  margin: 0;
  font-size: 0.86rem;
}
#panel-itinerary.wbp-on .wbp3 .wbx-peek-rating b {
  color: #8a5a00;
}
#panel-itinerary.wbp-on .wbp3 .wbx-peek-review {
  padding: 0.45rem 0.6rem;
  border-radius: 10px;
  background: #f8f4ea;
}
#panel-itinerary.wbp-on .wbp3 .wbx-peek-review p {
  margin: 0.15rem 0;
  font-size: 0.84rem;
  line-height: 1.35;
}
#panel-itinerary.wbp-on .wbp3 .wbx-peek-review small {
  font-size: 0.74rem;
  color: var(--wbx-muted);
}
#panel-itinerary.wbp-on .wbp3 .wbx-peek-stars {
  color: #c48a12;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}
#panel-itinerary.wbp-on .wbp3 .wbx-peek-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding-top: 0.25rem;
}
#panel-itinerary.wbp-on .wbp3 .wbx-peek-actions .wbx-cf-go {
  flex: 1 1 100%;
}
#panel-itinerary.wbp-on .wbp3 .wbx-peek-actions .wbx-soft {
  flex: 1 1 auto;
  text-align: center;
  text-decoration: none;
}
#panel-itinerary.wbp-on .wbp3 .wbx-card {
  cursor: pointer;
}
#panel-itinerary.wbp-on .wbp3 .wbx-peek-review small {
  display: block;
  margin-top: 0.1rem;
}

/* The same review parts in the Places details window. */
.plw-reviews .wbx-peek-photos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 0.4rem;
  margin: -0.2rem -0.2rem 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.plw-reviews .wbx-peek-photos img {
  width: 100%;
  height: 9.5rem;
  border-radius: 12px;
  object-fit: cover;
  scroll-snap-align: start;
  cursor: zoom-in;
}
.plw-reviews .wbx-peek-photos img:only-child {
  grid-column: 1 / -1;
}
.plw-reviews .wbx-peek-photos:has(img:only-child) {
  grid-auto-columns: 100%;
}
.plw-reviews .wbx-peek-credit,
.plw-reviews .wbx-peek-quiet {
  margin: -0.2rem 0 0;
  font-size: 0.76rem;
  color: var(--wbx-muted, #6b6b6b);
}
.plw-reviews .wbx-peek-reviews {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-top: 0.5rem;
  border-top: 1px solid #ece4d3;
}
.plw-reviews .wbx-peek-rating {
  margin: 0;
  font-size: 0.86rem;
}
.plw-reviews .wbx-peek-rating b {
  color: #8a5a00;
}
.plw-reviews .wbx-peek-review {
  padding: 0.45rem 0.6rem;
  border-radius: 10px;
  background: #f8f4ea;
}
.plw-reviews .wbx-peek-review p {
  margin: 0.15rem 0;
  font-size: 0.84rem;
  line-height: 1.35;
}
.plw-reviews .wbx-peek-review small {
  font-size: 0.74rem;
  color: var(--wbx-muted, #6b6b6b);
}
.plw-reviews .wbx-peek-stars {
  color: #c48a12;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}
.plw-reviews .wbx-peek-review small {
  display: block;
  margin-top: 0.1rem;
}
.plw-reviews {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.35rem 0;
}

/* An address typed with no pick: "· not on the map yet" next to it (audit 2026-10-10). */
.plc-offmap {
  color: #9a5b12;
  font-weight: 600;
  white-space: nowrap;
}

/* "⚠ Check place" — a place matched by its name with no clear match (owner 2026-10-10). */
.place-check {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  width: fit-content;
  margin: 0.15rem 0;
  padding: 0.18rem 0.55rem;
  border: 1px solid #e8c98a;
  border-radius: 999px;
  background: #fff4dc;
  color: #8a5300;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}
.place-check:hover {
  background: #ffecc2;
}
.place-check.is-static {
  cursor: default;
}
#panel-itinerary.wbp-on .wbp3 .wbx-tag.is-check {
  color: #8a5300;
  font-weight: 700;
}

/* Save a place: what we already have about the picked place (owner 2026-10-10). */
.plc-add-photo {
  position: relative;
  margin: -0.2rem 0 0.75rem;
  overflow: hidden;
  border-radius: 14px;
}
.plc-add-photo img {
  display: block;
  width: 100%;
  height: 10rem;
  object-fit: cover;
}
/* the photo's label under it, never over it (owner 2026-10-26: the "not an official photo yet" words covered it) */
.plc-add-photo {
  overflow: visible;
}
.plc-add-photo img {
  border-radius: 14px;
}
.plc-add-photo span {
  display: block;
  margin-top: 0.35rem;
  color: #6b604f;
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.4;
}
.plc-add-reviews {
  margin: 0.5rem 0 0.25rem;
}
.plc-add-reviews p {
  margin: 0 0 0.35rem;
  font-size: 0.86rem;
}
.plc-add-reviews b {
  color: #8a5a00;
}

/* Saved place card: ★ (and LakBi's ×) in the top-right corner, like the Food card. */
.plc-media .plc-over-end {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  margin-left: auto;
}

/* Day view: shared/day-view.css (web + app). */

/* ——— Planner: "Your places · 41 saved" folds into a slim bar; the map widens (owner 2026-10-10, 06n) ——— */
#panel-itinerary.wbp-on .wbp3 .wbx-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-count { font-family: var(--sans, "DM Sans", system-ui, sans-serif); font-size: 0.85rem; font-weight: 600; color: var(--wbx-muted); }
#panel-itinerary.wbp-on .wbp3 .wbx-collapse {
  flex: 0 0 auto; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
  border: 1px solid var(--wbx-line); border-radius: 999px; background: #fff; color: var(--wbx-ink); cursor: pointer;
}
#panel-itinerary.wbp-on .wbp3 .wbx-collapse:hover { background: var(--wbx-forest-soft); }
#panel-itinerary.wbp-on .wbp3 .wbx-collapse:focus-visible { outline: 2px solid var(--wbx-forest); outline-offset: 2px; }
#panel-itinerary.wbp-on > .wbp.wbp3.is-places-shut { --wbx-w: 3.25rem; }
#panel-itinerary.wbp-on .wbp3.is-places-shut > .wbx > :not(.wbx-head),
#panel-itinerary.wbp-on .wbp3.is-places-shut .wbx-head > :not(.wbx-titlebar) { display: none; }
#panel-itinerary.wbp-on .wbp3.is-places-shut .wbx-head { padding: 0.75rem 0.4rem; height: 100%; }
#panel-itinerary.wbp-on .wbp3.is-places-shut .wbx-titlebar { flex-direction: column-reverse; justify-content: flex-end; height: 100%; gap: 0.9rem; }
#panel-itinerary.wbp-on .wbp3.is-places-shut .wbx-head h2 { writing-mode: vertical-rl; font-size: 1.05rem; white-space: nowrap; }
#panel-itinerary.wbp-on .wbp3.is-places-shut .wbx-collapse svg { transform: rotate(180deg); }
@media (max-width: 63.99rem) {
  /* Two columns: Your places sits over the map — shut, only its title row stays and the map grows. */
  #panel-itinerary.wbp-on > .wbp.wbp3.is-places-shut { grid-template-rows: auto minmax(0, 1fr); }
  #panel-itinerary.wbp-on .wbp3.is-places-shut .wbx-head { height: auto; padding: 0.5rem 1.1rem; }
  #panel-itinerary.wbp-on .wbp3.is-places-shut .wbx-titlebar { flex-direction: row; height: auto; justify-content: space-between; }
  #panel-itinerary.wbp-on .wbp3.is-places-shut .wbx-head h2 { writing-mode: horizontal-tb; }
  #panel-itinerary.wbp-on .wbp3.is-places-shut .wbx-collapse svg { transform: rotate(-90deg); }
  #panel-itinerary.wbp-on .wbp3:not(.is-places-shut) .wbx-collapse svg { transform: rotate(90deg); }
}

/* The day column's heading = the day view's (kicker · "Saturday in Osaka" · summary). */
#panel-itinerary.wbp-on .wbp3 .wbx-daytitle .dv-kicker { flex-basis: 100%; margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wbx-gold); }
#panel-itinerary.wbp-on .wbp3 .wbx-daytitle .dv-title { font-family: var(--serif, "Playfair Display", Georgia, serif); font-size: 1.35rem; font-weight: 600; }

/* ——— Itinerary day view, wide screens (owner 2026-10-10, mock "Day view mock"): the days as cards across the top,
   then the day's heading with Day / Timeline / Whole trip + Share day on its right (06-render-agenda topDay). ——— */
html.wb-new .nu-days.is-top {
  position: static;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(8.5rem, 11.5rem);
  gap: 0.6rem;
  overflow-x: auto;
  margin: 0 0 1.4rem;
  padding: 0 0 0.25rem;
  scrollbar-width: thin;
}
html.wb-new .nu-days.is-top .nu-day {
  flex-direction: column;
  gap: 0.15rem;
  min-height: 0;
  padding: 0.65rem 0.75rem 0.7rem;
  border: 1px solid #e6dcc8;
  border-radius: 14px;
  background: #fffdf8;
  color: var(--ink);
}
html.wb-new .nu-days.is-top .nu-day:hover { border-color: #cdbf9f; background: #fffdf8; }
html.wb-new .nu-days.is-top .nu-day-num { flex: none; font-size: 1.4rem; font-weight: 700; color: var(--ink); }
html.wb-new .nu-days.is-top .nu-day-copy b { font-size: 0.78rem; }
html.wb-new .nu-days.is-top .nu-day-copy small { font-size: 0.7rem; color: #6b6a62; }
html.wb-new .nu-days.is-top .nu-day.is-on { background: #1f3d30; border-color: #1f3d30; color: #fff; }
html.wb-new .nu-days.is-top .nu-day.is-on :is(.nu-day-num, .nu-day-copy b) { color: #fff; }
html.wb-new .nu-days.is-top .nu-day.is-on .nu-day-copy small { color: #cfe0d6; }
html.wb-new .nu-days.is-top .nu-day.is-on .nu-pill.is-today { background: #f3c64f; color: #1f3d30; }
html.wb-new #panel-itinerary > .panel-head.is-dayview { align-items: flex-end; margin-bottom: 0.4rem; }
html.wb-new #panel-itinerary > .panel-head.is-dayview .dv-head { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
html.wb-new #panel-itinerary > .panel-head.is-dayview .dv-kicker { margin: 0; }
html.wb-new #panel-itinerary > .panel-head.is-dayview .dv-title { margin: 0; font-family: var(--serif); font-size: clamp(1.9rem, 3.2vw, 2.75rem); line-height: 1.05; font-weight: 700; color: #1f3d30; }
html.wb-new #panel-itinerary > .panel-head.is-dayview .dv-summary { margin: 0; font-size: 0.9rem; color: #55544c; }
html.wb-new #panel-itinerary > .panel-head.is-dayview .exp-toolbar { order: 3; }
/* The days are on top now: the plan takes the full width, and the day's own heading isn't said twice. */
html.wb-new .nu-itin.is-dayview,
html.wb-new .nu-itin.is-dayview:not(.is-wide) { grid-template-columns: minmax(0, 1fr); }
/* The strip keeps its own height (a stretched panel row made the cards tall — owner 2026-10-10), every card the
   same height as the tallest one's content, a quiet scrollbar. */
html.wb-new .nu-days.is-top {
  align-self: start;
  align-content: start;
  align-items: stretch;
  height: auto;
  min-height: 0;
  max-height: none;
  scrollbar-width: thin;
  scrollbar-color: #d8ccb2 transparent;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 0.25rem;
}
html.wb-new .nu-days.is-top::-webkit-scrollbar { height: 6px; }
html.wb-new .nu-days.is-top::-webkit-scrollbar-track { background: transparent; }
html.wb-new .nu-days.is-top::-webkit-scrollbar-thumb { background: #d8ccb2; border-radius: 999px; }
html.wb-new .nu-days.is-top .nu-day { height: auto; scroll-snap-align: start; justify-content: flex-start; }
html.wb-new .nu-days.is-top .nu-day-copy { flex: 0 0 auto; }
html.wb-new .nu-days.is-top .nu-day-copy b { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
html.wb-new .nu-days.is-top .nu-pill { flex: none; }
html.wb-new .nu-days.is-top .nu-faces { display: none; }
/* Every card the same fixed width — the old list's one-column template stretched Day 1 (owner 2026-10-10). */
html.wb-new .nu-days.is-top { grid-template-columns: none; grid-auto-columns: 11rem; justify-content: start; }
/* The ✈ sits in the card's top-right corner — beside "Today" it got cut off at the edge (owner 2026-10-10). */
html.wb-new .nu-days.is-top .nu-day { position: relative; }
html.wb-new .nu-days.is-top .nu-pill.is-fly { position: absolute; top: 0.6rem; right: 0.6rem; margin: 0; }
html.wb-new .nu-days.is-top .nu-day.is-on .nu-pill.is-fly { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* ——— Long trips (owner 2026-10-10): "Day 2 of 15" · Today · ‹ › over the cards, the trip bar under them ——— */
html.wb-new .dv-strip { margin: 0 0 1.5rem; }
html.wb-new .dv-strip-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.6rem; }
html.wb-new .dv-strip-head b { font-size: 0.85rem; color: var(--ink); }
html.wb-new .dv-strip-nav { display: flex; align-items: center; gap: 0.4rem; }
html.wb-new .dv-strip-nav > button {
  display: grid; place-items: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.85rem;
  border: 1px solid #e6dcc8; border-radius: 10px; background: #fffdf8; color: var(--ink);
  font-family: inherit; font-size: 0.82rem; font-weight: 600; line-height: 1; cursor: pointer;
}
html.wb-new .dv-strip-nav .dv-strip-arrow { padding: 0; font-size: 1.15rem; }
html.wb-new .dv-strip-nav > button:hover { border-color: #cdbf9f; }
html.wb-new .dv-strip-nav .dv-strip-today { background: #f3c64f; border-color: #e0a91f; color: #1f3d30; }
html.wb-new .dv-strip-nav .dv-strip-today.is-on { background: #fff5d6; border-color: #e6d29a; }
html.wb-new .dv-strip-nav > button:focus-visible { outline: 2px solid #1f3d30; outline-offset: 2px; }
html.wb-new .dv-strip .nu-days.is-top { margin: 0; padding: 0; scrollbar-width: none; scroll-behavior: smooth; }
html.wb-new .dv-strip .nu-days.is-top::-webkit-scrollbar { display: none; }
html.wb-new .dv-tripbar { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.75rem; }
html.wb-new .dv-tripbar small { flex: none; font-size: 0.72rem; color: #6b6a62; }
html.wb-new .dv-segs { flex: 1; display: flex; gap: 3px; min-width: 0; }
html.wb-new .dv-seg { flex: 1; min-width: 0; height: 6px; padding: 0; border: 0; border-radius: 999px; background: #d6d9cf; cursor: pointer; position: relative; }
html.wb-new .dv-seg::before { content: ""; position: absolute; inset: -9px 0; } /* a 24px target round the 6px bar (W-71 2026-10-20) */
html.wb-new .dv-seg.is-gone { background: #1f3d30; }
html.wb-new .dv-seg.is-on { background: #e0a91f; }
html.wb-new .dv-seg:hover { filter: brightness(0.9); }
html.wb-new .dv-seg:focus-visible { outline: 2px solid #1f3d30; outline-offset: 3px; }

/* The day's heading row: title left; Day / Timeline / Whole trip · Colours · Share day as one group on the right,
   one height, level with the title's foot (owner 2026-10-10: "alignment and spacing"). */
html.wb-new #panel-itinerary > .panel-head.is-dayview { align-items: flex-end; column-gap: 0.5rem; margin-bottom: 1.25rem; }
html.wb-new #panel-itinerary > .panel-head.is-dayview .dv-head { order: 1; margin-right: auto; }
html.wb-new #panel-itinerary > .panel-head.is-dayview .nu-itin-tools { order: 2; margin-left: 0; gap: 0.5rem; }
html.wb-new #panel-itinerary > .panel-head.is-dayview .exp-toolbar { order: 3; margin-left: 0; }
html.wb-new #panel-itinerary > .panel-head.is-dayview :is(.nu-legend > .nu-btn, .exp-toolbar > button, .exp-toolbar .nu-btn) { height: 2.6rem; margin: 0; }
html.wb-new #panel-itinerary > .panel-head.is-dayview .nu-views { height: 2.6rem; box-sizing: border-box; align-items: stretch; }

/* Place peek: its parts never squash — a tall peek scrolls instead (the Google Maps link got cut — owner 2026-10-10). */
#panel-itinerary.wbp-on .wbp3 .wbx-peek-card > * { flex-shrink: 0; }
#panel-itinerary.wbp-on .wbp3 .wbx-peek-actions .wbx-soft {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.6rem; padding: 0.5rem 1rem; box-sizing: border-box; line-height: 1.2;
}

/* Day view: the page's tools in the strip's top row, one height with Today / ‹ › (owner 2026-10-10). */
html.wb-new #panel-itinerary > .panel-head.is-dayview .exp-toolbar:not(:has(:not([hidden]))) { display: none; }

/* Wide day view heading (owner 2026-10-10 reference): title + line on the left, Day / Timeline / Whole trip + Share
   day on its right — all inside the timeline's column, the map column beside it. */
html.wb-new #panel-itinerary > .panel-head.is-dayview { margin: 0; min-height: 0; }
html.wb-new #panel-itinerary > .panel-head.is-dayview:not(:has(.exp-toolbar > :not([hidden]))) { display: none; }
html.wb-new .dv-headrow { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; }
html.wb-new .dv-headwords { min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
html.wb-new .dv-headwords .dv-title { margin: 0; font-family: var(--serif); font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.08; font-weight: 700; color: #1f3d30; }
html.wb-new .dv-headwords .dv-summary { margin: 0; font-size: 0.88rem; color: #55544c; }
html.wb-new .dv-headtools { display: flex; align-items: center; gap: 0.5rem; flex: none; }
html.wb-new .dv-headtools .nu-itin-tools { margin: 0; gap: 0.5rem; }
html.wb-new .dv-headtools .nu-views { margin: 0; }
html.wb-new .dv-headtools .nu-views button { min-height: 2.1rem; }
html.wb-new .dv-headtools :is(.nu-legend > .nu-btn, .ss-day-btn) { height: 2.5rem; margin: 0; display: inline-flex; align-items: center; }
html.wb-new .dv-headtools .nu-legend-pop { z-index: 20; }
html.wb-new .nu-itin.is-dayview .agenda-head { margin-bottom: 0.75rem; }
html.wb-new .dv-headtools .nu-legend { display: none; } /* not in the reference — the stop cards already carry their type */

/* Trip detail after the start (owner 2026-10-10): locked fields say why. */
.detail-lock-tag { display: inline-flex; align-items: center; margin-left: 0.6rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: #f5ecd3; color: #7a5c1c; font: 700 0.72rem/1.4 var(--sans, "DM Sans", system-ui, sans-serif); letter-spacing: 0.02em; vertical-align: middle; cursor: help; }
.detail-limit { display: block; margin-top: 0.3rem; font-size: 0.75rem; color: #7a5c1c; }
.detail-stop input:disabled { cursor: not-allowed; opacity: 0.7; }

/* ——— Planner (owner 2026-10-10, the tester's planner): Your places in two parts, day badges, the add buttons ——— */
#panel-itinerary.wbp-on .wbp3 .wbx-section { margin: 1rem 0 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--wbx-line); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wbx-muted); }
#panel-itinerary.wbp-on .wbp3 .wbx-section:first-child { margin-top: 0.25rem; padding-top: 0; border-top: 0; }
#panel-itinerary.wbp-on .wbp3 .wbx-section small { margin-left: 0.25rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--wbx-forest-soft); color: var(--wbx-forest); font-size: 0.72rem; letter-spacing: 0; }
#panel-itinerary.wbp-on .wbp3 .wbx-daybadges { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.2rem 0 0.1rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-daybadge { padding: 0.08rem 0.5rem; border-radius: 999px; background: var(--wbx-forest); color: #fff; font-size: 0.68rem; font-weight: 700; }
#panel-itinerary.wbp-on .wbp3 .wbx-addrow { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0.25rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-addbtn {
  flex: 1 1 10rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 2.75rem; padding: 0.5rem 1rem;
  border: 1.5px dashed #b9ae95; border-radius: 12px; background: #fffdf8; color: var(--wbx-ink); font: 600 0.88rem/1.2 var(--sans, "DM Sans", system-ui, sans-serif); cursor: pointer;
}
#panel-itinerary.wbp-on .wbp3 .wbx-addbtn:hover { border-color: var(--wbx-forest); background: var(--wbx-forest-soft); }
#panel-itinerary.wbp-on .wbp3 .wbx-addbtn.is-lakbi { border: 1px solid var(--wbx-gold-line); border-style: solid; background: var(--wbx-gold-soft); color: var(--wbx-gold); }
#panel-itinerary.wbp-on .wbp3 .wbx-addbtn.is-lakbi:hover { background: #efe0b8; }
#panel-itinerary.wbp-on .wbp3 .wbx-addbtn:focus-visible { outline: 2px solid var(--wbx-forest); outline-offset: 2px; }
/* "Your places · 2 saved" on one line (it wrapped in a narrow column). */
#panel-itinerary.wbp-on .wbp3 .wbx-titlebar h2 { min-width: 0; font-size: 1.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Heading row: always title | tools (owner 2026-10-10: "why is the position not consistent" — it wrapped when the
   summary was long). The title takes the room left and wraps inside its column; the tools never move below. */
html.wb-new .dv-headrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.5rem 1rem; }
html.wb-new .dv-headwords .dv-title { overflow-wrap: anywhere; }
@media (max-width: 47.99rem) {
  html.wb-new .dv-headrow { grid-template-columns: minmax(0, 1fr); }
}

/* ——— Planner stop cards = the day view's (owner 2026-10-10: "why do we still have the old design?") ———
   kind label in the stop's colour, title, time · duration, 📍 place, the note as a quiet 📝 line; a coloured
   left edge like the day's cards; no picture tile. */
#panel-itinerary.wbp-on .wbp3 .wbx-stopcard { border-left: 3px solid var(--wbp-c, #2f6a4f); }
#panel-itinerary.wbp-on .wbp3 .wbx-kind { margin: 0 0 0.15rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wbp-c, #2f6a4f); }
#panel-itinerary.wbp-on .wbp3 .wbx-stop .lmp-main { margin-bottom: 0.2rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop .lmp-main strong { font-size: 1rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop .wbx-lines { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop .wbx-time { font-size: 0.82rem; color: #55544c; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop .wbx-time svg { display: none; }
#panel-itinerary.wbp-on .wbp3 .wbx-where-line { overflow: hidden; font-size: 0.78rem; color: #6b6a62; white-space: nowrap; text-overflow: ellipsis; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop .wbx-note { padding: 0; border: 0; background: none; font-size: 0.78rem; color: #6b6a62; text-align: left; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop .wbx-note svg { width: 0.85rem; height: 0.85rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop .wbx-note:not(.has-note) span { color: #8a8478; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop .wbx-note:hover span { text-decoration: underline; }
/* Compact: time · place on one line (cut with …), a little less padding. */
#panel-itinerary.wbp-on .wbp3 .wbx-stopcard { padding: 0.65rem 0.85rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop .wbx-time { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop .wbx-time .wbx-where-line { display: inline; color: #6b6a62; }

/* ——— Planner, the mock's time column + compact "Already planned" (owner 2026-10-10) ——— */
#panel-itinerary.wbp-on .wbp3 .wbx-stop { grid-template-columns: 3.1rem 1.65rem minmax(0, 1fr) auto; }
#panel-itinerary.wbp-on .wbp3 .wbx-freerow { grid-template-columns: 3.1rem 1.65rem minmax(0, 1fr); }
#panel-itinerary.wbp-on .wbp3 .wbx-line::before { left: calc(3.1rem + 0.7rem + 0.8rem); }
#panel-itinerary.wbp-on .wbp3 .wbx-when { padding-top: 0.95rem; font-size: 0.8rem; font-weight: 700; line-height: 1.15; text-align: right; color: var(--wbx-ink); }
#panel-itinerary.wbp-on .wbp3 .wbx-when .wbx-ap { display: block; font-size: 0.66rem; font-weight: 600; color: #8a6a1f; }
#panel-itinerary.wbp-on .wbp3 .wbx-when.is-free { padding-top: 0; font-weight: 600; color: #8a8478; }
#panel-itinerary.wbp-on .wbp3 .wbx-when.is-free .wbx-ap { color: #a39d90; }
#panel-itinerary.wbp-on .wbp3 .wbx-planned { display: flex; flex-direction: column; gap: 0.4rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-prow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; padding: 0.5rem 0.65rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-prow .wbx-tile { width: 2.25rem; height: 2.25rem; font-size: 1.05rem; border-radius: 9px; }
#panel-itinerary.wbp-on .wbp3 .wbx-prow-body { min-width: 0; display: flex; flex-direction: column; }
#panel-itinerary.wbp-on .wbp3 .wbx-prow-body .wbx-card-name { overflow: hidden; font-size: 0.9rem; text-align: left; /* two lines before the … (W-18 2026-10-20) */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
#panel-itinerary.wbp-on .wbp3 .wbx-prow-body small { overflow: hidden; font-size: 0.74rem; color: #6b6a62; white-space: nowrap; text-overflow: ellipsis; }
#panel-itinerary.wbp-on .wbp3 .wbx-prow .wbx-daybadges { margin: 0; flex-wrap: nowrap; }

/* ——— Planner top bar (owner 2026-10-10, approved Planner mock; 06p): full width over the three columns —
   ‹ back, the trip "· editing", unsaved count + Undo · Save (or ✓ All saved + Done); then the day strip with
   Today ‹ ›. The bar is the trip's theme colour (--wbp-theme). ——— */
#panel-itinerary.wbp-on { display: flex; flex-direction: column; }
#panel-itinerary.wbp-on > .wbp { height: auto; flex: 1 1 auto; min-height: 0; }
#panel-itinerary.wbp-on > .wbp-top { flex: none; --wbp-theme: #1f3d30; }
#panel-itinerary.wbp-on .wbp-topbar { display: flex; align-items: center; gap: 14px; padding: 12px 22px; background: var(--wbp-theme); color: #f4efe4; }
#panel-itinerary.wbp-on .wbp-back { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: 0; border-radius: 12px; background: rgba(244, 239, 228, 0.12); color: #f4efe4; cursor: pointer; }
#panel-itinerary.wbp-on .wbp-back:hover { background: rgba(244, 239, 228, 0.2); }
#panel-itinerary.wbp-on .wbp-toptrip { min-width: 0; }
#panel-itinerary.wbp-on .wbp-toptrip h1 { margin: 0; overflow: hidden; font-family: var(--serif, "Playfair Display", Georgia, serif); font-size: 1.45rem; font-weight: 700; line-height: 1.15; white-space: nowrap; text-overflow: ellipsis; color: #fff; }
#panel-itinerary.wbp-on .wbp-toptrip span { font-size: 0.8rem; color: rgba(244, 239, 228, 0.78); }
#panel-itinerary.wbp-on .wbp-topactions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#panel-itinerary.wbp-on .wbp-unsaved { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(243, 198, 79, 0.2); color: #f3c64f; font-size: 0.8rem; font-weight: 700; }
#panel-itinerary.wbp-on .wbp-unsaved i { width: 8px; height: 8px; border-radius: 50%; background: #f3c64f; }
#panel-itinerary.wbp-on .wbp-saved { font-size: 0.82rem; color: rgba(244, 239, 228, 0.82); }
#panel-itinerary.wbp-on .wbp-topactions :is(.lmp-undo, .lmp-done, .lmp-save) { height: 42px; padding: 0 18px; border-radius: 12px; font: 700 0.88rem/1 var(--sans, "DM Sans", system-ui, sans-serif); cursor: pointer; }
#panel-itinerary.wbp-on .wbp-topactions .lmp-undo { border: 1px solid rgba(244, 239, 228, 0.35); background: transparent; color: #f4efe4; }
#panel-itinerary.wbp-on .wbp-topactions :is(.lmp-save, .lmp-done) { border: 0; background: #f3c64f; color: #1f3d30; font-weight: 800; }
#panel-itinerary.wbp-on .wbp-topactions :is(.lmp-undo, .lmp-save, .lmp-done):focus-visible,
#panel-itinerary.wbp-on .wbp-back:focus-visible { outline: 2px solid #f3c64f; outline-offset: 2px; }
#panel-itinerary.wbp-on .wbp-stripbar { display: flex; align-items: center; gap: 10px; padding: 8px 22px; background: #fff; border-bottom: 1px solid #e6dcc8; }
#panel-itinerary.wbp-on .wbp-stripbar .lmp-days { flex: 1; min-width: 0; margin: 0; padding: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; border: 0; }
#panel-itinerary.wbp-on .wbp-stripbar .lmp-days::-webkit-scrollbar { display: none; }
#panel-itinerary.wbp-on .wbp-stripbar .lmp-day { flex: none; width: 52px; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1px solid #e6dcc8; border-radius: 12px; background: #fff; color: #1b2a23; cursor: pointer; }
#panel-itinerary.wbp-on .wbp-stripbar .lmp-day small { font-size: 0.72rem; font-weight: 600; color: inherit; }
#panel-itinerary.wbp-on .wbp-stripbar .lmp-day b { font-family: var(--serif, "Playfair Display", Georgia, serif); font-size: 1.15rem; font-weight: 700; line-height: 1; }
#panel-itinerary.wbp-on .wbp-stripbar .lmp-day.is-on { border-color: var(--wbp-theme); background: var(--wbp-theme); color: #fff; }
#panel-itinerary.wbp-on .wbp-stripbar .lmp-day-all { width: auto; padding: 0 14px; }
#panel-itinerary.wbp-on .wbp-stripbar .lmp-day-all small { font-size: 0.8rem; font-weight: 700; }
#panel-itinerary.wbp-on .wbp-stripbar .lmp-day-all b { display: none; }
#panel-itinerary.wbp-on .wbp-stripnav { flex: none; display: flex; align-items: center; gap: 6px; padding-left: 10px; border-left: 1px solid #e6dcc8; }
#panel-itinerary.wbp-on .wbp-stripnav button { height: 38px; min-width: 38px; padding: 0 10px; border: 1px solid #e6dcc8; border-radius: 10px; background: #fff; color: #1b2a23; font: 700 0.82rem/1 var(--sans, "DM Sans", system-ui, sans-serif); cursor: pointer; }
#panel-itinerary.wbp-on .wbp-stripnav .wbp-arrow { padding: 0; font-size: 1.1rem; }
#panel-itinerary.wbp-on .wbp-stripnav .wbp-today { border-color: #e0a91f; background: #f3c64f; color: #1f3d30; }

/* Planner day heading + cards (approved mock, step 2) */
#panel-itinerary.wbp-on .wbp3 .wbx-daytitle { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; padding: 1.1rem 1.25rem 0.9rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-daytitle .dv-title { font-family: var(--serif, "Playfair Display", Georgia, serif); font-size: 1.6rem; font-weight: 700; line-height: 1.15; color: #1f3d30; }
#panel-itinerary.wbp-on .wbp3 .wbx-daytitle > small { display: flex; flex-direction: column; gap: 0.5rem; font-size: inherit; color: inherit; }
#panel-itinerary.wbp-on .wbp3 .wbx-pills { display: flex; flex-wrap: wrap; gap: 6px; }
#panel-itinerary.wbp-on .wbp3 .wbx-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: #f1eadb; color: #44544a; font-size: 0.78rem; font-weight: 600; }
#panel-itinerary.wbp-on .wbp3 .wbx-stayline { display: flex; align-items: center; gap: 7px; font-size: 0.85rem; color: #55544c; }
#panel-itinerary.wbp-on .wbp3 .wbx-stayline b { color: #1b2a23; }
#panel-itinerary.wbp-on .wbp3 .wbx-addstay { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: var(--wbp-theme-ink, #1f3d30); font: 700 0.85rem/1.3 var(--sans, "DM Sans", system-ui, sans-serif); cursor: pointer; }
#panel-itinerary.wbp-on .wbp3 .wbx-addstay:hover { text-decoration: underline; }
#panel-itinerary.wbp-on .wbp3 .wbx-kind { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#panel-itinerary.wbp-on .wbp3 .wbx-flybadge { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; background: #e3eef8; color: #1e4f78; font-size: 0.68rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop .wbx-time { white-space: normal; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop .wbx-where-line { display: block; overflow: hidden; font-size: 0.8rem; color: #55544c; white-space: nowrap; text-overflow: ellipsis; }

/* Your places (approved Planner mock, step 3): head pills, one chip row with ›, the stay, compact rows, folded planned */
#panel-itinerary.wbp-on .wbp3 .wbx-head h2 { font-size: 1.6rem; font-weight: 700; color: #1f3d30; }
#panel-itinerary.wbp-on .wbp3 .wbx-headpills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -0.2rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-headpills:empty { display: none; }
#panel-itinerary.wbp-on .wbp3 .wbx-headpills .wbx-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: #f1eadb; color: #44544a; font-size: 0.78rem; font-weight: 600; }
#panel-itinerary.wbp-on .wbp3 .wbx-chipwrap { position: relative; }
#panel-itinerary.wbp-on .wbp3 .wbx-chipwrap .wbx-chips { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-right: 2.75rem; scrollbar-width: none; scroll-behavior: smooth; }
#panel-itinerary.wbp-on .wbp3 .wbx-chipwrap .wbx-chips::-webkit-scrollbar { display: none; }
#panel-itinerary.wbp-on .wbp3 .wbx-chipwrap .wbx-chip { flex: none; white-space: nowrap; }
#panel-itinerary.wbp-on .wbp3 .wbx-chipwrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 4.5rem; background: linear-gradient(to right, rgba(251, 246, 236, 0), var(--wbx-ground, #fbf6ec) 55%); pointer-events: none; }
#panel-itinerary.wbp-on .wbp3 .wbx-chipmore { position: absolute; top: 50%; right: 0; z-index: 1; width: 2rem; height: 2rem; transform: translateY(-50%); border: 1px solid var(--wbx-line, #e6dcc8); border-radius: 50%; background: #fff; color: #1b2a23; font-size: 1rem; line-height: 1; cursor: pointer; }
#panel-itinerary.wbp-on .wbp3 .wbx-section { margin: 1rem 0 0.45rem; padding: 0; border: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #44544a; }
#panel-itinerary.wbp-on .wbp3 .wbx-stay { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; width: 100%; padding: 0.55rem 0.6rem 0.55rem 0.7rem; border: 1px solid #e3d3ef; border-radius: 14px; background: #faf5fc; text-align: left; font: inherit; color: #1b2a23; }
#panel-itinerary.wbp-on .wbp3 .wbx-stay .wbx-tile { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; border-radius: 10px; background: #f0e1f5; }
#panel-itinerary.wbp-on .wbp3 .wbx-stay.is-missing { border: 1.5px dashed #d8ccb2; background: #fffdf8; cursor: pointer; }
#panel-itinerary.wbp-on .wbp3 .wbx-stay.is-missing .wbx-tile { background: #f1eadb; }
#panel-itinerary.wbp-on .wbp3 .wbx-stay b { display: block; overflow: hidden; font-size: 0.95rem; white-space: nowrap; text-overflow: ellipsis; }
#panel-itinerary.wbp-on .wbp3 .wbx-stay small { font-size: 0.78rem; color: #6b6a62; }
#panel-itinerary.wbp-on .wbp3 .wbx-stay-go { font-size: 1.1rem; color: var(--wbp-theme, #1f3d30); }
#panel-itinerary.wbp-on .wbp3 .wbx-waiting { display: flex; flex-direction: column; gap: 0.45rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-wrow { grid-template-columns: auto minmax(0, 1fr) auto; }
#panel-itinerary.wbp-on .wbp3 .wbx-wrow .wbx-tile { width: 2.5rem; height: 2.5rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-plannedtoggle { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 2.75rem; margin-top: 1rem; padding: 0 0.85rem; border: 1px solid var(--wbx-line, #e6dcc8); border-radius: 12px; background: transparent; color: #44544a; font: 700 0.75rem/1 var(--sans, "DM Sans", system-ui, sans-serif); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
#panel-itinerary.wbp-on .wbp3 .wbx-plannedtoggle span:last-child { font-size: 1rem; letter-spacing: 0; }
#panel-itinerary.wbp-on .wbp3 .wbx-planned { margin-top: 0.45rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-prow { grid-template-columns: auto minmax(0, 1fr) auto auto; }
#panel-itinerary.wbp-on .wbp3 .wbx-prow .wbx-daybadge { background: #e6efe8; color: #1f3d30; }
#panel-itinerary.wbp-on .wbp3 .wbx-plus.is-again { width: 2rem; height: 2rem; border-color: #b8b29f; font-size: 1rem; }

/* The place preview along the bottom of the map (approved Planner mock, step 4): photo | details | buttons */
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek { position: absolute; inset: auto 16px 16px 16px; z-index: 6; display: block; padding: 0; background: none; backdrop-filter: none; pointer-events: none; }
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-card { pointer-events: auto; display: grid; grid-template-columns: 12rem minmax(0, 1fr) 12.5rem; gap: 0 1rem; max-width: 50rem; max-height: min(17rem, 45vh); margin: 0 auto; padding: 0; overflow: hidden; border-radius: 18px; background: #fffdf8; box-shadow: 0 18px 40px -18px rgba(19, 37, 30, 0.55); }
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-media { min-height: 100%; overflow: hidden; background: #e6efe8; }
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-media .wbx-peek-photos { height: 100%; margin: 0; border-radius: 0; }
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-main { min-width: 0; padding: 0.95rem 0; overflow: auto; display: flex; flex-direction: column; gap: 0.35rem; }
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-main h3 { margin: 0; font-family: var(--serif, "Playfair Display", Georgia, serif); font-size: 1.3rem; line-height: 1.15; }
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-actions { padding: 2.6rem 0.95rem 0.95rem 0; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; }
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-x { position: absolute; top: 0.6rem; right: 0.6rem; }
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-card { position: relative; }
#panel-itinerary.wbp-on .wbp3 .wbp-stage.has-peek .wbx-legend { display: none; }
@media (max-width: 63.99rem) {
  #panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-card { grid-template-columns: 8rem minmax(0, 1fr); }
  #panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; padding: 0 0.8rem 0.8rem; }
}

/* The clash box (approved Planner mock, step 5; 06q) */
#panel-itinerary.wbp-on .wbp3 .wbx-clash { margin: 0.25rem 1.25rem 0.5rem; padding: 0.85rem 1rem; border: 1px solid #f0dfaa; border-radius: 14px; background: #fbf0d0; color: #3a2e10; }
#panel-itinerary.wbp-on .wbp3 .wbx-clash-head { display: flex; gap: 0.6rem; align-items: flex-start; }
#panel-itinerary.wbp-on .wbp3 .wbx-clash-head svg { flex: none; margin-top: 2px; color: #7a5c1c; }
#panel-itinerary.wbp-on .wbp3 .wbx-clash-head b { display: block; font-size: 0.9rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-clash-head p { margin: 0.15rem 0 0; font-size: 0.82rem; line-height: 1.4; color: #4a3d1c; }
#panel-itinerary.wbp-on .wbp3 .wbx-clash-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.7rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-clash-actions button { height: 2.4rem; padding: 0 0.9rem; border-radius: 999px; font: 700 0.8rem/1 var(--sans, "DM Sans", system-ui, sans-serif); cursor: pointer; }
#panel-itinerary.wbp-on .wbp3 .wbx-clash-move { border: 0; background: #1f3d30; color: #fff; }
#panel-itinerary.wbp-on .wbp3 .wbx-clash-keep { border: 1px solid #e0cf9a; background: transparent; color: #3a2e10; font-weight: 600 !important; }
#panel-itinerary.wbp-on .wbp3 .wbx-clash-more { margin-left: auto; border: 0; background: none; color: #7a5c1c; text-decoration: underline; }
#panel-itinerary.wbp-on .wbp3 .wbx-lakbi-mark { margin-right: 4px; color: #b8892f; }
/* The preview's buttons on the map: pills, never stretched (an old flex rule grew the Add button into a circle). */
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-actions > * { flex: none; width: 100%; margin: 0; box-sizing: border-box; }
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-actions .wbx-cf-go { min-height: 2.9rem; padding: 0 0.9rem; font-size: 0.9rem; }
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-actions .wbx-soft { min-height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; font-size: 0.82rem; }
/* The strip's ‹ › only when the days don't fit (06p sets is-fits). */
#panel-itinerary.wbp-on .wbp-stripbar.is-fits .wbp-arrow { display: none; }
#panel-itinerary.wbp-on .wbp-stripbar.is-fits .wbp-stripnav:not(:has(.wbp-today)) { display: none; }
/* Narrower screens: a slimmer time column; free rows stay on one line. */
#panel-itinerary.wbp-on .wbp3 .wbx-free > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 63.99rem) {
  #panel-itinerary.wbp-on .wbp3 .wbx-stop { grid-template-columns: 2.6rem 1.5rem minmax(0, 1fr) auto; gap: 0.5rem; }
  #panel-itinerary.wbp-on .wbp3 .wbx-freerow { grid-template-columns: 2.6rem 1.5rem minmax(0, 1fr); gap: 0.5rem; }
  #panel-itinerary.wbp-on .wbp3 .wbx-line::before { left: calc(2.6rem + 0.5rem + 0.75rem); }
  #panel-itinerary.wbp-on .wbp3 .wbx-when { font-size: 0.74rem; }
}

/* ——— The action bar, calmer (owner 2026-10-10: "an eyesore, especially the colours") ———
   A light bar with a soft shadow; ONE solid button (Edit / Save) in the trip's theme colour (--forest, set by
   applyTripTheme); everything else white with a thin border; normal case, no shouting capitals. Every tab. */
html.wb-new .exp-fab-stack,
html.wb-new .exp-fab-dock {
  gap: 0.4rem;
  padding: 0.4rem;
  border: 1px solid rgba(29, 38, 34, 0.08);
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.96);
  box-shadow: 0 10px 28px -12px rgba(19, 37, 30, 0.35), 0 2px 6px rgba(19, 37, 30, 0.06);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
html.wb-new .exp-fab {
  min-height: 2.6rem;
  padding: 0 1rem;
  border: 1px solid #e3dccb;
  border-radius: 11px;
  background: #fff;
  color: #1b2a23;
  font: 600 0.86rem var(--sans);
  letter-spacing: normal;
  text-transform: none;
}
html.wb-new .exp-fab .exp-fab-label { letter-spacing: normal; text-transform: none; }
html.wb-new .exp-fab:hover { border-color: #cfc5ae; background: #faf6ec; }
html.wb-new .exp-fab:focus-visible { outline: 2px solid var(--forest, #1f3d30); outline-offset: 2px; }
html.wb-new .exp-fab-edit,
html.wb-new .exp-fab-save {
  border-color: var(--forest, #1f3d30);
  background: var(--forest, #1f3d30);
  color: #fff;
  font-weight: 700;
}
html.wb-new .exp-fab-edit:hover,
html.wb-new .exp-fab-save:hover { border-color: var(--forest-deep, #14291f); background: var(--forest-deep, #14291f); }
/* An icon-only button (the PDF): square, quiet */
html.wb-new .exp-fab { white-space: nowrap; }
/* Only a true icon button (the PDF: an icon, no words) is square — never Cancel, Undo or Save a place (owner 2026-10-10). */
html.wb-new .exp-fab:has(.exp-fab-ico):not(:has(.exp-fab-label)) { width: 2.6rem; padding: 0; justify-content: center; }
/* "📍 Save a place" docked in the bar: the quiet white kind (never the icon-only square above) */
html.wb-new .plc-float.is-docked {
  width: auto;
  min-width: max-content;
  white-space: nowrap;
  min-height: 2.6rem;
  padding: 0 1rem;
  border: 1px solid #e3dccb;
  border-radius: 11px;
  background: #fff;
  color: #1b2a23;
  font: 600 0.86rem var(--sans);
}
html.wb-new .plc-float.is-docked:hover { border-color: #cfc5ae; background: #faf6ec; }

/* Day view follows the trip's theme colour (owner 2026-10-10: green picked card + brick title "not giving").
   --forest / --forest-deep come from the trip's Color theme (applyTripTheme). */
html.wb-new .nu-days.is-top .nu-day.is-on { background: var(--forest, #1f3d30); border-color: var(--forest, #1f3d30); }
html.wb-new .nu-days.is-top .nu-day.is-on .dv-prog span { background: rgba(255, 255, 255, 0.3); }
html.wb-new .nu-days.is-top .nu-day.is-on .dv-prog .is-done { background: #fff; }
html.wb-new .dv-prog .is-done { background: var(--forest, #2d7a46); }
html.wb-new .dv-seg.is-gone { background: var(--forest, #1f3d30); }
html.wb-new .dv-seg:focus-visible,
html.wb-new .dv-strip-nav > button:focus-visible { outline-color: var(--forest, #1f3d30); }
html.wb-new .dv-headwords .dv-title { color: var(--forest, #1f3d30); }
html.wb-new .nu-day.is-on .nu-day-num { color: inherit; }
/* Hotel card: a traveller's review photo, with its credit (owner 2026-10-10) */
.hotel-media.is-review-photo { position: relative; }
.hotel-media.is-review-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hotel-review-credit { position: absolute; left: 0.6rem; bottom: 0.6rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(20, 32, 27, 0.72); color: #fff; font-size: 0.72rem; font-weight: 600; }
/* The preview's photo column (owner 2026-10-10: half photos + an empty block): one photo fills the column, swipe for
   the next; the credit sits on the photo; no photo → no column at all. */
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-media { position: relative; min-height: 0; }
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-media .wbx-peek-photos { position: absolute; inset: 0; grid-auto-columns: 100%; gap: 0; scrollbar-width: none; }
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-media .wbx-peek-photos::-webkit-scrollbar { display: none; }
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-media .wbx-peek-photos img { height: 100%; border-radius: 0; }
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-media .wbx-peek-credit { position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.5rem; margin: 0; padding: 0.25rem 0.55rem; border-radius: 999px; background: rgba(20, 32, 27, 0.72); color: #fff; font-size: 0.7rem; line-height: 1.3; pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-card.is-bare { grid-template-columns: minmax(0, 1fr) 12.5rem; }
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-card.is-bare .wbx-peek-media { display: none; }
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-card.is-bare .wbx-peek-main { padding-left: 1.1rem; }
@media (max-width: 63.99rem) {
  #panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-card.is-bare { grid-template-columns: minmax(0, 1fr); }
}
/* Under the day: "+ Add a stop · Let LakBi plan" and the hotel-times link line up with the cards, not under the
   time column (owner 2026-10-10: "the layout is broken"). Card start = time col + dot col + two gaps. */
#panel-itinerary.wbp-on .wbp3 .wbx-list > .wbx-addrow,
#panel-itinerary.wbp-on .wbp3 .wbx-list > .wbx-links { margin-left: calc(3.1rem + 1.65rem + 1.4rem); padding-left: 0; }
#panel-itinerary.wbp-on .wbp3 .wbx-list > .wbx-addrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
#panel-itinerary.wbp-on .wbp3 .wbx-list > .wbx-links { margin-top: 0.5rem; }
/* New / modified on a planner card, beside its kind (the day view's marks) */
#panel-itinerary.wbp-on .wbp3 .wbx-kind .tt-mark { margin: 0; padding: 0.1rem 0.45rem; font-size: 0.62rem; letter-spacing: 0.02em; text-transform: none; vertical-align: 0; }
@media (max-width: 63.99rem) {
  #panel-itinerary.wbp-on .wbp3 .wbx-list > .wbx-addrow,
  #panel-itinerary.wbp-on .wbp3 .wbx-list > .wbx-links { margin-left: calc(2.6rem + 1.5rem + 1rem); }
}

/* The way between two stops lives BETWEEN their cards (owner 2026-10-10): a quiet connector on the line, red when
   there's no time to get there; with free time in between it rides on the free row instead. */
#panel-itinerary.wbp-on .wbp3 .wbx-legrow { margin: -0.15rem 0 -0.15rem calc(3.1rem + 1.65rem + 1.4rem); }
#panel-itinerary.wbp-on .wbp3 .wbx-free-leg { grid-column: 3; margin-top: -0.2rem; }
#panel-itinerary.wbp-on .wbp3 :is(.wbx-legrow, .wbx-free-leg) .lmp-leg { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin: 0; padding: 0.15rem 0; border: 0; background: none; font-size: 0.78rem; color: var(--wbx-muted, #6b7068); }
#panel-itinerary.wbp-on .wbp3 :is(.wbx-legrow, .wbx-free-leg) .lmp-leg.is-tight { color: #b3261e; font-weight: 600; }
#panel-itinerary.wbp-on .wbp3 :is(.wbx-legrow, .wbx-free-leg) .lmp-leg-route { margin-left: auto; font-size: 0.75rem; }
@media (max-width: 63.99rem) {
  #panel-itinerary.wbp-on .wbp3 .wbx-legrow { margin-left: calc(2.6rem + 1.5rem + 1rem); }
}
/* The preview's Remove (owner 2026-10-10): a quiet red link under its buttons */
#panel-itinerary.wbp-on .wbp3 .wbx-peek-remove { align-self: center; margin-top: 0.15rem; padding: 0.25rem 0.5rem; border: 0; background: none; color: #b3261e; font: 600 0.8rem/1.2 var(--sans, "DM Sans", system-ui, sans-serif); text-decoration: underline; cursor: pointer; }
/* The map card's buttons, calmer (owner 2026-10-10: "damn ugly"): one solid Add on one line, the two quiet ones
   side by side, Remove a small grey word. */
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-actions { gap: 0.45rem; justify-content: center; padding: 2.8rem 1rem 1rem 0; }
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-actions .wbx-cf-go { width: 100%; min-height: 2.6rem; padding: 0 0.9rem; white-space: nowrap; border-radius: 999px; font-size: 0.86rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-peek .wbx-peek-pair { display: flex; gap: 0.4rem; width: 100%; }
#panel-itinerary.wbp-on .wbp3 .wbx-peek .wbx-peek-pair:empty { display: none; }
#panel-itinerary.wbp-on .wbp3 .wbx-peek .wbx-peek-pair > .wbx-soft { flex: 1 1 0; min-width: 0; min-height: 2.25rem; padding: 0 0.5rem; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; border-radius: 999px; font-size: 0.76rem; font-weight: 600; text-decoration: none; }
#panel-itinerary.wbp-on .wbp3 .wbx-peek .wbx-peek-remove { align-self: center; margin-top: 0.1rem; padding: 0.2rem 0.4rem; color: #8a8f87; font-weight: 600; font-size: 0.76rem; text-decoration: none; }
#panel-itinerary.wbp-on .wbp3 .wbx-peek .wbx-peek-remove:hover,
#panel-itinerary.wbp-on .wbp3 .wbx-peek .wbx-peek-remove:focus-visible { color: #b3261e; text-decoration: underline; }
@media (max-width: 63.99rem) {
  #panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-actions { padding: 0 0.8rem 0.8rem; }
  #panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-actions .wbx-cf-go { width: auto; }
  #panel-itinerary.wbp-on .wbp3 .wbx-peek .wbx-peek-pair { width: auto; }
}
/* Planning: no floating "Ask LakBi" over the day (owner 2026-10-10) — LakBi is in the free rows' "Where to?". */
html.wbp-open #lakbi-chat-launch { display: none !important; }
#panel-itinerary.wbp-on .wbp3 .wbx-list { padding-bottom: 2rem; }
/* Stop card type (owner 2026-10-10: "increase the font size and a proper spacing there"): a readable kind label,
   a bigger title with room under the label, the details a step below. */
#panel-itinerary.wbp-on .wbp3 .wbx-stop .wbx-kind { margin: 0 0 0.4rem; font-size: 0.74rem; letter-spacing: 0.07em; line-height: 1.2; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop .lmp-main { margin-bottom: 0.5rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop .lmp-main strong { font-size: 1.12rem; line-height: 1.3; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop .wbx-lines { gap: 0.3rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop .wbx-time { font-size: 0.86rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop :is(.wbx-where-line, .wbx-note) { font-size: 0.82rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-stopcard { padding: 0.95rem 1rem; }
/* Stop card rhythm, tighter (owner 2026-10-10: "still bothered by the spacing"): the label hugs the name, the name sits
   one step above the details, the details close together. */
#panel-itinerary.wbp-on .wbp3 .wbx-stopcard { padding: 0.8rem 0.95rem 0.85rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop .wbx-kind { margin: 0 0 0.2rem; line-height: 1.1; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop .lmp-main { margin-bottom: 0.3rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop .lmp-main strong { line-height: 1.25; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop .wbx-lines { gap: 0.15rem; }
/* The open card and LakBi's ideas sit in the day list now: only the other stops wait dimmed (the rule above), never
   the whole list (owner 2026-10-10: "why is the colour so pale"). */
#panel-itinerary.wbp-on > .wbp.wbp3.is-editing [data-wbp-list] { opacity: 1; }
/* The map card: its middle scrolls when it doesn't fit (owner 2026-10-10) — the card keeps its height. */
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-main { min-height: 0; max-height: min(17rem, 45vh); overflow-y: auto; overscroll-behavior: contain; padding-right: 0.35rem; scrollbar-width: thin; }
/* The map card's scrolling middle: whole notes and quotes, nothing squashed to fit (owner 2026-10-10). */
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-main > * { flex-shrink: 0; }
/* The pre-filled card: Cancel · Add to Day N at the very bottom, under More (owner 2026-10-10: "why is the add
   button on the upper part" — More opened its fields below it). */
#panel-itinerary.wbp-on .wbp3 .wbx-confirm .wbx-cf-bar { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--wbx-line, #ece4d3); }
#panel-itinerary.wbp-on .wbp3 .wbx-confirm .wbx-cf-bar .wbx-cancel { flex: 0 0 auto; margin: 0; }
#panel-itinerary.wbp-on .wbp3 .wbx-confirm .wbx-cf-bar .wbx-cf-go { flex: 1 1 auto; margin: 0; }
/* Day view colours, calmer (owner 2026-10-10: "fix this colour clashing"): a LakBi stop is the same plain card as any
   stop — only its type colour on the edge; "LakBi's pick" is a quiet gold-text tag; source tags are neutral; the
   Happening-now panel stays in the trip's colour. */
html.wb-new .nu-wrap .agenda-item.nu-ag-card.is-lakbi {
  border: 1px solid #e3dccb;
  border-left: 4px solid var(--c);
  background: #fff;
  box-shadow: none;
}
html.wb-new .nu-wrap .agenda-item.nu-ag-card.is-lakbi.is-on { box-shadow: 0 0 0 2px var(--forest); }
html.wb-new .nu-ag-lakbi {
  background: #fbf3dc;
  color: #7a5a14;
  border: 1px solid #efdfb2;
  box-shadow: none;
  font-weight: 700;
}
html.wb-new .nu-ag-src.is-food,
html.wb-new .nu-ag-src.is-hotel,
html.wb-new .nu-ag-src.is-flight { background: #f1eee6; color: #5b5a52; }
html.wb-new .nu-stop-panel.is-lakbi .nu-dp-top { background: linear-gradient(140deg, var(--forest), var(--forest-deep, var(--forest))); }
/* "now" in the day's free time (owner 2026-10-10: "hard to read"): the trip's colour, white text, a readable size. */
html.wb-new .nu-wrap .agenda-gap.is-now { background: color-mix(in srgb, var(--forest) 8%, transparent); }
html.wb-new .nu-wrap .agenda-gap .agenda-now {
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  background: var(--forest);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
html.wb-new .nu-wrap .agenda-gap.is-now > span:not(.agenda-now) { color: var(--ink, #1b2a23); font-size: 0.74rem; font-weight: 600; }
/* Planner stop cards, one look (owner 2026-10-10: "something feels off in the cards"): the three detail lines share one
   grey outline icon set (time · place · note) in one column; the type colour is a straight stripe inside the card
   (not a thick border bending round the corners); LakBi's mark is quiet gold text on the kind line. */
#panel-itinerary.wbp-on .wbp3 .wbx-stopcard { position: relative; border-left: 1px solid var(--wbx-line, #e3dccb); }
#panel-itinerary.wbp-on .wbp3 .wbx-stopcard::before { content: ""; position: absolute; left: 0; top: 0.75rem; bottom: 0.75rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--wbp-c, #2f6a4f); }
#panel-itinerary.wbp-on .wbp3 .wbx-stop :is(.wbx-time, .wbx-where-line, .wbx-note) { display: flex; align-items: flex-start; gap: 0.45rem; min-width: 0; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop :is(.wbx-time, .wbx-where-line, .wbx-note) > svg { flex: none; width: 0.9rem; height: 0.9rem; margin-top: 0.12rem; color: #8a8478; display: block; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop .wbx-time svg { display: block; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop :is(.wbx-time, .wbx-where-line, .wbx-note) > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop .wbx-where-line > span { white-space: nowrap; }
#panel-itinerary.wbp-on .wbp3 .wbx-kind .wbx-kind-lakbi { margin-left: auto; color: #9a7420; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; text-transform: none; }
/* Day view stop cards, the planner's look (owner 2026-10-10): one grey outline icon per detail line (time · place ·
   note), the type colour as a straight stripe inside the card. */
html.wb-new .nu-wrap .agenda-item.nu-ag-card,
html.wb-new .nu-wrap .agenda-item.nu-ag-card.is-lakbi { position: relative; border-left: 1px solid #e3dccb; }
html.wb-new .nu-wrap .agenda-item.nu-ag-card:hover { border-left-color: #bdb9a9; }
html.wb-new .nu-wrap .agenda-item.nu-ag-card::before { content: ""; position: absolute; left: 0; top: 0.8rem; bottom: 0.8rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--c); }
html.wb-new .nu-wrap .nu-ag-card .nu-ag-line { display: flex; align-items: flex-start; gap: 0.45rem; min-width: 0; }
html.wb-new .nu-wrap .nu-ag-card .nu-ag-line > svg { flex: none; width: 0.9rem; height: 0.9rem; margin-top: 0.15rem; color: #8a8478; }
html.wb-new .nu-wrap .nu-ag-card .nu-ag-line > span { min-width: 0; }
html.wb-new .nu-wrap .nu-ag-card .dv-note::before { content: none; }
#panel-itinerary.wbp-on .wbp3 .wbx-confirm .wbx-cf-bar .wbx-cf-go { width: auto; min-width: 0; flex: 1 1 0; }
/* The pre-filled card's bottom row: Cancel (outlined) · Add to Day N (solid) side by side — the older full-width
   Cancel rule (#detail-slot … .wbx-cancel) pushed Add off the card (owner 2026-10-10: "only Cancel is still there"). */
#panel-itinerary.wbp-on .wbp3 #detail-slot .wbx-confirm .wbx-cf-bar .wbx-cancel {
  flex: 0 0 auto;
  width: auto;
  min-height: 2.9rem;
  margin: 0;
  padding: 0 1.1rem;
  border: 1px solid var(--wbx-line, #e3dccb);
  border-radius: 999px;
  background: #fff;
  color: var(--wbx-ink, #1b2a23);
  font-weight: 600;
}
#panel-itinerary.wbp-on .wbp3 #detail-slot .wbx-confirm .wbx-cf-bar .wbx-cf-go { flex: 1 1 0; width: auto; min-width: 0; min-height: 2.9rem; margin: 0; }
/* The day view's side column (Map of the day + the stop panel) stays pinned while the page scrolls — on top of what
   scrolls past it (owner 2026-10-10: the day strip slid over the map card's header and edge). */
html.wb-new .nu-wrap #detail-slot { z-index: 6; }

/* Crew HQ on touch screens (bug hunt 2026-10-10): every small control gets a 44 px hit area without moving what's
   drawn (an invisible ::after around it), and inputs are 16 px so iPhones don't zoom in on focus. A tie's long place
   names wrap inside their buttons instead of pushing the row wider than the screen. */
@media (pointer: coarse), (max-width: 47.99rem) {
  #crew-hq :is(.hq-tick, .hq-x, .hq-more, .hq-btn.is-sm, .hq-poll-toggle, .hq-link),
  .hqv-pickchip button,
  .hqv-x {
    position: relative;
  }
  #crew-hq :is(.hq-tick, .hq-x, .hq-more, .hq-btn.is-sm, .hq-poll-toggle, .hq-link)::after,
  .hqv-pickchip button::after,
  .hqv-x::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
  #crew-hq :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select),
  .hqv :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
    font-size: 16px;
  }
}
.hq-tie .hq-btn {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ——— Narrow website (owner 2026-10-10: "make our web work on narrow"): the new design at every width ———
   A window under 768 px keeps the wide design folded to one column (isMobileNav() is retired on the web).
   The account, Publish, Sync and ⚙ sit on the back row like the wide header (the account as its face only);
   the old header Crew HQ button never shows (Crew HQ is a tab). */
.crewhq-btn[hidden],
html.wb-new .sheet-nav-tray #owner-nav > button#mast-crewhq { display: none !important; }
@media (max-width: 47.99rem) {
  html.wb-new .workbook { position: relative; }
  html.wb-new:not(.pub-mast) .sheet-nav { position: static; z-index: auto; } /* a flex item keeps its z-index even when static: the tray must stack over the header */
  /* :has(...) out-ranks the old phone tray rules in styles.css (they were written with :has too). */
  html.wb-new:not(.pub-mast) .sheet-nav-tray:has(#owner-nav, #public-nav, #account-slot) {
    position: absolute;
    top: max(1rem, env(safe-area-inset-top));
    right: 1rem;
    left: auto;
    width: auto;
    z-index: 47; /* over the header band (z 46) */
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    gap: 0.4rem;
    border: 0;
    background: none;
    /* never under the back arrow (owner 2026-10-14: the name chip, Publish and Sync ran off the left edge over ←) */
    max-width: calc(100% - 5rem);
  }
  /* each tool at its own size: the old phone rules stretched Sync across the row (~280 px) */
  html.wb-new:not(.pub-mast) .sheet-nav-tray:has(#owner-nav, #public-nav, #account-slot) > :is(#owner-nav, #account-slot, .tp-slot) {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
  }
  html.wb-new:not(.pub-mast) .sheet-nav-tray #owner-nav:not([hidden]) { display: flex; align-items: center; gap: 0.4rem; }
  html.wb-new:not(.pub-mast) .sheet-nav-tray #owner-nav > button { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; }
  html.wb-new:not(.pub-mast) .sheet-nav-tray #owner-nav > button.public-nav-ico { width: 2.15rem !important; min-width: 2.15rem !important; padding: 0 !important; }
  /* A row of sub-tabs wider than the screen (Prep: Checklists · LakBi’s destination guide) scrolls sideways. */
  html.wb-new .detail-subtabs {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  html.wb-new .detail-subtabs::-webkit-scrollbar { display: none; }
  html.wb-new .detail-subtabs > button { flex: 0 0 auto; }
}
/* Narrow web, small phones (≤ 25rem / 400 px): the account shows its face only (the name collided with ←); the
   day's Day / Timeline / Whole trip stretch across and Share day wraps under them instead of running off the edge. */
@media (max-width: 25rem) {
  html.wb-new .sheet-nav-tray #account-slot .auth-menu-label { display: none; }
  html.wb-new #panel-itinerary .dv-headtools { flex-wrap: wrap; row-gap: 0.5rem; }
  html.wb-new #panel-itinerary .dv-headtools .nu-itin-tools { flex: 1 1 100%; }
  html.wb-new #panel-itinerary .dv-headtools .nu-views { flex: 1 1 auto; }
  html.wb-new #panel-itinerary .dv-headtools .nu-views > button { flex: 1 1 auto; white-space: nowrap; }
}

/* ——— The planner in a narrow window (06r): Day plan · Your places · Map, one pane at a time ——— */
#panel-itinerary.wbp-on .wbp-panes { display: none; }
@media (max-width: 47.99rem) {
  #panel-itinerary.wbp-on .wbp-panes {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 6px 12px 8px;
    background: var(--wbx-ground, #fbf6ec);
    border-bottom: 1px solid #e3d8c2;
  }
  #panel-itinerary.wbp-on .wbp-panes > button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 0 8px;
    border: 1px solid #e3d8c2;
    border-radius: 999px;
    background: #fff;
    color: #1b2a23;
    font: 700 0.88rem/1.1 var(--sans, "DM Sans", system-ui, sans-serif);
    white-space: nowrap;
    cursor: pointer;
  }
  #panel-itinerary.wbp-on .wbp-panes > button.is-on { border-color: #1f3d30; background: #1f3d30; color: #fff; }
  #panel-itinerary.wbp-on .wbp-panes > button:focus-visible { outline: 2px solid #1f3d30; outline-offset: 2px; }
  /* One column; the picked pane fills what's left under the bar, scrolling on its own. */
  #panel-itinerary.wbp-on > .wbp.wbp3,
  #panel-itinerary.wbp-on > .wbp.wbp3.is-editing { display: block; position: relative; }
  #panel-itinerary.wbp-on > .wbp.wbp3 > :is(.wbp-side, .wbx, .wbp-stage) {
    position: absolute;
    inset: 0;
    width: auto;
    max-width: none;
    height: auto;
    border: 0;
  }
  #panel-itinerary.wbp-on > .wbp.wbp3 > :is(.wbp-side, .wbx) { overflow-y: auto; overscroll-behavior: contain; }
  #panel-itinerary.wbp-on > .wbp.wbp3:not([data-pane="places"]) > .wbx,
  #panel-itinerary.wbp-on > .wbp.wbp3:not([data-pane="map"]) > .wbp-stage,
  #panel-itinerary.wbp-on > .wbp.wbp3[data-pane="places"] > .wbp-side,
  #panel-itinerary.wbp-on > .wbp.wbp3[data-pane="map"] > .wbp-side { display: none; }
  /* The narrow top bar: the trip's name shrinks first; Undo / Save keep their size. */
  #panel-itinerary.wbp-on .wbp-topbar { gap: 10px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); }
  #panel-itinerary.wbp-on .wbp-toptrip { flex: 1 1 auto; }
  #panel-itinerary.wbp-on .wbp-toptrip h1 { font-size: 1.15rem; }
  #panel-itinerary.wbp-on .wbp-toptrip span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  #panel-itinerary.wbp-on .wbp-topactions { flex: none; flex-wrap: nowrap; gap: 6px; }
  #panel-itinerary.wbp-on .wbp-topactions :is(.lmp-undo, .lmp-done, .lmp-save) { height: 44px; padding: 0 14px; }
  #panel-itinerary.wbp-on .wbp-saved,
  #panel-itinerary.wbp-on .wbp-unsaved { display: none; } /* the count lives on Save's own button below 48rem */
  /* The map's search spans the map; Fit sits under it. */
  #panel-itinerary.wbp-on .wbp-stage .wbp-mapsearch { left: 12px; right: 12px; width: auto; }
  #panel-itinerary.wbp-on .wbp-stage .wbx-legend { display: none; }
}
@media (max-width: 47.99rem) {
  /* Messages sit across the bottom of the screen (the wide rule centres them over the map column). */
  #panel-itinerary.wbp-on > .wbp.wbp3 .exp-toast:not([hidden]) {
    position: fixed;
    top: auto;
    left: 12px;
    right: 12px;
    bottom: max(16px, env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    height: auto;
    transform: none;
    text-align: center;
  }
}
@media (max-width: 47.99rem) {
  #panel-itinerary.wbp-on .wbp3 .wbx-collapse { display: none; } /* a pane of its own: nothing to fold away */
}

/* Phones (and any touch screen): every text field at 16 px or more — iOS zooms the page into a smaller one on focus
   (responsive pass 2026-10-10: Prep's My list, the Expenses filter, the planner's searches were 14–15 px). */
@media (max-width: 47.99rem), (pointer: coarse) {
  html.wb-new :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
    font-size: max(16px, 1em);
  }
}
@media (max-width: 47.99rem), (pointer: coarse) {
  html.wb-new #panel-expenses .exp-filters :is(select, input),
  #panel-itinerary.wbp-on .wbp-search input,
  #panel-itinerary.wbp-on .wbp3 .wbx .wbp-search input {
    font-size: 16px;
  }
}
/* Food: meal times under Search & filters — chips that wrap (they were the chip row; owner 2026-10-11) */
html.wb-new .nu-food-whens { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0; }

/* "Add a food place": Ask LakBi inside the window (owner 2026-10-11) */
.plc-add-lakbi {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  margin: 0.75rem 0 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid #e6c98e;
  border-radius: 14px;
  background: linear-gradient(135deg, #fbefcd, #f6dc9c);
  color: #4a3208;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.plc-add-lakbi-ico { flex: none; font-size: 1.25rem; }
.plc-add-lakbi b { display: block; font-size: 0.92rem; }
.plc-add-lakbi small { display: block; color: #7a5a1c; font-size: 0.78rem; }

/* Save a place · a post with several places: Save all (owner 2026-10-11) */
.plc-add-all { width: 100%; margin-top: 0.6rem; }
/* back to a post's places · the folded other matches (owner 2026-10-15) */
.plc-add-back { width: 100%; margin: 0 0 0.6rem; }
.plc-add-more { width: 100%; margin-top: 0.4rem; }

/* Hotel nights, a row per stay (owner 2026-10-11: "we just repeat it day by day") — shared/trip-core.js */
ul.hotel-nights-list.nights-by-stay { display: grid; gap: 0; margin: 0.4rem 0 0; padding: 0; list-style: none; }
.nights-by-stay > li.nights-stay {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.2rem 0.9rem;
  padding: 0.75rem 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, #263b32 12%, transparent);
  border-radius: 0;
  background: none;
}
.nights-by-stay > li.nights-stay:last-child { border-bottom: 0; }
.nights-by-stay .nights-when { display: grid; gap: 0.05rem; }
.nights-by-stay .nights-when strong { font-size: 0.92rem; color: #263b32; }
.nights-by-stay .nights-when small { font-size: 0.74rem; font-weight: 700; color: #66706a; }
.nights-by-stay .nights-sleep { justify-self: end; text-align: right; font-size: 0.86rem; color: #3d4a43; }
.nights-by-stay .nights-notes { grid-column: 1 / -1; display: grid; gap: 0.25rem; margin: 0.25rem 0 0; padding: 0; list-style: none; }
.nights-by-stay .nights-notes li { padding: 0.35rem 0.6rem; border: 0; border-radius: 8px; background: #f6f1e6; font-size: 0.82rem; color: #263b32; }
.nights-by-stay .nights-notes b { margin-right: 0.35rem; font-size: 0.74rem; color: #66706a; }
/* (the per-night rows' rules — .is-workbook .nu-nights .hotel-nights-list li — must not reach a stay's notes) */
.is-workbook .nu-nights .nights-by-stay > li.nights-stay { grid-template-columns: auto 1fr; border-top: 0; padding: 0.75rem 0; }
.is-workbook .nu-nights .nights-by-stay .nights-notes li { display: block; padding: 0.35rem 0.6rem; border: 0; border-radius: 8px; background: #f6f1e6; text-align: left; }

/* Hotel · editing: a row per stay, its form in a window (owner 2026-10-11) */
.nu-hotel-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.4rem 0.8rem;
  padding: 0.9rem 1rem;
  border: 1px solid #e7dfcf;
  border-radius: 16px;
  background: #fffdf8;
}
.nu-hotel-row.is-missing { border-color: #e9b9a4; }
.nu-hotel-row-main h3 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: 1.15rem; font-weight: 500; }
.nu-hotel-row-main p { margin: 0.15rem 0 0; color: #66706a; font-size: 0.82rem; }
.nu-hotel-row-need { display: block; margin-top: 0.2rem; color: #b5532f; font-size: 0.76rem; font-weight: 700; }
.nu-hotel-row-acts { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.75rem; }
dialog.nu-hotel-win { width: min(52rem, calc(100vw - 1.5rem)); }
dialog.nu-hotel-win > .nu-hotel-edit,
dialog.nu-hotel-win > article { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
/* Flights · Add / Edit a flight in a window too (owner 2026-10-16), app twin */
dialog.nu-flight-win { width: min(40rem, calc(100vw - 1.5rem)); }
dialog.nu-flight-win > article { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.nu-flight-win-foot { position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding: 0.75rem 1rem; background: #fffdf8; border-top: 1px solid #ece4d4; }
.nu-hotel-win-foot { position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding: 0.75rem 1rem; background: #fffdf8; border-top: 1px solid #ece4d4; }

/* Crew HQ · a crewmate's card (owner 2026-10-11): the Crew rows open it */
.hq-crew-row {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  margin: -0.3rem -0.4rem;
  padding: 0.3rem 0.4rem;
  border: 0;
  border-radius: 12px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.hq-crew-row:hover,
.hq-crew-row:focus-visible { background: rgba(38, 59, 50, 0.06); }
.hq-crew-go { margin-left: auto; color: #9aa39d; font-size: 1.3rem; line-height: 1; }
dialog.hq-person {
  width: min(26rem, calc(100vw - 1.5rem));
  max-height: min(88vh, 40rem);
  margin: auto;
  padding: 1.1rem 1.15rem 1rem;
  overflow: auto;
  border: 0;
  border-radius: 20px;
  background: #fffdf8;
  color: #263b32;
  box-shadow: 0 24px 60px rgba(20, 30, 25, 0.28);
}
dialog.hq-person::backdrop { background: rgba(20, 30, 25, 0.45); }
.hq-person-head { display: flex; align-items: center; gap: 0.75rem; }
.hq-person-head .hq-face { width: 3rem; height: 3rem; flex: none; font-size: 1.1rem; }
.hq-person-head h3 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: 1.35rem; font-weight: 500; }
.hq-person-head small { display: block; color: #66706a; font-size: 0.8rem; }
/* Name and role · fun title never push the × off the card: one line each, cut with …. */
.hq-person-head > div { min-width: 0; flex: 1 1 auto; }
.hq-person-head h3,
.hq-person-head small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Owner / Planner: "✎ Fun title" on a crewmate's card, and its window (13d crewHqTitleHtml). */
.hq-person-title-btn {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.75rem;
  margin: 0 0 0.75rem;
  padding: 0 0.9rem;
  border: 1px dashed #cfc4ab;
  border-radius: 14px;
  background: #fbf7ee;
  color: #1e3a2f;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.hq-person-title-btn:focus-visible,
.hq-title-remove:focus-visible { outline: 2px solid #1e3a2f; outline-offset: 2px; }
.hq-title-edit { display: grid; gap: 0.5rem; margin: 1rem 0 0; }
.hq-title-field { color: #66706a; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.hq-title-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 2.9rem;
  padding: 0 0.85rem;
  border: 1px solid #d9d0bd;
  border-radius: 12px;
  background: #fff;
  color: #263b32;
  font: inherit;
  font-size: 1rem;
}
.hq-title-input:focus { outline: 2px solid #1e3a2f; outline-offset: 1px; border-color: #1e3a2f; }
.hq-title-meta { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; margin: 0 0 0.4rem; color: #66706a; font-size: 0.8rem; }
.hq-title-preview { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hq-title-count { flex: none; font-variant-numeric: tabular-nums; }
.hq-title-remove {
  justify-self: center;
  min-height: 2.75rem;
  padding: 0 0.8rem;
  border: 0;
  background: none;
  color: #a33a2a;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.hq-title-remove:disabled { opacity: 0.6; cursor: default; }
.hq-person-x { margin-left: auto; align-self: flex-start; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: #f1ebde; color: #263b32; font-size: 1.1rem; cursor: pointer; }
.hq-person-body { display: grid; gap: 0.75rem; margin: 1rem 0 1.1rem; }
.hq-person-pref h4 { margin: 0 0 0.35rem; color: #66706a; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.hq-person-pref p { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.hq-person-chip { padding: 0.28rem 0.65rem; border-radius: 999px; background: #efe9dc; font-size: 0.8rem; font-weight: 700; }
.hq-person-chip.is-diet { background: #e3efe6; color: #1f5c3a; }
.hq-person-note { margin: 0; color: #4b5650; font-size: 0.88rem; }
.hq-person-quiet { margin: 0; color: #8a938d; font-size: 0.8rem; }
.hq-person-acts { display: flex; gap: 0.5rem; }
.hq-person-btn {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  padding: 0 1rem;
  border: 1px solid #d9d0bd;
  border-radius: 999px;
  background: #fff;
  color: #263b32;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.hq-person-btn.is-solid { border-color: #1e3a2f; background: #1e3a2f; color: #fff; }
.hq-person-btn.is-solid.is-on { border-color: #d9d0bd; background: #fff; color: #1e3a2f; }
.hq-person-btn:disabled { opacity: 0.6; cursor: default; }

/* Saved places · Edit (in its window): Remove on the left, Cancel · Done on the right (owner 2026-10-11) */
.plc-ed-acts { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.plc-ed-acts > .nu-link.is-danger { margin-right: auto; padding: 0.4rem 0.2rem; border: 0; background: none; font: inherit; font-weight: 700; cursor: pointer; }
.plc-ed-acts > .nu-btn { min-height: 2.6rem; padding: 0 1.1rem; border: 1px solid; border-radius: 999px; font: inherit; font-weight: 800; cursor: pointer; }
.plc-ed-acts > .nu-btn.is-solid { min-width: 6.5rem; }

/* A window focused on open (plwShow): no ring on the window itself */
dialog.plw:focus { outline: none; }

/* "Group's choice" (owner 2026-10-12): voted onto the day by the crew — LakBi's pick's label, in the vote's colour. */
html.wb-new .nu-ag-lakbi.is-group { border-color: #f3c4a8; background: #fde8dc; color: #9a3d12; }
#panel-itinerary.wbp-on .wbp3 .wbx-kind .wbx-kind-lakbi.is-group { color: #b4501c; }

/* Audit 2026-10-12: "ends next day" showed on every stop (its hidden flag lost to a display rule). */
[data-event-nextday][hidden] { display: none !important; }

/* ——— The planner's stop card = the day view's card (owner 2026-10-12, web + app): tile, name, "Food · Amusement
   centre · until …", chips; then the note line and the warnings. The colour is the stop's type (--wbp-c). ——— */
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact { --c: var(--wbp-c, #1e3a2f); }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-stopcard.is-compact {
  display: grid;
  gap: 0.35rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid #e9e1cf;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 8px -4px rgba(19, 37, 30, 0.12);
}
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-stopcard.is-compact::before,
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-stopcard.is-compact::after { display: none; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact.is-on .wbx-stopcard.is-compact { border-color: var(--lb-primary, #1e3a2f); box-shadow: 0 0 0 1px var(--lb-primary, #1e3a2f); }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-cmain.lmp-main { display: flex; align-items: center; gap: 0.7rem; width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-cmain.lmp-main .nu-agc-tile { display: grid; flex: none; place-items: center; width: 2.6rem; height: 2.6rem; overflow: hidden; border-radius: 12px; background: color-mix(in srgb, var(--c) 16%, #fff); font-size: 1.2rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-cmain.lmp-main .nu-agc-tile img { width: 100%; height: 100%; object-fit: cover; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-cmain.lmp-main .nu-agc-body { display: grid; flex: 1 1 auto; gap: 0.12rem; min-width: 0; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-cmain.lmp-main .nu-agc-body > b { overflow: hidden; color: var(--wbx-ink, #1b2a23); font-size: 1rem; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
/* Narrow planner column (1280 with Your places open): the name takes two lines before it is cut (UI hunt 2026-10-12 #10). */
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-cmain.lmp-main .nu-agc-body > b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-cmain.lmp-main .nu-agc-meta { overflow: hidden; color: #6b6a62; font-size: 0.78rem; white-space: nowrap; text-overflow: ellipsis; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-cmain.lmp-main .nu-agc-kind { color: var(--c); font-weight: 700; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-cmain.lmp-main .nu-agc-gkind { color: #8a8478; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-cmain.lmp-main .nu-agc-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.15rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-cmain.lmp-main .nu-agc-chips > * { display: inline-flex; align-items: center; padding: 0.1rem 0.45rem; border-radius: 999px; background: #f3efe4; color: #5d5b52; font-size: 0.68rem; font-weight: 700; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-cmain.lmp-main .nu-agc-chips > .is-lakbi { background: #fdf0d2; color: #633806; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-cmain.lmp-main .nu-agc-chips > .is-group { background: #fde8dc; color: #9a3d12; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-cmain.lmp-main .nu-agc-chips > .tt-mark.is-modified { background: #f1e3c4; color: #7a5c1c; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-cmain.lmp-main .nu-agc-chips > .tt-mark.is-new { background: #dcefe3; color: #1f5a3d; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-stopcard.is-compact .wbx-note { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 1.6rem; padding: 0 0 0 3.3rem; border: 0; background: none; color: #8a8478; font: inherit; font-size: 0.78rem; text-align: left; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-stopcard.is-compact .wbx-note.has-note { color: #4f4d45; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-stopcard.is-compact .wbx-note span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-stopcard.is-compact .wbx-cwas { padding-left: 3.3rem; color: #8a6a1f; font-size: 0.74rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-stopcard.is-compact .wbx-tags { padding-left: 3.3rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-stopcard.is-compact { justify-self: stretch; width: 100%; min-width: 0; box-sizing: border-box; }

/* Not saved yet (owner 2026-10-12): new = a green card with a solid "✚ New · not saved", edited = amber "✎ Edited". */
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact.is-mark-new .wbx-stopcard.is-compact { border-color: #7cc49a; background: #f2faf5; box-shadow: inset 4px 0 0 #2f7a52, 0 2px 8px -4px rgba(19, 37, 30, 0.12); }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact.is-mark-modified .wbx-stopcard.is-compact { border-color: #e6c27a; background: #fffaf0; box-shadow: inset 4px 0 0 #c98a12, 0 2px 8px -4px rgba(19, 37, 30, 0.12); }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-cmain.lmp-main .nu-agc-chips > .is-mark-new { background: #2f7a52; color: #fff; }
#panel-itinerary.wbp-on .wbp3 .wbx-stop.is-compact .wbx-cmain.lmp-main .nu-agc-chips > .is-mark-edit { background: #c98a12; color: #fff; }

/* A stop with no address (owner 2026-10-12): said plainly, in the warning colour. */
#panel-itinerary.wbp-on .wbp3 .wbx-tags .wbx-tag.is-nopin { border: 1px solid #f0c9a8; background: #fdf0e6; color: #a2470f; font-weight: 700; }

/* ═══ Crew HQ redesign (owner 2026-10-12, "Crew HQ Redesign.pdf" page 1) — web + app (copied by crew-hq-app.mjs) ═══ */
#crew-hq .hqx {
  --hx-ink: #1f2a24;
  --hx-soft: #6b6a62;
  --hx-forest: #1e3a2f;
  --hx-orange: #e8693a;
  --hx-teal: #1f6f66;
  --hx-gold: #e9b949;
  --hx-line: #ece4d2;
  --hx-card: #fff;
  --hx-shadow: 0 12px 30px -20px rgba(31, 42, 36, 0.45), 0 2px 6px rgba(31, 42, 36, 0.05);
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.25rem 0 5rem;
  gap: 1.6rem;
  color: var(--hx-ink);
  font-family: var(--sans, "DM Sans", system-ui, sans-serif);
}
#crew-hq .hqx h2,
#crew-hq .hqx h3,
#crew-hq .hqx h4 { font-family: var(--serif, "Playfair Display", Georgia, serif); color: var(--hx-forest); letter-spacing: -0.01em; }
#crew-hq .hqx-head h2 { margin: 0; font-size: clamp(2rem, 7vw, 2.6rem); font-weight: 700; line-height: 1.05; }
#crew-hq .hqx-head p { margin: 0.35rem 0 0; color: var(--hx-soft); font-size: 0.95rem; }
#crew-hq .hqx-quiet { margin: 0; color: var(--hx-soft); font-size: 0.9rem; }
#crew-hq .hqx-quiet.is-dark { color: rgba(255, 255, 255, 0.7); }
#crew-hq .hq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* buttons + chips */
#crew-hq .hqx-btn { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; padding: 0 1.15rem; border: 0; border-radius: 999px; background: var(--hx-forest); color: #fff; font: 700 0.95rem var(--sans, "DM Sans", sans-serif); cursor: pointer; white-space: nowrap; }
#crew-hq .hqx-btn.is-orange { background: var(--hx-orange); box-shadow: 0 8px 18px -8px rgba(232, 105, 58, 0.7); }
#crew-hq .hqx-btn.is-soft { border: 1px solid #ddd3bf; background: #fff; color: var(--hx-forest); }
#crew-hq .hqx-btn.is-sm { min-height: 2.2rem; padding: 0 0.85rem; font-size: 0.82rem; }
#crew-hq .hqx-chip { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 1.9rem; padding: 0 0.7rem; border: 0; border-radius: 999px; background: #f3eee2; color: #5d5b52; font: 700 0.78rem var(--sans, "DM Sans", sans-serif); }
#crew-hq button.hqx-chip { cursor: pointer; }
#crew-hq .hqx-chip.is-added { background: #d9efe7; color: #1f6f56; }
#crew-hq .hqx-link { padding: 0.35rem 0; border: 0; background: none; color: var(--hx-teal); font: 700 0.9rem var(--sans, "DM Sans", sans-serif); cursor: pointer; }
#crew-hq .hqx-more-wrap { position: relative; margin-left: auto; }
#crew-hq .hqx-more { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
#crew-hq .hqx-more-wrap .hq-menu { right: 0; left: auto; }

/* sections */
#crew-hq .hqx-sec { display: grid; gap: 0.9rem; }
#crew-hq .hqx-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
#crew-hq .hqx-sec-head h3 { margin: 0; font-size: clamp(1.6rem, 6vw, 2rem); font-weight: 700; line-height: 1.1; }
#crew-hq .hqx-sec-head > small { color: var(--hx-soft); font-size: 0.9rem; }

/* counts */
#crew-hq .hqx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 1.1rem 0.5rem; border-radius: 22px; background: var(--hx-card); box-shadow: var(--hx-shadow); }
#crew-hq .hqx-stat { display: grid; justify-items: center; gap: 0.35rem; padding: 0.15rem 0.4rem; border: 0; border-left: 1px solid var(--hx-line); background: none; color: var(--hx-ink); font: inherit; cursor: pointer; }
#crew-hq .hqx-stat:first-child { border-left: 0; }
#crew-hq .hqx-stat-ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; }
#crew-hq .hqx-stat-ico.is-poll { background: #fbe1d6; color: #c4541f; }
#crew-hq .hqx-stat-ico.is-ann { background: #d5ece7; color: var(--hx-teal); }
#crew-hq .hqx-stat-ico.is-mem { background: #fbefc9; color: #8a6a12; }
#crew-hq .hqx-stat b { font: 700 1.6rem/1 var(--serif, "Playfair Display", serif); color: var(--hx-forest); }
#crew-hq .hqx-stat b span { font-size: 1rem; color: var(--hx-soft); }
#crew-hq .hqx-stat small { color: var(--hx-soft); font-size: 0.82rem; }

/* the opening note: a postcard with a strip of tape */
#crew-hq .hqx-note { position: relative; display: grid; gap: 0.85rem; padding: 1.5rem 1.4rem 1.25rem; border-radius: 22px; background: #fff7e6; box-shadow: 0 4px 0 #ecdcb8, var(--hx-shadow); }
#crew-hq .hqx-note::before { content: ""; position: absolute; top: -0.65rem; left: 50%; width: 5.5rem; height: 1.3rem; border-radius: 2px; background: rgba(233, 185, 73, 0.75); transform: translateX(-50%) rotate(-2deg); }
#crew-hq .hqx-note-kick { margin: 0; color: #9a6a12; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
#crew-hq .hqx-note-text { margin: 0; color: #3e2f12; font: italic 600 clamp(1.4rem, 5.5vw, 1.75rem)/1.25 var(--serif, "Playfair Display", serif); }
#crew-hq .hqx-note-text.is-empty { color: #8a6a12; font-size: 1.05rem; font-style: normal; }
#crew-hq .hqx-note-sign { display: flex; align-items: center; gap: 0.6rem; color: #5a4a2a; font-size: 0.9rem; }
#crew-hq .hqx-note-sign .hq-face { width: 2.2rem; height: 2.2rem; }
#crew-hq .hqx-note-edit { flex: none; white-space: nowrap; margin-left: auto; min-height: 2.4rem; padding: 0 1rem; border: 1.5px solid #d9c38f; border-radius: 999px; background: transparent; color: #5a4a2a; font: 700 0.88rem var(--sans, "DM Sans", sans-serif); cursor: pointer; }

/* announcements */
#crew-hq .hqx-anns { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
#crew-hq .hqx-ann { position: relative; display: flex; gap: 0.85rem; padding: 1.1rem; border-radius: 22px; background: var(--hx-card); box-shadow: var(--hx-shadow); }
#crew-hq .hqx-ann.is-pinned { display: grid; gap: 0.6rem; overflow: hidden; padding: 1.2rem 1.25rem 1.1rem; background: var(--hx-teal); color: #fff; }
#crew-hq .hqx-ann-ico { display: grid; flex: none; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; background: #fbefc9; color: #8a6a12; }
#crew-hq .hqx-ann-main { display: grid; flex: 1 1 auto; gap: 0.35rem; min-width: 0; }
#crew-hq .hqx-ann-top { display: flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; }
#crew-hq .hqx-ann-top small { color: var(--hx-soft); font-size: 0.82rem; }
#crew-hq .hqx-pin { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
#crew-hq .hqx-head.is-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#crew-hq .hqx-ann-text { position: relative; z-index: 1; margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
#crew-hq .hqx-ann.is-pinned .hqx-ann-text { font-size: 1.3rem; }
#crew-hq .hqx-seemore { display: inline; width: auto; min-width: 0; height: auto; min-height: 0; margin: 0; padding: 0 0.1rem; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; font-size: 0.9em; font-weight: 700; line-height: inherit; white-space: nowrap; vertical-align: baseline; text-decoration: underline; text-underline-offset: 2px; opacity: 0.85; cursor: pointer; }
#crew-hq .hqx-ann-by { position: relative; z-index: 1; margin: 0; color: rgba(255, 255, 255, 0.8); font-size: 0.86rem; }
#crew-hq .hqx-ann-acts { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.45rem; }
#crew-hq .hqx-ann.is-pinned .hqx-chip { background: rgba(255, 255, 255, 0.16); color: #fff; }
#crew-hq .hqx-ann.is-pinned .hqx-chip.is-like.is-on,
#crew-hq .hqx-chip.is-like.is-on { background: #fde3c9; color: #9a3d12; }
#crew-hq .hqx-ann-mark { position: absolute; right: -0.6rem; bottom: -1rem; color: rgba(255, 255, 255, 0.1); pointer-events: none; }
#crew-hq .hqx-ann.is-pinned .hqx-more { color: #fff; }

/* talk (comments) */
#crew-hq .hqx-talk { position: relative; z-index: 1; display: grid; gap: 0.6rem; }
#crew-hq .hqx-comments { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; font-size: 0.88rem; }
#crew-hq .hqx-comments li { display: flex; align-items: flex-start; gap: 0.5rem; }
#crew-hq .hqx-comments small { color: var(--hx-soft); }
#crew-hq .hqx-ann.is-pinned .hqx-comments small { color: rgba(255, 255, 255, 0.7); }
#crew-hq .hqx-say { display: flex; gap: 0.5rem; }
#crew-hq .hqx-say input { flex: 1 1 auto; min-width: 0; min-height: 2.9rem; padding: 0 1.1rem; border: 0; border-radius: 999px; background: #f3eee2; color: var(--hx-ink); font: 0.95rem var(--sans, "DM Sans", sans-serif); }
#crew-hq .hqx-send { display: grid; flex: none; place-items: center; width: 2.9rem; height: 2.9rem; border: 0; border-radius: 50%; background: var(--hx-forest); color: #fff; cursor: pointer; }

/* forms (post an announcement) */
#crew-hq .hqx-form { display: grid; gap: 0.6rem; padding: 1rem; border-radius: 18px; background: var(--hx-card); box-shadow: var(--hx-shadow); }
#crew-hq .hqx-form textarea { width: 100%; box-sizing: border-box; padding: 0.75rem 0.9rem; border: 1px solid var(--hx-line); border-radius: 12px; font: 0.95rem var(--sans, "DM Sans", sans-serif); }
#crew-hq .hqx-check { display: flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; }
#crew-hq .hqx-form-count { justify-self: end; margin: -0.3rem 0.2rem 0 0; }

/* votes */
#crew-hq .hqx-polls,
#crew-hq .hqx-decideds { display: grid; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
#crew-hq .hqx-poll { overflow: hidden; border-radius: 22px; background: var(--hx-card); box-shadow: var(--hx-shadow); }
#crew-hq .hqx-band { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.85rem 1.1rem; background: var(--hx-orange); color: #fff; font-size: 0.92rem; font-weight: 800; }
#crew-hq .hqx-band.is-closed { background: #5e6b63; }
#crew-hq .hqx-band-pill { padding: 0.25rem 0.65rem; border-radius: 999px; background: rgba(0, 0, 0, 0.16); font-size: 0.8rem; white-space: nowrap; }
/* one column that never grows past the card: a pasted link in the question wraps (bug hunt 2026-10-12 — it made the
   card 1,400 px wide and its ⋯ unreachable) */
#crew-hq .hqx-poll-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; padding: 1rem 1.1rem 1.15rem; }
#crew-hq .hqx-poll h4,
#crew-hq .hqx-poll-who p,
#crew-hq .hqx-comments li > * { min-width: 0; overflow-wrap: anywhere; }
#crew-hq .hqx-poll-top { display: flex; align-items: center; gap: 0.5rem; min-height: 1.5rem; }
#crew-hq .hqx-poll-top small { color: var(--hx-soft); font-size: 0.86rem; }
#crew-hq .hqx-poll h4 { margin: 0; font-size: clamp(1.4rem, 5.5vw, 1.65rem); font-weight: 700; line-height: 1.15; }
#crew-hq .hqx-choices { display: grid; gap: 0.6rem; }
#crew-hq .hqx-choice-row { display: flex; align-items: stretch; gap: 0.45rem; }
#crew-hq .hqx-choice { display: flex; flex: 1 1 auto; align-items: center; gap: 0.8rem; min-width: 0; padding: 0.75rem; border: 1.5px solid var(--hx-line); border-radius: 18px; background: #fff; color: inherit; font: inherit; text-align: left; }
#crew-hq button.hqx-choice { cursor: pointer; }
#crew-hq .hqx-choice.is-mine { border-color: var(--hx-orange); background: #fff4ee; }
#crew-hq .hqx-choice.is-won { border-color: var(--hx-gold); background: #fffaf0; }
#crew-hq .hqx-tile { display: grid; flex: none; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 14px; font-size: 1.45rem; }
#crew-hq .hqx-tile.is-answer { background: #e3ecf6; color: #2b4a6b; font: 800 1.2rem var(--sans, "DM Sans", sans-serif); }
#crew-hq .hqx-choice-main { display: grid; flex: 1 1 auto; gap: 0.15rem; min-width: 0; }
#crew-hq .hqx-choice-main b { overflow: hidden; font-size: 1.02rem; white-space: nowrap; text-overflow: ellipsis; }
#crew-hq .hqx-choice-main small { overflow: hidden; color: var(--hx-soft); font-size: 0.84rem; white-space: nowrap; text-overflow: ellipsis; }
#crew-hq .hqx-bar { display: block; height: 0.42rem; margin-top: 0.35rem; overflow: hidden; border-radius: 999px; background: #f1e8de; }
#crew-hq .hqx-bar span { display: block; height: 100%; border-radius: inherit; background: var(--hx-orange); }
#crew-hq .hqx-choice.is-won .hqx-bar span { background: var(--hx-gold); }
#crew-hq .hqx-choice-end { display: grid; flex: none; justify-items: center; gap: 0.3rem; min-width: 3rem; }
#crew-hq .hqx-radio { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 2px solid #cfc6b2; border-radius: 50%; color: #fff; }
#crew-hq .hqx-radio.is-on { border-color: var(--hx-orange); background: var(--hx-orange); }
#crew-hq .hqx-radio.is-won { border-color: var(--hx-gold); background: var(--hx-gold); color: #3e2f12; }
#crew-hq .hqx-n { color: var(--hx-soft); font-size: 0.8rem; font-weight: 700; }
#crew-hq .hqx-choice.is-mine .hqx-n { color: #c4541f; }
#crew-hq .hqx-maps { display: grid; flex: none; place-items: center; width: 2.4rem; border: 1px solid var(--hx-line); border-radius: 14px; background: #fff; color: var(--hx-teal); }
#crew-hq .hqx-poll-who { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
#crew-hq .hqx-poll-who p { flex: 1 1 10rem; margin: 0; color: var(--hx-soft); font-size: 0.88rem; }
#crew-hq .hqx-poll-who p b { color: var(--hx-ink); }
#crew-hq .hqx-poll-who .hq-face.is-waiting { border: 1.5px dashed #bdb39f; background: #fff; color: var(--hx-soft); }
#crew-hq .hqx-tie { display: flex; flex-wrap: wrap; gap: 0.5rem; }
#crew-hq .hqx-won-state { margin: 0; }
#crew-hq .hqx-divider { display: flex; align-items: center; gap: 0.75rem; margin: 0.4rem 0 0; color: var(--hx-soft); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
#crew-hq .hqx-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: #ddd3bf; }
#crew-hq .hqx-decided { display: flex; align-items: center; gap: 0.85rem; padding: 0.95rem; border-radius: 20px; background: var(--hx-card); box-shadow: var(--hx-shadow); }
#crew-hq .hqx-dec-ico { display: grid; flex: none; place-items: center; width: 3.3rem; height: 3.3rem; border-radius: 14px; background: var(--hx-gold); color: #6b4a07; }
#crew-hq .hqx-dec-ico.is-q { background: #dfe8f4; color: #2b4a6b; }
#crew-hq .hqx-dec-main { display: grid; flex: 1 1 auto; gap: 0.2rem; min-width: 0; }
#crew-hq .hqx-dec-main small { overflow: hidden; color: var(--hx-soft); font-size: 0.82rem; white-space: nowrap; text-overflow: ellipsis; }
#crew-hq .hqx-dec-main b { font-size: 1.08rem; }
#crew-hq .hqx-dec-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem; }
#crew-hq .hqx-dec-go { display: grid; flex: none; place-items: center; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: #f3eee2; color: var(--hx-forest); cursor: pointer; }

/* memories: the dark band */
#crew-hq .hqx-memories { padding: 1.5rem 1.15rem 1.25rem; border-radius: 26px; background: #1f3d30; color: #fff; }
#crew-hq .hqx-memories h3 { margin: 0; color: #fff; font-size: 1.9rem; }
#crew-hq .hqx-mem-head { display: flex; align-items: center; gap: 0.9rem; }
#crew-hq .hqx-mem-head p { margin: 0.2rem 0 0; color: rgba(255, 255, 255, 0.72); font-size: 0.9rem; line-height: 1.35; }
#crew-hq .hqx-ring { position: relative; display: grid; flex: none; place-items: center; width: 64px; height: 64px; }
#crew-hq .hqx-ring svg { position: absolute; inset: 0; }
#crew-hq .hqx-ring b { position: relative; font: 700 1.05rem var(--serif, "Playfair Display", serif); }
#crew-hq .hqx-ring b span { color: rgba(255, 255, 255, 0.65); font-size: 0.8rem; }
#crew-hq .hqx-mem-due { margin: 0; color: #f0d48a; font-size: 0.86rem; }
#crew-hq .hqx-mem-done { display: flex; align-items: center; gap: 0.9rem; width: 100%; padding: 0.9rem; border: 0; border-radius: 20px; background: #fbf6ec; color: var(--hx-ink); font: inherit; text-align: left; cursor: pointer; }
#crew-hq .hqx-mem-pic { display: grid; flex: none; place-items: center; width: 4.2rem; height: 4.2rem; overflow: hidden; border-radius: 14px; font-size: 1.7rem; }
#crew-hq .hqx-mem-pic img { width: 100%; height: 100%; object-fit: cover; }
#crew-hq .hqx-mem-main { display: grid; gap: 0.15rem; min-width: 0; }
#crew-hq .hqx-mem-main small { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--hx-teal); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
#crew-hq .hqx-mem-main b { font-size: 1.1rem; }
#crew-hq .hqx-stars { color: #d39a1a; letter-spacing: 0.05em; }
#crew-hq .hqx-stars span { color: #d8d0bd; }
#crew-hq .hqx-mem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
#crew-hq .hqx-mem-todo { display: grid; align-content: start; gap: 0.45rem; padding: 0.9rem; border: 1.5px dashed rgba(255, 255, 255, 0.22); border-radius: 18px; background: rgba(255, 255, 255, 0.04); color: #fff; font: inherit; text-align: left; cursor: pointer; }
#crew-hq .hqx-mem-todo b { font-size: 0.98rem; line-height: 1.25; }
#crew-hq .hqx-mem-todo small { color: var(--hx-gold); font-size: 0.86rem; font-weight: 700; }
#crew-hq .hqx-mem-todo:disabled small { color: rgba(255, 255, 255, 0.5); }
#crew-hq .hqx-mem-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; font-size: 1.15rem; }
#crew-hq .hqx-mem-all { min-height: 3rem; border: 0; border-radius: 999px; background: #fbf6ec; color: var(--hx-forest); font: 700 0.95rem var(--sans, "DM Sans", sans-serif); cursor: pointer; }

/* the crew */
#crew-hq .hqx-crew { display: flex; gap: 0.7rem; margin: 0; padding: 0.2rem 0.1rem 0.6rem; overflow-x: auto; list-style: none; scroll-snap-type: x proximity; }
#crew-hq .hqx-crew li { flex: none; scroll-snap-align: start; }
#crew-hq .hqx-person { display: grid; align-content: center; justify-items: center; gap: 0.4rem; width: 7.4rem; min-height: 9rem; padding: 0.9rem 0.6rem; border: 0; border-radius: 20px; background: var(--hx-card); box-shadow: var(--hx-shadow); color: var(--hx-ink); font: inherit; cursor: pointer; }
#crew-hq .hqx-person .hq-face { width: 3.6rem; height: 3.6rem; font-size: 1.3rem; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #f1e8de; }
#crew-hq .hqx-person.is-owner .hq-face { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--hx-gold); }
#crew-hq .hqx-person b { max-width: 100%; overflow: hidden; font-size: 0.95rem; white-space: nowrap; text-overflow: ellipsis; }
#crew-hq .hqx-person small { padding: 0.15rem 0.6rem; border-radius: 999px; background: #f3eee2; color: #5d5b52; font-size: 0.76rem; font-weight: 700; }
/* Role · fun title on ONE line, cut with … — a long title (or one long word) never widens or breaks the card (owner 2026-10-12). */
#crew-hq .hqx-person { min-width: 0; grid-template-columns: minmax(0, 1fr); }
#crew-hq .hqx-person small.hqx-person-role { display: block; box-sizing: border-box; max-width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* The fun title: its own quiet line under the role pill, up to 2 lines then … (owner 2026-10-13). */
#crew-hq .hqx-person small.hqx-person-fun { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 100%; min-width: 0; margin-top: -0.1rem; padding: 0; border-radius: 0; background: none; color: #7a6a3a; font-size: 0.74rem; font-weight: 600; font-style: italic; line-height: 1.25; overflow-wrap: anywhere; text-align: center; }
#crew-hq .hqx-person.is-owner small.hqx-person-fun { background: none; color: #7a6a3a; }
/* Every card in the row as tall as the tallest (a fun title adds a line). */
#crew-hq .hqx-crew > li { display: flex; }
#crew-hq .hqx-crew > li > .hqx-person { flex: 1 1 auto; align-content: start; }
#crew-hq .hqx-crew-hint { margin: -0.2rem 0 0; color: #8a938d; font-size: 0.78rem; }
#crew-hq .hqx-join-wait { margin: 0 0 0.5rem; }
#crew-hq .hqx-about { flex: none; min-width: 2.5rem; min-height: 2.5rem; border: 0; border-radius: 999px; background: transparent; font-size: 1rem; cursor: pointer; }
#crew-hq .hqx-join-btn { min-height: 2.5rem; padding: 0 1rem; border: 1px solid #e6d3a8; border-radius: 999px; background: #fbf5e6; color: #7a5c1c; font: inherit; font-weight: 700; cursor: pointer; }
#crew-hq .hqx-person.is-owner small { background: #fbefc9; color: #7a5c1c; }
#crew-hq .hqx-person.is-invite { border: 2px dashed #d6ccb6; background: transparent; box-shadow: none; }
#crew-hq .hqx-invite-plus { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: #efe9db; color: var(--hx-forest); }

/* what's new */
#crew-hq .hqx-act { padding: 1.1rem 1.15rem 0.75rem; border-radius: 22px; background: var(--hx-card); box-shadow: var(--hx-shadow); }
#crew-hq .hqx-act ul { display: grid; margin: 0; padding: 0; list-style: none; }
#crew-hq .hqx-act li { position: relative; display: flex; gap: 0.85rem; padding: 0 0 1rem; }
#crew-hq .hqx-act li:not(:last-child)::before { content: ""; position: absolute; top: 2.4rem; bottom: 0.2rem; left: 1.2rem; width: 2px; background: #ece4d2; }
#crew-hq .hqx-act-ico { display: grid; flex: none; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; }
#crew-hq .hqx-act-ico.is-orange { background: #fbe1d6; color: #c4541f; }
#crew-hq .hqx-act-ico.is-teal { background: #d5ece7; color: var(--hx-teal); }
#crew-hq .hqx-act-ico.is-gold { background: #fbefc9; color: #8a6a12; }
#crew-hq .hqx-act-main { display: grid; gap: 0.15rem; min-width: 0; padding-top: 0.15rem; font-size: 0.95rem; line-height: 1.35; }
#crew-hq .hqx-act-main em { color: var(--hx-soft); font-style: normal; }
/* Restore on a "changed … right after Mark" line (latest save wins, 2026-10-16). */
#crew-hq .hqx-act-restore { padding: 0; border: 0; background: none; color: var(--hx-teal); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
#crew-hq .hqx-act-restore:disabled { opacity: 0.5; cursor: default; }
#crew-hq .hqx-act-main small { color: var(--hx-soft); font-size: 0.82rem; }
#crew-hq .hqx-act-more { width: 100%; padding: 0.85rem 0 0.4rem; border: 0; border-top: 1px solid #f1e8de; background: none; color: var(--hx-forest); font: 700 0.95rem var(--sans, "DM Sans", sans-serif); text-align: left; cursor: pointer; }
#crew-hq .hqx-band > span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#crew-hq .hqx-band-pill { flex: none; }
#crew-hq .hqx-closes { margin: -0.35rem 0 0; color: var(--hx-soft); font-size: 0.84rem; }
/* Wide web (owner 2026-10-12: "too narrow"): the whole panel, like the other tabs; the crew + What's new beside. */
#crew-hq .hqx-grid { display: grid; gap: 1.6rem; }
#crew-hq .hqx-main,
#crew-hq .hqx-side { display: grid; align-content: start; gap: 1.6rem; min-width: 0; }
@media (min-width: 64rem) {
  #crew-hq .hqx { max-width: none; margin: 0; }
  #crew-hq .hqx-grid { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); align-items: start; gap: 2rem; }
  #crew-hq .hqx-side .hqx-crew { flex-wrap: wrap; overflow: visible; }
  #crew-hq .hqx-side .hqx-person { width: 6.6rem; }
}
/* For you (owner 2026-10-12): a crewmate waiting on your vote, a flight-home reminder. */
#crew-hq .hqx-foryou ul { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
#crew-hq .hqx-fy { display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 1rem; border: 1.5px solid #f3c4a8; border-radius: 20px; background: #fff4ee; box-shadow: var(--hx-shadow); }
#crew-hq .hqx-fy.is-flight { border-color: #c9e3dc; background: #f1f9f6; }
#crew-hq .hqx-fy-ico { display: grid; flex: none; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 14px; background: #fbe1d6; color: #c4541f; font-size: 1.25rem; }
#crew-hq .hqx-fy.is-flight .hqx-fy-ico { background: #d5ece7; }
#crew-hq .hqx-fy-main { display: grid; flex: 1 1 auto; gap: 0.15rem; min-width: 0; }
#crew-hq .hqx-fy-main b { font-size: 0.98rem; line-height: 1.3; }
#crew-hq .hqx-fy-main small { overflow: hidden; color: var(--hx-soft); font-size: 0.84rem; white-space: nowrap; text-overflow: ellipsis; }
#crew-hq .hqx-nudged { margin: -0.35rem 0 0; padding: 0.45rem 0.75rem; border-radius: 12px; background: #fff4ee; color: #9a3d12; font-size: 0.86rem; font-weight: 700; }

/* ——— The floating dock = the app's (owner 2026-10-12: "floating buttons on wide web should be the same on the phone
   ones"): a light pill; icon buttons in the trip's colour, no boxes; Edit / Save one filled pill with a pen. ——— */
html.wb-new .exp-fab-stack,
html.wb-new .exp-fab-dock {
  gap: 0.15rem;
  padding: 0.3rem;
  border: 1px solid color-mix(in srgb, var(--forest, #1f3d30) 14%, transparent);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 12px 28px -12px rgba(19, 37, 30, 0.45), 0 2px 6px rgba(19, 37, 30, 0.08);
}
html.wb-new .exp-fab-stack > .exp-fab,
html.wb-new .exp-fab-dock > .exp-fab,
html.wb-new .exp-fab-stack > .plc-float.is-docked,
html.wb-new .exp-fab-dock > .plc-float.is-docked {
  min-height: 2.5rem;
  height: 2.5rem;
  padding: 0 0.95rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--forest, #1f3d30);
  box-shadow: none;
  font: 700 0.86rem var(--sans);
}
html.wb-new .exp-fab-stack > .exp-fab:hover,
html.wb-new .exp-fab-dock > .exp-fab:hover,
html.wb-new .exp-fab-stack > .plc-float.is-docked:hover,
html.wb-new .exp-fab-dock > .plc-float.is-docked:hover { background: color-mix(in srgb, var(--forest, #1f3d30) 9%, transparent); }
/* the icon buttons (PDF, Save a place): round, icon only — their names stay for screen readers */
html.wb-new .exp-fab:has(.exp-fab-ico):not(:has(.exp-fab-label)) { width: 2.5rem; padding: 0; }
html.wb-new .exp-fab-stack > .plc-float.is-docked,
html.wb-new .exp-fab-dock > .plc-float.is-docked {
  position: relative;
  width: 2.5rem;
  min-width: 2.5rem;
  padding: 0;
  overflow: hidden;
  font-size: 0;
}
html.wb-new .exp-fab-stack > .plc-float.is-docked span,
html.wb-new .exp-fab-dock > .plc-float.is-docked span { display: none; }
html.wb-new .exp-fab-stack > .plc-float.is-docked::before,
html.wb-new .exp-fab-dock > .plc-float.is-docked::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Edit / Save: the one filled pill, in the trip's colour */
html.wb-new .exp-fab-stack > :is(.exp-fab-edit, .exp-fab-save):not([hidden]),
html.wb-new .exp-fab-dock > :is(.exp-fab-edit, .exp-fab-save):not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0.1rem;
  padding: 0 1.15rem;
  background: var(--forest, #1f3d30);
  color: #fff;
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--forest, #1f3d30) 70%, transparent);
}
html.wb-new .exp-fab-stack > :is(.exp-fab-edit, .exp-fab-save):hover,
html.wb-new .exp-fab-dock > :is(.exp-fab-edit, .exp-fab-save):hover { background: var(--forest-deep, #14291f); }
html.wb-new .exp-fab-stack > .exp-fab-edit::before,
html.wb-new .exp-fab-dock > .exp-fab-edit::before {
  content: "";
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.wb-new :is(.exp-fab-stack, .exp-fab-dock) > .plc-float.is-docked { display: inline-flex; align-items: center; justify-content: center; }
html.wb-new :is(.exp-fab-stack, .exp-fab-dock) > .plc-float.is-docked::before { position: static; inset: auto; transform: none; }
/* (the shared "light on a dark bar" rule in shared/buttons.css forces Edit cream with !important — not on this light pill) */
html.wb-new :is(.exp-fab-stack, .exp-fab-dock) > :is(.exp-fab-edit, .exp-fab-save):not([hidden]):not(:disabled) {
  border: 0 !important;
  background: var(--forest, #1f3d30) !important;
  color: #fff !important;
}
html.wb-new :is(.exp-fab-stack, .exp-fab-dock) > :is(.exp-fab-edit, .exp-fab-save):not([hidden]):not(:disabled):hover { background: var(--forest-deep, #14291f) !important; }
html.wb-new :is(.exp-fab-stack, .exp-fab-dock) > .plc-float.is-docked { inset: auto; margin: 0; }
html.wb-new :is(.exp-fab-stack, .exp-fab-dock) > .exp-fab-export { width: 2.5rem; min-width: 2.5rem; padding: 0; justify-content: center; }
html.wb-new :is(.exp-fab-stack, .exp-fab-dock) > .exp-fab-export .exp-fab-label { display: none; }
html.wb-new :is(.exp-fab-stack, .exp-fab-dock) > button:not(.exp-fab-edit):not(.exp-fab-save):not(.plc-float) {
  min-height: 2.5rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--forest, #1f3d30);
  box-shadow: none;
}
html.wb-new :is(.exp-fab-stack, .exp-fab-dock) > button:not(.exp-fab-edit):not(.exp-fab-save):not(.plc-float):hover { background: color-mix(in srgb, var(--forest, #1f3d30) 9%, transparent); }
html.wb-new :is(.exp-fab-stack, .exp-fab-dock) > .exp-fab-add > button:not([role="menuitem"]) {
  width: 2.5rem;
  min-width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--forest, #1f3d30);
  box-shadow: none;
  font-size: 1.25rem;
}
html.wb-new :is(.exp-fab-stack, .exp-fab-dock) > .exp-fab-add > button:not([role="menuitem"]):hover { background: color-mix(in srgb, var(--forest, #1f3d30) 9%, transparent); }
html.wb-new :is(.exp-fab-stack, .exp-fab-dock) > .plc-float.is-docked[hidden] { display: none !important; }
html.wb-new :is(.exp-fab-stack, .exp-fab-dock) > .plc-float.is-docked.is-editing { display: none !important; }

/* ═══ The wide website day view = the app's (owner 2026-10-12; copied from mobile/www/css/workbook-new.css, scoped to #panel-itinerary) ═══ */
/* ——— Plan · compact stop cards (owner 2026-10-11 mock — app only) ——— */
html.wb-new #panel-itinerary .agenda-list .agenda-item.nu-ag-card.nu-ag-compact {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line, #e7dfcf);
  border-left-width: 1px;
  border-radius: 14px;
  background: #fffdf8;
  text-align: left;
}
html.wb-new #panel-itinerary .agenda-list .agenda-item.nu-ag-card.nu-ag-compact.is-now { border: 2px solid #e6b54a; }
/* a finished stop keeps its colour: the ✓ says it's done (owner 2026-10-13: "can we not grey out finished stops") */
html.wb-new #panel-itinerary .agenda-list .agenda-item.nu-ag-card.nu-ag-compact.is-lakbi:not(.is-now) { border-color: #f0dfb5; }
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  overflow: hidden;
  border-radius: 11px;
  background: color-mix(in srgb, var(--c, #1e3a2f) 13%, #fff);
  font-size: 1.25rem;
}
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-tile.has-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-body { display: grid; flex: 1 1 auto; gap: 0.08rem; min-width: 0; }
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-body > b { overflow: hidden; color: var(--ink, #263b32); font-size: 0.95rem; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-meta { overflow: hidden; color: var(--ink-soft, #66706a); font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-chips > * { margin: 0; }
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-chip { padding: 0.08rem 0.45rem; border-radius: 999px; background: #f1ebde; color: #4b5650; font-size: 0.66rem; font-weight: 700; }
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-chip.is-lakbi { background: #fdf0d2; color: #633806; }
html.wb-new #panel-itinerary .nu-ag-compact .dv-status { font-size: 0.66rem; }
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-done { display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #e3efe6; color: #2f7a52; }
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-done svg { width: 0.9rem; height: 0.9rem; }

/* Flights in the day: the compact card (owner 2026-10-11) — its "Your departure" chip with faces */
html.wb-new #panel-itinerary .nu-ag-compact .nu-ag-fly { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.08rem 0.45rem; border-radius: 999px; background: #e6eef5; color: #20476b; font-size: 0.66rem; font-weight: 700; }
html.wb-new #panel-itinerary .nu-ag-compact .nu-ag-fly svg { width: 0.75rem; height: 0.75rem; }
/* Tonight's hotel at the day's end: the same card shape as the stops */
html.wb-new #panel-itinerary .nu-dp-hotel {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.5rem 0.75rem 0.75rem 3.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line, #e7dfcf);
  border-radius: 14px;
  background: #fffdf8;
}
html.wb-new #panel-itinerary .nu-dp-hotel > :first-child { flex: none; width: 2.6rem; height: 2.6rem; overflow: hidden; border-radius: 11px; }
html.wb-new #panel-itinerary .nu-dp-hotel > :first-child img { width: 100%; height: 100%; object-fit: cover; }
html.wb-new #panel-itinerary .nu-dp-hotel > span { display: grid; gap: 0.08rem; min-width: 0; }
html.wb-new #panel-itinerary .nu-dp-hotel b { overflow: hidden; color: var(--ink, #263b32); font-size: 0.95rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
html.wb-new #panel-itinerary .nu-dp-hotel small { color: var(--ink-soft, #66706a); font-size: 0.76rem; }
html.wb-new #panel-itinerary .nu-dp-hotel > .hotel-media { flex: 0 0 2.6rem !important; width: 2.6rem !important; height: 2.6rem !important; min-height: 0 !important; aspect-ratio: auto !important; }
/* The day panel's hotel card sits flush with its text (the 3.6rem indent lines up with the timeline only). */
html.wb-new #panel-itinerary .nu-day-panel .nu-dp-hotel { margin: 0; }

/* ——— Plan · the timeline says status in one colour; the card says the category (owner 2026-10-11, app only) ——— */
html.wb-new #panel-itinerary .agenda-list .dv-dot.is-done { --c: #2f7a52; background: #2f7a52; border: 0; }
html.wb-new #panel-itinerary .agenda-list .dv-dot.is-upcoming { --c: #cbbfa6; background: #fffdf8; border: 2.5px solid #cbbfa6; }
html.wb-new #panel-itinerary .agenda-list .dv-dot.is-now { --c: #e8693a; background: #e8693a; border: 0; box-shadow: 0 0 0 0.35rem rgba(232, 105, 58, 0.22); }
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-kind { color: var(--c, #263b32); font-weight: 700; }
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-tile { background: color-mix(in srgb, var(--c, #1e3a2f) 16%, #fff); }
html.wb-new #panel-itinerary .agenda-list .agenda-item.nu-ag-card.type-attraction { --c: #9a3f2c; }
html.wb-new #panel-itinerary .agenda-list .agenda-item.nu-ag-card.type-shop { --c: #6d28d9; }
html.wb-new #panel-itinerary .agenda-list .agenda-item.nu-ag-card.type-freetime { --c: #66706a; }
/* the now line: dot on the timeline, a rule to the edge, the time and the free time */
html.wb-new #panel-itinerary .agenda-list .agenda-gap.nu-now-line {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.2rem 0;
  padding: 0 0.6rem 0 calc(4.2rem + 0.6rem + 0.8rem - 0.62rem);
  background: none;
  border: 0;
}
html.wb-new #panel-itinerary .nu-now-line .nu-now-dot { flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #e8693a; box-shadow: 0 0 0 0.3rem rgba(232, 105, 58, 0.2); }
html.wb-new #panel-itinerary .nu-now-line .nu-now-rule { flex: 1 1 auto; height: 2px; background: #e8693a; }
html.wb-new #panel-itinerary .nu-now-line .nu-now-txt { flex: none; color: #c4541f; font-size: 0.8rem; font-weight: 800; }
/* the now line: no band behind it, the rule to the edge */
html.wb-new #panel-itinerary .agenda-list .agenda-gap.is-now.nu-now-line { justify-content: flex-start; background: none; border: 0; box-shadow: none; }
html.wb-new #panel-itinerary .agenda-list .agenda-gap.is-now.nu-now-line::before,
html.wb-new #panel-itinerary .agenda-list .agenda-gap.is-now.nu-now-line::after { display: none; }
html.wb-new #panel-itinerary .nu-now-line .nu-now-rule { min-width: 1.5rem; }
/* categories, each its own colour (owner 2026-10-11: the card says the category) */
html.wb-new #panel-itinerary .agenda-list .agenda-item.nu-ag-card.type-attraction { --c: #0f766e; }
html.wb-new #panel-itinerary .agenda-list .agenda-item.nu-ag-card.type-food { --c: #c2410c; }
html.wb-new #panel-itinerary .agenda-list .agenda-item.nu-ag-card.type-activity { --c: #be123c; }
html.wb-new #panel-itinerary .agenda-list .agenda-item.nu-ag-card.type-tour { --c: #a16207; }
html.wb-new #panel-itinerary .agenda-list .agenda-item.nu-ag-card.type-shop { --c: #6d28d9; }
html.wb-new #panel-itinerary .agenda-list .agenda-item.nu-ag-card.type-rest { --c: #a21caf; }
html.wb-new #panel-itinerary .agenda-list .agenda-item.nu-ag-card.type-transpo { --c: #0369a1; }

/* ——— Plan · the now line in the timeline's grid, and the Up next card (owner 2026-10-11 screenshots, app only) ——— */
html.wb-new #panel-itinerary .agenda-list .nu-ag-row.dv-row.nu-now-line { align-items: center; margin: 0.1rem 0; padding: 0; background: none; border: 0; }
html.wb-new #panel-itinerary .agenda-list .nu-now-line .nu-now-time { align-self: center; color: #c4541f; font-weight: 800; }
html.wb-new #panel-itinerary .agenda-list .nu-now-line .nu-now-dot { justify-self: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #e8693a; box-shadow: 0 0 0 0.3rem rgba(232, 105, 58, 0.2); }
html.wb-new #panel-itinerary .agenda-list .nu-now-line .nu-now-bar { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
html.wb-new #panel-itinerary .agenda-list .nu-now-line .nu-now-rule { flex: 1 1 auto; min-width: 1rem; height: 2px; background: #e8693a; }
html.wb-new #panel-itinerary .agenda-list .nu-now-line .nu-now-txt { flex: none; color: #c4541f; font-size: 0.8rem; font-weight: 800; white-space: nowrap; }
html.wb-new #panel-itinerary .agenda-list .dv-row.is-next-row .nu-ag-time { color: var(--ink, #263b32); font-weight: 800; }
html.wb-new #panel-itinerary .agenda-list .dv-row.is-next-row .dv-dot.is-upcoming { --c: #c98a12; border-color: #c98a12; }
html.wb-new #panel-itinerary .agenda-list .agenda-item.nu-ag-card.nu-ag-compact.is-next { display: block; padding: 0.75rem 0.85rem; border: 1.5px solid #ecd7a6; border-radius: 16px; box-shadow: 0 6px 18px rgba(120, 90, 30, 0.08); }
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-body.is-next { gap: 0.2rem; }
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-kicker { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-kicker b { color: #8a5a12; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-kick-lakbi { color: #8a5a12; font-size: 0.72rem; font-weight: 800; }
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-body.is-next > b.nu-agc-title { overflow: visible; -webkit-line-clamp: unset; line-clamp: none; display: block; /* the whole name — a clamped one spilled over the line below (2026-10-21) */ color: var(--ink, #263b32); font-size: 1.1rem; font-weight: 800; line-height: 1.25; white-space: normal; }
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-body.is-next .nu-agc-meta { white-space: normal; }
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-why { margin-top: 0.45rem; padding: 0.6rem 0.75rem; border-radius: 12px; background: #fbf3df; color: #4b4130; font-size: 0.82rem; line-height: 1.45; }
html.wb-new #panel-itinerary .agenda-list .nu-now-line .nu-now-time { margin: 0; padding: 0; line-height: 1; }
html.wb-new #panel-itinerary .agenda-list .nu-now-line .nu-now-dot { position: relative; z-index: 1; margin: 0; }

/* ——— Plan · a time held for the crew's vote (owner 2026-10-11 screenshot, app only) ——— */
html.wb-new #panel-itinerary .agenda-list .nu-vote-row .nu-ag-time { color: #c4541f; }
html.wb-new #panel-itinerary .agenda-list .nu-vote-row .dv-dot.nu-vote-dot { --c: #e8693a; background: #fffdf8; border: 2.5px dashed #e8693a; }
html.wb-new #panel-itinerary .agenda-list .nu-vote-card { display: grid; gap: 0.15rem; width: 100%; min-width: 0; margin: 0; padding: 0.7rem 0.85rem; border: 1.5px dashed #e8a27e; border-radius: 16px; background: #fff8f2; color: var(--ink, #263b32); font: inherit; text-align: left; }
html.wb-new #panel-itinerary .agenda-list button.nu-vote-card { cursor: pointer; }
html.wb-new #panel-itinerary .agenda-list button.nu-vote-card:active { background: #fdeee2; }
html.wb-new #panel-itinerary .nu-vote-card .nu-vote-kick { color: #c4541f; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
html.wb-new #panel-itinerary .nu-vote-card .nu-vote-kick::before { content: "●"; margin-right: 0.35rem; }
html.wb-new #panel-itinerary .nu-vote-card .nu-vote-title { font-size: 1rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
html.wb-new #panel-itinerary .nu-vote-card .nu-vote-line { color: #6b5e52; font-size: 0.8rem; }
html.wb-new #panel-itinerary .agenda-list .nu-vote-row.is-won .nu-vote-kick { color: #2f7a52; }
html.wb-new #panel-itinerary .agenda-list .nu-vote-row.is-now .nu-ag-time { font-weight: 800; }
html.wb-new #panel-itinerary .agenda-list .nu-vote-row.is-now .dv-dot.nu-vote-dot { border-style: solid; background: #e8693a; box-shadow: 0 0 0 0.3rem rgba(232, 105, 58, 0.2); }
/* Now beeps (owner 2026-10-11): the orange dot pulses — the now line, a stop on now, a vote on now (app only). */
@keyframes nu-now-ping {
  0% { box-shadow: 0 0 0 0 rgba(232, 105, 58, 0.55); }
  70% { box-shadow: 0 0 0 0.7rem rgba(232, 105, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 105, 58, 0); }
}
html.wb-new #panel-itinerary .agenda-list :is(.nu-now-line .nu-now-dot, .dv-dot.is-now, .nu-vote-row.is-now .dv-dot.nu-vote-dot) { animation: nu-now-ping 1.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  html.wb-new #panel-itinerary .agenda-list :is(.nu-now-line .nu-now-dot, .dv-dot.is-now, .nu-vote-row.is-now .dv-dot.nu-vote-dot) { animation: none; }
}

html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-chip.is-group { background: #fde8dc; color: #9a3d12; }
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-kick-lakbi.is-group { color: #b4501c; }
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-gkind { color: #8a8478; font-weight: 500; }
html.wb-new #panel-itinerary .agenda-list .nu-vote-row.is-passed .nu-vote-card { border-color: #d6ccb6; background: #faf7f0; }
html.wb-new #panel-itinerary .agenda-list .nu-vote-row.is-passed .nu-vote-kick { color: #8a6a1f; }
html.wb-new #panel-itinerary .agenda-list .nu-vote-row.is-passed .dv-dot.nu-vote-dot { border-color: #cbbfa6; }
html.wb-new #panel-itinerary .agenda-list .agenda-item.nu-ag-compact.is-mark-new { border-color: #7cc49a; background: #f2faf5; box-shadow: inset 4px 0 0 #2f7a52; }
html.wb-new #panel-itinerary .agenda-list .agenda-item.nu-ag-compact.is-mark-modified { border-color: #e6c27a; background: #fffaf0; box-shadow: inset 4px 0 0 #c98a12; }
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-chip.is-mark-new { background: #2f7a52; color: #fff; }
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-chip.is-mark-edit { background: #c98a12; color: #fff; }
html.wb-new #panel-itinerary .nu-dp-hotel-pic { display: grid; place-items: center; background: #f1e8de; font-size: 1.2rem; }
html.wb-new #panel-itinerary .agenda-list .agenda-item.nu-ag-card.nu-ag-compact:not(.is-now):not(.is-next) { border-left: 1px solid var(--line, #e7dfcf); }
html.wb-new #panel-itinerary .agenda-list .agenda-item.nu-ag-card.nu-ag-compact::before { display: none; }

/* Trip header facts: one quiet line, = the app (owner 2026-10-12: "why we still have this on wide web") */
html.wb-new .mast-meta .nu-facts-row.nu-hline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.7rem; color: var(--cream, #f6efe1); font-size: 1rem; font-weight: 500; line-height: 1.3; }
html.wb-new .nu-hline .nu-hl-part { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; }
html.wb-new .nu-hline .nu-hl-part > svg { flex: none; width: 1.1rem; height: 1.1rem; opacity: 0.9; }
html.wb-new .nu-hline .nu-hl-dot { font-style: normal; font-size: 0.8rem; opacity: 0.5; }

/* ——— The planner in a narrow window = the app's (owner 2026-10-12: "narrow web for planning is hard to plan, just
   copy what web mobile / mobile do"; 06r). The map always on top (a tapped stop's chip showed on a hidden Map pane),
   then Itinerary · Your places and the days, the list under them; a stop or place = the app's chip on the map (⌃ opens
   its details as a bottom sheet); editing or adding a stop = a window over the planner. Live navigation stays in the
   apps. The rules below the layout are the app's (src/app/planner/app.css) at the website's narrow width. ——— */
@media (max-width: 47.99rem) {
  html.wbp-open #panel-itinerary.wbp-on > .wbp-top,
  html.wbp-open #panel-itinerary.wbp-on > .wbp.wbp3,
  html.wbp-open #panel-itinerary.wbp-on > .wbp.wbp3.is-editing { display: contents; }
  html.wbp-open #panel-itinerary.wbp-on > .wbp-top > .wbp-topbar { order: 0; flex: none; }
  html.wbp-open #panel-itinerary.wbp-on > .wbp.wbp3 > .wbp-stage {
    order: 1;
    display: block;
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    height: clamp(11rem, 34dvh, 22rem);
    border: 0;
  }
  html.wbp-open #panel-itinerary.wbp-on > .wbp-top > .wbp-panes {
    order: 2;
    flex: none;
    position: relative;
    z-index: 2;
    margin-top: -1.1rem;
    padding: 12px 12px 6px;
    border: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -8px 20px -10px rgba(19, 37, 30, 0.25);
  }
  html.wbp-open #panel-itinerary.wbp-on > .wbp-top > .wbp-panes::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    width: 2.5rem;
    height: 0.26rem;
    margin-left: -1.25rem;
    border-radius: 999px;
    background: #d6ccb6;
  }
  html.wbp-open #panel-itinerary.wbp-on > .wbp-top > .wbp-stripbar { order: 3; flex: none; background: var(--wbx-ground, #fbf6ec); border-bottom: 1px solid #e3d8c2; }
  html.wbp-open #panel-itinerary.wbp-on > .wbp.wbp3 > :is(.wbp-side, .wbx) {
    order: 4;
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  html.wbp-open #panel-itinerary.wbp-on > .wbp.wbp3:not([data-pane="places"]) > .wbx,
  html.wbp-open #panel-itinerary.wbp-on > .wbp.wbp3[data-pane="places"] > .wbp-side { display: none; }
  html.wbp-open #panel-itinerary.wbp-on > .wbp.wbp3:not([data-pane="map"]) > .wbp-stage { display: block; }
  /* the map's own search and Fit sit on the map, out of the chip's way */
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbp-mapsearch { top: 10px; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek { left: 10px; right: 10px; bottom: 1.6rem; }
}

/* A place's card on the map (06l peek) — its buttons never go missing (owner 2026-10-11: "Edit stop" sat under the
   sheet and Google Maps ↗ was cut off). It clears the sheet's rounded edge, scrolls inside when it's long, and the
   buttons stay pinned at its foot. */
@media (max-width: 47.99rem) {
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek { bottom: calc(16px + 1.25rem); }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek .wbx-peek-card { overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 47.99rem) {
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek .wbx-peek-actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding-top: 0.6rem;
    background: linear-gradient(rgba(255, 253, 248, 0), #fffdf8 0.6rem);
  }
}

/* ——— A place on the map, phones (owner 2026-10-11, mock A): a slim chip over the sheet; ⌃ opens the details in the
   sheet, the map still showing above. The website (and the app on a tablet) keep the wide card. ——— */
@media (max-width: 47.99rem) {
  /* the chip */
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-card {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto 2.5rem;
    align-items: center;
    gap: 0 0.6rem;
    max-height: none;
    padding: 0.5rem;
    overflow: visible;
    border-radius: 18px;
  }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-card.is-bare { grid-template-columns: minmax(0, 1fr) auto 2.5rem; padding-left: 0.85rem; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-media { width: 3.5rem; height: 3.5rem; min-height: 0; border-radius: 12px; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-card.is-bare .wbx-peek-media { display: none; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-photos { display: block; height: 100%; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-photos img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-photos img:not(:first-child),
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-credit { display: none; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-main { gap: 0.1rem; padding: 0; overflow: hidden; cursor: pointer; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-main h3 { overflow: hidden; font-size: 1.05rem; white-space: nowrap; text-overflow: ellipsis; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-main > :not(h3, .wbx-meta, .is-when) { display: none; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-main > :is(.wbx-meta, .is-when) { margin: 0; overflow: hidden; font-size: 0.76rem; white-space: nowrap; text-overflow: ellipsis; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-actions { position: static; flex-wrap: nowrap; padding: 0; background: none; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-actions > :not(.wbx-cf-go) { display: none; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-actions .wbx-cf-go { width: auto; min-height: 2.5rem; padding: 0 0.85rem; font-size: 0.8rem; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek .wbx-peek-more {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--lb-primary, #1e3a2f) 10%, #fff);
    color: var(--lb-primary, #1e3a2f);
  }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-x {
    top: -0.55rem;
    right: -0.35rem;
    width: 1.7rem;
    height: 1.7rem;
    min-height: 0;
    font-size: 0.7rem;
    border: 1px solid #e3dccb;
    background: #fff;
    box-shadow: 0 2px 6px rgba(19, 37, 30, 0.15);
  }
  /* opened: the details fill the sheet, the map above */
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open { position: fixed; inset: 36vh 0 0 0; z-index: 40; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: auto;
    max-width: none;
    height: 100%;
    max-height: none;
    padding: 0.4rem 1rem 0;
    overflow-y: auto;
    border-radius: 22px 22px 0 0;
    background: #fbf7ef;
    box-shadow: 0 -8px 24px rgba(19, 37, 30, 0.16);
  }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-more { display: none; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-less {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--lb-primary, #1e3a2f);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
  }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-x { top: 0.5rem; right: 0.8rem; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-media { flex: none; min-height: 0; background: none; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-photos { display: flex; gap: 6px; height: 7rem; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-photos img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; border-radius: 14px; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-main { flex: none; padding: 0.7rem 0 1rem; overflow: visible; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-main h3 { font-size: 1.45rem; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-actions {
    position: sticky;
    bottom: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin-top: auto;
    padding: 0.7rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #ece4d2;
    background: #fbf7ef;
  }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-actions > * { flex: 1 1 0; width: auto; min-height: 2.9rem; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-actions .wbx-soft { width: 100%; min-height: 2.9rem; }
}
@media (max-width: 47.99rem) {
  /* the chip's order: photo · name · Edit · ⌃ (one row, whatever the markup order) */
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-card > * { grid-row: 1; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-media { grid-column: 1; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-main { grid-column: 2; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-actions { grid-column: 3; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-more { grid-column: 4; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-card.is-bare .wbx-peek-main { grid-column: 1; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-card.is-bare .wbx-peek-actions { grid-column: 2; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-card.is-bare .wbx-peek-more { grid-column: 3; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-media { height: auto; max-height: none; overflow: visible; }
}
@media (max-width: 47.99rem) {
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-media { position: static; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-photos { position: relative; inset: auto; margin: 0.2rem 0 0; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-credit { position: static; margin: 0.35rem 0 0; padding: 0; background: none; color: #6b6a62; font-size: 0.74rem; }
  /* the chip's Edit: one short word, the name keeps its room */
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-actions .wbx-cf-go { font-size: 0; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-actions .wbx-cf-go::before { content: "✎ Edit"; font-size: 0.8rem; }
}
@media (max-width: 47.99rem) {
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-card.is-bare .wbx-peek-main { padding: 0; }
}
/* The opened details fit what they say (owner 2026-10-11: "so much dead empty space"): a bottom sheet as tall as its
   content (at most 72% of the screen), the map above it, the day list hidden behind it while it's open. */
@media (max-width: 47.99rem) {
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open { inset: auto 0 0 0; max-height: 72vh; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-card { height: auto; max-height: 72vh; padding-top: 0.5rem; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-card::before {
    content: "";
    align-self: center;
    flex: none;
    width: 2.5rem;
    height: 0.26rem;
    margin: 0 0 0.2rem;
    border-radius: 999px;
    background: #d6ccb6;
  }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-card.is-bare .wbx-peek-main,
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-main { gap: 0.45rem; padding: 0.35rem 0 1rem; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-main h3 { margin: 0; padding-right: 2.5rem; font-size: 1.5rem; line-height: 1.15; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-meta { margin: 0; font-size: 0.82rem; }
  /* the facts: one tidy list — the time first-class, the address quieter */
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-line { margin: 0; font-size: 0.86rem; line-height: 1.4; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-line.is-when { order: -1; display: inline-flex; align-self: flex-start; align-items: center; gap: 0.3rem; padding: 0.3rem 0.65rem; border-radius: 999px; background: color-mix(in srgb, var(--lb-primary, #1e3a2f) 9%, #fff); color: var(--lb-primary, #1e3a2f); font-weight: 700; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-line.is-where { color: #5d5b52; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-main > h3 { order: -3; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-main > .wbx-meta { order: -2; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-why { margin: 0.15rem 0 0; padding: 0.7rem 0.85rem; border-radius: 12px; font-size: 0.86rem; line-height: 1.45; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-quiet { margin: 0; color: #8a8478; font-size: 0.8rem; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek.is-open .wbx-peek-actions { margin-top: 0; }
}

/* Editing or adding a stop (owner 2026-10-11: "inline edit is making our app worse"): on phones the card opens as a
   window over the planner — a bottom sheet on a dimmed backdrop, like New event — instead of inside the list. Same
   card, same buttons (Done / Change place / Remove, More). Picking a pin on the map still hides it (lm-picking). */
@keyframes lb-plan-card-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 47.99rem) {
  html.wbp-open #panel-itinerary.wbp-on .wbp3 #detail-slot > aside.detail {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    max-height: 88dvh;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 0 0 100vmax rgba(19, 37, 30, 0.45), 0 -10px 30px rgba(0, 0, 0, 0.18);
    animation: lb-plan-card-up 0.22s cubic-bezier(0.2, 0, 0, 1);
  }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 #detail-slot > aside.detail::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: 0.26rem;
    margin: 0 auto 0.6rem;
    border-radius: 999px;
    background: #d6ccb6;
  }
}
@media (max-width: 47.99rem) and (prefers-reduced-motion: reduce) {
  html.wbp-open #panel-itinerary.wbp-on .wbp3 #detail-slot > aside.detail { animation: none; }
}

/* The peek's ⌃ / ‹ Back: hidden on a wide window (the card sits beside the list); the narrow rules above show them. */
:where(.wbx-peek-more, .wbx-peek-less) { display: none; }
@media (max-width: 47.99rem) {
  /* the editor window: the app's dimmed backdrop and plain edge (the website's card border and shadow won) */
  html.wbp-open #panel-itinerary.wbp-on .wbp3 #detail-slot > aside.detail.detail {
    border: 0;
    box-shadow: 0 0 0 100vmax rgba(19, 37, 30, 0.45), 0 -10px 30px rgba(0, 0, 0, 0.18);
  }
  /* the map's Fit sits under its search, not behind it */
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbp-fit { top: 4.6rem; right: 10px; }
  /* the page's Save a place float stays off the planner (the app's planner has none; Your places has its own +) */
  html.wbp-open #plc-float { display: none; }
}
@media (max-width: 47.99rem) {
  /* the map's own buttons rest while a window is open (they sat bright over its backdrop) */
  html.wbp-open #panel-itinerary.wbp-on:has(#detail-slot > aside.detail) .wbp3 .wbp-stage :is(.wbp-fit, .wbp-mapsearch) { visibility: hidden; }
}

/* Saved places / Food places have no Edit bar: Save a place sits in the same dark bar as on the other tabs
   (src/web/player/02r-places-add.js placesFloatBar, owner 2026-10-12). */
html.wb-new .plc-float-bar[hidden] { display: none !important; }
html.wb-new .plc-float-bar .plc-float { position: static; box-shadow: none; }

/* A window over the page (Start a vote, a confirm, a picker, a share card…): the LakBi bubble, Save a place and the
   dock step aside — they sat bright over the window's backdrop and its buttons (UI hunt 2026-10-12). Native
   <dialog>s sit in the top layer already. App twin: mobile/www/css/app.css (same list). */
html.wb-new body:has(:is(.hqv-back, .lb-cf-back, .lbw-back, .lbpd-scrim, .lbr-backdrop, .lbsel-scrim, .lb-ss-scrim, .geo-map-scrim, .tvp-back, .owe-balance-back, .lb-del-back, .files-related-back, .place-back, .sl-back, .pv-back, .activity-share-backdrop, .share-card-backdrop, .nu-mf-scrim)) :is(#lakbi-chat-launch, .lakbi-chat-launch, #plc-float, .plc-float-bar, .exp-fab-wrap) {
  visibility: hidden !important;
}

/* The tab strip overflows at any width (768–1100 px, 150% zoom — UI hunt 2026-10-12: tabs were cut with no hint): the
   narrow window's fade + › show whenever there's more to the right (04h syncSheetTabsScrollHint sets the classes). */
@media (min-width: 48rem) {
  html.wb-new .sheet-tabs-scroller.is-overflow { position: relative; display: flex; align-items: stretch; min-width: 0; }
  html.wb-new .sheet-tabs-scroller.is-overflow > .sheet-tabs { flex: 1 1 auto; min-width: 0; }
  html.wb-new .sheet-tabs-scroller.is-overflow .sheet-tabs-fade {
    display: block;
    position: absolute;
    top: 0;
    right: 2.1rem;
    bottom: 0;
    z-index: 2;
    width: 2.6rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.16s ease;
    background: linear-gradient(to right, transparent, var(--forest, #1f3d30) 80%); /* the strip sits on the mast's forest */
  }
  html.wb-new .sheet-tabs-scroller.is-overflow .sheet-tabs-more {
    display: inline-flex;
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    align-self: center;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    margin: 0 0 0 0.2rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cream, #f5f0e3) 16%, transparent);
    color: var(--cream, #f5f0e3);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
  }
  html.wb-new .sheet-tabs-scroller.is-overflow:not(.is-at-end) .sheet-tabs-fade { opacity: 1; }
  html.wb-new .sheet-tabs-scroller.is-overflow:not(.is-at-end) .sheet-tabs-more { opacity: 1; pointer-events: auto; }
  html.wb-new .sheet-tabs-scroller.is-overflow .sheet-tabs-more svg { display: block; width: 1rem; height: 1rem; }
}

/* Wide web day heading in a narrower column (768–1100 px — UI hunt 2026-10-12: the day label wrapped and a long
   summary became a 7-line column beside the tools). Title | tools stay on one row (owner 2026-10-10), the summary
   takes the full width under them; a very narrow column stacks title, tools, summary. */
html.wb-new #panel-itinerary .agenda-head:has(> .dv-headrow) { container: dvhead / inline-size; }
@container dvhead (max-width: 56rem) {
  html.wb-new .dv-headrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title tools" "summary summary"; align-items: center; }
  html.wb-new .dv-headrow > .dv-headwords { display: contents; }
  html.wb-new .dv-headrow .dv-title { grid-area: title; }
  html.wb-new .dv-headrow .dv-summary { grid-area: summary; }
  html.wb-new .dv-headrow > .dv-headtools { grid-area: tools; }
}
@container dvhead (max-width: 38rem) {
  html.wb-new .dv-headrow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "tools" "summary"; }
  html.wb-new .dv-headrow > .dv-headtools { justify-self: start; }
}

/* The LakBi launcher on a trip page is the app's round mascot at every width (UI hunt 2026-10-12: the "Ask LakBi ·
   Your trip buddy" pill sat over Expenses' tabs, Search & filters and Prep's + Add item on open). Its name stays
   the button's title ("Ask LakBi"). The phone width already had the round one. */
@media (min-width: 40.01rem) {
  html.wb-new .lakbi-chat-launch {
    justify-content: center;
    gap: 0;
    width: 3.6rem;
    height: 3.6rem;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
  }
  html.wb-new .lakbi-chat-launch .lakbi-launch-text { display: none; }
  html.wb-new .lakbi-chat-launch .lakbi-launch-dot { left: auto; right: 0.2rem; top: 0.2rem; }
}

/* Narrow window: Expenses' + menu opens up from its own button (the first in the dock) instead of reaching back
   across the page (UI hunt 2026-10-12, 480 px). */
@media (max-width: 40rem) {
  html.wb-new :is(.exp-fab-stack, .exp-fab-dock) > .exp-fab-add > .exp-fab-menu { left: 0; right: auto; min-width: 11rem; }
}

/* A review written on another trip of the same place (relationships audit K4, 2026-10-13): read-only, labelled. */
.rv-other-trip { margin-left: 6px; font-size: 0.76rem; font-weight: 500; color: var(--muted, #5f6b64); white-space: nowrap; }

/* Map of the day: back to the list after a card jumped up to the map (owner 2026-10-13: "jump in, jump out") */
html.wb-new .nu-day-recap.is-top { position: relative; }
/* above the play bar, clear of the "Off the route" list at the top (owner 2026-10-26 screenshot) */
html.wb-new .nu-dr-back { max-width: calc(100% - 2rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: absolute; top: auto; bottom: 5.6rem; left: 50%; transform: translateX(-50%); z-index: 6; border: 0; border-radius: 999px; padding: 0.5rem 1rem; background: var(--forest, #1f3d30); color: #fff; font: 600 0.8rem "DM Sans", system-ui, sans-serif; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); cursor: pointer; max-width: calc(100% - 2rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: nu-dr-back-in 0.25s ease-out; }
html.wb-new .nu-dr-back:hover { filter: brightness(1.12); }
@keyframes nu-dr-back-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { html.wb-new .nu-dr-back { animation: none; } }
html.wb-new .nu-day-recap.is-top .dr-chap { padding: 0.8rem 1.1rem 0.2rem; }

/* the itinerary PDF is in the Map of the day / Day Tour card's buttons: no floating copy (owner 2026-10-13) */
html.wb-new:has(.nu-day-recap.is-top [data-export-pdf]) #itin-fab-wrap .exp-fab-export { display: none; }
html.wb-new:has(.nu-day-recap.is-top [data-export-pdf]) #itin-fab-wrap:not(:has(.exp-fab:not(.exp-fab-export))) { display: none; }

/* ——— Public trip header row, one calm set (owner 2026-10-13: "too much happening, not in a good order") ———
   ⚑ quiet · ♡ likes · Share · Copy this itinerary (the one light button) · your account last.
   Home is gone here: the ← at the top-left already goes back to World. */
html.wb-new.pub-mast .sheet-nav-tray #public-nav > #nav-home { display: none !important; }
html.wb-new.pub-mast .sheet-nav-tray:has(#public-nav:not([hidden])) { align-items: center; gap: 0.5rem; }
html.wb-new.pub-mast .sheet-nav-tray:has(#public-nav:not([hidden])) > #account-slot { order: 2; }
html.wb-new.pub-mast .sheet-nav-tray:has(#public-nav:not([hidden])) > #public-nav { order: 1; display: flex; align-items: center; gap: 0.5rem; }
html.wb-new.pub-mast .sheet-nav-tray #public-nav > #nav-report { order: 0; }
html.wb-new.pub-mast .sheet-nav-tray #public-nav > #nav-upvote { order: 1; }
html.wb-new.pub-mast .sheet-nav-tray #public-nav > #nav-share { order: 2; }
html.wb-new.pub-mast .sheet-nav-tray #public-nav > #nav-edit { order: 3; }
html.wb-new.pub-mast .sheet-nav-tray #public-nav > button:not([hidden]) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: auto !important;
  min-width: 2.5rem !important;
  height: 2.5rem !important;
  min-height: 2.5rem !important;
  padding: 0 0.85rem !important;
  border: 1px solid rgba(251, 246, 236, 0.22) !important;
  border-radius: 999px !important;
  background: rgba(19, 37, 30, 0.35) !important;
  color: #fbf6ec !important;
  font: 600 0.84rem var(--sans, system-ui, sans-serif) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html.wb-new.pub-mast .sheet-nav-tray #public-nav > button .public-nav-svg { width: 1.05rem; height: 1.05rem; color: currentColor !important; stroke: currentColor; opacity: 1; flex: none; }
html.wb-new.pub-mast .sheet-nav-tray #public-nav > button:not(#nav-edit):hover { background: rgba(19, 37, 30, 0.55) !important; }
/* ⚑ Report: there if you need it, not shouting */
html.wb-new.pub-mast .sheet-nav-tray #public-nav > #nav-report:not([hidden]) { padding: 0 !important; width: 2.5rem !important; border-color: transparent !important; background: transparent !important; opacity: 0.6; }
html.wb-new.pub-mast .sheet-nav-tray #public-nav > #nav-report:hover { opacity: 1; }
/* ♡ 10: the count sits on the heart's line */
html.wb-new.pub-mast .sheet-nav-tray #public-nav > #nav-upvote em { font: inherit; font-style: normal; line-height: 1; }
html.wb-new.pub-mast .sheet-nav-tray #public-nav > #nav-upvote.is-on { background: rgba(160, 60, 40, 0.45) !important; border-color: rgba(255, 210, 190, 0.5) !important; }
/* Copy: the one light button, every theme colour */
html.wb-new.pub-mast .sheet-nav-tray #public-nav > #nav-edit:not([hidden]) { padding: 0 1rem 0 0.85rem !important; border-color: transparent !important; background: #fbf6ec !important; color: #1f3d30 !important; font-weight: 700 !important; }
html.wb-new.pub-mast .sheet-nav-tray #public-nav > #nav-edit:not([hidden]):hover { background: #fff !important; }
/* the account matches the row's height */
html.wb-new.pub-mast .sheet-nav-tray:has(#public-nav:not([hidden])) #account-slot .auth-menu-trigger { min-height: 2.5rem; height: 2.5rem; }
@media (min-width: 48rem) {
  html.wb-new.pub-mast .sheet-nav-tray #public-nav > #nav-share .public-nav-text { display: inline !important; }
}
@media (max-width: 47.99rem) {
  /* phone width: round icons, only Copy keeps its words */
  html.wb-new.pub-mast .sheet-nav-tray #public-nav > button:not([hidden]):not(#nav-edit):not(#nav-upvote) { padding: 0 !important; width: 2.5rem !important; }
  html.wb-new.pub-mast .sheet-nav-tray #public-nav > #nav-share .public-nav-text { display: none !important; }
  html.wb-new.pub-mast .sheet-nav-tray #public-nav > #nav-upvote { padding: 0 0.7rem !important; }
}

/* Your name with your role under it (Owner / Foodie…) needs two lines: the narrow header's pill grows to hold them
   instead of the words spilling over its edge (owner 2026-10-13 screenshot). */
@media (max-width: 47.99rem) {
  html.wb-new .sheet-nav-tray #account-slot .auth-menu-trigger { height: auto; min-height: 2.4rem; padding: 0.2rem 0.6rem 0.2rem 0.2rem; gap: 0.4rem; }
  html.wb-new .sheet-nav-tray #account-slot .auth-avatar { width: 1.9rem; height: 1.9rem; flex: none; }
  html.wb-new .sheet-nav-tray #account-slot .auth-menu-label strong { max-width: 7.5rem; }
}

/* 👁 views on a public trip (owner 2026-10-13): plain text beside the heart, not a button */
.pub-mast-pill.is-views { cursor: default; gap: 0.3rem; }
html.wb-new.pub-mast .sheet-nav-tray #public-nav > .public-nav-views {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 2.5rem;
  padding: 0 0.4rem;
  color: #fbf6ec;
  font: 600 0.84rem var(--sans, system-ui, sans-serif);
  opacity: 0.85;
}

/* Quick costs waiting in Pending, on the Expenses list (owner 2026-10-15; app + web) */
.exp-pend-note {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  margin: 0 0 0.75rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid color-mix(in srgb, #b8862b 45%, transparent);
  border-radius: 0.9rem;
  background: #fbf0d6;
  color: #5a4210;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.exp-pend-note b {
  flex: none;
  color: #1f3b2f;
  font-weight: 800;
}

/* Trip detail for the crew: why there is no Edit (sim 2026-10-16 B-19). */
.detail-view-only { margin: 0.35rem 0 0; color: #7a5c1c; font-size: 0.82rem; }

/* Leave trip on your own Travellers row (mock 6, 2026-10-16). */
.traveller-leave { align-self: center; margin-left: auto; min-height: 2.4rem; padding: 0 0.9rem; border: 1px solid #e8c9b6; border-radius: 999px; background: transparent; color: #a3461d; font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.traveller-leave:hover { background: #fdebdc; }
.traveller-leave:focus-visible { outline: 3px solid #e2bb68; outline-offset: 2px; }

/* Split bill tags (owner-approved mock 1, 2026-10-16): money to hand back, cost on nobody, Share it. */
.owe-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0 0.85rem 0.6rem; }
.owe-tag { display: inline-flex; align-items: center; min-height: 1.7rem; padding: 0.15rem 0.6rem; border-radius: 999px; border: 0; background: #fbf0d6; color: #7a5c1c; font: inherit; font-size: 0.76rem; font-weight: 700; }
.owe-tag.is-gap { background: #fdebdc; color: #a3461d; }
button.owe-tag { cursor: pointer; min-height: 2.2rem; }
.owe-tag.is-action { background: #e3ece6; color: #1e3a2f; }
.owe-person-id .owe-tag, .person .owe-tag { margin-left: 0.35rem; }

/* Settle up (owner-approved mock 2, 2026-10-16). */
.settle-up { margin: 0 0 0.9rem; padding: 0.85rem 0.95rem; border-radius: 18px; background: #fffdf8; border: 1px solid #e4dccb; box-shadow: 0 10px 28px -16px rgba(27, 42, 35, 0.4); display: grid; gap: 0.55rem; }
.settle-up-kicker { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5f6b64; }
.settle-up-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.settle-up-pay { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 0.6rem; align-items: center; padding: 0.6rem 0.7rem; border-radius: 14px; background: #f1ebde; }
.settle-up-pay.is-mine { box-shadow: inset 0 0 0 1px #b98a2e; }
.settle-up-who b { font-size: 0.92rem; overflow-wrap: anywhere; }
.settle-up-arrow { color: #b98a2e; }
.settle-up-amt { font-variant-numeric: tabular-nums; }
.settle-up-btn { grid-column: 1 / -1; justify-self: start; min-height: 2.4rem; padding: 0 0.95rem; border-radius: 999px; border: 0; background: #1e3a2f; color: #fffdf8; font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.settle-up-you { margin: 0; font-size: 0.9rem; color: #1b2a23; }
.settle-up-you small { color: #5f6b64; }
.settle-up-done { margin: 0; color: #1e3a2f; font-weight: 600; }

/* Travel day across time zones (owner-approved mock 4, 2026-10-16). */
.nu-ag-time .nu-ag-zone { display: block; margin-top: 0.1rem; font-size: 0.66rem; font-weight: 700; color: #b98a2e; }
.nu-ag-clocks { margin: 0.2rem 0 0; font-size: 0.8rem; font-weight: 700; color: #7a5c1c; }

/* Saved places: crew 👍, save by name, "Elsewhere" in search (owner-approved mock 5, 2026-10-16). */
/* 👍 under the place's name (owner 2026-10-16: the big pill beside it squeezed the name — "too much noise"): a small soft chip. */
.plc-like { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 1.9rem; padding: 0 0.55rem; border: 0; border-radius: 999px; background: #f3ecdd; color: #5b5140; font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.plc-like.is-on { background: #e1efe6; color: #1f5a3d; }
.plc-like-faces { display: inline-flex; }
.plc-like-face { width: 1.15rem; height: 1.15rem; border-radius: 999px; display: grid; place-items: center; margin-left: -0.3rem; border: 2px solid #f3ecdd; background: #fff8e6; color: #7a5c1c; font-size: 0.56rem; font-weight: 800; }
.plc-like.is-on .plc-like-face { border-color: #e1efe6; }
.plc-like-face:first-child { margin-left: 0; }
.plc-like-row { display: flex; margin: 0.3rem 0 0; }
.plc-add-elsewhere { margin: 0.6rem 0 0.25rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8a938d; }
.plc-add-byname { margin-top: 0.5rem; width: 100%; }

/* A stop's cost (mock B): one quiet line in its card — "₱27,500 · split by 5 ›" or "Add to Expenses ›" (owner 2026-10-16: the bare ＋ Cost button looked broken). */
.nu-sp-cost-link { appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; min-height: 2.5rem; margin: 0; padding: 0; border: 0; background: none; color: #1d5c63; font: inherit; font-size: 0.95rem; font-weight: 700; text-align: left; cursor: pointer; }
.nu-sp-cost-link span { font-size: 1.25rem; font-weight: 400; color: #8a7f6a; }
.nu-sp-cost-link.is-add { color: #1d5c63; }
.nu-sp-cost-link:focus-visible { outline: 2px solid #1d5c63; outline-offset: 3px; border-radius: 6px; }

/* Trip title: the country part ("UK × FR × ES") moves as one piece, never "ES" alone on a line (noise pass 2026-10-16; app: .mw-title em). */
#mast-title em { white-space: nowrap; }

/* ——— Expenses, less noise (owner-approved noise pass 2026-10-16; app twin mobile/www/css/workbook-new.css) ——— */
html.wb-new #panel-expenses .exp-head-lite:empty, html.wb-new #panel-expenses .exp-head-lite > div:empty { display: none; }
html.wb-new #panel-expenses .exp-viewonly { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--muted, #6d746c); }
html.wb-new #panel-expenses .exp-tabs-row { display: flex; align-items: center; gap: 0.45rem; margin: 0.2rem 0 0.9rem; }
html.wb-new #panel-expenses .exp-tabs-row .nu-exp-tabs { flex: 1; min-width: 0; margin: 0; }
html.wb-new #panel-expenses .exp-tabs-row .nu-exp-tabs button { white-space: nowrap; }
html.wb-new #panel-expenses .exp-total-keep { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--muted, #6d746c); }
html.wb-new #panel-expenses .exp-total { padding: 0.8rem 1rem; }
html.wb-new #panel-expenses .exp-total-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
html.wb-new #panel-expenses .exp-total-head > span:first-child { display: grid; }
html.wb-new #panel-expenses .exp-total-chev svg { width: 1.25rem; height: 1.25rem; color: var(--muted, #6d746c); transition: transform 0.2s; }
html.wb-new #panel-expenses .exp-total.is-open .exp-total-chev svg { transform: rotate(180deg); }
/* Folded, the head is the whole card: its ▾ sits at the card's right edge, not mid-card (W-30, 2026-10-21). */
html.wb-new #panel-expenses .exp-total:not(.is-open) > .exp-total-head { grid-column: 1 / -1; }
html.wb-new #panel-expenses .exp-total-more { display: grid; gap: 0.5rem; margin-top: 0.6rem; }
html.wb-new #panel-expenses .nu-exp-days .nu-exp-row { grid-template-columns: 2.4rem minmax(0, 1fr) auto; cursor: pointer; }
html.wb-new #panel-expenses .nu-exp-row .nu-exp-more { grid-column: 1 / -1; display: grid; gap: 0.45rem; }
html.wb-new #panel-expenses .exp-words { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 1.1rem; }
html.wb-new #panel-expenses .exp-words button { padding: 0.35rem 0; border: 0; background: none; color: #1d5c63; font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; }
html.wb-new #panel-expenses .exp-words button.is-danger { color: #b2462b; }
html.wb-new #panel-expenses .ledger-body.is-lines { display: grid; gap: 0.55rem; padding: 0.2rem 0.8rem 0.85rem; }
html.wb-new #panel-expenses .bill-lines { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
html.wb-new #panel-expenses .exp-fab-stack .exp-fab-add { min-width: 6.5rem; }

/* ——— Detail: each tab's form as a window (no page-wide Edit, owner-approved noise pass 2026-10-16; app twin .mw-edit-win) ——— */
html.wb-new .detail-tabs-row { display: flex; align-items: center; gap: 0.6rem; }
html.wb-new .detail-tabs-row > .detail-subtabs { flex: 1 1 auto; min-width: 0; }
html.wb-new .detail-tabs-row > .detail-edit-word { flex: none; font-size: 0.9rem; padding: 0.4rem 0.2rem; }
.nu-edit-win {
  box-sizing: border-box;
  width: min(760px, 100vw);
  max-width: 100vw;
  height: min(92vh, 100%);
  max-height: 100vh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--paper, #fbf6ec);
  color: inherit;
  box-shadow: 0 24px 60px rgba(20, 30, 25, 0.28);
}
.nu-edit-win[open] { display: flex; flex-direction: column; }
.nu-edit-win::backdrop { background: rgba(20, 30, 25, 0.45); }
.nu-edit-win-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line, #e8e0cf); }
.nu-edit-win-head h2 { margin: 0; text-align: center; font-size: 1.15rem; }
.nu-edit-win > .detail-warn { margin: 0.6rem 1rem 0; }
/* The body fills the window; it is often a grid (.trip-detail): rows keep their own height from the top and the body
   scrolls, never stretched to the window's height (owner 2026-10-21: big gaps in Cover, tall Add destination). */
.nu-edit-win-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1rem 1.1rem 2rem; align-content: start; align-items: start; }
@media (max-width: 640px) {
  .nu-edit-win { width: 100vw; height: 100vh; max-height: none; border-radius: 0; }
}

/* ——— The cost window (owner-approved noise pass 2026-10-16; app twin .exp-win) ——— */
#group-form.exp-win-form .exp-win-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.4rem; }
#group-form.exp-win-form .exp-win-head h2 { margin: 0; }
#group-form .exp-win-x { width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%; background: rgba(31, 61, 48, 0.08); color: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer; }
#group-form .wb-req { display: none; }
#group-form #group-receipt-empty:empty { display: none; }
#group-form .exp-receipt-line { margin-top: 0.4rem; }
.exp-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; }
.exp-chip { min-height: 2.25rem; padding: 0 0.85rem; border: 1px solid var(--line, #d8cfbd); border-radius: 999px; background: #fff; color: inherit; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.exp-chip.is-on { border-color: #1f3d30; background: #1f3d30; color: #fbf6ec; }
.exp-linked-line { margin: 0.2rem 0 0.4rem; font-size: 0.86rem; color: var(--muted, #5d6b63); }
#group-form .exp-more { margin-top: 0.6rem; border-top: 1px solid var(--line, #e8e0cf); padding-top: 0.2rem; }
#group-form .exp-more > summary { display: flex; align-items: center; gap: 0.5rem; min-height: 2.6rem; cursor: pointer; font-weight: 700; color: #1d5c63; list-style: none; }
#group-form .exp-more > summary::-webkit-details-marker { display: none; }
#group-form .exp-more > summary::after { content: "▾"; margin-left: auto; font-size: 0.85rem; }
#group-form .exp-more[open] > summary::after { content: "▴"; }
#group-form .exp-more > summary small { font-weight: 500; color: var(--muted, #5d6b63); }
#settle-form.exp-win-form .exp-win-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.4rem; }
#settle-form.exp-win-form .exp-win-head h2 { margin: 0; }
#settle-form .exp-win-x { width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%; background: rgba(31, 61, 48, 0.08); color: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer; }
#settle-form .wb-req { display: none; }
#settle-form #settle-receipt-empty:empty { display: none; }
#settle-form .exp-more { margin-top: 0.6rem; border-top: 1px solid var(--line, #e8e0cf); padding-top: 0.2rem; }
#settle-form .exp-more > summary { display: flex; align-items: center; gap: 0.5rem; min-height: 2.6rem; cursor: pointer; font-weight: 700; color: #1d5c63; list-style: none; }
#settle-form .exp-more > summary::-webkit-details-marker { display: none; }
#settle-form .exp-more > summary::after { content: "▾"; margin-left: auto; font-size: 0.85rem; }
#settle-form .exp-more[open] > summary::after { content: "▴"; }
#settle-form .exp-more > summary small { font-weight: 500; color: var(--muted, #5d6b63); }

/* ——— Library rows (owner-approved noise pass 2026-10-16; app twin): a small ↓, the note on one line ——— */
html.wb-new .nu-file-acts [data-crew-download].is-icon { width: 2.4rem; min-width: 0; height: 2.4rem; min-height: 0; padding: 0; border-radius: 50%; font-size: 1.1rem; }
html.wb-new .nu-file-acts [data-crew-download].is-icon.is-view { width: auto; padding: 0 0.85rem; border-radius: 999px; font-size: 0.85rem; }
html.wb-new .nu-file-copy .nu-file-desc { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* "Already saved" over a picked place: phones only (the left pane shows it on a wide window; sim 2026-10-16 C-2). */
#plc-add .plc-add-note.is-pick-note { display: none; margin: 0.6rem 1rem 0; }
@media (max-width: 47.99rem) {
  #plc-add.has-pick .plc-add-note.is-pick-note { display: block; }
}
/* A stop's line wraps at a word, never cut mid-word (noise pass 2026-10-16; app twin): two lines at most. */
html.wb-new #panel-itinerary .nu-ag-compact .nu-agc-meta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; text-overflow: clip; overflow: hidden; }
/* A file's name: two lines before it's cut (noise pass 2026-10-16; app twin); a quiet ••• */
html.wb-new .nu-file-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; overflow-wrap: anywhere; }
html.wb-new .nu-file .crew-file-more.nu-icon-btn { border-color: transparent; background: transparent; }
/* A poll answer's name: two lines before it's cut (sim B-2 / noise pass 2026-10-16); 📍 and 💬 quiet icons, not boxes. */
#crew-hq .hqx-choice-main b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; overflow-wrap: anywhere; line-height: 1.25; }
#crew-hq .hqx-choice-row > .hqx-maps { flex: none; display: grid; place-items: center; width: 2rem; min-width: 0; border: 0; background: transparent; }
#crew-hq .hqx-choice-row > .hqx-about { min-width: 2rem; width: 2rem; }

/* The hotel window's Esc helper is never drawn (app twin: [data-hotel-esc]). */
[data-hotel-win-esc] { display: none !important; }

/* Cancel | Save as two equal halves, like every other window (owner 2026-10-17; app twin .nu-he-bar). */
.nu-hotel-win-foot { gap: 0.6rem; }
.nu-hotel-win-foot > .nu-btn { flex: 1 1 0; min-width: 0; justify-content: center; }
.nu-flight-win-foot { gap: 0.6rem; }
.nu-flight-win-foot > .nu-btn { flex: 1 1 0; min-width: 0; justify-content: center; }

/* A place's window (owner 2026-10-17: no page-wide Edit): a quiet Remove, then Cancel | Save as two equal halves. */
.food-win-remove { margin: 0.4rem 0 0; }
.food-win-remove .btn-quiet { padding: 0.3rem 0; border: 0; background: none; color: #9a4a26; font-weight: 700; }
.food-win-foot { display: flex; gap: 0.6rem; margin-top: 0.75rem; }
.food-win-foot > .nu-btn { flex: 1 1 0; min-width: 0; justify-content: center; }

/* Food places has its own "+ Place": no second "Save a place" beside it (owner 2026-10-17). */
.plc-float.is-food-add { display: none !important; }

/* The dock's adds (+ Cost, + Split, + Hotel, + List, + Place, + Flight, + Files, + New list): one "+" on the Edit
   colour (owner 2026-10-17: "just icon of + … with blue background like in edit"). The words stay as aria-labels.
   A full Library ("Full") and the "Saving…" pill keep their words. App twin: mobile/www/css/workbook-new.css. */
html.wb-new :is(.exp-fab-stack, .exp-fab-dock) > :is(.exp-fab-add, .exp-fab-add-file):not(:disabled):not(.is-saving):not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  min-width: 2.5rem;
  padding: 0;
  border: 0 !important;
  background: var(--forest, #1f3d30) !important;
  color: #fff !important;
}
html.wb-new :is(.exp-fab-stack, .exp-fab-dock) > :is(.exp-fab-add, .exp-fab-add-file):not(:disabled):not(.is-saving):hover { background: var(--forest-deep, #14291f) !important; }
html.wb-new :is(.exp-fab-stack, .exp-fab-dock) > :is(.exp-fab-add, .exp-fab-add-file):not(:disabled):not(.is-saving) .exp-fab-label { font-size: 0; line-height: 0; }
html.wb-new :is(.exp-fab-stack, .exp-fab-dock) > :is(.exp-fab-add, .exp-fab-add-file):not(:disabled):not(.is-saving) .exp-fab-label::before {
  content: "+";
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1;
}
/* Save a place on the dock: the pin, like the app (it was a link icon). */
html.wb-new .exp-fab-stack > .plc-float.is-docked::before,
html.wb-new .exp-fab-dock > .plc-float.is-docked::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The owner's one-line reminder after Create workbook (owner-approved mock 2026-10-17): no pop-up, "Got it" hides it. */
.detail-guide-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 12px 4px;
  padding: 10px 12px;
  border: 1px solid #e6dccb;
  border-radius: 14px;
  background: #f6f1e4;
  color: #1b2a23;
  font-size: 0.88rem;
  line-height: 1.4;
}
.detail-guide-line p { margin: 0; flex: 1; min-width: 0; }
.detail-guide-line .detail-guide-ok {
  flex: none;
  padding: 2px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

/* Hotel Currency select: "CNY · Chinese yuan" ends before the ▼, cut with … (China sim 2026-10-17 A-8; app: same). */
html.wb-new #panel-hotel .wb-field select { padding-right: 2.1rem !important; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

/* A bill with only a receipt: one flat line "🧾 Receipt · View" — no card inside the card (owner 2026-10-18). */
.settle-later-row.is-receipt-only,
.owe-edit-bar .settle-later-row.is-receipt-only,
.is-workbook .owe-body .owe-edit-bar .settle-later-row.is-receipt-only { padding: 0; border: 0; background: transparent; box-shadow: none; }
.settle-later-row.is-receipt-only .ledger-facts { margin: 0; padding: 0; border: 0; background: transparent; }
.settle-later-row.is-receipt-only .ledger-facts li { display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; padding: 0; border: 0; background: transparent; }
.settle-later-row.is-receipt-only .settle-later-receipt { padding: 0.25rem 0.6rem; min-height: 0; }

/* Planner day head: Route for the day · Fix gaps · Optimize route on one wrapping line (owner 2026-10-18). */
.wbx-day-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; margin-top: 0.35rem; }
.wbx-day-tools > * { margin: 0 !important; flex: 0 0 auto; width: auto !important; }
.wbx-day-tools > div, .wbx-day-tools > span { display: contents; }

/* ═══ Itinerary Timeline below 64rem (web audit 2026-10-20, r23c) ═══
   W-15: the grid scrolls in its own box like on wide screens, so it opens at the first stop (06 itinScroll) instead of
   ~350 px of empty 12 AM – 6 AM rows. W-17: the day card under the all-days grid only shows once a stop is picked. */
@media (max-width: 63.99rem) {
  html.wb-new .nu-itin.is-wide:not(.is-story) .tt-board {
    max-height: min(70dvh, calc(100dvh - 12rem));
    overflow-x: auto;
    overflow-y: hidden;
  }
  html.wb-new .nu-itin.is-wide:not(.is-story) .tt-scroll {
    overflow-x: hidden;
    overflow-y: auto;
  }
  html.wb-new .nu-itin.is-wide:not(.is-story):not(:has(.tt-block.is-on)) #detail-slot {
    display: none;
  }
}
/* A narrowed window: the round LakBi button sits closer to the edge and a little smaller, as on a phone, so it stays
   in the page's margin instead of over the cards (ui-sweep 700 px: it covered Detail's "1 plan"; web audit W-7). */
@media (min-width: 40.01rem) and (max-width: 63.99rem) {
  html.wb-new .lakbi-chat-launch {
    left: max(0.45rem, env(safe-area-inset-left));
    bottom: max(0.7rem, env(safe-area-inset-bottom));
    width: 3.15rem;
    height: 3.15rem;
  }
}

/* ===== Web audit A (2026-10-20): edit windows, Hotel, Flights, Publish ===== */
/* Hotel card: Edit · Remove as two words with room between them (W-49: "EditRemove"). */
html.wb-new #panel-hotel .exp-words { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 1.25rem; margin-top: 0.2rem; }
html.wb-new #panel-hotel .exp-words button { min-height: 2.25rem; padding: 0.35rem 0; border: 0; background: none; color: #1d5c63; font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
html.wb-new #panel-hotel .exp-words button:hover { text-decoration: underline; }
html.wb-new #panel-hotel .exp-words button.is-danger { color: #b2462b; }
/* "4 nights" between check-in and check-out (W-50). */
html.wb-new .nu-hotel-dates .nu-hotel-nights { white-space: nowrap; }
/* No stays yet: the two ways in, under the words (W-51). */
html.wb-new .nu-hotel-empty { display: grid; gap: 0.7rem; justify-items: start; }
html.wb-new .nu-hotel-empty p { margin: 0; }
/* The stay's window (W-1 / W-52): centred title, the dates on one row, nights as words, the rest under More. */
html.wb-new .nu-he-head.nu-win-head { display: block; text-align: center; }
html.wb-new .nu-he-nights-read { margin: -0.2rem 0 0; color: var(--ink-soft, #5b6360); font-size: 0.86rem; font-weight: 600; }
html.wb-new .nu-he-linked p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem; min-height: 2.6rem; padding-top: 0.55rem; }
html.wb-new .nu-he-more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; padding-top: 0.6rem; }
@media (max-width: 40rem) { html.wb-new .nu-he-more-grid { grid-template-columns: minmax(0, 1fr); } }
html.wb-new .nu-he-remove.nu-he-remove-foot { display: block; margin: 0.9rem 0 0.2rem; padding: 0.35rem 0; min-height: 2.25rem; }
/* The place window at 480–767 px: centred, not stuck to the bottom-left (W-24). */
@media (max-width: 47.99rem) {
  html.wb-new :is(#panel-places, #panel-food, .lb-food-web, #plc-add) dialog.plw,
  html.wb-new dialog.plw { margin: auto; max-width: calc(100vw - 2rem); border-radius: 20px; }
}
/* Start a vote (and any Crew HQ window) above the slim header bar, not under it (W-57). */
html.wb-new .workbook:has(.hqv) { z-index: 70; }
/* A hotel check-in / check-out row reads in the stay colour (web audit W-10 2026-10-20: "Hotel" was pale grey on white —
   type-hotel had no colour of its own). */
html.wb-new .nu-ag-card.type-hotel,
html.wb-new .nu-wrap .agenda-item.nu-ag-card.type-hotel { --c: #a21caf; }
/* The stop editor takes focus when it opens (06b wbPlanEditStop, W-20): no ring on the card itself. */
#panel-itinerary.wbp-on .wbx-edit:focus { outline: none; }
/* One window look for the pass windows too (W-1): Cancel left (outline), the main action right (solid); titles centred
   with the × on the right; one label style in Add file (W-54). */
html.wb-new dialog.pass-modal:not(.lbq) .pass-actions:has(> .btn-quiet:first-child + :is(.btn-solid, .btn-danger):last-child) { display: flex; justify-content: space-between; }
html.wb-new dialog.pass-modal:not(.lbq) .pass-actions > .btn-quiet:first-child + :is(.btn-solid, .btn-danger):last-child { min-width: 7rem; }
html.wb-new :is(#group-form, #settle-form).exp-win-form .exp-win-head { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; align-items: center; }
html.wb-new :is(#group-form, #settle-form).exp-win-form .exp-win-head > h2 { grid-column: 2; text-align: center; }
html.wb-new :is(#group-form, #settle-form).exp-win-form .exp-win-head > .exp-win-x { grid-column: 3; justify-self: end; }
html.wb-new #crew-file-modal #crew-file-title { text-align: center; }
html.wb-new #crew-file-modal :is(.files-type-set legend, .files-related .settle-field-label, .settle-receipt .filter-label) { font-size: 0.68rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; color: #5f685f; }
html.wb-new #crew-file-modal .files-related { margin-bottom: 0.9rem; }
html.wb-new #crew-file-modal .pass-actions { margin-top: 0.4rem; }
/* Publish / Unpublish say what they did, above every tab (W-2). */
.wb-page-toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 1100; transform: translateX(-50%); max-width: min(34rem, calc(100vw - 2rem)); margin: 0; padding: 0.75rem 1.1rem; border-radius: 12px; background: #1e3a2f; color: #fff; font-size: 0.92rem; font-weight: 600; line-height: 1.35; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); }
.wb-page-toast[hidden] { display: none; }
/* Short screens (1280×800 at 125 % = 1024×640, laptops with a browser bar; web audit C W-211): the header folds to its
   slim form — a smaller title and the dates, route, crew and countdown on one line — so the day's first stops show. */
@media (min-width: 48rem) and (max-height: 50rem) {
  html.wb-new .mast { padding-top: 0.7rem; padding-bottom: 0.35rem; gap: 0.2rem; }
  html.wb-new .mast h1 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.15; }
  html.wb-new .mast-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.9rem; margin-top: 0.35rem; }
  html.wb-new .mast-meta .nu-facts-row.nu-hline { font-size: 0.92rem; }
  html.wb-new .mast-meta .mast-avatar { width: 26px; height: 26px; font-size: 0.7rem; }
  html.wb-new .mast-meta .mast-countdown-chip { padding: 0.2rem 0.75rem; }
  html.wb-new #sheet-tabs { padding-top: 0.25rem; padding-bottom: 0.45rem; }
  html.wb-new #sheet-tabs [data-tab] { min-height: 2.15rem; padding-top: 0.25rem; padding-bottom: 0.25rem; }
}
/* Wide screens: the header and tabs line up with the centred page column (main.sheet: 1340 px, 3 % inside; web audit C
   W-228: at 1920 the title sat at x 58 and the content at 348). */
@media (min-width: 90rem) {
  html.wb-new .mast.mast { padding-left: calc(50% - 670px + 3%); padding-right: calc(50% - 670px + 3%); }
  html.wb-new .sheet-nav.sheet-nav { padding-left: calc(50% - 670px + 3%); padding-right: calc(50% - 670px + 3%); }
  html.wb-new .mast .mast-top { left: calc(50% - 670px + 3%); }
  html.wb-new:not(.pub-mast) .sheet-nav-tray.sheet-nav-tray:has(#owner-nav, #public-nav, #account-slot) { right: calc(50% - 670px + 3%); }
}
/* The Detail view kept behind its edit window (W-219): read-only picture, no second floating dock. */
html.wb-new .nu-win-behind .exp-fab-wrap { display: none; }

/* Your own itinerary: the likes as a count, not a button (owner 2026-10-21). */
.pub-mast-pill.is-count { cursor: default; }

/* ——— Public itinerary header, wide windows (owner-approved direction 2026-10-21; layoutPubHead in js/player.js) ———
   One column with the page content's edges: ‹ PUBLIC ITINERARY … ♡ · Share · Copy this itinerary · ⋯ on row 1, the
   title, then one line "dates · length · route · by <name>", then the tabs. ⚑ Report and the creator's extras live in ⋯.
   The account chip keeps the page bar's corner. The passport stamp is decor at the right of the title rows, measured
   so it never sits on text or buttons, and is off below 1100 px. Below 48rem the narrow public header is unchanged. */
@media (min-width: 48rem) {
  html.wb-new.pub-head .sheet-nav-tray:has(#public-nav:not([hidden])) { left: auto; max-width: none; }
  html.wb-new.pub-head .sheet-nav-tray #public-nav { position: relative; }
  html.wb-new.pub-head .sheet-nav-tray #public-nav > #nav-report { display: none !important; }
  html.wb-new.pub-head .sheet-nav-tray #public-nav > #nav-more { order: 4; }
  html.wb-new.pub-head .sheet-nav-tray #public-nav > #nav-more:not([hidden]) { padding: 0 !important; width: 2.5rem !important; }
  html.wb-new.pub-head .sheet-nav-tray #public-nav > #nav-more[aria-expanded="true"] { background: rgba(19, 37, 30, 0.6) !important; }
  html.wb-new.pub-head #nav-more-menu { left: auto; right: 0; top: calc(100% + 0.4rem); }
  /* the like is the tray heart on a wide window (the header like pill is the narrow design's) */
  html.wb-new.pub-head.pub-mast .workbook .sheet-nav-tray #public-nav > #nav-upvote:not([hidden]) { display: inline-flex !important; }
  html.wb-new.pub-head #mast .pub-mast-pill.is-like { display: none; }
  html.wb-new.pub-head .sheet-nav-tray #public-nav > #nav-upvote.is-count { cursor: default; }
  html.wb-new.pub-head .sheet-nav-tray #public-nav > #nav-upvote.is-count:hover { background: rgba(19, 37, 30, 0.35) !important; }
  /* your own itinerary (no Copy): Share is the one light button */
  html.wb-new.pub-head .sheet-nav-tray #public-nav:has(> #nav-edit[hidden]) > #nav-share:not([hidden]) {
    border-color: transparent !important;
    background: #fbf6ec !important;
    color: #1f3d30 !important;
    font-weight: 700 !important;
  }
  html.wb-new.pub-head .sheet-nav-tray #public-nav:has(> #nav-edit[hidden]) > #nav-share:not([hidden]):hover { background: #fff !important; }

  /* row 3: one meta line */
  html.wb-new.pub-head #mast-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.7rem; }
  html.wb-new.pub-head #mast-meta .nu-people { display: contents; }
  html.wb-new.pub-head #mast .pub-creator,
  html.wb-new.pub-head #mast .pub-mast-pills { display: inline-flex; margin: 0; }
  html.wb-new.pub-head #mast .pub-creator::before,
  html.wb-new.pub-head #mast .pub-mast-pills::before { content: "•"; margin-right: 0.35rem; color: var(--cream, #f6efe1); font-size: 0.8rem; opacity: 0.5; }
  html.wb-new.pub-head #mast .pub-mast-creator {
    min-height: 0;
    max-width: 22rem;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html.wb-new.pub-head #mast a.pub-mast-creator:hover { background: none; }
  html.wb-new.pub-head #mast a.pub-mast-creator:hover b { text-decoration: underline; text-underline-offset: 3px; }
  html.wb-new.pub-head #mast :is(.pub-mast-avatar, .pub-mast-creator-go, .pub-mast-more, .pub-creator-menu, .pub-mast-creator-text small) { display: none; }
  html.wb-new.pub-head #mast .pub-mast-creator-text { display: inline-flex; align-items: baseline; gap: 0.3rem; color: var(--cream, #f6efe1); font-size: 1rem; line-height: 1.3; }
  html.wb-new.pub-head #mast .pub-mast-creator-text::before { content: "by"; font-weight: 500; opacity: 0.8; }
  html.wb-new.pub-head #mast .pub-mast-creator-text b { font-size: 1rem; font-weight: 600; }
  html.wb-new.pub-head #mast .pub-mast-pill { min-height: 0; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 0.95rem; font-weight: 600; }
  html.wb-new.pub-head #mast .pub-mast-pill:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
  html.wb-new.pub-head #mast .pub-mast-pill.is-views { cursor: default; text-decoration: none; }

  /* rows 2–3 leave room for the stamp; the stamp is decor at their right */
  html.wb-new.pub-head #mast-title,
  html.wb-new.pub-head #mast-meta { margin-right: calc(var(--pub-stamp-w, 0px) + 1.5rem); }
  html.wb-new.pub-head .mast .mast-stamps { left: auto; right: max(1rem, 3%); margin-right: 0.8rem; scale: 0.72; transform-origin: right center; }
}
@media (min-width: 48rem) and (max-width: 68.74rem) {
  html.wb-new.pub-head .mast .mast-stamps { display: none !important; }
}
@media (min-width: 90rem) {
  html.wb-new.pub-head .mast .mast-stamps { right: calc(50% - 670px + 3%); }
}

/* ——— The floating creator card (owner 2026-10-21): a clear surface on the cream page, Follow the one solid button,
   Profile / Passport secondary, Block / Report in its ⋯, sentence case. ——— */
.creator-float:not(.is-inline) {
  border: 1px solid #d8ccb4;
  background: #fff;
  box-shadow: 0 18px 40px -14px rgba(19, 37, 30, 0.38), 0 2px 6px rgba(19, 37, 30, 0.08);
}
.creator-float .creator-label { font-size: 0.76rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: #5f6b64; }
.creator-float .creator-float-actions { flex-wrap: nowrap; }
.creator-float :is(.creator-passport-btn, .creator-follow) { font-size: 0.84rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.creator-float .creator-passport-btn { border: 1px solid #b7c2bb; background: #fff; color: #1f3d30; }
.creator-float .creator-passport-btn:hover { background: #f1ede3; }
.creator-float .creator-follow { border-color: #1f3d30; background: #1f3d30; color: #fbf6ec; }
.creator-float .creator-follow.is-following { border-color: #b7c2bb; background: #fff; color: #1f3d30; }
.creator-float-more {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--tap, 2.75rem);
  height: var(--tap, 2.75rem);
  margin: -0.15rem -0.35rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #5f6b64;
  cursor: pointer;
}
.creator-float-more[hidden] { display: none; }
.creator-float-more:hover,
.creator-float-more[aria-expanded="true"] { background: rgba(31, 61, 48, 0.08); color: #1f3d30; }
.creator-float-more:focus-visible { outline: 2px solid #8a5a14; outline-offset: 2px; }
.creator-float #creator-safety.pub-creator-menu {
  top: auto;
  right: 0.6rem;
  bottom: calc(100% - 0.6rem);
  left: auto;
  margin: 0;
  padding: 0.3rem;
  border: 1px solid rgba(31, 61, 48, 0.14);
  border-top: 1px solid rgba(31, 61, 48, 0.14);
  background: #fff;
}
.creator-float #creator-safety.pub-creator-menu[hidden] { display: none; }
.creator-float #creator-safety .creator-safety-btn {
  min-height: 2.75rem;
  padding: 0 0.85rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #1f3d30;
  font: 600 0.9rem var(--sans, system-ui, sans-serif);
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}
.creator-float #creator-safety .creator-safety-btn:hover,
.creator-float #creator-safety .creator-safety-btn:focus-visible { background: rgba(31, 61, 48, 0.08); outline: none; }
.creator-float #creator-safety .creator-safety-btn.is-danger { color: #a13d2d; }
/* narrow: the tray heart is the like only when no header pill shows (your own trip shows the header count pill) */
@media (max-width: 47.99rem) {
  html.wb-new.pub-mast .sheet-nav-tray:has(#public-nav) #public-nav > #nav-upvote.is-count { display: none !important; }
}
/* a hidden tray button stays hidden (the old phone tray rule showed the owner a dead Copy and ⚑) */
html .sheet-nav-tray:has(#public-nav) #public-nav > button[hidden] { display: none !important; }
@media (min-width: 48rem) {
  html.wb-new.pub-head .mast:has(.mast-stamps) { min-height: var(--pub-mast-min, 0px); }
}
@media (max-width: 47.99rem) {
  /* the narrow public header keeps its ⚑ and the creator chip's ⋯ (no second ⋯ in the tray) */
  html.wb-new .sheet-nav-tray #public-nav > #nav-more,
  html.wb-new #nav-more-menu { display: none !important; }
}
/* the floating card shows Follow / Passport itself: the header ⋯ only carries them when the card can't float */
html:not(.pub-chip) #nav-more-menu [data-pub-head-chip] { display: none; }

/* ——— The day planner, owner 2026-10-21 (app = these rules, mobile/www/css/planner.css) ——— */
/* The day's heading on ONE compact line: "Day 2 · Wed 21 Oct · San Juan · 8 stops · Route ↗" (it may wrap on a phone). */
#panel-itinerary.wbp-on .wbp3 .wbx-daytitle.is-oneline { gap: 0.3rem; padding: 0.6rem 1rem 0.55rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-daytitle.is-oneline .wbx-dayline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0; margin: 0; color: #5d6b63; font-size: 0.86rem; line-height: 1.35; }
#panel-itinerary.wbp-on .wbp3 .wbx-daytitle.is-oneline .wbx-dayline > b,
#panel-itinerary.wbp-on .wbp3 .wbx-daytitle.is-oneline .dv-title { font-family: var(--serif, "Playfair Display", Georgia, serif); font-size: 1.08rem; font-weight: 700; line-height: 1.3; color: #1f3d30; }
#panel-itinerary.wbp-on .wbp3 .wbx-daytitle.is-oneline .wbx-dayline > small { display: contents; font-size: inherit; color: inherit; }
#panel-itinerary.wbp-on .wbp3 .wbx-daytitle.is-oneline .wbx-pills { display: contents; }
#panel-itinerary.wbp-on .wbp3 .wbx-daytitle.is-oneline .wbx-pill { display: inline; height: auto; padding: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; font-weight: 600; white-space: nowrap; }
#panel-itinerary.wbp-on .wbp3 .wbx-daytitle.is-oneline .wbx-pill::before,
#panel-itinerary.wbp-on .wbp3 .wbx-daytitle.is-oneline .lmp-day-route::before { content: "·"; margin: 0 0.4rem; color: #a59f8f; font-weight: 400; text-decoration: none; display: inline-block; }
#panel-itinerary.wbp-on .wbp3 .wbx-daytitle.is-oneline .lmp-day-route { margin: 0; font-size: inherit; font-weight: 700; white-space: nowrap; }
#panel-itinerary.wbp-on .wbp3 .wbx-daytitle.is-oneline .wbx-day-tools { margin-top: 0.15rem; }
/* The picked card's line: [Details] [Edit] — small, under the card's text (only the picked card has it). */
#panel-itinerary.wbp-on .wbp3 .wbx-pick-acts { display: flex; gap: 0.4rem; padding: 0.15rem 0 0 3.3rem; }
#panel-itinerary.wbp-on .wbp3 .wbx-stopcard:not(.is-compact) .wbx-pick-acts { padding-left: 0; }
#panel-itinerary.wbp-on .wbp3 .wbx-pick-btn { min-height: 2rem; padding: 0 0.8rem; border: 1px solid #ddd3bf; border-radius: 999px; background: #fff; color: #1f3d30; font: 700 0.78rem var(--sans, "DM Sans", system-ui, sans-serif); cursor: pointer; }
#panel-itinerary.wbp-on .wbp3 .wbx-pick-btn.is-edit { border-color: var(--lb-primary, #1e3a2f); background: var(--lb-primary, #1e3a2f); color: #fff; }
/* The stop card over the map clears Google's logo + Terms (they must show). */
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek { bottom: 32px; }
@media (max-width: 47.99rem) {
  /* a narrow window = the app: map 60 % · list 40 % of the screen you can see (owner 2026-10-21) */
  html.wbp-open #panel-itinerary.wbp-on > .wbp.wbp3 > .wbp-stage { height: max(11rem, calc(60dvh - 3.5rem)); }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek { bottom: calc(1.1rem + 30px); }
}
.wbx-peek-more-t { display: none; }
@media (max-width: 47.99rem) {
  /* a stop's chip (owner 2026-10-21): name · [Details] [Edit] — the same two buttons as its card in the list */
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-card.is-stop { grid-template-columns: 3.5rem minmax(0, 1fr) auto auto; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-card.is-stop.is-bare { grid-template-columns: minmax(0, 1fr) auto auto; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-card.is-stop .wbx-peek-more { grid-column: 3; width: auto; height: 2.5rem; padding: 0 0.85rem; border: 1px solid #ddd3bf; border-radius: 999px; background: #fff; font: 700 0.8rem var(--sans, "DM Sans", system-ui, sans-serif); }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-card.is-stop .wbx-peek-more svg { display: none; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-card.is-stop .wbx-peek-actions { grid-column: 4; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-card.is-stop.is-bare .wbx-peek-more { grid-column: 2; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-card.is-stop.is-bare .wbx-peek-actions { grid-column: 3; }
  html.wbp-open #panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-peek:not(.is-open) .wbx-peek-card.is-stop .wbx-peek-more-t { display: inline; }
}
/* the map's key sits above Google's logo + Terms, never on them (owner 2026-10-21) */
#panel-itinerary.wbp-on .wbp3 .wbp-stage .wbx-legend { bottom: 32px; }

/* your review after the window: Delete stays, Update gives way to this (owner 2026-10-22) */
.nu-rv-closed {
  font-size: 0.8rem;
  color: #6b716b;
}

/* Header stamp on a wide window (owner 2026-10-22 screenshot, 2000 px): the words sit in a centred column but the stamp
   was placed from the window's edge, so it landed on the title. It now measures from the column (#mast-full) — and
   the title / facts wrap before the same line. The public header (pub-head) keeps its own right-hand place. */
@media (min-width: 60.01rem) {
  html.wb-new:not(.pub-head) .mast #mast-full { position: relative; }
  html.wb-new:not(.pub-head) .mast .mast-stamps,
  html.wb-new:not(.pub-head) .mast .mast-stamp:not(.is-compact) { left: clamp(32rem, 50%, 48rem); }
  html.wb-new:not(.pub-head) .mast:has(.mast-stamps) #mast-title { max-width: calc(clamp(32rem, 50%, 48rem) - 5rem); }
  html.wb-new:not(.pub-head) .mast:has(.mast-stamps, .mast-stamp:not(.is-compact)) .nu-facts-row {
    max-width: calc(clamp(32rem, 50%, 48rem) - 1.25rem);
  }
}
/* "Searching for a photo…" while a picked place's free photo is looked up (owner 2026-10-26) */
.plc-add-photo-wait { display: flex; align-items: center; justify-content: center; gap: 0.55rem; height: 10rem; border-radius: 14px; background: linear-gradient(100deg, #efe7d6 20%, #f8f2e6 40%, #efe7d6 60%) 0 0 / 200% 100%; color: #6b604f; font-size: 0.86rem; font-weight: 600; animation: plc-photo-wait 1.4s linear infinite; }
.plc-add-photo-wait i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #c9b994; border-top-color: #1f3d30; animation: plc-photo-spin 0.9s linear infinite; }
@keyframes plc-photo-wait { to { background-position: -200% 0; } }
@keyframes plc-photo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .plc-add-photo-wait, .plc-add-photo-wait i { animation: none; } }
/* no photo for the picked place yet (owner 2026-10-26): a quiet note in its place */
.plc-add-photo-none { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; border: 1px dashed #d6c9b0; border-radius: 14px; background: #fbf7ee; color: #6b604f; font-size: 0.84rem; line-height: 1.4; }
.plc-add-photo-none span { font-size: 1.2rem; }
/* the found place's photo on the map search's bar (owner 2026-10-26) */
#panel-itinerary.wbp-on .lm-plan-addbar .lm-plan-addbar-photo { flex: none; width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
/* the found place's photo being looked up (owner 2026-10-26) */
#panel-itinerary.wbp-on .lm-plan-addbar .lm-plan-addbar-wait, .lm-plan-addbar .lm-plan-addbar-wait { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px; background: #efe7d6; }
.lm-plan-addbar .lm-plan-addbar-wait i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c9b994; border-top-color: #1f3d30; animation: plc-photo-spin 0.9s linear infinite; }
@keyframes plc-photo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lm-plan-addbar .lm-plan-addbar-wait i { animation: none; } }
/* the details card's photo label, in the words — never over the photo (owner 2026-10-26: "not readable") */
.wbx-peek-photo-label { margin: 0.35rem 0 0; color: #6b604f; font-size: 0.72rem; line-height: 1.4; }
/* a found place's photo being looked up */
.wbx-peek-wait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; width: 100%; height: 100%; min-height: 7rem; background: linear-gradient(100deg, #efe7d6 20%, #f8f2e6 40%, #efe7d6 60%) 0 0 / 200% 100%; color: #6b604f; font-size: 0.78rem; font-weight: 600; text-align: center; animation: plc-photo-wait 1.4s linear infinite; }
.wbx-peek-wait i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c9b994; border-top-color: #1f3d30; animation: plc-photo-spin 0.9s linear infinite; }
#panel-itinerary.wbp-on .wbp3 .wbp-stage > .wbx-peek .wbx-peek-media .wbx-peek-photos.is-searching { display: block; }
.wbx-peek-actions .lm-plan-addbar-idea { width: 100%; }
@keyframes plc-photo-wait { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .wbx-peek-wait, .wbx-peek-wait i { animation: none; } }

/* a card's own picture in its panel (a flight's airport, a hotel stop's cover — owner 2026-10-26): shown, not opened */
.nu-sp-photos .nu-sp-photo-lead.is-plain { cursor: default; pointer-events: none; }
.nu-sp-photos .nu-sp-photo-lead.is-plain img { transform: none !important; }
.nu-sp-stay-photo .hotel-media { border-radius: 12px; overflow: hidden; }