/*
  Guided Video Recorder — mobile first.

  Tokens mirror styles.css so the worker screens match the public site, but this
  file is standalone (styles.css is ~35KB and none of it is needed here). Workers
  are on phones in Liberia; every kilobyte is a kilobyte.
*/

:root {
  --ink: #10251c;
  --muted: #66756c;
  --cream: #fff8ec;
  --paper: #ffffff;
  --green: #1f6b44;
  --green-dark: #154c31;
  --gold: #f2b84b;
  --line: rgba(16, 37, 28, 0.12);
  --shadow: 0 18px 44px rgba(16, 37, 28, 0.14);

  /* The teleprompter owns the top of the screen. Nothing else may sit above it. */
  --prompter-height: 28svh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body.record-body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--cream);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: contain;
}

/* ------------------------------------------------------------------ */
/* Screens                                                             */
/* ------------------------------------------------------------------ */

.screen { display: none; }
.screen.is-active { display: block; }
.screen-dark { background: #05100b; }
.screen-dark.is-active { display: block; }
.is-hidden { display: none !important; }
.is-invisible { visibility: hidden; }

.worker-shell {
  min-height: 100svh;
  max-width: 560px;
  margin: 0 auto;
  padding: calc(var(--safe-top) + 18px) 20px calc(var(--safe-bottom) + 28px);
  display: flex;
  flex-direction: column;
}

.worker-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  min-height: 44px;
}

.worker-logo {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: cover;
}

.brandline {
  margin: 0;
  flex: 1;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--green);
}

.link-button {
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 800;
  color: var(--muted);
  padding: 10px 4px;
  min-height: 44px;
  cursor: pointer;
}

.text-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
  padding: 12px 0;
}
.text-link.centered { text-align: center; align-self: center; }

.screen-title {
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin: 0 0 10px;
}
.screen-title.light { color: var(--paper); }

.lead { font-size: 1.15rem; color: var(--muted); margin: 0 0 24px; line-height: 1.5; }
.lead-strong { font-size: 1.15rem; font-weight: 800; margin: 0 0 10px; }
.muted { color: var(--muted); line-height: 1.6; }
.muted.light { color: rgba(255, 255, 255, 0.72); }
.small { font-size: 0.9rem; }
.hint { font-size: 0.88rem; color: var(--muted); text-align: center; margin: 12px 0 0; }
.status { min-height: 22px; font-weight: 700; color: var(--green-dark); margin: 14px 0 0; }
.status.is-error { color: #b3261e; }

.centered-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 28px 22px;
  box-shadow: var(--shadow);
  margin: auto 0;
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------------ */
/* Buttons — every tap target is at least 56px on the worker screens    */
/* ------------------------------------------------------------------ */

.btn {
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--green);
  color: var(--paper);
  font: inherit;
  font-weight: 900;
  font-size: 1.05rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(31, 107, 68, 0.24);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.985); }
.btn:disabled { opacity: 0.55; box-shadow: none; }
.btn-block { display: flex; width: 100%; }
.btn-large { min-height: 68px; font-size: 1.2rem; }
.btn-block + .btn-block { margin-top: 12px; }

.btn-ghost {
  background: var(--paper);
  color: var(--green);
  border: 1px solid var(--line);
  box-shadow: none;
}

.btn-ghost-dark {
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* Sign in                                                             */
/* ------------------------------------------------------------------ */

.signin-form { display: grid; gap: 16px; margin: 22px 0 12px; }
.signin-form label { font-weight: 800; display: grid; gap: 7px; font-size: 0.95rem; }
.signin-form input {
  font: inherit;
  font-size: 1.05rem;
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fbfdfb;
  color: var(--ink);
}
.signin-form input:focus-visible { outline: 3px solid rgba(31, 107, 68, 0.35); outline-offset: 1px; }

/* ------------------------------------------------------------------ */
/* Assignment cards — one-handed targets                               */
/* ------------------------------------------------------------------ */

.assignment-list { display: grid; gap: 16px; }

.assignment-card {
  display: grid;
  gap: 6px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 22px;
  box-shadow: var(--shadow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.assignment-card:active { transform: scale(0.99); }

.assignment-summary {
  margin: 0 0 4px;
  font-weight: 800;
  color: var(--muted);
}

.assignment-index {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--green);
}

.assignment-done {
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 999px;
  background: #e8f2eb;
  color: var(--green-dark);
}

/* Already filmed: still tappable for another take, but visually stepped back so
   the eye lands on what is left to do. */
.assignment-card.is-done { background: #f7faf8; opacity: 0.82; }
.assignment-card.is-done .assignment-start {
  background: var(--paper);
  color: var(--green);
  border: 1px solid var(--line);
}
.assignment-title { font-size: 1.45rem; font-weight: 900; letter-spacing: -0.03em; }
.assignment-length { color: var(--muted); font-weight: 700; }
.assignment-start {
  justify-self: start;
  margin-top: 12px;
  background: var(--green);
  color: var(--paper);
  font-weight: 900;
  border-radius: 999px;
  padding: 12px 30px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}

/* ------------------------------------------------------------------ */
/* Instructions                                                        */
/* ------------------------------------------------------------------ */

.instructions-eyebrow {
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--green);
  margin: 0 0 6px;
}

.checklist { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.checklist li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
}
.checklist .tick {
  color: var(--green);
  font-weight: 900;
  font-size: 1.2rem;
  line-height: 1.2;
}

.sticky-action { margin-top: auto; padding-top: 28px; }

/* ------------------------------------------------------------------ */
/* Recorder stage                                                      */
/* ------------------------------------------------------------------ */

.recorder-stage {
  position: fixed;
  inset: 0;
  background: #05100b;
  overflow: hidden;
}

/*
  Matches the working teleprompter recorder in editortube exactly: fixed, full
  bleed, object-fit cover. With a genuine 1080x1920 stream this fills the phone
  with only a few percent trimmed off the sides, which is what a full-screen
  camera is supposed to look like.

  `contain` was tried here and is wrong — it letterboxes the picture into a small
  bar instead of filling the screen.
*/
/*
  Hidden drawing source. It must stay in the layout (not display:none) or some
  browsers stop decoding frames, which would freeze the canvas.
*/
.camera-source {
  position: fixed;
  width: 2px;
  height: 2px;
  opacity: 0;
  pointer-events: none;
  top: 0;
  left: 0;
}

/*
  The canvas IS the preview and IS the recording: a fixed 1080x1920 frame, scaled
  to fit the phone. Locked to 9:16 so the worker always sees the whole frame that
  will be saved — never a wider view that the file does not contain, and never a
  tighter crop than the file has.
*/
/*
  Full-bleed, exactly like the working editortube recorder. `cover` guarantees the
  screen is always filled — no black bars anywhere, on any phone. The canvas is the
  1080x1920 frame being recorded, so what fills the screen is what fills the file.
*/
.camera-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

/* Selfie flip, applied to the element only. The canvas pixels stay unmirrored, so
   the recorded file is the right way round and text in shot reads correctly. */
.camera-canvas.is-mirrored { transform: scaleX(-1); }
/* Front camera is shown mirrored, the way a worker expects to see themselves.
   Only the preview is flipped — the recorded file is unaffected. */
.camera-preview.is-mirrored { transform: scaleX(-1); }

/*
  THE TELEPROMPTER.

  Pinned to the very top of the viewport so the reading line sits as close to the
  front-facing lens as the hardware allows. It must not be moved to the middle or
  the bottom: that is what makes a worker's eyes drift off camera.
*/
/*
  Teleprompter window, matching the working editortube recorder.

  Sits high on the screen so the worker's eyes stay next to the front lens, and
  the text fades IN at the top and OUT at the bottom via a mask — that soft-edged
  window is what makes it readable over live camera without a heavy dark bar.
*/
.teleprompter {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

.teleprompter-viewport {
  position: absolute;
  top: max(var(--safe-top), 6%);
  left: 0;
  right: 0;
  height: 42vh;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 80%, transparent 100%);
}

/* Type styling copied from editortube: large, centred, heavy, with a shadow strong
   enough to stay legible against a bright background. */
.teleprompter-track {
  will-change: transform;
  transform: translate3d(0, 0, 0);
  padding: 0 20px;
  color: #ffffff;
  font-size: 40px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.9);
}
.teleprompter-track p { margin: 0 0 0.7em; }

/* Status chips sit below the teleprompter window so the reading area stays clear. */
.recorder-status-row {
  position: fixed;
  top: calc(max(var(--safe-top), 6%) + 42vh + 6px);
  left: 0;
  right: 0;
  z-index: 55;
  display: flex;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}

/* REC badge top-left, out of the reading area — editortube's placement. */
.rec-chip {
  position: fixed;
  top: max(var(--safe-top), 10px);
  left: 14px;
  z-index: 65;
}

.rec-chip,
.timer-chip,
.prompt-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(3, 12, 8, 0.66);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  backdrop-filter: blur(6px);
}
.rec-chip { background: rgba(190, 32, 32, 0.88); }
.camera-info { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.camera-info:empty { display: none; }
.camera-info.is-warn { background: rgba(168, 98, 12, 0.9); }
.rec-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  animation: rec-pulse 1.3s ease-in-out infinite;
}
@keyframes rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } }

.countdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  background: rgba(3, 12, 8, 0.55);
  color: #fff;
  font-size: 26vh;
  font-weight: 900;
  line-height: 1;
}

/* ------------------------------------------------------------------ */
/* Recorder controls — kept at the bottom, away from the reading area   */
/* ------------------------------------------------------------------ */

.recorder-controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 65;
  padding: 18px 14px calc(var(--safe-bottom) + 18px);
  background: linear-gradient(0deg, rgba(3, 12, 8, 0.9) 0%, rgba(3, 12, 8, 0.62) 62%, rgba(3, 12, 8, 0) 100%);
  display: grid;
  gap: 12px;
}

.control-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.control-row-secondary { align-items: center; gap: 14px; }

.pill-button {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(3, 12, 8, 0.6);
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 0.94rem;
  min-height: 48px;
  min-width: 74px;
  padding: 0 16px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-tap-highlight-color: transparent;
}
.pill-button:active { background: rgba(255, 255, 255, 0.2); }
.pill-button:disabled { opacity: 0.4; }
.pill-tiny { min-width: 56px; }

.readout {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 800;
  font-size: 0.84rem;
  min-width: 76px;
  text-align: center;
}

.record-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
}

.record-button {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, 0.92);
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.record-button-inner {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #e5352b;
  transition: border-radius 0.18s ease, width 0.18s ease, height 0.18s ease;
}
/* While recording, the dot becomes an unmistakable large stop square. */
.record-button.is-recording .record-button-inner {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}
.record-button:disabled { opacity: 0.5; }

.ghost-round {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(3, 12, 8, 0.6);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------------ */
/* Preview                                                             */
/* ------------------------------------------------------------------ */

.preview-shell {
  min-height: 100svh;
  max-width: 560px;
  margin: 0 auto;
  padding: calc(var(--safe-top) + 20px) 18px calc(var(--safe-bottom) + 22px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.preview-player {
  width: 100%;
  flex: 1;
  min-height: 0;
  max-height: 62svh;
  border-radius: 22px;
  background: #000;
  object-fit: contain;
}

.preview-actions { margin-top: auto; padding-top: 8px; }

/* ------------------------------------------------------------------ */
/* Upload progress + success                                           */
/* ------------------------------------------------------------------ */

.progress-track {
  height: 16px;
  border-radius: 999px;
  background: #e8efe9;
  overflow: hidden;
  margin: 22px 0 12px;
}
.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--green-dark));
  transition: width 0.25s ease;
}
.progress-percent {
  margin: 0 0 8px;
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: -0.04em;
}

/* Bytes moved, speed and time left. On a slow link the percentage barely changes,
   and this is what tells a worker the upload is alive. */
.upload-detail {
  margin: 6px 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--green-dark);
  min-height: 22px;
}
.upload-detail.is-stalled { color: #a8620c; }

.recovery-detail {
  margin: 18px 0 22px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #f7fbf8;
  display: grid;
  gap: 4px;
}
.recovery-detail strong { font-size: 1.15rem; }
.recovery-detail span { color: var(--muted); font-weight: 700; font-size: 0.95rem; }

.success-mark {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green);
  color: #fff;
  font-size: 2.2rem;
  font-weight: 900;
  margin: 0 auto 18px;
}

.spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 4px solid var(--line);
  border-top-color: var(--green);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ */
/* Landscape nudge — this is a vertical-video tool                      */
/* ------------------------------------------------------------------ */

.orientation-nudge {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  place-items: center;
  padding: 32px;
  text-align: center;
  background: #05100b;
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.5;
}

@media (orientation: landscape) and (max-height: 520px) {
  .screen-dark.is-active .orientation-nudge { display: grid; }
}

/* Roomier phones can afford a slightly taller reading area. */
@media (min-height: 780px) {
  :root { --prompter-height: 30svh; }
}
@media (max-height: 620px) {
  :root { --prompter-height: 24svh; }
  .record-button { width: 72px; height: 72px; }
  .record-button-inner { width: 52px; height: 52px; }
}