@charset "UTF-8";
/* ============================================================================
   PRICELESS FINANCIAL SERVICES — content guard, stylesheet half
   Client requirement, _rebuild/BRIEF.md §4. Behaviour half: assets/js/guard.js.

   This file loads AFTER assets/css/priceless.css and depends on its tokens. It
   defines no colour of its own — every value here is a token from §0 of the
   design system. If a rule below needs a value that has no token, the token
   gets added there, not a hex added here.

   Scope: what this file does is make text un-selectable and images un-draggable
   for the ordinary visitor, and print a calm line instead of the page. It is
   friction, not security. See the docblock in inc/protect.php.

   THE ONE RULE THIS FILE MUST NOT BREAK: the focus ring. Re-asserted at the
   bottom rather than assumed.
   ========================================================================= */

/* ------------------------------------------------------------- 1 SELECTION */
/* user-select: none on the body, then handed straight back to everything a
   visitor legitimately types into or is meant to take away. Safari in
   particular inherits user-select into form controls, so the restore below is
   load-bearing and not defensive tidiness — without it the enquiry form, the
   masterclass gate and the consultation page all stop accepting text. */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The exemption list. Kept character-for-character in step with EXEMPT in
   assets/js/guard.js — if one changes and the other does not, a field will
   accept a keystroke and refuse a selection, which is worse than either. */
input,
textarea,
select,
[contenteditable],
[contenteditable] *,
[data-allow-select],
[data-allow-select] * {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* And the highlight has to be visible inside them, or a visitor correcting a
   typo in their own phone number cannot see what they have selected. Same
   values as the site-wide ::selection in priceless.css §1, restated here so
   that a selection inside an exempt region can never end up invisible. */
input::selection,
textarea::selection,
[contenteditable]::selection,
[contenteditable] *::selection,
[data-allow-select]::selection,
[data-allow-select] *::selection {
  background: var(--swan-500);
  color: var(--ink-950);
}

/* ---------------------------------------------------------------- 2 IMAGES */
/* -webkit-touch-callout is what suppresses the iOS long-press sheet with
   "Save Image" and "Copy" on it. It is the only thing that does, and it is the
   whole of the mobile half of this feature. -webkit-user-drag stops the drag
   ghost forming on desktop before guard.js has to cancel anything. */
img,
picture,
.art,
.art-fig,
[data-art] {
  -webkit-touch-callout: none;
}

img {
  -webkit-user-drag: none;
}

/* The art frame catches the pointer instead of the photograph inside it, so a
   right-click lands on the <div class="art"> and never on the <img> — there is
   no element under the cursor for "Save image as" to act on.

   VERIFIED AGAINST THE ART SUBSYSTEM in assets/js/priceless.js: that module
   builds its image with new Image(), sets .src, and inserts the node in
   onload. pointer-events is a hit-testing property only — it has no effect on
   loading, decoding, the onload callback, the .is-loaded / .is-in class
   handoff, or the scale 1.06 → 1.0 entrance transition in §15 of the design
   system. The loading path is untouched. The frame's ::after wash already
   carries pointer-events: none for the same reason, so the two agree. */
/* The art loader now builds a <picture> so the browser can pick AVIF or WebP,
   and the <picture> is display:contents, so the <img> is still the frame's
   layout child but no longer its DOM child. Both selectors are needed or a
   right-click lands on the photograph on every frame that got a real file. */
.art > img,
.art > picture > img {
  pointer-events: none;
}

/* ----------------------------------------------------------------- 3 PRINT */
/* Printing is disabled. A visitor who presses Ctrl+P has not done anything
   wrong, so this says so in one plain sentence and gives them a person to
   call. No warning colour, no alarm language, no capitals. The tone of this
   site is calm and factual and a print sheet is not the place to stop being
   either.

   NOTE: the phone number below is the one place on the site it is written
   outside inc/brand.php, because a stylesheet cannot call pf_bs('phone'). If
   the office number ever changes, this line changes with it. */
@media print {
  @page { margin: 20mm; }

  body > * {
    display: none !important;
  }

  body {
    background: var(--paper);
    color: var(--graphite);
    font-family: var(--sans);
  }

  body::before {
    content: "Printing is disabled on this site. For a copy of anything here, call the office on (604) 537-5444.";
    display: block;
    max-width: var(--measure-tight);
    margin: var(--s9) 0 0;
    font-size: var(--t-body);
    line-height: var(--lh-body);
  }
}

/* ------------------------------------------------------------- 4 THE FLOOR */
/* Nothing above this line removes or weakens a focus ring, and nothing added
   below it ever may. Re-asserted with the same tokens as priceless.css §1
   because guard.css loads after it: a regression here would be invisible to a
   mouse user and would strand a keyboard one, which is the exact failure this
   whole feature is required not to cause. */
:focus-visible {
  outline: 2px solid var(--swan-500);
  outline-offset: 3px;
}

/* This used to set the deeper blue, because reading surfaces printed on a pale
   stock and the lighter ring vanished on it. The ground is uniform ink now, and
   because guard.css loads last this rule was quietly dimming the focus ring to
   about 3.5:1 on every article, the insights index and the contact page — above
   the 3:1 floor, but dimmer than the ring everywhere else, and inconsistent
   where it matters most. One ring, one ground. */
.mode-read :focus-visible,
.mode-operate :focus-visible {
  outline-color: var(--swan-500);
}

/* The skip link has to stay reachable and readable with the guard on. */
.skip:focus {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}