/**
 * WS40 Consolle — frontend layout (structural base, Phase 3).
 * Palette/tokens shared with the WS40 Dashboard. Phase 4 refines the chrome
 * (charts, compass, webcam) — this file owns the zone grid + block shells.
 */

.ws40con {
    --ws40con-blue: #1f6fd6;
    --ws40con-ink: #0f1c2e;
    --ws40con-amber: #d97706;
    --ws40con-canvas: #eef2f7;
    --ws40con-card-bg: #ffffff;
    --ws40con-border: #dbe4ef;
    --ws40con-muted: #5b6b7f;
    --ws40con-radius: 16px;
    --ws40con-gap: 14px;
    --ws40con-shadow: 0 1px 2px rgba(15, 28, 46, 0.04), 0 2px 6px rgba(15, 28, 46, 0.05);

    display: block;
    background: var(--ws40con-canvas);
    color: var(--ws40con-ink);
    border-radius: var(--ws40con-radius);
    padding: var(--ws40con-gap);
    font-size: calc(14px * var(--ws40con-fs, 1));
    line-height: 1.45;
    box-sizing: border-box;
    width: 100%;
    /* Containment guard: stay shrinkable as a flex/grid child of the theme,
       never exceed the available width, and clip any horizontal bleed so a
       single wide block can never push the whole page into horizontal scroll. */
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

.ws40con *,
.ws40con *::before,
.ws40con *::after {
    box-sizing: inherit;
}

/* ── Host-theme armour ───────────────────────────────────────────────────
   Third-party themes style semantic tags aggressively and those rules leak
   into the Consolle. Measured on live installs: a magazine theme forced
   `height:38px` on every <button>, so the cards (which need ~62px) spilled
   outside their own box; another theme forced `white-space:nowrap` +
   `text-overflow:ellipsis` on <dt> and hung a decorative 16x2px `::before`
   bar before every label, truncating the text and prefixing it with a dash.

   This block only NEUTRALISES what a host theme can impose — it never sets
   Consolle design, which lives in the sections below and overrides it by
   source order. Scoped to bare tags inside .ws40con, so the Consolle's own
   pseudo-elements (e.g. .ws40con-stat__striphld scroll shadows, on a div)
   are deliberately untouched.

   `!important` is required, not lazy: on the real sites the theme rules won
   on specificity against our own class selectors. Do not remove it.
   <dd> is excluded from the white-space reset: .ws40con-full__val keeps
   `nowrap` by design, so a number and its unit never split across lines. */

.ws40con button,
.ws40con dl,
.ws40con dt,
.ws40con dd,
.ws40con h1,
.ws40con h2,
.ws40con h3,
.ws40con h4,
.ws40con p,
.ws40con small,
.ws40con table,
.ws40con tr,
.ws40con td {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    text-overflow: clip !important;
    font-family: inherit;
    font-style: inherit;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    text-shadow: none;
    float: none;
    list-style: none;
}

.ws40con button,
.ws40con dl,
.ws40con dt,
.ws40con h1,
.ws40con h2,
.ws40con h3,
.ws40con h4,
.ws40con p,
.ws40con small {
    white-space: normal !important;
}

/* Decorative markers/bars themes attach to headings, list terms and buttons. */
.ws40con button::before, .ws40con button::after,
.ws40con dl::before,     .ws40con dl::after,
.ws40con dt::before,     .ws40con dt::after,
.ws40con dd::before,     .ws40con dd::after,
.ws40con h1::before,     .ws40con h1::after,
.ws40con h2::before,     .ws40con h2::after,
.ws40con h3::before,     .ws40con h3::after,
.ws40con h4::before,     .ws40con h4::after,
.ws40con p::before,      .ws40con p::after,
.ws40con small::before,  .ws40con small::after {
    content: none !important;
}

/* ── Zones ───────────────────────────────────────────────────────────── */

/* Top band: full width — uses negative margins to escape any flex/grid context */
.ws40con__zone--top {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-bottom: var(--ws40con-gap);
    /* Ensure it's never constrained by a sibling grid */
    align-self: stretch;
    grid-column: 1 / -1;
}

/* Bottom band: full width, mirrors the top band (sits below the column grid) */
.ws40con__zone--bottom {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: var(--ws40con-gap);
    align-self: stretch;
    grid-column: 1 / -1;
}

/* Direction: vertical — blocks stacked (top & bottom) */
.ws40con__zone--top.ws40con__zone--v,
.ws40con__zone--bottom.ws40con__zone--v {
    display: flex;
    flex-direction: column;
    gap: var(--ws40con-gap);
}

/* Direction: horizontal — blocks side by side, equal width, wrap on small screens */
.ws40con__zone--top.ws40con__zone--h,
.ws40con__zone--bottom.ws40con__zone--h {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--ws40con-gap);
    align-items: stretch;
}

.ws40con__zone--top.ws40con__zone--h > .ws40con-block,
.ws40con__zone--bottom.ws40con__zone--h > .ws40con-block {
    flex: 1 1 240px;
    min-width: 0;
}

@media (max-width: 600px) {
    .ws40con__zone--top.ws40con__zone--h,
    .ws40con__zone--bottom.ws40con__zone--h {
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .ws40con__zone--top.ws40con__zone--h > .ws40con-block,
    .ws40con__zone--bottom.ws40con__zone--h > .ws40con-block {
        flex-basis: auto;
        width: 100%;
    }
}

/* ── Column grid ─────────────────────────────────────────────────────── */

.ws40con__grid {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ws40con-gap);
    align-items: start;
}

.ws40con__grid.has-left {
    grid-template-columns: 20% minmax(0, 1fr); /* fallback, overridden inline */
}

.ws40con__grid.has-right {
    grid-template-columns: minmax(0, 1fr) 25%; /* fallback, overridden inline */
}

.ws40con__grid.has-left.has-right {
    grid-template-columns: 20% minmax(0, 1fr) 25%; /* fallback, overridden inline */
}

.ws40con__col {
    display: flex;
    flex-direction: column;
    gap: var(--ws40con-gap);
    min-width: 0;
}

/* ── Block shell ─────────────────────────────────────────────────────── */

.ws40con-block {
    background: var(--ws40con-card-bg);
    border: 1px solid var(--ws40con-border);
    border-radius: var(--ws40con-radius);
    /* Elevation is driven by the Appearance control (--ws40con-shadow). */
    box-shadow: var(--ws40con-shadow);
    overflow: hidden;
    /* Never let flex/grid content-sizing (e.g. a wrapping column flex on mobile)
       grow the card past its container; this keeps wide inner content scrollable
       instead of clipped, in every zone/orientation. */
    min-width: 0;
    max-width: 100%;
    /* Header always on top, body below — never side-by-side regardless of zone context. */
    display: flex;
    flex-direction: column;
}

.ws40con-block__head {
    background: var(--ws40con-blue);
    color: #fff;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ws40con-block__head-extra {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ws40con-block__title {
    margin: 0;
    font-size: calc(13px * var(--ws40con-fs, 1));
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ws40con-block__body {
    padding: 12px 14px;
    min-width: 0;
}

.ws40con-empty {
    margin: 0;
    color: var(--ws40con-muted);
    font-style: italic;
}

/* ── Cards ───────────────────────────────────────────────────────────── */

.ws40con-cards .ws40con-block__body {
    padding: 10px;
}

.ws40con-cards__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.ws40con-card {
    appearance: none;
    border: 1px solid var(--ws40con-border);
    border-left: 4px solid var(--ws40con-accent, var(--ws40con-border));
    border-radius: 12px;
    background: var(--ws40con-card-bg);
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Per-metric accent colours (match the WS40 Dashboard palette). */
.ws40con-card[data-ws40con-field="temp"]     { --ws40con-accent: #e0533d; }
.ws40con-card[data-ws40con-field="humidity"] { --ws40con-accent: #2f8fd6; }
.ws40con-card[data-ws40con-field="pressure"] { --ws40con-accent: #7c6fd6; }
.ws40con-card[data-ws40con-field="wind"]     { --ws40con-accent: #13a89a; }
.ws40con-card[data-ws40con-field="gust"]     { --ws40con-accent: #0d9488; }
.ws40con-card[data-ws40con-field="rain"]     { --ws40con-accent: #2563eb; }
.ws40con-card[data-ws40con-field="feels"]    { --ws40con-accent: #f0743a; }
.ws40con-card[data-ws40con-field="dew"]      { --ws40con-accent: #06b6d4; }
.ws40con-card[data-ws40con-field="uv"]       { --ws40con-accent: #eab308; }

/* Wind-direction card (FIX 2): compact abbreviation as the main value (never
   wraps, matching other cards) + arrow, with the full name and degrees on a
   muted sub-line. */
.ws40con-card--dir .ws40con-card__dir-main {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ws40con-card--dir .ws40con-card__value {
    flex: 0 0 auto;
}
.ws40con-card__dir-arrow {
    flex: 0 0 auto;
    color: var(--ws40con-accent, #13a89a);
    transition: transform 0.4s ease;
}
.ws40con-card__dir-arrow--off { opacity: 0; }
.ws40con-card--dir .ws40con-card__dir-sub {
    color: var(--ws40con-muted);
    font-size: calc(11px * var(--ws40con-fs, 1));
    font-weight: 600;
    line-height: 1.25;
    margin-top: 2px;
}

.ws40con-card:hover,
.ws40con-card:focus-visible {
    border-color: var(--ws40con-accent, var(--ws40con-blue));
    outline: none;
}

.ws40con-card.is-active {
    border-color: var(--ws40con-accent, var(--ws40con-blue));
    box-shadow: 0 0 0 2px var(--ws40con-accent, var(--ws40con-blue));
}

.ws40con-card__label {
    color: var(--ws40con-muted);
    font-size: calc(11px * var(--ws40con-fs, 1));
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* Long words (e.g. German "Luftfeuchtigkeit") wrap cleanly instead of overflowing. */
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.ws40con-card__value {
    font-size: calc(20px * var(--ws40con-fs, 1));
    font-weight: 700;
    color: var(--ws40con-ink);
    /* Keep the number and its unit together; allow wrap only between words. */
    overflow-wrap: break-word;
}

/* ── Chart ───────────────────────────────────────────────────────────── */

.ws40con-chart__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.ws40con-chart__period {
    appearance: none;
    border: 1px solid var(--ws40con-border);
    background: var(--ws40con-card-bg);
    color: var(--ws40con-muted);
    border-radius: 999px;
    font-size: calc(12px * var(--ws40con-fs, 1));
    padding: 4px 12px;
    cursor: pointer;
}

.ws40con-chart__period.is-active {
    background: var(--ws40con-blue);
    border-color: var(--ws40con-blue);
    color: #fff;
}

.ws40con-chart__canvas {
    position: relative;
    min-height: 220px;
}

.ws40con-chart__el {
    width: 100%;
    height: 220px;
    display: block;
}

/* ── Full data ───────────────────────────────────────────────────────── */

.ws40con-full__grid {
    /* Auto-fit group columns: they grow to fill the width and wrap when there is
       no room, so labels never get squeezed into a 200px newspaper column. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px 24px;
    align-items: start;
}
/* Fixed column counts (per-block option). Doubled class raises specificity so it
   wins over the responsive auto-fit override defined later in the sheet. */
.ws40con-full__grid.ws40con-full__grid--cols-1 { grid-template-columns: 1fr !important; }
.ws40con-full__grid.ws40con-full__grid--cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.ws40con-full__grid.ws40con-full__grid--cols-3 { grid-template-columns: repeat(3, 1fr) !important; }

/* Masonry arrangement: pack groups into flowing columns (no gaps under short
   groups). Uses CSS multi-column; the fixed column count maps to `columns`, and
   `auto` uses a wide min width so labels never get squeezed. Each group avoids
   breaking across columns. This overrides the grid display above. */
.ws40con-full__grid--masonry {
    display: block !important;
    columns: 260px;
    column-gap: 24px;
}
.ws40con-full__grid--masonry.ws40con-full__grid--cols-1 { columns: 1 !important; }
.ws40con-full__grid--masonry.ws40con-full__grid--cols-2 { columns: 2 !important; }
.ws40con-full__grid--masonry.ws40con-full__grid--cols-3 { columns: 3 !important; }
.ws40con-full__grid--masonry .ws40con-full__col {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 12px;
}
@media (max-width: 600px) {
    .ws40con-full__grid--masonry,
    .ws40con-full__grid--masonry.ws40con-full__grid--cols-1,
    .ws40con-full__grid--masonry.ws40con-full__grid--cols-2,
    .ws40con-full__grid--masonry.ws40con-full__grid--cols-3 { columns: 1 !important; }
}

.ws40con-full__col {
    min-width: 0;
    margin-bottom: 8px;
}

.ws40con-full__gtitle {
    font-size: calc(11px * var(--ws40con-fs, 1));
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase !important;
    color: var(--ws40con-blue);
    margin: 0 0 8px;
    padding-bottom: 0;
    border-bottom: 0;
}

/* Each row is its own 2- or 3-column grid (icon | label | value). Making the
   ROW the grid — instead of display:contents on the row + a grid on the list —
   is robust against themes that set a background/border on the row (which would
   otherwise cancel display:contents and collapse the alignment). Column widths
   are shared across rows via a fixed track for the label so values line up. */
.ws40con-full__list {
    margin: 0;
    padding: 0;
}
.ws40con-full__grid--al-left   .ws40con-full__list { text-align: left; }
.ws40con-full__grid--al-center .ws40con-full__list { text-align: center; }
.ws40con-full__grid--al-right  .ws40con-full__list { text-align: right; }

.ws40con-full__row {
    display: grid !important;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    align-items: center;
    border-bottom: 1px dashed var(--ws40con-border);
    padding: 5px 0;
}
.ws40con-full__row--icon {
    grid-template-columns: 30px auto 1fr;
}
/* wpautop (or a theme content filter) can inject empty <p></p> nodes between our
   inline tags. Inside the data block they are noise and, as extra grid children,
   they push the value into a new implicit row (label above, value below). Remove
   them from the layout everywhere in the block. */
.ws40con-full__grid p:empty,
.ws40con-full__col p:empty,
.ws40con-full__list p:empty,
.ws40con-full__row p:empty,
.ws40con-full__row > p {
    display: none !important;
}
/* Themes often force dt/dd to display:block, width:100% or clear:both, which
   ejects them from the row grid and stacks label above value. Pin them as grid
   items so the row layout holds on every theme. */
.ws40con-full__row > .ws40con-full__icon,
.ws40con-full__row > .ws40con-full__label,
.ws40con-full__row > .ws40con-full__val {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    min-width: 0;
}
.ws40con-full__label {
    color: var(--ws40con-muted);
    font-size: var(--ws40con-label-size, calc(13px * var(--ws40con-fs, 1)));
    white-space: nowrap;
    line-height: 1.25;
    text-align: left;
}
.ws40con-full__val {
    margin: 0;
    font-weight: 700;
    font-size: var(--ws40con-value-size, calc(13px * var(--ws40con-fs, 1)));
    color: var(--ws40con-ink);
    text-align: right;
    white-space: nowrap;
}
.ws40con-full__val > [data-ws40con-value] { white-space: nowrap; }

/* 3h trend indicator. */
.ws40con-full__trend {
    font-size: calc(18px * var(--ws40con-fs, 1));
    line-height: 1;
    font-weight: 700;
    display: inline-block;
    vertical-align: -1px;
}
.ws40con-full__trend--up   { color: var(--ws40con-trend-up, #2e9e5b); }
.ws40con-full__trend--down { color: var(--ws40con-trend-down, #e0574f); }
.ws40con-full__trend--flat { color: var(--ws40con-muted); font-size: calc(13px * var(--ws40con-fs, 1)); }
.ws40con-full__trendval { font-size: calc(11px * var(--ws40con-fs, 1)); font-weight: 600; white-space: nowrap; }

.ws40con-full__icon {
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
}

/* Time annotation now sits UNDER the value (its own line in the value cell),
   so the label and the reading always share one line. */
.ws40con-full__time {
    display: block;
    font-weight: 400;
    color: var(--ws40con-muted);
    font-size: calc(11px * var(--ws40con-fs, 1));
    white-space: nowrap;
    text-align: right;
}

/* DT-27 native daily peak: sits under the value, spanning the whole row grid. */
.ws40con-full__maxline {
    grid-column: 1 / -1;
    text-align: right;
    font-weight: 400;
    font-size: calc(11px * var(--ws40con-fs, 1));
    color: var(--ws40con-muted);
    line-height: 1.3;
    margin-top: -2px;
}

@media (max-width: 600px) {
    .ws40con-full__grid,
    .ws40con-full__grid.ws40con-full__grid--cols-1,
    .ws40con-full__grid.ws40con-full__grid--cols-2,
    .ws40con-full__grid.ws40con-full__grid--cols-3 {
        grid-template-columns: 1fr !important;
    }
}

/* ── Gauges ──────────────────────────────────────────────────────────── */

.ws40con-gauges__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.ws40con-g {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--ws40con-border);
    border-radius: 12px;
    background: var(--ws40con-card-bg);
}

.ws40con-g__label {
    font-size: calc(11px * var(--ws40con-fs, 1));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ws40con-muted);
    margin: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.ws40con-g__current {
    margin: 0;
}

.ws40con-g__value {
    font-size: calc(22px * var(--ws40con-fs, 1));
    font-weight: 700;
    color: var(--ws40con-ink);
}

.ws40con-g__svg {
    width: 100%;
    max-width: 200px;
    display: block;
    margin: 4px auto 0;
}

/* Vertical bar */

.ws40con-g__vert {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin: 4px auto 0;
    font-size: calc(10px * var(--ws40con-fs, 1));
    color: var(--ws40con-muted);
}

.ws40con-g__vert-track {
    height: 100px;
    background: var(--ws40con-border);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.ws40con-g__vert-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    transition: height 0.4s ease;
}

/* Secondary row */

.ws40con-g__sub {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-size: calc(11px * var(--ws40con-fs, 1));
    color: var(--ws40con-muted);
    margin-top: 4px;
}

.ws40con-g__sub-item strong {
    color: var(--ws40con-ink);
    font-weight: 700;
}

.ws40con-g__trend {
    font-size: calc(16px * var(--ws40con-fs, 1));
    font-weight: 700;
    color: var(--ws40con-ink);
}
/* Directional colour + compact sizing when the gauge trend carries the signed
   3h value ("▲ +1,2 hPa · 3h"). */
.ws40con-g__trend--up   { color: var(--ws40con-trend-up, #2e9e5b); font-size: calc(12px * var(--ws40con-fs, 1)); }
.ws40con-g__trend--down { color: var(--ws40con-trend-down, #e0574f); font-size: calc(12px * var(--ws40con-fs, 1)); }
.ws40con-g__trend--flat { color: var(--ws40con-muted); font-size: calc(12px * var(--ws40con-fs, 1)); }

/* ── Compass (standalone block) ──────────────────────────────────────── */

.ws40con-compass2 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* Su mobile: stesso layout del desktop (bussola + dati affiancati), centrato.
   La bussola si rimpicciolisce per stare accanto al testo su schermi stretti. */
@media (max-width: 640px) {
    .ws40con-compass2 {
        justify-content: center;
        gap: 12px;
    }
    .ws40con-compass2--large  .ws40con-compass2__svg { width: 120px; height: 120px; }
    .ws40con-compass2--medium .ws40con-compass2__svg { width: 100px; height: 100px; }
    .ws40con-compass2--small  .ws40con-compass2__svg { width:  70px; height:  70px; }
    .ws40con-compass2__info  { min-width: 0; }
    .ws40con-compass2__dir   { font-size: calc(22px * var(--ws40con-fs, 1)); }
    .ws40con-compass2__spd   { font-size: calc(13px * var(--ws40con-fs, 1)); white-space: nowrap; }
    .ws40con-compass2__gust  { font-size: calc(11px * var(--ws40con-fs, 1)); white-space: nowrap; }
}

.ws40con-compass2__svg {
    flex-shrink: 0;
    overflow: visible;
}

/* Size variants — controlled via class, not inline style */
.ws40con-compass2--small  .ws40con-compass2__svg { width:  80px; height:  80px; }
.ws40con-compass2--medium .ws40con-compass2__svg { width: 140px; height: 140px; }
.ws40con-compass2--large  .ws40con-compass2__svg { width: 180px; height: 180px; }

.ws40con-compass2__ring-outer {
    fill: var(--ws40con-card-bg);
    stroke: var(--ws40con-border);
    stroke-width: 1.5;
}

.ws40con-compass2__ring-inner {
    fill: none;
    stroke: var(--ws40con-border);
    stroke-width: 0.5;
    stroke-dasharray: 2 3;
}

.ws40con-compass2__tick {
    stroke: var(--ws40con-muted);
    stroke-width: 0.8;
}

.ws40con-compass2__tick--major {
    stroke: var(--ws40con-ink);
    stroke-width: 1.5;
}

/* Cardinal labels inside ring: N E S W */
.ws40con-compass2__card {
    font-size: calc(9px * var(--ws40con-fs, 1));
    font-weight: 700;
    fill: var(--ws40con-ink);
    font-family: inherit;
}

/* Intercardinal labels: NE SE SW NW */
.ws40con-compass2__inter {
    font-size: 7px;
    font-weight: 600;
    fill: var(--ws40con-muted);
    font-family: inherit;
}

/* Secondary labels: NNE ENE… (optional) */
.ws40con-compass2__sec {
    font-size: 5.5px;
    font-weight: 400;
    fill: var(--ws40con-muted);
    font-family: inherit;
    opacity: 0.7;
}

/* Wind names outside the ring */
.ws40con-compass2__windname {
    font-size: 7px;
    font-weight: 700;
    fill: var(--ws40con-blue);
    font-family: inherit;
    letter-spacing: 0;
}

.ws40con-compass2__windname--inter {
    font-size: 6px;
    font-weight: 600;
    opacity: 0.85;
}

.ws40con-compass2__needle-n {
    fill: #e0533d;
}

.ws40con-compass2__needle-s {
    fill: #c3c4c7;
}

.ws40con-compass2__hub {
    fill: var(--ws40con-ink);
}

.ws40con-compass2__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    min-width: 90px;
}

.ws40con-compass2__dir {
    font-size: calc(28px * var(--ws40con-fs, 1));
    font-weight: 800;
    color: var(--ws40con-ink);
    line-height: 1;
}

.ws40con-compass2__windlabel {
    font-size: calc(11px * var(--ws40con-fs, 1));
    color: var(--ws40con-blue);
    font-weight: 600;
    margin-top: -2px;
}

.ws40con-compass2__spd {
    font-size: calc(15px * var(--ws40con-fs, 1));
    color: var(--ws40con-ink);
    font-weight: 700;
    margin-top: 4px;
}

.ws40con-compass2__gust {
    font-size: calc(12px * var(--ws40con-fs, 1));
    color: var(--ws40con-muted);
}

/* ── Beaufort ────────────────────────────────────────────────────────── */

.ws40con-bft {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 6px 0;
}

.ws40con-bft__icon {
    line-height: 0;
}

.ws40con-bft__main {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.ws40con-bft__num {
    font-size: calc(44px * var(--ws40con-fs, 1));
    font-weight: 800;
    line-height: 1;
    color: var(--ws40con-ink);
}

.ws40con-bft__unit {
    font-size: calc(16px * var(--ws40con-fs, 1));
    font-weight: 600;
    color: var(--ws40con-muted);
}

.ws40con-bft__label {
    font-size: calc(15px * var(--ws40con-fs, 1));
    font-weight: 600;
    color: var(--ws40con-blue);
}

.ws40con-bft__spd {
    font-size: calc(15px * var(--ws40con-fs, 1));
    font-weight: 700;
    color: var(--ws40con-ink);
    margin-top: 2px;
}

.ws40con-bft__gust {
    font-size: calc(12px * var(--ws40con-fs, 1));
    font-weight: 600;
    color: var(--ws40con-muted);
}

.ws40con-bft__range {
    font-size: calc(12px * var(--ws40con-fs, 1));
    font-weight: 600;
    color: var(--ws40con-muted);
    margin-top: 2px;
}

.ws40con-bft__effect {
    font-size: calc(12px * var(--ws40con-fs, 1));
    font-style: italic;
    color: var(--ws40con-muted);
    text-align: center;
    max-width: 220px;
    line-height: 1.35;
    margin-top: 2px;
}

/* Severity colour of the Beaufort number (opt-in via show_color). */
.ws40con-bft--color[data-bft-force="0"]  .ws40con-bft__num { color: #7FB3E0; }
.ws40con-bft--color[data-bft-force="1"]  .ws40con-bft__num { color: #5BA84F; }
.ws40con-bft--color[data-bft-force="2"]  .ws40con-bft__num { color: #5FB84F; }
.ws40con-bft--color[data-bft-force="3"]  .ws40con-bft__num { color: #8DB52A; }
.ws40con-bft--color[data-bft-force="4"]  .ws40con-bft__num { color: #B6BB22; }
.ws40con-bft--color[data-bft-force="5"]  .ws40con-bft__num { color: #D9BE1F; }
.ws40con-bft--color[data-bft-force="6"]  .ws40con-bft__num { color: #F5B731; }
.ws40con-bft--color[data-bft-force="7"]  .ws40con-bft__num { color: #F59331; }
.ws40con-bft--color[data-bft-force="8"]  .ws40con-bft__num { color: #F06B2A; }
.ws40con-bft--color[data-bft-force="9"]  .ws40con-bft__num { color: #E8492A; }
.ws40con-bft--color[data-bft-force="10"] .ws40con-bft__num { color: #D6322A; }
.ws40con-bft--color[data-bft-force="11"] .ws40con-bft__num { color: #B81E2A; }
.ws40con-bft--color[data-bft-force="12"] .ws40con-bft__num { color: #8B1424; }

.ws40con-bft__bar {
    display: flex;
    gap: 3px;
    width: 100%;
    max-width: 280px;
    margin-top: 4px;
}

.ws40con-bft__seg {
    flex: 1;
    height: 12px;
    border-radius: 3px;
    background: var(--ws40con-border);
    transition: background-color .2s ease;
}

/* Color ramp for active segments: green → yellow → orange → red */
.ws40con-bft__seg--0.is-on  { background: #7FB3E0; }
.ws40con-bft__seg--1.is-on  { background: #6FC36F; }
.ws40con-bft__seg--2.is-on  { background: #5FB84F; }
.ws40con-bft__seg--3.is-on  { background: #9FCB3A; }
.ws40con-bft__seg--4.is-on  { background: #CFD52E; }
.ws40con-bft__seg--5.is-on  { background: #F0D52A; }
.ws40con-bft__seg--6.is-on  { background: #F5B731; }
.ws40con-bft__seg--7.is-on  { background: #F59331; }
.ws40con-bft__seg--8.is-on  { background: #F06B2A; }
.ws40con-bft__seg--9.is-on  { background: #E8492A; }
.ws40con-bft__seg--10.is-on { background: #D6322A; }
.ws40con-bft__seg--11.is-on { background: #B81E2A; }
.ws40con-bft__seg--12.is-on { background: #8B1424; }

.ws40con-bft__scale {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 280px;
    font-size: calc(10px * var(--ws40con-fs, 1));
    font-family: var(--ws40con-mono, monospace);
    color: var(--ws40con-muted);
    margin-top: 2px;
}



/* ── Sun / Stats ─────────────────────────────────────────────────────── */

.ws40con-sun__list {
    margin: 0;
}

.ws40con-sun__row,
.ws40con-stat__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border-bottom: 1px dashed var(--ws40con-border);
    font-size: calc(13px * var(--ws40con-fs, 1));
    min-width: 0;
}

/* Icon slot — fixed width, keeps alignment consistent */
.ws40con-sun__icon,
.ws40con-stat__icon {
    flex: 0 0 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ws40con-sun__icon--empty,
.ws40con-stat__icon--empty {
    display: none;
}

.ws40con-icon {
    display: block;
    flex-shrink: 0;
}

/* Label — grows, left-aligned, wraps if needed */
.ws40con-sun__row dt,
.ws40con-sun__label,
.ws40con-stat__label {
    flex: 1 1 auto;
    color: var(--ws40con-muted);
    font-size: var(--ws40con-label-size, 13px);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.25;
}

/* Value — right-aligned, no wrap */
.ws40con-sun__row dd,
.ws40con-sun__value,
.ws40con-stat__value {
    flex: 0 0 auto;
    margin: 0;
    font-weight: 700;
    color: var(--ws40con-ink);
    text-align: right;
    white-space: nowrap;
    font-size: var(--ws40con-value-size, 13px);
}

/* Time-of-extreme inline */
.ws40con-stat__time {
    color: var(--ws40con-muted);
    font-weight: 400;
    font-size: calc(11px * var(--ws40con-fs, 1));
    margin-left: 4px;
}

/* ── Valori estremi: layout grid / strip / chips / table ─────────────── */

/* GRID — responsive cards */
.ws40con-stat__grid {
    display: grid;
    grid-template-columns: repeat(var(--ws40con-stat-cols, 3), minmax(0, 1fr));
    gap: 8px;
}
.ws40con-stat__card,
.ws40con-stat__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
}
.ws40con-stat__card {
    padding: 10px 6px;
    background: var(--ws40con-card-bg, rgba(0, 0, 0, 0.03));
    border-radius: var(--ws40con-radius, 8px);
}
.ws40con-stat__card .ws40con-stat__icon,
.ws40con-stat__cell .ws40con-stat__icon {
    flex: 0 0 auto;
    width: auto;
}
.ws40con-stat__card .ws40con-stat__value,
.ws40con-stat__cell .ws40con-stat__value {
    text-align: center;
    white-space: nowrap;
}
.ws40con-stat__card .ws40con-stat__value { font-size: var(--ws40con-value-size, 18px); }
.ws40con-stat__cell .ws40con-stat__value { font-size: var(--ws40con-value-size, 16px); }
.ws40con-stat__card .ws40con-stat__label,
.ws40con-stat__cell .ws40con-stat__label {
    flex: 0 0 auto;
    text-align: center;
}
.ws40con-stat__card .ws40con-stat__time,
.ws40con-stat__cell .ws40con-stat__time { margin: 0; }

/* STRIP — single horizontal band that scrolls, with a custom scrollbar */
.ws40con-stat__striphld {
    position: relative;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}
.ws40con-stat__strip {
    display: flex;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* Native browser scrollbar, styled like the Forecast / Dust / Air-quality
       blocks — one consistent bar across the Consolle, and no JS timing to get
       wrong (the old custom thumb mis-measured on early load / resize / stretch). */
    scrollbar-width: thin;
    scrollbar-color: var(--ws40con-blue, #1D9E75) #e0e0e0;
}
.ws40con-stat__strip::-webkit-scrollbar { height: 6px; }
.ws40con-stat__strip::-webkit-scrollbar-track { background: #e0e0e0; border-radius: 3px; }
.ws40con-stat__strip::-webkit-scrollbar-thumb { background: var(--ws40con-blue, #1D9E75); border-radius: 3px; }
.ws40con-stat__strip::-webkit-scrollbar-button { display: none; }
.ws40con-stat__cell {
    flex: 1 1 0;
    min-width: 96px;
    padding: 8px 10px;
}
.ws40con-stat__cell + .ws40con-stat__cell {
    border-left: 1px solid var(--ws40con-border);
}

/* INLINE — chips that wrap */
.ws40con-stat__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ws40con-stat__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--ws40con-card-bg, rgba(0, 0, 0, 0.03));
    border-radius: 999px;
    font-size: calc(13px * var(--ws40con-fs, 1));
}
.ws40con-stat__chip .ws40con-stat__icon { flex: 0 0 auto; width: auto; }
.ws40con-stat__chip .ws40con-stat__label { flex: 0 0 auto; }
.ws40con-stat__chip .ws40con-stat__value { white-space: nowrap; }
.ws40con-stat__chip .ws40con-stat__time { margin-left: 0; }

/* TABLE */
.ws40con-stat__table {
    width: 100%;
    border-collapse: collapse;
    font-size: calc(13px * var(--ws40con-fs, 1));
}
.ws40con-stat__table td {
    padding: 5px 8px;
    border-bottom: 1px dashed var(--ws40con-border);
}
.ws40con-stat__table tr:last-child td { border-bottom: none; }
.ws40con-stat__td-icon { width: 30px; }
.ws40con-stat__td-icon .ws40con-icon { display: block; }
.ws40con-stat__td-label { color: var(--ws40con-muted); font-size: var(--ws40con-label-size, 13px); }
.ws40con-stat__td-value {
    font-weight: 700;
    color: var(--ws40con-ink);
    text-align: right;
    white-space: nowrap;
    font-size: var(--ws40con-value-size, 13px);
}
.ws40con-stat__td-time { color: var(--ws40con-muted); font-size: calc(11px * var(--ws40con-fs, 1)); text-align: right; white-space: nowrap; }

/* ── Webcam ──────────────────────────────────────────────────────────── */

.ws40con-webcam .ws40con-block__body {
    padding: 0;
}

.ws40con-webcam__figure {
    position: relative;
    margin: 0;
}

.ws40con-webcam__img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 120px;
    background: #0c1622;
}

/* LIVE badge nell'intestazione blu */
.ws40con-webcam__live {
    background: #d23b3b;
    color: #fff;
    font-size: calc(10px * var(--ws40con-fs, 1));
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: 4px;
    padding: 2px 7px;
    text-transform: uppercase;
}

/* Timestamp nell'intestazione blu */
.ws40con-webcam__time {
    color: rgba(255,255,255,0.85);
    font-size: calc(12px * var(--ws40con-fs, 1));
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

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

.ws40con-map .ws40con-block__body {
    padding: 0;
}

.ws40con-map__frame {
    position: relative;
    padding-top: 62%;
}

.ws40con-map__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── Responsive: base rules (breakpoints via inline <style> from template settings) ── */

/* Cards: auto-wrap naturally on narrow containers */
.ws40con-cards__grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

/* Full data: auto-wrap group columns by available width (grid, not columns) */
.ws40con-full__grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Gauge: auto-wrap naturally */
.ws40con-gauges__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--ws40con-gap);
}

/* ── Air quality block ───────────────────────────────────────────────── */

.ws40con-aq {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
}

/*
 * Card PM — struttura:
 *
 *  ┌──────────────────────────────┐
 *  │  [icona 48px]   PM1          │  ← riga 1: 2 colonne
 *  │                 2,1 µg/m³    │
 *  ├──────────────────────────────┤
 *  │  Media 5,6 µg/m³  Max 16,2 µg/m³ 00:20  │  ← riga 2: span 2 col
 *  └──────────────────────────────┘
 */
.ws40con-aq__card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 12px 16px;
    border: 1px solid var(--ws40con-border);
    border-radius: 10px;
    background: var(--ws40con-card-bg);
    text-align: center;
}

/* Riga superiore: icona affiancata al testo */
.ws40con-aq__top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Col 1 riga 1 — icona, stessa riga del testo */
.ws40con-aq__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ws40con-aq__icon-wrap img,
.ws40con-aq__icon-wrap svg {
    width: 48px !important;
    height: 48px !important;
    display: block;
}

/* Col 2 riga 1 — label + valore, stessa riga dell'icona */
.ws40con-aq__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.ws40con-aq__label {
    font-size: calc(11px * var(--ws40con-fs, 1));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ws40con-muted);
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.ws40con-aq__value {
    font-size: calc(28px * var(--ws40con-fs, 1));
    font-weight: 800;
    color: var(--ws40con-ink);
    line-height: 1.1;
}

.ws40con-aq__unit {
    font-size: calc(12px * var(--ws40con-fs, 1));
    font-weight: 400;
    color: var(--ws40con-muted);
}

/* Riga 2: stats centrate sotto icona+valore */
.ws40con-aq__stats {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 14px;
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px dashed var(--ws40con-border);
    width: 100%;
}

.ws40con-aq__stat {
    font-size: calc(11px * var(--ws40con-fs, 1));
    color: var(--ws40con-muted);
    white-space: nowrap;
}

.ws40con-aq__stat strong {
    color: var(--ws40con-ink);
    font-weight: 700;
}

/* AQI row: centrata */
.ws40con-aq__aqi-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--ws40con-border);
    border-radius: 10px;
    background: var(--ws40con-card-bg);
}

.ws40con-aq__aqi-badge {
    display: inline-block;
    font-size: calc(13px * var(--ws40con-fs, 1));
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
}

.ws40con-aq__aqi--good           { background: #d4edda; color: #155724; }
.ws40con-aq__aqi--fair           { background: #d1ecf1; color: #0c5460; }
.ws40con-aq__aqi--moderate       { background: #fff3cd; color: #856404; }
.ws40con-aq__aqi--poor           { background: #fde8d8; color: #7d3000; }
.ws40con-aq__aqi--very-poor      { background: #f8d7da; color: #721c24; }
.ws40con-aq__aqi--extremely-poor { background: #6b0000; color: #fff; }



/* ── Alerts block ────────────────────────────────────────────────────── */

/* Remove body padding so the ws40-alerts-widget sits flush */
.ws40con-allarmi .ws40con-block__body {
    padding: 0;
}

/* The widget already has its own internal spacing */
.ws40con-allarmi .ws40-alerts-widget {
    border-radius: 0;
    border: none;
    box-shadow: none;
    font-size: calc(13px * var(--ws40con-fs, 1));
}

/* Tighter header inside Consolle block (title already in block head) */
.ws40con-allarmi .ws40-alerts-header {
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--ws40con-border);
    background: var(--ws40con-bg);
}

.ws40con-allarmi .ws40-alerts-title {
    font-size: calc(13px * var(--ws40con-fs, 1));
    font-weight: 600;
}

.ws40con-allarmi .ws40-alert-row {
    margin: 0 10px;
    border-radius: var(--ws40con-radius);
    margin-bottom: 8px;
    margin-top: 0;
}

.ws40con-allarmi .ws40-alert-row:first-of-type {
    margin-top: 8px;
}

.ws40con-allarmi .ws40-alerts-footer {
    padding: 8px 14px;
    border-top: 1px solid var(--ws40con-border);
    background: var(--ws40con-bg);
    color: var(--ws40con-muted);
}

/* ── Brand block (firma) ─────────────────────────────────────────────── */

.ws40con__brand {
    margin-top: var(--ws40con-gap);
}

.ws40con__brand--left   { text-align: left; }
.ws40con__brand--center { text-align: center; }
.ws40con__brand--right  { text-align: right; }

.ws40con__brand-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 22px;
    border: 1px solid var(--ws40con-border);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(55, 138, 221, 0.07), rgba(99, 153, 34, 0.05)),
        var(--ws40con-card-bg, #fff);
    box-shadow: 0 1px 2px rgba(16, 42, 67, 0.05);
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ws40con__brand-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(16, 42, 67, 0.13);
    border-color: rgba(55, 138, 221, 0.45);
    text-decoration: none;
}

.ws40con__brand-logo {
    width: auto;
    height: 64px;
    flex: 0 0 auto;
    display: block;
    max-width: 100%;
}

/* Size variants — the logo is the whole signature now, so scale it generously. */
.ws40con__brand--small  .ws40con__brand-card { padding: 10px 16px; }
.ws40con__brand--small  .ws40con__brand-logo { height: 44px; }
.ws40con__brand--large  .ws40con__brand-card { padding: 18px 28px; }
.ws40con__brand--large  .ws40con__brand-logo { height: 88px; }

/* Style tag inside .ws40con must not participate in layout */
.ws40con-style {
    display: none;
}

/* ── Status block ────────────────────────────────────────────────────── */

.ws40con-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 8px 4px 4px;
    text-align: center;
}

.ws40con-status__row {
    display: grid;
    grid-template-columns: 56px minmax(0, max-content);
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Riga 1: immagine stazione + pill ONLINE/OFFLINE */
.ws40con-status__row--top {
    align-items: center;
}

.ws40con-status__station-img,
.ws40con-status__refresh-img {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ws40con-status__station-img img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    display: block;
}

.ws40con-status__right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* Riga 2: icona refresh + timestamp/elapsed */
.ws40con-status__row--update {
    align-items: center;
    gap: 12px;
}

.ws40con-status__refresh-img img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
}

.ws40con-status__update-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

/* Pill */
.ws40con-status__pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: calc(13px * var(--ws40con-fs, 1));
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    width: fit-content;
}

.ws40con-status__pill--online  { background: #d1fae5; color: #065f46; }
.ws40con-status__pill--offline { background: #fee2e2; color: #991b1b; }
.ws40con-status__pill--unknown { background: #f3f4f6; color: #6b7280; }

.ws40con-status__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ws40con-status__pill--online .ws40con-status__dot {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,.25);
    animation: ws40-pulse 2s infinite;
}

.ws40con-status__pill--offline .ws40con-status__dot {
    background: #ef4444;
}

@keyframes ws40-pulse {
    0%,100% { box-shadow: 0 0 0 3px rgba(16,185,129,.25); }
    50%      { box-shadow: 0 0 0 6px rgba(16,185,129,.10); }
}

.ws40con-status__ts {
    font-size: calc(13px * var(--ws40con-fs, 1));
    font-weight: 600;
    color: var(--ws40con-ink);
}

.ws40con-status__elapsed {
    font-size: calc(12px * var(--ws40con-fs, 1));
    color: var(--ws40con-muted);
}

.ws40con-status__source {
    font-size: calc(13px * var(--ws40con-fs, 1));
    font-weight: 700;
    color: var(--ws40con-blue);
}

.ws40con-status__outages-wrap {
    width: 100%;
    border: 1px solid var(--ws40con-border);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 2px;
    font-size: calc(12px * var(--ws40con-fs, 1));
}

.ws40con-status__outages-hd {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    background: rgba(15, 28, 46, 0.05);
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: calc(12px * var(--ws40con-fs, 1));
    font-family: inherit;
    transition: background 0.12s;
}

.ws40con-status__outages-hd:hover {
    background: rgba(15, 28, 46, 0.09);
}

.ws40con-status__badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: calc(11px * var(--ws40con-fs, 1));
}

.ws40con-status__badge--ok   { background: #d1fae5; color: #065f46; }
.ws40con-status__badge--warn { background: #fef9c3; color: #92400e; }

.ws40con-status__toggle-lbl {
    flex: 1;
    color: var(--ws40con-blue);
    font-size: calc(11px * var(--ws40con-fs, 1));
}

.ws40con-status__toggle-arr {
    font-size: calc(11px * var(--ws40con-fs, 1));
    color: var(--ws40con-muted);
    transition: transform 0.15s;
}

.ws40con-status__outages-wrap.is-open .ws40con-status__toggle-arr {
    transform: rotate(90deg);
}

.ws40con-status__outages-body {
    display: none;
    padding: 6px 10px 8px;
    border-top: 1px solid var(--ws40con-border);
    background: #fff;
}

.ws40con-status__outages-wrap.is-open .ws40con-status__outages-body {
    display: block;
}

.ws40con-status__outage-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px dashed var(--ws40con-border);
    font-size: calc(11px * var(--ws40con-fs, 1));
}

.ws40con-status__outage-row:last-child { border-bottom: none; }

.ws40con-status__outage-when { color: var(--ws40con-ink); }
.ws40con-status__outage-dur  { color: var(--ws40con-muted); font-weight: 600; }

.ws40con-status__outage-empty {
    font-size: calc(11px * var(--ws40con-fs, 1));
    color: var(--ws40con-muted);
    padding: 2px 0;
}

/* ── Air quality: stats + footer ─────────────────────────────────────── */

.ws40con-aq__stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed var(--ws40con-border);
    width: 100%;
}

.ws40con-aq__stat {
    font-size: calc(11px * var(--ws40con-fs, 1));
    color: var(--ws40con-muted);
    white-space: nowrap;
}

.ws40con-aq__stat strong {
    color: var(--ws40con-ink);
    font-weight: 600;
}

.ws40con-aq__footer {
    text-align: center;
    margin-top: 4px;
    padding-top: 4px;
}

.ws40con-aq__ts {
    font-size: calc(10px * var(--ws40con-fs, 1));
    color: var(--ws40con-muted);
    opacity: 0.75;
}

/* ── Webcam tabs ─────────────────────────────────────────────────── */

.ws40con-webcam__tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #dcdcde;
    margin-bottom: 12px;
}

.ws40con-webcam__tab {
    padding: 10px 16px;
    background: transparent;
    border: none;
    font-size: calc(13px * var(--ws40con-fs, 1));
    font-weight: 500;
    color: #666;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
}

.ws40con-webcam__tab:hover {
    color: #333;
    background: #f9f9f9;
}

.ws40con-webcam__tab.active {
    color: #1f6fd6;
    border-bottom-color: #1f6fd6;
}

.ws40con-webcam__panel {
    display: none;
}

.ws40con-webcam__panel.active {
    display: block;
}

/* ── Classic Editor block ────────────────────────────────────────── */

.ws40con-custom-editor {
    font-size: calc(14px * var(--ws40con-fs, 1));
    line-height: 1.6;
    color: var(--ws40con-ink);
}

.ws40con-custom-editor p {
    margin: 0 0 0.8em;
}

.ws40con-custom-editor p:last-child {
    margin-bottom: 0;
}

.ws40con-custom-editor a {
    color: var(--ws40con-blue);
    text-decoration: underline;
}

.ws40con-custom-editor ul,
.ws40con-custom-editor ol {
    margin: 0 0 0.8em 1.5em;
}

.ws40con-custom-editor blockquote {
    border-left: 3px solid var(--ws40con-blue);
    margin: 0 0 0.8em;
    padding: 0.5em 1em;
    color: var(--ws40con-muted);
}

/* ── Live block (Meteobridge push) — matches Full-data styling ──────────── */
.ws40con-live__list {
    columns: 220px;
    column-gap: 24px;
    margin: 0;
    padding: 0;
}
.ws40con-live__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    border-bottom: 1px dashed var(--ws40con-border);
    padding: 4px 0;
    font-size: calc(13px * var(--ws40con-fs, 1));
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}
.ws40con-live__icon {
    flex: 0 0 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ws40con-live__label {
    color: var(--ws40con-muted);
    font-size: var(--ws40con-label-size, inherit);
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.25;
}
.ws40con-live__val {
    font-weight: 700;
    font-size: var(--ws40con-value-size, inherit);
    color: var(--ws40con-ink);
    white-space: nowrap;
    text-align: right;
    flex: 0 0 auto;
}
.ws40con-live__num {
    font-variant-numeric: tabular-nums;
}
.ws40con-live__unit {
    font-weight: 400;
    color: var(--ws40con-muted);
    font-size: .82em;
    margin-left: 3px;
}

/* Single "● LIVE" indicator with a pulsing dot when active */
.ws40con-live__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: calc(10px * var(--ws40con-fs, 1));
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--ws40con-blue, #1f6fd6);
    background: rgba(255, 255, 255, .55);
}
.ws40con-live__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9aa4b2;
}
.ws40con-live__badge.is-active {
    color: var(--ws40con-blue, #1f6fd6);
    background: rgba(255, 255, 255, .94);
}
.ws40con-live__badge.is-active .ws40con-live__dot {
    background: #2ea043;
    animation: ws40conLivePulse 1.4s ease-in-out infinite;
}
@keyframes ws40conLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(46,160,67,.55); }
    70%  { box-shadow: 0 0 0 6px rgba(46,160,67,0); }
    100% { box-shadow: 0 0 0 0 rgba(46,160,67,0); }
}
@media (max-width: 600px) {
    .ws40con-live__list { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .ws40con-live__badge.is-active .ws40con-live__dot { animation: none; }
}

/* Live card identity: subtle green accent strip (theme-safe, no bg override) */
.ws40con-block.ws40con-live {
    position: relative;
    box-shadow: inset 3px 0 0 0 #2ea043;
}

/* Fill the vertical void when the live block is stretched to a taller neighbour
   (e.g. Aviation Wind alongside it in a horizontal zone): let the body grow and
   centre the metrics list vertically. When the block is NOT stretched (used
   alone or stacked) there is no extra height, so this is a no-op — no regression.
   Scoped to the live block only; works for any admin row count / icons / text
   scale. The multi-column list keeps its natural height, so the columns stay
   balanced and fill the full width. */
.ws40con-block.ws40con-live .ws40con-block__body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.ws40con-block.ws40con-live .ws40con-live__wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Value flash on change (only inside the live block, via data-ws40-flash) */
@keyframes ws40conLiveFlash {
    0%   { background: rgba(46, 160, 67, .55); color: #1a7f37; transform: scale(1.18); }
    12%  { background: rgba(46, 160, 67, .55); color: #1a7f37; transform: scale(1.18); }
    100% { background: transparent;            color: inherit; transform: scale(1); }
}
.ws40con-live__flash {
    display: inline-block;
    transform-origin: right center;
    animation: ws40conLiveFlash 1.2s ease-out;
    border-radius: 4px;
    padding: 0 4px;
    margin: 0 -4px;
}
@media (prefers-reduced-motion: reduce) {
    .ws40con-live__flash { animation: none; }
}

/* ── Soil & Leaf — per-channel cards (flow grid, no empty space) ─────── */
.ws40con-soilleaf .ws40con-sl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
/* Per-block layout options (columns + card alignment), shared by soil/leaf and
   extra-sensors grids. The extrasensors variant re-declares grid-template-columns
   with the same specificity later in the sheet, so we qualify these with the
   context class too, to reliably win. */
.ws40con-soilleaf .ws40con-sl-grid.ws40con-sl-grid--cols-1,
.ws40con-extrasensors .ws40con-sl-grid.ws40con-sl-grid--cols-1 { grid-template-columns: 1fr !important; }
.ws40con-soilleaf .ws40con-sl-grid.ws40con-sl-grid--cols-2,
.ws40con-extrasensors .ws40con-sl-grid.ws40con-sl-grid--cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.ws40con-soilleaf .ws40con-sl-grid.ws40con-sl-grid--cols-3,
.ws40con-extrasensors .ws40con-sl-grid.ws40con-sl-grid--cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.ws40con-sl-grid--al-left  { justify-items: start !important; }
.ws40con-sl-grid--al-center { justify-items: center !important; }
.ws40con-sl-grid--al-right { justify-items: end !important; }
@media (max-width: 600px) {
    .ws40con-sl-grid.ws40con-sl-grid--cols-2,
    .ws40con-sl-grid.ws40con-sl-grid--cols-3 { grid-template-columns: 1fr; }
}
.ws40con-soilleaf .ws40con-sl-card {
    border: 1px solid var(--ws40con-border);
    border-radius: 10px;
    padding: 10px 12px;
}
.ws40con-soilleaf .ws40con-sl-card--leaf {
    border-color: #b7e0c8;
    background: rgba(29, 158, 117, 0.06);
}
.ws40con-soilleaf .ws40con-sl-card__title {
    font-size: var(--ws40con-label-size, 12px);
    font-weight: 600;
    color: var(--ws40con-muted);
    margin: 0 0 8px;
}
.ws40con-soilleaf .ws40con-sl-card--leaf .ws40con-sl-card__title { color: #0f6e56; }
.ws40con-soilleaf .ws40con-sl-metric {
    display: flex;
    align-items: center;
    gap: 7px;
    font-variant-numeric: tabular-nums;
}
.ws40con-soilleaf .ws40con-sl-metric + .ws40con-sl-metric { margin-top: 6px; }
.ws40con-soilleaf .ws40con-sl-metric__ic { flex: 0 0 auto; display: inline-flex; }
.ws40con-soilleaf .ws40con-sl-metric__ic .ws40con-icon { width: 20px; height: 20px; display: block; }
.ws40con-soilleaf .ws40con-sl-metric__val {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    font-weight: 500;
    font-size: var(--ws40con-value-size, 14px);
    /* Use the strong ink colour like the other value blocks (full-data, stats);
       without this the reading inherited a muted grey and looked washed out. The
       unit keeps its own muted style. */
    color: var(--ws40con-ink);
}
.ws40con-soilleaf .ws40con-sl-metric__val .ws40con-sl-pill { margin-left: auto; }

/* Shared value chrome (muted unit + moisture state pills) */
.ws40con-sl-unit { font-weight: 400; color: var(--ws40con-muted); font-size: 0.86em; }
.ws40con-sl-pill { padding: 1px 7px; border-radius: 999px; font-size: calc(11px * var(--ws40con-fs, 1)); font-weight: 600; line-height: 1.5; white-space: nowrap; }
.ws40con-sl-pill--moist   { background: #d1fae5; color: #065f46; }
.ws40con-sl-pill--dry     { background: #fef9c3; color: #92400e; }
.ws40con-sl-pill--verydry { background: #fee2e2; color: #991b1b; }

/* Updated footer */
.ws40con-soilleaf__foot { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--ws40con-border); font-size: calc(12px * var(--ws40con-fs, 1)); color: var(--ws40con-muted); }
.ws40con-soilleaf__foot-ic { flex: 0 0 auto; }
.ws40con-full__foot { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--ws40con-border); font-size: calc(11px * var(--ws40con-fs, 1)); color: var(--ws40con-muted); }
.ws40con-full__foot-ic { flex: 0 0 auto; opacity: .85; }
.ws40con-soilleaf__foot.is-stale { color: #92400e; }

/* Extra sensors block (2.6.78) — reuses the soil/leaf card layout (unit/pill/foot
   classes are already global). A metric row is "label + value"; the derived dew
   point row is muted so it reads as calculated, not measured. */
.ws40con-extrasensors .ws40con-sl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.ws40con-extrasensors .ws40con-sl-card {
    border: 1px solid var(--ws40con-border);
    border-radius: 10px;
    padding: 10px 12px;
}
.ws40con-extrasensors .ws40con-sl-card__title {
    font-size: var(--ws40con-label-size, 12px);
    font-weight: 600;
    color: var(--ws40con-muted);
    margin: 0 0 8px;
}
.ws40con-extrasensors .ws40con-sl-metric {
    display: flex;
    align-items: center;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}
.ws40con-extrasensors .ws40con-sl-metric + .ws40con-sl-metric { margin-top: 5px; }
.ws40con-extrasensors .ws40con-sl-metric__ic { flex: 0 0 auto; display: inline-flex; }
.ws40con-extrasensors .ws40con-sl-metric__ic .ws40con-icon { width: 20px; height: 20px; display: block; }
.ws40con-extrasensors .ws40con-sl-metric__lbl {
    flex: 0 0 auto;
    min-width: 40px;
    font-size: 0.82em;
    font-weight: 600;
    color: var(--ws40con-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.ws40con-extrasensors .ws40con-sl-metric__val {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    flex: 1 1 auto;
    font-weight: 500;
    font-size: var(--ws40con-value-size, 14px);
    color: var(--ws40con-ink);
}
.ws40con-extrasensors .ws40con-sl-metric.is-derived { opacity: 0.72; }
.ws40con-extrasensors .ws40con-sl-metric.is-derived .ws40con-sl-metric__val { font-weight: 400; }

/* ── Aviation wind block (dark cockpit instruments) ─────────────────────── */
.ws40con-av{ width:100%; }
.ws40con-av__svg{ width:100%; height:auto; display:block; }
.ws40con-av__bezel{ fill:#16181c; }
.ws40con-av__ring{ fill:#3b3f47; }
.ws40con-av__face{ fill:#26292e; }
.ws40con-av__card{ fill:#e8e9eb; font:700 12px/1 'DM Mono',ui-monospace,Menlo,Consolas,monospace; }
.ws40con-av__stick{ fill:#c2c7cc; font:400 9px/1 'DM Mono',ui-monospace,Menlo,Consolas,monospace; }
.ws40con-av__lbl{ fill:#8a9096; font:400 8px/1 'DM Mono',ui-monospace,monospace; letter-spacing:.5px; }
.ws40con-av__unit{ fill:#9aa0a6; font:400 10px/1 'DM Mono',ui-monospace,monospace; letter-spacing:1px; }
.ws40con-av__big{ fill:#e8e9eb; font:700 18px/1 'DM Mono',ui-monospace,Menlo,Consolas,monospace; }
.ws40con-av__avg-val{ fill:#7fb0e6; }
.ws40con-av__spd{ fill:#e8e9eb; font:700 26px/1 'DM Mono',ui-monospace,Menlo,Consolas,monospace; }
.ws40con-av__bft{ fill:#9aa0a6; font:700 9px/1 'DM Mono',ui-monospace,monospace; letter-spacing:.5px; }
.ws40con-av__bft[data-bft-force="0"]  { fill:#7FB3E0; }
.ws40con-av__bft[data-bft-force="1"]  { fill:#5BA84F; }
.ws40con-av__bft[data-bft-force="2"]  { fill:#5FB84F; }
.ws40con-av__bft[data-bft-force="3"]  { fill:#8DB52A; }
.ws40con-av__bft[data-bft-force="4"]  { fill:#B6BB22; }
.ws40con-av__bft[data-bft-force="5"]  { fill:#D9BE1F; }
.ws40con-av__bft[data-bft-force="6"]  { fill:#F5B731; }
.ws40con-av__bft[data-bft-force="7"]  { fill:#F59331; }
.ws40con-av__bft[data-bft-force="8"]  { fill:#F06B2A; }
.ws40con-av__bft[data-bft-force="9"]  { fill:#E8492A; }
.ws40con-av__bft[data-bft-force="10"] { fill:#D6322A; }
.ws40con-av__bft[data-bft-force="11"] { fill:#B81E2A; }
.ws40con-av__bft[data-bft-force="12"] { fill:#8B1424; }
.ws40con-av__bft-sep{ fill:#6f757c; }
.ws40con-av__bft-gust{ fill:#e0433d; }
/* Knots reading: the gust half uses the same red as the BFT gust and the dial's
   gust marker, so the three read as one piece of information. */
.ws40con-av__spd-sep{ fill:#6f757c; }
.ws40con-av__spd-gust{ fill:#e0433d; }
.ws40con-av-legend{ display:flex; gap:18px; justify-content:center; margin:2px 0 0; }
.ws40con-av-legend__item{ display:inline-flex; align-items:center; gap:6px; font-size: calc(11px * var(--ws40con-fs, 1)); color:#8a9099; }
.ws40con-av-legend__swatch{ width:14px; height:3px; border-radius:2px; display:inline-block; }
.ws40con-av-legend__swatch.is-wind{ background:#e8e9eb; }
.ws40con-av-legend__swatch.is-gust{ background:#e0433d; }
.ws40con-av__needle-last{ fill:#e0433d; transition:transform .5s cubic-bezier(.34,1.35,.5,1); }
.ws40con-av__needle-avg{ fill:#2f7fd6; transition:transform .5s cubic-bezier(.34,1.35,.5,1); }
.ws40con-av__needle-spd{ fill:#eceef0; transition:transform .5s cubic-bezier(.34,1.35,.5,1); }
.ws40con-av__gust{ stroke:#e0433d; stroke-width:3; stroke-linecap:round; transition:transform .4s ease; }
.ws40con-av__hub{ fill:#15171a; stroke:#4a4e55; stroke-width:1.5; }
.ws40con-av__hub-dot{ fill:#c9ccd1; }

/* ── Aviation: live/delayed status pill + caption ───────────────────────── */
.ws40con-av-status{ display:inline-flex; align-items:center; gap:6px; font-size: calc(10px * var(--ws40con-fs, 1)); font-weight:700;
  padding:2px 9px; border-radius:10px; font-family:'DM Mono',ui-monospace,Menlo,Consolas,monospace; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(255,255,255,.94); }
.ws40con-av-status__dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.ws40con-av-status.is-live{ color:var(--ws40con-blue, #1f6fd6); }
.ws40con-av-status.is-live .ws40con-av-status__dot{ background:#2ea043; animation:ws40con-av-pulse 3s ease-out infinite; }
.ws40con-av-status.is-delayed{ color:#9a6a08; }
.ws40con-av-status.is-delayed .ws40con-av-status__dot{ background:#e0aa2a; }
@keyframes ws40con-av-pulse{ 0%{ box-shadow:0 0 0 0 rgba(47,191,106,.55); } 70%{ box-shadow:0 0 0 6px rgba(47,191,106,0); } 100%{ box-shadow:0 0 0 0 rgba(47,191,106,0); } }
/* ── Aviation wind: light variant ────────────────────────────────────────
   Same drawing, inverted tones, for templates where a black instrument sits
   badly on a pale page. Only the structural colours are redefined; the
   Beaufort scale (.ws40con-av__bft-*) keeps its palette in both variants,
   because those colours encode wind force and must read the same either way.
   The two coloured needles are DARKENED rather than inverted: the blue was
   chosen to glow on black (#2f7fd6 over #26292e) and would wash out on white,
   and the red needed more depth to separate from a pale face. The speed needle
   was near-white and simply flips to near-black. */
.ws40con-av--light .ws40con-av__bezel{ fill:#c9ced6; }
.ws40con-av--light .ws40con-av__ring{ fill:#dde1e7; }
.ws40con-av--light .ws40con-av__face{ fill:#f7f8fa; }
.ws40con-av--light .ws40con-av__card{ fill:#1f2530; }
.ws40con-av--light .ws40con-av__stick{ fill:#3c434c; }
.ws40con-av--light .ws40con-av__lbl{ fill:#6b7280; }
.ws40con-av--light .ws40con-av__unit{ fill:#6b7280; }
.ws40con-av--light .ws40con-av__big{ fill:#1f2530; }
.ws40con-av--light .ws40con-av__spd{ fill:#1f2530; }
.ws40con-av--light .ws40con-av__avg-val{ fill:#1a5aa8; }
.ws40con-av--light .ws40con-av__needle-avg{ fill:#1a5aa8; }
.ws40con-av--light .ws40con-av__needle-last{ fill:#b3271f; }
.ws40con-av--light .ws40con-av__needle-spd{ fill:#2a2f38; }
.ws40con-av--light .ws40con-av__gust{ stroke:#b3271f; }
/* The hub stays dark with a pale centre: inverting it would erase the pivot. */
.ws40con-av--light .ws40con-av__hub{ fill:#2a2f38; stroke:#8c939c; }
.ws40con-av--light .ws40con-av__hub-dot{ fill:#f7f8fa; }
.ws40con-av--light .ws40con-av-legend__swatch.is-wind{ background:#2a2f38; }
.ws40con-av--light .ws40con-av-legend__swatch.is-gust{ background:#b3271f; }

/* Central readout and scale figures over the sweeping needles. The text is
   already painted after the needles, so the layer order is right, but with no
   separation the needle shows through the gaps between digits and appears to
   cut them. paint-order draws a stroke in the FACE colour beneath the glyphs,
   carving a thin halo. The stroke is scaled to the type size: 3px under a 26px
   readout reads as a clean edge, the same 3px under an 8px label would fatten
   it. The stroke colour follows the variant. */
.ws40con-av__big, .ws40con-av__avg-val {
    paint-order: stroke fill;
    stroke: #26292e;
    stroke-width: 3px;
    stroke-linejoin: round;
}
.ws40con-av__lbl, .ws40con-av__stick, .ws40con-av__unit {
    paint-order: stroke fill;
    stroke: #26292e;
    stroke-width: 1.8px;
    stroke-linejoin: round;
}
.ws40con-av--light .ws40con-av__big,
.ws40con-av--light .ws40con-av__avg-val,
.ws40con-av--light .ws40con-av__lbl,
.ws40con-av--light .ws40con-av__stick,
.ws40con-av--light .ws40con-av__unit {
    stroke: #f7f8fa;
}

.ws40con-av-cap{ margin:8px 2px 0; font-size: calc(12px * var(--ws40con-fs, 1)); line-height:1.5; color:#8b93a1; }
.ws40con-cfg-linkrow{ margin:2px 0 8px; }
.ws40con-cfg-link{ font-size: calc(12px * var(--ws40con-fs, 1)); text-decoration:none; }

/* ── Rainfall block (liquid-fill gauges + expandable panel) ──────────────────
   Themed on the Consolle tokens (--ws40con-blue/ink/muted/card-bg/border) so it
   inherits the site's Consolle appearance. Water/ring derive from --ws40con-blue
   via color-mix (with a plain-colour fallback for older engines). Behaviour
   (fill level + wave motion + MORE/HIDE) lives in ws40-consolle.js. */
.ws40con-rain .ws40con-block__body { padding-top: 8px; }
.ws40con-rain__wrap { display: flex; flex-direction: column; align-items: center; }
.ws40con-rain__cloud { color: var(--ws40con-blue); line-height: 0; margin: 2px 0 6px; }

.ws40con-rain__gauges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; }
.ws40con-rain__gauge { width: 130px; text-align: center; }
.ws40con-rain__svg { width: 118px; height: 118px; display: block; margin: 0 auto; }

.ws40con-rain__ring { fill: none; stroke: #8fc0ee; }
.ws40con-rain__wave--a { fill: #1f6fd6; }
.ws40con-rain__wave--b { fill: #7fb6ee; }
.ws40con-rain__water { transform-box: fill-box; transition: transform 1.15s cubic-bezier(.22, .61, .36, 1); }
.ws40con-rain__wave { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
    .ws40con-rain__wave--a { animation: ws40con-rain-wa 3.3s linear infinite; }
    .ws40con-rain__wave--b { animation: ws40con-rain-wb 4.7s linear infinite; }
}
@keyframes ws40con-rain-wa { from { transform: translateX(0); }    to { transform: translateX(-46px); } }
@keyframes ws40con-rain-wb { from { transform: translateX(-23px); } to { transform: translateX(23px); } }

.ws40con-rain__pct { fill: #0f1c2e; font-size: calc(19px * var(--ws40con-fs, 1)); font-weight: 600; }
.ws40con-rain__gauge.is-filled .ws40con-rain__pct { fill: #fff; }
/* Themed accent only where var() + color-mix() are reliable (skips older iOS
   Safari without color-mix, which would otherwise fall back to a black fill). */
@supports (fill: color-mix(in srgb, red, blue)) {
    .ws40con-rain__wave--a { fill: var(--ws40con-blue, #1f6fd6); }
    .ws40con-rain__wave--b { fill: color-mix(in srgb, var(--ws40con-blue, #1f6fd6) 60%, #fff); }
    .ws40con-rain__ring    { stroke: color-mix(in srgb, var(--ws40con-blue, #1f6fd6) 40%, #fff); }
    .ws40con-rain__pct     { fill: var(--ws40con-ink, #0f1c2e); }
}

.ws40con-rain__glabel { margin-top: 2px; font-size: calc(12px * var(--ws40con-fs, 1)); color: var(--ws40con-muted); text-transform: uppercase; letter-spacing: .03em; }
.ws40con-rain__gmm { font-size: calc(15px * var(--ws40con-fs, 1)); font-weight: 600; color: var(--ws40con-ink); }
/* Swapped readout: mm inside the ring can be longer than a percentage, so use a
   slightly smaller size; the percentage below picks up the rain accent colour. */
.ws40con-rain__pct--mm { font-size: calc(15px * var(--ws40con-fs, 1)); }
.ws40con-rain__gmm--pct { color: #d97a1e; }
.ws40con-rain__gmoy { font-size: calc(11px * var(--ws40con-fs, 1)); color: var(--ws40con-muted); }
/* Second reading (share of the full month/year mean) — one step stronger than the
   to-date line so the two readings are visually distinct. */
.ws40con-rain__gfull { margin-top: 1px; font-size: calc(11px * var(--ws40con-fs, 1)); color: var(--ws40con-blue, #185fa5); font-weight: 600; }

.ws40con-rain__panel { width: 100%; margin-top: 12px; }
.ws40con-rain__panel[hidden] { display: none; }
.ws40con-rain__lastrain { padding: 2px 2px 8px; }
.ws40con-rain__lr-title { font-weight: 600; color: var(--ws40con-ink); }
.ws40con-rain__lr-sub { color: var(--ws40con-muted); font-size: calc(13px * var(--ws40con-fs, 1)); }

.ws40con-rain__rows { display: flex; flex-direction: column; gap: 3px; }
.ws40con-rain__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--ws40con-card-bg); border: 1px solid var(--ws40con-border); }
.ws40con-rain__row:nth-child(even) { background: #eef4fb; background: color-mix(in srgb, var(--ws40con-blue) 8%, var(--ws40con-card-bg)); }
.ws40con-rain__rlabel { font-weight: 600; }
.ws40con-rain__rright { text-align: right; }
.ws40con-rain__rval { font-size: calc(17px * var(--ws40con-fs, 1)); font-weight: 600; color: var(--ws40con-ink); }
.ws40con-rain__rdetail { font-size: calc(11px * var(--ws40con-fs, 1)); color: var(--ws40con-muted); margin-top: 1px; }

.ws40con-rain__foot { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--ws40con-border); text-align: center; }
/* "MORE / HIDE" toggle — an outlined accent pill with a rotating caret, so the
   expandable panel is clearly discoverable (users were missing the old flat grey
   text). Coherent with the Consolle blue; the caret is a CSS ::after (survives
   the JS textContent swap) and flips via aria-expanded. */
.ws40con-rain__toggle {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    background: transparent;
    border: 1.5px solid var(--ws40con-blue);
    border-radius: 999px;
    color: var(--ws40con-blue);
    font-size: calc(12px * var(--ws40con-fs, 1));
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 7px 18px;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.ws40con-rain__toggle::after {
    content: "";
    width: .48em;
    height: .48em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-.12em) rotate(45deg);
    transition: transform .2s ease;
}
.ws40con-rain__toggle:hover,
.ws40con-rain__toggle:focus-visible {
    background: var(--ws40con-blue);
    color: #fff;
    box-shadow: 0 2px 8px rgba(31, 111, 214, .28);
}
.ws40con-rain__toggle:focus-visible { outline: 2px solid var(--ws40con-blue); outline-offset: 2px; }
.ws40con-rain__toggle[aria-expanded="true"]::after { transform: translateY(.1em) rotate(225deg); }
.ws40con-rain__note { margin: 12px 4px 2px; font-size: calc(11.5px * var(--ws40con-fs, 1)); line-height: 1.45; color: var(--ws40con-muted); font-style: italic; text-align: center; }