/* Typography and layout for the published legal documents (Provider Terms of Service),
   shared by the acceptance gate on the signup screens and the public /terms page.

   Two presentations of the same markup: gated (a fixed-height scroll container whose end
   unlocks the acceptance checkbox) and ungated (full flow, for reading and printing).
   Colours come from the MudBlazor palette variables so the document tracks the app theme
   rather than pinning its own light-mode colours. */

/* ---------- scroll container (gated presentation) ---------- */

.mpx-tos-scroll {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background-color: var(--mud-palette-surface);
}

.mpx-tos-scroll--gated {
    max-height: 420px;
    overflow-y: auto;
    padding: 16px 20px;
    /* Keyboard users focus the container and page through it; make that visible. */
    scroll-behavior: smooth;
}

.mpx-tos-scroll--gated:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ---------- read-progress bar ---------- */

.mpx-tos-progress {
    height: 4px;
    width: 100%;
    border-radius: 2px;
    background-color: var(--mud-palette-lines-default);
    overflow: hidden;
}

.mpx-tos-progress-bar {
    height: 100%;
    width: 0;
    background-color: var(--mud-palette-primary);
    transition: width 120ms linear;
}

/* The sentinel the scroll gate latches on: zero-height and invisible, marking the end of
   the agreement. It lives inside the hash-pinned document, so its markup (including a
   tabindex that nothing currently uses) cannot be changed without publishing a new
   revision -- which is the point of pinning it. */
.mpx-tos-end {
    height: 1px;
}

.mpx-tos-end:focus {
    outline: none;
}

/* ---------- document typography ---------- */

.mpx-legal {
    line-height: 1.55;
    /* Long legal prose is easier to track at a slightly narrower measure, but never
       narrower than the container on small screens. */
    max-width: 68em;
}

.mpx-legal h1 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 0 2px;
}

.mpx-legal h2 {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0 0 16px;
}

.mpx-legal h3 {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 24px 0 8px;
}

.mpx-legal p {
    margin: 0 0 12px;
}

.mpx-legal-preamble {
    margin-bottom: 20px;
}

.mpx-legal-execution {
    margin-top: 24px;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

.mpx-legal section {
    /* Keeps a heading from being stranded at the bottom of the scroll box or a printed page. */
    break-inside: auto;
}

.mpx-legal h3 {
    break-after: avoid;
}

/* ---------- print ----------
   /terms must print as the full 13-page agreement. Without this the gated max-height
   would print a 420px window of it, which is exactly the sort of thing nobody notices
   until someone needs a paper copy. */
@media print {
    .mpx-tos-scroll,
    .mpx-tos-scroll--gated {
        max-height: none;
        overflow: visible;
        border: none;
        padding: 0;
    }

    .mpx-tos-progress,
    .mpx-tos-no-print {
        display: none;
    }

    .mpx-legal {
        max-width: none;
    }
}