/*
 * mortgage-mate.co.uk
 *
 * Loaded after site.css, so it only has to state what changes.
 *
 * The idea: a mortgage overpayment is a thing you are shown on paper, in a
 * Key Facts Illustration or a redemption statement, and those documents have a
 * shape everybody half-remembers. Ruled columns. Lettered sections down the
 * margin. The figure that matters printed larger than everything around it,
 * because the whole point of the document is that one number. So the page is
 * set as that illustration rather than as a calculator with a form on it.
 *
 * The masthead carries the ruling off a bank ledger page with a repayment
 * curve sweeping across it, which is the only element here that could not be
 * lifted onto another site in the estate.
 *
 * What it replaces: an h1 that read "Enter Your Mortgage Details", which is a
 * form instruction promoted to a page title, and an answer set at 1.05em and
 * centred, which made the reason the site exists the same size as the tip box
 * underneath it.
 */

/* --------------------------------------------------------- token fallback */

/*
 * faq.html and guide.html never linked site.css: they carry their own inline
 * sheet and pull Tailwind off a CDN, so they were a third design again on top
 * of the two this site already had. Rather than force site.css onto a Tailwind
 * page, which is a larger change than it looks, the tokens this sheet needs are
 * declared here as a floor.
 *
 * They go on `html` rather than `:root`. Both select the same element, but
 * `:root` is the more specific of the two, so site.css keeps every one of these
 * wherever it is actually loaded and these only take effect on the pages where
 * it is not.
 */
html {
    --paper: #FBFAF8;
    --card: #FFFFFF;
    --ink: #1A1D21;
    --ink-soft: #454C54;
    --muted: #6B747E;
    --rule: #E3E0DA;
    --rule-strong: #CFCBC3;
    --accent: #7A3E2C;
    --accent-deep: #5C2E20;
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Public Sans', system-ui, sans-serif;
    --step-0: 1rem;
    --step-1: 1.2rem;
    --step-3: 1.728rem;
    --step-5: 2.488rem;
    --page: 68rem;
}

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

:root {
    /*
     * The house scale is a 1.2 ratio and tops out at 2.488rem, so nothing on
     * the page can be genuinely large and hierarchy ends up being carried by
     * font-weight alone. The top of the scale is extended rather than the
     * ratio changed, so body copy and headings stay in the same voice.
     */
    --step-6: 3.2rem;
    --step-7: 4.6rem;

    /* The ink the ledger ruling is printed in, used for rules and the strip. */
    --board: #4A2419;

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

/*
 * Small caps with tracking for anything that names a field or a section rather
 * than being read as prose. This is the page's one typographic mannerism, and
 * it does the job the old design handed to bold 14px sans.
 */
.section-mark,
.masthead-kicker,
.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';
}

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

/*
 * Full bleed, because the head of a printed statement runs to the edge of the
 * paper. The ledger texture 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/repayment-ruling.webp');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    color: #fff;
    /* A ledger header is a thin band over a lot of ruled detail. */
    padding-block: clamp(2.25rem, 6vw, 3.75rem) clamp(1.75rem, 4vw, 2.5rem);
    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;
    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.03;
    letter-spacing: -0.02em;
    max-width: 18ch;
    color: #fff;
    margin: 0;
}

.masthead-standfirst {
    margin-top: 1.1rem;
    font-size: var(--step-1);
    line-height: 1.5;
    max-width: 48ch;
    color: #fff;
    opacity: 0.9;
}

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

/*
 * An editorial grid rather than one centred column. Prose and the tool run in
 * a real measure on the right; the left margin carries the section mark, the
 * way a printed illustration letters its sections down the side. Below 60rem
 * it collapses and the mark sits above its section, which is where it reads
 * on a phone anyway.
 */
.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);
}

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

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

.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 figures you are asked for, numbered and sitting on ruled baselines
 * instead of in rounded boxes, so it reads as something to be filled in
 * rather than as six widgets in a grid.
 */
.sheet-form {
    border: 1px solid var(--rule-strong);
    border-top: 4px solid var(--accent);
    border-radius: 0;
    background: var(--card);
    padding: clamp(1.25rem, 4vw, 2.25rem);
    margin: 0;
}

.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;
    }

    /*
     * The balance outstanding runs the full width. Every other figure on the
     * form is a modifier of it, and six fields at identical width is the same
     * flat grid the redesign is trying to get away from.
     */
    .fields > li:first-child {
        grid-column: 1 / -1;
    }
}

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

.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;
}

/*
 * A ruled line, not a box. The rule takes the accent and thickens on focus,
 * which is a change of state on its own, but the outline is kept as well
 * because a colour change is not a focus indicator to anyone who cannot see
 * the colour.
 */
.sheet-form input[type='number'] {
    width: 100%;
    border: 0;
    border-bottom: 2px solid var(--rule-strong);
    border-radius: 0;
    background: transparent;
    padding: 0.35rem 0 0.45rem;
    font-family: var(--font-figure);
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    box-shadow: none;
    transition: none;
}

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

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

.sheet-form input::placeholder {
    /* --muted is #6B747E, which is 4.75:1 on white: a readable hint, not a ghost. */
    color: var(--muted);
    font-size: 0.9rem;
    font-family: var(--font-body);
}

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

.sheet-form .button-group {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.sheet-form .btn-primary {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    border-radius: 0;
    padding: 0.95rem 1.75rem;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
    transform: none;
}

.sheet-form .btn-primary:hover {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    transform: none;
    box-shadow: none;
}

.sheet-form .btn-secondary,
.sheet-form .btn-tertiary {
    background: transparent;
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    padding: 0.95rem 1.25rem;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
    box-shadow: none;
}

.sheet-form .btn-secondary:hover,
.sheet-form .btn-tertiary:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: transparent;
}

.sheet-form button:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

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

/*
 * The reason anybody is here, and previously a centred sentence at 1.05em
 * ending in an exclamation mark. It is now the largest thing on the page by a
 * long way, and it is a figure rather than a sentence, because the figure is
 * what people came to find out.
 */
.results-section {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 0;
    margin-top: 2.5rem;
}

/*
 * The answer's own label carries the heading visually, so this would be a
 * second title saying the same thing. It is hidden from the screen rather than
 * removed, because the panel is announced and a screen reader user still wants
 * a heading to land on.
 */
.results-section > h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.savings-highlight {
    display: block;
    border: 1px solid var(--rule-strong);
    border-left: 6px solid var(--accent);
    border-radius: 0;
    background: var(--card);
    padding: clamp(1.5rem, 4vw, 2.25rem);
    margin: 0;
    text-align: left;
    font-weight: 400;
    font-size: var(--step-0);
}

.answer-label {
    display: block;
    color: var(--muted);
    margin-bottom: 0.5rem;
}

.answer-figure {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 10vw, var(--step-7));
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

.answer-note {
    margin-top: 1rem;
    font-size: var(--step-1);
    line-height: 1.5;
    max-width: 46ch;
    color: var(--ink-soft);
}

.answer-note strong {
    color: var(--ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/*
 * The two scenarios side by side. A comparison is the one place on this page
 * where a table is the right answer, so it is set as one: tabular figures,
 * rules between rows, and the overpayment row given the weight because it is
 * the row being argued for.
 */
.comparison-table {
    margin-top: 2rem;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.comparison-table table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
}

.comparison-table th {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: right;
    padding: 0 0 0.6rem;
    border-bottom: 2px solid var(--ink);
    background: none;
}

.comparison-table th:first-child,
.comparison-table td:first-child {
    text-align: left;
}

.comparison-table td {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--rule);
    text-align: right;
    font-family: var(--font-figure);
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    background: none;
}

.comparison-table td:first-child {
    font-family: var(--font-body);
}

.comparison-table th + th,
.comparison-table td + td {
    padding-left: 1.25rem;
}

.comparison-table tbody tr:last-child td {
    border-bottom: 2px solid var(--ink);
    font-weight: 700;
}

.chart-container {
    margin-top: 2rem;
    border: 1px solid var(--rule);
    border-radius: 0;
    background: var(--card);
    padding: 1rem;
    box-shadow: none;
}

/* ---------------------------------------------------------- the reference */

/*
 * Everything under the tool is reference material, so it is set as reference
 * material: one measure, rules between sections, no cards. The old page gave
 * each of these its own bordered box, which made an introduction, a rule, a
 * tip and a list into four things of identical weight.
 */
.sheet h2 {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;
    max-width: 32ch;
}

.sheet h3,
.sheet h4 {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.35rem;
}

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

.faq-section,
.faq-section > * + * {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 0;
}

.faq-item {
    border: 0;
    border-top: 1px solid var(--rule);
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding-block: 1.1rem;
    margin: 0;
}

.faq-section .faq-item:last-child {
    border-bottom: 1px solid var(--rule);
}

.faq-item h4 {
    margin-top: 0;
    font-size: var(--step-0);
    font-weight: 700;
}

.faq-item p {
    margin-top: 0.3rem;
    color: var(--ink-soft);
}

/*
 * The overpayment allowance is a real constraint rather than a "tip", so it is
 * set as a note in the margin of the form instead of as a shouting box.
 */
.allowance-note {
    margin-top: 1.25rem;
    padding-left: 1rem;
    border-left: 3px solid var(--rule-strong);
    font-size: 0.9rem;
    color: var(--ink-soft);
    max-width: 52ch;
    background: none;
    border-radius: 0;
}

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

/*
 * The accent is a dark terracotta: legible on white, too close to a dark
 * ground. On dark it lifts for anything that has to be read as text or rule.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --board: #8A4E39;
    }

    :root:not([data-theme='light']) .section-mark,
    :root:not([data-theme='light']) .field-num,
    :root:not([data-theme='light']) .answer-figure {
        color: #D89A81;
    }

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

    :root:not([data-theme='light']) .savings-highlight {
        border-left-color: #D89A81;
    }
}

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

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

:root[data-theme='dark'] .savings-highlight {
    border-left-color: #D89A81;
}

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

/*
 * People print a repayment comparison to take to a lender or to sit alongside
 * their own statement, so the figures print and the furniture does not.
 */
@media print {
    .site-nav,
    .sheet-form .button-group,
    .chart-container,
    .faq-section,
    .gov-footer,
    .book-plug {
        display: none !important;
    }

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

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

    .answer-figure {
        color: #000;
    }
}

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

/*
 * A homepage with a voice and interior pages without one is the usual way this
 * kind of site gives itself away, so every page gets the same band. It is set
 * shorter here and carries no standfirst, because on a guide or an article the
 * first paragraph is the standfirst and printing two would be repeating
 * yourself.
 */
.masthead-slim {
    padding-block: clamp(1.75rem, 4.5vw, 2.75rem) clamp(1.5rem, 3.5vw, 2.25rem);
}

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

/*
 * Long-form pages are one column of prose, so they get a measure and rules
 * rather than the two column grid, which has nothing to put in its margin.
 */
.sheet > .content-card + .content-card {
    margin-top: clamp(2rem, 5vw, 3.5rem);
    padding-top: clamp(2rem, 5vw, 3.5rem);
    border-top: 1px solid var(--rule);
}

.content-card {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 0;
}

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

/*
 * site.css removes the focus outline from every input, select and textarea and
 * replaces it with a 3px ring in --accent-tint, which is a near-white wash:
 * against the white card it measures about 1.05:1, so it is not an indicator.
 * On .btn-primary, .btn-secondary and .btn-tertiary it removes the outline and
 * puts nothing back at all, which leaves a keyboard user with no way of telling
 * where they are. That is a WCAG 2.2 AA failure on 2.4.7, not a refinement.
 *
 * This restores a real indicator on everything that takes focus. It is set on
 * :focus-visible rather than :focus so a mouse click does not draw it, which is
 * the behaviour the original rules were presumably reaching 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 outline would
 * be invisible. White is the only thing guaranteed to read there, and the band
 * is never lighter than the flat accent because the texture is multiplied.
 */
.masthead a:focus-visible,
.masthead button:focus-visible {
    outline-color: #fff;
}

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

.save-status {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-deep);
}

.save-status[hidden] {
    display: none;
}