/* ==========================================================================
   PLAY CONTROL — R14n
   Promoted to a component by direction: "the play button across the page will
   follow this style." Two sections carry one, §3's montage and §6's video
   cards, and they had drifted into two different objects — §3 a glass disc
   with a white glyph, §6 a solid violet disc with a white glyph.

   Promoted rather than duplicated, on the precedent the marquee set at R9k:
   two copies of one construction is two places for it to go wrong.

   THE STYLE, as directed:
     fill    --color-surface-glass + backdrop blur and saturate
     stroke  --color-border-strong, 1px
     glyph   violet

   ⚠ --color-border-strong (0.20), NOT --color-border-default (0.10). "Light
   grey stroke" is the instruction and 0.10 does not read as one: against the
   dark glass it measures about 1.3:1 and the disc loses its edge, which is
   the edge doing most of the work of making it look like glass.

   ⚠ --color-accent-identity #865BFF, NOT --color-accent-identity-deep. The
   deep violet is the page's fill colour — chips, circles, banners — and it is
   correct behind WHITE. As a glyph ON a dark glass it is the wrong end of the
   scale: measured on the glass over the current #1A1A1A placeholder, deep is
   3.38:1 and identity is 4.69:1. Both clear the 3:1 a non-text control needs;
   only one has any headroom.

   ⚠⚠ IT HAPPENED — R14q, and it has kept happening. R14n warned the headroom
   would be spent the moment a photograph went behind the disc; §6's stills
   landed one revision later. Measured against the brightest fifth of the frame
   under each disc:

     0.45 glass   Philip 1.26:1   Rebekah 2.28:1   both FAIL 3:1
     0.82 glass   Philip 3.21:1   Rebekah 3.97:1   both pass

   So the fill is --color-surface-glass-deep, not --color-surface-glass.

   ⚠ IT WENT 0.75 -> 0.80 -> 0.82 WITHOUT THIS FILE CHANGING ONCE. Each time
   §6's card scrim was lightened or moved down, the backdrop under this disc
   got brighter and the glyph fell below 3:1 — 0.30 scrim at R14q, 0.11 at
   R14t, ZERO at R14u.

   THE DISC AND THAT SCRIM ARE TWO FILTERS OVER ONE PHOTOGRAPH: LIGHTEN OR
   MOVE EITHER AND RE-MEASURE THE OTHER. The numbers live in members.css;
   there is no way to see this coupling from one file. 0.82 assumes the ≥1200
   case, where the band starts below the disc and the scrim under it is zero —
   which is the worst case, so the other breakpoints are covered.

   ⚠⚠ AND 0.82 IS WHY THE DISC READS AS DARK GREY RATHER THAN AS GLASS. R14v
   set it back to a true 0.45 glass by direction and was undone at R14w, so
   the trade is settled for now in favour of the violet glyph — but it IS a
   trade, and it is the reason the blur has little to work on. The two
   instructions in force, "glassmorphic fill" and "purple icon", cannot both
   hold over these stills: #865BFF is a MID-luminance colour, so it needs the
   backdrop pushed to an extreme, and pushing a translucent fill to an extreme
   is the same thing as making it opaque. The exits, if it is revisited:
   a WHITE glyph (3.37:1 on a true 0.45 glass, and it has never once needed
   re-measuring), or a violet-TINTED fill with a white glyph, which is what
   the supplied reference's own small cards do.

   ⚠ THE WHITE GLYPH NEVER HAD THIS PROBLEM — it measured 6.1:1 on the same
   worst case at 0.45. Violet is a mid-luminance colour and has no good side
   to fail on, which is why keeping it costs a much darker disc. That is the
   trade the direction asks for, and it is worth knowing it was a trade.
   ========================================================================== */

.play {
  /* Size is a local property so a section can set it without re-declaring the
     control. §3's montage takes the 80px control size; §6's cards are much
     smaller and take the 52px icon box. */
  --play-size: var(--control-play-size);

  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--play-size);
  block-size: var(--play-size);
  padding: 0;
  background-color: var(--color-surface-glass-deep);
  border: var(--border-hairline) solid var(--color-border-strong);
  /* 50% — the documented carve-out from "everything clickable is square":
     a circle has no corners to square, and a play control has always had one. */
  border-radius: var(--radius-avatar);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(var(--saturate-glass));
          backdrop-filter: blur(var(--blur-glass)) saturate(var(--saturate-glass));
  color: var(--color-accent-identity);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-standard),
              color        var(--duration-base) var(--ease-standard);
}

/* NO BACKDROP-FILTER SUPPORT → CLOSE THE GLASS. Without the blur the fill is
   a flat 45% black over whatever is behind it, which on a photograph is a
   grey smear rather than a disc. The fallback is opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .play { background-color: var(--color-surface-hover); }
}

/* §18 — a control needs a visible state change of its own, and every hover
   behaviour needs a non-hover equivalent. Both properties move so the change
   is visible whether or not the reader can see colour. */
.play:hover,
.play:focus-visible {
  border-color: var(--color-accent-identity);
  color: var(--color-text-heading);
}

.play__glyph {
  inline-size: var(--play-glyph-size, var(--icon-size-pixel-lg));
  block-size: var(--play-glyph-size, var(--icon-size-pixel-lg));
  fill: currentColor;
  /* The triangle is nudged right by a third of its optical weight: a centred
     triangle reads as sitting left of centre inside a circle. */
  margin-inline-start: 0.1em;
}

/* §3's glyph is the SMIL-drawn stroke triangle; this pins the resolved state
   so it renders correctly wherever SMIL does not run (R5t's problem, same
   fix). Harmless on a plain filled path. */
.play__glyph path { stroke-dashoffset: 0; fill-opacity: 1; }