:root {
  color-scheme: light;
  font-family: system-ui, sans-serif;
  color: #26362b;
  background: #23372d;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 52% 12%, #68816a 0%, #385442 45%, #21372e 78%);
}
.page-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px clamp(16px, 5vw, 64px);
  color: #fff4db;
}
.brand { font: bold clamp(1.2rem, 5vw, 1.5rem) Georgia, 'Noto Serif SC', serif; letter-spacing: .12em; }
.page-top select { padding: 8px; background: #2a4136; color: #fff4db; border-color: #d6bc7973; }
main { flex: 1; display: grid; place-items: center; padding: 20px 16px 60px; }
.login-card {
  width: min(100%, 420px);
  padding: clamp(22px, 6vw, 36px);
  background: #f6f1e7;
  border: 1px solid #d5bf92;
  border-radius: 14px;
  box-shadow: 0 18px 56px #111d17a6;
}
.roof-mark { width: 48px; height: 40px; color: #80652c; }
h1 { margin: 6px 0 8px; font: 700 clamp(1.5rem, 5vw, 1.9rem) Georgia, 'Noto Serif SC', serif; }
p { line-height: 1.55; }
#loginIntro { margin: 0 0 24px; }
form { display: grid; gap: 8px; }
form label { font-weight: 650; }
input, button, select { font: inherit; border: 1px solid #8d947e; border-radius: 6px; }
input { width: 100%; min-height: 44px; padding: 10px; color: inherit; background: #fffaf2; }
input[aria-invalid="true"] { border-color: #9a382d; }
#loginCode { letter-spacing: .25em; font-variant-numeric: tabular-nums; }
button { min-height: 44px; cursor: pointer; }
button[type="submit"] { padding: 8px 12px; margin-top: 8px; color: #fff8ea; background: #385a46; border-color: #385a46; font-weight: 650; }
button[type="submit"]:hover:not(:disabled) { background: #2d4b3a; }
button:disabled { opacity: .62; cursor: default; }
:focus-visible { outline: 2px solid #947236; outline-offset: 3px; }
.email-summary { margin-bottom: 8px; overflow-wrap: anywhere; font-size: .92rem; }
.code-actions { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.text-button { border-color: transparent; background: transparent; color: #365841; padding: 5px; text-decoration: underline; text-underline-offset: .18em; }
.login-status, .login-privacy { font-size: .9rem; }
.login-status[data-error="true"] { color: #87382e; }
.login-status:empty { display: none; }
.login-privacy { border-top: 1px solid #ded4c0; margin: 20px 0 0; padding-top: 16px; color: #4c594e; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }