/* ============================================================
   Lenton — shared structural layout

   Theme files own typography, colour, borders, radii and effects.
   This file owns geometry shared by both visual themes.
   ============================================================ */

:root {
  --page-gutter: clamp(30px, 5vw, 84px);
  --content-page-gutter: calc(var(--page-gutter) * 2);
  /* System geometry: components consume these semantic values instead of
     inventing one-off dimensions. See docs/DESIGN_SYSTEM.md. */
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-control-compact: 34px;
  --ui-control-default: 46px;
  --ui-row-min: 62px;
  --ui-row-action-gap: 8px;
  --ui-radius-control: 10px;
  --ui-radius-surface: 10px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

main {
  flex: 1 0 auto;
  width: 100%;
  padding-inline: var(--content-page-gutter);
}

.app-footer {
  flex-shrink: 0;
  margin-top: clamp(42px, 7vw, 84px);
}

.app-footer-inner {
  width: 100%;
  max-width: var(--watch-main-max);
  min-height: 88px;
  margin: 0 auto;
  padding-inline: var(--content-page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.footer-identity,
.footer-local {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.footer-brand {
  white-space: nowrap;
}

.footer-local {
  justify-content: flex-end;
}

body.focus .app-footer {
  display: none;
}

button {
  padding: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
}

.icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn.delete-armed { color: var(--bad); border-color: var(--bad); }

/* Reusable record: content and actions own separate columns, so metadata can
   never slide underneath controls when type, spacing, or button sizes change. */
.ui-record {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}
.ui-record-main { min-width: 0; }
.ui-record-actions {
  display: flex;
  align-items: center;
  gap: var(--ui-row-action-gap);
}
.ui-record-title,
.ui-record-secondary,
.ui-record-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

input[type="text"],
input[type="search"],
textarea {
  width: 100%;
}

.field {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.switch {
  position: relative;
  flex-shrink: 0;
  margin: 0;
}

.switch::after {
  position: absolute;
  top: 2px;
  left: 2px;
}

.segmented {
  display: inline-flex;
  flex-shrink: 0;
}

header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px 22px;
  min-height: var(--nav-h);
  padding-inline: var(--content-page-gutter);
}

.app-header {
  width: 100%;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.brand::after {
  content: "BETA";
  flex-shrink: 0;
}

.brand-short {
  display: none;
}

nav {
  display: flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}

.nav-sep {
  width: 1px;
}

.nav-settings {
  flex-shrink: 0;
  margin-left: 7px;
}

.game-header-stats {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.game-header-stats span { display: inline-flex; align-items: center; gap: 6px; }

.nav-profile {
  position: relative;
  flex-shrink: 0;
  margin-left: 6px;
  padding-left: 13px;
}

.nav-profile::before {
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 18px;
}

.profile-summary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-summary > span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}

form.url {
  display: flex;
  gap: 8px;
  flex: 1 1 240px;
  min-width: 0;
  max-width: 520px;
}

form.url .field {
  flex: 1;
  min-width: 0;
}

form.url button {
  flex-shrink: 0;
}

.watch-toolbar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
}

.watch-toolbar form.url {
  max-width: none;
}

.watch-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.watch-toolbar .field,
.watch-toolbar .btn,
.watch-toolbar .icon-btn {
  height: var(--watch-control-height);
}

.watch-toolbar .icon-btn {
  width: var(--watch-control-height);
}

.view-mode-row {
  padding-top: 4px;
}

.view-mode-control {
  width: 100%;
  height: 36px;
}

.view-mode-control button {
  flex: 1 1 0;
}

.anchor {
  position: relative;
  display: inline-flex;
}

.popover {
  position: absolute;
  right: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 60;
}

.popover[hidden] {
  display: none;
}

.pop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.pop-row > * {
  min-width: 0;
}

.pop-row .select-wrap {
  max-width: min(220px, 62%);
}

.popover #anki-deck-row,
.popover #anki-model-row {
  align-items: stretch;
  flex-direction: column;
  gap: 6px;
}

.popover #anki-deck-row .search-picker,
.popover #anki-model-row .select-wrap {
  width: 100%;
  max-width: none;
}

.backup-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.pop-hr {
  height: 1px;
}

.pop-row[hidden] {
  display: none !important;
}

.pop-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.caption-center {
  overflow: hidden;
}

.caption-center-head,
.caption-track-row,
.caption-display-controls {
  min-width: 0;
}

.caption-center-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.caption-center-head .pop-label {
  padding: 0;
}

.caption-center-state {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.caption-track-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
}

.caption-track-lang {
  display: grid;
  place-items: center;
}

.caption-track-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.caption-track-copy strong,
.caption-track-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.caption-track-action {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  font: inherit;
  cursor: pointer;
}

.caption-track-action:disabled {
  cursor: default;
  opacity: .38;
}

.caption-display-controls {
  display: grid;
}

@media (max-width: 520px) {
  .caption-track-row {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }
}

/* ================================================================ MUSIC */
main.music-main { display: block; max-width: var(--watch-main-max); padding-top: clamp(42px, 8vh, 88px); }
.music-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.music-head > div { max-width: 760px; }
.music-head h1, .music-head p { margin: 0; }
.music-head > div > p:last-child { margin-top: 16px; }
.music-catalog-search { min-height: 72px; margin-top: 34px; padding: 10px 10px 10px 22px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 13px; }
.music-catalog-search > [data-icon] { width: 21px; height: 21px; }
.music-catalog-search input { min-width: 0; height: 48px; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 17px; }
.music-catalog-search .btn { min-height: 48px; padding-inline: 24px; }
.music-provider-bar { min-height: 46px; padding: 8px 12px; display: flex; align-items: center; gap: 10px; }
.music-provider-select select { min-height: 30px; padding: 0 26px 0 9px; font: inherit; font-size: 12px; }
.music-provider-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; }
#music-provider-status { font-size: 12px; }
.music-provider-bar .btn { margin-left: auto; }
.music-catalog-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.music-result-card { min-width: 0; min-height: 164px; padding: 13px; display: grid; grid-template-columns: 138px minmax(0, 1fr); gap: 16px; position: relative; }
.music-result-card > img, .music-result-placeholder { width: 138px; height: 138px; object-fit: cover; display: grid; place-items: center; }
.music-result-card > div:not(.music-result-actions) { min-width: 0; padding-right: 8px; display: flex; flex-direction: column; align-items: flex-start; }
.music-result-card h3, .music-result-card p { max-width: 100%; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-result-card h3 { margin-top: 9px; }
.music-result-card p { margin-top: 4px; }
.music-result-card small { margin-top: 5px; }
.music-result-provider, .music-result-lyrics { font-size: 10px; }
.music-result-lyrics { margin-top: auto; padding-top: 10px; }
.music-result-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.music-result-actions .btn { flex: 1 1 0; justify-content: center; }
.music-results-empty { grid-column: 1 / -1; min-height: 130px; padding: 26px; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.music-library-head { margin-top: clamp(54px, 8vw, 92px); display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.music-library-head h2, .music-library-head p { margin: 0; }
.music-library-head h2 { margin-top: 5px; }
.music-library-head > div > p:last-child { margin-top: 7px; }
.music-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 38px; }
.music-summary > span { min-height: 96px; padding: 18px 20px; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; }
.music-tools { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding-bottom: 18px; }
.music-library-search { width: min(440px, 100%); height: 34.5px; }
.music-tools .count { margin-left: auto; }
.music-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.music-card { position: relative; min-width: 0; }
.music-card-main { min-width: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); min-height: 164px; }
.music-card-cover { min-height: 164px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; overflow: hidden; }
.music-card-cover b { font-size: 32px; line-height: 1; }
.music-card-cover small { font-size: 9px; letter-spacing: .16em; }
.music-card-copy { min-width: 0; padding: 19px 46px 18px 18px; display: flex; flex-direction: column; }
.music-card-copy h2, .music-card-copy p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-card-copy h2 { margin-top: 12px; }
.music-card-copy p { margin-top: 5px; }
.music-card-meta { margin-top: auto; padding-top: 14px; }
.music-card-copy > i { height: 3px; margin-top: 10px; }
.music-card-copy > i b { display: block; height: 100%; }
.music-card-favorite { position: absolute; top: 12px; right: 10px; }
.music-card-remove { position: absolute; top: 48px; right: 10px; }
.music-empty { grid-column: 1 / -1; min-height: 330px; padding: 54px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.music-empty h2, .music-empty p { margin: 0; }
.music-empty h2 { margin-top: 8px; }
.music-empty p:not(.eyebrow) { max-width: 620px; margin-top: 12px; }
.music-empty .btn { margin-top: 24px; }

.music-player { min-height: calc(100vh - 180px); }
.music-player-toolbar { min-height: 52px; display: flex; align-items: center; gap: 14px; padding-bottom: 16px; }
.music-player-toolbar > .btn { width: 38px; min-width: 38px; padding: 0; }
.music-player-toolbar > .btn [data-icon] { width: 18px; height: 18px; }
.music-player-identity { min-width: 0; display: flex; flex-direction: column; }
.music-player-identity strong, .music-player-identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-player-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.music-player-layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(500px, 1.28fr); min-height: min(740px, calc(100vh - 190px)); }
.music-deck { min-width: 0; padding: clamp(24px, 4vw, 56px); display: flex; flex-direction: column; align-items: center; }
.music-cover { width: min(100%, 360px); aspect-ratio: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; overflow: hidden; }
.music-cover::before, .music-cover::after { content: ''; position: absolute; pointer-events: none; }
.music-cover::before { width: 72%; aspect-ratio: 1; border-radius: 50%; }
.music-cover::after { width: 12%; aspect-ratio: 1; border-radius: 50%; }
.music-cover > * { position: relative; z-index: 1; }
.music-cover.has-artwork { background-position: center; background-size: cover; }
.music-cover.has-artwork::before, .music-cover.has-artwork::after { display: none; }
.music-cover.has-artwork span, .music-cover.has-artwork small { display: none; }
.music-cover span { font-size: clamp(48px, 7vw, 86px); line-height: 1; }
.music-cover small { font-size: 10px; letter-spacing: .18em; }
.music-spotify-embed { width: min(100%, 430px); min-height: 152px; margin-top: 20px; }
.music-spotify-embed iframe { width: 100%; border: 0; }
.music-now { width: min(100%, 430px); min-height: 104px; margin-top: 25px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.music-now > span:first-child { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.music-now strong { margin-top: 8px; font-size: 18px; line-height: 1.35; }
.music-now > span:last-child { min-height: 1.5em; margin-top: 5px; font-size: 13px; line-height: 1.45; }
.music-scrubber { width: 100%; margin-top: 20px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; gap: 8px; }
.music-scrubber span { font-size: 10px; text-align: center; }
.music-scrubber input { width: 100%; }
.music-transport { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 22px; }
.music-transport button { display: grid; place-items: center; cursor: pointer; }
.music-seek { width: 42px; height: 42px; }
.music-play { width: 64px; height: 64px; font-size: 22px; }
.music-play-options { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.music-play-options label { min-height: 34px; padding: 0 7px 0 10px; display: flex; align-items: center; gap: 7px; font-size: 11px; }
.music-play-options select { border: 0; background: transparent; color: inherit; font: inherit; }
.music-shortcuts { margin: 16px 0 0; font-size: 10px; text-align: center; }
.music-provider-gate { width: min(100%, 430px); margin-top: 20px; padding: 16px; display: grid; gap: 7px; text-align: left; }
.music-provider-gate span { font-size: 11px; line-height: 1.45; }
.music-provider-gate .btn { margin-top: 5px; justify-content: center; }
.music-lyrics-panel { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.music-lyrics-head { min-height: 88px; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.music-lyrics-head h2, .music-lyrics-head p { margin: 0; }
.music-lyrics-head h2 { margin-top: 4px; }
.music-lyrics-tools { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.music-sync-bar { padding: 12px 24px; }
.music-sync-bar p { margin: 0; font-size: 12px; line-height: 1.45; }
.music-sync-bar > div { margin-top: 8px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.music-sync-bar output { min-width: 54px; text-align: center; font-size: 11px; }
.music-lyrics { flex: 1 1 auto; min-height: 440px; max-height: calc(100vh - 330px); overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.music-lyric-row { position: relative; min-height: 102px; padding: 22px 28px 22px 18px; display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; }
.music-lyric-time { align-self: start; padding: 5px 8px; font-size: 10px; text-align: left; }
.music-lyric-copy { min-width: 0; }
.music-line-de, .music-line-en { margin: 0; }
.music-line-de { font-size: clamp(19px, 2vw, 27px); line-height: 1.48; }
.music-line-en { margin-top: 6px; font-size: 14px; line-height: 1.45; }
.music-lyrics[data-view="follow"] .music-lyric-row { opacity: .34; transition: opacity 160ms ease; }
.music-lyrics[data-view="follow"] .music-lyric-row.active { opacity: 1; }
.music-lyrics[data-view="follow"] .music-lyric-row:has(+ .music-lyric-row.active),
.music-lyrics[data-view="follow"] .music-lyric-row.active + .music-lyric-row { opacity: .62; }
.music-lyrics.syncing .music-lyric-copy, .music-lyrics.syncing .music-lyric-time { cursor: crosshair; }
.music-lyrics.syncing .music-lyric-row:hover { opacity: 1; }
.music-lyrics-empty { min-height: 100%; padding: 48px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.music-lyrics-empty h3, .music-lyrics-empty p { margin: 0; }
.music-lyrics-empty p { margin-top: 8px; }
.music-lyrics-empty .btn { margin-top: 18px; }
.music-lyrics-foot { min-height: 54px; padding: 10px 18px 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.music-lyrics-foot > div { min-width: 0; display: grid; gap: 4px; }
.music-lyrics-foot span { font-size: 11px; }
.music-lyrics-license { display: flex; align-items: center; gap: 6px; font-size: 9px; line-height: 1.35; }
.music-lyrics-license[hidden] { display: none; }
.music-lyrics-license img { width: 1px; height: 1px; }

.music-dialog { width: min(960px, calc(100vw - 32px)); }
.music-dialog > form { padding: 28px; }
.music-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.music-form-grid label { min-width: 0; display: grid; align-content: start; gap: 7px; }
.music-form-grid label > span { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.music-form-grid label > span small { text-transform: none; letter-spacing: 0; }
.music-audio-field { grid-column: 1 / -1; min-height: 104px; padding: 17px; cursor: pointer; }
.music-audio-field input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.music-audio-field strong { font-size: 14px; }
.music-audio-field small { font-size: 11px; }
.music-lyric-field { grid-column: span 3; position: relative; }
.music-lyric-field textarea { min-height: 180px; padding-bottom: 45px; resize: vertical; font-family: var(--font-read); line-height: 1.5; }
.music-lyric-upload { position: absolute; left: 9px; bottom: 9px; }

.home-extension-cta {
  margin: clamp(24px, 5vw, 40px) 0 clamp(36px, 7vw, 60px);
  display: flex;
  align-items: center;
  gap: 20px;
}
.home-extension-cta p { margin: 0; }

.home-music-feature { margin-top: clamp(36px, 7vw, 82px); padding: clamp(28px, 5vw, 58px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); align-items: center; gap: clamp(32px, 7vw, 90px); }
.home-music-feature h2, .home-music-feature p { margin: 0; }
.home-music-feature h2 { max-width: 700px; margin-top: 8px; }
.home-music-feature > div:first-child > p:not(.eyebrow) { max-width: 650px; margin-top: 15px; line-height: 1.65; }
.home-music-feature .btn { margin-top: 24px; }
.home-music-preview { min-height: 270px; padding: 34px; display: flex; flex-direction: column; justify-content: center; }
.home-music-preview > span { font-size: 10px; letter-spacing: .14em; }
.home-music-preview strong { margin-top: 36px; font-size: clamp(22px, 3vw, 34px); line-height: 1.25; }
.home-music-preview p { margin-top: 8px; }
.home-music-preview i { height: 4px; margin-top: 36px; }
.home-music-preview i b { display: block; width: 38%; height: 100%; }
.home-music-preview small { margin-top: 12px; text-align: center; }

@media (max-width: 1180px) {
  .music-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .music-player-layout { grid-template-columns: minmax(250px, .6fr) minmax(440px, 1.4fr); }
  .music-deck { padding: 28px; }
}
@media (max-width: 820px) {
  .home-music-feature { grid-template-columns: minmax(0, 1fr); }
  main.music-main { padding-top: 28px; }
  .music-head { align-items: stretch; flex-direction: column; }
  .music-head .btn { align-self: flex-start; }
  .music-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .music-catalog-results { grid-template-columns: minmax(0, 1fr); }
  .music-tools { flex-wrap: wrap; }
  .music-tools .count { margin-left: 0; }
  .music-grid { grid-template-columns: minmax(0, 1fr); }
  .music-player-layout { display: flex; flex-direction: column; }
  .music-deck { padding: 24px; }
  .music-cover { width: min(64vw, 310px); }
  .music-lyrics-panel { min-height: 70vh; }
  .music-lyrics { max-height: none; min-height: 60vh; }
  .music-form-grid { grid-template-columns: minmax(0, 1fr); }
  .music-audio-field, .music-lyric-field { grid-column: auto; }
}
@media (max-width: 560px) {
  .music-catalog-search { grid-template-columns: 20px minmax(0, 1fr); padding: 10px 14px; }
  .music-catalog-search .btn { grid-column: 1 / -1; width: 100%; }
  .music-provider-bar { align-items: flex-start; flex-wrap: wrap; }
  .music-provider-bar .btn { width: 100%; margin-left: 0; }
  .music-library-head { align-items: stretch; flex-direction: column; }
  .music-result-card { grid-template-columns: 92px minmax(0, 1fr); }
  .music-result-card > img, .music-result-placeholder { width: 92px; height: 92px; }
  .music-summary { grid-template-columns: minmax(0, 1fr); }
  .music-head .btn { width: 100%; }
  .music-tools .field, .music-tools .segmented { width: 100%; }
  .music-tools .segmented button { flex: 1; }
  .music-card-main { grid-template-columns: 92px minmax(0, 1fr); min-height: 142px; }
  .music-card-cover { min-height: 142px; }
  .music-player-toolbar { align-items: flex-start; }
  .music-player-actions .btn { display: none; }
  .music-lyrics-head { align-items: flex-start; flex-direction: column; }
  .music-lyrics-tools { width: 100%; justify-content: flex-start; }
  .music-lyric-row { grid-template-columns: 48px minmax(0, 1fr); padding-inline: 10px 16px; }
  .music-line-de { font-size: 20px; }
  .music-dialog > form { padding: 20px; }
}

@media (max-width: 920px) {
  .app-header nav {
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* Hidden native scrollbar means nothing else hints there's more nav
       off-screen; fade the trailing edge so a partially-cut link reads as
       "scroll for more" instead of looking like a layout bug. */
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  }
  .app-header nav::-webkit-scrollbar { display: none; }

  .app-header {
    gap: 7px;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  .brand-full {
    display: none;
  }

  .brand-short {
    display: inline;
  }

  .app-header nav a,
  .nav-profile > .icon-btn {
    min-height: 44px;
  }

  .app-header nav a {
    display: inline-flex;
    align-items: center;
  }

  .nav-profile {
    margin-left: 2px;
    padding-left: 8px;
  }
}

@media (max-height: 720px) {
  .popover {
    padding-block: 4px;
  }

  .pop-label {
    padding-block: 6px 3px;
  }

  .pop-hr {
    margin-block: 4px;
  }

}

main {
  display: grid;
  gap: 0 40px;
  align-items: start;
  max-width: var(--watch-main-max);
  margin: 0 auto;
}

main.no-transcript {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1100px) {
  main,
  main.no-transcript {
    grid-template-columns: minmax(0, 1fr);
  }

}

.hero {
  margin: 0 auto;
}

.hero h1 {
  margin: 0;
}

.hero h1 em {
  display: block;
}

.hero[hidden] {
  display: none;
}

.player-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.player-wrap iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.player-wrap[hidden] {
  display: none;
}

.stage {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.stage[hidden] {
  display: none;
}

.sub-de {
  margin: 0;
  word-break: break-word;
  font-family: var(--website-subtitle-font, var(--subtitle-default-font));
  color: var(--website-subtitle-text, var(--subtitle-default-text));
}

.sub-en {
  margin: 0;
  font-family: var(--website-subtitle-font, var(--subtitle-default-font));
  color: var(--website-subtitle-english, var(--subtitle-default-english));
}

.sub-en[hidden] {
  display: none;
}

.stage.custom-subtitle-surface .sub-de,
.stage.custom-subtitle-surface .sub-en {
  align-self: center;
  width: fit-content;
  max-width: 100%;
  padding: .12em .38em .16em;
  background: var(--website-subtitle-bg);
  outline: var(--website-subtitle-outline);
}

/* While phrase selection is on, dragging across the line is our gesture. The
   browser's own text selection would otherwise paint over it and swallow the
   drag. */
:root[data-phrase-select="on"] #sub-de {
  -webkit-user-select: none;
  user-select: none;
}
:root[data-phrase-select="on"] .reader-content {
  -webkit-user-select: none;
  user-select: none;
}

.word-hover-translation {
  position: fixed;
  z-index: 70;
  max-width: min(320px, calc(100vw - 24px));
  padding: 8px 11px;
  text-align: center;
  pointer-events: none;
}

.meta-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.meta {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) minmax(150px, 0.6fr) minmax(210px, 0.9fr);
  align-items: start;
  flex: 1 1 auto;
  min-width: 0;
}

.meta-identity,
.meta-group {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.meta .title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-label {
  margin-bottom: 1px;
}

.meta-captions b {
  display: inline-block;
}

.meta:empty {
  display: none;
}

.kbd-hint {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
}

.kbd-hint[hidden] {
  display: none;
}

.shortcut-help-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  font: inherit;
  cursor: pointer;
}

.shortcut-help-trigger kbd {
  min-width: 24px;
}

.shortcut-sheet {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 24px;
  overflow-y: auto;
}

.shortcut-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.shortcut-sheet-head .eyebrow,
.shortcut-sheet-head h2,
.shortcut-sheet-note {
  margin: 0;
}

.shortcut-sheet-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 28px;
  margin-top: 22px;
}

.shortcut-sheet-group {
  min-width: 0;
}

.shortcut-sheet-group h3 {
  margin: 0 0 8px;
}

.shortcut-sheet-row {
  display: grid;
  grid-template-columns: minmax(78px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 36px;
}

.shortcut-sheet-keycaps {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.shortcut-sheet-keycaps kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 28px;
  min-height: 26px;
  margin: 0;
  line-height: 1;
}

.shortcut-sheet-keycaps kbd.wide {
  min-width: 62px;
}

.shortcut-sheet-note {
  margin-top: 20px;
}

@media (max-width: 520px) {
  .shortcut-sheet {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: 20px;
  }

  .shortcut-sheet-groups {
    grid-template-columns: minmax(0, 1fr);
  }
}

.shortcut-group {
  display: grid;
  align-content: start;
  gap: 10px;
}

.shortcut-group:first-child {
  padding-left: 0;
}

.shortcut-group:last-child {
  padding-right: 0;
}

.shortcut-list {
  display: flex;
  flex-wrap: wrap;
}

.shortcut {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.shortcut-keys {
  display: inline-flex;
  gap: 2px;
}

kbd {
  margin: 0;
}

@media (max-width: 920px) {
  .meta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .kbd-hint {
    justify-content: flex-start;
  }

  .meta {
    grid-template-columns: minmax(240px, 1.4fr) 1fr;
  }

  .meta-captions {
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr 1fr;
    align-items: center;
  }

  .kbd-hint {
    grid-template-columns: 1fr;
  }

  .shortcut-group {
    padding: 12px 0;
  }

  .shortcut-group:first-child {
    padding-top: 0;
  }

  .shortcut-group:last-child {
    padding-bottom: 0;
  }

}

@media (max-width: 560px) {
  .meta {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .meta-captions {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

}

.notice {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.notice p {
  margin: 0;
  flex: 1;
}

.bar {
  margin-top: 12px;
}

.bar i {
  display: block;
  height: 100%;
  width: 0;
}

.panel {
  position: sticky;
}

.transcript {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.transcript div {
  display: flex;
  gap: 11px;
}

.transcript time {
  flex-shrink: 0;
}

.sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sheet {
  width: min(540px, 100%);
  max-height: 86vh;
  overflow-y: auto;
}

.sheet-lemma {
  margin: 0;
}

.sheet-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.sheet-block p {
  margin: 0;
}

.sheet-block ol,
.sheet-block ul {
  margin: 0;
}

.sheet-block li {
  margin-bottom: 4px;
}

.anki-example-input {
  display: block;
  width: 100%;
  min-height: 58px;
  margin-top: 8px;
  resize: vertical;
}

.anki-example-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.anki-example-head h4 {
  margin-bottom: 0;
}

.anki-example-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.anki-example-source {
  white-space: nowrap;
}

.anki-example-generate {
  min-height: 32px;
  white-space: nowrap;
}

.anki-example-help {
  margin: 6px 0 0 !important;
}

.vocab-anki-example {
  margin-top: 14px;
}

.vocab-anki-example[hidden] {
  display: none;
}

.anki-example-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 9px;
}

.sheet-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
}

.sheet-actions .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.sheet-actions .spacer {
  flex: 1;
  min-width: 0;
}

.sheet-action-status {
  margin: 10px 0 0;
}

.sheet-loading {
  padding: 30px 0;
}

.sheet-source {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.sheet-source span {
  white-space: nowrap;
}

.sheet-progressive-lines {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}

.sheet-progressive-lines i {
  display: block;
  width: min(100%, 420px);
  height: 11px;
}

.sheet-progressive-lines i:nth-child(2) { width: min(72%, 310px); }
.sheet-progressive-lines i:nth-child(3) { width: min(48%, 210px); }

.sheet-links {
  display: flex;
  gap: 16px;
  margin-top: 22px;
}

main.vocabulary-main {
  display: block;
  max-width: var(--watch-main-max);
}

.vocabulary-shell {
  width: 100%;
}

.vocabulary-head {
  max-width: 720px;
}

.vocabulary-head .eyebrow {
  margin: 0 0 8px;
}

.vocabulary-head h1 {
  margin: 0;
}

.vocabulary-head > p:last-child {
  margin: 16px 0 0;
}

.vocab-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  /* This toolbar's fields are taller than the other pages'; the sort picker
     reads this only when the toolbar has wrapped and it has nothing to
     stretch against. */
  --toolbar-control-height: 38px;
  /* Matches .history-tools's own padding-bottom: without it the toolbar sat
     flush against the first word card, with no breathing room at all — every
     other page's toolbar has a gap before the list beneath it. */
  padding-bottom: 18px;
}

.vocab-tools #seg-filter button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vocab-tools .spacer {
  flex: 1;
}

@media (max-width: 520px) {
  .vocab-tools #seg-filter {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
  }

  .vocab-tools #seg-filter::-webkit-scrollbar { display: none; }
  .vocab-tools #seg-filter button {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

.words {
  margin: 0;
}

.words-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 0 4px;
}
.words-more[hidden] { display: none; }

.word-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.word-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

.word-body {
  margin-top: 12px;
}

.word-body > * + * {
  margin-top: 4px;
}

.word-encounters-toggle {
  width: 100%;
  margin-top: 16px;
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
}

.word-encounters-toggle span { white-space: nowrap; }
.word-encounters { padding: 8px 0 6px; }
.word-encounters[hidden] { display: none; }
.anki-provenance,
.encounter-history { padding: 20px 0; }
.anki-provenance + .encounter-history { margin-top: 4px; }
.encounter-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.encounter-section-head h3,
.anki-provenance p,
.encounter-item p,
.encounter-item blockquote { margin: 0; }
.anki-provenance-meta { margin-top: 6px !important; }
.anki-provenance blockquote,
.encounter-item blockquote { display: grid; gap: 4px; margin-top: 12px; }
.encounter-timeline { margin-top: 14px; }
.encounter-item {
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 12px;
  padding: 0 0 22px;
}
.encounter-item:last-child { padding-bottom: 0; }
.encounter-marker { width: 7px; height: 7px; margin-top: 7px; }
.encounter-copy { min-width: 0; }
.encounter-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 12px; }
.encounter-meta time { margin-left: auto; }
.encounter-surface { margin-top: 7px !important; }
.encounter-meaning,
.encounter-source { margin-top: 9px !important; }
.encounter-loading,
.encounter-error,
.encounter-muted { padding: 18px 0; }

@media (max-width: 560px) {
  .encounter-meta time { width: 100%; margin-left: 0; }
  .encounter-section-head { align-items: flex-start; flex-direction: column; gap: 4px; }
}

.word-note {
  display: block;
  margin-top: 14px;
  min-height: 38px;
  resize: vertical;
}

.empty-state {
  max-width: 520px;
  margin: 0 auto;
}

.empty-state h2 {
  margin: 0;
}

body.focus {
  overflow: hidden;
}

body.focus header {
  position: fixed;
  pointer-events: none;
}

body.focus main,
body.focus main.no-transcript {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: none;
  height: 100dvh;
  min-height: 100dvh;
  align-content: center;
  overflow: hidden;
  padding: 0;
  gap: 0;
}

body.focus .panel,
body.focus .meta,
body.focus .kbd-hint {
  display: none;
}

body.focus .watch-toolbar {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 59;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

body.focus .watch-toolbar form.url {
  display: none;
}

body.focus .watch-actions {
  display: flex;
}

body.focus.pointer-active .watch-toolbar,
body.focus .watch-toolbar:focus-within {
  opacity: 1;
  pointer-events: auto;
}

body.focus section {
  width: 100%;
  min-width: 0;
}

body.focus .player-wrap {
  max-width: min(100%, calc((100dvh - 250px) * 16 / 9));
  margin: 0 auto;
}

body.focus .stage {
  max-width: 1040px;
  margin: 0 auto;
}

#focus-exit {
  position: fixed;
  z-index: 60;
  display: none;
}

body.focus #focus-exit {
  display: inline-flex;
  right: 68px;
}

body.focus #focus-exit:focus-visible {
  opacity: 1;
}

select {
  width: 100%;
  min-width: 104px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select-wrap {
  position: relative;
  display: inline-flex;
  width: 220px;
  min-width: 0;
}
.select-wrap.palette-picker-wrap { width: 220px; }

/* The sort control collapses to a square icon button (see .icon-trigger
   below) instead of showing its current choice as text, so the wrap only
   needs to be as wide as that button — not the old fixed text-label width. */
.select-wrap.sort-picker {
  width: 32px;
  /* A fixed-size icon trigger inside a wrapping flex toolbar must refuse to
     shrink — the default flex-shrink:1 plus this component's own
     min-width:0 was compressing it down to nothing. */
  flex: 0 0 32px;
  /* Take the row's height rather than naming one. This control sits in three
     different toolbars whose fields are not all the same height — Reading and
     History are 34.5px, Vocabulary is 38px — so any fixed value is wrong
     somewhere, and was: it stood 2px proud of its neighbours here and 2px
     short of them there.

     The floor matters because these toolbars wrap on a narrow window: alone on
     its own flex line this control has no taller sibling to stretch against,
     and would otherwise shrink to the height of its 16px icon. */
  align-self: stretch;
  min-height: var(--toolbar-control-height, 34px);
}

.select-picker-button.icon-trigger {
  width: 32px;
  height: 100%;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.select-picker-button.icon-trigger .select-picker-label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  overflow: visible;
}

/* The menu still needs room for its option text even though the trigger
   that opens it does not — a 32px-wide dropdown would be unreadable. */
.select-wrap.sort-picker .select-picker-options {
  left: 0;
  right: auto;
  width: max-content;
  min-width: 180px;
  max-width: 260px;
}

.select-wrap::after {
  position: absolute;
  top: 50%;
  pointer-events: none;
}

.select-wrap.select-picker::after { display: none; }
.select-picker-source { display: none; }
.select-picker-button {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 36px;
  padding: 0;
  overflow: hidden;
  text-align: left;
}
.select-picker-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  padding: 7px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select-picker-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.palette-swatch {
  display: inline-flex;
  flex: 0 0 42px;
  width: 42px;
  height: 16px;
  overflow: hidden;
  border: 1px solid var(--line-strong, var(--line, currentColor));
}
.palette-swatch i {
  flex: 1 1 0;
  height: 100%;
}
.search-picker-options button.has-swatch {
  display: flex;
  align-items: center;
  gap: 10px;
}
.select-picker-chevron {
  display: inline-flex;
  flex: 0 0 35px;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.select-picker-chevron svg {
  width: 16px;
  height: 16px;
}
.select-picker-options {
  top: calc(100% + 5px);
}

main.settings-main {
  display: block;
  max-width: var(--watch-main-max);
}

.settings-shell {
  width: 100%;
}

.settings-head .eyebrow {
  margin: 0 0 8px;
}

.settings-head h1 {
  margin: 0;
}

.settings-head > p:not(.eyebrow):not(.settings-feedback) {
  margin: 16px 0 0;
}

.settings-feedback {
  min-height: 18px;
  margin: 12px 0 0 !important;
}

.account-grid { display: grid; gap: 14px; }
.account-profile {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--line, var(--line-strong));
}
.account-avatar,
.account-list-avatar {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--accent-ink, var(--ink));
  background: var(--accent, var(--surface-alt));
  font-family: var(--font-display, inherit);
  font-size: 1.15rem;
}
.account-profile-copy,
.account-list-identity { min-width: 0; display: grid; gap: 1px; }
.account-profile-copy small,
.account-profile-copy span,
.account-list-identity small { overflow: hidden; color: var(--ink-dim, inherit); text-overflow: ellipsis; white-space: nowrap; }
.account-profile-copy strong { font-size: 1.08em; }
.account-role,
.account-list-role {
  padding: 3px 8px;
  color: var(--ink-dim, inherit);
  border: 1px solid var(--line-strong, var(--line));
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72em;
}
.account-panel {
  min-width: 0;
  padding: 20px 0 6px;
}
.account-panel-head,
.account-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.account-panel-head h3,
.account-panel-head p,
.account-panel-footer strong,
.account-panel-footer small,
.account-owner-head h3,
.account-owner-head p { margin: 0; }
.account-panel-head p,
.account-owner-head p { margin-top: 4px; color: var(--ink-dim, inherit); }
.account-panel-footer > span:first-child { display: grid; gap: 2px; }
.account-panel-footer small { color: var(--ink-dim, inherit); }
.account-section-index {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-faint, var(--ink-dim));
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72em;
}

.account-password-form,
.account-invite-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 20px 0;
}

.account-invite-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

.account-password-form label,
.account-invite-form label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.account-password-form label > span {
  white-space: nowrap;
}

.account-password-form input,
.account-invite-form input,
.account-invite-result input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  color: inherit;
  background: var(--surface, transparent);
  border: 1px solid var(--line-strong, var(--line));
}

.account-password-form .btn,
.account-invite-form .btn,
.account-invite-result .btn {
  min-height: 42px;
  align-self: end;
}
.account-password-form .btn {
  grid-column: 1 / -1;
  justify-self: end;
}
.account-session-actions > span:last-child { display: flex; flex-wrap: wrap; gap: 7px; }
.account-panel-footer { padding-top: 16px; border-top: 1px solid var(--line, var(--line-strong)); }
.account-status { min-height: 18px; }
.account-status.bad { color: var(--bad, var(--danger)); }
.account-verification { margin-left: 6px; color: var(--ink-faint, inherit); }
.account-verification[data-verified="true"] { color: var(--good, var(--accent)); }
.account-data-state,
.account-session-current {
  color: var(--ink-dim, inherit);
  font-size: .78em;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.account-data-counts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 18px;
  border-block: 1px solid var(--line, var(--line-strong));
}
.account-data-counts > span { min-height: 74px; padding: 12px; display: grid; align-content: center; gap: 2px; }
.account-data-counts > span + span { border-left: 1px solid var(--line, var(--line-strong)); }
.account-data-counts strong { font-size: 1.25em; }
.account-data-counts small { color: var(--ink-dim, inherit); }
.account-browser-sessions { padding: 18px 0; }
.account-device-row > span:first-child { display: grid; gap: 3px; }
.account-pairing-code { margin-top: 18px; padding: 16px; display: flex; align-items: baseline; gap: 16px; background: var(--surface, transparent); border: 1px solid var(--line-strong, var(--line)); }
.account-pairing-code[hidden] { display: none; }
.account-pairing-code strong { font-size: 1.5em; letter-spacing: .12em; }
.account-device-list { display: grid; }
.account-device-row { min-height: 56px; padding: 12px 0 0; margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line, var(--line-strong)); }
.account-owner { margin-top: 8px; border-top: 1px solid var(--line, var(--line-strong)); }
.account-owner[hidden] { display: none; }
.account-invite-result { display: grid; gap: 7px; padding: 16px 0; }

/* Founder overview: one intentionally dense, privacy-safe operating surface. */
main.founder-main { display: block; width: 100%; max-width: var(--watch-main-max); margin: 0 auto; padding: 56px var(--content-page-gutter) 96px; }
.founder-head, .founder-panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.founder-head h1, .founder-head p, .founder-panel-head h2, .founder-panel-head p { margin: 0; }
.founder-head > div > p:last-child { max-width: 760px; margin-top: 14px; color: var(--ink-dim); }
.founder-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 42px 0; border-block: 1px solid var(--line); }
.founder-summary > span { min-height: 104px; padding: 20px; display: grid; align-content: center; gap: 4px; }
.founder-summary > span + span { border-left: 1px solid var(--line); }
.founder-summary strong { font-size: clamp(1.4rem, 2vw, 2rem); }
.founder-summary small, .founder-privacy, .founder-user-meta, .founder-user-usage small { color: var(--ink-dim); }
.founder-skeleton { opacity: .35; background: linear-gradient(90deg, transparent, var(--surface-alt), transparent); }
.founder-panel { min-width: 0; }
.founder-search { width: min(340px, 100%); min-height: 42px; padding: 0 12px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line-strong); }
.founder-search [data-icon] { width: 16px; height: 16px; flex: 0 0 auto; }
.founder-search input { width: 100%; min-width: 0; color: inherit; background: transparent; border: 0; outline: 0; }
.founder-privacy { margin: 15px 0 24px; }
.founder-user-list { display: grid; border-top: 1px solid var(--line); }
.founder-user-row { min-width: 0; padding: 17px 0; display: grid; grid-template-columns: minmax(210px, 1.1fr) minmax(190px, .75fr) minmax(320px, 1.45fr) auto; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); }
.founder-user-identity { min-width: 0; display: flex; align-items: center; gap: 12px; }
.founder-user-identity > span:last-child { min-width: 0; display: grid; }
.founder-user-identity small { overflow: hidden; color: var(--ink-dim); text-overflow: ellipsis; white-space: nowrap; }
.founder-user-meta { display: grid; gap: 3px; font-size: .82em; }
.founder-user-meta span:first-child { color: var(--ink); }
.founder-user-usage { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.founder-user-usage span { display: grid; gap: 1px; }
.founder-status { min-height: 22px; color: var(--ink-dim); }
@media (max-width: 1000px) {
  .founder-user-row { grid-template-columns: minmax(210px, 1fr) auto; }
  .founder-user-meta, .founder-user-usage { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .founder-main { padding-top: 34px; }
  .founder-head, .founder-panel-head { align-items: stretch; flex-direction: column; }
  .founder-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .founder-summary > span:nth-child(odd) { border-left: 0; }
  .founder-user-row { grid-template-columns: 1fr; }
  .founder-user-meta, .founder-user-usage { grid-column: auto; }
  .founder-user-usage { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .founder-user-row .btn { justify-self: start; }
}
.account-invite-result[hidden] { display: none; }
.account-invite-result > span { display: flex; gap: 7px; }
.account-invite-result input { min-width: 0; flex: 1; }
.account-list { margin-top: 8px; border-top: 1px solid var(--line, var(--line-strong)); }
.account-list-row { min-height: 64px; padding: 10px 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.account-list-row + .account-list-row { border-top: 1px solid var(--line, var(--line-strong)); }
.account-list-actions { display: flex; align-items: center; gap: 8px; }

@media (max-width: 1100px) {
  .account-password-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-invite-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-invite-form .btn { grid-column: 1 / -1; justify-content: center; }
}

@media (max-width: 760px) {
  .account-data-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-data-counts > span + span { border-left: 0; }
  .account-data-counts > span:nth-child(even) { border-left: 1px solid var(--line, var(--line-strong)); }
  .account-data-counts > span:nth-child(n + 3) { border-top: 1px solid var(--line, var(--line-strong)); }
  .account-password-form,
  .account-invite-form { grid-template-columns: minmax(0, 1fr); }
  .account-invite-form .btn { grid-column: auto; }
  .account-password-form label > span { white-space: normal; }
  .account-password-form .btn,
  .account-invite-form .btn { width: 100%; justify-content: center; }
  .account-pairing-code { align-items: flex-start; flex-direction: column; gap: 5px; }
  .account-panel-head,
  .account-panel-footer { align-items: stretch; flex-direction: column; }
  .account-panel-head > .btn,
  .account-panel-footer > span:last-child { width: 100%; }
  .account-panel-head > .btn { justify-content: center; }
  .account-session-actions > span:last-child > .btn { flex: 1 1 140px; justify-content: center; }
}

@media (max-width: 460px) {
  .account-profile { grid-template-columns: auto minmax(0, 1fr); }
  .account-role { grid-column: 2; justify-self: start; }
  .account-list-row { grid-template-columns: auto minmax(0, 1fr); }
  .account-list-actions { grid-column: 2; justify-content: space-between; }
}

.settings-section {
  display: grid;
}

.settings-section-head h2 {
  margin: 0;
}

.settings-section-head p {
  margin: 8px 0 0;
}

.settings-grid {
  min-width: 0;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 7px 0;
}

.setting-row[hidden] {
  display: none !important;
}

.setting-row .select-wrap {
  max-width: min(220px, 62%);
}

.shortcut-settings {
  display: flex;
  flex-direction: column;
}

.shortcut-area {
  min-width: 0;
  padding: 22px 0 10px;
}

.shortcut-area-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 12px;
}

.shortcut-area-head h3 { margin: 0; }
.shortcut-area-head span { white-space: nowrap; }

.shortcut-group-label {
  margin: 18px 0 4px;
}

.shortcut-group-label:first-child {
  margin-top: 0;
}

@media (max-width: 620px) {
  .shortcut-setting-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .shortcut-setting-controls { width: 100%; }
  .shortcut-capture { flex: 1 1 auto; }
}

.shortcut-setting-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.shortcut-capture {
  min-width: 132px;
  min-height: 40px;
  justify-content: center;
}

.shortcut-keycaps {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.shortcut-keycap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 28px;
  height: 27px;
  padding: 0 7px;
  line-height: 1;
  white-space: nowrap;
}

.shortcut-keycap.wide {
  min-width: 66px;
}

.shortcut-capture-prompt {
  white-space: nowrap;
}

.shortcut-reset {
  /* Matched to the capture button beside it rather than to a number of its
     own: stretching means the pair stays level even if the capture's height
     changes, which a hard-coded 32px against its 40px did not. */
  align-self: stretch;
  width: 40px;
  min-height: 40px;
  color: var(--ink-dim, var(--text-secondary, currentColor));
  background: var(--surface, var(--bg-control, transparent));
  border: 1px solid var(--line-strong, var(--line, currentColor));
}

.shortcut-reset:hover:not(:disabled) {
  color: var(--ink, var(--text, currentColor));
  background: var(--surface-alt, var(--bg-control-hover, transparent));
}

.shortcut-reset svg {
  width: 16px;
  height: 16px;
}

.shortcut-error:empty {
  display: none;
}

.third-party-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-height: 178px;
  place-items: center;
  margin-bottom: 10px;
  padding: 58px 32px 30px;
  overflow: hidden;
}

.third-party-preview[data-target="website"] {
  background: var(--bg);
}

.subtitle-preview-label {
  position: absolute;
  top: 12px;
  left: 14px;
  color: var(--ink-faint, var(--text-tertiary, currentColor));
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.third-party-preview .preview-de {
  padding: .16em .42em .22em;
  text-align: center;
  outline: var(--third-outline);
}

.third-party-preview .preview-en {
  padding: .12em .42em .16em;
  text-align: center;
  outline: var(--third-outline);
}

.third-party-preview mark {
  position: relative;
  display: inline-block;
  padding: 0 .04em;
  cursor: help;
}

.third-party-preview mark.known::after {
  content: "";
  position: absolute;
  right: .03em;
  bottom: -.03em;
  left: .03em;
  height: .1em;
}

.preview-hover-tooltip {
  position: absolute;
  z-index: 2;
  bottom: calc(100% + 9px);
  left: 50%;
  min-width: max-content;
  max-width: 220px;
  padding: 7px 10px;
  color: var(--third-hover-text);
  background: var(--third-hover-bg);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0;
  opacity: 0;
  pointer-events: none;
  box-shadow: none;
  transform: translate(-50%, 2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.third-party-preview mark:hover .preview-hover-tooltip,
.third-party-preview mark:focus .preview-hover-tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.range-setting > span {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 min(320px, 72%);
}

.range-setting input[type="range"] { width: 100%; }
.range-setting output {
  flex: 0 0 48px;
  text-align: right;
  white-space: nowrap;
}

/* The budget and difficulty sliders sit directly above one another, so their
   readouts need to share a width or the tracks beside them end up at
   different lengths — wide enough for the longest label either shows. */
#level-budget-value, #level-difficulty-value {
  flex-basis: 104px;
}

.color-input { width: 48px; height: 34px; padding: 3px; }
.color-setting-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.color-setting-control .color-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--ink-dim, currentColor);
  background: var(--surface, transparent);
  border: 1px solid var(--line-strong, currentColor);
  cursor: pointer;
}
.color-setting-control .color-reset svg {
  width: 15px;
  height: 15px;
}
.color-setting-control .color-reset:hover:not(:disabled) {
  color: var(--ink, currentColor);
  background: var(--surface-alt, transparent);
}
.color-setting-control .color-reset:disabled,
.settings-section-reset:disabled {
  opacity: .35;
  cursor: default;
}
.settings-section-reset {
  margin-top: 16px;
}

.developer-model-control {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(320px, 62%);
  min-width: 0;
}

.developer-model-control input {
  width: 100%;
  min-width: 0;
}

.developer-model-control .developer-model-reset {
  display: inline-flex;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--ink-dim, currentColor);
  background: var(--surface, transparent);
  border: 1px solid var(--line-strong, currentColor);
  cursor: pointer;
}

.developer-model-control .developer-model-reset svg {
  width: 15px;
  height: 15px;
}

.developer-model-control .developer-model-reset:disabled {
  opacity: .35;
  cursor: default;
}

.developer-actions,
.developer-cache-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.developer-capabilities {
  text-align: right;
}

.developer-status:empty {
  display: none;
}

.search-picker {
  position: relative;
  width: min(220px, 62%);
  min-width: 0;
}

.search-picker input {
  display: block;
  width: 100%;
  height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-picker-toggle {
  position: absolute;
  z-index: 2;
  top: 1px;
  right: 1px;
  width: 35px;
  height: 34px;
  padding: 0;
}

.search-picker-toggle svg {
  display: block;
  width: 16px;
  height: 16px;
  margin: auto;
}

.search-picker-options {
  position: absolute;
  z-index: 80;
  right: 0;
  width: 100%;
  min-width: 100%;
  max-height: 260px;
  overflow-x: hidden;
  overflow-y: auto;
}

.search-picker-options button {
  display: block;
  width: 100%;
  min-height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-picker-empty {
  margin: 0;
}

.restore-dialog {
  width: min(540px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 28px;
}

.caption-editor {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 28px;
  overflow-y: auto;
}

.caption-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.caption-editor-head .eyebrow,
.caption-editor-head h2,
.caption-editor-intro,
.caption-editor-status {
  margin: 0;
}

.caption-editor-intro {
  margin-top: 12px;
}

.caption-editor-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 22px;
  margin-top: 22px;
  padding-block: 18px;
  border-block: 1px solid var(--line);
}

.caption-editor-summary span,
.caption-editor-summary strong {
  min-width: 0;
}

.caption-editor-summary strong {
  font-weight: 500;
}

.caption-editor-fields {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.caption-editor-field {
  display: grid;
  gap: 8px;
}

.caption-editor-field > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.caption-editor-field small {
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.caption-editor-field textarea {
  box-sizing: border-box;
  min-height: 88px;
  resize: vertical;
}

.caption-editor-field textarea:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.caption-source-reset {
  justify-self: start;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.caption-editor-status {
  margin-top: 16px;
}

.caption-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}

.caption-editor-actions .btn {
  min-height: 38px;
}

@media (max-width: 560px) {
  .caption-editor {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: 20px;
  }

  .caption-editor-field > span {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .caption-editor-field small {
    text-align: left;
    white-space: normal;
  }
}

.restore-dialog .eyebrow {
  margin: 0 0 8px;
}

.restore-dialog h2 {
  margin: 0;
}

.restore-intro {
  margin: 12px 0 20px;
}

.restore-summary {
  margin: 0;
}

.restore-summary > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr);
  gap: 16px;
  padding: 9px 0;
}

.restore-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.restore-warning {
  margin: 18px 0;
}

.restore-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.restore-actions .btn {
  min-height: 36px;
}

@media (max-width: 700px) {
  .settings-section {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .search-picker {
    width: min(220px, 70%);
  }

}

@media (max-width: 560px) {
  .setting-row:has(.select-wrap),
  .setting-row:has(.search-picker),
  .developer-model-row {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .setting-row .select-wrap,
  .setting-row .search-picker,
  .setting-row .search-picker.compact {
    width: 100%;
    max-width: none;
  }

  .developer-model-control {
    width: 100%;
  }

  .developer-action-row {
    align-items: stretch;
    flex-direction: column;
  }

  .range-setting {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .range-setting > span {
    width: 100%;
    flex: none;
  }
}

main.statistics-main {
  display: block;
  max-width: var(--watch-main-max);
}

.statistics-shell {
  width: 100%;
}

.statistics-head {
  max-width: 720px;
}

.statistics-head .eyebrow,
.statistics-panel .eyebrow {
  margin: 0 0 8px;
}

.statistics-head h1 {
  margin: 0;
}

.statistics-head > p:last-child {
  margin: 16px 0 0;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat-card {
  display: flex;
  flex-direction: column;
  padding: 22px;
}

.stat-card-wide {
  grid-column: span 2;
}

.stat-value {
  margin: auto 0 4px;
}

.statistics-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.8fr);
  gap: 28px;
}

.statistics-columns.even {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.statistics-columns.triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.statistics-panel {
  display: flex;
  flex-direction: column;
}

.statistics-panel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.statistics-panel h2 {
  margin: 0;
}

.activity-chart {
  flex: 1;
  min-height: 210px;
  display: grid;
  grid-template-columns: repeat(14, minmax(8px, 1fr));
  align-items: end;
  gap: 7px;
  margin-top: 26px;
  padding-top: 20px;
}

.activity-day {
  height: 100%;
  display: grid;
  grid-template-rows: 18px minmax(0, 1fr) 24px;
  align-items: end;
}

.activity-bar {
  width: 100%;
  height: max(3px, calc(var(--activity) * 100%));
}

.activity-label {
  padding-top: 5px;
}

.top-videos {
  margin: 18px 0 0;
  padding: 0;
}

.top-videos li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 12px 0;
}

.top-videos a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.statistics-error {
  padding: 14px;
}

@media (max-width: 860px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .statistics-columns {
    grid-template-columns: minmax(0, 1fr);
  }

}

@media (max-width: 480px) {
  .stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .stat-card {
    min-height: 140px;
  }

  .activity-chart {
    gap: 3px;
  }

}

.watch-history {
  width: 100%;
  max-width: var(--watch-main-max);
  margin: clamp(64px, 9vw, 128px) auto 0;
  padding: clamp(42px, 6vw, 72px) var(--content-page-gutter) 0;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

body.focus .watch-history {
  display: none;
}

.history-shell {
  width: 100%;
}

.history-head {
  max-width: 720px;
}

.watch-history-head {
  max-width: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
}

.watch-history-head > div {
  max-width: 720px;
}

.history-collapse {
  flex: 0 0 auto;
}

.history-content[hidden] {
  display: none;
}

.history-head .eyebrow {
  margin: 0 0 8px;
}

.history-head h1 {
  margin: 0;
}

.history-head h2 {
  margin: 0;
}

.history-head > p:last-child {
  margin: 16px 0 0;
}

.history-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
}

.history-tools .field {
  width: min(420px, 100%);
}

.history-tools .count {
  margin-left: auto;
}

.history-tools .select-wrap.sort-picker {
  margin-left: 0;
}

.history-item {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
}

.history-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.history-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-progress {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  pointer-events: none;
}

.video-progress::after {
  display: block;
  width: var(--progress);
  height: 100%;
}

.history-duration {
  position: absolute;
}

.history-body {
  min-width: 0;
}

.history-body h2 {
  margin: 6px 0 3px;
}

.history-body h2 a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-channel,
.history-details {
  margin: 0;
}

.history-details {
  margin-top: 9px;
}

.history-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.history-resume {
  white-space: nowrap;
}

.history-remove {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
}

.history-empty {
  padding: 72px 20px;
}

.history-empty h2 {
  margin: 0;
}

.history-empty p {
  margin: 10px 0 0;
}

.history-empty .btn {
  margin-top: 24px;
}

.history-empty-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
}

.history-more {
  padding-top: 20px;
  text-align: center;
}

.history-skeleton {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 22px 0;
}

.history-skeleton > i {
  display: block;
  aspect-ratio: 16 / 9;
}

.history-skeleton > span {
  display: grid;
  gap: 10px;
}

.history-skeleton b {
  display: block;
  width: min(420px, 80%);
  height: 12px;
}

.history-skeleton b:first-child { width: 24%; height: 9px; }
.history-skeleton b:last-child { width: 55%; height: 9px; }

@media (max-width: 760px) {
  .watch-history-head { align-items: center; }
  .history-item {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 16px;
  }

  .history-actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .history-resume {
    display: none;
  }

  .history-details {
    display: none;
  }

  .history-skeleton {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 16px;
  }

}

@media (max-width: 480px) {
  .watch-history-head { align-items: flex-start; }
  .watch-history-head > div > p:last-child { display: none; }
  .history-item {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
  }

  .history-channel {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .history-skeleton {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
  }

}

main.home-main {
  display: block;
  max-width: var(--watch-main-max);
}

.home-hero {
  min-height: min(430px, calc(100vh - var(--nav-h) - 90px));
  display: flex;
  align-items: center;
  padding-inline: 0;
}

@media (max-width: 1100px) {
  :root {
    --page-gutter: 24px;
  }
}

@media (max-width: 720px) {
  :root {
    --page-gutter: 10px;
  }
}

.home-copy {
  max-width: 1060px;
}

.home-copy .eyebrow,
.home-section-head .eyebrow,
.home-first-run .eyebrow {
  margin: 0 0 12px;
}

.home-copy h1 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 0.22em;
  margin: 0;
}

.home-rotator {
  display: inline-grid;
  overflow: hidden;
  height: 1em;
  vertical-align: baseline;
}

.home-rotator-track {
  display: grid;
  grid-auto-rows: 1em;
  line-height: 1;
  color: var(--accent);
  animation: home-rotator-cycle 7.2s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes home-rotator-cycle {
  0%, 24%  { transform: translateY(0); }
  33%, 57% { transform: translateY(-25%); }
  66%, 90% { transform: translateY(-50%); }
  100%     { transform: translateY(-75%); }
}

.home-tagline {
  max-width: 650px;
  margin: 32px 0 0;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.home-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.home-section-head h2,
.home-first-run h2 {
  margin: 0;
}

.carousel-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.carousel-actions .icon-btn {
  width: 38px;
  height: 38px;
}

.home-view-all {
  margin-left: 10px;
}

.home-carousel {
  display: grid;
  grid-template-columns: repeat(var(--carousel-columns), minmax(0, 1fr));
  gap: 16px;
}

.home-video-card {
  display: block;
  min-width: 0;
}

.home-video-visual {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.home-video-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-video-duration {
  position: absolute;
  right: 7px;
  bottom: 7px;
}

.home-video-meta {
  display: grid;
  gap: 3px;
  padding-top: 11px;
}

.home-video-meta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-video-meta > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-first-run {
  margin-top: 64px;
  max-width: 760px;
  padding: 36px;
}

.home-first-run .btn {
  margin-top: 12px;
}

.home-reading-section { margin-top: clamp(54px, 8vw, 92px); }
.home-game-section { margin-top: 34px; min-height: 210px; padding: 28px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; }
.home-game-section[hidden] { display: none; }
.home-game-copy h2, .home-game-copy p { margin: 0; }
.home-game-copy > p:not(.eyebrow) { margin-top: 10px; }
.home-game-copy .btn { margin-top: 20px; }
.home-game-status { min-width: 330px; display: grid; grid-template-columns: repeat(3, 1fr); }
.home-game-status > span { min-height: 76px; padding: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.home-game-status > i { grid-column: 1 / -1; height: 7px; display: block; }
.home-game-status > i b { height: 100%; display: block; }
@media (max-width: 720px) { .home-game-section { grid-template-columns: 1fr; } .home-game-status { min-width: 0; width: 100%; } }
.home-reading-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-reading-card { min-width: 0; padding: 24px; display: flex; flex-direction: column; }
.home-reading-progress { display: block; height: 3px; margin-bottom: 22px; }
.home-reading-progress i { display: block; height: 100%; }
.home-reading-card strong { margin-top: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-reading-author { margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-reading-meta { margin-top: 24px; }

@media (max-width: 780px) {
  .home-hero {
    min-height: auto;
  }

  .home-copy h1 {
    white-space: normal;
  }

  .home-reading-list { grid-template-columns: minmax(0, 1fr); }

}

@media (max-width: 480px) {
  .carousel-actions {
    gap: 3px;
  }

  .carousel-actions .icon-btn {
    width: 34px;
    height: 34px;
  }

  .home-view-all {
    margin-left: 4px;
  }

}

.pop-note[hidden] {
  display: none;
}

@media (max-width: 600px) {
  .app-footer-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .footer-identity,
  .footer-local {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

}

@media (max-width: 920px), (pointer: coarse) {
  .btn,
  .icon-btn,
  .select-picker-button,
  .search-picker-toggle,
  .shortcut-help-trigger,
  .color-input,
  .color-setting-control .color-reset,
  .segmented button,
  input[type="text"],
  input[type="search"],
  select {
    min-height: 44px;
  }

  .segmented {
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .watch-toolbar {
    align-items: stretch;
  }

  .watch-actions {
    gap: 0;
  }

  .watch-toolbar form.url {
    gap: 5px;
  }

  .watch-toolbar form.url .field {
    padding-inline: 9px;
  }

  .watch-toolbar form.url .btn {
    padding-inline: 11px;
  }

  .sheet-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .sheet-actions .spacer {
    display: none;
  }

  .sheet-actions .btn {
    justify-content: center;
  }

}

/* A separable verb is one word split across the clause, so both halves are
   marked and both light up together — hovering "auf" in "steht auf" has to
   show that it belongs to "steht", or the link is invisible. */
.w.separable {
  text-decoration: underline dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ------------------------------------------------------------ reading */

main.reading-main { display: block; max-width: var(--watch-main-max); }
.reading-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.reading-head > div:first-child { max-width: 760px; }
.reading-head .eyebrow, .reading-head h1, .reading-head > div > p:last-child { margin: 0; }
.reading-head > div > p:last-child { margin-top: 16px; }
.reading-head-actions { display: flex; gap: 8px; flex-shrink: 0; }
.reading-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.reading-summary > span { min-height: 96px; padding: 18px 20px; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; }
.reading-tools { display: flex; align-items: center; gap: 12px; }
.reading-search { width: min(360px, 100%); height: 34.5px; }
.reading-tools .count { margin-left: auto; }
/* Matched to the search field beside them. Both are `.segmented`
   (display: inline-flex), which stretches its buttons to fill this height by
   default — the filter buttons were otherwise sized from their own text and
   padding, and the view toggle's buttons needed their own fixed height
   removed below so this can take over. */
.reading-filters, .reading-view-toggle { height: 34.5px; }
.reading-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reading-card { min-height: 244px; }
.reading-card-main { min-width: 0; padding: 24px; display: flex; flex-direction: column; }
.reading-card h2, .reading-card p { margin: 0; }
.reading-card h2 { margin-top: 18px; }
.reading-card-author { margin-top: 7px !important; }
.reading-card-meta { margin-top: auto !important; padding-top: 24px; }
.reading-card-progress { display: block; height: 3px; margin-top: 14px; }
.reading-card-progress i { display: block; height: 100%; }
.reading-card-actions { align-self: start; flex-direction: column; padding: 18px 16px 0 0; }
.reading-empty { grid-column: 1 / -1; min-height: 310px; padding: 54px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.reading-empty h2, .reading-empty p { margin: 0; }
.reading-empty h2 { margin-top: 8px; }

.reading-view-toggle button {
  width: 32px;
  /* No explicit height: .reading-view-toggle above is a flex container with
     the default align-items: stretch, so its buttons fill its own height —
     which is set to match the search field. */
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.reading-view-toggle [data-icon] { width: 15px; height: 15px; }

/* Rows: one text per line instead of a grid of rectangles. The card keeps its
   markup — title, byline, meta, progress — just laid out horizontally and
   trimmed to fit, rather than restructured for a second layout. */
.reading-grid[data-view="rows"] { grid-template-columns: minmax(0, 1fr); }
.reading-grid[data-view="rows"] .reading-card {
  min-height: var(--ui-row-min);
  align-items: stretch;
}
.reading-grid[data-view="rows"] .reading-card-main {
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(220px, 1fr) minmax(120px, .5fr) max-content;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  padding: 10px 18px 10px 20px;
}
.reading-grid[data-view="rows"] .reading-card-kicker {
  flex: 0 0 auto;
  white-space: nowrap;
}
.reading-grid[data-view="rows"] .reading-card h2 {
  flex: 1 1 220px;
  min-width: 0;
  margin-top: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reading-grid[data-view="rows"] .reading-card-author {
  flex: 0 1 200px;
  min-width: 0;
  margin-top: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reading-grid[data-view="rows"] .reading-card-meta {
  margin-top: 0 !important;
  padding-top: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reading-grid[data-view="rows"] .reading-card-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: 2px;
  margin-top: 0;
}
.reading-grid[data-view="rows"] .reading-card-actions {
  align-self: stretch;
  flex-direction: row;
  padding: 8px 12px;
}

@media (max-width: 1100px) {
  .reading-grid[data-view="rows"] .reading-card-main {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 4px 18px;
  }
  .reading-grid[data-view="rows"] .reading-card-kicker,
  .reading-grid[data-view="rows"] .reading-card h2 { grid-column: 1; }
  .reading-grid[data-view="rows"] .reading-card-author { display: none; }
  .reading-grid[data-view="rows"] .reading-card-meta {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
  }
}

@media (max-width: 650px) {
  .reading-grid[data-view="rows"] .reading-card-meta { display: none; }
  .reading-grid[data-view="rows"] .reading-card-main { grid-template-columns: minmax(0, 1fr); }
}
.reading-empty p:not(.eyebrow) { max-width: 590px; margin-top: 12px; }
.reading-empty .btn { margin-top: 24px; }

.reader-toolbar { position: sticky; top: var(--nav-h); z-index: 32; min-height: 62px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; }
.reader-back { width: 38px; height: 38px; padding: 0; justify-content: center; text-decoration: none; }
.reader-back [data-icon] { width: 18px; height: 18px; }

/* ------------------------------------------------------------ habits / game */

main.game-main { display: block; max-width: 1680px; padding-top: clamp(20px, 3vh, 36px); }

/* A slim identity strip replaces the old hero + stat cards: avatar, vitals and
   today's progress all in one low-profile row, so the board starts almost
   immediately. Coins and streak live in the page header instead. */
.game-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 28px; padding: 12px 18px; }
.game-avatar-mini { flex: 0 0 auto; position: relative; display: flex; align-items: flex-end; gap: 6px; }
.game-avatar-mini > b { position: absolute; left: -6px; top: -6px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.pixel-party { display: flex; align-items: flex-end; }
.pixel-person { width: 38px; height: 68px; overflow: visible; image-rendering: pixelated; }
.game-avatar-mini .pixel-pet { display: flex; }
.game-avatar-mini .pixel-tapir { width: 54px; height: 32px; }
.pixel-tapir { width: 58px; height: 34px; overflow: visible; image-rendering: pixelated; }
.pixel-heart, .pixel-star, .pixel-coin, .pixel-flame { position: relative; display: inline-block; flex: 0 0 auto; image-rendering: pixelated; }
.pixel-heart, .pixel-star, .pixel-flame { width: 13px; height: 13px; }
.pixel-coin { width: 17px; height: 17px; }
.pixel-coin.small { width: 13px; height: 13px; }
.pixel-coin.tiny { width: 10px; height: 10px; border-width: 2px; vertical-align: -1px; }
.game-strip-copy { min-width: 0; flex: 0 1 auto; }
.game-strip-copy > strong { display: block; }
.game-vitals-mini { margin-top: 4px; display: flex; flex-direction: column; gap: 4px; }
.game-vitals-mini span { display: inline-flex; align-items: center; gap: 6px; }
.game-meter { width: 90px; height: 7px; display: block; overflow: hidden; }
.game-meter b { display: block; height: 100%; transition: width .25s ease; }
.game-strip-today { min-width: 0; margin-left: auto; display: flex; align-items: center; gap: 14px; }
.game-sync-state { min-width: 0; }
.game-day-progress-mini { width: 72px; height: 7px; display: block; overflow: hidden; }
.game-day-progress-mini b { display: block; height: 100%; }

.game-board-toolbar { margin-top: 18px; min-height: 64px; display: grid; grid-template-columns: minmax(280px, 520px) 1fr auto; align-items: center; gap: 14px; }
.game-search { min-height: 46px; position: relative; display: flex; align-items: center; }
.game-search [data-icon] { position: absolute; left: 15px; width: 17px; height: 17px; pointer-events: none; }
.game-search input { width: 100%; min-height: 46px; padding: 0 44px; }
.game-search-shortcut { position: absolute; right: 14px; pointer-events: none; }
.game-board-count { justify-self: end; }

.game-board { margin-top: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 16px; }
.game-column { min-width: 0; padding-bottom: 10px; }
.game-column-head { min-height: 94px; padding: 15px 14px 0; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.game-column-heading { display: flex; align-items: baseline; gap: 10px; }
.game-column-heading h2, .game-column-heading p { margin: 0; }
.game-column-heading p { display: none; }
.game-column-heading h2 span { min-width: 23px; height: 23px; margin-left: 4px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.game-column-tabs { min-height: 32px; display: flex; align-items: flex-end; gap: 18px; overflow-x: auto; }
.game-column-tabs button { min-height: 31px; padding: 0 0 8px; flex: 0 0 auto; }
.game-add-row { width: calc(100% - 20px); min-height: 48px; margin: 10px; padding: 0 14px; text-align: left; }
.game-task-list { max-height: 60vh; display: grid; align-content: start; gap: 8px; padding: 0 10px 10px; overflow-y: auto; scrollbar-width: thin; scrollbar-gutter: stable; }
.game-task { min-width: 0; min-height: 64px; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; }
.game-task-copy { min-width: 0; padding: 9px 8px 8px 14px; }
.game-task-edit { width: 100%; text-align: left; }
.game-task-edit strong { display: block; }
.game-task-copy p { margin: 3px 0 0; }
.game-task-menu { align-self: start; width: 30px; min-height: 30px; }
.game-task-meta { min-height: 16px; margin-top: 5px; display: flex; flex-wrap: wrap; gap: 8px; }
.game-task.habit-task { grid-template-columns: 34px minmax(0, 1fr) 34px; }
.game-task.habit-task .game-task-copy { padding-right: 38px; }
.game-task.habit-task .game-task-menu { position: absolute; top: 0; right: 34px; }
.game-habit-action, .game-habit-action-spacer { width: 34px; min-height: 100%; }
.game-check { width: 46px; display: flex; align-items: center; justify-content: center; }
.game-check span { width: 19px; height: 19px; display: flex; align-items: center; justify-content: center; }
.game-buy { width: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.game-buy b { font-size: 18px; }
.game-task-progress { margin-top: 10px; display: grid; gap: 5px; }
.game-task-progress i, .game-achievement i { height: 4px; display: block; overflow: hidden; }
.game-task-progress i b, .game-achievement i b { height: 100%; display: block; }
.game-column-empty { min-height: 270px; padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.game-column-empty > span { font-size: 30px; }
.game-column-empty p { margin: 0; }

.game-shop-dialog { width: min(560px, calc(100vw - 32px)); }
.game-shop-head { margin-top: 16px; display: flex; align-items: center; gap: 20px; }
.game-shop-preview { width: 90px; min-height: 96px; flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center; }
.game-shop-preview .pixel-person { width: 42px; height: 75px; }
.game-shop-preview .pixel-tapir { width: 54px; height: 32px; }
.game-shop-tabs { margin-top: 20px; display: flex; gap: 18px; overflow-x: auto; }
.game-shop-tabs button { min-height: 32px; padding: 0 0 8px; flex: 0 0 auto; }
.game-shop-panel { margin-top: 16px; }
.game-shop-panel-head { display: flex; align-items: center; justify-content: space-between; }
.game-pets { margin-top: 14px; max-height: 320px; overflow-y: auto; display: grid; gap: 10px; }
.game-pet-card { min-width: 0; padding: 14px; display: flex; align-items: center; gap: 14px; }
.game-pet-art { flex: 0 0 auto; width: 58px; display: flex; align-items: center; justify-content: center; }
.game-pet-copy { min-width: 0; flex: 1 1 auto; }
.game-pet-copy p { margin: 4px 0 0; }
.game-pet-tag { flex: 0 0 auto; padding: 5px 10px; }

.game-achievements { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.game-achievement { min-width: 0; padding: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.game-achievement-mark { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.game-achievement p { margin: 4px 0 10px; }
.game-achievement small { display: block; margin-top: 6px; }
.game-log { list-style: none; margin: 20px 0 0; padding: 0; }
.game-log li { min-height: 58px; padding: 10px 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.game-log li > span { min-width: 0; display: grid; gap: 3px; }
.game-log li > b { white-space: nowrap; }

.game-dialog { width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto; }
.game-dialog form { padding: 28px; }
.game-shop-dialog { padding: 24px; }
.game-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.game-dialog-head h2, .game-dialog-head p { margin: 0; }
.game-field { display: grid; gap: 7px; margin-top: 18px; }
.game-field[hidden], .game-weekdays[hidden], .game-dialog-delete[hidden] { display: none; }
.game-field input, .game-field textarea, .game-field .select-wrap { width: 100%; }
.game-field input { min-height: 40px; padding: 0 12px; }
.game-field textarea { min-height: 72px; padding: 9px 12px; }
.game-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.game-weekdays { margin: 22px 0 0; padding: 0; }
.game-weekdays > div { margin-top: 8px; display: grid; grid-template-columns: repeat(7, 1fr); }
.game-weekdays label { position: relative; }
.game-weekdays input { position: absolute; opacity: 0; }
.game-weekdays span { min-height: 38px; display: flex; align-items: center; justify-content: center; }
.game-dialog-note { margin: 18px 0 0; }
.game-dialog-actions { margin-top: 26px; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; }
.game-setting-row { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.game-setting-row > span { display: grid; gap: 5px; }
.game-toast { position: fixed; z-index: 100; left: 50%; bottom: 28px; transform: translateX(-50%); max-width: min(520px, calc(100vw - 32px)); padding: 13px 18px; }

@media (max-width: 1100px) {
  .game-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .game-board-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
  .game-board-count { display: none; }
}
@media (max-width: 620px) {
  .game-board, .game-achievements, .game-form-grid { grid-template-columns: 1fr; }
  .statistics-columns.triple { grid-template-columns: 1fr; }
  .game-strip-today { flex-wrap: wrap; }
  .game-sync-state { margin-right: auto; }
  .game-board-toolbar { grid-template-columns: minmax(0, 1fr); }
  .game-board-toolbar .btn { width: 100%; }
  .game-dialog form { padding: 20px; }
}
.reader-identity { min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.reader-identity strong, .reader-identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-tools { position: relative; display: flex; gap: 5px; }
.reader-popover { top: calc(100% + 8px); right: 0; }
.reading-stepper { display: inline-grid; grid-template-columns: 38px 48px 38px; min-height: 38px; }
.reading-stepper button, .reading-stepper output { display: flex; align-items: center; justify-content: center; }
.reader-find { position: sticky; top: calc(var(--nav-h) + 62px); z-index: 31; min-height: 54px; display: flex; align-items: center; gap: 6px; padding: 7px 0; }
.reader-find[hidden] { display: none; }
.reader-find .field { width: min(420px, 100%); }
.reader-find .count { margin-left: auto; }
.reader-progress { position: sticky; top: calc(var(--nav-h) + 61px); z-index: 30; height: 2px; }
.reader-find:not([hidden]) + .reader-progress { top: calc(var(--nav-h) + 115px); }
.reader-progress span { display: block; height: 100%; width: 0; transition: width .18s linear; }
.reader-status { max-width: var(--reader-line-width, 760px); margin: 28px auto 0; display: flex; justify-content: space-between; gap: 18px; }
.reader-content { max-width: var(--reader-line-width, 760px); margin: 0 auto; padding: clamp(44px, 7vw, 92px) 0 72px; }
:root[data-reader-width="narrow"] { --reader-line-width: 650px; }
:root[data-reader-width="medium"] { --reader-line-width: 780px; }
:root[data-reader-width="wide"] { --reader-line-width: 980px; }
.reader-paragraph { position: relative; padding: 18px 12px; transition: opacity .14s linear, background-color .14s linear; }
.reader-paragraph p { margin: 0; }
.reader-paragraph-actions { position: absolute; left: -38px; top: 50%; width: 30px; display: grid; gap: 5px; opacity: 0; transform: translateY(-50%); }
.reader-paragraph-actions button { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; }
.reader-paragraph-actions [data-icon] { width: 25px; height: 25px; }
.reader-paragraph-listen [data-icon] { width: 22px; height: 22px; }
.reader-paragraph:hover .reader-paragraph-actions, .reader-paragraph.current .reader-paragraph-actions, .reader-paragraph.bookmarked .reader-paragraph-actions, .reader-paragraph-actions:focus-within { opacity: 1; }
:root[data-reader-focus="on"] .reader-paragraph:not(.current) { opacity: .2; }
.reader-sentence { display: inline; }
.reader-content .w { cursor: pointer; padding-inline: .04em; margin-inline: -.02em; }
/* .reader-content .w sets padding-inline as a shorthand and outranks the
   unscoped .w.in-phrase-join / .w.saved-phrase-join longhands, so the bridge
   that makes a run read as one unbroken bar has to be restated here. */
.reader-content .w.in-phrase-join,
.reader-content .w.saved-phrase-join { padding-inline-end: .8em; margin-inline-end: -.78em; }
.reader-nav { position: sticky; bottom: 0; z-index: 28; max-width: var(--reader-line-width, 760px); min-height: 76px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 7px; }
.reader-nav .btn.primary { margin-left: auto; }

.reading-dialog { width: min(760px, calc(100vw - 32px)); max-height: min(820px, calc(100vh - 32px)); padding: 0; overflow: auto; }
.reading-dialog > form, .reading-dialog > .reading-dialog-head, .reading-bookmark-list, .reading-chapter-list { padding-inline: 28px; }
.reading-chapter-list { padding-block: 12px 24px; display: grid; }
.reading-chapter-item { width: 100%; min-height: 46px; padding: 11px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; text-align: left; }
.reading-chapter-item strong { min-width: 0; }
.reading-chapter-item .count { flex: 0 0 auto; }
.reading-editor-toc { margin-top: 16px; }
.reading-editor-toc .eyebrow { margin: 0 0 8px; display: flex; align-items: baseline; gap: 8px; }
.reading-editor-toc ol { max-height: 168px; margin: 0; padding-left: 20px; overflow-y: auto; display: grid; gap: 4px; }
.reading-dialog > form { padding-block: 28px; }
.reading-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.reading-dialog-head h2, .reading-dialog-head .eyebrow { margin: 0; }
.reading-dialog-head h2 { margin-top: 6px; }
.reading-editor-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.reading-editor-fields label { display: grid; gap: 7px; }
.reading-editor-text { grid-column: 1 / -1; }
.reading-editor-text textarea { min-height: 330px; resize: vertical; }
.reading-dialog-note { margin: 14px 0 0; }
.reading-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.reading-bookmarks-dialog > .reading-dialog-head { padding-top: 28px; }
.reading-bookmark-list { padding-block: 18px 28px; }
.reading-bookmark-item { padding: 18px 0; }
.reading-bookmark-jump { width: 100%; text-align: left; }
.reading-bookmark-jump p { margin: 7px 0 0; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.reading-bookmark-item label { display: grid; gap: 5px; margin-top: 12px; }
.reading-bookmark-item > div { margin-top: 8px; display: flex; justify-content: flex-end; gap: 6px; }
.reading-dialog-empty { padding: 42px 0; text-align: center; }
.reading-dialog-empty h3, .reading-dialog-empty p { margin: 0; }
.reading-dialog-empty p { margin-top: 8px; }
.reading-statistics-panel { margin-top: 28px; }
.reading-statistics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 20px; }
.reading-statistics-grid > span { min-height: 110px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }

@media (max-width: 1040px) {
  .reading-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reading-tools { flex-wrap: wrap; }
  .reading-tools .count { margin-left: 0; }
}
@media (max-width: 760px) {
  .reading-head { align-items: stretch; flex-direction: column; }
  .reading-head-actions { align-self: flex-start; }
  .reading-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reading-grid { grid-template-columns: minmax(0, 1fr); }
  .reading-filters { width: 100%; overflow-x: auto; }
  .reading-filters button { flex: 1 0 auto; }
  .reader-toolbar { gap: 7px; }
  .reader-back { width: 38px; overflow: hidden; white-space: nowrap; padding-inline: 0; font-size: 0; justify-content: center; }
  .reader-identity span { display: none; }
  .reader-tools .icon-btn:not(#reader-settings):not(#reader-bookmarks-open) { display: none; }
  .reader-paragraph-actions { left: -2px; top: -6px; transform: none; }
  .reader-paragraph { padding-inline: 20px; }
  .reader-nav { justify-content: space-between; }
  .reader-nav .btn { padding-inline: 10px; }
  .reader-nav .btn.primary { display: none; }
  .reading-editor-fields { grid-template-columns: minmax(0, 1fr); }
  .reading-editor-text { grid-column: auto; }
  .reading-statistics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .reading-summary { grid-template-columns: minmax(0, 1fr); }
  .reading-head-actions { width: 100%; }
  .reading-head-actions .btn { flex: 1; }
  .reading-filters {
    max-width: 100%;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
  }
  .reading-filters::-webkit-scrollbar { display: none; }
  .reading-filters button { scroll-snap-align: start; }
  .reader-status { flex-direction: column; gap: 2px; }
}

/* ============================================================ MOTION SYSTEM
   The themes own the surfaces; this file owns how those surfaces move. Keep
   high-frequency feedback quick, entrances calm, and reading text stationary. */

html {
  scroll-behavior: smooth;
}

main {
  animation: cdl-page-enter var(--motion-page, 340ms) var(--motion-ease, cubic-bezier(.16, 1, .3, 1)) both;
}

header {
  animation: cdl-chrome-enter var(--motion-ui, 220ms) var(--motion-ease, cubic-bezier(.16, 1, .3, 1)) both;
}

.app-footer {
  animation: cdl-quiet-enter var(--motion-page, 340ms) var(--motion-ease, cubic-bezier(.16, 1, .3, 1)) both;
}

@keyframes cdl-page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cdl-chrome-enter {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cdl-quiet-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Controls respond immediately and settle softly. Explicit properties avoid
   animating layout by accident as components evolve. */
:is(
  button,
  .btn,
  .icon-btn,
  nav a,
  .segmented button,
  .field,
  .select-picker-button,
  .reading-stepper button,
  .music-play-options label,
  .game-weekdays span,
  .avatar-choice label
) {
  transition-property: transform, opacity, color, background-color, border-color, box-shadow, filter;
  transition-duration: var(--motion-fast, 140ms);
  transition-timing-function: var(--motion-ease-standard, cubic-bezier(.2, .7, .2, 1));
}

:is(.switch, .switch::after, .select-picker-chevron) {
  transition-duration: var(--motion-ui, 220ms);
  transition-timing-function: var(--motion-ease, cubic-bezier(.16, 1, .3, 1));
}

.select-picker.open .select-picker-chevron {
  transform: rotate(180deg);
}

:is(
  .music-card,
  .music-result-card,
  .game-task,
  .game-pet-card,
  .history-thumb,
  .home-video-visual,
  .home-reading-card,
  .reading-card-main,
  .stat-card,
  .auth-card
) {
  transition-property: transform, opacity, background-color, border-color, box-shadow;
  transition-duration: var(--motion-ui, 220ms);
  transition-timing-function: var(--motion-ease, cubic-bezier(.16, 1, .3, 1));
}

.home-video-visual img,
.history-thumb img,
.music-card-cover,
.music-result-card > img {
  transition: transform var(--motion-slow, 480ms) var(--motion-ease, cubic-bezier(.16, 1, .3, 1)),
              filter var(--motion-ui, 220ms) var(--motion-ease-standard, cubic-bezier(.2, .7, .2, 1));
}

@media (hover: hover) and (pointer: fine) {
  :is(.btn, .icon-btn, .music-play, .music-seek, .carousel-actions button):not(:disabled):hover {
    transform: translateY(-1px);
  }

  :is(.music-card, .music-result-card, .game-task, .game-pet-card):hover {
    transform: translateY(-2px);
  }

  :is(.home-video-card, .history-item):hover :is(.home-video-visual, .history-thumb) {
    transform: translateY(-2px);
  }

  :is(.home-video-card, .history-item):hover img,
  .music-card:hover .music-card-cover,
  .music-result-card:hover > img {
    transform: scale(1.025);
  }
}

:is(.btn, .icon-btn, .music-play, .music-seek, .carousel-actions button):not(:disabled):active {
  transform: translateY(1px) scale(.985);
  transition-duration: var(--motion-instant, 80ms);
}

/* Menus and sheets share the same origin/settle relationship. */
.popover:not([hidden]) {
  transform-origin: top right;
  animation: cdl-popover-enter var(--motion-ui, 220ms) var(--motion-ease, cubic-bezier(.16, 1, .3, 1)) both;
}

.sheet-scrim {
  animation: cdl-scrim-enter var(--motion-ui, 220ms) ease-out both;
}

.sheet-scrim .sheet,
dialog[open] {
  animation: cdl-sheet-enter var(--motion-page, 340ms) var(--motion-ease, cubic-bezier(.16, 1, .3, 1)) both;
}

dialog[open]::backdrop {
  animation: cdl-scrim-enter var(--motion-ui, 220ms) ease-out both;
}

@keyframes cdl-popover-enter {
  from { opacity: 0; transform: translateY(-5px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cdl-scrim-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cdl-sheet-enter {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Modern browsers can keep top-layer elements painted long enough to animate
   out. This upgrades menu/dialog dismissal without delaying click handlers;
   the entrance keyframes above remain the fallback elsewhere. */
@supports (transition-behavior: allow-discrete) {
  .popover {
    opacity: 0;
    transform: translateY(-4px) scale(.98);
    transition: opacity var(--motion-fast, 140ms) ease-in,
                transform var(--motion-ui, 220ms) var(--motion-ease, cubic-bezier(.16, 1, .3, 1)),
                display var(--motion-ui, 220ms) allow-discrete;
  }

  .popover:not([hidden]) {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: none;
  }

  @starting-style {
    .popover:not([hidden]) {
      opacity: 0;
      transform: translateY(-5px) scale(.975);
    }
  }

  dialog {
    opacity: 0;
    transform: translateY(10px) scale(.985);
    transition: opacity var(--motion-fast, 140ms) ease-in,
                transform var(--motion-ui, 220ms) var(--motion-ease, cubic-bezier(.16, 1, .3, 1)),
                display var(--motion-ui, 220ms) allow-discrete,
                overlay var(--motion-ui, 220ms) allow-discrete;
  }

  dialog[open] {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: none;
  }

  dialog::backdrop {
    opacity: 0;
    transition: opacity var(--motion-ui, 220ms) ease-out,
                display var(--motion-ui, 220ms) allow-discrete,
                overlay var(--motion-ui, 220ms) allow-discrete;
  }

  dialog[open]::backdrop {
    opacity: 1;
    animation: none;
  }

  @starting-style {
    dialog[open] {
      opacity: 0;
      transform: translateY(14px) scale(.985);
    }

    dialog[open]::backdrop { opacity: 0; }
  }
}

/* Progress and selection changes should be legible without snapping. */
:is(
  .bar i,
  .activity-bar,
  .video-progress::after,
  .reading-card-progress i,
  .home-reading-progress i,
  .music-card-copy > i b,
  .game-meter b,
  .game-day-progress-mini b,
  .game-task-progress i b,
  .game-achievement i b,
  .reader-progress span
) {
  transition: width var(--motion-slow, 480ms) var(--motion-ease, cubic-bezier(.16, 1, .3, 1)),
              height var(--motion-slow, 480ms) var(--motion-ease, cubic-bezier(.16, 1, .3, 1)),
              opacity var(--motion-fast, 140ms) linear;
}

.music-lyric-row {
  transition: opacity var(--motion-ui, 220ms) var(--motion-ease-standard, cubic-bezier(.2, .7, .2, 1)),
              background-color var(--motion-ui, 220ms) var(--motion-ease-standard, cubic-bezier(.2, .7, .2, 1)),
              box-shadow var(--motion-ui, 220ms) var(--motion-ease-standard, cubic-bezier(.2, .7, .2, 1));
}

.music-lyric-copy,
.music-lyric-time,
.reader-paragraph-actions,
.word-actions .icon-btn {
  transition: transform var(--motion-ui, 220ms) var(--motion-ease, cubic-bezier(.16, 1, .3, 1)),
              opacity var(--motion-ui, 220ms) var(--motion-ease-standard, cubic-bezier(.2, .7, .2, 1)),
              color var(--motion-fast, 140ms) linear;
}

.music-lyric-row.active .music-lyric-copy {
  transform: translateX(3px);
}

.reader-paragraph-actions {
  translate: -4px 0;
}

.reader-paragraph:hover .reader-paragraph-actions,
.reader-paragraph.current .reader-paragraph-actions,
.reader-paragraph.bookmarked .reader-paragraph-actions,
.reader-paragraph-actions:focus-within {
  translate: 0 0;
}

.game-toast:not([hidden]) {
  animation: cdl-toast-enter var(--motion-page, 340ms) var(--motion-ease, cubic-bezier(.16, 1, .3, 1)) both;
}

@keyframes cdl-toast-enter {
  from { opacity: 0; transform: translate(-50%, 12px) scale(.97); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-reduced-motion="off"]) { scroll-behavior: auto; }

  html:not([data-reduced-motion="off"]) *,
  html:not([data-reduced-motion="off"]) *::before,
  html:not([data-reduced-motion="off"]) *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  html:not([data-reduced-motion="off"]) .reader-paragraph-actions { translate: 0 0; }
}

html[data-reduced-motion="on"] { scroll-behavior: auto; }
html[data-reduced-motion="on"] *,
html[data-reduced-motion="on"] *::before,
html[data-reduced-motion="on"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: .01ms !important;
}
html[data-reduced-motion="on"] .reader-paragraph-actions { translate: 0 0; }