/* ============================================================
   The Biostat Toolkit
   Design: deep-indigo sidebar · periwinkle accent · amber data
   ============================================================ */

:root {
  --ground:          #F5F7FA;
  --card:            #FFFFFF;

  /* Sidebar */
  --sidebar:         #1E1A47;
  --sidebar-hover:   #2B265F;
  --sidebar-active:  #362F7A;
  --sidebar-border:  rgba(255,255,255,.08);
  --sidebar-text:    #C8C4E8;
  --sidebar-muted:   #7570A0;

  /* Content */
  --text:            #1A1A2E;
  --text-2:          #4A4E6B;
  --text-3:          #7B8099;

  /* Accents */
  --accent:          #4E6EDB;
  --accent-h:        #3A5AC9;
  --amber:           #E07B2C;
  --amber-bg:        #FEF3E2;

  /* Chrome */
  --border:          #DDE3F0;
  --shadow-sm:       0 1px 3px rgba(30,26,71,.07), 0 4px 14px rgba(30,26,71,.05);

  /* Typography */
  --font-display:    'Space Grotesk', system-ui, sans-serif;
  --font-body:       'DM Sans', system-ui, sans-serif;
  --font-mono:       'IBM Plex Mono', 'Courier New', monospace;
}

/* ── RESET ─────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--font-body);
  background: var(--ground);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── APP SHELL ─────────────────────────────────────── */

#app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── SIDEBAR ───────────────────────────────────────── */

#sidebar {
  width: 264px;
  flex-shrink: 0;
  background: var(--sidebar);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 28px 22px 22px;
  border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-brand {
  text-decoration: none;
  display: block;
  cursor: pointer;
}
.sidebar-brand:hover .brand-name { color: #FFFFFF; }

/* Hidden on desktop — only meaningful once .sidebar-collapsible starts
   getting hidden by default, which only happens at the narrow-screen
   breakpoint below. */
.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 7px;
  border: 1px solid var(--sidebar-border);
  background: rgba(255, 255, 255, .06);
  color: var(--sidebar-text);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, .12);
  border-color: var(--accent);
}

.sidebar-footer {
  margin-top: auto;
  padding: 14px 16px;
  border-top: 1px solid var(--sidebar-border);
  font-size: 11px;
  color: var(--sidebar-text);
  line-height: 1.6;
}

.sidebar-footer a {
  color: var(--sidebar-text);
  text-decoration: underline;
}

.footer-license {
  display: block;
  margin: 6px 0;
}

.footer-license-badge {
  display: block;
  width: 56px;
  height: 20px;
  background: #fff;
  border-radius: 3px;
  padding: 2px 4px;
}

.brand-abbr {
  display: block;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 7px;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: #EEEAF8;
  line-height: 1.3;
}

.brand-tagline {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.45;
  color: var(--sidebar-text);
  margin-top: 8px;
}

/* Search */

.sidebar-search {
  padding: 16px 14px 10px;
  position: relative;
}

.search-icon {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sidebar-muted);
  pointer-events: none;
}

#search {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  padding: 8px 28px 8px 32px;
  font-family: var(--font-body);
  font-size: 13px;
  color: #EEEAF8;
  outline: none;
  transition: border-color .15s, background .15s;
}

#search::placeholder { color: var(--sidebar-text); }

#search:focus {
  background: rgba(255,255,255,.1);
  border-color: var(--accent);
}

/* Hide the native browser clear-icon in favor of our own #search-clear,
   so it looks consistent across browsers and is visible on this dark
   sidebar (the native one is easy to miss / inconsistently styled). */
#search::-webkit-search-cancel-button { display: none; }

.search-clear {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: var(--sidebar-muted);
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}

.search-clear:hover {
  color: #FFFFFF;
  background: rgba(255,255,255,.1);
}

/* Wizard entry link */

.wizard-nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 4px 14px 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(78,110,219,.15);
  border: 1px solid rgba(78,110,219,.35);
  color: #EEEAF8;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .12s, border-color .12s;
}

.wizard-nav-link:hover {
  background: rgba(78,110,219,.26);
  border-color: var(--accent);
}

.wizard-nav-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Nav list */

#nav-list {
  flex: 1;
  padding: 6px 0 24px;
}

.nav-category {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 13px 22px 13px 18px;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--sidebar-text);
  background: rgba(255,255,255,.05);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: color .12s, background .12s;
}

.nav-category:hover {
  color: #FFFFFF;
  background: var(--sidebar-hover);
}

.nav-category.open {
  color: #FFFFFF;
}

.nav-category-chevron {
  display: inline-block;
  font-size: 9px;
  flex-shrink: 0;
  color: var(--accent);
  transition: transform .15s;
}

.nav-category.open .nav-category-chevron {
  transform: rotate(90deg);
}

.nav-category-name {
  flex: 1;
}

.nav-category-count {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sidebar-text);
}

.nav-group {
  display: none;
}

.nav-group.open {
  display: block;
}

.nav-item {
  display: block;
  padding: 9px 14px 9px 14px;
  margin: 1px 8px;
  border-radius: 6px;
  cursor: pointer;
  border-left: 2.5px solid transparent;
  text-decoration: none;
  transition: background .12s, border-color .12s;
}

.nav-item:hover {
  background: var(--sidebar-hover);
}

.nav-item.active {
  background: var(--sidebar-active);
  border-left-color: var(--accent);
}

.nav-item-name {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: #DDDAF5;
  display: block;
  line-height: 1.35;
}

.nav-item.active .nav-item-name { color: #FFFFFF; }

.nav-item-badge {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--accent);
  background: rgba(78, 110, 219, .14);
}

.nav-item.active .nav-item-badge {
  color: #FFFFFF;
  background: rgba(255, 255, 255, .18);
}

.nav-item-hint {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--sidebar-text);
  display: block;
  margin-top: 3px;
  letter-spacing: .01em;
}

.nav-item.active .nav-item-hint { color: rgba(200,196,232,.85); }

/* ── MAIN CONTENT ──────────────────────────────────── */

#main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background: var(--ground);
}

#view {
  max-width: 740px;
  margin: 0 auto;
  padding: 40px 36px 72px;
}

/* ── HOME VIEW ─────────────────────────────────────── */

/* Segmented Calculators/Learn toggle — appears only on the two hub
   pages (Full Calculator Index, Learn), not on individual calculator
   or guide pages, since those already have persistent sidebar nav
   plus their own back link; a toggle there would just be redundant
   chrome competing with the page's actual content. */
.hub-toggle {
  display: inline-flex;
  background: var(--ground);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 3px;
  margin-bottom: 24px;
}

.hub-toggle-link {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 7px;
  color: var(--text-3);
  text-decoration: none;
  transition: color .12s;
}

.hub-toggle-link:hover { color: var(--text-2); }

.hub-toggle-link.active {
  background: var(--card);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(30,26,71,.1);
}

.home-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.home-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 12px;
}

.home-desc {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.7;
  max-width: 540px;
  margin-bottom: 36px;
}

/* Compact single-line prompt — the wizard is always one click away via
   the sidebar's own .wizard-nav-link, so this doesn't need to repeat
   the pitch at hero-banner size; it just needs to catch the eye of
   someone facing the full category list who doesn't know where to
   start. */
.wizard-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(78, 110, 219, .06);
  border: 1.5px solid rgba(78, 110, 219, .25);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 24px;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}

.wizard-banner:hover {
  border-color: var(--accent);
  background: rgba(78, 110, 219, .1);
}

.wizard-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.wizard-banner-text {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}

/* Second banner, same component as .wizard-banner, recolored amber so
   it reads as a distinct destination rather than a repeat of the
   wizard prompt above it. Used on both the calculator home page (to
   point at Learn) and the Learn hub (to point back at the calculator
   index), so it's named for what it looks like, not one direction. */
.alt-banner {
  background: rgba(224, 123, 44, .07);
  border-color: rgba(224, 123, 44, .3);
}
.alt-banner:hover {
  border-color: var(--amber);
  background: rgba(224, 123, 44, .12);
}
.alt-banner .wizard-banner-icon { background: var(--amber); }
.alt-banner .wizard-banner-arrow { color: var(--amber); }

/* External-resource card (e.g. Stats with Crayons in the Quick
   Reference category on the Learn hub) — lives inside the same
   .home-cards grid as a regular guide card (via class="home-card
   resource-card"), but the icon-plus-domain layout below and the
   amber hover (overriding .home-card:hover's blue via the extra
   class for specificity, since source order alone isn't reliable)
   both signal "this leaves the site" before the click. */
.resource-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
}
.home-card.resource-card:hover {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(224,123,44,.09), var(--shadow-sm);
}
.resource-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--amber-bg);
  font-size: 18px;
  flex-shrink: 0;
}
.resource-body { flex: 1; min-width: 0; }
.resource-title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.resource-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text);
}
.resource-source {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}
.resource-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2);
}

.wizard-banner-arrow {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
}

.home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}

.home-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 22px 20px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s, transform .1s;
  text-decoration: none;
  display: block;
  min-width: 0;
}

.home-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(78,110,219,.09), var(--shadow-sm);
  transform: translateY(-2px);
}

.home-card-category {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 7px;
}

.home-card-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
  line-height: 1.3;
}

.home-card-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  overflow-wrap: break-word;
}

.home-card-desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.55;
  margin-top: 6px;
}

.home-card-formula {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  overflow-x: auto;
}

.home-card-formula .katex-display { margin: 0; }
.home-card-formula .katex { font-size: .9em; }

/* Planned (coming soon) cards */
.home-card.planned {
  cursor: default;
  opacity: .55;
  border-style: dashed;
  border-color: var(--border);
  pointer-events: none;
  position: relative;
}

.home-card-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--ground);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
  margin-bottom: 8px;
}

/* ── FRONT DOOR (renderFrontDoor) ─────────────────────────────────────
   The site's actual landing page (bare '#' on a first visit, or
   explicit '#home') — three equal-weight cards (Calculators / Study
   Designs / Learn), no default winner among them. Deliberately its
   own class prefix (frontdoor-*) rather than reusing .home-*, since
   this two-column hero + card-picker layout is structurally different
   from the other three hubs' single-column header. */
.frontdoor-hero {
  display: flex;
  align-items: stretch;
  gap: 28px;
  margin-bottom: 26px;
}
.frontdoor-hero-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.frontdoor-title { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.15; margin-bottom: 10px; }
.frontdoor-sub { font-size: 14px; color: var(--text-2); line-height: 1.6; max-width: 62ch; margin-bottom: 18px; }

/* Fixed width + aspect-ratio (matching hero-desk.png's own 800x447
   ratio) rather than stretching to the text column's height: letting
   this box's height track the text column via align-items: stretch
   fed back into the width needed to keep the image uncropped, which
   fought with the text column for space and shrank it in turn.
   align-self: flex-start opts this box out of that stretch so both
   columns size independently — object-fit: cover then has no need to
   crop the sides since the box ratio already matches the image. */
.frontdoor-hero-img {
  flex-shrink: 0;
  align-self: flex-start;
  width: 340px;
  aspect-ratio: 800 / 447;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.frontdoor-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.frontdoor-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  max-width: 520px;
  transition: border-color .15s, box-shadow .15s;
}
.frontdoor-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(78,110,219,.12); }
.frontdoor-search svg { flex-shrink: 0; color: var(--text-3); }
.frontdoor-search input {
  border: none; outline: none; background: transparent;
  font-family: var(--font-body); font-size: 14px; color: var(--text);
  width: 100%;
}
.frontdoor-search input::placeholder { color: var(--text-3); }

.frontdoor-guide-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-3);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 2px;
}
.frontdoor-guide-link:hover { color: var(--text-2); }

.frontdoor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 16px;
}

/* The card itself is a plain (non-interactive) box — its "Browse X"
   content is one real <a>, and the wizard shortcut below is a second,
   sibling <a>. Wrapping the whole card in one outer <a> would nest an
   anchor inside an anchor, which is invalid HTML; browsers silently
   close the outer one early to recover, which breaks this grid. */
.frontdoor-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s, border-color .15s, transform .1s;
}
.frontdoor-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.frontdoor-card.c-blue:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(78,110,219,.09), var(--shadow-sm); }
.frontdoor-card.c-amber:hover { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(224,123,44,.09), var(--shadow-sm); }
.frontdoor-card.c-green:hover { border-color: #22946E; box-shadow: 0 0 0 3px rgba(34,148,110,.09), var(--shadow-sm); }

.frontdoor-card-main { display: flex; flex-direction: column; text-decoration: none; color: inherit; flex: 1; }

.frontdoor-card-icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.frontdoor-card-icon svg { width: 52px; height: 52px; overflow: visible; }

/* Every zone below gets a reserved min-height, not just a margin — a
   longer category name in one card (e.g. "Observational — Comparative")
   shouldn't knock that card's button out of row with the other two.
   Reserving the zone is what keeps icon/title/count/list/button
   aligned across all three cards regardless of how each one wraps. */
.frontdoor-card-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 4px;
  min-height: 13px;
}
.c-blue .frontdoor-card-eyebrow  { color: var(--accent); }
.c-amber .frontdoor-card-eyebrow { color: var(--amber); }
.c-green .frontdoor-card-eyebrow { color: #22946E; }

.frontdoor-card-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 2px; min-height: 22px; }
.frontdoor-card-count { font-size: 12.5px; color: var(--text-3); margin-bottom: 12px; min-height: 32px; }

.frontdoor-card-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; min-height: 96px; }
.frontdoor-card-list-item { font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.frontdoor-card-list-more { font-size: 12px; color: var(--text-3); line-height: 1.4; }

.frontdoor-card-cta {
  margin-top: auto;
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--ground);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 10px;
  transition: background .15s, border-color .15s;
}
.frontdoor-card:hover .frontdoor-card-cta { border-color: var(--text-3); }

.frontdoor-card-wizard {
  display: block;
  margin-top: 9px;
  text-align: center;
  font-size: 11px;
  color: var(--text-3);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 2px;
}

@media (max-width: 640px) {
  .frontdoor-hero { flex-direction: column; }
  .frontdoor-hero-img { width: 100%; height: 160px; }
  .frontdoor-grid { grid-template-columns: 1fr; }
}

/* ── DESIGNS HUB (renderDesignsHub) ──────────────────
   Same card-grid language as .home-cards/.home-card, but its own
   classes rather than reuse — the copy here is a full "why" sentence
   pulled from DESIGN_WIZARD_TREE, not a name+hint+description triplet,
   so the card only needs two text blocks, not three. */
.design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.design-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 20px 20px;
  text-decoration: none;
  display: block;
  min-width: 0;
  transition: box-shadow .15s, border-color .15s, transform .1s;
}

.design-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(78,110,219,.09), var(--shadow-sm);
  transform: translateY(-2px);
}

.design-card-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 7px;
  line-height: 1.3;
}

.design-card-use {
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.6;
}

/* ── INDEX SECTIONS ────────────────────────────────── */

/* Full Calculator Index only (renderHome()) — the Learn hub keeps its
   sections single-column, since several of its category names are too
   long to sit comfortably in a half-width column. Collapsed sections
   (short header + count) pack two per row; an expanded section spans
   the full row width via :not(.collapsed) below, so its card grid
   never has to fight a neighboring column for space. */
.home-sections-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
}

.home-sections-grid .home-section:not(.collapsed) {
  grid-column: 1 / -1;
}

.home-section {
  margin-bottom: 44px;
  min-width: 0;
}

/* Collapsed sections are just a thin header row with nothing below —
   the full 44px above was sized for separating a dense card grid from
   the next heading, and reads as an oversized gap between two bare
   header rows now that sections default to collapsed. */
.home-section.collapsed {
  margin-bottom: 14px;
}

/* Boxed-card look for collapsed sections in the 2-column grid — border
   goes on .home-section itself (the grid item, which CSS Grid already
   stretches to match its row partner's height by default), not on the
   header button, so both boxes in a row come out the same height
   automatically. The header's own underline is dropped in favor of
   the box's border, since the box now provides that boundary. */
.home-sections-grid .home-section.collapsed {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 2px 18px;
  background: rgba(78, 110, 219, .05);
  transition: border-color .15s, background .15s;
}

.home-sections-grid .home-section.collapsed:hover {
  border-color: var(--accent);
  background: rgba(78, 110, 219, .09);
}

.home-sections-grid .home-section.collapsed .home-section-header {
  border-bottom: none;
  margin-bottom: 0;
  padding: 14px 0;
}

.home-section-heading {
  margin: 0;
}

.home-section-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  margin-bottom: 14px;
  padding: 0 0 10px 0;
  border: none;
  border-bottom: 1.5px solid var(--border);
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color .12s;
}

.home-section-header:hover,
.home-section-header.open {
  border-bottom-color: var(--accent);
}

.home-section-chevron {
  display: inline-block;
  font-size: 11px;
  flex-shrink: 0;
  color: var(--accent);
  transition: transform .15s;
}

.home-section-header.open .home-section-chevron {
  transform: rotate(90deg);
}

.home-section-title {
  flex: 1;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.home-section-count {
  font-size: 11.5px;
  color: var(--text-3);
  font-family: var(--font-mono);
}

.home-section.collapsed .home-cards {
  display: none;
}

.home-section.collapsed .design-grid {
  display: none;
}

/* ── CALCULATOR-SELECTION WIZARD ───────────────────── */

.wizard-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 20px;
}

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

.wizard-breadcrumb a:hover { text-decoration: underline; }

.wizard-crumb-sep { color: var(--border); }

.wizard-crumb { color: var(--text-3); }

.wizard-question {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 24px;
  max-width: 640px;
}

.wizard-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 640px;
  margin-bottom: 24px;
}

.wizard-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}

.wizard-option:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(78,110,219,.09), var(--shadow-sm);
  transform: translateX(2px);
}

.wizard-option-arrow {
  color: var(--accent);
  font-weight: 600;
  flex-shrink: 0;
}

.wizard-back {
  display: inline-block;
  font-size: 13px;
  color: var(--text-3);
  text-decoration: none;
  font-weight: 500;
}

.wizard-back:hover { color: var(--accent); }

.wizard-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
  margin-bottom: 22px;
}

.wizard-result-card {
  display: block;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}

.wizard-result-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(78,110,219,.09), var(--shadow-sm);
  transform: translateY(-1px);
}

.wizard-result-card.primary {
  border-color: var(--accent);
  background: rgba(78,110,219,.04);
}

.wizard-result-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  border-radius: 5px;
  padding: 3px 8px;
  margin-bottom: 8px;
}

.wizard-result-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.wizard-result-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 8px;
}

.wizard-result-why {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
}

.wizard-also-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 4px;
}

/* Free-text "smart start" box on the wizard's first screen — a
   shortcut into the same tree the step-by-step questions walk, not a
   separate/competing feature, so it's styled as a variant callout
   (same tint family as .wizard-banner) sitting above the questions
   rather than as its own detached component. */
.wizard-smart-start {
  background: rgba(78, 110, 219, .05);
  border: 1.5px solid rgba(78, 110, 219, .2);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 20px;
  max-width: 640px;
}

.wizard-smart-start-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 10px;
}

.wizard-smart-start-row {
  display: flex;
  gap: 10px;
}

.wizard-smart-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}

.wizard-smart-input {
  font-family: var(--font-body);
  flex: 1;
  min-width: 0;
  padding-right: 30px; /* room for .wizard-smart-clear so typed text never runs under it */
}

.wizard-smart-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: var(--text-3);
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}

.wizard-smart-clear:hover {
  color: var(--accent);
  background: rgba(78, 110, 219, .1);
}

.wizard-smart-submit-btn {
  flex-shrink: 0;
  padding: 0 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .08s;
}

.wizard-smart-submit-btn:hover {
  background: var(--accent-h);
  box-shadow: 0 4px 14px rgba(78,110,219,.32);
}

.wizard-smart-submit-btn:active { transform: scale(.99); }

.wizard-smart-hint {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.5;
  margin-top: 8px;
}

.wizard-smart-results { margin-top: 16px; }

.wizard-smart-results .wizard-results { margin-bottom: 0; }

.wizard-smart-empty {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.6;
  margin-top: 14px;
}

.wizard-or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 640px;
  margin: 0 0 20px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.wizard-or-divider::before,
.wizard-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── CALCULATOR VIEW ───────────────────────────────── */

.calc-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.calc-back {
  color: var(--text-3);
  text-decoration: none;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  opacity: .8;
  transition: opacity .12s;
}

.calc-back:hover { opacity: 1; color: var(--accent); }

/* Hub ▸ Category ▸ Item trail shown above the title on every
   calculator/guide page — same light, small-text language as
   .wizard-breadcrumb below, just for ordinary page navigation instead
   of a wizard's answered-questions history. */
.page-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 10px;
}

.page-breadcrumb a {
  color: var(--text-3);
  text-decoration: none;
  transition: color .12s;
}

.page-breadcrumb a:hover { color: var(--accent); text-decoration: underline; }

.page-crumb-sep { color: var(--border); }

.page-crumb-current { color: var(--text-2); }

.calc-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.2;
}

.calc-desc {
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.72;
  max-width: 600px;
  margin-bottom: 28px;
}

/* ── FORMULA BLOCK ─────────────────────────────────── */

.formula-block {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 22px 26px;
  margin-top: 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}

.block-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 18px;
}

.formula-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Flex items default to min-width:auto, which lets them grow to fit
   wide content instead of shrinking to the container's width — so an
   unusually wide formula (e.g. Sample Size — 1-Sample Proportion or
   Difference of Two Proportions) pushed the whole box wider instead
   of triggering .formula-katex's own overflow-x:auto below. */
.formula-list > div { min-width: 0; }

.formula-row-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  margin-bottom: 5px;
}

.formula-katex { overflow-x: auto; }
.formula-katex .katex { color: var(--text); }

/* ── NOTATION BLOCK ────────────────────────────────── */

.notation-block {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--text-3);
  border-radius: 10px;
  padding: 22px 26px;
  margin-top: 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}

.notation-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notation-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.notation-symbol {
  flex: 0 0 auto;
  min-width: 40px;
  font-size: 15px;
  color: var(--accent);
}

.notation-symbol .katex { color: var(--accent); }

.notation-meaning {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
}

/* ── EXAMPLE BLOCK ─────────────────────────────────── */

.example-block {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: 10px;
  padding: 16px 26px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}

/* ── LEARN / GUIDE PAGES ───────────────────────────── */

.guide-section-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 30px 0 12px;
}

.guide-section-title .guide-section-count {
  margin-left: 4px;
}

/* ── GUIDE SECTION ACCORDION ────────────────────────── */
/* Each guide's prose sections collapse behind their heading, using
   native <details>/<summary> — same technique as .example-block
   below, just sized up to full section-heading typography instead
   of the small uppercase "Medical Example" label. No JS needed:
   the browser handles open/closed state and toggling for free. */

.guide-accordion {
  margin-top: 28px;
}

.guide-accordion-item {
  border-bottom: 1px solid var(--border);
}

.guide-accordion-item:first-child {
  border-top: 1px solid var(--border);
}

.guide-accordion-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 16px 4px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color .12s;
}

.guide-accordion-header::-webkit-details-marker { display: none; }

.guide-accordion-header::before {
  content: '▸';
  display: inline-block;
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--accent);
  transition: transform .15s;
}

.guide-accordion-item[open] .guide-accordion-header::before {
  transform: rotate(90deg);
}

.guide-accordion-header:hover {
  color: var(--accent);
}

.guide-accordion-body {
  padding: 0 4px 22px 24px;
}

.guide-accordion-body p:last-child {
  margin-bottom: 0;
}

.guide-figure-caption {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.55;
  margin-top: 10px;
}

.guide-legend {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.guide-legend li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
}

.guide-legend-text {
  flex: 1 1 auto;
  min-width: 0;
}

.guide-swatch {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 2px;
}

.guide-swatch.is-diamond {
  transform: rotate(45deg);
}

.guide-swatch.is-line {
  width: 22px;
  height: 3px;
  border-radius: 2px;
}

.guide-swatch-svg {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

.guide-swatch-svg svg { display: block; }

.guide-legend-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 32px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.guide-legend-columns .guide-legend {
  margin-top: 10px;
  padding-top: 0;
  border-top: none;
}

@media (max-width: 640px) {
  .guide-legend-columns {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.guide-body p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.72;
  max-width: 640px;
  margin-bottom: 14px;
}

.guide-body a,
.guide-body a:visited {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.guide-body a:hover {
  border-bottom-color: var(--accent);
}

.example-summary {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-3);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.example-summary::-webkit-details-marker { display: none; }

.example-summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 7px;
  transition: transform .12s;
}

.example-block[open] .example-summary::before {
  transform: rotate(90deg);
}

.example-body {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.7;
  max-width: 640px;
  margin-top: 14px;
}

/* ── INPUTS BLOCK ──────────────────────────────────── */

.inputs-block {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 22px 26px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}

/* Grid layout for standard inputs */
.inputs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.input-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.input-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
}

.input-hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-3);
  margin: 0;
}

.input-checkbox-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
}

.input-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

/* Prominent callout for a 2×2 calculator's study-design selector —
   sits above the table (not a plain input easy to miss below it),
   since picking the wrong option silently changes which results
   get shown further down the page. */
.design-callout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(78, 110, 219, .07);
  border: 1.5px solid rgba(78, 110, 219, .28);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 18px;
}

.design-callout-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent);
}

.design-callout .input-label {
  font-weight: 600;
  color: var(--text);
}

.input-el {
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  background: var(--ground);
  color: var(--text);
  outline: none;
  width: 100%;
  transition: border-color .15s, box-shadow .15s, background .15s;
  -moz-appearance: textfield;
}

.input-el::-webkit-inner-spin-button,
.input-el::-webkit-outer-spin-button { -webkit-appearance: none; }

.input-el:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(78,110,219,.12);
  background: #fff;
}

.slider-value {
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 600;
}

.input-slider {
  width: 100%;
  height: 4px;
  margin-top: 4px;
  background: var(--border);
  border-radius: 3px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.input-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.input-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

/* Full-width input (e.g. textarea) that spans both grid columns */
.input-field-wide {
  grid-column: 1 / -1;
}

.inputs-textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.65;
  font-size: 13px;
}

/* ── COLUMN INPUTS (inputLayout: 'columns', e.g. one-sample z/t-test) ──
   Side-by-side labeled columns (e.g. "Sample" vs. "Population / Null
   Hypothesis") for calculators whose inputs split into a small number
   of conceptually distinct groups with DIFFERENT fields each — unlike
   .group-table's repeated Group 1/2/3 columns, which all share the same
   field set and so line up as rows of one table instead. */
.input-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 18px;
}

.input-column {
  flex: 1 1 220px;
  background: var(--ground);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px 16px;
}

.input-column-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}

.input-column-grid {
  grid-template-columns: 1fr;
  gap: 14px;
}

/* ── EXPLORER LAYOUT (inputLayout: 'explorer', e.g. Statistical Power
   Explorer) — a live-updating hero visualization in place of the
   standard inputs-grid + Calculate button + results table. ───────── */

.explorer-header {
  text-align: center;
  margin-bottom: 16px;
}

.explorer-title {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 8px;
}

.explorer-subtitle {
  font-size: 13.5px;
  font-style: italic;
  color: var(--text-2);
}

.explorer-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px 24px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 16px 26px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

.explorer-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  /* Without this, a grid item's default auto min-width falls back to
     its content's min-content size — so a nowrap button label (e.g.
     "🔄 Redraw Sample") can force its own column wider than the
     minmax(170px, 1fr) track it's supposed to share evenly with its
     neighbors, squeezing a longer slider label in the next column
     into an extra line of wrap. */
  min-width: 0;
}

/* Full-width, centered row — always used for select controls, and
   opted into by a button control via inp.fullRow (see
   renderExplorerCalculator in app.js) when a sibling slider needs the
   width that button would otherwise take up in a shared row. */
.explorer-control-select {
  grid-column: 1 / -1;
  max-width: 440px;
  margin: 0 auto;
  width: 100%;
}

/* Opt-in via inp.wide on a slider control — doubles its share of the
   row (at the cost of a sibling control, which should move to its own
   row via fullRow) for a label too long to fit in one of three equal
   columns, e.g. "Test-to-Test Correlation (r)". */
.explorer-control-wide {
  grid-column: span 2;
}

/* min-height + bottom-aligned text reserves the same vertical space
   whether a control's label wraps to one line or two — without this,
   a longer label in one column (or an empty "&nbsp;" placeholder label
   in a button column) pushes that column's slider out of alignment
   with its neighbors, since a flex column with no justify-content
   packs its children from the top by however much space the label
   above them actually took. */
.explorer-control-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: none;
  color: var(--text-3);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 2.6em;
  line-height: 1.3;
  text-align: center;
}

.explorer-slider { width: 100%; }

.explorer-control-valuewrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* Editable twin of the slider it sits under — the slider stays the
   source of truth run() reads from, but typing an exact value here
   (e.g. 0.037 on a slider that steps by 0.01) pushes straight into
   it, since dragging alone can't reliably land on it. */
.explorer-control-num {
  width: 84px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--ground);
  border: 1.5px solid var(--border);
  border-radius: 7px;
  padding: 3px 6px;
  text-align: center;
}

.explorer-control-num:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(78,110,219,.12);
  background: var(--card);
}

.explorer-control-caption {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

/* Explorer "action" control (e.g. the coin-flip simulator's re-flip
   button) — outlined rather than solid-fill so it reads as secondary
   next to the sliders, not competing with .calc-btn's solid style
   used elsewhere for the primary action on non-explorer calculators. */
.reflip-btn {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 10px 16px;
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  background: rgba(78,110,219,.08);
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, transform .05s;
}

.reflip-btn:hover { background: rgba(78,110,219,.16); }
.reflip-btn:active { transform: scale(.98); }
.reflip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.explorer-chart-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 20px 26px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

/* Reuses .result-viz/.viz-toolbar/.export-chart-btn as-is (same PNG/
   JPG export buttons, same delegated click handler in app.js) for the
   PNG/JPG download buttons above the chart — this override just drops
   .result-viz's own table-row padding/border, since .explorer-chart-
   card already provides the surrounding box. */
.explorer-chart-card .result-viz {
  padding: 0;
  border-bottom: none;
}

.explorer-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.explorer-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--text-2);
}

.explorer-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.explorer-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.explorer-stat { text-align: center; }

.explorer-stat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: none;
  color: var(--text-3);
  margin-bottom: 5px;
}

.explorer-stat-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.explorer-stat-error {
  color: #C0392B;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
}

.explorer-footnote {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-style: italic;
  color: var(--text-3);
  text-align: center;
  line-height: 1.6;
}

/* Visualization result row (bell curve etc.) */
.result-viz {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
  grid-column: 1 / -1;
}
.result-viz:last-child { border-bottom: none; }
.result-viz svg { display: block; }

.viz-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 8px;
}

.export-chart-btn {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 4px 10px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text-3);
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}

.export-chart-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(78, 110, 219, .07);
}

.viz-caption {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 8px;
  line-height: 1.4;
}

/* ── 2×2 TABLE INPUT ───────────────────────────────── */

.table-2x2-wrap { overflow-x: auto; }

.table-2x2 {
  display: grid;
  grid-template-columns: 90px 1fr 1fr 64px;
  gap: 7px;
  min-width: 360px;
}

.t2-corner, .t2-col-head, .t2-row-head, .t2-total-head {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-3);
  text-align: center;
  line-height: 1.3;
}

.t2-col-head, .t2-row-head {
  background: var(--ground);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
}

.t2-row-head { justify-content: flex-end; padding-right: 10px; }

.t2-cell { position: relative; }

.t2-cell-label {
  position: absolute;
  top: 6px;
  left: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--accent);
  pointer-events: none;
  z-index: 1;
  line-height: 1;
}

.t2-cell .input-el {
  padding-top: 20px;
  padding-bottom: 7px;
}

.t2-total {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  background: var(--ground);
  border-radius: 6px;
  border: 1px dashed var(--border);
}

.t2-total-head { font-size: 11px; font-weight: 600; }

.table-instruction {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 14px;
}

.table-instruction strong {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

.t2-cell .input-el {
  background: rgba(78, 110, 219, 0.07);
  border-color: rgba(78, 110, 219, 0.25);
}

.t2-cell .input-el:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(78,110,219,.12);
}

/* ── GROUPED INPUTS (multi-group Mean/SD/N, Effect/SE, etc.) ── */
/* One column per group, one row per field — so "Group 1 Mean" and
   "Group 2 Mean" land in the same row instead of being scattered
   across a plain field-by-field grid in declaration order. */

.group-table {
  display: grid;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 18px;
}

.group-corner {
  position: sticky;
  left: 0;
  background: var(--card);
  z-index: 1;
}

.group-col-header {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 6px;
  background: var(--ground);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  line-height: 1.3;
}

.group-row-header {
  display: flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  padding-right: 8px;
  position: sticky;
  left: 0;
  background: var(--card);
  z-index: 1;
}

.group-cell .input-el { width: 100%; }

/* ── DISTRIBUTION REFERENCE TABLES (z/t tables) ────── */

.ref-table-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 10px;
}

.ref-table-wrap {
  overflow-x: auto;
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.ref-table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 11.5px;
  white-space: nowrap;
}

.ref-table th, .ref-table td {
  padding: 6px 9px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.ref-table-left th:not(:first-child), .ref-table-left td:not(:first-child) {
  text-align: left;
}

/* Prose-heavy tables (glossary, worksheets, RoB 2/GRADE examples, etc.)
   read poorly in a dense monospace, single-line-forced layout — this
   is what was forcing a horizontal scrollbar on anything with a long
   "Definition"/"Reason" column. The plain numeric tables above (z/t
   distribution lookups) keep the compact mono/nowrap treatment from
   .ref-table, since their cells are short values, not sentences. */
.ref-table-left {
  font-family: var(--font-body);
  font-size: 12.5px;
  white-space: normal;
}

.ref-table-left th, .ref-table-left td {
  padding: 10px 12px;
  line-height: 1.55;
  vertical-align: top;
}

.ref-table thead th {
  /* Must be opaque, not the rgba() accent tint used elsewhere — this
     header is position:sticky, so a translucent background lets
     scrolling body rows show through underneath it. #EEF2FC is the
     opaque equivalent of accent (--accent) at 8% over white. */
  background: #EEF2FC;
  color: var(--accent-h);
  font-weight: 600;
  letter-spacing: 0.01em;
  position: sticky;
  top: 0;
  z-index: 1;
}

.ref-table-note {
  font-size: 13px;
  color: var(--text-3);
  font-style: italic;
  margin-top: 10px;
}

.ref-table .ref-table-sub {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
}

.ref-table tbody th {
  background: var(--ground);
  color: var(--text-3);
  font-weight: 600;
  position: sticky;
  left: 0;
}

.ref-table td { color: var(--text-2); }

/* Zebra striping + row hover — applied broadly to every .ref-table for
   a consistent, less "rudimentary" look; kept low-contrast (--ground,
   a faint accent tint) so it doesn't fight with cell content colors.
   :not(.reftab-hl) is a structural exclusion, not a specificity bet —
   with equal class counts, CSS specificity is decided by the higher
   type-selector count (tbody+tr+td beats a bare .reftab-hl td), so
   without this exclusion the amber highlight below would lose to
   zebra striping on every even row regardless of source order. */
.ref-table tbody tr:nth-child(even) td:not(.reftab-hl) {
  background: var(--ground);
}

.ref-table tbody tr:hover td:not(.reftab-hl) {
  background: rgba(78, 110, 219, .06);
}

.ref-table .reftab-hl {
  background: var(--amber-bg);
  color: var(--amber);
  font-weight: 600;
}

/* Glossary quick-index jump flash — briefly tints the row a #gloss-*
   link just landed on (class added in app.js's gloss click handler),
   then fades back to whatever the cascade otherwise gives the row
   (zebra stripe or plain). An animation rather than a static
   background on purpose: a running animation's properties outrank the
   higher-specificity zebra rule above without joining its specificity
   arms race, and expire on their own when the flash ends. */
.ref-table tr.gloss-flash td {
  animation: gloss-flash 2.4s ease-out;
}

@keyframes gloss-flash {
  0%, 40% { background: rgba(78, 110, 219, .16); }
  100%    { background: rgba(78, 110, 219, 0); }
}

/* Traffic-light risk-of-bias judgment chips (RoB 2-style tables) —
   reuses --amber for "Some concerns" (already the site's one
   pre-existing semantic accent color); low/high add a small green/red
   pair used nowhere else, kept local to this one judgment convention
   rather than promoted to :root variables. */
.rob-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.rob-badge.rob-low  { background: #E6F5EC; color: #23875B; }
.rob-badge.rob-some { background: var(--amber-bg); color: var(--amber); }
.rob-badge.rob-high { background: #FBE7E5; color: #C0392B; }

/* ── DECISION MATRIX (Type I / Type II explorer) ────── */
/* Styled to match the site's existing 2×2 table component (.table-2x2
   below) — same bordered-corner/col-head/row-head treatment, same
   compact grid — rather than a bespoke card layout, so this reads as
   the same "2×2 table" pattern used for a/b/c/d diagnostic tables. */

.decision-matrix-wrap { overflow-x: auto; }

.decision-matrix {
  display: grid;
  grid-template-columns: 110px 1fr 1fr;
  gap: 7px;
  min-width: 420px;
}

.dm-corner,
.dm-col-header,
.dm-row-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-align: center;
  line-height: 1.3;
}

.dm-col-header,
.dm-row-header {
  background: var(--ground);
  border: 1px solid var(--border);
  border-radius: 6px;
  flex-direction: column;
}

.dm-row-sub {
  display: block;
  font-weight: 400;
  font-size: 9.5px;
  color: var(--text-3);
  margin-top: 2px;
}

.dm-cell {
  position: relative;
  border-radius: 6px;
  border: 1px solid var(--border);
  padding: 10px 12px 10px 22px;
}

.dm-cell-letter {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
}

.dm-cell-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  margin-bottom: 5px;
}

.dm-cell-prob {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
}

.dm-cell-desc {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-2);
}

.dm-correct {
  background: rgba(46,142,90,.07);
  border-color: rgba(46,142,90,.3);
}
.dm-correct .dm-cell-title { color: #2E8E5A; }

.dm-type1 {
  background: rgba(224,123,44,.08);
  border-color: rgba(224,123,44,.35);
}
.dm-type1 .dm-cell-title { color: var(--amber); }

.dm-type2 {
  background: rgba(199,62,58,.08);
  border-color: rgba(199,62,58,.35);
}
.dm-type2 .dm-cell-title { color: #C73E3A; }

/* ── CALCULATE BUTTON ──────────────────────────────── */

.calc-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.calc-btn {
  flex: 1;
  width: 100%;
  padding: 13px 24px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: .01em;
  margin-bottom: 0;
  transition: background .15s, box-shadow .15s, transform .08s;
}

.calc-btn:hover {
  background: var(--accent-h);
  box-shadow: 0 4px 14px rgba(78,110,219,.32);
}

.calc-btn:active { transform: scale(.99); }

/* Secondary action next to .calc-btn — outlined rather than solid-fill
   so it doesn't compete with Calculate for visual weight; resets every
   input back to calc.inputs[].default by simply re-rendering the whole
   calculator (see the reset-btn listener in app.js). */
.reset-btn {
  padding: 13px 22px;
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: background .15s, transform .08s;
}

.reset-btn:hover { background: rgba(78,110,219,.10); }
.reset-btn:active { transform: scale(.99); }
.reset-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── RESULTS BLOCK ─────────────────────────────────── */

.results-block {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  animation: fadeUp .22s ease both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.results-header {
  padding: 13px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--ground);
  display: grid;
  gap: 12px;
  align-items: center;
}

.results-header.no-ci  { grid-template-columns: 1fr 120px; }
.results-header.has-ci { grid-template-columns: 1fr 100px 220px; }

.results-header-cell {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.results-header-cell.align-right { text-align: right; }

.results-table { display: flex; flex-direction: column; }

.result-row {
  display: grid;
  gap: 12px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  transition: background .1s;
}

.result-row.no-ci  { grid-template-columns: 1fr 120px; }
.result-row.has-ci { grid-template-columns: 1fr 100px 220px; }

/* Text rows (Notes, Interpretations, etc.) drop out of the value-column
   grid entirely and stack instead — a small caption label above a
   paragraph that spans the full row. A side-by-side label+value split
   still confines the sentence to whatever's left of a label column,
   which is nowhere near "the entire section" for a full note. Higher
   specificity than the plain .result-row (which sets display:grid) so
   this wins regardless of the no-ci/has-ci class also present. */
.result-row.is-text-row {
  display: block;
}

.result-row.is-text-row .result-label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: none;
  color: var(--text-3);
  margin-bottom: 7px;
}

.result-row:last-child { border-bottom: none; }
.result-row:hover { background: #FAFBFD; }

.result-row.highlight         { background: var(--amber-bg); }
.result-row.highlight:hover   { background: #FDE9CA; }

.result-label {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.35;
}

/* Draws a bar directly over one letter (x̄, ȳ, etc.) via a real CSS
   line rather than a Unicode combining macron (U+0304) — many web
   fonts don't include that combining mark, so the browser silently
   falls back to a different font just for it, and the two glyphs'
   mismatched metrics make the bar land beside the letter instead of
   above it. esc() in app.js wraps the letter in this span whenever
   it finds that combining-mark pattern in label/value text. */
.over-bar {
  text-decoration: overline;
}

/* p̂-style "hat" notation (letter + combining circumflex, U+0302) has
   the same unreliable-rendering problem as x̄'s combining macron above
   — in some fonts/contexts (e.g. the monospace sidebar hint text) the
   mark renders as its own glyph to the left of the letter instead of
   centered above it. Same fix as .over-bar: draw the mark with CSS
   instead of trusting the font to compose the combining character. */
.over-hat {
  position: relative;
}
.over-hat::after {
  content: '^';
  position: absolute;
  top: -.62em;
  left: 50%;
  transform: translateX(-50%);
  font-size: .75em;
  line-height: 1;
}

.result-value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  text-align: right;
}

.result-value.is-text {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
}

.result-row.highlight .result-value {
  color: var(--amber);
  font-size: 16px;
}

/* Opt-in for a row whose value is a compound string (e.g. a critical
   value shown alongside its raw-units equivalent) that's too long for
   the normal narrow value column and would otherwise wrap into a
   cramped stack under the label. Lets the value cell expand across
   the row's remaining columns (including the CI column, when present,
   since a wideValue row never has its own CI) instead of shortening
   the content to fit. */
.result-row.wide-value .result-value {
  grid-column: 2 / -1;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .result-row.wide-value .result-value { white-space: normal; }
}

.result-ci {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ci-text {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  text-align: center;
  width: 200px;
}

.forest-svg { display: block; }

/* ── FOOTER LEGEND ─────────────────────────────────── */

.legend-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 11px 22px;
  border-top: 1px solid var(--border);
  background: var(--ground);
  font-size: 11px;
  color: var(--text-3);
  align-items: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── FOCUS & A11Y ──────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── REDUCED MOTION ────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ── QUICK INDEX (glossary A–Z jump list) ────────────
   Same links/content as before, just reflowed into CSS columns instead
   of one middot-separated running paragraph — same vertical footprint
   (columns fill top-to-bottom, so N entries take roughly 1/3 the lines
   of a single-column list), but scannable as a sorted grid instead of
   wrapped prose. break-inside: avoid keeps a single entry from
   splitting across a column boundary. */
.ref-quick-index {
  columns: 3;
  column-gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}

.ref-quick-index li {
  break-inside: avoid;
  padding: 2px 0;
}

/* ── RESPONSIVE ────────────────────────────────────── */

@media (max-width: 820px) {
  #sidebar { width: 230px; }
  #view { padding: 28px 22px 56px; }
  .inputs-grid { grid-template-columns: 1fr; }
  .ref-quick-index { columns: 2; }
}

@media (max-width: 640px) {
  #app { flex-direction: column; height: auto; overflow: visible; }
  #sidebar { width: 100%; height: auto; overflow: visible; }
  #main { overflow: visible; }
  #view { padding: 20px 16px 48px; }
  .home-sections-grid { grid-template-columns: 1fr; }
  .ref-quick-index { columns: 1; }

  /* Collapsed by default at this width: only the brand row + toggle
     button show. Hiding the one wrapper div (rather than clipping the
     whole #sidebar to a guessed max-height) means this doesn't depend
     on knowing the brand row's exact rendered height — it's just
     whatever height that row actually needs, nothing more; children
     inside .sidebar-collapsible keep their own normal display values
     (flex for .wizard-nav-link, etc.) once the wrapper is shown. */
  .sidebar-toggle { display: flex; }
  .sidebar-collapsible { display: none; }
  #sidebar.open .sidebar-collapsible { display: block; }
  .results-header.has-ci,
  .result-row.has-ci {
    grid-template-columns: 1fr 100px;
  }
  .results-header.has-ci .results-header-cell:last-child,
  .result-row.has-ci .result-ci { display: none; }
}

/* ── PRINT ─────────────────────────────────────────── */
/* #app/#sidebar/#main are all fixed to 100vh with overflow-y: auto for
   on-screen scrolling (see #app/#sidebar/#main above) — left as-is,
   printing would only capture whatever slice of #main happened to be
   scrolled into view, clipped exactly like on screen, alongside the
   sidebar. Reset everything to normal document flow so the full
   content prints across as many pages as it needs, sidebar-free.
   Triggered by Ctrl+Alt+P (see printCurrentView() in app.js), but
   applies to the browser's own File > Print too. */

@media print {
  #sidebar { display: none; }
  #app { display: block; height: auto; }
  #main { overflow: visible; height: auto; }
  #view { overflow: visible; height: auto; padding: 0; }

  /* Interactive-only controls that mean nothing on paper. */
  .calc-actions, .export-chart-btn, .sidebar-toggle { display: none; }
}

/* ── UTILITY ───────────────────────────────────────── */

[hidden] { display: none !important; }