/*
  QR generator: the few things app.css has no equivalent for - the white plate
  the code sits on, the string readout, and the saved-codes list.
  Everything else on the page reuses .layout, .block, .setting-row, .stats,
  .notice, .btn and .cropframe as they come.
*/

/* app.css styles .hint inside .setting (a checkbox row) but not inside
   .setting-row, and every control on this page is a .setting-row. */
.setting-row > .hint {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-3);
  margin-top: 4px;
}

/* The plate is white and the modules are black in both themes on purpose.
   A scanner has no dark mode, and an inverted QR code will not read. */
.qr-plate {
  background: #ffffff;
  border: 1px solid var(--rule);
  margin: 22px auto;
  padding: 18px;
  width: fit-content;
  max-width: 100%;
  min-width: 220px;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-plate.is-empty { background: var(--card); }

.qr-plate canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

.qr-empty {
  margin: 0;
  max-width: 26ch;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
}

/* The exact string that got encoded - worth showing, because a wrong UPI ID
   looks identical to a right one once it is a grid of squares. */
.qr-value {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 9px 11px;
  overflow-wrap: anywhere;
  margin-bottom: 26px;
}

/* ---------- print-sheet settings ---------- */

.qr-sheet {
  border-top: 1px solid var(--rule-2);
  margin-top: 18px;
  padding-top: 10px;
}
.qr-sheet .btn { margin-top: 10px; }

/* ---------- saved codes ---------- */

.qr-saved-note {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--ink-3);
  max-width: 60ch;
}

.qr-saved-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.qr-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.qr-history li {
  background: var(--card);
  padding: 11px 13px;
  display: grid;
  gap: 7px;
}

.qr-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.qr-row-head b { font-size: 13.5px; font-weight: 600; }
.qr-row-when {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.qr-row-value {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
  overflow-wrap: anywhere;
  /* Two lines is enough to recognise a code by; the rest is noise in a list. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.qr-row-actions { display: flex; gap: 8px; }

.qr-empty-row {
  font-size: 13px;
  color: var(--ink-3);
}

@media (max-width: 480px) {
  .qr-plate { padding: 12px; min-width: 0; }
}