@charset "UTF-8";

/* ==========================================================================
   Power of the Word — jaberi.org
   Support + Privacy site. Built as a web companion to the app, to Apple's
   Human Interface Guidelines sensibilities.

   Sources
   -------
   Every token below is traceable. Because developer.apple.com/design renders
   its HIG pages client-side (a fetch returns a ~900-character JS shell), the
   HIG values here come from the app's own HIG-derived design system, which
   quotes Apple verbatim and carries rule ids:
     DS = /Users/ajaberi/personal-projects/potw/Power-Of-The-Word/
          docs/DESIGN_SYSTEM.md
     types/theme.ts        — LIGHT_BASE / DARK_BASE semantic roles
     constants/themePresets.ts — the `system` preset accents (near-monochrome;
                             the app's default look, and what this site uses)

   - Type ramp .......... DS §3.1, "Apple's Dynamic Type table at the Large
                          (default) size, verbatim". Large Title 34/41 →
                          Caption 2 11/13. These are the only sizes used.
   - Colour roles ....... DS §4.1 (app token → iOS semantic colour) and §4.2
                          (the three-tier grouped surface hierarchy).
   - Grouping ........... DS §2.6 + §5.2 (inset-grouped sections, hairline
                          inset to the text edge, no separator on the last
                          row, no border on a section).
   - Layout margins ..... DS §2.3 (16 compact / 24 medium+), §3.6 measure.
   - Touch target ....... DS §2.4, MIN_TOUCH_TARGET 44.
   - Contrast ........... DS §4.9. Verified for this palette by the gate
                          script: 62 pairs, light and dark, all clear their
                          bar. Bars: 4.5:1 text, 3:1 non-text boundaries.
                          Tightest text pair: 4.75:1 (the hero sentence over
                          the glow at its own peak, dark) and 6.57:1 (light).
                          Tightest boundary: 3.16:1 (the quiet button's edge
                          over the glow, light).
   - Motion ............. DS §6.3 timing.effectsFast = 150ms with
                          cubic-bezier(0.31, 0.94, 0.34, 1.00). DS §6.3:
                          "Nothing in this app runs longer than 400 ms."

   Documented deviations (see the report):
   - Body leading is raised from the HIG's 17/22 (1.294) to 1.55 for running
     multi-line prose; HIG leadings are tuned for single-line UI labels, and
     DS §3.4 sets 1.5x as the readability floor for multi-line passages. UI
     labels (nav, buttons, row titles) keep the HIG leading exactly.
   - Grouped-section radius is 10px (the classic iOS inset-grouped value), not
     the app's radius.group of 16 (DS §2.4).
   - Light mode raises a section with a shadow; dark mode raises it by
     lightening the fill and uses no shadow. Per types/theme.ts: "iOS raises
     light-mode surfaces with a shadow rather than a lighter fill... Dark mode
     raises by lightening, matching iOS's tertiarySystemBackground."
   - The quiet control's fill is the `system` preset's `tint` verbatim in both
     modes. In dark mode that value (#2C2C2E) is also this site's `card`, so a
     quiet control is only ever placed on `bg`, never inside a grouped section;
     its `control-edge` hairline would still define it there, but the fill
     would not.
   - A soft warm glow sits behind the app icon in the hero, and nowhere else.
     It is decorative: the gradient's own peak is composited into the contrast
     gate so the copy around it is proven to still clear 4.5:1.
   - Playfair Display is not loaded: DS §3.4 allows it only for scripture, and
     there is no scripture quote in this site's copy. None was added.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* --- Surfaces: the three-tier grouped set (DS §4.2). Light values are
       LIGHT_BASE from types/theme.ts; `elevated` equals `card` because iOS
       raises light surfaces with shadow, not tint. ------------------------- */
    --bg: #F6F7FB;
    /* systemGroupedBackground */
    --card: #FFFFFF;
    /* secondarySystemGroupedBackground */
    --elevated: #FFFFFF;
    /* tertiarySystemGroupedBackground */
    --quiet-fill: #F0F0F2;
    /* `system` preset light `tint` — the quiet control's fill */

    /* --- Labels and lines --- */
    --text: #101828;
    /* label */
    --subtext: #475467;
    /* secondaryLabel */
    --border: #E5E7EB;
    /* separator — container outlines */
    --separator: #C6C6C8;
    /* opaqueSeparator — hairline between rows */

    /* --- Accent: the `system` preset, light (constants/themePresets.ts).
       Near-monochrome by design — the app's default look is text-led, so the
       accent is a neutral grey rather than a colour. ----------------------- */
    --primary: #3A3A3C;
    --primary-alt: #5A5A5C;
    --text-on-primary: #FFFFFF;

    /* The hairline that gives a quiet control a real 3:1 boundary. iOS
       systemGray, nudged one step darker in light mode so it clears the bar
       against `bg` as well as `card`. */
    --control-edge: #86868B;

    /* The one warm accent on the site: a decorative glow behind the hero icon,
       sampled from the icon artwork itself (its gold #FFDB79 and its rose
       #FFA457, met in the middle). */
    --glow-tint: rgba(255, 196, 120, 0.18);

    /* --- Translucent nav material. A wash of `bg`; the solid fallback for
       browsers without backdrop-filter is `bg` itself. ---------------------- */
    --bar: rgba(246, 247, 251, 0.72);
    --bar-solid: #F6F7FB;

    /* --- Elevation. Light only (see the deviations note above). ----------- */
    --shadow-section: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 1px rgba(16, 24, 40, 0.03);
    --shadow-button: 0 1px 2px rgba(16, 24, 40, 0.16);

    /* --- Type ramp: Apple's Dynamic Type table at Large, verbatim (DS §3.1).
       Expressed in rem against the 16px root so browser text zoom reflows the
       page the way Dynamic Type reflows the app (DS §3.3). ------------------ */
    --large-title: 2.125rem;
    /* 34pt */
    --title1: 1.75rem;
    /* 28pt */
    --title2: 1.375rem;
    /* 22pt */
    --title3: 1.25rem;
    /* 20pt */
    --headline: 1.0625rem;
    /* 17pt, semibold */
    --body: 1.0625rem;
    /* 17pt */
    --callout: 1rem;
    /* 16pt */
    --subheadline: 0.9375rem;
    /* 15pt */
    --footnote: 0.8125rem;
    /* 13pt */
    --caption1: 0.75rem;
    /* 12pt */
    --caption2: 0.6875rem;
    /* 11pt — the floor (DS §3.3) */

    /* HIG leadings, for single-line UI labels. */
    --lh-large-title: 1.2059;
    /* 41/34 */
    --lh-title1: 1.2143;
    /* 34/28 */
    --lh-title2: 1.2727;
    /* 28/22 */
    --lh-title3: 1.25;
    /* 25/20 */
    --lh-ui: 1.2941;
    /* 22/17 — headline and body as a label */
    --lh-footnote: 1.3846;
    /* 18/13 */
    /* Raised leading for running prose — see the deviations note. */
    --lh-prose: 1.55;

    /* --- Faces. Inter is the app's UI face; the fallback stack is real
       system UI, so the page is correct before the webfont lands. ---------- */
    --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Segoe UI", Roboto, sans-serif;

    /* --- Metrics --- */
    --gutter: 16px;
    /* DS §2.3 layout.margin, compact */
    --measure: 65ch;
    /* DS §3.6 — a single readable column */
    --row-padding: 16px;
    /* DS §5.2 — matches the gutter, so text lines up */
    --section-gap: 24px;
    /* DS §2.3 layout.sectionGap */
    --radius-group: 10px;
    /* classic iOS inset-grouped */
    --radius-control: 12px;
    --touch-target: 44px;
    /* DS §2.4 MIN_TOUCH_TARGET */
    --bar-height: 44px;
    /* an iOS nav bar is 44pt */

    /* --- Motion (DS §6.3) --- */
    --ease-fast: cubic-bezier(0.31, 0.94, 0.34, 1.00);
    --duration-fast: 150ms;

    color-scheme: light dark;
}

/* Dark mode raises surfaces by lightening the fill, never by inverting the
   palette: bg → card → elevated are DARK_BASE's three tiers, and the accent
   is the `system` preset's dark pair. */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1C1C1E;
        --card: #2C2C2E;
        --elevated: #333335;
        /* `system` preset dark `tint` — see the deviations note. */
        --quiet-fill: #2C2C2E;

        --text: #E5E5E7;
        --subtext: #A1A1A6;
        --border: #3A3A3C;
        --separator: #38383A;

        --primary: #A0A0A5;
        --primary-alt: #C0C0C5;
        --text-on-primary: #1C1C1E;
        --control-edge: #8E8E93;
        --glow-tint: rgba(255, 196, 120, 0.14);

        --bar: rgba(28, 28, 30, 0.72);
        --bar-solid: #1C1C1E;

        /* No shadow in dark mode — elevation is the lighter fill. */
        --shadow-section: none;
        --shadow-button: none;
    }
}


/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
    /* Explicit, so the page never shows the UA's white behind dark content. */
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--body);
    line-height: var(--lh-prose);
    font-weight: 400;
    /* Inter's optical sizing and default figures. */
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Belt and braces against a stray wide child. */
    overflow-x: hidden;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
    margin: 0;
}

ul {
    padding: 0;
    list-style: none;
}

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

a {
    color: var(--primary);
    text-decoration: none;
}

/* Long unbreakable tokens — an email address, a URL — must not force the page
   to scroll sideways at 375px. */
a,
p,
li,
h1,
h2,
h3 {
    overflow-wrap: break-word;
}

strong {
    font-weight: 600;
    color: var(--text);
}

/* Nothing in the copy needs these, but if a table or a code block is ever
   added it must scroll inside its own box, not drag the page. */
pre,
table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}


/* --------------------------------------------------------------------------
   3. Focus and the skip link
   -------------------------------------------------------------------------- */

/* :focus-visible only, so a mouse click does not leave a ring, but every
   keyboard path shows one. `primary` is 9.3:1 on bg and 10.0:1 on card in
   light mode, 6.5:1 and 5.4:1 in dark — far over the 3:1 a non-text indicator
   needs (DS §4.9). */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: var(--gutter);
    top: 0;
    z-index: 100;
    padding: 10px 16px;
    min-height: var(--touch-target);
    display: inline-flex;
    align-items: center;
    background-color: var(--card);
    color: var(--primary);
    font-size: var(--subheadline);
    font-weight: 600;
    border-radius: 0 0 var(--radius-group) var(--radius-group);
    /* Off-screen until focused. No shadow while parked: a drop shadow on an
       element translated just above the viewport still paints a sliver at the
       top edge of the page. */
    box-shadow: none;
    transform: translateY(-100%);
    transition: transform var(--duration-fast) var(--ease-fast);
}

.skip-link:focus-visible {
    transform: translateY(0);
    box-shadow: var(--shadow-section);
}


/* --------------------------------------------------------------------------
   4. Shell
   -------------------------------------------------------------------------- */

/* One readable column, centred, with a floor of 16px on each side. */
.wrap {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.main {
    padding-block: var(--section-gap) 48px;
}

/* Any element that can be a fragment target must clear the sticky bar when
   it is scrolled to. This is load-bearing: the app stores point their
   data-deletion URL at /privacy#delete, and without it that heading lands
   underneath the bar. */
[id] {
    scroll-margin-top: calc(var(--bar-height) + 16px);
}

/* The "Back to Support" line under the policy. */
.back-link {
    margin-top: var(--section-gap);
}