#assessment-stage { display:flex; flex:1; min-height:0; }
.assessment-shell { display:flex; flex-direction:column; flex:1; min-width:0; min-height:0; padding:8px 20px 12px; color:#233631; }
.assessment-shell[hidden] { display:none; }
.assessment-shell button { font:inherit; }
.assessment-toolbar { display:flex; align-items:center; gap:12px; flex:none; min-height:38px; margin-bottom:6px; }
.assessment-topic-title { flex:1; min-width:0; margin:0; font-size:13px; font-weight:650; line-height:1.2; color:#466550; }
.assessment-reset { margin-left:auto; flex:none; min-height:36px; padding:7px 10px; border:1px solid #bdccc2; border-radius:8px; background:transparent; color:#196b64; font-size:11px!important; cursor:pointer; }
.assessment-reset:hover { background:#e3eee6; }
.assessment-reset:focus-visible { outline:3px solid #005cbd; outline-offset:2px; }
.assessment-topics { display:flex; gap:5px; margin:0; padding:0; list-style:none; }
.assessment-topic { display:grid; place-items:center; width:27px; height:27px; border:1px solid #cad7c6; border-radius:50%; color:#788278; background:#f1f2ed; font-size:11px; font-weight:700; }
.assessment-topic[data-status="current"] { color:#195c48; border:2px solid #196b64; background:#e3eee6; }
.assessment-topic[data-status="complete"] { color:white; border-color:#196b64; background:#196b64; }
.assessment-question { display:flex; flex:1; flex-direction:column; min-height:0; padding:10px 16px 0; border:1px solid #dce2d9; border-radius:12px; background:#fffefa; }
.assessment-question > h3,.assessment-question > h4 { flex:none; font-size:18px; line-height:1.3; margin:0 0 6px; text-align:center; }
#assessment-review-heading { color:#196b64; }
#assessment-interaction { flex:1; min-height:0; display:flex; }
.assessment-footer { display:flex; flex:none; align-items:center; justify-content:space-between; gap:12px; min-height:66px; margin-top:7px; padding:9px 0; border-top:1px solid #dce2d9; }
.assessment-progress-feedback { min-width:0; }
.assessment-streak { display:flex; gap:8px; align-items:center; color:#466550; font-size:12px; }
.assessment-streak-dots { display:flex; gap:4px; }
.streak-dot { display:grid; place-items:center; width:22px; height:22px; border:1px solid #a9bfaa; border-radius:50%; background:#f5f8ef; font-size:10px; }
.streak-dot[data-filled="true"] { color:white; background:#196b64; border-color:#196b64; }
.assessment-feedback { margin:3px 0 0; color:#526b54; font-size:12px; line-height:1.25; }
.assessment-feedback:empty { display:none; }
.assessment-feedback.correct { color:#245c37; font-weight:700; }
.assessment-feedback.try-again { color:#805513; }
.assessment-actions { display:flex; flex:none; }
.assessment-actions button { min-height:46px; min-width:150px; padding:10px 18px; border:1px solid #196b64; border-radius:9px; background:#196b64; color:white; font-size:14px; font-weight:700; }
.assessment-actions button:disabled { color:#637166; border-color:#d8e0d3; background:#e9eee3; }
.assess-interaction { display:flex; flex-direction:column; flex:1; min-width:0; min-height:0; gap:5px; color:#233631; }
.assess-interaction button { font:inherit; }
.assess-count-model,.assess-shell-model,.assess-model-panel { display:flex; flex:1; flex-direction:column; min-height:0; text-align:center; }
.assess-atom-svg { flex:1; width:100%; max-width:330px; min-height:0; margin:0 auto; }
.assess-atom-svg > svg { display:block; width:100%; height:100%; }
.assess-particle-counts { display:flex; flex:none; justify-content:center; gap:16px; margin:5px 0; font-size:15px; line-height:1.3; }
.assess-particle-counts strong { font-weight:750; }
.assess-response-count { flex:none; margin:0; text-align:center; color:#42634c; font-size:14px; }
.assess-adjust,.assess-shell-buttons,.assess-charge-options,.assess-classify-options { display:flex; flex:none; align-items:center; justify-content:center; gap:9px; }
.assess-adjust button,.assess-shell-buttons button { min-height:44px; padding:9px 16px; border:1px solid #a7c3a4; border-radius:8px; background:#eef5e7; color:#285736; font-size:14px; font-weight:650; }
.assess-adjust button:disabled { opacity:.46; }
.assess-shell-buttons button[aria-pressed="true"] { border-color:#196b64; background:#dcebdd; box-shadow:0 0 0 2px #196b64; }
.assess-selected-ring { stroke:#196b64!important; stroke-width:4px!important; }
.assess-ring-hit { cursor:pointer; }
.assess-ring-hit:focus-visible { stroke:#005cbd; stroke-opacity:.25; outline:none; }
.assess-transfer-atom { display:flex; flex-direction:column; flex:1; min-height:0; text-align:center; }
.assess-transfer-picture { display:flex; flex:1; min-height:0; width:100%; margin:0 auto; }
.assess-choice { min-height:44px; padding:9px 16px; border:1px solid #bccdbb; border-radius:9px; background:#fffefa; color:#233631; cursor:pointer; }
.assess-choice:hover:not(:disabled) { background:#edf4e9; border-color:#699980; }
.assess-choice[aria-pressed="true"] { outline:3px solid #196b64; outline-offset:1px; background:#e3eee6; font-weight:700; }
.assess-choice:focus-visible { outline:3px solid #005cbd; outline-offset:2px; }
.assess-choice:disabled { cursor:default; }
.assess-charge-options .assess-choice { min-width:50px; font-size:20px; padding:8px 12px; }
.assess-positive { color:#356ec0; background:#e8f0ff; border-color:#a8bee1; }
.assess-negative { color:#ad435c; background:#fceaf0; border-color:#d9a3b2; }
.assess-neutral { color:#536757; background:#f0f3eb; border-color:#c0cdb9; }
.assess-match-diagram { display:flex; flex:1; min-height:0; justify-content:center; align-items:center; }
.assess-charge-diagram { display:block; width:100%; max-width:480px; height:100%; max-height:260px; }
.assess-pair-diagram { max-width:360px; max-height:150px; }
.assess-match-options { flex:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%; max-width:800px; margin:0 auto; }
.assess-match-card { display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px!important; line-height:1.3; text-align:center; padding:9px 12px; }
.assess-option-graphic { flex:none; width:88px; height:30px; fill:#eef3eb; stroke:#6d8e70; stroke-width:1.5; }
.assess-option-graphic text { fill:#536d53; stroke:none; text-anchor:middle; font-size:14px; }
.assess-option-graphic path { fill:none; }
.assess-kind-balance { justify-content:center; }
.assess-ion-group { display:flex; flex-direction:column; justify-content:center; flex:1; min-height:0; width:100%; max-width:650px; margin:0 auto; padding:8px 12px; border:1px solid #d5e0d1; border-radius:12px; background:#f7faf4; }
.assess-given-ions,.assess-added-ions { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.assess-given-ions { margin-bottom:12px; }
.assess-added-ions { min-height:64px; padding-top:12px; border-top:1px solid #dce6d7; }
.assess-given-ion { display:grid; place-items:center; flex:none; width:clamp(44px,8vh,64px); height:clamp(44px,8vh,64px); border-width:1px; border-style:solid; border-radius:50%; }
.assess-given-ion strong { font-size:21px; }
.assess-empty { margin:0; color:#64736e; font-size:14px; }
.assess-electron-hit { fill:transparent; stroke:transparent; stroke-width:2px; cursor:pointer; }
.assess-electron-hit:hover { stroke:#7f9f86; }
.assess-electron-hit[aria-pressed="true"] { fill:#196b6422; stroke:#196b64; }
.assess-electron-hit:focus-visible { outline:none; stroke:#005cbd; stroke-width:3px; }
.assess-ui-locked .assess-electron-hit,.assess-ui-locked .assess-ring-hit { cursor:default; }
.assess-live { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.assessment-summary { display:flex; flex:1; flex-direction:column; min-height:0; padding:12px; border:1px solid #aac6a5; border-radius:12px; background:#eef6e9; color:#245c37; }
.assessment-summary h3 { flex:none; margin:0 0 6px; text-align:center; font-size:20px; line-height:1.3; }
#assessment-certificate { display:flex; flex:1; min-height:0; flex-direction:column; align-items:center; justify-content:center; }
.certificate-form { width:100%; max-width:440px; margin:0; }
.certificate-form label { display:block; margin-bottom:6px; font-size:15px; }
.certificate-form input { width:100%; min-height:46px; padding:10px 12px; font:inherit; font-size:20px; border:2px solid #9dbfb0; border-radius:8px; background:#fffefa; }
.certificate-form input[aria-invalid="true"] { border-color:#a94b38; }
.certificate-form .button-primary { display:block; width:100%; min-height:48px; font-size:15px; }
.certificate-note { margin:8px 0 0; font-size:12px; text-align:center; color:#526b54; }
.certificate-art { flex:1; min-height:0; width:100%; }
.certificate-art svg { display:block; width:100%; height:100%; }
.certificate-actions { display:flex; flex:none; justify-content:center; gap:8px; margin-top:8px; width:100%; }
.certificate-actions .button { min-height:44px; font-size:13px; padding:9px 13px; }
#certificate-feedback { flex:none; margin:6px 0; color:#a94b38; font-size:13px; }
#certificate-feedback:empty { margin:4px 0; }
#certificate-print-sheet { display:none; }
@media(max-width:600px) {
  .assessment-shell { padding:4px 8px 8px; }
  .assessment-toolbar { gap:6px; min-height:35px; margin-bottom:4px; }
  .assessment-topics { gap:3px; }
  .assessment-topic { width:23px; height:23px; font-size:10px; }
  .assessment-topic-title { font-size:11px; }
  .assessment-reset { min-height:34px; padding:6px 7px; font-size:10px!important; }
  .assessment-question { padding:8px 9px 0; }
  .assessment-question > h3,.assessment-question > h4 { font-size:15px; }
  .assessment-footer { min-height:61px; gap:6px; padding:8px 0; margin-top:5px; }
  .assessment-streak { gap:5px; font-size:11px; flex-wrap:wrap; }
  .streak-dot { width:19px; height:19px; font-size:9px; }
  .assessment-streak-dots { gap:3px; }
  .assessment-actions button { min-width:128px; min-height:46px; padding:10px 12px; font-size:13px; }
  .assessment-feedback { font-size:11px; }
  .assess-particle-counts { font-size:14px; gap:12px; }
  .assess-atom-svg { max-width:270px; }
  .assess-adjust,.assess-shell-buttons,.assess-charge-options,.assess-classify-options { gap:5px; }
  .assess-adjust button,.assess-shell-buttons button { padding:8px 11px; font-size:13px; }
  .assess-choice { padding:9px 11px; font-size:13px!important; }
  .assess-charge-options .assess-choice { flex:1; min-width:0; padding:8px 3px; font-size:17px!important; }
  .assess-match-options { gap:6px; }
  .assess-match-card { flex-direction:column; gap:3px; padding:7px; font-size:12px!important; }
  .assess-option-graphic { width:77px; height:24px; }
  .assess-given-ion { width:52px; height:52px; }
  .assess-given-ion strong { font-size:19px; }
  .assess-ion-group { padding:7px; }
  .assess-given-ions,.assess-added-ions { gap:6px; }
  .assessment-summary { padding:10px; }
  .assessment-summary h3 { font-size:17px; }
  .certificate-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  #certificate-download { grid-column:1 / -1; grid-row:1; font-size:15px; }
  .certificate-actions .button { padding:8px; font-size:12px; }
}
@media(max-height:560px) and (min-width:601px) {
  .assessment-toolbar { min-height:30px; margin-bottom:3px; }
  .assessment-question { padding-top:6px; }
  .assessment-question > h3,.assessment-question > h4 { font-size:15px; margin-bottom:3px; }
  .assessment-footer { min-height:53px; padding:5px 0; margin-top:4px; }
  .assess-match-options { gap:5px; }
  .assess-match-card { min-height:36px; padding:5px 10px; }
  .assess-given-ion { width:40px; height:40px; }
  .assess-given-ions { margin-bottom:5px; }
  .assess-added-ions { min-height:44px; padding-top:5px; }
}
@media print {
  .assessment-shell { display:none; }
  body.printing-certificate > * { display:none!important; }
  body.printing-certificate > #certificate-print-sheet { display:block!important; width:100%; page:certificate; }
  #certificate-print-sheet svg { display:block; width:100%; height:auto; max-height:175mm; }
  body.printing-certificate { margin:0; padding:0; height:auto; overflow:visible; background:white; }
  @page certificate { size:letter landscape; margin:10mm; }
}