/* Wayline: a bright, editorial travel workspace. The map and the day's
   timeline are the product; everything else stays small and out of the way. */

:root {
  --paper: #faf6ef;
  --paper-2: #f3ece0;
  --surface: #ffffff;
  --ink: #1c2430;
  --ink-2: #3a4554;
  --muted: #5f6b7a;
  --line: #e6dece;
  --line-2: #d8cdb9;
  --coral: #f2603d;
  --coral-ink: #c8401f;
  --sea: #0f7c8c;
  --sun: #f6c343;
  --leaf: #2f8a5c;
  --violet: #7a5af8;
  --danger: #c73a32;
  --danger-bg: #fdecea;
  --warn: #9a6a00;
  --warn-bg: #fff4d6;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(28, 36, 48, 0.06), 0 6px 24px -8px rgba(28, 36, 48, 0.18);
  --shadow-lg: 0 24px 60px -18px rgba(28, 36, 48, 0.35);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bar-h: 64px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: 1.15; }
p { margin: 0; }
a { color: var(--sea); }
button, input, select, textarea { font: inherit; color: inherit; }
svg { width: 1.15em; height: 1.15em; flex: none; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--sea) 55%, transparent); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

.boot { padding: 48px 24px; text-align: center; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.pad { padding: 14px 16px; }
.spacer { flex: 1; }
.grow { flex: 1; min-width: 0; }

/* --- buttons & controls --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid transparent; border-radius: 999px;
  padding: 9px 16px; font-weight: 700; font-size: 14px; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--coral); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--coral-ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover:not(:disabled) { background: #000; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover:not(:disabled) { background: var(--paper-2); }
.btn-outline { background: var(--surface); border-color: var(--ink); color: var(--ink); }
.btn-outline:hover:not(:disabled) { background: var(--ink); color: #fff; }
.btn-danger-text { color: var(--danger); }
.icon-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  cursor: pointer; color: var(--ink-2); text-decoration: none; font-weight: 800;
}
.icon-btn:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.icon-btn-danger:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.linklike:hover { text-decoration: underline; }
.linklike.small { font-size: 13px; color: var(--sea); font-weight: 700; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span, .field .check span { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.field small { color: var(--muted); font-size: 12px; }
input:not([type=checkbox]), select, textarea {
  width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); background: var(--surface); font-size: 15px;
}
input:focus, select:focus, textarea:focus { border-color: var(--sea); outline: 3px solid color-mix(in srgb, var(--sea) 22%, transparent); }
input:disabled { background: var(--paper-2); color: var(--muted); }
textarea { resize: vertical; }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--coral); }
.stepper { display: flex; gap: 6px; align-items: center; }
.stepper input { text-align: center; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.form-error { color: var(--danger); font-weight: 600; font-size: 14px; }

.tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700; background: var(--paper-2); color: var(--ink-2); white-space: nowrap;
}
.tag-attraction { background: #ffe5dd; color: #a83a1d; }
.tag-food { background: #fff0cc; color: #7d5400; }
.tag-shopping { background: #ece6ff; color: #5236c9; }
.tag-accommodation { background: #d9f1f3; color: #0b5f6b; }
.tag-custom { background: #e8ebef; color: #3f4a58; }
.tag-demo { background: var(--warn-bg); color: var(--warn); border: 1px dashed #d9b04f; }
.tag-rule { background: #e3f1e9; color: #1f6b44; }
.tag-ai { background: #ece6ff; color: #5236c9; }
.chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.chip-soft { background: var(--paper-2); color: var(--ink-2); }
.chip-danger { background: var(--danger-bg); color: var(--danger); }
.chip-live { background: #e3f1e9; color: var(--leaf); }
.badge { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.badge-danger { background: var(--danger); color: #fff; }
.dot-danger { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); position: absolute; top: 8px; right: 8px; }

.avatar {
  display: inline-grid; place-items: center; border-radius: 50%; background: var(--c); color: #fff;
  font-weight: 800; letter-spacing: .02em; border: 2px solid var(--surface); flex: none;
}
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-md { width: 36px; height: 36px; font-size: 13px; }
.avatars { display: inline-flex; }
.avatars .avatar + .avatar { margin-left: -8px; }

/* --- top bar & brand --- */

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--bar-h); padding: 0 max(20px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 92%, white);
}
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.brand-lg { font-size: 26px; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 8px; background: var(--coral) url("/favicon.svg") center/cover;
}
.topbar-nav { display: flex; align-items: center; gap: 14px; font-weight: 600; }
.topbar-nav a { color: var(--ink-2); text-decoration: none; }
.me { display: inline-flex; align-items: center; gap: 8px; }

/* --- auth --- */

.auth { min-height: 100vh; display: grid; grid-template-columns: 1.15fr .85fr; }
.auth-hero {
  position: relative; overflow: hidden; padding: 48px clamp(24px, 6vw, 88px);
  display: flex; flex-direction: column; gap: 26px; justify-content: center;
  background:
    radial-gradient(circle at 85% 15%, rgba(246, 195, 67, .45), transparent 32%),
    radial-gradient(circle at 10% 90%, rgba(15, 124, 140, .22), transparent 40%),
    var(--paper);
}
.auth-hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(36px, 4.6vw, 62px); letter-spacing: -.02em; line-height: 1.04; }
.auth-hero h1 em { color: var(--coral); font-style: italic; }
.lede { font-size: 18px; color: var(--ink-2); max-width: 36em; }
.callout { background: var(--surface); border-left: 4px solid var(--coral); padding: 12px 16px; border-radius: var(--radius-sm); box-shadow: var(--shadow); font-weight: 600; }
.hero-art ol { list-style: none; margin: 0; padding: 0; max-width: 360px; }
.hero-stop {
  display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: 12px;
  padding: 12px 14px; box-shadow: var(--shadow); font-weight: 600;
}
.hero-stop b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; }
.hero-stop .t { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.hero-leg { margin-left: 26px; padding: 8px 0 8px 22px; border-left: 3px dotted var(--coral); color: var(--coral-ink); font-size: 13px; font-weight: 700; }
.auth-card { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 48px clamp(24px, 5vw, 72px); background: var(--surface); border-left: 1px solid var(--line); }
.auth-card h2 { font-family: var(--serif); font-size: 30px; }
.auth-form { display: flex; flex-direction: column; gap: 16px; max-width: 400px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper-2); border-radius: 999px; padding: 4px; }
.seg button { border: 0; background: transparent; padding: 8px; border-radius: 999px; font-weight: 700; cursor: pointer; color: var(--muted); }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* --- dashboard --- */

.dash { max-width: 1180px; margin: 0 auto; padding: 40px 24px 80px; display: flex; flex-direction: column; gap: 44px; }
.dash-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 800; color: var(--coral-ink); margin-bottom: 8px; }
.dash-hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.02em; }
.dash-section h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 16px; }
.trip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.trip-card {
  display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .15s, box-shadow .15s;
}
.trip-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.trip-card-band {
  height: 150px; padding: 14px 16px; display: flex; align-items: flex-end;
  background:
    radial-gradient(circle at 80% 20%, hsl(calc(var(--hue) + 40) 90% 75% / .9), transparent 45%),
    linear-gradient(135deg, hsl(var(--hue) 70% 55%), hsl(calc(var(--hue) + 25) 75% 42%));
}
.trip-card-dest { color: #fff; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; text-shadow: 0 1px 6px rgba(0,0,0,.25); }
.trip-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; }
.trip-card h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; }
.trip-card-dates { font-weight: 700; color: var(--ink-2); }
.trip-card-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 13px; margin-top: 6px; }
.empty { background: var(--surface); border: 2px dashed var(--line-2); border-radius: var(--radius); padding: 36px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.empty h3 { font-family: var(--serif); font-size: 24px; }

.center-page { display: grid; place-items: center; padding: 48px 20px; min-height: calc(100vh - var(--bar-h)); }
.invite-card { max-width: 480px; width: 100%; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 32px; display: flex; flex-direction: column; gap: 14px; border-top: 8px solid hsl(var(--hue, 15) 75% 55%); }
.invite-card h1 { font-family: var(--serif); font-size: 32px; font-weight: 600; }

/* --- dialogs & toasts --- */

.dialog { border: 0; border-radius: 18px; padding: 26px; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); box-shadow: var(--shadow-lg); background: var(--surface); }
.dialog::backdrop { background: rgba(28, 36, 48, .45); backdrop-filter: blur(2px); }
.invite-pop { border-top: 6px solid hsl(var(--hue, 20) 70% 55%); }
.invite-pop-head { display: flex; align-items: center; gap: 10px; }
.invite-pop-head p { margin: 0; }
.dialog h2 { font-family: var(--serif); font-size: 26px; font-weight: 600; }
.dialog h3 { font-size: 15px; }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.banner { background: var(--warn-bg); border: 1px solid #ecd28a; border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; font-weight: 600; }
.banner-actions, .row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.copy-row { display: flex; gap: 8px; }
.members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.members li { display: flex; align-items: center; gap: 12px; }

/* sharing: two methods, by username and by link */
.dialog-share { width: min(560px, calc(100vw - 32px)); }
.share-method { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.share-method h3 { font-size: 16px; }
.invitee-search { display: flex; gap: 8px; }
.invitee-search input { flex: 1; min-width: 0; }
.invitee-search .btn { flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.invitee-results, .invitations { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.invitee-results:empty, .invitations:empty { display: none; }
.invitee { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; min-width: 0; }
.invitee:hover { background: var(--paper); }
.invitee[aria-selected=true] { border-color: var(--ink); background: var(--paper); }
.invitee[aria-disabled=true] { cursor: default; }
.invitee .grow, .invitations .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.invitations { padding-top: 6px; }
.invitations li { display: flex; align-items: center; gap: 10px; }

/* My Trips: invitations to answer */
.field-msg.is-error { color: var(--danger); font-weight: 700; }
.field-msg.is-ok { color: var(--leaf); }
.field input[aria-invalid=true] { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.invites h2 { display: flex; align-items: center; gap: 8px; }
.invite-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.invite-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); border-left: 6px solid hsl(var(--hue, 15) 70% 55%); }
.invite-row h3 { font-family: var(--serif); font-size: 20px; line-height: 1.2; }
.invite-row p { margin: 0; }
.invite-row .grow { flex: 1; min-width: 0; }
@media (max-width: 620px) {
  .invite-row { flex-wrap: wrap; }
  .invite-row .row-actions { width: 100%; }
  .invite-row .row-actions .btn { flex: 1; }
}
.toasts { position: fixed; z-index: 50; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100vw - 32px)); pointer-events: none; }
/* the call window sits along the bottom too: toasts (someone else's edit)
   rise above it rather than covering its controls */
body:has(.call-card:not([hidden])) .toasts { bottom: 96px; }
body:has(.call-card:not([hidden]):not(.is-mini)) .toasts { bottom: auto; top: calc(var(--bar-h) + 16px); }
.toast { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow-lg); font-weight: 600; animation: toast-in .2s ease-out; transition: opacity .4s, transform .4s; }
.toast-error { background: var(--danger); }
.toast-out { opacity: 0; transform: translateY(8px); }
.toast-action { background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff; border-radius: 999px; padding: 4px 10px; font-weight: 700; cursor: pointer; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* --- trip editor --- */

.editor { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.trip-bar {
  flex: none; display: flex; align-items: center; gap: 12px; height: var(--bar-h);
  padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--surface); z-index: 5;
}
.trip-title { min-width: 0; flex: 1; }
.trip-title h1 { font-family: var(--serif); font-size: 21px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.trip-title p { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.presence { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.conn { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.conn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.conn-live { color: var(--leaf); }
.conn-off { color: var(--warn); }
.conn-saving { color: var(--muted); }
.conn-saving::before { animation: call-pulse 1s ease-in-out infinite; }
.conn-failed { color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .conn-saving::before { animation: none; } }

/* map : plan : assistant, about 45 : 33 : 22 on wide screens. The plan is
   the main editing space, so it gets real width; the map stays usable. With
   the assistant closed, map and plan share its space. */
.workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 58fr) minmax(420px, 42fr); }
.workspace.with-copilot { grid-template-columns: minmax(0, 45fr) minmax(420px, 33fr) minmax(300px, 22fr); }
.pane { min-height: 0; min-width: 0; }
.pane-copilot { display: none; }
.workspace.with-copilot .pane-copilot { display: block; }

.pane-map { position: relative; background: #e8e2d6; }
.map-host, .map-canvas, .schematic { position: absolute; inset: 0; }
.search {
  position: absolute; z-index: 3; top: 16px; left: 16px; right: 16px; max-width: 520px;
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px;
  background: var(--surface); border-radius: 999px; box-shadow: var(--shadow-lg);
}
.search input { border: 0; padding: 8px 4px; background: transparent; outline: none; }
.search input:focus { outline: none; }
.search svg { color: var(--muted); }
.search-panel {
  position: absolute; z-index: 3; top: 76px; left: 16px; width: min(400px, calc(100% - 32px));
  max-height: calc(100% - 100px); overflow: auto; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
.results { list-style: none; margin: 0; padding: 6px; }
.result { display: flex; flex-direction: column; width: 100%; gap: 2px; text-align: left; background: none; border: 0; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.result:hover, .result:focus-visible { background: var(--paper); }
.result .muted { font-size: 13px; }
.demo-note { margin: 10px 12px 0; padding: 10px 12px; font-size: 13px; background: var(--warn-bg); color: #5e4300; border-radius: 10px; }
.attrib { font-family: Roboto, Arial, sans-serif; font-size: 12px; color: #5e5e5e; padding: 6px 16px 12px; }
.place-card { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }
.place-card > :not(.panel-head) { margin-left: 16px; margin-right: 16px; }
.place-card h3 { font-family: var(--serif); font-size: 24px; font-weight: 600; }
.hours summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.hours ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.add-form { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--paper); border-radius: 12px; }

.map-note {
  position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; max-width: 520px;
  background: rgba(255,255,255,.94); padding: 10px 14px; border-radius: 12px; font-size: 13px; box-shadow: var(--shadow);
}
.schematic { background: linear-gradient(180deg, #eef4f2, #e9e3d6); }
.schematic-svg { width: 100%; height: 100%; display: block; }
.schematic-svg .grid { stroke: rgba(28, 36, 48, .06); stroke-width: 1; }
.schematic-path { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 2 8; stroke-linecap: round; opacity: .6; }
.schematic-route { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.schematic-stop { cursor: pointer; }
.schematic-stop circle { fill: var(--c); stroke: #fff; stroke-width: 3; }
.schematic-stop.on circle { stroke: var(--ink); stroke-width: 4; }
.schematic-stop .num { fill: #fff; font: 800 13px var(--sans); }
.schematic-stop .label, .schematic-result text { font: 700 13px var(--sans); fill: var(--ink); paint-order: stroke; stroke: rgba(255,255,255,.9); stroke-width: 4px; }
.schematic-result { cursor: pointer; }
.schematic-result circle { fill: #fff; stroke: var(--sea); stroke-width: 3; }
.schematic-result.on circle { fill: var(--sea); }
.schematic-empty { font: 600 16px var(--sans); fill: var(--muted); }

.pin {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg);
  background: var(--c, var(--coral)); color: #fff; border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.3);
  font: 800 14px var(--sans); cursor: pointer; padding: 0;
}
.pin > * { transform: rotate(45deg); }
.pin { line-height: 1; }
.pin-on { outline: 3px solid var(--ink); }
.pin-result { width: 18px; height: 18px; border-radius: 50%; transform: none; background: #fff; border: 4px solid var(--sea); }
.pin-result.pin-on { background: var(--sea); }

/* plan */
.pane-plan { display: flex; flex-direction: column; background: var(--paper); border-left: 1px solid var(--line); }
.day-tabs { flex: none; display: flex; gap: 8px; overflow-x: auto; padding: 14px 16px 10px; scrollbar-width: thin; }
.day-tab {
  position: relative; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  min-width: 92px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; text-align: left;
}
.day-tab:hover { border-color: var(--line-2); }
.day-tab.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.day-tab.drop-target { outline: 3px dashed var(--coral); }
.day-tab-n { font-weight: 800; font-size: 13px; }
.day-tab-date { font-size: 12px; opacity: .85; }
.day-tab-count { font-size: 11px; opacity: .7; }
.day-head { flex: none; padding: 6px 20px 12px; }
.day-head h2 { font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.day-head h2 span { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.day-sum { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.day-sum-bad { color: var(--danger); }
.timeline { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 4px 16px 24px; }
.plan-foot { flex: none; padding: 12px 16px 16px; border-top: 1px solid var(--line); background: var(--paper); }
.plan-foot .btn { width: 100%; }

.timeline-empty { background: var(--surface); border: 2px dashed var(--line-2); border-radius: var(--radius); padding: 28px 22px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.timeline-empty h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; }
.timeline-empty p { color: var(--muted); }

.stop { display: grid; grid-template-columns: 34px 1fr; gap: 10px; }
.stop-rail { display: flex; flex-direction: column; align-items: center; padding-top: 14px; }
.stop-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--k, var(--ink)); color: #fff; font-weight: 800; font-size: 13px; box-shadow: 0 0 0 4px var(--paper); }
.kind-attraction { --k: var(--coral); }
.kind-food { --k: #e08a00; }
.kind-shopping { --k: var(--violet); }
.kind-accommodation { --k: var(--sea); }
.kind-custom { --k: #5f6b7a; }
.stop-card {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px 10px;
  border-left: 4px solid var(--k); display: flex; flex-direction: column; gap: 6px; outline: none;
}
.stop.selected .stop-card { box-shadow: 0 0 0 2px var(--ink), var(--shadow); }
.stop.dragging { opacity: .4; }
.stop.drop-before .stop-card { box-shadow: 0 -4px 0 0 var(--coral), var(--shadow); }
.stop.drop-after .stop-card { box-shadow: 0 4px 0 0 var(--coral), var(--shadow); }
.stop-top { display: flex; justify-content: space-between; align-items: center; }
.stop-time { font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.grip { color: var(--line-2); cursor: grab; display: inline-flex; }
.grip svg { fill: currentColor; }
.stop-card h3 { font-family: var(--serif); font-size: 19px; font-weight: 600; }
.stop-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; color: var(--ink-2); }
.stop-notes { font-size: 14px; color: var(--ink-2); white-space: pre-wrap; background: var(--paper); border-radius: 8px; padding: 6px 10px; }
.stop-touched { font-size: 12px; color: var(--sea); font-weight: 700; }
.stop-actions { display: flex; gap: 6px; align-items: center; padding-top: 4px; border-top: 1px solid var(--line); margin-top: 2px; padding-top: 8px; }
.stop-actions .icon-btn { width: 30px; height: 30px; }
.stop-actions .btn { margin-left: auto; }

.leg {
  margin: 0 0 0 16px; padding: 10px 0 10px 28px; border-left: 3px dotted var(--line-2);
  display: flex; flex-direction: column; gap: 8px; font-size: 13px;
}
.leg-bad { border-left-color: var(--danger); }
.leg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.leg-label { text-transform: uppercase; font-size: 11px; letter-spacing: .1em; font-weight: 800; color: var(--muted); }
.leg-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ink-2); }
.leg-warn { color: var(--warn); font-weight: 700; }
.leg-issue { color: var(--danger); font-weight: 600; }
.leg-issue .linklike { color: var(--danger); text-decoration: underline; }
.leg-attrib { font-family: Roboto, Arial, sans-serif; font-size: 11px; color: #5e5e5e; }
.route-btn { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modes { display: flex; gap: 6px; flex-wrap: wrap; }
.mode {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; font-size: 13px; font-weight: 600;
}
.mode b { font-weight: 800; }
.mode.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.mode:disabled { opacity: .45; cursor: not-allowed; }
.route { display: flex; flex-direction: column; gap: 6px; }
.lines { display: flex; flex-wrap: wrap; gap: 6px; }
.line-chip { display: inline-flex; padding: 1px 8px; border-radius: 6px; background: var(--lc, var(--sea)); color: var(--lt, #fff); font-weight: 800; font-size: 12px; }
.steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.steps li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

/* copilot */
.pane-copilot { overflow-y: auto; background: var(--surface); border-left: 1px solid var(--line); padding: 16px 18px 32px; }
.copilot-head { display: flex; align-items: center; justify-content: space-between; }
.copilot-head h2 { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 24px; font-weight: 600; }
.copilot-head h2 svg { color: var(--violet); }
.co-section { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.co-section h3 { font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.co-ok { color: var(--leaf); font-weight: 700; }
.issue { border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.issue-conflict { background: var(--danger-bg); }
.issue-warning { background: var(--warn-bg); }
.issue-msg { font-weight: 700; font-size: 14px; }
.proposals { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.proposal { width: 100%; background: var(--surface); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; box-shadow: var(--shadow); }
.proposal-ai { outline: 2px solid var(--violet); }
.proposal-label { font-weight: 700; font-size: 14px; }
.change-preview { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.change-preview s { color: var(--muted); }
.ai-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: var(--violet); }
.ai-text { display: flex; gap: 6px; font-size: 13px; color: #3e2d99; background: #f3efff; border-radius: 8px; padding: 6px 8px; }
.ai-text svg { margin-top: 2px; color: var(--violet); }
.ai-card { background: #f6f3ff; border: 1px solid #ddd3ff; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ai-stale { opacity: .75; }
.co-day { font-size: 13px; color: var(--ink-2); background: var(--paper-2); border-radius: 8px; padding: 6px 10px; margin-top: 6px; }
.co-facts { font-variant-numeric: tabular-nums; }
.co-examples { display: flex; flex-wrap: wrap; gap: 6px; }
.co-examples .chip { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 4px 10px; }
.co-examples .chip:disabled { opacity: .5; cursor: default; }
.co-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.co-turn { display: flex; flex-direction: column; gap: 6px; }
.co-q { align-self: flex-end; max-width: 90%; background: var(--ink); color: #fff; border-radius: 12px 12px 2px 12px; padding: 6px 10px; font-size: 13px; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-label { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--violet); text-transform: uppercase; letter-spacing: .04em; }
.ai-summary { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.co-refs { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.co-issue { display: flex; flex-direction: column; gap: 4px; }
.co-err { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; background: var(--danger-bg); border-radius: 10px; padding: 8px 10px; }
.co-pending { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.co-ask { display: flex; flex-direction: column; gap: 6px; background: var(--surface); padding: 8px 0 4px; border-top: 1px solid var(--line); }
.co-input { width: 100%; resize: vertical; min-height: 52px; border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; font-size: 14px; background: var(--surface); }
.co-ask-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--violet); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- voice calls: a "Call" button in the trip bar, and a floating call window --- */
.call { display: flex; align-items: center; gap: 6px; min-width: 0; flex: none; }
.call-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.call-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warn); flex: none; }
.call-connected .call-dot { background: var(--leaf); box-shadow: 0 0 0 3px #e3f1e9; }
.call-incoming .call-dot, .call-outgoing .call-dot, .call-connecting .call-dot, .call-reconnecting .call-dot { animation: call-pulse 1s ease-in-out infinite; }
.call-ended .call-dot { background: var(--muted); }
.call-pill { background: #e3f1e9; color: var(--leaf); border-color: #bfdcc9; }
.call-pill-incoming, .call-pill-outgoing, .call-pill-connecting, .call-pill-reconnecting { background: var(--warn-bg); color: var(--warn); border-color: #f0dca4; }
.call-pick { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.call-pick .btn { justify-content: flex-start; gap: 10px; }
.call-audio { display: none; }
.btn svg { width: 16px; height: 16px; flex: none; }
@keyframes call-pulse { 50% { opacity: .35; } }

.call-card {
  position: fixed; z-index: 40; right: 24px; bottom: 24px; width: 352px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: 14px; padding: 0 18px 18px;
  background: var(--ink); color: #fff; border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 70px -20px rgba(10, 14, 20, .65), 0 10px 24px -10px rgba(10, 14, 20, .5);
}
.call-card[hidden] { display: none; }
.call-card :focus-visible { outline: 3px solid #8fd3dd; outline-offset: 2px; }
.call-head { display: flex; align-items: center; gap: 8px; margin: 0 -18px; padding: 12px 12px 0 18px; cursor: grab; user-select: none; touch-action: none; }
.call-head-label { flex: 1; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #b9c2cf; }
.call-icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.call-icon-btn:hover { background: rgba(255,255,255,.16); }
.call-icon-btn svg { width: 20px; height: 20px; }
.call-body { display: flex; align-items: center; gap: 14px; min-width: 0; }
.call-face { position: relative; flex: none; border-radius: 50%; }
.call-face .avatar-lg { width: 60px; height: 60px; font-size: 21px; border-color: var(--ink); }
.call-face::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 3px solid transparent; transition: border-color .12s; }
.call-face.speaking::after { border-color: #5fd39a; }
.call-who { display: flex; flex-direction: column; min-width: 0; }
.call-name { font-size: 19px; font-weight: 800; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-state { font-size: 14px; font-weight: 600; color: #cfd6df; }
.call-timer { font-variant-numeric: tabular-nums; color: #fff; }
.call-meters { display: grid; gap: 6px; }
.call-level { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px; font-size: 12px; color: #b9c2cf; }
.call-level-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-level-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.call-level-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: #6b7686; transition: width .1s linear; }
.call-level.speaking .call-level-fill { background: #5fd39a; }
.call-note { margin: 0; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 600; line-height: 1.4; background: rgba(255,255,255,.08); color: #e7ebf0; }
.call-note-warn, .call-note-blocked { background: #4a3a10; color: #ffe7a3; }
.call-note-error { background: #5a1f1c; color: #ffd2cd; }
.call-fine { margin: 0; font-size: 12.5px; color: #b9c2cf; }
.call-actions { display: flex; gap: 10px; }
.call-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 10px 14px;
  border: 0; border-radius: 14px; font: 800 15px var(--sans); cursor: pointer; background: rgba(255,255,255,.12); color: #fff;
}
.call-btn svg { width: 21px; height: 21px; flex: none; }
.call-btn:hover { filter: brightness(1.12); }
.call-btn:active { transform: translateY(1px); }
.call-mute.on { background: #fff; color: var(--ink); }
.call-hang, .call-decline { background: #d93a30; }
.call-hang svg, .call-decline svg { width: 24px; height: 24px; }
.call-accept { background: #2f9a64; }
.call-sound { background: var(--sun); color: var(--ink); flex-basis: 100%; }
.call-actions:has(.call-sound) { flex-wrap: wrap; }
.call-debug { font-size: 12px; color: #b9c2cf; }
.call-debug summary { cursor: pointer; }
.call-diag { display: block; margin-top: 4px; font-family: ui-monospace, monospace; color: #cfd6df; word-break: break-all; }

/* minimized: a compact bar that keeps mute and hang up */
.call-card.is-mini { width: auto; max-width: calc(100vw - 32px); padding: 8px; gap: 0; border-radius: 999px; }
.call-mini { display: flex; align-items: center; gap: 6px; }
.call-mini-open { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 12px 0 14px; border: 0; border-radius: 999px; background: transparent; color: #fff; font: 600 14px var(--sans); cursor: pointer; min-width: 0; }
.call-mini-open:hover { background: rgba(255,255,255,.08); }
.call-mini-open svg { width: 18px; height: 18px; flex: none; }
.call-mini-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.call-mini-state { color: #cfd6df; font-variant-numeric: tabular-nums; }
.call-mini .call-btn { flex: none; min-height: 44px; width: 44px; padding: 0; border-radius: 50%; }
.call-mini .call-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.call-mini .call-sound { width: auto; padding: 0 14px; border-radius: 999px; }
.call-mini .call-sound span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }

.mobile-tabs { display: none; }

/* --- README page --- */

.readme-page { background: var(--paper); }
.readme { max-width: 760px; margin: 0 auto; padding: 40px 24px 96px; font-size: 17px; line-height: 1.7; }
.readme h1 { font-family: var(--serif); font-size: 46px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 18px; }
.readme h2 { font-family: var(--serif); font-size: 28px; font-weight: 600; margin: 40px 0 12px; }
.readme h3 { margin: 28px 0 10px; }
.readme p, .readme ul, .readme ol { margin: 0 0 16px; }
.readme blockquote { margin: 0 0 20px; padding: 14px 20px; border-left: 4px solid var(--coral); background: var(--surface); border-radius: 0 12px 12px 0; font-family: var(--serif); font-size: 20px; }
.readme blockquote p { margin: 0; }
.readme img { max-width: 100%; border-radius: 12px; box-shadow: var(--shadow); }
.readme code { background: var(--paper-2); padding: 1px 6px; border-radius: 5px; font-size: .9em; }

/* --- responsive --- */

@media (max-width: 1439px) {
  .workspace.with-copilot { grid-template-columns: minmax(0, 1fr) minmax(400px, 36%) 300px; }
}
@media (max-width: 1279px) {
  .workspace.with-copilot { grid-template-columns: minmax(0, 1fr) minmax(380px, 40%) 290px; }
  .presence-label { display: none; }
}
@media (max-width: 1099px) {
  .workspace.with-copilot { grid-template-columns: minmax(0, 1fr) 360px; }
  .workspace.with-copilot .pane-copilot { position: fixed; z-index: 20; top: var(--bar-h); right: 0; bottom: 0; width: min(380px, 100vw); box-shadow: var(--shadow-lg); }
}
@media (max-width: 899px) {
  .auth { grid-template-columns: 1fr; }
  .auth-hero { padding-top: 32px; }
  .hero-art { display: none; }
  .auth-card { border-left: 0; border-top: 1px solid var(--line); }
  .hide-phone { display: none !important; }
  .me-name { display: none; }

  .trip-bar { padding: 0 10px; gap: 8px; }
  .trip-title h1 { font-size: 18px; }
  .presence .avatars .avatar:nth-child(n+3) { display: none; }
  .hide-sm { display: none; }

  .workspace, .workspace.with-copilot { display: block; position: relative; }
  .workspace .pane { position: absolute; inset: 0; display: none; }
  .workspace[data-tab=map] .pane-map,
  .workspace[data-tab=plan] .pane-plan,
  .workspace[data-tab=copilot] .pane-copilot { display: flex; flex-direction: column; }
  .workspace[data-tab=copilot] .pane-copilot { display: block; position: absolute; box-shadow: none; width: auto; top: 0; }
  .workspace .pane-map { display: none; }
  .workspace[data-tab=map] .pane-map { display: block; }
  .pane-plan { border-left: 0; }
  .search { top: 10px; left: 10px; right: 10px; }
  .search-panel { top: 66px; left: 10px; width: calc(100% - 20px); max-height: calc(100% - 80px); }
  .map-note { left: 10px; right: 10px; bottom: 10px; }

  .mobile-tabs {
    flex: none; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line);
    background: var(--surface); padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-tabs button {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 10px;
    background: none; border: 0; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer;
  }
  .mobile-tabs button svg { width: 22px; height: 22px; }
  .mobile-tabs button.on { color: var(--coral-ink); }
  .mobile-tabs .badge { position: absolute; top: 4px; left: calc(50% + 6px); }
  .dash { padding-top: 28px; }
  .row-2 { grid-template-columns: 1fr; }
  .add-form .row-2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899px) {
  /* phones: the call window is a panel along the bottom, above the Map/Plan/Copilot tabs */
  .call-card, .call-card.is-moved {
    left: 8px !important; right: 8px !important; top: auto !important; bottom: calc(66px + env(safe-area-inset-bottom)) !important;
    width: auto; max-width: none; padding: 0 14px 14px; gap: 12px; border-radius: 18px;
  }
  .call-head { cursor: default; padding: 10px 8px 0 14px; margin: 0 -14px; }
  .call-face .avatar-lg { width: 48px; height: 48px; font-size: 17px; }
  .call-name { font-size: 17px; }
  .call-btn { min-height: 52px; }
  .call-card.is-mini { padding: 6px; border-radius: 999px; }
  .call-mini-open { flex: 1; }
  .call-mini-text { max-width: none; }
  .call-status { max-width: 100%; }
  .workspace[data-tab=copilot] .pane-copilot { overflow: auto; }
}
@media (max-width: 420px) {
  .conn { font-size: 0; gap: 0; }
  .topbar-nav { gap: 8px; }
  .dialog { padding: 20px; }
}
/* short screens (a zoomed-in browser): the day tabs, heading and footer
   would leave the timeline no height, so the whole plan pane scrolls */
@media (max-height: 620px) {
  .pane-plan { overflow-y: auto; }
  .pane-plan .timeline { flex: none; min-height: auto; overflow: visible; }
  .plan-foot { position: sticky; bottom: 0; z-index: 2; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* --- discovery: homepage, itinerary cards, preview --- */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.topbar { position: sticky; top: 0; z-index: 10; }
.topbar-nav a.on { color: var(--coral-ink); }
.topbar-nav a { white-space: nowrap; }
.place-dialog .demo-note { margin: 0; }
.topbar-nav .me { gap: 10px; }
.signout svg { display: none; }
@media (max-width: 520px) {
  .signout { padding: 6px; width: 32px; height: 32px; }
  .signout svg { display: block; }
}

.home { display: flex; flex-direction: column; }
.hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: center;
  padding: clamp(36px, 6vw, 84px) clamp(20px, 6vw, 88px) clamp(40px, 6vw, 72px);
  background:
    radial-gradient(circle at 88% 12%, rgba(246, 195, 67, .5), transparent 34%),
    radial-gradient(circle at 6% 100%, rgba(15, 124, 140, .2), transparent 42%),
    var(--paper);
}
.hero-inner { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(38px, 5.4vw, 72px); letter-spacing: -.025em; line-height: 1.02; }
.hero-search {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; max-width: 620px;
  background: var(--surface); border-radius: 999px; box-shadow: var(--shadow-lg);
}
.hero-search > svg { color: var(--muted); width: 20px; height: 20px; }
.hero-search input { border: 0; padding: 10px 2px; font-size: 17px; background: transparent; }
.hero-search input:focus { outline: none; }
.hero-search .btn { padding: 11px 22px; }
.suggest {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; right: 0; list-style: none; margin: 0; padding: 6px;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.suggest li[role=option] { display: flex; flex-direction: column; padding: 10px 14px; border-radius: 10px; cursor: pointer; }
.suggest li[role=option] span { font-size: 13px; color: var(--muted); }
.suggest li.on, .suggest li[role=option]:hover { background: var(--paper); }
.suggest-empty { padding: 12px 14px; color: var(--muted); font-size: 14px; }
.suggest-foot { padding: 6px 14px 4px; font-size: 12px; color: var(--muted); }
.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 40px; }
.geo-btn { background: var(--surface); }
.place-chip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chip-place { background: var(--ink); color: #fff; padding: 6px 12px; font-size: 13px; gap: 6px; }
.chip-place strong { font-weight: 800; }
.hero-status { min-height: 22px; font-size: 14px; color: var(--ink-2); font-weight: 600; }
.hero-art-postcards { position: relative; height: 340px; }
.postcard {
  position: absolute; width: 210px; height: 250px; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; box-shadow: var(--shadow-lg); border: 6px solid #fff;
  background: radial-gradient(circle at 75% 20%, hsl(calc(var(--hue) + 40) 90% 78% / .9), transparent 45%), linear-gradient(140deg, hsl(var(--hue) 70% 55%), hsl(calc(var(--hue) + 30) 75% 38%));
}
.postcard b { font-family: var(--serif); font-size: 26px; }
.postcard span { font-weight: 700; font-size: 13px; opacity: .9; }
.pc-0 { left: 6%; top: 40px; transform: rotate(-7deg); }
.pc-1 { left: 34%; top: 0; transform: rotate(4deg); z-index: 2; }
.pc-2 { left: 58%; top: 70px; transform: rotate(-2deg); }

.home-section { scroll-margin-top: calc(var(--bar-h) + 8px); padding: 44px clamp(20px, 6vw, 88px) 20px; max-width: 1400px; width: 100%; margin: 0 auto; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-head h2 { font-family: var(--serif); font-size: clamp(26px, 3vw, 36px); font-weight: 600; letter-spacing: -.015em; }
.section-sub { color: var(--muted); margin-top: 4px; max-width: 60ch; }
.cat-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.cat-chip { border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 13px; cursor: pointer; }
.cat-chip:hover { border-color: var(--ink); }
.cat-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }

.it-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.it-card { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.it-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.it-cover {
  position: relative; height: 150px; display: flex; align-items: flex-end; padding: 14px 16px;
  background: radial-gradient(circle at 80% 20%, hsl(calc(var(--hue, 20) + 40) 90% 76% / .9), transparent 46%), linear-gradient(135deg, hsl(var(--hue, 20) 70% 55%), hsl(calc(var(--hue, 20) + 25) 74% 40%));
}
.cover-food-culture { --hue: 18; }
.cover-nature-outdoors { --hue: 150; }
.cover-city-highlights { --hue: 205; }
.it-cover-glyph { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.22); color: #fff; }
.it-cover-glyph svg { width: 24px; height: 24px; }
.it-cover-dest { color: #fff; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; text-shadow: 0 1px 6px rgba(0,0,0,.25); }
.it-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.it-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.it-body h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; }
.it-body h3 a { color: inherit; text-decoration: none; }
.it-body h3 a:hover { text-decoration: underline; }
.it-meta, .pv-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.it-distance { color: var(--sea); }
.it-desc { color: var(--muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.it-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; }
.it-source { font-size: 12px; color: var(--muted); font-weight: 600; }
.skeleton .it-cover { background: var(--paper-2); }
.skeleton .it-body span { display: block; height: 12px; border-radius: 6px; background: var(--paper-2); }
.skeleton .it-body span:nth-child(2) { width: 70%; height: 18px; }
.skeleton { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.empty-inline { grid-column: 1 / -1; background: var(--surface); border: 2px dashed var(--line-2); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.empty-inline h3 { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.wide { grid-column: 1 / -1; }
.attractions { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.attractions-title { font-size: 15px; margin-bottom: 8px; }
.place-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 16px; }
.place-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 10px; border-radius: 10px; cursor: pointer; }
.place-row:hover { background: var(--paper); }
.place-row small { display: block; }
.place-pin { color: var(--coral); display: inline-flex; }

.dest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.dest-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 22px 20px; min-height: 150px; justify-content: flex-end;
  border: 0; border-radius: var(--radius); color: #fff; text-align: left; cursor: pointer; box-shadow: var(--shadow);
  background: linear-gradient(160deg, hsl(var(--hue) 70% 52%), hsl(calc(var(--hue) + 35) 70% 34%));
  transition: transform .15s;
}
.dest-card:hover { transform: translateY(-3px); }
.dest-name { font-family: var(--serif); font-size: 28px; font-weight: 600; }
.dest-region { font-size: 13px; opacity: .9; }
.dest-count { margin-top: 8px; font-size: 12px; font-weight: 800; background: rgba(255,255,255,.22); padding: 3px 10px; border-radius: 999px; }


.site-footer { margin-top: 56px; padding: 28px clamp(20px, 6vw, 88px) 40px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; }
.site-footer nav { display: flex; gap: 16px; flex-wrap: wrap; }
.site-footer nav a { color: var(--ink-2); font-weight: 600; font-size: 14px; }
.site-footer p { flex-basis: 100%; }

.preview { min-height: calc(100vh - var(--bar-h)); }
.preview-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(380px, 520px); min-height: calc(100vh - var(--bar-h)); }
.preview-map { position: sticky; top: var(--bar-h); height: calc(100vh - var(--bar-h)); background: #e8e2d6; }
.preview-panel { padding: 24px 28px 48px; display: flex; flex-direction: column; gap: 12px; border-left: 1px solid var(--line); background: var(--paper); }
.preview-panel h1 { font-family: var(--serif); font-size: clamp(30px, 3vw, 40px); font-weight: 600; letter-spacing: -.02em; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 700; text-decoration: none; font-size: 14px; }
.back-link:hover { color: var(--coral-ink); }
.pv-desc { font-size: 16px; color: var(--ink-2); }
.pv-source { font-size: 13px; color: var(--muted); background: var(--surface); border-radius: 10px; padding: 10px 12px; }
.pv-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pv-days { padding: 0; }
.pv-routes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pv-stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pv-stop { display: flex; align-items: flex-start; gap: 12px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; border-left: 4px solid var(--k); }
.pv-stop.selected { box-shadow: 0 0 0 2px var(--ink), var(--shadow); }
.pv-stop .stop-num { flex: none; box-shadow: none; }
.pv-stop h3 { font-family: var(--serif); font-size: 19px; font-weight: 600; }
.pv-leg { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: 14px; padding: 10px 0 10px 24px; border-left: 3px dotted var(--line-2); font-size: 13px; }

.place-dialog { width: min(560px, calc(100vw - 32px)); }
.panel-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.place-photo img { width: 100%; max-height: 300px; object-fit: cover; border-radius: 12px; display: block; }
.photo-credit { font-size: 12px; color: var(--muted); margin-top: 4px; }

@media (max-width: 899px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art-postcards { display: none; }
  .hero-search { padding-left: 14px; }
  .hero-search .btn { padding: 10px 14px; }
  .topbar-nav { gap: 8px; }
  .preview-grid { grid-template-columns: 1fr; }
  .preview-map { position: relative; top: 0; height: 46vh; }
  .preview-panel { border-left: 0; padding: 18px 16px 40px; }
}
@media (max-width: 520px) {
  .hide-xs { display: none; }
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar .brand { font-size: 19px; }
  .topbar-nav { gap: 10px; font-size: 14px; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .it-grid { grid-template-columns: 1fr; }
}

/* --- explore places on the map --- */
.xm-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 18px; align-items: stretch; }
.xm-map { position: relative; height: 540px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #e8e2d6; }
.xm-side { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; max-height: 540px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.xm-cats { margin-bottom: 4px; }
.xm-search { display: flex; gap: 8px; }
.xm-list { grid-template-columns: 1fr; }
.xm-panel { display: flex; flex-direction: column; gap: 10px; }
.xm-panel h3 { font-family: var(--serif); font-size: 24px; font-weight: 600; }
.xm-route { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.route-result { background: var(--paper); border-radius: 10px; padding: 10px 12px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.rating { font-size: 14px; }
.rating strong { font-size: 16px; }
@media (max-width: 899px) {
  .xm-grid { grid-template-columns: 1fr; }
  .xm-map { height: 360px; }
  .xm-side { max-height: none; }
}

/* --- first-visit location prompt --- */
.geo-prompt { display: flex; align-items: center; gap: 14px; margin-top: 16px; max-width: 620px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.geo-prompt[hidden] { display: none; }
.geo-prompt-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--sea); }
.geo-prompt-text { flex: 1; min-width: 0; }
.geo-prompt-text p { font-size: 14px; color: var(--muted); margin-top: 2px; }
.geo-prompt-actions { display: flex; gap: 8px; flex: none; }
@media (max-width: 620px) {
  .geo-prompt { flex-wrap: wrap; }
  .geo-prompt-actions { width: 100%; }
}

/* --- destination photos: the gradient stays underneath as the fallback --- */
.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.it-cover.has-photo, .dest-card.has-photo, .postcard.has-photo { overflow: hidden; isolation: isolate; }
.it-cover.has-photo::after, .dest-card.has-photo::after, .postcard.has-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(0,0,0,.55));
}
.it-cover.has-photo > :not(.cover-img), .dest-card.has-photo > :not(.cover-img), .postcard.has-photo > :not(.cover-img) { position: relative; z-index: 2; }
.it-cover.has-photo > .it-cover-glyph { position: absolute; }
.dest-card { position: relative; }
.postcard .cover-img { border-radius: 10px; }

.credits-list { display: grid; gap: 8px; padding-left: 20px; }

/* --- map interactions in the editor --- */
.pin-start { --c: var(--ink) !important; border-radius: 8px; transform: none; width: 34px; height: 34px; }
.pin-start > * { transform: none; }
.pin-temp { --c: #fff; color: var(--coral); border: 3px solid var(--coral); width: 28px; height: 28px; font-size: 15px; pointer-events: none; animation: pin-drop .18s ease-out; }
.pin-temp-start { color: var(--ink); border-color: var(--ink); border-radius: 8px; transform: none; }
.pin-temp-start > * { transform: none; }
@keyframes pin-drop { from { opacity: 0; translate: 0 -8px; } }
.schematic-stop.start circle { fill: var(--ink); }

.start-panel .start-body { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.start-options { display: grid; gap: 8px; padding: 12px 12px 4px; }
.start-option { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.start-option:hover:not(:disabled), .start-option:focus-visible { border-color: var(--ink); background: var(--paper); }
.start-option:disabled { opacity: .55; cursor: not-allowed; }
.start-option > svg { flex: none; width: 22px; height: 22px; color: var(--sea); }
.start-option span { display: flex; flex-direction: column; gap: 1px; }
.start-option small { color: var(--muted); font-size: 12.5px; }
.start-cand { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.start-badge { display: inline-block; background: var(--ink); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.stop-start .stop-num { background: var(--ink); border-radius: 8px; }
.timeline-hint { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; margin: 6px 0 0 44px; padding: 12px 14px; font-size: 14px; background: #e6f3f4; color: #0b4f58; border-radius: 12px; }
.day-routes, .day-start-link { margin-top: 8px; }
.day-start-link button { display: inline-flex; align-items: center; gap: 4px; }
.day-start-link svg { width: 15px; height: 15px; }

.explore-panel .xp-cats { padding: 10px 12px 0; margin-bottom: 4px; }
.nearby-row { flex-direction: row; align-items: center; gap: 12px; }
.nearby-thumb { flex: none; width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--paper-2); }
.nearby-thumb-empty { display: grid; place-items: center; color: var(--muted); }
.nearby-thumb-empty svg { width: 20px; height: 20px; }
.nearby-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nearby-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nearby-rating { font-size: 13px; font-weight: 700; }
.nearby-row .photo-credit { margin-top: 0; font-size: 11px; }
.tag-in { flex: none; background: #e3f1e9; color: #1f6b44; }
.custom-spot { margin: 6px 12px 12px; }
.already { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 14px; font-weight: 600; color: #1f6b44; background: #e3f1e9; padding: 8px 12px; border-radius: 10px; }
.already svg { width: 16px; height: 16px; }
.place-card .place-photo { margin: 0 16px; }
.place-card .place-photo img { width: 100%; max-height: 200px; object-fit: cover; border-radius: 12px; display: block; }

@media (max-width: 899px) {
  /* a bottom sheet on phones, so the map stays visible above it */
  .search-panel { top: auto; bottom: 10px; max-height: 58%; }
}

/* --- place card: a compact guide --- */
.place-photos-more { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 16px; }
.place-photos-more figure { margin: 0; min-width: 0; }
.place-photos-more img { width: 100%; height: 88px; object-fit: cover; border-radius: 10px; display: block; }
.place-photos-more .photo-credit { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-open { background: #e3f1e9; color: #1f6b44; }
.guide-section { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.guide-section h4 { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.guide-summary { font-size: 15px; line-height: 1.5; }
.guide-features { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.guide-features li { font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); }
.reviews { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.review { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--paper); border-radius: 10px; }
.review-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; }
.review-head a { font-weight: 700; color: var(--ink); }
.review-stars { color: #e08a00; letter-spacing: 1px; }
.review-text { font-size: 14px; line-height: 1.5; white-space: pre-line; }
.place-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; position: sticky; bottom: 0; background: var(--surface); padding: 10px 0; border-top: 1px solid var(--line); }
.place-actions .add-to-trip { flex: 1 1 auto; justify-content: center; }

/* --- scheduling card: a small editing tool --- */
.schedule-card { width: min(400px, calc(100vw - 32px)); padding: 20px 22px; }
.schedule-card h2 { font-size: 21px; }
.schedule-kicker { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--coral); }
.schedule-hint { margin-top: -4px; }
@media (max-width: 899px) {
  .schedule-card { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 18px 18px 0 0; max-height: 85vh; overflow: auto; }
}

/* --- the day as a chronological rail --- */
/* time | dot (the stop's map number) | card; one line runs through the dots */
.stop { grid-template-columns: 82px 1fr; gap: 8px; }
.stop-rail { position: relative; flex-direction: row; justify-content: flex-end; align-items: flex-start; gap: 6px; padding-top: 12px; }
.stop-rail::after { content: ""; position: absolute; top: 46px; bottom: 0; right: 14px; width: 2px; background: var(--line-2); }
.timeline > .stop:last-of-type .stop-rail::after { display: none; }
.stop-clock { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink); padding-top: 6px; white-space: nowrap; }
.stop-untimed .stop-clock { font-size: 11px; font-weight: 700; color: var(--muted); }
.stop-num { flex: none; z-index: 1; }
.leg { margin: 0 0 0 66px; padding: 8px 0 10px 40px; border-left: 2px solid var(--line-2); gap: 6px; } /* line under the dots' centres */
.leg-bad { border-left: 2px solid var(--danger); }
.leg-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.leg-summary { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.leg-summary svg { width: 18px; height: 18px; color: var(--sea); }
.modes-compact { gap: 4px; }
.modes-compact .mode { padding: 4px 8px; min-height: 30px; }
.modes-compact .mode svg { width: 16px; height: 16px; }
.leg-issue { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; }
.route-more { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.tag-meal { background: #fff0cc; color: #7d5400; }
@media (max-width: 420px) {
  .stop { grid-template-columns: 66px 1fr; }
  .leg { margin-left: 50px; padding-left: 32px; }
  .stop-clock { font-size: 13px; }
}

/* --- where the others are looking on the map (live presence) --- */
.peer-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.peer-layer > * { pointer-events: auto; }
.peer-marker {
  position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.peer-initials {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pc); color: #fff; font: 800 12px var(--sans);
  border: 3px solid #fff; box-shadow: 0 0 0 3px var(--pc), 0 4px 14px rgba(0,0,0,.25); outline: 2px dashed rgba(255,255,255,.9); outline-offset: 4px;
}
.peer-name { font: 700 11px var(--sans); color: var(--ink); background: rgba(255,255,255,.94); padding: 1px 7px; border-radius: 999px; box-shadow: var(--shadow); white-space: nowrap; }
.peer-edge {
  position: absolute; display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px;
  background: rgba(255,255,255,.96); border: 2px solid var(--pc); border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.22); cursor: pointer; white-space: nowrap;
  font: 700 12px var(--sans); color: var(--ink); max-width: 210px;
}
.peer-edge-right { flex-direction: row-reverse; padding: 4px 4px 4px 10px; }
.peer-arrow { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pc); color: #fff; font-size: 13px; line-height: 1; transition: transform .15s; }
.peer-tag { overflow: hidden; text-overflow: ellipsis; }
.peer-edge:hover, .peer-marker:hover .peer-name { background: #fff; }
@media (max-width: 899px) {
  .peer-edge { max-width: 160px; font-size: 11px; }
}

/* --- "My spot": the last place you picked, and the way back to it --- */
/* A target, not a pin: a dark ring with a sea-green centre and a small tab
   label, unlike the numbered tear-drop stops and the round initials of
   others' views. The label sits beside it, translucent and small, so an
   overlapping view marker stays readable. */
.my-spot { position: relative; display: grid; place-items: center; width: 30px; height: 30px; pointer-events: none; }
.my-spot-dot { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, var(--sea) 0 5px, #fff 6px 8px, var(--ink) 9px 13px); box-shadow: 0 0 0 2px #fff, 0 3px 10px rgba(0,0,0,.35); }
.my-spot-label { position: absolute; left: calc(100% + 4px); top: 50%; transform: translateY(-50%); font: 800 10.5px var(--sans); letter-spacing: .02em; color: #fff; background: rgba(28,36,48,.82); padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.my-spot.is-pulsing .my-spot-dot { animation: my-spot-pulse 1.4s ease-out 2; }
@keyframes my-spot-pulse { 0% { box-shadow: 0 0 0 2px #fff, 0 0 0 0 rgba(15,124,140,.65); } 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 22px rgba(15,124,140,0); } }
@media (prefers-reduced-motion: reduce) {
  .my-spot.is-pulsing .my-spot-dot { animation: none; outline: 3px solid var(--sea); outline-offset: 3px; }
}
.map-control-box { margin: 10px; }
.map-control {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 10px; border: 0; border-radius: 999px;
  background: #fff; color: var(--ink); font: 700 13.5px var(--sans); box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: pointer;
}
.map-control:hover:not(:disabled) { background: var(--paper); }
.map-control:disabled { color: var(--muted); cursor: default; opacity: .8; }
.map-control:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
.my-spot-icon { width: 18px; height: 18px; border-radius: 50%; flex: none; background: radial-gradient(circle, var(--sea) 0 3px, transparent 4px 5px, currentColor 6px 8px, transparent 9px); }
.map-control:not(:disabled) .my-spot-icon { color: var(--ink); }
@media (max-width: 520px) {
  /* phones: the icon alone, with its accessible name kept */
  .map-control { width: 40px; padding: 0; justify-content: center; }
  .my-spot-return-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* --- meals --- */
.meal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.meal-chips .cat-chip { padding: 6px 11px; font-size: 12.5px; }
.meal-times summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.meal-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13px; }
.meal-table th { text-align: left; font-weight: 700; padding: 4px 6px 4px 0; color: var(--ink-2); }
.meal-table td { padding: 3px 4px; }
.meal-table input { width: 100%; padding: 4px 6px; }
/* the stop's buttons wrap instead of running off the card; delete sits at the end */
.stop-actions { flex-wrap: wrap; }
.stop-actions .btn { margin-left: 0; }
.stop-actions .icon-btn-danger { margin-left: auto; }

/* My Trips: the card band carries the cover photo like the homepage cards */
.trip-card-band.has-photo { position: relative; overflow: hidden; isolation: isolate; }
.trip-card-band.has-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(0,0,0,.55)); }
.trip-card-band.has-photo > .trip-card-dest { position: relative; z-index: 2; }

/* --- publishing, reviews, join requests --- */
.trip-origin { margin: 0; color: var(--muted); }
.trip-origin a { color: var(--sea); }
.trip-card-origin { margin: 2px 0 0; }
.stop-added-by { margin: 4px 0 0; }
.it-source-user { color: var(--sea); }
.it-rating { margin: 4px 0 0; color: var(--ink-2); }
.pv-cover { position: relative; isolation: isolate; height: 160px; margin: 0 0 12px; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.pv-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-author { margin: 0; color: var(--muted); }
.pv-rating { margin: 4px 0 0; font-weight: 600; color: var(--ink-2); }
.pv-reviews { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.pv-reviews h2 { margin: 0; font-size: 20px; }
.review-form { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.review-form h3 { margin: 0; font-size: 16px; }
.star-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.star-opt { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 999px; cursor: pointer; }
.star-opt:has(input:checked) { border-color: var(--sun); background: var(--warn-bg); }
.star-opt input { margin: 0; }
.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.review { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.review p { margin: 0; }
.review-text { margin-top: 4px !important; white-space: pre-wrap; overflow-wrap: anywhere; }
.stars { color: var(--warn); letter-spacing: 1px; }
.pref-form h3 { margin: 8px 0 0; }
.pref-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.plan-preview .change-preview li + li { margin-top: 6px; }
.plan-caveats { margin: 4px 0 0; padding-left: 18px; }

/* ===== Trip editor, October 2026 redesign =====
   The map already carries a lot of colour and detail, so the panels around it
   are calm: one soft neutral background, white cards with hairline borders
   instead of shadows, muted category colours, one accent (coral) for primary
   actions, and amber/green only for status. */
.workspace {
  --ed-bg: #f5f4f1;
  --ed-card: #ffffff;
  --ed-line: #e7e4de;
  --ed-soft: #faf9f7;
  --ok: #2f7d55;
  --ok-bg: #e9f4ee;
}
.workspace .pane-plan { background: var(--ed-bg); border-left: 1px solid var(--ed-line); }
.workspace .kind-attraction { --k: #e2734f; }
.workspace .kind-food { --k: #d49a2a; }
.workspace .kind-shopping { --k: #8c79d6; }
.workspace .kind-accommodation { --k: #3f8f9c; }
.workspace .kind-custom { --k: #7b8592; }

/* timeline: wider, flatter cards; the time and number line up on the rail */
.workspace .timeline { padding: 4px 20px 28px; }
.workspace .day-head { padding: 10px 24px 12px; }
.workspace .stop { grid-template-columns: 52px 1fr; gap: 12px; }
.workspace .stop-rail { padding-top: 12px; gap: 6px; }
.workspace .stop-clock { font-size: 12px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.workspace .stop-num { box-shadow: 0 0 0 4px var(--ed-bg); }
.workspace .stop-card { box-shadow: none; border: 1px solid var(--ed-line); border-left: 3px solid var(--k); border-radius: 12px; padding: 12px 16px 10px; }
.workspace .stop.selected .stop-card { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 70%, transparent); }
.workspace .stop-card h3 { font-size: 18px; }
.workspace .stop-actions { border-top-color: var(--ed-line); }
.workspace .stop-notes { background: var(--ed-soft); }
.workspace .leg { margin-left: 25px; padding-left: 32px; border-left: 2px dotted #d9d4ca; }
.stop-added-by { margin: 0; }

/* a previewed suggestion: dashed, clearly not saved */
.stop-proposed .stop-card { border: 1.5px dashed var(--coral); border-left-width: 1.5px; background: color-mix(in srgb, var(--coral) 5%, var(--ed-card)); }
.stop-proposed .stop-num { background: var(--surface); color: var(--coral-ink); border: 1.5px dashed var(--coral); }
.stop-proposed .start-badge { background: color-mix(in srgb, var(--coral) 14%, transparent); color: var(--coral-ink); }

/* transport modes: each state looks different and says why on hover/tap */
.mode-ok { }
.mode[aria-disabled="true"] { cursor: help; }
.mode-excluded { border-style: dashed; color: var(--muted); background: transparent; text-decoration: line-through; }
.mode-none { color: var(--muted); background: var(--ed-soft); border-color: var(--ed-line); }
.mode-needs-time { color: var(--warn); border-style: dashed; border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: transparent; }
.mode-error { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: transparent; }
.mode-x { font-weight: 800; font-size: 13px; line-height: 1; margin-left: -2px; }
.mode-ok[aria-disabled="true"]:not(.on) { opacity: .75; }

/* planning assistant */
.workspace .pane-copilot { background: var(--ed-card); border-left: 1px solid var(--ed-line); padding: 14px 16px 28px; }
.pa-head { display: flex; align-items: center; justify-content: space-between; min-height: 36px; }
.pa-head h2 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.pa-body { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.pa-status { background: var(--ed-soft); border: 1px solid var(--ed-line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.pa-day { font-weight: 800; font-size: 15px; }
.pa-span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pa-lines { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.pa-line { display: flex; align-items: center; gap: 8px; }
.pa-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.pa-ok .pa-dot { background: var(--ok); }
.pa-ok { color: var(--ok); font-weight: 700; }
.pa-warn .pa-dot { background: #d49a2a; }
.pa-bad .pa-dot { background: var(--danger); }
.pa-bad { color: var(--danger); font-weight: 700; }
.pa-muted { color: var(--muted); }
.pa-fixes { margin-top: 8px; font-size: 13px; }
.pa-fixes summary { cursor: pointer; font-weight: 700; color: var(--ink-2); }
.pa-fixes .issue { margin-top: 8px; border: 0; padding: 10px 12px; border-radius: 10px; min-width: 0; }
.pa-fixes .issue legend { padding: 0; margin-bottom: 6px; float: left; width: 100%; }
.pa-fixes-h { font-weight: 700; color: var(--ink-2); margin: 0; }
.pa-ai-pick { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.fix-option { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 8px; cursor: pointer; clear: both; }
.fix-option input[type=radio] { width: auto; min-height: 0; margin: 3px 0 0; padding: 0; flex: none; box-shadow: none; }
.fix-option > span { flex: 1; min-width: 0; }
.fix-clear { color: var(--leaf, #2f7d4f); font-weight: 600; }
.fix-option.on { background: var(--surface); box-shadow: var(--shadow); }
.fix-option.is-off { opacity: .55; cursor: not-allowed; }
.fix-option .tag-ai { margin-left: 6px; }
.fix-why { display: block; margin-top: 2px; }
.fix-summary { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface); }
.pa-fixes > .btn-block { margin-top: 10px; }
.pa-change-pick { display: flex; gap: 8px; align-items: center; flex: 1; cursor: pointer; }
.pa-change-card { display: flex; gap: 8px; align-items: flex-start; }
.pa-pick { width: auto; min-height: 0; padding: 0; margin: 0; flex: none; box-shadow: none; }
.pa-change-card > .pa-pick { margin-top: 14px; }
.pa-change-card > article { flex: 1; min-width: 0; }
.pa-actions { display: flex; flex-direction: column; gap: 8px; }
.pa-action {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 12px 12px 12px 14px; border: 1px solid var(--ed-line); border-radius: 12px; background: var(--ed-card);
  transition: border-color .15s, background .15s;
}
.pa-action:hover:not(:disabled) { border-color: color-mix(in srgb, var(--coral) 45%, var(--ed-line)); background: color-mix(in srgb, var(--coral) 4%, var(--ed-card)); }
.pa-action:disabled { cursor: not-allowed; opacity: .55; }
.pa-action > svg { color: var(--muted); }
.pa-action-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--coral) 11%, transparent); color: var(--coral-ink); flex: none; }
.pa-action-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pa-action-text strong { font-size: 14.5px; }
.pa-action-text small { font-size: 12.5px; color: var(--muted); }
.pa-prefs { align-self: flex-start; font-size: 13px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.pa-back { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.pa-title { font-size: 18px; font-weight: 800; margin-top: -6px; }
.pa-sub { font-size: 13px; color: var(--muted); margin-top: -8px; }
.pa-summary { font-size: 13.5px; }
.pa-meals { align-self: stretch; }
.pa-meals button { padding: 6px 10px; border: 0; background: transparent; border-radius: 999px; font-weight: 700; font-size: 13px; cursor: pointer; }
.pa-meals button.on { background: var(--ed-card); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.pa-cards, .pa-change-list { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.pa-card { border: 1px solid var(--ed-line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; background: var(--ed-card); }
.pa-card.previewing { border-color: var(--coral); box-shadow: 0 0 0 1px var(--coral); }
.pa-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pa-card h4 { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.25; }
.pa-time { font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-2); flex: none; }
.pa-facts { font-size: 12.5px; color: var(--muted); }
.pa-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.pa-label { font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--ed-soft); border: 1px solid var(--ed-line); color: var(--ink-2); }
.pa-card-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.pa-card-actions .btn-primary { margin-left: auto; }
.pa-group { display: flex; flex-direction: column; gap: 8px; }
.pa-group + .pa-group { margin-top: 12px; }
.pa-group-title { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 800; }
.pa-change { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--ed-line); border-radius: 10px; }
.pa-more summary { cursor: pointer; color: var(--muted); font-weight: 700; }
.pa-more ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }

@media (max-width: 899px) {
  .workspace .stop { grid-template-columns: 44px 1fr; gap: 8px; }
  .workspace .timeline { padding: 4px 12px 24px; }
  .workspace .leg { margin-left: 21px; padding-left: 24px; }
  .pa-action { padding: 14px; }
}
/* a suggestion card opens its place on the map */
.pa-card-link { cursor: pointer; transition: border-color .15s, background .15s; }
.pa-card-link:hover { border-color: color-mix(in srgb, var(--coral) 40%, var(--ed-line)); }
.pa-card-link.open { border-color: var(--ink-2); background: var(--ed-soft); }
.pa-card-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--sea) 55%, transparent); outline-offset: 2px; }
/* opening hours on suggestions and in the scheduling card */
.pa-hours { font-size: 12.5px; font-weight: 700; }
.pa-hours-confirmed { color: var(--ok, #2f7d55); }
.pa-hours-unverified, .pa-hours-unknown { color: var(--warn); }
.pa-hours-problem { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--warn-bg); display: flex; flex-direction: column; gap: 6px; }
.pa-dur select { padding: 4px 6px; font-size: 13px; border-radius: 8px; border: 1px solid var(--ed-line, var(--line)); background: var(--surface); }
.schedule-hours { font-size: 13px; padding: 8px 10px; border-radius: 10px; }
.schedule-hours.is-ok { background: var(--ok-bg, #e9f4ee); color: var(--ok, #2f7d55); }
.schedule-hours.is-unsure { background: var(--warn-bg); color: var(--warn); }
.schedule-hours.is-bad { background: var(--danger-bg); color: var(--danger); }
.schedule-hours .linklike { font-weight: 800; text-decoration: underline; }

/* ===== Homepage, October 2026 redesign =====
   Editorial travel: a calm warm-white page where photography carries the
   colour. One accent (coral), one serif for display, the sans for
   everything else. Full-width visuals alternate with structured sections. */
.home { --hm-bg: #fbf9f5; --hm-soft: #f3f0ea; --hm-line: #e8e3da; background: var(--hm-bg); }

/* the journey hero: the view from a moving train through one large window
   (journey-hero.js). Each scene is one photo, drifting slowly within its
   edges. The window is set into the page itself: a thin, even margin of
   the page's own warm background on every side, softly rounded corners and
   a hairline edge, so the hero and the search section below read as one
   page. An ordinary block: the page scrolls past it. A little of the next
   section shows below it, so it's plain there's more. */
.jh { position: relative; height: clamp(480px, calc(100svh - var(--bar-h) - 56px), 880px); overflow: hidden; color: #fff; isolation: isolate; background: var(--hm-bg, #fbf9f5); }
.jh-picture { position: absolute; inset: 0; overflow: hidden; }
/* the scenery and the tunnel are clipped to the glass's rounded opening */
.jh-scene, .jh-tunnel { position: absolute; left: var(--jh-gx); top: var(--jh-gy); width: var(--jh-gw); height: var(--jh-gh); border-radius: var(--jh-radius); overflow: hidden; }
.jh-scene { visibility: hidden; background: #d9d4cb; }
/* the photo is positioned in hero px (placePhoto), so undo the box offset */
.jh-photo { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; will-change: transform; user-select: none; margin: calc(-1 * var(--jh-gy)) 0 0 calc(-1 * var(--jh-gx)); }
.jh-scene:not(.jh-ready) .jh-photo { visibility: hidden; }
.jh-tunnel { z-index: 10; visibility: hidden; pointer-events: none; }
.jh-glass { z-index: 12; }
.jh-ui { z-index: 14; }
/* the tunnel: a dark band with soft edges sliding across the glass from
   the right, lamps streaking past inside */
.jh-band { position: absolute; top: 0; bottom: 0; left: 0; will-change: transform; background: linear-gradient(#0b0907, #17120d 30%, #120e0a 70%, #070605); }
.jh-band::before, .jh-band::after { content: ""; position: absolute; top: 0; bottom: 0; width: 22%; }
.jh-band::before { left: 1px; transform: translateX(-100%); background: linear-gradient(90deg, rgba(13, 10, 8, 0), rgba(13, 10, 8, .6) 60%, #0d0a08); }
.jh-band::after { right: 1px; transform: translateX(100%); background: linear-gradient(90deg, #0d0a08, rgba(13, 10, 8, .6) 40%, rgba(13, 10, 8, 0)); }
.jh-band-in { position: absolute; inset: 0; overflow: hidden; }
.jh-lamps { position: absolute; left: 0; right: -840px; top: 24%; height: 10px; will-change: transform; background: repeating-linear-gradient(90deg, transparent 0 300px, rgba(255, 186, 96, .85) 330px 380px, transparent 420px); filter: blur(5px); }
/* the glass's edge: a hairline in a warm neutral, the faintest inner shade
   at the top, and a barely-there sheen. No frame, no heavy shadow. */
.jh-glass { position: absolute; left: var(--jh-gx); top: var(--jh-gy); width: var(--jh-gw); height: var(--jh-gh); border-radius: var(--jh-radius); pointer-events: none;
  background: linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, .035) 38%, transparent 44%);
  box-shadow: 0 0 0 1px rgba(120, 100, 76, .22), inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 10px 18px -12px rgba(0, 0, 0, .28); }
/* the interface floats over the bottom of the view on a soft gradient,
   never in an opaque box */
.jh-ui { position: absolute; inset: 0; pointer-events: none; }
.jh-ui a, .jh-ui button { pointer-events: auto; }
.jh-pause { position: absolute; top: calc(var(--jh-gy) + 12px); right: calc(100% - var(--jh-gx) - var(--jh-gw) + 12px); min-height: 44px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; background: rgba(8, 10, 14, .55); color: #fff; font: 600 13px/1 var(--sans); cursor: pointer; }
.jh-pause:hover { background: rgba(8, 10, 14, .8); }
.jh-ui::before { content: ""; position: absolute; z-index: -1; left: var(--jh-gx); width: var(--jh-gw); bottom: calc(100% - var(--jh-gy) - var(--jh-gh)); height: min(46%, 320px); border-radius: 0 0 var(--jh-radius) var(--jh-radius);
  background: linear-gradient(rgba(8, 10, 14, 0), rgba(8, 10, 14, .28) 45%, rgba(8, 10, 14, .62)); }
.jh-copy { position: absolute; left: calc(var(--jh-gx) + clamp(20px, 3.4vw, 56px)); bottom: calc(100% - var(--jh-gy) - var(--jh-gh) + clamp(26px, 4vh, 48px)); max-width: min(620px, 48%); text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.jh-brand { margin: 0 0 10px; font: 800 13px/1 var(--sans); letter-spacing: .32em; color: var(--sun); }
.jh-title { margin: 0 0 20px; font: 600 clamp(30px, 3.2vw, 54px)/1.04 var(--serif); letter-spacing: -.015em; color: #fff; }
.jh-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.jh-actions .btn { text-shadow: none; }
.jh-btn-light { background: rgba(255, 255, 255, .92); color: var(--ink); text-decoration: none; }
.jh-btn-light:hover { background: #fff; }
.jh-ui :is(a, button):focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.jh-bar { position: absolute; right: calc(100% - var(--jh-gx) - var(--jh-gw) + clamp(20px, 3.4vw, 56px)); bottom: calc(100% - var(--jh-gy) - var(--jh-gh) + clamp(26px, 4vh, 48px)); display: flex; flex-direction: column; align-items: flex-end; gap: 12px; max-width: 48%; }
/* the destination: a line of type, not a panel */
.jh-dest { text-align: right; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.jh-kicker { margin: 0 0 4px; font: 700 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.jh-count { color: var(--sun); }
.jh-place { margin: 0; font: 800 18px/1.1 var(--sans); letter-spacing: .16em; color: #fff; }
.jh-place-row { display: flex; align-items: baseline; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.jh-sub { margin: 0; font: 500 italic 15px/1.2 var(--serif); color: rgba(255, 255, 255, .9); }
.jh-stops { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; padding: 3px; border-radius: 18px; background: rgba(10, 12, 16, .32); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.jh-stop { display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .9); font: 600 13px/1 var(--sans); cursor: pointer; white-space: nowrap; }
.jh-stop:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.jh-stop[aria-current="true"] { background: #fff; color: var(--ink); }
.jh-stop-n { font-size: 11px; opacity: .65; font-variant-numeric: tabular-nums; }
/* phones and portrait tablets: the window still fills the hero; the
   controls stack at the bottom of the view, full width, and the scenery is
   framed above them */
.jh-portrait .jh-ui::before { height: 62%; background: linear-gradient(rgba(8, 10, 14, 0), rgba(8, 10, 14, .38) 35%, rgba(8, 10, 14, .74)); }
/* (padding percentages are of the width, so use the margin itself: it's the
   same on every side) */
.jh-portrait .jh-ui { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 0 calc(var(--jh-frame) + 14px) calc(var(--jh-frame) + 10px); }
.jh-portrait :is(.jh-copy, .jh-bar) { position: relative; left: auto; right: auto; bottom: auto; max-width: none; }
.jh-portrait .jh-bar { order: -1; align-items: stretch; gap: 10px; }
.jh-portrait .jh-title { font-size: clamp(26px, 7vw, 36px); margin-bottom: 14px; }
.jh-portrait .jh-actions { flex-wrap: nowrap; }
.jh-portrait .jh-actions .btn { flex: 1; justify-content: center; text-align: center; padding: 12px 8px; font-size: 15px; }
.jh-portrait .jh-dest { text-align: left; }
.jh-portrait .jh-place-row { justify-content: flex-start; }
.jh-portrait .jh-stops { flex-wrap: nowrap; border-radius: 999px; overflow-x: auto; scrollbar-width: none; }
.jh-portrait .jh-stop { flex: 1 1 auto; justify-content: center; min-height: 44px; padding: 9px 6px; gap: 0; font-size: 11px; }
.jh-portrait .jh-stop-n { display: none; }
/* short landscape screens: a smaller headline */
@media (max-height: 820px) and (min-aspect-ratio: 1/1) {
  .jh-title { font-size: clamp(26px, 2.6vw, 40px); margin-bottom: 14px; }
  .jh-kicker { display: none; }
}
.btn-lg { padding: 13px 26px; font-size: 16px; }

/* search first: the map section, right under the hero */
#explore-map { padding-top: 40px; }
#explore-map .section-head { margin-bottom: 14px; }
#explore-map h2 { font-size: clamp(30px, 3.4vw, 42px); }
.finder { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; max-width: 760px; }
.finder .geo-prompt { padding: 12px 14px; }
.finder .geo-prompt p { font-size: 13px; }
.finder .hero-search { box-shadow: 0 10px 30px -18px rgba(28, 36, 48, .4); border: 1px solid var(--hm-line); max-width: 760px; }
.finder .hero-search input { font-size: 17px; }
.finder .geo-prompt { max-width: 760px; box-shadow: none; border: 1px solid var(--hm-line); }
.xm-note { margin-top: 10px; font-size: 13.5px; }
.xm-start { padding: 12px 6px; display: flex; flex-direction: column; gap: 10px; }
.xm-ideas { display: flex; flex-wrap: wrap; gap: 6px; }
.xm-ideas-title { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.xm-start-title, .xm-next-title { font-family: var(--serif); font-size: 21px; font-weight: 600; }
.xm-next { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--hm-line); }
.xm-next-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* the old hero reserved room for these; in the finder an empty one takes none */
.finder .hero-actions { min-height: 0; }
.finder .hero-actions:not(:has(> :not([hidden]):not(:empty))), .finder .hero-status:empty { display: none; }

/* ready-made trips: filters right above the cities and itineraries they filter */
.rx { padding-top: 56px; }
.rx-filters { position: sticky; top: var(--bar-h); z-index: 3; background: var(--hm-bg); padding: 10px 0 4px; margin: 0 0 4px; }
.rx-its { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.rx-its > .it-grid { width: 100%; }
.rx-sub { font-family: var(--serif); font-size: 24px; font-weight: 600; }
.near[hidden] { display: none; }
.rx-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.rx-tab { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--hm-line); background: var(--surface); font-weight: 700; font-size: 14px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.rx-tab:hover { border-color: var(--ink-2); }
.rx-tab.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.rx-countries { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.rx-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 210px; gap: 16px; margin-top: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 4px 2px 12px; scrollbar-width: thin; }
.rx-grid > .rx-card { scroll-snap-align: start; }
.rx-grid > p { grid-column: 1 / -1; }
.rx-card { display: flex; flex-direction: column; background: var(--surface); border-radius: 16px; overflow: hidden; border: 1px solid var(--hm-line); scroll-margin-top: calc(var(--bar-h) + 16px); transition: transform .2s, box-shadow .2s; }
.rx-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -18px rgba(28, 36, 48, .35); }
.rx-photo { position: relative; display: block; aspect-ratio: 3 / 2; border: 0; padding: 0; cursor: pointer; overflow: hidden; isolation: isolate; background: linear-gradient(140deg, hsl(var(--hue) 45% 62%), hsl(calc(var(--hue) + 30) 45% 42%)); }
.rx-photo .cover-img { transition: transform .5s ease; }
.rx-card:hover .rx-photo .cover-img { transform: scale(1.04); }
.rx-media { position: relative; }
.rx-media > .rx-photo { width: 100%; }
.rx-body { padding: 10px 13px 13px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.rx-country { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rx-body h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.rx-blurb { color: var(--ink-2); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rx-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.rx-go { align-self: flex-start; margin-top: auto; padding-top: 6px; font-weight: 800; color: var(--coral-ink); }

/* featured itinerary cards: flatter, photo-led */
.home .it-card { box-shadow: none; border: 1px solid var(--hm-line); border-radius: 16px; }
.home .it-card:hover { box-shadow: 0 14px 34px -18px rgba(28, 36, 48, .35); }

/* photo stream: full width, a loose editorial rhythm, slow drift on desktop */
/* inspiration band between the map and the ready-made trips */
.ps { padding: 44px 0 30px; margin-top: 36px; background: var(--hm-soft); }
.ps-head { padding-bottom: 6px; }
.ps-scroller { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 8px 0 20px; }
.ps-scroller::-webkit-scrollbar { display: none; }
.ps-track { display: flex; align-items: flex-end; gap: 18px; width: max-content; padding: 0 clamp(20px, 6vw, 88px); }
.ps-tile { position: relative; flex: none; display: block; border-radius: 14px; overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; background: var(--hm-soft); }
.ps-tile .cover-img { transition: transform .6s ease; }
.ps-tile:hover .cover-img, .ps-tile:focus-visible .cover-img { transform: scale(1.05); }
.ps-xl { width: 440px; height: 300px; }
.ps-l { width: 360px; height: 250px; }
.ps-m { width: 280px; height: 210px; }
.ps-s { width: 200px; height: 270px; }
.ps-cap { position: absolute; z-index: 2; left: 12px; bottom: 12px; display: flex; flex-direction: column; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.ps-cap b { font-family: var(--serif); font-size: 21px; font-weight: 600; }
.ps-cap small { font-size: 12px; font-weight: 700; opacity: .9; }
.ps-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .5)); pointer-events: none; }
@media (hover: hover) and (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .ps-scroller { overflow-x: hidden; }
  .ps-track { animation: ps-drift calc(var(--ps-count, 10) * 7s) linear infinite; }
  .ps-scroller:hover .ps-track, .ps-scroller:focus-within .ps-track { animation-play-state: paused; }
  @keyframes ps-drift { to { transform: translateX(-50%); } }
}

/* map section */
.mx { padding-bottom: 48px; }
.mx .explore-map, .mx > .xm, .mx > section { margin-top: 6px; }

@media (max-width: 899px) {
  .finder { padding: 14px; }
  .rx-grid { grid-auto-columns: 172px; gap: 12px; }
  .rx-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -4px; padding: 2px 4px; }
  .rx-tab { flex: none; }
  .ps-scroller { scroll-snap-type: x mandatory; }
  .ps-tile { scroll-snap-align: start; }
  .ps-xl { width: 300px; height: 210px; }
  .ps-l { width: 260px; height: 190px; }
  .ps-m { width: 220px; height: 170px; }
  .ps-s { width: 160px; height: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  .rx-card, .rx-photo .cover-img, .ps-tile .cover-img { transition: none; }
}

/* =====================================================================
   Wayline, November 2026: the line.
   One idea runs through every page: a trip is a line through places, like
   a transit map. The plan's rail and the map's route are the same line in
   the same colours; stops are stations on it; the legs between them are
   the line's segments, dashed until Google has a real route. Everything
   else is quiet: a cool paper ground, one grotesk for words, one mono for
   times and numbers, hairline rules instead of shadows, and one accent
   (signal red) kept for the primary action on a screen.
   This layer comes last and replaces the earlier ones where they overlap.
   ===================================================================== */
:root {
  --paper: #f4f3ef;
  --paper-2: #eae8e2;
  --surface: #ffffff;
  --ink: #15171a;
  --ink-2: #3d4148;
  --muted: #6b7079;
  --line: #e1dfd8;
  --line-2: #cfccc3;
  --coral: #e5482d;          /* signal: the primary action, and nothing else */
  --coral-ink: #b83519;
  --sea: #2b4db8;            /* links */
  --leaf: #1f6f5c;
  --violet: #6d5bb5;
  --danger: #c4372b;
  --danger-bg: #fbeae7;
  --warn: #8a5a16;
  --warn-bg: #f8f0de;
  --mode-walk: #1f6f5c;
  --mode-transit: #2b4db8;
  --mode-drive: #8a5a16;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 0 rgba(21, 23, 26, .04);
  --shadow-lg: 0 18px 48px -20px rgba(21, 23, 26, .32);
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: var(--sans);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* type scale: 12 · 13 · 15 · 18 · 24 · 40 · fluid display */
  --t-xs: 12px; --t-sm: 13px; --t-md: 15px; --t-lg: 18px; --t-xl: 24px; --t-2xl: 40px;
  --t-display: clamp(40px, 6.2vw, 96px);
}
body { font-family: var(--sans); font-size: var(--t-md); letter-spacing: -.005em; background: var(--paper); }
h1, h2, h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -.02em; }
.small { font-size: var(--t-sm); }
.tiny { font-size: var(--t-xs); }
a { color: var(--sea); text-underline-offset: 3px; }

/* --- labels: mono, small, numbered where it helps --- */
.eyebrow, .dash-section h2, .leg-label, .pa-group-title, .guide-section h4, .schedule-kicker, .rx-country, .day-kicker, .jh-kicker {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.eyebrow-n { color: var(--ink); }
.eyebrow-n::after { content: ""; display: inline-block; width: 28px; height: 1px; margin-left: 10px; vertical-align: middle; background: var(--line-2); }

/* --- buttons: three kinds, and only three --- */
/* primary: solid signal red. secondary: hairline ink outline. quiet: text. */
.btn { border-radius: 8px; font-weight: 600; font-size: 14px; padding: 9px 15px; letter-spacing: -.005em; gap: 7px; }
.btn-sm { padding: 6px 11px; font-size: 13px; border-radius: 7px; }
.btn-lg { padding: 13px 22px; font-size: 15px; border-radius: 9px; }
.btn-primary { background: var(--coral); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--coral-ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-ghost, .btn-outline { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover:not(:disabled), .btn-outline:hover:not(:disabled) { background: var(--surface); border-color: var(--ink); color: var(--ink); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--ink-2); padding-left: 8px; padding-right: 8px; }
.btn-quiet:hover:not(:disabled) { color: var(--ink); background: var(--paper-2); }
.icon-btn { border-radius: 8px; border-color: transparent; background: transparent; color: var(--ink-2); }
.icon-btn:hover:not(:disabled) { background: var(--paper-2); border-color: transparent; }
.icon-btn-danger:hover:not(:disabled) { background: var(--danger-bg); color: var(--danger); }
.linklike.small { color: var(--sea); font-weight: 500; }

/* --- tags: a dot and words, never something that looks pressable --- */
.tag, .chip { background: none; border: 0; padding: 0; border-radius: 0; font-size: var(--t-xs); font-weight: 500; color: var(--muted); gap: 6px; }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; flex: none; }
.tag-attraction, .tag-food, .tag-shopping, .tag-accommodation, .tag-custom, .tag-meal, .tag-ai, .tag-rule, .tag-open, .tag-in { background: none; color: var(--ink-2); }
.tag-attraction::before { background: #c2563a; opacity: 1; }
.tag-food::before, .tag-meal::before { background: #b98216; opacity: 1; }
.tag-shopping::before { background: #6d5bb5; opacity: 1; }
.tag-accommodation::before { background: #2e7c88; opacity: 1; }
.tag-demo { background: none; border: 0; color: var(--warn); }
.chip-danger { color: var(--danger); font-weight: 600; }
.chip-soft { color: var(--ink-2); }
.chip-live { color: var(--leaf); }
.badge { font-family: var(--mono); font-weight: 600; border-radius: 5px; }
/* filters stay pills: they are buttons, and say so */
.cat-chip, .rx-tab { border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font-weight: 500; font-size: 13px; padding: 7px 14px; color: var(--ink-2); }
.cat-chip:hover, .rx-tab:hover { border-color: var(--ink); color: var(--ink); }
.cat-chip.on, .rx-tab.on { background: var(--ink); border-color: var(--ink); color: #fff; }

input:not([type=checkbox]), select, textarea { border-radius: 8px; border-color: var(--line-2); }
.dialog { border-radius: 14px; }
.dialog h2, .auth-card h2, .invite-card h1, .empty h3, .timeline-empty h3, .empty-inline h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -.02em; }

/* --- top bar --- */
.topbar { height: 60px; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom-color: var(--line); }
:root { --bar-h: 60px; }
.brand { font-family: var(--sans); font-weight: 700; font-size: 19px; letter-spacing: -.03em; gap: 8px; }
.brand-mark { width: 22px; height: 22px; border-radius: 6px; }
.topbar-nav { gap: 6px; font-weight: 500; font-size: 14px; }
.topbar-nav > a { padding: 6px 10px; border-radius: 7px; color: var(--ink-2); }
.topbar-nav > a:hover { background: var(--paper-2); color: var(--ink); }
.topbar-nav > a.on { color: var(--ink); background: var(--paper-2); }
.topbar-nav .me { margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--line); gap: 8px; }
.me-name { font-size: 13px; color: var(--ink-2); max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { font-family: var(--mono); font-weight: 600; letter-spacing: 0; }

/* =========================== the editor =========================== */
.trip-bar { height: 60px; gap: 8px; padding: 0 12px; background: var(--surface); }
.trip-title h1 { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.trip-title p { font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; color: var(--muted); }
.presence { font-size: 12.5px; font-weight: 500; color: var(--muted); padding-right: 4px; }
.conn { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; padding-right: 8px; margin-right: 2px; border-right: 1px solid var(--line); }
.trip-bar .btn-ghost { border-color: transparent; }
.trip-bar .btn-ghost:hover:not(:disabled) { background: var(--paper-2); border-color: transparent; }
.trip-bar .btn-dark { background: var(--ink); }

.workspace { --ed-bg: var(--paper); --ed-card: var(--surface); --ed-line: var(--line); --ed-soft: var(--paper); }
.pane-map { background: #e9e8e3; }
.workspace .pane-plan { background: var(--surface); border-left: 1px solid var(--line); }

/* map overlays: white, hairline, no heavy shadow */
.search { top: 14px; left: 14px; border-radius: 10px; padding: 5px 5px 5px 14px; box-shadow: 0 1px 2px rgba(21,23,26,.1), 0 8px 24px -12px rgba(21,23,26,.3); }
.search-panel { border-radius: 12px; top: 68px; left: 14px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.map-note { border-radius: 10px; box-shadow: none; border: 1px solid var(--line); background: rgba(255,255,255,.96); }

/* map stops: stations. Ink, white ring, mono number; the category is a dot */
.pin {
  position: relative; width: 30px; height: 30px; border-radius: 50%; transform: none;
  background: var(--ink); color: #fff; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35);
  font: 600 12px var(--mono);
}
.pin > * { transform: none; }
.pin-kind { position: absolute; right: -4px; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--k, var(--muted)); border: 2px solid #fff; }
.pin-on { outline: 0; box-shadow: 0 0 0 3px var(--coral), 0 2px 8px rgba(0,0,0,.35); }
.pin-start { border-radius: 7px; background: var(--ink); width: 32px; height: 32px; }
.pin-result { width: 16px; height: 16px; background: #fff; border: 4px solid var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.pin-result.pin-on { background: var(--coral); border-color: var(--coral); }
.pin-temp { --c: #fff; background: #fff; color: var(--coral); border: 3px solid var(--coral); }
.schematic { background: #eeede8; }
.schematic-svg .grid { stroke: rgba(21,23,26,.05); }
.schematic-path { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 1 7; opacity: .55; }
.schematic-route { stroke-width: 6; opacity: .92; }
.schematic-stop circle { fill: var(--ink); stroke: #fff; stroke-width: 3; }
.schematic-stop.on circle { stroke: var(--coral); stroke-width: 4; }
.schematic-stop .num { font: 600 12px var(--mono); }
.schematic-stop .label, .schematic-result text { font: 600 13px var(--sans); fill: var(--ink); }
.schematic-result circle { stroke: var(--ink); }
.schematic-result.on circle { fill: var(--coral); stroke: var(--coral); }

/* day tabs: a row of dates, not a row of cards */
.day-tabs { gap: 0; padding: 0 20px; border-bottom: 1px solid var(--line); }
.day-tab { min-width: 0; padding: 12px 14px 11px; border: 0; border-radius: 0; background: none; flex-direction: row; align-items: baseline; gap: 8px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted); }
.day-tab:hover { color: var(--ink); border-color: var(--line-2); }
.day-tab.on { background: none; color: var(--ink); border-bottom-color: var(--ink); }
.day-tab-n { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.day-tab-date { font-size: 13px; opacity: 1; }
.day-tab-count { display: none; }
.day-tab .dot-danger { position: static; align-self: center; }
.day-tab.drop-target { outline: 0; background: var(--paper); }

.workspace .day-head { padding: 22px 24px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.day-kicker { margin: 0; }
.day-head h2 { font-family: var(--sans); font-size: var(--t-xl); font-weight: 600; letter-spacing: -.025em; }
.day-sum { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--muted); margin: 0; }
.day-routes, .day-start-link { margin: 6px 0 0; }
.day-start-link button { font-size: 13px; }

/* the rail: time | station | stop. One thick line runs through the stations */
.workspace .timeline { padding: 4px 24px 32px; }
.workspace .stop { grid-template-columns: 54px 22px 1fr; gap: 0 12px; position: relative; }
.workspace .stop-rail { display: contents; }
.workspace .stop-clock { grid-column: 1; grid-row: 1; justify-self: end; padding-top: 15px; font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.workspace .stop-untimed .stop-clock { font-size: 11px; color: var(--muted); padding-top: 17px; }
.workspace .stop-num {
  grid-column: 2; grid-row: 1; align-self: start; margin-top: 13px; position: relative; z-index: 1;
  width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--ink); border: 2.5px solid var(--ink);
  font: 600 10.5px/1 var(--mono); box-shadow: none; display: grid; place-items: center;
}
.workspace .stop.selected .stop-num { background: var(--ink); color: #fff; }
.workspace .stop-start .stop-num { border-radius: 6px; background: var(--ink); color: #fff; }
/* the line itself: behind the station, full height of the row */
.workspace .stop::before { content: ""; position: absolute; left: calc(54px + 12px + 9px); width: 4px; top: 0; bottom: 0; background: var(--ink); }
.workspace .timeline > .stop:first-of-type::before { top: 24px; }
.workspace .timeline > .stop:last-of-type::before { bottom: auto; height: 24px; }
.workspace .timeline > .stop:only-of-type::before { display: none; }
.workspace .stop-rail::after { display: none; }
.workspace .stop-card {
  grid-column: 3; grid-row: 1; border: 0; border-left: 0; border-radius: 0; background: none; box-shadow: none;
  padding: 11px 0 12px; gap: 3px; border-bottom: 1px solid var(--line);
}
.workspace .stop.selected .stop-card { box-shadow: none; }
.workspace .stop-card h3 { font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.workspace .stop-card h3 .linklike:hover { text-decoration: none; color: var(--coral-ink); }
.workspace .stop-meta { gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
.workspace .stop-meta > span:first-child:not(.tag) { font-family: var(--mono); font-size: 11.5px; }
.workspace .stop-notes { background: none; padding: 0; font-size: 13px; color: var(--ink-2); border-left: 2px solid var(--line); padding-left: 10px; margin-top: 4px; }
.start-badge { background: none; color: var(--muted); font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .06em; padding: 0; }
/* the stop's tools: there when you reach for the stop, not before */
.workspace .stop-actions { border-top: 0; margin: 4px 0 0 -8px; padding: 0; gap: 2px; }
.workspace .stop-actions .btn-ghost { border-color: transparent; color: var(--ink-2); font-weight: 500; }
.workspace .stop-actions .btn-ghost:hover:not(:disabled) { background: var(--paper-2); }
@media (hover: hover) and (pointer: fine) {
  .workspace .stop-actions { opacity: 0; transition: opacity .12s; }
  .workspace .stop:hover .stop-actions, .workspace .stop:focus-within .stop-actions, .workspace .stop.selected .stop-actions { opacity: 1; }
}
.workspace .stop.drop-before .stop-card { box-shadow: inset 0 2px 0 var(--coral); }
.workspace .stop.drop-after .stop-card { box-shadow: inset 0 -2px 0 var(--coral); }

/* a leg: the line's segment between two stations, coloured by how you go */
.workspace .leg {
  position: relative; margin: 0; padding: 10px 0 12px calc(54px + 12px + 22px + 12px); border: 0;
  font-size: 13px; gap: 6px; --seg: var(--ink);
}
.workspace .leg::before { content: ""; position: absolute; left: calc(54px + 12px + 9px); width: 4px; top: 0; bottom: 0; background: var(--seg); }
.workspace .leg-walk { --seg: var(--mode-walk); }
.workspace .leg-transit { --seg: var(--mode-transit); }
.workspace .leg-drive { --seg: var(--mode-drive); }
/* not routed yet: the segment is a dashed outline, and says so in one line */
.workspace .leg-open::before { background: repeating-linear-gradient(var(--line-2) 0 5px, transparent 5px 9px); }
.workspace .leg-open { padding-top: 8px; padding-bottom: 8px; }
.workspace .leg-pending { gap: 10px; font-size: 12.5px; }
.workspace .leg-pending .btn { padding: 2px 8px; border: 0; color: var(--sea); background: none; font-weight: 500; font-size: 12.5px; }
.workspace .leg-pending .btn:hover:not(:disabled) { background: var(--paper-2); color: var(--ink); }
.workspace .leg-bad::before { background: var(--danger); }
.leg-summary { font-family: var(--mono); font-size: 12.5px; }
.leg-summary strong { font-weight: 500; }
.leg-summary svg { color: var(--seg, var(--ink)); }
.leg-attrib { font-size: 10.5px; color: var(--muted); }
.modes-compact .mode { border-radius: 6px; min-height: 26px; padding: 2px 7px; font-size: 12px; border-color: var(--line); background: var(--surface); font-weight: 500; }
.modes-compact .mode b { font-family: var(--mono); font-weight: 500; }
.mode.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.leg-issue { font-size: 12.5px; }

.plan-foot { border-top: 1px solid var(--line); background: var(--surface); padding: 8px 16px 10px; }
.plan-foot .btn { width: auto; }
.timeline-empty { border: 1px dashed var(--line-2); border-radius: 10px; background: none; }
.timeline-hint { margin-left: 100px; border-radius: 8px; background: var(--paper); color: var(--ink-2); }
.meal-gap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 6px 100px; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: 8px; background: var(--paper); font-size: 14px; }
.meal-gap-icon { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface); color: var(--coral-ink); flex: none; }
.meal-gap-icon svg { width: 16px; height: 16px; }
.meal-gap-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 180px; min-width: 0; }
.meal-gap .btn { width: auto; flex: none; }
.place-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0; }
.place-line .btn { width: auto; }
.stop-proposed .stop-card { background: none !important; border: 0 !important; border-bottom: 1px dashed var(--coral) !important; }
.stop-proposed .stop-num { border-style: dashed !important; border-color: var(--coral) !important; color: var(--coral-ink) !important; }
.stop-proposed::before { background: repeating-linear-gradient(var(--coral) 0 5px, transparent 5px 9px) !important; }

/* the planning assistant: the same quiet surface */
.workspace .pane-copilot { background: var(--paper); }
.pa-status, .pa-card, .pa-action { border-radius: 10px; }
.pa-action-icon { border-radius: 8px; background: var(--paper-2); color: var(--ink); }
.pa-head h2 { font-size: 15px; font-weight: 600; }

@media (max-width: 899px) {
  .workspace .timeline { padding: 4px 14px 24px; }
  .workspace .stop { grid-template-columns: 46px 22px 1fr; gap: 0 10px; }
  .workspace .stop::before, .workspace .leg::before { left: calc(46px + 10px + 9px); }
  .workspace .leg { padding-left: calc(46px + 10px + 22px + 10px); }
  .workspace .stop-clock { font-size: 13px; }
  .workspace .day-head { padding: 16px 16px 10px; }
  .day-tabs { padding: 0 8px; }
  .mobile-tabs button.on { color: var(--ink); }
  .mobile-tabs button { font-weight: 500; }
}

/* ========================= the homepage ========================= */
.home { --hm-bg: var(--paper); --hm-soft: var(--paper-2); --hm-line: var(--line); }
.home-section { padding-top: 96px; }
.section-head { margin-bottom: 28px; align-items: flex-end; }
.section-head h2, #explore-map h2 { font-family: var(--sans); font-size: clamp(32px, 4.2vw, 56px); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.section-sub { font-size: var(--t-md); color: var(--muted); margin-top: 12px; max-width: 52ch; }

/* hero: one photograph, edge to edge inside a thin margin, and a big line of type */
.jh { --jh-type: #fff; }
.jh-title { font: 600 var(--t-display)/.95 var(--sans); letter-spacing: -.045em; margin-bottom: 18px; max-width: 11ch; }
.jh-lede { margin: 0 0 26px; max-width: 40ch; font-size: var(--t-lg); line-height: 1.4; color: rgba(255,255,255,.88); text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.jh-copy { max-width: min(760px, 56%); }
.jh-actions .btn-lg { border-radius: 9px; }
.jh-btn-light { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.jh-btn-light:hover { background: #fff; color: var(--ink); }
.jh-kicker { color: rgba(255,255,255,.7); font-size: 11px; }
.jh-count { color: #fff; }
.jh-place { font: 600 15px/1 var(--mono); letter-spacing: .12em; }
.jh-sub { font: 400 14px/1.2 var(--sans); font-style: normal; color: rgba(255,255,255,.75); }
.jh-stops { border-radius: 10px; background: rgba(10,12,16,.38); }
.jh-stop { border-radius: 7px; font: 500 12.5px/1 var(--sans); }
.jh-stop-n { font-family: var(--mono); }
.jh-stop[aria-current="true"] { background: #fff; color: var(--ink); }
.jh-pause { font: 500 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; border-radius: 8px; min-height: 36px; padding: 8px 12px; background: rgba(8,10,14,.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.jh-portrait .jh-title { font-size: clamp(34px, 10vw, 44px); max-width: none; }
.jh-portrait .jh-lede { font-size: 15px; margin-bottom: 16px; }
.jh-portrait .jh-copy { max-width: none; }
@media (max-height: 820px) and (min-aspect-ratio: 1/1) {
  .jh-title { font-size: clamp(40px, 5.2vw, 76px); }
  .jh-kicker { display: block; }
}

/* finder: the search sits on the map, and the map gets the width */
#explore-map { padding-top: 88px; }
.finder { max-width: none; flex-direction: row; flex-wrap: wrap; align-items: stretch; padding: 0; gap: 12px; }
.finder .hero-search { flex: 1 1 520px; max-width: 760px; border-radius: 12px; box-shadow: none; border: 1px solid var(--line-2); padding: 6px 6px 6px 16px; background: var(--surface); }
.finder .hero-search .btn { border-radius: 8px; padding: 10px 18px; }
.finder .geo-prompt { flex: 1 1 360px; max-width: none; margin: 0; border-radius: 12px; border: 1px solid var(--line); box-shadow: none; background: none; padding: 10px 14px; }
.geo-prompt-icon { width: 34px; height: 34px; background: var(--paper-2); color: var(--ink); }
.geo-prompt-text strong { font-weight: 600; font-size: 14px; }
.finder .geo-prompt p { font-size: 12.5px; color: var(--muted); }
.xm-grid { grid-template-columns: minmax(0, 2.2fr) minmax(300px, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.xm-map { border-radius: 0; box-shadow: none; height: 600px; }
.xm-side { border-radius: 0; box-shadow: none; border-left: 1px solid var(--line); max-height: 600px; padding: 20px; }
.xm-start-title, .xm-next-title, .xm-panel h3 { font-family: var(--sans); font-weight: 600; font-size: 20px; letter-spacing: -.02em; }
.xm-note { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.xm-ideas .cat-chip { padding: 5px 11px; font-size: 12.5px; }

/* destinations: a strip of portrait photos, captions in mono */
.ps { background: none; margin-top: 0; padding: 0; }
.ps-head { padding-bottom: 0; }
.ps-scroller { padding: 4px 0 8px; }
.ps-track { align-items: stretch; gap: 14px; }
.ps-tile, .ps-xl, .ps-l, .ps-m, .ps-s { width: 260px; height: 340px; border-radius: 10px; }
.ps-tile:nth-child(3n+2) { width: 340px; }
.ps-tile::after { background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55)); }
.ps-cap { left: 14px; bottom: 14px; gap: 2px; }
.ps-cap b { font: 600 20px/1.1 var(--sans); letter-spacing: -.02em; }
.ps-cap small { font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .85; }

/* ready-made trips */
.rx { padding-top: 96px; }
.rx-filters { background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; }
.rx-grid { grid-auto-columns: 220px; gap: 14px; }
.rx-card { border-radius: 10px; border: 0; background: none; }
.rx-card:hover { transform: none; box-shadow: none; }
.rx-photo { border-radius: 10px; aspect-ratio: 4 / 5; }
.rx-card:hover .rx-photo .cover-img { transform: scale(1.03); }
.rx-body { padding: 12px 2px 4px; gap: 4px; }
.rx-body h3 { font-family: var(--sans); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.rx-blurb { font-size: 13px; color: var(--muted); }
.rx-meta { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.rx-go { font-weight: 600; font-size: 13px; color: var(--ink); padding-top: 8px; }
.rx-go:hover { color: var(--coral-ink); }
.rx-sub { font-family: var(--sans); font-size: var(--t-xl); font-weight: 600; letter-spacing: -.025em; }
.rx-its { margin-top: 56px; }

/* itinerary cards: photo, title, one line of facts; the rest gets out of the way */
.it-grid { gap: 32px 20px; }
.home .it-card, .it-card { border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.home .it-card:hover, .it-card:hover { transform: none; box-shadow: none; }
.it-cover { border-radius: 10px; overflow: hidden; height: auto; aspect-ratio: 3 / 2; padding: 12px 14px; }
.it-card:hover .it-cover .cover-img { transform: scale(1.03); }
.it-cover .cover-img { transition: transform .5s ease; }
.it-cover-glyph { display: none; }
.it-cover-dest { font: 500 11px/1 var(--mono); letter-spacing: .1em; }
.it-body { padding: 14px 2px 0; gap: 6px; }
.it-tags { order: 3; gap: 4px 12px; }
.it-body h3 { font-family: var(--sans); font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.it-body h3 a:hover { text-decoration: none; color: var(--coral-ink); }
.it-meta, .pv-meta { font-family: var(--mono); font-size: 11.5px; font-weight: 400; color: var(--muted); gap: 4px 14px; }
.it-desc { font-size: 13.5px; -webkit-line-clamp: 2; }
.it-foot { padding-top: 6px; order: 9; }
.it-source { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; }
.it-foot .btn { border-color: transparent; padding-right: 0; }
.it-foot .btn::after { content: "→"; }
.it-foot .btn:hover:not(:disabled) { background: none; color: var(--coral-ink); }
.skeleton .it-cover { background: var(--paper-2); }

/* My trips, on the homepage and on its own page: the same card */
.trip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px 20px; }
.trip-card { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.trip-card:hover { transform: none; box-shadow: none; }
.trip-card-band { height: auto; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; position: relative; padding: 12px 14px; }
.trip-card:hover .trip-card-band .cover-img { transform: scale(1.03); }
.trip-card-band .cover-img { transition: transform .5s ease; }
.trip-card-dest { font: 500 11px/1 var(--mono); letter-spacing: .1em; }
.trip-card-body { padding: 12px 2px 0; gap: 3px; }
.trip-card h3 { font-family: var(--sans); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.trip-card:hover h3 { color: var(--coral-ink); }
.trip-card-dates { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink-2); }
.trip-card-meta { font-size: 12.5px; margin-top: 2px; }

/* My Trips page */
.dash { gap: 56px; padding-top: 56px; }
.dash-hero { align-items: flex-end; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.dash-hero h1 { font-family: var(--sans); font-size: clamp(40px, 5.4vw, 72px); font-weight: 600; letter-spacing: -.045em; line-height: .95; }
.dash-section h2 { margin-bottom: 18px; }
.empty { border: 1px dashed var(--line-2); border-radius: 12px; background: none; }
.invite-row { border-radius: 10px; box-shadow: none; border: 1px solid var(--line); border-left: 4px solid var(--ink); }
.invite-row h3 { font-family: var(--sans); font-weight: 600; font-size: 17px; }

/* preview: the same rail as the editor */
.preview-panel { background: var(--surface); padding: 28px 32px 56px; gap: 14px; }
.preview-panel h1 { font-family: var(--sans); font-size: clamp(32px, 3vw, 44px); font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.pv-desc { font-size: 15px; color: var(--ink-2); }
.pv-source { background: none; padding: 0; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.pv-days .day-tab-n { font-size: 12px; }
.pv-stops { position: relative; }
.pv-stop { position: relative; background: none; box-shadow: none; border-left: 0; border-radius: 0; padding: 12px 0 12px 0; gap: 14px; border-bottom: 1px solid var(--line); }
.pv-stop.selected { box-shadow: none; }
.pv-stop.selected h3 { color: var(--coral-ink); }
.pv-stop .stop-num { width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--ink); border: 2.5px solid var(--ink); font: 600 11px/1 var(--mono); position: relative; z-index: 1; }
.pv-stop h3 { font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.pv-stop::before, .pv-leg::before { content: ""; position: absolute; left: 10px; width: 4px; top: 0; bottom: 0; background: var(--ink); }
.pv-stops > .pv-stop:first-child::before { top: 24px; }
.pv-stops > .pv-stop:last-child::before { bottom: auto; height: 24px; }
.pv-leg { position: relative; margin: 0; padding: 8px 0 8px 38px; border: 0; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.pv-leg.muted::before { background: repeating-linear-gradient(var(--line-2) 0 5px, transparent 5px 9px); }

/* footer */
.site-footer { border-top: 1px solid var(--line); margin-top: 120px; }
.site-footer nav a { font-weight: 500; font-size: 13px; color: var(--ink-2); text-decoration: none; }
.site-footer nav a:hover { color: var(--ink); text-decoration: underline; }

/* sign in */
/* The title is hand-lettered in Gochi Hand, every word on its own tilt, ink then coral, an orange slice for an o, a dotted
   route under Wayline and sparkles at the ends. */
.auth-hero .auth-title {
  margin: 0; font: 400 clamp(32px, 3.5vw, 60px)/1.1 "Gochi Hand", "ZCOOL KuaiLe", "Comic Sans MS", cursive;
  letter-spacing: .01em; text-transform: none; color: var(--ink);
}
.auth-title .lettering { display: flex; flex-direction: column; gap: .06em; }
.auth-title .line { position: relative; display: flex; align-items: baseline; gap: 0 .26em; }
.auth-title .line-2 { padding-left: .7em; color: var(--coral); }
.auth-title .line { flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 899px) {
  .auth-hero .auth-title { font-size: min(8.6vw, 52px); }
  .auth-title .line-2 { padding-left: .5em; }
}
.auth-title .w {
  display: inline-flex; align-items: baseline; position: relative; transform: rotate(var(--tilt, 0deg));
  -webkit-text-stroke: .016em currentColor; paint-order: stroke fill;
}
.auth-title .slice { width: .5em; height: .5em; margin: 0 .03em; align-self: center; transform: translateY(.08em) rotate(-12deg); color: var(--ink); }
.auth-title .wayline { position: relative; }
.auth-title .wayline .route { position: absolute; left: -.08em; right: -.18em; bottom: -.22em; height: .28em; color: var(--ink); }
.auth-title .route svg { display: block; width: 100%; height: 100%; overflow: visible; }
.auth-title .spark { position: absolute; color: #f6a23a; }
.auth-title .spark svg { display: block; width: 100%; height: 100%; }
.auth-title .s1 { width: .3em; height: .3em; left: -.42em; top: .02em; }
.auth-title .s2 { width: .17em; height: .17em; left: -.6em; top: .42em; }
.auth-title .s3 { position: relative; width: .3em; height: .3em; align-self: flex-start; margin-left: -.06em; }
.auth-title .s4 { position: relative; width: .17em; height: .17em; align-self: center; margin-left: -.22em; }

/* One continuous paper background behind both halves, soft colour blooms
   blurred behind the form, which floats on frosted glass. The headings,
   tabs, labels and button share the title's hand. */
.auth {
  position: relative; isolation: isolate; overflow: hidden; align-items: center;
  background:
    radial-gradient(circle at 42% 14%, rgba(246, 195, 67, .45), transparent 30%),
    radial-gradient(circle at 6% 92%, rgba(15, 124, 140, .2), transparent 38%),
    var(--paper);
}
.auth::before, .auth::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.auth::before { width: 46vw; height: 46vw; right: -10vw; top: -14vw; background: rgba(242, 96, 61, .22); }
.auth::after { width: 40vw; height: 40vw; right: 4vw; bottom: -18vw; background: rgba(15, 124, 140, .2); }
.auth-hero { background: none; }
/* On wide screens the two halves stay together as one centred group
   instead of pinning to the window's edges. */
.auth {
  grid-template-columns: minmax(0, 560px) minmax(360px, 420px); justify-content: center;
  column-gap: clamp(40px, 5vw, 88px); padding: 0 clamp(32px, 4vw, 64px);
}
.auth-hero { padding: 48px 0; overflow: visible; }
.auth-hero .hero-art ol { max-width: 400px; }
.auth .brand { font-size: 32px; gap: 12px; }
.auth .brand-mark { width: 38px; height: 38px; border-radius: 10px; }
.auth-card {
  align-self: center; width: 100%; margin: 48px 0;
  padding: 36px clamp(24px, 3vw, 40px); gap: 18px;
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .75); border-radius: 22px;
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 30px 70px -30px rgba(28, 36, 48, .35);
}
.auth-card .auth-form { max-width: none; }
.auth-card h2 {
  font: 400 44px/1 "Gochi Hand", "ZCOOL KuaiLe", cursive; letter-spacing: .01em; color: var(--coral);
  transform: rotate(-2deg); transform-origin: left center;
}
.auth-card .seg button, .auth-card .field > span, .auth-card .btn-primary {
  font-family: "Gochi Hand", "ZCOOL KuaiLe", cursive; font-weight: 400; letter-spacing: .02em;
}
.auth-card .seg button { font-size: 19px; padding: 6px 8px; }
.auth-card .field > span { font-size: 18px; color: var(--ink); }
.auth-card .btn-primary { font-size: 21px; border-radius: 999px; padding-block: 10px; box-shadow: 0 8px 18px -8px rgba(229, 72, 45, .6); }
.auth-card input { background: rgba(255, 255, 255, .8); }
@media (max-width: 899px) {
  .auth { grid-template-columns: minmax(0, 1fr); padding: 0 24px; }
  .auth-hero { padding: 32px 0 24px; }
  .auth-card { justify-self: center; max-width: 480px; }
  .auth .brand { font-size: 26px; }
  .auth .brand-mark { width: 32px; height: 32px; }
  .auth-card .seg button { font-size: 17px; white-space: nowrap; }
  .auth-card { border-top: 1px solid rgba(255, 255, 255, .75); margin: 0 0 32px; }
  .auth::before { width: 90vw; height: 90vw; top: 60%; right: -30vw; }
  .auth::after { width: 80vw; height: 80vw; bottom: -30vw; left: -20vw; right: auto; }
}
.hero-stop { border-radius: 8px; box-shadow: none; border: 1px solid var(--line); }
.hero-stop b { font-family: var(--mono); font-weight: 600; }
.hero-stop .t { font-family: var(--mono); }
.hero-leg { border-left: 4px dashed var(--line-2); color: var(--ink-2); font-family: var(--mono); font-weight: 500; }
.callout { box-shadow: none; border: 1px solid var(--line); border-left: 4px solid var(--ink); border-radius: 8px; font-weight: 500; }
.seg { border-radius: 9px; }
.seg button { border-radius: 7px; }

@media (max-width: 899px) {
  .home-section, .rx { padding-top: 64px; }
  #explore-map { padding-top: 56px; }
  .xm-grid { grid-template-columns: 1fr; border-radius: 12px; }
  .xm-map { height: 380px; }
  .xm-side { border-left: 0; border-top: 1px solid var(--line); max-height: none; }
  .finder { padding: 0; }
  .ps-tile, .ps-xl, .ps-l, .ps-m, .ps-s { width: 220px; height: 290px; }
  .ps-tile:nth-child(3n+2) { width: 220px; }
  .dash { padding-top: 36px; gap: 40px; }
  .preview-panel { padding: 20px 16px 40px; }
}
@media (max-width: 520px) {
  .topbar-nav .me { margin-left: 0; padding-left: 6px; }
  .topbar-nav > a { padding: 6px 6px; }
}
.pv-leg-walk::before { background: var(--mode-walk); }
.pv-leg-transit::before { background: var(--mode-transit); }
.pv-leg-drive::before { background: var(--mode-drive); }
.pv-stop .stop-time { font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--ink-2); }
.pv-stop .tag-rule { color: var(--muted); }
.pv-inspect { align-self: center; }
@media (hover: hover) and (pointer: fine) {
  .pv-inspect { opacity: 0; transition: opacity .12s; }
  .pv-stop:hover .pv-inspect, .pv-stop:focus-within .pv-inspect, .pv-stop.selected .pv-inspect { opacity: 1; }
}
.btn-ghost.btn-quiet { border-color: transparent; }

/* polish pass: tools float over the stop instead of reserving a blank row; filters scroll with the list */
@media (hover: hover) and (pointer: fine) {
  .workspace .stop-card { position: relative; }
  .workspace .stop-actions {
    position: absolute; top: 6px; right: 0; margin: 0; padding: 2px 0 2px 24px; flex-wrap: nowrap;
    background: linear-gradient(90deg, transparent, var(--paper) 22px);
  }
  .workspace .stop-actions .btn { margin-left: 0; }
  .workspace .stop-actions .icon-btn-danger { margin-left: 0; }
}
.workspace .leg-pending { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.workspace .leg-open .leg-attrib, .workspace .leg-open .leg-note { display: none; }
.rx-filters { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; background: none; }
.jh-title { font-size: clamp(40px, 4.6vw, 74px); max-width: 15ch; letter-spacing: -.035em; line-height: 1; }
.dash-section + .dash-section { margin-top: 56px; }
.workspace .leg-pending .route-btn { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.workspace .leg-pending .route-btn small { font-size: 11px; }

/* ---------------------------------------------------------------------
   Homepage hero, split: the words and the line on paper, the window beside
   them. The five destinations are stations on one route, drawn up to the
   one on view; the photo is the window's, as before.
   --------------------------------------------------------------------- */
.hx {
  display: grid; grid-template-columns: minmax(440px, 5fr) 7fr; align-items: stretch;
  height: clamp(580px, calc(100svh - var(--bar-h) - 24px), 900px);
  padding: 0 clamp(8px, .6vw, 14px) 0 0;
}
.hx-copy {
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-width: 0;
  padding: clamp(36px, 7vh, 88px) clamp(28px, 3.6vw, 64px) clamp(28px, 4vh, 44px) clamp(20px, 6.8vw, 120px);
}
.hx .jh { height: 100%; min-height: 0; }
.hx .jh-copy { position: static; max-width: 34rem; text-shadow: none; }
.hx-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hx-kicker .eyebrow-n { color: var(--coral); }
.hx-kicker .eyebrow-n::after { content: ""; display: inline-block; vertical-align: middle; width: 28px; height: 1px; margin-left: 12px; background: var(--line-2); }
.hx .jh-title { color: var(--ink); font: 600 clamp(44px, 5vw, 84px)/.96 var(--sans); letter-spacing: -.045em; max-width: 9.5ch; margin: 0 0 24px; text-shadow: none; }
.hx .jh-lede { color: var(--ink-2); text-shadow: none; font-size: clamp(16px, 1.25vw, 19px); max-width: 32ch; margin-bottom: 32px; }
.hx .jh-actions .btn { text-shadow: none; }
.hx .jh-btn-light { background: transparent; color: var(--ink); border: 1px solid var(--line-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
.hx .jh-btn-light:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.hx .jh-ui :is(a, button):focus-visible, .hx-copy :is(a, button):focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

/* where the window is now, then the line itself */
.hx .jh-bar { position: static; display: block; max-width: none; }
.hx .jh-dest { text-align: left; text-shadow: none; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.hx .jh-kicker { display: block; color: var(--muted); margin: 0 0 8px; }
.hx .jh-count { color: var(--coral); }
.hx .jh-place-row { justify-content: flex-start; gap: 14px; }
.hx .jh-place { color: var(--ink); font: 600 clamp(22px, 2vw, 30px)/1 var(--sans); letter-spacing: -.02em; text-transform: none; }
.hx .jh-place { text-transform: lowercase; }
.hx .jh-place::first-letter { text-transform: uppercase; }
.hx .jh-sub { color: var(--muted); font: 400 14px/1.2 var(--mono); }
.jh-line { position: relative; height: 128px; margin: 6px 44px 0; }
.jh-line-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.jh-track, .jh-drawn { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.jh-track { stroke: var(--line-2); stroke-width: 2; }
.jh-drawn { stroke: var(--ink); stroke-width: 5; }
.hx .jh-stops { position: absolute; inset: 0; display: block; padding: 0; background: none; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hx .jh-stop {
  position: absolute; display: flex; align-items: baseline; gap: 6px; min-height: 44px; padding: 34px 6px 4px; border-radius: 6px;
  transform: translate(-50%, -22px); background: none; color: var(--muted); font: 500 13px/1 var(--sans); white-space: nowrap;
}
.hx .jh-stop.jh-stop-up { padding: 4px 6px 34px; transform: translate(-50%, calc(-100% + 22px)); }
.hx .jh-stop::before {
  content: ""; position: absolute; left: 50%; top: 22px; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--paper); box-shadow: inset 0 0 0 2px var(--line-2); transition: transform .2s, background .2s, box-shadow .2s;
}
.hx .jh-stop.jh-stop-up::before { top: auto; bottom: 22px; margin: 0 0 -7px -7px; }
.hx .jh-stop:hover { background: none; color: var(--ink); }
.hx .jh-stop:hover::before { box-shadow: inset 0 0 0 2px var(--ink); }
.hx .jh-stop.jh-stop-past::before { background: var(--paper); box-shadow: inset 0 0 0 3px var(--ink); }
.hx .jh-stop[aria-current="true"] { background: none; color: var(--ink); font-weight: 600; }
.hx .jh-stop[aria-current="true"]::before { background: var(--coral); box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--coral); transform: scale(1.15); }
.hx .jh-stop-n { font: 500 10.5px/1 var(--mono); opacity: 1; color: var(--muted); }

/* the window: only the pause control sits on the photo */
.hx .jh-ui::before { height: 90px; background: linear-gradient(rgba(8, 10, 14, 0), rgba(8, 10, 14, .45)); }
.hx .jh-portrait .jh-ui { display: block; padding: 0; }
.hx .jh-portrait .jh-ui::before { height: 90px; }

@media (prefers-reduced-motion: reduce) { .hx .jh-stop::before { transition: none; } }
/* tablets and phones: the words, the line, then the window */
@media (max-width: 960px) {
  .hx { grid-template-columns: 1fr; height: auto; padding: 0; border-bottom: 0; }
  .hx-copy { padding: 28px 20px 8px; gap: 22px; }
  .hx .jh { height: clamp(380px, 62vw, 560px); }
  .hx-kicker { margin-bottom: 18px; }
  .hx .jh-title { font-size: clamp(40px, 11vw, 64px); max-width: 10ch; margin-bottom: 16px; }
  .hx .jh-lede { margin-bottom: 22px; font-size: 16px; }
}
@media (max-width: 520px) {
  .hx .jh { height: 460px; }
  .hx .jh-actions { flex-wrap: nowrap; }
  .hx .jh-actions .btn { flex: 1; justify-content: center; padding: 12px 8px; font-size: 15px; }
  .jh-line { height: 116px; margin: 0 30px; }
  .hx .jh-stop { font-size: 12px; padding-left: 2px; padding-right: 2px; }
  .hx .jh-stop-n { display: none; }
}

/* ---------------------------------------------------------------------
   Featured itineraries as an index: one numbered row each, the title set
   large, the facts in mono beside it. The photo stays out of the way until
   you reach for a row, then rises over the list.
   --------------------------------------------------------------------- */
.it-grid.it-index { display: block; border-bottom: 1px solid var(--line); counter-reset: none; }
.it-index .it-card {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) 240px 190px 150px; grid-template-rows: auto auto;
  column-gap: 24px; row-gap: 6px; align-items: center; padding: 26px 0 24px; border-top: 1px solid var(--line); cursor: pointer;
  transition: padding .25s ease;
}
.it-index .it-body { display: contents; }
.it-index .it-n { grid-column: 1; grid-row: 1 / 3; align-self: start; padding-top: 10px; font: 500 12px/1 var(--mono); color: var(--muted); transition: color .2s; }
.it-index .it-body h3 { grid-column: 2; grid-row: 1; font-size: clamp(24px, 2.6vw, 40px); line-height: 1.05; letter-spacing: -.035em; transition: transform .3s cubic-bezier(.2, .7, .2, 1), color .2s; }
.it-index .it-body h3 a { color: inherit; }
/* the whole row opens the itinerary (the title's link, stretched) */
.it-index .it-body h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.it-index .it-desc { grid-column: 2; grid-row: 2; max-width: 56ch; margin: 0; -webkit-line-clamp: 1; color: var(--muted); }
.it-index .it-tags { display: none; }
.it-index .it-meta { grid-column: 4; grid-row: 1 / 3; display: grid; gap: 6px; align-self: center; }
.it-index .it-meta > span::before { content: none; }
.it-index .it-foot { grid-column: 5; grid-row: 1 / 3; display: grid; justify-items: end; gap: 6px; padding: 0; position: relative; z-index: 2; }
.it-index .it-rating { grid-column: 2; }
.it-index .it-cover {
  grid-column: 3; grid-row: 1 / 3; justify-self: center; align-self: center; z-index: 3;
  width: 220px; aspect-ratio: 4 / 3; height: auto; margin: -70px 0; padding: 10px 12px; border-radius: 6px;
  opacity: 0; transform: translateY(14px) rotate(-2deg) scale(.92); pointer-events: none;
  transition: opacity .25s ease, transform .35s cubic-bezier(.2, .7, .2, 1); box-shadow: 0 18px 40px -18px rgba(21, 23, 26, .45);
}
.it-index .it-cover:not(.has-photo) { display: none; }
.it-index .it-card:is(:hover, :focus-within) .it-cover { opacity: 1; transform: none; pointer-events: auto; }
.it-index .it-card:is(:hover, :focus-within) .it-n { color: var(--coral); }
.it-index .it-card:is(:hover, :focus-within) h3 { transform: translateX(10px); color: var(--coral-ink); }
.it-index .it-card:hover .it-cover .cover-img { transform: none; }
.it-index .it-cover-dest { font-size: 10px; }
.it-index .skeleton { display: block; height: 104px; border-top: 1px solid var(--line); }
.it-index .skeleton > * { display: none; }
@media (prefers-reduced-motion: reduce) { .it-index .it-card *, .it-index .it-cover { transition: none; } }

/* no hover, or not much room: the photo is a small thumbnail, always there */
@media (hover: none), (max-width: 1080px) {
  .it-index .it-card { grid-template-columns: 40px minmax(0, 1fr) 112px; grid-template-rows: auto auto auto; column-gap: 16px; padding: 20px 0; }
  .it-index .it-n { grid-row: 1 / 4; padding-top: 6px; }
  .it-index .it-body h3 { font-size: clamp(20px, 4.6vw, 30px); }
  .it-index .it-desc { display: none; }
  .it-index .it-meta { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 2px 12px; }
  .it-index .it-foot { grid-column: 2; grid-row: 3; display: flex; justify-content: space-between; align-items: center; }
  .it-index .it-cover { grid-column: 3; grid-row: 1 / 4; width: 112px; aspect-ratio: 1; margin: 0; padding: 6px; opacity: 1; transform: none; pointer-events: auto; box-shadow: none; }
  .it-index .it-cover:not(.has-photo) { display: block; }
  .it-index .it-cover-dest { display: none; }
  .it-index .it-card:is(:hover, :focus-within) h3 { transform: none; }
}
@media (hover: none), (max-width: 1080px) { .it-index .it-source { white-space: nowrap; font-size: 9.5px; } }
.jh-head { position: absolute; left: 0; top: 0; z-index: 1; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; will-change: transform; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px var(--paper); pointer-events: none; }

/* =====================================================================
   Signage. Headings are set like station names: a narrow, upright display
   face (Big Shoulders Display), in capitals, tight and tall. Words run in
   Schibsted Grotesk; times and numbers stay in mono. The page sits on a
   deeper paper, ruled by a hairline grid it is built on, and the curated
   section runs as a dark band so the page has a rhythm of light and dark.
   ===================================================================== */
:root {
  --paper: #ecebe5;
  --paper-2: #e2e0d8;
  --line: #d9d6cc;
  --line-2: #c2beb2;
  --display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: var(--sans);
}
body { background: var(--paper); }
/* the homepage (and the bar over it) draws its rules and card edges firmer than the editor's:
   on the deeper paper the shared hairlines read as soft, blurred edges */
main.home, body:has(main.home) .topbar { --line: #c3bfb3; --line-2: #a29d90; }

/* the display face only for big page and section names, there to be looked
   at. Anything read while working (a day's date, a list of trips, numbers,
   panel titles) stays in the grotesk: tall condensed capitals tire the eye. */
.jh-title, .hx .jh-title, .section-head h2, #explore-map h2, .dash-hero h1, .auth-hero h1,
.hx .jh-place {
  font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; line-height: .9;
}
.hx .jh-title { font-size: clamp(64px, 7.4vw, 128px); max-width: 8ch; letter-spacing: -.01em; }
.section-head h2, #explore-map h2 { font-size: clamp(48px, 6vw, 92px); }
.dash-hero h1 { font-size: clamp(56px, 7vw, 112px); }
.preview-panel h1 { font-family: var(--sans); font-size: clamp(28px, 2.4vw, 36px); font-weight: 650; letter-spacing: -.025em; line-height: 1.12; }
.day-head h2 { font-size: 26px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
.rx-sub { font-size: 26px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
.hx .jh-place { font-size: clamp(30px, 2.6vw, 40px); font-weight: 700; }
.it-index .it-body h3 { font-family: var(--sans); font-size: clamp(22px, 2vw, 28px); font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
/* smaller names (cards, stops) stay in the grotesk, a touch heavier */
.rx-body h3, .trip-card h3, .workspace .stop-card h3, .pv-stop h3, .ps-cap b { font-family: var(--sans); font-weight: 650; letter-spacing: -.01em; }
/* the wordmark keeps the original brand type (Inter Tight, as before the
   redesign), apart from the signage and editorial faces of the pages */
.brand { font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -.03em; gap: 8px; }

/* sections: one hairline under each heading, nothing else; no rules
   between sections or down the sides (they never lined up with the
   content and crossed the full-bleed photo stream) */
.home .section-head { padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.home .eyebrow { margin-bottom: 18px; }
.home .eyebrow-n { color: var(--coral); }

/* Curated by Wayline: a full-bleed band one step darker than the page.
   It was black; next to the light sections around it that read as a
   different site, so the page now steps paper → paper-2 instead. */
.home .rx {
  --gut: clamp(20px, 6vw, 88px);
  --band: #e2dfd5;
  background: var(--band); max-width: none; padding-left: max(var(--gut), calc((100% - 1400px) / 2 + var(--gut))); padding-right: max(var(--gut), calc((100% - 1400px) / 2 + var(--gut)));
  padding-bottom: 96px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
.home .rx .section-head { border-bottom-color: var(--line-2); }
.home .rx .rx-tab { color: var(--ink-2); border-color: var(--line-2); background: transparent; }
.home .rx :is(.rx-tab.on, .rx-tab[aria-selected="true"], .cat-chip.on) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.home .rx .btn-ghost, .home .rx .btn-outline { color: var(--ink); border-color: var(--line-2); }
.home .rx .btn-ghost:hover:not(:disabled) { background: var(--paper); }
.home .rx a { color: inherit; }
.home .rx .it-index > * { border-color: var(--line-2); }
/* signage fixes: the hero fits its column, the grid rules stay out of the
   hero (it has its own edge) and out of phones (too close to the text) */
.hx .jh-title { font-size: min(clamp(56px, 6vw, 108px), 8.2vh); max-width: 9ch; margin-bottom: 20px; }
@media (max-height: 940px) and (min-width: 961px) { .hx .jh-title { font-size: clamp(52px, 5.2vw, 88px); } .hx-copy { padding-top: 40px; } .hx-kicker { margin-bottom: 18px; } }

/* The opening page of a travel journal. "THE JOURNEY" is the set headline;
   "written by" is a small italic aside on the next line, and "us." is signed
   after it in the page's one red, on the same baseline, so the three read
   as one phrase, and the only ornament on the page. Below the verse, space
   alone sets off the actions. Everything stays inside the words' column. */
.hx-copy { --serif-art: "Cormorant Garamond", "Iowan Old Style", Georgia, serif; --script: "Mrs Saint Delafield", "Snell Roundhand", cursive; }
.hx-kicker { gap: 12px; margin-bottom: 22px; font: italic 500 clamp(15px, 1.05vw, 18px)/1.2 var(--serif-art); letter-spacing: .01em; text-transform: none; color: var(--muted); }
.hx-kicker-rule { width: 28px; height: 1px; background: currentColor; opacity: .55; }
.hx .jh-title.hx-poem {
  display: flex; flex-direction: column; align-items: flex-start; max-width: none; margin: 0 0 20px;
  font: 500 min(clamp(50px, 5vw, 88px), 8.4vh)/.9 var(--serif-art); letter-spacing: .01em; text-transform: uppercase;
}
.hx-poem-the { display: block; max-width: 7ch; }
/* the aside and the signature share a baseline; the signature leans back
   over the gap so the phrase runs on without a seam */
.hx-poem-sign { display: flex; align-items: baseline; height: .82em; margin: 0 0 0 .08em; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.hx-poem-by { font: italic 400 .56em/1 var(--serif-art); letter-spacing: .01em; color: var(--ink-2); }
.hx-poem-us { margin-left: .1em; font: 400 1.75em/0 var(--script); color: var(--coral); transform: translateY(.04em); }
/* no ornament between the verse and the actions: the space does the separating */
.hx .jh-lede.hx-verse { max-width: 40ch; margin-bottom: clamp(34px, 4.6vh, 52px); font: italic 400 clamp(18px, 1.3vw, 22px)/1.5 var(--serif-art); color: var(--ink-2); }
.hx-verse em { font-style: italic; font-weight: 500; color: var(--ink); }
.hx-verse-end { white-space: nowrap; }

/* the actions close the column: one confident red button, and the
   destination on view as a quiet text link beside it */
.hx .jh-actions { align-items: center; gap: 10px 28px; }
.hx .jh-start { padding: 15px 30px; border-radius: 999px; font: 600 15px/1 var(--sans); letter-spacing: .01em; box-shadow: 0 1px 0 rgba(21, 23, 26, .08), 0 10px 22px -14px rgba(200, 64, 31, .7); transition: background .15s, box-shadow .15s, transform .15s; }
.hx .jh-start:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(21, 23, 26, .08), 0 14px 26px -14px rgba(200, 64, 31, .8); }
.hx .jh-start:active { transform: none; }
.jh-explore { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 0; font: italic 500 clamp(18px, 1.3vw, 21px)/1 var(--serif-art); color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); transition: border-color .15s; }
.jh-explore-arrow { font: 400 15px/1 var(--sans); color: var(--coral); transition: transform .15s; }
.jh-explore:hover { border-bottom-color: var(--ink); }
.jh-explore:hover .jh-explore-arrow { transform: translateX(3px); }
.hx-copy .jh-explore:focus-visible { outline-offset: 4px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .hx .jh-start, .jh-explore-arrow { transition: none; } .hx .jh-start:hover:not(:disabled) { transform: none; } }

/* the window: the photographs graded as one set (a touch less saturation
   and contrast, a little warmth), so the five read as one photographer's
   pictures on the page's paper; the edge is the page's own rule, and the
   only control on the glass is a paper-coloured pill */
.hx .jh-photo { filter: saturate(.84) contrast(.95) sepia(.07) brightness(1.01); }
.hx .jh-scene-shanghai .jh-photo { filter: saturate(.74) contrast(.96) sepia(.05); }
.hx .jh-glass { background: linear-gradient(rgba(236, 235, 229, .06), rgba(236, 235, 229, 0) 40%); box-shadow: 0 0 0 1px var(--line-2), inset 0 0 0 1px rgba(255, 255, 255, .1); }
.hx .jh-ui::before { display: none; }
.hx .jh-pause { background: color-mix(in srgb, var(--paper) 86%, transparent); color: var(--ink); border: 1px solid var(--line-2); text-shadow: none; }
.hx .jh-pause:hover { background: var(--paper); }
@media (max-height: 940px) and (min-width: 961px) { .hx .jh-title.hx-poem { font-size: clamp(46px, 4.8vw, 80px); } .hx-kicker { margin-bottom: 16px; } }
@media (max-width: 960px) {
  .hx .jh-title.hx-poem { font-size: clamp(44px, 12.5vw, 72px); margin-bottom: 14px; }
  .hx-kicker { margin-bottom: 14px; }
  .hx .jh-lede.hx-verse { font-size: 18px; margin-bottom: 30px; }
  .hx .jh-copy .jh-actions { margin-bottom: 12px; }
  }
@media (max-width: 520px) {
  .hx .jh-actions .jh-start { flex: none; padding: 14px 24px; }
  .hx .jh-actions { flex-wrap: wrap; }
}
}
.home .rx .it-foot .btn { border-color: transparent; }

/* =====================================================================
   The editor, as a line. A band across the top shows the selected day as
   one line of stations (left to right by time, legs in their mode's
   colour); below it the map and one right-hand column. The column holds
   the timeline or, when it's open, the assistant: never three panes. The
   band keeps the plan in view while the assistant has the column.
   ===================================================================== */
.line-band {
  flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; gap: 0;
  height: 112px; background: var(--paper); border-bottom: 1px solid var(--line);
}
.line-days { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 18px 10px 20px; border-right: 1px solid var(--line); overflow-y: auto; }
.line-day { display: flex; align-items: baseline; gap: 8px; padding: 5px 10px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: 500 12.5px/1 var(--sans); text-align: left; cursor: pointer; white-space: nowrap; }
.line-day b { font: 600 11px/1 var(--mono); }
.line-day:hover { color: var(--ink); background: var(--paper-2); }
.line-day.on { color: var(--paper); background: var(--ink); }
.line-day.on b { color: var(--coral); }

.line-track { position: relative; list-style: none; margin: 0 84px 0 72px; padding: 0; }
.line-track::before { content: ""; position: absolute; left: -24px; right: -24px; top: 50%; height: 2px; margin-top: -1px; background: var(--line); }
.line-leg { position: absolute; top: 50%; height: 6px; margin-top: -3px; background: var(--ink); }
.line-leg-walk { background: var(--mode-walk); }
.line-leg-transit { background: var(--mode-transit); }
.line-leg-drive { background: var(--mode-drive); }
.line-leg-open { height: 4px; margin-top: -2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 13px); }
/* a station: its time above the line, the dot on it, the name below */
.line-stop { position: absolute; top: 50%; width: 0; height: 0; }
.line-stop button {
  position: absolute; left: 0; top: 0; width: 140px; height: 84px; transform: translate(-50%, -50%);
  padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink); cursor: pointer; font: inherit;
}
.line-dot {
  position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; display: grid; place-items: center; border-radius: 50%;
  background: var(--paper); box-shadow: inset 0 0 0 3px var(--ink); font: 600 11px/1 var(--mono); color: var(--ink);
  transition: transform .15s, background .15s, color .15s, box-shadow .15s;
}
.line-time { position: absolute; left: 0; right: 0; bottom: calc(50% + 19px); text-align: center; font: 500 11px/1 var(--mono); color: var(--muted); }
.line-name { position: absolute; left: 4px; right: 4px; top: calc(50% + 19px); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12.5px/1.2 var(--sans); letter-spacing: -.01em; }
.line-stop button:hover .line-dot { transform: scale(1.12); }
.line-stop button:hover .line-name { color: var(--coral-ink); }
.line-stop.on .line-dot { background: var(--coral); color: #fff; box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--coral); }
.line-stop.on .line-name { color: var(--coral-ink); }
.line-stop.on .line-time { color: var(--ink); }
.line-stop button:focus-visible { outline: none; }
.line-stop button:focus-visible .line-dot { outline: 3px solid var(--sea); outline-offset: 4px; }
.line-empty { position: absolute; inset: 0; display: grid; place-items: center start; padding-left: 4px; color: var(--muted); font-size: 13px; }

/* two columns at most: the assistant takes the timeline's place */
.workspace.with-copilot { grid-template-columns: minmax(0, 58fr) minmax(420px, 42fr); }
.workspace.with-copilot .pane-plan { display: none; }
.workspace.with-copilot .pane-copilot { grid-column: 2; border-left: 1px solid var(--line); background: var(--paper); }
.workspace .pane-plan .day-tabs { display: none; }

/* the timeline and the day's summary scroll together */
.plan-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.plan-scroll .timeline { flex: none; overflow: visible; min-height: 0; }
.day-summary { margin: auto 24px 0; padding: 22px 0 26px; border-top: 1px solid var(--line); }
.day-summary:empty { display: none; }
.ds-kicker { margin: 0 0 12px; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ds-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ds-stat { display: grid; gap: 6px; padding: 14px 14px 12px; background: var(--paper); }
.ds-stat b { font: 650 22px/1.1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ds-stat span { font-size: 12px; color: var(--muted); }
.ds-people { margin-top: 18px; }
.ds-people ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ds-people li { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.ds-people i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.ds-people b { font: 500 12px/1 var(--mono); color: var(--muted); }

/* phones: no band (the timeline already reads top to bottom); the day
   tabs come back above it */
@media (max-width: 899px) {
  .line-band { display: none; }
  .workspace .pane-plan .day-tabs { display: flex; }
  .workspace.with-copilot .pane-plan { display: none; }
  .workspace.with-copilot[data-tab=plan] .pane-plan { display: flex; }
  .day-summary { margin: 8px 16px 0; }
}
/* short screens: a slimmer band */
@media (max-height: 760px) and (min-width: 900px) { .line-band { height: 96px; } .line-name { font-size: 11.5px; } }
.line-stop { z-index: 2; }
.line-leg { z-index: 1; }

/* the assistant's preferences: a card at the top of the panel, never a
   footnote. Set: what it plans with, as chips. Not set: an invitation. */
.pa-prefs {
  display: grid; gap: 10px; width: 100%; margin: 0 0 14px; padding: 14px 16px 16px; text-align: left; cursor: pointer;
  border: 1px solid var(--ink); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; text-decoration: none;
  transition: box-shadow .15s, transform .15s;
}
.pa-prefs:hover { box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }
.pa-prefs:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
.pa-prefs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pa-prefs-kicker { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pa-prefs-edit { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.pa-prefs-edit svg { width: 14px; height: 14px; }
.pa-prefs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pa-chip { padding: 5px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 12.5px; font-weight: 500; line-height: 1.1; }
.pa-prefs-empty { display: grid; gap: 4px; }
/* a button, so the grotesk like every other card; the display face is for page and section names */
.pa-prefs-empty strong { font: 650 16px/1.25 var(--sans); letter-spacing: -.01em; }
.pa-prefs-empty small { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.pa-prefs-unset { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 8%, var(--surface)); }
.pa-prefs-unset .pa-prefs-kicker, .pa-prefs-unset .pa-prefs-edit { color: var(--coral-ink); }
.pa-prefs-unset:hover { box-shadow: 4px 4px 0 var(--coral); }
@media (prefers-reduced-motion: reduce) { .pa-prefs, .pa-prefs:hover { transition: none; transform: none; } }
.pa-chip-plain { background: none; color: var(--muted); padding-left: 0; }

/* =====================================================================
   Planning together, visibly. On a shared trip every person has one
   colour (personColour): their avatar, a stripe beside each stop they
   added, the ring of its station on the line, and a glow on whatever
   they've just changed. Alone, none of it shows.
   ===================================================================== */
.crew .avatar { position: relative; box-shadow: 0 0 0 2px var(--surface); transition: opacity .2s, filter .2s; }
.crew .avatar.is-away { opacity: .38; filter: grayscale(.5); }
.crew .avatar.is-here::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%;
  background: #23a26d; box-shadow: 0 0 0 2px var(--surface);
}
.crew .avatar + .avatar { margin-left: -6px; }

/* who added each stop: a stripe down the card's left edge */
.editor.is-shared .workspace .stop-card { position: relative; }
.editor.is-shared .workspace .stop-card::before {
  content: ""; position: absolute; left: -10px; top: 12px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--who);
}
.stop-added-by, .stop-touched { display: flex; align-items: center; gap: 6px; }
.stop-added-by i, .stop-touched i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.workspace .stop-touched { color: var(--ink); font-weight: 600; font-size: 12px; }
.workspace .stop-added-by { font-size: 12px; color: var(--muted); }

/* just changed by someone else: a wash of their colour that fades */
@keyframes stop-glow { from { background: color-mix(in srgb, var(--glow) 22%, transparent); } to { background: transparent; } }
.workspace .stop.stop-glow .stop-card { animation: stop-glow 4s ease-out both; border-radius: 6px; }
.workspace .stop.stop-glow .stop-num { box-shadow: 0 0 0 3px var(--glow); }

/* the line: on a shared trip a station's ring is its author's colour */
.editor.is-shared .line-stop:not(.on) .line-dot { box-shadow: inset 0 0 0 3px var(--who); }
@keyframes line-ping { from { box-shadow: 0 0 0 0 var(--who); } to { box-shadow: 0 0 0 14px transparent; } }
.line-stop-glow .line-dot { animation: line-ping 1s ease-out 3; }

@media (prefers-reduced-motion: reduce) {
  .workspace .stop.stop-glow .stop-card { animation: none; background: color-mix(in srgb, var(--glow) 14%, transparent); }
  .line-stop-glow .line-dot { animation: none; }
}

/* the top bar: a firm edge, so the page under it starts somewhere */
.topbar { background: color-mix(in srgb, var(--paper) 94%, transparent); border-bottom: 1px solid var(--line-2); }

/* =====================================================================
   Travel preferences: two labelled sections, the trip's (shared) and
   food (only you), every choice a visible pill instead of a dropdown,
   and the save button always in view at the bottom.
   ===================================================================== */
.dialog-prefs { width: min(640px, calc(100vw - 32px)); padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.dialog-prefs[open] { display: flex; }
.pref-form { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 32px); }
.pref-head { padding: 24px 28px 16px; border-bottom: 1px solid var(--line); }
.pref-kicker { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--coral-ink); }
.pref-kicker svg { width: 13px; height: 13px; }
.pref-head h2 { margin: 0 0 6px; font-size: 24px; }
.pref-head p { margin: 0; }
.pref-body { overflow-y: auto; padding: 18px 28px 8px; display: grid; gap: 16px; overscroll-behavior: contain; }
.pref-sec { display: grid; gap: 14px; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.pref-sec-head { display: flex; align-items: center; gap: 8px; }
.pref-sec-head svg { width: 18px; height: 18px; color: var(--ink); }
.pref-sec-head h3 { margin: 0; font-size: 15px; font-weight: 650; }
.pref-badge { margin-left: auto; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500; background: color-mix(in srgb, var(--sea) 12%, transparent); color: var(--sea); }
.pref-sec-food .pref-badge { background: var(--paper-2); color: var(--ink-2); }
.pref-row { display: grid; gap: 7px; margin: 0; }
.pref-label { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.pref-row input[name=allergies] { width: 100%; }

/* pills: several (chips) or one (segmented) */
.pref-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pref-chip, .seg-opt { position: relative; cursor: pointer; }
.pref-chip input, .seg-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pref-chip span { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 500; color: var(--ink-2); transition: background .12s, border-color .12s, color .12s; }
.pref-chip:hover span { border-color: var(--ink-2); color: var(--ink); }
.pref-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pref-chip input:checked + span::before { content: ""; width: 9px; height: 5px; margin-top: -2px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.pref-seg { display: flex; flex-wrap: wrap; gap: 0; width: fit-content; max-width: 100%; padding: 3px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); }
.seg-opt span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); transition: background .12s, color .12s; }
.seg-opt:hover span { color: var(--ink); }
.seg-opt input:checked + span { background: var(--ink); color: var(--paper); }
:is(.pref-chip, .seg-opt) input:focus-visible + span { outline: 2px solid var(--sea); outline-offset: 2px; }
.pref-foot { margin: 0; padding: 14px 28px; border-top: 1px solid var(--line); background: var(--surface); }
@media (max-width: 560px) {
  .pref-head { padding: 20px 18px 14px; }
  .pref-body { padding: 14px 18px 6px; }
  .pref-sec { padding: 14px; }
  .pref-foot { padding: 12px 18px; }
  .pref-foot .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .pref-chip span, .seg-opt span { transition: none; } }
/* the scroll area takes focus when the dialog opens; no ring across it */
.pref-body:focus { outline: none; }
/* phones: a wrapped segmented row reads as a box of words; separate pills instead */
@media (max-width: 560px) {
  .pref-seg { gap: 6px; padding: 0; border: 0; background: none; }
  .seg-opt span { min-height: 32px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); }
  .seg-opt input:checked + span { border-color: var(--ink); }
}
/* the search status line only shows when it has something to say */
.share-method [role=status]:empty { display: none; }

/* =====================================================================
   Ready-made trips, and trip discovery on the map (public/explore-map.js,
   public/discover.js), in the hero's journal voice. The map's panel holds
   one tray: the places saved from the map, the optional length and food
   folded away, and one action, Find journeys; the matching plans then
   fill the "Journeys for …" section under the map, with why each is there.
   ===================================================================== */
.rx-head { --serif-art: "Cormorant Garamond", "Iowan Old Style", Georgia, serif; }
.home .rx .rx-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 30px; }
.home .rx .rx-head h2 { font: 500 clamp(38px, 3.6vw, 56px)/1.04 var(--serif-art); letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.home .rx .rx-head .section-sub { max-width: 46ch; text-wrap: pretty; margin-top: 12px; font: italic 400 clamp(17px, 1.2vw, 20px)/1.45 var(--serif-art); color: var(--ink-2); }

/* the tray, at the top of the map's panel */
.xm-tray { --serif-art: "Cormorant Garamond", "Iowan Old Style", Georgia, serif; position: sticky; top: -20px; z-index: 2; display: flex; flex-direction: column; gap: 12px; margin: -20px -20px 14px; padding: 20px 20px 18px; background: color-mix(in srgb, var(--paper-2) 55%, var(--surface)); border-bottom: 1px solid var(--line); }
.xm-tray-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.xm-tray-title { font: italic 500 24px/1.1 var(--serif-art); letter-spacing: 0; color: var(--ink); }
.xm-tray-count { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--coral-ink); }
.xm-tray-hint { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.xm-picked { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.xm-picked li { display: inline-flex; align-items: center; max-width: 100%; min-height: 32px; padding: 0 2px 0 4px; border-radius: 999px; background: var(--ink); color: var(--paper); }
.xm-picked-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px 0 8px; border: 0; background: none; color: inherit; font: 500 13px/1 var(--sans); cursor: pointer; }
.xm-picked-name::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--coral); vertical-align: 1px; }
.xm-picked-x { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.xm-picked-x svg { width: 13px; height: 13px; }
.xm-picked-x:hover { background: rgba(255, 255, 255, .16); }
.xm-prefs-toggle { display: inline-flex; align-items: baseline; gap: 2px; width: fit-content; padding: 0; border: 0; background: none; color: var(--ink); font: 600 13.5px/1.3 var(--sans); cursor: pointer; }
.xm-prefs-toggle > span:first-child { width: 14px; color: var(--coral-ink); font-weight: 500; }
.xm-prefs-toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
.xm-prefs-opt { font: italic 400 15px/1 var(--serif-art); color: var(--muted); }
.xm-prefs-count { font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--coral-ink); }
.xm-prefs { display: flex; flex-direction: column; gap: 8px; }
.xm-prefs[hidden] { display: none; }
.xm-prefs .dx-label:not(:first-child) { margin-top: 4px; }
.xm-tray-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-top: 2px; }
.xm-find { min-height: 42px; padding: 0 22px; }
.xm-start { color: var(--muted); }
.xm-start:hover { color: var(--ink); }
.xm-pick { width: fit-content; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.xm-pick:hover:not(:disabled) { background: #000; }
.xm-pick.on { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.xm-pick.on svg { color: var(--coral-ink); }
.place-pin.is-picked { color: var(--coral-ink); }
.pad-x { padding: 0 10px; }
/* a place in the picks: vermilion on the map */
.pin-result.pin-picked { background: var(--coral); border-color: var(--surface); box-shadow: 0 0 0 2px var(--coral), 0 1px 4px rgba(0, 0, 0, .35); }
.schematic-result.picked circle { fill: var(--coral); stroke: var(--surface); stroke-width: 3; }

.dx-label { font: 600 13px/1.3 var(--sans); color: var(--ink); }
.dx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dx-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: 500 13px/1 var(--sans); cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.dx-chip:hover { border-color: var(--ink-2); color: var(--ink); }
.dx-chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dx-chip:focus-visible, .xm-prefs-toggle:focus-visible, .xm-picked button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* the matching plans, in the section under the map */
.dx-results { --serif-art: "Cormorant Garamond", "Iowan Old Style", Georgia, serif; }
.dx-results[hidden] { display: none; }
.dx-results-lead { margin-bottom: 20px; font: italic 500 clamp(22px, 1.7vw, 27px)/1.3 var(--serif-art); color: var(--ink); }
.dx-why { padding: 10px 0 2px; border-top: 1px dashed var(--line-2); font-size: 13px; line-height: 1.45; }
.dx-fit { margin-bottom: 6px; font: 500 11px/1 var(--mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dx-fit-full { color: var(--coral-ink); }
.dx-why ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.dx-why li { position: relative; padding-left: 16px; color: var(--ink-2); }
.dx-why li::before { position: absolute; left: 0; top: 0; }
.dx-yes::before { content: "\2713"; color: var(--ink); }
.dx-no { color: var(--muted) !important; }
.dx-no::before { content: "\2013"; color: var(--muted); }
.dx-empty { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.dx-empty-title { font: italic 500 23px/1.3 var(--serif-art); color: var(--ink); }
.dx-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.near .cat-chips[hidden], .near .it-grid[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { .dx-chip { transition: none; } }
@media (max-width: 960px) {
  .xm-tray { position: static; }
}
@media (max-width: 640px) {
  .xm-find { flex: 1 1 100%; }
  .xm-tray-actions { justify-content: center; }
  .home .rx .rx-head h2 { font-size: 38px; }
}

/* =====================================================================
   The hero as a cover (November 2026): the words take a wider column and
   the headline is set at cover size, "JOURNEY" filling the measure, with
   "written by us." tucked under it. The headline, verse and actions are
   one group; the route map of the destinations sits at the foot.
   ===================================================================== */
@media (min-width: 961px) { .hx { grid-template-columns: minmax(480px, 45fr) 55fr; } }
.hx-copy { justify-content: space-between; gap: 20px; padding: clamp(24px, 4.4vh, 56px) clamp(24px, 2.8vw, 52px) clamp(16px, 2.4vh, 28px) clamp(20px, 5vw, 96px); }
.hx .jh-copy { max-width: none; }
/* the headline group sits high, the destinations at the foot; the space
   between is the column's, not shared out evenly */
.hx-copy > .jh-copy { margin: auto 0; }
.hx-copy { justify-content: flex-start; }
/* the size comes from the column, not the screen: JOURNEY is ~5.1em wide
   in Cormorant, so it fills the measure; capped by height too */
.hx-copy { container-type: inline-size; container-name: hxcopy; }
.hx .jh-title.hx-poem { font-size: min(20.4cqi, 13.8vh, 160px); line-height: .84; letter-spacing: -.005em; margin: 0 0 clamp(16px, 2.4vh, 26px); }
.hx-poem-the { letter-spacing: .02em; }
.hx-poem-sign { height: .74em; margin: .06em 0 0 .06em; }
.hx-poem-by { font-size: .42em; }
.hx-poem-us { font-size: 1.32em; margin-left: .08em; transform: translateY(.02em); }
.hx-kicker { margin-bottom: clamp(18px, 2.6vh, 28px); }
.hx .jh-lede.hx-verse { margin-bottom: clamp(26px, 3.6vh, 40px); font-size: clamp(18px, 1.35vw, 23px); }

/* the destinations stay the route map (the line and its stations, above);
   here only the name on view is set a little larger */
.hx .jh-kicker { margin-bottom: 6px; }
.hx .jh-place { font-size: clamp(24px, 2vw, 32px); }

@media (max-height: 940px) and (min-width: 961px) { .hx .jh-title.hx-poem { font-size: min(20.4cqi, 12.8vh, 140px); } }
@media (max-height: 780px) and (min-width: 961px) { .hx .jh-title.hx-poem { font-size: min(20.4cqi, 11.4vh, 120px); } .hx-kicker { margin-bottom: 12px; } .hx .jh-lede.hx-verse { margin-bottom: 22px; } }
@media (max-width: 960px) {
  .hx-copy { padding: 30px 20px 6px; gap: 26px; }
  .hx .jh-title.hx-poem { font-size: min(17.6cqi, 112px); margin-bottom: 18px; }
  .hx .jh-lede.hx-verse { font-size: 18px; margin-bottom: 28px; }
}

/* =====================================================================
   The top bar's controls press like keys (November 2026): each sits on
   a short ink shadow, rises a little on hover and goes down onto it when
   pressed; the page you're on stays pressed. Ink only, never coral.
   ===================================================================== */
.topbar-nav > a, .topbar-nav > .btn, .topbar-nav .me > .btn {
  --key: 2px; --key-ink: color-mix(in srgb, var(--ink) 38%, transparent); --key-edge: color-mix(in srgb, var(--ink) 55%, var(--line-2));
  position: relative; border: 1px solid var(--key-edge); border-radius: 8px;
  box-shadow: 0 var(--key) 0 var(--key-ink);
  transition: transform .12s ease-out, box-shadow .12s ease-out, background .15s;
}
.topbar-nav > a { padding: 5px 11px; background: var(--surface); color: var(--ink); }
.topbar-nav > .btn-ghost, .topbar-nav .me > .btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--key-edge); }
.topbar-nav > .btn-primary { border-color: transparent; }
.topbar-nav > a:hover, .topbar-nav > .btn:hover:not(:disabled), .topbar-nav .me > .btn:hover:not(:disabled) {
  transform: translateY(-1px); box-shadow: 0 calc(var(--key) + 1px) 0 var(--key-ink);
}
.topbar-nav > a:hover, .topbar-nav > .btn-ghost:hover:not(:disabled), .topbar-nav .me > .btn-ghost:hover:not(:disabled) { background: var(--surface); border-color: var(--key-edge); color: var(--ink); }
.topbar-nav > a:active, .topbar-nav > .btn:active:not(:disabled), .topbar-nav .me > .btn:active:not(:disabled),
.topbar-nav > a.on {
  transform: translateY(var(--key)); box-shadow: 0 0 0 var(--key-ink); transition-duration: .05s;
}
.topbar-nav > a.on { background: var(--paper-2); }
.topbar-nav > a:focus-visible, .topbar-nav > .btn:focus-visible, .topbar-nav .me > .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .topbar-nav > a, .topbar-nav > .btn, .topbar-nav .me > .btn { transition: none; }
}
@media (max-width: 520px) {
  .topbar-nav { gap: 7px; }
  .topbar-nav > a { padding: 5px 8px; }
  .topbar-nav > .btn, .topbar-nav .me > .btn { padding: 5px 9px; }
}

/* =====================================================================
   Published journeys and the profile (November 2026). The journey
   (/journeys/pub-…, public/journey-page.js) is the shareable one:
   photograph first, editorial serif, the days as a journal. The profile
   (/profile, public/profile.js) is plain and orderly: who you are, then
   your journeys in three tabs.
   ===================================================================== */
.journey, .profile { --serif-art: "Cormorant Garamond", "Iowan Old Style", Georgia, serif; }
.journey { width: 100%; }
.jy-owner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; max-width: 1180px; margin: 16px auto 0; padding: 10px 24px; font-size: 13.5px; color: var(--ink-2); }
.jy-cover { position: relative; display: flex; align-items: flex-end; min-height: clamp(320px, 56vh, 560px); margin: 16px clamp(8px, 1.4vw, 24px) 0; border-radius: 16px; overflow: hidden; background: var(--paper-2); }
.jy-cover .cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jy-cover.has-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 14, 12, .72), rgba(14, 14, 12, .1) 62%, transparent); }
.jy-cover-text { position: relative; z-index: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 56px); color: var(--ink); }
.jy-cover.has-photo .jy-cover-text { color: #fbf8f1; }
.jy-kicker { margin-bottom: 14px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--coral-ink); }
.jy-cover.has-photo .jy-kicker { color: #ffd2c2; }
.jy-title { max-width: 18ch; font: 500 clamp(44px, 6.4vw, 96px)/.98 var(--serif-art); letter-spacing: -.01em; text-wrap: balance; overflow-wrap: anywhere; }
.jy-byline { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 18px; font: italic 400 clamp(17px, 1.3vw, 21px)/1.3 var(--serif-art); }
.jy-byline strong { font-weight: 600; font-style: normal; font-family: var(--sans); font-size: .82em; }
.jy-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(32px, 5vw, 80px); max-width: 1180px; margin: 0 auto; padding: clamp(36px, 5vw, 64px) 24px 72px; }
.jy-intro { grid-column: 1 / -1; max-width: 62ch; }
.jy-desc { font: italic 400 clamp(21px, 1.8vw, 28px)/1.42 var(--serif-art); color: var(--ink); text-wrap: pretty; overflow-wrap: anywhere; }
.jy-meta { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.jy-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.jy-map { position: sticky; top: calc(var(--bar-h) + 20px); align-self: start; height: min(68vh, 620px); border-radius: 14px; overflow: hidden; background: #e8e2d6; }
.jy-days { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.jy-day-h { display: flex; align-items: baseline; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); font: 500 clamp(28px, 2.4vw, 36px)/1.1 var(--serif-art); letter-spacing: 0; text-transform: none; }
.jy-day-n { font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--coral-ink); }
.jy-stops { list-style: none; margin: 0; padding: 0; }
.jy-stop { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 0 16px; padding: 16px 0; border-bottom: 1px dashed var(--line-2); }
.jy-stop:last-child { border-bottom: 0; }
.jy-time { padding-top: 3px; font: 500 14px/1.2 var(--mono); color: var(--ink); }
.jy-stop h3 { font: 600 18px/1.3 var(--sans); letter-spacing: -.01em; overflow-wrap: anywhere; }
.jy-stop-meta { margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.jy-stop-start h3 { font-weight: 500; color: var(--ink-2); }
.jy-foot { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line); font: italic 400 18px/1.4 var(--serif-art); color: var(--ink-2); }
@media (max-width: 900px) {
  .jy-body { grid-template-columns: 1fr; }
  .jy-map { position: relative; top: 0; height: 320px; }
}
@media (max-width: 520px) {
  .jy-cover { margin: 8px 8px 0; border-radius: 12px; min-height: 380px; }
  .jy-body { padding: 32px 18px 56px; gap: 32px; }
  .jy-stop { grid-template-columns: 48px minmax(0, 1fr); gap: 0 12px; }
}
@media print {
  .topbar, footer, .jy-owner, .jy-actions, .jy-map, #toasts { display: none !important; }
  .jy-body { display: block; padding: 24px 0; }
  .jy-cover { min-height: 260px; margin: 0; }
  .jy-day { break-inside: avoid; margin-top: 28px; }
}

/* the publish dialog */
.pub-live { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; background: var(--paper); }
.pub-link { display: flex; gap: 8px; align-items: center; }
.pub-link input { flex: 1; min-width: 0; font: 13px var(--mono); }
.pub-choices { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; }
.pub-choices legend { margin-bottom: 4px; font-weight: 600; }
.pub-choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; cursor: pointer; }
.pub-choice:has(input:checked) { border-color: var(--ink); background: var(--surface); }
.pub-choice input { flex: none; width: 16px; height: 16px; margin: 3px 0 0; padding: 0; accent-color: var(--ink); }
.pub-choice span { flex: 1; min-width: 0; }
.pub-choice span { display: flex; flex-direction: column; gap: 2px; }

/* the header's way to your profile */
.me-link { display: inline-flex; align-items: center; gap: 8px; padding: 3px 8px 3px 3px; border-radius: 999px; color: inherit; text-decoration: none; }
.me-link:hover, .me-link.on { background: var(--paper-2); }
.me-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 760px) { .me-link { padding: 0; gap: 0; } .me-link:hover, .me-link.on { background: none; } .me-link.on .avatar { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--coral); } }

/* the profile */
.profile { display: flex; flex-direction: column; gap: 48px; max-width: 1180px; margin: 0 auto; padding: 48px 24px 80px; }
.pf-account { display: flex; gap: 24px; align-items: flex-start; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.pf-account > .avatar { width: 84px; height: 84px; flex: none; font-size: 28px; }
.pf-who { min-width: 0; flex: 1; max-width: 640px; }
.pf-name { font: 500 clamp(36px, 4vw, 54px)/1.02 var(--serif-art); letter-spacing: -.01em; text-transform: none; overflow-wrap: anywhere; }
.pf-handle { margin-top: 8px; font: 500 13px/1.4 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.pf-bio { margin-top: 14px; max-width: 58ch; font: italic 400 19px/1.45 var(--serif-art); color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.pf-bio-empty { color: var(--muted); }
.pf-account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pf-edit { max-width: 480px; }
.pf-h { font: 500 clamp(28px, 2.6vw, 38px)/1.1 var(--serif-art); letter-spacing: 0; text-transform: none; }
.pf-tabs { display: flex; flex-wrap: wrap; gap: 2px 24px; margin: 18px 0 28px; border-bottom: 1px solid var(--line); }
.pf-tab { display: inline-flex; align-items: baseline; gap: 8px; margin-bottom: -1px; padding: 10px 0 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: 600 14px/1 var(--sans); cursor: pointer; }
.pf-tab:hover { color: var(--ink); }
.pf-tab.on { color: var(--ink); border-bottom-color: var(--coral); }
.pf-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pf-count { font: 500 11px/1 var(--mono); color: var(--muted); }
.pf-state { margin-bottom: 6px; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pf-state.is-published { color: var(--coral-ink); }
.pf-pubs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pf-pub { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.pf-pub:first-child { padding-top: 0; }
.pf-pub-cover { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--paper-2); }
.pf-pub-cover .cover-img { width: 100%; height: 100%; object-fit: cover; }
.pf-pub.is-off .pf-pub-cover { opacity: .5; }
.pf-pub h3 { font: 600 19px/1.3 var(--sans); letter-spacing: -.01em; overflow-wrap: anywhere; }
.pf-pub h3 a { color: inherit; text-decoration: none; }
.pf-pub h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pf-pub-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
@media (max-width: 640px) {
  .profile { padding: 32px 18px 64px; gap: 36px; }
  .pf-account { flex-direction: column; gap: 16px; }
  .pf-account > .avatar { width: 64px; height: 64px; font-size: 22px; }
  .pf-pub { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .pf-tabs { gap: 2px 18px; }
}

/* =====================================================================
   A trip as a printable document (/trips/:id/print, public/trip-print.js):
   on screen, a sheet of paper with one bar of actions above it; printed
   or saved as a PDF, only the sheet.
   ===================================================================== */
.tp { --serif-art: "Cormorant Garamond", "Iowan Old Style", Georgia, serif; min-height: 100vh; padding: 0 16px 64px; background: var(--paper); }
.tp-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; max-width: 820px; margin: 0 auto; padding: 14px 0; background: var(--paper); }
.tp-bar p { flex: 1; min-width: 200px; text-align: center; }
.tp-doc { max-width: 820px; margin: 0 auto; padding: clamp(28px, 6vw, 64px); background: #fff; color: #17171a; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 40px -18px rgba(0, 0, 0, .25); }
.tp-head { margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid #d9d6cc; }
.tp-cover { position: relative; height: 220px; margin-bottom: 28px; border-radius: 6px; overflow: hidden; background: #ecebe5; }
.tp-cover .cover-img { width: 100%; height: 100%; object-fit: cover; }
.tp-kicker { margin-bottom: 10px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--coral-ink); }
.tp-title { font: 500 clamp(36px, 5vw, 56px)/1.02 var(--serif-art); letter-spacing: -.01em; text-transform: none; overflow-wrap: anywhere; }
.tp-sub { margin-top: 12px; font-size: 14px; color: #55555c; overflow-wrap: anywhere; }
.tp-day { margin-top: 32px; break-inside: avoid-page; }
.tp-day-h { display: flex; align-items: baseline; gap: 14px; padding-bottom: 8px; border-bottom: 1px solid #d9d6cc; font: 500 26px/1.15 var(--serif-art); letter-spacing: 0; text-transform: none; }
.tp-day-n { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--coral-ink); }
.tp-stops { list-style: none; margin: 0; padding: 0; }
.tp-stop { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 0 16px; padding: 12px 0; break-inside: avoid; }
.tp-time { display: flex; flex-direction: column; padding-top: 2px; font: 500 14px/1.25 var(--mono); }
.tp-time small { font-size: 11px; color: #77777e; }
.tp-stop h3 { font: 600 16px/1.3 var(--sans); overflow-wrap: anywhere; }
.tp-meta { margin-top: 2px; font-size: 12.5px; color: #66666d; }
.tp-notes { margin-top: 6px; padding-left: 10px; border-left: 2px solid #e2e0d8; font-size: 13.5px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.tp-leg { margin-left: 78px; padding: 2px 0 2px 12px; border-left: 2px dotted #c2beb2; font-size: 12px; color: #66666d; }
.tp-stale { color: #9a5a00; }
.tp-empty { padding: 12px 0; font-size: 13.5px; color: #77777e; }
.tp-foot { margin-top: 40px; padding-top: 14px; border-top: 1px solid #d9d6cc; font-size: 11.5px; line-height: 1.5; color: #77777e; }
@media (max-width: 520px) {
  .tp { padding: 0 8px 40px; }
  .tp-bar p { order: 3; flex-basis: 100%; }
  .tp-stop { grid-template-columns: 50px minmax(0, 1fr); gap: 0 10px; }
  .tp-leg { margin-left: 60px; }
}
@media print {
  @page { margin: 16mm 14mm; }
  body:has(.tp) { background: #fff; }
  .tp { padding: 0; background: #fff; }
  .tp-bar, #toasts { display: none !important; }
  .tp-doc { max-width: none; padding: 0; box-shadow: none; }
  .tp-cover { height: 170px; }
}

/* export: the actions, the read-only link panel, and routes Google didn't give */
.tp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-share { max-width: 820px; margin: 0 auto 16px; padding: 16px 20px; border: 1px solid var(--line, #d9d6cc); border-radius: 10px; background: var(--card, #fff); }
.tp-share h2 { margin-bottom: 4px; font: 600 15px/1.3 var(--sans); letter-spacing: 0; text-transform: none; }
.tp-link { display: flex; gap: 8px; margin-top: 10px; }
.tp-link input { flex: 1; min-width: 0; font: 13px/1.2 var(--mono); }
.tp-link-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tp-leg-none { color: #8a8a90; font-style: italic; }
.tp-note { margin: -16px 0 20px; padding: 8px 12px; border-radius: 6px; background: #fbf3e4; font-size: 13px; color: #6b4a00; }
@media print {
  .tp-share { display: none !important; }
}

/* the account menu (avatar and name) and the language choice */
.me { position: relative; }
button.me-link { border: 0; background: none; font: inherit; cursor: pointer; }
.me-caret { display: inline-flex; width: 14px; height: 14px; color: var(--ink-2); transform: rotate(90deg); transition: transform .15s ease; }
.me-caret svg { width: 14px; height: 14px; }
.me-link[aria-expanded="true"] .me-caret { transform: rotate(-90deg); }
.me-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 220px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .06); }
.me-menu[hidden] { display: none; }
.me-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 500 14px/1.2 var(--sans); text-align: left; text-decoration: none; cursor: pointer; }
a.me-item:hover, button.me-item:hover, a.me-item:focus-visible, button.me-item:focus-visible { background: var(--paper-2); outline: none; }
.me-item svg { width: 16px; height: 16px; }
.me-lang { justify-content: space-between; cursor: default; }
.lang-choices { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--paper-2); }
.lang-choice { padding: 4px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink-2); font: 600 13px/1.2 var(--sans); cursor: pointer; }
.lang-choice.on { background: var(--surface, #fff); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.lang-choice:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.me-signout { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; color: var(--ink-2); }
.lang-switch { padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--ink-2); font: 600 13px/1.2 var(--sans); cursor: pointer; }
.lang-switch:hover { color: var(--ink); border-color: var(--key-edge, var(--line)); }
.lang-switch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 760px) {
  .me-menu { right: -8px; }
}

/* the hero's poem in Chinese: the script and display faces have no Chinese
   glyphs, so the lines are set by size alone and kept inside the column */
:lang(zh-CN) .hx-poem-the { max-width: none; white-space: nowrap; font-size: .62em; letter-spacing: .04em; }
:lang(zh-CN) .hx-poem-sign { height: auto; margin-top: .12em; }
:lang(zh-CN) .hx-poem-by { font-style: normal; font-size: .3em; }
:lang(zh-CN) .hx-poem-us { margin-left: .2em; font: 400 .5em/1.1 var(--serif-art); letter-spacing: .08em; transform: none; }
:lang(zh-CN) .hx .hx-verse, :lang(zh-CN) .hx .hx-verse em, :lang(zh-CN) .hx .hx-kicker, :lang(zh-CN) .hx .jh-explore { font-style: normal; }

/* the share dialog: people you've travelled with, a menu under the search */
.companions-box { position: relative; margin: 8px 0 4px; }
.companions-toggle { gap: 6px; }
.companions-toggle svg { width: 15px; height: 15px; }
.companions-count { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--paper-2); font-size: 12px; text-align: center; }
.companions-caret { display: inline-flex; transform: rotate(90deg); transition: transform .15s ease; }
.companions-toggle[aria-expanded="true"] .companions-caret { transform: rotate(-90deg); }
.companions-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; width: min(360px, 100%); max-height: 264px; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .06); }
.companions-pop[hidden] { display: none; }
.companions { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.companion { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; }
.companion:hover { background: var(--paper-2); }
.companion .grow { min-width: 0; overflow-wrap: anywhere; }
.companions-more { padding: 6px 8px 2px; border-top: 1px solid var(--line); margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .companions-caret { transition: none; } }

/* phones: the bar fits its entries without widening the page. Signed out
   (Sign in and the language switch take more room), the wordmark gives way
   to the mark below 430px; the link keeps its name. */
.topbar { min-width: 0; }
.topbar-nav { min-width: 0; }
@media (max-width: 430px) {
  .meal-gap { margin-left: 0; }
  .topbar-out .brand-word { display: none; }
  .topbar-nav { gap: 6px; }
  .topbar-nav > a { padding: 5px 7px; }
  .topbar-nav .me { gap: 6px; }
  .topbar-out .topbar-nav .me { margin-left: 0; padding-left: 6px; }
}

/* trip settings: new dates would move the starting point; the person decides */
.start-move { margin: 4px 0 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); font-size: 14px; }
.start-move[hidden] { display: none; }
.start-move .dialog-actions { margin-top: 10px; }