/* ═══════════════════════════════════════════
   Content Pages — Shared Styles for Subtopic Pages
   ═══════════════════════════════════════════ */

.container{max-width:1200px;margin:0 auto;padding:24px;padding-top:0}

/* ── Page Title ── */
.page-title{font-family:var(--font-heading);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;color:var(--text-primary);margin-bottom:8px}
.page-subtitle{color:var(--text-muted);font-size:1.05rem;margin-bottom:32px}

/* ── Section Cards ── */
.section-card{background:#fff;border-radius:var(--radius-card);padding:32px;box-shadow:var(--shadow-card);margin-bottom:24px;transition:all var(--dur-med) var(--ease-smooth)}
.section-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
.section-card h2{font-size:1.4rem;margin-bottom:16px}
.section-card h2 .emoji{margin-right:8px}
.section-card h3{font-size:1.1rem;margin-bottom:10px}

/* ── Learning Outcomes ── */
.outcomes{background:rgba(124,58,237,0.04);border-left:4px solid var(--accent);border-radius:16px;padding:16px 20px;margin-bottom:20px}
.outcomes h4{font-family:var(--font-heading);font-size:14px;color:var(--accent);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.05em}
.outcomes ul{list-style:none;padding:0}
.outcomes li{font-size:14px;color:var(--text-muted);padding:4px 0;padding-left:20px;position:relative}
.outcomes li::before{content:"\2713";position:absolute;left:0;color:var(--accent-emerald);font-weight:700}

/* ── Formula Box ── */
.formula-box{background:linear-gradient(135deg,rgba(124,58,237,0.05),rgba(219,39,119,0.04));border-radius:20px;padding:20px 24px;margin-bottom:16px;text-align:center}
.formula-box p{font-size:1.3rem;font-weight:700;color:var(--text-primary);font-family:var(--font-heading)}
.formula-box .sub{font-size:0.85rem;color:var(--text-muted);font-weight:400;margin-top:4px}

/* ── Simulation Box ── */
.sim-box{background:linear-gradient(135deg,rgba(15,185,129,0.04),rgba(14,165,233,0.03));border-radius:24px;padding:24px;margin-bottom:20px;border:1px solid rgba(160,150,180,0.1)}
.sim-box h3{font-size:1.05rem;margin-bottom:14px}
.sim-box canvas{display:block;width:100%;max-width:700px;margin:0 auto;border-radius:16px;background:#f8f7fc}
.sim-box .controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;justify-content:center}

/* ── Controls ── */
.ctrl-group{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.7);border-radius:16px;padding:8px 14px;border:1px solid rgba(160,150,180,0.1)}
.ctrl-group label{font-size:13px;font-weight:600;color:var(--text-muted);white-space:nowrap}
.ctrl-group input[type=range]{accent-color:var(--accent);width:100px}
.display-val{font-family:var(--font-heading);font-size:14px;font-weight:700;color:var(--accent);padding:6px 14px;background:rgba(124,58,237,0.06);border-radius:12px}

/* ── Buttons inside content ── */
.sim-box button,.section-card button{padding:10px 20px;border:none;border-radius:var(--radius-btn);font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;transition:all var(--dur-fast);box-shadow:var(--shadow-btn)}
.sim-box button:hover,.section-card button:hover{transform:translateY(-1px);box-shadow:var(--shadow-btn-hover)}
.sim-box button:active,.section-card button:active{transform:scale(0.95)}
.btn-green{background:linear-gradient(135deg,#34D399,var(--accent-emerald));color:#fff}
.btn-orange{background:linear-gradient(135deg,#FBBF24,var(--accent-amber));color:#fff}
.btn-red{background:linear-gradient(135deg,#FB7185,var(--accent-rose));color:#fff}
.btn-sm{font-size:12px;padding:6px 14px;min-height:auto}

/* ── Example/Tip Boxes ── */
.example{background:rgba(14,165,233,0.04);border-left:4px solid var(--accent-blue);border-radius:16px;padding:14px 18px;margin:14px 0;font-size:14px;color:var(--text-muted)}
.tip{background:rgba(245,158,11,0.04);border-left:4px solid var(--accent-amber);border-radius:16px;padding:14px 18px;margin:14px 0;font-size:14px;color:var(--text-muted)}

/* ── Data Table ── */
.data-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:16px;overflow:hidden;margin:16px 0;font-size:14px}
.data-table th{background:rgba(124,58,237,0.06);color:var(--accent);font-weight:700;padding:10px 16px;text-align:left;font-family:var(--font-heading)}
.data-table td{padding:8px 16px;border-bottom:1px solid rgba(160,150,180,0.1);color:var(--text-muted)}
.data-table tr:last-child td{border-bottom:none}

/* ── Quiz ── */
.quiz-area{margin:20px 0}
.quiz-q{background:rgba(255,255,255,0.6);border-radius:20px;padding:20px;margin-bottom:16px;border:1px solid rgba(160,150,180,0.1)}
.quiz-q h4{font-family:var(--font-heading);font-size:15px;margin-bottom:12px;color:var(--text-primary)}
.quiz-q label{display:block;padding:8px 14px;margin:4px 0;border-radius:12px;font-size:14px;color:var(--text-muted);cursor:pointer;transition:background var(--dur-fast)}
.quiz-q label:hover{background:rgba(124,58,237,0.04)}
.quiz-q input[type=radio]{margin-right:10px;accent-color:var(--accent)}
.result-box{background:rgba(16,185,129,0.06);border:1px solid rgba(16,185,129,0.2);border-radius:20px;padding:16px 20px;margin-top:16px;text-align:center;font-weight:700;color:var(--accent-emerald)}

/* ── Responsive ── */
@media(max-width:768px){
  .container{padding:16px;padding-top:0}
  .section-card{padding:20px}
  .sim-box{padding:16px}
  .ctrl-group{flex-wrap:wrap}
  .ctrl-group input[type=range]{width:80px}
  .data-table{font-size:13px}
}