/* ============================================
   Thai Alphabet Page Styles
   ============================================ */

.alphabet-page {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: var(--spacing-16);
}

/* De-emphasise the carrier consonant (อ) only on the alphabet page,
   so the same helper class used in reviews stays at full opacity. */
.alphabet-page .combining-base {
    opacity: 0.35;
    font-weight: 300;
}

/* Page Header */
.page-header {
    text-align: center;
    margin-bottom: var(--spacing-6);
}
.page-header h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-2);
}
.page-header h1 .thai-text {
    color: var(--color-primary);
}

/* ============================================
   Tabs
   ============================================ */
/* One strip of pills, the same "pick one of N" language the vocabulary and
   sentence lists use, so the page stops being the last underline tab strip in
   the app. `.tabs` keeps its own horizontal scroll: the strip is wider than a
   phone (Russian labels more so) and must shrink instead of stretching the
   page. The CTA lives in this row rather than above it: it is an entry point
   into a course, not the page's primary task, and above the tabs it followed
   the reader onto Tone Rules and Special Characters. */
.tabs-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-6);
    min-width: 0;
}
.tabs {
    display: flex;
    gap: var(--spacing-2);
    min-width: 0;
    /* Pushes the actions to the right without `space-between`, which would
       strand the CTA in the middle of the row. */
    margin-right: auto;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-300) transparent;
}
.tabs::-webkit-scrollbar {
    height: 3px;
    width: 0;
}
.tabs::-webkit-scrollbar-thumb {
    background: var(--color-gray-300);
    border-radius: 2px;
}
.tabs::-webkit-scrollbar-track {
    background: transparent;
}
.tab {
    padding: 7px 14px;
    background: var(--surface);
    border: 1px solid var(--color-gray-200);
    border-radius: 999px;
    font-size: var(--font-size-sm);
    /* 21 px leading at 14 px, matching the pills elsewhere in the app. The kit
       `.tab` derives its leading from its own 14 px size; declaring it here
       keeps the strip from changing height when the bundle loads first. */
    line-height: 1.5;
    font-weight: 500;
    color: var(--color-gray-600);
    cursor: pointer;
    /* The kit `.tab` pulls itself down by 1 px to sit on an underline. */
    margin: 0;
    transition: all var(--transition-fast);
    white-space: nowrap;
    flex: 0 0 auto;
}
/* emerald-700 rather than 600: white on 600 is 3.7:1, under AA for 14 px text. */
.tab.active {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--ink-on-accent);
}
.tab:hover:not(.active) {
    /* The kit's `.tab` also paints a slate wash at 0-1-1; this rule is 0-3-0 and
       states the page's own hover, so the two cannot drift apart. */
    color: var(--color-gray-800);
    background: var(--color-gray-50);
    border-color: var(--color-gray-300);
}
/* The inherited ring is white at 3 px, which is invisible on the cream page and
   on the white pills. Both controls take the kit's emerald ring instead: 2 px
   at a 2 px offset, the same treatment `.vocab-seg` gets. */
.tab:focus-visible,
.sub-tab:focus-visible {
    outline: 2px solid var(--color-emerald);
    outline-offset: 2px;
}
.ui-btn-edit-alphabet {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-primary);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    text-decoration: none;
    background: var(--surface);
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.ui-btn-edit-alphabet:hover {
    background: var(--color-gray-50);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}
.tab-content {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}
.tab-content.active {
    display: block;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   Consonant Grid (compact 11-column)
   ============================================ */

.consonant-section {
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-4) var(--spacing-4);
    border-radius: var(--radius-lg);
}
/* Class colour is carried by the block, not by every tile: three tints within a
   few points of lightness turned the grid into one beige mosaic, and the low
   class tan sat close enough to the page cream (and to the faded treatment for
   obsolete letters) that ordinary letters read as disabled. The band groups,
   the white tiles keep the letterforms at full contrast, and the obsolete fade
   is the only thing that looks faded. */
.consonant-section.section-mid {
    background: var(--alphabet-mid-surface);
}
.consonant-section.section-high {
    background: var(--alphabet-high-surface);
}
.consonant-section.section-low {
    background: var(--alphabet-low-surface);
}
.consonant-section:last-child {
    margin-bottom: 0;
}
.section-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-3);
    padding: var(--spacing-2) 0;
    display: inline-block;
    border-bottom: 2px solid transparent;
}
/* Class inks, measured against the band each heading sits on: mid 6.38:1,
   high 5.74:1, low 5.47:1. The high ink was #3D805A (4.30:1) which misses AA
   for 18 px/600 text, so it is one step darker at the same hue. */
.section-title.legend-mid {
    color: var(--alphabet-mid-ink);
    border-bottom-color: var(--alphabet-mid-border);
}
.section-title.legend-high {
    color: var(--alphabet-high-ink);
    border-bottom-color: var(--alphabet-high-border);
}
.section-title.legend-low {
    color: var(--alphabet-low-ink);
    border-bottom-color: var(--alphabet-low-border);
}

.consonant-grid {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    gap: 10px;
    max-width: 100%;
}

.consonant-cell {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* The name can run to three lines on a small tile ("To Pà-tàk"); a grid item
       with a fixed height would let it spill outside the tile and look as if it
       were painted over the glyph. Clipping the box keeps both inside it. */
    overflow: hidden;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 4px;
    border: 2px solid transparent;
    background: var(--surface);
    position: relative;
    /* The tile has to separate from the class band behind it, not from the page
       cream, so the shadow is a slate tint at slightly higher opacity. */
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    /* Grid items default to min-width:auto, so a long name would stretch its
       track and push the page wider than a phone screen. */
    min-width: 0;
}
.consonant-cell .thai-char {
    /* 1.2, not 1: Sarabun's ink overshoots a line box set to the font size, so
       letters with a long tail painted their descender out of the box and into
       the gap. The taller box contains the ink; the margin below then sets the
       spacing, and it is the same 4 px the romanization used before, because the
       line box already grew by 3 px (see `.cell-name`). */
    font-size: 2.2rem;
    line-height: 1.2;
    flex: 0 0 auto;
    font-family: 'Sarabun', sans-serif;
    color: var(--color-gray-900);
}
/* The tile's second line is the letter's name, not its romanization: the glyph
   already shows the sound, and "Ko Kài" is how the letter is referred to in
   every course (and on this page's own detail view). Slate at 4.80:1, 11 px.
   4 px keeps the tight spacing the tile had with `.sound` (7 px against a
   56 px box, i.e. the same distance the taller line box now absorbs). */
.consonant-cell .cell-name {
    font-size: 0.7rem;
    line-height: 1.25;
    color: var(--color-gray-500);
    font-weight: 500;
    margin-top: 4px;
    max-width: 100%;
    text-align: center;
    /* Two lines maximum: beyond that the tile cannot hold the name without
       crowding the glyph, and a truncated name still identifies the letter. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* "anywhere" (unlike break-word) also shrinks the intrinsic min-content
       width, which is what lets the cell track narrow to fit the viewport. */
    overflow-wrap: anywhere;
}

/* ฎ ฏ ฐ ญ are the four consonants whose ink actually leaves the line box in
   Sarabun (measured at 2.2rem: ink bottom 60.8-63.4 px against a 59 px box), so
   they need the wider gap the other 40 letters do not. The set is applied by
   `_alphabet_consonants.html`. */
.consonant-cell.has-tail .cell-name {
    margin-top: 8px;
}

/* Dim rare/obsolete consonants */
.consonant-cell.rare {
    opacity: 0.6;
    filter: saturate(0.5);
}
.consonant-cell.rare:hover {
    opacity: 1;
    filter: saturate(1);
}

.consonant-cell:hover {
    transform: scale(1.06);
    box-shadow: var(--shadow-md);
    z-index: 2;
}

/* Rare/obsolete consonant legend */
.rare-legend {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.rare-legend i {
    color: var(--color-gray-400);
}

/* Details button on consonant cells */
.consonant-cell .ui-btn-details {
    position: absolute;
    top: 4px;
    right: 4px;
    background: transparent;
    border: none;
    color: var(--color-gray-400);
    cursor: pointer;
    padding: 3px;
    border-radius: 50%;
    transition: all 0.2s;
    opacity: 0;
    font-size: 0.85rem;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.consonant-cell:hover .ui-btn-details {
    opacity: 1;
}
.consonant-cell .ui-btn-details:hover {
    background-color: rgba(0,0,0,0.08);
    color: var(--color-primary);
}

/* Mastery dot */
.mastery-dot {
    position: absolute;
    bottom: 2px;
    left: 2px;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
}
.mastery-dot.level-0 { background: var(--mastery-0); }
.mastery-dot.level-1 { background: var(--mastery-1); }
.mastery-dot.level-2 { background: var(--mastery-2); }
.mastery-dot.level-3 { background: var(--mastery-3); }
.mastery-dot.level-4 { background: var(--mastery-4); }
.mastery-dot.level-5 { background: var(--mastery-5); }
.mastery-dot.level-6 { background: var(--mastery-6); }
.mastery-dot.level-7 { background: var(--mastery-7); }

/* ============================================
   Vowels Tab
   ============================================ */
/* A `#monophthongs` deep link scrolls the panel to the top of the viewport,
   which puts its first line under the sticky navbar and leaves the chips that
   select it off-screen. The margin makes the browser stop one tab row above the
   panel, so the labels and the content below them are both in view. */
.vowel-subtab-content {
    scroll-margin-top: 12rem;
}
.vowel-sub-tabs {
    display: flex;
    gap: var(--spacing-1);
    margin-bottom: var(--spacing-5);
    flex-wrap: wrap;
    border-bottom: 1px solid var(--color-gray-200);
}
/* Sub-tabs sit one level below the page tabs, which are filled emerald pills.
   Two rows of pills read as six tabs rather than two levels, and a tint on the
   active chip adds a third green to a page that should have one, so this level
   is carried by typography instead: no fill, a 2 px rule and darker ink. */
.sub-tab {
    padding: var(--spacing-2) var(--spacing-3);
    background: none;
    border: none;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-gray-500);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.sub-tab.active {
    background: none;
    color: var(--color-gray-900);
    border-bottom-color: var(--color-primary-dark);
    font-weight: 600;
}
.sub-tab:hover:not(.active) {
    background: none;
    color: var(--color-gray-800);
}
.vowel-subtab-content {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}
.vowel-subtab-content.active {
    display: block;
}

/* Vowel symbols grid (individual marks) */
.vowel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
}
.vowel-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid var(--color-gray-200);
    background: var(--surface);
}
.vowel-cell .thai-char {
    font-size: 2rem;
    font-family: 'Sarabun', sans-serif;
    color: var(--color-gray-900);
    line-height: 1;
}
.vowel-cell .sound {
    font-size: 0.7rem;
    /* Same secondary-text colour as the consonants' romanization: emerald at
       11 px measured 3.66:1 on white, under AA. */
    color: var(--color-gray-600);
    font-weight: 600;
    margin-top: 4px;
}
.vowel-cell:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}
.vowel-cell {
    position: relative;
}
.vowel-cell .ui-btn-details {
    position: absolute;
    top: 4px;
    right: 4px;
    background: transparent;
    border: none;
    color: var(--color-gray-400);
    cursor: pointer;
    padding: 3px;
    border-radius: 50%;
    transition: all 0.2s;
    opacity: 0;
    font-size: 0.85rem;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vowel-cell:hover .ui-btn-details {
    opacity: 1;
}
.vowel-cell .ui-btn-details:hover {
    background-color: rgba(0,0,0,0.08);
    color: var(--color-primary);
}

/* Section intro text */
.section-intro {
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-4);
    line-height: 1.5;
}

/* ============================================
   Monophthong Cards
   ============================================ */
.mono-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-4);
}
.mono-card {
    background: var(--surface);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}
.mono-header {
    border-bottom: 1px solid var(--color-gray-100);
    padding-bottom: var(--spacing-3);
}
.mono-sound {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
    display: block;
    line-height: 1;
    margin-bottom: var(--spacing-1);
}
.mono-ipa {
    font-family: monospace;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}
.mono-desc {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-top: var(--spacing-1);
    display: block;
    line-height: 1.4;
}
.mono-forms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3);
}
.mono-form {
    cursor: pointer;
    padding: var(--spacing-3);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    text-align: center;
    background: var(--color-gray-50);
}
.mono-form:hover {
    background: rgba(13, 148, 136, 0.08);
}
.mono-length {
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-gray-400);
    display: block;
    margin-bottom: var(--spacing-1);
}
.mono-written {
    font-size: 1.8rem;
    font-family: 'Sarabun', sans-serif;
    color: var(--color-gray-800);
    display: block;
    line-height: 1.2;
    margin-bottom: var(--spacing-2);
}
.mono-form .example-word .thai {
    font-weight: 600;
    font-size: var(--font-size-lg);
    font-family: 'Sarabun', sans-serif;
    display: block;
}
.mono-form .example-word .roman {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}
.mono-form .example-word .meaning {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
    font-style: italic;
    margin-top: 2px;
}

/* ============================================
   Diphthong Cards
   ============================================ */
.diphthong-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--spacing-4);
}
.diphthong-card {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--surface);
}
.diphthong-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}
.diphthong-header {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-2);
}
.diphthong-header .written-form {
    font-size: 1.6rem;
    font-family: 'Sarabun', sans-serif;
    color: var(--color-gray-800);
}
.diphthong-header .sound-name {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
}
.diphthong-header .sound-ipa {
    font-family: monospace;
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}
.diphthong-card .sound-desc {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-3);
}
.diphthong-card .example-word {
    background: var(--color-gray-50);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-md);
    text-align: center;
}
.diphthong-card .example-word .thai {
    font-size: var(--font-size-xl);
    font-weight: 600;
    font-family: 'Sarabun', sans-serif;
}
.diphthong-card .example-word .roman {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-left: var(--spacing-2);
}
.diphthong-card .example-word .meaning {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
    font-style: italic;
    margin-top: 2px;
}

/* Special vowel forms */
.special-form-group {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}
.special-form-group h4 {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
}
.special-form-group h4 .sound-name {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
}
.special-form-group h4 .sound-ipa {
    font-family: monospace;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}
.special-form-group .sound-desc {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-3);
}
.special-form-variants {
    display: flex;
    gap: var(--spacing-3);
    flex-wrap: wrap;
}
.special-form-variant {
    flex: 0 1 200px;
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}
.special-form-variant:hover {
    background: rgba(13, 148, 136, 0.08);
}
.special-form-variant .written-form {
    font-size: 1.4rem;
    font-family: 'Sarabun', sans-serif;
    display: block;
    color: var(--color-gray-800);
    line-height: 1.2;
    margin-bottom: var(--spacing-1);
}
.special-form-variant .variant-name {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    display: block;
    margin-bottom: var(--spacing-1);
}
.special-form-variant .thai {
    font-weight: 600;
    font-size: var(--font-size-base);
    font-family: 'Sarabun', sans-serif;
}
.special-form-variant .roman {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-left: 4px;
}
.special-form-variant .meaning {
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
    font-style: italic;
    margin-left: 4px;
}

/* ============================================
   Tone Marks Tab
   ============================================ */
.tone-overview {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
}
.tone-overview .tone-card {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: var(--spacing-4);
    align-items: center;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    background: var(--surface);
    transition: all var(--transition-fast);
}
.tone-overview .tone-card:hover {
    box-shadow: var(--shadow-sm);
}

.tone-contour-visual {
    width: 70px;
    height: 45px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tone-contour-visual svg {
    width: 100%;
    height: 100%;
}
.tone-lottie {
    width: 100%;
    height: 100%;
}

.tone-info h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-800);
    margin-bottom: 2px;
}
.tone-info .tone-thai-name {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    font-family: 'Sarabun', sans-serif;
}
.tone-mark-display {
    font-size: 1.6rem;
    font-family: 'Sarabun', sans-serif;
    color: var(--color-gray-800);
    display: inline-block;
    margin: var(--spacing-1) 0;
}
.tone-mark-display.muted {
    color: var(--color-gray-400);
    font-size: var(--font-size-sm);
    font-family: inherit;
}
.tone-info .tone-desc {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-top: var(--spacing-1);
}

.tone-examples-list {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}
.tone-example {
    background: var(--color-gray-50);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
    min-width: 70px;
}
.tone-example:hover {
    background: rgba(13, 148, 136, 0.08);
}
.tone-example .thai {
    font-size: var(--font-size-lg);
    font-weight: 600;
    font-family: 'Sarabun', sans-serif;
    display: block;
}
.tone-example .roman {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}
.tone-example .meaning {
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
    display: block;
}

/* Tone Comparison Section */
.tone-comparison {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
}
.tone-comparison h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-1);
}
.tone-comparison > p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-4);
}
.comparison-row {
    display: flex;
    gap: var(--spacing-3);
    flex-wrap: wrap;
    justify-content: center;
}
.comp-item {
    background: var(--surface);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-3) var(--spacing-4);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 120px;
}
.comp-item:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}
.comp-item .thai {
    font-size: var(--font-size-xl);
    font-weight: 600;
    font-family: 'Sarabun', sans-serif;
    display: block;
    margin-bottom: 2px;
}
.comp-item .tone-label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    display: block;
}
.comp-item .meaning {
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    font-weight: 500;
    display: block;
    margin-top: 2px;
}

/* ============================================
   Tone Rules Cheatsheet
   ============================================ */
/* ============================================
   Tone Rules Cheatsheet
   ============================================ */
.tone-cheatsheet h3 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin-bottom: var(--spacing-2);
}
.tone-cheatsheet > .section-intro {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-6);
}

/* Tone Rules Matrix (consonant class rows × tone mark / syllable columns) */
.tone-rules-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-8);
    background: var(--surface);
}
.tone-rules-table thead th {
    background: var(--color-gray-50);
    padding: var(--spacing-2) var(--spacing-2);
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid var(--color-gray-200);
    vertical-align: middle;
}
.tone-rules-table thead .th-group {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}
.tone-rules-table thead .th-class-col {
    text-align: left;
    padding-left: var(--spacing-4);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-gray-600);
    width: 20%;
}
.tone-rules-table .th-mark {
    display: block;
    height: 3.5rem;
    line-height: 3.5rem;
    text-align: center;
}
.tone-rules-table .th-mark img {
    display: inline-block;
    height: 3.25rem;
    width: auto;
    vertical-align: middle;
}
.tone-rules-table .th-syllable {
    display: block;
    font-size: var(--font-size-base);
    color: var(--color-gray-800);
}
.tone-rules-table .th-mark-name {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-gray-400);
}
.tone-rules-table thead th + th,
.tone-rules-table tbody td + td,
.tone-rules-table tbody th + td {
    border-left: 1px solid var(--color-gray-100);
}
.tone-rules-table tbody th.td-class {
    text-align: left;
    padding: var(--spacing-2) var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-100);
    vertical-align: middle;
}
.tone-rules-table .td-class-name {
    display: block;
    font-size: var(--font-size-base);
    font-weight: 700;
}
.tone-rules-table .td-class.class-mid .td-class-name { color: var(--alphabet-mid-ink); }
.tone-rules-table .td-class.class-high .td-class-name { color: var(--alphabet-high-ink); }
.tone-rules-table .td-class.class-low .td-class-name { color: var(--alphabet-low-ink); }
.tone-rules-table .td-class-consonants {
    display: block;
    font-family: 'Sarabun', sans-serif;
    font-size: 1.05rem;
    line-height: 1.5;
    letter-spacing: 1px;
    color: var(--color-gray-700);
    word-break: break-all;
}
.tone-rules-table tbody td {
    padding: var(--spacing-2) var(--spacing-2);
    text-align: center;
    border-bottom: 1px solid var(--color-gray-100);
    vertical-align: middle;
}
.tone-rules-table tbody tr:last-child th.td-class,
.tone-rules-table tbody tr:last-child td {
    border-bottom: none;
}
.tone-rules-table tbody tr:hover td {
    background: var(--color-gray-50);
}

/* Tone symbols (diacritic marks) — all black and thick */
.tone-symbol {
    display: block;
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1.1;
    color: var(--color-gray-900, #111827);
}
.tone-name {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
}

/* N/A placeholder */
.tone-na {
    font-size: var(--font-size-sm);
    color: var(--color-gray-300);
    font-weight: 500;
}

/* Syllable Types */
.syllable-types-info h4 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--spacing-4);
}
.syllable-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
}
.syllable-card {
    background: var(--surface);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
    transition: all var(--transition-fast);
}
.syllable-card:hover {
    box-shadow: var(--shadow-sm);
}
.syllable-card.live {
    border-left: 3px solid var(--alphabet-high-border);
}
.syllable-card.dead {
    border-left: 3px solid var(--alphabet-low-border);
}
.syllable-card h5 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-3);
    color: var(--color-gray-800);
}
.syllable-card p {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 900px){

}
@media (max-width: 600px){
    .syllable-cards {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 900px){
    .consonant-grid {
        grid-template-columns: repeat(8, 1fr);
    }
    .tone-overview .tone-card {
        grid-template-columns: 70px 1fr;
    }
    .tone-overview .tone-examples-list {
        grid-column: 1 / -1;
        margin-top: var(--spacing-2);
    }
}
@media (max-width: 600px){
    /* Five pills plus two actions do not fit one 390 px row: the strip keeps the
       full width and scrolls, the actions drop to a second row. */
    .tabs {
        flex: 1 1 100%;
        margin-right: 0;
        order: 1;
    }
    .tabs-wrapper > .action-cta-quiet,
    .tabs-wrapper > .ui-btn-edit-alphabet {
        order: 2;
    }
    .consonant-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 4px;
    }
    .consonant-section {
        padding: var(--spacing-2) var(--spacing-2) var(--spacing-3);
    }
    /* Six columns leave a 55 px tile: a square cannot hold the glyph plus two
       lines of name, and the clamp then cuts the second line in half. The tile
       gives up its aspect ratio instead, so the name wraps inside the box rather
       than being sliced by it. */
    .consonant-cell {
        aspect-ratio: auto;
        min-height: 78px;
        padding: 5px 3px;
    }
    .consonant-cell .thai-char {
        font-size: 1.55rem;
    }
    /* "Tho Phûu-thâo" needs three lines at 49 px of text width; a two-line clamp
       would ellipsise a name a learner has to read. */
    .consonant-cell .cell-name {
        font-size: 0.6rem;
        line-height: 1.2;
        margin-top: 3px;
        -webkit-line-clamp: 3;
    }
    .consonant-cell.has-tail .cell-name {
        margin-top: 7px;
    }
    .mono-cards {
        grid-template-columns: 1fr;
    }
    .tone-rules-table .td-class-consonants {
        display: none;
    }
    .tone-rules-table thead .th-class-col {
        width: 20%;
    }
    .tone-rules-table .tone-symbol {
        font-size: 1.75rem;
    }
    .diphthong-cards {
        grid-template-columns: 1fr;
    }
    .syllable-cards {
        grid-template-columns: 1fr;
    }
    .comparison-row {
        flex-direction: column;
        align-items: stretch;
    }
    .tone-overview .tone-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
}