/* DELTA-TTS demo page.
   Typography and colors follow the DiTAR, DiTTo-TTS and OmniVoice demo pages, which all render
   with Bootstrap defaults (system font, 16px, #212529 on white) plus slate #263c4c headings
   and white shadow-lg cards. Only what differs from Bootstrap is set here. */

:root {
  --ink: #263c4c;     /* heading color used by the reference pages */
  --muted: #6c757d;   /* Bootstrap secondary text */
  --rule: #dee2e6;    /* Bootstrap border color */
}

/* The reference pages set this on body; on macOS it renders text thinner than the default. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { color: var(--ink); font-weight: 500; }
b, strong { font-weight: 700; }

/* ---------- cards (Bootstrap: shadow-lg p-5 mt-5 mb-5 bg-white rounded) ---------- */
.section-card {
  background: #fff;
  border-radius: 0.25rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  padding: 3rem;
  margin: 3rem 0;
  scroll-margin-top: 1.5rem;
}

/* ---------- header ---------- */
.title { font-size: 2.5rem; margin-bottom: 0.25rem; }
.subtitle { font-size: 1.75rem; line-height: 1.3; margin-bottom: 1.25rem; }
.venue { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
.venue span { padding: 0 0.6rem; }
.authors { font-style: italic; }
.affiliations { font-weight: 700; margin: 0.25rem 0 0; }

.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  margin: 1.25rem 0 2rem;
}
.badges a,
.badges .badge-soon { display: inline-block; line-height: 0; }
.badges .badge-soon { cursor: default; }
.badges img { height: 22px; width: auto; }
.badges a:hover img { filter: brightness(1.15); }

.nowrap { white-space: nowrap; }
.contents { margin-bottom: 0; }
.contents li { margin-bottom: 0.25rem; }

/* ---------- sections ---------- */
.section-title {
  text-align: center;
  font-size: 2rem;
  padding-bottom: 10px;
  margin-bottom: 1.5rem;
}

.paper-figure { margin: 0; text-align: center; }
.paper-figure img { width: 100%; height: auto; }
.paper-figure figcaption { margin-top: 1.25rem; text-align: center; }

/* ---------- sample table (Bootstrap: table table-hover) ---------- */
.sample-table {
  --bs-table-color: #212529;
  margin-bottom: 0;
}
.sample-table th { text-align: center; vertical-align: middle; white-space: nowrap; }
.sample-table th.col-text { text-align: left; }
.sample-table td { text-align: center; vertical-align: middle; }
.sample-table td.text-cell { text-align: left; }
.sample-table audio { width: 100%; max-width: 190px; height: 40px; display: block; margin: 0 auto; }
.sample-table .prompt-text {
  display: block;
  max-width: 190px;
  margin: 4px auto 0;
  overflow-wrap: anywhere;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--muted);
}

/* speech editing: removed words in the original, new words in the edited text */
.edit-table td.text-cell { font-size: 0.95rem; }

.edit-old { color: #dc3545; text-decoration: line-through; }
.edit-new { color: #0d6efd; font-weight: 700; }

.source-note { margin: 1rem 0 0; font-size: 0.85rem; color: var(--muted); }

/* Column widths: fixed layout so every table fits the card at any desktop width;
   the players shrink with their column. Below 992px rows are stacked instead. */
@media (min-width: 992px) {
  .sample-table { table-layout: fixed; }
  .zs-table th:nth-child(1) { width: 19%; }
  .zs-table th:nth-child(2) { width: 23%; }
  .zs-table th:nth-child(n+3) { width: 19.33%; }
  .libri-table th:nth-child(1) { width: 16%; }
  .libri-table th:nth-child(2) { width: 20%; }
  .libri-table th:nth-child(n+3) { width: 16%; }
  .edit-table th:nth-child(1), .edit-table th:nth-child(3) { width: 17%; }
  .edit-table th:nth-child(2) { width: 12%; }
  .edit-table th:nth-child(n+4) { width: 13.5%; }
  .sample-table th { white-space: normal; }
}

/* ---------- footer ---------- */
.site-footer { text-align: center; padding: 0 0 3rem; font-size: 0.9rem; }

/* ---------- narrow screens: each row becomes a stacked card ---------- */
@media (max-width: 991.98px) {
  .sample-table thead { display: none; }
  .sample-table,
  .sample-table tbody,
  .sample-table tr,
  .sample-table td { display: block; width: 100%; }
  .sample-table tr {
    border: 1px solid var(--rule);
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
  }
  .sample-table td { text-align: left; border: none; padding: 0.4rem 0; }
  .sample-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 2px;
  }
  .sample-table audio { width: 100%; max-width: 360px; margin: 0; }
  .sample-table .prompt-text { max-width: none; margin-left: 0; }
}

@media (max-width: 575.98px) {
  .section-card { padding: 1.75rem 1.1rem; margin: 1.5rem 0; }
  .title { font-size: 2rem; }
  .subtitle { font-size: 1.3rem; }
  .section-title { font-size: 1.6rem; }
}