/* Raking Light: print (linked with media="print"; .notes/architecture.md "Print styles").
   Always North light, no chrome, no textures, no light or shadow. Artwork pages print as a catalogue
   sheet (image, title, medium, description, address); cart and success print as receipts. */
/* This sheet is linked on its own; restating the layer order keeps "overrides" last even if it is
   parsed before core.css (layer order is fixed by the first sheet that names the layers). */
@layer reset, tokens, base, layout, shell, components, pages, effects, utilities, overrides;

@page { margin: 14mm; }

@layer overrides {
  @media print {

    :root, :root[data-light] {
      color-scheme: light;
      --ground: #fff;
      --raised: #fff;
      --sunken: #fff;
      --ink: #000;
      --ink-2: #333;
      --ink-3: #555;
      --rule: #bbb;
      --edge: #888;
      --pool: transparent;
      --hang-cast-color: transparent;
      --hang-contact-color: transparent;
      --grain: none;
      --linen: none;
      --linen-strength: 0;
      --accent: #000;
    }
    html, body { background: #fff !important; color: #000; }
    body { font-size: 10.5pt; line-height: 1.45; overflow: visible; }

    /* Chrome, controls and anything interactive or animated. */
    body > header, body > footer, [role="banner"], [role="contentinfo"], nav, .skip-link,
    .preview-ribbon, .toast-region, dialog, [popover], .buybar, .tabs__list, .pan-pad,
    canvas, [data-gl-host] canvas, button:not(.table__sort), .button, .chip, .segmented,
    input, select, textarea, .field__hint, .draft-note, video, audio, iframe { display: none !important; }

    /* WebGL views hide their <img>; print always shows the image. */
    [data-gl-host] img, [data-gl-active] img { visibility: visible !important; opacity: 1 !important; }
    * { animation: none !important; transition: none !important; }
    .reveal { clip-path: none !important; opacity: 1 !important; }
    img[data-fade] { opacity: 1 !important; }

    /* Images keep their aspect, never split across pages, never fill more than most of a page. */
    img { max-inline-size: 100% !important; max-block-size: 150mm; inline-size: auto; block-size: auto; }
    .hang { inline-size: auto !important; max-inline-size: 100%; }
    .hang::before, .hang::after, .tile::before { content: none !important; }
    .hang > img { box-shadow: none !important; }
    .table-scroll { overflow: visible !important; }
    .table-scroll > .table { mask: none !important; }
    .tile, .hang, figure, tr, .price, .label { break-inside: avoid; }
    h1, h2, h3 { break-after: avoid; }
    .signature .sig-fill { fill: #231e1b !important; }
    .signature .sig-glint { display: none !important; }

    /* Links in content print their address. */
    main a[href^="/"]:not(.tile, .daub, .link-arrow)::after {
      content: " (jamalabstracts.ca" attr(href) ")";
      font-size: 0.85em;
      color: #555;
      word-break: break-all;
    }
    main a[href^="http"]:not([href*="jamalabstracts.ca"])::after {
      content: " (" attr(href) ")";
      font-size: 0.85em;
      color: #555;
      word-break: break-all;
    }
    a { text-decoration: underline; color: inherit; }

    /* Artwork pages: a catalogue sheet. */
    :root:is([data-page="painting"], [data-page="doodle"]) main::after {
      content: "jamalabstracts.ca";
      display: block;
      margin-block-start: 8mm;
      font: 9pt var(--font-mono);
      color: #555;
    }

    /* Cart and success: receipts. */
    :root:is([data-page="cart"], [data-page="success"]) main { max-inline-size: 170mm; }
    :root:is([data-page="cart"], [data-page="success"]) img { max-block-size: 30mm; }
    .price__total { font-size: 14pt; }
    .table th, .table td { border-color: #bbb; }
  }
}