/* HOVER: ONE look for the whole Lab (Chris, Oct 28: "Look A + B", strength A). This file is the MASTER.
   A  every tappable thing (buttons, tabs, chips, rows, tiles, cards): ONE shade laid over its own colour, edge to edge.
   B  plain text links turn teal.
   ONE RULE (Oct 29, Chris chat 75: the Chords / Both / Melody buttons had no hover; "k do it"): every button, [role=button], play button and
   link-button gets it by what it IS, never by being named on a list; the names below are only the tappable things that are not buttons
   (tiles, rows, cards). qa/hoverall.py fails the push when anything the mouse turns into a pointer has no shade.
   Left out: piano keys (their colour map, styles.css), disabled, locked, the one already picked (.on / .sel), answered quiz options, Pause.
   NEVER on hover or press: size, scale, move, padding, border-width, filter or a drop shadow (qa/hovermove.py fails the push).
   The press on a phone is the same shade. */
:root { --hov: rgba(0, 0, 0, 0.15); }
@media (prefers-color-scheme: dark) { :root { --hov: rgba(255, 255, 255, 0.18); } }
:is(
  button,
  [role="button"],
  [data-tplay],
  a[class],
  select,
  summary,
  .practice-tile[data-soon="false"],
  #wpl-home-tiles .practice-tile[data-soon="false"],
  .wpl-tab,
  .wpl-tab.active,
  .prog-tab,
  .key-tab,
  .step-btn,
  .prog-tab.active,
  .key-tab.active,
  .step-btn.active,
  .wpl-toggle-btn,
  .wpl-toggle-btn.active,
  .wpl-play-btn,
  .wpl-lock-cta,
  .pp-node,
  .pp-row:not(.locked),
  .pp-map .pp-node:not(.locked),
  .pp-hero,
  .pp-foot .pp-feedback,
  .pp-toolsbtn.pp-toolslbl,
  .pp-hello > button,
  #wpl-demo-bar a,
  #wpl-demo-bar a.wpl-demo-buy,
  .pp-goal,
  #wpl-oct-chip,
  .pp-play,
  .pp-top .pp-daily,
  .pp-side .pp-chrow:not(.sel),
  .pp-foot .pp-footbtns .pp-aboutbeta,
  .pp-htile,
  .pp-qopt:not(:disabled):not(.right):not(.wrong):not(.out):not(.struck),
  #wpl-tour-q,
  .wpl-tour-next,
  .pp-newopen,
  .pp-newlist li.done .pp-newopen,
  .pp-top .pp-player,
  .pp-prow:has(> .pp-pmain),
  .pp-ani,
  .pp-tabbar button[data-tab="player"],
  .pp-ppen,
  .pp-pcyes,
  .pp-pcno,
  .pp-abseg:not(.on),
  .pp-play.soft:not(.pausing),
  .pp-rv .pp-rvp,
  .pp-rvbox button,
  .pp-rvsw,
  .pp-primary.pp-sec,
  .pp-tmarr:not(:disabled),
  .pp-tstart,
  .pp-hintrow [data-gamestart].inrow,
  .pp-titem .pp-trow,
  button.pp-tbox,
  .pp-tseg button:not([aria-pressed="true"]),
  .pp-tseg button[aria-pressed="true"],
  .pp-tdaily:not(:disabled)
):not(:disabled, .on, .sel, .locked, [aria-disabled="true"], .pp-kb, .pp-kb *, .pp-qopt:is(.right, .wrong, .out, .struck), .pp-play.soft.pausing) {
  @media (hover: hover) and (pointer: fine) { &:hover { box-shadow: inset 0 0 0 999px var(--hov) !important; } }
  @media (hover: none) { &:active { box-shadow: inset 0 0 0 999px var(--hov) !important; } }
}
@media (hover: hover) and (pointer: fine) { a:not([class]):hover { color: var(--wpl-accent, #0F766E); } }
/* FOCUS: one ring, 3px gold, 2px out (the Lab's own rules in styles.css use the same) */
:focus-visible { outline: 3px solid var(--pp-gold, #D19A12); outline-offset: 2px; }