/* auth.css — auth (login/register), home (landing/dashboard) and profile pages.
   Mobile-first; every colour/spacing comes from the base.css tokens. No inline styles anywhere (CSP). */

/* ---- shared form helpers ---- */
.grid-2 {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

.grid-2 .field { margin-bottom: 0; }

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  cursor: pointer;
}

.choice input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: none;
  accent-color: var(--accent);
}

.label { font-weight: 500; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.btn--block { width: 100%; }

.stack-sm > * + * { margin-top: var(--space-2); }

fieldset.section {
  margin: 0;
  min-width: 0;
  border: 1px solid var(--border);
}

fieldset.section legend {
  padding: 0 var(--space-2);
  font-weight: 700;
  font-size: 1.1rem;
}

.hint--note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: 10px;
  background: var(--bubble-tutor);
  color: var(--text);
}

input[type="range"] {
  width: 100%;
  min-height: 44px;
  margin: 0;
  accent-color: var(--accent);
}

output { font-weight: 400; color: var(--muted); }

/* ---- auth (login / register) ---- */
.auth {
  display: flex;
  justify-content: center;
  padding-top: var(--space-3);
}

.auth__card {
  width: 100%;
  max-width: 440px;
  padding: var(--space-4);
}

.auth__title { text-align: center; }

.auth__notice {
  padding: var(--space-2) var(--space-3);
  border-radius: 10px;
  background: var(--bubble-tutor);
}

.auth__alt {
  margin: var(--space-3) 0 0;
  text-align: center;
  color: var(--muted);
}

/* ---- landing ---- */
.landing__hero {
  padding: var(--space-4) 0;
  text-align: center;
}

.landing__eyebrow {
  margin-bottom: var(--space-2);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.landing__title { font-size: clamp(1.8rem, 5vw, 2.6rem); }

.landing__lead {
  max-width: 640px;
  margin: 0 auto var(--space-4);
  color: var(--muted);
  font-size: 1.1rem;
}

.landing__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.landing__features {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  list-style: none;
  margin: var(--space-4) 0;
  padding: 0;
}

@media (min-width: 640px) {
  .landing__features { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .landing__features { grid-template-columns: repeat(4, 1fr); }
}

.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

.feature__icon .icon {
  width: 1.5em;
  height: 1.5em;
}

.feature__title { font-size: 1.05rem; }
.feature p { margin: 0; color: var(--muted); }

.steps { padding-left: 1.4em; }
.steps li { margin-bottom: var(--space-2); }
.landing__note { margin: 0; font-size: 0.9rem; }

/* ---- dashboard ---- */
.dashboard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.dashboard__head h1 {
  flex: 1 1 auto;
  margin: 0;
}

.level-badge {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.level-badge:hover { border-color: var(--accent); }
.level-badge__course { font-size: 0.8rem; color: var(--muted); }
.level-badge__pos { font-weight: 700; }
.level-badge__tier { font-size: 0.85rem; color: var(--accent); }

.dashboard__active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  border-color: var(--accent);
}

.dashboard__active-text {
  flex: 1 1 200px;
  margin: 0;
}

.dashboard__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .dashboard__grid { grid-template-columns: 3fr 2fr; }
}

.stat-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
}

.stat {
  padding: var(--space-2) var(--space-3);
  border-radius: 10px;
  background: var(--bg);
}

.stat dt { font-size: 0.8rem; color: var(--muted); }

.stat dd {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
}

.stat dd small {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
}

.focus-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}

.focus-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border);
}

.focus-list li:first-child { border-top: 0; }
.focus-list__example { color: var(--muted); }

.quick-links {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, 1fr);
  margin: var(--space-3) 0;
}

@media (min-width: 640px) {
  .quick-links { grid-template-columns: repeat(4, 1fr); }
}

.quick-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 56px;
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}

.quick-link:hover { border-color: var(--accent); }

.dashboard__recent-head { margin-bottom: var(--space-2); }
.dashboard__recent-head h2 { margin: 0; }

.recent-list {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.recent-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
}

.recent-item__link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}

.recent-item__topic { font-weight: 600; }
.recent-item__topic-is { color: var(--muted); }
.recent-item__meta { font-size: 0.85rem; color: var(--muted); }

.score-pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--ok);
  border-radius: 50%;
  font-weight: 700;
}

.status--active { color: var(--accent); }
.status--abandoned { color: var(--danger); }

.dashboard__suggestion {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border-radius: 10px;
  background: var(--bubble-learner);
}

/* ---- profile ---- */
.profile__head { margin-bottom: var(--space-3); }
.profile__head p { margin: 0; }

.welcome {
  margin-bottom: var(--space-3);
  border-color: var(--ok);
}

.welcome__actions { margin: 0; }

.profile__layout {
  display: grid;
  align-items: start;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .profile__layout { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
}

.profile__form { min-width: 0; }

.selfcheck {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.selfcheck h3 { margin-bottom: var(--space-1); }
.selfcheck__q { margin-bottom: var(--space-2); }

.about-is {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: 10px;
  background: var(--bubble-tutor);
}

.about-is h3 {
  margin-bottom: var(--space-1);
  font-size: 0.95rem;
}

.about-is__list {
  margin: 0;
  padding-left: 1.2em;
}

.suggestion {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: 10px;
  background: var(--bubble-learner);
}

.suggestion h3 { font-size: 1rem; }

.form-actions--sticky {
  position: sticky;
  bottom: 0;
  margin-top: 0;
  padding: var(--space-2) 0 max(var(--space-2), env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}

.field--checkbox { justify-content: center; }
.field--checkbox .hint { margin: 0; }