/* BTS-TTS additions to the Academic Project Page Template. */
:root {
    --ink: var(--text-primary);
    --muted: var(--text-secondary);
    --faint: #68778d;
    --line: var(--border-color);
    --line-soft: #eceff2;
    --paper: var(--background-primary);
    --wash: var(--background-secondary);
    --blue: var(--primary-color);
    --blue-dark: var(--primary-hover);
    --green-soft: #e9f7f2;
}

button, audio { font: inherit; }
.hero-heading { text-align: center; }
.publication-title strong { font-weight: inherit; }
.authors { margin: 0 0 12px; }
.authors span { display: inline-block; color: var(--primary-color); }
.authors span:not(:last-child)::after { content: ",\00a0"; color: var(--ink); }
.authors sup { margin-left: 1px; color: var(--ink); font-size: .7em; }
.affiliation { margin: 0; }
.author-note { margin-top: 6px; }
.project-links { display: flex; justify-content: center; margin-top: 24px; }
.project-links a { gap: 8px; }
.project-links svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }
.abstract-content { max-width: 900px; }
.abstract { text-align: justify; }
.architecture-figure { margin: 0 auto; padding-block: 4rem; text-align: center; }
.architecture-figure img { display: block; width: 100%; height: auto; margin: 0 auto; }
.architecture-figure figcaption { margin: 24px auto 0; color: var(--muted); line-height: 1.7; text-align: left; }
.experiments { max-width: 1136px; margin: 0 auto; padding-block: 3rem 4rem; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.section-heading .title.is-3 { margin-bottom: 0 !important; }
.section-heading .title.is-3::after { left: 0; transform: none; }
.eyebrow { margin: 0 0 8px; color: var(--blue); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.section-description { margin: 24px 0 12px; color: var(--muted); font-size: .95rem; line-height: 1.7; }
.dataset-tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--border-radius); background: var(--wash); }
.dataset-tab { padding: 8px 18px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: .875rem; font-weight: 600; cursor: pointer; }
.dataset-tab:hover { color: var(--blue-dark); }
.dataset-tab.active { color: #fff; background: var(--blue); }
.dataset-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.footer { text-align: center; font-size: .85rem; }
.footer .content p { margin-bottom: 12px; }

@media (max-width: 700px) {
    .section-heading { align-items: flex-start; flex-direction: column; gap: 24px; }
    .dataset-tabs { width: 100%; }
    .dataset-tab { flex: 1; }
    .abstract { text-align: left; }
    .architecture-figure { padding-block: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero, .section { animation: none; }
    .button { transition: none !important; }
}

/* Keep the surrounding content narrow and let the audio table use more space. */
#samples {
    width: min(1400px, calc(100vw - 64px));
    margin-inline: calc((100% - min(1400px, 100vw - 64px)) / 2);
}

/* One text per row, one model configuration per audio column. */
.comparison-scroll {
    --text-column-width: 408px;
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 6px;
    -webkit-overflow-scrolling: touch;
}

.comparison-scroll:focus-visible,
.audio-player audio:focus-visible {
    outline: 3px solid rgba(37, 130, 196, .22);
    outline-offset: 2px;
}

.comparison-table {
    width: 100%;
    min-width: calc(var(--text-column-width) + 6 * 158px);
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.comparison-table .text-column {
    width: var(--text-column-width);
}

.comparison-table th,
.comparison-table td {
    padding: 12px;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line);
    text-align: center;
    vertical-align: middle;
}

.comparison-table tr > :last-child {
    border-right: 0;
}

.comparison-table tbody tr:last-child > * {
    border-bottom: 0;
}

.comparison-table thead th {
    text-align: center;
    background: var(--wash);
    color: #3c434a;
    font-size: .8rem;
    font-weight: 700;
}

.comparison-table .text-cell {
    position: sticky;
    left: 0;
    z-index: 1;
    padding: 16px 20px;
    border-right: 1px solid var(--line);
    background: var(--paper);
    text-align: left;
    font-weight: 400;
}

.comparison-table thead .text-cell {
    background: var(--wash);
    font-weight: 700;
}

.comparison-table .proposed-cell {
    background: #f5fbf8;
}

.comparison-table thead .proposed-cell {
    background: var(--green-soft);
    color: #08775a;
}

.sample-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 7px;
    color: var(--faint);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .68rem;
}

.sample-text {
    margin: 0;
    color: #333;
    font-size: .8rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.comparison-table tbody tr:hover td,
.comparison-table tbody tr:hover .text-cell {
    background: #f0f5f8;
}

@media (max-width: 700px) {
    #samples {
        width: calc(100vw - 48px);
        margin-inline: calc((100% - (100vw - 48px)) / 2);
    }

    .comparison-scroll {
        --text-column-width: 288px;
    }

    .comparison-table .text-cell {
        position: static;
        padding: 12px;
    }
}

/* Native audio controls, matching IPython.display.Audio. */
.audio-player,
.audio-missing {
    width: 100%;
    max-width: 132px;
    min-width: 0;
    margin: 0 auto;
}

.audio-player audio {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.audio-missing {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    border: 1px dashed #d9dde1;
    border-radius: 999px;
    color: var(--faint);
    background: #f7f8f9;
    font-size: .72rem;
}

.scroll-hint { display: block; margin: 8px 0 0; color: var(--faint); font-size: .74rem; text-align: right; }

.training-notes {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: .85rem;
    line-height: 1.55;
}

.training-notes p {
    margin: 4px 0;
}

.comparison-table sup {
    margin-left: 2px;
}

.comparison-table sup a {
    color: inherit;
    text-decoration: none;
}

/* Six audio columns fit without scrolling at this viewport width. */
@media (min-width: 1354px) {
    .scroll-hint {
        display: none;
    }
}

.spectrogram-toggle { margin-bottom: 34px; }
.spectrogram-toggle summary {
    width: fit-content;
    color: #999;
    font-size: .85rem;
    text-decoration: underline dotted;
    text-underline-offset: 4px;
    cursor: pointer;
}
.spectrogram-toggle summary:hover { color: var(--muted); text-decoration-style: solid; }
.spectrogram-toggle summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

.spectrogram-view {
    width: 100%;
    margin: 24px 0;
}
#spectrogram-label { margin: 0 0 12px; font-size: .95rem; overflow-wrap: anywhere; }
.spectrogram-plot { color: var(--muted); }
.spectrogram-plot img { display: block; width: 100%; height: auto; }

.abstract-listen { display: block; margin-top: 8px; padding: 0; border: 0; background: none; color: #999; font-size: .8rem; text-align: left; cursor: pointer; }
.abstract-listen:hover { color: var(--muted); }
.abstract-listen:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
#abstract-audio-status { color: var(--muted); font-size: .8rem; }