/* Sign script: page-specific CSS only. Everything else comes from /shared/vasavan.css, via its tokens. */

.app { padding-block: var(--space-m) var(--space-xxl); }
.app[hidden], #app[hidden], #state[hidden] { display: none; }

/* Top bar: job title sits beside the brand */
.topbar__job {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--topbar-fg) 65%, transparent); /* readable on the inverted bold topbar too */
  font-size: var(--size-s);
  line-height: var(--line-s);
  letter-spacing: var(--tracking-l);
}
.topbar__job[hidden], .topbar__nav[hidden] { display: none; }

/* Loading / private / error state */
.state {
  width: min(440px, 100%);
  margin: var(--space-xxl) auto;
  justify-items: start;
}
.state:empty, .state[hidden] { display: none; }
.state__icon { color: var(--text-muted); }

/* Two-column layouts; stack under 860px */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
  align-items: start;
}
@media (min-width: 860px) {
  .split--clipper { grid-template-columns: minmax(0, 1fr) 380px; }
  .split--notes   { grid-template-columns: minmax(0, 1fr) 360px; }
  .split--label   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Clipper: player */
.player { background: var(--black); border-radius: var(--radius-m); overflow: hidden; }
.player video {
  width: 100%;
  height: min(72vh, 720px);
  height: min(72dvh, 720px);
  object-fit: contain;
  background: var(--black);
}
@media (max-width: 559px) { .player video { height: 56dvh; } }
.ctl { gap: var(--space-xs) var(--space-s); }
.ctl .select { width: auto; }
.time { margin-left: auto; font-size: var(--size-m); line-height: var(--line-m); font-variant-numeric: tabular-nums; }
.keys kbd { font-size: inherit; } /* kbd's 0.92em would drop the compact caption to 10px */
.keys kbd + kbd { margin-left: var(--space-xxs); }
@media (pointer: coarse) { .keys { display: none; } }
.badge[hidden] { display: none; }

/* Clipper: sign cards */
.sign { padding: var(--space-m); gap: var(--space-s); cursor: pointer; transition: box-shadow var(--motion-duration) var(--motion-easing); }
.sign[aria-current="true"] { box-shadow: inset 0 0 0 1px var(--focus-halo), inset 0 0 0 3px var(--focus-color); } /* same two-colour ring as keyboard focus, so it reads on light cards too */
.sign__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); }
.sign__num { color: var(--text-muted); }
.sign__row { gap: var(--space-xs) var(--space-s); }
.sign__t { min-width: 6ch; color: var(--text-muted); font-size: var(--size-s); font-variant-numeric: tabular-nums; }
.sign__t.is-set { color: var(--text); }
.clip-status { min-height: var(--line-s); }

/* Notes: one card per sign */
.note-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-m); align-items: start; }
@media (max-width: 559px) { .note-row { grid-template-columns: minmax(0, 1fr); } }
.note-row .textarea { min-height: 9em; height: 100%; font-size: var(--size-m); line-height: var(--line-m); }
.sign-title { display: flex; align-items: baseline; gap: var(--space-s); }
.sign-title__num { color: var(--text-muted); font-size: var(--size-s); }

.vid {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 180px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: var(--surface-field-on-card);
  color: var(--text-muted);
  font-size: var(--size-xs);
  line-height: var(--line-xs);
  text-align: center;
}
.vid[data-state="ready"] { background: var(--black); cursor: pointer; }
.vid.is-over { box-shadow: inset 0 0 0 1px var(--focus-halo), inset 0 0 0 3px var(--focus-color); }
.vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.vid[data-state="ready"] video { opacity: 1; }
.vid__note { padding: var(--space-s); }
.vid[data-state="ready"] .vid__note { display: none; }
.vid__speed { margin-top: var(--space-xs); }
.vid__speed .segmented { background: var(--surface-field-on-card); }

/* Script text: live preview and the label tab */
.preview { position: sticky; top: calc(var(--topbar-h, 56px) + var(--space-m)); align-self: start; min-width: 0; }
.script-pre {
  min-width: 0;
  max-height: 70dvh;
  overflow-wrap: anywhere;
  margin: 0;
  padding: var(--space-m);
  border-radius: var(--radius-m);
  background: var(--surface-card);
  font-size: var(--size-s);
  line-height: var(--line-m);
}
.script-pre--full { max-height: none; overflow: visible; font-size: var(--size-m); }
.script-pre mark, .label mark {
  padding: 0 var(--space-xxs);
  border-radius: var(--radius-xs);
  background: var(--badge-bg);
  color: var(--badge-fg);
}
.script-actions { gap: var(--space-xs); }

.label { padding: var(--space-m); gap: var(--space-s); color: var(--text); font-size: var(--size-m); line-height: var(--line-m); }
.label p { margin: 0; }
/* Weight is fixed at 400, so the label's strong lines get hierarchy from size */
.label strong { font-family: var(--font-brand); font-weight: var(--weight-brand-regular); font-size: var(--size-l); line-height: var(--line-l); letter-spacing: var(--letter-spacing-l); }
@media (min-width: 860px) {
  /* The label stays in view while the script scrolls */
  .label-col {
    position: sticky;
    top: calc(var(--topbar-h, 56px) + var(--space-m));
    max-height: calc(100dvh - var(--topbar-h, 56px) - var(--space-xl));
  }
}
@media (max-width: 859px) {
  .preview { position: static; }
}

/* Footer */
.app__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s) var(--space-m);
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  box-shadow: inset 0 1px 0 var(--divider);
}