/* The legal modal — mobile first, widened at 900px. See legal.js.

   Reading, not scanning: measure is capped, line height is generous, and
   nothing here animates. A policy that slides about while you are trying
   to find clause 9 is a policy nobody finishes. */

.lg-modal {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: none;
    align-items: flex-end;
    justify-content: center;
    background: rgba(8, 14, 24, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.lg-modal.open {
    display: flex;
}

/* Scroll is taken by .lg-body, never the page behind it. Without this an
   iOS drag at the end of the policy scrolls the signup form underneath
   and the student loses their place in the form, not just the text. */
body.lg-locked {
    overflow: hidden;
}

.lg-sheet {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    /* Not 100dvh: the strip of backdrop above the sheet is what says
       "this is a layer you can dismiss" on a phone. */
    height: 92dvh;
    max-height: 92dvh;
    background: #fff;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    box-shadow: 0 -8px 40px rgba(8, 14, 24, .28);
}

/* ── Header ─────────────────────────────────────────────────────── */
.lg-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--s200, #e2e8f0);
    flex: 0 0 auto;
}

.lg-titles {
    flex: 1 1 auto;
    min-width: 0;
}

.lg-titles b {
    display: block;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--s900, #0f172a);
    line-height: 1.3;
}

.lg-titles span {
    display: block;
    margin-top: 3px;
    font-size: .7rem;
    color: var(--s500, #64748b);
}

.lg-x {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    margin: -4px -4px 0 0;
    border: 0;
    border-radius: 10px;
    background: var(--s50, #f8fafc);
    color: var(--s600, #475569);
    font-size: 1rem;
    cursor: pointer;
}

.lg-x:hover {
    background: var(--s100, #f1f5f9);
    color: var(--s900, #0f172a);
}

/* ── Tabs ───────────────────────────────────────────────────────── */
/* Horizontal scroll, never wrap. Five wrapped tabs take three lines on a
   360px screen and push the policy itself below the fold. */
.lg-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid var(--s200, #e2e8f0);
    flex: 0 0 auto;
}

.lg-tabs::-webkit-scrollbar {
    display: none;
}

.lg-tab {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 99px;
    border: 1px solid var(--s200, #e2e8f0);
    background: #fff;
    color: var(--s600, #475569);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.lg-tab.on {
    background: var(--s900, #0f172a);
    border-color: var(--s900, #0f172a);
    color: #fff;
}

.lg-tab:focus-visible {
    outline: 2px solid var(--g500, #2f6cb3);
    outline-offset: 2px;
}

/* ── The document ───────────────────────────────────────────────── */
.lg-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px 40px;
    color: var(--s700, #334155);
    font-size: .88rem;
    line-height: 1.68;
}

.lg-body:focus-visible {
    outline: none;
}

.lg-sec {
    padding-top: 22px;
}

.lg-sec h2 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--s900, #0f172a);
    margin: 0 0 8px;
    line-height: 1.35;
}

.lg-sec h3 {
    font-size: .86rem;
    font-weight: 650;
    color: var(--s800, #1e293b);
    margin: 16px 0 6px;
}

.lg-sec h4 {
    font-size: .82rem;
    font-weight: 650;
    color: var(--s700, #334155);
    margin: 13px 0 5px;
}

.lg-sec p {
    margin: 0 0 10px;
}

.lg-sec ul,
.lg-sec ol {
    margin: 0 0 12px;
    padding-left: 20px;
}

.lg-sec li {
    margin-bottom: 6px;
}

.lg-sec strong {
    color: var(--s900, #0f172a);
    font-weight: 650;
}

.lg-sec code {
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: .84em;
    background: var(--s50, #f8fafc);
    padding: 1px 5px;
    border-radius: 4px;
}

.lg-sec a {
    color: var(--g600, #1f5896);
    text-decoration: underline;
    text-underline-offset: 2px;
    /* A URL in a policy is often longer than a phone is wide. */
    word-break: break-word;
}

.lg-sec blockquote {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-left: 3px solid var(--s200, #e2e8f0);
    background: var(--s50, #f8fafc);
    border-radius: 0 8px 8px 0;
}

.lg-sec blockquote p:last-child {
    margin-bottom: 0;
}

/* Tables carry the retention schedules and the fee bands, so they must
   stay readable rather than being squeezed to fit. Each one scrolls
   inside its own box; the sheet never scrolls sideways. */
.lg-sec table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0 0 14px;
    font-size: .82rem;
    white-space: nowrap;
}

.lg-sec table th,
.lg-sec table td {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--s100, #f1f5f9);
    vertical-align: top;
    white-space: normal;
    min-width: 120px;
}

.lg-sec table th {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--s500, #64748b);
    border-bottom: 1px solid var(--s200, #e2e8f0);
}

.lg-foot {
    margin-top: 30px;
    padding-top: 14px;
    border-top: 1px solid var(--s200, #e2e8f0);
    font-size: .74rem;
    color: var(--s500, #64748b);
}

/* ── The line that opens it ─────────────────────────────────────── */
.lg-inline {
    margin: 14px 0 0;
    font-size: .76rem;
    line-height: 1.6;
    color: var(--s500, #64748b);
    text-align: center;
}

.lg-inline button {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 650;
    color: var(--g600, #1f5896);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.lg-inline button:hover {
    color: var(--g700, #17457a);
}

/* ── Desktop ────────────────────────────────────────────────────── */
@media (min-width: 900px) {
    .lg-modal {
        align-items: center;
        padding: 40px 24px;
    }

    .lg-sheet {
        height: min(84vh, 900px);
        max-height: 84vh;
        border-radius: 18px;
        box-shadow: 0 24px 70px rgba(8, 14, 24, .3);
    }

    .lg-top {
        padding: 20px 26px 14px;
    }

    .lg-titles b {
        font-size: 1.16rem;
    }

    .lg-tabs {
        padding: 12px 26px;
        overflow-x: visible;
    }

    .lg-body {
        padding: 4px 26px 48px;
        font-size: .92rem;
    }

    /* Reading measure. Full-width legal text at 720px is a wall. */
    .lg-sec p,
    .lg-sec ul,
    .lg-sec ol {
        max-width: 64ch;
    }

    .lg-sec table {
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {

    .lg-modal,
    .lg-sheet {
        transition: none !important;
    }
}

/* ── The Deletion tab's action block ──────────────────────────────────
   Sits ABOVE the policy text, not below it. Somebody who opens this tab
   has usually already decided; making them scroll a nine-section
   document to find the button is the friction Google's rule exists to
   stop, and it is not the kind of friction the questionnaire provides. */

.lg-act {
    margin: 18px 0 4px;
    padding: 16px;
    border: 1px solid var(--s200, #e2e8f0);
    border-radius: 12px;
    background: var(--s50, #f8fafc);
}




.lg-act-alt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    margin-top: 10px;
    border: 1px solid var(--s300, #cbd5e1);
    border-radius: 10px;
    background: #fff;
    color: var(--s700, #334155);
    font-family: inherit;
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
}

.lg-act-alt:hover {
    border-color: var(--s400, #94a3b8);
    color: var(--s900, #0f172a);
}

.lg-act-alt i {
    font-size: .72rem;
    color: var(--s400, #94a3b8);
}

/* The address in full, so it can be typed into another device. A student
   deleting their account on a laptop later should not have to guess it. */
.lg-act-url {
    margin: 8px 0 0;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: .72rem;
    color: var(--s500, #64748b);
    text-align: center;
    word-break: break-all;
}

.lg-act-alt:focus-visible {
    outline: 2px solid var(--g500, #2f6cb3);
    outline-offset: 2px;
}

/* The web route always sits at the END of the document — a footnote
   after the reading, not a call to action before it. */
.lg-act.lg-act-end {
    margin-top: 30px;
    padding-top: 16px;
    border: 0;
    border-top: 1px solid var(--s200, #e2e8f0);
    border-radius: 0;
    background: none;
}