/* =========================================================
   Dotted Line — Material 3 Expressive styling
   ========================================================= */

/* Google Sans Flex, stored in the app so it works offline */
@font-face {
  font-family: 'Google Sans Flex';
  src: url('fonts/google-sans-flex.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Color system ----------
   Every color is generated from one "seed" color (the trip's color),
   the same way Pixel phones build a palette from your wallpaper. */
:root {
  --seed: #c62828;
  color-scheme: light;

  --font: 'Google Sans Flex', 'Google Sans', Roboto, system-ui, sans-serif;
  --ease: cubic-bezier(.2, 0, 0, 1);            /* Material "emphasized" */
  --ease-decel: cubic-bezier(.05, .7, .1, 1);
  --ease-spring: cubic-bezier(.34, 1.45, .64, 1); /* expressive bounce */
  --nav-h: 64px;                                /* Material 3 Expressive's shorter navigation bar */
  --elev-3: 0 1px 3px rgb(0 0 0 / .18), 0 4px 10px 3px rgb(0 0 0 / .1);

  /* Fallback palette for browsers without relative colors */
  --primary: #a8261f; --on-primary: #fff;
  --primary-container: #ffdad5; --on-primary-container: #5c0e0a;
  --secondary-container: #f7dcd8; --on-secondary-container: #442a27;
  --tertiary-container: #f3e1a6; --on-tertiary-container: #3f3000;
  --surface: #fff8f7; --surface-container-low: #fdf0ee; --surface-container: #f8eae8;
  --surface-container-high: #f2e4e2; --surface-container-highest: #ecdfdc;
  --on-surface: #231918; --on-surface-variant: #534341;
  --outline: #857370; --outline-variant: #d8c2be;
  --inverse-surface: #392e2d; --inverse-on-surface: #ffedea; --inverse-primary: #ffb4a9;
  --error: #ba1a1a; --error-container: #ffdad6; --on-error-container: #410002;
  --cat-l: .92; --cat-c: .06; --cat-on-l: .42; --cat-on-c: .13;
}

@supports (color: oklch(from red l c h)) {
  :root {
    --primary: oklch(from var(--seed) .5 min(c, .17) h);
    --on-primary: #fff;
    --primary-container: oklch(from var(--seed) .91 min(c, .07) h);
    --on-primary-container: oklch(from var(--seed) .3 min(c, .12) h);
    --secondary-container: oklch(from var(--seed) .91 .03 h);
    --on-secondary-container: oklch(from var(--seed) .3 .03 h);
    --tertiary-container: oklch(from var(--seed) .91 .06 calc(h + 70));
    --on-tertiary-container: oklch(from var(--seed) .32 .08 calc(h + 70));
    --surface: oklch(from var(--seed) .985 .006 h);
    --surface-container-low: oklch(from var(--seed) .965 .009 h);
    --surface-container: oklch(from var(--seed) .95 .012 h);
    --surface-container-high: oklch(from var(--seed) .935 .014 h);
    --surface-container-highest: oklch(from var(--seed) .915 .016 h);
    --on-surface: oklch(from var(--seed) .22 .012 h);
    --on-surface-variant: oklch(from var(--seed) .44 .02 h);
    --outline: oklch(from var(--seed) .62 .02 h);
    --outline-variant: oklch(from var(--seed) .86 .015 h);
    --inverse-surface: oklch(from var(--seed) .28 .01 h);
    --inverse-on-surface: oklch(from var(--seed) .95 .01 h);
    --inverse-primary: oklch(from var(--seed) .82 .1 h);
  }
}

/* Dark theme. app.js sets data-theme from More → Appearance
   (or from the phone's setting when Appearance is "Automatic"). */
:root[data-theme="dark"] {
    color-scheme: dark;
    --primary: #ffb4a9; --on-primary: #690004;
    --primary-container: #8c1d18; --on-primary-container: #ffdad5;
    --secondary-container: #5d3f3b; --on-secondary-container: #ffdad5;
    --tertiary-container: #5a4400; --on-tertiary-container: #ffdf93;
    --surface: #1a1110; --surface-container-low: #231918; --surface-container: #271d1c;
    --surface-container-high: #322826; --surface-container-highest: #3d3231;
    --on-surface: #f1dfdc; --on-surface-variant: #d8c2be;
    --outline: #a08c89; --outline-variant: #534341;
    --inverse-surface: #f1dfdc; --inverse-on-surface: #392e2d; --inverse-primary: #a8261f;
    --error: #ffb4ab; --error-container: #93000a; --on-error-container: #ffdad6;
    --cat-l: .34; --cat-c: .06; --cat-on-l: .88; --cat-on-c: .09;
    --elev-3: 0 1px 3px rgb(0 0 0 / .4), 0 4px 10px 3px rgb(0 0 0 / .3);
}
@supports (color: oklch(from red l c h)) {
    :root[data-theme="dark"] {
      --primary: oklch(from var(--seed) .8 min(c, .12) h);
      --on-primary: oklch(from var(--seed) .28 min(c, .1) h);
      --primary-container: oklch(from var(--seed) .36 min(c, .1) h);
      --on-primary-container: oklch(from var(--seed) .92 min(c, .05) h);
      --secondary-container: oklch(from var(--seed) .34 .03 h);
      --on-secondary-container: oklch(from var(--seed) .9 .02 h);
      --tertiary-container: oklch(from var(--seed) .36 .06 calc(h + 70));
      --on-tertiary-container: oklch(from var(--seed) .9 .05 calc(h + 70));
      --surface: oklch(from var(--seed) .16 .008 h);
      --surface-container-low: oklch(from var(--seed) .19 .01 h);
      --surface-container: oklch(from var(--seed) .21 .011 h);
      --surface-container-high: oklch(from var(--seed) .245 .012 h);
      --surface-container-highest: oklch(from var(--seed) .28 .013 h);
      --on-surface: oklch(from var(--seed) .92 .008 h);
      --on-surface-variant: oklch(from var(--seed) .78 .015 h);
      --outline: oklch(from var(--seed) .6 .015 h);
      --outline-variant: oklch(from var(--seed) .36 .015 h);
      --inverse-surface: oklch(from var(--seed) .92 .008 h);
      --inverse-on-surface: oklch(from var(--seed) .25 .01 h);
      --inverse-primary: oklch(from var(--seed) .5 .15 h);
    }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }

body {
  font-family: var(--font);
  font-optical-sizing: auto;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: .01em;
  background: var(--surface);
  color: var(--on-surface);
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 96px);
  transition: background-color .5s var(--ease), color .5s var(--ease);
}

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: inherit; }
[hidden] { display: none !important; }
#theme-probe { background: var(--surface); }

.icon { width: 24px; height: 24px; fill: currentColor; flex: none; display: block; }
.icon.sm { width: 18px; height: 18px; }

/* Tap ripple (added by app.js) */
.ripple { position: relative; overflow: hidden; isolation: isolate; }
.wave {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: .14;
  transform: scale(0);
  pointer-events: none;
  z-index: -1;
  animation: wave .55s var(--ease) forwards;
}
@keyframes wave { to { transform: scale(1); opacity: 0; } }

/* ---------- Top app bar ---------- */
.appbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  padding: calc(env(safe-area-inset-top) + 8px) 0 8px;
  transition: background-color .3s var(--ease);
}
.appbar.scrolled { background: var(--surface-container); }
.appbar-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.appbar-title {
  flex: 1;
  margin: 0;
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.appbar.show-title .appbar-title { opacity: 1; transform: none; }

.trip-tabs {
  flex: 1;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.trip-chip {
  flex: none;
  height: 40px;
  padding: 0 18px 0 14px;
  border-radius: 20px;
  border: 1px solid var(--outline-variant);
  color: var(--on-surface-variant);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: border-radius .35s var(--ease-spring), background-color .3s var(--ease), color .3s;
}
.trip-chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.trip-chip.active {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  border-color: transparent;
  border-radius: 12px;
}
.trip-chip.add { width: 40px; padding: 0; justify-content: center; }

.offline-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 10px;
  border-radius: 16px;
  background: var(--tertiary-container);
  color: var(--on-tertiary-container);
  font-size: 12px;
  font-weight: 600;
}

/* ---------- Page ---------- */
main { max-width: 640px; margin: 0 auto; padding: 8px 16px 0; }

.view { animation: view-in .4s var(--ease-decel); }
@keyframes view-in { from { opacity: 0; transform: translateY(16px); } }

.headline {
  margin: 12px 4px 4px;
  font-size: 36px;
  line-height: 44px;
  font-weight: 560;
  letter-spacing: -.015em;
  font-variation-settings: 'ROND' 100;
}
.supporting {
  margin: 0 4px 20px;
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 20px;
}

/* ---------- Trip hero card ---------- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 4px 0 28px;
  padding: 20px 20px 22px;
  border-radius: 32px;
  background: var(--primary-container);
  color: var(--on-primary-container);
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
.hero-shape {
  position: absolute;
  right: -48px;
  bottom: -56px;
  width: 210px;
  height: 210px;
  z-index: -1;
  fill: var(--primary);
  opacity: .14;
  animation: shape-in 1s var(--ease-spring);
}
.hero-shape-icon {
  position: absolute;
  right: 34px;
  bottom: 30px;
  width: 56px;
  height: 56px;
  z-index: -1;
  color: var(--primary);
  opacity: .5;
  animation: shape-in 1s var(--ease-spring);
}
@keyframes shape-in { from { transform: rotate(-50deg) scale(.6); opacity: 0; } }

.hero-overline {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .75;
}
.hero-title {
  margin: 6px 56px 0 0;
  font-size: 52px;
  line-height: 56px;
  font-weight: 650;
  letter-spacing: -.025em;
  font-variation-settings: 'ROND' 100;
  overflow-wrap: anywhere;
}
.hero-dates { margin: 6px 0 16px; font-size: 16px; line-height: 24px; }
.hero-edit {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--on-primary-container);
  background: color-mix(in oklab, var(--on-primary-container) 9%, transparent);
}
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px 0 12px;
  border-radius: 18px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 14px;
  font-weight: 650;
}
.hero-progress {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  max-width: 260px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

/* Linear progress with the Material "stop" dot */
.progress { display: flex; gap: 4px; height: 6px; align-items: center; }
.progress .on, .progress .off { flex-basis: 0; height: 6px; border-radius: 3px; }
.progress .on { background: var(--primary); }
.progress .off {
  position: relative;
  background: color-mix(in oklab, var(--primary) 22%, transparent);
}
.progress .off::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary);
}

/* ---------- Days ---------- */
.day { margin-bottom: 24px; scroll-margin-top: calc(env(safe-area-inset-top) + 72px); }
.day-head { display: flex; align-items: center; gap: 14px; padding: 0 0 12px 4px; }
.date-badge {
  width: 56px;
  height: 56px;
  flex: none;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 18px;
  background: var(--surface-container-highest);
  color: var(--on-surface);
}
.date-badge small {
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.date-badge strong {
  font-size: 22px;
  line-height: 24px;
  font-weight: 650;
  font-variation-settings: 'ROND' 100;
}
.date-badge.today {
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 0;
  clip-path: var(--cookie-56);
  animation: pop .6s var(--ease-spring);
}
.date-badge.today small { color: inherit; opacity: .85; }
@keyframes pop { from { transform: scale(.6) rotate(-30deg); } }
.day-text { flex: 1; min-width: 0; }
.day-title { font-size: 18px; line-height: 24px; font-weight: 650; }
.day-sub { font-size: 14px; line-height: 20px; color: var(--on-surface-variant); }
.day-sub b { color: var(--primary); font-weight: 650; }

.empty-day {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 24px;
  border: 1.5px dashed var(--outline-variant);
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 20px;
  text-align: left;
}
.empty-day .icon { color: var(--primary); }

/* ---------- Grouped lists (Android 16 style) ---------- */
.group { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.group > li {
  background: var(--surface-container);
  border-radius: 6px;
  overflow: hidden;
  transition: background-color .5s var(--ease);
}
.group > li:first-child { border-top-left-radius: 24px; border-top-right-radius: 24px; }
.group > li:last-child { border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }

/* A plan */
.item { display: grid; grid-template-columns: 1fr auto; align-items: start; }
.item-main {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  width: 100%;
  padding: 16px 4px 16px 16px;
  text-align: left;
}
.avatar {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: oklch(var(--cat-l) var(--cat-c) var(--h));
  color: oklch(var(--cat-on-l) var(--cat-on-c) var(--h));
  transition: filter .3s, opacity .3s;
}
.avatar .icon { width: 22px; height: 22px; }
.item-text { display: grid; min-width: 0; }
.overline {
  font-size: 12px;
  line-height: 16px;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--primary);
}
.item-title { font-size: 16px; line-height: 22px; font-weight: 550; overflow-wrap: anywhere; }
.item-sub, .item-notes {
  font-size: 14px;
  line-height: 20px;
  color: var(--on-surface-variant);
  overflow-wrap: anywhere;
}
.item-notes {
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-line;
}
.item-chips {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: -6px;
  padding: 0 16px 16px 72px;
}
.assist-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  max-width: 100%;
  padding: 0 14px 0 10px;
  border-radius: 10px;
  border: 1px solid var(--outline-variant);
  font-size: 14px;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-radius .25s var(--ease);
}
.assist-chip:active { border-radius: 16px; }
.assist-chip .icon { width: 18px; height: 18px; color: var(--primary); }

.item.done .item-title, .task.done .task-text {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  color: var(--on-surface-variant);
}
.item.done .overline { color: var(--on-surface-variant); }
.item.done .avatar { filter: grayscale(1); opacity: .55; }

/* Round checkbox (Google Tasks style) */
.check {
  width: 48px;
  height: 48px;
  margin: 12px 8px 0 0;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.check .box {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--on-surface-variant);
  display: grid;
  place-items: center;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.check .box .icon {
  width: 16px;
  height: 16px;
  color: var(--on-primary);
  opacity: 0;
  transform: scale(.2) rotate(-45deg);
  transition: opacity .2s, transform .45s var(--ease-spring);
}
.done .check .box { background: var(--primary); border-color: var(--primary); }
.done .check .box .icon { opacity: 1; transform: none; }

/* A checklist task */
.task { display: flex; align-items: center; min-height: 56px; padding-left: 4px; }
.task .check { margin: 0; }
.task-text { flex: 1; min-width: 0; padding: 14px 0; font-size: 16px; line-height: 22px; overflow-wrap: anywhere; }

/* ---------- Empty states ---------- */
.empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 28px 16px 8px;
  text-align: center;
}
.empty-art {
  position: relative;
  width: 128px;
  height: 128px;
  margin-bottom: 8px;
  display: grid;
  place-items: center;
  color: var(--on-primary-container);
}
.empty-art .shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--primary-container);
  animation: shape-in 1s var(--ease-spring);
}
.empty-art .icon { position: relative; width: 52px; height: 52px; }
.empty-state h2 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 550; }
.empty-state p {
  margin: 0 0 12px;
  max-width: 290px;
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 20px;
}

/* ---------- Checklist ---------- */
.progress-card {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  padding: 20px 22px 22px;
  border-radius: 32px;
  background: var(--primary-container);
  color: var(--on-primary-container);
}
.progress-card .big {
  font-size: 48px;
  line-height: 52px;
  font-weight: 650;
  letter-spacing: -.02em;
  font-variation-settings: 'ROND' 100;
}
.progress-card .of { font-size: 22px; font-weight: 500; opacity: .7; }
.progress-card p { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; }

.add-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 4px 4px 4px 20px;
  border-radius: 28px;
  background: var(--surface-container-highest);
}
.add-bar:focus-within { box-shadow: inset 0 0 0 2px var(--primary); }
.add-bar input {
  flex: 1;
  min-width: 0;
  height: 48px;
  border: none;
  outline: none;
  background: none;
  font-size: 16px;
}
.add-bar input::placeholder { color: var(--on-surface-variant); }

.label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 4px 8px 16px;
}
.group-label {
  margin: 28px 16px 10px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 650;
  color: var(--primary);
}
.label-row .group-label { margin: 0; }

/* ---------- Settings rows ---------- */
.row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 72px;
  padding: 12px 16px;
  text-align: left;
}
.row-icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}
.row-text { flex: 1; min-width: 0; display: grid; }
.row-title { font-size: 16px; line-height: 24px; font-weight: 550; }
.row-sub { font-size: 14px; line-height: 20px; color: var(--on-surface-variant); }
.row-trail { color: var(--on-surface-variant); }
.row.danger .row-icon { background: var(--error-container); color: var(--on-error-container); }
.row.danger .row-title { color: var(--error); }
.row.accent .row-icon { background: var(--primary); color: var(--on-primary); }
.trip-avatar {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font-size: 18px;
  font-weight: 650;
}
.ok { color: var(--primary); font-weight: 600; }

.footnote {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 28px 16px 8px;
  color: var(--on-surface-variant);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 24px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 650;
  letter-spacing: .01em;
  transition: border-radius .3s var(--ease), background-color .2s;
}
.btn:active { border-radius: 10px; }
.btn .icon { width: 18px; height: 18px; }
.btn.filled { background: var(--primary); color: var(--on-primary); }
.btn.tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.btn.text { padding: 0 12px; color: var(--primary); }
.btn.danger { color: var(--error); }
.btn.filled.danger { background: var(--error-container); color: var(--on-error-container); }
.btn.lg { height: 52px; padding: 0 32px; border-radius: 26px; font-size: 16px; }
.btn.lg:active { border-radius: 14px; }

.icon-btn {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--on-surface-variant);
  transition: border-radius .3s var(--ease);
}
.icon-btn:active { border-radius: 14px; }
.icon-btn.tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.icon-btn.filled { background: var(--primary); color: var(--on-primary); }

/* ---------- Floating action button ---------- */
.fab {
  position: fixed;
  z-index: 9;
  right: max(16px, calc(50% - 304px));
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);
  height: 56px;
  min-width: 56px;
  padding: 0 22px 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 18px;
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-size: 16px;
  font-weight: 650;
  box-shadow: var(--elev-3);
}
.fab:active { border-radius: 28px; }
.fab-label {
  max-width: 160px;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width .35s var(--ease), opacity .2s;
}
.fab.collapsed { padding: 0 16px; gap: 0; }
.fab.collapsed .fab-label { max-width: 0; opacity: 0; }
body.snack-open .fab { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 80px); }

/* The AI Assistant: a smaller button stacked on the + button, on both trip sections */
.ai-fab {
  position: fixed;
  z-index: 9;
  right: calc(max(16px, 50% - 304px) + 4px);
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 84px);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--tertiary-container);
  color: var(--on-tertiary-container);
  box-shadow: var(--elev-3);
}
.ai-fab:active { border-radius: 24px; }
body.snack-open .ai-fab { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 148px); }
/* Scrolling down a list, both buttons step aside so they don't cover the plans (app.js, onScroll) */
.fab, .ai-fab {
  transition: padding .35s var(--ease), gap .35s var(--ease), bottom .35s var(--ease), border-radius .3s var(--ease),
    background-color .5s var(--ease), transform .3s var(--ease), opacity .2s var(--ease);
}
body.fabs-away .fab:not(:focus-visible), body.fabs-away .ai-fab:not(:focus-visible) {
  transform: translateY(32px) scale(.9);
  opacity: 0;
  pointer-events: none;
}
/* Room to scroll the last plan clear of both buttons; without them (Checklist, Settings) the page ends sooner */
@media (max-width: 899px) {
  body:has(.ai-fab:not([hidden])) { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 152px); }
  body:has(#fab[hidden]) { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 32px); }
}

/* ---------- Navigation bar ---------- */
.navbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  display: flex;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface-container);
  transition: background-color .5s var(--ease);
}
.navbar button {
  flex: 1;
  max-width: 168px;
  height: var(--nav-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--on-surface-variant);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .03em;
}
.nav-ind {
  position: relative;
  width: 56px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 16px;
}
.nav-ind::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--secondary-container);
  opacity: 0;
  transform: scaleX(.35);
  transition: transform .4s var(--ease-spring), opacity .2s;
}
.nav-ind .icon { position: relative; grid-area: 1 / 1; }
.navbar .i-fill { display: none; }
.navbar button.active { color: var(--on-surface); font-weight: 700; }
.navbar button.active .nav-ind { color: var(--on-secondary-container); }
.navbar button.active .nav-ind::before { opacity: 1; transform: none; }
.navbar button.active .i-fill { display: block; }
.navbar button.active .i-line { display: none; }

/* ---------- Snackbar ---------- */
.snackbar {
  position: fixed;
  z-index: 30;
  left: 16px;
  right: 16px;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px);
  max-width: 560px;
  margin: 0 auto;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 8px 2px 18px;
  border-radius: 14px;
  background: var(--inverse-surface);
  color: var(--inverse-on-surface);
  font-size: 14px;
  line-height: 20px;
  box-shadow: var(--elev-3);
  opacity: 0;
  transform: translateY(24px) scale(.96);
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .35s var(--ease-decel);
}
.snackbar.show { opacity: 1; transform: none; pointer-events: auto; }
.snackbar .msg { flex: 1; padding: 12px 0; }
.snackbar .btn.text { color: var(--inverse-primary); }

/* ---------- Bottom sheets ---------- */
dialog.sheet {
  width: 100%;
  max-width: 640px;
  max-height: 94dvh;
  margin: auto auto 0;
  padding: 0;
  border: none;
  border-radius: 32px 32px 0 0;
  background: var(--surface-container-low);
  color: var(--on-surface);
  overscroll-behavior: contain;
}
dialog.sheet[open] { animation: sheet-in .5s var(--ease-decel); }
/* On a phone, the page behind an open sheet stays still (no scrolling it, no pull-to-refresh) */
@media (max-width: 899px) { html:has(dialog[open]) { overflow: hidden; overscroll-behavior: none; } }
@keyframes sheet-in { from { transform: translateY(100%); } }
dialog::backdrop { background: rgb(0 0 0 / .42); animation: fade-in .3s var(--ease); }
@keyframes fade-in { from { opacity: 0; } }

.sheet form {
  display: grid;
  gap: 16px;
  padding: 0 20px calc(20px + env(safe-area-inset-bottom));
}
.handle {
  width: 32px;
  height: 4px;
  margin: 14px auto -6px;
  border-radius: 2px;
  background: var(--outline);
  opacity: .5;
}
.sheet-head { display: flex; align-items: center; gap: 8px; margin-right: -8px; }
.sheet-head h2 {
  flex: 1;
  margin: 0;
  font-size: 26px;
  line-height: 32px;
  font-weight: 560;
  font-variation-settings: 'ROND' 100;
  outline: none;   /* focus lands here when a sheet opens, so no ring on the X button */
}

/* Filled text fields */
.field {
  display: grid;
  padding: 8px 16px 4px;
  border-radius: 14px 14px 4px 4px;
  background: var(--surface-container-highest);
  box-shadow: inset 0 -1px 0 var(--on-surface-variant);
  transition: box-shadow .2s var(--ease);
}
.field:focus-within { box-shadow: inset 0 -2px 0 var(--primary); }
.field-label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 550;
  color: var(--on-surface-variant);
}
.field:focus-within .field-label { color: var(--primary); }
.field input, .field textarea {
  width: 100%;
  min-height: 32px;
  padding: 2px 0 6px;
  border: none;
  outline: none;
  background: none;
  font-size: 16px;
  line-height: 24px;
  color: var(--on-surface);
}
.field textarea { resize: none; field-sizing: content; min-height: 56px; }
.field input::placeholder, .field textarea::placeholder { color: var(--on-surface-variant); opacity: .65; }
.field input::-webkit-calendar-picker-indicator { opacity: .6; }
/* Two fields side by side. They share the width evenly even when a date or a time would like more
   (otherwise the form grows wider than a narrow phone). */
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.row2 .field { min-width: 0; padding-left: 12px; padding-right: 8px; }
.row2 .field.with-btn { padding-right: 2px; gap: 0; }
.row2 .field input { min-width: 0; }
.hint { margin: -8px 16px 0; font-size: 12px; line-height: 16px; color: var(--on-surface-variant); }

/* Category chips */
.choice-chips, .swatches { border: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.choice-chips legend, .swatches legend {
  margin-bottom: 8px;
  padding: 0 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 550;
  color: var(--on-surface-variant);
}
.choice-chips label, .swatches label { position: relative; }
.choice-chips input, .swatches input { position: absolute; opacity: 0; pointer-events: none; }
.choice-chips span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px 0 10px;
  border-radius: 10px;
  border: 1px solid var(--outline-variant);
  font-size: 14px;
  font-weight: 550;
  color: var(--on-surface-variant);
  cursor: pointer;
  transition: border-radius .35s var(--ease-spring), background-color .25s var(--ease);
}
.choice-chips span .icon { width: 18px; height: 18px; color: oklch(var(--cat-on-l) var(--cat-on-c) var(--h)); }
.choice-chips input:checked + span {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  border-color: transparent;
  border-radius: 18px;
}
.choice-chips input:focus-visible + span, .swatches input:focus-visible + span {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Trip colors: circles that morph into rounded squares when picked */
.swatches { gap: 9px; }
.swatches span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  cursor: pointer;
  transition: border-radius .45s var(--ease-spring);
}
.swatches span .icon { opacity: 0; transform: scale(.3); transition: opacity .2s, transform .45s var(--ease-spring); }
.swatches input:checked + span { border-radius: 14px; }
.swatches input:checked + span .icon { opacity: 1; transform: none; }

.sheet-actions { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.sheet-actions .btn.text { margin-left: -12px; }
/* The long forms (a plan, a trip): Save stays in view at the bottom while the fields scroll under it */
#item-form > .sheet-actions, #trip-form > .sheet-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: -4px -20px calc(-20px - env(safe-area-inset-bottom));
  padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
  background: var(--surface-container-low);
}
#item-form > .sheet-actions::before, #trip-form > .sheet-actions::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 16px;
  background: linear-gradient(to top, var(--surface-container-low), transparent);
  pointer-events: none;
}
.spacer { flex: 1; }

/* ---------- Centered dialog ---------- */
dialog.alert {
  width: min(100% - 48px, 380px);
  padding: 24px;
  border: none;
  border-radius: 28px;
  background: var(--surface-container-high);
  color: var(--on-surface);
}
dialog.alert[open] { animation: alert-in .4s var(--ease-decel); }
@keyframes alert-in { from { opacity: 0; transform: scale(.88); } }
.alert-icon { margin: 0 auto 16px; color: var(--primary); }
.alert h2 {
  margin: 0 0 16px;
  text-align: center;
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  outline: none;
}
.alert p { margin: 0 0 24px; color: var(--on-surface-variant); font-size: 14px; line-height: 20px; }
.alert-actions { display: flex; justify-content: flex-end; gap: 8px; margin-right: -8px; }

/* ---------- Travel time between two plans ---------- */
.group > li.leg { background: none; border-radius: 0; overflow: visible; }
.group > li.leg + li { border-top-left-radius: 24px; border-top-right-radius: 24px; }
.group > li:has(+ li.leg) { border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }
.leg-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 2px 26px;
  padding: 4px 12px 4px 8px;
  border-radius: 14px;
  color: var(--on-surface-variant);
  font-size: 13px;
  line-height: 18px;
  font-weight: 550;
  text-decoration: none;
}
.leg-link .icon { width: 18px; height: 18px; color: var(--primary); }
.leg-link .open { width: 14px; height: 14px; opacity: .6; color: inherit; }

/* ---------- Day suggestions (swipeable cards) ---------- */
.suggest { margin-top: 14px; }
.suggest-head { display: flex; align-items: center; gap: 8px; padding-left: 4px; }
.suggest-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 650;
  color: var(--on-surface-variant);
}
.suggest-title .icon { width: 18px; height: 18px; color: var(--primary); }
.suggest-row {
  display: flex;
  gap: 10px;
  margin: 2px -16px 0;
  padding: 2px 16px 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  scrollbar-width: none;
}
.s-card {
  flex: none;
  width: 250px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 12px;
  border-radius: 24px;
  border: 1px solid var(--outline-variant);
  background: var(--surface);
  animation: card-in .5s var(--ease-decel) backwards;
}
.s-card:nth-child(2) { animation-delay: .05s; }
.s-card:nth-child(3) { animation-delay: .1s; }
@keyframes card-in { from { opacity: 0; transform: translateX(24px); } }
.s-name { margin: 0; font-size: 16px; line-height: 21px; font-weight: 600; }
.s-why, .s-blurb { margin: 0; font-size: 13px; line-height: 18px; color: var(--on-surface-variant); }
.s-why { display: flex; align-items: center; gap: 4px; color: var(--primary); font-weight: 600; }
.s-why .icon { width: 16px; height: 16px; }
.s-why span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.s-blurb {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.s-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.tag .icon { width: 14px; height: 14px; }
.btn.sm { height: 36px; padding: 0 16px 0 12px; border-radius: 18px; }
.s-foot .btn { margin-left: auto; }

/* ---------- Segmented buttons (Ideas tabs, Appearance) ---------- */
.segmented {
  display: flex;
  margin: 0 0 16px;
  border: 1px solid var(--outline);
  border-radius: 22px;
  overflow: hidden;
}
.segmented button {
  flex: 1;
  min-width: 0;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--on-surface);
  white-space: nowrap;
  transition: background-color .25s var(--ease);
}
.segmented button + button { border-left: 1px solid var(--outline); }
.segmented button .icon { width: 18px; height: 18px; }
.segmented button[aria-pressed="true"] { background: var(--secondary-container); color: var(--on-secondary-container); }
.row .segmented { margin: 0; flex: 1; }
/* Settings: a choice with its name in front (Theme, Units, Date, Time) */
.row.pick { min-height: 64px; gap: 12px; }
.pick-label { flex: none; width: 52px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--on-surface-variant); }
.row.pick .segmented button { height: 40px; }

/* ---------- Explore filter chips ---------- */
.filter-row {
  display: flex;
  gap: 8px;
  margin: 0 -16px 14px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--outline-variant);
  color: var(--on-surface-variant);
  font-size: 14px;
  font-weight: 550;
  transition: border-radius .35s var(--ease-spring), background-color .25s var(--ease);
}
.filter-chip .icon { width: 18px; height: 18px; }
.filter-chip[aria-pressed="true"] {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  border-color: transparent;
  border-radius: 17px;
}
.place .add-btn { margin: 16px 12px 0 0; }
.place .item-main { padding-right: 12px; }
.add-btn.added { background: var(--primary); color: var(--on-primary); }
.place .tag { margin-top: 6px; justify-self: start; }

/* ---------- Switch ---------- */
.switch {
  flex: none;
  position: relative;
  width: 52px;
  height: 32px;
  border-radius: 16px;
  border: 2px solid var(--outline);
  background: var(--surface-container-highest);
  transition: background-color .25s var(--ease), border-color .25s;
}
.switch::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--outline);
  transition: all .35s var(--ease-spring);
}
.switch.on, :checked + .switch { background: var(--primary); border-color: var(--primary); }
.switch.on::after, :checked + .switch::after { left: 22px; top: 2px; width: 24px; height: 24px; background: var(--on-primary); }
/* A switch in a form (a real checkbox, drawn as the switch next to it) */
.switch-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 4px 0 16px; cursor: pointer; }
.switch-row > span:first-child { flex: 1; font-size: 16px; line-height: 24px; }
.switch-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-row input:focus-visible + .switch { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- Trip card buttons ---------- */
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px 0 12px;
  border-radius: 18px;
  background: color-mix(in oklab, var(--on-primary-container) 10%, transparent);
  color: var(--on-primary-container);
  font-size: 14px;
  font-weight: 650;
  transition: border-radius .3s var(--ease);
}
.hero-btn:active { border-radius: 10px; }
.hero-btn .icon { width: 18px; height: 18px; }

/* First start: no trip yet, ask where to go. */
.welcome { padding-bottom: 20px; }
.welcome .hero-title { font-size: 40px; line-height: 46px; margin-bottom: 20px; }
.where-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 56px;
  padding: 0 20px;
  border-radius: 28px;
  background: var(--surface);
  color: var(--on-surface-variant);
  font-size: 16px;
  text-align: left;
  box-shadow: 0 1px 3px rgb(0 0 0 / .12);
  transition: border-radius .3s var(--ease);
}
.where-btn:active { border-radius: 16px; }
.where-btn .icon { color: var(--primary); }
.welcome-note {
  margin: 0 8px;
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

/* ---------- Day tools (Map / Optimize route) ---------- */
.day-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0 4px; }
button.assist-chip { background: none; }

/* ---------- Map sheet ---------- */
dialog.map-sheet { height: 94dvh; max-height: 94dvh; overflow: hidden; }
dialog.map-sheet[open] { display: flex; flex-direction: column; }
.map-sheet .handle { flex: none; margin: 12px auto 8px; }
.map-head { padding: 0 12px 8px 20px; margin: 0; }
.map-heading { flex: 1; min-width: 0; }
.map-heading h2 {
  margin: 0;
  font-size: 24px;
  line-height: 30px;
  font-weight: 560;
  font-variation-settings: 'ROND' 100;
  outline: none;
}
.map-sub { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--on-surface-variant); }
.map {
  flex: none;
  height: 46dvh;
  margin: 0 12px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--surface-container-highest);
  isolation: isolate;
}
.map-body { flex: 1; overflow-y: auto; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.map-empty {
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  color: var(--on-surface-variant);
  font-size: 14px;
}
.map-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.map-actions .btn { text-decoration: none; }
.map-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 6px 6px 6px 16px;
  border-radius: 16px;
  background: var(--tertiary-container);
  color: var(--on-tertiary-container);
  font-size: 14px;
  line-height: 20px;
  animation: view-in .35s var(--ease-decel);
}
.map-note span { flex: 1; padding: 6px 0; }
.map-note .btn.text { color: inherit; }
.map-hint, .map-credit { margin: 12px 4px 0; font-size: 12px; line-height: 16px; color: var(--on-surface-variant); }
.legend { display: flex; flex-wrap: wrap; gap: 8px; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; }

/* Numbered list of stops */
.stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.stop {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 8px 12px;
  border-radius: 16px;
  text-align: left;
}
.stop-num {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.stop.off .stop-num { background: var(--surface-container-highest); color: var(--on-surface-variant); }
.stop.off .stop-num .icon, .stop-num.base .icon { width: 18px; height: 18px; }
.stop-num.base { background: var(--tertiary, #7d5260); }     /* a stay: the hotel pin, not a number */
.stop-text { flex: 1; min-width: 0; display: grid; }
.stop-title { font-size: 15px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
.stop-sub { font-size: 13px; line-height: 18px; color: var(--on-surface-variant); overflow-wrap: anywhere; }

/* Map pins (teardrop with the stop number) */
.pin { background: none; border: none; }
.pin-shape {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgb(0 0 0 / .35);
}
.pin-shape b { transform: rotate(45deg); color: #fff; font: 700 13px/1 var(--font); }

/* Leaflet adjustments (its own stylesheet loads later, so these use #map) */
#map.leaflet-container { font: 13px/1.4 var(--font); background: var(--surface-container-highest); }
#map .leaflet-control-zoom { border: none; box-shadow: var(--elev-3); border-radius: 14px; overflow: hidden; }
#map .leaflet-control-zoom a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: var(--surface-container-high);
  color: var(--on-surface);
  border-color: var(--outline-variant);
}
#map .leaflet-popup-content-wrapper, #map .leaflet-popup-tip {
  background: var(--surface-container-high);
  color: var(--on-surface);
  box-shadow: var(--elev-3);
}
#map .leaflet-popup-content-wrapper { border-radius: 14px; }
#map .leaflet-popup-content { margin: 10px 14px; font-size: 13px; line-height: 18px; }
#map .leaflet-control-attribution { background: color-mix(in oklab, var(--surface) 80%, transparent); color: var(--on-surface-variant); font-size: 10px; }
#map .leaflet-control-attribution a { color: inherit; }

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Trip place search ---------- */
.place-chosen {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -8px 4px 0;
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 20px;
}
.place-chosen .icon { width: 18px; height: 18px; flex: none; color: var(--primary); }
.place-chosen small { display: block; font-size: 12px; line-height: 16px; }
.place-chosen .kind { flex: none; }
.place-chosen .kind {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 10px;
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  font-size: 12px;
  font-weight: 600;
}
.place-list {
  list-style: none;
  margin: -8px 0 0;
  padding: 4px 0;
  border-radius: 16px;
  background: var(--surface-container-high);
}
.place-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 8px 16px;
  text-align: left;
}
.place-opt .icon { color: var(--primary); }
.place-opt .row-title { font-size: 16px; line-height: 22px; }
.place-note { padding: 14px 16px; color: var(--on-surface-variant); font-size: 14px; }

/* Explore: which place the guide is for */
.place-row { display: flex; align-items: center; gap: 2px; margin: -8px -6px 12px 4px; }
.place-row .btn.text { padding: 0 10px; gap: 6px; }
.place-pin {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  color: var(--on-surface-variant);
  font-size: 14px;
  font-weight: 550;
}
.place-pin .icon { width: 18px; height: 18px; color: var(--primary); flex: none; }
.place-pin span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.guide-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px 20px;
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 20px;
}
.guide-note .icon { width: 18px; height: 18px; color: var(--primary); animation: pulse 1.4s var(--ease) infinite alternate; }
@keyframes pulse { to { opacity: .35; } }

/* ---------- Sign-in sheet ---------- */
.sheet-text { margin: -4px 4px 0; color: var(--on-surface-variant); font-size: 14px; line-height: 20px; }
.field.with-btn { display: flex; align-items: center; gap: 4px; padding-right: 4px; }
.field-main { flex: 1; display: grid; min-width: 0; }
#time-clear { width: 36px; height: 36px; }
#time-clear .icon { width: 20px; height: 20px; }
.form-error {
  margin: -4px 4px 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--error-container);
  color: var(--on-error-container);
  font-size: 14px;
  line-height: 20px;
}
.btn.forgot { justify-self: center; }
.btn:disabled { opacity: .5; pointer-events: none; }

/* ---------- Weather in each day's header (weather.js) ---------- */
.wx {
  flex: none;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 4px;
  padding: 4px 10px 4px 6px;
  border-radius: 16px;
  background: var(--surface-container);
  color: var(--on-surface);
}
.wx > .icon { width: 26px; height: 26px; color: var(--primary); }
.wx.wet > .icon { color: oklch(from var(--primary) l .12 250); }
.wx-t { display: grid; line-height: 16px; text-align: right; }
.wx-t b { font-size: 15px; font-weight: 650; }
.wx-t small { font-size: 12px; color: var(--on-surface-variant); }
.wx-rain {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 650;
  color: var(--on-surface-variant);
}
.wx-rain .icon { width: 12px; height: 12px; }

/* ---------- Opening hours on a plan (hours.js) ---------- */
.item-hours {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 13px;
  line-height: 18px;
  color: var(--on-surface-variant);
}
.item-hours .icon { width: 16px; height: 16px; flex: none; }
.item-hours.warn { color: var(--error); font-weight: 600; }
/* "Book ahead": an amber label, whatever the trip's color, so it isn't taken for part of the theme. */
.item-hours.book {
  width: fit-content;
  padding: 3px 9px 3px 7px;
  border-radius: 10px;
  background: oklch(.9 .1 85);
  color: oklch(.34 .07 70);
  font-weight: 650;
}
html[data-theme="dark"] .item-hours.book { background: oklch(.42 .08 80); color: oklch(.95 .06 90); }

/* ---------- Drag to plan (drag.js) ---------- */
[data-drag] { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.drag-src { opacity: .35; }
.drag-ghost {
  position: fixed;
  z-index: 50;
  margin: 0;
  list-style: none;
  pointer-events: none;
  border-radius: 20px;
  background: var(--surface-container-highest);
  box-shadow: var(--elev-3);
  opacity: .95;
  will-change: transform;
}
body.dragging { cursor: grabbing; }
body.dragging .fab, body.dragging .ai-fab, body.dragging .snackbar { opacity: 0; pointer-events: none; }
.group > li.drop-line {
  height: 4px;
  margin: 2px 16px;
  border-radius: 2px;
  background: var(--primary);
}
.drop-on { outline: 2px solid var(--primary); outline-offset: 2px; }
.empty-day.drop-on { border-color: var(--primary); color: var(--primary); outline: none; }

.idea-tray { margin: 0 0 24px; }
.tray-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--on-surface-variant);
}
.tray-head .icon { width: 18px; height: 18px; color: var(--primary); }
.tray-head b { color: var(--on-surface); font-weight: 650; }
.tray-row {
  list-style: none;
  display: flex;
  gap: 8px;
  margin: 0 -16px;
  padding: 2px 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tray-row::-webkit-scrollbar { display: none; }
.idea-chip { flex: none; border-radius: 20px; }
.idea-chip button {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  height: 48px;
  padding: 0 16px 0 6px;
  border-radius: 20px;
  background: var(--surface-container);
  font-size: 14px;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.idea-chip .avatar { width: 36px; height: 36px; border-radius: 14px; }
.idea-chip .avatar .icon { width: 20px; height: 20px; }
.idea-tray.drop-on { outline-offset: 6px; border-radius: 20px; }

/* ---------- Essentials sheet (essentials.js) ---------- */
dialog.info-sheet { height: 94dvh; }
.info-inner { display: flex; flex-direction: column; height: 100%; }
.info-inner .handle, .ai-inner .handle { flex: none; margin: 12px auto 8px; }     /* clear of the title */
.info-inner .sheet-head { padding: 0 12px 8px 20px; margin: 0; }
.info-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 16px calc(20px + env(safe-area-inset-bottom));
}
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 20px; }
.fact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 20px;
  background: var(--surface-container-high);
  color: var(--on-surface);
  text-decoration: none;
}
a.fact { background: var(--error-container); color: var(--on-error-container); }
a.fact .fact-icon { background: var(--error); color: var(--error-container); }
.fact-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--primary-container);
  color: var(--on-primary-container);
}
.fact-icon .icon { width: 20px; height: 20px; }
.fact-text { display: grid; min-width: 0; }
.fact-label { font-size: 12px; line-height: 16px; font-weight: 650; opacity: .75; }
.fact-value { font-size: 15px; line-height: 20px; font-weight: 550; overflow-wrap: anywhere; }
.tip { padding: 16px; margin-bottom: 8px; border-radius: 24px; background: var(--surface-container); }
.tip h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 16px; line-height: 22px; font-weight: 650; }
.tip h3 .icon { width: 20px; height: 20px; color: var(--primary); }
.tip p { margin: 0 0 10px; font-size: 14px; line-height: 20px; color: var(--on-surface-variant); }
.tip-links { display: flex; flex-wrap: wrap; gap: 8px; }
.tip-links:empty { display: none; }
.tip p:last-child { margin-bottom: 0; }
.tip p b { color: var(--on-surface); font-weight: 650; }

/* ---------- Voting for what comes next (vote.js) ---------- */
.vote-intro { margin: 0 4px 12px; }
.vote-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  font-size: 14px;
  line-height: 20px;
}
.vote-note span { flex: 1; }
.vote-note .icon { width: 20px; height: 20px; }
.vote-note.bad { background: var(--error-container); color: var(--on-error-container); }
.vote-list { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.vote-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 20px; background: var(--surface-container); transition: background-color .2s var(--ease); }
.vote-item[data-action] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vote-item.voted { background: var(--primary-container); color: var(--on-primary-container); }
.vote-item.voted .vote-sub, .vote-item.voted .vote-tag { color: inherit; }
.vote-btn {
  flex: none;
  width: 52px;
  min-height: 56px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 1px solid var(--outline);
  border-radius: 14px;
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 18px;
  font-weight: 650;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-radius .3s var(--ease);
}
.vote-btn .icon { width: 20px; height: 20px; }
.vote-btn[aria-pressed="false"] .icon { transform: rotate(-90deg); }   /* the arrow, pointing up */
.vote-btn[aria-pressed="true"] { background: var(--primary); border-color: transparent; color: var(--on-primary); }
.vote-btn:active { border-radius: 22px; }
.vote-btn:disabled { opacity: .5; pointer-events: none; }
.vote-text { display: grid; gap: 2px; min-width: 0; padding-top: 2px; }
.vote-title { font-size: 16px; line-height: 22px; font-weight: 650; overflow-wrap: anywhere; }
.vote-sub { font-size: 14px; line-height: 20px; color: var(--on-surface-variant); overflow-wrap: anywhere; }
.vote-tag { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--primary); }
.vote-tag .btn { height: 28px; font-size: 12px; }
.sheet .vote-form { padding: 0; }
.vote-form h3 { margin: 0 4px -4px; font-size: 18px; line-height: 24px; font-weight: 650; }
.vote-hint { margin: -6px 4px 0; font-size: 12px; line-height: 16px; color: var(--on-surface-variant); }
.vote-suggest { display: flex; margin: 0 auto 4px; }
/* The bottom of the sheet: what was saved, and the way out */
.vote-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) 20px;
  border-top: 1px solid var(--outline-variant);
}
.vote-status { flex: 1; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; line-height: 20px; color: var(--on-surface-variant); }
.vote-status.on { color: var(--primary); font-weight: 650; }
.vote-status .icon { flex: none; width: 20px; height: 20px; }

/* ---------- Planning a trip together (share.js) ---------- */
dialog.fit-sheet { height: fit-content; }      /* as tall as what it holds */
.trip-chip .icon { margin: 0 -4px 0 -2px; opacity: .8; }
.welcome-join { display: flex; margin: 12px auto 0; }
.share-together .btn { margin-top: 2px; }
.share-people { display: grid; gap: 4px; margin: 4px 0 14px; padding: 0; list-style: none; }
.share-people li { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.share-people .row-title { overflow-wrap: anywhere; }
.share-people .btn { flex: none; margin: 0; }
.tip p.share-url {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-container-highest);
  color: var(--on-surface);
  font-size: 13px;
  line-height: 18px;
  overflow-wrap: anywhere;
  user-select: all;
}
.share-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.share-actions .btn { margin: 0; }
.tip p.share-hint { font-size: 13px; line-height: 18px; }
.share-leave { margin-left: -12px; }
/* The list for everyone on the trip, above the personal checklist */
.trip-list .label-row { margin-top: 4px; }
.trip-list .group-label { display: flex; align-items: center; gap: 6px; }
.trip-list .supporting { margin: 0 16px 12px; }
.pack-ideas .supporting { margin: -4px 16px 10px; }
.pack-ideas .supporting .icon { display: inline-block; vertical-align: -4px; }
/* Dragging a line from one list to the other (drag.js): where it can land */
[data-list].drop-on, [data-list] .add-bar.drop-on { outline-offset: 4px; border-radius: 28px; }
.task[data-drag] .task-text { cursor: inherit; }

/* ---------- Report a problem ---------- */
.report-more { margin: -4px 4px 0; font-size: 13px; line-height: 18px; color: var(--on-surface-variant); }
.report-more summary { cursor: pointer; padding: 4px 0; }
.report-more pre {
  margin: 6px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-container);
  font: 12px/16px ui-monospace, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- What's new (the list of versions) ---------- */
.version h3 { margin-bottom: 2px; }
.tip p.version-when { margin-bottom: 8px; font-size: 13px; line-height: 18px; }
.older-versions { display: flex; margin: 12px auto 4px; }
.version ul { display: grid; gap: 4px; margin: 0; padding-left: 20px; font-size: 14px; line-height: 20px; color: var(--on-surface-variant); }

/* ---------- The practice pad (hidden in "What's new") ---------- */
#about-title { user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.pad-wrap { display: grid; justify-items: center; gap: 12px; padding: 12px 0; }
.pad {
  width: min(100%, 420px);
  height: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pad [data-pad] { cursor: pointer; }
.pad text { fill: #fff; pointer-events: none; }
.pad-stick, .pad-ring { pointer-events: none; }
.pad-ring { fill: none; stroke: #fff; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pad-note { margin: 0; font-size: 14px; line-height: 20px; color: var(--on-surface-variant); }

/* ---------- Self-check results (selfcheck.js) ---------- */
.selfcheck-sum { display: flex; align-items: center; gap: 10px; margin: 4px 4px 16px; font-weight: 650; color: var(--primary); }
.selfcheck-sum.bad { color: var(--error); }
.selfcheck { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; }
.selfcheck li { display: flex; align-items: flex-start; gap: 10px; color: var(--on-surface-variant); }
.selfcheck .icon { width: 20px; height: 20px; color: var(--primary); }
.selfcheck li.bad, .selfcheck li.bad .icon { color: var(--error); }
.selfcheck small { display: block; font-size: 12px; line-height: 16px; overflow-wrap: anywhere; }

/* ---------- Tap a suggestion for the whole description ---------- */
.s-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: calc(100% + 16px);
  margin: -8px -8px 0;
  padding: 8px;
  border-radius: 16px;
  text-align: left;
}
.s-body .s-name, .s-body .s-why, .s-body .s-blurb { display: block; }
.s-body .s-why { display: flex; }
.s-body .s-blurb { display: -webkit-box; }
.more-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin-top: 2px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 650;
  color: var(--primary);
}
.more-link .icon { width: 14px; height: 14px; }
.item.place .item-main { color: inherit; }

.place-body { display: grid; gap: 14px; padding: 8px 20px calc(20px + env(safe-area-inset-bottom)); }
.pi-head { display: flex; align-items: flex-start; gap: 14px; margin-right: -8px; }
.pi-head .avatar { margin-top: 4px; }
.pi-heading { flex: 1; min-width: 0; }
.pi-heading h2 {
  margin: 2px 0 0;
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  font-variation-settings: 'ROND' 100;
  overflow-wrap: anywhere;
  outline: none;
}
.pi-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pi-text { margin: 0; font-size: 16px; line-height: 24px; color: var(--on-surface); }
.pi-hours { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14px; line-height: 20px; color: var(--on-surface-variant); }
.pi-hours .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--primary); }
.pi-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pi-added { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 600; }
.pi-added .icon { width: 20px; height: 20px; }

/* ---------- AI assistant (assistant.js) ---------- */
dialog.ai-sheet { height: 94dvh; }
.ai-inner { display: flex; flex-direction: column; height: 100%; }
.ai-head { padding: 0 12px 8px 20px; margin: 0; }
.ai-heading { flex: 1; min-width: 0; }
.ai-heading h2 { margin: 0; font-size: 26px; line-height: 32px; font-weight: 560; font-variation-settings: 'ROND' 100; outline: none; }
.ai-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 16px 12px;
}
.ai-intro p { margin: 4px 4px 14px; color: var(--on-surface-variant); font-size: 15px; line-height: 22px; }
.ai-starters { display: flex; flex-wrap: wrap; gap: 8px; }
.msg { max-width: 88%; }
.msg p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 15px; line-height: 22px; }
.msg.user { align-self: flex-end; padding: 10px 14px; border-radius: 20px 20px 6px 20px; background: var(--primary-container); color: var(--on-primary-container); }
.msg.ai { align-self: flex-start; display: grid; gap: 8px; padding: 10px 14px; border-radius: 20px 20px 20px 6px; background: var(--surface-container-high); }
.msg.thinking p { display: flex; align-items: center; gap: 8px; color: var(--on-surface-variant); }
.msg.thinking .icon { width: 18px; height: 18px; color: var(--primary); animation: pulse 1.4s var(--ease) infinite alternate; }
.msg-model { font-size: 11px !important; line-height: 14px !important; color: var(--on-surface-variant); opacity: .8; }
.proposal { padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--outline-variant); }
.proposal.applied { border-color: var(--primary); }
.proposal.dismissed, .proposal.undone { opacity: .6; }
.proposal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px !important; font-size: 13px !important; font-weight: 650; color: var(--primary); }
.proposal-head .icon { width: 16px; height: 16px; }
.proposal ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.proposal li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 20px; }
.proposal li .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--primary); }
.proposal-none { font-size: 14px !important; color: var(--on-surface-variant); }
.proposal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.ai-error { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--error-container); color: var(--on-error-container); font-size: 14px; line-height: 20px; }
.ai-error .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.ai-paste { padding: 14px; border-radius: 20px; background: var(--surface-container); }
.ai-paste-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-weight: 650; }
.ai-paste-title .icon { width: 18px; height: 18px; color: var(--primary); }
.ai-paste ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 14px; line-height: 20px; }
.ai-paste li .btn { margin-top: 6px; }
.ai-paste a { color: var(--primary); font-weight: 600; }
.ai-paste textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
  background: var(--surface-container-highest);
  font-size: 14px;
  resize: vertical;
}
.ai-paste-toggle { align-self: center; }
.sheet .ai-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--outline-variant);
}
.ai-form textarea {
  flex: 1;
  min-height: 48px;
  max-height: 160px;
  padding: 12px 16px;
  border: none;
  border-radius: 24px;
  background: var(--surface-container-highest);
  font-size: 16px;
  line-height: 24px;
  resize: none;
  field-sizing: content;
}
.ai-form textarea:focus { outline: 2px solid var(--primary); }
.ai-form .icon-btn { width: 48px; height: 48px; flex: none; }
.ai-form .icon-btn:disabled { opacity: .4; pointer-events: none; }
.ai-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 4px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--surface-container);
  color: var(--on-surface-variant);
  font-size: 13px;
  line-height: 18px;
}
.ai-notice .icon { width: 18px; height: 18px; flex: none; color: var(--primary); }

/* A day getting around differently from the rest of the trip */
.assist-chip.selected { background: var(--secondary-container); color: var(--on-secondary-container); border-color: transparent; }

/* ---------- Now & next (today.js) ---------- */
.now-card {
  display: grid;
  gap: 12px;
  margin: -12px 0 24px;
  padding: 16px;
  border-radius: 24px;
  background: var(--tertiary-container);
  color: var(--on-tertiary-container);
}
.now-row { display: grid; gap: 2px; }
.now-label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.now-label .icon { width: 16px; height: 16px; }
.now-title { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.now-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; font-size: 14px; line-height: 20px; }
.now-sub .icon { width: 18px; height: 18px; }
.now-late { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--error); }
.now-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.now-card .assist-chip { background: color-mix(in oklab, var(--on-tertiary-container) 8%, transparent); color: inherit; border-color: transparent; }
.now-card .assist-chip .icon { color: inherit; }

/* Home base legs and map pin */
.leg-base { max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pin-shape.base { background: var(--tertiary, #7d5260); }
.pin-shape.base .icon { width: 18px; height: 18px; color: #fff; transform: rotate(45deg); }

/* Near me: places that are closed now are dimmed */
.item.place.closed .item-main { opacity: .6; }

/* ---------- Photos of places ---------- */
.avatar.thumb { position: relative; overflow: hidden; width: 56px; height: 56px; border-radius: 16px; }
.avatar.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The top of a suggestion card: the photo, over the type's color and icon (which show when there is none) */
.s-photo {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(100% + 16px);
  height: 96px;
  margin: -8px -8px 2px;
  border-radius: 16px 16px 8px 8px;
  overflow: hidden;
  background: oklch(var(--cat-l) var(--cat-c) var(--h));
  color: oklch(var(--cat-on-l) var(--cat-on-c) var(--h));
}
.s-photo > .icon { width: 32px; height: 32px; opacity: .85; }
.s-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-photo .tag { position: absolute; top: 8px; right: 8px; background: var(--surface); }
.pi-figure { margin: 4px -4px 0; }
.pi-photo { display: block; width: 100%; max-height: 240px; border-radius: 20px; object-fit: cover; background: var(--surface-container-high); }
.pi-figure figcaption { margin-top: 4px; font-size: 11px; line-height: 14px; color: var(--on-surface-variant); text-align: right; }
.pi-figure:not(:has(img)) { display: none; }
/* With a photo at the top of the sheet, the close button sits on its corner */
.place-body { position: relative; }
.place-body:has(.pi-figure img) .pi-head { margin-right: 0; }
.place-body:has(.pi-figure img) .pi-head [data-close] {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  background: rgb(0 0 0 / .5);
  color: #fff;
}

/* ---------- Tickets & bookings (files.js) ---------- */
.files-field { display: grid; gap: 6px; }
.files-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-left: 4px; }
.file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.file-list:empty { display: none; }
.file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 6px 14px;
  border-radius: 14px;
  background: var(--surface-container-high);
  color: var(--on-surface);
  text-decoration: none;
  font-size: 14px;
}
.file-row > .icon { width: 20px; height: 20px; flex: none; color: var(--primary); }
.file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { flex: none; color: var(--on-surface-variant); font-size: 12px; }
.file-open { padding: 14px; margin-bottom: 8px; }
.file-line { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.file-line .file-open { flex: 1; min-width: 0; margin-bottom: 0; }
.file-view { margin: 0 0 16px; }
.file-view img { display: block; width: 100%; border-radius: 16px; background: #fff; }
.file-view figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--on-surface-variant); }

/* ---------- Packing suggestions (packing.js) ---------- */
.pack-ideas { margin: 4px 0 20px; }
.pack-ideas .group-label { display: flex; align-items: center; gap: 6px; }
.pack-idea { display: flex; align-items: center; padding-right: 4px; }
.pack-add { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 12px 8px 12px 18px; text-align: left; }
.pack-add > .icon { color: var(--primary); flex: none; }

/* ---------- AI Assistant: bottom buttons and voice ---------- */
.ai-bottom { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
#ai-mic.listening { background: var(--error-container); color: var(--on-error-container); animation: pulse 1s var(--ease) infinite alternate; }
.place-row .btn { white-space: nowrap; flex: none; }

/* Drag hint: "hold" on touch screens, plain "drag" with a mouse */
.mouse-only { display: none; }
@media (hover: hover) and (pointer: fine) {
  .touch-only { display: none; }
  .mouse-only { display: inline; }
}

/* =========================================================
   Desktop layout: applies by itself on wide windows (computers, big tablets).
   - From 900px: a sidebar on the left (sections, AI Assistant, the trip's days),
     one reading-width column for the content, sheets as centered windows.
   - From 1200px, on the Plan tab: the trip map stays in view on the right.
   Phones keep everything above as is.
   ========================================================= */
.side-extra, .map-pane { display: none; }
.item.flash { animation: flash 1.6s var(--ease); }
@keyframes flash { 0%, 40% { box-shadow: inset 0 0 0 2px var(--primary); } }

@media (min-width: 900px) {
  :root { --rail-w: 248px; --content-w: 720px; }
  body { padding-left: var(--rail-w); padding-bottom: 64px; }

  /* Sidebar */
  .navbar {
    top: 0;
    right: auto;
    width: var(--rail-w);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 2px;
    padding: 92px 12px 16px;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .navbar > button {
    flex: none;
    max-width: none;
    height: 48px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 16px;
    border-radius: 24px;
    font-size: 14px;
    letter-spacing: .01em;
  }
  .navbar > button .nav-ind { width: 24px; height: 24px; }
  .navbar > button .nav-ind::before { display: none; }
  .navbar > button.active { background: var(--secondary-container); color: var(--on-secondary-container); }

  .side-extra { display: grid; gap: 4px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--outline-variant); }
  .side-extra button {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    max-width: none;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 40px;
    padding: 0 16px;
    border-radius: 20px;
    color: var(--on-surface-variant);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
  }
  .side-extra .side-ai { height: 48px; border-radius: 24px; color: var(--primary); }
  .side-label {
    margin: 14px 16px 4px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .side-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .side-days button span { flex: 1; }
  .side-days button.today { color: var(--primary); }
  .side-days small {
    min-width: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--surface-container-highest);
    font-size: 12px;
    line-height: 22px;
    text-align: center;
  }

  /* "New plan" sits at the top of the sidebar */
  .fab, body.snack-open .fab {
    z-index: 10;
    left: 16px;
    right: auto;
    top: 20px;
    bottom: auto;
    width: calc(var(--rail-w) - 32px);
    justify-content: center;
    box-shadow: none;
  }
  .fab.collapsed { padding: 0 22px 0 16px; gap: 12px; }
  .fab.collapsed .fab-label { max-width: 160px; opacity: 1; }
  body.fabs-away .fab:not(:focus-visible) { transform: none; opacity: 1; pointer-events: auto; }
  /* The AI Assistant is in the sidebar instead */
  .ai-fab { display: none; }

  /* One column, at a comfortable reading width */
  .appbar-inner, main { max-width: var(--content-w); padding-left: 24px; padding-right: 24px; }
  .trip-tabs { flex-wrap: wrap; overflow: visible; }
  .tray-row { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0 4px; }
  .idea-chip button { max-width: 360px; }
  .suggest-row { scrollbar-width: thin; margin: 2px 0 0; padding: 2px 0 8px; scroll-padding: 0; }
  .s-card { flex: 1 0 200px; width: auto; max-width: 280px; }
  .filter-row { flex-wrap: wrap; overflow: visible; }
  .leg-base { max-width: 220px; }
  .snackbar { left: calc(var(--rail-w) + 24px); right: auto; width: min(560px, 100vw - var(--rail-w) - 48px); bottom: 24px; margin: 0; }

  /* Sheets become centered windows */
  dialog.sheet { margin: auto; max-width: 560px; max-height: 88dvh; border-radius: 28px; }
  dialog.sheet[open] { animation: alert-in .3s var(--ease-decel); }
  dialog.sheet .handle { display: none; }
  .sheet form, .place-body { padding-top: 20px; }
  .place-body:has(.pi-figure img) .pi-head [data-close] { top: 32px; }
  .sheet .sheet-head { padding-top: 16px; }
  .sheet form .sheet-head { padding-top: 0; }
  dialog.info-sheet { max-width: 680px; height: min(88dvh, 820px); }
  dialog.fit-sheet { max-width: 560px; height: fit-content; }

  /* The map as a window (when it isn't docked): the map on the left, the stops on the right */
  dialog.map-sheet { max-width: min(1200px, 94vw); height: 88dvh; max-height: 88dvh; }
  dialog.map-sheet[open] { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto minmax(0, 1fr); }
  .map-sheet .map-head { grid-column: 1 / -1; }
  .map-sheet .map { height: auto; margin: 0 0 16px 16px; }
  .map-body { padding: 0 16px 16px; }

  /* AI Assistant: a panel docked on the right */
  dialog.ai-sheet { margin: 0 0 0 auto; width: 460px; max-width: 460px; height: 100dvh; max-height: 100dvh; border-radius: 28px 0 0 28px; }
  dialog.ai-sheet[open] { animation: panel-in .35s var(--ease-decel); }
}
@keyframes panel-in { from { transform: translateX(100%); } }

/* Without the docked map, the single column sits in the middle of the space */
@media (min-width: 900px) {
  body:not(.has-map) .appbar-inner, body:not(.has-map) main { margin-left: auto; margin-right: auto; }
}

/* Wide windows, Plan tab: the trip map stays in view on the right (maps.js docks it) */
@media (min-width: 1200px) {
  :root { --content-w: clamp(520px, 42vw, 720px); }
  body.has-map .appbar, body.has-map main { width: var(--content-w); max-width: none; margin: 0; }
  body.has-map .appbar-inner { max-width: none; }
  body.has-map .map-pane {
    display: block;
    position: fixed;
    z-index: 8;
    top: 0;
    right: 0;
    bottom: 0;
    left: calc(var(--rail-w) + var(--content-w));
    background: var(--surface-container-highest);
  }
  .map-slot { position: absolute; inset: 0; }
  .map-slot .map { height: 100%; margin: 0; border-radius: 0; }
  .pane-card {
    position: absolute;
    z-index: 2;
    top: 16px;
    left: 16px;
    max-width: min(420px, calc(100% - 88px));
    display: grid;
    gap: 2px;
    padding: 12px 16px;
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--elev-3);
  }
  .pane-title { margin: 0; font-size: 18px; line-height: 24px; font-weight: 650; }
  .pane-sub { margin: 0; font-size: 13px; line-height: 18px; color: var(--on-surface-variant); }
  .pane-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .pane-actions:empty { display: none; }
}

/* Mouse: things you can click light up when pointed at */
@media (hover: hover) and (pointer: fine) {
  .item-main:hover, .row:hover, .place-opt:hover, .pack-add:hover, .idea-chip button:hover, .empty-day:hover,
  .assist-chip:hover, .trip-chip:not(.active):hover, .filter-chip:hover, .hero-btn:hover, .icon-btn:hover, .leg-link:hover {
    background-image: linear-gradient(color-mix(in oklab, currentColor 8%, transparent), color-mix(in oklab, currentColor 8%, transparent));
  }
  .btn.filled:hover, .btn.tonal:hover, .fab:hover { filter: brightness(1.06); }
  [data-drag] { cursor: grab; }
  body.dragging, body.dragging * { cursor: grabbing !important; }
}

/* On a wide window the trip map is docked on the right */
@media (min-width: 1200px) { body.has-map .hero-btn[data-action="trip-map"] { display: none; } }

/* Dark mode without a CARTO key: the light OpenStreetMap map, darkened (maps.js sets "inverted") */
#map.inverted .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.8); }

/* =========================================================
   Design pass: a compact trip card, calmer plan cards, a day strip on phones,
   suggestions that open on demand, and visible keyboard focus.
   ========================================================= */

/* Keyboard focus is always visible (mouse and touch don't show it) */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
dialog :focus-visible { outline-offset: 0; }
h2[tabindex="-1"]:focus-visible { outline: none; }

/* Trip card: dates and length on one line, status and progress side by side, one row of actions */
.hero { padding: 16px 18px 16px; margin-bottom: 20px; border-radius: 28px; }
.hero-overline { letter-spacing: .04em; text-transform: none; font-size: 13px; font-weight: 600; opacity: .8; }
.hero-title { font-size: 40px; line-height: 44px; margin-top: 2px; }
.hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; }
.hero-row .status-chip { height: 32px; padding: 0 14px 0 10px; font-size: 13px; }
.hero-progress { flex: 1 1 140px; max-width: 220px; margin-top: 0; gap: 4px; font-size: 13px; line-height: 18px; }
.hero-actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 14px -18px 0; padding: 0 18px; }
.hero-actions::-webkit-scrollbar { display: none; }
.hero-btn { flex: none; }
.hero-shape { width: 170px; height: 170px; right: -40px; bottom: -60px; }
.hero-shape-icon { display: none; }
.now-card { margin-top: 0; }

/* Plan cards: one tidy row of actions */
.item-chips { gap: 6px; }
.assist-chip.icon-only { width: 32px; padding: 0; justify-content: center; }
.assist-chip.primary { background: var(--primary-container); color: var(--on-primary-container); border-color: transparent; }
.assist-chip.primary .icon { color: inherit; }
.leg-base { font-weight: 600; max-width: none; }

/* Suggestions closed: one line to open them */
.suggest-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px 10px 10px;
  border-radius: 16px;
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-align: left;
}
.suggest-toggle > .icon:first-child { width: 18px; height: 18px; color: var(--primary); }
.suggest-toggle span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-toggle small { flex: none; font-size: 12px; font-weight: 600; opacity: .8; }
.suggest-toggle .turn { transform: rotate(90deg); opacity: .7; }
button.suggest-title { border-radius: 12px; padding: 4px 8px 4px 0; text-align: left; }

/* Day strip (phones): jump to a day; the one on screen is filled */
.day-strip {
  display: flex;
  gap: 6px;
  max-width: 640px;
  margin: 8px auto 0;
  padding: 0 16px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.day-strip::-webkit-scrollbar { display: none; }
.day-strip button {
  flex: none;
  display: grid;
  justify-items: center;
  min-width: 46px;
  padding: 5px 8px 6px;
  border-radius: 14px;
  color: var(--on-surface-variant);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.day-strip small { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.day-strip b { font-size: 16px; line-height: 20px; font-weight: 650; }
.day-strip button.today { color: var(--primary); }
.day-strip button.on { background: var(--secondary-container); color: var(--on-secondary-container); }
.day { scroll-margin-top: calc(env(safe-area-inset-top) + 124px); }

/* Docked map: the pin of the plan being pointed at */
.pin.hot .pin-shape { transform: rotate(-45deg) scale(1.35); box-shadow: 0 4px 12px rgb(0 0 0 / .45); }
.pin-shape { transition: transform .2s var(--ease); }

@media (min-width: 900px) {
  .day-strip { display: none; }
  .day { scroll-margin-top: 76px; }
  .hero-actions { flex-wrap: wrap; overflow: visible; margin: 14px 0 0; padding: 0; }
  .side-days button.on { background: var(--surface-container-highest); color: var(--on-surface); }
}
.leg-base { flex: none; overflow: visible; white-space: nowrap; }
.leg-link { flex-wrap: wrap; row-gap: 0; }

/* About a plan (info.js): a short list of facts, label above text */
.pi-facts { display: grid; gap: 10px; margin: 0 0 10px; }
.pi-facts dt { font-size: 12px; line-height: 16px; font-weight: 650; color: var(--primary); }
.pi-facts dd { margin: 0; font-size: 14px; line-height: 20px; color: var(--on-surface); white-space: pre-line; }
.pi-small { font-size: 12px !important; margin: 0 !important; }
.pi-hours.warn, .pi-hours.warn .icon { color: var(--error); }

/* =========================================================
   Itinerary look: white plan cards with the stop's number and a photo,
   dotted lines with the travel time between stops, the stay at the top
   of the day, big day titles and pill-shaped day buttons.
   ========================================================= */
:root {
  --card: #fff;
  --card-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 3px 10px rgb(0 0 0 / .07);
}
:root[data-theme="dark"] {
  --card: var(--surface-container-high);
  --card-shadow: 0 1px 2px rgb(0 0 0 / .35);
}

/* Day title */
.day { margin-bottom: 36px; }
.day-head { align-items: flex-start; gap: 10px; padding: 0 0 4px 4px; }
.day-title { margin: 0; font-size: 26px; line-height: 32px; font-weight: 750; letter-spacing: -.01em; text-wrap: balance; }
.day.is-today .day-title { color: var(--primary); }
.day-sub { margin-top: 2px; font-size: 13px; line-height: 18px; }
.day-head .wx { align-self: center; }
.day-total {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0 4px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 550;
  color: var(--on-surface-variant);
}
.day-total .icon { color: var(--primary); }
.day-tools { margin: 8px 0 14px; gap: 6px; }
.day-tools .assist-chip, .item-chips .assist-chip:not(.primary, .selected) {
  height: 32px;
  border-color: transparent;
  background: var(--surface-container-high);
}
.item-chips .assist-chip:not(.primary, .selected) { background: color-mix(in oklab, var(--on-surface) 7%, transparent); }
.day-tools .assist-chip.selected { background: var(--secondary-container); }
/* On a phone the day's tools stay on one row, swiped sideways when there are many */
@media (max-width: 599px) {
  .day-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 8px -16px 14px; padding: 0 16px; }
  .day-tools::-webkit-scrollbar { display: none; }
  .day-tools .assist-chip { flex: none; height: 36px; }
}

/* Trip card: a smaller title, so the days start sooner */
.hero-title { font-size: 34px; line-height: 40px; }

/* The plans: separate white cards */
.group.plans { gap: 0; }
.group.plans > li { min-width: 0; background: none; border-radius: 0; overflow: visible; }
.group.plans > li.item {
  background: var(--card);
  border-radius: 22px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.group.plans > li.item + li.item { margin-top: 12px; }
.plans .item { grid-template-columns: 1fr; }
.plans .item-main { gap: 12px; padding: 14px 14px 10px; }
.stop-badge {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 14px;
  line-height: 1;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.plans .item-text { flex: 1; }
.plans .item-title { font-size: 17px; line-height: 23px; font-weight: 650; }
.item.done .stop-badge { background: var(--outline); }
/* Each day has its own color (dayTint in maps.js): its stop numbers, the travel between them, its dot in the
   list of days. The same color as the day's pins on the map. */
.day .stop-badge { background: var(--day, var(--primary)); color: #fff; }
.day .item.done .stop-badge { background: var(--outline); }
.day .plans .leg-link > .icon { color: var(--day, var(--primary)); }
.day .plans .leg-link::after { border-top-color: color-mix(in oklab, var(--day, var(--outline-variant)) 55%, transparent); }
.day-dot { flex: none; align-self: center; width: 8px; height: 8px; border-radius: 50%; }
.item-photo {
  position: relative;
  width: 84px;
  height: 84px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
}
.item-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.item.done .item-photo { filter: grayscale(1); opacity: .6; }
.plans .item-chips { align-items: center; margin-top: 0; padding: 0 8px 8px 54px; }
.plans .item-main:has(.avatar) + .item-chips { padding-left: 66px; }
.plans .item-chips:not(:has(.check)) { padding-bottom: 14px; }
.plans .check { width: 40px; height: 40px; margin: 0 0 0 auto; }
.assist-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* On a phone the actions start at the card's edge and the secondary ones are icons (wider, for a thumb),
   so they all fit on one row beside the done circle. */
@media (max-width: 599px) {
  .plans .item-chips, .plans .item-main:has(.avatar) + .item-chips { gap: 4px; padding-left: 14px; }
  .plans .assist-chip.compact, .plans .assist-chip.icon-only { width: 40px; padding: 0; justify-content: center; }
  .plans .assist-chip.compact > span { display: none; }
}

/* The way between two stops: travel time, a link to directions, then a dotted line */
.group.plans > li.leg { padding: 2px 0; }
.plans .leg-link {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  margin: 0;
  padding: 10px 4px 10px 16px;
  gap: 6px;
  border-radius: 12px;
  white-space: nowrap;
  overflow: hidden;
}
.plans .leg-link > span:not(.leg-go) { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.plans .leg-link::after {
  content: '';
  flex: 1 1 24px;
  min-width: 24px;
  margin-left: 6px;
  border-top: 3px dotted var(--outline-variant);
}
.leg-go { flex: none; color: var(--primary); font-weight: 650; }
.plans .leg-base { font-weight: 650; color: var(--on-surface); }
/* On a phone "Back to your stay:" and the travel time don't fit on one line: the label gets its own */
@media (max-width: 599px) {
  .plans .leg-link.labelled { flex-wrap: wrap; row-gap: 2px; }
  .plans .leg-link.labelled .leg-base { flex: 1 0 calc(100% - 40px); }
}

/* The stay the day starts from */
.group.plans > li.stay-pill { margin-bottom: 0; }
.stay-pill button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 18px 8px 8px;
  border-radius: 999px;
  background: var(--surface-container-high);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  text-align: left;
}
.stay-pill .icon {
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 50%;
  background: var(--tertiary-container);
  color: var(--on-tertiary-container);
}
.stay-pill span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stay-pill b { font-weight: 700; color: var(--primary); }     /* "Check out", on the day of a move */

/* Day buttons on phones: one pill per day, the day on screen filled */
.day-strip { gap: 8px; padding: 2px 16px 6px; }
.day-strip button {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface-container-high);
  color: var(--on-surface);
}
.day-strip small { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.day-strip b { font-size: 14px; line-height: 20px; font-weight: 700; }
.day-strip button.today { box-shadow: inset 0 0 0 2px var(--primary); color: var(--on-surface); }
.day-strip button.on { background: var(--inverse-surface); color: var(--inverse-on-surface); }