/* ───────────────────────────────────────────────────────────────────
 * gillish.com / html — shared stylesheet
 *
 * Working-document typography: Inter Variable carries everything
 * (body + chrome + headings) at sizes / line-heights tuned to feel
 * like a Word document, not a book. Light mode only — Erlend's
 * call: dark mode is hostile to sustained prose reading. The
 * Canvas WordPress plugin admin (DESIGN.md surface) keeps its own
 * system-sans + dark-mode pairings; that's a different register.
 *
 * Colour tokens: high-contrast text on a tinted near-white paper
 * (~16:1, Word-document territory), clearly separable card / code
 * / border surfaces (5–7% lightness deltas, not 1–3% subtle ones
 * that vanish under standard browser rendering). Brand hue
 * (slate-blue 250°) carried from DESIGN.md.
 * ─────────────────────────────────────────────────────────────────── */

/* ─── Inter Variable (rsms, OFL-1.1) ───────────────────────────
 * Self-hosted under assets/fonts/ for GDPR. Single WOFF2 covers
 * weights 100–900 via the variable-font weight axis. Designed
 * specifically for screen reading — what Vercel / Linear /
 * Tailwind / Cloudflare's docs sites use because it renders
 * cleanly on every OS at every body size.
 *
 * `font-display: swap` so text renders in the system-sans fallback
 * (San Francisco / Segoe UI / Roboto) immediately on first paint;
 * Inter swaps in once loaded. No FOIT.
 *
 * Italic intentionally not loaded — the brand bans italics
 * (DESIGN.md §3 "No-Italic Rule"); any accidental <em> falls back
 * to system-sans italic so the violation surfaces visibly. */
@font-face {
    font-family: "Inter";
    src: url("fonts/Inter-Variable.woff2") format("woff2-variations"),
         url("fonts/Inter-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Light only by design. Erlend's call 2026-05-11: dark mode is
     * "forferdelig å lese mye tekst mot" — light is the right
     * reading surface for a long-form documentation site, period.
     * `color-scheme: light` also tells the browser to render form
     * controls / scrollbars in their light variants regardless of
     * OS preference, so the page stays coherent on every machine. */
    color-scheme: light;

    /* Brand palette — calibrated for Word-document-style reading:
     * high contrast text on a slightly-tinted near-white surface,
     * clearly distinct card/code surfaces, no surface-deltas
     * subtle enough to vanish under standard browser rendering. */
    --canvas-ink:   oklch(20% 0.04 250);
    --studio-navy:  oklch(33% 0.06 250);
    --quiet-slate:  oklch(48% 0.04 240);

    /* Neutrals — wide, visible lightness stair. */
    --paper:        oklch(99% 0.003 250);
    --card:         oklch(94% 0.008 250);
    --border:       oklch(86% 0.01 250);
    --divider:      oklch(90% 0.007 250);
    --code-bg:      oklch(91% 0.012 250);

    /* Text — high-contrast body, like Word's near-black-on-white.
     * Muted clearly readable, never "faded". */
    --text:         oklch(20% 0.025 250);
    --muted:        oklch(40% 0.03 250);

    /* Status (used sparingly — calm variants) */
    --success:      oklch(60% 0.16 145);
    --warn:         oklch(70% 0.14 75);
    --warn-tint:    oklch(95% 0.05 75);
    --error:        oklch(56% 0.18 25);

    /* Layout */
    --prose-width:  70ch;
    --gutter:       clamp(20px, 5vw, 56px);
    --rhythm:       clamp(18px, 2vw, 26px);

    /* Type — Inter sans throughout for body + chrome, mono for
     * code. Single typeface read at different sizes / weights
     * keeps the page coherent. Inter is what Vercel / Linear /
     * Tailwind / Cloudflare docs use. */
    --font-text:    "Inter", -apple-system, BlinkMacSystemFont,
                    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-ui:      var(--font-text);
    --font-sans:    var(--font-text);
    --font-mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo,
                    Consolas, monospace;
}

/* Dark-mode media-query removed 2026-05-11. The Canvas plugin
 * admin (DESIGN.md surface) keeps its dark-mode pairings — that's
 * a different register. This is editorial, light only. */

/* ─── Reset + base ─────────────────────────────────────────────── */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--text);
    font-family: var(--font-text);
    /* Body sized to feel like a working document, not a book. 16px
       at 1.55 line-height is Word-document territory — dense enough
       to scan, comfortable enough to read paragraphs. Inter renders
       cleanly at this size on every OS. */
    font-size: 16px;
    line-height: 1.55;
    /* Inter's cv11 stylistic set gives a single-storey lowercase a,
       which reads slightly cleaner at body size. ss03 gives a
       single-storey g. liga + kern always. cv11 + ss03 are optional
       polish — falls back gracefully on browsers that don't load
       the variation. */
    font-feature-settings: "kern", "liga", "cv11", "ss03";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ─── Focus visibility (WCAG 2.4.7) ────────────────────────────
 * One pattern covers every interactive element on the site. Uses
 * `outline` (not box-shadow) so the ring renders correctly in
 * Windows High Contrast / forced-colors mode. Outline follows
 * border-radius in modern browsers, so the same rule works for
 * inline text links AND the rounded .doc-card surface. Canvas Ink
 * is the focus colour per DESIGN.md §4. Offset 3px keeps the ring
 * off the glyph and reads as deliberate. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--canvas-ink);
    outline-offset: 3px;
    border-radius: 3px;
}
.doc-card:focus-visible {
    outline: 2px solid var(--canvas-ink);
    outline-offset: 3px;
}

img, svg { display: block; max-width: 100%; }

a {
    color: var(--canvas-ink);
    text-decoration-color: color-mix(in oklch, var(--canvas-ink) 35%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color 120ms ease-out;
}
a:hover {
    text-decoration-color: var(--canvas-ink);
}

::selection {
    background: color-mix(in oklch, var(--canvas-ink) 18%, transparent);
}

/* ─── Top header ───────────────────────────────────────────────── */

.site-header {
    border-bottom: 1px solid var(--border);
    background: color-mix(in oklch, var(--paper) 92%, transparent);
    backdrop-filter: saturate(140%) blur(8px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px var(--gutter);
}

.site-header__wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--canvas-ink);
    text-decoration: none;
}
.site-header__wordmark .muted {
    font-weight: 400;
    color: var(--quiet-slate);
    letter-spacing: 0;
}

.site-nav {
    display: flex;
    gap: 22px;
    font-size: 14px;
}
.site-nav a {
    /* inline-flex so vertical padding contributes to box-size; the
       rendered hit area clears WCAG 2.2 SC 2.5.8 (≥24×24 CSS px). */
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--text);
    text-decoration: none;
    padding: 6px 2px;
    border-bottom: 1px solid transparent;
    transition: border-color 120ms ease-out, color 120ms ease-out;
}
.site-nav a:hover { color: var(--canvas-ink); border-bottom-color: var(--border); }
.site-nav a[aria-current="page"] {
    color: var(--canvas-ink);
    border-bottom-color: var(--canvas-ink);
}

/* ─── Page layout ──────────────────────────────────────────────── */

.page {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(36px, 6vw, 72px) var(--gutter) 96px;
}

.page-hero {
    margin-bottom: clamp(28px, 4vw, 56px);
    max-width: 60ch;
}
.page-hero .kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--quiet-slate);
    margin-bottom: 14px;
}
.page-hero h1 {
    font-size: clamp(32px, 4vw, 42px);
    line-height: 1.15;
    /* Inter at display sizes wants modest negative tracking
       (-0.02em); past that it starts to feel squeezed. */
    letter-spacing: -0.02em;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--canvas-ink);
}
.page-hero .lead {
    font-size: 17px;
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
}
.page-hero .meta {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
}
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text);
}
.pill--accent {
    border-color: color-mix(in oklch, var(--canvas-ink) 30%, var(--border));
    color: var(--canvas-ink);
}

/* Doc layout — sidebar + content */
.doc-grid {
    display: grid;
    gap: clamp(28px, 4vw, 56px);
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 960px) {
    .doc-grid {
        grid-template-columns: 240px minmax(0, 1fr);
    }
}

.doc-toc {
    font-size: 13.5px;
    line-height: 1.5;
}
@media (min-width: 960px) {
    .doc-toc {
        position: sticky;
        top: 84px;
        align-self: start;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
        padding-right: 8px;
    }
}
.doc-toc__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--quiet-slate);
    margin: 0 0 12px;
}
.doc-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: toc;
}
.doc-toc li { margin: 0 0 2px; }
.doc-toc li ol { padding-left: 14px; margin-top: 4px; }
.doc-toc a {
    /* Flex + min-height ensures padding contributes to box size and
       the hit area clears WCAG 2.2 SC 2.5.8 (≥24×24 CSS px) on every
       ToC link, including the deeper second-level entries. */
    display: flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px 4px 12px;
    border-radius: 4px;
    color: var(--muted);
    text-decoration: none;
    border-left: 1px solid var(--divider);
}
.doc-toc a:hover { color: var(--text); background: var(--divider); border-left-color: var(--quiet-slate); }
.doc-toc li ol a { font-size: 12.5px; }

/* ─── Content typography ───────────────────────────────────────── */

.prose {
    max-width: var(--prose-width);
}
.prose > * + * { margin-top: var(--rhythm); }

.prose h2 {
    margin-top: clamp(44px, 5vw, 64px);
    font-size: clamp(22px, 2.5vw, 26px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--canvas-ink);
    padding-top: 4px;
    scroll-margin-top: 84px;
}
.prose h2:first-child { margin-top: 0; }

.prose h3 {
    margin-top: clamp(28px, 3vw, 36px);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--text);
    scroll-margin-top: 84px;
}
.prose h4 {
    margin-top: 28px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
}

.prose h2 .anchor,
.prose h3 .anchor {
    font-weight: 400;
    color: var(--quiet-slate);
    margin-left: 8px;
    opacity: 0;
    text-decoration: none;
    transition: opacity 120ms ease-out;
}
.prose h2:hover .anchor,
.prose h3:hover .anchor { opacity: 1; }

.prose p {
    margin: 0;
    max-width: 72ch;
}
.prose strong { font-weight: 600; color: var(--text); }

.prose ul, .prose ol {
    margin: 0;
    padding-left: 22px;
    max-width: 72ch;
}
.prose li + li { margin-top: 6px; }
.prose li > p + p { margin-top: 8px; }

/* Inline code */
.prose code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    background: var(--code-bg);
    color: var(--text);
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid var(--border);
    /* Long identifiers like `register_block_type apiVersion 3 with
       render_callback` are one token to the browser; without this,
       they hold the prose column open past the viewport on mobile
       and overflow the article container on desktop. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Code blocks */
.prose pre {
    margin: 0;
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 18px 20px;
    overflow-x: auto;
    font-size: 14px;
    line-height: 1.55;
}
.prose pre code {
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
    color: var(--text);
}

/* Tables */
.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    line-height: 1.55;
}
.prose thead th {
    text-align: left;
    font-weight: 600;
    color: var(--canvas-ink);
    border-bottom: 1px solid var(--border);
    padding: 10px 14px;
    vertical-align: top;
}
.prose tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--divider);
    vertical-align: top;
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--text);
    padding: 12px 14px;
    border-bottom: 1px solid var(--divider);
    vertical-align: top;
    background: var(--card);
    width: 1%;
    white-space: nowrap;
}
.prose .table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
}

/* Blockquote — used for sidenote / context, no side-stripe */
.prose blockquote {
    margin: 0;
    padding: 14px 18px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-size: 15.5px;
}
.prose blockquote > p { max-width: none; }

/* Example callout — used in places where prose talks about a thing,
   and we want to show what the thing actually looks like. */
.example {
    margin: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 18px 20px;
}
.example__label {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--quiet-slate);
    margin: 0 0 12px;
}
.example pre {
    margin: 0;
    border: 0;
    padding: 0;
    background: none;
}
.example > * + * { margin-top: 12px; }
.example p { font-size: 15px; color: var(--muted); margin: 0; }

/* Decision / heads-up callout (warn-tinted, no side stripe) */
.callout {
    margin: 0;
    background: var(--warn-tint);
    border: 1px solid color-mix(in oklch, var(--warn) 25%, var(--border));
    border-radius: 6px;
    padding: 16px 18px;
    font-size: 15.5px;
    color: var(--text);
}
.callout__label {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--warn) 60%, var(--text));
    margin: 0 0 8px;
}

/* Phase numerals (used in foundation.html) */
.phase {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 18px;
    align-items: baseline;
    padding: 28px 0;
    border-top: 1px solid var(--divider);
}
.phase:first-of-type { border-top: 0; padding-top: 0; }
.phase__numeral {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 400;
    color: var(--quiet-slate);
    letter-spacing: 0;
    line-height: 1;
    padding-top: 4px;
}
.phase__title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--canvas-ink);
    letter-spacing: -0.01em;
}
.phase__meta {
    font-size: 12.5px;
    color: var(--quiet-slate);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 12px;
}
.phase__body > * + * { margin-top: 14px; }
.phase__body p { max-width: 72ch; font-size: 15.5px; line-height: 1.65; }
.phase__body ul { max-width: 72ch; font-size: 15.5px; }
.phase__body code { font-size: 0.88em; }

/* Index / landing tiles (no hero metric, no icon-heading-text grid) */
.doc-list {
    display: grid;
    gap: 28px;
    margin-top: clamp(32px, 5vw, 56px);
    grid-template-columns: 1fr;
}
@media (min-width: 720px) {
    .doc-list {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}
.doc-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 28px 28px 26px;
    text-decoration: none;
    color: inherit;
    transition: border-color 120ms ease-out;
}
.doc-card:hover { border-color: var(--canvas-ink); }
.doc-card__kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--quiet-slate);
    margin-bottom: 12px;
}
.doc-card h2 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    color: var(--canvas-ink);
    letter-spacing: -0.012em;
    line-height: 1.25;
}
.doc-card p {
    margin: 0;
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.55;
}
.doc-card__cta {
    margin-top: 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--canvas-ink);
}
.doc-card__cta::after { content: " →"; }

/* Site footer */
.site-footer {
    border-top: 1px solid var(--border);
    margin-top: 64px;
    padding: 32px var(--gutter) 48px;
    font-size: 13px;
    color: var(--muted);
}
.site-footer__inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.site-footer a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--divider); }
.site-footer a:hover { border-bottom-color: var(--canvas-ink); }

/* Narrow viewports: drop the wordmark subtitle so the header keeps
   one line. With "Canvas docs" hidden the wordmark becomes just
   "Gillish" and the three nav links fit on the same row at 375 px. */
@media (max-width: 480px) {
    .site-header__wordmark .muted {
        display: none;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
    }
}