/* =============================================================================
   CMER&TI — content protection
   =============================================================================

   WHAT THIS DOES, AND WHAT IT HONESTLY CANNOT DO

   The institute asked for two things on the public pages: text that cannot be
   swept with the mouse, and no printing. This file and js/protect.js do both.

   They are a deterrent and nothing more, and that is worth writing down where
   whoever maintains this will read it. A browser has to receive a page in
   order to draw it. Anyone who wants the text can read it out of View Source,
   out of the browser's reader mode, out of a saved copy, or off a photograph
   of the screen — and none of those goes anywhere near this stylesheet. What
   this does stop is the ordinary, casual copy: somebody dragging a paragraph
   out of a research page into a document, or running the page off on a printer
   without meaning to. That is the whole of the claim.

   WHAT IS DELIBERATELY LEFT ALONE

     · the staff portal (pages/diary/*) — it is a working tool, and its monthly
       report and its office forms exist to be printed. includes/header.php
       does not load this file there.
     · every form control — a box you cannot select text in is a box you cannot
       correct a typo in.
     · anything marked .allow-select or [data-allow-select] — an address, a
       telephone number, an email, an IFSC code. A visitor who cannot copy the
       institute's own telephone number is a visitor who telephones it wrong.

   TURNING IT OFF is one line: 'protect_content' => false in
   includes/security-config.php. Nothing else has to change.
   ========================================================================== */

/* ------------------------------------------------------------ no selection */

html.no-copy,
html.no-copy body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  /* Stops the blue flash and the "Copy / Share" bubble on a long press on iOS
     and Android, which is how selection is actually started on a phone. */
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Images cannot be dragged out to the desktop or to another tab. */
html.no-copy img,
html.no-copy svg,
html.no-copy figure {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: auto;
}

/* Nothing is highlighted even if a selection is somehow made — a stray
   Ctrl+A on an older browser then leaves the page looking untouched rather
   than entirely blue. */
html.no-copy ::selection      { background: transparent; color: inherit; }
html.no-copy ::-moz-selection { background: transparent; color: inherit; }

/* ------------------------------------------------- what stays selectable
   Order matters: these come after the blanket rule above and undo it. */

html.no-copy input,
html.no-copy textarea,
html.no-copy select,
html.no-copy option,
html.no-copy [contenteditable="true"],
/* An address, a telephone number and an email address are on this site in
   order to be used. Somebody copying the institute's number into their phone
   is the site working, not the site leaking, and a number that has to be
   copied out by eye is a number that gets dialled wrong. */
html.no-copy address,
html.no-copy a[href^="mailto:"],
html.no-copy a[href^="tel:"],
html.no-copy .allow-select,
html.no-copy .allow-select *,
html.no-copy [data-allow-select],
html.no-copy [data-allow-select] * {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

html.no-copy input::selection,
html.no-copy textarea::selection,
html.no-copy address::selection,
html.no-copy a[href^="mailto:"]::selection,
html.no-copy a[href^="tel:"]::selection,
html.no-copy .allow-select ::selection,
html.no-copy [data-allow-select] ::selection {
  background: Highlight;
  color: HighlightText;
}

/* ---------------------------------------------------------------- no print

   The page is replaced at print time rather than merely hidden, because a
   blank sheet reads as a fault with the printer and sends somebody to the
   office to ask about it. A sheet that says why is a sheet nobody has to ask
   about.

   'display:none' on body would take the message with it, so the message is a
   pseudo-element on <html> and the body is what is hidden. */

@media print {
  html.no-print body { display: none !important; }

  html.no-print::after {
    content: attr(data-print-notice);
    display: block;
    padding: 40mm 20mm;
    font: 12pt/1.7 Georgia, "Times New Roman", serif;
    color: #000;
    text-align: center;
    white-space: pre-line;
  }

  /* No page is ever more than the one sheet carrying that line. */
  html.no-print { height: auto; }
}

/* The overlay js/protect.js raises on beforeprint, for the browsers that
   start a print job without ever consulting the print stylesheet (and for a
   screenshot taken from the print dialogue itself). */
.print-shield {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: none;
  place-content: center;
  padding: 6vh 8vw;
  background: #fff;
  color: #111;
  font: 1.05rem/1.7 Georgia, "Times New Roman", serif;
  text-align: center;
}

.print-shield.is-up { display: grid; }

@media (prefers-color-scheme: dark) {
  .print-shield { background: #fff; color: #111; }
}