/* Card rendering. Shared by the on-screen preview and the printed output.
   All physical sizes are set inline by app.js in inches so screen and print match. */

.page {
  background: #fff;
  position: relative;
  box-sizing: border-box;
  display: grid;
  color: #111;
}

.card {
  position: relative;
  box-sizing: border-box;
  border: 2px solid var(--c-border);
  border-radius: 0.08in;
  background: var(--c-bg);
  color: var(--c-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  font-family: var(--f-body);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.card-title {
  font-family: var(--f-title);
  font-weight: 800;
  text-align: center;
  line-height: 1.05;
  color: var(--c-title);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  padding: 0 0.05in;
  box-sizing: border-box;
  text-wrap: balance;
}
.card-sub {
  text-align: center;
  color: var(--c-sub);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  line-height: 1.1;
}
.card-headers {
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  width: var(--side);
  gap: var(--cell-border);
  box-sizing: border-box;
}
.card-headers span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-family: var(--f-title);
  color: var(--c-hdr);
  background: var(--c-hdr-bg);
  border-radius: 0.06in 0.06in 0 0;
  line-height: 1;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  width: var(--side);
  height: var(--side);
  border: var(--cell-border) solid var(--c-grid);
  background: var(--c-grid);
  gap: var(--cell-border);
  box-sizing: border-box;
}
.cell {
  background: var(--c-cell);
  color: var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4%;
  overflow: hidden;
  overflow-wrap: normal;
  hyphens: manual;
  line-height: 1.1;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
}
.cell.tight { overflow-wrap: anywhere; }
.cell.free {
  background: var(--c-free);
  color: var(--c-free-text);
  font-weight: 900;
  font-family: var(--f-title);
  letter-spacing: 0.02em;
}
.cell.has-img { flex-direction: column; padding: 3%; gap: 2%; }
.cell img { max-width: 100%; max-height: 100%; object-fit: contain; flex: 1 1 auto; min-height: 0; display: block; }
.cell .cap { flex: 0 0 auto; font-size: 0.55em; line-height: 1.05; }
.card-foot {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: var(--c-sub);
  margin-top: auto;
  box-sizing: border-box;
  letter-spacing: 0.01em;
}
.card-foot .brand { opacity: 0.85; }
.card.pro-locked::after {
  content: 'PRO THEME \2014 unlock to print';
  position: absolute; inset: auto 0 38% 0; transform: rotate(-12deg);
  text-align: center; font: 900 0.34in/1 system-ui, sans-serif; color: rgba(200, 30, 60, 0.35);
  pointer-events: none;
}

/* Call sheet */
.callsheet { box-sizing: border-box; display: flex; flex-direction: column; font-family: var(--f-body, system-ui, sans-serif); color: #111; }
.callsheet h2 { margin: 0; font: 800 0.3in/1.1 var(--f-title, system-ui, sans-serif); }
.callsheet p { margin: 0.06in 0 0.16in; font-size: 0.14in; color: #444; }
.callsheet ol { margin: 0; padding: 0; list-style: none; display: grid; grid-auto-flow: column; column-gap: 0.25in; }
.callsheet li { display: flex; align-items: center; gap: 0.08in; font-size: 0.15in; border-bottom: 1px dotted #bbb; box-sizing: border-box; min-width: 0; }
.callsheet li .idx { color: #888; width: 0.3in; flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; }
.callsheet li .box { width: 0.16in; height: 0.16in; border: 1.5px solid #333; border-radius: 0.02in; flex: 0 0 auto; }
.callsheet li img { width: 0.26in; height: 0.26in; object-fit: contain; flex: 0 0 auto; }
.callsheet li .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.callsheet li .pfx { font-weight: 800; }

/* Fonts */
.card[data-font="clean"]   { --f-title: "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif; --f-body: "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif; }
.card[data-font="rounded"] { --f-title: "Comic Sans MS", "Chalkboard SE", "Comic Neue", "Marker Felt", sans-serif; --f-body: "Comic Sans MS", "Chalkboard SE", "Comic Neue", "Marker Felt", sans-serif; }
.card[data-font="serif"]   { --f-title: Georgia, "Times New Roman", serif; --f-body: Georgia, "Times New Roman", serif; }
.card[data-font="bold"]    { --f-title: Impact, "Arial Black", "Franklin Gothic Heavy", sans-serif; --f-body: "Segoe UI", system-ui, Arial, sans-serif; }
.card[data-font="bold"] .card-title { font-weight: 400; letter-spacing: 0.03em; }
.card[data-font="bold"] .card-headers span { font-weight: 400; }

/* Themes: free */
.card[data-theme="classic"] {
  --c-border: #111; --c-bg: #fff; --c-text: #111; --c-title: #111; --c-sub: #555;
  --c-grid: #111; --c-cell: #fff; --c-free: #e9e9e9; --c-free-text: #111; --c-hdr: #fff; --c-hdr-bg: #111;
}
.card[data-theme="pastel"] {
  --c-border: #d98aa8; --c-bg: #fff7fa; --c-text: #4a2a36; --c-title: #b84a74; --c-sub: #8a5a6c;
  --c-grid: #e7b9c9; --c-cell: #fff; --c-free: #f7d6e2; --c-free-text: #b84a74; --c-hdr: #fff; --c-hdr-bg: #d98aa8;
}
.card[data-theme="sunny"] {
  --c-border: #e39b1f; --c-bg: #fffaf0; --c-text: #3d2a05; --c-title: #c76b00; --c-sub: #8a6a2a;
  --c-grid: #f0c36a; --c-cell: #fff; --c-free: #ffe39a; --c-free-text: #a85600; --c-hdr: #3d2a05; --c-hdr-bg: #ffd166;
}
.card[data-theme="ocean"] {
  --c-border: #1f7a8c; --c-bg: #f3fbfd; --c-text: #0b2f3a; --c-title: #0e5a6a; --c-sub: #3b6e7a;
  --c-grid: #8ec9d6; --c-cell: #fff; --c-free: #cdeef5; --c-free-text: #0e5a6a; --c-hdr: #fff; --c-hdr-bg: #1f7a8c;
}
.card[data-theme="meadow"] {
  --c-border: #3f8f4a; --c-bg: #f5fbf4; --c-text: #15301a; --c-title: #2e7a39; --c-sub: #4f7a55;
  --c-grid: #a7d6ad; --c-cell: #fff; --c-free: #d8f0da; --c-free-text: #2e7a39; --c-hdr: #fff; --c-hdr-bg: #3f8f4a;
}
/* Themes: Pro */
.card[data-theme="chalkboard"] {
  --c-border: #e8e2cf; --c-bg: #1f3b2f; --c-text: #f6f1e3; --c-title: #f6f1e3; --c-sub: #cfd8c9;
  --c-grid: #e8e2cf; --c-cell: #1f3b2f; --c-free: #e8e2cf; --c-free-text: #1f3b2f; --c-hdr: #1f3b2f; --c-hdr-bg: #e8e2cf;
}
.card[data-theme="festive"] {
  --c-border: #b3161d; --c-bg: #fffdf7; --c-text: #1d3b24; --c-title: #b3161d; --c-sub: #2f6b3a;
  --c-grid: #2f6b3a; --c-cell: #fff; --c-free: #fde8e8; --c-free-text: #b3161d; --c-hdr: #fff; --c-hdr-bg: #b3161d;
}
.card[data-theme="spooky"] {
  --c-border: #2b1b3d; --c-bg: #fff6ea; --c-text: #2b1b3d; --c-title: #e36414; --c-sub: #6a4c93;
  --c-grid: #2b1b3d; --c-cell: #fff; --c-free: #2b1b3d; --c-free-text: #ffb703; --c-hdr: #ffb703; --c-hdr-bg: #2b1b3d;
}
.card[data-theme="kraft"] {
  --c-border: #7a5230; --c-bg: #f3e9d8; --c-text: #3b2a1a; --c-title: #5a3a1e; --c-sub: #7a5c3f;
  --c-grid: #a98564; --c-cell: #faf4ea; --c-free: #e3cfae; --c-free-text: #5a3a1e; --c-hdr: #f3e9d8; --c-hdr-bg: #7a5230;
}