/* Altea ’26 — one stylesheet for every page. */

:root {
  color-scheme: light dark;
  /* Sand, sea, terracotta and a low sun. Night keeps the same four, by lamplight. */
  --bg: #f6f1e7;
  --surface: #fffdf8;
  --ink: #1f2a33;
  --muted: #5c6870;
  --line: #e0d6c2;
  --sea: #0e6b8c;
  --clay: #a8432a;
  --clay-soft: #f6e4da;
  --sun: #f2b04a;
  --hero: #0b4f66;
  --hero-sun: #f2b04a;
  --scrim: rgb(20 24 28 / 45%);
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");
  --shadow: 0 1px 2px rgb(31 42 51 / 5%);
  --lift: 0 18px 48px rgb(31 42 51 / 22%);
  --radius: 12px;
  --round: 10px;
  --bar: 56px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171513;
    --surface: #211e1b;
    --ink: #ece6da;
    --muted: #a59d90;
    --line: #37322c;
    --sea: #8bbdb4;
    --clay: #e0957d;
    --clay-soft: #2e221d;
    --sun: #d9a352;
    --hero: #1c2b2b;
    --hero-sun: #c9954a;
    --scrim: rgb(0 0 0 / 60%);
    --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23171513' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");
    --shadow: none;
    --lift: 0 18px 48px rgb(0 0 0 / 50%);
  }
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 16px); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1rem/1.55 var(--sans);
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
  overflow-wrap: anywhere;
}

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2 { font-family: var(--serif); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 8vw, 3rem); }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.08rem; line-height: 1.3; }
a { color: var(--sea); text-underline-offset: 0.18em; }
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; border-radius: 6px; }

.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.lede { color: var(--muted); max-width: 34rem; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; z-index: 30; background: var(--surface); padding: 10px 14px; border-radius: 10px; }

main { max-width: 44rem; margin: 0 auto; padding: 20px 16px 32px; }

/* Icons: one mask per glyph, painted in the current text colour. */
.icon {
  display: inline-block; flex: none; width: 1.25em; height: 1.25em;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}
.icon-flight { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E"); }
.icon-car { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z'/%3E%3C/svg%3E"); }
.icon-stay { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E"); }
.icon-plan { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 010-5 2.5 2.5 0 010 5z'/%3E%3C/svg%3E"); }
.icon-heart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E"); }
.icon-itinerary { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19a2 2 0 002 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z'/%3E%3C/svg%3E"); }
.icon-ideas { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z'/%3E%3C/svg%3E"); }
.icon-info { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E"); }
.icon-star { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E"); }
.icon-shop { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1.003 1.003 0 0020 4H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E"); }
.icon-phone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E"); }

/* Top bar, and the tabs that sit at the bottom of the screen on phones. */
.bar {
  position: sticky; top: 0; z-index: 20; height: var(--bar);
  border-bottom: 1px solid var(--line);
}
/* The blur lives on a pseudo-element: a backdrop-filter on .bar itself would
   make it the containing block for the fixed bottom tabs. */
.bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.bar-inner { max-width: 60rem; height: 100%; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 16px; }
.brand { font: 600 1.25rem var(--serif); color: var(--ink); text-decoration: none; margin-right: auto; padding: 10px 0; }
.brand span { color: var(--clay); }
.login h1 span { color: var(--hero-sun); }

.who-btn {
  min-height: 44px; padding: 0 14px; border-radius: var(--round); cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 0.92rem;
  max-width: 11rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tabs {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
  view-transition-name: tabs;
}
.tabs a {
  display: grid; justify-items: center; gap: 2px; min-height: 52px; padding: 6px 4px;
  color: var(--muted); text-decoration: none; font-size: 0.75rem; font-weight: 600; border-radius: var(--round);
  transition: color 0.2s, background-color 0.2s;
}
.tabs .icon { width: 1.5rem; height: 1.5rem; transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
.tabs a[aria-current] { color: var(--sea); background: color-mix(in srgb, var(--sea) 12%, transparent); }
.tabs a[aria-current] .icon { transform: translateY(-1px) scale(1.08); }

@media (min-width: 720px) {
  body { padding-bottom: 0; }
  .tabs { position: static; display: flex; gap: 4px; padding: 0; background: none; border: 0; }
  .tabs a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; font-size: 0.95rem; }
  .tabs .icon { width: 1.15rem; height: 1.15rem; }
  .brand { margin-right: 8px; }
  .who-btn { margin-left: auto; }
}

/* Hero */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: var(--hero);
}
.hero-inner { position: relative; max-width: 44rem; margin: 0 auto; padding: 28px 16px 44px; }
.hero .eyebrow { color: rgb(255 255 255 / 80%); margin-bottom: 20px; padding-right: 100px; }
.hero-label { font-weight: 700; color: var(--hero-sun); margin-bottom: 4px; }
.hero-count { font: 600 clamp(2.4rem, 13vw, 4.25rem)/1 var(--serif); margin: 14px 0 10px; font-variant-numeric: tabular-nums; }
.hero-sub { color: rgb(255 255 255 / 88%); }
.hero-staying { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 14px; border-radius: var(--round); background: rgb(255 255 255 / 12%); font-size: 0.92rem; }

.sun {
  position: absolute; top: -64px; right: -52px; width: 150px; height: 150px; border-radius: 50%;
  background: var(--hero-sun);
}

/* Itinerary */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 8px; }
.segmented { display: inline-flex; padding: 3px; border-radius: var(--round); background: var(--surface); border: 1px solid var(--line); }
.segmented button { min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--round); background: none; font-weight: 600; font-size: 0.92rem; color: var(--muted); cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.segmented button[aria-pressed="true"] { background: var(--sea); color: var(--bg); }

.day { margin-top: 28px; }
.day-title { padding: 10px 0; }
.events { display: grid; gap: 12px; }

.event { display: flex; gap: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.event-icon { width: 2.5rem; height: 2.5rem; padding: 0; color: var(--sea); background: currentColor; -webkit-mask-size: 1.4rem; mask-size: 1.4rem; }
.event-body { flex: 1; min-width: 0; display: grid; gap: 6px; }
.event-when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sea); }
.tbc-text { font-weight: 600; color: var(--muted); font-style: italic; }
.event dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 0.95rem; }
.event dt { color: var(--muted); }
.event.is-now { border-color: var(--clay); box-shadow: inset 3px 0 0 var(--clay); }

.badge { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--muted); }
.badge.now { background: var(--clay); color: var(--bg); }

/* Undecided things are part of the design, not a gap in it. */
.tbc { margin-top: 4px; padding: 2px 0 2px 12px; border-left: 3px solid var(--clay); }
.tbc-label { font-size: 0.85rem; font-weight: 700; color: var(--clay); }
.tbc ul { display: grid; font-size: 0.95rem; }
.tbc li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tbc .link { flex: none; font-size: 0.9rem; font-weight: 600; }
.tbc.known { border-left-color: var(--sea); }
.tbc.known .tbc-label { color: var(--sea); }
.tbc.known dl { display: block; }
.tbc.known dt { margin-top: 6px; font-size: 0.85rem; }
.tbc.known dd { font-size: 0.95rem; }

.cta { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--sea); text-decoration: none; }
.cta:hover { text-decoration: underline; }

.earlier { margin-top: 12px; }
.earlier summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--round); border: 1px solid var(--line); background: var(--surface); font-weight: 600; color: var(--muted); cursor: pointer; }
.earlier .event { box-shadow: none; background: none; }

/* Ideas */
.page-head { display: grid; gap: 10px; padding: 16px 0 8px; }
.page-head .eyebrow { color: var(--clay); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--round); cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 0.92rem; text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.chip:hover { border-color: var(--sea); }
.chip[aria-pressed="true"] { background: var(--sea); border-color: var(--sea); color: var(--bg); }

.topic { margin-top: 36px; }
.finder { display: grid; gap: 8px; margin-bottom: 14px; }
.finder .chips { margin-top: 0; gap: 0 18px; }
.finder .chip { padding: 0; border: 0; background: none; color: var(--sea); text-decoration: underline; }
.topic-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ideas { display: grid; gap: 12px; }
.idea { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.idea-main { display: flex; gap: 12px; align-items: flex-start; padding: 16px; }
.idea-photo { position: relative; margin: 0; aspect-ratio: 16 / 9; background: var(--line); }
.idea-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-credit { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgb(0 0 0 / 55%); color: #fff; font-size: 0.7rem; text-decoration: none; }
.idea-links { display: flex; flex-wrap: wrap; gap: 0 18px; }

/* Picking days */
.day-picker { border-top: 1px solid var(--line); }
.day-picker summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; font-weight: 600; font-size: 0.92rem; color: var(--sea); cursor: pointer; }
.day-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; }
.day-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; cursor: pointer; white-space: nowrap; flex: none;
  border: 1.5px solid var(--line); border-radius: var(--round); background: var(--bg); font-weight: 600; font-size: 0.9rem;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.day-chip[aria-pressed="true"] { background: var(--clay-soft); border-color: var(--clay); color: var(--clay); }
.day-count { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 5px; border-radius: 999px; background: var(--clay); color: var(--bg); font-size: 0.75rem; font-weight: 700; }

/* Ratings and comments */
.reviews { border-top: 1px solid var(--line); }
.reviews summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; font-weight: 600; font-size: 0.92rem; color: var(--sea); cursor: pointer; }
.reviews-body { display: grid; gap: 12px; justify-items: start; padding: 0 16px 16px; }
.reviews ul { display: grid; gap: 10px; }
.review-rating { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--sun); color: #1f2a33; font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.info-item .reviews { flex: 1 1 100%; margin: 0 -16px -14px; }
.stars { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 6px; padding: 0; border: 0; }
.stars legend { padding: 0; margin-bottom: 6px; font-weight: 600; }
.stars label { display: block; }
.stars input { position: absolute; opacity: 0; width: 1px; min-height: 0; padding: 0; }
.stars span { display: grid; place-items: center; min-height: 44px; border: 1.5px solid var(--line); border-radius: var(--round); background: var(--bg); font-weight: 700; cursor: pointer; }
.stars input:checked + span { background: var(--sea); border-color: var(--sea); color: var(--bg); }
.stars input:focus-visible + span { outline: 3px solid var(--clay); outline-offset: 2px; }
.sheet-actions .link { margin-right: auto; }

.week { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin: 14px 0 4px; }
.week-day { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 0; min-height: 56px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; }
.week-name { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.week-num { font: 600 1.1rem var(--serif); }
.week-day .day-count { position: absolute; top: -6px; right: -4px; }
.week-day[aria-disabled] { opacity: 0.45; pointer-events: none; }

/* Weather: one column every two hours, taller when warmer. */
.weather { margin-bottom: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.weather-none { margin-bottom: 12px; }
.weather-sky { font: 600 1.25rem var(--serif); }
.weather-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin-top: 10px; }
.weather-slot { display: grid; grid-template-rows: 1fr auto 1.1rem; justify-items: center; align-items: end; height: 5.4rem; }
.weather-temp { font-size: 0.68rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.weather-bar { width: 100%; border-radius: 6px 6px 2px 2px; background: color-mix(in srgb, var(--sea) 28%, transparent); }
.weather-slot.light .weather-bar { background: color-mix(in srgb, var(--sun) 75%, transparent); }
.weather-slot.light .weather-temp { color: var(--ink); }
.weather-slot.wet .weather-bar { background-image: radial-gradient(var(--sea) 1.2px, transparent 1.6px); background-size: 6px 6px; }
.weather-hour { font-size: 0.68rem; color: var(--muted); }
.week-temp { font-size: 0.68rem; font-variant-numeric: tabular-nums; color: var(--muted); }

.day-ideas { margin-top: 12px; padding: 14px 16px 6px; border: 1px solid var(--line); border-radius: var(--radius); }
.day-ideas-label { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.day-ideas ul { display: grid; gap: 10px; margin-top: 10px; }
.day-ideas li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.day-idea-title { font-weight: 700; }
.idea-body { flex: 1; min-width: 0; display: grid; gap: 6px; }
.idea-link { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 0.78rem; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--sea) 12%, transparent); color: var(--sea); font-weight: 600; }

.vote-box { flex: none; width: 4.5rem; display: grid; justify-items: center; gap: 6px; }
.vote {
  display: grid; justify-items: center; gap: 2px; width: 3.5rem; min-height: 3.75rem; padding: 8px 0; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--round); background: var(--bg); color: var(--muted);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.vote .icon { width: 1.4rem; height: 1.4rem; }
.vote-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.vote[aria-pressed="true"] { background: var(--clay-soft); border-color: var(--clay); color: var(--clay); }
.voters { font-size: 0.74rem; line-height: 1.3; color: var(--muted); text-align: center; }

.empty { padding: 28px 16px; text-align: center; color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius); }
.notice { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--clay-soft); border: 1px solid color-mix(in srgb, var(--clay) 40%, var(--line)); }

/* Info */
.card { display: flex; gap: 14px; padding: 18px; margin-top: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card > .icon { width: 2rem; height: 2rem; color: var(--sea); }
.card > div { display: grid; gap: 4px; }
.info-section { margin-top: 32px; }
.info-list { display: grid; gap: 10px; margin-top: 12px; }
.info-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.info-item > div { flex: 1 1 12rem; }
.info-label { font-weight: 700; }

/* Shopping list */
.card.shop-form { display: grid; gap: 12px; }
.shop-list { display: grid; gap: 10px; margin-top: 12px; }
.shop-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.shop-item > div { flex: 1; min-width: 0; }
.shop-name { font-weight: 700; }
.shop-item.got .shop-name { text-decoration: line-through; color: var(--muted); }
.tick { appearance: none; -webkit-appearance: none; flex: none; width: 44px; min-height: 44px; height: 44px; margin: 0; padding: 0; border: 2px solid var(--sea); border-radius: 50%; background: var(--bg); cursor: pointer; }
.tick:checked { background: var(--sea) var(--tick) center / 60% no-repeat; }

/* Dinner offers; also the tick-box chips in its form */
.dinner { margin-bottom: 12px; padding-bottom: 14px; }
.dinner-offer { margin-top: 6px; }
.dinner .link { font-weight: 600; font-size: inherit; }
fieldset.plain { padding: 0; border: 0; min-width: 0; }
fieldset.plain legend { padding: 0; margin-bottom: 6px; font-weight: 600; }
.picks { display: flex; flex-wrap: wrap; gap: 6px; }
.picks label { display: block; }
.picks input { position: absolute; opacity: 0; width: 1px; min-height: 0; padding: 0; }
.picks span { display: block; min-height: 44px; padding: 0 14px; line-height: 41px; border: 1.5px solid var(--line); border-radius: var(--round); background: var(--bg); font-weight: 600; cursor: pointer; }
.picks input:checked + span { background: var(--sea); border-color: var(--sea); color: var(--bg); }
.picks input:focus-visible + span { outline: 3px solid var(--clay); outline-offset: 2px; }

/* Buttons, forms, dialogs */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; cursor: pointer;
  border: 1.5px solid var(--sea); border-radius: var(--round); background: var(--sea); color: var(--bg); font-weight: 700; text-decoration: none; white-space: nowrap; flex: none;
  transition: transform 0.15s, filter 0.2s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn.small { min-height: 44px; padding: 0 18px; }
.btn.ghost { background: none; color: var(--sea); border-color: var(--line); }
.btn.tel { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.link { border: 0; background: none; padding: 0; min-height: 44px; color: var(--sea); font-weight: 700; text-decoration: underline; cursor: pointer; }

label { display: grid; gap: 6px; font-weight: 600; }
input, textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--muted); border-radius: var(--round); background: var(--bg); font-weight: 400; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
textarea { resize: vertical; }
input:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--sea); }
.form-error { color: var(--clay); font-weight: 600; }

.sheet {
  width: min(100% - 24px, 28rem); max-height: calc(100dvh - 32px); padding: 22px; overflow: auto;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: var(--lift);
}
.sheet::backdrop { background: var(--scrim); }
.sheet > *, .sheet form > * { margin-top: 14px; }
.sheet > :first-child, .sheet form > :first-child { margin-top: 0; }
.sheet-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.who-group h3 { font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.who-names { display: flex; flex-wrap: wrap; gap: 8px; }

.toast {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 40; translate: -50% 0;
  width: max-content; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 14px;
  background: var(--ink); color: var(--bg); font-weight: 600; box-shadow: var(--shadow);
}

/* Login */
.login { min-height: 100dvh; padding: 0; display: grid; place-items: center; color: #fff; background: var(--hero); overflow: hidden; }
.login-card { position: relative; width: min(100% - 32px, 26rem); padding: 32px 0; display: grid; gap: 14px; }
/* Here the sun hangs off the card, not the page, so lift it clear of the text. */
.login .sun { top: -170px; right: -68px; }
.login .lede { color: rgb(255 255 255 / 88%); }
.login form { display: grid; gap: 12px; margin-top: 10px; padding: 20px; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: var(--lift); }

/* Chosen things carry a tick as well as a fill, for anyone who can't rely on the colour. */
.chip[aria-pressed="true"]::before, .day-chip[aria-pressed="true"]::before, .picks input:checked + span::before { content: "✓ "; }
.segmented button[aria-pressed="true"], .stars input:checked + span { text-decoration: underline; text-underline-offset: 0.25em; }

@media (forced-colors: active) {
  .picks input, .stars input { position: static; opacity: 1; width: auto; }
  .picks label, .stars label { display: flex; align-items: center; gap: 6px; }
  .tick { appearance: auto; -webkit-appearance: auto; }
}

/* Page-to-page transitions (each page opts in from an inline style). Anyone who has asked
   for less motion gets a plain cut. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .btn:active { transform: none; }
}

/* Motion — only for people who haven't asked for less of it. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: 160ms ease-in both fade-out; }
  ::view-transition-new(root) { animation: 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both rise-in; }

  .hero-inner > *, .page-head > *, .login-card > * { animation: rise-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-inner > :nth-child(2), .page-head > :nth-child(2), .login-card > :nth-child(3) { animation-delay: 0.06s; }
  .page-head > :nth-child(3), .login-card > :nth-child(4) { animation-delay: 0.12s; }
  .page-head > :nth-child(4), .login-card > :nth-child(5) { animation-delay: 0.18s; }
  .sun { animation: sun-up 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

  .vote.pop .icon { animation: pop 0.45s cubic-bezier(0.3, 1.7, 0.5, 1); }
  .toast { animation: rise-in 0.3s ease-out both; }
  .sheet[open] { animation: sheet-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .sheet[open]::backdrop { animation: fade-in 0.3s ease-out both; }

  /* Scroll-linked: cards ease in as they enter, the sun drifts as the hero leaves. */
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    .hero .sun { animation: sun-drift linear both; animation-timeline: scroll(root); animation-range: 0 420px; }
  }
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(24px) scale(0.98); } }
@keyframes sun-up { from { opacity: 0; transform: translateY(60px) scale(0.8); } }
@keyframes pop { 40% { transform: scale(1.45); } }
@keyframes reveal { from { opacity: 0; transform: translateY(28px) scale(0.98); } }
@keyframes sun-drift { to { transform: translate(-40px, 90px) scale(1.25); } }