/* Kinetic Typography Composer — chrome that Tailwind does not cover */

:root {
  color-scheme: dark;
  /* The canvas can be taller than this viewport; adjust this value to give
     the timeline more or less screen space without changing its track layout. */
  --timeline-viewport-height: clamp(220px, 34vh, 360px);
}

html, body { height: 100%; }
body { -webkit-font-smoothing: antialiased; }

/* ── scrollbars ───────────────────────────────────────────── */
.scroll-thin { scrollbar-width: thin; scrollbar-color: #2c333f transparent; }
.scroll-thin::-webkit-scrollbar { width: 9px; height: 9px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-thin::-webkit-scrollbar-thumb { background: #2c333f; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
.scroll-thin::-webkit-scrollbar-thumb:hover { background: #3a4353; background-clip: content-box; }

/* ── range inputs ─────────────────────────────────────────── */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 99px; background: #222833; outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: #e4e8ef; border: 2px solid #0d0f14;
  box-shadow: 0 0 0 1px #38455c; cursor: grab; transition: transform .12s ease, background .12s ease;
}
input[type="range"]::-webkit-slider-thumb:hover { background: #fff; transform: scale(1.12); }
input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(0.96); }
/* a focused slider owns the arrow keys, so make it obvious which one has them */
input[type="range"]:focus { box-shadow: 0 0 0 2px #0d0f14, 0 0 0 3px #38bdf8aa; }
input[type="range"]:focus::-webkit-slider-thumb { background: #fff; box-shadow: 0 0 0 1px #38bdf8; }

input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%; background: #e4e8ef;
  border: 2px solid #0d0f14; box-shadow: 0 0 0 1px #38455c; cursor: grab;
}

/* ── colour swatch ────────────────────────────────────────── */
input[type="color"] { -webkit-appearance: none; appearance: none; padding: 0; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 3px; }

/* ── number spinners off ──────────────────────────────────── */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* ── viewport checkerboard behind the canvas ──────────────── */
#stageFrame {
  background-image:
    linear-gradient(45deg, #101319 25%, transparent 25%),
    linear-gradient(-45deg, #101319 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #101319 75%),
    linear-gradient(-45deg, transparent 75%, #101319 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

/* ── stage rows ───────────────────────────────────────────── */
.stage-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 7px; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent; background: #0d0f14;
  transition: background .12s ease, border-color .12s ease;
}
.stage-row:hover { background: #161b24; }
.stage-row.is-active { background: #161b24; border-color: var(--role, #38bdf8); }
.stage-row .dot {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
  color: #08090c; background: var(--role, #38bdf8);
}

/* ── pattern preview points ───────────────────────────────── */
.pp { display: flex; align-items: center; gap: 0; min-width: max-content; padding: 2px 4px; }
.pp-node {
  width: 22px; height: 22px; border-radius: 50%; flex: none; cursor: pointer;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #08090c;
  background: var(--role); transition: transform .12s ease, box-shadow .12s ease;
}
.pp-node:hover { transform: scale(1.12); }
.pp-node.is-active { box-shadow: 0 0 0 2px #0d0f14, 0 0 0 3.5px var(--role); }
.pp-node.pp-wide { width: 40px; border-radius: 11px; letter-spacing: -0.02em; }
.pp-node.pp-small { width: 18px; height: 18px; font-size: 9px; }
.pp-node.pp-small.pp-wide { width: 32px; border-radius: 9px; }
.pp-link { min-width: 8px; }
.stage-row .dot.dot-wide { width: 30px; border-radius: 9px; font-size: 9px; }
.pp-link { height: 2px; width: 14px; flex: none; background: linear-gradient(90deg, var(--a), var(--b)); opacity: .5; }

/* ── recording pulse ──────────────────────────────────────── */
@keyframes recpulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.is-recording { animation: recpulse 1s ease-in-out infinite; }

#timelineCanvas { touch-action: none; }
#timelineHeaderCanvas { display: block; width: 100%; height: 30px; touch-action: none; }

/* Keep the editor body usable when optional media lanes or particle emitters
   make the timeline content taller than the available timeline viewport. */
.timeline-scroll {
  height: var(--timeline-viewport-height);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* The ruler and beat strip stay available while the lanes underneath scroll. */
.timeline-pinned {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 30px;
  margin-bottom: -30px;
  background: #0a0c11;
  box-shadow: 0 6px 10px -10px rgba(0, 0, 0, .95);
}

#timelineViewport > #tlTip { z-index: 30; }

/* ── viewport mode switch ────────────────────────────────── */
.view-mode-active {
  background: #7c3aed !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px #a78bfa88 inset;
}

#stageCanvas { touch-action: none; }

/* ── particle over-life curves ────────────────────────────── */
.curve-editor { min-width: 0; }
.curve-hint {
  color: #525a69; font-size: 9px; line-height: 1; white-space: nowrap;
}
.curve-plot {
  display: block; width: 100%; height: 86px; min-width: 0; overflow: visible;
  border: 1px solid #242a36; border-radius: 5px; background: #08090c;
  cursor: crosshair; touch-action: none; user-select: none;
}
.curve-plot:focus { outline: 1px solid #38bdf8aa; outline-offset: 1px; }
.curve-plot:active { cursor: crosshair; }
.curve-bg { fill: #0b0e13; }
.curve-grid { stroke: #242a36; stroke-width: .7; opacity: .72; vector-effect: non-scaling-stroke; }
.curve-axis { stroke: #596273; stroke-width: .8; opacity: .8; vector-effect: non-scaling-stroke; }
.curve-fill { fill: #f472b644; pointer-events: none; }
.curve-line { fill: none; stroke: #f9a8d4; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.curve-x-label, .curve-y-label {
  fill: #596273; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 6px; letter-spacing: .08em; pointer-events: none;
}
.curve-y-label { text-anchor: end; }
.curve-presets {
  display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 2px;
  width: 29px; flex: none;
}
.curve-preset {
  display: grid; place-items: center; min-height: 0; padding: 1px 2px;
  border: 1px solid transparent; border-radius: 3px; background: #181c25;
  color: #7c8799; cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.curve-preset:hover { background: #222833; color: #e4e8ef; }
.curve-preset.is-active { border-color: #f472b6aa; background: #32202d; color: #f9a8d4; }
.curve-preset svg { width: 24px; height: 12px; overflow: visible; }
.curve-preset path { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ── stage move control ──────────────────────────────────── */
#stageGizmo.hidden { display: none; }
.gz-box {
  fill: rgba(56, 189, 248, 0.05); stroke: #38bdf8; stroke-width: 1.25;
  stroke-dasharray: 5 4; pointer-events: auto; cursor: move;
}
.gz-box:hover { fill: rgba(56, 189, 248, 0.10); }
.gz-corner { fill: #0d0f14; stroke: #38bdf8; stroke-width: 1.25; }
.gz-cross { stroke: #0d0f14; stroke-width: 1.5; opacity: .8; }
.gz-handle { fill: rgba(56, 189, 248, .92); stroke: #0d0f14; stroke-width: 2; pointer-events: auto; cursor: grab; }
.gz-handle:hover { fill: #7dd3fc; }
#stageGizmo.is-dragging .gz-box { stroke-dasharray: none; fill: rgba(56, 189, 248, 0.12); cursor: grabbing; }
#stageGizmo.is-dragging .gz-handle { fill: #7dd3fc; cursor: grabbing; }