/* The Record step and the read view (js/plan-record.js). Shared tokens only (styles.css, css/looks.css), so both
   looks pick up their own type and colour; the read view is the same dark page in both. */

/* ---------- The Record step: the same card and rhythm as the Script step before it ---------- */
.app .card.set-card.rec-step { gap: var(--s5); }
.rec-head { display: grid; gap: var(--s2); }
.rec-head p { font: var(--type-body); max-width: var(--measure); margin: 0; }
.rec-choice-title, .script-card h3.rec-choice-title { font: var(--type-section); letter-spacing: var(--track-title); color: var(--ink-strong); margin: 0; }

/* Record in your browser: the big choice. The picture of you leads; what it needs and the one button sit beside it. */
.rec-browser { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 1fr); gap: var(--s5); align-items: start; }
.rec-browser[hidden] { display: none; }
.rec-preview { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden; background: var(--ink-900); }
.rec-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rec-video[hidden] { display: none; }
.is-mirrored { transform: scaleX(-1); }
.rec-preview-off { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s3); padding: var(--s4); text-align: center;
  color: color-mix(in srgb, var(--pearl) 80%, var(--ink-900)); }
.rec-preview-off[hidden] { display: none; }
.rec-preview-off .type-meta, html[data-look] .rec-preview-off .type-meta { margin: 0; color: inherit; }
.rec-preview-off .btn { gap: var(--s2); background: var(--pearl) !important; color: var(--ink-900) !important; border-color: transparent !important; }
.rec-side { display: grid; gap: var(--s3); align-content: start; min-width: 0; }
.rec-needs { margin: 0; font: var(--type-body); color: var(--ink); }
.rec-go { justify-self: stretch !important; justify-content: center; gap: var(--s2); min-height: 52px; font: var(--type-body-strong); margin-top: var(--s1); }
.rec-go .rv-dot { background: var(--st-fail-dot); }
.rec-problem { margin: 0; font: var(--type-body); color: var(--dk-tx-st-fail, var(--st-fail)); }
.rec-problem[hidden] { display: none; }

/* Which camera and microphone, and the microphone's level. One hairline row each. */
.rec-devices { display: grid; gap: 0; border-top: 1px solid var(--line); }
.rec-devices[hidden] { display: none; }
.rec-dev, .rec-level { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: var(--s2); margin: 0;
  padding: var(--s2) 0; border-bottom: 1px solid var(--line); font: var(--type-body); }
.rec-dev-k { font: var(--type-meta); color: var(--muted); }
.rec-dev-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-strong); }
.rec-dev select.input { min-height: 40px; width: 100%; max-width: none; }
.rec-level { grid-template-columns: 6.5rem minmax(0, 1fr); }
.rec-level .type-meta { grid-column: 2; margin: 0; color: var(--muted); }
.rec-meter { height: 8px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.rec-meter span { display: block; height: 100%; background: var(--positive); transform-origin: left center; transform: scaleX(0); transition: transform 80ms linear; }

/* Capture checks: advice in plain words, never a gate. */
.rec-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.rec-checks[hidden] { display: none; }
.rec-check { font: var(--type-meta); padding-left: var(--s3); border-left: 2px solid var(--line-2); color: var(--ink); }
.rec-check.is-advice { border-left-color: var(--st-attn-dot); }
.rec-check.is-ok { border-left-color: var(--dk-tx-positive, var(--positive)); color: var(--muted); }

/* Upload a take you already recorded: the quiet choice, one hairline row. */
.rec-upload[hidden] { display: none; }
.rec-upload { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5);
  padding-top: var(--s4); border-top: 1px solid var(--line); }
.rec-upload-text { display: grid; gap: var(--s1); min-width: 0; flex: 1 1 18rem; }
.rec-upload-text h3, .rec-upload-text p { margin: 0; }
.rec-upload-text .type-meta { color: var(--muted); }
#recMessage:empty { display: none; }

/* The take: play it, what it is, what to do with it. */
.rec-take { display: grid; gap: var(--s3); }
.rec-take[hidden] { display: none; }
.rec-playback { width: 100%; max-width: 48rem; aspect-ratio: 16 / 9; background: var(--ink-900); border-radius: var(--r-sm); display: block; }
.rec-facts { margin: 0; color: var(--muted); }
.rec-note { margin: 0; font: var(--type-body); color: var(--ink); padding: var(--s2) var(--s3); border-radius: var(--r-sm, 10px); background: var(--fill-faint-hover, var(--dk-b-1f1f21a4, rgba(31,31,33,.04))); max-width: var(--measure); }
.rec-take-actions { align-items: center; }
.rec-save { gap: var(--s2); }

/* The approved script, folded under the Record step. */
.script-fold > summary { cursor: pointer; display: grid; gap: var(--s1); list-style: none; }
.script-fold > summary::-webkit-details-marker { display: none; }
.script-fold > summary .type-section { color: var(--ink-strong); }
.script-fold > summary .type-section::after { content: ''; display: inline-block; width: 1em; height: 1em; margin-left: var(--s2); vertical-align: -0.12em; background: var(--muted); -webkit-mask: var(--chevron-down-mask) center / contain no-repeat; mask: var(--chevron-down-mask) center / contain no-repeat; }
.script-fold[open] > summary .type-section::after { transform: rotate(180deg); }
.script-fold > summary .type-meta { color: var(--muted); }
.script-fold[open] > summary { margin-bottom: var(--s3); }
.script-fold .script-window { display: grid; gap: var(--s3); }

@media (max-width: 760px) {
  .rec-browser { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .rec-upload .btn, .rec-take-actions .btn { width: 100%; justify-content: center; }
}

/* ---------- The read view ----------
   A dark page of large type to read from, the same in both looks. The script column sits against the top edge
   (under a laptop's camera); the self-view sits beside it. All controls are in one row along the bottom. */
.readview { --rv-ink: var(--pearl); --rv-ground: var(--ink-900);
  --rv-muted: color-mix(in srgb, var(--pearl) 66%, var(--ink-900)); --rv-faint: color-mix(in srgb, var(--pearl) 34%, var(--ink-900));
  --rv-line: color-mix(in srgb, var(--pearl) 18%, transparent); --rv-fill: color-mix(in srgb, var(--pearl) 10%, transparent);
  --rv-bar: 4.25rem; --self-w: clamp(150px, 17vw, 260px);
  position: fixed; inset: 0; z-index: 65; overflow-y: auto; overscroll-behavior: contain; background: var(--rv-ground); color: var(--rv-ink); outline: none; }
body.is-reading { overflow: hidden; }
.readview .rv-page { max-width: 38rem; margin: 0 auto; padding: var(--s4) var(--s4) calc(100vh - var(--rv-bar)); font-size: 2.2rem; line-height: 1.4;
  font-family: var(--font-sans); }
.readview .rv-title { font: var(--type-meta); color: var(--rv-faint); margin: 0 0 var(--s3); }
.readview .rv-part-head { font: var(--type-body-strong); color: var(--rv-faint); margin: var(--s6) 0 var(--s2); }
.readview .rv-part-head:first-of-type { margin-top: 0; }
.readview-marker { display: inline-block; min-width: 1.4em; }
.readview .rv-line { margin: 0 0 0.55em; color: var(--rv-faint); cursor: pointer; transition: color var(--motion) var(--ease), opacity var(--motion) var(--ease); }
.readview .rv-line.is-lit { color: var(--rv-ink); }
.readview .rv-line.is-past { opacity: 0.45; }
.readview-end { font: var(--type-meta); color: var(--rv-faint); margin-top: var(--s7); }
.readview .rv-page.is-mirrored { transform: scaleX(-1); }

/* The self-view: mirrored like a selfie (the recording is not), small, beside the script near the camera. */
.readview .rv-self { position: fixed; top: var(--s4); left: calc(50% + 19rem + var(--s4)); width: var(--self-w); aspect-ratio: 16 / 9; margin: 0; z-index: 3;
  border-radius: var(--r-sm); overflow: hidden; background: #000; border: 1px solid var(--rv-line); cursor: grab; touch-action: none; }
.readview .rv-self[hidden] { display: none; }
.readview .rv-self.is-dragging { cursor: grabbing; }
.readview .rv-self-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.readview .rv-rec { position: absolute; left: var(--s1); top: var(--s1); display: inline-flex; align-items: center; gap: var(--s1); padding: 2px var(--s2);
  border-radius: 999px; background: color-mix(in srgb, var(--ink-900) 72%, transparent); color: var(--rv-ink); font: var(--type-meta); font-variant-numeric: tabular-nums; }
.readview .rv-rec[hidden] { display: none; }
.readview .rv-self-hide { position: absolute; right: 2px; top: 2px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--ink-900) 60%, transparent); color: var(--rv-ink); cursor: pointer; opacity: 0.8; }
.readview .rv-self-hide:hover, .readview .rv-self-hide:focus-visible { opacity: 1; }
.readview .rv-self-hide:focus-visible { outline: 2px solid var(--pearl); outline-offset: 1px; }
@media (max-width: 1180px) {
  .readview .rv--record .rv-page { margin: 0 calc(var(--self-w) + var(--s6)) 0 var(--s5); max-width: 40rem; }
  .readview .rv-self { left: auto; right: var(--s4); }
}

/* Recording: a red dot that breathes, the time beside Stop. */
.rec-go .rv-dot, .readview .rv-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--st-fail-dot); flex: none; }
.readview.is-recording:not(.is-paused) .rv-dot { animation: rv-breathe 1.6s ease-in-out infinite; }
@keyframes rv-breathe { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .readview.is-recording .rv-dot { animation: none; } .readview .rv-line { transition: none; } }
html[data-motion="reduce"] .readview.is-recording .rv-dot { animation: none; }

.readview-count { position: fixed; inset: 0; z-index: 4; display: grid; place-items: center; font: var(--fw-strong) 18vh/1 var(--font-sans);
  color: var(--rv-ink); background: color-mix(in srgb, var(--ink-900) 55%, transparent); pointer-events: none; }
.readview-count[hidden] { display: none; }
.readview .rv-notice { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--rv-bar) + var(--s3)); z-index: 4; width: max-content; max-width: min(40rem, calc(100vw - 2 * var(--s4)));
  margin: 0; padding: var(--s2) var(--s4); border-radius: var(--r-sm); background: color-mix(in srgb, var(--pearl) 14%, var(--ink-900)); border: 1px solid var(--rv-line);
  font: var(--type-body); color: var(--rv-ink); }
.readview .rv-notice[hidden] { display: none; }
.readview .rv-notice[data-tone="bad"] { border-color: var(--st-fail-dot); }
.readview .rv-notice[data-tone="warn"] { border-color: var(--st-attn-dot); }

/* The bar: quiet controls on the left, Record in the middle and largest, Close on the right. One row. */
.readview .rv-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; min-height: var(--rv-bar); display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--ink-900) 96%, transparent); border-top: 1px solid var(--rv-line); }
.readview .rv-quiet { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--s1); flex-wrap: nowrap; }
.readview .rv-main { flex: none; display: flex; align-items: center; gap: var(--s2); }
.readview .rv-close { flex: none; margin-left: auto; }
.readview .rv-adjust { display: none !important; }
.readview [hidden] { display: none !important; }
.readview .rv-bar .btn { white-space: nowrap; }
.readview .rv-bar .btn.btn--light { background: var(--rv-fill) !important; color: var(--rv-ink) !important; border: 1px solid var(--rv-line) !important; box-shadow: none !important; }
.readview .rv-bar .btn.btn--light[aria-pressed="true"], .readview .rv-bar .btn.btn--light[aria-expanded="true"] { background: var(--rv-ink) !important; color: var(--rv-ground) !important; }
.readview .rv-bar .btn:focus-visible, .readview .rv-select:focus-visible, .readview .rv-speed input:focus-visible { outline: 2px solid var(--pearl); outline-offset: 2px; }
.readview .rv-q { min-height: 36px; padding: 0 var(--s2) !important; font: var(--type-meta) !important; gap: var(--s1); }
.readview .rv-q svg { flex: none; }
.readview .rv-speed { display: inline-flex; align-items: center; gap: var(--s2); font: var(--type-meta); color: var(--rv-muted); padding: 0 var(--s1); }
.readview .rv-speed input { width: 5.5rem; accent-color: var(--pearl); }
.readview .rv-part { display: inline-flex; min-width: 0; }
.readview .rv-select { min-height: 36px; max-width: 9rem; min-width: 0; padding: 0 var(--s2); border-radius: var(--r-sm); border: 1px solid var(--rv-line);
  background: var(--rv-fill); color: var(--rv-ink); font: var(--type-meta); text-overflow: ellipsis; }
.readview .rv-select option { color: var(--ink-900); background: var(--pearl); }
.readview .rv-scroll { min-height: 44px; }
.readview .rv-bar .rv-record { min-height: 52px; padding: 0 var(--s5); gap: var(--s2); border-radius: 999px; border: 0;
  background: var(--pearl); color: var(--ink-900); font: var(--type-body-strong); box-shadow: none; }
.readview .rv-bar .rv-record:hover { background: color-mix(in srgb, var(--pearl) 88%, var(--ink-900)); }
.readview.is-recording .rv-bar .rv-record { background: var(--st-fail-dot); color: #fff; }
.readview.is-recording .rv-bar .rv-record:hover { background: var(--st-fail); }
.readview .rv-time { min-width: 3.2em; font: var(--type-body-strong); font-variant-numeric: tabular-nums; color: var(--rv-ink); }
.readview .rv-time[hidden] { display: none; }
.readview .rv-upload { min-height: 44px; }
.readview .rv-upload[hidden] { display: none; }
.readview.is-blocked .rv-self { display: none; }
.readview .rv-short { display: none; }
.readview.is-recording .rv-scroll { display: inline-flex; }
@media (max-width: 1599px) { .rv-q[data-rv="selfview"] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* Wide screens: Record sits in the middle of the row. */
@media (min-width: 1440px) {
  .readview .rv-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .readview .rv-close { justify-self: end; }
}
/* Tablets and phones: the quiet controls fold behind one button and open above the bar. */
@media (max-width: 860px) {
  .readview .rv-adjust { display: inline-flex !important; min-width: 44px; min-height: 44px; justify-content: center; }
  .readview .rv-quiet { position: absolute; left: var(--s3); right: var(--s3); bottom: calc(100% + var(--s2)); display: none; flex-wrap: wrap; gap: var(--s2);
    padding: var(--s3); border-radius: var(--r-sm); border: 1px solid var(--rv-line); background: color-mix(in srgb, var(--pearl) 8%, var(--ink-900)); }
  .readview .rv-quiet.is-open { display: flex; }
  .readview .rv-quiet .rv-q, .readview .rv-select { min-height: 44px; }
  .readview .rv-q[data-rv="selfview"] span { position: static; width: auto; height: auto; clip: auto; }
  .readview .rv-main { flex: 1 1 auto; justify-content: center; min-width: 0; }
  .readview .rv-close { margin-left: 0; min-width: 44px; min-height: 44px; justify-content: center; }
}
@media (max-width: 680px) {
  .readview { --rv-bar: 4.5rem; --self-w: 34vw; }
  .readview .rv-bar { gap: var(--s2); padding-inline: var(--s3); }
  .readview .rv-page, .readview .rv--record .rv-page { margin: 0; max-width: none; padding: var(--s3) var(--s3) calc(100vh - var(--rv-bar)); }
  .readview .rv-self { top: var(--s2); right: var(--s2); }
  .readview .rv--record .rv-title { padding-right: calc(var(--self-w) + var(--s2)); }
  .readview .rv-bar .rv-record { padding: 0 var(--s4); }
}
@media (max-width: 480px) {
  .readview .rv-time { display: none !important; }
  .readview .rv-pause span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .readview .rv-pause { min-width: 44px; min-height: 44px; justify-content: center; }
  .readview.is-blocked .rv-scroll { display: none; }
  .readview .rv-upload .rv-long { display: none; }
  .readview .rv-upload .rv-short { display: inline; }
}