/*
  The web app's design system, hand-written and framework-free.
  Shared spacing and semantic colours follow the native client. Web planning
  uses neutral surfaces, deep green emphasis, a reusable type scale and 16px
  content corners. Existing creation/retrospective illustrations retain their
  pastel assets; Home summaries and the itinerary rely on information hierarchy.

  The sections below, in file order. The order is the cascade, so a rule
  moved between them is a change of behaviour, not of filing.

    Tokens
    Base elements
    Shell
    Surfaces
    Text
    Map
    Controls
    Chips, badges, tabs
    Live trip room
    Lists
    Trip cards
    Home
    Itinerary
    States
    Toasts
    Sign-in
    Public sample trip
    Public legal documents
    Blazor and screen readers
*/

/* ---------- Tokens ---------- */
:root {
    /*
      Light unless the reader says otherwise. A trip app opening in a dark
      window was the single loudest complaint about the last look, and the OS
      preference is a poor proxy for it: someone who keeps their editor dark
      still wants a postcard to arrive on white paper. Night stays one pick away
      in the top bar, and "system" is there for whoever wants to hand the choice
      back to the OS.
    */
    color-scheme: light;

    /* Spacing, matching AppSpacing in the phone app. */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-xxl: 28px;
    --space-huge: 40px;
    --font-display: clamp(1.65rem, 1.2rem + 1.6vw, 2.25rem);
    --font-title: 1.2rem;
    --font-subtitle: 1.0625rem;
    --font-body: 1rem;
    --font-secondary: 0.9rem;
    --font-caption: 0.8rem;
    --control-height: 44px;

    /* Responsive web corners. Shared names; native AppRadius is unchanged. */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: var(--radius-md);
    --radius-pill: 999px;

    /*
      One palette, written once. `light-dark()` picks the arm from the root's
      `color-scheme` above, so the same declaration serves both appearances
      without a second copy of the list.

      The dark arm is dusk, not night, and it is not a pastel scheme with the
      lights off: a pastel is a tint of white, so on a dark ground it has to be
      re-made as a deep muted version of the same hue with a light ink on top.
      Both arms carry the same five hues in the same order, which is what lets
      the status colours below mean the same thing in either.

      Its shadows are deep navy rather than a darkened version of the day's
      warm ground. A dark green-grey reads as mould rather than as evening, and
      it dulls every pastel laid over it, since each one then sits on a ground
      that shares its own hue. Navy shares none of them, so the five stay
      distinguishable — and the pastels themselves are pitched a step brighter
      and a step more saturated than a strict darkening would give, which is
      what separates a chip from the card it sits on without a border.
    */

    /* The brand seed, #176B5B, warmed towards the deep teal the pastels sit
       under. Small areas only: a button, a heading, an icon. */
    --brand: light-dark(#256b63, #6fd6c4);
    --brand-strong: light-dark(#17504a, #97e7da);
    --brand-bright: light-dark(#37907f, #47b8a4);
    --brand-soft: light-dark(#cfefe4, #24544c);
    --brand-on: light-dark(#ffffff, #06322c);
    --accent: light-dark(#ffe9a8, #f0c964);
    --accent-on: light-dark(#5c4300, #3a2a00);

    /*
      The postcard's five pastels. `-ink` is the text that sits on the pastel;
      it is a darkened version of the same hue rather than the body colour, so a
      chip reads as one object instead of black type on a coloured patch.
    */
    --mint: light-dark(#cfefe4, #38685f);
    --mint-ink: light-dark(#1a5b50, #b6ece0);
    --sky: light-dark(#d9ecff, #355f7c);
    --sky-ink: light-dark(#1b5580, #b8ddf7);
    --peach: light-dark(#ffd6c7, #754b43);
    --peach-ink: light-dark(#95452c, #ffcdba);
    --butter: light-dark(#ffe9a8, #69592f);
    --butter-ink: light-dark(#7a5504, #f7e0a0);
    --lavender: light-dark(#e7ddf8, #594d73);
    --lavender-ink: light-dark(#57438a, #dbcef3);

    /* Kept under their old names so the notice, chip and map styles below do
       not all have to be renamed to say the same thing. */
    --sun: light-dark(#ffb45c, #f0a94e);
    --sun-soft: var(--butter);
    --sea: light-dark(#6fb3e0, #7cc4e8);
    --sea-soft: var(--sky);

    /*
      The gradients are built from stops rather than written per theme, because
      a whole `linear-gradient(...)` is not a colour and `light-dark()` only
      takes colours. Dark runs the brand ramp the other way: the light arm is
      darkest at the start so white sits on it, the dark arm is lightest there
      so the near-black `--brand-on` does.
    */
    --grad-from: light-dark(#17504a, #86e3d3);
    --grad-to: light-dark(#37907f, #47b8a4);
    --grad-brand: linear-gradient(135deg, var(--grad-from), var(--grad-to));
    --grad-sunset: linear-gradient(90deg, var(--mint-ink), var(--sun) 55%, var(--peach-ink));

    /* Neutral by day, deep navy by night. Three steps separate content without
       decorative gradients or shadows. */
    --surface: light-dark(#fafbf9, #282d38);
    --surface-sunken: light-dark(#f5f7f5, #20232c);
    --surface-raised: light-dark(#ffffff, #313744);
    --border: light-dark(#e0e6e1, #485264);
    --border-strong: light-dark(#bdc9c1, #5c667a);

    /*
      The two light sources behind the top of the page. Lavender on one shoulder
      and mint on the other, because one even wash reads as a gradient someone
      forgot to finish, and the pair is what makes a night sky rather than a
      grey one.
    */
    --wash: light-dark(rgb(255 214 199 / 40%), rgb(78 183 165 / 17%));
    --wash-lift: light-dark(rgb(231 221 248 / 55%), rgb(116 94 170 / 24%));

    /* Ivory rather than white: the day's type is warm, and a cold grey on navy
       would read as a different family. */
    --text: light-dark(#28332f, #f7f2ed);
    --text-muted: light-dark(#63706a, #bbb8c2);
    --text-faint: light-dark(#65726a, #aeb2c0);
    --danger: light-dark(#b3261e, #ff897d);
    /* Held darker than the other four. A danger notice fills its block with
       this and writes on it in --danger, so the pastel and its ink are the same
       hue: lifting it as far as the rest would have taken that pair under 4.5:1. */
    --danger-soft: light-dark(#ffe3de, #4e2a26);
    --warning: var(--butter-ink);
    --warning-soft: var(--butter);
    --success: var(--mint-ink);
    --success-soft: var(--mint);
    /*
      Lighter at night than by day, which is the opposite of the instinct. A
      card on a dark ground is already told apart by its own lightness and its
      border; piling black on top of near-black only muddies the space between
      them, and the page reads as smudged rather than as lifted.
    */
    --shadow: 0 1px 2px light-dark(rgb(90 60 40 / 5%), rgb(0 0 0 / 20%)),
        0 8px 24px light-dark(rgb(90 60 40 / 7%), rgb(0 0 0 / 14%));
    --shadow-lifted: 0 2px 6px light-dark(rgb(90 60 40 / 7%), rgb(0 0 0 / 24%)),
        0 18px 40px light-dark(rgb(90 60 40 / 11%), rgb(0 0 0 / 18%));
    /* Referenced by the next-stop card and the trip-card fold before it was
       ever defined, so both rendered flat. Same lift, one name. */
    --shadow-lg: var(--shadow-lifted);

    /* The tone a .tone--* class overrides. Named here so anything that reads
       --tone outside a toned card still resolves to a real colour. */
    --tone: var(--mint);
    --tone-ink: var(--mint-ink);

    --font: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}

/*
  The appearance picker writes data-theme; these three rules are the whole of
  what it does. Pinning `color-scheme` moves the palette above and the browser's
  own widgets - scrollbars, date pickers, the language select - in one step.
*/
:root[data-theme="system"] {
    color-scheme: light dark;
}

:root[data-theme="light"] {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
}

/* ---------- Base elements ---------- */
* {
    box-sizing: border-box;
}

/*
  A component class that sets `display` outranks the `hidden` attribute, which
  is how the sign-in page showed its "sign-in failed" line to everybody who had
  not tried to sign in yet. Hidden means hidden, whatever else an element is.
*/
[hidden] {
    display: none !important;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    /* Two lights behind the top of the page, so the shell has a source instead
       of an even fill, and a horizon rather than a spotlight. Fixed, so they do
       not slide away as the page scrolls. */
    background: var(--surface-sunken);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font);
    font-size: var(--font-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

h1 {
    font-size: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.022em;
}

h2 {
    font-size: var(--font-title);
    font-weight: 700;
}

h3 {
    font-size: 1rem;
}

p {
    margin: 0;
}

a {
    color: var(--brand);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/*
  Routing moves focus to the page heading so a screen reader announces the new
  page. That focus is the app's doing rather than the reader's, and ringing a
  whole 1.6rem heading in brand green on every navigation reads as an error.
  The heading is not tabbable, so nothing is lost by leaving it unpainted.
*/
h1:focus,
h1:focus-visible {
    outline: none;
}

/* ---------- Shell ---------- */

.shell {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-xl);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

/*
  The bar sits over the content, so it lets a little of it through. The opaque
  rule above is the fallback: a solid bar beats an unreadable one wherever
  backdrop-filter is missing.
*/
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
    .topbar {
        background: color-mix(in srgb, var(--surface) 78%, transparent);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
    }
}

.topbar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 700;
    color: var(--text);
    font-size: 1.05rem;
}

.topbar__brand:hover {
    text-decoration: none;
}

.brand-wordmark {
    display: inline-flex;
    align-items: baseline;
    letter-spacing: -0.025em;
}

.brand-wordmark__tu {
    color: var(--brand-strong);
    font-weight: 800;
}

.brand-wordmark--signin {
    margin: 0 auto;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 700;
}

.brand-loader {
    --brand-loader-size: 80px;
    position: relative;
    display: inline-block;
    width: var(--brand-loader-size);
    height: var(--brand-loader-size);
    flex: none;
}

.brand-loader__layer {
    position: absolute;
    inset: 0;
    background: #176b5b;
    -webkit-mask: url("/images/turaveller-mark.png") center / contain no-repeat;
    mask: url("/images/turaveller-mark.png") center / contain no-repeat;
}

.brand-loader__fill {
    background: #f26f5b;
    clip-path: circle(7% at 72% 30%);
    animation: brand-loader-fill 1.8s ease-in-out infinite;
    will-change: clip-path;
}

@keyframes brand-loader-fill {
    0%,
    10%,
    100% {
        clip-path: circle(7% at 72% 30%);
    }

    56%,
    68% {
        clip-path: circle(112% at 72% 30%);
    }
}

.route-loading {
    display: grid;
    min-height: min(420px, 70vh);
    place-items: center;
}

/* A page-sized state, not a spinner tucked into the content. The translucent
   veil preserves orientation while making it unmistakable that the current
   action has not finished yet. */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: var(--space-xl);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
}

.loading-overlay[hidden] {
    display: none;
}

.loading-overlay__panel {
    display: grid;
    place-items: center;
    gap: var(--space-md);
    min-width: min(280px, calc(100vw - 2 * var(--space-xl)));
    padding: var(--space-xl) var(--space-xxl);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lifted);
    text-align: center;
}

.loading-overlay__message {
    margin: 0;
    color: var(--text);
    font-weight: 750;
    font-size: 1rem;
}

.topbar__mark {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    object-fit: cover;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 45%, transparent);
}

.topbar__nav {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-inline-start: auto;
    flex-wrap: wrap;
}

.topbar__primary,
.topbar__utilities {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.mobile-profile-menu {
    display: none;
}

/* Doubled up on purpose: `.select` is defined further down the file at the same
   specificity, so a bare `.topbar__language` loses its width and padding to it. */
.select.topbar__language {
    width: auto;
    padding: 5px 10px;
    font-size: 0.85rem;
}

.topbar__link {
    position: relative;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.9rem;
}

.topbar__link:hover {
    background: var(--surface-sunken);
    text-decoration: none;
}

.topbar__link.active {
    background: var(--brand-soft);
    color: var(--brand-strong);
}

.page {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-xl) var(--space-huge);
}

@media (max-width: 640px) {
    /*
      The blur has to go here, and it is not a cosmetic choice. A backdrop-filter
      makes its element a containing block for *fixed* descendants, so with it on
      the bar the tab strip below resolved `inset-block-end: 0` against the 49px
      header instead of the viewport - and landed at the top of the screen, on
      top of the page. An opaque bar on a phone reads better anyway.
    */
    .topbar {
        padding: 10px var(--space-md);
        gap: var(--space-sm);
        background: var(--surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        /* The safety net for a 320px screen or a longer translation: the bar
           grows a second row rather than crushing its controls or scrolling
           the page sideways. It is in flow, so nothing gets covered. */
        flex-wrap: wrap;
    }

    .topbar__brand > span:last-child {
        display: none;
    }

    .topbar__nav {
        gap: var(--space-sm);
        flex-wrap: nowrap;
        justify-content: flex-end;
    }

    .topbar__primary {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 30;
        justify-content: stretch;
        padding: 7px max(var(--space-md), env(safe-area-inset-right))
            calc(7px + env(safe-area-inset-bottom))
            max(var(--space-md), env(safe-area-inset-left));
        border-top: 1px solid var(--border);
        background: var(--surface);
        box-shadow: 0 -4px 18px rgb(20 32 29 / 7%);
    }

    .topbar__primary .topbar__link {
        display: flex;
        min-height: 42px;
        flex: 1;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /*
      One row, in the flow of the bar. Stacking these into a fixed column cost a
      quarter of the screen and buried the page under it; four small controls fit
      across a phone if none of them insists on its full label.
    */
    .topbar__utilities {
        display: none;
    }

    .mobile-profile-menu {
        position: relative;
        display: block;
    }

    .mobile-profile-menu summary {
        max-width: 8rem;
        list-style: none;
        cursor: pointer;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .mobile-profile-menu summary::-webkit-details-marker {
        display: none;
    }

    .mobile-profile-menu__panel {
        position: absolute;
        inset-block-start: calc(100% + var(--space-sm));
        inset-inline-end: 0;
        z-index: 40;
        display: grid;
        gap: var(--space-xs);
        width: min(280px, calc(100vw - 2 * var(--space-md)));
        padding: var(--space-sm);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface-raised);
        box-shadow: var(--shadow-lifted);
    }

    .mobile-profile-menu__panel > a,
    .mobile-profile-menu__panel > button,
    .mobile-profile-menu__panel > label {
        padding: 9px 10px;
        border: 0;
        border-radius: var(--radius-xs);
        background: transparent;
        color: var(--text);
        font: inherit;
        text-align: start;
        text-decoration: none;
    }

    .mobile-profile-menu__panel > label {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: var(--space-sm);
    }

    .mobile-profile-menu__panel .select {
        width: auto;
        padding: 4px 6px;
    }

    .select.topbar__language {
        flex: none;
        width: auto;
        min-width: 0;
        padding: 4px 6px;
        font-size: 0.75rem;
    }

    .topbar__user {
        flex: none;
        max-width: 4.5rem;
        padding: 4px 8px;
        font-size: 0.8rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .topbar__utilities .button {
        flex: none;
        padding: 4px 8px;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    /* The primary links sit on the bottom edge, so the page ends above them. */
    .page {
        padding: var(--space-lg) var(--space-lg) calc(var(--space-huge) + 64px);
    }
}

.page__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
    margin-bottom: var(--space-xl);
}

.page__subtitle {
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

.trip-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    color: var(--brand-strong);
    font-size: 0.9rem;
    font-weight: 700;
}

.trip-back-link:hover {
    text-decoration: none;
}

.trip-back-link__icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-strong);
    background: var(--surface-raised);
    transition: transform 120ms ease, border-color 120ms ease;
}

.trip-back-link:hover .trip-back-link__icon {
    transform: translateX(-2px);
    border-color: var(--brand);
}

/* The candidates screen is a workflow, and this guide makes the boundary
   between collecting ideas and arranging the actual itinerary explicit. */
.workflow-guide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
    padding: var(--space-lg);
    border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--border));
    border-radius: var(--radius-md);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--brand-soft) 72%, var(--surface-raised)),
        var(--surface-raised));
}

.workflow-guide__copy {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    min-width: min(100%, 320px);
    flex: 1;
}

.workflow-guide__step {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: var(--brand-on);
    font-weight: 800;
}

.workflow-guide__copy p {
    margin: var(--space-xs) 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Searching keeps the current screen and any previous results in place. This
   compact status confirms that work is happening without reading as a route
   transition or blocking the rest of the trip. */
.search-progress {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    min-height: 32px;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 650;
}

@media (max-width: 640px) {
    .workflow-guide__actions,
    .workflow-guide__actions .button {
        width: 100%;
    }
}

/* ---------- Surfaces ---------- */

.card {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    box-shadow: none;
}

.card--flat {
    box-shadow: none;
}

.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.stack--tight {
    gap: var(--space-sm);
}

.stack--loose {
    gap: var(--space-xl);
}

.row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.row--between {
    justify-content: space-between;
}

.grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.split {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
}

@media (max-width: 900px) {
    .split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Text ---------- */

.muted {
    color: var(--text-muted);
}

.faint {
    color: var(--text-faint);
    font-size: 0.85rem;
}

.small {
    font-size: 0.85rem;
}

.strong {
    font-weight: 650;
}

.mono {
    font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", monospace;
    letter-spacing: 0.08em;
}

/* ---------- Map ---------- */

.map {
    height: 520px;
    border-radius: var(--radius-md);
    overflow: hidden;
    /* Leaflet paints its own tiles; without a ground of our own the panel
       flashes the page background while they load. */
    background: var(--surface-sunken);
}

/* MapLibre's white popup needs its own ink: the dark page's inherited text
   color otherwise leaves stop names almost invisible on the map. */
.map .maplibregl-popup-content {
    max-width: min(320px, 78vw);
    padding: 12px 16px;
    background: #fff;
    color: #1f2937;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
    box-shadow: 0 6px 22px rgb(0 0 0 / 24%);
}

.map .maplibregl-popup-close-button {
    color: #1f2937;
}

/* A map inside a form, where it is one field among several rather than the
   thing being read. */
.map--compact {
    height: 260px;
}

/* Category icons retain the timeline's visit number as a small badge. */
.map-pin {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
    z-index: 2;
}

.map-pin__icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    border: 2px solid var(--surface-raised);
    background: var(--brand);
    color: var(--brand-on);
    box-shadow: var(--shadow);
}

.map-pin__icon svg { width: 19px; height: 19px; }
.map-pin__number {
    position: absolute;
    top: 0;
    right: -2px;
    min-width: 17px;
    height: 17px;
    padding-inline: 3px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    color: var(--brand-strong);
    border: 1px solid var(--brand);
    font-size: 10px;
    font-weight: 750;
    line-height: 1;
}

.map-pin--stay .map-pin__icon,
.map-pin--flight .map-pin__icon {
    background: var(--brand-soft);
    color: var(--text);
}

.map-route-mode {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 44px;
    min-height: 44px;
    padding: 6px;
    border: 1px solid var(--brand);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    color: var(--brand-strong);
    box-shadow: var(--shadow);
    cursor: pointer;
    z-index: 1;
}
.map-route-mode svg { width: 20px; height: 20px; }
.map-route-mode[hidden] { display: none; }
.maplibregl-popup { z-index: 6; }
.maplibregl-popup-content { padding: 12px 48px 12px 14px; }
.maplibregl-popup-close-button { min-width: 44px; min-height: 44px; }
.map-pin:focus-visible,
.map-route-mode:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-pill); }

.map-legend {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 650;
}

.map-legend__stay {
    font-size: 1rem;
}

/* ---------- Controls ---------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--brand);
    color: var(--brand-on);
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    /* A label is one line: a button in a narrow column shrinks the row it is
       in, not the word it carries. */
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: none;
    transition: filter 120ms ease, background 120ms ease,
        transform 120ms ease, box-shadow 120ms ease;
}

.button:hover:not(:disabled) {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: none;
    text-decoration: none;
}

/* The press has to land somewhere, or it stays a picture of a button. */
.button:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
    box-shadow: none;
}

.button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.button--ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--border-strong);
    box-shadow: none;
}

.button--ghost:hover:not(:disabled) {
    background: var(--surface-sunken);
    border-color: var(--brand);
    color: var(--brand-strong);
    box-shadow: none;
    filter: none;
}

.button--quiet {
    background: transparent;
    color: var(--text-muted);
    border-color: transparent;
    padding: 6px 10px;
    box-shadow: none;
}

.button--quiet:hover:not(:disabled) {
    background: var(--surface-sunken);
    box-shadow: none;
    filter: none;
}

/* The chosen option in a row of quiet choices (category chips, view and
   participant switches). The class was set in markup long before it had a
   rule, so the choice only showed to a screen reader. */
.button--quiet.is-selected,
.button--quiet.is-selected:hover:not(:disabled) {
    background: var(--brand-soft);
    border-color: color-mix(in srgb, var(--brand) 40%, transparent);
    color: var(--brand-strong);
}

.button--danger {
    background: transparent;
    color: var(--danger);
    border-color: var(--border-strong);
    box-shadow: none;
}

.button--small {
    padding: 5px 11px;
    font-size: 0.82rem;
}

.button--icon {
    padding: 5px 9px;
    min-width: 32px;
}

/* A finger is not a mouse pointer: 32px is under every touch-target guideline. */
@media (pointer: coarse) {
    .button--icon {
        min-width: 44px;
        min-height: 44px;
    }
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.field__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.input,
.select,
.textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.92rem;
}

.textarea {
    min-height: 84px;
    resize: vertical;
}

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

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    cursor: pointer;
}

.checkbox input {
    margin-top: 3px;
    accent-color: var(--brand);
}

/*
  The rest of a booking, folded away until the times are settled.

  A booking is saved from four fields; the reference number, the notes, the
  linked place and the far end of a flight are all real and none of them stand
  between a traveller and a saved flight. A details element rather than a
  toggle, so the keyboard and the screen reader already know what it is and
  what state it is in.
*/
.booking-more > summary {
    padding: var(--space-sm) 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    list-style-position: inside;
}

.booking-more > summary:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.booking-more[open] > summary {
    margin-bottom: var(--space-xs);
}

.form-grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

@media (max-width: 640px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Chips, badges, tabs ---------- */

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.chip--brand {
    background: var(--brand-soft);
    border-color: transparent;
    color: var(--brand-strong);
}

.chip--warning {
    background: var(--warning-soft);
    border-color: transparent;
    color: var(--warning);
}

.chip--danger {
    background: var(--danger-soft);
    border-color: transparent;
    color: var(--danger);
}

.chip--success {
    background: var(--success-soft);
    border-color: transparent;
    color: var(--success);
}

/* Wears whatever tone its card is in. */
.chip--tone {
    background: color-mix(in srgb, var(--tone) 70%, #fff);
    border-color: color-mix(in srgb, var(--tone-ink) 22%, transparent);
    color: var(--tone-ink);
    font-weight: 700;
}

.chip--accent {
    background: linear-gradient(120deg, var(--accent), var(--sun));
    border-color: transparent;
    color: var(--accent-on);
    font-weight: 700;
}

.badge {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: var(--danger);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

.tabs {
    display: flex;
    gap: var(--space-xs);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-lg);
    overflow-x: auto;
}

.mobile-tabs,
.mobile-trip-overview,
.trip-room-menu,
.trip-room-header__mobile-date {
    display: none;
}

.trip-room-header__title-row,
.trip-room-header__meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.trip-room-header__meta .page__subtitle {
    margin-bottom: 0;
}

.tab {
    padding: 8px 14px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    white-space: nowrap;
}

.tab.active {
    color: var(--brand-strong);
    border-bottom-color: transparent;
    background: var(--grad-sunset) no-repeat bottom left / 100% 3px;
}

/* The overview's first card: when the trip is, what is next on it, and the
   way into the plan. It is the same card at every width, so the phone is not
   reading a different vocabulary from the laptop. */
.trip-plan-card {
    display: grid;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.trip-plan-card__dates {
    display: grid;
    gap: 2px;
}

.trip-plan-card__dates strong {
    font-size: 1.15rem;
}

.trip-plan-card__state {
    display: grid;
    gap: 2px;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--text);
}

.trip-plan-card__next-label {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.trip-plan-card__next strong {
    margin-inline-end: var(--space-xs);
    font-variant-numeric: tabular-nums;
}

.trip-plan-card__actions {
    flex-wrap: wrap;
}

/* Which errand the itinerary screen is on. Quiet on arrival, louder once
   something on the page can actually be changed. */
.itinerary-mode {
    align-self: flex-start;
    margin-top: var(--space-xs);
}

.itinerary-mode[data-mode="edit"] {
    background: var(--brand-soft);
    color: var(--brand-strong);
}

.trip-room-panel {
    animation: trip-panel-enter 220ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes trip-panel-enter {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Live trip room ---------- */
/* The trip room changes jobs once the departure date arrives. The live view is
   a field dashboard: large next-step information, a quiet route beneath it,
   and thumb-sized shortcuts for the things people add while moving. */
.trip-now {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.trip-now__eyebrow,
.trip-now__kicker,
.trip-now__next-label {
    color: var(--brand-strong);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.trip-now__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.trip-now__hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: clamp(var(--space-lg), 4vw, var(--space-xl));
    border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--border));
    border-radius: var(--radius-md);
    background:
        radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--sun-soft) 82%, transparent), transparent 34%),
        linear-gradient(135deg, var(--brand-soft), var(--surface-raised) 70%);
}

.trip-now__hero h2 {
    margin-top: var(--space-xs);
    font-size: clamp(1.65rem, 4vw, 2.35rem);
}

.trip-now__hero p {
    margin-top: var(--space-xs);
    color: var(--text-muted);
}

.trip-now__summary {
    padding: 0 var(--space-xs);
}

.trip-now__next {
    padding: clamp(var(--space-lg), 4vw, var(--space-xl));
    border-radius: var(--radius-md);
    background: var(--text);
    color: var(--surface-raised);
    box-shadow: var(--shadow-lg);
}

.trip-now__next-label {
    color: var(--sun);
}

.trip-now__next-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-lg);
    margin-top: var(--space-md);
}

.trip-now__next-time {
    font-size: clamp(1.65rem, 5vw, 2.6rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.trip-now__next-copy h3 {
    font-size: 1.2rem;
}

.trip-now__next-copy p {
    margin: 2px 0;
    color: color-mix(in srgb, var(--surface-raised) 72%, transparent);
}

.trip-now__next .faint {
    color: color-mix(in srgb, var(--surface-raised) 62%, transparent);
}

.trip-now__complete,
.trip-now__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    min-height: 110px;
    padding: var(--space-lg);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    text-align: center;
}

.trip-now__complete span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-pill);
    background: var(--success-soft);
    color: var(--success);
    font-weight: 900;
}

.trip-now__timeline {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}

.trip-now-stop {
    display: grid;
    grid-template-columns: 58px 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border);
}

.trip-now-stop:last-child {
    border-bottom: 0;
}

.trip-now-stop__time {
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.trip-now-stop__marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 3px solid var(--brand);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    color: var(--brand-on);
    font-size: 0.68rem;
    font-weight: 900;
}

.trip-now-stop:not(:last-child) .trip-now-stop__marker::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 15px;
    width: 2px;
    height: 54px;
    background: var(--border-strong);
}

.trip-now-stop__body {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.trip-now-stop--done {
    color: var(--text-muted);
    background: color-mix(in srgb, var(--brand-soft) 36%, var(--surface-raised));
}

.trip-now-stop--done .trip-now-stop__marker {
    border-color: var(--success);
    background: var(--success);
}

.trip-now-stop--completing {
    overflow: hidden;
    animation: trip-stop-settle 360ms cubic-bezier(.22, 1, .36, 1) both;
}

.trip-now-stop--completing .trip-now-stop__marker {
    border-color: var(--success);
    background: var(--success);
    animation: trip-stop-check 360ms cubic-bezier(.34, 1.56, .64, 1) both;
}

.trip-now-stop--completing .trip-now-stop__marker::before {
    content: "✓";
    color: var(--brand-on);
}

.trip-now-stop--completing .trip-now-stop__marker::after {
    background: var(--success);
    transform-origin: top;
    animation: trip-route-fill 360ms ease-out both;
}

@keyframes trip-stop-check {
    0% { transform: scale(.55); }
    65% { transform: scale(1.22); }
    100% { transform: scale(1); }
}

@keyframes trip-route-fill {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

@keyframes trip-stop-settle {
    0% { background: var(--surface-raised); }
    55% { background: color-mix(in srgb, var(--success-soft) 76%, var(--surface-raised)); }
    100% { background: color-mix(in srgb, var(--brand-soft) 36%, var(--surface-raised)); }
}

.trip-now__tools {
    padding-top: var(--space-sm);
}

.trip-now__tool-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.trip-now__tool-grid button {
    display: flex;
    min-height: 86px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.trip-now__tool-grid button:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.trip-now__tool-grid span {
    font-size: 1.35rem;
}

@media (max-width: 640px) {
    .trip-now__hero {
        align-items: stretch;
        flex-direction: column;
    }

    .trip-now__hero .button {
        width: 100%;
    }

    .trip-now__next-main {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .trip-now__next-main .button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .trip-now-stop {
        grid-template-columns: 48px 18px minmax(0, 1fr);
        gap: var(--space-sm);
        padding-inline: var(--space-md);
    }

    .trip-now-stop .button {
        grid-column: 3;
        justify-self: start;
    }

    .trip-now__tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Lists ---------- */

.list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    overflow: hidden;
}

.list__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border);
}

.list__item:last-child {
    border-bottom: none;
}

.list__item--unread {
    background: var(--brand-soft);
}

.list__body {
    flex: 1;
    min-width: 0;
}

.avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: var(--radius-pill);
    background: linear-gradient(140deg, var(--brand-soft), var(--sun-soft));
    color: var(--brand-strong);
    font-weight: 700;
    font-size: 0.8rem;
    object-fit: cover;
    overflow: hidden;
}

/* ---------- Trip cards ---------- */

.home-past-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    padding: var(--space-xl);
    border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--border));
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--brand-soft), var(--surface-raised));
}

.home-past-prompt h2 {
    margin-top: var(--space-xs);
}

.home-past-prompt p {
    margin-top: var(--space-xs);
    color: var(--text-muted);
}

.home-past-prompt__eyebrow,
.field__required {
    color: var(--brand-strong);
    font-size: 0.75rem;
    font-weight: 800;
}

.field__required {
    margin-left: var(--space-xs);
}

.field__hint {
    margin-top: calc(-1 * var(--space-xs));
    color: var(--text-muted);
    font-size: 0.85rem;
}

@media (max-width: 640px) {
    .home-past-prompt {
        align-items: stretch;
        flex-direction: column;
    }

    .home-past-prompt .button {
        width: 100%;
    }
}

/*
  A trip's stage, as a colour: mint while it is an idea, butter once it is close
  enough to pack for, peach while it is happening, lavender once it is a memory.
  The class sets two custom properties rather than painting anything itself, so
  one card can hand the same pair to its poster, its border and its chip and
  they all agree without any of them naming a hue.
*/
.tone--mint {
    --tone: var(--mint);
    --tone-ink: var(--mint-ink);
}

.tone--butter {
    --tone: var(--butter);
    --tone-ink: var(--butter-ink);
}

.tone--peach {
    --tone: var(--peach);
    --tone-ink: var(--peach-ink);
}

.tone--lavender {
    --tone: var(--lavender);
    --tone-ink: var(--lavender-ink);
}

.tone--sky {
    --tone: var(--sky);
    --tone-ink: var(--sky-ink);
}


/*
  A trip is a place before it is a row in a list, so a card is drawn as a small
  poster: a band of sky with a sun and a hill over a plain block of type. The
  band's colour is the trip's stage - see the .tone--* classes above - and the
  sun and hill move per trip, so twelve cards in a grid are twelve pictures
  rather than one repeated twelve times.
*/
.trip-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    color: inherit;
    box-shadow: none;
    transition: transform 140ms ease, border-color 140ms ease,
        box-shadow 140ms ease;
}

.trip-card__poster {
    position: relative;
    display: block;
    height: 92px;
    flex: none;
    background:
        /* The near hill, then the far one, then the sun behind both. */
        radial-gradient(150px 60px at calc(var(--hill-x, 20%) + 34%) 145%,
            color-mix(in srgb, var(--tone-ink) 32%, var(--tone)) 0 99%, transparent 100%),
        radial-gradient(190px 66px at var(--hill-x, 20%) 130%,
            color-mix(in srgb, var(--tone-ink) 15%, var(--tone)) 0 99%, transparent 100%),
        radial-gradient(circle 26px at var(--sun-x, 78%) 34%,
            var(--sun) 0 46%,
            color-mix(in srgb, var(--sun) 30%, transparent) 48%, transparent 76%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--tone) 26%, #fff) 0%,
            color-mix(in srgb, var(--tone) 82%, #fff) 100%);
}

/* Five compositions, picked from the trip's own id so a given trip is always
   drawn the same way. Nothing here means anything - it is only variety. */
.trip-card[data-art="1"] .trip-card__poster {
    --sun-x: 26%;
    --hill-x: 76%;
}

.trip-card[data-art="2"] .trip-card__poster {
    --sun-x: 62%;
    --hill-x: 8%;
}

.trip-card[data-art="3"] .trip-card__poster {
    --sun-x: 88%;
    --hill-x: 44%;
}

.trip-card[data-art="4"] .trip-card__poster {
    --sun-x: 42%;
    --hill-x: 92%;
}

.trip-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
}

.trip-card:hover {
    border-color: color-mix(in srgb, var(--tone-ink) 45%, var(--border));
    text-decoration: none;
}

.trip-card--departing {
    opacity: 0;
}

.trip-card-flight {
    overflow: hidden;
    transform-origin: center;
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--tone, var(--sky)) 34%, #fff),
        color-mix(in srgb, var(--tone, var(--sky)) 76%, #fff));
    box-shadow: var(--shadow-lg);
    will-change: transform, clip-path, opacity;
}

.trip-card-flight__crease {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background:
        linear-gradient(151deg,
            transparent 49.2%, rgb(31 41 55 / 34%) 49.7% 50.3%, transparent 50.8%),
        linear-gradient(29deg,
            transparent 49.2%, rgb(255 255 255 / 72%) 49.7% 50.3%, transparent 50.8%);
    mix-blend-mode: multiply;
}

.trip-card__title {
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.012em;
    overflow-wrap: anywhere;
}

/* A finished trip keeps its lavender, at the volume of a memory. */
.trip-card--past .trip-card__poster {
    opacity: 0.72;
}

.trip-card__link { display: flex; flex-direction: column; flex: 1; color: inherit; }
.trip-card__link:hover { text-decoration: none; }
.trip-memory-card { position: relative; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.trip-memory-card .trip-card__poster { height: 160px; opacity: 1; overflow: hidden; }
.trip-timelapse--overview { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.trip-timelapse--overview .trip-card__poster { display: block; position: relative; height: clamp(220px, 32vw, 420px); }
.trip-history__itinerary, .trip-history__records { border-top: 1px solid var(--border); padding-top: var(--space-md); }
.trip-history__itinerary > summary, .trip-history__records > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: var(--space-sm); font-weight: 600; }
.trip-history__itinerary > summary::before, .trip-history__records > summary::before { content: "+"; }
.trip-history__itinerary[open] > summary::before, .trip-history__records[open] > summary::before { content: "−"; }
.trip-history__records .live-experience__records > summary { display: none; }
.trip-memory-landscape { position: absolute; inset: 0; width: 100%; height: 100%; }
.trip-memory-card.has-photo .trip-memory-landscape { display: none; }
.trip-memory-landscape__night { opacity: 0; animation: memory-dusk 12s ease-in-out infinite; animation-play-state: paused; }
.trip-memory-landscape__sun { animation: memory-sun 12s ease-in-out infinite; animation-play-state: paused; }
.trip-memory-card.is-playing .trip-memory-landscape__night,
.trip-memory-card.is-playing .trip-memory-landscape__sun { animation-play-state: running; }
@keyframes memory-dusk { 0%, 100% { opacity: 0; } 45%, 65% { opacity: 1; } }
@keyframes memory-sun { 0%, 100% { transform: translateY(0); opacity: 1; } 45%, 65% { transform: translateY(130px); opacity: 0; } }
.trip-memory-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 450ms ease; }
.trip-memory-frame.is-current { opacity: 1; }
.trip-memory-card__playback { display: none; position: absolute; inset-block-start: var(--space-sm); inset-inline-start: var(--space-sm); align-items: center; gap: var(--space-sm); min-height: 44px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--text); font: inherit; font-size: .8rem; cursor: pointer; }
.trip-memory-card.has-timelapse .trip-memory-card__playback { display: inline-flex; }
@media (prefers-reduced-motion: reduce) {
    .trip-memory-frame { transition: none; }
    .trip-memory-landscape__night, .trip-memory-landscape__sun { animation: none; }
    .trip-memory-card.has-timelapse .trip-memory-card__playback { display: none; }
}

/* ---------- Home ---------- */
.home-action-panel {
    margin-bottom: var(--space-xl);
}

/* A brand-new account has two equally valid ways forward. Giving each one a
   full card keeps "start my own" from swallowing the invitation path as a
   secondary text button. */
.home-empty {
    display: grid;
    gap: var(--space-xl);
    padding: clamp(var(--space-xl), 4vw, var(--space-huge));
    border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--border));
    border-radius: var(--radius-lg);
    background:
        radial-gradient(70% 130% at 0% 0%,
            color-mix(in srgb, var(--mint) 54%, transparent), transparent 72%),
        var(--surface-raised);
    box-shadow: var(--shadow);
}

.home-empty__intro {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.home-empty__intro p {
    max-width: 60ch;
    margin-top: var(--space-xs);
    color: var(--text-muted);
}

.home-empty__mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 15px;
    background: var(--grad-brand);
    color: var(--brand-on);
    font-size: 1.2rem;
    font-weight: 800;
    box-shadow: var(--shadow);
}

.home-empty__choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

.home-empty-choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-md);
    min-height: 142px;
    padding: var(--space-xl);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: transform 140ms ease, border-color 140ms ease,
        box-shadow 140ms ease;
}

.home-empty-choice--create {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--mint) 64%, var(--surface-raised)),
        var(--surface-raised));
}

.home-empty-choice--join {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--sky) 64%, var(--surface-raised)),
        var(--surface-raised));
}

.home-empty-choice:hover {
    transform: translateY(-3px);
    border-color: var(--brand);
    box-shadow: var(--shadow-lifted);
}

.home-empty-choice:active {
    transform: translateY(0) scale(0.99);
}

.home-empty-choice__number {
    align-self: start;
    color: var(--brand-strong);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.home-empty-choice__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.home-empty-choice__copy strong {
    color: var(--brand-strong);
    font-size: 1.15rem;
}

.home-empty-choice__copy small {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.home-empty-choice__arrow {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    color: var(--brand-strong);
    font-size: 1.15rem;
    box-shadow: var(--shadow);
}

/*
  The next trip keeps the landscape postcard and generous title that make
  My Trips feel like a travel collection.
*/
.home-featured {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-xl);
    overflow: hidden;
    min-height: 230px;
    padding: var(--space-xxl);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background:
        radial-gradient(560px 118px at 74% 140%,
            color-mix(in srgb, var(--tone-ink) 34%, var(--tone)) 0 99%, transparent 100%),
        radial-gradient(680px 148px at 12% 134%,
            color-mix(in srgb, var(--tone-ink) 16%, var(--tone)) 0 99%, transparent 100%),
        radial-gradient(circle 64px at 84% 26%,
            var(--sun) 0 48%,
            color-mix(in srgb, var(--sun) 32%, transparent) 50%, transparent 78%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--sky) 84%, var(--surface-raised)) 0%,
            color-mix(in srgb, var(--tone) 44%, var(--surface-raised)) 62%,
            color-mix(in srgb, var(--tone) 70%, var(--surface-raised)) 100%);
    color: var(--text);
    transition: border-color 160ms ease;
}

.motion-list-item {
    animation: list-item-arrive 260ms cubic-bezier(.22, 1, .36, 1) both;
}

.motion-list-item--leaving {
    pointer-events: none;
    animation: list-item-leave 220ms ease-in both;
}

.motion-list-item--settling {
    animation: list-item-settle 260ms cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes list-item-arrive {
    from { opacity: 0; transform: translateY(10px) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes list-item-leave {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: translateX(18px) scale(.98); }
}

@keyframes list-item-settle {
    0% { transform: scale(1); background: var(--surface-raised); }
    55% { transform: scale(1.012); background: var(--success-soft); }
    100% { transform: scale(1); background: color-mix(in srgb, var(--success-soft) 36%, var(--surface-raised)); }
}

.map-place-strip {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    padding: var(--space-md) 2px 2px;
    scroll-snap-type: x proximity;
}

.map-place-card {
    min-width: min(260px, 78vw);
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    scroll-snap-align: start;
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.map-place-card strong,
.map-place-card span {
    display: block;
}

.map-place-card span {
    margin-top: var(--space-xs);
    color: var(--text-muted);
    font-size: .86rem;
}

/* The same number as the pin above it, drawn the same way, because the two are
   one thing seen twice. */
.map-place-card__stop {
    display: grid !important;
    place-items: center;
    width: 24px;
    height: 24px;
    margin: 0 0 var(--space-xs) !important;
    border-radius: var(--radius-pill);
    background: var(--grad-brand);
    color: var(--brand-on) !important;
    font-size: .78rem;
    font-weight: 700;
}

.map-place-card__time {
    color: var(--text) !important;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
}

/* A dashed swatch beside the sentence, matching the line on the map: what is
   drawn there is the order of the stops, not a route anybody can follow. */
.map-order-notice {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    color: var(--text-muted);
    font-size: .84rem;
    font-weight: 650;
}

.map-order-notice__line {
    flex: none;
    width: 34px;
    border-top: 3px dashed var(--brand);
}

.map-route-status-list {
    display: grid;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.map-route-status {
    display: grid;
    gap: 2px;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 0.9rem;
}

.map-route-status__reason {
    color: var(--text-muted);
}

.map-route-settings-link {
    width: fit-content;
    font-size: 0.88rem;
}

.map-omissions {
    margin-top: var(--space-sm);
}

.map-omissions ul {
    margin: var(--space-xs) 0 0;
    padding-left: var(--space-lg);
}


.map-place-card:hover,
.map-place-card--active {
    transform: translateY(-2px);
    border-color: var(--brand);
    box-shadow: var(--shadow);
}

.map-pin--active {
    z-index: 5;
    filter: drop-shadow(0 5px 8px color-mix(in srgb, var(--brand) 38%, transparent));
}

.map-pin--active > .map-pin__icon {
    transform: scale(1.24);
    transform-origin: center;
}

.home-featured:hover {
    text-decoration: none;
    border-color: var(--brand);
}

.home-featured__content {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-md);
}

.home-featured__destination {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tone-ink);
}

.home-featured__dates {
    color: var(--text);
}

.home-featured__title {
    font-size: clamp(1.6rem, 3.4vw, 2.5rem);
    font-weight: 700;
    overflow-wrap: anywhere;
    letter-spacing: -0.028em;
    color: var(--brand-strong);
}

.home-featured__action {
    position: relative;
    z-index: 1;
    flex: none;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: var(--brand-on);
    font-weight: 700;
}

.invite-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-sm);
}

.invite-entry .input {
    font-size: 1rem;
}

.invite-preview {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.invite-preview__mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: 1.25rem;
}

.invite-preview__body {
    min-width: 0;
}

.past-trips {
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border);
}

.past-trips summary {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) 0;
    cursor: pointer;
    list-style-position: inside;
}

.past-trips__grid {
    padding-top: var(--space-sm);
}

@media (max-width: 640px) {
    .home-empty {
        padding: var(--space-xl);
    }

    .home-empty__choices {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-empty-choice {
        min-height: 124px;
        padding: var(--space-lg);
    }

    .home-featured {
        align-items: stretch;
        flex-direction: column;
        padding: var(--space-xl);
    }

    .home-featured__action {
        align-self: flex-start;
    }

    .invite-entry {
        grid-template-columns: minmax(0, 1fr);
    }

    .invite-preview {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .invite-preview > .button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* ---------- Itinerary ---------- */

.day {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    overflow: hidden;
}

.day__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border);
}

.day__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.day__title h2 {
    flex: 1 1 240px;
    margin: 0;
    font-size: 1.1rem;
}

.day__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-xs);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.day__fact:not(:last-child)::after {
    content: "·";
    margin-left: var(--space-xs);
}

.day__weather--hazard {
    color: var(--warning);
    font-weight: 600;
}

.day__notices {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: 0;
    padding: var(--space-sm) var(--space-lg) 0;
    list-style: none;
}

.day__notices .notice {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.85rem;
}

/*
  The timeline. Each activity is one row: the clock, a number that matches its
  pin on the map, the name, and one line of facts. A travel leg between two
  rows is lighter than either — a line of small text on the rail that joins
  the numbers.
*/
.timeline {
    --tl-pad: var(--space-lg);
    --tl-time: 56px;
    /* The centre of the number column, where the rail runs. */
    --tl-rail: calc(var(--tl-pad) + var(--tl-time) + var(--space-md) + 11px);
    margin: 0;
    padding: var(--space-sm) 0;
    list-style: none;
}

/* Where a day starts and ends — a bed or an airport. One quiet line, because
   the same hotel opens most days and saying it large says nothing new. */
.itinerary-stay {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--tl-pad, var(--space-lg));
    color: var(--text-muted);
    font-size: 0.88rem;
}

.itinerary-stay__time {
    flex: none;
    width: var(--tl-time, 56px);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--text);
}

.itinerary-stay:not(.itinerary-stay--anchor) {
    padding-left: calc(var(--tl-pad, var(--space-lg)) + var(--tl-time, 56px) + var(--space-md));
}

.itinerary-stay--anchor .itinerary-stay__time {
    margin-right: calc(var(--space-md) - var(--space-sm));
}

.itinerary-stay__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--text-muted);
    font-size: 0.85rem;
}

.itinerary-stay__text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-sm);
    min-width: 0;
}

/* A flight: fixed in time, and the day is planned around it. Marked by a rule
   and a firmer clock, not by colour blocks. */
.itinerary-stay--anchor {
    position: relative;
    color: var(--text);
}

.itinerary-stay--anchor::before,
.stop--anchor::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--brand);
}

.stop {
    position: relative;
    display: grid;
    grid-template-columns: var(--tl-time, 56px) minmax(0, 1fr) auto;
    gap: var(--space-xs) var(--space-md);
    align-items: start;
    padding: var(--space-sm) var(--tl-pad, var(--space-lg));
}

.stop--selected {
    background: color-mix(in srgb, var(--brand-soft) 38%, transparent);
}

/* A stop being dragged, and the one it would land on. Both are drawn rather
   than only the cursor changing: dropping onto the wrong row is the mistake
   this feedback exists to prevent. */
.stop[draggable="true"] {
    cursor: grab;
}

.stop--dragging {
    opacity: 0.45;
}

.stop--drop-target {
    outline: 2px dashed var(--brand);
    outline-offset: -2px;
}

.stop--done .stop__name {
    text-decoration: line-through;
    color: var(--text-faint);
}

.stop__time {
    padding-top: 2px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--text);
}

.stop__summary {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.stop__summary:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* The same number, in the same colours, as the pin on the map. */
.stop__number {
    display: grid;
    flex: none;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: var(--radius-pill);
    background: var(--grad-brand);
    color: var(--brand-on);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Not on the map: an outline rather than a filled pin. */
.stop__number--unplaced {
    border: 1px dashed var(--border-strong);
    background: transparent;
    color: var(--text-muted);
}

.stop--selected .stop__number,
.stop.map-place-card--active .stop__number {
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.stop__heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.stop__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-xs);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.stop__meta > span:not(:last-child)::after {
    content: "·";
    margin-left: var(--space-xs);
    color: var(--text-faint);
}

.stop__meta-booked {
    color: var(--brand-strong);
    font-weight: 600;
}

.stop__meta-needs {
    color: var(--warning);
    font-weight: 600;
}

.stop__meta-who {
    color: var(--text);
}

/* An activity for some of the party: set in from the group's line, the way it
   branches off the group's day. */
.stop--branch .stop__summary {
    padding-left: var(--space-sm);
    border-left: 2px solid var(--border-strong);
}

.stop__details {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding-left: calc(24px + var(--space-sm));
}

.stop__details[hidden] {
    display: none;
}

.stop__info {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 2px var(--space-sm);
    margin: 0;
}

.stop__info dt {
    color: var(--text-muted);
    font-weight: 600;
}

.stop__info dt.visually-hidden + dd {
    grid-column: 1 / -1;
}

.stop__info dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.stop__memo {
    white-space: pre-line;
}

.stop__warning {
    align-self: flex-start;
}

.stop__edit-actions {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

/*
  Which of the three kinds of hour this is. The clock face cannot say it and the
  field beside it said the opposite: an estimate the planner worked out looked
  exactly like an hour somebody had settled on.
*/
.stop__time-source {
    display: block;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text-faint);
}

.stop__time[data-time-source="chosen"] .stop__time-source,
.stop__time[data-time-source="booked"] .stop__time-source {
    color: var(--brand-strong);
}

/* An hour that is already paid for is the one nothing else overrules. */
.stop__time[data-time-source="booked"] {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

.stop__times {
    gap: var(--space-xs);
    flex-wrap: wrap;
    align-items: center;
}

/* The hour the app is holding, in the notation the whole page uses. The native
   field is drawn by the browser in its own locale, so the same value reads as
   "07:00 PM" to one person and "19:00" to the next. */
.stop__times-hint {
    font-variant-numeric: tabular-nums;
}

.stop__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-xs);
    font-variant-numeric: tabular-nums;
}

.stop__body {
    min-width: 0;
}

.stop__name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.stop__time-day {
    margin-left: 2px;
    font-size: 0.7rem;
    font-weight: 650;
    vertical-align: super;
}

.stop__actions {
    display: flex;
    gap: var(--space-xs);
    flex: none;
    align-items: flex-start;
}

/*
  Six controls stood on every row at once. Reordering is what an open day is
  mostly for, so the arrows stay out; locking, moving to another day and taking
  a stop off wait behind this. A details element rather than a menu widget
  because the keyboard and the screen reader already know what one is.
*/
.stop__more,
.place-card__more {
    position: relative;
}

.stop__more > summary,
.place-card__more > summary {
    list-style: none;
    cursor: pointer;
}

.stop__more > summary::-webkit-details-marker,
.place-card__more > summary::-webkit-details-marker {
    display: none;
}

.stop__more-menu,
.place-card__more-menu {
    position: absolute;
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 13rem;
    max-width: min(18rem, 78vw);
    margin-top: var(--space-xs);
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lifted);
}

/* ---------- Candidate places ---------- */

/*
  A column of cards, read one after another. What tells two of them apart is the
  name, whether they are already on a day, and how long they take — so those
  come first, the room's decision comes next, and the credit the data arrived
  with sits at the foot. The credit stays on the card: the ODbL and Geoapify's
  free plan both ask for it wherever the result is shown.
*/
.place-card__heading {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
    margin-bottom: var(--space-sm);
}

.place-card__title {
    flex: 1;
    min-width: 0;
}

/* A place's picture, or a tile in the colour of its kind where there is none.
   One fixed square either way, so a column of cards keeps its left edge whether
   or not a source had a photograph. */
.place-thumb {
    display: grid;
    flex: none;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    background: var(--mint);
    font-size: 1.5rem;
    line-height: 1;
    object-fit: cover;
}

.place-thumb--sight { background: var(--lavender); }
.place-thumb--food { background: var(--peach); }
.place-thumb--cafe { background: var(--butter); }
.place-thumb--stay { background: var(--sky); }
.place-thumb--shopping { background: var(--mint); }
.place-thumb--other { background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--border); }

.place-card__name {
    margin: 0;
    overflow-wrap: anywhere;
}

.place-card__select {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.place-card--selected {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

/* One line. The whole address is kept on the title attribute, because wrapped
   over three lines it pushed the day badge and the stay below the fold. */
.place-card__where {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.place-card__status {
    margin-bottom: var(--space-md);
}

/* Long status labels can wrap without overflowing narrow phone cards. */
.place-card__status .chip {
    white-space: normal;
    text-align: start;
}

.place-card__placed {
    gap: 4px;
    text-decoration: none;
}

.place-card__placed:hover,
.place-card__placed:focus-visible {
    text-decoration: underline;
}

.place-card__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.place-card__votes {
    display: flex;
    gap: var(--space-xs);
    min-width: 0;
}

.place-card__vote {
    gap: 6px;
}

.place-card__vote-count {
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

.place-card__more {
    margin-inline-start: auto;
}

/* The open menu must paint above the next card in the candidate stack. */
.place-card:has(.place-card__more[open]) {
    position: relative;
    z-index: 10;
}

/* The arrival animation leaves each wrapper as its own stacking context because
   it retains a transform. Raise that wrapper too, or the menu still paints
   behind the card that follows it even though the card itself has a z-index. */
.motion-list-item:has(.place-card__more[open]) {
    position: relative;
    z-index: 10;
}

.place-card__credit {
    margin: var(--space-md) 0 0;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border);
    color: var(--text-faint);
    font-size: 0.75rem;
}

/* Its own line: an author's name can be long, and it must not push the map
   credit off the card. */
.place-card__photo-credit {
    display: block;
    overflow-wrap: anywhere;
}

.place-card__photo-credit a {
    color: inherit;
}

.candidate-search {
    display: flex;
    align-items: flex-end;
    gap: var(--space-sm);
}

.candidate-search__field {
    flex: 1;
    min-width: 0;
}

.search-result__where {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result__credit {
    margin-top: 2px;
    color: var(--text-faint);
    font-size: 0.72rem;
}

.stop.stop--empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    padding-block: var(--space-md);
}

.stop--empty__text {
    flex: 1;
}

/*
  On a phone the clock keeps its column and the two small buttons fall under
  the name, so the name is never squeezed to a few characters a line.
*/
@media (max-width: 640px) {
    .timeline {
        --tl-pad: var(--space-md);
        --tl-time: 46px;
    }

    .stop {
        gap: var(--space-xs) var(--space-sm);
    }

    /* One button beside the name; while rearranging, the row of them goes
       under it so the name keeps the middle column. */
    .stop__actions:has(> :nth-child(2)) {
        grid-column: 2 / -1;
        justify-content: flex-end;
    }

    .stop__details {
        padding-left: 0;
    }
}

/* A travel leg: small text on the rail between two numbers. Lighter than
   either activity it joins. */
.leg {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-sm);
    min-height: 26px;
    padding: 2px var(--tl-pad, var(--space-lg)) 2px calc(var(--tl-rail, 95px) + var(--space-md));
    color: var(--text-faint);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.leg::before {
    content: "";
    position: absolute;
    left: var(--tl-rail, 95px);
    top: 0;
    bottom: 0;
    border-left: 2px solid var(--border);
}

.leg--unknown::before {
    border-left-style: dashed;
}

.leg__line {
    display: none;
}

.leg__mode .select {
    width: auto;
}

/*
  The hours with nothing in them. Drawn unlike a travel leg on purpose: a day
  out for eleven hours and busy for four has seven somewhere, and reading two
  stops as though they touched is how a day's total became a puzzle.
*/
.leg--free {
    font-style: italic;
}

.leg--free::before {
    border-left: 2px dotted color-mix(in srgb, var(--brand) 45%, var(--border));
}

/* What the page is doing with what has been changed, in one line. */
.itinerary-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.itinerary-status:empty {
    display: none;
}

.itinerary-generate-confirm__effects {
    margin: var(--space-sm) 0;
    padding-left: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.itinerary-generate-confirm__keep {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.itinerary-generate-confirm__actions {
    margin-top: var(--space-md);
}

.plan-notice {
    margin-bottom: var(--space-lg);
}

.plan-notice__text {
    flex: 1;
}

.select--compact,
.input--compact {
    width: auto;
    padding: 4px 8px;
    font-size: 0.8rem;
}

.input--minutes {
    width: 5rem;
}

/* ---------- Plan: days, list and map on one screen ---------- */

.day-nav {
    margin-bottom: var(--space-md);
}

/* One row that scrolls sideways on a narrow screen instead of wrapping. */
.day-nav__list {
    display: flex;
    gap: var(--space-xs);
    margin: 0;
    padding: 2px 2px var(--space-xs);
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.day-nav__day {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 78px;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color 150ms ease-out, background-color 150ms ease-out;
}

.day-nav__day:hover {
    border-color: var(--border-strong);
}

.day-nav__day:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.day-nav__number {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.day-nav__date {
    font-size: 0.88rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* How full the day is, as dots rather than a number to read. */
.day-nav__count {
    display: flex;
    gap: 3px;
    min-height: 5px;
}

.day-nav__count i {
    width: 5px;
    height: 5px;
    border-radius: var(--radius-pill);
    background: var(--border-strong);
}

.day-nav__day.is-today .day-nav__number {
    color: var(--brand-strong);
}

.day-nav__day.is-selected {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.day-nav__day.is-selected .day-nav__number {
    color: var(--brand-strong);
}

.day-nav__day.is-selected .day-nav__count i {
    background: var(--brand);
}

.day-nav__day.is-drop-target {
    outline: 2px dashed var(--brand);
    outline-offset: 2px;
}

.plan-views {
    display: none;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.plan-layout {
    display: grid;
    gap: var(--space-lg);
    align-items: start;
}

.plan-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
}

.plan-filter {
    gap: var(--space-xs);
}

.plan-add--below {
    align-self: flex-start;
    margin: 0 var(--space-lg) var(--space-md);
}

.plan-unassigned {
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}

.plan-unassigned > summary {
    padding: var(--space-xs) 0;
    color: var(--text-muted);
    font-weight: 600;
    cursor: pointer;
}

.plan-unassigned__list {
    margin: var(--space-xs) 0 0;
    padding: 0;
    list-style: none;
}

.plan-unassigned__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--border);
}

.plan-unassigned__name {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.plan-map {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.plan-map__canvas {
    height: 420px;
}

.plan-map__empty {
    margin: 0;
    display: grid;
    place-items: center;
    min-height: 240px;
    padding: var(--space-xl);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    text-align: center;
}

.plan-map__footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.plan-map__notice {
    font-size: 0.85rem;
}

/*
  Desktop: the day and its map side by side, the map held in view while the
  list scrolls. Selecting on either side marks the same activity on the other.
*/
@media (min-width: 1024px) {
    .plan-layout {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 0.9fr);
    }

    .plan-map-column {
        position: sticky;
        top: 84px;
    }

    .plan-map__canvas {
        height: calc(100vh - 150px);
        min-height: 420px;
        max-height: 760px;
    }
}

/* Wide screens give the plan more of the width rather than more margin. */
@media (min-width: 1440px) {
    .page:has(.plan-layout) {
        max-width: 1400px;
    }
}

/*
  Narrower screens pick which half to look at: the list, the map, or the map
  above the list. Not a copy of anybody's bottom sheet — two panes and a switch.
*/
@media (max-width: 1023px) {
    .plan-views {
        display: flex;
    }

    .plan-layout[data-view="list"] .plan-map-column {
        display: none;
    }

    .plan-layout[data-view="map"] .plan-list {
        display: none;
    }

    .plan-layout[data-view="map"] .plan-map__canvas {
        height: calc(100vh - 300px);
        min-height: 320px;
    }

    .plan-layout[data-view="split"] .plan-map-column {
        order: -1;
    }

    .plan-layout[data-view="split"] .plan-map__canvas {
        height: 38vh;
        min-height: 220px;
    }
}

/* Who is doing an activity. */
.participant-picker {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.participant-picker__modes {
    gap: var(--space-xs);
}

.participant-picker__people {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
}

.participant-picker__person {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 32px;
    font-size: 0.88rem;
}

/* Adding an activity: a panel inside the day on wider screens, a sheet from
   the bottom edge on a phone. */
.add-activity {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin: var(--space-md) var(--space-lg) 0;
    padding: var(--space-lg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}

.add-activity__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.add-activity__header h2 {
    margin: 0;
    font-size: 1rem;
}

.add-activity__modes,
.add-activity__categories {
    gap: var(--space-xs);
}

.add-activity__chosen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.add-activity__choices,
.add-activity__suggestions {
    display: flex;
    flex-direction: column;
    max-height: 280px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.add-activity__choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: var(--space-sm) var(--space-xs);
    border: 0;
    border-bottom: 1px solid var(--border);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.add-activity__choice:hover,
.add-activity__choice:focus-visible {
    background: var(--surface-sunken);
}

.add-activity__suggestion {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border);
}

.add-activity__suggestion p {
    margin: 0;
}

.add-activity__address {
    flex-wrap: nowrap;
    gap: var(--space-xs);
}

.add-activity__fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.add-activity__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

.add-activity__back {
    align-self: flex-start;
}

.add-activity__footer {
    gap: var(--space-sm);
}

@media (max-width: 640px) {
    .add-activity {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 50;
        max-height: 88vh;
        margin: 0;
        padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
        overflow-y: auto;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        box-shadow: var(--shadow-lifted);
    }

    .add-activity__pair {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- States ---------- */

.notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.9rem;
}

.notice--warning {
    background: var(--warning-soft);
    border-color: transparent;
    color: var(--warning);
}

.notice--danger {
    background: var(--danger-soft);
    border-color: transparent;
    color: var(--danger);
}

.notice--success {
    background: var(--success-soft);
    border-color: transparent;
    color: var(--success);
}

.empty {
    display: grid;
    place-items: center;
    gap: var(--space-md);
    padding: var(--space-huge) var(--space-xl);
    border: 1px dashed color-mix(in srgb, var(--brand) 40%, var(--border-strong));
    border-radius: var(--radius-lg);
    background: radial-gradient(90% 120% at 50% 0%,
        color-mix(in srgb, var(--brand-soft) 60%, transparent) 0%, transparent 70%);
    color: var(--text-muted);
    text-align: center;
}

.empty__mark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    color: var(--brand);
    box-shadow: var(--shadow);
}

@media (max-width: 640px) {
    .trip-room-header {
        display: block;
        margin-bottom: var(--space-md);
    }

    .trip-room-header__identity,
    .trip-room-header__title-row {
        width: 100%;
    }

    .trip-room-header__title-row {
        justify-content: space-between;
    }

    .trip-room-header h1 {
        font-size: 1.75rem;
    }

    .trip-room-header__meta {
        justify-content: space-between;
        align-items: center;
        gap: var(--space-xs);
        width: 100%;
        min-width: 0;
    }

    .trip-room-header__meta .page__subtitle {
        min-width: 0;
        flex: 1;
        margin: var(--space-xs) 0 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .trip-room-header__meta > .chip {
        flex: none;
    }

    .trip-room-header__desktop-dates,
    .trip-room-header__actions,
    .tabs,
    .desktop-trip-overview {
        display: none;
    }

    .trip-room-header__mobile-date,
    .trip-room-menu,
    .mobile-trip-overview {
        display: block;
    }

    .mobile-tabs {
        position: relative;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-bottom: var(--space-lg);
        border-bottom: 1px solid var(--border);
    }

    /* The labels are the same words the desktop strip uses, so they are given
       room to wrap rather than a shorter second name. */
    .mobile-tabs .tab {
        width: 100%;
        min-height: 48px;
        padding-inline: 4px;
        font-size: 0.78rem;
        line-height: 1.15;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
    }

    .tab__count {
        margin-inline-start: 3px;
        color: var(--text-faint);
        font-size: 0.72rem;
    }

    .mobile-tabs__more {
        position: relative;
    }

    .mobile-tabs__menu {
        position: absolute;
        inset-block-start: calc(100% + 2px);
        inset-inline-end: 0;
        z-index: 15;
        display: grid;
        min-width: 150px;
        padding: var(--space-xs);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface-raised);
        box-shadow: var(--shadow-lifted);
    }

    .mobile-tabs__menu button {
        padding: 10px 12px;
        border: 0;
        border-radius: var(--radius-xs);
        background: transparent;
        color: var(--text);
        font: inherit;
        text-align: start;
    }

    .mobile-tabs__menu button.active {
        background: var(--brand-soft);
        color: var(--brand-strong);
    }

    .mobile-trip-overview {
        padding: var(--space-md);
    }

    /* The plan card is what the overview opens on, so it is compact enough to
       land whole above the fold on a 390 x 844 screen: dates, what is next,
       and the button into the itinerary, with nothing to scroll past first. */
    .trip-plan-card {
        padding: var(--space-md);
        gap: var(--space-sm);
        margin-bottom: var(--space-md);
    }

    .trip-plan-card__dates strong {
        font-size: 1.05rem;
    }

    /* Stacked rather than side by side: a button's label is one line, and the
       two labels together are wider than a phone. Stacking also keeps the
       plan the larger target of the pair. */
    .trip-plan-card__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-sm);
    }

    .trip-plan-card__actions .button {
        min-height: 48px;
    }

    .mobile-trip-overview__rows {
        display: grid;
    }

    .mobile-trip-overview__rows > * {
        display: flex;
        justify-content: space-between;
        gap: var(--space-md);
        width: 100%;
        padding: 12px 0;
        border: 0;
        border-bottom: 1px solid var(--border);
        background: transparent;
        color: var(--text);
        font: inherit;
        text-align: start;
        text-decoration: none;
    }

    .workflow-guide {
        padding: var(--space-md);
    }

    .workflow-guide__copy p {
        display: none;
    }

    .card {
        padding: var(--space-md);
    }

    .empty {
        gap: var(--space-sm);
        padding: var(--space-xl) var(--space-md);
    }

    .empty p {
        margin: 0;
    }

    .subpage-header {
        align-items: stretch;
        margin-bottom: var(--space-md);
    }

    .subpage-header h1 {
        margin-top: var(--space-sm);
        font-size: 1.75rem;
    }

    .subpage-header .page__subtitle {
        display: -webkit-box;
        margin-top: var(--space-xs);
        overflow: hidden;
        font-size: 0.9rem;
        line-height: 1.45;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .map-page-header .page__subtitle {
        display: none;
    }

    .map-surface-card {
        padding: var(--space-sm);
    }

    .map-surface-card .empty {
        border: 0;
        background: transparent;
    }

    .map-surface-card .map {
        height: min(58vh, 480px);
        border-radius: var(--radius-sm);
    }

    .itinerary-page-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
    }

    .itinerary-page-actions__live,
    .itinerary-page-actions__map {
        display: none;
    }

    .itinerary-page-actions .select {
        width: 100% !important;
        min-width: 0;
    }

    .itinerary-page-actions__generate {
        white-space: nowrap;
    }

    .itinerary-page-actions > .button:not(.itinerary-page-actions__generate) {
        grid-column: 1 / -1;
        width: 100%;
    }

    .day__header,
    .stop,
    .itinerary-stay {
        padding-inline: var(--space-md);
    }

    .place-card__actions {
        gap: var(--space-xs);
        padding-top: var(--space-sm);
        border-top: 1px solid var(--border);
    }

    /* The two answers get a row to themselves and split it evenly, so neither
       of them is the one that wrapped. */
    .place-card__votes {
        flex: 1 1 100%;
        gap: var(--space-xs);
    }

    .place-card__vote {
        flex: 1;
        justify-content: center;
        min-height: 40px;
        padding-inline: var(--space-sm);
    }

    .place-card__comments {
        flex: 1;
    }
}

.skeleton {
    height: 14px;
    border-radius: var(--radius-sm);
    background: linear-gradient(
        90deg,
        var(--surface-sunken) 25%,
        var(--border) 37%,
        var(--surface-sunken) 63%
    );
    background-size: 400% 100%;
    animation: skeleton 1.4s ease infinite;
}

@keyframes skeleton {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton,
    .brand-loader__fill,
    .motion-list-item,
    .motion-list-item--leaving,
    .motion-list-item--settling,
    .trip-room-panel,
    .trip-now-stop--completing,
    .trip-now-stop--completing .trip-now-stop__marker,
    .trip-now-stop--completing .trip-now-stop__marker::after {
        animation: none;
    }

    .home-featured {
        --poster-shift-x: 0px !important;
        --poster-shift-y: 0px !important;
    }

    .trip-card:hover,
    .home-featured:hover,
    .button:hover:not(:disabled),
    .button:active:not(:disabled) {
        transform: none;
    }
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--success);
    flex: none;
}

.live-dot--off {
    background: var(--text-faint);
}

/* ---------- Toasts ---------- */

.toasts {
    position: fixed;
    inset-block-end: var(--space-xl);
    inset-inline-end: var(--space-xl);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: min(360px, calc(100vw - 2 * var(--space-xl)));
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    font-size: 0.9rem;
}

.toast--danger {
    border-color: var(--danger);
    color: var(--danger);
}

/* ---------- Sign-in ---------- */

/*
  The first screen now explains the product before it asks for an account. The
  existing postcard landscape stays outside the main surface; inside, the copy,
  journey preview and Google action keep a crisp reading order.
*/
.signin {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100vh;
    overflow-x: hidden;
    padding: clamp(var(--space-md), 3vw, var(--space-huge));
    background:
        radial-gradient(circle 96px at 78% 20%,
            var(--sun) 0 44%,
            color-mix(in srgb, var(--sun) 32%, transparent) 46%, transparent 74%),
        linear-gradient(180deg,
            var(--sky) 0%,
            color-mix(in srgb, var(--sky) 46%, #fff) 34%,
            color-mix(in srgb, var(--peach) 52%, #fff) 68%,
            color-mix(in srgb, var(--peach) 74%, #fff) 100%);
}

/*
  The hills get their own layer rather than more stops on the gradient above:
  measured from the bottom edge they keep the same height on a laptop and on a
  phone, where a percentage of the viewport would stretch them into stripes.
*/
.signin::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 420px;
    background:
        /* Near, middle, far: three ridges, each lighter and higher than the one
           in front of it, which is the whole of the depth in this picture. */
        radial-gradient(58% 150px at 82% 102%,
            color-mix(in srgb, var(--peach-ink) 30%, var(--peach)) 0 99%, transparent 100%),
        radial-gradient(74% 236px at 16% 106%,
            color-mix(in srgb, var(--mint-ink) 24%, var(--mint)) 0 99%, transparent 100%),
        radial-gradient(120% 330px at 54% 112%,
            color-mix(in srgb, var(--sky-ink) 14%, var(--sky)) 0 99%, transparent 100%);
    pointer-events: none;
}

.signin__shell {
    position: relative;
    z-index: 1;
    width: min(1040px, 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: calc(var(--radius-lg) + 4px);
    background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lifted);
}

.signin__topbar,
.demo-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-xl);
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-raised) 84%, transparent);
}

.signin__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text);
    font-size: 1.02rem;
    font-weight: 750;
}

.signin__brand:hover {
    text-decoration: none;
}

.signin__brand img {
    border-radius: 10px;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--brand) 30%, transparent);
}

.language-switch {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
}

.language-switch__option {
    min-height: 34px;
    padding: 5px 11px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.language-switch__option[aria-pressed="true"] {
    background: var(--surface-raised);
    color: var(--brand-strong);
    box-shadow: var(--shadow);
}

.language-switch__option:disabled {
    cursor: wait;
    opacity: 0.65;
}

.signin__content {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.85fr);
}

.signin__intro {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xl);
    padding: clamp(var(--space-xl), 4.5vw, 52px);
    background: radial-gradient(90% 110% at 0% 0%,
        color-mix(in srgb, var(--mint) 54%, transparent), transparent 72%);
}

.signin__headline {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-lg);
}

.signin__mark {
    display: block;
    width: 84px;
    height: 84px;
    border-radius: 22px;
    object-fit: cover;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 40%, transparent);
}

.signin__eyebrow {
    margin-bottom: var(--space-xs);
    color: var(--brand-strong);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.signin__headline h1 {
    font-size: clamp(1.85rem, 1.25rem + 2.2vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -0.038em;
}

.signin__subtitle {
    max-width: 54ch;
    margin-top: var(--space-sm);
    color: var(--text-muted);
}

.signin-journey {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.signin-journey li {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-raised) 80%, transparent);
}

.signin-journey__number {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 11px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: 0.78rem;
    font-weight: 850;
}

.signin-journey li > span:last-child {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.signin-journey strong {
    color: var(--text);
    font-size: 0.95rem;
}

.signin-journey small {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.48;
}

.signin__demo-link {
    align-self: flex-start;
}

.signin__auth {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-xl);
    padding: clamp(var(--space-xl), 4vw, var(--space-huge));
    border-left: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-raised) 88%, var(--sky));
}

.signin__auth h2 {
    color: var(--brand-strong);
    font-size: 1.32rem;
}

.signin__google {
    display: grid;
    place-items: center start;
    min-height: 44px;
    overflow: hidden;
}

.signin__age-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    cursor: pointer;
}

.signin__age-check span {
    display: grid;
    gap: 0.2rem;
}

.signin__age-check small {
    color: var(--text-muted);
}

.signin__loading {
    display: grid;
    place-items: center;
}

.legal-links,
.legal-account-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-size: 0.82rem;
    color: var(--text-muted);
}

.signin__legal {
    padding: var(--space-md) var(--space-xl);
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
}

/* The same links under the signed-in app and the public demo. */
.app-footer,
.demo-legal {
    padding: var(--space-md) var(--space-xl) var(--space-xl);
}

.legal-links a,
.legal-account-links a,
.checkbox a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

@media (pointer: coarse) {
    .language-switch__option {
        min-height: 40px;
    }
}

@media (max-width: 760px) {
    .signin {
        place-items: start center;
        padding: var(--space-md);
    }

    .signin__content {
        grid-template-columns: minmax(0, 1fr);
    }

    .signin__intro,
    .signin__auth {
        padding: var(--space-xl);
    }

    .signin__auth {
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .signin-journey {
        grid-template-columns: minmax(0, 1fr);
    }

    .signin-journey li {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
    }
}

@media (max-width: 460px) {
    .signin__topbar {
        padding-inline: var(--space-md);
    }

    .signin__brand .brand-wordmark {
        display: none;
    }

    .signin__headline {
        grid-template-columns: minmax(0, 1fr);
    }

    .signin__mark {
        width: 66px;
        height: 66px;
        border-radius: 18px;
    }
}

/* ---------- Public sample trip ---------- */

.demo-shell {
    min-height: 100vh;
    background:
        radial-gradient(70% 40% at 100% 0%, var(--wash-lift), transparent 70%),
        radial-gradient(70% 50% at 0% 10%, var(--wash), transparent 70%),
        var(--surface-sunken);
}

.demo-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom-color: var(--border);
    backdrop-filter: blur(14px) saturate(150%);
}

.demo-topbar__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.demo-readonly {
    background: var(--butter);
    color: var(--butter-ink);
}

.demo-page {
    width: min(1120px, calc(100% - 2 * var(--space-xl)));
    margin-inline: auto;
    padding-block: clamp(var(--space-xl), 5vw, 64px);
}

.demo-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-xl);
    min-height: 230px;
    padding: clamp(var(--space-xl), 5vw, 56px);
    border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--border));
    border-radius: calc(var(--radius-lg) + 4px);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--mint) 74%, var(--surface-raised)),
        color-mix(in srgb, var(--sky) 58%, var(--surface-raised)) 55%,
        color-mix(in srgb, var(--peach) 54%, var(--surface-raised)));
    box-shadow: var(--shadow-lifted);
}

.demo-hero h1 {
    max-width: 18ch;
    color: var(--brand-strong);
    font-size: clamp(2.1rem, 5.4vw, 3.75rem);
    line-height: 1.02;
    letter-spacing: -0.055em;
}

.demo-hero p:last-child {
    margin-top: var(--space-md);
    color: var(--text-muted);
    font-weight: 700;
}

.demo-party {
    display: flex;
    padding-right: var(--space-md);
}

.demo-party span {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-right: -12px;
    border: 3px solid var(--surface-raised);
    border-radius: var(--radius-pill);
    background: var(--grad-brand);
    color: var(--brand-on);
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: var(--shadow);
}

.demo-party span:nth-child(2) {
    background: var(--peach);
    color: var(--peach-ink);
}

.demo-party span:nth-child(3) {
    background: var(--lavender);
    color: var(--lavender-ink);
}

.demo-stages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

.demo-stage {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-xl);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow);
}

.demo-stage--plan {
    --demo-tone: var(--mint);
    --demo-ink: var(--mint-ink);
}

.demo-stage--guide {
    --demo-tone: var(--sky);
    --demo-ink: var(--sky-ink);
}

.demo-stage--record {
    --demo-tone: var(--lavender);
    --demo-ink: var(--lavender-ink);
}

.demo-stage__header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.demo-stage__header p {
    margin-top: var(--space-xs);
    color: var(--text-muted);
    font-size: 0.88rem;
}

.demo-stage__number {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 12px;
    background: var(--demo-tone);
    color: var(--demo-ink);
    font-size: 0.78rem;
    font-weight: 850;
}

.demo-candidates,
.demo-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.demo-candidate {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
}

.demo-candidate > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.demo-candidate small {
    color: var(--text-muted);
}

.demo-candidate__mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--demo-tone);
    color: var(--demo-ink);
}

.demo-timeline {
    position: relative;
    padding-left: var(--space-sm);
}

.demo-timeline__item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: var(--space-sm);
    padding: var(--space-sm) 0 var(--space-md) var(--space-lg);
    border-left: 2px solid var(--border-strong);
}

.demo-timeline__item::before {
    content: "";
    position: absolute;
    left: 3px;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    border: 2px solid var(--demo-ink);
}

.demo-timeline__item > span {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.demo-timeline__item--now strong {
    color: var(--demo-ink);
}

.demo-tip {
    margin-top: auto;
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    background: var(--demo-tone);
    color: var(--demo-ink);
    font-size: 0.85rem;
    font-weight: 650;
}

.demo-memory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}

.demo-memory-grid div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    background: var(--demo-tone);
    color: var(--demo-ink);
}

.demo-memory-grid span {
    font-size: 1.2rem;
}

.demo-memory-grid strong {
    font-size: 0.83rem;
    line-height: 1.4;
}

.demo-stage blockquote {
    margin: auto 0 0;
    padding: var(--space-md);
    border-left: 3px solid var(--demo-ink);
    color: var(--text-muted);
    font-size: 0.88rem;
    font-style: italic;
}

.demo-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    margin-top: var(--space-xl);
    padding: var(--space-xl);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow);
}

.demo-cta p {
    max-width: 66ch;
    margin-top: var(--space-xs);
    color: var(--text-muted);
}

@media (max-width: 900px) {
    .demo-stages {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .demo-topbar {
        align-items: flex-start;
        padding-inline: var(--space-md);
    }

    .demo-topbar__actions {
        gap: var(--space-xs);
    }

    .demo-readonly,
    .demo-back {
        display: none;
    }

    .demo-page {
        width: min(100% - 2 * var(--space-md), 1120px);
        padding-block: var(--space-lg) var(--space-huge);
    }

    .demo-hero {
        min-height: 250px;
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-xl);
    }

    .demo-party {
        align-self: flex-end;
    }

    .demo-cta {
        align-items: stretch;
        flex-direction: column;
    }

    .demo-cta .button {
        width: 100%;
    }
}

/* ---------- Public legal documents ---------- */

.legal-shell {
    min-height: 100vh;
    background:
        radial-gradient(circle at 88% 3%, color-mix(in srgb, var(--sun) 24%, transparent), transparent 22rem),
        linear-gradient(180deg, color-mix(in srgb, var(--sky) 25%, var(--surface)) 0, var(--surface) 28rem);
}

.legal-topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: 64px;
    padding: var(--space-sm) max(var(--space-xl), calc((100vw - 920px) / 2));
    background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
    border-block-end: 1px solid var(--border);
    backdrop-filter: blur(14px);
}

.legal-document {
    width: min(920px, calc(100% - 2 * var(--space-xl)));
    margin-inline: auto;
    padding-block: clamp(2rem, 6vw, 5rem);
}

.legal-hero {
    padding: clamp(1.5rem, 5vw, 3.5rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lifted);
}

.legal-hero h1 {
    margin-block: var(--space-md) var(--space-sm);
    font-size: clamp(2rem, 6vw, 3.65rem);
    line-height: 1.06;
    letter-spacing: -0.045em;
}

.legal-summary {
    max-width: 65ch;
    margin: 0;
    color: var(--text-muted);
    font-size: clamp(1rem, 2.2vw, 1.18rem);
    line-height: 1.7;
}

.legal-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
    margin-block: var(--space-xl) 0;
}

.legal-meta div {
    min-width: 0;
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--border);
}

.legal-meta dt {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.legal-meta dd {
    margin: var(--space-xs) 0 0;
    overflow-wrap: anywhere;
    line-height: 1.5;
}

.legal-toc {
    display: flex;
    gap: var(--space-xs);
    margin-block: var(--space-xl);
    padding-block: var(--space-sm);
    overflow-x: auto;
    scrollbar-width: thin;
}

.legal-toc a {
    flex: none;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    color: var(--text-muted);
    font-size: 0.82rem;
    text-decoration: none;
}

.legal-toc a:hover,
.legal-toc a:focus-visible {
    border-color: var(--brand);
    color: var(--brand);
}

.legal-content {
    display: grid;
    gap: var(--space-md);
}

.legal-section {
    /* A grid item sizes to its widest content by default, so a wide disclosure
       table would stretch every other section past the viewport instead of
       scrolling inside its own wrapper. */
    min-inline-size: 0;
    scroll-margin-top: 80px;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}

.legal-section h2 {
    margin: 0 0 var(--space-md);
    color: var(--text);
    font-size: clamp(1.2rem, 3vw, 1.55rem);
    letter-spacing: -0.025em;
}

.legal-section p,
.legal-section li {
    color: var(--text-muted);
    line-height: 1.75;
}

.legal-section p {
    margin: 0;
}

.legal-section p + p {
    margin-block-start: var(--space-md);
}

.legal-section ul {
    margin: var(--space-sm) 0 0;
    padding-inline-start: 1.35rem;
}

.legal-section li + li {
    margin-block-start: var(--space-sm);
}

.legal-table-wrap {
    min-inline-size: 0;
    margin-block-start: var(--space-lg);
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.legal-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 0.84rem;
    line-height: 1.55;
}

.legal-table th,
.legal-table td {
    padding: 0.85rem;
    border-block-end: 1px solid var(--border);
    text-align: start;
    vertical-align: top;
    /* The transfer tables carry sentence-length cells. Without a floor the
       narrow columns squeeze to one word per line inside the scroller. */
    min-inline-size: 9rem;
}

.legal-table thead th {
    background: color-mix(in srgb, var(--brand-soft) 64%, var(--surface-raised));
    color: var(--text);
}

.legal-table tbody th {
    color: var(--brand);
    min-inline-size: 13rem;
}

.legal-table tbody tr:last-child > * {
    border-block-end: 0;
}

.legal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: var(--space-xl);
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .legal-topbar {
        padding-inline: var(--space-md);
    }

    .legal-document {
        width: min(100% - 2 * var(--space-md), 920px);
        padding-block-start: var(--space-lg);
    }

    .legal-meta {
        grid-template-columns: 1fr;
    }

    .legal-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ---------- Blazor and screen readers ---------- */
/* Blazor's own error strip, restyled to match. */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 100;
    padding: var(--space-md) var(--space-xl);
    background: var(--warning-soft);
    color: var(--warning);
    box-shadow: var(--shadow);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: inline-end;
}

/* Announced to a screen reader, invisible to everyone else. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- Trip assistant ---------- */

/* One surface, like the add-activity panel: opened where the question is asked,
   on the phone a sheet over the plan rather than a place to scroll to. */
.assistant {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin: var(--space-md) var(--space-lg) 0;
    padding: var(--space-lg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}

.plan-assistant {
    margin-bottom: var(--space-lg);
}

.plan-assistant .assistant {
    margin: 0;
}

.assistant__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.assistant__header h2 {
    margin: 0;
    font-size: 1rem;
}

.assistant__question {
    margin: 0;
}

.assistant__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.assistant__command {
    display: flex;
    align-items: flex-end;
    gap: var(--space-sm);
}

.assistant__command .field {
    flex: 1;
}

.assistant__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    border: 0;
}

.assistant__group legend {
    padding: 0;
}

.assistant__chips {
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.assistant__check {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.assistant__footer {
    gap: var(--space-sm);
}

.assistant__stages {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.assistant__stage {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-faint);
}

.assistant__stage::before {
    content: "";
    width: 8px;
    height: 8px;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
}

.assistant__stage--done {
    color: var(--text-muted);
}

.assistant__stage--done::before {
    background: currentColor;
}

.assistant__stage--current {
    color: var(--text);
    font-weight: 600;
}

.assistant__stage--current::before {
    border-color: var(--brand);
    background: var(--brand);
}

.assistant__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.assistant__kept li {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.assistant__section,
.assistant__understood {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.assistant__recovery {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-width: 0;
}

.assistant__section > p,
.assistant__understood > p {
    margin: 0;
}

.assistant__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin: 0;
}

.assistant__major,
.assistant__warning {
    margin: 0;
}

.assistant__steps summary {
    cursor: pointer;
}

.plan-ai,
.stop__ai {
    margin-inline-start: var(--space-sm);
}

@media (max-width: 640px) {
    .assistant {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 50;
        max-height: 88vh;
        margin: 0;
        padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
        overflow-y: auto;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        box-shadow: var(--shadow-lifted);
    }

    .plan-assistant {
        margin-bottom: 0;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .assistant__stage--current::before {
        animation: assistant-pulse 1.2s ease-in-out infinite;
    }
}

@keyframes assistant-pulse {
    50% {
        opacity: 0.4;
    }
}

/* Community is a library of reusable plans. The same trip surface is used
   for discovery and saved inspiration, with facts ahead of actions. */
.community-filters { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) auto; align-items: end; gap: var(--space-lg); margin-bottom: var(--space-xxl); }
.community-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
.community-card { overflow: hidden; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); }
.community-card__image { display: block; }
.community-card__image img { display: block; width: 100%; height: auto; aspect-ratio: 2; object-fit: cover; }
.community-card__body { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-lg); overflow-wrap: anywhere; }
.community-card h2 { font-size: 1.2rem; font-weight: 700; }
.community-card h2 a { color: var(--text); text-decoration: none; }
.community-card h2 a:hover { text-decoration: underline; }
.community-card__destination { color: var(--brand); font-size: .9rem; font-weight: 600; }
.community-card__summary { color: var(--text-muted); }
.community-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); }
.community-more { margin-top: var(--space-xl); }
.public-trip__summary { max-width: 70ch; margin-block: var(--space-lg); overflow-wrap: anywhere; }
.public-trip__utilities { margin-block: var(--space-lg); }
.public-trip__copy, .public-trip__preview { border-block: 1px solid var(--border); padding-block: var(--space-xxl); margin-block: var(--space-xl); }
.public-trip__guidance { margin-block: var(--space-xxl); }
.public-trip__days { display: grid; gap: var(--space-xxl); }
.public-trip__day { min-width: 0; }
.public-trip__activities { padding-inline-start: var(--space-xl); margin-top: var(--space-md); }
.public-trip__activities li { padding-block: var(--space-md); border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.public-trip__activities li span:last-child { margin-inline-start: var(--space-lg); white-space: nowrap; }
.public-trip__hotel { display: grid; gap: var(--space-md); }
.publication-form, .public-trip__preview { max-width: 56rem; }
.public-trip__preview .community-card { max-width: 28rem; }
.publication-activity { padding-block: var(--space-lg); border-bottom: 1px solid var(--border); display: grid; gap: var(--space-md); }
.publication-activity .row { flex-wrap: nowrap; align-items: start; }
.publication-activity input[type=checkbox] { flex-shrink: 0; }
.publication-activity .field { margin-inline-start: var(--space-xxl); }
.my-trips-tabs { display: flex; margin-bottom: var(--space-xl); flex-wrap: wrap; }
.my-trips-gaps { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); padding-inline-start: var(--space-xl); }
.settings-publication { margin-bottom: var(--space-xl); }
.mobile-profile-menu.profile-menu { display: block; position: relative; }
.profile-menu summary { max-width: 10rem; list-style: none; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.profile-menu summary::-webkit-details-marker { display: none; }
.profile-menu .mobile-profile-menu__panel { position: absolute; inset-block-start: calc(100% + var(--space-sm)); inset-inline-end: 0; z-index: 40; display: grid; gap: var(--space-xs); width: min(18rem, calc(100vw - 2 * var(--space-lg))); padding: var(--space-sm); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-raised); box-shadow: var(--shadow-lifted); }
.profile-menu .mobile-profile-menu__panel > a, .profile-menu .mobile-profile-menu__panel > button, .profile-menu .mobile-profile-menu__panel > label { padding: var(--space-sm) var(--space-md); border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text); font: inherit; text-align: start; text-decoration: none; }
.profile-menu .mobile-profile-menu__panel > label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-sm); }
.profile-menu .select { width: auto; padding: var(--space-xs) var(--space-sm); }
@media (max-width: 1023px) {
    .community-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .community-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .community-filters .field:first-child { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
    .community-grid { grid-template-columns: minmax(0, 1fr); }
    .community-filters { gap: var(--space-md); }
    .community-filters button { grid-column: 1 / -1; }
    .public-trip__header { flex-direction: column; align-items: stretch; }
    .public-trip__copy .form-grid { grid-template-columns: minmax(0, 1fr); }
    .public-trip__copy > .row { position: sticky; bottom: 0; padding-block: var(--space-md); background: var(--surface-raised); }
    .my-trips-tabs .tab { padding-inline: var(--space-sm); }
}

/* Live follows the selected traveler's clock without changing the shared plan. */
.live-experience { display: grid; gap: var(--space-xl); }
.live-experience h2, .live-experience h3, .live-experience p { margin: 0; }
.live-experience h3 { font-size: 1rem; font-weight: 600; }
.live-experience__now, .live-experience__next, .live-experience__travel,
.live-experience__disruptions { display: grid; gap: var(--space-sm); }
.live-experience__next { padding: var(--space-lg); background: var(--surface-raised); color: var(--text); border: 1px solid var(--border); box-shadow: none; }
.live-experience__now > .button { justify-self: start; }
.live-experience__next > strong, .live-experience__now > strong { font-size: 1.2rem; }
.live-experience__clock, .live-experience__later, .live-experience__records { border-top: 1px solid var(--border); padding-top: var(--space-lg); }
.live-experience summary { cursor: pointer; padding-block: var(--space-sm); font-weight: 600; }
.live-experience__time-form { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: end; margin-top: var(--space-md); }
.live-experience__time-form > .field { flex: 1 1 160px; min-width: 0; }
.live-experience__time-form > .small { flex-basis: 100%; }
.live-experience__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); border-bottom: 1px solid var(--border); padding-block: var(--space-md); }
.live-experience__row > strong { flex: 1 1 160px; overflow-wrap: anywhere; }
.live-experience__records h3 { margin-top: var(--space-lg); }
.live-experience time, .live-experience__row > span:first-child { font-variant-numeric: tabular-nums; }
.live-experience .row { flex-wrap: wrap; }
.live-experience .input { max-width: 100%; }
@media (max-width: 639px) { .live-experience__row { gap: var(--space-sm); } }

/* Touch and phone layouts need the same usable hit area on every action, including
   compact controls and disclosure summaries. Keep dense desktop sizing. */
@media (pointer: coarse), (max-width: 639px) {
    button,
    .button,
    .tab,
    summary,
    .participant-picker__person,
    .topbar__primary .topbar__link,
    .map-pin[role="button"] {
        min-width: 44px;
        min-height: 44px;
    }

    .mobile-profile-menu summary {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Shared travel tools and restrained workspace surfaces. */
.trip-room-menu {
    position: relative;
}

.trip-room-menu summary {
    list-style: none;
    min-width: 44px;
    padding-inline: 10px;
    font-size: 1.2rem;
}

.trip-room-menu summary::-webkit-details-marker {
    display: none;
}

.trip-room-menu__panel {
    position: absolute;
    inset-block-start: calc(100% + var(--space-xs));
    inset-inline-end: 0;
    z-index: 25;
    display: grid;
    width: min(280px, calc(100vw - 2 * var(--space-lg)));
    padding: var(--space-xs);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lifted);
}

.trip-room-menu__panel a {
    padding: 10px 12px;
    border-radius: var(--radius-xs);
    color: var(--text);
    font-weight: 650;
    text-decoration: none;
}

.home-header { align-items: center; }
.home-featured__dates { font-size: .9rem; overflow-wrap: anywhere; }
.home-featured__status { color: var(--tone-ink); margin-top: var(--space-xs); }
.trip-room-header__identity { width: 100%; min-width: 0; }
.trip-room-header__title-row { justify-content: space-between; }
.trip-room-header h1 { overflow-wrap: anywhere; }
.trip-room-header__meta { align-items: baseline; }
.trip-room-menu { display: block; }
.trip-room-menu__panel a { padding: var(--space-md); font-weight: 600; }
.trip-connection { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--text-muted); font-size: .8rem; }
.trip-plan-workspace[hidden], .plan-map__canvas[hidden] { display: none; }
.plan-toolbar { display: flex; justify-content: flex-end; margin-bottom: var(--space-lg); }
.plan-toolbar .itinerary-page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; width: 100%; }
.plan-toolbar .itinerary-page-actions > .button { width: auto; }
.trip-details { margin-top: var(--space-xxl); border-top: 1px solid var(--border); }
.trip-details > summary { padding-block: var(--space-lg); cursor: pointer; color: var(--text-muted); font-weight: 600; }
.trip-details__rows { display: grid; grid-template-columns: 10rem minmax(0, 1fr); margin: 0; }
.trip-details__rows > dt, .trip-details__rows > dd { margin: 0; padding-block: var(--space-md); border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.trip-details__rows > dt { color: var(--text-muted); }
.trip-details__people { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.trip-details__member { display: inline-flex; align-items: center; gap: var(--space-sm); }
@media (max-width: 639px) {
    .home-header { flex-direction: row; align-items: center; gap: var(--space-sm); }
    .home-header h1 { font-size: 1.5rem; }
    .home-header__actions { gap: var(--space-xs); flex-wrap: nowrap; }
    .home-header__actions .button { padding-inline: var(--space-sm); font-size: .8rem; }
    .trip-room-header__meta .page__subtitle { white-space: normal; overflow: visible; line-height: 1.5; }
    .trip-details__rows { grid-template-columns: 96px minmax(0, 1fr); }
    .plan-toolbar { margin-bottom: var(--space-md); }
    .plan-map__empty { min-height: 180px; }
}
.trip-section-nav { display: flex; gap: var(--space-sm); margin-bottom: var(--space-lg); align-items: stretch; }
.trip-section-nav .tabs { margin-bottom: 0; flex: 1; }
.desktop-tabs__more { position: relative; border-bottom: 1px solid var(--border); }
.desktop-tabs__menu { position: absolute; inset-block-start: 100%; inset-inline-end: 0; z-index: 25; display: grid; min-width: 12rem; padding: var(--space-xs); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-raised); box-shadow: var(--shadow-lifted); }
.desktop-tabs__menu button { padding: var(--space-md); border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.desktop-tabs__menu button:hover, .desktop-tabs__menu button[aria-pressed=true] { background: var(--brand-soft); color: var(--brand-strong); }
@media (max-width: 640px) { .trip-section-nav { display: none; } }

/* Destination first, with details saved for the traveller's next decision. */
.new-journey { max-width: 940px; margin-inline: auto; }
.journey-builder { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-raised); }
.journey-builder__postcard { position: relative; display: flex; align-items: end; min-height: 360px; padding: var(--space-xxl); background: var(--surface); overflow: hidden; }
.journey-builder__postcard svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.journey-builder__postcard span { position: relative; font-size: clamp(1.65rem, 1rem + 2vw, 2.25rem); font-weight: 700; overflow-wrap: anywhere; }
.journey-builder__content { padding: var(--space-xxl); min-width: 0; }
.journey-builder__content h2 { font-size: 1.5rem; margin-bottom: var(--space-sm); }
.journey-builder__actions, .journey-date-choice { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.journey-builder__actions { margin-top: var(--space-lg); }
.journey-options { border-block: 1px solid var(--border); padding-block: var(--space-md); }
.journey-options summary { cursor: pointer; color: var(--text-muted); padding-block: var(--space-sm); }
.journey-options > div { padding-top: var(--space-lg); }
.journey-destinations { max-height: 280px; overflow-y: auto; }
.journey-destination { display: grid; gap: var(--space-xs); padding: var(--space-md); width: 100%; text-align: start; background: transparent; border: 0; border-bottom: 1px solid var(--border); color: var(--text); cursor: pointer; font: inherit; }
.journey-destination:hover { background: var(--brand-soft); }
.journey-date-choice .is-selected { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); }
.candidate-workspace { min-width: 0; }
.candidate-workspace .card__header { margin-top: 0; }
.plan-undated { margin-bottom: var(--space-xl); }
@media (max-width: 639px) {
    .journey-builder { grid-template-columns: minmax(0, 1fr); }
    .journey-builder__postcard { min-height: 160px; padding: var(--space-xl); }
    .journey-builder__postcard svg { width: 100%; height: 100%; }
    .journey-builder__content { padding: var(--space-xl); }
    .journey-builder__actions > .button:first-child { width: 100%; }
    .journey-date-choice { display: grid; grid-template-columns: 1fr 1fr; }
}

/* One list of current/future trips; completion of a draft does not move its card. */
.home-trip-list .home-featured { grid-column: 1 / -1; }
.day-nav__all, .day-nav__candidates { display: flex; align-items: center; justify-content: center; min-width: 78px; min-height: 64px; height: 100%; padding: var(--space-sm) var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text); font: inherit; cursor: pointer; scroll-snap-align: start; }
.day-nav__all.is-selected, .day-nav__candidates.is-selected { border-color: var(--brand); background: var(--brand-soft); }
.day-nav__all .day-nav__number, .day-nav__candidates .day-nav__number { font-size: .88rem; white-space: nowrap; }
.day-nav__all.is-selected .day-nav__number, .day-nav__candidates.is-selected .day-nav__number { color: var(--brand-strong); }
.day-nav__all:focus-visible, .day-nav__candidates:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.day-nav__list > li { display: flex; }
.journey-city-chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); list-style: none; padding: 0; margin: 0; }
.journey-city-chips li { display: flex; align-items: center; gap: var(--space-xs); padding-inline-start: var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--brand-soft); max-width: 100%; }
.journey-city-chips li > span { overflow-wrap: anywhere; }
.journey-city-chips button { min-width: 44px; min-height: 44px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text); font: inherit; font-size: 1.25rem; cursor: pointer; }
.desktop-tabs__more > summary, .mobile-tabs__more > summary { list-style: none; cursor: pointer; }
.desktop-tabs__more > summary::-webkit-details-marker, .mobile-tabs__more > summary::-webkit-details-marker { display: none; }
.trip-activity > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.trip-activity__row { display: flex; gap: var(--space-md); justify-content: space-between; padding-block: var(--space-sm); border-bottom: 1px solid var(--border); }
.trip-activity__row > div { min-width: 0; overflow-wrap: anywhere; }

/* Contextual forms use a native modal: background separation and keyboard focus. */
.form-sheet {
    width: min(720px, calc(100vw - var(--space-xxl)));
    max-height: calc(100dvh - var(--space-huge));
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--text);
    box-shadow: var(--shadow-lifted);
    overflow: auto;
    overscroll-behavior: contain;
}
.form-sheet::backdrop {
    background: rgb(15 30 35 / 32%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
body:has(.form-sheet[open]) { overflow: hidden; }
.form-sheet__toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border);
}
.form-sheet__body { padding: var(--space-lg); }
.form-sheet__body > .card, .form-sheet__body > .add-activity {
    border: 0;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}
.form-sheet__body > .card > .card__header,
.form-sheet .add-activity__header { display: none; }
.form-sheet .add-activity, .form-sheet .assistant {
    position: static;
    inset: auto;
    width: auto;
    max-height: none;
    overflow: visible;
    margin: 0;
    box-shadow: none;
}
.choice-chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.choice-chip {
    min-height: 44px;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--text-muted);
    font: inherit;
    cursor: pointer;
}
.choice-chip.is-selected { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.profile-menu > summary { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; }
.profile-menu__name { max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu__chevron { display: inline-flex; align-items: center; line-height: 1; }
.mobile-tabs__more > summary, .desktop-tabs__more > summary {
    display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 1.2rem;
}
.mobile-profile-menu__panel, .trip-room-menu__panel, .mobile-tabs__menu, .desktop-tabs__menu {
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-lifted);
}
.ai-fab {
    position: fixed;
    right: max(var(--space-xl), env(safe-area-inset-right));
    bottom: calc(var(--space-xl) + env(safe-area-inset-bottom));
    z-index: 30;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-lifted);
    display: inline-flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm);
}
.ai-fab__label { font-size: .72rem; font-weight: 700; }
.itinerary-tools { position: relative; }
.itinerary-tools__panel {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 35;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 200px;
    padding: var(--space-md);
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lifted);
}
.expense-workspace { max-width: 880px; margin-inline: auto; }
.expense-summary .card__header { flex-wrap: wrap; }
.expense-summary .card__header > .strong { flex-basis: 100%; font-size: 2rem; font-variant-numeric: tabular-nums; }
.expense-breakdown { margin-top: var(--space-md); }
.expense-breakdown > summary, .expense-detail > summary { cursor: pointer; min-height: 44px; align-content: center; font-weight: 600; }
.expense-detail[open] > summary { margin-bottom: var(--space-md); }
.expense-category-list { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.expense-category-list .chip { background: transparent; border: 0; padding-inline: 0; }
.trip-details { margin-block: 0 var(--space-md); }
.trip-details > summary { min-height: 44px; align-content: center; }
.trip-details__rows { display: block; }
.trip-details__rows dd { margin: 0; }
@media (max-width: 639px) {
    .form-sheet { width: 100%; max-width: none; max-height: calc(100dvh - var(--space-xl)); margin: auto 0 0; border-radius: var(--radius-md) var(--radius-md) 0 0; }
    .form-sheet__body { padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom)); }
    .form-sheet .split { grid-template-columns: 1fr; }
    .form-sheet .form-grid { grid-template-columns: 1fr; }
    .trip-plan-workspace { padding-bottom: 88px; }
    .home-trip-list > .home-featured { min-height: 260px; border-radius: var(--radius-md); }
}

.expense-budget-header { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--border); }
.form-sheet .split { grid-template-columns: 1fr; }

.stop:not(.stop--selected) .stop__move { display: none; }
@media (max-width: 639px) {
    .ai-fab { bottom: calc(88px + env(safe-area-inset-bottom)); }
    .home-postcard { min-height: 260px; border-radius: var(--radius-md); }
    .home-postcard .trip-card__poster { position: absolute; inset: 0; height: 100%; min-height: 0; }
    .home-postcard .trip-card__body { position: relative; padding: var(--space-xl); background: transparent; gap: var(--space-md); }
    .home-postcard .trip-card__title { font-size: 1.6rem; line-height: 1.25; color: var(--brand-strong); }
}

.expense-options { grid-column: 1 / -1; }
.expense-options > summary { min-height: 44px; align-content: center; cursor: pointer; color: var(--text-muted); }
.expense-options[open] { display: flex; flex-direction: column; gap: var(--space-md); }

/* Calm planning workspace. The clock and activity lead; secondary facts unfold. */
.button { min-height: var(--control-height); }
.button--icon { min-width: var(--control-height); }
.plan-layout .select { min-height: var(--control-height); font-size: var(--font-secondary); }
.trip-room-panel { animation-duration: 160ms; }
.trip-room-header { margin-bottom: var(--space-sm); }
.trip-room-header__meta { gap: var(--space-sm); }
.trip-room-header__meta .page__subtitle { font-size: var(--font-secondary); }
.trip-details { border-top: 0; margin-block: 0 var(--space-sm); }
.trip-details > summary {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-block: 0;
    font-size: var(--font-secondary);
    font-weight: 400;
}
.trip-details > summary::before { content: "+"; color: var(--text-muted); }
.trip-details[open] > summary::before { content: "−"; }
.trip-details__preview { color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.trip-section-nav { margin-bottom: var(--space-md); }
.plan-navigation { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.plan-navigation .day-nav { flex: 1; min-width: 0; margin-bottom: 0; }
.plan-navigation .day-nav__list { scroll-snap-type: none; }
.plan-navigation .plan-toolbar { margin: 0; padding: 0; flex: none; }
.plan-navigation .itinerary-page-actions { flex-wrap: nowrap; }
.day-nav__day, .day-nav__all, .day-nav__candidates { min-height: 64px; border-color: transparent; background: transparent; }
.day-nav__day.is-selected, .day-nav__all.is-selected, .day-nav__candidates.is-selected {
    background: var(--brand); border-color: var(--brand); color: var(--brand-on);
}
.day-nav__day.is-selected .day-nav__number, .day-nav__all.is-selected .day-nav__number,
.day-nav__candidates.is-selected .day-nav__number { color: var(--brand-on); }
.day-nav__day.is-selected .day-nav__count i { background: var(--brand-on); }
.day-nav__number { font-size: var(--font-caption); }
.day-nav__date { font-size: var(--font-secondary); }
.day__title { justify-content: flex-start; gap: var(--space-sm); }
.day__title h2 { font-size: var(--font-subtitle); font-weight: 700; }
.day-summary > summary { cursor: pointer; color: var(--text-muted); font-size: var(--font-secondary); min-height: 32px; align-content: center; }
.day-summary { border-top: 1px solid var(--border); padding: var(--space-xs) var(--space-lg); }
.day-summary[open] .day__facts { padding-top: var(--space-xs); font-size: var(--font-secondary); line-height: 1.7; }
.timeline { --tl-time: 64px; --tl-rail: calc(var(--tl-pad) + var(--tl-time) + var(--space-md) + 12px); padding-block: var(--space-md); }
.stop { padding-block: var(--space-lg); }
.stop__time { font-size: var(--font-subtitle); padding-top: 0; }
.stop__time-source { font-size: var(--font-caption); font-weight: 400; }
.stop__name { font-size: var(--font-subtitle); font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.stop__heading { gap: var(--space-xs); }
.stop__meta, .stop__info, .leg { font-size: var(--font-secondary); }
.stop__summary { min-height: var(--control-height); }
.stop__number, .map-pin span { background: var(--brand); }
.stop__number--unplaced { background: transparent; }
.stop__number { width: 26px; height: 26px; font-size: var(--font-caption); }
.stop__actions { gap: var(--space-xs); }
.leg { color: var(--text-muted); padding-block: var(--space-xs); }
.leg--free { font-style: normal; font-size: var(--font-caption); }
.stop.stop--empty { flex-direction: column; align-items: flex-start; padding: var(--space-xxl) var(--space-xl); }
.stop--empty__text p { margin: var(--space-sm) 0 0; font-size: var(--font-secondary); max-width: 36rem; }
.plan-map__canvas, .plan-map__empty { border-radius: var(--radius-md); }
.plan-map__footer { font-size: var(--font-caption); }
.trip-connection { flex-wrap: wrap; font-size: var(--font-caption); }
.trip-connection__retry { font-size: var(--font-caption); }
.trip-connection__status { display: inline-flex; align-items: center; gap: var(--space-xs); }
.trip-section-nav .tab.active, .mobile-tabs .tab.active { background: none; border-bottom-color: var(--brand); }

/* Identical trip summaries; emphasis explains dates instead of changing size. */
.home-trip-section { display: flex; flex-direction: column; gap: var(--space-lg); }
.home-trip-section h2 { font-size: var(--font-title); }
.home-trip-section h2 > span { margin-left: var(--space-sm); font-size: var(--font-secondary); font-weight: 400; }
.home-trip-list, .past-trips__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.home-trip-list > .trip-overview-card, .trip-overview-card {
    position: relative; display: flex; align-items: stretch; padding: 0; min-height: 224px;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface-raised); color: var(--text); box-shadow: none; grid-column: auto;
    transition: border-color 150ms ease-out;
}
.home-trip-list > .home-featured { border-color: var(--brand); }
.trip-overview-card:hover { border-color: var(--brand); text-decoration: none; transform: none; box-shadow: none; }
.trip-overview-card:focus-visible { outline: 2px solid var(--brand); outline-offset: var(--space-xs); }
.trip-summary { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); padding: var(--space-xl); width: 100%; min-width: 0; }
.trip-summary__highlight { color: var(--brand-strong); font-size: var(--font-caption); font-weight: 600; }
.trip-summary .trip-card__title { color: var(--text); font-size: var(--font-title); font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.trip-summary__destination { color: var(--text-muted); font-size: var(--font-body); overflow-wrap: anywhere; }
.trip-summary__dates { color: var(--text-muted); font-size: var(--font-secondary); font-variant-numeric: tabular-nums; }
.trip-summary__footer { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.trip-summary__status { color: var(--brand-strong); font-size: var(--font-secondary); }
.trip-overview-card .trip-card__poster { display: none; background: none; }
.trip-overview-card .trip-memory-card.has-photo .trip-card__poster { display: block; height: 160px; }
.trip-overview-card .trip-card__link { height: 100%; }
.trip-overview-card .trip-memory-frame { transition-duration: 180ms; }
.past-trips { margin-top: var(--space-sm); }
.past-trips > summary { padding-block: var(--space-lg); }
.home-empty { background: var(--surface-raised); box-shadow: none; }

@media (min-width: 1024px) {
    .plan-layout { grid-template-columns: minmax(0, 1.1fr) minmax(340px, 1fr); gap: var(--space-xl); }
    .plan-map-column { top: 84px; }
    .plan-map__canvas { height: clamp(360px, 52vh, 560px); min-height: 360px; max-height: 560px; }
    .plan-map__empty { min-height: 360px; }
}
@media (max-width: 1023px) {
    .plan-layout[data-view="split"] .plan-map-column { order: 0; }
    .plan-views { gap: var(--space-xs); margin-bottom: var(--space-md); }
}
@media (max-width: 640px) {
    .home-trip-list, .past-trips__grid { grid-template-columns: minmax(0, 1fr); }
    .home-trip-list > .trip-overview-card { min-height: 224px; }
    .trip-room-header h1 { font-size: var(--font-display); }
    .trip-details > summary { flex-wrap: wrap; }
    .trip-details__preview { flex: 1; }
    .day__title h2 { flex-basis: 100%; }
    .day-summary > summary { min-height: var(--control-height); }
    .timeline { --tl-time: 52px; --tl-rail: calc(var(--tl-pad) + var(--tl-time) + var(--space-sm) + 12px); }
    .stop__time { font-size: var(--font-body); }
    .stop__name { font-size: var(--font-body); }
    .mobile-tabs { margin-bottom: var(--space-sm); }
    .mobile-tabs .tab { font-size: var(--font-secondary); line-height: 1.35; }
    .plan-navigation { margin-bottom: var(--space-sm); }
    .plan-views .button { padding-inline: var(--space-sm); font-size: var(--font-secondary); }
    .plan-navigation .itinerary-page-actions > .button { padding-inline: var(--space-sm); }
}
/* Trip entry: destinations and photos first, with details revealed as needed. */
.entry-icon { width: 22px; height: 22px; flex: none; vertical-align: middle; }
.entry-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.entry-fieldset legend { margin-bottom: var(--space-sm); font-weight: 600; }
.choice-chip { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); }
.entry-disclosure > summary { padding-block: var(--space-md); cursor: pointer; color: var(--text-muted); }
.entry-disclosure[open] > .field { margin-top: var(--space-sm); }
.search-input { position: relative; display: flex; align-items: center; width: 100%; }
.search-input > .entry-icon { position: absolute; left: var(--space-md); color: var(--text-muted); pointer-events: none; }
.search-input > input { padding-inline-start: var(--space-xxl); width: 100%; }
.new-journey { max-width: 640px; }
.journey-builder { display: block; }
.journey-step-header { display: flex; justify-content: space-between; font-size: var(--font-secondary); }
.journey-context, .journey-date-summary { margin: 0; overflow-wrap: anywhere; }
.journey-search { display: block; }
.pace-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.pace-choice { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding: var(--space-lg) var(--space-sm); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.pace-choice .entry-icon { width: 32px; height: 32px; }
.pace-choice.is-selected { border-color: var(--brand); background: var(--brand-soft); }
.pace-choice__check { position: absolute; right: var(--space-sm); top: var(--space-xs); color: var(--brand-strong); }
.pace-choice .small { text-align: center; font-size: var(--font-caption); }
.date-calendar { max-width: 420px; width: 100%; margin-inline: auto; }
.date-calendar__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); }
.date-calendar__weekdays, .date-calendar__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.date-calendar__weekdays { text-align: center; color: var(--text-muted); font-size: var(--font-caption); padding-block: var(--space-sm); }
.date-calendar__day { height: 44px; min-width: 0; border: 1px solid transparent; background: transparent; color: var(--text); font: inherit; cursor: pointer; border-radius: var(--radius-xs); }
.date-calendar__day:hover { border-color: var(--brand); }
.date-calendar__day[aria-current="date"] { text-decoration: underline; text-underline-offset: 4px; }
.date-calendar__day.is-endpoint { background: var(--brand); color: var(--brand-on); }
.date-calendar__day.is-in-range { background: var(--brand-soft); color: var(--brand-strong); border-radius: 0; }
.date-calendar__summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); min-height: 44px; align-items: center; margin-top: var(--space-md); font-size: var(--font-secondary); }
.booking-kind-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.booking-kind-grid .choice-chip { justify-content: flex-start; min-height: 64px; }
.booking-import { margin-bottom: var(--space-lg); }
.booking-time-selection { flex-wrap: nowrap; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.booking-time-selection > .input { min-width: 0; flex: 1; border: 0; border-radius: 0; }
.booking-time-selection > .input + .input { border-inline-start: 1px solid var(--border); }
.expense-amount { margin-bottom: var(--space-xl); }
.expense-amount__controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, .5fr); align-items: stretch; border-bottom: 2px solid var(--brand); }
.expense-amount__controls .input, .expense-amount__controls .select { background: transparent; border: 0; border-radius: 0; height: 64px; }
.expense-amount__controls .input { font-size: var(--font-display); font-weight: 700; }
.expense-amount__controls .select { font-size: var(--font-body); }
.expense-currency-notice { border-top: 1px solid var(--border); padding-top: var(--space-md); }
.packing-empty { padding-block: var(--space-md); }
.packing-empty p { margin: var(--space-xs) 0 0; }
.packing-progress { width: 100%; height: 6px; accent-color: var(--brand); margin-block: var(--space-sm); }
.packing-dismiss { color: var(--text-muted); font-size: var(--font-secondary); }
.packing-added { color: var(--brand-strong); font-size: var(--font-secondary); margin: 0; }
.trip-overview-card--photo { display: flex; flex-direction: column; min-height: 144px !important; overflow: hidden; }
.trip-overview-card--photo > .trip-card__link { flex: 1; height: auto; color: inherit; text-decoration: none; }
.trip-overview-card--photo .trip-summary { padding: var(--space-lg); gap: var(--space-xs); min-height: 128px; }
.trip-overview-card--photo .trip-summary .trip-card__title { font-size: var(--font-subtitle); }
.trip-overview-card--photo .trip-summary__destination { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trip-cover { position: relative; width: 100%; }
.trip-cover__images { position: relative; height: 128px; }
.trip-cover__frame { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 180ms ease-out; }
.trip-cover__frame.is-current { opacity: 1; pointer-events: auto; }
.trip-cover__frame > a { display: block; width: 100%; height: 100%; }
.trip-cover__images img { width: 100%; height: 100%; object-fit: cover; }
.trip-cover__credit { margin: 0; color: var(--text-muted); overflow-wrap: anywhere; }
.trip-cover__credit a { color: inherit; }
.trip-cover__change, .trip-cover__credits, .trip-cover__playback { position: absolute; z-index: 2; margin: 0; min-height: 44px; background: var(--surface-raised); color: var(--text); border: 1px solid var(--border); }
.trip-cover__change { top: var(--space-sm); right: var(--space-sm); width: 44px; }
.trip-cover__credits { bottom: var(--space-sm); left: var(--space-sm); padding-inline: var(--space-sm); font-size: var(--font-caption); }
.trip-cover__playback { bottom: var(--space-sm); right: var(--space-sm); width: 44px; }
.trip-cover--empty + .trip-card__link .trip-card__title { padding-inline-end: 44px; }
@media (prefers-reduced-motion: reduce) {
    .trip-cover__frame { transition: none; }
    .trip-cover__playback { display: none; }
}
.cover-photo-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.cover-photo-picker button { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 0; overflow: hidden; cursor: pointer; }
.cover-photo-picker img { width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 640px) {
    .journey-builder__content { padding: var(--space-lg); }
    .pace-choice { padding-block: var(--space-lg); }
    .trip-cover__images { height: 128px; }
    .booking-time-selection > .input { font-size: var(--font-secondary); padding-inline: var(--space-sm); }
}

.pace-choice .small { word-break: keep-all; text-wrap: balance; }
.packing-demo { margin-top: var(--space-xl); }
.trip-overview-card--photo { gap: 0; justify-content: flex-start; align-items: stretch; }
/* Seven 44px day targets also fit the narrowest supported phone viewport. */
@media (max-width: 360px) {
    .journey-builder[data-step="2"] { border: 0; overflow: visible; background: transparent; }
    .journey-builder[data-step="2"] .journey-builder__content { padding-inline: 0; }
    .journey-builder[data-step="2"] .date-calendar { width: calc(100% + 2 * var(--space-md)); max-width: none; margin-inline: calc(-1 * var(--space-md)); }
}