/* Printable cards: one card per US Letter page. All sizes are in inches so print matches the screen. */
@page { size: 8.5in 11in; margin: 0.4in; }

body { background: #e9d5b0; }

.toolbar {
  position: sticky; top: 0; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: #5a2d0c; color: #fff6e3; font-size: 16px;
}
.toolbar strong { font-size: 20px; margin-right: 12px; }
.toolbar-buttons { display: flex; gap: 14px; align-items: center; }
.toolbar a { color: var(--gold); }
.toolbar button {
  padding: 10px 22px; border: 3px solid var(--gold); border-radius: 12px;
  background: var(--orange); color: #fff; font-weight: 700; font-size: 18px; cursor: pointer;
}

.card {
  width: 7.7in; height: 10.2in; margin: 24px auto; padding: 0.1in 0.1in 0;
  background: #fff; box-shadow: 0 4px 18px rgba(74, 44, 23, 0.35);
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
}
.card-title {
  display: flex; align-items: center; justify-content: center; gap: 0.14in;
  height: 1.45in; margin: 0;
  font-size: 0.92in; font-weight: 700; letter-spacing: 0.03in; line-height: 1;
  color: var(--rust); white-space: nowrap;
}
.card-title .deco { width: 0.8in; height: 0.8in; flex: none; }
.card-title .deco.tilt-left { transform: rotate(-18deg); }
.card-title .deco.tilt-right { transform: rotate(18deg); }

.grid {
  display: grid; grid-template-columns: repeat(5, 1.48in); grid-template-rows: repeat(5, 1.48in);
  border: 0.04in solid var(--ink); border-radius: 0.12in; overflow: hidden;
}
.cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 0.015in solid var(--ink); padding: 0.04in; background: #fff;
}
.cell .pic { width: 1.02in; height: 1.02in; flex: none; }
.cell .name {
  margin-top: 0.02in; font-size: 0.17in; font-weight: 600; line-height: 1; white-space: nowrap; color: #000;
}
.cell.free { background: #fff1c9; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cell.free .pic { width: 0.9in; height: 0.9in; }
.cell.free .name { font-size: 0.26in; font-weight: 700; letter-spacing: 0.02in; }

.card-foot {
  width: 7.48in; margin-top: 0.14in;
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.2in; font-weight: 500; color: #000;
}
.card-foot .number { font-size: 0.3in; font-weight: 700; }
.card-foot .name-line { flex: 1; margin-right: 0.3in; border-bottom: 0.02in solid #000; padding-bottom: 0.03in; }

@media print {
  body { background: #fff; }
  .toolbar { display: none; }
  .card {
    margin: 0 auto; padding-top: 0; box-shadow: none; height: 10.1in;
    break-after: page; page-break-after: always; break-inside: avoid; page-break-inside: avoid;
  }
  .card:last-child { break-after: auto; page-break-after: auto; }
}