/* Cubic-Bezier Editor — a split: the curve card (SVG editor over the four
   coordinate fields) on the left, the inspector (animated preview, presets,
   the CSS output) on the right (layout from styles/components/form.css).
   Only the title tile, the editor, the coordinate fields, the preview track,
   the preset chips and the output value are the page's own. */

/* Title-icon gradient tile to match the catalog's "iOS app icon" feel — same
   trick pixelate uses (.px-title-icon). Gradient matches the registry's grad
   tuple for this tool so the springboard tile and the page header agree. */
.cb-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #A855F7, #7C3AED);
  color: #fff;
}

/* ── Editor ─────────────────────────────────────────────────────────────── */

.cb-editor {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 11 / 21;     /* matches the 1.1 x 2.1 viewBox */
  /* Cap the height on narrow viewports — the tall aspect needed for the
     overshoot zone would otherwise consume most of mobile/tablet screens.
     With both aspect-ratio and max-height set, the browser shrinks width
     to preserve aspect when height becomes the binding constraint. */
  max-height: 70vh;
  min-height: 320px;
  margin: 0 auto;
  display: block;
  touch-action: none;        /* let pointer drag work on touch */
  user-select: none;
}

/* Strokes use vector-effect: non-scaling-stroke so they stay crisp regardless
   of how the SVG is scaled — but that means stroke-width is in CSS pixels,
   not viewBox units. Lesson learned from the first cut where fractional
   widths went sub-pixel and the editor rendered blank. */
.cb-grid-lines line {
  stroke: var(--border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.cb-grid-lines .cb-grid-edge {
  stroke: color-mix(in srgb, var(--border) 70%, transparent);
  stroke-dasharray: 4 5;
}
.cb-grid-lines .cb-grid-thin {
  stroke: color-mix(in srgb, var(--border) 60%, transparent);
}

.cb-linear-ref {
  stroke: color-mix(in srgb, var(--text-muted) 45%, transparent);
  stroke-width: 1;
  stroke-dasharray: 4 5;
  vector-effect: non-scaling-stroke;
}

.cb-curve {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.cb-leash {
  stroke: color-mix(in srgb, var(--accent) 60%, transparent);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
  vector-effect: non-scaling-stroke;
}

.cb-anchor {
  fill: var(--text);
  opacity: 0.6;
}

.cb-handle {
  /* A faint accent tint at rest (rather than the plain card fill) so the
     handles read as draggable affordances, not decorative rings — they pop
     against the grid without needing the subtitle to explain them. */
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 2;
  cursor: grab;
  vector-effect: non-scaling-stroke;
  transition: r var(--duration-snap) var(--ease-standard),
              fill var(--duration-snap) var(--ease-standard);
}
.cb-handle:hover,
.cb-handle:focus-visible {
  fill: color-mix(in srgb, var(--accent) 35%, var(--bg-elev));
  outline: none;
}
.cb-handle.is-dragging { fill: var(--accent); cursor: grabbing; }

/* Coordinate fields: the stacked row makes the field full width; only the
   typeface and alignment are tuned for these short numeric coordinates. */
input.cb-in {
  min-width: 0;
  padding-inline: var(--space-1);
  font-family: var(--mono);
  text-align: center;
}

/* ── Inspector: preview, presets, output ───────────────────────────────── */

/* The value is the headline deliverable: a filled code block sized so the
   usual four-number value stays on one line at the inspector's width. */
.cb-css {
  display: block;
  padding: var(--space-3);
  background: var(--bg-fill);
  border-radius: var(--radius-md);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  user-select: all;
  overflow-wrap: anywhere;
}

.cb-preview-track {
  position: relative;
  height: 36px;
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--border) 90%, transparent) 0,
      color-mix(in srgb, var(--border) 90%, transparent) 2px,
      transparent 2px),
    linear-gradient(to right,
      transparent calc(100% - 2px),
      color-mix(in srgb, var(--border) 90%, transparent) calc(100% - 2px));
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cb-ball {
  position: absolute;
  top: 50%;
  left: 0;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 55%, transparent);
  /* Driven by JS via `left: calc(yLin * (100% - <ballWidth>px))` so the ball
     traverses the actual track width, not its own. (First cut animated via
     translateX(...%), which is relative to the element's own width — the
     ball would slide ~22px instead of ~track-width and the easing looked
     dead.) Track overflow:hidden masks any overshoot beyond [0,1]. */
  will-change: left;
}

.cb-chip { font-family: var(--mono); }