/* ============================================================================
   Metapsy · OCD Psychotherapy Meta-Analysis Tool
   Visual system aligned with metapsy.org — square segment borders
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
  --mp-primary:        #0372b7;
  --mp-primary-light:  #028ee5;
  --mp-primary-dark:   #03588c;
  --mp-teal:           rgb(94, 186, 189);
  --mp-teal-soft:      rgba(94, 186, 189, .14);
  --mp-secondary:      #6c757d;

  --mp-ink:            #212529;
  --mp-ink-soft:       #4d5a62;
  --mp-muted:          #8a98a0;

  --mp-slate:          #2d383d;
  --mp-slate-deep:     #243038;
  --mp-control:        #6b7780;  /* neutral grey for form controls (sliders) */

  --mp-bg:             #f5f7f8;
  --mp-surface:        #ffffff;
  --mp-surface-alt:    #f8f9fa;
  --mp-line:           #e6eaec;
  --mp-line-soft:      #eef1f3;

  --mp-success-bg:     #e4f6e2;
  --mp-success-ink:    #1c7a32;

  --bs-primary:        var(--mp-primary);
  --bs-primary-darker: var(--mp-primary-dark);
  --bs-secondary:      var(--mp-secondary);
  --bs-info:           var(--mp-teal);
  --bs-dark2:          #313f45;
  --bd-subtitle-text:  var(--mp-muted);
  --btn-primary-text:  #ffffff;
  --bd-panel-bg:       var(--mp-surface);
  --bd-box-bg:         var(--mp-surface);
  --code-bg:           #f0f4f6;
  --code-color:        var(--mp-primary-dark);
  --sidebar-menu-link-border: var(--mp-line-soft);

  /* Square segments — no rounded panel borders */
  --mp-radius:    0;
  --mp-radius-sm: 0;

  --mp-shadow:    0 1px 2px rgba(16, 40, 52, .04), 0 8px 24px -12px rgba(16, 40, 52, .18);
  --mp-shadow-sm: 0 1px 2px rgba(16, 40, 52, .06), 0 2px 8px -4px rgba(16, 40, 52, .12);
  --mp-shadow-lg: 0 24px 60px -28px rgba(16, 40, 52, .35);

  --mp-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* ----------------------------------------------------------------------------
   2. Base & typography (original app stack & sizes)
   ------------------------------------------------------------------------- */
* {
  font-family: var(--mp-font) !important;
}

html, body {
  background-color: var(--mp-bg) !important;
  background-image: url("../img/honeycomb2.svg") !important;
  background-repeat: no-repeat !important;
  background-size: 45% auto;
  background-position: right center;
  background-attachment: fixed;
  color: var(--mp-ink);
  font-family: var(--mp-font) !important;
  overscroll-behavior-x: none !important;
  -webkit-font-smoothing: subpixel-antialiased;
  max-width: 100%;
  overflow-x: clip;
}

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4 {
  font-family: var(--mp-font) !important;
  -webkit-font-smoothing: subpixel-antialiased;
}

h1 {
  font-size: 30px;
  font-weight: 600 !important;
  line-height: 1.2;
  color: var(--bs-info) !important;
  margin: 0;
}

h2 {
  font-size: 28px;
  font-weight: 600 !important;
  line-height: 40px;
  color: var(--bs-primary);
}

h3 {
  font-size: 30px;
  font-weight: 700;
  line-height: 40px;
}

h4 {
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}

h4.bd-subtitle-line { color: var(--bd-subtitle-text); }

p, li, label, .box-body {
  font-family: var(--mp-font) !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--mp-ink-soft);
}

blockquote {
  font-family: var(--mp-font) !important;
  font-size: 21px;
  font-weight: 400;
  line-height: 30px;
  border-left: 3px solid var(--mp-teal);
  padding: .1rem 0 .1rem 1rem;
  color: var(--mp-ink-soft);
}

pre {
  font-family: var(--mp-font) !important;
  font-size: 13px;
  font-weight: 400;
  line-height: 18.5714px;
  border-radius: 0;
  border: 1px solid var(--mp-line);
}

button, .btn, .mp-btn {
  font-family: var(--mp-font) !important;
}

a { color: var(--mp-primary); text-decoration: none; transition: color .15s ease; }
a:hover, a:focus { color: var(--mp-primary-light); text-decoration: underline; }

code {
  padding: 0 .25em;
  font-family: Monaco, monospace !important;
  font-size: 13px;
  color: var(--code-color);
  background: var(--code-bg);
  border-radius: 0;
  white-space: pre;
}

hr { border-top: 1px solid var(--mp-line); }
img { max-width: 100%; }
img.img-floatright, .img-floatright { float: right; }

.fa, .fas, .far, .fab, .fa:before, .fas:before, .far:before, .fab:before,
[class^="fa-"], [class*=" fa-"] {
  font-family: "FontAwesome" !important;
}

.glyphicon, .glyphicon:before, [class^="glyphicon-"], [class*=" glyphicon-"] {
  font-family: "Glyphicons Halflings" !important;
}

#nstudies {
  font-family: var(--mp-font) !important;
}

/* ----------------------------------------------------------------------------
   3. App shell (top-bar layout via template.html)
   ------------------------------------------------------------------------- */
.mp-main {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: transparent;
}

.mp-panel {
  display: none;
  min-width: 0;
  max-width: 100%;
}

.mp-panel.is-active {
  display: block;
}

/* Top bar -------------------------------------------------------------- */
.mp-topbar {
  position: relative;
  z-index: 900;
  background: transparent;
}
.mp-topbar-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 28px 12px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Stepper */
.mp-steps {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.mp-step {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--mp-ink-soft);
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  transition: color .15s ease, opacity .15s ease;
}
.mp-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mp-surface-alt);
  border: 1px solid var(--mp-line);
  color: var(--mp-muted);
  font-size: 13px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.mp-step-num i { font-size: 13px; line-height: 1; }

.mp-step:hover:not(.is-locked) { color: var(--mp-primary); }
.mp-step:hover:not(.is-locked) .mp-step-num {
  border-color: var(--mp-teal);
  color: var(--mp-primary);
}

.mp-step.is-done:not(.is-active) .mp-step-num {
  background: var(--mp-teal-soft);
  border-color: var(--mp-teal);
  color: var(--mp-primary);
}

.mp-step.is-active { color: var(--mp-primary); font-weight: 600; }
.mp-step.is-active .mp-step-num,
.mp-step.is-active:hover .mp-step-num {
  background: var(--mp-primary);
  border-color: var(--mp-primary);
  color: #fff;
}

.mp-step.is-locked {
  opacity: .45;
  cursor: not-allowed;
}
.mp-step.is-locked .mp-step-num { background: transparent; }

.mp-step-line {
  flex: 0 0 30px;
  height: 1px;
  background: var(--mp-line);
}

/* Secondary nav (icon links, label expands on hover) */
.mp-secondary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}
.mp-icon-link {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--mp-line);
  border-radius: 0;
  background: var(--mp-surface);
  color: var(--mp-ink-soft);
  cursor: pointer;
  overflow: hidden;
  text-decoration: none !important;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.mp-icon-link i { font-size: 15px; line-height: 1; }
.mp-icon-link .mp-icon-text {
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 14px;
  transition: max-width .25s ease, opacity .2s ease, margin-left .2s ease;
}
.mp-icon-link:hover,
.mp-icon-link:focus,
.mp-icon-link.is-active {
  color: var(--mp-ink-soft);
  border-color: var(--mp-teal);
  background: var(--mp-teal-soft);
}
.mp-icon-link:hover .mp-icon-text,
.mp-icon-link:focus .mp-icon-text,
.mp-icon-link.is-active .mp-icon-text {
  max-width: 140px;
  margin-left: 8px;
  opacity: 1;
}

/* Footer */
.mp-foot {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 28px 40px;
  font-size: 14px;
  line-height: 20px;
  color: var(--mp-muted);
}

/* Responsive top bar */
@media (max-width: 820px) {
  .mp-topbar-inner {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 10px;
  }

  .mp-steps {
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .mp-step {
    padding: 4px;
    gap: 0;
    flex-shrink: 0;
  }

  .mp-step-text { display: none; }

  .mp-step-num {
    width: 26px;
    height: 26px;
  }

  .mp-step-num i { font-size: 12px; }

  .mp-step-line {
    flex: 0 0 10px;
  }

  .mp-secondary {
    margin-left: auto;
    flex: 0 0 auto;
    gap: 6px;
    flex-shrink: 0;
  }

  .mp-icon-link {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
  }

  .mp-icon-link i { font-size: 14px; }

  .mp-icon-link .mp-icon-text,
  .mp-icon-link:hover .mp-icon-text,
  .mp-icon-link:focus .mp-icon-text,
  .mp-icon-link.is-active .mp-icon-text {
    display: none;
  }

  .mp-startinfo {
    display: none;
  }

  #mp-panel-data .mp-page {
    padding: 0;
    max-width: none;
    width: 100%;
  }

  #mp-panel-data .mp-data-layout > .mp-card {
    display: none;
  }

  .mp-pagehead-text {
    padding-left: 16px;
    padding-right: 16px;
  }

  .mp-hero-aside {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 16px 0;
    width: 100%;
    box-sizing: border-box;
  }

  .mp-hero-cta {
    width: 100%;
    max-width: 100%;
  }

  .mp-hero-cta #start\.to\.data {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    white-space: normal;
  }

  .mp-hero-cta #start\.to\.data:hover,
  .mp-hero-cta #start\.to\.data:active {
    transform: none;
    box-shadow: none;
  }

  .mp-filter-panel .shiny-options-group .checkbox {
    margin: 0 !important;
  }

  .mp-filter-panel .shiny-options-group .checkbox + .checkbox {
    margin-top: 0 !important;
  }

  .mp-filter-panel .shiny-options-group .checkbox label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding: 2px 6px;
    font-size: 16px;
    line-height: 1.25;
  }

  .mp-filter-panel .shiny-options-group input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin-top: 0;
  }

  .mp-filter-panel .shiny-options-group input[type="checkbox"]:checked::after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border-width: 0 2.5px 2.5px 0;
  }

  .mp-filter-body {
    padding: 10px 12px 16px;
  }
}

.mp-page {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 34px 28px 60px;
  box-sizing: border-box;
}

/* ----------------------------------------------------------------------------
   4. Buttons
   ------------------------------------------------------------------------- */
.btn, .mp-btn {
  font-family: var(--mp-font);
  font-weight: 400;
  font-size: 14px;
  border-radius: 0;
  padding: .55rem 1.1rem;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:active, .mp-btn:active { transform: translateY(1px); }

.mp-btn-primary, .btn-primary {
  background: var(--mp-primary) !important;
  border-color: var(--mp-primary) !important;
  color: #fff !important;
}
.mp-btn-primary:hover, .btn-primary:hover,
.mp-btn-primary:focus, .btn-primary:focus {
  background: var(--mp-primary-dark) !important;
  border-color: var(--mp-primary-dark) !important;
  color: #fff !important;
}
/* Selected-studies count badge — right side of the data toolbar */
.mp-toolbar .mp-selected-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: .65rem 1.1rem;
  border: 1px solid var(--mp-line);
  border-radius: 0;
  background: var(--mp-surface-alt);
  color: var(--mp-muted);
  font-family: var(--mp-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
  white-space: nowrap;
  gap: 8px;
}
.mp-toolbar .mp-selected-badge .fa {
  font-size: 14px;
  color: var(--mp-muted);
  opacity: 1;
  flex-shrink: 0;
}
.mp-toolbar .mp-selected-badge-text {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
  font-weight: 400;
  color: var(--mp-muted);
}
.mp-toolbar .mp-selected-badge-ratio {
  display: inline-flex;
  align-items: baseline;
  font-weight: 400;
}
.mp-toolbar .mp-selected-badge-label {
  font-weight: 400;
  font-size: 12px;
  color: var(--mp-muted);
}
.mp-toolbar .mp-selected-badge #nselected {
  display: inline;
  font-size: inherit;
  font-weight: 600;
  color: var(--mp-primary);
}
.mp-toolbar .mp-selected-badge-total {
  color: var(--mp-muted);
  font-size: 10px;
  font-weight: 400;
}
.mp-toolbar .mp-selected-badge-total #nstudies_total {
  display: inline;
  font: inherit;
  color: inherit;
}

.mp-btn-ghost {
  background: var(--mp-surface) !important;
  border-color: var(--mp-line) !important;
  color: var(--mp-ink) !important;
}
.mp-btn-ghost:hover, .mp-btn-ghost:focus {
  background: var(--mp-surface-alt) !important;
  border-color: var(--mp-teal) !important;
  color: var(--mp-primary) !important;
}
/* All toolbar buttons share one height, so ghost/icon buttons line up with the
   blue primary button. */
.mp-toolbar .mp-btn {
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mp-toolbar .mp-settings-toggle,
.mp-settings-instr-btn {
  height: auto;
  padding: 0.63rem 0.5rem 0.63rem 1rem;
}
/* Reset filters, Back to data, Re-run + View instructions — icon-link style toolbar buttons */
#reset\.filters, #metaanalysis\.to\.data, #reanalyze, .mp-instr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 36px;
  min-width: 40px;
  padding: 0 9px;
  background: var(--mp-surface) !important;
  border-color: var(--mp-line) !important;
  color: var(--mp-ink-soft) !important;
  overflow: hidden;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
/* Fixed-width, centred glyph so icon-only (collapsed) buttons aren't off-centre */
#reset\.filters .fa, #reset\.filters .fas,
#metaanalysis\.to\.data .fa, #metaanalysis\.to\.data .fas,
#reanalyze .fa, #reanalyze .fas,
.mp-btn.mp-instr-btn .fa, .mp-btn.mp-instr-btn .fas {
  color: inherit;
  margin-right: 0;
  width: 1.15em;
  text-align: center;
}
/* Label collapses to icon-only and expands on hover, like mp-icon-link */
#reset\.filters .mp-btn-text, #metaanalysis\.to\.data .mp-btn-text, #reanalyze .mp-btn-text, .mp-instr-btn .mp-btn-text {
  display: inline-block;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width .25s ease, opacity .2s ease, margin-left .2s ease;
}
/* Use :focus-visible (keyboard focus) so a mouse click doesn't leave the
   button expanded after the pointer moves away. */
#reset\.filters:hover .mp-btn-text, #reset\.filters:focus-visible .mp-btn-text,
#metaanalysis\.to\.data:hover .mp-btn-text, #metaanalysis\.to\.data:focus-visible .mp-btn-text,
#reanalyze:hover .mp-btn-text, #reanalyze:focus-visible .mp-btn-text,
.mp-instr-btn:hover .mp-btn-text, .mp-instr-btn:focus-visible .mp-btn-text {
  max-width: 160px;
  margin-left: 7px;
  opacity: 1;
}
#reanalyze:hover .mp-btn-text, #reanalyze:focus-visible .mp-btn-text {
  max-width: 220px;
}
#reset\.filters:hover, #reset\.filters:focus-visible,
#metaanalysis\.to\.data:hover, #metaanalysis\.to\.data:focus-visible,
#reanalyze:hover, #reanalyze:focus-visible,
.mp-instr-btn:hover, .mp-instr-btn:focus-visible {
  background: var(--mp-teal-soft) !important;
  border-color: var(--mp-teal) !important;
  color: var(--mp-ink-soft) !important;
}

.mp-btn-lg { padding: 15px 32px; font-size: 16px; }
.mp-btn .fa, .mp-btn .fas, .mp-btn .far,
.btn .fa, .btn .fas, .btn .far,
.mp-btn i[class*="fa-"], .btn i[class*="fa-"] {
  margin-right: 7px;
}
.btn:focus, .mp-btn:focus { outline: none; box-shadow: 0 0 0 2px var(--mp-teal-soft); }

#report, #report:hover, #report:focus {
  text-decoration: none !important;
}
#report .fa,
#report .fas,
#report .action-icon {
  margin-right: 7px;
}
#report.disabled, #report:disabled {
  background: #e9edef !important;
  border-color: #e9edef !important;
  color: #adb5bd !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

.mp-debug-disconnect-wrap {
  display: none;
  position: fixed;
  bottom: 12px;
  left: 12px;
  z-index: 9999;
  opacity: 0.7;
}
.mp-debug-disconnect-wrap:hover {
  opacity: 1;
}
.mp-debug-disconnect-btn {
  font-size: 11px !important;
  padding: 0.35rem 0.6rem !important;
  height: auto !important;
}

/* ----------------------------------------------------------------------------
   5. Cards & surfaces (square)
   ------------------------------------------------------------------------- */
.mp-card {
  position: relative;
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: 0;
  box-shadow: var(--mp-shadow-sm);
  padding: 22px 24px;
}
.mp-card + .mp-card { margin-top: 18px; }

/* Small round help button in the top-right corner of a card */
.mp-card-help {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  border: 1px solid var(--mp-line);
  border-radius: 50%;
  background: var(--mp-surface);
  color: var(--mp-muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.mp-card-help:hover,
.mp-card-help:focus-visible {
  color: var(--mp-primary);
  border-color: var(--mp-teal);
  background: var(--mp-teal-soft);
}
.mp-card-help .fa { margin: 0; }
.mp-result-grid .mp-card + .mp-card { margin-top: 0; }
.mp-card-title {
  font-family: var(--mp-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--mp-muted);
  margin-bottom: 12px;
}

.box {
  background: var(--mp-surface) !important;
  border: 1px solid var(--mp-line) !important;
  border-radius: 0 !important;
  box-shadow: var(--mp-shadow-sm) !important;
  margin-bottom: 18px !important;
}
.box > .box-body { padding: 20px 22px; }
.box.bg-blue, .box.box-solid.bg-blue, .bg-blue {
  background: var(--mp-teal-soft) !important;
  color: var(--mp-slate) !important;
  border: 1px solid rgba(94, 186, 189, .4) !important;
}

/* ----------------------------------------------------------------------------
   6. Hero (Start page)
   ------------------------------------------------------------------------- */
/* Hero entrance: each object fades in while sliding into place — title from
   the top, image from the right, actions/badges from the left. */
@keyframes mpHeroInTop {
  from { opacity: 0; transform: translateY(-32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mpHeroInRight {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes mpHeroInLeft {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: translateX(0); }
}
.mp-hero-in-top   { animation: mpHeroInTop   .6s cubic-bezier(.2, .7, .2, 1) both; }
.mp-hero-in-right { animation: mpHeroInRight .6s cubic-bezier(.2, .7, .2, 1) .1s both; }
.mp-hero-in-left  { animation: mpHeroInLeft  .6s cubic-bezier(.2, .7, .2, 1) .2s both; }
@media (prefers-reduced-motion: reduce) {
  .mp-hero-in-top, .mp-hero-in-right, .mp-hero-in-left { animation: none; }
}

/* Hero: a title block on top, then a two-column row (actions | image).
   Everything is in normal flow, so the gap between the title and the buttons
   stays constant no matter how tall the title block grows. */
.mp-hero {
  max-width: 1180px;
  width: 100%;
  margin: 40px auto 0;
  padding: 0 28px;
  box-sizing: border-box;
  overflow: visible;
  /* layout dials */
  --mp-hero-overlap: 46px;        /* how far the title overlaps the image */
  --mp-hero-aside-w: 250px;       /* width of the gray panel column */
  --mp-hero-aside-inset: 50px;    /* gap from the hero's left edge to the panel */
  --mp-hero-panel: #d4d8db;       /* gray panel colour */
}

/* Title block — plain light panel, top layer */
.mp-hero-content {
  position: relative;
  z-index: 3;
  width: max-content;
  max-width: 100%;
  padding: 30px 40px 32px;
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  box-shadow: var(--mp-shadow-lg);
}
.mp-hero-content h1 {
  font-size: 38px;
  line-height: 1.15;
  color: var(--bs-primary) !important;
  margin: 0 0 10px;
  white-space: nowrap;
}
.mp-hero-sub {
  font-family: var(--mp-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--mp-ink-soft);
  margin: 0;
}
.mp-hero-sub b { color: var(--mp-ink); font-weight: 600; }

/* Row below the title: a gray panel (with the CTA + badges) on the left, the
   image on the right. Columns sit flush (no gap) so the panel meets the image;
   the CTA/badges are allowed to spill over onto the image's left edge. */
.mp-hero-row {
  display: grid;
  grid-template-columns: var(--mp-hero-aside-w) minmax(0, 1fr);
  align-items: start;
}

/* Gray panel holding the CTA + badges; raised above the image so its contents
   can overlap the image's left edge. */
.mp-hero-aside {
  position: relative;
  z-index: 2;
  margin-top: -14px;                 /* tuck slightly under the title */
  margin-left: var(--mp-hero-aside-inset);
  min-height: 360px;
  padding: 50px 0 44px 32px;
  background: var(--mp-hero-panel);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
/* Keep the CTA + badges at their natural width (spilling onto the image)
   instead of being squished to the narrow panel column. */
.mp-hero-cta,
.mp-hero-badges {
  width: max-content;
  max-width: none;
}
.mp-hero-cta #start\.to\.data {
  padding: 16px 40px;
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease,
              background .15s ease, border-color .15s ease;
}
.mp-hero-cta #start\.to\.data:hover {
  transform: translateX(6px);
  box-shadow: -6px 0 18px -10px rgba(3, 114, 183, .55);
}
.mp-hero-cta #start\.to\.data:active { transform: translateX(3px); }
.mp-hero-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Image column — pulled up so the title block overlaps its top edge */
.mp-hero-media {
  margin-top: calc(var(--mp-hero-overlap) * -1);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mp-hero-img-wrap {
  border: 1px solid var(--mp-line);
  box-shadow: var(--mp-shadow);
  overflow: hidden;
  line-height: 0;
}
.mp-hero-media .mp-startinfo {
  margin-top: 0;
  line-height: 20px;
}
.mp-hero-img {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: 65% 30%;
  line-height: 0;
}
.mp-hero-badge--version { line-height: 0; }
.mp-hero-badge--version img { height: 28px; display: block; }
.mp-hero-badge--version br { display: none; }

/* Shields-style "Studies" badge, matching the dataset-version badge */
.mp-shield {
  display: inline-flex;
  height: 28px;
  font-family: var(--mp-font);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .06em;
  text-transform: uppercase;
  overflow: hidden;
}
.mp-shield-label,
.mp-shield-value {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  color: #fff;
}
.mp-shield-label { background: #555; }
.mp-shield-value {
  background: var(--mp-primary);
  font-weight: 500;
}
.mp-shield-value #nstudies {
  display: inline;
  font: inherit;
  color: #fff;
}

/* Additional information — plain text, not a tinted block */
.mp-startinfo {
  margin-top: 28px;
  max-width: 42rem;
  padding: 2rem 0 2rem 0;
  font-size: 14px;
  line-height: 20px;
}
.mp-startinfo-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.mp-startinfo-head h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}
.mp-startinfo-ico {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mp-teal-soft);
  color: var(--mp-primary);
  font-size: 1.05rem;
}
.mp-startinfo-ico--img {
  background: transparent;
  padding: 0;
  overflow: hidden;
}
.mp-startinfo-ico--img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mp-startinfo h4,
.mp-startinfo :first-child { margin-top: 0; }
.mp-startfoot { margin-top: 22px; }

@media (max-width: 980px) {
  .mp-hero {
    margin-top: 18px;
    padding: 0;
    max-width: none;
    width: 100%;
  }
  .mp-hero-content { width: auto; max-width: 100%; }
  .mp-hero-content h1 { font-size: 28px; white-space: normal; }
  /* Single column: title, image, then the actions row */
  .mp-hero-row { grid-template-columns: 1fr; }
  .mp-hero-media { order: 1; margin-top: 0; }
  .mp-hero-aside {
    order: 2;
    position: static;
    margin: 0;
    min-height: 0;
    background: transparent;
    padding: 18px 0 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }
  .mp-hero-img { height: 240px; }
}

.mp-about-img {
  border: 1px solid var(--mp-line);
  box-shadow: var(--mp-shadow-sm);
  margin-bottom: 35px;
}

.mp-pagehead--ico .mp-pagehead-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

#mp-panel-about .mp-page,
#mp-panel-rpackage .mp-page {
  /* max-width: 1080px; */
  width: 100%;
  margin: 0 auto;
  padding: 34px 28px 60px;
  box-sizing: border-box;
}

#mp-panel-about .mp-pagehead--ico,
#mp-panel-rpackage .mp-about-body {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

#mp-panel-about .mp-card.mp-about-body {
  max-width: 820px;
  margin: -10rem auto 0;
  position: relative;
  z-index: 1;
}

#mp-panel-about .mp-pagehead--ico h2,
#mp-panel-rpackage .mp-pagehead--ico h2 {
  margin: 0;
}

.mp-about-prose {
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
  font-size: 15px;
  line-height: 1.65;
  color: var(--mp-ink-soft);
}

.mp-about-prose > p:first-child {
  font-size: 16px;
  line-height: 1.6;
  color: var(--mp-ink);
}

.mp-about-prose h4 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  margin: 1.75rem 0 0.75rem;
  color: var(--mp-ink);
}

.mp-about-prose h4:first-child {
  margin-top: 0;
}

.mp-about-prose p {
  margin: 0 0 1rem;
}

.mp-about-prose p:last-child {
  margin-bottom: 0;
}

.mp-about-prose ul {
  margin: 0.35rem 0 1.25rem;
  padding-left: 1.25rem;
}

.mp-about-prose li {
  margin: 0 0 0.5rem;
  line-height: 1.55;
}

.mp-about-prose li:last-child {
  margin-bottom: 0;
}

.mp-about-prose code {
  font-size: 0.92em;
}

.mp-prose-head.mp-pagehead {
  margin-bottom: 1.25rem;
}

.mp-about-prose .mp-prose-divider {
  border: none;
  border-top: 1px solid var(--mp-line);
  margin: 0 0 1.5rem;
}

/* Icon pagehead subtitle (About + R package) */
.mp-pagehead--ico h2 { margin: 0; }
.mp-pagehead--ico h2 code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-family: inherit !important;
  white-space: normal;
}
.mp-pagehead--ico .mp-pagehead-title-text p {
  margin: 4px 0 0;
  color: var(--mp-muted);
  font-size: 14px;
  line-height: 1.4;
}

/* Document list rendered as tidy link cards */
.mp-doclist {
  list-style: none;
  padding-left: 0;
  margin: 0.6rem 0 1.6rem;
  display: grid;
  gap: 6px;
}
.mp-doclist li { margin: 0; }
.mp-doclist li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border: 1px solid var(--mp-line);
  border-left: 3px solid var(--mp-teal);
  background: var(--mp-surface-alt);
  color: var(--mp-ink-soft);
  font-size: 14px;
  line-height: 1.4;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.mp-doclist li a::before {
  content: "\f016"; /* FontAwesome fa-file-o */
  font-family: "FontAwesome";
  color: var(--mp-teal);
  font-size: 15px;
  flex: 0 0 auto;
}
.mp-doclist li a[href$=".pdf"]::before { content: "\f1c1"; } /* fa-file-pdf-o */
.mp-doclist li a:hover {
  background: var(--mp-teal-soft);
  border-color: var(--mp-teal);
  color: var(--mp-primary);
  text-decoration: none;
}

/* App-styled badge links (R package page) */
.mp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.mp-rpackage-prose .mp-badges-divider {
  border: none;
  border-top: 1px solid var(--mp-line);
  margin: 1rem 0 1.5rem;
}
a.mp-shield {
  text-decoration: none !important;
  transition: filter .15s ease, box-shadow .15s ease;
}
a.mp-shield:hover {
  filter: brightness(1.06);
  box-shadow: var(--mp-shadow-sm);
}

/* R package prose */
#mp-panel-rpackage pre,
#mp-panel-rpackage pre code,
#mp-panel-rpackage .token {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

.mp-rpackage-prose h4 {
  margin-top: 2.25rem;
  padding-top: 0.65rem;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--mp-line);
}
.mp-rpackage-prose h4:first-of-type { margin-top: 0.75rem; }

.mp-code-wrap {
  position: relative;
  margin: 0 0 1.1rem;
  border: 1px solid var(--mp-line);
  box-shadow: inset 0 0 0 1px var(--mp-line-soft);
  background: var(--mp-surface-alt);
  max-width: 100%;
  box-sizing: border-box;
}

.mp-code-wrap--output {
  background: transparent;
  background-color: transparent;
  border: none;
  border-color: transparent;
  box-shadow: none;
}

.mp-code-wrap--prose {
  background: transparent;
  border: none;
  box-shadow: none;
}

.mp-plain-pre,
.mp-plain-pre code {
  background: transparent !important;
  background-color: transparent !important;
}

.mp-plain-pre code {
  padding: 0;
}

#mp-panel-rpackage .mp-code-wrap pre {
  position: relative;
  background: transparent !important;
  padding: 12px 14px 12px 14px !important;
  margin: 0 !important;
  overflow-x: auto;
  border: none !important;
  box-shadow: none !important;
}

#mp-panel-rpackage .mp-code-wrap pre,
#mp-panel-rpackage .mp-code-wrap code,
#mp-panel-rpackage .mp-code-wrap code[class*="language-"],
#mp-panel-rpackage .mp-code-wrap .token {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  text-shadow: none !important;
  font-weight: 400 !important;
}

#mp-panel-rpackage .mp-code-wrap code[class*="language-"] {
  background: transparent !important;
  color: var(--mp-ink-soft);
  padding: 0;
  white-space: pre;
}

#mp-panel-rpackage .mp-code-wrap--output pre,
#mp-panel-rpackage .mp-code-wrap--output code {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--mp-muted);
  background: transparent !important;
  background-color: transparent !important;
}

#mp-panel-rpackage .mp-code-wrap--prose pre,
#mp-panel-rpackage .mp-code-wrap--prose code {
  font-family: var(--mp-font) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--mp-ink-soft);
  white-space: pre-wrap;
}

#mp-panel-rpackage .mp-code-wrap .mp-code-copy {
  position: absolute !important;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--mp-font);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--mp-ink-soft);
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: 0;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
  opacity: 0.92;
  box-shadow: var(--mp-shadow-sm);
}

#mp-panel-rpackage .mp-code-wrap .mp-code-copy:hover,
#mp-panel-rpackage .mp-code-wrap .mp-code-copy:focus-visible {
  background: var(--mp-teal-soft);
  border-color: var(--mp-teal);
  color: var(--mp-ink);
  opacity: 1;
  outline: none;
}

#mp-panel-rpackage .mp-code-wrap .mp-code-copy.is-copied {
  color: var(--mp-teal);
  border-color: var(--mp-teal);
}

/* Prism token colours (R package code blocks) */
.mp-rpackage-prose .token.comment,
.mp-rpackage-prose .token.prolog,
.mp-rpackage-prose .token.doctype,
.mp-rpackage-prose .token.cdata {
  color: #6b7c86;
}
.mp-rpackage-prose .token.punctuation { color: #5a6870; }
.mp-rpackage-prose .token.property,
.mp-rpackage-prose .token.tag,
.mp-rpackage-prose .token.constant,
.mp-rpackage-prose .token.symbol,
.mp-rpackage-prose .token.deleted { color: #c0392b; }
.mp-rpackage-prose .token.boolean,
.mp-rpackage-prose .token.number { color: #9b59b6; }
.mp-rpackage-prose .token.selector,
.mp-rpackage-prose .token.attr-name,
.mp-rpackage-prose .token.string,
.mp-rpackage-prose .token.char,
.mp-rpackage-prose .token.builtin,
.mp-rpackage-prose .token.inserted { color: #0372b7; }
.mp-rpackage-prose .token.operator,
.mp-rpackage-prose .token.entity,
.mp-rpackage-prose .token.url,
.mp-rpackage-prose .language-css .token.string,
.mp-rpackage-prose .style .token.string,
.mp-rpackage-prose .token.variable { color: #4d5a62; }
.mp-rpackage-prose .token.atrule,
.mp-rpackage-prose .token.attr-value,
.mp-rpackage-prose .token.function,
.mp-rpackage-prose .token.class-name { color: #2e8b57; }
.mp-rpackage-prose .token.keyword { color: #0372b7; font-weight: 600; }
.mp-rpackage-prose .token.regex,
.mp-rpackage-prose .token.important { color: #d68910; }

/* ----------------------------------------------------------------------------
   7. Page headers & toolbars
   ------------------------------------------------------------------------- */
.mp-pagehead { margin-bottom: 22px; }
.mp-pagehead .mp-eyebrow {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--mp-teal);
  margin-bottom: 6px;
}
.mp-pagehead h2 { margin: 0 0 6px; }
.mp-pagehead p { margin: 0; max-width: 720px; }
#mp-panel-data .mp-pagehead p { margin-bottom: 1rem; }
#mp-panel-metaanalysis .mp-pagehead p { margin-bottom: 1rem; }

/* Page header with decorative illustration on the right. The image is taken
   out of flow (absolutely positioned + vertically centered) so the header
   height is driven by the text only — letting the art grow larger and overlap
   the bottom border without making the header taller. */
.mp-pagehead--art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid var(--mp-line);
}
.mp-pagehead--art .mp-pagehead-text {
  flex: 1 1 auto;
  min-width: 0;
}
.mp-pagehead-art {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 190px;
  height: auto;
  z-index: 1;
  filter: drop-shadow(0 8px 20px rgba(16, 40, 52, .18));
}
.mp-pagehead-art--analysis { width: 260px; }

@media (min-width: 821px) {
  .mp-pagehead--art .mp-pagehead-text {
    padding-right: 230px;
  }

  #mp-panel-metaanalysis .mp-pagehead--art .mp-pagehead-text {
    padding-right: 300px;
  }
}

@media (max-width: 760px) {
  .mp-pagehead-art { display: none; }
  .mp-pagehead--art .mp-pagehead-text { padding-right: 0; }
}

.mp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

#mp-panel-metaanalysis .mp-toolbar {
  margin-bottom: 8px;
}
.mp-toolbar .mp-spacer { flex: 1 1 auto; }

/* ----------------------------------------------------------------------------
   8. Data tab — filter panel
   ------------------------------------------------------------------------- */
.mp-data-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .mp-data-layout { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* Keep the wide data table inside its column and let it scroll sideways
   instead of stretching the whole layout. The card stretches to match the
   height of the filter panel beside it. */
.mp-data-layout > .mp-card {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mp-data-layout > .mp-card > .mp-plot-wrap {
  flex: 1 1 auto;
}
.mp-data-layout > .mp-card .mp-plot-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mp-data-layout .dataTables_wrapper {
  width: 100%;
  min-width: 0;
}
.mp-data-layout .dataTables_scrollBody {
  overflow-x: auto !important;
}

.mp-filter-panel {
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: 0;
  box-shadow: var(--mp-shadow-sm);
  padding: 18px 16px;
  position: sticky;
  top: 18px;
}
.mp-filter-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 4px 12px;
}
.mp-filter-panel h3 {
  font-size: 20px;
  font-family: var(--mp-font) !important;
  font-weight: 600;
  line-height: 30px;
  margin: 0;
}
.mp-filter-hint {
  font-size: 14px;
  line-height: 20px;
  color: var(--mp-muted);
  padding: 10px 4px 2px;
}

.mp-filter-panel .mp-filter {
  border: none;
  border-bottom: 1px solid var(--mp-line-soft);
  margin: 0;
}

.mp-filter-panel .mp-filter:last-of-type {
  border-bottom: none;
}

.mp-filter-title {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--mp-ink);
  list-style: none;
  border-left: 2px solid transparent;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.mp-filter-title::-webkit-details-marker {
  display: none;
}

.mp-filter-title::before {
  content: "\f105"; /* FontAwesome angle-right */
  font-family: "FontAwesome";
  font-size: 13px;
  width: 12px;
  text-align: center;
  color: var(--mp-muted);
  transition: transform .22s ease, color .15s ease;
}

.mp-filter-title:hover { background: var(--mp-line-soft); }
.mp-filter-title:hover::before { color: var(--mp-ink-soft); }

.mp-filter[open] > .mp-filter-title {
  color: var(--mp-ink);
  font-weight: 600;
  background: var(--mp-surface-alt);
  border-left-color: var(--mp-muted);
}

.mp-filter[open] > .mp-filter-title::before {
  transform: rotate(90deg);
  color: var(--mp-ink-soft);
}

.mp-filter-body {
  padding: 8px 10px 14px;
  animation: mpFilterOpen .24s ease;
}

@keyframes mpFilterOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.mp-filter--accent {
  background: var(--mp-teal-soft);
  border: 1px solid rgba(94, 186, 189, .35);
  margin: 8px 0;
}

.mp-filter--accent .mp-filter-title {
  padding: 9px 12px;
}

.mp-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 767px) {
  .mp-form-row { grid-template-columns: 1fr; }
  .mp-form-col--hakn { padding-top: 0; }
}

.mp-form-col {
  min-width: 0;
}

.mp-settings-card {
  position: relative;
}
/* Collapsed by default; toggled open by the toolbar chevron button */
.mp-settings-card:not(.is-open):not(.is-closing) { display: none; }
.mp-settings-card.is-open,
.mp-settings-card.is-closing { display: block; }
.mp-settings-card.is-open { animation: mpSettingsIn .25s ease; }
.mp-settings-card.is-closing { animation: mpSettingsOut .25s ease forwards; }
@keyframes mpSettingsIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mpSettingsOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-8px); }
}

.mp-settings-toggle .mp-toggle-caret {
  margin-left: 3px;
  font-size: 11px;
  transition: transform .2s ease;
}

.mp-settings-toggle:not([aria-expanded="true"]) {
  color: var(--mp-ink-soft) !important;
}

.mp-settings-toggle:not([aria-expanded="true"]):hover,
.mp-settings-toggle:not([aria-expanded="true"]):focus-visible {
  background: var(--mp-teal-soft) !important;
  border-color: var(--mp-teal) !important;
  color: var(--mp-ink-soft) !important;
}

.mp-settings-toggle[aria-expanded="true"] .mp-toggle-caret { transform: rotate(180deg); }
.mp-settings-toggle[aria-expanded="true"] {
  background: var(--mp-teal-soft) !important;
  border-color: var(--mp-teal) !important;
  color: var(--mp-primary) !important;
}

/* When settings are open, keep Re-run expanded */
.mp-settings-toggle[aria-expanded="true"] ~ #reanalyze {
  gap: 7px;
}

.mp-settings-toggle[aria-expanded="true"] ~ #reanalyze .fa,
.mp-settings-toggle[aria-expanded="true"] ~ #reanalyze .fas {
  margin-right: 0;
}

.mp-settings-toggle[aria-expanded="true"] ~ #reanalyze .mp-btn-text {
  max-width: 220px;
  margin-left: 0;
  opacity: 1;
}

.mp-settings-card .mp-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 11rem;
}

.mp-settings-card .mp-card-title .fa {
  font-size: inherit;
  color: inherit;
  line-height: 1;
}

@media (min-width: 821px) {
  .mp-settings-form-row {
    grid-template-columns: 1fr 1fr minmax(0, 0.95fr);
  }

  .mp-form-col--hakn {
    padding-top: 25px;
  }
}

#mp-panel-metaanalysis .mp-settings-form-row .shiny-input-container {
  width: 100%;
  margin-bottom: 0;
}

#mp-panel-metaanalysis .mp-settings-form-row .selectize-control {
  width: 100% !important;
}

.mp-form-col--hakn .checkbox {
  margin-top: 0;
  margin-bottom: 0;
}

.mp-form-col--hakn .checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  color: var(--mp-ink);
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.mp-form-col--hakn input[type="checkbox"] {
  border-color: var(--mp-primary);
  margin-top: 2px;
}

.mp-form-col--hakn input[type="checkbox"]:checked {
  background: var(--mp-primary);
  border-color: var(--mp-primary);
}

.mp-form-col--hakn input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 2px rgba(3, 114, 183, 0.2);
}

.mp-settings-instr-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  /* border-top: none !important; */
  /* border-right: none !important; */
  z-index: 1;
  display: inline-flex;
  width: auto;
  white-space: nowrap;
}

.mp-settings-instr-btn:hover,
.mp-settings-instr-btn:focus-visible {
  border-top: 1px solid var(--mp-teal) !important;
  border-right: 1px solid var(--mp-teal) !important;
}

.checkbox label, .radio label { font-size: 14px; line-height: 20px; color: var(--mp-ink-soft); }

/* Range sliders (ion.rangeSlider) — neutral grey to match the filter boxes.
   Uses a fixed grey (not a flipping token) so the white tooltip text stays
   readable in both light and dark mode. */
.irs-bar, .irs-bar-edge { background: var(--mp-control) !important; border-color: var(--mp-control) !important; }
.irs-line { background: var(--mp-line) !important; border-color: var(--mp-line) !important; }
.irs-single, .irs-from, .irs-to { background: var(--mp-control) !important; color: #fff !important; }
.irs-single:before, .irs-from:before, .irs-to:before { border-top-color: var(--mp-control) !important; }
.irs-handle > i:first-child { background: var(--mp-control) !important; }
.irs-handle { border-color: var(--mp-control) !important; }
.irs-min, .irs-max { background: var(--mp-line-soft) !important; color: var(--mp-muted) !important; }
.irs-grid-text { color: var(--mp-muted); }

/* Checkboxes & radios — greyish accent */
.checkbox input[type="checkbox"],
.radio input[type="radio"] { accent-color: var(--mp-control); }

/* Square checkboxes (border-radius 0) — custom box + checkmark, since native
   checkboxes ignore border-radius when rendered via accent-color. Radios stay
   round (accent-color above still applies to them). */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1px solid var(--mp-control);
  border-radius: 0;
  background: var(--mp-surface);
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
  vertical-align: middle;
}
input[type="checkbox"]:checked {
  background: var(--mp-control);
  border-color: var(--mp-control);
}
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--mp-teal-soft);
}

/* ----------------------------------------------------------------------------
   9. Form controls
   ------------------------------------------------------------------------- */
.form-control, .selectize-input {
  border-radius: 0 !important;
  border: 1px solid var(--mp-line) !important;
  box-shadow: none !important;
  font-family: var(--mp-font);
  font-size: 14px;
  color: var(--mp-ink);
  min-height: 40px;
}
.form-control:focus, .selectize-input.focus {
  border-color: var(--mp-teal) !important;
  box-shadow: 0 0 0 2px var(--mp-teal-soft) !important;
}
.selectize-dropdown {
  border-radius: 0;
  border: 1px solid var(--mp-line);
  box-shadow: var(--mp-shadow);
}
.selectize-dropdown .active {
  background: var(--mp-teal-soft) !important;
  color: var(--mp-primary) !important;
}
.selectize-input .item {
  background: var(--mp-teal-soft) !important;
  color: var(--mp-primary-dark) !important;
  border-radius: 0 !important;
  border: none !important;
  font-weight: 500;
}
.control-label { font-weight: 400; color: var(--mp-ink); font-size: 12px; line-height: 20px; }
.checkbox input[type="checkbox"], .radio input[type="radio"] { accent-color: var(--mp-control); }

/* "View instructions" trigger button + modal source */
.mp-instr-trigger { margin: 6px 0 4px; }
.mp-modal-source { display: none; }

/* Shared modal dialog */
.mp-modal[hidden] { display: none; }
.mp-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.mp-modal-backdrop {
  position: absolute;
  inset: 0;
  /* background: white; */
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  animation: mpModalFade .18s ease;
}
.mp-modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  box-shadow: var(--mp-shadow-lg);
  animation: mpModalIn .2s ease;
}
.mp-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--mp-line);
}
.mp-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.mp-modal-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  margin: 0;
  color: var(--mp-ink);
}
.mp-modal-x {
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: var(--mp-muted);
  cursor: pointer;
  padding: 0 2px;
  transition: color .15s ease;
}
.mp-modal-x:hover { color: var(--mp-ink); }
.mp-modal-body {
  padding: 20px 22px 24px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 22px;
  color: var(--mp-ink-soft);
}
.mp-modal-body p { margin: 0 0 14px; }
.mp-modal-body p:last-child { margin-bottom: 0; }
body.mp-modal-open { overflow: hidden; }
@keyframes mpModalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mpModalIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* Fallback for any remaining Bootstrap collapse markup */
.mp-card .collapse .card,
.mp-filter-panel .collapse .card,
.mp-page .collapse .card {
  background: var(--mp-surface-alt);
  border: 1px solid var(--mp-line-soft);
  border-radius: 0;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--mp-ink-soft);
}
.mp-card .btn-xs, .mp-page .btn-xs {
  border-radius: 0;
  font-size: 14px;
  padding: .25rem .6rem;
}

/* ----------------------------------------------------------------------------
   10. Meta-analysis result tabs (HTML buttons)
   ------------------------------------------------------------------------- */
.mp-results {
  padding-top: 2rem;
}

.mp-results-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 2px solid var(--mp-line);
  margin-bottom: 20px;
  background: transparent;
  box-shadow: none;
}

@media (min-width: 821px) {
  .mp-results-nav-toggle {
    display: none;
  }

  .mp-results-nav-list {
    display: contents;
  }
}

.mp-results-tab {
  position: relative;
  border: none;
  border-radius: 0;
  padding: 11px 16px;
  margin: 0 0 -2px;
  color: var(--mp-ink-soft);
  font-weight: 500;
  font-size: 14px;
  background: transparent;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.mp-results-tab:hover {
  background: var(--mp-teal-soft);
  color: var(--mp-primary);
}

.mp-results-tab.is-active {
  color: var(--mp-primary);
  font-weight: 600;
  border-bottom-color: var(--mp-primary);
}

.mp-results-panel {
  display: none;
}

.mp-results-panel.is-active {
  display: block;
  animation: mpFadeUp .28s ease both;
}
@keyframes mpFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.mp-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 900px) {
  .mp-result-grid { grid-template-columns: 1fr; }
}

.mp-outliers-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.mp-outliers-grid > .mp-card + .mp-card {
  margin-top: 0;
}

.mp-pubbias-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.mp-pubbias-grid > .mp-card + .mp-card {
  margin-top: 0;
}

.mp-pubbias-grid .mp-card > strong {
  display: block;
  margin-bottom: 12px;
  color: var(--mp-ink);
  font-weight: 700;
}

@media (max-width: 900px) {
  .mp-pubbias-grid { grid-template-columns: 1fr; }
}

/* Baujat hidden (k >= 50): summary uses reduced width */
.mp-outliers-grid:has(#baujat_card[style*="display: none"]) {
  grid-template-columns: minmax(0, 60%);
}

.mp-rob-card {
  max-width: 60%;
}

.mp-rob-card .mp-effect-body {
  margin-top: 0;
  padding-bottom: 16px;
}

.mp-rob-card #robplot {
  width: 100% !important;
  max-width: 100%;
  aspect-ratio: 27 / 9;
  overflow: hidden;
}

.mp-rob-card #robplot img,
.mp-rob-card #robplot canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  aspect-ratio: 27 / 9;
  object-fit: contain;
  display: block;
}

.mp-outliers-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 36px;
  margin-bottom: 12px;
  /* clear the top-right help button */
  padding-right: 30px;
}

@media (max-width: 900px) {
  .mp-outliers-metrics {
    flex-direction: column;
    gap: 12px;
  }
}

.mp-outliers-metrics .mp-metric-value {
  margin-bottom: 0;
}

.mp-outliers-summary .mp-effect-body {
  padding-top: 16px;
}

.mp-outliers-summary .mp-effect-body p + p {
  padding-top: 16px;
}

@media (max-width: 900px) {
  .mp-outliers-grid { grid-template-columns: 1fr; }
  .mp-outliers-grid:has(#baujat_card[style*="display: none"]) {
    grid-template-columns: 1fr;
  }
  .mp-rob-card { max-width: 100%; }
}

/* Polished metric cards */
.mp-result-grid .mp-card {
  padding-top: 20px;
}
.mp-metric-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mp-muted);
}
.mp-metric-value {
  font-family: var(--mp-font);
  font-size: 21px;
  font-weight: 400;
  line-height: 30px;
  color: var(--mp-primary);
  margin: 2px 0 12px;
}
.mp-result-grid .mp-metric-value {
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -.01em;
}

/* Main-results mini-plots: hold space and hide transient width errors while hidden. */
#effectdist,
#hetplot,
#effectdist.out {
  min-height: 95px;
}
#hetplot {
  min-height: 100px;
}
#effectdist.shiny-output-error,
#hetplot.shiny-output-error,
#effectdist.out.shiny-output-error {
  display: none !important;
}

.mp-outliers-summary .mp-metric-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--mp-ink);
}

.mp-outliers-summary .mp-metric-value {
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -.01em;
}

.mp-metric-delta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  font-size: 16px;
  line-height: 1;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.mp-metric-delta--good { color: forestgreen; }
.mp-metric-delta--bad { color: firebrick; }
.mp-metric-delta--neutral,
.mp-metric-delta--unchanged { color: var(--mp-muted); }

.mp-metric-value #TE, .mp-metric-value #I2,
.mp-metric-value #TE\.out, .mp-metric-value #I2\.out { color: var(--mp-primary) !important; }

.mp-metric-value #TE .mp-metric-muted,
.mp-metric-value #I2 .mp-metric-muted,
.mp-metric-value #TE\.out .mp-metric-muted,
.mp-metric-value #I2\.out .mp-metric-muted {
  font-size: 14px;
  font-weight: 400;
  color: var(--mp-muted) !important;
}

.mp-metric-value #TE .mp-metric-ci,
.mp-metric-value #I2 .mp-metric-ci,
.mp-metric-value #TE\.out .mp-metric-ci,
.mp-metric-value #I2\.out .mp-metric-ci {
  font-size: 16px;
}

.mp-metric-value #I2 sup,
.mp-metric-value #I2\.out sup {
  font-size: 0.72em;
  line-height: 0;
  vertical-align: super;
}

.mp-plot-caption {
  font-size: 12px;
  line-height: 17px;
  color: var(--mp-muted);
  margin: 2px 0 16px;
}

.mp-effect-body {
  margin-top: 1rem;
  font-size: 13px;
  line-height: 1.3;
  color: var(--mp-ink-soft);
}

.mp-effect-body .shiny-html-output {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.mp-effect-body .shiny-html-output + .shiny-html-output {
  margin-top: 1rem;
}

.mp-effect-body p {
  margin: 0;
}

.mp-effect-body ul {
  margin: 1rem 0 0;
  padding-left: 1.2rem;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.mp-effect-body li {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.mp-effect-body li + li {
  margin-top: 0.15rem;
}

.mp-effect-body ul + p {
  padding-top: 16px;
}

.mp-modal-body #effectdist {
  margin: 0 0 1rem;
}

.mp-note {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: var(--mp-teal-soft);
  border: 1px solid rgba(94, 186, 189, .32);
  border-radius: 0;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--mp-slate);
  margin-bottom: 16px;
}
.mp-note > .fa { color: var(--mp-teal); margin-top: 2px; flex-shrink: 0; }
.mp-note-text {
  flex: 1;
  min-width: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.mp-note-text a {
  color: var(--mp-primary);
  text-decoration: none;
}
.mp-note-text a:hover,
.mp-note-text a:focus-visible {
  color: var(--mp-primary-dark);
  text-decoration: underline;
}

.mp-note-text strong .fa {
  margin-right: 3px;
  color: inherit;
  font-size: 0.9em;
  vertical-align: -0.05em;
}

.mp-note--with-dl {
  align-items: center;
  flex-wrap: wrap;
  gap: 11px 16px;
}

.mp-note--with-dl .mp-plot-dl {
  margin: 0 0 0 auto;
  flex-shrink: 0;
}

/* Small legend under a comparison plot (e.g. outliers-removed vs original) */
.mp-plot-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 2px 0 10px;
  font-size: 12px;
  color: var(--mp-muted);
}
.mp-plot-legend .mp-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.mp-plot-legend .mp-legend-swatch { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.mp-plot-legend .mp-legend-swatch--new  { background: var(--mp-teal); }
.mp-plot-legend .mp-legend-swatch--orig { background: #aab2b8; }

/* P-curve verdict badges */
.mp-pcurve-verdict {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 4px;
}
.mp-verdict {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
}
.mp-verdict .fa { font-size: 12px; }
.mp-verdict.is-yes  { background: var(--mp-success-bg); color: var(--mp-success-ink); border-color: rgba(28, 122, 50, .25); }
.mp-verdict.is-warn { background: #fdf0e3; color: #a05a17; border-color: rgba(160, 90, 23, .28); }
.mp-verdict.is-off  { background: var(--mp-surface-alt); color: var(--mp-muted); border-color: var(--mp-line); }
.mp-pcurve-power { font-size: 13px; color: var(--mp-ink-soft); margin: 8px 0 0; }
.mp-pcurve-note  { color: var(--mp-muted); }

/* P-curve statistical results table */
.mp-pcurve-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  font-size: 13px;
  color: var(--mp-ink-soft);
}
.mp-pcurve-table thead th {
  font-weight: 600;
  color: var(--mp-ink);
  padding: 4px 8px;
  text-align: center;
  white-space: nowrap;
}
.mp-pcurve-table thead th.grp {
  border-bottom: 1px solid var(--mp-line);
  color: var(--mp-muted);
  font-weight: 600;
}
.mp-pcurve-table thead th sub { font-weight: 400; }
.mp-pcurve-table tbody td {
  padding: 6px 8px;
  text-align: center;
  border-top: 1px solid var(--mp-line-soft);
}
.mp-pcurve-table tbody td.rowlab {
  text-align: left;
  font-weight: 600;
  color: var(--mp-ink);
  white-space: nowrap;
}

/* Publication bias: plot + table containers */
.mp-pubbias-plot-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Desktop: p-curve 3:2; funnel slightly taller (7:5) */
@media (min-width: 821px) {
  .mp-funnel-card .mp-pubbias-plot-wrap {
    aspect-ratio: 7 / 5;
    width: 100%;
    max-width: 720px;
  }

  .mp-pcurve-card:not(.mp-funnel-card) .mp-pubbias-plot-wrap {
    aspect-ratio: 3 / 2;
    width: 100%;
    max-width: 720px;
  }

  .mp-pubbias-plot-wrap #funnel,
  .mp-pubbias-plot-wrap #pcurve {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
  }

  .mp-pubbias-plot-wrap #funnel img,
  .mp-pubbias-plot-wrap #funnel canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    aspect-ratio: 7 / 5;
    object-fit: contain;
    display: block;
  }

  .mp-pubbias-plot-wrap #pcurve img,
  .mp-pubbias-plot-wrap #pcurve canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    display: block;
  }
}


.mp-pubbias-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin-top: 14px;
}

.mp-pubbias-table-scroll .mp-pcurve-table {
  margin-top: 0;
}

/* Moderator analysis tables */
.mp-moderator-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Plot download toolbar (e.g. forest plot PNG / PDF) */
.mp-plot-dl {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mp-plot-dl-label {
  font-size: 13px;
  color: var(--mp-muted);
  margin-right: 2px;
}
.mp-plot-dl-sublabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--mp-ink-soft);
  margin-left: 4px;
}
.mp-plot-dl-sublabel:first-of-type {
  margin-left: 0;
}
.mp-plot-dl .mp-btn {
  padding: .4rem .9rem;
  font-size: 13px;
  background: var(--mp-surface) !important;
  border-color: var(--mp-line) !important;
  color: var(--mp-ink-soft) !important;
  text-decoration: none !important;
}
.mp-plot-dl .mp-btn:hover,
.mp-plot-dl .mp-btn:focus,
.mp-plot-dl .mp-btn:focus-visible {
  background: var(--mp-teal-soft) !important;
  border-color: var(--mp-teal) !important;
  color: var(--mp-ink-soft) !important;
  text-decoration: none !important;
}
.mp-plot-dl .mp-btn .fa {
  margin-right: 6px;
  color: inherit;
}

.mp-plot-wrap { overflow-x: auto; }
.mp-plot-wrap--drapery {
  max-width: 720px;
}
.mp-plot-wrap--forest {
  max-width: 900px;
}
#mp-results-drapery #drapery img,
#mp-results-forest #forest img {
  max-width: 100%;
  height: auto;
}
#mp-panel-data .mp-plot-wrap {
  min-height: 420px;
}
/* Height of the scroll area is sized to fill .mp-plot-wrap by
   mpFitDataTableHeight() in script.js; keep a sensible floor only. */
#mp-panel-data .dataTables_wrapper .dataTables_scrollBody {
  min-height: 180px;
}

/* ----------------------------------------------------------------------------
   11. DataTables
   ------------------------------------------------------------------------- */
.dataTables_wrapper { font-family: var(--mp-font); font-size: 14px; }
table.dataTable thead th {
  font-family: var(--mp-font);
  font-weight: 400;
  font-size: 14px;
  color: var(--mp-slate);
  border-bottom: 2px solid var(--mp-line) !important;
}
table.dataTable tbody td {
  color: var(--mp-ink-soft);
  border-color: var(--mp-line-soft) !important;
}
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd { background: #fbfcfd; }
table.dataTable tbody tr:hover { background: var(--mp-teal-soft) !important; }
/* Download button — ghost style, like the reset-filters button */
.dataTables_wrapper .dt-button {
  background: var(--mp-surface) !important;
  color: var(--mp-ink-soft) !important;
  border: 1px solid var(--mp-line) !important;
  border-radius: 0 !important;
  font-weight: 400;
  padding: .5rem 1rem !important;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.dataTables_wrapper .dt-button:hover,
.dataTables_wrapper .dt-button:focus,
.dataTables_wrapper .dt-button.dt-button-active {
  background: var(--mp-teal-soft) !important;
  border-color: var(--mp-teal) !important;
  color: var(--mp-ink-soft) !important;
}
.dataTables_wrapper .dt-button .dt-down-arrow {
  margin-left: 7px;
  font-size: 9px;
  opacity: .7;
}
/* Don't dim the whole page when the Download collection opens (keep it
   click-through transparent so it still closes on outside click). */
div.dt-button-background {
  background: transparent !important;
}
/* Download collection dropdown — match the greyish border used elsewhere */
.dt-button-collection {
  background: var(--mp-surface) !important;
  border: 1px solid var(--mp-line) !important;
  border-radius: 0 !important;
  box-shadow: var(--mp-shadow) !important;
  padding: 0 !important;
}
.dt-button-collection .dt-button {
  border-radius: 0 !important;
}
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--mp-line) !important;
  border-radius: 0 !important;
  padding: .35rem .7rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--mp-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0;
}

/* ----------------------------------------------------------------------------
   12. Notifications & loader
   ------------------------------------------------------------------------- */
.notie-container {
  font-size: 14px !important;
  z-index: 5000 !important;
}
.notie-textbox {
  padding: 11px 16px !important;
  font-family: var(--mp-font);
  font-size: 14px !important;
  line-height: 1.4;
}
.notie-textbox-inner {
  font-size: inherit;
  line-height: inherit;
}
.notie-background-info { background: var(--mp-teal) !important; }
.progress-bar { background: var(--mp-teal) !important; }
.shiny-notification {
  position: fixed;
  top: 2%;
  right: 2%;
  left: auto;
  border-radius: 0;
  box-shadow: var(--mp-shadow-lg);
  border: 1px solid var(--mp-line);
  font-family: var(--mp-font);
}

/* Computation / loading indicator (Shiny withProgress notification) ---------- */
.shiny-notification:has(.shiny-progress-notification) {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 1100 !important;
  padding: 14px 18px;
  background: var(--mp-surface);
  min-width: 280px;
  max-width: 400px;
}
.shiny-progress-notification {
  min-width: 280px;
}
/* Progress bar is unused — message + detail only */
.shiny-progress-notification .progress {
  display: none !important;
}
.shiny-progress-notification .progress-message {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--mp-ink);
  margin: 0;
}
.shiny-progress-notification .progress-message::before {
  content: "\f110"; /* FontAwesome spinner */
  font-family: "FontAwesome";
  font-weight: 400;
  margin-right: 9px;
  color: var(--mp-teal);
  animation: mpSpin .9s linear infinite;
  display: inline-block;
}
@keyframes mpSpin { to { transform: rotate(360deg); } }
.shiny-progress-notification .progress-detail {
  display: block;
  font-size: 13px;
  line-height: 18px;
  color: var(--mp-muted);
  margin-top: 4px;
}

/* ----------------------------------------------------------------------------
   13. Animations
   ------------------------------------------------------------------------- */
.fade-in              { animation: fadeIn 3s; }
.fade-in-super-short  { animation: fadeIn .5s; }
.fade-in-short        { animation: fadeIn 1.4s; }
.fade-in-long         { animation: fadeIn 4s; }
.to-fade-in, .to-fade-in-short, .to-fade-in-long { opacity: 0; }
@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: none; }
}
.mp-rise { animation: mpRise .5s ease both; }
@keyframes mpRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------------------
   14. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .mp-page,
  #mp-panel-about .mp-page,
  #mp-panel-rpackage .mp-page {
    padding: 22px 16px 48px;
  }

  #mp-panel-data .mp-page {
    padding: 0;
  }

  .mp-foot {
    padding: 20px 16px 32px;
  }

  .mp-card {
    padding: 18px 16px;
  }

  .mp-toolbar {
    gap: 8px;
  }

  .mp-toolbar .mp-selected-badge {
    font-size: 13px;
    padding: .55rem .75rem;
  }

  .mp-about-prose,
  .mp-about-prose p,
  .mp-about-prose li,
  .mp-doclist li a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .mp-about-img,
  .mp-pagehead-art,
  .mp-hero-img-wrap,
  .mp-hero-img {
    max-width: 100%;
  }

  #mp-panel-about .mp-card.mp-about-body {
    margin-top: -6rem;
  }

  .mp-data-layout,
  .mp-data-layout > .mp-card,
  .mp-data-layout .dataTables_wrapper,
  .mp-data-layout .shiny-bound-output,
  .mp-plot-wrap,
  .mp-result-grid,
  .mp-outliers-grid,
  .mp-pubbias-grid {
    max-width: 100%;
    min-width: 0;
  }

  .mp-code-wrap pre {
    max-width: 100%;
  }
}

/* Mobile overrides (after desktop rules — cascade order matters) */
@media (max-width: 820px) {
  #mp-panel-metaanalysis .mp-pagehead--art .mp-pagehead-text {
    padding-right: 0 !important;
  }

  .mp-pagehead--art .mp-pagehead-text {
    padding-right: 0 !important;
  }

  .mp-note,
  .mp-note.mp-note--with-dl {
    display: none !important;
  }

  .mp-form-row,
  .mp-settings-form-row {
    grid-template-columns: 1fr;
  }

  .mp-form-col--hakn {
    padding-top: 0;
  }

  .mp-card-title {
    visibility: hidden;
  }

  .mp-startinfo-ico--img {
    display: none;
  }

  #mp-panel-rpackage .mp-badges {
    gap: 6px;
  }

  #mp-panel-rpackage .mp-badges .mp-shield {
    font-size: 9px;
    height: 24px;
  }

  #mp-panel-rpackage .mp-badges .mp-shield-label,
  #mp-panel-rpackage .mp-badges .mp-shield-value {
    padding: 0 7px;
  }

  .mp-results-nav {
    flex-direction: column;
    gap: 0;
    border-bottom: none;
    margin-bottom: 16px;
  }

  .mp-results-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--mp-line);
    background: var(--mp-surface);
    color: var(--mp-primary);
    font-family: var(--mp-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
  }

  .mp-results-nav-toggle:hover,
  .mp-results-nav-toggle:focus-visible {
    background: var(--mp-teal-soft);
    border-color: var(--mp-teal);
    outline: none;
  }

  .mp-results-nav-caret {
    font-size: 12px;
    color: var(--mp-muted);
    transition: transform .2s ease, color .15s ease;
  }

  .mp-results-nav.is-open .mp-results-nav-caret {
    transform: rotate(180deg);
    color: var(--mp-primary);
  }

  .mp-results-nav-list {
    display: none;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--mp-line);
    border-top: none;
    background: var(--mp-surface);
    box-shadow: var(--mp-shadow-sm);
  }

  .mp-results-nav.is-open .mp-results-nav-list {
    display: flex;
  }

  .mp-results-nav .mp-results-tab {
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--mp-line-soft);
    border-bottom-color: var(--mp-line-soft);
    font-size: 15px;
  }

  .mp-results-nav .mp-results-tab:last-child {
    border-bottom: none;
  }

  .mp-results-nav .mp-results-tab.is-active {
    background: var(--mp-teal-soft);
    color: var(--mp-primary);
    font-weight: 600;
  }

  .mp-results-nav .mp-results-tab:hover {
    background: var(--mp-line-soft);
    color: var(--mp-primary);
  }

  .mp-rob-card #robplot {
    width: 100% !important;
    aspect-ratio: 27 / 9;
    max-height: none;
    overflow: hidden;
  }

  .mp-rob-card #robplot img,
  .mp-rob-card #robplot canvas {
    width: 100% !important;
    height: 100% !important;
    max-height: none;
    aspect-ratio: 27 / 9;
    object-fit: contain;
    object-position: left top;
  }

  /* Publication bias: funnel plot & p-curve */
  .mp-pubbias-grid .mp-pcurve-card {
    min-width: 0;
    overflow-x: visible;
  }

  .mp-pubbias-plot-wrap {
    width: 100%;
    max-width: 100%;
  }

  .mp-pubbias-plot-wrap #funnel,
  .mp-pubbias-plot-wrap #pcurve {
    width: 100% !important;
    max-width: 100%;
  }

  .mp-funnel-card .mp-pubbias-plot-wrap #funnel,
  .mp-pcurve-card:not(.mp-funnel-card) .mp-pubbias-plot-wrap #pcurve {
    max-height: 220px;
    overflow: hidden;
  }

  .mp-pubbias-plot-wrap #funnel img,
  .mp-pubbias-plot-wrap #funnel canvas,
  .mp-pubbias-plot-wrap #pcurve img,
  .mp-pubbias-plot-wrap #pcurve canvas {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    display: block;
  }

  .mp-funnel-card .mp-pubbias-plot-wrap #funnel img,
  .mp-funnel-card .mp-pubbias-plot-wrap #funnel canvas,
  .mp-pcurve-card:not(.mp-funnel-card) .mp-pubbias-plot-wrap #pcurve img,
  .mp-pcurve-card:not(.mp-funnel-card) .mp-pubbias-plot-wrap #pcurve canvas {
    width: 100% !important;
    height: auto !important;
    max-height: 220px !important;
    display: block;
  }

  .mp-pcurve-card .mp-pcurve-verdict {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .mp-pcurve-card .mp-verdict {
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
  }

  .mp-pcurve-card .mp-pcurve-power,
  .mp-pcurve-card .mp-pcurve-note {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .mp-pcurve-card .mp-pubbias-table-scroll {
    margin-top: 10px;
  }

  .mp-pcurve-card .mp-pcurve-table {
    font-size: 12px;
    width: max-content;
    min-width: 100%;
  }

  .mp-pcurve-card .mp-pcurve-table thead th,
  .mp-pcurve-card .mp-pcurve-table tbody td {
    padding: 5px 6px;
  }

  .mp-pcurve-card .mp-pcurve-table tbody td.rowlab {
    white-space: normal;
    max-width: 8.5rem;
  }

  /* Help / instruction modals — full viewport */
  .mp-modal {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  .mp-modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 100dvh;
    min-height: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    box-shadow: none;
    animation: mpModalFade .18s ease;
  }

  .mp-modal-head {
    flex-shrink: 0;
    padding: 14px 16px;
    padding-top: max(14px, env(safe-area-inset-top, 0px));
  }

  .mp-modal-title {
    font-size: 18px;
    line-height: 26px;
  }

  .mp-modal-body {
    flex: 1;
    min-height: 0;
    padding: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  }

  /* Moderator analysis tables */
  #mp-results-moderators .mp-card {
    min-width: 0;
    overflow-x: visible;
  }

  #mp-results-moderators .mp-moderator-table-scroll {
    width: 100%;
    max-width: 100%;
  }

  #mp-results-moderators .mp-moderator-table-scroll .dataTables_wrapper {
    font-size: 12px;
  }

  #mp-results-moderators .mp-moderator-table-scroll table.dataTable {
    font-size: 12px !important;
    width: max-content !important;
    min-width: 100%;
  }

  #mp-results-moderators .mp-moderator-table-scroll table.dataTable thead th,
  #mp-results-moderators .mp-moderator-table-scroll table.dataTable tbody td {
    font-size: 12px !important;
    padding: 5px 6px !important;
    white-space: nowrap;
  }

  /* About & R package — full-width page */
  #mp-panel-about .mp-page,
  #mp-panel-rpackage .mp-page {
    padding: 0;
    max-width: none;
    width: 100%;
  }

  #mp-panel-about .mp-pagehead--ico,
  #mp-panel-rpackage .mp-about-body,
  #mp-panel-about .mp-card.mp-about-body {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  #mp-panel-about .mp-about-prose,
  #mp-panel-rpackage .mp-about-prose {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}