/* ============================================================
   GENERAL — Visual identity, Distill overrides, layout
   ============================================================ */

:root {
  /* Foundation */
  --petri-bg:            #FAF7F2;
  --petri-bg-dark:       #0D0F0E;
  --petri-surface:       #F2EDE4;
  --petri-surface-dark:  #1A1D1B;

  /* Text */
  --petri-text:          #2C2416;
  --petri-text-secondary:#6B5E4F;
  --petri-text-on-dark:  #E8E2D8;
  --petri-text-muted:    #9A8E7F;

  /* Primary accent: Agar Green */
  --petri-accent:        #2D8F6F;
  --petri-accent-light:  #3DAF8B;
  --petri-accent-faint:  #E6F5EF;
  --petri-accent-dark:   #1E6B50;

  /* Secondary accent: Culture Amber */
  --petri-amber:         #C8943E;
  --petri-amber-light:   #DEBA6A;
  --petri-amber-faint:   #FFF8EB;

  /* Functional */
  --petri-border:        #DDD5C8;
  --petri-border-dark:   #2A2D2B;
  --petri-code-bg:       #F0EBE1;

  /* Species reference (for legends) */
  --species-red:         #E63B2E;
  --species-blue:        #3B7BE6;
  --species-green:       #3BE649;
  --species-yellow:      #E6D43B;
  --species-purple:      #9B3BE6;

  /* Content width */
  --content-width:       70ch;
}

/* --- Global overrides --- */
body {
  overflow-x: hidden;
  background: var(--petri-bg);
}

dt-article p, dt-article ul, dt-article ol {
  text-align: justify !important;
}

/* --- Typography overrides for Distill --- */
dt-article {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-optical-sizing: auto;
  color: var(--petri-text);
}

dt-article h1 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  color: var(--petri-text);
  text-align: center;
  line-height: 1.15;
}

dt-article h2 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  color: var(--petri-text);
  text-align: center;
  margin-top: 2.5rem;
}

dt-article h3 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  color: var(--petri-text);
  margin-top: 1.8rem;
}

dt-article p {
  font-size: 1.05rem;
  line-height: 1.72;
}

dt-article a {
  color: var(--petri-accent);
  text-decoration-color: var(--petri-accent);
}

dt-article a:hover {
  color: var(--petri-accent-dark);
}

dt-article code {
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  font-size: 0.88em;
  background: var(--petri-code-bg);
  padding: 0.15em 0.35em;
  border-radius: 3px;
}

/* --- Figcaption --- */
figcaption {
  padding: 0.5em;
  color: var(--petri-text-secondary);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.82rem;
  line-height: 1.55;
  text-align: left;
}

dt-article figcaption {
  padding: 0.5em;
  color: var(--petri-text-secondary);
  font-size: 0.82rem;
  line-height: 1.55;
  text-align: left;
}

dt-article figcaption b {
  font-weight: 600;
  color: var(--petri-text);
}

dt-article figcaption a {
  color: var(--petri-text-secondary);
}

/* --- tl;dr box --- */
.tldr-label {
  color: var(--petri-accent);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0 0 6px 0;
  padding: 0;
  text-align: left;
}

.tldr-text {
  color: var(--petri-text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: left;
  padding: 0;
  margin: 0;
}

/* --- Math display overflow --- */
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  white-space: nowrap;
  padding: 4px 0;
}

.MathJax_Display {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  white-space: nowrap;
}

/* --- Definition boxes for key equations --- */
.definition-box {
  max-width: var(--content-width);
  margin: 2rem auto;
  padding: 1.5rem;
  background: var(--petri-accent-faint);
  border-left: 3px solid var(--petri-accent);
  border-radius: 0 4px 4px 0;
}

.definition-box .def-title {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--petri-accent-dark);
  margin: 0 0 0.75rem 0;
}

.definition-box .def-content p {
  margin: 0.5rem 0;
  line-height: 1.6;
  font-size: 0.95rem;
}

/* --- Update badges --- */
.badge {
  display: inline-block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 8px;
}

.badge-new {
  background: #dcfce7;
  color: #166534;
}

.badge-updated {
  background: var(--petri-amber-faint);
  color: #92400e;
}

/* --- Figure containers --- */
.figure-container {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.figure-container img {
  width: 50%;
}

.responsive-media {
  width: 100%;
  margin: 0;
}

@media (min-width: 768px) {
  .responsive-media {
    width: 90%;
  }
}

/* --- Figure grid (3-column for regime comparisons) --- */
.figure-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 960px;
  margin: 1.5rem auto;
}

.figure-grid-3 img {
  width: 100%;
  border-radius: 4px;
}

.figure-grid-3 figcaption {
  text-align: center;
}

/* --- Full-width figure --- */
.figure-full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  text-align: center;
}

.figure-full img {
  max-width: 960px;
  width: 90%;
  height: auto;
}

/* --- Inline CTA button (for within article body) --- */
.inline-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: var(--petri-accent);
  color: #fff;
  border-radius: 6px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}

.inline-cta:hover {
  background: var(--petri-accent-dark);
  color: #fff;
  transform: translateY(-1px);
}

/* --- Regime surface toggle --- */
.rs-mode-toggle {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0 auto 0.5rem;
  max-width: 220px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--petri-border, #DDD5C8);
  background: var(--petri-surface, #F2EDE4);
}

.rs-mode-toggle button {
  flex: 1;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--petri-text-secondary, #6B5E4F);
  cursor: pointer;
  transition: all 0.15s;
}

.rs-mode-toggle button.rs-mode-active {
  background: var(--petri-accent, #2D8F6F);
  color: #fff;
}

.rs-mode-toggle button:hover:not(.rs-mode-active) {
  background: rgba(45, 143, 111, 0.1);
}

/* --- Regime surface widget --- */
.regime-surface {
  max-width: 620px;
  margin: 2rem auto;
  overflow: hidden;
  box-sizing: border-box;
}

.regime-surface-sliders {
  display: flex;
  gap: 1rem;
  margin: 0.75rem auto;
  max-width: 560px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.82rem;
}

.regime-surface-sliders label {
  flex: 1;
}

.regime-surface-sliders input[type="range"] {
  width: 100%;
}

.rs-k-ticks {
  position: relative;
  height: 20px;
  margin-top: 2px;
}

.rs-k-ticks button {
  position: absolute;
  transform: translateX(-50%);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 1px 5px;
  border: 1px solid var(--petri-border, #DDD5C8);
  border-radius: 8px;
  background: var(--petri-bg, #FAF7F2);
  color: var(--petri-text-muted, #9A8E7F);
  cursor: pointer;
  white-space: nowrap;
}

.rs-k-ticks button:hover {
  background: var(--petri-accent, #2D8F6F);
  color: #fff;
  border-color: var(--petri-accent, #2D8F6F);
}

.regime-surface-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 0.5rem auto;
  max-width: 560px;
}

.regime-surface-presets button {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid var(--petri-border, #DDD5C8);
  border-radius: 12px;
  background: var(--petri-bg, #FAF7F2);
  color: var(--petri-text-secondary, #6B5E4F);
  cursor: pointer;
  transition: all 0.15s;
}

.regime-surface-presets button:hover {
  background: var(--petri-accent, #2D8F6F);
  color: #fff;
  border-color: var(--petri-accent, #2D8F6F);
}

/* (regime-preset-group removed — buttons are flat with circled numbers) */

.regime-surface-presets .cs-num {
  font-size: 0.85em;
}

.regime-surface-info {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--petri-text-muted, #9A8E7F);
  text-align: center;
  margin: 0.25rem auto;
  max-width: 560px;
}

@media (max-width: 768px) {
  .regime-surface {
    max-width: 100%;
    padding: 0 0.5rem;
    box-sizing: border-box;
  }

  .regime-surface-sliders {
    flex-direction: column;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0;
  }

  .regime-surface-sliders label {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .regime-surface-sliders input[type="range"] {
    flex: 1;
    min-width: 0;
  }

  .rs-k-ticks {
    display: none; /* positioned buttons don't work on narrow screens */
  }

  .regime-surface-presets {
    max-width: 100%;
    gap: 4px;
  }

  .regime-preset-group {
    flex-wrap: wrap;
    justify-content: center;
  }

  .regime-surface-presets button {
    font-size: 0.62rem;
    padding: 3px 7px;
  }

  .regime-surface-info {
    max-width: 100%;
    font-size: 0.62rem;
    word-break: break-word;
  }
}

/* --- Competition widget --- */
.competition-widget {
  max-width: 580px;
  margin: 2rem auto;
  text-align: center;
}

.competition-layout {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

.competition-species canvas {
  border: 1px solid var(--petri-border);
  border-radius: 4px;
  background: #FAFAF8;
}

.competition-species-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.competition-score {
  text-align: center;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.competition-score-row {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--petri-text);
  white-space: nowrap;
}

.competition-score-row span {
  font-family: 'JetBrains Mono', monospace;
  display: inline-block;
  min-width: 3.8em;
  text-align: right;
}

@media (max-width: 540px) {
  .competition-layout {
    flex-direction: column;
    gap: 12px;
  }

  .competition-score {
    order: -1;
    min-width: unset;
  }

  .competition-species canvas {
    width: 180px;
    height: 180px;
  }
}

/* --- Scroll reveal animations --- */
.scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .figure-container {
    flex-direction: column;
    align-items: center;
  }

  .figure-container img {
    width: 100%;
  }

  .figure-grid-3 {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 1rem auto;
  }

  dt-article p {
    font-size: 1rem;
  }
}

/* --- Author section styling --- */
.byline {
  font-family: 'DM Sans', system-ui, sans-serif;
}

.byline .name {
  color: var(--petri-text);
  text-decoration: none;
}

.byline .name:hover {
  color: var(--petri-accent);
}

.byline .affiliation {
  color: var(--petri-text-muted);
  font-size: 0.85rem;
  text-decoration: none;
}