/* ═══════════════════════════════════════════════════════════════════════════
 * Travel Planner — homepage module
 *
 * All classes prefixed `tp-`. The dashboard showed what happens when eleven
 * stylesheets claim .stat-value: whichever loads last wins.
 *
 * Restyled to the tourist dashboard's language (css/tourist-dashboard.css):
 * the same card — var(--hub-elev) on a hairline, var(--hub-radius) — the same
 * type scale, and the brand sweep spent only where it marks state: the selected
 * month, and the region that is at its best. The gradient card border this file
 * used to draw put an accent edge on everything, which left nothing for the
 * state to say.
 *
 * The rating scale (best / good / fair / poor) is DATA, not decoration, so it
 * keeps its own four hues through --tp-rating and they are re-picked for the
 * light ground at the bottom of this file.
 * ═══════════════════════════════════════════════════════════════════════════ */

.personal-cockpit {
    /* .td-section already sets the vertical rhythm and the ground. */
    background: var(--hub-bg);
}

.tp-module {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(340px, 1.15fr);
    gap: 1.25rem;
    /* Stretch, not start: the map card was visibly shorter than the season card
       beside it. The map grows to fill whatever height the taller card sets. */
    align-items: stretch;
}

.tp-card {
    display: flex;
    flex-direction: column;
    padding: 1.4rem;
    background: var(--hub-elev);
    border: 1px solid var(--hub-hairline);
    border-radius: var(--hub-radius);
    transition: border-color var(--hub-transition);
}

.tp-card:hover {
    border-color: rgb(var(--hub-accent-rgb) / 0.45);
}

.tp-card-title {
    margin: 0 0 0.35rem;
    color: var(--hub-ink);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.tp-card-sub {
    margin: 0 0 1.1rem;
    color: var(--hub-ink-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.tp-span-2 { grid-column: 1 / -1; }

/* ── Month selector ────────────────────────────────────────────────────────── */

.tp-months {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

/* The same pill as the region filter on the destinations grid, so a chip means
   the same thing in both places. */
.tp-month {
    padding: 0.5rem 0.2rem;
    border-radius: 100px;
    border: 1px solid var(--hub-hairline);
    background: transparent;
    color: var(--hub-ink-muted);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--hub-transition);
}

.tp-month:hover {
    border-color: rgb(var(--hub-accent-rgb) / 0.5);
    color: var(--hub-ink);
}

.tp-month.is-selected {
    background: var(--hub-fill);
    border-color: transparent;
    color: var(--hub-on-fill);
    font-weight: 700;
}

/* The legend swatches were 10px dots. At that size four hues are a guess; the
   pins they explain are 15px, so the key should not be smaller than the thing
   it keys. */
.tp-legend i { width: 14px; height: 14px; }
.tp-legend { font-size: 0.84rem; }

/* ── Region verdicts ───────────────────────────────────────────────────────── */

.tp-regions {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.tp-region {
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: rgb(var(--hub-overlay-rgb) / 0.03);
    /* The rating colour is carried on the left edge so the three regions can be
       compared at a glance without reading a word. Six pixels, not four: at
       four it was a hairline that the eye read as a border, not as data. */
    border: 1px solid var(--hub-hairline);
    border-left: 6px solid var(--tp-rating, #5BD97A);
}

/* .tp-rating-* live in theme.css — the destination page reads them too. */

.tp-region-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.tp-region-name {
    color: var(--hub-ink);
    font-size: 0.98rem;
    font-weight: 700;
}

.tp-region-verdict {
    color: var(--tp-rating);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.tp-region-label {
    color: var(--hub-ink-muted);
    font-size: 0.84rem;
    margin-top: 0.15rem;
}

/* ── Weather in the region card ──────────────────────────────────────────────
 * Three columns: what the sky does, how hot, how wet. The card used to carry a
 * rating word and a two-word label, which is not enough to choose between two
 * regions in the same month — 33° and 240 mm against 32° and 312 mm is.
 * ────────────────────────────────────────────────────────────────────────── */

.tp-region-wx {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0.6rem 0 0.15rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    background: rgb(var(--hub-overlay-rgb) / 0.04);
}

.tp-wx-icon { display: flex; flex-shrink: 0; color: var(--tp-rating); }

.tp-wx-figures { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; flex: 1; }

.tp-wx-temp {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    font-variant-numeric: tabular-nums;
}

.tp-wx-temp strong { font-size: 1.25rem; font-weight: 800; color: var(--hub-ink); line-height: 1; }
.tp-wx-temp > span { font-size: 0.85rem; color: var(--hub-ink-muted); }

.tp-wx-sky {
    font-size: 0.78rem;
    color: var(--hub-ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Rainfall sits apart from the temperature: in this country it is the figure
   that decides the month, so it is not buried in a line of prose. */
.tp-wx-rain {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.05rem;
    flex-shrink: 0;
    text-align: right;
}

.tp-wx-rain strong {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--hub-ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tp-wx-rain strong span { font-size: 0.7rem; font-weight: 600; color: var(--hub-ink-faint); margin-left: 0.1rem; }
.tp-wx-rain > span { font-size: 0.74rem; color: var(--hub-ink-muted); }

@media (max-width: 420px) {
    .tp-region-wx { flex-wrap: wrap; gap: 0.6rem; }
    .tp-wx-rain { align-items: flex-start; text-align: left; }
}

.tp-region-note {
    margin: 0.45rem 0 0;
    color: var(--hub-ink-muted);
    font-size: 0.85rem;
    line-height: 1.55;
}

.tp-region-count {
    margin-top: 0.6rem;
    font-size: 0.76rem;
    color: var(--hub-ink-faint);
    font-variant-numeric: tabular-nums;
}

/* ── Map ───────────────────────────────────────────────────────────────────── */

.tp-map {
    /* Fills the card rather than dictating its height, so the two columns line
       up. min-height keeps it usable when the neighbouring card is short. */
    flex: 1;
    min-height: 540px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--hub-hairline);
}

.tp-pin {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: block;
    cursor: pointer;
    border: 2px solid rgb(var(--hub-bg-rgb) / 0.85);
    box-shadow: 0 0 0 2px rgb(var(--hub-overlay-rgb) / 0.12);
    transition: transform 0.15s ease;
}

.tp-pin:hover { transform: scale(1.35); }

.tp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 0.9rem;
    font-size: 0.8rem;
    color: var(--hub-ink-muted);
}

.tp-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* The swatches used to carry their colour in a style attribute, which meant
   four dark-theme hex values printed unchanged on the light ground. Routing
   them through --tp-rating makes them follow the theme like everything else. */
.tp-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background: var(--tp-rating);
}

/* ── Trip readiness ────────────────────────────────────────────────────────── */


.tp-module button:focus-visible,
.tp-module a:focus-visible {
    outline: 3px solid var(--hub-focus);
    outline-offset: 2px;
    border-radius: 8px;
}

@media (max-width: 900px) {
    .tp-module { grid-template-columns: 1fr; }
    /* One column on a phone means the map has the full width to itself, so give
       it real height — it is the part people actually pinch and pan. */
    .tp-map { height: 62vh; min-height: 380px; }
}

@media (max-width: 560px) {
    .tp-months { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .tp-card, .tp-month, .tp-pin { transition: none; }
}

/* ── Map fallback ──────────────────────────────────────────────────────────
 * MapLibre needs WebGL, which is not always available — hardware acceleration
 * off, a blocklisted GPU, a remote session. The same information as a list.
 * ────────────────────────────────────────────────────────────────────────── */

.tp-map.tp-map-fallback {
    height: auto;
    min-height: 0;
    padding: 1rem;
    background: rgb(var(--hub-overlay-rgb) / 0.03);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tp-fallback-note {
    font-size: 0.84rem;
    color: var(--hub-ink-muted);
    line-height: 1.5;
}

.tp-fallback-group {
    border-left: 4px solid var(--tp-rating, #5CD6A0);
    padding-left: 0.75rem;
}

.tp-fallback-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    color: var(--tp-rating);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}

.tp-fallback-head span {
    color: var(--hub-ink-muted);
    font-variant-numeric: tabular-nums;
}

.tp-fallback-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tp-fallback-item {
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: var(--hub-elev);
    border: 1px solid var(--hub-hairline);
    color: var(--hub-ink-muted);
    font-size: 0.84rem;
    text-decoration: none;
    white-space: nowrap;
}

.tp-fallback-item:hover {
    border-color: var(--tp-rating);
    color: var(--tp-rating);
}

/* ── Leaflet overrides ─────────────────────────────────────────────────────── */

.tp-map.leaflet-container {
    background: var(--hub-elev);
    font: inherit;
}

/* Attribution moves off the map surface. Esri and OpenStreetMap/CARTO both
   require credit, so it is not dropped — it sits under the legend as one quiet
   line instead of a box printed over Vietnam. */
.tp-map .leaflet-control-attribution { display: none; }

.tp-credit {
    margin-top: 0.6rem;
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--hub-ink-faint);
}

.tp-credit a { color: var(--hub-accent); text-decoration: none; }
.tp-credit a:hover { text-decoration: underline; }

.tp-map .leaflet-popup-content-wrapper,
.tp-map .leaflet-popup-tip {
    background: var(--hub-elev);
    color: var(--hub-ink);
    border: 1px solid var(--hub-hairline);
    box-shadow: var(--hub-shadow);
}

.tp-map .leaflet-popup-content { margin: 0.8rem 0.95rem; }

.tp-popup {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--hub-ink);
    font-size: 0.86rem;
}

.tp-popup strong { font-size: 0.98rem; color: var(--hub-ink); }

.tp-popup-verdict {
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hub-accent);
}

.tp-popup-season { color: var(--hub-ink-muted); font-size: 0.8rem; }

.tp-popup-link {
    margin-top: 4px;
    color: var(--hub-accent);
    font-weight: 700;
    font-size: 0.82rem;
    text-decoration: none;
}

.tp-popup-link:hover { text-decoration: underline; }

/* Zoom buttons in the site's palette rather than Leaflet's default white. */
.tp-map .leaflet-bar a {
    background: var(--hub-elev);
    color: var(--hub-ink);
    border-bottom-color: var(--hub-hairline);
}

.tp-map .leaflet-bar a:hover { background: rgb(var(--hub-accent-rgb) / 0.15); }