/*
 * trips.jbohlen.dev — shared design system.
 * Editorial travel journal: serif display (Fraunces), quiet sans body (Inter),
 * warm paper ground, ink text, terracotta accent, gold reserved for points/premium.
 * Used by both index.html (trip home) and city.html (city chapters).
 */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=Inter:ital,opsz,wght@0,14..32,300..600;1,14..32,300..600&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --paper:   #f7f4ee;   /* page ground */
  --card:    #fffdf9;   /* raised surfaces */
  --ink:     #211d18;
  --body:    #3f3a33;   /* running text, slightly softer than ink */
  --muted:   #8a8175;
  --rule:    #e4ddd0;
  --accent:  #b0532f;   /* terracotta */
  --gold:    #a8863a;   /* points / premium */
  --green:   #4b7a5a;   /* visited */
  --tag-bg:  #efeae1;
  --serif:   'Fraunces', Georgia, serif;
  --sans:    'Inter', -apple-system, sans-serif;
}

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
}

a { color: inherit; }

/* ───────────────────────── shared primitives ───────────────────────── */

.kicker {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.chip {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  background: var(--tag-bg);
  color: var(--muted);
  white-space: nowrap;
}
.chip.gold   { background: #f3ecdb; color: var(--gold); }
.chip.status { background: transparent; border: 1px solid var(--rule); color: var(--muted); }
.chip.tbd    { background: transparent; border: 1px dashed #cdb98a; color: var(--gold); }
.chip.visited { background: #e7efe8; color: var(--green); }
.chip.sample  { background: transparent; border: 1px dashed var(--rule); color: #b3a996; }
.chip.prior   { background: transparent; border: 1px solid #dcc9b8; color: var(--accent); }
.chip.edited  { background: #f3ecdb; color: var(--gold); }

.map-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 7px 13px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}
.map-btn:hover { background: #3c362e; }
.map-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

/* photo strips (cards on both pages) */
.photos { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.photos img {
  width: 96px; height: 96px;
  object-fit: cover;
  border-radius: 6px;
  cursor: zoom-in;
  background: var(--tag-bg);
}

/* ───────────────────────── trip home (index.html) ───────────────────────── */

.wrap { max-width: 780px; margin: 0 auto; padding: 0 24px; }

.cover { padding: 72px 0 40px; }
.cover .kicker { margin-bottom: 18px; }
.cover h1 {
  font-family: var(--serif);
  font-size: clamp(44px, 9vw, 76px);
  font-weight: 380;
  font-variation-settings: 'opsz' 100;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.cover h1 .season {
  display: block;
  font-size: clamp(22px, 4vw, 32px);
  font-style: italic;
  font-weight: 340;
  color: var(--accent);
  margin-top: 10px;
}
.cover .intro {
  margin-top: 22px;
  max-width: 520px;
  font-size: 15px;
  color: var(--body);
}

/* route strip */
.route {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 40px 0 8px;
  padding: 22px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.route .stop { text-align: center; text-decoration: none; }
a.stop .code { border-bottom: 1.5px solid #d8cfbe; padding-bottom: 1px; transition: color 0.15s, border-color 0.15s; }
a.stop:hover .code { color: var(--accent); border-color: var(--accent); }
.route .stop .code {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.route .stop .date {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1px;
}
.route .arrow {
  flex: 1;
  min-width: 20px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c8bfae;
  font-size: 13px;
}

/* itinerary flow */
.journey { padding: 26px 0 40px; }

/* flight card */
.flight-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 22px 24px 0;
  margin: 26px 0;
  overflow: hidden;
}
.fc-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.fc-airline {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.fc-no {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.fc-route {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 0 4px;
}
.fc-ap { min-width: 0; }
.fc-ap .code {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 420;
  line-height: 1.05;
  color: var(--ink);
}
.fc-ap .city  { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; }
.fc-ap .time  { font-size: 12px; color: var(--body); margin-top: 3px; }
.fc-ap.to { text-align: right; }
.fc-path {
  flex: 1;
  position: relative;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fc-path::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 1.5px dashed #d8cfbe;
}
.fc-path svg {
  position: relative;
  width: 17px; height: 17px;
  color: var(--accent);
  background: var(--card);
  padding: 0 2px;
  box-sizing: content-box;
}
.fc-dur {
  position: absolute;
  top: -8px; left: 0; right: 0;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.fc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 0 16px;
}
.fc-note { font-size: 12px; color: var(--muted); font-style: italic; padding-bottom: 14px; margin-top: -8px; }

/* redemption panel — "below the perforation" */
.fc-redemption {
  border-top: 1.5px dashed var(--rule);
  margin: 0 -24px;
  padding: 14px 24px 18px;
  background: #fbf8f1;
}
.fc-redemption .r-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.r-rows { display: grid; grid-template-columns: auto 1fr; gap: 3px 18px; font-size: 13px; }
.r-rows .k { color: var(--muted); font-size: 12px; }
.r-rows .v { color: var(--body); }
.r-rows .v.points { color: var(--gold); font-weight: 500; }

/* flown extras */
.fc-review, .sc-review {
  border-top: 1px solid var(--rule);
  padding: 14px 0 18px;
  font-size: 14px;
  color: var(--body);
}
.flight-card .photos { padding: 0; }

/* city chapter block */
.chapter { padding: 34px 0 8px; }
.ch-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.ch-kicker .n {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.ch-kicker::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.chapter h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 6vw, 42px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.chapter h2 .local {
  font-size: 0.55em;
  font-weight: 340;
  font-style: italic;
  color: var(--muted);
  margin-left: 10px;
}
.ch-dates { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* stay card */
.stay-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 18px 0 14px;
}
.sc-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 5px;
}
.sc-name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 480;
  color: var(--ink);
  line-height: 1.2;
}
.sc-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.sc-booking { font-size: 13px; color: var(--body); margin-top: 8px; }
.sc-note { font-size: 12.5px; color: var(--muted); font-style: italic; margin-top: 4px; }
.sc-chips { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }

/* guide link */
.guide-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  background: var(--ink);
  color: #f5f1e8;
  border-radius: 10px;
  padding: 15px 20px;
  margin: 6px 0 10px;
  transition: background 0.15s;
}
.guide-link:hover { background: #3c362e; }
.guide-link .g-name { font-family: var(--serif); font-size: 16px; font-weight: 450; }
.guide-link .g-count { font-size: 12px; color: #b8ae9d; white-space: nowrap; }
.guide-link .g-arrow { font-size: 16px; color: #b8ae9d; }

footer {
  padding: 30px 0 70px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--rule);
}

/* ─────────────────── the eating plan (plan.html) ─────────────────── */

/* entry card on the trip home */
.plan-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  background: var(--accent);
  color: #fdf6ef;
  border-radius: 10px;
  padding: 15px 20px;
  margin: 26px 0 0;
  transition: background 0.15s;
}
.plan-cta:hover { background: #9a4526; }
.plan-cta .g-name { font-family: var(--serif); font-size: 16px; font-weight: 450; }
.plan-cta .g-count { font-size: 12px; color: #ecc9b5; white-space: nowrap; }
.plan-cta .g-arrow { font-size: 16px; color: #ecc9b5; }

.plan-cover { padding: 56px 0 10px; }
.plan-cover .kicker { margin-bottom: 14px; }
.plan-cover h1 {
  font-family: var(--serif);
  font-size: clamp(38px, 8vw, 60px);
  font-weight: 380;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.plan-intro { margin-top: 18px; max-width: 560px; font-size: 15px; color: var(--body); }

/* jump strip of days */
.day-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 26px 0 4px;
  padding: 18px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.day-jump {
  text-decoration: none;
  text-align: center;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--card);
  padding: 6px 10px;
  transition: border-color 0.15s;
}
.day-jump:hover { border-color: var(--accent); }
.day-jump .dj-date {
  display: block;
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.day-jump .dj-code {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* favorites check — favorites the plan isn't built around yet */
.plan-favnote {
  border: 1.5px dashed #cdb98a;
  border-radius: 10px;
  background: #fbf8f1;
  padding: 14px 18px;
  margin-top: 18px;
}
.plan-favnote .fn-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.plan-favnote .fn-body { font-size: 13px; color: var(--body); }
.plan-favnote .fn-item { font-size: 13px; color: var(--body); padding: 4px 0 0; }
.plan-favnote .fn-item .pref { color: var(--ink); font-weight: 500; text-decoration: none; border-bottom: 1px solid #d8cfbe; }
.plan-favnote .fn-item .pref:hover { color: var(--accent); border-color: var(--accent); }
.plan-favnote .fn-item .pref-area { color: var(--muted); }
.plan-favnote .fn-pending { font-size: 12px; font-style: italic; color: var(--gold); }
.plan-favnote .fn-foot { font-size: 12px; font-style: italic; color: var(--muted); margin-top: 8px; }

/* city divider between legs */
.plan-divider {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 44px 0 0;
}
.plan-divider .n {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 420;
  color: var(--ink);
  white-space: nowrap;
}
.plan-divider .local { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--accent); }
.plan-divider .dates { font-size: 12px; color: var(--muted); white-space: nowrap; }
.plan-divider::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }

/* a day */
.plan-day { padding: 26px 0 8px; scroll-margin-top: 16px; }
.pd-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pd-date .d {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  color: var(--accent);
}
.pd-date .dow {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 8px;
}
.pd-city {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 2px 8px;
}
.pd-city:hover { color: var(--accent); border-color: var(--accent); }
.pd-title {
  font-family: var(--serif);
  font-size: clamp(22px, 4.5vw, 28px);
  font-weight: 420;
  line-height: 1.15;
  color: var(--ink);
  margin-top: 4px;
}
.pd-intro { font-size: 14px; color: var(--body); margin-top: 8px; max-width: 600px; }

/* the timeline of stops */
.timeline {
  margin: 20px 0 6px 5px;
  border-left: 1.5px solid var(--rule);
  padding-left: 20px;
}
.stop { position: relative; padding: 12px 0 14px; }
.stop::before {
  content: "";
  position: absolute;
  left: -25.5px;
  top: 19px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--paper);
}
.stop.log::before { background: var(--paper); border: 1.5px solid #c8bfae; width: 8px; height: 8px; }
.stop.opt::before { background: var(--paper); border: 2px solid var(--accent); }

.stop-when { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stop-time {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.stop-slot {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.chip.split    { background: #e7efe8; color: var(--green); }
.chip.optional { background: transparent; border: 1px dashed var(--rule); color: var(--muted); }

.stop-head { display: flex; align-items: baseline; gap: 12px; margin-top: 5px; }
.stop-name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 480;
  line-height: 1.25;
  color: var(--ink);
  text-decoration: none;
}
.stop-name:hover { color: var(--accent); }
.stop-map {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.stop-map:hover { color: var(--accent); }
.stop-map svg { width: 11px; height: 11px; }
.stop-loc { font-size: 12px; color: var(--muted); letter-spacing: 0.03em; margin-top: 2px; }
.stop-plan { font-size: 14px; color: var(--body); line-height: 1.6; margin-top: 7px; max-width: 580px; }
.stop-order { font-size: 13.5px; color: var(--ink); margin-top: 7px; }
.stop-order .d-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-right: 8px;
}
.stop-alts { font-size: 13px; color: var(--muted); margin-top: 7px; max-width: 580px; }
.stop-alts .alt-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-right: 8px;
  color: var(--accent);
}
.stop-alts.also .alt-label { color: var(--gold); }
.stop-alts .alt-item { display: block; padding: 1px 0; }
.stop-alts .pref { color: var(--body); font-weight: 500; text-decoration: none; border-bottom: 1px solid #d8cfbe; }
.stop-alts .pref:hover { color: var(--accent); border-color: var(--accent); }

.stop.log .stop-log-text { font-size: 13px; font-style: italic; color: var(--muted); margin-top: 3px; }

@media (max-width: 860px) {
  .plan-cover { padding: calc(40px + env(safe-area-inset-top, 0px)) 0 8px; }
  .stop-head { flex-wrap: wrap; }
}

/* ───────────────────────── city page (city.html) ───────────────────────── */

.city-hero { max-width: 900px; margin: 0 auto; padding: 34px 24px 26px; }
.back-link {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--muted);
  margin-bottom: 16px;
}
.back-link:hover { color: var(--accent); }
.city-hero h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 7vw, 52px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.city-hero h1 .local {
  font-size: 0.55em;
  font-style: italic;
  font-weight: 340;
  color: var(--accent);
  margin-left: 10px;
}
.city-sub { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.city-sub .stay-line { color: var(--gold); }

/* slim pinned title bar (desktop) */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 700;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transform: translateY(-100%);
  transition: transform 0.28s ease;
}
.topbar.show { transform: translateY(0); }
.topbar-inner { max-width: 900px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: baseline; gap: 14px; }
.topbar-title { font-family: var(--serif); font-size: 18px; font-weight: 450; color: var(--ink); }
.topbar-title .local { font-style: italic; color: var(--accent); font-size: 15px; margin-left: 6px; }
.topbar a { font-size: 11px; color: var(--muted); text-decoration: none; }
.topbar a:hover { color: var(--accent); }

/* two-pane layout */
.layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule);
}
.map-pane {
  position: sticky;
  top: var(--hdr, 50px);
  height: calc(100vh - var(--hdr, 50px));
  border-right: 1px solid var(--rule);
}
#map { width: 100%; height: 100%; background: #efece5; }
.list-pane { min-width: 0; }

/* controls */
.controls {
  position: sticky;
  top: var(--hdr, 50px);
  z-index: 500;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.field { position: relative; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 7px;
  padding: 8px 30px 8px 12px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.field select:hover { border-color: #cfc6b6; }
.field select:focus { outline: none; border-color: var(--accent); }
.field.active select { border-color: var(--accent); color: var(--accent); }
.field::after {
  content: "";
  position: absolute;
  right: 12px; top: 50%;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.count {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: auto;
  white-space: nowrap;
}
.reset {
  font-size: 12px;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  padding: 0;
  display: none;
}
.reset.show { display: inline; }

/* add-a-place button */
.add-btn {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 7px;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.add-btn:hover { background: var(--accent); color: #fff; }

/* pending-review cards (inbox submissions, not yet researched) */
.pending { padding: 0 24px; }
.pending-head {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 18px 0 4px;
}
.pending-card {
  position: relative;
  border: 1.5px dashed #d3c9b4;
  border-radius: 10px;
  background: #fbf8f1;
  margin: 8px 0;
  overflow: hidden;   /* clip the swipe layers to the rounded corners */
}
.pending-card .card-swipe { padding: 13px 16px; background: #fbf8f1; }
.pending-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 480;
  color: var(--ink);
}
.pending-note { font-size: 13px; color: var(--body); margin-top: 3px; }
.pending-card .source-link { margin: 6px 0 0; }
.pending-meta {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  margin-top: 5px;
}

/* add-a-place modal */
.modal {
  position: fixed; inset: 0;
  background: rgba(24,20,15,0.5);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 1500;
  padding: 8vh 20px 20px;
  overflow-y: auto;
}
.modal.open { display: flex; }
.modal-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 16px 60px rgba(0,0,0,0.25);
  width: 100%;
  max-width: 440px;
  padding: 24px 24px 20px;
}
.modal-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 450;
  color: var(--ink);
}
.modal-sub { font-size: 12.5px; color: var(--muted); margin: 6px 0 16px; }
.mf {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.mf .req { color: var(--accent); font-weight: 400; text-transform: none; letter-spacing: 0; }
.mf input, .mf textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 7px;
  padding: 9px 11px;
  resize: vertical;
}
.mf input:focus, .mf textarea:focus { outline: none; border-color: var(--accent); }
.mf-row { display: flex; gap: 12px; }
.mf-row .mf { flex: 1; min-width: 0; }
.mf-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--body);
  margin: 2px 0 14px;
  cursor: pointer;
}
.mf-check input {
  width: 16px; height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.modal-err { font-size: 12.5px; color: var(--accent); min-height: 18px; margin-bottom: 4px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.btn-ghost {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 9px 6px;
}
.btn-ghost:hover { color: var(--ink); }
.btn-primary {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--ink);
  border: none;
  border-radius: 7px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary:hover { background: #3c362e; }

/* place cards */
.cards { padding: 0 24px 80px; }
.card {
  position: relative;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  scroll-margin-top: 72px;
}
.card > .card-swipe { padding: 22px 0; background: var(--paper); }

/* swipe-to-reveal: content rides on .card-swipe, action buttons sit underneath */
.card-swipe {
  position: relative;
  z-index: 1;
  transition: transform 0.22s ease;
}
.card-actions {
  position: absolute;
  top: 0; right: 0; bottom: 1px;
  display: flex;
  z-index: 0;
}
.card-actions button {
  width: 76px;
  border: none;
  color: #fff;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.card-actions .act-edit { background: #8a8175; }
.card-actions .act-del  { background: #b23c25; }

/* favorite action — revealed by swiping RIGHT (sits under the left edge) */
.card-actions-left {
  position: absolute;
  top: 0; left: 0; bottom: 1px;
  display: flex;
  z-index: 0;
}
.card-actions-left .act-fav {
  width: 96px;
  border: none;
  color: #fff;
  background: var(--gold);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  cursor: pointer;
}

/* desktop affordances (shown on hover): × on pending cards, Edit/Remove links on place cards */
.card-x {
  position: absolute;
  top: 10px; right: 10px;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.card-hover-link {
  display: none;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px 4px;
  white-space: nowrap;
}
@media (hover: hover) {
  .pending-card:hover .card-x { display: flex; }
  .card-x:hover { color: #b23c25; border-color: #b23c25; }
  .card:hover .card-hover-link { display: inline; }
  .card-hover-link:hover { color: var(--accent); }
}

/* place with a queued removal request */
.card.removing .card-swipe { opacity: 0.5; }
.chip.removal { background: #f6e7e2; color: #b23c25; }
.pin.removing-pin, .star-pin.removing-pin { opacity: 0.45; }
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.card-name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 480;
  line-height: 1.25;
  color: var(--ink);
}
.card-name .sub {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
}
.card-type {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}
.card-location {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 10px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.card-location .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}
.dishes {
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 8px;
}
.dishes .d-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-right: 8px;
}
/* agent-researched additions — visibly secondary to the submitter's own picks */
.dishes.suggested {
  color: var(--muted);
  font-size: 13px;
  margin-top: -5px;
}
.dishes .d-label.sug { color: #b3a996; }
/* hawker centre component stalls — one pin, stalls detailed in the card */
.stalls { margin: 2px 0 10px; }
.stalls-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.stall {
  padding: 7px 0;
  border-top: 1px solid var(--tag-bg);
}
.stall-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stall-name {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.stall-unit { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }
.stall-src { margin-left: auto; color: var(--muted); display: inline-flex; align-items: center; }
a.stall-src:hover { color: var(--accent); }
.stall-src svg { width: 12px; height: 12px; }
.stall-dish { font-size: 13px; color: var(--body); margin-top: 2px; }
/* per-stall source tag — background comes from the .src-* class */
.stall-src-tag {
  color: #fff;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
.card-note {
  font-size: 14px;
  color: var(--body);
  line-height: 1.6;
  margin-bottom: 10px;
}
.source-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 10px;
}
a.source-link:hover { color: var(--accent); }
.source-link svg { width: 12px; height: 12px; flex-shrink: 0; }
.card-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.tags { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.tag {
  background: var(--tag-bg);
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  color: var(--muted);
  text-transform: uppercase;
}

@media (hover: hover) { .card:hover .card-swipe { background: #f2eee6; } }
.card.active > .card-swipe { background: #f2ede3; }
.card.previewing > .card-swipe { background: #f2ede3; }
.card.previewing::before {
  content: "";
  position: absolute;
  left: -9px; top: 0; bottom: -1px;
  width: 3px; border-radius: 2px;
  background: var(--accent);
}

.empty {
  padding: 48px 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* iOS safe area (viewport-fit=cover): the map runs to the physical top of the
   screen when Safari's bar collapses; keep Leaflet's controls below the notch */
.leaflet-top { top: env(safe-area-inset-top, 0px); }

/* map pins */
/* map "reset view" control button (under the zoom control) */
.recenter-btn { display: flex; align-items: center; justify-content: center; }
.recenter-btn svg { width: 15px; height: 15px; color: #3f3a33; }

.pin {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #9a9186;   /* neutral = no named source; colored by .src-* below */
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  transition: transform 0.38s cubic-bezier(0.34, 1.7, 0.5, 1), box-shadow 0.38s ease;
}
.pin:hover { transform: scale(1.25); }
.pin.preview {
  transform: scale(2.5);
  box-shadow: 0 3px 12px rgba(0,0,0,0.55);
  z-index: 900 !important;
}
.pin.visited-pin { background: var(--green); }
/* visited on a previous trip — hollow terracotta ring instead of a filled dot */
.pin.prior-pin {
  background: var(--card);
  border: 2.5px solid var(--accent);
  box-shadow: 0 1px 4px rgba(0,0,0,0.28);
}

.star-pin {
  width: 28px; height: 28px;
  cursor: pointer;
  transition: transform 0.38s cubic-bezier(0.34, 1.7, 0.5, 1);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
.star-pin svg { width: 28px; height: 28px; display: block; }
.star-pin:hover { transform: scale(1.18); }
.star-pin.preview { transform: scale(1.95); z-index: 900 !important; }

/* source legend under the filters */
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; width: 100%; }
.legend:empty { display: none; }
.lg-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); letter-spacing: 0.02em; }
.lg-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #9a9186; flex-shrink: 0;
  box-shadow: 0 0 0 1.5px #fff, 0 1px 2px rgba(0,0,0,0.3);
}

/* source (creator) colors — applied to map pins, legend dots, and stall tags.
   Defined LAST so they win over the neutral .pin / .lg-dot bases (same
   specificity → later wins); visited/prior pins still win by higher specificity. */
.src-bourdain   { background: #b0532f; }   /* rust */
.src-bonappetit { background: #2f6f8f; }   /* teal */
.src-doobydobap { background: #7d57a8; }   /* purple */
.src-guga       { background: #3f5aa6; }   /* blue */
.src-joshua     { background: #d97a2b; }   /* orange */
.src-ranyda     { background: #b0467e; }   /* rose */

/* hotel pin — gold ringed dot */
.hotel-pin {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--gold);
  border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.38s cubic-bezier(0.34, 1.7, 0.5, 1);
}
.hotel-pin::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.hotel-pin:hover { transform: scale(1.15); }

/* star in the list */
.star { width: 16px; height: 16px; flex-shrink: 0; vertical-align: -2px; margin-right: 5px; }

/* name + type labels on pins — visible once zoomed in, or on the previewed pin */
.leaflet-tooltip.type-label {
  display: none;
  background: rgba(255,253,249,0.94);
  border: none;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  padding: 3px 7px;
  font-family: var(--sans);
  line-height: 1.25;
  white-space: nowrap;
}
.leaflet-tooltip.type-label::before { display: none; }
.type-label .tl-name {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.type-label .tl-type {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
}
/* individual pin labels show only when layoutLabels() marks them (not clustered) */
.leaflet-tooltip.type-label.lbl-show { display: block; }
/* interactive labels (clickable — act like clicking the pin) get a pointer cursor */
.leaflet-tooltip.type-label.leaflet-interactive { cursor: pointer; }
/* the scroll/hover-previewed pin always shows its name label, even zoomed out */
.leaflet-tooltip.type-label.preview-label { display: block; z-index: 650; }
/* aggregated label for a cluster of overlapping pins */
.leaflet-tooltip.type-label.cluster-label {
  display: block;
  pointer-events: auto;
  cursor: pointer;
  white-space: normal;
  /* the tooltip pane is zero-width, so width:auto collapses to the longest word;
     max-content sizes the box to the text, then max-width caps + wraps it */
  width: max-content;
  max-width: 232px;
  z-index: 640;
}
.cluster-label .cl-title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.cluster-label .cl-cats {
  display: block;
  margin-top: 1px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}
/* hotel label: always on (it anchors the map) — but steps aside during scroll preview */
.leaflet-tooltip.type-label.hotel-label {
  display: block;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gold);
}
.scroll-preview .leaflet-tooltip.type-label.hotel-label { display: none; }
.leaflet-container { font-family: var(--sans); }

/* lightbox */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(24,20,15,0.93);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 24px;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.lb-close {
  position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); right: 22px;
  color: #fff; font-size: 30px; line-height: 1;
  background: none; border: none; cursor: pointer;
}
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: #fff; font-size: 40px; line-height: 1;
  background: none; border: none; cursor: pointer;
  padding: 12px; opacity: 0.8;
}
.lb-nav:hover { opacity: 1; }
.lb-prev { left: 8px; }
.lb-next { right: 8px; }
.lb-cap {
  position: absolute; bottom: 20px; left: 0; right: 0;
  text-align: center; color: #e6e0d4; font-size: 13px;
}

.city-foot {
  max-width: 900px; margin: 0 auto;
  padding: 28px 24px 60px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--rule);
}

/* ── mobile: compact map on top, list scrolls below ── */
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .topbar { display: none; }
  /* content clears the status bar when the page top sits under it (viewport-fit=cover) */
  .city-hero { padding: calc(28px + env(safe-area-inset-top, 0px)) 20px 20px; }
  .cards { padding: 0 20px 72px; }
  .pending { padding: 0 20px; }
  /* map collapses a little once the list is scrolling, giving cards more room */
  :root { --maph: 38vh; }
  :root.map-compact { --maph: 24vh; }
  .map-pane {
    position: sticky;
    top: 0;
    height: var(--maph);
    border-right: none;
    border-bottom: 1px solid var(--rule);
    z-index: 400;
    transition: height 0.25s ease;
  }
  .controls { padding: 12px 20px; top: var(--maph); transition: top 0.25s ease; }

  .wrap { padding: 0 20px; }
  .cover { padding: calc(52px + env(safe-area-inset-top, 0px)) 0 32px; }
  .route .stop .code { font-size: 16px; }
  .route .stop .date { font-size: 9.5px; letter-spacing: 0.05em; }
  .route .arrow { min-width: 12px; font-size: 11px; height: 17px; }
  .fc-ap .code { font-size: 27px; }
  .fc-route { gap: 12px; }
  .flight-card { padding: 18px 18px 0; }
  .fc-redemption { margin: 0 -18px; padding: 13px 18px 16px; }
}