/* Text Reader: editor textarea + paced reading UI. */

/* ---- Editor ------------------------------------------------------------ */
.field { max-width: 460px; margin-bottom: 1.25rem; }
.field.inline { max-width: 320px; }

.editor-head { display: flex; align-items: center; gap: 1rem; margin: 1.75rem 0 .5rem; }
.editor-head h2 { margin: 0; font-size: 1.1rem; }
.editor-head .btn { margin-inline-start: auto; }

.tr-passage-input {
  width: 100%;
  max-width: none;
  font-size: 1.15rem;
  line-height: 1.8;
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
}

/* ---- Play layout --------------------------------------------------------- */
/* Growth-only: keeps today's sizes as a floor on typical windows, but keeps
   growing past them on wider ones instead of plateauing. */
.tr-main { max-width: max(900px, 90vw); }

.scorebar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .75rem 1.1rem; box-shadow: var(--shadow);
  margin-bottom: 1rem;
}
.scorebar .deck-name { font-weight: 700; font-size: 1.05rem; }

.tr-controls {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  margin-bottom: .75rem;
}

.tr-levels { display: flex; gap: .4rem; }
.tr-level-btn.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

.tr-wpm {
  display: flex; align-items: center; gap: .5rem;
  font-variant-numeric: tabular-nums;
}
.tr-wpm-display { min-width: 5.5rem; text-align: center; font-size: 1.1rem; font-weight: 700; }
.tr-wpm-display small { font-weight: 400; color: var(--ink-soft); }
.btn.icon { padding: .45rem .7rem; }

.tr-transport { display: flex; gap: .5rem; }

.tr-status { color: var(--ink-soft); font-size: .9rem; text-align: center; min-height: 1.5em; margin: 0 0 1rem; }

.tr-text {
  direction: rtl;
  font-size: max(1.6rem, 1.8vw);
  line-height: 2.4;
  padding: 2rem clamp(1rem, 4vw, 3rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-height: 60vh;
  overflow-y: auto;
}
.tr-text p { margin: 0 0 1em; }
.tr-text p:last-child { margin-bottom: 0; }

.tr-word {
  display: inline-block;
  padding: .05em .2em;
  border-radius: 6px;
  transition: background-color .12s ease, color .12s ease;
}
.tr-word.active {
  background: var(--accent);
  color: #fff;
}
.tr-word.read {
  color: var(--ink-soft);
}