/* Seasonal Goodnight + sign-in (design_handoff_seasonal_auth). Loaded by goodnight.html, login.html,
   twofa_challenge.html (sign-in's second step), lock.html, and the app shell for the lock overlay — a sanctioned exception to "flat colour only". Everything is scoped under
   body.season-<key> + .is-logout / .is-login so nothing reaches any other screen. */

/* the painting, and the drift over it — fixed to the window, behind the card */
.season-bg { position: fixed; inset: 0; z-index: 0; background-color: var(--s-ground); background-position: center;
  background-size: cover; background-repeat: no-repeat; }
.season-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.season-fx span { position: absolute; top: 0; display: block; will-change: transform; }
body.is-login .auth { position: relative; z-index: 1; padding: 64px 24px 40px; }

@keyframes cbFall { from { transform: translate3d(0,-12vh,0); } to { transform: translate3d(var(--sway),112vh,0); } }
@keyframes cbLeaf { 0% { transform: translate3d(0,-12vh,0) rotate(0deg); } 50% { transform: translate3d(calc(var(--sway) * -1),50vh,0) rotate(200deg); } 100% { transform: translate3d(var(--sway),112vh,0) rotate(420deg); } }
@keyframes cbFly { 0%,100% { transform: translate3d(0,0,0); opacity: .15; } 30% { opacity: 1; } 50% { transform: translate3d(var(--sway),-28px,0); opacity: .35; } 75% { opacity: .9; } }
.season-fx .p-snow { border-radius: 50%; background: #fff; animation: cbFall linear infinite; }
body.is-login .season-fx .p-snow { opacity: .95 !important; box-shadow: 0 0 2px rgba(60,80,100,.35); }
.season-fx .p-leaf { border-radius: 0 70% 0 70%; opacity: .85; animation: cbLeaf ease-in-out infinite; }
.season-fx .p-petal { border-radius: 70% 0 70% 0; opacity: .85; animation: cbLeaf ease-in-out infinite; }
.season-fx .p-firefly { top: auto; width: 3px; height: 3px; border-radius: 50%; background: #f5d46b;
  box-shadow: 0 0 8px 2px #f5d46b88; animation: cbFly ease-in-out infinite; }
body.is-login .season-fx .p-firefly { background: #c99a2e; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .season-fx { display: none; } }

/* Logout — dark cards over night pieces. --s-* feed the card styles in goodnight.html. */
body.season-autumn.is-logout { --s-ground: #170d07; --s-card: #24180f; --s-line: #3f2b1b; --s-ink: #f6e9d6; --s-body: #cdb79c; --s-quiet: #a08465; --s-fig-line: #5a3e26; --s-on: #e09a55; --s-detail: #1c130b; --s-row-rule: #2e2014; --s-btn: #c97a3a; --s-btn-line: #a85f26; --s-btn-hover: #d68b4c; --s-btn-ink: #24140a; }
body.season-christmas.is-logout { --s-ground: #0b1712; --s-card: #13211a; --s-line: #26392e; --s-ink: #f4efe2; --s-body: #c6c9b8; --s-quiet: #8f9f8e; --s-fig-line: #36503f; --s-on: #e3c46a; --s-detail: #0f1b15; --s-row-rule: #1d2d24; --s-btn: #c9a94a; --s-btn-line: #b8912f; --s-btn-hover: #d4b657; --s-btn-ink: #1f1a0c; }
body.season-winter.is-logout { --s-ground: #0c121a; --s-card: #141c26; --s-line: #26323f; --s-ink: #eef3f8; --s-body: #b9c6d4; --s-quiet: #7d8ea3; --s-fig-line: #34465a; --s-on: #bcd6ec; --s-detail: #10171f; --s-row-rule: #1d2834; --s-btn: #a9c4dc; --s-btn-line: #87a6c2; --s-btn-hover: #bdd3e6; --s-btn-ink: #0f1a26; }
body.season-spring.is-logout { --s-ground: #10170e; --s-card: #1a2216; --s-line: #2e3a27; --s-ink: #f1f2e4; --s-body: #c3c9ad; --s-quiet: #8d977a; --s-fig-line: #3f4e35; --s-on: #c9d79a; --s-detail: #141b11; --s-row-rule: #222c1c; --s-btn: #b9c98a; --s-btn-line: #9aac6c; --s-btn-hover: #c7d59c; --s-btn-ink: #1a2210; }
body.season-summer.is-logout { --s-ground: #0e1320; --s-card: #171f2c; --s-line: #2a3547; --s-ink: #f3efe4; --s-body: #c4c3bb; --s-quiet: #8b93a3; --s-fig-line: #3a4659; --s-on: #f0c06a; --s-detail: #121926; --s-row-rule: #212a3a; --s-btn: #e0a64a; --s-btn-line: #c28a32; --s-btn-hover: #e9b660; --s-btn-ink: #261a08; }

/* Login — light cards over morning pieces. The card's own styles (site.css) read the app tokens, so the
   season redefines those tokens on this page's body only. The mark stays brand blue in every season. */
body.season-autumn.is-login { --s-ground: #f1e4d3; --surface: #fffaf3; --s-field: #fffdf9; --line: #e8d6bf; --line-quiet: #f2e7d8; --ink: #2a1a0e; --ink-body: #4f3a28; --ink-quiet: #7a5f45; --accent: #b45a1f; --s-accent-press: #964815; --s-shadow: 0 8px 28px rgba(60,35,15,.14); }
body.season-christmas.is-login { --s-ground: #d9e3dc; --surface: #fffdf8; --s-field: #ffffff; --line: #d2ddd4; --line-quiet: #e9efea; --ink: #14251b; --ink-body: #33473a; --ink-quiet: #5b6f60; --accent: #1f5a3a; --s-accent-press: #17462d; --s-shadow: 0 8px 28px rgba(20,37,27,.14); }
body.season-winter.is-login { --s-ground: #d8e2ed; --surface: #ffffff; --s-field: #ffffff; --line: #d5dfea; --line-quiet: #eef2f8; --ink: #11203b; --ink-body: #33415c; --ink-quiet: #5a6b86; --accent: #1d4ed8; --s-accent-press: #1740b0; --s-shadow: 0 8px 28px rgba(17,32,59,.16); }
body.season-spring.is-login { --s-ground: #eef2e4; --surface: #fffef9; --s-field: #ffffff; --line: #dde4cc; --line-quiet: #edf1e3; --ink: #1f2a17; --ink-body: #3d4a33; --ink-quiet: #5f6b4f; --accent: #4d7a2f; --s-accent-press: #3d6324; --s-shadow: 0 8px 28px rgba(31,42,23,.12); }
body.season-summer.is-login { --s-ground: #f6ecd6; --surface: #fffbf1; --s-field: #ffffff; --line: #ecdcb8; --line-quiet: #f4ead4; --ink: #2a2010; --ink-body: #4a3d24; --ink-quiet: #7a6740; --accent: #b0661a; --s-accent-press: #925312; --s-shadow: 0 8px 28px rgba(60,45,15,.12); }
body.is-login .acard { background: var(--surface); border-color: var(--line); box-shadow: var(--s-shadow); color: var(--ink-body); }
body.is-login .acard h1 { color: var(--ink); }
body.is-login .acard .mark { background: #1d4ed8; }
body.is-login .acard input { background: var(--s-field); border-color: var(--line); color: var(--ink); }
body.is-login .acard input:focus { border-color: var(--accent); outline: none; }
body.is-login .acard .btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; transition: background .12s; }
body.is-login .acard .btn-accent:hover { background: var(--s-accent-press); border-color: var(--s-accent-press); color: #fff; }
body.is-login .acard input::placeholder { color: var(--ink-quiet); opacity: .6; }


/* ---- The lock (design_handoff_lock) — the same seasons, laid over the app (or served whole on a reload
   while locked). It follows the clock (Aaron, 10-16): the morning or afternoon piece with the sign-in
   palette, or after 5pm the night piece with the Goodnight palette. No new colors; fades only. ---- */
.lock-screen.season-autumn { --s-ground: #f1e4d3; --l-card: #fffaf3; --l-field: #fffdf9; --l-line: #e8d6bf; --l-line-q: #f2e7d8; --l-ink: #2a1a0e; --l-body: #4f3a28; --l-quiet: #7a5f45; --l-link: #b45a1f; --l-btn: #b45a1f; --l-btn-line: #b45a1f; --l-btn-hover: #964815; --l-btn-ink: #fff; --l-shadow: 0 8px 28px rgba(60,35,15,.14); --l-warn: #a06a00; --l-ok: #1c7a4d; }
.lock-screen.season-christmas { --s-ground: #d9e3dc; --l-card: #fffdf8; --l-field: #ffffff; --l-line: #d2ddd4; --l-line-q: #e9efea; --l-ink: #14251b; --l-body: #33473a; --l-quiet: #5b6f60; --l-link: #1f5a3a; --l-btn: #1f5a3a; --l-btn-line: #1f5a3a; --l-btn-hover: #17462d; --l-btn-ink: #fff; --l-shadow: 0 8px 28px rgba(20,37,27,.14); --l-warn: #a06a00; --l-ok: #1c7a4d; }
.lock-screen.season-winter { --s-ground: #d8e2ed; --l-card: #ffffff; --l-field: #ffffff; --l-line: #d5dfea; --l-line-q: #eef2f8; --l-ink: #11203b; --l-body: #33415c; --l-quiet: #5a6b86; --l-link: #1d4ed8; --l-btn: #1d4ed8; --l-btn-line: #1d4ed8; --l-btn-hover: #1740b0; --l-btn-ink: #fff; --l-shadow: 0 8px 28px rgba(17,32,59,.16); --l-warn: #a06a00; --l-ok: #1c7a4d; }
.lock-screen.season-spring { --s-ground: #eef2e4; --l-card: #fffef9; --l-field: #ffffff; --l-line: #dde4cc; --l-line-q: #edf1e3; --l-ink: #1f2a17; --l-body: #3d4a33; --l-quiet: #5f6b4f; --l-link: #4d7a2f; --l-btn: #4d7a2f; --l-btn-line: #4d7a2f; --l-btn-hover: #3d6324; --l-btn-ink: #fff; --l-shadow: 0 8px 28px rgba(31,42,23,.12); --l-warn: #a06a00; --l-ok: #1c7a4d; }
.lock-screen.season-summer { --s-ground: #f6ecd6; --l-card: #fffbf1; --l-field: #ffffff; --l-line: #ecdcb8; --l-line-q: #f4ead4; --l-ink: #2a2010; --l-body: #4a3d24; --l-quiet: #7a6740; --l-link: #b0661a; --l-btn: #b0661a; --l-btn-line: #b0661a; --l-btn-hover: #925312; --l-btn-ink: #fff; --l-shadow: 0 8px 28px rgba(60,45,15,.12); --l-warn: #a06a00; --l-ok: #1c7a4d; }
.lock-screen.dp-evening.season-autumn { --s-ground: #170d07; --l-card: #24180f; --l-field: #1c130b; --l-line: #3f2b1b; --l-line-q: #2e2014; --l-ink: #f6e9d6; --l-body: #cdb79c; --l-quiet: #a08465; --l-link: #e09a55; --l-btn: #c97a3a; --l-btn-line: #a85f26; --l-btn-hover: #d68b4c; --l-btn-ink: #24140a; --l-shadow: 0 12px 44px rgba(0,0,0,.5); --l-warn: #f5b332; --l-ok: #4dbb6a; }
.lock-screen.dp-evening.season-christmas { --s-ground: #0b1712; --l-card: #13211a; --l-field: #0f1b15; --l-line: #26392e; --l-line-q: #1d2d24; --l-ink: #f4efe2; --l-body: #c6c9b8; --l-quiet: #8f9f8e; --l-link: #e3c46a; --l-btn: #c9a94a; --l-btn-line: #b8912f; --l-btn-hover: #d4b657; --l-btn-ink: #1f1a0c; --l-shadow: 0 12px 44px rgba(0,0,0,.5); --l-warn: #f5b332; --l-ok: #4dbb6a; }
.lock-screen.dp-evening.season-winter { --s-ground: #0c121a; --l-card: #141c26; --l-field: #10171f; --l-line: #26323f; --l-line-q: #1d2834; --l-ink: #eef3f8; --l-body: #b9c6d4; --l-quiet: #7d8ea3; --l-link: #bcd6ec; --l-btn: #a9c4dc; --l-btn-line: #87a6c2; --l-btn-hover: #bdd3e6; --l-btn-ink: #0f1a26; --l-shadow: 0 12px 44px rgba(0,0,0,.5); --l-warn: #f5b332; --l-ok: #4dbb6a; }
.lock-screen.dp-evening.season-spring { --s-ground: #10170e; --l-card: #1a2216; --l-field: #141b11; --l-line: #2e3a27; --l-line-q: #222c1c; --l-ink: #f1f2e4; --l-body: #c3c9ad; --l-quiet: #8d977a; --l-link: #c9d79a; --l-btn: #b9c98a; --l-btn-line: #9aac6c; --l-btn-hover: #c7d59c; --l-btn-ink: #1a2210; --l-shadow: 0 12px 44px rgba(0,0,0,.5); --l-warn: #f5b332; --l-ok: #4dbb6a; }
.lock-screen.dp-evening.season-summer { --s-ground: #0e1320; --l-card: #171f2c; --l-field: #121926; --l-line: #2a3547; --l-line-q: #212a3a; --l-ink: #f3efe4; --l-body: #c4c3bb; --l-quiet: #8b93a3; --l-link: #f0c06a; --l-btn: #e0a64a; --l-btn-line: #c28a32; --l-btn-hover: #e9b660; --l-btn-ink: #261a08; --l-shadow: 0 12px 44px rgba(0,0,0,.5); --l-warn: #f5b332; --l-ok: #4dbb6a; }
.lock-screen.dp-morning { --l-art: var(--art-morning); }
.lock-screen.dp-afternoon { --l-art: var(--art-afternoon); }
.lock-screen.dp-evening { --l-art: var(--art-evening); }

.lock-dialog { margin: 0; padding: 0; border: 0; background: none; width: 100vw; height: 100vh; max-width: none; max-height: none; overflow: hidden; }
.lock-dialog::backdrop { background: transparent; }
.lock-screen { position: fixed; inset: 0; z-index: 500; background: var(--s-ground); overflow-y: auto;
  font-family: var(--prose); color: var(--l-body); }
.lock-bg { position: fixed; inset: 0; background: var(--s-ground) var(--l-art) center / cover no-repeat; }
.lock-fx { position: fixed; }
.lock-screen .p-snow { box-shadow: 0 0 2px rgba(60,80,100,.35); }
.lock-screen .p-firefly { background: #c99a2e; box-shadow: none; }
.lock-screen.dp-evening .p-snow { box-shadow: none; }
.lock-screen.dp-evening .p-firefly { background: #f5d46b; box-shadow: 0 0 8px 2px #f5d46b88; }
.lock-wrap { position: relative; z-index: 1; min-height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 64px 24px 40px; box-sizing: border-box; }
.lock-card { width: 420px; max-width: 100%; box-sizing: border-box; background: var(--l-card); border: 1px solid var(--l-line);
  border-radius: 10px; padding: 34px; box-shadow: var(--l-shadow); }
.lock-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.lock-mark { width: 22px; height: 22px; border-radius: 5px; background: #1d4ed8; position: relative; overflow: hidden; flex: none; }
.lock-mark::before, .lock-mark::after { content: ""; position: absolute; background: #fff; border-radius: 3px; }
.lock-mark::before { width: 15px; height: 7px; left: 4px; top: 11px; } .lock-mark::after { width: 9px; height: 6px; left: 8px; top: 7px; }
.lock-name { font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--l-ink); }
.lock-line { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--l-quiet); margin-bottom: 8px; }
.lock-h { font-family: var(--serif); font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: -.015em; color: var(--l-ink); margin: 0; }
.lock-sub { font-size: 16px; line-height: 1.6; color: var(--l-quiet); margin: 8px 0 0; }
.lock-timer { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--l-quiet); }
.lock-timer[hidden], .lock-wait[hidden], .lock-err[hidden] { display: none; }
.lock-dot { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--l-warn); align-self: center; }
.lock-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--l-warn); animation: lock-ring 2s ease-out infinite; }
@keyframes lock-ring { from { transform: scale(1); opacity: .55; } to { transform: scale(3.2); opacity: 0; } }
.lock-fig { font-family: var(--fig, var(--mono)); font-size: 13px; color: var(--l-ink); }
.lock-wait { margin-top: 14px; border-left: 2px solid var(--l-warn); padding: 2px 0 2px 12px; }
.lock-wait-k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--l-warn); }
.lock-wait.done { border-left-color: var(--l-ok); }
.lock-wait.done .lock-wait-k { color: var(--l-ok); }
.lock-wait p { margin: 2px 0 0; font-size: 14px; line-height: 1.55; color: var(--l-body); }
.lock-wait.done p { color: var(--l-quiet); }
.lock-field { margin-top: 20px; }
.lock-flabel-row { display: flex; align-items: baseline; justify-content: space-between; }
.lock-flabel { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--l-quiet); margin-bottom: 7px; display: block; }
.lock-link { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--l-link); text-decoration: none; }
.lock-card input[type=password] { width: 100%; box-sizing: border-box; font-family: var(--prose); font-size: 15px; color: var(--l-ink);
  background: var(--l-field); border: 1px solid var(--l-line); border-radius: 3px; padding: 10px 12px; outline: none; }
.lock-card input[type=password]:focus { border-color: var(--l-link); }
.lock-note { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: var(--l-body); }
.lock-err { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--l-body); }
.lock-btn { display: block; width: 100%; margin-top: 22px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  padding: 11px 20px; border-radius: 3px; border: 1px solid var(--l-btn-line); background: var(--l-btn); color: var(--l-btn-ink); cursor: pointer; transition: background .12s; }
.lock-btn:hover { background: var(--l-btn-hover); border-color: var(--l-btn-hover); }
.lock-btn:disabled { opacity: .7; cursor: default; }
.lock-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--l-line-q); padding-top: 14px; margin-top: 18px; }
.lock-quiet { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--l-quiet); transition: color .12s; }
.lock-quiet:hover { color: var(--l-ink); }
/* the moment (1l): the app fades to the ground, then the painting and drift, then the card */
.lock-screen.in { animation: lock-a .2s ease both; }
.lock-screen.in .lock-bg, .lock-screen.in .lock-fx { animation: lock-a .3s ease .2s both; }
.lock-screen.in .lock-wrap { animation: lock-a .2s ease .5s both; }
.lock-screen.out { animation: lock-z .2s ease both; }
@keyframes lock-a { from { opacity: 0; } to { opacity: 1; } }
@keyframes lock-z { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lock-dot::after { animation: none; } .lock-screen.in, .lock-screen.in * { animation-duration: .01s !important; animation-delay: 0s !important; } }
@media (max-width: 520px) {
  .lock-wrap { align-items: flex-end; padding: 20px 12px 12px; }
  .lock-card { padding: 22px 20px 8px; }
  .lock-h { font-size: 26px; }
  .lock-btn { min-height: 44px; }
  .lock-card input[type=password] { font-size: 16px; }
  .lock-quiet, .lock-link { padding: 14px 0; }
}
.lock-alt { display: flex; align-items: baseline; justify-content: space-between; margin-top: 16px; font-size: 15px; color: var(--l-body); }
.lock-alt .lock-link { background: none; border: 0; padding: 0; cursor: pointer; }
.lock-cap { margin: 8px 0 0; text-align: center; font-size: 13px; color: var(--l-quiet); }
[data-lock-pwbox][hidden], [data-lock-pk][hidden] { display: none; }
@media (max-width: 520px) { .lock-alt .lock-link { padding: 14px 0; } .lock-screen.pw-open .lock-brand { display: none; } }
body.is-login .a-pk-note { margin: 8px 0 0; font-family: var(--prose); font-size: 14px; line-height: 1.55; color: var(--ink-body); }
body.is-login [data-pk-signin][hidden], body.is-login .a-pk-note[hidden] { display: none; }

.season-bg.dp-morning { background-image: var(--art-morning); }
.season-bg.dp-afternoon { background-image: var(--art-afternoon); }
.season-bg.dp-evening { background-image: var(--art-evening); }