/* ============================================================
   Clare Digital podcast extension: "The Instrument, tuned"
   Extends tokens.css + site.css for podcast-production-growth.
   Load order: tokens.css, then site.css, then this file.
   No new colors. No new radii. No shadows, gradients, textures.
   Everything below is the existing system pointed at audio:
   a waveform is a chart, the needle picks the bar that matters,
   chapters are index lines, the scrubber is a horizontal needle.
   ============================================================ */

:root {
  /* waveform geometry (the bar width matches the 3px needle) */
  --wave-bar: 3px;
  --wave-gap: 3px;
  --wave-h: 48px;

  /* frame aspect ratios */
  --ar-video: 16 / 9;   /* thumbnail and player frames */
  --ar-clip: 9 / 16;    /* short-form clip frames */

  /* timeline / scrubber */
  --tl-track: 1px;      /* track is a hairline */
  --tl-progress: 3px;   /* progress is the needle, horizontal */
  --tl-dot: 9px;        /* playhead dot (reticle-dot family) */
}

/* ---------- Waveform, bar form (.wave) ----------
   Ink bars on light. At most ONE electric bar per waveform
   (class .on): the needle rule applied to audio. On carbon use
   .wave-dark; lime bars count as the screen's single readout
   moment, so never pair a lime wave with a .readout strip.
   Bar heights: set inline (style="height:62%") for drawn audio,
   or rely on the default 6-step rhythm below. */
.wave { display: flex; align-items: center; gap: var(--wave-gap); height: var(--wave-h); }
.wave i { display: block; flex: 0 0 var(--wave-bar); border-radius: 1px; background: var(--ink); height: 24%; }
.wave i.on { background: var(--electric); }
.wave i:nth-child(6n+1) { height: 24%; }
.wave i:nth-child(6n+2) { height: 58%; }
.wave i:nth-child(6n+3) { height: 100%; }
.wave i:nth-child(6n+4) { height: 42%; }
.wave i:nth-child(6n+5) { height: 74%; }
.wave i:nth-child(6n+6) { height: 33%; }
.wave-dark i { background: var(--ondark-muted); }
.wave-dark i.on { background: var(--lime); }
/* quiet variant for inside frames and cards */
.wave-sm { height: 26px; }
.wave-sm i { flex-basis: 2px; }

/* ---------- Editing timeline / scrubber (.timeline) ----------
   Track = hairline. Progress = 3px electric bar. Playhead = the
   one allowed dot. Chapter ticks are 1px ink; labels are mono
   caps in the index-line voice. Position ticks/chapters with
   inline left percentages. */
.timeline { position: relative; height: 60px; }
.timeline .track { position: absolute; left: 0; right: 0; top: 24px; height: var(--tl-track); background: var(--line); }
.timeline .progress { position: absolute; left: 0; top: 23px; height: var(--tl-progress); background: var(--electric); }
.timeline .playhead {
  position: absolute; top: 24.5px; transform: translate(-50%, -50%);
  width: var(--tl-dot); height: var(--tl-dot); border-radius: 50%; background: var(--electric);
}
.timeline .tick { position: absolute; top: 19px; width: 1px; height: 11px; background: var(--ink); }
.timeline .chapter {
  position: absolute; top: 40px; transform: translateX(-50%); white-space: nowrap;
  font: 500 var(--fs-label)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.timeline .chapter .n { color: var(--electric-text); margin-right: 6px; }
.timeline .chapter.is-start { transform: none; }
.timeline .chapter.is-end { transform: translateX(-100%); }
/* below 640px only the mono numbers stay at the ticks; the step
   names move into an .index-line list or .block stack below */
@media (max-width: 640px) {
  .timeline .chapter .t { display: none; }
  .timeline .chapter .n { margin-right: 0; }
}
/* dark variant */
.timeline-dark .track { background: var(--line-dark); }
.timeline-dark .tick { background: var(--ondark); }
.timeline-dark .chapter { color: var(--ondark-muted); }
.timeline-dark .chapter .n { color: var(--electric-ondark); }

/* ---------- 9:16 clip frame (.clip-frame) ----------
   A drawn schematic of a short, not a fake phone. Card surface,
   hairline border, caption bars as muted slugs, a small wave at
   the base. Keep contents diagrammatic; real clip stills go in
   as plain <img> replacing the drawn contents. */
.clip-frame {
  aspect-ratio: var(--ar-clip); width: 100%; max-width: 200px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  padding: 14px; box-sizing: border-box;
}
.clip-frame .capline { height: 7px; border-radius: 1px; background: var(--line); }
.clip-frame .capline.is-hot { background: var(--electric); }  /* the one highlighted caption */
.clip-frame .wave { margin-top: 2px; }
.clip-row { display: flex; gap: var(--sp-4); align-items: flex-end; }

/* ---------- Thumbnail frame (.thumb-frame) ----------
   16:9 annotated schematic: the packaging teardown drawn as an
   instrument diagram. Zones are dashed hairlines (dashed = an
   annotation, never structure) with mono chip labels. The focal
   marker is the reticle at 16-20px (use assets/brand/icon.svg,
   palette colors only). is-before mutes everything and carries
   no focal marker. */
.thumb-frame {
  position: relative; aspect-ratio: var(--ar-video); width: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  overflow: hidden;
}
.thumb-frame .zone { position: absolute; border: 1px dashed var(--line); border-radius: 2px; }
.thumb-frame .zone .t {
  position: absolute; left: 0; top: 100%; margin-top: 4px;
  font: 500 10px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
.thumb-frame .zone.is-hot { border-color: var(--electric); border-style: solid; }
.thumb-frame .zone.is-hot .t { color: var(--electric-text); }
.thumb-frame .focal { position: absolute; width: 18px; height: 18px; }
.thumb-frame.is-before .zone { border-color: var(--line); }
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.ba-pair figure { margin: 0; }
.ba-pair figcaption {
  margin-top: var(--sp-3);
  font: 500 var(--fs-label)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.ba-pair figcaption b { color: var(--electric-text); font-weight: 500; }
@media (max-width: 640px) { .ba-pair { grid-template-columns: 1fr; } }

/* ---------- Curve chart (.curve, inline SVG) ----------
   Retention / subscriber curves. Single series: 1.5px ink plot,
   electric terminal dot, hairline axis, mono caps labels. Two
   series max (before/after): before is muted, after is ink, and
   BOTH carry direct mono labels; identity is never color alone.
   On carbon (.curve-dark) the plot is ondark-muted and the dot
   plus headline number go lime; that is a readout moment, count
   it against the one-readout-per-screen budget. */
.curve { display: block; width: 100%; height: auto; }
.curve .axis { stroke: var(--line); stroke-width: 1; fill: none; }
.curve .plot { stroke: var(--ink); stroke-width: 1.5; fill: none; stroke-linecap: square; }
.curve .plot.is-before { stroke: var(--muted); stroke-dasharray: 4 4; }
.curve .dot { fill: var(--electric); }
.curve .lbl { font: 500 10px var(--mono); letter-spacing: 0.14em; fill: var(--muted); }
.curve .lbl.is-hot { fill: var(--electric-text); }
.curve-dark .axis { stroke: var(--line-dark); }
.curve-dark .plot { stroke: var(--ondark-muted); }
.curve-dark .dot { fill: var(--lime); }
.curve-dark .lbl { fill: var(--ondark-muted); }
.curve-dark .lbl.is-hot { fill: var(--lime); }

/* ---------- Platform strip (.platform-strip) ----------
   Where the show goes. House-drawn single-color glyphs (sprite
   pd-yt / pd-apple / pd-spotify / pd-rss) + mono caps names.
   Ink on light, ondark on carbon. Never platform brand colors:
   the palette stays closed. */
.platform-strip { display: flex; align-items: center; gap: var(--sp-5) var(--sp-6); flex-wrap: wrap; }
.platform-strip .pf {
  display: inline-flex; align-items: center; gap: 9px;
  font: 500 var(--fs-label)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.platform-strip .pf svg { width: 17px; height: 17px; display: block; color: var(--ink); }
.platform-strip-dark .pf { color: var(--ondark-muted); }
.platform-strip-dark .pf svg { color: var(--ondark); }

/* ---------- Qualification form (v2) ----------
   The Instrument had no form styles; these are the system's
   defaults. Labels are mono caps, fields sit on paper inside a
   card panel (elevation = background shift, no shadows), focus
   is an electric outline, never a glow. */
.form-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: var(--sp-6); max-width: 640px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-full { grid-column: 1 / -1; }
.field label {
  font: 500 var(--fs-label)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.field input, .field select, .field textarea {
  font: 400 16px/1.4 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-btn);
  padding: 12px 14px; width: 100%; box-sizing: border-box;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--electric); outline: 2px solid var(--electric); outline-offset: -1px;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 0.7; }
.form-note { font-size: var(--fs-small); color: var(--muted); margin-top: var(--sp-4); }
.form-success { border: 1px solid var(--ink); border-radius: var(--r-panel); background: var(--card); padding: var(--sp-6); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- Hero art panel note ----------
   The waveform-to-growth hybrid is inline SVG inside .hero-art
   (already defined in site.css). Its classes (.axis .plot .dot
   .lbl .bar) are styled here so the art re-themes with tokens. */
.hero-art .bar { fill: var(--ink); }
.hero-art .axis { stroke: var(--line); stroke-width: 1; fill: none; }
.hero-art .plot { stroke: var(--ink); stroke-width: 1.5; fill: none; stroke-linecap: square; }
.hero-art .dot { fill: var(--electric); }
.hero-art .lbl { font: 500 10px var(--mono); letter-spacing: 0.14em; fill: var(--muted); }
.hero-art .lbl.is-hot { fill: var(--electric-text); }