/* ============================================================
   ymaplify — DESKTOP / iPad shell  (v2, desktop-native)
   • top bar: logo · nav · REAL Magic search field · trip · profile
   • content surfaces → centered, wider windows over a dimmed map
   • map surfaces (city / city-map / pick-cities) → list + big map split
   Scoped under .ymd so the mobile file is untouched. Tokens from
   styles.css; component styles from redesign-mobile/{app,citymap}.css.
   ============================================================ */

html, body { height: 100%; margin: 0; }

.ym.ymd {
  position: fixed; inset: 0; overflow: hidden;
  --top-h: 66px;
  --edge: 18px;
  --win-w: 560px;   /* centered content window */
  --side-w: 470px;  /* map-surface list sidebar */
}

/* map sits behind everything; the top bar overlays its top strip */
.ymd .map::after { top: 46%; }
.ymd .mapctl { right: var(--edge); z-index: 45; }
.ymd .mapctl .btn { width: 48px; height: 48px; }

/* ============================================================
   TOP BAR
   ============================================================ */
.ymd-top {
  position: absolute; left: 0; right: 0; top: 0; height: var(--top-h); z-index: 50;
  display: flex; align-items: center; gap: 18px; padding: 0 18px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 12px rgba(15,22,32,.05);
}
.ymd-brand { display: flex; align-items: center; gap: 9px; flex: none; border: none; background: none; cursor: pointer; padding: 0; }
.ymd-brand img { width: 30px; height: 30px; object-fit: contain; }
.ymd-brand b { font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }

.ymd-nav { display: flex; align-items: center; gap: 2px; flex: none; }
.ymd-navlink {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: none; cursor: pointer;
  background: transparent; border-radius: 999px; color: var(--text-2); font: 600 14px var(--font-body);
}
.ymd-navlink i { font-size: 18px; }
.ymd-navlink:hover { background: var(--surface-muted); color: var(--ink); }
.ymd-navlink.on { background: color-mix(in srgb, var(--coral) 10%, transparent); color: var(--coral); }

.ymd-top__right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.ymd-trippill {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 15px; border-radius: 999px; cursor: pointer;
  background: var(--surface-muted); border: 1px solid var(--border); font: 700 14px var(--font-body); color: var(--ink); white-space: nowrap;
}
.ymd-trippill .fl { font-size: 16px; }
.ymd-trippill .chev { color: var(--coral); font-size: 15px; }
.ymd-trippill:hover { border-color: var(--slate-400); }
.ymd-av {
  width: 42px; height: 42px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; flex: none;
  background: var(--me, #7FB23A); display: grid; place-items: center; font-size: 20px; box-shadow: 0 0 0 1px var(--border);
}
.ymd-av.guest { background: var(--surface-muted); color: var(--ink-2); }
.ymd-av:hover { box-shadow: 0 0 0 2px var(--coral); }

/* ============================================================
   REAL MAGIC SEARCH FIELD  (reuses .paste-field, restyled)
   ============================================================ */
.ymd-search { position: relative; flex: 1 1 auto; max-width: 620px; margin: 0 auto; }
.ymd-search .paste-field {
  min-height: 46px; border-radius: 999px; padding: 5px 6px 5px 16px; gap: 9px;
  box-shadow: var(--shadow-sm); border-color: var(--border); background: var(--surface-muted);
}
.ymd-search .paste-field:focus-within { background: var(--surface); }
.ymd-search .paste-attach { width: 34px; height: 34px; border-radius: 999px; }
.ymd-search .paste-go { height: 34px; min-width: 34px; border-radius: 999px; }
.ymd-search .paste-field input { font-size: 14.5px; }

.ymd-search__pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 55;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow-lg); padding: 14px 15px; animation: ymdPop .16s ease;
}
.ymd-search__lbl { display: block; font: 800 9.5px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 2px 2px 9px; }
.ymd-search__lbl + .ymd-search__lbl, .ymd-search__srcs + .ymd-search__lbl { margin-top: 14px; }
.ymd-search__srcs { display: flex; flex-wrap: wrap; gap: 7px; }
.ymd-src {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); font: 700 12px var(--font-body); color: var(--ink); white-space: nowrap;
}
.ymd-src i { font-size: 14px; color: var(--c, var(--ink-2)); }
.ymd-src.magic { border-color: var(--coral-soft); color: var(--magic-deep); }
.ymd-src.magic img { width: 15px; height: 15px; }
.ymd-search__try { display: flex; flex-wrap: wrap; gap: 7px; }
.ymd-try {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--coral-soft); background: #FFF6F6; color: var(--coral); font: 600 12.5px var(--font-body);
}
.ymd-try i { font-size: 13px; }
.ymd-try:hover { background: #FFECEC; }
[data-theme="night"] .ymd-try { background: rgba(255,90,95,.12); }

/* ============================================================
   CONTENT WINDOWS  (reused sheets → centered, wider)
   ============================================================ */
.ymd .scrim:not(.guide-scrim) { background: rgba(15,22,32,.34); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

.ymd .sheet {
  left: 50%; right: auto; top: calc(var(--top-h) + var(--edge)); bottom: auto; transform: translateX(-50%);
  width: var(--win-w); max-height: calc(100% - var(--top-h) - var(--edge) * 2); height: auto;
  border-radius: 22px; box-shadow: 0 24px 60px -16px rgba(15,22,32,.4), var(--shadow-md);
  animation: ymdPop .22s cubic-bezier(.2,.9,.3,1.02);
}
.ymd .sheet.tall { height: calc(100% - var(--top-h) - var(--edge) * 2); }
.ymd .sheet__grab { display: none; }
/* the mobile grab handle used to supply the top breathing room; it's hidden on
   desktop, so headers without a back button (top-level sheets) sat too tight to
   the sheet's top edge — restore comfortable top padding. */
.ymd .sheet__head { padding-top: 18px; }
.ymd .sheet__head.line { padding-top: 16px; }
@keyframes ymdPop { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.98); } }

/* per-surface widths — use the desktop room */
.ymd[data-panel="social"]    { --win-w: 680px; }
.ymd[data-panel="itinerary"] { --win-w: 860px; }
.ymd[data-panel="trips"]     { --win-w: 720px; }
.ymd[data-panel="usage"],
.ymd[data-panel="managesub"] { --win-w: 700px; }
.ymd[data-panel="trip"]      { --win-w: 620px; }
.ymd[data-panel="vibe"]      { --win-w: 600px; }

/* ============================================================
   MODALS → centered over the viewport
   ============================================================ */
.ymd .td-modal {
  left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%);
  width: 460px; max-height: 82%; animation: ymdModal .22s cubic-bezier(.2,.9,.3,1.05);
}
@keyframes ymdModal { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } }
.ymd .td-modal__scrim { background: rgba(15,22,32,.5); }
.ymd .guide-scrim { z-index: 60; }
.ymd .qrmodal { z-index: 80; }

/* ============================================================
   MAP SURFACES  (city · city-map · spot · pick-cities)
   Own map fills below the top bar; list docks as a sidebar.
   ============================================================ */
.ymd .cvx, .ymd .citymap, .ymd .spotx, .ymd .citypick { top: var(--top-h); }

/* city / city-map / spot: list = left sidebar, map fills the rest */
.ymd .cv-sheet, .ymd .cm-panel, .ymd .spot-sheet {
  left: var(--edge); right: auto; top: var(--edge); bottom: var(--edge);
  width: var(--side-w); height: calc(100% - var(--edge) * 2) !important;
  border-radius: 22px; box-shadow: 0 18px 50px -14px rgba(15,22,32,.32), var(--shadow-md);
}
.ymd .cv-sheet__grab, .ymd .cm-panel__grab { display: none; }

/* pick-cities keeps a compact bottom-left selection tray */
.ymd .cp-bar { left: var(--edge); right: auto; width: 430px; bottom: var(--edge); }

/* the surfaces' own controls, positioned relative to the (top-offset) root */
.ymd .cmap-back, .ymd .cvx__backfab { left: calc(var(--edge) * 2 + var(--side-w)); top: var(--edge); }
.ymd[data-panel="citypick"] .cmap-back { left: var(--edge); }
/* back-to-globe: fused to the top bar's bottom edge, protruding down into the map.
   Centred on the whole viewport (not just the visible map strip), and raised above
   the top bar so the bar's own drop-shadow never draws a seam across it. */
.ymd[data-panel="citymap"] .cmap-back,
.ymd[data-panel="citymap"]:has(.spotx) .cmap-back {
  top: -3px; bottom: auto; right: auto;
  left: 50%; transform: translateX(-50%);
  border-radius: 0 0 18px 18px; padding: 8px 22px 9px;
  box-shadow: 0 11px 15px -11px rgba(15,22,32,.32);
  z-index: 51;
}
.ymd[data-panel="city"] .cmap-back, .ymd[data-panel="city"] .cvx__backfab {
  top: -2px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%);
  border-radius: 0 0 18px 18px; padding: 8px 20px 9px;
  box-shadow: 0 6px 13px -9px rgba(15,22,32,.22);
}

/* fused back-to-globe: solid white + concave fillets that flare it into the top bar */
.ymd[data-panel="citymap"] .cmap-back,
.ymd[data-panel="city"] .cmap-back,
.ymd[data-panel="city"] .cvx__backfab {
  background: var(--surface); border: none; overflow: visible;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ymd[data-panel="citymap"] .cmap-back::before,
.ymd[data-panel="citymap"] .cmap-back::after,
.ymd[data-panel="city"] .cmap-back::before,
.ymd[data-panel="city"] .cmap-back::after,
.ymd[data-panel="city"] .cvx__backfab::before,
.ymd[data-panel="city"] .cvx__backfab::after {
  content: ""; position: absolute; top: 0; width: 70px; height: 22px;
  background: var(--surface); pointer-events: none;
}
.ymd[data-panel="citymap"] .cmap-back::before,
.ymd[data-panel="city"] .cmap-back::before,
.ymd[data-panel="city"] .cvx__backfab::before {
  left: -70px;
  -webkit-mask: radial-gradient(70px 22px at bottom left, transparent 99%, #000 100%);
          mask: radial-gradient(70px 22px at bottom left, transparent 99%, #000 100%);
}
.ymd[data-panel="citymap"] .cmap-back::after,
.ymd[data-panel="city"] .cmap-back::after,
.ymd[data-panel="city"] .cvx__backfab::after {
  right: -70px;
  -webkit-mask: radial-gradient(70px 22px at bottom right, transparent 99%, #000 100%);
          mask: radial-gradient(70px 22px at bottom right, transparent 99%, #000 100%);
}
.ymd .citymap__ctl, .ymd .citypick__zoom { top: var(--edge); right: var(--edge); }
.ymd .cp-modeseg { top: var(--edge); }
.ymd .citypick__tip { top: calc(var(--edge) + 56px); }
.ymd .citypick__view {
  inset: calc(var(--edge) + 56px) var(--edge) calc(var(--edge) + 172px) var(--edge);
}

/* modals inside these surfaces → centered within the root */
.ymd .cm-modal { left: 50%; right: auto; transform: translateX(-50%); width: 460px; max-width: calc(100vw - 2 * var(--edge)); }
.ymd .cp-addmenu {
  left: 50%; right: auto; transform: translateX(-50%); width: 480px;
  max-width: calc(100vw - 2 * var(--edge)); bottom: var(--edge); border-radius: 24px;
}

/* ============================================================
   SURFACE LAUNCHER  (prototype: jump to any surface)
   ============================================================ */
.ymd-launch { position: absolute; right: var(--edge); bottom: var(--edge); z-index: 47; }
.ymd-launch__btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px;
  background: var(--ink); color: #fff; border: none; cursor: pointer; font: 700 13px var(--font-body); box-shadow: var(--shadow-lg);
}
.ymd-launch__btn i { font-size: 17px; }
[data-theme="night"] .ymd-launch__btn { background: var(--magic-deep); }
.ymd-launch__pop {
  position: absolute; right: 0; bottom: 54px; width: 336px; max-height: 64vh; overflow-y: auto; z-index: 48;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: var(--shadow-lg); padding: 12px; animation: ymdUp .2s ease;
}
@keyframes ymdUp { from { opacity: 0; transform: translateY(10px); } }
.ymd-launch__lbl { font: 800 10.5px/1 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); padding: 4px 8px 9px; }
.ymd-launch__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.ymd-launch__item {
  display: flex; align-items: center; gap: 9px; padding: 10px 11px; border: none; background: transparent;
  border-radius: 12px; cursor: pointer; text-align: left; font: 600 12.5px var(--font-body); color: var(--text-1);
}
.ymd-launch__item i { font-size: 17px; color: var(--text-2); flex: none; }
.ymd-launch__item:hover { background: var(--surface-muted); }
.ymd-launch__item.on { background: color-mix(in srgb, var(--coral) 10%, transparent); color: var(--coral); }
.ymd-launch__item.on i { color: var(--coral); }
.ymd-launch__scrim { position: fixed; inset: 0; z-index: 46; }

/* guest banner — floats bottom-left */
.ymd-guest { position: absolute; left: var(--edge); bottom: var(--edge); z-index: 30; width: 440px; max-width: 42vw; }

/* ============================================================
   CITY MAP (Go Deeper) — desktop
   POI list (left) · map (middle, kept visible) · spot detail (right).
   List is single-column by default; an edge handle expands it to two
   columns for a wider overview and folds it back down.
   ============================================================ */
.ymd[data-panel="citymap"] { --side-w: 400px; --spot-w: 440px; }

/* breathing room at the top of the list panel */
.ymd .cm-panel { padding-top: 14px; }

/* Add-spot FAB removed (the top search does the same); Share moves to the top bar */
.ymd .citymap__ctl .cm-fab--magic,
.ymd .citymap__ctl .cm-fab--share { display: none; }

/* map settings (layers) → bottom-right, above the Surfaces button */
.ymd[data-panel="citymap"] .citymap__ctl {
  flex-direction: column; top: auto; bottom: calc(var(--edge) + 76px); right: var(--edge);
}

/* expand / collapse handle on the panel's right edge */
.ymd-cmexpand {
  position: absolute; z-index: 46; top: 50%; transform: translateY(-50%);
  left: calc(var(--edge) + var(--side-w) - 2px);
  width: 34px; height: 90px;
  border: 1px solid var(--border); border-left: none;
  border-radius: 0 18px 18px 0;
  background: var(--surface); box-shadow: 10px 0 20px -11px rgba(15,22,32,.28);
  cursor: pointer; display: grid; place-items: center; color: var(--text-2); font-size: 20px;
  transition: left .2s cubic-bezier(.2,0,0,1);
}
.ymd-cmexpand:hover { color: var(--coral); }

/* concave fillets that fuse the handle into the panel's right edge */
.ymd-cmexpand { overflow: visible; }
.ymd-cmexpand::before, .ymd-cmexpand::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 30px;
  background: var(--surface); pointer-events: none;
}
.ymd-cmexpand::before {
  top: -30px;
  -webkit-mask: radial-gradient(16px 30px at top right, transparent 99%, #000 100%);
          mask: radial-gradient(16px 30px at top right, transparent 99%, #000 100%);
}
.ymd-cmexpand::after {
  bottom: -30px;
  -webkit-mask: radial-gradient(16px 30px at bottom right, transparent 99%, #000 100%);
          mask: radial-gradient(16px 30px at bottom right, transparent 99%, #000 100%);
}
/* hide the expand handle whenever a modal (share / layers / note) is open over the map */
.ymd[data-panel="citymap"]:has(.cm-modal) .ymd-cmexpand { display: none; }

/* expanded → two-column overview */
.ymd[data-panel="citymap"][data-cm-expanded="1"] { --side-w: 640px; }
.ymd[data-panel="citymap"][data-cm-expanded="1"] .cm-list {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-content: start;
}
.ymd[data-panel="citymap"][data-cm-expanded="1"] .cm-poi { align-items: flex-start; min-width: 0; }
.ymd[data-panel="citymap"][data-cm-expanded="1"] .cm-poi__thumb { width: 56px; height: 56px; }
/* Kaio review — keep the directions/map button in the expanded 2-column list (was hidden) */
.ymd[data-panel="citymap"][data-cm-expanded="1"] .cm-poi__route { width: 36px; height: 36px; font-size: 16px; align-self: center; }
/* Kaio review — the spots flow left→right like a book; only the real POI cards
   are gridded. Section-like blocks (pending review, friends' segments, empty state)
   stay full-width so they don't leave a tall ragged gap beside the first spot. */
.ymd[data-panel="citymap"][data-cm-expanded="1"] .cm-list > .cm-pending,
.ymd[data-panel="citymap"][data-cm-expanded="1"] .cm-list > .cm-friendseg,
.ymd[data-panel="citymap"][data-cm-expanded="1"] .cm-list > .cm-empty { grid-column: 1 / -1; }
/* Curated places and notes are section wrappers, so the outer grid otherwise
   treats each whole section as ONE card and keeps the long single column Kaio
   reported. Let their headers span both columns and flow their rows as cards. */
.ymd[data-panel="citymap"][data-cm-expanded="1"] .cm-list > .cm-curatedseg,
.ymd[data-panel="citymap"][data-cm-expanded="1"] .cm-list > .cm-noteseg {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.ymd[data-panel="citymap"][data-cm-expanded="1"] .cm-curatedseg__hd,
.ymd[data-panel="citymap"][data-cm-expanded="1"] .cm-noteseg__hd { grid-column: 1 / -1; }
/* Kaio review — a guide reads as one arranged column (creator · voice · spots · tips);
   never break it into the two-column overview, at any panel width. */
.ymd[data-panel="citymap"] .cm-list--guide { display: flex !important; flex-direction: column; }

/* spot detail → RIGHT panel; the list + map stay visible & clickable behind it */
.ymd .spotx { background: transparent; pointer-events: none; }
.ymd .spotx__map { display: none; }
.ymd .spot-sheet {
  left: auto; right: var(--edge); top: var(--edge); bottom: var(--edge);
  width: var(--spot-w); pointer-events: auto;
}
.ymd[data-panel="citymap"]:has(.spotx) .citymap__ctl { display: none; }

/* Share action for the city map lives in the top bar (left of the profile) */
.ymd-topact {
  width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--border); cursor: pointer;
  background: var(--surface-muted); color: var(--ink); display: grid; place-items: center; font-size: 19px;
}
.ymd-topact:hover { border-color: var(--slate-400); color: var(--coral); }

/* ============================================================
   RESPONSIVE  (iPad landscape / portrait / small)
   ============================================================ */
@media (max-width: 1200px) {
  .ymd[data-panel="citymap"] { --spot-w: 400px; }
  .ymd[data-panel="citymap"][data-cm-expanded="1"] { --side-w: 560px; }
}
@media (max-width: 1120px) {
  .ymd[data-panel="itinerary"] { --win-w: 92vw; }
  .ymd[data-panel="social"]    { --win-w: 620px; }
}
@media (max-width: 980px) {
  .ymd[data-panel="citymap"][data-cm-expanded="1"] { --side-w: 480px; }
  .ymd[data-panel="citymap"][data-cm-expanded="1"] .cm-poi__thumb { width: 46px; height: 46px; }
}
@media (max-width: 1024px) {          /* iPad landscape */
  .ym.ymd { --side-w: 420px; }
  .ymd-nav .ymd-navlink span { display: none; }
  .ymd-nav .ymd-navlink { padding: 0 12px; }
}
@media (max-width: 834px) {           /* iPad portrait */
  .ym.ymd { --edge: 12px; --win-w: 88vw; --side-w: 380px; }
  .ymd-brand b { display: none; }
  .ymd-trippill { display: none; }
  .ymd[data-panel="social"], .ymd[data-panel="trips"], .ymd[data-panel="usage"],
  .ymd[data-panel="managesub"], .ymd[data-panel="trip"], .ymd[data-panel="vibe"] { --win-w: 88vw; }
}
@media (max-width: 640px) {           /* very small */
  .ym.ymd { --win-w: calc(100vw - 2 * var(--edge)); --side-w: calc(100vw - 2 * var(--edge)); }
  .ymd-search { max-width: none; }
}

/* ============================================================
   C7 — PLAN & USAGE: the comparison table was tiny. The desktop
   window has room, so scale the whole page to a comfortable size.
   ============================================================ */
.ymd[data-panel="usage"] .grouphdr { font-size: 12.5px; }
.ymd[data-panel="usage"] .plancmp__f { font-size: 13.5px; padding-left: 14px; }
.ymd[data-panel="usage"] .plancmp__col b { font-size: 15.5px; }
.ymd[data-panel="usage"] .plancmp__price { font-size: 13px; }
.ymd[data-panel="usage"] .plancmp__price i { font-size: 10.5px; }
.ymd[data-panel="usage"] .plancmp__special { font-size: 9.5px; }
.ymd[data-panel="usage"] .plancmp__cell { font-size: 20px; }
.ymd[data-panel="usage"] .plancmp__cell em { font-size: 13.5px; }
.ymd[data-panel="usage"] .plancmp__choose,
.ymd[data-panel="usage"] .plancmp__cur { font-size: 13px; }
.ymd[data-panel="usage"] .plancmp__note { font-size: 12.5px; }
.ymd[data-panel="usage"] .plancmp__row { padding: 9px 0; }
.ymd[data-panel="usage"] .plancmp__head { padding: 12px 0 11px; }
.ymd[data-panel="usage"] .cyc-seg__b { font-size: 12.5px; }
.ymd[data-panel="usage"] .student-note__txt b { font-size: 14px; }
.ymd[data-panel="usage"] .student-note__txt span { font-size: 12.5px; }
.ymd[data-panel="usage"] .profile-foot { font-size: 12px; }

/* ============================================================
   REVIEW ROUND 11 — trip setup + hub  (Kaio, desktop)
   ============================================================ */
/* D1 — the tap-to-open date calendar stretched to giant cells on the wide sheet
   (cells are aspect-ratio:1, so 7 columns across a 560px card → ~80px squares).
   Cap its width so it reads as a proper calendar. NOTE (Claude Code): this MiniCal
   is a stopgap — replace it with the app's real calendar view (see Trip handoff §P). */
.ymd .cal { max-width: 340px; }

/* D2 superseded in Round 12 — Kaio wanted the inline "Add destination" buttons back and
   ALL connector gaps equal, so the per-segment desktop tightening was removed (it made
   seg-route ≠ seg-home). Uniform spacing now lives in additions.css. */

/* D4 — booking status badge: back to centred on the RIGHT of the row (as before) —
   desktop has the room. Hide the inline-with-title copy mobile uses; show the side
   copy, which inherits align-self:center + margin from the existing .td-bkrow rule. */
.ymd .td-bkrow__top .td-bkstatus { display: none; }
.ymd .td-bkstatus--side { display: inline-flex; }

/* ============================================================
   REVIEW ROUND 12 — trips window popovers  (Kaio, desktop)
   ============================================================ */
/* The trips window is a short centered card whose body scrolls (overflow:auto). The row
   ⋯ menu, the People & roles popover and the icon picker are absolutely positioned inside
   that scroll area, so on desktop they were CLIPPED off the bottom — the lower menu items
   and the whole role-editing UI were unreachable. Lift them out as centered overlays
   (fixed → contained by the transformed .sheet, so the body's overflow can't clip them),
   like the delete-confirm modal. Every option is now fully visible & clickable. */
.ymd .tripcard__scrim { z-index: 70; background: rgba(15,22,32,.42); }
.ymd .triprow2__menu,
.ymd .ppl-pop,
.ymd .triprow2__iconpick {
  position: fixed; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%);
  z-index: 71; max-height: 78vh; overflow-y: auto;
}

/* ============================================================
   REVIEW ROUND 2 — desktop top-bar additions
   ============================================================ */
/* N3 — drop-a-note button sits right beside the search, labelled + map-pin icon */
.ymd-notebtn { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 15px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--coral-soft); background: color-mix(in srgb, var(--coral) 8%, var(--surface)); color: var(--coral); font: 700 13.5px var(--font-body); white-space: nowrap; }
.ymd-notebtn i { font-size: 18px; }
.ymd-notebtn:hover { background: color-mix(in srgb, var(--coral) 15%, var(--surface)); }

/* N5 — explore-mode "flying from" origin selector, next to the trip pill */
.ymd-origin { position: relative; flex: none; }
.ymd-originpill { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  background: var(--surface-muted); border: 1px solid var(--border); font: 700 13.5px var(--font-body); color: var(--ink); white-space: nowrap; }
.ymd-originpill > i:first-child { color: var(--info-blue); font-size: 16px; }
.ymd-originpill__lbl { font-weight: 600; color: var(--text-2); }
.ymd-originpill:hover { border-color: var(--slate-400); }
.ymd-origin__scrim { position: fixed; inset: 0; z-index: 54; }
.ymd-origin__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 55; width: 250px; padding: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); animation: ymdPop .16s ease; }
.ymd-origin__lbl { font: 800 9.5px/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 4px 8px 8px; }
.ymd-origin__opt { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-radius: 11px; cursor: pointer;
  border: none; background: none; font: 700 13px var(--font-body); color: var(--ink); text-align: left; }
.ymd-origin__opt:hover { background: var(--surface-muted); }
.ymd-origin__opt.on { background: color-mix(in srgb, var(--coral) 8%, transparent); color: var(--coral); }
/* M12 — departure-from: search + scrollable full city list */
.ymd-origin__menu { width: 262px; }
.ymd-origin__search { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px; margin: 2px 4px 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-muted); }
.ymd-origin__search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font: 500 13px var(--font-body); color: var(--ink); }
.ymd-origin__list { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.ymd-origin__tag { font: 700 10px var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--coral); }
.ymd-origin__est { font: 600 11.5px var(--font-body); color: var(--text-3); }
.ymd-origin__empty { padding: 14px 8px; text-align: center; font-size: 12.5px; color: var(--text-3); }