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;
  }
}


/* ================================================================
   INSURER ENGINES — data-wix-module="insurer-engines"
   Two-engine profit simulator: underwriting + investment.
   ================================================================ */


/* ── 10. Outer Wrapper ───────────────────────────────────────────
    Single containing card for the entire widget.
    ──────────────────────────────────────────────────────────────── */

.wix-eng-wrapper {
  background: var(--wix-bg-subtle);
  border: 1px solid var(--wix-border);
  border-radius: var(--wix-radius);
  padding: 1.5rem;
}

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


/* ── 11. Fixed Info Row ──────────────────────────────────────────
    Key facts strip at the top (policies, premiums, expenses).
    ──────────────────────────────────────────────────────────────── */

.wix-eng-fixed {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-bottom: 1.25rem;
  padding: 0.65rem 1rem;
  border-radius: var(--wix-radius);
  background: var(--wix-bg-subtle);
  font-size: 0.85em;
  color: var(--wix-text-muted);
}

.wix-eng-fixed span {
  color: var(--wix-text);
  font-weight: 600;
}


/* ── 11. Scenario Strip ──────────────────────────────────────────
    Row of preset scenario buttons.
    ──────────────────────────────────────────────────────────────── */

.wix-eng-section-label {
  font-size: 0.85em;
  color: var(--wix-text-muted);
  margin-bottom: 0.4rem;
}

.wix-eng-scenario-strip {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.wix-eng-scenario-btn {
  flex: 1;
  padding: 0.55rem 0.5rem;
  border-radius: var(--wix-radius);
  border: 1px solid var(--wix-border);
  background: var(--wix-bg);
  font: inherit;
  font-size: 0.85em;
  color: var(--wix-text-muted);
  cursor: pointer;
  text-align: center;
  line-height: 1.35;
  transition:
    border-color var(--wix-transition),
    background   var(--wix-transition),
    color        var(--wix-transition);
  -webkit-tap-highlight-color: transparent;
}

.wix-eng-scenario-btn:hover {
  border-color: var(--wix-accent);
  background: var(--wix-accent-light);
}

.wix-eng-scenario-btn--active {
  border-color: var(--wix-accent);
  background: var(--wix-accent-light);
  color: var(--wix-accent);
  font-weight: 600;
}


/* ── 12. Slider Rows ─────────────────────────────────────────────
    Label + range input + value display.
    ──────────────────────────────────────────────────────────────── */

.wix-eng-slider-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}

.wix-eng-slider-label {
  font-size: 0.85em;
  color: var(--wix-text-muted);
  min-width: 8rem;
}

.wix-eng-slider-row input[type="range"] {
  flex: 1;
}

.wix-eng-slider-val {
  font-weight: 600;
  min-width: 4rem;
  text-align: right;
}


/* ── 13. Divider ─────────────────────────────────────────────────
    Horizontal rule between sections.
    ──────────────────────────────────────────────────────────────── */

.wix-eng-divider {
  height: 1px;
  background: var(--wix-border-subtle);
  margin: 1.25rem 0;
}


/* ── 14. Engine Cards ────────────────────────────────────────────
    Underwriting and investment engine displays.
    ──────────────────────────────────────────────────────────────── */

.wix-eng-card {
  border: 1px solid var(--wix-border);
  border-radius: var(--wix-radius);
  padding: 1rem;
  background: var(--wix-bg);
  margin-bottom: 0.65rem;
}

.wix-eng-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.wix-eng-title {
  font-size: 0.85em;
  color: var(--wix-text-muted);
}

.wix-eng-val {
  font-weight: 700;
}

.wix-eng-detail {
  font-size: 0.85em;
  color: var(--wix-text-muted);
  margin-top: 0.35rem;
  line-height: 1.55;
}

.wix-eng-bar-track {
  height: 6px;
  border-radius: 3px;
  background: var(--wix-bg-subtle);
  margin-top: 0.6rem;
}

.wix-eng-bar {
  height: 6px;
  border-radius: 3px;
  transition: width 0.35s ease, background 0.35s ease;
  min-width: 2px;
}


/* ── 15. Combined Ratio Box ──────────────────────────────────────
    Single-line metric between the two engine cards.
    ──────────────────────────────────────────────────────────────── */

.wix-eng-cr {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  border-radius: var(--wix-radius);
  background: var(--wix-bg-subtle);
  margin-bottom: 0.65rem;
}

.wix-eng-cr-label {
  font-size: 0.85em;
  color: var(--wix-text-muted);
}

.wix-eng-cr-val {
  font-weight: 700;
}

.wix-eng-cr-sub {
  font-size: 0.85em;
  color: var(--wix-text-muted);
  margin-left: auto;
}


/* ── 16. Total Profit Box ────────────────────────────────────────
    Bottom-line result card.
    ──────────────────────────────────────────────────────────────── */

.wix-eng-total {
  border: 1px solid var(--wix-border);
  border-radius: var(--wix-radius);
  padding: 1rem;
  background: var(--wix-bg);
  margin-bottom: 0.65rem;
}

.wix-eng-total-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.wix-eng-total-label {
  font-size: 0.85em;
  color: var(--wix-text-muted);
}

.wix-eng-total-val {
  font-weight: 700;
}

.wix-eng-total-sub {
  font-size: 0.85em;
  color: var(--wix-text-muted);
  margin-top: 0.2rem;
}


/* ── 17. Callout ─────────────────────────────────────────────────
    Contextual message below the total.
    ──────────────────────────────────────────────────────────────── */

.wix-eng-callout {
  padding: 0.65rem 1rem;
  border-radius: var(--wix-radius);
  font-size: 0.85em;
  line-height: 1.55;
  border-left: 4px solid transparent;
  transition:
    background   var(--wix-transition),
    color        var(--wix-transition),
    border-color var(--wix-transition);
}

.wix-eng-callout--profit {
  background: var(--wix-correct-bg);
  border-left-color: var(--wix-correct);
  color: var(--wix-correct);
}

.wix-eng-callout--loss {
  background: var(--wix-wrong-bg);
  border-left-color: var(--wix-wrong);
  color: var(--wix-wrong);
}


/* ── 18. Insurer Engines Mobile ──────────────────────────────────
    Adjustments for narrow screens.
    ──────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .wix-eng-slider-label {
    min-width: 6rem;
  }

  .wix-eng-card,
  .wix-eng-total {
    padding: 0.75rem;
  }

  .wix-eng-cr {
    flex-wrap: wrap;
  }

  .wix-eng-cr-sub {
    margin-left: 0;
    width: 100%;
  }
}


/* ================================================================
   PREMIUM MATCHING — data-wix-module="premium-matching"
   Revenue recognition: front-loaded vs matched.
   ================================================================ */


/* ── 19. Mode Toggle Buttons ────────────────────────────────────
   Row of two mode-selection buttons.
   ──────────────────────────────────────────────────────────────── */

.wix-pm-modes {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.wix-pm-mode-btn {
  padding: 0.45rem 0.85rem;
  border-radius: var(--wix-radius);
  border: 1px solid var(--wix-border);
  background: var(--wix-bg);
  font: inherit;
  font-size: 0.85em;
  color: var(--wix-text-muted);
  cursor: pointer;
  transition:
    border-color var(--wix-transition),
    background   var(--wix-transition),
    color        var(--wix-transition);
  -webkit-tap-highlight-color: transparent;
}

.wix-pm-mode-btn:hover {
  border-color: var(--wix-accent);
  background: var(--wix-accent-light);
}

.wix-pm-mode-btn--active {
  border-color: var(--wix-accent);
  background: var(--wix-accent-light);
  color: var(--wix-accent);
  font-weight: 600;
}


/* ── 20. Stat Cards Row ─────────────────────────────────────────
   Three side-by-side metric cards.
   ──────────────────────────────────────────────────────────────── */

.wix-pm-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}

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

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

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

.wix-pm-stat-val {
  font-size: 1.25em;
  font-weight: 700;
}

.wix-pm-stat-val--profit {
  color: var(--wix-correct);
}


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

.wix-pm-chart {
  position: relative;
  height: 280px;
  margin-bottom: 0.5rem;
}

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

@media (max-width: 480px) {
  .wix-pm-chart {
    height: 220px;
  }
}


/* ── 22. Legend ──────────────────────────────────────────────────
   Horizontal legend row below the chart.
   ──────────────────────────────────────────────────────────────── */

.wix-pm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.85em;
  color: var(--wix-text-muted);
}

.wix-pm-legend-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.wix-pm-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.wix-pm-swatch--rev {
  background: var(--wix-correct);
}

.wix-pm-swatch--exp {
  background: var(--wix-wrong);
}

.wix-pm-swatch--profit {
  background: var(--wix-accent);
}