: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;
}

.page-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-header {
  padding: 28px clamp(20px, 4vw, 56px) 14px;
}

.site-header h1 {
  margin: 0;
  font-size: clamp(40px, 7vw, 88px);
  line-height: .9;
  letter-spacing: -.06em;
  font-weight: 500;
  text-transform: lowercase;
}

.site-header p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: clamp(15px, 2vw, 21px);
}

.map-stage {
  position: relative;
  flex: 1;
  margin: 8px clamp(12px, 2vw, 28px) 0;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 30px;
  overflow: hidden;
  min-height: 68vh;
  background: #07121f;
  box-shadow: 0 30px 90px rgba(0,0,0,.42);
}

.map-copy {
  position: absolute;
  top: 22px;
  left: 24px;
  z-index: 3;
  width: min(430px, calc(100% - 48px));
  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: 100%;
  min-height: 68vh;
  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. */
.map-zoom-controls {
  position: fixed !important;
  top: 178px !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;
}

@media (max-width: 760px) {
  .map-zoom-controls {
    display: none !important;
  }
}

.map-legend {
  position: fixed !important;
  top: 178px !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) {
  .site-header {
    padding: 22px 18px 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);
  }

  .map-stage {
    margin: 8px 10px 0;
    min-height: 70svh;
    border-radius: 22px;
  }

  #tripMap {
    min-height: 70svh;
  }

  .map-copy {
    top: 12px;
    left: 12px;
    width: min(340px, calc(100% - 84px));
    /* A plain px cap, not a viewport-relative unit like svh - real iPhone
       Safari has shown this box growing well past 42svh's intended share
       of the screen even though Chrome's mobile emulation renders the
       svh version correctly capped, so don't depend on how any one engine
       resolves that unit. */
    max-height: 320px;
    overflow: auto;
    padding: 14px 15px;
    border-radius: 18px;
  }

  .map-copy p {
    font-size: 14px;
    line-height: 1.4;
  }

  .map-copy .eyebrow {
    font-size: 11px;
  }

  .general-recs-btn {
    min-height: 44px;
    padding: 10px 15px;
    font-size: 14px;
  }

  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 control layout - controls left, legend right, same height.
   top is a CSS variable (set from frontdoor.js, fwfPositionLegendBelowCard)
   computed from the world-trip card's actual height, so the legend always
   sits below it instead of overlapping - a hardcoded top here previously
   caused a real overlap as soon as the card grew a third button. */
@media (max-width: 760px) {
  .map-legend {
    position: absolute !important;
    top: var(--fwf-legend-top, 12px) !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 55 !important;
    display: grid !important;
    grid-template-columns: auto !important;
    gap: 5px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
  }

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

/* The "Currently booked through here" callout is positioned from the SVG's
   own (landscape) coordinate space. On a narrow portrait phone the map gets
   heavily letterboxed, so that callout can land right on top of the legend
   or world-trip card instead of open ocean like it does on desktop. There's
   no reliable formula that avoids every phone's aspect ratio, so it's
   simplest to just hide it on small screens - the same info is available
   by tapping the highlighted stop directly. */
@media (max-width: 760px) {
  /* #tripAnnotations * further down forces every annotation child to
     display:block !important - beat that with the extra ID specificity
     here instead of relying on source order. */
  #tripAnnotations .fwf-booked-through-marker,
  #tripAnnotations .fwf-booked-through-marker * {
    display: none !important;
  }
}


/* 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;
}

/* EMERGENCY 2026-07-23: the World Trip intro card is overlaying most of
   the screen on real mobile Safari (confirmed after ruling out cache -
   closed every tab, killed Safari, reopened - and it's still broken).
   Could not reproduce it in Chrome's mobile emulation, so hiding it on
   phones outright until the real cause is found and fixed properly.
   Do not remove this without confirming the real bug is fixed first. */
@media (max-width: 760px) {
  .map-copy {
    display: none !important;
  }
}