/* Public pages share a saved theme; dark colors leave images and QR codes intact. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: none;
  white-space: nowrap;
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid var(--line, #7896a4);
  border-radius: 6px;
  background: var(--paper, #faf6eb);
  color: var(--ink, #244c67);
  font:
    500 12px/1.5 system-ui,
    sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
.theme-toggle [data-theme-icon] {
  font-size: 18px;
  line-height: 1;
}
.theme-toggle:focus-visible {
  outline: 3px solid var(--red, #a34531);
  outline-offset: 3px;
}
.header-right {
  flex-wrap: wrap;
}
.sidebar nav {
  align-items: center;
}
.theme-toggle:hover {
  filter: brightness(0.95);
}
html[data-theme="dark"] {
  --page: #151d24;
  --paper: #1e2932;
  --ink: #cfdfeb;
  --muted: #a0b3bc;
  --line: #465965;
  --red: #f0a18a;
  --green: #9bcdb0;
  --pale: #202f35;
  --soft: #a0b3bc;
  --gold: #d4bd87;
  color-scheme: dark;
  background: var(--page);
  color: var(--ink);
  scrollbar-color: #536976 #1e2932;
}
html[data-theme="dark"] body {
  background: var(--page);
  color: var(--ink);
  background-image: radial-gradient(
    ellipse at 90% 15%,
    #37515630,
    transparent 50%
  );
}
html[data-theme="dark"] :is(input, select, textarea, .search, .sort-toggle) {
  background-color: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--muted);
}
html[data-theme="dark"]
  :is(button, .download-button, .hero-secondary, .more, .qr-save) {
  border-color: var(--line);
}
html[data-theme="dark"]
  :is(button, .download-button, .hero-secondary, .more, .qr-save):hover:not(
    :disabled
  ) {
  background-color: #30434c;
  color: var(--ink);
}
html[data-theme="dark"]
  :is(.hero-button, .play, .check-answer, .primary, #mobile-play, #rest-stay) {
  background: #9ec4db;
  color: #142531;
  border-color: #9ec4db;
  text-shadow: none;
  -webkit-text-fill-color: #142531;
}
html[data-theme="dark"]
  :is(
    .hero-button,
    .play,
    .check-answer,
    .primary,
    #mobile-play,
    #rest-stay
  ):hover:not(:disabled) {
  background: #bed8e7;
  color: #142531;
}
html[data-theme="dark"]
  :is(
    .paper,
    .paper-label,
    .app,
    .set,
    .steps,
    dialog,
    .support-dialog,
    .mobile-player,
    .question-panel,
    .timeline-card
  ) {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: 0 6px 24px #0003;
}
html[data-theme="dark"]
  :is(
    .library-picker,
    .toolbar,
    .usage-notice,
    .notice,
    .test-badge,
    .tag,
    .release-category,
    .change-tag,
    .sentence-badge
  ) {
  background: #25373b;
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"]
  :is(
    .muted,
    .caption,
    .qr-help,
    .notes p,
    footer,
    .input-wrap span,
    .support-note,
    .support-trigger,
    .support-dialog a,
    .change-text,
    .art-bottom,
    .hero-copy > p,
    .hero .eyebrow
  ) {
  color: var(--muted);
}
html[data-theme="dark"]
  :is(
    .support-note,
    .notes,
    .stats,
    .set-bottom,
    .dialog-heading,
    .timeline,
    .release-changes,
    .input-wrap,
    .support-trigger
  ) {
  border-color: var(--line);
}
html[data-theme="dark"]
  :is(
    .tabs button,
    .badge,
    .badge.N2,
    .badge.N3,
    .badge.N4,
    .set-bottom .listen-link
  ) {
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"]
  :is(
    button[aria-pressed="true"],
    .tabs button.selected,
    .question-link[aria-current="true"],
    .option-row:has(input:checked)
  ) {
  background: #354b51;
  color: #e0eee8;
  border-color: #75998e;
}
html[data-theme="dark"] .theme-toggle[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] :is(.option-row, .question-link, .empty) {
  background: #23313a;
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] .option-row.correct {
  background: #263e34;
  border-color: #80b799;
}
html[data-theme="dark"] .option-row.incorrect {
  background: #49322e;
  border-color: #d39783;
}
html[data-theme="dark"] #notice {
  background: #40382a;
  color: #ead6aa;
  border-color: #9f8860;
}
html[data-theme="dark"] :is(.real-badge, .qr-warning) {
  color: var(--red);
}
html[data-theme="dark"] .real-badge {
  background: #49322e;
  border-color: #9d6b5b;
}
html[data-theme="dark"] .hero {
  background: #1d2c36;
  border-color: #6e8e9f;
  box-shadow: 5px 5px 0 #0003;
}
html[data-theme="dark"] .hero::before {
  background-image:
    linear-gradient(
      90deg,
      #172630 0%,
      #172630ef 25%,
      #1726309c 65%,
      #17263060 100%
    ),
    url("/wave-desktop-v1.webp");
  filter: none;
}
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .hero-copy > p {
  text-shadow: none;
}
html[data-theme="dark"] .sound-art {
  background: #1e2932ed;
  border-color: var(--line);
}
html[data-theme="dark"] .wave i {
  background: #9ec4db;
}
html[data-theme="dark"] .platform,
html[data-theme="dark"] .app:nth-child(2) .platform {
  background: #30434c;
  border-color: #809caa;
}
html[data-theme="dark"] .bundle {
  --cover: #293f4c;
  --cover-ink: #c0d6e2;
}
html[data-theme="dark"] .bundle[data-bundle-level="N2"] {
  --cover: #413c2d;
  --cover-ink: #ddcca7;
}
html[data-theme="dark"] .bundle[data-bundle-level="N3"],
html[data-theme="dark"] .bundle[data-bundle-level="N4"] {
  --cover: #2b403b;
  --cover-ink: #b6d6c9;
}
html[data-theme="dark"] .bundle a {
  background: var(--paper);
}
html[data-theme="dark"] .set::after {
  background: linear-gradient(
    45deg,
    #354954 0 48%,
    #6f91a1 49% 53%,
    var(--pale) 54%
  );
}
html[data-theme="dark"] #updates.update-strip {
  background: #202f35;
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] :is(.sentence-line, .sentence-line.is-current) {
  color: var(--ink);
}
html[data-theme="dark"] .sentence-line time {
  color: var(--muted);
}
html[data-theme="dark"] .sentence-line.is-current {
  background: #2a3f42;
  border-left-color: var(--red);
}
html[data-theme="dark"] .sentence-line:hover:not(:disabled) {
  background: #293a43;
}
html[data-theme="dark"] .sentence-line.is-current:hover:not(:disabled) {
  background: #354c4c;
}
html[data-theme="dark"]
  :is(
    .karaoke-char.is-read,
    .sentence-line.is-current .karaoke-char.is-read,
    .sentence-line.is-past .karaoke-char,
    .sentence-line.is-current time
  ) {
  color: var(--red);
}
html[data-theme="dark"] .karaoke-char.is-singing,
html[data-theme="dark"] .sentence-line.is-current .karaoke-char.is-singing {
  color: transparent;
  background: linear-gradient(
    90deg,
    var(--red) var(--karaoke-fill, 0%),
    var(--ink) var(--karaoke-fill, 0%)
  );
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-theme="dark"] #sentence-scroll.sentence-selectable ::selection,
html[data-theme="dark"] ::selection {
  background: #567784;
  color: #fff;
}
html[data-theme="dark"] .sentence-line.is-looping time::after {
  color: var(--green);
}
html[data-theme="dark"] dialog::backdrop {
  background: #060d14b8;
}
html[data-theme="dark"] .payment-qr {
  background: white;
  padding: 8px;
}
html[data-theme="dark"].motion-pending,
html[data-theme="dark"].motion-pending::before,
html[data-theme="dark"] .motion-veil {
  background: var(--page);
}
html[data-theme="dark"] .motion-screen {
  color: var(--ink);
}
html[data-theme="dark"]
  :is(.motion-caption, .motion-sub, .motion-sub span, .motion-count) {
  color: var(--muted);
}
html[data-theme="dark"] .motion-canvas {
  opacity: 0.65;
}
@media (max-width: 760px) {
  .theme-toggle {
    min-height: 40px;
    padding: 7px 9px;
    font-size: 12px;
  }
  .header-right {
    gap: 10px;
  }
  html[data-theme="dark"] .hero::before {
    background-image:
      linear-gradient(90deg, #172630f5, #172630bd 60%, #17263080),
      url("/wave-mobile-v1.webp");
  }
}

/* Compact, accessible icon-only appearance on all three headers. */
button.theme-toggle {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 9px;
  border-radius: 50%;
  gap: 0;
  line-height: 1;
}
button.theme-toggle [data-theme-icon] {
  display: flex;
  align-items: center;
  justify-content: center;
}
button.theme-toggle [data-theme-label] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
html[data-theme="dark"] .usage-notice p,
html[data-theme="dark"] .usage-notice .notice-en {
  color: var(--muted);
}
html[data-theme="dark"] .usage-notice strong {
  color: var(--red);
}
html[data-theme="dark"] .dialog-heading {
  background: var(--pale);
  color: var(--ink);
}
html[data-theme="dark"] .sidebar nav .home-language:focus-visible {
  background: #30434c;
  outline: 2px solid var(--red);
}
html[data-theme="dark"] .tabs button:hover:not(.selected) {
  background: #30434c;
  color: var(--ink);
}