/* Mark and mix: searching four boxes (/tools/mark-and-mix/). WS5-2. Page-scoped; builds on the shared .demo card in site.css,
   following the Interference page (interference.css). The card is always dark (both themes), so colours are fixed here:
   bars cyan #22D3EE (8.2:1 on the card), the prize outline and average line band text #F5F3FF, the axis white at 40% (3.6:1).
   No state is carried in classes on reportable elements: the chosen prize is shown by aria-pressed and printed text only. */
.mm { --mm-bar: #22D3EE; --mm-line: #F5F3FF; --mm-axis: rgba(255,255,255,0.4); }
.article .mm figure { margin: 0; background: none; border-radius: 0; padding: 0; }   /* the card is not an article figure */
.mm .mm-prizebox, .mm .mm-guide, .mm .mm-controls, .mm .mm-obs { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); }
.mm .mm-prize { display: flex; flex-wrap: wrap; gap: 8px; }
.mm .mm-prize .btn { min-width: 64px; min-height: 44px; font-size: 1rem; letter-spacing: 0.04em; }
.mm .mm-prize .btn[aria-pressed="true"] { background: var(--band-fg); color: #26224F; border-color: var(--band-fg); }
.mm .mm-prize .btn[aria-pressed="true"]::after { content: " \2713"; }
.mm .mm-setup { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mm .mm-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: flex-start; font-family: var(--f-display); font-size: 0.88rem; color: var(--band-fg); }
.mm .mm-strip li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.mm .mm-strip li + li { position: relative; padding-left: 18px; }
.mm .mm-strip li + li::before { content: "\2192"; color: var(--band-muted); position: absolute; left: 2px; top: 4px; }
.mm .mm-step { border: 1px solid rgba(255,255,255,0.28); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.mm .mm-step-check { border-style: dashed; }
.mm .mm-tag { font-size: 0.75rem; color: var(--band-muted); }
.mm .mm-switch, .mm .mm-answers label, .mm .mm-views label { display: flex; gap: 10px; align-items: flex-start; font-family: var(--f-display); font-size: 0.92rem; color: var(--band-fg); margin: 0; padding: 8px 0; min-height: 44px; cursor: pointer; }
.mm .mm-views label[hidden] { display: none; }
.mm input[type=radio], .mm input[type=checkbox] { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--mm-bar); }
.mm input:disabled + span { opacity: 0.7; }
.mm .mm-circuitnote { margin: 0; }
.mm .mm-stepn { margin: 0; }
.mm .mm-stepn:focus { outline: none; }
.mm .mm-stepn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mm .mm-answers, .mm .mm-views { border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; padding: 10px 14px 12px; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mm .mm-answers legend, .mm .mm-views legend { font-family: var(--f-display); font-size: 0.9rem; color: var(--band-fg); padding: 0 6px; }
.mm .mm-answers b { font-weight: 500; color: var(--band-muted); margin-right: 4px; }
.mm .mm-fb p { margin: 0; }
.mm .mm-fb:focus { outline: none; }
.mm .mm-fb:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
.mm .mm-feedback { font-family: var(--f-body); font-size: 1rem; line-height: 1.5; color: var(--band-fg); }
.mm .mm-fb.is-right .mm-feedback, .mm .mm-fb.is-wrong .mm-feedback { border-left: 3px solid var(--mm-bar); padding-left: 12px; margin-top: 4px; }
.mm .mm-fb.is-wrong .mm-feedback { border-left-style: dashed; border-left-color: var(--mm-line); }
.mm .mm-rounds { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mm .mm-roundsh { font-family: var(--f-display); font-size: 0.92rem; color: var(--band-fg); flex: 1 1 100%; }
.mm .mm-rounds .btn { min-width: 48px; min-height: 44px; font-size: 1.2rem; line-height: 1; padding: 8px 12px; }
.mm .mm-roundsval { font-size: 1.4rem; min-width: 1.5em; text-align: center; color: var(--band-fg); }
.mm .mm-locknote { margin: 0; }
.mm .mm-explain { font-family: var(--f-body); font-size: 1rem; line-height: 1.55; color: var(--band-fg); margin: 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); }
.mm .mm-preview { margin: 8px 0 0; padding: 8px 12px; border: 1px dashed rgba(255,255,255,0.28); border-radius: 10px; }
.mm .mm-hidden { margin: 0; padding: 14px; border: 1px dashed rgba(255,255,255,0.28); border-radius: 12px; }
.mm #mmPanels { display: flex; flex-direction: column; gap: 12px; }
.mm .mm-panelrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px 22px; }
.mm .mm-panel { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mm .mm-panel p { margin: 0; }
.mm .mm-ph { font-family: var(--f-display); font-size: 0.9rem; color: var(--band-fg); margin: 0; }
.mm .mm-svg { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto; }
.mm svg .mm-axis { stroke: var(--mm-axis); stroke-width: 1; }
.mm svg .mm-bar { fill: var(--mm-bar); }
.mm svg .mm-outline { fill: none; stroke: var(--mm-line); stroke-width: 1.5; stroke-opacity: 0.8; }
.mm svg .mm-avg { stroke: var(--mm-line); stroke-width: 1.5; stroke-dasharray: 5 4; }
.mm svg text, .mm svg text.t-note { fill: var(--band-muted); }
.mm svg text.t-mono { fill: var(--band-fg); }
.mm .mm-table { width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: 0.88rem; color: var(--band-fg); }
.mm .mm-table caption { text-align: left; font-family: var(--f-display); font-size: 0.85rem; color: var(--band-muted); padding-bottom: 6px; }
.mm .mm-table th, .mm .mm-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,0.12); font-weight: 400; }
.mm .mm-table thead th { font-family: var(--f-display); color: var(--band-muted); }
.mm .mm-obs .tally { color: var(--band-fg); }
.mm .bar i em { background: var(--mm-bar); }
.mm .mm-steps { margin: 4px 0 8px; padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; }
.mm .mm-steps strong { font-weight: 500; color: var(--band-fg); }
.mm .mm-tech { margin-top: 6px; }
.mm .mm-tech .demo-small + .demo-small, .mm .mm-tech .ket + .demo-small { margin-top: 8px; }
.mm .btn-ghost:disabled, .mm .btn-link:disabled { opacity: 0.55; cursor: not-allowed; }
@media (forced-colors: active) {
  .mm svg .mm-bar { fill: CanvasText; }
  .mm svg .mm-axis, .mm svg .mm-outline, .mm svg .mm-avg { stroke: CanvasText; }
  .mm svg text { fill: CanvasText; }
}