/* cql-story.css — shared story/motion/type layer for Charlie Quant Lab desks
   Motion explains sequence: question → evidence → catch → next.
   Never gates content. Respects prefers-reduced-motion. No research claims. */

:root {
  --cql-story-ease: cubic-bezier(.16, 1, .3, 1);
  --cql-story-dur: .55s;
  --cql-story-dur-slow: .72s;
  --cql-focus: #c2410c;
  --cql-progress: #0d4f8b;
}

/* Manrope helpers — only apply when desk opts in */
.cql-type-manrope,
[data-cql-story-type="manrope"] {
  font-family: Manrope, Arial, sans-serif;
}
.cql-type-tight { letter-spacing: -.03em; }
.cql-type-mono-label {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Focus rings — visible keyboard path */
.cql-story a:focus-visible,
.cql-story button:focus-visible,
.cql-story summary:focus-visible,
.cql-story [tabindex]:focus-visible,
[data-cql-story] a:focus-visible,
[data-cql-story] button:focus-visible,
[data-cql-focus] :focus-visible {
  outline: 2px solid var(--cql-focus);
  outline-offset: 3px;
}

/* Scroll progress — optional chrome; decorative only */
.cql-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  z-index: 10050;
  pointer-events: none;
  background: rgba(13, 79, 139, 0.12);
}
.cql-scroll-progress > i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0d4f8b, #c2410c 55%, #ea580c);
  box-shadow: 0 0 12px rgba(194, 65, 12, 0.45);
  transform-origin: left center;
}

/* Chapter / reveal staging — content always in DOM; motion only when JS marks readiness */
[data-cql-story="chapter"],
[data-cql-story="evidence"],
[data-cql-story="catch"],
[data-cql-story="next"],
[data-cql-story="question"] {
  /* no opacity gate without .cql-story-ready on html */
}
html.cql-story-ready [data-cql-story="chapter"]:not(.cql-in),
html.cql-story-ready [data-cql-story="evidence"]:not(.cql-in),
html.cql-story-ready [data-cql-story="catch"]:not(.cql-in),
html.cql-story-ready [data-cql-story="next"]:not(.cql-in),
html.cql-story-ready [data-cql-story="question"]:not(.cql-in) {
  opacity: .92;
  transform: translateY(10px);
}
html.cql-story-ready [data-cql-story].cql-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--cql-story-dur) var(--cql-story-ease),
              transform var(--cql-story-dur) var(--cql-story-ease);
}

/* Role accents — subtle, subject-agnostic; desks can override */
html.cql-story-ready [data-cql-story="question"].cql-in {
  transition-duration: var(--cql-story-dur-slow);
}
html.cql-story-ready [data-cql-story="catch"].cql-in {
  box-shadow: inset 3px 0 0 0 color-mix(in srgb, var(--cql-focus) 70%, transparent);
}

/* Metric panel expand — disclosure of existing panel body; no content invent */
[data-cql-story="metric-panel"] {
  overflow: clip;
}
[data-cql-story="metric-panel"][data-cql-expanded="false"] .cql-metric-body {
  max-height: 0;
  opacity: 0;
  transition: max-height var(--cql-story-dur) var(--cql-story-ease),
              opacity .35s ease;
}
[data-cql-story="metric-panel"][data-cql-expanded="true"] .cql-metric-body,
[data-cql-story="metric-panel"]:not([data-cql-expanded]) .cql-metric-body {
  max-height: 2400px;
  opacity: 1;
}
[data-cql-story="metric-panel"] .cql-metric-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
[data-cql-story="metric-panel"] .cql-metric-toggle:focus-visible {
  outline: 2px solid var(--cql-focus);
  outline-offset: 3px;
}

/* Stamp pulse — edition mark settles once */
[data-cql-story="stamp"],
.cql-stamp {
  display: inline-block;
  transform-origin: 30% 40%;
}
html.cql-story-ready [data-cql-story="stamp"]:not(.cql-in),
html.cql-story-ready .cql-stamp:not(.cql-in) {
  opacity: .85;
  transform: rotate(-4deg) scale(1.04);
}
html.cql-story-ready [data-cql-story="stamp"].cql-in,
html.cql-story-ready .cql-stamp.cql-in {
  opacity: 1;
  transform: rotate(-1.5deg) scale(1);
  transition: transform .5s var(--cql-story-ease), opacity .4s ease;
}

/* Sounding / pressure job helper — desks set --cql-sound-depth */
[data-cql-story="sounding"] .cql-sound-lead {
  transform-origin: top center;
}
html.cql-story-ready [data-cql-story="sounding"]:not(.cql-in) .cql-sound-lead {
  transform: scaleY(0.08);
}
html.cql-story-ready [data-cql-story="sounding"].cql-in .cql-sound-lead {
  transform: scaleY(1);
  transition: transform .85s var(--cql-story-ease);
}

/* Reduced motion — settled frame only */
@media (prefers-reduced-motion: reduce) {
  .cql-scroll-progress > i { transition: none !important; }
  html.cql-story-ready [data-cql-story],
  html.cql-story-ready [data-cql-story].cql-in,
  html.cql-story-ready .cql-stamp,
  html.cql-story-ready .cql-stamp.cql-in,
  html.cql-story-ready [data-cql-story="sounding"] .cql-sound-lead,
  html.cql-story-ready [data-cql-story="metric-panel"] .cql-metric-body {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    max-height: none !important;
  }
}


/* vivid progress ensure */
html body .cql-scroll-progress { height: 5px; z-index: 10050; background: rgba(13,79,139,.12); }
html body .cql-scroll-progress > i { background: linear-gradient(90deg,#0d4f8b,#c2410c 55%,#ea580c); box-shadow: 0 0 12px rgba(194,65,12,.45); }