/* hut-interview-room.css | v1.3 | 2026-10-01 — prominent covered pause view and measured finishing progress. */
/* hut-interview-room.css | v1.2 | 2026-10-01 — Recording paused overlay inside the camera view, shared by both interview pages. */
/* hut-interview-room.css | v1.1 | 2026-09-29 — THE RECORDING SIGNS, SHARED. The "Recording" / "Recording paused" line under the
 * self-view (.room-rec, .room-rec-dot) and the banner in the main column that says plainly when this part is NOT being
 * recorded (.room-rec-banner), with the same values the paid Life Story page already draws them in. The free Story Starter
 * uses them for its new Pause / Resume recording control. The Life Story page keeps its own copies of these rules in its
 * own style block, which load after this file and win, so it looks exactly as before and needed no ?v= bump.
 *
 * hut-interview-room.css | v1.0 | 2026-09-13
 *
 * THE INTERVIEW ROOM — one set of styles for the free Story Starter interview
 * (story-starter-interview.html, page 1084) and the paid Life Story interview
 * (interview.html, page 29). Branden, 2026-09-13: "One consistent interview experience
 * across free and paid. Do not fork the CSS. Share it."
 *
 * Served from /api/hut-interview-room.css (the repo's js/ folder is published to /api/,
 * the same way hut-camera.js and hut-testimonial.js are). Both pages load it with a
 * version string, because /api/ files are cached for thirty days: change the file, bump
 * the ?v= on BOTH pages.
 *
 * What lives here is only the room itself: the question card, the answer buttons, the
 * status line, Skip, and the self-view card with its microphone bar and its one quiet
 * camera control. Everything else on each page (headers, start screens, the finished
 * story) stays in that page.
 *
 * Every class starts with room- so nothing here can collide with either page's own
 * styles. Modifiers (.secondary, .recording, .error, .waiting) only ever appear joined
 * to a room- class. Colours are written out rather than read from each page's variables,
 * because the two pages name their variables differently; the values are the same cream,
 * brown and gold both pages already use.
 *
 * Load it BEFORE the page's own <style>, so a page can still adjust a detail with a rule
 * of the same weight.
 *
 * The self-view is NOT mirrored. Branden, 2026-09-12 (Testimonials 1.3.0): a mirrored
 * preview "flips" the moment the recording plays back, which reads as a fault. The
 * preview, the saved file and the playback all show the same picture.
 */

.room-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}

.room-card{border:1px solid #ddd8cc;background:linear-gradient(145deg,#ffffff,rgba(201,168,76,.035));border-radius:12px;padding:30px;box-shadow:0 10px 30px rgba(42,31,10,.07);color:#2a1f0a;min-width:0}
.room-question-card{padding:34px}

.room-label{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:#6e5218;margin:0 0 12px}
.room-question{font-family:"Playfair Display",Georgia,serif;font-weight:500;font-size:clamp(1.55rem,3.2vw,2.25rem);line-height:1.3;color:#2a1f0a;overflow-wrap:anywhere}

.room-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.room-btn{max-width:100%;white-space:nowrap;-webkit-appearance:none;appearance:none;border:1px solid #c9a84c;background:#c9a84c;color:#0b0703;border-radius:3px;min-height:54px;padding:0 24px;font:600 1rem "Lora",Georgia,serif;cursor:pointer;transition:background .18s,border-color .18s,transform .18s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.room-btn:hover{background:#b8963f;transform:translateY(-1px)}
.room-btn.secondary{background:transparent;color:#2a1f0a;border-color:#ddd8cc}
.room-btn.secondary:hover{border-color:#6e5218;background:rgba(201,168,76,.06)}
/* Near-black on gold is kept on purpose: the audience is elderly, and cream on gold is about 2:1. */
.room-btn.recording,.room-btn.recording:hover{background:#a43f2b;border-color:#c8644f;color:#ffffff}
.room-btn:disabled{opacity:.5;cursor:wait;transform:none}

.room-status{margin-top:15px;color:#7a6a4a;font-size:.9rem;min-height:1.5em}
.room-status.error{color:#c0392b}
.room-status.waiting{color:#2a1f0a;font-size:1rem;display:flex;align-items:center;gap:10px}
.room-status.waiting::before{content:"";flex:0 0 auto;width:18px;height:18px;border:2px solid rgba(42,31,10,.18);border-top-color:#6e5218;border-radius:50%;animation:room-spin .8s linear infinite}
@keyframes room-spin{to{transform:rotate(360deg)}}

.room-skipline{margin-top:14px}
.room-skip{-webkit-appearance:none;appearance:none;border:0;background:transparent;color:#7a6a4a;font:400 .86rem "Lora",Georgia,serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px 0}
.room-skip:hover{color:#6e5218}
.room-skip:disabled{opacity:.5;cursor:wait}

/* The self-view: what the camera sees, a bar that moves when they speak, and one quiet control. */
.room-selfview{padding:14px}
.room-selfview video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#000;border-radius:7px}
.room-note{font-size:.78rem;line-height:1.5;color:#7a6a4a;padding:10px 2px 0;margin:0}
.room-mic{display:flex;align-items:center;gap:8px;margin:10px 2px 0;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:#7a6a4a}
.room-micbar{flex:1;height:6px;border-radius:999px;background:rgba(138,104,32,.16);overflow:hidden}
.room-micfill{display:block;height:100%;width:0;background:#c9a84c;transition:width .12s linear}
.room-camera-btn{-webkit-appearance:none;appearance:none;display:block;width:100%;margin:12px 0 0;border:1px solid #ddd8cc;background:transparent;color:#2a1f0a;border-radius:5px;min-height:46px;padding:0 12px;font:500 .9rem "Lora",Georgia,serif;cursor:pointer;transition:background .18s,border-color .18s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-camera-btn:hover:not(:disabled){background:rgba(201,168,76,.06);border-color:#6e5218}
.room-camera-btn:disabled{opacity:.55;cursor:wait}

/* v1.1: the recording signs. Red and pulsing while recording; still and brown while paused. */
.room-rec{display:flex;align-items:center;gap:7px;font-size:.78rem;color:#2a1f0a;margin:10px 2px 0}
.room-rec-dot{width:7px;height:7px;background:#c0392b;border-radius:50%;flex-shrink:0;animation:room-rec-pulse 1.2s ease-in-out infinite}
.room-rec.paused .room-rec-dot{background:#7a6a4a;animation:none}
@keyframes room-rec-pulse{0%,100%{opacity:1}50%{opacity:.2}}
.room-rec-banner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff3dc;border:2px solid #d9962b;border-radius:12px;padding:14px 16px;margin:0 0 14px}
.room-rec-banner p{margin:0;flex:1 1 220px;font-family:"Lora",Georgia,serif;font-size:1.05rem;font-weight:600;line-height:1.4;color:#5c3b06}
.room-rec-banner .room-btn{flex:0 0 auto}

@media(max-width:1000px){
  .room-grid{grid-template-columns:minmax(0,1fr) 280px}
}
@media(max-width:760px){
  .room-grid{grid-template-columns:1fr}
  .room-selfview{order:-1;max-width:420px}
  .room-card{padding:22px}
  .room-question-card{padding:24px}
  .room-actions{display:grid;grid-template-columns:1fr}
  .room-btn{width:100%}
}

.room-camera-stage{position:relative;border-radius:8px;overflow:hidden}.room-camera-stage.is-paused{min-height:160px;background:#181818}.recording-paused{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.65);color:#fff;font:600 1.1rem "Lora",Georgia,serif;padding:12px;text-align:center;pointer-events:none}

.room-camera-stage.is-paused video { visibility: hidden; }
.room-camera-stage.is-paused { min-height: 180px; background: #292724; }
.room-camera-stage .recording-paused { inset: 0; background: #292724; color: #fff; display: flex; flex-direction: column; justify-content: center; text-align: center; font-size: 1.35rem; font-weight: 700; padding: 20px; }
.room-camera-stage .recording-paused span { display: block; font-size: .9rem; font-weight: 400; margin-top: 12px; }
.room-camera-stage .recording-paused.hidden { display: none; }
.finish-progress { background: #f5f0e4; border: 1px solid #b79b4d; border-radius: 8px; padding: 20px; margin: 22px 0; }
.finish-progress progress { display: block; width: 100%; height: 18px; margin-top: 12px; accent-color: #a1842e; }
.finish-progress.error { border-color: #a34232; }