/* ==========================================================================
   Photography Seasons Planner — Flat Design System
   NO GRADIENTS. Solid colors with opacity only.
   ========================================================================== */

/* ---------- Custom Properties ---------- */
:root {
    --planner-blue: #4a7fb5;
    --planner-surface: var(--color-surface, #FBF6F0);
    --planner-border: var(--color-border, #EDE4D9);
    --planner-text: var(--color-text, #1C1C1C);
    --planner-muted: #6B6B6B;
    --planner-dim: #999999;
    --planner-primary: var(--color-primary, #D4922A);
    --planner-secondary: var(--color-secondary, #3A9E8F);
    --planner-radius: 4px;
    --planner-row-height: 32px;
    --planner-label-width: 55px;
    --planner-detail-speed: 400ms;

    /* Z-index system (planner discovery) */
    --planner-z-hero: 1;
    --planner-z-search-results: 50;
    --planner-z-hamburger: 60;
    --planner-z-overlay: 70;
    --planner-z-drawer: 80;
}

/* ---------- Layout: Root ---------- */
.planner {
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    color: var(--planner-text);
    background: var(--color-background, #FFFFFF);
    overflow-x: clip;
}

.planner__header {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1.5rem 1.5rem;
}

.planner__header-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--planner-text);
    margin: 0 0 0.25rem;
}

.planner__header-subtitle {
    font-size: 0.9375rem;
    color: var(--planner-muted);
    margin: 0;
    font-weight: 400;
}

.planner__header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
}

.planner__header-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    padding-top: 0.25rem;
}

@media (max-width: 768px) {
    .planner__header-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.planner__breadcrumb {
    font-size: 0.8125rem;
    color: var(--planner-muted);
    margin-bottom: 0.5rem;
}

.planner__breadcrumb a {
    color: var(--planner-primary);
    text-decoration: none;
}

.planner__breadcrumb a:hover {
    text-decoration: underline;
}

.planner__breadcrumb-sep {
    margin: 0 0.375rem;
    color: var(--planner-dim);
}

/* ---------- Layout: Sections ---------- */
.planner {}

.planner__section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem 1.5rem;
}

/* ---------- Layout: Canvas (Two-Panel for map row) ---------- */
.planner__canvas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 100%;
    margin: 0;
}

/* .planner__canvas--map — retired: planner detail now uses full-width map layout */
/* .planner__panel--map — retired: sticky positioning no longer needed */

.planner__canvas--single {
    grid-template-columns: 1fr;
}

/* Full-width panel for calendar */
.planner__panel--full {
    border: none;
    border-radius: 0;
}

.planner__panel--info {
    display: flex;
    flex-direction: column;
}

.planner__panel--info .planner__panel-title {
    flex-shrink: 0;
}

/* ---------- Panel Shared ---------- */
.planner__panel {
    background: #FFFFFF;
    border: 2px solid var(--planner-border);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.planner__panel:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.planner__panel-title {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--planner-muted);
    padding: 1rem 1.25rem 0.75rem;
    margin: 0;
    border-bottom: 2px solid var(--planner-border);
}

/* ==========================================================================
   CALENDAR PANEL
   ========================================================================== */

.planner-calendar {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.planner-calendar__svg {
    display: block;
    width: 100%;
    height: auto;
    min-width: 700px;
}

/* Calendar bar styling — D3 manages transitions/hover; CSS handles cursor + focus */
.planner-calendar__bar {
    cursor: pointer;
}

.planner-calendar__bar:focus {
    outline: 2px solid var(--planner-primary);
    outline-offset: 1px;
}

.planner-calendar__bar--selected {
    stroke-width: 2.5px !important;
    stroke-opacity: 1;
    filter: brightness(1.15);
}

/* D3 brush — month-range selector */
.planner-brush .overlay {
    cursor: crosshair;
}

.planner-brush .selection {
    rx: 4;
}

.planner-brush .handle {
    rx: 2;
}

.planner-calendar__month-header {
    font-size: 11px;
    font-weight: 600;
    fill: var(--planner-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    user-select: none;
}

.planner-calendar__row-label {
    font-size: 10px;
    font-weight: 600;
    /* fill is set inline by calendar.js to match each season's color */
    user-select: none;
}

.planner-calendar__gridline {
    stroke: var(--planner-border);
    stroke-width: 0.5;
}

.planner-calendar__gridline--vertical {
    stroke-dasharray: 3 4;
}

.planner-calendar__current-month {
    fill: rgba(212, 146, 42, 0.06);
}

/* Current month pulse animation */
.planner-calendar__current-month--pulse {
    animation: planner-month-pulse 3s ease-in-out infinite;
}

/* Bar label inside SVG */
.planner-calendar__bar-label {
    font-size: 9px;
    font-weight: 500;
    fill: var(--planner-text);
    pointer-events: none;
    user-select: none;
}

.planner-calendar__bar-label--peak {
    font-weight: 700;
    fill: #FFFFFF;
}

.planner-calendar__peak-badge {
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    fill: #FFFFFF;
    pointer-events: none;
    user-select: none;
}

/* Annotation text below bar rows */
.planner-calendar__annotation {
    font-size: 9px;
    font-style: italic;
    fill: var(--planner-muted);
    user-select: none;
}

/* Wave / directional arrow */
.planner-calendar__wave-arrow {
    stroke-width: 1;
    stroke-dasharray: 4 3;
    fill: none;
}

.planner-calendar__best-label {
    font-size: 9px;
    font-weight: 700;
    fill: var(--planner-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    user-select: none;
}

.planner-calendar__best-text {
    font-size: 10px;
    font-weight: 500;
    fill: var(--planner-text);
    user-select: none;
}

/* Footnote */
.planner-calendar__footnote {
    font-size: 0.6875rem;
    color: var(--planner-dim);
    padding: 0.5rem 1rem 0.75rem;
    font-style: italic;
}

/* ==========================================================================
   RANGE SUMMARY PANEL (appears when brush selects a month range)
   ========================================================================== */

.planner-range-summary {
    display: none; /* shown by planner.js when a month range is brushed */
    margin: 0.75rem 0 0;
    padding: 0;
    background: var(--color-surface, #FBF6F0);
    border: 1px solid var(--planner-border);
    border-radius: 6px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.planner-range-summary__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid var(--planner-border);
}

.planner-range-summary__title {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--planner-muted);
}

.planner-range-summary__close {
    background: none;
    border: none;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--planner-dim);
    cursor: pointer;
    padding: 0 2px;
    transition: color 0.15s;
}

.planner-range-summary__close:hover {
    color: var(--planner-text);
}

.planner-range-summary__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
}

.planner-range-summary__col {
    padding: 0.625rem 0.875rem;
}

.planner-range-summary__col + .planner-range-summary__col {
    border-left: 1px solid var(--planner-border);
}

.planner-range-summary__heading {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--planner-text);
    margin: 0 0 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.planner-range-summary__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.planner-range-summary__item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0;
}

.planner-range-summary__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.planner-range-summary__name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--planner-text);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.planner-range-summary__badge {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.planner-range-summary__badge--peak {
    font-weight: 700;
}

.planner-range-summary__stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.1875rem 0;
}

.planner-range-summary__stat-label {
    font-size: 0.6875rem;
    color: var(--planner-muted);
}

.planner-range-summary__stat-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--planner-text);
}

.planner-range-summary__ranked {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.planner-range-summary__ranked-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0;
}

.planner-range-summary__rank {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--planner-primary);
    background: rgba(212, 146, 42, 0.1);
    border-radius: 50%;
    flex-shrink: 0;
}

.planner-range-summary__loc-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--planner-text);
    flex: 1;
}

.planner-range-summary__loc-rating {
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--planner-muted);
}

.planner-range-summary__empty {
    font-size: 0.75rem;
    color: var(--planner-dim);
    font-style: italic;
    margin: 0;
}

/* ==========================================================================
   FIRST-USE HINT (brush discovery)
   ========================================================================== */

.planner-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    margin-top: 0.5rem;
    background: rgba(212, 146, 42, 0.05);
    border: 1px solid rgba(212, 146, 42, 0.15);
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.planner-hint__text {
    font-size: 0.75rem;
    color: var(--planner-muted);
}

.planner-hint__dismiss {
    background: none;
    border: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--planner-primary);
    cursor: pointer;
    padding: 0;
    margin-left: 1rem;
    white-space: nowrap;
}

/* ==========================================================================
   MAP PANEL
   ========================================================================== */

.planner-map {
    position: relative;
    overflow: hidden;
    background: #E2EAF0;
    border-radius: 8px;
}

.planner-map__svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Photo spots dots */
.planner-map__spot-dot {
    fill: #3A9E8F;
    fill-opacity: 0.75;
    stroke: #ffffff;
    stroke-width: 1;
    cursor: pointer;
    transition: r 0.15s, fill-opacity 0.15s;
}

.planner-map__spot-dot:hover,
.planner-map__spot-dot:focus {
    fill-opacity: 1;
    outline: none;
}

/* Toggle button */
.planner-map__spots-toggle {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    background: #ffffff;
    border: 1px solid var(--planner-border);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--planner-muted);
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: border-color 0.15s, color 0.15s;
}

.planner-map__spots-toggle:hover {
    border-color: #3A9E8F;
    color: #3A9E8F;
}

.planner-map__spots-toggle--active {
    border-color: #3A9E8F;
    color: #3A9E8F;
    background: rgba(58, 158, 143, 0.07);
}

/* Landmass — inline SVG attributes from DB control fill/stroke */
.planner-map__land {
    stroke-width: 0.75;
    opacity: 0.95;
}

/* Route line — bold, prominent */
.planner-map__route {
    fill: none;
    stroke: var(--planner-primary);
    stroke-width: 3;
    stroke-dasharray: 8 5;
    stroke-linecap: round;
    opacity: 0.85;
}

/* Route draw-on animation — dasharray/dashoffset set by JS for exact path length */
.planner-map__route--animated {
    opacity: 0.9;
    animation: planner-route-draw 2.5s ease-out 0.4s forwards;
}

/* Route glow shadow for depth */
.planner-map__route-shadow {
    fill: none;
    stroke: var(--planner-primary);
    stroke-width: 8;
    stroke-linecap: round;
    opacity: 0.12;
}

/* Mode-aware route styling: each mode has its own dash pattern AND stroke
   color so visitors can distinguish ground/water/sky at a glance. Colors stay
   in a warm-cool harmony with the brand amber (no rainbow). */
.planner-map__route--road {
    stroke: #D4922A;             /* amber — brand primary */
    stroke-dasharray: none;
    stroke-width: 2.4;
    opacity: 0.92;
}
.planner-map__route-shadow.planner-map__route--road {
    stroke: #D4922A;
    stroke-width: 6;
    opacity: 0.16;
}
.planner-map__route--flight {
    stroke: #3F5675;             /* deep slate-blue — reads on warm beige */
    stroke-dasharray: 14 9;
    stroke-width: 2.4;
    opacity: 0.9;
}
.planner-map__route-shadow.planner-map__route--flight {
    stroke: #3F5675;
    stroke-width: 7;
    opacity: 0.12;
    stroke-dasharray: 14 9;
}
.planner-map__route--ferry {
    stroke: #3A7995;             /* deep ocean teal — water */
    stroke-dasharray: 4 5;
    stroke-width: 2.2;
    opacity: 0.88;
}
.planner-map__route-shadow.planner-map__route--ferry {
    stroke: #3A7995;
    stroke-width: 6;
    opacity: 0.12;
}
/* Train: medium dash + dot pattern evokes rail ties / Morse signal */
.planner-map__route--train {
    stroke: #8C5E2A;             /* deep amber-brown — rail-tie wood */
    stroke-dasharray: 8 3 2 3;
    stroke-width: 2.6;
    stroke-linecap: butt;
    opacity: 0.95;
}
.planner-map__route-shadow.planner-map__route--train {
    stroke: #8C5E2A;
    stroke-width: 7;
    opacity: 0.15;
}
/* Hike: short staccato dots */
.planner-map__route--hike {
    stroke: #6E7F45;             /* moss / sage — trail */
    stroke-dasharray: 1 4;
    stroke-width: 2.2;
    stroke-linecap: round;
    opacity: 0.9;
}
.planner-map__route-shadow.planner-map__route--hike {
    stroke: #6E7F45;
    stroke-width: 5;
    opacity: 0.1;
}
/* Off-road / tundra buggy: fine dotted track — distinct from paved road */
.planner-map__route--offroad {
    stroke: #8C6E45;             /* tundra brown — off-road overland */
    stroke-dasharray: 1 6;
    stroke-width: 2.4;
    stroke-linecap: round;
    opacity: 0.9;
}
.planner-map__route-shadow.planner-map__route--offroad {
    stroke: #8C6E45;
    stroke-width: 5;
    opacity: 0.1;
}

/* Mode glyph badge placed at the route's apex/midpoint so the visitor sees
   the mode at a glance, not just the dash pattern. */
.planner-map__mode-glyph-bg {
    fill: var(--color-surface, #FBF6F0);
    stroke-width: 1;
    opacity: 0.95;
}
.planner-map__mode-glyph--flight .planner-map__mode-glyph-bg {
    stroke: #3F5675;
}
.planner-map__mode-glyph--ferry .planner-map__mode-glyph-bg {
    stroke: #3A7995;
}
.planner-map__mode-glyph-icon {
    stroke: var(--color-text, #1C1C1C);
}
.planner-map__mode-glyph--flight .planner-map__mode-glyph-icon {
    stroke: #4C5F75;
}
.planner-map__mode-glyph--ferry .planner-map__mode-glyph-icon {
    stroke: #1E4C66;
}

/* HTML mode-chip overlay -- icon-only by default, expands to show the mode
   label on hover/focus. Sits at each multi-mode leg's midpoint. */
.planner-map__mode-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}
.planner-map__mode-chip-btn {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0;
    height: 18px;
    background: var(--color-surface, #FBF6F0);
    color: var(--planner-primary, #D4922A);
    border: 1.4px solid var(--planner-primary, #D4922A);
    border-radius: 999px;
    font-family: var(--font-body, "Inter", sans-serif);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(28, 28, 28, 0.14);
    /* Chips fade to 55% when idle so a crowded map (5+ chips) reads
       cleaner; they pop back to full opacity on hover / focus / when the
       map container itself is hovered. */
    opacity: 0.55;
    transition: background 0.15s ease, color 0.15s ease, padding 0.18s ease,
                gap 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease,
                opacity 0.18s ease;
    white-space: nowrap;
    line-height: 1;
    overflow: hidden;
}
.planner-map:hover .planner-map__mode-chip-btn {
    opacity: 0.92;
}
.planner-map__mode-chip-btn:hover,
.planner-map__mode-chip-btn:focus-visible {
    background: var(--planner-primary, #D4922A);
    color: var(--color-surface, #FBF6F0);
    gap: 4px;
    padding: 0 8px 0 2px;
    transform: translate(-50%, -50%) scale(1.04);
    box-shadow: 0 2px 5px rgba(28, 28, 28, 0.2);
    outline: none;
    z-index: 4;
    opacity: 1;
}
/* Static chip — single-mode legs (flight-only, ferry-only, train-only).
   Same expand-on-hover label but no scale or click affordance. */
.planner-map__mode-chip-btn--static {
    cursor: default;
}
.planner-map__mode-chip-btn--static:hover,
.planner-map__mode-chip-btn--static:focus-visible {
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 2px rgba(28, 28, 28, 0.14);
}
.planner-map__mode-chip-glyph {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin: 2px;
    border-radius: 50%;
    background: var(--planner-primary, #D4922A);
    color: var(--color-surface, #FBF6F0);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}
.planner-map__mode-chip-btn:hover .planner-map__mode-chip-glyph,
.planner-map__mode-chip-btn:focus-visible .planner-map__mode-chip-glyph {
    background: var(--color-surface, #FBF6F0);
    color: var(--planner-primary, #D4922A);
}
.planner-map__mode-chip-label {
    text-transform: uppercase;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.18s ease, opacity 0.18s ease;
}
.planner-map__mode-chip-btn:hover .planner-map__mode-chip-label,
.planner-map__mode-chip-btn:focus-visible .planner-map__mode-chip-label {
    max-width: 60px;
    opacity: 1;
}

/* Per-mode chip color — matches the route stroke color of that mode, so
   visitors immediately see which transport the chip represents and the
   chip never blends with the amber numbered marker next to it. */
.planner-map__mode-chip-btn--flight {
    color: #5C7390;
    border-color: #5C7390;
}
.planner-map__mode-chip-btn--flight .planner-map__mode-chip-glyph {
    background: #5C7390;
}
.planner-map__mode-chip-btn--flight:hover,
.planner-map__mode-chip-btn--flight:focus-visible {
    background: #5C7390;
    color: var(--color-surface, #FBF6F0);
}
.planner-map__mode-chip-btn--flight:hover .planner-map__mode-chip-glyph,
.planner-map__mode-chip-btn--flight:focus-visible .planner-map__mode-chip-glyph {
    background: var(--color-surface, #FBF6F0);
    color: #5C7390;
}

.planner-map__mode-chip-btn--ferry {
    color: #2E6478;
    border-color: #2E6478;
}
.planner-map__mode-chip-btn--ferry .planner-map__mode-chip-glyph {
    background: #2E6478;
}
.planner-map__mode-chip-btn--ferry:hover,
.planner-map__mode-chip-btn--ferry:focus-visible {
    background: #2E6478;
    color: var(--color-surface, #FBF6F0);
}
.planner-map__mode-chip-btn--ferry:hover .planner-map__mode-chip-glyph,
.planner-map__mode-chip-btn--ferry:focus-visible .planner-map__mode-chip-glyph {
    background: var(--color-surface, #FBF6F0);
    color: #2E6478;
}

.planner-map__mode-chip-btn--offroad {
    color: #6E5430;
    border-color: #6E5430;
}
.planner-map__mode-chip-btn--offroad .planner-map__mode-chip-glyph {
    background: #6E5430;
}
.planner-map__mode-chip-btn--offroad:hover,
.planner-map__mode-chip-btn--offroad:focus-visible {
    background: #6E5430;
    color: var(--color-surface, #FBF6F0);
}
.planner-map__mode-chip-btn--offroad:hover .planner-map__mode-chip-glyph,
.planner-map__mode-chip-btn--offroad:focus-visible .planner-map__mode-chip-glyph {
    background: var(--color-surface, #FBF6F0);
    color: #6E5430;
}

.planner-map__mode-chip-btn--train {
    color: #7A4E1F;
    border-color: #7A4E1F;
}
.planner-map__mode-chip-btn--train .planner-map__mode-chip-glyph {
    background: #7A4E1F;
}
.planner-map__mode-chip-btn--train:hover,
.planner-map__mode-chip-btn--train:focus-visible {
    background: #7A4E1F;
    color: var(--color-surface, #FBF6F0);
}
.planner-map__mode-chip-btn--train:hover .planner-map__mode-chip-glyph,
.planner-map__mode-chip-btn--train:focus-visible .planner-map__mode-chip-glyph {
    background: var(--color-surface, #FBF6F0);
    color: #7A4E1F;
}

.planner-map__mode-chip-btn--hike {
    color: #556633;
    border-color: #556633;
}
.planner-map__mode-chip-btn--hike .planner-map__mode-chip-glyph {
    background: #556633;
}
.planner-map__mode-chip-btn--hike:hover,
.planner-map__mode-chip-btn--hike:focus-visible {
    background: #556633;
    color: var(--color-surface, #FBF6F0);
}
.planner-map__mode-chip-btn--hike:hover .planner-map__mode-chip-glyph,
.planner-map__mode-chip-btn--hike:focus-visible .planner-map__mode-chip-glyph {
    background: var(--color-surface, #FBF6F0);
    color: #556633;
}
/* Road chip — deepened to a burnt-sienna so it doesn't read as a small
   duplicate of the amber numbered marker right next to it. */
.planner-map__mode-chip-btn--road {
    color: #A35E1F;
    border-color: #A35E1F;
}
.planner-map__mode-chip-btn--road .planner-map__mode-chip-glyph {
    background: #A35E1F;
}
.planner-map__mode-chip-btn--road:hover,
.planner-map__mode-chip-btn--road:focus-visible {
    background: #A35E1F;
    color: var(--color-surface, #FBF6F0);
}
.planner-map__mode-chip-btn--road:hover .planner-map__mode-chip-glyph,
.planner-map__mode-chip-btn--road:focus-visible .planner-map__mode-chip-glyph {
    background: var(--color-surface, #FBF6F0);
    color: #A35E1F;
}

/* Marker group */
.planner-map__marker {
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
}

.planner-map__marker:hover {
    transform: scale(1.4);
}

.planner-map__marker:focus {
    outline: none;
}

.planner-map__marker-circle {
    transition: r 0.3s ease, stroke-width 0.3s ease, filter 0.3s ease;
}

.planner-map__marker--selected .planner-map__marker-circle {
    stroke: var(--planner-text);
    stroke-width: 4px;
    filter: drop-shadow(0 2px 6px rgba(28, 28, 28, 0.25));
}

/* Waypoint badge (outer ring visible on hover) */
.planner-map__marker-ring {
    opacity: 0;
    transition: opacity 0.3s ease, r 0.3s ease;
    pointer-events: none;
}

.planner-map__marker:hover .planner-map__marker-ring {
    opacity: 1;
}

.planner-map__marker--selected .planner-map__marker-ring {
    opacity: 1;
}

.planner-map__marker-label {
    font-size: 11px;
    font-weight: 700;
    fill: #FFFFFF;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
    user-select: none;
    letter-spacing: 0.5px;
}

/* Expanded hover card that appears on marker hover */
.planner-map__hover-card {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.planner-map__marker:hover + .planner-map__hover-card,
.planner-map__hover-card--visible {
    opacity: 1;
}

.planner-map__hover-card-bg {
    fill: #FFFFFF;
    stroke: var(--planner-primary);
    stroke-width: 2;
    filter: drop-shadow(0 4px 12px rgba(28, 28, 28, 0.15));
}

.planner-map__hover-card-name {
    font-size: 13px;
    font-weight: 700;
    fill: var(--planner-text);
    letter-spacing: -0.5px;
}

.planner-map__hover-card-detail {
    font-size: 11px;
    font-weight: 500;
    fill: var(--planner-muted);
}

.planner-map__hover-card-season {
    font-size: 10px;
    font-weight: 600;
    fill: var(--planner-primary);
}

/* Map marker pulse on cross-link hover */
.planner-map__marker--pulse .planner-map__marker-circle {
    animation: planner-marker-ring-pulse 0.6s ease-out;
}

/* Map footer boxes */
.planner-map__footer {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    border-top: 2px solid var(--planner-border);
    flex-wrap: wrap;
    background: rgba(212, 146, 42, 0.03);
}

.planner-map__footer-box {
    flex: 1;
    min-width: 140px;
    padding: 1rem;
    background: #FFFFFF;
    border: 2px solid var(--planner-border);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.planner-map__footer-box:hover {
    border-color: var(--planner-primary);
    box-shadow: 0 2px 8px rgba(212, 146, 42, 0.1);
}

.planner-map__footer-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--planner-muted);
    margin: 0 0 0.4rem;
}

.planner-map__footer-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--planner-text);
    margin: 0;
    letter-spacing: -0.5px;
}

/* ==========================================================================
   TRIP OVERVIEW PANEL
   ========================================================================== */

.planner-overview {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* --- Stat chips row --- */
.planner-overview__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--planner-border);
}

.planner-overview__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 4px;
    background: var(--planner-bg-alt, #F4EDE3);
    border: 1px solid var(--planner-border);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--planner-text);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planner-overview__chip svg {
    opacity: 0.6;
    flex-shrink: 0;
}

.planner-overview__chip--difficulty-beginner {
    border-color: #3A9E8F;
    color: #3A9E8F;
    background: rgba(58, 158, 143, 0.07);
}

.planner-overview__chip--difficulty-moderate {
    border-color: #D4922A;
    color: #D4922A;
    background: rgba(212, 146, 42, 0.07);
}

.planner-overview__chip--difficulty-advanced {
    border-color: #c45e3e;
    color: #c45e3e;
    background: rgba(196, 94, 62, 0.07);
}

/* --- Description paragraph --- */
.planner-overview__description {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--planner-border);
}

.planner-overview__description p {
    font-size: 0.875rem;
    color: var(--planner-muted);
    line-height: 1.65;
    margin: 0;
}

/* --- Expandable sections (Route / Getting There) --- */
.planner-overview__section {
    border-bottom: 1px solid var(--planner-border);
}

.planner-overview__section summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--planner-text);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.planner-overview__section summary::-webkit-details-marker { display: none; }

.planner-overview__section summary::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--planner-muted);
    border-bottom: 1.5px solid var(--planner-muted);
    transform: rotate(45deg);
    margin-left: auto;
    transition: transform 0.2s;
}

.planner-overview__section[open] summary::after {
    transform: rotate(-135deg);
}

.planner-overview__section p,
.planner-overview__section .planner-overview__windows-list {
    margin: 0;
    padding: 0 1.25rem 1rem;
    font-size: 0.8125rem;
    color: var(--planner-muted);
    line-height: 1.6;
}

/* --- Layout A new elements --- */
.planner-overview__section-lbl {
    font-size: 0.69rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--planner-muted);
    margin: 0.875rem 0 0.4rem;
    padding: 0 1.25rem;
    display: block;
}

.planner-overview__facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 0 1.25rem;
    margin-bottom: 0.25rem;
}

.planner-overview__fact {
    background: #f9f5f0;
    padding: 5px 8px;
    border-radius: 3px;
}

.planner-overview__fact-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--planner-muted);
    margin-bottom: 2px;
}

.planner-overview__fact-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--planner-text);
}

.planner-overview__permit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 3px;
    font-size: 0.69rem;
    font-weight: 700;
    margin: 0 1.25rem 0.25rem;
}

.planner-overview__permit--ok {
    background: rgba(58, 158, 143, 0.1);
    color: #3A9E8F;
}

.planner-overview__permit--warn {
    background: rgba(212, 146, 42, 0.1);
    color: var(--planner-primary);
}

.planner-overview__permit-sub {
    font-size: 0.72rem;
    color: var(--planner-muted);
    padding: 0 1.25rem;
    margin: 0 0 0.25rem;
}

.planner-overview__budget-range {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--planner-text);
    padding: 0 1.25rem;
    margin-bottom: 4px;
}

.planner-overview__budget-bar {
    height: 5px;
    background: var(--planner-border);
    border-radius: 3px;
    overflow: hidden;
    margin: 0 1.25rem 2px;
}

.planner-overview__budget-fill {
    height: 100%;
    background: var(--planner-primary);
    border-radius: 3px;
}

.planner-overview__budget-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.625rem;
    color: var(--planner-muted);
    padding: 0 1.25rem;
}

.planner-overview__sep {
    height: 1px;
    background: var(--planner-border);
    margin: 0.75rem 1.25rem;
}

.planner-overview__gear {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 1.25rem;
    margin-bottom: 0.5rem;
}

.planner-overview__gear-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.69rem;
    font-weight: 500;
    border: 1px solid #4a7fb5;
    color: #4a7fb5;
    background: rgba(74, 127, 181, 0.07);
}

/* --- Best windows --- */
.planner-overview__windows {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--planner-border);
}

.planner-overview__windows-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--planner-muted);
    margin: 0 0 0.5rem;
}

.planner-overview__windows-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.planner-overview__window-chip {
    display: block;
    padding: 0.35rem 0.6rem;
    border-left: 3px solid;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--planner-text);
    background: rgba(0,0,0,0.02);
}

/* --- Related tours / articles --- */
.planner-overview__related {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--planner-border);
}

.planner-overview__related:last-child {
    border-bottom: none;
}

.planner-overview__related-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--planner-muted);
    margin: 0 0 0.625rem;
}

.planner-overview__related-grid {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.planner-overview__related-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--planner-border);
    text-decoration: none;
    color: var(--planner-text);
    font-size: 0.8rem;
    font-weight: 500;
    transition: border-color 0.2s;
}

.planner-overview__related-card:hover {
    border-color: var(--planner-primary);
    color: var(--planner-primary);
}

.planner-overview__related-card img {
    width: 36px;
    height: 28px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Legacy item styles kept for backwards compat */
.planner-overview__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--planner-border);
}

.planner-overview__item:last-child {
    border-bottom: none;
}

.planner-overview__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 146, 42, 0.1);
    color: var(--planner-primary);
}

.planner-overview__icon--accent {
    background: var(--planner-primary);
    color: #FFFFFF;
}

.planner-overview__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--planner-muted);
    margin: 0 0 0.375rem;
}

.planner-overview__value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--planner-text);
    margin: 0;
    line-height: 1.5;
}

/* Map info card labels next to markers — hover-lifted by JS bring-to-front */
.planner-map__info-card {
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
    transform-box: fill-box;
}
.planner-map__info-card:hover {
    transform: scale(1.18);
}
.planner-map__info-card:hover .planner-map__info-name {
    paint-order: stroke fill;
    stroke: var(--color-surface, #FBF6F0);
    stroke-width: 3px;
    stroke-linejoin: round;
}

.planner-map__info-name {
    font-size: 10px;
    font-weight: 700;
    fill: var(--planner-text);
    user-select: none;
    pointer-events: auto;
}

.planner-map__info-detail {
    font-size: 8px;
    font-weight: 400;
    fill: var(--planner-muted);
    user-select: none;
}

.planner-map__info-season {
    font-size: 8px;
    font-weight: 500;
    font-style: italic;
    fill: var(--planner-primary);
    user-select: none;
}

/* Static labels embedded inside the destination's polygon SVG markup
   (city names, ocean labels, region labels). Make them respond to hover. */
.planner-map__landmass text {
    cursor: default;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                paint-order 0s, stroke-width 0s;
    transform-origin: center;
    transform-box: fill-box;
}
.planner-map__landmass text:hover {
    transform: scale(1.25);
    paint-order: stroke fill;
    stroke: var(--color-surface, #FBF6F0);
    stroke-width: 3px;
    stroke-linejoin: round;
}

/* ==========================================================================
   CALENDAR DETAIL RAIL (Phase 2 of calendar redesign)
   Sticky inspector below the calendar — updates on bar hover/focus, click
   to pin. Replaces the cursor-following tooltip for non-mobile contexts.
   ========================================================================== */

.planner-rail {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: var(--color-surface, #FBF6F0);
    border: 1px solid var(--color-border, #EDE4D9);
    border-radius: 6px;
    min-height: 96px;
    transition: background-color 0.2s ease;
}
.planner-rail--pinned {
    background: #FFFFFF;
    box-shadow: 0 0 0 2px var(--color-primary, #D4922A);
}
.planner-rail__placeholder {
    color: var(--color-text-muted, #6b7280);
    font-size: 0.8125rem;
    font-style: italic;
    line-height: 1.45;
}
.planner-rail__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}
.planner-rail__meta {
    flex: 1 1 auto;
    min-width: 0;
}
.planner-rail__season {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}
.planner-rail__title {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 0.35rem 0;
    color: var(--color-text, #1C1C1C);
}
.planner-rail__dates {
    font-size: 0.8125rem;
    color: var(--color-text-muted, #6b7280);
    margin: 0;
}
.planner-rail__intensity {
    flex: 0 0 140px;
    text-align: right;
}
.planner-rail__intensity-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted, #6b7280);
    margin-bottom: 0.35rem;
}
.planner-rail__intensity-bar {
    background: var(--color-border, #EDE4D9);
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}
.planner-rail__intensity-bar span {
    display: block;
    height: 100%;
    background: var(--color-primary, #D4922A);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.planner-rail__annotation {
    margin: 0.875rem 0 0 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text, #1C1C1C);
}
.planner-rail__unpin {
    margin-top: 0.875rem;
    background: transparent;
    border: 1px solid var(--color-border, #EDE4D9);
    border-radius: 4px;
    padding: 0.35rem 0.85rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.planner-rail__unpin:hover {
    color: var(--color-text, #1C1C1C);
    border-color: var(--color-text, #1C1C1C);
}

@media (max-width: 768px) {
    .planner-rail__head {
        flex-direction: column;
        gap: 0.5rem;
    }
    .planner-rail__intensity {
        flex: 1 1 auto;
        text-align: left;
        width: 100%;
    }
    .planner-rail__title {
        font-size: 1.125rem;
    }
}

/* ==========================================================================
   TOOLTIP (shared calendar + map)
   ========================================================================== */

.planner-tooltip {
    position: absolute;
    z-index: 100;
    width: 220px;
    padding: 0.75rem 0.875rem;
    background: #FFFFFF;
    border: 1px solid var(--planner-border);
    border-radius: var(--planner-radius);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    font-size: 0.75rem;
}

.planner-tooltip--visible {
    opacity: 1;
    transform: translateY(0);
}

.planner-tooltip--tinted {
    border-left: 4px solid var(--planner-primary);
}

.planner-tooltip__title {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--planner-text);
    margin: 0 0 0.25rem;
}

.planner-tooltip__subtitle {
    font-size: 0.6875rem;
    color: var(--planner-muted);
    margin: 0 0 0.375rem;
}

.planner-tooltip__row {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: 0.25rem;
    padding: 0.175rem 0;
    align-items: baseline;
}

.planner-tooltip__label {
    font-size: 0.6875rem;
    color: var(--planner-muted);
    white-space: nowrap;
}

.planner-tooltip__value {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--planner-text);
    word-break: break-word;
}

/* Hint shown inside the tooltip when no location is selected */
.planner-tooltip__hint {
    font-size: 0.6875rem;
    color: var(--planner-muted);
    font-style: italic;
}

/* ==========================================================================
   LOCATION DETAIL MODAL (desktop click on map marker)
   ========================================================================== */

.planner-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 400;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.planner-modal--open {
    display: flex;
}

.planner-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.planner-modal__panel {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    border-radius: 8px;
    width: 100%;
    max-width: 580px;
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.planner-modal__content {
    position: relative;
    overflow-y: auto;
    flex: 1;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Mobile: modal is never used (bottom sheet handles it) */
@media (max-width: 767px) {
    .planner-modal {
        display: none !important;
    }

    /* Location-name labels stay visible on mobile — the SVG sizes were
       bumped (see @media 768px block) so they read at chip-pill scale. */
}

/* ==========================================================================
   DETAIL PANEL (legacy slide-up — kept for markup, not shown on desktop)
   ========================================================================== */

.planner-detail {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
    position: relative;
    z-index: 10;
    display: none;
}

.planner-detail--open {
    display: block;
}

.planner-detail__wrapper {
    background: #FFFFFF;
    border: 2px solid var(--planner-primary);
    border-radius: 8px;
    overflow: hidden;
    transform: translateY(24px);
    opacity: 0;
    transition: transform var(--planner-detail-speed) cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity var(--planner-detail-speed) ease;
    box-shadow: 0 8px 24px rgba(212, 146, 42, 0.12);
}

.planner-detail__wrapper--visible {
    transform: translateY(0);
    opacity: 1;
}

.planner-detail__empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--planner-muted);
    font-size: 1rem;
}

.planner-detail__empty-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
    color: var(--planner-primary);
}

/* Location cover image inside detail modal */
.planner-detail__cover {
    position: relative;
    width: 100%;
    max-height: 320px;
    overflow: hidden;
    background: var(--planner-surface);
}
.planner-detail__cover img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: cover;
}
.planner-detail__cover--empty {
    padding: 1rem 1.75rem;
    border-bottom: 1px solid var(--planner-border);
}
.planner-detail__edit-cover-btn {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    background: rgba(0, 0, 0, 0.7);
    color: #FFFFFF;
    border: none;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
}
.planner-detail__edit-cover-btn:hover {
    background: var(--planner-primary, #D4922A);
}
.planner-detail__edit-cover-btn--center {
    position: relative;
    bottom: auto;
    right: auto;
    margin: 0 auto;
    background: var(--planner-surface);
    color: var(--planner-primary);
    border: 1px dashed var(--planner-primary);
}
.planner-detail__edit-cover-btn--center:hover {
    background: var(--planner-primary);
    color: #FFFFFF;
}
.planner-detail__cover--empty {
    text-align: center;
}
.planner-detail__cover-editor {
    border-bottom: 1px solid var(--planner-border);
    background: #FFFFFF;
}

.planner-detail__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.75rem;
    border-bottom: 2px solid var(--planner-primary);
    flex-wrap: wrap;
    background: rgba(212, 146, 42, 0.04);
}

.planner-detail__name {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--planner-text);
    margin: 0;
    letter-spacing: -0.02em;
    text-transform: none;
}

.planner-detail__spots {
    font-size: 0.95rem;
    color: var(--planner-muted);
    margin: 0;
    font-weight: 500;
}

.planner-detail__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--planner-primary);
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(212, 146, 42, 0.3);
}

/* Month bar chart */
.planner-detail__months {
    display: flex;
    gap: 0.5rem;
    padding: 1.75rem;
    background: rgba(212, 146, 42, 0.025);
}

.planner-detail__month-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.planner-detail__month-bar-wrap {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.25rem;
}

.planner-detail__month-bar {
    width: 60%;
    max-width: 40px;
    border-radius: 3px 3px 0 0;
    transition: height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
    transform-origin: bottom;
    box-shadow: 0 2px 8px rgba(212, 146, 42, 0.1);
}

.planner-detail__month-bar:hover {
    box-shadow: 0 4px 14px rgba(212, 146, 42, 0.25);
}

/* Quality to height mapping via data attributes handled in JS;
   bold solid colors */
.planner-detail__month-bar--q1 { background: #D4922A; height: 20px; opacity: 0.35; }
.planner-detail__month-bar--q2 { background: #D4922A; height: 45px; opacity: 0.55; }
.planner-detail__month-bar--q3 { background: #D4922A; height: 70px; opacity: 0.80; }
.planner-detail__month-bar--q4 { background: #D4922A; height: 100px; opacity: 1; }

.planner-detail__month-label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--planner-muted);
    letter-spacing: 0.08em;
}

.planner-detail__month-label--current {
    color: var(--planner-primary);
    font-weight: 700;
    text-shadow: 0 0 0 rgba(212, 146, 42, 0.2);
}

/* Info cards row */
.planner-detail__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1.75rem;
}

.planner-detail__card {
    padding: 1.25rem;
    border: 2px solid var(--planner-border);
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.planner-detail__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.planner-detail__card--golden {
    background: rgba(212, 146, 42, 0.08);
    border-color: rgba(212, 146, 42, 0.3);
}

.planner-detail__card--golden:hover {
    border-color: var(--planner-primary);
    background: rgba(212, 146, 42, 0.12);
}

.planner-detail__card--weather {
    background: rgba(74, 127, 181, 0.08);
    border-color: rgba(74, 127, 181, 0.3);
}

.planner-detail__card--weather:hover {
    border-color: #4a7fb5;
    background: rgba(74, 127, 181, 0.12);
}

.planner-detail__card--crowd {
    background: rgba(58, 158, 143, 0.08);
    border-color: rgba(58, 158, 143, 0.3);
}

.planner-detail__card--crowd:hover {
    border-color: var(--planner-secondary);
    background: rgba(58, 158, 143, 0.12);
}

.planner-detail__card-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.planner-detail__card-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--planner-muted);
    margin: 0 0 0.5rem;
}

.planner-detail__card-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--planner-text);
    margin: 0 0 0.25rem;
    letter-spacing: -0.02em;
}

.planner-detail__card-sub {
    font-size: 0.8125rem;
    color: var(--planner-muted);
    margin: 0;
    font-weight: 500;
}

/* Pro tips */
.planner-detail__tips {
    padding: 1.5rem 1.75rem;
    border-top: 2px solid var(--planner-primary);
    background: rgba(212, 146, 42, 0.04);
}

.planner-detail__tips-title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--planner-primary);
    margin: 0 0 0.75rem;
}

.planner-detail__tips-text {
    font-size: 1rem;
    color: var(--planner-text);
    line-height: 1.7;
    margin: 0;
    font-weight: 500;
}

/* ==========================================================================
   PHOTO SPOTS SECTION (inside detail panel)
   ========================================================================== */

.planner-detail__spots-section {
    padding: 1rem 1.25rem 0.75rem;
    border-top: 1px solid var(--planner-border);
}

.planner-detail__spots-loading {
    font-size: 0.75rem;
    color: var(--planner-muted);
    margin: 0;
    font-style: italic;
}

.planner-detail__spots-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--planner-muted);
    margin: 0 0 0.625rem;
}

.planner-detail__spots-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.planner-detail__spot-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--planner-border);
    text-decoration: none;
    color: var(--planner-text);
    transition: border-color 0.15s;
}

.planner-detail__spot-card:hover {
    border-color: var(--planner-primary);
}

.planner-detail__spot-thumb {
    width: 40px;
    height: 30px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--planner-border);
}

.planner-detail__spot-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.planner-detail__spot-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.planner-detail__spot-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--planner-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.planner-detail__spot-meta {
    font-size: 0.7rem;
    color: var(--planner-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.planner-detail__spots-seeall {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--planner-primary);
    text-decoration: none;
    margin-bottom: 0.5rem;
}

.planner-detail__spots-seeall:hover {
    text-decoration: underline;
}

.planner-detail__spots-contribute {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--planner-muted);
    text-decoration: none;
    padding: 0.35rem 0;
}

.planner-detail__spots-contribute:hover {
    color: var(--planner-primary);
}

/* Close button on detail */
.planner-detail__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 28px;
    height: 28px;
    border: 1px solid var(--planner-border);
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--planner-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    font-size: 0.875rem;
    line-height: 1;
}

.planner-detail__close:hover {
    background: var(--planner-surface);
    color: var(--planner-text);
}

/* Responsive detail cards */
@media (max-width: 1024px) {
    .planner-detail__cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .planner-detail__cards {
        grid-template-columns: 1fr;
    }

    .planner-detail__name {
        font-size: 1.5rem;
    }

    .planner-detail__months {
        padding: 1.25rem;
    }

    .planner-detail__cards {
        padding: 1.25rem;
    }

    .planner-detail__tips {
        padding: 1.25rem;
    }
}

/* ==========================================================================
   DISCOVERY PAGE
   ========================================================================== */

.planner-discovery {
    max-width: 1280px;
    margin: 0 auto;
    padding: 3rem 1rem 3rem;
    position: relative;
    z-index: 5;
}

@media (min-width: 640px) {
    .planner-discovery {
        padding: 0 1.5rem 3rem;
    }
}

@media (min-width: 1024px) {
    .planner-discovery {
        padding: 0 2rem 3rem;
    }
}

/* Planner hero overrides */
.planner-hero-tag {
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.75rem;
}

.planner-hero-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    text-transform: none;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.planner-hero-subtitle {
    max-width: 580px;
}

/* Discovery CTA */
.planner-discovery__cta {
    text-align: center;
    margin-top: 3rem;
    padding-bottom: 1rem;
}

.planner-discovery__cta-btn {
    font-size: 0.9375rem;
    padding: 0.75rem 2rem;
    border-radius: 8px;
}

/* ==========================================================================
   ACTION BUTTONS (share, compare on destination header)
   ========================================================================== */

.planner-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--planner-text);
    background: #FFFFFF;
    border: 1px solid var(--planner-border);
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.planner-action-btn:hover {
    border-color: var(--planner-primary);
    color: var(--planner-primary);
    box-shadow: 0 2px 8px rgba(212, 146, 42, 0.1);
}

.planner-action-btn:focus {
    outline: 2px solid var(--planner-primary);
    outline-offset: 2px;
}

.planner-action-btn:active {
    background: var(--planner-surface);
}

.planner-action-btn svg {
    flex-shrink: 0;
}

/* Success state (after copy-to-clipboard) */
.planner-action-btn--success {
    border-color: #3A9E8F;
    color: #3A9E8F;
    background: rgba(58, 158, 143, 0.05);
}

/* Danger state (staff-only flag button) */
.planner-action-btn--danger {
    border-color: #C0392B;
    color: #C0392B;
}
.planner-action-btn--danger:hover {
    background: #C0392B;
    color: #FFFFFF;
}

/* =========================================================================
   COVER EDITOR — staff modal (desktop) + bottom sheet (mobile)
   Reuses the .planner-modal pattern (flat colors, no gradients).
   ========================================================================= */

.planner-cover-editor-modal,
.planner-cover-editor-sheet {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 500;
}

.planner-cover-editor-modal--open,
.planner-cover-editor-sheet--open {
    display: block;
}

.planner-cover-editor-modal__overlay,
.planner-cover-editor-sheet__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.planner-cover-editor-modal__panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #FFFFFF;
    width: min(640px, calc(100vw - 3rem));
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
    border-radius: 4px;
}

.planner-cover-editor-sheet__panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #FFFFFF;
    max-height: 92vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.planner-cover-editor-sheet__handle {
    width: 36px;
    height: 4px;
    background: #DDD3C5;
    border-radius: 2px;
    margin: 0.6rem auto 0;
}

@media (min-width: 768px) {
    .planner-cover-editor-sheet { display: none !important; }
}
@media (max-width: 767px) {
    .planner-cover-editor-modal { display: none !important; }
}

/* Editor body (shared by modal, sheet, and inline) */
.planner-cover-editor {
    padding: 1.25rem 1.5rem 1.75rem;
    color: var(--planner-text, #1C1C1C);
    font-family: var(--font-body, Inter, sans-serif);
}

.planner-cover-editor__header {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1rem;
    position: relative;
}

.planner-cover-editor__heading {
    flex: 1;
    min-width: 0;
}

.planner-cover-editor__kicker {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--planner-primary, #D4922A);
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.planner-cover-editor__title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    margin: 0;
    line-height: 1.2;
}

.planner-cover-editor__close {
    background: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 0;
    align-self: flex-start;
}
.planner-cover-editor__close:hover { color: #000; }

/* Inline-mode back affordance — clearly NOT the modal close X */
.planner-cover-editor__close--back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    color: var(--planner-primary, #D4922A);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    font-family: inherit;
}
.planner-cover-editor__close--back:hover {
    color: #1C1C1C;
}

.planner-cover-editor__current {
    margin-bottom: 1rem;
    background: var(--planner-surface, #FBF6F0);
    border: 1px solid var(--planner-border, #EDE4D9);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.planner-cover-editor__current-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.planner-cover-editor__current-img--empty {
    color: var(--planner-dim, #999);
    font-size: 0.85rem;
}

.planner-cover-editor__actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.planner-cover-editor__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    background: #FFFFFF;
    color: var(--planner-text, #1C1C1C);
    border: 1px solid var(--planner-border, #EDE4D9);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.planner-cover-editor__btn:hover {
    background: var(--planner-surface, #FBF6F0);
}
.planner-cover-editor__btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.planner-cover-editor__btn--danger {
    border-color: #C0392B;
    color: #C0392B;
}
.planner-cover-editor__btn--danger:hover {
    background: #C0392B;
    color: #FFFFFF;
}

.planner-cover-editor__btn--primary {
    background: var(--planner-primary, #D4922A);
    color: #FFFFFF;
    border-color: var(--planner-primary, #D4922A);
}
.planner-cover-editor__btn--primary:hover {
    background: #B07A1F;
    border-color: #B07A1F;
}

.planner-cover-editor__upload {
    margin-bottom: 1rem;
}
.planner-cover-editor__drop {
    position: relative;
    border: 2px dashed var(--planner-border, #EDE4D9);
    background: var(--planner-surface, #FBF6F0);
    text-align: center;
    padding: 1.25rem 1rem;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.planner-cover-editor__drop:hover {
    border-color: var(--planner-primary, #D4922A);
    background: #FFFFFF;
}
.planner-cover-editor__drop--over {
    border-color: var(--planner-primary, #D4922A);
    background: #FFFFFF;
}
.planner-cover-editor__file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.planner-cover-editor__drop-empty {
    color: var(--planner-dim, #777);
    pointer-events: none;
}
.planner-cover-editor__drop-empty svg {
    color: var(--planner-primary, #D4922A);
    margin-bottom: 0.4rem;
}
.planner-cover-editor__drop-text {
    font-size: 0.85rem;
    color: var(--planner-text, #1C1C1C);
    margin-bottom: 0.2rem;
}
.planner-cover-editor__drop-link {
    color: var(--planner-primary, #D4922A);
    text-decoration: underline;
}
.planner-cover-editor__drop-hint {
    font-size: 0.7rem;
    color: var(--planner-dim, #999);
}
.planner-cover-editor__drop-preview {
    display: none;
    width: 100%;
    max-height: 240px;
    object-fit: contain;
    background: #1C1C1C;
}
.planner-cover-editor__upload-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.planner-cover-editor__url-form {
    margin-bottom: 1.25rem;
}
.planner-cover-editor__label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--planner-dim, #777);
    margin-bottom: 0.35rem;
    font-weight: 600;
}
.planner-cover-editor__url-row {
    display: flex;
    gap: 0.4rem;
}
.planner-cover-editor__url-input {
    flex: 1;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--planner-border, #EDE4D9);
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--planner-text, #1C1C1C);
    background: #FFFFFF;
    min-width: 0;
}
.planner-cover-editor__url-input:focus {
    outline: none;
    border-color: var(--planner-primary, #D4922A);
}

.planner-cover-editor__pool {
    margin-top: 0.5rem;
}
.planner-cover-editor__pool-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.planner-cover-editor__pool-title {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--planner-dim, #777);
    font-weight: 600;
}
.planner-cover-editor__pool-count {
    font-size: 0.75rem;
    color: var(--planner-dim, #777);
}
.planner-cover-editor__pool-empty {
    margin: 0;
    padding: 1.25rem;
    background: var(--planner-surface, #FBF6F0);
    border: 1px dashed var(--planner-border, #EDE4D9);
    font-size: 0.8rem;
    color: var(--planner-dim, #777);
    text-align: center;
}
.planner-cover-editor__pool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.4rem;
}

.planner-cover-editor__tile {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--planner-surface, #FBF6F0);
    border: 2px solid var(--planner-border, #EDE4D9);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}
.planner-cover-editor__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.planner-cover-editor__tile:hover {
    border-color: var(--planner-primary, #D4922A);
}
.planner-cover-editor__tile--active {
    border-color: var(--planner-primary, #D4922A);
}
.planner-cover-editor__tile--pinned {
    border-color: #3A9E8F;
}

.planner-cover-editor__tile-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.65);
    color: #FFFFFF;
    font-size: 0.6rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    font-weight: 600;
}
.planner-cover-editor__tile--active .planner-cover-editor__tile-badge {
    background: var(--planner-primary, #D4922A);
}
.planner-cover-editor__tile--pinned .planner-cover-editor__tile-badge {
    background: #3A9E8F;
}

.planner-cover-editor__hint {
    margin: 1rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--planner-border, #EDE4D9);
    font-size: 0.75rem;
    color: var(--planner-dim, #777);
    line-height: 1.4;
}

.planner-cover-editor__loading,
.planner-cover-editor__error {
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--planner-dim, #777);
    font-size: 0.85rem;
}

/* Discovery empty state */
.planner-discovery__empty {
    color: var(--planner-dim);
    text-align: center;
    padding: 2rem;
    grid-column: 1 / -1;
}

/* Hero search bar modifier (white-on-dark styling inside hero) */
.planner-search--hero {
    max-width: 720px;
    width: 100%;
}

.planner-search--hero .planner-search__input {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}

.planner-search--hero .planner-search__input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.planner-search--hero .planner-search__input:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.planner-search--hero .planner-search__icon {
    color: rgba(255, 255, 255, 0.6);
}

/* Discovery grid (matches tour card grid pattern) */
.planner-discovery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 2rem 1.5rem;
}

@media (max-width: 768px) {
    .planner-discovery__grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* Scroll indicator in hero */
.planner-discovery__scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    animation: plannerScrollBounce 2.5s ease-in-out infinite;
}

.planner-discovery__scroll svg {
    width: 24px;
    height: 24px;
    color: rgba(255, 255, 255, 0.7);
}

@keyframes plannerScrollBounce {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 8px); }
}

/* Search bar */
.planner-search {
    position: relative;
    max-width: 520px;
    margin: 1.5rem auto 0;
}

.planner-search__input {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 2.75rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--planner-text);
    background: var(--planner-surface);
    border: 1px solid var(--planner-border);
    border-radius: 28px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.planner-search__input::placeholder {
    color: var(--planner-dim);
}

.planner-search__input:focus {
    border-color: var(--planner-primary);
    box-shadow: 0 0 0 3px rgba(212, 146, 42, 0.1);
}

.planner-search__icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--planner-dim);
    pointer-events: none;
    width: 18px;
    height: 18px;
}

/* Autocomplete dropdown */
.planner-search__results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border: 1px solid var(--planner-border);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 50;
    max-height: 240px;
    overflow-y: auto;
}

.planner-search__results--open {
    display: block;
}

.planner-search__result-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    cursor: pointer;
    transition: background 0.1s;
    text-decoration: none;
    color: inherit;
}

.planner-search__result-item:hover,
.planner-search__result-item--focused {
    background: var(--planner-surface);
}

.planner-search__result-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--planner-text);
}

.planner-search__result-sub {
    font-size: 0.75rem;
    color: var(--planner-muted);
}

.planner-search__no-results {
    padding: 1rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--planner-dim);
}

/* Filter chips */
.planner-chips {
    display: flex;
    gap: 0.5rem;
    padding: 1.5rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: center;
    flex-wrap: wrap;
}

.planner-chips::-webkit-scrollbar {
    display: none;
}

.planner-chip {
    flex-shrink: 0;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--planner-muted);
    background: #FFFFFF;
    border: 1px solid var(--planner-border);
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    user-select: none;
    white-space: nowrap;
}

.planner-chip:hover {
    border-color: var(--planner-primary);
    color: var(--planner-primary);
}

.planner-chip--active {
    background: var(--planner-primary);
    color: #FFFFFF;
    border-color: var(--planner-primary);
}

.planner-chip--active:hover {
    background: #c0841f;
    border-color: #c0841f;
    color: #FFFFFF;
}

/* Section headings — inherits from .section-title in platform-theme.css */
.planner-discovery__section-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-align: left;
    text-transform: none;
    color: var(--color-text, #1C1C1C);
    margin: 0 0 0.4rem;
}

.planner-discovery__section-subtitle {
    font-size: 0.9375rem;
    color: var(--planner-muted);
    margin: 0 0 2rem;
    line-height: 1.55;
}

.planner-discovery__section-head {
    margin-bottom: 1.75rem;
}

/* Discovery cards use tour-card-premium as <a> tags */
a.tour-card-premium {
    text-decoration: none;
    color: inherit;
}

/* Editorial restraint inside the planner: lighter card chrome,
   softer hover translate, no heavy bottom shadow. */
.planner-discovery__grid .tour-card-premium {
    border: 1px solid var(--color-border, #EDE4D9);
    box-shadow: none;
    border-radius: 10px;
    background: #FFFFFF;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.25s ease,
                box-shadow 0.25s ease;
}

.planner-discovery__grid .tour-card-premium:hover {
    transform: translateY(-3px);
    border-color: #d8c9b6;
    box-shadow: 0 8px 24px rgba(28, 28, 28, 0.06);
}

.planner-discovery__grid .tour-card-premium:focus-visible {
    outline: 2px solid var(--planner-primary, #D4922A);
    outline-offset: 3px;
}

/* Planner card image height (shorter than tour cards) */
.planner-discovery__grid .tour-card-image-wrapper {
    height: 200px;
}

/* Discovery card placeholder — editorial typographic treatment */
.planner-dest-card__placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--planner-surface);
    overflow: hidden;
}

.planner-dest-card__placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--planner-border);
    border-left: none;
    border-right: none;
    pointer-events: none;
}

.planner-dest-card__placeholder-initial {
    font-family: var(--font-display, 'Playfair Display', Georgia, serif);
    font-size: 5.5rem;
    line-height: 1;
    font-weight: 700;
    color: var(--planner-primary);
    letter-spacing: -0.04em;
    opacity: 0.85;
}

.planner-dest-card__placeholder-label {
    position: absolute;
    bottom: 0.875rem;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--planner-muted);
}

.planner-dest-card__badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--planner-primary);
    background: rgba(212, 146, 42, 0.08);
    border-radius: 3px;
    margin-bottom: 0.5rem;
}

.planner-dest-card__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    margin-bottom: 0.375rem;
}

.planner-dest-card__meta {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.planner-dest-card__meta-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--planner-dim);
}

.planner-dest-card__meta-item svg {
    flex-shrink: 0;
}

/* Section spacing */
.planner-discovery__section {
    margin-top: 4rem;
}

.planner-discovery__section:first-of-type {
    margin-top: 3rem;
}

/* ==========================================================================
   COMPARE PAGE
   ========================================================================== */

.planner-compare {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
}

.planner-compare__header {
    text-align: left;
    padding: 2rem 0 1.5rem;
}

.planner-compare__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.planner-compare__header-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--planner-text);
    margin: 0;
}

.planner-compare__selectors {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.planner-compare__select-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
    min-width: 200px;
    max-width: 320px;
}

.planner-compare__select-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--planner-muted);
}

.planner-compare__select {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-family: inherit;
    background: #FFFFFF;
    border: 1px solid var(--planner-border);
    border-radius: 8px;
    color: var(--planner-text);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.planner-compare__select:focus {
    border-color: var(--planner-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(212, 146, 42, 0.1);
}

.planner-compare__vs {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--planner-dim);
    padding-bottom: 0.625rem;
}

.planner-compare__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.planner-compare__empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--planner-dim);
    font-size: 0.9375rem;
    border: 1px dashed var(--planner-border);
    border-radius: var(--planner-radius);
}

/* ==========================================================================
   CROSS-LINK HIGHLIGHTS
   ========================================================================== */

.planner-calendar__bar--highlight {
    stroke-width: 2.5px;
    filter: brightness(1.2);
    animation: planner-bar-glow 0.6s ease-out;
}

@keyframes planner-bar-glow {
    0% { stroke-width: 1.5px; }
    50% { stroke-width: 3px; }
    100% { stroke-width: 2.5px; }
}

@keyframes planner-marker-ring-pulse {
    0% { stroke-width: 2px; stroke-opacity: 1; }
    50% { stroke-width: 5px; stroke-opacity: 0.5; }
    100% { stroke-width: 2px; stroke-opacity: 1; }
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

/* Route draw */
@keyframes planner-route-draw {
    to { stroke-dashoffset: 0; }
}

/* Bar cascade: scaleX entrance */
.planner-calendar__bar--animate {
    transform-origin: left center;
    animation: planner-bar-enter 0.4s ease-out forwards;
    opacity: 0;
    transform: scaleX(0);
}

@keyframes planner-bar-enter {
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Marker pop-in */
.planner-map__marker--animate {
    animation: planner-marker-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
    transform: scale(0);
}

@keyframes planner-marker-pop {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Arrow flow */
.planner-calendar__wave-arrow--animate {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: planner-arrow-flow 1.5s ease-out forwards;
}

@keyframes planner-arrow-flow {
    to { stroke-dashoffset: 0; }
}

/* Current month pulse */
@keyframes planner-month-pulse {
    0%, 100% { opacity: 0.06; }
    50% { opacity: 0.12; }
}

/* Detail month bar stagger */
.planner-detail__month-bar--animate {
    transform-origin: bottom;
    animation: planner-detail-bar-enter 0.3s ease-out forwards;
    transform: scaleY(0);
}

@keyframes planner-detail-bar-enter {
    to { transform: scaleY(1); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .planner-calendar__bar--animate,
    .planner-map__marker--animate,
    .planner-map__route--animated,
    .planner-calendar__wave-arrow--animate,
    .planner-calendar__current-month--pulse,
    .planner-detail__month-bar--animate,
    .planner-calendar__bar--highlight,
    .planner-map__marker--pulse .planner-map__marker-circle {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        stroke-dashoffset: 0 !important;
    }

    .planner-detail__wrapper {
        transition: none !important;
    }
}

/* ==========================================================================
   MOBILE (< 768px)
   ========================================================================== */

/* Mobile tab bar */
.planner-mobile-tabs {
    display: none;
    position: sticky;
    top: 80px; /* Below navbar */
    z-index: 40;
    background: #FFFFFF;
    border-bottom: 1px solid var(--planner-border);
}

.planner-mobile-tabs__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.planner-mobile-tabs__item {
    flex: 1;
}

.planner-mobile-tabs__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.625rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--planner-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.planner-mobile-tabs__btn--active {
    color: var(--planner-primary);
    border-bottom-color: var(--planner-primary);
}

.planner-mobile-tabs__btn svg {
    width: 16px;
    height: 16px;
}

/* Bottom sheet */
.planner-bottom-sheet {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    max-height: 88vh;
    max-height: 88dvh; /* dynamic viewport height — respects browser chrome on iOS */
    background: #FFFFFF;
    border-top: 1px solid var(--planner-border);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(100%);
    transition: transform var(--planner-detail-speed) ease;
    overflow: hidden;
}

.planner-bottom-sheet--open {
    transform: translateY(0);
}

.planner-bottom-sheet__handle {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0 0.25rem;
    cursor: grab;
}

.planner-bottom-sheet__handle-bar {
    width: 36px;
    height: 4px;
    background: var(--planner-border);
    border-radius: 2px;
}

.planner-bottom-sheet__content {
    overflow-y: auto;
    max-height: calc(88vh - 52px);
    max-height: calc(88dvh - 52px);
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 12px);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.planner-bottom-sheet__overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(0, 0, 0, 0.3);
}

.planner-bottom-sheet__overlay--visible {
    display: block;
}

@media (max-width: 768px) {
    .planner-mobile-tabs {
        display: block;
    }

    /* Touch targets: minimum 44px per WCAG guidelines */
    .planner-mobile-tabs__btn {
        min-height: 44px;
        padding: 0.625rem 0.5rem;
    }

    .planner__header {
        padding: 1.25rem 1rem 1rem;
    }

    .planner__header-title {
        font-size: 1.5rem;
    }

    .planner__header-subtitle {
        font-size: 0.8125rem;
    }

    .planner__header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .planner__header-actions {
        width: 100%;
    }

    /* Action buttons: full width on mobile, 44px min touch target */
    .planner-action-btn {
        min-height: 44px;
        flex: 1;
        justify-content: center;
    }

    .planner__section {
        padding: 0 0.75rem 1rem;
    }

    .planner__canvas {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .planner__canvas--map {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .planner__panel--map {
        position: static;
    }

    /* Calendar: JS sizes SVG to fit viewport — no min-width, scroll only as fallback */
    .planner-calendar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .planner-calendar__svg {
        min-width: unset;
        width: 100%;
        height: auto;
    }

    .planner-calendar__month-header {
        font-size: 8px;
    }

    .planner-calendar__row-label {
        font-size: 9px;
    }

    /* Map: reset min-height on mobile */
    .planner-map {
        min-height: 280px;
    }

    .planner-map__svg {
        min-height: 260px;
    }

    /* Map sizing on mobile: SVG content scales down to ~0.5x at typical
       phone widths, which makes 9–11px SVG text feel half the size of the
       18px HTML mode-chip pill. Bump SVG sizes so markers, labels, and
       route strokes feel proportionate to the chip. Inline `style` on text
       elements requires !important to override. */
    .planner-map__marker-circle {
        r: 22;
        stroke-width: 3.5 !important;
    }

    .planner-map__marker-ring {
        r: 32;
        stroke-width: 3 !important;
    }

    .planner-map__marker-label {
        font-size: 24px !important;
    }

    .planner-map__info-name {
        font-size: 22px !important;
        font-weight: 700;
    }

    /* Route strokes — scale up so the dashed lines read on mobile */
    .planner-map__route { stroke-width: 6 !important; }
    .planner-map__route--road { stroke-width: 6 !important; }
    .planner-map__route--flight { stroke-width: 5 !important; stroke-dasharray: 18 11 !important; }
    .planner-map__route--ferry { stroke-width: 5.5 !important; stroke-dasharray: 6 7 !important; }
    .planner-map__route--train { stroke-width: 5 !important; }
    .planner-map__route--hike { stroke-width: 5 !important; }
    .planner-map__route-shadow { stroke-width: 16 !important; }
    .planner-map__route-shadow.planner-map__route--road { stroke-width: 16 !important; }
    .planner-map__route-shadow.planner-map__route--flight { stroke-width: 14 !important; stroke-dasharray: 18 11 !important; }
    .planner-map__route-shadow.planner-map__route--ferry { stroke-width: 14 !important; }
    .planner-map__route-shadow.planner-map__route--train { stroke-width: 14 !important; }
    .planner-map__route-shadow.planner-map__route--hike { stroke-width: 14 !important; }

    /* Photo spot dots — bumped from r=4 (1.7px CSS at mobile scale, invisible)
       to r=12 (~5px CSS), so they read as tappable dots */
    .planner-map__spot-dot {
        r: 12;
        stroke-width: 1.8 !important;
    }

    /* Mode chip pill stays at 18px (HTML overlay, CSS pixels) — already
       the visual reference for everything above */

    /* Detail: use bottom sheet on mobile */
    .planner-detail {
        display: none;
    }

    .planner-bottom-sheet {
        display: block;
    }

    .planner-detail__cards {
        grid-template-columns: 1fr;
    }

    .planner-detail__months {
        overflow-x: auto;
        padding: 1rem 0.75rem;
    }

    .planner-detail__month-col {
        min-width: 36px;
    }

    .planner-detail__close {
        width: 44px;
        height: 44px;
    }

    /* Discovery hero */
    .planner-hero-title {
        font-size: 1.75rem;
    }

    .planner-hero-subtitle {
        font-size: 0.875rem;
    }

    .planner-search--hero .planner-search__input {
        font-size: 0.9375rem;
        padding: 0.75rem 1rem 0.75rem 2.5rem;
    }

    /* Discovery content */
    .planner-discovery {
        padding: 0 0.75rem 2rem;
    }

    .planner-discovery__section-title {
        font-size: 1.25rem;
    }

    .planner-discovery__section-subtitle {
        font-size: 0.8125rem;
    }

    .planner-chips {
        justify-content: flex-start;
        flex-wrap: nowrap;
        padding: 1rem 0;
    }

    /* Chips: 44px touch target */
    .planner-chip {
        min-height: 44px;
        padding: 0.5rem 1rem;
        display: inline-flex;
        align-items: center;
    }

    /* Search results: 44px touch targets */
    .planner-search__result-item {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }

    /* Map marker ring: subtle visibility on mobile for touch feedback */
    .planner-map__marker-ring {
        opacity: 0.25;
    }

    /* Map footer: stack on narrow screens */
    .planner-map__footer {
        flex-direction: column;
        gap: 0.5rem;
    }

    .planner-map__footer-box {
        min-width: 0;
    }

    /* Bottom sheet handle: larger touch area */
    .planner-bottom-sheet__handle {
        padding: 0.75rem 0 0.5rem;
        min-height: 44px;
    }

    /* Tooltip: prevent horizontal overflow */
    .planner-tooltip {
        max-width: calc(100vw - 2rem);
    }

    /* Discovery CTA button */
    .planner-discovery__cta {
        margin-top: 2rem;
    }

    .planner-discovery__cta-btn {
        width: 100%;
        max-width: 320px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
    }

    /* First-use hint dismiss: 44px touch target */
    .planner-hint__dismiss {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Range summary close button: 44px touch target */
    .planner-range-summary__close {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Compare */
    .planner-compare {
        padding: 0 0.75rem 2rem;
    }

    .planner-compare__header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .planner-compare__header-title {
        font-size: 1.5rem;
    }

    .planner-compare__selectors {
        flex-direction: column;
        align-items: stretch;
    }

    .planner-compare__select-wrap {
        max-width: 100%;
    }

    .planner-compare__select {
        min-height: 44px;
        font-size: 1rem;
    }

    .planner-compare__vs {
        text-align: center;
        padding-bottom: 0;
    }

    .planner-compare__grid {
        grid-template-columns: 1fr;
    }

    .planner-compare__empty {
        padding: 2rem 0.75rem;
    }

    /* Range summary stacks vertically on mobile */
    .planner-range-summary__grid {
        grid-template-columns: 1fr;
    }

    .planner-range-summary__col + .planner-range-summary__col {
        border-left: none;
        border-top: 1px solid var(--planner-border);
    }

    /* Related links: 44px touch targets */
    .planner-related {
        padding: 0 0.75rem 1.5rem;
    }

    .planner-related__link {
        min-height: 44px;
        padding: 0.5rem 0.875rem;
        display: inline-flex;
        align-items: center;
    }

    /* Breadcrumb touch-friendly */
    .planner__breadcrumb {
        font-size: 0.75rem;
    }

    .planner__breadcrumb a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Scroll indicator: tighter on mobile */
    .planner-discovery__scroll {
        bottom: 1rem;
    }

    /* Map: let SVG fill naturally without forcing min-height */
    .planner-map {
        min-height: 0;
    }

    .planner-map__svg {
        min-height: 0;
    }

    /* Trip overview: JS removes [open] attribute on mobile for initial load.
       The .planner-overview__section details are interactive — no CSS override needed. */

    /* Tighter spacing for the new Layout A info blocks on mobile */
    .planner-overview__section-lbl {
        margin-top: 0.625rem;
        padding: 0 0.875rem;
    }

    .planner-overview__facts {
        padding: 0 0.875rem;
        gap: 4px;
    }

    .planner-overview__permit {
        margin: 0 0.875rem 0.125rem;
    }

    .planner-overview__permit-sub {
        padding: 0 0.875rem;
    }

    .planner-overview__budget-range {
        padding: 0 0.875rem;
    }

    .planner-overview__budget-bar {
        margin: 0 0.875rem 2px;
    }

    .planner-overview__budget-labels {
        padding: 0 0.875rem;
    }

    .planner-overview__sep {
        margin: 0.5rem 0.875rem;
    }

    .planner-overview__gear {
        padding: 0 0.875rem;
    }

    /* Panel title slightly smaller on mobile */
    .planner__panel-title {
        font-size: 0.75rem;
        padding: 0.75rem 0.875rem 0.625rem;
    }

    /* Overview chips: wrap normally, reduce gap */
    .planner-overview__chips {
        gap: 0.3rem;
        padding: 0.625rem 0.875rem 0.375rem;
    }

    .planner-overview__description {
        padding: 0.625rem 0.875rem 0;
    }

    /* Section expandables: tighter on mobile */
    .planner-overview__section summary {
        padding: 0.625rem 0.875rem;
        font-size: 0.7rem;
    }

    .planner-overview__section p,
    .planner-overview__section .planner-overview__windows-list {
        padding: 0 0.875rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* Extra-small screens (375px iPhone SE and below) */
@media (max-width: 375px) {
    .planner__header-title {
        font-size: 1.25rem;
    }

    .planner-compare__header-title {
        font-size: 1.25rem;
    }

    .planner-discovery__section-title {
        font-size: 1.125rem;
    }

    /* Hide action button text labels; icon-only */
    .planner-action-btn span {
        display: none;
    }

    .planner-action-btn {
        padding: 0.5rem 0.75rem;
        min-width: 44px;
    }

    /* Calendar: JS handles sizing — no override needed */

    /* Month bars narrower */
    .planner-detail__month-col {
        min-width: 28px;
    }

    .planner-detail__month-bar-wrap {
        height: 40px;
    }

    /* Search input slightly tighter padding */
    .planner-search--hero .planner-search__input {
        padding: 0.625rem 0.75rem 0.625rem 2.25rem;
        font-size: 0.875rem;
    }

    .planner-hero-title {
        font-size: 1.5rem;
    }

    .planner-hero-subtitle {
        font-size: 0.8125rem;
    }
}

/* Tablet (768 - 1024px): stacked for map section */
@media (min-width: 768px) and (max-width: 1024px) {
    .planner__canvas--map {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .planner__panel--map {
        position: static;
    }
}

/* ==========================================================================
   ARIA / FOCUS
   ========================================================================== */

.planner-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Links within planner */
.planner a.planner-link {
    color: var(--planner-primary);
    text-decoration: none;
    font-weight: 500;
}

.planner a.planner-link:hover {
    text-decoration: underline;
}

/* Related tours/articles links */
.planner-related {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
}

.planner-related__title {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--planner-text);
    margin: 0 0 0.75rem;
}

.planner-related__list {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.planner-related__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--planner-primary);
    background: rgba(212, 146, 42, 0.06);
    border: 1px solid rgba(212, 146, 42, 0.15);
    border-radius: var(--planner-radius);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.planner-related__link:hover {
    background: rgba(212, 146, 42, 0.12);
    border-color: rgba(212, 146, 42, 0.3);
}

.planner-related__link svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ==========================================================================
   Expedition Cards Section
   ========================================================================== */
.planner-expeditions {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    border-top: 1px solid var(--planner-border, var(--color-border));
}

.planner-expeditions__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.planner-expeditions__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--planner-text);
    margin: 0;
}

.planner-expeditions__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.planner-expedition-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--planner-border, var(--color-border));
    background: var(--planner-surface, var(--color-surface));
}

.planner-expedition-card:hover {
    border-color: var(--planner-primary, var(--color-primary));
}

.planner-expedition-card__img-wrap {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--planner-border, var(--color-border));
}

.planner-expedition-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.planner-expedition-card__img-placeholder {
    width: 100%;
    height: 100%;
    background: var(--planner-border, var(--color-border));
}

.planner-expedition-card__difficulty {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    color: #fff;
}

.planner-expedition-card__difficulty--beginner {
    background: #3A9E8F;
}

.planner-expedition-card__difficulty--intermediate {
    background: var(--planner-primary, var(--color-primary));
}

.planner-expedition-card__difficulty--advanced,
.planner-expedition-card__difficulty--expert {
    background: #c0392b;
}

.planner-expedition-card__body {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.planner-expedition-card__name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--planner-text);
    margin: 0;
    line-height: 1.35;
}

.planner-expedition-card__dates {
    font-size: 0.8125rem;
    color: var(--planner-text-muted, #666);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.planner-expedition-card__price {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--planner-primary, var(--color-primary));
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.planner-expeditions__browse {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--planner-primary, var(--color-primary));
    text-decoration: none;
}

.planner-expeditions__browse:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Essential Reading Section
   ========================================================================== */
.planner-reading {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    border-top: 1px solid var(--planner-border, var(--color-border));
}

.planner-reading__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--planner-text);
    margin: 0 0 1rem;
}

.planner-reading__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.planner-reading__item {
    border-top: 1px solid var(--planner-border, var(--color-border));
}

.planner-reading__item:last-child {
    border-bottom: 1px solid var(--planner-border, var(--color-border));
}

.planner-reading__link {
    display: block;
    padding: 0.875rem 0;
    text-decoration: none;
    color: inherit;
}

.planner-reading__link:hover .planner-reading__article-title {
    color: var(--planner-primary, var(--color-primary));
}

.planner-reading__meta {
    margin-bottom: 0.25rem;
}

.planner-reading__category {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--planner-primary, var(--color-primary));
}

.planner-reading__article-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--planner-text);
    margin: 0 0 0.25rem;
    line-height: 1.35;
}

.planner-reading__excerpt {
    font-size: 0.8125rem;
    color: var(--planner-text-muted, #666);
    margin: 0;
    line-height: 1.5;
}

/* Best month CTA inside overview panel */
.planner-overview__best-month-cta {
    display: inline-block;
    margin-top: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--planner-primary, var(--color-primary));
    text-decoration: none;
}

.planner-overview__best-month-cta:hover {
    text-decoration: underline;
}

/* Responsive: expedition grid stacks on small screens */
@media (max-width: 768px) {
    .planner-expeditions__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Photography Tools Panel (planner context)
   ========================================================================== */
.planner-tools {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
}

.planner-tools__inner {
    background: var(--color-background, #FFFFFF);
    border: 1px solid var(--planner-border);
    border-radius: 12px;
    padding: 1.5rem;
}

.planner-tools__title {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--planner-text);
    margin: 0 0 0.25rem;
}

.planner-tools__subtitle {
    font-size: 0.8125rem;
    color: var(--planner-muted);
    margin: 0 0 1rem;
}

.planner-tools__loading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--planner-muted);
    font-size: 0.875rem;
}

.planner-tools__spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--planner-border);
    border-top-color: var(--planner-primary);
    border-radius: 50%;
    animation: pt-spin 0.6s linear infinite;
}

@keyframes pt-spin {
    to { transform: rotate(360deg); }
}

/* --- Calculator styles (used in dynamically rendered tools) --- */
.pt-calc-section {
    font-size: 0.875rem;
}

.pt-calc-heading {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--planner-text);
    margin: 0 0 0.75rem;
}

.pt-calc-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.pt-calc-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--planner-muted);
}

.pt-calc-input {
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--planner-border);
    border-radius: var(--planner-radius);
    font-size: 0.8125rem;
    background: var(--planner-surface);
    color: var(--planner-text);
    width: 100px;
}

.pt-calc-input:focus {
    outline: none;
    border-color: var(--planner-primary);
}

.pt-calc-btn {
    padding: 0.375rem 1rem;
    background: var(--planner-primary);
    color: #FFFFFF;
    border: none;
    border-radius: var(--planner-radius);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
}

.pt-calc-btn:hover {
    opacity: 0.85;
}

.pt-calc-result {
    margin-top: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: var(--planner-surface);
    border-radius: var(--planner-radius);
    font-size: 0.8125rem;
    color: var(--planner-text);
}

.pt-calc-result.hidden {
    display: none;
}

/* --- Sun & Moon styles --- */
.pt-sunmoon-input {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.pt-sunmoon-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.pt-sunmoon-section {
    font-size: 0.875rem;
}

.pt-sunmoon-heading {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--planner-text);
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pt-sunmoon-row {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    font-size: 0.8125rem;
}

.pt-sunmoon-label {
    color: var(--planner-muted);
}

.pt-sunmoon-value {
    font-weight: 500;
    color: var(--planner-text);
}

.pt-sunmoon-tip {
    font-size: 0.75rem;
    color: var(--planner-muted);
    font-style: italic;
    margin: 0.5rem 0 0;
}

/* --- Equipment styles --- */
.pt-equipment {
    display: grid;
    gap: 1rem;
}

.pt-equip-heading {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--planner-muted);
    margin: 0 0 0.375rem;
}

.pt-equip-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pt-equip-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: 0.8125rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.pt-equip-check {
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
    color: var(--planner-primary);
}

.pt-equip-name {
    font-weight: 500;
    color: var(--planner-text);
}

.pt-equip-tips {
    color: var(--planner-muted);
    font-size: 0.75rem;
}

/* Phenomena + monthly-conditions now render as shared .pt-scope instrument
   cards (see static/js/planner/tools.js + static/css/pt-instrument.css). The
   bespoke .pt-phenomena* / .pt-conditions-* rules were removed. */

/* ==========================================================================
   Daily Breakout Cards
   ========================================================================== */
.planner-daily {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
}

.planner-daily__inner {
    background: var(--color-background, #FFFFFF);
    border: 1px solid var(--planner-border);
    border-radius: 12px;
    padding: 1.5rem;
}

.planner-daily__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--planner-text);
    margin: 0 0 0.25rem;
}

.planner-daily__subtitle {
    font-size: 0.8125rem;
    color: var(--planner-muted);
    margin: 0 0 1rem;
}

.planner-daily__estimate {
    font-style: italic;
    color: var(--planner-dim);
}

.planner-daily__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.625rem;
}

.planner-daily__card {
    background: var(--planner-surface);
    border: 1px solid var(--planner-border);
    border-radius: 8px;
    padding: 0.75rem;
    text-align: center;
}

.planner-daily__card-date {
    margin-bottom: 0.375rem;
}

.planner-daily__card-day {
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--planner-muted);
}

.planner-daily__card-num {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--planner-text);
}

.planner-daily__score {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: var(--planner-radius);
    margin-bottom: 0.375rem;
}

.planner-daily__score--good {
    color: #15803d;
    background: rgba(21, 128, 61, 0.08);
}

.planner-daily__score--fair {
    color: #a16207;
    background: rgba(161, 98, 7, 0.08);
}

.planner-daily__score--poor {
    color: #b91c1c;
    background: rgba(185, 28, 28, 0.08);
}

.planner-daily__card-stats {
    text-align: left;
}

.planner-daily__stat {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    padding: 0.125rem 0;
    color: var(--planner-muted);
}

.planner-daily__stat-value {
    font-weight: 500;
    color: var(--planner-text);
}

/* --- Accordion overrides for planner context --- */
.planner-tools .pt-accordion-item {
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid var(--planner-border);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.planner-tools .pt-accordion-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.planner-tools .pt-accordion-trigger[aria-expanded="true"] .pt-accordion-icon {
    transform: rotate(180deg);
}

.planner-tools .pt-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.planner-tools .pt-accordion-content--expanded {
    max-height: 5000px;
}

/* --- Responsive --- */
@media (max-width: 640px) {
    .planner-tools,
    .planner-daily {
        padding: 0 0.75rem 1.5rem;
    }

    .planner-tools__inner,
    .planner-daily__inner {
        padding: 1rem;
    }

    .pt-sunmoon-grid {
        grid-template-columns: 1fr;
    }

    .pt-calc-row {
        flex-direction: column;
    }

    .pt-calc-input {
        width: 100%;
    }

    .planner-daily__grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
}

/* ==========================================================================
   PHT — Hero masthead (compact, photo + headline + search)
   ========================================================================== */

.pht {
    position: relative;
    /* Site-wide hero: full viewport under the 80px fixed nav. */
    height: calc(100vh - var(--nav-height, 80px));
    height: calc(100svh - var(--nav-height, 80px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pht .hero-aerial-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* Solid scrim — flat design, no gradients. */
.pht .hero-aerial-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 15, 0.48);
    z-index: 1;
}

.pht__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Masthead */
.pht__top {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem 3rem;
    text-align: center;
}

.pht__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.2vw, 3rem);
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.875rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: none;
    max-width: 18ch;
}

.pht__sub {
    font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
    color: rgba(255, 255, 255, 0.82);
    max-width: 520px;
    margin: 0 0 2rem;
    line-height: 1.55;
    font-weight: 400;
}

/* ==========================================================================
   MOBILE FILTER TRIGGER (hamburger pill)
   The drawer / overlay rules live with the discovery layout further down.
   ========================================================================== */

.planner-hamburger {
    position: fixed;
    top: 92px; /* sits below the 80px fixed nav, never overlaps the logo */
    left: 1rem;
    z-index: var(--planner-z-hamburger);
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 1rem 0 0.875rem;
    background: #FFFFFF;
    color: var(--color-text, #1C1C1C);
    border: 1px solid var(--color-border, #EDE4D9);
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.planner-hamburger::after {
    content: 'Filters';
}

.planner-hamburger:hover {
    color: var(--planner-primary, #D4922A);
    border-color: var(--planner-primary, #D4922A);
}

.planner-hamburger svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

@media (max-width: 768px) {
    .planner-hamburger {
        display: inline-flex;
    }
}

/* ==========================================================================
   WIZ2 — Filter blocks (light theme, Apple-inspired clarity)
   ========================================================================== */

.wiz2__block {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--color-border, #EDE4D9);
}

.wiz2__block:first-child { padding-top: 0.25rem; }

.wiz2__block:last-of-type {
    border-bottom: none;
    padding-bottom: 0.25rem;
}

.wiz2__block-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.65rem;
    gap: 0.75rem;
}

.wiz2__block-title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #1c1c1c;
}

.wiz2__block-hint {
    font-size: 0.75rem;
    color: #9a8e80;
    font-weight: 400;
}

/* Month grid — 12 equal columns. Uses initials so it never clips. */
.wiz2-months {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 3px;
    margin-bottom: 0.75rem;
}

.wiz2-month {
    padding: 9px 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    border: 1px solid var(--color-border, #EDE4D9);
    border-radius: 6px;
    background: #fff;
    color: #6b6056;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
    white-space: nowrap;
    overflow: hidden;
    letter-spacing: 0.02em;
    min-width: 0;
    line-height: 1;
}

.wiz2-month:hover {
    background: #fbf6f0;
    color: #1c1c1c;
    border-color: #d8c9b6;
}

.wiz2-month--start,
.wiz2-month--end,
.wiz2-month--single {
    background: var(--planner-primary, #D4922A);
    border-color: var(--planner-primary, #D4922A);
    color: #fff;
}

.wiz2-month--start:hover,
.wiz2-month--end:hover,
.wiz2-month--single:hover {
    background: #c08321;
    border-color: #c08321;
    color: #fff;
}

.wiz2-month--range {
    background: rgba(212, 146, 42, 0.14);
    border-color: rgba(212, 146, 42, 0.35);
    color: var(--planner-primary, #D4922A);
}

/* Date inputs */
.wiz2__date-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.wiz2__date-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #9a8e80;
    flex: 1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.wiz2__date-input {
    width: 100%;
    padding: 7px 9px;
    font-size: 0.8125rem;
    background: #fbf6f0;
    border: 1px solid var(--color-border, #EDE4D9);
    border-radius: 6px;
    color: #1c1c1c;
    outline: none;
    font-family: inherit;
    transition: border-color 140ms ease, background 140ms ease;
    color-scheme: light;
}

.wiz2__date-input:hover { border-color: #d8c9b6; }

.wiz2__date-input:focus {
    border-color: var(--planner-primary, #D4922A);
    background: #fff;
}

.wiz2__date-sep {
    color: #c9bcab;
    font-size: 0.875rem;
    padding-bottom: 0.55rem;
    flex-shrink: 0;
}

/* Interest cards */
.wiz2-interests {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.wiz2-interest {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 4px 8px;
    border: 1px solid var(--color-border, #EDE4D9);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease;
    min-height: 62px;
}

.wiz2-interest:hover {
    background: #fbf6f0;
    border-color: #d8c9b6;
}

.wiz2-interest--active {
    background: rgba(212, 146, 42, 0.1);
    border-color: var(--planner-primary, #D4922A);
}

.wiz2-interest__icon {
    width: 20px;
    height: 20px;
    color: #6b6056;
}

.wiz2-interest--active .wiz2-interest__icon {
    color: var(--planner-primary, #D4922A);
}

.wiz2-interest__label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: #6b6056;
    text-align: center;
    line-height: 1.15;
}

.wiz2-interest--active .wiz2-interest__label {
    color: var(--planner-primary, #D4922A);
    font-weight: 600;
}

/* Preference rows */
.wiz2-pref {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 7px 0;
}

.wiz2-pref + .wiz2-pref {
    border-top: 1px solid #f3ece2;
}

.wiz2-pref__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1c1c1c;
    white-space: nowrap;
    flex-shrink: 0;
}

.wiz2-pref__opts {
    display: inline-flex;
    background: #fbf6f0;
    border: 1px solid var(--color-border, #EDE4D9);
    border-radius: 999px;
    padding: 2px;
}

.wiz2-pref-opt {
    padding: 4px 11px;
    font-size: 0.75rem;
    font-weight: 500;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #6b6056;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
    font-family: inherit;
}

.wiz2-pref-opt:hover { color: #1c1c1c; }

.wiz2-pref-opt--active,
.wiz2-pref-opt--active:hover {
    background: var(--planner-primary, #D4922A);
    color: #fff;
}

/* Where popover: wrapping pill grid for continents + destination types.
   Standalone bordered pills (not the joined .wiz2-pref__opts track) because
   both groups wrap across multiple lines. */
.wiz2-where-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.wiz2-where-opts:last-child { margin-bottom: 0; }

.wiz2-where-opts .wiz2-pref-opt {
    background: #fbf6f0;
    border: 1px solid var(--color-border, #EDE4D9);
}

.wiz2-where-opts .wiz2-pref-opt--active,
.wiz2-where-opts .wiz2-pref-opt--active:hover {
    background: var(--planner-primary, #D4922A);
    border-color: var(--planner-primary, #D4922A);
}

/* Legacy reset hooks (now in tool head) */
.wiz2__reset { display: none; }
.wiz2__reset-btn { display: none; }

.wiz2__inline-reset {
    background: none;
    border: none;
    color: var(--planner-primary);
    cursor: pointer;
    font-size: inherit;
    text-decoration: underline;
    padding: 0;
}

/* Rank badge overlaid on card image */
.wiz2-card__rank {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(10, 10, 10, 0.72);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    width: 22px;
    height: 22px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Match reasons */
.wiz2-card__reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 0.4rem;
}

.wiz2-card__reason {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.6875rem;
    color: var(--planner-secondary);
}

/* Season chips */
.wiz2-card__seasons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 0.35rem;
}

.wiz2-card__season {
    font-size: 0.625rem;
    padding: 2px 6px;
    border: 1px solid currentColor;
    border-radius: 3px;
    opacity: 0.85;
}

/* Conditions line */
.wiz2-card__cond {
    font-size: 0.6875rem;
    color: var(--planner-muted);
    margin: 0.35rem 0 0;
}

/* Loading spinner in grid */
.wiz2__loading {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: var(--planner-muted);
    font-size: 0.875rem;
}

/* ==========================================================================
   DISCOVERY LAYOUT — full-width map + sidebar/grid (mirrors tours page)
   Single breakpoint at 768px. Z-index uses --planner-z-* tokens.
   ========================================================================== */

/* Full-width map section after hero */
.planner-map-section {
    width: 100%;
    background: var(--planner-surface, #FBF6F0);
    border-bottom: 1px solid var(--color-border, #EDE4D9);
    padding: 3rem 0;
}

.planner-map-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
    position: relative;
}

.planner-map-container .planner-map {
    position: relative;
    width: 100%;
    min-height: 520px;
    background: #FFFFFF;
    border: 1px solid var(--color-border, #EDE4D9);
    border-radius: 10px;
    overflow: hidden;
}

/* Main content section with sidebar */
.planner-main-content {
    background: #FFFFFF;
    padding: 4rem 0 5rem;
}

.planner-content-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

/* Desktop sidebar */
.planner-sidebar {
    width: 320px;
    flex-shrink: 0;
    background: transparent;
    position: sticky;
    top: 96px; /* clears the 80px nav with breathing room */
    align-self: flex-start;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    padding-right: 0.5rem; /* avoids scrollbar overlap */
    /* Subtle inner scrollbar styling */
    scrollbar-width: thin;
}

.planner-sidebar::-webkit-scrollbar { width: 6px; }
.planner-sidebar::-webkit-scrollbar-thumb {
    background: var(--color-border, #EDE4D9);
    border-radius: 3px;
}

.planner-sidebar-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border, #EDE4D9);
    margin-bottom: 0.5rem;
}

.planner-sidebar-title {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-text, #1C1C1C);
    margin: 0;
    letter-spacing: -0.01em;
}

.planner-sidebar-reset {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: transparent;
    border: none;
    color: var(--planner-muted);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.planner-sidebar-reset:hover {
    color: var(--planner-primary, #D4922A);
}

.planner-filters {
    display: flex;
    flex-direction: column;
}

/* Hidden by default; mobile media query reveals overlay. */
.planner-filter-overlay { display: none; }

/* Main grid area */
.planner-main-grid {
    flex: 1;
    min-width: 0;
}

/* ----- Mobile (≤ 768px) ----- */
@media (max-width: 768px) {
    .planner-content-wrapper {
        flex-direction: column;
        gap: 0;
        padding: 0 1rem;
    }

    .planner-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: min(86vw, 360px);
        max-height: none;
        height: 100vh;
        z-index: var(--planner-z-drawer);
        background: #FFFFFF;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1.5rem 1.25rem 2rem;
        padding-right: 1.25rem;
        box-shadow: 2px 0 16px rgba(0, 0, 0, 0.08);
        border: none;
    }

    .planner-sidebar.mobile-open { left: 0; }

    .planner-filter-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 15, 15, 0.45);
        z-index: var(--planner-z-overlay);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .planner-filter-overlay.mobile-open {
        opacity: 1;
        pointer-events: auto;
    }

    /* Map: editorial proportion on phones — wide but not page-dominating */
    .planner-map-section { padding: 1.25rem 0 1.5rem; }
    .planner-map-container {
        max-width: 100%;
        min-height: 380px;
        padding: 0;
    }
    .planner-map-container .planner-map {
        left: 0;
        right: 0;
        min-height: 380px;
    }

    .planner-main-content { padding: 2rem 0 3rem; }
}

@media (max-width: 600px) {
    .wiz2-interests {
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
    }

    .wiz2-month { font-size: 0.625rem; padding: 6px 0; }
}

/* ============================================================
   Best-windows HTML chips (below calendar SVG)
   ============================================================ */
.planner-best-windows {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem 1rem;
}

.planner-best-windows__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-left: 3px solid #D4922A;
    background: #F5F0EB;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--planner-text);
    border-radius: 0 3px 3px 0;
    white-space: nowrap;
}

/* ============================================================
   Section editorial label (WHEN TO GO / PHOTOGRAPHY ROUTE / etc.)
   ============================================================ */
.planner__section-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--planner-muted);
    margin: 0 0 0.5rem;
}

.planner__section-label--flush {
    padding: 0 0 0.5rem;
}

.planner__section-label--overview {
    padding: 0 0 1rem;
}

/* ============================================================
   Hero
   ============================================================ */
.planner-hero {
    position: relative;
    width: 100%;
    height: calc(100svh - var(--nav-height, 80px));
    min-height: 500px;
    overflow: hidden;
    background: var(--planner-border);
}

.planner-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
    /* Crisper display on 2x screens when source is upscaled from ~1024px */
    image-rendering: -webkit-optimize-contrast;
}

.planner-hero__img--fallback {
    background: #EDE4D9;
}

.planner-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    gap: 1rem;
}

.planner-hero__breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.625rem;
    background: rgba(251, 246, 240, 0.92);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--planner-muted);
}

.planner-hero__breadcrumb a {
    color: var(--planner-primary);
    text-decoration: none;
}

.planner-hero__actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.planner-hero__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1C1C1C;
    padding: 0.875rem 1.5rem;
}

.planner-hero__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 600;
    color: #FFFFFF;
    margin: 0 0 0.15rem;
    letter-spacing: -0.02em;
    text-transform: none;
    line-height: 1.1;
}

.planner-hero__subtitle {
    font-size: 0.875rem;
    color: #C4B9AB;
    margin: 0;
    font-weight: 400;
}

@media (max-width: 767px) {
    .planner-hero {
        height: calc(60vh - var(--nav-height, 80px));
        height: calc(60svh - var(--nav-height, 80px));
        min-height: 320px;
    }
    .planner-hero__caption {
        padding: 0.625rem 1rem;
    }
    .planner-hero__title {
        font-size: 1.375rem;
    }
    .planner-hero__subtitle {
        font-size: 0.8125rem;
    }
}

/* ============================================================
   Stat chips row (below hero)
   ============================================================ */
.planner-stat-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--planner-border);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.planner-stat-chips::-webkit-scrollbar { display: none; }

.planner-stat-chips__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--planner-border);
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--planner-text);
    background: #FFFFFF;
    white-space: nowrap;
    flex-shrink: 0;
}

.planner-stat-chips__chip--beginner { border-color: #3A9E8F; color: #3A9E8F; }
.planner-stat-chips__chip--moderate { border-color: #D4922A; color: #D4922A; }
.planner-stat-chips__chip--advanced { border-color: #C0392B; color: #C0392B; }

/* Long chip values (e.g. duration_info) clip on a word-friendly ellipsis
   instead of a server-side mid-word truncate; full text in title attr. */
.planner-stat-chips__text {
    max-width: 17rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .planner-stat-chips__text {
        max-width: 11rem;
    }
}

/* ============================================================
   Map section — full-width, aspect ratio determined by SVG viewBox
   ============================================================ */
.planner__section--map-full {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 0;
}

.planner__panel--map-full {
    width: 100%;
    border: 2px solid var(--planner-border);
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    background: #E2EAF0;
    margin-bottom: 0;
}

.planner__panel--map-full .planner-map {
    width: 100%;
}

.planner__panel--map-full .planner-map__svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   Route strip (3 cols below map)
   ============================================================ */
.planner-route-strip {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    border: 1px solid var(--planner-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: #F5F0EB;
    margin-bottom: 1.5rem;
}

.planner-route-strip__col {
    padding: 1rem 1.25rem;
    border-right: 1px solid var(--planner-border);
}

.planner-route-strip__col:last-child {
    border-right: none;
}

.planner-route-strip__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--planner-muted);
    margin: 0 0 0.5rem;
}

.planner-route-strip__text {
    font-size: 0.8125rem;
    color: var(--planner-text);
    line-height: 1.5;
    margin: 0;
}

.planner-route-strip__cta {
    display: inline-block;
    margin-top: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--planner-primary);
    text-decoration: none;
}

.planner-route-strip__cta:hover { text-decoration: underline; }

.planner-best-windows--strip {
    padding: 0;
    flex-direction: column;
    gap: 0.375rem;
}

@media (max-width: 767px) {
    .planner-route-strip {
        grid-template-columns: 1fr;
        border-radius: 0 0 4px 4px;
    }
    .planner-route-strip__col {
        border-right: none;
        border-bottom: 1px solid var(--planner-border);
    }
    .planner-route-strip__col:last-child { border-bottom: none; }
}

/* ============================================================
   Trip Overview two-column
   ============================================================ */
.planner__section--overview {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
}

.planner-trip-overview {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 767px) {
    .planner-trip-overview {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* ============================================================
   Sticky Jump Nav
   ============================================================ */
.planner-jump-nav {
    position: sticky;
    top: 80px;
    z-index: 40;
    background: #FFFFFF;
    border-bottom: 1px solid var(--planner-border);
}

.planner-jump-nav__inner {
    display: flex;
    gap: 0.25rem;
    padding: 0.625rem 1.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: 1400px;
    margin: 0 auto;
}

.planner-jump-nav__inner::-webkit-scrollbar { display: none; }

.planner-jump-link {
    flex-shrink: 0;
    padding: 0.375rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--planner-muted);
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.planner-jump-link:hover {
    background: #F5F0EB;
    color: var(--planner-text);
}

.planner-jump-link--active {
    background: var(--planner-primary);
    color: #FFFFFF;
}

/* Sections need offset for sticky nav stack (80px nav + ~52px jump nav) */
#panel-calendar,
#panel-map,
#section-overview {
    scroll-margin-top: 136px;
}

/* ============================================================
   Calendar section polish
   ============================================================ */
.planner__section-label--calendar {
    padding: 2rem 1.5rem 0;
    display: block;
}

.planner-calendar-intro {
    font-style: italic;
    color: var(--planner-muted);
    font-size: 0.875rem;
    margin: 0.375rem 0 0.75rem;
    padding: 0 1.5rem;
    transition: opacity 0.4s ease;
}

/* Dimmed (not removed — no layout shift) after the first brush use */
.planner-calendar-intro--seen {
    opacity: 0.45;
}

/* Mobile legend — HTML block appended below the SVG by calendar.js.
   Maps the numbered badges to their full event labels. */
.planner-calendar__legend {
    margin: 0.25rem 0 0;
    padding: 0.75rem 1rem;
    background: var(--planner-surface, #FBF6F0);
    border-top: 1px solid var(--planner-border, #EDE4D9);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.planner-calendar__legend-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.planner-calendar__legend-season {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.planner-calendar__legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 0.875rem;
}

.planner-calendar__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6875rem;
    color: var(--planner-text, #1C1C1C);
    line-height: 1.3;
}

.planner-calendar__legend-dot {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 0.5625rem;
    font-weight: 700;
}

.planner-calendar__legend-wave {
    font-size: 0.6875rem;
    font-style: italic;
    color: var(--planner-muted, #7A6E62);
}

/* Best windows: top divider */
.planner-best-windows {
    border-top: 1px solid var(--planner-border);
    margin-top: 0.5rem;
}

/* Footnote */
.planner-calendar__footnote {
    font-style: italic;
    color: var(--planner-muted);
    font-size: 0.8125rem;
    padding: 0.5rem 1.5rem 1.5rem;
    margin: 0;
}

/* ============================================================
   Route info cards (Photography Tools style)
   ============================================================ */
.planner-route-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    padding: 1.25rem 0 1.5rem;
}

.planner-route-card {
    background: #FFFFFF;
    border: 1px solid var(--planner-border);
    border-radius: 4px;
    padding: 1.25rem;
}

.planner-route-card__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--planner-primary);
    margin: 0 0 0.625rem;
}

.planner-route-card__text {
    font-size: 0.875rem;
    color: var(--planner-text);
    line-height: 1.55;
    margin: 0;
}

.planner-route-card__cta {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--planner-primary);
    text-decoration: none;
}

.planner-route-card__cta:hover { text-decoration: underline; }

.planner-best-windows--strip {
    flex-direction: column;
    gap: 0.375rem;
    padding: 0;
    border-top: none;
    margin-top: 0;
}

@media (max-width: 767px) {
    .planner-route-cards {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* ============================================================
   Trip Overview — Photography Tools–inspired card grid
   ============================================================ */

/* Row 1: stat chips */
.pov-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.pov-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.875rem;
    border: 1px solid var(--planner-border);
    border-radius: 20px;
    background: #FFFFFF;
    font-size: 0.8125rem;
}

.pov-stat-chip__key {
    color: var(--planner-muted);
    font-weight: 400;
}

.pov-stat-chip__val {
    color: var(--planner-text);
    font-weight: 600;
}

/* Row 2: 3-col info cards */
.pov-card-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Row 3: 2/3 + 1/3 content */
.pov-content-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Base card */
.pov-card {
    background: #FFFFFF;
    border: 1px solid var(--planner-border);
    border-radius: 4px;
    padding: 1.25rem;
}

.pov-card__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--planner-primary);
    margin: 0 0 0.625rem;
}

.pov-card__value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--planner-text);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.pov-card__sub {
    font-size: 0.8125rem;
    color: var(--planner-muted);
    margin: 0.375rem 0 0;
    line-height: 1.5;
}

/* Budget card */
.pov-card--budget {
    border-left: 3px solid var(--planner-primary);
}

.pov-budget-bar {
    height: 4px;
    background: var(--planner-border);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.pov-budget-fill {
    height: 4px;
    background: var(--planner-primary);
    border-radius: 2px;
}

.pov-budget-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    color: var(--planner-muted);
    margin-top: 0.25rem;
}

/* Permit card */
.pov-card__status {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.pov-card__status--ok { color: #3A9E8F; }
.pov-card__status--warn { color: #D4922A; }

.pov-card--permit-warn {
    border-left: 3px solid #D4922A;
}

.pov-card--permit:not(.pov-card--permit-warn) {
    border-left: 3px solid #3A9E8F;
}

/* About card */
.pov-card--about p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--planner-text);
    margin: 0;
}

/* Gear card */
.pov-gear-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.pov-gear-chip {
    padding: 0.3rem 0.625rem;
    background: #F5F0EB;
    border: 1px solid var(--planner-border);
    border-radius: 3px;
    font-size: 0.8125rem;
    color: var(--planner-text);
}

/* Drone card */
.pov-card--drone {
    margin-bottom: 1.5rem;
}

.pov-drone-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--planner-text);
    cursor: pointer;
    list-style: none;
}

.pov-drone-summary::-webkit-details-marker { display: none; }

.pov-drone-summary::after {
    content: '›';
    margin-left: auto;
    font-size: 1.125rem;
    color: var(--planner-muted);
    transition: transform 0.2s;
}

details[open] .pov-drone-summary::after {
    transform: rotate(90deg);
}

/* Mobile responsive */
@media (max-width: 767px) {
    .pov-card-row {
        grid-template-columns: 1fr;
    }
    .pov-content-row {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   Markdown prose sections (itinerary / useful info / logistics) — flat,
   collapsible, no gradients.
   --------------------------------------------------------------------------- */
.pov-prose-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 1rem;
}

.pov-prose-card {
    background: #FBF6F0;
    border: 1px solid var(--planner-border);
    border-radius: 4px;
    padding: 0.875rem 1rem;
}

.pov-prose-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--planner-text);
    cursor: pointer;
    list-style: none;
}

.pov-prose-summary::-webkit-details-marker { display: none; }

.pov-prose-summary::after {
    content: '›';
    margin-left: auto;
    font-size: 1.125rem;
    color: var(--planner-muted);
    transition: transform 0.2s;
}

details[open] > .pov-prose-summary::after {
    transform: rotate(90deg);
}

.pov-prose {
    padding-top: 0.875rem;
    color: var(--planner-text);
    font-size: 0.9375rem;
    line-height: 1.7;
}

.pov-prose h1,
.pov-prose h2,
.pov-prose h3,
.pov-prose h4 {
    font-family: var(--font-heading, "Playfair Display", Georgia, serif);
    color: var(--planner-text);
    margin: 1.25rem 0 0.5rem;
    font-weight: 600;
}

.pov-prose h2 { font-size: 1.125rem; }
.pov-prose h3 { font-size: 1rem; }
.pov-prose h4 { font-size: 0.9375rem; }

.pov-prose p { margin: 0 0 0.875rem; }
.pov-prose ul,
.pov-prose ol { margin: 0 0 0.875rem 1.25rem; }
.pov-prose li { margin-bottom: 0.25rem; }
.pov-prose strong { font-weight: 600; }

.pov-prose a {
    color: var(--color-primary, #D4922A);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.pov-prose a:hover { color: var(--planner-text); }

.pov-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1rem;
    font-size: 0.875rem;
}

.pov-prose th,
.pov-prose td {
    text-align: left;
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid var(--planner-border);
}

.pov-prose th {
    background: #F5F0EB;
    font-weight: 600;
}

@media (min-width: 768px) {
    .pov-prose-row { grid-template-columns: 1fr 1fr; }
    .pov-prose-card:first-child { grid-column: 1 / -1; }
}