/* SBM Framework's neutral cards, typography and buttons, without its starter sidebar. */
:root {
    color-scheme: light;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #24292e;
    background: #f4f5f6;
    line-height: 1.5;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #175da8; text-underline-offset: .15em; }
a:hover { text-decoration-thickness: .12em; }
button, input { font: inherit; }
button, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: .6rem 1rem;
    border: 1px solid transparent;
    border-radius: .4rem;
    background: #195db5;
    color: white;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
button:hover, .button:hover { filter: brightness(.94); }
button:disabled { background: #e1e4e8; color: #636b74; cursor: default; filter: none; }
.secondary { background: white; border-color: #b6bec7; color: #1c5188; }
.danger { background: #ae2731; }
:focus-visible { outline: 3px solid #4287d7; outline-offset: 3px; }
.site-header, main, .site-footer { max-width: 66rem; margin: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.2rem; }
.brand { color: inherit; font-weight: 750; text-decoration: none; }
.site-header nav { overflow-wrap: anywhere; text-align: right; }
main { padding-block: 2.5rem; min-height: 70vh; }
h1 { margin: 0; font-size: 2.25rem; line-height: 1.2; letter-spacing: -.04em; }
h2 { font-size: 1.2rem; margin: 2rem 0 1rem; }
h3 { font-size: 1rem; margin: 0; }
p { margin: .7rem 0; }
.page-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; margin-bottom: 1.5rem; }
.eyebrow, .muted, .recovery-note { color: #606a75; }
.eyebrow { margin: 0 0 .25rem; }
.panel { background: white; border: 1px solid #d8dde2; border-radius: .55rem; padding: 1.25rem; box-shadow: 0 2px 3px #00000006; }
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.notice { margin-bottom: 1rem; }
.failed { border-color: #c55c66; background: #fff5f5; }
.failed strong, .error { color: #a32430; }
.backup-status [data-status-phase] { margin-left: .6rem; }
.backup-status p { font-size: .9rem; }
.archive-list { display: grid; gap: 1rem; }
.archive-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; }
.actions { display: flex; flex-wrap: wrap; align-items: start; gap: 1rem; margin-top: 1rem; }
summary { cursor: pointer; padding-block: .5rem; color: #175da8; }
.delete-action { max-width: 30rem; }
.delete-action summary { color: #a32430; padding-top: .65rem; }
.verification { border-top: 1px solid #e6e9ec; margin-top: 1rem; padding-top: .2rem; font-size: .875rem; }
.verification code { overflow-wrap: anywhere; }
.check-option { display: block; margin-block: .5rem 1rem; }
.recovery-note { max-width: 45rem; font-size: .9rem; margin-top: 1.5rem; }
.site-footer { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; color: #66707a; font-size: .8rem; }
.skip-link { position: absolute; top: -5rem; left: 1rem; background: white; padding: .5rem; }
.skip-link:focus { top: .5rem; }