/* A-4 휴대폰으로 찍어 로그인: the PC widget on the login screen and the phone page (/q).
   Colours come from the tokens in app.css, so dark mode follows on its own. */

.qr-login { margin-top: 14px; display: grid; gap: 6px; }
.qr-start:focus-visible, .qr-pc button:focus-visible, .qr-phone button:focus-visible,
.qr-phone .input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.qr-pc {
  margin-top: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  min-width: 0;
}
.qr-pc[hidden] { display: none; }
.qr-pc-title { margin: 0; font-weight: 700; font-size: 16px; }
/* the QR keeps its own white quiet zone on a dark page, so phones can always read it */
.qr-img {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  background: #FFFFFF;
  border-radius: 8px;
  image-rendering: pixelated;
}
.qr-img[hidden] { display: none; }
.qr-code { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: 0.12em; }
.qr-code:empty { display: none; }
.qr-code-hint { max-width: 32em; overflow-wrap: anywhere; }
.qr-bar { width: 100%; height: 8px; accent-color: var(--accent); }
.qr-bar[hidden] { display: none; }
.qr-status { margin: 0; font-size: 14px; color: var(--muted); }
.qr-status.bad { color: var(--danger); font-weight: 700; }
.qr-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; }
.qr-actions > button { flex: 1 1 140px; }
.qr-actions > button[hidden] { display: none; }
.qr-pc-note { max-width: 32em; }

.qr-phone { display: grid; gap: 12px; min-width: 0; }
.qr-phone .title:focus { outline: none; }
.qr-device { margin: 0; font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.qr-when { font-variant-numeric: tabular-nums; }
.qr-warn {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  background: var(--danger-bg);
  color: var(--danger);
  font-weight: 700;
  font-size: 15px;
  word-break: keep-all;
}
.qr-phone .qr-actions { justify-content: stretch; }
.qr-others { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.qr-others .hint { word-break: keep-all; }
.qr-phone .form { display: grid; gap: 12px; }