/*
 * paw-plan.co.uk
 *
 * Loaded last on every page, but not always after the same thing. Thirteen
 * pages load site.css underneath it. The calculator, the FAQ and the guide load
 * neither site.css nor a built stylesheet: they carry their own inline base
 * layer and pull Tailwind from the play CDN. So this file states what changes
 * and cannot assume site.css is beneath it.
 *
 * The idea: what this site produces is an account. Someone works out what a dog
 * costs over ten years, and the honest form for that answer is the one every
 * vet's practice and every household has used for a century, which is a ruled
 * book. Figures on a common right edge, in a monospace, with a rule above the
 * total and nothing else competing with it. The margin column carries folio
 * marks. The masthead is the ruled page itself.
 *
 * It also fixes a set that was running three front-end stacks at once: Tailwind
 * v3 from the CDN on the calculator, a static Tailwind v2 on the articles, and
 * site.css on the legal pages. Three visual languages on sixteen pages is most
 * of why the site read as a template. They are brought to one here.
 *
 * What it replaces: a gradient hero with white centred type, a pie chart given
 * the same weight as the total it summarises, and "The Complete Guide to Pet
 * Ownership Costs in the UK" as an h2.
 *
 * Tailwind is loaded from a CDN and its utilities can land after this file in
 * the cascade, which is the only reason anything here is marked !important.
 */

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

:root {
    /* Extended so the annual figure can be genuinely large. The ratio is unchanged. */
    --step-6: 3.4rem;
    --step-7: 4.6rem;

    --font-book: 'Bitter', Georgia, 'Times New Roman', serif;
    --font-plain: 'Source Sans 3', system-ui, sans-serif;
    /* Money is tabular or it is not money. */
    --font-figure: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

    /* Record-book cloth. Distinct from the brown the site never committed to. */
    --book: #1F4742;
    --book-deep: #12302C;

    --ledger: #F2EFE6;
    --page: #FCFAF4;
    --ink: #1C1F1E;
    --ink-soft: #3E4744;
    --muted: #5F6A66;
    --rule: #DFDACB;
    --rule-strong: #C0B9A6;
    /* Only ever paired with a word, never carrying meaning alone. */
    --over: #9A3324;
}

body {
    background: var(--ledger) !important;
    color: var(--ink);
    font-family: var(--font-plain);
}

h1, h2, h3, h4 {
    font-family: var(--font-book);
    letter-spacing: -0.015em;
    color: var(--ink) !important;
}

/*
 * Column headings, field names and folio marks. The one mannerism the page
 * allows itself, doing the work the old design gave to bold 14px sans.
 */
.book-label,
.folio,
.masthead-kicker,
.ledger-head th,
.ledger-total dt {
    font-family: var(--font-plain);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-feature-settings: 'tnum';
}

/* --------------------------------------------------------------- the nav */

nav.sticky {
    background: var(--book) !important;
    border-bottom: 4px solid var(--book-deep) !important;
    padding: 0.6rem clamp(1rem, 4vw, 2rem) !important;
}

nav.sticky > a:first-child {
    color: #fff !important;
    font-family: var(--font-book);
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.01em;
}

nav.sticky .flex a {
    color: #fff !important;
    border-radius: 0 !important;
    padding: 0.35rem 0.7rem !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
}

nav.sticky .flex a:hover {
    background: transparent !important;
    border-bottom-color: #fff;
}

nav.sticky svg.icon {
    stroke: #fff;
}

/* Same nav, the other stack. */
.site-nav {
    background: var(--book) !important;
    border-bottom: 4px solid var(--book-deep) !important;
}

.site-nav .nav-brand,
.site-nav .nav-links a {
    color: #fff !important;
}

.site-nav .nav-links a {
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 600;
    border-bottom: 2px solid transparent;
}

.site-nav .nav-links a:hover,
.site-nav .nav-links a[aria-current='page'] {
    background: transparent !important;
    border-bottom-color: #fff;
}

.site-nav svg.icon {
    stroke: #fff;
}

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

/*
 * Full bleed. The plate is a blank ruled record-book page, greyscale and
 * multiplied over the book cloth so it can only darken the ground: white on the
 * flat teal is 10.30:1 and no lighter anywhere over the texture.
 *
 * This replaces .header-gradient, which was a two-stop gradient behind centred
 * white type: the single most interchangeable thing on the whole estate.
 */
.masthead,
.header-gradient {
    background-color: var(--book) !important;
    background-image: url('/img/ledger.webp') !important;
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    color: #fff !important;
    border-bottom: 5px solid var(--book-deep);
    box-shadow: none !important;
    text-align: left !important;
    padding-block: clamp(2.25rem, 6vw, 4rem) clamp(1.75rem, 4vw, 3rem) !important;
}

.masthead-inner,
.header-gradient > * {
    max-width: 64rem;
    margin-inline: auto !important;
    padding-inline: clamp(1rem, 4vw, 2rem);
    text-align: left !important;
}

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

.masthead h1,
.header-gradient h1 {
    color: #fff !important;
    font-size: clamp(2.1rem, 5.5vw, var(--step-6)) !important;
    font-weight: 700 !important;
    line-height: 1.04;
    letter-spacing: -0.02em;
    max-width: 17ch;
    margin: 0 !important;
    text-wrap: balance;
}

.masthead-standfirst,
.header-gradient h1 + p {
    margin-top: 1rem !important;
    max-width: 46ch;
    font-size: 1.08rem !important;
    line-height: 1.5;
    color: #fff !important;
    opacity: 0.9;
}

.masthead.masthead-interior {
    padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 2rem) !important;
}

.masthead.masthead-interior h1 {
    font-size: clamp(1.75rem, 4.5vw, var(--step-5, 2.488rem)) !important;
    max-width: 24ch;
}

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

/*
 * Fourteen class names across the two stylesheets resolved to the same white
 * rounded box with a soft shadow. Retired in one place. The page is held by
 * rules, weight and space.
 */
.content-card,
.info-card,
.article-card,
.blog-card,
.faq-card,
.card,
.result-box,
.history-item,
.email-box,
.contact-box,
.faq-section,
.summary-card,
.balance-card,
main .bg-white,
main [class*='rounded-lg'],
main [class*='rounded-xl'],
main [class*='rounded-2xl'],
main [class*='shadow-'],
.sheet .bg-white,
.sheet [class*='rounded-lg'],
.sheet [class*='rounded-xl'],
.sheet [class*='rounded-2xl'],
.sheet [class*='shadow-'] {
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.sheet,
:is(body, main) > .container {
    max-width: 64rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
    padding-block: clamp(1.75rem, 4vw, 3rem) 4rem;
    counter-reset: folio;
}

/*
 * The margin column carries the folio mark, which is numbering rather than
 * content, so it is generated: a screen reader gets the heading, not "zero two"
 * in front of it.
 */
.sheet > section,
:is(body, main) > .container > section {
    counter-increment: folio;
    display: grid;
    gap: 0.4rem clamp(0.75rem, 2vw, 2rem);
    padding-top: clamp(1.5rem, 4vw, 2.25rem);
    margin-bottom: clamp(1.5rem, 4vw, 2.25rem) !important;
    border-top: 1px solid var(--rule);
}

.sheet > section::before,
:is(body, main) > .container > section::before {
    content: 'No. ' counter(folio, decimal-leading-zero);
    font-family: var(--font-figure);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--book);
}

@media (min-width: 64rem) {
    .sheet > section,
    :is(body, main) > .container > section {
        grid-template-columns: 6.5rem minmax(0, 1fr);
        align-items: start;
    }

    .sheet > section > *,
    :is(body, main) > .container > section > * {
        grid-column: 2;
    }

    .sheet > section::before,
    :is(body, main) > .container > section::before {
        grid-column: 1;
        grid-row: 1 / -1;
        text-align: right;
        border-top: 3px solid var(--book);
        padding-top: 0.35rem;
        margin-top: -0.35rem;
    }
}

.sheet > section.hidden,
.sheet > section[style*='display: none'],
.sheet > section[style*='display:none'] {
    display: none !important;
}

.sheet h2,
:is(body, main) > .container h2 {
    font-size: var(--step-4, 2.074rem) !important;
    font-weight: 700 !important;
    line-height: 1.12;
    margin: 0 0 0.6rem !important;
    max-width: 24ch;
}

.sheet h3,
:is(body, main) > .container h3 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin: 1.4rem 0 0.3rem !important;
}

.sheet p,
.sheet li,
:is(body, main) > .container p,
:is(body, main) > .container li {
    color: var(--ink-soft) !important;
    max-width: 68ch;
}

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

/*
 * Entries in a book, not fields in a widget. Each sits on a ruled baseline with
 * its name in small caps above it, which is how every form a vet's practice has
 * ever handed anyone is set.
 */
#petCostForm label,
.entry-label {
    display: block;
    font-family: var(--font-plain);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted) !important;
    margin-bottom: 0.3rem;
}

#petCostForm input,
#petCostForm select {
    width: 100%;
    border: 0 !important;
    border-bottom: 2px solid var(--rule-strong) !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0.4rem 0 0.45rem !important;
    font-family: var(--font-figure);
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem !important;
    color: var(--ink) !important;
    box-shadow: none !important;
}

#petCostForm input:hover,
#petCostForm select:hover {
    border-bottom-color: var(--ink-soft) !important;
}

/*
 * The rule takes the accent on focus and the outline stays as well: a colour
 * change alone is not a focus indicator for anyone who cannot see the colour.
 */
#petCostForm input:focus-visible,
#petCostForm select:focus-visible {
    border-bottom-color: var(--book) !important;
    outline: 3px solid var(--book) !important;
    outline-offset: 3px;
}

#petCostForm button[type='submit'],
.btn-primary {
    background: var(--book) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0.9rem 1.6rem !important;
    font-family: var(--font-plain);
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#petCostForm button[type='submit']:hover,
.btn-primary:hover {
    background: var(--book-deep) !important;
}

#loadExample,
#resetForm,
#copyResults,
#chartTypePie,
#chartTypeBar,
.btn-secondary {
    background: transparent !important;
    color: var(--ink) !important;
    border: 1px solid var(--rule-strong) !important;
    border-radius: 0 !important;
    padding: 0.45rem 0.9rem !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#loadExample:hover,
#resetForm:hover,
#copyResults:hover,
#chartTypePie:hover,
#chartTypeBar:hover,
.btn-secondary:hover {
    border-color: var(--book) !important;
    color: var(--book) !important;
}

/* A selected chart type needs to look selected. It previously did not. */
#chartTypePie[aria-pressed='true'],
#chartTypeBar[aria-pressed='true'],
#chartTypePie.active,
#chartTypeBar.active {
    background: var(--book) !important;
    border-color: var(--book) !important;
    color: #fff !important;
}

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

/*
 * The annual figure. Previously a 3xl heading inside a rounded card, the same
 * size as "Visual Breakdown" next to it. It is now the largest thing on the
 * page, set in the figure face, with the rule above it that a total gets in
 * every account book ever printed.
 */
.total-line {
    border-top: 3px solid var(--book);
    padding-top: 0.9rem;
    margin-top: 1.5rem;
}

#annualCost,
#totalProjection,
.figure-lg {
    display: block;
    font-family: var(--font-figure);
    font-variant-numeric: tabular-nums;
    font-size: clamp(2.4rem, 8vw, var(--step-7)) !important;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ink) !important;
}

#monthlyCost,
#householdMonthlyCost {
    font-family: var(--font-figure);
    font-variant-numeric: tabular-nums;
    font-size: 1.3rem !important;
    color: var(--ink-soft) !important;
}

#projectionLabel,
.figure-caption {
    display: block;
    font-family: var(--font-plain);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted) !important;
    margin-bottom: 0.3rem;
}

/*
 * The breakdown is a ledger column: names left, money right on a common edge,
 * ruled between rows, with the total separated by a heavier rule. Aligning the
 * figures is the entire reason this form exists.
 */
#breakdownTable,
.ledger {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.ledger th {
    text-align: left;
    font-family: var(--font-plain);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0.5rem 0;
    border-bottom: 2px solid var(--book);
}

#breakdownTable td,
.ledger td {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-soft);
}

.ledger th:last-child,
.ledger td:last-child {
    text-align: right;
    font-family: var(--font-figure);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

#breakdownTable tr:last-child td,
.ledger tfoot td {
    border-top: 2px solid var(--book);
    border-bottom: 0;
    font-weight: 700;
    color: var(--ink);
}

/*
 * The chart is a summary of the table above it and was given equal weight to
 * the total. It is capped and set quieter: it is the illustration, not the
 * answer.
 */
#costChart {
    max-width: 22rem;
    max-height: 22rem;
}

/* -------------------------------------------------------- saved records */

#savedPetsList > *,
#householdPetsList > * {
    background: none !important;
    border: 0 !important;
    border-top: 1px solid var(--rule) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.55rem 0 !important;
}

/* ------------------------------------------------------------ the FAQ */

.faq-list > div,
.qa > div {
    border-top: 1px solid var(--rule);
    padding-block: 1.1rem !important;
}

.qa > div:last-child {
    border-bottom: 1px solid var(--rule);
}

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

/*
 * site.css drops the outline on every focused field and replaces it with a 3px
 * ring in --accent-tint, a near-white on a near-white ground.
 */
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(--book) !important;
    outline-offset: 2px;
}

.masthead a:focus-visible,
nav.sticky a:focus-visible,
.site-nav a:focus-visible,
footer a:focus-visible,
.editorial-footer a:focus-visible {
    outline-color: #fff !important;
}

/* -------------------------------------------------------------- footer */

footer,
.editorial-footer {
    background: var(--book) !important;
    border-top: 5px solid var(--book-deep);
    color: #fff !important;
    margin-top: clamp(2rem, 5vw, 4rem);
}

footer a,
.editorial-footer a {
    color: #fff !important;
}

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

/*
 * People print this to take to a conversation about whether they can afford
 * the dog, which is the only reason the site exists. The account prints.
 */
@media print {
    nav.sticky,
    .site-nav,
    #costChart,
    footer,
    .editorial-footer,
    .book-plug,
    .adsbygoogle {
        display: none !important;
    }

    .masthead,
    .header-gradient {
        background: none !important;
        color: #000 !important;
        border-bottom: 2px solid #000;
    }

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

    #breakdownTable {
        break-inside: avoid;
    }
}

/* The back link that lived under the old gradient hero. */
.masthead-back {
    margin-top: 1.1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.masthead-back a {
    color: #fff !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.masthead-back a:hover {
    border-bottom-color: #fff;
}

/* The other gradient hero variant on the guide and FAQ. */
.gradient-bg {
    background: var(--book) !important;
    background-image: url('/img/ledger.webp') !important;
    background-blend-mode: multiply;
    box-shadow: none !important;
}

/*
 * The two figures that are not the answer. They sit under the total as a short
 * ruled summary rather than as two more boxes the same size as it.
 */
.ledger-summary {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0 1.5rem;
    margin: 1.25rem 0 0;
    max-width: 26rem;
}

.ledger-summary > dt {
    font-family: var(--font-plain);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted) !important;
    padding: 0.45rem 0;
    border-top: 1px solid var(--rule);
    align-self: center;
}

.ledger-summary > dd {
    margin: 0;
    padding: 0.45rem 0;
    border-top: 1px solid var(--rule);
    text-align: right;
    font-family: var(--font-figure);
    font-variant-numeric: tabular-nums;
    font-size: 1.15rem;
    color: var(--ink) !important;
}

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

/* --------------------------------------------------- landmarks and labels */

.skip-link {
    position: fixed;
    top: -4rem;
    left: 0.5rem;
    z-index: 100;
    padding: 0.7rem 1.1rem;
    background: var(--book);
    color: #fff !important;
    font-family: var(--font-plain);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid #fff;
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 0.5rem;
}

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

/* --------------------------------------------------------- in-page notices */

/*
 * These replace nine alert(), confirm() and prompt() dialogues. They are live
 * regions, so they stay in the document and collapse when empty rather than
 * being added and removed.
 */
.form-message {
    margin: 0.85rem 0 0;
    padding: 0.6rem 0.85rem;
    border-left: 4px solid var(--over);
    background: color-mix(in srgb, var(--over) 9%, transparent);
    color: var(--ink) !important;
    font-family: var(--font-plain);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.45;
    max-width: 60ch;
}

.form-message:empty {
    display: none;
}

.form-message--done {
    border-left-color: var(--book);
    background: color-mix(in srgb, var(--book) 9%, transparent);
}

[aria-invalid='true'] {
    border-color: var(--over) !important;
}

.sheet .result-caveat {
    margin: 1.6rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
    color: var(--muted) !important;
    font-size: 0.85rem;
    line-height: 1.55;
    max-width: 68ch;
}

/* ------------------------------------------------- pages without Tailwind */

/*
 * The about page, the blog index and the seven articles pull Tailwind v2 from
 * jsdelivr, so their utility classes do set a measure. What was missing is
 * vertical rhythm: site.css zeroes every margin, Tailwind's preflight does the
 * same, and the .prose class on the article body resolves to nothing because
 * the typography plugin is not loaded. Body copy ran together as one block.
 * The measure and gutters are restated too, so a CDN that fails to answer
 * costs the page its type scale and not its layout.
 */
nav.sticky {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

nav.sticky > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.page-measure {
    display: block;
    max-width: 48rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
    padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(2rem, 5vw, 3.5rem);
}

.page-measure p,
.page-measure ul,
.page-measure ol,
.page-measure blockquote,
.page-measure table {
    margin-block: 0 1.05rem;
}

.page-measure p,
.page-measure li {
    color: var(--ink-soft);
    line-height: 1.62;
}

.page-measure li + li {
    margin-block-start: 0.35rem;
}

.page-measure ul,
.page-measure ol {
    padding-left: 1.3rem;
}

.page-measure > .article-card {
    display: block;
    border-top: 1px solid var(--rule) !important;
    padding-block: 1.4rem !important;
}

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

footer.text-center {
    text-align: center;
    padding: 1.6rem clamp(1rem, 4vw, 2rem);
    font-size: 0.85rem;
}

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