/* Sim Lab — educational structure styles (loaded by all sims/ pages in addition to styles.css) */

/* shared nav slot (rendered by SIM.nav) */
#navSlot{background:#111827;margin-bottom:20px;display:flex;align-items:center;gap:6px;padding:10px 20px;flex-wrap:wrap}
#navSlot a{color:#e5e7eb;text-decoration:none;font-weight:bold;font-size:14px;padding:8px 14px;border-radius:8px}
#navSlot a:hover{background:#374151}
#navSlot select{max-width:240px}

/* A. header */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.chip{background:#e5e7eb;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:bold;color:#374151}
.chip-domain{background:#dbeafe;color:#1d4ed8}
.chip-beginner{background:#dcfce7;color:#15803d}
.chip-intermediate{background:#fef3c7;color:#a16207}
.chip-advanced{background:#fee2e2;color:#b91c1c}
.card-lite{background:white;border-radius:12px;padding:14px 16px;box-shadow:0 2px 8px #0001;margin-top:12px}
.objectives ul{margin:8px 0 0 20px;padding:0}
.objectives li{margin:4px 0;font-size:14px;color:#374151}

/* sections */
section.block{background:white;border-radius:12px;padding:18px 20px;box-shadow:0 2px 8px #0001;margin-top:14px}
section.block>h2{margin:0 0 10px;font-size:20px}
section.block h3{margin:16px 0 6px;font-size:16px}
section.block p,section.block li{font-size:14px;line-height:1.55;color:#374151}
section.block ul,section.block ol{margin:6px 0 6px 22px;padding:0}
.eq{background:#f9fafb;border-left:4px solid #2563eb;padding:10px 14px;border-radius:8px;font-family:Georgia,serif;font-size:17px;margin:10px 0;overflow-x:auto}
.eq .vars{font-family:Arial;font-size:13px;color:#4b5563;margin-top:6px}
.worked{background:#eff6ff;border-radius:8px;padding:10px 14px;font-size:14px;margin:8px 0}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;margin-top:8px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:14px;height:14px;border-radius:4px;display:inline-block}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:800px){.two-col{grid-template-columns:1fr}}

/* F. graphs */
.chartbox{margin-top:10px}
.chartbox .small{margin-top:4px}

/* G. experiments */
.exp{border:1px solid #e5e7eb;border-radius:10px;padding:12px 14px;margin-top:10px}
.exp h3{margin:0 0 6px}
.exp .lvl{font-size:11px;font-weight:bold;padding:2px 8px;border-radius:999px;margin-right:6px}
.lvl-basic{background:#dcfce7;color:#15803d}
.lvl-intermediate{background:#fef3c7;color:#a16207}
.lvl-challenge{background:#fee2e2;color:#b91c1c}
.exp ol{margin:6px 0 0 22px}
.exp .predict{margin-top:8px;background:#fef9c3;border-radius:8px;padding:8px 12px;font-size:13px}

/* H. challenges */
.challenge{border:1px solid #fde68a;background:#fffbeb;border-radius:10px;padding:12px 14px;margin-top:10px}
.challenge h3{margin:0 0 6px}
.challenge ul{list-style:none;margin:8px 0 0;padding:0}
.challenge li{margin:4px 0;font-size:14px;cursor:pointer}
.challenge li::before{content:"☐ ";font-size:16px}
.challenge li.done{color:#15803d}
.challenge li.done::before{content:"☑ "}
.challenge .hintbtn{margin-top:8px}
.challenge .hint{display:none;background:#fef3c7;border-radius:8px;padding:8px 12px;font-size:13px;margin-top:8px}
.challenge .hint.show{display:block}

/* I. quiz */
.quiz-q{border:1px solid #e5e7eb;border-radius:10px;padding:12px 14px;margin-top:10px}
.quiz-q p.q{font-weight:bold;margin:0 0 8px}
.quiz-q button.opt{display:block;width:100%;text-align:left;margin-top:6px;background:#f9fafb;border:1px solid #d1d5db;font-weight:normal}
.quiz-q button.opt:hover{background:#e5e7eb}
.quiz-q button.opt.correct{background:#dcfce7;border-color:#15803d;color:#14532d;font-weight:bold}
.quiz-q button.opt.wrong{background:#fee2e2;border-color:#dc2626}
.quiz-q .fb{margin-top:8px;font-size:13px;padding:8px 12px;border-radius:8px;display:none}
.quiz-q .fb.good{display:block;background:#dcfce7;color:#14532d}
.quiz-q .fb.bad{display:block;background:#fee2e2;color:#7f1d1d}
.quiz-q .tries{font-size:12px;color:#6b7280;margin-top:6px}
.quiz-score{font-weight:bold;margin-top:12px;font-size:15px}

/* K. summary */
.summary{background:#f0fdf4;border:1px solid #bbf7d0}
.takeaway{font-weight:bold;color:#14532d}

/* real-world applications */
.apps{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.app{background:#f9fafb;border-radius:8px;padding:10px 12px;font-size:13px}
.app b{display:block;margin-bottom:2px}
@media(max-width:800px){.apps{grid-template-columns:1fr}}

/* collapsible maths — interactive-first: equations hidden until the learner asks */
section.collapsible > h2{cursor:pointer;user-select:none}
section.collapsible > h2::after{content:" ▸ show";font-size:12px;color:#2563eb;margin-left:10px;white-space:nowrap;font-weight:bold}
section.collapsible.open > h2::after{content:" ▾ hide";color:#6b7280}
section.collapsible:not(.open) > *:not(h2):not(.coll-cta){display:none}
section.collapsible.open .coll-cta{display:none}
.coll-cta{font-size:12px;color:#6b7280;margin-top:2px}