/* ═══════════════════════════════════════════════════════════════════════════
   ROUTE PLANNER — getting to Vietnam

   Same language as the rest of the site. The one thing this page does that no
   other does is draw the WAIT between two flights, so the timeline is where the
   design effort goes: legs are solid rows, connections are a break in the line
   coloured by how good the wait is.

   That colour is its own scale, like the season ratings — tight / comfortable /
   long / overnight has to stay readable as four distinct states and cannot
   collapse onto the brand accent.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --rp-tight:       #C0392B;
    --rp-comfortable: #2E7D32;
    --rp-long:        #B25E02;
    --rp-overnight:   #4A5B6E;
}

:root[data-theme="light"] {
    --rp-tight:       #A8321F;
    --rp-comfortable: #216B25;
    --rp-long:        #8A5A02;
    --rp-overnight:   #405264;
}

.rp-q-tight       { --rp-quality: var(--rp-tight); }
.rp-q-comfortable { --rp-quality: var(--rp-comfortable); }
.rp-q-long        { --rp-quality: var(--rp-long); }
.rp-q-overnight   { --rp-quality: var(--rp-overnight); }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.rp-hero {
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
    background: linear-gradient(170deg,
        var(--hub-bg-deep) 0%, var(--hub-bg) 60%, var(--hub-elev) 100%);
}

.rp-title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--hub-ink);
    margin: 0 0 0.9rem;
}

.rp-sub {
    font-size: clamp(0.98rem, 1.5vw, 1.12rem);
    line-height: 1.6;
    color: var(--hub-ink-muted);
    max-width: 68ch;
    margin: 0 0 2rem;
}

/* ── The form ────────────────────────────────────────────────────────────── */

.rp-form { position: relative; max-width: 1000px; }

.rp-row {
    display: grid;
    grid-template-columns: 1.3fr 1.3fr 1fr 0.7fr auto;
    background: var(--hub-elev);
    border: 1px solid var(--hub-hairline);
    border-radius: var(--hub-radius);
    box-shadow: var(--hub-shadow);
    overflow: hidden;
}

.rp-field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.85rem 1.1rem;
    border: 0;
    border-right: 1px solid var(--hub-hairline);
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}

.rp-field:hover { background: rgb(var(--hub-overlay-rgb) / 0.04); }

.rp-field.is-open {
    background: rgb(var(--hub-accent-rgb) / 0.07);
    box-shadow: inset 0 -2px 0 var(--hub-accent);
}

.rp-field:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: -3px; }

.rp-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--hub-ink-faint);
}

.rp-value {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--hub-ink-faint);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp-value.is-set { color: var(--hub-ink); }

.rp-date, .rp-pax {
    border: 0;
    background: transparent;
    padding: 0;
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--hub-ink);
    width: 100%;
    min-width: 0;
    color-scheme: inherit;
}

.rp-date:focus, .rp-pax:focus { outline: none; }
.rp-field-pax { border-right: 0; }

.rp-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0 1.75rem;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--hub-on-fill);
    background: var(--hub-fill);
}

.rp-go svg { width: 18px; height: 18px; }
.rp-go:hover { filter: brightness(1.06); }
.rp-go:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: -3px; }

/* In the flow, so opening it moves the results down instead of covering them. */
.rp-panel {
    margin-top: 0.6rem;
    background: var(--hub-elev);
    border: 1px solid var(--hub-hairline);
    border-radius: var(--hub-radius);
    box-shadow: var(--hub-shadow);
    max-height: min(60vh, 520px);
    overflow-y: auto;
}

.rp-panel[hidden] { display: none; }
.rp-panel-inner { padding: 1.25rem; }

.rp-text {
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--hub-hairline);
    border-radius: 10px;
    background: var(--hub-bg);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--hub-ink);
}

.rp-text:focus { outline: 3px solid var(--hub-focus); outline-offset: -1px; }

.rp-hint  { margin: 1rem 0 0.5rem; font-size: 0.85rem; color: var(--hub-ink-muted); }
.rp-none  { margin: 1.25rem 0; text-align: center; color: var(--hub-ink-muted); }

.rp-place-list { list-style: none; margin: 0.9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }

.rp-place {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.55rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.rp-place:hover { background: rgb(var(--hub-overlay-rgb) / 0.05); }
.rp-place:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: 1px; }

.rp-place-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.3rem;
}

.rp-place-chip { border-color: var(--hub-hairline); }

.rp-place-text { display: flex; flex-direction: column; min-width: 0; }
.rp-place-text strong { font-size: 0.92rem; font-weight: 600; color: var(--hub-ink); }
.rp-place-text span {
    font-size: 0.78rem; color: var(--hub-ink-faint);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The code, not the full name, is how an airport is identified on a ticket. */
.rp-iata {
    flex-shrink: 0;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    background: rgb(var(--hub-accent-rgb) / 0.12);
    color: var(--hub-accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.rp-iata-sm { font-size: 0.68rem; padding: 0.1rem 0.3rem; }

/* ── Results ─────────────────────────────────────────────────────────────── */

.rp-results-section { padding: clamp(2rem, 4vw, 3rem) 0; background: var(--hub-bg); }

.rp-results-head { margin-bottom: 1.5rem; }

.rp-results-title {
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    font-weight: 800;
    color: var(--hub-ink);
    margin: 0 0 0.3rem;
}

.rp-distance { margin: 0; font-size: 0.88rem; color: var(--hub-ink-muted); font-variant-numeric: tabular-nums; }

.rp-route {
    background: var(--hub-elev);
    border: 1px solid var(--hub-hairline);
    border-radius: var(--hub-radius);
    padding: 1.25rem 1.4rem;
    margin-bottom: 1rem;
}

.rp-route-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

/* The routing is the headline: WAW → AMS → HAN answers the question the page
   exists for before a single other number is read. */
.rp-routing {
    margin: 0 0 0.3rem;
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--hub-ink);
    font-variant-numeric: tabular-nums;
}

.rp-route-sub { margin: 0; font-size: 0.9rem; color: var(--hub-ink-muted); }

.rp-route-price { display: flex; flex-direction: column; align-items: flex-end; }
.rp-route-price strong { font-size: 1.4rem; font-weight: 800; color: var(--hub-ink); font-variant-numeric: tabular-nums; }
.rp-route-price span { font-size: 0.8rem; color: var(--hub-ink-faint); }

.rp-badges { margin: 0.75rem 0 0; }

.rp-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    background: var(--hub-fill);
    color: var(--hub-on-fill);
    font-size: 0.75rem;
    font-weight: 700;
}

.rp-warnings {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    border-left: 3px solid var(--hub-warning);
    background: rgb(var(--hub-overlay-rgb) / 0.04);
    font-size: 0.85rem;
    color: var(--hub-ink-muted);
}

.rp-warnings li + li { margin-top: 0.3rem; }

.rp-details { margin-top: 1rem; }

.rp-details > summary {
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--hub-accent);
    padding: 0.4rem 0;
}

.rp-details > summary:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: 2px; }

/* ── Timeline ────────────────────────────────────────────────────────────── */

.rp-timeline {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0 0 0 1.4rem;
    position: relative;
}

/* The spine. Legs sit on it; a connection breaks it. */
.rp-timeline::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 0.6rem;
    bottom: 0.6rem;
    width: 2px;
    background: var(--hub-hairline);
}

.rp-seg, .rp-layover {
    position: relative;
    display: flex;
    gap: 0.75rem;
    padding: 0.55rem 0;
}

.rp-seg-dot, .rp-layover-dot {
    position: absolute;
    left: -1.4rem;
    top: 1rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--hub-elev);
    border: 2px solid var(--hub-ink-faint);
}

.rp-seg-flight .rp-seg-dot { border-color: var(--hub-accent); }

/* A wait is the thing this page was built to show, so it gets the colour, the
   fill and the weight — the legs around it are deliberately quieter. */
.rp-layover-dot {
    background: var(--rp-quality);
    border-color: var(--rp-quality);
}

.rp-seg-body, .rp-layover-body { flex: 1; min-width: 0; }

.rp-seg-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.15rem;
    font-size: 0.92rem;
    color: var(--hub-ink);
}

.rp-seg-places { font-weight: 600; }
.rp-arrow { color: var(--hub-ink-faint); margin: 0 0.25rem; }
.rp-seg-dur { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.rp-seg-meta, .rp-layover-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin: 0;
    font-size: 0.8rem;
    color: var(--hub-ink-muted);
}

.rp-seg-mode { text-transform: capitalize; font-weight: 600; }

.rp-layover {
    margin: 0.15rem 0;
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    border-left: 3px solid var(--rp-quality);
    background: rgb(var(--hub-overlay-rgb) / 0.04);
}

.rp-layover-head { margin: 0 0 0.2rem; font-size: 0.95rem; color: var(--hub-ink); }
.rp-layover-head strong { font-variant-numeric: tabular-nums; }

.rp-q-tag {
    font-weight: 700;
    color: var(--rp-quality);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.72rem;
}

.rp-warn-inline { color: var(--hub-warning); font-weight: 600; }

/* ── States ──────────────────────────────────────────────────────────────── */

.rp-searching { margin: 0 0 1rem; color: var(--hub-ink-muted); }

.rp-skeleton {
    height: 130px;
    margin-bottom: 1rem;
    border-radius: var(--hub-radius);
    border: 1px solid var(--hub-hairline);
    background: rgb(var(--hub-overlay-rgb) / 0.05);
    animation: rp-pulse 1.6s ease-in-out infinite;
}

@keyframes rp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.rp-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--hub-ink-muted);
    border: 1px dashed var(--hub-hairline);
    border-radius: var(--hub-radius);
}

.rp-other { margin-top: 1.5rem; }
.rp-other > summary { cursor: pointer; font-weight: 700; color: var(--hub-ink-muted); padding: 0.5rem 0; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .rp-row { grid-template-columns: 1fr 1fr; }
    .rp-field { border-right: 1px solid var(--hub-hairline); border-bottom: 1px solid var(--hub-hairline); }
    .rp-field-pax { border-right: 0; }
    .rp-go { grid-column: 1 / -1; padding: 0.95rem 1.5rem; }
}

@media (max-width: 560px) {
    .rp-row { grid-template-columns: 1fr; }
    .rp-field { border-right: 0; }
    .rp-route-head { flex-direction: column; }
    .rp-route-price { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .rp-skeleton { animation: none; }
}