/*
 * prescription-calculator.co.uk: the FP10 restyle.
 *
 * The generic house look (white rounded card, off-white ground, one navy
 * accent) is replaced with the thing this tool is actually about: an NHS
 * FP10 prescription form. Pale green anti-copy stock for the page, ruled
 * boxes for the fields a prescriber writes into, and rules rather than
 * cards for hierarchy.
 *
 * Loaded after site.css on every page, so everything here is an override.
 */

/* ------------------------------------------------------------------ palette */

:root {
    --accent: #005EB8;
    --accent-deep: #003087;
    --accent-tint: #E3EDF7;
    --accent-ink: #FFFFFF;

    /* The FP10's pale green tinted stock. Ink on it is 14.55:1. */
    --paper: #E9F0E5;

    /*
     * The house muted (#6B747E) drops to 4.08:1 on this green stock, under
     * AA. This value is 4.73:1 on paper and 5.50:1 on white, so it replaces
     * the house token everywhere rather than only where the green shows.
     */
    --muted: #616A73;

    /*
     * Two more steps on the existing 1.2 ratio, for the one number on the
     * page that matters most: the annual saving. Nothing below --step-5
     * changes.
     */
    --step-6: 3.1rem;
    --step-7: 4.6rem;

    /*
     * The masthead keeps this navy and white text in both themes rather than
     * following --accent into dark mode. --accent lifts to a lighter blue so
     * links and buttons still read against a dark page, but multiply only
     * darkens: white text over the darkest pixel in tint.webp measures
     * 10.77:1 here, whereas the same pixel against the lighter dark-mode
     * accent (with the dark ink text dark mode needs for AA on that accent)
     * drops to 3.36:1 and fails. The letterhead just doesn't relight itself.
     */
    --masthead-bg: #005EB8;
    --masthead-ink: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --accent: #5BA3E8;
        --accent-deep: #8FC1EF;
        --accent-tint: #142433;
        /* Lifting the accent to a tint means white button text on it no
         * longer clears AA (2.68:1), so it switches to a dark ink instead,
         * matching how the house tokens already handle this. The masthead
         * is unaffected: it keeps its own fixed navy and white ink (see
         * --masthead-bg above) rather than following --accent. */
        --accent-ink: #06121F;
        --paper: #10160F;
    }
}

:root[data-theme='dark'],
body.dark-mode {
    --accent: #5BA3E8;
    --accent-deep: #8FC1EF;
    --accent-tint: #142433;
    --accent-ink: #06121F;
    --paper: #10160F;
}

/* --------------------------------------------------------------- de-carding */

/*
 * A prescription form is not a floating white rectangle. Every surface that
 * used to be a card shows the paper through instead, and hierarchy comes
 * from rules and space rather than a border, a radius and a shadow.
 */
.calculator-card,
.content-card,
.info-card,
.article-card,
.blog-card,
.faq-card,
.card,
.result-box,
.history-item,
.email-box,
.contact-box,
.faq-section,
.summary-card,
.balance-card,
.contact-method {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.calculator-card {
    border: 0;
    border-top: 4px solid var(--accent);
    padding: 1.75rem 0 0;
}

.content-card {
    border: 0;
    padding: 0;
}

.info-box,
.highlight-box,
.warning-box,
.tip-box,
.example-box,
.note,
.cta-box,
.info-callout,
.warning,
.success {
    border-radius: 0;
}

.info-section {
    border: 0;
    border-radius: 0;
}

/* -------------------------------------------------------------------- type */

/*
 * Every h1 gets a rule under it, standing in for the printed keyline under a
 * form's title. The masthead h1 already sits on a coloured band, so it
 * carries its own colour and skips the rule.
 */
h1 {
    display: inline-block;
    border-bottom: 3px solid var(--accent);
    padding-bottom: 0.5rem;
}

.masthead h1 {
    display: block;
    border-bottom: 0;
    padding-bottom: 0;
    color: var(--masthead-ink);
}

/* ---------------------------------------------------------------- masthead */

/*
 * The letterhead. background-blend-mode: multiply can only darken, never
 * lighten, so the fixed white ink here is never worse over the image than
 * it is over the flat navy underneath (see --masthead-bg above for why this
 * colour does not follow --accent into dark mode).
 */
.masthead {
    background-color: var(--masthead-bg);
    background-image: url('/img/tint.webp');
    background-size: 640px auto;
    background-blend-mode: multiply;
    color: var(--masthead-ink);
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
    padding-inline: max(clamp(1rem, 4vw, 2rem), calc((100% - var(--page)) / 2));
}

.masthead-kicker {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--masthead-ink);
}

.masthead h1 {
    margin-top: 0.5rem;
    font-size: clamp(var(--step-5), 5vw, var(--step-6));
}

.masthead-standfirst {
    color: var(--masthead-ink);
    font-size: var(--step-1);
    max-width: 44ch;
    margin-top: 0.75rem;
    line-height: 1.55;
}

/* --------------------------------------------------------------- the tool */

.tool-kicker {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 1rem;
}

/*
 * The field itself: a ruled box with a heavy accent bar down the left edge,
 * the field name in tracked caps above the answer line, the way an FP10
 * marks the box a prescriber writes into.
 */
.form-group {
    border: 1px solid var(--muted);
    border-left: 6px solid var(--accent);
    padding: 1.1rem 1.35rem 1.35rem;
    background: var(--card);
}

.form-group label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-deep);
    margin-bottom: 0.6rem;
}

.form-group input {
    border: none;
    border-bottom: 2px solid var(--muted);
    border-radius: 0;
    background: transparent;
    padding: 0.4rem 0.1rem;
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.form-group input:focus {
    box-shadow: none;
    border-bottom-color: var(--accent);
}

.form-group input:focus-visible {
    outline: 2px solid var(--accent-deep);
    outline-offset: 3px;
}

.form-group .help-text {
    margin-top: 0.85rem;
}

.calculate-btn:focus-visible {
    outline: 2px solid var(--accent-deep);
    outline-offset: 3px;
}

/* --------------------------------------------------------------- the answer */

/*
 * Two columns rather than three cards: paying per item against a
 * prepayment certificate. The cheaper side is marked by a heavier top rule
 * and the word "Cheaper", never by colour alone.
 */
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--muted);
    margin-block: 1.5rem;
}

.comparison-column {
    padding: 1.5rem;
    border-top: 4px solid transparent;
    border-right: 1px solid var(--muted);
}

.comparison-column:last-child {
    border-right: 0;
}

.comparison-column.is-cheaper {
    border-top-color: var(--accent);
}

.comparison-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
}

.comparison-figure {
    font-family: var(--font-display);
    font-size: var(--step-4);
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    margin-top: 0.5rem;
}

.comparison-note {
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 0.25rem;
}

.cheaper-flag {
    display: inline-block;
    margin-top: 0.85rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-deep);
}

@media (max-width: 34rem) {
    .comparison-grid {
        grid-template-columns: 1fr;
    }

    .comparison-column {
        border-right: 0;
        border-bottom: 1px solid var(--muted);
    }

    .comparison-column:last-child {
        border-bottom: 0;
    }
}

.recommendation {
    border: 0;
    border-left: 4px solid var(--rule-strong);
    padding: 1.5rem;
    margin-top: 0;
}

.recommendation.save-money {
    border-left-color: var(--accent);
}

.answer-kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
}

/*
 * The single biggest thing on the page: the figure the visitor came for.
 */
.answer-figure {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 9vw, var(--step-7));
    font-weight: 700;
    color: var(--accent-deep);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    margin: 0.35rem 0 0.85rem;
}

/* -------------------------------------------------------------- editorial */

/*
 * Below the tool, the supporting content breaks the centred column: a
 * tracked-caps section mark in a narrow left margin, prose at a readable
 * measure to its right. One column under 62rem.
 */
.info-section {
    display: grid;
    grid-template-columns: minmax(7rem, 11rem) minmax(0, var(--measure));
    gap: 0 2.5rem;
    padding: 2.5rem 0;
    border-top: 1px solid var(--rule-strong);
}

.info-section:first-of-type {
    border-top: 0;
    padding-top: 0.5rem;
}

.info-section::before {
    content: attr(data-mark);
    grid-column: 1;
    grid-row: 1 / -1;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    position: sticky;
    top: 5rem;
    align-self: start;
}

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

@media (max-width: 62rem) {
    .info-section {
        grid-template-columns: 1fr;
    }

    .info-section::before {
        grid-row: auto;
        position: static;
        margin-bottom: 0.5rem;
    }
}

/*
 * A placeholder is a hint, not a value.
 *
 * The fields here were enlarged so the figure people type is legible at the
 * scale of the answer. At that size a placeholder 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 carries a visible label, so this can recede.
 */
input::placeholder,
textarea::placeholder,
.calculator-card input::placeholder,
.calculator-card textarea::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder,
input[type="text"]::placeholder,
input[type="number"]::placeholder {
    color: color-mix(in srgb, currentColor 38%, transparent);
    font-size: 0.66em;
    font-weight: 400;
    letter-spacing: 0.04em;
    opacity: 1;
}

/* --------------------------------------------------- validation and status */

/*
 * The estate used alert() for every validation failure. A modal is unreadable
 * on a phone, says nothing about which field is wrong, and blocks the page for
 * someone working at speed, so the message now sits under the field it belongs
 * to. The red is checked against this site's own paper rather than reused from
 * another site.
 */

:root {
    --form-error: #A3231B;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --form-error: #FFB4AB;
    }
}

:root[data-theme='dark'] {
    --form-error: #FFB4AB;
}

.form-error {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--form-error);
}

.form-error[hidden] {
    display: none;
}

[aria-invalid='true'] {
    border-color: var(--form-error);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------- trackers and saved figures */

/*
 * The three tools below the calculator were built with inline styles and their
 * own hardcoded palette, which predates this restyle and fought it. The FP10's
 * own device is a ruled box, so a tracked row is a ruled box with a status
 * stripe down the edge rather than a coloured card.
 */

:root {
    --state-overdue: #A3231B;
    --state-today: #8A5A00;
    --state-soon: #8A5A00;
    --state-later: var(--accent);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --state-overdue: #FFB4AB;
        --state-today: #E8B44A;
        --state-soon: #E8B44A;
        --state-later: var(--accent);
    }
}

:root[data-theme='dark'] {
    --state-overdue: #FFB4AB;
    --state-today: #E8B44A;
    --state-soon: #E8B44A;
    --state-later: var(--accent);
}

.tool-note {
    margin: 0 0 1.25rem;
    color: var(--muted);
}

.tracker-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
    align-items: end;
    margin-bottom: 1.25rem;
}

.tracker-field label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.tracker-field input,
.tracker-field select {
    width: 100%;
}

.tracker-field-action {
    align-self: end;
}

.tracker-add {
    width: 100%;
    padding: 0.7rem 1.25rem;
    font: inherit;
    font-weight: 600;
    color: var(--accent-ink);
    background: var(--accent);
    border: 1px solid var(--accent);
    cursor: pointer;
}

.tracker-add:hover {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
}

.tracker-empty {
    margin: 0;
    padding: 1.25rem 0;
    color: var(--muted);
}

.tracker-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
}

.tracker-item {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 1rem;
    border: 1px solid var(--rule);
    border-left: 4px solid var(--state-later);
    background: var(--card, transparent);
}

.tracker-item.is-overdue { border-left-color: var(--state-overdue); }
.tracker-item.is-today,
.tracker-item.is-soon { border-left-color: var(--state-today); }

.tracker-name {
    display: block;
    font-size: 1.05rem;
}

.tracker-due,
.tracker-frequency {
    font-size: 0.9rem;
    color: var(--muted);
}

.tracker-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.tracker-countdown {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tracker-item.is-overdue .tracker-countdown { color: var(--state-overdue); }
.tracker-item.is-today .tracker-countdown,
.tracker-item.is-soon .tracker-countdown { color: var(--state-today); }

.tracker-delete,
.tracker-load {
    padding: 0.45rem 0.9rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
    background: none;
    border: 1px solid var(--rule-strong, var(--rule));
    cursor: pointer;
}

.tracker-delete:hover,
.tracker-load:hover {
    border-color: var(--accent);
}

.notice {
    padding: 1rem 1.15rem;
    border: 1px solid var(--rule);
    border-left: 4px solid var(--state-later);
}

.notice.is-overdue { border-left-color: var(--state-overdue); }
.notice.is-today,
.notice.is-soon { border-left-color: var(--state-today); }

.notice-title {
    margin: 0 0 0.4rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.notice.is-overdue .notice-title { color: var(--state-overdue); }
.notice.is-today .notice-title,
.notice.is-soon .notice-title { color: var(--state-today); }

.notice-body {
    margin: 0 0 0.5rem;
    line-height: 1.55;
}

.notice-body:last-child {
    margin-bottom: 0;
}

/*
 * A figure someone takes to a pharmacy counter or a GP appointment: the
 * comparison and the working, with the page furniture out of the way.
 */
@media print {
    .site-nav,
    .calculate-btn,
    .tracker-form,
    .tracker-delete,
    .tracker-load,
    .book-plug,
    .gov-footer,
    .info-section {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .masthead {
        background: none;
        color: #000;
        border-bottom: 2px solid #000;
        padding-block: 0 1rem;
    }

    .masthead h1,
    .masthead-kicker,
    .masthead-standfirst,
    .answer-figure {
        color: #000;
    }

    .results {
        display: block !important;
    }
}