/* ResortPass.watch — Visit Planner 2.0 page styles (Stage 8B)
   Same contrast model as hours.css/history.css v3 (PR #56 lessons): the page
   surface is LIGHT; the hero card below is the DARK --bg-elev surface and
   sets explicit light text. Pairs are pinned by the WCAG audit in
   test-visit-planner2.mjs. */

.pl2-toolbar {
    display: flex;
    justify-content: center;
    margin: 6px 0 18px;
}

.pl2-mode-toggle {
    display: inline-flex;
    border: 1px solid var(--light-hairline);
    border-radius: 12px;
    overflow: hidden;
    background: var(--light-surface);
    max-width: 100%;
    flex-wrap: wrap;
}

.pl2-mode-toggle button {
    border: none;
    background: transparent;
    color: var(--light-muted);
    font: inherit;
    font-weight: 700;
    font-size: .85rem;
    padding: 9px 16px;
    cursor: pointer;
    white-space: nowrap;
}

.pl2-mode-toggle button[aria-pressed="true"] {
    color: var(--light-text);
    background: #e8e4dc;
}

.pl2-mode-toggle button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

/* ---- hero (dark premium card) ---- */
.pl2-hero-card {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 22px;
}

.pl2-hero-kicker {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.pl2-hero-day {
    color: var(--text);
    font-size: 1.5rem;
    font-weight: 800;
    margin: 4px 0 6px;
}

.pl2-hero-rec {
    display: inline-block;
    color: #1a3d2b;
    background: #8ce7ae;
    border-radius: 7px;
    font-size: .78rem;
    font-weight: 800;
    padding: 3px 10px;
    margin-bottom: 10px;
}

.pl2-hero-meta { margin-top: 2px; }

.pl2-hero-line {
    color: var(--text);
    font-size: .95rem;
    font-weight: 600;
    margin: 3px 0;
}

.pl2-hero-score {
    color: var(--muted);
    font-size: .8rem;
    margin-top: 6px;
}

.pl2-why { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }

.pl2-why-title {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
    margin: 0 0 4px;
}

.pl2-why ul { margin: 0; padding: 0 0 0 18px; }
.pl2-why li { color: var(--text); font-size: .88rem; margin: 3px 0; }

/* ---- alternative ---- */
.pl2-alt {
    border: 1px solid var(--light-hairline);
    border-radius: 12px;
    background: var(--light-surface);
    padding: 10px 16px;
    margin-top: 12px;
}

.pl2-alt-kicker {
    color: var(--light-text);
    font-size: .88rem;
    font-weight: 700;
}

.pl2-alt-trade {
    color: var(--light-muted);
    font-size: .8rem;
    margin-top: 2px;
}

/* ---- ranking rows ---- */
.planner-day-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.pl2-rec-badge {
    display: inline-block;
    font-size: .64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 6px;
    padding: 2px 8px;
    background: #eceae4;
    color: var(--light-text);
}

.pl2-rec-badge.best { background: #d7ffe6; color: #1a5e3c; }
.pl2-rec-badge.good { background: #e2f0e6; color: #2a5e3c; }
.pl2-rec-badge.busy { background: #fde3e4; color: #a1262c; }
.pl2-rec-badge.none { background: transparent; border: 1px dashed var(--light-hairline); color: var(--light-muted); }

.pl2-day-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.pl2-day-times {
    color: var(--light-text);
    font-size: .82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pl2-day-score {
    color: var(--light-muted);
    font-size: .74rem;
}

.pl2-day-reason {
    color: var(--light-muted);
    font-size: .78rem;
    margin: 4px 0 0;
}

@media (max-width: 640px) {
    .pl2-mode-toggle button { font-size: .78rem; padding: 8px 12px; }
    .pl2-hero-day { font-size: 1.2rem; }
    .planner-day-head { grid-template-columns: 28px 1fr auto; }
    .planner-day-crowd { display: none; }
    .pl2-day-info { align-items: flex-end; }
}