/* avatar/transcript.css - the transcript's ruby rules (plan 02-07, research § Q5).
 *
 * The numbers here are what make the rendering verifiable: line-height 2.1 leaves room for
 * an rt at 0.55em so consecutive lines never collide, ruby-position is pinned to `over` so
 * a future theme cannot flip it, and the annotation is not selectable so copying a line
 * copies the base text. tests/test_transport_seam.py greps these rules; the browser suites
 * measure their effect (debug.furigana.lastLineRtHeightPx / lastLineHeightPx). Loaded by
 * the app through a <link> inside the transcript's gr.HTML value and by
 * avatar/transcript-harness.html relative to itself.
 */
/* The transcript is a COLUMN with a top and a bottom, not an ever-growing block. host.js has
 * always ended every line with `el.scrollTop = el.scrollHeight`, which is a no-op on an
 * auto-height element - so a long conversation grew the page instead of scrolling the
 * transcript. The height is also what makes plan 02-08's `insideTranscript` a fact rather
 * than a coincidence: a card can only be proven to have stayed inside a box that has edges,
 * and on a phone that box is all the room there is. It is a viewport fraction rather than a
 * max-height because the lookup card needs room BESIDE the words as well as under them: on
 * a 196 px column a card is wide enough to cover the line above the one it is anchored to,
 * and a word under the card cannot be tapped. 40vh is 335 px on a Pixel 7. */
#transcript-text {
  position: relative;
  overflow-x: clip;
  overflow-y: auto;
  height: 40vh;
  min-height: 14em;
}
#transcript-text .said {
  line-height: 2.1;
}
#transcript-text ruby {
  ruby-position: over;
  ruby-align: center;
}
#transcript-text rt {
  font-size: 0.55em;
  user-select: none;
}
#transcript-text .tok {
  cursor: pointer;
  touch-action: manipulation;
  border-radius: 3px;
}
#transcript-text .tok:hover,
#transcript-text .tok:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  outline: none;
}
/* The word-level badge on the word itself (D-14): one pixel of the same rank colour under a
 * tappable unit, so the transcript carries the level information the card spells out. */
#transcript-text .tok[data-level] {
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
#transcript-text .tok[data-level="N5"] {
  border-bottom-color: #2e7d32;
}
#transcript-text .tok[data-level="N4"] {
  border-bottom-color: #558b2f;
}
#transcript-text .tok[data-level="N3"] {
  border-bottom-color: #f9a825;
}
#transcript-text .tok[data-level="N2"] {
  border-bottom-color: #ef6c00;
}
#transcript-text .tok[data-level="N1"] {
  border-bottom-color: #c62828;
}

/* ------------------------------------------------- the EN reveal (plan 02-09, D-15/D-16)
 *
 * Every selector is prefixed with #transcript-text on purpose. The control is a real
 * <button> living inside a gr.HTML value, so Gradio's own stylesheet has an opinion about
 * it (full width, its own font, its own padding); an id + class selector outranks the
 * theme's class selectors, and the resets below are what keep the control an inline chip
 * beside the sentence rather than a block that pushes the line apart. The [hidden] rule is
 * there for the same reason: a framework `div { display: block }` beats the UA's
 * [hidden] { display: none }, and a translation that is "hidden" but visible would make
 * "never shown unrequested" (D-16) false while every attribute still read correctly.
 */
#transcript-text .en-toggle {
  font-size: 0.75em;
  margin-left: 0.4em;
  padding: 0 0.4em;
  vertical-align: middle;
  display: inline;
  width: auto;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  line-height: 1.6;
  cursor: pointer;
}
#transcript-text .en-toggle[aria-busy="true"] {
  opacity: 0.6;
}
#transcript-text .en-toggle:disabled {
  cursor: default;
}
#transcript-text .en {
  margin: 0.1em 0 0.4em 1.5em;
  color: #333;
  font-size: 0.92em;
}
#transcript-text .en[hidden] {
  display: none;
}
#transcript-text .en.en-error {
  color: #b00020;
}

/* ---------------------------------------------- the lookup card (plan 02-08, research Q6)
 *
 * A positioned div, not the Popover API: iOS 16 Safari lacks it and its top-layer behaviour
 * inside the Hub's cross-origin frame is unverified. transcript.js sets left/top from
 * getBoundingClientRect and clamps them into #transcript-text (which is position: relative
 * above), so the card can never leave the column on a phone. max-height keeps a three-sense
 * entry inside a short column; z-index 5 clears the transcript's own content only.
 */
#lookup-popover {
  position: absolute;
  max-width: min(320px, calc(100% - 16px));
  max-height: 240px;
  overflow-y: auto;
  z-index: 5;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 6px;
  background: #fff;
  color: #111;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  font-size: 0.95em;
  line-height: 1.45;
}
#lookup-popover .lk-head {
  display: flex;
  gap: 0.5em;
  align-items: baseline;
  flex-wrap: wrap;
}
#lookup-popover .lk-surface {
  font-weight: 600;
  font-size: 1.15em;
}
#lookup-popover .lk-reading {
  color: #555;
}
#lookup-popover .lk-level {
  font-size: 0.75em;
  padding: 0 0.4em;
  border-radius: 3px;
  color: #fff;
  background: #777;
  white-space: nowrap;
}
#lookup-popover .lk-level[data-level="N5"] {
  background: #2e7d32;
}
#lookup-popover .lk-level[data-level="N4"] {
  background: #558b2f;
}
#lookup-popover .lk-level[data-level="N3"] {
  background: #f9a825;
}
#lookup-popover .lk-level[data-level="N2"] {
  background: #ef6c00;
}
#lookup-popover .lk-level[data-level="N1"] {
  background: #c62828;
}
#lookup-popover .lk-level[data-level="N1+"],
#lookup-popover .lk-level[data-level="name"] {
  background: #777;
}
#lookup-popover .lk-lemma {
  color: #555;
  font-size: 0.9em;
}
#lookup-popover .lk-gloss {
  margin: 0.3em 0 0;
  padding-left: 1.2em;
}
#lookup-popover .lk-none {
  color: #777;
  font-size: 0.9em;
  margin-top: 0.3em;
}

#reading-controls {
  display: flex;
  gap: 0.5em;
  align-items: center;
  font-size: 0.9em;
  margin: 0.25em 0;
}
#reading-controls select {
  font: inherit;
}