/*
 * What every page showing a chart shares: the hidden icon sprite, the
 * on-screen frame, and printing one chart per sheet.  The chart is an SVG
 * drawn by charts/js/render.js and carries its own colours, because it prints
 * on white whatever theme the browser is in; only the frame uses the site's
 * tokens.
 */

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.chart-frame svg {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
}

/*
 * Named pages let each chart pick its own paper size and orientation in one
 * print job.  The SVG already measures exactly one sheet, so the page margin
 * is zero and the chart's own margin does the work.
 */
@page letter-portrait { size: letter portrait; margin: 0; }
@page letter-landscape { size: letter landscape; margin: 0; }
@page a4-portrait { size: A4 portrait; margin: 0; }
@page a4-landscape { size: A4 landscape; margin: 0; }

@media print {
    .content { padding: 0; max-width: none; }
    .chart-sheet { margin: 0; break-after: page; }
    .chart-sheet:last-of-type { break-after: auto; }
    .chart-sheet[data-size="letter-portrait"] { page: letter-portrait; }
    .chart-sheet[data-size="letter-landscape"] { page: letter-landscape; }
    .chart-sheet[data-size="a4-portrait"] { page: a4-portrait; }
    .chart-sheet[data-size="a4-landscape"] { page: a4-landscape; }
    /* Back to the width and height the renderer gave the SVG, in inches or
       millimetres: a percentage resolves against one layout width shared by
       every sheet, so a portrait chart after a landscape one came out too
       tall and spilled onto a blank page. */
    .chart-frame svg {
        width: auto;
        height: auto;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}