/*
 * energy-cost-calculator.co.uk
 *
 * The idea: this is an electricity bill and the meter it is read off. The
 * masthead is the meter's dial face, the tool is the tariff and usage fields
 * printed on a bill, and the answer is the total in the ruled box at the
 * bottom of the page, the way a real bill prints it, not a dashboard card.
 *
 * Half this site's pages (index, guide, faq, the fifteen cost-to-run pages)
 * load the Tailwind Play CDN and never link site.css, so this sheet cannot
 * assume the house tokens exist. The tokens below are declared unconditionally:
 * harmless duplication on the pages that already have them from site.css,
 * load-bearing on the ones that do not.
 *
 * What it replaces: a page built from fourteen identical white
 * `.section-card` boxes on a grey ground, a teal brand colour hard-coded into
 * the header, footer, buttons and tables even though the site's own theme
 * already set an amber accent, and an h1 that named the product rather than
 * asking the question a visitor actually has.
 */

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

:root {
    --paper: #FBFAF8;
    --card: #FFFFFF;
    --ink: #1A1D21;
    --ink-soft: #454C54;
    --muted: #6B747E;
    --rule: #E3E0DA;
    --rule-strong: #CFCBC3;

    --accent: #8A5A18;
    --accent-deep: #6A4512;
    --accent-tint: #F3EFE8;
    --accent-ink: #FFFFFF;

    --good: #2F6B4F;
    --good-tint: #EAF3ED;
    --warn: #8A6212;
    --warn-tint: #FBF3E0;
    --bad: #9A3324;
    --bad-tint: #FBEDEA;

    --font-display: 'Bitter', Georgia, serif;
    --font-body: 'Source Sans 3', system-ui, -apple-system, sans-serif;
    --font-figure: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

    --step-0: 1rem;
    --step-1: 1.2rem;
    --step-2: 1.44rem;
    --step-3: 1.728rem;
    --step-4: 2.074rem;
    --step-5: 2.488rem;
    /*
     * The house scale is a 1.2 ratio and tops out at 2.488rem, which leaves no
     * room for the annual total to be genuinely the biggest thing on the page.
     * The top of the scale is extended rather than the ratio changed, so the
     * figure stays in the same voice as everything under it.
     */
    --step-6: 3.2rem;
    --step-7: 4.4rem;

    --space: 1rem;
    --radius: 10px;
    --radius-sm: 6px;
    --measure: 68ch;
    --page: 68rem;

    /* The ink a meter's dial rim and a bill's ruling are printed in. */
    --board: #3A2A12;

    --lift: 0 1px 2px rgba(26, 29, 33, 0.05), 0 1px 1px rgba(26, 29, 33, 0.04);
    --lift-lg: 0 2px 4px rgba(26, 29, 33, 0.06), 0 8px 20px rgba(26, 29, 33, 0.06);
}

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

:root[data-theme='dark'] {
    --board: #E0AE5C;
}

/*
 * Small caps with tracking for anything that names a field or a section
 * rather than being read as prose. The one typographic mannerism the page
 * allows itself, doing the job the old pages gave to bold 14px sans.
 */
.masthead-kicker,
.section-mark,
.field-name,
.answer-label,
.sheet-form .form-legend {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-feature-settings: 'tnum';
}

/* --------------------------------------------------- global chrome retheme */

/*
 * Eighteen pages carry their own copy of this header and footer, hard-coded
 * to a teal (#1a5c5c) that predates the site's own amber theme. Overriding
 * the shared class names once here reaches every one of them without editing
 * eighteen files. The nine pages that already load site.css get an identical
 * result from their own stylesheet, so this is a safe no-op there.
 */
.gov-header {
    background: var(--card);
    border-bottom: 3px solid var(--accent);
}

.gov-logo {
    color: var(--ink);
}

.gov-logo:hover {
    color: var(--accent);
}

.gov-nav a {
    color: var(--muted);
}

.gov-nav a:hover {
    color: var(--ink);
    border-bottom-color: var(--accent);
}

.gov-footer {
    background: var(--board);
    color: #fff;
}

.gov-footer-col a,
.gov-footer-col p {
    color: rgba(255, 255, 255, 0.72);
}

.gov-footer-col a:hover {
    color: #fff;
}

.gov-footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
}

/* A page's own inline colour on <a> beats a class of equal specificity. */
a {
    color: var(--accent);
}

a:hover {
    color: var(--accent-deep);
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    color: var(--ink);
}

/*
 * The Tailwind pages each carry their own teal brand mark: a gradient hero, a
 * "section-title" colour, and a set of buttons, all keyed to the same
 * hard-coded teal as the header. Retired in favour of the accent everywhere,
 * with red kept for anything destructive.
 */
.teal-gradient {
    background: var(--accent);
    color: #fff;
}

/*
 * The FAQ hero sets its white type with a Tailwind utility on the header
 * itself, not on the heading inside it. A bare `h1` rule would out-specify
 * the inherited colour and turn the headline dark on its own accent band, so
 * the exception is scoped to :where() to keep it below Tailwind's own
 * utilities in specificity while still beating plain inheritance.
 */
.teal-gradient :where(h1, h2, h3, h4, p, li, strong) {
    color: inherit;
}

.section-title {
    color: var(--accent);
}

.btn-primary,
.cta-button {
    background: var(--accent);
}

.btn-primary:hover,
.cta-button:hover {
    background: var(--accent-deep);
}

/*
 * A bare `.btn-secondary` also names site.css's own outlined secondary
 * button on the nine pages that load it, so the override is scoped to the
 * results panel's own copy and clear buttons rather than the class itself.
 */
.results-panel .btn-secondary {
    background: var(--muted);
}

.results-panel .btn-secondary:hover {
    background: var(--ink-soft);
}

.table-header {
    background: var(--board);
}

/*
 * `.cost-box` is left alone: it is only ever used on the pages that already
 * load site.css, which gives it a deliberately neutral rule rather than the
 * accent, and this sheet has no business overriding a choice made there.
 */
.page-header,
.info-box,
.highlight-box,
.tip-box {
    border-left-color: var(--accent);
}

.warning-box {
    border-left-color: var(--warn);
    background: var(--warn-tint);
}

input.input-field:focus,
.input-field:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
}

/*
 * Retiring the universal card. Every page in this estate reached for the same
 * white, rounded, drop-shadowed box, so an introduction, a rule, a tip and a
 * form all carried identical weight. Reference prose gets rules and space
 * instead; anything that still needs a boundary (the tool itself, tables of
 * figures) is given its own treatment below rather than this one.
 */
.section-card,
.guide-section,
.card,
.cost-card {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    transform: none;
}

.section-card:hover,
.guide-section:hover,
.card:hover {
    transform: none;
    box-shadow: none;
}

.section-card + .section-card,
.guide-section + .guide-section,
.card + .card {
    margin-top: clamp(1.75rem, 4vw, 2.75rem);
    padding-top: clamp(1.75rem, 4vw, 2.75rem);
    border-top: 1px solid var(--rule);
}

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

/*
 * Full bleed, because a meter's dial face runs to the edge of its housing.
 * The engraving is multiplied over the accent rather than laid on top of it:
 * multiply can only darken, so white type on this band is never worse than
 * white on the flat accent, whatever the image does.
 */
.masthead {
    background-color: var(--accent);
    background-image: url('/img/meter-dials.webp');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    color: #fff;
    /*
     * A bill is a tall narrow document that opens with a lot of account
     * detail before it gets to the figure, so the band is deep.
     */
    padding-block: clamp(2.75rem, 7.5vw, 5rem) clamp(2rem, 4.5vw, 3rem);
    border-bottom: 4px solid var(--board);
}

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

.masthead-kicker {
    display: block;
    color: #fff;
    /* 85% white on this accent measures 4.77:1, which clears 4.5:1 for text. */
    opacity: 0.85;
    margin-bottom: 1.25rem;
}

.masthead h1 {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 5.5vw, var(--step-6));
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    max-width: 20ch;
    color: #fff;
    margin: 0;
}

.masthead-standfirst {
    margin-top: 1.1rem;
    font-size: var(--step-1);
    line-height: 1.5;
    max-width: 48ch;
    color: #fff;
    /* 90% white on this accent measures 5.12:1. */
    opacity: 0.9;
}

/* ------------------------------------------------------------- the sheet */

/*
 * An editorial grid rather than a single centred column. Prose and the tool
 * run in a real measure on the right; the left margin carries the section
 * mark, the way a bill's own sections are labelled down the side. Below
 * 60rem it collapses and the mark sits above its section.
 */
.sheet {
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
    padding-block: clamp(2rem, 5vw, 3.5rem) 4rem;
}

.sheet-grid {
    display: grid;
    gap: clamp(1rem, 3vw, 2.5rem);
}

.sheet-grid + .sheet-grid {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding-top: clamp(2.5rem, 6vw, 4rem);
    border-top: 1px solid var(--rule);
}

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

.section-mark {
    color: var(--accent);
    padding-top: 0.5rem;
    margin: 0;
}

@media (min-width: 60rem) {
    .section-mark {
        text-align: right;
        border-top: 2px solid var(--accent);
    }
}

/* -------------------------------------------------------------- the form */

/*
 * The fields you would fill in on the back of a bill: the rate, then what
 * you actually run. Numbered and set on ruled baselines instead of boxed
 * inputs, so it reads as something to fill in rather than six widgets.
 */
.sheet-form {
    border: 1px solid var(--rule-strong);
    border-top: 4px solid var(--accent);
    padding: clamp(1.25rem, 4vw, 2.25rem);
    background: var(--card);
}

.sheet-form .form-legend {
    color: var(--accent);
    margin: 0 0 1.5rem;
}

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

@media (min-width: 46rem) {
    .fields {
        grid-template-columns: 1fr 1fr;
    }
}

.fields > li {
    display: grid;
    grid-template-columns: 1.7rem 1fr;
    column-gap: 0.6rem;
    align-items: baseline;
    margin: 0;
}

/*
 * The tariff figure. It is the one field that sets everything else, so it is
 * pulled out of the two-column grid and given the accent tint a rate box
 * would carry on a printed bill.
 */
.fields > li.rate-field {
    grid-template-columns: 1.7rem 1fr;
    background: var(--accent-tint);
    padding: 0.9rem 1rem;
    border-left: 3px solid var(--accent);
}

@media (min-width: 46rem) {
    .fields > li.rate-field {
        grid-column: 1 / -1;
    }
}

.field-num {
    font-family: var(--font-figure);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.field-body {
    min-width: 0;
}

.field-name {
    display: block;
    color: var(--ink-soft);
    margin-bottom: 0.4rem;
}

.sheet-form input[type='number'],
.sheet-form input[type='text'] {
    width: 100%;
    border: 0;
    border-bottom: 2px solid var(--rule-strong);
    border-radius: 0;
    background: transparent;
    padding: 0.35rem 0 0.45rem;
    font: inherit;
    font-family: var(--font-figure);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    box-shadow: none;
}

.sheet-form select {
    width: 100%;
    border: 0;
    border-bottom: 2px solid var(--rule-strong);
    border-radius: 0;
    background: var(--card);
    padding: 0.35rem 1.5rem 0.45rem 0;
    font: inherit;
    color: var(--ink);
}

.sheet-form input[type='number']:hover,
.sheet-form input[type='text']:hover,
.sheet-form select:hover {
    border-bottom-color: var(--ink-soft);
}

.sheet-form input[type='number']:focus-visible,
.sheet-form input[type='text']:focus-visible,
.sheet-form select:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-bottom-color: var(--accent);
}

.sheet-form .field-hint {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.82rem;
    color: var(--muted);
}

/* --muted on the rate field's accent tint measures 4.14:1, short of 4.5:1 for
   text; --ink-soft on the same tint measures 7.59:1. */
.rate-field .field-hint {
    color: var(--ink-soft);
}

/* --rule-strong, the input's usual boundary, is 1.41:1 on this tint: not a
   visible edge at all. --accent on the same tint is 5.15:1, well past the
   3:1 SC 1.4.11 needs for a UI component boundary. */
.rate-field input {
    border-bottom-color: var(--accent);
}

.sheet-form .button-group {
    margin-top: 2rem;
}

.sheet-form .btn-primary {
    width: auto;
    min-width: 14rem;
    border: 0;
    border-radius: 0;
    padding: 0.95rem 1.75rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* --------------------------------------------------------- the bill itself */

.results-panel {
    margin-top: clamp(2rem, 5vw, 3rem);
    border: 1px solid var(--rule-strong);
    background: var(--card);
}

.results-panel > h2 {
    padding: clamp(1.25rem, 4vw, 1.75rem) clamp(1.25rem, 4vw, 1.75rem) 0;
    font-size: var(--step-2);
}

.results-panel table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.results-panel thead th {
    text-align: left;
    padding: 0.7rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
}

.results-panel td {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--rule);
    font-size: 0.92rem;
}

/*
 * The total, printed the way a bill prints its total: pulled out of the
 * column grid it sits inside, ruled top and bottom, and set at the top of
 * the extended type scale so it is unmistakably the answer.
 */
.bill-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: clamp(1.25rem, 4vw, 2rem);
    border-top: 3px solid var(--ink);
}

.bill-total-line {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.bill-total-line .answer-label {
    color: var(--muted);
}

#totalMonthly {
    display: block;
    font-family: var(--font-figure);
    font-size: var(--step-3);
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

#totalAnnual {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 8vw, var(--step-6));
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.answer-note {
    padding: 0 clamp(1.25rem, 4vw, 2rem) clamp(1.25rem, 4vw, 2rem);
    font-size: 0.88rem;
    color: var(--muted);
    max-width: 52ch;
}

/* -------------------------------------------------------------- focus */

/*
 * The shared house style turns the outline off on inputs and on every button
 * variant without a working replacement: `--accent-tint` is close enough to
 * white that its focus ring measures under 1.1:1 against a white card, and
 * the button rules remove the outline with nothing at all. Restored here on
 * :focus-visible so a mouse click does not draw a ring a keyboard user never
 * asked for.
 */
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(--accent);
    outline-offset: 2px;
    box-shadow: none;
}

/* On the masthead the ground is the accent itself, so an accent ring is invisible there. */
.masthead a:focus-visible,
.masthead button:focus-visible {
    outline-color: #fff;
}

/* ------------------------------------------------------------ chart & tips */

.chart-container {
    margin-top: 1.5rem;
    border: 1px solid var(--rule);
    padding: 1.25rem;
    background: var(--card);
}

.tips-box {
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--accent);
    background: var(--accent-tint);
}

.tips-box h3 {
    font-size: var(--step-1);
    margin-bottom: 0.5rem;
}

/* ------------------------------------------------------- appliance index */

.appliance-index-block h2 {
    font-size: var(--step-3);
    margin-bottom: 0.75rem;
}

.appliance-index-block > p {
    max-width: var(--measure);
    color: var(--ink-soft);
    margin-bottom: 1.25rem;
}

.appliance-index a {
    color: var(--ink);
    font-weight: 600;
}

.appliance-index a:hover {
    color: var(--accent);
}

.appliance-index .watt {
    color: var(--muted);
}

/* ------------------------------------------------------- reference prose */

.sheet h2 {
    font-size: var(--step-3);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;
    max-width: 32ch;
}

.sheet h3 {
    font-size: var(--step-1);
    margin-top: 1.5rem;
    margin-bottom: 0.35rem;
}

.sheet p,
.sheet li {
    max-width: 66ch;
}

/* ------------------------------------------------------------ dark mode */

/*
 * The accent is a dark ochre: legible on white, too close to a dark ground.
 * On dark it lifts for anything read as text or as a rule.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .section-mark,
    :root:not([data-theme='light']) .field-num,
    :root:not([data-theme='light']) #totalAnnual {
        color: #E0AE5C;
    }

    :root:not([data-theme='light']) .masthead {
        border-bottom-color: #E0AE5C;
    }
}

:root[data-theme='dark'] .section-mark,
:root[data-theme='dark'] .field-num,
:root[data-theme='dark'] #totalAnnual {
    color: #E0AE5C;
}

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

/*
 * People print a running-cost breakdown to sit next to the physical bill, so
 * the figures print and the chrome does not.
 */
@media print {
    .gov-header,
    .site-nav,
    .sheet-form .button-group,
    .chart-container,
    .tips-box,
    .gov-footer,
    .editorial-footer,
    .book-plug {
        display: none;
    }

    .masthead {
        background: none;
        color: #000;
        border-bottom: 2px solid #000;
    }

    .masthead h1,
    .masthead-standfirst,
    .masthead-kicker {
        color: #000;
        opacity: 1;
    }

    #totalAnnual {
        color: #000;
    }
}

/* ------------------------------------------------- the rest of the pages */

/*
 * The sheet was linked on every page but the band was only on the homepage,
 * which leaves the site with a front door in one voice and twenty-six rooms in
 * another. That split is the thing this redesign exists to remove.
 *
 * It is shorter here and carries no standfirst: on a cost-to-run page or an
 * article the first paragraph is the standfirst, and printing two would be
 * saying it twice.
 */
.masthead-slim {
    padding-block: clamp(1.75rem, 4vw, 2.5rem) clamp(1.35rem, 3vw, 2rem);
}

.masthead-slim h1 {
    font-size: clamp(1.7rem, 4.2vw, var(--step-5));
    max-width: 26ch;
}

/*
 * 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 */
.field-body input::placeholder,
.field-body textarea::placeholder,
.sheet-form input::placeholder,
.sheet-form textarea::placeholder,
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;
}

/* --------------------------------------------------- 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;
}

/* -------------------------------------------- table cells and worth-doing */

/*
 * The table rows and the recommendation cards carried their own inline
 * palette from before the restyle: bright greens and greys that sat on the
 * meter-dial ground like a different site. They take the site's own tokens
 * now.
 */

.cell-centre {
    text-align: center;
}

.cell-figure {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.table-empty {
    text-align: center;
    padding: 1.75rem;
    color: var(--muted);
}

.tip-card {
    padding: 0.9rem 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--rule);
    border-left: 4px solid var(--accent);
}

.tip-heading {
    margin: 0;
    font-size: 1rem;
}

.tip-cost {
    color: var(--muted);
    font-weight: 400;
}

.tip-advice {
    margin: 0.4rem 0 0;
    font-size: 0.95rem;
    line-height: 1.55;
}

.tip-saving {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-deep);
}