/*
 * dress-for-the-weather.co.uk
 *
 * Loaded after Tailwind and site.css, so it only states what changes.
 *
 * The idea: the Shipping Forecast. Britain already has a format for telling
 * people what the weather is going to do to them, it has had it since 1924, and
 * it is nothing like a weather app. Area name in caps, then a terse line with
 * no verbs in it, then the visibility, then the time it was issued. Nobody has
 * ever needed a card with a rounded corner to understand it.
 *
 * So the answer is set as a bulletin: what to wear stated first and largest, in
 * the clipped syntax the form uses, with the readings underneath as a data
 * block rather than as four boxes competing with it. The isobar chart behind it
 * is a real synoptic chart, which is the one thing on this page that could not
 * belong to any other site in the estate.
 *
 * The street illustration on the front page is kept. It is specific, it is well
 * drawn, and replacing something good in order to follow a direction would be
 * the wrong reading of the direction.
 *
 * What it replaces: four readings set at text-4xl above the outfit advice at
 * text-xl, so the page shouted the thing nobody came for and murmured the
 * answer.
 *
 * It also fixes a live AA failure, described at --bulletin below.
 */

/* --------------------------------------------------------------- tokens */

:root {
    /* The scale had no room for a real headline. Extended, ratio unchanged. */
    --step-6: 3.2rem;
    --step-7: 4.4rem;

    --font-bulletin: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

    /*
     * A ground that stays dark in both themes.
     *
     * --slate and --slate-deep invert: in dark mode they are #7FA5C0 and
     * #9DBBD1, which are light. They are correct as *text* colours, but
     * site.css also uses them as backgrounds under white type in five places
     * (.btn-primary, its hover, .weather-badge, .toggle-checked and the nav
     * hover). In dark mode those render white on #9DBBD1, which measures
     * 2.01:1 and is below AA by a wide margin.
     *
     * --bulletin does not flip, so anything carrying white type is pinned to a
     * ground that is dark whatever the theme: 9.15:1 in both.
     */
    --bulletin: #2F4B60;
    --bulletin-deep: #1D3040;
}

/* ------------------------------------------------- the failing surfaces */

.btn-primary,
.weather-badge,
.toggle-checked {
    background: var(--bulletin) !important;
    color: #fff !important;
}

.btn-primary:hover {
    background: var(--bulletin-deep) !important;
}

.site-nav .links a:hover {
    background: var(--bulletin) !important;
    color: #fff !important;
}

.btn-primary:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--ochre) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}

/* -------------------------------------------------------- the bulletin */

/*
 * The answer. The isobar chart is greyscale and multiplied over the bulletin
 * blue, so it can only darken the ground: white on the flat blue is 9.15:1 and
 * no worse anywhere over the chart.
 */
.bulletin {
    background-color: var(--bulletin);
    background-image: url('/img/isobars.webp');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    color: #fff;
    padding: clamp(1.5rem, 5vw, 2.75rem);
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.bulletin-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.bulletin-area,
.bulletin-issued {
    font-family: var(--font-bulletin);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
}

.bulletin-issued {
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

/*
 * What to wear, stated first and largest. This was previously one step above
 * body text and sat below four readings set three steps above it.
 */
.bulletin-verdict {
    display: block;
    font-family: ui-serif, 'Iowan Old Style', Palatino, Georgia, serif;
    font-size: clamp(1.9rem, 5.5vw, var(--step-6));
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #fff;
    max-width: 24ch;
    text-wrap: balance;
    margin: 0;
}

.bulletin-items {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    max-width: 46ch;
}

.bulletin-items li {
    padding: 0.4rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 0.98rem;
}

/*
 * The readings. A forecast gives these as a run of terse pairs, not as four
 * tiles of equal size to the thing they qualify.
 */
.bulletin-readings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.75rem;
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    max-width: 34rem;
}

@media (min-width: 40rem) {
    .bulletin-readings {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.bulletin-readings > div {
    min-width: 0;
}

.bulletin-readings dt {
    font-family: var(--font-bulletin);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    opacity: 0.75;
}

.bulletin-readings dd {
    margin: 0.2rem 0 0;
    font-family: var(--font-bulletin);
    font-variant-numeric: tabular-nums;
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

/* ------------------------------------------------- interior mastheads */

/*
 * Interior pages had no band at all, which is the failure where a homepage has
 * a voice and the other eleven pages do not. They get the chart.
 */
.masthead {
    background-color: var(--bulletin);
    background-image: url('/img/isobars.webp');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    color: #fff;
    border-bottom: 4px solid var(--bulletin-deep);
    padding-block: clamp(1.75rem, 4.5vw, 3rem) clamp(1.5rem, 3.5vw, 2.25rem);
}

.masthead-inner {
    max-width: 62rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

.masthead-kicker {
    display: block;
    font-family: var(--font-bulletin);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    opacity: 0.78;
    margin-bottom: 0.9rem;
}

.masthead h1 {
    color: #fff;
    font-size: clamp(1.8rem, 4.8vw, var(--step-5, 2.488rem));
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    max-width: 22ch;
    margin: 0;
    text-wrap: balance;
}

.masthead-standfirst {
    margin-top: 0.9rem;
    max-width: 48ch;
    font-size: 1.05rem;
    line-height: 1.5;
    color: #fff;
    opacity: 0.9;
}

/* ------------------------------------------------------ the page body */

/*
 * The remaining glass cards. site.css already flattened their fill; this takes
 * the rounding and the padding as well, so sections are separated by rules and
 * space rather than by fourteen identical boxes.
 */
.card,
.card-glass {
    border-radius: 0 !important;
    padding-inline: 0 !important;
}

.sheet {
    max-width: 62rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
    padding-block: clamp(1.75rem, 4vw, 3rem) 4rem;
    counter-reset: entry;
}

/*
 * The margin column. Generated rather than written into the markup, because it
 * is numbering: a screen reader should get the heading, not the number.
 */
.sheet > section {
    counter-increment: entry;
    display: grid;
    gap: 0.4rem clamp(0.75rem, 2vw, 2rem);
    padding-top: clamp(1.5rem, 4vw, 2.25rem);
    margin-bottom: clamp(1.5rem, 4vw, 2.25rem) !important;
    border-top: 1px solid var(--edge);
}

.sheet > section::before {
    content: counter(entry, decimal-leading-zero);
    font-family: var(--font-bulletin);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--slate);
}

@media (min-width: 62rem) {
    .sheet > section {
        grid-template-columns: 6.5rem minmax(0, 1fr);
        align-items: start;
    }

    .sheet > section > * {
        grid-column: 2;
    }

    .sheet > section::before {
        grid-column: 1;
        grid-row: 1 / -1;
        text-align: right;
        border-top: 3px solid var(--slate);
        padding-top: 0.35rem;
        margin-top: -0.35rem;
    }
}

.sheet > section.hidden {
    display: none !important;
}

/*
 * The temperature bands. These already carried a left rule in the band's own
 * colour, which is the right instinct; it is thickened so it reads at a glance,
 * and the colour is never the only thing saying which band it is, because the
 * heading says so in words.
 */
.band-freezing,
.band-cold,
.band-cool,
.band-mild,
.band-warm,
.band-hot {
    border-left-width: 6px;
    border-left-style: solid;
    border-radius: 0 !important;
    padding-left: 1.1rem;
}

/* --------------------------------------------------------------- print */

@media print {
    .site-nav,
    .hero,
    .site-footer,
    .book-plug,
    .adsbygoogle {
        display: none !important;
    }

    .bulletin {
        background: none !important;
        color: #000 !important;
        border: 1px solid #000;
    }

    .bulletin *,
    .bulletin-verdict,
    .bulletin-readings dt,
    .bulletin-readings dd {
        color: #000 !important;
        opacity: 1 !important;
    }
}

.bulletin-share {
    margin-top: 1.75rem;
    width: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    padding: 0.6rem 1.2rem !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.bulletin-share:hover {
    background: rgba(255, 255, 255, 0.22) !important;
}

.bulletin-share:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: 2px;
}

/*
 * A placeholder is a hint, not a value.
 *
 * The fields on these pages were enlarged so the figure people type is legible
 * at the scale of the answer. At that size a placeholder set in the input's own
 * colour and weight reads as a filled field, and somebody arrives at a form that
 * looks already answered. Every field here carries a visible label, so the
 * placeholder is free to recede.
 */
input::placeholder,
textarea::placeholder {
    color: color-mix(in srgb, currentColor 38%, transparent);
    font-size: 0.66em;
    font-weight: 400;
    letter-spacing: 0.04em;
    opacity: 1;
}

/* placeholder specificity */
input[type="text"]::placeholder,
input[type="number"]::placeholder,
input[type="search"]::placeholder {
    color: color-mix(in srgb, currentColor 38%, transparent);
    font-size: 0.66em;
    font-weight: 400;
    letter-spacing: 0.04em;
    opacity: 1;
}

/* ------------------------------------------------ theme-aware surfaces */

/*
 * site.css redefines the palette under prefers-color-scheme: dark, but the
 * pages are built from hardcoded Tailwind greys with no dark: variant on any
 * of them. text-gray-700 measured 1.54:1 on the dark card and text-gray-900
 * 1.12:1, so headings disappeared entirely. The utilities are mapped onto the
 * palette tokens here rather than annotated 274 times in the markup.
 *
 * The grounds have to move with them. Leaving bg-white white while the ink
 * turns light would swap one failure for its mirror image.
 */

:root {
    --panel: #F3F5F7;
    --tag: #E3EAF0;
    --tag-ink: #2F4B60;
    --ink-ok: #2A6247;
    --ink-warn: #9A3B2A;
    --ink-note: #7E5A1C;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --panel: #232B32;
        --tag: #2C3A46;
        --tag-ink: #BED4E4;
        --ink-ok: #86C5A5;
        --ink-warn: #E0917A;
        --ink-note: #D9A863;
    }
}

.bg-white,
.bg-white\/95 {
    background-color: var(--card) !important;
}

.bg-sky-50,
.bg-blue-50,
.bg-purple-50,
.bg-green-50,
.bg-red-50,
.bg-orange-50,
.bg-yellow-50 {
    background-color: var(--panel) !important;
}

.bg-sky-100,
.bg-blue-100,
.bg-orange-100,
.bg-yellow-100,
.bg-amber-100 {
    background-color: var(--tag) !important;
    color: var(--tag-ink) !important;
}

.text-gray-900,
.text-gray-800,
.text-gray-700 {
    color: var(--ink) !important;
}

.text-gray-600,
.text-gray-500 {
    color: var(--muted) !important;
}

.text-blue-800,
.text-blue-700,
.text-blue-600,
.text-sky-700,
.text-purple-700,
.text-purple-600 {
    color: var(--slate-deep) !important;
}

.text-green-700,
.text-green-600,
.text-green-500 {
    color: var(--ink-ok) !important;
}

.text-red-500,
.text-red-400 {
    color: var(--ink-warn) !important;
}

.text-orange-700,
.text-orange-600,
.text-amber-700 {
    color: var(--ink-note) !important;
}

.border-gray-300,
.border-gray-200,
.border-sky-100,
.border-purple-200 {
    border-color: var(--edge) !important;
}

/* ------------------------------------------------------ page furniture */

.skip-link {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    transform: translateY(-120%);
    background: var(--bulletin);
    color: #fff;
    padding: 0.75rem 1.25rem;
    font-family: var(--font-bulletin);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
}

.skip-link:focus-visible {
    transform: translateY(0);
}

.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: 0.75rem;
    font-size: 0.85rem;
}

.header-icons {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    color: var(--slate);
}

.header-icons .icon {
    width: 2rem;
    height: 2rem;
}

/*
 * The one error surface the page has. It replaces an alert() that left the
 * spinner running, so it has to be visible without being shouted.
 */
.form-error {
    margin: 0;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--ink-warn);
    background: var(--panel);
    color: var(--ink);
    font-size: 0.95rem;
}

.btn-quiet {
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--edge);
}

.btn-quiet:hover {
    background: var(--tag);
}

/* ---------------------------------------------------- guide and answers */

.guide-section {
    padding-top: clamp(1.5rem, 4vw, 2.25rem);
    margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
    border-top: 1px solid var(--edge);
}

.faq-item {
    scroll-margin-top: 5rem;
}

/*
 * The three layers and the three tips read as undifferentiated paragraphs
 * without these: both classes were used and neither was ever defined.
 */
.temp-card {
    border-left: 6px solid var(--slate);
    padding: 0.85rem 0 0.85rem 1.1rem;
    margin-bottom: 1.25rem;
}

.temp-card:last-child {
    margin-bottom: 0;
}

.tip-box {
    border-left: 6px solid var(--ochre);
    background: var(--panel);
    padding: 1rem 1.15rem;
    margin: 1.5rem 0;
}

.tip-box p {
    margin: 0;
}

/* ------------------------------------------------------------ brand mark */

/*
 * The mark is not an icon from the shared set and never will be, so it does
 * not carry svg.icon: the design build refreshes those from a registry and
 * would rewrite this one back to whatever it holds. Same sizing and weight,
 * its own class.
 */
.brand-mark {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.135em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.brand-mark-lg {
    width: 1.35em;
    height: 1.35em;
}