/* "Lend your voice" (/voices/lend, lend.js). Builds on style.css and studio.css. Phones first: one column, big
   targets, the script in large type, the recording bar stuck to the bottom of the screen while recording. */
.ln-page { max-width: 760px; }
.ln-card { border: 1px solid var(--panel-line); border-radius: 8px; background: var(--st-panel); padding: 14px 16px; margin: 0 0 14px; }
.ln-card h2 { margin: 0 0 8px; font-family: var(--heading); color: var(--gold); font-size: 1.25rem; }
.ln-card p { max-width: 68ch; }
.ln-card audio { width: 100%; margin: 4px 0 8px; }
.ln-small { display: block; color: var(--muted); font-size: 0.85rem; margin: 6px 0; }
.ln-how { margin: 0 0 16px; padding-left: 20px; }
.ln-how li { margin-bottom: 6px; }
.ln-tips { margin: 0 0 10px; padding-left: 18px; font-size: 0.92rem; }
.ln-tips li { margin-bottom: 4px; }
.ln-script { background: var(--parchment); color: var(--ink); border-radius: 6px; padding: 14px 16px; font-size: 1.15rem;
  line-height: 1.75; box-shadow: inset 0 0 0 1px var(--parchment-dark); margin: 8px 0 14px; overflow-wrap: break-word; }
.ln-script p { margin: 0 0 0.9em; }
.ln-script p:last-child { margin-bottom: 0; }
.ln-start { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ln-start .btn-download, .ln-recbar .btn-download { min-height: 48px; padding: 10px 28px; cursor: pointer; font-size: 1.05rem; }
.ln-file { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
.ln-recbar { position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  margin: 0 -16px -14px; border-top: 1px solid var(--line); background: rgba(13, 11, 9, .97); border-radius: 0 0 8px 8px; }
.ln-recbar #ln-clock { font-variant-numeric: tabular-nums; font-size: 1.2rem; min-width: 3.2em; }
.ln-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--st-bad); animation: ln-blink 1s steps(2) infinite; }
@keyframes ln-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .ln-dot { animation: none; } }
.ln-level { flex: 1; height: 10px; border-radius: 5px; background: #231d15; border: 1px solid var(--line); overflow: hidden; }
.ln-level i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4f8f3a, var(--st-ok)); transition: width .08s linear; }
.ln-level i.hot { background: var(--st-bad); }
.ln-roomres { margin: 6px 0 0; }
.st-note.ok { color: var(--st-ok); }
.ln-terms { margin: 0 0 14px; padding-left: 18px; font-size: 0.92rem; }
.ln-terms li { margin-bottom: 6px; }
.ln-consent .fb-field { max-width: 520px; }
.ln-steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 14px; counter-reset: step; }
.ln-steps li { counter-increment: step; font-size: 0.85rem; color: var(--muted); border: 1px solid var(--line); border-radius: 14px; padding: 3px 10px; }
.ln-steps li::before { content: counter(step) ". "; }
.ln-steps li.past { color: var(--st-ok); border-color: #3c5f33; }
.ln-steps li.now { color: var(--gold); border-color: #c9a24b; font-weight: 600; }
.ln-meta { color: var(--muted); font-size: 0.85rem; }
.ln-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.ln-inline .fb-field { margin-bottom: 0; flex: 1 1 220px; }
.ln-withdraw summary { cursor: pointer; color: var(--muted); min-height: 32px; padding: 4px 0; }
.st-b.danger { border-color: var(--st-bad); color: #ffd7d4; }
.ln-card .st-dl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ln-card .st-dl span { color: var(--muted); font-size: 0.88rem; }
.ln-card code { font-family: var(--st-mono); font-size: 0.85em; overflow-wrap: anywhere; }
.ln-alt { margin-top: 18px; }