.security-page{max-width:760px;margin:30px auto;padding:20px}
.security-page .panel{margin:20px 0;padding:24px;background:#f4ecd8;border:1px solid #c6b898;border-radius:16px}
/* Keep label text clear of the focus outline, including when labels wrap. */
.security-page label{display:flex;flex-direction:column;gap:10px;margin:18px 0;line-height:1.5}
.security-page input:not([type=checkbox]){display:block;width:100%;font-size:16px;min-height:44px;scroll-margin-block:16px}
.security-page input:not([type=checkbox]):focus-visible{outline:2px solid var(--burgundy);outline-offset:2px}
.security-page pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#e7e5cd;padding:16px;border-radius:8px;font-size:16px;color:#293f3b}
.security-page h1{font-size:clamp(30px,6vw,44px)}
#security-error{color:#743c43}
#security-status{font-weight:600}
.security-page [hidden]{display:none!important}
.security-page button{min-height:44px}
.security-page .check{display:flex;flex-direction:row;gap:12px;align-items:flex-start}
.security-page .check input{margin-top:5px}
.security-page form[aria-busy=true]{opacity:.7}
@media(forced-colors:active){.security-page input:not([type=checkbox]):focus-visible{outline-color:Highlight}}
@media(max-width:500px){.security-page{padding:14px}.security-page .panel{padding:18px}}