/*
 * redundancy-pay-calculator.co.uk
 *
 * Loaded after site.css, so it only states what changes.
 *
 * The idea: statutory redundancy pay is a ready reckoner, not a percentage.
 * The law does not care what you earn. It counts each completed year, pays
 * half a week, one week or a week and a half for it depending on how old you
 * were in that year, and caps a week's pay. That is a table, and the page is
 * set as the cash book it comes out of: bottle green board, the column ruling
 * of a hard-bound ledger across the masthead, the age bands printed as an
 * actual ruled reckoner rather than three identical badges, and the years
 * walked back one bracket at a time in a column of figures.
 *
 * Register matters here more than on the other four. People arrive at this
 * page on the day they were told, and a cheerful product voice is the wrong
 * thing to meet them with. Nothing on the page congratulates anybody.
 *
 * What it replaces: a centred hero half full of empty space, a white rounded
 * card holding the form, three identical pill badges, and an answer set at
 * roughly the size of a section heading.
 */

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

:root {
    /*
     * The house scale tops out at 2.488rem on a 1.2 ratio, which leaves an h1
     * and an h2 almost the same size and hierarchy carried only by weight.
     * The top of the scale is extended rather than the ratio changed, so body
     * copy still sits in the same voice as its headings.
     */
    --step-6: 3.1rem;
    --step-7: 4.2rem;

    --font-figure: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* The ledger board. Dark enough to carry white type at 10:1. */
    --board: #12332A;
}

/*
 * Field names, column heads and section marks. Anything that labels a number
 * rather than being prose. One mannerism, used consistently, doing the job
 * the old design gave to bold 14px sans in fourteen different places.
 */
.field-name,
.masthead-kicker,
.section-index,
.answer-label,
.reckoner caption,
.reckoner th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-feature-settings: 'tnum';
}

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

/*
 * Full bleed. The ledger ruling is multiplied over the board rather than laid
 * on top of it, which can only darken the ground: white type here is never
 * worse than white on the flat colour, whatever the pattern does at a given
 * point. White on #1C4A3A is 10.05:1 before the texture touches it.
 */
.masthead {
    background-color: var(--accent);
    background-image: url('/img/ledger.webp');
    background-size: 560px 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-inner {
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

.masthead-kicker {
    color: #fff;
    opacity: 0.78;
    margin: 0 0 1.25rem;
}

.masthead h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5.4vw, var(--step-6));
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -0.02em;
    max-width: 18ch;
    color: #fff;
    margin: 0;
    text-wrap: balance;
}

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

/* --------------------------------------------------------- the main body */

/*
 * The page's own wrapper becomes the document measure. The masthead sits
 * outside it so it can bleed.
 */
.container {
    counter-reset: reference;
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
    padding-block: clamp(2rem, 5vw, 3.25rem) 4rem;
}

/*
 * An editorial grid instead of one centred column. The margin column carries
 * the section mark and nothing else; prose runs in a real measure beside it.
 * Below 60rem it collapses and the mark sits above its section, which is
 * where it reads on a phone anyway.
 */
.doc-grid {
    display: grid;
    gap: clamp(0.85rem, 3vw, 2.5rem);
}

@media (min-width: 60rem) {
    .doc-grid {
        grid-template-columns: 10rem 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);
    margin: 0;
    padding-top: 0.45rem;
    line-height: 1.4;
}

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

.doc-prose > * + * {
    margin-top: 1rem;
}

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

.doc-prose .lede {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--ink);
}

.doc-prose h3 {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    margin-top: 1.75rem;
    margin-bottom: 0.3rem;
}

.notes {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
}

.notes li {
    border-top: 1px solid var(--rule);
    padding-block: 0.7rem;
}

.notes li:last-child {
    border-bottom: 1px solid var(--rule);
}

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

/*
 * Three numbers on ruled baselines, numbered down the left the way a claim
 * form numbers its boxes. Not a floating white card: a top rule in the
 * accent, a hairline round the rest, and no shadow at all.
 */
.doc-form {
    border: 1px solid var(--rule-strong);
    border-top: 5px solid var(--accent);
    background: var(--card);
    padding: clamp(1.25rem, 4vw, 2.25rem);
    border-radius: 0;
    box-shadow: none;
}

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

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

    .fields > li:last-child {
        grid-column: 1 / -1;
    }
}

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

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

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

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

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

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

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

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

.field-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--muted);
    max-width: 40ch;
}

/*
 * The statutory rule itself, printed as the reckoner it is. Previously three
 * identical rounded badges, which made a table of law look like a feature
 * list.
 */
.reckoner {
    width: 100%;
    margin-top: 2rem;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.reckoner caption {
    text-align: left;
    color: var(--muted);
    padding-bottom: 0.5rem;
}

.reckoner th,
.reckoner td {
    border-top: 1px solid var(--rule);
    padding: 0.55rem 0;
    text-align: left;
    vertical-align: baseline;
}

.reckoner tr:last-child th,
.reckoner tr:last-child td {
    border-bottom: 1px solid var(--rule);
}

.reckoner th {
    color: var(--ink-soft);
    font-weight: 700;
    letter-spacing: 0.08em;
    width: 55%;
}

.reckoner td {
    font-family: var(--font-figure);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.calculate-btn {
    display: block;
    margin-top: 2rem;
    width: 100%;
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: 0;
    padding: 0.95rem 1.5rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
}

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

.calculate-btn:hover {
    background: var(--board);
}

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

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

/*
 * The reason anybody is here, and previously about the size of a section
 * heading. It is now the largest thing on the page by a distance, set in
 * tabular figures so the digits line up, on the board colour so it reads as
 * the printed total at the foot of a ledger column.
 */
.results {
    display: none;
    margin-top: 2.5rem;
}

.results.show {
    display: block;
}

.answer {
    background: var(--board);
    color: #fff;
    padding: clamp(1.5rem, 5vw, 2.5rem);
}

.answer-label {
    margin: 0 0 0.6rem;
    color: #fff;
    opacity: 0.72;
}

.answer-figure {
    margin: 0;
    font-family: var(--font-figure);
    font-size: clamp(2.6rem, 11vw, var(--step-7));
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

/*
 * The year by year walk. A column of figures with the total ruled off above
 * it, which is what a redundancy calculation on paper actually looks like.
 */
.breakdown {
    border: 1px solid var(--rule-strong);
    border-top: 0;
    background: var(--card);
    padding: clamp(1.25rem, 4vw, 2rem);
    border-radius: 0;
    box-shadow: none;
}

.breakdown h3 {
    margin: 0 0 0.9rem;
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--rule);
    font-size: 0.92rem;
}

.breakdown-label {
    color: var(--ink-soft);
}

.breakdown-value {
    font-family: var(--font-figure);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--ink);
}

/*
 * The script rules the total off with an inline red border it inherited from
 * the old design. Overridden here rather than in the script, because the
 * script is doing a statutory sum and is not worth touching for a colour.
 */
.breakdown .breakdown-item[style] {
    border-top: 2px solid var(--accent) !important;
}

.success,
.warning {
    margin-top: 1.5rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--rule-strong);
    border-left: 5px solid var(--accent);
    border-radius: 0;
    background: var(--card);
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--ink-soft);
    box-shadow: none;
}

.success strong,
.warning strong {
    color: var(--ink);
}

/* State is carried by the rule and by the wording, never by colour alone. */
.warning {
    border-left-color: var(--bad);
}

/* ------------------------------------------------------- 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 put
 * each of fifteen sections in its own bordered box, so an aside about
 * Jobcentre Plus carried the same visual weight as the answer.
 */
.info-section {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

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

/*
 * The reference sections are numbered down a hanging margin, the way a printed
 * guide numbers its clauses. The number comes from a CSS counter rather than
 * from the markup, so nothing has to be renumbered by hand when a section is
 * added or moved. Below 60rem the margin closes up and the number sits above
 * its heading.
 */
.info-section {
    counter-increment: reference;
    position: relative;
}

@media (min-width: 60rem) {
    .info-section {
        padding-left: 11rem;
    }
}

.info-section 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.7rem;
    max-width: 30ch;
}

.info-section h2::before {
    content: counter(reference, decimal-leading-zero);
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-figure);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

@media (min-width: 60rem) {
    .info-section h2::before {
        position: absolute;
        left: 0;
        width: 9rem;
        margin: 0;
        padding-top: 0.5rem;
        text-align: right;
        border-top: 2px solid var(--accent);
    }
}

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

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

/*
 * Kept, because people do read them, but set as an indented note against a
 * rule rather than as another white box competing with the answer.
 */
.info-box {
    background: none;
    border: 0;
    border-left: 3px solid var(--rule-strong);
    border-radius: 0;
    box-shadow: none;
    padding: 0.2rem 0 0.2rem 1.25rem;
    margin: 1.25rem 0;
}

.age-badges {
    display: grid;
    gap: 0;
    margin: 1.25rem 0;
}

.age-badge {
    background: none;
    border: 0;
    border-top: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: none;
    padding: 0.6rem 0;
    font-size: 0.94rem;
    color: var(--ink-soft);
}

.age-badge:last-child {
    border-bottom: 1px solid var(--rule);
}

.age-badge strong {
    display: inline-block;
    min-width: 9rem;
    color: var(--ink);
    font-weight: 700;
    letter-spacing: 0.04em;
}

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

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

    :root:not([data-theme='light']) .section-index,
    :root:not([data-theme='light']) .field-num {
        /* #74B79C on #14161A is 8.0:1. */
        color: #74B79C;
    }

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

    :root:not([data-theme='light']) .calculate-btn:hover {
        background: #2B6B54;
    }
}

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

:root[data-theme='dark'] .section-index,
:root[data-theme='dark'] .field-num {
    color: #74B79C;
}

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

/*
 * People print this to take to a meeting or to check against what they were
 * offered, so the figure and the working print and the furniture does not.
 */
@media print {
    .site-nav,
    .breadcrumb-nav,
    .editorial-footer,
    .book-plug,
    ins.adsbygoogle {
        display: none !important;
    }

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

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

    .answer {
        background: none;
        border: 2px solid #000;
    }

    .answer-figure,
    .answer-label {
        color: #000;
        opacity: 1;
    }
}

/* --------------------------------------------------------- inside pages */

/*
 * The interior pages carried no identity at all: the same white cards on the
 * same off-white, with the page title set as an ordinary heading inside the
 * column. They now open on the same band as the homepage, quieter, so the
 * guide and the calculator read as one document rather than two sites.
 */
.masthead--page {
    padding-block: clamp(1.75rem, 4.5vw, 2.75rem) clamp(1.5rem, 3.5vw, 2rem);
    border-bottom-width: 4px;
}

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

/*
 * Fourteen class names resolved to one white, 1px, 10px-radius, soft-shadowed
 * box, so an answer, an aside and a blog teaser carried identical weight. They
 * are all reduced to rules and space, and weight is carried by type instead.
 */
.article,
.content-section,
.resource-card {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.content-section + .content-section,
.resource-card + .resource-card {
    margin-top: clamp(2rem, 4.5vw, 3rem);
    padding-top: clamp(2rem, 4.5vw, 3rem);
    border-top: 1px solid var(--rule);
}

.article h2,
.content-section h2 {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    max-width: 30ch;
}

.article h3,
.content-section h3 {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    margin-top: 1.6rem;
    margin-bottom: 0.3rem;
}

.article p,
.article li,
.content-section p,
.content-section li {
    max-width: 66ch;
}

/*
 * The blog index. Teasers are a ruled list, which is what a contents page is,
 * rather than a grid of shadowed tiles competing with one another.
 */
.article-card {
    background: none;
    border: 0;
    border-top: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: none;
    padding: 1.4rem 0 1.5rem;
    margin: 0;
}

.article-card:last-of-type {
    border-bottom: 1px solid var(--rule);
}

.article-card h2,
.article-card h3 {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 700;
    line-height: 1.2;
    margin: 0.2rem 0 0.4rem;
    max-width: 38ch;
}

.article-card-tag,
.article-date {
    font-family: var(--font-figure);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.read-more {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}

/* The FAQ is a ruled list of questions, not a stack of boxes. */
.faq-item {
    background: none;
    border: 0;
    border-top: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: none;
    padding: 1.1rem 0;
    margin: 0;
}

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

.faq-item > h2,
.faq-item > h3 {
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 700;
    margin: 0 0 0.3rem;
}

.faq-item p,
.faq-item li {
    color: var(--ink-soft);
    max-width: 66ch;
}

/*
 * Utility classes left behind by a framework the sites no longer load. They
 * are inert, but the grey text colours would fight the palette if Tailwind
 * were ever restored, so the ones that set colour are neutralised here.
 */
.text-gray-900,
.text-gray-800,
.text-gray-700,
.text-gray-600 {
    color: inherit;
}

.bg-white {
    background: none;
}

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

/*
 * site.css removes the outline on :focus for inputs, selects, textareas and
 * buttons. For anyone navigating by keyboard that is a 2.4.7 failure, and the
 * rules above only put it back on the controls this restyle touched: the
 * textarea on the contact form was left with no indicator at all. This is the
 * backstop for everything focusable, and it is last in the file so it wins on
 * order against the equal-specificity rules in site.css.
 */
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;
}

/*
 * 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 */
.doc-form input::placeholder,
.doc-form textarea::placeholder,
.field-body input::placeholder,
.field-body 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 stops the page, loses your place on a
 * phone, and never says which field it is about. role="alert" on the slot
 * gets the message announced 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;
}

input[aria-invalid='true'],
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 redundancy figure gets carried into a meeting with an employer, so the
 * result, the year-by-year breakdown and the caveats have to survive being
 * put on paper. Everything that is navigation or sales copy does not.
 */
@media print {
    .app-sidebar,
    .sidebar,
    .hamburger,
    .dark-mode-toggle,
    .masthead-standfirst,
    .calculate-btn,
    .result-actions,
    .book-plug,
    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;
    }

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