/*
 * mileage-claim-calculator.co.uk
 *
 * Loaded after site.css, so it only states what changes.
 *
 * The idea: this is a mileage log, so the page is the log book. The thing it
 * replaces is the duplicate book that lives in the glovebox of every van in
 * the country, written up at the end of the week and handed in with the
 * expenses claim. Ruled rows, a description on the left, the miles in a
 * figures column on the right, and the total ruled off at the bottom with the
 * double underline an accountant puts under a figure that is final.
 *
 * What it replaces: a white rounded card on off-white, a heading in Title
 * Case, a section called "What This Site Does", and a total set at the same
 * size as the paragraph above it.
 *
 * The palette is the buff and umber of a carbon expenses book rather than the
 * house blue, which was identical on all twenty-six sites.
 */

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

:root {
    --accent: #6B4516;
    --accent-deep: #4A2F0E;
    --accent-tint: #F4EDE0;
    --accent-ink: #FFFFFF;

    /* Manila rather than the house near-white, so the sheet sits on a stock. */
    --paper: #F3EDE1;

    /*
     * The masthead keeps its own ground and ink in BOTH themes, and they do
     * not follow --accent.
     *
     * The band is the accent with the carbon sheet multiplied over it, and
     * multiply can only darken. That guarantee holds for white type only while
     * the ground stays dark: when --accent lifted to a tan for dark mode, the
     * hardcoded white type on the band measured 2.56:1 flat. Pinning the band
     * to the umber keeps it at 8.44:1 flat and 14.9:1 at the darkest pixel of
     * the artwork, in both themes.
     */
    --masthead-bg: #6B4516;
    --masthead-ink: #FFFFFF;

    /*
     * The house greys are cool and were mixed for a near-white ground. On this
     * manila the muted grey drops to 4.07:1, which is under AA for the hints
     * that use it, so the neutrals are rewarmed and darkened to suit the stock:
     * 4.84:1 on the paper and 5.64:1 on the sheet.
     */
    --muted: #6E665E;
    --rule: #DFD8C9;
    --rule-strong: #C3BAA8;

    /*
     * The house scale stops at 2.488rem, which is not big enough for a figure
     * that is the entire reason for the page. The top of the scale is extended
     * rather than the ratio changed, so everything below it still agrees.
     */
    --step-6: 3.1rem;
    --step-7: 4.6rem;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        /* Umber is too dark to read on a dark ground, so it lifts to a tan. */
        --accent: #C79A5E;
        --accent-deep: #E0B87E;
        --accent-tint: #2A2116;
        --accent-ink: #1A1206;
        --paper: #15181C;
    }
}

:root[data-theme='dark'],
body.dark-mode {
    --accent: #C79A5E;
    --accent-deep: #E0B87E;
    --accent-tint: #2A2116;
    --accent-ink: #1A1206;
    --paper: #15181C;
}

body {
    background: var(--paper);
}

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

/*
 * Bitter is already loaded here and was going unused behind a Georgia
 * fallback. It is a slab, which is what a printed rate card is set in, so it
 * does the headings and the column heads and nothing else.
 */
.masthead h1,
.sheet-title,
.reference h2,
.reference h3,
.total-amount {
    font-family: Bitter, Georgia, 'Times New Roman', serif;
}

/*
 * Field names, column heads and section marks. Tracked capitals at a small
 * size, which is how a printed form names a box, and the one mannerism the
 * page allows itself.
 */
.field-name,
.masthead-kicker,
.sheet-note,
.section-mark,
.total-label,
.result-label {
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    font-feature-settings: 'tnum';
}

/* Every figure on the page lines up in a column, so all of them are tabular. */
.result-value,
.total-amount,
.journey-miles,
.rate-table td,
.rate-table th,
.field-body input,
.field-body select {
    font-variant-numeric: tabular-nums;
}

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

/*
 * Full bleed. The texture is a used carbon sheet, multiplied over the umber
 * 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 look like.
 */
.masthead {
    background-color: var(--masthead-bg);
    background-image: url('/img/logbook.webp');
    background-size: 640px auto;
    background-blend-mode: multiply;
    color: var(--masthead-ink);
    padding-block: clamp(2.25rem, 6vw, 4.25rem) clamp(1.75rem, 4vw, 3rem);
    border-bottom: 5px solid #4A2F0E;
}

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

.masthead-kicker {
    display: block;
    color: var(--masthead-ink);
    opacity: 0.78;
    margin-bottom: 1.1rem;
}

.masthead h1 {
    font-size: clamp(2rem, 5.2vw, var(--step-6));
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.015em;
    max-width: 17ch;
    color: var(--masthead-ink);
    margin: 0;
}

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

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

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

/*
 * An editorial grid rather than a centred column: the margin carries the
 * section mark and the prose runs in a readable measure beside it. Below 62rem
 * 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.75rem, 3vw, 2.25rem);
}

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

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

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

.doc-grid + .doc-grid {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--rule-strong);
}

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

/*
 * The card is retired. What is left is a sheet: a heavy printed rule across
 * the top, the stock showing through, and no radius or shadow anywhere.
 */
.calculator-card {
    background: var(--card);
    border: 1px solid var(--rule-strong);
    border-top: 5px solid var(--accent);
    border-radius: 0;
    box-shadow: none;
    padding: clamp(1.15rem, 3.5vw, 2rem);
    margin: 0;
}

.sheet-title {
    font-size: var(--step-2);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.3rem;
    color: var(--ink);
}

.sheet-note {
    color: var(--muted);
    margin: 0 0 1.5rem;
}

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

/*
 * Numbered boxes on a ruled baseline rather than rounded inputs. A printed
 * form numbers its boxes, and the number is what tells you there are three of
 * them and that you are on the second.
 */
.fields {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
}

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

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

.fields > li {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    column-gap: 0.55rem;
    align-items: baseline;
    margin: 0;
}

.field-num {
    font-family: var(--font-figure);
    font-size: 0.78rem;
    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.35rem;
}

/*
 * A ruled line, not a box. --rule-strong is only 1.62:1 on the card, and once
 * the box is gone this rule is the sole thing identifying the field, which
 * SC 1.4.11 wants at 3:1. --muted is 4.75:1.
 */
.calculator-card .field-body input[type='number'],
.calculator-card .field-body input[type='text'],
.calculator-card .field-body select {
    width: 100%;
    border: 0;
    border-bottom: 2px solid var(--muted);
    border-radius: 0;
    background: transparent;
    padding: 0.35rem 0 0.4rem;
    font-family: var(--font-figure);
    font-size: 1.05rem;
    color: var(--ink);
    box-shadow: none;
    appearance: none;
}

/* The select keeps its own arrow, or there is nothing saying it opens. */
.calculator-card .field-body select {
    appearance: auto;
    font-family: inherit;
}

.calculator-card .field-body input:hover,
.calculator-card .field-body select:hover {
    border-bottom-color: var(--ink);
}

.calculator-card .field-body input:focus-visible,
.calculator-card .field-body select:focus-visible {
    border-bottom-color: var(--accent);
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

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

/* ------------------------------------------------------------- the buttons */

.sheet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.9rem;
}

.calculator-card .calculate-btn {
    background: var(--accent);
    color: var(--accent-ink);
    border: 2px solid var(--accent);
    border-radius: 0;
    padding: 0.85rem 1.6rem;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    width: auto;
    margin: 0;
    box-shadow: none;
    cursor: pointer;
}

.calculator-card .calculate-btn:hover {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
}

/* The second action is the lesser one and should not shout at the same volume. */
.calculator-card .calculate-btn.secondary-btn {
    background: transparent;
    color: var(--accent);
}

.calculator-card .calculate-btn.secondary-btn:hover {
    background: var(--accent-tint);
    color: var(--accent-deep);
}

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

/* -------------------------------------------------------------- the ledger */

/*
 * The journeys, set as the book they came from. Each row is ruled, the
 * description sits left and the miles right in a figures column, and the
 * remove control is a plain word rather than a button shape, because it is the
 * least important thing on the row.
 */
.journey-list {
    margin-top: 2.25rem;
    border: 0;
    background: none;
    padding: 0;
}

.journey-list h3 {
    font-family: Bitter, Georgia, serif;
    font-size: var(--step-1);
    font-weight: 700;
    margin: 0 0 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--ink);
}

.journey-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--rule);
    background: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

.journey-item:hover {
    background: var(--accent-tint);
    transform: none;
}

.journey-details {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    flex: 1;
    min-width: 0;
}

.journey-miles {
    font-family: var(--font-figure);
    font-size: 0.95rem;
    color: var(--ink);
    background: none;
    padding: 0;
    border-radius: 0;
}

.journey-item .remove-btn {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0.15rem 0.2rem;
    color: var(--muted);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: underline;
    cursor: pointer;
}

.journey-item .remove-btn:hover {
    color: var(--bad);
}

.journey-item .remove-btn:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

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

/*
 * The reason for the page, and previously set at the same size as a section
 * heading. The workings stay, ruled like a claim form, and the figure they add
 * up to is the largest thing here by a wide margin.
 */
.results {
    margin-top: 2.5rem;
    border: 0;
    border-top: 2px solid var(--ink);
    background: none;
    border-radius: 0;
    box-shadow: none;
    padding: 1.25rem 0 0;
}

.results h3 {
    font-family: Bitter, Georgia, serif;
    font-size: var(--step-1);
    font-weight: 700;
    margin: 0 0 0.9rem;
}

.results .result-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--rule);
    background: none;
}

.results .result-label {
    color: var(--muted);
}

.results .result-value {
    font-family: var(--font-figure);
    font-size: 0.97rem;
    color: var(--ink);
    text-align: right;
}

/*
 * The double rule is the accountant's, and it means the figure above it is
 * the one that gets carried across. It is also the one device on this page
 * that could not be lifted onto any of the other sites.
 */
.total-result {
    margin-top: 1.75rem;
    padding-top: 1.1rem;
    border-top: 4px double var(--ink);
    background: none;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
}

.total-label {
    display: block;
    color: var(--accent);
    margin-bottom: 0.2rem;
}

.total-amount {
    display: block;
    font-size: clamp(2.8rem, 11vw, var(--step-7));
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.03em;
    color: var(--ink);
}

/* ------------------------------------------------------------ the warnings */

.warning-box {
    background: var(--warn-tint);
    border: 0;
    border-left: 5px solid var(--warn);
    border-radius: 0;
    box-shadow: none;
    padding: 0.9rem 1.1rem;
    font-size: 0.93rem;
    line-height: 1.6;
}

/* ----------------------------------------------------------- the rate card */

/*
 * Already a table, and the most document-like thing that was on the page. It
 * is now set as the printed rate card it is: ruled, no fill, figures right.
 */
.rate-table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    margin: 1.25rem 0 1.75rem;
    font-variant-numeric: tabular-nums;
}

.rate-table caption {
    text-align: left;
    font-size: var(--step-1);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.rate-table th {
    background: none;
    color: var(--accent);
    text-align: left;
    padding: 0.4rem 0.75rem 0.4rem 0;
    border-bottom: 2px solid var(--ink);
}

.rate-table td {
    padding: 0.55rem 0.75rem 0.55rem 0;
    border-bottom: 1px solid var(--rule);
    background: none;
}

.rate-table th + th,
.rate-table td + td {
    text-align: right;
    padding-right: 0;
    padding-left: 0.75rem;
    font-family: var(--font-figure);
}

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

/*
 * Everything under the tool is reference material, so it is set as reference
 * material: one measure, real rules between sections, no boxes. Each of these
 * used to sit in its own bordered card, which made an introduction, a rule and
 * an aside all shout at the same volume as the answer.
 */
.reference .info-section,
.info-section {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.reference h2 {
    font-size: var(--step-3);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.01em;
    margin: 0 0 0.7rem;
    max-width: 28ch;
}

.reference h3 {
    font-size: var(--step-1);
    font-weight: 700;
    margin: 1.6rem 0 0.3rem;
}

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

/* ------------------------------------------------- the rest of the site */

/*
 * The interior pages carry the same stylesheet, because a homepage with a
 * point of view and interior pages built from the old white card is the most
 * obvious way for a site to stop holding together. They do not get a masthead,
 * but they get the palette, the type and the end of the card.
 */
.content-card {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.container > .content-card > h1,
.container > .content-card > h2:first-child {
    font-family: Bitter, Georgia, 'Times New Roman', serif;
    font-size: clamp(1.9rem, 5vw, var(--step-5));
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.015em;
    max-width: 20ch;
    margin: 0 0 1.5rem;
    padding-top: 1.1rem;
    border-top: 5px solid var(--accent);
}

.content-card h2 {
    font-family: Bitter, Georgia, 'Times New Roman', serif;
    font-size: var(--step-2);
    font-weight: 700;
    margin-top: 2.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule-strong);
}

.content-card h3 {
    font-family: Bitter, Georgia, 'Times New Roman', serif;
}

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

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

/*
 * People print the claim and staple it to the expenses form, so the ledger and
 * the total print and nothing else does.
 */
@media print {
    .site-nav,
    .sheet-actions,
    .remove-btn,
    .reference,
    .book-plug,
    .gov-footer {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .masthead {
        background: none;
        color: #000;
        border-bottom: 2px solid #000;
        padding-block: 0 1rem;
    }

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

    .calculator-card {
        border: 0;
        padding: 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,
.field-body input::placeholder,
.field-body 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;
}

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

.result-note {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-soft);
}