/* Light/dark color tokens shared by every page.
   Theme = system setting, unless the user picks one (html[data-theme]). */
:root {
  color-scheme: light;
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-hover: #f8f9fa;
  --subtle: #f1f3f4;
  --border: #dadce0;
  --divider: #e9e9ec;
  --text: #202124;
  --text-2: #3c4043;
  --muted: #5f6368;
  --faint: #9aa0a6;
  --accent: #1a73e8;
  --accent-strong: #1967d2;
  --accent-hover: #1765cc;
  --accent-bg: #e8f0fe;
  --accent-border: #d2e3fc;
  --on-accent: #ffffff;
  --danger: #c5221f;
  --danger-bg: #fce8e6;
  --danger-border: #f1c0c0;
  --placeholder: #e8eaed;
  --upvote: #e8710a;
  --success: #188038;
  --flash: #fff4c2;
  --current: #f8fbff;
  --shadow: rgba(0, 0, 0, 0.06);
}

/* Dark values: used when the system is dark (and the user didn't force light),
   or when the user forces dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #131417;
    --surface: #1e1f23;
    --surface-hover: #26282c;
    --subtle: #2a2c31;
    --border: #3c3f45;
    --divider: #2e3035;
    --text: #e8eaed;
    --text-2: #d2d5d9;
    --muted: #a3a8ae;
    --faint: #737880;
    --accent: #8ab4f8;
    --accent-strong: #aecbfa;
    --accent-hover: #aecbfa;
    --accent-bg: #1f2c42;
    --accent-border: #2d4569;
    --on-accent: #0b1a33;
    --danger: #f28b82;
    --danger-bg: #3a1f1e;
    --danger-border: #5c2b29;
    --placeholder: #2a2c31;
    --upvote: #fdb46a;
    --success: #81c995;
    --flash: #4a3f12;
    --current: #1b2130;
    --shadow: rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131417;
  --surface: #1e1f23;
  --surface-hover: #26282c;
  --subtle: #2a2c31;
  --border: #3c3f45;
  --divider: #2e3035;
  --text: #e8eaed;
  --text-2: #d2d5d9;
  --muted: #a3a8ae;
  --faint: #737880;
  --accent: #8ab4f8;
  --accent-strong: #aecbfa;
  --accent-hover: #aecbfa;
  --accent-bg: #1f2c42;
  --accent-border: #2d4569;
  --on-accent: #0b1a33;
  --danger: #f28b82;
  --danger-bg: #3a1f1e;
  --danger-border: #5c2b29;
  --placeholder: #2a2c31;
  --upvote: #fdb46a;
  --success: #81c995;
  --flash: #4a3f12;
  --current: #1b2130;
  --shadow: rgba(0, 0, 0, 0.45);
}

/* Theme switch button */
.theme-toggle {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  border-radius: 999px; padding: .35rem .75rem; font-size: .8rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; font-family: inherit;
}
.theme-toggle:hover { background: var(--surface-hover); }

/* "Completed" toggle (templates/_complete.html) */
form.done-toggle { display: inline-flex; margin: 0; }
form.done-toggle button {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; font: inherit;
  font-size: .78rem; font-weight: 600; color: var(--muted); background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px; padding: .2rem .65rem .2rem .25rem;
}
form.done-toggle button:hover { background: var(--surface-hover); }
form.done-toggle .check {
  display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem;
  border-radius: 50%; border: 1.5px solid var(--faint); color: transparent; font-size: .7rem; line-height: 1;
}
form.done-toggle.on button { color: var(--success); border-color: var(--success); }
form.done-toggle.on .check { background: var(--success); border-color: var(--success); color: var(--surface); }
form.done-toggle.compact button { padding: 0; border: 0; background: none; }
form.done-toggle.compact .check { width: 1.05rem; height: 1.05rem; }

/* Playlist progress */
.progress { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.progress-bar { width: 80px; height: 6px; border-radius: 999px; background: var(--subtle); overflow: hidden; }
.progress-bar span { display: block; height: 100%; background: var(--success); transition: width .2s; }
.progress-text b { color: var(--text); }

/* Video summary panel (templates/_summary.html) */
.summary-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.summary-head .label { margin-bottom: 0; }
.summary-src { font-size: .75rem; color: var(--faint); }
.summary-overview { font-size: 1rem; line-height: 1.55; margin: .25rem 0 1rem; }
.summary h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 1.25rem 0 .5rem; }
.summary ul.takeaways { margin: 0; padding-left: 1.2rem; line-height: 1.5; }
.summary ul.takeaways li { margin: .25rem 0; }
.summary ol.sections { list-style: none; margin: 0; padding: 0; }
.summary ol.sections > li { display: grid; grid-template-columns: 4.2rem 1fr; gap: .75rem; padding: .7rem 0; border-top: 1px solid var(--divider); }
.summary ol.sections > li:first-child { border-top: 0; }
.summary .stamp {
  align-self: start; text-align: center; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--accent); background: var(--accent-bg); border-radius: 6px; padding: .2rem .3rem; text-decoration: none;
}
.summary .stamp:hover { text-decoration: underline; }
.summary .sec-title { font-weight: 700; margin-bottom: .2rem; }
.summary ol.sections ul { margin: 0; padding-left: 1.1rem; line-height: 1.5; font-size: .92rem; }
.summary ol.sections ul li { margin: .15rem 0; }

/* Chapters (templates/_chapters.html) */
details.chapters { margin-top: .45rem; font-size: .8rem; }
details.chapters > summary { cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; user-select: none; }
details.chapters > summary::-webkit-details-marker { display: none; }
details.chapters > summary::after { content: " ▸"; }
details.chapters[open] > summary::after { content: " ▾"; }
details.chapters > summary:hover { text-decoration: underline; }
details.chapters .chapter-list { margin-top: .4rem; max-height: 16rem; overflow-y: auto; }
ol.chapter-list { list-style: none; margin: 0; padding: 0; }
ol.chapter-list > li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: baseline; gap: .5rem;
  padding: .3rem 0; border-top: 1px solid var(--divider); line-height: 1.35; }
ol.chapter-list > li:first-child { border-top: 0; }
ol.chapter-list > li:target { background: var(--accent-bg); border-radius: 6px; }
ol.chapter-list .ch-main { min-width: 0; }
.ch-chat { font-size: .72rem; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; }
.ch-chat.on { color: var(--accent); }
.ch-chat:hover { color: var(--accent); text-decoration: underline; }
ul.ch-threads { list-style: none; margin: .3rem 0 0; padding: 0; font-size: .85rem; }
ul.ch-threads li { margin: .15rem 0; }
ul.ch-threads a { color: var(--accent); text-decoration: none; }
ul.ch-threads a:hover { text-decoration: underline; }
.ch-meta { color: var(--faint); font-size: .75rem; }
.ch-chip { display: inline-block; font-size: .72rem; font-weight: 600; color: var(--accent-strong); background: var(--accent-bg);
  border-radius: 4px; padding: .05rem .4rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
ol.chapter-list .stamp {
  font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; min-width: 2.8rem;
  color: var(--accent); background: var(--accent-bg); border-radius: 6px; padding: .1rem .3rem; text-decoration: none;
}
ol.chapter-list .stamp:hover { text-decoration: underline; }
ol.chapter-list .ch-len { font-size: .72rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.ch-src { font-size: .72rem; color: var(--faint); margin-top: .3rem; }
.chapters-panel ol.chapter-list li { padding: .45rem 0; font-size: .95rem; }

/* Tags (templates/_tags.html, static/tags.js) */
a.tag {
  display: inline-block; font-size: .76rem; font-weight: 600; line-height: 1.5; text-decoration: none;
  color: var(--accent-strong); background: var(--accent-bg); border-radius: 999px; padding: .05rem .55rem;
  white-space: nowrap;
}
a.tag:hover { text-decoration: underline; }
a.tag.small { font-size: .68rem; padding: 0 .45rem; }
a.tag.on { background: var(--accent); color: var(--on-accent); }
.tags { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.tag-editor { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.tag-list { display: contents; }
.tag-item { display: inline-flex; align-items: center; background: var(--accent-bg); border-radius: 999px; }
.tag-item a.tag { background: none; }
form.tag-remove { display: inline; margin: 0; }
form.tag-remove button {
  border: 0; background: none; cursor: pointer; color: var(--accent-strong); font-size: .85rem; line-height: 1;
  padding: 0 .45rem 0 0; opacity: .6;
}
form.tag-remove button:hover { opacity: 1; }
form.tag-add { display: inline-flex; margin: 0; border: 1px dashed var(--border); border-radius: 999px; overflow: hidden; }
form.tag-add.hidden { display: none; }
form.tag-add input {
  border: 0; background: transparent; color: inherit; font: inherit; font-size: .76rem;
  padding: .15rem .1rem .15rem .6rem; width: 7.5rem; outline: none;
}
form.tag-add button {
  border: 0; background: none; color: var(--accent); cursor: pointer; font-weight: 700; padding: 0 .55rem;
}
form.tag-add:focus-within { border-color: var(--accent); border-style: solid; }