/* ===========================================================
   Her Songbook — design tokens
   A hymnal read by candlelight: warm ink & gold on dark paper,
   a gold ribbon bookmark as the one signature motif.
   =========================================================== */

:root{
  color-scheme: dark;

  /* --- palette (dark, default) --- */
  --bg:            #14100D;
  --surface:       #1C1712;
  --surface-2:     #241D16;
  --hairline:      rgba(246,239,226,0.09);
  --hairline-2:    rgba(246,239,226,0.16);
  --ink:           #F6EFE2;
  --ink-soft:      #DCD0BA;
  --ink-faint:     #9C8F79;
  --gold:          #D6A03F;
  --gold-strong:   #E8B968;
  --gold-ink:      #2A1E08;
  --plum:          #C084AA;
  --teal:          #7FBBAC;
  --ember:         #D97A4B;
  --shadow:        0 18px 40px -18px rgba(0,0,0,0.55);
  --overlay:       rgba(10,8,6,0.62);

  /* --- type --- */
  --font-display: 'Fraunces', 'Iowan Old Style', ui-serif, Georgia, serif;
  --font-lyric:   'Literata', 'Iowan Old Style', ui-serif, Georgia, serif;
  --font-ui:      'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --lyric-size: 1.28rem;
  --lyric-leading: 1.66;

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 26px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

:root[data-theme="light"]{
  color-scheme: light;
  --bg:            #F6EFE2;
  --surface:       #FFFFFF;
  --surface-2:     #FBF3E3;
  --hairline:      rgba(32,26,19,0.09);
  --hairline-2:    rgba(32,26,19,0.16);
  --ink:           #221B12;
  --ink-soft:      #57493780;
  --ink-soft:      #5B4C38;
  --ink-faint:     #8B7B64;
  --gold:          #A9741F;
  --gold-strong:   #8A5D16;
  --gold-ink:      #FFF7E8;
  --plum:          #8C4C74;
  --teal:          #2E7566;
  --ember:         #B14C24;
  --shadow:        0 18px 34px -20px rgba(60,40,10,0.28);
  --overlay:       rgba(40,30,18,0.28);
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  transition: background .25s ease, color .25s ease;
}
button{ font-family: inherit; }
input,textarea{ font-family: inherit; }
svg{ display:block; fill: currentColor; width:20px; height:20px; }

/* subtle ambient grain so the dark surface doesn't look flat/plastic */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:.5;
  background-image: radial-gradient(rgba(246,239,226,0.035) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}
:root[data-theme="light"] body::before{ opacity:.35; }

.app{
  position:relative; z-index:1;
  max-width: 560px;
  margin: 0 auto;
  min-height: 100dvh;
  display:flex; flex-direction:column;
}

.view{ display:flex; flex-direction:column; min-height:100dvh; }

/* =========== LIBRARY =========== */
.library-header{
  padding: calc(20px + var(--safe-t)) 22px 14px;
}
.library-header-top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.eyebrow{
  margin:0 0 6px;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--gold);
  font-weight:600;
}
.theme-toggle{ margin-bottom:6px; flex:0 0 auto; }
.library-title{
  margin:0 0 18px;
  font-family: var(--font-display);
  font-weight:600;
  font-size: clamp(2.1rem, 9vw, 2.6rem);
  letter-spacing:-.01em;
  line-height:1.05;
}
.search-wrap{
  position:relative;
  display:flex; align-items:center;
}
.icon-search{
  position:absolute; left:16px; width:18px; height:18px;
  color: var(--ink-faint);
  pointer-events:none;
}
#search-input{
  width:100%;
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  color: var(--ink);
  border-radius: 999px;
  padding: 13px 16px 13px 44px;
  font-size: 1rem;
  outline:none;
  -webkit-appearance:none;
}
#search-input::placeholder{ color: var(--ink-faint); }
#search-input:focus{ border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); }
#search-input::-webkit-search-cancel-button{ filter: grayscale(1) opacity(.6); }

.progress-strip{
  margin: 0 22px 6px;
  display:flex; align-items:center; gap:10px;
}
.progress-track{
  flex:1; height:4px; border-radius:4px; background: var(--hairline-2); overflow:hidden;
}
.progress-fill{ height:100%; background: linear-gradient(90deg, var(--gold), var(--gold-strong)); border-radius:4px; transition: width .4s ease; }
.progress-label{ font-size:.72rem; color: var(--ink-faint); white-space:nowrap; font-variant-numeric: tabular-nums; }

.song-list{
  padding: 8px 14px 120px;
  flex:1;
}
.list-group-label{
  margin: 22px 10px 8px;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--ink-faint);
  font-weight:600;
  display:flex; align-items:center; gap:8px;
}
.list-group-label:first-child{ margin-top:6px; }

.song-card{
  position:relative;
  display:flex; align-items:center; gap:12px;
  width:100%;
  text-align:left;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: 13px 16px 13px 14px;
  margin-bottom:8px;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.song-card:active{ transform: scale(.985); background: var(--surface-2); }
.song-card.is-pinned{ border-color: color-mix(in srgb, var(--gold) 40%, var(--hairline)); }

.song-num{
  flex: 0 0 auto;
  width: 28px;
  font-family: var(--font-display);
  font-size: .95rem;
  color: var(--ink-faint);
  text-align:center;
}
.song-main{ flex:1; min-width:0; }
.song-title{
  font-family: var(--font-display);
  font-weight:600;
  font-size:1.06rem;
  color: var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.song-meta{
  margin-top:2px;
  font-size:.8rem;
  color: var(--ink-faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.song-key{
  flex:0 0 auto;
  font-size:.72rem;
  font-weight:600;
  color: var(--ink-soft);
  background: var(--surface-2);
  border:1px solid var(--hairline-2);
  padding:4px 9px;
  border-radius:999px;
  white-space:nowrap;
}
.song-card .ribbon{
  position:absolute; top:-3px; left:14px;
  width:14px; height:20px;
  background: var(--gold);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.35));
}
.mine-tag{
  flex:0 0 auto;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.06em;
  color: var(--gold-ink);
  background: var(--gold);
  padding:3px 7px;
  border-radius:6px;
  text-transform:uppercase;
}

.empty-state{
  margin: 40px 26px; text-align:center;
  color: var(--ink-faint);
  font-size:.95rem;
  line-height:1.5;
}

.fab{
  position: fixed;
  right: 22px;
  bottom: calc(24px + var(--safe-b));
  width:58px; height:58px;
  border-radius:50%;
  border:none;
  background: var(--gold);
  color: var(--gold-ink);
  box-shadow: var(--shadow);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  z-index:20;
  transition: transform .15s ease;
}
.fab svg{ width:24px; height:24px; }
.fab:active{ transform: scale(.92); }

/* =========== READER =========== */
.view-reader{ background: var(--bg); }
.reader-header{
  display:flex; align-items:flex-start; gap:10px;
  padding: calc(14px + var(--safe-t)) 12px 10px;
}
.icon-btn{
  flex:0 0 auto;
  width:40px; height:40px;
  border-radius:50%;
  border:none;
  background: transparent;
  color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:active{ background: var(--surface); }
.icon-btn.small{
  width:34px; height:34px; font-size:.82rem; font-weight:700;
  background: var(--surface); border:1px solid var(--hairline-2); color: var(--ink-soft);
  border-radius:10px;
}
.reader-title-wrap{ flex:1; min-width:0; padding-top:4px; text-align:center; }
.reader-title{
  margin:0; font-family: var(--font-display); font-weight:600;
  font-size:1.18rem; line-height:1.2;
}
.reader-subtitle{
  margin:3px 0 0; font-size:.78rem; color: var(--ink-faint);
}
.ribbon-btn svg{ transition: color .15s ease, transform .15s ease; color: var(--ink-faint); }
.ribbon-btn[aria-pressed="true"] svg{ color: var(--gold); transform: translateY(-1px); }

.reader-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 4px 16px 14px;
  flex-wrap:wrap;
}
.listen-btn{
  display:inline-flex; align-items:center; gap:9px;
  background: var(--surface);
  border:1px solid var(--hairline-2);
  color: var(--ink);
  font-size:.86rem; font-weight:600;
  padding: 9px 14px 9px 12px;
  border-radius:999px;
  cursor:pointer;
}
.listen-btn:active{ background: var(--surface-2); }
.eq{ display:inline-flex; align-items:flex-end; gap:2px; height:13px; }
.eq i{ width:3px; background: var(--gold); border-radius:2px; animation: eq 1.1s ease-in-out infinite; }
.eq i:nth-child(1){ height:40%; animation-delay:-.9s; }
.eq i:nth-child(2){ height:100%; animation-delay:-.4s; }
.eq i:nth-child(3){ height:65%; animation-delay:-1.1s; }
@keyframes eq{ 0%,100%{ transform: scaleY(.4);} 50%{ transform: scaleY(1);} }
@media (prefers-reduced-motion: reduce){ .eq i{ animation:none; } }

.reader-toolbar-right{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.role-legend{ display:flex; gap:8px; }
.role-dot{ display:flex; align-items:center; gap:4px; font-size:.68rem; color: var(--ink-faint); }
.role-dot::before{ content:""; width:7px; height:7px; border-radius:50%; background: var(--dot, var(--ink-faint)); }
.font-ctrl{ display:flex; gap:6px; }
.learned-btn svg{ width:17px; height:17px; color: var(--ink-faint); transition: color .15s ease; }
.learned-btn[aria-pressed="true"]{ background: color-mix(in srgb, var(--teal) 20%, var(--surface)); border-color: color-mix(in srgb, var(--teal) 50%, var(--hairline-2)); }
.learned-btn[aria-pressed="true"] svg{ color: var(--teal); }

.pages{
  flex:1;
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:none;
}
.pages::-webkit-scrollbar{ display:none; }

.page{
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: 6px 26px 30px;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}
.page-label-row{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-bottom:14px;
}
.page-label{
  font-family: var(--font-ui);
  font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--ink-faint);
}
.role-pill{
  font-size:.68rem; font-weight:700; letter-spacing:.03em;
  padding:3px 9px; border-radius:999px;
  border:1px solid var(--hairline-2);
  color: var(--pill-fg, var(--ink-soft));
  background: var(--pill-bg, transparent);
}
.role-pill.role-harmony,.role-pill.role-swap{ --pill-fg: var(--plum); border-color: color-mix(in srgb, var(--plum) 45%, var(--hairline-2)); }
.role-pill.role-unison{ --pill-fg: var(--teal); border-color: color-mix(in srgb, var(--teal) 45%, var(--hairline-2)); }
.role-pill.role-rap,.role-pill.role-spoken{ --pill-fg: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--hairline-2)); }
.repeat-pill{
  font-size:.68rem; font-weight:600; color: var(--ink-faint);
}
.section-note{
  margin: -6px 0 16px;
  font-size:.82rem; color: var(--ink-faint); font-style:italic;
}

.lyric-block{
  font-family: var(--font-lyric);
  font-size: var(--lyric-size);
  line-height: var(--lyric-leading);
  color: var(--ink);
}
.lyric-block p{ margin: 0 0 .5em; }
.lyric-block.role-harmony,.lyric-block.role-swap{ color: color-mix(in srgb, var(--plum) 88%, var(--ink)); }
.lyric-block.role-unison{ color: color-mix(in srgb, var(--teal) 88%, var(--ink)); }
.lyric-block.role-rap{ font-family: var(--font-ui); font-size: calc(var(--lyric-size) * .82); font-weight:500; }
.lyric-block.role-spoken{ font-style: italic; color: var(--ink-soft); }
.lyric-block.role-note{ color: var(--ink-faint); font-style: italic; font-size: calc(var(--lyric-size) * .82); }
.resp{
  color: var(--gold);
  font-style: italic;
}

.page-meta{
  margin-top:auto;
  padding-top:22px;
  font-size:.8rem;
  color: var(--ink-faint);
  border-top:1px solid var(--hairline);
}

.reader-footer{
  display:flex; align-items:center; justify-content:center; gap:18px;
  padding: 10px 20px calc(16px + var(--safe-b));
}
.page-nav{
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--hairline-2);
  background: var(--surface);
  color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.page-nav:disabled{ opacity:.3; }
.page-dots{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:center; max-width:220px; }
.page-dots .dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--hairline-2);
  transition: background .2s ease, transform .2s ease;
}
.page-dots .dot.active{ background: var(--gold); transform: scale(1.3); }

/* =========== ADD SHEET =========== */
.sheet-backdrop{
  position:fixed; inset:0; z-index:50;
  background: var(--overlay);
  display:flex; align-items:flex-end;
  backdrop-filter: blur(2px);
}
.sheet{
  width:100%;
  max-width:560px;
  margin:0 auto;
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  padding: 10px 22px calc(22px + var(--safe-b));
  max-height:88dvh;
  overflow-y:auto;
  box-shadow: 0 -20px 50px rgba(0,0,0,.4);
  animation: sheet-up .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes sheet-up{ from{ transform: translateY(24px); opacity:0; } to{ transform:none; opacity:1; } }
.sheet-handle{
  width:38px; height:4px; border-radius:4px; background: var(--hairline-2);
  margin: 6px auto 14px;
}
.sheet-title{ margin:0 0 6px; font-family: var(--font-display); font-size:1.4rem; font-weight:600; }
.sheet-hint{ margin:0 0 18px; color: var(--ink-faint); font-size:.86rem; line-height:1.5; }
.add-form{ display:flex; flex-direction:column; gap:14px; }
.field{ display:flex; flex-direction:column; gap:6px; flex:1; }
.field span{ font-size:.76rem; font-weight:600; color: var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; }
.field input, .field textarea{
  background: var(--surface-2);
  border:1px solid var(--hairline-2);
  border-radius: var(--radius-s);
  padding: 11px 13px;
  color: var(--ink);
  font-size:1rem;
  outline:none;
  resize: vertical;
}
.field textarea{ font-family: var(--font-lyric); line-height:1.5; }
.field input:focus, .field textarea:focus{ border-color: var(--gold); }
.field-row{ display:flex; gap:12px; }
.field-key{ flex: 0 0 90px; }
.sheet-actions{ display:flex; gap:10px; margin-top:4px; }
.btn{
  flex:1;
  padding: 13px;
  border-radius: 999px;
  border:none;
  font-size:.95rem;
  font-weight:700;
  cursor:pointer;
}
.btn-ghost{ background: transparent; border:1px solid var(--hairline-2); color: var(--ink-soft); }
.btn-primary{ background: var(--gold); color: var(--gold-ink); }
.btn-primary:active, .btn-ghost:active{ transform: scale(.98); }

/* =========== utility =========== */
[hidden]{ display:none !important; }

@media (min-width:560px){
  .app{ border-left:1px solid var(--hairline); border-right:1px solid var(--hairline); }
}