/* ==========================================================================
   Tripo-Pulse print styles
   P1.F2.T5 · ©2026 Vexstorm Studios – All Rights Reserved

   The base every printed surface extends. P4.F4.T6's base_print.html strips the
   application chrome server-side; this file makes any page printable without
   it, so a moderator who hits Ctrl+P on an observation detail gets something
   readable rather than a screenshot of a dark interface.

   Loaded with media="print" from both shells, so nothing here affects screen
   rendering.

   Two rules govern everything below:

   1. **Print is always light.** A dark theme printed literally wastes toner and
      produces grey-on-grey text. The theme tokens are overridden to a light,
      high-contrast set for the printed page regardless of the resolved theme —
      this is the one place the token indirection is deliberately short-circuited,
      and it is why it is done by redefining the roles rather than by writing
      colours into the rules below.

   2. **Nothing is hidden that carries information.** Navigation, toggles, and
      toasts go, because they are controls. Tables, captions, notices, badges,
      and the exact-value table beside every chart stay, because they are data.

   !important appears here, which is permitted in exactly two places: this file
   and the reduced-motion block in utilities.css.
   ========================================================================== */

@media print {
  /* ------------------------------------------------------------------------
     Force the light role set, whichever theme was resolved on screen.
     ------------------------------------------------------------------------ */

  :root,
  :root[data-theme="dark"],
  :root[data-theme="light"] {
    --tp-color-surface-base: var(--tp-color-white);
    --tp-color-surface-raised: var(--tp-color-white);
    --tp-color-surface-sunken: var(--tp-color-white);
    --tp-color-surface-overlay: var(--tp-color-white);
    --tp-color-surface-inverse: var(--tp-color-slate-900);
    --tp-color-text-primary: var(--tp-color-slate-950);
    --tp-color-text-secondary: var(--tp-color-slate-800);
    --tp-color-text-muted: var(--tp-color-slate-700);
    --tp-color-text-inverse: var(--tp-color-white);
    --tp-color-text-link: var(--tp-color-azure-800);
    --tp-color-text-on-accent: var(--tp-color-white);
    --tp-color-border-subtle: var(--tp-color-slate-300);
    --tp-color-border-default: var(--tp-color-slate-600);
    --tp-color-border-strong: var(--tp-color-slate-800);
    --tp-color-border-focus: var(--tp-color-azure-700);
    --tp-color-accent-default: var(--tp-color-azure-700);
    --tp-color-accent-hover: var(--tp-color-azure-700);
    --tp-color-accent-active: var(--tp-color-azure-800);
    --tp-color-accent-subtle: var(--tp-color-white);
    --tp-shadow-sm: none;
    --tp-shadow-md: none;
    --tp-shadow-lg: none;
    color-scheme: light;
  }

  @page {
    margin: 15mm;
  }

  html,
  body {
    background-color: var(--tp-color-white) !important;
    color: var(--tp-color-slate-950) !important;
    /* Physical units, because this is physical output. */
    font-size: 10pt;
  }

  /* ------------------------------------------------------------------------
     Controls disappear; data does not.
     ------------------------------------------------------------------------ */

  .tp-skip-link,
  .tp-nav,
  .tp-nav__toggle,
  .tp-theme-toggle,
  .tp-header__actions,
  .tp-toast,
  .tp-toast-region,
  .tp-tooltip,
  .tp-pagination,
  .tp-modal__close,
  .tp-notice__dismiss,
  .tp-button,
  .tp-tabs__list {
    display: none !important;
  }

  .tp-header,
  .tp-footer {
    position: static !important;
    border: 0 !important;
  }

  .tp-page {
    display: block !important;
    min-height: 0 !important;
  }

  .tp-main {
    padding: 0 !important;
  }

  .tp-container {
    max-width: none !important;
    padding-inline: 0 !important;
  }

  /* A modal that was open when the user printed becomes ordinary content
     rather than an overlay clipped to the viewport. */
  .tp-modal,
  .tp-modal__dialog {
    position: static !important;
    max-height: none !important;
    box-shadow: none !important;
  }

  .tp-modal__backdrop {
    display: none !important;
  }

  /* Panels keep their boundary so the structure survives, but lose fills that
     would print as grey blocks. */
  .tp-card,
  .tp-notice,
  .tp-empty-state {
    border: 1pt solid var(--tp-color-slate-300) !important;
    background: none !important;
    break-inside: avoid;
  }

  /* ------------------------------------------------------------------------
     Tables are the product's real content on paper.
     ------------------------------------------------------------------------ */

  .tp-table {
    width: 100% !important;
    border-collapse: collapse !important;
  }

  .tp-table th,
  .tp-table td {
    border: 0.5pt solid var(--tp-color-slate-300) !important;
    padding: 3pt 4pt !important;
  }

  .tp-table thead {
    /* Repeat the header on every printed page of a long table. */
    display: table-header-group;
  }

  .tp-table tr,
  .tp-table caption {
    break-inside: avoid;
  }

  .tp-table__caption {
    font-weight: var(--tp-weight-bold);
    text-align: start;
  }

  /* A chart canvas prints as a bitmap of unknown quality; its exact-value table
     is the authority and is always present in the DOM (FEAT-027). Keep both,
     but never let the canvas break across pages. */
  .tp-chart {
    break-inside: avoid;
  }

  /* ------------------------------------------------------------------------
     Headings, links, and page breaks.
     ------------------------------------------------------------------------ */

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    break-after: avoid;
    page-break-after: avoid;
  }

  p,
  blockquote {
    orphans: 3;
    widows: 3;
  }

  /* Reveal the destination of an off-page link, because a printed underline
     points nowhere. Same-page fragments and javascript-free controls are
     excluded, since their href is noise on paper. */
  a[href^="http"]::after,
  a[href^="/"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: var(--tp-color-slate-700);
    word-break: break-all;
  }

  a {
    text-decoration: underline;
  }

  /* Nothing animates on paper. */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}