/* ============================================================
   Next Time — design system
   Principles from interfaces.dev (Jakub Krehel, MIT skills):
   better-ui · better-typography · better-colors · better-layout
   better-accessibility
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  /* ink & paper — warm, editorial */
  --ink: oklch(0.24 0.02 60);
  --ink-soft: oklch(0.38 0.02 60);
  --muted: oklch(0.52 0.02 60);
  --faint: oklch(0.66 0.02 60);

  --paper: oklch(0.975 0.008 80);
  --card: oklch(1 0 0);
  --wash: oklch(0.955 0.01 80);

  --line: oklch(0.88 0.015 80);
  --line-soft: oklch(0.92 0.01 80);

  /* accent — deep teal, used sparingly */
  --accent: oklch(0.55 0.10 185);
  --accent-ink: oklch(0.42 0.10 185);
  --accent-wash: oklch(0.94 0.03 185);

  /* region hues — perceptually spaced */
  --sf: oklch(0.58 0.11 180);
  --texas: oklch(0.58 0.13 55);
  --other: oklch(0.58 0.12 300);
  --done: oklch(0.60 0.12 75);

  /* type scale — semantic */
  --text-display: 1.375rem;   /* 22px — brand */
  --text-title: 1.125rem;      /* 18px — modal headings */
  --text-body: 1rem;           /* 16px — body */
  --text-ui: 0.9375rem;        /* 15px — buttons, inputs */
  --text-small: 0.875rem;      /* 14px — secondary */
  --text-caption: 0.8125rem;   /* 13px — captions, pills */

  /* radius — concentric: outer = inner + padding */
  --radius-sm: 8px;    /* inputs, chips */
  --radius-md: 12px;   /* cards (inner 8 + 4 padding rhythm) */
  --radius-lg: 16px;   /* modal = card 12 + 4 */
  --radius-pill: 999px;

  /* elevation — layered transparent shadows, never borders for depth */
  --shadow-card: 0 1px 2px oklch(0.24 0.02 60 / 0.05),
                 0 4px 12px oklch(0.24 0.02 60 / 0.06);
  --shadow-card-hover: 0 2px 4px oklch(0.24 0.02 60 / 0.06),
                       0 8px 24px oklch(0.24 0.02 60 / 0.10);
  --shadow-modal: 0 8px 16px oklch(0.24 0.02 60 / 0.10),
                  0 24px 64px oklch(0.24 0.02 60 / 0.18);

  /* motion — exact values */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --dur-press: 150ms;
  --dur-enter: 300ms;
  --dur-exit: 150ms;
  --stagger: 100ms;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  /* Definite height, not min-height: with an indefinite height the
     flex children size to their content, the .view sections never
     become the scroll containers this layout intends, and which
     element scrolls (document vs. section) ends up engine-dependent
     — the Nearby view would not scroll at all on some engines while
     its content streamed in. */
  height: 100vh;
  height: 100dvh;
}

::selection { background: var(--accent-wash); }

h1, h2, h3 { text-wrap: balance; line-height: 1.25; }
p { text-wrap: pretty; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* skip link — visible on focus */
.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 2000;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1rem; border-radius: var(--radius-sm);
  transition: top var(--dur-exit) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* focus — one ring everywhere, never removed without replacement */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- icons ---------- */
.icon {
  width: 1.1em; height: 1.1em;
  flex: none;
  /* stroke tracks text weight: 1.75 at 400–500 */
}

/* ---------- header ---------- */
.site-header {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 0.75rem 1.25rem;
  background: var(--card);
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
  position: sticky; top: 0; z-index: 500;
}

.brand h1 {
  font-size: var(--text-display);
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 0;
  white-space: nowrap;
}
.brand .amp { color: var(--accent-ink); font-weight: 400; }
.brand .tagline {
  margin: 0; font-size: var(--text-caption); color: var(--muted);
  letter-spacing: 0.02em;
}

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 0.25rem; }

.tabs button {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; /* hit area */
  border: 1px solid transparent;
  background: none;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-ui);
  font-weight: 500;
  cursor: pointer;
  color: var(--ink-soft);
  /* high-frequency: no animation on tab switch */
  transition: background-color var(--dur-press) var(--ease-out),
              color var(--dur-press) var(--ease-out);
}
.tabs button .icon { width: 1.05em; height: 1.05em; }
.tabs button[aria-selected="true"] {
  background: var(--ink); color: var(--paper);
}
@media (hover: hover) {
  .tabs button:not([aria-selected="true"]):hover { background: var(--wash); color: var(--ink); }
}

.badge {
  display: inline-block;
  min-width: 1.4em;
  background: var(--done); color: oklch(1 0 0);
  border-radius: var(--radius-pill);
  font-size: 0.72rem; font-weight: 650;
  font-variant-numeric: tabular-nums; /* counts never shift */
  padding: 0.1em 0.45em;
  text-align: center;
  line-height: 1.5;
}
.badge:empty { display: none; }

.site-header .actions {
  margin-left: auto; display: flex; gap: 0.5rem; align-items: center;
}
.site-header .actions form { margin: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 44px; /* hit area */
  border: none;
  background: var(--ink); color: var(--paper);
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-ui); font-weight: 550;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-press) ease-out,
              background-color var(--dur-press) var(--ease-out),
              box-shadow var(--dur-press) var(--ease-out);
}
/* press scales to exactly 0.96 — never on disabled */
.btn:not(:disabled):active { transform: scale(0.96); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn.primary { background: var(--accent-ink); }
@media (hover: hover) {
  .btn.primary:hover { background: var(--accent); }
}
.btn.ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line);
}
@media (hover: hover) {
  .btn.ghost:hover { background: var(--wash); border-color: var(--faint); }
}
.btn.small { min-height: 36px; padding: 0.35rem 0.75rem; font-size: var(--text-small); }

/* ---------- toolbar ---------- */
.toolbar {
  display: flex; gap: 0.75rem; align-items: center;
  padding: 0.75rem 1.25rem;
  background: var(--card);
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}

.search-wrap {
  position: relative;
  flex: 1 1 220px; max-width: 320px;
  margin: 0;
}
.search-wrap .search-icon {
  position: absolute; left: 0.8rem; top: 50%;
  translate: 0 -50%;
  color: var(--faint); pointer-events: none;
}
.search-wrap input { padding-left: 2.4rem; }

.chips { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.chip {
  min-height: 36px;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.85rem;
  font-size: var(--text-small); font-weight: 500;
  cursor: pointer; color: var(--ink-soft);
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-press) var(--ease-out),
              color var(--dur-press) var(--ease-out),
              border-color var(--dur-press) var(--ease-out),
              transform var(--dur-press) ease-out;
}
.chip:not(:disabled):active { transform: scale(0.96); }
.chip[aria-pressed="true"] {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
@media (hover: hover) {
  .chip:not([aria-pressed="true"]):hover { border-color: var(--faint); background: var(--wash); }
}

/* ---------- inputs ---------- */
input[type="text"], input[type="search"], input[type="password"],
input[type="date"], textarea, select {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line); /* borders kept on inputs: 3:1 contrast need */
  border-radius: var(--radius-sm);
  font-size: 1rem; /* 16px base — iOS zoom fix below overrides on desktop */
  font-family: inherit;
  background: var(--card);
  color: var(--ink);
  transition: border-color var(--dur-press) var(--ease-out),
              box-shadow var(--dur-press) var(--ease-out);
}
@media (min-width: 641px) {
  input[type="text"], input[type="search"], input[type="password"],
  input[type="date"], textarea, select { font-size: var(--text-ui); }
}
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { resize: vertical; min-height: 0; line-height: 1.5; }

input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
  outline: none;
}

.field { display: block; margin: 0 0 1rem; }
.field-label {
  display: block; margin-bottom: 0.35rem;
  font-size: var(--text-caption); font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-soft);
}
.field-hint { display: block; margin-top: 0.35rem; font-size: var(--text-caption); color: var(--muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 420px) { .field-row { grid-template-columns: 1fr; } }

/* ---------- views ---------- */
main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.view { display: none; flex: 1; min-height: 0; }
.view.active { display: flex; flex-direction: column; }
#view-list.active, #view-memories.active, #view-nearby.active {
  overflow-y: auto; padding: 1.25rem;
  overscroll-behavior: contain;
}

#map { flex: 1; min-height: 60vh; min-height: 60dvh; z-index: 0; background: var(--wash); }

/* map pins — optically nudged */
.dv-pin-wrap { background: none; border: none; }
.dv-pin {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  color: #fff; font-size: 15px; font-weight: 700;
  border: 2px solid #fff;
  /* shadow for elevation; transparent border kept for forced-colors */
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.25), 0 2px 8px oklch(0 0 0 / 0.20);
}
/* optical: the check glyph sits 1px high to look centered */
.dv-pin.done-glyph { padding-bottom: 1px; font-size: 14px; }

.leaflet-popup-content-wrapper { border-radius: var(--radius-md); box-shadow: var(--shadow-modal); }
.leaflet-popup-content { margin: 1rem 1.1rem; line-height: 1.5; }
.popup { max-width: 240px; }
.popup strong { font-size: var(--text-ui); }
.popup p { margin: 0.4rem 0; font-size: var(--text-small); color: var(--ink-soft); }
.popup .popup-actions { margin-top: 0.6rem; display: flex; gap: 0.5rem; }

/* ---------- cards ---------- */
.cards {
  display: grid; gap: 0.875rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-content: start;
  width: 100%; max-width: 1200px; margin: 0 auto;
}

.card, .memory {
  background: var(--card);
  border: 1px solid var(--line-soft); /* structure, not depth */
  border-radius: var(--radius-md);    /* outer = inner 8 + padding rhythm */
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-press) ease-out,
              box-shadow var(--dur-press) var(--ease-out);
}
@media (hover: hover) {
  .card:hover, .memory:hover { box-shadow: var(--shadow-card-hover); }
}

.card { display: flex; gap: 0.75rem; justify-content: space-between; }
.card-main { min-width: 0; flex: 1; }
.card-title {
  font-size: var(--text-ui); font-weight: 600;
  line-height: 1.35; text-wrap: pretty;
  margin: 0 0 0.3rem;
}
.card-city { font-size: var(--text-small); color: var(--muted); }
.card-main .notes {
  font-size: var(--text-small); color: var(--ink-soft);
  margin-top: 0.4rem; white-space: pre-line; line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
.card-actions { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-end; }

.pill {
  display: inline-block;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  padding: 0.18rem 0.6rem;
  margin: 0 0.3rem 0.3rem 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pill.todo { background: oklch(0.94 0.03 185); color: oklch(0.42 0.10 185); }
.pill.done { background: oklch(0.94 0.05 75); color: oklch(0.45 0.11 75); }
.pill.region { background: var(--wash); color: var(--muted); }

/* region dot — 8px, optically aligned to cap height */
.region-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 0.35rem; translate: 0 -0.5px;
}

/* ---------- memories ---------- */
.memory { overflow: hidden; }
.memory img {
  width: calc(100% + 2.2rem); /* bleed to card padding */
  margin: -1rem -1.1rem 0.8rem;
  display: block; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--wash);
  /* image outline: 1px oklch black 10%, never a tinted fringe */
  outline: 1px solid oklch(0 0 0 / 0.10);
  outline-offset: -1px;
}
.memory-date {
  font-size: var(--text-caption); color: var(--muted);
  font-variant-numeric: tabular-nums; /* dates never shift */
  letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
  margin-bottom: 0.25rem;
}
.memory-title { font-size: var(--text-ui); font-weight: 600; margin: 0 0 0.3rem; text-wrap: pretty; }
.memory p { font-size: var(--text-small); color: var(--ink-soft); white-space: pre-line; margin: 0.3rem 0 0; }
.memory-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; align-items: center; }

/* deep-link flash — accent ring, not motion alone */
.memory.flash {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash), var(--shadow-card);
}

/* staggered entrance — infrequent (first load) only, 100ms apart */
@keyframes card-enter {
  from { opacity: 0; filter: blur(4px); translate: 0 12px; }
  to   { opacity: 1; filter: blur(0);    translate: 0 0; }
}
.cards.enter .card, .cards.enter .memory {
  animation: card-enter var(--dur-enter) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}

/* ---------- empty states ---------- */
.empty {
  text-align: center; padding: 3.5rem 1.5rem;
  color: var(--muted); max-width: 340px; margin: 0 auto;
}
.empty .empty-icon {
  width: 44px; height: 44px; margin: 0 auto 1rem;
  color: var(--faint);
}
.empty h2 { font-size: var(--text-title); color: var(--ink); margin: 0 0 0.4rem; font-weight: 600; }
.empty p { font-size: var(--text-small); margin: 0; }

/* ---------- modals ---------- */
.modal {
  position: fixed; inset: 0; z-index: 1000;
  background: oklch(0.24 0.02 60 / 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  overscroll-behavior: contain;
  animation: modal-fade var(--dur-exit) var(--ease-out);
}
.modal[hidden] { display: none; }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  background: var(--card);
  border-radius: var(--radius-lg); /* card 12 + 4 padding rhythm */
  padding: 1.5rem;
  width: 100%; max-width: 430px;
  max-height: 90vh; max-height: 90dvh; overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--shadow-modal);
  border: 1px solid transparent; /* forced-colors keeps an edge */
  animation: modal-rise var(--dur-enter) var(--ease-out);
}
@keyframes modal-rise {
  from { opacity: 0; filter: blur(4px); translate: 0 12px; }
  to   { opacity: 1; filter: blur(0);    translate: 0 0; }
}
.modal-card h2 {
  margin: 0 0 0.25rem; font-size: var(--text-title);
  font-weight: 650; letter-spacing: -0.01em;
}
.modal-card .muted { margin: 0 0 1.1rem; font-size: var(--text-small); }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.25rem; }

/* ---------- toast ---------- */
.toast {
  position: fixed; bottom: 1.5rem; left: 50%;
  translate: -50% 0; z-index: 1500;
  background: var(--ink); color: var(--paper);
  font-size: var(--text-small); font-weight: 500;
  padding: 0.7rem 1.1rem; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-modal);
  animation: toast-in var(--dur-enter) var(--ease-out);
  max-width: min(90vw, 380px); text-align: center;
}
.toast[hidden] { display: none; }
.toast.is-retry { cursor: pointer; }
@keyframes toast-in {
  from { opacity: 0; translate: -50% 8px; }
  to   { opacity: 1; translate: -50% 0; }
}

/* ---------- login ---------- */
.login-page { align-items: center; justify-content: center; padding: 1.5rem; }
.login-card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 2.25rem 2rem;
  width: 100%; max-width: 350px; text-align: center;
}
.login-card h1 {
  margin: 0; font-size: var(--text-display);
  font-weight: 650; letter-spacing: -0.015em;
}
.login-card .amp { color: var(--accent-ink); font-weight: 400; }
.login-card .tagline { color: var(--muted); font-size: var(--text-small); margin: 0.3rem 0 0; }
.login-card form { margin-top: 1.5rem; display: grid; gap: 0.75rem; text-align: start; }
.login-error {
  color: oklch(0.52 0.14 25); font-size: var(--text-small);
  background: oklch(0.95 0.03 25); border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem; margin: 0;
}

/* ---------- muted / misc ---------- */
.muted { color: var(--muted); }

/* ---------- reduced motion ----------
   Movement, scale and blur run only under no-preference.
   Under reduced motion: opacity cross-fade instead of removal. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .cards.enter .card, .cards.enter .memory,
  .modal-card, .toast { animation-name: fade-only; }
  @keyframes fade-only { from { opacity: 0; } to { opacity: 1; } }
  .btn:not(:disabled):active, .chip:not(:disabled):active { transform: none; }
  html { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- responsive ---------- */
@media (max-width: 700px) {
  .site-header { gap: 0.75rem; padding: 0.6rem 1rem; }
  .brand .tagline { display: none; }
  .brand h1 { font-size: 1.15rem; }
  .toolbar { padding: 0.6rem 1rem; }
  #view-list.active, #view-memories.active { padding: 1rem; }
  .cards { grid-template-columns: 1fr; }
  .tabs button span:not(.badge) { display: none; }
  .tabs button { padding: 0.5rem 0.75rem; }
  .tabs button .icon { width: 1.25em; height: 1.25em; }
  .site-header .actions .btn span { display: none; }
  .site-header .actions .btn .icon { width: 1.25em; height: 1.25em; }
  .modal-card { padding: 1.25rem; }
}

/* ---------- photo-first flow ---------- */
.photo-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.photo-preview[hidden] { display: none; }
.photo-thumb {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius-sm);
  outline: 1px solid oklch(0 0 0 / 0.10); outline-offset: -1px;
  background: var(--wash);
}

.photo-context { margin: 0 0 0.25rem; font-size: var(--text-small); }
.photo-context[hidden] { display: none; }

.suggestions { display: grid; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.suggestions:empty { display: none; }
.suggestions-note { margin-bottom: 0.25rem; font-size: var(--text-small); }

/* full-width tappable cards — thumb-friendly, 56px+ hit area */
.suggestion {
  display: flex; align-items: center; gap: 0.75rem;
  width: 100%; min-height: 56px;
  text-align: start;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.9rem;
  cursor: pointer;
  font-family: inherit; color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-press) var(--ease-out),
              background-color var(--dur-press) var(--ease-out),
              transform var(--dur-press) ease-out;
}
.suggestion:not(:disabled):active { transform: scale(0.96); }
.suggestion-main { flex: 1; min-width: 0; display: grid; gap: 0.1rem; }
.suggestion-title {
  font-weight: 600; font-size: var(--text-ui);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.suggestion-meta {
  font-size: var(--text-caption); color: var(--muted);
  font-variant-numeric: tabular-nums; /* distances never shift */
}
.suggestion-check {
  width: 28px; height: 28px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line);
  color: transparent; font-weight: 700; font-size: 0.9rem;
}
.suggestion.selected { border-color: var(--accent); background: var(--accent-wash); }
.suggestion.selected .suggestion-check {
  background: var(--accent-ink); border-color: var(--accent-ink); color: #fff;
}

/* ---------- multi-photo memories: swipeable strip ---------- */
.memory-photos {
  display: flex; gap: 0.5rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  width: calc(100% + 2.2rem); /* bleed to card padding, like the single img */
  margin: -1rem -1.1rem 0.8rem;
  padding: 0 1.1rem 0.25rem;
  scrollbar-width: thin;
}
.memory-photos img {
  flex: 0 0 76%;
  scroll-snap-align: center;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-sm);
  outline: 1px solid oklch(0 0 0 / 0.10); outline-offset: -1px;
  background: var(--wash);
  min-height: 44px; /* tappable */
}

/* ---------- mobile: safe areas + 44pt targets ---------- */
.site-header {
  padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
  padding-left: calc(1.25rem + env(safe-area-inset-left, 0px));
  padding-right: calc(1.25rem + env(safe-area-inset-right, 0px));
}
.toast {
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

/* every tappable element hits 44pt */
.chip { min-height: 44px; }
.btn.small { min-height: 44px; padding: 0.55rem 0.9rem; }

@media (prefers-reduced-motion: reduce) {
  .suggestion:not(:disabled):active { transform: none; }
}

@media (max-width: 700px) {
  .site-header {
    padding-top: calc(0.6rem + env(safe-area-inset-top, 0px));
    padding-left: calc(1rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1rem + env(safe-area-inset-right, 0px));
  }
  #view-list.active, #view-memories.active, #view-nearby.active {
    padding-left: calc(1rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1rem + env(safe-area-inset-right, 0px));
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  .modal {
    padding: 0;
    align-items: flex-end; /* bottom sheet on small screens — thumb reach */
  }
  .modal-card {
    max-width: none;
    max-height: 92dvh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- nearby ---------- */
.nearby-context { margin: 0 0 0.75rem; font-size: var(--text-small); }
.pill.dist {
  font-variant-numeric: tabular-nums; /* distances never shift */
  border-style: dashed;
}
.empty .btn { margin-top: 0.75rem; }
.sort-wrap { flex: none; }
.sort-wrap select {
  width: auto;
  min-height: 36px;
  padding: 0.35rem 1.75rem 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--ink-soft);
  background-color: var(--card);
  border: 1px solid var(--line);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-press) var(--ease-out),
              transform var(--dur-press) ease-out;
}
.sort-wrap select:not(:disabled):active { transform: scale(0.96); }
@media (hover: hover) {
  .sort-wrap select:hover { border-color: var(--faint); }
}

/* ---------- clip a place ---------- */
/* .btn sets display, which would defeat the hidden attribute. */
.btn[hidden] { display: none; }

.dup-warning {
  margin: 0 0 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid oklch(0.85 0.06 75);
  border-radius: var(--radius-sm);
  background: oklch(0.96 0.03 75);
  color: oklch(0.38 0.07 75);
  font-size: var(--text-small);
}

.clip-error {
  margin: 0 0 0.5rem;
  color: oklch(0.45 0.13 25);
  font-size: var(--text-small);
}

/* ------------------------------------------------ Next Time additions */
.view-heading {
  font-family: var(--font-display, inherit);
  font-size: 1.35rem;
  margin: 0.25rem 0 0.9rem;
}
.pill.live { background: oklch(0.93 0.06 25); color: oklch(0.45 0.14 25); }
.card.is-live { outline: 2px solid oklch(0.75 0.10 25); outline-offset: -2px; }
.live-card { border: 1px solid oklch(0.85 0.06 25); background: oklch(0.985 0.01 40); }
.live-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.live-head .card-title { margin: 0; }
.live-note { margin-top: 0.75rem; }
.live-card .memory-photos { margin-top: 0.75rem; }
.last-time-hint { font-size: var(--text-small); color: var(--muted); margin-top: 0.35rem; }
.vibe-reason { font-size: var(--text-small); color: var(--muted); font-style: italic; margin-top: 0.3rem; }
.vibe-loading { font-size: var(--text-small); color: var(--muted); padding: 1rem 0.25rem; margin: 0; }
.research-verdict { margin: 0 0 0.5rem; }
.research-list li.has-photo { overflow: hidden; }
.research-photo { float: left; width: 60px; height: 60px; object-fit: cover; border-radius: 10px; margin: 0.1rem 0.6rem 0.3rem 0; }
.research-voices { margin: 0; padding-left: 1.15rem; }
.research-voices li { margin: 0.35rem 0; }
.research-voice-src { color: var(--muted); font-size: var(--text-small); }
.research-voice-src a { color: inherit; }
.dietary-row { display: block; }
.research-h { font-size: var(--text-small); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 1.1rem 0 0.35rem; }
.research-list { margin: 0; padding-left: 1.15rem; }
.research-list li { margin: 0.25rem 0; }
.research-sources { margin: 0; padding-left: 1.15rem; font-size: var(--text-small); }
.research-sources li { margin: 0.25rem 0; }
.research-date { margin: 1.1rem 0 0; font-size: var(--text-small); }
.research-actions { margin-top: 1.1rem; }
.file-btn { cursor: pointer; }
.modal-spacer { flex: 1; }
.btn.danger { color: oklch(0.5 0.14 25); }
.settings-card { display: block; }
.settings-actions { justify-content: flex-start; margin: 0.6rem 0 0.4rem; }
.setting-row {
  display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between;
  padding: 0.9rem 0 0.2rem; border-top: 1px solid var(--line, oklch(0.92 0.01 80)); margin-top: 0.9rem;
}
.setting-title { font-weight: 600; }
.setting-text .muted { margin: 0.25rem 0 0; }
.group-link { word-break: break-all; }
.login-foot { margin-top: 1.25rem; font-size: var(--text-small); color: var(--muted); }
.neighborhood-link { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.neighborhood-name { color: inherit; text-decoration: none; }
.neighborhood-name:hover { text-decoration-line: underline; text-underline-offset: 3px; }
.view-subnav { margin: -0.35rem 0 0.9rem; font-size: var(--text-small); }
.view-subnav a { color: var(--muted); }
.neighborhood-counts { margin: 0 0 1rem; }
.neighborhood-subhead { margin: 1.5rem 0 0.75rem; }
.guide-facet { margin: 0 0 0.5rem; }
.chat-log { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 0.75rem; }
.chat-log:empty { display: none; }
.chat-msg { max-width: 92%; padding: 0.55rem 0.8rem; border-radius: 0.9rem; background: var(--wash); }
.chat-msg p { margin: 0 0 0.4rem; }
.chat-msg p:last-child { margin-bottom: 0; }
.chat-msg.user { align-self: flex-end; background: var(--accent-wash); }
.chat-form { display: flex; gap: 0.5rem; }
.chat-form input { flex: 1; min-width: 0; }
.back-line { margin: 0 0 0.5rem; font-size: var(--text-small); }
.back-line a { color: var(--muted); }
.login-foot a { color: inherit; }