/* rendez-vous.css - Meeting point tool (index.html) */

/* =============================================
   FORM CONTROLS AND THEIR LISTS
   ============================================= */
/* Muted detail line under a suggestion or a trip step */
.address-detail,
.trip-step-detail { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }

/* Form controls and the lists they open (Rendez-vous) */
.location-field input,
.location-field select,
.stepper input,
.slot-button {
    color: var(--color-text-primary);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.address-options,
.slot-options {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1000; /* above the Leaflet map panes */
    overflow-y: auto;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-popup);
    font-family: var(--font-sans);
    color: var(--color-text-primary);
}

/* =============================================
   LOCATION (meeting point prototype)
   ============================================= */
.location-banner {
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-orange);
    border-radius: var(--radius-lg);
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

/* Warning inside the results: same look as the banner */
.location-warning {
    margin: 0.5rem 0 1rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-orange);
    border-radius: var(--radius-lg);
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    font-size: var(--text-md);
}

/* Keys: one compact line with their state, the form only when unfolded */
.location-keys {
    margin-bottom: 1.5rem;
    padding-block: 0;

    &[open] { padding-bottom: 1.25rem; }
}
/* The whole line can be tapped (44 px at least), not only its text */
.location-keys summary {
    min-height: 44px;
    padding-block: 0.65rem;
    cursor: pointer;
}
.location-keys-summary {
    margin-left: 0.5rem;
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: 400;
    color: var(--color-text-muted);
}
.location-keys-form { display: grid; gap: 0.9rem; margin-top: 1rem; max-width: 40rem; font-size: var(--text-md); }
.location-keys-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* Settings below the keys: transit engine, number of candidates (a digit: a narrow list) */
.location-candidates { margin-top: 0.25rem; }
.location-field.location-candidates select { width: 5rem; align-self: start; }
/* The transit engine, below the keys */
.location-keys .location-categories { margin-top: 1rem; border-top: 1px solid var(--color-border); }

.page-header--compact {
    padding: calc(var(--nav-height) + 2rem) 0 1.5rem;

    @media (max-width: 768px) {
        /* Phones (designed on a Galaxy A33, 412 x 915 CSS px) */
        padding: calc(var(--nav-height) + 1.25rem) 0 1rem;
    }
}
.page-header--compact .page-header-intro { margin-top: 0.5rem; }
/* Large screens: a smaller title with the intro on its line */
@media (min-width: 1200px) {
    .page-header--compact { padding: calc(var(--nav-height) + 1.25rem) 0 1rem; }
    .page-header--compact .container { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.5rem; }
    .page-header--compact .page-header-label { flex-basis: 100%; }
    .page-header--compact .page-header-title { font-size: 1.8rem; }
    .page-header--compact .page-header-intro { margin-top: 0; }
}

/* Sections are flex items so that the results can come before the map on phones */
.location-layout {
    display: flex;
    flex-direction: column;
    /* Above the footer (also z-index 1, later in the page): the slot and address lists may
       reach over it on a short page */
    z-index: 2;
}

/* Large screens: form, progress and results on the left; the map on the right, staying in view
   while the page scrolls. The page (navigation and footer included) is wider than the others to
   give both room */
@media (min-width: 1200px) {
    .page-wide { --max-width: 1440px; }
    .location-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 1.5rem;
        align-items: start;
    }
    .location-layout > *,
    .location-form > * { grid-column: 1; }
    .location-layout > .location-map-card {
        grid-column: 2;
        grid-row: 1 / span 10;
        position: sticky;
        top: calc(var(--nav-height) + 1rem);
    }
    /* The map's card fits in the screen next to the footer: at the bottom of a short page, it
       would otherwise be pushed up with the end of the grid, its header under the navigation */
    .location-layout .location-map { height: calc(100vh - var(--nav-height) - 18rem); }
}
/* Auto-scrolled sections stop below the fixed navigation */
#location-progress,
#location-results { scroll-margin-top: calc(var(--nav-height) + 1rem); }

/* The participants and meeting cards make one form: it adds no box of its own, so its cards
   are laid out with the page's other cards */
.location-form { display: contents; }
.location-card {
    margin-bottom: 1.5rem;
    /* Layouts below follow the card's own width: it may share the screen with the map */
    container-type: inline-size;
}
.location-card-hint { margin: -0.5rem 0 0.75rem; }

/* Wide card: two participants per row */
#participants {
    @container (min-width: 860px) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2rem;
    }
}

/* One participant: legend (its numbered disc), address and remove button, then the modes;
   narrow card: the modes under the disc too */
.participant {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "legend address remove"
        ". modes modes";
    align-items: start;
    gap: 0.6rem 0.75rem;
    /* A fieldset never gets narrower than its content by default: with a larger system font
       (Firefox Android follows it), the inputs pushed it out of its card */
    min-inline-size: 0;
    padding: 0.75rem 0;
    border: none;
    border-top: 1px solid var(--color-border);

    @container (max-width: 519px) {
        column-gap: 0.5rem;
        grid-template-areas:
            "legend address remove"
            "modes modes modes";
    }
}
.participant > .participant-address { grid-area: address; }
.participant > .participant-options { grid-area: modes; }
.participant > [data-action="remove"] { grid-area: remove; justify-self: end; align-self: center; }

.participant-legend {
    float: left;
    grid-area: legend;
    align-self: start;
    /* Level with the address input (centered on its height) */
    display: flex;
    align-items: center;
    height: 2.6rem;
}
.participant-number {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--participant);
    color: #FFFFFF;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
}

.participant-address {
    position: relative;
    /* Scrolled to on touch screens: stop below the fixed navigation */
    scroll-margin-top: calc(var(--nav-height) + 0.5rem);
}
.address-group {
    position: relative;
    display: flex;
}
.address-group input { border-start-end-radius: 0; border-end-end-radius: 0; }
.address-group .location-button--icon {
    height: auto;
    border-left: none;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    background: var(--color-bg);
}
.participant--located .address-group > * { border-color: var(--color-green); }

/* Participant placed by the next click on the map: its color on the left; the negative margin
   keeps the card's content aligned with the rest of the form */
.participant--active {
    margin-inline: -0.75rem;
    padding-inline: 0.75rem;
    box-shadow: inset 3px 0 0 var(--participant);
    background: color-mix(in srgb, var(--participant) 6%, transparent);
}

/* Modes, then the people stepper on the same line when there is room (after bus/métro on a phone):
   the modes' group adds no box of its own */
.participant-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.participant-options > .participant-modes { display: contents; }

/* People leaving from the participant's place: − [n] + */
.stepper {
    display: inline-flex;
    align-items: center;
    margin-inline-start: auto;
    gap: 0.25rem;
}
.stepper-button {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
    line-height: 1;
    cursor: pointer;

    &:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); }
    &:disabled { opacity: 0.4; cursor: default; }
    &:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

    @media (max-width: 768px) {
        width: 44px;
        height: 44px;
    }
}
.stepper input {
    width: 3ch;
    box-sizing: content-box;
    padding: 0.4rem 0.25rem;
    font: inherit;
    font-size: var(--text-md);
    font-variant-numeric: tabular-nums;
    text-align: center;
    /* No spin buttons: the − and + buttons are bigger targets */
    appearance: textfield;

    /* 16 px at least, or mobile browsers zoom in on focus */
    @media (max-width: 768px) { font-size: var(--text-2xl); }
    &:focus { outline: 2px solid var(--color-accent); outline-offset: -1px; }
    &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { appearance: none; margin: 0; }
}
.stepper-unit { order: -1; color: var(--color-text-muted); }

/* Folded while there is one person and it was not opened: the chip only */
.stepper > .people-open { display: none; }
.participant-people:not(.participant-people--open) {
    & > * { display: none; }
    & > .people-open { display: inline-flex; padding-inline: 0.75rem; font-variant-numeric: tabular-nums; }
}

/* Under the last participant, on its own line, after the same separator as between participants */
#participants:has(+ .participant-add:not([hidden])) { border-bottom: 1px solid var(--color-border); }
.participant-add { margin-top: 0.75rem; }

.participant-hint {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);

    &:empty { display: none; }
}
.participant--located .participant-hint { color: var(--color-green); }

.address-options {
    top: calc(100% + 0.25rem);
    max-height: 16rem;
    font-size: var(--text-md);
}
.address-options li { padding: 0.5rem 0.75rem; cursor: pointer; }
.address-options li[aria-selected="true"],
.address-options li[data-index]:hover { background: var(--color-surface-hover); }
.address-options .address-empty { cursor: default; color: var(--color-text-muted); }
.address-tag {
    margin-left: 0.25rem;
    padding: 0 0.35rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface-hover);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--color-text-secondary);
}


/* Toggle chips: a whole pill to click or tap; the checkbox stays in the page (keyboard,
   screen readers) but is visually hidden */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.5rem;
    padding: 0.4rem 0.95rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font-size: var(--text-md);
    color: var(--color-text-secondary);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;

    @media (max-width: 768px) {
        min-height: 44px;
    }
}
.chip input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.chip:hover { border-color: var(--color-accent); }
.chip:has(input:checked)::before { content: '✓'; font-weight: 700; }
.chip:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.chip:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.chip:has(input:disabled):hover { border-color: var(--color-border); }

.location-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
}
.location-field input,
.location-field select {
    /* Fill the field and let it shrink: an input's natural width is 20 characters */
    width: 100%;
    min-width: 0;
    font: inherit;
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    padding: 0.5rem 0.65rem;

    @media (max-width: 768px) {
        /* 16 px at least, or mobile browsers zoom in on focus */
        font-size: var(--text-2xl);
    }
}
.location-field input:focus,
.location-field select:focus { outline: 2px solid var(--color-accent); outline-offset: -1px; }

/* Arrival slot: a button opening a list of about 10 ranges */
.slot-field { position: relative; }
.slot-button {
    min-width: 9.5rem;
    padding: 0.5rem 2rem 0.5rem 0.65rem;
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    text-align: left;
    cursor: pointer;

    @media (max-width: 768px) {
        width: 100%;
        min-height: 44px;
        font-size: var(--text-2xl);
    }
}
.slot-button::after {
    content: '▾';
    position: absolute;
    right: 0.75rem;
    color: var(--color-text-muted);
}
.slot-button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -1px; }
.slot-options {
    top: 100%;
    margin-top: 0.25rem;
    max-height: 22.5rem; /* 10 ranges of 2.25rem */
    font-size: var(--text-lg);

    @media (max-width: 768px) {
        max-height: calc(10 * 44px);
        font-size: var(--text-2xl);
    }
}
.slot-options:focus { outline: none; }
.slot-options li {
    display: flex;
    align-items: center;
    height: 2.25rem;
    padding: 0 0.75rem;
    cursor: pointer;

    @media (max-width: 768px) {
        height: 44px;
    }
}
.slot-options li:hover,
.slot-options li[aria-selected="true"] { background: var(--color-surface-hover); }
.slot-options li[aria-selected="true"] { font-weight: 500; color: var(--color-accent-light); }

.location-button {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    padding: 0.55rem 0.9rem;
    color: var(--color-accent);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s ease, background 0.2s ease;

    @media (max-width: 768px) {
        min-height: 44px;
    }
}
.location-button:hover:not(:disabled) { border-color: var(--color-accent); background: var(--color-surface-hover); }
.location-button:disabled { opacity: 0.5; cursor: default; }
.chip:has(input:checked),
.location-button--primary { color: var(--color-on-accent); background: var(--color-accent); border-color: var(--color-accent); }
.location-button--primary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--color-accent-light); }
/* Blocked: looks disabled but stays clickable, to say why */
.location-button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
/* Square button holding an icon, as tall as an input */
.location-button--icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
}
.participant-remove { padding: 0 0.5rem; font-size: var(--text-2xl); line-height: 1.6; }
.location-button--ghost {
    border-color: transparent;
    color: var(--color-text-muted);
    justify-self: end;

    @media (max-width: 768px) {
        justify-self: start;
    }
}

/* Place and time: place types and arrival slot side by side (stacked when narrow), the button
   below them across the card */
.location-meeting-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 1rem 2rem;
}
.location-meeting .location-categories { padding: 0; }
.location-submit { width: 100%; min-height: 2.75rem; margin-top: 1.25rem; }

.location-categories {
    padding: 1rem 0;
    border: none;
}
/* Floated so it sits inside the fieldset, not on its top border */
.location-categories legend {
    float: left;
    width: 100%;
    margin-bottom: 0.5rem;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
}
/* Below the floated legend, full width (a flex box beside a float only gets what is left) */
.location-categories .chips { clear: both; }

.location-progress { margin-bottom: 1.5rem; }

/* Settings: view and score side by side, stacked when narrow */
.location-settings-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2rem;
}
.location-settings-row > fieldset { flex: 1 1 18rem; }
.location-settings-row .location-muted { margin-top: 0.4rem; }

/* Practical view: one progress bar; demonstrator view: the steps, the API calls and what the
   map shows of the algorithm (barycenter, other candidates) */
.progress-simple {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}
.progress-simple progress { flex: 1 1 12rem; height: 0.5rem; accent-color: var(--color-accent); }
.location-layout:not(.location--demo) :is(.progress-steps, .location-calls-panel, .demo-only) { display: none; }
.location--demo .progress-simple { display: none; }

.location-calls-panel summary {
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
}
.location-calls-panel[open] summary { margin-bottom: 0.5rem; }

.progress-steps {
    list-style: none;
    margin-bottom: 1rem;
    font-size: var(--text-md);
}
.progress-step {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    padding: 0.35rem 0;
}
.progress-step::before {
    flex: none;
    width: 1.2rem;
    font-family: var(--font-mono);
    text-align: center;
}
.progress-step[data-state="pending"]         { color: var(--color-text-muted); }
.progress-step[data-state="pending"]::before { content: '·'; }
.progress-step[data-state="running"]::before { content: '◌'; color: var(--color-accent); animation: progress-spin 1s linear infinite; }
.progress-step[data-state="done"]::before    { content: '✓'; color: var(--color-green); }
.progress-step[data-state="error"]           { color: var(--color-red-dark); }
.progress-step[data-state="error"]::before   { content: '✕'; }

@keyframes progress-spin { to { transform: rotate(360deg); } }

.location-calls {
    display: grid;
    gap: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
}
.location-calls-row { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
.location-calls dt {
    min-width: 12rem;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--color-text-secondary);

    @media (max-width: 768px) {
        min-width: 0;
        width: 100%;
    }
}

.location-map-card {
    margin-bottom: 1.5rem;

    @media (max-width: 768px) {
        order: 2;
    }
}
/* Data and routing credits: at the bottom of the page, after the results on phones too */
.location-sources {
    margin-top: 1rem;

    @media (max-width: 768px) {
        order: 3;
    }
}
.location-map-hint { margin-bottom: 0.5rem; font-size: var(--text-sm); }
.location-map--picking:not(.leaflet-dragging) { cursor: crosshair; }
.participant-marker {
    display: grid;
    place-items: center;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.35);
    color: #FFFFFF;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
}
/* More than one person leaving from there: ×3 next to the disc */
.participant-marker[data-people]:not([data-people=""])::after {
    content: attr(data-people);
    position: absolute;
    left: calc(100% - 4px);
    bottom: calc(100% - 8px);
    padding: 0 4px;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
    color: #0C1A2E;
    font-size: 10px;
    line-height: 14px;
}
.participant-marker--draggable { cursor: grab; }
.location-map--dragging,
.location-map--dragging .leaflet-interactive { cursor: grabbing; }
.location-map {
    height: 440px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    /* Own stacking context: Leaflet's panes and controls (z-index 400 to 1000) stay inside the
       map instead of covering the dropdown lists and the fixed navigation */
    isolation: isolate;

    @media (max-width: 768px) {
        height: 340px;
    }
}

.location-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.location-swatch--participant {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-right: 0.15rem;
    background: #2563EB;
    color: #FFFFFF;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    vertical-align: middle;
}
.location-swatch--center      { background: #0C1A2E; width: 6px; height: 6px; }
/* Proposal pin, on the map, in its legend and in the results: a square with one sharp corner,
   turned to point down, and its number turned back; places are pins, participants discs */
.rank-pin {
    display: inline-grid;
    place-items: center;
    width: var(--pin-size);
    height: var(--pin-size);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--color-text-primary);
    color: var(--color-on-accent);
    font-family: var(--font-mono);
    font-weight: 700;

    > span { transform: rotate(45deg); }
}
.location-swatch--rank { --pin-size: 14px; margin-inline: 0.1rem 0.25rem; font-size: 9px; vertical-align: middle; }
/* The Leaflet icon only places the pin: Leaflet sets its own transform on it */
.rank-marker > .rank-pin {
    --pin-size: 26px;
    border: 2px solid var(--color-bg);
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.35);
    font-size: 13px;
}
.rank-pin--selected { background: #EA580C; color: #FFFFFF; }
/* Candidates that are not proposals (demonstrator view): small and grey, under the others */
.rank-pin--small,
.location-swatch--candidate { background: #7A90AA; }
.rank-marker > .rank-pin--small { --pin-size: 14px; border-width: 1px; }
.location-swatch--candidate { --pin-size: 10px; }

.location-best { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }

.location-place-select { min-width: min(100%, 22rem); }
.location-ranking { margin: -0.5rem 0 0.75rem; }

/* The best places: one button each, the chosen one highlighted */
.proposals {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
    list-style: none;
}
.proposal {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.15rem 0.6rem;
    width: 100%;
    height: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.proposal:hover { border-color: var(--color-accent); background: var(--color-surface-hover); }
.proposal:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.proposal[aria-pressed="true"] { border-color: #EA580C; box-shadow: inset 0 0 0 1px #EA580C; }
.proposal-rank {
    --pin-size: 1.4rem;
    grid-row: span 2;
    align-self: center;
    margin-inline: 0.1rem;
    font-size: var(--text-xs);
}
.proposal[aria-pressed="true"] .proposal-rank { background: #EA580C; color: #FFFFFF; }
.proposal-name { font-weight: 500; overflow-wrap: anywhere; }
.proposal-times { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-text-secondary); }

/* Links to the chosen place and the share button */
.location-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
a.location-button { display: inline-flex; align-items: center; text-decoration: none; }

.trip-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    align-items: start;
    gap: 1rem;
}
.trip-card {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--participant);
    border-radius: var(--radius-md);
    font-size: var(--text-md);
}
.trip-card-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
    font-size: var(--text-xl);
    font-weight: 500;
}
.trip-card-people { font-size: var(--text-md); font-weight: 600; color: var(--color-text-secondary); }
/* Mode and time: what the practical view is read for */
.trip-card-mode { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-primary); }
.trip-card-lines { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; font-size: var(--text-xs); color: var(--color-text-muted); }

/* Practical view: the steps folded under the title */
.trip-card:has(.trip-details) { cursor: pointer; }
.trip-details[open] > :not(summary) { cursor: auto; }
.trip-details summary {
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
}
.trip-details[open] summary { margin-bottom: 0.6rem; }
.trip-card-direct { margin-bottom: 0.5rem; color: var(--color-text-secondary); }

.trip-steps { list-style: none; margin-bottom: 0.6rem; }
.trip-step {
    position: relative;
    padding: 0.3rem 0 0.3rem 1.1rem;
    border-left: 2px solid var(--color-border);
}
.trip-step::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 0.75rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--participant);
}
.trip-step--time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-secondary); }
.trip-step--walk { color: var(--color-text-secondary); }

.line-badge {
    display: inline-block;
    min-width: 1.6rem;
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-sm);
    background: var(--color-text-secondary);
    color: var(--color-on-accent);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    text-align: center;
}

.location-muted { color: var(--color-text-muted); font-size: var(--text-sm); }

/* =============================================
   RESPONSIVE (mobile rules without a desktop rule
   of their own; the others are nested in their rule)
   ============================================= */
@media (max-width: 768px) {
    .page-header--compact .page-header-title { font-size: 1.6rem; }
    #location-results { order: 1; margin-bottom: 1.5rem; }
    .location-meeting-fields > .slot-field,
    .location-place-select { width: 100%; }
}