/*
 * The website's own pages (privacy, terms, support, help, licenses), written by
 * scripts/gen-pages.mjs. Plain HTML that works without the app's JavaScript,
 * in the app's palette (theme.css): ivory and gold by day, black and gold at
 * night. The fonts are the app's packaged Cairo: nothing loads from elsewhere.
 */
@font-face {
    font-family: 'Cairo';
    font-weight: 200 1000;
    font-display: swap;
    src: url('/fonts/cairo-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Cairo';
    font-weight: 200 1000;
    font-display: swap;
    src: url('/fonts/cairo-latin-ext.woff2') format('woff2');
    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: 'Cairo';
    font-weight: 200 1000;
    font-display: swap;
    src: url('/fonts/cairo-latin.woff2') format('woff2');
    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;
}

:root {
    color-scheme: light dark;
    --canvas: #FAF8F3;
    --surface: #FFFFFF;
    --line: #E5DECF;
    --fg: #1A1712;
    --fg-muted: #5C5446;
    /* Gold for text and edges: deep gold by day, as accent-ink in the app. */
    --gold: #80600E;
}
@media (prefers-color-scheme: dark) {
    :root {
        --canvas: #0B0B0C;
        --surface: #151517;
        --line: #2E2C29;
        --fg: #F3EFE6;
        --fg-muted: #BDB6A6;
        --gold: #D4AF37;
    }
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--canvas);
    color: var(--fg);
    font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 17px;
    line-height: 1.7;
}

a { color: var(--gold); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 16px;
}
.brand {
    color: var(--fg);
    font-weight: 900;
    font-size: 22px;
    text-decoration: none;
    letter-spacing: -0.01em;
}
.brand span { color: var(--gold); }
.lang {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding-inline: 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    text-decoration: none;
    font-weight: 700;
}

.pages {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-block: 4px 16px;
    border-bottom: 1px solid var(--line);
}
.pages a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding-inline: 14px;
    border-radius: 12px;
    color: var(--fg-muted);
    text-decoration: none;
    font-weight: 600;
}
.pages a[aria-current="page"] { color: var(--fg); background: var(--surface); border: 1px solid var(--line); }

main { padding-block: 24px 48px; }
h1 { font-size: 32px; line-height: 1.25; margin: 0 0 4px; }
h2 { font-size: 22px; line-height: 1.35; margin: 36px 0 8px; }
h3 { font-size: 18px; margin: 24px 0 4px; }
.updated { color: var(--fg-muted); margin: 0 0 24px; font-size: 15px; }
.lead {
    background: var(--surface);
    border: 1px solid var(--line);
    border-inline-start: 4px solid var(--gold);
    border-radius: 16px;
    padding: 16px 20px;
}
.lead ul { margin: 0; padding-inline-start: 20px; }
ul, ol { padding-inline-start: 24px; }
li { margin-block: 4px; }
code, .ltr { direction: ltr; unicode-bidi: isolate; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Help: the search box and the sections it filters. */
.search {
    width: 100%;
    min-height: 48px;
    padding-inline: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    color: var(--fg);
    font: inherit;
}
.topic { padding-block: 4px; }
.topic[hidden] { display: none; }
.none { color: var(--fg-muted); }

/* Licenses: one entry per package. */
details { border-bottom: 1px solid var(--line); padding-block: 8px; }
summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; gap: 8px; }
summary small { color: var(--fg-muted); }
pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 13px;
    line-height: 1.5;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    direction: ltr;
    text-align: left;
}

footer {
    border-top: 1px solid var(--line);
    padding-block: 24px 40px;
    color: var(--fg-muted);
    font-size: 15px;
}
footer p { margin: 4px 0; }