/* ══════════════════════════════════════════════════════════════════
   /research/:ticker stacked-panel styles (Phase F-6 2026-05-25)
   ──────────────────────────────────────────────────────────────────
   Progressive enhancement layer applied to .tk-section blocks on
   ticker.html when html or body carries data-yb-stack. The controller
   in lib/yb-research-stack.js wraps each section's inner contents in
   a .tk-stack-body div and turns the h2 heading into a clickable
   chevron-bearing button. These styles drive the collapse, the focus
   ring, and the chevron rotation.

   Voice contract. Zero em-dashes, zero prose semicolons. CSS property
   terminators are syntax and required.
   ═══════════════════════════════════════════════════════════════ */

/* Heading-as-button affordance. The .tk-stack-head class lands on the
   h2 once the controller wraps a section. Inherits the existing h2
   font sizing but gains chevron + hover + focus chrome. */
[data-yb-stack] .tk-section .tk-stack-head {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 14px;
  user-select: none;
  position: relative;
  transition: color 140ms ease;
}

[data-yb-stack] .tk-section .tk-stack-head:hover {
  color: var(--gold, #d4a843);
}

[data-yb-stack] .tk-section .tk-stack-head:focus-visible {
  outline: 1px dashed var(--gold, #d4a843);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Chevron. Rotates 180 degrees when the section is collapsed via
   the data-yb-collapsed attribute. */
[data-yb-stack] .tk-section .tk-stack-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
  color: var(--ink-mute, #9ca3af);
  border: 1px solid var(--line, rgba(184, 146, 58, 0.18));
  border-radius: 50%;
  background: var(--bg-elev, rgba(20, 22, 27, 0.55));
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), color 140ms ease, border-color 140ms ease;
  flex-shrink: 0;
}

[data-yb-stack] .tk-section[data-yb-collapsed="true"] .tk-stack-chev {
  transform: rotate(-90deg);
}

[data-yb-stack] .tk-section .tk-stack-head:hover .tk-stack-chev {
  color: var(--gold, #d4a843);
  border-color: var(--gold-line, rgba(212, 168, 67, 0.4));
}

/* Collapsing body. CSS max-height transition gives a smooth slide
   without measuring height in JS. The 2400px ceiling covers the
   longest section (Receipts plus Fundamentals). Long-form sections
   that exceed this would clip on collapse-then-open but the visual
   recovery on second open is instant. */
[data-yb-stack] .tk-section .tk-stack-body {
  overflow: hidden;
  max-height: 2400px;
  opacity: 1;
  transition: max-height 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease, margin 180ms ease;
}

[data-yb-stack] .tk-section[data-yb-collapsed="true"] .tk-stack-body {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* Visual breathing room when a section is open so the chevron does
   not crash into the body content. */
[data-yb-stack] .tk-section[data-yb-collapsed="false"] .tk-stack-body {
  padding-top: 4px;
}

/* prefers-reduced-motion. Collapse instantly without the slide. */
@media (prefers-reduced-motion: reduce) {
  [data-yb-stack] .tk-section .tk-stack-body,
  [data-yb-stack] .tk-section .tk-stack-chev {
    transition: none;
  }
}

/* Mobile. Tighten the chevron + heading gap so the click target
   stays compact on phone-sized viewports. */
@media (max-width: 640px) {
  [data-yb-stack] .tk-section .tk-stack-head {
    gap: 10px;
  }
  [data-yb-stack] .tk-section .tk-stack-chev {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }
}