/* styles.css - layout and components for the FULCRUM stocks-and-flows lab.
   Geometry is 0/90 degrees only; radii are tight; no pill shapes; no black canvas.
   Fonts load from the IBM Plex CDN in the HTML head with the system fallbacks above. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: var(--u3) var(--u3) var(--u4); }

/* ---- Masthead ---------------------------------------------------------- */
.masthead { border-bottom: 1.5px solid var(--divider); padding-bottom: var(--u2); margin-bottom: var(--u3); }
.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--amber);
  margin: 0 0 var(--u) 0;
}
.masthead h1 { font-size: 28px; font-weight: 600; margin: 0 0 var(--u) 0; line-height: 1.2; }
.masthead p { color: var(--text-muted); margin: 0; max-width: 70ch; }
.masthead { position: relative; }
.langsel { position: absolute; top: 0; right: 0; font-family: var(--font-mono); font-size: 13px;
  padding: 6px var(--u); border: 1.5px solid var(--divider); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); cursor: pointer; }
[dir="rtl"] .langsel { right: auto; left: 0; }
[dir="rtl"] .masthead p, [dir="rtl"] .card, [dir="rtl"] .gate-text { text-align: right; }

/* ---- Tabs (lazy per-tab render) --------------------------------------- */
.tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u);
  margin-bottom: var(--u3);
  border-bottom: 1.5px solid var(--divider);
}
.tab {
  appearance: none;
  border: 1.5px solid var(--divider);
  border-bottom: none;
  background: var(--surface-sunk);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: var(--u) var(--u2);
  border-radius: var(--r-md) var(--r-md) 0 0;
  cursor: pointer;
  transform: translateY(1.5px);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--text);
  border-color: var(--steel);
  border-bottom: 1.5px solid var(--surface);
  font-weight: 500;
}
.tab .rung { color: var(--amber); margin-right: 6px; }

.panel { display: none; }
.panel.active { display: block; }

/* ---- Cards and lessons ------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1.5px solid var(--divider);
  border-radius: var(--r-lg);
  padding: var(--u3);
  margin-bottom: var(--u3);
}
.card h2 { font-size: 22px; font-weight: 600; margin: 0 0 var(--u) 0; }
.card h3 { font-size: 16px; font-weight: 600; margin: var(--u3) 0 var(--u) 0; }
.lead { color: var(--text-muted); margin-top: 0; }

.chips { display: flex; flex-wrap: wrap; gap: var(--u); margin: var(--u2) 0; }
.chip {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px var(--u);
  border-radius: var(--r-sm);
  border: 1.5px solid var(--divider);
}
.chip-explain { background: #F2EFE2; color: var(--steel); border-color: var(--steel); }
.chip-structure { background: #F6EEE0; color: var(--amber); border-color: var(--amber); }

.eqbar { display: flex; gap: var(--u); margin: var(--u) 0 calc(-1 * var(--u)) 0; }
.readbtn { font-size: 12.5px; padding: 6px 11px; border-radius: var(--r-md); border: 1px solid var(--divider);
  background: transparent; color: var(--steel); cursor: pointer; font-family: var(--font-body);
  display: inline-flex; align-items: center; gap: 6px; }
.readbtn:hover { background: var(--surface-sunk); }
.readbtn.speaking { background: var(--steel); color: var(--surface); border-color: var(--steel); }
.spk { width: 13px; height: 13px; display: inline-block; }

.eqblock {
  background: var(--surface-sunk);
  border-left: 3px solid var(--steel);
  border-radius: var(--r-sm);
  padding: var(--u2);
  margin: var(--u2) 0;
  overflow-x: auto;
}

.mermaid { background: transparent; margin: var(--u2) 0; }

/* ---- Simulate widget --------------------------------------------------- */
.sim { display: grid; grid-template-columns: 280px 1fr; gap: var(--u3); margin-top: var(--u2); }
@media (max-width: 820px) { .sim { grid-template-columns: 1fr; } }

.controls {
  background: var(--surface-sunk);
  border: 1.5px solid var(--divider);
  border-radius: var(--r-md);
  padding: var(--u2);
  align-self: start;
}
.controls h4 { margin: 0 0 var(--u2) 0; font-size: 13px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.control { margin-bottom: var(--u2); }
.control label { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.control label .val { font-family: var(--font-mono); color: var(--steel); }
.control input[type="range"] { width: 100%; accent-color: var(--amber); }

.method-row { display: flex; gap: var(--u2); align-items: center; margin: var(--u2) 0; font-size: 13px; }
.method-row label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); }

.btnrow { display: flex; flex-wrap: wrap; gap: var(--u); margin-top: var(--u2); }
.btn {
  appearance: none;
  font-family: var(--font-body);
  font-size: 13px;
  padding: 6px var(--u2);
  border-radius: var(--r-md);
  border: 1.5px solid var(--steel);
  background: transparent;
  color: var(--steel);
  cursor: pointer;
}
.btn:hover { background: var(--steel); color: var(--surface); }
.btn-primary { background: var(--amber); border-color: var(--amber); color: var(--surface); }
.btn-primary:hover { background: var(--cta-deep); border-color: var(--cta-deep); color: var(--surface); }

.charts { display: grid; gap: var(--u2); }
.chartbox { width: 100%; height: 320px; }
.phasebox { width: 100%; height: 320px; }
.charttitle { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin: 0 0 4px 2px; }

.guard {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: var(--u) var(--u2);
  border-radius: var(--r-sm);
  margin-top: var(--u);
  border: 1.5px solid var(--divider);
}
.guard.ok { color: var(--ok); border-color: var(--ok); background: #EEF4EE; }
.guard.warn { color: var(--danger); border-color: var(--danger); background: #F6EAE6; }

.expected { font-size: 14px; color: var(--text-muted); border-top: 1px dashed var(--divider); padding-top: var(--u2); margin-top: var(--u2); }

/* ---- Practice (edX-style grader) -------------------------------------- */
.practice { margin-top: var(--u3); }
.q { border: 1.5px solid var(--divider); border-radius: var(--r-md); padding: var(--u2); margin-bottom: var(--u2); }
.q p { margin: 0 0 var(--u) 0; }
.q .ans { display: flex; gap: var(--u); align-items: center; flex-wrap: wrap; }
.q input[type="number"] {
  font-family: var(--font-mono);
  padding: 6px var(--u);
  border: 1.5px solid var(--divider);
  border-radius: var(--r-sm);
  width: 140px;
  background: var(--surface);
  color: var(--text);
}
.q .unit { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.q .opt.sel { background: var(--steel); color: var(--surface); border-color: var(--steel); }
.verdict { font-family: var(--font-mono); font-size: 13px; margin-left: var(--u); }
.verdict.full { color: var(--ok); }
.verdict.partial { color: var(--amber); }
.verdict.zero { color: var(--danger); }
.solution { font-size: 13px; color: var(--text-muted); margin-top: var(--u); display: none; }
.solution.show { display: block; }

/* ---- Readiness gate ---------------------------------------------------- */
.gate { display: flex; flex-direction: column; gap: var(--u); margin: var(--u2) 0; }
.gate-item { display: flex; gap: var(--u2); align-items: flex-start; padding: var(--u2);
  border: 1.5px solid var(--divider); border-radius: var(--r-md); background: var(--surface); cursor: pointer; }
.gate-item:hover { border-color: var(--steel); }
.gate-item input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--ok); flex: 0 0 auto; }
.gate-text { font-size: 14px; line-height: 1.5; }
.gate-n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: var(--r-sm); background: var(--surface-sunk); color: var(--steel); font-family: var(--font-mono);
  font-size: 12px; margin-right: var(--u); vertical-align: 1px; }
.gate-rung { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.gate-row { justify-content: space-between; align-items: center; }
.gate-row.passed { border-color: var(--ok); }
.gate-score { font-family: var(--font-mono); font-size: 13px; white-space: nowrap; color: var(--text-muted); }
.gate-score.pass { color: var(--ok); font-weight: 600; }
.gate-score.partial { color: var(--amber); }
.gate-score.none { color: var(--text-muted); }
.gate-verdict { margin-top: var(--u2); padding: var(--u2); border-radius: var(--r-md); font-family: var(--font-mono);
  font-size: 14px; border: 1.5px solid var(--divider); color: var(--text-muted); }
.gate-verdict.ready { border-color: var(--ok); background: #EEF4EE; color: var(--ok); }

/* ---- Links and footer -------------------------------------------------- */
a { color: var(--steel); text-decoration: none; border-bottom: 1px solid var(--divider); }
a:hover { color: var(--amber); border-color: var(--amber); }
.refs { font-size: 13px; color: var(--text-muted); }
.refs li { margin-bottom: 6px; }
footer { margin-top: var(--u4); padding-top: var(--u2); border-top: 1.5px solid var(--divider); color: var(--text-muted); font-size: 13px; }
code, .mono { font-family: var(--font-mono); }

/* ---- Hub (index) ------------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--u3); }
.tile { display: block; background: var(--surface); border: 1.5px solid var(--divider); border-radius: var(--r-lg); padding: var(--u3); }
.tile:hover { border-color: var(--steel); }
.tile h3 { margin: 0 0 var(--u) 0; }
.tile p { margin: 0; color: var(--text-muted); font-size: 14px; }
.tile .rung { font-family: var(--font-mono); color: var(--amber); font-size: 12px; }