/* Site styles on top of Pico (vendor/pico.min.css).
   White and grey, dark by default, light only when the visitor's browser or OS asks for it.
   Layout: tokens, then colour roles, then the shared layout used by every page.
   An app brings its own colours with apps/<name>/<name>.css, loaded after this file. */

/* ---- Tokens ---- */

:root {
    /* Type: five sizes. Weights are 400 and 600 only. */
    --text-title: 2rem;
    --text-h2: 1.25rem;
    --text-lead: 1.125rem;
    --text-body: 1rem;
    --text-small: 0.875rem;

    /* Space: six steps */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;
    --space-6: 4rem;

    /* Body text stays 16px on phones and 18px from 768px up, with no growth after that. */
    --pico-font-size: 100%;
}

@media (min-width: 768px) {
    :root {
        --pico-font-size: 112.5%;
    }
}

/* ---- Colour roles ----
   paper: page background    ink: text and headings    muted: descriptions and bylines
   rule: dividers            accent: links, focus ring accent-hover: link hover
   plate: code background
   On the plain site the accent is the brightest ink, so there is no accent colour. */

:root:not([data-theme]) {
    color-scheme: dark;
    --paper: #111;
    --ink: #e6e6e6;
    --muted: #8c8c8c;
    --rule: #2b2b2b;
    --accent: #fff;
    --accent-hover: #bdbdbd;
    --plate: #1f1f1f;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        color-scheme: light;
        --paper: #fafafa;
        --ink: #222;
        --muted: #6b6b6b;
        --rule: #e2e2e2;
        --accent: #111;
        --accent-hover: #555;
        --plate: #eee;
    }
}

/* The roles above are mapped onto Pico's variables once, here. */
:root:not([data-theme]) {
    --pico-background-color: var(--paper);
    --pico-color: var(--ink);
    --pico-muted-color: var(--muted);
    --pico-muted-border-color: var(--rule);
    --pico-primary: var(--accent);
    --pico-primary-hover: var(--accent-hover);
    --pico-primary-focus: var(--accent);
    --pico-primary-underline: color-mix(in srgb, var(--accent) 40%, transparent);
    --pico-h1-color: var(--ink);
    --pico-h2-color: var(--ink);
    --pico-h3-color: var(--ink);
    --pico-h4-color: var(--ink);
    --pico-h5-color: var(--ink);
    --pico-h6-color: var(--ink);
    --pico-code-background-color: var(--plate);
    --pico-code-color: var(--ink);
    --pico-text-selection-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ---- Page ---- */

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

/* One column: 40rem of text plus a 1rem gutter on each side, at every screen width. */
main.container {
    max-width: 42rem;
    padding: min(14vh, 7rem) var(--space-3) var(--space-6);
}

h1 {
    margin-bottom: var(--space-1);
    font-size: var(--text-title);
    font-weight: 600;
    line-height: 1.2;
}

.tagline {
    margin-bottom: var(--space-5);
    color: var(--muted);
    font-size: var(--text-lead);
}

.tagline.tight {
    margin-bottom: var(--space-4);
}

.byline {
    margin-top: var(--space-5);
    color: var(--muted);
    font-size: var(--text-small);
}

.app-icon {
    display: block;
    margin-bottom: var(--space-4);
}

/* ---- Link list: one row per link, thin dividers (home page apps, app page docs) ---- */

.link-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--rule);
}

.link-list li {
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--rule);
}

/* The whole row is the link. Only the title is underlined. */
.link-list a {
    display: block;
    padding: var(--space-3) 0;
    font-size: var(--text-lead);
    text-decoration: none;
}

.link-list .title {
    text-decoration: underline;
    text-decoration-color: var(--pico-underline);
    text-underline-offset: 0.15em;
}

.link-list .app {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.link-list .app img {
    flex: none;
}

.link-list .desc {
    display: block;
    margin-top: var(--space-1);
    color: var(--muted);
    font-size: var(--text-small);
}

.link-list li.empty {
    padding: var(--space-3) 0;
    color: var(--muted);
}

/* ---- Doc pages (guide, support, privacy) ---- */

main.container.doc {
    max-width: 40rem;
    padding-top: 3rem;
    line-height: 1.6;
}

main.doc h1 {
    margin-bottom: var(--space-3);
}

.doc-nav {
    margin: 0 0 var(--space-3);
    font-size: var(--text-small);
}

/* Taller tap target without moving the text */
.doc-nav a {
    display: inline-block;
    margin-block: calc(-1 * var(--space-2));
    padding-block: var(--space-2);
}

main.doc h2 {
    margin: var(--space-5) 0 var(--space-2);
    font-size: var(--text-h2);
    font-weight: 600;
    line-height: 1.2;
}

main.doc h3 {
    margin: var(--space-4) 0 var(--space-2);
    font-size: var(--text-lead);
    font-weight: 600;
    line-height: 1.2;
}

main.doc p {
    margin-bottom: var(--space-3);
}

main.doc ul,
main.doc ol {
    margin-bottom: var(--space-3);
}

main.doc li {
    margin-bottom: var(--space-2);
}

main.doc code {
    padding: 0.1em 0.35em;
    background: var(--plate);
    color: var(--ink);
    font-size: var(--text-small);
}

main.doc table {
    margin-bottom: var(--space-4);
}

/* Contents list on a long page */
.toc ul {
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
    columns: 2 16rem;
    column-gap: var(--space-5);
}

main.doc .toc li {
    margin: 0;
    padding: 0;
    list-style: none;
    break-inside: avoid;
}

.toc a {
    display: inline-block;
    padding-block: var(--space-2);
}

.toc h2 {
    margin-top: var(--space-5);
}

/* Screenshots */
.shot {
    margin: var(--space-4) 0;
}

.shot img {
    display: block;
    width: 300px;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--rule);
    border-radius: 0.5rem;
}

.shot figcaption {
    margin-top: var(--space-2);
    color: var(--muted);
    font-size: var(--text-small);
    font-style: italic;
}