/* Learn › Psalm tones (js/learn-psalm-tones.js), on the choir's tokens */
.ln-mod[data-mod="psalm-tones"] {
  --ps-into: #9b8ac9; --ps-ten: var(--dim); --ps-flex: #5fb3a6; --ps-prep: #6fa8c8; --ps-acc: var(--rubric); --ps-cad: var(--gold); --ps-staff: color-mix(in srgb, var(--line) 80%, transparent);
}
.ps-wrap { max-width: 1100px; margin: 0 auto; padding: 18px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); }
.ps-view[hidden] { display: none; }
.ps-head { margin-bottom: 12px; }
.ps-kick { margin: 0; font: 13px var(--label); letter-spacing: 0.08em; text-transform: lowercase; color: var(--rubric); }
.ps-head h2 { margin: 2px 0 4px; font: 700 clamp(24px, 3vw, 32px)/1.1 var(--display); }
.ps-meta { margin: 0; color: var(--dim); }
.ps-meta a, .ps-note a, a.ps-go { color: var(--gold); }
.ps-controls { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 8px; }
.ps-controls label, .ps-btns label { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ps-controls select { max-width: 100%; }
.ps-grow { flex: 1 1 260px; }
.ps-grow select { flex: 1; min-width: 0; }
.ps-check { color: var(--dim); font-size: 14px; }
.ps-text { display: grid; gap: 3px; margin-bottom: 10px; }
.ps-text textarea { width: 100%; box-sizing: border-box; resize: vertical; font: 16px/1.4 var(--display); color: var(--vellum); background: var(--stone); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.ps-rule { margin: 0 0 10px; color: var(--vellum); font-size: 15px; }
.ps-rule b { color: var(--gold); font-weight: 600; }

/* the verse: each syllable under its notes, on the tone's four-line staff */
.ps-verse { display: flex; flex-wrap: wrap; row-gap: 14px; padding: 14px 12px; background: var(--stone); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.ps-word { display: inline-flex; padding-right: 9px; }
.ps-syl { position: relative; display: inline-flex; flex-direction: column; align-items: center; padding: 0 1px; background-repeat: no-repeat; border-radius: 3px; }
.ps-dots { position: relative; display: block; width: 100%; height: var(--ps-h, 40px); }
.ps-dot { position: absolute; width: 7px; height: 7px; background: var(--ps-c, var(--dim)); border-radius: 1px; }
.ps-dot em { position: absolute; left: -7px; top: -6px; font: 10px var(--display); font-style: normal; color: var(--ps-c, var(--dim)); }
.ps-t { font: 18px/1.3 var(--display); color: var(--ps-c, var(--vellum)); white-space: pre; padding-top: 2px; }
.ps-syl.r-ten .ps-t { color: var(--vellum); }
.ps-syl.st .ps-t { font-weight: 700; }
.ps-hy { color: var(--dim); opacity: 0.6; }
.ps-mark { margin-left: 3px; font-weight: 700; color: var(--rubric); }
.ps-syl.now { background-color: color-mix(in srgb, var(--gold) 22%, transparent); }
.r-into { --ps-c: var(--ps-into); } .r-ten { --ps-c: var(--ps-ten); } .r-flex { --ps-c: var(--ps-flex); }
.r-mprep, .r-tprep { --ps-c: var(--ps-prep); } .r-macc, .r-tacc { --ps-c: var(--ps-acc); } .r-mcad, .r-tcad { --ps-c: var(--ps-cad); }
b.r-into, b.r-flex, b.r-tprep, b.r-tacc { color: var(--ps-c); }
.ps-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 12px; padding: 0; font: 12.5px var(--label); letter-spacing: 0.03em; color: var(--dim); }
.ps-legend li { display: flex; align-items: center; gap: 5px; }
.ps-legend i { width: 8px; height: 8px; border-radius: 1px; background: var(--ps-c); }
.ps-legend .ps-acc b { font: 700 14px var(--display); color: var(--vellum); }
.ps-btns { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-bottom: 8px; }
.ps-now { font: 13px var(--label); letter-spacing: 0.03em; color: var(--gold); }
.ps-back, .ps-notes { margin-top: 18px; }
.ps-back h3, .ps-notes h3 { font: 700 14px var(--label); letter-spacing: 0.08em; text-transform: lowercase; color: var(--gold); margin: 14px 0 6px; }
.ps-notes p, .ps-note { margin: 4px 0 8px; color: var(--dim); font-size: 14.5px; line-height: 1.5; max-width: 78ch; }
.ps-notes p b { font-weight: 600; }
.ps-src { margin: 0; padding-left: 18px; color: var(--dim); font-size: 13.5px; line-height: 1.45; max-width: 78ch; }
.ps-src li { margin-bottom: 4px; }
.ps-hz { font: 12.5px var(--mono); color: var(--vellum); }
#psMic.on { border-color: var(--rubric); color: var(--rubric); }

/* the strip: the verse's notes in time and your pitch */
.ps-strip { display: block; width: 100%; height: auto; margin-top: 6px; }
.ps-sbg { fill: var(--stone); stroke: var(--line); }
.ps-sk { stroke: var(--line); stroke-width: 0.5; opacity: 0.5; }
.ps-sk.w { opacity: 1; }
.ps-skt { fill: var(--dim); font: 10px var(--label); }
.ps-tg { fill: var(--ps-c); opacity: 0.85; }
.ps-st { fill: var(--dim); font: 10px var(--display); }
.ps-cursor { stroke: var(--gold); stroke-width: 1; }
.ps-trace { fill: none; stroke: var(--vellum); stroke-width: 2; stroke-linejoin: round; }

/* the modes */
.ps-ladder { display: block; width: 100%; height: auto; margin-bottom: 10px; }
.ps-mcol { cursor: pointer; }
.ps-mhit { fill: transparent; stroke: transparent; }
.ps-mcol:hover .ps-mhit { fill: var(--stone-2); }
.ps-mcol.on .ps-mhit { fill: color-mix(in srgb, var(--gold) 10%, var(--stone)); stroke: var(--gold); }
.ps-mh { fill: var(--vellum); font: 700 14px var(--display); }
.ps-mk { fill: var(--dim); font: 10px var(--label); letter-spacing: 0.04em; }
.ps-rail { stroke: var(--line); stroke-width: 1.5; }
.ps-rung line { stroke: var(--vellum); stroke-width: 1.4; }
.ps-rung text { fill: var(--dim); font: 10.5px var(--display); }
.ps-rung.flat line { stroke-dasharray: 3 2; opacity: 0.7; }
.ps-rung.fin rect, .ps-mkey .k-fin { fill: var(--rubric); }
.ps-rung.dom circle, .ps-mkey .k-dom { fill: none; stroke: var(--gold); stroke-width: 2; }
.ps-rung.fin text, .ps-rung.dom text { fill: var(--vellum); font-weight: 700; }
.ps-rung:hover line { stroke: var(--gold); }
.ps-rung.now line { stroke: var(--gold); stroke-width: 3; }
.ps-mkey text { fill: var(--dim); font: 10.5px var(--label); }
.ps-modeinfo { max-width: 80ch; }
a.ps-go { font: 14px var(--label); letter-spacing: 0.03em; margin: 0 6px; }
@media (max-width: 600px) {
  .ps-t { font-size: 15px; }
  .ps-word { padding-right: 6px; }
}