/* Interaction motion for the paper pages. Tokens (--ease, --t, --press) come from /base.css.
   Rules: hover only for a real pointer, so a tap never leaves a button filled; the press feedback only changes
   opacity, never size or position (a shrinking element slips out from under the cursor and makes hover flicker). */

/* buttons */
.links a, #bill-btn, #book-btn, .materials-line a, .save { transition:background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), opacity var(--press) var(--ease); -webkit-tap-highlight-color:transparent; }
.links a:active, #bill-btn:not([aria-disabled="true"]):active, #book-btn:active, .materials-line a:active, .save:active:not(:disabled) { opacity:.7; }
.save:focus-visible { background:#fff; }
@media (hover:hover) { .save:hover:not(:disabled) { background:#fff; } }

/* quiet text controls */
.lyr-toggle, .clip-link, #select-all, .listen-links a, .listen a, .top a, .social a, .book-link, .linkbtn { transition:color var(--t) var(--ease), border-color var(--t) var(--ease), text-decoration-color var(--t) var(--ease), opacity var(--press) var(--ease); -webkit-tap-highlight-color:transparent; }
.lyr-toggle:focus-visible, .clip-link:focus-visible, #select-all:focus-visible, .book-link:focus-visible, .linkbtn:focus-visible { color:var(--ink); }
.listen-links a:focus-visible, .top a:focus-visible { border-bottom-color:var(--ink); }
.social a:focus-visible { color:var(--ink); border-bottom-color:var(--ink); }
@media (hover:hover) {
  .lyr-toggle:hover, .clip-link:hover, #select-all:hover, .book-link:hover, .linkbtn:hover { color:var(--ink); }
  .listen-links a:hover, .top a:hover { border-bottom-color:var(--ink); }
  .social a:hover { color:var(--ink); border-bottom-color:var(--ink); }
}
.lyr-toggle:active, .clip-link:active, #select-all:active, .listen-links a:active, .listen a:active, .top a:active, .social a:active, .book-link:active, .linkbtn:active { opacity:.55; }

/* round controls */
.play, .x { transition:background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), opacity var(--press) var(--ease); -webkit-tap-highlight-color:transparent; }
.play:focus-visible { border-color:var(--ink); }
.x:focus-visible { background:#fff; }
@media (hover:hover) { .play:hover { border-color:var(--ink); } .x:hover { background:#fff; } }
.play:active, .x:active { opacity:.6; }

/* dish rows: the hover target is the whole row (name + play button), otherwise moving from the name to the
   play button un-hovers the name and it blinks */
.name { transition:opacity var(--t) var(--ease); }
@media (hover:hover) { .head:hover .name { opacity:.7; } }
.head:active .name { opacity:.5; }