/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }

/* Keyboard focus: a clear lamp-oil ring, only for keyboard users (not mouse). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.w:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  background: var(--accent-dim);
}
:focus:not(:focus-visible) { outline: none; }

/* Screen-reader-only helper */
.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;
}

/* ─── Tokens — 勝色 night · 月白 moonlight · 朱 seal (菜種油色 retired 2026-07) ── */
/* Sanzo Wada, 配色總鑑 (1933). Sampled from the print: 勝色 #16173C,
   鳶茶色 #6C2216, 菜種油色 #9D950C — lightness adapted for screen/WCAG.
   (variable names kept from the concrete theme; values are kachi night) */
:root {
  --concrete:    #131530;   /* page: 勝色 — indigo dyed near-black */
  --concrete2:   #1D1F42;   /* panels: lifted kachi */
  --ink:         #EAE6D8;   /* primary text: paper under lamplight */
  --gray-mid:    #9B97A8;   /* secondary text: indigo-ash */
  --hairline:    #2C2E52;
  --accent:      #B5D0DB;   /* 月白 moonlit water — geppaku with a whisper of 瓶覗 */
  --accent-deep: #8FB6C6;   /* deeper moon for small accent text on dark */
  --accent-dim:  rgba(181,208,219,0.13);
  --accent-hot:  rgba(181,208,219,0.20);
  --tobicha:     #8A3A28;   /* 鳶茶色 — kite brown, warnings & tertiary */
  --shu:         #A63A22;   /* 朱 — seal vermillion: the mark of completed study */
  --washi:       #EAE6D8;   /* the lamp-lit page: annotation panel + notebook */
  --washi-2:     #F1EDDF;   /* raised paper: cards pinned on the page */
  --washi-line:  #D2CBBA;   /* ruled lines and hairlines on paper */
  --sumi:        #16171B;   /* ink on paper */
  --paper-text:  #3B382F;   /* secondary text on paper */
  --paper-mid:   #7A7466;   /* tertiary text on paper */
  --shadow-vol:  #101126;   /* sidebar: deeper night */
  --shadow-mid:  #34365C;
  --pale:        #E3DFD2;   /* sidebar text */
  --pale-dim:    #918DA0;
  /* annotation pane; the header-right block aligns to it. Scales with the
     viewport so on wide screens the pane grows toward the lyrics column
     instead of leaving a dead gap between the two. */
  --sidebar-w:   clamp(380px, 33vw, 500px);
  --serif:       'Noto Serif JP', serif;
  --grotesque:   'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Motion — shared ease curves. Durations stay inline (0.15s hover scale). */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

html { scroll-behavior: smooth; color-scheme: dark; }

body {
  background: var(--concrete);
  color: var(--ink);
  font-family: var(--serif);
  min-height: 100vh;
  min-height: 100dvh;
  /* App is viewport-locked; the lyrics pane scrolls internally. */
  overflow: hidden;
  /* faint moonlight falling from above — barely there */
  background-image:
    radial-gradient(ellipse 110% 70% at 50% -20%, rgba(181,208,219,0.045), transparent 60%),
    radial-gradient(ellipse 130% 100% at 50% 120%, rgba(0,0,0,0.5), transparent 60%);
  background-attachment: fixed;
}

/* ─── Layout ─────────────────────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  /* Fixed viewport height so .lyrics-pane scrolls internally and the
     sticky sidebar stays in view. */
  height: 100vh;
  height: 100dvh;
}

.content-area {
  display: flex;
  overflow: hidden;
  /* Allow the 1fr grid row to shrink to the viewport instead of growing
     with content. */
  min-height: 0;
}

.lyrics-pane {
  flex: 1;
  /* Center the pane when the sidebar is closed (sidebar is width 0, so
     auto margins split the leftover space evenly). */
  margin: 0 auto;
  padding: 72px 72px 160px;
  max-width: 760px;
  overflow-y: auto;
  outline: 1px solid transparent;
  outline-offset: -8px;
  transition: max-width 0.28s var(--ease-out), outline-color 0.15s;
}

.lyrics-pane.dragover { outline-color: var(--accent); }

.content-area.sidebar-open .lyrics-pane {
  max-width: 620px;
  margin: 0;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
header {
  border-bottom: 1px solid var(--hairline);
  padding: 0 32px 0 56px;
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 64px;
  background: var(--concrete);
}

.site-title {
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 36px;
  border-right: 1px solid var(--hairline);
  flex-shrink: 0;
  transition: opacity 0.15s;
}

@media (hover: hover) and (pointer: fine) {
  .site-mark {
  display: block;
  width: 25px;
  height: 50px;
  flex-shrink: 0;
}


.site-title:hover { opacity: 0.7; }
  .site-title:hover .jp { color: var(--accent); }
}
.site-title .jp { transition: color 0.15s; }

.site-title .jp {
  /* the wordmark writes in the identity's hand */
  font-family: 'Klee One', var(--serif);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.site-title .en {
  font-family: var(--grotesque);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gray-mid);
}

/* Compact header inputs exist only once content is loaded. */
header .mode-toggle,
header .search-form,
header .paste-area-wrapper,
header .search-btn { display: none; }

body.has-content header .mode-toggle { display: flex; }
body.has-content header .search-form:not(.hidden) { display: flex; }
body.has-content header .paste-area-wrapper.visible { display: flex; }
body.has-content header .search-btn { display: block; }

.search-form {
  flex: 1;
  align-items: center;
  padding-left: 28px;
  min-width: 0;
}

.search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--grotesque);
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: 0.06em;
  caret-color: var(--accent);
}

.search-input::placeholder { color: var(--gray-mid); opacity: 0.85; }

.search-btn {
  background: var(--ink);
  color: var(--concrete);
  border: none;
  cursor: pointer;
  font-family: var(--grotesque);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0 26px;
  height: 64px;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, transform 0.16s var(--ease-out);
  margin-left: 16px;
}

@media (hover: hover) and (pointer: fine) {
  .search-btn:hover { background: var(--accent); color: var(--concrete); }
}
.search-btn:disabled { opacity: 0.35; cursor: not-allowed; background: var(--ink); color: var(--concrete); }

/* Mode toggle: SEARCH / TEXT */
.mode-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  padding: 0 24px 0 0;
  border-right: 1px solid var(--hairline);
  margin: 0 24px 0 28px;
}

.mode-btn {
  background: none;
  border: none;
  font-family: var(--grotesque);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-mid);
  cursor: pointer;
  padding: 6px 12px;
  transition: color 0.15s, transform 0.16s var(--ease-out);
}

.mode-btn.active {
  color: var(--ink);
  border-bottom: 2px solid var(--accent-deep);
}

/* Language + furigana preferences — always visible, right edge */
.header-prefs {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  padding-left: 22px;
  border-left: 1px solid var(--hairline);
  flex-shrink: 0;
}

/* The Load tab and prefs share one block. On mobile it dissolves so the
   two-row header can reorder them individually. On desktop it is exactly
   the sidebar pane's width minus the header's 32px right padding, so the
   paper Load tab's left edge lands on the paper pane's left edge below —
   two same-material surfaces either align or read as a mistake. */
.header-right { display: contents; }

@media (min-width: 769px) {
  .header-right {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    width: calc(var(--sidebar-w) - 32px);
  }
  /* The tab's left edge IS the alignment line — the input keeps its
     breathing room on its own side instead. */
  .header-right .search-btn { margin-left: 0; }
  .search-form { padding-right: 16px; }
  /* With a song loaded the pane (and this block) scales with the viewport;
     stretch the prefs from the Load tab to the right edge so the row reads
     as one continuous toolbar instead of tab + dead gap + cluster. */
  body.has-content .header-right .header-prefs {
    flex: 1;
    min-width: 0;
    justify-content: space-between;
  }
  /* The buttons keep their natural width — only the space between them
     stretches. Without this they shrink and CJK labels wrap. */
  body.has-content .header-right .header-prefs > * {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

.pref-btn {
  background: none;
  border: none;
  font-family: var(--grotesque);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-mid);
  cursor: pointer;
  padding: 6px 8px;
  transition: color 0.15s, transform 0.16s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .pref-btn:hover { color: var(--ink); }
}

.pref-btn.active {
  color: var(--ink);
  border-bottom: 2px solid var(--accent-deep);
}

.pref-btn.furi {
  font-family: var(--serif);
  text-transform: none;
  letter-spacing: 0.08em;
  margin-left: 10px;
}

.pref-btn.tr {
  font-family: var(--serif);
  text-transform: none;
  letter-spacing: 0.08em;
  margin-left: 6px;
}

.notebook-nav {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid var(--hairline);
  color: var(--accent-deep);
  cursor: pointer;
  font-family: var(--grotesque);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 9px;
  margin-right: 10px;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.16s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .notebook-nav:hover { border-color: var(--accent); background: var(--accent-dim); }
}

.notebook-count {
  min-width: 18px;
  padding: 2px 4px;
  background: var(--shu);
  color: var(--ink);
  font-size: 0.56rem;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0;
}

.notebook-count[hidden] { display: none; }

/* Text mode: paste / upload area (hidden by default) */
.paste-area-wrapper {
  flex: 1;
  align-items: center;
  gap: 14px;
  padding-left: 28px;
  min-width: 0;
}

.search-form.hidden { display: none; }

.paste-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--grotesque);
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--ink);
  resize: none;
  height: 40px;
  letter-spacing: 0.04em;
  caret-color: var(--accent);
}

.paste-input::placeholder { color: var(--gray-mid); opacity: 0.85; }

.file-btn {
  background: none;
  border: 1px solid var(--gray-mid);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--grotesque);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 7px 14px;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s, transform 0.16s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .file-btn:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
}

.file-input-hidden { display: none; }

/* ─── State screens ──────────────────────────────────────────────────────── */
.screen {
  padding: 96px 0 40px;
  display: none;
}

.screen.active { display: block; }

/* ─── Hero — the primary input when nothing is loaded ────────────────────── */
#screenEmpty.active {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100%;
  padding: 0 0 96px;
}

.hero {
  width: 100%;
  max-width: 600px;
}

.hero-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--ink);
}

.hero-sub {
  font-family: var(--grotesque);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray-mid);
  margin-top: 18px;
  line-height: 2.2;
}

.hero-mode {
  display: flex;
  gap: 0;
  margin: 56px 0 14px;
}

.search-field { position: relative; }

.hero-input {
  width: 100%;
  background: none;
  border: 1px solid var(--gray-mid);
  outline: none;
  font-family: var(--grotesque);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: 0.06em;
  caret-color: var(--accent);
  padding: 18px 44px 18px 20px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.hero-input:focus { border-color: var(--accent-deep); box-shadow: 0 0 0 1px var(--accent-deep); }
.hero-input::placeholder { color: var(--gray-mid); opacity: 0.85; }

/* Clear (✕) button inside a search field */
.clear-btn {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--gray-mid);
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
  padding: 6px;
  display: none;
  transition: color 0.15s, transform 0.16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .clear-btn:hover { color: var(--ink); }
}
.search-field.has-value .clear-btn { display: block; }

/* Header variant: input is in a flex row, not a relative wrapper */
.header-clear {
  position: static;
  transform: none;
  flex-shrink: 0;
  margin-left: 4px;
}
.search-form.has-value .header-clear { display: block; }

.hero-paste { display: none; flex-direction: column; gap: 12px; }
.hero.mode-paste .search-field { display: none; }
.hero.mode-paste .recent { display: none; }
.hero.mode-paste .learning-home { display: none; }
.hero.mode-paste .hero-paste { display: flex; }

/* ─── Curated learning paths ─────────────────────────────────────────────── */
.learning-home[hidden] { display: none; }

.daily-pick { margin-top: 34px; }

.daily-head {
  display: flex;
  align-items: baseline;
  gap: 13px;
  margin-bottom: 11px;
}

.daily-kicker,
.starter-kicker {
  font-family: 'Klee One', var(--serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent-deep);
}

.daily-label {
  font-family: var(--grotesque);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gray-mid);
}

.daily-card {
  position: relative;
  width: 100%;
  min-height: 150px;
  display: flex;
  align-items: flex-end;
  gap: 28px;
  overflow: hidden;
  text-align: left;
  background:
    radial-gradient(circle at 88% 18%, rgba(181,208,219,0.1), transparent 28%),
    linear-gradient(135deg, var(--concrete2), rgba(29,31,66,0.64));
  border: 1px solid var(--hairline);
  color: var(--ink);
  padding: 25px 28px 24px 34px;
  cursor: pointer;
  box-shadow: 0 18px 44px rgba(7,8,24,0.22);
  transition: border-color 0.18s, background 0.18s, transform 0.16s var(--ease-out);
}

/* A narrow tanzaku: moonlit paper, finished with a vermilion seal. */
.daily-card::before {
  content: '';
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 14px;
  width: 6px;
  background: linear-gradient(to bottom, var(--washi) 0 calc(100% - 12px), var(--shu) calc(100% - 12px));
  opacity: 0.86;
}

.daily-copy {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.daily-title {
  font-family: var(--serif);
  font-size: 1.38rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.daily-artist {
  margin-top: 4px;
  font-family: var(--grotesque);
  font-size: 0.61rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.daily-hook {
  margin-top: 15px;
  max-width: 440px;
  font-family: var(--grotesque);
  font-size: 0.7rem;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.025em;
  color: var(--gray-mid);
}

.daily-open {
  flex-shrink: 0;
  padding-bottom: 2px;
  font-family: var(--grotesque);
  font-size: 0.57rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.starter-packs {
  margin-top: 46px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
}

.starter-head { margin-bottom: 18px; }

.starter-title {
  margin-top: 7px;
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.starter-intro {
  margin-top: 7px;
  font-family: var(--grotesque);
  font-size: 0.66rem;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: var(--gray-mid);
}

.starter-levels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.starter-level-card {
  position: relative;
  min-width: 0;
  min-height: 116px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink);
  padding: 16px 13px 13px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.16s var(--ease-out);
}

.starter-level-card.active {
  border-color: var(--accent-deep);
  background: var(--accent-dim);
}

.starter-level-ja {
  font-family: var(--serif);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.starter-level-name {
  margin-top: 5px;
  max-width: calc(100% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--grotesque);
  font-size: 0.61rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent-deep);
}

.starter-level-meta {
  margin-top: auto;
  font-family: var(--grotesque);
  font-size: 0.52rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--gray-mid);
}

.starter-level-mark {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--grotesque);
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--gray-mid);
}

.starter-song-panel {
  grid-column: 1 / -1;
  margin-top: 2px;
  border: 1px solid var(--hairline);
  background: rgba(29,31,66,0.34);
}

.starter-song-row {
  width: 100%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  padding: 13px 15px 13px 12px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s var(--ease-out);
}

.starter-song-row:last-child { border-bottom: none; }

.starter-song-number {
  font-family: var(--grotesque);
  font-size: 0.54rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--tobicha);
}

.starter-song-copy,
.starter-song-head {
  min-width: 0;
  display: flex;
}

.starter-song-copy { flex-direction: column; }
.starter-song-head { align-items: baseline; gap: 10px; }

.starter-song-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--serif);
  font-size: 0.9rem;
  color: var(--ink);
}

.starter-song-artist {
  flex-shrink: 0;
  font-family: var(--grotesque);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent-deep);
}

.starter-song-note {
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--grotesque);
  font-size: 0.61rem;
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--gray-mid);
}

.starter-song-arrow {
  font-family: var(--grotesque);
  font-size: 0.7rem;
  color: var(--accent-deep);
}

@media (hover: hover) and (pointer: fine) {
  .daily-card:hover { border-color: var(--accent-deep); transform: translateY(-2px); }
  .starter-level-card:hover { border-color: var(--accent-deep); background: var(--accent-dim); }
  .starter-song-row:hover { background: var(--accent-dim); transform: translateX(4px); }
}

@media (max-width: 600px) {
  .daily-card { min-height: 0; align-items: flex-start; flex-direction: column; gap: 18px; padding: 22px 22px 21px 31px; }
  .daily-title { font-size: 1.2rem; }
  .daily-hook { margin-top: 12px; }
  .daily-open { align-self: flex-end; }
  .starter-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .starter-level-card { min-height: 104px; }
  .starter-song-row { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 9px; padding-inline: 10px; }
  .starter-song-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .starter-song-artist { white-space: normal; }
  .starter-song-note { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* ─── Recent searches ────────────────────────────────────────────────────── */
.recent { margin-top: 26px; }
.recent[hidden] { display: none; }

.recent-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.recent-label {
  font-family: var(--grotesque);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gray-mid);
}

.recent-clear {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--grotesque);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-mid);
  transition: color 0.15s, transform 0.16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .recent-clear:hover { color: var(--tobicha); }
}

.recent-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.recent-chip {
  background: none;
  border: 1px solid var(--hairline);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--grotesque);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  padding: 7px 14px;
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .recent-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
}

/* ─── "People are reading" (server recent list) ──────────────────────────── */
.studied { margin-top: 40px; }
.studied[hidden] { display: none; }
.hero.mode-paste .studied { display: none; }

.studied-label {
  font-family: var(--grotesque);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 14px;
}

.studied-list { display: flex; flex-direction: column; }

.studied-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--hairline);
  padding: 11px 4px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s var(--ease-out);
}
.studied-row::before {
  content: '';
  align-self: center;
  width: 6px;
  height: 15px;
  flex-shrink: 0;
  background: linear-gradient(to top, var(--shu) 0 3px, var(--washi) 3px);
  opacity: 0.8;
}

.studied-row:focus-visible { background: var(--accent-dim); outline: none; transform: translateX(6px); }
@media (hover: hover) and (pointer: fine) {
  .studied-row:hover { background: var(--accent-dim); outline: none; transform: translateX(6px); }
}

.studied-title {
  font-family: var(--serif);
  font-size: 0.92rem;
  color: var(--ink);
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studied-artist {
  font-family: var(--grotesque);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-mid);
  margin-left: auto;
  flex-shrink: 0;
}

/* ─── Song header: title + share ─────────────────────────────────────────── */
.song-title-row { display: flex; align-items: flex-start; gap: 20px; }
.song-title-row .song-title { flex: 1; min-width: 0; }

.song-share {
  flex-shrink: 0;
  margin-top: 8px;
  background: none;
  border: 1px solid var(--accent-deep);
  color: var(--accent-deep);
  cursor: pointer;
  font-family: var(--grotesque);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 16px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, transform 0.16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .song-share:hover { background: var(--accent); border-color: var(--accent); color: var(--concrete); }
  .notebook-export:hover { background: var(--concrete); border-color: var(--concrete); color: var(--washi); }
  .sidebar .sb-save:hover { background: var(--concrete); border-color: var(--concrete); color: var(--washi); }
}
.song-share[hidden] { display: none; }

.hero-textarea {
  width: 100%;
  background: none;
  border: 1px solid var(--gray-mid);
  outline: none;
  font-family: var(--grotesque);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: 0.04em;
  caret-color: var(--accent);
  padding: 16px 20px;
  resize: vertical;
  transition: border-color 0.15s;
}

.hero-textarea:focus { border-color: var(--accent-deep); box-shadow: 0 0 0 1px var(--accent-deep); }
.hero-textarea::placeholder { color: var(--gray-mid); opacity: 0.85; }

.hero-file { align-self: flex-start; }

.hero-submit {
  width: 100%;
  margin-top: 16px;
  background: var(--ink);
  color: var(--concrete);
  border: none;
  cursor: pointer;
  font-family: var(--grotesque);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 18px 0;
  transition: background 0.15s, color 0.15s, transform 0.16s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .hero-submit:hover { background: var(--accent); color: var(--concrete); }
}
.hero-submit:disabled { opacity: 0.35; cursor: not-allowed; background: var(--ink); color: var(--concrete); }

.loading-state {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.loading-label {
  font-family: var(--grotesque);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--gray-mid);
  text-transform: uppercase;
}

.loading-bar {
  width: 100%;
  max-width: 360px;
  height: 1px;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}

.loading-bar::after {
  content: '';
  position: absolute;
  top: 0; left: -40%;
  width: 40%;
  height: 100%;
  background: var(--accent);
}

@keyframes slide {
  0%   { left: -40%; }
  100% { left: 100%; }
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes badgePop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.error-state {
  font-family: var(--grotesque);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink);
  border-left: 2px solid var(--tobicha);
  padding-left: 20px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

/* ─── Search results picker ──────────────────────────────────────────────── */
.results-head {
  font-family: var(--grotesque);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gray-mid);
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gray-mid);
}

.result-row {
  display: flex;
  align-items: baseline;
  gap: 20px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--hairline);
  padding: 18px 14px 18px 6px;
  cursor: pointer;
  position: relative;
  transition: background 0.15s, transform 0.15s var(--ease-out);
}

.result-row:focus-visible,
.result-row.kbd-active { background: var(--accent-dim); outline: none; transform: translateX(6px); }
@media (hover: hover) and (pointer: fine) {
  .result-row:hover { background: var(--accent-dim); outline: none; transform: translateX(6px); }
}

/* keyboard highlight must snap, never slide */
.result-row.kbd-active { transition: none; }
/* cancel the entrance animation so the transform snap is not overridden */
.result-row.kbd-active,
.result-row.kbd-leaving { animation: none; }
/* ::after chevron also has its own transition — snap it too */
.result-row.kbd-active::after { transition: none; }
/* JS in search.js adds .kbd-leaving to the row LOSING kbd-active so the
   outgoing row also snaps instead of sliding back */
.result-row.kbd-leaving,
.result-row.kbd-leaving::after { transition: none; }
/* Tab-focus (keyboard-initiated) should snap, not slide */
.result-row:focus-visible,
.result-row:focus-visible::after { transition: none; }
.studied-row:focus-visible { transition: none; }

/* open affordance on hover/focus */
.result-row::after {
  content: '→';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  color: var(--accent);
  font-family: var(--grotesque);
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}
.result-row:focus-visible::after,
.result-row.kbd-active::after { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (hover: hover) and (pointer: fine) {
  .result-row:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* matched-query highlight */
.result-title mark.hl,
.result-sub mark.hl {
  background: none;
  color: var(--accent);
  font-weight: 600;
}
.result-sub mark.hl { font-weight: 700; }

.results-hint {
  font-family: var(--grotesque);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-mid);
  margin-top: 8px;
}

.result-num {
  font-family: var(--grotesque);
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--gray-mid);
  width: 22px;
  flex-shrink: 0;
}

.result-main { flex: 1; min-width: 0; }

.result-title {
  display: block;
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.5;
}

.result-sub {
  display: block;
  font-family: var(--grotesque);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-mid);
  margin-top: 5px;
}

.result-dur {
  font-family: var(--grotesque);
  font-size: 0.66rem;
  color: var(--gray-mid);
  flex-shrink: 0;
}

.result-ja {
  font-family: var(--serif);
  font-size: 0.6rem;
  color: var(--accent-deep);
  border: 1px solid var(--accent-deep);
  padding: 1px 6px;
  margin-left: 10px;
  vertical-align: 2px;
}

.results-action {
  display: block;
  width: 100%;
  background: none;
  border: 1px solid var(--hairline);
  margin-top: 20px;
  padding: 13px 16px;
  text-align: center;
  cursor: pointer;
  font-family: var(--grotesque);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-mid);
  transition: color 0.15s, border-color 0.15s, transform 0.16s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .results-action:hover { color: var(--ink); border-color: var(--ink); }
}

.results-action.recall { border-style: dashed; }
@media (hover: hover) and (pointer: fine) {
  .results-action.recall:hover { color: var(--ink); border-color: var(--tobicha); }
}

/* ─── iTunes result rows (plain-Enter screen): artwork + disable state ─────── */
/* Fixed artwork slot in the leading position of a .result-row. */
.result-art {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: 1px solid var(--hairline);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}
.result-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.result-art.art-placeholder {
  color: var(--gray-mid);
  font-size: 1.1rem;
  background: var(--accent-dim);
}
.suggest-result[disabled],
.result-row.row-disabled {
  cursor: default;
  opacity: 0.5;
}
.result-row.row-disabled::after { display: none; }
@media (hover: hover) and (pointer: fine) {
  .suggest-result[disabled]:hover,
  .result-row.row-disabled:hover { background: none; transform: none; }
  .suggest-result[disabled]:hover::after { display: none; }
}
.suggest-result.row-loading { opacity: 0.6; }
.result-note {
  flex-shrink: 0;
  font-family: var(--grotesque);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tobicha);
}

/* ─── Type-ahead suggestion dropdown ──────────────────────────────────────── */
/* Anchor: the header search form needs to position the dropdown like the hero
   .search-field (which is already position:relative). */
.search-form { position: relative; }

.suggest-box {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  margin-top: 4px;
  max-height: min(58vh, 400px);
  overflow-y: auto;
  background: var(--concrete2);
  border: 1px solid var(--hairline);
  box-shadow: 0 12px 32px -8px var(--shadow-vol);
}
/* In the compact header the form is short; keep the dropdown pinned to the
   input's full width but never wider than the viewport. */
header .suggest-box { max-height: min(70vh, 420px); }

.suggest-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  cursor: pointer;
  transition: transform 0.16s var(--ease-out);
  border-bottom: 1px solid var(--hairline);
}
.suggest-row:last-child { border-bottom: none; }
.suggest-row.kbd-active { background: var(--accent-dim); }
@media (hover: hover) and (pointer: fine) {
  .suggest-row:hover { background: var(--accent-dim); }
}

.suggest-art {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid var(--hairline);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.suggest-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.suggest-art.art-placeholder {
  color: var(--gray-mid);
  font-size: 1rem;
  background: var(--accent-dim);
}

.suggest-main { flex: 1; min-width: 0; }
.suggest-title {
  display: block;
  font-family: var(--serif);
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggest-sub {
  display: block;
  font-family: var(--grotesque);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-mid);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggest-dur {
  flex-shrink: 0;
  font-family: var(--grotesque);
  font-size: 0.62rem;
  color: var(--gray-mid);
}

/* Group heads inside the dropdown: presentational, not options */
.suggest-group-head {
  padding: 8px 14px 5px;
  font-family: var(--grotesque);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-deep);
  border-bottom: 1px solid var(--hairline);
}

/* Artist rows: circular initial monogram (iTunes gives artists no artwork) */
.suggest-monogram {
  border-radius: 50%;
  color: var(--accent-deep);
  border-color: var(--accent-deep);
  background: var(--accent-dim);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
}
/* …or a circular Deezer portrait when the record carries one */
.suggest-artist-photo,
.suggest-artist-photo img { border-radius: 50%; }
.suggest-artist-arrow { color: var(--accent); }

/* Artist chips above the plain-Enter results list */
.artist-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 0 18px;
}
.artist-strip-label {
  font-family: var(--grotesque);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gray-mid);
  margin-right: 6px;
}
.artist-chip {
  max-width: min(100%, 24rem);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Exact artist-name match: the first, full-width result rather than a chip. */
.artist-top-card {
  align-items: center;
  gap: 22px;
  margin-bottom: 18px;
  padding: 20px 38px 20px 20px;
  border: 1px solid var(--hairline);
  background: linear-gradient(120deg, var(--accent-dim), transparent 72%);
}
.artist-top-art,
.artist-page-art {
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--accent-deep);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-dim);
  color: var(--accent-deep);
  font-family: var(--serif);
  font-weight: 600;
}
.artist-top-art { width: 72px; height: 72px; font-size: 1.7rem; }
.artist-top-art img,
.artist-page-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.artist-top-label,
.artist-page-eyebrow {
  display: block;
  font-family: var(--grotesque);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 7px;
}
.artist-top-name {
  display: -webkit-box;
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.35;
  color: var(--ink);
  max-height: 2.7em;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.artist-results-songs-head { margin-top: 28px; }

/* ─── Artist page ───────────────────────────────────────────────────────── */
#screenArtist { padding-top: 56px; }
.artist-page-header {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 12px 0 40px;
  border-bottom: 1px solid var(--hairline);
}
.artist-page-art { width: 112px; height: 112px; font-size: 2.5rem; }
.artist-page-copy { min-width: 0; }
.artist-page-title {
  display: -webkit-box;
  font-family: var(--serif);
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--ink);
  max-height: 3.6em;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.artist-page-genre {
  margin-top: 12px;
  font-family: var(--grotesque);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-mid);
}
.artist-section { margin-top: 54px; }
.artist-section-title { margin: 0 0 8px; }
.artist-empty {
  padding: 22px 6px;
  font-family: var(--grotesque);
  font-size: 0.7rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--gray-mid);
}
.artist-album { border-bottom: 1px solid var(--hairline); }
.album-toggle {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 16px 8px 16px 6px;
  border: none;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s var(--ease-out);
}
.album-toggle:focus-visible,
.album-toggle.kbd-active { background: var(--accent-dim); outline: none; transform: translateX(6px); }
@media (hover: hover) and (pointer: fine) {
  .album-toggle:hover { background: var(--accent-dim); transform: translateX(6px); }
}
.album-toggle.kbd-active,
.album-toggle.kbd-leaving,
.album-toggle:focus-visible { transition: none; }
.album-toggle.album-loading { cursor: wait; opacity: 0.62; }
.album-art { width: 64px; height: 64px; }
.album-indicator {
  flex-shrink: 0;
  width: 22px;
  color: var(--accent);
  font-family: var(--grotesque);
  font-size: 1.1rem;
  text-align: center;
}
.album-tracklist {
  margin: 0 0 18px 28px;
  padding-left: 22px;
  border-left: 1px solid var(--hairline);
}
.album-tracklist[hidden] { display: none; }
.album-tracklist .result-art { width: 40px; height: 40px; }
.album-tracklist .result-row { padding-top: 13px; padding-bottom: 13px; }
.album-empty { padding-left: 0; }
.artist-db-action { margin-top: 52px; }

/* Entrance animation only when motion is welcome (matches the rest of the app). */
@media (prefers-reduced-motion: no-preference) {
  .suggest-box { animation: fadeIn 0.14s var(--ease-out); }
}

/* ─── Song-header album artwork (from a suggestion/result) ─────────────────── */
.song-artwork {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--hairline);
  align-self: flex-start;
}

/* ─── Saved phrase notebook — a washi sheet on the night desk (E3) ────────── */
#screenNotebook {
  background: var(--washi);
  padding: 40px 44px 48px;
  margin-top: 56px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.5);
}
/* focus on paper: moonlight is invisible here — the seal takes over */
.sidebar :focus-visible, #screenNotebook :focus-visible { outline-color: var(--shu); }
.notebook-head {
  padding-bottom: 20px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--washi-line);
}

.notebook-back,
.notebook-delete,
.notebook-source-link {
  background: none;
  border: none;
  color: var(--paper-mid);
  cursor: pointer;
  font-family: var(--grotesque);
}

.notebook-back {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 28px;
  transition: color 0.15s, transform 0.16s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .notebook-back:hover { color: var(--shu); }
}

.notebook-title-row {
  display: flex;
  align-items: flex-end;
  gap: 24px;
}

.notebook-title {
  flex: 1;
  color: var(--sumi);
  font-family: 'Klee One', var(--serif);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.notebook-export { margin-top: 0; border-color: var(--concrete); color: var(--concrete); }
.notebook-export:disabled { opacity: 0.35; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .notebook-export:disabled:hover { background: none; border-color: var(--accent-deep); color: var(--accent-deep); }
}

.notebook-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  padding-top: 10px;
}
.notebook-list[hidden] { display: none; }

.notebook-row {
  /* a collected strip, pinned to the page */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--washi-2);
  border: 1px solid var(--washi-line);
  border-top: 3px solid var(--shu);
  padding: 14px 14px 12px;
  transition: background 0.15s;
}

@media (hover: hover) and (pointer: fine) {
  .notebook-row:hover { background: #F6F2E5; }
}
.notebook-row-main { flex: 1; min-width: 0; }

.notebook-surface {
  font-family: 'Klee One', var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--sumi);
  line-height: 1.5;
}

.notebook-reading {
  min-height: 1em;
  margin-top: 4px;
  color: var(--shu);
  font-family: var(--grotesque);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
}

.notebook-meaning {
  margin-top: 10px;
  color: var(--paper-text);
  font-family: var(--grotesque);
  font-size: 0.78rem;
  font-weight: 300;
  line-height: 1.7;
}

.notebook-source {
  display: inline-block;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--washi-line);
  color: var(--paper-mid);
  font-family: var(--grotesque);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  text-align: left;
}

.notebook-source-link { border-bottom: 1px solid var(--washi-line); }
@media (hover: hover) and (pointer: fine) {
  .notebook-source-link:hover { color: var(--shu); border-color: var(--shu); }
}

.notebook-delete {
  flex-shrink: 0;
  align-self: flex-end;
  margin-top: 10px;
  border: 1px solid var(--washi-line);
  padding: 6px 9px;
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.15s, border-color 0.15s, transform 0.16s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .notebook-delete:hover { color: var(--tobicha); border-color: var(--tobicha); }
}

.notebook-empty {
  padding: 56px 0;
  color: var(--paper-text);
  font-family: var(--grotesque);
  font-size: 0.74rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1.9;
}

.notebook-empty[hidden] { display: none; }

/* ─── Results group head ─────────────────────────────────────────────────── */
.results-group-head {
  font-family: var(--grotesque);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 36px 0 6px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.results-group-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.results-group-head:first-child { margin-top: 0; }

/* ─── Song header — the title hangs from a tanzaku (E2 graft) ─────────────── */
.song-header {
  position: relative;
  margin-bottom: 72px;
  padding-bottom: 36px;
  padding-left: 46px;
  border-bottom: 1px solid var(--hairline);
}

.song-header::before {
  content: '歌';
  position: absolute;
  left: 0;
  top: 2px;
  writing-mode: vertical-rl;
  font-family: 'Klee One', var(--serif);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--sumi);
  background: var(--washi);
  padding: 10px 6px 8px;
  border-bottom: 3px solid var(--shu);
}

.song-title {
  font-family: 'Klee One', var(--serif);
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 14px;
}

.song-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--grotesque);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 18px;
}

.eyebrow-rule {
  width: 28px;
  height: 1px;
  background: var(--accent-deep);
  flex-shrink: 0;
}

.hint-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
}

.hint-bar span {
  font-family: var(--grotesque);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-mid);
}

.hint-bar em {
  font-style: normal;
  color: var(--accent-deep);
}

/* ─── Song difficulty badge ──────────────────────────────────────────────── */
.song-difficulty {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 22px;
  font-family: var(--grotesque);
}

.song-difficulty[hidden] { display: none; }

.diff-label {
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gray-mid);
}

.diff-level {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent-deep);
  border: 1px solid var(--accent-deep);
  padding: 2px 8px;
}

.diff-detail {
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--gray-mid);
}

/* ─── Lyrics ─────────────────────────────────────────────────────────────── */
.lyrics {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Soft relayout: furigana / translation toggles dip opacity while lines re-wrap */
  transition: opacity 0.12s var(--ease-out);
}
.lyrics.relayout-fade { opacity: 0; }

.section { margin-bottom: 72px; }

.section-label::before {
  content: '';
  width: 7px;
  height: 17px;
  flex-shrink: 0;
  /* a miniature tanzaku: paper strip, vermillion seal at its foot */
  background: linear-gradient(to top, var(--shu) 0 4px, var(--ink) 4px);
  opacity: 0.85;
}

.section-label {
  font-family: var(--grotesque);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gray-mid);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.section-label::after {
  content: '';
  flex: 1;
  max-width: 48px;
  height: 1px;
  background: var(--hairline);
}

.lyric-line {
  display: block;
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  font-weight: 300;
  line-height: 2.9;
  letter-spacing: 0.05em;
  padding: 0 4px;
  margin: 0 -4px;
}

/* Whole-line translation sub-line (訳 / TR toggle). Hidden by default; the
   body.show-translation class reveals it. Subdued grotesque, no ruby. */
.line-tr {
  display: none;
  font-family: var(--grotesque);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--gray-mid);
  padding: 0 4px;
  margin: -1.15em -4px 0.7em;
}

body.show-translation .line-tr { display: block; }

/* Pending (not-yet-annotated) stanza: plain text + shimmer */
.section.pending .lyric-line {
  color: var(--gray-mid);
  cursor: default;
}

.pending-label { color: var(--accent-deep); }

.pending-bar {
  display: inline-block;
  position: relative;
  overflow: hidden;
  width: 64px;
  height: 1px;
  background: var(--hairline);
}

.pending-bar::after {
  content: '';
  position: absolute;
  top: 0; left: -40%;
  width: 40%;
  height: 100%;
  background: var(--accent);
}

/* Failed stanza: inline error chip with retry */
.annot-error {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--tobicha);
  padding: 6px 6px 6px 14px;
  margin-bottom: 20px;
  font-family: var(--grotesque);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.retry-btn {
  background: var(--ink);
  color: var(--concrete);
  border: none;
  cursor: pointer;
  font-family: var(--grotesque);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 14px;
  transition: background 0.15s, color 0.15s, transform 0.16s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .retry-btn:hover { background: var(--accent); color: var(--concrete); }
}

/* ─── Ruby / Furigana ────────────────────────────────────────────────────── */
ruby { ruby-align: center; }

rt {
  font-family: var(--grotesque);
  font-size: 0.5em;
  color: var(--accent-deep);
  letter-spacing: 0.05em;
  font-weight: 400;
}

body.no-furigana rt { display: none; }

/* ─── Spans ──────────────────────────────────────────────────────────────── */
.w {
  cursor: pointer;
  padding: 0 2px;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

@media (hover: hover) and (pointer: fine) {
  .w:hover {
    background: var(--accent-dim);
    box-shadow: 0 1px 0 0 var(--ink);
  }
}

.w.selected {
  background: var(--accent-hot);
  color: var(--ink);
  box-shadow: 0 1px 0 0 var(--accent);
  outline: 1px solid var(--accent);
}

.w.selected rt { color: var(--accent-deep); }

.w.scat {
  color: var(--gray-mid);
  letter-spacing: 0.14em;
  cursor: pointer;
}

/* Ambiguous reading marker */
.w.ambiguous ruby:last-of-type rt::after {
  content: ' *';
  color: var(--accent-deep);
  font-size: 0.85em;
}

/* ─── Sidebar — the lamp-lit page (E3): washi panel in the night room ────── */
.sidebar {
  width: 0;
  overflow: hidden;
  flex-shrink: 0;
  /* width (layout) animation kept deliberately: the pane recentering is the
     design; kept short to bound reflow cost */
  transition: width 0.28s var(--ease-out);
  background: var(--washi);
  position: sticky;
  top: 0;
  height: calc(100vh - 64px);
  height: calc(100dvh - 64px);
}

.sidebar.open {
  width: var(--sidebar-w);
  /* paper against night needs no border — one long architectural shadow */
  box-shadow: -48px 0 96px rgba(0,0,0,0.45);
}

.sidebar-scroll {
  width: var(--sidebar-w);
  height: 100%;
  overflow-y: auto;
  /* Horizontal padding grows with the pane so the text column stays
     visually centred instead of stretching edge to edge. */
  padding: 44px clamp(32px, 3vw, 46px) 72px;
  color: var(--paper-text);
}

.sidebar-scroll::-webkit-scrollbar { width: 3px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--washi-line); }

/* grab handle — mobile bottom sheet only */
.sb-handle { display: none; }

.sb-close {
  background: none;
  border: 1px solid var(--washi-line);
  color: var(--paper-mid);
  width: 28px; height: 28px;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  float: right;
  transition: border-color 0.15s, color 0.15s, transform 0.16s var(--ease-out);
  font-family: var(--grotesque);
}

@media (hover: hover) and (pointer: fine) {
  .sb-close:hover { border-color: var(--shu); color: var(--shu); }
}

.sb-surface {
  font-family: 'Klee One', var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--sumi);
  letter-spacing: 0.08em;
  line-height: 1.5;
  margin: 40px 0 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--washi-line);
}

.sb-save {
  display: block;
  margin: -12px 0 30px;
}

.sidebar .sb-save { border-color: var(--concrete); color: var(--concrete); }
.sb-save.saved { background: var(--shu); border-color: var(--shu); color: var(--ink); }
.sb-save.saved::before { content: 'み '; font-family: 'Klee One', var(--serif); }
.sb-save[hidden] { display: none; }

.notebook-notice {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: 24px;
  max-width: calc(100vw - 48px);
  transform: translate(-50%, 8px);
  border: 1px solid var(--accent);
  background: var(--shadow-vol);
  color: var(--pale);
  padding: 10px 16px;
  font-family: var(--grotesque);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
}

.notebook-notice.visible { opacity: 1; transform: translate(-50%, 0); }

.sb-block { margin-bottom: 30px; }

.sb-label {
  font-family: var(--grotesque);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--concrete);   /* on paper the accent is 勝色, not moonlight */
  margin-bottom: 9px;
}

.sb-label-en {
  color: var(--paper-mid);
  font-size: 0.92em;
  letter-spacing: 0.24em;
}

.sb-text {
  font-family: var(--grotesque);
  font-size: 0.78rem;
  line-height: 1.9;
  color: var(--paper-text);
  font-weight: 300;
  letter-spacing: 0.03em;
}

.sb-text strong { color: var(--sumi); font-weight: 500; }

/* Ambiguous alternatives block */
.sb-alts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.sb-alt-tag {
  font-family: var(--grotesque);
  font-size: 0.66rem;
  font-weight: 400;
  padding: 3px 10px;
  border: 1px solid var(--washi-line);
  color: var(--paper-mid);
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, transform 0.16s var(--ease-out);
}

.sb-alt-tag.primary {
  border-color: var(--concrete);
  color: var(--concrete);
}

@media (hover: hover) and (pointer: fine) {
  .sb-alt-tag:hover { border-color: var(--sumi); color: var(--sumi); }
}

/* Register + JLPT tags: hairline chips near the top of an annotation. */
.sb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.sb-tag {
  font-family: var(--serif);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  padding: 2px 9px;
  border: 1px solid var(--washi-line);
  color: var(--paper-mid);
}

.sb-tag.jlpt {
  font-family: var(--grotesque);
  letter-spacing: 0.12em;
  color: var(--shu);
  border-color: var(--shu);
}

/* Literary usage gets a distinct warm hue — it reads as "song-only". */
.sb-tag.reg-literary {
  color: var(--tobicha);
  border-color: var(--tobicha);
}

.sb-caution {
  font-family: var(--grotesque);
  font-size: 0.68rem;
  line-height: 1.6;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--tobicha);
  border-left: 2px solid var(--tobicha);
  padding-left: 12px;
  margin-bottom: 26px;
}

/* ─── Motion — only for those who want it ─────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .loading-bar::after { animation: slide 1.2s infinite var(--ease-in-out); }
  .pending-bar::after { animation: slide 1.2s infinite var(--ease-in-out); }
  .section.annotated { animation: riseIn 0.4s var(--ease-out); }
  .section.annotated .lyric-line { animation: riseIn 0.45s var(--ease-out) backwards; }
  .hero { animation: fadeIn 0.6s var(--ease-out); }
  .hero > * { animation: riseIn 0.5s var(--ease-out) backwards; }
  .hero > *:nth-child(1) { animation-delay: 0.05s; }
  .hero > *:nth-child(2) { animation-delay: 0.12s; }
  .hero > *:nth-child(3) { animation-delay: 0.2s; }
  .hero > *:nth-child(4) { animation-delay: 0.26s; }
  .hero > *:nth-child(5) { animation-delay: 0.32s; }
  #sbBody.fade, .sb-surface.fade { animation: fadeIn 0.12s var(--ease-out); }
  .screen.active { animation: fadeIn 0.3s var(--ease-out); }
  .result-row { animation: riseIn 0.4s var(--ease-out) backwards; }
  .results-group-head { animation: fadeIn 0.4s var(--ease-out) backwards; }
  .song-header { animation: riseIn 0.5s var(--ease-out); }
  .sb-placeholder { animation: fadeIn 0.4s var(--ease-out); }
  .notebook-count.pop { animation: badgePop 0.25s var(--ease-out); }

  /* Press feedback — controls compress slightly under the finger. */
  .search-btn:active:not(:disabled),
  .mode-btn:active:not(:disabled),
  .pref-btn:active:not(:disabled),
  .notebook-nav:active:not(:disabled),
  .file-btn:active:not(:disabled),
  .recent-clear:active:not(:disabled),
  .recent-chip:active:not(:disabled),
  .starter-level-card:active:not(:disabled),
  .song-share:active:not(:disabled),
  .retry-btn:active:not(:disabled),
  .notebook-back:active:not(:disabled),
  .notebook-delete:active:not(:disabled),
  .results-action:active:not(:disabled),
  .sb-close:active:not(:disabled),
  .sb-alt-tag:active:not(:disabled),
  .sync-btn:active:not(:disabled),
  .sync-load-btn:active:not(:disabled),
  .sync-nudge:active:not(:disabled),
  .sync-close:active:not(:disabled),
  .song-listen:active { transform: scale(0.97); }

  /* Clear (✕) buttons: preserve the centering translate while pressed. */
  .clear-btn:active:not(:disabled) { transform: translateY(-50%) scale(0.97); }
  .clear-btn.header-clear:active:not(:disabled) { transform: scale(0.97); }

  /* Wide / full-width pressables travel less. */
  .hero-submit:active:not(:disabled),
  .daily-card:active:not(:disabled),
  .starter-song-row:active:not(:disabled),
  .studied-row:active:not(:disabled),
  .result-row:active:not(:disabled):not(.row-disabled),
  .album-toggle:active:not(:disabled),
  .suggest-row:active { transform: scale(0.99); }

  /* On pointer devices the hover indent is still active during press —
     compose indent + press, same pattern as .clear-btn translateY(-50%) scale(0.97). */
  @media (hover: hover) and (pointer: fine) {
    .studied-row:hover:active:not(:disabled) { transform: translateX(6px) scale(0.99); }
    .starter-song-row:hover:active:not(:disabled) { transform: translateX(4px) scale(0.99); }
    .result-row:hover:active:not(:disabled):not(.row-disabled) { transform: translateX(6px) scale(0.99); }
    .album-toggle:hover:active:not(:disabled) { transform: translateX(6px) scale(0.99); }
  }
}

/* ─── Persistent study panel — desktop two-column learning page ──────────── */
@media (min-width: 769px) {
  /* Widen via the shared var so the header's Load tab (which aligns its left
     edge to the pane) follows automatically. */
  body.studying { --sidebar-w: clamp(400px, 33vw, 500px); }
  body.studying .sidebar {
    width: var(--sidebar-w);
    box-shadow: -48px 0 96px rgba(0,0,0,0.45);
  }
  body.studying .content-area .lyrics-pane {
    max-width: 760px;
    margin: 0 auto;
  }
}

.sb-surface:empty { display: none; }

.sb-placeholder {
  min-height: calc(100vh - 240px);
  min-height: calc(100dvh - 240px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  text-align: center;
}

.sb-ph-mark {
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 600;
  color: var(--washi-line);
  border: 1px solid var(--washi-line);
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sb-ph-text {
  font-family: var(--grotesque);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 2.2;
  color: var(--paper-mid);
  white-space: pre-line;
}

/* Mobile: placeholder is pointless inside a tap-to-open overlay */
@media (max-width: 768px) {
  .sb-placeholder { display: none !important; }
}

/* ─── Form-tie holes — Ando's concrete formwork marks ────────────────────── */
.form-ties {
  position: fixed;
  bottom: 48px;
  left: 28px;
  opacity: 0.15;
  pointer-events: none;
}

/* ─── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  header { padding: 0 14px 0 20px; }
  .site-title { padding-right: 18px; }
  .site-title .en { display: none; }
  .mode-toggle { margin: 0 6px 0 8px; padding-right: 6px; }
  .mode-btn { padding: 6px 5px; font-size: 0.6rem; letter-spacing: 0.08em; }
  .search-form, .paste-area-wrapper { padding-left: 0; min-width: 0; }
  .search-input { min-width: 80px; width: 100%; }
  .paste-input { min-width: 80px; width: 100%; }
  .search-btn { padding: 0 14px; margin-left: 8px; letter-spacing: 0.12em; }
  .header-prefs { padding-left: 8px; gap: 0; }
  .notebook-nav { margin-right: 3px; padding: 6px 5px; letter-spacing: 0.08em; }
  .pref-btn { padding: 6px 5px; }
  .pref-btn.furi { margin-left: 2px; }

  /* Once content is loaded the compact inputs appear; wrap the header into
     two rows so the fixed-shrink items never push past the viewport:
     row 1 = title · mode toggle · prefs, row 2 = input · load button. */
  body.has-content header {
    flex-wrap: wrap;
    height: auto;
    align-items: center;
    padding-top: 6px;
    padding-bottom: 10px;
    row-gap: 4px;
  }
  body.has-content header .site-title { order: 0; }
  body.has-content header .mode-toggle { order: 1; }
  body.has-content header .header-prefs { order: 2; }
  /* flex-basis larger than the space left on row 1 forces the wrap */
  body.has-content header .search-form,
  body.has-content header .paste-area-wrapper { order: 3; flex: 1 1 220px; }
  body.has-content header .search-btn { order: 4; height: 40px; }
  .hint-bar { max-width: 100%; }
  .hint-bar span { min-width: 0; }
  .song-title { overflow-wrap: anywhere; }

  .lyrics-pane { padding: 36px 24px 100px; max-width: none; }
  .content-area.sidebar-open .lyrics-pane {
    max-width: none;
    padding-bottom: calc(45vh + 100px);
    padding-bottom: calc(45dvh + 100px);
  }

  #screenEmpty.active { padding: 24px 0 48px; }
  .hero { max-width: none; }
  .hero-title { font-size: 2rem; }
  .hero-mode { margin-top: 40px; }
  .hero-input, .hero-textarea { padding: 14px 16px; }
  #screenNotebook { padding: 26px 18px 36px; margin-top: 28px; }
  #screenArtist { padding-top: 30px; }
  .artist-top-card { gap: 16px; padding: 16px 34px 16px 14px; }
  .artist-top-art { width: 58px; height: 58px; font-size: 1.35rem; }
  .artist-top-name { font-size: 1.2rem; }
  .artist-page-header { gap: 20px; padding-bottom: 30px; }
  .artist-page-art { width: 82px; height: 82px; font-size: 1.9rem; }
  .artist-page-title { font-size: 2rem; }
  .artist-section { margin-top: 42px; }
  .album-toggle { gap: 14px; }
  .album-art { width: 54px; height: 54px; }
  .album-tracklist { margin-left: 12px; padding-left: 12px; }
  .notebook-title-row { align-items: flex-start; }
  .notebook-export { padding: 7px 10px; }
  .notebook-row { gap: 14px; }

  .sidebar {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    height: 45vh;
    height: 45dvh;
    border: none;
    box-shadow: none;
    pointer-events: none;
    transform: translateY(100%);
  }
  @media (prefers-reduced-motion: no-preference) {
    .sidebar { transition: transform 0.4s var(--ease-drawer); }
  }
  .sidebar.open {
    width: 100%;
    border: none;
    border-top: 2px solid var(--shu);
    box-shadow: none;
    pointer-events: auto;
    transform: translateY(0);
  }
  .sidebar-scroll { width: 100%; height: 100%; padding: 32px 24px 72px; }

  .sb-handle {
    /* generous hit area overlaying the sheet's 32px top padding */
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    touch-action: none;
    cursor: grab;
    z-index: 1;
  }
  .sb-handle::before {
    /* the pill bar */
    content: '';
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--shadow-mid);
  }
  /* 1:1 finger tracking — inline transform must not be eased */
  .sidebar.dragging { transition: none; }

  .form-ties { display: none; }
}

/* ─── Listen links + Sync toggle (song header actions) ────────────────────── */
.song-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 26px;
}
.song-actions[hidden] { display: none; }

.listen-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.listen-label {
  font-family: var(--grotesque);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray-mid);
  margin-right: 4px;
}

.song-listen {
  font-family: var(--grotesque);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  text-decoration: none;
  border: 1px solid var(--hairline);
  padding: 6px 12px;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .song-listen:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--concrete);
  }
}

.sync-btn {
  background: none;
  border: 1px solid var(--accent-deep);
  color: var(--accent-deep);
  cursor: pointer;
  font-family: var(--grotesque);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 16px;
  transition: background 0.15s, color 0.15s, transform 0.16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .sync-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--concrete); }
}
.sync-btn.active { background: var(--accent); border-color: var(--accent); color: var(--concrete); }

/* ─── Karaoke follow: highlighted line ───────────────────────────────────── */
.lyric-line { transition: background 0.25s ease, box-shadow 0.25s ease; border-radius: 2px; }
.lyric-line.sync-active {
  background: var(--accent-dim);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ─── Karaoke follow: docked player bar ──────────────────────────────────── */
.sync-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin-top: 48px;
  background: var(--concrete2);
  border: 1px solid var(--hairline);
  border-bottom: none;
  box-shadow: 0 -18px 40px rgba(0,0,0,0.4);
}

.sync-bar-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 18px;
}

.sync-setup {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sync-hint {
  font-family: var(--grotesque);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-mid);
}

.sync-input-row { display: flex; gap: 8px; }

.sync-url-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 1px solid var(--gray-mid);
  outline: none;
  font-family: var(--grotesque);
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: 0.03em;
  caret-color: var(--accent);
  padding: 9px 12px;
  transition: border-color 0.15s;
}
.sync-url-input:focus { border-color: var(--accent-deep); box-shadow: 0 0 0 1px var(--accent-deep); }
.sync-url-input::placeholder { color: var(--gray-mid); opacity: 0.8; }

.sync-load-btn {
  flex-shrink: 0;
  background: var(--ink);
  color: var(--concrete);
  border: none;
  cursor: pointer;
  font-family: var(--grotesque);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0 18px;
  transition: background 0.15s, color 0.15s, transform 0.16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .sync-load-btn:hover { background: var(--accent); }
}

.sync-error {
  font-family: var(--grotesque);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--tobicha);
}
.sync-error[hidden] { display: none; }
.sync-watch-link { color: var(--accent-deep); text-decoration: none; margin-left: 6px; }
@media (hover: hover) and (pointer: fine) {
  .sync-watch-link:hover { text-decoration: underline; }
}

.sync-player {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 20px;
}
.sync-player[hidden] { display: none; }

.sync-yt-mount {
  flex-shrink: 0;
  width: 204px;
  height: 115px;
  background: #000;
  border: 1px solid var(--hairline);
}
.sync-yt-mount iframe { display: block; width: 100%; height: 100%; }

.sync-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sync-nudge {
  background: none;
  border: 1px solid var(--hairline);
  color: var(--accent-deep);
  cursor: pointer;
  font-family: var(--grotesque);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 8px 12px;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .sync-nudge:hover { background: var(--accent); border-color: var(--accent); color: var(--concrete); }
}

.sync-offset {
  font-family: var(--grotesque);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gray-mid);
  min-width: 44px;
  text-align: center;
}

.sync-close {
  flex-shrink: 0;
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--gray-mid);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 6px 8px;
  transition: color 0.15s, transform 0.16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .sync-close:hover { color: var(--ink); }
}

@media (max-width: 768px) {
  .sync-bar-inner { flex-wrap: wrap; gap: 12px; }
  .sync-player { flex-wrap: wrap; gap: 12px; }
  .sync-yt-mount { width: 160px; height: 90px; }
  .sync-close { align-self: center; margin-left: auto; }
}

/* Honour reduced-motion for programmatic scrolling too. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lyric-line { transition: none; }

  /* FIX 5 — Desktop panel layout transitions are full-viewport positional shifts;
     reduced-motion users opt out of these (mobile drawer is already gated). */
  .lyrics-pane { transition: outline-color 0.15s; }
  .sidebar { transition: none; }

  /* FIX 4 — Press acknowledged via opacity when motion is reduced.
     Mirrors the :active selector groups from the no-preference block above. */
  .search-btn:active:not(:disabled),
  .mode-btn:active:not(:disabled),
  .pref-btn:active:not(:disabled),
  .notebook-nav:active:not(:disabled),
  .file-btn:active:not(:disabled),
  .recent-clear:active:not(:disabled),
  .recent-chip:active:not(:disabled),
  .starter-level-card:active:not(:disabled),
  .song-share:active:not(:disabled),
  .retry-btn:active:not(:disabled),
  .notebook-back:active:not(:disabled),
  .notebook-delete:active:not(:disabled),
  .results-action:active:not(:disabled),
  .sb-close:active:not(:disabled),
  .sb-alt-tag:active:not(:disabled),
  .sync-btn:active:not(:disabled),
  .sync-load-btn:active:not(:disabled),
  .sync-nudge:active:not(:disabled),
  .sync-close:active:not(:disabled),
  .song-listen:active,
  .clear-btn:active:not(:disabled),
  .clear-btn.header-clear:active:not(:disabled),
  .hero-submit:active:not(:disabled),
  .daily-card:active:not(:disabled),
  .starter-song-row:active:not(:disabled),
  .studied-row:active:not(:disabled),
  .result-row:active:not(:disabled):not(.row-disabled),
  .album-toggle:active:not(:disabled),
  .suggest-row:active { opacity: 0.75; }
}