/* en.css — the rules English needs and Japanese doesn't.
 *
 * style.css and grammar.css are byte-for-byte copies of the .com site's, on
 * purpose: it is the same product and one design. This file is the delta, and
 * it stays small enough to read in one screen. Everything in it is scoped to
 * .enpage so that copying a stylesheet back the other way can never reach it.
 *
 * Three things change when the subject language flips:
 *
 *   1. The highlighted term in prose is English, not Japanese. grammar.css
 *      paints .ja gold in the display face; here .en gets that treatment and
 *      .ja is handed back to the body face, because on this site Japanese is
 *      the language the reader already has.
 *
 *   2. Latin needs a Latin serif. Shippori Mincho ships Latin glyphs but they
 *      are a Japanese type designer's Latin, drawn to sit beside kanji at the
 *      same optical weight; set 62px of it in an <h1> next to nothing but more
 *      Latin and the joints show. System serifs are already on the machine, so
 *      this costs no extra font request.
 *
 *   3. English words are separated by spaces. The token buttons emit real
 *      spaces (see _sentence in template.py) rather than margins, so the line
 *      stays copy-pasteable; all this has to do is not collapse them.
 */

/* ── 1. the highlighted term ───────────────────────────────────────── */

.enpage .gprose .en,
.enpage .ccard h3 .en,
.enpage .qitem h3 .en {
  font-family: var(--display-en);
  color: var(--gold);
  font-style: normal;
}

.enpage .qitem p .en { color: var(--ai-light); font-family: var(--display-en); }

/* Japanese in prose is ordinary body text here — the reader's own language
   should not be shouting gold at them off every third line. */
.enpage .gprose .ja,
.enpage .ccard h3 .ja,
.enpage .qitem h3 .ja,
.enpage .qitem p .ja {
  font-family: inherit;
  color: inherit;
}

/* ── 2. Latin display ──────────────────────────────────────────────── */

.enpage {
  --display-en: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                Georgia, serif;
}

.enpage .gp-form,
.enpage .sl-en,
.enpage .wp-surface,
.enpage .sform,
.enpage .rcard-ja,
.enpage .stab {
  font-family: var(--display-en);
}

/* The Japanese half of the headline — the reading line under the headword —
   goes back to the Japanese display face, where it belongs. */
.enpage .gp-h1-romaji { font-family: var(--display); }

/* The IPA, after the reading. Quieter than the reading and never wrapped
   mid-transcription: /ə.ˈpɔɪnt.mənt/ broken across two lines is unreadable. */
.enpage .gp-h1-ipa {
  display: inline-block;
  margin-left: 0.5em;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  font-size: 0.72em;
  letter-spacing: 0;
  color: var(--paper-dim);
  white-space: nowrap;
}

.enpage .gp-alt { color: var(--gold); }

/* The katakana in the headline sits in the Japanese face, not the Latin one —
   Georgia has no kana and the fallback would jump a size. */
.enpage .gp-h1-kana { font-family: var(--display); }

/* ── 3. spacing ────────────────────────────────────────────────────── */

/* Real spaces between the token buttons are what separate the words, so the
   line must not collapse them and must be allowed to wrap between them. */
.enpage .sl-en {
  white-space: normal;
  word-spacing: 0.04em;
}

/* A token is a <button>, and a button is inline-block: without this, a long
   sentence can only break at spaces the browser considers outside the button,
   which is all of them — but the buttons themselves must not stretch. */
.enpage .sl-en .tok { white-space: nowrap; }

/* The word panel's IPA line, which reuses .wp-reading (furigana on the .com
   side). Monospace so the stress mark lines up under the same column on every
   panel in a card. */
.enpage .wp-reading {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  letter-spacing: 0;
}