/* Copyright (C) 2026 Plabayo
   License: https://github.com/plabayo/flowsync/blob/main/LICENSE
   Source-available; non-commercial use only. */

/* Cascade layers: declared up front so the order is explicit. Per-page
   styles (when they arrive) are inlined unlayered after this file and
   therefore always win over `base` — no specificity battles, no
   !important needed. */
@layer base;

@layer base {
    /* ---------- reset ---------- */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }
    * {
        margin: 0;
    }
    body {
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
    }
    img,
    picture,
    video,
    canvas,
    svg {
        display: block;
        max-width: 100%;
    }
    input,
    button,
    textarea,
    select {
        font: inherit;
        color: inherit;
    }
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: break-word;
    }
    button {
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    a {
        color: var(--accent);
    }

    /* ---------- design tokens ----------
       Single declaration per token via light-dark() — no parallel dark-mode
       block to keep in sync. */
    html {
        color-scheme: light dark;
        /* Reserve room for the scrollbar so layout doesn't shift when content
           grows past the viewport. */
        scrollbar-gutter: stable;
    }
    :root {
        --bg: light-dark(#faf8ff, #14171c);
        --fg: light-dark(#1a1530, #f3f1fb);
        --muted: light-dark(#5b5470, #b9b3cc);
        /* Light-mode accent is darkened from the original #7c5cff so links
           (e.g. the footer "Plabayo" link, rendered as small text) clear the
           WCAG 2 AA 4.5:1 contrast ratio against both --bg (#faf8ff, ~5.2:1)
           and --paper (#ffffff, ~5.5:1). The axe e2e a11y check enforces this.
           Dark-mode accent is unchanged (light text on a dark surface). */
        --accent: light-dark(#6a47f5, #b9a8ff);
        --accent-fg: light-dark(#ffffff, #14101f);
        --paper: light-dark(#ffffff, #1d2230);
        --border: light-dark(#1a1530, #f3f1fb);
        --warn-bg: light-dark(#fde68a, #facc15);
        --warn-fg: light-dark(#4a3500, #14181f);

        --radius: 10px;
        --gap: 12px;
        --space: 16px;
        --content-width: 720px;
        font-size: 16px;
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        color: var(--fg);
        background: var(--bg);
    }

    /* ---------- base layout (mobile first) ---------- */
    body {
        padding: 16px;
    }
    /* Skip-to-content link. Off-screen until focused via Tab. */
    .skip-link {
        position: absolute;
        inset-inline-start: 8px;
        inset-block-start: 8px;
        padding: 8px 12px;
        background: var(--accent);
        color: var(--accent-fg);
        border-radius: var(--radius);
        text-decoration: none;
        font-weight: 600;
        z-index: 1000;
        transform: translateY(-200%);
        transition: transform 120ms ease-out;
    }
    .skip-link:focus,
    .skip-link:focus-visible {
        transform: translateY(0);
        outline: 2px solid var(--accent-fg);
        outline-offset: 2px;
    }
    .page {
        max-width: var(--content-width);
        margin-inline: auto;
    }
    main > * + * {
        margin-block-start: var(--space);
    }
    section + section {
        margin-block-start: calc(var(--space) * 1.5);
    }

    /* ---------- page header ---------- */
    .page-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-block-end: calc(var(--space) * 1.25);
        padding-block-end: 8px;
        border-block-end: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
    }
    .page-header h1 {
        font-size: 1.4rem;
        text-align: center;
        flex: 1;
    }
    .page-header .home-link {
        font-size: 1.4rem;
        text-decoration: none;
        line-height: 1;
        /* WCAG 2.5.5 — 44x44 minimum tap target. */
        min-inline-size: 44px;
        min-block-size: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .theme-toggle {
        flex: 0 0 auto;
        background: none;
        border: none;
        padding: 4px;
        font-size: 1.1rem;
        line-height: 1;
        border-radius: 6px;
        /* Use colour rather than opacity for the resting state so the icon
           still passes non-text contrast even when not hovered/focused. */
        color: color-mix(in srgb, currentColor 70%, transparent);
        transition:
            color 120ms ease,
            background 120ms ease;
        min-inline-size: 44px;
        min-block-size: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .theme-toggle:hover {
        color: currentColor;
        background: color-mix(in srgb, var(--fg) 8%, transparent);
    }
    .theme-toggle:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
        color: currentColor;
    }

    /* ---------- intro / prose ---------- */
    .page-intro {
        margin-block-end: var(--space);
        color: var(--muted);
        font-size: 1rem;
    }

    /* ---------- shared box ---------- */
    .box {
        border: 1px solid var(--border);
        padding: calc(var(--space) * 1.1) var(--space);
        border-radius: var(--radius);
        background: var(--paper);
    }
    .box > * + * {
        margin-block-start: 10px;
    }

    /* ---------- focus ---------- */
    button:focus-visible,
    input:focus-visible,
    a:focus-visible {
        outline: 3px solid var(--accent);
        outline-offset: 2px;
    }

    /* ---------- footer ---------- */
    .site-footer {
        margin-block-start: calc(var(--space) * 3.5);
        padding-block-start: calc(var(--space) * 1.25);
        border-block-start: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
        color: var(--muted);
        font-size: 0.88rem;
    }

    /* ---------- offline indicator ----------
       Hidden by default; app.js toggles `is-offline` on <body> from the
       browser's online/offline events. */
    .offline-banner {
        display: none;
        background: var(--warn-bg);
        color: var(--warn-fg);
        padding: 8px 12px;
        text-align: center;
        font-size: 0.95rem;
        font-weight: 600;
        border-radius: var(--radius);
        margin-block-end: var(--space);
    }
    body.is-offline .offline-banner {
        display: block;
    }

    /* ---------- tablet upgrade ---------- */
    @media (min-width: 600px) {
        body {
            padding: 28px;
        }
        .page-header h1 {
            font-size: 1.8rem;
        }
        main > * + * {
            margin-block-start: calc(var(--space) * 1.25);
        }
    }

    /* ---------- desktop upgrade ---------- */
    @media (min-width: 960px) {
        :root {
            --content-width: 820px;
        }
    }
} /* end @layer base */

/* ---------- cross-document View Transitions ----------
   Opt every same-origin navigation into the View Transitions API for a
   native-app feel. Older browsers ignore the at-rule and fall back to
   instant navigation — pure progressive enhancement. */
@view-transition {
    navigation: auto;
}

/* Honour the user's motion preference: keep the snapshot/swap machinery
   running (so navigation completes as fast as a default one) but disable
   every animation on the transition pseudo-elements. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}