/*
 * Shared styles for the A4 printables in /vorlagen/.
 *
 * These pages live in public/ (copied as-is, not bundled by Vite), so they
 * can't import src/styles/tokens.css. The few screen colors below mirror
 * tokens.css (--bg, --ink, --ink-soft, --teal); the sheets themselves
 * are black line art on white so they print cheaply and can be coloured in.
 * Fonts are the same self-hosted Fredoka/Nunito files (latin subset, OFL).
 */
@font-face { font-family: 'Fredoka'; font-weight: 500; font-display: block; src: url('fonts/fredoka-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 600; font-display: block; src: url('fonts/fredoka-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 400; font-display: block; src: url('fonts/nunito-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: block; src: url('fonts/nunito-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: block; src: url('fonts/nunito-latin-800-normal.woff2') format('woff2'); }

@page { size: A4; margin: 0; }

:root {
  --screen-bg: #E8F2F7;   /* tokens.css --bg */
  --screen-ink: #16324A;  /* tokens.css --ink */
  --screen-soft: #46627A; /* tokens.css --ink-soft */
  --screen-accent: #0F6E7A; /* tokens.css --teal, as on the Ausdrucken page */
  --print-ink: #1A1A1A;
  --print-soft: #444444;
  --cut: #555555;
  --display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --body: 'Nunito', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--screen-bg);
  color: var(--print-ink);
  font-family: var(--body);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ---------- Screen-only toolbar ---------- */

.toolbar {
  position: sticky; top: 0; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 10px 16px;
  background: var(--screen-bg);
  border-bottom: 2px dashed #B5CCDA;
  color: var(--screen-ink);
  font: 800 15px var(--body);
}
.toolbar a { color: var(--screen-accent); display: inline-flex; align-items: center; min-height: 44px; }
.toolbar .spacer { flex: 1; }
.toolbar button,
.toolbar .pdf {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 18px;
  border: none; border-radius: 999px;
  background: var(--screen-ink); color: #fff;
  font: 800 15px var(--body);
  text-decoration: none;
  cursor: pointer;
}
.toolbar button { background: var(--screen-accent); }
.toolbar :focus-visible { outline: 3px solid var(--screen-accent); outline-offset: 3px; }

.sheets { padding: 20px 12px 40px; display: flex; flex-direction: column; align-items: center; gap: 20px; }

/* ---------- The A4 sheet ---------- */

.sheet {
  width: 210mm; height: 297mm;
  padding: 12.7mm;
  background: #fff;
  box-shadow: 0 2px 0 rgba(22, 50, 74, 0.12), 0 8px 24px rgba(22, 50, 74, 0.12);
  display: flex; flex-direction: column; gap: 5.8mm;
  overflow: hidden;
  /* Fit the sheet to narrow screens; vorlagen.js sets --fit. */
  zoom: var(--fit, 1);
}

.sheet-head { height: 24mm; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.sheet-head h1 { margin: 0; font: 600 40px/1.05 var(--display); }
.sheet-head .en { font: 500 22px var(--display); color: var(--print-soft); }
.sheet-head .titles { display: flex; flex-direction: column; gap: 4px; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand img { height: 56px; width: auto; display: block; }
.brand span { font: 600 20px var(--display); }
.brand small { font: 500 14px var(--display); color: var(--print-soft); }

.sheet-foot { height: 9.5mm; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 13px; color: var(--print-soft); }
.sheet-foot strong { font-weight: 700; }

.sheet-body { position: relative; flex: 1; min-height: 0; }

/* Cutting grid: outer dashed frame, dashed lines between cells. */
.cut-grid {
  position: relative;
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 3), minmax(0, 1fr));
  border-top: 2px dashed var(--cut);
  border-left: 2px dashed var(--cut);
}
.cut-grid > .cell {
  border-right: 2px dashed var(--cut);
  border-bottom: 2px dashed var(--cut);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-width: 0; min-height: 0;
}
.cut-grid > .scissors { position: absolute; left: -13px; top: -15px; background: #fff; }

.cell svg.pic { width: 200px; height: 162px; }
.cell .de { font: 600 40px/1 var(--display); }
.cell .en { font: 500 24px var(--display); color: var(--print-soft); }

/* Memory cards: picture only, word small underneath. */
.memory .cell svg.pic { width: 230px; height: 186px; }
.memory .cell .de { font-size: 26px; }
.memory .cell .en { font-size: 18px; }

/* Line-art defaults for every drawing. */
.art { fill: #fff; stroke: var(--print-ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.art .ink { fill: var(--print-ink); stroke: none; }
.art .line { fill: none; }
.colour .art { stroke-width: 6; }

/* Colouring page */
.name-line { display: flex; align-items: flex-end; gap: 10px; font: 700 18px var(--body); color: var(--print-soft); }
.name-line span.blank { flex: 1; border-bottom: 2px solid var(--print-soft); height: 1.2em; }
.colour .sheet-body svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Instructions strip */
.steps { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.steps li { list-style: none; display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.35; }
.steps ol { margin: 0; padding: 0; display: contents; }
.steps .num {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 2.5px solid var(--print-ink);
  display: flex; align-items: center; justify-content: center;
  font: 600 17px var(--display);
}
.steps .en { display: block; color: var(--print-soft); font-size: 13px; }

@media print {
  body { background: #fff; }
  .toolbar { display: none; }
  .sheets { padding: 0; gap: 0; display: block; }
  .sheet { box-shadow: none; zoom: 1; break-after: page; }
  .sheet:last-child { break-after: auto; }
}

/* Lacing cards: big shape, holes placed by vorlagen.js. */
.lace svg.pic { width: auto; height: 84%; max-height: 100mm; }
.lace .shape { stroke-width: 6; }
.lace .hole { fill: #fff; stroke: var(--print-ink); stroke-width: 3; }
.lace { flex-direction: row !important; gap: 24px !important; }
.lace .de, .lace .en { writing-mode: horizontal-tb; }
.lace .label { display: flex; flex-direction: column; gap: 6px; }

/* Finger puppets (drawn in millimetres: stroke widths are set in the SVG). */
.puppet-sheet .sheet-head h1 { font-size: 34px; }
.puppets { position: absolute; inset: 0; width: 100%; height: 100%; }
.puppets .tab { fill: #DDDDDD; stroke-dasharray: 1.6 1.2; }
.puppets text { stroke: none; fill: var(--print-ink); text-anchor: middle; }
.puppets .band { font: 600 4.6px var(--display); }
.puppets .tabtext { font: 700 3px var(--body); fill: var(--print-soft); dominant-baseline: middle; }
.puppets .ink { stroke: none; }
.puppets .art { stroke-width: 0.9; }