/*
 * take-home-pay.co.uk
 *
 * Loaded after site.css, so it only has to state what changes.
 *
 * The idea: the site answers a payslip question, so the page is a payslip.
 * Gross at the top, every deduction struck off down a money column ruled to the
 * right, and the figure that actually reaches the bank printed at the bottom
 * larger than anything else on the page. The masthead is the continuous
 * pin-feed stationery payslips used to come off, which is the one thing here
 * that could not be lifted onto another site.
 *
 * What it replaces: a white rounded card floating on off-white, a Title Case
 * headline, and three summary boxes of identical weight in which the monthly
 * take-home figure, the annual figure and a percentage all shouted equally
 * loudly. Only one of the three is why anyone came.
 */

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

:root {
    /*
     * The house scale is a 1.2 ratio topping out at 2.49rem, which leaves an h1
     * and an h2 nearly the same size and no room for a figure to be genuinely
     * big. The top of the scale is extended rather than the ratio changed, so
     * body copy and headings keep the voice they already had.
     */
    --step-6: 3.1rem;
    --step-7: 4.6rem;

    /*
     * Barlow Condensed, because a pay statement is set narrow: the headings
     * have to hold a whole clause on one line at a size that is actually big.
     */
    --font-display: 'Barlow Condensed', 'Arial Narrow', Helvetica, sans-serif;

    /* Payslips came off lineprinters. Every figure on this page is monospaced. */
    --font-figure: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

    --accent: #14564A;
    --accent-deep: #0E3E36;
    --accent-tint: #E7F0ED;
    --board: #0A2E28;
}

/*
 * Tracked small caps, for anything that names a field rather than saying
 * something. This is the page's one typographic mannerism and it does the job
 * the old design gave to bold 14px sans, which was doing it everywhere at once.
 */
.masthead-kicker,
.section-index,
.field-name,
.form-legend,
.payslip-label,
.ledger-head,
.payslip-secondary dt {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-feature-settings: 'tnum';
}

/* ----------------------------------------------------------- the spine */

/*
 * The sidebar stops being a list of line icons on white and becomes the spine
 * of the document: one full-height band of bottle green carrying the same
 * stationery as the masthead. It is on every page, which is what stops the
 * interior of the site going quiet the moment you leave the calculator.
 */
.app-sidebar {
    background-color: var(--accent);
    background-image: url('/img/stationery.webp');
    background-size: 1024px auto;
    background-blend-mode: multiply;
    border-right: 0;
    border-bottom: 0;
    color: #fff;
}

.sidebar-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #fff;
}

.sidebar-logo {
    color: #fff;
}

.sidebar-header {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.sidebar-link,
.sidebar-link-small {
    color: #fff;
    border-radius: 0;
    font-weight: 500;
}

.sidebar-link-small {
    /* Pure white at 0.8rem rather than a dimmed white, which would drop below AA. */
    opacity: 0.86;
}

.sidebar-link:hover,
.sidebar-link-small:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

/*
 * Current page is marked by a rule and a weight change as well as a tint, so it
 * is not carried by colour alone.
 */
.sidebar-link[aria-current] {
    background: rgba(255, 255, 255, 0.16);
    border-left: 3px solid #fff;
    color: #fff;
    font-weight: 700;
}

.sidebar-link:focus-visible,
.sidebar-link-small:focus-visible,
.dark-mode-toggle:focus-visible,
.hamburger:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.app-sidebar .dark-mode-toggle {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    border-radius: 0;
}

.app-sidebar .dark-mode-toggle:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: #fff;
}

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

/*
 * The main column stops being a 68rem box with its own padding so that bands
 * can run the full width of it. The measure comes back on the inner wrappers,
 * where it belongs.
 */
.app-main {
    max-width: none;
    padding: 0;
}

main .container {
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
    padding-block: 0 3rem;
}

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

.doc {
    padding-block: clamp(2rem, 5vw, 3.5rem) 0;
}

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

/*
 * Full bleed. The texture is multiplied over the accent rather than laid on
 * top of it, which can only darken the ground: white type on this band is never
 * worse than white on the flat accent, whatever the image turns out to be.
 * White on #14564A is 8.5:1 before the texture touches it.
 */
.masthead {
    background-color: var(--accent);
    background-image: url('/img/stationery.webp');
    background-size: 1024px auto;
    background-blend-mode: multiply;
    color: #fff;
    padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(2rem, 5vw, 3.25rem);
    border-bottom: 5px solid var(--board);
}

.masthead-kicker {
    display: block;
    color: #fff;
    opacity: 0.8;
    margin-bottom: 1.1rem;
}

.masthead h1 {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 7vw, var(--step-7));
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.005em;
    max-width: 17ch;
    color: #fff;
    text-wrap: balance;
}

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

/* --------------------------------------------------------------- the grid */

/*
 * An editorial grid instead of one centred column. Prose runs in a real measure
 * on the right and the left margin carries the section mark, which is how a
 * printed reference book tells you where you are without a heading having to
 * shout it. Below 60rem it collapses and the mark sits above its section.
 */
.doc-grid {
    display: grid;
    gap: clamp(0.75rem, 3vw, 2.5rem);
}

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

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

.section-index {
    color: var(--accent);
    padding-top: 0.4rem;
}

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

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

/*
 * Fields are numbered and sit on a ruled baseline rather than in rounded boxes,
 * so the tool reads as something you fill in rather than as a widget. The rule
 * thickens and takes the accent on focus, and the outline is kept as well,
 * because a colour change on its own is not a focus indicator.
 */
.pay-form {
    border: 1px solid var(--rule-strong);
    border-top: 5px solid var(--accent);
    background: var(--card);
    padding: clamp(1.25rem, 4vw, 2.25rem);
}

.pay-form .form-legend {
    color: var(--accent);
    margin-bottom: 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:first-child {
        grid-column: 1 / -1;
    }
}

.fields > li {
    display: grid;
    grid-template-columns: 1.7rem minmax(0, 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-name {
    display: block;
    color: var(--ink-soft);
    margin-bottom: 0.4rem;
}

.pay-form input[type='number'],
.pay-form select {
    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.05rem;
    color: var(--ink);
    box-shadow: none;
}

.pay-form select {
    font-family: var(--font-body);
    font-size: 0.98rem;
}

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

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

.pay-form input::placeholder {
    /* #6B747E on white is 4.75:1, so the hint is readable rather than a ghost. */
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 0.92rem;
}

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

.pay-form .calculate-btn {
    margin-top: 2rem;
    width: 100%;
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: 0;
    padding: 0.95rem 1.5rem;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
}

@media (min-width: 46rem) {
    .pay-form .calculate-btn {
        width: auto;
        min-width: 17rem;
    }
}

.pay-form .calculate-btn:hover {
    background: var(--accent-deep);
}

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

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

.results {
    border-top: 0;
    padding-top: 0;
    margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

/*
 * The one figure anyone came for. It was previously the same size as a section
 * heading and sat in a box between two other figures of identical weight; it is
 * now the largest thing on the site by a wide margin, in tabular numerals so it
 * does not jitter as it recalculates.
 */
.payslip {
    background: var(--accent);
    background-image: url('/img/stationery.webp');
    background-size: 1024px auto;
    background-blend-mode: multiply;
    color: #fff;
    padding: clamp(1.5rem, 4vw, 2.25rem);
}

.payslip-label {
    display: block;
    color: #fff;
    opacity: 0.8;
}

.net-figure {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--font-display);
    font-size: clamp(3rem, 12vw, var(--step-7));
    font-weight: 600;
    line-height: 0.92;
    letter-spacing: -0.02em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.payslip-secondary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: 1rem;
    margin: 1.5rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.payslip-secondary > div {
    min-width: 0;
}

.payslip-secondary dt {
    color: #fff;
    opacity: 0.8;
}

.payslip-secondary dd {
    margin: 0.25rem 0 0;
    font-family: var(--font-figure);
    font-size: var(--step-2);
    font-weight: 600;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/*
 * The deductions, set as the money column of a statement: label left, figure
 * right on a ruled baseline, every figure in the same monospace so the columns
 * line up the way they do on paper. No boxes.
 */
.ledger {
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.ledger-head {
    color: var(--accent);
    margin: 0 0 0.5rem;
}

.breakdown,
.breakdown-item,
.result-item {
    background: none;
    border-radius: 0;
    box-shadow: none;
    padding-inline: 0;
}

.breakdown-item,
.result-item {
    padding-block: 0.5rem;
    border-bottom: 1px solid var(--rule);
}

.breakdown-label {
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.breakdown-value {
    font-family: var(--font-figure);
    font-size: 1rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.breakdown-value.negative {
    color: var(--bad);
}

.breakdown-item.highlight,
.result-item.highlight {
    border-top: 2px solid var(--ink);
    border-bottom: 0;
    padding-top: 0.7rem;
}

.breakdown-item.highlight .breakdown-value {
    font-size: var(--step-2);
    font-weight: 700;
}

/* ------------------------------------------------- retiring the box rule */

/*
 * Fourteen class names all resolved to one white box with a 1px border, a 10px
 * radius and a soft shadow, which is why an answer, an aside and a blog teaser
 * carried exactly the same visual weight. Everything that is reference material
 * gets rules and space instead, and the shadow goes entirely: nothing on a
 * printed page floats.
 */
.info-section,
.content-card,
.info-card,
.faq-card,
.card,
.result-box,
.email-box,
.contact-box,
.faq-section,
.summary-card,
.info-box {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

/*
 * An aside is still an aside, so it keeps a mark. A rule in the accent down its
 * left edge says the same thing a bordered box said, without competing with the
 * answer for weight.
 */
.info-box {
    border-left: 4px solid var(--accent);
    padding: 0.2rem 0 0.2rem 1rem;
    margin-block: 1.25rem;
    color: var(--ink-soft);
}

.article-card,
.blog-card,
.history-item {
    background: none;
    border: 0;
    border-top: 1px solid var(--rule-strong);
    border-radius: 0;
    box-shadow: none;
    padding: 0.9rem 0 1.1rem;
}

.article-card:hover,
.blog-card:hover {
    border-top-color: var(--accent);
    box-shadow: none;
}

.blog-grid,
.related-grid,
.card-grid {
    gap: 0 2rem;
}

/* --------------------------------------------------- reference typography */

.reference h2,
.info-section h2 {
    font-family: var(--font-display);
    font-size: var(--step-4);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: 0;
    margin-bottom: 0.6rem;
    max-width: 26ch;
}

.reference h3,
.info-section h3 {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 600;
    margin-top: 1.6rem;
    margin-bottom: 0.3rem;
}

.reference p,
.reference li,
.info-section p,
.info-section li {
    max-width: 66ch;
}

/*
 * The tax bands are a table of figures, so they are set as one: ruled rows with
 * the rate in the money column, rather than four bordered boxes side by side
 * that made a reference table look like a pricing page.
 */
.tax-bands {
    display: block;
    margin-top: 1rem;
    border-top: 2px solid var(--ink);
}

.tax-band {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) minmax(0, 1.2fr) 4rem;
    gap: 0.35rem 1rem;
    align-items: baseline;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: none;
    padding: 0.7rem 0;
}

.tax-band strong {
    font-weight: 700;
}

.tax-band > div:not(.rate) {
    font-family: var(--font-figure);
    font-size: 0.88rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.tax-band .rate {
    grid-row: 1 / span 2;
    grid-column: 3;
    justify-self: end;
    align-self: center;
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 34rem) {
    .tax-band {
        grid-template-columns: minmax(0, 1fr) 3.5rem;
    }

    .tax-band .rate {
        grid-column: 2;
    }
}

/* ------------------------------------------------ the interior page heads */

/*
 * Interior pages get a chapter opener rather than the cover: the same tracked
 * caps and the same accent rule, at the weight a section deserves. The band
 * itself belongs to the homepage, but the voice carries.
 */
.page-header,
.header-section,
main .container > header {
    padding-block: clamp(2rem, 5vw, 3rem) 0;
    border-top: 5px solid var(--accent);
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.page-header h1,
.header-section h1,
main .container > header h1 {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 6vw, var(--step-6));
    font-weight: 600;
    line-height: 1.02;
    max-width: 20ch;
    margin-top: 0.75rem;
}

.page-header p,
.header-section p,
main .container > header p {
    font-size: var(--step-1);
    max-width: 52ch;
    color: var(--ink-soft);
}

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

/*
 * Bottle green is dark enough to be legible against white but sits too close to
 * a dark ground, so anything that has to read as text or as a rule lifts to a
 * paler green on dark.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --accent-tint: #16241F;
        --board: #2B7A69;
    }

    :root:not([data-theme='light']) .section-index,
    :root:not([data-theme='light']) .field-num,
    :root:not([data-theme='light']) .ledger-head,
    :root:not([data-theme='light']) .pay-form .form-legend,
    :root:not([data-theme='light']) .tax-band .rate {
        /* #6FBFAB on #1B1F24 is 7.6:1. */
        color: #6FBFAB;
    }

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

:root[data-theme='dark'] .section-index,
:root[data-theme='dark'] .field-num,
:root[data-theme='dark'] .ledger-head,
:root[data-theme='dark'] .pay-form .form-legend,
:root[data-theme='dark'] .tax-band .rate {
    color: #6FBFAB;
}

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

/*
 * site.css removes the outline from the inputs and from the button that gives
 * the answer, and in two of the three places it puts nothing back at all, so
 * those controls have no visible focus for anyone using a keyboard. The
 * selectors below match its specificity exactly and load after it, which is
 * what makes the outline come back. This lives here rather than in site.css
 * because that file is generated boilerplate shared across the estate.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="number"]:focus-visible,
.calculate-btn:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

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

/*
 * People print a take-home figure to put in with a budget or a job offer, so
 * the figure prints and the chrome does not.
 */
@media print {
    .app-sidebar,
    .hamburger,
    .app-footer,
    .book-plug {
        display: none !important;
    }

    .app-layout {
        display: block;
    }

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

    .masthead h1,
    .masthead-standfirst,
    .masthead-kicker,
    .payslip-label,
    .net-figure,
    .payslip-secondary dt,
    .payslip-secondary dd {
        color: #000;
        opacity: 1;
    }
}

/*
 * 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 */
.pay-form input::placeholder,
.pay-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 messages */

/*
 * These replaced alert(). A modal dialog stops the page, loses the user's
 * place on a phone, and says nothing about which field it is complaining
 * about. role="alert" on the slot gets the message read out where it sits.
 */
.field-error {
    display: none;
    margin-top: 0.45rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.35;
    color: #A8251B;
}

.field-error.show {
    display: block;
}

.pay-form input[aria-invalid='true'],
.pay-form select[aria-invalid='true'] {
    border-color: #A8251B;
}

@media (prefers-color-scheme: dark) {
    .field-error {
        color: #F2A9A2;
    }
}

body.dark-mode .field-error {
    color: #F2A9A2;
}

/* ------------------------------------------------------- result actions */

.result-actions {
    margin-top: 1.6rem;
}

.result-action {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 0.7rem 1.2rem;
    color: var(--accent);
    background: none;
    border: 2px solid var(--accent);
    cursor: pointer;
}

.result-action:hover {
    color: #fff;
    background: var(--accent);
}

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

/*
 * A take-home figure is something people carry into a conversation about a
 * job offer, so the page has to survive being put on paper: the payslip and
 * both ledgers, nothing else.
 */
@media print {
    .app-sidebar,
    .sidebar,
    .hamburger,
    .dark-mode-toggle,
    .masthead-standfirst,
    .pay-form,
    .info-section,
    .book-plug,
    .result-actions,
    footer,
    nav {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .app-main,
    .container,
    .doc {
        margin: 0;
        padding: 0;
        max-width: none;
    }

    .results {
        display: block !important;
        break-inside: avoid;
    }

    .net-figure {
        color: #000;
    }

    a[href]::after {
        content: '';
    }
}