/* The Bell game (/tools/bell-game/). WS5-3. Page-scoped; builds on the shared .demo card in site.css, following Mark and mix.
   The card is always dark (both themes), so colours are fixed here: the score fill cyan #22D3EE, reference lines and hatching #F5F3FF.
   Every text size inside the card is at least 14 px (0.875rem). No animation or transition. No state is carried in classes:
   choices are native checked/selected states, and every result is printed as text. */
.bg { --bg-fill: #22D3EE; --bg-line: #F5F3FF; --bg-axis: rgba(255,255,255,0.4); }
.article .bg figure { margin: 0; background: none; border-radius: 0; padding: 0; }
.bg .bg-h2 { font-family: var(--f-display); font-size: 1.05rem; font-weight: 500; color: var(--band-fg); margin: 0; letter-spacing: 0; text-transform: none; }
.bg .bg-h2:focus { outline: none; }
.bg .bg-h2:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.bg .bg-h3 { font-family: var(--f-display); font-size: 0.95rem; font-weight: 500; color: var(--band-fg); margin: 10px 0 0; }
.bg .bg-text { font-family: var(--f-body); font-size: 1rem; line-height: 1.55; color: var(--band-fg); margin: 0; }
.bg .bg-small, .article .bg .bg-small { font-family: var(--f-display); font-size: 0.875rem; line-height: 1.55; color: var(--band-muted); margin: 0; }
.bg ul.bg-small, .bg ul.bg-text { padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.bg .bg-em { font-weight: 500; color: var(--band-fg); }
.bg .bg-b { font-weight: 500; color: var(--band-fg); }
.bg sub, .bg sup { font-size: 0.875rem; line-height: 0; }   /* keeps notation at 14 px or more */
.bg .bg-step, .bg .bg-explore { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.14); }
.bg #bgInteractive { display: flex; flex-direction: column; gap: 16px; }
.bg #bgInteractive[hidden], .bg [hidden] { display: none !important; }
.bg .bg-body, .bg .bg-results, .bg #bgExplore { display: flex; flex-direction: column; gap: 12px; }
.bg .bg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.bg .bg-fs { border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; padding: 8px 14px 10px; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bg .bg-fs legend { font-family: var(--f-display); font-size: 0.92rem; color: var(--band-fg); padding: 0 6px; }
.bg .bg-fs label, .article .bg .bg-fs 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: 10px 0; min-height: 44px; cursor: pointer; }
.bg input[type=radio] { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--bg-fill); }
.bg input:disabled + span { opacity: 0.75; }
.bg .bg-fb p { margin: 0; }
.bg .bg-fb:focus { outline: none; }
.bg .bg-fb:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
.bg .bg-feedback { font-family: var(--f-body); font-size: 1rem; line-height: 1.5; color: var(--band-fg); }
.bg .bg-feedback:not(:empty) { border-left: 3px solid var(--bg-line); padding-left: 12px; }
.bg .bg-lockmsg { padding: 10px 12px; border: 1px dashed rgba(255,255,255,0.28); border-radius: 10px; }
.bg .bg-table { width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: 0.875rem; color: var(--band-fg); }
.bg .bg-table caption { text-align: left; font-family: var(--f-display); font-size: 0.875rem; color: var(--band-muted); padding-bottom: 6px; }
.bg .bg-table th, .bg .bg-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.12); font-weight: 400; vertical-align: top; }
.bg .bg-table thead th { font-family: var(--f-display); color: var(--band-muted); }
.bg .bg-table + .bg-table { margin-top: 12px; }
.bg .bg-scroll { overflow-x: auto; max-width: 100%; }
.bg .bg-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bg .demo-details summary { font-size: 0.92rem; min-height: 44px; }
.bg .demo-details summary::before { transition: none; }
.bg .demo-details > * + * { margin-top: 10px; }
.bg .btn { min-height: 44px; }
.bg .btn-link { color: #67E8F9; background: none; border: 0; text-decoration: underline; padding: 10px 4px; cursor: pointer; font-family: var(--f-display); font-size: 0.92rem; }
.bg .btn:disabled { opacity: 0.6; cursor: not-allowed; }
.bg .bg-skipline { margin: 0; }
.bg .bg-dirlist { margin: 0; }
/* V1: the two rooms. The rooms are separate boxes with a gap and a dashed separator; nothing joins them. */
.bg .bg-rooms { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; }
.bg .bg-rooms p { margin: 0; font-family: var(--f-display); font-size: 0.875rem; color: var(--band-muted); }
.bg .bg-timeline { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.bg .bg-roompair { display: flex; align-items: stretch; gap: 12px; }
.bg .bg-room { flex: 1 1 0; min-width: 0; border: 1px solid rgba(255,255,255,0.35); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.bg .bg-room p { color: var(--band-fg); font-family: var(--f-mono); }
.bg .bg-room .bg-r-name { font-family: var(--f-display); color: var(--band-fg); font-weight: 500; }
.bg .bg-sep { flex: 0 0 auto; width: 96px; border-left: 2px dashed rgba(255,255,255,0.45); display: flex; align-items: center; padding-left: 8px; }
.bg .bg-sep span { font-family: var(--f-display); font-size: 0.875rem; color: var(--band-muted); line-height: 1.3; }
@media (max-width: 480px) {
  .bg .bg-roompair { flex-direction: column; }
  .bg .bg-sep { width: auto; border-left: 0; border-top: 2px dashed rgba(255,255,255,0.45); padding: 6px 0 0; }
}
/* V2: dials */
.bg .bg-dials { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 12px; }
.bg .bg-dial { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.bg svg .bg-dial-c { fill: none; stroke: var(--bg-axis); stroke-width: 1; }
.bg svg .bg-dial-axis { stroke: var(--bg-axis); stroke-width: 1; stroke-dasharray: 2 3; }
.bg svg .bg-dial-dir { stroke: var(--bg-fill); stroke-width: 3; stroke-linecap: round; }
.bg svg text, .bg svg text.t-mono { fill: var(--band-fg); }   /* typeface and size from diagram.css (.dg .t-mono: PQ Diagram Mono 12 px, drawn at 1.2x = 14.4 px) */
/* V3: score bar */
.bg .bg-bar { display: flex; flex-direction: column; gap: 4px; }
.bg .bg-barsvg { width: 100%; max-width: 520px; height: auto; display: block; }
.bg svg .bg-track { fill: rgba(255,255,255,0.08); stroke: var(--bg-axis); stroke-width: 1; }
.bg svg .bg-fill { fill: var(--bg-fill); }
.bg svg .bg-tick { stroke: var(--bg-axis); stroke-width: 1; }
.bg svg .bg-ref75 { stroke: var(--bg-line); stroke-width: 2; stroke-dasharray: 6 4; }
.bg svg .bg-ref85 { stroke: var(--bg-line); stroke-width: 2; stroke-dasharray: 1 3; stroke-linecap: round; }
.bg svg .bg-exp { fill: var(--bg-line); }
.bg svg .bg-hatch { stroke: var(--bg-line); stroke-width: 1.2; }
.bg svg .bg-range { stroke: var(--bg-line); stroke-width: 0.8; }
.bg .bg-key { display: inline-block; width: 26px; height: 0; vertical-align: middle; border-top: 2px dashed var(--bg-line); }
.bg .bg-key85 { border-top-style: dotted; }
.bg .bg-dirs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px 16px; }
.bg .bg-dirlab, .article .bg .bg-dirlab { display: flex; flex-direction: column; gap: 6px; font-family: var(--f-display); font-size: 0.92rem; color: var(--band-fg); margin: 0; }
.bg select { min-height: 44px; font-family: var(--f-display); font-size: 0.95rem; background: #1B1840; color: var(--band-fg); border: 1px solid rgba(255,255,255,0.35); border-radius: 8px; padding: 6px 8px; max-width: 100%; }
.bg select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bg-answers summary { cursor: pointer; }
@media (forced-colors: active) {
  .bg svg .bg-fill, .bg svg .bg-exp { fill: CanvasText; }
  .bg svg .bg-track, .bg svg .bg-tick, .bg svg .bg-ref75, .bg svg .bg-ref85, .bg svg .bg-hatch, .bg svg .bg-range,
  .bg svg .bg-dial-c, .bg svg .bg-dial-axis, .bg svg .bg-dial-dir { stroke: CanvasText; }
  .bg svg text { fill: CanvasText; }
  .bg .bg-key { border-top-color: CanvasText; }
}