:root {
  --bg: #0b1020;
  --card: #141b33;
  --ink: #eaf0ff;
  --muted: #9aa6c7;
  --accent: #5b8cff;
  --ok: #37c978;
  --warn: #ffcc55;
  --err: #ff6b6b;
}

* { box-sizing: border-box; }

/* The `hidden` attribute only has a UA-level display:none, which author rules
   such as `a.primary { display: block }` override. Without this, the final.mp4
   link and the resume button were visible even when hidden. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: env(safe-area-inset-top) 16px 0;
  min-height: 56px;
}
.app-bar h1 { font-size: 20px; margin: 12px 0; }

main { padding: 8px 16px 32px; max-width: 640px; margin: 0 auto; }

.card {
  background: var(--card);
  border-radius: 16px;
  padding: 16px;
  margin: 12px 0;
}

h2 { font-size: 17px; margin: 4px 0 12px; }

label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin: 10px 0;
}

input, select {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  font-size: 16px; /* prevents iOS zoom */
  border-radius: 10px;
  border: 1px solid #2a3358;
  background: #0e1530;
  color: var(--ink);
}

.advanced summary { cursor: pointer; color: var(--muted); font-size: 13px; margin: 8px 0; }

button.primary, a.primary {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 16px;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
}

.link-btn { background: none; border: 0; color: var(--accent); font-size: 14px; }

/* Visible keyboard focus. The UA default outline is easy to miss on this dark
   theme and is clipped on the rounded accent buttons, so keyboard users could
   not tell where focus was. An explicit high-contrast ring, offset so it is not
   hidden by border-radius, applies only to keyboard focus (:focus-visible). */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-radius: 6px;
}
input:focus-visible, select:focus-visible { outline-color: var(--accent); }

.progress { height: 8px; background: #0e1530; border-radius: 6px; overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: var(--accent); transition: width .3s; }

.overall { font-weight: 600; margin: 12px 0; }
.overall.DONE { color: var(--ok); }
.overall.FAILED, .overall.BLOCKED_BUDGET, .overall.INTERRUPTED { color: var(--err); }
.overall.RUNNING { color: var(--warn); }

.stages { list-style: none; padding: 0; margin: 8px 0 0; }
.stages li {
  display: flex; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid #222a49; font-size: 14px;
}
.stages .st-status { color: var(--muted); }
.stages li.DONE .st-status { color: var(--ok); }
.stages li.RUNNING .st-status { color: var(--warn); }
.stages li.FAILED .st-status, .stages li.BLOCKED_BUDGET .st-status,
.stages li.INTERRUPTED .st-status { color: var(--err); }

/* Selected episode's production mode. fixture warns it is a synthetic test;
   real and unknown stay neutral and make no certification claim. */
.mode { font-size: 13px; margin: 8px 0; overflow-wrap: anywhere; }
.mode-fixture { color: var(--warn); }
.mode-real, .mode-unknown { color: var(--muted); }

/* Output availability, separate from the canonical overall status. ready = the
   gated final video is actually downloadable; pending = completed but the output
   is still finalizing or unverified (never presented as a finished result). */
.output { font-size: 13px; margin: 8px 0; overflow-wrap: anywhere; }
.output-ready { color: var(--ok); }
.output-pending { color: var(--warn); }

.muted { color: var(--muted); font-size: 13px; }
.error { color: var(--err); font-size: 14px; overflow-wrap: anywhere; }
.notice { color: var(--warn); font-size: 13px; overflow-wrap: anywhere; }
code { color: var(--accent); }

.player { display: block; width: 100%; max-height: 70vh; margin: 12px 0; background: #000; border-radius: 8px; }

.recent-list { list-style: none; padding: 0; }
.recent-list li { margin: 8px 0; overflow-wrap: anywhere; }
.recent-button { display: block; width: 100%; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.recent-list small { display: block; color: var(--muted); margin-top: 4px; }