/* ============================================================================
   modal.css — the in-page auth modal (spec §6)

   .modal / .modal__backdrop / .modal__panel / .modal__close / .modal__title come
   from web/static/css/inspiration.css (the "How it works?" dialog already uses
   them) and are NOT redefined here — reusing them is what keeps a second modal
   from looking or animating like a different component. Everything below is only
   what is actually new: the two-step layout, the Google button, the code input,
   the quota panel, the resume banner. Same design tokens as the rest of the site
   (var(--bg)/--card/--accent-1/--accent-2/--radius-*/--shadow, style.css), same
   BEM-ish naming (web/static/css/style.css header comment / LOGGING-CONTRACT §3.6).
   ========================================================================== */

/* A touch narrower than the "How it works?" panel (760px) — this is a sign-in
   form, not a video frame plus steps; the wide panel elsewhere would leave the
   email field and button stretched across a huge empty box. */
.qv-auth-modal__panel { max-width: 400px; }

/* Steps are toggled with the [hidden] attribute (see style.css's own rule that
   [hidden] must always win — the same "never rely on display: none from a class
   colliding with [hidden]" note applies here). No extra rule needed to enforce
   that; this comment just says the layout is intentional, not decorative. */
.qv-auth-step { }

.qv-modal__subtitle {
  margin: -6px 0 18px;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.5;
}
.qv-modal__subtitle:last-child { margin-bottom: 0; }

.qv-auth-note {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-2);
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
}

/* Google's own brand guidelines call for a white (or outlined) button rather
   than the site's purple gradient primary — a re-skinned "Continue with
   Google" reads as untrustworthy precisely because real Google buttons never
   look like that. */
.btn--google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: #1f1f1f;
  border: 1px solid var(--border);
}
.btn--google:hover:not(:disabled) { background: #f1f1f1; }
.btn--google:active:not(:disabled) { transform: scale(.98); }
.btn--google svg { flex: none; }

.qv-modal__or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.qv-modal__or::before,
.qv-modal__or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}

/* style.css's .field is `flex-direction: column; gap: 7px` with NO bottom margin --
   fine on the wizard, where a field is never the last thing in a group. Here a field
   is followed immediately by the step's submit button, so the button sat flush against
   the input. Put the space on the field rather than the button: the error chip between
   them is [hidden] until it fires, and a hidden element contributes no margin at all,
   so a `.field + .btn` rule would collapse the moment an error appeared. This way the
   input keeps the same 16px below it either way -- matching .qv-modal__or's own 16px
   rhythm -- and the chip's existing margin-bottom carries on from there. Applies to
   both steps: email on start, code on verify. */
.qv-auth-step .field { margin-bottom: 16px; }

.qv-auth-code-input {
  font-size: 1.5rem;
  letter-spacing: .5em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  /* letter-spacing pushes the last glyph past centre unless the box compensates */
  padding-left: calc(var(--radius-sm) + .5em);
}

.qv-link {
  display: inline;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--accent-2);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.qv-link:hover { color: var(--text); }
.qv-link:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.qv-link:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 2px; }

#qv-auth-resend { display: block; width: 100%; text-align: center; margin: 14px 0 0; }

.qv-auth-quota-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 4px 0 16px;
}
.qv-auth-quota-stat {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-2);
  padding: 12px;
  text-align: center;
}
.qv-auth-quota-stat__value { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.qv-auth-quota-stat__label { color: var(--muted); font-size: .78rem; margin-top: 2px; }

@media (max-width: 480px) {
  .qv-auth-quota-grid { grid-template-columns: 1fr; }
}

/* ── resume banner (post-OAuth-round-trip failure, spec §6.3/§6.5) ──────────── */
.qv-resume-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 14px;
  width: calc(100% - 32px);
  max-width: 480px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: 13px 14px 13px 16px;
  font-size: .88rem;
  line-height: 1.4;
  animation: modal-fade .16s ease-out;
}
.qv-resume-banner[hidden] { display: none; }
.qv-resume-banner span { flex: 1 1 auto; }
.qv-resume-banner button {
  flex: none;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px;
}
.qv-resume-banner button:hover { color: var(--text); }
.qv-resume-banner button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .qv-resume-banner { animation: none; }
}