/* Printable cards (cards.html). Sheets are laid out in millimetres on A4 and previewed scaled down. */

[hidden] { display: none !important; }
.print-only { display: none; }

.doc-header h1 { margin-bottom: 0.75rem; }

/* ---------- Choosing sets: list on the left, "Your selection" on the right (design: Cards board) ---------- */
.card-options { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start; margin: 2.5rem 0 4rem; }
.card-options fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.sets {
  flex: 999 1 36rem; background: var(--surface-card); border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--border); overflow: hidden;
}
.sets-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem;
  padding: 1rem 1.75rem; background: var(--surface-sunken);
}
.sets-title { font-weight: 600; color: var(--text-heading); }
.set-buttons { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.link-button {
  min-height: 48px; padding: 0 1rem; border: 0; border-radius: var(--r-pill); background: transparent;
  color: var(--link); font: inherit; font-size: 1.25rem; font-weight: 500; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px;
}
.link-button:hover { color: var(--link-hover); background: var(--surface-card); }
.link-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.set-list { list-style: none; padding: 0; margin: 0; }
.set-item { border-top: 1px solid var(--border); }
.set-label {
  display: flex; align-items: center; gap: 1.1rem; min-height: 76px; padding: 0.9rem 1.75rem; cursor: pointer;
}
.set-label:hover { background: #f8fafe; }
.set-label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
.set-label input, .option input[type="checkbox"] { flex: none; width: 28px; height: 28px; margin: 0; accent-color: var(--focus); cursor: pointer; }
.set-bar { flex: none; width: 14px; align-self: stretch; min-height: 44px; border-radius: var(--r-pill); background: var(--bar); }
.set-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.set-title { font-weight: 600; color: var(--text-heading); }
.set-meta { color: var(--text-muted); font-size: 1.25rem; line-height: 1.4; }
.set-pill {
  flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 0.9rem;
  border-radius: var(--r-pill); background: var(--surface-sunken); color: var(--text-meta);
  font-size: 1.25rem; font-weight: 500; white-space: nowrap;
}
.set-label:has(input:not(:checked)) .set-bar { opacity: 0.35; }
@media (max-width: 760px) {
  .sets-head, .set-label { padding-left: 1.1rem; padding-right: 1.1rem; }
  .set-label { flex-wrap: wrap; }
  .set-pill { display: none; }
}

.selection {
  flex: 1 1 27rem; max-width: 32rem; display: flex; flex-direction: column; gap: 1rem;
  background: var(--surface-sunken); border-radius: var(--r-card); padding: 1.75rem;
}
@media (max-width: 760px) { .selection { max-width: none; padding: 1.5rem 1.25rem; } }
.selection h2 { margin: 0; font-size: 1.5rem; line-height: 1.3; }
.selection-count { margin: 0; }
.selection-count strong { font-weight: 600; color: var(--text-heading); }
.print-actions { display: flex; flex-direction: column; gap: 0.75rem; }
.print-actions .button {
  width: 100%; min-height: 60px; justify-content: center; padding: 0 1.25rem;
  font-size: 1.25rem; font-weight: 500; line-height: 1.2; white-space: nowrap;
}
/* Very narrow phones: let a long label wrap rather than run out of the button. */
@media (max-width: 400px) { .print-actions .button { white-space: normal; text-align: center; } }
.print-btn::before, .download-btn::before {
  content: ""; width: 22px; height: 22px; flex: none; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.print-btn { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.7 13.8a42 42 0 0 1 10.6 0M6.3 18H5.2A2.2 2.2 0 0 1 3 15.8V9.5c0-1.1.8-2 1.8-2.2a48 48 0 0 1 14.4 0c1 .2 1.8 1.1 1.8 2.2v6.3a2.2 2.2 0 0 1-2.2 2.2h-1.1M17.2 7V3.4c0-.6-.5-1.1-1.1-1.1H7.9c-.6 0-1.1.5-1.1 1.1V7M6.3 18l-.2 2.5c0 .7.5 1.2 1.1 1.2h9.6c.7 0 1.2-.6 1.1-1.2l-.2-2.5M6.3 18l.4-4.2m11 4.2-.4-4.2'/%3E%3C/svg%3E"); }
.download-btn { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3'/%3E%3C/svg%3E"); }
.print-summary { margin: 0; font-size: 1.25rem; color: var(--text-meta); }
.options { display: grid; gap: 0.6rem; }
.options legend { font-weight: 600; color: var(--text-heading); margin-bottom: 0.5rem; padding: 0; }
.option {
  display: flex; gap: 0.9rem; align-items: flex-start; min-height: 60px; padding: 0.9rem 1.1rem;
  background: var(--surface-card); border-radius: var(--r-panel); cursor: pointer; font-size: 1.25rem; line-height: 1.45;
}
.option:hover { box-shadow: inset 0 0 0 2px var(--focus); }
.option input[type="checkbox"] { margin-top: 0.1rem; }
.option-number { align-items: center; justify-content: space-between; cursor: default; }
.option-number:hover { box-shadow: none; }
.option-number input {
  width: 6rem; min-height: 52px; padding: 0.3rem 0.9rem; font: inherit; color: var(--text-heading);
  background: #fff; border: 0; box-shadow: inset 0 0 0 1px var(--ring); border-radius: var(--r-field);
}
.option-number input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.print-tips { margin: 0; padding-left: 1.3rem; font-size: 1.25rem; line-height: 1.5; color: var(--text-muted); }
.print-tips li + li { margin-top: 0.4rem; }
.button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Screen preview ---------- */
.preview h2 { margin-top: 0; }
.sheets {
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start;
  padding: 1.5rem; background: var(--surface-sunken); border-radius: var(--r-band); overflow-x: auto;
}
.sheets:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.empty-note { margin: 0; padding: 1rem; }

.sheet {
  position: relative; flex: none; width: 210mm; height: 296.5mm; overflow: hidden;
  background: #fff; color: #151618; box-shadow: 0 2px 12px rgba(21, 22, 24, 0.12);
  font-family: var(--font-body); line-height: 1.25;
  zoom: 0.5;
}
@media (max-width: 700px) { .sheet { zoom: 0.4; } }
.cutlines { position: absolute; inset: 0; width: 210mm; height: 297mm; pointer-events: none; }

/* ---------- Cards (design: CardsA4 board) ---------- */
/* Not ".card": that is the site's rounded box style. Each cut cell holds a rounded frame. */
.cut-card { position: absolute; box-sizing: border-box; padding: 3.7mm; display: flex; }
.card-frame {
  position: relative; flex: 1; min-width: 0; overflow: hidden; border-radius: 4.75mm;
  box-shadow: inset 0 0 0 0.3mm #e3e4e8; padding: 5mm 6mm 8mm;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
}
.card-text { margin: 0; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; overflow-wrap: break-word; hyphens: manual; }
.size-l .card-text { font-size: 26pt; }
.size-m .card-text { font-size: 18pt; line-height: 1.25; }
.size-s .card-text { font-size: 14.5pt; line-height: 1.3; }
.card-big .card-frame { justify-content: flex-start; padding-top: 12mm; }
.card-big .card-text { font-size: 40pt; }
/* Long single words (Dutch place names) must fit on one line. */
.card-big.word-long .card-text { font-size: 32pt; }
.card-big.word-xlong .card-text { font-size: 26pt; }
.card-big .card-frame::after {
  content: ""; position: absolute; left: 9mm; right: 9mm; bottom: 18mm; height: 35mm;
  border: 0.3mm dotted #9a9a9a; border-radius: 3mm;
}
.card-set {
  position: absolute; left: 6mm; right: 6mm; bottom: 2.6mm;
  font-size: 7.5pt; color: #545558; text-align: center; letter-spacing: 0.02em;
}
.has-group .card-frame { padding-top: 13mm; }
.has-group::before {
  content: ""; position: absolute; left: 3.7mm; right: 3.7mm; top: 3.7mm; height: 3.7mm; z-index: 1;
  background: var(--group); border-radius: 4.75mm 4.75mm 0 0;
}
.card-group {
  position: absolute; top: 6.2mm; left: 4.8mm; right: 4mm; display: flex; align-items: center; gap: 2mm;
  text-align: left; font-size: 11pt; font-weight: 600; line-height: 1; color: var(--group);
}
.card-group::before { content: ""; width: 2.6mm; height: 2.6mm; border-radius: 50%; background: var(--group); flex: none; }
.sheet-foot {
  position: absolute; left: 16mm; right: 12mm; top: 288.5mm; display: flex; gap: 10mm;
  font-size: 8pt; line-height: 1; color: #545558;
}
.sheet-foot span:last-child { margin-left: auto; }

/* ---------- Desk cards (A5 tent folded from A4; design: DeskCardA5 board) ---------- */
.tent-half {
  position: absolute; left: 0; right: 0; height: 148.25mm; box-sizing: border-box; padding: 14mm 16mm 14mm;
  display: flex; flex-direction: column; justify-content: center; gap: 5mm;
}
.tent-top { top: 0; transform: rotate(180deg); }
.tent-bottom { top: 148.25mm; }
.tent-title { margin: 0; font-weight: 600; font-size: 26pt; color: #151618; letter-spacing: -0.01em; line-height: 1.1; }
.tent-recipe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1fr 1.25fr; gap: 3.5mm; }
.tent-half:has(.tent-recipe) { padding-left: 12mm; padding-right: 12mm; }
.tent-box { position: relative; border-radius: 4.25mm; box-shadow: inset 0 0 0 0.3mm #e3e4e8; overflow: hidden; }
.tent-box::before { content: ""; display: block; height: 2.2mm; background: var(--box); }
.tent-box-sep { color: #fff; } /* keeps "Goal – …" as one line of text for copying and screen readers */
.tent-box-name, .tent-box-text { display: block; }
.tent-box-name { margin: 3.5mm 4mm 0; font-size: 15.5pt; white-space: nowrap; font-weight: 600; color: var(--box-text); line-height: 1.2; }
.tent-box-text { margin: 1.5mm 4mm 5mm; font-size: 15pt; line-height: 1.3; }
.tent-list { margin: 0; padding: 0; list-style: none; font-size: 16pt; line-height: 1.35; }
.tent-list li + li { margin-top: 2.5mm; }
.tent-list li, .card-text { text-wrap: pretty; } /* avoid a single word alone on the last line */
ol.tent-list { counter-reset: rule; }
ol.tent-list li { counter-increment: rule; position: relative; padding-left: 11mm; }
ol.tent-list li::before {
  content: counter(rule); position: absolute; left: 0; top: 0.4mm; width: 7.5mm; height: 7.5mm; border-radius: 50%;
  background: #151618; color: #fff; font-size: 12pt; font-weight: 600; line-height: 7.5mm; text-align: center;
}
.tent-after { font-size: 17pt; font-weight: 500; }
.tent-foot { position: absolute; left: 16mm; right: 16mm; bottom: 7mm; margin: 0; font-size: 8pt; color: #545558; }
.corner { position: absolute; width: 4.75mm; height: 4.75mm; border: 0 solid #151618; }
.corner-tl { left: 2.6mm; top: 2.6mm; border-left-width: 0.3mm; border-top-width: 0.3mm; }
.corner-tr { right: 2.6mm; top: 2.6mm; border-right-width: 0.3mm; border-top-width: 0.3mm; }
.corner-bl { left: 2.6mm; bottom: 2.6mm; border-left-width: 0.3mm; border-bottom-width: 0.3mm; }
.corner-br { right: 2.6mm; bottom: 2.6mm; border-right-width: 0.3mm; border-bottom-width: 0.3mm; }
.fold-line { position: absolute; left: 0; right: 0; top: 148.25mm; border-top: 0.3mm dashed #707175; }
.fold-line span {
  position: absolute; left: 9.5mm; top: -3.1mm;
  background: #fff; padding: 0 2mm; font-size: 9pt; line-height: 6mm; color: #545558; font-weight: 500;
}

/* ---------- Answer sheet ---------- */
.sheet-answers { flex: 1 1 100%; }
.answers-placeholder {
  max-width: 34rem; padding: 1.25rem 1.5rem; background: var(--surface-card); border: 2px dashed var(--ring); border-radius: var(--r-card);
}
.answers-placeholder p { margin: 0; }
.answers-placeholder-title { font-weight: 600; margin-bottom: 0.4rem !important; }

/* ---------- Print: only the sheets, at real size ---------- */
@media print {
  @page { size: A4 portrait; margin: 0; }
  @page answers { size: A4 portrait; margin: 15mm; }
  html, body { background: #fff !important; margin: 0; padding: 0; }
  .site-header, .site-footer, .skip-link, .screen-only, .card-options { display: none !important; }
  main, main.wrap { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .sheets { display: block; padding: 0; background: none; border-radius: 0; overflow: visible; }
  .sheet { zoom: 1; box-shadow: none; margin: 0; break-inside: avoid; }
  .sheet + .sheet, .sheet + .sheet-answers { break-before: page; }
  .print-only { display: block; }
  /* The answer sheet can run over several pages; give every one of them a margin. */
  .sheet-answers { page: answers; }
  .answers-body { padding: 0; font-size: 11pt; color: #000; }
  .answers-body h2 { font-size: 18pt; margin: 0 0 2mm; }
  .answers-body h3 { font-size: 13pt; margin: 6mm 0 2mm; break-after: avoid; }
  .answers-note { margin: 0 0 4mm; font-style: italic; }
  .answers-table { width: 100%; border-collapse: collapse; }
  .answers-table th, .answers-table td { border: 0.3mm solid #000; padding: 1.5mm 2mm; text-align: left; vertical-align: top; }
  .answers-table tr { break-inside: avoid; }
}