/* RV-StreamRelay Clips workspace — styles for the Clips card in the creator dashboard.
   Tokens come from relay.css (the RV house ramp, Digi Red, copied from renderer/rv-theme.css).
   Same discipline as the rest of the dashboard: solid fills, hairline borders, one accent used on
   meaning (actions, the selection, the human marker kinds), no gradients, no glow. The only motion
   is the shared .spin loader and pointer-driven position updates.

   The accent rule from relay.css applies here and matters more, because much of this workspace is
   drawn OVER video: --rv-accent is a fill, and every 1 to 2px line, handle edge and glyph that has
   to be seen against an arbitrary frame takes --rv-accent-contrast instead. */

/* ── Section structure inside the card ────────────────────────────────────
   The rule between sections is a group boundary, so it gets 32px above and 16px below against the
   8 to 12px used inside a section. */
.cl-sec { border-top: 1px solid var(--rv-hairline); margin-top: var(--rv-s-6); padding-top: var(--rv-s-4); }
.cl-sec:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.cl-head { display: flex; align-items: center; gap: var(--rv-s-3); flex-wrap: wrap; }
.cl-head h3 { font-size: 15px; font-weight: 700; }
.cl-spacer { flex: 1; }
.cl-sub { font-size: 13.5px; color: var(--rv-text-dim); line-height: 1.6; max-width: var(--rv-measure); margin-top: var(--rv-s-2); }
.cl-sub b { color: var(--rv-text-strong); font-weight: 600; }
.cl-h4 { font-size: 13px; font-weight: 700; color: var(--rv-text-strong); font-family: var(--rv-font-display); margin-bottom: var(--rv-s-2); }
/* relay.css scopes .hint to .field; the workspace uses hints outside fields too */
#card-clips .hint { font-size: 12.5px; color: var(--rv-text-dim); line-height: 1.55; max-width: var(--rv-measure-hint); }
.cl-actions { display: flex; gap: var(--rv-s-2); margin-top: var(--rv-s-3); flex-wrap: wrap; align-items: center; }
.cl-tag { font-size: 12px; color: var(--rv-text-dim); border: 1px solid var(--rv-border-1); border-radius: var(--rv-r-sm); padding: 2px var(--rv-s-2); }
.cl-warnline { margin-top: var(--rv-s-3); font-size: 13.5px; color: var(--rv-danger); }
.cl-note-off { color: var(--rv-text-dim); }
.cl-rowmsg { flex-basis: 100%; font-size: 13px; color: var(--rv-danger); padding-top: var(--rv-s-1); max-width: var(--rv-measure-hint); }
.cl-quota { font-size: 13px; color: var(--rv-text-dim); }

/* Timecodes are data; mono is correct on them and nowhere else here. */
.tc { font-family: var(--rv-font-mono); font-variant-numeric: tabular-nums; }

/* ── Recording facts ────────────────────────────────────────────────────── */
.cl-facts { display: flex; gap: var(--rv-s-3); margin-top: var(--rv-s-3); flex-wrap: wrap; }
.cl-fact { background: var(--rv-surface-1); border: 1px solid var(--rv-hairline); border-radius: var(--rv-r-md); padding: var(--rv-s-3) var(--rv-s-4); }
/* A stat is a big number over a small label. Scale carries it; the accent is not an emphasis tool. */
.cl-fact .n { font-family: var(--rv-font-display); font-weight: 800; font-size: 16px; color: var(--rv-text-strong); font-variant-numeric: tabular-nums; }
.cl-fact .n .tc { font-family: var(--rv-font-mono); font-weight: 700; }
.cl-fact .l { font-size: 11.5px; color: var(--rv-text-dim); margin-top: var(--rv-s-1); }
/* The clipping window's deadline and the replacement warning are load-bearing truth, not fine print:
   body ink, where .cl-sub around them stays dim. */
.cl-expiry { margin-top: var(--rv-s-3); color: var(--rv-text); }
.cl-replace { color: var(--rv-text); }

/* ── Auto Clip ──────────────────────────────────────────────────────────── */
.cl-upsell { background: var(--rv-surface-1); border: 1px solid var(--rv-hairline); border-radius: var(--rv-r-md); padding: var(--rv-s-4); margin-top: var(--rv-s-3); }
.cl-upsell .cl-sub { margin-top: var(--rv-s-2); }
.cl-upsell .cl-sub:first-child { margin-top: 0; }

/* One suggestion is one reviewable item with its own actions and its own error line, so it is one
   bounded row rather than a run separated by a single hairline: with only a divider, the error
   message sat as far from its own row as from the next one and belonged to neither. */
.cl-sug { display: flex; align-items: center; gap: var(--rv-s-3); flex-wrap: wrap;
  background: var(--rv-surface-1); border: 1px solid var(--rv-hairline); border-radius: var(--rv-r-md);
  padding: var(--rv-s-3) var(--rv-s-4); margin-top: var(--rv-s-2); }
.cl-sug .s-score { font-family: var(--rv-font-display); font-weight: 800; font-size: 18px; color: var(--rv-text-strong); min-width: 44px; font-variant-numeric: tabular-nums; }
.cl-sug .s-tc { font-size: 12.5px; color: var(--rv-text); }
.cl-sug .s-why { font-size: 13px; color: var(--rv-text-dim); line-height: 1.5; flex: 1 1 220px; }

/* ── Marker glyphs (shape AND colour per kind; the accent marks the human signals) ── */
.mk { display: inline-block; vertical-align: -1px; }
.mk.k-hotkey { color: var(--rv-accent-contrast); fill: currentColor; }
.mk.k-manual { color: var(--rv-accent-contrast); fill: currentColor; }
.mk.k-game { color: var(--rv-text-strong); fill: currentColor; }
.mk.k-chat { color: var(--rv-text-dim); fill: currentColor; }
.mk.k-audio { color: var(--rv-text-faint); fill: currentColor; }

/* ── Timeline ───────────────────────────────────────────────────────────── */
.tl-markrow { position: relative; height: 22px; margin-top: var(--rv-s-3); }
.tl-mark {
  position: absolute; top: 0; transform: translateX(-50%);
  width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--rv-r-sm); padding: 0;
}
.tl-mark:hover { background: var(--rv-surface-3); }
.tl-track {
  position: relative; height: 46px; background: var(--rv-surface-1);
  border: 1px solid var(--rv-border-1); border-radius: var(--rv-r-md);
  touch-action: none;
}
.tl-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: currentColor; opacity: .35; }
.tl-sel {
  position: absolute; top: 0; bottom: 0;
  background: var(--rv-accent-weak);
  border-left: 2px solid var(--rv-accent-contrast); border-right: 2px solid var(--rv-accent-contrast);
}
.tl-handle {
  position: absolute; top: -7px; bottom: -7px; width: 16px;
  transform: translateX(-50%); cursor: ew-resize; touch-action: none;
}
.tl-handle::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 5px; right: 5px;
  background: var(--rv-accent-contrast); border-radius: var(--rv-r-md);
}
.tl-handle:hover::after { background: var(--rv-accent-text-hover); }
.tl-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--rv-text-faint); margin-top: var(--rv-s-1); }
.tl-io { display: flex; gap: var(--rv-s-3); align-items: flex-end; flex-wrap: wrap; margin-top: var(--rv-s-3); }
.tl-durbox { font-size: 13px; color: var(--rv-text-dim); padding-bottom: var(--rv-s-2); }
.tl-durbox b { color: var(--rv-text-strong); font-weight: 700; }
.tc-in { width: 92px; }
.field input.tc-in { width: 92px; font-family: var(--rv-font-mono); font-size: 13.5px; }
.tl-note { margin-top: var(--rv-s-2); font-size: 13px; color: var(--rv-danger); }
.tl-legend { display: flex; gap: var(--rv-s-4); flex-wrap: wrap; margin-top: var(--rv-s-3); font-size: 12.5px; color: var(--rv-text-dim); }
.tl-legend .lg { display: inline-flex; align-items: center; gap: var(--rv-s-2); }
.tl-legend .lg-none { color: var(--rv-text-faint); line-height: 1.5; }

/* ── Editor layout ──────────────────────────────────────────────────────── */
.cl-edsub { font-size: 13px; color: var(--rv-text-dim); }
/* Each editor section is a group: 32px between them, against 8 inside one. */
.cl-ed-sec { margin-top: var(--rv-s-6); }
.cl-ed-sec:first-child { margin-top: 0; }
.cl-ed-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--rv-s-5); margin-top: var(--rv-s-5); }
@media (max-width: 920px) { .cl-ed-grid { grid-template-columns: 1fr; } }
.cl-ed-actions { margin-top: var(--rv-s-6); border-top: 1px solid var(--rv-hairline); padding-top: var(--rv-s-4); }
.cl-ed-actions .cl-actions { margin-top: var(--rv-s-3); }

/* ── Aspect presets: the output shape drawn, not just named ─────────────── */
.asp-row { display: flex; gap: var(--rv-s-2); flex-wrap: wrap; margin-top: var(--rv-s-1); }
.asp {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--rv-s-2);
  border: 1px solid var(--rv-border-1); border-radius: var(--rv-r-md); padding: var(--rv-s-2) var(--rv-s-3); cursor: pointer;
  min-width: 62px;
  transition: background-color .15s ease, border-color .15s ease;
}
.asp:hover { background: var(--rv-surface-3); border-color: var(--rv-border-2); }
/* The selected border must be SEEN, so it is the contrast tone: --rv-accent-line measures 1.3:1 on
   this surface and cannot carry a state on its own. */
.asp.on { border-color: var(--rv-accent-contrast); background: var(--rv-accent-weak); }
.asp-box { height: 24px; border: 1px solid var(--rv-border-2); background: var(--rv-surface-1); border-radius: var(--rv-r-sm); }
.asp.on .asp-box { border-color: var(--rv-accent-contrast); }
.asp-l { font-size: 12px; color: var(--rv-text); }
.vh-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.asp:has(.vh-radio:focus-visible) { outline: 2px solid var(--rv-focus); outline-offset: 2px; border-radius: var(--rv-r-md); }

/* ── Layout / caption-mode radio rows ───────────────────────────────────── */
.lay-col { display: flex; flex-direction: column; gap: var(--rv-s-2); margin-top: var(--rv-s-1); }
.lay { display: flex; align-items: baseline; gap: var(--rv-s-2); cursor: pointer; }
/* relay.css sets .field input { width: 100% } for text fields; a radio must not stretch */
.lay input, .field .lay input { width: auto; accent-color: var(--rv-accent-contrast); flex: none; translate: 0 1px; }
.lay-t { font-size: 13.5px; color: var(--rv-text-dim); line-height: 1.5; }
.lay-t b { color: var(--rv-text-strong); font-weight: 600; }

/* ── The source stage and framing boxes ─────────────────────────────────── */
.cl-stage-wrap { margin-top: var(--rv-s-4); }
.cl-stage {
  position: relative; margin-top: var(--rv-s-2); background: var(--rv-surface-1);
  border: 1px solid var(--rv-border-1); border-radius: var(--rv-r-md); overflow: hidden;
  touch-action: none; max-width: 560px;
}
.cl-stage .stage-label { position: absolute; left: var(--rv-s-2); top: var(--rv-s-2); font-size: 11.5px; color: var(--rv-text-faint); pointer-events: none; }
.fbox {
  position: absolute; border: 2px solid var(--rv-accent-contrast);
  background: var(--rv-accent-veil);   /* flat translucent tint: the frame underneath has to stay visible */
  cursor: move; touch-action: none;
}
.fbox:hover { border-color: var(--rv-accent-text-hover); }
.fb-l {
  position: absolute; left: -2px; top: -2px;
  background: var(--rv-accent); color: var(--rv-text-on-accent);
  font-family: var(--rv-font-display); font-weight: 700; font-size: 10.5px; line-height: 1;
  padding: var(--rv-s-1) var(--rv-s-2); border-radius: 0 0 var(--rv-r-md) 0; pointer-events: none;
}
.fb-rs {
  position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px;
  background: var(--rv-accent-contrast); cursor: nwse-resize; border-radius: var(--rv-r-sm) 0 0 0;
}
.fb-rs:hover { background: var(--rv-accent-text-hover); }

/* ── Output preview ─────────────────────────────────────────────────────── */
.cl-out { margin-top: var(--rv-s-4); }
.cl-out-col { max-width: 300px; }
.outframe {
  position: relative; height: 200px; width: auto; margin-top: var(--rv-s-2);
  background: var(--rv-bg);   /* the letterbox band colour the renderer actually uses */
  border: 1px solid var(--rv-border-1); border-radius: var(--rv-r-md); overflow: hidden;
  touch-action: none;
}
.out-region { position: absolute; background: var(--rv-surface-3); border: 1px solid var(--rv-hairline); }
.out-region.out-lower { background: var(--rv-surface-2); }
.out-l { position: absolute; left: var(--rv-s-2); top: var(--rv-s-1); font-size: 10.5px; color: var(--rv-text-dim); pointer-events: none; }
.ov-chip {
  position: absolute; transform: translate(-50%, -50%);
  background: var(--rv-accent-weak); border: 1px solid var(--rv-accent-contrast); color: var(--rv-text);
  font-size: 11px; line-height: 1.3; padding: 2px var(--rv-s-2); border-radius: var(--rv-r-sm);
  cursor: move; touch-action: none;
  max-width: 92%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ov-chip:hover { border-color: var(--rv-accent-text-hover); }

/* relay.css styles .field input and select but not textarea */
.field textarea {
  font: inherit; font-size: 14px; color: var(--rv-text); background: var(--rv-surface-1);
  border: 1px solid var(--rv-border-1); border-radius: var(--rv-r-sm); padding: var(--rv-s-2) var(--rv-s-3); width: 100%;
  resize: vertical; line-height: 1.5;
}
.field textarea:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 1px; border-color: var(--rv-accent-contrast); }

/* ── Caption and overlay editors ────────────────────────────────────────── */
.cl-rows { display: flex; flex-direction: column; gap: var(--rv-s-2); margin-top: var(--rv-s-3); }
.cl-row { display: flex; gap: var(--rv-s-2); align-items: center; flex-wrap: wrap; }
.cl-row .grow { flex: 1 1 160px; min-width: 140px; }
.cl-row input, .cl-row select {
  font: inherit; font-size: 13.5px; color: var(--rv-text); background: var(--rv-surface-1);
  border: 1px solid var(--rv-border-1); border-radius: var(--rv-r-sm); padding: var(--rv-s-2) var(--rv-s-3);
}
.cl-row input:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 1px; border-color: var(--rv-accent-contrast); }
.cl-row .tc-in { width: 78px; font-family: var(--rv-font-mono); flex: none; }
.cl-row .num-in { width: 64px; flex: none; }
.cl-row input[type="color"] { width: 38px; height: 33px; padding: var(--rv-s-1); flex: none; cursor: pointer; }
/* A new group after the caption rows: 24 above, 16 between its fields, 4 inside one. */
.cl-styrow { display: flex; gap: var(--rv-s-4); margin-top: var(--rv-s-5); flex-wrap: wrap; }
.cl-styrow .field { min-width: 130px; }

/* ── Audio sliders ──────────────────────────────────────────────────────── */
.cl-slider { display: flex; align-items: center; gap: var(--rv-s-3); }
.cl-slider input[type="range"] { flex: 1; max-width: 260px; accent-color: var(--rv-accent-contrast); }
.cl-sliderv { font-size: 13px; color: var(--rv-text); min-width: 44px; font-variant-numeric: tabular-nums; }

/* ── Clip library ─────────────────────────────────────────────────────────
   A tile inside a card, so it is one radius step below the card that holds it. */
.cl-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--rv-s-4); margin-top: var(--rv-s-4); }
.clip-card {
  background: var(--rv-surface-1); border: 1px solid var(--rv-hairline); border-radius: var(--rv-r-md);
  padding: var(--rv-s-4); display: flex; flex-direction: column; gap: var(--rv-s-2);
}
.clip-thumb {
  position: relative; height: 108px; background: var(--rv-surface-2); border: 1px solid var(--rv-hairline);
  border-radius: var(--rv-r-sm); display: flex; align-items: center; justify-content: center;
}
.clip-thumb .asp-sil {
  height: 76%; border: 1px solid var(--rv-border-2); background: var(--rv-surface-3); border-radius: var(--rv-r-sm);
  display: flex; align-items: center; justify-content: center; color: var(--rv-text-faint);
}
.clip-tc {
  position: absolute; right: var(--rv-s-2); bottom: var(--rv-s-1);
  font-size: 11.5px; color: var(--rv-text); background: var(--rv-bg);
  border: 1px solid var(--rv-hairline); border-radius: var(--rv-r-sm); padding: 0 var(--rv-s-1);
}
.clip-title {
  font-family: var(--rv-font-display); font-weight: 700; font-size: 14px; color: var(--rv-text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;   /* creator-typed, tooltip carries the rest */
}
.clip-title.untitled { color: var(--rv-text-dim); font-weight: 600; }
.clip-meta { font-size: 12px; color: var(--rv-text-dim); line-height: 1.45; }
.clip-status { font-size: 12.5px; color: var(--rv-text); line-height: 1.45; }
.clip-status.busy { display: inline-flex; align-items: center; gap: var(--rv-s-2); color: var(--rv-text-dim); }
.clip-status.failed { color: var(--rv-danger); }
.clip-actions { display: flex; gap: var(--rv-s-2); flex-wrap: wrap; margin-top: auto; padding-top: var(--rv-s-1); }
.dl-note { font-size: 12px; color: var(--rv-text-dim); margin-left: var(--rv-s-2); }

@media (max-width: 560px) {
  .cl-sug .s-score { min-width: 34px; font-size: 16px; }
  .outframe { height: 170px; }
}

/* ── The dashboard strip (the doorway; the workspace lives at /relay/clips) ─
   A single thin row: heading, one sentence of genuine state, one door. Deliberately no facts grid,
   no controls and no accent fill, so it reads as a doorway rather than a feature card. */
.clips-strip { display: flex; align-items: center; gap: var(--rv-s-4); flex-wrap: wrap; padding: var(--rv-s-4) var(--rv-s-5); }
.clips-strip > h2 { flex: none; }
.strip-body { display: flex; align-items: center; gap: var(--rv-s-3); flex-wrap: wrap; flex: 1 1 260px; min-width: 0; }
.strip-body .loading-line { padding: 0; }
.strip-state { font-size: 13.5px; color: var(--rv-text-dim); line-height: 1.5; }
.strip-state.warn { color: var(--rv-danger); }

/* ── The clip editor page (clips.html) ──────────────────────────────────── */
.crumb { margin: 0 0 var(--rv-s-4); }
.crumb-back {
  display: inline-flex; align-items: center; gap: var(--rv-s-2);
  font-size: 13.5px; color: var(--rv-text-dim); padding: var(--rv-s-1) var(--rv-s-2);
  margin-left: calc(var(--rv-s-2) * -1); border-radius: var(--rv-r-md);
}
.crumb-back:hover { color: var(--rv-text-strong); background: var(--rv-surface-3); }
.page-head { margin-bottom: var(--rv-s-6); }
.page-head h1 { font-size: clamp(26px, 4vw, 34px); font-weight: 800; }
.page-head p { margin-top: var(--rv-s-2); font-size: 14.5px; color: var(--rv-text-dim); max-width: var(--rv-measure); line-height: 1.6; }
/* State cards on this page use h2 (the page heading holds the h1); same size as the dashboard's h1. */
.clipspage .state-card h2 { font-size: 24px; display: block; }