/* ============================================================
   learn-article-unique.css
   Article-specific components that appear in only ONE article.
   Load AFTER the two base files where needed.

   USAGE GUIDE — add only the section(s) your article needs:
   Copy the relevant block into a dedicated per-article CSS file,
   or load this whole file and accept the minor unused overhead.

   Sections:
   [1] BMI article                   — bmi-table, formula-box (gray)
   [2] Percentage article            — method-card, example-box (step variant)
   [3] Molarity article              — compare-grid, step-box
   [4] Ohm's Law article             — ohm-triangle, unit-card
   [5] Electric Consumption article  — appliance-grid, energy-bar
   [6] Savings Goal article          — goal-progress, milestone
   ============================================================ */


/* ── [1] BMI ARTICLE ───────────────────────────────────────── */

/* BMI-specific hero radial glow */
.bmi-hero-glow::after {
  content: ''; position: absolute;
  top: -80px; right: -60px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(220,38,38,.2), transparent 70%);
  pointer-events: none;
}

/* BMI classification table — different from standard .data-table */
.bmi-table {
  width: 100%; border-collapse: collapse;
  margin: 24px 0; font-size: .875rem;
}
.bmi-table th {
  background: var(--ink); color: #fff; padding: 10px 14px; text-align: left;
}
.bmi-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.bmi-underweight td:first-child { border-left: 4px solid #3B82F6; }
.bmi-normal      td:first-child { border-left: 4px solid #22C55E; }
.bmi-overweight  td:first-child { border-left: 4px solid #F59E0B; }
.bmi-obese       td:first-child { border-left: 4px solid #EF4444; }

/* BMI formula box — grey bg monospace style (different from dark formula-box) */
.formula-box-gray {
  background: #F8F9FA; border: 1.5px solid var(--border);
  border-radius: 8px; padding: 20px 24px;
  font-family: monospace; font-size: .95rem;
  margin: 24px 0; text-align: center;
}

/* BMI simple callout — left-border only (no border-radius, older style) */
.callout-simple {
  border-left: 3px solid #DC2626; border-radius: 0 8px 8px 0;
  background: #FEF2F2; padding: 18px 22px;
  margin: 28px 0; font-size: .93rem; color: #7F1D1D;
}
.callout-simple-green {
  border-left: 3px solid #16A34A; border-radius: 0 8px 8px 0;
  background: #F0FDF4; padding: 18px 22px;
  margin: 28px 0; font-size: .93rem; color: #14532D;
}


/* ── [2] PERCENTAGE ARTICLE ────────────────────────────────── */

/* Method card — numbered steps (similar to step-card but different header style) */
.method-card {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: 16px; padding: 28px;
  margin: 2rem 0; position: relative;
}
.method-number {
  position: absolute; top: -16px; left: 24px;
  background: var(--ink); color: var(--accent);
  font-size: .7rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 14px; border-radius: 999px;
}
.method-card h3 { font-size: 1.2rem; font-weight: 800; color: var(--ink); margin: 0 0 12px; }
.method-card .rule { font-size: .8rem; color: var(--muted); margin-bottom: 16px; }

/* Example box — percentage article version with numbered steps */
/* (Different from finance .example-box — has .ex-step and .ex-num) */
.example-box-steps {
  background: #f9fafb; border-radius: 10px;
  padding: 16px 20px; margin: 12px 0; font-size: .9rem;
}
.example-box-steps .ex-label {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.ex-step {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 6px; font-size: .875rem;
}
.ex-num {
  background: var(--ink); color: #fff;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700; flex-shrink: 0; margin-top: 2px;
}
.ex-answer-sm {
  background: #d1fae5; border-radius: 6px;
  padding: 8px 14px; font-weight: 700;
  color: #065f46; margin-top: 8px; font-size: .9rem;
}


/* ── [3] MOLARITY ARTICLE ──────────────────────────────────── */

/* Side-by-side comparison cards */
.compare-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin: 2rem 0;
}
@media (max-width: 576px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-card { border-radius: 12px; padding: 24px; height: 100%; }
.compare-card.molarity { background: #eff6ff; border: 2px solid #3b82f6; }
.compare-card.molality { background: #f0fdf4; border: 2px solid #22c55e; }
.compare-card .cc-label {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px;
}
.molarity .cc-label { color: #2563eb; }
.molality .cc-label { color: #15803d; }
.compare-card .cc-formula { font-size: 1.3rem; font-weight: 800; margin-bottom: 8px; }
.molarity .cc-formula { color: #1d4ed8; }
.molality .cc-formula { color: #15803d; }
.compare-card p { font-size: .85rem; color: #374151; margin-bottom: 0; line-height: 1.6; }

/* Step boxes (molarity worked examples — different from .step-card) */
.step-box {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 20px 24px; margin: 12px 0;
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-size: .8rem; font-weight: 700; margin-right: 10px; flex-shrink: 0;
}
.step-title { font-size: .875rem; font-weight: 700; color: var(--ink); }
.step-content { font-size: .875rem; color: #374151; margin-top: 8px; }
.step-answer {
  background: #d1fae5; border-radius: 6px; padding: 8px 14px;
  font-weight: 700; color: #065f46; margin-top: 10px;
  font-size: .875rem; display: inline-block;
}


/* ── [4] OHM'S LAW ARTICLE ─────────────────────────────────── */

/* Ohm's law formula triangle display */
.ohm-triangle {
  background: var(--ink); color: #fff;
  border-radius: 16px; padding: 32px;
  text-align: center; margin: 2rem 0;
}
.ohm-formula {
  font-size: 2rem; font-weight: 800;
  letter-spacing: .05em; color: var(--accent); margin-bottom: 8px;
}
.ohm-variants {
  display: flex; justify-content: center;
  gap: 24px; flex-wrap: wrap; margin-top: 16px;
}
.ohm-var {
  background: rgba(255,255,255,.1);
  border-radius: 10px; padding: 12px 20px;
  font-size: .95rem; font-weight: 700;
}
.ohm-var span {
  color: rgba(255,255,255,.5); font-weight: 400;
  font-size: .8rem; display: block; margin-top: 4px;
}

/* V / I / R unit explanation cards */
.unit-card {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 20px; height: 100%;
}
.unit-symbol { font-size: 2.5rem; font-weight: 800; line-height: 1; margin-bottom: 8px; }
.unit-name   { font-size: .75rem; color: var(--muted); margin-bottom: 8px; }
.unit-desc   { font-size: .85rem; line-height: 1.6; }


/* ── [5] ELECTRIC CONSUMPTION ARTICLE ─────────────────────── */

/* Appliance wattage card grid */
.appliance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px; margin: 1.5rem 0;
}
.appliance-card {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 14px; text-align: center;
}
.appliance-card .app-icon  { font-size: 1.75rem; margin-bottom: 6px; }
.appliance-card .app-name  { font-size: .8rem; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.appliance-card .app-watts { font-size: .75rem; color: var(--muted); }
.appliance-card .app-cost  {
  font-size: .8rem; font-weight: 700;
  margin-top: 6px; padding: 3px 8px;
  border-radius: 999px; display: inline-block;
}
.cost-low  { background: #d1fae5; color: #065f46; }
.cost-mid  { background: #fef3c7; color: #92400e; }
.cost-high { background: #fee2e2; color: #b91c1c; }

/* Horizontal energy consumption bars */
.energy-bar-wrap { margin: 1rem 0; }
.energy-bar-label {
  display: flex; justify-content: space-between;
  font-size: .8rem; color: var(--muted); margin-bottom: 4px;
}
.energy-bar {
  height: 12px; background: #e5e7eb;
  border-radius: 999px; overflow: hidden;
}
.energy-fill { height: 100%; border-radius: 999px; }


/* ── [6] SAVINGS GOAL ARTICLE ──────────────────────────────── */

/* Savings progress bar card */
.goal-progress {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 20px; margin: 1.5rem 0;
}
.goal-progress .goal-label {
  font-size: .8rem; font-weight: 600; color: var(--muted);
  margin-bottom: 8px; display: flex; justify-content: space-between;
}
.goal-bar {
  height: 16px; background: #e5e7eb;
  border-radius: 999px; overflow: hidden; margin-bottom: 6px;
}
.goal-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #16a34a);
}
.goal-amount {
  font-size: .8rem; color: var(--muted);
  display: flex; justify-content: space-between;
}

/* Milestone tracker */
.milestone {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.milestone:last-child { border-bottom: none; padding-bottom: 0; }
.milestone-icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.milestone-done   { background: #d1fae5; }
.milestone-next   { background: #fef3c7; }
.milestone-future { background: #f3f4f6; }
.milestone-title  { font-weight: 700; font-size: .9rem; margin-bottom: 2px; }
.milestone-desc   { font-size: .8rem; color: var(--muted); }