/* Sign-in, register, confirm, and settings pages in the Revive School
   brand: navy backdrop, the lockup, one white card. Also the slim account
   bar every signed-in page shows. */
:root { --rs-navy: #022c53; --rs-blue: #165590; --rs-cyan: #00b6ed; --rs-green: #63a164; --rs-ink: #1b2430; --rs-muted: rgba(27, 36, 48, 0.62); --rs-rule: rgba(27, 36, 48, 0.12); }
body { margin: 0; font-family: 'Barlow', system-ui, sans-serif; color: var(--rs-ink); }
body.rs-auth { min-height: 100vh; background: radial-gradient(60rem 30rem at 20% -10%, #0d4a86, transparent 60%), var(--rs-navy); color: #fff; }
.rs-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 1rem; background: var(--rs-navy); color: #fff; }
.rs-bar img { height: 1.6rem; display: block; }
.rs-bar nav { display: flex; gap: 0.25rem; align-items: center; flex-wrap: wrap; font-size: 0.9rem; }
.rs-bar nav a, .rs-bar nav .rs-who { color: #fff; text-decoration: none; padding: 0.35rem 0.7rem; border-radius: 999px; }
.rs-bar nav a:hover { background: rgba(255, 255, 255, 0.12); }
.rs-bar nav .rs-who { opacity: 0.75; }
.rs-auth-wrap { display: grid; place-items: center; padding: 3rem 1rem 4rem; }
.rs-auth-lockup { text-align: center; margin-bottom: 1.5rem; }
.rs-auth-lockup img { width: min(20rem, 80vw); display: block; margin: 0 auto 0.75rem; }
.rs-auth-lockup p { margin: 0; opacity: 0.8; font-size: 0.95rem; }
.rs-card { width: 100%; max-width: 26rem; background: #fff; color: var(--rs-ink); border-radius: 1rem; padding: 1.75rem 1.5rem; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }
.rs-card h1 { margin: 0 0 0.25rem; font-size: 1.5rem; line-height: 1.2; }
.rs-card .rs-sub { margin: 0 0 1.25rem; color: var(--rs-muted); font-size: 0.95rem; }
.rs-card .rs-sub a, .rs-card .rs-more a { color: var(--rs-blue); font-weight: 600; text-decoration: none; }
.rs-card .rs-sub a:hover, .rs-card .rs-more a:hover { text-decoration: underline; }
.rs-card .fieldset { margin: 0 0 0.9rem; }
.rs-card .label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.3rem; }
.rs-card .input { width: 100%; border: 1px solid var(--rs-rule); border-radius: 0.6rem; padding: 0.65rem 0.8rem; font: inherit; font-size: 1rem; color: var(--rs-ink); background: #fff; box-sizing: border-box; }
.rs-card .input:focus { outline: 2px solid rgba(0, 182, 237, 0.45); outline-offset: 1px; border-color: var(--rs-cyan); }
.rs-card .input-error { border-color: #c62828; }
.rs-card .btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; border: 1px solid transparent; border-radius: 999px; padding: 0.7rem 1rem; font: 700 1rem inherit; cursor: pointer; margin-top: 0.25rem; }
.rs-card .btn-primary { background: var(--rs-blue); color: #fff; }
.rs-card .btn-primary:hover { background: #0f4478; }
.rs-card .btn-soft, .rs-card .btn-primary.btn-soft { background: transparent; color: var(--rs-blue); border-color: var(--rs-rule); }
.rs-card .btn-soft:hover { background: rgba(22, 85, 144, 0.06); }
.rs-card .divider { display: flex; align-items: center; gap: 0.75rem; color: var(--rs-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 1.25rem 0; }
.rs-card .divider::before, .rs-card .divider::after { content: ""; flex: 1; height: 1px; background: var(--rs-rule); }
.rs-card details summary { cursor: pointer; color: var(--rs-blue); font-weight: 600; font-size: 0.95rem; list-style: none; }
.rs-card details summary::-webkit-details-marker { display: none; }
.rs-card details[open] summary { margin-bottom: 0.9rem; }
.rs-card .rs-more { margin: 1.25rem 0 0; font-size: 0.9rem; color: var(--rs-muted); text-align: center; }
.rs-card .alert { border-radius: 0.75rem; padding: 0.8rem 1rem; font-size: 0.9rem; margin-bottom: 1rem; background: rgba(0, 103, 190, 0.08); display: flex; gap: 0.6rem; align-items: flex-start; }
.rs-card .text-error, .rs-card p.text-error { color: #c62828; font-size: 0.85rem; margin: 0.35rem 0 0; display: flex; gap: 0.3rem; align-items: center; }
.rs-auth .rs-foot { text-align: center; margin-top: 1.5rem; font-size: 0.85rem; opacity: 0.7; }
.rs-auth .rs-foot a { color: #fff; }
/* Signed-in pages (settings): a plain page under the bar. */
.rs-page { max-width: 40rem; margin: 0 auto; padding: 2rem 1rem 4rem; }
.rs-page h1 { font-size: 1.5rem; margin: 0 0 0.25rem; }
.rs-page .divider { display: flex; align-items: center; gap: 0.75rem; color: var(--rs-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 1.5rem 0; }
.rs-page .divider::before, .rs-page .divider::after { content: ""; flex: 1; height: 1px; background: var(--rs-rule); }
.rs-page .fieldset { margin: 0 0 0.9rem; } .rs-page .label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.3rem; }
.rs-page .input { width: 100%; max-width: 28rem; border: 1px solid var(--rs-rule); border-radius: 0.6rem; padding: 0.6rem 0.8rem; font: inherit; box-sizing: border-box; }
.rs-page .btn { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid transparent; border-radius: 999px; padding: 0.6rem 1.1rem; font: 700 0.95rem inherit; cursor: pointer; background: var(--rs-blue); color: #fff; }
.rs-page .btn-soft { background: transparent; color: var(--rs-blue); border-color: var(--rs-rule); }
.toast { position: fixed; top: 1rem; right: 1rem; z-index: 60; }
.toast .alert { background: #fff; color: var(--rs-ink); border-radius: 0.75rem; padding: 0.8rem 1rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); display: flex; gap: 0.6rem; align-items: flex-start; max-width: 24rem; font-size: 0.9rem; }
.toast .alert-error { border-left: 0; background: #fdecea; }
.toast .alert p { margin: 0; }
.rs-card .btn:focus-visible, .rs-card .input:focus-visible, .rs-page .btn:focus-visible { outline: 2px solid var(--rs-cyan); outline-offset: 2px; }

/* An admin viewing the site as someone: a band above everything. */
.rs-viewing-as { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1rem; padding: 0.5rem 1rem; background: #ffcf4a; color: #1b2430; font-family: 'Barlow', system-ui, sans-serif; font-size: 0.95rem; }
.rs-viewing-as form { margin: 0; }
.rs-viewing-as button, .rs-viewing-as a { font: inherit; font-weight: 700; color: #1b2430; background: #fff; border: 0; border-radius: 999px; padding: 0.2rem 0.85rem; cursor: pointer; text-decoration: none; }