/* ─────────────────────────────────────────────────────────────
   shell.css — shared responsive layer for the app-shell pages
   (setup, interview, report, rules, about).

   Loaded AFTER each page's inline <style>, so equal-specificity
   rules here win. The main job: below 860px the sidebar used to
   be display:none, which took the "New interview" button, the
   session history AND the sign-out control off mobile entirely.
   Here it becomes a slide-in drawer instead.
   ───────────────────────────────────────────────────────────── */

/* ── never let a page scroll sideways ───────────────────────── */
img, svg, video, canvas { max-width: 100%; }
.main, .page, .wrap { min-width: 0; }

/* ── hamburger (hidden on desktop, shown with the drawer) ───── */
.menubtn {
  display: none;
  width: 38px; height: 38px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  place-items: center; cursor: pointer; flex: none; margin-right: 6px;
  transition: color .15s, border-color .15s;
}
.menubtn:hover { color: #fff; border-color: var(--purple-line); }
.menubtn svg { width: 18px; height: 18px; }

/* ── close button injected into the drawer by shell.js ──────── */
.drawer-close { display: none; }

/* ── drawer backdrop ────────────────────────────────────────── */
.drawer-backdrop {
  display: none; position: fixed; inset: 0; z-index: 55;
  background: rgba(0,0,0,.62);
  opacity: 0; pointer-events: none; transition: opacity .26s ease;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

/* ═══════════════ tablet / mobile: sidebar → drawer ═══════════ */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }

  /* beats the inline `.sidebar { display: none }` */
  .app > .sidebar {
    display: flex;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(86vw, 300px);
    height: 100vh; height: 100dvh;
    z-index: 60; overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.2,.7,.3,1);
    background: rgba(13,13,19,.98);
    box-shadow: 0 0 46px rgba(0,0,0,.6);
  }
  .app > .sidebar.open { transform: translateX(0); }

  .menubtn { display: grid; }
  .drawer-backdrop { display: block; }
  body.drawer-open { overflow: hidden; }

  /* the open drawer leaves only a thin strip of backdrop to tap,
     so give the drawer its own close affordance */
  .drawer-close {
    display: grid; place-items: center;
    position: absolute; top: 14px; right: 14px;
    width: 34px; height: 34px; border-radius: 9px; z-index: 2;
    border: 1px solid var(--line); background: var(--card);
    color: var(--muted); cursor: pointer;
    transition: color .15s, border-color .15s;
  }
  .drawer-close:hover { color: #fff; border-color: var(--purple-line); }
  .drawer-close svg { width: 16px; height: 16px; }

  .appbar { padding: 0 14px; gap: 2px; }
  .navlink { padding: 9px 11px; font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .app > .sidebar, .drawer-backdrop { transition: none; }
}

/* ── popovers must never hang off-screen ────────────────────── */
@media (max-width: 560px) {
  .pop { width: min(288px, calc(100vw - 24px)); right: 12px; }
}

/* ═══════════════ small phones: general tightening ═══════════ */
@media (max-width: 620px) {
  .wrap { padding-left: 16px !important; padding-right: 16px !important; }
  .appbar { height: 58px; }
  .iconbtn { width: 34px; height: 34px; }

  /* long words / URLs in transcripts and answers shouldn't overflow */
  .transcript .body, .qtext, .yours, .critique p, .summary p { overflow-wrap: anywhere; }

  /* iOS Safari zooms the viewport when a focused field is under 16px */
  input[type=text], input[type=email], input[type=password], textarea, select {
    font-size: 16px;
  }
}

/* ── setup page: launch bar stacks, button goes full width ──── */
@media (max-width: 560px) {
  .launch { padding: 20px 18px; flex-direction: column; align-items: stretch; }
  .launch button#submit { width: 100%; justify-content: center; }
  .card { padding: 20px 18px; }
  .drop { padding: 26px 16px; }
}

/* ── rules / about: CTA stacks ──────────────────────────────── */
@media (max-width: 560px) {
  .cta { flex-direction: column; align-items: stretch; padding: 20px 18px; }
  .cta a { width: 100%; justify-content: center; }
  .step { padding: 14px 15px; gap: 12px; }
}

/* ── report page: header buttons stack and fill ─────────────── */
@media (max-width: 620px) {
  .head { flex-direction: column; align-items: stretch; gap: 16px; }
  .headbtns { flex-wrap: wrap; }
  .headbtns .btn { flex: 1; justify-content: center; min-width: 140px; }
}

/* ── interview page ─────────────────────────────────────────── */
@media (max-width: 620px) {
  /* progress + timer sit side by side on desktop; stack on phones
     so the timer keeps its tabular digits readable */
  .headrow { flex-direction: column; align-items: stretch; gap: 14px; }
  .timer { min-width: 0; width: 100%; }
  .timer .tv { font-size: 26px; }

  .stage { padding: 26px 18px; border-radius: 14px; }
  .stage::after { display: none; }          /* decorative quote mark crowds small screens */

  .modes { display: flex; width: 100%; }
  .modes button { flex: 1; justify-content: center; padding: 11px 10px; font-size: 13px; }

  /* comfortable thumb target for the record button */
  .micbtn { width: 72px; height: 72px; }

  .footer { gap: 12px; }
  .footer .hint { flex-basis: 100%; order: 3; }
  .footer button.solid, .footer button.ghost { flex: 1; justify-content: center; }

  .typerow { justify-content: stretch; }
  .typerow button { width: 100%; justify-content: center; }

  .ready { flex-direction: column; align-items: stretch; }
  .ready button.blue { width: 100%; justify-content: center; }
  .done .big { font-size: 27px; }
}