/* Ravel's Doodle look: the day palettes (morning, afternoon, evening; set on <html data-phase>) in light and dark. */
@font-face { font-family: "InterVariable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/_assets/InterVariable.woff2") format("woff2"); }

:root, :root[data-phase="afternoon"] { color-scheme: light; --bg: #f1f8fc; --card: #ffffff; --input: #e5f1f8; --ink: #10283a; --muted: #6c8798; --accent: #1f8fd6; --accent-ink: #ffffff; --r-t1: #1f8fd6; --r-t2: #e0a800; --r-t3: #4aa83a; --r-g1: rgb(80 180 240 / .18); --r-g2: rgb(255 210 80 / .16); }
:root[data-phase="morning"] { --bg: #fff5e9; --card: #fffcf7; --input: #f9ebd9; --ink: #3a2418; --muted: #947a68; --accent: #e8832c; --accent-ink: #ffffff; --r-t1: #ec8a3e; --r-t2: #e4b020; --r-t3: #4a9fd0; --r-g1: rgb(255 190 110 / .22); --r-g2: rgb(140 200 235 / .16); }
:root[data-phase="evening"] { --bg: #faeff0; --card: #fffafa; --input: #f3e1e4; --ink: #2c1626; --muted: #8f7384; --accent: #e2492f; --accent-ink: #ffffff; --r-t1: #e85a28; --r-t2: #c93a86; --r-t3: #6a55d6; --r-g1: rgb(255 120 100 / .18); --r-g2: rgb(150 110 255 / .16); }

@media (prefers-color-scheme: dark) {
  :root, :root[data-phase="afternoon"] { color-scheme: dark; --bg: #102a3a; --card: #173649; --input: #0c2230; --ink: #f4f2ed; --muted: #8aa6b6; --accent: #4fb3f0; --accent-ink: #05131c; --r-t1: #4fb3f0; --r-t2: #ffd23f; --r-t3: #7ed06b; --r-g1: rgb(60 170 240 / .22); --r-g2: rgb(255 210 60 / .12); }
  :root[data-phase="morning"] { --bg: #2a1d17; --card: #36261e; --input: #211712; --ink: #f4f2ed; --muted: #b09a8c; --accent: #f5a65b; --accent-ink: #1a0f08; --r-t1: #f6a05a; --r-t2: #ffd479; --r-t3: #9fd3ee; --r-g1: rgb(255 170 100 / .22); --r-g2: rgb(150 205 240 / .12); }
  :root[data-phase="evening"] { --bg: #2a1530; --card: #361c3d; --input: #211026; --ink: #f4f2ed; --muted: #b497ae; --accent: #ff7a5c; --accent-ink: #1a0a10; --r-t1: #ff7a45; --r-t2: #e0489b; --r-t3: #8b7bff; --r-g1: rgb(255 90 90 / .22); --r-g2: rgb(140 100 255 / .18); }
}

@view-transition { navigation: auto; }
*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  min-height: 100svh; color: var(--ink); font: 500 1rem/1.5 "InterVariable", ui-sans-serif, system-ui, sans-serif; font-feature-settings: "cv11", "ss01";
  background-color: var(--bg);
  background-image:
    radial-gradient(60% 70% at 12% 0, var(--r-g1), transparent),
    radial-gradient(60% 70% at 95% 100%, var(--r-g2), transparent),
    linear-gradient(color-mix(in srgb, var(--muted) 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--muted) 14%, transparent) 1px, transparent 1px);
  background-size: auto, auto, 28px 28px, 28px 28px;
}

.login { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem 1rem 2rem; }
/* Wider than tall: the circle sizes to the height, and the infinity sign needs the extra width. */
.loop { view-transition-name: ravel-loop; display: block; width: min(92vw, 30rem); height: min(76vw, 21rem); max-height: 42vh; }

.brand { margin: -.5rem 0 .5rem; font-size: 2rem; font-weight: 700; letter-spacing: -.02em; transition: opacity 1s; }
.js:not(.open) .brand:not(.shown) { opacity: 0; }

.stage { display: grid; width: min(92vw, 24rem); }
.panel, .hint { grid-area: 1 / 1; }
.panel { display: flex; flex-direction: column; gap: .75rem; transition: opacity .6s, transform .6s cubic-bezier(.2,.7,.2,1), visibility 0s; }
.js:not(.open) .panel { opacity: 0; visibility: hidden; transform: translateY(12px); }
.hint { align-self: center; margin: 0; color: var(--muted); font-size: .9rem; text-align: center; opacity: 0; transition: opacity 1s; }
.hint.shown { opacity: 1; }
.open .hint { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }

/* The form speaks in the setup talk's type (setup.css): no boxes, a thin rule under each field, a link to submit. */
.panel { gap: 1rem; align-items: center; }
.title { margin: 0 0 .25rem; font-size: 1.15rem; line-height: 1.45; text-align: center; }
.field { width: min(100%, 18rem); padding: .35rem 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 0; background: transparent; color: var(--ink); caret-color: var(--accent);
  font: inherit; font-size: 1.15rem; line-height: 1.45; text-align: center; outline: none; transition: border-color .2s; }
.field:focus { border-bottom-color: var(--accent); }
.field::placeholder { color: var(--muted); opacity: .7; }
.field:-webkit-autofill { -webkit-text-fill-color: var(--ink); transition: background-color 9999s; }
.error { margin: 0; font-size: .9rem; color: var(--muted); text-align: center; }
.btn { margin-top: .5rem; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 1.15rem; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.btn::after { content: " \2192"; display: inline-block; white-space: pre; transition: transform .2s cubic-bezier(.2,.7,.2,1); }
.btn:hover::after, .btn:focus-visible::after { transform: translateX(3px); }