/* =====================================================================
   PROBABILITY — Class 10 Maths Notes
   All diagrams on this page are STATIC (no animation / no replay
   controls). Layout classes below are page-specific; box styles like
   .definition-box, .formula-box, .props-list, .solved-example-card,
   .example-badge/.example-question/.example-solution and the .se-*
   diagram classes (.se-stroke-main, .se-fill-primary, .se-fill-shaded,
   .se-fill-track, .se-stroke-sub, .se-stroke-accent, .se-dot, .se-text,
   .se-text-bold, .se-text-accent, .se-diagram-wrapper) come from the
   shared /css/notes-content.css stylesheet.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Generic wrapper for the static diagrams placed inside the main
      topic sections (Venn diagrams, sample-space strips, card tree).
   --------------------------------------------------------------------- */
.prob-diagram-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 24px auto;
}

.prob-diagram-wrapper svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  user-select: none;
}

.prob-diagram-caption {
  margin-top: 10px;
  font-size: 13px;
  color: #64748b;
  text-align: center;
  max-width: 480px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------
   2. Outcome markers — small numbered/labelled circles used inside
      sample-space diagrams (coin, die, event Venn diagrams).
   --------------------------------------------------------------------- */
.outcome-marker {
  fill: #ffffff;
  stroke: #0f172a;
  stroke-width: 2;
}

.outcome-marker-label {
  font-size: 15px;
  font-weight: 700;
  fill: #0f172a;
  text-anchor: middle;
}

/* ---------------------------------------------------------------------
   3. Deck-of-cards breakdown tree (Section 8).
   --------------------------------------------------------------------- */
.card-red-box {
  fill: rgba(220, 38, 38, 0.07);
  stroke: #dc2626;
  stroke-width: 2;
}

.card-black-box {
  fill: rgba(15, 23, 42, 0.06);
  stroke: #0f172a;
  stroke-width: 2;
}

.card-red-text {
  fill: #b91c1c;
  font-weight: 700;
  text-anchor: middle;
}

.card-black-text {
  fill: #0f172a;
  font-weight: 700;
  text-anchor: middle;
}

.card-sub-text {
  fill: #475569;
  text-anchor: middle;
}

.card-connector {
  stroke: #94a3b8;
  stroke-width: 2;
  fill: none;
}

/* ---------------------------------------------------------------------
   4. Sample-space tables (two dice, and the sum-highlight table used
      in the solved examples).
   --------------------------------------------------------------------- */
.prob-table-wrapper {
  overflow-x: auto;
  margin: 20px 0;
}

.prob-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 13.5px;
  text-align: center;
  margin: 0 auto;
}

.prob-table caption {
  caption-side: top;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}

.prob-table th,
.prob-table td {
  border: 1px solid #e2e8f0;
  padding: 6px 4px;
}

.prob-table thead th {
  background: #f1f5f9;
  color: #0f172a;
  font-weight: 700;
}

.prob-table tbody th {
  background: #f8fafc;
  color: #0f172a;
  font-weight: 700;
}

.prob-table td {
  color: #475569;
}

.prob-table td.highlight {
  background: rgba(37, 99, 235, 0.14);
  color: #1d4ed8;
  font-weight: 700;
}