/*
 * Print page: one or more cards per sheet. Named pages pick the paper size per
 * sheet type; on screen the sheets are scaled down to fit.
 */
@page a5 { size: A5 portrait; margin: 0; }
@page a6 { size: A6 portrait; margin: 0; }
@page a4-landscape { size: A4 landscape; margin: 0; }
@page a4-portrait { size: A4 portrait; margin: 0; }

@layer components {
  .print-page {
    background-color: var(--color-surface-sunken);
  }

  .print-toolbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--gutter);
    background-color: color-mix(in oklab, var(--color-bg) 90%, transparent);
    backdrop-filter: blur(12px);
    border-block-end: var(--border-width) solid var(--color-border);
  }

  .print-hint {
    max-inline-size: 48rem;
    margin: var(--space-s) auto 0;
    padding-inline: var(--gutter);
    color: var(--color-text-muted);
    font-size: var(--step--1);
    text-align: center;
  }

  .print-sheets {
    display: grid;
    justify-items: center;
    padding: var(--space-m) var(--gutter) var(--space-2xl);
  }

  .sheet {
    display: grid;
    grid-auto-rows: 1fr;
    background-color: #fff;
    box-shadow: var(--shadow-l);
  }

  .sheet--a5   { inline-size: min(100%, 148mm); }
  .sheet--a6   { inline-size: min(100%, 105mm); }
  .sheet--a4_2 { inline-size: min(100%, 297mm); grid-template-columns: 1fr 1fr; aspect-ratio: 297 / 210; }
  .sheet--a4_4 { inline-size: min(100%, 210mm); grid-template-columns: 1fr 1fr; aspect-ratio: 210 / 297; }

  /* Dashed cut lines between cards on A4 */
  .sheet--a4_2 .print-card,
  .sheet--a4_4 .print-card {
    outline: 0.2mm dashed #bdbdbd;
    outline-offset: -0.1mm;
  }

  @media print {
    .print-page { background: #fff; }
    .print-toolbar, .print-hint { display: none; }
    .print-sheets { display: block; padding: 0; }
    .sheet { box-shadow: none; break-after: page; }

    .sheet--a5   { page: a5; inline-size: 148mm; block-size: 210mm; }
    .sheet--a6   { page: a6; inline-size: 105mm; block-size: 148mm; }
    .sheet--a4_2 { page: a4-landscape; inline-size: 297mm; block-size: 210mm; }
    .sheet--a4_4 { page: a4-portrait; inline-size: 210mm; block-size: 297mm; }

    .print-card { block-size: 100%; aspect-ratio: auto; }
  }
}