* { box-sizing: border-box; }
:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #171717;
  background: #f5f5f3;
}
body { margin: 0; }
button, input, textarea, select { font: inherit; }
a { color: inherit; }
.shell, .reader-shell { width: min(1180px, calc(100% - 32px)); margin: 40px auto; }
.reader-shell { width: min(1380px, calc(100% - 32px)); }
.topbar, .reader-header, .script-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.reader-header { align-items: flex-end; margin-bottom: 22px; }
h1 { margin: 4px 0 0; font-size: clamp(30px, 4vw, 50px); letter-spacing: -0.04em; }
h2 { margin: 0 0 18px; font-size: 20px; }
.eyebrow { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.card {
  background: white; border: 1px solid #ddd; border-radius: 18px;
  padding: 24px; margin-bottom: 22px; box-shadow: 0 7px 25px rgba(0,0,0,.035);
}
.stack { display: grid; gap: 18px; }
label { display: grid; gap: 7px; font-weight: 700; }
input, textarea, select {
  width: 100%; padding: 12px 14px; border: 1px solid #cfcfcf; border-radius: 10px; background: white;
}
textarea { resize: vertical; line-height: 1.5; }
button, .inline-button {
  border: 0; border-radius: 11px; padding: 12px 17px; cursor: pointer; text-decoration: none;
  font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.primary { background: #171717; color: white; }
.secondary { background: #ececea; color: #171717; }
.record { background: #b82020; color: white; font-size: 18px; padding: 15px 22px; }
button:disabled { opacity: .45; cursor: not-allowed; }
.badge {
  display: inline-flex; padding: 7px 10px; border-radius: 999px; background: #efefed;
  font-size: 12px; font-weight: 800; white-space: nowrap;
}
.muted { color: #696969; font-weight: 500; }
.jobs { display: grid; }
.job-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 0; border-top: 1px solid #e8e8e5;
}
.job-row:first-child { border-top: 0; }
.job-actions, .button-row, .record-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.recorder-grid { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 22px; align-items: start; }
.recorder-panel { position: sticky; top: 20px; }
.script-panel { min-height: 70vh; }
.script-text {
  white-space: pre-wrap; font-family: Georgia, "Times New Roman", serif; font-size: clamp(21px, 2.1vw, 31px);
  line-height: 1.62; max-width: 38em; margin: 20px auto;
}
.script-text.compact { font-size: 19px; max-width: 55em; }
.meter-wrap { display: grid; gap: 7px; }
.meter { height: 13px; background: #e5e5e2; border-radius: 999px; overflow: hidden; }
#meterFill { width: 2%; height: 100%; background: #171717; transition: width .06s linear; }
.timer { font-variant-numeric: tabular-nums; font-size: 27px; font-weight: 800; }
.review { display: grid; gap: 15px; border-top: 1px solid #e6e6e3; padding-top: 20px; }
.review audio { width: 100%; }
.hidden { display: none !important; }
progress { width: 100%; height: 18px; }
.success-panel { max-width: 760px; }
.details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.details-wide { grid-template-columns: repeat(3, 1fr); }
.details div { padding: 14px; background: #f6f6f4; border-radius: 10px; }
dt { font-size: 12px; text-transform: uppercase; font-weight: 800; color: #707070; }
dd { margin: 5px 0 0; }
.back { display: inline-block; margin-bottom: 18px; text-decoration: none; font-weight: 800; }

@media (max-width: 900px) {
  .recorder-grid { grid-template-columns: 1fr; }
  .recorder-panel { position: static; }
  .reader-header, .topbar { align-items: flex-start; flex-direction: column; }
  .details { grid-template-columns: 1fr; }
}

.article-import { display:grid; gap:10px; }
.url-import-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
.section-divider { height:1px; background:#e5e5e2; margin:24px 0; }
#articleImportStatus { min-height:1.4em; }
.status-badge {
  display:inline-flex; padding:4px 8px; border-radius:999px; background:#efefed;
  font-size:12px; font-weight:800; text-transform:capitalize;
}
.status-uploaded, .status-complete, .status-approved { background:#dff3e4; color:#17612d; }
.status-failed { background:#f9dede; color:#8c2020; }
.status-needs_review { background:#fff0c7; color:#755600; }
.error-message { color:#8c2020; }
.live-processing { display:flex; align-items:center; gap:.55rem; padding:.7rem .8rem; border-radius:.6rem; background:#f4f4f1; }
.processing-spinner { width:1rem; height:1rem; flex:0 0 auto; border:2px solid #c9c9c3; border-top-color:#17612d; border-radius:50%; animation:processing-spin .8s linear infinite; }
@keyframes processing-spin { to { transform:rotate(360deg); } }
.checksum { overflow-wrap:anywhere; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }
.created-job-dialog {
  width:min(620px,calc(100% - 32px)); border:0; border-radius:18px; padding:32px;
  box-shadow:0 24px 80px rgba(0,0,0,.28);
}
.created-job-dialog::backdrop { background:rgba(17,17,17,.58); }
.created-job-dialog h2 { margin-top:8px; font-size:28px; }
.dialog-close {
  position:absolute; top:12px; right:12px; width:40px; height:40px; padding:0;
  border-radius:999px; background:#ececea; font-size:25px; font-weight:500;
}
.modal-copy-button { width:100%; margin-top:18px; font-size:17px; }
.review-header-card audio { width:100%; margin-top:22px; }
.review-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:24px; }
.review-summary div { background:#f6f6f4; border-radius:12px; padding:15px; display:grid; gap:4px; }
.review-summary strong { font-size:24px; }
.review-summary span { color:#696969; font-size:12px; font-weight:700; }
.missing-script-card { border-color:#e0b94f; background:#fffaf0; }
.review-region { border-left-width:8px; transition:border-color .15s,background .15s; }
.review-region.action-keep { border-left-color:#2c8b48; background:#f7fcf8; }
.review-region.action-cut { border-left-color:#c33838; background:#fff8f8; }
.review-region.action-review { border-left-color:#d5a321; background:#fffcf3; }
.region-topline { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.region-action { font-weight:900; margin-right:10px; }
.override-label { display:inline-flex; margin-left:8px; padding:3px 7px; border-radius:999px; background:#e7e3fa; color:#493b89; font-size:11px; font-weight:800; }
.region-transcript { font-family:Georgia,"Times New Roman",serif; font-size:22px; line-height:1.55; }
.region-reason { font-size:13px; }
.decision-buttons { display:flex; gap:8px; flex-wrap:wrap; }
.decision-button { background:#ececea; }
.decision-keep.selected { background:#2c8b48; color:white; }
.decision-cut.selected { background:#c33838; color:white; }
.decision-review.selected { background:#d5a321; color:#171717; }
.save-status { min-height:1.3em; margin-top:8px; font-size:12px; }
.complete-review-card { display:flex; align-items:center; justify-content:space-between; gap:20px; }
@media (max-width:700px) {
  .url-import-row { grid-template-columns:1fr; }
  .review-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .region-topline { align-items:flex-start; flex-direction:column; }
}
.script-review-text { white-space: pre-wrap; line-height: 1.9; font-size: 1.05rem; }
.script-review-text span { border-radius: .25rem; padding: .08rem .04rem; }
.script-good { background: #dcfce7; }
.pickup-needed { background: #fde68a; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; }
.pickup-complete { background: #ddd6fe; cursor: pointer; }
.script-legend { display:flex; gap:.6rem; flex-wrap:wrap; font-size:.85rem; }
.script-legend span { padding:.3rem .55rem; border-radius:999px; }
.legend-good { background:#dcfce7; } .legend-needed { background:#fde68a; } .legend-complete { background:#ddd6fe; }
.pickup-dialog { width:min(680px, calc(100% - 2rem)); border:0; border-radius:1rem; padding:1.5rem; box-shadow:0 20px 70px #0006; }
.pickup-dialog::backdrop { background:#0f172a99; }
.pickup-dialog textarea { width:100%; margin:1rem 0; }
.dialog-close { float:right; border:0; background:transparent; font-size:2rem; }
.pickup-row { display:grid; gap:.5rem; margin:1rem 0; }
.pickup-row audio { width:100%; }
.pickup-reopen { display:inline-block; justify-self:start; padding:.1rem .25rem; cursor:pointer; }
.pickup-replace { justify-self:start; }
#pickupMeterFill { width:2%; height:100%; background:#16a34a; transition:width .06s linear; }

/* Focused voice-actor workspace */
.voice-workspace { max-width:1440px; }
.voice-header { padding:4px 4px 0; align-items:center; }
.voice-header h1 { font-size:clamp(30px,3.4vw,46px); }
.reader-byline { margin:.45rem 0 0; color:#5d5d5d; font-weight:650; }
.assignment-number { padding:.55rem .8rem; border-radius:999px; background:#e9e9e5; font-size:.82rem; font-weight:800; white-space:nowrap; }
.reader-tip { margin:0 0 18px; padding:14px 18px; border:1px solid #ddd8c8; border-radius:14px; background:#fffdf5; color:#4d4737; line-height:1.5; }
.voice-recorder-grid { grid-template-columns:370px minmax(0,1fr); gap:18px; }
.voice-control-panel { padding:20px; border-color:#d4d4d0; }
.voice-step { display:grid; grid-template-columns:34px 1fr; gap:11px; align-items:start; padding:13px 0; opacity:.58; }
.voice-step.is-active, .voice-step.is-complete { opacity:1; }
.step-number { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#e8e8e4; font-size:.82rem; font-weight:900; }
.voice-step.is-active .step-number { background:#171717; color:white; }
.voice-step.is-complete .step-number { background:#dff3e4; color:#17612d; }
.step-content { display:grid; gap:3px; }
.step-content span { color:#6a6a6a; font-size:.82rem; line-height:1.35; }
.mic-picker { margin:4px 0 10px; font-size:.82rem; }
.full-button { width:100%; }
.voice-meter { margin:13px 0 14px; }
.voice-meter .meter { height:10px; }
.recording-console { padding:16px; border-radius:14px; background:#f4f4f1; text-align:center; transition:background .2s,box-shadow .2s; }
.recording-console.is-recording { background:#fff1f1; box-shadow:inset 0 0 0 1px #efc7c7; }
.recording-console .timer { font-size:42px; letter-spacing:-.04em; }
.recording-state { margin:1px 0 14px; color:#6a6a6a; font-size:.84rem; font-weight:700; }
.voice-record-controls { display:grid; }
.record-dot { width:10px; height:10px; margin-right:8px; border-radius:50%; background:currentColor; }
.stop-button { background:#171717; color:white; padding:15px 22px; }
.pause-button { background:#f0e5c5; color:#5e4700; }
.recording-console.is-paused { background:#fff9e8; box-shadow:inset 0 0 0 1px #e4d198; }
.voice-control-panel .review { margin-top:18px; }
.submit-recording { padding:15px 20px; font-size:1rem; }
.secondary-actions { justify-content:space-between; }
.text-button { padding:10px 4px; text-decoration:underline; font-weight:700; }
.voice-script-panel { padding:28px clamp(24px,4vw,58px); min-height:75vh; }
.script-toolbar { padding-bottom:16px; border-bottom:1px solid #ecece8; }
.script-toolbar h2 { margin:3px 0 0; font-size:25px; }
.voice-script { max-width:34em; margin:34px auto; font-size:clamp(22px,2vw,30px); line-height:1.72; }
.reader-success { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; max-width:none; }
.reader-success h2, .reader-success p { margin:.25rem 0; }
.success-check { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:#dff3e4; color:#17612d; font-size:25px; font-weight:900; }
.reader-processing-card { display:grid; grid-template-columns:70px minmax(0,1fr); gap:20px; align-items:start; max-width:820px; margin:28px auto; }
.reader-processing-content h2 { margin:4px 0 0; }
.processing-orbit { width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:#f0f0ec; }
.processing-orbit span { width:27px; height:27px; border:3px solid #c9c9c3; border-top-color:#17612d; border-radius:50%; animation:processing-spin .8s linear infinite; }
.analysis-progress { height:8px; margin:18px 0; overflow:hidden; border-radius:999px; background:#e8e8e4; }
.analysis-progress span { display:block; width:38%; height:100%; border-radius:inherit; background:#17612d; animation:analysis-progress 1.5s ease-in-out infinite alternate; }
@keyframes analysis-progress { from { transform:translateX(-70%); } to { transform:translateX(235%); } }

/* Final output approval */
.final-output-panel { margin:24px 0 18px; padding:20px; border:1px solid #d9d9d5; border-radius:14px; background:#fafaf8; }
.final-output-panel.is-approved { border-color:#9fcfab; background:#f7fcf8; }
.final-output-panel h3 { margin:4px 0 0; font-size:24px; }
.approval-badge { padding:.45rem .7rem; border-radius:999px; background:#fff0c7; color:#755600; font-size:.78rem; font-weight:850; }
.is-approved .approval-badge { background:#dff3e4; color:#17612d; }
.final-audio-player { width:100%; margin:20px 0 14px; }
.output-downloads { display:flex; gap:9px; flex-wrap:wrap; }
.verification-panel { margin:18px 0; padding:18px 20px; border:1px solid #deded9; border-radius:14px; }
.verification-panel h3 { margin:0; }
.verification-pass { color:#17612d; font-weight:700; }
.approval-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 0; border-top:1px solid #e5e5e2; }
.approve-button { background:#17612d; color:white; padding:14px 20px; }
.technical-downloads { margin-top:8px; color:#696969; }

@media (max-width:900px) {
  .voice-recorder-grid { grid-template-columns:1fr; }
  .voice-control-panel { position:relative; top:auto; }
  .voice-script-panel { order:-1; min-height:auto; }
  .voice-script { margin:24px auto; }
}
@media (max-width:620px) {
  .reader-shell { width:min(100% - 20px,1380px); margin:18px auto; }
  .voice-header { align-items:flex-start; }
  .assignment-number { display:none; }
  .reader-tip { font-size:.9rem; }
  .voice-script-panel { padding:20px 18px; }
  .voice-script { font-size:22px; line-height:1.65; }
  .reader-success { grid-template-columns:auto 1fr; }
  .reader-success a { grid-column:1 / -1; }
  .reader-processing-card { grid-template-columns:1fr; }
  .processing-orbit { width:48px; height:48px; }
  .approval-actions { align-items:stretch; flex-direction:column; }
  .approval-actions form, .approval-actions button { width:100%; }
}

/* Self-service voiceover intake */
.voiceover-start-shell { width:min(820px,calc(100% - 32px)); margin:40px auto; }
.voiceover-start-header { position:relative; overflow:hidden; margin:0 0 22px; padding:42px 36px 30px; text-align:center; background:linear-gradient(145deg,#fff 0%,#fafaf6 100%); }
.voiceover-start-header::before { content:""; position:absolute; width:180px; height:180px; top:-110px; right:-80px; border-radius:50%; background:#e7f2e9; }
.voiceover-start-header h1 { font-size:clamp(34px,5vw,52px); }
.voiceover-start-header p { margin:14px auto 0; color:#666; font-size:1.08rem; line-height:1.55; }
.voiceover-progress { display:grid; grid-template-columns:repeat(3,1fr); gap:0; max-width:560px; margin:28px auto 0; padding-top:24px; border-top:1px solid #e4e4df; }
.voiceover-progress > div { position:relative; display:flex; align-items:center; justify-content:center; gap:8px; color:#888; font-size:.82rem; font-weight:800; }
.voiceover-progress > div:not(:last-child)::after { content:""; position:absolute; left:calc(50% + 54px); right:calc(-50% + 54px); height:1px; background:#d8d8d3; }
.voiceover-progress span { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#e4e4e0; color:#666; }
.voiceover-progress .is-current { color:#171717; }
.voiceover-progress .is-current span { background:#171717; color:white; }
.voiceover-import-card { background:#fff; }
.voiceover-import-card h2, .voiceover-job-form h2 { margin:3px 0 0; }
.voiceover-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.voiceover-title-field { grid-column:1 / -1; }
.voiceover-job-form textarea { font-family:Georgia,"Times New Roman",serif; font-size:18px; line-height:1.6; }
.voiceover-next-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:4px; }
.voiceover-next-row p { margin:0; }
.voiceover-next-button { padding:15px 22px; white-space:nowrap; }
@media (max-width:720px) {
  .voiceover-start-shell { width:min(100% - 20px,980px); margin:24px auto; }
  .voiceover-field-grid { grid-template-columns:1fr; }
  .voiceover-next-row { align-items:stretch; flex-direction:column; }
  .voiceover-next-button { width:100%; }
  .voiceover-start-header { padding:30px 20px 24px; }
  .voiceover-progress > div strong { display:none; }
  .voiceover-progress > div:not(:last-child)::after { left:calc(50% + 20px); right:calc(-50% + 20px); }
}