/* Psalmspelaren: väljare, notrulle, text och reglage. Allt scopat till .psalm.
   Färger och mått kommer från css/tokens.css. */

/* ---------- välj psalm ---------- */
.psalm > .eyebrow{margin-bottom:var(--space-4)}
.psalm .picker{margin-bottom:var(--space-4)}
.psalm .picker label{
  display:block;margin-bottom:var(--space-2);
  font-family:var(--font-display);font-size:var(--eyebrow-size);line-height:var(--eyebrow-line);
  font-weight:500;letter-spacing:var(--eyebrow-track);text-transform:uppercase;
  color:var(--text-muted);
}
.psalm .selwrap{position:relative}
.psalm .selwrap select{
  width:100%;-webkit-appearance:none;appearance:none;
  background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--text);font-family:var(--font-text);font-size:var(--body-size);
  min-height:52px;padding:0 var(--space-5) 0 var(--space-3);
  cursor:pointer;transition:border-color .15s;
}
.psalm .selwrap select:hover{border-color:var(--accent-text)}
.psalm .selwrap select option{background:var(--bg-panel);color:var(--text)}
.psalm .selwrap::after{
  content:"";position:absolute;right:var(--space-3);top:50%;width:8px;height:8px;
  border-right:1.5px solid var(--wood);border-bottom:1.5px solid var(--wood);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
}

.psalm .loadrow{
  display:flex;gap:var(--space-3);align-items:center;
  margin-top:var(--space-3);flex-wrap:wrap;
}
.psalm .fbtn{
  display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-4);
  border:1px solid var(--line);border-radius:var(--radius-pill);
  font-family:var(--font-display);font-size:15px;font-weight:500;
  color:var(--text-muted);cursor:pointer;transition:border-color .15s,color .15s;
}
.psalm .fbtn:hover{border-color:var(--accent-text);color:var(--accent-text)}
.psalm #loadmsg{font-size:var(--small-size);color:var(--text-muted)}
.psalm #loadmsg.err{color:var(--danger)}

/* ---------- rubrik ---------- */
.psalm h1{
  margin:0;font-family:var(--font-display);font-weight:600;
  font-size:var(--display-size);line-height:var(--display-line);
  letter-spacing:var(--display-track);color:var(--text);
}
.psalm .credit{
  margin:var(--space-2) 0 var(--space-4);
  font-size:var(--small-size);line-height:var(--small-line);color:var(--text-muted);
}
.psalm .credit b{color:var(--text);font-weight:500}

/* ---------- notrullen ---------- */
.psalm canvas{display:block;width:100%;height:56vh;min-height:380px;max-height:540px}

/* ---------- texten ---------- */
.psalm .lyric{margin:var(--space-4) 0 var(--space-1);min-height:128px}
.psalm .vlabel{
  min-height:16px;margin-bottom:var(--space-2);
  font-family:var(--font-display);font-size:var(--eyebrow-size);line-height:var(--eyebrow-line);
  font-weight:500;letter-spacing:var(--eyebrow-track);text-transform:uppercase;
  color:var(--wood);
}
.psalm .line{font-size:var(--lead-size);line-height:var(--lead-line)}
.psalm .line.next{font-size:var(--body-size);line-height:var(--body-line);
                  color:var(--text-muted);margin-top:var(--space-1)}
.psalm .syl{color:var(--text-muted);transition:color .12s linear}
.psalm .syl.sung{color:var(--text)}
.psalm .syl.now{color:var(--accent-text)}

/* ---------- transport ---------- */
.psalm .transport{
  display:flex;align-items:center;gap:var(--space-3);
  margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--line);
}
.psalm button{
  font-family:var(--font-display);font-size:15px;font-weight:500;cursor:pointer;
  background:none;color:var(--text-muted);
  border:1px solid var(--line);border-radius:var(--radius-pill);
  transition:border-color .15s,color .15s,background .15s;
}
.psalm button:hover:not(:disabled){border-color:var(--accent-text);color:var(--accent-text)}
.psalm button:disabled{opacity:.4;cursor:default}
.psalm #play{
  width:56px;height:56px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--accent-fill);border-color:transparent;color:var(--on-accent);
}
.psalm #play:hover:not(:disabled){background:var(--text);border-color:transparent;color:var(--bg)}
.psalm #play .icon{width:22px;height:22px;fill:currentColor;stroke:none}
.psalm .bar{flex:1}
.psalm .clock{
  flex:0 0 auto;font-family:var(--font-display);font-size:var(--small-size);
  font-variant-numeric:tabular-nums;color:var(--text-muted);
}

/* ---------- tonart och tempo ---------- */
.psalm .controls{
  display:grid;gap:var(--space-3);grid-template-columns:1fr;
  margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--line);
}
@media(min-width:560px){.psalm .controls{grid-template-columns:auto auto;justify-content:space-between}}
.psalm .row{display:flex;gap:var(--space-2);align-items:center}
.psalm .row>span{
  flex:0 0 auto;margin-right:var(--space-1);
  font-family:var(--font-display);font-size:var(--eyebrow-size);line-height:var(--eyebrow-line);
  font-weight:500;letter-spacing:var(--eyebrow-track);text-transform:uppercase;
  color:var(--text-muted);
}
.psalm .row button{min-width:44px;min-height:44px;padding:0 var(--space-3)}
.psalm .row button.on{border-color:var(--accent-text);color:var(--accent-text)}
.psalm #keyname{
  min-width:124px;text-align:center;
  font-family:var(--font-display);font-size:18px;font-weight:500;color:var(--text);
}
.psalm #keyname em{
  display:block;margin-top:2px;font-style:normal;
  font-size:var(--eyebrow-size);letter-spacing:var(--eyebrow-track);text-transform:uppercase;
  color:var(--text-muted);
}

/* ---------- mikrofon, midi och stämmare ---------- */
.psalm .voice{
  display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;
  margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--line);
}
.psalm .voice button{min-height:44px;padding:0 var(--space-4)}
.psalm .voice button.on,.psalm .voice button.on:hover{border-color:var(--text);color:var(--text)}
.psalm .voice button#midi.on,.psalm .voice button#midi.on:hover{
  border-color:var(--warn);color:var(--warn);
}
.psalm .tuner{display:flex;gap:var(--space-2);align-items:baseline;color:var(--text-muted)}
.psalm .tuner b{
  min-width:60px;display:inline-block;
  font-family:var(--font-display);font-size:22px;font-weight:500;color:var(--text);
}
.psalm .tuner em{
  font-style:normal;font-family:var(--font-display);
  font-size:var(--eyebrow-size);letter-spacing:var(--eyebrow-track);text-transform:uppercase;
  color:var(--text-muted);
}
.psalm .tuner.good b,.psalm .tuner.good em{color:var(--good)}
.psalm .tuner.near b,.psalm .tuner.near em{color:var(--warn)}

/* ---------- teckenförklaring ---------- */
.psalm .legend{
  display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-4);
  font-family:var(--font-display);font-size:var(--eyebrow-size);line-height:var(--eyebrow-line);
  font-weight:500;letter-spacing:var(--eyebrow-track);text-transform:uppercase;
  color:var(--text-muted);
}
.psalm .legend i{
  display:inline-block;width:18px;height:4px;margin-right:var(--space-2);
  vertical-align:middle;border-radius:var(--radius-pill);
}

/* ---------- verserna ---------- */
.psalm .verses{
  display:grid;gap:var(--space-4);grid-template-columns:1fr;
  margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--line);
}
@media(min-width:620px){.psalm .verses{grid-template-columns:1fr 1fr}}
.psalm .verses h2{
  margin:0 0 var(--space-2);font-family:var(--font-display);
  font-size:var(--eyebrow-size);line-height:var(--eyebrow-line);font-weight:500;
  letter-spacing:var(--eyebrow-track);text-transform:uppercase;color:var(--text-muted);
}
.psalm .verses p{margin:0;color:var(--text-muted)}
.psalm .src{margin-top:var(--space-4);font-size:var(--small-size);color:var(--text-muted)}

@media(prefers-reduced-motion:reduce){.psalm .syl{transition:none}}