/* The global reset sets every margin to zero, including native dialogs. Restore
   viewport centering explicitly without changing hidden/closed dialog display. */
:root{--popup-surface:#fff;--popup-soft:#f4f6fc;--popup-ink:#20304b;--popup-muted:#62708a;--popup-line:#dfe5ef;--popup-brand:var(--school-brand,#6555c7)}
html.is_dark{--popup-surface:#192337;--popup-soft:#202d43;--popup-ink:#edf2fb;--popup-muted:#b4c0d6;--popup-line:#35445d}
html body dialog{position:fixed;inset:0;margin:auto;box-sizing:border-box;max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);border:1px solid var(--popup-line);border-radius:24px;box-shadow:0 28px 100px #101b3b40;overscroll-behavior:contain}
html body dialog::backdrop{background:rgba(10,19,39,.62);backdrop-filter:blur(6px)}
html body dialog[open]{animation:portal-dialog-enter .2s ease-out}
html body .insight-dialog :is(h2,h3,h4){color:var(--school-text,var(--popup-ink))}
html.is_dark body .insight-dialog :is(.insight-eyebrow,.insight-fact strong,.insight-section>strong,.insight-jump-links a){color:#a9c3ff}
dialog [data-insight-close]{white-space:nowrap;flex-shrink:0}
/* Retain each dialog's own color tokens and layout; add a quiet branded header. */
dialog :is(.insight-profile-header,.tt-dialog header,.school-roster-dialog__head,.cg-header){background:linear-gradient(120deg,color-mix(in srgb,var(--popup-brand) 8%,transparent),transparent);border-radius:14px;padding:16px;gap:16px}
html body .modal:not(.zoom-frame .modal) .modal-dialog{display:flex;align-items:center;min-height:calc(100% - 3.5rem);margin:1.75rem auto}
html body .modal .modal-content{border:1px solid var(--popup-line);border-radius:22px;background:var(--popup-surface);color:var(--popup-ink);box-shadow:0 24px 80px #101b3b33;overflow:hidden}
html body .modal .modal-header{padding:22px 24px;border-bottom:1px solid var(--popup-line);background:linear-gradient(120deg,color-mix(in srgb,var(--popup-brand) 9%,var(--popup-surface)),var(--popup-surface));gap:16px}
html body .modal .modal-title{color:var(--popup-ink)!important;font-weight:750;line-height:1.4}
html body .modal .modal-body{padding:24px;color:var(--popup-ink)}
html body .modal .modal-footer{padding:16px 24px;border-top:1px solid var(--popup-line);background:var(--popup-soft);gap:8px}
html body .modal .modal-footer .btn{border-radius:12px;min-height:42px;padding:9px 16px;font-weight:650}
html.is_dark .modal .btn-close{filter:invert(1) grayscale(100%) brightness(200%)}
/* SweetAlert already owns centering and toast placement. Style the card only. */
html body .swal2-popup:not(.swal2-toast){border:1px solid var(--popup-line);border-radius:24px;background:var(--popup-surface);color:var(--popup-ink);box-shadow:0 28px 90px #101b3b40;padding-bottom:24px}
html body .swal2-popup:not(.swal2-toast) :is(.swal2-title,.swal2-html-container){color:var(--popup-ink);line-height:1.55}
html body .swal2-popup:not(.swal2-toast) .swal2-actions{gap:10px}
html body .swal2-popup:not(.swal2-toast) .swal2-styled{border-radius:12px;min-height:44px;font-weight:650}
html body .swal2-popup:not(.swal2-toast) .swal2-close{border-radius:50%;color:var(--popup-muted)}
@keyframes portal-dialog-enter{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(max-width:575px){html body dialog{max-height:calc(100dvh - 24px);border-radius:19px}html body .modal:not(.zoom-frame .modal) .modal-dialog{min-height:calc(100% - 1.5rem);margin:.75rem auto;max-width:calc(100% - 24px)}html body .modal :is(.modal-header,.modal-body){padding:18px}html body .modal .modal-footer{padding:14px 18px}}
@media(prefers-reduced-motion:reduce){html body dialog[open]{animation:none}}