/* ==========================================================================
   Paper (#3025 M5)

   The chrome is navigation, and navigation does not print: the header, the
   search box, the nav and the footer are ink spent on things a sheet of paper
   cannot do. What every page keeps is its own content, on white, without the
   surfaces and shadows that only exist to separate things on a screen.

   A slice that wants more than this says so in its own sheet — the cart's
   kundvagn-print.css is the worked example.

   ---------------------------------------------------------------------------
   WHY THIS IS A FILE AND NOT AN @media BLOCK IN btj.css

   These rules are asked of two different media. _Layout links this file
   `media="print"`, which is what it has always meant. _PrintLayout — the
   chrome-less layout a print VIEW renders under — links the very same file
   `media="all"`, so the sheet is what the tab shows on screen as well, which is
   what legacy's print popup does. Wrapping the rules in @media print would make
   that impossible without a second copy, and two copies of a rule set are two
   rule sets that eventually disagree.

   Load order is the one thing to keep: btj.css, then this, then the slice's own
   sheet, then the slice's own print sheet. That is the relative order the four
   have always had, and the cascade decides ties by source order.
   ========================================================================== */

/* The page box. There was no @page rule at all until #3060, so the sheet had
   whatever inset the browser felt like giving it and .page's own padding is
   dropped below — text ran into both edges of the paper and the right-hand
   column (the cart's antal, and any number aligned to the end of a row) was cut
   off by the printer's own unprintable margin.

   Declared here rather than per slice: it is the geometry of the paper, not of
   anything drawn on it. A caller who picks "Inga marginaler" in the print dialog
   overrides this, and nothing in CSS can answer that. */
@page {
    margin: 12mm 14mm 14mm;
}

:root {
    --shadow: none;
    --ghost-border: none;
    --c-bg: #fff;
    --c-surface: #fff;
    --c-surface-2: #fff;
    --c-surface-3: #fff;
    --c-surface-4: #fff;
    --c-pink: #fff;
    --c-badge-bg: #fff;
    --c-accent-soft: #fff;
    --c-accent-soft-text: #000;
    --c-warm-soft: #fff;
    --c-warm-soft-text: #000;
    --c-field-highlight: #fff;
    /* "Pågår" is a brand ground on screen and must not be one on paper — it was a pale teal
       wash before the 2026-09 reskin and would be Smultron after it, which is worse. */
    --c-tint-cool: #fff;
    --c-tint-cool-text: #000;
    --c-text: #000;
    --c-text-muted: #333;
    --c-outline: #333;
    --c-border: #999;
}

/* Document type, not screen type. 11pt/1.4 is a reading size for a lit panel at arm's length;
   on paper it is a large face with a lot of air, and every line of it is paid for in sheets.
   10pt is what legacy's own print stylesheet sets (DigitalBooklet_Print.css) and what an ordinary
   document is set in — 1.25 rather than legacy's 1.1, because this page mixes sizes within a row
   and 110% leading crowds the smaller ones against the larger. */
body { background: #fff; font-size: 10pt; line-height: 1.25; }

/* Tonal fills are a screen device; on paper a chip needs an outline to
   still read as a chip. */
.chip, .badge { border: 1px solid #000; }

.site-header,
.site-nav,
.site-footer { display: none; }

.page { max-width: none; padding: 0; }

/* ...but a window is not a sheet of paper, and the print VIEW is this file asked of `screen`.
   Dropping the page's padding is right on paper, where @page above owns the inset and a second one
   would only double it — and wrong in the tab, where it left the text against the window frame with
   nothing between them. So the inset comes back for screen only, which is a medium this file sees
   exactly once: on an ordinary page it is linked `media="print"` and this block can never match.

   2rem, the same figure Mina sidors print page uses for its body — a document read on a screen
   wants a margin for the same reason one on paper does. */
@media screen {
    .page { padding: var(--sp-6); }
}

/* A link is a colour and an underline on screen; on paper it is just words. The href is not
   printed after it either — the two that matter here (the article and the legacy basket) are
   long, session-shaped URLs that would say nothing useful to a reader holding the sheet. */
a { color: inherit; text-decoration: none; }

/* The print affordances the shop has. A button that opens the print dialog is furniture
   of the screen, and printing it prints the instruction to print. The same goes for a link to
   a printable version: on the sheet in your hand it is an offer you have already taken. */
.article-print,
.sok-print,
.ms-print,
.no-print { display: none !important; }

/* Same reasoning one step on: a clipboard is a thing the screen has. On paper
   the identifier beside it is already as copyable as it is going to get. */
.copy-btn { display: none !important; }