/*
  Faking Fluency – INTERACTION SYSTEM (ff-ui.css + ff-ui.js). Every page loads both LAST.
  These are the site's rules for how anything responds to a finger, mouse or keyboard. Don't add one-off
  tap/hover/focus/press rules to page CSS; change them here.

  1. Tap flash:  none, anywhere (-webkit-tap-highlight-color: transparent on everything).
  2. Selection:  controls (buttons, button-style links, cards, tabs) can't be text-selected and
                 get no iOS long-press callout. Normal reading text stays selectable, and so do the study page's
                 dialogue lines (Oct 25, Brett: learners copy and look up the Thai).
  3. Focus:      no outline after a mouse click or tap. Keyboard focus only (:focus-visible) gets one soft ring:
                 2px #9db8d9. Same ring everywhere.
  4. Hover/tap:  never a shaded band or box behind text on hover. Dialogue lines get cursor: pointer; while a line's
                 audio plays its speaker icon turns blue and pulses gently (.ff-playing, set by ff-ui.js).
  5. Press:      ONE press look, for cards, line cards and big buttons only: a slightly darker fill + scale(.985), 80ms.
                 ff-ui.js adds .ff-press on pointerdown and clears it on pointerup / cancel / scroll / pageshow.
                 What counts as pressable: the PRESS list in ff-ui.js (or any element with class .ff-tap), incl. the
                 study page's dialogue line cards (.sentence). Never: small text links, the dashboard's blurred English (.peek).
*/
:root { --ff-focus: #9db8d9; --ff-press-shade: rgba(30, 64, 120, .07); }

/* 1. no tap flash */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }

/* 2. controls: no selection, no callout */
button, [role="button"], [role="tab"], .btn, .ff-tap,
.card, .card *, a.start {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}

/* dialogue lines: selectable text (the speaker icon isn't) */
.dialogue .sentence .sentence-text { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.dialogue .sentence i.material-icons { -webkit-user-select: none; user-select: none; }

/* 3. focus: keyboard only, one soft ring */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--ff-focus); outline-offset: 2px; }
/* cards whose title link stretches over the whole card: ring the card, not the title */
.card .cover:focus-visible { outline: none; }
.card:has(.cover:focus-visible) { outline: 2px solid var(--ff-focus); outline-offset: 2px; }

/* 4. dialogue lines: pointer, no hover band (pages never add :hover backgrounds to lines); the playing line's speaker turns blue */
.dialogue .container .sentence { cursor: pointer; }
/* body.dialog + .md-other so it beats study-polish's speaker colours */
body .dialogue .container .sentence.ff-playing i.material-icons,
body.dialog .dialogue .container .sentence.ff-playing i.material-icons.md-other { color: #2563eb; animation: ff-playing 1.2s ease-in-out infinite; }
@keyframes ff-playing { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .dialogue .container .sentence.ff-playing i.material-icons { animation: none; } }

/* 5. press: slightly darker fill (an inset shade, so it works on any colour) + a small dip */
.ff-tap { transition: transform .08s ease, box-shadow .08s ease, background-color .15s, border-color .15s, color .15s !important; }
.ff-press { transform: scale(.985) !important; box-shadow: inset 0 0 0 100vmax var(--ff-press-shade) !important; }
.card.ff-press { background-color: #dbe6f3; border-color: #9db4d6; box-shadow: none !important; }   /* the dashboard card press Brett approved */