/* ============================================================
   Print sheets — laid out in millimetres so what comes out of the
   printer is the size it claims to be. A4 with 10mm margins leaves
   190 x 277mm of usable paper.
   ============================================================ */

.sheets {
  --card-w: 63mm;
  --card-h: 45mm;
  --cols: 3;
  font-family: "Public Sans", system-ui, sans-serif;
  color: #000;
}

.sheet {
  width: 190mm;
  background: #fff;
  margin: 0 auto;
}

/* ---------- fold-over and double-sided grids ---------- */
.pr-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--card-w));
  justify-content: start;
}

/* a fold unit is two card heights: question on top, answer below it
   upside down, so folding the bottom half up behind puts the answer
   on the back the right way round */
.unit {
  width: var(--card-w);
  height: calc(var(--card-h) * 2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.unit-half {
  height: var(--card-h);
  padding: 3.5mm 4mm;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.unit-half.answer { transform: rotate(180deg); }

/* one card per cell, for double-sided printing */
.single {
  width: var(--card-w);
  height: var(--card-h);
  padding: 3.5mm 4mm;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.guides .unit,
.guides .single { border: 0.3mm dashed #9aa; }
.guides .unit-half:first-child { border-bottom: 0.3mm dotted #bcc; }

.pr-front {
  font-family: "Familjen Grotesk", "Trebuchet MS", sans-serif;
  font-weight: 700;
  line-height: 1.2;
}
.pr-back { line-height: 1.3; }
/* printed cards keep typed line breaks too */
.pr-front, .pr-back, .pr-hint { white-space: pre-wrap; }
.pr-hint { color: #556; font-style: italic; margin-top: 1.5mm; }
.pr-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 2mm;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #889;
  margin-bottom: 1.2mm;
}

/* type scales with the card, and shrinks again when the text is long */
.size-small { font-size: 2.9mm; }
.size-medium { font-size: 3.3mm; }
.size-large { font-size: 3.8mm; }
.long { font-size: 0.85em; }
.very-long { font-size: 0.72em; }

/* ---------- revision list ---------- */
.pr-list-title {
  font-family: "Familjen Grotesk", "Trebuchet MS", sans-serif;
  font-size: 5.5mm;
  margin: 0 0 1mm;
}
.pr-list-sub {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 2.6mm;
  color: #667;
  margin: 0 0 4mm;
}
table.pr-list {
  width: 100%;
  border-collapse: collapse;
  font-size: 3.1mm;
}
table.pr-list th {
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 2.4mm;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #667;
  border-bottom: 0.4mm solid #333;
  padding: 1.5mm 2mm;
}
table.pr-list td {
  vertical-align: top;
  padding: 1.6mm 2mm;
  border-bottom: 0.2mm solid #dde;
}
table.pr-list td.n { color: #99a; width: 8mm; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 2.5mm; }
table.pr-list td.f { font-weight: 700; width: 38%; }
table.pr-list tr { break-inside: avoid; page-break-inside: avoid; }

/* ---------- on screen ---------- */
@media screen {
  /* Two columns: choices on the left, what you'll get on the right.
     The preview is a real A4 sheet scaled down, so the container has to
     be told its height — a transform doesn't change layout size. */
  .pr-wrap { max-width: 1180px; }
  .pr-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 500px;
    grid-template-areas:
      "left  right"
      "money right";
    column-gap: 34px;
    row-gap: 18px;
    align-items: start;
  }
  .pr-left { grid-area: left; min-width: 0; }
  .pr-summary { grid-area: money; margin: 0; min-width: 0; }
  .pr-right {
    grid-area: right;
    min-width: 0;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
  }
  .pr-right-inner > .cat-head:first-child { margin-top: 0; }
  .pr-left { padding-bottom: 10px; }

  /* The preview folds away. This uses a class rather than the hidden
     attribute or <details>, because both would also hide it from the
     printer — and the sheets in here ARE the printout. */
  .pr-collapsed { display: none; }

  .pr-preview { margin-top: 22px; }
  .pr-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 12px 15px;
    border: 1px solid var(--rule);
    border-radius: 14px;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
  }
  .pr-toggle:hover { border-color: var(--mark-deep); color: var(--mark-deep); }
  .pr-caret {
    display: inline-block;
    transition: transform 0.16s ease;
    color: var(--faint);
    font-size: 0.8rem;
  }
  .pr-toggle[aria-expanded="true"] .pr-caret { transform: rotate(90deg); }
  .pr-toggle-label { flex: 1; }
  .pr-toggle-count {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--faint);
  }
  .pr-preview-body { padding-top: 14px; }

  /* An A4 sheet is 794px wide whatever we scale it to — a transform
     doesn't change the layout box. print.js measures the space available
     and sets --preview-scale to match, so it can never push the page
     sideways on a narrow screen. */
  .sheets {
    --preview-scale: 0.60;
    margin: 0 0 20px;
    padding: 0;
    max-width: 100%;
    min-width: 0;
    height: calc(297mm * var(--preview-scale) + 6px);
    overflow: hidden;
  }
  .sheet {
    box-shadow: 0 2px 6px rgba(25, 25, 51, 0.06), 0 18px 38px -20px rgba(25, 25, 51, 0.4);
    border-radius: 4px;
    padding: 10mm;
    width: 210mm;
    min-height: 297mm;
    transform: scale(var(--preview-scale));
    transform-origin: top left;
  }
  .sheet ~ .sheet { display: none; }

  /* the off-screen copy used to measure row heights before paginating */
  .pr-measure {
    position: absolute !important;
    left: -20000px;
    top: 0;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: hidden;
  }
  /* Measure against the *printed* box, not the on-screen one: no scaling, no
     min-height (which would report a full page for an empty header), and the
     190mm content width the paper actually gives, so text wraps identically. */
  .pr-measure .sheet {
    transform: none;
    box-shadow: none;
    border-radius: 0;
    min-height: 0 !important;
    width: 190mm !important;
    padding: 0 !important;
  }
  .pr-measure .sheet ~ .sheet { display: block; }
  .sheets:empty { display: none; }
}

/* one column on anything narrower than a laptop */
@media screen and (max-width: 1040px) {
  /* one column, and the print button goes last — after you've read how to
     print and had a look at the preview */
  .pr-split {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "left"
      "right"
      "money";
    row-gap: 14px;
  }
  .pr-right {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

/* ---------- the actual printing ---------- */
@media print {
  @page {
    size: A4 portrait;
    margin: 10mm;
  }
  html, body {
    background: #fff !important;
    margin: 0;
    padding: 0;
  }
  .screen-only { display: none !important; }
  /* the sheets now live inside the page layout, so every wrapper between
     them and the paper has to stop constraining them */
  .wrap, .pr-wrap, .pr-split, .pr-left, .pr-right, .pr-right-inner {
    display: block;
    position: static;
    max-width: none;
    max-height: none;
    width: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    gap: 0;
  }
  .sheets { display: block; margin: 0; padding: 0; height: auto; overflow: visible; }
  .sheet {
    padding: 0;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
    break-after: page;
    page-break-after: always;
  }
  .sheet:last-child { break-after: auto; page-break-after: auto; }
  .unit, .single { break-inside: avoid; page-break-inside: avoid; }
}