/* Account pages on the exercise-book design: signup.html, join.html,
 * student-join.html, the two tutorials,
 * password-reset.html, and verify-email.html. Loads after book.css and
 * uses its tokens only: --paper, --card, --field, --rule, --margin, --ink,
 * --ink-2, --ink-3, --sky, --sky-deep, --yellow, --mint, --mint-ink, --red,
 * --red-ink, --font-note, --line, --shadow, --radius.
 *
 * Every page is one ruled sheet with a red margin line, a brand in the top
 * corner, and one centred panel. Labels sit on the 32px grid; fields are
 * 48px tall with a 2px ink border and 8px above and below, so a label and
 * its field fill 96px. One file, so the four pages stay one
 * family. The behaviour lives in account.js because the CSP refuses an
 * inline script.
 */

body { padding-inline: 16px; position: relative; height: auto; min-height: 100vh; overflow-y: auto; }
body::before { content: ""; position: fixed; top: 0; bottom: 0; left: max(16px, calc(50% - 560px - 24px)); width: 2px; background: var(--margin); pointer-events: none; z-index: 1; }

/* book.css makes main display: contents for the home page. These pages
   need a real landmark with a width. */
main { display: block; }
.wrap { max-width: 1120px; margin-inline: auto; position: relative; z-index: 2; }

.skip-link { position: absolute; left: 16px; top: -64px; z-index: 300; background: var(--ink); color: var(--on-ink); padding: 8px 14px; border-radius: var(--radius); font-weight: 700; text-decoration: none; }
.skip-link:focus-visible { top: 8px; outline: 3px solid var(--sky-deep); outline-offset: 3px; }

/* min-height, so the row grows when the brand and the link wrap on a phone. */
.nav { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.nav a:not(.btn) { font-weight: 700; color: var(--ink-2); text-decoration: none; }
.nav a:not(.btn):hover { color: var(--sky-deep); text-decoration: underline; text-underline-offset: 4px; }

.panel { max-width: 560px; margin: 32px auto 64px; }
.note { font-family: var(--font-note); font-size: 24px; line-height: var(--line); color: var(--sky-deep); font-weight: 700; }
.account-lede { color: var(--ink-2); margin-bottom: 32px; }

/* The yellow box on signup: what is collected, and why */
/* -8px against the lede's 32px margin collapses to 24px, so the box starts
   24px below a rule and its first line lands on the next one. */
.collect { padding: 6px 20px; margin-block: -8px 24px; border: 2px solid var(--ink); border-radius: var(--radius); background: color-mix(in srgb, var(--yellow) 16%, var(--card)); }

/* The student's collection notice, step three of signup (REQ-122). The same
   yellow box, inside the form card, filled by account.js from the server. */
.student-notice { margin-block: -8px 24px; }
.account-card .student-notice .account-lede { margin-bottom: 0; font-weight: 700; color: var(--ink); }
.student-notice .field-hint { margin-bottom: 0; }
.student-notice p { margin: 0 0 var(--line); }

/* The form card */
.account-card { padding: 30px 22px; border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--card); }
/* A flex column, so no margin collapses inside the form or the notice: the
   input keeps its 8px below a field with no hint, and the button keeps its
   8px above it after a field. Each row then adds up to a multiple of 32.
   book.css gives [hidden] display none with !important, so a hidden form
   stays hidden. */
.account-card form, .student-notice { display: flex; flex-direction: column; }
.account-card form > p { margin-bottom: 0; }
.account-card .account-lede { margin-bottom: var(--line); }

.field { margin-bottom: var(--line); }
.field label { display: block; font-weight: 700; height: var(--line); }
.field input, .field select { display: block; width: 100%; height: 48px; margin-block: 8px; font: inherit; font-size: 15px; font-weight: 700; padding: 0 12px; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--field); color: var(--ink); }
.field select { appearance: auto; }
.field input::placeholder { color: var(--ink-3); opacity: 1; font-weight: 400; }
.field input:focus-visible, .field select:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 2px; }
.field input[readonly] { background: var(--paper); color: var(--ink-2); }
.field-hint { color: var(--ink-3); font-size: 14px; line-height: var(--line); margin: 0; }

/* The submit button: the ink button from book.css, block on a phone */
.account-card button { height: 48px; width: fit-content; padding: 0 20px; margin-block: 8px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font: inherit; font-weight: 700; font-size: 16px; border: 2px solid var(--ink); background: var(--ink); color: var(--on-ink); cursor: pointer; transition: background 150ms var(--ease); }
.account-card button:hover { background: var(--sky-deep); border-color: var(--sky-deep); }
.account-card button:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 3px; }
.account-card button:disabled { opacity: 0.6; cursor: default; }

/* The live region account.js writes to */
.form-message { margin: 24px 0; padding: 6px 16px; border: 2px solid; border-radius: var(--radius); font-weight: 700; font-size: 15px; line-height: var(--line); }
.form-message.error { color: var(--red-ink); border-color: var(--red-ink); background: color-mix(in srgb, var(--red) 12%, var(--card)); }
.form-message.ok { color: var(--mint-ink); border-color: var(--mint-ink); background: color-mix(in srgb, var(--mint) 14%, var(--card)); }
.form-message:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 3px; }

.account-foot { margin-top: 32px; color: var(--ink-3); font-size: 15px; }
.account-card .account-foot { margin-top: 0; }

footer { padding-block: 32px; color: var(--ink-3); font-size: 15px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer a { font-weight: 700; color: var(--ink-2); text-decoration: none; }
footer a:hover { color: var(--sky-deep); text-decoration: underline; text-underline-offset: 4px; }

/* Below 1168px the red margin line sits at 16px, the content edge. Keep the
   text off the line. */
@media (max-width: 1168px) {
  body { padding-inline: 32px 16px; }
}

@media (max-width: 640px) {
  h1 { font-size: 30px; }
  .panel { margin-top: 16px; }
  .account-card { padding: 30px 14px; }
  .account-card button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .account-card button { transition: none; }
}

/* ---- The two walkthroughs: tutorial-student.html and tutorial-parent.html
   (REQ-137). One step on the page at a time, the same calm rules as the
   lesson page: one accent, one 120ms fade that reduced motion removes, and
   no timer. Every step is in the document; tutorial.js only pages them. */
.tut-shell { min-height: 100vh; display: flex; flex-direction: column; }
.tut-bar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tut-title { flex: 1; min-width: 0; font-size: 18px; line-height: var(--line); text-align: center; }
.tut-count { font-family: var(--font-note); font-size: 22px; line-height: var(--line); color: var(--ink-3); white-space: nowrap; min-width: 64px; text-align: right; }
.tut-main { flex: 1; display: flex; justify-content: center; padding-block: var(--line); }
.tut-step { width: 100%; max-width: 62ch; }
.tut-kind { font-family: var(--font-note); font-size: 24px; line-height: var(--line); color: var(--sky-deep); font-weight: 700; }
.tut-step h2 { font-size: 30px; line-height: calc(var(--line) * 2); letter-spacing: -0.015em; text-wrap: balance; }
.tut-step h2:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 4px; }
.tut-step p + p { margin-top: var(--line); }
/* The one accent, borrowed from the lesson page's takeaway, so a student
   meets it here before the first lesson. */
.tut-demo { padding: 6px 18px; border: 2px solid var(--ink); border-left: 6px solid var(--mint); border-radius: var(--radius); background: color-mix(in srgb, var(--mint) 14%, var(--card)); font-weight: 700; }
.tut-demo-label { display: block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
/* The welfare asymmetry on the parent's fourth step, marked because a
   parent must not miss it. */
.tut-warn { padding: 6px 18px; border: 2px dashed var(--red-ink); border-radius: var(--radius); background: color-mix(in srgb, var(--red) 10%, var(--card)); }
.tut-foot { max-width: 62ch; width: 100%; margin: 0 auto; min-height: calc(var(--line) * 2); display: flex; align-items: center; gap: 12px; padding-bottom: var(--line); }
.tut-gap { flex: 1; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-anim="0"]) .tut-step { animation: tut-appear 120ms ease-out; }
}
@keyframes tut-appear { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 640px) {
  .tut-title { text-align: left; flex-basis: 100%; order: 3; }
  .tut-step h2 { font-size: 24px; line-height: var(--line); margin-bottom: var(--line); }
}