/* The rules that protect the material on the page itself: the capture shield, the hiding behind it, the print
   block, and the elements around the video's frame. They are kept out of styles.css, which is the website
   developer's, and the checker treats this file as security-sensitive, so a change here is always reviewed.

   Every rule sits in the layer "guard", and each protective declaration is !important. Important declarations
   in a layer are sorted above unlayered important ones whatever their specificity
   (https://www.w3.org/TR/css-cascade-5/#cascade-sort), so a property pinned here on an element keeps its value
   there whatever another style sheet says about that element. The checker refuses a developer sheet that opens a
   layer or imports one, so nothing can join this layer from outside. A pin covers the element itself: its
   pseudo-elements (a ::first-line has its own values) and the elements around it are pinned only where named
   here. The rest of the look here is !important too, because a layered rule would otherwise lose to any plain
   rule elsewhere (p { margin: 0 } beat .shield .status) and the page would change.

   The video's player and the reader's mark over it are not in this file. They are in the frame's own shadow
   tree, which no rule of the page can select, styled by mark/video.css, which also pins the frame itself from
   inside. Of the video, only the elements around its frame are pinned here. */

@layer guard;

@layer guard {
  /* The mark's own fonts, apart from the developer's fonts/ folder. A later unlayered @font-face of the same
     name would replace these, which is why the checker refuses a developer sheet that names them. */
  @font-face {
    font-family: "UMA Mark Display";
    src: url("mark/jost-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "UMA Mark Mono";
    src: url("mark/jetbrains-mono-latin.woff2") format("woff2");
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
  }

  /* ---------- what keeps the shield on the screen ----------
     It must be drawn where it is, at its size, over what it covers. Each property here could otherwise move,
     shrink, clip, replace or fade it without hiding anything else. */
  .shield {
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2147483647 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    zoom: 1 !important;
    filter: none !important;
    clip: auto !important;
    clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
    mix-blend-mode: normal !important;
    content-visibility: visible !important;
    contain: none !important;
    content: normal !important;           /* content: url() on an element would replace what it shows */
    text-indent: 0 !important;
    animation: none !important;
    transition: none !important;
  }
  /* Its own pseudo-elements could be laid over its words */
  .shield::before, .shield::after { content: none !important; }

  /* ---------- around the video's frame ----------
     While a video is shown, nothing above its frame may cut a part of the frame away (a clip path, a clip, a mask
     or containment), and nothing between the page's body and the frame may hide what overflows it. The strip at
     the top of the frame can then be cut off only together with the picture under it. html and body keep their
     own overflow, which the page's scrolling depends on. None of this changes the page as shipped. */
  :has(.media-wrap) {
    clip-path: none !important;
    clip: auto !important;
    mask: none !important;
    -webkit-mask: none !important;
    -webkit-mask-box-image: none !important;
    contain: none !important;
    content-visibility: visible !important;
  }
  body :has(.media-wrap) { overflow: visible !important; }

  /* ---------- capture shield ----------
     No transition on purpose: a fade would leave the material half visible while a screenshot is taken.
     The material is hidden as well as covered, so removing the cover alone reveals nothing. Its display is
     pinned only while it is shown, because the page's script puts it away with the hidden attribute. */
  .shield:not([hidden]) { display: grid !important; }
  .shield {
    position: fixed !important;
    inset: 0 !important;
    background: var(--ground) !important;
    color: var(--text) !important;
    font-family: var(--font-text) !important;
    font-size: var(--text-base) !important;
    letter-spacing: normal !important;
    align-content: center !important;
    padding: var(--gutter) !important;
  }
  .shield-body {
    max-width: 46rem !important;
    margin-inline: auto !important;
    padding-left: clamp(1.25rem, 0.5rem + 2vw, 2.5rem) !important;
    border-left: 2px solid var(--blue) !important;
  }
  .shield .pill-primary { margin-top: 2rem !important; }
  .shield .status { margin-top: 1.25rem !important; }

  /* The cover must never animate in or out, whatever else on the page does. */
  .shield, .shield * { animation: none !important; transition: none !important; }

  /* What the cover hides. Each element and everything inside it, because visibility is inherited and a child
     could set it back; and no transition, which would keep it visible for as long as the transition ran. */
  body.shielded #pages, body.shielded #pages *,
  body.shielded #library-list, body.shielded #library-list *,
  body.shielded #activity-list, body.shielded #activity-list *,
  body.shielded .reader-bar h1, body.shielded .reader-bar h1 * {
    visibility: hidden !important;
    transition: none !important;
  }

  /* ---------- printing ----------
     A deterrent only: the pages are replaced by a notice. The privacy notice prints as it is, in black. */
  .print-block { display: none !important; }

  @media print {
    body:not(.public) > *:not(.print-block) { display: none !important; }
    .print-block {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      padding: 3rem !important;
      font: 600 1.2rem var(--font-text) !important;
      color: #000 !important;
      background: #fff !important;
    }
    body.public, body.public * { color: #000 !important; background: none !important; }
    body.public main::before { display: none !important; }
  }
}