/* Observation blocks build on the SHARED theme — brand colours from Frontend\Theme
 * (--rsmc-primary / -secondary / -accent) and structural tokens from frontend-core.css
 * (--rsmc-radius[-sm] / -border / -light / -dark / -text / -shadow[-lg] / -transition /
 * -success / -danger / -warning). These are only the few obs-specific extras: neutral
 * surfaces + the temperature scale. (Do NOT redefine the brand or core tokens here — that
 * was forking the design system and ignoring the site theme.) */
:root {
    --rsmc-bg: var(--wp--preset--color--base, #fff);
    /* A subtle surface that is ALWAYS distinct from --rsmc-bg (mixing 4% of the dark colour into bg),
     * so cards don't vanish into the block when the theme's base colour is white. */
    --rsmc-bg-alt: #f4f5f7; /* fallback for browsers without color-mix */
    --rsmc-bg-alt: color-mix(in srgb, var(--rsmc-dark, #333) 4%, var(--rsmc-bg, #fff));
    /* Card/chip surface — primary-tinted like the forecast .rsmc-hour-card (not a flat gray),
     * so the obs blocks read as part of the same design system. */
    --rsmc-surface: #eef3fb; /* fallback for browsers without color-mix */
    --rsmc-surface: color-mix(in srgb, var(--rsmc-primary, #2563eb) 7%, #fff);
    --rsmc-surface-border: rgba(0, 0, 0, 0.06);
    --rsmc-text: var(--wp--preset--color--contrast, #1e293b);
    /* Kept close to black — earlier slate tones still read as "too gray" on cards/footers. */
    --rsmc-text-muted: #1f2937; /* gray-800 */
    --rsmc-text-light: #374151;  /* gray-700 */
    --rsmc-temp-freezing: #3b82f6;
    --rsmc-temp-cold: #06b6d4;
    --rsmc-temp-mild: #22c55e;
    --rsmc-temp-warm: #f59e0b;
    --rsmc-temp-hot: #ef4444;
}

.rsmc-block { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--rsmc-bg); border: 1px solid var(--rsmc-border); border-radius: var(--rsmc-radius); padding: 1.5rem; color: var(--rsmc-text); line-height: 1.5; }
.rsmc-block * { box-sizing: border-box; }
/* Our headings are h* elements, so set an explicit colour or they inherit the WP theme's heading rule
 * (e.g. h1-h6 { color: accent-2 }). Use the canonical dark/contrast colour, like the forecast blocks. */
.rsmc-station-live__name, .rsmc-station-card__name, .rsmc-multi-stations__title,
.rsmc-station-chart__name, .rsmc-alerts__title { color: var(--rsmc-dark, #1e293b); margin-top: 0; }

/* Station Live — full-bleed brand-gradient hero with the temperature as the centrepiece,
 * mirroring the forecast city header (.rsmc-header / .rsmc-weather-card). */
.rsmc-station-live { padding: 0; overflow: hidden; }
.rsmc-station-live__hero {
    background: linear-gradient(135deg, var(--rsmc-primary) 0%, var(--rsmc-secondary) 100%);
    color: #fff;
    padding: clamp(20px, 4vw, 32px) clamp(18px, 3.5vw, 28px);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.rsmc-station-live__hero-top { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.rsmc-station-live__info { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1; }
.rsmc-station-live__name { color: #fff; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; margin: 0; }
.rsmc-station-live__location { font-size: 0.95rem; opacity: 0.92; }
.rsmc-station-live__obs-time { font-size: 0.85rem; opacity: 0.82; font-style: italic; margin-top: 0.15rem; }
.rsmc-station-live__obs-sep { margin: 0 0.25rem; }
.rsmc-station-live__status { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem; padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.78rem; font-weight: 600; background: rgba(255,255,255,0.18); align-self: flex-start; }
.rsmc-station-live__status-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.35); }
.rsmc-station-live__status--online .rsmc-station-live__status-dot { background: #4ade80; }
.rsmc-station-live__status--delayed .rsmc-station-live__status-dot { background: #fbbf24; }
.rsmc-station-live__status--offline .rsmc-station-live__status-dot { background: #f87171; }
/* Current-conditions panel (glassy), temperature badge in the spotlight. */
.rsmc-station-live__current {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    padding: 1rem 1.5rem;
    border-radius: var(--rsmc-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.rsmc-station-live__badge { line-height: 0; }
.rsmc-station-live__badge svg { display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25)); }
.rsmc-station-live__feels { font-size: 0.95rem; font-weight: 500; opacity: 0.92; text-align: center; }
.rsmc-station-live__minmax { display: flex; gap: 0.9rem; font-size: 1rem; font-weight: 700; }
.rsmc-station-live__minmax .rsmc-tmax,
.rsmc-station-live__minmax .rsmc-tmin { color: #fff; }
/* Metric cards (glassy, picto/emoji + value + label) — same look as the forecast header cards. */
.rsmc-station-live__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.75rem; }
.rsmc-station-live__card {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 0.9rem 0.75rem;
    min-height: 6.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-align: center;
    transition: var(--rsmc-transition);
}
.rsmc-station-live__card:hover { background: rgba(255,255,255,0.25); transform: translateY(-3px); }
.rsmc-station-live__card-icon { font-size: 1.6rem; line-height: 1; }
.rsmc-station-live__card-picto { width: 2.1em; height: 2.1em; object-fit: contain; pointer-events: none; user-select: none; }
.rsmc-station-live__card-value { font-weight: 700; font-size: 1.05rem; line-height: 1.2; white-space: nowrap; }
.rsmc-station-live__card-label { font-size: 0.8rem; opacity: 0.9; font-weight: 500; }
/* Embed code sits below the hero, on the block's own (white) surface. */
.rsmc-station-live > .rsmc-embed-code { padding: 1rem 1.25rem; }
@media (max-width: 600px) {
    .rsmc-station-live__hero-top { flex-direction: column; align-items: stretch; text-align: center; }
    .rsmc-station-live__info { align-items: center; }
    .rsmc-station-live__status { align-self: center; }
}

/* Multi-Stations */
.rsmc-multi-stations { display: flex; flex-direction: column; gap: 1rem; }
.rsmc-multi-stations__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.rsmc-multi-stations__title { font-size: 1.25rem; font-weight: 600; margin: 0; }
.rsmc-multi-stations__filters { display: flex; gap: 0.5rem; }
.rsmc-multi-stations__filter { padding: 0.25rem 0.5rem; border: 1px solid var(--rsmc-border); border-radius: var(--rsmc-radius-sm); background: var(--rsmc-bg); font-size: 0.875rem; cursor: pointer; transition: all var(--rsmc-transition); }
.rsmc-multi-stations__filter:hover, .rsmc-multi-stations__filter--active { border-color: var(--rsmc-primary); color: var(--rsmc-primary); }
.rsmc-multi-stations__grid { display: grid; gap: 1rem; }
/* Card — primary-tinted surface + 3px primary top accent, mirroring the forecast .rsmc-hour-card. */
.rsmc-station-card { background: var(--rsmc-surface); border: 1px solid var(--rsmc-surface-border); border-top: 3px solid var(--rsmc-primary); border-radius: var(--rsmc-radius-sm); padding: 1rem; transition: all var(--rsmc-transition); }
.rsmc-station-card:hover { border-color: var(--rsmc-primary); box-shadow: var(--rsmc-shadow); transform: translateY(-2px); }
.rsmc-station-card__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; }
.rsmc-station-card__name { font-weight: 600; margin: 0; }
.rsmc-station-card__dept { font-size: 0.75rem; color: var(--rsmc-text-muted); background: var(--rsmc-bg); padding: 2px 6px; border-radius: 4px; }
.rsmc-station-card__content { display: flex; flex-direction: column; gap: 0.5rem; }
/* Canonical temp badge (SVG disc) + min/max, same component as station-live / the forecast cards. */
.rsmc-station-card__temp-block { display: flex; align-items: center; gap: 0.6rem; }
.rsmc-station-card__badge { flex-shrink: 0; line-height: 0; }
.rsmc-station-card__badge svg { display: block; }
.rsmc-station-card__minmax { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.8rem; font-weight: 600; }
.rsmc-station-card__minmax .rsmc-tmax { color: var(--rsmc-temp-hot); }
.rsmc-station-card__minmax .rsmc-tmin { color: var(--rsmc-temp-cold); }
.rsmc-station-card__details { display: flex; flex-wrap: wrap; gap: 0.3rem 0.75rem; font-size: 0.875rem; color: var(--rsmc-text); }
.rsmc-station-card__details > span { display: inline-flex; align-items: center; gap: 0.25rem; }
.rsmc-station-card__detail-icon { display: inline-flex; color: var(--rsmc-primary); }
.rsmc-station-card__detail-icon svg { width: 1em; height: 1em; }
.rsmc-station-card__footer { display: flex; justify-content: space-between; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--rsmc-border); font-size: 0.75rem; color: var(--rsmc-text-light); }

/* Multi-stations toolbar: department filter + display-mode switch (grid ↔ table). */
.rsmc-multi-stations__toolbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-left: auto; }
.rsmc-multi-stations__modes { display: inline-flex; border: 1px solid var(--rsmc-border); border-radius: var(--rsmc-radius-sm); overflow: hidden; flex-shrink: 0; }
.rsmc-multi-stations__mode { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: none; background: var(--rsmc-bg); color: var(--rsmc-text-muted); cursor: pointer; transition: all var(--rsmc-transition); }
.rsmc-multi-stations__mode + .rsmc-multi-stations__mode { border-left: 1px solid var(--rsmc-border); }
.rsmc-multi-stations__mode:hover { color: var(--rsmc-primary); }
.rsmc-multi-stations__mode--active { background: var(--rsmc-primary); color: #fff; }
/* Active button: keep the icon white on hover (was going orange-on-orange = invisible). */
.rsmc-multi-stations__mode--active:hover { color: #fff; background: var(--rsmc-primary-dark, var(--rsmc-primary)); }
.rsmc-multi-stations__mode svg { width: 1.1em; height: 1.1em; }

/* Search box */
.rsmc-multi-stations__search { position: relative; display: inline-flex; align-items: center; }
.rsmc-multi-stations__search-icon { position: absolute; left: 0.55rem; display: inline-flex; color: var(--rsmc-text-muted); pointer-events: none; }
.rsmc-multi-stations__search-icon svg { width: 1em; height: 1em; }
.rsmc-multi-stations__search-input { padding: 0.4rem 0.6rem 0.4rem 1.9rem; border: 1px solid var(--rsmc-border); border-radius: var(--rsmc-radius-sm); background: var(--rsmc-bg); color: var(--rsmc-text); font-size: 0.875rem; min-width: 11rem; }
.rsmc-multi-stations__search-input:focus { outline: none; border-color: var(--rsmc-primary); }

/* View visibility — driven by the mode class on the block root. */
.rsmc-multi-stations__table-wrap { display: none; overflow-x: auto; }
.rsmc-multi-stations__list { display: none; flex-direction: column; gap: 0.4rem; }
.rsmc-multi-stations--mode-table .rsmc-multi-stations__grid,
.rsmc-multi-stations--mode-list .rsmc-multi-stations__grid { display: none; }
.rsmc-multi-stations--mode-table .rsmc-multi-stations__table-wrap { display: block; }
.rsmc-multi-stations--mode-list .rsmc-multi-stations__list { display: flex; }

/* Compact list view — one dense row per station. */
.rsmc-station-list-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.75rem; background: var(--rsmc-surface); border: 1px solid var(--rsmc-surface-border); border-left: 3px solid var(--rsmc-primary); border-radius: var(--rsmc-radius-sm); }
.rsmc-station-list-row__id { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.rsmc-station-list-row__badge { line-height: 0; flex-shrink: 0; }
.rsmc-station-list-row__badge svg { display: block; }
.rsmc-station-list-row__name { font-weight: 600; color: var(--rsmc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rsmc-station-list-row__dept { font-weight: 500; font-size: 0.8rem; color: var(--rsmc-text-muted); }
.rsmc-station-list-row__metrics { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem 0.9rem; font-size: 0.85rem; color: var(--rsmc-text); }
.rsmc-station-list-row__metric { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.rsmc-station-list-row__icon { display: inline-flex; color: var(--rsmc-primary); }
.rsmc-station-list-row__icon svg { width: 1em; height: 1em; }
@media (max-width: 600px) {
    .rsmc-station-list-row { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
    .rsmc-station-list-row__metrics { justify-content: flex-start; }
}

/* Table view */
.rsmc-stations-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
/* Headers wrap (e.g. "Point de rosée" on two lines) instead of forcing the column wide — keeps the
 * table inside its width and pushes the horizontal scrollbar to genuinely-many-column cases. */
.rsmc-stations-table thead th { background: var(--rsmc-primary); color: #fff; font-weight: 600; text-align: left; padding: 0.4rem 0.5rem; white-space: normal; vertical-align: bottom; line-height: 1.15; }
.rsmc-stations-table th.rsmc-stations-table__num, .rsmc-stations-table td.rsmc-stations-table__num { text-align: right; }
.rsmc-stations-table td.rsmc-stations-table__num { white-space: nowrap; } /* keep values on one line */
.rsmc-stations-table__sort { cursor: pointer; user-select: none; }
.rsmc-stations-table__sort:hover { background: var(--rsmc-primary-dark, var(--rsmc-primary)); }
.rsmc-stations-table__sort[aria-sort="ascending"]::after { content: " ▲"; font-size: 0.7em; opacity: 0.85; }
.rsmc-stations-table__sort[aria-sort="descending"]::after { content: " ▼"; font-size: 0.7em; opacity: 0.85; }
.rsmc-stations-table tbody tr { border-bottom: 1px solid var(--rsmc-border); }
.rsmc-stations-table tbody tr:nth-child(even) { background: var(--rsmc-surface); }
.rsmc-stations-table tbody tr:hover { background: color-mix(in srgb, var(--rsmc-primary) 12%, #fff); }
.rsmc-stations-table td, .rsmc-stations-table tbody th { padding: 0.4rem 0.5rem; vertical-align: middle; }
.rsmc-stations-table__name { font-weight: 600; text-align: left; color: var(--rsmc-text); }
.rsmc-stations-table__dept { display: block; font-size: 0.72rem; font-weight: 500; color: var(--rsmc-text-muted); }
.rsmc-stations-table__badge { display: inline-flex; line-height: 0; vertical-align: middle; }
.rsmc-stations-table__badge svg { display: block; }

/* Alerts */
.rsmc-alerts { display: flex; flex-direction: column; gap: 0.5rem; }
.rsmc-alerts__title { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.5rem 0; }
.rsmc-alerts__empty { text-align: center; padding: 1.5rem; color: var(--rsmc-text-muted); }
.rsmc-alert { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: var(--rsmc-radius-sm); background: var(--rsmc-bg-alt); }
.rsmc-alert__icon { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.rsmc-alert--frost .rsmc-alert__icon { background: rgba(59, 130, 246, 0.1); color: var(--rsmc-temp-freezing); }
.rsmc-alert--heat .rsmc-alert__icon { background: rgba(239, 68, 68, 0.1); color: var(--rsmc-temp-hot); }
.rsmc-alert--rain .rsmc-alert__icon { background: rgba(14, 165, 233, 0.1); color: #0ea5e9; }
.rsmc-alert--wind .rsmc-alert__icon { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.rsmc-alert__content { flex: 1; min-width: 0; }
.rsmc-alert__type { font-weight: 600; font-size: 0.875rem; }
.rsmc-alert__station { font-size: 0.875rem; color: var(--rsmc-text-muted); }
.rsmc-alert__value { font-weight: 700; font-size: 1.125rem; text-align: right; }

/* Icons */
.rsmc-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* Embed Code */
.rsmc-embed-code { padding-top: 0.75rem; border-top: 1px solid var(--rsmc-border); }
.rsmc-embed-toggle { background: none; border: 1px solid var(--rsmc-border); border-radius: var(--rsmc-radius-sm); padding: 0.375rem 0.75rem; font-size: 0.8125rem; color: var(--rsmc-text-muted); cursor: pointer; transition: all var(--rsmc-transition); }
.rsmc-embed-toggle:hover { border-color: var(--rsmc-primary); color: var(--rsmc-primary); }
.rsmc-embed-container { margin-top: 0.75rem; }
.rsmc-embed-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.rsmc-embed-header label { font-size: 0.8125rem; font-weight: 500; color: var(--rsmc-text-muted); }
.rsmc-embed-copy { background: none; border: 1px solid var(--rsmc-border); border-radius: var(--rsmc-radius-sm); padding: 0.25rem 0.5rem; font-size: 0.75rem; color: var(--rsmc-text-muted); cursor: pointer; transition: all var(--rsmc-transition); }
.rsmc-embed-copy:hover { border-color: var(--rsmc-primary); color: var(--rsmc-primary); }
.rsmc-embed-textarea { width: 100%; padding: 0.5rem; border: 1px solid var(--rsmc-border); border-radius: var(--rsmc-radius-sm); font-family: monospace; font-size: 0.75rem; color: var(--rsmc-text-muted); background: var(--rsmc-bg-alt); resize: none; }

/* States */
.rsmc-admin-notice { background: #fff3cd; border: 1px solid #ffc107; border-radius: var(--rsmc-radius-sm); padding: 1rem; color: #856404; }
.rsmc-admin-notice a { color: #533f03; font-weight: 600; }
.rsmc-error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: var(--rsmc-radius-sm); padding: 1rem; color: var(--rsmc-danger); text-align: center; }
.rsmc-loading { display: flex; align-items: center; justify-content: center; padding: 2rem; }

/* Responsive */
@media (max-width: 640px) {
    .rsmc-block { padding: 1rem; }
    .rsmc-station-live { padding: 0; }
    .rsmc-multi-stations__grid { grid-template-columns: 1fr !important; }
}

/* Station Chart */
.rsmc-station-chart { display: flex; flex-direction: column; gap: 1rem; }
.rsmc-station-chart__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.rsmc-station-chart__info { flex: 1; min-width: 200px; }
.rsmc-station-chart__name { font-size: 1.25rem; font-weight: 600; margin: 0 0 0.25rem 0; }
.rsmc-station-chart__location { font-size: 0.875rem; color: var(--rsmc-text-muted); margin: 0; }

.rsmc-station-chart__controls { display: flex; align-items: center; gap: 0.5rem; }
/* Metric toggle chips (replace the Chart.js legend; wrap + scroll so they never overflow on mobile). */
.rsmc-station-chart__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0.5rem 0 0.75rem;
}
.rsmc-station-chart__metric {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--rsmc-border, #d8dee6);
    border-radius: 999px;
    background: var(--rsmc-bg, #fff);
    color: var(--rsmc-text-muted, #6b7280);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--rsmc-transition, 0.15s);
}
.rsmc-station-chart__metric:hover { background: var(--rsmc-bg-alt, #f1f5f9); color: var(--rsmc-text, #1f2937); }
.rsmc-station-chart__metric.is-active {
    background: var(--rsmc-primary, #2563eb);
    border-color: var(--rsmc-primary, #2563eb);
    color: #fff;
}
/* "Deselect all / Select all" — neutral, dashed, set apart from the coloured metric chips. */
.rsmc-station-chart__metric-all {
    border-style: dashed;
    color: var(--rsmc-text-muted, #6b7280);
    margin-left: auto;
}
/* Single-day navigator (‹ date ›  + Range) */
.rsmc-station-chart__day { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rsmc-station-chart__day-btn { padding: 0.25rem 0.55rem; border: 1px solid var(--rsmc-border, #d8dee6); background: var(--rsmc-bg, #fff); border-radius: var(--rsmc-radius-sm, 6px); cursor: pointer; font-family: inherit; line-height: 1; color: var(--rsmc-text, #1f2937); }
.rsmc-station-chart__day-btn:hover { background: var(--rsmc-bg-alt, #f1f5f9); }
.rsmc-station-chart__day-input { padding: 0.2rem 0.4rem; border: 1px solid var(--rsmc-border, #d8dee6); border-radius: var(--rsmc-radius-sm, 6px); font-family: inherit; font-size: 0.8125rem; color: var(--rsmc-text, #1f2937); background: var(--rsmc-bg, #fff); }
.rsmc-station-chart__day-clear { padding: 0.25rem 0.6rem; border: 1px dashed var(--rsmc-border, #d8dee6); background: transparent; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 0.8rem; color: var(--rsmc-text-muted, #6b7280); }
.rsmc-station-chart__periods { display: flex; gap: 0; border: 1px solid var(--rsmc-border); border-radius: var(--rsmc-radius-sm); overflow: hidden; }
.rsmc-station-chart__period-btn { padding: 0.375rem 0.75rem; border: none; border-right: 1px solid var(--rsmc-border); background: var(--rsmc-bg); font-size: 0.8125rem; font-weight: 500; color: var(--rsmc-text-muted); cursor: pointer; transition: all var(--rsmc-transition); white-space: nowrap; font-family: inherit; }
.rsmc-station-chart__period-btn:last-child { border-right: none; }
.rsmc-station-chart__period-btn:hover { background: var(--rsmc-bg-alt); color: var(--rsmc-text); }
.rsmc-station-chart__period-btn--active { background: var(--rsmc-primary); color: #fff; }
.rsmc-station-chart__period-btn--active:hover { background: var(--rsmc-primary); color: #fff; }

.rsmc-station-chart__canvas-wrapper { position: relative; width: 100%; }
.rsmc-station-chart__canvas { width: 100% !important; height: 100% !important; }

.rsmc-station-chart__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: rgba(255, 255, 255, 0.85); color: var(--rsmc-text-muted); font-size: 0.875rem; z-index: 2; }
.rsmc-station-chart__spinner { width: 20px; height: 20px; border: 2px solid var(--rsmc-border); border-top-color: var(--rsmc-primary); border-radius: 50%; animation: rsmc-spin 0.6s linear infinite; }
@keyframes rsmc-spin { to { transform: rotate(360deg); } }

.rsmc-station-chart__error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--rsmc-danger); font-size: 0.875rem; }

.rsmc-station-chart__stats { padding-top: 1rem; border-top: 1px solid var(--rsmc-border); }
.rsmc-station-chart__stats-grid { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.rsmc-station-chart__stat { display: flex; flex-direction: column; gap: 0.25rem; }
.rsmc-station-chart__stat-label { font-size: 0.75rem; color: var(--rsmc-text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; }
.rsmc-station-chart__stat-values { display: flex; gap: 0.75rem; font-size: 0.875rem; font-weight: 600; }
.rsmc-station-chart__stat-min { color: var(--rsmc-temp-cold); }
.rsmc-station-chart__stat-min::before { content: '↓ '; }
.rsmc-station-chart__stat-avg { color: var(--rsmc-text); }
.rsmc-station-chart__stat-avg::before { content: '≈ '; }
.rsmc-station-chart__stat-max { color: var(--rsmc-temp-hot); }
.rsmc-station-chart__stat-max::before { content: '↑ '; }
.rsmc-station-chart__stat-total { color: var(--rsmc-primary); }

.rsmc-station-chart__footer { display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px solid var(--rsmc-border); font-size: 0.75rem; color: var(--rsmc-text-light); }

@media (max-width: 640px) {
    .rsmc-station-chart__header { flex-direction: column; }
    .rsmc-station-chart__periods { flex-wrap: wrap; }
    .rsmc-station-chart__period-btn { flex: 1; text-align: center; }
    .rsmc-station-chart__stats-grid { flex-direction: column; gap: 0.75rem; }
}

/* ---------------------------------------------------------------- visitor station search
   Shared by the chart + station-live blocks (a search box + dropdown of matches). The map uses
   its own overlay variant (.rsmc-station-map-search). */
.rsmc-station-search { position: relative; margin: 0 0 0.85rem; max-width: 420px; }
.rsmc-station-search__input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.8rem;
    font-size: 0.95rem;
    border: 1px solid var(--rsmc-border, #d8dee6);
    border-radius: var(--rsmc-radius, 8px);
    background: var(--rsmc-surface, #fff);
    color: var(--rsmc-text, #1f2937);
}
.rsmc-station-search__input:focus {
    outline: none;
    border-color: var(--rsmc-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.rsmc-station-search__results {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    margin-top: 4px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--rsmc-surface, #fff);
    border: 1px solid var(--rsmc-border, #d8dee6);
    border-radius: var(--rsmc-radius, 8px);
    box-shadow: var(--rsmc-shadow, 0 6px 20px rgba(0, 0, 0, 0.14));
}
.rsmc-station-search__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.8rem;
    border: 0;
    background: transparent;
    color: var(--rsmc-text, #1f2937);
    font-size: 0.92rem;
    cursor: pointer;
}
.rsmc-station-search__item:hover,
.rsmc-station-search__item:focus { background: var(--rsmc-bg-alt, #f1f5f9); }
.rsmc-station-search__dept { color: var(--rsmc-text-muted, #6b7280); font-size: 0.82em; }

/* Empty/prompt states when a searchable block has no station selected yet. */
.rsmc-station-chart__empty,
.rsmc-station-live__prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 1rem;
    text-align: center;
    color: var(--rsmc-text-muted, #6b7280);
}
.rsmc-station-live--empty { padding: 1rem; }

/* Map search: an overlay input floating over the map canvas (top-left, under the metric picker). */
.rsmc-station-map-search {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 6;
    width: min(240px, 60%);
}
.rsmc-station-map-search__input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.7rem;
    font-size: 0.9rem;
    border: 1px solid var(--rsmc-border, #d8dee6);
    border-radius: var(--rsmc-radius, 8px);
    background: rgba(255, 255, 255, 0.95);
    color: var(--rsmc-text, #1f2937);
    box-shadow: var(--rsmc-shadow, 0 2px 8px rgba(0, 0, 0, 0.18));
}
.rsmc-station-map-search__input:focus {
    outline: none;
    border-color: var(--rsmc-primary, #2563eb);
}