/* Standing documents: the layout and the prose. Only pages on _DocLayout load this. */

/* ==== Document layout ======================================================= */

/* The shell for a standing document. Colours come from the theme tokens in app.css,
   which the page head has already resolved before first paint, so this page is in the
   reader's chosen theme without any script of its own. */

.doc {
    min-height: 100vh;
    color: var(--og-text);

    /* A step up from the workbench's size, because this is prose to be read rather
       than chrome to be scanned. The typeface comes from body in app.css. */
    font-size: 0.9375rem;
}

/* Matches the workbench app bar's height and chrome, so following a link out of the
   app and back does not feel like arriving somewhere else. */
.doc-bar {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    height: 2.75rem;
    padding: 0 1rem;
    background: var(--og-chrome);
    border-bottom: 1px solid var(--og-border);
}

.doc-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem;
    border-radius: 0.25rem;
    color: inherit;
    text-decoration: none;
}

.doc-brand:hover,
.doc-brand:focus-visible {
    background: var(--og-chrome-hover);
}

/* The mark, as in the workbench's app bar. */
.brand-mark {
    width: 1.5rem;
    height: 1.5rem;
}

.brand-mark-card { fill: var(--og-text); }
.brand-mark-image { fill: var(--og-accent); }
.brand-mark-sun { fill: #ffe0d1; }
.brand-mark-hill { fill: color-mix(in srgb, var(--og-accent) 70%, #8a2a0a); }
.brand-mark-line { fill: none; stroke: var(--og-faint); stroke-width: 2.4; stroke-linecap: round; }

/* The same wordmark as the workbench's app bar. */
.doc-name {
    color: var(--og-text);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.doc-name-accent {
    color: var(--og-accent);
}

/* A measure, not a full-width page: this is prose and it is long. */
.doc-body {
    max-width: 46rem;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 6rem;
}

@media (max-width: 864px) {
    .doc-body {
        padding-top: 1.75rem;
    }
}

/* ==== Privacy notice ======================================================== */

/* Prose. Everything here is measured against the reading column set by DocLayout, and
   every colour is a theme token, so the page works in both themes without a rule of
   its own for either.

   The bare-element defaults are wrapped in `:where()` so they carry no class weight:
   otherwise `.doc-article p` outranks `.doc-updated` and `.doc-eyebrow`, and every
   paragraph with a class of its own comes out as plain body text. */

.doc-article {
    line-height: 1.65;
}

.doc-eyebrow {
    margin: 0 0 0.375rem;
    color: var(--og-accent);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

:where(.doc-article) h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.doc-updated {
    margin: 0.5rem 0 2rem;
    color: var(--og-muted);
    font-size: 0.8125rem;
}

:where(.doc-article) h2 {
    margin: 2.5rem 0 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--og-border-soft);
    font-size: 1.125rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

:where(.doc-article) h3 {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 650;
}

:where(.doc-article) p {
    margin: 0 0 1rem;
    color: var(--og-text);
}

:where(.doc-article) ul {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

:where(.doc-article) li {
    margin-bottom: 0.5rem;
}

:where(.doc-article) a {
    color: var(--og-accent);
    text-underline-offset: 0.15em;
}

:where(.doc-article) code {
    padding: 0.0625rem 0.25rem;
    border-radius: 0.1875rem;
    background: var(--og-pane-alt);
    border: 1px solid var(--og-border-soft);
    color: var(--og-text);
    font-family: 'JetBrains Mono', 'Cascadia Mono', 'Consolas', ui-monospace, monospace;
    font-size: 0.8125em;
}

/* The one part of the page most readers will read: the four claims, up front and
   boxed, so the detail below is confirmation rather than homework. */
.doc-summary {
    margin: 0 0 1rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--og-border);
    border-left: 3px solid var(--og-accent);
    border-radius: 0.375rem;
    background: var(--og-pane-alt);
}

.doc-summary h2 {
    margin: 0 0 0.75rem;
    padding-top: 0;
    border-top: 0;
    font-size: 0.9375rem;
}

.doc-summary ul {
    margin: 0;
}

.doc-summary li:last-child {
    margin-bottom: 0;
}

/* "How to check this yourself" - visibly an aside rather than more of the argument,
   because its point is that the argument need not be believed. */
.doc-check {
    margin: 1.5rem 0;
    padding: 1.125rem 1.375rem;
    border: 1px dashed var(--og-border);
    border-radius: 0.375rem;
}

.doc-check p:last-child {
    margin-bottom: 0;
}

/* Narrow screens get a scrolling table rather than three squeezed columns; the wrapper
   is what scrolls, so the page itself never does sideways. */
.doc-table-wrap {
    margin: 0 0 1.25rem;
    overflow-x: auto;
}

.doc-table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.doc-table th,
.doc-table td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--og-border-soft);
    text-align: left;
    vertical-align: top;
}

.doc-table th {
    border-bottom-color: var(--og-border);
    color: var(--og-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.doc-table td:first-child {
    white-space: nowrap;
}

.doc-back {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--og-border-soft);
    font-size: 0.875rem;
}

@media (max-width: 864px) {
    :where(.doc-article) h1 {
        font-size: 1.625rem;
    }

    .doc-summary,
    .doc-check {
        padding-inline: 1rem;
    }

    /* Three columns will not fit a phone, and the scrolling wrapper hides the third
       one - the *why*, which is the column that answers the question a reader came to
       this table with. So each row becomes a block instead: the key, what it holds,
       and why, stacked. No column headings are needed once they are stacked; a code
       chip over two sentences reads as the definition it is. */
    .doc-table-wrap {
        overflow-x: visible;
    }

    .doc-table,
    .doc-table tbody,
    .doc-table tr,
    .doc-table td {
        display: block;
        min-width: 0;
        width: auto;
    }

    .doc-table thead {
        display: none;
    }

    .doc-table tr {
        padding: 0.875rem 0;
        border-bottom: 1px solid var(--og-border-soft);
    }

    .doc-table td {
        padding: 0;
        border-bottom: 0;
    }

    .doc-table td:first-child {
        margin-bottom: 0.375rem;
    }

    /* The reason, told apart from the description above it by weight rather than by a
       heading that would cost a line of its own on the narrowest screen there is. */
    .doc-table td:last-child {
        margin-top: 0.25rem;
        color: var(--og-muted);
    }
}

/* ==== Not found ============================================================= */

.missing {
    display: grid;
    place-items: center;
    min-height: 50vh;
    text-align: center;
}

.missing h1 {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.missing p {
    margin: 0 0 1rem;
    color: var(--og-muted);
}

.missing a {
    color: var(--og-accent);
}