/* ==========================================================================
   pages/assess.css — P6: quizzes, assignments, the grading page, the verify
   page and certificate cards. Loads after checkout.css (and sessions.css);
   reuses their kicker, title, lines and rundown styles.
   ========================================================================== */
.assess__wrap{ max-width:760px; }
.assess__list .row__body{ grid-template-columns:minmax(0,1fr) auto; }
.assess__due{ font-size:13px; color:var(--text-3); }
.assess__outcome{ margin-top:var(--space-6); padding:var(--space-4); border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); }
.assess__outcome ul{ margin-top:var(--space-2); padding-left:1.2em; color:var(--text-2); font-size:var(--text-sm); }
.assess__outcome--ok{ border-color:var(--success-line); background:var(--success-soft); }

/* The quiz */
.quiz__meta{ display:flex; gap:var(--space-4); flex-wrap:wrap; margin-top:var(--space-3); font-size:var(--text-sm); color:var(--text-2); }
.quiz__meta b{ color:var(--text-1); font-variant-numeric:tabular-nums; }
.quiz__q{ padding:var(--space-5) 0; border-top:1px solid var(--border); }
.quiz__q:first-of-type{ border-top:1px solid var(--border-strong); }
.quiz__n{ font-size:var(--text-xs); color:var(--text-3); font-variant-numeric:tabular-nums; }
.quiz__prompt{ margin-top:var(--space-1); font-size:var(--text-md); font-weight:var(--weight-medium); white-space:pre-wrap; max-width:none; }
.quiz__opts{ list-style:none; margin:var(--space-3) 0 0; padding:0; display:grid; gap:var(--space-2); }
.quiz__opt{ display:flex; gap:var(--space-3); align-items:flex-start; min-height:var(--control-h); padding:10px var(--space-3); border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); cursor:pointer; }
.quiz__opt input{ width:18px; height:18px; margin:2px 0 0; flex:none; accent-color:var(--accent); }
.quiz__opt:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
.quiz__opt--right{ border-color:var(--success-line); background:var(--success-soft); }
.quiz__opt--wrong{ border-color:var(--live-line); background:var(--live-soft); }
.quiz__mark{ font-size:12px; color:var(--text-3); margin-left:auto; white-space:nowrap; }
.quiz__explain{ margin-top:var(--space-3); padding:var(--space-3); border-left:2px solid var(--accent); font-size:var(--text-sm); color:var(--text-2); max-width:none; }
.quiz__submit{ position:sticky; bottom:0; padding:var(--space-4) 0; background:var(--bg); border-top:1px solid var(--border-strong); display:flex; gap:var(--space-3); align-items:center; flex-wrap:wrap; }
.quiz__timer{ font-size:var(--text-sm); color:var(--text-2); font-variant-numeric:tabular-nums; }
.quiz__score{ display:flex; align-items:baseline; gap:var(--space-3); margin-top:var(--space-4); }
.quiz__score b{ font-size:var(--text-3xl); color:var(--text-strong); font-variant-numeric:tabular-nums; }

/* Assignment and grading */
.rubric{ margin-top:var(--space-4); border-top:1px solid var(--border-strong); }
.rubric__row{ display:grid; grid-template-columns:minmax(0,1fr) 120px; gap:var(--space-4); align-items:center; padding:var(--space-3) 0; border-bottom:1px solid var(--border); }
.rubric__row .field__input{ height:var(--control-h-sm); text-align:right; }
.rubric__max{ font-size:var(--text-sm); color:var(--text-3); }
.rubric__total{ display:flex; justify-content:space-between; padding:var(--space-3) 0; font-weight:var(--weight-medium); }
.sub__file{ display:flex; gap:var(--space-3); align-items:center; flex-wrap:wrap; padding:var(--space-3) var(--space-4); border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); font-size:var(--text-sm); }
.sub__notes{ white-space:pre-wrap; color:var(--text-2); font-size:var(--text-sm); max-width:none; }
.sub__feedback{ margin-top:var(--space-3); padding:var(--space-3) var(--space-4); border-left:2px solid var(--accent); background:var(--surface); white-space:pre-wrap; font-size:var(--text-sm); }
.grade__decision{ display:flex; gap:var(--space-4); flex-wrap:wrap; }
.grade__decision label{ display:flex; gap:var(--space-2); align-items:center; font-size:var(--text-sm); }
.grade__decision input{ accent-color:var(--accent); width:18px; height:18px; }

/* Verify */
.verify{ padding-block:var(--space-12) var(--space-16); }
.verify__wrap{ max-width:560px; }
.verify__input{ height:56px; font-size:var(--text-xl); letter-spacing:.12em; text-transform:uppercase; font-variant-numeric:tabular-nums; }
.verify__result{ margin-top:var(--space-8); padding:var(--space-5); border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface); }
.verify__result--valid{ border-color:var(--success-line); }
.verify__result--revoked{ border-color:var(--live-line); }
.verify__state{ display:flex; gap:var(--space-2); align-items:center; font-size:var(--text-lg); font-weight:var(--weight-semibold); }
.verify__code{ font-variant-numeric:tabular-nums; letter-spacing:.08em; }
.verify__note{ margin-top:var(--space-5); font-size:var(--text-sm); color:var(--text-3); }

/* Certificate card (trainee dashboard, assessments page) */
.cert{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-4); align-items:center; padding:var(--space-4); border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface); }
.cert__code{ font-size:var(--text-lg); font-weight:var(--weight-semibold); letter-spacing:.08em; font-variant-numeric:tabular-nums; color:var(--text-strong); }
.cert__meta{ font-size:var(--text-sm); color:var(--text-2); }
.cert__actions{ display:flex; gap:var(--space-2); flex-wrap:wrap; }
.cert--revoked{ border-color:var(--live-line); }

@media (max-width:640px){
  .cert{ grid-template-columns:minmax(0,1fr); }
  .rubric__row{ grid-template-columns:minmax(0,1fr) 88px; }
  .assess__list .row__body{ grid-template-columns:minmax(0,1fr); }
}