:root {
    --v-green: #2e7d32;
    --v-yellow: #f2a900;
    --v-red: #d32f2f;
    --sw-col: 620px;

    --sw-bg: #f4f5f7;
    --sw-surface: #ffffff;
    --sw-border: #e2e5ea;
    --sw-text: #1f2328;
    --sw-muted: #6a7280;
    --sw-now-bg: #fff6dd;

    --chart-temp: #e0662a;
    --chart-wind: #2f6db3;
    --chart-rain: #6aa9e0;
    --chart-axis: #8a929e;
    --chart-grid: #eceef2;
}

@media (prefers-color-scheme: dark) {
    :root {
        --v-green: #4caf50;
        --v-yellow: #ffb92e;
        --v-red: #ef5350;

        --sw-bg: #14171c;
        --sw-surface: #1c2027;
        --sw-border: #2c313a;
        --sw-text: #e6e8eb;
        --sw-muted: #98a1ad;
        --sw-now-bg: #33290a;

        --chart-temp: #f0854d;
        --chart-wind: #6ab0f0;
        --chart-rain: #4d84bd;
        --chart-axis: #98a1ad;
        --chart-grid: #262b33;
    }
}

html, body {
    background: var(--sw-bg);
    color: var(--sw-text);
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow-x: clip; /* nothing may cause horizontal page scroll; clip keeps position:sticky working */
}

a { color: inherit; }

.sw-app { overflow-x: clip; }

/* ---------- shell ---------- */

.sw-col {
    max-width: var(--sw-col);
    margin-inline: auto;
    padding-inline: 1rem;
}

.sw-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--sw-surface);
    border-bottom: 1px solid var(--sw-border);
}

.sw-topbar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto; /* location shrinks; the gear can never be pushed off */
    align-items: center;
    gap: .5rem;
    padding-block: .5rem;
}

.sw-main {
    padding-block: 1rem 3rem;
}

.sw-icon-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .55rem;
    border: 1px solid var(--sw-border);
    text-decoration: none;
    font-size: 1rem;
}

.sw-back {
    text-decoration: none;
    color: var(--sw-muted);
    font-size: .9rem;
}

/* ---------- location bar ---------- */

.sw-location { min-width: 0; }

.sw-location-current {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    border: 0;
    background: transparent;
    padding: .15rem 0;
    color: inherit;
    text-align: left;
}

.sw-location-label {
    flex: 0 1 auto;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sw-caret { color: var(--sw-muted); font-size: .7rem; }
.sw-pin { flex: none; }

.sw-location-search-row { display: flex; gap: .4rem; align-items: center; }
.sw-location-hint { font-size: .8rem; margin-top: .35rem; color: var(--sw-muted); }

.sw-location-results {
    list-style: none;
    margin: .4rem 0 0;
    padding: 0;
    border: 1px solid var(--sw-border);
    border-radius: .5rem;
    overflow: hidden;
}

.sw-location-results li + li { border-top: 1px solid var(--sw-border); }

.sw-location-results button {
    width: 100%;
    text-align: left;
    border: 0;
    background: var(--sw-surface);
    padding: .5rem .6rem;
    color: inherit;
    font-size: .9rem;
}

.sw-location-results button:hover { background: var(--sw-bg); }

/* ---------- on-load "switch location?" banner ---------- */

.sw-loc-prompt {
    background: var(--sw-now-bg);
    border-bottom: 1px solid var(--sw-border);
}

.sw-loc-prompt-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .75rem;
    flex-wrap: wrap;
    padding-block: .55rem;
    font-size: .9rem;
}

.sw-loc-prompt-text { flex: 1 1 12rem; min-width: 0; }

.sw-loc-prompt-actions {
    display: flex;
    gap: .5rem;
    flex: none;
}

/* ---------- activity switcher ---------- */

.sw-switcher {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
}

.sw-switch {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--sw-border);
    background: var(--sw-surface);
    border-radius: .7rem;
    padding: .5rem .25rem;
    text-align: center;
    color: inherit;
    cursor: pointer;
}

.sw-switch.active {
    border-color: var(--sw-text);
    box-shadow: inset 0 0 0 1px var(--sw-text);
}

.sw-switch-emoji { display: block; font-size: 1.35rem; line-height: 1.1; }
.sw-switch-name { font-size: .8rem; white-space: nowrap; }

.sw-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: .25rem;
    vertical-align: middle;
}

/* ---------- colored buckets ---------- */

.sw-bucket-green  { --bucket: var(--v-green); }
.sw-bucket-yellow { --bucket: var(--v-yellow); }
.sw-bucket-red    { --bucket: var(--v-red); }

.sw-dot.sw-bucket-green  { background: var(--v-green); }
.sw-dot.sw-bucket-yellow { background: var(--v-yellow); }
.sw-dot.sw-bucket-red    { background: var(--v-red); }

/* ---------- current conditions card ---------- */

.sw-card {
    background: var(--sw-surface);
    border: 1px solid var(--sw-border);
    border-radius: .9rem;
    overflow: hidden;
}

.sw-card-strip { height: 6px; background: var(--bucket, var(--v-green)); }
.sw-card-body { padding: 1rem 1.1rem 1.15rem; }
.sw-card-empty { padding: 1.5rem; color: var(--sw-muted); }

.sw-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.sw-card-meta {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sw-muted);
}

.sw-verdict {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: .74rem;
    letter-spacing: .03em;
    padding: .25rem .6rem;
    border-radius: 999px;
    color: #fff;
    background: var(--bucket, var(--v-green));
}

.sw-verdict.sw-bucket-yellow { color: #3a2c00; }

.sw-headline {
    font-size: 1.35rem;
    font-weight: 600;
    margin: .55rem 0 .3rem;
}

/* ---------- status "until" line ---------- */

.sw-until { font-size: .92rem; margin-bottom: .75rem; }
.sw-until-icon { margin-right: .3rem; }
.sw-until strong { color: var(--v-yellow); }
.sw-until.improve strong { color: var(--v-green); }

.sw-metric-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sw-muted);
}

/* ---------- stat row ---------- */

.sw-stats {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: .35rem;
}

.sw-temp { display: flex; flex-direction: column; }
.sw-temp-big { font-size: 2.6rem; font-weight: 300; line-height: 1; }

.sw-stat { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.sw-stat-value { font-size: 1.25rem; }
.sw-sky-emoji { font-size: 1.6rem; }

/* ---------- wind indicator ---------- */

.sw-wind { display: flex; align-items: center; gap: .5rem; }

.sw-wind-dial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: 1px solid var(--sw-border);
}

.sw-wind.lg .sw-wind-dial { width: 2.6rem; height: 2.6rem; }

.sw-wind-arrow { width: 1.05rem; height: 1.05rem; }
.sw-wind-arrow.sm { width: .85rem; height: .85rem; }
.sw-wind-arrow path { fill: var(--sw-text); }

.sw-wind-main { font-weight: 600; font-size: .92rem; }

/* ---------- forecast section ---------- */

.sw-section-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--sw-muted);
    margin: 1.4rem 0 .5rem;
}

.sw-dashboard.is-refreshing { opacity: .6; transition: opacity .15s; }

.sw-forecast { border-top: 1px solid var(--sw-border); }

/* ---------- day row (disclosure) ---------- */

.sw-day { border-bottom: 1px solid var(--sw-border); }

.sw-day-summary {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    display: grid;
    grid-template-columns: 4.3rem 1.6rem 1fr 1.1rem;
    gap: .6rem;
    align-items: center;
    padding: .65rem 0;
}

.sw-day-summary:hover { background: var(--sw-bg); }

.sw-day-name { display: flex; flex-direction: column; }
.sw-day-title { font-weight: 600; }
.sw-day-sky { font-size: 1.15rem; text-align: center; }

.sw-day-temps { font-variant-numeric: tabular-nums; font-size: .88rem; margin-bottom: .25rem; }

.sw-day-caret { color: var(--sw-muted); transition: transform .15s; text-align: center; }
.sw-day.open .sw-day-caret { transform: rotate(90deg); }

.sw-day-detail { padding-bottom: .6rem; }

/* ---------- band bar ---------- */

.sw-bandbar {
    display: flex;
    height: 20px;
    border-radius: 4px;
    overflow: hidden;
}

.sw-band { flex: 1; }
.sw-band.g { background: var(--v-green); }
.sw-band.y { background: var(--v-yellow); }
.sw-band.r { background: var(--v-red); }
.sw-band.off { opacity: .3; }

.sw-bandbar-scale {
    display: flex;
    justify-content: space-between;
    font-size: .62rem;
    color: var(--sw-muted);
    margin-top: 2px;
}

/* ---------- hourly list ---------- */

.sw-hourly { margin-top: .25rem; }

.sw-hour {
    display: grid;
    grid-template-columns: 8px 4rem 2.6rem 1fr 3rem;
    gap: .55rem;
    align-items: center;
    padding: .45rem .15rem;
    border-top: 1px solid var(--sw-border);
    font-size: .9rem;
}

.sw-hour.now { background: var(--sw-now-bg); border-radius: .4rem; }

.sw-hour-swatch { width: 8px; height: 30px; border-radius: 3px; }
.sw-hour-swatch.sw-bucket-green  { background: var(--v-green); }
.sw-hour-swatch.sw-bucket-yellow { background: var(--v-yellow); }
.sw-hour-swatch.sw-bucket-red    { background: var(--v-red); }

.sw-hour-time { font-weight: 600; }
.sw-hour-temp { font-weight: 600; }

.sw-now-tag {
    display: inline-block;
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--v-yellow);
    color: #3a2c00;
    border-radius: 4px;
    padding: 0 .3rem;
    margin-left: .25rem;
}

.sw-hour-wind { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.sw-hour-sky { margin-left: .1rem; }
.sw-hour-moisture { text-align: right; color: var(--sw-muted); }

/* ---------- hourly detail page ---------- */

.sw-day-picker, .sw-day-pick { display: inline-flex; }
.sw-day-picker { flex-wrap: wrap; gap: .4rem; margin: .75rem 0 1rem; }

.sw-day-pick {
    border: 1px solid var(--sw-border);
    background: var(--sw-surface);
    color: inherit;
    border-radius: .5rem;
    padding: .3rem .6rem;
    font-size: .85rem;
    cursor: pointer;
}

.sw-day-pick.active { border-color: var(--sw-text); box-shadow: inset 0 0 0 1px var(--sw-text); }

/* ---------- settings ---------- */

.sw-settings-group {
    background: var(--sw-surface);
    border: 1px solid var(--sw-border);
    border-radius: .75rem;
    padding: .5rem .9rem;
    margin-bottom: 1rem;
}

.sw-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
    flex-wrap: wrap;
}

.sw-setting-row + .sw-setting-row { border-top: 1px solid var(--sw-border); }
.sw-setting-label { font-weight: 600; }

/* ---------- share settings (QR + link) ---------- */

.sw-qr {
    max-width: 300px;
    margin-inline: auto;
    background: #fff;              /* keep the QR readable in dark mode */
    padding: .5rem;
    border-radius: .5rem;
}

.sw-qr svg { width: 100%; height: auto; display: block; }

.sw-share .input-group input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.sw-import textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.sw-activity-editor {
    background: var(--sw-surface);
    border: 1px solid var(--sw-border);
    border-radius: .75rem;
    padding: .8rem .9rem;
    margin-bottom: .9rem;
}

.sw-activity-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.sw-activity-editor-name { font-weight: 600; display: flex; gap: .35rem; align-items: center; flex: 1; min-width: 0; }
.sw-emoji-input { width: 3rem; text-align: center; flex: none; }
.sw-name-input { max-width: 12rem; }
.sw-add-activity { border-style: dashed; }

.sw-rule { padding: .5rem 0; border-top: 1px solid var(--sw-border); }
.sw-rule-name { font-size: .85rem; margin-bottom: .35rem; }

.sw-rule-bands {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
}

.sw-tier-chip {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #fff;
    background: var(--bucket, var(--v-green));
    border-radius: 4px;
    padding: .1rem .3rem;
}

.sw-tier-chip.sw-bucket-yellow { color: #3a2c00; }

.sw-bound { width: 4.5rem; text-align: center; }

/* ---------- misc states ---------- */

.sw-loading, .sw-error {
    text-align: center;
    color: var(--sw-muted);
    padding: 2.5rem 1rem;
}

.sw-error p:first-child { color: var(--sw-text); font-weight: 600; }

/* ---------- hourly: chart / table toggle ---------- */

.sw-hourly-toggle {
    display: inline-flex;
    border: 1px solid var(--sw-border);
    border-radius: .5rem;
    overflow: hidden;
    margin: .35rem 0 .6rem;
}

.sw-hourly-toggle button {
    border: 0;
    background: var(--sw-surface);
    color: var(--sw-muted);
    font-size: .8rem;
    padding: .3rem .8rem;
    cursor: pointer;
}

.sw-hourly-toggle button.active { background: var(--sw-text); color: var(--sw-bg); }

/* ---------- hourly chart ---------- */

.sw-chart { overflow-x: auto; position: relative; }
.sw-chart svg { width: 100%; min-width: 0; height: auto; display: block; cursor: crosshair; }

.sw-chart-cursor { stroke: var(--sw-text); stroke-width: 1; opacity: .55; pointer-events: none; }
.sw-chart-cursor-label { fill: var(--sw-text); pointer-events: none; }

.sw-chart-dot { pointer-events: none; stroke: var(--sw-surface); stroke-width: 1.5; }
.sw-chart-dot.temp { fill: var(--chart-temp); }
.sw-chart-dot.wind { fill: var(--chart-wind); }
.sw-chart-dot.rain { fill: var(--chart-rain); }

.sw-chart-legend {
    display: flex;
    gap: 1rem;
    font-size: .72rem;
    color: var(--sw-muted);
    margin-bottom: .1rem;
}

.sw-chart-legend .sw-swatch {
    display: inline-block;
    width: 14px;
    height: 3px;
    margin-right: .35rem;
    vertical-align: middle;
    border-radius: 2px;
}

.sw-chart-legend .sw-swatch.temp { background: var(--chart-temp); }
.sw-chart-legend .sw-swatch.wind { background: var(--chart-wind); }
.sw-chart-legend .sw-swatch.area.rain { height: 10px; background: var(--chart-rain); opacity: .35; }

.sw-chart-band { stroke: none; }
.sw-chart-band.sw-bucket-green  { fill: var(--v-green); opacity: .16; }
.sw-chart-band.sw-bucket-yellow { fill: var(--v-yellow); opacity: .20; }
.sw-chart-band.sw-bucket-red    { fill: var(--v-red); opacity: .16; }

.sw-chart-grid { stroke: var(--chart-grid); stroke-width: 1; }
.sw-chart-axis { fill: var(--chart-axis); font-size: 11px; }
.sw-chart-axis.unit { font-size: 10px; }
.sw-chart-axis.rain { fill: var(--chart-rain); }

.sw-chart-rain { fill: var(--chart-rain); opacity: .22; stroke: none; }
.sw-chart-rain-guide { stroke: var(--chart-rain); stroke-width: 1; stroke-dasharray: 3 3; opacity: .5; }

.sw-chart-temp { fill: none; stroke: var(--chart-temp); stroke-width: 2.5; stroke-linejoin: round; }
.sw-chart-wind { fill: none; stroke: var(--chart-wind); stroke-width: 2; stroke-linejoin: round; }

.sw-chart-now { stroke: var(--sw-text); stroke-width: 1.5; stroke-dasharray: 4 3; }
.sw-chart-now-label { fill: var(--sw-text); font-size: 10px; font-weight: 600; }

.sw-chart-sel { fill: none; stroke: var(--sw-text); stroke-width: 1.5; }
.sw-chart-hit { fill: transparent; cursor: pointer; }

.sw-chart-callout {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    font-size: .85rem;
    padding: .55rem .7rem;
    border: 1px solid var(--sw-border);
    border-radius: .55rem;
    background: var(--sw-bg);
    margin-top: .35rem;
}

.sw-chart-callout-head { display: flex; align-items: center; gap: .4rem; width: 100%; }

/* ---------- blazor error ui (template) ---------- */

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: var(--v-red);
    padding: 1rem;
    color: white;
    border-radius: .5rem;
}