/* Standing documents: the layout and the prose. Only pages on _DocLayout load this.
   Converted from the Blazor version's scoped DocLayout.razor.css and Privacy.razor.css;
   the class names were already unique to these pages, so the selectors carry over as
   they were. */

/* ==== 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;
    background: var(--jf-bg);
    color: var(--jf-text);

    /* The shell's typeface, repeated: a document is not inside `.jf-shell`, and the
       browser default is a serif - which is what the Blazor version's notice was set in,
       by omission. The size is left at the root's, a step up from the workbench's,
       because this is prose to be read rather than chrome to be scanned. */
    font-family: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
/* Matches the 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(--jf-chrome);
    border-bottom: 1px solid var(--jf-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-name,
.doc-brand:focus-visible .doc-name {
    color: var(--jf-text);
}

.doc-mark {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: var(--jf-muted);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.doc-mark-flex {
    stroke: var(--jf-accent);
}

.doc-name {
    color: var(--jf-muted);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.doc-name-accent {
    color: var(--jf-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: 720px) {
    .doc-body {
        padding-top: 1.75rem;
    }
}

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

/* Prose. Everything here is measured against the reading column set by the document
   layout, 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(--jf-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(--jf-faint);
    font-size: 0.8125rem;
}

:where(.doc-article) h2 {
    margin: 2.5rem 0 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--jf-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(--jf-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(--jf-accent);
    text-underline-offset: 0.15em;
}

:where(.doc-article) code {
    padding: 0.0625rem 0.25rem;
    border-radius: 0.1875rem;
    background: var(--jf-pane-alt);
    border: 1px solid var(--jf-border-soft);
    color: var(--jf-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(--jf-border);
    border-left: 3px solid var(--jf-accent);
    border-radius: 0.375rem;
    background: var(--jf-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(--jf-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(--jf-border-soft);
    text-align: left;
    vertical-align: top;
}

.doc-table th {
    border-bottom-color: var(--jf-border);
    color: var(--jf-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(--jf-border-soft);
    font-size: 0.875rem;
}

@media (max-width: 720px) {
    :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(--jf-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(--jf-muted);
    }
}