/* =========================================================================
   QR codes. The symbol is the object here, so it leads every card.
   ========================================================================= */

.qrgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.qrcard {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  color: inherit;
  min-width: 0;
}
.qrcard:hover { border-color: var(--brand); text-decoration: none; }

/* The symbol always sits on white, whatever the page is doing. A dark themed
   QR that a scanner cannot read is worse than no QR. */
.qrthumb {
  flex: none;
  width: 76px; height: 76px;
  background: #fff;
  border-radius: var(--r-sm);
  overflow: hidden;
  display: grid; place-items: center;
}
.qrthumb svg { width: 100%; height: 100%; display: block; }

.qrcardbody {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0; flex: 1;
}
.qrcardbody b { font-weight: 650; }
.qrcardbody .det {
  color: var(--ink-3); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qrfoot {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: 4px; flex-wrap: wrap;
}
.qrfoot .mono { font-size: 12px; color: var(--ink-3); }

/* ---------------------------------------------------------------- detail */
.qrdetail {
  display: flex;
  gap: var(--s5);
  align-items: flex-start;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: var(--s5);
  margin-bottom: var(--s4);
}
.qrbig {
  flex: none;
  background: #fff;
  padding: var(--s3);
  border-radius: var(--r);
  line-height: 0;
}
.qrmeta { flex: 1; min-width: 260px; }
.qrmeta .metatable { margin-bottom: var(--s3); }

/* ------------------------------------------------------- scans by day
   Thirty bars, one per day, empty days included. The gap is the part worth
   seeing, so a day with nothing still gets a mark on the baseline. */
.qrdays {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 56px;
  padding: 4px var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: var(--s2);
  overflow-x: auto;
}
.qrday { flex: 1 1 6px; min-width: 6px; display: flex; align-items: flex-end; }
.qrday i {
  display: block; width: 100%;
  background: var(--line);
  border-radius: 2px 2px 0 0;
}
.qrday.hit i { background: var(--brand); }

@media (max-width: 600px) {
  .qrdetail { padding: var(--s4); gap: var(--s4); justify-content: center; }
  .qrmeta { min-width: 0; }
  .qrgrid { grid-template-columns: 1fr; }
}

/* =========================================================================
   The print sheet.

   This page ends up on paper, so it is measured in inches and it commits to
   black on white. The screen theme has no say: a QR printed in a dark theme
   is a QR nobody can scan.
   ========================================================================= */

.prwrap {
  background: #fff;
  color: #111;
  min-height: 100vh;
  padding: var(--s5);
}

.prbar {
  max-width: 900px;
  margin: 0 auto var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid #ddd;
}
.prhead {
  display: flex; align-items: center; gap: var(--s3);
  flex-wrap: wrap; margin-bottom: var(--s3);
}
.prhead b { font-size: 17px; }
.prhead .mono { color: #666; font-size: 13px; }

.prform {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  align-items: flex-end;
}
.prfield { display: flex; flex-direction: column; gap: 4px; }
.prfield > span {
  font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; color: #666; font-weight: 600;
}
.prfield select {
  padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px;
  background: #fff; color: #111; font: inherit; font-size: 15px;
}
.prcheck { flex-direction: row; align-items: center; gap: 8px; height: 38px; }
.prcheck input { width: 18px; height: 18px; }
.prcheck > span { text-transform: none; letter-spacing: 0; font-size: 14px; color: #111; }

.prnote { color: #666; font-size: 13.5px; margin: var(--s3) 0 0; max-width: 62ch; line-height: 1.5; }
.prwarn {
  color: #8a1c1c; background: #fdeeee; border: 1px solid #f3caca;
  border-radius: 6px; padding: 10px 12px; font-size: 14px;
  margin: var(--s3) 0 0; max-width: 62ch;
}

/* One cell per copy. --qs is the finished width of the symbol on paper, so
   the SVG is stretched to it and the page prints at the size that was asked
   for rather than at whatever the browser felt like. */
.sheet {
  display: flex; flex-wrap: wrap;
  gap: 0.25in;
  align-items: flex-start;
  max-width: 900px;
  margin: 0 auto;
}
.cell {
  width: var(--qs, 2in);
  text-align: center;
  page-break-inside: avoid;
  break-inside: avoid;
}
.cell.cut { border: 1px dashed #bbb; padding: 0.1in; }
.cell .qi { line-height: 0; background: #fff; }
.cell svg { width: 100%; height: auto; display: block; }
.cell .cap {
  font-size: 9pt; line-height: 1.3; color: #111;
  margin-top: 0.05in; word-break: break-word;
}

@media print {
  @page { margin: 0.4in; }
  .prbar { display: none; }
  .prwrap { padding: 0; min-height: 0; background: #fff; }
  .sheet { max-width: none; margin: 0; }
  .cell.cut { border-color: #ccc; }
}