/* Account pages: log in / sign up / password forms (.auth-page) and the account page (.account-page).
   Uses the front page palette and buttons from front.css. */

/* ---------- auth forms ---------- */
.auth-wrap { position: relative; isolation: isolate; overflow-x: clip; min-height: calc(100vh - 65px);
  display: grid; place-items: start center; padding: 56px 16px 80px; }
.auth-card, .acct-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 24px;
  box-shadow: 0 30px 60px -30px rgba(30, 20, 80, .3);
}
.auth-card { width: 100%; max-width: 440px; padding: 34px 30px; display: grid; gap: 16px; }
.auth-card h1 { font-size: 1.9rem; margin: 0; letter-spacing: -.02em; }
.auth-sub { color: var(--muted); margin: -6px 0 4px; line-height: 1.5; }
.auth-card label, .acct-card label { display: grid; gap: 6px; font-weight: 700; font-size: .92rem; }
.auth-card label small { font-weight: 400; color: var(--muted); }
.auth-card input[type="email"], .auth-card input[type="password"], .auth-card input[type="text"],
.acct-card input, .acct-card select {
  font: inherit; font-weight: 400; font-size: 1rem; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); width: 100%; min-width: 0;
}
.auth-card input:focus, .acct-card input:focus, .acct-card select:focus {
  outline: none; border-color: var(--f-purple); box-shadow: 0 0 0 3px color-mix(in srgb, var(--f-purple) 25%, transparent);
}
.auth-card label.auth-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.auth-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--f-purple); flex: none; }
.auth-card .f-btn { width: 100%; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.auth-card .f-btn:disabled { opacity: .6; cursor: wait; transform: none; }
.auth-alt { margin: 0; text-align: center; color: var(--muted); font-size: .93rem; }
.auth-card a, .acct a { color: var(--f-purple); font-weight: 600; }
.auth-msg { padding: 12px 14px; border-radius: 12px; font-size: .93rem; line-height: 1.45; }
.auth-msg.bad { background: var(--bad-soft); color: var(--bad); }
.auth-msg.good { background: var(--good-soft); color: var(--good); }
.auth-msg.info { background: var(--accent-soft); color: var(--ink); }
.auth-done { display: grid; gap: 14px; text-align: center; justify-items: center; }
.auth-done .auth-sub { margin: 0; }
.auth-icon { font-size: 2.6rem; }

/* ---------- header account links (all pages) ---------- */
.account-links { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.front-nav .account-links { margin-left: 0; }
.front-links + .account-links, .front-links ~ .account-links { margin-left: 0; }
.account-login { color: var(--ink); font-weight: 600; text-decoration: none; font-size: .92rem; }
.account-signup {
  padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: .88rem; text-decoration: none; white-space: nowrap;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
}
.account-chip { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .92rem; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800;
  background: linear-gradient(135deg, #3b6cf6, #8b5cf6 55%, #ec4899);
}
@media (max-width: 560px) { .account-name, .front-nav .account-signup { display: none; } }

/* ---------- account page ---------- */
.acct { padding-top: 36px; padding-bottom: 80px; display: grid; gap: 20px; max-width: 860px; }
.acct-hero h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 0 0 6px; letter-spacing: -.02em; }
.acct-hero p { color: var(--muted); font-size: 1.1rem; margin: 0; }
.acct-card { padding: 26px; border-top: 5px solid var(--c); border-radius: 22px; }
.acct-card h2 { margin: 0 0 6px; }
.acct-card > p { margin: 0 0 16px; }
.acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 16px 0 12px; }
.acct-card input:disabled { opacity: .7; }

.subj-list { display: grid; gap: 10px; margin-bottom: 14px; }
.subj {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; padding: 14px 16px; border-radius: 16px;
  background: color-mix(in srgb, var(--c) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line));
  border-left: 5px solid var(--c);
}
.subj-name { display: grid; flex: 1 1 180px; align-self: center; }
.subj-name b { font-size: 1.08rem; }
.subj-name span { color: var(--c); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.subj label { font-size: .78rem; flex: 0 1 150px; }
.subj select, .subj input { padding: 8px 10px; font-size: .93rem; background: var(--surface); }
.subj-remove { border: 0; background: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: 8px; align-self: center; border-radius: 8px; }
.subj-remove:hover { background: var(--bad-soft); color: var(--bad); }
.subj-empty { color: var(--muted); padding: 18px; border: 2px dashed var(--line); border-radius: 16px; text-align: center; margin: 0; }
.acct-search { display: block; }
.subj-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 10px; }
.subj-option, .school-results button {
  display: grid; text-align: left; gap: 2px; padding: 12px 14px; border-radius: 14px; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
}
.subj-option { border-left: 5px solid var(--c); grid-template-columns: 1fr auto; }
.subj-option span { grid-column: 1; color: var(--muted); font-size: .85rem; }
.subj-option i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-weight: 800; color: var(--c); }
.subj-option:hover, .school-results button:hover { border-color: var(--c, var(--f-purple)); background: color-mix(in srgb, var(--c, var(--f-purple)) 8%, var(--surface)); }
.school-field { position: relative; }
.school-results { display: grid; gap: 6px; margin-top: 6px; }
.school-results button span { color: var(--muted); font-size: .85rem; font-weight: 400; }
.hint { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 14px; margin-bottom: 14px;
  background: color-mix(in srgb, var(--f-amber) 14%, var(--surface)); font-size: .92rem; }
.hint-chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 5px 12px; cursor: pointer; font: inherit; font-size: .88rem; }
.hint-chip i { font-style: normal; font-weight: 800; color: var(--f-purple); }
.acct-save { display: flex; align-items: center; gap: 14px; }
.acct-save .f-btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; padding: 13px 34px; }
.acct-save .saved { color: var(--good); font-weight: 700; }
.acct-save .error { color: var(--bad); font-weight: 700; }
.acct .btn-row .f-btn { border: 1px solid var(--line); cursor: pointer; font: inherit; font-weight: 700; }
.acct .f-btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }

/* ---------- privacy page ---------- */
.prose { max-width: 720px; padding-top: 36px; padding-bottom: 80px; line-height: 1.65; }
.prose h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: -.02em; }
.prose h2 { margin-top: 32px; }
.prose table { border-collapse: collapse; width: 100%; font-size: .94rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px; border-bottom: 1px solid var(--line); }