/* ============================================================
   Act 2 — The Collapse  ·  act2-collapse.css  (light mode)
   ============================================================ */

/* ── Binder gauge panel ────────────────────────────────────────── */
.act2-gauge-wrap {
  display:      flex;
  flex-direction: column;
  align-items:  center;
  gap:          1rem;
}

/* ── Bark beetle gallery photo — under the gauge ───────────────── */
.act2-gallery-photo {
  margin-top: 1.6rem;
  width:      100%;
}

.act2-gallery-photo-img {
  display:      block;
  width:        100%;
  height:       auto;
  object-fit:   cover;
  aspect-ratio: 4288 / 2848;
}

.act2-gauge-canvas {
  display:      block;
  width:        100%;
  max-width:    400px;
  height:       auto;
}

/* Readout row below the gauge */
.act2-gauge-readout {
  display:      flex;
  justify-content: center;
  gap:          2rem;
  flex-wrap:    wrap;
}

.act2-readout-item {
  display:      flex;
  flex-direction: column;
  align-items:  center;
  gap:          0.2em;
}

.act2-readout-value {
  font-family:  var(--act-font-mono);
  font-size:    1.5rem;
  font-weight:  600;
  color:        var(--act-text-primary);
  letter-spacing: -0.02em;
  min-width:    6ch;
  text-align:   center;
  font-variant-numeric: tabular-nums;
  line-height:  1;
}

.act2-readout-label {
  font-family:  var(--act-font-mono);
  font-size:    0.62rem;
  color:        var(--act-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align:   center;
}

/* Year dots row */
.act2-year-dots {
  display:      flex;
  justify-content: center;
  gap:          0.2rem;
  flex-wrap:    wrap;
  padding:      0.25rem 0;
}

.act2-year-dot-btn {
  width:        28px;
  height:       28px;
  display:      flex;
  align-items:  center;
  justify-content: center;
  cursor:       pointer;
  background:   transparent;
  border:       none;
  padding:      0;
  position:     relative;
}

.act2-year-dot-btn::before {
  content:      '';
  position:     absolute;
  width:        8px;
  height:       8px;
  border-radius: 50%;
  background:   rgba(26, 40, 16, 0.18);
  transition:   background 200ms ease, transform 200ms ease;
}

.act2-year-dot-btn:hover::before,
.act2-year-dot-btn.is-active::before {
  background:   var(--dot-colour, rgba(26, 40, 16, 0.65));
  transform:    scale(1.4);
}

.act2-year-dot-btn[data-year="2021"]::before {
  background:   #B83010;
  opacity:      0.70;
}

.act2-year-dot-btn[data-year="2021"].is-active::before {
  opacity:      1;
}

/* Pulse ring that fires when needle crosses zero */
.act2-gauge-pulse {
  position:     absolute;
  border-radius: 50%;
  border:       2px solid #B83010;
  opacity:      0;
  pointer-events: none;
  animation:    none;
}

@keyframes act2-pulse-ring {
  0%   { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0;   }
}

.act2-gauge-pulse.is-firing {
  animation: act2-pulse-ring 600ms ease-out forwards;
}

/* ── Equation block ─────────────────────────────────────────────── */
.act2-equation {
  margin:       1.4rem 0;
  padding:      1rem 1.4rem;
  background:   rgba(26, 40, 16, 0.04);
  border-left:  2px solid rgba(26, 40, 16, 0.14);
  border-radius: 0 5px 5px 0;
  overflow-x:   auto;
  text-align:   center;
}

/* KaTeX rendered in dark ink on parchment */
.act2-equation .katex,
.act2-equation .katex * {
  color: var(--act-text-primary) !important;
}

/* ── Power law log-log panel ────────────────────────────────────── */
.act2-loglog-container {
  width:        100%;
  overflow:     hidden;
}

.act2-loglog-container svg {
  display:      block;
  width:        100%;
  height:       auto;
  overflow:     visible;
}

/* Year toggle buttons below log-log */
.act2-year-toggles {
  display:      flex;
  gap:          0.6rem;
  margin-top:   0.75rem;
  flex-wrap:    wrap;
}

.act2-toggle-btn {
  font-family:  var(--act-font-mono);
  font-size:    0.7rem;
  letter-spacing: 0.06em;
  padding:      0.3rem 0.8rem;
  border-radius: 3px;
  border:       1px solid currentColor;
  background:   transparent;
  cursor:       pointer;
  transition:   background 200ms ease, opacity 200ms ease;
  opacity:      0.50;
  line-height:  1;
}

.act2-toggle-btn.is-active {
  opacity:      1;
  background:   rgba(26, 40, 16, 0.06);
}

/* Data colours — darkened for parchment contrast */
.act2-toggle-btn[data-year="2016"] { color: #2D6A1B; }
.act2-toggle-btn[data-year="2021"] { color: #B83010; }
.act2-toggle-btn[data-year="2024"] { color: #4A6A10; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .act2-readout-value { font-size: 1.2rem; }
  .act2-gauge-canvas  { max-width: 320px;  }
}


/* ══════════════════════════════════════════════════════════════════
   Part-1 layout — viz column appears LEFT of prose
   ═════════════════════════════════════════════════════════════════ */

/* ── Magnet canvas ───────────────────────────────────────────────── */
.act2-magnet-canvas {
  display:       block;
  width:         100%;
  max-width:     420px;    /* slightly smaller so it better aligns with prose height */
  margin:        0 auto;
  aspect-ratio:  1 / 1;   /* Safari: prevents fallback to 300×150 canvas default */
  border-radius: 6px;
  border:        1px solid rgba(26, 40, 16, 0.10);
}

/* ── Temperature control ─────────────────────────────────────────── */
.act2-temp-wrap {
  margin-top: 1rem;
}

.act2-temp-header {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  margin-bottom:   0.45rem;
}

.act2-temp-label {
  font-family:    var(--act-font-mono);
  font-size:      0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:          var(--act-text-muted);
}

.act2-temp-val-lbl {
  font-family:    var(--act-font-mono);
  font-size:      0.68rem;
  letter-spacing: 0.04em;
  color:          var(--act-text-primary);
  opacity:        0.65;
}

/* ── Range slider — cross-browser (Safari, Firefox, Chrome) ──────── */
.act2-temp-slider {
  display:    block;
  width:      100%;
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance: none;
  height:     20px;           /* tall hit area; track drawn via track pseudo */
  background: transparent;    /* Safari draws the track via ::webkit-slider-runnable-track */
  outline:    none;
  cursor:     pointer;
  margin:     0;
  padding:    0;
  border:     none;
  box-sizing: border-box;
}

/* Safari / Chrome — track */
/* -webkit-appearance: none on the track pseudo-element is required
   in Safari; without it the browser ignores height/background.     */
.act2-temp-slider::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  width:         100%;
  height:        4px;
  border-radius: 2px;
  border:        none;
  background:    linear-gradient(to right,
    rgba(26,40,16,0.22) 0%,
    rgba(26,40,16,0.22) 70%,
    rgba(184,48,16,0.60) 70%,
    rgba(184,48,16,0.60) 100%);
}

/* Safari / Chrome — thumb */
.act2-temp-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance:   none;
  width:        16px;
  height:       16px;
  border-radius: 50%;
  background:   #1A2810;
  border:       2px solid rgba(245,241,234,0.9);
  box-shadow:   0 1px 4px rgba(0,0,0,0.22);
  cursor:       pointer;
  margin-top:   -6px;         /* vertically centre thumb on 4px track */
  transition:   transform 120ms ease;
}

.act2-temp-slider::-webkit-slider-thumb:hover {
  transform: scale(1.20);
}

/* Firefox — track */
.act2-temp-slider::-moz-range-track {
  height:       4px;
  border-radius: 2px;
  background:   rgba(26,40,16,0.22);
  border:       none;
}

/* Firefox — thumb */
.act2-temp-slider::-moz-range-thumb {
  width:        14px;
  height:       14px;
  border-radius: 50%;
  background:   #1A2810;
  border:       2px solid rgba(245,241,234,0.9);
  box-shadow:   0 1px 4px rgba(0,0,0,0.22);
  cursor:       pointer;
}

/* ── Curie point marker row ──────────────────────────────────────── */
.act2-curie-row {
  position:   relative;
  height:     1.5rem;
  margin-top: 3px;
}

.act2-curie-label {
  position:       absolute;
  left:           70%;
  transform:      translateX(-50%);
  font-family:    var(--act-font-mono);
  font-size:      0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          #B83010;
  white-space:    nowrap;
  line-height:    1.3;
}

/* ── Forest toggle button ────────────────────────────────────────── */
/* Safari: -webkit-appearance must come first; background:none alone
   doesn't clear the native button gradient — use background-color +
   background-image; box-shadow:none removes the native inset glow.  */
.act2-forest-toggle {
  -webkit-appearance: none;
  appearance:         none;
  background-color:   transparent;
  background-image:   none;
  box-shadow:         none;
  border:             1px solid rgba(26, 40, 16, 0.28);
  border-radius:      4px;
  padding:            0.22rem 0.65rem;
  cursor:             pointer;
  font-family:        var(--act-font-mono);
  font-size:          0.74rem;
  color:              rgba(26,40,16,0.60);
  letter-spacing:     0.04em;
  line-height:        1;
  -webkit-font-smoothing: antialiased;
  transition:         border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}

.act2-forest-toggle:hover {
  border-color:  rgba(26,40,16,0.55);
  color:         rgba(26,40,16,0.88);
}

.act2-forest-toggle[aria-pressed="true"] {
  background-color: rgba(26,40,16,0.07);
  border-color:     rgba(26,40,16,0.45);
  color:            rgba(26,40,16,0.88);
}

/* ── Equation tooltip wrapper (block-level) ──────────────────────── */

.act2-eq-tip-wrap {
  position:  relative;
  display:   block;
  cursor:    help;
  outline:   none;
}

/* Subtle glow on hover to hint at interactivity */
.act2-eq-tip-wrap:hover .act2-equation,
.act2-eq-tip-wrap:focus-visible .act2-equation {
  opacity: 0.82;
  transition: opacity 160ms ease;
}

/* The equation tooltip lives inside a block context so display:none would
   prevent CSS transitions. Override to visibility:hidden instead — this
   keeps the element in layout so opacity/transform can animate properly. */
.act2-eq-tip-wrap .act2-bc-tooltip {
  display:    block !important;   /* override the base display:none */
  visibility: hidden;
  transition: opacity 200ms ease,
              transform 240ms cubic-bezier(0.34, 1.38, 0.64, 1),
              visibility 0ms 210ms;   /* delay visibility change until after fade-out */
}

.act2-eq-tip-wrap.is-active .act2-bc-tooltip {
  visibility: visible;
  opacity:    1;
  transform:  translateX(-50%) translateY(0);
  transition: opacity 200ms ease,
              transform 240ms cubic-bezier(0.34, 1.38, 0.64, 1),
              visibility 0ms 0ms;     /* show immediately */
}

/* ── Binder cumulant hover tooltip ──────────────────────────────── */

.act2-bc-wrap {
  position:   relative;
  display:    inline-block;  /* must be block-level for position:absolute child to work in Safari */
  cursor:     help;
  outline:    none;
  vertical-align: baseline;
}

.act2-bc-term {
  border-bottom:  1.5px dotted rgba(45, 106, 27, 0.50);
  padding-bottom: 1px;
  transition:     color 180ms ease, border-color 180ms ease;
}

.act2-bc-wrap:hover .act2-bc-term,
.act2-bc-wrap:focus-visible .act2-bc-term {
  color:               #2D6A1B;
  border-bottom-color: #2D6A1B;
}

.act2-bc-tooltip {
  display:          block;
  position:         absolute;
  bottom:           calc(100% + 10px);
  left:             50%;
  transform:        translateX(-50%) translateY(6px);
  width:            310px;
  max-width:        calc(100vw - 32px);
  padding:          0.9rem 1.05rem 0.85rem;
  background:       rgba(10, 18, 7, 0.96);
  backdrop-filter:  blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:           1px solid rgba(45, 106, 27, 0.28);
  border-radius:    9px;
  box-shadow:       0 14px 40px rgba(0,0,0,0.36), 0 4px 10px rgba(0,0,0,0.22);
  color:            rgba(235, 248, 228, 0.87);
  font-family:      Georgia, 'Times New Roman', serif;
  font-size:        0.74rem;
  font-style:       normal;
  line-height:      1.68;
  letter-spacing:   0.01em;
  pointer-events:   none;
  opacity:          0;
  transition:       opacity 200ms ease, transform 240ms cubic-bezier(0.34, 1.38, 0.64, 1);
  z-index:          200;
  text-align:       left;
  white-space:      normal;
}

.act2-bc-tooltip::before {
  content:    '';
  position:   absolute;
  top:        100%;
  left:       50%;
  transform:  translateX(-50%);
  border:     7px solid transparent;
  border-top-color: rgba(45, 106, 27, 0.28);
  border-bottom-width: 0;
}
.act2-bc-tooltip::after {
  content:    '';
  position:   absolute;
  top:        calc(100% - 1px);
  left:       50%;
  transform:  translateX(-50%);
  border:     6px solid transparent;
  border-top-color: rgba(10, 18, 7, 0.96);
  border-bottom-width: 0;
}

/* Shown — CSS hover (works in Safari) + .is-active JS class fallback */
.act2-bc-wrap:hover .act2-bc-tooltip,
.act2-bc-wrap:focus-visible .act2-bc-tooltip,
.act2-bc-wrap.is-active .act2-bc-tooltip {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}

/* ── Inline footnote tooltips ────────────────────────────────────── */

.act2-ft-wrap {
  position:       relative;
  display:        inline-block;  /* Safari: position:absolute on ::after needs block context */
  cursor:         help;
  border-bottom:  1px dashed rgba(26, 40, 16, 0.35);
  vertical-align: baseline;
}

.act2-ft-wrap::after {
  content:        attr(data-tip);
  position:       absolute;
  bottom:         calc(100% + 7px);
  left:           50%;
  transform:      translateX(-50%) translateY(4px);
  white-space:    nowrap;
  padding:        0.22rem 0.55rem;
  background:     rgba(26, 40, 16, 0.90);
  color:          rgba(235, 248, 228, 0.90);
  font-family:    var(--act-font-mono);
  font-size:      0.62rem;
  font-style:     italic;
  letter-spacing: 0.04em;
  border-radius:  4px;
  pointer-events: none;
  opacity:        0;
  transition:     opacity 160ms ease, transform 160ms ease;
  z-index:        100;
}

.act2-ft-wrap:hover::after,
.act2-ft-wrap.is-active::after {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}

/* ── Sign-flip emphasis ──────────────────────────────────────────── */
.act2-sign-flip {
  font-style:  italic;
  font-weight: 600;
  font-size:   1.06em;
  color:       var(--act-text-primary);
}

/* ── Inline KaTeX (α) ────────────────────────────────────────────── */
.act2-katex-inline .katex {
  font-size:      1em !important;
  color:          inherit;
  vertical-align: baseline;
}

/* ── Override first-paragraph enlargement for Act 2 prose ────────── */
/* acts-shared.css sets font-size: 1.16× and --act-text-primary on
   p:first-of-type inside .act-prose.  We don't want that in Act 2 —
   both opening paragraphs should read at normal body size/colour.
   !important guarantees this wins over any specificity tiebreak.    */
#act2 .act-prose p:first-of-type {
  font-size:   var(--act-prose-size) !important;
  color:       var(--act-text-body)  !important;
  line-height: 1.74                  !important;
  font-weight: normal                !important;
}

/* ── KaTeX inside dark tooltip ───────────────────────────────────── */
.act2-tip-math {
  display: inline-block;
  vertical-align: middle;
}

.act2-tip-math .katex,
.act2-tip-math .katex * {
  color: rgba(235, 248, 228, 0.92) !important;
  font-size: 0.82rem !important;
}

/* ── Power-law vs log-normal tooltip ────────────────────────────── */

.act2-pl-wrap {
  position:       relative;
  display:        inline-block;
  cursor:         help;
  outline:        none;
  vertical-align: baseline;
}

.act2-pl-term {
  border-bottom:  1.5px dotted rgba(45, 106, 27, 0.45);
  padding-bottom: 1px;
  transition:     color 180ms ease, border-color 180ms ease;
}

.act2-pl-wrap:hover .act2-pl-term,
.act2-pl-wrap:focus-visible .act2-pl-term {
  color:               #2D6A1B;
  border-bottom-color: #2D6A1B;
}

.act2-pl-tooltip {
  display:          flex;
  flex-direction:   column;
  gap:              0.65rem;
  position:         absolute;
  bottom:           calc(100% + 12px);
  left:             50%;
  transform:        translateX(-50%) translateY(8px);
  width:            340px;
  max-width:        calc(100vw - 32px);
  padding:          1rem 1.1rem 0.95rem;
  background:       rgba(10, 18, 7, 0.97);
  backdrop-filter:  blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:           1px solid rgba(45, 106, 27, 0.28);
  border-radius:    10px;
  box-shadow:       0 16px 48px rgba(0,0,0,0.40), 0 4px 12px rgba(0,0,0,0.26);
  color:            rgba(235, 248, 228, 0.85);
  font-family:      Georgia, 'Times New Roman', serif;
  font-size:        0.74rem;
  font-style:       normal;
  line-height:      1.65;
  letter-spacing:   0.01em;
  pointer-events:   none;
  opacity:          0;
  transition:       opacity 200ms ease,
                    transform 240ms cubic-bezier(0.34, 1.38, 0.64, 1);
  z-index:          200;
  text-align:       left;
  white-space:      normal;
}

/* Arrow */
.act2-pl-tooltip::before {
  content:    '';
  position:   absolute;
  top:        100%;
  left:       50%;
  transform:  translateX(-50%);
  border:     7px solid transparent;
  border-top-color: rgba(45, 106, 27, 0.28);
  border-bottom-width: 0;
}
.act2-pl-tooltip::after {
  content:    '';
  position:   absolute;
  top:        calc(100% - 1px);
  left:       50%;
  transform:  translateX(-50%);
  border:     6px solid transparent;
  border-top-color: rgba(10, 18, 7, 0.97);
  border-bottom-width: 0;
}

/* Shown — CSS hover (works in Safari) + .is-active JS class fallback */
.act2-pl-wrap:hover .act2-pl-tooltip,
.act2-pl-wrap:focus-visible .act2-pl-tooltip,
.act2-pl-wrap.is-active .act2-pl-tooltip {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}

/* Each row: icon + text */
.act2-pl-row {
  display:    flex;
  gap:        0.5rem;
  align-items: flex-start;
}

.act2-pl-icon {
  flex-shrink:  0;
  margin-top:   0.15em;
  font-size:    0.60rem;
  color:        rgba(45, 106, 27, 0.65);
}

/* Highlighted row — the power law (the critical finding) */
.act2-pl-row--hi {
  padding:      0.55rem 0.6rem;
  background:   rgba(184, 48, 16, 0.12);
  border:       1px solid rgba(184, 48, 16, 0.22);
  border-radius: 5px;
  margin-top:   -0.1rem;
}

.act2-pl-row--hi .act2-pl-icon {
  color: rgba(220, 100, 60, 0.80);
}

.act2-pl-tooltip strong {
  color: rgba(235, 248, 228, 0.98);
  font-weight: 600;
  font-family: 'Courier New', monospace;
  font-size:   0.70rem;
  letter-spacing: 0.04em;
}

@media (max-width: 600px) {
  .act2-pl-tooltip {
    width:     min(300px, calc(100vw - 28px));
    font-size: 0.70rem;
  }
}

/* ── Alpha exponent tooltip ──────────────────────────────────────── */

.act2-alpha-wrap {
  position:       relative;
  display:        inline-block;
  cursor:         help;
  vertical-align: baseline;
}

.act2-alpha-term {
  border-bottom:  1.5px dotted rgba(45, 106, 27, 0.50);
  padding-bottom: 1px;
  transition:     color 180ms ease, border-color 180ms ease;
}

.act2-alpha-wrap:hover .act2-alpha-term {
  color:               #2D6A1B;
  border-bottom-color: #2D6A1B;
}

.act2-alpha-tooltip {
  display:          none;        /* JS controls visibility */
  position:         absolute;
  top:              calc(100% + 10px);
  left:             0;
  transform:        translateY(-6px);
  width:            250px;
  max-width:        calc(100vw - 32px);
  padding:          0.80rem 0.95rem 0.75rem;
  background:       rgba(10, 18, 7, 0.96);
  backdrop-filter:  blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:           1px solid rgba(45, 106, 27, 0.28);
  border-radius:    9px;
  box-shadow:       0 14px 40px rgba(0,0,0,0.36), 0 4px 10px rgba(0,0,0,0.22);
  color:            rgba(235, 248, 228, 0.87);
  font-family:      Georgia, 'Times New Roman', serif;
  font-size:        0.74rem;
  font-style:       normal;
  line-height:      1.68;
  letter-spacing:   0.01em;
  pointer-events:   none;
  opacity:          0;
  transition:       opacity 200ms ease,
                    transform 240ms cubic-bezier(0.34, 1.38, 0.64, 1);
  z-index:          200;
  text-align:       left;
  white-space:      normal;
}

.act2-alpha-tooltip::before {
  content:    '';
  position:   absolute;
  bottom:     100%;
  left:       1.2rem;
  transform:  none;
  border:     7px solid transparent;
  border-bottom-color: rgba(45, 106, 27, 0.28);
  border-top-width: 0;
}

.act2-alpha-tooltip::after {
  content:    '';
  position:   absolute;
  bottom:     calc(100% - 1px);
  left:       1.2rem;
  transform:  none;
  border:     6px solid transparent;
  border-bottom-color: rgba(10, 18, 7, 0.96);
  border-top-width: 0;
}

.act2-alpha-wrap.is-active .act2-alpha-tooltip {
  display:   block;
  opacity:   1;
  transform: translateY(0);
}