.trail-pos { display: flex; align-items: center; gap: .2rem; }

.plan-hint {
    display: flex;
    align-items: center;
    gap: .3rem;
    max-width: 320px;
    margin: .3rem 0 0 calc(30px + .45rem);
    color: var(--sand-ink);
    font-size: .8rem;
    line-height: 1.3;
    white-space: normal;
}
.plan-hint .icon { width: 14px; height: 14px; }

select[data-options-url].is-loading { cursor: progress; color: var(--ink-3); }

.weather { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--trail-bg) 45%, var(--surface)); }
.weather summary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1.25rem;
    color: var(--trail);
    font-weight: 500;
    font-size: .88rem;
    list-style: none;
    cursor: pointer;
}
.weather summary::-webkit-details-marker { display: none; }
.weather summary::after { content: ""; width: .38rem; height: .38rem; margin-left: .2rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.weather[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.weather summary:hover { color: var(--ink); }
.weather summary .icon { width: 18px; height: 18px; }
.weather__body { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; padding: .1rem 1.25rem .85rem; }
.weather__or { color: var(--ink-3); font-size: .85rem; }
.weather__convert { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.weather__convert label { color: var(--ink-2); font-size: .85rem; }
.weather__convert select { width: auto; min-height: 34px; }

.page--form-wide { max-width: 1120px; }
.family-help { margin: -.5rem 0 1rem; }
.family-rows { display: grid; gap: .5rem; margin-bottom: 1.25rem; }
.family-row {
    display: grid;
    grid-template-columns: 1.4rem minmax(0, 2fr) minmax(0, .65fr) minmax(0, 1.3fr) minmax(0, .75fr) minmax(0, 1.4fr) minmax(0, .65fr) minmax(0, 1.1fr);
    gap: .6rem;
    align-items: start;
}
.family-row--head { padding-bottom: .1rem; color: var(--ink-3); font: 600 .75rem var(--condensed); letter-spacing: .1em; text-transform: uppercase; }
.family-row__no { padding-top: .55rem; color: var(--ink-3); font-weight: 600; text-align: right; }
.family-row .field { gap: .2rem; margin: 0; }
.family-row .field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.family-row .errors { font-size: .8rem; }
.family-stay { display: grid; grid-template-columns: repeat(3, minmax(0, 240px)); gap: 0 1.25rem; }
.family-book { margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid var(--accent-line); border-radius: var(--radius-sm); background: var(--accent-soft); }
.family-book .field { margin: 0; }
.form-errors { margin-bottom: 1rem; }

@media (max-width: 900px) {
    .family-row--head { display: none; }
    .family-row { grid-template-columns: 1.4rem repeat(2, minmax(0, 1fr)); padding: .75rem 0; border-top: 1px solid var(--line); }
    .family-row .field:first-of-type { grid-column: 2 / -1; }
    .family-row .field:nth-of-type(odd):not(:first-of-type) { grid-column: 3; }
    .family-row .field:nth-of-type(even) { grid-column: 2; }
    .family-row .field > label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
    .family-row input, .family-row select { min-height: 44px; font-size: 16px; }
    .family-stay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1120px) {
    .topbar__inner { flex-wrap: wrap; gap: .25rem 1rem; padding: .5rem 1.25rem .35rem; }
    .topbar .nav { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -.25rem; }
    .topbar .nav a, .topbar .menu summary { min-height: 44px; white-space: nowrap; }
    .topbar .usermenu { margin-left: auto; }
    .topbar .nav .menu__list { position: fixed; top: auto; left: auto; }
}

@media (max-width: 760px) {
    .topbar .nav .menu__list { left: 1rem; right: 1rem; }
}

@media (max-width: 1100px) {
    .day-layout { grid-template-columns: minmax(0, 1fr); }
    .day-side { position: static; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
    .day-side > .card + .card { margin-top: 0; }

    .page-head:has(.day-toolbar) { align-items: stretch; }
    .day-toolbar { width: 100%; gap: .5rem; }
    .day-toolbar > .inline-form:last-child { margin-left: auto; }
    .day-toolbar .btn, .day-layout .btn { min-height: 44px; padding: .5rem 1rem; font-size: .95rem; }
    .day-toolbar .btn--icon, .day-layout .btn--icon { min-width: 44px; padding: .5rem .6rem; }
    .day-layout select, .day-layout input { min-height: 44px; font-size: 16px; }

    .slot-card__head { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: .9rem 1rem; }
    .slot-card__meta { flex: 1 1 auto; }
    .slot-card__actions { flex: 1 1 auto; justify-content: flex-end; }
    .slot-card__actions .instructor-form { flex: 1 1 280px; }
    .slot-card__actions .instructor-form select { flex: 1; width: auto; min-width: 0; }
    .slot-card__notices { padding: .7rem 1rem; }

    .weather summary { min-height: 44px; padding: .45rem 1rem; font-size: .95rem; }
    .weather__body { padding: .1rem 1rem 1rem; }
    .weather__convert select { min-height: 44px; }

    .participants thead { display: none; }
    .participants, .participants tbody { display: block; }
    .participants tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: .6rem .75rem;
        align-items: center;
        padding: .9rem 1rem;
        border-bottom: 1px solid var(--line);
    }
    .participants tbody tr:last-child { border-bottom: 0; }
    .participants td, .participants tbody tr:last-child td { display: block; padding: 0; border: 0; white-space: normal; }
    .participants td.participants__pos { grid-area: 1 / 1; width: auto; min-width: 1.5rem; font-weight: 600; }
    .participants td.participants__rider { grid-area: 1 / 2; min-width: 0; }
    .participants td.participants__actions { grid-area: 1 / 3; }
    .participants td.participants__horse, .participants td.participants__instructor, .participants td.participants__note { grid-column: 1 / -1; }
    .participants td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .3rem;
        color: var(--ink-3);
        font: 600 .72rem var(--condensed);
        letter-spacing: .12em;
        text-transform: uppercase;
    }
    .participants .instructor-form, .participants .horse-cell { display: flex; width: 100%; }
    .participants .instructor-form select, .participants .horse-cell select { flex: 1; width: auto; min-width: 0; max-width: none; }
    .participants .avatar--sm { width: 30px; height: 30px; font-size: .72rem; }
    .participants .rider-name { font-size: 1.05rem; }
    .plan-hint { max-width: none; margin-top: .4rem; font-size: .88rem; }

    .slot-card__foot { gap: .6rem; padding: .85rem 1rem; }
    .add-rider { flex: 1 1 100%; flex-wrap: wrap; }
    .add-rider select[name="rider"] { flex: 1 1 260px; min-width: 0; }
}