/* reading.css — the look of a reading chapter.
 *
 * A reading chapter is a printed page reproduced, so this stylesheet has one job:
 * make the line the unit. Every line is a row that holds its own text, its own
 * play button and its own reveal, and nothing about a line is affected by the
 * one above it.
 *
 * Loaded after style.css and jp-ar.css, and it borrows their `.say` button and
 * `.ar-i` isolation rather than restating them. Every colour is a variable, so
 * theme.css's Fuji palette reaches this page for free — a hardcoded plate here
 * would go light-on-white the moment the theme lightens `--ink`.
 *
 * LIGHT-ONLY, like the rest of the course: no prefers-color-scheme block.
 *
 * ---- The Japanese is set larger than the Latin, deliberately ----
 *
 * Raised 2026-08-13 on Farhad's "at least 3 fonts larger". A kanji carries more
 * strokes inside the same em box than any Latin letter, and this page prints it
 * with furigana half that size on top, so type set to match the surrounding
 * English is the size at which 銀行員 stops being readable and starts being
 * guessed from context. Every Japanese run here — line, furigana, speaker name,
 * section head, and the bare 第1課 in the prose — is at least 3px bigger than the
 * body text it sits beside. Sizes are rem, so they are one number to move again;
 * keep the ratios if they move, because the furigana is sized off its base.
 */

/* ---------- Japanese inside the page's own prose ---------- */

/* jp-ar.css gives `.jp` the Japanese face but no size, so a 地下1階 quoted in a
   paragraph renders at the paragraph's size — visibly smaller than the same
   characters in the chapter below, which is the one place a reader compares
   them. The 1.2em bump is the argument `.ar-i` already makes for Arabic set in
   Latin prose, applied to the other script. Scoped to reading pages: reading.css
   is loaded by them alone.

   The kicker needs its own number because it is a 12px uppercase mono label —
   1.2em of that is still smaller than the body text. */
.jp { font-size: 1.2em; }
.kicker .jp { font-size: 1.3em; }

/* ---------- chapter and section furniture ---------- */

.rd-chapter { margin: var(--s-6) 0 0; }
.rd-chapter:first-child { margin-top: var(--s-4); }

.rd-chaphead {
  border-bottom: 2px solid var(--border);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-4);
}

.rd-chapno {
  font-family: var(--jp);
  font-size: 1.8rem;
  margin: 0;
  color: var(--jp-ink);
}

.rd-chaptitle {
  margin: var(--s-1) 0 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.rd-chaplede {
  margin: var(--s-1) 0 0;
  color: var(--muted);
  font-size: .94rem;
}

.rd-sec { margin: var(--s-5) 0; }

/* The Japanese name of the section and its English gloss are one heading, so
   they can never be split across a page break or reordered by a stylesheet
   that does not know about the pair. */
.rd-sechead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-1);
  border-bottom: 1px solid var(--border);
}

.rd-secjp {
  font-family: var(--jp);
  font-size: 1.42rem;
  letter-spacing: .18em;
  color: var(--jp-ink);
}

.rd-secen {
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* The conversation's own title, centred over it the way the book sets it. */
.rd-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
  text-align: center;
}

.rd-titlejp {
  font-family: var(--jp);
  font-size: 1.42rem;
  font-weight: 600;
  color: var(--jp-ink);
  line-height: 2.1;
}

.rd-titleen {
  flex: 1 0 100%;
  font-size: .88rem;
  color: var(--muted);
  font-style: italic;
}

/* The dotted rule the book uses for a scene change inside one conversation. */
.rd-sep {
  border-top: 1.5px dotted var(--border);
  width: 60%;
  margin: var(--s-4) auto;
}

/* ---------- the line ---------- */

/* A numbered item and the ……answer under it. Kept together so a question and
   its reply never land on opposite sides of a page break. */
.rd-item {
  margin: 0 0 var(--s-3);
  break-inside: avoid;
}

/* Grid, and the reason is the phone. A wrapping flex row lets the two buttons
   drop onto a line of their own as soon as the text is long, which on a 390px
   screen happened to nearly every dialogue line and doubled the length of the
   page. An explicit three-column grid keeps the buttons in a column of their
   own at every width; the text column is `minmax(0, 1fr)` so a long line wraps
   inside itself instead of widening the row. */
.rd-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "lab jp acts"
    "tx  tx tx";
  align-items: baseline;
  gap: var(--s-1) var(--s-2);
  padding: .15rem 0;
}

.rd-line.is-open { background: var(--blue-bg); border-radius: 5px; }

.rd-lab {
  grid-area: lab;
  min-width: 1.9rem;
  font: 600 .85rem var(--mono);
  color: var(--faint);
}

/* A speaker's name is Japanese and can carry ruby, so it needs the Japanese
   face and the same line-height the text gets. */
.has-sp .rd-lab {
  font-family: var(--jp);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--muted);
  /* Grown with the type: this column holds 店員B： with ruby over it, and a width
     kept at the old 6.5rem would wrap the longest name onto two lines. */
  min-width: 8.2rem;
  line-height: 2;
}

.rd-jp {
  grid-area: jp;
  min-width: 0;
  margin: 0;
  font-family: var(--jp);
  font-size: 1.32rem;
  /* Room for the furigana. Ruby annotations are drawn above the line box, so a
     normal 1.6 line-height lets them touch the line above. Kept as a RATIO when
     the type grew, so the clearance grew with it. */
  line-height: 2.15;
  overflow-wrap: break-word;
  color: var(--ink);
}

/* The book's own parenthetical, indented under the line it belongs to. */
.is-paren .rd-jp {
  font-size: 1.2rem;
  color: var(--muted);
  padding-left: var(--s-3);
}

/* The furigana is the reading you are here to learn, so it grew too — .54em of a
   1.32rem base is ~11px, where the old .48em of 1.06rem was ~8px. Sized in `em`
   so it stays tied to the line it annotates. */
.rd-jp ruby rt {
  font-size: .54em;
  font-weight: 500;
  color: var(--muted);
  /* Chrome sets ruby text tight against its base; a little space keeps small
     kana legible over a dense kanji. */
  transform: translateY(.12em);
}

.rd-lab ruby rt { font-size: .5em; color: var(--faint); }

/* ---------- a word ---------- */

/* Every word in the line is a button that says itself. It has to stop looking
   like one: a printed page with two hundred boxes on it is a form, not a page.
   So the button gives up everything a button draws and keeps only a hairline
   under the word — enough to say "these are separable" once, at page level, and
   quiet enough to read past. `font: inherit` is load-bearing; without it Chrome
   drops the word to 13px system sans and the line comes apart. */
.rd-w {
  font: inherit;
  line-height: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  /* A word that is longer than the column left to it still has to wrap inside
     itself rather than push the page sideways — the phone column is ~230px and
     マイク・ミラーさんですか。 is wider than that at this size. */
  max-width: 100%;
  cursor: pointer;
  border-radius: 3px;
  /* Dotted and warm-grey, not a rule: a solid line under all 235 words turns the
     page into a worksheet of blanks. This is enough to say "separable" and
     little enough to read past. */
  text-decoration: underline dotted var(--border);
  text-underline-offset: .32em;
  text-decoration-thickness: 1px;
  transition: background-color .12s ease, text-decoration-color .12s ease;
}

.rd-w:hover { background: var(--blue-bg); text-decoration-color: var(--accent); }
.rd-w:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* speech.js adds `.speaking` for the length of the utterance, so the word you
   pressed is the word you are hearing — the only feedback a play button gives on
   a device whose voice takes a moment to start. */
.rd-w.speaking {
  background: var(--blue-bg);
  color: var(--accent-ink);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}

/* No Japanese voice on this device: the words go back to being text rather than
   staying live-looking buttons that do nothing. */
.rd-w.no-voice {
  cursor: default;
  text-decoration: none;
  transition: none;
}
.rd-w.no-voice:hover { background: none; }

.rd-acts {
  grid-area: acts;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}

/* Reveals the English, the Arabic and the note. Sized to sit level with the
   round play button beside it without being mistaken for one. */
.rd-tr {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--accent-ink);
  border-radius: 999px;
  padding: .18rem .5rem;
  font: 600 10px/1.35 var(--mono);
  letter-spacing: .04em;
  cursor: pointer;
}

.rd-tr:hover { border-color: var(--accent); background: var(--blue-bg); }
.rd-tr[aria-expanded="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

/* ---------- the reveal ---------- */

.rd-tx {
  grid-area: tx;
  min-width: 0;
  margin: var(--s-1) 0 var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-left: 3px solid var(--blue-edge);
  background: var(--card);
  border-radius: 0 5px 5px 0;
}

.rd-tx p { margin: 0 0 var(--s-1); }
.rd-tx p:last-child { margin-bottom: 0; }

.rd-en { font-size: .98rem; }

.rd-ar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
  font-size: 1.2rem;
  color: var(--ar-ink);
}

.rd-ar .ar-i { font-size: 1em; line-height: 1.95; }

.rd-at {
  text-align: right;
  font: .82rem/1.5 var(--mono);
  color: var(--muted);
}

.rd-note {
  padding-top: var(--s-1);
  border-top: 1px dotted var(--border);
  font-size: .88rem;
  color: var(--muted);
}

/* ---------- phones ---------- */

/* A speaker's name is allowed a wide, aligned column on a desktop because it
   makes the turns scannable. On a phone that column is competing with the line
   itself for about 190px, so it gives up its alignment and sizes to its own
   text — 店員B： is five characters, not six and a half rem. */
@media (max-width: 560px) {
  .has-sp .rd-lab { min-width: 0; font-size: 1.1rem; }
  .rd-jp { font-size: 1.24rem; }
  .rd-line { gap: var(--s-1); }
  .rd-tx { padding: var(--s-2); }
}

/* `.rd-key` — the specimen-button pill used by the how-to-read table — MOVED TO
   jp-ar.css on 2026-08-13, when the flash-card deck became the second page type
   with a how-to-use table. It is not a reading-chapter idea, and duplicating it
   into flashcards.css would have left two copies to keep in step. reading.css
   loads after jp-ar.css, so nothing on this page changed. */

/* ---------- print ---------- */

/* What is on screen is what prints: an open line keeps its translation, a closed
   one stays closed. Printing every translation would hand the reader the answers
   to the page they meant to practise on. */
@media print {
  .rd-acts { display: none; }
  /* On paper a word is just a word — the dots are an invitation to tap. */
  .rd-w { text-decoration: none; }
  .rd-line.is-open { background: none; }
  .rd-tx { break-inside: avoid; }
  .rd-chapter { break-before: page; }
  .rd-chapter:first-child { break-before: auto; }
}