/* bmm model explorer: widget layout and plot styling. Colours: Okabe-Ito. */
:root {
  --ex-blue: #0072B2; --ex-orange: #D55E00; --ex-green: #009E73;
  --ex-purple: #CC79A7; --ex-sky: #56B4E9; --ex-yellow: #E69F00;
  --ex-grey: #595959; --ex-border: #d0d7de; --ex-bg: #f6f8fa;
  /* The mark colours above are for lines and bars (3:1 on white, most of them); text in the same hue needs 4.5:1. */
  --ex-orange-text: #b04a00; --ex-green-text: #007353; --ex-purple-text: #9b4475; --ex-yellow-text: #7a5500; --ex-sky-text: #1f6f9f;
  --ex-focus: #0b2f66;
}
.ex-widget { border: 1px solid var(--ex-border); border-radius: 10px; padding: 1rem; margin: 1rem 0 1.5rem; }
.ex-controls { display: grid; grid-template-columns: max-content 1fr 6.5em; gap: 0.5rem 0.8rem; align-items: center; }
.ex-controls input[type="range"], .ex-controls input[type="number"] { width: 100%; }
.ex-controls .ex-hint { grid-column: 1 / -1; font-size: 0.85em; color: #5a6470; }
.ex-options { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 0.6rem 0 0.2rem; font-size: 0.95em; }
.ex-widget svg { width: 100%; height: auto; display: block; }
.ex-widget svg .grid { stroke: #e3e3e3; stroke-width: 1.5; }
.ex-widget svg .grid-x { stroke: #f0f0f0; }
.ex-widget svg .tick { font-size: 18px; fill: #555; }
.ex-widget svg .axis-label { font-size: 20px; fill: #222; }
.ex-widget svg .bar { fill-opacity: 0.9; }
.ex-legend { font-size: 0.85em; color: #5a6470; margin-top: 0.3rem; }
.ex-legend .blue { color: var(--ex-blue); font-weight: 600; }
.ex-legend .orange { color: var(--ex-orange-text); font-weight: 600; }
.ex-legend .green { color: var(--ex-green-text); font-weight: 600; }
.ex-legend .grey { color: var(--ex-grey); font-weight: 600; }
.ex-legend .purple { color: var(--ex-purple-text); font-weight: 600; }
.ex-legend .yellow { color: var(--ex-yellow-text); font-weight: 600; }
.ex-legend .sky { color: var(--ex-sky-text); font-weight: 600; }
.ex-legend button { margin-left: 0.6rem; }
.ex-code { background: var(--ex-bg); border-radius: 8px; padding: 0.6rem 0.9rem; font-family: var(--bs-font-monospace, monospace); font-size: 0.9em; white-space: pre-wrap; }
.ex-task { background: #fff; border: 1px dashed var(--ex-border); border-radius: 10px; padding: 0.6rem; }
/* Dashboard: the task and its settings on top, parameters and predictions below, one screen. */
.ex-dash { display: grid; gap: 0.8rem; margin: 0.5rem 0 2rem;
  grid-template-columns: minmax(270px, 0.8fr) 1fr 1fr;
  grid-template-areas: "controls task task" "controls bars across"; }
.ex-p-controls { grid-area: controls; display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.ex-panel { border: 1px solid var(--ex-border); border-radius: 10px; padding: 0.4rem 0.7rem; min-width: 0; }
.ex-panel-title { font-weight: 600; font-size: 0.95em; margin-bottom: 0.15rem; }
.ex-p-task { grid-area: task; }
.ex-p-bars { grid-area: bars; } .ex-p-across { grid-area: across; }
.ex-dash svg { width: 100%; height: auto; max-height: 24vh; display: block; margin: 0 auto; }
.ex-dash .ex-controls { grid-template-columns: 1fr 4.8em; gap: 0.1rem 0.6rem; font-size: 0.92em; }
.ex-dash .ex-controls label { grid-column: 1 / -1; margin-top: 0; font-size: 0.92em; line-height: 1.15; }
/* Task-setting counts on one line each: the task drawing names what each count is. */
.ex-dash .ex-controls.ex-inline { grid-template-columns: max-content 1fr 3.8em; gap: 0.2rem 0.5rem; }
.ex-dash .ex-controls.ex-inline label { grid-column: auto; margin: 0; }
/* A choice that belongs to a panel as a whole (the task version) sits in its title row. */
.ex-title-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.ex-title-row .ex-options { font-weight: 400; margin: 0; }
/* A dashboard page trades the large title block for screen height; the sidebar already shows the path. */
body:has(.ex-dash) .quarto-title-breadcrumbs { display: none !important; }
body:has(.ex-dash) #title-block-header { margin-bottom: 0.6rem; }
body:has(.ex-dash) #title-block-header h1.title { font-size: 1.6rem; margin-bottom: 0.1rem; }
body:has(.ex-dash) #title-block-header .subtitle { font-size: 1rem; padding-top: 0; }
.ex-dash .ex-options { margin-top: 0; gap: 0.6rem; flex-wrap: nowrap; }
.ex-dash .ex-legend { font-size: 0.8em; }
.ex-dash .grid { stroke: #e3e3e3; stroke-width: 1.5; }
.ex-dash .grid-x { stroke: #f0f0f0; }
.ex-dash .tick { font-size: 18px; fill: #555; }
.ex-dash .axis-label { font-size: 20px; fill: #222; }
.ex-dash .task-note { font-size: 19px; fill: #5a6472; }
.ex-dash .task-letter { font-size: 26px; font-weight: 600; }
.ex-dash .task-bin { font-size: 21px; font-weight: 700; }
.ex-panel > .btn { margin-top: 0.4rem; }
#m3-reset, #mpt-reset { margin-top: 0.25rem; }
/* Out-of-range input: the box is outlined and the outputs fade, so old results are not read as new. */
.ex-invalid { outline: 2px solid var(--ex-orange); outline-offset: 1px; }
/* Stale: the drawings fade; text keeps its contrast (a faded line of text fails 4.5:1) and is marked instead. */
.ex-dash.ex-stale > section svg { opacity: 0.3; }
.ex-stale:not(.ex-dash) { color: #5a6470; font-style: italic; outline: 2px dashed var(--ex-orange); outline-offset: 2px; }
@media (max-width: 1100px) {
  .ex-dash { grid-template-columns: 1fr 1fr; grid-template-areas: "task task" "controls controls" "bars across"; }
  .ex-p-controls { flex-direction: row; } .ex-p-controls > .ex-panel { flex: 1; }
}
@media (max-width: 640px) {
  .ex-dash { grid-template-columns: 1fr; grid-template-areas: "task" "controls" "bars" "across"; }
  .ex-p-controls { flex-direction: column; }
  .ex-dash svg { max-height: none; }
}
@media (max-width: 600px) {
  .ex-controls { grid-template-columns: 1fr 5.5em; }
  .ex-controls label { grid-column: 1 / -1; }
}
/* M3 complex span: smaller distractor tiles and labels, five bar categories. */
.ex-dash .task-dist { font-size: 22px; }
.ex-dash .task-bin-sm { font-size: 18px; }
#m3-bars.m3-five .tick { font-size: 15px; }
/* MPT tree: state labels under the nodes, branch values on the edges, categories at the leaves. */
.ex-dash .tree-state { font-size: 20px; fill: #5a6472; }
.ex-dash .tree-edge { font-size: 20px; fill: #222; paint-order: stroke; stroke: #fff; stroke-width: 5px; }
.ex-dash .tree-leaf { font-size: 22px; font-weight: 700; }
/* Circular pages: the display and the colour wheel side by side in the task panel. */
.ex-task-pair { display: grid; grid-template-columns: 1fr 1fr minmax(250px, 1.2fr); gap: 0.6rem; align-items: start; }
.ex-dash .ex-task-pair svg { max-height: 23vh; }
@media (max-width: 640px) { .ex-task-pair { grid-template-columns: 1fr 1fr; } .ex-task-pair > section { grid-column: 1 / -1; } }
.ex-buttons { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.2rem 0 0.2rem; }
.ex-task-pair .ex-buttons { gap: 0.3rem; }
.ex-task-pair .ex-buttons .btn { font-size: 0.8em; padding: 0.15rem 0.4rem; }
.ex-task-pair .ex-options { margin: 0; font-size: 0.9em; }
.ex-task-pair .ex-buttons { margin: 0.1rem 0 0; }
#imm-density { max-height: 22vh; }
.ex-dash .circ-window { fill: #009E73; fill-opacity: 0.08; }
.ex-dash .circ-mark { font-size: 18px; fill: #222; }
.ex-dash .imm-seg, .ex-dash .ex-seg { font-size: 18px; font-weight: 600; fill: #fff; }
.ex-dash .imm-seg-dim, .ex-dash .ex-seg-dim { fill: #222; }
#imm-wheel, #imm-display, #mix3-wheel { touch-action: none; user-select: none; }
.ex-task-pair .task-note { font-size: 26px; }
.ex-task-pair .task-bin { font-size: 26px; }
.ex-task-pair .imm-drag, .ex-task-pair .ex-drag { cursor: grab; }
.ex-task-pair .imm-drag:focus, .ex-task-pair .ex-drag:focus { outline: 3px solid #fff; outline-offset: 1px; stroke: #000; stroke-width: 6; }
/* A display formula wider than a phone screen scrolls in its own box instead of widening the page. */
mjx-container[display="true"] { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
/* Pages whose task has no settings: the wheel and a note instead of the display, settings and buttons. */
.ex-task-pair.ex-task-pair-2 { grid-template-columns: minmax(150px, 0.8fr) 2fr; }
/* Narrow screens: the note goes below the wheel, so the wheel gets the full row; a width cap instead
   of the height cap keeps its box the size of the drawing. */
/* A stacked tablet window: the wheel column alone is about 200 px, where its notes and bin numbers render near 11 px
   and the longest note already spans the drawing, so the column widens instead of the text growing. */
@media (min-width: 641px) and (max-width: 1000px) { .ex-task-pair.ex-task-pair-2 { grid-template-columns: minmax(150px, 1fr) 1.5fr; } }
@media (max-width: 640px) {
  .ex-task-pair.ex-task-pair-2 { grid-template-columns: 1fr; }
  .ex-dash .ex-task-pair-2 svg { max-height: none; max-width: 20rem; }
}
.ex-note { font-size: 0.9em; color: #5a6470; margin: 0.2rem 0; }
.ex-readout { font-size: 0.85em; margin-top: 0.4rem; }
/* A radio row in the narrow parameters panel wraps between options, not inside them. */
.ex-p-controls .ex-options { flex-wrap: wrap; gap: 0.1rem 0.8rem; font-size: 0.92em; }
.ex-p-controls .ex-options label { white-space: nowrap; }
/* A hint under a control group inside a panel, outside .ex-controls (the SDM parametrization note). */
.ex-panel > .ex-hint { font-size: 0.85em; color: #5a6470; }
/* Signal detection pages: the distribution choice in the parameters' title row, notes and draggable
   boundaries on the evidence axis. */
.ex-select { font-weight: 400; font-size: 0.92em; display: flex; gap: 0.4rem; align-items: center; margin: 0; }
.ex-select select { font-size: 0.95em; padding: 0 0.2rem; }
.ex-dash .sdt-note { font-size: 19px; font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: 5px; }
.ex-dash .sdt-line-label { font-size: 19px; fill: #222; }
.ex-dash .sdt-drag { cursor: ew-resize; }
.ex-dash .sdt-drag:focus { outline: none; fill: var(--ex-focus); fill-opacity: 0.12; stroke: var(--ex-focus); stroke-width: 3; }
#sdtyn-latent, #sdtrating-latent, #sdtmafc-latent { touch-action: none; user-select: none; }
/* m-AFC: the trial's tiles beside the evidence densities. */
.sdt-task-pair { display: grid; grid-template-columns: 0.63fr 1fr; gap: 0.6rem; align-items: center; }
.ex-dash .sdt-task-pair svg { max-height: 23vh; }
#sdtmafc-latent .tick { font-size: 20px; }
/* Both m-AFC drawings render at about 0.59 of their units on a portrait tablet: 19 px notes came out at 11.3 px. */
#sdtmafc-latent .sdt-note, #sdtmafc-tiles .sdt-note, #sdtmafc-tiles .task-note { font-size: 21px; }
@media (max-width: 640px) { .sdt-task-pair { grid-template-columns: 1fr; } }
/* Rating thresholds: one inline row each below the other parameters. */
.ex-dash .sdt-thresholds { margin-top: 0.3rem; row-gap: 0.1rem; }
.ex-dash .sdt-thresholds input[type="number"] { padding-top: 0; padding-bottom: 0; }
/* Response-time pages: the non-decision band of the task drawing and the halo behind its labels. */
.ex-dash .rt-ndt { fill: #e9ecef; }
.ex-dash .rt-halo { paint-order: stroke; stroke: #fff; stroke-width: 7px; stroke-linejoin: round; }
/* Info notes: an (i) after a label opens a note that floats over the dashboard (js/lib/info.js), so opening
   one moves no panel. The label row keeps the label's grid place; a hidden row hides its button too. */
.ex-dash { position: relative; }
.ex-label { display: flex; align-items: center; gap: 0.35rem; grid-column: 1 / -1; }
.ex-label[hidden] { display: none; }
.ex-label label { margin: 0; }
.ex-dash .ex-controls.ex-inline .ex-label { grid-column: auto; }
.ex-info { flex: none; width: 1.1rem; height: 1.1rem; padding: 0; border: 1px solid #8a939d; border-radius: 50%;
  background: #fff; color: #4a535c; font: italic 700 0.7rem/1 Georgia, serif; cursor: pointer; }
.ex-info:hover, .ex-info[aria-expanded="true"] { background: var(--ex-blue); border-color: var(--ex-blue); color: #fff; }
.ex-info-pop { position: absolute; z-index: 30; width: max-content; max-width: min(21rem, calc(100vw - 16px));
  background: #fff; border: 1px solid var(--ex-border); border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  padding: 0.45rem 0.65rem; font-size: 0.82rem; font-weight: 400; line-height: 1.38; color: #222; text-align: left; }
.ex-dash > section:has(.ex-info-pop:not([hidden])) { position: relative; z-index: 31; }
.ex-info-pop p { margin: 0; }
.ex-info-pop p + p { margin-top: 0.35rem; }
/* Simulated data: the switch in the prediction panel's title row, the histogram behind the curves. */
.ex-title-row:has(.ex-sim) { flex-wrap: wrap; row-gap: 0.15rem; }
.ex-sim { font-weight: 400; font-size: 0.85em; gap: 0.3rem; margin-left: auto; }
.ex-sim label { white-space: nowrap; }
.ex-sim select { font-size: 0.95em; padding: 0 0.15rem; }
.ex-sim .btn { font-size: 0.9em; padding: 0 0.35rem; }
.ex-dash .sim-bar { fill: var(--ex-grey); fill-opacity: 0.2; stroke: #7f7f7f; stroke-width: 1; }
.ex-sim-text { color: #222; }

/* Accessibility. Keyboard focus is a 3 px ring in a dark blue (13:1 on white) on every control; the draggable parts of
   the drawings have their own marks above, because an outline does not follow an svg shape. */
/* :is() takes the specificity of .btn, so this beats Bootstrap's own .btn:focus-visible (outline: 0, a pale glow) by coming later. */
:is(a, button, input, select, textarea, summary, [tabindex], .btn):focus-visible { outline: 3px solid var(--ex-focus); outline-offset: 2px; box-shadow: none; }
.ex-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* A link set in code: Bootstrap's link blue on the code background is 4.0:1, the text rule asks for 4.5. */
a > code { color: #0a58ca; }
/* Touch: every control is a 44 px target on a coarse pointer or a tablet-width window. The visible slider thumb stays 24 px;
   its transparent border carries the rest of the target. The (i) button grows its hit area, not its size, and the area
   stays clear of every other control and label: margins beside the button, and a 44 px label row above a stacked slider
   with the slack on top, so the label stays next to its own slider. */
@media (pointer: coarse), (max-width: 1100px) {
  .ex-dash input[type="range"] { -webkit-appearance: none; appearance: none; height: 44px; background: transparent; margin: 0; }
  .ex-dash input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: #7c8793; }
  .ex-dash input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: #7c8793; }
  .ex-dash input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 44px; height: 44px; margin-top: -19px;
    border: 10px solid transparent; border-radius: 50%; background: var(--ex-blue); background-clip: padding-box; }
  .ex-dash input[type="range"]::-moz-range-thumb { box-sizing: content-box; width: 24px; height: 24px;
    border: 10px solid transparent; border-radius: 50%; background: var(--ex-blue); background-clip: padding-box; }
  .ex-dash input[type="number"], .ex-dash select, .ex-dash .btn { min-height: 44px; }
  .ex-dash .ex-options label, .ex-dash .ex-sim label, .ex-dash .ex-select, .ex-dash .ex-legend label {
    display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; }
  .ex-dash input[type="radio"], .ex-dash input[type="checkbox"] { width: 1.3rem; height: 1.3rem; margin: 0; }
  .ex-info { position: relative; margin: 0 6px 0 8px; }
  .ex-info::after { content: ""; position: absolute; left: calc(50% - 22px); top: calc(50% - 22px); width: 44px; height: 44px; }
  .ex-dash .ex-controls:not(.ex-inline) > .ex-label { min-height: 44px; padding-top: calc(44px - 1.1rem); }
  .ex-dash .ex-controls:not(.ex-inline) > .ex-label .ex-info::after { top: auto; bottom: 0; }
}
/* Tablet width: the panels stack from 1100 px (the docked sidebar leaves about 760 px of a 1024 px window, so three columns
   would draw every plot at under half size). The page scrolls here, so the one-screen height caps go and the plots keep their
   size: axis text stays above 11 px. */
@media (max-width: 1100px) {
  .ex-dash svg, .ex-dash .ex-task-pair svg, .ex-dash .sdt-task-pair svg, #imm-density { max-height: none; }
}

/* Landing page model map: a nested list (task, then its models) that stays a plain list for screen readers
   and below tablet width. At 768 px and wider the tasks sit side by side as cards and the models of one task
   hang on a line; each model after the first names a model above it and what it adds or does differently.
   Colour only decorates; every line says what it is. */
.model-map > ul { list-style: none; margin: 0.5rem 0 2rem; padding: 0; }
.model-map > ul > li { margin: 0 0 1.2rem; font-weight: 600; }
.model-map > ul > li > ul { list-style: none; margin: 0.4rem 0 0; padding: 0; font-weight: 400; }
.model-map > ul > li > ul > li { margin: 0.35rem 0; }
.model-map code { white-space: nowrap; }
.model-map a code { padding-right: 0; }
@media (min-width: 768px) {
  .model-map > ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
  .model-map > ul > li { margin: 0; padding: 0.7rem 0.9rem 0.8rem; border: 1px solid var(--ex-border);
    border-top: 4px solid var(--map-accent, var(--ex-grey)); border-radius: 10px; }
  .model-map > ul > li:nth-child(1) { --map-accent: var(--ex-blue); }
  .model-map > ul > li:nth-child(2) { --map-accent: var(--ex-orange); }
  .model-map > ul > li:nth-child(3) { --map-accent: var(--ex-green); }
  .model-map > ul > li:nth-child(4) { --map-accent: var(--ex-purple); }
  .model-map > ul > li > ul { margin-left: 0.5rem; padding-left: 0.9rem; border-left: 2px solid var(--map-accent); }
  .model-map > ul > li > ul > li { position: relative; margin: 0.7rem 0; line-height: 1.35; }
  .model-map > ul > li > ul > li::before { content: ""; position: absolute; left: calc(-0.9rem - 5px); top: 0.45em;
    width: 8px; height: 8px; border-radius: 50%; background: var(--map-accent); }
}