/* Kana Chart & Quiz (RT-EDU-015).
 *
 * Layout notes that matter:
 *  - The chart scrolls inside its OWN overflow-x container. A grid ancestor's
 *    default min-width:auto lets that overflow escape to the body, so
 *    .kana-scroll carries min-width:0.
 *  - Every cell is a fixed height so switching romanization system, script or
 *    group cannot reflow the page. The romaji strings differ in length
 *    (shi/si, tsu/tu) and an auto-height cell would shift the whole grid.
 *  - The quiz prompt box is a fixed height for the same reason: the feedback
 *    line appears and disappears on every answer, and a growing box would
 *    push the input away from under the user's cursor.
 */

.kana-scroll {
    overflow-x: auto;
    min-width: 0;
    padding-bottom: 4px;
}

.kana-grid {
    display: grid;
    grid-template-columns: 2.25rem repeat(5, minmax(4.25rem, 1fr));
    gap: 6px;
    min-width: 26rem;
}

.kana-grid.is-yoon {
    grid-template-columns: 2.25rem repeat(3, minmax(4.75rem, 1fr));
    min-width: 20rem;
}

/* Extended katakana: six columns (a i u e o, plus the small-ゅ combinations
   テュ/デュ/フュ, which belong to no vowel column). Cells are placed BY
   VOWEL, so this table is mostly gaps — which is the honest shape of it. */
.kana-grid.is-extended {
    grid-template-columns: 2.25rem repeat(6, minmax(4.25rem, 1fr));
    min-width: 31rem;
}

.kana-colhead {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    color: var(--rt-ink-soft);
    padding-bottom: 2px;
}

/* Sits between the group heading and its grid. Reserved height so the grid
   below it does not jump when the group is switched on. */
.kana-group-note {
    font-size: .76rem;
    line-height: 1.5;
    color: var(--rt-ink-soft);
    margin: .1rem 0 .7rem;
    max-width: 62ch;
}

.kana-rowlabel {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    color: var(--rt-ink-soft);
}

.kana-cell {
    height: 4.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid var(--rt-border, #ebebeb);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    padding: 2px;
    text-align: center;
    font: inherit;
    width: 100%;
}

.kana-cell:hover,
.kana-cell:focus-visible {
    border-color: var(--rt-accent, #e8622a);
}

.kana-cell.is-empty {
    border-style: dashed;
    background: transparent;
    cursor: default;
}

.kana-cell.is-empty:hover { border-color: var(--rt-border, #ebebeb); }

.kana-glyph {
    font-size: 1.6rem;
    line-height: 1.1;
}

.kana-romaji {
    font-size: .78rem;
    color: var(--rt-ink-soft);
    letter-spacing: .01em;
}

/* A cell whose three systems disagree — the teaching moment. */
.kana-cell.is-split { border-color: #d8b26a; }
.kana-cell.is-split .kana-romaji { color: #8a6410; font-weight: 600; }

.kana-cell.is-obsolete { opacity: .62; }

.kana-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .74rem;
    color: var(--rt-ink-soft);
    margin-top: .5rem;
}

.kana-legend span::before {
    content: '';
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 3px;
    margin-right: .35rem;
    vertical-align: -1px;
    border: 1px solid var(--rt-border, #ebebeb);
}

.kana-legend .lg-split::before { border-color: #d8b26a; background: #fdf6e6; }
.kana-legend .lg-obsolete::before { opacity: .5; background: #eee; }

/* Detail strip under the chart — reserved height so clicking a cell does not
   shift the grid above it. */
.kana-detail {
    min-height: 4.75rem;
    margin-top: .75rem;
    padding: .7rem .85rem;
    border-radius: 10px;
    background: var(--rt-result-bg);
    color: var(--rt-result-ink);
}

.kana-detail .kd-head {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
}

.kana-detail .kd-glyph { font-size: 1.5rem; }
.kana-detail .kd-sys { font-size: .8rem; color: var(--rt-result-muted); }
.kana-detail .kd-note { font-size: .8rem; color: var(--rt-result-muted); margin-top: .35rem; }
.kana-detail .kd-empty { font-size: .82rem; color: var(--rt-result-muted); }
/* The example loanword is the payload for an extended cell, so it reads at
   full strength rather than as a muted footnote. */
.kana-detail .kd-example { font-size: .88rem; color: var(--rt-result-ink); margin-top: .35rem; }

/* ── Quiz ─────────────────────────────────────────────────────────────── */

.kana-quiz-prompt {
    min-height: 8.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    border-radius: 12px;
    background: var(--rt-result-bg);
    color: var(--rt-result-ink);
    padding: 1rem;
}

.kana-quiz-glyph { font-size: 3.2rem; line-height: 1; }
.kana-quiz-ask { font-size: .8rem; color: var(--rt-result-muted); }

/* Fixed height: the feedback line appears on every answer and must not push
   the input box away from under the cursor. */
.kana-quiz-feedback {
    min-height: 2.75rem;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 .5rem;
    color: var(--rt-ink-soft);
}

.kana-quiz-feedback.is-right { color: #1d7a4c; }
.kana-quiz-feedback.is-wrong { color: #b0331f; }

.kana-quiz-row {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: .6rem;
}

.kana-quiz-row input[type="text"] {
    flex: 1 1 12rem;
    min-width: 0;
    max-width: 18rem;
    font-size: 1.05rem;
    text-align: center;
}

.kana-score {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    flex-wrap: wrap;
    font-size: .8rem;
    color: var(--rt-ink-soft);
    margin-top: .6rem;
}

.kana-score b { color: var(--rt-ink, #1a1814); font-variant-numeric: tabular-nums; }

.kana-controls {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.kana-controls .field { display: flex; flex-direction: column; gap: .25rem; }
.kana-controls label { font-size: .74rem; font-weight: 600; color: var(--rt-ink-soft); }

.kana-groups { display: flex; flex-wrap: wrap; gap: .5rem; }

.kana-groups label {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 500;
    color: var(--rt-ink, #1a1814);
}

.kana-sysnote {
    font-size: .76rem;
    color: var(--rt-ink-soft);
    margin: .1rem 0 .9rem;
    min-height: 2.1rem;
}

.kana-modes { display: flex; gap: .4rem; margin-bottom: 1rem; flex-wrap: wrap; }

@media (max-width: 480px) {
    .kana-grid { grid-template-columns: 1.9rem repeat(5, minmax(3.4rem, 1fr)); }
    .kana-grid.is-extended { grid-template-columns: 1.9rem repeat(6, minmax(3.4rem, 1fr)); min-width: 24rem; }
    .kana-cell { height: 3.9rem; }
    .kana-glyph { font-size: 1.35rem; }
    .kana-romaji { font-size: .7rem; }
    .kana-quiz-glyph { font-size: 2.6rem; }
}