/* =========================================================================
   SoCal Transit Connections — trip planner
   ---------------------------------------------------------------------
   Loaded after styles.css, which owns the reset, the :root tokens, the
   header, the footer and .container. Nothing here redefines a token.

   Mobile first. The form is one column to 768px, then goes horizontal.
   The results list stays ONE column at every width — see docs/TRIP-PLANNER.md
   §5 for why: a wide screen buys a roomier row, not more columns.
   ========================================================================= */

/* ------------------------------------------------------------------ hero */

.tp-hero {
    padding: 40px 0 24px;
}

.tp-hero__eyebrow {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent);
}

.tp-hero h1 {
    font-size: clamp(28px, 6vw, 40px);
    margin-bottom: 12px;
}

.tp-hero__lede {
    max-width: 46ch;
    color: var(--ink-muted);
    font-size: 17px;
}

/* ------------------------------------------------------------------ form */

.tp-formwrap {
    padding-bottom: 40px;
}

.tp-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 20px;
}

/* --- generic field */

.tp-field {
    display: block;
    position: relative;
}

.tp-field > label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ink-muted);
}

.tp-field input[type="date"],
.tp-field input[type="time"],
.tp-place__input {
    width: 100%;
    /* 16px minimum: anything smaller makes iOS Safari zoom on focus. */
    font: inherit;
    font-size: 16px;
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 12px 14px;
    min-height: 48px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tp-field input[type="date"]:focus,
.tp-field input[type="time"]:focus,
.tp-place__input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

/* --- from / to */

.tp-endpoints {
    display: grid;
    gap: 14px;
    position: relative;
}

.tp-place {
    position: relative;
}

.tp-place__input {
    padding-right: 44px;
}

.tp-place__clear,
.tp-place__status {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tp-place__clear {
    border: 0;
    background: none;
    color: var(--ink-faint);
    border-radius: 50%;
    padding: 0;
}

.tp-place__clear:hover { color: var(--ink); background: var(--surface-sunk); }
.tp-place__clear svg { width: 15px; height: 15px; }

/* The tick only appears once a place has real coordinates, so it means
   "this is pinned down", not "you typed something". */
.tp-place__status {
    right: 40px;
    color: var(--good);
    pointer-events: none;
}
.tp-place__status svg { width: 15px; height: 15px; }

/* --- suggestions */

.tp-place__list {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    max-height: 300px;
    overflow-y: auto;
}

.tp-place__opt {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    min-height: 44px;
    justify-content: center;
}

.tp-place__opt--active,
.tp-place__opt:hover {
    background: var(--accent-soft);
}

.tp-place__opt-main {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
}

.tp-place__opt-sub {
    font-size: 13px;
    color: var(--ink-faint);
    line-height: 1.3;
}

.tp-place__note {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--ink-muted);
}

/* --- swap */

.tp-swap {
    justify-self: end;
    width: 44px;
    height: 44px;
    margin: -6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    border-radius: 50%;
    color: var(--ink-muted);
    transition: color 0.15s ease, border-color 0.15s ease, transform 0.2s ease;
}

.tp-swap:hover:not(:disabled) {
    color: var(--accent);
    border-color: var(--accent);
    transform: rotate(180deg);
}

.tp-swap:disabled { opacity: 0.45; cursor: default; }
.tp-swap svg { width: 18px; height: 18px; }

/* --- when */

.tp-when {
    border: 0;
    padding: 0;
    margin: 18px 0 0;
    display: grid;
    gap: 14px;
}

.tp-segmented {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--surface-sunk);
    border-radius: var(--radius-pill);
}

.tp-segment {
    flex: 1 1 0;
    /* min-width:0 lets a flex item shrink below its content width. Without
       it the three labels force the row wider than a 320px screen. */
    min-width: 0;
    min-height: 40px;
    padding: 8px 6px;
    border: 0;
    background: none;
    border-radius: var(--radius-pill);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-muted);
    transition: background 0.15s ease, color 0.15s ease;
}

.tp-segment--on {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.tp-datetime {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Native date/time inputs carry a wide intrinsic minimum. A grid track is
   auto-min by default, so without this they refuse to shrink and push the
   page sideways on a narrow phone. */
.tp-datetime > .tp-field { min-width: 0; }
.tp-datetime input { min-width: 0; }

/* --- prefer rail */

.tp-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 18px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}

.tp-check:hover { border-color: var(--border-strong); }

/* Real checkbox, visually replaced — keeps keyboard and AT behaviour. */
.tp-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tp-check__box {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 1.5px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tp-check__box svg { width: 14px; height: 14px; }

.tp-check input:checked + .tp-check__box {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.tp-check input:focus-visible + .tp-check__box {
    outline: 3px solid var(--accent-ring);
    outline-offset: 2px;
}

.tp-check__text {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.tp-check__text small {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-muted);
}

/* --- errors, submit, scope */

.tp-errors {
    margin-top: 16px;
    padding: 12px 14px;
    background: var(--signal-soft);
    border: 1px solid var(--signal);
    border-radius: var(--radius);
    font-size: 15px;
}

.tp-errors p { margin: 0 0 4px; }
.tp-errors p:last-child { margin-bottom: 0; }

.tp-submit {
    width: 100%;
    margin-top: 18px;
    min-height: 52px;
    font-size: 17px;
}

.tp-scope {
    margin: 12px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--ink-faint);
}

/* --------------------------------------------------------------- results */

.tp-results {
    padding-bottom: 56px;
    /* The site header is sticky, so anything scrolled to lands underneath it.
       submit() scrolls here, which was putting the option count and the walk
       toggle behind the header. Below 400px the header wraps to two rows and
       needs more clearance. */
    scroll-margin-top: 104px;
}

@media (min-width: 400px) {
    .tp-results { scroll-margin-top: 82px; }
}

.tp-status {
    font-size: 16px;
    color: var(--ink-muted);
    padding: 8px 0;
}

.tp-errors__detail {
    font-size: 13px;
    color: var(--ink-muted);
    margin-top: 4px;
}

.tp-empty {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
}

.tp-empty h2 { font-size: 19px; margin-bottom: 8px; }
.tp-empty p { font-size: 15px; color: var(--ink-muted); }

/* --- sort / filter toolbar
   One row from 560px up: the option count on the left, the controls pushed to
   the right by the count's auto margin. Below that the controls take their own
   full-width row under the count, because the longest sort label does not fit
   beside anything on a phone. */

.tp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.tp-toolbar__count {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0;
    margin-right: auto;
}

.tp-toolbar__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.tp-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-faint);
}

.tp-sort__label { flex: 0 0 auto; }

.tp-sort__select {
    font: inherit;
    font-size: 13px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    max-width: 100%;
    cursor: pointer;
}

.tp-sort__select:focus-visible {
    outline: 3px solid var(--accent-ring);
    outline-offset: 2px;
}

@media (max-width: 559px) {
    /* Give the select the full row on a phone: the longest label
       ("Arrives closest to your time") does not fit beside its own
       "Sort by" at 360px. */
    .tp-toolbar__controls { width: 100%; }
    .tp-sort { width: 100%; }
    .tp-sort__select { flex: 1 1 auto; min-width: 0; }
}

/* ONE column at every width. A wide screen buys a roomier row, not more
   columns — see docs/TRIP-PLANNER.md §5 for why OCTA's 4-across grid is the
   thing this page exists not to be. */
.tp-triplist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.tp-trip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tp-trip--open { border-color: var(--accent); box-shadow: var(--shadow); }

/* Whole header is the control — a 44px-plus tap target by construction. */
.tp-trip__head {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "summary chev"
        "times   chev"
        "meta    chev"
        "ribbon  chev";
    gap: 3px 12px;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    background: none;
    text-align: left;
}

/* The differentiator, above the numbers. */
.tp-trip__summary {
    grid-area: summary;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--accent);
    line-height: 1.3;
}

.tp-trip__times {
    grid-area: times;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.tp-trip__day {
    display: inline-block;
    margin-left: 6px;
    vertical-align: 2px;
    background: var(--signal-soft);
    color: var(--signal);
    border-radius: var(--radius-pill);
    padding: 1px 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.tp-trip__meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--ink-muted);
}

.tp-fare {
    background: var(--surface-sunk);
    border-radius: var(--radius-pill);
    padding: 1px 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

/* A total resting on an observed Amtrak range. Muted rather than flagged —
   the word "from" in the chip is the honest part; a colour would only say
   "something is wrong here", which is not what this means. */
.tp-fare--estimate { color: var(--ink-muted); }

.tp-ribbon {
    grid-area: ribbon;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.tp-ribbon__badge {
    display: inline-block;
    background: var(--ink-muted);
    color: #fff;
    border-radius: 5px;
    padding: 2px 7px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
}

.tp-trip__chev {
    grid-area: chev;
    align-self: center;
    width: 18px;
    height: 18px;
    color: var(--ink-faint);
    transition: transform 0.2s ease;
}

.tp-trip--open .tp-trip__chev { transform: rotate(180deg); }

/* --- ticket verdict, visible while collapsed */

.tp-verdict {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0;
    padding: 10px 16px 12px;
    background: var(--good-soft);
    border-top: 1px solid var(--border);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
}

.tp-verdict__icon { flex: 0 0 auto; font-size: 15px; line-height: 1.3; }

/* Quiet by design — a display preference, not a trip option. Lives in the
   toolbar in grey so it reads as a control on the results rather than another
   thing to decide before you get any. */
.tp-walkfilter {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-faint);
    cursor: pointer;
    user-select: none;
}

.tp-walkfilter:hover { color: var(--ink-muted); }

.tp-walkfilter input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tp-walkfilter__box {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    border: 1.5px solid var(--border-strong);
    border-radius: 4px;
    background: var(--surface);
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tp-walkfilter__box svg { width: 11px; height: 11px; }

.tp-walkfilter input:checked + .tp-walkfilter__box {
    background: var(--ink-faint);
    border-color: var(--ink-faint);
    color: #fff;
}

.tp-walkfilter input:focus-visible + .tp-walkfilter__box {
    outline: 3px solid var(--accent-ring);
    outline-offset: 2px;
}

.tp-railnote {
    margin: 0 0 12px;
    padding: 10px 14px;
    background: var(--signal-soft);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--ink);
}

/* --- the map

   Sits at the top of an expanded card: shape first, then the written
   itinerary, then the ticket. Collapsed it costs one quiet button, so a
   rider who does not want a map is not paying for one in vertical space
   either.

   The canvas is a fixed height rather than an aspect ratio. A route across
   the basin and a route across three blocks want the same amount of screen:
   what changes between them is the zoom, which fitBounds handles. */

.tp-map { margin-bottom: 14px; }

.tp-map__toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    background: none;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    padding: 6px 14px 6px 11px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tp-map__toggle:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.tp-map__toggle:focus-visible {
    outline: 3px solid var(--accent-ring);
    outline-offset: 2px;
}

.tp-map__toggle svg { width: 15px; height: 15px; flex: 0 0 auto; }

.tp-map__panel { margin-top: 10px; }

.tp-map__slot {
    height: 260px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-sunk);
}

/* The element map.js creates and moves in here. It must fill the slot: a
   Google map measures its own container, and a container with no height
   renders as a blank grey box with no error. */
.tp-map__canvas { width: 100%; height: 100%; }

@media (min-width: 700px) {
    .tp-map__slot { height: 340px; }
}

.tp-map__key,
.tp-map__error {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-faint);
}

.tp-map__error { color: var(--ink-muted); }

/* Used only when a Map ID is configured and AdvancedMarkerElement is in
   play; the no-Map-ID path draws its dots as SVG symbols instead. */
.tp-map__pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* --- ticket detail */

.tp-tickets {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.tp-tickets__head {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 10px;
}

.tp-buy, .tp-covered, .tp-conditions {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: grid;
    gap: 8px;
    font-size: 14px;
    line-height: 1.45;
}

.tp-buy li {
    padding-left: 12px;
    border-left: 3px solid var(--accent);
}

.tp-buy__why {
    display: block;
    font-size: 13px;
    color: var(--ink-muted);
}

.tp-covered li {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 6px;
    align-items: start;
}

.tp-covered__tick { color: var(--good); font-weight: 700; }

.tp-covered__note {
    display: block;
    font-size: 13px;
    color: var(--ink-muted);
}

.tp-warn {
    margin: 0 0 10px;
    padding: 10px 12px;
    background: var(--surface-sunk);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    line-height: 1.45;
}

.tp-warn--high {
    background: var(--signal-soft);
    border-left: 3px solid var(--signal);
}

.tp-warn a { margin-left: 6px; font-size: 12px; }

.tp-conditions {
    font-size: 13px;
    color: var(--ink-muted);
    padding-left: 18px;
    list-style: disc;
}

.tp-note {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--ink-muted);
    line-height: 1.45;
}

.tp-sources {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--ink-faint);
}

.tp-sources a {
    display: inline-block;
    min-width: 20px;
    margin-left: 4px;
    padding: 0 5px;
    background: var(--surface-sunk);
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
}

/* --- expanded steps */

.tp-trip__detail {
    border-top: 1px solid var(--border);
    padding: 14px 16px 16px;
}

.tp-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.tp-step {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 10px;
    align-items: start;
}

.tp-step__icon { font-size: 16px; line-height: 1.4; }
.tp-step__body { display: grid; gap: 2px; min-width: 0; }

.tp-step__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.tp-step__sub {
    font-size: 13px;
    color: var(--ink-muted);
    line-height: 1.4;
}

/* Required attribution — kept quiet but never hidden. */
.tp-step__agency { font-size: 12.5px; color: var(--ink-faint); }
.tp-step__agency a { color: var(--ink-faint); text-decoration: underline; }
.tp-step__agency a:hover { color: var(--accent); }

.tp-cost {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.tp-cost__lines {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: grid;
    gap: 8px;
    font-size: 14px;
}

.tp-cost__lines li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    align-items: baseline;
}

.tp-cost__who { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }

.tp-cost__line-id {
    font-size: 12px;
    color: var(--ink-faint);
}

.tp-cost__amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.tp-cost__amt--unknown { color: var(--signal); }

/* "free" is a PRICE, so it keeps the price weight and size and only takes the
   colour — deliberately not the uppercase small-caps treatment that
   `--covered` gets below. That one is a status ("your ticket paid for this");
   this one is the number in the column, and demoting it to a label would put
   a researched $0 in the same visual class as a caveat. */
.tp-cost__amt--free { color: var(--good); }

/* An estimate is a price too, so it keeps the price treatment — same weight,
   same column, same tabular figures. The "from " prefix is what marks it, and
   that belongs in the number rather than in a badge beside it: a rider
   scanning the column has to be able to tell $11.00 from "from $30.00"
   without reading a legend. Muted, because it is a softer claim than the
   fares either side of it, and not `--signal` red, because it is not a gap. */
.tp-cost__amt--estimate { color: var(--ink-muted); }

.tp-cost__line--covered .tp-cost__amt {
    color: var(--good);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tp-cost__why {
    grid-column: 1 / -1;
    font-size: 12.5px;
    color: var(--ink-muted);
    line-height: 1.4;
}

.tp-cost__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 15px;
}

.tp-cost__total strong { font-size: 19px; font-variant-numeric: tabular-nums; }

.tp-cost__partial {
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--ink-muted);
    line-height: 1.45;
}

/* Sits under the total rather than above it: the number is the answer, this
   is the caveat on it. Same size as `--partial`, which is its opposite number
   — that one explains a total we withheld, this one qualifies a total we gave. */
.tp-cost__estimate-note {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--ink-muted);
    line-height: 1.45;
}

.tp-cost__google {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--ink-faint);
}

.tp-trip__fare {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--ink-muted);
}

.tp-attrib {
    margin: 16px 0 0;
    font-size: 12.5px;
    color: var(--ink-faint);
}

/* ============================== 640px ================================== */

/* ============================== 400px ================================== */

@media (min-width: 400px) {
    .tp-segment { padding: 8px 10px; font-size: 14px; white-space: nowrap; }
}

/* ============================== 640px ================================== */

@media (min-width: 640px) {
    .tp-form { padding: 26px; }

    /* Swap moves between the two fields and stops taking its own row. */
    .tp-endpoints {
        grid-template-columns: 1fr auto;
        align-items: end;
        gap: 14px 12px;
    }

    .tp-endpoints > .tp-field--place:first-child { grid-column: 1; grid-row: 1; }
    .tp-swap { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }
    .tp-endpoints > .tp-field--place:last-child { grid-column: 1; grid-row: 2; }

    .tp-when {
        grid-template-columns: auto 1fr;
        align-items: end;
    }

    .tp-segmented { align-self: end; }

    .tp-submit {
        width: auto;
        min-width: 220px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================== 900px ================================== */

@media (min-width: 900px) {
    .tp-hero { padding: 56px 0 28px; }
    .tp-form { padding: 30px; }
}

/* -------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
    .tp-swap:hover:not(:disabled) { transform: none; }
    .tp-swap,
    .tp-segment,
    .tp-check__box,
    .tp-place__input { transition: none; }
}