/* Chapters (SPEC 41): the strip under the player, the list under the description, the description's timestamp links,
   the Listen panel's chapter line (added by chapters.js), the edit page's Chapters editor and NoRep Studio's badge.
   Colours are the site's tokens, so light mode follows the device like everything else. */

/* Timestamps in the description jump the player (like a comment's) --------------------------------------------- */

.desc-text .ts-link { font-weight: 600; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.desc-text .ts-link:hover { text-decoration: underline; }

/* The strip ------------------------------------------------------------------------------------------------------ */

.chapter-strip { position: relative; margin-top: 8px; }
.chapter-form { margin: 0; }
.chapter-bar { display: flex; align-items: stretch; gap: 2px; height: 20px; }
/* Up to 100 chapters fit a 320 px phone: a segment may shrink to nothing (no min-width), and past 50 chapters the gaps
   narrow (templates/_chapters.html adds is-dense): 99 gaps of 1 px leave 189 px of segments on a 288 px strip. */
.chapter-strip.is-dense .chapter-bar { gap: 1px; }
.chapter-seg {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center;
  padding: 0; border: 0; border-radius: 4px; background: none; color: inherit; cursor: pointer;
}
.chapter-seg-track {
  position: relative; display: block; width: 100%; height: 6px; overflow: hidden; border-radius: 3px;
  background: color-mix(in srgb, var(--text) 38%, transparent); /* >= 3:1 against the page, like a control's edge */
  transition: height 0.12s;
}
@media (prefers-color-scheme: light) {
  .chapter-seg-track { background: color-mix(in srgb, var(--text) 46%, transparent); }
}
.chapter-seg-fill {
  position: absolute; inset: 0; background: var(--accent);
  transform: scaleX(var(--fill, 0)); transform-origin: left center;
}
.chapter-seg:hover .chapter-seg-track, .chapter-seg:focus-visible .chapter-seg-track { height: 10px; }
.chapter-seg:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.chapter-now { display: flex; align-items: center; gap: 2px; min-width: 0; margin-top: 2px; }
.chapter-step {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-2); cursor: pointer;
}
.chapter-step:hover { background: var(--surface-2); color: var(--text); }
.chapter-step[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.chapter-step[aria-disabled="true"]:hover { background: none; color: var(--text-2); }
/* "Title · 4:30": only the title is cut short (a long one would push the start time out of sight) */
.chapter-current {
  display: flex; align-items: baseline; flex: 0 1 auto; min-width: 0; padding: 0 4px;
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.chapter-current-title, .chapter-tip-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chapter-current-sep, .chapter-current-time { flex: none; color: var(--text-2); font-weight: 500; }
.chapter-current-sep, .chapter-tip-sep { white-space: pre; }
.chapter-current-time, .chapter-tip-time { flex: none; font-variant-numeric: tabular-nums; }

/* Hover (and keyboard focus) tooltip: title · start, above the segment (the title shrinks, the time doesn't);
   chapters.js fills its spans and sets `left` */
.chapter-tip {
  position: absolute; top: -6px; left: 0; z-index: 5; transform: translate(-50%, -100%);
  display: flex; max-width: min(320px, calc(100vw - 32px)); padding: 5px 9px; border-radius: 7px;
  background: var(--text); color: var(--bg); box-shadow: var(--shadow);
  font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden;
  pointer-events: none;
}
.chapter-tip-sep { flex: none; }

/* The list under the description --------------------------------------------------------------------------------- */

.chapter-box { margin-top: 14px; padding: 12px 10px 10px; border-radius: var(--radius); background: var(--surface); font-size: 14px; }
.chapter-box-title { display: flex; align-items: center; gap: 8px; padding: 0 4px; margin-bottom: 6px; font-size: 15px; font-weight: 700; }
.chapter-box-title .icon { flex: none; color: var(--text-2); }
.chapter-box-count { color: var(--text-2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chapter-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.chapter-link { display: flex; align-items: baseline; gap: 12px; min-width: 0; padding: 7px 10px; border-radius: 8px; }
.chapter-link:hover { background: var(--surface-2); }
.chapter-time { flex: none; min-width: 3.4em; color: var(--accent-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.chapter-name { min-width: 0; overflow-wrap: anywhere; }
/* The current chapter: tinted, bold and marked with a bar (not by colour alone) */
.chapter-item.is-current .chapter-link { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.chapter-item.is-current .chapter-name { font-weight: 700; }
.chapter-more { height: 34px; margin: 6px 0 0; padding: 0 12px; }

/* The Listen panel's chapter line (playback.css styles the panel; it's light text on dark in both themes) */
.listen-chapter {
  max-width: 100%; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.88);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* The edit page's editor ------------------------------------------------------------------------------------------ */

.chapters-editor {
  display: grid; gap: 14px; margin-top: 28px; padding: 20px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  scroll-margin-top: 84px;
}
.chapters-head { display: grid; gap: 6px; }
.chapters-heading { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; }
.chapters-heading .icon { flex: none; color: var(--text-2); }
.chapters-status { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.chapters-form { display: grid; gap: 10px; min-width: 0; }
.chapters-notice {
  padding: 10px 13px; border-radius: 10px; font-weight: 600;
  background: color-mix(in srgb, var(--ok-text) 14%, transparent); color: var(--ok-text);
}
@media (prefers-color-scheme: light) {
  /* --ok-text on its tint over --surface (the editor's grey) is 3.8:1; a darker green makes it about 6:1 */
  .chapters-notice { color: color-mix(in srgb, var(--ok-text) 70%, var(--text)); }
}
.chapter-rows-head, .chapter-row { display: grid; grid-template-columns: 26px 104px minmax(0, 1fr) 40px; gap: 8px; align-items: center; }
.chapter-rows-head { font-size: 13px; font-weight: 600; color: var(--text-2); }
.chapter-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.chapter-row-num { text-align: right; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.chapter-row input {
  display: block; width: 100%; min-width: 0; padding: 9px 11px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.chapter-row input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.chapter-row input[aria-invalid="true"] { border-color: var(--danger-text); }
.chapter-row-start { font-variant-numeric: tabular-nums; }
.chapter-row-remove { color: var(--text-2); }
.chapter-row-remove:hover { color: var(--text); }

.chapter-problems-live.is-empty { position: absolute; } /* in the page (and the accessibility tree), out of the grid */
.chapter-problems { padding: 10px 13px; border-radius: 10px; background: var(--accent-soft); color: var(--danger-text); font-size: 14px; font-weight: 500; }
.chapter-problems-title { font-weight: 700; margin-bottom: 4px; }
.chapter-problems ul { display: grid; gap: 2px; margin: 0; padding-left: 18px; }

.chapters-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.chapters-actions-end { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.chapters-actions .btn .icon { flex: none; }

/* NoRep Studio's Content list: the badge next to a title (dash.css styles .status-pill) */
.pill-chapters { --pill: var(--chart-1); justify-self: start; margin-top: 2px; }

/* Phones ---------------------------------------------------------------------------------------------------------- */

@media (min-width: 721px) {
  .chapter-more { display: none !important; } /* the whole list shows on wider screens */
}
@media (max-width: 720px) {
  .chapter-strip { padding: 0 16px; }
  .chapter-tip { max-width: calc(100vw - 32px); }
  .chapter-box.is-collapsed .chapter-item:not(.is-current) { display: none; }
}
@media (max-width: 480px) {
  .chapters-editor { padding: 16px 14px; }
  .chapter-rows-head, .chapter-row { grid-template-columns: 76px minmax(0, 1fr) 36px; gap: 6px; }
  .chapter-rows-head > span:first-child, .chapter-row-num { display: none; }
  .chapter-row input { padding: 9px 9px; }
  .chapter-row-remove { width: 36px; height: 36px; }
  .chapters-actions, .chapters-actions-end { width: 100%; }
  .chapters-actions .btn { flex: 1 1 auto; }
  .chapters-actions-end { margin-left: 0; }
  .listen-chapter { font-size: 12.5px; }
}

@media (forced-colors: active) {
  .chapter-seg-track { border: 1px solid CanvasText; background: Canvas; }
  .chapter-seg-fill { forced-color-adjust: none; background: Highlight; }
  .chapter-item.is-current .chapter-link { outline: 2px solid Highlight; }
}