.tone-sandhi-hero {
    background: linear-gradient(135deg, #4338ca 0%, #0f766e 100%);
}

.tone-sandhi-input {
    min-height: 8rem;
    font-size: 1.08rem;
}

.tone-reading-scroll {
    overflow-x: auto;
    padding-bottom: .25rem;
}

.tone-reading-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 1.08rem;
}

.tone-reading-table th,
.tone-reading-table td {
    border-bottom: 1px solid var(--bs-border-color);
    padding: .65rem .8rem;
    text-align: center;
    white-space: nowrap;
}

.tone-reading-table th {
    left: 0;
    position: sticky;
    z-index: 1;
    min-width: 8.5rem;
    text-align: left;
    background: var(--bs-body-bg);
}

.tone-reading-table td {
    min-width: 4.25rem;
}

.tone-change {
    border-radius: .3rem;
    padding: .18rem .32rem;
    font-weight: 700;
}

.tone-citation {
    color: inherit;
    background: rgba(255, 193, 7, .28);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.tone-connected {
    color: var(--bs-success-text-emphasis);
    background: var(--bs-success-bg-subtle);
    box-shadow: inset 0 -2px 0 var(--bs-success);
}

.tone-grouping {
    font-family: var(--bs-font-monospace);
    color: var(--bs-body-color);
}

.tone-variant {
    background: var(--bs-tertiary-bg);
}

@media (max-width: 575.98px) {
    .tone-reading-table {
        font-size: 1rem;
    }

    .tone-reading-table th,
    .tone-reading-table td {
        padding: .55rem .62rem;
    }

    .tone-reading-table th {
        min-width: 7.2rem;
    }
}