/* ============================================
   Checed & Lukas do New York — map diary
   Visual system: apple-supplyiq tokens + diary layer
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@500&family=Caveat:wght@500;700&display=swap');

:root {
  /* apple-supplyiq base tokens */
  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #86868b;
  --text-muted: #aeaeb2;
  --blue: #007aff;
  --blue-bg: #f0f5ff;
  --blue-text: #0040dd;
  --purple: #af52de;
  --purple-bg: #f8f0ff;
  --purple-text: #7b2cb8;
  --green: #34c759;
  --green-dark: #248a3d;
  --green-bg: #f0faf2;

  --border: rgba(0,0,0,.08);
  --border-strong: rgba(0,0,0,.12);

  /* radii — the documented set only: 8 / 12 / 20 / 999 */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;

  /* diary layer */
  --pink: #ff2d55;
  --pink-bg: #fff0f3;
  --cream: #fdf6ec;
  --font-script: 'Caveat', cursive;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --shadow-pin: 0 4px 14px rgba(29,29,31,.18);
  --shadow-float: 0 8px 30px rgba(29,29,31,.12);

  /* glass surface */
  --glass: rgba(255,255,255,.86);
  --glass-blur: blur(20px) saturate(1.4);

  --safe-b: env(safe-area-inset-bottom);
  --safe-t: env(safe-area-inset-top);
}

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

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
  background: var(--cream);
  color: var(--text-primary);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -.022em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: fixed;
  inset: 0;
}

.script { font-family: var(--font-script); }
.mono { font-family: var(--font-mono); }

button { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
input { font-family: inherit; }

/* ─────────── Map ─────────── */
#map {
  position: fixed;
  inset: 0;
  height: 100svh;
  height: 100dvh;
  background: var(--cream);
  z-index: 0;
}
@media (min-width: 900px) {
  #map { right: 340px; }
}

.leaflet-control-attribution {
  background: rgba(255,255,255,.7) !important;
  font-size: 10px !important;
  letter-spacing: 0;
}
.leaflet-control-zoom {
  border: none !important;
  box-shadow: var(--shadow-float) !important;
}
.leaflet-control-zoom a {
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
}

/* ─────────── Pins (divIcon) ─────────── */
/* Leaflet positions the (className:'') container at the geo point via translate3d.
   The .pin child sits at that origin; .pin-dot is centered on the point. */
.pin { position: absolute; left: 0; top: 0; }

.pin-dot {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-pin);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s cubic-bezier(.25,.1,.25,1);
}
.pin-emoji { font-size: 19px; line-height: 1; }

.pin-label {
  position: absolute;
  left: 24px; top: 0;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--font-script);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  text-shadow: 0 1px 2px rgba(255,255,255,.95), 0 0 6px rgba(255,255,255,.9);
  pointer-events: none;
  transition: opacity .2s;
}
body.hide-labels .pin-label { opacity: 0; }

/* idea pins: smaller, softer, dashed */
.pin--idea .pin-dot {
  width: 30px; height: 30px;
  opacity: .82;
  border: 1.5px dashed var(--border-strong);
}
.pin--idea .pin-emoji { font-size: 15px; }
.pin--idea .pin-label { font-weight: 500; color: var(--text-secondary); }

/* user "moments" */
.pin--moment .pin-dot {
  border: 2px solid var(--pink);
  box-shadow: 0 4px 14px rgba(255,45,85,.28);
}

/* selected (card open) */
.pin--selected .pin-dot { box-shadow: 0 0 0 3px var(--pink-bg), var(--shadow-pin); }

/* active (current stop) — never recreate the icon so the pulse phase survives */
.pin--active { z-index: 10; }
.pin--active .pin-dot { transform: translate(-50%, -50%) scale(1.35); }
.pin--active .pin-label { opacity: 1 !important; font-weight: 700; color: var(--pink); }
.pin--active .pin-dot::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--pink);
  animation: pin-pulse 2s ease-out infinite;
}
@keyframes pin-pulse {
  0%   { transform: scale(.85); opacity: .8; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pin--active .pin-dot::after { animation: none; opacity: .5; }
}

/* ─────────── Polaroid clusters ─────────── */
.cluster { position: absolute; left: 0; top: 0; cursor: pointer; }
.cluster-inner {
  position: absolute;
  left: 10px; top: -54px;
  width: 64px; height: 52px;
}
.cluster .thumb {
  position: absolute;
  left: 0; top: 0;
  width: 44px; height: 44px;
  object-fit: cover;
  background: #fff;
  border: 3px solid #fff;
  border-bottom-width: 7px; /* polaroid: thicker bottom border */
  border-radius: 2px; /* documented exception to the radii set — polaroid look */
  box-shadow: var(--shadow-pin);
}
.cluster .thumb:nth-child(1) { transform: rotate(-6deg); z-index: 3; }
.cluster .thumb:nth-child(2) { transform: rotate(2deg) translateX(11px); z-index: 2; }
.cluster .thumb:nth-child(3) { transform: rotate(7deg) translateX(22px); z-index: 1; }
.cluster .more {
  position: absolute;
  right: -6px; bottom: -6px;
  z-index: 4;
  background: var(--pink);
  color: #fff;
  font-size: 11px; font-weight: 700;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-pin);
}

/* ─────────── Hero chip ─────────── */
.hero-chip {
  position: fixed;
  top: calc(12px + var(--safe-t));
  left: 12px;
  z-index: 500;
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  padding: 10px 16px;
  max-width: min(70vw, 340px);
}
.hero-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0;
  color: var(--text-primary);
}
.hero-dates {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.hero-recap {
  font-size: 20px;
  font-weight: 700;
  color: var(--pink);
  margin-top: 3px;
}

/* ─────────── Day chips ─────────── */
.day-chips {
  position: fixed;
  top: calc(12px + var(--safe-t));
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  gap: 6px;
  padding: 5px;
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 999px;
  box-shadow: var(--shadow-float);
  max-width: calc(100vw - 24px);
  overflow-x: auto;
  scrollbar-width: none;
}
.day-chips::-webkit-scrollbar { display: none; }
.day-chip {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.day-chip:hover { color: var(--text-primary); }
.day-chip.now { color: var(--pink); }
.day-chip.active { background: var(--pink); color: #fff; }
@media (min-width: 900px) {
  .day-chips { left: calc((100vw - 340px) / 2); }
}
/* hero chip + day chips can collide on small screens — drop the day row lower */
@media (max-width: 520px) {
  .day-chips { top: auto; bottom: calc(120px + var(--safe-b)); }
}

/* ─────────── Spot button ─────────── */
.spot-btn {
  position: fixed;
  right: 14px;
  bottom: calc(120px + var(--safe-b));
  z-index: 500;
  border: none;
  background: var(--pink);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-float);
  transition: transform .15s;
}
.spot-btn:active { transform: scale(.95); }
@media (min-width: 900px) {
  .spot-btn { right: calc(340px + 20px); bottom: 24px; }
}

/* ─────────── Timeline: mobile bottom sheet ─────────── */
.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 600;
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-float);
  transition: transform .3s cubic-bezier(.25,.1,.25,1);
  touch-action: pan-y;
  display: flex;
  flex-direction: column;
  max-height: calc(46dvh + 60px);
}
.sheet-handle {
  border: none;
  background: transparent;
  width: 100%;
  padding: 10px 0 6px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.sheet-handle .grip {
  width: 40px; height: 5px;
  border-radius: 999px;
  background: var(--border-strong);
}
.sheet-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px calc(16px + var(--safe-b));
}

/* peek: show handle + active row only */
.sheet[data-state="peek"] { transform: translateY(calc(100% - 96px - var(--safe-b))); }
.sheet[data-state="half"] { transform: translateY(0); }
.sheet[data-state="hidden"] { transform: translateY(110%); }

/* ─────────── Timeline: desktop right rail ─────────── */
@media (min-width: 900px) {
  .sheet {
    left: auto;
    top: 0; right: 0; bottom: 0;
    width: 340px;
    max-height: none;
    border-radius: 0;
    transform: none !important;
    border-left: 1px solid var(--border);
  }
  .sheet-handle { display: none; }
  .sheet-body {
    padding: calc(64px + var(--safe-t)) 20px 24px;
    height: 100%;
  }
}

/* ─────────── Timeline content ─────────── */
.day-divider {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 18px 4px 8px;
  position: sticky;
  top: 0;
  background: linear-gradient(var(--cream), rgba(253,246,236,.6) 70%, transparent);
  padding: 6px 0 4px;
  z-index: 1;
}
.day-divider:first-child { margin-top: 4px; }
.day-divider .d-name {
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-primary);
}
.day-divider .d-aside {
  font-family: var(--font-script);
  font-size: 17px;
  color: var(--text-tertiary);
}

.tl-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .2s;
  position: relative;
}
.tl-row:hover { background: rgba(0,0,0,.03); }
.tl-emoji { font-size: 22px; line-height: 1.2; flex-shrink: 0; width: 26px; text-align: center; }
.tl-text { min-width: 0; flex: 1; }
.tl-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.tl-sub { font-size: 13px; color: var(--text-secondary); margin-top: 1px; }
.tl-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.tl-count { font-size: 12px; color: var(--text-tertiary); }

.tl-row.active {
  background: var(--pink-bg);
  font-weight: 700;
}
.tl-row.active::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: var(--pink);
}
.tl-row.active .tl-title { color: var(--pink); }

/* ─────────── Badges ─────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  letter-spacing: .02em;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.badge.time { background: var(--blue-bg); color: var(--blue-text); }
.badge.time::before { background: var(--blue); }
.badge.idea { background: var(--purple-bg); color: var(--purple-text); }
.badge.idea::before { background: var(--purple); }
.badge.moment { background: var(--pink-bg); color: var(--pink); }
.badge.moment::before { background: var(--pink); }
.badge.next { background: var(--pink-bg); color: var(--pink); }
.badge.next::before { background: var(--pink); animation: pin-pulse 2s ease-out infinite; }

/* ─────────── Card ─────────── */
.card {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + var(--safe-b));
  z-index: 700;
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  padding: 18px 18px 16px;
  max-height: 72dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: card-in .25s cubic-bezier(.25,.1,.25,1);
}
@keyframes card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .card { left: 20px; right: auto; bottom: 20px; width: 380px; max-height: calc(100dvh - 40px); }
}
.card-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 30px; height: 30px;
  border: none;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  color: var(--text-secondary);
  font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.card-head { display: flex; gap: 12px; align-items: flex-start; padding-right: 34px; }
.card-emoji { font-size: 34px; line-height: 1; flex-shrink: 0; }
.card-headtext { min-width: 0; }
.card-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.card-title { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.card-place { font-size: 13px; color: var(--text-secondary); margin-top: 3px; }
.card-desc { font-size: 15px; line-height: 1.5; color: var(--text-secondary); margin-top: 12px; letter-spacing: -.01em; }
.card-details { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.card-details li {
  font-size: 13.5px;
  color: var(--text-secondary);
  padding-left: 18px;
  position: relative;
  line-height: 1.4;
}
.card-details li::before { content: '·'; position: absolute; left: 6px; color: var(--pink); font-weight: 700; }

/* ─────────── Photo strip ─────────── */
.photo-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin: 16px -18px 0;
  padding: 4px 18px 8px;
  scrollbar-width: none;
}
.photo-strip::-webkit-scrollbar { display: none; }
.polaroid {
  flex: 0 0 auto;
  scroll-snap-align: center;
  width: 132px;
  background: #fff;
  padding: 6px 6px 22px;
  border-radius: 2px; /* documented polaroid exception */
  box-shadow: var(--shadow-float);
  position: relative;
}
.polaroid:nth-child(odd) { transform: rotate(-2.5deg); }
.polaroid:nth-child(even) { transform: rotate(2.5deg); }
.polaroid img {
  width: 120px; height: 120px;
  object-fit: cover;
  border-radius: 2px;
  background: #f0f0f2;
  display: block;
}
.polaroid .cap {
  font-family: var(--font-script);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: center;
  margin-top: 4px;
  height: 18px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.polaroid.pending { opacity: .55; }
.polaroid.pending::after {
  content: 'saving…';
  position: absolute;
  inset: 6px 6px 22px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px;
  background: rgba(255,255,255,.6);
  color: var(--text-secondary);
  border-radius: 2px;
}
.polaroid.errored { border: 1px solid var(--pink); }
.polaroid .retry {
  position: absolute;
  left: 50%; top: 56px;
  transform: translateX(-50%);
  border: none;
  background: var(--pink);
  color: #fff;
  font-size: 12px; font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
}

/* add-photo polaroid */
.polaroid.add {
  transform: none !important;
  width: 132px;
  border: 2px dashed var(--border-strong);
  background: rgba(255,255,255,.5);
  box-shadow: none;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  color: var(--text-tertiary);
  min-height: 148px;
}
.polaroid.add .plus { font-size: 26px; }
.polaroid.add .lbl { font-size: 12px; font-weight: 600; }

.photo-empty {
  font-family: var(--font-script);
  font-size: 18px;
  color: var(--text-tertiary);
  padding: 8px 2px;
}

/* ─────────── Toast ─────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--safe-b));
  transform: translate(-50%, 20px);
  z-index: 900;
  background: var(--text-primary);
  color: #fff;
  font-size: 14px; font-weight: 500;
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: var(--shadow-float);
  opacity: 0;
  transition: opacity .3s, transform .3s;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ─────────── Dialogs (PIN / caption) ─────────── */
.pin-dialog {
  border: none;
  border-radius: var(--radius-lg);
  padding: 22px;
  width: min(88vw, 320px);
  box-shadow: var(--shadow-float);
  background: #fff;
  color: var(--text-primary);
}
.pin-dialog::backdrop { background: rgba(29,29,31,.35); backdrop-filter: blur(2px); }
.pin-title { font-family: var(--font-script); font-size: 22px; font-weight: 700; margin-bottom: 14px; }
.pin-dialog input {
  width: 100%;
  font-size: 17px; /* ≥16px: no iOS focus zoom */
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  outline: none;
  background: #fff;
}
.pin-dialog input:focus { border-color: var(--pink); box-shadow: 0 0 0 4px var(--pink-bg); }
.pin-error { color: var(--pink); font-size: 13px; font-weight: 600; margin-top: 8px; }
.pin-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 16px; padding: 0; list-style: none;
}
.btn-ghost, .btn-primary {
  border: none;
  font-size: 15px; font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
}
.btn-ghost { background: rgba(0,0,0,.06); color: var(--text-secondary); }
.btn-primary { background: var(--pink); color: #fff; }

/* ─────────── Add-a-spot form (built in places.js) ─────────── */
.spot-form {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + var(--safe-b));
  z-index: 750;
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  padding: 18px;
  animation: card-in .25s cubic-bezier(.25,.1,.25,1);
}
@media (min-width: 900px) {
  .spot-form { left: 20px; right: auto; width: 380px; bottom: 20px; }
}
.spot-form h3 { font-family: var(--font-script); font-size: 24px; font-weight: 700; margin-bottom: 12px; }
.spot-form .banner {
  background: var(--pink-bg); color: var(--pink);
  font-size: 12px; font-weight: 600;
  padding: 8px 12px; border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
.spot-form label { font-size: 12px; font-weight: 600; color: var(--text-tertiary); display: block; margin: 10px 0 4px; }
.spot-form input, .spot-form textarea {
  width: 100%;
  font-size: 17px; /* ≥16px */
  padding: 11px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  outline: none;
  background: #fff;
  resize: none;
}
.spot-form input:focus, .spot-form textarea:focus { border-color: var(--pink); box-shadow: 0 0 0 4px var(--pink-bg); }
.spot-form .row { display: flex; gap: 8px; }
.spot-form .row .emoji-in { width: 64px; text-align: center; }
.spot-form .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.spot-form .btn-line {
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--text-primary);
  font-size: 14px; font-weight: 600;
  padding: 9px 14px;
  border-radius: 999px;
}
.spot-form .divider { text-align: center; font-size: 12px; color: var(--text-tertiary); margin: 14px 0 4px; }