/*
 * Base styles: self-hosted Nunito, root text size, focus ring, motion and theme rules (DESIGN.md).
 */

/* Nunito variable (Fontsource 5.3.0, OFL: ../fonts/nunito/OFL.txt). Fallback of ui-rounded outside Apple systems. */
@font-face {
    font-family: Nunito;
    font-style: normal;
    font-display: swap;
    font-weight: 200 1000;
    src: url("../fonts/nunito/nunito-latin-ext-wght-normal-HN--UrW.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: Nunito;
    font-style: normal;
    font-display: swap;
    font-weight: 200 1000;
    src: url("../fonts/nunito/nunito-latin-wght-normal-c23Eawv.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: only light;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Keeps focused elements clear of the bottom tab bar (no top bar on mobile). At 200% text its labels
       wrap to three lines: the margin covers that taller bar too, focus ring included. */
    scroll-padding-top: 0;
    scroll-padding-bottom: calc(var(--tabbar-min-height) + 2rem + env(safe-area-inset-bottom, 0px) + var(--space-8));
    /* A page whose content fits never moves: measured, its height is exactly the screen's (the app shell's
       min-height of 100dvh, its tab bar room included), yet dragging it made the whole page, title included,
       bounce (iOS) or stretch (Android) with the overscroll effect of the browser. The page, like an app,
       stays still at its ends; a long page scrolls as before. */
    overscroll-behavior-y: none;
}

/* iOS: follows the system text size, also in the installed PWA. The shorthand resets font-family, redeclared on body. */
@supports (font: -apple-system-body) and (-webkit-touch-callout: default) {
    html {
        font: -apple-system-body;
    }
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--color-surface-ground);
    color: var(--color-ink);
    font: var(--font-body);
    font-family: var(--font-family);
    overflow-wrap: break-word;
}

h1,
h2,
h3,
p {
    margin: 0;
}

h1 {
    font: var(--font-headline);
}

h2 {
    font: var(--font-title-section);
}

a {
    color: inherit;
}

img,
video,
svg {
    max-width: 100%;
    height: auto;
}

/* Form fields at 16px at least: avoids Safari's automatic zoom. */
input,
select,
textarea,
button {
    font: var(--font-input);
    color: inherit;
}

/* Focus ring doubled by a white halo: at least 3:1 on any light or tomato ground. */
:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
    box-shadow: 0 0 0 var(--focus-halo-width) var(--color-focus-halo);
}

/* Programmatic focus (h1 after a Turbo visit, main after the skip link): no ring on a non-interactive target. */
h1[tabindex="-1"]:focus,
main[tabindex="-1"]:focus {
    outline: none;
    box-shadow: none;
}

/* Variant for dark grounds (ink, viewer). */
.on-dark :focus-visible,
.on-dark:focus-visible {
    outline-color: var(--color-focus-ring-on-dark);
    box-shadow: none;
}

/* Chrome icons (assets/icons/icons.svg, Lucide): stroke drawn in the text colour, always decorative. */
.icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

/* With inverted colours, photos and videos are inverted back to stay faithful. */
@media (inverted-colors: inverted) {
    img,
    video {
        filter: invert(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}