/* Global rules that React Native Web cannot express as a component style: browser defaults
   that fight the design, and media queries.

   No colour, family or duration value appears in this file. Colour comes from
   app/contracts/design_tokens.json and is injected by @va/ui's theme provider, so the
   contract stays the only place those values exist. */

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
}

/* Nothing may scroll the page sideways at 360 CSS px. */
html {
  overflow-x: hidden;
}

/* Reduced motion removes sweeps and parallax. Labels, selection and true progress values
   are unaffected: they are rendered content, not animation. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print. The palette itself switches through the custom properties the theme provider
   binds — see theme/theme.ts — so what is left here is the geometry of paper.

   react-native-web lays the app out as a full-height flex column and scrolls the report
   inside a container. A sheet of paper does not scroll: without these rules the browser
   prints the first viewport of the report and silently drops the findings, the coverage,
   the recorded times and the limitations. DES-07 asks for the same report content on
   paper, so the scroller gives up its height and the document flows onto as many pages as
   it needs. */
@media print {
  html,
  body,
  #root {
    height: auto !important;
    overflow: visible !important;
  }

  #root > div {
    height: auto !important;
    min-height: 0 !important;
  }

  [role="main"],
  [role="main"] > div {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    flex-basis: auto !important;
  }

  /* Keep the things a reader has to compare on one sheet: the photograph with its
     annotation layer, and each finding with its own state and attribution. */
  img,
  [role="listitem"] {
    break-inside: avoid;
  }

  /* Declared by the components themselves — see packages/ui/theme/print.ts. */
  [data-print-keep-together="true"] {
    break-inside: avoid;
  }

  [data-print-hidden="true"] {
    display: none !important;
  }
}