/*
 * saymzes-default.css: the Saymzes look, shared by every page.
 *
 * Written from docs/design/README.md (M10): the tokens, the two self-hosted faces, the base, the
 * pieces every page shares, the bare signed-out layout, and the corrections. The web app's own
 * pieces (the board, the reveal, the lobby) are saymzes-webapp.css, which M12b fills.
 *
 * Rules of the file:
 *   - Phone-first. Base styles are the phone; a min-width query adds to them.
 *   - Every colour is a --sz-* token. No stylesheet repeats a hex after section 2.
 *   - Light only. M10 drew no dark theme, so nothing keys off prefers-color-scheme.
 *   - Sizes are rem, so text scales to 200% without breaking.
 *   - Bootstrap is loaded before this file for layout utilities only; section 7 takes back
 *     whatever it and Radzen set that fights the tokens.
 */

/* ------------------------------------------------------------------------------------------
 * 1. Faces. Self-hosted (spec 09, Third parties): both SIL OFL, licences beside the files.
 * ------------------------------------------------------------------------------------------ */

@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Atkinson Hyperlegible";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Atkinson Hyperlegible";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
}

/* ------------------------------------------------------------------------------------------
 * 2. Tokens.
 * ------------------------------------------------------------------------------------------ */

:root {
    /* Colour */
    --sz-paper: #F4EFE4;
    --sz-card: #FFFCF5;
    --sz-ink: #1B2236;
    --sz-ink-2: #596075;
    --sz-line: #DDD3C0;
    --sz-line-strong: #B9AE98;
    --sz-blue: #2B47C9;
    --sz-blue-dark: #1E2F8A;
    --sz-blue-soft: #E4E9FB;
    --sz-blue-mist: #D6DDFA;                   /* The daily card's eyebrow, on Blue. */
    --sz-marigold: #F2B233;
    --sz-marigold-soft: #FBEBC2;
    --sz-marigold-dark: #7D5505; /* Correction 1: Marigold as text. */
    --sz-white: #FFFFFF;
    --sz-scrim: rgba(27, 34, 54, 0.52);
    --sz-graph-rule: #9AA0AE;                  /* The rule beside a bucket graph's boundary label. */
    --sz-band-rule: rgba(255, 252, 245, 0.55); /* The translucent Card hairline between bands. */

    /* The closeness scale: one blue ramp, the points always printed on it. */
    --sz-bucket-0: #1E2F8A;
    --sz-bucket-0-text: #FFFFFF;
    --sz-bucket-1: #3E5BD6;
    --sz-bucket-1-text: #FFFFFF;
    --sz-bucket-2: #93A6EE;
    --sz-bucket-2-text: #1B2236;
    --sz-bucket-3: #CBD4F7;
    --sz-bucket-3-text: #1B2236;
    --sz-bucket-4: #ECE6D8;
    --sz-bucket-4-text: #596075;

    /* Type */
    --sz-font-display: "Bricolage Grotesque", system-ui, sans-serif;
    --sz-font-body: "Atkinson Hyperlegible", system-ui, sans-serif;
    --sz-text-score: 3.75rem;      /* 60 */
    --sz-text-title: 2.25rem;      /* 36: page titles run 34 to 40 */
    --sz-text-sheet: 1.625rem;     /* 26 */
    --sz-text-target: 1.5rem;      /* 24 */
    --sz-text-head: 1.25rem;       /* 20: card heads run 19 to 21 */
    --sz-text-button: 1.0625rem;   /* 17 */
    --sz-text-body: 1rem;          /* 16: body runs 15 to 17 */
    --sz-text-secondary: 0.875rem; /* 14 */
    --sz-text-eyebrow: 0.8125rem;  /* 13 */
    --sz-text-grid: 0.75rem;       /* 12 */
    --sz-text-graph: 0.6875rem;    /* 11 */

    /* Shape */
    --sz-radius-daily: 22px;
    --sz-radius-score: 20px;
    --sz-radius-card: 18px;
    --sz-radius-row: 16px;
    --sz-radius-control: 14px;
    --sz-radius-slot: 12px;
    --sz-radius-chip: 6px;
    --sz-radius-pill: 999px;
    --sz-gutter: 16px;
    --sz-gutter-bare: 24px;
    --sz-control-height: 3.25rem;  /* 52 */
    --sz-target: 2.75rem;          /* 44: the least any control measures */
    --sz-column: 480px;
}

/* ------------------------------------------------------------------------------------------
 * 3. Base.
 * ------------------------------------------------------------------------------------------ */

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

body {
    margin: 0;
    background: var(--sz-paper);
    color: var(--sz-ink);
    font-family: var(--sz-font-body);
    font-size: var(--sz-text-body);
    font-weight: 400;
    line-height: 1.5;
}

h1,
h2,
h3,
.sz-display {
    margin: 0;
    font-family: var(--sz-font-display);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--sz-ink);
}

h1 {
    font-size: var(--sz-text-title);
    letter-spacing: -0.025em;
}

h2 {
    font-size: var(--sz-text-sheet);
}

h3 {
    font-size: var(--sz-text-head);
}

/* The router focuses the page's h1 on navigation. It is not a control: no ring on it. */
h1:focus {
    outline: none;
}

p {
    margin: 0;
}

a {
    color: var(--sz-blue);
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--sz-blue-dark);
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

:focus-visible {
    outline: 3px solid var(--sz-blue);
    outline-offset: 2px;
}

.sz-tabular {
    font-variant-numeric: tabular-nums;
}

.sz-muted {
    color: var(--sz-ink-2);
}

.sz-eyebrow {
    font-size: var(--sz-text-eyebrow);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--sz-ink-2);
}

.sz-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------------------------------------------
 * 4. The pieces every page shares.
 * ------------------------------------------------------------------------------------------ */

/* The wordmark: the mark (three candidates, one of them picked) and the name. */
.sz-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--sz-target);
    color: var(--sz-ink);
    text-decoration: none;
}

.sz-wordmark:hover {
    color: var(--sz-ink);
}

.sz-wordmark-mark {
    flex: none;
    width: 1.75rem;
    height: 1.125rem;
}

.sz-wordmark-mark circle {
    fill: none;
    stroke: var(--sz-ink);
    stroke-width: 2;
}

.sz-wordmark-mark circle.sz-wordmark-picked {
    fill: var(--sz-marigold);
}

.sz-wordmark-name {
    font-family: var(--sz-font-display);
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Borders, not blur: a hairline and a hard two-pixel "pressed paper" shadow. */
.sz-card {
    padding: 18px 16px;
    background: var(--sz-card);
    border: 1px solid var(--sz-line);
    border-radius: var(--sz-radius-card);
    box-shadow: 0 2px 0 var(--sz-line);
}

/* A numbered or plain list of Card rows, as the landing page draws its steps. */
.sz-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sz-rows > li {
    padding: 14px 16px;
    background: var(--sz-card);
    border: 1px solid var(--sz-line);
    border-radius: var(--sz-radius-row);
}

/* The form field: the label above, Card, 1.5 px Ink, radius 14, 52 high. */
.sz-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sz-field-label {
    font-size: var(--sz-text-secondary);
    font-weight: 700;
    line-height: 1.3;
}

.sz-field-hint {
    font-size: var(--sz-text-secondary);
    color: var(--sz-ink-2);
}

.sz-input {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--sz-control-height);
    padding: 0 14px;
    background: var(--sz-card);
    border: 1.5px solid var(--sz-ink);
    border-radius: var(--sz-radius-control);
    color: var(--sz-ink);
    font: inherit;
    font-size: var(--sz-text-body);
}

.sz-input::placeholder {
    color: var(--sz-ink-2);
}

.sz-input:read-only {
    background: var(--sz-bucket-4);
    color: var(--sz-ink-2);
}

/* An error is Ink on Marigold-soft beside an icon. Not red: red says "you broke it". */
.sz-field-error,
.validation-message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    background: var(--sz-marigold-soft);
    border-radius: var(--sz-radius-slot);
    color: var(--sz-ink);
    font-size: var(--sz-text-secondary);
    font-weight: 700;
    line-height: 1.35;
}

.sz-field-error:empty {
    display: none;
}

.sz-input.invalid,
.sz-input[aria-invalid="true"] {
    border-width: 2.5px;
}

/* The checkbox row: the whole row is the target. */
.sz-check {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--sz-target);
    font-weight: 700;
    cursor: pointer;
}

.sz-check input[type="checkbox"] {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    accent-color: var(--sz-blue);
    cursor: pointer;
}

/* Buttons: 52 high, radius 14. A link may wear one. */
.sz-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: var(--sz-control-height);
    padding: 8px 16px;
    border: 2px solid var(--sz-blue);
    border-radius: var(--sz-radius-control);
    background: var(--sz-blue);
    color: var(--sz-white);
    font-family: var(--sz-font-body);
    font-size: var(--sz-text-button);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.sz-button:hover {
    background: var(--sz-blue-dark);
    border-color: var(--sz-blue-dark);
    color: var(--sz-white);
}

.sz-button-secondary {
    border-color: var(--sz-ink);
    background: transparent;
    color: var(--sz-ink);
    font-size: var(--sz-text-body);
}

.sz-button-secondary:hover {
    border-color: var(--sz-ink);
    background: var(--sz-card);
    color: var(--sz-ink);
}

.sz-button:disabled,
.sz-button[aria-disabled="true"] {
    border-color: var(--sz-bucket-4);
    background: var(--sz-bucket-4);
    color: var(--sz-ink-2);
    cursor: not-allowed;
}

/* A link that stands alone must still be a 44 px target. */
.sz-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--sz-target);
    font-weight: 700;
}

/* The bottom action bar: Card, a hairline above, one primary or an equal pair. */
.sz-actions {
    display: flex;
    gap: 10px;
    padding: 12px var(--sz-gutter) calc(28px + env(safe-area-inset-bottom, 0px));
    background: var(--sz-card);
    border-top: 1px solid var(--sz-line);
}

.sz-actions > * {
    flex: 1 1 0;
    min-width: 0;
}

/* The status message: what a page says back. Success and notice are calm; an error is the
   field error's Marigold-soft, larger. */
.sz-status {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--sz-blue-soft);
    border-radius: var(--sz-radius-row);
    color: var(--sz-ink);
    font-weight: 700;
    line-height: 1.4;
}

.sz-status-error {
    background: var(--sz-marigold-soft);
}

.sz-status-icon {
    flex: none;
    margin-top: 0.15em;
}

/* ------------------------------------------------------------------------------------------
 * 4b. The game's shared pieces (M12b): what the web app's screens are assembled from, and
 *     what a server page will share later (the challenge landing, M14) — the closeness scale's
 *     chips, the icon button, the pill and badge, the list row, the bottom sheet.
 * ------------------------------------------------------------------------------------------ */

/* The closeness scale. The same classes paint a chip in the grid and a band on a graph. */
.sz-bucket-0 {
    background: var(--sz-bucket-0);
    color: var(--sz-bucket-0-text);
}

.sz-bucket-1 {
    background: var(--sz-bucket-1);
    color: var(--sz-bucket-1-text);
}

.sz-bucket-2 {
    background: var(--sz-bucket-2);
    color: var(--sz-bucket-2-text);
}

.sz-bucket-3 {
    background: var(--sz-bucket-3);
    color: var(--sz-bucket-3-text);
}

.sz-bucket-4 {
    background: var(--sz-bucket-4);
    color: var(--sz-bucket-4-text);
}

/* A bucket chip: the points, always printed on the bucket's colour. */
.sz-chip {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.625rem;
    padding: 1px 6px;
    border-radius: var(--sz-radius-chip);
    font-size: var(--sz-text-grid);
    font-weight: 800;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

/* Far off is the page's own colour: an inset hairline lets it show on Card. */
.sz-chip.sz-bucket-4 {
    box-shadow: inset 0 0 0 1px var(--sz-line);
}

/* A 44 px round target holding a 24 px glyph: Close, Back, How to play, the avatar. */
.sz-icon-button {
    box-sizing: border-box;
    flex: none;
    display: inline-grid;
    place-items: center;
    width: var(--sz-target);
    height: var(--sz-target);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--sz-ink);
    font-size: 1.375rem;
    text-decoration: none;
}

.sz-icon-button:hover {
    color: var(--sz-ink);
    background: var(--sz-blue-soft);
}

/* A pill: Play, a cost. A badge is a small pill with an Ink border. */
.sz-pill {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--sz-target);
    padding: 0 20px;
    border-radius: var(--sz-radius-pill);
    background: var(--sz-marigold);
    color: var(--sz-ink);
    font-weight: 700;
}

.sz-badge {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 5px;
    border: 1.5px solid var(--sz-ink);
    border-radius: var(--sz-radius-pill);
    background: var(--sz-marigold);
    color: var(--sz-ink);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

/* A list row: a whole button or link, 1.5 px Ink, radius 16, a Blue-soft icon ground. */
.sz-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sz-list-row {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 3.25rem;
    padding: 8px 14px;
    border: 1.5px solid var(--sz-ink);
    border-radius: var(--sz-radius-row);
    background: var(--sz-card);
    box-shadow: 0 2px 0 var(--sz-ink);
    color: var(--sz-ink);
    font-size: var(--sz-text-body);
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
}

.sz-list-row:hover {
    color: var(--sz-ink);
    background: var(--sz-card);
}

.sz-list-row-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--sz-radius-slot);
    background: var(--sz-blue-soft);
    color: var(--sz-blue);
}

.sz-list-row-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The bottom sheet: a native <dialog>. Pinned to the bottom of the viewport, as wide as the
   480 px column, its body scrolling; it slides up, except under reduced motion (section 3). */
.sz-sheet {
    box-sizing: border-box;
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: var(--sz-column);
    max-height: 85dvh;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 24px 24px 0 0;
    background: var(--sz-card);
    color: var(--sz-ink);
}

.sz-sheet[open] {
    display: flex;
    flex-direction: column;
    animation: sz-sheet-up 180ms ease-out;
}

.sz-sheet::backdrop {
    background: var(--sz-scrim);
}

@keyframes sz-sheet-up {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.sz-sheet-grabber {
    flex: none;
    width: 40px;
    height: 5px;
    margin: 8px auto 0;
    border-radius: 3px;
    background: var(--sz-line);
}

.sz-sheet-header {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 20px;
}

.sz-sheet-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--sz-text-sheet);
    overflow-wrap: anywhere;
}

.sz-sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 20px calc(28px + env(safe-area-inset-bottom, 0px));
    font-size: var(--sz-text-body);
}

.sz-sheet-actions {
    flex: none;
    display: flex;
    gap: 10px;
    padding: 12px var(--sz-gutter) calc(20px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--sz-line);
}

.sz-sheet-actions > * {
    flex: 1 1 0;
    min-width: 0;
}

/* A sheet with actions pinned beneath: its body needs no room at the foot. */
.sz-sheet-body:has(+ .sz-sheet-actions) {
    padding-bottom: 12px;
}

/* ------------------------------------------------------------------------------------------
 * 5. The bare layout: the wordmark, the page, nothing else (spec 05). A 480 px column with a
 *    24 px gutter; on a phone the action bar sits at the bottom of the viewport.
 * ------------------------------------------------------------------------------------------ */

.sz-bare {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--sz-paper);
}

.sz-bare-header {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
}

.sz-bare-main {
    box-sizing: border-box;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--sz-column);
    margin: 0 auto;
}

/* A page is its content and, when it has an action, the bar after it. */
.sz-page {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.sz-page-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 12px var(--sz-gutter-bare) 24px;
}

.sz-page-body > form,
.sz-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sz-page-intro {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sz-page-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
}

.sz-page .sz-actions {
    position: sticky;
    bottom: 0;
}

/* The bar is pinned for a page with one thing to do. A page longer than a screen that is read
   (Privacy), or that has forms and buttons of its own (Your account), lets the bar follow its
   content instead: pinned, it would ride over the text, or hide a form's own button. */
.sz-page-long .sz-actions {
    position: static;
}

.sz-bare-footer {
    flex: none;
    padding: 0 var(--sz-gutter-bare) 20px;
    text-align: center;
    font-size: var(--sz-text-secondary);
}

/* Long-form text: the privacy page. */
.sz-prose {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sz-prose h2 {
    margin-top: 10px;
    font-size: var(--sz-text-head);
}

.sz-prose ul {
    margin: 0;
    padding-left: 1.25rem;
}

.sz-prose li + li {
    margin-top: 6px;
}

/* The challenge landing (drawn: Invite): who challenged you, over the trio of circles, the three
   steps, and the pair of ways in. Centred in the column, with the steps as Card rows. */
.sz-invite {
    justify-content: center;
    gap: 28px;
}

.sz-invite-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.sz-invite-trio {
    position: relative;
    width: 132px;
    height: 84px;
}

.sz-invite-trio-side {
    position: absolute;
    left: 0;
    top: 10px;
    width: 64px;
    height: 64px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--sz-blue-soft);
    border: 2px solid var(--sz-ink);
}

.sz-invite-trio-right {
    left: auto;
    right: 0;
}

.sz-invite-trio-middle {
    position: absolute;
    left: 30px;
    top: 0;
    width: 72px;
    height: 72px;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sz-marigold);
    border: 2px solid var(--sz-ink);
    color: var(--sz-ink);
    font-family: var(--sz-font-display);
    font-size: 2rem;
    font-weight: 800;
}

.sz-invite-title {
    font-family: var(--sz-font-display);
    font-size: var(--sz-text-title);
    font-weight: 800;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.sz-invite-what {
    font-size: var(--sz-text-button);
    font-weight: 700;
}

.sz-invite-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    list-style: none;
}

.sz-invite-step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--sz-card);
    border: 1px solid var(--sz-line);
    border-radius: var(--sz-radius-row);
}

.sz-invite-step-number {
    flex: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sz-ink);
    color: var(--sz-card);
    font-family: var(--sz-font-display);
    font-weight: 800;
}

.sz-invite-step-last {
    background: var(--sz-marigold);
    color: var(--sz-ink);
}

.sz-invite-close {
    text-align: center;
    font-size: 0.9375rem;
    color: var(--sz-ink-2);
}

/* On a wide screen the column becomes a card on Paper, and the bar joins it. */
@media (min-width: 640px) {
    .sz-bare-main {
        flex: 0 0 auto;
        margin-top: 24px;
        margin-bottom: 24px;
        background: var(--sz-card);
        border: 1px solid var(--sz-line);
        border-radius: var(--sz-radius-card);
        box-shadow: 0 2px 0 var(--sz-line);
        overflow: hidden;
    }

    .sz-page-body {
        padding-top: 28px;
    }

    .sz-page .sz-actions {
        position: static;
        padding-bottom: 20px;
    }

    .sz-input {
        background: var(--sz-white);
    }
}

/* ------------------------------------------------------------------------------------------
 * 6. The toast (derived): Radzen's notification in the look. Ink ground, Card text, radius 14,
 *    a Marigold icon; it sits above the bottom action bar and never covers it.
 * ------------------------------------------------------------------------------------------ */

.rz-notification {
    inset-block-start: auto;
    inset-block-end: calc(6rem + env(safe-area-inset-bottom, 0px));
    inset-inline: var(--sz-gutter);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.rz-notification-item-wrapper {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: calc(var(--sz-column) - (2 * var(--sz-gutter)));
    margin: 8px 0 0;
    background: transparent;
    pointer-events: auto;
}

.rz-notification .rz-notification-item,
.rz-notification-success .rz-notification-item,
.rz-notification-info .rz-notification-item,
.rz-notification-warn .rz-notification-item,
.rz-notification-error .rz-notification-item {
    padding: 14px 16px;
    background-color: var(--sz-ink);
    border-radius: var(--sz-radius-control);
    box-shadow: none;
    color: var(--sz-card);
    font-family: var(--sz-font-body);
}

.rz-notification .rz-notification-icon,
.rz-notification .rz-notification-icon.rzi-check,
.rz-notification .rz-notification-icon.rzi-info-circle,
.rz-notification .rz-notification-icon.rzi-exclamation-triangle,
.rz-notification .rz-notification-icon.rzi-times {
    color: var(--sz-marigold);
}

.rz-notification .rz-notification-title {
    font-weight: 700;
}

.rz-notification .rz-notification-close {
    min-width: var(--sz-target);
    min-height: var(--sz-target);
    margin: -10px -12px -10px 0;
    color: var(--sz-card);
    opacity: 1;
}

/* ------------------------------------------------------------------------------------------
 * 7. Overrides: what Bootstrap and Radzen set that fights the tokens. Kept together, and kept
 *    short: the look uses neither library's components on a signed-out page.
 * ------------------------------------------------------------------------------------------ */

:root {
    --bs-body-bg: var(--sz-paper);
    --bs-body-color: var(--sz-ink);
    --bs-body-font-family: var(--sz-font-body);
    --bs-body-font-size: var(--sz-text-body);
    --bs-body-line-height: 1.5;
    --bs-link-color: var(--sz-blue);
    --bs-link-hover-color: var(--sz-blue-dark);
    --rz-text-font-family: var(--sz-font-body);
    --rz-body-font-size: var(--sz-text-body);
    --rz-text-color: var(--sz-ink);
    --rz-body-background-color: var(--sz-paper);
}

/* Bootstrap's reboot gives headings a bottom margin and weight 500, and paragraphs a margin. */
h1,
h2,
h3,
p,
ol,
ul {
    margin-top: 0;
    margin-bottom: 0;
}

/* Radzen's base sets body colours and a face through its own variables; say it once more. */
body {
    background-color: var(--sz-paper);
    color: var(--sz-ink);
    font-family: var(--sz-font-body);
}