/* .q-transport-btn - generic play/prev/next icon-button hover, same
   values as surah_detail.html's real player (.q-surah-nav-btn,
   surah-player.css), reused here under a generic name (own report: "on
   va utiliser ça une autre page pour les ayat") instead of loading
   surah-player.css itself (that file assumes surah_detail.html's full
   DOM - #q-seek, #q-volume, popovers/submenus - not safe to load
   elsewhere). Transparent at rest AND on hover - only the icon color
   shifts (app-sub -> app-text). Needs .q-icon-btn (input.css,
   global) already on the same element for shape/size. */
.q-transport-btn {
    background: transparent;
    color: var(--app-sub);
}
.q-transport-btn:hover,
.q-transport-btn:focus-visible {
    background: transparent;
    color: var(--app-text);
}
/* Requested physical layout (own report):
   - LTR left-to-right: play, next, title - already the natural order,
     DOM is play/next/title and LTR main axis starts at the left.
   - RTL right-to-left: next, play, title - NOT the mirror of LTR, so
     under html[dir="rtl"] (main axis starts at the right) reorder
     explicitly: next first (rightmost), play second, title last
     (leftmost). */
html[dir="rtl"] #q-ayah-transport-row [data-q-transport-next] {
    order: 1;
}
html[dir="rtl"] #q-ayah-transport-row [data-q-transport-play] {
    order: 2;
}
html[dir="rtl"] #q-ayah-transport-row [data-q-transport-title] {
    order: 3;
}
/* Stays on this "open" look even under a simultaneous :hover (own
   report: "meme si je fais un hover dessus") - placed *after* :hover
   above on purpose, same tie-break every other cascade order question
   in this file already relies on (last rule of equal specificity wins). */
[data-q-surah-row-menu-toggle][aria-expanded="true"] {
    background: var(--app-link-soft);
    border-color: var(--app-link);
    color: var(--app-link);
    font-weight: 600;
}