:root {
  --bg: #06101c;
  --panel: rgba(8, 18, 31, 0.86);
  --text: #f6f0df;
  --muted: rgba(246, 240, 223, 0.68);
  --soft: rgba(246, 240, 223, 0.46);
  --gold: #d8b35a;
  --green: #6ee7a8;
}

* { box-sizing: border-box; }

html {
  /* Mobile Safari silently boosts font sizes for readability on some
     pages, which can push a height-capped box's text past its intended
     line count. Chrome's mobile device-emulation mode doesn't reproduce
     this, so it's easy to miss testing outside a real iPhone. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 50% 0%, #152d49 0%, var(--bg) 60%);
  color: var(--text);
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

/* Exactly one viewport tall, never more - the map stage below absorbs whatever
   the header and footer leave, so the page never scrolls. svh rather than vh
   because iOS Safari's vh is the toolbar-collapsed height, which would push
   the footer off-screen whenever the toolbar is showing. */
.page-shell {
  height: 100svh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* Title on the left, the world-trip card on the right. Wraps to a stack on
   narrow screens (see the 760px block) now that the card lives here instead
   of floating over the map. */
.site-header {
  padding: 28px clamp(20px, 4vw, 56px) 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 40px);
  flex-wrap: wrap;
}

/* flex: 0 0 auto keeps the title at its natural width so it is never
   squeezed, which leaves every remaining pixel of the row for .map-copy to
   claim. Without it the title would shrink and both boxes would fight over
   the same space. */
.site-header h1 {
  flex: 0 0 auto;
  margin: 0;
  font-size: clamp(40px, 7vw, 88px);
  line-height: .9;
  letter-spacing: -.06em;
  font-weight: 500;
  text-transform: lowercase;
}

/* Direct child only. The header has no <p> of its own today, but .map-copy
   now lives inside it and carries three - and this rule has the same
   specificity as .map-copy p, so an unscoped selector would be decided by
   source order alone. */
.site-header > p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: clamp(15px, 2vw, 21px);
}

/* Takes every pixel the header and footer do not, like a map app. The old
   `min-height: 68vh` was a floor that had nothing to do with what was
   actually available, so it both wasted space and forced the page to scroll.
   min-height: 0 is what lets a flex item actually shrink to its share.
   Column flex so the SVG and (on mobile) the legend below it divide the box. */
.map-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 8px clamp(12px, 2vw, 28px) 0;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 30px;
  overflow: hidden;
  background: #07121f;
  box-shadow: 0 30px 90px rgba(0,0,0,.42);
}

/* In-flow header card. position: relative is load-bearing - the mobile
   .hotel-mode-toggle rule positions itself absolutely against this box, and
   without a positioned ancestor it would escape to the viewport. */
.map-copy {
  position: relative;
  flex: 1 1 340px;
  /* Grows into whatever the title leaves behind. Wider box = fewer wrapped
     lines = shorter box, which is the point: it should spend the row's spare
     width rather than spare height. The cap only exists to stop the intro
     copy turning into one unreadable 1600px line on an ultrawide display. */
  max-width: 900px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background: rgba(6,16,28,.58);
  backdrop-filter: blur(10px);
}

.map-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 15px;
}

.map-copy .eyebrow {
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

#tripMap {
  width: 100%;
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
  display: block;
}

.land {
  fill: rgba(237,222,185,.16);
  stroke: rgba(237,222,185,.25);
  stroke-width: 1.2;
}

.route-line {
  fill: none;
  stroke: rgba(216,179,90,.72);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2 9;
}

.stop-hit {
  cursor: pointer;
  fill: transparent;
}

.stop-dot {
  cursor: pointer;
  stroke-width: 3;
}

.stop-dot.planned {
  fill: rgba(154,164,178,.34);
  stroke: rgba(246,240,223,.74);
}

.stop-dot.has-photos {
  fill: var(--green);
  stroke: rgba(246,240,223,.95);
  filter: url(#softGlow);
}

.stop-dot.current {
  fill: var(--gold);
  stroke: rgba(255,255,255,.98);
  filter: url(#softGlow);
}

.stop-label {
  pointer-events: none;
  fill: rgba(246,240,223,.78);
  font-size: 13px;
  paint-order: stroke;
  stroke: rgba(6,16,28,.85);
  stroke-width: 4px;
}

.stop-card {
  position: fixed;
  inset: 0;
  margin: auto;
  z-index: 5;
  width: min(420px, calc(100% - 32px));
  max-height: min(70vh, 640px);
  overflow: auto;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 26px;
  background: var(--panel);
  box-shadow: 0 28px 80px rgba(0,0,0,.48);
  backdrop-filter: blur(18px);
}

.hidden { display: none; }

.close-card {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: var(--text);
  background: rgba(255,255,255,.06);
  font-size: 22px;
  cursor: pointer;
}

.status-pill {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 10px;
  border: 1px solid rgba(216,179,90,.38);
  border-radius: 999px;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.stop-card h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.dates {
  margin: 8px 0 0;
  color: var(--muted);
}

.counts {
  margin: 12px 0 18px;
  color: var(--soft);
  font-size: 14px;
}

.action-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 9px;
}

.action-btn {
  text-decoration: none;
  text-align: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  padding: 11px 10px;
  color: var(--text);
  background: rgba(255,255,255,.07);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
}

/* Action buttons pick up a color once that category has content. */
#photosBtn.has-items {
  background: #35e884;
  color: #000;
  border-color: #35e884;
}

#notesBtn.has-items {
  background: #b46cff;
  color: #000;
  border-color: #b46cff;
}

#recsBtn.has-items {
  background: #36a3ff;
  color: #000;
  border-color: #36a3ff;
}

.panel {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.entry {
  padding: 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 14px;
  background: rgba(255,255,255,.055);
  color: var(--muted);
  line-height: 1.42;
  font-size: 14px;
}

.rec-form {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.rec-form-title {
  margin: 18px 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(246,240,223,.68);
}

.rec-form input,
.rec-form textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(0,0,0,.24);
  color: var(--text);
  padding: 12px;
  font: inherit;
  font-size: 14px;
}

.rec-form textarea {
  min-height: 96px;
  resize: vertical;
}

.rec-form ::placeholder {
  color: rgba(246,240,223,.42);
}

.rec-form button {
  border: 0;
  border-radius: 14px;
  padding: 12px;
  color: #06101c;
  background: var(--gold);
  font: inherit;
  cursor: pointer;
}

.form-note {
  margin: 0;
  color: rgba(246,240,223,.42);
  font-size: 12px;
}

.note-form-actions {
  display: flex;
  gap: 10px;
}

.note-form-actions button {
  flex: 1;
}

.cancel-note-edit-btn {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  color: var(--text) !important;
}

footer {
  padding: 14px 28px 22px;
  color: rgba(246,240,223,.42);
  font-size: 13px;
  text-align: right;
}

.route-panel {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 4;
  width: min(420px, calc(100% - 48px));
  max-height: 36vh;
  overflow: auto;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  background: rgba(6,16,28,.62);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 60px rgba(0,0,0,.30);
}

.route-panel-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 10px;
}

.route-panel-header span {
  color: var(--gold);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.route-panel-header strong {
  color: rgba(246,240,223,.7);
  font-size: 13px;
  font-weight: 500;
}

.route-list {
  display: grid;
  gap: 8px;
}

.route-item {
  width: 100%;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 10px 11px;
  background: rgba(255,255,255,.045);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.route-item:hover {
  background: rgba(216,179,90,.12);
  border-color: rgba(216,179,90,.38);
}

.route-number {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(216,179,90,.18);
  color: var(--gold);
  font-size: 12px;
}

.route-main {
  display: grid;
  gap: 2px;
}

.route-main strong {
  font-size: 14px;
  font-weight: 600;
}

.route-main span {
  color: rgba(246,240,223,.52);
  font-size: 12px;
}

.route-date {
  color: rgba(246,240,223,.46);
  font-size: 12px;
  white-space: nowrap;
}

.action-btn.disabled,
.action-btn[aria-disabled="true"] {
  opacity: .46;
  cursor: not-allowed;
}

.stop-group:hover .stop-dot {
  filter: url(#softGlow);
}

@media (max-width: 760px) {
  .route-panel {
    left: 14px;
    right: 14px;
    bottom: 14px;
    width: auto;
    max-height: 28vh;
  }

  .route-panel-header {
    display: block;
  }

  .route-date {
    display: none;
  }

  .route-item {
    grid-template-columns: 24px 1fr;
  }

  .stop-card {
    z-index: 6;
  }
}

/* Route tray refinement */
.route-panel {
  left: 24px;
  right: 24px;
  bottom: 22px;
  width: auto;
  max-height: none;
  height: 138px;
  padding: 14px 16px;
  border-radius: 22px;
}

.route-panel-header {
  margin-bottom: 8px;
}

.route-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
}

.route-item {
  min-width: 210px;
  max-width: 250px;
  grid-template-columns: 26px 1fr;
  grid-template-rows: auto auto;
  padding: 10px 11px;
}

.route-number {
  grid-row: 1 / span 2;
}

.route-date {
  grid-column: 2;
  font-size: 12px;
  margin-top: 2px;
}

.route-main strong {
  font-size: 14px;
}

.route-main span {
  display: none;
}

@media (max-width: 760px) {
  .route-panel {
    left: 12px;
    right: 12px;
    bottom: 12px;
    height: 118px;
    padding: 12px;
  }

  .route-panel-header strong {
    display: none;
  }

  .route-item {
    min-width: 175px;
  }
}


/* Force-remove route panel from prototype */
.route-panel,
.route-panel-header,
.route-list {
  display: none !important;
}

/* Visual polish pass */

.map-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 55% 48%, black 0%, black 55%, transparent 90%);
}

.map-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 28%, rgba(216,179,90,.10), transparent 22%),
    radial-gradient(circle at 60% 70%, rgba(110,231,168,.06), transparent 28%),
    linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.25));
}

#tripMap {
  position: relative;
  z-index: 0;
}

.map-copy {
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
}

.land {
  fill: rgba(227, 218, 190, .18);
  stroke: rgba(246, 240, 223, .22);
  stroke-width: 1.4;
}

.route-line {
  stroke: rgba(216,179,90,.82);
  stroke-width: 3;
  stroke-dasharray: 2 10;
  filter: drop-shadow(0 0 5px rgba(216,179,90,.30));
}

.stop-dot {
  transition: r .15s ease, filter .15s ease, opacity .15s ease;
}

.stop-group:hover .stop-dot {
  r: 11;
}

.stop-dot.current {
  animation: pulseCurrent 1.9s ease-in-out infinite;
}

@keyframes pulseCurrent {
  0%, 100% {
    opacity: 1;
    stroke-width: 3;
  }
  50% {
    opacity: .82;
    stroke-width: 6;
  }
}

.stop-label {
  font-size: 14px;
  font-weight: 700;
  fill: rgba(246,240,223,.84);
  stroke-width: 5px;
}

.map-legend {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 4;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(6,16,28,.62);
  backdrop-filter: blur(12px);
  color: rgba(246,240,223,.66);
  font-size: 12px;
}

.map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.legend-dot.current {
  background: var(--gold);
  box-shadow: 0 0 12px rgba(216,179,90,.65);
}

.legend-dot.has-photos {
  background: var(--green);
  box-shadow: 0 0 12px rgba(110,231,168,.55);
}

.legend-dot.planned {
  background: rgba(154,164,178,.35);
  border: 1px solid rgba(246,240,223,.72);
}

.stop-card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 18px;
  height: 18px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--panel);
  border-right: 1px solid rgba(255,255,255,.16);
  border-bottom: 1px solid rgba(255,255,255,.16);
}

.action-btn:hover {
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .map-legend {
    right: 14px;
    bottom: 14px;
    max-width: calc(100% - 28px);
    border-radius: 18px;
  }

  .map-copy {
    font-size: 14px;
  }

  .stop-label {
    font-size: 12px;
  }
}

/* Real SVG map base */
.real-land {
  fill: rgba(227, 218, 190, .16);
  stroke: rgba(246, 240, 223, .11);
  stroke-width: .7;
}

.real-border {
  fill: none;
  stroke: rgba(246, 240, 223, .18);
  stroke-width: .7;
  vector-effect: non-scaling-stroke;
}

.city-label {
  fill: rgba(246,240,223,.28);
  font-size: 10px;
  letter-spacing: .04em;
  paint-order: stroke;
  stroke: rgba(6,16,28,.75);
  stroke-width: 3px;
  pointer-events: none;
}

.real-map-base {
  opacity: 1;
}


/* Expanded popup and local entry controls */
.stop-card {
  transform: none !important;
}

.stop-card.expanded {
  max-height: min(72vh, calc(100% - 32px));
}

.entry {
  position: relative;
}

.entry-text {
  margin-bottom: 8px;
}

.entry-meta {
  color: rgba(246,240,223,.42);
  font-size: 12px;
}

.entry-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.entry-actions button {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 6px 10px;
  color: rgba(246,240,223,.64);
  background: rgba(255,255,255,.045);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.entry-actions button:hover {
  color: rgba(246,240,223,.9);
  border-color: rgba(216,179,90,.36);
  background: rgba(216,179,90,.10);
}

/* Friend Rec comments */
.comment-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.comment {
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(0,0,0,.16);
  color: rgba(246,240,223,.68);
  font-size: 13px;
  line-height: 1.35;
}

.comment-form {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.comment-form input,
.comment-form textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(0,0,0,.20);
  color: var(--text);
  padding: 9px 10px;
  font: inherit;
  font-size: 13px;
}

.comment-form textarea {
  min-height: 70px;
  resize: vertical;
}

.comment-form ::placeholder {
  color: rgba(246,240,223,.42);
}

.comment-form button {
  border: 0;
  border-radius: 12px;
  padding: 9px 10px;
  color: #06101c;
  background: var(--gold);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.comment-actions {
  display: flex;
  gap: 8px;
  margin-top: 7px;
}

.comment-actions button {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 5px 9px;
  color: rgba(246,240,223,.58);
  background: rgba(255,255,255,.04);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.comment-actions button:hover {
  color: rgba(246,240,223,.9);
  border-color: rgba(216,179,90,.34);
  background: rgba(216,179,90,.10);
}

.comment-line {
  color: rgba(246,240,223,.72);
}

/* Tighter edit/remove controls */
.stop-card {
  width: min(520px, calc(100% - 32px));
}

.entry {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 10px;
  align-items: start;
}

.entry-text {
  grid-column: 1;
  margin-bottom: 4px;
}

.entry-meta {
  grid-column: 1;
}

.entry-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  gap: 6px;
  margin-top: 0;
  justify-content: flex-end;
  align-items: start;
}

.entry-actions button,
.comment-actions button {
  min-width: 30px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0 7px;
  line-height: 1;
}

/* Note title + who, on one line: title reads as the headline, who as a
   small byline to its right. Title truncates with an ellipsis instead of
   wrapping so long titles can't push "who" onto a second line. */
.entry-note-head {
  grid-column: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.entry-note-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
}

.entry-note-who {
  flex-shrink: 0;
  white-space: nowrap;
  color: rgba(246,240,223,.42);
  font-size: 11px;
}

.comment {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 8px;
  align-items: start;
}

.comment-line {
  grid-column: 1;
}

.comment .entry-meta {
  grid-column: 1;
}

.comment-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  gap: 6px;
  margin-top: 0;
  justify-content: flex-end;
  align-items: start;
}

.comment-form {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .stop-card {
    width: min(520px, calc(100% - 28px));
  }

  .entry,
  .comment {
    grid-template-columns: 1fr auto;
  }
}

.rec-form-primary {
  margin-top: 0;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid rgba(216,179,90,.18);
  border-radius: 16px;
  background: rgba(216,179,90,.055);
}

/* Cleaner flat comment list */
.comment-list {
  gap: 4px;
}

.comment {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  padding: 5px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(246,240,223,.72);
}

.comment + .comment {
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 8px;
}

.comment-line {
  grid-column: 1;
  font-size: 13px;
  line-height: 1.35;
}

.comment-actions {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
  align-items: center;
}

.comment-actions button {
  min-width: 26px;
  height: 24px;
  padding: 0 5px;
  font-size: 12px;
}

/* Make rec comments visibly subordinate */
.comment-list {
  margin-left: 2.25rem;
  padding-left: 0.9rem;
  border-left: 1px solid rgba(246,240,223,.16);
}

.comment-form {
  margin-left: 2.25rem;
  padding-left: 0.9rem;
  border-left: 1px solid rgba(246,240,223,.10);
}

/* Indent comments so they sit under the recommendation */
.comment-list,
.comment-form {
  margin-left: 2.5rem;
  padding-left: 0.9rem;
  border-left: 1px solid rgba(246,240,223,.14);
}

/* Tighten comment indentation under recs */
.comment-list,
.comment-form {
  margin-left: 2ch !important;
  padding-left: 2ch !important;
  border-left: 1px solid rgba(246,240,223,.12);
}

/* Pull rec comments much closer to the left */
.comment-list,
.comment-form {
  margin-left: 0.75ch !important;
  padding-left: 1.25ch !important;
  border-left: 1px solid rgba(246,240,223,.12);
}

/* Pull rec comments much closer to the left */
.comment-list,
.comment-form {
  margin-left: 0.75ch !important;
  padding-left: 1.25ch !important;
  border-left: 1px solid rgba(246,240,223,.12);
}

/* Final rec comment spacing: slight indent only */
.comment-list,
.comment-form {
  margin-left: 0 !important;
  padding-left: 1.15rem !important;
  border-left: 1px solid rgba(246,240,223,.12) !important;
}

.comment {
  padding-left: 0 !important;
}

.comment-line {
  margin-left: 0 !important;
}

/* FINAL FIX: comments belong under the rec, not in the right grid column */
.entry > .comment-list,
.entry > .comment-form {
  grid-column: 1 / -1 !important;
  width: auto !important;
  margin-left: 2ch !important;
  padding-left: 1.25ch !important;
  border-left: 1px solid rgba(246,240,223,.14) !important;
}

.entry > .comment-list {
  margin-top: 10px !important;
}

.comment {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  padding: 5px 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.comment-line {
  grid-column: 1 !important;
  margin-left: 0 !important;
}

.comment-actions {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

/* Clean map view: hide stop labels until hover/focus */
.stop-label,
.map-label,
.city-label,
.route-label,
.stop text,
.map-stop text {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .15s ease;
}

.stop:hover .stop-label,
.stop:hover .map-label,
.stop:hover .city-label,
.map-stop:hover .stop-label,
.map-stop:hover .map-label,
.map-stop:hover .city-label,
.stop.is-active .stop-label,
.stop.active .stop-label,
.map-stop.is-active .stop-label,
.map-stop.active .stop-label {
  opacity: 1 !important;
}

/* Map cleanup: hide city labels until hover */
.stop-label {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .15s ease;
}

g:hover > .stop-label,
.stop:hover .stop-label,
.map-stop:hover .stop-label,
.stop-group:hover .stop-label {
  opacity: 1 !important;
}

/* Hover label date line */
.stop-label-date {
  font-size: 11px;
  opacity: .78;
  font-weight: 400;
}

/* Temporary cleanup: hide full-route spaghetti lines */
.route-line {
  display: none !important;
}

/* Clean map reset - keep the public map dot-only unless a stop is hovered. */
#routeLines,
.route-line {
  display: none !important;
}

.stop-label {
  opacity: 0 !important;
  pointer-events: none;
}

.stop-group:hover .stop-label,
.stop-group:focus .stop-label,
.stop-group:focus-within .stop-label {
  opacity: 1 !important;
}

.stop-label-date {
  font-size: 11px;
  opacity: .78;
  font-weight: 400;
}


/* Map interaction polish */
#tripMap {
  cursor: grab;
  touch-action: none;
}

#tripMap.is-panning {
  cursor: grabbing;
}

.stop-hit {
  pointer-events: auto;
}

.stop-label {
  pointer-events: none;
}


/* Fine tuning: smaller dots and clean route legs */
#routeLines {
  display: block !important;
  pointer-events: none;
}

.route-line {
  display: block !important;
  fill: none;
  stroke: rgba(214, 184, 102, 0.42);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-dasharray: 5 8;
  pointer-events: none;
}

.stop-dot {
  stroke-width: 2.5;
}

.stop-hit {
  pointer-events: auto;
}


/* Europe zoom polish: tighter route dashes and readable hover labels */
.route-line {
  stroke-width: 1 !important;
  stroke-dasharray: 2.5 3.5 !important;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.stop-dot {
  vector-effect: non-scaling-stroke;
  stroke-width: 2 !important;
}

.stop-label {
  paint-order: stroke;
  stroke: rgba(4, 13, 22, 0.82);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.stop-label-date {
  paint-order: stroke;
  stroke: rgba(4, 13, 22, 0.82);
  stroke-width: 4px;
  stroke-linejoin: round;
}


/* General recs, floating controls, and content-aware legend */
.general-recs-btn {
  margin-top: 14px;
  border: 1px solid rgba(214, 184, 102, 0.48);
  background: rgba(214, 184, 102, 0.14);
  color: #f6e9c8;
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
}

.general-recs-btn:hover {
  background: rgba(214, 184, 102, 0.24);
  border-color: rgba(214, 184, 102, 0.78);
}

.map-copy-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

a.general-recs-btn {
  text-decoration: none;
}

/* Invisible but clickable hitbox - family members don't need to see this.
   Pushed to the far right of the row (away from the visible buttons) via
   margin-left: auto so it is not sitting right next to Photo Gallery where
   someone could tap it by accident. */
.hotel-mode-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0 0 0 auto;
  border: none;
  background: transparent;
  color: transparent;
  cursor: pointer;
}

.hotel-mode-toggle:hover,
.hotel-mode-toggle.active {
  background: transparent;
  color: transparent;
  border-color: transparent;
}

.hotel-mode-message {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 12px);
  z-index: 200;
  max-width: min(90vw, 420px);
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(120, 200, 255, 0.5);
  background: rgba(6, 16, 28, 0.92);
  color: #f6f0df;
  font-size: 14px;
  text-align: center;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

.hotel-mode-message.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Desktop-only zoom buttons; mobile uses pinch-to-zoom instead.
   Sits to the left of .map-legend, same row.

   Anchored to .map-stage (position: relative) rather than the viewport as of
   2026-08-03. The old `fixed / top: 178px` was measured from the top of the
   window to clear a header that was only the title - once the world-trip card
   moved into that header, 178px landed on top of it. Positioning against the
   map means this tracks the map's own top edge at any header height, so there
   is no magic number left to go stale. */
.map-zoom-controls {
  position: absolute !important;
  top: 14px !important;
  right: 200px !important;
  z-index: 1200 !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 8px !important;
  border-radius: 999px !important;
  background: rgba(7, 20, 39, .72) !important;
  border: 1px solid rgba(246,240,223,.16) !important;
  backdrop-filter: blur(8px) !important;
}

.map-zoom-controls button {
  min-width: 34px;
  height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(246,240,223,.18);
  border-radius: 999px;
  background: rgba(246,240,223,.08);
  color: #f6f0df;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.map-zoom-controls button:hover {
  background: rgba(210,180,107,.22);
  border-color: rgba(210,180,107,.5);
}

.map-zoom-controls::after {
  content: "+ to zoom in";
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 120px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: rgba(4, 13, 22, .82);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  color: rgba(250, 245, 229, .96);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  pointer-events: none;
}

/* Zoom buttons are shown on mobile too as of 2026-08-03. They were hidden on
   the assumption that pinch-to-zoom covers it, but pinch is undiscoverable and
   awkward one-handed, and the map is the whole point of the page. Smaller
   here, pinned to the map's top-right, with the "+ to zoom in" hint dropped -
   the hint is for a mouse user who has no pinch gesture to fall back on. */
@media (max-width: 760px) {
  .map-zoom-controls {
    display: flex !important;
    top: 10px !important;
    right: 10px !important;
    padding: 5px !important;
    gap: 5px !important;
    z-index: 60 !important;
  }

  .map-zoom-controls button {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    font-size: 16px;
  }

  .map-zoom-controls::after {
    display: none !important;
    content: none !important;
  }
}

/* Same change as .map-zoom-controls above - anchored to .map-stage instead of
   the viewport, so it sits at the map's top-right corner regardless of how
   tall the header is. This also matches what the 760px block below already
   did, so desktop and mobile now agree on the positioning scheme. */
.map-legend {
  position: absolute !important;
  top: 14px !important;
  right: 22px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 1190 !important;
  display: grid !important;
  gap: 7px !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  background: rgba(4, 13, 22, .72) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .32) !important;
  backdrop-filter: blur(10px);
}

.map-legend span {
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: rgba(250, 245, 229, .84);
  font-size: 12px;
  text-transform: none;
  letter-spacing: .02em;
}

.stop-dot.current,
.legend-dot.current {
  fill: #f2ad2e !important;
  background: #f2ad2e !important;
  stroke: rgba(255, 244, 206, .96) !important;
}

.stop-dot.has-photos,
.legend-dot.has-photos {
  fill: #35e884 !important;
  background: #35e884 !important;
  stroke: rgba(220, 255, 235, .96) !important;
}

.stop-dot.has-recs,
.legend-dot.has-recs {
  fill: #36a3ff !important;
  background: #36a3ff !important;
  stroke: rgba(222, 241, 255, .98) !important;
}

.stop-dot.planned,
.legend-dot.planned {
  fill: rgba(236, 231, 209, .44) !important;
  background: rgba(236, 231, 209, .7) !important;
  stroke: rgba(250, 245, 229, .82) !important;
}

.stop-dot.has-notes,
.legend-dot.has-notes {
  fill: #b46cff !important;
  background: #b46cff !important;
  stroke: rgba(232, 214, 255, .96) !important;
}

/* Both photos and notes: half green (left), half purple (right) - see the
   dotSplitPhotosNotes gradient defined in index.html's map <defs>. */
.stop-dot.has-photos-and-notes {
  fill: url(#dotSplitPhotosNotes) !important;
  stroke: rgba(232, 245, 235, .96) !important;
}

.legend-dot.has-notes {
  background: #b46cff !important;
}

.stop-label-status {
  font-weight: 800;
  letter-spacing: .01em;
  paint-order: stroke;
  stroke: rgba(4, 13, 22, .86);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.stop-label-status.status-photos {
  fill: #35e884;
}

.stop-label-status.status-notes {
  fill: #b46cff;
}

.stop-label-status.status-recs {
  fill: #36a3ff;
}

@media (max-width: 760px) {
  .map-legend {
    top: 158px !important;
    right: 12px !important;
    padding: 10px 12px !important;
  }
}


/* General Friend Recs button - placed directly under intro copy */
.general-recs-btn {
  display: block !important;
  width: fit-content;
  margin-top: 16px !important;
  border: 1px solid rgba(214, 184, 102, 0.72);
  background: rgba(214, 184, 102, 0.20);
  color: #f9efd3;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}

.general-recs-btn:hover {
  background: rgba(214, 184, 102, 0.32);
  border-color: rgba(247, 221, 147, .95);
}



/* General Friend Recs popup cleanup */
.stop-card.general-recs-mode .card-status,
.stop-card.general-recs-mode .card-counts,
.stop-card.general-recs-mode .card-actions,
.stop-card.general-recs-mode #notesPanel {
  display: none !important;
}

.stop-card.general-recs-mode #cardTitle {
  display: inline !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  margin-right: 8px;
}

.stop-card.general-recs-mode #cardDates {
  display: inline !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  color: rgba(250, 245, 229, .92) !important;
  white-space: nowrap !important;
}

.stop-card.general-recs-mode #cardDates::before {
  content: " - ";
  color: rgba(250, 245, 229, .62);
}

.stop-card.general-recs-mode #recsPanel {
  display: block !important;
  margin-top: 16px;
}

.stop-card.general-recs-mode #recsPanel h3 {
  display: none !important;
}

.stop-card.general-recs-mode #recsList {
  margin-top: 0 !important;
}

@media (max-width: 620px) {
  .stop-card.general-recs-mode #cardTitle,
  .stop-card.general-recs-mode #cardDates {
    font-size: 18px !important;
  }
}


/* Hard cleanup for General Friend Recs popup */
.stop-card.general-recs-mode #photosBtn,
.stop-card.general-recs-mode #notesBtn,
.stop-card.general-recs-mode #recsBtn,
#stopCard.general-recs-mode #photosBtn,
#stopCard.general-recs-mode #notesBtn,
#stopCard.general-recs-mode #recsBtn {
  display: none !important;
}

.stop-card.general-recs-mode .card-status,
#stopCard.general-recs-mode .card-status {
  display: none !important;
}

.stop-card.general-recs-mode .card-counts,
#stopCard.general-recs-mode .card-counts {
  display: block !important;
}


/* Public popup cleanup and local time hover line */
.stop-label-local {
  fill: rgba(250, 245, 229, .88);
  font-weight: 750;
  letter-spacing: .01em;
  paint-order: stroke;
  stroke: rgba(4, 13, 22, .86);
  stroke-width: 4px;
  stroke-linejoin: round;
}



/* FWF hover label polish - applies to map hover labels only, not click popup */
.stop-label .stop-name {
  font-size: 60% !important;
}

.stop-label .stop-date,
.stop-label .stop-dates,
.stop-label .stop-time,
.stop-label .stop-local-time {
  font-size: 50% !important;
}

.stop-label .stop-country {
  font-size: 40% !important;
  font-weight: 500 !important;
  opacity: 0.9;
}

/* FWF final hover label sizes - map hover labels only, not click popups */
#stopDots .stop-group > text.stop-label {
  font-size: 9.6px !important;
}

#stopDots .stop-group > text.stop-label tspan.stop-name {
  font-size: 12px !important;
}

#stopDots .stop-group > text.stop-label tspan.stop-country {
  font-size: 7.7px !important;
  font-weight: 500 !important;
}

#stopDots .stop-group > text.stop-label tspan.stop-detail,
#stopDots .stop-group > text.stop-label tspan.stop-label-date,
#stopDots .stop-group > text.stop-label tspan.stop-label-local,
#stopDots .stop-group > text.stop-label tspan.stop-label-status {
  font-size: 7.7px !important;
}

/* FWF final hover label font - readable sans-serif for SVG hover text only */
#stopDots .stop-group > text.stop-label,
#stopDots .stop-group > text.stop-label tspan {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  text-shadow: none !important;
  filter: none !important;
  stroke: none !important;
  paint-order: normal !important;
  letter-spacing: 0.01em !important;
}

#stopDots .stop-group > text.stop-label tspan.stop-name {
  font-size: 12px !important;
  font-weight: 650 !important;
}

#stopDots .stop-group > text.stop-label tspan.stop-country {
  font-size: 7.7px !important;
  font-weight: 500 !important;
}

#stopDots .stop-group > text.stop-label tspan.stop-detail,
#stopDots .stop-group > text.stop-label tspan.stop-label-date,
#stopDots .stop-group > text.stop-label tspan.stop-label-local,
#stopDots .stop-group > text.stop-label tspan.stop-label-status {
  font-size: 7.7px !important;
  font-weight: 500 !important;
}


/* FWF Chrome pointer-event fix - keep map visual layers from stealing clicks */
.map-stage::before,
.map-stage::after {
  pointer-events: none !important;
}

#tripMap {
  pointer-events: auto !important;
}

#tripMap path,
#tripMap polygon,
#tripMap polyline,
#tripMap line,
#tripMap .route-line {
  pointer-events: none !important;
}

#routeLines,
#routeLines * {
  pointer-events: none !important;
}

#stopDots {
  pointer-events: auto !important;
}

#stopDots .stop-group,
#stopDots .stop-hit,
#stopDots .stop-dot {
  pointer-events: all !important;
  cursor: pointer !important;
}

#stopDots .stop-label,
#stopDots .stop-label * {
  pointer-events: none !important;
}

.action-btn,
#generalRecsBtn,
#photosBtn,
#notesBtn,
#recsBtn,
#saveRecBtn,
#saveNoteBtn,
.close-card {
  pointer-events: auto !important;
}

/* FWF final Chrome/Safari map interaction rules */
#routeLines,
#routeLines *,
#tripMap .route-line {
  pointer-events: none !important;
}

#stopDots {
  pointer-events: auto !important;
}

#stopDots .stop-group,
#stopDots .stop-hit,
#stopDots .stop-dot {
  pointer-events: all !important;
  cursor: pointer !important;
}

#stopDots .stop-label,
#stopDots .stop-label * {
  pointer-events: none !important;
}

#stopDots .stop-group.fwf-js-hover .stop-label {
  opacity: 1 !important;
  visibility: visible !important;
}


/* Mobile map experience: city details become a thumb-friendly bottom sheet. */
.mobile-map-tip {
  display: none;
}

.stop-card-backdrop {
  display: none;
}

@media (max-width: 760px) {
  /* svh, not vh: vh on iOS Safari measures the tallest (toolbar-collapsed)
     viewport, which would make the page overflow by the toolbar's height and
     reintroduce the scrolling this layout is trying to remove. */
  .page-shell {
    min-height: 100svh;
  }

  /* Stack: title, then the world-trip card full width beneath it. */
  .site-header {
    padding: 22px 18px 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .site-header h1 {
    font-size: clamp(24px, 9.5vw, 36px);
  }

  .site-header > p {
    font-size: 16px;
    line-height: 1.38;
  }

  .mobile-map-tip {
    display: inline;
    color: var(--text);
  }

  /* Sizing is handled by the base .map-stage / #tripMap rules now - they fill
     the leftover viewport on every screen. The earlier aspect-ratio approach
     here (which sized the box to the map instead of the map to the box) is
     gone: fwfFittedViewBox() in frontdoor.js now reshapes the viewBox to match
     the container, so a tall narrow phone starts zoomed into a vertical slice
     that fills the height rather than a short strip with ocean above and
     below. Only the margins differ on mobile. */
  .map-stage {
    margin: 8px 10px 0;
    border-radius: 22px;
  }

  .map-legend {
    flex: 0 0 auto;
  }

  /* The height cap and inner scrollbar that used to live here are gone
     (2026-08-03). Both existed only because this box floated over the map
     and had to be stopped from swallowing it - the note about px vs svh
     and real-iPhone-Safari overshoot is preserved in git history if that
     bug ever resurfaces on a different element. In the header the card is
     in normal flow, so it can just be as tall as its content and push the
     map down. No cap, no overflow, no scroll trap. */
  /* flex: 0 0 auto is required, not cosmetic. The base rule sets
     `flex: 1 1 340px` for the desktop row, where 340px is a *width* basis.
     .site-header switches to flex-direction: column here, which flips the
     main axis - so that same basis would become a 340px minimum *height*
     and leave a tall empty gap under the buttons. Reset to auto so the
     card is sized by its content again. */
  .map-copy {
    flex: 0 0 auto;
    max-width: none;
    padding: 10px 12px;
    border-radius: 18px;
  }

  .map-copy p {
    font-size: 12px;
    line-height: 1.25;
  }

  .map-copy .eyebrow {
    font-size: 9px;
    margin-bottom: 4px;
  }

  .map-copy-actions {
    gap: 6px;
    margin-top: 6px;
  }

  .general-recs-btn {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 11px;
  }

  /* Keeps its 44px tap target but shouldn't consume row width in this
     tighter layout - as a flex item it could force the two visible
     buttons to wrap onto separate lines even though there's room for
     them side by side. */
  .hotel-mode-toggle {
    position: absolute;
    right: 10px;
    bottom: 10px;
    margin: 0;
  }

  body.stop-card-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .stop-card-backdrop {
    position: fixed;
    inset: 0;
    display: block;
    z-index: 70;
    background: rgba(0, 0, 0, .48);
    backdrop-filter: blur(2px);
  }

  .stop-card-backdrop.hidden {
    display: none;
  }

  #stopCard.stop-card {
    position: fixed;
    inset: 0;
    margin: auto;
    z-index: 80;
    width: min(92vw, 480px);
    height: auto;
    max-height: min(80dvh, 640px);
    padding: 18px 18px calc(22px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: 24px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .52);
  }

  #stopCard.stop-card::after {
    display: none;
  }

  #stopCard .close-card {
    position: sticky;
    top: 0;
    z-index: 2;
    float: right;
    width: 44px;
    height: 44px;
    margin: -4px -4px 8px 12px;
    background: rgba(20, 34, 49, .96);
    border-color: rgba(255, 255, 255, .24);
    font-size: 28px;
    line-height: 1;
  }

  #stopCard .status-pill {
    margin-right: 56px;
  }

  #stopCard h2 {
    clear: both;
    font-size: clamp(29px, 9vw, 38px);
    padding-right: 4px;
  }

  #stopCard .dates {
    font-size: 16px;
  }

  #stopCard .counts {
    font-size: 15px;
  }

  #stopCard .action-row {
    gap: 8px;
  }

  #stopCard .action-btn {
    min-height: 46px;
    display: grid;
    place-items: center;
    padding: 10px 6px;
    font-size: 14px;
  }

  #stopCard .panel {
    margin-top: 16px;
    padding-top: 16px;
  }

  #stopCard .rec-form input,
  #stopCard .rec-form textarea,
  #stopCard .rec-form button {
    min-height: 46px;
    font-size: 16px;
  }

  #stopCard .rec-form textarea {
    min-height: 104px;
  }

  #stopCard .rec-form button {
    padding: 11px 12px;
  }

  #stopCard .comment-list,
  #stopCard .comment-form {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  #stopCard.general-recs-mode #cardTitle,
  #stopCard.general-recs-mode #cardDates {
    font-size: 20px !important;
  }
}


/* Mobile V2 - keep controls out of the header and make the hint part of the map. */
@media (max-width: 760px) {
  .mobile-map-tip {
    display: none !important;
  }

  .map-legend {
    position: absolute !important;
    top: auto !important;
    right: 12px !important;
    bottom: 14px !important;
    left: auto !important;
    z-index: 45 !important;
    grid-template-columns: auto auto !important;
    gap: 6px 10px !important;
    padding: 9px 11px !important;
    border-radius: 15px !important;
  }

  .map-legend span {
    font-size: 11px !important;
    gap: 6px !important;
  }

  .legend-dot {
    width: 10px !important;
    height: 10px !important;
  }
}

/* Final mobile legend layout (2026-08-03): a horizontal strip in normal flow
   underneath the map instead of a floating panel on top of it.

   Every earlier attempt here was some variation on "where can this box overlap
   the map least" - top-right, bottom-right, and a JS-computed top offset - all
   of which cost map area on the screen that has the least of it. Now that
   .route-panel is display:none and the world-trip card has left .map-stage,
   the SVG is the only in-flow child of the stage, so a static legend simply
   lands below it inside the stage's rounded border and overlaps nothing.

   This block is last, so its !important declarations win over the two earlier
   mobile .map-legend blocks above - they are left alone rather than deleted so
   the desktop cascade is untouched. */
@media (max-width: 760px) {
  .map-legend {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    /* 10px column gap, not 14 - at 402px (iPhone 17 Pro) the five items need
       ~347px and 14px gaps pushed "planned" onto a second line. */
    gap: 7px 10px !important;
    margin: 0 !important;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .map-legend span {
    font-size: 11px !important;
    gap: 6px !important;
  }
}

/* The "Currently booked through here" callout used to be hidden on phones
   (2026-07-23). At the time the map was letterboxed inside a portrait screen
   and the callout, positioned from the SVG's landscape coordinate space, could
   land on top of the world-trip card or the legend instead of open ocean.
   Both causes are gone as of the map-fills-viewport work (PR #2): the card
   moved into the header, the legend became a strip below the map, and the
   viewBox now follows the container's aspect ratio rather than letterboxing.
   Unhidden 2026-08-13 and checked at 430x860 and 375x812. If it ever collides
   again, move the callout rather than hiding it - Chip noticed it missing. */


/* Map dots: pure fill, no white outline. */
.map-dot,
.trip-dot,
.stop-dot,
circle[class*="dot"] {
  stroke: none !important;
  stroke-width: 0 !important;
}

/* Actual map dots: pure fill color, no outline. */
#stopDots .stop-dot,
#stopDots .stop-dot.current,
#stopDots .stop-dot.has-photos,
#stopDots .stop-dot.has-recs,
#stopDots .stop-dot.planned {
  stroke: none !important;
  stroke-width: 0 !important;
}

/* FWF itinerary map annotations. */
#tripAnnotations {
  pointer-events: none;
}

/* The flight marker is a clickable stop-group living outside #stopDots. */
#tripAnnotations .stop-group,
#tripAnnotations .stop-hit,
#tripAnnotations .stop-dot {
  pointer-events: all !important;
  cursor: pointer !important;
}

.fwf-booked-through-marker,
.fwf-start-plane {
  vector-effect: non-scaling-stroke;
}

/* BEGIN FWF ROUTE VISUALS */
/* Final route treatment - brighter, still secondary to city dots. */
#tripMap .route-line {
  display: block !important;
  fill: none !important;
  stroke: rgba(214, 184, 102, 0.53) !important;
  stroke-width: 1.28 !important;
  stroke-dasharray: 2.5 3.5 !important;
  stroke-linecap: round !important;
  vector-effect: non-scaling-stroke !important;
  filter: none !important;
}

#tripMap .route-arrow {
  display: block !important;
  fill: rgba(214, 184, 102, 0.66) !important;
  stroke: rgba(214, 184, 102, 0.45) !important;
  stroke-width: 0.35 !important;
  vector-effect: non-scaling-stroke !important;
}

#tripAnnotations,
#tripAnnotations * {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

.fwf-booked-through-marker,
.fwf-start-plane {
  vector-effect: non-scaling-stroke;
}
/* END FWF ROUTE VISUALS */

/* BEGIN FWF ROUTE + POPUP IMPROVEMENTS */
#tripMap .route-line {
  stroke: rgba(214, 184, 102, 0.58) !important;
  stroke-width: 1.35 !important;
  stroke-dasharray: 2.5 3.5 !important;
  stroke-linecap: round !important;
  vector-effect: non-scaling-stroke !important;
}

#tripMap .route-arrow {
  display: block !important;
  fill: rgba(214, 184, 102, 0.72) !important;
  stroke: rgba(214, 184, 102, 0.48) !important;
  stroke-width: 0.35 !important;
  vector-effect: non-scaling-stroke !important;
}

#tripAnnotations,
#tripAnnotations * {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

@media (min-width: 761px) {
  #stopCard {
    cursor: grab;
  }

  #stopCard.is-dragging {
    cursor: grabbing;
    user-select: none;
  }
}
/* END FWF ROUTE + POPUP IMPROVEMENTS */

/* Remove the popup speech-bubble diamond tail. It can overlap rec text when cards move. */
.stop-card::after {
  display: none !important;
  content: none !important;
}

/* FWF POPUP STATUS PILL */
.status-pill {
  max-width: 100%;
  white-space: normal !important;
  line-height: 1.15;
}

/* Hotel mode: color every dot by whether it has a hotel location set. */
#stopDots .stop-dot.hotel-has {
  fill: #ff3b3b !important;
}

#stopDots .stop-dot.hotel-none {
  fill: #ffffff !important;
}

/* The 2026-07-23 emergency hide of the World Trip card on mobile has been
   removed (2026-07-30) - real device diagnostics (?debug=1) confirmed a
   ReferenceError in frontdoor.js was silently breaking page init on every
   mobile load (see that commit), on top of the earlier text-size-adjust
   and fixed-px max-height fixes already in place. Chip confirmed sane,
   non-zero values from his actual phone with the card still forced
   hidden; re-enabling it now that the likely cause is fixed. */