/* Phones and tablets.

   Loaded last on every page. Two jobs, both for a finger rather than a mouse:

   1. No blue box. Android paints a translucent highlight over anything tapped,
      and a focus ring is a keyboard's affordance — a phone has no keyboard
      tabbing through the page, so the ring only ever appears as a stray box
      after a tap. Long-pressing the island (its hold gesture) also lands
      right where the OS starts selecting text, which is the other blue box.

   2. No heavy paint. A 34px backdrop blur re-sampled on every scroll frame,
      four SVG groups animating transform (SVG children are not composited:
      every frame repaints the whole wave drawing), a 38px blur behind the
      hero copy and two wide drop-shadows under the portrait are each fine on
      a laptop and together lock up a mid-range phone. They go, and the
      picture stays: solid plates instead of glass, still waves, a soft
      gradient instead of a blurred block. */

* {
  -webkit-tap-highlight-color: transparent;
}

@media (hover: none) and (pointer: coarse) {
  /* ---------------------------------------------------------- no blue box */
  *:focus,
  *:focus-visible {
    outline: none !important;
  }

  /* The controls, not the drawer's text: a student may still want to copy
     a line out of an open list. */
  .island-bar,
  .island-bar *,
  .island :is(a, button, [role="button"], .island-row, .island-tab, .island-filter),
  .main-header :is(a, button),
  .lesson-lens-bar :is(a, button),
  .theme-switch {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  /* The fields still need a caret and selectable text. */
  .island input,
  .island textarea,
  .lesson-lens-bar input,
  .account-field input {
    -webkit-user-select: text;
    user-select: text;
  }

  /* ------------------------------------------------------- no heavy paint */
  :root {
    --glass-blur: none;
  }


  .is-scrolled .lesson-lens-bar {
    background: var(--bg-primary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .lesson-outline-backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* The sea: still water. The drawing is the same; it just does not move. */
  .wave-range {
    animation: none;
    will-change: auto;
  }

  .sea-copy::before {
    filter: none;
    border-radius: 50%;
    background: radial-gradient(closest-side,
                rgba(4, 19, 34, 0.9) 0%,
                rgba(4, 19, 34, 0.82) 55%,
                rgba(4, 19, 34, 0.4) 80%,
                transparent 100%);
  }

  .sea-portrait img {
    filter: none;
  }

  .footer-portrait img,
  .pen-shadow {
    filter: none;
  }

  /* The footer's arrival. On a laptop the plate is revealed by a brass line
     running down it: a clip-path animated over the water, the chart mask and
     the whole printed plate at once. A clip-path animation is repainted every
     frame, and repainting the chart mask sixty times a second is the single
     heaviest thing this page does — half a second of raster work per second
     on a desktop GPU, and a locked-up scroll on a phone. Here the plate
     arrives on the fade-and-lift it already has (opacity and transform, which
     the compositor owns); the officer, the tabs and the stamps keep their own
     entrances. The survey line itself animates `top`, a layout property, and
     has nothing left to reveal. */
  .main-footer.is-boarding .frame-water,
  .main-footer.is-boarding .footer-frame::before,
  .main-footer.is-boarding .footer-plate,
  .main-footer.is-aboard .frame-water,
  .main-footer.is-aboard .footer-frame::before,
  .main-footer.is-aboard .footer-plate {
    animation: none;
    clip-path: none;
  }

  .frame-sweep {
    display: none;
  }
}