/* ── Silver look for the deterministic interactive-question engine (all qtypes) ──
   Deploy to /css/sv-interactive.css ; referenced by InteractiveQuestion.ascx and NoteBook.ascx. */

.sv-iq{ background:#fff; border:1px solid #E7DFD2; border-radius:12px; padding:1rem 1.1rem; margin:1rem 0; }
.sv-iq-prompt{ font-size:.98rem; color:#181C20; line-height:1.6; margin-bottom:.9rem; }
.sv-iq-widget{ margin:.4rem 0 .2rem; }

/* multichoice / multiselect */
.sv-opt{ display:flex; align-items:flex-start; gap:.6rem; padding:.55rem .7rem; border:1px solid #E7DFD2; border-radius:9px; margin-bottom:.5rem; cursor:pointer; transition:border-color .12s, background .12s; }
.sv-opt:hover{ border-color:#0E9E78; }
.sv-opt input{ margin-top:.2rem; }
.sv-opt .t{ font-size:.94rem; color:#181C20; }
.sv-opt code, .sv-opt .mono{ font-family:monospace; }

/* match / categorize */
.sv-match-row{ display:flex; align-items:center; gap:.7rem; padding:.4rem 0; flex-wrap:wrap; }
.sv-match-row .left{ flex:1 1 240px; min-width:0; font-size:.94rem; color:#181C20; padding:.45rem .6rem; background:#FBF7EF; border:1px solid #EFE8DC; border-radius:8px; }
.sv-match-row .arr{ color:#8A9098; font-family:monospace; }
.sv-match-row select{ flex:0 1 200px; padding:.4rem .6rem; border:1px solid #D8CDBB; border-radius:8px; font-size:.9rem; background:#fff; }

/* order */
.sv-order-row{ display:flex; align-items:center; gap:.6rem; padding:.5rem .7rem; border:1px solid #E7DFD2; border-radius:9px; margin-bottom:.45rem; background:#FBF7EF; }
.sv-order-row .t{ flex:1; font-size:.94rem; color:#181C20; }
.sv-ord-btns button{ border:1px solid #D8CDBB; background:#fff; color:#565D64; border-radius:6px; width:26px; height:24px; cursor:pointer; font-size:.7rem; line-height:1; }
.sv-ord-btns button:hover{ border-color:#0E9E78; color:#0B7D5F; }

/* assemble (Parsons) */
.sv-asm-label{ font-family:monospace; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:#8A9098; margin:.2rem 0 .4rem; }
.sv-asm-ans{ min-height:44px; padding:.5rem; border:1px dashed #C9BFA9; border-radius:9px; background:#FBF7EF; margin-bottom:.7rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.sv-asm-pool{ display:flex; flex-wrap:wrap; gap:.4rem; }
.sv-token{ font-family:monospace; font-size:.85rem; padding:.4rem .7rem; border:1px solid #D8CDBB; border-radius:8px; background:#fff; color:#181C20; cursor:pointer; }
.sv-token:hover{ border-color:#0E9E78; }
.sv-asm-ans .sv-token{ background:#E1F0EA; border-color:#C9E6DB; color:#0B7D5F; }

/* fill */
.sv-fill{ font-size:.96rem; color:#181C20; line-height:2; }
.sv-blank{ padding:.25rem .5rem; border:1px solid #D8CDBB; border-radius:7px; font-size:.9rem; background:#fff; margin:0 .15rem; }
.sv-blank-text{ width:9rem; }

/* typeout */
.sv-typeout{ width:100%; font-family:monospace; font-size:.9rem; border:1px solid #D8CDBB; border-radius:9px; padding:.6rem .7rem; background:#fff; color:#181C20; resize:vertical; }

/* hotspot */
.sv-hotspot{ display:flex; flex-wrap:wrap; gap:.4rem; }
.sv-hot{ font-family:monospace; font-size:.85rem; padding:.4rem .7rem; border:1px solid #D8CDBB; border-radius:8px; background:#fff; color:#181C20; cursor:pointer; }
.sv-hot:hover{ border-color:#0E9E78; }
.sv-hot.on{ background:#E1F0EA; border-color:#0E9E78; color:#0B7D5F; font-weight:600; }

/* truefalse */
.sv-tf-row{ display:flex; align-items:center; gap:.8rem; padding:.45rem 0; border-bottom:1px solid #EFE8DC; flex-wrap:wrap; }
.sv-tf-row:last-child{ border-bottom:none; }
.sv-tf-row .t{ flex:1 1 240px; font-size:.94rem; color:#181C20; }
.sv-tf-opts{ display:flex; gap:.9rem; }
.sv-tf-opts label{ font-size:.9rem; color:#565D64; cursor:pointer; display:inline-flex; align-items:center; gap:.3rem; }

/* submit + result */
.sv-iq-submit{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem; padding:.55rem 1.2rem; font-size:.92rem; font-weight:600; border-radius:10px; border:1px solid transparent; background:#0E9E78; color:#fff; box-shadow:0 4px 14px rgba(14,158,120,.28); text-decoration:none; cursor:pointer; }
.sv-iq-submit:hover{ background:#0B7D5F; color:#fff; text-decoration:none; }
.sv-iq-result{ margin-top:1rem; }
.sv-iq-ok{ padding:.7rem .9rem; background:#E1F0EA; border:1px solid #C9E6DB; border-radius:10px; color:#0B7D5F; font-weight:600; }
.sv-iq-no{ padding:.7rem .9rem; background:#F6E6E4; border:1px solid #E7C9C4; border-radius:10px; color:#C0544B; font-weight:600; }
.sv-iq-hint{ margin-top:.6rem; padding:.7rem .9rem; background:#F6ECD7; border:1px solid #E7D6A8; border-radius:10px; color:#7a5a18; font-size:.9rem; }

/* group — drag-and-drop grouping */
.sv-grp{ display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-start; }
.sv-grp-zones{ display:flex; flex-wrap:wrap; gap:1rem; flex:1 1 auto; }
.sv-grp-zone{ min-width:150px; min-height:90px; flex:1 1 150px; background:#fff; border:1.5px dashed #D8CDBB; border-radius:12px; padding:.55rem; transition:border-color .15s, background .15s; }
.sv-grp-pool{ background:#FCFAF5; border-style:solid; }
.sv-grp-zone.sv-grp-over{ border-color:#0E9E78; background:#EAF7F2; }
.sv-grp-title{ font-family:monospace; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:#8A9098; margin-bottom:.45rem; font-weight:600; }
.sv-grp-item{ background:#fff; border:1px solid #D8CDBB; border-radius:9px; padding:.45rem .7rem; margin:.35rem 0; font-size:.9rem; color:#181C20; cursor:grab; box-shadow:0 1px 2px rgba(0,0,0,.04); user-select:none; }
.sv-grp-pool .sv-grp-item{ background:#fff; }
.sv-grp-item:hover{ border-color:#0E9E78; }
.sv-grp-item:active{ cursor:grabbing; }