@import 'JsonFlex.Client.ptmg4lm2tu.bundle.scp.css';

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

.doc[b-5yl21ney29] {
    min-height: 100vh;
    background: var(--jf-bg);
    color: var(--jf-text);
}

/* 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[b-5yl21ney29] {
    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[b-5yl21ney29] {
    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[b-5yl21ney29],
.doc-brand:focus-visible .doc-name[b-5yl21ney29] {
    color: var(--jf-text);
}

.doc-mark[b-5yl21ney29] {
    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[b-5yl21ney29] {
    stroke: var(--jf-accent);
}

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

.doc-name-accent[b-5yl21ney29] {
    color: var(--jf-accent);
}

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

@media (max-width: 720px) {
    .doc-body[b-5yl21ney29] {
        padding-top: 1.75rem;
    }
}
/* /Components/Pages/Privacy.razor.rz.scp.css */
/* 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. */

.doc-article[b-rgk6030eol] {
    line-height: 1.65;
}

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

.doc-article h1[b-rgk6030eol] {
    margin: 0;
    font-size: 2rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.doc-updated[b-rgk6030eol] {
    margin: 0.5rem 0 2rem;
    color: var(--jf-faint);
    font-size: 0.8125rem;
}

.doc-article h2[b-rgk6030eol] {
    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;
}

.doc-article h3[b-rgk6030eol] {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 650;
}

.doc-article p[b-rgk6030eol] {
    margin: 0 0 1rem;
    color: var(--jf-text);
}

.doc-article ul[b-rgk6030eol] {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.doc-article li[b-rgk6030eol] {
    margin-bottom: 0.5rem;
}

.doc-article a[b-rgk6030eol] {
    color: var(--jf-accent);
    text-underline-offset: 0.15em;
}

.doc-article code[b-rgk6030eol] {
    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[b-rgk6030eol] {
    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[b-rgk6030eol] {
    margin: 0 0 0.75rem;
    padding-top: 0;
    border-top: 0;
    font-size: 0.9375rem;
}

.doc-summary ul[b-rgk6030eol] {
    margin: 0;
}

.doc-summary li:last-child[b-rgk6030eol] {
    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[b-rgk6030eol] {
    margin: 1.5rem 0;
    padding: 1.125rem 1.375rem;
    border: 1px dashed var(--jf-border);
    border-radius: 0.375rem;
}

.doc-check p:last-child[b-rgk6030eol] {
    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[b-rgk6030eol] {
    margin: 0 0 1.25rem;
    overflow-x: auto;
}

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

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

.doc-table th[b-rgk6030eol] {
    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[b-rgk6030eol] {
    white-space: nowrap;
}

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

@media (max-width: 720px) {
    .doc-article h1[b-rgk6030eol] {
        font-size: 1.625rem;
    }

    .doc-summary[b-rgk6030eol],
    .doc-check[b-rgk6030eol] {
        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[b-rgk6030eol] {
        overflow-x: visible;
    }

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

    .doc-table thead[b-rgk6030eol] {
        display: none;
    }

    .doc-table tr[b-rgk6030eol] {
        padding: 0.875rem 0;
        border-bottom: 1px solid var(--jf-border-soft);
    }

    .doc-table td[b-rgk6030eol] {
        padding: 0;
        border-bottom: 0;
    }

    .doc-table td:first-child[b-rgk6030eol] {
        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[b-rgk6030eol] {
        margin-top: 0.25rem;
        color: var(--jf-muted);
    }
}