/* =========================================================
   SustainAxis Academy — sign-in panel, starting check and the
   server-marked exam. Uses the tokens from styles.css.
   ========================================================= */

.acct { padding: var(--s-10) 0 0; }
.acct__lang { margin: 0 0 var(--s-4); font-size: 0.9375rem; }
.acct__lang a { color: var(--blue-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.acct__card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
}
.acct[data-state="loading"] .acct__card { min-height: 64px; }
.acct[data-state="loading"] .js-acct-form { visibility: hidden; height: 0; overflow: hidden; }
.acct__form { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s-8); align-items: start; }
.acct__intro p { margin: var(--s-3) 0 0; }
.acct__title { font-size: 1.375rem; margin: var(--s-2) 0 0; line-height: 1.3; }
.acct__fields .field { margin-bottom: var(--s-4); }
.acct__fields .form-row { margin: 0; }
.acct__fields label { display: block; font-weight: 600; font-size: 0.875rem; color: var(--slate-700); margin-bottom: 6px; }
.acct__fields input[type="text"],
.acct__fields input[type="email"],
.acct__fields select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--slate-300); border-radius: var(--r-md);
  font: inherit; font-size: 0.9375rem; color: var(--slate-900); background: var(--white);
}
.acct__fields input:focus, .acct__fields select:focus { outline: 2px solid var(--blue-500); outline-offset: 1px; border-color: var(--blue-500); }
.acct__about { margin: 0 0 var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); background: var(--bg-soft); }
.acct__about summary { cursor: pointer; font-weight: 600; color: var(--slate-800); min-height: 24px; }
.acct__about[open] summary { margin-bottom: var(--s-3); }
.acct__small { font-size: 0.875rem; color: var(--slate-600); margin: 0 0 var(--s-4); }
.acct__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.875rem; color: var(--slate-700); margin: 0 0 var(--s-4); cursor: pointer; }
.acct__consent input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.acct__consent a { color: var(--blue-600); text-decoration: underline; }
.acct__submit { width: 100%; }
.acct .js-turnstile { margin-bottom: var(--s-4); }
.acct .js-turnstile:empty { display: none; }
.acct .form-error, .exam-gate .form-error, .acct__pre .form-error {
  margin: var(--s-4) 0 0; padding: 10px 14px; background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; border-radius: var(--r-md); font-size: 0.9375rem;
}
.acct__signed { display: flex; gap: var(--s-4); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.acct__signed p { margin: 0; color: var(--slate-700); }
.acct__signout { min-height: 40px; padding: 8px 16px; }
.acct__note { margin-top: var(--s-4); }
.acct__note h3 { font-size: 1.125rem; margin: 0 0 var(--s-2); }
.acct__note p { margin: 0 0 var(--s-3); color: var(--slate-700); }
.acct__note.is-ok { padding: 10px 14px; background: var(--green-50); border: 1px solid var(--green-100); border-radius: var(--r-md); }
.acct__note.is-ok p { margin: 0; color: var(--green-700); }
.acct__note.is-offline p { margin: 0; color: var(--slate-600); }
.acct[data-state="sent"] .acct__note,
.acct[data-state="offline"] .acct__note { margin-top: 0; }
.acct[data-state="signed-in"] .acct__card { padding: var(--s-4) var(--s-6); }
.acct__dev { font-size: 0.8125rem; color: var(--slate-600); }
.acct__dev a { color: var(--blue-600); }

.acct__pre { margin-top: var(--s-4); }
.acct__pre-card { border: 1px solid var(--blue-100); background: var(--blue-50); border-radius: var(--r-lg); padding: var(--s-6); }
.acct__pre-card h3 { font-size: 1.125rem; margin: 0 0 var(--s-2); }
.acct__pre-card > p { margin: 0 0 var(--s-4); color: var(--slate-700); }
.acct__pre-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.acct__pre-card .quiz-question { background: var(--white); }
.acct__pre-done { margin: var(--s-4) 0 0; font-weight: 600; color: var(--green-700); }

.exam-gate { padding: var(--s-2) 0; }
.exam-gate p { color: var(--slate-700); }
.quiz-question.is-right { border-color: var(--green-100); }
.quiz-question.is-wrong { border-color: #FECACA; background: #FFF7F7; }
.srv-mark { margin-left: auto; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; padding: 2px 8px; border-radius: var(--r-full); }
.is-right .srv-mark { color: var(--green-700); background: var(--green-50); }
.is-wrong .srv-mark { color: #991B1B; background: #FEE2E2; }
.quiz-question__head { display: flex; gap: var(--s-3); align-items: flex-start; }

@media (max-width: 880px) {
  .acct__form { grid-template-columns: 1fr; gap: var(--s-5); }
}
@media (max-width: 480px) {
  .acct__card { padding: var(--s-5) var(--s-4); }
  .acct__pre-card { padding: var(--s-5) var(--s-4); }
}