/* Phrase Drill — additions to the Bible Hub audio player. Memorize 0.1 (2026-10-07).
   Loaded after the player's own styles; only touches drill elements. */

/* phrase spans inside a verse row: click to play; the highlight is the selection */
#rb .vrow .vt .rbph{border-radius:3px;padding:0 2px;cursor:pointer;transition:background .15s,color .15s}
#rb .vrow .vt .rbph:hover{background:#eef3fb}
#rb .vrow .vt .rbph.current{background:#ffff00;color:#1a1a1a}
#rb .vrow .vt .rbph.playing{background:#ffff00;color:#1a1a1a}
#rb .vrow .vt .rbph.current:hover{background:#ffff00}
body.rbmemorize #rb .vrow.active .vt .rbph{padding:0 4px}
/* no text selection / callout on press-and-hold (touch peeks a hidden phrase) */
body.rbdrill #rb .vrow .vt{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* verse number: click for the whole verse — never hidden */
body.rbdrill #rb .vrow .vn{cursor:pointer}
body.rbdrill #rb .vrow .vn:hover{color:#017bce;text-decoration:underline}

/* ── the passage: only its verses are shown; the visible rows get their own
   stripes (the player's nth-child stripes would count the hidden rows) ──── */
body.rbdrill #rb .vrow.rb-outside{display:none}
body.rbdrill #rb .vrow{background:#fff;box-shadow:none}
body.rbdrill #rb .vrow.rb-alt{background:#f7f7f7}
body.rbdrill #rb .vrow:hover{background:#eef3fb}
body.rbdrill #rb .vrow.active{background:#dfeafb;box-shadow:inset 3px 0 0 #4479ba}
/* the verse you are working on (amber edge until the audio makes it "active") */
body.rbdrill #rb .vrow.rb-drillsel{box-shadow:inset 3px 0 0 #f59e0b}
body.rbdrill #rb .vrow.rb-drillsel.active{box-shadow:inset 3px 0 0 #4479ba}

/* "Add John 3:19 to the passage →" / "Go on to John 4 →" after the last verse:
   page navigation, kept apart from the practice controls — a quiet bar like the
   chapter footer beneath it, in the site's bold blue link */
.rb-dcontinue{padding:9px 12px;text-align:center;font-family:Arial,Helvetica,sans-serif;background:#fafcff;border-top:1px solid #e3ecf6}
.rb-dcontinue[hidden]{display:none}
.rb-dcontinue a{color:#4479ba;font-weight:bold;font-size:13.5px;text-decoration:none}
.rb-dcontinue a:hover{text-decoration:underline}
.rb-dcontinue a:focus-visible{outline:2px solid #4479ba;outline-offset:2px;border-radius:3px}

/* ── the panel (revision 12, 2026-09-24): always open, grouped by function ──
   Top      [Listen and repeat] [Type the first letters]
   Box      the chosen practice's controls:
              Listen:  After each phrase ···  (Gap ···)   Phrase length ···
                       Text display ·····
              Type:    Hear each phrase  Before I type it · After I type it
                       Your turn · type the first letter of each word  12 right · 2 missed · 38 to go  [Show this word] [Start over]
   Always   [← Previous phrase] [▶ Play phrase] [Next phrase →] [↑ Review verse so far]
   No hint line and no "Now Playing" line in drill mode; a key press is echoed
   by a pill floating above the bar (.rb-dtoast). No key badges on buttons.
   Colours are the player's own: white / #eaf3fe controls, #b6d2ef borders,
   #2f6bb3 text, #4479ba primary, on the bar's #dcecfb.                     */
body.rbdrill #nowPlaying{display:none}
.rb-drillline{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:0}
.rb-drillline:focus{outline:none}    /* it takes keyboard focus back from the header iframe (drill.js) */
.rb-dmsg{font-size:13px;color:#1f3f66;text-align:center;line-height:1.3;padding:2px 0 6px}   /* outside the panel: shows even when the drill never started */
.rb-dmsg:empty{display:none}          /* only errors are ever written here */
.rb-dmsg b{color:#017bce}

.rb-dpanel{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}

/* the practice tabs and the box beneath */
.rb-dgroup{width:100%;max-width:900px;display:flex;flex-direction:column;align-items:stretch;font-family:Arial,Helvetica,sans-serif}
.rb-dtop{display:flex;align-items:flex-end;justify-content:flex-start;gap:6px 14px;padding:0 4px}
.rb-dtop .rb-dsmall-level{margin-left:auto}     /* Phrase length: a small dropdown on the tab line (revision 13), shared by both practices */
.rb-dtabs{display:inline-flex;gap:3px}
.rb-dtab{position:relative;top:1px;z-index:1;font:inherit;font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:bold;line-height:1;
         padding:8px 14px;border:1px solid #b6d2ef;border-bottom:0;border-radius:7px 7px 0 0;background:#eaf3fe;color:#2f6bb3;cursor:pointer}
.rb-dtab:hover:not(.on){background:#f2f7fe}
.rb-dtab.on{background:#fff;color:#1f3f66;padding-bottom:9px}   /* one pixel taller: it covers the box's top border and merges with it */
.rb-dtab:focus-visible{outline:2px solid #4479ba;outline-offset:-3px}
.rb-dbox{border:1px solid #b6d2ef;border-radius:0 7px 7px 7px;background:#fff;padding:8px 10px}
.rb-dmode{display:flex;flex-direction:column;align-items:center;gap:6px}
.rb-dline{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 18px}   /* a line of the Listen box: its groups wrap only when they must */
.rb-dmode[hidden]{display:none}
.rb-dtype-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;font-size:12.5px;color:#33597f}
.rb-dtype-hint{font-weight:bold}
.rb-dtype-hint.rb-turn{color:#b45309}       /* "Your turn": the amber of the Pause button */
.rb-dscore{color:#5f7d9f;white-space:nowrap}
.rb-dscore[hidden]{display:none}

/* the transport row's buttons — one line: icon · label */
.rb-dctl{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;box-sizing:border-box;
         font:inherit;font-family:Arial,Helvetica,sans-serif;padding:0 11px;border:1px solid #b6d2ef;border-radius:6px;
         background:#fff;color:#2f6bb3;cursor:pointer;transition:background .12s,border-color .12s,transform .05s}
.rb-dctl:hover{background:#f2f7fe;border-color:#9cc0e8}
.rb-dctl:active{transform:translateY(1px)}
.rb-dctl:disabled{opacity:.38;cursor:default;transform:none}
.rb-dctl:disabled:hover{background:#fff;border-color:#b6d2ef}
.rb-dctl:focus-visible{outline:2px solid #4479ba;outline-offset:2px}
.rb-dctl-l{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;white-space:nowrap;line-height:1}
.rb-di{font-size:14px;line-height:1}
.rb-dctl-pri{background:#4479ba;border-color:#4479ba;color:#fff;padding:0 14px;min-width:132px}
.rb-dctl-pri:hover{background:#3a69a6;border-color:#3a69a6}
.rb-dctl-pri:disabled:hover{background:#4479ba}
.rb-dctl-pri.is-playing{background:#b45309;border-color:#b45309}
.rb-dctl-pri.is-playing:hover{background:#9a4408}
.rb-dnav{gap:8px 10px}

/* pills: the Type box's buttons */
.rb-dpill{display:inline-flex;align-items:center;gap:6px;height:27px;padding:0 10px;
          font:inherit;font-family:Arial,Helvetica,sans-serif;font-size:12.5px;font-weight:500;white-space:nowrap;
          border:1px solid #b6d2ef;border-radius:6px;background:#eaf3fe;color:#2f6bb3;cursor:pointer;
          transition:background .12s,border-color .12s,transform .05s}
.rb-dpill:hover{background:#dceafb;border-color:#9cc0e8}
.rb-dpill:active{transform:translateY(1px)}
.rb-dpill:disabled{opacity:.38;cursor:default;transform:none}
.rb-dpill:disabled:hover{background:#eaf3fe;border-color:#b6d2ef}
.rb-dpill:focus-visible{outline:2px solid #4479ba;outline-offset:2px}
.rb-dpill .rb-di{font-size:14px;color:#4479ba}

/* settings: labelled rows of segmented buttons (Gap sits inside the rhythm row, only with "Pause, then next") */
.rb-dlevel{display:flex;align-items:center;justify-content:center;gap:6px 8px;font-size:12px;color:#33597f;white-space:nowrap;flex-wrap:wrap}
.rb-dlevel[hidden]{display:none}
.rb-dlevel-l{font-weight:bold}
.rb-dgap{display:inline-flex;align-items:center;gap:6px;margin-left:8px}
.rb-dgap[hidden]{display:none}
.rb-dseg{display:inline-flex;flex-wrap:wrap;border:1px solid #b6d2ef;border-radius:5px;overflow:hidden;background:#fff}
.rb-dlvl{font:inherit;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.2;padding:3px 9px;border:0;border-left:1px solid #dbe7f3;
         background:#fff;color:#2f6bb3;cursor:pointer;white-space:nowrap}
.rb-dlvl:first-child{border-left:0}
.rb-dlvl:hover:not(.on){background:#f2f7fe}
.rb-dlvl.on{background:#4479ba;color:#fff}
.rb-dlvl:focus-visible{outline:2px solid #4479ba;outline-offset:-2px}
.rb-drillline kbd{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:9.5px;line-height:1.3;padding:0 4px;margin-left:3px;border-radius:3px;
             background:#eaf3fe;border:1px solid #b6d2ef;border-bottom-width:1px;color:#33597f;white-space:nowrap}
.rb-dabbr{display:none}               /* phone-width short labels (see the media rule) */
/* key caps on the transport buttons: the arrows, and "space" on Play, are keys
   you can press - the same cap as the L/H/A/G badges, so one language throughout */
.rb-dctl kbd.rb-dkc{font-family:inherit;font-size:13px;line-height:1;padding:3px 5px;margin:0;border-radius:3px;background:#eaf3fe;border:1px solid #b6d2ef;color:#2f6bb3}
.rb-dctl-pri kbd.rb-dkc{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:9.5px;line-height:1.3;padding:1px 5px;font-weight:normal;
                        background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55);color:#fff}

/* the key legend — a small key · action list at the right of the panel, out of
   the main column; only on wide screens with a pointer (tooltips carry the
   keys everywhere else). While typing, its settings line becomes the letters. */
#rbPlayer .rb-dkeys{position:absolute;right:18px;top:10px;display:flex;flex-direction:column;gap:3px;   /* anchored to the full-width bar, clear of the centred group */
          font-size:11px;line-height:1.3;color:#5f7d9f;text-align:left}
.rb-dkeys-t{font-weight:bold;color:#33597f;margin-bottom:1px}
.rb-dk{display:flex;align-items:center;gap:3px}
.rb-dk kbd{margin:0}
.rb-dk span{margin-left:4px}
.rb-dk-type{display:none}
body.rb-typing .rb-dk-type{display:flex}
body.rb-typing .rb-dk-set{display:none}
body.rb-quiet .rb-dk-audio{display:none !important}   /* 'Hear each phrase: Not at all': the audio keys do nothing */
@media (max-width:1339px){ .rb-dkeys{display:none !important} }   /* narrower: it would sit on the 900 px group */
@media (hover:none){
  .rb-dkeys{display:none !important}
  .rb-drillline kbd{display:none}
  .rb-drillline kbd.rb-dkc{display:inline;background:none;border:0;padding:0;font-size:14px}   /* no keys: the arrow stays, the cap goes */
  .rb-drillline kbd.rb-dkc-space{display:none}
}

body:not(.rbdrill) .rb-drillline{display:none}

/* no pulse, shake or blink for people who asked their system for less motion */
@media (prefers-reduced-motion:reduce){
  body.rb-waiting #rb .vrow .vt .rbph.current,body.rb-turn #rb .vrow .vt .rbph.current,
  #rb .vrow .vt .rbph.typing .rbw.shake,body.rb-turn #rb .vrow .vt .rbph.typing .rbw.next .rbw-w{animation:none !important}
}

/* the echo of a key press: a pill floating above the bar for a moment */
#rbPlayer .rb-dtoast{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);z-index:5;
  max-width:92vw;padding:7px 14px;border-radius:7px;background:#1f3f66;color:#fff;
  font:13px/1.35 Arial,Helvetica,sans-serif;text-align:center;box-shadow:0 3px 12px rgba(0,0,0,.22);
  opacity:0;transition:opacity .15s;pointer-events:none}
#rbPlayer .rb-dtoast.show{opacity:1}

/* phones: thumb-sized transport that wraps (Review verse so far on its own
   line); Previous phrase is its arrow alone; the tabs (Listen / Type) and
   the settings use their short labels */
@media (max-width:600px){
  .rb-drillline{gap:6px}
  .rb-dnav{gap:6px 8px}
  .rb-dctl{height:42px;padding:0 12px}
  .rb-dctl-l{font-size:14.5px}
  .rb-dctl .rb-di{font-size:17px}
  #rbdPrev .rb-dw{display:none}
  #rbdPrev{padding:0 14px}
  .rb-dctl-pri{min-width:0;padding:0 16px}
  .rb-dpill{height:30px;padding:0 9px;font-size:12px}
  .rb-dfull{display:none}
  .rb-dabbr{display:inline}
  .rb-dgap{margin-left:0}
  .rb-dtab{font-size:13px;padding:7px 12px}
  .rb-dbox{padding:5px 6px}
  .rb-dmode{gap:4px 10px}
  .rb-dtop{flex-wrap:wrap}
  .rb-dtop .rb-dsmall-level{order:-1;width:100%;justify-content:center;padding-bottom:4px}   /* its own line above the tabs */
}

/* ── revision 13: labels that follow the tab or the edition ─────────────────
   The first tab reads "Listen and repeat" with a narrator and "Read and
   recite" without (body.rb-silent); the fourth transport button reads
   "Review verse so far" in Listen and "Retype this verse" in Type
   (body.rb-typing); the key legend's row for it follows. Without narration
   the rhythm row, the Hear-each-phrase row, Play and the audio key rows are
   away, and the player's "Read by" slot is empty (body.rb-textonly). Nothing
   names the absence: the version menu tags the versions WITH narration. */
.rb-dlisten-t{display:none !important}
body.rb-silent .rb-dlisten-a{display:none !important}
body.rb-silent .rb-dfull.rb-dlisten-t{display:inline !important}
.rb-dup-t{display:none !important}
body.rb-typing .rb-dup-l{display:none !important}
body.rb-typing .rb-dfull.rb-dup-t,body.rb-typing .rb-dk .rb-dup-t{display:inline !important}
body.rb-silent #rbdAfterRow,body.rb-silent #rbdHearRow,body.rb-silent #rbdPlay,body.rb-silent .rb-dk-audio{display:none !important}
#rbdPlay[hidden]{display:none !important}   /* 'Hear each phrase: Not at all' hides Play by the attribute; .rb-dctl's display would win otherwise */
/* without narration the first tab is away - typing is the practice (the owner, 2026-09-28); since 0.2c on
   phones too (they type through the phone's keyboard since 0.1; the owner: "the Read tab ... shouldn't be") */
body.rb-silent .rb-dtab[data-val=listen],body.rb-silent .rb-dk-esc{display:none !important}
body.rb-silent #rbdListen .rb-dline:first-child{display:none}   /* it held only the rhythm row */
body.rb-textonly #rb .thead .spk-wrap{display:none}
#versionMenu .rb-vtag{margin-left:8px;font-size:10.5px;font-weight:bold;color:#2f6bb3;background:#eaf3fe;border:1px solid #b6d2ef;border-radius:3px;padding:1px 6px;white-space:nowrap;vertical-align:1px}
#versionMenu .rb-vtag[hidden],#versionMenu .rb-vitem[hidden],#voiceMenu .rb-vitem[hidden],#voiceMenu .rb-vgroup[hidden]{display:none !important}
#versionMenu .rb-vsep{display:block;border-top:1px solid #dbe7f3;margin:4px 0}

/* ── hidden words ───────────────────────────────────────────────────────
   .hidden  the phrase is masked (transparent text on a soft block); the
            highlight colour stays so you can see where you are
   .letters first letter and punctuation stay, the rest of each word is gone
   .typing  Type the first letters, see below
   Hover (mouse) or press-and-hold (.peek, touch) shows the words. */
#rb .vrow .vt .rbph.hidden{color:transparent !important;background:#e6e1d3;border-radius:4px;text-shadow:none}
#rb .vrow .vt .rbph.hidden.current{background:#ffff00}
#rb .vrow .vt .rbph.hidden.playing{background:#ffff00}
#rb .vrow .vt .rbph.hidden:hover,#rb .vrow .vt .rbph.hidden.peek{color:#1a1a1a !important}
#rb .vrow .vt .rbph.letters .rbw-r{display:none}                     /* compact cues: "F G s l t w" */
#rb .vrow .vt .rbph.letters:hover .rbw-r,#rb .vrow .vt .rbph.letters.peek .rbw-r{display:inline}
#rb .vrow .vt .rbph.letters{letter-spacing:.06em}
#rb .vrow .vt .rbph.letters:hover,#rb .vrow .vt .rbph.letters.peek{letter-spacing:0}

/* the silence in "Pause, then next": the selection breathes so the quiet never
   looks like a crash */
@keyframes rbpulse{0%,100%{background:#ffff00}50%{background:#fff8b0}}
body.rb-waiting #rb .vrow .vt .rbph.current{animation:rbpulse 1.1s ease-in-out infinite}

/* ── Type the first letters (revision 11; a practice tab since revision 12) ──
   .typing  every word is a block until its first letter is typed: .ok shows
            it, .miss shows it in red (a wrong key first, two wrong keys, or
            "Show this word"), .next is the word to type, .shake is a wrong key.
            No hover peek: two wrong keys or the button show the word. */
#rb .vrow .vt .rbph.typing .rbw{display:inline-block}
/* the block covers the letters only (.rbw-w): a quote or a comma stays visible while the word is hidden */
#rb .vrow .vt .rbph.typing .rbw-w{display:inline-block;background:#e6e1d3;border-radius:3px;color:transparent;transition:background .15s,color .15s}
#rb .vrow .vt .rbph.typing .rbw.ok .rbw-w{background:transparent;color:inherit}
#rb .vrow .vt .rbph.typing .rbw.miss .rbw-w{background:transparent;color:#b3261e}
#rb .vrow .vt .rbph.typing .rbw.next .rbw-w{box-shadow:0 2px 0 0 #f59e0b}
@keyframes rbshake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}
#rb .vrow .vt .rbph.typing .rbw.shake{animation:rbshake .3s}
#rb .vrow .vt .rbph.typing .rbw.shake .rbw-w{background:#f3c9c4}

/* "Your turn" (Type the first letters): a play has ended and the next key is
   yours - the phrase breathes (the Listen mode's silence pulse) and the mark
   under the next word blinks like a caret, until the first key */
body.rb-turn #rb .vrow .vt .rbph.current{animation:rbpulse 1.1s ease-in-out infinite}
@keyframes rbcaret{0%,49%{box-shadow:0 2px 0 0 #f59e0b}50%,100%{box-shadow:0 2px 0 0 transparent}}
body.rb-turn #rb .vrow .vt .rbph.typing .rbw.next .rbw-w{animation:rbcaret 1s step-end infinite}

/* In drill mode the panel is the transport: hide the player's own pill
   (prev / play / next chapter, time, seek, volume). */
body.rbdrill #rbPlayer .rb-pill{display:none !important}

/* For now: hide the player's option dropdowns (reading mode, end-of-chapter,
   sleep, speed, background, popout, drill toggle) and the mobile toggle that
   reveals them. Delete these two lines to bring them back. */
#rbPlayer #rbRow2{display:none !important}
#rbPlayer #rbOptsToggle{display:none !important}

/* phones: the swapped labels (Read and recite / Retype this verse) use their short
   forms - placed last so they win over the base rules above at equal specificity */
@media (max-width:600px){
  body.rb-silent .rb-dfull.rb-dlisten-t{display:none !important}
  body.rb-silent .rb-dabbr.rb-dlisten-t{display:inline !important}
  body.rb-typing .rb-dfull.rb-dup-t{display:none !important}
  body.rb-typing .rb-dabbr.rb-dup-t{display:inline !important}
}

/* the version menu looks exactly like the audio page's (one alphabetical list);
   drill.js caps its height to the space above the bar (fitMenus) */

/* Passage / Chapter Hint (2026-09-28): while it is held, every typing block is plain text */
body.rb-hint #rb .vrow .vt .rbph.typing .rbw-w{background:transparent;color:inherit}
body.rb-hint #rb .vrow .vt .rbph.typing .rbw.miss .rbw-w{color:#b3261e}
/* Phrase Hint: the highlighted phrase's blocks are lifted while the pill is held (peek on its spans) */
#rb .vrow .vt .rbph.typing.peek .rbw-w{background:transparent;color:inherit}
#rb .vrow .vt .rbph.typing.peek .rbw.miss .rbw-w{color:#b3261e}

/* 0.2 (the review): a hidden word is hidden from screen readers too. Transparent letters are still
   read aloud, so they are made invisible as well (the block keeps its size) and the screen reader
   hears "hidden word" / "hidden phrase" instead (CSS alt text; a browser without it reads nothing).
   The same states that show the words (typed, missed, a hint, a peek, hover) bring them back. */
body:not(.rb-hint) #rb .vrow .vt .rbph.typing:not(.peek) .rbw:not(.ok):not(.miss) .rbw-w > *{visibility:hidden}
body:not(.rb-hint) #rb .vrow .vt .rbph.typing:not(.peek) .rbw:not(.ok):not(.miss) .rbw-w::before{content:"" / "hidden word"}
#rb .vrow .vt .rbph.hidden:not(:hover):not(.peek) > *{visibility:hidden}
#rb .vrow .vt .rbph.hidden:not(:hover):not(.peek)::before{content:"" / "hidden phrase"}

/* the small 'Sound' dropdown */
/* ... on the tab line after Phrase length, only while typing (it needs no room in the Type row, which must stay one line once the score shows) */
.rb-dsmall{display:none;align-items:center;gap:4px;padding-bottom:6px;font-size:11.5px;color:#5f7d9f;white-space:nowrap}
body.rb-typing .rb-dsmall{display:inline-flex}
.rb-dsmall-level{display:inline-flex}          /* Phrase length shows in both practices */
.rb-dsmall-level[hidden]{display:none !important}
.rb-dsmall select{font:inherit;font-size:11.5px;color:#2f6bb3;border:1px solid #b6d2ef;border-radius:4px;background:#fff;padding:1px 2px}

/* ── phones (0.1, 2026-10-07): the compact bar, body.rb-mob (drill.js: a touch screen up to 820 px) ──
   One row - ← · Play · → · Review - with "Settings" and "Hide" beneath. Settings closed: the tabs and
   the practice's box are away (while typing, its status line stays: the score, the hints, Reveal word,
   Keyboard). Hide: the bar folds to a "Show controls" strip. Typing goes through the phone's keyboard
   (the hidden #rbdKbd field); while it is up the bar rides on it and Settings / Hide step aside. */
.rb-dmob,.rb-dkbdbtn{display:none}
.rb-dkbd{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;border:0;padding:0;margin:0;font-size:16px;pointer-events:none}   /* 16 px: iOS zooms into smaller fields */
.rb-dmobbtn{background:none;border:0;padding:3px 8px;font:600 13px/1.2 Arial,Helvetica,sans-serif;color:#2f6bb3;cursor:pointer}
.rb-dcv{font-size:11px}
body.rb-mob .rb-dkbdbtn{display:inline-flex}
body.rb-mob .rb-drillline{gap:5px}
body.rb-mob .rb-dnav{flex-wrap:nowrap;gap:6px}
body.rb-mob .rb-dctl{height:40px;padding:0 11px}
body.rb-mob #rbdNextP .rb-dw{display:none}
body.rb-mob #rbdNextP,body.rb-mob #rbdPrev{padding:0 15px}
body.rb-mob:not(.rb-mobset):not(.rb-typing) .rb-dgroup{display:none}
body.rb-mob:not(.rb-mobset).rb-typing .rb-dtop,
body.rb-mob:not(.rb-mobset).rb-typing #rbdHearRow{display:none}
body.rb-mob:not(.rb-mobset).rb-typing .rb-dbox{border:0;background:none;padding:0}
/* typing with Settings closed: one line - the score, Reveal word, Keyboard (the hint text, the two hints
   and Start over are under Settings); with the keyboard up, the Keyboard pill steps aside */
body.rb-mob:not(.rb-mobset).rb-typing #rbdTypeHint,
body.rb-mob:not(.rb-mobset).rb-typing #rbdRestart{display:none}
body.rb-mob:not(.rb-mobset).rb-typing .rb-dtype-status{flex-wrap:nowrap;justify-content:center;gap:8px}
/* the phone keyboard is up (2026-10-07, the owner's screenshot: a full Settings panel on top of the keyboard
   left no room for the verses): whatever Settings says, the bar is the score line and the transport only */
body.rb-kbdup .rb-dtop,body.rb-kbdup #rbdHearRow,body.rb-kbdup #rbdTypeHint,body.rb-kbdup #rbdRestart,body.rb-kbdup .rb-dmobbtns,body.rb-kbdup .rb-dmode-listen{display:none !important}
body.rb-kbdup .rb-dgroup{display:flex !important}
body.rb-kbdup .rb-dbox{border:0;background:none;padding:0}
body.rb-kbdup .rb-dtype-status{flex-wrap:nowrap;justify-content:center;gap:8px}
body.rb-kbdup .rb-dctl{height:36px}
body.rb-kbdup .rb-drillline{gap:4px}

/* phones, revision 3 (the owner, 2026-10-08: "tighter and clearer"): Settings / Hide are the bar's own top line,
   right-aligned inside its border; while typing, the score shares that line at the left (so the Type box's own
   score stays away on phones). Folded away, the bar is one full-width "Show controls" strip, clear of the ad's close
   button. Phrase length sits on the tab line, right of Type / Listen. */
body.rb-mob .rb-dmob{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;max-width:900px;
  margin:-6px 0 -2px;min-height:26px}
.rb-dmobstat{font:12.5px Arial,Helvetica,sans-serif;color:#33597f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:not(.rb-typing) .rb-dmobstat{visibility:hidden}
.rb-dmobbtns{display:inline-flex;align-items:center;flex:none}
body.rb-mob .rb-dmobbtn{padding:5px 8px;font-size:12.5px}
body.rb-mob .rb-dmobsep{width:1px;height:14px;background:#b6d2ef}
body.rb-mob #rbdScore{display:none !important}
.rb-dshow{display:none}
body.rb-mob.rb-mobhide #rbDrillLine,body.rb-mob.rb-mobhide .rb-dmsg{display:none !important}
body.rb-mob.rb-mobhide .rb-dshow{display:block;width:100%;height:36px;box-sizing:border-box;border:0;background:none;
  font:600 14px Arial,Helvetica,sans-serif;color:#2f6bb3;cursor:pointer;text-align:center}
body.rb-mob.rb-mobhide #rbPlayer .in{padding-top:0;padding-bottom:0;gap:0}
body.rb-mob .rb-dtop{flex-wrap:wrap;align-items:flex-end}
body.rb-mob .rb-dtop .rb-dsmall-level{order:0;width:auto;margin-left:auto;justify-content:flex-end;padding-bottom:6px}
body.rb-mob .rb-dtop .rb-dsmall:not(.rb-dsmall-level){margin-left:auto}
/* tighter (2026-10-08): slimmer padding and top line on phones; the folded strip spans the full width; with the
   keyboard up the top line only shows once there is a score (Settings / Hide step aside then) */
body.rb-mob #rbPlayer .in{padding-top:4px;padding-bottom:7px}
body.rb-mob .rb-dmob{margin:-2px 0 -3px;min-height:22px}
body.rb-mob .rb-dmobbtn{padding:3px 8px}
body.rb-mob.rb-mobhide #rbPlayer .in{padding:0}
body.rb-kbdup .rb-dmob:has(.rb-dmobstat:empty){display:none}

/* the three hints as ONE small group (the owner, 2026-10-08: "reduce the size of the 3 hint buttons"):
   Hint [Phrase | Passage | Word] - Phrase and Passage show while held, Word reveals the word (counted missed) */
.rb-dhints{display:inline-flex;align-items:center;flex:none}
.rb-dhints-l{font:12px Arial,Helvetica,sans-serif;color:#5f7d9f;margin-right:5px}
.rb-dhint{height:26px;padding:0 9px;margin:0 0 0 -1px;font:500 12.5px Arial,Helvetica,sans-serif;white-space:nowrap;
  border:1px solid #b6d2ef;background:#eaf3fe;color:#2f6bb3;cursor:pointer;border-radius:0;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.rb-dhint:first-of-type{border-radius:6px 0 0 6px;margin-left:0}
.rb-dhint:last-child{border-radius:0 6px 6px 0}
.rb-dhint:hover{background:#dcebfc}
.rb-dhint:active{background:#4479ba;color:#fff;border-color:#4479ba}
.rb-dhint:disabled{opacity:.45;cursor:default}
.rb-dhint:focus-visible{outline:2px solid #4479ba;outline-offset:1px;position:relative;z-index:1}
/* the instruction: one line, never wrapped */
#rbdTypeHint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* phones: the tabs sit ON their box again - Phrase length and Sound share the tab line (short labels, fixed-width
   dropdowns; the full list opens in the phone's own picker), so nothing wraps in between (2026-10-08) */
body.rb-mob #rbPlayer .in{padding-left:10px;padding-right:10px}
body.rb-mob .rb-dtop{flex-wrap:nowrap;gap:6px}
body.rb-mob .rb-dtop .rb-dsmall-level{margin-left:auto}
body.rb-mob .rb-dtop .rb-dsmall:not(.rb-dsmall-level){margin-left:0}
body.rb-mob .rb-dtop .rb-dsmall{font-size:11.5px;gap:3px}
body.rb-mob .rb-dtop .rb-dsmall kbd{display:none}
body.rb-mob .rb-dtop .rb-dsmall-level .rb-dlab-full{display:none}
body.rb-mob .rb-dtop .rb-dsmall-level .rb-dlab-short{display:inline}
body.rb-mob #rbdLevelSel{width:72px}
body.rb-mob #rbdSound{width:64px}
body.rb-mob .rb-dtab{padding:6px 11px}
body.rb-mob #rbdTypeHint{font-size:12.5px}
.rb-dlab-short{display:none}
body.rb-mob .rb-dtype-status .rb-dpill{height:26px;font-size:12.5px;padding:0 9px}   /* the same height as the Hint group */

/* Start over and the keyboard as icons on phones (the owner, 2026-10-08): ↻ and a keyboard, the same height as the
   Hint group, on its line; the keyboard is lit while it is open. Desktop keeps the words (and has no keyboard pill). */
.rb-dico{display:none;width:17px;height:17px}
body.rb-mob .rb-dicobtn .rb-dico{display:block}
body.rb-mob .rb-dicobtn .rb-dlbl{display:none}
body.rb-mob .rb-dtype-status .rb-dicobtn{width:34px;padding:0;justify-content:center}
body.rb-mob .rb-dkbdbtn.on{background:#4479ba;border-color:#4479ba;color:#fff}
body.rb-mob .rb-dtype-status{flex-wrap:wrap;justify-content:center;gap:6px}
body.rb-mob #rbdTypeHint{flex:0 0 100%;text-align:center}   /* its own line; Hint, ↻ and the keyboard share the next */