/*
 * childcare-calculator.co.uk: the register restyle
 *
 * The tool works out what childcare costs a week, a month and a year, and
 * what Tax-Free Childcare pays back, so the page borrows the form a nursery
 * already uses for that arithmetic: a weekly attendance register and a
 * funding claim. Loaded after site.css, so anything below wins the cascade
 * on selectors of equal weight without needing !important.
 */

:root {
    /* Bottle green, the colour of a register cover. Verified: 8.41:1 white
       on this, both ways, and 7.37:1 as link text on the paper below. */
    --accent: #20573F;
    --accent-deep: #163D2C;
    --accent-tint: #E2EBE3;
    --accent-ink: #FFFFFF;

    /* Register stock rather than the house's warmer off-white. */
    --paper: #EDF1EC;

    /* The house --muted (#6B747E) measures 4.16:1 on this paper, under AA.
       This is 4.87:1 on paper and 5.56:1 on white. */
    --muted: #616A6A;

    /* Decorative divider only; no contrast requirement. Tinted fractionally
       towards the paper rather than the house's warm grey, so hairlines
       don't read as a leftover from the old orange theme. */
    --rule: #D9DFD5;

    /*
     * --rule-strong does three different jobs in site.css: a field border, a
     * decorative divider, and in two places a text and a background colour.
     * Darkening the token itself to clear SC 1.4.11 fixes the field and makes
     * the other nine uses into near-black bars, so the boundary is split out
     * instead. --rule-strong stays decorative and is only retuned to the green
     * stock; --field-rule is the one that has to be legible as a boundary.
     */
    --rule-strong: #B4BEB6;

    /* 5.56:1 on the card and 4.87:1 on the paper, so it clears the 3:1 that
       SC 1.4.11 asks of a boundary that is the only thing marking the field. */
    --field-rule: #616A6A;

    /* The masthead sits on a photographic ground, so its ink is tokenised
       separately from the page ink and re-set for dark mode below. */
    /*
     * The masthead keeps its own ground and ink in BOTH themes, and they do
     * not follow --accent.
     *
     * The band is the accent with the register artwork multiplied over it, and
     * multiply can only darken. That is a guarantee for light type and a trap
     * for dark type: when the accent lifts for dark mode and the ink goes dark
     * to suit it, the texture then darkens the ground underneath that dark ink.
     * Measured, the headline fell to 2.34:1 and the kicker to 1.71:1 over the
     * darkest pixel of the artwork, against 6.78:1 and 4.97:1 on the flat
     * colour, which is why testing the flat accent alone is not enough.
     *
     * Holding the band at the bottle green with white on it keeps the
     * guarantee in both themes: 8.41:1 flat, 14.64:1 at the darkest pixel.
     */
    --masthead-bg: #20573F;
    --masthead-ink: #FFFFFF;
    --masthead-muted: #DCEAE1;

    /*
     * One grotesque, not two. site.css's own theme block further down sets
     * --font-display to Bitter; both tokens are redeclared here so nothing
     * upstream of this file can reintroduce it through the variable.
     */
    --font-display: 'Source Sans 3', system-ui, sans-serif;
    --font-body: 'Source Sans 3', system-ui, sans-serif;

    /* Same 1.2 ratio as the house scale, carried two steps further up so the
       annual figure can be the largest thing on the page. */
    --step-6: 3.1rem;
    --step-7: 4.6rem;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        /* Lifted to a light green: the flat #20573F only measures 2.4:1 on
           the house's dark paper, which is why it moves rather than staying
           put with darker text on top of it. */
        --accent: #5FAE82;
        --accent-deep: #4C9670;
        --accent-tint: #1B2A22;
        /* White on the lifted accent measures 2.67:1. The dark paper colour
           on it measures 6.78:1, so the ink swaps rather than the accent. */
        --accent-ink: #14161A;
        --rule-strong: #39423B;
        --field-rule: #8E9A90;
    }
}

:root[data-theme='dark'],
body.dark-mode {
    --accent: #5FAE82;
    --accent-deep: #4C9670;
    --accent-tint: #1B2A22;
    --accent-ink: #14161A;
    --rule-strong: #39423B;
    --field-rule: #8E9A90;
}

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

h1,
h2,
h3,
h4 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1 {
    font-size: clamp(var(--step-4), 5vw, var(--step-5));
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* The h1 gets a rule rather than a colour change, so it reads as a form
   heading rather than a coloured headline. */
.register-section-body > h1:first-child,
.register-section-body > header:first-child > h1,
.content-card > h1:first-child,
article > h1:first-child {
    padding-top: 0.15em;
    border-top: 3px solid var(--accent);
}

.section-mark,
.masthead-kicker,
.register-week-kicker {
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------- layout */

/*
 * The editorial grid: a narrow margin carrying the section mark, content set
 * to a readable measure beside it. One column below 62rem, the mark moving
 * back into the reading order as a small label above the heading.
 */
.register-section {
    display: grid;
    grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 4vw, 2.5rem);
    align-items: start;
}

.register-section + .register-section {
    margin-top: calc(var(--space) * 3);
    padding-top: calc(var(--space) * 2.5);
    border-top: 1px solid var(--rule);
}

.section-mark {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding-top: 0.35em;
    color: var(--muted);
}

.register-section-body {
    grid-column: 2;
    min-width: 0;
}

.register-section-body > * + * {
    margin-block-start: calc(var(--space) * 2);
}

@media (max-width: 62rem) {
    .register-section {
        display: block;
    }

    .section-mark {
        display: block;
        margin-block-end: 0.6rem;
        padding-top: 0;
    }
}

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

.masthead {
    background-color: var(--masthead-bg);
    background-image: url('/img/register.webp');
    background-size: 640px auto;
    background-blend-mode: multiply;
    color: var(--masthead-ink);
    padding-block: clamp(2.75rem, 7vw, 4.5rem);
}

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

.masthead-kicker {
    margin: 0 0 1rem;
    color: var(--masthead-muted);
}

.masthead h1 {
    margin: 0;
    color: var(--masthead-ink);
    border-top: 0;
    padding-top: 0;
    max-width: 20ch;
    font-size: clamp(var(--step-5), 6vw, var(--step-6));
}

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

/* ------------------------------------------------------------------ cards */

/*
 * Retiring the card: every box on the page loses its corner radius and its
 * shadow. What is left is a flat panel picked out by rule and space instead,
 * which is the printed-form register look rather than a floating card.
 */
.calculator-card,
.content-card,
.info-card,
.cost-card,
.savings-card,
.history-card,
.info-section,
.feature-card,
.multi-child-card,
.comparison-card,
.provider-column,
.child-list-item,
.contact-box,
.faq-item,
.article-card,
.summary-card,
.result-box,
.balance-card {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.calculator-card {
    border: 0;
    border-top: 3px solid var(--accent);
    padding-inline: 0;
    padding-block: clamp(1.5rem, 3vw, 2rem) 0;
}

.cost-card,
.provider-column,
.multi-child-card,
.comparison-card,
.child-list-item {
    border-style: solid;
    border-color: var(--rule);
}

/* The house hover state brings the shadow back on a more specific selector;
   the shadow stays retired, the border darkening is kept as the hover cue. */
.article-card:hover,
.blog-card:hover {
    box-shadow: none;
}

[class*='-btn'],
[class*='-button'],
.btn,
.btn-primary,
.btn-secondary,
.back-link,
button,
button[type='submit'],
input[type='text'],
input[type='number'],
input[type='email'],
input[type='tel'],
input[type='date'],
input[type='search'],
select,
textarea {
    border-radius: 0;
}

/* ---------------------------------------------------------------- fields */

/*
 * Form labels set as field names on a paper form: tracked capitals rather
 * than the house's sentence-case bold, so the tool reads as a form being
 * filled in rather than a web app.
 */
.calculator-card label,
.provider-column label,
.multi-child-card label,
.tax-free-toggle > label {
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.result-label,
.summary-label,
.breakdown-label,
.balance-label,
.cost-card .label,
.savings-card .label {
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.tax-free-toggle {
    border-width: 1px;
    border-color: var(--rule-strong);
    padding: clamp(1rem, 3vw, 1.5rem);
}

/*
 * Two page-specific rules further down site.css set a numeric input's border
 * to the decorative --rule rather than the house --rule-strong, and the
 * provider comparison fields do the same through their own class. Both are
 * the sole visual boundary of a field, so both need the accessible colour.
 */
input[type='number'],
.provider-column input,
.provider-column select {
    border-color: var(--field-rule);
}

.toggle-option input[type='radio'],
input[type='radio'],
input[type='checkbox'] {
    accent-color: var(--accent);
}

/* ---------------------------------------------------------------- figures */

/*
 * The weekly and monthly costs stay at the house size; the annual cost and
 * the Tax-Free Childcare saving are the two answers someone came here for,
 * so they get the top of the scale and tabular digits so the figure doesn't
 * jump about as it recalculates.
 */
.amount,
.result-value,
#annualCost,
#annualSavings {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

#annualCost,
#annualSavings,
.multi-total {
    font-size: clamp(var(--step-5), 7vw, var(--step-7));
    line-height: 1.05;
}

#annualSavings {
    font-size: clamp(var(--step-4), 6vw, var(--step-6));
    color: var(--accent-deep);
}

.result-item#netCostRow,
.result-item:has(#annualCost) {
    border-top: 2px solid var(--ink);
    border-bottom: 0;
    padding-top: 1rem;
    margin-top: 0.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

/* ------------------------------------------------------------ ruled week */

/*
 * The distinguishing device: hours entered against the week, ruled off to a
 * total, the way a register does it rather than a plain summary table. The
 * daily figure is the entered weekly hours spread evenly across a five-day
 * week; the total column is the real total, not a separate calculation.
 */
.register-week {
    margin-top: 1.5rem;
    border-top: 1px solid var(--field-rule);
    border-bottom: 1px solid var(--field-rule);
    padding-block: 0.75rem;
}

.register-week-kicker {
    display: block;
    margin-bottom: 0.6rem;
    color: var(--muted);
}

.register-week-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr) auto;
}

.register-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.5rem;
    border-left: 1px solid var(--rule);
    text-align: center;
}

.register-day:first-child {
    border-left: 0;
}

.register-day-name {
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.register-day-hours {
    font-family: var(--font-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.register-day-total {
    border-left: 2px solid var(--ink);
    padding-inline-start: 0.9rem;
}

.register-day-total .register-day-name {
    color: var(--ink);
}

.register-day-total .register-day-hours {
    color: var(--accent-deep);
}

@media (max-width: 34rem) {
    .register-week-row {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 0.5rem;
    }

    .register-day-total {
        grid-column: 1 / -1;
        border-left: 0;
        border-top: 2px solid var(--ink);
        padding-inline-start: 0;
        padding-top: 0.5rem;
    }
}

/* --------------------------------------------------------------- results */

.result-item {
    border-bottom-color: var(--rule);
}

.best-badge {
    border: 1px solid currentColor;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------- callouts */

.info-box,
.highlight-box,
.note,
.cta-box {
    border-radius: 0;
}

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

/*
 * The house rule replaces the native outline on :focus with a border colour
 * change and a soft box-shadow, which fails for anyone tabbing through the
 * form: a colour change alone isn't a visible indicator. Restoring a real
 * outline on :focus-visible fixes the keyboard case without touching the
 * softer ring a mouse click still gets.
 */
input:focus-visible,
input[type='number']:focus-visible,
select:focus-visible,
textarea:focus-visible,
.calculate-btn:focus-visible,
.calculate-multi-btn:focus-visible,
.compare-btn:focus-visible,
[class*='-btn']:focus-visible,
[class*='-button']:focus-visible {
    outline: 2px solid var(--accent-deep);
    outline-offset: 2px;
}

/* ----------------------------------------------------------- content-card */

/*
 * This site's interior pages don't use .content-card, but the token and h1
 * treatment above apply automatically if a page ever adds one.
 */
.content-card {
    border: 0;
    padding-inline: 0;
}

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

/* ------------------------------------------------------- inline messages */

/*
 * The calculator used to talk through alert(), confirm() and prompt(). Those
 * are announced by a screen reader as a system dialogue rather than as an
 * error on the field that caused it, they cannot be styled, and on iOS they
 * steal focus away from the form. The messages are now text in the page.
 *
 * --error is set here rather than reusing the house --bad, which is not
 * overridden for dark mode and measures 2.54:1 on the dark paper.
 */
:root {
    /* 8.31:1 on the register stock. */
    --error: #8A1C1C;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        /* 7.7:1 on the dark paper. */
        --error: #F0938C;
    }
}

:root[data-theme='dark'],
body.dark-mode {
    --error: #F0938C;
}

.form-error {
    color: var(--error);
    font-weight: 600;
    margin-block: 0.75rem 0;
    min-height: 1.4em;
}

.form-error:empty {
    margin-block: 0;
    min-height: 0;
}

[hidden] {
    display: none !important;
}

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

/* ------------------------------------------------------------ form fields */

.toggle-legend {
    display: block;
    font-weight: 600;
}

.toggle-help,
.comparison-note {
    color: var(--muted);
    font-size: var(--step--1);
    margin-block: 0.35rem 0.75rem;
    max-width: 62ch;
}

.child-input-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.child-input-field label {
    font-size: var(--step--1);
    font-weight: 600;
}

.save-calc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.save-calc-label {
    display: block;
    font-size: var(--step--1);
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.save-calc-row input {
    flex: 1 1 14rem;
    min-width: 0;
}

/* ------------------------------------------------------- saved scenarios */

/*
 * A saved scenario reloads the form, so it is a button rather than a div with
 * a click handler: it was previously unreachable by keyboard and announced as
 * nothing at all.
 */
.history-items,
.child-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.history-item {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    border-bottom: 1px solid var(--rule);
    padding-block: 0.5rem;
}

.history-load {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: left;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    padding: 0.5rem;
    cursor: pointer;
}

.history-load:hover {
    background: var(--accent-tint);
}

.history-item-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
}

.history-details,
.child-info {
    color: var(--muted);
    font-size: var(--step--1);
}

.history-cost {
    font-weight: 600;
}

.child-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.child-details {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.child-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* -------------------------------------------------------- results blocks */

.multi-child-results h4 {
    text-align: center;
    margin-bottom: 0.75rem;
}

.multi-funded,
.multi-savings-note {
    color: var(--muted);
    font-size: var(--step--1);
    text-align: center;
}

.multi-child-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem;
    text-align: center;
}

.multi-child-totals > div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem;
}

.multi-figure {
    font-size: var(--step-2);
    font-weight: 700;
}

.multi-child-annual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding-block: 1rem;
}

.multi-savings {
    text-align: center;
    padding: 0.75rem;
}

.multi-savings-amount,
.multi-savings-net {
    font-weight: 700;
    margin: 0.2rem 0;
}

.multi-savings-net {
    font-size: var(--step-1);
}

.provider-terms {
    color: var(--muted);
    font-size: var(--step--1);
}

.provider-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.35rem 0;
}

.provider-weekly {
    font-weight: 700;
}

.provider-extra {
    display: inline-block;
    font-size: var(--step--1);
    margin-top: 0.5rem;
}

.provider-result h4 {
    overflow-wrap: anywhere;
}

.comparison-verdict {
    border: 2px solid var(--rule-strong);
    margin-top: 1.25rem;
    padding: 1rem;
}

/* ------------------------------------------------------------ brand mark */

/*
 * The mark is not an icon from the shared set and never will be, so it does
 * not carry svg.icon: the design build refreshes those from a registry and
 * would rewrite this one back to whatever it holds. Same sizing and weight,
 * its own class.
 */
.brand-mark {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.135em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.brand-mark-lg {
    width: 1.35em;
    height: 1.35em;
}


/* ------------------------------------------------------------- skip link */

/*
 * There was no way past the nav from a keyboard: the same links came before
 * the content on every page, which is SC 2.4.1 at level A.
 */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: #20573F;
    color: #fff;
    padding: 0.75rem 1.25rem;
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}