/* Chapter 11: B cell matcher, response-graph quiz, herd immunity simulator. */

.c11-pic { width: min(100%, 62cqw); align-self: center; border-radius: .8em; background: #0d1730; }
.c11-pic svg { display: block; width: 100%; height: auto; }
.c11-bcell { cursor: pointer; }
.c11-bcell .c11-ring { stroke: transparent; stroke-width: 6; transition: stroke .2s; }
.c11-bcell:hover .c11-ring, .c11-bcell:focus-visible .c11-ring { stroke: rgba(255, 255, 255, .45); }
.c11-bcell:focus-visible { outline: none; }
.c11-bcell.hint .c11-ring { stroke: var(--gold); stroke-dasharray: 12 8; }
.c11-bcell.picked .c11-ring { stroke: #69db7c; }
.c11-bcell.c11-wrong .c11-body { fill: #ff8a8a; }

.c11-q { display: flex; flex-direction: column; align-items: center; gap: .3em; }
.c11-q p { margin: 0; }
.c11-graph { display: block; width: min(100%, 420px); height: auto; }
.options .chip-btn.hint, .match .chip-btn.hint { box-shadow: 0 0 0 3px var(--gold); }

.c11-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: max(10px, 1.6cqw);
  width: 100%;
  align-items: start;
}
.c11-left { display: flex; flex-direction: column; gap: 6px; }
.c11-town { width: 100%; border-radius: .8em; overflow: hidden; background: #0d1730; }
.c11-town svg { display: block; width: 100%; height: auto; }
.c11-left .sim-legend { font-size: .8em; gap: 4px 12px; }
.c11-ring-key { background: transparent !important; border: 2px solid var(--gold); border-radius: 50% !important; }
.c11-controls { display: flex; flex-direction: column; gap: 6px; }
.c11-slider { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 8px; }
.c11-slider input { width: 100%; accent-color: var(--gold); }
.c11-slider input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.c11-slider input.hint { outline: 3px dashed var(--gold); outline-offset: 3px; }
.c11-cov { grid-column: 1 / -1; font-weight: 800; color: #ffe7a8; }
.c11-actions { justify-content: flex-start; }
.c11-controls .lab-readout { margin: 0; font-size: .85em; font-weight: 700; color: #cfd9ef; }
.c11-goals { justify-content: flex-start; }
.c11-goals li { font-size: .8em; }
.c11-runs { margin: 0; padding-left: 1.2em; font-size: .8em; color: #c9f7d4; display: grid; gap: .15em; }
.c11-runs:empty { display: none; }

@container (max-width: 620px) {
  .c11-grid { grid-template-columns: 1fr; }
  .c11-pic { width: 100%; }
}