/* ===== INFINITY LEARNING UNIVERSAL DESIGN SYSTEM ===== */
/* This file contains ALL styles needed for lessons - no more inline <style> tags! */

/* ===== CSS CUSTOM PROPERTIES (THEMES) ===== */
:root{
  /* Base theme (MBP style) - Reduced green, more neutral */
  --bg:#ffffff;
  --paper:#ffffff;
  --ink:#0f172a;
  --muted:#5b6b86;
  --line:#e6e9f0;
  --accent:#374151;        /* neutral dark gray instead of green */
  --accent-ink:#111827;
  --code-bg:#f7fafc;
  --kbd:#111827;
  
  /* Status colors - Reduced green dominance */
  --ok:#059669;            /* darker, less bright green */
  --ok-dark:#047857;
  --bad:#b91c1c;
  --bad-dark:#991b1b;
  --warning:#f59e0b;
  --warning-dark:#d97706;
  
  /* Interactive elements */
  --input-bg:#ffffff;
  --input-border:#d8dee9;
  --input-focus:#3b82f6;
  
  /* Progress & feedback */
  --progress-bg:#eef2f7;
  --progress-fill:#059669; /* darker green */
  
  /* Shadows & depth */
  --shadow-sm:0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:0 4px 10px rgba(0,0,0,0.06);
  --shadow-lg:0 10px 25px rgba(0,0,0,0.1);
}

/* ===== AP PHYSICS THEME OVERRIDE ===== */
[data-subject="AP Physics"] {
  --accent:#ff6200;
  --accent-ink:#9a3412;
  --bg:#f5f7fa;
  --paper:#ffffff;
  --line:#e6e9f0;
  --axis:#4682b4;
  --grid:#b0c4de;
}

/* ===== MATH-BASED PHYSICS THEME OVERRIDE ===== */
[data-subject="Math-Based Physics"] {
  --accent:#374151;        /* neutral dark gray instead of green */
  --accent-ink:#111827;
  --bg:#ffffff;
  --paper:#ffffff;
  --line:#e6e9f0;
}

/* ===== BASE RESET & TYPOGRAPHY ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
}

/* ===== PAGE SHELL ===== */
.header{
  border-bottom:1px solid var(--line); background:var(--paper); box-shadow:var(--shadow-sm);
}
.wrap{max-width:1000px; margin:0 auto; padding:18px 20px}
.brand{font-weight:800; letter-spacing:.2px; color:var(--accent)}
.nav{color:var(--muted); font-size:14px}
.nav a{color:inherit; text-decoration:none; margin-right:14px; transition:color 0.2s}
.nav a:hover{color:var(--accent)}
main{max-width:1000px; margin:0 auto; padding:28px 20px}
h1{margin:.2em 0 .2em; font-size:clamp(26px,4vw,34px); color:var(--accent); font-weight:800}
h2{margin:1.3em 0 .4em; font-size:clamp(18px,3vw,22px); color:var(--accent); font-weight:700}
h3{margin:1.2em 0 .3em; font-size:18px; color:var(--accent); font-weight:600}
p{margin:.6em 0; line-height:1.7}
hr{border:0; border-top:1px solid var(--line); margin:24px 0}

/* ===== CARDS & CONTAINERS ===== */
.card, .practice-card{
  background:var(--paper); border:1px solid var(--line); border-radius:14px; 
  padding:16px; margin:16px 0; box-shadow:var(--shadow-md);
  transition:box-shadow 0.2s ease;
}
.card:hover, .practice-card:hover{
  box-shadow:var(--shadow-lg);
}
.practice-card{border-radius:12px; padding:14px; margin:10px 0}
.practice-card.locked{opacity:.6; position:relative}
.practice-card.locked::after{
  content:"Unlock by solving above";
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(255,255,255,.9); border-radius:12px; border:1px dashed #9ca3af;
  font-weight:600; color:#374151
}
.list{display:grid; gap:14px}
.meta{color:var(--muted); font-size:13px}

/* ===== LAYOUT & FLEXBOX ===== */
.row{display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap}
.row input{flex:1; min-width:220px}
.grow{flex:1 1 640px; min-width:420px}
.side{flex:0 0 280px; background:#fffacd; border-radius:12px; padding:14px; border:1px solid #ece3b2}
.box{background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px; margin-top:10px}

/* ===== BUTTONS ===== */
.btn, button{
  display:inline-block; padding:10px 16px; border-radius:12px; text-decoration:none;
  background:#111827; color:#fff; font-weight:700; border:none; cursor:pointer;
  font-size:14px; transition:all 0.2s; box-shadow:var(--shadow-sm);
}
.btn:hover, button:hover{background:#374151; transform:translateY(-1px); box-shadow:var(--shadow-md)}
.btn.secondary, button.secondary{background:#f3f4f6; color:#111827; border:1px solid #d1d5db}
.btn.secondary:hover, button.secondary:hover{background:#e5e7eb; border-color:#9ca3af}
.btn[disabled], button[disabled]{opacity:.5; cursor:not-allowed; background:#9ca3af}

/* ===== FORM ELEMENTS ===== */
input[type="text"], input[type="number"], input.short, select{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--input-border); 
  background:var(--input-bg); font-size:14px;
}
input[type="text"]:focus, input[type="number"]:focus, input.short:focus, select:focus{
  outline:none; border-color:var(--input-focus); box-shadow:0 0 0 3px rgba(59,130,246,0.1);
}
select, input.short{padding:6px 8px}

/* ===== PROGRESS & STATUS ===== */
.progress{height:8px; background:var(--progress-bg); border-radius:999px; overflow:hidden; margin:10px 0 16px}
.progress .fill{height:100%; background:var(--progress-fill); width:0%}
.statusRow{display:flex; gap:8px; flex-wrap:wrap}
.statusChip{border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:12px; background:#fff}
.chip-current{border-color:#bfdbfe; background:#eff6ff; color:#1e40af}
.chip-locked{opacity:.6}
.chip-correct{border-color:#10b981; background:#ecfdf5; color:#065f46}
.chip-wrong{border-color:#fecaca; background:#fff1f2; color:#7f1d1d}

/* ===== FEEDBACK & MESSAGES ===== */
.feedback{min-height:1.2em; margin-top:6px; font-size:14px; color:var(--muted)}
.ok{color:var(--ok); font-weight:700}
.bad{color:var(--bad); font-weight:700}
.complete{border:2px dashed #a7f3d0; background:#ecfdf5; color:#065f46; padding:12px; border-radius:12px; display:none}
.fail{border:2px dashed #fecaca; background:#fff1f2; color:#7f1d1d; padding:12px; border-radius:12px; display:none}

/* ===== INTERACTIVE ELEMENTS ===== */
.pill{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; background:#f3f4f6; font-size:12px}
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; background:#f7fafc; border:1px solid #e5e7eb; padding:2px 6px; border-radius:6px; color:var(--kbd)}
.hidden{display:none}

/* ===== SEGMENTED CONTROLS ===== */
.seg{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden}
.seg button{background:#fff; color:#111827; border-radius:0; border:none; padding:8px 12px}
.seg button.on{background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe}

/* ===== TOOLBARS & CONTROLS ===== */
.toolbar{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 0}
label.inline{display:inline-flex; align-items:center; gap:8px}

/* ===== SVG & CANVAS ===== */
svg{background:#e6f3ff; border:2px solid var(--axis, #4682b4); border-radius:10px; max-width:100%; height:auto}

/* ===== INTERACTIVE SVG LAYOUTS ===== */
/* Force side-by-side layout for SVG interactive lessons */
/* Target specific SVG sections by ID */
#viz .row,
#sandbox .row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 340px !important; /* SVG | side panel */
  gap: 16px;
  align-items: start;
  flex-wrap: nowrap !important; /* Prevent wrapping */
}

/* SVG-specific layout class for interactive lessons */
.svg-layout .row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 340px !important;
  gap: 16px;
  align-items: start;
  flex-wrap: nowrap !important;
}

#viz .grow,
#sandbox .grow,
.svg-layout .grow {
  min-width: 0; /* Prevent overflow so SVG can shrink */
}

#viz .side,
#sandbox .side,
.svg-layout .side {
  position: sticky;
  top: 12px; /* Keep panel visible while scrolling */
  background: #fffacd !important; /* Yellow shell */
  border: 1px solid #ece3b2 !important;
  border-radius: 12px;
  max-height: calc(100vh - 140px); /* Avoid running off-screen */
  overflow: auto; /* Scroll inner if long */
  flex: 0 0 340px !important; /* Fixed width */
}

/* Make inner boxes also yellow for consistency */
#viz .side .box,
#sandbox .side .box,
.svg-layout .side .box {
  background: #fffbe6 !important;
  border-color: #f2e6a2 !important;
}

/* Responsive: stack on smaller screens */
@media (max-width: 980px) {
  #viz .row,
  #sandbox .row,
  .svg-layout .row {
    grid-template-columns: 1fr !important;
  }
  
  #viz .side,
  #sandbox .side,
  .svg-layout .side {
    position: static;
    max-height: none;
    flex: 0 0 auto !important;
  }
}

/* ===== TABLES ===== */
table.examples{width:100%; border-collapse:collapse; margin:10px 0 6px}
.examples th,.examples td{border:1px solid #e6e9f0; padding:8px; text-align:left; vertical-align:top}
.examples th{background:#f9fafb}
.examples code{white-space:nowrap}

/* ===== TYPOGRAPHY ENHANCEMENTS ===== */
.bigEq{font-size:20px; line-height:1.8}
code.k{padding:.1em .3em; background:#f7fafc; border:1px solid #e5e7eb; border-radius:6px}
.note{font-size:13px; color:var(--muted)}
.muted{color:var(--muted)}

/* ===== LESSON NAVIGATION ===== */
.lesson-nav{display:flex; gap:10px; align-items:center; margin:20px 0}
a.btn{display:inline-block; padding:10px 16px; border-radius:12px; border:1px solid #e5e7eb; text-decoration:none}
a.btn.secondary{background:#fff; color:#111827}
a.btn.locked-next, a.btn[aria-disabled="true"]{pointer-events:none; opacity:.5; cursor:not-allowed}

/* ===== REQUIREMENTS & PROGRESS ===== */
.reqs{font-size:.9rem; color:var(--muted); margin-top:6px}
.reqs .done{color:var(--ok); font-weight:700}

/* ===== CALLOUTS & CODE ===== */
.callout{
  border-left:4px solid var(--accent); background:#f6fff8; padding:10px 12px; border-radius:8px;
}
code{background:var(--code-bg); padding:2px 6px; border-radius:6px}

/* ===== UTILITY CLASSES ===== */
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
.mt-0{margin-top:0}
.mt-1{margin-top:0.25rem}
.mt-2{margin-top:0.5rem}
.mt-4{margin-top:1rem}
.mb-0{margin-bottom:0}
.mb-1{margin-bottom:0.25rem}
.mb-2{margin-bottom:0.5rem}
.mb-4{margin-bottom:1rem}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .wrap, main{padding:16px 12px}
  .row{flex-direction:column; gap:12px}
  .grow{min-width:auto}
  .side{flex:0 0 auto}
  h1{font-size:24px}
  h2{font-size:20px}
  .card, .practice-card{padding:12px}
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important}
}

/* ===== PRINT STYLES ===== */
@media print {
  .header, .progress, .toolbar, button{display:none}
  .card{border:none; box-shadow:none}
  body{background:white; color:black}
}