/* View-only trip page. Tokens mirror design/claude-design/colors_and_type.css
   (Cellar Door palette); dark mode follows the visitor's system setting. */
:root {
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Mulish', ui-sans-serif, system-ui, sans-serif;
  --background: #F7F1EB;
  --surface: #FFFCF9;
  --surface2: #EFE3DA;
  --text: #2B1D1F;
  --muted: #6E5A5B;
  --accent: #8C2F3F;
  --line: #E7D7CF;
  --idea: #5E6E2E;
  --radius-card: 16px;
  --radius-pill: 999px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #150E10;
    --surface: #20161A;
    --surface2: #2B1F23;
    --text: #F7ECE9;
    --muted: #C8B4B2;
    --accent: #E27F8D;
    --line: #4A393F;
    --idea: #AFBF72;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.45;
}
.page { max-width: 640px; margin: 0 auto; padding: 24px 16px 48px; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 24px 20px;
}
.brand { font-family: var(--font-display); font-weight: 600; color: var(--accent); font-size: 15px; }
.title { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1.15; margin: 8px 0 6px; overflow-wrap: anywhere; }
.sub { color: var(--muted); margin: 0 0 14px; }
.pill {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 15px;
  margin-bottom: 8px;
}
.day { margin-top: 24px; }
.day-head {
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}
.items { list-style: none; margin: 8px 0 0; padding: 0; }
.item { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.time { flex: 0 0 72px; color: var(--muted); font-size: 15px; padding-top: 2px; }
.what { flex: 1 1 auto; min-width: 0; }
.name { font-weight: 700; font-size: 18px; overflow-wrap: anywhere; }
.maybe {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--idea);
  border: 1px solid var(--idea);
  border-radius: var(--radius-pill);
  padding: 0 8px;
  vertical-align: 2px;
}
.meta { color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
.maps { color: var(--accent); font-size: 15px; text-decoration: none; display: inline-block; padding: 4px 0; }
.maps:hover, .maps:focus { text-decoration: underline; }
.empty { color: var(--muted); margin: 8px 0 0; }
.foot { color: var(--muted); margin: 20px 0 0; }
.note { color: var(--muted); font-size: 14px; margin: 16px 4px 0; }