/*
 * Standalone Trip Planner form ([ride_guide_trip_planner] / block — see
 * app/TripPlannerForm.php) and its address dropdown.
 *
 * Everything is namespaced `.rg-tp*`, so it can sit on a page next to a theme's
 * own planner without either's styles reaching the other. Colours, spacing and
 * radius come from semantic-variables.css, which defaults to the active theme's
 * theme.json presets. The baseline look of the inputs, select and button is
 * wrapped in :where(), which adds no specificity: any rule the theme has for
 * its own text inputs / selects / buttons wins over it, so the form follows the
 * host theme where the theme styles those, and still looks right where it
 * doesn't.
 *
 * Layout hooks: the form is a flex column by default. These custom properties
 * (all optional) change it, set on the form or a parent, e.g. in the block's custom CSS:
 *   --rg-tp-display          flex (default), grid, block ...
 *   --rg-tp-direction        column (default) | row
 *   --rg-tp-wrap             nowrap (default) | wrap
 *   --rg-tp-align-items      stretch (default) | flex-end | center ...
 *   --rg-tp-justify-content  flex-start (default) | space-between ...
 *   --rg-tp-margin           0 (default)
 *   --rg-tp-swap-rotate      90deg (default: the arrows point up/down); 0deg for a row
 *   --rg-tp-gap              the space between the parts: --space-sm, else 0.75em (default)
 *   --rg-tp-field-direction  column (default: label above its control) | row (label beside it)
 *   --rg-tp-field-align-items stretch (default) | center ... (the label against its control)
 *   --rg-tp-field-gap        the space between a label and its control: 0.25em (default)
 *   --rg-tp-label-width      auto (default); a width such as 8em lines the controls up in row mode
 *   --rg-tp-order-from      0 (default) - the CSS `order` of the From field; likewise
 *   --rg-tp-order-to, --rg-tp-order-swap, --rg-tp-order-advanced and --rg-tp-order-submit.
 *   Parts with the same order stay in the page's order, so e.g. `--rg-tp-order-submit: -1`
 *   puts the button first. This changes what is seen only: the tab and screen-reader order
 *   stay From, To, swap, Advanced options, button.
 *   --rg-tp-control-color    inherit (default) - the text colour of the inputs and dropdowns, for when a
 *                            panel colour (e.g. --rg-tp-advanced-color) would otherwise reach them
 *   --rg-tp-address-flex     1 1 auto (default) - the flex of the From and To fields; `1 0 100%` gives each a line
 *   --rg-tp-advanced-flex    1 0 100% (default) - the flex of the Advanced options row (its own line by default)
 * The When row (the When dropdown and the date/time group) and the date/time group inside it:
 *   --rg-tp-when-display (flex), -direction (column; row from 48em), -wrap (wrap), -align-items
 *   (stretch; flex-end from 48em), -justify-content (flex-start), -gap (--rg-tp-gap); and the same
 *   six as --rg-tp-datetime-display (flex), -direction (row), -wrap (wrap), -align-items
 *   (stretch), -justify-content (flex-start) and -gap (--rg-tp-gap).
 * The "Advanced options" panel has hooks of its own, so it can be made a dropdown that floats
 * over what follows (all optional, each defaulting to today's look):
 *   --rg-tp-advanced-position (static; absolute makes it float), -top, -right, -bottom, -left
 *   (auto), -z-index (2), -display (flex), -direction (column), -wrap (nowrap), -align-items
 *   (stretch), -justify-content (flex-start), -gap (--rg-tp-gap), -width (auto), -min-width (0),
 *   -max-width (none), -max-height (none), -overflow (visible), -margin (0), -padding-top,
 *   -padding-right, -padding-left (0), -padding-bottom (--rg-tp-gap), -color (inherit), -background (transparent),
 *   -border-top, -border-right, -border-bottom, -border-left (each a border shorthand such as
 *   `1px solid #ccc`; 0), -border-radius (0) and -box-shadow (none). While it floats
 *   (position absolute or fixed), trip-planner-form.js also closes it on Escape, on a click or
 *   tap outside it and when focus leaves it; otherwise it only opens and closes from its toggle.
 * (None of these is declared on the form, so a value set on a parent reaches it too.)
 * A side-by-side layout: direction row, wrap wrap, align-items flex-end, swap-rotate 0deg.
 *
 * Phones: controls are at least 44px tall (touch target) and 16px type (iOS
 * Safari zooms the page in on focus below 16px).
 */

.rg-tp {
    box-sizing: border-box;
    max-width: 100%;
    font-family: inherit;

    display: var(--rg-tp-display, flex);
    flex-direction: var(--rg-tp-direction, column);
    flex-wrap: var(--rg-tp-wrap, nowrap);
    align-items: var(--rg-tp-align-items, stretch);
    justify-content: var(--rg-tp-justify-content, flex-start);
    gap: var(--rg-tp-gap, var(--space-sm, 0.75em));
    margin: var(--rg-tp-margin, 0);
}
.rg-tp *,
.rg-tp *::before,
.rg-tp *::after {
    box-sizing: border-box;
}

/* The When row: the When dropdown and the date/time group. Stacked on a phone and side by
   side from 48em, unless --rg-tp-when-direction (or -align-items) says otherwise. */
.rg-tp-when {
    display: var(--rg-tp-when-display, flex);
    flex-wrap: var(--rg-tp-when-wrap, wrap);
    flex-direction: var(--rg-tp-when-direction, column);
    align-items: var(--rg-tp-when-align-items, stretch);
    justify-content: var(--rg-tp-when-justify-content, flex-start);
    gap: var(--rg-tp-when-gap, var(--rg-tp-gap, var(--space-sm, 0.75em)));
}

.rg-tp-datetime {
    display: var(--rg-tp-datetime-display, flex);
    flex-wrap: var(--rg-tp-datetime-wrap, wrap);
    flex-direction: var(--rg-tp-datetime-direction, row);
    align-items: var(--rg-tp-datetime-align-items, stretch);
    justify-content: var(--rg-tp-datetime-justify-content, flex-start);
    gap: var(--rg-tp-datetime-gap, var(--rg-tp-gap, var(--space-sm, 0.75em)));
}
.rg-tp-datetime[hidden] {
    display: none;
}
.rg-tp-datetime .rg-tp-field {
    /* A zero basis (not a width such as 8em) so that it is the field's width in a row and its
       height in a column that stays its content: share the row equally, never below what
       the label and control need, even with the label beside it. */
    flex: 1 1 0;
    min-width: fit-content;
}

/* "Advanced options": a native <details> (closed to start with), so it opens and closes
   by click, Enter or Space with no script. Left otherwise as the browser and theme draw it.
   Its own row (and the error message's) when the form is laid out as a wrapping row. */
.rg-tp-advanced {
    flex: var(--rg-tp-advanced-flex, 1 0 100%);
}
.rg-tp-advanced-toggle {
    display: revert;
    cursor: pointer;
    font-weight: 600;
    padding-block: var(--space-2xs, 0.25em);
}
/* The panel inside the disclosure. Every property is a hook (--rg-tp-advanced-*, see the
   header comment), with today's look as the default; static, it is just a column of fields,
   and `--rg-tp-advanced-position: absolute` (anchored to .rg-tp-advanced, which is
   position: relative) makes it a dropdown that floats over what follows. */
.rg-tp-advanced-fields {
    position: var(--rg-tp-advanced-position, static);
    top: var(--rg-tp-advanced-top, auto);
    right: var(--rg-tp-advanced-right, auto);
    bottom: var(--rg-tp-advanced-bottom, auto);
    left: var(--rg-tp-advanced-left, auto);
    z-index: var(--rg-tp-advanced-z-index, 2);
    display: var(--rg-tp-advanced-display, flex);
    flex-direction: var(--rg-tp-advanced-direction, column);
    flex-wrap: var(--rg-tp-advanced-wrap, nowrap);
    align-items: var(--rg-tp-advanced-align-items, stretch);
    justify-content: var(--rg-tp-advanced-justify-content, flex-start);
    gap: var(--rg-tp-advanced-gap, var(--rg-tp-gap, var(--space-sm, 0.75em)));
    width: var(--rg-tp-advanced-width, auto);
    min-width: var(--rg-tp-advanced-min-width, 0);
    max-width: var(--rg-tp-advanced-max-width, none);
    max-height: var(--rg-tp-advanced-max-height, none);
    overflow: var(--rg-tp-advanced-overflow, visible);
    margin: var(--rg-tp-advanced-margin, 0);
    padding-top: var(--rg-tp-advanced-padding-top, 0);
    padding-right: var(--rg-tp-advanced-padding-right, 0);
    padding-bottom: var(--rg-tp-advanced-padding-bottom, var(--rg-tp-gap, var(--space-sm, 0.75em)));
    padding-left: var(--rg-tp-advanced-padding-left, 0);
    color: var(--rg-tp-advanced-color, inherit);
    background: var(--rg-tp-advanced-background, transparent);
    border-top: var(--rg-tp-advanced-border-top, 0);
    border-right: var(--rg-tp-advanced-border-right, 0);
    border-bottom: var(--rg-tp-advanced-border-bottom, 0);
    border-left: var(--rg-tp-advanced-border-left, 0);
    border-radius: var(--rg-tp-advanced-border-radius, 0);
    box-shadow: var(--rg-tp-advanced-box-shadow, none);
}

.rg-tp-field {
    display: flex;
    flex-direction: var(--rg-tp-field-direction, column);
    align-items: var(--rg-tp-field-align-items, stretch);
    gap: var(--rg-tp-field-gap, var(--space-3xs, 0.25em));
    min-width: 0;
    flex: 1 1 auto;
}
/* Visual order of the form's parts (see the header comment: tab order isn't changed). */
.rg-tp-field--from {
    flex: var(--rg-tp-address-flex, 1 1 auto);
    order: var(--rg-tp-order-from, 0);
}
.rg-tp-field--to {
    flex: var(--rg-tp-address-flex, 1 1 auto);
    order: var(--rg-tp-order-to, 0);
}
.rg-tp-swap {
    order: var(--rg-tp-order-swap, 0);
}
.rg-tp-advanced {
    position: relative;
    order: var(--rg-tp-order-advanced, 0);
}
.rg-tp-submit {
    order: var(--rg-tp-order-submit, 0);
}

.rg-tp-field label {
    font-weight: 600;
    /* A set width keeps the controls lined up when the labels sit beside them. */
    flex: 0 0 auto;
    width: var(--rg-tp-label-width, auto);
}

:where(.rg-tp input[type="text"]),
:where(.rg-tp input[type="date"]),
:where(.rg-tp input[type="time"]),
:where(.rg-tp select) {
    width: 100%;
    min-height: 44px;
    padding: var(--space-xs, 0.5em) var(--space-sm, 0.75em);
    font: inherit;
    font-size: max(1em, 16px);
    color: var(--rg-tp-control-color, inherit);
}

.rg-tp input[aria-invalid="true"] {
    border-color: var(--error, #d63638);
}

.rg-tp :focus-visible {
    outline: 2px solid var(--focus-ring, currentColor);
    outline-offset: 2px;
}

/* Swap: a round icon button between the two address fields. */
.rg-tp-swap {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    cursor: pointer;
    color: inherit;
    background: transparent;
    line-height: 1;
}
.rg-tp-swap svg {
    display: block;
    /* Arrows point up/down while the fields are stacked; --rg-tp-swap-rotate: 0deg for a row. */
    transform: rotate(var(--rg-tp-swap-rotate, 90deg));
}

:where(.rg-tp .rg-tp-submit) {
    min-height: 44px;
    padding: var(--space-xs, 0.5em) var(--space-lg, 1.5em);
    font: inherit;
    font-size: max(1em, 16px);
    font-weight: 600;
    cursor: pointer;
    color: var(--button-primary-text, #fff);
    background-color: var(--button-primary-bg, var(--brand-primary, #027bff));
    border: 0;
}

.rg-tp-error {
    display: none;
    flex: 1 0 100%;
    padding: var(--space-xs, 0.5em) var(--space-sm, 0.75em);
    color: var(--error, #d63638);
    border: var(--border-width, 1px) solid currentColor;
    border-radius: var(--field-radius, 0.5em);
}
.rg-tp-error.is-visible {
    display: block;
}

/* Wider than a phone: the When and time controls in one row. */
@media (min-width: 48em) {
    .rg-tp-when {
        flex-direction: var(--rg-tp-when-direction, row);
        align-items: var(--rg-tp-when-align-items, flex-end);
    }
    .rg-tp-field--mode {
        /* A width, not a flex-basis: the basis would be a height in a column. */
        flex: 0 1 auto;
        width: 14em;
        min-width: fit-content;
    }
    .rg-tp-datetime {
        flex: 1 1 auto;
    }
}

/* Address dropdown — appended to <body> by rg-combobox.js, so it can't be
   styled through the form; the prefix is this form's own (see
   trip-planner-form.js), not the shared `places-autocomplete-*` one. */
.rg-tp-address-panel {
    position: absolute;
    z-index: var(--z-dropdown, 9999);
    margin: 0;
    display: none;
    background: var(--background, #fff);
    border: var(--border-width, 1px) solid var(--border-color, #d6d5d5);
    border-radius: var(--field-radius, 0.5em);
    box-shadow: var(--card-shadow, 0 1px 3px rgba(0, 0, 0, 0.15));
    overflow: hidden;
    font-size: max(1em, 16px);
    color: var(--foreground, #1f2933);
}
.rg-tp-address-panel.is-open {
    display: block;
}
.rg-tp-address-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
}
.rg-tp-address-option {
    margin: 0;
    padding: var(--space-xs, 0.5em) var(--space-sm, 0.75em);
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    line-height: 1.3;
}
.rg-tp-address-option.is-active,
.rg-tp-address-option:hover {
    background: var(--ink-15, #e6e6e6);
}
.rg-tp-address-recent-tag {
    margin-left: var(--space-3xs, 0.25em);
    color: var(--ink-50, #777);
    font-size: 0.8em;
}
.rg-tp-address-clear-row {
    display: none;
    border-top: var(--border-width, 1px) solid var(--border-color, #e5e5e5);
    text-align: right;
    padding: var(--space-3xs, 0.25em) var(--space-2xs, 0.375em);
}
.rg-tp-address-clear-row.is-visible {
    display: block;
}
.rg-tp-address-clear-button {
    min-height: 44px;
    margin: 0;
    padding: var(--space-3xs, 0.25em) var(--space-2xs, 0.375em);
    font-size: 0.8em;
    color: var(--ink-50, #555);
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: 0;
}