:root {
    --font-display: 'Literata', Georgia, serif;
    --font-body: 'Work Sans', system-ui, -apple-system, sans-serif;
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

    --pico-font-family: var(--font-body);

    --brand-primary: #10B981;
    --brand-secondary: #7C3AED;
}

/* Light (default) */
:root:not([data-theme="dark"]) {
    --pico-background-color: color-mix(in oklch, var(--brand-primary) 6%, white);
    --pico-color: oklch(24% 0.01 290);
    --pico-h1-color: oklch(20% 0.015 290);
    --pico-h2-color: oklch(20% 0.015 290);
    --pico-muted-color: oklch(47% 0.008 290);
    --pico-muted-border-color: oklch(89% 0.006 290);

    /* Links, buttons and accents are darker than the brand green: the green on the light background,
       or white text on it, falls short of 4.5:1 contrast. */
    --pico-primary: var(--accent-primary);
    --pico-primary-background: var(--accent-primary);
    --pico-primary-hover: color-mix(in oklch, var(--brand-primary) 62%, black);
    --pico-primary-hover-background: var(--pico-primary-hover);
    --pico-primary-hover-border: var(--pico-primary-hover);
    --pico-primary-underline: var(--brand-primary);
    --pico-primary-focus: color-mix(in srgb, var(--brand-primary) 30%, transparent);
    --pico-primary-inverse: color-mix(in oklch, white 96%, var(--brand-primary) 4%);

    --pico-form-element-border-color: color-mix(in oklch, var(--brand-secondary) 40%, white);
    --pico-form-element-focus-color: var(--brand-primary);
    --pico-form-element-invalid-border-color: oklch(56% 0.16 25);
    --pico-form-element-invalid-active-border-color: oklch(56% 0.16 25);

    --panel-background: color-mix(in oklch, var(--brand-primary) 11%, white);
    --panel-border: color-mix(in oklch, var(--brand-secondary) 55%, white);
    --accent-primary: color-mix(in oklch, var(--brand-primary) 72%, black);
    --accent-secondary: var(--brand-secondary);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --pico-background-color: color-mix(in oklch, var(--brand-primary) 12%, black);
        --pico-color: oklch(91% 0.006 290);
        --pico-h1-color: oklch(96% 0.004 290);
        --pico-h2-color: oklch(96% 0.004 290);
        --pico-muted-color: oklch(68% 0.008 290);
        --pico-muted-border-color: oklch(33% 0.008 290);

        --pico-primary: color-mix(in oklch, var(--brand-primary) 82%, white);
        --pico-primary-background: color-mix(in oklch, var(--brand-primary) 82%, white);
        --pico-primary-hover: var(--brand-primary);
        --pico-primary-hover-background: var(--pico-primary-hover);
        --pico-primary-hover-border: var(--pico-primary-hover);
        --pico-primary-underline: color-mix(in oklch, var(--brand-primary) 82%, white);
        --pico-primary-focus: color-mix(in srgb, var(--brand-primary) 35%, transparent);
        --pico-primary-inverse: oklch(16% 0.01 290);

        --pico-form-element-border-color: color-mix(in oklch, var(--brand-secondary) 40%, black);
        --pico-form-element-focus-color: color-mix(in oklch, var(--brand-primary) 82%, white);
        --pico-form-element-invalid-border-color: oklch(68% 0.15 25);
        --pico-form-element-invalid-active-border-color: oklch(68% 0.15 25);

        --panel-background: color-mix(in oklch, var(--brand-primary) 24%, black);
        --panel-border: color-mix(in oklch, var(--brand-secondary) 55%, black);
        --accent-primary: color-mix(in oklch, var(--brand-primary) 78%, white);
        --accent-secondary: color-mix(in oklch, var(--brand-secondary) 70%, white);
    }
}

:root[data-theme="dark"] {
    --pico-background-color: color-mix(in oklch, var(--brand-primary) 12%, black);
    --pico-color: oklch(91% 0.006 290);
    --pico-h1-color: oklch(96% 0.004 290);
    --pico-h2-color: oklch(96% 0.004 290);
    --pico-muted-color: oklch(68% 0.008 290);
    --pico-muted-border-color: oklch(33% 0.008 290);

    --pico-primary: color-mix(in oklch, var(--brand-primary) 82%, white);
    --pico-primary-background: color-mix(in oklch, var(--brand-primary) 82%, white);
    --pico-primary-hover: var(--brand-primary);
    --pico-primary-hover-background: var(--pico-primary-hover);
    --pico-primary-hover-border: var(--pico-primary-hover);
    --pico-primary-underline: color-mix(in oklch, var(--brand-primary) 82%, white);
    --pico-primary-focus: color-mix(in srgb, var(--brand-primary) 35%, transparent);
    --pico-primary-inverse: oklch(16% 0.01 290);

    --pico-form-element-border-color: color-mix(in oklch, var(--brand-secondary) 40%, black);
    --pico-form-element-focus-color: color-mix(in oklch, var(--brand-primary) 82%, white);
    --pico-form-element-invalid-border-color: oklch(68% 0.15 25);
    --pico-form-element-invalid-active-border-color: oklch(68% 0.15 25);

    --panel-background: color-mix(in oklch, var(--brand-primary) 24%, black);
    --panel-border: color-mix(in oklch, var(--brand-secondary) 55%, black);
    --accent-primary: color-mix(in oklch, var(--brand-primary) 78%, white);
    --accent-secondary: color-mix(in oklch, var(--brand-secondary) 70%, white);
}

body {
    background: var(--pico-background-color);
}

h1, h2, h3 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

header.container nav > ul:first-child img {
    display: block;
}

header.container nav a[hreflang] {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--pico-muted-color);
    text-decoration: none;
}

header.container nav a[hreflang][aria-current] {
    color: var(--accent-primary);
}

.kicker {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.hero-grid > div:first-child .kicker {
    color: var(--accent-secondary);
}

.panel .kicker {
    color: var(--accent-primary);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    grid-template-areas:
        "cover panel"
        "copy  panel";
    column-gap: clamp(2rem, 4vw, 4.5rem);
    row-gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
    padding-block: clamp(1rem, 3vw, 2rem);
}

.hero-grid > div:first-child {
    grid-area: copy;
}

.hero-grid > .panel {
    grid-area: panel;
}

.hero-grid > img {
    grid-area: cover;
    width: 100%;
    max-width: 26rem;
    height: auto;
}

.kicker + h1 {
    margin-top: 0;
}

@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "cover"
            "copy"
            "panel";
    }

    .hero-grid > img {
        max-width: 20rem;
    }
}

.hero-grid h1 {
    font-size: clamp(2.15rem, 1.5rem + 2.8vw, 3.5rem);
    line-height: 1.08;
    font-weight: 500;
    margin-bottom: 1rem;
}

.hero-grid > div:first-child > p {
    color: var(--pico-muted-color);
    font-size: 1.0625rem;
    max-width: 40em;
}

.reassurance {
    list-style: none;
    padding: 0 0 0 0.2rem;
    margin: 1.75rem 0 0;
    display: grid;
    gap: 0.6rem;
}

.reassurance li {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    color: var(--pico-muted-color);
    font-size: 0.9375rem;
}

.reassurance li::before {
    content: '\2014';
    flex: none;
    color: var(--accent-secondary);
}

.panel {
    background: var(--panel-background);
    border: 1px solid var(--panel-border);
    border-radius: 0.75rem;
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

/* Bot trap: off screen rather than display: none, which some bots skip. */
#check-form .website {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

:is(#check-form, #question-form) .form-error {
    color: var(--pico-form-element-invalid-border-color);
}

.panel form small {
    display: block;
    margin-top: -0.75rem;
    margin-bottom: 1rem;
}

#check-form [data-pending] {
    display: none;
}

#check-form form.htmx-request [data-default] {
    display: none;
}

#check-form form.htmx-request [data-pending] {
    display: inline;
}

#check-form {
    transition: opacity 200ms var(--ease-out-quart);
    opacity: 1;
}

#check-form.htmx-swapping {
    opacity: 0;
}

.submitted-message {
    color: var(--accent-primary);
    font-family: var(--font-body);
    font-weight: 600;
}

button[data-theme-toggle],
button[data-theme-toggle]:is(:hover, :active, :focus, :focus-visible) {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    aspect-ratio: 1 / 1;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    /* Pico redefines --pico-color on buttons as the inverse (white) text color. */
    color: inherit;
}

button[data-theme-toggle] svg {
    width: 1.05rem;
    height: 1.05rem;
}

button[data-theme-toggle] svg[data-icon="moon"] {
    display: none;
}

:root[data-theme="dark"] button[data-theme-toggle] svg[data-icon="sun"] {
    display: none;
}

:root[data-theme="dark"] button[data-theme-toggle] svg[data-icon="moon"] {
    display: block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) button[data-theme-toggle] svg[data-icon="sun"] {
        display: none;
    }

    :root:not([data-theme="light"]) button[data-theme-toggle] svg[data-icon="moon"] {
        display: block;
    }
}

.dashboard > header {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    padding-block: clamp(1rem, 3vw, 2rem);
}

.dashboard > header button {
    margin: 0;
}

/* The full address under the site name; long ones wrap instead of widening the table. */
.dashboard .submitted-url {
    display: inline-block;
    max-width: 28rem;
    color: var(--pico-muted-color);
    overflow-wrap: anywhere;
}

.dashboard table {
    font-size: 0.875rem;
}

/* Yes/no icons for mail sent and visited. */
.dashboard .flag {
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.25em;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dashboard .flag.yes {
    stroke: var(--accent-primary);
}

.dashboard .flag.no {
    stroke: var(--pico-muted-border-color);
    stroke-width: 2;
}

.dashboard td[data-status="finished"] {
    color: var(--accent-primary);
}

.dashboard td[data-status="partial"] {
    color: var(--pico-muted-color);
}

.dashboard td[data-status="failed"] {
    color: var(--pico-form-element-invalid-border-color);
}

.login {
    max-width: 26rem;
    margin: clamp(1rem, 6vw, 4rem) auto;
}

/* Site footer: small and quiet, below every page. */
body > footer {
    margin-top: 3rem;
    border-top: 1px solid var(--pico-muted-border-color);
    color: var(--pico-muted-color);
    font-size: 0.75rem;
    text-align: center;
}

body > footer p {
    margin-bottom: 0;
}

body > footer a {
    color: inherit;
}

/* FAQ: questions by category, with the form for asking a new one beside them (below them on phones). */
.faq {
    /* Pico greys out an open question; keep it as readable as the closed ones. */
    --pico-accordion-close-summary-color: var(--pico-color);
    --pico-accordion-open-summary-color: var(--pico-color);
    --pico-accordion-active-summary-color: var(--accent-primary);
}

.faq h1 {
    margin-bottom: 1.75rem;
}

.faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.faq-layout > aside {
    position: sticky;
    top: 1.5rem;
}

@media (max-width: 900px) {
    .faq-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .faq-layout > aside {
        position: static;
    }
}

.faq section + section {
    margin-top: 2.25rem;
}

.faq h2 {
    font-size: 1.375rem;
    margin-bottom: 0.5rem;
}

.faq details {
    margin: 0;
    border-bottom: 1px solid var(--pico-muted-border-color);
}

/* The arrow goes before the question, in the accent colour, so it's clear the question opens. */
.faq details summary {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 0;
    line-height: 1.5;
    font-weight: 500;
}

.faq details[open] > summary {
    margin-bottom: 0;
}

.faq details summary:hover {
    color: var(--accent-primary);
}

.faq details summary::after {
    order: -1;
    flex: none;
    float: none;
    width: 1.1rem;
    height: 1.5em;
    margin: 0;
    background: var(--accent-primary);
    -webkit-mask: var(--pico-icon-chevron) center / 1.1rem no-repeat;
    mask: var(--pico-icon-chevron) center / 1.1rem no-repeat;
}

.faq .answer {
    padding: 0 0 1rem 1.7rem;
}

.faq .answer > :last-child {
    margin-bottom: 0;
}

.faq aside h2 {
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
}

.faq aside form small {
    font-size: 0.8125rem;
}