/* ==========================================================================
   Name Magic – English Activities Generator
   Created by Yahel Ox
   --------------------------------------------------------------------------
   SCREEN  : "Ink & Paper" notebook look - ruled paper, ink lines, one coral
             accent, hand-written Patrick Hand face (self-hosted, offline-safe).
   PRINT   : strictly black on white, A4, no UI. Sheets keep the rounded kid
             face (Comic Sans stack) because that is what pupils read best.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --ink:#23303F;
  --ink-soft:#5A6784;
  --coral:#FF6B6B;
  --coral-soft:#FFE3E3;
  --coral-mist:#FFF3F0;
  --paper:#FFFEFA;
  --bg:#FBF6EA;
  --card-line:#E4DDCB;
  --sketch:#B9C4CE;
  --rule:rgba(120,160,200,.28);
  --radius:6px;
  --card-shadow:3px 3px 0 rgba(35,48,63,.12);
  /* Kid-friendly stack for the PRINTED sheets - ships with macOS / Windows,
     so printing needs no download and works offline. */
  --font-kid:"Comic Sans MS","Chalkboard SE","Comic Neue","Segoe Print","Bradley Hand",
             "Arial Rounded MT Bold","Arial Hebrew",Verdana,Arial,sans-serif;
  /* Hand-written face for the app UI; Hebrew falls back to the kid stack. */
  --font-ui:"Patrick Hand",var(--font-kid);
  --font-he:var(--font-ui);
  --font-en:var(--font-kid);
  --font-fun:var(--font-kid);
}
@font-face{
  font-family:"Patrick Hand";
  src:url("fonts/PatrickHand.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-ui);
  font-size:18px;
  color:var(--ink);
  background:var(--bg);
  -webkit-text-size-adjust:100%;
}

/* ---------- top bar: a strip of ruled notebook paper ---------- */
.topbar{
  background-color:var(--paper);
  background-image:repeating-linear-gradient(to bottom,
    transparent 0 30px, var(--rule) 30px 31px);
  border-bottom:2px solid var(--ink);
  position:relative;
}
.topbar::before{           /* the red margin line of a notebook */
  content:"";position:absolute;top:0;bottom:0;inset-inline-start:58px;
  width:2px;background:var(--coral);opacity:.55;
}
.topbar-inner{
  max-width:1240px;margin:0 auto;
  padding:20px 24px;padding-inline-start:86px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:22px}
.brand-logo{height:84px;width:auto;display:block}
.brand h1{margin:0;font-size:42px;font-weight:400;line-height:1.05;color:var(--ink);letter-spacing:.5px}
.brand p{margin:2px 0 0;color:var(--ink-soft);font-size:18px;font-weight:400}
.topbar-tools{display:flex;gap:12px;flex-wrap:wrap}
.ghost-btn{
  font-family:inherit;font-size:17px;font-weight:400;cursor:pointer;
  background:var(--paper);border:2px solid var(--ink);color:var(--ink);
  padding:10px 20px;border-radius:12px;
}
#helpBtn{background:var(--ink);color:var(--paper)}
#langBtn{min-width:92px}
.ghost-btn:active{transform:translate(1px,1px)}

.help{
  max-width:1240px;margin:16px auto 0;padding:18px 22px;
  background:var(--paper);border:2px dashed var(--sketch);border-radius:var(--radius);
}
.help-title{margin:0 0 8px;font-size:20px;border-bottom:2px dashed var(--sketch);padding-bottom:6px}
.help ol{margin:0;padding-inline-start:22px;line-height:1.85;font-size:17px}
.help li{margin-bottom:6px}

/* ---------- layout ---------- */
.layout{
  max-width:1240px;margin:0 auto;padding:26px 18px 40px;
  display:grid;grid-template-columns:340px 1fr;gap:26px;align-items:start;
}
@media (max-width:980px){ .layout{grid-template-columns:1fr} }
/* Grid items default to min-width:auto, which would let the fixed-width A4 sheet
   stretch the whole column past the window. Pin it so the preview can scale instead. */
.layout > *{min-width:0}

.card{
  background:var(--paper);border:2px solid var(--ink);border-radius:var(--radius);
  padding:20px;margin-bottom:22px;box-shadow:var(--card-shadow);
}
.card h2{
  margin:0 0 14px;font-size:22px;font-weight:400;
  border-bottom:2px dashed var(--sketch);padding-bottom:6px;
  display:flex;align-items:center;gap:8px;
}
.ico{display:none}
.lbl{display:block;font-size:15px;font-weight:400;color:var(--ink-soft);margin-bottom:6px}

textarea{
  width:100%;font-family:var(--font-ui);font-size:18px;line-height:28px;
  padding:6px 14px;border:2px solid var(--card-line);border-radius:var(--radius);
  background-color:var(--paper);
  background-image:repeating-linear-gradient(to bottom,
    transparent 0 27px, var(--rule) 27px 28px);
  background-attachment:local;
  color:#3C4A59;resize:vertical;
}
textarea:focus{outline:3px solid var(--coral-soft);border-color:var(--ink)}
#enNames{background-color:#F7FAFF;border-color:#C9D6E8}

.row-btns{display:flex;gap:10px;margin:12px 0 4px;flex-wrap:wrap}
.mini-btn{
  font-family:inherit;font-weight:400;font-size:15px;cursor:pointer;
  background:var(--paper);border:2px solid var(--ink);border-radius:999px;
  padding:7px 16px;color:var(--ink);
}
.mini-btn:hover{background:var(--coral-soft)}
.mini-btn:active{transform:translate(1px,1px)}
.mini-btn.tiny{font-size:14px;padding:6px 12px;border-color:var(--sketch)}
/* comfortable touch targets on phones and tablets */
@media (pointer:coarse){
  .mini-btn{min-height:44px}
  .mini-btn.tiny{min-height:40px}
  .chk{min-height:44px}
  select{min-height:44px}
}
#sampleBtn{background:var(--coral-soft)}
.file-hint{margin:2px 0 0;font-size:13.5px}
textarea.dropping{border-color:var(--coral);outline:3px solid var(--coral-soft)}

.translit-box{margin-top:16px;padding-top:14px;border-top:2px dashed var(--card-line)}
.translit-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.count{margin:8px 0 0;font-size:15px;font-weight:400;color:var(--coral)}

/* ---------- levels ---------- */
.levels{display:grid;gap:10px}
.level{
  text-align:start;font-family:inherit;cursor:pointer;
  background:var(--paper);border:2px solid var(--card-line);border-radius:var(--radius);
  padding:10px 14px;display:grid;gap:2px;color:var(--ink-soft);
}
.level b.stars{
  font-family:"Apple Symbols","Segoe UI Symbol","Arial Unicode MS",Arial,sans-serif;
  font-size:24px;line-height:1.15;letter-spacing:4px;color:var(--ink-soft);
}
@supports (-webkit-text-stroke:1px black){
  .level b.stars{color:var(--paper);-webkit-text-stroke:1.1px var(--ink-soft)}
  .level.is-on b.stars{color:var(--coral);-webkit-text-stroke:1.1px var(--ink)}
}
.level span{
  font-size:17px;font-weight:400;color:inherit;
  /* CEFR labels like "A1+" must not flip to "+A1" in the RTL interface */
  direction:ltr;unicode-bidi:isolate;
}
.level em{font-size:14.5px;font-style:normal;color:var(--ink-soft)}
.level:hover{border-color:var(--ink-soft)}
.level.is-on{
  border-color:var(--ink);background:var(--coral-mist);color:var(--ink);
  box-shadow:var(--card-shadow);
}

/* ---------- tabs: ink underline ---------- */
.tabs{
  display:flex;gap:24px;flex-wrap:wrap;align-items:flex-end;
  border-bottom:2px solid var(--ink);margin-bottom:18px;padding:0 4px;
}
.tab{
  font-family:inherit;font-size:21px;font-weight:400;cursor:pointer;color:var(--ink-soft);
  background:none;border:0;border-bottom:4px solid transparent;margin-bottom:-2px;
  padding:8px 4px;display:flex;align-items:center;gap:8px;
}
.tab span{display:none}
.tab i{font-style:normal}
.tab:hover{color:var(--ink)}
.tab.is-on{color:var(--ink);border-bottom-color:var(--coral)}

/* ---------- options ---------- */
.options{
  background:var(--paper);border:2px solid var(--ink);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:16px;box-shadow:var(--card-shadow);
}
.opt-row{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.instr-row{margin-top:14px;padding-top:12px;border-top:2px dashed var(--card-line)}
.opt-group{display:flex;flex-direction:column;gap:8px}
.opt-group>.opt-title{font-size:16px;font-weight:400;color:var(--ink-soft)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chk{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--paper);border:2px solid var(--card-line);border-radius:999px;
  padding:7px 14px;font-size:15.5px;font-weight:400;
}
.chk input{width:18px;height:18px;accent-color:var(--coral);cursor:pointer;margin:0}
.chk:has(input:checked){border-color:var(--ink);background:var(--coral-soft)}
select,input[type="number"]{
  font-family:inherit;font-size:17px;font-weight:400;color:var(--ink);
  padding:9px 12px;border:2px solid var(--ink);border-radius:8px;background:var(--paper);
}
select:focus,input:focus{outline:3px solid var(--coral-soft)}
.note{font-size:14.5px;color:var(--coral);font-weight:400;margin:10px 0 0}

/* ---------- actions ---------- */
.actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.big-btn{
  font-family:inherit;font-size:20px;font-weight:400;cursor:pointer;
  background:var(--ink);color:var(--paper);border:0;border-radius:10px;
  padding:13px 26px;box-shadow:3px 3px 0 var(--coral);
}
.big-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--coral)}
.big-btn.alt{
  background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:none;
}
.big-btn.alt:active{transform:translate(1px,1px)}
.big-btn[hidden]{display:none}
.hint{font-size:15px;font-weight:400;color:var(--coral)}

.preview-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.preview-head h2{margin:0 0 10px;font-size:22px;font-weight:400}
.preview-head small{font-weight:400;color:var(--ink-soft);font-size:15px}
.pages{font-size:15px;font-weight:400;color:var(--ink)}

.preview-wrap{
  background:#F5EFE2;border:2px dashed var(--sketch);border-radius:var(--radius);
  padding:18px;overflow-x:auto;
}
/* The sheet is always a true A4 width; the whole preview is scaled down to fit
   the column, so what you see on screen is exactly what the printer produces. */
.preview{display:flex;flex-direction:column;align-items:center;gap:18px;zoom:var(--pv,1)}
.preview .sheet{box-shadow:4px 4px 0 rgba(35,48,63,.15)}
.empty{
  background:var(--paper);border:2px dashed var(--coral);border-radius:var(--radius);
  padding:34px 20px;text-align:center;font-size:18px;font-weight:400;color:var(--ink-soft);
  width:100%;
}

.appfoot{
  text-align:center;padding:22px 16px 34px;font-size:16px;color:var(--ink-soft);
}
.appfoot b{color:var(--coral)}

/* ==========================================================================
   THE SHEETS  (A4 pages – identical on screen preview and on paper)
   Everything here is pure black on white.
   ========================================================================== */
.print-area{display:none}

.sheet{
  width:210mm;
  background:#fff;
  color:#000;
  padding:12mm 14mm;
  font-family:var(--font-en);
  direction:ltr;
  text-align:left;
  display:flex;
  flex-direction:column;
  min-height:297mm;
}


.sheet-body{flex:1 1 auto}

.sheet-head{
  border-bottom:2px solid #000;padding-bottom:4mm;margin-bottom:6mm;
  position:relative;padding-inline-end:30mm;   /* keep clear of the logo */
}
.sheet-logo{
  position:absolute;top:0;right:0;
  width:26mm;height:auto;
}
.sheet-title{font-size:20pt;font-weight:700;margin:0 0 2mm;letter-spacing:.3px}
.sheet-sub{font-size:10.5pt;margin:0 0 4mm;font-family:"Apple Symbols","Segoe UI Symbol","Arial Unicode MS",var(--font-kid)}
.sheet-fields{display:flex;gap:8mm;font-size:11pt;flex-wrap:wrap}
.sheet-fields span{flex:1 1 0;min-width:28mm;border-bottom:1px solid #000;padding-bottom:1.5mm;white-space:nowrap}


.instr{
  font-size:12pt;font-weight:700;margin:0 0 5mm;
  border:1.5px solid #000;padding:3mm 4mm;
}
.instr-he{
  display:block;margin-top:2mm;padding-top:2mm;border-top:1px dotted #000;
  direction:rtl;text-align:right;font-size:11pt;font-weight:400;
  font-family:"Arial Hebrew",Arial,var(--font-kid);
}
.instr .num{font-weight:700;margin-inline-end:2mm}

/* --- generic exercise lists --- */
.ex-list{list-style:none;margin:0;padding:0}
.ex-list li{
  font-size:13pt;padding:3.2mm 0;border-bottom:1px dotted #000;
  display:flex;align-items:baseline;gap:3mm;
}
.ex-list li:last-child{border-bottom:0}
.ex-n{font-weight:700;min-width:7mm}
.nm{font-weight:700;letter-spacing:.6px}
.blank{flex:1 1 auto;border-bottom:1px solid #000;min-width:18mm;height:5mm}
.box{
  display:inline-block;width:9mm;height:9mm;border:1.5px solid #000;
  vertical-align:middle;margin-inline-start:2mm;
}
.opts{display:inline-flex;gap:5mm;font-size:14pt;font-weight:700;letter-spacing:1px}
.opts em{font-style:normal;border:1.2px solid #000;border-radius:50%;width:9mm;height:9mm;
  display:inline-flex;align-items:center;justify-content:center}

/* --- scaffolding: worked example, word bank, sentence starters --- */
.example{border:1.5px dashed #000;padding:3mm 4mm;margin:0 0 5mm}
.ex-tag{
  display:inline-block;font-size:8pt;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  border:1px solid #000;padding:.4mm 2mm;margin-bottom:2.5mm;
}
.ex-body{font-size:12.5pt;line-height:1.75;display:block}
.ex-note{display:inline-block;font-size:10pt;font-style:italic;margin-inline-start:4mm}
.example .arrow{margin:0 4mm;letter-spacing:-1px}
.filled-in{font-weight:700;border-bottom:1px solid #000;padding:0 3mm}
.picked{border:1.4px solid #000;border-radius:8mm;padding:0 2.5mm;font-weight:700}
.wordbank{border:1px solid #000;padding:2.5mm 3.5mm;margin:0 0 5mm;font-size:11pt;line-height:1.7}
.wordbank b{letter-spacing:1.2px;text-transform:uppercase;font-size:9.5pt}
.starter-row{display:flex;align-items:baseline;gap:2.5mm;margin:1.5mm 0 4mm}
.starter{font-weight:700;white-space:nowrap}
.box.filled{
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12pt;
}
.opts em.done{border-width:2.6px}
.line.filled{height:auto;min-height:7mm;padding-bottom:1mm;font-weight:700;letter-spacing:.5px}

.write-lines{margin:0;padding:0;list-style:none}
.write-lines li{margin-bottom:4.5mm}
.line{display:block;border-bottom:1px solid #000;height:7mm}
.line.short{width:60%}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 12mm}
.match{display:grid;grid-template-columns:1fr 1fr;gap:4mm 14mm;font-size:13pt}
.match div{border-bottom:1px dotted #000;padding-bottom:2mm;display:flex;justify-content:space-between}
.match .dot{width:4mm;height:4mm;border:1.2px solid #000;border-radius:50%}

.sent{font-size:12.5pt;line-height:2.4;margin:0 0 3mm}
.sent u{text-decoration:none;border-bottom:1px solid #000;display:inline-block;min-width:28mm}

.text-block{font-size:12pt;line-height:1.85;border:1.5px solid #000;padding:4mm 5mm;margin-bottom:5mm}

/* --- stories --- */
.story{border:1.5px solid #000;padding:4mm 5mm;margin-bottom:5mm;break-inside:avoid}
.story h3{margin:0 0 2mm;font-size:13pt;letter-spacing:.4px;text-transform:uppercase}
.story p{margin:0;font-size:12pt;line-height:1.8}
.story .task{margin-top:3mm;padding-top:2.5mm;border-top:1px dotted #000;font-size:10.5pt;font-style:italic}

/* --- word search --- */
.ws{width:100%;container-type:inline-size}
.ws table{width:100%;table-layout:fixed;border-collapse:collapse;border:2px solid #000}
.ws td{border:1px solid #000;padding:0}
.ws .c{
  display:grid;place-items:center;aspect-ratio:1;
  font-family:"Courier New",monospace;font-weight:700;
  font-size:calc(48cqw / var(--n));
  line-height:1;
}
.ws-list{
  margin:6mm 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);gap:2.5mm 4mm;font-size:11.5pt;
}
@media (max-width:520px){ .ws-list{grid-template-columns:repeat(2,1fr)} }
.ws-list li{display:flex;align-items:center;gap:2.5mm;letter-spacing:.6px}
.ws-list i{width:4mm;height:4mm;border:1.2px solid #000;display:inline-block;flex:none}

/* --- bingo --- */
.bingo{margin-bottom:8mm;break-inside:avoid;container-type:inline-size}
.bingo-title{
  text-align:center;font-size:16pt;font-weight:700;letter-spacing:6px;
  border:2px solid #000;padding:2mm;margin-bottom:3mm;
}
.bingo table{width:100%;table-layout:fixed;border-collapse:collapse;border:2.5px solid #000}
.bingo td{border:1.5px solid #000;padding:0}
.bingo .bc{
  display:grid;place-items:center;aspect-ratio:1;padding:1mm;text-align:center;
  font-weight:700;letter-spacing:.4px;word-break:break-word;overflow:hidden;
  font-size:calc(15cqw / var(--n));
  line-height:1.15;
}
.bingo .free .bc{font-style:italic;letter-spacing:2px}
.bingo-foot{text-align:center;font-size:9.5pt;margin:2mm 0 0}

/* --- tic-tac-toe --- */
.ttt-grid{display:grid;grid-template-columns:1fr 1fr;gap:6mm 8mm}
.ttt{container-type:inline-size;break-inside:avoid}
.ttt table{width:100%;table-layout:fixed;border-collapse:collapse;border:2.5px solid #000}
.ttt td{border:1.5px solid #000;padding:0}
.ttt .ttt-c{
  display:grid;place-items:center;aspect-ratio:1;padding:1mm;text-align:center;
  font-weight:700;word-break:break-word;line-height:1.1;
  font-size:calc(13cqw / var(--n));
}
.ttt-foot{font-size:9pt;text-align:center;margin-top:1.5mm}

/* --- secret code --- */
.codekey{
  display:grid;grid-template-columns:repeat(13,1fr);gap:0;
  border:2px solid #000;margin-bottom:6mm;
}
.codekey .k{
  border:.6px solid #000;text-align:center;padding:1mm 0;line-height:1.2;
}
.codekey .k b{display:block;font-size:11pt}
.codekey .k span{display:block;font-size:9pt}
.codeword{
  font-family:"Courier New",monospace;font-weight:700;font-size:13pt;letter-spacing:.5px;
}
.bonus{border:1.5px dashed #000;padding:3mm 4mm;margin-top:5mm;font-size:11.5pt}
.bonus b{margin-inline-end:2mm}

/* --- guess who --- */
.guess-wrap{display:grid;grid-template-columns:1fr 1fr;gap:8mm}
.guess-card{border:2px solid #000;padding:3mm;break-inside:avoid}
.guess-label{
  text-align:center;font-weight:700;letter-spacing:3px;font-size:10.5pt;
  border-bottom:1.5px solid #000;padding-bottom:1.5mm;margin-bottom:3mm;
}
.guess-names{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:1.5mm}
.guess-names span{
  border:1px solid #000;text-align:center;padding:1.6mm .5mm;
  font-size:9.5pt;font-weight:700;word-break:break-word;
}
.guess-foot{margin-top:3mm;font-size:9pt;text-align:center;line-height:1.9}

/* --- criss-cross --- */
.cc{width:100%;container-type:inline-size;margin-bottom:5mm}
.cc table{width:100%;table-layout:fixed;border-collapse:collapse}
.cc td{padding:0;border:0}
.cc td.on{border:1.2px solid #000}
.cc .cc-c{
  display:grid;place-items:center;aspect-ratio:1;position:relative;
  font-family:"Courier New",monospace;font-weight:700;
  font-size:calc(46cqw / var(--n));line-height:1;
}
.cc .cc-c i{
  position:absolute;top:1%;left:5%;font-style:normal;font-weight:700;
  font-family:var(--font-kid);font-size:calc(24cqw / var(--n));line-height:1;
}
.clue-cols{display:grid;grid-template-columns:1fr 1fr;gap:6mm}
.clues h4{
  margin:0 0 2mm;font-size:11pt;letter-spacing:2px;text-transform:uppercase;
  border-bottom:1.5px solid #000;padding-bottom:1mm;
}
.clues ol{margin:0;padding:0;list-style:none}
.clues li{font-size:10pt;line-height:1.75}

/* --- board game --- */
.boardgame{container-type:inline-size}
.boardgame table{width:100%;table-layout:fixed;border-collapse:collapse;border:2.5px solid #000}
.boardgame td{border:1.4px solid #000;padding:0}
.boardgame .bg-c{
  aspect-ratio:1;padding:1.5mm;display:flex;flex-direction:column;gap:1mm;
  font-size:calc(8cqw / var(--n));line-height:1.25;overflow:hidden;
}
.boardgame .bg-c i{font-style:normal;font-weight:700;font-size:calc(11cqw / var(--n))}
.boardgame td.start .bg-c,.boardgame td.finish .bg-c{
  align-items:center;justify-content:center;text-align:center;
}
.boardgame td.start span,.boardgame td.finish span{
  font-weight:700;letter-spacing:2px;font-size:calc(12cqw / var(--n));
}
.boardgame td.event span{font-style:italic;font-weight:700}
.bg-note{font-size:9.5pt;font-style:italic;margin:3mm 0 0}

/* --- flashcards --- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:0}
.cards.big{grid-template-columns:1fr}
.card-cell{
  border:2px dashed #000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:4mm;text-align:center;min-height:0;
}
.cards .card-cell{aspect-ratio:1.35}
.cards.big .card-cell{aspect-ratio:1.9}
.card-name{
  font-family:var(--font-fun);
  font-size:34pt;font-weight:700;letter-spacing:1px;word-break:break-word;line-height:1.1;
}
.cards.big .card-name{font-size:52pt}
.card-sub{font-family:var(--font-en);font-size:9.5pt;margin-top:3mm;letter-spacing:3px}

/* ==========================================================================
   PRINT – black & white only, A4, credit on every sheet
   ========================================================================== */
@page{ size:A4; margin:12mm 14mm; }

@media print{
  html,body{background:#fff !important;margin:0 !important;padding:0 !important}
  .app{display:none !important}
  .print-area{display:block !important}

  /* Hard rule: nothing prints in colour or on a tinted background. */
  .print-area, .print-area *{
    color:#000 !important;
    background:#fff !important;
    background-image:none !important;
    box-shadow:none !important;
    text-shadow:none !important;
    border-color:#000 !important;
    outline-color:#000 !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
    filter:none !important;
  }

  .sheet{
    width:auto !important;
    min-height:0;
    padding:0 !important;          /* @page margins do the spacing */
    box-shadow:none !important;
    break-inside:auto;
  }
  .sheet + .sheet{ break-before:page; }
}