/* Definition cards */
:root { --section-header-color: #1e3a8a; }        /* light theme */
.dark { --section-header-color: #93c5fd; }        /* dark theme */

a:hover {
  color: #1e3a8a !important;
  /* text-decoration: underline !important; */
}

section > h2,
section h2 {
  color: var(--section-header-color) !important;
}
/* section h1 {
  color: #FDCA17 !important;
  font-weight: 640 !important;
  font-size: 2em !important;
} */

/* Optional: include h3s as well */
section h3 {
  color: var(--section-header-color) !important;
}

/* MathJax + Tailwind fix: keep inline math inline */
mjx-container[jax="SVG"] {
  display: inline-block !important;
  vertical-align: -0.125em;
}
mjx-container[jax="SVG"] svg {
  display: inline !important; /* override Tailwind's svg { display:block } */
}

/* Preserve display math as block */
mjx-container[display="true"] {
  display: block !important;
  text-align: center;
  margin: 0.5rem 0;
}
mjx-container[display="true"] svg {
  display: block !important;
}


.def-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.5));
  backdrop-filter: saturate(160%) blur(6px);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.dark .def-card {
  background: rgba(2,6,23,0.5);
}
.def-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #dadada);
  opacity: 0.6;
  transition: opacity 180ms ease;
}
.def-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -14px rgba(2,6,23,0.35);
  border-color: rgba(14,165,233,0.35);
}
.def-card:hover::before {
  opacity: 1;
}

.def-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.def-switch {
  position: relative;
  min-height: 120px; /* keep height stable during crossfade */
}
.def-switch > .def-plain,
.def-switch > .def-formal {
  position: absolute;
  inset: 0;
  transition: opacity 220ms ease, transform 220ms ease;
}
.def-plain {
  opacity: 1;
  transform: translateY(0);
}
.def-formal {
  opacity: 0;
  transform: translateY(6px);
}
.def-card:hover .def-plain {
  opacity: 0;
  transform: translateY(-6px);
}
.def-card:hover .def-formal {
  opacity: 1;
  transform: translateY(0);
}

/* subtle hint text that changes on hover */
.def-hint::before {
  content: "Hover to see the formal definition";
}
.def-card:hover .def-hint::before {
  content: "Formal view — move cursor away for natural language";
}

/* Tweak author block (kept from existing) */
.author-block {
  line-height: 1.8 !important;
  font-weight: 350 !important;
  color:black;
  font-size: 16px !important;
  font-style: bold
}

#playground {
  /* theme tokens */
  --pg-bg-start: #eefaff;   /* indigo-600 */
  --pg-bg-end:   #ffeff0;   /* pink-500  */
  --pg-fg:       #ffffff;   /* on-gradient text */
  --pg-fg-muted: rgba(0, 0, 0, 0.85);
  --pg-border:   rgba(255,255,255,0.25);
  --pg-card:     rgba(255,255,255,0.12);

  position: relative;
  background: linear-gradient(135deg, var(--pg-bg-start), var(--pg-bg-end));
  color: var(--pg-fg);
  border-top: 1px solid var(--pg-border);
  border-bottom: 1px solid var(--pg-border);
}

/* dark mode adjustments */
.dark #playground {
  --pg-bg-start: #b5dff0;   /* indigo-700 */
  --pg-bg-end:   #8f6d7b;   /* rose-700   */
  --pg-fg:       #ffffff;
  --pg-fg-muted: rgba(255,255,255,0.9);
  --pg-border:   rgba(255,255,255,0.2);
  --pg-card:     rgba(249, 249, 249, 0.25);
}

/* content colors within playground */
#playground h1,
#playground h2,
#playground h3 {
  color: var(--pg-fg) !important;
}
#playground p,
#playground li,
#playground .text-slate-700,
#playground .dark\:text-slate-200 {
  color: var(--pg-fg-muted) !important;
}
#playground a {
  color: #4c4c4c !important;
  text-decoration-color: rgba(255,255,255,0.5);
  text-underline-offset: 2px;
}
#playground a:hover {
  color: #fff !important;
  text-decoration: underline;
}

/* optional card/glass look for any inner boxes placed here */
#playground .glass,
#playground .rounded-2xl.border {
  background: var(--pg-card) !important;
  border-color: var(--pg-border) !important;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.35);
}

/* tighten spacing slightly for this section only */
#playground .max-w-4xl {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Gradio embedding support */
/* 1) Make embeds full-width and visually integrate with the gradient */
#playground gradio-app,
#playground .gradio-container,
#playground iframe.gradio,
#playground .gradio-embed,
#playground .gradio-frame {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
  background: transparent !important;
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.35);
  overflow: hidden;
  margin-top: 0.75rem;
}

/* 2) Pass light theming hints via CSS vars on the Shadow host (best-effort) */
#playground gradio-app {
  /* These may be picked up by newer Gradio themes */
  --color-accent: #ffd166;          /* warm accent; tweak as desired */
  --color-foreground: var(--pg-fg);
  --color-background: transparent;
  --radius-md: 12px;
  color-scheme: light dark;
}

/* 3) If using a no-shadow or iframe embed, ensure inner body is clean (best-effort) */
#playground .gradio-container * {
  background: transparent;
}

/* Research findings list */
:root {
  --finding-accent: var(--section-header-color);
  --finding-bg: rgba(15,23,42,0.03);
  --finding-border: rgba(2,6,23,0.08);
}
.dark {
  --finding-bg: rgba(255,255,255,0.04);
  --finding-border: rgba(255,255,255,0.12);
}

.findings {
  margin-top: 0.75rem;
  padding: 0;
  list-style: none;
  counter-reset: finding;
}
.findings .finding {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0.75rem;
  padding: 0.75rem 0.75rem;
  border: 1px solid var(--finding-border);
  border-radius: 0.75rem;
  background: var(--finding-bg);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.findings .finding + .finding {
  margin-top: 0.5rem;
}

/* Default: colored dot marker */
.findings .finding::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--finding-accent);
  margin-top: 0.55rem;
}

/* Optional numbered variant when parent has .findings--numbered */
.findings.findings--numbered .finding::before {
  content: counter(finding);
  counter-increment: finding;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font: 600 12px/1.1 ui-sans-serif, system-ui, Inter, Segoe UI, Helvetica Neue, Arial;
  color: #fff;
  background: var(--finding-accent);
  border-radius: 999px;
  margin-top: 0.2rem;
}

.finding-head {
  font-weight: 600;
  color: var(--section-header-color);
  margin-bottom: 0rem;
}
.finding-body {
  margin-top: 0.15rem;
  color: #334155;
}
.dark .finding-body {
  color: #e2e8f0;
}

.findings .finding:hover {
  border-color: color-mix(in srgb, var(--finding-accent) 35%, transparent);
  box-shadow: 0 8px 22px -12px rgba(2,6,23,0.25);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .findings .finding { transition: none; }
}

.finding-head,
.finding-body {
  grid-column: 2 / -1;
  min-width: 0; /* allow proper text wrapping inside grid */
}

/* Optional: align items to the top so the dot aligns with header */
.findings .finding {
  align-items: start;
}