.legal-doc > object {
    width: 100%;
    /* subtract header/footer height, then a bit more for "padding" */
    height: calc(100vh - 220px - 88px);
    min-height: 500px;
}

.legal-doc {
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════════
   Legal document card (Privacy Policy / EULA) — matches the
   MySigmaTEK prototype's legal modal. Token-driven, theme-aware.
   ══════════════════════════════════════════════════════════════════ */
.legal-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 24px;
    /* Page chrome above and below the card: unauthenticated header (--topbar-h)
       + footer (~80px, same allowance .unauth-main uses) + this wrapper's 24px
       and .page's 28px padding, top and bottom. */
    --legal-chrome-h: calc(var(--topbar-h) + 80px + 104px);
}

.legal-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 720px;
    max-width: 100%;
    /* Fit between header and footer so the card's own Close button stays
       reachable and long content scrolls inside the card, not the page. */
    max-height: calc(100vh - var(--legal-chrome-h, 244px));
    box-shadow: var(--shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.legal-card-hdr {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.legal-card-title {
    font-size: 18px;
    font-weight: var(--font-extra-bold);
    color: var(--main-text-color);
    line-height: 1.2;
}

.legal-card-meta {
    font-size: 11px;
    color: var(--text-sub);
    margin-top: 3px;
}

.legal-card-close {
    width: 30px;
    height: 30px;
    border: none;
    background: var(--gray-bg);
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--text-sub);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .legal-card-close .svg-icon {
        width: 16px;
        height: 16px;
    }

    .legal-card-close:hover {
        background: var(--main-border-color);
        color: var(--main-text-color);
    }

.legal-card-body {
    padding: 22px 28px;
    flex: 1 1 auto;
    min-height: 0; /* let the body shrink inside the capped card so it can scroll */
    overflow-y: auto;
    line-height: 1.75;
    font-size: 14px;
    color: var(--main-text-color);
}

    .legal-card-body h1 {
        font-size: 18px;
        font-weight: var(--font-extra-bold);
        margin: 0 0 14px;
    }

    .legal-card-body h2 {
        font-size: 14px;
        font-weight: var(--font-extra-bold);
        color: var(--main-text-color);
        margin: 22px 0 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border);
    }

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

    .legal-card-body ol,
    .legal-card-body ul {
        margin: 0 0 12px;
        padding-left: 22px;
    }

    .legal-card-body li {
        margin-bottom: 6px;
    }

    .legal-card-body a {
        color: var(--red);
        text-decoration: none;
    }

        .legal-card-body a:hover {
            text-decoration: underline;
        }

    /* EULA embeds a versioned PDF. Height is the page chrome plus the card's own
       chrome (header ~77px + this body's 44px padding + footer ~67px) subtracted
       from the viewport, so the viewer ends where the card ends — an explicit
       calc rather than height: 100%, which can't resolve against a card sized by
       max-height. On short viewports the min-height wins and the card body
       scrolls instead of the PDF spilling under the page footer. */
    .legal-card-body > object {
        width: 100%;
        height: calc(100vh - var(--legal-chrome-h, 244px) - 188px);
        min-height: 360px;
        border: none;
    }

.legal-card-ftr {
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

/* Filled brand red, the same colours as .btn-primary (the Sign In button), so the
   one action on the page reads as the primary one in both themes. */
.legal-card-close-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 16px;
    border: 1px solid var(--main-color);
    background: var(--main-color);
    color: var(--white-color);
    font-size: 13px;
    font-weight: var(--font-bold);
    cursor: pointer;
    border-radius: var(--radius);
    font-family: inherit;
}

    .legal-card-close-btn:hover {
        background: var(--main-color-dark);
        border-color: var(--main-color-dark);
    }

    .legal-card-close-btn:focus-visible {
        outline: 2px solid var(--main-color);
        outline-offset: 2px;
    }

/* The card's chrome (24px page padding, 18-24px header, 22-28px body, 14-24px
   footer) is desktop-scaled — on a phone it eats width the document text and
   the embedded PDF both need. Tightened to the same 12px/16px the rest of the
   app's mobile pass uses, everything else (card shell, close controls) is
   already flexible enough to need no structural change below 600px. */
@media (max-width: 600px) {
    /* Cancel most of .page's 28px side padding so the card gets near-full width. */
    .legal-page {
        padding: 0;
        margin: -16px -20px;
        /* 24px = .page's 56px top/bottom padding minus the 32px pulled back by the negative margin. */
        --legal-chrome-h: calc(var(--topbar-h) + 80px + 24px);
    }

    .legal-card-hdr {
        padding: 14px 16px;
    }

    .legal-card-title {
        font-size: 15px;
    }

    .legal-card-body {
        padding: 16px;
        font-size: 13px;
    }

    .legal-card-body h1 {
        font-size: 16px;
    }

    .legal-card-ftr {
        padding: 12px 16px;
    }

    /* Bleed the PDF viewer over the body padding so it gets the full card width. */
    .legal-card-body > object {
        width: calc(100% + 32px);
        /* 142px = card header (~67px) + footer (~67px) + borders/rounding. */
        height: calc(100vh - var(--legal-chrome-h, 244px) - 142px);
        margin: -16px;
    }
}