/* css/onsei.css
   Styles owned by the onsei/ screen. Loaded AFTER css/app.css.

   Per the file-ownership rule used by css/eye-training.css and
   css/hayakuchi.css: new styles for this screen go here, never into
   css/app.css, which another workstream owns. Everything this screen can
   reuse (card, notice, option-row, btn, stat-row, progress ring) already
   lives in app.css and is not redefined here.

   This file exists because of the two active exercises added 2026-09-02
   (音の位置あて / 雑音の中の聞き取り), which need two controls app.css has
   no equivalent for: a two-up left/right answer pair, and a four-up grid of
   word choices. */

/* The `hidden` attribute is implemented by the browser's own stylesheet as
   `display: none`, which ANY author rule setting `display` outranks. This
   screen hides controls with `hidden` and styles them with `display: grid`
   / `flex` (below), and `.btn-block` in app.css is `display: flex` too, so
   without this rule a finished exercise keeps showing its answer buttons --
   which is exactly what happened before it was added. `!important` is the
   standard remedy for this (it is what normalize.css ships) because the
   whole point is to outrank whatever `display` a component sets.

   NOTE: app.css has no such rule, so any other screen that hides a
   `.btn-block` with `hidden` has the same latent bug. Fixing it there is
   app.css's owner's call, not this file's. */
[hidden] {
  display: none !important;
}

/* The mode tabs carry three labels, one of them long ("雑音の中の聞き取り"),
   so they need to wrap rather than squeeze to unreadable width on a phone. */
.mode-tabs {
  flex-wrap: wrap;
}

/* ---- 音の位置あて ---- */

/* Left and right sit side by side deliberately: the answer is a spatial
   judgement, so a spatial control reads faster than a stacked list. They
   stay side by side at every width -- there are only two, and stacking
   them would put "left" above "right", which is exactly the wrong mental
   model for the question being asked. */
.locate-buttons {
  display: flex;
  gap: 12px;
  margin: 16px 0;
}

.locate-btn {
  flex: 1 1 0;
  min-height: 96px;
  font-size: 1.4rem;
  font-weight: 700;
}

/* ---- 雑音の中の聞き取り ---- */

/* Four near-homophones (see data/listening-words.js). A 2x2 grid keeps all
   four in view without scrolling on a phone, which matters: the listener
   has just heard the word once and should not have to scroll while holding
   it in memory. */
.word-choices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 16px 0;
}

.word-choice {
  min-height: 72px;
  font-size: 1.05rem;
  line-height: 1.35;
  padding: 8px 6px;
  word-break: keep-all;
}

/* One column on very narrow screens, where two columns would force the
   kanji gloss in each label to wrap mid-word. */
@media (max-width: 360px) {
  .word-choices {
    grid-template-columns: 1fr;
  }
  .word-choice {
    min-height: 56px;
  }
}