/* CLIP studio — Arabic-first RTL layout.
   Numeric and timecode fields stay LTR (PRODUCT_V1_SPEC § 2); everything else follows the
   document direction. No web fonts are fetched: this is a private deployment and an outbound
   font request would leak that the page was opened. */
:root {
  --bg: #10131a; --panel: #181c26; --line: #2a3040; --ink: #e8ecf4; --muted: #98a2b8;
  --accent: #4c8dff; --ok: #3ecf8e; --warn: #e5a03a; --bad: #ef5b5b; --skip: #7a8398;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.6 system-ui, "Segoe UI", Tahoma, sans-serif;
}
a { color: var(--accent); }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
h1, h2, h3 { line-height: 1.3; }
small { color: var(--muted); }

.topbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; text-decoration: none; letter-spacing: .08em; }
.topbar nav { display: flex; gap: 14px; }
.topbar .logout { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }
.who { color: var(--muted); font-size: 13px; }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px; margin: 16px 0;
}
.card.narrow { max-width: 420px; margin-inline: auto; }
.row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; margin: 10px 0; }
.hint { color: var(--muted); font-size: 13px; }
.hint.blocked { color: var(--warn); }

label { display: block; margin: 10px 0 4px; }
input[type=text], input[type=password], input[type=file], select, textarea {
  width: 100%; max-width: 420px; padding: 8px 10px;
  background: #0f1219; color: var(--ink); border: 1px solid var(--line); border-radius: 6px;
}
input[dir=ltr], td[dir=ltr], .grid td input { direction: ltr; text-align: left; }
button, .button {
  display: inline-block; padding: 8px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line); background: #222735; color: var(--ink);
  text-decoration: none; font: inherit;
}
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: #06101f; font-weight: 600; }
button:disabled { opacity: .45; cursor: not-allowed; }

.grid { width: 100%; border-collapse: collapse; margin: 10px 0; }
.grid th, .grid td { border-bottom: 1px solid var(--line); padding: 7px 8px; text-align: start; vertical-align: middle; }
.grid th { color: var(--muted); font-weight: 600; font-size: 13px; }
.grid td input[type=text] { max-width: 150px; }
.grid td select { max-width: 130px; }
.rowactions { display: flex; gap: 4px; flex-wrap: wrap; }
.rowactions button { padding: 4px 8px; font-size: 12px; }

video { width: 100%; max-width: 640px; border-radius: 8px; background: #000; margin: 10px 0; }
.result video { max-width: 300px; }

.messages { list-style: none; margin: 12px auto; padding: 0; max-width: 1100px; }
.msg { padding: 9px 12px; border-radius: 6px; margin: 6px 16px; border: 1px solid var(--line); }
.msg.warning { border-color: var(--warn); }
.problems {
  border: 1px solid var(--bad); background: rgba(239, 91, 91, .08);
  border-radius: 8px; padding: 10px 14px; margin: 12px 0;
}

.state { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line); }
.state-succeeded, .state-ready, .state-SUCCEEDED { color: var(--ok); border-color: var(--ok); }
.state-failed, .state-blocked { color: var(--bad); border-color: var(--bad); }
.state-skipped, .state-not_requested, .state-cancelled { color: var(--skip); border-color: var(--skip); }
/* Work that has not started yet is neutral. Colouring it like a warning tells the owner that
   something is wrong with a queue that is behaving perfectly normally. */
.state-pending, .state-queued { color: var(--muted); border-color: var(--line); }
/* Running is the accent, because it is where attention belongs. */
.state-running { color: var(--accent); border-color: var(--accent); }
.state-partial { color: var(--warn); border-color: var(--warn); }

.stages { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.stages li {
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; font-size: 12px;
  display: flex; gap: 6px; align-items: baseline;
}
.stages li.state-succeeded { border-color: var(--ok); }
.stages li.state-failed { border-color: var(--bad); }
.stages li.state-skipped { border-color: var(--skip); color: var(--muted); }
.stages li.state-running { border-color: var(--warn); }

pre.error {
  background: #0f1219; border: 1px solid var(--bad); border-radius: 6px;
  padding: 10px; overflow-x: auto; font-size: 12px; white-space: pre-wrap;
}
.foot { color: var(--muted); font-size: 12px; text-align: center; padding: 20px; }

@media (max-width: 720px) {
  .grid, .grid thead, .grid tbody, .grid tr, .grid td, .grid th { display: block; }
  .grid thead { display: none; }
  .grid tr { border: 1px solid var(--line); border-radius: 8px; margin: 8px 0; padding: 6px; }
  .grid td { border: 0; }
  .grid td input[type=text], .grid td select { max-width: 100%; }
}

/* ==========================================================================
   Processing workspace (PRODUCT_V1_SPEC § 3, § 12)

   One accent, one scale of spacing, subdued borders. Pending work is neutral; the only colours
   that carry meaning are "running" (accent), "ready" (ok) and "failed" (bad) — and each of those
   also carries a word and a glyph, because colour alone is not a status message.
   ========================================================================== */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* `hidden` must win over a layout rule. `.link-state { display: flex }` beat the attribute and
   left an empty red banner on the page whenever the connection was fine — seen on a live run. */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.workspace { display: flex; flex-direction: column; gap: 14px; }

/* --- identity header --- */
.ident {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px;
}
.ident h1 { margin: 2px 0 8px; font-size: 22px; }
.crumb { margin: 0; font-size: 12px; }
.crumb a { color: var(--muted); text-decoration: none; }
.ident-sub { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--line); color: var(--muted); background: #0f1219;
}
.chip-target { color: var(--ink); border-color: #39405a; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; }
.facts div { min-width: 0; }
.facts dt { color: var(--muted); font-size: 12px; }
.facts dd { margin: 0; font-size: 14px; }
.ident-poster { margin: 0; max-width: 260px; }
.ident-poster img { width: 100%; height: auto; border-radius: 8px; display: block; background: #000; }
.ident-poster figcaption { color: var(--muted); font-size: 11px; margin-top: 4px; }

/* --- connection banner (browser to server, never about the worker) --- */
.link-state {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px;
  border: 1px solid var(--bad); border-radius: 8px; background: rgba(239, 91, 91, .08);
  font-size: 13px;
}
.link-state .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); flex: none; }

/* --- main status card --- */
.card.status { margin: 0; padding: 18px; border-color: #2f3750; }
.status-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; }
.status-head h2 { margin: 0; font-size: 19px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.eyebrow { margin: 0 0 2px; font-size: 11px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.counts { margin: 0; text-align: start; font-size: 13px; color: var(--muted); }
.counts strong { font-size: 20px; color: var(--ink); display: block; }
.range { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.range bdi { color: var(--ink); font-variant-numeric: tabular-nums; }
.operation { margin: 14px 0 8px; font-size: 17px; font-weight: 600; }
.measure { margin: 6px 0 0; font-size: 13px; }
.measure bdi { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.bad { color: var(--bad); }

/* --- progress bars --- */
.bar {
  position: relative; height: 10px; border-radius: 999px; overflow: hidden;
  background: #0f1219; border: 1px solid var(--line);
}
.bar > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.bar.thin { height: 5px; margin-top: 6px; }
/* Indeterminate: a sweep that says "running", carrying no number and claiming no position. */
.bar.indeterminate > span {
  width: 34%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: clip-sweep 1.5s linear infinite;
}
@keyframes clip-sweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(420%); }
}
@media (prefers-reduced-motion: reduce) {
  .bar.indeterminate > span { animation: none; width: 100%; opacity: .4; background: var(--accent); }
}

/* --- timings and notices --- */
.timings { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 16px 0 0; }
.timings dt { color: var(--muted); font-size: 12px; }
.timings dd { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.notice {
  display: flex; gap: 8px; align-items: baseline; margin: 12px 0 0; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: #0f1219;
  font-size: 13px; color: var(--muted);
}
.notice.bad { border-color: var(--bad); color: var(--ink); background: rgba(239, 91, 91, .08); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; align-items: center; }
.actions form { margin: 0; }

/* --- clip cards --- */
.card.clip { margin: 0; padding: 16px; }
.clip-head { display: flex; gap: 14px; align-items: flex-start; }
.poster { width: 120px; height: 68px; object-fit: cover; border-radius: 6px; background: #000; flex: none; }
.poster-empty { border: 1px dashed var(--line); background: #0f1219; }
.clip-title { min-width: 0; flex: 1; }
.clip-title h3 { margin: 0 0 6px; font-size: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.options { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; }

/* --- the ordered workflow --- */
.flow { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.flow-step {
  display: grid; grid-template-columns: 20px minmax(120px, auto) 1fr; gap: 10px;
  align-items: baseline; padding: 6px 8px; border-radius: 6px; font-size: 13px;
}
.flow-step .bar { grid-column: 2 / -1; }
.flow-mark { text-align: center; color: var(--muted); }
.flow-name { color: var(--muted); }
.flow-note { min-width: 0; color: var(--muted); }
.flow-step.state-succeeded .flow-mark { color: var(--ok); }
.flow-step.state-succeeded .flow-name { color: var(--ink); }
.flow-step.state-failed { background: rgba(239, 91, 91, .08); }
.flow-step.state-failed .flow-mark, .flow-step.state-failed .flow-name { color: var(--bad); }
.flow-step.state-running { background: rgba(76, 141, 255, .10); }
.flow-step.state-running .flow-mark { color: var(--accent); }
.flow-step.state-running .flow-name, .flow-step.state-running .flow-note { color: var(--ink); }
.flow-step.state-skipped .flow-mark, .flow-step.state-skipped .flow-name { color: var(--skip); }

/* --- results --- */
.results { display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0 0; }
figure.result { margin: 0; max-width: 260px; }
figure.result video { width: 100%; max-width: 260px; margin: 0; border-radius: 8px; }
figure.result figcaption {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  font-size: 12px; color: var(--muted); margin-top: 6px;
}
figure.result figcaption bdi { font-variant-numeric: tabular-nums; }
.files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.warnings { margin: 10px 0 0; padding-inline-start: 18px; color: var(--warn); font-size: 12px; }

/* --- diagnostics --- */
.diag { margin: 14px 0 0; border-top: 1px solid var(--line); padding-top: 10px; }
.diag summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.diag dl { display: grid; gap: 4px; margin: 10px 0 0; font-size: 12px; }
.diag dl div { display: grid; grid-template-columns: 190px 1fr; gap: 10px; }
.diag dt { color: var(--muted); }
.diag dd { margin: 0; word-break: break-word; }
.run-diag { border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; background: var(--panel); }

@media (max-width: 860px) {
  .ident { grid-template-columns: minmax(0, 1fr); }
  .ident-poster { max-width: 100%; }
  /* Two columns, and the name, the note and the bar all stack inside the second one. Letting the
     note fall into the next implicit cell puts it in the 20px marker column, which at 390px
     renders a sentence one word per line. */
  .flow-step { grid-template-columns: 20px minmax(0, 1fr); }
  .flow-name, .flow-note, .flow-step .bar { grid-column: 2; }
  .diag dl div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  figure.result, figure.result video { max-width: 100%; }
  .results { display: grid; grid-template-columns: minmax(0, 1fr); }
}

/* Two columns inside a clip card: the workflow on one side, the result on the other. A single
   full-width column left the ordered steps beside an empty half of the card. */
.clip-body { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 14px; }
.clip-body .flow { margin-top: 0; }
.clip-side { min-width: 0; }
.clip-side .results { margin-top: 0; }
.notes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.notes li { display: flex; gap: 8px; align-items: baseline; }
@media (max-width: 860px) {
  .clip-body { grid-template-columns: minmax(0, 1fr); }
}

/* A state used *as* the heading: coloured like its badge, but not boxed like one. */
.state-word { font-weight: inherit; }
.state-word.state-succeeded, .state-word.state-ready { color: var(--ok); }
.state-word.state-failed, .state-word.state-blocked { color: var(--bad); }
.state-word.state-cancelled, .state-word.state-skipped { color: var(--skip); }
.state-word.state-running, .state-word.state-acquiring { color: var(--accent); }
.state-word.state-partial { color: var(--warn); }
.state-word.state-pending, .state-word.state-queued { color: var(--muted); }

/* The explanation the owner may never need. Quiet by default, never in the way of the status. */
.why { margin: 12px 0 0; }
.why summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.why p { margin: 8px 0 0; font-size: 13px; color: var(--muted); max-width: 70ch; }