/* StatLens Design System — IMS visual identity */

:root {
  /* IMSCOL palette */
  --ims-blue: #569BBD;
  --ims-blue-text: #3A7CA5;        /* 4.56:1 on white — for body-size text, links, buttons */
  --ims-green: #114B5F;
  --ims-pink: #D89A9E;
  --ims-pink-dark: #B5747A;        /* 3.66:1 on white — for graphical elements (SE CI bounds) */
  --ims-yellow: #F4DC00;
  --highlight-orange: #E07020;
  --highlight-orange-dark: #C05E10; /* 4.33:1 white-on — for button text */
  --ims-red: #F05133;
  --ims-gray: #808080;
  --ims-gray-text: #6B6B6B;        /* 5.33:1 on white — for body-size hint/label text */
  --ims-lgray: #D9D9D9;
  --ims-rose: #E97583;

  /* Semantic aliases */
  --accent: var(--ims-blue-text);   /* text-weight blue for links, buttons, interactive elements */
  --fg: #000;
  --bg: #fff;
  --surface: #f8f8f8;
  --border: var(--ims-lgray);
  --heading: var(--ims-blue);       /* large text (h1/h2) — 3.08:1 passes at ≥18pt */
  --observed-stat: #7B2D8E;
  --ci-bounds: var(--ims-pink-dark);
  --ci-bounds-se: var(--ims-pink-dark);
  --bar-fill: #569BBD80;

  /* Typography */
  --font-body: "Atkinson Hyperlegible", sans-serif;
  --font-mono: "Source Code Pro", monospace;
  --font-size-base: 16px;
  --font-size-chart: 15px;
}

/* ===== Reset & Base ===== */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
}

h1, h2, h3 {
  color: var(--heading);
  margin: 0 0 0.75rem;
}

h1 {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
h2 { font-size: 1.25rem; }

main {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem 1.5rem 3rem;
}

/* ===== Skip Links ===== */

.skip-links {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 1000;
}

.skip-links a {
  display: block;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

.skip-links a:focus {
  position: static;
  top: auto;
}

/* ===== Home Button (in header-actions) ===== */

.home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--font-body);
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
}

.home-btn:hover {
  background: var(--accent);
  color: #fff;
}

.home-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.home-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
}

.home-btn .home-text {
  display: none;
}

/* ===== Site Branding (upper right) ===== */

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  text-decoration: none;
  /* Full opacity + #595959: 0.7 opacity over #666 computed to ~2.8:1
     contrast, failing WCAG 1.4.3 on every page */
  color: #595959;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  transition: color 0.15s;
}

.site-brand:hover {
  color: var(--text, #1a1a1a);
}

.site-brand svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ===== Help Button ===== */

.help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: var(--font-body);
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
}

.help-btn:hover {
  background: var(--accent);
  color: #fff;
}

.help-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .help-btn, .settings-btn, .home-btn, .share-btn { width: 44px; height: 44px; font-size: 1.1rem; }
  .home-btn svg, .share-btn svg { width: 20px; height: 20px; }
  .site-brand { display: none; }
}

/* ===== Settings Button (gear) ===== */

.settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: var(--font-body);
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
}
.settings-btn:hover {
  background: var(--accent);
  color: #fff;
}
.settings-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  order: -1;
}

/* ===== Share Button & Dialog ===== */

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.share-btn:hover {
  background: var(--accent);
  color: #fff;
}
.share-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.share-dialog {
  max-width: 380px;
  width: 90vw;
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 1.25rem;
  font-family: var(--font-body);
}
.share-dialog::backdrop {
  background: rgba(0, 0, 0, 0.3);
}
.share-dialog h2 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  color: var(--ims-green);
}
.share-url-row {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.share-url-input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--fg);
  min-width: 0;
}
.share-copy-btn {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.share-copy-btn:hover {
  opacity: 0.9;
}
.share-qr-container {
  display: flex;
  justify-content: center;
  margin: 0.75rem 0;
}
.share-qr-container svg {
  max-width: 240px;
  height: auto;
}
.share-qr-loading, .share-qr-error {
  color: var(--ims-gray-text);
  font-size: 0.85rem;
  text-align: center;
}
.share-qr-error { color: var(--ims-red); }
.share-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}
.share-download-btn {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
}
.share-download-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}
.share-download-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.share-close-btn {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.8rem;
}
.share-close-btn:hover {
  background: var(--border);
}
.share-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
  margin-bottom: 0.5rem;
}
.share-toggle input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
}
.share-param-summary {
  margin-bottom: 0.75rem;
}
.share-param-table {
  width: 100%;
  font-size: 0.78rem;
  border-collapse: collapse;
}
.share-param-table td {
  padding: 0.15rem 0.4rem;
  border-bottom: 1px solid var(--border);
}
.share-param-key {
  color: var(--ims-gray-text);
  white-space: nowrap;
  width: 1%;
}
.share-param-val {
  font-family: var(--font-mono);
  color: var(--fg);
  word-break: break-all;
}
.share-param-hint {
  font-size: 0.8rem;
  color: var(--ims-gray-text);
  font-style: italic;
  margin: 0;
}

/* ===== Settings Dialog ===== */

#page-settings .setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
}
#page-settings .setting-row:last-child { border-bottom: none; }
#page-settings .setting-label {
  font-size: 0.9rem;
  font-weight: 600;
}
#page-settings .setting-hint {
  font-size: 0.75rem;
  color: #636363;
  margin: 0;
}
#page-settings select,
#page-settings input[type="number"] {
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 5rem;
  text-align: center;
}
#page-settings .reset-row {
  text-align: right;
  padding-top: 0.75rem;
}
#page-settings .reset-link {
  font-size: 0.8rem;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}

/* ===== Stepper Group (+/- buttons around number inputs) ===== */

.stepper-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.stepper-group input[type="number"] {
  border-radius: 0;
  -moz-appearance: textfield;
  text-align: center;
  width: 3.5rem;
  min-height: 32px;
}
.stepper-group input[type="number"]::-webkit-inner-spin-button,
.stepper-group input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.stepper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  font-size: 1.1rem;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}
.stepper-btn:first-child {
  border-radius: 4px 0 0 4px;
  border-right: none;
}
.stepper-btn:last-child {
  border-radius: 0 4px 4px 0;
  border-left: none;
}
.stepper-btn:hover {
  background: color-mix(in srgb, var(--accent) 15%, var(--bg));
}
.stepper-btn:active {
  background: color-mix(in srgb, var(--accent) 30%, var(--bg));
}
@media (max-width: 600px) {
  .stepper-btn {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.3rem;
  }
  .gen-btn, .play-btn, .reset-btn {
    min-height: 44px;
    min-width: 44px;
  }
  /* 44px touch targets for form controls and tabs */
  input[type="number"],
  select {
    min-height: 44px;
    font-size: 1rem;
  }
  [role="tab"] {
    min-height: 44px;
    padding: 0.5rem 0.75rem;
  }
  .btn-primary, .btn-secondary, .btn-sm {
    min-height: 44px;
  }
  .generate-bar .expert-toggle {
    flex-basis: 100%;
    text-align: right;
    order: 11;
  }
}


/* ===== Editable contingency table (js/table-editor.js) ===================
   Lived inline in inference/chisq until explore/categorical needed the same
   grid (REQ-065). Shared here so the two pages cannot drift apart. */
/* Table dimension controls */
.dim-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}
.dim-controls label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
    font-weight: 600;
}
.dim-controls input[type="number"] {
    width: 5rem;
}

/* Editable contingency table */
.input-table {
    border-collapse: collapse;
    margin-bottom: 1rem;
    width: 100%;
    max-width: 40rem;
}
.input-table th,
.input-table td {
    border: 1px solid var(--border, #ccc);
    padding: 0.3rem 0.4rem;
    text-align: center;
}
.input-table th {
    background: var(--bg-alt, #f5f5f5);
    font-weight: 600;
}
.input-table input[type="text"] {
    width: 6rem;
    text-align: center;
    border: 1px solid var(--border, #ccc);
    border-radius: 3px;
    padding: 0.2rem 0.3rem;
    font-family: inherit;
    font-size: 0.9rem;
}
.input-table input[type="number"] {
    width: 5rem;
    text-align: center;
    border: 1px solid var(--border, #ccc);
    border-radius: 3px;
    padding: 0.2rem 0.3rem;
    font-family: var(--font-mono, 'Source Code Pro', monospace);
    font-size: 0.9rem;
}
.input-table .corner-cell {
    background: transparent;
    border: none;
}

/* Variable-name inputs and the live totals band. Totals exist to catch
   transcription slips when copying a table out of a book, so they read as
   derived values rather than cells you can type in. */
.table-var-names { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 0.6rem; }
.table-var-names label { display: flex; flex-direction: column; gap: 0.15rem;
  font-size: 0.85rem; font-weight: 600; }
.table-var-names input { font-weight: 400; min-width: 9rem; }
.input-table .total-cell { text-align: center; font-variant-numeric: tabular-nums;
  color: var(--ims-gray-text); background: var(--bg-alt, #f5f5f5); font-weight: 600; }
.input-table .total-cell.grand { color: var(--text); }
.input-table .total-head { font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--ims-gray-text); }
.raw-csv-details { margin-top: 0.85rem; }
.raw-csv-details summary { cursor: pointer; }

/* A 4-column grid of 5-6rem inputs is wider than a phone. Scroll the grid
   inside its own box rather than letting the page scroll sideways, and shrink
   the cells so a 2x2 — the common case — needs no scrolling at all. */
#table-input-container { overflow-x: auto; }
@media (max-width: 600px) {
  .input-table input[type="text"] { width: 4.2rem; }
  .input-table input[type="number"] { width: 3.2rem; }
  .input-table th, .input-table td { padding: 0.2rem 0.25rem; }
  .table-var-names input { min-width: 7rem; }
}

/* ===== Help Dialog Content ===== */

dialog .help-intro {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--fg);
}

dialog h3 {
  margin: 1rem 0 0.3rem;
  font-size: 0.9rem;
}

/* Legacy breadcrumb (kept for compatibility) */

.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
  display: flex;
  gap: 0.25rem;
  font-size: 0.875rem;
}

.breadcrumb li + li::before {
  content: "›";
  margin-right: 0.25rem;
  color: var(--ims-gray);
}

.breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  text-decoration: underline;
}

/* ===== Controls / Fieldsets ===== */

fieldset {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
}

legend {
  font-weight: 700;
  color: var(--heading);
  padding: 0 0.25rem;
}

.control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}

label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
  font-weight: 600;
}

input[type="number"],
select {
  font-family: var(--font-mono);
  font-size: 1rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 8rem;
}

input[type="number"]:focus,
select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

input[aria-invalid="true"] {
  border-color: var(--ims-red);
}

.error-msg {
  color: var(--ims-red);
  font-size: 0.85rem;
  margin: 0.25rem 0 0;
}

/* Radio groups inline */
[role="radiogroup"],
.tail-select {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.tail-select legend {
  padding: 0;
  margin-bottom: 0.25rem;
}

[role="radiogroup"] label,
.tail-select label {
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  font-weight: 400;
  cursor: pointer;
}

/* Hypothesis display — fill-in-the-blank style */
.hypothesis-display {
  font-family: var(--font-mono, 'Source Code Pro', monospace);
  font-size: 1rem;
  line-height: 1.6;
  padding: 0.5rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  align-items: baseline;
}
.hypothesis-row {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.hypothesis-label {
  font-weight: 700;
  min-width: 2.2rem;
}
.hypothesis-display sub {
  font-size: 0.75em;
}
.hypothesis-display select {
  font-family: inherit;
  font-size: inherit;
  padding: 0.15rem 0.3rem;
  min-width: 0;
  width: auto;
}
/* Cycling toggle button for hypothesis direction (replaces <select>) */
.hyp-toggle {
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  min-width: 2rem;
  text-align: center;
  background: var(--surface, #f8f9fa);
  border: 1.5px solid var(--ims-blue, #569BBD);
  border-radius: 4px;
  color: var(--ims-dark, #114B5F);
  cursor: pointer;
  line-height: 1.4;
}
.hyp-toggle:hover {
  background: #e8f4f8;
}
.hyp-toggle:focus-visible {
  outline: 2px solid var(--ims-blue, #569BBD);
  outline-offset: 2px;
}
/* ── Confidence-level primary control (CI estimation pages) ───────── */
.ci-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.4rem 0;
}
.ci-primary > label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--ims-dark, #114B5F);
  margin: 0;
}
.ci-primary .conf-input-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
  font-weight: 700;
}
.ci-primary .conf-input-wrap input[type="number"] {
  width: 4.5rem;
  text-align: center;
  font-family: var(--font-mono, 'Source Code Pro', monospace);
  padding: 0.2rem 0.35rem;
}
/* Compact inline variant used on the bootstrap control rows (sits beside other
   controls rather than as a full-width block). */
.ci-primary-inline {
  padding: 0;
  gap: 0.4rem 0.75rem;
}
.ci-primary-inline > label {
  font-size: 0.9rem;
  font-weight: 600;
}
/* Percentile / ±SE / Both — the CI method drives the whole bootstrap page, so the
   toggle lives with the confidence level rather than down in the results box. */
.ci-method-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.ci-method-label {
  font-size: 0.9rem;
  font-weight: 600;
}
.ci-method-row .seg-control { margin: 0; }

/* Legend under the chart in Both mode. */
.chart-legend {
  text-align: center;
  margin: 0.25rem 0 0;
}
.chart-legend .key {
  font-family: var(--font-mono, 'Source Code Pro', monospace);
  font-weight: 700;
  letter-spacing: -0.05em;
}
.chart-legend .key-pct { color: #B5747A; }
.chart-legend .key-se { color: var(--ims-dark, #114B5F); }

.conf-pills {
  display: inline-flex;
  gap: 0.35rem;
}
.conf-pills button {
  font-family: var(--font-mono, 'Source Code Pro', monospace);
  font-size: 0.95rem;
  padding: 0.2rem 0.7rem;
  background: var(--surface, #f8f9fa);
  border: 1.5px solid var(--ims-blue, #569BBD);
  border-radius: 999px;
  color: var(--ims-dark, #114B5F);
  cursor: pointer;
}
.conf-pills button:hover {
  background: #e8f4f8;
}
.conf-pills button[aria-pressed="true"] {
  /* Dark IMS teal (not #569BBD) so white text clears WCAG AA 4.5:1 contrast. */
  background: var(--ims-dark, #114B5F);
  border-color: var(--ims-dark, #114B5F);
  color: #fff;
}
.conf-pills button:focus-visible {
  outline: 2px solid var(--ims-blue, #569BBD);
  outline-offset: 2px;
}
.ci-primary .hint {
  color: var(--muted, #555);
  font-style: italic;
}

.ci-result-headline {
  text-align: center;
  margin: 0.5rem 0;
}
.ci-result-headline .ci-bounds {
  font-family: var(--font-mono, 'Source Code Pro', monospace);
  font-size: 1.35rem;
  font-weight: 700;
  color: #2e7d32;
}
@media (max-width: 480px) {
  .conf-pills button {
    min-height: 44px;
    padding: 0.3rem 0.9rem;
  }
  .ci-primary .conf-input-wrap input[type="number"] {
    min-height: 44px;
  }
  .hypothesis-row {
    white-space: normal;
    flex-wrap: wrap;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .hypothesis-display {
    overflow-x: auto;
    font-size: 0.85rem;
  }
  .hyp-toggle {
    min-height: 44px;
    min-width: 44px;
    padding: 0.3rem 0.6rem;
    font-size: 1.1rem;
  }
  .hypothesis-display input[type="number"] {
    min-height: 44px;
    padding: 0.3rem 0.4rem;
  }
  .seg-control {
    font-size: 0.85rem;
  }
  .seg-control button {
    padding: 0.3rem 0.6rem;
    min-height: 44px;
  }
  .expert-toggle {
    font-size: 0.9rem;
    padding: 0.3rem 0;
  }
}
.hypothesis-display input[type="number"] {
  font-family: inherit;
  font-size: inherit;
  padding: 0.15rem 0.3rem;
  width: 4.5rem;
  text-align: center;
}
.null-value-mirror {
  font-weight: 600;
}
/* Confidence level alongside hypotheses */
.controls-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: baseline;
}
.controls-row > label {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}
.controls-row input[type="number"],
.controls-row select {
  width: auto;
  min-width: 5rem;
}

/* Summary stat inputs (one-proportion test) */
.summary-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}
.summary-inputs label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-weight: 400;
}
.summary-inputs input[type="number"] {
  width: 8rem;
}
.input-narrow {
  width: 5rem;
  font-family: var(--font-mono, 'Source Code Pro', monospace);
  font-size: 0.95rem;
  padding: 0.15rem 0.4rem;
}
.btn-primary {
  background: var(--accent, #569BBD);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.btn-primary:hover {
  background: var(--ims-dark, #114B5F);
}

/* Group order display (two-sample bootstrap) */
.group-order {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

/* Success outcome selector & variable selector */
#success-selector,
.var-selector-row {
  margin-top: 0.5rem;
  padding: 0.25rem 0;
}
#success-selector label,
.var-selector-row label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-direction: row;
  font-weight: 400;
}
#success-selector select,
.var-selector-row select {
  font-size: 0.9rem;
  width: auto;
  min-width: 5.5rem;
  max-width: 100%;
}

/* ===== Button Row ===== */

.btn-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.btn-secondary {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.375rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--ims-gray-text);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-sm {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
}

/* ===== Tab Panels ===== */

[role="tablist"] {
  display: flex;
  /* Four data-source tabs no longer fit a 375px phone on one line (the fourth
     is "Open URL"), and a tab that overflows the viewport is a tab students
     cannot reach — so wrap rather than scroll. */
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 0.75rem;
}

[role="tab"] {
  padding: 0.4rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ims-gray-text);
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
}

[role="tab"]:hover {
  color: var(--accent);
}

[role="tab"][aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ===== Hints ===== */

.hint {
  font-size: 0.85rem;
  color: var(--ims-gray-text);
  margin: 0.5rem 0;
}

.placeholder {
  color: var(--ims-gray-text);
}

/* ===== Dataset Selector ===== */

#dataset-select {
  width: 100%;
  max-width: 20rem;
}

/* ===== Seed Notice (only visible for graded/URL-seeded sessions) ===== */

.seed-notice {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--ims-gray-text);
  margin: 0;
  padding: 0.2rem 0.5rem;
  background: var(--surface);
  border-radius: 3px;
  border: 1px solid var(--border);
}

/* ===== Generate Bar ===== */

.generate-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 0.5rem 0;
}

.gen-btn {
  padding: 0.4rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  border: 1px solid var(--accent);
  border-radius: 5px;
  background: var(--bg);
  color: var(--accent);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.gen-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ims-gray-text);
  align-self: center;
}

.gen-btn:hover:not(:disabled),
.gen-btn:focus-visible:not(:disabled) {
  background: var(--accent);
  color: #fff;
}

.gen-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Reset button: icon-only (↺), same style as play button */
.reset-btn {
  padding: 0.4rem 0.6rem;
  font-size: 1.1rem;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  color: var(--ims-gray-text);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  line-height: 1;
}

.reset-btn:hover:not(:disabled),
.reset-btn:focus-visible:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.play-btn {
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  font-weight: 700;
  border: 1px solid var(--accent);
  border-radius: 5px;
  background: var(--bg);
  color: var(--accent);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  line-height: 1;
}

.play-btn:hover:not(:disabled),
.play-btn:focus-visible:not(:disabled) {
  background: var(--accent);
  color: #fff;
}

.play-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.play-btn[aria-pressed="true"] {
  background: var(--highlight-orange-dark);
  border-color: var(--highlight-orange-dark);
  color: #fff;
}

.play-btn[aria-pressed="true"]:hover,
.play-btn[aria-pressed="true"]:focus-visible {
  background: #a85010;
  border-color: #a85010;
}

/* ===== Mechanism Strip ===== */

.mechanism-strip {
  position: relative;
  margin: 0.75rem 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
}

/* Collapse toggle for mechanism strip.
   On desktop it floats into the top-right corner (over the empty space beside
   the column titles) so it doesn't consume its own row. On mobile it stays a
   normal row to avoid overlapping the reflowed content. */
.mechanism-collapse-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.25rem;
}
@media (min-width: 600px) {
  .mechanism-collapse-bar {
    position: absolute;
    top: 0.3rem;
    right: 0.5rem;
    margin: 0;
    z-index: 1;
  }
}

/* Mechanism column subtitle (e.g. "· same values, new grouping") — rides on the
   column title instead of a separate caption row. */
.mechanism-subtitle {
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--ims-gray-text);
}

.mechanism-collapse-btn {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: var(--ims-gray-text);
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
}

.mechanism-collapse-btn:hover {
  color: var(--accent);
  background: var(--bg);
}

.mechanism-collapse-btn::before {
  content: '▾ ';
}

.mechanism-strip.collapsed .mechanism-collapse-btn::before {
  content: '▸ ';
}

.mechanism-strip.collapsed .mechanism-panels,
.mechanism-strip.collapsed .mechanism-desc {
  display: none;
}

/* Compact summary visible only when collapsed — animation source for dot drop */
.mechanism-collapsed-summary {
  display: none;
  font-size: 0.8rem;
  font-family: var(--font-mono);
  color: var(--ims-green);
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
  text-align: center;
}
.mechanism-strip.collapsed .mechanism-collapsed-summary {
  display: block;
}

.mechanism-panels {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.mechanism-panel {
  flex: 1;
  min-width: 0;
  position: relative;
}

.mechanism-title {
  font-size: 0.85rem;
  margin: 0 0 0.25rem;
  color: var(--ims-gray-text);
  font-weight: 600;
}

.mechanism-title-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

/* Observed ↔ Null view toggle: floated to the panel's top-right so it doesn't
   push the dotplot down (keeps the observed + resample plots vertically aligned). */
.mech-null-toggle { position: absolute; top: 0; right: 0; margin: 0; z-index: 2; }
/* Summary|Dotplot toggle lives in a full-width bottom bar next to the mechanism
   caption, so it reads as applying to the whole mechanism (not just the right
   plot). Keeping it out of the panels also top-aligns the two panels' cards. */
.mech-bottom-bar {
  display: flex; align-items: center; gap: 12px;
  margin-top: 6px;
}
.mech-bottom-bar .mechanism-desc { flex: 1; margin: 0; text-align: center; }
.mech-bottom-bar .mechanism-desc[hidden] { display: none; }
.mech-view-toggle,
.mech-bottom-bar .seg-control { margin: 0; flex: none; font-size: 0.78rem; }
.mech-view-toggle button,
.mech-bottom-bar .seg-control button { padding: 3px 9px; }
@media (max-width: 560px) {
  .mech-bottom-bar { flex-direction: column; gap: 6px; }
}

/* ===== One-proportion bootstrap mechanism (B2): bag + resample ===== */
/* CVD-safe Okabe-Ito: success = amber (hatched), failure = blue. */
.pbm-success { background-color: #C08700;
  background-image: repeating-linear-gradient(45deg, #7D5800 0, #7D5800 1.5px, transparent 1.5px, transparent 6px); }
.pbm-failure { background-color: #0072B2; }

.pbm-grid { display: grid; gap: 2px; justify-content: center; margin: 0.3rem auto; }
.pbm-marble { width: var(--pbm-marble, 14px); height: var(--pbm-marble, 14px);
  border-radius: 3px; box-sizing: border-box; }
/* Empty resample slot: outline only, filled as marbles fly in */
.pbm-empty { background: none; border: 1.5px dashed #b9c6cc; }

/* Proportion-bar style: a row of n full-height cells (successes left, failures
   right), built one draw at a time. Cells are contiguous (no gap) so filled
   same-colour runs read as one solid bar; empty cells show the gray track. */
.pbm-fillbar { display: flex; gap: 0; height: 40px; max-width: 340px;
  margin: 0.4rem auto; border: 1px solid #b9c6cc; border-radius: 5px; overflow: hidden;
  background: #eef2f4; }
.pbm-cell { flex: 1 1 0; min-width: 0; height: 100%; }
.pbm-cell.pbm-empty { background: none; }

/* Two-proportion bootstrap (B4): two stacked groups, each its own bag/resample */
.pbm-twogroup { display: flex; flex-direction: column; gap: 0.5rem; }
.pbm-group { display: flex; flex-direction: column; }

/* Pulse a source cell when it's drawn */
.pbm-pulse { animation: pbm-pulse 300ms ease; box-shadow: 0 0 0 2px #1A1A1A; }
@keyframes pbm-pulse { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* Flying clone during a draw */
.pbm-flyer { position: absolute; width: 11px; height: 11px; border-radius: 3px;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 30; }

/* Segmented control for resample view toggle */
.seg-control {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  font-size: 0.8rem;
}

.seg-control button {
  background: var(--bg);
  border: none;
  border-right: 1px solid var(--border);
  padding: 0.15rem 0.45rem;
  font-size: inherit;
  font-family: inherit;
  color: var(--fg);
  cursor: pointer;
  line-height: 1.3;
}

.seg-control button:last-child {
  border-right: none;
}

.seg-control button[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
}

.seg-control button:hover:not([aria-pressed="true"]) {
  background: var(--surface);
}

/* A method that doesn't apply to the current statistic (e.g. the ±SE / Both
   normal approximation under a median) is disabled, not hidden — the tooltip
   explains why. Disabled controls are exempt from WCAG contrast minimums. */
.seg-control button:disabled,
.seg-control button:disabled:hover {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--bg);
}

/* The "Show theoretical curve" toggle is the same normal approximation, so it
   dims alongside the buttons for non-mean statistics. */
.theory-toggle.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mechanism-arrow {
  flex-shrink: 0;
  font-size: 1.4rem;
  color: var(--ims-gray-text);
  align-self: center;
  padding: 0 0.15rem;
  line-height: 1;
}

.mechanism-stat {
  font-size: 0.8rem;
  font-family: var(--font-mono);
  color: var(--ims-green);
  margin: 0.25rem 0 0;
  font-weight: 600;
  text-align: center;
}

/* Persistent highlight for resample statistic — stays orange until next +1 or reset */
.highlight-last.mech-stat-value,
#resample-mean.highlight-last,
#mech-shuffled-chisq.highlight-last,
#mech-shuffled-r.highlight-last,
#mech-resample-slope.highlight-last,
.mechanism-collapsed-summary .highlight-last {
  color: var(--highlight-orange);
  font-weight: 700;
}

/* Mini boxplot in mechanism strip */
.mech-minibox {
  display: block;
  margin: 4px 0;
  max-width: 100%;
  height: auto;
}

.mechanism-desc {
  font-size: 0.8rem;
  color: var(--ims-gray-text);
  margin: 0.35rem 0 0;
  font-style: italic;
  text-align: center;
}

/* Encoded-null note under the shuffle mechanism (randomization tools) */
.mechanism-null {
  font-size: 0.8rem;
  color: var(--ims-gray-text);
  margin: 0.5rem auto 0;
  max-width: 46rem;
  text-align: center;
  line-height: 1.4;
}
.mechanism-strip.collapsed .mechanism-null {
  display: none;
}

/* Card mechanism (?mechanism=cards) — dealt cards in the two-group strip */
.mech-card-display {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 60px;
}
.mech-card-display .card-group { flex: 0 1 auto; max-width: 48%; }
/* Subtle divider between the two sample groups so they read as distinct. */
.mech-card-display .card-group + .card-group {
  border-left: 1px solid var(--border, #ccc);
  padding-left: 1rem;
}
.mech-card-display .card-group h3 {
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 0.35rem;
  color: var(--ims-dark, #114B5F);
}
.mech-card-count { font-weight: 400; color: #595959; }
.mech-card-display .cards {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
}
.mech-card-display .card {
  width: 15px;
  height: 19px;
  border-radius: 2px;
  border: 1px solid #999;
}
/* Filled = success, outline = failure → distinct by fill, not colour alone */
.mech-card-display .card.is-success { background: var(--ims-red, #F05133); }
.mech-card-display .card.is-failure { background: #f5f5f5; border-color: #ccc; }
.mech-card-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.75rem;
  font-size: 0.8rem;
}
.mech-card-swatch {
  display: inline-block;
  width: 12px;
  height: 15px;
  border-radius: 2px;
  border: 1px solid #999;
  vertical-align: middle;
  margin-left: 0.5rem;
}
.mech-card-swatch.is-success { background: var(--ims-red, #F05133); }
.mech-card-swatch.is-failure { background: #f5f5f5; border-color: #ccc; }
@media (prefers-reduced-motion: reduce) {
  .mech-card-display .card { transition: none !important; }
}

/* Small-screen notice suggesting the desktop version (suggestDesktop) */
.desktop-suggest {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--ims-blue, #569BBD);
  border-left-width: 4px;
  border-radius: 6px;
  background: #eef5fa;
}
.desktop-suggest p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text, #1a1a1a);
  flex: 1;
}
.desktop-suggest-dismiss {
  min-height: 44px;
  min-width: 44px;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--ims-dark, #114B5F);
  border-radius: 6px;
  background: #fff;
  color: var(--ims-dark, #114B5F);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.desktop-suggest-dismiss:hover { background: #f0f7ff; }

/* Observed statistic highlight — matches chart overlay line color */
.observed-highlight,
.observed-value {
  color: var(--observed-stat);
  font-weight: 700;
}
/* Proper overline for x-bar — positioned close to the letter via border-top */
.x-bar {
  border-top: 1.5px solid currentColor;
  padding-top: 0px;
  line-height: 0.85;
  display: inline-block;
}

/* Interpretation text in results */
.interpretation {
  font-style: italic;
  color: var(--ims-green);
  margin-top: 0.75rem;
  line-height: 1.45;
}

/* Color-coded value spans — match chart line colors */
.ci-value {
  color: var(--ci-bounds);
  font-weight: 600;
  font-style: normal;
}
/* Two-group mechanism content */
.mech-two-group {
  font-size: 0.82rem;
  line-height: 1.5;
}

/* "Shuffled/Resampled Groups" panel before the first draw — muted hint, centered,
   holding roughly the panel's height so the strip doesn't jump when the first
   shuffle fills it. */
.mech-resample-empty {
  color: var(--ims-gray-text, #6B6B6B);
  font-style: italic;
  text-align: center;
  padding: 2.75rem 0.5rem;
  margin: 0;
}

.mech-group-row {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.mech-group-name {
  font-weight: 600;
  min-width: 5em;
}

.mech-group-stat {
  font-family: var(--font-mono);
  color: var(--ims-green);
}

.mech-diff {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ims-green);
  margin-top: 0.2rem;
  font-size: 0.85rem;
  transition: color 0.3s;
  width: fit-content;
}
.mech-diff.highlight-last {
  color: var(--highlight-orange);
}
.mech-box-container {
  margin: 2px 0 4px;
}
.mech-chart-container {
  margin: 4px auto;
  display: flex;
  justify-content: center;
}
/* Cards mid-shift: warm highlight while the value tweens to the null-shifted value */
.sample-dot.chip-shifting {
  background: #FBE5D6;
  border-color: #E07020;
  color: #8A3E00;
  transition: background .2s ease, border-color .2s ease;
}
.mech-minichart {
  display: block;
  max-width: 100%;
  height: auto;
}
.mech-stat-text {
  display: block;
  text-align: center;
  margin-top: 2px;
}
/* Side-by-side mini histograms in two-group mechanism strip */
.mech-hist-pair {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.mech-hist-col {
  flex: 1;
  min-width: 0;
  text-align: center;
}
.mech-group-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ims-gray-text);
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mech-hist-cell {
  margin: 2px 0;
}
.mech-hist-cell svg.mech-minichart {
  display: block;
  max-width: 100%;
  height: auto;
}
.mech-group-stat-sm {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ims-green);
  white-space: nowrap;
}

/* Proportion bar visualization in two-group mechanism strip */
.mech-prop-bar {
  position: relative;
  height: 14px;
  background: var(--ims-lgray);
  border-radius: 3px;
  margin: 2px 0 6px;
  overflow: hidden;
}
.mech-prop-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px 0 0 3px;
  transition: width 0.3s ease;
}
.mech-prop-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  pointer-events: none;
  text-shadow: 0 0 3px rgba(0,0,0,0.5);
}
/* Larger proportion bar for one-sample mechanism strip */
.mech-prop-bar-lg {
  height: 28px;
  border-radius: 4px;
  margin: 0.5rem 0 1.4rem;
  overflow: visible;
}
.mech-prop-bar-lg .mech-prop-fill {
  border-radius: 4px 0 0 4px;
}
.mech-prop-label-left,
.mech-prop-label-right {
  position: absolute;
  top: 100%;
  margin-top: 2px;
  font-size: 0.8rem;
  font-weight: 700;
  pointer-events: none;
  color: var(--text, #333);
}
.mech-prop-label-left {
  left: 0;
}
.mech-prop-label-right {
  right: 0;
}
.prop-bar-wrap {
  padding: 0.25rem 0;
}

.sample-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-height: 2.5rem;
}

.sample-dot {
  display: inline-flex;
  align-items: baseline;
  padding: 2px 5px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: var(--accent);
  color: #fff;
  border-radius: 3px;
  line-height: 1.2;
  position: relative;
}

.sample-dot.not-drawn {
  background: var(--ims-lgray);
  color: #555;
  text-decoration: line-through;
}

.sample-dot.multi-drawn {
  background: var(--ims-red);
  color: #fff;
  font-weight: 600;
}

.draw-count {
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: 1px;
}

/* Paired sign-flip chips */
.sample-dot.sign-flipped {
  background: var(--ims-red, #F05133);
  color: #fff;
}

.flip-badge {
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: 1px;
}

.rs-chip.sign-flipped {
  background: rgba(240, 81, 51, 0.12);
  border-color: var(--ims-red, #F05133);
  color: var(--ims-red, #F05133);
}

/* Proportion chips: success (green) / failure (muted) */
.sample-dot--success {
  background: var(--ims-blue);
}
.sample-dot--failure {
  background: #888;
}
.prop-count {
  display: inline-block;
  margin-right: 1rem;
  font-size: 0.85rem;
}

/* ── Mechanism strip animations ───────────────────────────────── */

/* Bootstrap resample: chip staggered appearance */
.sample-dot.chip-hidden {
  opacity: 0;
  transform: scale(0.7);
}
.sample-dot.chip-appear {
  animation: chipAppear 200ms ease forwards;
}
@keyframes chipAppear {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* Bootstrap resample: flash original chip to show draw source */
.sample-dot.chip-source-flash {
  animation: chipSourceFlash 350ms ease;
}
@keyframes chipSourceFlash {
  0%   { background: var(--imscol-blue-light, #b8d8e8); box-shadow: 0 0 0 0 rgba(86, 155, 189, 0.5); }
  40%  { background: var(--imscol-blue, #569BBD); box-shadow: 0 0 6px 2px rgba(86, 155, 189, 0.5); }
  100% { background: var(--chip-bg, #e8e8e8); box-shadow: none; }
}

/* Bootstrap resample: flying dot from original to resample chip */
.chip-flyer {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--imscol-blue, #569BBD);
  color: #fff;
  border-radius: 4px;
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(86, 155, 189, 0.45);
}

/* Paired randomization: sign-flip scaleX animation */
.sample-dot.chip-flip {
  animation: chipFlip 350ms ease forwards;
}
@keyframes chipFlip {
  0%   { transform: scaleX(1); }
  40%  { transform: scaleX(0); }
  60%  { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sample-dot.chip-hidden { opacity: 1; transform: none; }
  .sample-dot.chip-appear { animation: none; }
  .sample-dot.chip-source-flash { animation: none; }
  .sample-dot.chip-flip { animation: none; }
  /* Kill inline JS transitions (prop bars, stat fades) set by sim-app.js
     mechanism animations — !important here overrides element.style */
  .mechanism-strip *, .mechanism-strip *::before, .mechanism-strip *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Contingency tables (chi-square page) */
.contingency-table {
  border-collapse: collapse;
  font-size: 0.8rem;
  margin: 0.25rem 0;
}
.contingency-table th,
.contingency-table td {
  border: 1px solid var(--border);
  padding: 3px 8px;
  text-align: center;
}
.contingency-table th {
  background: var(--bg-muted, #f5f5f5);
  font-weight: 600;
}
.contingency-input th,
.contingency-input td {
  border: 1px solid var(--border);
  padding: 2px;
}
.contingency-input input[type="text"],
.contingency-input input[type="number"] {
  width: 5rem;
  padding: 2px 4px;
  font-size: 0.8rem;
  text-align: center;
}
.table-size-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}
.table-size-row input {
  width: 3rem;
  padding: 2px 4px;
}

.sample-stats {
  font-size: 0.8rem;
  color: var(--ims-gray-text);
  margin: 0.25rem 0 0;
}

/* Mini histogram for large-dataset original sample */
.mini-chart {
  width: 100%;
}

.mini-chart svg {
  font-family: var(--font-body);
  font-size: 10px;
  max-height: 140px;
}


/* Large-dataset resample summary */
.resample-summary {
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.resample-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.rs-chip {
  display: inline-block;
  padding: 3px 8px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
}

.rs-chip.not-drawn {
  background: var(--ims-lgray);
  color: #555;
}

.rs-chip.multi-drawn {
  background: var(--ims-red);
  color: #fff;
}

@media (max-width: 600px) {
  .mechanism-panels {
    flex-direction: column;
    align-items: center;
  }
  .mechanism-panel {
    width: 100%;
    max-width: 400px;
  }
  .mechanism-arrow {
    align-self: center;
    transform: rotate(90deg);
    padding: 0;
  }
}

/* Mobile: move generate bar below mechanism strip (between mechanism + chart)
   so it doesn't scroll out of view when the tall mechanism strip is showing.
   Uses display:contents on the parent section to "dissolve" it, then reorders. */
@media (max-width: 600px) {
  main:has(.mechanism-strip) {
    display: flex;
    flex-direction: column;
  }
  main:has(.mechanism-strip) > #controls {
    display: contents;
  }
  main:has(.mechanism-strip) > #controls > .control-row {
    order: 1;
  }
  main:has(.mechanism-strip) > #data-panel {
    order: 0;
  }
  main:has(.mechanism-strip) > .mechanism-strip {
    order: 2;
  }
  main:has(.mechanism-strip) > #controls > .generate-bar {
    order: 3;
  }
  main:has(.mechanism-strip) > #chart-and-results {
    order: 4;
  }
}

@media (max-width: 480px) {
  .generate-bar {
    gap: 0.3rem;
  }

  .gen-btn {
    font-size: 0.82rem;
    padding: 0.35rem 0.55rem;
  }
}

/* ===== Parameter Sliders ===== */

.param-with-slider {
  flex-direction: row;
  align-items: flex-end;
  gap: 0.75rem;
}

.param-with-slider input[type="range"] {
  flex: 1;
  min-width: 80px;
  accent-color: var(--ims-blue);
}

/* ===== Inline df layout (F distribution) ===== */

.df-inline-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  margin-top: 0.35rem;
}

.df-inline-row .df-label {
  white-space: nowrap;
  min-width: 7rem;
}

.df-inline-row input[type="number"] {
  width: 4.5rem;
}

.df-inline-row .stepper-group {
  display: inline-flex;
}

.df-inline-row .stepper-group input[type="number"] {
  width: 3.5rem;
  min-height: 2rem;
}

.df-inline-row .stepper-btn {
  min-width: 2rem;
  min-height: 2rem;
  width: 2rem;
  height: 2rem;
  font-size: 0.9rem;
}

.df-inline-row input[type="range"] {
  flex: 1;
  min-width: 80px;
  accent-color: var(--ims-blue);
}

/* ===== Two-Column App Layout ===== */
/* Desktop: wide chart/main panel left, narrow sidebar right.
   Mobile: single column, sidebar content below main. */

.app-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 0.5rem 0;
}

@media (min-width: 768px) {
  main:has(.app-body) {
    max-width: 1100px;
  }
  .app-body {
    grid-template-columns: 1fr 340px;
    gap: 1rem;
    align-items: start;
  }
  .app-body > .app-main {
    grid-column: 1;
  }
  .app-body > .generate-bar {
    grid-column: 1;
  }
  .app-body > .app-sidebar {
    grid-column: 2;
    grid-row: 1 / 4;
    position: sticky;
    top: 1rem;
  }
}

.app-main {
  min-width: 0;   /* prevent SVG overflow */
}

/* On mobile, chart fills container naturally — no forced min-width.
   Long axis labels are wrapped via wrapTickLabels() in JS.
   overflow-x: auto is a safety net in case anything still overflows. */
@media (max-width: 600px) {
  .app-main {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.app-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ===== Expert Mode ===== */
/* Hide advanced controls in simple mode (default for intro students) */
body:not([data-expert="true"]) .expert-only { display: none !important; }
body[data-expert="true"] .standard-only { display: none !important; }

/* ===== Calculator Mode ===== */
/* Hide auto-generated interpretations when toggled off */
body[data-hide-interpretations="true"] .interpretation { display: none !important; }

/* On-page "More options" / "Fewer options" toggle link */
.expert-toggle {
  font-size: 0.85rem;
  color: var(--ims-gray-text);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.1rem 0;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.expert-toggle:hover {
  color: var(--accent);
}

/* "Copy link" button — share the exact tool configuration + seed */
.share-link-btn {
  margin-left: auto;
  font-size: 0.8rem;
  font-family: var(--font-mono);
  color: var(--ims-dark, #114B5F);
  background: none;
  border: 1px solid var(--ims-border, #c9d6dc);
  border-radius: 5px;
  cursor: pointer;
  padding: 0.25rem 0.55rem;
  white-space: nowrap;
}
.share-link-btn:hover {
  background: var(--ims-blue-tint, #eef5f9);
  border-color: var(--ims-blue, #569BBD);
}
.share-link-btn:focus-visible {
  outline: 2px solid var(--ims-blue, #569BBD);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .generate-bar .share-link-btn {
    flex-basis: 100%;
    margin-left: 0;
    text-align: center;
    order: 12;
    min-height: 44px;
  }
}

/* ===== Collapsed Data Panel ===== */
/* After dataset selection, panel collapses to a compact summary bar */
#data-panel.collapsed [role="tablist"],
#data-panel.collapsed [role="tabpanel"] {
  display: none;
}
#data-panel.collapsed {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
#data-panel.collapsed #data-preview {
  margin: 0;
}
#data-panel.collapsed #data-preview output {
  font-size: 0.85rem;
}
.data-panel-expand-btn {
  font-size: 0.78rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ims-gray-text);
  cursor: pointer;
  white-space: nowrap;
}
.data-panel-expand-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ===== Dataset Action Buttons (Explore / Preview / Download) ===== */
.dataset-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.dataset-action-btn {
  font-size: 0.78rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  font-family: inherit;
  line-height: 1.4;
}
.dataset-action-btn:hover {
  border-color: var(--accent);
  background: var(--surface);
  text-decoration: none;
}
.dataset-action-btn.primary {
  background: var(--ims-blue);
  border-color: var(--ims-blue);
  color: #fff;
}
.dataset-action-btn.primary:hover {
  background: var(--ims-dark, #114B5F);
  border-color: var(--ims-dark, #114B5F);
}
/* Compact square icon buttons (summary bar + catalog rows) */
.dataset-action-btn.icon-btn,
.data-panel-expand-btn.icon-btn {
  padding: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.dataset-action-btn.has-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.dataset-action-btn svg,
.data-panel-expand-btn svg {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}
.dataset-action-btn:focus-visible,
.data-panel-expand-btn:focus-visible {
  outline: 2px solid var(--ims-blue);
  outline-offset: 1px;
}
.dataset-action-btn.icon-btn.loading {
  opacity: 0.5;
  pointer-events: none;
}

/* ===== Dataset Preview Modal ===== */
.dataset-preview-dialog {
  width: min(760px, 94vw);
  max-height: 88vh;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text, inherit);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.dataset-preview-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}
.dataset-preview-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem 0.4rem;
}
.dataset-preview-header h2 {
  margin: 0;
  font-size: 1.1rem;
  flex: 1;
}
.dataset-preview-close {
  border: none;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ims-gray-text);
  cursor: pointer;
  padding: 0 0.25rem;
  border-radius: 4px;
}
.dataset-preview-close:hover {
  color: var(--accent);
}
.dataset-preview-close:focus-visible {
  outline: 2px solid var(--ims-blue);
  outline-offset: 1px;
}
.dataset-preview-meta {
  margin: 0;
  padding: 0 1.1rem 0.6rem;
  font-size: 0.82rem;
  color: var(--ims-gray-text);
}
.dataset-preview-scroll {
  overflow: auto;
  max-height: 58vh;
  margin: 0 1.1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.dataset-preview-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.dataset-preview-table th,
.dataset-preview-table td {
  padding: 0.3rem 0.55rem;
  border-bottom: 1px solid #eee;
  text-align: left;
  white-space: nowrap;
}
.dataset-preview-table th {
  position: sticky;
  top: 0;
  background: var(--bg-alt, #f5f5f5);
  font-weight: 700;
  z-index: 1;
}
.dataset-preview-table td.is-numeric,
.dataset-preview-table th.is-numeric {
  text-align: right;
}
.dataset-preview-table tbody tr:hover td {
  background: #f8fbfd;
}
.dataset-preview-rownum {
  color: var(--ims-gray-text);
  text-align: right !important;
  font-size: 0.75rem;
  background: var(--bg-alt, #f5f5f5);
}
.dataset-preview-vtype {
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--ims-gray-text);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dataset-preview-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.7rem 1.1rem 0.9rem;
}
.dataset-preview-note {
  font-size: 0.78rem;
  color: var(--ims-gray-text);
}
.dataset-preview-footer-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

@media (max-width: 600px) {
  .dataset-action-btn.icon-btn,
  .data-panel-expand-btn.icon-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem;
  }
  .dataset-action-btn svg,
  .data-panel-expand-btn svg {
    width: 20px;
    height: 20px;
  }
  .dataset-preview-dialog {
    width: 96vw;
    max-height: 92vh;
  }
  .dataset-preview-scroll {
    max-height: 62vh;
  }
}

/* ===== Dataset Info Panel (expandable) ===== */
/* Summary stays inline in the collapsed bar; content drops below as a full-width block */
.dataset-info {
  /* Keep the <details> from growing — summary stays in its flex position */
  flex-shrink: 0;
}
.dataset-info summary {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.dataset-info summary:hover {
  text-decoration: underline;
}
.dataset-info-content {
  /* Break out of the flex row: position below the entire collapsed bar */
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  margin-top: 0.25rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.82rem;
  line-height: 1.45;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.dataset-info-content p {
  margin: 0 0 0.4rem;
}
.dataset-info-content h4 {
  margin: 0.5rem 0 0.2rem;
  font-size: 0.82rem;
  color: var(--ims-gray-text);
}
.dataset-info-vars {
  margin: 0;
}
.dataset-info-vars dt {
  font-weight: 600;
  margin-top: 0.3rem;
}
.dataset-info-vars dd {
  margin-left: 1rem;
  margin-bottom: 0;
}
.dataset-info-source {
  margin-top: 0.5rem;
  color: var(--ims-gray-text);
}

/* ===== Sticky Controls (desktop only) ===== */
@media (min-width: 768px) {
  #controls.sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
  }
}

/* Chart selector (radio toggle for chart type in explore pages) */
.chart-selector[hidden] { display: none; }
.chart-selector {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.25rem;
}

.chart-selector label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  font-weight: 400;
  font-size: 0.85rem;
  cursor: pointer;
}

.chart-selector input[type="radio"] {
  accent-color: var(--accent);
  margin: 0;
}

/* Chart-specific controls bar (bins stepper, outlier toggle) */
.chart-controls-bar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
  min-height: 1.5rem;
}

/* Export bar (save chart / copy table buttons) */
.export-bar {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.35rem;
}
.export-btn {
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  min-height: 28px;
}

/* Floating chart save button — overlaid top-right of chart container */
.chart-save-btn {
  position: absolute;
  bottom: 4px;
  right: 4px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ims-gray-text, #555);
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.chart-save-btn:hover,
.chart-save-btn:focus-visible {
  opacity: 1;
  background: #fff;
  border-color: var(--border, #ccc);
  color: var(--ims-blue, #569BBD);
}
.chart-save-btn:active {
  background: var(--surface, #f0f0f0);
}
.chart-save-btn.saving {
  opacity: 0.5;
  pointer-events: none;
}
/* Copy-to-clipboard button — sits left of save button (bottom-right corner) */
.chart-copy-btn {
  position: absolute;
  bottom: 4px;
  right: 40px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ims-gray-text, #555);
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.chart-copy-btn:hover,
.chart-copy-btn:focus-visible {
  opacity: 1;
  background: #fff;
  border-color: var(--border, #ccc);
  color: var(--ims-blue, #569BBD);
}
.chart-copy-btn:active {
  background: var(--surface, #f0f0f0);
}
.chart-copy-btn.saving {
  opacity: 0.5;
  pointer-events: none;
}
/* Hide in embed/static/print modes */
body[data-embed="true"] .chart-save-btn,
body[data-embed="true"] .chart-copy-btn,
body[data-static="true"] .chart-save-btn,
body[data-static="true"] .chart-copy-btn { display: none; }
@media print { .chart-save-btn, .chart-copy-btn { display: none; } }

/* Table wrapper — holds table + copy button */
.statlens-table .export-btn { display: block; }
@media print { .statlens-table .export-btn { display: none; } }

.chart-controls-bar label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
  font-weight: 400;
  font-size: 0.85rem;
}

/* Sidebar stats table */
.sidebar-stats {
  width: 100%;
  margin: 0;
  font-size: 0.95rem;
}
.sidebar-stats th,
.sidebar-stats td {
  padding: 0.25rem 0.4rem;
}

.sidebar-stats td:last-child {
  text-align: right;
  font-family: var(--font-mono);
}

.sidebar-stats tr.stat-sep th,
.sidebar-stats tr.stat-sep td {
  border-top: 2px solid var(--border);
}

/* ===== Spreadsheet Editor (shared component) ===== */

.spreadsheet {
  border: 1px solid var(--border);
  border-radius: 4px;
  max-height: 14rem;
  overflow-y: auto;
  font-size: 0.85rem;
}
.spreadsheet table {
  width: 100%;
  border-collapse: collapse;
}
.spreadsheet thead th {
  position: sticky;
  top: 0;
  background: var(--bg-alt, #f5f5f5);
  border-bottom: 2px solid var(--border);
  padding: 0.25rem 0.4rem;
  font-weight: 700;
  font-size: 0.8rem;
  text-align: left;
  z-index: 1;
}
.spreadsheet .row-num {
  width: 2.5rem;
  text-align: right;
  padding-right: 0.4rem;
  color: var(--ims-gray-text);
  font-size: 0.75rem;
  user-select: none;
  background: var(--bg-alt, #f5f5f5);
  border-right: 1px solid var(--border);
}
.spreadsheet td {
  padding: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}
.spreadsheet input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0.25rem 0.4rem;
  font-size: 0.85rem;
  font-family: var(--font-mono, 'Source Code Pro', monospace);
  outline: none;
  box-sizing: border-box;
}
.spreadsheet input:focus {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.spreadsheet tr.empty-row input {
  color: var(--ims-gray-text);
}

/* Categorical editors: side-by-side spreadsheet + summary table */
.cat-editors {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.cat-editors > * {
  flex: 1;
  min-width: 0;
}
@media (max-width: 600px) {
  .cat-editors {
    flex-direction: column;
  }
}

.summary-table-wrap .summary-heading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  margin: 0 0 0.25rem;
  color: var(--ims-gray-text);
  font-weight: 700;
}
.summary-table-wrap .summary-heading input[type="number"] {
  width: 2.8rem;
  font-size: 0.82rem;
  padding: 0.1rem 0.2rem;
  text-align: center;
}
.summary-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.82rem;
}
.summary-table th {
  background: var(--bg-alt, #f5f5f5);
  border: 1px solid var(--border);
  padding: 0.15rem 0.4rem;
  font-weight: 700;
  text-align: left;
  font-size: 0.78rem;
}
.summary-table td {
  border: 1px solid var(--border);
  padding: 0;
}
.summary-table input {
  width: 100%;
  border: none;
  padding: 0.15rem 0.4rem;
  font-size: 0.82rem;
  background: transparent;
  outline: none;
  box-sizing: border-box;
}
.summary-table input:focus {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.summary-table input[type="number"] {
  width: 100%;
  text-align: right;
  font-family: var(--font-mono, 'Source Code Pro', monospace);
}

/* ===== Chart Section ===== */

/* Chart type toggle — uses .seg-control base styles, adds layout for siblings */
.chart-type-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin: 0;
  border: none;
  padding: 0;
}

#chart-container {
  margin: 1rem 0;
}

/* ===== SVG Chart Text — all sizes in viewBox units (600×371) ===== */
/* In 2-col layout (~300px), viewBox scales ~0.50×, so 30vb → ~15px.    */
/* Full-width (~600px), viewBox is 1:1, so 30vb → 30px.                 */

/* ── viewBox font sizes (600×371 canvas) ──
   main is max-width: 800px → chart container ≈770px → 1.28× scale.
   14vb → ~18px physical on desktop. Fine for tick labels.
   Phone (350px container): 0.58× → 14vb → 8px — too small, so
   we bump to 22px on phones (22 × 0.58 ≈ 13px physical). */

svg[role="img"] {
  font-family: var(--font-body);
  font-size: var(--font-size-chart);
}

/* D3 axis sets font-size:10px as an inline style on <g class="tick">.
   !important is needed to override that inline style. */
svg[role="img"] .tick text {
  font-size: var(--font-size-chart) !important;
}

/* Focus indicator for keyboard-navigable chart elements */
svg[role="img"] [tabindex="0"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

svg[role="img"] .x-label,
svg[role="img"] .y-label {
  font-size: 16px;                         /* axis labels — slightly larger than ticks */
  font-weight: 500;
}

svg[role="img"] .overlay-value {
  font-size: 16px;                         /* observed stat / CI bound numbers */
  font-weight: 600;
}

svg[role="img"] .bar-count-label {
  font-size: 14px;                         /* histogram bar click labels */
  font-weight: 700;
}

svg[role="img"] .p-value-label {
  font-size: 16px;                         /* p-value on chart */
  font-weight: 700;
}

svg[role="img"] .prob-label {
  font-size: 14px;                         /* distribution probability labels */
  font-weight: bold;
  font-family: var(--font-mono);
}

svg[role="img"] .prob-complement {
  font-size: 13px;
  font-weight: normal;
}

svg[role="img"] .crit-label {
  font-size: 14px;                         /* critical value labels */
  font-family: var(--font-mono);
}

svg[role="img"] .overlay-label {
  font-size: 11px;                         /* small annotation text ("observed", line labels) */
}

svg[role="img"] .legend-title {
  font-size: 14px;                         /* legend heading in bar/pie/waffle charts */
  font-weight: 700;
}

svg[role="img"] .legend-text {
  font-size: 13px;                         /* legend item text (category names) */
}

svg[role="img"] .slice-label {
  font-size: 13px;                         /* pie slice percentage labels */
  font-weight: 700;
}

svg[role="img"] .stat-marker-label {
  font-size: 12px;                         /* mean/median marker annotations */
}

svg[role="img"] .chart-tooltip text {
  font-size: 14px;                         /* hover tooltip text */
}

/* Tablet/small screen: intermediate chart font scaling */
@media (max-width: 600px) {
  :root { --font-size-chart: 18px; }
  svg[role="img"] .x-label,
  svg[role="img"] .y-label        { font-size: 19px; }
  svg[role="img"] .overlay-value  { font-size: 18px; }
  svg[role="img"] .overlay-label  { font-size: 14px; }
  svg[role="img"] .prob-label     { font-size: 18px; }
  svg[role="img"] .prob-complement { font-size: 16px; }
  svg[role="img"] .crit-label     { font-size: 18px; }
  svg[role="img"] .legend-title   { font-size: 16px; }
  svg[role="img"] .legend-text    { font-size: 15px; }
  svg[role="img"] .slice-label    { font-size: 16px; }
  svg[role="img"] .stat-marker-label { font-size: 15px; }
  svg[role="img"] .chart-tooltip text { font-size: 16px; }
}

/* Phone: charts are full-width (~350px container, 0.58× scale).
   Bump viewBox font sizes so text stays readable. */
@media (max-width: 480px) {
  :root { --font-size-chart: 22px; }
  svg[role="img"] .x-label,
  svg[role="img"] .y-label        { font-size: 23px; }
  svg[role="img"] .overlay-value  { font-size: 20px; }
  svg[role="img"] .overlay-label  { font-size: 16px; }
  svg[role="img"] .bar-count-label { font-size: 22px; }
  svg[role="img"] .p-value-label  { font-size: 24px; }
  svg[role="img"] .prob-label     { font-size: 22px; }
  svg[role="img"] .prob-complement { font-size: 20px; }
  svg[role="img"] .crit-label     { font-size: 22px; }
  svg[role="img"] .legend-title   { font-size: 18px; }
  svg[role="img"] .legend-text    { font-size: 18px; }
  svg[role="img"] .slice-label    { font-size: 18px; }
  svg[role="img"] .stat-marker-label { font-size: 17px; }
  svg[role="img"] .chart-tooltip text { font-size: 18px; }
}

/* Probability label pills on distribution charts */
svg[role="img"] .prob-label-bg {
  cursor: pointer;
}

svg[role="img"] .prob-label-bg:hover {
  stroke-width: 2;
}

figure {
  margin: 0;
}

figcaption {
  margin-top: 0.5rem;
}

.toggle-table {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.35rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--accent);
}

.toggle-table:hover,
.toggle-table:focus-visible {
  border-color: var(--accent);
  background: var(--surface);
}

/* ===== Results ===== */

#result-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  font-size: 1.05rem;
}

#result-summary:empty {
  display: none;
}

/* When inside the chart header bar, strip the box — text only */
.chart-header-bar #result-summary {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

/* ===== Data Table ===== */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 1rem 0;
}

th, td {
  padding: 0.375rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

th {
  background: var(--surface);
  font-weight: 700;
  color: var(--heading);
}

caption {
  text-align: left;
  font-weight: 700;
  color: var(--heading);
  padding-bottom: 0.5rem;
}

/* ===== Dialog ===== */

dialog {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 440px;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.3);
}

dialog dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
}

dialog dt {
  font-weight: 600;
}

kbd {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
}

/* (Stepper buttons defined above in "Stepper Group" section) */

/* ===== Preset Probability Buttons ===== */

.preset-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin: 0.35rem 0 0.5rem;
}

.preset-label {
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
}

.preset-btn {
  font-family: "Source Code Pro", monospace;
  font-size: 0.85rem;
  padding: 0.2rem 0.5rem;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
  cursor: pointer;
  color: var(--accent);
  transition: background 0.1s, color 0.1s;
}

.preset-btn:hover {
  background: color-mix(in srgb, var(--accent) 15%, var(--bg));
}

.preset-btn:active {
  background: color-mix(in srgb, var(--accent) 30%, var(--bg));
}

@media (max-width: 480px) {
  .preset-bar {
    gap: 0.25rem;
  }
  .preset-btn {
    min-height: 44px;
    padding: 0.3rem 0.4rem;
    font-size: 0.8rem;
  }
}

/* ===== Interactive Chart ===== */

.drag-handle {
  touch-action: none;
}

.tap-target {
  touch-action: auto;
}

.drag-handle:hover ~ .crit-line,
.drag-handle:active ~ .crit-line {
  stroke-width: 2.5;
  stroke: var(--ims-blue);
}

.crit-label {
  user-select: none;
  -webkit-user-select: none;
}

.crit-label:hover,
.crit-label-bg:hover + .crit-label {
  fill: var(--ims-blue) !important;
}

.crit-label-bg:hover {
  stroke-width: 2;
}

.prob-label {
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

.prob-label:hover {
  text-decoration: underline;
}

.chart-inline-edit {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.chart-inline-edit:focus {
  border-color: var(--ims-blue);
  box-shadow: 0 0 0 3px rgba(86, 155, 189, 0.3);
}

/* ===== Screen Reader Only ===== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Activity Mode: Discovery / Presentation ===== */
body[data-mode="present"] .discover-only { display: none !important; }
body[data-mode="discover"] .present-only { display: none !important; }

/* Presenter notes — visible only in presentation mode */
.presenter-note {
  background: #fff8e1;
  border-left: 4px solid #f9a825;
  padding: 0.5rem 0.8rem;
  border-radius: 0 6px 6px 0;
  margin: 0.5rem 0;
  font-size: 0.85rem;
  line-height: 1.4;
  font-style: italic;
  color: #5d4037;
}
.presenter-note::before {
  content: "💬 ";
  font-style: normal;
}

/* Guided gate — question block that gates progress */
.gate-question {
  background: #e3f2fd;
  border: 2px solid var(--ims-blue, #569BBD);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
}
.gate-question p { margin: 0 0 0.5rem; font-size: 0.9rem; line-height: 1.5; }
.gate-choices { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.5rem 0; }
.gate-choice {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.75rem; border-radius: 6px;
  border: 1px solid var(--border, #ccc); background: #fff;
  cursor: pointer; font-size: 0.9rem; font-family: inherit;
  text-align: left;
}
/* Choice label is one flex child so inline KaTeX flows as text, not as its own
   flex item (REQ-047). flex:1 lets it fill the row; the ✓/✗/● ::after marker
   then sits at the far end. */
.gate-choice-text { flex: 1 1 auto; min-width: 0; }
.gate-choice:hover { background: #f0f7ff; }
.gate-choice:focus-visible { outline: 2px solid var(--ims-blue); outline-offset: 2px; }
/* Correct/incorrect pair color with a ✓/✗ marker so the result is
   never conveyed by hue alone (WCAG 1.4.1, CVD users) */
.gate-choice.correct { background: #e3f0f8; border-color: #0072B2; border-width: 2px; }
.gate-choice.correct::after { content: "✓"; margin-left: auto; font-weight: 700; color: #0072B2; }
.gate-choice.incorrect { background: #fef0e6; border-color: #D55E00; border-style: dashed; border-width: 2px; }
.gate-choice.incorrect::after { content: "✗"; margin-left: auto; font-weight: 700; color: #D55E00; }
.gate-choice.disabled { pointer-events: none; opacity: 0.7; }
.gate-feedback {
  padding: 0.4rem 0.8rem; border-radius: 4px; margin: 0.5rem 0;
  font-size: 0.85rem; line-height: 1.4;
}
.gate-feedback.success { background: #e3f0f8; color: #0072B2; }
.gate-feedback.retry { background: #fff8e1; color: #e65100; }

/* Step progress bar */
.step-progress {
  display: flex; gap: 0.3rem; align-items: center;
  margin: 0.75rem 0; font-size: 0.8rem; color: var(--ims-gray-text, #555);
}
.step-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--border, #ccc);
}
.step-dot.completed { background: var(--ims-green, #114B5F); }
.step-dot.active { background: var(--ims-blue, #569BBD); box-shadow: 0 0 0 2px #569BBD40; }

/* Step card locked state */
.step-card.locked {
  opacity: 0.35;
  pointer-events: none;
  filter: grayscale(0.3);
}
.step-card.locked h2::after {
  content: " 🔒";
  font-size: 0.85em;
}

/* Continue button between steps */
.continue-btn {
  background: var(--ims-blue, #569BBD);
  color: white; border: none;
  padding: 0.5rem 1.2rem; border-radius: 6px;
  font-weight: 700; font-size: 0.9rem;
  cursor: pointer; font-family: inherit;
  margin-top: 0.5rem;
}
.continue-btn:hover { filter: brightness(0.9); }
.continue-btn:focus-visible { outline: 2px solid var(--ims-blue); outline-offset: 2px; }

/* ===== Compact Controls (chart-first layout) ===== */

/* Bar above the chart: tail toggle + result on one line */
.chart-header-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
}

.chart-header-bar .result-banner {
  flex: 1;
  text-align: right;
  min-width: 0;
}

.result-banner {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--ims-green);
  text-align: center;
}

.compact-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Inline row: inputs + tail toggle on one line (desktop) */
.control-row-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.control-row-inline .tail-toggle {
  align-self: flex-end;
  margin-bottom: 1px;
}

/* Always-visible parameter section (t, chi-sq, F) */
.param-visible {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.85rem;
  color: var(--ims-gray-text);
}

.param-visible > .control-group {
  flex: 1;
  min-width: 200px;
}

.control-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.control-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ims-gray-text);
}

.control-group input[type="number"] {
  width: 7rem;
}

/* Segmented tail toggle */
.tail-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  width: fit-content;
}

.tail-btn {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  font-weight: 400 !important;
}

.tail-btn input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.tail-btn span {
  display: block;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  border-right: 1px solid var(--border);
  transition: background 0.1s, color 0.1s;
  user-select: none;
  -webkit-user-select: none;
}

.tail-btn:last-child span {
  border-right: none;
}

.tail-btn input:checked + span {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

.tail-btn input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Collapsible parameters */
.param-details {
  font-size: 0.85rem;
  color: var(--ims-gray-text);
}

.param-details summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.25rem 0;
  user-select: none;
  -webkit-user-select: none;
}

.param-details summary:hover {
  color: var(--accent);
}

.param-details[open] {
  padding-bottom: 0.25rem;
}

.param-details .control-group {
  margin-top: 0.5rem;
}

/* ===== Phone ===== */

@media (max-width: 480px) {
  main {
    padding: 0.75rem 1rem 2rem;
  }

  h1 { font-size: 1.25rem; }

  .control-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .control-row-inline {
    flex-direction: column;
    align-items: stretch;
  }

  .chart-header-bar {
    gap: 0.5rem;
  }

  .chart-header-bar .tail-toggle {
    width: 100%;
  }

  .chart-header-bar .tail-toggle .tail-btn span {
    flex: 1;
    text-align: center;
  }

  .chart-header-bar .result-banner {
    text-align: center;
    font-size: 0.95rem;
  }

  .param-with-slider {
    flex-direction: column;
    align-items: stretch;
  }

  .param-with-slider input[type="range"] {
    width: 100%;
  }

  input[type="number"] {
    width: 100%;
  }

  /* Selects: full-width in control contexts, but compact in var-selectors */
  select {
    width: 100%;
  }

  /* Don't stretch stepper-wrapped inputs to full width */
  .stepper-group input[type="number"] {
    width: 3.5rem;
  }

  /* Variable selectors (explore pages): compact inline layout */
  .var-selectors {
    gap: 0.3rem 1rem;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
  }
  .var-selectors label {
    gap: 0.3rem;
    font-size: 0.85rem;
  }
  .var-selectors select {
    font-size: 0.85rem;
    min-width: 0;
    width: auto;
    max-width: 55vw;
    min-height: 44px;
  }

  /* Chart type selector: compact on phone */
  .chart-selector {
    gap: 0.4rem;
    font-size: 0.85rem;
    flex-wrap: wrap;
  }
  .chart-selector label {
    gap: 0.2rem;
    font-size: 0.85rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Stats tables: compact on phone */
  .sidebar-stats {
    font-size: 0.82rem;
  }
  .sidebar-stats th,
  .sidebar-stats td {
    padding: 0.2rem 0.3rem;
  }

  /* Collapsed data panel: tighter on phone */
  #data-panel.collapsed {
    padding: 0.25rem 0.5rem;
    gap: 0.4rem;
    font-size: 0.82rem;
  }
  #data-panel.collapsed #data-preview output {
    font-size: 0.78rem;
    line-height: 1.3;
  }

  /* On phone: df row stacks, stepper buttons get full 44px targets */
  .df-inline-row {
    flex-wrap: wrap;
  }

  .df-inline-row .stepper-btn {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }

  .df-inline-row .stepper-group input[type="number"] {
    min-height: 44px;
  }

  /* Tail buttons: 44px min touch targets */
  .tail-btn {
    min-height: 44px;
  }
}

/* ===== Landscape on small screens ===== */
/* When phone is rotated, vertical space is tight (~360px height).
   Compact sidebar/stats so chart gets more room. */
@media (max-height: 500px) and (orientation: landscape) {
  .sidebar-stats {
    font-size: 0.78rem;
  }
  .sidebar-stats th,
  .sidebar-stats td {
    padding: 0.15rem 0.25rem;
  }
  .app-sidebar h2 {
    font-size: 0.9rem;
    margin-bottom: 0.15rem;
  }
}

/* ===== Inference pages ===== */

.inference-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.inference-inputs label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
}

.inference-inputs input[type="number"],
.inference-inputs input[type="text"] {
  width: 10ch;
}

.warning-banner {
  background: #FFF3CD;
  border: 1px solid #C08700;
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  margin: 0.5rem 0;
  font-size: 0.9rem;
  color: #664D03;
}

.warning-text {
  color: #C08700;
  font-weight: 600;
  margin-top: 0.5rem;
}
.warning-text a,
.warning-banner a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}
.warning-banner p {
  margin: 0.25rem 0;
}
.warning-banner p:first-child {
  margin-top: 0;
}
.warning-banner p:last-child {
  margin-bottom: 0;
}

.conditions-note {
  background: #FFF3CD;
  border-left: 3px solid #C08700;
  border-radius: 2px;
  padding: 0.3rem 0.5rem;
  color: #664D03;
  font-size: 0.85em;
}

.conditions-checkpoint {
  background: var(--bg-alt, #f5f5f5);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ims-blue, #569BBD);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  margin: 0.5rem 0;
  font-size: 0.88rem;
}
.conditions-checkpoint p {
  margin: 0.25rem 0;
}
.conditions-checkpoint p:first-child { margin-top: 0; }
.conditions-checkpoint p:last-child { margin-bottom: 0; }
.conditions-checkpoint a {
  color: var(--ims-blue, #569BBD);
  font-weight: 600;
  text-decoration: underline;
}
.conditions-toggle {
  background: none;
  border: none;
  color: var(--ims-blue, #569BBD);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.conditions-toggle:hover,
.conditions-toggle:focus-visible {
  color: var(--ims-dark, #114B5F);
}
.conditions-toggle::before {
  content: '\25B6\00a0';
  display: inline-block;
  font-size: 0.7em;
  transition: transform 0.15s ease;
}
.conditions-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}
.conditions-panel {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}
.conditions-panel[hidden] {
  display: none;
}

/* Conditions diagnostic views (histogram + boxplot + QQ) */
.conditions-view-toggle {
  display: flex;
  gap: 0;
  margin-bottom: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  width: fit-content;
}
.conditions-view-toggle .seg-btn {
  background: var(--bg);
  border: none;
  border-right: 1px solid var(--border);
  padding: 0.3rem 0.7rem;
  font-size: 0.82rem;
  font-family: var(--font-body);
  color: var(--fg);
  cursor: pointer;
}
.conditions-view-toggle .seg-btn:last-child { border-right: none; }
.conditions-view-toggle .seg-btn.active {
  background: var(--accent);
  color: #fff;
}
.conditions-note {
  font-size: 0.82rem;
  color: var(--ims-gray-text);
  margin: 0.25rem 0 0.5rem;
}
.conditions-hist-box {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.conditions-histograms {
  /* Grid (not flex) so every group panel is the SAME size — a wrapped last row no
     longer stretches its few items larger than the rows above. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.6rem;
  width: 100%;
}
.conditions-group-hist {
  min-width: 0;
}
.conditions-group-title {
  margin: 0 0 0.1rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: #114B5F;
  text-align: center;
}
.conditions-single-hist {
  flex: 1;
  min-width: 200px;
  max-width: 400px;
}
.conditions-single-box {
  flex: 1;
  min-width: 200px;
  max-width: 400px;
}
.conditions-boxplot {
  width: 100%;
  max-width: 500px;
}
.conditions-qq-view {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.conditions-group-qq {
  flex: 1;
  min-width: 200px;
  max-width: 350px;
}
.conditions-qq-hint {
  width: 100%;
  font-size: 0.82rem;
  color: var(--ims-gray-text);
  margin-top: 0.5rem;
  font-style: italic;
}
@media (max-width: 600px) {
  .conditions-histograms,
  .conditions-qq-view {
    flex-direction: column;
  }
  .conditions-group-hist,
  .conditions-group-qq {
    min-width: unset;
    max-width: unset;
  }
}

.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 0.25rem 0 0.75rem;
}

.results-table th,
.results-table td {
  padding: 0.25rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

.results-table th {
  font-weight: 600;
  white-space: nowrap;
  width: 40%;
}

.results-table td {
  font-family: var(--font-mono);
}

.hypothesis-statement {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0.25rem 0;
}

/* ===== Formula Display (inference pages) ===== */
/* Shows symbolic formula → values substituted → final result */

.formula-display {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0.5rem 0;
  padding: 0.6rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.formula-display h3 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ims-gray-text);
  margin: 0 0 0.35rem;
}
/* Don't let the uppercase heading transform mangle the math — it turns the
   lowercase population symbols μ → Μ (looks like M) and p → P. */
.formula-display h3 .katex { text-transform: none; letter-spacing: normal; }

/* Confidence-level dropdown inlined into the "95% CI for …" heading, so the
   percent itself is the control (no separate row above the results). */
.ci-conf-select {
  font: inherit;
  text-transform: none;
  letter-spacing: normal;
  color: inherit;
  width: auto;
  min-height: 0;
  padding: 0.05rem 1.3rem 0.05rem 0.35rem;
  margin-right: 0.15rem;
  vertical-align: baseline;
  cursor: pointer;
}

/* REQ-037: ANOVA-for-regression panel (collapsible <details>). */
.anova-table > summary {
  cursor: pointer;
  list-style-position: outside;
}
/* Keep the heading inline with the disclosure triangle, not on its own row. */
.anova-table > summary h3 {
  display: inline;
  vertical-align: middle;
}
.anova-table > summary::-webkit-details-marker { vertical-align: middle; }
/* The 6-column table scrolls horizontally on a narrow results panel rather
   than forcing the panel to overflow. */
.anova-results {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  margin-top: 0.5rem;
}
.anova-results td, .anova-results th { text-align: right; }
.anova-results th[scope="col"], .anova-results th[scope="row"] { text-align: left; }
.anova-results .anova-total th, .anova-results .anova-total td {
  border-top: 2px solid var(--border);
  font-weight: 600;
}

/* KaTeX formula container: center display math, allow overflow scroll */
.formula-display .katex-display {
  margin: 0.4rem 0;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Detail lines below formulas (df, p-value) */
.formula-detail {
  margin: 0.2rem 0;
  font-size: 0.9rem;
}

/* CI formula display */
.formula-ci {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border);
}

/* Compact result banner above chart in sidebar layout */
.result-stat {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ims-green);
  text-align: center;
  margin: 0.25rem 0;
}

.result-stat .p-val {
  font-weight: 400;
  font-size: 0.9rem;
}

/* Sidebar interpretation — tighter than full-width */
.app-sidebar .interpretation {
  font-size: 0.85rem;
  line-height: 1.45;
  padding: 0.5rem 0.75rem;
  margin: 0;
}

.app-sidebar .interpretation p {
  margin: 0.2rem 0;
}

/* ── Site footer ───────────────────────────────────────────────── */
.site-footer {
  margin-top: 3rem;
  padding: 1.5rem 1rem;
  border-top: 1px solid var(--ims-gray, #ccc);
  text-align: center;
  font-size: 0.8rem;
  color: #666;
  line-height: 1.6;
}
.site-footer a {
  color: var(--ims-blue);
  text-decoration: none;
}
.site-footer a:hover {
  text-decoration: underline;
}

/* ── Update toast ───────────────────────────────────────────── */
.update-toast {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ims-green);
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: 'Atkinson Hyperlegible', sans-serif;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: toast-in 0.3s ease-out;
}
.update-toast button {
  background: white;
  color: var(--ims-green);
  border: none;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.update-toast button:hover {
  background: #e0e0e0;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(1rem); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════ */
/* Embed mode — compact layout for iframe embedding in LMS       */
/* Activated by ?embed=true → body[data-embed="true"]            */
/* ═══════════════════════════════════════════════════════════════ */

body[data-embed="true"] h1,
body[data-embed="true"] .skip-links,
body[data-embed="true"] .page-number,
body[data-embed="true"] .site-footer,
body[data-embed="true"] .update-toast {
  display: none !important;
}

body[data-embed="true"] #data-panel {
  display: none !important;
}

body[data-embed="true"] main {
  padding: 0.25rem;
  max-width: none;
}

body[data-embed="true"] section:first-of-type {
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════════ */
/* Guided mode — textbook iframe embed with pre-set parameters    */
/* Activated by ?embed=true&guided=true → body[data-guided]       */
/* Hides controls row (stat/CI dropdowns) but keeps generate bar, */
/* mechanism strip, chart, and results fully visible.              */
/* ═══════════════════════════════════════════════════════════════ */

body[data-guided="true"] .control-row {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════ */
/* Static mode — screenshot-optimized rendering for textbook PDF  */
/* Activated by ?static=true → body[data-static="true"]           */
/* Implies embed mode; hides all controls, expands chart to fill  */
/* ═══════════════════════════════════════════════════════════════ */

body[data-static="true"] #controls,
body[data-static="true"] #variable-selector,
body[data-static="true"] #var-selectors,
body[data-static="true"] .generate-bar,
body[data-static="true"] #mechanism-strip,
body[data-static="true"] .chart-selector,
body[data-static="true"] .chart-controls-bar,
body[data-static="true"] .hypothesis-display,
body[data-static="true"] #conditions-checkpoint,
body[data-static="true"] .step-progress,
body[data-static="true"] .discover-only,
body[data-static="true"] .present-only,
body[data-static="true"] #page-help,
body[data-static="true"] #data-preview,
body[data-static="true"] #settings,
body[data-static="true"] .coverage-controls {
  display: none !important;
}

body[data-static="true"] .app-sidebar {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════ */
/* Figure-only embed — ?plot=only → body[data-plot="only"]         */
/* An interactive plot with nothing around it, for embedding in a  */
/* problem: the student reads it (and its tooltips), no controls.  */
/* Generic across tools (explore + simulate); simulate pages also  */
/* auto-run the distribution (sim-app.js). Overrides the "never    */
/* hide the mechanism strip" rule for THIS explicit mode only.     */
/* ═══════════════════════════════════════════════════════════════ */
body[data-plot="only"] #controls,
body[data-plot="only"] .control-row,
body[data-plot="only"] #variable-selector,
body[data-plot="only"] #var-selectors,
body[data-plot="only"] .var-selectors,
body[data-plot="only"] .generate-bar,
body[data-plot="only"] #mechanism-strip,
body[data-plot="only"] .chart-selector,
body[data-plot="only"] .chart-controls-bar,
body[data-plot="only"] .hypothesis-display,
body[data-plot="only"] #conditions-checkpoint,
body[data-plot="only"] .step-progress,
body[data-plot="only"] .discover-only,
body[data-plot="only"] .present-only,
body[data-plot="only"] #page-help,
body[data-plot="only"] #data-preview,
body[data-plot="only"] #data-panel,
body[data-plot="only"] #settings,
body[data-plot="only"] .coverage-controls,
body[data-plot="only"] .app-sidebar,
body[data-plot="only"] .expert-toggle,
body[data-plot="only"] .theory-toggle,
body[data-plot="only"] .bin-adjuster,
body[data-plot="only"] .chart-save-btn,
body[data-plot="only"] .chart-copy-btn {
  display: none !important;
}
/* Let the chart fill the freed space. */
body[data-plot="only"] .app-main {
  width: 100%;
  max-width: none;
}
body[data-plot="only"] main {
  padding: 0.25rem;
  max-width: none;
}
/* Sampling Distribution Lab: keep only the sampling-distribution panel — drop the
   population settings, the population + one-sample "draw" side, and the prose. */
body[data-plot="only"] #population-section,
body[data-plot="only"] .lab-left,
body[data-plot="only"] .sampling-controls-row,
body[data-plot="only"] #results {
  display: none !important;
}
body[data-plot="only"] .lab-layout { display: block; }
body[data-plot="only"] .lab-right { width: 100%; }

body[data-static="true"] .app-body {
  display: block;
}

body[data-static="true"] .app-main {
  width: 100%;
  max-width: none;
}

body[data-static="true"] main {
  padding: 0.5rem;
  max-width: none;
}

/* Ensure SVG charts aren't clipped in static mode */
body[data-static="true"] svg {
  overflow: visible !important;
}

/* Slightly larger axis labels for print legibility */
body[data-static="true"] .tick text {
  font-size: 16px !important;
}

/* Force reduced motion for deterministic screenshots */
body[data-static="true"] *,
body[data-static="true"] *::before,
body[data-static="true"] *::after {
  animation-duration: 0s !important;
  transition-duration: 0s !important;
}

/* ═══════════════════════════════════════════════════════════════ */
/* Activity Panel — guided step-by-step instructions from JSON    */
/* Activated by ?activity=URL → body[data-activity="true"]        */
/* Desktop: fixed left side panel. Mobile: bottom sheet + FAB.    */
/* ═══════════════════════════════════════════════════════════════ */

/* Hide data panel when activity is active (dataset comes from URL params).
   Exception: activities that ask the student to load their own dataset opt in
   with "chooseData": true — they need the panel, so it stays visible. */
body[data-activity="true"]:not([data-activity-choosedata="true"]) #data-panel {
  display: none !important;
}

/* ─── Minimal chrome (opt-in per activity via "chrome": "minimal") ───
   For gentle conceptual intros, strip the host tool's advanced machinery —
   hypotheses + Swap, success selector, Copy link, More options, seed — down to
   just the mechanism strip, chart, generate bar, and the activity steps. The
   generate bar lives in #controls, so hide its clutter siblings, not the row. */
body[data-chrome="minimal"] #hypothesis-display,
body[data-chrome="minimal"] #success-selector,
body[data-chrome="minimal"] #seed-notice,
body[data-chrome="minimal"] .share-link-btn,
body[data-chrome="minimal"] .expert-toggle,
body[data-chrome="minimal"] .mech-view-toggle,
/* Minimal chrome also strips the stat / confidence-level / tail control row —
   the piece an activity would otherwise reveal. (Interactive activities keep it;
   only chrome:minimal intros hide it.) */
body[data-chrome="minimal"] .control-row {
  display: none !important;
}

/* ─── Desktop: left side panel ──────────────────────────────── */

.activity-panel {
  display: none;
}

@media (min-width: 769px) {
  .activity-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 320px;
    background: #f8f9fa;
    border-right: 2px solid #569BBD;
    padding: 1.25rem 1rem;
    overflow-y: auto;
    z-index: 100;
    font-size: 0.9rem;
    line-height: 1.5;
  }

  body[data-activity="true"] main {
    margin-left: 340px;
    max-width: calc(100vw - 360px);
  }

  /* Hide mobile elements on desktop */
  .activity-fab,
  .activity-sheet,
  .activity-sheet-backdrop {
    display: none !important;
  }
}

/* ─── Mobile: FAB + bottom sheet ────────────────────────────── */

@media (max-width: 768px) {
  .activity-panel {
    display: none !important;
  }

  .activity-fab {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #569BBD;
    color: #fff;
    border: none;
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    cursor: pointer;
    z-index: 200;
    transition: transform 0.2s, opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .activity-fab.hidden {
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
  }

  .activity-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 299;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }

  .activity-sheet-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  .activity-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 70vh;
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 0.75rem 1rem 1.5rem;
    overflow-y: auto;
    z-index: 300;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .activity-sheet.open {
    transform: translateY(0);
  }

  /* Peek — collapsed to a bottom bar so the tool shows and is interactive.
     Only the handle (with step hint) stays; body, nav and close hide. */
  .activity-sheet.open.peek {
    max-height: none;
    overflow: visible;
    padding-bottom: 0.5rem;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  }
  .activity-sheet.peek .activity-header,
  .activity-sheet.peek .activity-body,
  .activity-sheet.peek .activity-nav,
  .activity-sheet.peek .activity-sheet-close {
    display: none;
  }

  /* Keep the update toast clear of the collapsed peek bar (both sit bottom-center) */
  body[data-activity="true"] .update-toast {
    bottom: 5.5rem;
  }

  /* Handle doubles as the collapse/expand button (44px tap target) */
  .activity-sheet-handle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 44px;
    margin: 0 0 0.5rem;
    padding: 0.5rem 0 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
  }
  /* The grab bar itself, drawn as a pseudo-element above any hint text */
  .activity-sheet-handle::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: #ccc;
    border-radius: 2px;
  }
  /* "tap to expand" hint shows only when collapsed */
  .activity-peek-hint {
    display: none;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ims-dark, #114B5F);
  }
  .activity-sheet.peek .activity-peek-hint { display: inline; }
  .activity-sheet.peek .activity-sheet-handle { min-height: 48px; }

  .activity-sheet-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #595959;
    cursor: pointer;
    padding: 0.4rem;
    min-width: 44px;
    min-height: 44px;
    line-height: 1;
  }
}

/* ─── Shared panel content styles ───────────────────────────── */

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #dee2e6;
}

.activity-title {
  font-weight: 700;
  font-size: 1rem;
  color: #114B5F;
}

.activity-step-count {
  font-size: 0.8rem;
  color: #595959;
  white-space: nowrap;
}

.activity-end-btn {
  border: none;
  background: none;
  color: #595959;
  font-size: 1rem;
  line-height: 1;
  padding: 0.5rem;
  margin: -0.5rem -0.25rem -0.5rem 0;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  border-radius: 6px;
}
.activity-end-btn:hover { background: #eef5fa; color: var(--text, #1a1a1a); }

/* Gates inside the activity panel (reuses .gate-question/.gate-choice base) */
.activity-gate { margin: 0.75rem 0; }
.activity-gate .gate-choices { margin-top: 0.5rem; }
/* Committed prediction (no right answer) — neutral confirmation, no ✓ */
.gate-choice.committed {
  background: #e3f0f8;
  border-color: var(--ims-dark, #114B5F);
  border-width: 2px;
}
.gate-choice.committed::after { content: "●"; margin-left: auto; color: var(--ims-dark, #114B5F); }
.activity-gate-label {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ims-dark, #114B5F);
}
.activity-gate-discuss { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.activity-gate-discuss li { margin: 0.25rem 0; font-size: 0.9rem; }

/* Demo popups — animated illustrations opened from an activity step */
.activity-demo-btn {
  display: block;
  width: 100%;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ims-blue, #569BBD);
  border-radius: 6px;
  background: #eef5fa;
  color: var(--ims-dark, #114B5F);
  font-weight: 700;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  text-align: left;
  min-height: 44px;
}
.activity-demo-btn:hover { background: #dcecf6; }

.activity-demo-dialog {
  border: none;
  border-radius: 10px;
  padding: 1.25rem;
  max-width: min(720px, 92vw);
  width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.activity-demo-dialog::backdrop { background: rgba(17, 75, 95, 0.45); }
.demo-stage { min-height: 220px; }
.demo-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.demo-actions button {
  min-height: 44px;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}
.demo-play-btn { border: 1px solid var(--ims-dark, #114B5F); background: var(--ims-dark, #114B5F); color: #fff; }
.demo-play-btn:hover { background: #1a6480; }
.demo-close-btn { border: 1px solid var(--border, #ccc); background: #fff; color: var(--text, #1a1a1a); }

/* Card rendering inside demo popups (mirrors the conceptual walkthrough) */
.demo-stage .card-display {
  display: flex;
  gap: 1.5rem;
  margin: 0.5rem 0;
  flex-wrap: wrap;
  justify-content: center;
}
.demo-stage .card-group { flex: 1; min-width: 180px; max-width: 320px; }
.demo-stage .card-group h3 { font-size: 0.9rem; margin: 0 0 0.5rem; text-align: center; }
.demo-stage .cards { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.demo-stage .card {
  width: 24px;
  height: 31px;
  border-radius: 3px;
  border: 1px solid #999;
}
.demo-stage .card.demo-success { background: var(--ims-red, #F05133); }
.demo-stage .card.demo-failure { background: #f5f5f5; border-color: #ccc; }
.demo-stage .card-legend {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: #595959;
}
.demo-stage .card-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.demo-stage .card-legend .swatch {
  display: inline-block;
  width: 14px; height: 18px;
  border-radius: 2px;
  border: 1px solid #999;
}
.demo-stage .card-legend .swatch.success { background: var(--ims-red, #F05133); }
.demo-stage .card-legend .swatch.failure { background: #f5f5f5; border-color: #ccc; }
.demo-caption { margin: 0.75rem 0 0; font-size: 0.9rem; text-align: center; }

.activity-instruction {
  margin-bottom: 0.75rem;
  color: #212529;
}

/* Inline images embedded in activity steps (e.g. a comic) — responsive block,
   click/tap to open full-screen in a lightbox. */
.activity-img-wrap {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0.6rem auto;
}
.activity-img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--ims-border, #c9d6dc);
  border-radius: 6px;
  background: #fff;
  cursor: zoom-in;
}
.activity-img:focus-visible {
  outline: 2px solid var(--ims-blue, #569BBD);
  outline-offset: 2px;
}
/* "Enlarge" button (magnifying-glass-with-+ icon) sits ABOVE the image, aligned
   to its right edge — out of the way so it never covers part of the figure. */
.activity-img-zoom {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  width: fit-content;
  margin: 0 0 0.35rem auto;
  padding: 0.25rem 0.55rem;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ims-dark, #114B5F);
  background: var(--ims-blue-tint, #eef5f9);
  border: 1px solid var(--ims-border, #c9d6dc);
  border-radius: 5px;
  cursor: zoom-in;
}
.activity-img-zoom svg { display: block; flex: none; }
.activity-img-zoom:hover { background: #e2eef5; border-color: var(--ims-blue, #569BBD); }
.activity-img-zoom:focus-visible { outline: 2px solid var(--ims-blue, #569BBD); outline-offset: 2px; }

/* Full-screen lightbox (native <dialog>) — Escape/backdrop/✕ to close.
   Fits the image to WIDTH and scrolls vertically, so a tall narrow figure
   (e.g. a comic) is read at a comfortable size rather than shrunk to fit
   the viewport height. */
.activity-lightbox {
  border: none;
  padding: 0;
  margin: auto;
  background: transparent;
  width: 94vw;
  height: 94vh;
  max-width: 94vw;
  max-height: 94vh;
  overflow: auto;
  overscroll-behavior: contain;
}
.activity-lightbox::backdrop { background: rgba(0, 0, 0, 0.86); }
.activity-lightbox-img {
  display: block;
  width: min(680px, 94vw);
  height: auto;
  max-width: none;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.55);
  background: #fff;
}
.activity-lightbox-close {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.activity-lightbox-close:hover { background: rgba(0, 0, 0, 0.92); }
.activity-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.activity-observe {
  background: #EBF5FB;
  border-left: 3px solid #569BBD;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  border-radius: 0 4px 4px 0;
  font-size: 0.85rem;
}

.activity-observe-label {
  font-weight: 700;
  color: #569BBD;
}

/* ── Predict → Do → Explain phase cues (REQ-046) ──────────────────── */
/* Badge: names the current move. Backgrounds are darkened brand shades so
   white text clears WCAG AA (the raw #569BBD/#E07020 are too light as text
   backgrounds — see CLAUDE.md a11y notes); the strip dots below use the exact
   brand hues since a filled dot is graphical (3:1) not text. */
.activity-phase-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 2px 9px;
  border-radius: 10px;
  color: #fff;
  margin-bottom: 0.5rem;
}
.activity-phase-badge.phase-predict { background: #2A7AAB; }
.activity-phase-badge.phase-do      { background: #C05E10; }
.activity-phase-badge.phase-explain { background: #114B5F; }

/* Progress strip: one node per step, colored by phase where it has one
   (Predict start, Explain end), neutral for the unlabeled middle "Do" steps.
   Reached nodes are filled; upcoming ones are hollow so the arc reads ahead. */
.activity-progress {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  list-style: none;
  margin: 0.1rem 0 0.6rem;
  padding: 0;
}
.activity-progress .pstep {
  flex: 1 1 auto;
  min-width: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.activity-progress .pdot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-sizing: border-box;
  background: #fff;
  border: 2px solid #C9D3D8;   /* neutral, hollow by default */
}
.pstep-label {
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #6C6C6C;
  white-space: nowrap;
}
/* phase hues on the border (visible even while hollow/upcoming) */
.pstep.phase-predict .pdot { border-color: #569BBD; }
.pstep.phase-do      .pdot { border-color: #E07020; }
.pstep.phase-explain .pdot { border-color: #114B5F; }
.pstep.phase-predict .pstep-label { color: #2A7AAB; }
.pstep.phase-explain .pstep-label { color: #114B5F; }
/* reached (past + current) → fill with the hue */
.pstep.past.phase-predict .pdot, .pstep.current.phase-predict .pdot { background: #569BBD; }
.pstep.past.phase-do .pdot,       .pstep.current.phase-do .pdot      { background: #E07020; }
.pstep.past.phase-explain .pdot,  .pstep.current.phase-explain .pdot { background: #114B5F; }
.pstep.past.phase-none .pdot,     .pstep.current.phase-none .pdot    { background: #C9D3D8; }
/* current node emphasized */
.pstep.current .pdot { transform: scale(1.25); box-shadow: 0 0 0 3px rgba(86, 155, 189, 0.25); }
.pstep.past .pdot { opacity: 0.7; }

/* ── Free-text response capture (REQ-041) ─────────────────────────── */
.activity-respond {
  margin: 0.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.activity-respond-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.activity-respond-label {
  font-weight: 700;
  font-size: 0.85rem;
  color: #114B5F;
}
.activity-respond-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid #9BB7C4;
  border-radius: 4px;
  background: #fff;
  color: #1a1a1a;
  resize: vertical;
  min-height: 2.2rem;
}
.activity-respond-input:focus {
  outline: 2px solid #569BBD;
  outline-offset: 1px;
  border-color: #569BBD;
}
.activity-respond-input::placeholder { color: #7a8a91; }

/* REQ-044: "what to notice" note — appears once every field is filled. */
.activity-respond-answer {
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  background: #EBF5FB;
  border-left: 3px solid #569BBD;
  border-radius: 0 4px 4px 0;
  font-size: 0.85rem;
}
.activity-respond-answer[hidden] { display: none; }
.activity-respond-answer-label {
  font-weight: 700;
  color: #114B5F;
  margin-right: 0.25rem;
}

/* Action-gate hint: shown while a `requires` condition is unmet (do the thing). */
.activity-requires {
  background: #FCF3E7;
  border-left: 3px solid #E07020;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  border-radius: 0 4px 4px 0;
  font-size: 0.85rem;
  color: #8a4b16;
}

.activity-reveal-section {
  margin-bottom: 0.75rem;
}

.activity-reveal-btn {
  background: none;
  border: 1px solid #569BBD;
  color: #569BBD;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
  transition: background 0.15s;
}

.activity-reveal-btn:hover {
  background: #EBF5FB;
}

.activity-reveal {
  display: none;
  background: #f0f7fb;
  border-left: 3px solid var(--ims-blue, #569BBD);
  padding: 0.5rem 0.75rem;
  border-radius: 0 4px 4px 0;
  font-size: 0.85rem;
  color: #114B5F;
}

.activity-reveal.open {
  display: block;
}

.activity-nav {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid #dee2e6;
}

.activity-nav button {
  background: #569BBD;
  color: #fff;
  border: none;
  padding: 0.4rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.15s;
}

.activity-nav button:hover:not(:disabled) {
  background: #457a99;
}

.activity-nav button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════════════════
   TEMP LAYOUT VARIANTS  (experimental — remove once a layout is chosen)
   Driven by body[data-layout="…"] set in settings.js. Behavior for rail/focus
   lives in js/layout-variants.js. Variants: tight / rail / focus.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── A: TIGHT (also the base for FOCUS) ───
   Condense the stacked bands and cap the chart height so the whole page fits
   a ~768px laptop window without scrolling. */
body[data-layout="tight"] h1,
body[data-layout="focus"] h1 { margin-bottom: 0.4rem; }

body[data-layout="tight"] .app-body,
body[data-layout="focus"] .app-body { margin: 0.3rem 0; }

body[data-layout="tight"] #chart-container,
body[data-layout="focus"] #chart-container { margin: 0.35rem 0; }

body[data-layout="tight"] .mechanism-strip,
body[data-layout="focus"] .mechanism-strip {
  margin: 0.4rem 0;
  padding: 0.35rem 0.6rem;
}

/* Collapse the two control rows (H0 / Ha) and the generate bar onto fewer lines */
body[data-layout="tight"] #controls,
body[data-layout="focus"] #controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.25rem;
}
body[data-layout="tight"] .hypothesis-display,
body[data-layout="focus"] .hypothesis-display {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.25rem;
  margin: 0;
}
body[data-layout="tight"] .hypothesis-row,
body[data-layout="focus"] .hypothesis-row { margin: 0; }

/* When hypotheses and run-controls share a row, group the generate bar into a
   pill with a blue left-accent so it reads as a distinct "run the simulation"
   zone, separated from the hypothesis setup. Wrap-safe at any width. */
body[data-layout="tight"] #controls > .generate-bar,
body[data-layout="focus"] #controls > .generate-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ims-blue);
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  gap: 0.3rem;
}
/* "Run:" label leading the pill — decorative; the group already has an
   aria-label ("Generate shuffles") for screen readers. */
body[data-layout="tight"] #controls > .generate-bar::before,
body[data-layout="focus"] #controls > .generate-bar::before {
  content: "Run:";
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ims-blue-text);
  margin-right: 0.15rem;
}

/* Cap chart height: constrain the chart column width so the viewBox (600×371)
   scales down proportionally. ~540px wide → ~334px tall. */
@media (min-width: 768px) {
  body[data-layout="tight"] .app-main,
  body[data-layout="focus"] .app-main {
    max-width: 540px;
  }
}

/* Tighten the mechanism strip internals */
body[data-layout="tight"] .mechanism-title,
body[data-layout="focus"] .mechanism-title { margin-bottom: 0.1rem; }
body[data-layout="tight"] .mechanism-collapse-bar,
body[data-layout="focus"] .mechanism-collapse-bar { margin-bottom: 0.1rem; }
body[data-layout="tight"] .mech-card-display,
body[data-layout="focus"] .mech-card-display { gap: 0.4rem; }

/* ─── B: SIDE RAIL ───
   Mechanism strip is moved into the right rail (by js/layout-variants.js); orient
   it vertically there and let the chart use the full main column. */
@media (min-width: 768px) {
  body[data-layout="rail"] main:has(.app-body) { max-width: 1180px; }
  body[data-layout="rail"] .app-body { grid-template-columns: 1fr 360px; }
}
body[data-layout="rail"] .app-sidebar .mechanism-strip {
  margin: 0.75rem 0 0;
}
body[data-layout="rail"] .app-sidebar .mechanism-panels {
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
}
body[data-layout="rail"] .app-sidebar .mechanism-arrow {
  align-self: center;
  transform: rotate(90deg);
}
/* Cards/bars get the full rail width when stacked */
body[data-layout="rail"] .app-sidebar .mech-card-display { justify-content: flex-start; }

/* ─── C: PROGRESSIVE FOCUS ───
   Inherits TIGHT. The mechanism strip auto-collapses on mass simulation
   (js/layout-variants.js); the existing .collapsed CSS hides the panels and
   shows the one-line summary, handing the screen to the distribution. */
/* (no extra CSS needed — .collapsed rules already exist) */

/* ════════════════════════════════════════════════════════════════════════
   COACHING LAYER  (opt-in, prototype) — body[data-coach="true"]
   State-driven hints for novices. coaching.js sets data-sim-state on body.
   See project_onboarding_coaching_design memory.
   ════════════════════════════════════════════════════════════════════════ */

/* Next-step line — lives at the top of the results sidebar. Shown only while
   the student is running/building the distribution; the empty-state coach over
   the chart carries the earlier "start here" cue, so this never occupies the
   prime top real estate. */
.coach-line {
  display: none;
  margin: 0;
  padding: 0.45rem 0.7rem;
  background: var(--ims-blue-light, #569BBD30);
  border-left: 3px solid var(--ims-blue);
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--ims-blue-text);
  line-height: 1.4;
}
body[data-coach="true"][data-sim-state="running"] .coach-line,
body[data-coach="true"][data-sim-state="built"] .coach-line { display: block; }
.coach-line strong { color: var(--ims-blue-text); font-weight: 700; }
/* The results card carries its own top margin; drop it when the hint sits
   directly above so they don't double up (only the sidebar's flex gap remains). */
.coach-line + #result-summary { margin-top: 0; }

/* Empty-state coach overlaid on the chart area before results exist */
#chart { position: relative; }
.coach-empty {
  display: none;
  position: absolute;
  inset: 0;
  min-height: 180px;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  color: var(--ims-gray-text);
  font-size: 1rem;
  line-height: 1.6;
  pointer-events: none;
}
body[data-coach="true"][data-sim-state="empty"] .coach-empty,
body[data-coach="true"][data-sim-state="loaded"] .coach-empty { display: flex; }
.coach-empty-msg { display: block; max-width: 22rem; }
.coach-empty strong { color: var(--ims-blue-text); }

/* Emphasize the first action only: +1 ("do one shuffle").
   Filled blue + ring so it clearly stands out from the other generate buttons.
   After the first shuffle the next-step line takes over (no button hopping). */
body[data-coach="true"][data-sim-state="loaded"] .gen-btn[data-count="1"] {
  background: var(--ims-blue);
  color: #fff;
  border-color: var(--ims-blue);
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(86, 155, 189, 0.30);
  transform: scale(1.06);
}

/* Gentle attention pulse on the emphasized button (motion-safe) */
@media (prefers-reduced-motion: no-preference) {
  body[data-coach="true"][data-sim-state="loaded"] .gen-btn[data-count="1"] {
    animation: coach-pulse 1.8s ease-in-out infinite;
  }
  @keyframes coach-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(86, 155, 189, 0.30); }
    50%      { box-shadow: 0 0 0 7px rgba(86, 155, 189, 0.12); }
  }
}

/* "New to this tool?" guided-walkthrough callout in the help dialog */
.help-guided {
  background: var(--ims-blue-light, #569BBD30);
  border: 1px solid var(--ims-blue);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  margin: 0 0 1rem;
}
.help-guided p { margin: 0 0 0.5rem; }
.help-guided-link {
  display: inline-block;
  background: var(--ims-blue);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
}
.help-guided-link:hover { background: var(--ims-blue-text); }
.help-guided-link:focus-visible { outline: 2px solid var(--ims-blue-text); outline-offset: 2px; }

/* Bars/Cards view toggle in the mechanism strip (two-group proportion demos).
   Rides the collapse-bar row at top-right, so it costs no extra vertical space. */
.mech-view-toggle { margin-right: 0.5rem; }
@media (max-width: 600px) {
  .mech-view-toggle { margin-right: 0; }
}

/* ===== Post-hoc pairwise comparisons (ANOVA, REQ-026) ===== */
#posthoc-section { margin: 1rem 0; padding: 1rem 1.1rem; border: 1px solid #D9E4EA;
  border-radius: 10px; background: #fff; }
.posthoc-head { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.posthoc-head h2 { margin: 0; font-size: 1.1rem; color: #114B5F; }
.posthoc-sub { font-weight: 400; font-size: 0.82rem; color: #5C7480; }
.posthoc-note { font-size: 0.9rem; margin: 0 0 10px; line-height: 1.4; }
.posthoc-note .muted { color: #5C7480; }
.posthoc-forest { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto 12px; }
.forest-label { font-size: 12px; fill: #1A2B33; }
.forest-tick { font-size: 10px; fill: #5C7480; text-anchor: middle; }
.posthoc-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.posthoc-table th, .posthoc-table td { padding: 5px 8px; text-align: left; border-bottom: 1px solid #eee; }
.posthoc-table th { color: #114B5F; white-space: nowrap; }
.posthoc-table tr.sig { background: #FDECEA; font-weight: 600; }

/* Cross-tool handoff link (E1) — "carry this data to another tool". */
.tool-handoff { margin-top: 0.85rem; }
.tool-handoff[hidden] { display: none; }
.handoff-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-weight: 600; color: #114B5F; text-decoration: none;
  padding: 0.45rem 0.7rem; border-radius: 6px;
  border: 1px solid #569BBD; background: #fff;
  min-height: 44px; box-sizing: border-box;
}
.handoff-link:hover, .handoff-link:focus-visible { background: #eef6fa; text-decoration: underline; }

/* B3: two-means bootstrap dotplot cells (mirror .mech-hist-cell sizing). */
.mech-dot-cell { min-height: 90px; display: flex; align-items: center; justify-content: center; }
.mech-dot-cell svg { max-width: 100%; }

/* C3: linked formula values ↔ their source (sample summary / hypothesis). */
.fx-val { cursor: help; border-radius: 2px; }
.fx-src { cursor: help; border-radius: 2px; padding: 0 2px; }
.fx-lit { background: #FFE9C7 !important; outline: 2px solid #E07020; outline-offset: 1px; border-radius: 3px; }

/* REQ-027: predict-at-x₀ section on the slope inference page. */
.predict-at .x0-label { display: block; white-space: nowrap; margin: 0.3rem 0 0.6rem; font-weight: 600; }
.predict-at #x0-input { display: inline-block; width: 7em; min-height: 40px; padding: 0.3rem 0.5rem; vertical-align: middle; margin-left: 0.3rem; box-sizing: border-box; }
#x0-readout p { margin: 0.35rem 0; }

/* Regression explorer: bands legend + interactive x₀ prediction panel. */
.bands-legend:not([hidden]) { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0.4rem 0 0.2rem; font-size: 0.85rem; }
.bands-legend .legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend-swatch { display: inline-block; width: 22px; height: 12px; border-radius: 2px; vertical-align: middle; }
.legend-ci { background: rgba(86,155,189,0.28); border: 1px solid #569BBD; }
.legend-pi { background: rgba(224,112,32,0.10); border: 1px dashed #E07020; }
.predict-panel { margin: 0.5rem 0 0.2rem; padding: 0.6rem 0.75rem; background: #f7fafc; border: 1px solid var(--ims-border, #d9e2e8); border-radius: 8px; }
.predict-panel .x0-label { display: inline-block; white-space: nowrap; font-weight: 600; }
.predict-panel #reg-x0-input { display: inline-block; width: 7em; min-height: 40px; padding: 0.3rem 0.5rem; vertical-align: middle; margin-left: 0.3rem; box-sizing: border-box; }
.predict-drag-hint { margin-left: 0.5rem; }
#reg-x0-readout p { margin: 0.3rem 0; }

/* Extrapolation warning in the regression prediction readout. */
.extrap-warn { color: #C43D1A; font-weight: 600; }

/* "Count as success" selector — surfaced in Test parameters (not the collapsing data panel). */
.success-selector-row { margin: 0 0 0.6rem; font-weight: 600; }
.success-selector-row select { min-height: 40px; margin-left: 0.4rem; padding: 0.25rem 0.4rem; }

/* Help dialog feature list. */
.help-list { margin: 0.5rem 0 0.75rem; padding-left: 1.2rem; }
.help-list li { margin: 0.35rem 0; }

/* Worked prediction equation ŷ = b₀ + b₁x in the readout. */
.predict-eqn { font-size: 1.02rem; margin: 0.2rem 0 0.4rem; }


/* Confidence-level control lives with the CI in the results sidebar (kept clearly
   apart from the hypothesis test + figure to avoid conflating it with a sig. level). */
.ci-level-control { margin: 0 0 0.7rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--ims-border, #e2e8ee); }
.ci-level-control label { display: inline-flex; flex-direction: row; align-items: baseline; gap: 0.4rem; font-size: 0.9rem; font-weight: 600; }
.ci-level-control input[type="number"] { width: 4.5rem; display: inline-block; }
.ci-level-control select { width: auto; }

/* ── Draggable cutoff lines (reasoning-mode ?cutlines= overlay) ──────────────
   Vertical lines a student drags to read tail mass off the label instead of
   counting bars. Keyboard-accessible (each line is a role="slider"). */
.cutline { cursor: ew-resize; }
.cutline:focus { outline: none; }
/* Visible focus indicator: thicken + solidify the grip and add a ring, since
   SVG outline rendering is unreliable across browsers. */
.cutline:focus-visible .cutline-grip {
  stroke: #114B5F;
  stroke-width: 2.5;
  paint-order: stroke;
}
.cutline:focus-visible .cutline-line,
.cutline:focus-visible line {
  stroke-width: 3.5;
  stroke-dasharray: none;
}
.cutline-xval { paint-order: stroke; }
.cutline-hit { touch-action: none; }
/* −/+ fine-adjust buttons flanking the x-value pill. */
.cutline-stepbtn { cursor: pointer; }
.cutline-stepbtn-bg {
  fill: #ffffff;
  stroke: #114B5F;
  stroke-width: 1.5;
}
.cutline-stepbtn:hover .cutline-stepbtn-bg { fill: #e8f2f7; stroke: #569BBD; }
.cutline-stepbtn:focus { outline: none; }
.cutline-stepbtn:focus-visible .cutline-stepbtn-bg { stroke: #569BBD; stroke-width: 2.75; }
.cutline-stepbtn-tx {
  fill: #114B5F;
  font-size: 17px;
  font-weight: 700;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
@media (prefers-reduced-motion: reduce) {
  .cutline, .cutline * { transition: none !important; }
}

/* ── Variable selector row (proportion inference tools) ──────────────────────
   Sits between the data panel and the controls so it stays visible after the
   data panel auto-collapses and on the file/paste tabs — matching the means
   tools, so a multi-variable CSV can be re-pointed at any categorical column. */
.var-selector-row { margin: 0 0 0.6rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; align-items: center; }
.var-selector-row label { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; margin: 0; }
.var-selector-row select { width: auto; }

/* Selector bar: grouping / outcome (+ "count as success" on the proportion
   tools) and the group-swap button flow across one row on desktop and wrap on
   narrow screens — keeping vertical space tight. */
.selector-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.5rem; margin: 0 0 0.6rem; }
.selector-bar .var-selector-row,
.selector-bar .success-selector-row { margin: 0; }
.selector-bar .group-order { margin-left: auto; }

/* Hypotheses on the left, the group-swap button on the right (desktop); the
   button wraps beneath the hypotheses on narrow screens. */
.hypothesis-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.35rem 1.5rem; }
.hypothesis-bar .hypothesis-display { padding-bottom: 0; }
.hypothesis-bar .group-order { margin-left: auto; }

/* ── Group ↔ p̂₁/p̂₂ + success legend (two-proportion tools) ──────────────────
   Names which group is Group 1 (p̂₁) vs Group 2 (p̂₂) and the success level, so
   the sign of the difference and CI is explicit rather than inferred. */
.group-legend {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; align-items: baseline;
  margin: 0.5rem 0 1rem; padding: 0.6rem 0.85rem;
  background: #f2f8fb; border: 1px solid var(--ims-border, #e2e8ee);
  border-left: 3px solid var(--ims-blue, #569BBD); border-radius: 6px;
  font-size: 0.88rem; line-height: 1.45;
}
.group-legend strong { color: #114B5F; }
.group-legend .legend-diff { color: #555; font-style: italic; }

/* ── Test ↔ CI cross-link (inference tools) ─────────────────────────────────
   Small pointer under the heading so a student who opened the test page when
   they wanted the interval (or vice versa) can hop to the companion page. */
.tool-crosslink { margin: 1.2rem 0 0.4rem; padding-top: 0.9rem; border-top: 1px solid var(--border, #e2e8ee); font-size: 0.86rem; color: #555; }
.tool-crosslink a { color: var(--ims-blue, #569BBD); font-weight: 600; text-decoration: none; }
.tool-crosslink a:hover { text-decoration: underline; }

/* ── Goodness-of-fit simulation tool (simulate/goodness-of-fit/) ────────────── */
/* Manual "Enter Counts" table. */
.gof-input { border-collapse: collapse; margin: 0.4rem 0; width: 100%; max-width: 30rem; }
.gof-input th, .gof-input td { padding: 0.2rem 0.4rem; text-align: left; }
.gof-input th { font-size: 0.85rem; color: var(--ims-gray-text); font-weight: 600; }
.gof-input input[type="text"] { width: 8rem; }
.gof-input input[type="number"] { width: 5rem; }
.btn-icon {
  border: none; background: none; cursor: pointer; font-size: 1.1rem; line-height: 1;
  color: var(--ims-gray-text); padding: 0.15rem 0.4rem; border-radius: 4px;
}
.btn-icon:hover, .btn-icon:focus-visible { color: #c0392b; background: #f6e9e9; }

/* Mechanism-strip mini bars: observed vs one simulated sample under H0. */
.gof-bars { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.3rem 0; }
.gof-bar-row { display: grid; grid-template-columns: 6.5rem 1fr 2.2rem; align-items: center; gap: 0.4rem; font-size: 0.8rem; }
.gof-bar-cat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gof-bar-track { position: relative; height: 14px; background: #eef3f6; border-radius: 3px; }
.gof-bar-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--ims-blue, #569BBD); border-radius: 3px; }
/* Dashed marker at the expected count (n·p0) so deviation from H0 is visible. */
.gof-bar-exp { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 2px dashed #114B5F; }
.gof-bar-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Goodness-of-fit hypotheses block (per-category hypothesized proportions). */
.gof-hypotheses { font-size: 0.95rem; line-height: 1.5; }
.gof-hypotheses .hypothesis-row { align-items: baseline; }
.gof-hypotheses sub { font-size: 0.72em; }

/* ── `hidden` must actually hide the variable selectors ────────────────────
   Every page using this block sets `display: flex` in its own <style>, which
   outranks the plain `hidden` attribute — so the empty "Grouping variable" /
   "Response variable" dropdowns showed on every load before a dataset was
   chosen (REQ-057 item 1, Todd Will). !important because some pages scope the
   rule by id, which outranks a class+attribute selector on specificity. */
.var-selectors[hidden],
#var-selectors[hidden] { display: none !important; }

/* ── Shared inline label (pays down D-18) ──────────────────────────────────
   The global `label { display:flex; flex-direction:column }` stacks a control
   under its text, and any inline element inside the text (an <i>, a <code>)
   becomes its own flex item and takes its own line. Any label that should read
   as ONE row uses this instead of re-deriving the same three !important lines
   per page. Second consumer is the data panel's "My data has headers" toggle,
   which is injected onto 36 pages. */
.inline-label {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 0.4rem;
}
.inline-label > span { white-space: nowrap; }

/* The header toggle sits under its panel's control, with its own quiet note. */
/* The URL half of the "Open File/URL" panel — injected by initDataPanel, so it
   has no page-template CSS of its own. */
.url-open { margin-top: 0.85rem; padding-top: 0.7rem; border-top: 1px solid var(--border); }
.url-open .data-url-input { display: block; width: 100%; max-width: 42rem; margin-top: 0.35rem; }
.url-open .btn-row { margin-top: 0.5rem; }
#data-url-note { margin-top: 0.5rem; }

.header-toggle-row { margin-top: 0.5rem; }
.header-toggle-note { margin: 0.2rem 0 0; }
.header-toggle-note[hidden] { display: none; }