@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+Hebrew:wght@400;600&display=swap");
/* Learn › Cantillation (js/learn-cantillation.js), on the choir's tokens */
.cn { --he: "Noto Serif Hebrew", "SBL Hebrew", "Ezra SIL", "Taamey Frank CLM", "Times New Roman", serif;
  --lv1: var(--rubric); --lv2: var(--gold); --lv3: #6fa8c8; --lv4: #9b8ac9; --lv0: var(--dim);
  max-width: 1180px; margin: 0 auto; padding: 18px max(16px, env(safe-area-inset-right, 0px)) 56px max(16px, env(safe-area-inset-left, 0px)); }
.cn [lang="he"] { font-family: var(--he); }
.cn-head .kicker { margin: 0; font: 12px var(--label); letter-spacing: 0.08em; text-transform: lowercase; color: var(--rubric); }
.cn-head h2 { margin: 2px 0 2px; font: 700 28px var(--display); color: var(--gold); }
.cn-head h2 [lang="he"] { font-weight: 400; font-size: 24px; color: var(--vellum); margin-left: 8px; }
.cn-sub { margin: 0 0 10px; color: var(--dim); }
.cn-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px; }
.cn-ctl label { display: flex; align-items: center; gap: 6px; }
.cn-ctl select { font-size: 13px; padding: 3px 8px; }
.cn-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.cn-tabs button { background: none; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; padding: 5px 14px; font: 700 13px var(--label); letter-spacing: 0.06em; color: var(--dim); margin-bottom: -1px; }
.cn-tabs button:hover { color: var(--vellum); }
.cn-tabs button.on { color: var(--gold); border-color: var(--line); background: var(--nave); }
.cn-pane[hidden] { display: none; }
.cn-lead { color: var(--dim); margin: 0 0 12px; max-width: 760px; font-size: 14.5px; }
.cn h3 { margin: 16px 0 4px; font: 700 13px var(--label); letter-spacing: 0.08em; text-transform: lowercase; color: var(--gold); }
.cn h3 .label { margin-left: 6px; }

/* the marks */
.cn-rank h3 { display: flex; align-items: center; gap: 6px; }
.cn-rank h3::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--c, var(--dim)); }
.lv-1 { --c: var(--lv1); } .lv-2 { --c: var(--lv2); } .lv-3 { --c: var(--lv3); } .lv-4 { --c: var(--lv4); } .lv-0 { --c: var(--lv0); }
.cn-rline { margin: 0 0 8px; color: var(--dim); font-size: 13.5px; }
.cn-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr)); gap: 8px; }
.cn-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 8px; background: var(--stone); }
.cn-card.now { border-color: var(--gold); background: var(--stone-2); }
.cn-glyph { font-size: 34px; line-height: 1.5; text-align: center; color: var(--vellum); }
.cn-glyph.sm { font-size: 22px; margin-left: 6px; }
.cn-name { display: grid; min-width: 0; }
.cn-name b { font: 700 16px var(--display); color: var(--vellum); }
.cn-name [lang="he"] { font-size: 15px; color: var(--dim); justify-self: start; }
.cn-name small { color: var(--dim); font-size: 12px; line-height: 1.3; }
.cn-card button { padding: 4px 10px; }
.cn-staff { display: block; }
.cn-staff .cn-ln { stroke: var(--line); stroke-width: 0.6; }
.cn-staff .cn-do { stroke: var(--dim); stroke-width: 1; }
.cn-staff .cn-tick { stroke: var(--gold); stroke-width: 0.8; stroke-dasharray: 2 2; opacity: 0.7; }
.cn-staff .cn-path { fill: none; stroke: var(--c, var(--gold)); stroke-width: 1; opacity: 0.55; }
.cn-staff .cn-n { fill: var(--c, var(--gold)); }
.cn-staff .cn-n.p { fill: var(--nave); stroke: var(--c, var(--gold)); stroke-width: 1.2; }
.cn-staff .cn-n.t { opacity: 0.7; }
.cn-card .cn-staff, .cn-dans .cn-staff { --c: var(--gold); }

/* the verses */
.cn-pass { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cn-pass button { display: grid; text-align: left; padding: 4px 12px; border-radius: 8px; }
.cn-pass button b { font: 500 14px var(--display); }
.cn-pass button small { font: 11.5px var(--mono); color: var(--dim); }
.cn-pass button.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--stone)); }
.cn-vcols { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 18px; align-items: start; }
.cn-ph { display: flex; align-items: center; gap: 10px; }
.cn-ph h3 { margin: 10px 0; }
.cn-verse { border-top: 1px solid var(--line); padding: 10px 0 12px; }
.cn-vh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.cn-vn { font: 700 15px var(--mono); color: var(--gold); min-width: 22px; }
.cn-phr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.cn-phr .label { margin-right: 2px; }
.cn-phr button { padding: 1px 8px; font: 12px var(--mono); }
.cn-line { display: flex; flex-wrap: wrap; align-items: stretch; gap: 4px 2px; }
.cn-w { display: grid; justify-items: center; gap: 1px; padding: 4px 6px 5px; border: 1px solid transparent; border-radius: 8px; background: none; color: inherit; cursor: pointer; }
.cn-w:hover { border-color: var(--line); background: var(--stone); }
.cn-w.now { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, var(--stone)); }
.cn-w .cn-he { font-size: 30px; line-height: 1.55; color: var(--vellum); }
.cn-w .cn-tr { font: 12.5px var(--display); font-style: italic; color: var(--dim); }
.cn-w .cn-mk { font: 11px var(--label); letter-spacing: 0.04em; color: var(--c); }
.cn-w.lv-1 .cn-he, .cn-w.lv-2 .cn-he { font-weight: 600; }
.cn-bar { align-self: center; width: 0; height: 30px; margin: 0 4px; border-left: 1px solid var(--c); opacity: 0.85; }
.cn-bar.lv-1 { border-left-width: 4px; height: 44px; } .cn-bar.lv-2 { border-left-width: 3px; height: 38px; } .cn-bar.lv-3 { border-left-width: 2px; } .cn-bar.lv-4 { border-left-width: 1px; height: 22px; }
.cn-src { margin: 12px 0 0; color: var(--dim); font-size: 12.5px; }
.cn-along { position: sticky; top: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--stone); padding: 4px 12px 12px; }
.cn-along h3 { margin-top: 10px; }
.cn-note { color: var(--dim); font-size: 13px; margin: 6px 0; }
.cn-mic { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cn-mic button.on { background: var(--rubric); border-color: var(--rubric); color: #fff; }
.cn-hz { font: 12px var(--mono); color: var(--vellum); }
#cnLadder { width: 100%; height: auto; display: block; margin-top: 6px; }
#cnLadder .cn-lbg { fill: var(--nave); }
#cnLadder .cn-rung line { stroke: var(--dim); stroke-width: 1.2; }
#cnLadder .cn-rung.do line { stroke: var(--vellum); stroke-width: 2; }
#cnLadder .cn-rung text { font: 11px var(--mono); fill: var(--dim); }
#cnLadder .cn-rung.now line { stroke: var(--gold); stroke-width: 4; }
#cnLadder .cn-rung.now text { fill: var(--gold); }
#cnLadder .cn-lguide { stroke: var(--line); stroke-width: 0.6; stroke-dasharray: 2 3; }
#cnLadder .cn-lhdr { font: 10.5px var(--label); fill: var(--dim); letter-spacing: 0.06em; }
#cnLadder .cn-trace { fill: none; stroke: var(--ok); stroke-width: 2; stroke-linejoin: round; }
#cnLadder .cn-dot { fill: var(--ok); }

/* which mark? */
.cn-drill { max-width: 720px; }
.cn-dctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.cn-dctl label { display: flex; align-items: center; gap: 6px; }
.cn-score { font: 13px var(--mono); color: var(--vellum); }
.cn-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 8px; margin: 14px 0 8px; }
.cn-choices button { display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 6px 10px; font: 15px var(--display); }
.cn-choices button.right { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 18%, var(--stone)); opacity: 1; }
.cn-choices button.wrong { border-color: var(--rubric); background: color-mix(in srgb, var(--rubric) 18%, var(--stone)); opacity: 1; }
.cn-choices button:disabled:not(.right):not(.wrong) { opacity: 0.5; }
.cn-res { min-height: 1.4em; margin: 4px 0; }
.cn-dans { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* notes */
.cn-notes { max-width: 760px; }
.cn-notes p, .cn-notes li { font-size: 15px; line-height: 1.5; }
.cn-srcs { padding-left: 18px; }

@media (max-width: 760px) {
  .cn-vcols { grid-template-columns: minmax(0, 1fr); }
  .cn-along { position: static; }
  #cnLadder { max-width: 260px; }
  .cn-card { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .cn-card .cn-staff { grid-column: 2 / 3; }
  .cn-card button { grid-row: 1; grid-column: 3; }
  .cn-w .cn-he { font-size: 23px; }
}