/* Generated by tools/workbook/build.js from tools/workbook/cheat-sheet.html and cheat-sheet.web.css; edit those, not this file. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: block;
  font-weight: 100 900;
  src: url(/fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: block;
  font-weight: 100 900;
  src: url(/fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
.cheat-sheet {
    --ink: #1a1f2b; --muted: #454c5a; --paper: #ffffff; --line: #cfc9bc; --desk: #e9e6df;
    --brand: #1d4ed8; --teal: #0b6f66; --amber: #8f5a0e; --coral: #b23f27; --green: #22652f; --purple: #5b3fb0;
    --soft-brand: #eef3ff; --soft-teal: #e6f4f1; --soft-amber: #fbf2e4; --soft-coral: #fdeeea;
}
.cheat-sheet * { box-sizing: border-box; }
.cheat-sheet { color: var(--ink); font: 8.6pt/1.4 Inter, system-ui, sans-serif; }
.cheat-sheet .page { width: 210mm; height: 297mm; margin: 12mm auto; background: var(--paper); position: relative; overflow: hidden; box-shadow: 0 2px 14px rgba(0,0,0,.18); padding: 9mm 10mm 10mm; page-break-after: always; break-after: page; }
.cheat-sheet .head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1.2mm solid var(--brand); padding-bottom: 2mm; margin-bottom: 3mm; }
.cheat-sheet .head .head-title { margin: 0; font-size: 17pt; white-space: nowrap; font-weight: 800; letter-spacing: -.01em; }
.cheat-sheet .head .head-title span { color: var(--brand); }
.cheat-sheet .foot .logo { height: 9mm; vertical-align: middle; margin: -3.5mm 1mm -3.5mm -1.5mm; }
.cheat-sheet .foot span:first-child { font-size: 9.5pt; font-weight: 400; color: #106fe2; }
.cheat-sheet .foot .licence { margin-left: 2.5mm; font-size: 7pt; font-weight: 400; color: var(--muted); }
.cheat-sheet .foot .copyright { margin-right: 1.5mm; font-size: 9.5pt; font-weight: 400; }
.cheat-sheet .head p { margin: 0; text-align: right; color: var(--muted); font-size: 8pt; }
.cheat-sheet .head p b { color: var(--ink); font-size: 8.5pt; }
.cheat-sheet .flow { columns: 3; column-gap: 4mm; }
.cheat-sheet .box { break-inside: avoid; margin: 0 0 3mm; border-radius: 2mm; background: #fff; border: .3mm solid var(--line); overflow: hidden; }
.cheat-sheet .box h2 { margin: 0; padding: 1.3mm 2.4mm; font-size: 8.6pt; font-weight: 800; color: #fff; background: var(--color, var(--brand)); }
.cheat-sheet .box .body { padding: 1.8mm 2.4mm; }
.cheat-sheet .box ul { margin: 0; padding-left: 3.4mm; }
.cheat-sheet .box li { margin: .3mm 0; }
.cheat-sheet .box p { margin: .6mm 0; }
.cheat-sheet .num { font-weight: 800; white-space: nowrap; }
.cheat-sheet .mini { width: 100%; border-collapse: collapse; }
.cheat-sheet .mini td { padding: .7mm 1mm; border-bottom: .25mm solid var(--line); vertical-align: top; }
.cheat-sheet .mini td:first-child { font-weight: 800; white-space: nowrap; width: 1%; }
.cheat-sheet .box.trap { background: var(--soft-coral); border: .45mm dashed var(--coral); }
.cheat-sheet .box.pzw { background: var(--soft-amber); border: .45mm solid var(--amber); }
.cheat-sheet .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1mm; margin: .6mm 0 1.2mm; }
.cheat-sheet .steps span { background: var(--soft-teal); border-radius: 1.2mm; padding: 1mm; text-align: center; font-weight: 700; font-size: 8pt; border: .3mm solid var(--teal); }
.cheat-sheet .calendar { display: grid; grid-template-columns: 34mm repeat(12, 1fr); align-items: center; row-gap: .7mm; font-size: 8.2pt; }
.cheat-sheet .calendar .month { text-align: center; font-weight: 700; color: var(--ink); font-size: 7.8pt; border-left: .25mm solid var(--line); }
.cheat-sheet .calendar .name { font-weight: 700; padding-right: 2mm; }
.cheat-sheet .calendar .track { grid-column: 2 / 14; position: relative; height: 4.4mm; background: #f0f0ee; border-radius: 1mm; }
.cheat-sheet /* Month lines are elements, .cheat-sheet not a gradient: in print a gradient this fine vanishes on some rows. */
.calendar .track i { position: absolute; top: 0; bottom: 0; width: .25mm; background: var(--line); }
.cheat-sheet .calendar .bar { position: absolute; top: 0; bottom: 0; background: var(--coral); border-radius: 1mm; color: #fff; font-size: 7.6pt; font-weight: 700; display: flex; align-items: center; padding: 0 1.2mm; white-space: nowrap; overflow: hidden; }
.cheat-sheet .calendar .outside { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; font-size: 7.6pt; font-weight: 700; color: var(--coral); white-space: nowrap; }
.cheat-sheet .foot { position: absolute; left: 10mm; right: 10mm; bottom: 5mm; display: flex; justify-content: space-between; color: var(--muted); font-size: 7.6pt; }
.cheat-sheet .two { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; }
.cheat-sheet .three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4mm; }
.cheat-sheet .sizes { display: grid; grid-template-columns: 12mm 1fr; gap: .4mm 2mm; }
.cheat-sheet .sizes b { font-weight: 800; }
.cheat-sheet .numbers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1mm; }
.cheat-sheet .numbers span { background: var(--soft-brand); border-radius: 1.2mm; padding: .3mm 1.4mm; font-size: 7.2pt; line-height: 1.15; color: var(--muted); border: .3mm solid #c9d6f5; }
.cheat-sheet .numbers b { display: block; font-size: 9pt; line-height: 1.2; color: var(--ink); }
.cheat-sheet .note { color: var(--muted); font-size: 7.6pt; margin-top: 1mm !important; }
@page { size: A4; margin: 0; }
.cheat-sheet .box.pzw li { margin: .6mm 0; }
/* The site's additions to the cheat sheet (build.js appends this file to the scoped template styles): the sheets
   sit on the page as paper, a phone gets them in one column, and print gives the two A4 sheets alone, as in the PDF. */
.cheat-sheet-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.cheat-sheet { margin-top: 24px; }
.cheat-sheet .page { margin: 0 auto 24px; max-width: 100%; }
/* The site gives headings in its content a line height of its own; the sheet titles keep the sheet's. */
.app-body .cheat-sheet .head-title { line-height: inherit; }
.cheat-sheet-terms { max-width: 210mm; margin: 8px auto 0; color: var(--kw-text-secondary); font-size: 13px; line-height: 1.55; }
.cheat-sheet-terms h2 { margin: 0 0 6px; color: var(--kw-text); font-size: 15px; }
.cheat-sheet-terms p { margin: 0 0 10px; }
.cheat-sheet-terms b { color: var(--kw-text); }
.cheat-sheet-terms ul { margin: 0; padding-left: 22px; }
.cheat-sheet-terms li { margin: 4px 0; }

/* An A4 sheet with the page padding no longer fits below this width. "screen" keeps print, which is narrower than
   this in CSS pixels, on the A4 layout. */
@media screen and (max-width: 860px) {
    .cheat-sheet .page { width: auto; height: auto; overflow: visible; padding: 4mm 3mm; margin: 0 0 16px; zoom: 1.3; }
    .cheat-sheet .head { flex-direction: column; align-items: flex-start; gap: 2mm; }
    .cheat-sheet .head .head-title { white-space: normal; }
    .cheat-sheet .head p { text-align: left; }
    .cheat-sheet .flow { columns: 1; }
    /* The template sets some grids and columns inline. */
    .cheat-sheet .two, .cheat-sheet .three { grid-template-columns: 1fr !important; gap: 3mm; }
    .cheat-sheet .three { margin-top: 3mm !important; }
    .cheat-sheet .box.pzw .body { columns: 1 !important; }
    .cheat-sheet .numbers { grid-template-columns: repeat(2, 1fr); }
    .cheat-sheet .calendar { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: .5mm; }
    .cheat-sheet .calendar > span:first-child { display: none; }
    .cheat-sheet .calendar .month:nth-child(2) { border-left: 0; }
    .cheat-sheet .calendar .name { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 2mm; padding: 1mm 0 .2mm; }
    .cheat-sheet .calendar .name::after { content: attr(data-dates); color: var(--coral); font-size: 7.8pt; font-weight: 700; white-space: nowrap; }
    .cheat-sheet .calendar .track { grid-column: 1 / -1; height: 3.2mm; }
    .cheat-sheet .calendar .bar, .cheat-sheet .calendar .outside { font-size: 0; }
    .cheat-sheet .foot { position: static; margin-top: 3mm; flex-direction: column; align-items: flex-start; gap: .8mm; }
    .cheat-sheet .foot span:first-child, .cheat-sheet .foot .copyright { font-size: 8.5pt; }
    .cheat-sheet .foot .licence { display: block; margin: .5mm 0 0; }
}

@media print {
    body > :not(main), .cheat-sheet-intro, .cheat-sheet-terms { display: none !important; }
    html, body { background: #fff !important; }
    body { display: block; min-height: 0; }
    .app-body, .app-body-content { display: block; max-width: none !important; margin: 0 !important; padding: 0 !important; }
    .cheat-sheet { margin: 0; }
    .cheat-sheet .page { margin: 0; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .cheat-sheet .page:last-child { break-after: auto; }
}