/* Keystage diagnostic — component styles (Design pass), scoped to #diag.
   The flow/copy/logic live in /assets/js/diagnostic.js (unchanged). These
   styles match the design mockup; my JS renders into #diag-step using these
   class names. */

#diag .eyebrow{ font-size:0.74rem; letter-spacing:.13em; text-transform:uppercase; color:#0A6B66; font-weight:600; margin-bottom:0.55rem; }
#diag .dots{ display:flex; gap:7px; align-items:center; margin-bottom:1.4rem; }
#diag .dot{ width:8px; height:8px; border-radius:50%; background:#D5D3CB; transition:background .2s; }
#diag .dot.on{ background:#0E8C86; }

#diag .q{ font-family:'Sora',sans-serif; font-size:1.06rem; font-weight:600; color:#16314E; margin-bottom:0.95rem; letter-spacing:-0.01em; }
#diag .lab{ font-size:0.76rem; color:#5B6B7A; margin:0.2rem 0 0.55rem; font-weight:500; }

#diag .choice{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:13px 15px; border:1px solid #E2E1DA; border-radius:12px; background:#fff; cursor:pointer; font-size:0.95rem; color:#21303F; margin-bottom:9px; font-family:inherit; transition:border-color .15s, background .15s, transform .1s; }
#diag .choice:hover{ border-color:#0E8C86; background:#FBFDFC; transform:translateY(-1px); }
#diag .choice .ic{ font-size:1.15rem; color:#0A6B66; flex:none; width:22px; text-align:center; }
#diag .choice .ar{ margin-left:auto; color:#9AA6B0; }
#diag .choice2{ align-items:flex-start; }
#diag .choice2 .tx{ display:flex; flex-direction:column; }
#diag .choice2 .t{ font-weight:600; color:#16314E; margin-bottom:2px; }
#diag .choice2 .d{ font-size:0.82rem; color:#5B6B7A; line-height:1.5; font-weight:400; }

#diag .segwrap{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:1rem; }
#diag .seg{ padding:8px 13px; border:1px solid #E2E1DA; border-radius:9px; background:#fff; cursor:pointer; font-size:0.86rem; color:#5B6B7A; font-family:inherit; transition:all .15s; }
#diag .seg:hover{ border-color:#D5D3CB; }
#diag .seg.sel{ border-color:#0E8C86; background:#0E8C86; color:#fff; font-weight:600; }

#diag .shelfwrap{ display:flex; flex-direction:column; gap:8px; margin-bottom:1rem; }
#diag .shelf{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; width:100%; padding:11px 14px; border:1px solid #E2E1DA; border-radius:10px; background:#fff; cursor:pointer; font-family:inherit; transition:border-color .15s, background .15s; }
#diag .shelf:hover{ border-color:#D5D3CB; }
#diag .shelf.sel{ border-color:#0E8C86; background:#F1FAF8; }
#diag .shelf .st{ font-size:0.9rem; font-weight:600; color:#16314E; }
#diag .shelf.sel .st{ color:#0A6B66; }
#diag .shelf .sd{ font-size:0.78rem; color:#5B6B7A; margin-top:1px; font-weight:400; }

#diag input, #diag textarea{ width:100%; font-family:inherit; font-size:0.95rem; color:#21303F; background:#fff; border:1px solid #D5D3CB; border-radius:10px; padding:0.72rem 0.9rem; margin-bottom:0.7rem; }
#diag input:focus, #diag textarea:focus{ outline:none; border-color:#0E8C86; }

#diag .btn{ font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.95rem; padding:0.85rem 1.4rem; border-radius:11px; border:none; cursor:pointer; transition:filter .15s, transform .1s; }
#diag .btn-gold{ background:#C9A24B; color:#16314E; }
#diag .btn-gold:hover{ filter:brightness(1.05); transform:translateY(-1px); }
#diag .btn-teal{ background:#0E8C86; color:#fff; }
#diag .btn-teal:hover{ background:#0A6B66; }
#diag .btn[aria-busy="true"]{ opacity:.7; pointer-events:none; }

#diag .docrow{ display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid #E2E1DA; }
#diag .docrow .ic{ font-size:1.1rem; color:#0A6B66; width:20px; text-align:center; }
#diag .docrow .nm2{ font-size:0.9rem; flex:1; }
#diag .attach{ font-family:inherit; font-size:0.82rem; color:#0A6B66; background:#fff; border:1px solid #D5D3CB; border-radius:8px; padding:6px 11px; cursor:pointer; }
#diag .attach:hover{ border-color:#0E8C86; }
#diag .attached{ font-size:0.82rem; color:#0E8C86; font-weight:600; display:inline-flex; align-items:center; gap:5px; }

#diag .ddrow{ display:flex; gap:11px; align-items:flex-start; padding:9px 0; border-bottom:1px solid #E2E1DA; font-size:0.9rem; }
#diag .ddrow .ic{ color:#0A6B66; margin-top:1px; }

#diag .done{ display:flex; gap:13px; align-items:flex-start; }
#diag .done .ck{ width:38px; height:38px; border-radius:50%; background:#E1F5EE; color:#0E8C86; display:flex; align-items:center; justify-content:center; flex:none; font-size:1.15rem; }
#diag .done .dt{ font-family:'Sora',sans-serif; font-weight:600; color:#16314E; margin-bottom:3px; }
#diag .done .dd{ font-size:0.9rem; color:#5B6B7A; }

#diag .note{ font-size:0.8rem; color:#5B6B7A; margin-top:0.5rem; line-height:1.55; }
#diag .diag-error{ color:#9a1b1b; font-size:0.82rem; margin-top:-0.2rem; margin-bottom:0.6rem; }

#diag .dnav{ margin-top:1.15rem; display:flex; }
#diag .dnav button:first-child{ margin-right:20px; }
#diag .dnav button{ background:none; border:none; font-family:inherit; font-size:0.84rem; color:#5B6B7A; cursor:pointer; }
#diag .dnav button:hover{ color:#0A6B66; }