/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   RE STATS MAIN STYLESHEET
   ════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   A PYTHON-BASED STATISTICAL CALCULATOR WITH STEP-BY-STEP SOLUTIONS
   ════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ==================================================
    THEME SYSTEM
   ================================================== */

/*  DARK THEME - CALM FOCUS (DESIGNED FOR LONG SESSIONS)  */
.dark-main {
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);
  color: var(--text-color);

  /* ---   SEMANTIC FONT COLORS (BRIGHT/VIBRANT)   --- */
  --primary: #3A8DCC;
  /* BLUE */
  --secondary: #5FB87A;
  /* GREEN */
  --tertiary: #E57A3D;
  /* ORANGE */
  --quaternary: #C9A832;
  /* GOLDEN */
  --quinary: #B87DA8;
  /* PURPLE */
  --senary: #6BBCD0;
  /* CYAN */
  --septenary: #d54c4c;
  /* ORANGE */

  /* ---   SEMANTIC BACKGROUND COLORS (MUTED/DARK)   --- */
  --primary-bg: #2A4A5E;
  /* DARK BLUE */
  --secondary-bg: #1E3D28;
  /* DARK GREEN */
  --tertiary-bg: #4A4535;
  /* DARK GOLDEN */
  --quaternary-bg: #4A3A30;
  /* DARK ORANGE */
  --quinary-bg: #4A3545;
  /* DARK PURPLE */
  --senary-bg: #2A4550;
  /* DARK CYAN */
  --grey-bg: #4A4A4A;
  /* DARK GREY */

  /* ---   WHOLE   --- */
  --bg-color: #151515;
  /*  WARM OFF-WHITE, SOFTENED OFF FULL BRIGHTNESS SO DENSE MATH ON THE NEAR-BLACK
      ATLAS GROUND DOESN'T HALATE (EASES CONTRAST ~13:1 -> ~10:1, STILL CRISP).  */
  --text-color: #BCB8B2;
  --text-muted-color: #8A8A8A;
  --hover-bg: #2A2A2E;
  --seperator-color: #4A4A4A;
  --input-surface-color: #202022;
  --input-border-line: 0px solid #333333;

  /* ---   NAVBAR   --- */
  --navbar-bg-color: #141414;    /* CHROME — calm dark, a touch under the #181818 content */
  --navbar-border: 1px solid #2A2A2A;
  --mobile-tabbar-h: 0px;   /* DESKTOP DEFAULT: NO BOTTOM BAR. REVIVED TO 56px + SAFE-AREA INSIDE THE @media 768px BLOCK. */

  /* ---   NAVBAR SEGMENTED TABS   --- */
  --tab-track-bg:     rgba(255, 255, 255, 0.045);
  --tab-track-border: rgba(255, 255, 255, 0.07);
  --tab-active-bg:    rgba(255, 255, 255, 0.10);
  --tab-hover-bg:     rgba(255, 255, 255, 0.05);

  /* ---   SIDEBAR   --- */
  --sidebar-bg-color: #141414;   /* CHROME — calm dark, same as navbar */
  --sidebar-border: 0px solid #2A2A2C;

  /* SIDEBAR VERTICAL RHYTHM — TWO TOKENS, USED EVERYWHERE */
  --sidebar-gap-tight: 0.4em;   /* LABEL → ITS CONTROL */
  --sidebar-gap-block: 0.8em;   /* HEADING → BODY, BLOCK → BLOCK */

  /* CORNER RADIUS FOR EVERY FORM CONTROL — CARDS, DROPDOWNS, INPUTS */
  --control-radius: 3px;
  
  --checklist-border-color: #333333;

  /* ---   SOLUTION   --- */
  --solution-bg-color: #181818;   /* VS Code "Dark Modern" panel background */
  --index-label-color: #6A6A6A;
  --sub-heading-border-color: 0.5px solid #A89A63;
  --minor-heading-border-color: 0.5px solid #B8704A;

  /* ---   TABLE   --- */
  --table-bg-color: #DCDCDC;
  --table-text-color: #DCDCDC;
  --table-border-color: rgba(156, 163, 175, 0.25);
  --table-header-border-color: rgba(156, 163, 175, 0.5);
  --table-header-bg: rgba(255, 255, 255, 0.04);
  --table-header-text-color: #FFFFFF;

  /* ---   POPOVER   --- */
  --popover-bg-color: #252526;
  --popover-text-color: #CCCCCC;
  --popover-border-color: #454545;
}

/*  LIGHT THEME - CLEAN PAPER (DESIGNED FOR CLARITY)  */
.light-main {
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);
  color: var(--text-color);

  /* ---   SEMANTIC FONT COLORS (RICH/READABLE ON LIGHT)   --- */
  --primary: #2E8AC8;
  /* STATICA BLUE (FROM WORDMARK) */
  --secondary: #059669;
  /* GREEN */
  --tertiary: #EA580C;
  /* ORANGE */
  --quaternary: #bca442;
  /* GOLDEN */
  --quinary: #8A5DA8;
  /* PURPLE (DUSTY MAUVE, MATCHES DARK-MODE TEMPERAMENT) */
  --senary: #0891B2;
  /* CYAN */
  --septenary: #DC2626;
  /* RED */

  /* ---   SEMANTIC BACKGROUND COLORS (SOFT/LIGHT TINTS)   --- */
  --primary-bg: #DBEAFE;
  /* LIGHT BLUE */
  --secondary-bg: #D1FAE5;
  /* LIGHT GREEN */
  --tertiary-bg: #FEF3C7;
  /* LIGHT GOLDEN */
  --quaternary-bg: #FFEDD5;
  /* LIGHT ORANGE */
  --quinary-bg: #F3E8FF;
  /* LIGHT PURPLE */
  --senary-bg: #CFFAFE;
  /* LIGHT CYAN */
  --grey-bg: #D0D0D0;
  /* LIGHT GREY */

  /* ---   WHOLE   --- */
  --bg-color: #E9E8E4;           /* CANVAS — calm neutral-warm, the base everything layers on (no pure white) */
  --text-color: #383C44;
  --text-muted-color: #6E7178;
  --hover-bg: #E2E1DB;

  /* SIDEBAR VERTICAL RHYTHM — SHARED GEOMETRY WITH DARK (COLOR-ONLY THEME DIFF) */
  --sidebar-gap-tight: 0.4em;   /* LABEL → ITS CONTROL */
  --sidebar-gap-block: 0.8em;   /* HEADING → BODY, BLOCK → BLOCK */

  /* CORNER RADIUS FOR EVERY FORM CONTROL — CARDS, DROPDOWNS, INPUTS */
  --control-radius: 3px;

  /* ---   NAVBAR   --- */
  --navbar-bg-color: #E6E4DD;    /* CHROME — darker than the content */
  --navbar-border: 0.5px solid #DAD7CF;

  /* ---   NAVBAR SEGMENTED TABS   --- */
  --tab-track-bg:     rgba(0, 0, 0, 0.04);
  --tab-track-border: rgba(0, 0, 0, 0.07);
  --tab-active-bg:    #FCFBF8;
  --tab-hover-bg:     rgba(0, 0, 0, 0.035);

  /* ---   SIDEBAR   --- */
  --sidebar-bg-color: #E6E4DD;   /* CHROME — darker than the content, same as navbar */
  --sidebar-border: 0px solid #E0E0E0;
  --seperator-color: #CBC8BF;
  --checklist-border-color: #D6D2C8;
  --learning-checklist-color: #7C3AED;

  /* ---   INPUT   --- */
  --input-surface-color: #F6F5F1;
  --input-border-line: 0px solid #D0D0D0;

  /* ---   SOLUTION   --- */
  --solution-bg-color: #F6F5F1;
  --index-label-color: #9CA3AF;
  --sub-heading-border-color: 0.5px solid #CA8A04;
  --minor-heading-border-color: 0.5px solid #9A3409;

  /* ---   TABLE   --- */
  --table-bg-color: #FCFBF8;
  --table-text-color: #374151;
  --table-border-color: rgba(209, 213, 219, 0.5);
  --table-header-border-color: rgba(156, 163, 175, 0.6);
  --table-header-bg: rgba(236, 234, 228, 0.96);
  --table-header-text-color: #374151;

  /* ---   POPOVER   --- */
  --popover-bg-color: #F6F5F1;
  --popover-text-color: #374151;
  --popover-border-color: #D1D5DB;
}

/* ==================================================
    MATHJAX COLOR CLASSES (Theme-aware)
   ================================================== */

/* BASE SEMANTIC COLORS */
.mjx-primary,
.mjx-primary * {
  color: var(--primary) !important;
}

.mjx-secondary,
.mjx-secondary * {
  color: var(--secondary) !important;
}

.mjx-tertiary,
.mjx-tertiary * {
  color: var(--tertiary) !important;
}

.mjx-quaternary,
.mjx-quaternary * {
  color: var(--quaternary) !important;
}

.mjx-quinary,
.mjx-quinary * {
  color: var(--quinary) !important;
}

.mjx-senary,
.mjx-senary * {
  color: var(--senary) !important;
}

.mjx-septenary,
.mjx-septenary * {
  color: var(--septenary) !important;
}


/* OPERATION SEMANTIC COLORS */
[class*="mjx-addition"],
[class*="mjx-addition"] * {
  color: var(--primary) !important;
}

[class*="mjx-subtraction"],
[class*="mjx-subtraction"] * {
  color: var(--septenary) !important;
}

[class*="mjx-multiplication"],
[class*="mjx-multiplication"] * {
  color: var(--secondary) !important;
}

[class*="mjx-division"],
[class*="mjx-division"] * {
  color: var(--quinary) !important;
}

[class*="mjx-exponent"],
[class*="mjx-exponent"] * {
  color: var(--tertiary) !important;
}

/* GOLDEN */
.mjx-round,
.mjx-round * {
  color: var(--quaternary) !important;
}

/* ORANGE */
.mjx-absolute,
.mjx-absolute * {
  color: var(--primary) !important;
}

/* BLUE */
.mjx-factorial,
.mjx-factorial * {
  color: var(--secondary) !important;
}

/* GREEN */
.mjx-percentage,
.mjx-percentage * {
  color: var(--tertiary) !important;
}

/* GOLDEN */
[class*="mjx-squareroot"],
[class*="mjx-squareroot"] * {
  color: var(--quaternary) !important;
}

/* NATURAL LOG */
[class*="mjx-logarithm"],
[class*="mjx-logarithm"] * {
  color: var(--senary) !important;
}

/* ORANGE */

/*  CELL BACKGROUND COLOURS — MATHJAX TABLES  */
.mjx-cell-primary,
.mjx-cell-primary * {
  color: var(--primary-bg) !important;
}

.mjx-cell-secondary,
.mjx-cell-secondary * {
  color: var(--secondary-bg) !important;
}

.mjx-cell-tertiary,
.mjx-cell-tertiary * {
  color: var(--tertiary-bg) !important;
}

.mjx-cell-quaternary,
.mjx-cell-quaternary * {
  color: var(--quaternary-bg) !important;
}

.mjx-cell-quinary,
.mjx-cell-quinary * {
  color: var(--quinary-bg) !important;
}

.mjx-cell-senary,
.mjx-cell-senary * {
  color: var(--senary-bg) !important;
}

.mjx-cell-grey,
.mjx-cell-grey * {
  color: var(--grey-bg) !important;
}

/*  KATEX  */
.katex {
  font-size: 1.1em;
  opacity: 0;
  transition: opacity 180ms ease-out;
}

.katex.katex-faded-in {
  opacity: 1;
}

.katex-mathml {
  display: none !important;
}

.vlist {
  height: 3em;
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
                        PAGE STRUCTURE
   ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */

/* ==================================================
    PAGE LOADER
   ================================================== */

.overlay-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  transition: opacity 0.45s ease-out;
}

.overlay-loader-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ==================================================
    LOADING SCENE
    Shared by the boot splash (#restats_splash, dash_app.py) and the in-app
    overlay loader (#overlay_loader, app.py). A wholly PROCEDURAL deep-space
    field (no raster): a nucleus-lit gradient, a drifting milky-way band, a
    breathing warm core glow (the Atlas sun), brand-tinted nebula sheen,
    twinkling drifting stars, faint floating statistical glyphs, a big crisp
    Re.Statica wordmark at centre, a vignette, and a shimmer progress cue.
    ONE scene, painted from first paint through app-ready — seamless hand-off.
   ================================================== */
.rs-loadscene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #04050a;
}
.rs-loadscene > * { position: absolute; inset: 0; }

/* DEEP SPACE — a nucleus-lit navy gradient fading to near-black at the rim */
.rs-loadscene__bg {
  background: radial-gradient(120% 96% at 50% 40%, #121a30 0%, #0c1120 36%, #070a14 66%, #04050a 100%);
}

/* MILKY-WAY BAND — a soft diagonal galactic sweep, slowly listing */
.rs-loadscene__band {
  background:
    radial-gradient(58% 16% at 50% 50%, rgba(126, 152, 220, 0.12), rgba(126, 152, 220, 0.045) 46%, transparent 72%),
    radial-gradient(34% 9% at 36% 50%, rgba(255, 198, 148, 0.07), transparent 70%);
  mix-blend-mode: screen;
  animation: rsBand 26s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes rsBand {
  0%   { transform: rotate(-25deg) scale(1.55) translateY(2.5%);  opacity: 0.75; }
  100% { transform: rotate(-21deg) scale(1.64) translateY(-2.5%); opacity: 1; }
}

/* NEBULA SHEEN — two soft brand-tinted glows (orange + blue) drift over the field */
.rs-loadscene__sheen {
  background:
    radial-gradient(42% 38% at 26% 72%, rgba(229, 122, 61, 0.18), transparent 70%),
    radial-gradient(46% 40% at 75% 30%, rgba(58, 141, 204, 0.18), transparent 72%);
  mix-blend-mode: screen;
  animation: rsSheen 24s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes rsSheen {
  0%   { transform: translate3d(-2%, 1%, 0) scale(1.05); opacity: 0.65; }
  100% { transform: translate3d(3%, -2%, 0) scale(1.13); opacity: 1; }
}

/* VIGNETTE — deepen the edges so the wordmark holds the eye (echoes the Atlas backdrop) */
.rs-loadscene__vignette {
  background: radial-gradient(120% 120% at 50% 47%, transparent 38%, rgba(3, 3, 6, 0.64) 100%);
  pointer-events: none;
}

/* CORE GLOW — a warm breath of light behind the wordmark, like the Atlas sun pulse */
.rs-loadscene__core {
  background: radial-gradient(34% 28% at 50% 46%, rgba(255, 214, 150, 0.20), rgba(255, 214, 150, 0.05) 46%, transparent 70%);
  mix-blend-mode: screen;
  animation: rsCoreBreath 4.6s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes rsCoreBreath {
  0%, 100% { transform: scale(1);    opacity: 0.6; }
  50%      { transform: scale(1.08); opacity: 1; }
}

/* TWINKLE STARS — the whole field, twinkling + drifting as a layer for parallax */
.rs-loadscene__stars {
  pointer-events: none;
  animation: rsDrift 52s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes rsDrift {
  0%   { transform: translate3d(-1.2%, 0.8%, 0); }
  100% { transform: translate3d(1.2%, -0.8%, 0); }
}
.rs-loadscene__stars i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #eaf2ff;
  box-shadow: 0 0 6px 1px rgba(220, 232, 255, 0.85);
  opacity: 0;
  animation: rsTwinkle 3.4s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes rsTwinkle {
  0%, 100% { opacity: 0;    transform: scale(0.5); }
  50%      { opacity: 0.95; transform: scale(1); }
}
/* positions, cadence + a few warm-gold sparks — seeded for even spread along the
   milky band and the field, kept clear of the central wordmark (generated, not hand-fudged) */
.rs-loadscene__stars i:nth-child(1) { left: 55.9%; top: 89.8%; animation-delay: 2.5s; animation-duration: 3.4s; width: 1.6px; height: 1.6px; }
.rs-loadscene__stars i:nth-child(2) { left: 62.7%; top: 77.3%; animation-delay: 0.4s; animation-duration: 4.6s; width: 1.3px; height: 1.3px; background: #ffd6a0; box-shadow: 0 0 7px 1px rgba(255, 210, 150, 0.9); }
.rs-loadscene__stars i:nth-child(3) { left: 5.1%; top: 95.3%; animation-delay: 2.6s; animation-duration: 3.3s; width: 1.9px; height: 1.9px; }
.rs-loadscene__stars i:nth-child(4) { left: 44.2%; top: 82.0%; animation-delay: 2.1s; animation-duration: 4.3s; width: 1.9px; height: 1.9px; }
.rs-loadscene__stars i:nth-child(5) { left: 28.3%; top: 96.8%; animation-delay: 3.0s; animation-duration: 3.6s; width: 2.4px; height: 2.4px; }
.rs-loadscene__stars i:nth-child(6) { left: 94.9%; top: 28.2%; animation-delay: 3.8s; animation-duration: 3.9s; width: 1.2px; height: 1.2px; background: #ffd6a0; box-shadow: 0 0 7px 1px rgba(255, 210, 150, 0.9); }
.rs-loadscene__stars i:nth-child(7) { left: 39.9%; top: 8.9%; animation-delay: 1.1s; animation-duration: 3.2s; width: 2.3px; height: 2.3px; }
.rs-loadscene__stars i:nth-child(8) { left: 79.1%; top: 29.3%; animation-delay: 0.8s; animation-duration: 4.5s; width: 1.5px; height: 1.5px; }
.rs-loadscene__stars i:nth-child(9) { left: 21.9%; top: 27.6%; animation-delay: 1.3s; animation-duration: 4.8s; width: 2.3px; height: 2.3px; }
.rs-loadscene__stars i:nth-child(10) { left: 39.6%; top: 64.8%; animation-delay: 4.2s; animation-duration: 3.4s; width: 1.1px; height: 1.1px; }
.rs-loadscene__stars i:nth-child(11) { left: 8.2%; top: 74.9%; animation-delay: 2.5s; animation-duration: 3.7s; width: 1.2px; height: 1.2px; }
.rs-loadscene__stars i:nth-child(12) { left: 95.0%; top: 48.0%; animation-delay: 0.8s; animation-duration: 3.3s; width: 2.5px; height: 2.5px; }
.rs-loadscene__stars i:nth-child(13) { left: 95.3%; top: 19.4%; animation-delay: 3.5s; animation-duration: 4.2s; width: 1.2px; height: 1.2px; }
.rs-loadscene__stars i:nth-child(14) { left: 18.2%; top: 77.1%; animation-delay: 2.3s; animation-duration: 4.7s; width: 1.2px; height: 1.2px; background: #ffd6a0; box-shadow: 0 0 7px 1px rgba(255, 210, 150, 0.9); }
.rs-loadscene__stars i:nth-child(15) { left: 6.9%; top: 18.7%; animation-delay: 0.6s; animation-duration: 3.7s; width: 1.7px; height: 1.7px; }
.rs-loadscene__stars i:nth-child(16) { left: 97.1%; top: 64.4%; animation-delay: 0.6s; animation-duration: 3.1s; width: 1.7px; height: 1.7px; }
.rs-loadscene__stars i:nth-child(17) { left: 3.1%; top: 62.4%; animation-delay: 1.3s; animation-duration: 5.0s; width: 2.1px; height: 2.1px; }
.rs-loadscene__stars i:nth-child(18) { left: 73.2%; top: 68.9%; animation-delay: 1.5s; animation-duration: 4.4s; width: 2.7px; height: 2.7px; }
.rs-loadscene__stars i:nth-child(19) { left: 86.4%; top: 41.6%; animation-delay: 2.4s; animation-duration: 4.2s; width: 2.5px; height: 2.5px; }
.rs-loadscene__stars i:nth-child(20) { left: 30.5%; top: 68.4%; animation-delay: 3.8s; animation-duration: 4.3s; width: 1.2px; height: 1.2px; background: #ffd6a0; box-shadow: 0 0 7px 1px rgba(255, 210, 150, 0.9); }
.rs-loadscene__stars i:nth-child(21) { left: 90.6%; top: 85.6%; animation-delay: 1.3s; animation-duration: 3.3s; width: 1.7px; height: 1.7px; }
.rs-loadscene__stars i:nth-child(22) { left: 31.9%; top: 81.7%; animation-delay: 0.3s; animation-duration: 3.1s; width: 1.5px; height: 1.5px; }
.rs-loadscene__stars i:nth-child(23) { left: 5.6%; top: 84.1%; animation-delay: 2.8s; animation-duration: 4.6s; width: 1.9px; height: 1.9px; }
.rs-loadscene__stars i:nth-child(24) { left: 68.1%; top: 20.9%; animation-delay: 0.0s; animation-duration: 3.9s; width: 1.2px; height: 1.2px; }
.rs-loadscene__stars i:nth-child(25) { left: 89.8%; top: 10.3%; animation-delay: 0.5s; animation-duration: 3.9s; width: 2.1px; height: 2.1px; }
.rs-loadscene__stars i:nth-child(26) { left: 87.2%; top: 77.7%; animation-delay: 2.7s; animation-duration: 3.4s; width: 1.5px; height: 1.5px; }
.rs-loadscene__stars i:nth-child(27) { left: 21.9%; top: 87.5%; animation-delay: 2.3s; animation-duration: 4.6s; width: 2.9px; height: 2.9px; }
.rs-loadscene__stars i:nth-child(28) { left: 71.9%; top: 81.8%; animation-delay: 2.1s; animation-duration: 4.9s; width: 2.8px; height: 2.8px; }
.rs-loadscene__stars i:nth-child(29) { left: 49.1%; top: 67.6%; animation-delay: 1.7s; animation-duration: 4.9s; width: 1.7px; height: 1.7px; background: #ffd6a0; box-shadow: 0 0 7px 1px rgba(255, 210, 150, 0.9); }
.rs-loadscene__stars i:nth-child(30) { left: 52.9%; top: 17.2%; animation-delay: 2.7s; animation-duration: 4.1s; width: 1.9px; height: 1.9px; background: #ffd6a0; box-shadow: 0 0 7px 1px rgba(255, 210, 150, 0.9); }
.rs-loadscene__stars i:nth-child(31) { left: 32.0%; top: 31.9%; animation-delay: 4.2s; animation-duration: 4.8s; width: 1.2px; height: 1.2px; }
.rs-loadscene__stars i:nth-child(32) { left: 78.4%; top: 14.0%; animation-delay: 0.1s; animation-duration: 3.4s; }
.rs-loadscene__stars i:nth-child(33) { left: 98.0%; top: 90.1%; animation-delay: 4.0s; animation-duration: 3.9s; width: 1.1px; height: 1.1px; background: #ffd6a0; box-shadow: 0 0 7px 1px rgba(255, 210, 150, 0.9); }
.rs-loadscene__stars i:nth-child(34) { left: 20.1%; top: 17.7%; animation-delay: 3.8s; animation-duration: 4.6s; width: 1.1px; height: 1.1px; }

/* FLOATING GLYPHS — faint statistical symbols drifting in the deep field (atmosphere) */
.rs-loadscene__glyphs { pointer-events: none; }
.rs-loadscene__glyphs span {
  position: absolute;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 2.3vw, 1.8rem);
  opacity: 0;
  text-shadow: 0 0 18px currentColor;
  animation: rsGlyph 9s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes rsGlyph {
  0%, 100% { opacity: 0;    transform: translateY(6px); }
  50%      { opacity: 0.17; transform: translateY(-6px); }
}
.rs-loadscene__glyphs span:nth-child(1) { left: 9%;  top: 17%; color: #5aa7e0; animation-delay: 0.0s; }
.rs-loadscene__glyphs span:nth-child(2) { left: 85%; top: 19%; color: #e88f4a; animation-delay: 2.4s; }
.rs-loadscene__glyphs span:nth-child(3) { left: 13%; top: 79%; color: #d8b24a; animation-delay: 4.1s; }
.rs-loadscene__glyphs span:nth-child(4) { left: 82%; top: 73%; color: #5aa7e0; animation-delay: 1.6s; }
.rs-loadscene__glyphs span:nth-child(5) { left: 29%; top: 11%; color: #e88f4a; animation-delay: 5.2s; }
.rs-loadscene__glyphs span:nth-child(6) { left: 70%; top: 84%; color: #d8b24a; animation-delay: 3.3s; }
.rs-loadscene__glyphs span:nth-child(7) { left: 92%; top: 49%; color: #5aa7e0; animation-delay: 6.0s; }

/* WORDMARK — the actual Re.Statica brush logo (incl. its tagline), the hero at centre */
.rs-loadscene__wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-bottom: 4vh;          /* SIT A TOUCH ABOVE TRUE CENTRE, LEAVING ROOM FOR THE CUE */
  pointer-events: none;
}
.rs-loadscene__logo {
  /*  THE SOURCE ARTWORK IS A WIDE 6.4:1; THE NAVBAR RENDERS IT AT 140x44 (3.18:1),
      WHICH IS THE PROPORTION THE BRAND READS AS "RIGHT". MATCH THAT HERE SO THE
      LOADER WORDMARK LOOKS LIKE THE NAVBAR LOGO (CONDENSED, UPRIGHT), NOT STRETCHED-WIDE.  */
  width: clamp(220px, 44vw, 500px);
  aspect-ratio: 140 / 44;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
  /* SOFT BRAND HALO LIFTS THE BRUSH WORDMARK OFF THE DARK FIELD */
  filter: drop-shadow(0 0 30px rgba(80, 140, 210, 0.22)) drop-shadow(0 0 10px rgba(255, 160, 90, 0.14));
}

/* PROGRESS CUE — a slim track with a brand-coloured travelling glow + a quiet caption */
.rs-loadscene__cue {
  inset: auto 0 8.5% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  pointer-events: none;
}
.rs-loadscene__bar {
  position: relative;
  width: min(220px, 46vw);
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.rs-loadscene__bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 42%;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(58, 141, 204, 0.95), rgba(255, 214, 150, 0.95), transparent);
  animation: rsScan 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes rsScan {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}
.rs-loadscene__caption {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: lowercase;
  color: rgba(214, 226, 255, 0.78);
  text-shadow: 0 0 12px rgba(58, 141, 204, 0.45);
  padding-left: 0.34em;   /* COMPENSATE TRAILING LETTER-SPACING SO IT CENTRES TRUE */
  animation: rsCaption 2.6s ease-in-out infinite;
}
@keyframes rsCaption {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* RESPECT REDUCED-MOTION — hold a calm static frame, no drift / scan / twinkle */
@media (prefers-reduced-motion: reduce) {
  .rs-loadscene__band,
  .rs-loadscene__sheen,
  .rs-loadscene__core,
  .rs-loadscene__caption,
  .rs-loadscene__stars,
  .rs-loadscene__stars i,
  .rs-loadscene__glyphs span { animation: none; }
  .rs-loadscene__core      { opacity: 0.85; }
  .rs-loadscene__stars i    { opacity: 0.55; }
  .rs-loadscene__glyphs span { opacity: 0.14; transform: none; }
  .rs-loadscene__bar::after { animation: none; transform: none; width: 100%; opacity: 0.5; }
}

/* ==================================================
    HTML & BODY
   ================================================== */

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ════════════════════════════════════════════════════════════════════
                    NAVBAR  —  BEM ARCHITECTURE
                    container / sections / cells / brand / icon-button / user-menu
   ════════════════════════════════════════════════════════════════════ */

/* ────────────────────  CONTAINER  ──────────────────── */
/*  NAVBAR HEIGHT — ONE TOKEN DRIVES THE BAR AND EVERY "BELOW THE NAVBAR"
    OFFSET (REPLACES THE OLD SCATTERED 50px / 58px CONSTANTS). DEFINED ON
    :root SO BODY-MOUNTED PANELS (EXPLORERS, CALC-TREE) RESOLVE IT TOO.     */
:root { --navbar-h: 64px; }
@media (max-width: 768px) { :root { --navbar-h: 54px; } }

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0 0.5em;
  min-height: var(--navbar-h);          /* COMFORTABLE NAVBAR HEIGHT — BREATHING ROOM AROUND THE PILLARS */
  background-color: var(--navbar-bg-color) !important;
  border-bottom: none !important;
}

.navbar-toggler { display: none !important; }

/* ────────────────────  NAVBAR BLOCKS  ──────────────────── */
/*  EQUAL-FLEX SIDE RAILS PUSH THE CENTER PILLAR GROUP TO TRUE MIDDLE,
    INDEPENDENT OF HOW WIDE THE LOGO OR THE RIGHT-HAND CONTROLS ARE.  */
.navbar-left-block,
.navbar-right-block {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  gap: 0;
  margin: 0;
  padding: 0;
}

.navbar-left-block  { align-items: center;  justify-content: flex-start; }
.navbar-right-block { align-items: stretch; justify-content: flex-end; }

/*  CENTER RAIL — NATURAL WIDTH, NEVER GROWS OR SHRINKS, SO THE PILLAR
    GROUP STAYS PINNED AT THE MIDPOINT BETWEEN THE TWO SIDE RAILS.  */
.navbar-center-block {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
}

/* ──────────────  GLOBAL-NAV PILLAR SWITCHER (Solver / Practice / Studio)  ────────────── */
/*  CENTERED UNDERLINE TABS IN THE TOP BAR. GLOBAL NAV (SWITCHING FUNCTIONAL
    AREAS) LIVES HERE; THE SIDEBAR IS LOCAL NAV FOR THE ACTIVE PILLAR. THE
    ACTIVE ACCENT UNDERLINE SITS FLUSH ON THE NAVBAR'S OWN BOTTOM RULE.  */
.navbar__pillars {
  display: flex;
  align-items: stretch;
  height: 100%;
}

/*  NATURAL-WIDTH TAB ROW — NOT EQUAL THIRDS (IT NO LONGER SPANS A COLUMN).
    ACTIVE SEGMENT GETS A BOTTOM RULE IN ITS OWN ACCENT
    (atlas→primary / solver→secondary / practice→tertiary / studio→quaternary).  */
.navbar__pillars .tabs {
  width: auto;
  height: 100%;
  gap: 0.9em;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.navbar__pillars .tab {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  padding: 0 1.15em;
  gap: 0.45em;
  border-radius: 0;
  font-size: 0.9rem;
  transition: color 160ms ease;
}

.navbar__pillars .tab .tab__icon {
  font-size: 17px;
  width: 1.2em;
  justify-content: center;
}

.navbar__pillars .tab .tab__label {
  width: auto;
  text-align: center;
}

/*  UNDERLINE INDICATOR — ANCHORED TO THE CONTENT EDGES VIA EQUAL LEFT/RIGHT
    INSETS (THE TAB PADDING), SO IT SPANS THE FULL ICON+LABEL BLOCK WITH EQUAL
    MARGIN ON EACH SIDE. GROWS FROM THE CENTRE VIA scaleX. INHERITS THE ACTIVE
    COLOUR VIA currentColor.  */
.navbar__pillars .tab::after {
  content: "";
  position: absolute;
  left: 1.15em;
  right: 0.75em;
  bottom: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: center;
  border-radius: 2px 2px 0 0;
  background: currentColor;
  opacity: 0;
  transition: transform 180ms ease, opacity 180ms ease;
}

.navbar__pillars .tab:hover {
  transform: none;
  color: var(--text-color);
  background: transparent;
}

.navbar__pillars .tab:hover::after {
  transform: scaleX(1);
  opacity: 0.35;
}

.navbar__pillars .tab.tab--active {
  background: transparent;
  box-shadow: none;
}

.navbar__pillars .tab.tab--active::after,
.navbar__pillars .tab.tab--active:hover::after {
  transform: scaleX(1);
  opacity: 1;
  height: 3px;
}

/*  ACTIVE PILLAR READS LOUDER THAN ITS SIBLINGS: BIGGER ICON, BRIGHTER LABEL.
    SCALE KEEPS THE GLYPH FROM REFLOWING THE 1.2EM BOX; BRIGHTNESS LIFTS THE
    ACCENT TEXT A TOUCH WITHOUT LEAVING ITS HUE.  */
.navbar__pillars .tab.tab--active .tab__icon {
  transform: scale(1.13);
}

.navbar__pillars .tab.tab--active .tab__label {
  filter: brightness(1.1);
}

/* ────────────────────  CELL (wrapper around any nav item)  ──────────────────── */
.navbar__cell {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
}

/* ────────────────────  BRAND (logo)  ──────────────────── */
.navbar__brand {
  display: flex;
  align-items: center;       /* CENTER THE LOGO VERTICALLY IN THE TALLER BAR */
  margin: 0;
  padding: 0;
}

.navbar__brand-button {
  position: relative;          /*  ANCHOR FOR THE ™ MARK  */
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: inherit;
  cursor: pointer;
}

/*  ™ — APPLIED-FOR MARK PINNED TO THE WORDMARK'S UPPER-RIGHT (® ONLY ONCE REGISTERED).  */
.navbar__brand-tm {
  position: absolute;
  top: 3px;
  right: -7px;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(188, 184, 178, 0.55);
  pointer-events: none;
}

.navbar__brand-button:hover,
.navbar__brand-button:focus,
.navbar__brand-button:focus-visible,
.navbar__brand-button:active {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: inherit;
}

.navbar__brand-button img {
  background: transparent;
  display: block;
}

/* ────────────────────  ICON BUTTON (shared across navbar)  ──────────────────── */
.navbar__icon-button {
  display: flex;
  align-items: center;
  padding: 0 0.75em;
  margin: 0;
  border: 0;
  border-radius: 0;
  background-color: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.9rem;          /* STANDARDIZE — SAME LABEL SIZE AS THE CENTER TABS */
}
/*  ICON SIZE MATCHES .tab__icon (17px); LEAVE THE bi-lg SIDEBAR TOGGLE UNTOUCHED.  */
.navbar__icon-button .bi:not(.bi-lg) {
  font-size: 17px;
}

.navbar__icon-button:hover,
.navbar__icon-button:focus {
  background-color: var(--text-color);
  color: var(--bg-color);
  text-decoration: none;
}

a.navbar__icon-button,
a.navbar__icon-button:hover,
a.navbar__icon-button:focus {
  text-decoration: none;
}

/*  STANDALONE MODIFIER  */
.navbar__icon-button--standalone {
  padding: 0.7em 0.4em;
}

/* ────────────────────  RESPONSIVE TOGGLER CELL  ──────────────────── */
.navbar__toggler-cell {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* ────────────────────  USER MENU (logged-in dropdown)  ──────────────────── */
.navbar__user-menu {
  display: flex;
  align-items: stretch;
  position: relative;
}

.navbar__user-menu-toggle {
  display: flex !important;
  align-items: center !important;
  padding: 0 0.75em !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  color: var(--text-color) !important;
  cursor: pointer;
  box-shadow: none !important;
}

.navbar__user-menu-toggle:hover,
.navbar__user-menu-toggle:focus {
  background-color: var(--text-color) !important;
  color: var(--bg-color) !important;
  border-color: var(--text-color) !important;
}

.navbar__user-menu .dropdown-menu {
  min-width: 220px;
  background-color: var(--sidebar-bg-color) !important;
  border: 1px solid var(--seperator-color) !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
  padding: 0 !important;
  overflow: hidden;
  margin-top: 0.4em !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

.navbar__user-info {
  padding: 0.75em 1em 0.5em 1em;
}

.navbar__user-name {
  font-size: 0.95em;
  font-weight: 600;
  color: var(--text-color);
}

.navbar__user-email {
  font-size: 0.8em;
  color: var(--text-muted-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbar__user-menu .navbar__user-menu-divider {
  margin: 0 !important;
  border-color: var(--seperator-color) !important;
  opacity: 0.5;
}

.navbar__user-menu .navbar__user-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.6em 1em;
  background-color: transparent !important;
  color: var(--text-color) !important;
  font-size: 0.9em;
}

.navbar__user-menu .navbar__user-menu-item:hover,
.navbar__user-menu .navbar__user-menu-item:focus {
  background-color: var(--hover-bg) !important;
  color: var(--text-color) !important;
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
                        MAIN CONTAINER
   ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */

/* ==================================================
    MAIN CONTAINER LAYOUT
   ================================================== */

.main-container {
  height: calc(100vh - var(--navbar-h));
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  flex-wrap: nowrap;
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
                        SIDEBAR SECTION
   ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */

/* ==================================================
    SIDEBAR STRUCTURE
   ================================================== */

.sidebar-column {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  background-color: var(--sidebar-bg-color) !important;
  border-right: none !important;
}


@media (min-width: 769px) {
  .sidebar-column:not(.sidebar-mobile-full):not(.d-none) {
    flex: 0 0 22% !important;
    max-width: 22% !important;
    width: 22% !important;
    min-width: 300px !important;
  }
  .solution-column-default,
  .solution-content {
    flex: 1 1 0% !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .right-rail-column {
    flex: 0 0 18% !important;
    width: 18% !important;
    max-width: 18% !important;
  }
}
@media (max-width: 900px) {
  .right-rail-column { display: none !important; }
}

.dark-main .sidebar-column {
  --text-color: #A8A29B;
  --text-muted-color: #6F6B65;
}


/*  FOCUS MODE — SIDEBAR MUTED AFTER SOLVE  */
.focus-mode .sidebar-column>* {
  opacity: 0.4 !important;
  filter: grayscale(50%) !important;
}

.focus-mode .sidebar-column:hover>*,
.focus-mode .sidebar-column:focus-within>* {
  opacity: 1 !important;
  filter: grayscale(0%) !important;
}

.sidebar-collapse {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100vh - var(--navbar-h));
  margin: 0.5em 0 0.5em 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--sidebar-bg-color) !important;
}

/* ==================================================
    SIDEBAR DROPDOWNS
   ================================================== */

/* DROPDOWN STYLES */
.test-dropdown,
.variant-dropdown {
  margin: 0;
  padding: 0;
  border: var(--input-border-line);
  border-radius: var(--control-radius);
  background-color: var(--input-surface-color);
  font-weight: 450;
  text-align: left;
  cursor: pointer;
}

.test-dropdown *,
.variant-dropdown * {
  color: inherit !important;
}

.dash-dropdown-content,
.dash-dropdown-search-container {
  background-color: var(--input-surface-color);
  border-radius: var(--control-radius);
}

/*  REMOVE DEFAULT PINK FOCUS BORDER  */
.dash-dropdown-trigger {
  border-color: var(--text-muted-color) !important;
  box-shadow: none !important;
}

.dash-dropdown-action-button {
  color: var(--text-muted-color);
}

/*  DOMAIN DROPDOWN TRIGGER LABEL — PRIMARY COLOUR  */
.domain-section-dropdown .section-dropdown-trigger {
  color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════════════
   STAT CARD — UNIFIED MARKUP FOR TEST-DIRECTION + CONFIDENCE-LEVEL.
   EVERY TILE IS A <label> WRAPPING A HIDDEN RADIO. NO <button>, NO
   [disabled] ATTRIBUTE — UA WIDGET CHROME CANNOT INTERFERE. LOCKING
   LIVES ON THE CONTAINER VIA pointer-events.
   ═══════════════════════════════════════════════════════════════════ */
.stat-card-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

.stat-card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/*  NEUTRALIZE BOOTSTRAP .form-check WRAPPERS THAT dbc.RadioItems EMITS.   */
.stat-card-row > *,
.stat-card-row .form-check,
.stat-card-row .form-check-inline {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.stat-card-grid--locked { pointer-events: none; }
.stat-card-grid--locked .stat-card { cursor: not-allowed; }

.stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 78px;
  margin: 0;
  padding: 6px 2px;
  border: 1px solid transparent;
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--text-color) 3%, transparent);
  color: var(--text-color);
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.stat-card:hover {
  border-color: color-mix(in srgb, var(--accent-color, var(--secondary)) 26%, transparent);
}

.stat-card-radio {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

/*  TAIL GLYPH — TINY NORMAL-CURVE DIAGRAM SHOWING THE REJECTION REGION.
    RENDERED VIA mask-image SO background-color CARRIES THE THEME COLOR.
    BELL IS DRAWN TWICE: FAINTLY EVERYWHERE, THEN OPAQUELY UNDER A
    clipPath SO THE SHADED TAIL FOLLOWS THE CURVE EXACTLY.               */
.stat-card-tail-icon {
  display: block;
  width: 48px;
  height: 30px;
  margin: 0 0 3px 0;
  background-color: color-mix(in srgb, var(--text-color) 60%, transparent);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  pointer-events: none;
  transition: background-color 120ms ease;
}

.stat-card-tail-icon--left {
  mask-image:         url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 22'%3E%3CclipPath id='c'%3E%3Crect x='0' y='0' width='14' height='22'/%3E%3C/clipPath%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20 Z' fill='black' opacity='0.55' clip-path='url(%23c)'/%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20' stroke='black' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 22'%3E%3CclipPath id='c'%3E%3Crect x='0' y='0' width='14' height='22'/%3E%3C/clipPath%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20 Z' fill='black' opacity='0.55' clip-path='url(%23c)'/%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20' stroke='black' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
}

.stat-card-tail-icon--right {
  mask-image:         url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 22'%3E%3CclipPath id='c'%3E%3Crect x='22' y='0' width='14' height='22'/%3E%3C/clipPath%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20 Z' fill='black' opacity='0.55' clip-path='url(%23c)'/%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20' stroke='black' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 22'%3E%3CclipPath id='c'%3E%3Crect x='22' y='0' width='14' height='22'/%3E%3C/clipPath%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20 Z' fill='black' opacity='0.55' clip-path='url(%23c)'/%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20' stroke='black' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
}

.stat-card-tail-icon--two {
  mask-image:         url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 22'%3E%3CclipPath id='l'%3E%3Crect x='0' y='0' width='14' height='22'/%3E%3C/clipPath%3E%3CclipPath id='r'%3E%3Crect x='22' y='0' width='14' height='22'/%3E%3C/clipPath%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20 Z' fill='black' opacity='0.55' clip-path='url(%23l)'/%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20 Z' fill='black' opacity='0.55' clip-path='url(%23r)'/%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20' stroke='black' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 22'%3E%3CclipPath id='l'%3E%3Crect x='0' y='0' width='14' height='22'/%3E%3C/clipPath%3E%3CclipPath id='r'%3E%3Crect x='22' y='0' width='14' height='22'/%3E%3C/clipPath%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20 Z' fill='black' opacity='0.55' clip-path='url(%23l)'/%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20 Z' fill='black' opacity='0.55' clip-path='url(%23r)'/%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20' stroke='black' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
}

.stat-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  white-space: nowrap;
  line-height: 1.2;
}

.stat-card-subtitle {
  font-size: 12px;
  color: color-mix(in srgb, var(--text-color) 48%, transparent);
  white-space: nowrap;
  transition: color 120ms ease;
}

/*  SELECTED — BRIGHT ACCENT BORDER ONLY. NO INNER FILL — THE BASE
    TILE BACKGROUND IS PRESERVED. TITLE STAYS WHITE; SUBTITLE + TAIL
    GLYPH TAKE THE SECTION COLOR. NO BARS, NO GLOWS.                    */
.stat-card-radio:checked + .stat-card,
.stat-card--selected {
  border-color: color-mix(in srgb, var(--accent-color, var(--secondary)) 90%, transparent);
  background-color: color-mix(in srgb, var(--text-color) 3%, transparent);
}

.stat-card-radio:checked + .stat-card .stat-card-title,
.stat-card--selected .stat-card-title,
.stat-card-radio:checked + .stat-card .stat-card-subtitle,
.stat-card--selected .stat-card-subtitle {
  color: color-mix(in srgb, var(--accent-color, var(--secondary)) 82%, var(--text-color));
}

.stat-card-radio:checked + .stat-card .stat-card-tail-icon,
.stat-card--selected .stat-card-tail-icon {
  background-color: color-mix(in srgb, var(--accent-color, var(--secondary)) 85%, var(--text-color));
}





/* ═══════════════════════════════════════════════════════════════════
   CONFIDENCE-LEVEL WIDGET
   LABEL → THREE QUICK-PICK PILLS (90 / 95 / 99 %) → CUSTOM VALUE INPUT
   ═══════════════════════════════════════════════════════════════════ */

/*  MODE HEADER — "Confidence Level" / "Significance Level" + CARET TOGGLE.  */
.alpha-mode-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  cursor: pointer;
  user-select: none;
}
.alpha-mode-label {
  cursor: pointer;
}
.alpha-mode-caret {
  font-size: 10px;
  line-height: 1;
  color: color-mix(in srgb, var(--text-color) 38%, transparent);
  transition: color 140ms ease, transform 180ms ease;
}
.alpha-mode-header:hover .alpha-mode-caret,
.alpha-mode-header:hover .alpha-mode-label {
  color: color-mix(in srgb, var(--text-color) 78%, transparent);
}
.alpha-mode-caret.is-significance {
  transform: rotate(180deg);
}

/*  LABEL STACKS OVER THE CUSTOM-LEVEL INPUT; PILLS DROP BELOW.            */
.alpha-header-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 8px;
}
.alpha-header-row .alpha-mode-header {
  flex: 0 0 auto;
  margin: 0;
}

/*  VALUE INPUT — SHARES .input-line WITH THE DATA INPUTS; ONLY THE
    WIDTH IS LOCAL.                                                       */
.input-line.alpha-value-input {
  width: 75%;
}

/*  QUICK-PICK PILLS — THREE EQUAL TILES, RHYTHM WITH THE TOP ROW.        */
.alpha-quick-grid { margin: 0; }
.alpha-quick-grid--locked { pointer-events: none; }
.alpha-quick-grid--locked .alpha-quick-pill { cursor: not-allowed; }

.alpha-quick-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}
.alpha-quick-row > *,
.alpha-quick-row .form-check,
.alpha-quick-row .form-check-inline {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.alpha-quick-radio {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

.alpha-quick-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 30px;
  margin: 0;
  padding: 5px 6px;
  border: 1px solid transparent;
  border-radius: 7px;
  background-color: color-mix(in srgb, var(--text-color) 2.5%, transparent);
  color: color-mix(in srgb, var(--text-color) 68%, transparent);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}
.alpha-quick-pill:hover {
  border-color: color-mix(in srgb, var(--accent-color, var(--secondary)) 26%, transparent);
  background-color: color-mix(in srgb, var(--text-color) 4%, transparent);
}
.alpha-quick-radio:checked + .alpha-quick-pill {
  border-color: color-mix(in srgb, var(--accent-color, var(--secondary)) 90%, transparent);
  color: var(--text-color);
}
.alpha-quick-pill-label {
  line-height: 1.1;
}


/* ────────────────────  TEST SELECTION CARD  ──────────────────── */
/*  NO :hover/:focus/:active VARIANTS — THEY'D BUMP SPECIFICITY OVER
    .sidebar-card-control (gap: 8px) AND CAUSE A 2PX HORIZONTAL JITTER.  */
.test-selection-card {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 4px;
  background-color: var(--input-surface-color);
  color: var(--text-color);
  cursor: pointer;
  transition: background-color 120ms ease;
}


.sidebar-card .test-selection-card,
.sidebar-card .test-selection-card:hover,
.sidebar-card .test-selection-card:focus,
.sidebar-card .test-selection-card:focus-visible {
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.test-selection-icon {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
  outline: none;
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  background-color: transparent;
}

.test-selection-icon.is-bi-icon {
  font-style: normal;
  font-size: 16px;
}

.test-selection-text {
  flex: 1 1 0;
  min-width: 0;
}

.test-selection-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-color);
  word-break: break-word;
}

.test-selection-desc {
  display: block;
  margin: 1px 0 0 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-color);
  word-break: break-word;
  white-space: normal;
}

.test-selection-change {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  opacity: 0.6;
  color: inherit;
  transition: opacity 120ms ease, transform 120ms ease;
}

.test-selection-change > i { display: none; }

.test-selection-change::before { content: "▾"; }

.domain-section-dropdown:has(.collapse.show) .test-selection-change,
.domain-section-dropdown:has(.collapsing) .test-selection-change {
  transform: rotate(180deg);
}

.test-selection-card .section-dropdown-arrow { display: none; }

/* ────────────────────  TEST ICON ACCENTS  ──────────────────── */
.test-selection-icon          { color: var(--primary); }
.test-selection-icon.accent-default,
.test-selection-icon.accent-z,
.test-selection-icon.accent-t,
.test-selection-icon.accent-twogrp,
.test-selection-icon.accent-prop,
.test-selection-icon.accent-var,
.test-selection-icon.accent-chi,
.test-selection-icon.accent-anova,
.test-selection-icon.accent-reg,
.test-selection-icon.accent-prob    { color: var(--primary); }

/*  DOMAIN DROPDOWN — SEARCH INPUT  */
.domain-search-wrapper {
  position: relative;
  margin: 4px 0 8px 0;
}

.domain-search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted-color);
  opacity: 0.5;
  font-size: 0.85em;
  pointer-events: none;
}

.domain-search-input {
  background-color: transparent !important;
  border: 1px solid var(--text-muted-color) !important;
  border-radius: var(--control-radius) !important;
  color: var(--primary) !important;
  padding: 4px 8px 4px 28px !important;
  font-size: 0.85em !important;
  width: 100% !important;
  box-shadow: none !important;
  outline: none !important;
}

.domain-search-input:focus {
  border-color: var(--primary) !important;
  box-shadow: none !important;
  outline: none !important;
}

.domain-search-input::placeholder {
  color: var(--text-muted-color) !important;
  opacity: 0.5;
}

/*  DOMAIN DROPDOWN — PLAIN CLICKABLE OPTIONS  */
/*  Boosted specificity so we beat `.section-dropdown-body .form-check-input`
    (which uses `all: unset !important` and would otherwise reset display).  */
.section-dropdown-body .domain-radio-list .form-check-input {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
}

.section-dropdown-body .domain-radio-list .form-check {
  margin-left: 0 !important;
  padding: 4px 6px 4px 14px !important;
  border-radius: 3px !important;
  gap: 0 !important;
}

.section-dropdown-body .domain-radio-list .form-check-label {
  cursor: pointer !important;
  width: 100% !important;
  color: var(--text-muted-color) !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  transition: color 120ms ease-in-out;
}

/*  SELECTED ITEM — PRIMARY COLOUR  */
.section-dropdown-body .domain-radio-list .form-check-input:checked+.form-check-label {
  color: var(--primary) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

.sidebar-section.accent-primary    .section-dropdown-body .form-check-label:hover,
.sidebar-section.accent-primary    .section-dropdown-body .form-check-label:hover * { color: color-mix(in srgb, var(--primary)    60%, transparent) !important; }
.sidebar-section.accent-secondary  .section-dropdown-body .form-check-label:hover,
.sidebar-section.accent-secondary  .section-dropdown-body .form-check-label:hover * { color: color-mix(in srgb, var(--secondary)  60%, transparent) !important; }
.sidebar-section.accent-tertiary   .section-dropdown-body .form-check-label:hover,
.sidebar-section.accent-tertiary   .section-dropdown-body .form-check-label:hover * { color: color-mix(in srgb, var(--tertiary)   60%, transparent) !important; }
.sidebar-section.accent-quaternary .section-dropdown-body .form-check-label:hover,
.sidebar-section.accent-quaternary .section-dropdown-body .form-check-label:hover * { color: color-mix(in srgb, var(--quaternary) 60%, transparent) !important; }
.sidebar-section.accent-quinary    .section-dropdown-body .form-check-label:hover,
.sidebar-section.accent-quinary    .section-dropdown-body .form-check-label:hover * { color: color-mix(in srgb, var(--quinary)    60%, transparent) !important; }

/*  Major group heading: tertiary colour — distinct from primary (selected item)
    and secondary, gives the panel a clear three-tone hierarchy.  */
.section-dropdown-body .domain-radio-list .form-check:has(.section-group-header-text) .form-check-label,
.section-dropdown-body .domain-radio-list .form-check:has(.section-group-header-text) .form-check-label .section-group-header-text,
.section-dropdown-body .domain-radio-list .section-group-header-text {
  color: var(--tertiary) !important;
  opacity: 0.9 !important;
}

.section-dropdown-body .domain-radio-list .form-check:has(.section-group-header-text) .form-check-label::after {
  background-color: var(--tertiary) !important;
  opacity: 0.35 !important;
}

/*  MAJOR-GROUP HEADING ICON  */
.domain-group-header-icon {
  margin-right: 6px !important;
  font-size: 0.95em !important;
  opacity: 0.85 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/*  SUB-GROUP HEADING ROW — FLUSH LEFT  */
.section-dropdown-body .domain-radio-list .form-check:has(.section-subgroup-header-text) {
  padding: 8px 6px 2px 0 !important;
  cursor: default !important;
  background-color: transparent !important;
}

.section-dropdown-body .domain-radio-list .form-check:has(.section-subgroup-header-text) .form-check-label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  color: var(--text-muted-color) !important;
  font-weight: 600 !important;
  font-size: 0.68em !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  opacity: 0.8 !important;
  cursor: default !important;
}

.section-dropdown-body .domain-radio-list .form-check:has(.section-subgroup-header-text) .form-check-label::after {
  content: "" !important;
  flex: 1 !important;
  height: 1px !important;
  background-color: var(--text-muted-color) !important;
  opacity: 0.25 !important;
}

.section-dropdown-body .domain-radio-list .form-check:has(.is-indented) {
  padding-left: 18px !important;
}

/*  "COMING SOON" PLACEHOLDER ROW — MUTED, ITALIC, NON-INTERACTIVE  */
.section-dropdown-body .domain-radio-list .form-check:has(.is-placeholder) {
  cursor: default !important;
}

.section-dropdown-body .domain-radio-list .form-check:has(.is-placeholder) .form-check-label,
.section-dropdown-body .domain-radio-list .domain-item-label.is-placeholder {
  color: var(--text-muted-color) !important;
  font-style: italic !important;
  font-size: 0.82em !important;
  opacity: 0.55 !important;
  cursor: default !important;
}

.section-dropdown-body .domain-radio-list .form-check:has(.section-group-header-text) {
  padding: 10px 6px 4px 0 !important;
}

.section-dropdown-body .domain-radio-list .form-check:has(.section-group-header-text):first-child {
  padding-top: 4px !important;
}

/*  TEST + VARIANT DROPDOWN TEXT  */
.test-dropdown,
.variant-dropdown {
  color: var(--text-color);
}

.dash-options-list-option {
  color: var(--tertiary);
}

.Select-menu-outer,
.dash-dropdown .VirtualizedSelectGrid {
  margin-top: 4px !important;
}


/*  INPUT SOURCE BLOCK — ONE VISUAL CONTAINER HOSTING THE INPUT TYPE
    TOGGLE AND (CONDITIONALLY) THE DATASET DROPDOWN. RENDERS AS A
    SINGLE CARD-LIKE SURFACE WITH A 1PX DIVIDER BETWEEN THE TWO ROWS.    */
.input-source-block {
  background: transparent;
  border: 0;
  padding: 0 !important;
  margin: 0;
  display: flex !important;
  flex-direction: column;
  gap: 12px !important;
}
.input-source-row {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
}
.input-source-row.dataset-row {
  padding-top: 0;
}

/*  INPUT TYPE TOGGLE — TWO-OPTION SEGMENTED PILL. SELECTED PILL WEARS
    THE PRIMARY (BLUE) SYSTEM ACCENT.                                    */
.input-type-row {
  display: flex;
  width: 100%;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-sizing: border-box;
}
.input-type-radio-group {
  display: flex;
  width: 100%;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.input-type-radio-group > .form-check,
.input-type-radio-group .form-check-inline {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.input-type-radio {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.input-type-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
  border-radius: var(--control-radius);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--text-color) 60%, transparent);
  cursor: pointer;
  user-select: none;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}
.input-type-pill:hover {
  color: var(--text-color);
  border-color: color-mix(in srgb, var(--text-color) 22%, transparent);
}
.input-type-radio:checked + .input-type-pill {
  color: var(--text-color);
  border-color: color-mix(in srgb, var(--accent-color, var(--primary)) 65%, transparent);
  background-color: transparent;
}

/*  DISABLED PILL (e.g. Custom Data WHEN GUEST) — VISUALLY MUTED, NOT
    CLICKABLE, WITH A LOCK GLYPH ANCHORED RIGHT VIA background-image SO
    IT DOESN'T COLLIDE WITH THE ::after TOOLTIP.                         */
.input-type-radio:disabled + .input-type-pill {
  opacity: 0.55;
  cursor: not-allowed;
  padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23DBD7D2' stroke-width='1.3'%3E%3Crect x='3.25' y='7' width='9.5' height='7' rx='1.8'/%3E%3Cpath d='M5 7V4.75a3 3 0 0 1 6 0V7' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='10' r='1.05' fill='%23DBD7D2' stroke='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 11px;
}
.input-type-radio:disabled + .input-type-pill:hover {
  color: color-mix(in srgb, var(--text-color) 60%, transparent);
  border-color: color-mix(in srgb, var(--text-color) 10%, transparent);
}

/*  GUEST STATE — THE Custom Input PILL CARRIES A "Login Required"
    TOOLTIP ON HOVER. STILL CLICKABLE; THE EXISTING LOCK-STATE CALLBACK
    HANDLES THE REST (BADGE + INPUT LOCKING). LAST-CHILD TARGETS THE
    SECOND OPTION IN THE INLINE RadioItems RUN.                          */
.input-source-block.requires-login .input-type-radio-group .form-check-inline:last-child {
  position: relative;
}
.input-source-block.requires-login .input-type-radio-group .form-check-inline:last-child .input-type-pill::after {
  content: "Login to use your custom data";
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  left: auto;
  padding: 6px 10px;
  background-color: color-mix(in srgb, var(--text-color) 22%, var(--bg-color));
  background-image: linear-gradient(color-mix(in srgb, var(--text-color) 6%, var(--bg-color)),
                                    color-mix(in srgb, var(--text-color) 6%, var(--bg-color)));
  color: var(--text-color);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--text-color) 32%, transparent);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 1000;
}
.input-source-block.requires-login .input-type-radio-group .form-check-inline:last-child .input-type-pill:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/*  THREE SIDEBAR CARDS — ANALYSIS / DATASET / SELECTION.
    SMALL UPPERCASE TITLE, ICON, LIVE VALUE, CHEVRON ON THE RIGHT.  */
.sidebar-card {
  background: color-mix(in srgb, var(--text-color) 2.5%, transparent);
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  padding: 8px 12px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: border-color 140ms ease;
}
/*  ONLY THE BORDER COLOUR REACTS TO HOVER — NO BACKGROUND, NO OPACITY,
    NO TRANSFORM. KEEPS THE CARDS STILL UNDER THE CURSOR.  */
.sidebar-card:hover {
  border-color: color-mix(in srgb, var(--accent-color, var(--text-color)) 30%, transparent);
}
.sidebar-card,
.sidebar-card * {
  cursor: pointer;
}
.sidebar-card-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-color) 55%, transparent);
  line-height: 1.3;
}
.sidebar-card-control {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  justify-content: flex-start !important;
  font-size: 14.5px;
  font-weight: 450;
  line-height: 1.3;
}
.sidebar-card-icon {
  color: color-mix(in srgb, var(--text-color) 70%, transparent);
  font-size: 0.95rem;
  line-height: 1;
  flex: 0 0 auto;
}
.sidebar-card-control .Select-value,
.sidebar-card-control .Select-value-label,
.sidebar-card-control .Select-placeholder,
.sidebar-card-control #section_dropdown_label_id {
  font-size: 14.5px !important;
  font-weight: 450 !important;
  line-height: 1.3 !important;
}
.sidebar-card-control .section-dropdown-arrow,
.sidebar-card-control .Select-arrow,
.sidebar-card-control .Select-arrow::before {
  font-size: 0.78em;
}
/*  CHEVRON IS PUSHED TO THE RIGHT EDGE INSIDE THE CARD ROW.           */
.sidebar-card-control .section-dropdown-arrow,
.sidebar-card-control .Select-arrow-zone {
  margin-left: auto;
}

.sidebar-card-control .Select {
  flex: 1 1 auto;
  background: transparent !important;
  border: none !important;
}
.sidebar-card-control .Select-control {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  /*  POSITIONING CONTEXT FOR THE ABSOLUTELY-PLACED ARROW BELOW.        */
  position: relative !important;
  display: block !important;
  width: 100% !important;
}
.sidebar-card-control .Select-multi-value-wrapper {
  display: block;
  width: 100%;
  min-width: 0;
  padding-right: 18px;  /*  KEEP THE VALUE TEXT FROM CRASHING INTO THE ARROW.  */
}

.sidebar-card-control .Select-arrow-zone,
.sidebar-card-control .Select-arrow,
.sidebar-card-control .Select__indicators,
.sidebar-card-control .Select__indicator,
.sidebar-card-control .Select__dropdown-indicator,
.sidebar-card-control .Select-control > svg,
.sidebar-card-control .Select svg {
  display: none !important;
}
.sidebar-card-control .Select {
  position: relative;
}
.sidebar-card-control .Select::after {
  content: "▾";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.78em;
  opacity: 0.6;
  pointer-events: none;
  color: inherit;
}

/* ────────────────────  SECTION DROPDOWN — DBC CHECKLIST  ──────────────────── */

/*  TRIGGER BUTTON — LEGACY FLAT FALLBACK FOR CONTEXTS WITHOUT THE CARD.  */
.section-dropdown-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background-color: var(--input-surface-color);
  border: var(--input-border-line);
  cursor: pointer;
  font-weight: 450;
}

.section-dropdown-arrow {
  font-size: 0.8em;
  opacity: 0.6;
}

/*  OVERLAY MODE — THE CUSTOM TRIGGER+COLLAPSE WIDGETS BEHAVE LIKE REAL
    DROPDOWNS: THE PANEL FLOATS OVER CONTENT BELOW INSTEAD OF PUSHING
    SUBSEQUENT SECTIONS DOWN ACCORDION-STYLE. WRAPPER GETS THE POSITIONING
    CONTEXT; THE COLLAPSE ITSELF GOES ABSOLUTE AT `top: 100% + 4px`.    */
.domain-section-dropdown,
.solution-section-dropdown,
.input-source-row.dataset-row {
  position: relative;
}

.domain-section-dropdown      > .collapse,
.domain-section-dropdown      > .collapsing,
.solution-section-dropdown > .collapse,
.solution-section-dropdown > .collapsing,
.input-source-row.dataset-row > .collapse,
.input-source-row.dataset-row > .collapsing {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
}

/*  KEEP THE INNER PANEL'S OWN 4PX OFFSET FROM DOUBLING UP — THE WRAPPER
    NOW PROVIDES THE GAP VIA `top: calc(100% + 4px)`.                   */
.domain-section-dropdown      > .collapse > .section-dropdown-body,
.domain-section-dropdown      > .collapsing > .section-dropdown-body,
.solution-section-dropdown > .collapse > .section-dropdown-body,
.solution-section-dropdown > .collapsing > .section-dropdown-body,
.input-source-row.dataset-row > .collapse > .section-dropdown-body,
.input-source-row.dataset-row > .collapsing > .section-dropdown-body {
  margin-top: 0;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/*  MOBILE: EXPAND THESE DROPDOWNS INLINE (PUSH CONTENT DOWN) INSTEAD OF
    FLOATING AS AN ABSOLUTE OVERLAY. A FLOATING PANEL WITH ITS OWN
    max-height SCROLL GETS CLIPPED INSIDE THE FULL-SCREEN SIDEBAR'S OWN
    SCROLL CONTAINER (THE "Select Sections" LIST WAS CUT AT THE TOP). INLINE
    + THE SIDEBAR'S NATURAL SCROLL SHOWS THE WHOLE LIST CLEANLY.          */
@media (max-width: 768px) {
  .domain-section-dropdown      > .collapse,
  .domain-section-dropdown      > .collapsing,
  .solution-section-dropdown    > .collapse,
  .solution-section-dropdown    > .collapsing,
  .input-source-row.dataset-row > .collapse,
  .input-source-row.dataset-row > .collapsing {
    position: static;
  }
  /*  SCOPED (0,2,0) SO IT BEATS THE BASE .section-dropdown-body (0,1,0)
      max-height REGARDLESS OF SOURCE ORDER — THE WHOLE LIST FLOWS INTO THE
      SIDEBAR'S SINGLE SCROLL INSTEAD OF A NESTED SCROLL-WITHIN-SCROLL.    */
  .domain-section-dropdown   .section-dropdown-body,
  .solution-section-dropdown .section-dropdown-body,
  .input-source-row.dataset-row .section-dropdown-body {
    max-height: none;
    overflow-y: visible;
    box-shadow: none;
  }
}

/*  TRIGGER COLOR  */
.solution-section-dropdown .section-dropdown-trigger {
  color: var(--text-color);
}

/*  DROPDOWN BODY  */
.section-dropdown-body {
  margin-top: 4px;
  background-color: var(--input-surface-color);
  border: var(--input-border-line);
  border-radius: var(--control-radius);
  padding: 10px 14px 12px;   /* BREATHING ROOM SO ROWS DON'T HUG THE PANEL EDGES */
  /*  BORDER-BOX SO AN INLINE max-height (SET BY size_section_dropdown IN
      sidebar_panel.py) BOUNDS THE WHOLE RENDERED BOX, PADDING INCLUDED —
      OTHERWISE THE TAIL RE-CLIPS AT THE SCROLL EDGE BY THE PADDING AMOUNT. */
  box-sizing: border-box;
  max-height: min(560px, 70vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/*  SELECT-ALL + CHECKLIST — SHARED RESET  */
.section-dropdown-body .form-check {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 3px 0 !important;
  cursor: pointer !important;
}

.section-dropdown-body .form-check-input {
  all: unset !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  flex-shrink: 0 !important;
  border: 1px solid var(--text-muted-color) !important;
  border-radius: 2px !important;
  opacity: 0.4;
  background-color: transparent !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  cursor: pointer !important;
}

.section-dropdown-body .form-check-label {
  all: unset !important;
  cursor: pointer !important;
}

.section-select-all .form-check-input:checked,
.section-checklist .form-check-input:checked {
  background-color: transparent !important;
  border-color: var(--primary);
  opacity: 0.8;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%233A8DCC' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

/*  SELECT ALL  */
.section-select-all {
  padding-bottom: 4px !important;
  margin-bottom: 2px !important;
  padding-left: 0 !important;
}

.section-select-all .form-check-input {
  margin-left: 0 !important;
}

.section-select-all .form-check-label {
  color: var(--text-muted-color) !important;
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/*  CHECKLIST COLOURS — SELECTED  */
.section-checklist .form-check-label {
  color: var(--text-muted-color) !important;
}

.solution-section-dropdown .section-checklist .form-check-input:checked+.form-check-label {
  color: var(--primary) !important;
}

.section-select-all .form-check-input:checked+.form-check-label {
  color: var(--primary) !important;
}

/*  GROUP HEADERS — DISABLED CHECKLIST ITEMS  */
.section-checklist .form-check:has(.section-group-header-text) {
  padding-top: 8px !important;
  padding-bottom: 2px !important;
  margin-top: 2px !important;
  cursor: default !important;
}

.section-checklist .form-check:has(.section-group-header-text):first-child {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.section-checklist .form-check:has(.section-group-header-text) .form-check-input {
  display: none !important;
}

.section-checklist .form-check:has(.section-group-header-text) .form-check-label {
  color: var(--tertiary) !important;
  font-weight: 600 !important;
  font-size: 0.75em !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  cursor: default !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  opacity: 0.8 !important;
  margin-left: 4px !important;
}

.section-checklist .form-check:has(.section-group-header-text) .form-check-label::after {
  content: "" !important;
  flex: 1 !important;
  height: 1px !important;
  background-color: var(--tertiary) !important;
  opacity: 0.25 !important;
}

/* ──────────────────────────────────────────────────────────────────
   DATASET OPTION LIST — SINGLE-SELECT, NO RADIO CIRCLES
   ────────────────────────────────────────────────────────────────── */

.dataset-option-list .form-check-input {
  display: none !important;
}
.dataset-option-list .form-check {
  padding-left: 0 !important;
  margin: 0 !important;
}
.dataset-option-list .form-check-label {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  color: var(--text-color) !important;
  font-size: 14.5px !important;
  font-weight: 450 !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  transition: background-color 120ms ease, color 120ms ease !important;
}
.dataset-option-list .form-check-label:hover {
  background-color: color-mix(in srgb, var(--text-color) 6%, transparent) !important;
}
/*  SELECTED ROW — TERTIARY ACCENT TINT TO MIRROR THE SECTION CHECKLIST. */
.dataset-option-list .form-check-input:checked + .form-check-label {
  color: var(--tertiary) !important;
  background-color: color-mix(in srgb, var(--tertiary) 8%, transparent) !important;
  font-weight: 500 !important;
}

/*  FORMULA DROPDOWN  */
.formula-dropdown-div {
  width: 100%;
}

.formula-dropdown {
  width: 100%;
  margin: 2% 0 0 0;
  border: var(--input-border-line);
  border-radius: 0;
  color: var(--tertiary);
  text-align: left;
}

/* ==================================================
    ANALYSIS INPUTS
   ================================================== */

/*  INPUT FIELDS — FILL-IN-THE-BLANK UNDERLINE, NOT A BOX  */
.input-line {
  width: 100%;
  margin: 0;
  padding: 6px 2px;
  border: none;
  border-bottom: 1.5px solid color-mix(in srgb, var(--text-color) 28%, transparent);
  border-radius: 0;
  background-color: transparent !important;
  background: transparent !important;
  color: var(--text-color) !important;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

input.input-line.form-control,
.input-line.form-control {
  background-color: transparent !important;
  background: transparent !important;
}

.input-line:hover {
  border-bottom-color: var(--text-color);
}

.input-line::placeholder {
  color: #8A8A8A !important;
  font-style: italic;
  font-size: 11px;
  opacity: 1 !important;
}

/*  ─── INPUT INTERACTION STATES ────────────────────────────────────────
    COLOR DISCIPLINE: BLUE (--primary) IS THE GLOBAL SYSTEM COLOR FOR
    FOCUS / ACTIVE / CARET. SECTION ACCENTS ARE RESERVED FOR IDENTITY
    (TITLES, ICONS) — NOT INTERACTION. HOVER + COMMITTED BORDERS STAY
    NEUTRAL SO THE PANEL READS AS ONE CALM SURFACE.                     */

/*  BASE — INSIDE A SIDEBAR ACCENT SECTION INPUTS MATCH .sidebar-card
    EXACTLY: SAME SURFACE TONE, SAME BORDER OPACITY, SAME RADIUS. ONE
    VISUAL LANGUAGE ACROSS SELECTION CARDS AND DATA INPUTS.              */
.sidebar-section[class*="accent-"] .input-line {
  border: none !important;
  border-bottom: 1.5px solid color-mix(in srgb, var(--text-color) 22%, transparent) !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background: transparent !important;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.sidebar-section[class*="accent-"] .input-line:hover {
  border-bottom-color: color-mix(in srgb, var(--accent-color) 50%, transparent) !important;
}

.sidebar-section[class*="accent-"] .input-line:focus,
.sidebar-section[class*="accent-"] .input-line:focus-visible {
  border-bottom-color: var(--primary) !important;
  background-color: transparent !important;
  box-shadow: 0 1.5px 0 0 var(--primary) !important;
  outline: none !important;
  caret-color: var(--primary);
}

.sidebar-section[class*="accent-"] .input-line::selection {
  background-color: color-mix(in srgb, var(--primary) 22%, transparent);
  color: var(--text-color);
}

/*  LABEL EMPHASIS — SUBSECTION TITLE BRIGHTENS WHEN ITS INPUT GAINS
    FOCUS. NEUTRAL BRIGHTEN, NOT A HUE FLIP — KEEPS THE PANEL CALM
    AND LEAVES BLUE AS THE SOLE FOCUS SIGNAL.                           */
.sidebar-section[class*="accent-"] .input-field:has(.input-line:focus) > .input-label,
.sidebar-section[class*="accent-"] .input-field:has(.input-line:focus) > .input-description,
.sidebar-section[class*="accent-"] .input-field:has(:focus-visible) > .input-label {
  color: color-mix(in srgb, var(--text-color) 92%, transparent);
  transition: color 140ms ease;
}

/*  COMMITTED INPUT — HOLDS A VALUE, BUT NOT FOCUSED. THE PRESENCE OF
    THE VALUE IS THE SIGNAL; BORDER STAYS NEUTRAL AND QUIET.            */
.sidebar-section[class*="accent-"] .input-line:not(:placeholder-shown):not(:focus):not(:disabled) {
  border-bottom-color: color-mix(in srgb, var(--text-color) 55%, transparent) !important;
}

/*  TRIGGER CARDS — TEST / DATASET / SELECTION. NO PERSISTENT OUTLINE
    REGARDLESS OF VALUE STATE; HOVER-ONLY REVEAL IS HANDLED BY THE BASE
    .sidebar-card:hover RULE. THE VALUE TEXT INSIDE IS THE SIGNAL.      */

/*  LOCK / DISABLED — STRICTLY NEUTRAL. THE ACCENT IS RESERVED FOR THE
    COMMITTED / SELECTED STATE, SO LOCKED INPUTS AND THEIR PLACEHOLDERS
    MUST NOT INHERIT THE SECTION HUE.                                   */

.input-line:not(:placeholder-shown) {
  color: var(--text-color) !important;
  font-style: normal;
}

/*  AUTOFILL OVERRIDES  */
.input-line:-webkit-autofill,
.input-line:-webkit-autofill:hover,
.input-line:-webkit-autofill:focus,
.input-line:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: var(--text-color) !important;
  background-color: transparent !important;
  transition: background-color 5000s ease-in-out 0s;
}

.input-line:-moz-autofill,
.input-line:-moz-autofill:hover,
.input-line:-moz-autofill:focus {
  background-color: transparent !important;
  color: var(--text-color) !important;
}

/*  LOCKED INPUT (NOT LOGGED IN)  */
.input-locked {
  cursor: not-allowed !important;
}

.input-locked::placeholder {
  color: var(--text-muted-color) !important;
  font-style: italic;
}

.input-lock-group {
  flex-wrap: nowrap;
}

.input-lock-icon {
  background-color: var(--input-surface-color) !important;
  border: none !important;
  color: var(--text-muted-color) !important;
  font-size: 11px;
  padding: 0 10px;
  opacity: 0.5;
}

/*  INPUT RADIO  */
.input-radio .form-check-input {
  border: 1px solid var(--checklist-border-color);
  background-color: var(--text-color);
}

.input-radio .form-check-input:checked {
  border: 1px solid var(--input-border-line);
  background-color: var(--input-border-line);
}

/*  INPUT DROPDOWN  */
.input-dropdown {
  width: 100%;
  margin: 0;
  padding: 0;
  border: var(--input-border-line);
  border-radius: 0;
  background-color: var(--input-surface-color);
  color: var(--text-color);
  text-align: left;
}

/* ==================================================
    DYNAMIC TABLE INPUTS
   ================================================== */

.fill-data-button {
  width: 100%;
  margin: 0;
  padding: 8px;
  border: var(--input-border-line);
  border-radius: 0;
  background-color: var(--input-surface-color);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fill-data-button:hover {
  background-color: var(--text-color);
  color: var(--bg-color);
}

.fill-data-button:active {
  transform: scale(0.98);
}

.dynamic-table-container {
  width: 100%;
  margin: 0 0 1em 0;
  padding: 0;
}

.dynamic-table-button-row {
  margin-bottom: 0;
}

.dynamic-table-button-row:has(> label[style*="display: none"]) {
  margin-bottom: 1em;
}

.dynamic-table-button-row:has(> label[style*="display: none"]) .fill-data-button {
  width: auto;
  min-width: 160px;
}

.dynamic-accordion,
.dynamic-accordion .accordion-item,
.dynamic-accordion-item,
.dynamic-accordion .accordion-header,
.dynamic-accordion .accordion-body,
.dynamic-accordion .accordion-collapse {
  background-color: transparent !important;
}

.dynamic-accordion .accordion-item,
.dynamic-accordion-item {
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
}

.dynamic-accordion .accordion-button {
  padding: 0;
  border-radius: 0;
  background-color: transparent !important;
  font-size: 16px;
  font-weight: 600;
  color: var(--quaternary);
  box-shadow: none !important;
}

.dynamic-accordion .accordion-button:not(.collapsed),
.dynamic-accordion .accordion-button:focus {
  background-color: transparent !important;
  color: var(--quaternary);
  box-shadow: none !important;
}

.dynamic-accordion .accordion-button::after {
  filter: brightness(0) saturate(100%) invert(67%) sepia(30%) saturate(500%) hue-rotate(10deg);
}

.dynamic-accordion .accordion-body {
  padding: 0.5em 0 0 0;
}

.dynamic-table-error {
  padding: 0;
  font-size: 16px;
  color: rgb(194, 54, 54);
}

.dynamic-instructions {
  margin: 0 0 0.5em 0;
  font-size: 12px;
  color: #6B7280;
}

/* ==================================================
    LEARNING AIDS
   ================================================== */

.concept,
.algo-wizard {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

.learning-aids-field {
  gap: 0.5em !important;
}

.concept-label,
.algo-wizard-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 1;
  color: var(--text-color);
  cursor: pointer;
}

.concept .form-check,
.algo-wizard .form-check {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.algo-wizard .form-check-input,
.concept .form-check-input {
  float: none !important;
  flex: 0 0 16px;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  border: 1px solid var(--checklist-border-color);
  background-color: var(--bg-color);
  cursor: pointer;
}

.algo-wizard .form-check-input:checked,
.concept .form-check-input:checked {
  border: 1px solid var(--input-border-line);
  background-color: var(--quinary);
}

.concept .form-check-label,
.algo-wizard .form-check-label {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px;
  line-height: 1;
  color: var(--text-color);
  cursor: pointer;
}

/* ==================================================
    FLOW STRUCTURE
   ================================================== */

/*  FLOW STRUCTURE RADIO  */
.flow-structure-radio {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin: 0;
  padding: 0;
}

.flow-structure-radio .form-check {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.flow-structure-radio .form-check-input {
  float: none !important;
  flex: 0 0 16px;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  border: 1px solid var(--checklist-border-color);
  background-color: var(--bg-color);
  cursor: pointer;
}

.flow-structure-radio .form-check-input:checked {
  border: 1px solid var(--quinary);
  background-color: var(--quinary);
}

.flow-structure-radio .form-check-label {
  display: inline-flex;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px;
  line-height: 1;
  color: var(--text-color);
  cursor: pointer;
}

/* ==================================================
    ROUNDING PRECISION
   ================================================== */

.rounding-input-row {
  display: flex;
  align-items: center;
  gap: 0px;
  width: 100% !important;
  height: 36px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: var(--input-border-line);
  border-radius: var(--control-radius);
  overflow: hidden;        /* CLIP THE −/+ END BUTTONS TO THE ROUNDED CORNERS */
}

.rounding-decrease-button,
.rounding-increase-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 36px !important;
  padding: 0 !important;
  line-height: 1 !important;
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  font-size: 1em;
  font-weight: bold !important;
  color: var(--text-color) !important;
  -webkit-text-stroke: 0.7px var(--text-color);
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.rounding-decrease-button:hover,
.rounding-increase-button:hover {
  background-color: var(--text-color) !important;
  color: var(--bg-color) !important;
  -webkit-text-stroke-color: var(--bg-color);
}

.rounding-input {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 36px;
  padding: 0 8px !important;
  border: none;
  border-radius: 0;
  background-color: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  text-align: center;
}

/* ==================================================
    SOLVE BUTTON
   ================================================== */

/*  Solve / Start Practice button styles removed — replaced by BEM
    .action / .action--primary / .action--accent.  */

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
                        SOLUTION COLUMN
   ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */

/* ==================================================
    SOLUTION CONTAINER
   ================================================== */

.solution-column-default,
.solution-content {
  position: relative;
  margin: 0;
  /* RIGHT TRIMMED BY THE 8PX SCROLLBAR GUTTER SO LHS/RHS MARGINS LOOK EQUAL */
  padding: 0 calc(3rem - 8px) 0 3rem !important;
  background-color: var(--solution-bg-color);
  border-left: none;
}


.solution-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: inherit;
}

/*  SOLUTION LOADING SPINNER  */
.solution-loading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  gap: 0.5rem;
}

.solution-loader-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid var(--seperator-color);
  border-top-color: var(--primary);
  animation: loaderSpin 0.8s linear infinite;
}

.solution-loader-text {
  margin: 1rem 0 0 0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.solution-loader-subtext {
  margin: 0 0 0 0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
  color: var(--text-muted-color);
  letter-spacing: 0.01em;
}

@keyframes loaderSpin {
  to {
    transform: rotate(360deg);
  }
}

.solution-div {
  margin: 0 0 3em 0;
  padding: 0;
  line-height: 1.65;
  transition: opacity 0.3s ease, filter 0.3s ease !important;
}


/* ==================================================
    SOLUTION HEADER
   ================================================== */
.solution-header-div {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  display: flex;
  opacity: 0.7;
  pointer-events: none;
}
.solution-header-div > * {
  pointer-events: auto;
}

.rail-toggle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  color: color-mix(in srgb, var(--text-color) 78%, transparent) !important;
  cursor: pointer;
  padding: 4px 6px !important;
  border-radius: 5px;
  line-height: 1;
  transition: color 140ms ease, background-color 140ms ease;
}

.rail-toggle-button:hover {
  color: var(--accent-color) !important;
  background: color-mix(in srgb, var(--text-color) 6%, transparent) !important;
}

.rail-toggle-button:focus,
.rail-toggle-button:active {
  box-shadow: none !important;
  outline: none !important;
}


.solution-main-heading {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 0 0.25em 0;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: center;
}

/* ==================================================
    SOLUTION BUTTONS
   ================================================== */

.results-button,
.copy-button,
.pdf-button,
.print-button {
  padding: 0.3em 0.3em 0.3em 0.3em;
  border: none;
  border-radius: 0;
  background-color: transparent;
  color: var(--text-color);
  text-align: center;
}

.copy-button {
  font-size: 20px;
}

.results-button:hover,
.copy-button:hover,
.pdf-button:hover,
.print-button:hover {
  background-color: var(--text-color);
  color: var(--bg-color);
}

/* ==================================================
    SOLUTION HEADINGS
   ================================================== */

.solution-main-heading-empty {
  margin: 0 0 1em 0;
  padding: 0;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tertiary);
  text-align: center;
  page-break-after: avoid;
  break-after: avoid;
}

.solution-section-heading,
.sub-heading {
  margin: 0;
  padding: 0.3em 0 0.2em 0;
  border-bottom: var(--sub-heading-border-color);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--tertiary);
  overflow-y: hidden;
  text-align: left;
  text-decoration: none;
  /* PREVENT PAGE BREAKS */
  page-break-after: avoid;
  break-after: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.solution-step-heading {
  margin: 1.6em 0 0.4em 0;
  padding: 0;
  font-family: 'Fira Code', monospace;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--quaternary);
  text-align: left;
  text-decoration: none;
  /* PREVENT PAGE BREAKS */
  page-break-after: avoid;
  break-after: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* ==================================================
    SOLUTION STEP CARDS
   ================================================== */

/* ──────────────────────────────────────────────────────────────────
   RIGHT RAIL — CONTEXTUAL HELP COLUMN BESIDE THE MANUSCRIPT
   ────────────────────────────────────────────────────────────────── */
/*  RIGHT RAIL — DEDICATED TOP-LEVEL COLUMN BESIDE THE SOLUTION PANEL.
    LIVES IN ITS OWN dbc.Col, NOT NESTED INSIDE THE MANUSCRIPT.        */
.right-rail-column {
  margin: 0;
  padding: 0 !important;
  background-color: var(--solution-bg-color);
  border-left: 1px solid color-mix(in srgb, var(--text-color) 7%, transparent);
  height: calc(100vh - var(--navbar-h));
  overflow: hidden;
  transition: flex-basis 0.22s ease, width 0.22s ease, max-width 0.22s ease;
}
/*  HIDE THE RAIL UNTIL SOLVE HAS RUN. THE is-empty CLASS IS STRIPPED BY
    THE CLIENTSIDE CALLBACK ONCE right_rail_content_id RECEIVES CONTENT. */
.right-rail-column.is-empty {
  display: none !important;
}
.right-rail-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 12px 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--text-color) 85%, transparent);
  scrollbar-gutter: stable;
}
.right-rail-scroll::-webkit-scrollbar { width: 6px; }
.right-rail-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-color) 14%, transparent);
  border-radius: 3px;
}
.solution-right-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

/*  RAIL TOOLBAR — 'Tools' HEADING + COLLAPSE TOGGLE ON ONE LINE, THE FOUR
    ICON ACTIONS ON THE LINE BELOW. THE WRAPPER OWNS THE RULE THAT SEPARATES
    THE TOOLBAR FROM THE REFERENCE CARDS UNDERNEATH.  */
.rsr-rail-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: -4px 0 2px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--text-color) 7%, transparent);
}
.rsr-rail-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 24px;
}
.rsr-rail-title {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-color) 48%, transparent);
}

.rsr-actions-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  width: 100%;
  padding: 0;
  margin: 0;
}
.rsr-action-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}
.rsr-action-cell .btn,
.rsr-action-cell .dash-clipboard {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.95rem;
  line-height: 1;
  color: color-mix(in srgb, var(--text-color) 78%, transparent) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 5px;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease;
}
.rsr-action-cell .btn i {
  font-size: 0.95rem;
  line-height: 1;
}
.rsr-action-cell .btn:hover,
.rsr-action-cell .btn:focus,
.rsr-action-cell .dash-clipboard:hover {
  color: var(--accent-color) !important;
  background: color-mix(in srgb, var(--text-color) 6%, transparent) !important;
  box-shadow: none !important;
  outline: none !important;
}
.solution-right-rail::-webkit-scrollbar { width: 6px; }
.solution-right-rail::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-color) 14%, transparent);
  border-radius: 3px;
}

/* ════════════════════════════════════════════════════════════════
   COLLAPSED RAIL — CLAUDE-STYLE NARROW ICON STRIP
   The toggle pins to the top; the four actions restack vertically;
   the heading text and the reference cards drop away. The manuscript
   column (flex:1 1 0%) reclaims the freed width on its own.
   ════════════════════════════════════════════════════════════════ */
.right-rail-column.is-collapsed {
  flex: 0 0 56px !important;
  width: 56px !important;
  max-width: 56px !important;
}
.right-rail-column.is-collapsed .right-rail-scroll {
  padding-left: 4px;
  padding-right: 4px;
}
.right-rail-column.is-collapsed .rsr-rail-toolbar {
  border-bottom: none;
  gap: 6px;
}
.right-rail-column.is-collapsed .rsr-rail-header {
  justify-content: center;
}
.right-rail-column.is-collapsed .rsr-rail-title {
  display: none;
}
.right-rail-column.is-collapsed .rsr-actions-row {
  flex-direction: column !important;
  gap: 6px;
  padding-top: 8px;
  margin-top: 2px;
  border-top: 1px solid color-mix(in srgb, var(--text-color) 7%, transparent);
}
.right-rail-column.is-collapsed .rsr-action-cell {
  flex: 0 0 auto;
}
.right-rail-column.is-collapsed .rsr-card {
  display: none;
}

/*  RECEDED RAIL — NO BOX, NO BORDER. THE COMPANION COLUMN READS AS QUIET
    GROUPED TEXT SO ATTENTION STAYS ON THE SOLUTION.  */
.rsr-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 4px 2px 8px 2px;
}
/*  THIN RULE BETWEEN STACKED SECTIONS — THE ONLY STRUCTURE THE RAIL NEEDS.  */
.rsr-card + .rsr-card {
  border-top: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
  padding-top: 12px;
  margin-top: 4px;
}
.rsr-card-header {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 6px;
  padding-bottom: 0;
  border-bottom: none;
}
.rsr-card-icon {
  font-size: 12px;
  color: color-mix(in srgb, var(--text-color) 40%, transparent);
}
.rsr-card-title {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-color) 48%, transparent);
  flex: 1 1 auto;
}
.rsr-card-meta {
  font-size: 10.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--text-color) 38%, transparent);
}
.rsr-card-body {
  font-size: 12.5px;
  line-height: 1.5;
}


.rsr-formula {
  margin: 2px 0 10px 0;
  text-align: center;
  font-size: 13px;
  color: color-mix(in srgb, var(--text-color) 92%, transparent);
  overflow-x: auto;
}
.rsr-formula .katex-display { margin: 0.2em 0; }
.rsr-formula .katex { font-size: 1.05em; }
.rsr-where-label {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-color) 55%, transparent);
  margin-bottom: 4px;
}
.rsr-where-rows {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 6px;
  align-items: baseline;
}
.rsr-where-row {
  display: contents;             /* ROW IS LOGICAL — CELLS BECOME REAL GRID ITEMS */
}
.rsr-where-sym {
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--text-color) 95%, transparent);
  font-size: 13px;
}
.rsr-where-eq {
  color: color-mix(in srgb, var(--text-color) 45%, transparent);
  font-size: 12px;
}
.rsr-where-desc {
  font-size: 12px;
  color: color-mix(in srgb, var(--text-color) 70%, transparent);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/*  SECTION-INDEX CARD — LIST IS NUMBERED, SCROLLABLE IF TALL.   */
.rsr-sections-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 42vh;                 /* GROWS WITH THE WINDOW; SCROLLS WHEN IT OUTRUNS THE VIEWPORT */
  overflow-y: auto;
  counter-reset: rsr-section;
}
.rsr-sections-list::-webkit-scrollbar { width: 4px; }
.rsr-sections-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-color) 14%, transparent);
  border-radius: 2px;
}
.rsr-section-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 6px;
  border-radius: 5px;
  font-size: 12px;
  color: color-mix(in srgb, var(--text-color) 78%, transparent);
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}
.rsr-section-item::before {
  counter-increment: rsr-section;
  content: counter(rsr-section);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  width: 16px;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
  color: color-mix(in srgb, var(--text-color) 35%, transparent);
}
.rsr-section-item:hover {
  background: color-mix(in srgb, var(--text-color) 5%, transparent);
  color: var(--text-color);
  cursor: pointer;
}
.rsr-section-item:hover::before {
  color: color-mix(in srgb, var(--text-color) 70%, transparent);
}
/*  QUIET ACTIVE CUE — A FAINT NEUTRAL WASH, NOT A COLOURED FILL.  */
.rsr-section-item.is-active {
  background: color-mix(in srgb, var(--text-color) 5%, transparent);
  color: var(--text-color);
}
.rsr-section-item.is-active::before {
  color: color-mix(in srgb, var(--text-color) 60%, transparent);
}
.rsr-section-empty {
  font-style: italic;
  color: color-mix(in srgb, var(--text-color) 50%, transparent);
  padding: 4px 8px;
}

/*  ════════════════════════════════════════════════════════════════════════
    MOBILE SECTION INDEX (BOTTOM-SHEET)
    REPLACES THE HIDDEN RIGHT-RAIL "Sections" CARD ON PHONES. A FAB OPENS A
    BOTTOM-SHEET OF .rsr-section-item ROWS (SAME data-target CONTRACT AS THE
    RAIL), SO THE GLOBAL JUMP HANDLER DRIVES IT WITH NO NEW SCROLL JS.
    DESKTOP: HIDDEN (THE RAIL SERVES WAYFINDING THERE).
    ════════════════════════════════════════════════════════════════════════ */
.mobile-toc { display: none; }

@media (max-width: 900px) {
  .mobile-toc { display: block; }

  .mtoc-fab {
    position: fixed;
    right: 16px;
    bottom: calc(var(--mobile-tabbar-h) + 16px);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--seperator-color);
    border-radius: 50%;
    background: var(--navbar-bg-color);
    color: var(--primary);
    font-size: 19px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    z-index: 1090;
    cursor: pointer;
  }
  .mtoc-fab:active { background: var(--hover-bg); }

  .mtoc-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    z-index: 1190;
  }
  .mtoc-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 70vh;
    max-height: 70dvh;
    display: flex;
    flex-direction: column;
    background: var(--solution-bg-color);
    border-top: 1px solid var(--seperator-color);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
    transform: translateY(101%);
    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 1200;
  }
  .mobile-toc.mtoc-open .mtoc-backdrop { opacity: 1; pointer-events: auto; }
  .mobile-toc.mtoc-open .mtoc-sheet    { transform: none; }

  .mtoc-sheet-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--seperator-color);
    flex: 0 0 auto;
  }
  .mtoc-sheet-title {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted-color);
  }
  .mtoc-sheet-count { margin-left: auto; font-size: 12px; color: var(--text-muted-color); }
  .mtoc-sheet-list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0 10px;
  }

  /*  SHEET ROWS — EXPLICIT NUMBER (.mtoc-num); SUPPRESS THE RAIL'S ::before
      COUNTER SO THE INDEX ISN'T DOUBLED OR CARRIED OVER FROM THE RAIL.  */
  .mtoc-sheet .rsr-section-item::before { content: none; }
  .mtoc-sheet .rsr-section-item.mtoc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 0;
    font-size: 15px;
    color: var(--text-color);
    cursor: pointer;
  }
  .mtoc-sheet .rsr-section-item.mtoc-item:active { background: var(--hover-bg); }
  .mtoc-item .mtoc-num {
    flex: 0 0 auto;
    min-width: 1.6em;
    color: var(--index-label-color);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
  }
  .mtoc-sheet .rsr-section-item.mtoc-item.is-active { color: var(--primary); }
  .mtoc-sheet .rsr-section-item.mtoc-item.is-active .mtoc-num { color: var(--primary); }
}

/*  ════════════════════════════════════════════════════════════════════════
    PER-SECTION COLLAPSE  (PROGRESSIVE DISCLOSURE) — WEB + MOBILE
    EACH SECTION IS WRAPPED IN .sol-section (callbacks/solution_panel.py). TAP /
    CLICK THE HEADING TO TOGGLE; COLLAPSED HIDES THE STEP BLOCKS BUT KEEPS THE
    HEADING (AND ITS section_N SCROLL ANCHOR) VISIBLE. EVERY SECTION OPENS
    EXPANDED BY DEFAULT ON ALL VIEWPORTS; FOLDING IS PURELY USER-DRIVEN.
    ════════════════════════════════════════════════════════════════════════ */
.sol-section > .section-wrapper .solution-section-heading {
  cursor: pointer;
  position: relative;
  padding-right: 1.5em;
  user-select: none;
}
.sol-section > .section-wrapper .solution-section-heading::after {
  content: "\25BE";                 /* DOWN TRIANGLE — EXPANDED */
  position: absolute;
  right: 0.1em;
  top: 0.15em;
  font-size: 0.7em;
  opacity: 0.55;
  transition: opacity 160ms ease;
}
.sol-section.collapsed > .section-wrapper .solution-section-heading::after {
  content: "\25B8";                 /* RIGHT TRIANGLE — COLLAPSED */
}
.sol-section > .section-wrapper .solution-section-heading:hover::after {
  opacity: 0.9;                     /* HOVER CUE (DESKTOP) — HEADING IS FOLDABLE */
}
.sol-section.collapsed :is(.solution-step-block, .subsection-wrapper, .solution-step-heading) {
  display: none;
}

/*  KEY-CONCEPTS CARD INNER  */
.rsr-concepts-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rsr-concept-item {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 5px 4px;
  font-size: 12px;
  color: color-mix(in srgb, var(--text-color) 76%, transparent);
  cursor: default;
  border-radius: 4px;
  transition: background-color 140ms ease, color 140ms ease;
}
.rsr-concept-item:hover {
  background: color-mix(in srgb, var(--text-color) 5%, transparent);
  color: var(--text-color);
}
.rsr-concept-label {
  flex: 1 1 auto;
}

/*  ── RESULT CARD (right-rail recap; replaces Key Concepts) ──────────────  */
.rsr-result-block { margin-top: 13px; }
.rsr-result-block:first-child { margin-top: 2px; }
.rsr-result-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-color) 42%, transparent);
  margin-bottom: 7px;
}
.rsr-result-lede {
  font-size: 12px;
  font-style: italic;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text-color) 70%, transparent);
}
.rsr-result-list { display: flex; flex-direction: column; }
.rsr-result-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--text-color) 7%, transparent);
}
.rsr-result-row:last-child { border-bottom: none; }
.rsr-result-row .k { font-size: 12px; color: color-mix(in srgb, var(--text-color) 60%, transparent); }
.rsr-result-row .v {
  font-size: 12.5px; font-weight: 500; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--text-color);
}
.rsr-result-checks { display: flex; flex-direction: column; gap: 7px; }
.rsr-result-check {
  display: flex; align-items: baseline; gap: 8px; font-size: 12px;
  color: color-mix(in srgb, var(--text-color) 72%, transparent);
}
.rsr-result-check .tick { color: #28B463; font-size: 10px; flex: 0 0 auto; }
.rsr-result-hyps { display: flex; flex-direction: column; gap: 7px; }
.rsr-result-hyp { display: flex; gap: 9px; align-items: baseline; }
.rsr-result-hyp .n {
  flex: 0 0 auto; width: 22px; font-weight: 600;
  color: color-mix(in srgb, var(--text-color) 82%, transparent);
}
.rsr-result-hyp .s {
  font-size: 12px; font-style: italic;
  color: color-mix(in srgb, var(--text-color) 70%, transparent); line-height: 1.35;
}
.rsr-result-sep {
  border: none; border-top: 1px solid color-mix(in srgb, var(--text-color) 11%, transparent);
  margin: 15px 0 0;
}
.rsr-result-decision { font-size: 15px; font-weight: 600; color: var(--text-color); }

/*  ── RESULT SUMMARY (closing solution section; the styled recap) ─────────  */
.result-summary { display: flex; flex-direction: column; gap: 22px; max-width: 760px; margin: 4px 0; }
.result-summary .rs-block { display: flex; flex-direction: column; }
.result-summary .rs-label {
  font-size: 16px; font-weight: 700; color: var(--text-color); margin-bottom: 12px;
}
.result-summary .rs-lede {
  font-size: 15px; line-height: 1.5;
  color: color-mix(in srgb, var(--text-color) 88%, transparent); max-width: 66ch;
}
/*  snapshot / outcome as a real <table> — MIRRORS .given-info__table: HEADER UNDERLINE
    ONLY (NO PER-ROW SEPARATORS), LEFT-ALIGNED, COMFORTABLE 56px GAP, INHERITED SIZE.  */
.result-summary .rs-table { border-collapse: collapse; width: auto; min-width: 380px; align-self: flex-start; margin: 0.2em 0 0.4em; }
.result-summary .rs-table th {
  text-align: left; font-weight: 600; padding: 0 56px 5px 0;
  border-bottom: 1px solid var(--table-header-border-color);
}
.result-summary .rs-table td {
  text-align: left; padding: 6px 56px 6px 0; vertical-align: baseline;
  border-bottom: 1px solid color-mix(in srgb, var(--text-color) 9%, transparent);  /* THIN ROW LINE */
}
.result-summary .rs-table tr:last-child td { border-bottom: none; }
.result-summary .rs-table tr td:last-child,
.result-summary .rs-table tr th:last-child { padding-right: 0; }
.result-summary .rs-table .rs-td-v { font-variant-numeric: tabular-nums; }
/*  assumptions: a tight checklist  */
.result-summary .rs-checks { display: flex; flex-direction: column; gap: 5px; }
.result-summary .rs-check {
  display: flex; align-items: baseline; gap: 9px; font-size: 14.5px;
  color: color-mix(in srgb, var(--text-color) 88%, transparent);
}
.result-summary .rs-check .tick { color: #28B463; font-size: 13px; flex: 0 0 auto; }
/*  hypotheses: tight H0 / H1  */
.result-summary .rs-hyps { display: flex; flex-direction: column; gap: 5px; }
.result-summary .rs-hyp { display: flex; gap: 9px; align-items: baseline; }
.result-summary .rs-hyp .n { flex: 0 0 auto; min-width: 26px; font-weight: 600; color: var(--text-color); }
.result-summary .rs-hyp .s {
  font-size: 14.5px; line-height: 1.4; color: color-mix(in srgb, var(--text-color) 88%, transparent);
}
.result-summary .rs-decision { font-size: 19px; font-weight: 600; color: var(--text-color); }
.result-summary .rs-sep {
  border: none; border-top: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent); margin: 0;
}
/*  parse_markup may wrap a value in a block element; keep it inline in the cells  */
.result-summary .rs-td-v > *, .result-summary .rs-td-k > *, .result-summary .rs-hyp .s > *, .result-summary .rs-lede > * { display: inline; margin: 0; }

/* ==================================================
   OVERVIEW 'Data & Parameters' — ONE rs-STYLE TABLE PER TIER. THE COLOR-TIERED
   TITLE (Sample Statistics / Analysis Parameters) IS THE LEFT-COLUMN HEADER:
   HEADER UNDERLINE + THIN ROW DIVIDERS, MIRRORING .result-summary .rs-table.
   Output is a matching underlined-title bullet list.
   ================================================== */
.dp-table { border-collapse: collapse; width: auto; min-width: 380px; margin: 0.2em 0 22px; }
.dp-table th {
  text-align: left; font-weight: 600; font-size: 16px; padding: 0 56px 6px 0;
  border-bottom: 1px solid var(--table-header-border-color);
}
.dp-table td {
  text-align: left; padding: 6px 56px 6px 0; vertical-align: baseline;
  border-bottom: 1px solid color-mix(in srgb, var(--text-color) 9%, transparent);  /* THIN ROW LINE */
}
.dp-table tr:last-child td { border-bottom: none; }
.dp-table td.dp-td-k { min-width: 300px; }        /* aligns the value column across tiers */
.dp-table th.dp-th-v, .dp-table td.dp-td-v { padding-right: 0; font-variant-numeric: tabular-nums; }
.dp-table td > *, .dp-table th > * { display: inline; margin: 0; }

.solution-step-block {
  margin: 0.4em 0 0.4em 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: inherit;
  color: inherit;
}

.solution-step-index {
  margin: 0 0 0.35em 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: inherit;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-color) 38%, transparent);
  text-align: left;
  /* PREVENT PAGE BREAKS - KEEP STEP INDEX WITH CONTENT */
  page-break-after: avoid;
  break-after: avoid;
}

.solution-step-block-body {
  margin: 0;
  padding: 0;
}

/* ▬▬▬  INTERACTIVE COLOR COORDINATION (assets/color_coordination.js)  ▬▬▬ */
/*  Hover a colored value: every place that SAME entity appears stays lit and  */
/*  glows faintly in its own colour, while the other coloured entities fade.   */
/*  The reading comes from the FADE (dim the rest), not a box — so it works    */
/*  identically in prose, formulas, and table cells with NO white highlight    */
/*  box. Pure compositor work (opacity + text-shadow): no layout, no repaint   */
/*  storm, no effect on table backgrounds/rows (those stay non-interactive).   */
.coord-active .coord-off {
  opacity: 0.22;
  transition: opacity 0.12s ease;
}
.coord-active .coord-on {
  /* no background, no outline — just a soft glow in the token's own colour */
  text-shadow: 0 0 7px currentColor;
  transition: text-shadow 0.12s ease;
}
.coord-active [class*="mjx-"] { transition: opacity 0.12s ease; }

/*  TABLES STAY NON-INTERACTIVE: a coloured cell value still LIFTS (glows) when  */
/*  it is the hovered entity, but a non-matching cell value NEVER dims — so the  */
/*  table never washes out and its row/cell backgrounds are untouched. The fade  */
/*  that isolates the entity happens only in the prose and formula lines.        */
.coord-active .statistics-table .coord-off { opacity: 1; }

.solution-step-content {
  margin: 0 0 0.4rem 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  background-color: inherit;
  font-size: 1.05rem;
  line-height: 1.5;
  /* PREVENT PAGE BREAKS - KEEP EACH SUBSTEP TOGETHER */
  page-break-inside: avoid;
  break-inside: avoid;
}

.solution-step-content:last-child {
  margin-bottom: 0;
}

/*  INLINE SECTION LABELS ([b,hexN]Definition:[/b,hexN] ...) — A PARAGRAPH WHOSE
    ONLY CHILD IS A BOLD SPAN OPENS A NEW LABELLED BLOCK; GIVE IT AIR ABOVE  */
.solution-step-content:has(> span:only-child[style*="bold"]) {
  margin-top: 0.8rem;
}

/*  TUNE KATEX'S STOCK 1em DISPLAY MARGIN — TIGHTER, AND BIASED SO THE
    EQUATION SITS WITH ITS FOLLOW-UP LINE INSTEAD OF DRIFTING AWAY  */
.solution-step-content .katex-display {
  margin: 0.5em 0 0.35em 0;
}

/*  [li] LIST ITEM — BULLET + INDENT OUTSIDE <ul>  */
.solution-step-list-item {
  display: list-item;
  list-style-type: disc;
  list-style-position: outside;
  margin: 0 0 0.25rem 1.6rem;
  padding-left: 0.4rem;
  font-size: 1.05rem;
  line-height: 1.5;
}

.solution-step-list-item:last-child {
  margin-bottom: 0;
}

.solution-step-content p,
.solution-step-content div {
  /* PREVENT PAGE BREAKS - KEEP PARAGRAPHS TOGETHER */
  page-break-inside: avoid;
  break-inside: avoid;
}

/*  ── COMPACT SOLUTION FLOW — ONE OPERATION PER LINE: EQUATION LEFT, OP TAG RIGHT  ── */
/*  SINGLE FULL-WIDTH TRACK WITH THE EQUATION justify-self:center — THIS CENTERS
    THE EQUATION IN THE FULL ROW WIDTH EXACTLY LIKE THE PLAIN .katex-display STEPS
    (THE FORMULA SUBSTITUTION LINES), SO BOTH BLOCKS SHARE ONE CENTER. THE OP TAG
    IS TAKEN OUT OF FLOW (position:absolute) SO IT CANNOT SHIFT THE EQUATION.  */
.compact-step {
  /*  STACKED: OP-NAME LINE, THEN THE EQUATION FULL-WIDTH BELOW. LONG EQUATIONS
      WRAP / SCROLL IN THEIR OWN BOX AND THE TAG NEVER OVERLAPS — MOBILE-SAFE.  */
  display: block;
  margin: 0 0 1.2rem 0;
  page-break-inside: avoid;
  break-inside: avoid;
}
.compact-step__eq {
  /*  FULL WIDTH SO THE INNER .katex-display CENTERS ITS MATH VIA ITS OWN
      text-align:center — THE EXACT MECHANISM THE PLAIN #...# FORMULA STEPS USE,
      SO COMPACT STEPS AND FORMULA STEPS SHARE ONE CENTER. (justify-self:center
      ON A SCROLL CONTAINER SIZED THE BOX TO CONTENT AND LANDED OFF-CENTER.)  */
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  /*  overflow-x:auto FORCES overflow-y AWAY FROM visible, SO IT CLIPS AT THE
      PADDING EDGE. VERTICAL PADDING GIVES TALL DISPLAY FRACTIONS / EXPONENTS
      ROOM SO THEIR NUMERATOR (TOP) IS NOT CUT OFF.  */
  padding: 0.45em 0.15em;
}
/*  ZERO KATEX'S OWN VERTICAL MARGIN SO ROW SPACING IS CONTROLLED ONLY BY
    .compact-step's margin-bottom.  */
.compact-step__eq .katex-display {
  margin: 0;
}
/*  OP TAG: OUT OF FLOW, PINNED TO THE RIGHT EDGE AND VERTICALLY CENTERED, SO THE
    CENTERED EQUATION KEEPS THE FOCUS AND THERE IS A WIDE GAP TO THE TAG. IT IS A
    SUPPORTING ANNOTATION — DE-EMPHASIZED (SMALLER, MUTED) AND NON-INTERACTIVE.  */
.compact-step__tag {
  /*  SMALL OP-NAME HEADING ABOVE THE EQUATION (COLOUR COMES FROM ITS KATEX ACCENT).  */
  display: block;
  margin: 0 0 0.15rem 0.2rem;
  font-family: 'Fira Code', monospace;
  font-size: 0.8rem;
  opacity: 0.72;
  white-space: nowrap;
  pointer-events: none;
}

.solution-step-anchor {
  margin: 0 0 0.6rem 0;
  padding: 0;
  /* PREVENT PAGE BREAKS - KEEP STEP LABEL WITH FIRST SUBSTEP */
  page-break-inside: avoid;
  break-inside: avoid;
}

.section-wrapper {
  margin: 0;
  padding: 1em 0 1em 0;
}

/* ==================================================
    PDF LOADING OVERLAY
   ================================================== */

.pdf-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(12, 12, 14, 0.96);
  backdrop-filter: blur(6px);
}

.pdf-overlay-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pdf-overlay-text {
  margin: 0.2em;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 2em;
  color: #FFFFFF;
  text-align: center;
  animation: SoftPulse_ 1s ease-in-out infinite;
}

@keyframes SoftPulse_ {

  0%,
  100% {
    filter: drop-shadow(0 0 3px rgba(194, 88, 43, 1));
  }

  50% {
    filter: drop-shadow(0 0 12px rgba(232, 93, 51, 1));
  }
}

.pdf-loading-overlay.hidden {
  display: none !important;
}

.pdf-icon {
  font-size: 4rem;
  color: #E57A3D;
  animation: pdfIconPulse 1.5s ease-in-out infinite;
}

@keyframes pdfIconPulse {

  0%,
  100% {
    filter: drop-shadow(0 0 8px rgba(229, 122, 61, 0.6));
    transform: scale(1);
  }

  50% {
    filter: drop-shadow(0 0 20px rgba(229, 122, 61, 0.9));
    transform: scale(1.05);
  }
}

.pdf-progress-container {
  width: 300px;
  height: 8px;
  margin: 1.5em 0 0.5em 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.pdf-progress-bar {
  height: 100%;
  background: linear-gradient(90deg,
      #E57A3D 0%,
      #F5A623 25%,
      #E57A3D 50%,
      #F5A623 75%,
      #E57A3D 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
  animation: progressGradient 2s linear infinite;
}

@keyframes progressGradient {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

.pdf-progress-percent {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.2em;
  font-weight: 600;
  color: #E57A3D;
}

.pdf-stage-text {
  margin-top: 0.5em;
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.6);
}

/* ==================================================
    PDF THEME SELECTION MODAL
   ================================================== */

.pdf-theme-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(12, 12, 14, 0.9);
  backdrop-filter: blur(4px);
}

.pdf-theme-modal.hidden {
  display: none !important;
}

.pdf-theme-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5em;
  padding: 2.5em 3em;
  background: #1A1A1A;
  border: 1px solid #333;
}

.pdf-theme-modal-title {
  margin: 0;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 1.4rem;
  font-weight: 500;
  color: #DCDCDC;
  letter-spacing: 0.05em;
}

.pdf-theme-options {
  display: flex;
  gap: 1.5em;
}

.pdf-theme-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 120px;
  height: 100px;
  padding: 1em;
  border: 2px solid transparent;
  border-radius: 0;
  background: #252525;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pdf-theme-btn:hover {
  transform: translateY(-2px);
}

.pdf-theme-light {
  border-color: #4A4535;
}

.pdf-theme-light:hover {
  background: #4A4535;
  border-color: #E6C84D;
}

.pdf-theme-light .pdf-theme-icon {
  font-size: 2em;
}

.pdf-theme-light .pdf-theme-label {
  color: #E6C84D;
  font-weight: 500;
}

.pdf-theme-dark {
  border-color: #4A3545;
}

.pdf-theme-dark:hover {
  background: #4A3545;
  border-color: #B87DA8;
}

.pdf-theme-dark .pdf-theme-icon {
  font-size: 2em;
}

.pdf-theme-dark .pdf-theme-label {
  color: #B87DA8;
  font-weight: 500;
}

.pdf-theme-cancel-btn {
  padding: 0.6em 2em;
  border: 1px solid #555;
  border-radius: 0;
  background: transparent;
  color: #888;
  font-size: 0.9em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pdf-theme-cancel-btn:hover {
  background: #333;
  color: #DCDCDC;
  border-color: #777;
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
                        ABOUT MODAL
   ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */

/*  SHARED MODAL X CLOSE BUTTON  */
.modal-x-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25em 0.4em;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text-muted-color) !important;
  font-size: 1rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.modal-x-close-btn:hover {
  color: var(--text-color) !important;
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
   AUTHENTICATION VIEW (IMMERSIVE — CENTERED SIGN-IN ON A FAINT STAT BACKDROP)
   ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
/*  REVEAL — HIDE SOLUTION + RIGHT-RAIL + SIDEBAR; THE AUTH COLUMN TAKES OVER.  */
#auth_panel_id {
  display: none;
}

.main-container--auth #solution_column_id,
.main-container--auth #right_rail_column_id,
.main-container--auth #sidebar_column_id {
  display: none !important;
}

.main-container--auth #auth_panel_id {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  width: auto !important;
  max-width: none !important;
}

.auth-column {
  background: transparent !important;
}

/*  ══════════  ATLAS — FULL-SCREEN GALAXY MAP (PILLAR TAKEOVER, MIRRORS AUTH)  ══════════  */
#atlas_column_id { display: none; }
.main-container--atlas { height: calc(100vh - var(--navbar-h)); }
.main-container--atlas #sidebar_column_id,
.main-container--atlas #solution_column_id,
.main-container--atlas #right_rail_column_id,
.main-container--atlas #auth_panel_id {
  display: none !important;
}
.main-container--atlas #atlas_column_id {
  display: block !important;
  flex: 1 1 0% !important;
  width: 100% !important;
  max-width: none !important;
  height: 100%;
  padding: 0 !important;
}
/*  ══════════  ATLAS RESULT — REAL SOLUTION + REFERENCE RAIL, SHOWN FROM THE
    SOLVE WIZARD (NO CLONE). Mirrors the auth/atlas takeovers: the sidebar + galaxy
    map drop away and the live #solution_column_id + #right_rail_column_id own the
    workspace. Different skin from the in-app Solver (centred manuscript, atlas-dark
    surface) but the SAME components, so Copy / PDF / Print / jump / calc-tree all
    work natively. Toggled clientside by the wizard (assets/solve_wizard.js).  ══════  */
/*  Driven by a BODY class (not the row className): several Dash callbacks own
    #main_container_row_id.className (auth / atlas / roadmap) and the solution's own
    "View learning path" button re-fires one of them on render, so a row-class skin
    would be clobbered. body.atlas-result is owned by nobody but the wizard.  */
body.atlas-result #sidebar_column_id,
body.atlas-result #atlas_column_id,
body.atlas-result #auth_panel_id { display: none !important; }
body.atlas-result #solution_column_id {
  display: block !important;
  flex: 1 1 0% !important;
  width: auto !important;
  max-width: none !important;
}
body.atlas-result #right_rail_column_id { display: block !important; }
/*  The render-time badge sits in the top-left corner — exactly under the ← Atlas
    pill in this view. Drop it here (it is diagnostic, not part of the manuscript).  */
body.atlas-result .render-time-style { display: none !important; }

/*  BACK-TO-ATLAS PILL — injected on result entry, mirrors the wizard's ← Atlas.  */
.atlas-result-back {
  position: fixed; top: calc(var(--navbar-h) + 14px); left: 22px; z-index: 1200;
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 16px 0 13px; border-radius: 999px; line-height: 1; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--text-color) 16%, transparent);
  background: color-mix(in srgb, var(--solution-bg-color) 80%, transparent);
  color: color-mix(in srgb, var(--text-color) 78%, transparent);
  backdrop-filter: blur(6px); transition: .2s;
}
.atlas-result-back .ar { font-size: 15px; }
.atlas-result-back .bl { font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; }
.atlas-result-back:hover {
  color: var(--text-color);
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--primary) 12%, var(--solution-bg-color));
}
.atlas-result-back:hover .ar { transform: translateX(-2px); transition: .2s; }

.atlas-fullscreen-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
  background: #070708;
  overflow: hidden;
}
.atlas-fullscreen-container canvas { position: absolute; inset: 0; display: block; cursor: grab; touch-action: none; }
.atlas-fullscreen-container canvas:active { cursor: grabbing; }

.atlas-ui { position: absolute; inset: 0; pointer-events: none; z-index: 3;
  font-family: "Inter","Segoe UI",system-ui,sans-serif; color: #ece8df; transition: opacity .35s ease; }
.atlas-wordmark { position: absolute; top: 24px; left: 40px; }
.atlas-wordmark .ttl { font-family: "Cormorant Garamond",Georgia,serif; font-weight: 500; font-size: 34px;
  letter-spacing: .04em; line-height: 1; text-shadow: 0 2px 30px rgba(0,0,0,.6); }
.atlas-wordmark .ttl b { color: #e0bd78; font-weight: 600; font-style: italic; }
.atlas-wordmark .sub { margin-top: 9px; font-size: 10px; letter-spacing: .42em; text-transform: uppercase;
  color: #a7adba; padding-left: 2px; }
.atlas-index { position: absolute; top: 26px; left: 40px; right: auto; transform: none; display: grid;
  grid-template-columns: auto auto; column-gap: 13px; row-gap: 9px; align-items: baseline; }
.atlas-num { font-family: "Inter","Segoe UI",system-ui,sans-serif; font-weight: 500; font-size: 19px;
  color: #b59a63; line-height: .9; text-align: left; letter-spacing: .01em;
  font-variant-numeric: lining-nums tabular-nums; text-shadow: none; }
.atlas-num[data-k="c"] { color: var(--primary, #3A8DCC); }   /* CONSTELLATIONS COUNT → ATLAS PRIMARY (BLUE) */
.atlas-heading { position: absolute; top: 30px; left: 50%; transform: translateX(-50%) translateY(-8px);
  font-family: "Marcellus","Cormorant Garamond",serif; font-weight: 400; font-size: 30px; letter-spacing: .24em;
  text-transform: uppercase; color: #cdd2e0; text-align: center; opacity: 0; white-space: nowrap;
  text-shadow: 0 0 32px rgba(140,150,210,.42); transition: opacity .4s, transform .4s; }
.atlas-heading.on { opacity: .94; transform: translateX(-50%) translateY(0); }
.atlas-heading small { display: block; margin-top: 9px; font-family: "Inter",sans-serif; font-weight: 400;
  font-size: 9.5px; letter-spacing: .34em; color: #7a8190; font-variant-numeric: lining-nums tabular-nums; }
.atlas-heading .atlas-cat-desc { display: block; margin: 12px auto 0; max-width: 440px; white-space: normal;
  font-family: "Cormorant Garamond","Marcellus",serif; font-style: italic; font-weight: 400; font-size: 16px;
  letter-spacing: .01em; text-transform: none; line-height: 1.4; color: #9aa0b6;
  text-shadow: 0 0 20px rgba(8,8,14,.7); }
.atlas-lab { font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: #a7adba;
  text-align: left; transform: translateY(-3px); line-height: 1.25; }
.atlas-rule { grid-column: 1 / -1; height: 1px; margin: 1px auto 0 0; width: 124px;
  background: linear-gradient(90deg,rgba(224,189,120,.34),transparent); }
.atlas-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; text-align: center; font-size: 9.5px; letter-spacing: .24em;
  text-transform: uppercase; color: #565b66; }
.atlas-searchwrap { position: absolute; top: 110px; left: 40px; transform: none; pointer-events: auto; }
.atlas-search { width: 220px; padding: 7px 12px; background: transparent;
  border: 1px solid rgba(168,170,188,.28); border-radius: 5px; color: #ece8df;
  font-size: 11px; letter-spacing: .06em; outline: none; text-align: left;
  transition: border-color .3s, box-shadow .3s; }
.atlas-search::placeholder { color: #5d616c; letter-spacing: .18em; text-transform: uppercase; font-size: 9px; }
.atlas-search:focus { border-color: rgba(224,189,120,.6); box-shadow: 0 0 10px rgba(224,189,120,.15); }

.atlas-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0;
  width: 100%; background: rgba(10,11,16,.34); backdrop-filter: blur(7px);
  border: 1px solid rgba(168,170,188,.16); border-radius: 5px; z-index: 20; overflow: hidden; }
.atlas-dropdown.on { display: block; }
.atlas-dropdown__item { display: flex; flex-direction: column; padding: 8px 12px; cursor: pointer;
  border-bottom: 1px solid rgba(168,170,188,.08); transition: background .15s; }
.atlas-dropdown__item:last-child { border-bottom: none; }
.atlas-dropdown__item:hover { background: rgba(255,255,255,.06); }
.atlas-dropdown__label { font-size: 12px; color: var(--primary, #3A8DCC); letter-spacing: .03em; }   /* METHODS → ATLAS PRIMARY (BLUE) */
.atlas-dropdown__item--cat .atlas-dropdown__label { color: #e0bd78; }   /* CONSTELLATIONS STAY GOLD */
.atlas-dropdown__sub { font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: #5d6270; margin-top: 2px; }

.atlas-tip { position: absolute; z-index: 5; min-width: 210px; max-width: 284px; padding: 14px 16px;
  background: rgba(9,11,17,.82); backdrop-filter: blur(12px); border: 1px solid rgba(224,189,120,.22);
  border-radius: 13px; pointer-events: none; opacity: 0; transform: translateY(7px);
  transition: opacity .16s, transform .16s; box-shadow: 0 22px 60px rgba(0,0,0,.62); }
.atlas-tip.on { opacity: 1; transform: translateY(0); }
.atlas-tip .g { font-family: "Cormorant Garamond",Georgia,serif; font-size: 32px; line-height: 1;
  float: right; margin: -3px 0 0 12px; font-style: italic; }
.atlas-tip .n { font-size: 15px; font-weight: 500; letter-spacing: .01em; margin-bottom: 6px; padding-right: 36px; }
.atlas-tip .c { font-size: 9px; letter-spacing: .26em; text-transform: uppercase; margin-bottom: 9px; }
.atlas-tip .d { font-size: 12px; line-height: 1.55; color: #a9afbc; }

/*  ── MOBILE: THE OVERLAY UI IS DESKTOP-POSITIONED AND COLLIDES ON A NARROW
       SCREEN (WORDMARK ↔ INDEX AT THE TOP, HINT ↔ SEARCH AT THE BOTTOM).
       SHRINK + RE-PIN EVERYTHING TO THE SCREEN EDGES, STACK HINT ABOVE SEARCH,
       AND CAP THE SEARCH PILL TO THE VIEWPORT.                              ──  */
@media (max-width: 768px) {
  .atlas-wordmark { top: 14px; left: 16px; max-width: 56vw; }
  .atlas-wordmark .ttl { font-size: 21px; }
  .atlas-wordmark .sub { margin-top: 6px; font-size: 8px; letter-spacing: .22em; }

  .atlas-index { top: 14px; right: 16px; left: auto; transform: none; column-gap: 9px; row-gap: 6px; }
  .atlas-num { font-size: 18px; }
  .atlas-lab { font-size: 7px; letter-spacing: .2em; }
  .atlas-rule { width: 68px; }

  /*  ZOOMED-IN CONSTELLATION NAME — SHRINK, ALLOW WRAP, SIT CLEAR BELOW THE
      WORDMARK + INDEX BAND (THE INDEX REACHES ~133px ON A NARROW SCREEN).  */
  .atlas-heading { top: 144px; font-size: 17px; letter-spacing: .18em;
    max-width: 90vw; white-space: normal; }
  .atlas-heading small { font-size: 8.5px; letter-spacing: .26em; }
  .atlas-heading .atlas-cat-desc { font-size: 12.5px; max-width: 280px; margin-top: 9px; }

  /*  HINT STACKS ABOVE THE SEARCH PILL, CENTRED AND WRAPPING.  */
  .atlas-hint { left: 50%; right: auto; bottom: 64px; transform: translateX(-50%);
    max-width: 88vw; text-align: center; white-space: normal; line-height: 1.5;
    font-size: 8.5px; letter-spacing: .14em; }

  .atlas-searchwrap { bottom: 18px; top: auto; left: 50%; transform: translateX(-50%); width: 88vw; }
  .atlas-search { width: 100%; }
  .atlas-search:focus { width: 100%; }

  .atlas-tip { max-width: 80vw; min-width: 0; }
}

/*  ATLAS ZOOM CONTROL — MOBILE-ONLY (DESKTOP HAS WHEEL / TRACKPAD ZOOM). A CLEAN,
    ARIA-LABELLED, 44px +/- STACK ON THE RIGHT EDGE, CLEAR OF THE TOP WORDMARK AND
    THE BOTTOM SEARCH / HINT. PINCH AND THESE BUTTONS SHARE THE SAME zoomAt PATH.  */
.atlas-zoom { display: none; }
@media (max-width: 768px) {
  .atlas-zoom {
    display: flex;
    flex-direction: column;
    gap: 9px;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
    z-index: 6;
  }
  .atlas-zoom__btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    color: #ece8df;
    background: rgba(10, 11, 16, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(168, 170, 188, 0.28);
    border-radius: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.2s, background 0.2s;
  }
  .atlas-zoom__btn:active {
    background: rgba(224, 189, 120, 0.16);
    border-color: rgba(224, 189, 120, 0.6);
  }
}

/*  ── STAGE — FULL-HEIGHT, DARK, FAINT CENTRE GLOW ──  */
.auth-page {
  position: relative;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(ellipse 70% 55% at 38% 42%, rgba(60,40,110,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 62% 58%, rgba(20,50,90,0.14) 0%, transparent 65%),
    radial-gradient(ellipse at center, rgba(4,4,6,0.45) 0%, transparent 72%),
    #08090c;
}

/*  ── FAINT STATISTICAL BACKDROP (VECTOR CURVES + KATEX FORMULAE) ──  */
.auth-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /*  BRAND HERO BEHIND THE CARD — RADIAL SCRIM DARKENS THE CENTRE SO THE CARD
      SEATS CLEANLY WHILE THE COSMOS + FORMULAE STAY VIVID AROUND THE EDGES.  */
  background:
    radial-gradient(ellipse at center, rgba(8, 8, 10, 0.55) 0%, rgba(8, 8, 10, 0.2) 48%, rgba(8, 8, 10, 0) 78%);
}

.auth-formula {
  /*  RETIRED — main_bg.png ALREADY CARRIES THE FORMULA MOTIF; THE OVERLAY WOULD
      DOUBLE UP. REMOVE display:none TO BRING THE FLOATING FORMULAE BACK.  */
  display: none;
  position: absolute;
  color: rgba(219, 215, 210, 0.15);
  font-size: 1.05rem;
  white-space: nowrap;
  user-select: none;
}

.auth-formula .katex { color: inherit; }

.auth-formula--tl { top: 15%;    left: 6%;  }
.auth-formula--tr { top: 11%;    right: 7%; }
.auth-formula--bl { bottom: 16%; left: 6%;  }
.auth-formula--br { bottom: 18%; right: 6%; }

/*  ── BACK TO WORKSPACE — SUBTLE, TOP-LEFT, UNDER THE NAVBAR ──  */
.auth-back {
  position: absolute;
  top: clamp(1rem, 2.4vh, 1.6rem);
  left: clamp(1.25rem, 3vw, 2.5rem);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35em 0.1em;
  border: 0;
  background: transparent;
  color: var(--text-muted-color);
  font-size: 0.82rem;
  cursor: pointer;
  transition: color 0.16s ease;
}

.auth-back i { transition: transform 0.16s ease; }
.auth-back:hover { color: var(--text-color); }
.auth-back:hover i { transform: translateX(-3px); }

/*  ── CENTERED SIGN-IN STACK ──  */
.auth-center {
  position: relative;
  z-index: 2;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: clamp(4.25rem, 11vh, 7rem) 1.5rem clamp(2rem, 6vh, 3.5rem);
}

/*  ── SIGN-IN CARD — SOLID DARK PANEL OVER THE BACKDROP (NO GLASS/BLUR) ──  */
.auth-stack {
  width: 100%;
  max-width: 580px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  padding: clamp(1.9rem, 4vw, 2.6rem) clamp(1.5rem, 4vw, 2.25rem);
  background: rgba(18, 18, 22, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  transform: translateY(-3.5rem);
}

.auth-logo {
  width: clamp(165px, 52%, 205px);
  height: auto;
  margin: 0 auto 1.3rem;
}

.auth-title {
  margin: 0;
  font-size: clamp(1.5rem, 2.3vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-color);
}

.auth-subtitle {
  margin: 0.4rem 0 1.5rem;
  font-size: 0.82rem;
  color: var(--text-muted-color);
}

/*  ── EMAIL (MAGIC LINK VIA AUTH0 PASSWORDLESS) ──  */
.auth-email {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  text-align: left;
}

.auth-email__label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-color);
}

.auth-email__req { color: var(--tertiary); }

/*  input.* SPECIFICITY BEATS DASH'S .dash-input-element (height:100% + tiny
    padding), WHICH OTHERWISE COLLAPSES THE FIELD AND CLIPS THE PLACEHOLDER.  */
input.auth-email__input {
  width: 100%;
  height: auto;
  min-height: 3.1rem;
  box-sizing: border-box;
  padding: 1.05em 1em;
  line-height: 1.5;
  border-radius: var(--control-radius);
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: color-mix(in srgb, var(--text-color) 2.5%, transparent);
  color: var(--text-color);
  font-size: 0.95rem;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.auth-email__input::placeholder { color: rgba(219, 215, 210, 0.34); }

.auth-email__input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--tertiary) 75%, transparent);
  background: color-mix(in srgb, var(--text-color) 2.5%, transparent);
}

.auth-email__continue {
  margin-top: 0.7rem;
  padding: 0.85em 1.2em;
  border: 0;
  border-radius: var(--control-radius);
  background: linear-gradient(180deg, #ED7C2E 0%, #E06A1C 100%);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.16s ease, transform 0.16s ease;
}

.auth-email__continue:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/*  ── SIGN UP ──  */
.auth-signup {
  margin-top: 0.9rem;
  text-align: left;
  font-size: 0.85rem;
  color: var(--text-muted-color);
}

.auth-signup__link {
  color: var(--tertiary);
  font-weight: 600;
  text-decoration: none;
}

.auth-signup__link:hover { text-decoration: underline; color: var(--tertiary); }

/*  ── "OR" DIVIDER ──  */
.auth-or {
  display: flex;
  align-items: center;
  gap: 0.9em;
  width: 100%;
  margin: 1.05rem 0;
  color: var(--text-muted-color);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
}

.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

/*  ── PROVIDER TILE GRID (COMPACT — ONE ROW, ICON STACKED OVER LABEL) ──  */
.auth-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
}

.auth-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.42em;
  min-height: 62px;
  padding: 0.7em 0.4em;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-color);
  text-decoration: none;
  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

.auth-tile:hover,
.auth-tile:focus {
  text-decoration: none;
  color: var(--text-color);
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

.auth-tile__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
}

.auth-tile__img {
  width: 1.5em;
  height: 1.5em;
  display: block;
}

.auth-tile__mark {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 1.2rem;
}

.auth-tile__label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/*  BRAND GLYPH COLOURS — MULTICOLOUR MARKS (GOOGLE/MICROSOFT) USE THEIR OWN SVG.  */
.auth-tile--github   .auth-tile__glyph { color: #DBD7D2; }
.auth-tile--apple    .auth-tile__glyph { color: #DBD7D2; }
.auth-tile--facebook .auth-tile__glyph { color: #1877F2; }
.auth-tile--linkedin .auth-tile__glyph { color: #0A66C2; }
.auth-tile--twitter  .auth-tile__glyph { color: #DBD7D2; }
.auth-tile--discord  .auth-tile__glyph { color: #5865F2; }
.auth-tile--email    .auth-tile__glyph { color: var(--text-muted-color); }

/*  ── SECONDARY PROVIDER ROW ──  */

/*  ── SECURE NOTE (TWO LINES) ──  */
.auth-secure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 1.6rem;
}

.auth-secure__line {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--text-muted-color);
  font-size: 0.82rem;
}

.auth-secure__line i { font-size: 0.92em; opacity: 0.85; }

.auth-secure__sub {
  color: rgba(219, 215, 210, 0.32);
  font-size: 0.76rem;
}

/*  ── RESPONSIVE ──  */
@media (max-width: 900px) {
  .auth-formula { display: none; }
}

@media (max-width: 560px) {
  .auth-back span { display: none; }
}

/*  KEEP THE 4-UP / 3-UP TILE ROWS FROM CROWDING ON NARROW SCREENS.  */
@media (max-width: 400px) {
  .auth-grid { gap: 6px; }
  .auth-tile { min-height: 56px; padding: 0.6em 0.3em; }
  .auth-tile__label { font-size: 0.66rem; }
}

/*  ─── SHARED SHELL (about-modal + user-stats-modal) ─── */
.about-modal .modal-content,
.user-stats-modal .modal-content {
  background: #1E1E1E !important;
  border: 1px solid #4A4A4A;
  border-radius: 0;
  color: #DBD7D2;
}

.light-main .about-modal .modal-content,
.light-main .user-stats-modal .modal-content {
  background: #FCFBF8 !important;
  border: 1px solid #D0D0D0;
  color: #374151;
}

.about-modal-header,
.user-stats-header {
  border-bottom: 1px solid var(--seperator-color) !important;
  background: transparent !important;
  padding: 1.2em 1.5em;
}

.about-modal-title,
.user-stats-title {
  margin: 0;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--text-color);
  letter-spacing: 0.04em;
}

.about-modal-body,
.user-stats-body {
  padding: 1.5em;
}

.about-modal-section,
.user-stats-section {
  margin-bottom: 1.6em;
}

.about-modal-section:last-child,
.user-stats-section:last-child {
  margin-bottom: 0;
}

.about-modal-section-title,
.user-stats-section-title {
  margin: 0 0 0.5em 0;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-color);
  letter-spacing: 0.03em;
}

.about-modal-divider,
.user-stats-divider {
  height: 1px;
  margin-bottom: 0.8em;
  background: var(--seperator-color);
  opacity: 0.6;
}

/*  ─── ABOUT-MODAL UNIQUES ─── */
.about-modal-tagline {
  margin: 0 0 1.4em 0;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--text-muted-color);
}

.about-modal-item {
  padding: 0.4em 0 0.4em 0.6em;
  margin-bottom: 0.4em;
  border-left: 2px solid var(--seperator-color);
  transition: border-color 0.2s ease;
}

.about-modal-item:hover,
.user-stats-recent-item:hover {
  border-left-color: var(--text-color);
}

.about-modal-item-label {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-color);
}

.about-modal-item-desc {
  margin: 0.2em 0 0 0;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 0.82rem;
  color: var(--text-muted-color);
  line-height: 1.5;
}

/*  ─── USER-STATS UNIQUES ─── */
.user-stats-grid,
.user-stats-recent {
  display: flex;
  flex-direction: column;
}
.user-stats-grid   { gap: 0.55em; }
.user-stats-recent { gap: 0.4em; }

.user-stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4em 0;
}

.user-stats-label,
.user-stats-recent-date {
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: var(--text-muted-color);
}
.user-stats-label       { font-size: 0.85rem; }
.user-stats-recent-date { font-size: 0.8rem;  }

.user-stats-value {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-color);
}

.user-stats-recent-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45em 0.6em;
  border-left: 2px solid var(--seperator-color);
  transition: border-color 0.2s ease;
}

.user-stats-recent-name {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--text-color);
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
                        RESULTS OFFCANVAS
   ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */

/* ==================================================
    RESULTS OFFCANVAS
   ================================================== */

.results-offcanvas {
  width: 50%;
  margin: 0;
  padding: 0;
  background-color: inherit;
  color: inherit;
  text-align: left;
}

/*  CUSTOM TABLE (RESULTS / GENERAL)  */
.custom-table {
  width: auto;
  margin: 0 auto;
  table-layout: auto;
  background-color: transparent;
  color: inherit;
  border-collapse: collapse;
  border: 1.5px solid #9ca3af;
  /* PREVENT PAGE BREAKS - KEEP TABLES TOGETHER */
  page-break-inside: avoid;
  break-inside: avoid;
}

.custom-table th,
.custom-table td {
  border: none;
  border-bottom: 0.7px solid #9ca3af;
  background-color: transparent;
  color: inherit;
  text-align: center;
  padding: 8px 14px;
  /* PREVENT PAGE BREAKS - KEEP TABLE ROWS TOGETHER */
  page-break-inside: avoid;
  break-inside: avoid;
}

.custom-table thead th {
  font-weight: 600;
  border-top: 1.5px solid #9ca3af;
  border-bottom: 1.2px solid #9ca3af;
  align-items: center;
}

/*  CUSTOM TABLE — HORIZONTAL SCROLL WHEN WIDER THAN VIEWPORT  */
.custom-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#hand-dropdown div.dropdown-menu {
  width: 100%;
}

/* ==================================================
    SOLUTION TABLES
   ================================================== */

/*  STATISTICS TABLE CONTAINER — HORIZONTAL SCROLL WHEN WIDER THAN VIEWPORT  */
.statistics-table {
  margin: 0.6em 0;
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px;
}

/*  CENTER WHEN IT FITS, SCROLL TO BOTH EDGES WHEN IT OVERFLOWS.       */
/*  margin:auto ON THE FLEX CHILD — NOT justify-content:center, WHICH  */
/*  MAKES THE LEFT OVERFLOW UNREACHABLE BY THE SCROLLBAR.             */
.statistics-table > * {
  margin: auto;
  flex-shrink: 0;
}

/*  STATISTICS TABLE (DASH DATATABLE)  */
#statistics_table table {
  font-size: 16px;
  text-align: center;
  overflow-y: hidden;
  border-collapse: collapse;
  border: 1.2px solid var(--table-header-border-color);
  padding: 10px;

}

#statistics_table th {
  font-weight: 600;
  text-align: center;

  border-top: 1.2px solid var(--table-header-border-color) !important;
  border-bottom: 1.8px solid var(--table-header-border-color) !important;
  border-left: 0.5px solid var(--table-border-color) !important;
  border-right: 0.5px solid var(--table-border-color) !important;
  padding: 8px 0.5em;
}

#statistics_table td {
  text-align: center;
  font-size: 16px;
  overflow-y: hidden;
  padding: 8px 14px;
  color: inherit;
  border-top: none !important;
  border-bottom: 0.7px solid var(--table-header-border-color) !important;
  border-left: 0.5px solid var(--table-border-color) !important;
  border-right: 0.5px solid var(--table-border-color) !important;
}

/*  SOLUTION TABLES ARE READ-ONLY — KILL DASH DATATABLE CELL SELECTION /  */
/*  FOCUS / HOVER HIGHLIGHT SO ONLY THE INTENDED COLOR-CODED CELLS SHOW.  */
.statistics-table td.cell--selected,
.statistics-table td.focused,
.statistics-table th.cell--selected,
.statistics-table th.focused,
.statistics-table .dash-cell.cell--selected,
.statistics-table .dash-cell.focused {
  background-color: inherit !important;
  box-shadow: none !important;
  outline: none !important;
}

/*  KILL THE DATATABLE ROW-HOVER WASH (BUNDLED tr:hover → var(--hover)) —  */
/*  THE SOLUTION TABLE IS A STATIC FIGURE, NOT AN INTERACTIVE GRID.        */
.statistics-table .dash-spreadsheet-inner tr:hover,
.statistics-table .dash-spreadsheet-container tr:hover {
  background-color: transparent !important;
}

/*  STATISTICS TABLE — HORIZONTAL BORDERED GRID (TRANSPOSED, STATIC <table>)  */
/*  EACH ORIGINAL COLUMN IS A ROW: BOLD <th> LABEL THEN ITS VALUES.          */
.hgrid-table {
  font-size: 16px;
  text-align: center;
  border-collapse: collapse;
  border: 1.2px solid var(--table-header-border-color);
}

.hgrid-table th,
.hgrid-table td {
  text-align: center;
  padding: 8px 14px;
  border: 0.5px solid var(--table-border-color);
}

.hgrid-table th.hgrid-table__label {
  font-weight: 600;
  color: var(--text-color);
  border-right: 1.8px solid var(--table-header-border-color);
}

/* ==================================================
  GIVEN INFORMATION BLOCK (paired-data methods)
  Dataset (x / y rows) + Analysis Parameters (n, alpha).
  Fully monochrome — hierarchy from weight / size /
  uppercase + one neutral structural divider.
  ==================================================      */
.given-info {
  max-width: 760px;
  margin: 0.4em 0 0.9em;
  font-size: 16px;
  color: var(--text-color);
}

.given-info__group {
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 12px;
}

/* DATASET: one flowing row per series (stacked vertically) */
.given-info__data {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* PARAMETERS: one 'label: value' line each, as a disc-bulleted list */
.given-info__params {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-left: 2.2rem;
}

.given-info__row {
  display: flex;
  gap: 20px;
  align-items: baseline;
}

.given-info__key {
  flex: 0 0 1.4em;
  text-align: center;
}

.given-info__vals {
  flex: 1;
  line-height: 1.8;
}

/* SECOND GROUP (PARAMETERS) GETS BREATHING ROOM IN PLACE OF THE REMOVED DIVIDER */
.given-info__data + .given-info__group,
.given-info__table + .given-info__group,
.given-info__data + .given-info__params,
.given-info__table + .given-info__params {
  margin-top: 16px;
}

.given-info__param {
  display: list-item;
  list-style: disc outside;
  padding-left: 0.4rem;
}

.given-info__pval {
  font-weight: 600;
  margin-left: 8px;
}

/* GROUPED PARAMETERS: Parameter | Group 1 | Group 2 ... column table */
/*  WIDTH HUGS CONTENT — A FIXED 56px GUTTER KEEPS VALUES BESIDE THEIR
    LABELS INSTEAD OF STRETCHING THE TABLE ACROSS THE FULL PANE  */
.given-info__table {
  width: auto;
  border-collapse: collapse;
  margin: 0.2em 0 0.4em;
}

.given-info__table th {
  text-align: left;
  font-weight: 600;
  padding: 0 56px 5px 0;
  border-bottom: 1px solid var(--table-header-border-color);
}

.given-info__table td {
  text-align: left;
  padding: 4px 56px 4px 0;
  vertical-align: baseline;
}

.given-info__table tr td:last-child,
.given-info__table tr th:last-child {
  padding-right: 0;
}

.given-info__table .given-info__tlabel {
  white-space: nowrap;
}

/* ==================================================
  FLOW TABLE (auto-transposed tall / narrow tables)
  One row per original column: header becomes a row
  label, values flow across and wrap. color_code font
  semantics preserved via inline style.
  ==================================================      */
.flow-table {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: 660px;
  margin: 0.4em auto;
  font-size: 16px;
  color: var(--text-color);
}

.flow-table__row {
  display: flex;
  gap: 18px;
  align-items: baseline;
}

.flow-table__key {
  flex: 0 0 auto;
  min-width: 2.4em;
  font-weight: 600;
  text-align: right;
}

.flow-table__vals {
  flex: 1;
  line-height: 1.7;
}

/* ==================================================
  MATPLOTLIB FIGURE
  ==================================================      */

.fig-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
}

.fig-image {
  display: block;
  margin: auto;
  padding: 5px;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border: 0.1px solid #333;
  border-radius: 0;
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
                        UTILITY STYLES
   ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */

/* ==================================================
    POPOVER
   ================================================== */

.popover-style.popover {
  background-color: var(--popover-bg-color) !important;
  border: 1px solid var(--popover-border-color) !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  padding: 0 !important;
}

.popover-style .popover-body {
  background: transparent !important;
  color: var(--popover-text-color) !important;
  padding: 0.4rem 0.65rem;
  font-size: 0.82rem;
}

.popover-style .popover-arrow::before,
.popover-style .popover-arrow::after {
  border-color: transparent !important;
}

/*  ARROW FILL — PER PLACEMENT  */
.popover-style.bs-popover-bottom .popover-arrow::after {
  border-bottom-color: var(--popover-bg-color) !important;
}

.popover-style.bs-popover-top .popover-arrow::after {
  border-top-color: var(--popover-bg-color) !important;
}

.popover-style.bs-popover-start .popover-arrow::after {
  border-left-color: var(--popover-bg-color) !important;
}

.popover-style.bs-popover-end .popover-arrow::after {
  border-right-color: var(--popover-bg-color) !important;
}

/*  ARROW BORDER — PER PLACEMENT  */
.popover-style.bs-popover-bottom .popover-arrow::before {
  border-bottom-color: var(--popover-border-color) !important;
}

.popover-style.bs-popover-top .popover-arrow::before {
  border-top-color: var(--popover-border-color) !important;
}

.popover-style.bs-popover-start .popover-arrow::before {
  border-left-color: var(--popover-border-color) !important;
}

.popover-style.bs-popover-end .popover-arrow::before {
  border-right-color: var(--popover-border-color) !important;
}

/* ==================================================
    MATHJAX TABLES
   ================================================== */

/*  TABLE LINES (SVG STROKES)  */
mjx-container svg line,
mjx-container svg rect,
mjx-container svg path[stroke] {
  stroke: var(--table-border-color) !important;
  stroke-width: 1px !important;
  stroke-opacity: 0.5 !important;
  vector-effect: non-scaling-stroke !important;
}

/*  TABLE CELL PADDING  */
mjx-mtd {
  padding: 0.3em 0.6em 0.3em 0.6em !important;
}

/*  ALIGNED ENVIRONMENT — MATHJAX = SPACING  */
mjx-mtd[style*="text-align: right"],
mjx-mtd[style*="text-align: left"] {
  padding: 0.3em 0 !important;
}

/*  ALIGN ENVIRONMENT LINE SPACING  */
mjx-mtr {
  padding-top: 0.25em !important;
  padding-bottom: 0.25em !important;
}

mjx-mtable {
  white-space: nowrap !important;
}

/* ==================================================
    MATHJAX EQUATIONS - PREVENT PAGE BREAKS
   ================================================== */

/*  PREVENT ALL MATHJAX CONTAINERS FROM BREAKING  */
mjx-container,
.MJXc-display,
.mjx-chtml,
.mjx-math,
.MathJax,
.MathJax_Display {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

/*  DISPLAY EQUATIONS - SCROLLABLE + KEEP WITH SURROUNDING CONTENT  */
mjx-container[jax="CHTML"][display="true"] {
  display: block !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-width: 100% !important;
  page-break-before: avoid !important;
  break-before: avoid !important;
  page-break-after: avoid !important;
  break-after: avoid !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

/* ==================================================
    HORIZONTAL LINES
   ================================================== */

.hr-top-line {
  margin: 1em 0 0.75em 0;
  padding: 0;
  border: 0.2px solid var(--seperator-color);
}

.hr-inner-heading-line {
  margin: 0.5em 0;
  padding: 0;
  border: None;
}

.hr-inner-line {
  margin: 0.75em 0 0.75em 0;
  padding: 0;
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--seperator-color) 50%, transparent 100%);
}

/* ==================================================
    SCROLLBAR
   ================================================== */

.scrollable-div {
  max-height: calc(100vh - 115px);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-anchor: none;
  scrollbar-gutter: stable;
  scrollbar-color: transparent transparent;
}

.scrollable-div:hover {
  scrollbar-color: #2a2a2a transparent;
}

.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--primary) 35%, transparent),
    color-mix(in srgb, var(--primary) 85%, transparent));
  z-index: 1200;
  transition: width 120ms ease-out;
  pointer-events: none;
}

.scrollable-div::-webkit-scrollbar {
  width: 8px;
}

.scrollable-div::-webkit-scrollbar-track {
  background: inherit;
}

.scrollable-div::-webkit-scrollbar-thumb {
  border-radius: 1px;
  background-color: transparent;
}

.scrollable-div:hover::-webkit-scrollbar-thumb {
  background-color: #3a3a3c;
}

.scrollable-div::-webkit-scrollbar-thumb:hover {
  background-color: #505052;
}

@media (pointer: coarse) {
  .scrollable-div {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /*  TOUCH TARGETS — EVERY PRIMARY CONTROL GETS A ~44px HIT AREA ON TOUCH
      DEVICES. THE VISUAL MARK STAYS SMALL; ONLY THE TAPPABLE REGION GROWS,
      SO DESKTOP (pointer:fine) DENSITY IS UNTOUCHED.  */

  /*  CHECKLIST / DOMAIN ROWS: THE LABEL FILLS THE ROW SO A TAP ANYWHERE
      ON THE ROW TOGGLES (NOT JUST THE 13px BOX).  */
  .section-dropdown-body .form-check {
    min-height: 44px !important;
  }
  .section-dropdown-body .form-check-label {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-height: 44px !important;
  }

  /*  EXPLORER SLIDER THUMB: 13px VISUAL, ~45px INVISIBLE HIT PAD.
      THE PAD IS A ::before ON THE (ABSOLUTELY-POSITIONED) HANDLE, SO TOUCHES
      IN THE PAD STILL TARGET THE HANDLE — NO JS / POSITION CHANGE NEEDED.  */
  .explorer-slider .rc-slider-handle::before,
  .explorer-slider .dash-slider-thumb::before {
    content: "";
    position: absolute;
    inset: -16px;
    border-radius: 50%;
  }

  /*  TEXT-LINK + CHIP + SEND BUTTONS: PAD OUT TO 44px.  */
  .explore-trigger-btn,
  .alpha-preset-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ai-chat-send-button {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /*  16px MINIMUM ON EVERY EDITABLE FIELD — STOPS iOS SAFARI FOCUS-ZOOM.
      THE VIEWPORT ALLOWS PINCH-ZOOM (dash_app.py meta), SO A SUB-16px INPUT
      WOULD AUTO-ZOOM-AND-NOT-ZOOM-BACK ON FOCUS.  */
  .input-line,
  .domain-search-input,
  .ai-chat-input-row .ai-chat-input {   /* (0,2,0) BEATS THE LATER .ai-chat-input !important RULE */
    font-size: 16px !important;
  }
}

/* ==================================================
    HIDDEN UTILITY
   ================================================== */

.hidden {
  display: none !important;
}

/* ==================================================
    SCREEN SIZE BREAKPOINTS
   ================================================== */

body::before {
  display: none;
  content: "xs";
}

@media (min-width: 576px) {
  body::before {
    content: "sm";
  }
}

@media (min-width: 768px) {
  body::before {
    content: "md";
  }
}

@media (min-width: 992px) {
  body::before {
    content: "lg";
  }
}

@media (min-width: 1200px) {
  body::before {
    content: "xl";
  }
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
                        AI CHAT ASSISTANT STYLES
   ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */

/* AI CHAT COLUMN - RESIZABLE SIDEBAR (FIXED POSITION) */
.ai-chat-column {
  position: fixed;
  right: 0;
  top: 60px;
  background-color: var(--solution-bg-color);
  border-left: var(--sidebar-border);
  height: calc(100vh - 60px);
  overflow: hidden;
  transition: opacity 0.3s ease, filter 0.3s ease !important;
}

/*  FOCUS MODE — AI CHAT MUTED AFTER SOLVE  */
.focus-mode .ai-chat-column {
  opacity: 0.4 !important;
  filter: grayscale(50%) !important;
}

.focus-mode .ai-chat-column:hover,
.focus-mode .ai-chat-column:focus-within {
  opacity: 1 !important;
  filter: grayscale(0%) !important;
}

/* AI CHAT COLLAPSE - FULL HEIGHT FLEX CONTAINER */
.ai-chat-collapse {
  height: 100%;
}

.ai-chat-collapse.show {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}

/*  BOOTSTRAP COLLAPSE INNER WRAPPER  */
#ai_chat_collapse_id>div {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* HEADER ROW WITH CLOSE BUTTON */
.ai-chat-header-row {
  padding: 10px 12px;
  background-color: var(--sidebar-bg-color) !important;
  border-bottom: 1px solid var(--seperator-color);
  margin: 0 !important;
  flex-shrink: 0;
}

.ai-chat-header-content {
  padding: 0 !important;
}

.ai-chat-header-row h5 {
  color: var(--text-color) !important;
  font-size: 0.95rem !important;
  margin-bottom: 0 !important;
}

.ai-chat-header-row .text-muted {
  color: #777 !important;
  font-size: 0.75rem !important;
}

.ai-chat-close-button {
  color: var(--text-color) !important;
  padding: 2px 6px !important;
  border: none !important;
  background: none !important;
  font-size: 0.9rem;
}

.ai-chat-close-button:hover {
  color: var(--primary) !important;
}

/* MESSAGES CONTAINER */
.ai-chat-messages {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: var(--sidebar-bg-color) !important;
}

/* INDIVIDUAL MESSAGES */
.user-message {
  background-color: var(--primary);
  color: #ffffff;
  padding: 8px 10px;
  border-radius: 8px;
  margin-left: auto;
  max-width: 85%;
  align-self: flex-end;
  word-wrap: break-word;
  line-height: 1.4;
  font-size: 0.85rem;
}

.ai-message {
  background-color: var(--input-surface-color);
  color: var(--text-color) !important;
  padding: 8px 10px;
  border-radius: 8px;
  max-width: 95%;
  align-self: flex-start;
  border-left: 2px solid var(--primary);
  word-wrap: break-word;
  line-height: 1.4;
  font-size: 0.85rem;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.ai-message i {
  color: var(--primary);
  margin-right: 0;
  flex-shrink: 0;
}

.ai-message span {
  color: var(--text-color) !important;
}

/* INPUT ROW */
.ai-chat-input-row {
  padding: 12px;
  background-color: var(--sidebar-bg-color) !important;
  border-top: 1px solid var(--seperator-color);
  margin: 0 !important;
  gap: 6px;
  flex-shrink: 0;
}

.ai-chat-input {
  background-color: var(--input-surface-color) !important;
  border: 1px solid var(--seperator-color) !important;
  color: var(--text-color) !important;
  padding: 6px 10px !important;
  font-size: 0.85rem !important;
}

.ai-chat-input::placeholder {
  color: #999 !important;
}

.ai-chat-input:focus {
  border-color: #0066cc !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25) !important;
}

.ai-chat-send-button {
  padding: 6px 12px !important;
}

.ai-chat-send-button:hover {
  opacity: 0.8;
}

/* LOADING STATE */
.ai-message.loading {
  opacity: 0.6;
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
                        MOBILE STYLES (max-width: 768px)
   ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */

@media (max-width: 768px) {

  /* SCROLLING */
  .scrollable-div {
    -webkit-overflow-scrolling: touch;
  }

  /* NAVBAR STAYS VISIBLE ON MOBILE */
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1100;
    min-height: 54px;          /* MOBILE STAYS COMPACT (matches the mobile content calcs) */
    border-bottom: none !important;
  }

  /*  ANY VISIBLE SIDEBAR COLUMN TAKES FULL SCREEN ON MOBILE — STOPS ABOVE
      THE BOTTOM TAB BAR. KEYED ON :not(.d-none) RATHER THAN .sidebar-mobile-full
      SO IT'S FULL-SCREEN EVEN IF THE size() CALLBACK BRIEFLY PICKS THE DESKTOP
      BRANCH (col-3) BEFORE THE MEASURED WIDTH ARRIVES — NO NARROW FLASH.      */
  /*  INPUT SHEET — A BOTTOM-SHEET OVERLAY (NOT A FULL-SCREEN TAKEOVER), SO THE
      SOLUTION STAYS VISIBLE (DIMMED) BEHIND IT. SITS BELOW THE NAVBAR + TAB BAR
      (z 1100) SO THE TOGGLE + TABS STAY BRIGHT AND TAPPABLE TO CLOSE / SWITCH —
      NO TRAP, NO EXTRA JS NEEDED.  */
  /*  FULL-HEIGHT BY DEFAULT — FILLS FROM JUST UNDER THE NAVBAR DOWN TO THE
      BOTTOM TAB BAR. THE OLD 84dvh BOTTOM-SHEET LEFT THE TOP ~16dvh SHOWING
      THE EMPTY SOLUTION SPLASH DIMMED BY THE ::before BACKDROP, WHICH READ AS
      A BLACK BAND UNDER THE NAVBAR IN EVERY EMPTY / PRACTICE / AI STATE. THE
      PEEK SHEET IS REVIVED ONLY WHEN A SOLUTION ACTUALLY EXISTS (SEE BELOW).  */
  .sidebar-column:not(.d-none) {
    position: fixed !important;
    top: var(--navbar-h);
    bottom: var(--mobile-tabbar-h);
    left: 0;
    width: 100vw !important;
    height: auto !important;
    z-index: 1040;
    background-color: var(--sidebar-bg-color) !important;
  }

  /* SHEET INNER — COLLAPSE FILLS THE PANEL; CONTENT SCROLLS, FOOTER STICKS. */
  .sidebar-column:not(.d-none) .sidebar-collapse {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
  }

  /*  PEEK BOTTOM-SHEET — REVIVED ONLY IN THE SOLVER/STUDIO ONCE A SOLUTION IS
      RENDERED (#solution_column_id.solution-content), SO THE RESULT STAYS
      VISIBLE (DIMMED) ABOVE THE SHEET WHILE INPUTS ARE RE-EDITED. THIS IS THE
      ORIGINAL D4/D5 BEHAVIOUR, NOW SCOPED TO WHERE THERE'S SOMETHING TO PEEK.  */
  .main-container:has(#solver_panel_div_id:not(.panel--hidden)):has(#solution_column_id.solution-content) .sidebar-column:not(.d-none) {
    top: auto;
    max-height: 84dvh;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);
  }
  .main-container:has(#solver_panel_div_id:not(.panel--hidden)):has(#solution_column_id.solution-content) .sidebar-column:not(.d-none) .sidebar-collapse {
    height: auto !important;
    max-height: 84dvh;
  }
  .main-container:has(#solver_panel_div_id:not(.panel--hidden)):has(#solution_column_id.solution-content) .sidebar-column:not(.d-none)::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: -1;
  }

  /* SCROLLABLE SIDEBAR CONTENT - LEAVE ROOM FOR SOLVE BUTTON */
  .sidebar-column:not(.d-none) .scrollable-div {
    flex: 1;
    overflow-y: auto;
    max-height: none !important;
    padding-top: 0.5em !important;
    -webkit-overflow-scrolling: touch;
  }

  /*  ACTION FOOTER ON MOBILE — THE SOLVE CTA SITS JUST ABOVE THE BOTTOM
      TAB BAR. GIVE IT REAL SIDE GUTTERS + A CLEAR GAP ABOVE THE BAR SO IT
      READS AS A FLOATING ACTION, NOT A STRIP FLUSH TO THE SCREEN EDGES.  */
  .sidebar-column:not(.d-none) .sidebar__footer {
    padding: 0.7em 0.9rem 1.1em 0.9rem;
  }

  /* SOLUTION COLUMN ADJUSTMENTS FOR MOBILE — DROP THE 3REM DESKTOP PADDING
     (THE !important BASE RULE NEEDS !important HERE TO BE OVERRIDDEN), SO THE
     SOLUTION CONTENT USES THE FULL PHONE WIDTH INSTEAD OF ~78%.            */
  .solution-column-default,
  .solution-content {
    width: 100% !important;
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important;
  }

  /*  SOLUTION HEADER ON MOBILE — TIME LEFT / ICONS RIGHT  */
  .solution-header-div {
    padding: 0 0.5em;
  }

  /*  MOBILE: NO 3REM PADDING ON THE SOLUTION COLUMN, SO THE TOGGLE
      DOESN'T NEED THE NEGATIVE MARGIN COMPENSATION.                */
  .rail-toggle-button {
    margin-right: 0 !important;
  }

  /*  COLUMN PADDING NOW PROVIDES THE SIDE INSET — KEEP solution-div FLUSH
      HORIZONTALLY SO CONTENT ISN'T DOUBLE-INDENTED.                       */
  .solution-div {
    margin: 0 0 1em 0;
  }

  /* MAIN CONTAINER ADJUSTMENTS FOR MOBILE — LEAVE ROOM FOR THE BOTTOM TAB BAR */
  .main-container {
    margin-top: 54px;
    height: calc(100vh - 54px);
    height: calc(100dvh - 54px);
    overflow-y: auto;
    padding-bottom: var(--mobile-tabbar-h);
  }

  /* AI CHAT ADJUSTMENTS FOR MOBILE — STOPS ABOVE THE BOTTOM TAB BAR */
  .ai-chat-column {
    top: 54px;
    height: calc(100vh - 54px - var(--mobile-tabbar-h));
    height: calc(100dvh - 54px - var(--mobile-tabbar-h));
    z-index: 1050;
  }

  .ai-chat-collapse {
    width: 100vw;
  }

  .user-stats-modal .modal-dialog,
  .about-modal .modal-dialog {
    margin: 0.5em;
  }

  /* HIDE NAVBAR BUTTON TEXT ON MOBILE, SHOW ICON ONLY */
  .navbar__btn-text {
    display: none !important;
  }

  .navbar-right-block .me-2 {
    margin-right: 0 !important;
  }
}

/* ==================================================================
    MOBILE NAVBAR  —  ANDROID-STYLE BOTTOM TAB BAR.
    THE TOP BAR KEEPS THE LOGO + RIGHT-HAND CONTROLS; THE PILLAR SWITCHER
    (SOLVER / PRACTICE / STUDIO) DROPS OUT OF FLOW AND PINS TO THE BOTTOM
    OF THE VIEWPORT AS A FIXED ICON-OVER-LABEL NAV. SAME MARKUP + WIRING
    AS THE DESKTOP CENTER PILLARS — ONLY THE LAYOUT MOVES. THE RETIRED
    --mobile-tabbar-h IS REVIVED SO EVERY MOBILE HEIGHT CALC LEAVES ROOM.
   ================================================================== */
@media (max-width: 768px) {
  /*  REVIVE THE BAR HEIGHT (INCLUDES THE HOME-INDICATOR SAFE AREA) SO THE
      SIDEBAR / SOLUTION / AI-CHAT CALCS STOP ABOVE THE BAR.  */
  .dark-main,
  .light-main { --mobile-tabbar-h: calc(56px + env(safe-area-inset-bottom, 0px)); }

  /*  TOP BAR: PILLARS GONE FROM FLOW, RAILS FLOW NATURALLY (space-between).  */
  .navbar-left-block,
  .navbar-right-block { flex: 0 1 auto; min-width: 0; }

  /*  THE BAR ITSELF — FIXED TO THE BOTTOM EDGE, ABOVE EVERYTHING.  */
  .navbar-center-block {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--mobile-tabbar-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background-color: var(--navbar-bg-color);
    border-top: 1px solid var(--seperator-color);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.28);
    z-index: 1100;
  }

  .navbar-center-block .navbar__pillars,
  .navbar-center-block .navbar__pillars .tabs {
    width: 100%;
    height: 100%;
    gap: 0;
  }

  /*  EACH TAB FILLS AN EQUAL SHARE (5 ON MOBILE, INCLUDING THE AI PILLAR),
      ICON STACKED OVER LABEL.  */
  .navbar__pillars .tab {
    flex: 1 1 0;
    flex-direction: column;
    gap: 0.18em;
    padding: 0.3em 0.2em 0.1em;
  }

  .navbar__pillars .tab .tab__icon { font-size: 21px; }

  .navbar__pillars .tab .tab__label {
    display: block;
    width: auto;
    font-size: 0.66rem;
    line-height: 1;
  }

  /*  ACTIVE INDICATOR FLIPS TO A TOP PILL (THE BAR'S TOP EDGE), SPANNING
      THE TAB WITH A SMALL INSET — REPLACES THE DESKTOP BOTTOM UNDERLINE.  */
  .navbar__pillars .tab::after {
    top: 0;
    bottom: auto;
    left: 0.9em;
    right: 0.9em;
    height: 3px;
    border-radius: 0 0 3px 3px;
  }
}

/* ==================================================================
    MOBILE — INLINE MATH OVERFLOW
    Long inline data runs ($1400, 1600, ...$) used to overflow the
    viewport and get clipped mid-number. Cap their width and let an
    oversized run scroll horizontally. Small inline symbols (x, ρ, α)
    fit, so no scrollbar appears on them.
   ================================================================== */
@media (max-width: 768px) {
  /*  .katex IS A BARE <span> (display:inline) BY DEFAULT, SO max-width /
      overflow ARE IGNORED — PROMOTE TO inline-block SO AN OVERSIZED RUN
      IS CAPPED AND SCROLLS. BASELINE STAYS PUT FOR SMALL INLINE SYMBOLS. */
  .solution-div .katex {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    vertical-align: middle;
  }
  /*  DISPLAY MATH: RESET THE INLINE OVERRIDE ABOVE, AND LET A LONG
      SINGLE-LINE BLOCK (e.g. (x1,y1), (x2,y2), ... WITH NO \\ BREAKS)
      SCROLL HORIZONTALLY INSTEAD OF CLIPPING OFF THE RIGHT EDGE.       */
  .solution-div .katex-display {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .solution-div .katex-display > .katex {
    display: block;
    vertical-align: baseline;
  }
}

/* ==================================================================
    PLOTLY FIGURES — MOBILE WIDTH
    Responsive plots (scatter) fill the column; fixed-pixel static
    plots (distribution curves, pies) stay swipeable instead of
    breaking the page.
   ================================================================== */
.restatica-plot {
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .restatica-plot { max-width: 100%; }

  /*  FIXED-PIXEL CURVES: SWIPE INSTEAD OF OVERFLOWING THE PAGE  */
  .restatica-plot-frame,
  .solution-div div:has(> .js-plotly-plot) {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
}

/*  ROADMAP BUTTON ROW — SITS BETWEEN THE H1 TITLE AND THE FIRST SECTION  */
.solution-heading-group {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05em;
  margin: 1.2em 0 0.8em 0;
  text-align: center;
}

/*  RENDER TIME — PINNED TOP-LEFT, TITLE STAYS CENTERED  */
.render-time-style {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-muted, #8a8a8a);
  opacity: 0.75;
}

.render-time-icon {
  font-size: 0.68rem;
  line-height: 1;
}

.roadmap-link-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -0.25em 0 0 0;
}

.roadmap-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--quinary, #B87DA8);
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: color 0.15s ease;
}

.roadmap-link:hover,
.roadmap-link:focus {
  color: #E0B8D3;
  outline: none;
}

.roadmap-link-icon {
  font-size: 0.9rem;
  line-height: 1;
}

.roadmap-link-label {
  border-bottom: 1px dashed color-mix(in srgb, var(--quinary, #B87DA8) 60%, transparent);
  padding-bottom: 1px;
}

/*  ROADMAP IN-WORKSPACE COLUMN — LIVES INSIDE #main_div_id, SO IT INHERITS
    THE THEME TOKENS NATIVELY (NO PORTAL, NO HARDCODED PALETTE). "View
    learning path" ADDS .main-container--roadmap TO THE ROW: HIDE SOLUTION +
    RIGHT-RAIL, REVEAL THIS COLUMN. THE SIDEBAR STAYS (CHANGE TEST IN PLACE). */
#roadmap_panel_id { display: none; }

.main-container--roadmap #solution_column_id,
.main-container--roadmap #right_rail_column_id {
  display: none !important;
}

.main-container--roadmap #roadmap_panel_id {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  width: auto !important;
  max-width: none !important;
}

.roadmap-column {
  background: var(--solution-bg-color);
  min-height: 0;
  padding: 0;
}

/*  HEADER — BACK BUTTON (LEFT) + CENTERED TITLE  */
.roadmap-modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.7em 1em;
  border-bottom: 1px solid var(--seperator-color);
  background: transparent;
}

.roadmap-back {
  position: absolute;
  left: 0.9em;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.32em 0.7em;
  background: transparent;
  border: 1px solid var(--seperator-color);
  border-radius: var(--control-radius, 3px);
  color: var(--text-muted-color);
  font-size: 0.82rem;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.roadmap-back:hover {
  color: var(--text-color);
  border-color: color-mix(in srgb, var(--primary) 50%, var(--seperator-color));
}

.roadmap-modal-title {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text-color);
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.roadmap-modal-title .bi {
  font-size: 1.05rem;
  color: var(--primary);
}

/*  BODY — FILLS THE COLUMN AND SCROLLS INTERNALLY  */
.roadmap-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.5em 1.3em 1.8em 1.3em;
}

/*  ─────────────────────────  SERPENTINE PATH  ─────────────────────────
    THE ROADMAP READS AS A WINDING JOURNEY AND TEACHES: STOPS ARE TEACHING
    CARDS (BUBBLE + TITLE + DESC) THAT SNAKE LEFT->RIGHT THEN RIGHT->LEFT
    DOWN A 2-COLUMN GRID. THE BUILDER PLACES EACH STOP (gridColumn/gridRow)
    AND TAGS THE PATH SEGMENT TO THE NEXT. THE PATH IS DRAWN BEHIND THE
    OPAQUE CARDS (z-index:-1) SO IT SHOWS ONLY IN THE GAPS AND NEVER CROSSES
    TEXT. GEOMETRY: BUBBLE 44px STARTS AT 22px PADDING SO ITS CENTER SITS AT
    y=44px; THE 18px GRID GAP IS WHAT EACH CONNECTOR REACHES ACROSS.       */
.roadmap-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
  row-gap: 24px;
  max-width: 680px;       /*  CENTER THE PATH IN THE NOW-WIDE PANEL  */
  margin: 0 auto;
  padding-top: 0.3em;
}

.roadmap-stop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 12px 14px 12px;
  background: color-mix(in srgb, var(--phase, var(--primary)) 8%, var(--solution-bg-color, #1A1A1A));
  border: 1px solid color-mix(in srgb, var(--phase, var(--primary)) 22%, transparent);
  border-radius: 10px;
}

/*  THE PATH — DRAWN ON TOP (z-index:3) IN A BRIGHT PHASE COLOR. THE HORIZONTAL
    LINK (::before) RUNS BUBBLE-TO-BUBBLE ACROSS THE EMPTY CARD-TOP BAND + THE
    GAP; THE OPAQUE BUBBLES (z-index:5) MASK ITS ENDS, SO IT APPEARS TO LEAVE
    ONE BUBBLE AND ENTER THE NEXT. THE U-TURN (::after) IS A TICK IN THE ROW
    GAP UNDER THE BUBBLE COLUMN. NEITHER CROSSES THE CARD TEXT (IT SITS LOWER). */
.roadmap-stop::before,
.roadmap-stop::after {
  content: "";
  position: absolute;
  z-index: 3;
  background: var(--phase, var(--primary));
  border-radius: 4px;
}
.roadmap-conn-right::before { top: 41.5px; left: 50%;  width: calc(100% + 24px); height: 5px; }
.roadmap-conn-left::before  { top: 41.5px; right: 50%; width: calc(100% + 24px); height: 5px; }
.roadmap-conn-down::after   { top: 100%; left: calc(50% - 2.5px); width: 5px; height: 24px; }

/*  STOP BUBBLE — PHASE-COLORED RING + ICON. SITS ABOVE THE PATH (z-index:5)
    WITH AN OPAQUE FILL, SO THE HORIZONTAL LINK APPEARS TO EMERGE FROM ITS EDGE. */
.roadmap-bubble {
  position: relative;
  z-index: 5;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--phase, var(--primary)) 18%, var(--solution-bg-color, #1A1A1A));
  border: 2px solid var(--phase, var(--primary));
  transition: transform 0.12s ease;
}

.roadmap-bubble .bi {
  font-size: 1.05rem;
  color: var(--phase, var(--primary));
}

.roadmap-stop:hover .roadmap-bubble {
  transform: translateY(-2px);
}

/*  STOP TITLE — THE STEP NAME  */
.roadmap-stop-title {
  margin-top: 9px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.2px;
  color: var(--text-color);
}

/*  STOP DESC — THE TEACHING LINE: WHAT THIS STEP DOES. FULL TEXT; INLINE
    $...$ IS RENDERED BY katex_config.js ON .roadmap-modal-body.          */
.roadmap-stop-desc {
  margin-top: 5px;
  font-size: 0.66rem;
  line-height: 1.42;
  color: var(--text-muted-color, #8A8A8A);
}

/*  PHASE FLAG — RIDES IN THE TOP BAND OF THE FIRST STOP OF EACH PHASE,
    ABSOLUTELY POSITIONED SO IT NEVER SHIFTS THE BUBBLE BASELINE.         */
.roadmap-flag {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--phase, var(--primary));
}

/*  =================================================================
    TABLET ADJUSTMENTS
    ================================================================= */
@media (max-width: 768px) {
  .roadmap-modal-title {
    font-size: 1.02rem;
    white-space: normal;
    text-align: center;
    max-width: 72%;
  }

  .roadmap-modal-header {
    padding: 0.7em 1em;
  }
}

/*  =================================================================
    MOBILE ADJUSTMENTS
    ================================================================= */
@media (max-width: 480px) {
  /*  PHONE: GIVE THE PATH THE FULL WIDTH — DROP THE SIDEBAR WHILE READING.  */
  .main-container--roadmap #sidebar_column_id { display: none !important; }

  .roadmap-modal-header {
    padding: 0.6em 0.75em;
  }

  .roadmap-modal-title {
    font-size: 0.9rem;
    white-space: normal;
    text-align: center;
    max-width: 66%;
  }

  .roadmap-link {
    font-size: 0.78rem;
  }

  .roadmap-modal-body {
    padding: 0.85em 0.55em 1.2em 0.55em;
  }

  /*  TIGHTER SNAKE: BUBBLE 40px STARTS AT 20px PADDING -> CENTER y=40px.  */
  .roadmap-steps { column-gap: 14px; row-gap: 16px; }
  .roadmap-stop { padding: 20px 9px 12px 9px; }
  .roadmap-bubble { width: 40px; height: 40px; }
  .roadmap-bubble .bi { font-size: 0.95rem; }
  .roadmap-conn-right::before,
  .roadmap-conn-left::before { top: 37.5px; width: calc(100% + 14px); }
  .roadmap-conn-down::after  { top: 100%; height: 16px; }
  .roadmap-stop-title { font-size: 0.68rem; }
  .roadmap-stop-desc { font-size: 0.61rem; }
  .roadmap-flag { font-size: 0.5rem; letter-spacing: 0.5px; }
}

/* ════════════════════════════════════════════════════════════════════════════════
   TEST STATISTIC EXPLORER — INTERACTIVE STEP
   ════════════════════════════════════════════════════════════════════════════════ */

.explorer-formula-inline {
  font-size: 1.05em;
  margin-right: 0.15em;
}

.explorer-graph {
  width: 100%;
}

.explorer-readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  padding: 0.2em 0.4em 0.1em;
  border-bottom: 1px solid var(--seperator-color);
  margin-bottom: 0.4em;
}

.explorer-readout-line {
  display: flex;
  align-items: center;            /* CENTRE SO THE DASHED DIVIDER LINES UP WITH THE FRACTIONS */
  justify-content: center;
  flex-wrap: wrap;                /* COLLAPSES TO TWO STACKED LINES ON NARROW PANELS */
  gap: 0.15em 0.7em;
  font-size: 0.95em;
}

/*  SPLIT BETWEEN THE SYMBOLIC AND SUBSTITUTED HALVES — A DASHED VERTICAL
    RULE. PAINTED AS A REPEATING GRADIENT ON A 1px-WIDE FLEX ITEM SO IT
    RENDERS RELIABLY (THE ZERO-WIDTH border-left WAS TOO FAINT TO SEE)
    WHILE STILL YIELDING VISUALLY TO THE COLOURED MATH.  */
.explorer-readout-divider {
  align-self: stretch;
  flex: 0 0 auto;
  width: 1.5px;
  min-height: 2.6em;
  margin: 0 0.35em;
  border-radius: 1px;
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--text-color) 60%, transparent) 0 5px,
    transparent 5px 10px
  );
}

.explorer-token-op {
  color: var(--text-muted-color);
}

.explorer-z-value {
  font-weight          : 600;
  font-variant-numeric : tabular-nums;
  font-size            : 1em;
}

/*  INTERPRETATION BLOCK — RELOCATED OUT OF THE PLOT TO SIT ABOVE THE
    SAMPLE-MEAN SLIDER. PROBABILITY HEADLINE (GRAPH BLUE) OVER A DIMMER,
    SMALLER |z| STATUS LINE — SAME HUES/SIZES AS THE OLD PLOT ANNOTATION. */
.explorer-interpretation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 2px 0 12px 0;
}

.explorer-interp-prob {
  color                : #5DADE2;
  font-size            : 13px;
  font-weight          : 600;
  font-variant-numeric : tabular-nums;
  letter-spacing       : 0.01em;
}

.explorer-interp-status {
  color                : #8A8F98;
  font-size            : 10.5px;
  font-variant-numeric : tabular-nums;
}

/*  EXPLORER SLIDER BASE — DASH 4 + LEGACY SELECTORS  */
.explorer-slider .dash-slider-track,
.explorer-slider .rc-slider-rail {
  background-color: color-mix(in srgb, var(--text-color) 10%, transparent);
  height: 3px;
}

.explorer-slider .dash-slider-range,
.explorer-slider .rc-slider-track {
  height: 3px;
}

.explorer-slider [role="slider"],
.explorer-slider .rc-slider-handle,
.explorer-slider .dash-slider-thumb {
  width: 13px;
  height: 13px;
  opacity: 1;
  box-shadow: none;
  border-width: 2px;
}

@media (max-width: 480px) {
  .explorer-formula-inline {
    font-size: 0.92em;
  }

  .explorer-readout-line {
    font-size: 0.88em;
  }

  .explorer-z-value {
    font-size: 0.98em;
  }
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
                        DIFFICULTY SEGMENTED CONTROL
   ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */

/*  PRACTICE SEGMENTED CONTROLS (Mode / Difficulty) REUSE THE SOLVER'S
    .input-type-pill (Example/Custom toggle); only the outer margin lives here.  */
.practice-difficulty-group {
  margin: 0.7em 0;
  padding: 0;
}

/* ════════════════════════════════════════════════════════════════════
                    SIDEBAR  —  BEM ARCHITECTURE
                    structure / tabs / panel / block / field / action
   ════════════════════════════════════════════════════════════════════ */

/* ────────────────────  SIDEBAR SHELL  ──────────────────── */
.sidebar__body {
  flex: 1 1 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /*  Numerals align by digit (90/95/99, α = 0.05, sample sizes, etc.) —
      the difference reads as a scientific instrument, not body text.        */
  font-variant-numeric: tabular-nums;
}

.sidebar__footer {
  flex-shrink: 0;
  margin: 0.8em 0 0 0;
  padding: 0 0.5em 0.8em 0.5em;
  background-color: var(--sidebar-bg-color);
}

/*  PRE-FLIGHT VALIDATION NOTICE — SITS ABOVE THE SOLVE BUTTON. STAYS
    QUIET (NO BRIGHT BG, NO BORDER FLOOD); USES THE THEME'S SEPTENARY
    RED ONLY ON THE ICON AND A HAIRLINE LEFT MARK, KEEPING THE SIDEBAR'S
    INSTRUMENT-PANEL FEEL INSTEAD OF A WEB-FORM ERROR BUBBLE.            */
.solve-error {
  margin: 0 0 0.55em 0;
  padding: 0.5em 0.65em 0.5em 0.7em;
  border-left: 2px solid var(--septenary);
  background-color: color-mix(in srgb, var(--septenary) 8%, transparent);
  border-radius: 3px;
  animation: solve-error-rise 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.solve-error__row {
  display: flex;
  align-items: center;
  gap: 0.55em;
  min-width: 0;
}

.solve-error__icon {
  flex-shrink: 0;
  font-size: 0.95em;
  color: var(--septenary);
}

.solve-error__text {
  font-size: 0.82rem;
  line-height: 1.3;
  color: color-mix(in srgb, var(--text-color) 82%, transparent);
  letter-spacing: 0.01em;
}

@keyframes solve-error-rise {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ────────────────────  TABS  ──────────────────── */
.tabs {
  position: relative;
  display: flex;
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.tab {
  position: relative;
  z-index: 0;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  height: 100%;
  padding: 0 0.6em;
  border: 0;
  background: transparent;
  color: #7A7A82;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', 'Helvetica Neue', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  transition: color 160ms ease, transform 160ms ease;
}

.tab__icon {
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  opacity: 0.6;
  transition: opacity 160ms ease;
}

.tab__label {
  width: 5em;
  text-align: left;
}

.tab:hover {
  color: #FFFFFF;
  transform: translateY(-1px);
}

.tab:hover .tab__icon { opacity: 1; }

.tab:active { transform: translateY(0); }

/*  INACTIVE TABS ARE NEUTRAL/MUTED — ONLY THE ACTIVE TAB CARRIES ITS COLOUR.  */
#sidebar_tab_atlas_id,
#sidebar_tab_solver_id,
#sidebar_tab_practice_id,
#sidebar_tab_studio_id { color: var(--text-muted-color); }

#sidebar_tab_atlas_id.tab--active {
  color: var(--primary);
  font-weight: 600;
}

#sidebar_tab_solver_id.tab--active {
  color: var(--secondary);
  font-weight: 600;
}

#sidebar_tab_practice_id.tab--active {
  color: var(--tertiary);
  font-weight: 600;
}

#sidebar_tab_studio_id.tab--active {
  color: var(--quaternary);
  font-weight: 600;
}

.tab--active .tab__icon { opacity: 1; }

/* ────────────────────  PANEL  ──────────────────── */
.panel {
  animation: panelFadeIn 180ms ease;
}

.panel--hidden { display: none; }

@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ────────────────────  SIDEBAR SECTION  ──────────────────── */
.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: var(--sidebar-gap-block);
  margin: 0 0 0.4em 0;
  padding: 0.4em 0.5em 0.4em 1em;
  position: relative;
}

.sidebar-section:last-child { margin-bottom: 0; }

/*  THE BODY'S TRANSFORM/OPACITY (REQUIRED FOR THE FOLD ANIMATION) CREATES
    A STACKING CONTEXT THAT WOULD TRAP THE OVERLAY DROPDOWN BEHIND LATER
    SIBLING SECTIONS. WHEN A SECTION HOLDS AN OPEN OVERLAY, PROMOTE THE
    SECTION ITSELF SO ITS DROPDOWN PAINTS OVER THE SECTIONS BELOW IT.    */
.sidebar-section:has(.domain-section-dropdown > .collapse.show),
.sidebar-section:has(.domain-section-dropdown > .collapsing),
.sidebar-section:has(.solution-section-dropdown > .collapse.show),
.sidebar-section:has(.solution-section-dropdown > .collapsing),
.sidebar-section:has(.input-source-row.dataset-row > .collapse.show),
.sidebar-section:has(.input-source-row.dataset-row > .collapsing) {
  z-index: 100;
}

.sidebar-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--sidebar-gap-block);
  margin: 0;
  padding: 0 0 0.1em 0;
}

.sidebar-section__body > .formula-dropdown-div:empty {
  display: none;
  margin: 0;
}

.sidebar-section:not(.collapsed) > #input_list_id {
  display: flex;
  flex-direction: column;
  gap: 1.15em;
}

/*  INPUT FIELD — LABEL → HINT → UNDERLINE, STACKED TIGHT. SELF-CONTAINED
    SO IT READS THE SAME IN THE SOLVER LIST AND THE HYPOTHESIS PANEL.
    DROPDOWN / RADIO SUBSECTIONS SHARE THE SAME STACK GEOMETRY.          */
.input-field,
#input_list_id > .sidebar-subsection {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  min-width: 0;
}

.input-field > .input-line {
  width: 75%;
}

.input-field > .input-label {
  margin: 0;
  text-align: left;
}

.input-field > .input-description {
  margin: 0;
}

#input_list_id > .dynamic-table-button-row,
#input_list_id > .dynamic-table-container {
  display: block;
}

/* ────────────────────  SIDEBAR HEADING BLOCK  ──────────────────── */
.sidebar-heading-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease;
}

.sidebar-heading-block:hover {
  background-color: color-mix(in srgb, var(--text-color) 5%, transparent);
}

.sidebar-heading-block:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--text-color) 22%, transparent);
  outline-offset: 1px;
}

.sidebar-heading-title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  padding: 0;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}

.sidebar-heading-title i { margin: 0; }

.sidebar-heading-title .sidebar-section-chevron {
  margin-left: auto;
  font-size: 0.85em;
  opacity: 0.5;
  transition: transform 200ms ease, opacity 120ms ease;
}

.sidebar-heading-block:hover .sidebar-section-chevron {
  opacity: 0.9;
}

.sidebar-section.collapsed .sidebar-section-chevron {
  transform: rotate(180deg);
}

/*  EXAMPLE-MODE BADGE BESIDE A SECTION TITLE — METADATA, NOT A CTA.
    DELIBERATELY UNDER-SPECIFIED VISUALLY: SMALLER THAN THE TITLE, BARELY
    A SURFACE, NEARLY-INVISIBLE BORDER. PRESENCE IS THE SIGNAL.         */
.sidebar-section-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5em;
  padding: 0 4px;
  height: 14px;
  line-height: 14px;
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-color) 55%, transparent);
  background: color-mix(in srgb, var(--text-color) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-color) 14%, transparent);
  border-radius: 3px;
  user-select: none;
  white-space: nowrap;
}

/* ──────────────  ANIMATED COLLAPSE  ──────────────
   MAX-HEIGHT GIVES A SMOOTH TRANSITION WITHOUT NEEDING JS-MEASURED HEIGHTS.
   1200PX CEILING COMFORTABLY FITS THE TALLEST HYPOTHESIS / DATA SECTION;
   THE CUBIC-BEZIER EASE FEELS LIKE A NATURAL FOLD RATHER THAN A LINEAR PULL.
   OVERFLOW STAYS HIDDEN DURING THE FOLD/UNFOLD ANIMATION AND FLIPS TO
   VISIBLE ONCE THE SECTION IS FULLY OPEN, SO ABSOLUTE-POSITIONED OVERLAY
   DROPDOWNS (TEST PICKER, DATASET PICKER, ROADMAP) CAN ESCAPE THE SECTION
   BOUNDS INSTEAD OF BEING CLIPPED BY THIS CLIPPER. */
.sidebar-section > .sidebar-section__body {
  max-height: 1200px;
  opacity: 1;
  transform: translateY(0);
  overflow: visible;
  transition:
    max-height 380ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity   240ms ease,
    transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
    overflow  0s 380ms;
  transition-behavior: allow-discrete;
}

.sidebar-section.collapsed > .sidebar-section__body {
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  overflow: hidden;
  transition:
    max-height 380ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity   240ms ease,
    transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
    overflow  0s 0s;
  transition-behavior: allow-discrete;
}

/* SLIGHT CASCADE — HYP LEADS, DATA TRAILS — KEEPS THE EYE MOVING DOWN */
#hypothesis_section_id > .sidebar-section__body { transition-delay: 60ms; }
#data_section_id       > .sidebar-section__body { transition-delay: 140ms; }

.sidebar-section.collapsed {
  gap: 0;
}

/* ════════════════════════════════════════════════════════════════════
   PROGRESSIVE WORKFLOW MODIFIERS — DRIVEN BY sidebar_collapse.js.
   APPLIED TO ANALYSIS / HYPOTHESIS / DATA / INSIGHTS TO GIVE THE
   SIDEBAR A GUIDED, STEP-BY-STEP CHARACTER WITHOUT TOUCHING LAYOUT.
   ALL HUES INHERIT FROM EACH SECTION'S OWN --accent-color SO THE CUE
   STAYS FAMILY-CONSISTENT WITH ITS HEADING STRIPE.
   ════════════════════════════════════════════════════════════════════ */

/*  is-current-step / is-completed-step / is-softened / is-active-highlight
    ARE PURELY SEMANTIC HOOKS NOW — NO VISUAL EFFECT. PROGRESSION IS
    COMMUNICATED ENTIRELY THROUGH AUTO-EXPANSION OF THE NEXT SECTION.
    THE CLASSES REMAIN SO sidebar_panel.py CAN PRESERVE THEM ACROSS
    RE-RENDERS WITHOUT CHURN.                                          */

.section-locked {
  cursor: not-allowed;
  position: relative;
}

/*  EXAMPLE-MODE LOCK — KEEP CONTENT FULLY READABLE BUT INTERACTION-DEAD.
    NO HOVER STATE CHANGES, NO FOCUS RINGS, NO BORDER ANIMATION. THE
    USER SEES THE EXAMPLE'S VALUES CLEARLY; THE UI JUST DOESN'T
    PRETEND THEY CAN BE EDITED.                                          */
.section-locked .input-line,
.section-locked .input-line:hover,
.section-locked .input-line:focus,
.section-locked .input-line:focus-visible,
.section-locked .stat-card,
.section-locked .stat-card:hover,
.section-locked .alpha-value-input,
.section-locked .alpha-value-input:hover,
.section-locked .alpha-value-input:focus,
.section-locked .alpha-quick-pill,
.section-locked .alpha-quick-pill:hover {
  cursor: not-allowed !important;
  pointer-events: none;
  border-color: color-mix(in srgb, var(--text-color) 10%, transparent) !important;
  box-shadow: none !important;
  transition: none !important;
  caret-color: transparent !important;
}

/*  SELECTED STAT-CARD / ALPHA-PILL INSIDE A LOCKED SECTION KEEPS A
    NEUTRAL ELEVATION — IT'S STILL THE COMMITTED CHOICE, JUST FROZEN.   */
.section-locked .stat-card-radio:checked + .stat-card,
.section-locked .alpha-quick-radio:checked + .alpha-quick-pill {
  border-color: color-mix(in srgb, var(--text-color) 16%, transparent) !important;
}

/*  LOCKED α VALUE INPUT — READABLE, INERT.            */
.section-locked .alpha-value-input {
  pointer-events: none;
  caret-color: transparent !important;
  border-color: color-mix(in srgb, var(--text-color) 10%, transparent) !important;
}

/*  HEADING STAYS CLICKABLE EVEN WHEN THE SECTION IS LOCKED — THE LOCK
    ONLY GATES EDITING INSIDE THE BODY, NEVER COLLAPSE / EXPAND.        */
.section-locked .sidebar-heading-block,
.section-locked .sidebar-heading-block:hover,
.section-locked .sidebar-heading-block:focus,
.section-locked .sidebar-heading-block:focus-visible {
  background-color: transparent;
  cursor: pointer;
}

/* CURSOR-FOLLOWING TIP — DRIVEN BY sidebar_collapse.js. POSITIONED VIA INLINE
   STYLE; FIXED TO VIEWPORT SO IT FOLLOWS THE CURSOR REGARDLESS OF SCROLL.    */
.cursor-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  padding: 3px 8px;
  border-radius: 4px;
  background-color: color-mix(in srgb, var(--text-color) 14%, #14171C);
  color: var(--text-color);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 90ms ease-out;
}

.cursor-tip.is-visible {
  opacity: 1;
}

.sidebar-heading-description {
  margin: 2px 0 0 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text-color) 42%, transparent);
}

/* ────────────────────  SIDEBAR SUBSECTION  ──────────────────── */
.sidebar-subsection {
  display: flex;
  flex-direction: column;
  gap: var(--sidebar-gap-tight);
  margin: 0;
  padding: 0;
}

.input-label {
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--text-color) 72%, transparent);
}

.input-description {
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted-color, #9CA3AF);
}

.input-label + .input-description {
  margin-top: -0.3em;
}

/*  ────────────────  SECTION ACCENT INHERITANCE  ────────────────
    EACH ACCENTED SECTION PUBLISHES ITS OWN --accent-color SO EVERY
    INTERACTION INSIDE (HEADING, CARDS, INPUTS, LABELS, FOCUS RINGS,
    LOCKS) CAN READ FROM ONE VARIABLE INSTEAD OF HARD-CODING A HUE.
    THE HEADING-TITLE RULE BELOW THEN COLLAPSES TO ONE SELECTOR.      */
.sidebar-section.accent-primary    { --accent-color: var(--primary);    }
.sidebar-section.accent-secondary  { --accent-color: var(--secondary);  }
.sidebar-section.accent-tertiary   { --accent-color: var(--tertiary);   }
.sidebar-section.accent-quaternary { --accent-color: var(--quaternary); }
.sidebar-section.accent-quinary    { --accent-color: var(--quinary);    }
.sidebar-section.accent-senary     { --accent-color: var(--senary);     }
.sidebar-section.accent-septenary  { --accent-color: var(--septenary);  }

.sidebar-section[class*="accent-"] .sidebar-heading-title {
  color: var(--accent-color);
}

/* ────────────────────  PRACTICE TOPIC DROPDOWN  ──────────────────── */

.practice-topic-dropdown {
  margin: 0;
  padding: 0;
  border: var(--input-border-line);
  border-radius: var(--control-radius);
  background-color: var(--input-surface-color);
  color: var(--primary);
}

.practice-topic-dropdown * {
  color: var(--primary) !important;
}
/* ────────────────────  FIELD  ──────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sidebar-gap-tight);
  padding: 0;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: var(--sidebar-gap-tight);
  padding: 0;
}
/*  BREATHING ROOM BETWEEN STACKED GROUPS — ON TOP OF THE BODY BLOCK GAP  */
.field-group + .field-group {
  margin-top: 0.65em;
}
.field-group__title {
  margin: 0;
  padding: 0;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-color) 55%, transparent);
}

.formula-dropdown-div:empty {
  display: none;
}

/* ────────────────────  DIVIDER  ──────────────────── */
.divider {
  height: 1px;
  margin: 0.5em 0.5em;
  padding: 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  opacity: 1;
}

/* ────────────────────  ACTION (CTA buttons in footer)  ──────────────────── */
.action {
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  border-radius: 2px;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.action:hover { transform: translateY(-1px); }
.action:active { transform: translateY(0); }

/*  SPLIT TWO-TONE CTA — A SOLID COLOURED ICON BLOCK ON THE LEFT (THE TAB COLOUR
    VIA --cta), LABEL ON A NEUTRAL-DARK FIELD. SEGMENTED, APP-LIKE.  */
.action--primary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #1b1b1b;
  color: #d6d6d6;
  border: 1px solid #2a2a2a;
}

.action--primary .action__icon {
  position: absolute;                               /* LEFT BLOCK — OUT OF FLOW SO THE LABEL CENTRES */
  left: 0;
  top: 0;
  bottom: 0;
  width: 46px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #10130f;                                   /* DARK INK ON THE COLOURED BLOCK */
  /*  MUTED TAB COLOUR — BLEND TOWARD THE DARK FIELD SO THE BLOCK READS CALM,
      NOT NEON, WHILE THE DARK INK GLYPH STAYS LEGIBLE.  */
  background: color-mix(in srgb, var(--cta, var(--primary, #3A8DCC)) 62%, #1b1b1b);
}

/*  SYMMETRIC PAD = BLOCK WIDTH ON BOTH SIDES → LABEL SITS AT THE TRUE CENTRE
    AND NEVER TUCKS UNDER THE BLOCK ON A NARROW BUTTON.  */
.action--primary > span { padding: 0 46px; }
.action--primary:hover { background: #202020; border-color: var(--cta, var(--primary, #3A8DCC)); }
.action--primary:hover > span { color: #f1f1f1; }

/*  PER-BUTTON CTA COLOUR — MATCHES THE NAVBAR TAB OF THE SAME MODE.  */
#solve_button_id              { --cta: var(--secondary); }    /* SOLVER  TAB → secondary (green)  */
#start_practice_button_id     { --cta: var(--tertiary); }     /* PRACTICE TAB → tertiary (orange) */
body.studio-mode #solve_button_id { --cta: var(--quaternary); }   /* STUDIO TAB → quaternary (gold) — same button relabelled "Render Figure" */

.action--accent {
  background-color: #14202E;
  color: #ffffff;
}

.action--accent:hover { background-color: #1C2D40; }

.action__icon { margin-right: 0.5em; }

/*  HIDE DASH DEV-MODE ERROR POPUPS  */
.dash-fe-error,
.dash-error-card,
[class*="dash-fe-error"],
[class*="dash-error-card"],
.plotly-cloud-publish-container,
[class*="plotly-cloud"] { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════════
   DECISION EXPLORER PANEL
   ════════════════════════════════════════════════════════════════════════════ */

/*  EVERY EXPLORER LAUNCH IS A BRACKET-FRAMED MONO BUTTON: [ ⎇ Label ]. THE
    LITERAL BRACKETS ARE THE BUTTON (NO BOX), MAUVE, BRIGHTENING ON HOVER.  */
/*  EVERY EXPLORER LAUNCH IS A QUIET TEXT LINK — GLYPH + LABEL WITH A DASHED
    UNDERLINE UNDER THE LABEL, MIRRORING THE "View learning path" LINK.  */
.explore-trigger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;                /* ANCHOR FOR THE HOVER HINT */
  gap: 0.4em;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--quinary, #B87DA8);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.15s ease;
}
.explore-trigger-btn:hover,
.explore-trigger-btn:focus {
  color: #E0B8D3;
  outline: none;
}
/*  THE INTERACTIVE LABEL CARRIES ITS OWN MEANING — NO HOVER HINT NEEDED.  */
/*  DASHED UNDERLINE UNDER THE LABEL ONLY (THE GLYPH SITS IN .ct-chip).  */
.explore-trigger-btn span:not(.ct-chip) {
  border-bottom: 1px dashed color-mix(in srgb, var(--quinary, #B87DA8) 60%, transparent);
  padding-bottom: 1px;
}
.explore-trigger-btn:hover span:not(.ct-chip),
.explore-trigger-btn:focus span:not(.ct-chip) {
  border-bottom-color: color-mix(in srgb, #E0B8D3 60%, transparent);
}
.explore-trigger-btn .ct-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: inherit;
  font-size: 1.05em;
  line-height: 1;
}
.explore-trigger-btn .bi {
  font-size: 13px;
  margin: 0 !important;             /* OVERRIDE me-2 — gap HANDLES SPACING */
}

/* TITLE ROW — STEP HEADING WITH THE Trace LAUNCH RIGHT BESIDE IT, ON ONE LINE.
   THE HEADING SHRINKS (AND WRAPS ITS OWN TEXT) BEFORE THE BUTTON EVER DROPS. */
.step-title-row {
  display: flex;
  flex-direction: column;             /* TRACE DROPS BELOW THE PROSE, NOT INLINE-RIGHT */
  align-items: flex-start;
  gap: 4px;
}
.step-title-row > :first-child {
  flex: 0 1 auto;
  min-width: 0;
  margin-bottom: 0;
}
.step-title-row > .ct-launch {
  margin: 0;
  flex: 0 0 auto;
}

/* EXPLORER RADIO — DISTRIBUTION / TAIL PICKER CHIPS (CLT, DISTRIBUTION, POWER) */
.explorer-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 4px;
}
.explorer-radio label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 5px 11px;
  border: 1px solid transparent;
  border-radius: 7px;
  background-color: color-mix(in srgb, var(--text-color) 2.5%, transparent);
  color: color-mix(in srgb, var(--text-color) 66%, transparent);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}
.explorer-radio label:hover {
  border-color: color-mix(in srgb, var(--explorer-accent, #5DADE2) 32%, transparent);
  background-color: color-mix(in srgb, var(--text-color) 4%, transparent);
}
.explorer-radio input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.explorer-radio label:has(input[type="radio"]:checked) {
  border-color: color-mix(in srgb, var(--explorer-accent, #5DADE2) 85%, transparent);
  background-color: color-mix(in srgb, var(--explorer-accent, #5DADE2) 15%, transparent);
  color: var(--text-color);
}

.plot-with-explorer-btn,
.formula-with-explorer-btn {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4em;                         /* TIGHT SPACE BETWEEN BUTTON AND GRAPH */
  margin: 0.5em 0;                    /* TIGHT VERTICAL FRAME AROUND THE WRAPPER */
  position: relative;
}
.plot-with-explorer-btn > .js-plotly-plot,
.plot-with-explorer-btn > div > .js-plotly-plot,
.plot-with-explorer-btn > img,
.plot-with-explorer-btn > svg {
  margin-top: -0.4em;
  margin-bottom: -0.4em;
}
.plot-with-explorer-btn > .explore-trigger-btn,
.formula-with-explorer-btn > .explore-trigger-btn {
  position: static !important;
  top: auto !important;
  right: auto !important;
  width: fit-content !important;
  min-width: 0 !important;
  margin: 0 auto !important;          /* HORIZONTAL CENTER */
  align-self: center;
  order: -1;                          /* PULL BUTTON ABOVE THE PLOT/FORMULA */
}
/*  HEADING (the graph title) + A TINY "↗ Interactive Version" LINK TUCKED DIRECTLY
    BENEATH IT — INTEGRATED, NOT A FLOATING CONTROL. STACKED ABOVE THE TITLE-LESS PLOT.  */
.plot-explorer-head {
  order: -1;                          /* ABOVE THE PLOT */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.02em;                        /* TIGHT — THE LINK SITS RIGHT UNDER THE HEADING */
}
.plot-explorer-heading {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-color);
  text-align: center;
}
/*  LAUNCHER — A TINY "↗ Interactive Version" TEXT LINK (NO BOX, NO FRAME).  */
.plot-explorer-head > .explore-trigger-btn {
  font-size: 11.5px;
  font-weight: 400;
  padding: 0;
  border: none;
  gap: 0.25em;
  color: color-mix(in srgb, var(--quinary, #B87DA8) 85%, transparent);
}
.plot-explorer-head > .explore-trigger-btn .ct-chip { display: none; }  /* DROP THE DEFAULT GLYPH */
.plot-explorer-head > .explore-trigger-btn::before {
  content: "\2197";                   /* ↗ NORTH-EAST ARROW */
  font-size: 1.05em;
}
.plot-explorer-head > .explore-trigger-btn span:not(.ct-chip) {
  border-bottom: none;                /* CLEAN TINY LINK — NO DASHED UNDERLINE */
  padding-bottom: 0;
}
.plot-explorer-head > .explore-trigger-btn:hover {
  color: #E0B8D3;
  background: none;
}
/*  A TRIGGER INSIDE THE HEAD SITS IN-FLOW (CENTERED, RIGHT UNDER THE HEADING) —
    THE --floating TOP-RIGHT POSITIONING IS FOR STANDALONE OVERLAYS ONLY.  */
.plot-explorer-head > .explore-trigger-btn--floating {
  position: static;
  top: auto;
  right: auto;
  margin: 0 auto;
  z-index: auto;
}
@media (max-width: 720px) {
  .plot-with-explorer-btn,
  .formula-with-explorer-btn {
    gap: 0.35em;
    margin: 0.4em 0;
    padding-inline: 8px;
  }
  .plot-with-explorer-btn > .explore-trigger-btn,
  .formula-with-explorer-btn > .explore-trigger-btn {
    width: 100% !important;
  }
}

/*  CRITICAL-VALUE EXPLORER — α PRESET CHIPS ROW UNDER THE SLIDER.
    QUICK JUMP TO CONVENTIONAL α VALUES (0.001 / 0.01 / 0.05 / 0.10).
    SAME ACCENT FAMILY AS THE SLIDER ITSELF (GOLD), QUIET BY DEFAULT.  */

#critical_value_explorer_panel .dep-slider-block {
  margin-bottom: 0.2em;
}
#critical_value_explorer_panel .dep-slider-block .dep-slider-track-wrap {
  padding: 6px 0.2em 14px 0.2em;
}
.alpha-presets {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin: -0.2em 0 0.4em 0;          /* PULL UP CLOSER TO THE SLIDER ABOVE */
  flex-wrap: wrap;
}
.alpha-presets-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--text-color) 45%, transparent);
}
.alpha-presets-row {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.alpha-preset-btn {
  padding: 3px 11px;
  min-width: 0;
  background: transparent;
  border: 1px solid color-mix(in srgb, #d54c4c 42%, transparent);
  border-radius: 4px;
  color: color-mix(in srgb, #d54c4c 88%, transparent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}
.alpha-preset-btn:hover {
  color: #ffb0b0;
  border-color: color-mix(in srgb, #d54c4c 72%, transparent);
}
.alpha-preset-btn:active {
  color: #ffffff;
}
.alpha-preset-btn:focus-visible {
  outline: none;
  color: #ffb0b0;
  border-color: color-mix(in srgb, #d54c4c 85%, transparent);
}
.alpha-preset-btn--active {
  color: #ffffff;
  background: transparent;
  border: 1px solid #d54c4c;
  font-weight: 700;
  text-shadow: none;
  box-shadow: none;
}
.alpha-preset-btn--active:hover {
  color: #ffffff;
  border-color: #d54c4c;
  background: transparent;
}


/*  CRITICAL VALUE EXPLORER — NEW LAYOUT (FLAT, NO CARD CHROME)
    STATS SUMMARY ROW: 4 EVENLY-SPACED COLUMNS BENEATH THE PLOT.
    EACH COLUMN = SMALL LABEL ABOVE A LARGER COLOURED VALUE.        */
/*  STATS-SUMMARY ROW — SHARED ACROSS ANY EXPLORER PANEL THAT USES IT.
    LABEL ABOVE A LARGER COLOURED VALUE, EVEN COLUMNS, FAINT BORDERS. */
.cve-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 6px 0 18px 0;
  padding: 8px 4px 10px 4px;
  border-top:    1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.cve-stats-row--3col {
  grid-template-columns: repeat(3, 1fr);
}
.cve-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.cve-stat-label {
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--text-color) 55%, transparent);
}
.cve-stat-value {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.cve-stat-value--alpha { color: #d54c4c; }
.cve-stat-value--cl    { color: #5FB87A; }
.cve-stat-value--zcrit { color: color-mix(in srgb, var(--text-color) 92%, transparent); }
.cve-stat-value--zobs  { color: #3A8DCC; }
.cve-stat-value--tail  { color: #D55A5A; }

/*  SLIDER HEADER — α TITLE+PILL ON THE LEFT, CL TITLE+PILL ON THE
    RIGHT. SHARED ACROSS ANY EXPLORER PANEL THAT USES .cve-slider-header. */
.cve-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 4px;
}
.cve-slider-side {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}
.cve-header-pill {
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cve-header-pill--alpha { color: #d54c4c; }
.cve-header-pill--cl    { color: #5FB87A; }

/*  WHOLE READOUT TINTED TO ITS ACCENT — TITLE, "=", AND VALUE SHARE THE COLOUR. */
.cve-slider-side--alpha .dep-slider-title { color: #d54c4c; }
.cve-slider-side--cl    .dep-slider-title { color: #5FB87A; }

/*  "=" SEPARATOR — SITS ON THE VALUE PILL SO IT INHERITS THE ACCENT
    AND SURVIVES CALLBACK CHILDREN UPDATES. */
.cve-header-pill::before {
  content: "=";
  margin-right: 0.34em;
  font-weight: 500;
  opacity: 0.78;
}

/*  QUICK SELECT — REUSES .alpha-presets-row LAYOUT, SHARED ACROSS PANELS. */
.cve-quick-select {
  justify-content: center;
  margin: 0.6em 0 1.1em 0;
}

/*  DECISION-EXPLORER PANELS — STRONG DECISION LINE WITH GAVEL ICON.
    SHARED BETWEEN HYPOTHESIS DECISION + P-VALUE DECISION EXPLORERS.    */
.rrx-decision-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin: 6px 0 4px 0;
}
.rrx-decision-gavel {
  font-size: 22px;
  line-height: 1;
  color: color-mix(in srgb, var(--text-color) 75%, transparent);
  transform: rotate(-15deg);
  display: inline-block;
}
.rrx-decision-label {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--text-color) 88%, transparent);
  margin-right: 0.15em;
}
.rrx-decision {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0;
}

/*  TIGHTEN TOP CHROME SO THE GRAPH SITS HIGHER WHEN THE PANEL OPENS. */
#rejection_explorer_panel,
#pvalue_explorer_panel {
  padding-top: 10px;
}
#rejection_explorer_panel .dep-header,
#pvalue_explorer_panel    .dep-header { margin-bottom: 2px; }
#rejection_explorer_panel .dep-subtitle,
#pvalue_explorer_panel    .dep-subtitle { margin: 0 0 6px 0; font-size: 12.5px; }
#rejection_explorer_panel .dep-plot-wrap,
#pvalue_explorer_panel    .dep-plot-wrap { margin-top: -4px; }
/*  DIRECTIONAL HINT UNDER THE SLIDER TICK MARKS — SITS RIGHT BENEATH
    THE TICK LABELS (NEGATIVE TOP MARGIN PULLS IT UP THROUGH THE
    RC-SLIDER PADDING).                                              */
.cve-slider-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -0.6em 0.3em 0.6em 0.3em;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--text-color) 55%, transparent);
  font-style: italic;
}

/* ──────────────────────────────────────────────────────────────────
   FRAMED CONTROL CARDS — INTERACTIVE EXPLORERS
   ────────────────────────────────────────────────────────────────── */
#pvalue_explorer_panel         .dep-slider-block,
#rejection_explorer_panel      .dep-slider-block,
#critical_value_explorer_panel .dep-slider-block,
#test_stat_explorer_panel      .dep-slider-block,
#pvalue_explorer_panel         .dep-card,
#rejection_explorer_panel      .dep-card,
#critical_value_explorer_panel .dep-card,
#test_stat_explorer_panel      .dep-card {
  background    : transparent;
  border        : none;
  border-radius : 0;
  padding       : 2px 2px 4px 2px;
  margin        : 0 0 6px 0;
}

#pvalue_explorer_panel         .dep-slider-block + .dep-card .cve-slider-hint,
#rejection_explorer_panel      .dep-slider-block + .dep-card .cve-slider-hint,
#critical_value_explorer_panel .dep-slider-block + .dep-card .cve-slider-hint,
#test_stat_explorer_panel      .dep-slider-block + .dep-card .cve-slider-hint {
  margin-top : -10px;
}

#pvalue_explorer_panel         .dep-slider-block .dep-slider-header,
#rejection_explorer_panel      .dep-slider-block .dep-slider-header,
#critical_value_explorer_panel .dep-slider-block .dep-slider-header,
#test_stat_explorer_panel      .dep-slider-block .dep-slider-header {
  margin-bottom : 6px;
}

#pvalue_explorer_panel         .dep-slider-block .dep-slider-track-wrap,
#rejection_explorer_panel      .dep-slider-block .dep-slider-track-wrap,
#critical_value_explorer_panel .dep-slider-block .dep-slider-track-wrap,
#test_stat_explorer_panel      .dep-slider-block .dep-slider-track-wrap {
  padding : 4px 4px 4px 4px;
}

#pvalue_explorer_panel         .dep-card .cve-slider-hint,
#rejection_explorer_panel      .dep-card .cve-slider-hint,
#critical_value_explorer_panel .dep-card .cve-slider-hint {
  margin : 0 0 10px 2px;
}

#pvalue_explorer_panel         .dep-card .alpha-presets,
#rejection_explorer_panel      .dep-card .alpha-presets,
#critical_value_explorer_panel .dep-card .alpha-presets,
#pvalue_explorer_panel         .dep-card .cve-quick-select,
#rejection_explorer_panel      .dep-card .cve-quick-select,
#critical_value_explorer_panel .dep-card .cve-quick-select {
  margin : 0;
}
.cve-slider-hint-left,
.cve-slider-hint-right {
  white-space: nowrap;
}
.cve-slider-hint .cve-h0 {
  font-style: italic;
  color: color-mix(in srgb, var(--text-color) 78%, transparent);
}

#critical_value_explorer_panel .cve-h0 {
  font-style: italic;
}

@media (max-width: 720px) {
  #critical_value_explorer_panel .cve-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  #critical_value_explorer_panel .cve-slider-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4em;
  }
}


#critical_value_explorer_panel .explorer-slider-alpha .rc-slider-mark-text:first-child {
  transform: translateX(0%) !important;
  text-align: left;
}
#critical_value_explorer_panel .explorer-slider-alpha .rc-slider-mark-text:last-child {
  transform: translateX(-100%) !important;
  text-align: right;
}


.ttype-plot-stack {
  display: grid;
  grid-template-columns: 1fr;
  /*  STRETCH (NOT center): VARIANTS FILL THE GRID CELL SO THE RESPONSIVE
      PLOTLY CURVE HAS A DEFINITE CONTAINER WIDTH TO AUTOSIZE INTO. WITHOUT
      THIS THE VARIANT SHRINK-WRAPS AND PLOTLY FALLS BACK TO ITS 700px
      DEFAULT, OVERFLOWING THE EXPLORER PANEL.                            */
  justify-items: stretch;
}
.ttype-plot-stack .ttype-plot-variant {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ttype-plot-stack--lt .ttype-plot-variant--lt,
.ttype-plot-stack--ne .ttype-plot-variant--ne,
.ttype-plot-stack--gt .ttype-plot-variant--gt {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/*  INSIGHT STACK — THREE PRE-RENDERED VARIANTS IN ONE GRID CELL.
    ONLY THE VARIANT MATCHING THE ACTIVE MODIFIER IS DISPLAYED.   */
.ttype-insight-stack {
  display: grid;
  grid-template-columns: 1fr;
}
.ttype-insight-stack .ttype-insight {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ttype-insight-stack--lt .ttype-insight--lt,
.ttype-insight-stack--ne .ttype-insight--ne,
.ttype-insight-stack--gt .ttype-insight--gt {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.ttype-insight {
  text-align: left;
  font-size: 12.5px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--text-color) 70%, transparent);
  margin: 8px auto 4px auto;
  max-width: 36em;
  padding: 0 0.4em;
  font-style: italic;
  letter-spacing: 0.01em;
}
.ttype-insight-line {
  margin: 0 0 0.55em 0;
}
.ttype-insight-line:last-child {
  margin-bottom: 0;
}


.ttype-segmented-wrap {
  display: flex;
  justify-content: center;
  margin: 14px 0 4px 0;              /* HUGGED TO THE GRAPH ABOVE */
}
/*  NO CAPSULE — JUST THE THREE STANDALONE BUTTONS, SPACED EVENLY.   */
.ttype-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ttype-radio-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 18px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  color: color-mix(in srgb, var(--text-color) 60%, transparent);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
  transition: background-color 200ms ease, color 200ms ease,
              border-color 200ms ease, box-shadow 200ms ease;
}
.ttype-radio-label:hover {
  color: var(--primary, #3A8DCC);
  border-color: rgba(255, 255, 255, 0.22);
  background: color-mix(in srgb, var(--text-color) 4%, transparent);
}
.ttype-radio-input { display: none !important; }
/*  ACTIVE BUTTON — FILLED ACCENT PILL WITH A SOFT GLOW.              */
.ttype-radio-label:has(input:checked) {
  background: color-mix(in srgb, var(--quaternary, #E6C84D) 16%, transparent);
  border-color: color-mix(in srgb, var(--quaternary, #E6C84D) 55%, transparent);
  color: var(--quaternary, #E6C84D);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--quaternary, #E6C84D) 10%, transparent);
}


.ttype-insight-formula {
  display: block;
  text-align: center;
  margin: 0.45em auto 0.3em auto;
  font-style: normal;
  font-weight: 600;
  font-size: 1.12em;
  line-height: 1.6;
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--text-color) 92%, transparent);
}
.ttype-insight-sign {
  font-weight: 700;
  font-size: 1.18em;
  padding: 0 0.18em;
  color: color-mix(in srgb, var(--primary, #3A8DCC) 95%, transparent);
}

.ttype-insight-shaded {
  color: color-mix(in srgb, var(--primary, #3A8DCC) 92%, transparent);
  font-style: normal;
  font-weight: 600;
}


.ttype-insight-xbar {
  font-feature-settings: "ss01" off;
  letter-spacing: 0;
}

/*  TEST-TYPE PANEL HIERARCHY — TIGHTEN HEADER → SUBTITLE → GRAPH STACK
    SO THE EXPLORER FEELS LIKE A FOCUSED LEARNING TOOL, NOT A LOOSE
    DASHBOARD.                                                          */
#test_type_explorer_panel {
  padding-top: 14px;
}
#test_type_explorer_panel .dep-header {
  margin-bottom: 4px;
}
#test_type_explorer_panel .dep-subtitle {
  margin: 0 0 10px 0;
  font-size: 12.5px;
}
#test_type_explorer_panel .ttype-plot-stack {
  margin: 0;
}

/*  MOBILE — SEGMENTED CONTROL STAYS HORIZONTAL, JUST TIGHTER.         */
@media (max-width: 540px) {
  #test_type_explorer_panel .dep-title { font-size: 14px; }
  #test_type_explorer_panel .dep-subtitle { font-size: 12px; }
  .ttype-radio-label { padding: 5px 12px; font-size: 11.5px; }
  .ttype-segmented-wrap { margin: 12px 0 2px 0; }
}

/*  formula-with-explorer-btn LAYOUT IS NOW HANDLED BY THE UNIFIED
    .plot-with-explorer-btn rule ABOVE — STACK ABOVE, FULL WIDTH.   */
.explore-trigger-btn--floating {
  position: absolute;
  top: 8px;
  right: 12px;
  margin: 0;
  z-index: 5;
  padding: 5px 12px;
  font-size: 12px;
}


.decision-explorer-panel.offcanvas {
  background: var(--solution-bg-color);
  color: var(--text-color);
  padding: 18px 22px 24px 22px;
  border: none;
  box-shadow: none;
}

/*  LIGHT THEME — dbc.Offcanvas portals the panel to document.body (outside
    #main_div_id), so the .light-main theme tokens never reach it. body
    .panel-theme-light is mirrored from #main_div_id by panel_theme_sync.js;
    re-point the tokens the panel uses so it goes light with the workspace.  */
body.panel-theme-light .decision-explorer-panel.offcanvas {
  --solution-bg-color: #F6F5F1;
  --text-color: #383C44;
  --text-muted-color: #6E7178;
  --seperator-color: #CBC8BF;
}
.decision-explorer-panel.offcanvas-bottom {
  height: min(72vh, 760px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.decision-explorer-panel.offcanvas-end {
  width: min(600px, 92vw);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/*  DESKTOP: OPEN AS AN IN-PANEL VIEW THAT COVERS THE SOLUTION AREA (RIGHT OF
    THE SIDEBAR, BELOW THE NAVBAR) — MATCHING THE IN-PANEL ROADMAP. NAVBAR +
    SIDEBAR STAY; THE × IN THE HEADER DISMISSES IT. THE SLIDE TRANSFORM FROM
    .offcanvas-end / -bottom IS LEFT INTACT, SO IT STILL EASES IN.          */
@media (min-width: 769px) {
  .decision-explorer-panel.offcanvas-end,
  .decision-explorer-panel.offcanvas-bottom,
  .results-offcanvas.offcanvas-end,
  .results-offcanvas.offcanvas-bottom {
    top: var(--navbar-h) !important;
    left: max(22%, 300px) !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    border-left: none;
    border-top: none;
  }
}

/*  RESULTS PANEL — SAME IN-PANEL COVER; GIVE IT A SOLID SURFACE (ITS BASE
    background IS `inherit`, WHICH IS WRONG ONCE THE OFFCANVAS IS MOUNTED AT
    document.body) AND SCROLL.                                              */
.results-offcanvas.offcanvas {
  background: var(--solution-bg-color, #1A1A1A);
  color: var(--text-color, #e0e0e0);
  overflow-y: auto;
  padding: 1.2em 1.4em 1.6em 1.4em;
}

/*  MOBILE: THE EXPLORER BECOMES A FULL-SCREEN SHEET — FULL WIDTH, SEATED
    BETWEEN THE FIXED NAVBAR AND THE BOTTOM TAB BAR, TIGHTER PADDING SO THE
    RESPONSIVE CURVE GETS THE WHOLE WIDTH.                                  */
@media (max-width: 768px) {
  .decision-explorer-panel.offcanvas {
    padding: 14px 14px 20px 14px;
  }
  .decision-explorer-panel.offcanvas-end,
  .decision-explorer-panel.offcanvas-bottom {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    top: 54px !important;
    bottom: auto !important;
    height: calc(100vh - 54px - var(--mobile-tabbar-h)) !important;
    height: calc(100dvh - 54px - var(--mobile-tabbar-h)) !important;
    border-left: none;
    border-top: none;
  }
}
/*  HEADER  */
.dep-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3em;
}
.dep-title-row {
  display: flex;
  align-items: center;
  gap: 0.55em;
}
.dep-title-icon {
  font-size: 18px;
  color: var(--quaternary, #E6C84D);
}
.dep-title {
  font-size: 17.5px;
  font-weight: 600;
  color: var(--text-color);
}
.dep-close-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: color-mix(in srgb, var(--text-color) 60%, transparent);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.dep-close-btn:hover {
  background: color-mix(in srgb, var(--text-color) 8%, transparent);
  color: var(--text-color);
}

/*  IN-PANEL HEADER — CENTER THE TITLE AND TURN THE × INTO A LEFT-ALIGNED
    "← BACK", MATCHING THE ROADMAP. SCOPED TO THE OFFCANVAS PANEL SO THE
    STUDIO'S INLINE EXPLORERS (.explorer-inline, × already hidden) ARE
    UNAFFECTED. SAME n_clicks BUTTON — IT STILL DISMISSES THE PANEL.        */
.decision-explorer-panel.offcanvas .dep-header {
  position: relative;
  justify-content: center;
}
.decision-explorer-panel.offcanvas .dep-close-btn {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  padding: 0.32em 0.7em;
  border: 1px solid color-mix(in srgb, var(--text-color) 22%, transparent);
  border-radius: 6px;
  font-size: 0;                 /*  HIDE THE "✕" GLYPH  */
}
.decision-explorer-panel.offcanvas .dep-close-btn::before {
  content: "\2190  Back to solution";
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}
.decision-explorer-panel.offcanvas .dep-close-btn:hover {
  border-color: color-mix(in srgb, var(--quaternary, #C9A832) 50%, transparent);
}

/*  SUBTITLE  */
.dep-subtitle {
  margin: 0 0 1em 0;
  font-size: 13.5px;
  color: color-mix(in srgb, var(--text-color) 55%, transparent);
}

/*  PLOT WRAP  */
.dep-plot-wrap {
  margin: 0 0 0.8em 0;
}

/*  SLIDER BLOCK — TWO ROWS:
      ROW 1  | TITLE  · VALUE READOUT (RIGHT)
      ROW 2  | SLIDER TRACK (WITH MARKS UNDERNEATH WHEN PRESENT)
    SPACING TUNED TIGHT — INTERACTIVE PANELS FEEL COMPACT, NOT AIRY.  */
.dep-slider-block {
  margin: 0 0 0.7em 0;
  padding: 2px 0 0 0;
}
.dep-slider-header {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.4em;
}
.dep-slider-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
}


/*  LIVE VALUE READOUT — PLAIN SLIDER-COLOURED TEXT, RIGHT-ANCHORED.
    NO BOX, NO BORDER, JUST THE NUMBER.                              */
.dep-value-pill {
  margin-left: auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  color: var(--slider-color, var(--text-color));
  flex: 0 0 auto;
}


.dep-slider-track-wrap {
  padding: 6px 0.2em 22px 0.2em;
}
/*  WIPE ANY STRAY DASH/RC TOOLTIP OR NUMBER INPUT THAT MIGHT RENDER
    ALONGSIDE THE TRACK (THE PHANTOM "WHITE BOX" PROBLEM).            */
.dep-slider-track-wrap .rc-slider-tooltip,
.dep-slider-track-wrap .rc-slider-tooltip-inner,
.dep-slider-track-wrap .rc-slider-tooltip-content,
.dep-slider-track-wrap .dash-slider-tooltip,
.dep-slider-track-wrap .dash-tooltip,
.dep-slider-track-wrap input,
.dep-slider-track-wrap [type="number"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

.dep-info-card {
  padding: 6px 10px;
  background: color-mix(in srgb, var(--text-color) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-color) 9%, transparent);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 48px;
}
.dep-info-label {
  font-size: 10px;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--text-color) 50%, transparent);
  margin-bottom: 2px;
}
.dep-info-value {
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-color);
  word-break: break-word;
  line-height: 1.2;
}

.explorer-slider .rc-slider-tooltip,
.explorer-slider .rc-slider-tooltip-arrow,
.explorer-slider .rc-slider-tooltip-content,
.explorer-slider .rc-slider-tooltip-inner,
.explorer-slider .dash-tooltip {
  display: none !important;
}

/*  TRACK + HANDLE INHERIT --slider-color FROM THE BLOCK WRAPPER.  */
.dep-slider-block .explorer-slider .rc-slider-track,
.dep-slider-block .explorer-slider .dash-slider-range {
  background-color: var(--slider-color, #3A8DCC) !important;
}
.dep-slider-block .explorer-slider .rc-slider-handle,
.dep-slider-block .explorer-slider [role="slider"] {
  background-color: var(--slider-color, #3A8DCC) !important;
  border-color: var(--slider-color, #3A8DCC) !important;
  opacity: 1 !important;
}
.dep-slider-block .explorer-slider .rc-slider-rail {
  background-color: color-mix(in srgb, var(--text-color) 14%, transparent) !important;
}


.dep-slider-block .explorer-slider .rc-slider-mark {
  display: block !important;
  top: 12px;
}
.dep-slider-block .explorer-slider .rc-slider-mark-text,
.dep-slider-block .explorer-slider .rc-slider-mark-text-active {
  display: inline-block !important;
  visibility: visible !important;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dep-slider-block .explorer-slider .rc-slider-mark-text {
  color: color-mix(in srgb, var(--text-color) 40%, transparent) !important;
}
.dep-slider-block .explorer-slider .rc-slider-mark-text-active {
  color: color-mix(in srgb, var(--text-color) 75%, transparent) !important;
}
.dep-slider-block .explorer-slider .rc-slider-step .rc-slider-dot,
.dep-slider-block .explorer-slider .rc-slider-dot {
  display: block !important;
  width: 4px;
  height: 4px;
  bottom: -2px;
  border: none !important;
  background: color-mix(in srgb, var(--text-color) 22%, transparent) !important;
}
.dep-slider-block .explorer-slider .rc-slider-step .rc-slider-dot-active,
.dep-slider-block .explorer-slider .rc-slider-dot-active {
  background: var(--slider-color, var(--text-color)) !important;
}


.dep-slider-block,
.dep-slider-block .dep-slider-track-wrap,
.dep-slider-block .explorer-slider,
.dep-slider-block .explorer-slider .rc-slider {
  overflow: visible !important;
}
.dep-slider-block .explorer-slider .rc-slider {
  margin-bottom: 22px;
}

/*  TEST-STAT PANEL — KEEP CLEARANCE BELOW THE TRACK FOR THE MARK
    LABELS, BUT TIGHTER THAN OTHER PANELS SINCE 4 SLIDERS STACK.   */
#test_stat_explorer_panel .dep-slider-block .dep-slider-track-wrap {
  padding: 2px 0.2em 16px 0.2em;
}

/* ════════════════════════════════════════════════════════════════════════
   TEST-STATISTIC EXPLORER — REFINED LAYOUT
   - GLASSMORPHISM VIZ PANEL (PLOT + FORMULA)
   - DEDICATED CONTROL DECK (SLIDERS)
   - INLINE VALUE CAPSULES NEXT TO LABELS
   - NARROWED + CENTRED SLIDER TRACKS
   - MICROINTERACTION GLOWS ON SLIDER HANDLES
   ════════════════════════════════════════════════════════════════════════ */

/*  HEADER + SUBTITLE TIGHTER, MODAL OVERALL SHORTER.   */
#test_stat_explorer_panel { padding-top: 14px; }
#test_stat_explorer_panel .dep-header { margin-bottom: 4px; }
#test_stat_explorer_panel .dep-subtitle {
  margin: 0 0 12px 0;
  font-size: 12.5px;
}


#test_stat_explorer_panel .ts-viz-panel {
  margin: 0 0 14px 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
#test_stat_explorer_panel .ts-viz-panel .dep-plot-wrap { margin: 0; }
#test_stat_explorer_panel .ts-viz-panel .explorer-readout {
  margin: 4px 0 0 0;
  border-top: none;
  border-bottom: none;
  padding-top: 6px;
}

#test_stat_explorer_panel .ts-controls-deck {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
#test_stat_explorer_panel .ts-controls-deck .dep-slider-block + .dep-slider-block {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/*  SLIDER HEADER — TITLE + VALUE CAPSULE ADJACENT, INFO ICON RIGHT. */

#test_stat_explorer_panel .dep-slider-header {
  gap: 0.55em;
  max-width: 86%;
  margin: 0 auto;
}

#test_stat_explorer_panel .dep-slider-title {
  flex: 0 0 auto;
  color: var(--slider-color, var(--text-color));
}

#test_stat_explorer_panel .dep-value-pill {
  margin-left: auto !important;
  order: 4;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--slider-color, var(--text-color));
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/*  NARROWED, CENTRED SLIDER TRACK — RELAXED SPACING.                */
#test_stat_explorer_panel .dep-slider-track-wrap {
  max-width: 86%;
  margin: 0 auto;
}

/*  MICROINTERACTIONS — HANDLE GLOW ON HOVER, SCALE ON DRAG.         */
#test_stat_explorer_panel .explorer-slider .rc-slider-handle,
#test_stat_explorer_panel .explorer-slider [role="slider"] {
  transition: transform 180ms ease, box-shadow 220ms ease;
}
#test_stat_explorer_panel .explorer-slider .rc-slider-handle:hover,
#test_stat_explorer_panel .explorer-slider [role="slider"]:hover {
  box-shadow: 0 0 0 6px var(--slider-shadow, rgba(255, 255, 255, 0.12));
}
#test_stat_explorer_panel .explorer-slider .rc-slider-handle:active,
#test_stat_explorer_panel .explorer-slider [role="slider"]:active,
#test_stat_explorer_panel .explorer-slider .rc-slider-handle-dragging,
#test_stat_explorer_panel .explorer-slider .rc-slider-handle-click-focused {
  transform: scale(1.18);
  box-shadow: 0 0 0 8px var(--slider-shadow, rgba(255, 255, 255, 0.18));
}

/*  GRAPH PULSE WHEN dcc.Graph RE-RENDERS — VERY SUBTLE.             */
#test_stat_explorer_panel .explorer-graph {
  animation: ts-graph-breathe 220ms ease-out;
}
@keyframes ts-graph-breathe {
  0%   { filter: brightness(1.08); }
  100% { filter: brightness(1.00); }
}
.dep-slider-block .explorer-slider .rc-slider-mark,
.dep-slider-block .explorer-slider .rc-slider-mark-text,
.dep-slider-block .explorer-slider .rc-slider-mark-text-active {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.dep-slider-block .explorer-slider .rc-slider-mark {
  display: block !important;
}
.dep-slider-block .explorer-slider .rc-slider-step .rc-slider-dot {
  display: block !important;
}

/* ════════════════════════════════════════════════════════════════════════
   PROBABILITY ADDITION-RULE EXPLORER — LIVE VENN DIAGRAM
   - DISPLAY-MATH FORMULA BANNER ATOP THE PANEL
   - DEDICATED CONTROL DECK (P(A), P(B), OVERLAP SLIDERS)
   - UNION READOUT + INTERPRETATION ABOVE THE VENN
   - NARROWED + CENTRED SLIDER TRACKS, MICROINTERACTION GLOWS
   MIRRORS THE TEST-STATISTIC EXPLORER RHYTHM, SCOPED BY PANEL ID.
   ════════════════════════════════════════════════════════════════════════ */

#prob_addition_explorer_panel { padding-top: 14px; }
#prob_addition_explorer_panel .dep-header { margin-bottom: 4px; }
#prob_addition_explorer_panel .dep-subtitle {
  margin: 0 0 12px 0;
  font-size: 12.5px;
}

/*  FORMULA BANNER — THE GENERAL ADDITION RULE, CENTRED DISPLAY MATH.  */
.prob-venn-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 2px 0 14px 0;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--text-color) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-color) 9%, transparent);
  border-radius: 8px;
  font-size: 1.02em;
  overflow-x: auto;
}
.prob-venn-banner .katex-display { margin: 0; }

#prob_addition_explorer_panel .ts-controls-deck {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0 0 6px 0;
}
#prob_addition_explorer_panel .ts-controls-deck .dep-slider-block + .dep-slider-block {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/*  SLIDER HEADER — TITLE LEFT (SLIDER-COLOURED), VALUE RIGHT.  */
#prob_addition_explorer_panel .dep-slider-header {
  gap: 0.55em;
  max-width: 86%;
  margin: 0 auto;
}
#prob_addition_explorer_panel .dep-slider-title {
  flex: 0 0 auto;
  color: var(--slider-color, var(--text-color));
}
#prob_addition_explorer_panel .dep-value-pill {
  margin-left: auto !important;
  order: 4;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--slider-color, var(--text-color));
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
#prob_addition_explorer_panel .dep-slider-track-wrap {
  max-width: 86%;
  margin: 0 auto;
  padding: 2px 0.2em 16px 0.2em;
}

/*  RESULT READOUT + INTERPRETATION — SEATED BETWEEN THE SLIDERS AND VENN.  */
#prob_addition_explorer_panel .explorer-readout {
  margin: 2px 0 6px 0;
  border-top: 1px solid var(--seperator-color);
  border-bottom: none;
  padding-top: 8px;
}
#prob_addition_explorer_panel .explorer-interpretation {
  margin: 0 0 8px 0;
}

/*  VENN VIZ PANEL — TRANSPARENT, THE GRAPH CARRIES THE DARK FIELD ITSELF.  */
#prob_addition_explorer_panel .ts-viz-panel {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
#prob_addition_explorer_panel .ts-viz-panel .dep-plot-wrap {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text-color) 9%, transparent);
}

/*  MICROINTERACTIONS — HANDLE GLOW ON HOVER, SCALE ON DRAG.  */
#prob_addition_explorer_panel .explorer-slider .rc-slider-handle,
#prob_addition_explorer_panel .explorer-slider [role="slider"] {
  transition: transform 180ms ease, box-shadow 220ms ease;
}
#prob_addition_explorer_panel .explorer-slider .rc-slider-handle:hover,
#prob_addition_explorer_panel .explorer-slider [role="slider"]:hover {
  box-shadow: 0 0 0 6px var(--slider-shadow, rgba(255, 255, 255, 0.12));
}
#prob_addition_explorer_panel .explorer-slider .rc-slider-handle:active,
#prob_addition_explorer_panel .explorer-slider [role="slider"]:active,
#prob_addition_explorer_panel .explorer-slider .rc-slider-handle-dragging,
#prob_addition_explorer_panel .explorer-slider .rc-slider-handle-click-focused {
  transform: scale(1.18);
  box-shadow: 0 0 0 8px var(--slider-shadow, rgba(255, 255, 255, 0.18));
}

/*  GRAPH PULSE WHEN dcc.Graph RE-RENDERS — VERY SUBTLE.  */
#prob_addition_explorer_panel .explorer-graph {
  animation: ts-graph-breathe 220ms ease-out;
}

/*  VISUALIZATION STUDIO — GRAPH-ONLY METHODS HAVE NO STEP-BY-STEP ROADMAP, SO
    HIDE THE SECTIONS CARD.  THE EXAMPLE/CUSTOM TOGGLE + DATASET PICKER STAY
    VISIBLE SO PLOTS CAN LOAD PRESET DATASETS (see studio-mode rules below).
    TOGGLED BY THE viz-studio-mode BODY CLASS (clientside callback).  */
body.viz-studio-mode #section_dropdown_wrapper_id {
  display: none !important;
}

/*  STUDIO PILLAR SKIN — KEEP THE FIGURE PICKER (ANALYSIS), THE DATASET PICKER
    (DATA SOURCE — EXAMPLES, JUST LIKE THE SOLVER) AND THE INPUTS (DATA).  DROP
    HYPOTHESIS, INSIGHTS, AND THE DIVIDERS BETWEEN THE NOW-HIDDEN BLOCKS.  */
body.studio-mode #hypothesis_section_id,
body.studio-mode #insights_section_id,
body.studio-mode #solver_panel_div_id .divider {
  display: none !important;
}

/*  STUDIO ACCENT — THE THREE VISIBLE BLOCKS READ AS PRIMARY → SECONDARY →
    TERTIARY (FIGURE / DATA SOURCE / DATA), MATCHING THE STUDIO TAB.  ANALYSIS
    KEEPS ITS PRIMARY ACCENT; DATA IS RECOLOURED FROM QUATERNARY TO TERTIARY.  */
body.studio-mode #data_section_id.accent-quaternary {
  --accent-color: var(--tertiary);
}

/*  STUDIO — EXPLORER TOOLS CARRY NO TEXT INPUTS AND NO DATASETS (THEIR SLIDERS
    ARE THE CONTROLS), SO BOTH THE DATA BLOCK AND THE DATA-SOURCE / EXAMPLE
    PICKER ARRIVE EMPTY.  COLLAPSE BOTH WHEN THE INPUT LIST IS EMPTY.  */
body.studio-mode #data_section_id:has(#input_list_id:empty),
body.studio-mode #solver_panel_div_id:has(#input_list_id:empty) #data_source_section_id {
  display: none !important;
}

/*  STUDIO IS PLOT-ONLY — THE OUTPUT IS A BARE FIGURE, NOT A STEP-BY-STEP
    SOLUTION. STRIP ALL STEPWISE SCAFFOLDING (MAIN TITLE, SECTION HEADING, THE
    "STEP n" INDEX BADGE, THE CAPTION, AND THE TRAILING RULE) SO ONLY THE PLOT
    REMAINS.  */
body.viz-studio-mode .solution-main-heading,
body.viz-studio-mode .solution-section-heading,
body.viz-studio-mode .solution-step-index,
body.viz-studio-mode .solution-step-content,
body.viz-studio-mode .solution-div > hr {
  display: none !important;
}

/*  STUDIO — INLINE EXPLORER CARD.  THE EXPLORER WIDGETS ARE AUTHORED AS SLIDE-IN
    OFFCANVAS PANELS; THE STUDIO LIFTS THEIR CONTENT INTO AN INLINE CARD WITH THE
    SAME DARK SKIN.  THEIR OPEN/CLOSE BUTTONS HAVE NO OFFCANVAS TO DRIVE HERE, SO
    HIDE THEM.  (ONLY THE .offcanvas VARIANT OF THE PANEL IS FIXED-POSITIONED, SO
    THIS INLINE CARD STAYS IN FLOW.)  */
.explorer-inline {
  background: var(--solution-bg-color);
  border: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
  border-radius: 14px;
  padding: 18px 22px 24px 22px;
  max-width: 660px;
  margin: 4px auto 0 auto;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--text-color) 8%, transparent);
}
.explorer-inline .dep-close-btn {
  display: none !important;
}


/* ════════════════════════════════════════════════════════════════════
   CALCULATION TREE EXPLORER  (scoped to .calc-tree-explorer)
   Operation colours for the expression LaTeX are inherited from the
   existing [class*="mjx-…"] rules above; this block styles the tree
   itself (rail, stage, nodes, edges).
   ════════════════════════════════════════════════════════════════════ */
/* SHARED SLIDE-IN PANEL — BUILT BY assets/calc_tree_explorer.js, OPENED BY ANY
   .ct-trigger. SIDE SLIDE-IN LIKE THE GRAPH EXPLORERS. */
.ct-panel {
  /* PANEL IS MOUNTED AT document.body — RE-DECLARE THE PALETTE SO var() RESOLVES */
  --bg: #14181c; --panel: #1b2128; --ink: #d7dde3; --muted: #8b97a3; --rule: #2a323b;
  --node: #222b34; --node-edge: #3a4650;
  --primary: #3A8DCC; --secondary: #5FB87A; --tertiary: #E57A3D;
  --quaternary: #C9A832; --quinary: #B87DA8; --senary: #6BBCD0; --septenary: #d54c4c;
  /* TYPE SCALE — ONE COHERENT LADDER FOR THE WHOLE PANEL (mini < label < title <
     math < heading). TREE + STEPS SHARE --ct-fs-math SO THEY LOOK THE SAME. */
  --ct-fs-mini: 12px; --ct-fs-label: 13px; --ct-fs-title: 15px;
  --ct-fs-math: 16px; --ct-fs-heading: 18px;
  position: fixed; top: 0; right: 0; height: 100vh; width: 680px; max-width: 96vw;
  background: var(--panel); border-left: 1px solid var(--rule, #2a323b); color: var(--ink, #d7dde3);
  z-index: 5000; transform: translateX(100%); transition: transform 0.28s ease;
  display: flex; flex-direction: column; padding: 18px 22px 34px; overflow-y: auto;
  box-shadow: none;
}
.ct-panel.open { transform: translateX(0); }

/*  LIGHT THEME — body.panel-theme-light is mirrored from #main_div_id's theme
    class by assets/panel_theme_sync.js. The panel is mounted at document.body
    (outside #main_div_id), so it can't inherit the .light-main tokens; re-point
    its palette here so it matches the in-workspace roadmap in light mode.   */
body.panel-theme-light .ct-panel {
  --bg: #F6F5F1; --panel: #FCFBF8; --ink: #383C44; --muted: #6E7178;
  --rule: #CBC8BF; --node: #ECEAE3; --node-edge: #CBC8BF;
}

/*  DESKTOP: COVER THE SOLUTION AREA (RIGHT OF THE SIDEBAR, BELOW THE NAVBAR)
    LIKE THE IN-PANEL ROADMAP / GRAPH EXPLORERS. SLIDE TRANSFORM IS KEPT.   */
@media (min-width: 769px) {
  .ct-panel {
    top: var(--navbar-h);
    left: max(22%, 300px);
    right: 0;
    width: auto;
    max-width: none;
    height: calc(100vh - var(--navbar-h));
  }
}
/*  NO DIMMING BACKDROP — THE PANEL IS AN IN-WORKSPACE TAKEOVER LIKE THE
    LEARNING PATH, NOT A MODAL. THE SIDEBAR STAYS LIVE; DISMISS VIA "BACK
    TO SOLUTION". KEEP THE ELEMENT (THE JS STILL TOGGLES IT) BUT INERT.   */
.ct-backdrop,
.ct-backdrop.open {
  position: fixed; inset: 0; background: transparent;
  z-index: 4999; opacity: 0; pointer-events: none;
}
/*  HEADER — CENTER THE TITLE AND TURN THE × INTO A LEFT-ALIGNED "← BACK TO
    SOLUTION", MIRRORING THE ROADMAP. SAME BUTTON — IT STILL CLOSES.        */
.ct-panel .ct-panel-head {
  display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 10px;
}
.ct-panel .ct-panel-title { font-size: var(--ct-fs-title); font-weight: 650; color: var(--ink, #d7dde3); }
.ct-panel .ct-panel-title .bi { color: var(--quaternary); margin-right: 6px; }
.ct-panel .ct-panel-close {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--ink, #d7dde3) 22%, transparent);
  color: var(--muted, #8b97a3);
  cursor: pointer; line-height: 1; padding: 0.32em 0.7em; border-radius: 6px;
  font-size: 0;                 /*  HIDE THE "✕" GLYPH  */
}
.ct-panel .ct-panel-close::before {
  content: "\2190  Back to solution";
  font-size: 0.82rem; font-weight: 600; white-space: nowrap;
}
.ct-panel .ct-panel-close:hover {
  color: var(--ink, #d7dde3);
  border-color: color-mix(in srgb, var(--quaternary, #C9A832) 50%, transparent);
}

/* INLINE LAUNCH (TRIGGER BUTTON + HIDDEN PAYLOAD), EMITTED AFTER A CALC HEADER */
.ct-launch { margin: 10px 0 2px; }
.ct-payload { display: none; }

.calc-tree-explorer .ct-main-col {
  display: flex; flex-direction: column; margin-top: 8px;
}
/* PLAY / RESET — CENTERED BELOW THE DOTS */
.calc-tree-explorer .ct-controls {
  display: flex; gap: 10px; align-items: center; justify-content: center;
  flex-wrap: wrap; margin-top: 16px;
}
.calc-tree-explorer .ct-btn {
  background: var(--node, #161b21); color: var(--ink, #d7dde3);
  border: 1px solid var(--rule, #2a323b); border-radius: 8px;
  padding: 8px 20px; cursor: pointer; font-size: var(--ct-fs-label);
  text-align: center; transition: 0.12s;
}
.calc-tree-explorer .ct-btn:hover { filter: brightness(1.14); border-color: var(--node-edge, #3a4650); }
.calc-tree-explorer .ct-btn:disabled { opacity: 0.35; cursor: default; }
.calc-tree-explorer .ct-btn-accent {
  background: var(--primary); color: #fff;
  border-color: var(--primary); font-weight: 600;
}

/* MAIN HEADING — THE EXPRESSION. ACTIVE OP + CARRIED VALUES ARE COLOURED INLINE
   BY build_program VIA \textcolor (EXPLICIT HEX), SO NO CSS COLOUR RULES NEEDED. */
/* DESCRIPTION HEADING — THE CALCULATION HEADER ("Calculate the X.") */
.calc-tree-explorer .ct-desc {
  text-align: center; font-size: var(--ct-fs-heading); font-weight: 650;
  color: var(--ink, #d7dde3); margin: 2px 0 8px;
}
/* SUPPORTING EXPRESSION (THE MATH — SAME SIZE AS THE TREE NODES). WRAPS FREELY SO
   A LONG POLYNOMIAL IS ALWAYS FULLY VISIBLE AT ANY PANEL WIDTH (NEVER CLIPPED). */
.calc-tree-explorer .ct-expr {
  text-align: center; font-size: var(--ct-fs-math); min-height: 30px; margin: 0 0 8px;
  line-height: 1.35;
}
/* STAGE — A BOUNDED, CENTRED VIEWPORT. IT ABSORBS THE PANEL'S SPARE HEIGHT
   (flex:1, min-height:0) AND CLIPS; THE RENDERER SCALES THE WHOLE TREE TO FIT
   THIS BOX (fit-to-view) SO NOTHING SCROLLS AND THE CONTROLS STAY ON SCREEN. */
.calc-tree-explorer .ct-stage {
  position: relative; min-width: 0; min-height: 0; flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 6px 0;
}

/* NAV ROW: [Previous]  dots  [Next] */
.calc-tree-explorer .ct-nav {
  display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 16px;
}
/* CAROUSEL INDICATOR DOTS */
.calc-tree-explorer .ct-dots { display: flex; justify-content: center; gap: 7px; }
.calc-tree-explorer .ct-dots .ct-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rule, #2a323b); transition: 0.18s;
}
.calc-tree-explorer .ct-dots .ct-dot.active { background: var(--primary); transform: scale(1.25); }
.calc-tree-explorer .ct-stage-inner {
  position: relative; flex: none; transform-origin: center center;
}
/* OPERATION NAME (COLOURED INLINE BY THE RENDERER) — REPLACES THE STEP EQUATION */
.calc-tree-explorer .ct-calc {
  text-align: center; font-size: var(--ct-fs-label); min-height: 20px; margin-top: 8px;
  font-weight: 650; letter-spacing: 0.4px;
}

/* VIEW TABS — [ Tree Diagram | Step-by-Step ], UNDERLINE-ACTIVE TAB STYLE */
.calc-tree-explorer .ct-view-toggle {
  display: inline-flex; align-self: center; gap: 2px; margin: 2px 0 12px;
  border-bottom: 1px solid var(--rule, #2a323b);
}
.calc-tree-explorer .ct-view-btn {
  background: transparent; color: var(--muted, #8b97a3);
  border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 7px 22px; cursor: pointer; font-size: var(--ct-fs-label); transition: 0.14s;
}
.calc-tree-explorer .ct-view-btn:hover { color: var(--ink, #d7dde3); }
.calc-tree-explorer .ct-view-btn.is-active {
  color: var(--ink, #d7dde3); border-bottom-color: var(--primary); font-weight: 650;
}

/* MODE SWITCH — SHOW ONE VIEW, HIDE THE OTHER (NAV + CONTROLS STAY SHARED) */
.ct-panel.mode-steps .ct-expr,
.ct-panel.mode-steps .ct-stage,
.ct-panel.mode-steps .ct-calc { display: none; }
.ct-panel.mode-tree  .ct-steps { display: none; }

/* STEP-REDUCTION VIEW — THE WORKED-SOLUTION STACK (EACH PEMDAS PASS = ONE LINE) */
.calc-tree-explorer .ct-steps {
  display: flex; flex-direction: column; align-items: center;
  flex: 1 1 auto; min-height: 0; justify-content: safe center;
  overflow-y: auto; padding: 10px 0; gap: 2px;
}
.calc-tree-explorer .ct-step-row {
  font-size: var(--ct-fs-math); line-height: 1.3; text-align: center; transition: opacity 0.2s ease;
}
.calc-tree-explorer .ct-step-row.is-result { font-size: var(--ct-fs-heading); font-weight: 700; margin-top: 2px; }
/* ONE STEP IN FOCUS: CURRENT LINE COLOURED (active), DONE LINES NEUTRAL + DIMMED,
   FUTURE LINES HIDDEN — NO SPOILER AND NO LINGERING COLOUR. */
.calc-tree-explorer .ct-step-row .ct-line--active { display: none; }
.calc-tree-explorer .ct-step-row.is-current .ct-line--active  { display: inline-block; }
.calc-tree-explorer .ct-step-row.is-current .ct-line--neutral { display: none; }
.calc-tree-explorer .ct-step-row.is-done    { opacity: 0.4; }
.calc-tree-explorer .ct-step-row.is-pending { display: none; }
.calc-tree-explorer .ct-step-arrow {
  font-size: var(--ct-fs-mini); font-weight: 650; letter-spacing: 0.4px; opacity: 0.45;
  margin: 2px 0 3px; transition: opacity 0.2s ease, transform 0.2s ease;
}
.calc-tree-explorer .ct-step-arrow.is-active  { opacity: 1; transform: scale(1.06); }
.calc-tree-explorer .ct-step-arrow.is-pending { display: none; }

.calc-tree-explorer svg.ct-edges {
  position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none;
}
.calc-tree-explorer svg.ct-edges line { stroke: var(--node-edge, #3a4650); stroke-width: 1.5; }

/* TREE NODES — PLAIN TEXT (NO BOX). OPERATION COLOUR = FONT COLOUR ONLY.
   A PANEL-COLOURED BACKDROP MASKS THE EDGE LINES BEHIND EACH LABEL.
   COLOURS ARE EXPLICIT HEX (NOT var()) SO THEY RESOLVE AT body LEVEL. */
.calc-tree-explorer .node {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  background: var(--panel, #1b2128); padding: 2px 7px; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-size: var(--ct-fs-math); color: var(--muted, #8b97a3);
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.25s;
}
.calc-tree-explorer .node.op   { font-weight: 700; color: var(--ink, #d7dde3); }
.calc-tree-explorer .node.leaf { color: var(--muted, #8b97a3); }
/* ACTIVE OPERATION — OPERANDS + OPERATOR SHARE THE OPERATION COLOUR (FONT ONLY) */
.calc-tree-explorer .node.t-addition       { color: #3A8DCC !important; }
.calc-tree-explorer .node.t-subtraction    { color: #d54c4c !important; }
.calc-tree-explorer .node.t-multiplication { color: #5FB87A !important; }
.calc-tree-explorer .node.t-division       { color: #B87DA8 !important; }
.calc-tree-explorer .node.t-exponent       { color: #E57A3D !important; }
.calc-tree-explorer .node.t-squareroot     { color: #C9A832 !important; }
.calc-tree-explorer .node.t-logarithm      { color: #6BBCD0 !important; }
/* CARRIED RESULTS (ALREADY-COMPUTED VALUES) — GOLD, MATCHING THE EXPRESSION */
.calc-tree-explorer .node.carried { color: #C9A832 !important; font-weight: 700; }
.calc-tree-explorer .node.gone { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
.calc-tree-explorer .node.root-done { color: #3A8DCC !important; font-weight: 700; }

/*  ══════════════════════════════════════════════════════════════════════════
    BACKDROP — THE ATLAS DEEP-SPACE COLOUR FIELD BEHIND EVERY PILLAR (DARK THEME)
    A fixed, non-interactive canvas (assets/galaxy_backdrop.js) sits behind the
    whole app: the Atlas's gradient + violet glow, STARLESS and STATIC, so a
    pillar reads as the same world as the Atlas without a moving field competing
    with dense math. Light theme keeps its clean-paper look — the backdrop is
    hidden and the panels stay opaque.
    ══════════════════════════════════════════════════════════════════════════  */
.galaxy-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;                /* behind the transparent page, in front of the root background */
  pointer-events: none;
  background: #070708;
  display: none;              /* off unless the dark theme switches it on */
}
.galaxy-backdrop canvas { position: absolute; inset: 0; display: block; }

.dark-main .galaxy-backdrop { display: block; }

/*  DARK THEME: LET THE DEEP-SPACE COLOUR SHOW THROUGH. The page stops painting
    over the canvas; the surfaces become translucent dark glass tinted toward the
    Atlas palette; the navbar stays a near-solid anchor. ONE set of var overrides
    propagates everywhere the surface colors are used.  */
.dark-main {
  background-color: transparent !important;   /* stop the page painting over the canvas */
  /*  navbar + sidebar inherit the base solid #151515 (reverted) — the galaxy never bleeds through.  */
  --solution-bg-color: #181818;   /* VS Code "Dark Modern" panel background */
}
/*  SOLUTION PANEL = solid VS Code "Dark Modern" panel ground in dark mode (--solution-bg-color).
    Force the whole column + content + empty placeholder so the galaxy NEVER shows through it.  */
.dark-main #solution_column_id,
.dark-main .solution-column-default,
.dark-main .solution-content,
.dark-main .solution-placeholder { background-color: var(--solution-bg-color) !important; }