/* PM namespace styles (moved from pm/index.html) */




/* Typography and rhythm */
.pm-container, 
.fragment-wrapper[data-f_type="p_"]:not(.pm-subtitle),
.fragment-wrapper[data-f_type="q_"] {
  /* line-height: 1.65; */
  line-height: 1.5;
  font-size: 1rem;
  font-size: 0.95rem !important;
}

/* Link styles using DaisyUI semantic colors */
.pm-container a {
  color: var(--color-info);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--color-info) 40%, transparent);
  text-underline-offset: 0.2em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease, text-underline-offset 0.2s ease;
}

.pm-container a:hover {
  color: var(--color-info);
  text-decoration-color: color-mix(in oklab, var(--color-info) 70%, transparent);
  text-underline-offset: 0.35em;
}

/* .pm-container a:visited {
  color: var(--color-secondary);
  text-decoration-color: color-mix(in oklab, var(--color-secondary) 40%, transparent);
} */

/* .pm-container a:visited:hover {
  color: var(--color-secondary);
  text-decoration-color: color-mix(in oklab, var(--color-secondary) 70%, transparent);
  text-underline-offset: 0.35em;
} */




/* .pm-container .fragment {
  line-height: 1.65;
} */


/* Bad idea */
/* Now p IS the fragment, not nested inside it */
/* .pm-container p.fragment {
  margin: 0.5rem 0 0.9rem;
} */





.fragment-wrapper[data-f_type="image_"] {
  padding: 1rem;
  border: var(--color-base-200) 1px solid;
  border-radius: var(--radius-box);
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.fragment-wrapper[data-f_type="table_"] {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .fragment-wrapper[data-f_type="image_"] {
    /* padding: 0.5rem; */
    border-radius: var(--radius-box);
    margin-bottom: 0.5rem;
  }
}


/* 640 px */
@media (max-width: 40rem) {
  .fragment-wrapper[data-f_type="image_"] {
    padding: 0.25rem;
    border-radius: var(--radius-box);
    margin-bottom: 0.25rem;
  }
}

.fragment-wrapper[data-f_type="p_"] + .fragment-wrapper[data-f_type="p_"] {
  margin-top: 1rem;
}


/* Increase margin when p_ is followed by content-heavy elements */
.fragment-wrapper[data-f_type="p_"] + .fragment-wrapper[data-f_type="svg_"]
/* , .fragment-wrapper[data-f_type="p_"] + .fragment-wrapper[data-f_type="image_"] */
/* , .fragment-wrapper[data-f_type="p_"] + .fragment-wrapper[data-f_type="codex_"] */
/* , .fragment-wrapper[data-f_type="p_"] + .fragment-wrapper[data-f_type="code_"] */
, .fragment-wrapper[data-f_type="p_"] + .fragment-wrapper[data-f_type="graph_"]
, .fragment-wrapper[data-f_type="p_"] + .fragment-wrapper[data-f_type="tabvar_"] {
  margin-top: 2.25rem;
}


.fragment-wrapper[data-f_type="svg_"] {
  margin-bottom: 2.25rem;
}





pm-radio > div > button {
  border-width: 1.5px !important;
  font-weight: 400 !important;
  /* DEFAULT: Filled/solid appearance */
  --btn-shadow: "" !important;
  --btn-fg: var(--color-base-100) !important;
  --btn-bg: var(--btn-color, var(--color-base-content)) !important;
  --btn-border: var(--btn-color, var(--color-base-content)) !important;
  --btn-noise: none !important;
}

/* Default filled state for outline buttons */
pm-radio > div > button.btn-outline {
  --btn-bg: var(--btn-color, var(--color-base-content)) !important;
  --btn-fg: var(--color-base-100) !important;
}

/* Default filled state for soft buttons */
pm-radio > div > button.btn-soft {
  --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 5%, var(--color-base-100)) !important;
  --btn-fg: var(--btn-color, var(--color-base-content)) !important;
  --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 30%, var(--color-base-100)) !important;
}

/* Color-specific overrides for filled default state */
pm-radio > div > button.btn-primary {
  --btn-color: var(--color-primary) !important;
  --btn-bg: var(--color-primary) !important;
  --btn-fg: var(--color-primary-content) !important;
}

pm-radio > div > button.btn-secondary {
  --btn-color: var(--color-secondary) !important;
  --btn-bg: var(--color-secondary) !important;
  --btn-fg: var(--color-secondary-content) !important;
}

pm-radio > div > button.btn-accent {
  --btn-color: var(--color-accent) !important;
  --btn-bg: var(--color-accent) !important;
  --btn-fg: var(--color-accent-content) !important;
}

/* HOVER: Outline appearance */
pm-radio > div > button:hover {
  --btn-shadow: "" !important;
  --btn-bg: transparent !important;
  --btn-fg: var(--btn-color, var(--color-base-content)) !important;
  --btn-border: var(--btn-color, var(--color-base-content)) !important;
  --btn-noise: none !important;
}

/* Hover for soft buttons */
pm-radio > div > button.btn-soft:hover {
  --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 8%, var(--color-base-100)) !important;
  --btn-fg: var(--btn-color, var(--color-base-content)) !important;
  --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 10%, var(--color-base-100)) !important;
}




.fragment-wrapper[data-f_type="p_"] + .fragment-wrapper[data-f_type="table_"] {
  margin-top: 0.75rem;
}


/* .fragment-wrapper[data-f_type="table_"] + .fragment-wrapper[data-f_type="p_"] {
  margin-top: 2.25rem;
} */

/* Radios buttons */
.fragment-wrapper[data-f_type="radio_"],
.fragment-wrapper[data-f_type="number_"] {
  margin-top: 0.25rem !important;
  margin-bottom: 0.75rem !important  ;
}


/* Radio buttons spacing when following text/lists */
.fragment-wrapper[data-f_type="p_"] + .fragment-wrapper[data-f_type="radio_"]
, .fragment-wrapper[data-f_type="ul_"] + .fragment-wrapper[data-f_type="radio_"]
, .fragment-wrapper[data-f_type="ol_"] + .fragment-wrapper[data-f_type="radio_"]
, .fragment-wrapper[data-f_type="p_"] + .fragment-wrapper[data-f_type="number_"]
, .fragment-wrapper[data-f_type="ul_"] + .fragment-wrapper[data-f_type="number_"]
, .fragment-wrapper[data-f_type="ol_"] + .fragment-wrapper[data-f_type="number_"]  {
  margin-top: 0.75rem !important;
}

/* .fragment-wrapper[data-f_type="h2_"] + .fragment-wrapper[data-f_type="radio_"]
, .fragment-wrapper[data-f_type="h3_"] + .fragment-wrapper[data-f_type="radio_"]
, .fragment-wrapper[data-f_type="h4_"] + .fragment-wrapper[data-f_type="radio_"] {
  margin-top: 1rem;
} */


/* When radio is followed by a heading, reduce the heading's top margin */
/* .fragment-wrapper[data-f_type="radio_"] + .fragment-wrapper[data-f_type="h2_"] h2.fragment {
  margin-top: 1.5rem;
}

.fragment-wrapper[data-f_type="radio_"] + .fragment-wrapper[data-f_type="h3_"] h3.fragment {
  margin-top: 1.25rem;
} */

/* Radio followed by paragraph needs less space */
/* .fragment-wrapper[data-f_type="radio_"] + .fragment-wrapper[data-f_type="p_"] {
  margin-top: -0.5rem;
} */

/* Also increase the bottom margin of the p itself before heavy content */
/* .fragment-wrapper[data-f_type="p_"]:has(+ .fragment-wrapper[data-f_type="svg_"]) p.fragment, */
/* TODO:sel To see, cause make sense */
/* .fragment-wrapper[data-f_type="p_"]:has(+ .fragment-wrapper[data-f_type="image_"]) p.fragment, */
/* .fragment-wrapper[data-f_type="p_"]:has(+ .fragment-wrapper[data-f_type="table_"]) p.fragment, */
/* .fragment-wrapper[data-f_type="p_"]:has(+ .fragment-wrapper[data-f_type="codex_"]) p.fragment, */
/* .fragment-wrapper[data-f_type="p_"]:has(+ .fragment-wrapper[data-f_type="code_"]) p.fragment, */
/* .fragment-wrapper[data-f_type="p_"]:has(+ .fragment-wrapper[data-f_type="graph_"]) p.fragment, */
/* .fragment-wrapper[data-f_type="p_"]:has(+ .fragment-wrapper[data-f_type="tabvar_"]) p.fragment { */
  /* margin-top: 0.5rem;
  margin-bottom: 2.25rem;
} */

/* .fragment-wrapper[data-f_type="p_"]:has(+ .fragment-wrapper[data-f_type="codex_"]) p.fragment {
  margin-bottom: 1rem;
} */

.fragment-wrapper.pm-subtitle {
  /* padding: 1.5rem; */
  /* border: 1px solid var(--color-base-300) !important; */
  /* background-color: var(--color-base-200) !important; */
  /* border-radius: var(--radius-box) !important; */
  color: color-mix(in oklab, var(--color-base-content, var(--color-base-content)) 40%, var(--color-base-100)) !important;
  font-size: 1.25rem;
  font-weight: 300;
  text-align: left;
  font-style: italic;
  margin-bottom: 2rem !important;
  line-height: 1.3 !important;
}




@media (max-width: 768px) {
  .fragment-wrapper.pm-subtitle {
    font-size: 1.05rem ;
  }

  .fragment-wrapper.pm-subtitle p {
    line-height: 1.1 !important;
  }
  
}




/* Headings spacing defaults */
h1.fragment {
  margin:1rem 0 0.25rem;
  line-height: 1.25;
}

h2.fragment {
  border-top: 1.5px solid var(--color-base-300) !important;
  padding-top: 1rem;
  margin: 3.5rem 0 1.5rem;
  line-height: 1.3;
}

h3.fragment {
  margin: 2.5rem 0 0.6rem;
  line-height: 1.35;
}

h4.fragment {
  margin: 1rem 0 0.5rem;
  line-height: 1.4;
}



/* .fragment-wrapper[data-f_type="h2_"] + .fragment-wrapper[data-f_type="h3_"] h3.fragment {
  margin-top: 0.7rem;
} */

.fragment-wrapper[data-f_type="h2_"]  {
  margin-top: 1rem;
}



.fragment-wrapper[data-f_type="radio_"] + .fragment-wrapper[data-f_type="p_"].statement,
.fragment-wrapper[data-f_type="number_"] + .fragment-wrapper[data-f_type="p_"].statement {
  margin-top: 1.5rem;
}


[id^="number-feedback-"] .alert {
  font-size: 1.1rem !important;
}


/* Looser when following content blocks */
/* .fragment-wrapper[data-f_type="p_"] + .fragment-wrapper[data-f_type="h2_"] h2.fragment,
.fragment-wrapper[data-f_type="ul_"] + .fragment-wrapper[data-f_type="h2_"] h2.fragment,
.fragment-wrapper[data-f_type="ol_"] + .fragment-wrapper[data-f_type="h2_"] h2.fragment,
.fragment-wrapper[data-f_type="q_"] + .fragment-wrapper[data-f_type="h2_"] h2.fragment,
.fragment-wrapper[data-f_type="code_"] + .fragment-wrapper[data-f_type="h2_"] h2.fragment,
.fragment-wrapper[data-f_type="table_"] + .fragment-wrapper[data-f_type="h2_"] h2.fragment,
.fragment-wrapper[data-f_type="image_"] + .fragment-wrapper[data-f_type="h2_"] h2.fragment,
.fragment-wrapper[data-f_type="svg_"] + .fragment-wrapper[data-f_type="h2_"] h2.fragment,
.fragment-wrapper[data-f_type="html_"] + .fragment-wrapper[data-f_type="h2_"] h2.fragment  {
  margin-top: 3rem;
} */

/* Lists */
ul.fragment,
ol.fragment {
  margin: 0.5rem 0 1rem 1.25rem;
}

ul.fragment li,
ol.fragment li {
  margin: 0.25rem 0;
}

/* =============================================================================
   Blockquote (q_) Fragment Styling
   ============================================================================= */
blockquote.fragment,
.fragment-wrapper[data-f_type="q_"] blockquote {
  position: relative;
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem 1.25rem 2rem;
  background: linear-gradient(135deg, 
    color-mix(in oklch, var(--color-primary), transparent 95%),
    color-mix(in oklch, var(--color-secondary), transparent 97%)
  );
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-box) var(--radius-box) 0;
  font-style: italic;
  /* font-size: 1.05rem; */
  line-height: 1.65;
  color: var(--color-base-content);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

/* Hover effect for blockquotes
blockquote.fragment:hover,
.fragment-wrapper[data-f_type="q_"] blockquote:hover {
  border-left-width: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateX(2px);
} */


/* SEL: not compatible with responvity as of now */
/* Should be a title in an obsidian like way but need more fields / data (ie maybe {: .class-something} */
/* Optional: Add a quotation mark */
/* blockquote.fragment::before,
.fragment-wrapper[data-f_type="q_"] blockquote::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 20px;
  font-size: 4rem;
  font-family: serif;
  color: var(--color-primary);
  opacity: 0.15;
  font-style: normal;
} */

/* Spacing adjustments when following other elements */
.fragment-wrapper[data-f_type="p_"] + .fragment-wrapper[data-f_type="q_"] {
  margin-top: 1.75rem;
}

.fragment-wrapper[data-f_type="q_"] + .fragment-wrapper[data-f_type="p_"] {
  margin-top: 1.5rem;
}

/* Multiple blockquotes in succession */
.fragment-wrapper[data-f_type="q_"] + .fragment-wrapper[data-f_type="q_"] {
  margin-top: 1rem;
}

/* Blockquote after headings */
.fragment-wrapper[data-f_type="h2_"] + .fragment-wrapper[data-f_type="q_"],
.fragment-wrapper[data-f_type="h3_"] + .fragment-wrapper[data-f_type="q_"] {
  margin-top: 1.25rem;
}

/* Dark theme adjustments */
[data-theme="dark"] blockquote.fragment,
[data-theme="dark"] .fragment-wrapper[data-f_type="q_"] blockquote {
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--color-primary), transparent 92%),
    color-mix(in oklch, var(--color-secondary), transparent 95%)
  );
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* For nested content in blockquotes */
blockquote.fragment p,
.fragment-wrapper[data-f_type="q_"] blockquote p {
  margin: 0;
  font-style: inherit;
}

/* Strong emphasis within blockquotes */
blockquote.fragment strong,
.fragment-wrapper[data-f_type="q_"] blockquote strong {
  /* color: var(--color-primary); */
  font-weight: 600;
  /* font-style: normal; */
}

/* Links within blockquotes */
blockquote.fragment a,
.fragment-wrapper[data-f_type="q_"] blockquote a {
  color: var(--color-info);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
}

blockquote.fragment a:hover,
.fragment-wrapper[data-f_type="q_"] blockquote a:hover {
  color: var(--color-primary);
  text-decoration-style: solid;
}

/* =============================================================================
   HR (Divider) Fragment Styling - SUPER VISIBLE DEBUG
   ============================================================================= */
/* Make hr elements EXTREMELY visible for debugging */
hr[data-f_type="hr_"],
.fragment-wrapper[data-f_type="hr_"] hr,
.pm-container hr {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  /* height: 20px !important; */
  border-top: 1.5px solid var(--color-base-300) !important;

  /* background: linear-gradient(45deg, red, blue) !important; */
  margin: 2rem 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 9999 !important;
}

/* Add content to make it super obvious */
/* hr[data-f_type="hr_"]:before,
.fragment-wrapper[data-f_type="hr_"] hr:before {
  content: "🔥 HR DIVIDER HERE 🔥" !important;
  display: block !important;
  color: white !important;
  background: red !important;
  padding: 5px !important;
  text-align: center !important;
  font-weight: bold !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10000 !important;
} */

/* Tables */
table.fragment-table {
  width: 100%;
  border-collapse: collapse;
}

table.fragment-table tr th {
  font-weight: 400;
}

table.fragment-table tr th:first-child,
table.fragment-table tr td:first-child {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

table.fragment-table th,
table.fragment-table td {
  border-bottom: 1px solid hsl(var(--bc) / 0.15);
  padding: 0.5rem 0.6rem;
  vertical-align: top;
}

table.fragment-table thead th {
  font-weight: 400;
}

/* Markdown tables */
.fragment-table table {
  width: 100%;
  border-collapse: collapse;
  /* margin: 1rem 0; */
  margin: 0 !important;
}

/* .fragment-table table th,
.fragment-table table td {
  border: 1px solid hsl(var(--bc) / 0.2);
  padding: 0.5rem 0.75rem;
  text-align: left;
} */

.fragment table th {
  background-color: hsl(var(--b2));
  font-weight: 600;
}

.fragment table tr:nth-child(even) {
  background-color: hsl(var(--b2) / 0.3);
}

/* Code */
pre.fragment-code {
  padding: 0.9rem 1rem;
  border-radius: var(--radius-box);
  overflow: auto;
  /* margin: 0.75rem 0 1rem; */
  margin-bottom: 1.5rem;
}

/* Inline code styling */
.pm-container code:not(pre code) {
  background-color: var(--color-base-200);
  padding: 0.1rem 0.175rem;
  border-radius: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.875em;
  font-weight: 500;
  color: inherit;
  /* border: 1px solid color-mix(in oklab, var(--color-base-300) 60%, transparent); */
}

.codex .CodeMirror {
  border-radius: 0.5rem;
  border: 1px solid var(--color-base-300) !important;
  font-size: 0.85rem !important;
  line-height: 1.3;
}

/* Images */
.fragment.image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 0.25rem 0 0.25rem;
}

/* Image description text styling */
.fragment.image .mt-1 {
  font-style: italic;
  color: color-mix(in oklab, var(--color-base-content) 70%, var(--color-base-100));
  line-height: 1.4;
}

/* SVGs */
.fragment.svg {
  display: block;
  width: 100%;
  margin: 0.25rem 0 1rem;
}

.fragment.svg svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Fragment wrapper for custom class application */
.fragment-wrapper {
  display: block;
}

/* Enable Tailwind utility classes on fragment-wrapper */
.fragment-wrapper.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Misc */
.divider-tight {
  margin: 1.25rem 0;
}
/* Utility: rounded box using DaisyUI radius var */
.rounded-box { border-radius: var(--radius-box); }
.font-handwritten { font-family: var(--font-handwritten); }

/* Ensure divider content centers correctly with block-level headings */
.divider > h1,
.divider > h2,
.divider > h3,
.divider > h4 {
  display: inline-block;
  margin: 0;
}

/* Reveal mode */
[data-pm-hidden] {
  display: none !important;
}

/* Product-specific sample (keep scoped to corsica classes) */
.corsica-grid-text {
  font-family: "KaTeX_Main", "Times New Roman", serif !important;
  font-size: 28px !important;
  fill: var(--color-base-content) !important;
  font-weight:300 !important;
}

.corsica-axis-label {
  font-family: "KaTeX_Main", "Times New Roman", serif !important;
  font-size: 28px !important;
  fill: var(--color-base-content) !important;
  font-weight:300 !important;
}

.corsica-axis-value {
  font-family: "KaTeX_Main", "Times New Roman", serif !important;
  font-size: 28px !important;
  fill: var(--color-base-content) !important;
  font-weight:300 !important;
}

/* Placeholder rules for Corsica grid styling */
.corsica-grid .corsica-grid-text {}
.corsica-axis-labels-group {}

/* ===========================
   Scoped SVG themes (DaisyUI)
   =========================== */

/* Full vs partial vs none cells */
#svg-corsica-grid-cells-full-and-partial #coord_cells rect.pm-full { fill: var(--color-secondary); fill-opacity: .08; }
#svg-corsica-grid-cells-full-and-partial #coord_cells rect.pm-partial { fill: var(--color-accent); fill-opacity: .10; }
#svg-corsica-grid-cells-full-and-partial #coord_cells rect.pm-none { fill: transparent; }

#svg-corsica-grid-cells-full-only #coord_cells rect.pm-full { fill: var(--color-secondary); fill-opacity: .08; }
#svg-corsica-grid-cells-full-only #coord_cells rect.pm-none { fill: transparent; }

#svg-corsica-grid-daisyui-only #coord_cells rect.pm-full { fill: var(--color-secondary); fill-opacity: .08; }
#svg-corsica-grid-daisyui-only #coord_cells rect.pm-partial { fill: var(--color-accent); fill-opacity: .10; }
#svg-corsica-grid-daisyui-only #coord_cells rect.pm-none { fill: transparent; }

/* Common grid line and base styling */
.corsica-grid #grid_lines path { stroke: var(--color-primary); stroke-opacity: .3; stroke-dasharray: 3.7 1.6; fill: none; }
.corsica-grid #patch_1 path { fill: var(--color-base-100); }

/* Axis labels and compass */
.corsica-grid .corsica-axis-label { fill: var(--color-base-content); font-weight: 600; font-size: 28px; }
.corsica-grid #compass_axes { color: var(--color-base-content); }
.corsica-grid #arrow-base path { fill: var(--color-base-content); }

/* City markers colors */
.corsica-grid #city_markers circle { stroke: var(--color-base-100); stroke-width: 2; }

/* Optional variants for other exported svgs */
#svg-corsica-grid-with-cities .corsica-grid-text { fill: var(--color-base-content); }
#svg-corsica-grid-with-labels .corsica-grid-text { fill: var(--color-base-content); }


/* ==========================
   Number input fragment
   ========================== */
/* Provide component color tokens */
.pm-container {
  --pm-ok: hsl(var(--su));
  --pm-err: hsl(var(--er));
}

/* Host element spacing */
pm-number-input {
  display: block;
  /* expose colors to the component */
  --ok: var(--pm-ok);
  --err: var(--pm-err);
}

/* Wrapper rhythm around number inputs */
.fragment-wrapper[data-f_type="number_"] {
  margin: 1.25rem 0 1.5rem;
}


/* Tighter when following h1_ */
.fragment-wrapper[data-f_type="p_"] + .fragment-wrapper[data-f_type="h1_"] {
  margin-top: 0.25rem;
}


/* Looser before headings */
/* makes no sense */
/* .fragment-wrapper[data-f_type="number_"] + .fragment-wrapper[data-f_type="h2_"] h2.fragment {
  margin-top: 0.5rem;
}
.fragment-wrapper[data-f_type="number_"] + .fragment-wrapper[data-f_type="h3_"] h3.fragment {
  margin-top: 0.25rem;
} */

/* Tighter when following text */
.fragment-wrapper[data-f_type="p_"] + .fragment-wrapper[data-f_type="number_"] {
  margin-top: 0.75rem;
}




/* ==========================
   Radio & Number Alert Animations - Using Tailwind transition utilities
   ========================== */

/* Base transition setup for all radio and number feedback/explanation areas */

[id^="radio-feedback-"],
[id^="radio-explanation-"],
[id^="number-feedback-"] {
  /* Smooth transitions for height and transform */
  transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top center;
  overflow: hidden;
}

/* Default to collapsed unless explicitly opened */
[id^="radio-feedback-"]:not(.pm-open),
[id^="radio-explanation-"]:not(.pm-open),
[id^="number-feedback-"]:not(.pm-open) {
  max-height: 0 !important;
  /* keep opacity controlled by classes on inner elements if needed */
  transform: scale(0.98) translateY(-0.25rem) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  pointer-events: none !important;
}

/* Default margins */
[id^="radio-feedback-"].pm-open {
  /* margin-top: 0.75rem; */
  /* margin-bottom: 0.25rem; */
}

/* [id^="radio-explanation-"].pm-open {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
} */

/* Prevent FOUC: hide radios/explanations/number feedback until runtime marks pm-ready */
html:not(.pm-ready) [id^="radio-feedback-"],
html:not(.pm-ready) [id^="radio-explanation-"],
html:not(.pm-ready) [id^="number-feedback-"] {
  max-height: 0 !important;
  transform: scale(0.98) translateY(-0.25rem) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  pointer-events: none !important;
}

/* Collapsed state: remove space and interaction, hide visually */
.pm-collapsed {
  max-height: 0 !important;
  transform: scale(0.98) translateY(-0.25rem) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  pointer-events: none !important;
}
/* lbl_ progressive list - hide by default */
.pm-lbl-item {
  transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pm-lbl-item.pm-collapsed {
  max-height: 0;
  overflow: hidden;
}

/* Open state: visible; height is driven by inline max-height set by JS */
.pm-open {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
}

/* Alert box color transitions */
[id^="radio-feedback-"] .alert,
[id^="radio-explanation-"] .alert,
[id^="number-feedback-"] .alert {
  transition: background-color 200ms ease,
              border-color 200ms ease,
              color 200ms ease;
  /* Remove DaisyUI alert grid left icon gap when no icon is present */
  display: block;
  padding: 0.625rem 0.875rem;
  text-align: left;
}

/* Kill possible left icon column gap from DaisyUI's alert if theme injects it */
[id^="radio-feedback-"] .alert > :not([hidden]) ~ :not([hidden]),
[id^="radio-explanation-"] .alert > :not([hidden]) ~ :not([hidden]),
[id^="number-feedback-"] .alert > :not([hidden]) ~ :not([hidden]) {
  margin-left: 0;
}

[id^="radio-feedback-"] .alert:where(*)::before,
[id^="radio-explanation-"] .alert:where(*)::before,
[id^="number-feedback-"] .alert:where(*)::before {
  display: none !important;
  content: none !important;
}

/* Card inside explanation - simplified animation */
[id^="radio-explanation-"] .card {
  /* No additional transform needed since parent handles it */
  transition: none;
}

/* Explanation card body spacing and alignment */
[id^="radio-explanation-"] .card-body {
  padding: 0.875rem 1rem;
  align-items: flex-start;
}

/* Remove unexpected left margins inside explanation content */
/* Ensure explanation content has no extra typographic margins */
[id^="radio-explanation-"] * {
  margin-block-start: 0;
  margin-block-end: 0;
}



.alert {
  padding: 1rem !important;
}

/* Radio and number feedback alerts - match general text size */
[id^="radio-feedback-"] .alert,
[id^="radio-explanation-"] .alert,
[id^="number-feedback-"] .alert {
  font-size: 1.1rem !important;
}

/* Remove bottom margin from last alert in number feedback */
[id^="number-feedback-"] .alert:last-child {
  margin-bottom: 0 !important;
}

/* 
[id^="radio-feedback-"] .alert.alert-info {
  background-color: var(--color-primary-ghost) !important;
  color: var(--color-base-content);
} */

/* DaisyUI alert primary + outline combo using root.css tokens */
.alert.alert-primary.alert-outline {
  background-color: var(--color-primary) !important;
  border: 1.5px solid var(--color-primary-content) !important;
  color: var(--color-primary-content) !important;
}

.alert.alert-primary.alert-outline * { color: inherit; }

/* Ensure feedback text spans render inline content properly */
[id^="radio-feedback-"] .alert span[id^="radio-feedback-text-"] {
  display: inline;
  max-height: none !important;
}

/* Smooth transitions for alert state changes */
.alert-soft {
  transition: background-color 0.3s ease,
              border-color 0.3s ease,
              color 0.3s ease;
}

/* Extra spacing when multiple feedback/explanation blocks stack */
/* .fragment-wrapper[data-f_type="radio_"] [id^="radio-feedback-"].pm-open + [id^="radio-explanation-"].pm-open,
.fragment-wrapper[data-f_type="radio_"] [id^="radio-feedback-"].pm-open + [id^="radio-feedback-"].pm-open,
.fragment-wrapper[data-f_type="radio_"] [id^="radio-explanation-"].pm-open + [id^="radio-feedback-"].pm-open,
.fragment-wrapper[data-f_type="radio_"] [id^="radio-explanation-"].pm-open + [id^="radio-explanation-"].pm-open {
  margin-top: 1.25rem !important;
} */

/* Button state transitions */
.fragment-wrapper[data-f_type="radio_"] button {
  transition: all 0.2s ease-out;
  position: relative;
  overflow: hidden;
}

/* Add ripple effect on click */
.fragment-wrapper[data-f_type="radio_"] button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s;
}

.fragment-wrapper[data-f_type="radio_"] button:active::after {
  width: 300px;
  height: 300px;
}


.fragment-wrapper[data-f_type="p_"].alert {
  font-size: 1rem !important;
  margin-bottom: 0.75rem !important;
}









/* ******************PIECE_****************** */


/* Responsive columns for markdown layout directives */
.pm-cols {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.5rem !important;
}

/* default to single column on mobile */
.pm-cols > .fragment-wrapper { margin: 0; }

/* 2 cols breakpoints */
@media (min-width: 640px) { /* sm */
  .pm-cols-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-cols-sm-2.use-var { grid-template-columns: var(--pm-cols); }
}
@media (min-width: 768px) { /* md */
  .pm-cols-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-cols-md-2.use-var { grid-template-columns: var(--pm-cols); }
}
@media (min-width: 1024px) { /* lg */
  .pm-cols-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-cols-lg-2.use-var { grid-template-columns: var(--pm-cols); }
}

/* 3 cols breakpoints */
@media (min-width: 640px) { /* sm */
  .pm-cols-sm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pm-cols-sm-3.use-var { grid-template-columns: var(--pm-cols); }
}
@media (min-width: 768px) { /* md */
  .pm-cols-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pm-cols-md-3.use-var { grid-template-columns: var(--pm-cols); }
}
@media (min-width: 1024px) { /* lg */
  .pm-cols-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pm-cols-lg-3.use-var { grid-template-columns: var(--pm-cols); }
}

/* Ensure media scales nicely in grid */
.pm-cols .fragment img,
.pm-cols .fragment svg {
  width: 100%;
  height: auto;
}

/* Harmonize spacing inside piece_ column layouts: rely on grid gap */
.pm-cols .fragment-wrapper { margin: 0 !important; }
.pm-cols .fragment-wrapper[data-f_type="radio_"] { margin: 0 !important; }
.pm-cols .fragment-wrapper[data-f_type="p_"] + .fragment-wrapper[data-f_type="radio_"] { margin-top: 0 !important; }
.pm-cols .fragment-wrapper[data-f_type="p_"] p.fragment { margin-bottom: 0 !important; }

/* Utility helpers for vertical/horizontal centering of a single grid item */
.pm-self-center { align-self: center !important; }

/* =============================================================================
   i-Radio Pre-Click Classes
   ============================================================================= */

/* Pre-click animation classes for i-radio buttons */
.pre-pulse {
  animation: pulse 2s infinite;
}

.pre-bounce {
  animation: bounce 1s infinite;
}

.pre-glow {
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}

.pre-animate-spin {
  animation: spin 2s linear infinite;
}

.pre-animate-bounce {
  animation: bounce 1s infinite;
}

.pre-animate-pulse {
  animation: pulse 2s infinite;
}

.pre-bg-warning {
  background-color: hsl(var(--wa));
  color: hsl(var(--wac));
}

.pre-shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.pre-ring {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.pre-ring-blue-300 {
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
}

/* Gradient classes for pre-click effects */
.pre-bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.pre-from-purple-500 {
  --tw-gradient-from: #8b5cf6;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(139, 92, 246, 0));
}

.pre-to-pink-500 {
  --tw-gradient-to: #ec4899;
}

/* Utility classes that persist after click */
.permanent-border {
  border: 2px solid hsl(var(--bc));
}
.pm-place-center { place-self: center !important; }



.piece_ .fragment[data-f_type="svg_"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;

}



.statement {
  padding: 1rem !important;
  background-color: var(--color-base-content-ghost-variant) !important;
  border-radius: var(--radius-box) !important;
  border: 1.5px solid transparent !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Statement border colors based on radio answer */
.statement.statement-correct {
  border-color: var(--color-success) !important;
}

.statement.statement-incorrect {
  border-color: var(--color-error) !important;
}

.statement.statement-info {
  border-color: var(--color-info) !important;
}

/* =============================================================================
   PM Number Input Button Style - Same as radio buttons
   ============================================================================= */
pm-number-input button.btn {
  border-width: 1.5px !important;
  font-weight: 400 !important;
  /* DEFAULT: Filled/solid appearance */
  --btn-shadow: "" !important;
  --btn-fg: var(--color-base-100) !important;
  --btn-bg: var(--btn-color, var(--color-base-content)) !important;
  --btn-border: var(--btn-color, var(--color-base-content)) !important;
  --btn-noise: none !important;
}

/* Default filled state for soft buttons */
pm-number-input button.btn-soft {
  --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 5%, var(--color-base-100)) !important;
  --btn-fg: var(--btn-color, var(--color-base-content)) !important;
  --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 30%, var(--color-base-100)) !important;
}

/* HOVER: Outline appearance */
pm-number-input button.btn:hover {
  --btn-shadow: "" !important;
  --btn-bg: transparent !important;
  --btn-fg: var(--btn-color, var(--color-base-content)) !important;
  --btn-border: var(--btn-color, var(--color-base-content)) !important;
  --btn-noise: none !important;
}

/* Hover for soft buttons */
pm-number-input button.btn-soft:hover {
  --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 8%, var(--color-base-100)) !important;
  --btn-fg: var(--btn-color, var(--color-base-content)) !important;
  --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 10%, var(--color-base-100)) !important;
}










.fragment-wrapper[data-f_type="ul_"] ul {
  margin-top: 0.25rem !important;
  margin-bottom: 1rem !important;
  padding-left: 1.25rem !important;
  list-style: square !important;
}




/* First level - square bullets */
.fragment-wrapper[data-f_type="ul_"] > ul {
  list-style: square !important;
}

/* Second level (nested) - small disc bullets */
.fragment-wrapper[data-f_type="ul_"] li ul {
  list-style: disc !important;
  /* Makes the disc smaller */
  /* And also change the size lol so dont use it as lists become ugly as fuck */
  /* font-size: 0.9em;  */
  margin-bottom: 0.25rem !important;
  padding-left: 1rem !important;
}

/* Ordered lists styling */
.fragment-wrapper[data-f_type="ol_"] ol {
  margin-top: 0.25rem !important;
  margin-bottom: 1rem !important;
  padding-left: 1rem !important;
  list-style: decimal !important;
}

/* First level ordered lists - decimal numbers */
.fragment-wrapper[data-f_type="ol_"] > ol {
  list-style: decimal !important;
}

/* Second level nested ordered lists - lower alpha */
.fragment-wrapper[data-f_type="ol_"] li ol {
  list-style: lower-alpha !important;
  font-size: 0.9em; /* Makes the numbers smaller */
  margin-bottom: 0.25rem !important;
  padding-left: 1rem !important;
}





/* Sujets 0 */

  /* Graph container styles */
  .graph-svg-container {
    position: relative;
    display: block;
    overflow: hidden;
}

.graph-svg-container svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Foreign object positioning fix */
.graph-svg-container foreignObject {
    overflow: visible;
}

.graph-svg-container foreignObject>div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* LaTeX in SVG styles */
.svg-latex {
    /*font-size: 14px;*/
    line-height: 1.2;
    text-align: center;
}

.svg-latex .katex {
    font-size: inherit;
    font-family: 'KaTeX_Main', sans-serif;
    color: var(--color-base-content);
}

/* =============================================================================
   DataViz2 Execution UI Styles
   ============================================================================= */

/* Main execution UI container */
.dataviz2-execution-ui {
    /* margin-top: 1rem; */
    padding-top: 1rem;
    /* border-top: 1px solid var(--color-base-300); */
}

/* Button group styling */
.dataviz2-execution-ui .btn-group {
    margin-bottom: 1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}



/* Execute and Clear buttons */
.dataviz2-execution-ui .dataviz2-execute-btn,
.dataviz2-execution-ui .dataviz2-clear-btn {
    transition: all 0.2s ease;
    min-width: 100px;
}

/* Output area */
.dataviz2-output {
    margin-top: 1.25rem;
    animation: slideDown 0.3s ease-out;
}

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

/* Output content container */
.dataviz2-output-content {
    margin-top: 0.75rem;
}

/* Pre-formatted output blocks */
.dataviz2-output-content pre {
    margin: 0.75rem 0;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.5;
    max-height: 500px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-base-300) transparent;
}

/* Custom scrollbar for output */
.dataviz2-output-content pre::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dataviz2-output-content pre::-webkit-scrollbar-track {
    background: transparent;
}

.dataviz2-output-content pre::-webkit-scrollbar-thumb {
    background: var(--color-base-300);
    border-radius: 4px;
}

.dataviz2-output-content pre::-webkit-scrollbar-thumb:hover {
    background: var(--color-base-content);
    opacity: 0.5;
}

/* Bokeh container styling */
.bokeh-container {
    position: relative;
    width: 100%;
    min-height: 300px;
    padding: 0.5rem;
}

/* Bokeh plots inside cards */
.dataviz2-output-content .card.bg-base-100 {
    overflow: visible; /* Allow Bokeh tooltips to overflow */
}

.dataviz2-output-content .card .bokeh-container {
    overflow: visible;
}

/* Loading spinner container */
.dataviz2-output-content .flex.items-center {
    padding: 1rem;
    justify-content: center;
}

/* Alert styling in output */
.dataviz2-output-content .alert {
    margin: 0.75rem 0;
}

/* Figure cards for matplotlib */
.dataviz2-output-content .card figure {
    margin: 0;
}

.dataviz2-output-content .card img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Empty output message */
.dataviz2-output-content .text-base-content\/60 {
    text-align: center;
    /* padding: 2rem; */
    font-style: italic;
}


.fragment-wrapper[data-f_type="codex_"]  {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

/* Default CodeMirror height for all pm-codex instances */
pm-codex .CodeMirror {
    min-height: 10px; /* Minimum height to ensure readability */
    overflow: hidden;
}

/* Make CodeMirror in pm-codex slightly taller for DataViz2 */
pm-codex[data-executable="true"] .CodeMirror {
    min-height: 10px;
    resize: vertical;
    overflow: hidden;
    /* border: 1px solid var(--color-base-300) !important.codex .CodeMirror; */
    /* margin-top: 1.5rem;
    margin-bottom: 1.5rem; */
}

pm-codex[data-editable="true"] .CodeMirror {
    background: var(--color-base-100);
}

pm-codex[data-editable="true"] .CodeMirror-gutters {
    background: var(--color-base-200);
    border-right: 1px solid var(--color-base-300);
}

/* Visual feedback that code is editable */
pm-codex[data-editable="true"] .CodeMirror:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: -1px;
}

/* Divider styling */
.dataviz2-output .divider {
    margin: 1rem 0;
    font-size: 0.875rem;
    color: var(--color-base-content);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* Responsive adjustments */
@media (max-width: 640px) {
    .dataviz2-execution-ui .btn-group {
        flex-direction: column;
    }
    
    .dataviz2-execution-ui .dataviz2-execute-btn,
    .dataviz2-execution-ui .dataviz2-clear-btn {
        width: 100%;
    }
    
    .dataviz2-output-content pre {
        font-size: 0.85rem;
    }
}