/* Text-to-speech reader (/tools/text-reader, /chs/tools/text-reader).
   The sentence list is the reading surface AND the follow-along highlight, so it has to
   stay legible at Chinese body sizes and in both themes. Colours come from Bootstrap 5.3
   CSS variables rather than fixed hex values, which is what makes dark mode work here
   without a second block. */

.tr-input {
    font-size: 1.05rem;
    line-height: 1.7;
}

.tr-controls {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.tr-speed {
    min-width: 8rem;
    max-width: 12rem;
}

.tr-speed-label {
    min-width: 3.25rem;
    font-variant-numeric: tabular-nums;
}

/* The sentence list. Each row is a real <button> so it is keyboard-reachable and
   announced as clickable; the styling just removes the button chrome. */
.tr-sentences {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    max-height: 26rem;
    overflow-y: auto;
    padding: 0.25rem;
}

.tr-sentence {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    width: 100%;
    padding: 0.625rem 0.75rem;
    text-align: left;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg);
    border: 1px solid transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tr-sentence:hover,
.tr-sentence:focus-visible {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

/* The follow-along highlight. Deliberately a left bar plus a tinted background rather
   than a colour change on the text itself: at 0.5x speed a learner reads along with
   this for minutes at a time, and re-coloured CJK is tiring to read. */
.tr-sentence.tr-active {
    background: rgba(var(--bs-primary-rgb), 0.12);
    border-color: rgba(var(--bs-primary-rgb), 0.45);
    box-shadow: inset 0.25rem 0 0 0 var(--bs-primary);
}

.tr-sentence.tr-loading .tr-num::after {
    content: "";
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    margin: 0.125rem auto 0;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: tr-spin 0.7s linear infinite;
}

@keyframes tr-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .tr-sentence.tr-loading .tr-num::after {
        animation-duration: 2.5s;
    }

    .tr-sentence {
        transition: none;
    }
}

.tr-num {
    flex: 0 0 auto;
    min-width: 1.5rem;
    padding-top: 0.125rem;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--bs-secondary-color);
    text-align: center;
}

.tr-sentence.tr-active .tr-num {
    color: var(--bs-primary);
    font-weight: 700;
}

.tr-text {
    flex: 1 1 auto;
    word-break: break-word;
}