/* The events solver (site/tools_events.py, static/solver.js, qh/eventsolve.py): the button-built form and the answer. Loaded only by that
   tool's page, after venn.css. Every colour is a brand token, so both themes work. @map:event-solver */
.sv-form { min-width: 0; }
.sv-stick { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sv-form .tool-modes, .sv-rels, .sv-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.sv-rels legend, .sv-group legend { padding: 0; margin-bottom: 8px; }
.sv-relpills { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-reltext { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; }
.sv-reltext > span { display: block; margin-top: 4px; }
.sv-form.is-live .sv-reltext > span { display: none; }                       /* with the script, only the explanation of what is pressed */
.sv-form.is-live:has(input[name="indep"]:checked) .sv-reltext [data-rel="indep"],
.sv-form.is-live:has(input[name="excl"]:checked) .sv-reltext [data-rel="excl"],
.sv-form.is-live:has(input[name="exh"]:checked) .sv-reltext [data-rel="exh"] { display: block; }
.sv-n2 [data-modes="3"], .sv-n3 [data-modes="2"] { display: none; }           /* the labels and boxes of the other number of events */
.sv-lead { margin: 2px 0 12px; }
.sv-group { margin-bottom: 12px; }
.sv-group[hidden] { display: none; }
.sv-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-picks:empty { display: none; }
.sv-pick { padding: 7px 12px; font: 600 14.5px var(--f-mono, ui-monospace, monospace); cursor: pointer; color: var(--qb-text-primary);
  border: 1px solid var(--qb-border-strong); background: var(--qb-surface-strong); }
.sv-pick:hover { border-color: var(--qb-text-heading); }
.sv-pick.on { color: #1C1B18; background: var(--qb-accent); border-color: var(--qb-text-heading); }
.sv-boxes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.sv-boxes:empty { display: none; }
.sv-q { position: relative; display: flex; flex-direction: column; gap: 4px; flex: 0 1 190px; min-width: 150px; }
.sv-form.is-live .sv-q:not(.is-open) { display: none; }
.sv-q label { font: 600 14px var(--f-mono, ui-monospace, monospace); color: var(--qb-text-secondary); }
.sv-q .bs-input { height: 46px; font-size: 18px; padding-right: 70px; }
.sv-slash { position: absolute; right: 34px; bottom: 7px; width: 30px; height: 32px; padding: 0; font: 700 20px/1 var(--f-mono, ui-monospace, monospace);
  color: #1C1B18; background: var(--qb-accent); border: 1px solid var(--qb-text-heading); cursor: pointer; }
.sv-slash:hover { filter: brightness(1.08); }
.sv-x { position: absolute; right: 2px; bottom: 7px; width: 30px; height: 32px; padding: 0; font-size: 20px; line-height: 1; color: var(--qb-text-muted);
  background: transparent; border: 0; cursor: pointer; }
.sv-x:hover { color: var(--sub-ch); }
.sv-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sv-form:not(.has-open) .sv-quick { display: none; }
.sv-qv { padding: 4px 10px; font: 600 14px var(--f-mono, ui-monospace, monospace); cursor: pointer; color: var(--qb-text-primary); background: transparent;
  border: 1px solid var(--qb-border-strong); }
.sv-qv:hover { background: var(--qb-accent-tint); border-color: var(--qb-text-heading); }
.sv-form button[aria-busy="true"] { opacity: .6; }

/* the groups of buttons after the first three are folded: only their buttons, the boxes stay in view (tools_events._group) */
.sv-adv { margin-bottom: 4px; }
.sv-pickbox > summary, .sv-grp > summary, .sv-unfound > summary, .sv-stepsbox > summary { cursor: pointer; list-style: none; }
.sv-pickbox > summary::-webkit-details-marker, .sv-grp > summary::-webkit-details-marker, .sv-unfound > summary::-webkit-details-marker,
.sv-stepsbox > summary::-webkit-details-marker { display: none; }
.sv-pickbox > summary::before, .sv-grp > summary::before, .sv-unfound > summary::before, .sv-stepsbox > summary::before {
  content: "▸"; display: inline-block; width: 1.1em; color: var(--qb-text-muted); }
.sv-pickbox[open] > summary::before, .sv-grp[open] > summary::before, .sv-unfound[open] > summary::before,
.sv-stepsbox[open] > summary::before { content: "▾"; }
.sv-pickbox > summary { display: flex; align-items: baseline; gap: 6px; padding: 6px 0 8px; margin: 0; }
.sv-pickbox > summary:hover { color: var(--qb-text-heading); }
.sv-count { font: 600 12.5px var(--f-mono, ui-monospace, monospace); color: var(--qb-text-muted); text-transform: none; letter-spacing: 0; }
.sv-adv .sv-boxes { margin-top: 6px; }
.sv-form:not(.is-live) .sv-pickbox { display: none; }               /* without the script there are no buttons to fold */

/* the answer */
.sv-out { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sv-out > .bs-card, .sv-out > .bs-result { margin: 0; }
.sv-told { margin: 0; padding-left: 20px; line-height: 1.65; }
.sv-out h3 { margin: 14px 0 6px; font-size: 15px; }
.sv-out h3:first-child { margin-top: 0; }
/* the answer's groups: a folded `details` each, with the values not found yet folded inside (tools_events._results) */
.sv-grp { margin: 0; border-top: 1px solid var(--qb-border); }
.sv-grp:first-child { border-top: 0; }
.sv-grp > summary { display: flex; align-items: baseline; gap: 4px 10px; padding: 9px 0; }
.sv-grp > summary h3 { margin: 0; font-size: 15px; display: inline; }
.sv-found { font: 600 12.5px var(--f-mono, ui-monospace, monospace); color: var(--qb-text-muted); }
.sv-grp[open] > summary { padding-bottom: 6px; }
.sv-unfound { margin: 8px 0 4px; }
.sv-unfound > summary { font-size: 14px; color: var(--qb-text-muted); padding: 4px 0; }
.sv-unfound[open] > summary { padding-bottom: 8px; }
.sv-stepsbox > summary { font-weight: 600; padding: 4px 0 10px; }
/* after a value is changed the answer on the page is old: it is dimmed and says so until Solve is pressed again */
.sv-out.is-stale > * { opacity: .5; }
.sv-out.is-stale::before { content: "The values have changed: press Solve to update this answer."; display: block; padding: 8px 12px;
  border: 1px solid var(--qb-text-heading); background: var(--qb-accent-tint); color: var(--qb-text-heading); font-weight: 600; }
.sv-table { width: 100%; }
.sv-table th[scope="row"] { font: 600 14.5px var(--f-mono, ui-monospace, monospace); text-align: left; }
.sv-note { display: block; font: 400 12.5px/1.35 var(--f-text, Georgia, serif); color: var(--qb-text-muted); }
.sv-v b { font-family: var(--f-mono, ui-monospace, monospace); }
.sv-why { font: 600 13px var(--f-mono, ui-monospace, monospace); }
.sv-hint { margin: 0; }
.sv-steps-lead { margin: 0 0 10px; }
.sv-steps { margin: 12px 0 0; padding-left: 30px; }
.sv-step { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--qb-border-strong); background: var(--qb-surface-strong); }
.sv-step::marker { font: 600 13px var(--f-mono, ui-monospace, monospace); color: var(--qb-text-muted); }
.sv-step p { margin: 2px 0; }
.sv-f, .sv-n { font: 14px/1.5 var(--f-mono, ui-monospace, monospace); overflow-wrap: anywhere; }
.sv-steps.is-focus .sv-step:not(.is-need) { display: none; }
.sv-step.is-target { border-left-color: var(--qb-accent); background: var(--qb-accent-tint); }
.sv-all { margin: 0 0 6px; }

/* the answer's column is narrow beside the form: the diagram takes its full width and the steps go under it */
.sv-out .venn-stage { grid-template-columns: minmax(0, 1fr); }
.sv-out .venn-img { margin: 0 auto; }

/* From 1100px the form stays in view on the left while the answer scrolls on the right (the page's own grid, with the form no
   longer pushed full width by venn.css when the answer has a diagram).

   NEVER put `position: sticky` on a direct child of `.dialog-body` (the form, the answer, a card). Chrome limits a sticky grid
   child to the grid CONTAINER, not to its own row, so it kept following the scroll for the whole page and was drawn on top of
   "Your saved values", the About card and the FAQ below the answer (2026-10-23, @map:sticky-in-grid). The sticky part is the
   `.sv-stick` box INSIDE the form instead: the form stretches over the answer's row and a sticky box is stopped by its
   parent's bottom edge, so it stops where the answer ends. The frame (border, padding) moves to that box with it. Any new tool
   that wants a sticky form does the same: stretched `.tool-form`, sticky box inside it, never the form itself. */
@media (min-width: 1100px) {
  .dialog-body:has(> .tool-out .sv-out) > .tool-form { grid-column: 1; align-self: stretch; max-width: none; padding: 0; border: 0; background: none; }
  .dialog-body:has(> .tool-out .sv-out) > .tool-form > .sv-stick { position: sticky; top: 72px; box-sizing: border-box; max-height: calc(100vh - 96px);
    overflow-y: auto; padding: 20px 22px; border: 1px solid var(--qb-border); background: var(--qb-glass-fill); }
  .dialog-body:has(> .tool-out .sv-out) > .tool-out { grid-column: 2; }
}
@media (max-width: 800px) {
  .sv-q { flex: 1 1 140px; }
}