.ticket-input-tools {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.passenger-input-slot {
    position: relative;
    display: inline-flex;
}

/* Live selection updates belong to assistive technology only. The project
   shell uses `sr-only` elsewhere, but this component is also embedded in
   standalone views, so keep the hiding contract local and explicit. */
.passenger-live {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.passenger-trigger {
    position: relative;
    white-space: nowrap;
}

.passenger-trigger:focus-visible,
.passenger-stepper button:focus-visible,
.passenger-done:focus-visible {
    outline: 2px solid #1f4e5b;
    outline-offset: 2px;
}

.passenger-trigger svg {
    width: 1rem;
    height: 1rem;
    flex: none;
}

.passenger-popover {
    position: absolute;
    z-index: 80;
    left: 0;
    bottom: calc(100% + 0.65rem);
    width: min(20rem, calc(100vw - 2rem));
    padding: 1rem;
    border: 2px solid #1a1a1a;
    background: #fffaf0;
    color: #1a1a1a;
    box-shadow: 7px 7px 0 rgba(31, 78, 91, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
}

/* The tab reads its own label off the element rather than carrying the string
   in CSS: generated content cannot be translated by the i18n runtime, and a
   second hardcoded copy per language is how the two drift apart. The attribute
   is written once in passenger_input.js from the catalog. */
.passenger-popover::before {
    content: attr(data-tab-label);
    display: inline-block;
    margin: -1.7rem 0 0.8rem;
    padding: 0.2rem 0.5rem;
    border: 2px solid #1a1a1a;
    background: #f25c05;
    color: white;
    font: 700 0.65rem/1.2 "Courier Prime", "Anonymous Pro", monospace;
    letter-spacing: 0.12em;
}

.passenger-popover.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.passenger-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-height: 3.6rem;
    border-bottom: 1px dashed rgba(26, 26, 26, 0.24);
}

.passenger-row:last-of-type { border-bottom: 0; }

.passenger-row-label {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    font: 700 0.87rem/1.2 "Space Grotesk", "Golos Text", sans-serif;
}

.passenger-row-label small {
    color: #76716a;
    font: 400 0.68rem/1.2 "Courier Prime", "Anonymous Pro", monospace;
}

.passenger-stepper {
    display: grid;
    grid-template-columns: 44px 2rem 44px;
    align-items: center;
    text-align: center;
}

.passenger-stepper button {
    width: 44px;
    height: 44px;
    border: 1.5px solid #1a1a1a;
    border-radius: 50%;
    background: transparent;
    color: #1a1a1a;
    font: 700 1.25rem/1 "Space Grotesk", "Golos Text", sans-serif;
    cursor: pointer;
}

.passenger-stepper button:disabled {
    opacity: 0.28;
    cursor: default;
}

.passenger-count {
    font: 700 0.9rem/1 "Courier Prime", "Anonymous Pro", monospace;
}

.passenger-error {
    min-height: 1rem;
    margin: 0.65rem 0 0;
    color: #a0351b;
    font: 700 0.68rem/1.35 "Courier Prime", "Anonymous Pro", monospace;
}

.passenger-done {
    width: 100%;
    min-height: 44px;
    margin-top: 0.55rem;
    border: 0;
    background: #1f4e5b;
    color: white;
    font: 700 0.76rem/1 "Courier Prime", "Anonymous Pro", monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

@media (max-width: 640px) {
    .ticket-input-tools { gap: 0; }
    .passenger-popover {
        position: fixed;
        z-index: 160;
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        width: auto;
        max-width: none;
        box-shadow: 6px 6px 0 rgba(31, 78, 91, 0.2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .passenger-popover,
    .passenger-trigger { transition: none; }
}