/* ==========================================================================
   Recitation — the mark on the page, and the menu that drives it
   ========================================================================== */

/* One mark, whatever put it there. The word being pointed at and the word
   being recited are marked the same way: coloured ink, and on the light sheet
   a wash behind it. There is no band across the ayah.

   Weight and size are what nothing here may touch. Both change how wide a word
   is drawn, and the mushaf fits every line by measuring its words, so either
   would shift the line under the pointer. Colour and background are free —
   neither changes a glyph's metrics — and the reason the light sheet needs
   both is set out where the colours are chosen, below. */

/* Warm, and deliberately not blue.

   Blue is the wrong family for this. The page sets its words in a near-black
   that is itself cool and dark, so a blue dark enough to read is barely
   distinguishable from the words around it — the deep blue tried first sat
   only 18 ΔE from the body text — and a lighter blue is the page's own mark
   colour, which the ayah numbers are already drawn in.

   A warm hue escapes both at once. Red is also the colour a mushaf has always
   used for what is written alongside the text rather than as part of it: the
   waqf marks, the tajwid, the annotations. It belongs here in a way a second
   blue does not.

   The two sheets need different tools, and it took a wrong turn to see why.

   On the dark sheet the ink and the type sit at the same lightness — L* 68
   against L* 68 — and differ only in colourfulness. The marked word neither
   steps forward nor falls back; it is the same word, coloured. Nothing more is
   needed there.

   The light sheet cannot do that, and no red will fix it. Its type is a
   near-black at L* 15, so there is no room underneath: a red dark enough to
   carry the same weight (L* 20) has to give up so much chroma that it reads as
   black, and a red colourful enough to read as red (L* 44) sits twenty-eight
   points lighter than its neighbours — 5.5:1 against the page where the type
   holds 14.8:1, so the one word meant to stand out has a third of the presence
   of every word beside it. Darkening the ink to escape that only traded a
   faint mark for a black one.

   So on the light sheet the ink is allowed to be properly red, and a wash
   behind the word carries the presence instead. A background moves no type —
   the rule at the top of this file is about weight and size, which change how
   wide a word is drawn and would reflow the line; a background changes
   nothing's metrics. It is kept to a wash rather than the box this once had,
   because a box read as a change of subject rather than as the same page
   carrying on.

   The dark sheet takes no wash: its ink already works, and one there would be
   a patch of glow behind text that needed no help. */
:root {
  --r-point: #c62828;
  /* The wash behind the marked word. Mixed from the ink, so the two can never
     disagree about what colour the mark is. */
  --r-wash: color-mix(in srgb, var(--r-point) 13%, transparent);
  /* A third of the mark's strength, the alpha the app flashes at. */
  --r-flash: color-mix(in srgb, var(--r-point) 33%, transparent);
}

/* The dark sheet wants the ink opened from crimson towards coral — the type
   there is a soft grey rather than near-black, and crimson goes muddy against
   it. One variable, so the pointed-at word and the recited one follow it
   together: they are the same mark, and there is nothing here to set apart. */
body.dark-mode {
  --r-point: #f08a72;
  --r-wash: transparent;
  --r-flash: color-mix(in srgb, var(--r-point) 33%, transparent);
}

.m-word { transition: color 140ms ease; }

.m-word.r-hover-word,
.m-word.r-hover-word.m-end,
.m-word.r-word,
.m-word.r-word.m-end {
  color: var(--r-point);
  background: var(--r-wash);
  /* Spread rather than padding: padding would widen the word and shift the
     line it sits on. A shadow is drawn outside the box and costs the layout
     nothing. */
  box-shadow: 0 0 0 2px var(--r-wash);
  border-radius: 2px;
}

/* The ayah arrived at from a search, marked long enough to be found by eye and
   then let go: 2.2s held and 0.8s fading, as the app flashes it.

   One band a line, behind the words, drawn from their measured extent rather
   than washed onto each word: a line is justified by spacing its words, so the
   gaps are not text and a per-word wash leaves them empty. Behind, so nothing
   is drawn over the type, and it moves no glyph — the rule at the top of this
   file is about weight and size, and this touches neither. */
.r-flash-band {
  position: absolute;
  z-index: -1;
  border-radius: 3px;
  background: var(--r-flash);
  pointer-events: none;
  animation: r-flash 3s ease-out 1 forwards;
}

@keyframes r-flash {
  0%, 73% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* The blanket rule in style.css cuts every animation to 0.01ms, which would
     leave the ayah unmarked at all. A wash appearing and fading is a change of
     colour rather than motion, so this one keeps its time. */
  .r-flash-band { animation-duration: 2.4s !important; }
}

/* A word is only worth pointing at where there is a recitation to start from
   it, and where the word is part of an ayah — the Basmalah heading a surah is
   drawn from the same spans but belongs to no ayah, so there is nothing to
   start. Everywhere else it is text, and a hand cursor over text promises
   something that would not happen. */
body.is-reciting .m-word[data-a] { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .m-word { transition: none; }
}

/* --- the player, which lives inside the menu -----------------------------
   There is no bar along the foot of the page. One would stand there through
   every reading, taking a strip from people who are not listening to anything,
   to offer controls that mean nothing until a recitation is running. The menu
   a word opens is the player instead — and since it can be dragged anywhere
   and shut, it costs the page nothing when it is not wanted.

   Everything below is scoped to #r-menu on purpose. The generic rule for the
   menu's action rows carries an id, so a plain class here would lose to it and
   the round transport buttons would come out full width. */

#r-menu .r-now {
  padding: 2px 2px 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

#r-menu .r-now[hidden] { display: none; }

/* How far through the surah the recitation is. It reports and nothing more —
   no dragging, no pointer, no handle. A thin line that could be dragged is an
   invitation to scrub a two-hour file by the pixel, which is a poor way to
   find an ayah when the words themselves are right there to click. */
#r-menu .r-seek {
  position: relative;
  height: 8px;
  pointer-events: none;
}

#r-menu .r-seek::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 3px;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
}

#r-menu .r-played {
  position: absolute;
  top: 3px;
  inset-inline-start: 0;
  height: 3px;
  width: 0;
  border-radius: 2px;
  background: var(--primary);
  transition: width 120ms linear;
}

#r-menu .r-transport {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 0;
}

#r-menu .r-btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
  transition: background var(--t, 160ms), color var(--t, 160ms);
}

#r-menu .r-btn:hover { background: var(--primary-soft); color: var(--primary); }
#r-menu .r-btn .ic { width: 18px; height: 18px; fill: currentColor; color: inherit; }

#r-menu .r-play {
  width: 36px;
  height: 36px;
  background: var(--primary);
  color: var(--on-dark);
}

#r-menu .r-play:hover { background: var(--primary-dark); color: var(--on-dark); }
#r-menu .r-play .ic { color: inherit; }

/* One button, two glyphs: whichever the state does not call for is not drawn. */
#r-menu .r-ic-pause { display: none; }
#r-menu.r-playing .r-ic-play { display: none; }
#r-menu.r-playing .r-ic-pause { display: block; }

#r-menu .r-time {
  /* "0:00 / 134:35" is digits either side of a slash, and a slash carries no
     direction of its own — so in an RTL menu the two times swapped places and
     the elapsed time read as the total. The clock sets its own direction. */
  direction: ltr;
  margin-inline-start: auto;
  padding-inline: 4px;
  font-size: 0.74rem;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* What the repeat is currently set to, written on its own row so the row says
   what it will do rather than only what it is called. */
#r-menu .r-repeat-value {
  margin-inline-start: auto;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--primary);
}

#r-menu .r-repeat.on { color: var(--primary); }
#r-menu .r-repeat.open { background: var(--primary-soft); color: var(--primary); }

/* --- who is reciting ---
   The row reads like the repeat row above it: what it is called on the left,
   what it is set to on the right. What it is set to is the thing that tells
   two recordings of one reciter apart, since the name alone would say the same
   on every line of the list. */
#r-menu .r-voice-value {
  margin-inline-start: auto;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--primary);
}

#r-menu .r-voice.open { background: var(--primary-soft); color: var(--primary); }

/* A column of lines rather than a field of chips. Two recitations fitted on
   chips; ten would wrap into a shape that has to be read instead of scanned,
   and it is ten this has to still be right at. Lines share a starting edge, so
   the eye runs down the names, and the list is the same shape whatever its
   length — it only gets a scrollbar. */
#r-menu .r-voice-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  /* Shown whole: the recitations on offer are few, and a scrollbar inside a
     panel this size is more to work than the list is to read. The cap is only
     there so a much longer list could never outgrow the screen. */
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-inline: -2px;
  padding-inline: 2px;
}

#r-menu .r-voice-row {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: start;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background var(--t, 160ms), color var(--t, 160ms);
}

#r-menu .r-voice-row:hover { background: var(--primary-soft); color: var(--primary); }

/* Chosen is marked, not filled. A solid bar of colour across a list of ten
   shouts one line down at the other nine; a tick beside the name says the same
   thing and leaves them all equally readable. */
#r-menu .r-voice-row.on { color: var(--primary); }

#r-menu .r-voice-tick {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  opacity: 0;
}

#r-menu .r-voice-row.on .r-voice-tick { opacity: 1; }

#r-menu .r-voice-name { flex: 1 1 auto; }

/* Held to the far end, where it is a column of its own to read down rather
   than something that moves with the length of each name. */
#r-menu .r-voice-note {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-mute);
}

#r-menu .r-voice-row.on .r-voice-note { color: inherit; opacity: 0.8; }

#r-menu .r-voices .r-legend { display: block; margin-bottom: 4px; }

/* --- what to repeat, and how often ---
   Folded into the menu rather than opening a panel of its own. It used to drop
   out of the bottom of the bar and push the page up by another sixty pixels
   every time it was consulted. */

#r-menu .r-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding: 9px 6px 4px;
  border-top: 1px solid var(--line);
}

#r-menu .r-panel[hidden] { display: none; }

#r-menu .r-group { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

#r-menu .r-legend {
  font-size: 0.72rem;
  color: var(--text-mute);
  margin-inline-end: 2px;
}

#r-menu .r-chip {
  display: inline-flex;
  align-items: center;
  width: auto;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-mute);
  cursor: pointer;
  transition: background var(--t, 160ms), color var(--t, 160ms), border-color var(--t, 160ms);
}

#r-menu .r-chip:hover { border-color: var(--primary-light); color: var(--primary); background: var(--surface-2); }

#r-menu .r-chip.on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-dark);
}

/* The multiplication sign rides small and low beside the numeral, so a count
   reads as a count and not as part of the number. */
#r-menu .r-x { font-size: 0.72em; opacity: 0.75; margin-inline-start: 1px; }

#r-menu .r-inf { font-size: 1rem; line-height: 1; padding: 2px 11px; }

/* The two ends of a range are only asked for when a range is what is wanted. */
#r-menu .r-range { display: none; }
#r-menu .r-panel.r-ranged .r-range { display: flex; }

#r-menu .r-range input {
  font: inherit;
  font-size: 0.78rem;
  width: 56px;
  padding: 3px 6px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
}

/* Said on the menu when something will not play — a button that looks pressed
   and makes no sound is the worst way to report it. */
#r-menu .r-note {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--r-point) 10%, transparent);
  color: var(--r-point);
  font-size: 0.76rem;
  line-height: 1.5;
}

#r-menu .r-note[hidden] { display: none; }

/* --- the menu a word opens ------------------------------------------------
   Anchored to the word that was clicked, because what it offers is all about
   that word. Fixed rather than absolute: the sheet it sits over scrolls, and a
   menu that scrolled away from the pointer while staying open would be worse
   than one that simply closes. */

#r-menu {
  position: fixed;
  /* Over the page's furniture, under what covers the page. A window the reader
     is carrying has to pass over the turners and the phone's bar (120 and 130)
     or it slides under them mid-drag; the overlay and the index drawer (150,
     160) are the page being left, and those still come over it. */
  z-index: 140;
  min-width: 236px;
  max-width: min(92vw, 340px);
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-3);
  font-family: var(--ui-font);
  direction: rtl;
  /* The title bar runs out to the panel's edge, so the panel clips it back to
     its own rounded corner. */
  overflow: hidden;
}

#r-menu[hidden] { display: none; }

/* The title bar: which word the menu belongs to, the handle it is moved by,
   and the way out of it. The word is named because the words are small and the
   pointer is not precise, so there should be no doubt which one was hit.

   Given its own ground, a shade off the menu body. A bar that matched the body
   would be a title with a cursor that changes on it, which nobody discovers —
   it has to read as a separate strip that belongs to the whole panel before
   anyone thinks to take hold of it. */
.r-menu-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Logical, because the panel reads right to left: the grip keeps its room at
     the start, and the end gives none, so the buttons reach the corner. */
  padding-block: 6px;
  padding-inline: 10px 0;
  margin: -5px -5px 4px;
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--surface-2);
  cursor: grab;
  /* The pointer drives the drag, so the browser must not also read it as a
     scroll or as the start of a text selection. */
  touch-action: none;
  user-select: none;
}

/* Six dots, the shape a thing you can pick up has had since toolbars had
   handles. Two columns of three, drawn by repeating one dot rather than by six
   elements or an image. */
.r-grip {
  flex: 0 0 auto;
  width: 9px;
  height: 15px;
  background-image: radial-gradient(circle, var(--text-mute) 1.1px, transparent 1.3px);
  background-size: 5px 5px;
  opacity: 0.5;
  transition: opacity var(--t, 160ms);
}

.r-menu-bar:hover .r-grip { opacity: 0.9; }

/* Picked up off the page while it is being carried: the shadow deepens and the
   bar takes colour. Deliberately no scaling — the panel is following the
   pointer, and scaling happens about the centre, so the very point being held
   would creep out from under the cursor as it grew. */
#r-menu.r-moving {
  box-shadow: 0 20px 52px rgba(15, 55, 90, 0.30);
}

#r-menu.r-moving .r-menu-bar { cursor: grabbing; background: var(--primary-soft); }
#r-menu.r-moving .r-grip { opacity: 1; }

.r-menu-head {
  flex: 1 1 auto;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-mute);
  white-space: nowrap;
}

/* Window buttons rather than chips: each fills the bar's height and the last
   sits flush in the corner, carrying the panel's own radius so the corner stays
   round. The bar's padding is cancelled rather than reduced, so the grip and
   the title keep the room they had. */
#r-menu .r-menu-close,
#r-menu .r-menu-min {
  flex: 0 0 auto;
  align-self: stretch;
  display: grid;
  place-items: center;
  width: 34px;
  padding: 0;
  margin-block: -6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
  transition: background var(--t, 160ms), color var(--t, 160ms);
}

#r-menu .r-menu-bar > :last-child {
  border-start-end-radius: var(--r-md);
}

/* Warm on hover, the same ink the pointed-at word takes: leaving is the one
   thing in here that undoes rather than plays. */
#r-menu .r-menu-close:hover {
  background: color-mix(in srgb, var(--r-point) 14%, transparent);
  color: var(--r-point);
}

#r-menu .r-x-ic { width: 15px; height: 15px; }

/* Folding away is not leaving, so this one takes the menu's own blue rather
   than the warm ink the close button hovers into. */
#r-menu .r-menu-min:hover { background: var(--primary-soft); color: var(--primary); }
#r-menu .r-min-ic, #r-menu .r-max-ic { width: 15px; height: 15px; }

/* One button, two glyphs — the rule the play button already follows. */
#r-menu .r-max-ic { display: none; }
#r-menu.r-min .r-min-ic { display: none; }
#r-menu.r-min .r-max-ic { display: block; }

/* --- minimised: a circle in the corner ------------------------------------

   Not a shorter menu standing where the long one stood. A window that is
   minimised leaves the desk entirely — it goes to the edge, gives the whole
   page back, and waits to be asked for. So the panel becomes one circle in the
   bottom corner with the reciter's mark on it, and pressing it opens the
   window again where it came from.

   The corner is the inline end, which follows the page's direction, so on the
   Arabic page it parks on the far side from where a line begins. It is set
   here rather than inline so that the position the menu was opened or dragged
   to is left untouched, ready to be handed straight back.

   The panel's own chrome comes off: the border, the ground and the shadow all
   belong to the button now, or the circle would sit inside a faint square. */
/* Bottom right in either language, level with the corner controls; bottom left is the zoom rail's */
#r-menu.r-min {
  top: auto;
  left: auto;
  bottom: 10px;
  right: 10px;
  min-width: 0;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

/* While a fold is playing, the panel's own transitions are off. It carries a
   broad one, which would set `left`, the padding, the border and the shadow
   all sliding towards the circle's values at the same moment as the fold is
   carrying the whole shape there — two movements describing one journey, and
   a measurement taken mid-slide that is true of neither. The fold knows where
   it is going; nothing else needs to guess. */
#r-menu.r-folding { transition: none; }

/* Everything the window is made of, put away. */
#r-menu.r-min .r-menu-bar,
#r-menu.r-min .r-now,
#r-menu.r-min .r-acts,
#r-menu.r-min .r-panel,
#r-menu.r-min .r-note { display: none; }

#r-menu .r-bubble { display: none; }

#r-menu.r-min .r-bubble {
  position: relative;
  display: grid;
  place-items: center;
  /* The size of the other round controls; the ring's viewBox scales with it */
  width: var(--corner-btn, 50px);
  height: var(--corner-btn, 50px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-dark);
  box-shadow: var(--sh-2);
  cursor: pointer;
  transition: background var(--t, 160ms), transform var(--t, 160ms);
}

#r-menu.r-min .r-bubble:hover {
  background: var(--primary-dark);
  transform: scale(1.06);
}

#r-menu.r-min .r-bubble:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  #r-menu.r-min .r-bubble,
  #r-menu.r-min .r-bubble:hover,
  #r-menu.r-min .r-bubble:active { transition: none; transform: none; }
}

#r-menu .r-bubble-ic {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* The bars rise and fall while something is actually being recited, and stand
   still when it is paused — the circle's only way of saying which. Scaled about
   their own middles, so they grow from the centre out rather than from the
   baseline up. */
#r-menu .r-bar {
  transform-box: fill-box;
  transform-origin: center;
}

#r-menu.r-min.r-playing .r-bar { animation: r-bars 1.05s ease-in-out infinite; }
#r-menu.r-min.r-playing .r-bar:nth-child(2) { animation-delay: 0.19s; }
#r-menu.r-min.r-playing .r-bar:nth-child(3) { animation-delay: 0.38s; }

@keyframes r-bars {
  0%, 100% { transform: scaleY(0.5); }
  50%      { transform: scaleY(1); }
}

/* The global reduced-motion rule squeezes every animation to a hundredth of a
   millisecond, which for a looping one is not stillness but a very fast
   flicker. Say plainly that these do not run. */
@media (prefers-reduced-motion: reduce) {
  #r-menu.r-min.r-playing .r-bar { animation: none; }
}

/* How far through the surah, drawn round the circle — the one thing this shape
   has left to say about where the recitation has got to. It sits just inside
   the rim and is drawn in the ink the icon is drawn in, not in the ground it
   is drawn on: at var(--primary) on a var(--primary) button it was the same
   colour as the thing behind it, and the only part of it anyone could see was
   the sliver hanging over the edge onto the page.

   Rotated so it starts at the top, where a dial is expected to start, rather
   than at three o'clock where SVG begins its arcs. */
#r-menu .r-bubble-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

#r-menu .r-bubble-ring circle {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}

#r-menu .r-ring-track { stroke: color-mix(in srgb, var(--on-dark) 26%, transparent); }

#r-menu .r-ring-line {
  stroke: var(--on-dark);
  /* 2πr for r=24.5. The dash is the whole circle and the gap is what is left
     to hear, so the offset counts down as the recitation runs. */
  stroke-dasharray: 153.938;
  stroke-dashoffset: 153.938;
  transition: stroke-dashoffset 140ms linear;
}

@media (prefers-reduced-motion: reduce) {
  #r-menu .r-ring-line { transition: none; }
}


/* The full-width action rows, and only those. Written as `#r-menu button` it
   also caught the round transport buttons — and `#r-menu button:hover .ic`
   then outranked the play button's own rule, so hovering it painted a blue
   icon onto a dark blue circle and the glyph all but vanished. Scoped to the
   list it belongs to, it cannot reach across again. */
#r-menu .r-acts button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  text-align: start;
  cursor: pointer;
}

#r-menu .r-acts button:hover { background: var(--primary-soft); color: var(--primary); }

#r-menu .r-acts .ic {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: currentColor;
  color: var(--text-mute);
}

#r-menu .r-acts button:hover .ic { color: var(--primary); }

/* display:flex above beats the browser's own rule for [hidden], so the two
   entries that only make sense for a word have to be told again. */
#r-menu .r-acts button[hidden] { display: none; }

/* Line icons, drawn as the app draws its own: outlined, the button's colour */
#r-menu .ic.ic-line {
  fill: none !important;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Latin reading and speed: the panel's rows read on, like repeat */
#r-menu .r-acts .r-latin.on,
#r-menu .r-acts .r-speed.on { color: var(--primary); }
#r-menu .r-speed-value { margin-inline-start: auto; font-weight: 700; }

/* A word on its way: faded, and saying so; sounding: the accent */
#r-menu .r-word-wait { display: none; }
#r-menu.r-word-loading .r-word-wait { display: inline; }
#r-menu.r-word-loading .r-word-idle { display: none; }
#r-menu.r-word-loading [data-act="word"] { opacity: 0.55; cursor: progress; }
#r-menu.r-word-saying [data-act="word"] { color: var(--primary); }

/* The Latin reading over the marked word: the page's ink as its ground, its paper
   as the letters, so it reads as part of the sheet in either mode */
#r-latin {
  position: fixed;
  z-index: 130;
  padding: 3px 10px 4px;
  border-radius: 999px;
  background: var(--text);
  color: var(--paper);
  font: 600 15px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  direction: ltr;
  white-space: nowrap;
  pointer-events: none;
}
#r-latin[hidden] { display: none; }

/* The phone's player row, laid out in style.css; elsewhere the panel above is the player */
#r-menu .r-dock { display: none; }
#r-menu .r-dock button[hidden] { display: none; }
#r-menu .r-when-playing { display: none; }
#r-menu.r-playing .r-when-playing { display: inline; }
#r-menu.r-playing .r-when-paused { display: none; }

/* Same breakpoint as the phone rules in style.css; here so they come after the panel's own rules */
@media (max-width: 480px) {
  /* Docked along the foot as one row, like the Android app's player; where it was dragged or opened no longer applies */
  #r-menu {
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    max-width: none;
    padding: 0 0 env(safe-area-inset-bottom);
    border-width: 1px 0 0;
    border-radius: 0;
    box-shadow: 0 -2px 12px rgba(20, 60, 95, 0.14);
  }

  #r-menu .r-menu-bar,
  #r-menu .r-acts,
  #r-menu .r-transport { display: none; }

  #r-menu .r-now { padding: 0; margin: 0; border: 0; }
  #r-menu .r-panel { margin: 8px 10px 0; }

  #r-menu .r-dock { display: flex; }
  body[data-lang="en"] #r-menu .r-dock { direction: ltr; }

  #r-menu .r-dock button {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 64px;
    padding: 6px 0;
    border: 0;
    background: none;
    color: var(--text-mute);
    font: inherit;
    font-size: 0.72rem;
    cursor: pointer;
  }

  #r-menu .r-dock .ic { width: 24px; height: 24px; fill: currentColor; }
  #r-menu .r-dock .r-dock-repeat.on,
  #r-menu .r-dock .r-dock-latin.on,
  #r-menu .r-dock .r-dock-speed.on { color: var(--primary); }
  #r-menu .r-dock .r-speed-value { margin: 0; font-weight: 400; }

  #r-menu .r-dock .r-dock-play { color: var(--primary); font-weight: 700; }
  #r-menu .r-dock-disc {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-dark);
  }
  #r-menu .r-dock-disc .ic { width: 22px; height: 22px; }
}