/* The probability applets (venn, tree, dicegrid, relativefreq): what the
 * shared sheet (maths-applets.css) does not already give them. */

/* Choices as separate chips (a row of them may wrap) */
.mca-seg.mcp-chips { gap: 6px; border: 0; background: none; border-radius: 0; overflow: visible; }
.mca-seg.mcp-chips button { flex: 0 0 auto; padding: 0 14px; border: 2px solid var(--ink); border-radius: 999px; }
.mca-seg.mcp-chips button + button { border-left: 2px solid var(--ink); }

/* Venn diagram */
.mcp-u { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.mcp-sh { fill: color-mix(in srgb, var(--tangerine) 38%, var(--paper)); stroke: none; }
.mcp-sh.is-b { fill: color-mix(in srgb, var(--teal) 26%, var(--paper)); }
.mcp-circ { fill: none; stroke: var(--ink); stroke-width: 2.8; }
.mcp-circ.is-b { stroke: var(--teal-deep); }
.mcp-set { font-size: 18px; font-weight: 800; fill: var(--ink); text-anchor: middle; pointer-events: none; }
.mcp-set.is-b { fill: var(--teal-deep); }
.mcp-val { font-size: 17px; font-weight: 800; fill: var(--ink); text-anchor: middle; pointer-events: none; }
.mcp-val.is-off { fill: var(--muted); }
.mcp-cap { font-size: 11px; font-weight: 600; fill: var(--muted); text-anchor: middle; pointer-events: none; }
.mcp-sides label { display: grid; gap: 4px; font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.mcp-sides .mca-num { width: 5.6em; }
.mcp-sides .mca-num[aria-invalid="true"] { border-color: var(--tangerine); background: color-mix(in srgb, var(--tangerine) 12%, var(--paper)); }

/* Tree diagram */
.mcp-line { stroke: var(--ink); stroke-width: 2; fill: none; stroke-linecap: round; }
.mcp-root { fill: var(--ink); }
.mcp-pill { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.mcp-pill.is-b { stroke: var(--teal-deep); }
.mcp-pill-t { font-size: 14px; font-weight: 800; fill: var(--ink); text-anchor: middle; pointer-events: none; }
.mcp-partner { fill: color-mix(in srgb, var(--ink) 6%, var(--paper)); stroke: var(--line); stroke-width: 1.5; }
.mcp-partner-t { font-size: 14px; font-weight: 700; fill: var(--ink); text-anchor: middle; pointer-events: none; }
.mcp-end { font-size: 15px; font-weight: 800; fill: var(--ink); }
.mcp-end.is-off { fill: var(--muted); }
.mcp-box { width: 100%; height: 100%; box-sizing: border-box; padding: 0 2px; border: 2px solid var(--tangerine); border-radius: 8px; background: var(--paper); font: inherit; font-size: 14px; font-weight: 700; text-align: center; color: var(--ink); user-select: text; -webkit-user-select: text; touch-action: manipulation; }
.mcp-box:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; }
.mcp-box[aria-invalid="true"] { background: color-mix(in srgb, var(--tangerine) 16%, var(--paper)); }
.mcp-tree .mca-svg { user-select: text; -webkit-user-select: text; }
.mcp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; align-items: start; }
.mcp-cols > * { min-width: 0; }
.mcp-cols .is-full { grid-column: 1 / -1; }
.mcp-sub { margin: 0 0 6px; font-size: 0.85rem; font-weight: 800; color: var(--muted); }
.mcp-facts dd { overflow-wrap: anywhere; }

/* Two dice */
.mcp-cell { cursor: pointer; }
.mcp-cell rect { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
.mcp-cell text { font-size: 13px; font-weight: 600; fill: var(--muted); text-anchor: middle; pointer-events: none; }
.mcp-cell.is-a rect { fill: var(--tangerine); stroke: var(--ink); }
.mcp-cell.is-b rect { fill: var(--teal); stroke: var(--ink); }
.mcp-cell.is-ab rect { fill: var(--gold); stroke: var(--ink); }
.mcp-cell.is-a text, .mcp-cell.is-b text, .mcp-cell.is-ab text { fill: var(--ink); font-weight: 800; }
.mcp-cell.is-faint.is-a rect { fill: color-mix(in srgb, var(--tangerine) 24%, var(--paper)); stroke: var(--tangerine); }
.mcp-cell.is-faint.is-b rect { fill: color-mix(in srgb, var(--teal) 24%, var(--paper)); stroke: var(--teal-deep); }
.mcp-cell.is-faint text { fill: var(--ink); font-weight: 600; }
.mcp-cell.is-out { opacity: 0.4; }
.mcp-cell:focus { outline: none; }
.mcp-cell:focus-visible rect { stroke: var(--ink); stroke-width: 4; }
.mcp-hd { font-size: 14px; font-weight: 800; fill: var(--ink); text-anchor: middle; pointer-events: none; }
.mcp-hd-name { font-size: 12px; font-weight: 700; fill: var(--muted); text-anchor: middle; pointer-events: none; }
.mcp-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.mcp-key li { display: inline-flex; align-items: center; gap: 6px; }
.mcp-key i { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--ink); border-radius: 4px; }
.mcp-key .is-a { background: var(--tangerine); }
.mcp-key .is-b { background: var(--teal); }
.mcp-key .is-ab { background: var(--gold); }

@media (max-width: 640px) {
    .mcp-cols { grid-template-columns: minmax(0, 1fr); }
}

.mca-controls select { width: 100%; max-width: 100%; box-sizing: border-box; }