/* Sign-up, parent dashboard and student home.
   Requires css/tokens.css loaded first for colours, fonts, and .btn */

.account-block{
  max-width:820px;
  margin:0 auto;
  padding:52px 40px 72px;
}

/* ---------- Page heading ---------- */
.account-eyebrow{
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--verdigris);
  margin:0 0 10px;
}

.account-title{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  line-height:1.2;
  margin:0 0 14px;
  color:var(--ink);
}

.account-lede{
  font-size:1.02rem;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0;
  max-width:620px;
}

.account-intro{ margin-bottom:28px; }

/* ---------- Errors ---------- */
.form-error,
.field-error{
  font-family:'IBM Plex Mono', monospace;
  color:var(--oxide);
}

.form-error{
  font-size:0.78rem;
  line-height:1.45;
  border:1px solid var(--oxide);
  background:var(--paper-panel);
  padding:10px 12px;
  margin:0 0 20px;
}

.field-error{
  font-size:0.72rem;
  line-height:1.4;
  margin:6px 0 0;
}

/* ---------- Form ---------- */
.account-section{
  border:1px solid var(--rule);
  margin:0 0 20px;
  padding:20px 24px 8px;
}

.account-section legend{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  font-size:1.1rem;
  color:var(--ink);
  padding:0 8px;
  margin-left:-8px;
  display:flex;
  align-items:center;
  gap:10px;
}

.account-step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  background:var(--ink);
  color:var(--paper);
  font-size:0.72rem;
  font-weight:600;
}

.account-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 20px;
}

.account-field{ margin-bottom:16px; }

.account-field label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.66rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:5px;
}

.account-field input,
.account-field select{
  width:100%;
  min-height:44px;
  font-family:'Source Serif 4', Georgia, serif;
  font-size:1rem;
  padding:9px 11px;
  border:1px solid var(--rule);
  background:var(--paper);
  color:var(--ink);
  border-radius:0;
}

.account-field input:focus-visible,
.account-field select:focus-visible,
.account-check input:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:1px;
  border-color:var(--focus);
}

.account-field input[aria-invalid="true"],
.account-field select[aria-invalid="true"]{
  border-color:var(--oxide);
}

.field-hint{
  font-size:0.8rem;
  line-height:1.4;
  color:var(--ink-soft);
  margin:6px 0 0;
}

.account-consent{
  margin:4px 0 24px;
}

.account-check{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:0.95rem;
  line-height:1.5;
  color:var(--ink);
  cursor:pointer;
}

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

.account-check a,
.account-submit__note a,
.dash-welcome a{
  color:var(--verdigris-deep);
}

.account-submit{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px 22px;
}

.account-submit__note{
  font-size:0.88rem;
  color:var(--ink-soft);
  margin:0;
}

/* ---------- Dashboard ---------- */
.dash-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:28px;
}

.dash-head .account-title{ margin:0; }

.dash-welcome{
  background:var(--ink);
  color:var(--paper);
  padding:22px 26px;
  margin:0 0 24px;
}

.dash-welcome h2{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  font-size:1.2rem;
  margin:0 0 8px;
}

.dash-welcome p{
  margin:0 0 8px;
  line-height:1.55;
}

.dash-welcome p:last-child{ margin-bottom:0; }

.dash-welcome strong{
  font-weight:600;
  background:var(--verdigris-deep);
  padding:1px 6px;
}

.dash-empty{
  color:var(--ink-soft);
}

.dash-child{
  border:1px solid var(--rule);
  padding:22px 24px;
  margin:0 0 20px;
}

.dash-child__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:8px 20px;
  margin-bottom:18px;
}

.dash-child__head h2{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  font-size:1.35rem;
  margin:0 0 2px;
  color:var(--ink);
}

.dash-child__meta,
.dash-child__login{
  font-size:0.72rem;
  letter-spacing:0.04em;
  color:var(--ink-soft);
  margin:0;
}

.dash-child__login{
  border:1px dashed var(--rule);
  padding:4px 8px;
}

.dash-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.dash-stat{
  background:var(--paper-panel);
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.dash-stat__label{
  font-size:0.62rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.dash-stat__value{
  font-family:'Fraunces', Georgia, serif;
  font-weight:700;
  font-size:1.65rem;
  line-height:1.15;
  color:var(--ink);
}

.dash-stat__value--text{
  font-size:1.15rem;
  line-height:1.3;
  padding-top:4px;
}

.dash-stat__sub{
  font-size:0.82rem;
  color:var(--ink-soft);
}

.dash-note{
  font-size:0.92rem;
  line-height:1.55;
  color:var(--ink-soft);
  margin:16px 0 0;
}

.dash-note--flush{ margin-top:0; }

.dash-soon__title{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  font-size:1.3rem;
  margin:0 0 8px;
  color:var(--ink);
}

.dash-privacy{
  background:var(--paper-panel);
  padding:20px 24px;
}

.dash-privacy h2{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--verdigris);
  margin:0 0 8px;
}

.dash-privacy p{
  margin:0;
  font-size:0.95rem;
  line-height:1.55;
  color:var(--ink);
}

/* ---------- Mobile ---------- */
@media (max-width:720px){
  .account-block{
    padding:36px 22px 56px;
  }

  .account-section{
    padding:18px 16px 4px;
  }

  .account-row,
  .dash-stats{
    grid-template-columns:1fr;
  }

  .dash-child{
    padding:18px 16px;
  }
}

/* ---------- Student lesson cards ---------- */
.lesson-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px 24px;
}

.lesson-card .dash-child__meta{ margin-bottom:4px; }
.lesson-card .dash-soon__title{ margin-bottom:10px; }

.lesson-card__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.status-pill{
  display:inline-block;
  font-size:0.68rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:3px 9px;
  margin:0;
  border:1px solid var(--rule);
  color:var(--ink-soft);
}
.status-pill--building{ border-color:var(--ink); color:var(--ink); }
.status-pill--secure{ background:var(--verdigris); border-color:var(--verdigris); color:var(--paper); }
.status-pill--needs_work{ border-style:dashed; border-color:var(--oxide); color:var(--oxide); }