/* ═══════════════════ The passage itself ═══════════════════
   Read first, then practise. The measure is deliberately narrow and the
   leading deliberately loose — Ethiopic needs more vertical room than
   Latin, and this is the one screen where people read continuously.

   Its own file because two pages draw it: the learner's reading page, and
   the full preview a መምህር opens from /teacher before publishing. A copy of
   these rules inside teacher.css would drift the first time the passage
   changed, and the whole point of that preview is that it does not lie.

   Nothing here draws page furniture — the foot, the mark-as-read, the
   practice buttons all stay in app.css, because the preview shows a
   passage, not a screen the teacher can operate. */

/* Same reasoning as the session: a long stretch of Ethiopic prose reads
   better on the warm off-white than on white. */
.reading {
  max-width: 40rem;
  margin: 0 auto;
  background: var(--cream);
  border-radius: var(--r-xl);
  padding: clamp(24px, 4vw, 44px);
  /* Teachers paste from their own documents now — a URL or an unbroken
     string must wrap inside the column, never widen the page. */
  overflow-wrap: anywhere;
}
/* The label above the title. `.band__eyebrow` is app.css's, and the learner
   page still takes it from there; written out again here so the passage
   carries its own opening line onto a page that has no bands. */
.reading .band__eyebrow {
  font: 700 11.5px/1.4 var(--ui);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--tint-ink, var(--ink-3));
}
.reading__title { margin: 8px 0 22px; font: 600 clamp(25px, 3.4vw, 34px)/1.4 var(--et); text-wrap: pretty; }
.reading__lead { font: 400 19px/1.95 var(--et); color: var(--ink-2); margin: 0 0 28px; text-wrap: pretty; }
.reading h2 { margin: 34px 0 12px; font: 600 22px/1.55 var(--et); color: var(--ink); text-wrap: pretty; }
.reading p  { margin: 0 0 18px; font: 400 17.5px/2 var(--et); color: var(--ink); text-wrap: pretty; }
/* A teacher's deliberate line break (Shift+Enter in the editor) stays a
   line break here — chant lines and verse must not collapse into prose. */
.reading p, .reading blockquote { white-space: pre-line; }
.reading .note {
  background: var(--tint, var(--line-soft));
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin: 24px 0;
  font: 400 16px/1.95 var(--et);
  color: var(--ink-2);
}
.reading .note b { color: var(--tint-ink, var(--ink)); font-weight: 600; }
.reading blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-inline-start: 3px solid var(--tint-ink, var(--accent));
  font: 400 18px/2 var(--et);
  color: var(--ink);
}
/* ግእዝ and its ትርጉም. On a phone they stack in the order the መምህር wrote
   them, the ትርጉም set quieter and behind a rule so it reads as the meaning
   of what is above it rather than as the next thing to read. Two columns
   arrive with the wide measure below. Which half a line is never rests on
   its colour: on a phone the rule and the order say it, on a laptop the
   column does. */
.reading .gloss { margin: 24px 0; }
.reading .gloss__side p { margin: 0 0 10px; }
.reading .gloss__side p:last-child { margin-bottom: 0; }
.reading .gloss__am {
  margin-top: 14px;
  padding-inline-start: 16px;
  border-inline-start: 2px solid var(--line-2);
}
/* Written out rather than inherited: `.reading p` sets its own colour and
   size, so a rule on the column alone would never reach the lines in it. */
.reading .gloss__am p { color: var(--ink-2); font-size: 16.5px; }

/* Numbered scripture. The chapter-and-verse is part of the text —
   "11፥18 ወዲያውም…" — and set as prose it runs straight into the Amharic.
   Here the number hangs in a margin of its own and every line of verse
   starts on the same edge. In flow rather than absolutely positioned:
   an inline-block pulled into the padding sits on the first line's own
   baseline whatever the leading is. Verses read continuously, so the
   gap between them is half a paragraph's. */
.reading .verse { padding-inline-start: 50px; margin-bottom: 10px; }
.reading .verse .verse__no {
  display: inline-block;
  width: 50px;
  margin-inline-start: -50px;
  padding-inline-end: 9px;
  box-sizing: border-box;
  text-align: end;
  font: 600 12.5px/1 var(--et);
  color: var(--tint-ink, var(--ink-3));
  white-space: nowrap;
}

/* The ❖ the ውዳሴ ማርያም readings open paragraphs with, as a real marker: a
   run of bullet rows is one list, the glyph hangs, the text keeps the
   passage's own type. Drawn with ::before rather than ::marker because
   the marker box cannot take content everywhere this page is read. */
.reading .bullets { list-style: none; margin: 0 0 18px; padding: 0; }
.reading .bullets li {
  position: relative;
  padding-inline-start: 30px;
  margin: 0 0 10px;
  font: 400 17.5px/2 var(--et);
  color: var(--ink);
  white-space: pre-line;
  text-wrap: pretty;
}
.reading .bullets li::before {
  content: "❖";
  position: absolute;
  inset-inline-start: 2px;
  color: var(--tint-ink, var(--ink-3));
}

/* The teacher's own recording, under the block it speaks. The learner page
   dresses this in `.player--reading`; here it is the bare control, because
   a preview owes the passage its typography, not its furniture. */
.reading audio { width: 100%; margin: -4px 0 18px; }

/* The passage on a laptop. The 40rem measure suits a phone; on anything
   wider it reads as a ribbon between two fields of empty mat. The column
   grows with the screen and the type grows with the column, so the line
   holds a comfortable count of fidel either way. */
@media (min-width: 1024px) {
  .reading { max-width: 52rem; padding: clamp(36px, 4vw, 56px); }
  .reading p { font-size: 18.5px; }
  .reading__lead { font-size: 20px; }
  .reading h2 { font-size: 24px; }
  .reading blockquote { font-size: 19px; }
  .reading .note { font-size: 17px; }
  .reading .bullets li { font-size: 18.5px; }
  /* The measure is finally wide enough to hold two of them. Equal columns,
     both starting at the top, so the first ግእዝ line and the first line of
     its ትርጉም begin level; the rule between them is what the ትርጉም carried
     on its own when it was stacked. A half with no partner keeps the whole
     width — one column of verse, not one narrow column and a void. */
  .reading .gloss { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 34px); align-items: start; }
  .reading .gloss--lone { grid-template-columns: 1fr; }
  .reading .gloss__am { margin-top: 0; padding-inline-start: clamp(18px, 2vw, 28px); }
  .reading .gloss--lone .gloss__am { padding-inline-start: 16px; }
  .reading .gloss__am p { font-size: 17.5px; }
}
@media (min-width: 1440px) {
  .reading { max-width: 60rem; }
  .reading p { font-size: 19.5px; }
  .reading__lead { font-size: 21px; }
  .reading h2 { font-size: 25px; }
  .reading blockquote { font-size: 20px; }
  .reading .note { font-size: 17.5px; }
  .reading .gloss__am p { font-size: 18.5px; }
  .reading .bullets li { font-size: 19.5px; }
}
@media (max-width: 900px) {
  .reading p { font-size: 16.5px; line-height: 1.95; }
  .reading__lead { font-size: 17.5px; }
  .reading .gloss__am p { font-size: 15.5px; }
  .reading .bullets li { font-size: 16.5px; line-height: 1.95; }
  .reading .verse { padding-inline-start: 44px; }
  .reading .verse .verse__no { width: 44px; margin-inline-start: -44px; }
}