/* The Venn diagram player (site/tools_maths.py VENN, static/venn.js, qh/venn_draw.py). Loaded only by that tool's page. Every colour is a
   brand token, so both themes work. blue and purple (and green for a third circle) are the events A, B, C and the operands of a step;
   yellow is the answer so far; a veil is what a "given" has ruled out. @map:venn */
.venn { --c-a: var(--sub-cs); --c-b: var(--sub-lt); --c-c: var(--sub-ma); min-width: 0; }
.venn-head { margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.venn-expr { font: 700 20px var(--f-mono, ui-monospace, monospace); color: var(--qb-text-heading); }
.venn-val { font: 600 18px var(--f-mono, ui-monospace, monospace); color: var(--qb-text-secondary); }
.venn-stage { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.venn-fig { min-width: 0; }
.venn-img { display: block; width: 100%; height: auto; max-height: 460px; }
.venn-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.v-space { fill: var(--qb-surface-strong); stroke: var(--qb-text-heading); stroke-width: 1.5; }
.v-circ { fill: none; stroke-width: 3; }
.v-c0 { stroke: var(--c-a); } .v-c1 { stroke: var(--c-b); } .v-c2 { stroke: var(--c-c); }
.v-name { font: 700 24px var(--f-text, Georgia, serif); }
.v-n0 { fill: var(--c-a); } .v-n1 { fill: var(--c-b); } .v-n2 { fill: var(--c-c); }
.v-s { font: 600 15px var(--f-mono, ui-monospace, monospace); fill: var(--qb-text-muted); }

/* four layers per region: the first operand, the second, the answer so far, and the veil of a "given" */
.vl { fill: transparent; opacity: 0; pointer-events: none; transition: opacity .35s, fill .35s; }
.vl.l-a { fill: var(--c-a); } .vl.l-a.on { opacity: .34; }
.vl.l-b { fill: var(--c-b); } .vl.l-b.on { opacity: .34; }
.vl.l-r { fill: var(--qb-accent); } .vl.l-r.on { opacity: .88; }
.vl.l-d { fill: var(--qb-bg-base); } .vl.l-d.on { opacity: .74; }
.vw { font: 600 13px var(--f-mono, ui-monospace, monospace); fill: var(--qb-text-primary); pointer-events: none; transition: fill .3s, opacity .3s; }
.vw.hot { fill: #1C1B18; font-weight: 800; }
.vw.dim { opacity: .45; }
.vh { fill: transparent; pointer-events: none; }
.venn.is-custom .vh { pointer-events: all; cursor: pointer; }
.venn.is-custom .vh:hover { fill: var(--qb-accent); fill-opacity: .3; }

.venn-say { margin: 0; padding: 10px 14px; min-height: 4.6em; line-height: 1.5; border-left: 4px solid var(--qb-accent); background: var(--qb-accent-tint); }
.venn-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.venn-controls .btn { height: auto; padding: 9px 14px; font-size: 14px; }
.venn-controls .btn:disabled { opacity: .45; cursor: default; }
.venn-controls .btn.primary { min-width: 96px; }
.venn-count { font: 13px var(--f-mono, ui-monospace, monospace); color: var(--qb-text-muted); }
.venn-working { margin: 0; padding-left: 22px; line-height: 1.6; }
.venn-working li { font-family: var(--f-mono, ui-monospace, monospace); font-size: 14px; }

.venn-more { margin-top: 16px; }
.venn-more h3 { margin: 0 0 4px; font-size: 16px; }
.venn-more p { margin: 0 0 10px; }
.venn .venn-palette { list-style: none; margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }      /* wraps on a phone too (the example chips scroll sideways there; eighteen of these would be a long strip) */
.venn-chip { font: 600 15px var(--f-mono, ui-monospace, monospace); text-decoration: none; }
.venn-chip.is-on { border-color: var(--qb-text-heading); background: var(--qb-accent-tint); color: var(--qb-text-heading); font-weight: 700; }
.venn-link { padding: 0; font: inherit; color: var(--qb-text-secondary); text-decoration: underline; background: none; border: 0; cursor: pointer; }

.tool-out:has(.venn) > .bs-result { column-count: 1; }            /* the shared result wrapper is two columns on a wide page; the cards stack */
@media (min-width: 1100px) {                                       /* the player needs the whole width: the form sits above it */
  .dialog-body:has(> .tool-out .venn) > .tool-form { grid-column: 1 / -1; position: static; max-width: 760px; }
  .dialog-body:has(> .tool-out .venn) > .tool-out { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .venn-stage { grid-template-columns: minmax(0, 1fr); }
  .venn-expr { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .vl, .vw { transition: none; }
}