/* The Guthrie forecast page.
   ---------------------------------------------------------------------------
   The theming idea: the hero is a sky, and the sky changes. Six palettes, each
   driven by a class the controller picks from the current condition and whether
   the sun is up. Everything below the hero stays on the newspaper's own paper
   stock, so the page reads as journalism with a weather panel in it rather than
   as a weather app that borrowed a masthead. */

.osc-wx-body { overflow-y: auto !important; }
.osc-wx-body .header { top: 0; }

.osc-wx-main { background: #FFFFF7; }
.osc-wx-wrap {
    max-width: 68rem;
    margin: 0 auto;
    /* Masthead clearance, matching assignment.css and republish.css. */
    padding: 160px 20px 70px;
    color: #1b1b1b;
}
@media (max-width: 640px) { .osc-wx-wrap { padding: 120px 14px 50px; } }

/* ------------------------------------------------------------- heading ---- */
.osc-wx-head { margin-bottom: 18px; }
.osc-wx-kicker {
    margin: 0 0 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.7rem; font-weight: 900; letter-spacing: 0.1em;
    text-transform: uppercase; color: #b21f2d;
}
.osc-wx-title {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 900; line-height: 1.12;
}

/* -------------------------------------------------------------- alerts ---- */
.osc-wx-alerts { display: grid; gap: 8px; margin-bottom: 18px; }
.osc-wx-alert {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: #7f1d1d; color: #fff;
    border-left: 6px solid #fca5a5; border-radius: 6px;
    font-family: Arial, Helvetica, sans-serif; font-size: 0.9rem;
    text-decoration: none;
}
.osc-wx-alert:link, .osc-wx-alert:visited { color: #fff; text-decoration: none; }
.osc-wx-alert:hover { background: #991b1b; color: #fff; }
.osc-wx-alert-flag {
    font-size: 0.66rem; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase;
    background: #fca5a5; color: #7f1d1d; padding: 2px 7px; border-radius: 3px;
    /* Pulses, but only for people who have not asked it not to. */
    animation: osc-wx-pulse 2.4s ease-in-out infinite;
}
.osc-wx-alert-event { font-weight: 800; }
.osc-wx-alert-until { color: #fecaca; }
.osc-wx-alert-src { margin-left: auto; font-size: 0.76rem; color: #fecaca; }
@keyframes osc-wx-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.55 } }

/* ---------------------------------------------------------- the "now" ----- */
.osc-wx-now {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    padding: 26px 24px 20px;
    margin-bottom: 22px;
    color: #fff;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
    /* Every sky sets these two; this is the fallback if none matches. */
    --wx-a: #43506b;
    --wx-b: #1b2233;
    --wx-sun: #ffd479;
    background: linear-gradient(160deg, var(--wx-a), var(--wx-b));
}

.osc-wx-sky--clear       { --wx-a: #4aa8e0; --wx-b: #14568c; --wx-sun: #ffd479; }
.osc-wx-sky--mixed       { --wx-a: #6ea6c9; --wx-b: #2c527a; --wx-sun: #ffd479; }
.osc-wx-sky--overcast    { --wx-a: #7c8794; --wx-b: #3f4854; --wx-sun: #d8dde3; }
.osc-wx-sky--rain        { --wx-a: #55697f; --wx-b: #232f3d; --wx-sun: #c3cedb; }
.osc-wx-sky--storm       { --wx-a: #3b4356; --wx-b: #14161f; --wx-sun: #ffe08a; }
.osc-wx-sky--snow        { --wx-a: #8fa4b8; --wx-b: #495a6c; --wx-sun: #eef4f9; }
.osc-wx-sky--night       { --wx-a: #24365c; --wx-b: #0b1020; --wx-sun: #dbe6ff; }
.osc-wx-sky--night-cloud { --wx-a: #2c3850; --wx-b: #10141f; --wx-sun: #cbd5e6; }
.osc-wx-sky--unknown     { --wx-a: #4b5563; --wx-b: #1f2937; --wx-sun: #e5e7eb; }

/* A soft light source in the corner, so the panel has depth without an image. */
.osc-wx-sky-art { position: absolute; inset: 0; pointer-events: none; }
.osc-wx-sky-body {
    position: absolute; top: -30%; right: -10%;
    width: 60%; aspect-ratio: 1;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.30), rgba(255,255,255,0) 62%);
}
.osc-wx-sky-veil {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.30), rgba(0,0,0,0) 55%);
}

.osc-wx-now-main {
    position: relative;
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    margin-bottom: 20px;
}
.osc-wx-now-read { min-width: 0; }
.osc-wx-now-temp {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(3.4rem, 11vw, 5.4rem); font-weight: 900; line-height: 0.92;
    letter-spacing: -0.03em;
}
.osc-wx-deg { font-size: 0.5em; vertical-align: super; opacity: 0.75; }
.osc-wx-now-cond {
    margin: 6px 0 2px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.2rem;
}
.osc-wx-now-feels {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif; font-size: 0.84rem;
    color: rgba(255,255,255,0.82);
}
.osc-wx-fresh { color: rgba(255,255,255,0.6); }
.osc-wx-stale { color: #ffd0d0; font-weight: 700; }

.osc-wx-stats {
    position: relative;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 1px; margin: 0;
    background: rgba(255,255,255,0.16);
    border-radius: 8px; overflow: hidden;
}
.osc-wx-stat { background: rgba(0,0,0,0.22); padding: 10px 12px; }
.osc-wx-stat dt {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.64rem; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; color: rgba(255,255,255,0.66);
}
.osc-wx-stat dd {
    margin: 3px 0 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem; font-weight: 700;
}

/* -------------------------------------------------------------- panels ---- */
.osc-wx-panel {
    background: #fff;
    border: 1px solid #e3ded1;
    border-radius: 10px;
    padding: 18px 18px 14px;
    margin-bottom: 22px;
}
.osc-wx-panel-head {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.osc-wx-panel-head h2 {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem; font-weight: 900; letter-spacing: 0.08em;
    text-transform: uppercase; color: #1f2937;
}
.osc-wx-panel-note {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif; font-size: 0.76rem; color: #6b7280;
}

/* --------------------------------------------------------------- hours ---- */
.osc-wx-hours-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
.osc-wx-hours {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(62px, 1fr);
    min-width: 100%;
}
/* The curve sits behind the columns and stretches to the same grid, so a peak
   lines up with the hour that produced it. */
.osc-wx-curve {
    position: absolute;
    top: 24px; bottom: 62px;
    /* Inset by half a column at each end. The polyline's first and last points
       are at x=0 and x=1000, so without this they land on the container's edges
       rather than over the first and last hour's columns, and every peak reads
       as belonging to the hour beside the one that produced it. The hour count
       comes from the template as --osc-wx-hour-count. */
    left: calc(50% / var(--osc-wx-hour-count, 24));
    right: calc(50% / var(--osc-wx-hour-count, 24));
    height: auto;
}
.osc-wx-curve-line {
    fill: none; stroke: #b21f2d; stroke-width: 2;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round; stroke-linecap: round;
}
.osc-wx-curve-fill { fill: rgba(178, 31, 45, 0.08); stroke: none; }

.osc-wx-hour {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 6px 2px 8px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    border-left: 1px solid #f0ece2;
}
.osc-wx-hour:first-child { border-left: 0; }
.osc-wx-hour.is-now { background: #fdf6f2; border-radius: 6px; }
.osc-wx-hour-time { margin: 0; font-size: 0.7rem; font-weight: 700; color: #6b7280; }
.osc-wx-hour.is-now .osc-wx-hour-time { color: #b21f2d; }
.osc-wx-hour-temp { margin: 0; font-size: 0.95rem; font-weight: 800; color: #1b1b1b; }
.osc-wx-hour-wind { margin: 0; font-size: 0.62rem; color: #9ca3af; }

.osc-wx-hour-precip {
    position: relative;
    width: 100%; height: 34px;
    display: flex; align-items: flex-end; justify-content: center;
}
.osc-wx-hour-precip-bar {
    width: 12px; border-radius: 2px 2px 0 0;
    background: #cfd8e3; min-height: 0;
}
.osc-wx-hour-precip.is-wet .osc-wx-hour-precip-bar { background: #3b82c4; }
.osc-wx-hour-precip-label {
    position: absolute; bottom: 100%; left: 0; right: 0;
    font-size: 0.6rem; color: #3b82c4; font-weight: 700;
}
.osc-wx-scroll-hint {
    margin: 6px 0 0;
    font-family: Arial, Helvetica, sans-serif; font-size: 0.68rem; color: #9ca3af;
}
@media (min-width: 900px) { .osc-wx-scroll-hint { display: none; } }

/* ---------------------------------------------------------------- days ---- */
.osc-wx-days { list-style: none; margin: 0; padding: 0; }
.osc-wx-day {
    display: grid;
    grid-template-columns: 76px 40px 1fr 46px minmax(150px, 1.4fr);
    align-items: center; gap: 10px;
    padding: 8px 4px;
    border-top: 1px solid #f0ece2;
    font-family: Arial, Helvetica, sans-serif;
}
.osc-wx-day:first-child { border-top: 0; }
.osc-wx-day.is-today { background: #fdf6f2; border-radius: 6px; }

.osc-wx-day-when { display: flex; flex-direction: column; }
.osc-wx-day-name { font-size: 0.86rem; font-weight: 800; color: #1b1b1b; }
.osc-wx-day.is-today .osc-wx-day-name { color: #b21f2d; }
.osc-wx-day-date { font-size: 0.68rem; color: #9ca3af; }
.osc-wx-day-icon { display: flex; justify-content: center; }
.osc-wx-day-cond { margin: 0; font-size: 0.78rem; color: #4b5563; }
.osc-wx-day-precip { font-size: 0.76rem; font-weight: 700; color: #cbd5e1; text-align: right; }
.osc-wx-day-precip.is-wet { color: #3b82c4; }

.osc-wx-day-range { display: flex; align-items: center; gap: 8px; }
.osc-wx-day-lo, .osc-wx-day-hi { font-size: 0.84rem; font-weight: 800; width: 2.4em; }
.osc-wx-day-lo { color: #7c93ad; text-align: right; }
.osc-wx-day-hi { color: #1b1b1b; }
.osc-wx-day-track {
    position: relative; flex: 1; height: 6px;
    background: #eef1f5; border-radius: 3px; overflow: hidden;
}
.osc-wx-day-bar {
    position: absolute; top: 0; bottom: 0;
    border-radius: 3px;
    background: linear-gradient(to right, #7cb0dd, #e0a33f, #d1553f);
    /* The gradient belongs to the whole ten-day scale, not to each bar, so a
       cold day shows only the cold end of it. */
    background-attachment: local;
}

@media (max-width: 720px) {
    .osc-wx-day { grid-template-columns: 62px 34px 40px 1fr; row-gap: 2px; }
    .osc-wx-day-cond { display: none; }
    .osc-wx-day-range { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------- ground ---- */
.osc-wx-ground { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.osc-wx-ground-card {
    background: #f7f4ec; border: 1px solid #eae4d6; border-radius: 8px; padding: 12px;
    font-family: Arial, Helvetica, sans-serif;
}
.osc-wx-ground-label {
    margin: 0 0 4px; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.07em;
    text-transform: uppercase; color: #8a8577;
}
.osc-wx-ground-value { margin: 0; font-size: 1.15rem; font-weight: 800; color: #1b1b1b; }
.osc-wx-ground-sub { margin: 2px 0 0; font-size: 0.72rem; color: #6b7280; }

/* ------------------------------------------------------------- record ----- */
/* The accountability panel. Styled to read as a record, not a boast: the
   misses use the same type as the hits, and the colour coding runs green to
   red on our own errors rather than flattering them. */
.osc-wx-record { border-color: #d9d2be; }
.osc-wx-record-headline {
    margin: 0 0 14px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.05rem; line-height: 1.55; color: #1b1b1b;
}
.osc-wx-record-pending {
    margin: 0; font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.95rem; line-height: 1.6; color: #4b5563;
}

.osc-wx-record-table {
    width: 100%; border-collapse: collapse; margin-bottom: 16px;
    font-family: Arial, Helvetica, sans-serif; font-size: 0.82rem;
}
.osc-wx-record-table th, .osc-wx-record-table td {
    padding: 7px 8px; text-align: right; border-bottom: 1px solid #f0ece2;
}
.osc-wx-record-table thead th {
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; color: #6b7280; border-bottom: 2px solid #e3ded1;
}
.osc-wx-record-table tbody th { text-align: left; font-weight: 700; color: #1b1b1b; }
/* The better figure is marked whichever column it falls in. A table that only
   emphasised our own numbers would be a scoreboard with a thumb on it. */
.osc-wx-record-table td.is-better { font-weight: 800; color: #1b1b1b; }
.osc-wx-record-table td.is-better::after {
    content: " \2713"; color: #3f9d5a; font-weight: 700;
}

.osc-wx-record-sub {
    margin: 0 0 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em;
    text-transform: uppercase; color: #6b7280;
}
.osc-wx-record-list { list-style: none; margin: 0 0 14px; padding: 0; }
.osc-wx-record-row {
    display: grid;
    grid-template-columns: 4.2rem 1fr 1fr 1fr 4rem;
    gap: 8px; align-items: baseline;
    padding: 7px 8px;
    border-left: 3px solid transparent;
    border-bottom: 1px solid #f0ece2;
    font-family: Arial, Helvetica, sans-serif; font-size: 0.82rem;
}
/* Green/amber/red on OUR error. A scoreboard that colours everything alike is
   not a scoreboard. */
.osc-wx-record-row.is-good { border-left-color: #3f9d5a; }
.osc-wx-record-row.is-fair { border-left-color: #e0a33f; }
.osc-wx-record-row.is-poor { border-left-color: #b21f2d; }
.osc-wx-record-date { font-weight: 800; color: #1b1b1b; }
.osc-wx-record-said, .osc-wx-record-was, .osc-wx-record-nws { color: #4b5563; }
.osc-wx-record-nws { color: #6b7280; }
.osc-wx-record-miss { text-align: right; font-weight: 800; color: #6b7280; }
.osc-wx-record-row.is-poor .osc-wx-record-miss { color: #b21f2d; }

.osc-wx-record-method {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.82rem; line-height: 1.55; color: #6b6b6b;
}

@media (max-width: 620px) {
    .osc-wx-record-row { grid-template-columns: 3.4rem 1fr 1fr 3.2rem; }
    .osc-wx-record-was { grid-column: 2 / 4; }
}

/* -------------------------------------------------------- method + setup -- */
.osc-wx-method, .osc-wx-setup {
    border-top: 3px double #d8d2c4; padding-top: 16px;
    font-family: Georgia, 'Times New Roman', serif; color: #3b3b3b;
}
.osc-wx-method h2, .osc-wx-setup h2 {
    margin: 0 0 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem; font-weight: 900; letter-spacing: 0.08em;
    text-transform: uppercase; color: #1f2937;
}
.osc-wx-method ul { margin: 0 0 10px; padding-left: 1.1rem; font-size: 0.9rem; line-height: 1.6; }
.osc-wx-method li { margin-bottom: 7px; }
.osc-wx-method-note { margin: 0; font-size: 0.85rem; color: #6b6b6b; }
.osc-wx-setup { background: #fffdf6; padding: 16px; border-radius: 8px; }
.osc-wx-setup code {
    background: #f0ece2; padding: 1px 5px; border-radius: 3px;
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85em;
}
.osc-wx-setup-fallback { margin-bottom: 0; }

/* ================================= ICONS ================================== */
.osc-wx-icon { display: block; overflow: visible; }
.osc-wx-icon--sm { width: 26px; height: 26px; }
.osc-wx-icon--md { width: 36px; height: 36px; }
.osc-wx-icon--lg { width: 56px; height: 56px; }
.osc-wx-icon--xl { width: clamp(74px, 18vw, 108px); height: clamp(74px, 18vw, 108px); }

.osc-wx-icon .wx-cloud path { fill: #cbd5e1; }
.osc-wx-icon .wx-cloud--back path { fill: #9fb0c4; }
.osc-wx-icon .wx-sun circle { fill: #f6b93b; }
.osc-wx-icon .wx-rays line { stroke: #f6b93b; stroke-width: 3.4; stroke-linecap: round; }
.osc-wx-icon .wx-moon path { fill: #e8eefc; }
.osc-wx-icon .wx-rain line { stroke: #4a90d9; stroke-width: 3; stroke-linecap: round; }
.osc-wx-icon .wx-rain--heavy line { stroke: #2f6fb0; stroke-width: 3.6; }
.osc-wx-icon .wx-snow circle { fill: #dbeafe; }
.osc-wx-icon .wx-hail circle { fill: #bcd3e8; }
.osc-wx-icon .wx-bolt path { fill: #f6b93b; }
.osc-wx-icon .wx-gust path { fill: none; stroke: #9fb0c4; stroke-width: 3.2; stroke-linecap: round; }
.osc-wx-icon .wx-gust--big path { stroke: #8fa3ba; }

/* On the dark hero the greys disappear, so the big icon gets its own palette. */
.osc-wx-now .osc-wx-icon .wx-cloud path { fill: rgba(255,255,255,0.90); }
.osc-wx-now .osc-wx-icon .wx-cloud--back path { fill: rgba(255,255,255,0.55); }
.osc-wx-now .osc-wx-icon .wx-sun circle,
.osc-wx-now .osc-wx-icon .wx-bolt path { fill: var(--wx-sun); }
.osc-wx-now .osc-wx-icon .wx-rays line { stroke: var(--wx-sun); }
.osc-wx-now .osc-wx-icon .wx-moon path { fill: var(--wx-sun); }
.osc-wx-now .osc-wx-icon .wx-gust path { stroke: rgba(255,255,255,0.75); }

/* Motion. Small, slow and looping -- a sun that spins fast is a toy, and this
   page is read during severe weather. All of it stops for prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
    .osc-wx-icon .wx-rays { animation: osc-wx-spin 26s linear infinite; transform-origin: 32px 28px; }
    .osc-wx-icon--xl .wx-cloud { animation: osc-wx-drift 7s ease-in-out infinite; }
    .osc-wx-icon .wx-rain line { animation: osc-wx-fall 1.2s linear infinite; }
    .osc-wx-icon .wx-snow circle { animation: osc-wx-flutter 2.6s ease-in-out infinite; }
    .osc-wx-icon .wx-bolt path { animation: osc-wx-flash 3.4s ease-in-out infinite; }
}
@keyframes osc-wx-spin   { to { transform: rotate(360deg); } }
@keyframes osc-wx-drift  { 0%,100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
@keyframes osc-wx-fall   { 0% { opacity: 0; transform: translateY(-5px); }
                           25% { opacity: 1; }
                           100% { opacity: 0; transform: translateY(6px); } }
@keyframes osc-wx-flutter{ 0%,100% { transform: translateY(0); opacity: 0.9; }
                           50% { transform: translateY(3px); opacity: 1; } }
@keyframes osc-wx-flash  { 0%,88%,100% { opacity: 1; } 92% { opacity: 0.25; } 96% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .osc-wx-alert-flag { animation: none; }
}

@media print {
    .header, nav, footer, #marquee, #preloader, .osc-wx-scroll-hint { display: none !important; }
    .osc-wx-wrap { padding-top: 0; }
    .osc-wx-now { color: #000; background: none; box-shadow: none; border: 1px solid #999; }
    .osc-wx-now .osc-wx-stat { background: none; }
    .osc-wx-sky-art { display: none; }
}

/* ===========================================================================
   THE VERDICT, AND THE WAY AROUND THE PAGE
   Added when the radar moved onto this page and it passed four thousand pixels.
   =========================================================================== */

/* The one line on the page that reaches a conclusion. It sits inside the hero
 * on whichever sky is showing, so it is built from translucency rather than a
 * fixed colour -- it has to read on a clear afternoon and on a storm night
 * without a variant for each. */
.osc-wx-verdict {
    position: relative;
    z-index: 2;
    margin: 14px 0 0;
    padding: 11px 14px;
    border-radius: 9px;
    background: rgba(8, 12, 22, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-left: 3px solid rgba(255, 255, 255, 0.55);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.92rem;
    line-height: 1.45;
    color: #f2f5fb;
}
.osc-wx-verdict strong {
    font-weight: 800;
    letter-spacing: -0.01em;
}
.osc-wx-verdict strong::after {
    content: " \2014 ";
    font-weight: 400;
    opacity: 0.6;
}
.osc-wx-verdict span { color: #dde4f0; }

/* An official warning is the one case where the page should raise its voice. */
.osc-wx-verdict--alert {
    background: rgba(127, 29, 29, 0.55);
    border-color: rgba(254, 202, 202, 0.45);
    border-left-color: #fca5a5;
}
.osc-wx-verdict--storm { border-left-color: #a5b4fc; }
.osc-wx-verdict--wet   { border-left-color: #7dd3fc; }
.osc-wx-verdict--hot   { border-left-color: #fdba74; }

/* ---- the jump nav ------------------------------------------------------- */

/* The masthead is fixed and 75px tall, so this parks directly beneath it and
 * stays reachable. Somebody who came for the radar should not have to scroll
 * the entire forecast to find it. */
.osc-wx-jump {
    position: sticky;
    top: 75px;
    z-index: 20;
    display: flex;
    gap: 6px;
    margin: 0 0 16px;
    padding: 8px 0;
    background: #FFFFF7;
    /* The panels below have rounded corners and a cream page behind them; this
     * bleeds the bar to the full width of the wrap so nothing shows through as
     * content scrolls under it. */
    box-shadow: 0 0 0 20px #FFFFF7;
    overflow-x: auto;
    scrollbar-width: none;
}
.osc-wx-jump::-webkit-scrollbar { display: none; }

.osc-wx-jump a {
    flex: 0 0 auto;
    padding: 5px 11px;
    border: 1px solid #e3ded1;
    border-radius: 999px;
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4b5563;
    text-decoration: none;
    white-space: nowrap;
}
.osc-wx-jump a:hover { background: #f4f1e8; color: #111827; }
.osc-wx-jump a:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.osc-wx-jump a.is-here {
    background: #1f2937;
    border-color: #1f2937;
    color: #fff;
}

/* Anchor jumps must clear both the fixed masthead and the sticky bar, or the
 * heading lands underneath them and the reader thinks the link is broken. */
#now, #hourly, #tendays, #radar, #record { scroll-margin-top: 132px; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

@media (max-width: 640px) {
    .osc-wx-verdict { font-size: 0.86rem; padding: 10px 12px; }
    .osc-wx-jump { top: 68px; }
    .osc-wx-jump a { font-size: 0.68rem; padding: 5px 9px; }
}