.naws-wh {
    --naws-wh-titlebar: #2d5252;
    --naws-wh-button: #2d5252;
    --naws-wh-outline: #7aa0a0;
    --naws-wh-graph: #7aa0a0;
    --naws-wh-units: #7aa0a0;
    --naws-wh-ink: var(--naws-wh-button);
    --naws-wh-muted: var(--naws-wh-graph);
    --naws-wh-line: #dceaea;
    --naws-wh-panel: #fff;
    --naws-wh-shadow: rgba(40, 72, 72, .08);
    color: var(--naws-wh-ink);
    font-family: inherit;
    margin: 0 0 36px;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

.naws-wh *,
.naws-wh *::before,
.naws-wh *::after { box-sizing: border-box; }

.naws-wh-titlebar {
    background: var(--naws-wh-titlebar);
    border-radius: 16px;
    color: #fff;
    font-size: 16px;
    font-style: italic;
    font-weight: 700;
    margin: 10px 10px 30px;
    padding: 15px 24px;
}

.naws-wh-controls {
    display: grid;
    gap: 10px;
    margin: 0 10px 26px;
    padding-bottom: 42px;
    position: relative;
    width: calc(100% - 20px);
}

.naws-wh-row {
    display: flex;
    gap: 9px;
    min-width: 0;
    overflow-x: auto;
    padding: 1px 1px 4px;
    scrollbar-width: thin;
}

.naws-wh-chip {
    appearance: none;
    background: #fff;
    border: 1px solid var(--naws-wh-outline);
    border-radius: 6px;
    color: var(--naws-wh-ink);
    cursor: pointer;
    flex: 0 0 auto;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.2;
    min-height: 38px;
    padding: 9px 14px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
    text-transform: uppercase;
}

.naws-wh-reading-row .naws-wh-chip.is-active,
.naws-wh-period-row .naws-wh-chip.is-active { background: var(--naws-wh-ink) !important; border-color: var(--naws-wh-ink) !important; color: #fff !important; }
.naws-wh-year-row .naws-wh-chip { border-color: var(--naws-wh-outline) !important; }
.naws-wh-year-row .naws-wh-chip.is-active { background: var(--naws-wh-year-color) !important; border-color: var(--naws-wh-year-color) !important; color: #fff !important; }
.naws-wh-reading-row .naws-wh-chip:active,
.naws-wh-period-row .naws-wh-chip:active { background: var(--naws-wh-ink) !important; border-color: var(--naws-wh-ink) !important; color: #fff !important; }
.naws-wh-year-row .naws-wh-chip:active { background: var(--naws-wh-year-color) !important; border-color: var(--naws-wh-year-color) !important; color: #fff !important; }

@media (hover: hover) and (pointer: fine) {
    .naws-wh-chip:not(.is-active):hover {
        background: var(--naws-wh-muted);
        color: #fff;
    }
    .naws-wh-year-row .naws-wh-chip:not(.is-active):hover { background: var(--naws-wh-year-color) !important; border-color: var(--naws-wh-year-color) !important; color: #fff !important; }
}

.naws-wh-message {
    bottom: 0;
    color: var(--naws-wh-ink);
    font-size: 11px;
    font-weight: 700;
    /* Align the notice with the text inside the first control, not its edge. */
    left: 10px;
    letter-spacing: .1em;
    line-height: 1.55;
    min-height: 0;
    position: absolute;
    text-transform: uppercase;
    white-space: pre-line;
}

.naws-wh-charts {
    display: grid;
    gap: 13px;
    max-width: 100%;
    min-width: 0;
    margin: 0 10px;
    width: calc(100% - 20px);
}

.naws-wh-card {
    background: var(--naws-wh-panel);
    border: 1.5px solid var(--naws-wh-line);
    border-radius: 14px;
    cursor: pointer;
    min-width: 0;
    overflow: hidden;
    padding: 50px 70px 20px 50px;
    position: relative;
    box-shadow: 0 2px 10px var(--naws-wh-shadow);
    width: 100%;
}

.naws-wh-card h3 {
    background: transparent !important;
    color: var(--naws-wh-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    margin: 0 0 12px;
    text-transform: uppercase;
}

/* The card itself already supplies the white panel; a heading must never add
   a second opaque strip over rain totals on narrow landscape screens. */
.naws-wh-card h3,
.naws-wh-modal-head { background: transparent !important; }

.naws-wh-chart-period { color: var(--naws-wh-muted); margin-right: 15px; }
.naws-wh-chart-dot { color: var(--naws-wh-muted); }
.naws-wh-chart-year { font-weight: 800; }

.naws-wh-canvas {
    aspect-ratio: 125 / 46;
    height: auto;
    min-width: 0;
    position: relative;
    width: 100%;
}

/* Kept outside the canvas: it has a fixed, visible column and can never be
   clipped by Chart.js or overlap the y-axis tick labels. */
.naws-wh-unit {
    color: var(--naws-wh-units);
    font-size: 17px;
    font-weight: 700;
    left: 35px;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    top: 55%;
    transform: translate(-50%, -50%) rotate(-90deg);
}
.naws-wh-unit:empty { display: none; }

.naws-wh-canvas canvas,
.naws-wh-modal-canvas canvas {
    display: block;
    height: 100% !important;
    inset: 0;
    max-height: 100%;
    max-width: 100%;
    min-width: 0;
    position: absolute;
    width: 100% !important;
}

.naws-wh-loading,
.naws-wh-empty {
    color: var(--naws-wh-muted);
    padding: 30px;
    text-align: center;
}

.naws-wh-placeholder { cursor: wait; }
.naws-wh-placeholder .naws-wh-canvas { display: grid; place-items: center; }
.naws-wh-placeholder .naws-wh-loading { padding: 0; }

.naws-wh-modal[hidden] { display: none; }

.naws-wh-modal {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: 999999;
}

.naws-wh-modal-bg {
    background: rgba(10, 26, 26, .65);
    backdrop-filter: blur(3px);
    cursor: pointer;
    inset: 0;
    position: absolute;
}

.naws-wh-dialog {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(10, 26, 26, .3);
    max-height: 92vh;
    max-width: 1920px;
    position: relative;
    width: min(98vw, 1920px);
    z-index: 1;
}

.naws-wh-modal-head {
    align-items: center;
    border-bottom: 1px solid var(--naws-wh-line);
    display: flex;
    gap: 8px;
    padding: 12px 16px 10px;
}

.naws-wh-dialog h3 {
    color: var(--naws-wh-muted);
    font-size: 15px;
    letter-spacing: .1em;
    margin: 0;
    text-transform: uppercase;
}

.naws-wh-close {
    align-items: center;
    appearance: none !important;
    background: none !important;
    border: 1px solid var(--naws-wh-line) !important;
    border-radius: 8px !important;
    color: var(--naws-wh-muted) !important;
    cursor: pointer;
    display: flex !important;
    justify-content: center;
    margin-left: auto;
    min-height: 44px;
    min-width: 44px;
    padding: 8px 10px;
    position: static;
    transition: background .15s, color .15s;
}

.naws-wh-close:hover { background: var(--naws-wh-button) !important; border-color: var(--naws-wh-button) !important; color: #fff !important; }
.naws-wh-close svg { display: block; pointer-events: none; }

.naws-wh-modal-canvas {
    height: clamp(240px, 60vh, 504px);
    padding: 12px 14px 14px;
    position: relative;
}
.naws-wh-modal-canvas { padding-left: 48px; }
.naws-wh-modal-canvas .naws-wh-unit { font-size: 19px; left: 34px; top: 50%; }

@media (min-width: 600px) {
    .naws-wh-titlebar { font-size: 18px; }
    .naws-wh-card h3 { font-size: 14px; }
    .naws-wh-modal-head { gap: 12px; padding: 16px 22px 12px 50px; }
    .naws-wh-modal-canvas { padding: 16px 22px 22px 48px; }
}

/* These two layouts have different header geometry.  Use fixed visual offsets
   after the chart has measured itself, so the card heading moves up while the
   modal heading moves down into the centre of its own clear space. */
@media (min-width: 601px) and (hover: hover) and (pointer: fine) {
    .naws-wh-card h3 { transform: translateY(-20px) !important; }
    .naws-wh-modal-head h3 { transform: translateY(12px) !important; }
}

@media (min-width: 768px) {
    .naws-wh-dialog { border-radius: 18px; width: min(96vw, 1920px); }
    .naws-wh-close { min-height: auto; min-width: auto; padding: 5px 8px; }
}

@media (max-width: 600px) and (orientation: portrait) {
    .naws-wh-titlebar { font-size: 16px; margin: 10px 10px 30px; padding: 12px 16px; }
    .naws-wh-chip { font-size: 12px; padding: 8px 11px; }
    .naws-wh-card { padding: 22px 10px 8px 20px; }
    .naws-wh-unit { font-size: 10px; left: 12px; }
    .naws-wh-modal-canvas .naws-wh-unit { font-size: 9px; left: 13px; }
    .naws-wh-canvas { aspect-ratio: 2 / 1; }
    .naws-wh-card.is-rain-chart .naws-wh-canvas { aspect-ratio: 18 / 10; }
    .naws-wh-dialog { width: 98vw; }
    .naws-wh-modal-canvas { height: clamp(146px, 31vh, 262px); padding: 4px 6px 6px 26px; }
    .naws-wh-chart-period { margin-right: 8px; }
}

@media (max-width: 950px) and (orientation: landscape) {
    .naws-wh-canvas { aspect-ratio: 100 / 23; }
}

@media (any-pointer: coarse) and (min-width: 601px) and (orientation: portrait) {
    .naws-wh-canvas { aspect-ratio: 22 / 10; }
    .naws-wh-card.is-rain-chart .naws-wh-canvas { aspect-ratio: 19 / 10; }
}

@media (any-pointer: coarse) and (orientation: landscape) {
    .naws-wh-canvas { aspect-ratio: 14 / 5; }
    .naws-wh-card.is-rain-chart .naws-wh-canvas { aspect-ratio: 13 / 5; }
}

@media (any-pointer: coarse) and (max-height: 600px) and (orientation: landscape) {
    .naws-wh-card { padding: 22px 12px 8px 26px; }
    .naws-wh-canvas { aspect-ratio: 56 / 17; }
    .naws-wh-card.is-rain-chart .naws-wh-canvas { aspect-ratio: 51 / 17; }
    .naws-wh-modal-canvas { height: clamp(204px, 51vh, 428px); }
    .naws-wh-modal-canvas { padding: 4px 6px 6px 30px; }
    .naws-wh-unit { font-size: 8px; left: 15px; }
    .naws-wh-modal-canvas .naws-wh-unit { font-size: 9px; left: 15px; }
}

@media (hover: none), (pointer: coarse) {
    .naws-wh,
    .naws-wh button,
    .naws-wh canvas {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    /* A tap on a card opens the full graph.  It must not briefly trigger the
       normal-chart tooltip first; the popup chart remains interactive. */
    .naws-wh-card:not(.naws-wh-placeholder) .naws-wh-canvas { pointer-events: none; }
}