/* ============================================================================================
   🧩 15Feb26 - :root consolidation + redundancy cleanup (no behavior change intended)
   [SJ-ROOT-REF-15Feb26]
   - Consolidated multiple global :root blocks into ONE base block
   - Kept legacy iOS constant() safe-area fallback via @supports
   - Removed redundant/legacy vars: --sat-top and the old --app-top-only flow
   - Standardized on --appTop as the single source-of-truth; kept --app-top as an alias for compatibility
   ============================================================================================ */

:root {
  --sjContentPad: 20px; /* [SJ-WIDTH-01] shared content column padding */
  --sjRhHalo: 10px;      /* [SJ-WIDTH-02] Rabbit Hole halo spread */
  --sjRhHalo2: 20px;     /* [SJ-WIDTH-03] 2x halo (used for width math) */

  --cubeBaseWidth: 150px;  /* Global variable defining the base width of the cube */
  --cubeSideWidth: calc(var(--cubeBaseWidth) / 2);  /* Global variable for half the cube width, used for positioning sides */

  --drawerBaseWidth: 50%;  /* used for Top & Bottom Drawers */
  --drawerShiftWidth: calc((100% - var(--drawerBaseWidth)) / 2); /* Center Top & Bottom Drawers horizontally */
  --drawerBaseHeight: 90%;

  /* ==========================================================
     🧩 [SJ-SAFE-TOP-01] Safe-top / browser UI offsets (mobile)
     ----------------------------------------------------------
     - --safeTop: iOS safe-area inset (env / constant fallback)
     - --vvTop:   Chrome VisualViewport offsetTop (set in JS)
     - --fallbackTop: extra pad for Chrome portrait edge-cases (set in JS)
     - --appTop: effective top offset used by sticky headers + body padding
     ========================================================== */
  --safeTop: env(safe-area-inset-top, 0px);
  --vvTop: 0px;        /* JS updates this */
  --fallbackTop: 0px;  /* JS updates this */
  --appTop: max(var(--safeTop), var(--vvTop), var(--fallbackTop));

  /* 🧩 [SJ-SAFE-TOP-02] Back-compat alias (older rules used --app-top) */
  --app-top: var(--appTop);
}

 /* Legacy iOS fallback (rare, but harmless) */
@supports (padding-top: constant(safe-area-inset-top)) {
  :root {
    --safeTop: constant(safe-area-inset-top);
  }
}

/*
*{
    border: 1px solid red;
}
*/
.clampTest,
.lead-parent,
.content-section-style,
.header-rail {
  width: clamp(
    68%,               /* min at large screens */
    calc(-9vw + 693px), /* fluid from 700px→900px */
    90%                /* max at small screens */
  );
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;

  /* ✅ push entire app below browser UI */
  padding-top: var(--appTop);
}
#no-results {
    text-align: center;
    margin: 20px;
    display: none;
    color: red;
    font-weight: bold;
  }
#search {
    padding-right: 5px; /* Space for the clear button */
    width: 100%;
  }
.matchCountDisplay {
  font-size: clamp(14px, calc(11px + 1.5vw), 18px); /* vw 360px to 1440px */
  color: rgb(48, 146, 239);
  font-weight: bold;
  border: none;
  margin: 7px;
  background-color: #f8f9fb;
}
.highlight {
    background-color: rgb(255, 255, 0); /*yellow*/
  }
:root {
  --sjGlossarySearchCueColor: rgb(255, 255, 0);
}

.highlight.active {
  background-color: orange;  /* Or any color that contrasts with your muted highlight */
}

/* ✅ 2026-03-13 🧩 [SJ-GLOSS-SEARCH-CUE-07]
   Search cue for Glossary term lines when the actual match lives inside a still-closed Glossary rabbit hole.
   Border-only treatment keeps the term readable without flooding the whole background. */
.glossary-search-hit {
  display: inline-block;
  padding: 0 4px;
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--sjGlossarySearchCueColor);
}

/* ✅ 2026-03-13 🧩 [SJ-GLOSS-SEARCH-CUE-10]
   When Next/Prev lands on a hidden Glossary rabbit-hole hit, mirror the orange active state on the visible term cue. */
.glossary-search-hit.glossary-search-hit-active {
  box-shadow: 0 0 0 2px orange;
}

.header-container {
  width: 100%;
  text-align: center;
  position: sticky;
  top: var(--appTop); /* ✅ key change */
  left: 0;
  z-index: 1000;
}

.header-top-div, 
.header-bottom-div {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  }
.header-top-div {
  height: 50px;
  background-color: #212429;
  }
.header-bottom-div {
  height: 50px;
  background-color: #f8f9fb;
  border-bottom: 1px solid #d0d2d2;
}
/* Left Arrow and Main Menu icon in top div of header */
.header-icon-top-back,
.header-icon-top-menu,
.header-icon-bottom {
  width: clamp(25px, calc(7px + 6vw), 37px); /* vw 300px to 500px+ */
}

/* 🧩 [SJ-HEADER-RECIPES-LINK] NEW: SourJoe logo + "Back to Recipes" link (replaces back arrow) */
.back-to-recipes-box {
  justify-content: flex-start;   /* left aligned inside the 10% box */
}
.back-to-recipes-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  height: 100%;
  width: 100%;
  text-decoration: none;
  cursor: pointer;
}
.header-icon-top-sjlogo {
  width: clamp(24px, calc(12px + 3.5vw), 36px);
  height: auto;
  background: white;            /* helps the transparent logo pop on dark header */
  border-radius: 6px;
  padding: 3px;
}
.back-to-recipes-text {
  color: white;
  font-weight: bold;
  font-size: clamp(10px, calc(6px + 1.2vw), 14px);
  line-height: 1.05;
  text-align: left;
  white-space: normal;          /* ✅ allow wrap on very small screens */
}
.back-to-recipes-link:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
  border-radius: 6px;
}
.magnifyingGlass {
  width: clamp(30px, calc(4.5px + 8.5vw), 47px); /* vw 300px to 500px+ */
}
/* Left Arrow icon in top div of fixed geader */
.header-icon-top-back {
  border: 2px solid white;
  border-radius: 50%;  
}
/* Main Menu icon in top div of fixed header */
.header-icon-top-menu {
  border: 1px solid white;
  border-radius: 5px;
  background: white;
}
/* Gray & Blue back-to-top Arrows and Search mangnifying glass + X close blue & yellow */
.header-icon-bottom {
  margin: 10px 5px 0px 5px;
}
.center-container,
.header-top-center-container,
.header-bottom-center-container
/* .center-title-container 7Jun25 deletion*/ {
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: 100%;
  font-size: clamp(8px,calc(4.57px + 1.14vw),16px);
}
/* 7Jun25 addition*/
.center-title-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  font-size: clamp(14px,calc(-0.67px + 3.56vw),22px);  /* min vm = 375px, max vm = 600px */
}

.moreButton {
  border: 1px solid white;
  border-radius: 7px;
  color: white;
  font-weight: bold;
  font-size: clamp(11px, calc(6px + 1.67vw), 16px);  /* vw 300px to 600px */
  background-color: RGB(20, 137, 84);
  height: 30px;
  padding: 0 8px; /* 7Jun25 addition */
  width: clamp(
    40px,               /* min width at small screens */
    calc(3vw + 31px),  /* fluid from 300px→800px */
    55px                /* max width at large screens */
  );
  cursor: pointer;
}

.left-box, .right-box, .center-box {
  display: flex;
  align-items: center;
  justify-content: center;
  /* text-align: center; 7Jun25 deletion*/
  }

/* 🧩 [SJ-ICON-20260126] Normalize submenu icon footprint (Chapter + NON-Chapter)
   - Prevent the ellipsis icon (taller aspect ratio) from blowing up in height
   - Prevent the chapter submenu icon from overflowing its header
   - Ensures submenu icons never render taller than the standard top-menu icon
*/
img.left-box.content-title-menu[src*="iconBlueSubMenu.png"],
img.left-box.content-title-menu[src*="iconMenuBlue.png"],
img.left-box.content-title-menu[src*="iconBlueSubMenuEllipsis.png"],
img.right-box.content-title-menu[src*="iconBlueSubMenu.png"],
img.right-box.content-title-menu[src*="iconMenuBlue.png"],
img.right-box.content-title-menu[src*="iconBlueSubMenuEllipsis.png"] {
  width: clamp(25px, calc(10px + 5vw), 35px);
  height: clamp(25px, calc(10px + 5vw), 35px);
  max-height: clamp(25px, calc(10px + 5vw), 35px);
  object-fit: contain;
  display: block;
}

/* 🧩 [SJ-ICON-20260127] Bullet-proof menu icon sizing (class-based fallback)
   - Some icons (e.g., iconMenuBlue.png) can appear huge if a filename-based selector is missed
   - This ensures ANY image using .content-title-menu is constrained to the standard footprint
*/
img.content-title-menu{
  width: clamp(25px, calc(10px + 5vw), 35px) !important;
  height: clamp(25px, calc(10px + 5vw), 35px) !important;
  max-height: clamp(25px, calc(10px + 5vw), 35px) !important;
  object-fit: contain;
  display: block;
}


.center-box {
  flex: 1; /* 7Jun25 addition */
  font-size: clamp(11px, calc(5.6px + 1.8vw), 20px);  /* vw 360px to 500px */
  font-weight: bold;
  text-align: center;
  /* width: clamp(50%, calc(90% - 2.78vw), 80%); /* vw 360px to 1440px, reverse 7Jun25 deletion */
  }
.center-box.type-header {
  color: white;
  height: 95%;
  }
.left-box, .right-box {
  flex: 0 0  auto; /* 7Jun25 addition */
  width: clamp(60px, calc(-15px + 25vw), 110px);  /* vw 360px to 500px */
}
.center-box input {
  display: none; 
  margin: auto; 
  border: 1px solid yellow; 
  height: 100%;
  font-size: clamp(16px, calc(14.67px + 0.37vw), 20px); /* vw 360px to 1440px */
  text-align: center;
}
/* ====== LAYOUT FIXES BELOW 13Jun25 ====== */
/* These changes make bottom header items scrunch together */
/* 1. Top row: keep the TITLE truly centered even with "Recipes" on the left */
/* ✅ 04Mar26 🧩 [SJ-HEADER-CENTER-02] Balanced left/center/right widths across ALL screen sizes */
.header-top-center-container .left-box   { flex: 0 0 25%; width: 25%; }
.header-top-center-container .center-box { flex: 0 0 50%; width: 50%; }
.header-top-center-container .right-box  { flex: 0 0 25%; width: 25%; }

/* ✅ 04Mar26 🧩 [SJ-HEADER-WRAP-WIDTH-01]
   Keep the TOP header title/search *aligned* with the BOTTOM nav/search row.
   IMPORTANT UPDATE:
   Your 60% / 80% / 100% targets must be **relative to the chapter/section rail**
   (not the full viewport). So we introduce a .header-rail that uses the same
   width clamp as your chapter/section containers, then size the 3-box header
   containers as a % of that rail.
   NOTE: This does NOT change the 25/50/25 inner box split above.
*/
.header-rail {
  margin: 0 auto;               /* center the rail inside the full-width sticky header */
  height: 100%;                 /* match header row height */
  display: flex;                /* allows inner container to be centered */
  justify-content: center;
  align-items: center;
}
.header-top-center-container,
.header-bottom-center-container {
  width: 60%;
  margin: 0 auto; /* center the 3-box container inside the rail */
}
/* 2. Bottom row: auto‐sized, spaced, centered */
.header-bottom-center-container {
  /* keep your original justify-content and align-items */
  gap: 1rem;        /* small space between the three boxes */
}
.header-bottom-center-container .left-box,
.header-bottom-center-container .center-box,
.header-bottom-center-container .right-box {
  flex: 0 0 auto;    /* size to content */
  width: auto;       /* override any clamp widths */
}
/* ====== LAYOUT FIXES ABOVE 13Jun25 ====== */

* { 
    box-sizing: border-box;
}
.lead-parent {
  font-size: 1em;
  margin: auto;
  padding: 15px;
  display: flex;
  align-items: center; /* Centers content vertically */
  flex-wrap: wrap;
  margin-top: 15px;
  border: 3px solid #71a3c1;
  background-color: #cfe2ff;
  border-radius: 5px;
  /* width: 90%; */
}
.lead-child {
  width: 50%; /* Default: Each child takes 50% of the parent width */
  padding: 0px 20px;
  background-color: #cfe2ff;
  color: darkblue;
  margin: auto;
}
.lead-title {
  text-align: center;
  font-weight: bold;
  color: darkblue;
  font-size: 24px;
  font-size: clamp(20px, calc(17.6px + 0.8vw), 24px);  /* vw 300px to 800px */
}
.lead-box-verbiage {
  width: 90%;
  padding: 5px;
  margin: auto;
  color: darkblue;
}
.separator-line  {
    width: 90%;
    border-bottom: 1.5px solid #71a3c1;
    margin: auto;
    margin-top: 20px;
    text-align: center;
}

.messageContainer { /* for flipBoxMsg so page does not jerk as message changes */
  height: 70px;
  margin-top: 10px;
}
/* Responsive design: Stack children vertically on small screens */
@media  only screen and (max-width: 800px) {
    .lead-child {
        width: 100%; /* 100 Full width on small screens */
    }
}
.link-style {                     /* used for any text oriented links */
  font-weight: bold;              /* Makes the text bold */
  text-decoration: underline;     /* Adds an underline */
  color: blue;                  /* Sets the text color to blue */
  cursor: pointer;                /* Changes the cursor to a pointer on hover */
  display: inline;
}
.vertical-stack {
  flex-direction: column;  /* ✅ Stack children vertically */
}
.inline-vertical-center {
  display: inline-flex;
  align-items: center;    /* ✅ Vertically center the image + text */
  gap: 6px;               /* ✅ Space between image and text */
}
.list-icon {
  width: 100px;
  height: auto;             /* ✅ Maintains aspect ratio */
  display: block;
}
/* Styles for the main content sections */
.content-section { /* Partial Style for content sections PLUS searchable class */
  margin: auto; /* Centers the section horizontally */
  margin-top: 15px; /* Adds space above the section */
}
.content-section-style {  /* Used by sections for stlye in conjunction with content-section above */
  border: 1.5px solid #75ba75; /* Adds a green border around the section */
  border-radius: 5px; /* Rounds the corners of the section for a softer look */
  /* width: 68%; /* Sets the width to 68% of the parent container, making it responsive */
}
/* Adjusts the border width for elements with the 'content-section-chapter' class */
.content-section-chapter {
  border-width: 3px; /* Increases border thickness to 3px */
}

/* Styles for the title area within content sections */
.content-section-title {
  background-color: #e6f4ed; /* Sets a light green background color for contrast */
  position: sticky; /* Keeps the title visible while scrolling */
  top: calc(var(--appTop) + 100px); /* ✅ 15Feb26B [SJ-MOBILE-HEADER-03] Respect browser UI offset */
  /*width: 100%; /* Makes the title span the full width of its parent container 7Jun25 deletion*/
  margin: 0.5px; /* 17Jun25 need a slight spacing all around to avoid border crash for some reason!*/
  height: auto; /* allow tall titles / embedded headers */
  min-height: 40px;  /* keep old visual height as minimum */
  padding: 10px; /* Adds spacing inside the title area for better readability */
  border-bottom: 1.5px solid #75ba75; /* Adds a green bottom border for separation */
  border-radius: 5px; /* Rounds the corners slightly for a refined appearance */
  font-size: 3em; /* Sets a readable font size */
  font-weight: bold; /* Makes the title text bold */
  color: Gray; /* Changes text color to gray for a subtle contrast */
  display: flex; /* 7Jun25 addition */
  z-index: 100; /*/ 17Jun25 addition - stops video from dominating */
}
/* Styles for the main content text area */
.content-section-verbiage {
  /* ✅ 15Feb26C [SJ-PAD-01] Centralize horizontal padding so Rabbit panels can compute safely */
  --sjPadX: 20px;  /* default section inner padding */
  padding-left: var(--sjPadX);  /* Adds space to the left for better text alignment */
  padding-right: var(--sjPadX); /* Adds space to the right to prevent text from touching the edge */
  padding-bottom: 5px; /* Adds a little space at the bottom for better spacing */
  font-size: 1em; /* Sets a standard font size */
  overflow: hidden; /* Prevents content from overflowing the section */
  overflow-y: auto; /* Enables vertical scrolling when content exceeds max-height */
}
/* Styles for the main content text area */
.content-section-moreMsg {
  padding-bottom: 5px; /* Adds a little space at the bottom for better spacing */
  font-size: 1em; /* Sets a standard font size */
  overflow: hidden; /* Prevents content from overflowing the section */
  overflow-y: auto; /* Enables vertical scrolling when content exceeds max-height */
  display: none; /* the 'more' content is initially hidden then expanded by More... button */
}





/* ============================================================================================
   ✅ 16Feb26 🧩 [SJ-INTRO-SPLIT-01] Reusable "Intro Row" layout (Image ~33% + Verbiage ~67%)
   - Used for Essential Ingredients POC (and reusable elsewhere)
   - Desktop/tablet: side-by-side
   - Phones: stacks cleanly, image first then text
   ============================================================================================ */
.sjIntroSplit{
  display: flex;
  gap: 18px;
  align-items: flex-start;
  width: 100%;
}
.sjIntroSplit-media{
  flex: 0 0 33%;
  max-width: 33%;
}
.sjIntroSplit-img{
  width: 100%;
  height: auto;
  display: block;
}
.sjIntroSplit-copy{
  flex: 1 1 67%;
  min-width: 0; /* prevents overflow on narrow screens */
}
@media (max-width: 760px){
  .sjIntroSplit{
    flex-direction: column;
    gap: 12px;
  }
  .sjIntroSplit-media{
    flex: 0 0 auto;
    max-width: 100%;
  }
}

/* ✅ 16Feb26 🧩 [SJ-INTRO-WRAP-01] Division (1) common pattern: intro image with text wrap
   - Wraps an intro image on the left (typically ~33%) with flowing text
   - Uses existing .responsive-img + .responsive-img-left float behavior
   - This wrapper contains floats so following content doesn't "hug" the image
*/
.sjIntroWrap{
  display: flow-root; /* contains floated image */
  width: 100%;
}
.sjIntroWrap-img{
  /* (float + sizing handled by .responsive-img and .responsive-img-left) */
}

/* Ensures each section properly wraps around its content */
.content-section-verbiage > div,
.content-section-moreMsg > div {
  overflow: hidden;  /*Forces the div to contain floated elements (like images) */
  padding-bottom: 10px; /* Adds spacing below each section for readability */
  border-bottom: 1px solid #ddd; /* Adds a subtle separator between sections */
  margin: auto; /* Centers the div horizontally within its container */
  margin-top: 10px;  /*Adds spacing above each section */
}

/* ============================================================================================
   🐇 07Feb26 - Section divider rule (baby-step fix #1)
   [SJ-LINES-01] Rabbit Hole blocks should NOT have the faint divider line underneath.
   - The generic rule above adds a divider to ALL direct-child <div> blocks.
   - Each Rabbit Hole wrapper is also a direct-child <div> (class="sjRabbitHole-wrap"),
     so it was incorrectly receiving a bottom divider.
   ============================================================================================ */
.content-section-verbiage > div.sjRabbitHole-wrap,
.content-section-moreMsg  > div.sjRabbitHole-wrap{
  border-bottom: none;
}

/* ============================================================================================
   🐇 07Feb26 - Section divider rule (baby-step fix #1B)
   [SJ-LINES-01B] Some sections wrap ALL content (including moreMsg + Rabbit Hole) inside a single
   .content-section-verbiage > div wrapper (e.g., Culture, Starter).
   That wrapper was still receiving the generic divider border-bottom, which shows up as a line under
   the Rabbit Hole icon/panel.
   Fix: if a direct-child DIV contains a Rabbit Hole component anywhere inside it, suppress its divider.
   NOTE: Uses :has() (supported in modern Chrome/Edge/Safari).
   ============================================================================================ */
.content-section-verbiage > div:has(.sjRabbitHole-wrap){
  border-bottom: none;
}






/* Styles for images within content sections */
.responsive-img {
  width: 33%; /* Sets a default width of 125px */
  height: auto; /* Maintains the image's original aspect ratio */
  margin-top: 5px; /* Adds spacing above the image */
  margin-bottom: 5px; /* Adds spacing below the image */
}
.responsive-img-right {
  float: right; /* Allows text to wrap around the image */
  margin-right: 0px; /* Creates space between the image and the text on the right */
  margin-left: 15px; /* Ensures the image aligns with the left side of the container */
}
.responsive-img-left {
  float: left; /* Allows text to wrap around the image */
  margin-right: 15px; /* Creates space between the image and the text on the right */
  margin-left: 0px; /* Ensures the image aligns with the left side of the container */
}
.responsive-img-center {
  display: block;
  margin: 5px auto;
  max-width: 100%;
  height: auto;
}



/* ============ Tools section image normalization ============ */
/* Keeps tool images consistent in size/position, and avoids giant/tall outliers */
#toolsAtoZ .responsive-img {
  width: clamp(140px, 18vw, 230px);   /* bigger on PC */
  max-width: 45%;
  max-height: 185px;                  /* allows slightly taller images */
  height: auto;
  object-fit: contain;
  display: block;
  margin-top: 0px;
}



/* ✅ 16Feb26 🧩 [SJ-INTRO-SKETCH-TOOLS-AZ-01] Tools A→Z intro sketch: override section-specific image sizing
   - Fixes: Tools A→Z intro sketch appearing smaller than other section sketches
   - Keeps per-tool images inside Tools A→Z unaffected (they do NOT carry .sjIntroWrap-img) */
#toolsAtoZ .sjIntroWrap-img{
  width: var(--sjIntroSketchW, 33%);
  max-width: 33%;
  height: auto;
  max-height: none;
  object-fit: unset;
}
/* On small screens, remove floats so content doesn't get "crushed" */
@media screen and (max-width: 575px) {
  #toolsAtoZ .responsive-img-left,
  #toolsAtoZ .responsive-img-right {
    float: none;
    width: min(200px, 72%);     /* smaller on phone */
    max-width: 72%;
    max-height: 150px;          /* prevents “too tall” phone images */
    margin: 8px auto 12px auto;
  }
}

/* Styles for a specific image used in the book stack */
.sjBookStack {
  width: 80px; /* Sets a fixed width for the book stack image */
  height: auto; /* Maintains the original aspect ratio */
  margin-left: 20px; /* Adds left margin to position the image properly */
}

/* Styles for general subject titles */
.general-subject-title {
  font-weight: bold; /* Makes the title text bold */
  font-size: larger; /* Increases font size for emphasis */
  color: darkgreen; /* Sets the text color to dark green for visual distinction */
}
.banner {
  width: 100%;
  background-color: #f8f9fb;
  border: 1px solid darkgray;
  text-align: center;
}
.TOC {
  color: white; /* Sets the text color to white for TOC Titles */
}
/* Styles for subtitles in content sections */
.general-subject-subtitle {
  font-weight: bold; /* Makes subtitle text bold */
  color: darkgreen; /* Sets the text color to dark green for visual distinction */
}
/* Styles for subtitles in Glossary Rabbit Hole sections */
.rabbitHole-subject-subtitle {
  font-weight: bold; /* Makes subtitle text bold */
  color: mediumblue; /* Sets the text color to dark green for visual distinction */
  margin-left: 5px;

  /* 15Feb26 [SJ-GLOSS-RH-SPACING-01]
     Tighten the vertical spacing around Glossary Rabbit Hole subsection titles.
     Goal:
       - Small "paragraph-ish" gap ABOVE the title
       - Very small "sentence-ish" gap BELOW the title (close to the related verbiage)
     Notes:
       - These titles are <h4> elements, so browser default margins are large unless overridden. */
  margin-top: 4px;
  margin-bottom: 2px;
  line-height: 1.15;
  padding: 0;
}
/* Enable smooth scrolling behavior for anchor links */
html {
  scroll-behavior: smooth; /* When clicking an anchor link, the page scrolls smoothly instead of jumping instantly */
}

/* Clearfix method to prevent layout issues with floated elements */
.clearfix::after {
  content: ""; /* Creates an empty pseudo-element after elements with the .clearfix class */
  display: block; /* Makes the pseudo-element behave like a block-level element */
  clear: both; /* Ensures the parent element fully contains floated children */
}
/* Allows child divs within parent to grow/shrink/align */
.flex-parent {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; /* Allows children to wrap to the next line */
  gap: 5px; /* Optional: adds space between items */
  padding: 5px;
}
.flex-child {
  padding: 5px;
  text-align: center;
  flex: 1 1 200px;  /* flex-basis of 200px and grow/shrink as needed */
  max-width: 300px;
  height: 200px;    /* fixed height for consistency */
  overflow: hidden; /* hide any overflow from the image */
}
.flex-child img {
  width: 100%;
  object-fit: cover; /* image covers the container, cropping if needed */
  display: block;    /* remove inline spacing issues */
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  aspect-ratio: 4 / 3;  /* or 1 / 1 for squares, or 16 / 9 for widescreen */
  height: auto;         /* Let aspect ratio handle height */
}
/* FLEX CONTAINER */
.flex-parent-general {
  display: flex;
  flex-wrap: wrap;       /* allow children to wrap */
  gap: 1rem;             /* space between items */
  padding: 1rem;
}

/* FLEX ITEMS */
.flex-child-general {
  flex: 1 1 200px;       /* base width 200px; shrink or grow as needed */
  padding: 0.5rem;
  box-sizing: border-box;
  /* establish a block formatting context so floats are contained */
  overflow: auto;
  background: #f9f9f9;   /* just for visual demo */
  border-radius: 4px;
}

/* COMMON IMAGE STYLING */
.img-base {
  width: 150px;          /* or whatever you like */
  height: auto;
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0,0,0,0.1);
  object-fit: cover;
  display: block;        /* remove inline-img gaps */
}

/* FLOAT UTILITIES for img-base*/
.float-left {
  float: left;
  margin: 0 1em 1em 0;   /* text wraps on right and below */
}

.float-right {
  float: right;
  margin: 1em 0 0 1em;   /* text wraps on left and above */
}

/* Styles for multi-colum lists */
.list-container {
  display: flex;
  flex-wrap: wrap;              /* ✅ allows wrap on smaller screens */
  justify-content: center;      /* ✅ center across row */
  gap: 10px;                    /* ✅ space between columns */
  padding: 10px;
}
.column {
  padding: 10px 16px;
  min-width: 240px; /* Prevents columns from shrinking too soon */
  min-width: 140px;             /* ✅ controls how narrow columns get */
  flex: 1 1 200px;              /* ✅ flexible responsive columns */
}
.column ul {
  text-align: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.column li {
  white-space: nowrap;
  font-size: clamp(0.8rem, calc(1vw + 0.6rem), 1.2rem);
  padding: 4px 0;
}

/* ✅ 16Feb26 🧩 [SJ-TOOLS-COLS-02]
   Essential Tools: restore TRUE 2-column layout for sketches+links on wider screens.
   Fix: previous flex-basis math + column padding caused early wrap (looked like 1 left column).
   Approach: use CSS Grid for #toolsMoreMsg only (no impact to other lists).
*/
@media only screen and (min-width: 720px) {
  #toolsMoreMsg .list-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    justify-content: stretch;
    align-items: start;
  }

  /* Grid item wrappers */
  #toolsMoreMsg .column {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }
}




/* ✅ 16Feb26 🧩 [SJ-TOOLS-COLS-01] Essential Tools: FORCE 2 columns on wider screens
   After the 3-division restructure, some layouts wrapped the two UL columns too early.
   Scope is LIMITED to #toolsMoreMsg so other lists remain unchanged.
*/


/* 🧩 [SJ-REC-HEADER-FIX] Let the My First Bake header grow to fit sjRecipes */
#recipeFactoids .content-section-title{
  height:auto !important;                  /* override fixed sticky height */
  padding:8px 0;                           /* space above/below blue header */
  display:flex;
  align-items:center;
  justify-content:center;
}

#recipeFactoids .center-title-container{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Ensure inner sjRecipes header is just a centered block, not sticky */
#recipeFactoids .header-wrap{
  position:static;
  top:auto;
  margin:0 auto;
  background:transparent;
}

@media only screen and (max-width: 1800px) {
  /* ✅ 04Mar26 🧩 [SJ-HEADER-WRAP-WIDTH-02]
     Large screens (default intent): 60% width container.
     (This block is mostly a harmless reinforce; smaller breakpoints override below.)
  */
  .header-top-center-container,
  .header-bottom-center-container {
    width: 60%;
  }
}

@media only screen and (min-width: 1000px) {
  .lead-child {
    width: 40%;
  }
}

@media only screen and (max-width: 1000px) {
  .responsive-img {
    width: 50%; /* Sets a default width of 50% */
  }
  /* ✅ 04Mar26 🧩 [SJ-HEADER-WRAP-WIDTH-03] Medium screens: 80% */
  .header-top-center-container,
  .header-bottom-center-container {
    width: 80%;
  }
}

@media only screen and (max-width: 800px) {
  .sjBookStack {
    width: 50px;
    margin-left: 30px;
  }
  .sjLogo {
    width: 80px;
    margin-right: 30px;
  }
  .sjLoneLoaf {
    width: 90px;
    margin-left: 20px;
    margin-right: 20px;
  }
  /* ✅ 04Mar26 🧩 [SJ-HEADER-WRAP-WIDTH-04] Small screens: 100% */
  .header-top-center-container,
  .header-bottom-center-container {
    width: 100%;
  }
}
@media only screen and (max-width: 500px) {
  /* ✅ 04Mar26 🧩 [SJ-HEADER-CENTER-02A] Keep same 25/50/25 split on small screens (can tweak later) */
  .header-top-center-container .left-box   { flex: 0 0 25%; width: 25%; }
  .header-top-center-container .center-box { flex: 0 0 50%; width: 50%; }
  .header-top-center-container .right-box  { flex: 0 0 25%; width: 25%; }
  
.back-to-recipes-link { gap: 4px; }

  .responsive-img {
    width: 100%; /* 100% width for small screens */
  }
  .tagline {
    font-size: 10px;
  }
  .list-container {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }

  .column {
    width: 100%;
    max-width: none;
    padding: 0;

    display: flex;               /* ✅ NEW: makes the column a flex container */
    justify-content: center;     /* ✅ NEW: centers the <ul> inside it */
  }

  .column ul {
    text-align: center;
  }

  .column li {
    padding: 6px 0;
  }
}

@media only screen and (max-width: 400px) {
  .header-icon-top {
    width: 20px;
  }
  .center-box.type-header {
    font-size: 16px;
  }
  :root {
    --cubeBaseWidth: 140px; /* Global variable defining the base width of the cube */
  }
}


/* ============================================================================================
   📱 14Feb26 - Glossary (phone) list width + bullet alignment + wider glossary rabbit holes
   [SJ-GLOSS-MOB-01]

   Problem (phone view):
   - Default <ul> indentation wastes horizontal space, so glossary bullets + term text feel too narrow.
   - The bullet column sits too far to the right relative to the big A/B/C... letter heading.
   - Glossary Rabbit Hole “envelope” boxes inherit the same left inset (because they live inside <ul><li>).

   Fix (scoped to Glossary A→Z ONLY, and only on small screens):
   - Reduce the glossary content side padding slightly.
   - Allow overflow so list markers + RH halo shadows are not clipped.
   - Reduce the <ul> left padding so bullets sit closer to the letter’s centerline.
   - Tighten the Rabbit Hole halo margins just for the glossary to maximize usable width.
   ============================================================================================ */

@media screen and (max-width: 575px) {

  /* 🟨 ADD: Smaller halo math ONLY inside Glossary, so RH envelopes can be wider on phones. */
  #glossaryAtoZ{
    --sjRhHalo: 6px;      /* was 10px globally */
    --sjRhHalo2: 12px;    /* was 20px globally */
  }

  /* 🟨 ADD: Glossary doesn't need float-clipping; let markers + shadows paint fully. */
  #glossaryAtoZ .content-section-verbiage{
    /* ✅ 15Feb26C [SJ-PAD-01A] Glossary uses tighter padding; expose it via --sjPadX */
    --sjPadX: 12px;       /* was 20px globally */
    padding-left: var(--sjPadX);
    padding-right: var(--sjPadX);
    overflow: visible;
    overflow-y: visible;
  }

  /* 🟨 ADD: Make the direct-child wrappers “shadow-safe” as well (prevents subtle clipping). */
  #glossaryAtoZ .content-section-verbiage > div{
    overflow: visible;
  }

  /* 🟨 ADD: Pull bullets left (wider list) so the marker column lands under the letter heading. */
  #glossaryAtoZ ul{
    margin-left: 0;
    padding-left: 1.15em;         /* tighter than browser default (~40px) */
  }

  /* 🟨 ADD: Small spacing between glossary items for thumb-scrolling/readability. */
  #glossaryAtoZ ul > li{
    margin-bottom: 10px;
  }
}

/* --- Leaven Gallery Styles --- */

.leaven-gallery-parent {
  display: flex;
  flex-wrap: wrap;         /* Allows boxes to wrap to the next line */
  justify-content: center; /* Keeps wrapped items centered */
  gap: 6px;                /* Minimal margins between boxes */
  width: 100%;
  box-sizing: border-box;
}

.leaven-gallery-child {
  /* Formula: 33.333% width minus the gap size. 
     This ensures 3 boxes fit perfectly on one line.
  */
  flex: 0 0 calc(33.333% - 6px);
  
  box-sizing: border-box;
  text-align: center;
  /* Optional: Add a border or background if you want visual separation */
  /* border: 1px solid #ccc; */ 
}

/* Ensures images fill their box */
.leaven-gallery-child img {
  width: 100%;
  height: auto;
  display: block; 
}

/* --- Responsive Behavior --- */

/* On screens smaller than 800px, show 2 per row */
@media (max-width: 800px) {
  .leaven-gallery-child {
    flex: 0 0 calc(50% - 6px);
  }
}

/* On screens smaller than 500px, show 1 per row (full width) */
@media (max-width: 500px) {
  .leaven-gallery-child {
    flex: 0 0 100%;
  }
}


/* ============================================================================================
   🐇 23Jan26 - Rabbit Hole "More..." icon (Nerdy Deep Dive blocks)
   [SJ-RH-CSS-01] Drop-in component: centered rabbit icon + hidden detail panel
   - Icon scales conservatively (PC: subtle; mobile: a bit larger but not aggressive)
   - Uses background-image so existing Search "expand/collapse all" logic stays intact
   ============================================================================================ */

.sjRabbitHole-wrap{
  width: 100%;
  display: block;
  margin: 10px 0 6px 0;
}

.sjRabbitHole-button{
  /* Center the icon inside the parent section */
  display: block;
  margin: 0 auto;

  /* Conservative scaling */
  width:  clamp(73px, 4.73vw, 105px);
  height: clamp(73px, 4.73vw, 105px);

  /* Rabbit icon */
  background-image: url("https://sjmedia0.w3spaces.com/sjICONS/rabbitHoleMORE.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;

  /* Keep "More..." text for Search logic, but make it invisible */
  color: transparent;
  font-size: 0px;
  line-height: 0px;

  cursor: pointer;
  user-select: none;

  /* Subtle affordance */
  transition: transform 0.12s ease, filter 0.12s ease;
}

/* --------------------------------------------------------------------------------------------
   🐇 23Jan26 - Tiny "delight" bounce
   [SJ-RH-CSS-02] Subtle, tasteful bounce on hover (PC) and click/tap (all devices)
   -------------------------------------------------------------------------------------------- */

@keyframes sjRabbitBounce {
  0%   { transform: translateY(0px)  scale(1);    }
  30%  { transform: translateY(-4px) scale(1.02); }
  55%  { transform: translateY(0px)  scale(0.99); }
  78%  { transform: translateY(-2px) scale(1.01); }
  100% { transform: translateY(0px)  scale(1);    }
}

/* Hover bounce only on devices that actually hover (prevents weirdness on touch screens) */
@media (hover: hover) and (pointer: fine) {
  .sjRabbitHole-button:hover{
    animation: sjRabbitBounce 0.55s ease;
    filter: saturate(1.05) contrast(1.05);
  }
}

/* Click/tap bounce is applied by JS via this class */
.sjRabbitHole-bounce{
  animation: sjRabbitBounce 0.55s ease;
}

.sjRabbitHole-button:active{
  transform: translateY(0px);
}

.sjRabbitHole-button:focus-visible{
  outline: 2px solid rgba(20,137,84,0.75);
  outline-offset: 4px;
  border-radius: 10px;
}

/* Optional: tiny visual cue when open */
.sjRabbitHole-button[data-rabbit-state="open"]{
  background-image: url("https://sjmedia0.w3spaces.com/sjICONS/rabbitHoleLESS.png");
  filter: none;
}


.sjRabbitHole-panel{
  display: none; /* default hidden */

  /* 28Jan26 [SJ-WIDTH-04]
     Keep Rabbit Hole box aligned with Section content width.
     - Border box is slightly narrower than the content column by 2x halo so the halo can paint on all 4 sides.
     - This makes the Section Verbiage, moreMsg, and Rabbit Hole boxes visually match on narrow screens. */
  margin: 4px var(--sjRhHalo) 0 var(--sjRhHalo);
  width: calc(100% - var(--sjRhHalo2));
  max-width: 100%;
  box-sizing: border-box;

  /* Gentle separation from the main section content */
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #75ba75; /* match chapter card border thickness */
  background: rgba(255,255,255,0.80);

  /* ✅ pale green “halo” around the nerd card */
  box-shadow:
    0 0 0 var(--sjRhHalo) rgba(117,186,117,0.18),
    0 3px 12px rgba(117,186,117,0.22);
}



.sjRabbitHole-panel p{
  margin: 0 0 10px 0;
}

/* ============================================================================================
   🐇 15Feb26 - MAJOR SURGERY: Section "More/Less" → Rabbit icons
   [SJ-MAJOR-SURGERY-CSS-01]
   - Header toggle becomes a Rabbit icon (uses same MORE/LESS artwork as Nerd Mode)
   - Hidden section content becomes a Rabbit-styled panel (.sjSectionRH-panel)
   - moreMsg content is wrapped in .sjSectionRH-moreMsg and inserted at top of the panel
   ============================================================================================ */

/* Header Rabbit toggle (replaces the old green More/Less button) */
.sjSectionRH-button{
  border: none !important;
  background-color: transparent !important;
  padding: 0 !important;

  width: clamp(30px, calc(10px + 4vw), 42px) !important;
  height: clamp(30px, calc(10px + 4vw), 42px) !important;
  min-width: clamp(30px, calc(10px + 4vw), 42px) !important;

  border-radius: 10px;

  background-image: url("https://sjmedia0.w3spaces.com/sjICONS/rabbitHoleMORE.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;

  /* Hide text tokens (Search logic uses aria-expanded, not visible text) */
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;

  cursor: pointer;
  user-select: none;
}

.sjSectionRH-button[data-rabbit-state="open"]{
  background-image: url("https://sjmedia0.w3spaces.com/sjICONS/rabbitHoleLESS.png");
}

.sjSectionRH-button:focus-visible{
  outline: 2px solid rgba(20,137,84,0.75);
  outline-offset: 4px;
}

/* Section-level Rabbit panel (absorbs moreMsg + optional deep-dive content) */
.sjSectionRH-panel{
  display: none; /* default hidden */

  /* ✅ 15Feb26B [SJ-RH-CSS-01] Add breathing-room above/below the Rabbit panel */
  margin: 10px var(--sjRhHalo) 12px var(--sjRhHalo);

  /* Match Nerd Mode geometry so widths stay visually aligned */
  width: calc(100% - var(--sjRhHalo2));
  max-width: 100%;
  box-sizing: border-box;

  /* ✅ 15Feb26C [SJ-RH-CSS-02] Decorative (non-clickable) Rabbit icon at top-center */
  position: relative;
  --sjSectionRHDecoSize: clamp(73px, 4.73vw, 105px); /* matches legacy clickable Rabbit icon size */

  /* Extra top padding to reserve space for the decorative icon (no overlap with text) */
  padding: calc(8px + var(--sjSectionRHDecoSize)) 14px 14px 14px;

  border-radius: 12px;
  border: 1px solid #75ba75;
  background: rgba(255,255,255,0.80);

  box-shadow:
    0 0 0 var(--sjRhHalo) rgba(117,186,117,0.18),
    0 3px 12px rgba(117,186,117,0.22);
}

.sjSectionRH-panel::before{
  content: "";
  position: absolute;
  top: 2px;  /* ✅ 15Feb26C [SJ-RH-ICON-01] top-center */
  left: 50%;
  transform: translateX(-50%);

  width: var(--sjSectionRHDecoSize);
  height: var(--sjSectionRHDecoSize);

  background-image: url("https://sjmedia0.w3spaces.com/sjICONS/rabbitHoleMORE.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;

  pointer-events: none;  /* icon is purely visual */
  user-select: none;
  opacity: 0.95;
}

/* ✅ 15Feb26B [SJ-RH-CSS-03] Mobile: make the Rabbit panel as wide as possible */
/* ✅ 15Feb26C [SJ-RH-WIDTH-01]
   Responsive: make Section Rabbit panel as wide as possible WITHOUT overshooting the container.
   - Uses --sjPadX (actual section padding) so special sections like Glossary (12px) stay aligned.
   - Keeps the outer "halo" landing right at the container edge. */
@media (max-width: 900px){
  .sjSectionRH-panel{
    margin-left:  calc(var(--sjRhHalo) - var(--sjPadX));
    margin-right: calc(var(--sjRhHalo) - var(--sjPadX));
    width: calc(100% + (var(--sjPadX) - var(--sjRhHalo)) + (var(--sjPadX) - var(--sjRhHalo)));
  }
}


/* Prevent generic section-divider rule from drawing a faint line under the panel */
.content-section-verbiage > div.sjSectionRH-panel{
  border-bottom: none !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
}

/* Optional separator between absorbed moreMsg content and deeper material */
.sjSectionRH-sep{
  border: 0;
  height: 1px;
  background: rgba(117,186,117,0.35);
  margin: 10px 0;
}

/* Keep the old moreMsg "division" look inside the new panel (where applicable) */
.sjSectionRH-moreMsg > div{
  overflow: hidden;              /* contain floated images */
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd; /* subtle divider like the legacy moreMsg */
  margin: auto;
  margin-top: 10px;
}
.sjSectionRH-moreMsg > div:last-child{
  border-bottom: none;
  padding-bottom: 0;
}


/* ============================================================================================
   🐇 13Feb26 - Glossary Rabbit Hole "ENVELOPE" box
   [SJ-GLOSS-RH-ENVELOPE-01]
   Goal: When a glossary term opens, make ONE continuous Rabbit Hole box that includes:
         - the glossary term line (hyperlink) + short definition
         - the rabbit hole content panel below it
   Approach:
         - JS adds .sjGlossary-open to the owning <li>
         - CSS draws the outer box on the <li>
         - CSS flattens the inner .glossary-panel so we don't get "box inside a box"
   ============================================================================================ */

#glossaryAtoZ li.sjGlossary-open {
  /* Use the same width/halo math as your Rabbit Hole cards so everything feels consistent */
  margin: 8px var(--sjRhHalo) 14px var(--sjRhHalo);
  width: calc(100% - var(--sjRhHalo2));
  max-width: 100%;
  box-sizing: border-box;

  padding: 12px 14px;
  border-radius: 12px;

  /* Outer "Rabbit Hole" envelope */
  border: 1px solid #75ba75;              /* match .sjRabbitHole-panel border thickness */
  border-left: 3px solid #2980b9;         /* optional blue cue line (move it to the OUTER box) */
  background: rgba(255,255,255,0.80);

  /* Same soft halo look as the Rabbit Hole panel */
  box-shadow:
    0 0 0 var(--sjRhHalo) rgba(117,186,117,0.18),
    0 3px 12px rgba(117,186,117,0.22);

  /* ✅ 2026-03-04 🧩 [SJ-GLOSS-OVERLAY-CSS-02] Lift the open term ABOVE the grey veil */
  position: relative;
  z-index: 1991; /* veil is 1990; drawers remain above at 2000+ */

  /* IMPORTANT: your global li forces nowrap; turn wrapping back on inside the glossary envelope */
  white-space: normal;
}

/* ============================================================================================
   ✅ 2026-03-04 🧩 [SJ-GLOSS-OVERLAY-CSS-01] Glossary term veil overlay
   - Dedicated veil (NOT the drawer overlay) so glossary highlighting cannot interfere with drawers.
   - Sits above the sticky header (1000) but below drawers (2000+).
   ============================================================================================ */

.sjGlossary-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(169, 169, 169, 0.70);
  z-index: 1990;

  /* Hidden by default */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0s 0.25s;
}

.sjGlossary-overlay.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s ease;
}


/* ✅ 2026-03-07 🧩 [SJ-GLOSS-OVERLAY-CSS-03] Lift the OPEN glossary envelope ABOVE the veil
   - The veil is z-index: 1990
   - The active glossary <li> (term line + panel) must sit above it so it is NOT dimmed.
*/
#glossaryAtoZ li.sjGlossary-open {
  position: relative;
  z-index: 1991;
}


/* Flatten the INNER panel so the envelope looks like ONE box */
#glossaryAtoZ li.sjGlossary-open > .sjRabbitHole-panel.glossary-panel {
  margin: 10px 0 0 0 !important;
  width: 100% !important;
  max-width: 100% !important;

  padding: 0 !important;
  border: none !important;
  border-left: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  white-space: normal !important;
}

/* ============================================================================================
   🐇 28Jan26 - Rabbit Hole halo fix (FINAL OVERRIDE - must be AFTER the generic overflow rules)
   [SJ-RH-CSS-03] Prevent left/right shadow clipping inside Section "moreMsg".
   - Keep float containment WITHOUT overflow clipping using flow-root.
   - Give moreMsg the same side padding as main verbiage (20px).
   ============================================================================================ */
.content-section-moreMsg{
  /* 28Jan26 [SJ-WIDTH-05]
     Make Section Verbiage and moreMsg use the SAME content column width.
     - Some sections place .content-section-moreMsg inside .content-section-verbiage (already padded).
     - Others place it as a sibling (no padding).
     So we pad by default, then CANCEL padding when nested to avoid double-inset on narrow screens. */
  padding-left: var(--sjContentPad);
  padding-right: var(--sjContentPad);

  clear: both;             /* ✅ ensures moreMsg starts below floated images (Culture fix) */
  overflow: visible;       /* override earlier overflow:hidden */
  overflow-y: visible;     /* override earlier overflow-y:auto */
}

/* 28Jan26 [SJ-WIDTH-06] If moreMsg lives INSIDE .content-section-verbiage, don't double-pad. */
.content-section-verbiage .content-section-moreMsg{
  padding-left: 0;
  padding-right: 0;
}

.content-section-moreMsg > div{
  overflow: visible;       /* override earlier overflow:hidden */
  display: flow-root;      /* contains floated images without clipping shadows */
}

/* ============================================================================================
   ✅ 2026-03-07 🧩 [SJ-RH-OVERLAY-CSS-01] General Rabbit Hole veil (dims background, lifts open panel)
   - Used for NON-GLOSSARY Rabbit Holes only (Glossary has its own veil).
   - Z-index: veil 1980, open panel 1981, drawers 2000+
   ============================================================================================ */

.sjRabbitHole-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(169, 169, 169, 0.70);
  z-index: 1980;

  /* Hidden by default */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0s 0.25s;
}

.sjRabbitHole-overlay.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s ease;
}

/* Lift an open Rabbit Hole panel above the veil */
.sjRabbitHole-open {
  position: relative;
  z-index: 1981; /* veil is 1980; header is ~1000; drawers remain above at 2000+ */
}

/* ============================================================================================
   ✅ 2026-03-07 🧩 [SJ-RH-OVERLAY-CSS-02] Keep OPEN Rabbit Hole pane crisp above veil
   Problem: many Rabbit Hole panels use translucent backgrounds (inline rgba) so the grey veil
            shows THROUGH them, making the panel look "veiled" even when it is above the overlay.
   Fix: when a Rabbit Hole panel is open AND the veil is active, force an (almost) solid background.
   ============================================================================================ */

.sjRabbitHole-panel.sjRabbitHole-open{
  position: relative;
  z-index: 1985 !important;                 /* stronger lift above veil */
  background-color: rgba(255,255,255,0.98) !important;  /* block the veil tint */
}