/**
 * Statulator — Components
 * ========================
 * Hand-rolled UI components and Bootstrap overrides. Loads AFTER tokens.css
 * and base.css, BEFORE utilities.css.
 *
 * Structure:
 *   1. Brand button overrides (btn-primary, btn-outline-primary)
 *   2. Badges & alert tints
 *   3. Accordion, slider, flot-chart
 *   4. Popover / inline help
 *   5. Help pages (section headings, formula-box, example-box, step-number)
 *   6. Textbook example chips
 *   7. Landing page feature icons
 *   8. Descriptive page button state
 *   9. StatPlot (variable chips, graph cards, customisation panel, drop-zone)
 *  10. Theme toggle + section band
 *  11. Brand-blue AA Normal overrides (tinted surface links)
 *  12. Loaded-CSV banner + help-page sidebar nav + stat-chart-panel
 *  13. Dark-mode component overrides (bg-light, table-light, buttons, etc.)
 */


/* ==========================================================================
   1. Brand button overrides
   ========================================================================== */

/* Solid primary button — classic legacy blue with darker border */
.btn-primary {
  --bs-btn-bg:                  #337ab7;
  --bs-btn-border-color:        #2e6da4;
  --bs-btn-hover-bg:            #286090;
  --bs-btn-hover-border-color:  #204d74;
  --bs-btn-active-bg:           #204d74;
  --bs-btn-active-border-color: #1b3c5f;
  --bs-btn-disabled-bg:         #337ab7;
  --bs-btn-disabled-border-color: #2e6da4;
}

/* Outline-primary (study-design toggle group) — checked state flips to the
   solid brand blue via Bootstrap's .btn-check:checked + .btn rule. */
.btn-outline-primary {
  --bs-btn-color:               #337ab7;
  --bs-btn-border-color:        #337ab7;
  --bs-btn-hover-bg:            #337ab7;
  --bs-btn-hover-border-color:  #2e6da4;
  --bs-btn-active-bg:           #286090;
  --bs-btn-active-border-color: #204d74;
}


/* ==========================================================================
   2. Badges & alerts
   ========================================================================== */

/* Badge / highlight colours */
.bg-primary { background-color: #337ab7 !important; }
.bg-info    { background-color: #5bc0de !important; }

/* Alert-success tint used for the section banner */
.alert-success {
  --bs-alert-bg:         #dff0d8;
  --bs-alert-border-color: #d6e9c6;
  --bs-alert-color:      #3c763d;
}

/* Variable-type badges — Bootstrap 5.3's `.bg-info` is a light cyan
   (#5bc0de) and pairs with white text at only 2.09:1, failing AA Large
   (3:1). Darken to Bootstrap's cyan-800 (#087990) so the label reads at
   5.06:1 (AA Normal). Scoped to `.badge.bg-info` to leave other uses
   (banners, alerts) untouched. */
.badge.bg-info {
  --bs-bg-opacity: 1;
  background-color: #087990 !important;
  color: #fff;
}


/* ==========================================================================
   3. Accordion / slider / flot-chart
   ========================================================================== */

.accordion-button {
  text-decoration: none;
}

.accordion-button::after {
  flex-shrink: 0;
}

#inputSlider .slider-selection {
  background: #bababa;
}

.flot-chart {
  display: block;
  height: 400px;
}

.flot-chart-content {
  width: 100%;
  height: 100%;
}


/* ==========================================================================
   4. Popover / inline help icon trigger
   ========================================================================== */

.popover {
  max-width: 450px;
}

/* Consistent look for inline help-icon popover triggers across the site */
.statulatorPopover {
  padding: 0 .15rem;
  line-height: 1;
  color: var(--bs-link-color, #337ab7);
  text-decoration: none;
  vertical-align: baseline;
}
.statulatorPopover:hover,
.statulatorPopover:focus {
  color: var(--bs-link-hover-color, #23527c);
  text-decoration: none;
}
.statulatorPopover .bi {
  font-size: 0.9em;
}


/* ==========================================================================
   5. Help pages — section headings, formula-box, example-box, step-number
   ========================================================================== */

.help-section {
  margin-bottom: 2.5rem;
}

.help-section h3 {
  border-bottom: 2px solid var(--stat-brand);
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}

.formula-box {
  background: var(--stat-formula-bg);
  border-left: 4px solid var(--stat-brand);
  padding: 1.2rem 1.5rem;
  margin: 1rem 0;
  border-radius: 0 0.25rem 0.25rem 0;
}

.example-box {
  background: var(--stat-example-bg);
  border: 1px solid var(--stat-example-border);
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin: 1rem 0;
}

.step-number {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: var(--stat-brand);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 28px;
  font-weight: bold;
  margin-right: 0.5rem;
  font-size: 0.85rem;
}

/* Dark mode lifts --stat-brand to #6ea8d4 for link/text legibility, but
   that washes out as a pill background behind white text (2.56:1, AA
   Normal fail). Re-darken just this surface so the pill keeps its brand
   feel while clearing 4.5:1 with white. */
[data-bs-theme="dark"] .step-number {
  background: #2d6da8; /* 5.43:1 on #fff */
}

.ref-list li {
  margin-bottom: 0.5rem;
}

.where-list {
  list-style: none;
  padding-left: 0;
}

.where-list li {
  margin-bottom: 0.3rem;
}

.back-link {
  font-size: 0.9rem;
}

table.param-table th,
table.param-table td {
  vertical-align: middle;
}


/* ==========================================================================
   6. Textbook example cards
   ========================================================================== */

.tb-example {
  background: var(--stat-surface);
  border: 1px solid var(--stat-border);
  border-radius: 0.5rem;
  padding: 1.2rem 1.5rem;
  margin-bottom: 1rem;
}

.tb-example .tb-field {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
}

.tb-example .tb-field-med { background: #d1ecf1; color: #0c5460; }
.tb-example .tb-field-edu { background: #d4edda; color: #155724; }
.tb-example .tb-field-eng { background: #fff3cd; color: #856404; }
.tb-example .tb-field-soc { background: #e2d9f3; color: #4a2d7a; }
.tb-example .tb-field-agr { background: #f5deb3; color: #6b4226; }

.tb-example .tb-scenario {
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.tb-example .tb-details {
  font-size: 0.9rem;
  color: var(--stat-subtle-text);
}


/* ==========================================================================
   7. Landing page — feature icons / step numbers
   ========================================================================== */

.feature-icon {
  font-size: 2.5em;
  color: var(--stat-brand);
  margin-bottom: 10px;
}

.feature-step-number {
  font-size: 2.5em;
  font-weight: 700;
  color: var(--stat-brand);
}


/* ==========================================================================
   8. Descriptive page — inactive button state
   ========================================================================== */

.btn-inactive {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(40%);
}
.btn-inactive:hover {
  opacity: 0.6;
}


/* ==========================================================================
   9. StatPlot — variable chips, graph cards, customisation, drop-zone
   ========================================================================== */

.gp-var-chip {
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 0.88rem;
  transition: all 0.15s;
}
.gp-var-chip.active,
.gp-var-chip.btn-dark {
  background-color: #212529;
  border-color: #212529;
  color: #fff;
}

.gp-graph-card {
  border-radius: 8px;
  padding: 10px 16px;
  min-width: 170px;
  max-width: 220px;
  transition: all 0.15s;
}
.gp-graph-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}
.gp-graph-card small {
  font-size: 0.78rem;
  line-height: 1.3;
}

/* Customisation panel */
#gpCustomPanel .form-label {
  margin-bottom: 0.25rem;
}
#gpCustomPanel .form-control-sm {
  font-size: 0.82rem;
}
#gpCustomCollapse .card-body {
  max-height: 320px;
  overflow-y: auto;
}
#gpThemeBtns .btn,
#gpPaletteBtns .btn {
  margin-bottom: 2px;
}

/* Floating success banner (file-upload toast) */
#alert2 {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  min-width: 420px;
  max-width: 600px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  text-align: center;
}

/* Drag-and-drop zone for CSV loading */
.drop-zone {
  position: relative;
  border: 2px dashed var(--stat-dropzone-border);
  border-radius: 8px;
  padding: 12px;
  background-color: var(--stat-dropzone-bg);
  transition: border-color .15s ease, background-color .15s ease;
}
.drop-zone:hover {
  border-color: var(--stat-dropzone-hover);
}
.drop-zone.drop-active {
  border-color: var(--stat-brand);
  background-color: rgba(var(--stat-brand-rgb), 0.08);
}
.drop-zone-hint {
  pointer-events: none;
  user-select: none;
}
.drop-zone-hint a {
  pointer-events: auto;
  user-select: auto;
}

/* Analysis buttons: equal height & pill-style help icon in top-right */
.btn-wrap {
  position: relative;
}
.btn-analysis {
  min-height: 56px;
  padding: 8px 14px;
  white-space: nowrap;
}
.btn-help {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.8rem;
  line-height: 1;
  color: var(--stat-brand);
  text-decoration: none;
  z-index: 2;
  padding: 2px;
}
.btn-help:hover {
  color: var(--stat-brand-hover);
}


/* ==========================================================================
   10. Theme toggle + muted section band
   ========================================================================== */

/* Theme toggle button — always white on the dark navbar regardless of theme. */
#themeToggle {
  color: rgba(255, 255, 255, 0.85);
  border: 0;
  background: transparent;
  box-shadow: none;
}
#themeToggle:hover,
#themeToggle:focus {
  color: #fff;
  text-decoration: none;
}
#themeToggle .bi {
  font-size: 1.05rem;
  vertical-align: middle;
}

/* Muted section band — home page "How It Works" and any full-width section
   needing a subtle tonal separation. Adapts to dark via --stat-surface-muted. */
.stat-section-muted {
  background-color: #f8f9fa;
}
[data-bs-theme="dark"] .stat-section-muted {
  background-color: var(--stat-surface-muted);
}


/* ==========================================================================
   11. Brand-blue AA Normal fixes — link text on tinted surfaces
   The default #337ab7 brand blue is WCAG AA Large compliant (3:1) but
   drops below AA Normal (4.5:1) as link text on tinted backgrounds.
   Override with --stat-brand-on-muted (#2f6fa8) which clears 4.5:1 on
   #f5f5f5 (footer), #f8f9fa (muted), and #e8f5e9 (loaded banner).
   Scoped narrowly so unrelated brand uses keep their canonical blue.
   ========================================================================== */

.footer a,
.stat-loaded-banner a,
.example-box a {
  color: var(--stat-brand-on-muted);
}

/* Home "How It Works" band — step-number divs use inline `color: var(--stat-brand)`.
   Swap the local --stat-brand token on this section so the inline rule
   still resolves to a token but lands on the darker shade. */
section.stat-section-muted {
  --stat-brand: var(--stat-brand-on-muted);
}


/* ==========================================================================
   12. Loaded-CSV banner + help sidebar nav + StatPlot chart panel
   ========================================================================== */

/* "Loaded: <filename>.csv" banner on Dataset Analysis. Theme-aware palette. */
.stat-loaded-banner {
  background-color: #e8f5e9;
  border-color: #c8e6c9 !important; /* .alert.border utility wins on color otherwise */
  color: #1b5e20;
}
.stat-loaded-banner .text-muted {
  color: #3b6a3e !important;
}

/* Help-page sidebar nav links (injected by help/js/help-sidebar.js). Colors
   live in CSS so dark mode can re-theme them; active links still override
   inline with the group / scrollspy colour. */
.help-nav-link,
.help-section-link {
  color: #495057;
}
.help-nav-link:hover,
.help-section-link:hover {
  color: #0d6efd;
}
.help-section-link.active {
  color: #0d6efd;
  font-weight: 600;
}

/* StatPlot chart container — sits inside #graphpadModal.
   Uses Bootstrap theme tokens so it tracks light/dark automatically. */
.stat-chart-panel {
  background: var(--bs-tertiary-bg, #fafafa);
  border: 1px solid var(--bs-border-color, #eee);
}


/* ==========================================================================
   13. DARK MODE — Component-specific overrides
   Bootstrap 5.3 flips core tokens under [data-bs-theme="dark"] automatically.
   The overrides below are for hand-rolled components that don't pick up the
   Bootstrap token switch.
   ========================================================================== */

/* Re-skin the solid brand button so it works on dark surfaces without
   washing out. Default bg darkened from #3d85c0 (3.95:1 vs white, AA
   Normal fail) to #336fa0 (5.35:1) — the prior default bg now serves
   as the hover tint. */
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg:                   #336fa0;
  --bs-btn-border-color:         #285982;
  --bs-btn-hover-bg:             #3d85c0;
  --bs-btn-hover-border-color:   #336fa0;
  --bs-btn-active-bg:            #285982;
  --bs-btn-active-border-color:  #1f4567;
  --bs-btn-disabled-bg:          #336fa0;
  --bs-btn-disabled-border-color:#285982;
  --bs-btn-color:                #fff;
}

/* btn-outline-secondary dark mode — Bootstrap's default text colour
   #6c757d reads at 3.29:1 on the #212529 body (AA Normal fail). Lift
   to #adb5bd (Bootstrap's --bs-secondary-color dark default) for
   7.43:1. Hover inverts to dark text on the light fill. */
[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color:                 #adb5bd;
  --bs-btn-border-color:          #adb5bd;
  --bs-btn-hover-color:           #212529;
  --bs-btn-hover-bg:              #adb5bd;
  --bs-btn-hover-border-color:    #adb5bd;
  --bs-btn-active-color:          #212529;
  --bs-btn-active-bg:             #adb5bd;
  --bs-btn-active-border-color:   #adb5bd;
  --bs-btn-disabled-color:        #adb5bd;
  --bs-btn-disabled-border-color: #adb5bd;
}

[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color:                #9dc3e6;
  --bs-btn-border-color:         #6ea8d4;
  --bs-btn-hover-bg:              #3d85c0;
  --bs-btn-hover-border-color:    #3d85c0;
  --bs-btn-hover-color:           #fff;
  --bs-btn-active-bg:             #336fa0;
  --bs-btn-active-border-color:   #336fa0;
}

/* btn-outline-dark is used by .btn-analysis (Univariate / Bivariate /
   Stat Analysis / StatPlot) and the file-picker. In dark mode the default
   dark-on-dark palette is invisible — remap tokens to a light outline. */
[data-bs-theme="dark"] .btn-outline-dark {
  --bs-btn-color:                 var(--bs-body-color);
  --bs-btn-border-color:          rgba(255, 255, 255, 0.45);
  --bs-btn-hover-color:           #212529;
  --bs-btn-hover-bg:              var(--bs-body-color);
  --bs-btn-hover-border-color:    var(--bs-body-color);
  --bs-btn-active-color:          #212529;
  --bs-btn-active-bg:             var(--bs-body-color);
  --bs-btn-active-border-color:   var(--bs-body-color);
  --bs-btn-disabled-color:        var(--bs-body-color);
  --bs-btn-disabled-border-color: rgba(255, 255, 255, 0.25);
}

/* .btn-inactive uses opacity:0.5 which stacks with the dim dark palette;
   lift opacity so inactive still reads as clickable. */
[data-bs-theme="dark"] .btn-analysis.btn-inactive,
[data-bs-theme="dark"] .btn-outline-dark.btn-inactive {
  opacity: 0.75;
}

/* Section banner alert-success — the legacy light-green tint is illegible
   on dark; use Bootstrap's dark-theme tinted-alert tokens instead. */
[data-bs-theme="dark"] .alert-success {
  --bs-alert-bg:           #1e3a2a;
  --bs-alert-border-color: #2d5a42;
  --bs-alert-color:        #a7d7b7;
}

/* Textbook example field chips — dim the saturated light-mode tints. */
[data-bs-theme="dark"] .tb-example .tb-field-med { background: #14454d; color: #9be3ef; }
[data-bs-theme="dark"] .tb-example .tb-field-edu { background: #1d422a; color: #a7d7b7; }
[data-bs-theme="dark"] .tb-example .tb-field-eng { background: #4a3d15; color: #f5d97a; }
[data-bs-theme="dark"] .tb-example .tb-field-soc { background: #2e1f4a; color: #c9b7f0; }
[data-bs-theme="dark"] .tb-example .tb-field-agr { background: #4a371d; color: #e4c48a; }

/* File-upload toast (floating alert) needs the dark alert shadow too. */
[data-bs-theme="dark"] #alert2 {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}

/* Variable-selection chip: dark mode inverts the dark-on-dark contrast. */
[data-bs-theme="dark"] .gp-var-chip.active,
[data-bs-theme="dark"] .gp-var-chip.btn-dark {
  background-color: #e9ecef;
  border-color: #e9ecef;
  color: #1b1f25;
}

/* Slider selection bar (bootstrap-slider) — the default #bababa reads as
   near-body-color on dark, making the filled track invisible. */
[data-bs-theme="dark"] #inputSlider .slider-selection {
  background: #6ea8d4;
}

/* Loaded-CSV banner — dark mode variant. */
[data-bs-theme="dark"] .stat-loaded-banner {
  background-color: #1e3a2a;
  border-color: #2d5a42 !important;
  color: #a7d7b7;
}
[data-bs-theme="dark"] .stat-loaded-banner .text-muted {
  color: #7fa988 !important;
}
[data-bs-theme="dark"] .stat-loaded-banner .bi-file-earmark-check {
  color: #6fdc8c !important;
}

/* Bootstrap's .bg-light utility is NOT theme-aware in 5.3 — it stays
   #f8f9fa under [data-bs-theme="dark"], which reads as white-on-white-
   ish with body text colour. Remap it (and the matching .card.bg-light)
   to a subtly elevated dark surface so legends/callout cards/helper
   boxes stay readable. Used in stat-overview matrix legend, modal-
   render pairwise cards, Sample Size help bands, and more. */
[data-bs-theme="dark"] .bg-light {
  background-color: var(--stat-surface-muted) !important;
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .card.bg-light {
  border-color: var(--stat-border);
}
/* .badge.bg-light.text-dark would keep #212529 text on the dark surface
   if we only remapped bg — nudge the text too so badges stay legible. */
[data-bs-theme="dark"] .badge.bg-light.text-dark {
  color: var(--bs-body-color) !important;
}

/* Same story for .table-light thead in the CSV preview (dataset-analysis)
   and elsewhere — Bootstrap hardcodes --bs-table-bg:#f8f9fa for this
   variant. Remap the table-variant tokens so the header row sits on a
   dark elevated surface with legible text. */
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > th,
[data-bs-theme="dark"] .table-light > td,
[data-bs-theme="dark"] .table > :not(caption) > * > .table-light {
  --bs-table-bg: var(--stat-surface-muted);
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--stat-border);
  --bs-table-striped-bg: var(--stat-surface);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-active-bg: var(--stat-surface);
  --bs-table-active-color: var(--bs-body-color);
  --bs-table-hover-bg: var(--stat-surface);
  --bs-table-hover-color: var(--bs-body-color);
  color: var(--bs-body-color);
  border-color: var(--stat-border);
}

/* Help-sidebar nav links — dark mode. */
[data-bs-theme="dark"] .help-nav-link,
[data-bs-theme="dark"] .help-section-link {
  color: #b0b8c1;
}
[data-bs-theme="dark"] .help-nav-link:hover,
[data-bs-theme="dark"] .help-section-link:hover {
  color: #9dc3e6;
}
[data-bs-theme="dark"] .help-section-link.active {
  color: #9dc3e6;
}


/* ==========================================================================
   14. Calculator UI tweaks (Phase 1 — sitewide)
   --------------------------------------------------------------------------
   Implements the cross-cutting UX feedback from `verification/Stat tests.docx`
   and the six sample-size DOCX reviews. Pure visual tweaks — no markup
   changes; pages opt in by being calculator/help pages (i.e. anything that
   already loads this stylesheet via tokens.css → base.css → components.css).
   ========================================================================== */

/* --- Title spacing ---------------------------------------------------------
   DOCX (ss1P): "Add a bit more padding/margin above the title". The h2 inside
   `.pb-2.mb-3.border-bottom` was tight against the navbar offset. */
.container > .row > .col-lg-12 > .pb-2.mb-3.border-bottom {
  margin-top: 0.75rem;
}

/* --- Bold ticks in the header bullet list ---------------------------------
   Header feature list uses `.bi bi-check-lg` icons. Bumping font-weight gives
   the ticks visual presence without affecting the surrounding small text. */
.lead.list-unstyled .bi-check-lg {
  font-weight: 700;
}

/* --- "Input Values" / form section headings -------------------------------
   Reduce default h3 size for in-card headings so they read as section labels
   rather than page titles, and add breathing room above. Scoped to forms
   that live inside .col-lg-* columns (i.e. calculator panels) so help-page
   headings keep their full h3 weight. */
.col-lg-5 > form > h3,
.col-lg-5 > h3,
.col-lg-7 > h3 {
  font-size: 1.4rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

/* --- Slider card ----------------------------------------------------------
   DOCX (ss1P): slider track and value badge should sit centred in a soft-tinted
   box. The existing `.card.card-body.border` wrapper already gives the box;
   tint the background and align the slider + badge on one row. */
.card.card-body.border:has(> [data-slider-id]) {
  background-color: var(--stat-surface-muted);
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.5rem;
}
.card.card-body.border:has(> [data-slider-id]) > [data-slider-id],
.card.card-body.border:has(> [data-slider-id]) > .slider {
  flex: 1 1 auto;
}
.card.card-body.border:has(> [data-slider-id]) > span {
  flex: 0 0 auto;
}

/* --- Help-block notes ("You may adjust...", "Specify input values...") -----
   DOCX (ss1P): "Use secondary text for notes so that they don't look equally
   important as the main text." Match Bootstrap's --bs-secondary-color and
   tighten line height. */
.help-block {
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
  line-height: 1.4;
}
/* Bold word ("Note:") inside help-block should still be slightly emphasised */
.help-block b,
.help-block strong {
  color: var(--bs-body-color);
}

/* --- Smaller calculator buttons --------------------------------------------
   DOCX (ss1P): "Use smaller/thinner [buttons]". Bootstrap provides .btn-sm
   officially — but the calculator pages weren't applying it. Rather than
   editing every HTML, scope a size reduction to the calculator action group
   (the .row of Calculate/Adjust/Reset that sits below the input panel). */
form#formCalculator + p + hr + div > .btn,
form#formCalculator + hr + div > .btn,
form#formCalculator ~ hr + div > .btn,
.card-footer > .btn,
#tabCalculator .col-lg-5 hr + div > .btn,
#tabGraph .card-footer > .btn,
#tabTable .card-footer > .btn {
  --bs-btn-padding-y: 0.3rem;
  --bs-btn-padding-x: 0.7rem;
  --bs-btn-font-size: 0.9rem;
}

/* --- Result card / tab panes need breathing room above --------------------
   DOCX (ss1P): "Add space above 'Results and Live Interpretation' box (it is
   touching the tab line)." Adds margin to the right-hand column's top card
   inside calculator tabs. */
.tab-pane#tabCalculator .col-lg-7 > #divPDF,
.tab-pane#tabCalculator .col-lg-7 > .card,
.tab-pane#tabCalculator .col-lg-7 #ssResults,
.tab-pane#tabCalculator .col-lg-7 #testResults,
.tab-pane#tabCalculator .col-lg-7 #ciResults {
  margin-top: 0.75rem;
}

/* --- Calculator tab column alignment ---------------------------------------
   Previously this section forced equal column heights via align-items:
   stretch + height: 100% on form/.card (honoring the ss1P DOCX request
   "make both sides equal height"). That caused the input column (col-lg-5)
   to be height-locked to the (shorter) results column on pages with short
   forms — ss1M, ttest1, ttest2, ci1M, ttestPaired. The form + Note +
   buttons content overflowed below the column and the buttons rendered
   beneath the page footer. Verified live in Chrome at viewport 1309×707:
   on ss1M, col-lg-5 stayed at 543.8px while its natural content needed
   ~625px, so the Calculate button landed at y=926 vs col-5 bottom at y=845
   (footer also at y=845).
   Fix: drop align-items: stretch and the height: 100% rules. Each column
   now sizes to its own content. Aesthetic equal-height across the two
   columns is sacrificed; layout overflow is eliminated. */
.tab-pane#tabCalculator > .row {
  align-items: flex-start;
}

/* --- Hyperlinks: no underline -----------------------------------------------
   DOCX (ss2P): "Hyperlinks don't need to be underlined". Bootstrap 5 underlines
   <a> by default; remove globally and let hover/focus restore. Keep underlines
   on links inside paragraphs of help-page text where a link could otherwise
   be missed (the `prose-link` opt-in below). */
a {
  text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: underline;
}
/* Opt-in for prose contexts where underlines aid scanability. */
a.prose-link,
.example-box a,
.tb-example a,
.help-section p a {
  text-decoration: underline;
}
.help-section p a:hover {
  text-decoration: none;
}

/* --- Customise-Visualisation / Customise-Table form row spacing ------------
   DOCX (ss1P): "Add space between three rows so that the content is not
   congested." Targets the Confidence / SD / Precision rows in the graph &
   table customisation forms — they all share `.form-group.row` and live
   under `#graphForm` or `#tableForm`. */
#graphForm > .form-group.row,
#tableForm > .form-group.row,
form#graphForm > .form-group + .form-group,
form#tableForm > .form-group + .form-group {
  margin-bottom: 1rem;
}
#graphForm > .form-group.row > [class^="col-"],
#tableForm > .form-group.row > [class^="col-"] {
  margin-bottom: 0.25rem;
}

/* --- Calculator button group layout ----------------------------------------
   The Calculate / Options / Adjust / Reset buttons sit in an unstyled `<div>`
   directly after an `<hr>` inside `.col-lg-5`. Flex layout with left
   alignment keeps them flush with the form inputs above. */
.tab-pane#tabCalculator .col-lg-5 hr + div,
#tabCalculator > .row > .col-lg-5 hr + div,
.chisq-actions {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tab-pane#tabCalculator .col-lg-5 hr + div > .btn,
.chisq-actions > .btn {
  margin: 0;
}

/* --- chisq / Stratified Analysis side-by-side layout polish ---------------
   Right column should keep the result blocks visually distinct without the
   noisy section breaks the page had before. Adds a small space between
   each populated block; empty blocks (display: none) take no space. */
#chisqMain > .col-lg-7 > div + div {
  margin-top: 1rem;
}
/* Hide result blocks until JS reveals them after the first calculation.
   The blocks contain scaffolding markup (tables, headings), so a `:empty`
   selector wouldn't match — instead we hide them outright and rely on the
   existing `$('#divResults').show()` / `$('#divInterpret').show()` calls
   in the calculator JS to make them visible. */
#chisqMain > .col-lg-7 > #divResults,
#chisqMain > .col-lg-7 > #divInterpret,
#chisqMain > .col-lg-7 > #divSummary,
#chisqMain > .col-lg-7 > #divSocial {
  display: none;
}

/* --- Help-page 2x2 contingency table cell coloring ------------------------
   DOCX (ss2PP): "We have a table in the help – perhaps need to colour some
   cells". Discordant cells (b, c — off-diagonal) get an orange tint; the
   diagonal/concordant cells (a, d) get a soft green tint. Same palette as
   the colour-blind chart colours. */
.demo-table td.cell-concordant,
.contingency-table td.cell-concordant {
  background-color: rgba(89, 161, 79, 0.12);
}
.demo-table td.cell-discordant,
.contingency-table td.cell-discordant {
  background-color: rgba(242, 142, 43, 0.16);
  font-weight: 600;
}
[data-bs-theme="dark"] .demo-table td.cell-concordant,
[data-bs-theme="dark"] .contingency-table td.cell-concordant {
  background-color: rgba(89, 161, 79, 0.20);
}
[data-bs-theme="dark"] .demo-table td.cell-discordant,
[data-bs-theme="dark"] .contingency-table td.cell-discordant {
  background-color: rgba(242, 142, 43, 0.22);
}