@import url("base.css");
body { min-height:100dvh; display:flex; flex-direction:column; background:radial-gradient(ellipse at 100% 0%,var(--wash),transparent 48%),radial-gradient(ellipse at 0% 100%,var(--wash),transparent 45%),var(--bg); }
.public-header,.public-footer { width:min(1160px,calc(100% - 64px)); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.public-header { min-height:88px; }
.public-brand { display:flex; align-items:center; gap:9px; text-decoration:none; }
.header-link { font-size:14px; }
.public-footer { padding:24px 0; font-size:12px; color:var(--muted); }
.welcome-main,.auth-main { width:min(1040px,calc(100% - 64px)); margin:auto; padding:64px 0; flex:1; display:grid; align-content:center; align-items:center; gap:72px; grid-template-columns:1.15fr 1fr; }
.intro h1 { font-size:clamp(36px,4.7vw,60px); max-width:11ch; margin:0 0 24px; }
.intro>p,.auth-intro>p { color:var(--muted); }
.intro>p { font-size:18px; max-width:40ch; }
.welcome-access,.form-card { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:36px; box-shadow:0 16px 48px var(--shadow); }
.welcome-access h2 { font-size:24px; margin-bottom:12px; }
.welcome-access>p { font-size:15px; color:var(--muted); }
.welcome-access .primary { width:100%; margin:8px 0 24px; }
.account-option { border-top:1px solid var(--line); padding-top:22px; font-size:14px; }
.account-option p { margin-bottom:8px; color:var(--muted); }
.account-option a { font-weight:600; }
.access-note { margin:24px 0 0; font-size:13px!important; }
.auth-main { max-width:980px; grid-template-columns:1fr 420px; }
.auth-intro h1 { max-width:13ch; font-size:clamp(32px,4vw,48px); margin-bottom:20px; }
.auth-intro>p { font-size:17px; max-width:36ch; }
.auth-aside { margin-top:36px; border-top:1px solid var(--line); padding-top:20px; max-width:36ch; }
.auth-aside strong { font-size:14px; font-weight:600; }
.auth-aside p { margin:8px 0 0; color:var(--muted); font-size:14px; }
.form-card h2 { font-size:24px; margin-bottom:8px; }
.form-card>p { font-size:14px; color:var(--muted); margin-bottom:28px; }
.form-card label { display:block; font-size:14px; font-weight:600; margin:20px 0 8px; }
.form-card input { display:block; width:100%; font-size:16px; }
.form-submit { width:100%; margin-top:24px; }
.form-status { min-height:20px; margin:12px 0 0; font-size:13px; color:var(--success); overflow-wrap:anywhere; }
.form-status.error { color:var(--error); }
.form-footer { border-top:1px solid var(--line); margin-top:24px; padding-top:20px; font-size:14px; color:var(--muted); }
.form-footer a { font-weight:600; }
.welcome-main { display:flex; flex-direction:column; justify-content:center; gap:28px; text-align:center; }
.intro h1 { max-width:none; font-size:clamp(32px,4vw,48px); margin-bottom:16px; }
.intro p { max-width:50ch; margin:0 auto; }
.welcome-access { width:min(100%,440px); }
.welcome-access .primary { margin-bottom:8px; }
.intro h1 em { color:var(--accent); font-style:normal; text-decoration:underline; text-decoration-color:var(--sunshine); text-decoration-thickness:3px; text-underline-offset:8px; }
.welcome-label { display:block; color:var(--accent); font-size:12px; font-weight:600; letter-spacing:.1em; margin-bottom:18px; }
.welcome-access h2 { font-size:22px; }
@keyframes settle-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:no-preference) { .intro,.auth-intro { animation:settle-in .5s ease-out both; } .welcome-access,.form-card { animation:settle-in .5s .08s ease-out both; } }
@media (max-width:760px) {
  .public-header,.public-footer { width:calc(100% - 40px); }
  .public-header { min-height:76px; }
  .welcome-main,.auth-main { width:calc(100% - 40px); max-width:480px; grid-template-columns:1fr; gap:32px; padding:36px 0 48px; }
  .intro h1 { max-width:14ch; }
  .welcome-access,.form-card { padding:24px; }
  .auth-aside { display:none; }
  .public-footer { flex-wrap:wrap; gap:8px; }
}

/* Shared welcome and login layout. */
.welcome-page .welcome-access { width: auto; text-align: left; }
.welcome-page .welcome-label { letter-spacing: .08em; margin-bottom: 16px; }
.welcome-page .welcome-sign-in { width: 100%; min-height: 48px; margin: 8px 0 0; }
.welcome-page .form-footer { margin-bottom: 0; }
:is([data-auth-mode="login"], .welcome-page) .auth-main {
  flex: 0 0 auto;
  width: min(980px, calc(100% - 64px));
  grid-template-columns: 1fr 1.08fr;
  align-items: stretch;
  gap: 0;
  padding: 0;
  margin: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 64px var(--shadow);
}
:is([data-auth-mode="login"], .welcome-page) .auth-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 44px;
  border-radius: 17px;
  background: #22365c url("assets/sidebar-facets.png") center / cover;
  color: #f2f6ff;
}
:is([data-auth-mode="login"], .welcome-page) .auth-intro h1 {
  font-family: Mokoto, sans-serif;
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  max-width: none;
  text-wrap: balance;
}
:is([data-auth-mode="login"], .welcome-page) .auth-intro > p { color: #dce6f6; font-size: 17px; font-weight: 500; line-height: 1.7; margin: 0; }
:is([data-auth-mode="login"], .welcome-page) .form-card {
  align-self: center;
  padding: 48px;
  border: 0;
  border-radius: 18px;
  box-shadow: none;
  background: transparent;
}
:is([data-auth-mode="login"], .welcome-page) .form-card h2 { font-size: 26px; font-weight: 600; }
:is([data-auth-mode="login"], .welcome-page) .form-card input { min-height: 48px; background: var(--bg); }
:is([data-auth-mode="login"], .welcome-page) .form-submit { min-height: 48px; }
@media (max-width: 760px) {
  :is([data-auth-mode="login"], .welcome-page) .auth-main { width: calc(100% - 40px); max-width: 480px; grid-template-columns: 1fr; margin: 20px auto 32px; }
  :is([data-auth-mode="login"], .welcome-page) .auth-intro { padding: 30px 28px; }
  :is([data-auth-mode="login"], .welcome-page) .auth-intro h1 { font-size: 24px; margin-bottom: 14px; }
  :is([data-auth-mode="login"], .welcome-page) .auth-intro > p { font-size: 15px; margin-bottom: 0; }
  :is([data-auth-mode="login"], .welcome-page) .form-card { padding: 30px 28px; }
}