/* ========================================================================== * econ.css — shared styles for EconomicsInteractives.com interactives * Load with in the . * All colours come from CSS variables so a re-theme happens in ONE place. * These variables mirror Econ.COLORS in econ-engine.js — keep them in sync. * ========================================================================== */ :root { --bg1: #0f172a; --bg2: #1e293b; --panel: #1e293b; --panel-2: #0f172a; --border: #334155; --text: #e2e8f0; --muted: #94a3b8; --dim: #64748b; --demand: #38bdf8; /* AD */ --supply: #f97316; /* SRAS */ --lras: #e2e8f0; --eqm: #a78bfa; --correct: #22c55e; --wrong: #ef4444; --accent: #fbbf24; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: linear-gradient(135deg, var(--bg1), var(--bg2)); color: var(--text); min-height: 100vh; padding: 12px; } .ctr { max-width: 1100px; margin: 0 auto; } /* ---- headings ---- */ h1 { font-size: 1.6rem; font-weight: 700; text-align: center; margin-bottom: 2px; background: linear-gradient(90deg, var(--demand), #818cf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .subtitle { color: var(--muted); font-size: .95rem; text-align: center; margin-bottom: 12px; } /* ---- two-column layout: controls left, graph right ---- */ .main { display: flex; gap: 16px; align-items: flex-start; } .left { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; } .right { flex: 1; min-width: 0; } @media (max-width: 800px) { .main { flex-direction: column; } .left { width: 100%; } } /* ---- graph frame ---- */ .graph-wrap { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 10px; box-shadow: 0 8px 32px rgba(0, 0, 0, .4); } /* height:auto is REQUIRED, not cosmetic. An with no author height defaults * to height:100% of a parent whose height is itself indeterminate (we're inside a * fixed-height iframe). Browsers then disagree: some infer the ratio from the * viewBox at first paint, others fall back to a wrong box, scale the drawing down * uniformly to fit it, and only snap to the correct size once something mutates * the DOM — which looked like "the diagram jumps bigger on the first drag". * Econ.Chart also sets aspect-ratio from the viewBox; this is the static net for * any page not yet on the engine. */ .graph-wrap svg { display: block; touch-action: none; user-select: none; width: 100%; height: auto; } .legend { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; font-size: .85rem; color: var(--muted); margin-top: 8px; } /* ---- scenario / challenge buttons (explorable shell) ---- */ .scenarios { display: flex; flex-direction: column; gap: 4px; } .scn-btn { padding: 9px 10px; border-radius: 6px; border: 2px solid var(--border); background: var(--panel); color: var(--muted); font-weight: 500; font-size: .88rem; cursor: pointer; transition: all .15s; text-align: left; } .scn-btn:hover { border-color: var(--dim); } .scn-btn.active { border-color: var(--demand); background: #1e3a5f; color: var(--demand); font-weight: 700; } .scn-btn.freeplay.active { border-color: var(--eqm); background: #2e1065; color: var(--eqm); } /* ---- description + readouts ---- */ .desc-box { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: .95rem; line-height: 1.5; } .info-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .info-card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 8px; text-align: center; } .info-label { font-size: .72rem; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; } .info-value { font-size: 1.5rem; font-weight: 700; } /* ---- status bar (live feedback) ---- */ .status-bar { padding: 10px 16px; border-radius: 10px; font-size: .95rem; font-weight: 600; text-align: center; } .status-eq { background: #065f46; border: 1px solid #10b981; color: #6ee7b7; } .status-shortage { background: #7f1d1d; border: 1px solid var(--wrong); color: #fca5a5; } .status-surplus, .status-wrong { background: #78350f; border: 1px solid #f59e0b; color: #fde68a; } /* ---- MCQ option buttons (quiz shell — here so both shells share tokens) ---- */ .opts { display: grid; gap: 6px; } .opts.c2 { grid-template-columns: 1fr 1fr; } .opts.c3 { grid-template-columns: 1fr 1fr 1fr; } .obtn { padding: 9px 10px; border-radius: 8px; border: 2px solid var(--border); background: var(--panel-2); color: var(--text); font-weight: 600; font-size: .8rem; cursor: pointer; text-align: left; transition: all .12s; } .obtn:hover { border-color: var(--dim); } .obtn small { display: block; font-weight: 500; font-size: .66rem; color: var(--muted); margin-top: 1px; } .obtn.correct { border-color: var(--correct); background: #052e1a; } .obtn.wrong { border-color: var(--wrong); background: #3b0d0d; } .obtn:disabled { cursor: default; } /* ---- generic buttons ---- */ .btn { padding: 8px 15px; border-radius: 8px; border: none; font-weight: 600; font-size: .85rem; cursor: pointer; } .btn-next { background: linear-gradient(135deg, var(--correct), #16a34a); color: #fff; } .btn-back { background: var(--border); color: #cbd5e1; } .btn-ghost { background: var(--panel); border: 1px solid #475569; color: #cbd5e1; }