/* Fitness topics (SPEC 53): Home's tab row, a tab's filter row, and the topic / type / 40+ fields of the upload, edit
   and Go live forms. Colours come from style.css's tokens, so both themes follow. */

/* The tab row (SPEC 66): one strip of large chips that never wraps, scrolling sideways when it doesn't fit, and staying
   under the top bar as the page scrolls. Wider screens get arrows at its ends (static/topics.js shows the one that has
   chips behind it); every screen fades at whichever edge has more chips behind it (data-fade-start / data-fade-end;
   without the script the right edge fades). */
.topic-tabs {
  position: sticky; top: var(--topbar-h, 60px); z-index: 30; margin: -24px 0 18px; padding: 12px 0 10px;
  background: var(--bg);
}
.topic-tabs-row {
  display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; padding: 4px; margin: -4px;
  scrollbar-width: none; overscroll-behavior-x: contain; scroll-behavior: smooth; scroll-padding-inline: 48px;
} /* padding: room for focus rings */
.topic-tabs-row::-webkit-scrollbar { display: none; }
.topic-tab {
  display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 44px; padding: 9px 18px; border-radius: 999px;
  background: var(--surface-2); color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap;
}
.topic-tab:hover { background: var(--hover); }
.topic-tab[aria-current="page"], .topic-tab[aria-current="true"] { background: var(--text); color: var(--bg); }
.topic-tab .live-dot { color: var(--accent); }
.topic-tab[aria-current="page"] .live-dot { color: var(--accent); }
/* The arrows (wider screens): round buttons over the row's ends */
.topic-arrow {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--bg); color: var(--text);
}
.topic-arrow:hover { background: var(--surface-2); }
.topic-arrow-prev { left: -4px; }
.topic-arrow-next { right: -4px; }
@media (max-width: 1023px) { .topic-arrow { display: none; } }
@media (pointer: coarse) { .topic-arrow { width: 44px; height: 44px; } }  /* (touch screens: style.css's "Touch screens", 2026-10-29) */
/* The edge fades, for the tab row and the filter row alike ([data-topic-fade] wraps the row that scrolls) */
[data-topic-fade]:not(.topic-tabs) { position: relative; } /* (the tab row is sticky, which also places its fades) */
[data-topic-fade]::before, [data-topic-fade]::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 56px; pointer-events: none; opacity: 0;
  transition: opacity 0.15s; z-index: 1;
}
[data-topic-fade]::before { left: 0; background: linear-gradient(to right, var(--bg) 40%, transparent); }
[data-topic-fade]::after { right: 0; background: linear-gradient(to left, var(--bg) 40%, transparent); }
[data-topic-fade][data-fade-start]::before, [data-topic-fade][data-fade-end]::after,
[data-topic-fade]:not([data-ready])::after { opacity: 1; }
.topic-tabs::before { left: -4px; } /* wide screens: the tab row reaches 4 px past the strip (room for focus rings) */
.topic-tabs::after { right: -4px; }

@media (max-width: 1023px) {
  .topic-tabs { margin: -24px -24px 18px; padding: 10px 0 8px; }
  .topic-tabs-row { margin: 0; padding: 4px 24px 6px; scroll-padding-inline: 24px; }
  [data-topic-fade]::before, [data-topic-fade]::after { width: 36px; }
  .topic-tabs::before { left: 0; }
  .topic-tabs::after { right: 0; }
}
@media (max-width: 720px) {
  .topic-tabs { margin: -16px -16px 16px; padding-top: 8px; }
  .topic-tabs-row { padding: 4px 16px 6px; scroll-padding-inline: 16px; gap: 8px; }
  .topic-tab { padding: 9px 16px; font-size: 15px; }
  [data-topic-fade]::before, [data-topic-fade]::after { width: 28px; }
}

/* A tab's filters: Type, Sort and Length in one row (wrapping on wide screens; sideways scrolling on phones) */
.topic-filters-wrap { margin: 0 0 22px; }
.topic-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 4px; margin: -4px; }
.topic-filter-group { display: flex; align-items: center; gap: 8px; flex: none; }
.topic-filter-label { color: var(--text-2); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.topic-filter { flex: none; }
@media (max-width: 1023px) {
  .topic-filters-wrap { margin: 0 -24px 20px; }
  .topic-filters {
    flex-wrap: nowrap; overflow-x: auto; margin: 0; padding: 4px 24px 6px; scroll-padding-inline: 24px;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .topic-filters::-webkit-scrollbar { display: none; }
}
@media (max-width: 720px) {
  .topic-filters-wrap { margin: 0 -16px 18px; }
  .topic-filters { padding: 4px 16px 6px; scroll-padding-inline: 16px; gap: 8px 18px; }
}
/* The chosen filters in one line under the row, where the row scrolls sideways and some would be out of view */
.topic-filters-now { display: none; }
@media (max-width: 1023px) {
  .topic-filters-now {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: -12px 0 18px;
    color: var(--text-2); font-size: 14px; font-weight: 600;
  }
}
@media (max-width: 720px) {
  .topic-filters-now { margin: -10px 0 16px; }
}
.topic-empty { margin-top: 12px; }
.topic-empty-note { margin: 4px 0 0; }

/* The topic / type / 40+ fields */
fieldset.topic-fields { margin: 0; padding: 0; border: 0; min-width: 0; }
.topic-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.topic-fields > .muted.small { margin-top: 6px; }
.topic-over40 { margin-top: 8px; }
.topic-fields .topic-over40-help { margin-top: 0; padding-left: 28px; }
@media (max-width: 480px) {
  .topic-pair { grid-template-columns: minmax(0, 1fr); }
}
/* Go live's smaller version: the two selects side by side where they have room, else stacked, so no name is cut off
   ("World Fitness Project" needs about 190 px): by the fields' own width (Go live's columns vary), by the screen's
   width in browsers without container queries */
.topic-fields-compact { container-type: inline-size; }
.topic-fields-compact .topic-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 480px) {
  .topic-fields-compact .topic-pair { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 400px) {
  .topic-fields-compact .topic-pair { grid-template-columns: minmax(0, 1fr); }
}
.topic-fields-compact .field label { margin-bottom: 4px; font-size: 13px; }
.topic-fields-compact .field .select-wrap select { padding-top: 8px; padding-bottom: 8px; padding-right: 34px; font-size: 14px; }
.topic-fields-compact .select-wrap .icon { right: 10px; }
.topic-fields-compact .topic-over40 { margin-top: 2px; padding: 4px 0; font-size: 14px; }

/* Go live's "Title for your next stream" form: the title, then the topic fields, then its button */
.golive-title-row:has(.topic-fields) { flex-wrap: wrap; }
.golive-title-row .topic-fields { flex: 1 1 100%; }

/* Studio > Content and Admin: a video's topic and type under its title */
.topic-tag { display: block; margin-top: 2px; color: var(--text-2); font-size: 12.5px; }
.topic-tag-none { color: var(--warn); }

/* Studio > Content's topic and type filter: each label stays with its select; on a phone they take a row each */
.content-topic-filter { flex-wrap: wrap; row-gap: 8px; }
.content-topic-pair { display: flex; align-items: center; gap: 8px; min-width: 0; }
@media (max-width: 720px) {
  .content-topic-pair { flex: 1 1 100%; }
  .content-topic-pair label { min-width: 40px; }
  .content-topic-pair select { flex: 1; max-width: none; }
}

/* Admin > Topics */
.admin .a-topic-views { margin-bottom: 14px; }
.admin .a-topics-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 12px; }
.admin .a-topics-bar-end { margin: 12px 0 0; }
.admin .a-topics-bar-end .btn-primary { margin-left: auto; }
.admin .a-topic-field { min-width: 170px; }
.admin .a-pager { display: flex; flex-wrap: wrap; gap: 8px; }
.admin .a-topic-check .check-row { justify-content: center; padding: 0; }
.admin .a-topics .topic-tag { color: var(--text-3); }