MediaWiki:Gadget-wix-interactive.css

/* ================================================================
   WIX-INTERACTIVE.CSS — Wiki Interactive Experience: Complex Widgets
   ================================================================
   Loaded via ResourceLoader alongside wix-interactive.js.
   Depends on design tokens defined in wix-core.css.

   Dispatches styles by widget type. Each widget uses a distinct
   class prefix (e.g. wix-sim- for simulators).
   ================================================================ */


/* ================================================================
   POOL SIMULATOR — data-wix-module="pool-simulator"
   Side-by-side comparison: self-insured vs pooled risk.
   ================================================================ */


/* ── 1. Panels Grid ──────────────────────────────────────────────
   Two-column layout for the Alone / Pool panels.
   Stacks vertically on narrow screens.
   ──────────────────────────────────────────────────────────────── */

.wix-sim-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 640px) {
  .wix-sim-panels {
    grid-template-columns: 1fr;
  }
}


/* ── 2. Panel Base + Variants ────────────────────────────────────
   Each panel is a card with a colored top border.
   ──────────────────────────────────────────────────────────────── */

.wix-sim-panel {
  background: var(--wix-bg-subtle);
  border: 1px solid var(--wix-border);
  border-radius: var(--wix-radius);
  padding: 1.25rem;
}

.wix-sim-panel--alone {
  border-top: 3px solid var(--wix-wrong);
}

.wix-sim-panel--pool {
  border-top: 3px solid var(--wix-correct);
}


/* ── 3. Panel Header ─────────────────────────────────────────────
   Small label + title at top of each panel.
   ──────────────────────────────────────────────────────────────── */

.wix-sim-label {
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.wix-sim-label--alone {
  color: var(--wix-wrong);
}

.wix-sim-label--pool {
  color: var(--wix-correct);
}

.wix-sim-title {
  font-weight: 600;
  margin-bottom: 0.75rem;
}


/* ── 4. Stat Boxes ───────────────────────────────────────────────
   Row of key figures (savings, total spent).
   ──────────────────────────────────────────────────────────────── */

.wix-sim-stats {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.wix-sim-stat {
  flex: 1;
  background: var(--wix-bg);
  border: 1px solid var(--wix-border-subtle);
  border-radius: var(--wix-radius);
  padding: 0.5rem 0.65rem;
}

.wix-sim-stat-label {
  font-size: 0.85em;
  color: var(--wix-text-muted);
  margin-bottom: 0.15rem;
}

.wix-sim-stat-val {
  font-weight: 700;
}


/* ── 5. Chart Area ───────────────────────────────────────────────
   Canvas wrapper with fixed height.
   ──────────────────────────────────────────────────────────────── */

.wix-sim-chart {
  position: relative;
  height: 140px;
  margin-top: 0.5rem;
}

.wix-sim-chart canvas {
  width: 100%;
  height: 100%;
}


/* ── 6. Event Log ────────────────────────────────────────────────
   Single-line status message below the chart.
   ──────────────────────────────────────────────────────────────── */

.wix-sim-log {
  margin-top: 0.75rem;
  font-size: 0.85em;
  min-height: 1.25em;
  line-height: 1.45;
}

.wix-sim-log--hit {
  color: var(--wix-wrong);
  font-weight: 600;
}

.wix-sim-log--safe {
  color: var(--wix-text-muted);
}


/* ── 7. Controls Bar ─────────────────────────────────────────────
   Flex row: buttons + year display + speed slider.
   ──────────────────────────────────────────────────────────────── */

.wix-sim-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.wix-sim-year {
  font-size: 0.85em;
  color: var(--wix-text-muted);
  min-width: 5.5rem;
}

.wix-sim-speed {
  font-size: 0.85em;
  color: var(--wix-text-muted);
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.wix-sim-speed input[type="range"] {
  width: 4.5rem;
  vertical-align: middle;
}


/* ── 8. Summary ──────────────────────────────────────────────────
   Results panel shown after the simulation ends.
   ──────────────────────────────────────────────────────────────── */

.wix-sim-summary {
  margin-top: 1rem;
  padding: 1.25rem;
  border-radius: var(--wix-radius);
  background: var(--wix-bg-subtle);
  border: 1px solid var(--wix-border);
}

.wix-sim-summary-title {
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.wix-sim-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 480px) {
  .wix-sim-summary-grid {
    grid-template-columns: 1fr;
  }
}

.wix-sim-summary-heading {
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.wix-sim-summary-heading--alone {
  color: var(--wix-wrong);
}

.wix-sim-summary-heading--pool {
  color: var(--wix-correct);
}

.wix-sim-summary-item {
  font-size: 0.85em;
  line-height: 1.6;
}


/* ── 9. Mobile Adjustments ───────────────────────────────────────
   Tighter padding on narrow screens.
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .wix-sim-panel {
    padding: 1rem;
  }

  .wix-sim-stat {
    padding: 0.4rem 0.5rem;
  }
}