/* Numbers shell — extends Shared reader dark chrome */
.numbers-pace {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.4rem 0 0.8rem;
}
.numbers-pace button,
.numbers-target button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #f2f2f2;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font: inherit;
  cursor: pointer;
}
.numbers-pace button[aria-pressed="true"],
.numbers-target button[aria-pressed="true"] {
  background: #c45c7a;
  border-color: #c45c7a;
  color: #fff;
}
.numbers-target {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.6rem;
}
.integer-text {
  font-size: 0.95rem;
  color: #9ad0ff;
  margin-top: 0.35rem;
  min-height: 1.2em;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.pieces-text {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 0.25rem;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-height: 0;
  max-width: 100%;
}
/* Browse debug line: collapsed unless toggled */
.pieces-text:not(.is-shown) {
  display: none;
}
.play-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 0.75rem 0 0.4rem;
  flex-shrink: 0;
}
.play-status {
  text-align: center;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}
.browse-nav {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
  flex-shrink: 0;
}
.keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  max-width: 280px;
  margin: 0.6rem auto 0;
}
.keypad button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  border-radius: 10px;
  padding: 0.7rem 0;
  font-size: 1.15rem;
  cursor: pointer;
}
.keypad button.wide {
  grid-column: span 1;
}
.keypad-entry {
  text-align: center;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  min-height: 1.8em;
  color: #fff;
  margin-top: 0.4rem;
}
.quiz-feedback.ok { color: #7ddea0; }
.quiz-feedback.bad { color: #ff9aa8; }
.skin-note {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0.3rem 0 0.6rem;
}
.cache-bust {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  margin-top: 0.75rem;
}
.quiz-panel.hidden,
.browse-nav.hidden,
.hidden {
  display: none !important;
}

.numbers-skin {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.4rem 0 0.5rem;
}
.numbers-skin button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #f2f2f2;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font: inherit;
  cursor: pointer;
}
.numbers-skin button[aria-pressed="true"] {
  background: #5c8ec4;
  border-color: #5c8ec4;
  color: #fff;
}

/* ---- Desktop card fit (~1280+): keep glyph + play row on one plate ---- */
.numbers-shell .display-area {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: min(560px, calc(100vh - 130px));
  width: min(560px, 100%);
  box-sizing: border-box;
}
.numbers-shell .card-display {
  flex: 1 1 auto;
  /* min-height reserved below (fixed plate across Modes/filters) */
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding: 8px 16px;
  box-sizing: border-box;
}
.numbers-shell .hangul-text,
.numbers-shell .kana-text {
  /* RSVP stack fit: smaller Kana/Hangul so kanji+script+romaji+meaning stay on card */
  font-size: clamp(1.15rem, 2.4vw, 2.05rem) !important;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-break: anywhere;
  line-height: 1.2;
  hyphens: auto;
}
.numbers-shell .hangul-text.is-long,
.numbers-shell .kana-text.is-long {
  font-size: clamp(0.95rem, 1.9vw, 1.55rem) !important;
}
.numbers-shell .hangul-text.is-xlong,
.numbers-shell .kana-text.is-xlong {
  font-size: clamp(0.82rem, 1.55vw, 1.25rem) !important;
}
.numbers-shell .english-text {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: clamp(0.9rem, 1.4vw, 1.15rem);
}

body[data-skin="phone"] .hangul-text,
body[data-skin="phone"] .kana-text {
  font-size: clamp(1.05rem, 2.2vw, 1.55rem);
  letter-spacing: 0.02em;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-break: anywhere;
}
body[data-skin="phone"] .hangul-text,
body[data-skin="phone"] .kana-text.is-long,
body[data-skin="phone"] .hangul-text,
body[data-skin="phone"] .kana-text.is-xlong {
  font-size: clamp(0.9rem, 1.8vw, 1.25rem);
}
body[data-skin="amount"] .hangul-text,
body[data-skin="amount"] .kana-text {
  font-size: clamp(1.15rem, 2.3vw, 1.85rem);
}
body[data-skin="amount"] .hangul-text,
body[data-skin="amount"] .kana-text.is-long {
  font-size: clamp(0.95rem, 1.9vw, 1.45rem);
}
body[data-skin="ordinal"] .hangul-text,
body[data-skin="ordinal"] .kana-text {
  font-size: clamp(1.15rem, 2.4vw, 2.0rem);
}
body[data-skin="nominal"] .hangul-text,
body[data-skin="nominal"] .kana-text {
  font-size: clamp(1.15rem, 2.4vw, 1.95rem);
}

.numbers-shell .play-row .btn {
  max-width: 100%;
}

@media (min-width: 1280px) {
  .numbers-shell .display-area {
    max-height: min(540px, calc(100vh - 140px));
  }
  body[data-skin="phone"] .hangul-text,
body[data-skin="phone"] .kana-text {
    font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  }
  body[data-skin="phone"] .hangul-text,
body[data-skin="phone"] .kana-text.is-long,
  body[data-skin="phone"] .hangul-text,
body[data-skin="phone"] .kana-text.is-xlong {
    font-size: clamp(0.95rem, 1.35vw, 1.2rem);
  }
}

@media (max-width: 900px) {
  .numbers-shell .display-area {
    max-height: none;
    overflow: visible;
  }
  .numbers-shell .card-display {
    overflow: visible;
  }
}

input[name="training-mode"]:disabled + span {
  opacity: 0.45;
}

.debug-pieces-toggle {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}
.debug-pieces-toggle input {
  accent-color: #5c8ec4;
}

/* Nominal paused: keep button in DOM but out of layout */
.numbers-skin button[hidden],
.numbers-skin button[disabled][data-skin="nominal"] {
  display: none !important;
}


/* Modes alias + Native/Sino system toggle */
.numbers-modes { /* synonym of .numbers-skin */ }
.panel-sub {
  font-weight: 400;
  font-size: 0.78em;
  color: rgba(255, 255, 255, 0.45);
}
.numbers-system,
.numbers-subcats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.4rem 0 0.5rem;
}
.cardinal-nest-kicker {
  margin: 0.15rem 0 0.1rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.nest-heading {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin: 0.85rem 0 0.4rem;
}
#cardinal-nest.is-hidden,
#num-system-section.is-hidden {
  display: none !important;
}
.numbers-system button,
.numbers-subcats button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #f2f2f2;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font: inherit;
  cursor: pointer;
}
.numbers-subcats button[aria-pressed="true"] {
  background: #5c8ec4;
  border-color: #5c8ec4;
  color: #fff;
}
.numbers-system button[aria-pressed="true"] {
  background: #7a5cc4;
  border-color: #7a5cc4;
  color: #fff;
}
.numbers-system button:disabled,
#num-system-section.is-disabled .numbers-system button {
  opacity: 0.4;
  cursor: not-allowed;
}
.mode-note { /* alias of .skin-note */ }


/* ---- Card chrome parity (2026-10-01) ---- */
.parent-gloss-text {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.42);
  margin-top: 0.2rem;
  font-style: italic;
  min-height: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.parent-gloss-text:empty {
  display: none;
}

.speak-pace-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem 0.75rem;
  margin: 0.55rem 0 0.15rem;
  flex-shrink: 0;
}
.speak-pace-row.hidden {
  display: none !important;
}
.speak-pace-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
}
.numbers-pace--under-card {
  margin: 0;
}

.numbers-shell .kanji-text {
  font-size: clamp(1.35rem, 2.6vw, 2.35rem);
}
.numbers-shell .romanization-text {
  font-size: clamp(0.85rem, 1.3vw, 1.05rem);
}
.numbers-shell .card-display .kana-text {
  /* JA glyph face shares hangul-text size clamps via numbers.css */
}

.numbers-shell .action-buttons {
  flex-shrink: 0;
}
.numbers-shell .keyboard-hints {
  flex-shrink: 0;
}
.numbers-shell .speed-control {
  flex-shrink: 0;
}

.rsvp-only-section.hidden,
.rsvp-only.hidden {
  display: none !important;
}

/* Meaning = number symbol: slightly stronger than parent gloss */
.numbers-shell .english-text {
  color: #9ad0ff;
  font-variant-numeric: tabular-nums;
}

.checkbox-group .checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.25rem 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
}
.checkbox-group .checkbox-label input {
  accent-color: #5c8ec4;
}

.quiz-instruction {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0.35rem 0 0.5rem;
}
.quiz-instruction.hidden {
  display: none !important;
}

body[data-target="ja"] .numbers-shell .hangul-text.kana-text,
body[data-target="ja"] .numbers-shell .kana-text {
  font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
}

/* Phone = listen exercise: meaning (digits) primary; script stack optional/subdued */
body[data-skin="phone"] .numbers-shell .kanji-text,
body[data-skin="phone"] .numbers-shell .romanization-text {
  font-size: clamp(0.8rem, 1.2vw, 1rem);
}
body[data-skin="phone"] .numbers-shell .english-text {
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  color: #cfe8ff;
}
body[data-skin="phone"] .numbers-shell.phone-listen-browse .hangul-text:empty,
body[data-skin="phone"].phone-listen-browse .hangul-text:empty {
  display: none;
}

/* Quiz text entry (parity with /languages Shared reader) */
.numbers-shell .quiz-panel .quiz-prompt {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
  margin: 0.35rem 0 0.25rem;
  min-height: 1.3em;
}
.numbers-shell .quiz-panel .quiz-form {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0.45rem 0 0.35rem;
}
.numbers-shell .quiz-panel .quiz-answer-input {
  width: min(300px, 100%);
  padding: 0.7rem 0.95rem;
  font-size: 1.1rem;
  background: rgba(0, 0, 0, 0.28);
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.numbers-shell .quiz-panel .quiz-answer-input:focus {
  outline: none;
  border-color: #5c8ec4;
}
.numbers-shell .quiz-panel .quiz-feedback {
  min-height: 1.6em;
  text-align: center;
  margin-top: 0.35rem;
}
.numbers-system button.is-phone-locked,
#num-system-section.is-phone-locked .numbers-system button[data-num-system="native"] {
  opacity: 0.35;
  cursor: not-allowed;
}


/* ---- Fixed card height (2026-10-01): reserve slots across Modes/filters ---- */
/* Override Shared min-height:0 flex shrink — keep a stable plate when lines
   are empty (no kanji, delayed reveal, phone listen with script off, etc.). */
.numbers-shell .card-display {
  min-height: calc(
    16px /* padding */
    + (2.35rem * 1.2) /* kanji clamp max */
    + (2.05rem * 1.2) /* kana/hangul clamp */
    + (1.05rem * 1.35) /* romaji */
    + (1.15rem * 1.4) /* meaning */
    + 12px
  );
}

.numbers-shell .kanji-text {
  min-height: 1.2em;
  line-height: 1.2;
}
.numbers-shell .romanization-text {
  min-height: 1.35em;
}
.numbers-shell .english-text {
  min-height: 1.4em;
}
.numbers-shell .hangul-text,
.numbers-shell .kana-text {
  min-height: 1.2em;
}

/* Kanji reserve (Shared extras only covers glyph/reading/meaning) */
.card-display.reserve-kanji .kanji-text:empty {
  display: block;
  visibility: hidden;
  min-height: 1.2em;
}

/* Parent gloss: reserve when shown so toggle doesn't jump plate */
.numbers-shell .parent-gloss-text {
  min-height: 1.2em;
}
.card-display.reserve-gloss .parent-gloss-text:empty {
  display: block;
  visibility: hidden;
  min-height: 1.2em;
}

/* ---- Deck builder (Cardinal) ---- */
.deck-builder {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.35rem;
}
.deck-builder .deck-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 0.75rem;
}
.deck-builder label.deck-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
  min-width: 0;
}
.deck-builder input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.deck-mags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
}
.deck-mags .checkbox-label {
  font-size: 0.82rem;
}
.deck-builder .deck-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.15rem;
}
.deck-builder .deck-actions .btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #f2f2f2;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font: inherit;
  cursor: pointer;
}
.deck-builder .deck-actions .btn-primary {
  background: #5c8ec4;
  border-color: #5c8ec4;
  color: #fff;
}
.deck-builder-status {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  min-height: 1.2em;
  margin: 0;
}
.deck-cap-note {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}
#deck-builder-section.is-hidden {
  display: none !important;
}
#deck-builder-section.is-native-disabled .deck-builder {
  opacity: 0.42;
}
#deck-builder-section.is-native-disabled .deck-builder button,
#deck-builder-section.is-native-disabled .deck-builder input {
  cursor: not-allowed;
}
.deck-native-note {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.78);
  margin: 0.15rem 0 0.35rem;
}
.deck-drill {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.deck-drill button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #f2f2f2;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font: inherit;
  cursor: pointer;
  font-size: 0.85rem;
}
.deck-drill button[aria-pressed="true"] {
  background: #5c8ec4;
  border-color: #5c8ec4;
  color: #fff;
}