/* Sing-along view (hymn_sync.js) and the timing editor (sync.php).
   Colours follow the site's cream and gold header: #c28a00 for controls and
   the current position, #fff6d8 / #ead9a4 for the warm surfaces. */

.sync-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin: 12px 0 8px;
}
.sync-toolbar label { font-weight: normal; margin: 0; cursor: pointer; }
.sync-toolbar label input { margin-right: 3px; }
.sync-sep { flex: 0 0 1px; height: 18px; background: #e5d9b4; }
.sync-font { display: inline-flex; }
.sync-font-btn {
    border: 1px solid #e5d1a0; background: #fffdf6; color: #8a6d00; font-weight: 600; line-height: 1;
    padding: 3px 8px; font-size: 13px; cursor: pointer;
}
.sync-font-btn:first-child { border-radius: 4px 0 0 4px; font-size: 11px; }
.sync-font-btn + .sync-font-btn { border-left: 0; border-radius: 0 4px 4px 0; }
.sync-font-btn:hover:not(:disabled) { background: #fff6d8; }
.sync-font-btn:disabled { color: #cdbf93; cursor: default; }
.sync-title { color: #562300; font-size: 15px; font-weight: bold; margin-right: auto; }
.sync-title .fa { color: #c28a00; margin-right: 2px; }
.sync-title small { color: #8a7a55; font-weight: normal; font-size: 13px; }

.sync-panel { border-color: #ead9a4; }
.sync-para { padding: 6px 0; border-bottom: 1px solid #f1e9d2; }
.sync-para:last-child { border-bottom: 0; }
.sync-english { color: #666; transition: color .2s; }
.sync-para.active .sync-english { color: #222; }

.sync-line {
    position: relative;
    padding: 7px 10px;
    margin: 2px 0;
    border-left: 4px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.sync-line:hover { background: #fbf7ea; }
.sync-line:focus { outline: 2px solid #c28a00; outline-offset: -2px; }
.sync-line.active { background: #fff6d8; border-left-color: #c28a00; }
.sync-line.upcoming { border-left-color: #e5d1a0; border-left-style: dotted; }   /* the next line, through a long hold */
.sync-line.sync-cue { cursor: default; color: #888; font-style: italic; }
.sync-line.sync-cue:hover { background: none; }

/* The Coptic leads, with its English-letter reading in a smaller face right
   above it (above each word where the words pair up, .wp), so the reading
   helps with the script rather than standing in for it. The translation is
   there to be glanced at. */
.sync-text { line-height: 1.25; }
.sync-coptic { display: block; font-size: 1.45em; color: #222; }
.sync-translit { display: block; font-size: 1.05em; font-weight: 500; color: #6a5a30; }   /* serif: style.css */
.sync-english { font-size: 1.2em; line-height: 1.4; }
.wp { display: inline-block; vertical-align: bottom; margin: 2px .5em 2px 0; border-radius: 3px; }
.wp .sync-translit { padding: 0 1px; }
.wp .sync-coptic { padding: 0 1px; }
.sync-line.active .sync-translit { color: #5c4a10; }

/* The word being sung, and the ones already sung, in the active line. A pair
   (.wp) is marked as one block; a lone word marks itself. The mark must not
   reflow the line (no bold), only colour it. */
.sync-line.active .w, .sync-line.active .wp { transition: color .15s, background-color .15s; }
.sync-line[data-start] .w:hover { text-decoration: underline; text-decoration-color: #c28a00; }
.sync-line.active .sung, .sync-line.active .sung .w { color: #8a6d00; }
.sync-line.active .now, .sync-line.active .now .w {
    color: #000; background: #ffdf7a; border-radius: 3px;
    box-shadow: 0 0 0 2px #ffdf7a, 0 2px 0 2px #c28a00;
}
.sync-line.active .wp.now .w { background: none; box-shadow: none; }

/* How far through the line the singing is: a line can be held for minutes,
   so the bar and the countdown are what keep the learner in place. */
.sync-progress { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(194,138,0,.15); }
.sync-progress > div { height: 100%; width: 0; background: #c28a00; }
.sync-line.active .sync-progress { display: block; }
/* The countdown hangs on the top edge of the active line, like a tab, in the
   gap between two lines, so it takes no room from the text: nothing has to be
   kept clear for it, and no line wraps early. */
.sync-countdown {
    position: absolute; right: 10px; top: -8px; z-index: 1;
    font-size: 11px; line-height: 14px; font-variant-numeric: tabular-nums; color: #8a6d00;
    background: #fff; border: 1px solid #e5d1a0; border-radius: 8px; padding: 0 7px;
}
.sync-countdown:empty { display: none; }

/* Hiding the Coptic hides its reading too: the reading is never shown on its
   own, so that nobody learns the letters instead of the script. */
#hymn-sync.hide-coptic .sync-text,
#hymn-sync.hide-translit .sync-translit,
#hymn-sync.hide-english .sync-english { display: none; }

/* Arabic, stacked under the English line it translates; off with its own
   toggle. A Naskh face (Noto Naskh Arabic, linked from header.php) to sit
   with the Crimson Pro above it. Right-aligned, as Arabic reads, but not
   floated as the site's Arabic columns are: a block, so its place does not
   depend on the English beside it and it stays put when the line becomes
   active. */
.sync-arabic.arabictext {
    float: none; text-align: right; margin-top: 1px;
    font-family: "Noto Naskh Arabic", Tahoma, serif; font-size: 1.3em; line-height: 1.6; color: #555;
}
.sync-line.active .sync-arabic { color: #111; }
#hymn-sync.untimed .sync-arabic { color: #333; }
#hymn-sync.hide-arabic .sync-arabic { display: none; }
#hymn-sync.hide-english.hide-arabic .sync-translation { display: none; }

/* One line per row: Coptic with its reading | translation. Flex so that
   hiding a column lets the other take its space. Percentage bases, not 0,
   so that padding inside a column never changes its share. */
@media (min-width: 768px) {
    .sync-line.row { display: flex; align-items: flex-end; margin-left: -15px; margin-right: -15px; }
    .sync-line.row > [class*="col-"] { float: none; width: auto; min-width: 0; flex: 1 1 60%; }
    .sync-line.row > .sync-translation { flex: 1 1 40%; padding-bottom: 3px; }
}
.sync-line.row .sync-english { color: #555; }
.sync-line.row.active .sync-english { color: #111; }
@media (max-width: 767px) {
    .sync-coptic { font-size: 1.35em; }
    .sync-line.row .sync-english { font-size: 1.1em; font-style: italic; margin-top: 2px; }
    .sync-countdown { position: static; display: inline-block; margin-top: 4px; }
}
.sync-note { color: #777; font-size: .9em; margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed #e5d9b4; }

.sync-links { margin: 6px 0 0; }
.sync-keys { color: #8a7a55; font-size: 12px; white-space: nowrap; }
.sync-keys kbd { background: #f6f1e1; color: #5c4a10; box-shadow: inset 0 -1px 0 #d9c98f; padding: 1px 5px; font-size: 11px; }

/* ---- Player, docked to the bottom of the screen (hymn_sync.js), also the
   album pages' track player (media/media.js, #album-player) ------------- */
body.has-sync-player { padding-bottom: 110px; }      /* hymn_sync.js sets the exact height */
#sync-player, #album-player {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    background: #fffdf6;
    border-top: 1px solid #ead9a4;
    box-shadow: 0 -4px 16px rgba(0,0,0,.08);
    padding: 0 16px 8px;
    font-size: 14px;
    color: #333;
}
.sp-timeline {
    position: relative; height: 24px; margin: 0 -16px; cursor: pointer;
    touch-action: none;
}
.sp-timeline::before {                 /* the track */
    content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 6px; background: #efe3bd;
}
.sp-played { position: absolute; left: 0; top: 9px; height: 6px; width: 0; background: #c28a00; }
.sp-ticks span {                       /* one per line start */
    position: absolute; top: 6px; width: 2px; height: 12px; margin-left: -1px; background: #8a6d00; opacity: .5;
}
.sp-head {
    position: absolute; top: 4px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
    background: #fff; border: 3px solid #c28a00; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.sp-timeline:hover .sp-head { transform: scale(1.15); }
.sp-timeline:focus { outline: none; }
.sp-timeline:focus .sp-head { box-shadow: 0 0 0 4px rgba(194,138,0,.35); }
.sp-tip {
    display: none; position: absolute; bottom: 26px; transform: translateX(-50%);
    background: #3d2b00; color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 4px;
    white-space: nowrap; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.sp-tip b { font-weight: normal; color: #f5e29d; margin-right: 6px; font-variant-numeric: tabular-nums; }
.sp-bar { display: flex; align-items: center; gap: 12px; max-width: 1140px; margin: 0 auto; }
.sp-group { display: flex; align-items: center; gap: 4px; flex: none; }
.sp-now { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.sp-time { font-variant-numeric: tabular-nums; color: #555; flex: none; }
.sp-line { color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; }
.sp-next { color: #8a6d00; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sp-next:empty { display: none; }
.sp-btn {
    position: relative; border: 0; background: transparent; color: #5c4a10;
    min-width: 44px; height: 44px; border-radius: 22px; font-size: 16px; padding: 0 10px;
    transition: background-color .15s;
}
a.sp-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.sp-btn:hover { background: #f6ecc9; }
.sp-btn:focus { outline: 2px solid #c28a00; outline-offset: -2px; }
.sp-btn.sp-play { background: #c28a00; color: #fff; width: 52px; height: 52px; border-radius: 26px; font-size: 20px; }
.sp-btn.sp-play:hover { background: #a87700; }
.sp-btn.sp-play .fa-play { margin-left: 3px; }
.sp-btn.sp-play.sp-hint { animation: sp-pulse 1.4s ease-out infinite; }
@keyframes sp-pulse {
    0% { box-shadow: 0 0 0 0 rgba(194,138,0,.55); }
    100% { box-shadow: 0 0 0 14px rgba(194,138,0,0); }
}
.sp-small { position: absolute; font-size: 9px; font-weight: bold; left: 50%; top: 50%; transform: translate(-50%, -45%); }
.sp-btn[data-act=back] i, .sp-btn[data-act=fwd] i { font-size: 22px; }
.sp-btn.on { background: #c28a00; color: #fff; }
.sp-btn.on:hover { background: #a87700; }
.sp-speed {                            /* looks like a setting, not an icon: it cycles */
    font-weight: bold; font-variant-numeric: tabular-nums; min-width: 60px; height: 32px;
    border: 1px solid #dccb95; border-radius: 16px; font-size: 13px;
}
/* "?" and its list of shortcuts, only where the bar has no room for the
   hints themselves and the screen is one that may have a keyboard. */
.sp-help { display: none; min-width: 36px; width: 36px; height: 36px; padding: 0; font-weight: bold; font-size: 15px; border: 1px solid #dccb95; }
.sp-keys-pop {
    position: absolute; right: 8px; bottom: 100%; margin-bottom: 8px; z-index: 1;
    background: #fffdf6; border: 1px solid #ead9a4; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.12);
    padding: 10px 14px; font-size: 13px; line-height: 1.9; color: #333; white-space: nowrap;
}
.sp-keys-pop b { display: block; color: #562300; margin-bottom: 2px; }
.sp-keys-pop kbd { background: #f6f1e1; color: #5c4a10; box-shadow: inset 0 -1px 0 #d9c98f; padding: 1px 6px; font-size: 12px; }
.sp-group { position: relative; }
@media (min-width: 600px) and (max-width: 1099px) {
    .sp-help { display: inline-block; }
}

@media (max-width: 600px) {
    #sync-player, #album-player { padding: 0 8px 6px; }
    .sp-timeline { margin: 0 -8px; }
    .sp-bar { flex-wrap: wrap; gap: 0; justify-content: space-between; }
    .sp-now { order: -1; flex-basis: 100%; font-size: 12px; margin-bottom: 2px; gap: 8px; }
    .sp-label { display: none; }
    .sp-btn { min-width: 40px; padding: 0 6px; }
}
@media (max-width: 1099px) {
    #sync-player .sync-keys { display: none; }
}

/* Stillness for those who asked for it: no pulse, no fades. The page's own
   scrolling is handled in hymn_sync.js. */
@media (prefers-reduced-motion: reduce) {
    .sp-btn.sp-play.sp-hint { animation: none; box-shadow: 0 0 0 4px rgba(194,138,0,.45); }
    .sync-line, .sync-line.active .w, .sync-english, .sp-btn { transition: none; }
}

/* ---- The timing editor (sync.php, hymn_sync_editor.js): the lesson's lines
   and player, with a time on each line and the Tap button ------------------ */
.sync-editor h1 { margin-bottom: 2px; }
.sync-editor h1 small { display: block; font-size: 20px; color: #8a7a55; margin-top: 2px; }
.se-rec { color: #555; margin: 4px 0 12px; }
.se-guide { background: #fffdf6; border: 1px solid #ead9a4; border-radius: 8px; padding: 12px 16px; margin: 0 0 12px; color: #444; }
.se-guide p { margin: 0 0 6px; }
.se-guide p:last-child { margin-bottom: 0; }
.se-guide-more { color: #6a5a30; font-size: 13px; }
.se-guide-next { border-left: 4px solid #562300; padding-left: 5px; }
.se-low-key { color: #e0a800; font-size: 10px; }

/* What is wrong, or how far along: above the lines, in plain words. */
.se-status:empty { display: none; }
.se-status { margin: 0 0 10px; }
.se-progress { display: flex; align-items: center; gap: 12px; color: #6a5a30; }
.se-bar { flex: 0 0 160px; height: 8px; background: #efe3bd; border-radius: 4px; overflow: hidden; }
.se-bar > span { display: block; height: 100%; background: #c28a00; }
.se-problems { margin: 6px 0 0; padding: 8px 12px 8px 30px; background: #fbeeed; border-left: 4px solid #a94442; border-radius: 3px; color: #7a2e2b; }
.se-problems li { padding: 2px 0; }
.se-ok { padding: 8px 12px; background: #eef6e8; border-left: 4px solid #3c763d; border-radius: 3px; color: #3c763d; }

/* A line: its time first, then the words; the marked line (next tap) has a
   dark bar, the line being heard the lesson's highlight, the selected one
   a warm frame with its tools open under it. */
.se-line { cursor: pointer; }
.se-line.sync-cue { cursor: default; }
.se-line.se-next { border-left-color: #562300; }
.se-line.se-next .se-time { background: #562300; color: #fff; border-color: #562300; }
.se-line.se-selected { background: #fffaea; box-shadow: inset 0 0 0 1px #ead9a4; }
.se-line.se-bad .se-time { border-color: #a94442; color: #a94442; background: #fbeeed; }
.se-line.se-low .se-time { border-color: #e0a800; background: #fffbe8; }
.se-time {
    float: left; margin: 2px 12px 0 0; min-width: 62px; height: 30px; padding: 0 8px;
    font-variant-numeric: tabular-nums; font-size: 13px; text-align: center;
    background: #fff; border: 1px solid #dccb95; border-radius: 15px; color: #5c4a10;
}
.se-time:hover, .se-time:focus { background: #f6ecc9; outline: none; }
.se-cue-time { border-color: transparent; background: none; color: #999; font-style: italic; }
.se-words { display: block; overflow: hidden; }
.se-tools { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 0 2px 78px; }
.se-tools[hidden] { display: none; }
.se-type { font-weight: normal; margin: 0; color: #6a5a30; }
.se-type input { display: inline-block; width: 82px; margin-left: 4px; font-variant-numeric: tabular-nums; }
.se-fields { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 12px; padding: 6px 0 4px 78px; }
.se-fields[hidden] { display: none; }
.se-fields label { font-weight: normal; font-size: 12px; color: #6a5a30; margin: 0; }
.se-fields .sync-edit-arabic { font-family: "Noto Naskh Arabic", Tahoma, serif; }
.se-fields .sync-edit-english { font-style: italic; }
@media (min-width: 768px) {
    .sync-editor .sync-line.row { flex-wrap: wrap; }       /* the tools go under the words */
    .sync-editor .sync-line.row > .sync-text { flex: 1 1 62%; }
    .sync-editor .sync-line.row > .sync-translation { flex: 1 1 38%; }
}
@media (max-width: 767px) {
    .se-tools, .se-fields { padding-left: 0; }
    .se-time { min-width: 56px; }
}

/* Done: the save buttons and what happens next */
.se-finish { margin: 20px 0 10px; padding: 14px 18px; background: #fffdf6; border: 1px solid #ead9a4; border-radius: 8px; }
.se-finish h2 { font-size: 20px; color: #562300; margin: 0 0 6px; }
.se-next { color: #555; }
.se-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.se-saved { color: #6a5a30; }
.se-saved-ok { color: #3c763d; }
.se-saved-err { color: #a94442; }

/* The player: the sing-along's, plus Tap and Undo. Marks on the timeline are
   wide enough to grab. */
.se-player .sp-bar { gap: 10px; }
.se-tap {
    flex: none; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 14px;
    border: 0; border-radius: 22px; background: #c28a00; color: #fff; font-size: 14px; max-width: 42%;
}
.se-tap:hover, .se-tap:focus { background: #a87700; outline: none; }
.se-tap:focus-visible { outline: 2px solid #562300; outline-offset: 2px; }
.se-tap.se-tapped { background: #562300; }
.se-tap[disabled] { background: #dccb95; }
.se-tap-word { font-weight: bold; font-size: 17px; }
.se-tap-what { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .92; }
.se-tap kbd { background: rgba(255,255,255,.22); color: #fff; box-shadow: none; padding: 1px 6px; }
.se-tick {
    position: absolute; top: 0; width: 14px; height: 24px; margin-left: -7px; cursor: ew-resize; z-index: 1;
}
.se-tick::after { content: ""; position: absolute; left: 6px; top: 4px; width: 2px; height: 16px; background: #8a6d00; opacity: .6; }
.se-tick:hover::after, .se-tick-sel::after { opacity: 1; width: 4px; left: 5px; }
.se-tick-next::after { background: #562300; opacity: 1; width: 3px; }
.se-tick-bad::after { background: #a94442; opacity: 1; }
.se-tick-low::after { background: #e0a800; opacity: 1; }
.se-undo .fa { font-size: 15px; }
@media (max-width: 700px) {
    .se-player .sp-bar { flex-wrap: wrap; justify-content: space-between; gap: 6px 0; }
    .se-player .sp-now { order: -1; flex-basis: 100%; font-size: 12px; }
    .se-player .se-tap { order: 5; flex-basis: 100%; max-width: none; justify-content: center; margin-top: 2px; }
    .se-player .sp-label { display: none; }
}

/* Learn the Hymns (lessons.php): units in the order to learn them, each a numbered
   heading and its lessons. For admins, Arrange turns on the drag handles and
   the unit fields (hymn_lessons_arrange.js). */
.lu { counter-reset: unit; }
.lu-unit { counter-increment: unit; margin: 0 0 22px; border: 1px solid #ead9a4; border-radius: 8px; background: #fff; overflow: hidden; }
.lu-loose { counter-increment: none; border-style: dashed; }
.lu-loose[data-empty] { display: none; }
.lu-on .lu-loose[data-empty] { display: block; }
.lu-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #fffaea; border-bottom: 1px solid #ead9a4; }
.lu-num { flex: 0 0 40px; height: 40px; border-radius: 50%; background: #c28a00; color: #fff; font-size: 18px; font-weight: bold;
    display: flex; align-items: center; justify-content: center; }
.lu-num::before { content: counter(unit); }
.lu-title { flex: 1 1 auto; min-width: 0; }
.lu-name { margin: 0; font-size: 20px; color: #562300; }
.lu-intro { margin: 2px 0 0; color: #6a5a30; }
.lu-intro:empty { display: none; }
.lu-count { flex: 0 0 auto; white-space: nowrap; font-size: 13px; }
.lu-list { list-style: none; margin: 0; padding: 0; counter-reset: lesson; min-height: 8px; }
.lu-lesson { counter-increment: lesson; display: flex; align-items: center; border-top: 1px solid #f3ead0; }
.lu-lesson:first-child { border-top: 0; }
.lu-link { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 12px; padding: 10px 16px; color: inherit; }
.lu-link::before { content: counter(lesson); flex: 0 0 22px; text-align: right; color: #b09a5a; font-variant-numeric: tabular-nums; }
.lu-link:hover, .lu-link:focus { background: #fffdf6; text-decoration: none; }
.lu-hymn { flex: 1 1 auto; min-width: 0; color: var(--ts-sienna); font-size: 16px; }
.lu-link:hover .lu-hymn { text-decoration: underline; }
.lu-album { flex: 0 1 240px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lu-length { flex: 0 0 44px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
/* The groups (top-level headings): pills to pick one, then its heading. */
.lu-groups { margin: 14px 0 16px; }
.lu-groups > li > a { border: 1px solid #ead9a4; color: #6a5a30; margin-right: 6px; border-radius: 18px; padding: 7px 16px; }
.lu-groups > li > a:hover, .lu-groups > li > a:focus { background: #fffaea; }
.lu-groups > li.active > a, .lu-groups > li.active > a:hover, .lu-groups > li.active > a:focus { background: #c28a00; border-color: #c28a00; color: #fff; }
.lu-groups .badge { background: rgba(0,0,0,.12); color: inherit; font-weight: normal; margin-left: 4px; }
.lu-group { margin: 0 0 16px; }
.lu-group-name { margin: 0; font-size: 28px; color: #562300; }
.lu-group-intro { margin: 4px 0 0; color: #6a5a30; font-size: 16px; }
.lu-group-intro:empty { display: none; }
.lu-group-album { margin: 4px 0 0; font-size: 13px; }
.lu-one-album .lu-unit:not(.lu-loose) .lu-album { display: none; }
.lu-group-edit { display: none; }
.lu-on .lu-group-edit { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lu-on .lu-group-name-in { flex: 0 1 300px; font-weight: bold; font-size: 18px; }
.lu-on .lu-group-intro-in { flex: 1 1 260px; }
.lu-on .lu-group-name, .lu-on .lu-group-intro { display: none; }
.lu-group-remove { color: #a94442; }
/* A group's only unit, with no name: just its lessons under the heading. */
.lu-single .lu-noname .lu-head { display: none; }
.lu-on .lu-single .lu-noname .lu-head { display: flex; }
.lu-noname .lu-name::before { content: "Unit " counter(unit); }
.lu-on .lu-edit .lu-move-group { flex: 0 0 130px; }
.lu-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lu-arranging, .lu-edit, .lu-grip, .lu-remove, .lu-send { display: none; }
.lu-on .lu-send { display: block; flex: 0 0 120px; margin-right: 10px; }
.lu-on .lu-arranging { display: inline; }
.lu .lu-groups > li.lu-arranging { display: none; }
.lu.lu-on .lu-groups > li.lu-arranging { display: block; }
.lu-on p.lu-arranging { display: block; }
.lu-on .lu-edit { display: flex; gap: 8px; }
.lu-on .lu-edit .lu-name-in { flex: 0 1 240px; font-weight: bold; }
.lu-on .lu-edit .lu-intro-in { flex: 1 1 auto; }
.lu-on .lu-name, .lu-on .lu-intro { display: none; }
.lu-on .lu-loose .lu-name, .lu-on .lu-loose .lu-intro { display: block; }
.lu-on .lu-remove { display: inline-block; color: #a94442; }
.lu-on #lu-units .lu-head { cursor: grab; }
.lu-on .lu-grip { display: flex; align-items: center; align-self: stretch; padding: 0 4px 0 14px; color: #b09a5a; cursor: grab; }
.lu-on .lu-list { min-height: 44px; }
.lu-on .lu-list:empty::after { content: "Drag lessons here"; display: block; padding: 12px 16px; color: #b09a5a; font-style: italic; }
.lu-ghost { opacity: .35; background: #fff3c4; }
.lu-saved { color: #3c763d; }
.lu-failed { color: #a94442; }
@media (max-width: 700px) {
    .lu-album { display: none; }
    .lu-head { flex-wrap: wrap; }
    .lu-on .lu-edit { flex-direction: column; }
}

/* A recording with no lesson yet (showHymnLines): the same view and player,
   without what needs timings. */
#hymn-sync.untimed .sync-line { cursor: default; }
#hymn-sync.untimed .sync-line:hover { background: none; }
#hymn-sync.untimed .sp-btn[data-act=prev],
#hymn-sync.untimed .sp-btn[data-act=next],
#hymn-sync.untimed .sp-btn[data-act=repeat],
#hymn-sync.untimed .sp-keys-line { display: none; }

/* Bookmarks (hymn_sync.js): a coloured flag on the timeline and a matching
   marker in the text before the word being sung at that moment. */
.sp-marks { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; }
.bm-tl {
    position: absolute; top: 1px; width: 10px; height: 20px; margin-left: -5px; z-index: 2;
    border-radius: 2px 2px 5px 5px; box-shadow: 0 0 0 2px #fffdf6; cursor: pointer; pointer-events: auto;
}
.bm-tl:hover, .bm-tl:focus { transform: scale(1.2); outline: none; }
.bm-text {
    display: inline-block; width: 7px; height: 1.6em; margin: 0 5px 0 1px; vertical-align: bottom;
    border-radius: 2px; cursor: pointer;
}
.bm-text:hover, .bm-text:focus { box-shadow: 0 0 0 2px rgba(0,0,0,.15); outline: none; }
.sp-bm-list { font-weight: bold; font-variant-numeric: tabular-nums; min-width: 36px; }
.sp-bm-list .sp-bm-count { background: #c28a00; color: #fff; border-radius: 9px; padding: 1px 7px; font-size: 12px; }
.sp-bm-add.sp-flash { background: #c28a00; color: #fff; }
.sp-bm-pop {
    position: absolute; right: 8px; bottom: 100%; margin-bottom: 8px; z-index: 3;
    background: #fffdf6; border: 1px solid #ead9a4; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.12);
    padding: 8px 6px 6px 12px; width: 320px; max-width: calc(100vw - 32px); max-height: 50vh; overflow-y: auto;
    font-size: 13px; color: #333;
}
.bm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; padding-right: 6px; }
.bm-head b { color: #562300; }
.bm-clear { border: 0; background: none; color: #8a6d00; font-size: 12px; text-decoration: underline; padding: 4px 0; }
.bm-clear:hover { color: #562300; }
.bm-row { display: flex; align-items: center; gap: 8px; }
.bm-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.bm-go { flex: 1; min-width: 0; border: 0; background: none; text-align: left; padding: 5px 0;
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; }
.bm-go b { margin-right: 6px; font-variant-numeric: tabular-nums; }
.bm-go:hover { color: #000; text-decoration: underline; }
.bm-del { flex: none; border: 0; background: none; font-size: 18px; line-height: 1; color: #999; width: 32px; height: 32px; border-radius: 16px; }
.bm-del:hover { background: #f6ecc9; color: #562300; }
@media (prefers-reduced-motion: reduce) {
    .bm-tl:hover, .bm-tl:focus { transform: none; }
}

/* A line marked "not sung here" in the editor: no timing tools, just the
   switch to mark it sung again. */
.se-line[data-sung="0"] .se-timing { display: none; }
button.se-time.se-cue-time { cursor: pointer; }
.se-start-over { margin: 4px 0 0; }
.se-start-over .btn-link, .se-clear { color: #8a6d00; }
#se-clear-all.se-confirm { color: #b00; font-weight: bold; }
.se-unfinished { color: #6a5a30; font-size: 13px; margin: 2px 0 0; }

/* Places the automatic draft may have wrong: listed above the lines, shaded
   amber on the timeline. */
.se-doubts { background: #fffbe8; border: 1px solid #f0d77a; border-left: 4px solid #e0a800; border-radius: 3px;
    padding: 10px 14px; margin: 0 0 12px; color: #5c4a10; }
.se-doubts p { margin: 0 0 6px; }
.se-doubts ol { margin: 0; padding-left: 22px; }
.se-doubts li { padding: 3px 0; }
.se-doubt-go { font-variant-numeric: tabular-nums; min-width: 104px; }
.se-doubt-what { margin: 0 4px; }
.se-doubt-ok { color: #3c763d; }
.sp-ticks .se-band { top: 7px; height: 10px; margin-left: 0; min-width: 4px; background: #e0a800; opacity: .45;
    border-radius: 2px; pointer-events: none; }

/* Tapping the words of one line (editor): the marked word, and the small
   time under each word while its line is selected. */
.se-wt { display: none; font-size: 10px; color: #b09a5a; font-variant-numeric: tabular-nums; margin-top: 1px; }
.se-line.se-selected .se-wt { display: block; cursor: pointer; }
.se-line.se-selected .se-wt:hover { text-decoration: underline; color: #562300; }
.se-line.se-selected .wp { cursor: crosshair; }   /* the word: it starts now */
.se-in-words .se-line.se-selected .wp { cursor: pointer; }
/* The word marked for editing is underlined, and stays so when it is also
   the word being heard (shaded, .now). */
.se-in-words .se-line.se-selected .wp.se-next-word,
.se-in-words .se-line.se-selected.active .wp.se-next-word.now { box-shadow: inset 0 -3px 0 #562300; }
.se-in-words .se-line.se-selected .wp.se-next-word .se-wt { color: #562300; font-weight: bold; }
.se-tap-words.active { background: #562300; color: #fff; border-color: #562300; }

/* How hard a hymn is to learn, 1 to 10 (hymn_difficulty_dots). */
.hd-dots { display: inline-flex; gap: 2px; align-items: center; vertical-align: middle; }
.hd-dot { width: 6px; height: 6px; border-radius: 50%; background: #e7dcbb; display: inline-block; }
.hd-dot.hd-on { background: #c28a00; }
.lu-level { flex: 0 0 82px; text-align: right; }
.sync-toolbar .hd-dots { margin-left: 10px; }

/* Read the Coptic letters (alphabet.php). */
.cl-page { max-width: 760px; }
.cl-intro { font-size: 16px; color: #444; }
.cl-letters td { vertical-align: middle; }
.cl-shape { font-size: 24px; white-space: nowrap; width: 90px; }
.cl-name { width: 90px; color: #6a5a30; }
.cl-sound { width: 230px; }
.cl-as { width: 90px; color: #666; font-style: italic; }
.cl-as b { color: #562300; font-style: normal; }
.cl-letters tr.cl-also td { border-top: 0; padding-top: 0; }
.cl-letters tr.cl-first td { border-top: 1px solid #e5d9b4; }
.cl-sound b { font-size: 16px; color: #562300; }
/* IPA beside the plain spelling: the exact sound for anyone who reads it, quiet for everyone else. */
.cl-ipa, .cp-ipa { font-family: "Charis SIL", "Doulos SIL", "Gentium Plus", "Noto Sans", "Segoe UI", sans-serif; font-weight: normal; color: #8a6d4a; }
.cl-ipa { font-size: 14px; }
.cp-ipa { font-size: 14px; margin-left: 4px; }
.cl-rule { display: block; font-size: 12px; color: #777; }
.cl-word { font-size: 19px; margin-right: 8px; }
.cl-word b, .cl-reading b { color: #562300; background: #fff3c4; border-radius: 3px; }
.cl-reading { color: #8a6d00; font-style: italic; }
.cl-more { margin-top: 18px; color: #555; }
.cl-which { background: #fffdf6; border: 1px solid #ead9a4; border-radius: 8px; padding: 14px 18px; margin: 0 0 18px; }
.cl-which h2 { margin: 0 0 8px; font-size: 20px; color: #562300; }
.cl-which p { margin: 0 0 8px; color: #444; }
.cl-which p:last-child { margin-bottom: 0; }
.cl-sources { font-size: 13px; color: #6a5a30; }
.cl-unity { background: #fff6d8; border: 1px solid #ead9a4; border-left: 4px solid #c28a00; border-radius: 8px; padding: 14px 18px; margin: 0 0 18px; }
.cl-unity h2 { margin: 0 0 8px; font-size: 20px; color: #562300; }
.cl-unity p { margin: 0 0 8px; color: #444; }
.cl-unity ul { margin: 0; padding-left: 20px; color: #444; }
.cl-unity li { margin: 3px 0; }
@media (max-width: 700px) {
    .cl-shape { font-size: 20px; width: 62px; }
    .cl-name, .cl-as { display: none; }
    .lu-level { flex-basis: 70px; }
}

/* What you know, ticked on Learn the Hymns (hymn_lessons.js). The tick is
   faint until it is pressed, so a list of untried lessons is not a wall of
   grey ticks. */
.lu-tick { flex: 0 0 auto; margin-right: 10px; padding: 4px 8px; border: 0; border-radius: 14px;
    background: none; color: #d8cba3; line-height: 1; }
.lu-tick:hover, .lu-tick:focus { background: #f3ead0; color: #8a6d00; outline: none; }
.lu-lesson.lu-learned .lu-tick { color: #3c763d; background: #eef6e8; }
.lu-lesson.lu-learned .lu-hymn { color: #5a7a52; }
.lu-lesson.lu-learned .lu-link:hover .lu-hymn { color: var(--ts-sienna); }
.lu-progress { flex: 0 0 132px; display: none; align-items: center; gap: 8px; font-size: 12px; color: #6a5a30; }
.lu-progress .lu-meter { flex: 0 0 52px; height: 6px; background: #efe3bd; border-radius: 3px; overflow: hidden; }
.lu-progress .lu-meter > span { display: block; height: 100%; width: 0; background: #7fa06f; transition: width .2s; }
.lu-progress.lu-all-done .lu-meter > span { background: #3c763d; }
.lu-said { white-space: nowrap; }
@media (max-width: 700px) {
    .lu-progress { flex-basis: auto; }
    .lu-progress .lu-meter { display: none; }
}

/* On to the next lesson when a recording ends (hymn_sync.js). */
.sync-next[hidden] { display: none; }   /* the class sets display, so say it again here */
.sync-next { margin: 14px 0 0; padding: 12px 16px; background: #fffaea; border: 1px solid #ead9a4;
    border-radius: 8px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sync-next b { color: #562300; }
.sync-next .fa-graduation-cap { color: #c28a00; }

/* The sources compared, letter by letter (pronunciation.php). The page leads
   with the answer: what we write, a short summary, then the evidence folded
   one click away. Colours are the library's gold and brown. */
.cp-page { max-width: 1140px; }
.cp-lede, .cp-summary, .cp-lead, .cp-argument p, #pron-background p { max-width: 780px; }
.cp-lede { font-size: 16px; color: #3b2a14; line-height: 1.6; }
.cp-lead { color: #6a5a30; }

/* The letter tabs. Every letter is in the page, so that it can be searched and
   printed; hymn_pronunciation.js only chooses which one is on screen. */
.cp-tabs { position: sticky; top: 0; z-index: 5; background: #fff; margin: 14px 0 18px;
    padding: 8px 0; border-bottom: 2px solid #ead9a4; line-height: 2.1; }
.cp-tab { display: inline-block; min-width: 34px; text-align: center; padding: 3px 7px; margin: 0 2px 2px 0;
    border: 1px solid #ead9a4; border-radius: 6px; color: #6a5a30; background: #fffdf6; }
.cp-tab .coptictext_utf8 { font-size: 19px; line-height: 1; }
.cp-tab:hover, .cp-tab:focus { background: #fff6d8; border-color: #c28a00; color: #562300; text-decoration: none; }
.cp-quiet-note { color: #6a5a30; font-style: italic; margin: -4px 0 10px; }
.cp-tab.cp-on { background: #c28a00; border-color: #c28a00; color: #fff; }
.cp-word { min-width: 0; font-size: 13px; padding: 5px 9px; }
/* A letter opened from a link lands below the sticky tabs, not under them. */
.cp-panel { scroll-margin-top: 120px; }
.cp-sub { display: none; margin-top: 34px; padding-top: 18px; border-top: 2px solid #ead9a4; scroll-margin-top: 120px; }
.cp-sub .cp-head h2 { font-size: 19px; }

/* The overview: the whole alphabet on one screen. */
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.cp-card { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; border: 1px solid #ead9a4;
    border-radius: 8px; background: #fffdf6; color: #3b2a14; }
a.cp-card:hover, a.cp-card:focus { border-color: #c28a00; background: #fff6d8; text-decoration: none; color: #3b2a14; }
.cp-card-shape { font-size: 28px; line-height: 1.1; color: #562300; }
.cp-card-name { font-size: 12px; color: #8a7b52; text-transform: uppercase; letter-spacing: .04em; }
.cp-card-sound { font-weight: 600; color: #562300; }
.cp-card-line { font-size: 13px; line-height: 1.4; color: #5a4a2a; }

/* One letter. */
.cp-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; }
.cp-head h2 { margin: 0; font-size: 22px; color: #562300; }
.cp-shape { font-size: 34px; color: #562300; }
.cp-verdict { background: #fffaea; border-left: 4px solid #c28a00; border-radius: 4px; padding: 10px 14px; margin: 0 0 14px; }
.cp-verdict-label { margin: 0 0 4px; font-size: 12px; color: #8a7b52; text-transform: uppercase; letter-spacing: .05em; }
.cp-ways { border-collapse: collapse; }
.cp-ways td { padding: 3px 18px 3px 0; vertical-align: baseline; }
.cp-way-sound { font-size: 20px; font-weight: 600; color: #562300; white-space: nowrap; }
.cp-way-when { color: #5a4a2a; }
.cp-way-word .coptictext_utf8 { font-size: 18px; }
.cp-way-word i { color: #6a5a30; margin-left: 6px; }
.cp-summary { font-size: 16px; line-height: 1.65; color: #2e2413; margin: 0 0 18px; }

/* The timeline: one axis, a lane for each kind of source, the reform drawn
   through all of them, so the lanes can be compared at the same moment. */
.cp-timeline { margin: 0 0 18px; }
.cp-lanes { position: relative; margin: 0 8px 0 150px; padding-bottom: 22px; }
.cp-lane { position: relative; height: 44px; border-bottom: 1px solid #efe6cf; }
.cp-lane-name { position: absolute; left: -150px; top: 14px; width: 140px; font-size: 12px; line-height: 1.2; color: #8a7b52; }
.cp-axis { position: absolute; left: 0; right: 0; bottom: 0; height: 20px; border-top: 1px solid #c9b77a; }
.cp-break { position: absolute; top: -3px; width: 8px; height: 6px; margin-left: -4px; background: #fff;
    border-left: 1px solid #c9b77a; border-right: 1px solid #c9b77a; transform: skewX(-25deg); }
.cp-tick { position: absolute; top: 4px; transform: translateX(-50%); font-size: 11px; color: #8a7b52; }
.cp-reform { position: absolute; top: -14px; bottom: 20px; border-left: 1px dashed #c28a00; z-index: 1; }
.cp-reform span { position: absolute; top: 0; left: 4px; font-size: 11px; color: #a06e00; white-space: nowrap; }
.cp-dot { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #a8915a;
    transform: translate(-50%, -50%); z-index: 2; }
.cp-dot:hover, .cp-dot:focus { background: #562300; transform: translate(-50%, -50%) scale(1.5); }

/* The sources by period, the three kinds side by side. */
.cp-periods { border-top: 2px solid #ead9a4; }
.cp-prow { display: grid; grid-template-columns: 96px repeat(5, minmax(0, 1fr)); gap: 0 14px; border-bottom: 1px solid #efe6cf; padding: 6px 0; }
.cp-phead { border-bottom: 1px solid #c9b77a; padding: 8px 0 6px; }
.cp-pcol-head { font-size: 12px; font-weight: 600; color: #8a7b52; text-transform: uppercase; letter-spacing: .05em; }
.cp-pband { font-size: 13px; font-weight: 600; color: #562300; padding-top: 7px; }
.cp-says { list-style: none; margin: 0; padding: 0; }
.cp-say { scroll-margin-top: 90px; border-radius: 4px; }
.cp-say:target { background: #fff6d8; }
.cp-say summary, .cp-say-line { display: block; padding: 6px 4px; list-style: none; }
.cp-say summary { cursor: pointer; }
.cp-say summary::-webkit-details-marker { display: none; }
.cp-say summary:hover { background: #fffaea; }
.cp-say .cp-value { display: block; margin-top: 1px; font-size: 13px; line-height: 1.4; }
.cp-say summary .cp-value::after { content: " \25B8"; color: #c28a00; font-size: 11px; }
.cp-say details[open] summary .cp-value::after { content: " \25BE"; }
.cp-who { display: block; font-size: 13px; }
.cp-where { display: block; font-size: 11px; color: #8a7b52; }
.cp-value { color: #3b2a14; }
.cp-evidence { padding: 2px 4px 10px; font-size: 13px; }
.cp-quote { margin: 0 0 8px; padding: 4px 10px; border-left: 3px solid #ead9a4; font-size: 13px; font-style: italic; color: #444; }
.cp-quote.cp-ar { font-style: normal; direction: rtl; text-align: right; border-left: 0; border-right: 3px solid #ead9a4; font-size: 15px; }
.cp-tongue { display: block; font-style: normal; font-size: 11px; color: #8a7b52; text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; direction: ltr; text-align: left; }
.cp-english { margin: 0 0 8px; color: #333; }
.cp-gloss { margin: 0; color: #6a5a30; }
.cp-gloss::before { content: "Note: "; font-weight: 600; }
.cp-also { margin: 12px 0 6px; padding-top: 8px; border-top: 1px dashed #ead9a4; font-weight: 600; color: #562300; }
/* Under an entry: who else repeats the finding, other copies of the text, and,
   for a book that comments on another's finding, the entry it comments on. */
.cp-cited, .cp-about { margin: -3px 4px 6px; font-size: 12px; line-height: 1.4; color: #8a7b52; }
.cp-about { font-style: italic; }
.cp-variant { margin: -3px 4px 6px; padding-left: 8px; border-left: 2px solid #ead9a4; font-size: 12px; line-height: 1.4; color: #5a4a2a; }
.cp-say .cp-variant summary { display: block; padding: 2px 0; }
.cp-variant summary::after { content: " \25B8"; color: #c28a00; font-size: 11px; }
.cp-variant[open] summary::after { content: " \25BE"; }
.cp-variant .cp-quote { margin-top: 6px; }
.cp-vwhere { margin: 0 0 6px; color: #8a7b52; }
/* A technical word, with its plain meaning on hover or tap. */
.cp-term { border-bottom: 1px dotted #a06e00; cursor: help; position: relative; }
.cp-term:hover::after, .cp-term:focus::after { content: attr(data-def); position: absolute; left: 0; top: calc(100% + 4px);
    z-index: 20; width: 260px; padding: 7px 9px; border-radius: 5px; background: #3b2a14; color: #fff;
    font: normal 12px/1.45 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; text-transform: none; letter-spacing: 0; white-space: normal; }
.cp-term:focus { outline: none; background: #fff6d8; }
.cp-glossary { display: grid; grid-template-columns: 170px 1fr; gap: 6px 14px; max-width: 780px; }
.cp-glossary dt { font-weight: 600; color: #562300; }
.cp-glossary dd { margin: 0; color: #444; }
.cp-album { border-bottom: 1px dotted #c28a00; }
.cp-silent { margin: 12px 0 0; font-size: 13px; color: #6a5a30; }
.cp-argument { margin: 18px 0 0; padding: 10px 14px; border: 1px solid #f0e6cb; border-radius: 6px; }
.cp-argument summary { cursor: pointer; color: #562300; font-weight: 600; }
.cp-argument p { margin: 10px 0 0; color: #444; line-height: 1.6; }

/* Background, the passages about letters together, and what is open. */
.cp-quiet .cp-shape { font-size: 20px; margin: 0; }
.cp-note { color: #555; margin: 0; }
.cp-open { color: #555; }
.cp-general { margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid #f0e6cb; }
.cp-general summary { cursor: pointer; }
.cp-gwhat { color: #6a5a30; }
.cp-gcite { color: #8a7b52; font-size: 12px; margin-left: 6px; }

/* The list of sources, always shown. */
.cp-always { margin-top: 30px; padding-top: 14px; border-top: 2px solid #ead9a4; }
.cp-sources { padding-left: 0; list-style: none; color: #444; font-size: 13px; }
.cp-sources li { margin-bottom: 8px; scroll-margin-top: 60px; }
.cp-sources li:target { background: #fff6d8; border-radius: 3px; box-shadow: 0 0 0 6px #fff6d8; }
.cp-sources .cp-where { display: inline; margin-left: 4px; }
.cp-what { display: block; color: #555; }
.cp-src { border-bottom: 1px dotted #c9b77a; }

@media (max-width: 760px) {
    .cp-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .cp-card-line { display: none; }
    .cp-tab { min-width: 30px; padding: 2px 5px; }
    .cp-lanes { margin-left: 0; }
    .cp-lane-name { position: static; display: block; width: auto; padding-top: 2px; }
    .cp-prow { grid-template-columns: 1fr; }
    .cp-phead { display: none; }
    .cp-pcol:empty { display: none; }
    .cp-pcol::before { content: attr(data-group); display: block; margin-top: 6px; font-size: 11px; color: #8a7b52; text-transform: uppercase; letter-spacing: .05em; }
    .cp-ways td { display: block; padding: 0; }
    .cp-ways tr { display: block; margin-bottom: 6px; }
    .cp-reform span { display: none; }
}

/* The pages on reading Coptic aloud, as a series (coptic_series.php). */
.cs-series { margin: 4px 0 20px; padding: 10px 14px; background: #fffaea; border: 1px solid #ead9a4; border-radius: 8px; }
.cs-label { display: block; margin-bottom: 4px; font-size: 11px; color: #8a7b52; text-transform: uppercase; letter-spacing: .05em; }
.cs-series ol { margin: 0; padding-left: 20px; }
.cs-series li { margin: 2px 0; color: #6a5a30; }
.cs-series li span { color: #8a7b52; font-size: 13px; }
.cs-series li.cs-on b { color: #562300; }
.cs-series li.cs-on::marker { color: #c28a00; font-weight: 600; }

/* How Coptic stopped being spoken (history.php). */
.ch-page p { font-size: 16px; line-height: 1.7; color: #2e2413; }
.ch-page h2 { margin: 30px 0 10px; font-size: 21px; color: #562300; }
.ch-quote { margin: 0 0 18px; padding: 10px 18px; border-left: 4px solid #c28a00; background: #fffdf6; }
.ch-quote p { margin: 0 0 8px; font-style: italic; color: #444; }
.ch-quote .ch-english { font-style: normal; color: #2e2413; margin: 0; }
.ch-page [lang="ar"] { font-family: "Noto Naskh Arabic", serif; font-size: 1.1em; }
.ch-sources-head { font-size: 17px !important; }
.ch-sources { padding-left: 18px; font-size: 14px; color: #444; }
.ch-sources li { margin-bottom: 6px; }
/* Footnotes: a small number after each fact, leading to the page it rests on. */
.ch-ref { font-size: 11px; line-height: 0; margin-left: 1px; }
.ch-ref a { color: #9a6a00; text-decoration: none; padding: 0 1px; }
.ch-ref a:hover { text-decoration: underline; }
.ch-ref + .ch-ref::before { content: ","; color: #9a6a00; }
.ch-notes { padding-left: 26px; font-size: 14px; color: #444; }
.ch-notes li { margin-bottom: 3px; }
.ch-notes li:target, .ch-sources li:target { background: #fff4cc; }
.ch-back { text-decoration: none; margin-left: 2px; }
.ch-sources li { scroll-margin-top: 80px; } .ch-notes li, .ch-ref { scroll-margin-top: 80px; }
/* A photograph in an essay, with its caption and credit (cantors.php, music.php). */
.ch-figure { margin: 6px 0 22px; max-width: 640px; }
.ch-figure img { display: block; width: 100%; height: auto; border-radius: 4px; border: 1px solid #ead9a4; }
.ch-figure figcaption { margin-top: 6px; font-size: 13px; line-height: 1.5; color: #5a4a28; }
.ch-figure .ch-credit { display: block; color: #8a7b52; font-size: 12px; }
.ch-figure.ch-narrow { max-width: 340px; }

/* A book in Arabic, a chapter a page (worship.php): a Naskh at reading size,
   right to left, with the printed book's page numbers standing quietly in the
   text and the liturgical rubrics in red, as the service books print them. */
.ch-page .wb-text { font-family: "Noto Naskh Arabic", serif; font-size: 19px; line-height: 2; color: #2e2413; margin: 8px 0 20px; }
.ch-page .wb-text p { font-size: inherit; line-height: inherit; margin: 0 0 14px; }
.wb-text b { font-weight: 700; color: #21180a; }
.wb-text h2.wb-title { font-family: inherit; font-size: 30px; line-height: 1.5; text-align: center; color: #562300; margin: 12px 0 14px; }
.wb-text h3 { font-family: inherit; font-size: 23px; font-weight: 700; line-height: 1.6; color: #562300; margin: 30px 0 10px; }
.wb-text h4 { font-family: inherit; font-size: 20px; font-weight: 700; line-height: 1.6; color: #7a4a16; margin: 22px 0 8px; }
.wb-text h3, .wb-text h4, .wb-pg { scroll-margin-top: 80px; }
.wb-contents { list-style: none; max-width: 460px; margin: 0 auto 28px; padding: 12px 18px; background: #fffaea; border: 1px solid #ead9a4; border-radius: 8px; }
.wb-contents li { margin: 2px 0; color: #562300; }
.wb-contents li::before { content: "\25C6"; color: #c28a00; font-size: 11px; margin-left: 10px; vertical-align: 3px; }
.wb-quote { margin: 0 0 16px; padding: 8px 18px; border: 0; border-right: 4px solid #c28a00; background: #fffdf6; font-size: inherit; }
.ch-page .wb-quote p { margin: 0 0 8px; }
.ch-page .wb-text p.wb-rubric { color: #9b2f1a; font-size: 17px; margin-bottom: 8px; }
.wb-rubric b { color: #9b2f1a; }
.ch-page .wb-text p.wb-lines { padding-right: 18px; }
.ch-page .wb-text p.wb-sep { text-align: center; color: #c28a00; letter-spacing: .5em; }
.ch-page .wb-text p.wb-pgline { margin: 0; line-height: 1.2; }
.wb-pg { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 12px; font-weight: normal; color: #a8966a; white-space: nowrap; vertical-align: 2px; margin: 0 2px; }
.wb-pg:target { background: #fff4cc; color: #562300; border-radius: 3px; }
.wb-text .coptictext_utf8 { font-size: 1em; }
.wb-unsure { color: #b0402a; }
.wb-fn { font-size: 12px; line-height: 0; }
.wb-notes { margin: 24px 0 0; padding: 10px 22px 0 0; border-top: 1px solid #ead9a4; font-size: 15px; line-height: 1.8; }
.wb-notes a { text-decoration: none; }
/* The front page: the title as the book sets it, and the chapters. */
.wb-cover { text-align: center; margin: 10px 0 22px; padding: 18px 12px; background: #fffaea; border: 1px solid #ead9a4; border-radius: 8px; }
.ch-page .wb-cover p { margin: 0; font-size: 18px; line-height: 1.7; }
.ch-page .wb-cover .wb-booktitle { font-size: 38px; font-weight: 700; color: #562300; line-height: 1.5; }
.ch-page .wb-cover .wb-subtitle { font-size: 24px; color: #7a4a16; }
.ch-page .wb-cover .wb-author { margin-top: 12px; color: #6a5a30; }
.wb-toc { padding-left: 24px; }
.wb-toc li { margin: 6px 0; color: #6a5a30; }
.wb-toc a { font-size: 19px; }
.wb-gloss { color: #5a4a28; }
.wb-range { color: #8a7b52; font-size: 13px; white-space: nowrap; }
.wb-series li [lang="ar"] { font-size: 17px; }
.wb-start { font-size: 16px; }
.wb-more { margin: 10px 0; }
.wb-more summary { display: list-item; cursor: pointer; color: #905416; font-size: 16px; }
.wb-more .wb-text { margin-top: 10px; padding: 4px 14px; border-right: 3px solid #ead9a4; }
.wb-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin: 10px 0 20px; padding: 12px 0; border-top: 1px solid #ead9a4; border-bottom: 1px solid #ead9a4; }
.wb-pager .wb-next { margin-left: auto; text-align: right; }
.wb-credit { margin: 18px 0 8px; padding: 10px 16px; background: #fffaea; border: 1px solid #ead9a4; border-radius: 8px; }
.ch-page .wb-credit p { font-size: 14px; line-height: 1.6; color: #5a4a28; margin: 0 0 6px; }
.ch-page .wb-credit p[lang="ar"] { font-size: 16px; }
.ch-page .wb-credit p.wb-permission { font-weight: 600; color: #562300; }
/* The Tasbeha library (library.php): every series, a line on it and its pages. */
.lb-series { margin: 0 0 8px; }
.lb-page h2 { margin-top: 26px; }
.lb-series h3 { font-size: 19px; color: #562300; margin: 18px 0 6px; }
.lb-series h3 small { font-size: 18px; color: #8a7b52; margin-left: 6px; }
.ch-page .lb-series p.lb-about { margin: 0 0 6px; color: #444; }
.lb-pages { padding-left: 24px; }
.lb-pages li { margin: 3px 0; color: #6a5a30; }
.lb-pages li span { color: #8a7b52; font-size: 14px; }
.lb-pages li span[lang="ar"] { color: inherit; font-size: 17px; }
@media (max-width: 600px) {
    .ch-page .wb-text { font-size: 18px; line-height: 1.9; }
    .wb-text h2.wb-title { font-size: 25px; }
    .wb-text h3 { font-size: 21px; }
    .ch-page .wb-cover .wb-booktitle { font-size: 30px; }
    .wb-pager .wb-next { margin-left: 0; text-align: left; }
}

/* Related Audio (media/functions.php showHymnVersions): the hymn's other
   recordings, under the text, as cards across the page's width. */
#related_audio { margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid #ead9a4; }
.ra-head { font-size: 17px; font-weight: 600; color: #562300; margin: 0 0 10px; }
.ra-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 16px; }
.ra-list li { padding: 8px 10px; border: 1px solid #f1e9d2; border-radius: 4px; background: #fffdf6; line-height: 1.35; }
.ra-title { font-weight: 600; }
.ra-title .fa { color: #c28a00; margin-right: 3px; }
.ra-artist, .ra-album { display: block; font-size: 13px; }
.ra-artist { color: #555; margin-top: 2px; }
.ra-lesson { color: #c28a00; font-size: 12px; white-space: nowrap; }
.ra-lesson:hover { color: #8a6d00; }

/* Heard examples on the letter page: each word is a button that plays it. */
.cl-example { width: 250px; }
.cl-hear { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px;
    padding: 2px 6px 2px 26px; margin: 1px 0; position: relative; cursor: pointer; line-height: 1.5; }
.cl-hear::before { content: "\25B6"; position: absolute; left: 7px; top: 50%; margin-top: -8px;
    font-size: 11px; line-height: 16px; color: #b08d2a; }
.cl-hear:hover, .cl-hear:focus { background: #fff8e0; outline: none; }
.cl-hear:focus-visible { box-shadow: 0 0 0 2px #e5c96b; }
.cl-hear.cl-playing { background: #fff3c4; }
.cl-hear.cl-playing::before { content: "\266A"; color: #562300; }
.cl-heard { color: #555; font-size: 14px; margin: -6px 0 18px; }
/* A phone has room for the letter, its sound and the words; the name and the
   English word are the first things to go. */
@media (max-width: 600px) {
    .cl-letters .cl-name, .cl-letters .cl-as, .cl-letters th:nth-child(2), .cl-letters th:nth-child(4) { display: none; }
    .cl-shape, .cl-sound, .cl-example { width: auto; }
    .cl-shape { font-size: 20px; }
}
.cl-meaning { color: #777; font-size: 13px; margin-left: 4px; }
.cl-voice { font-size: 11px; color: #8a7b52; border: 1px solid #e0d2a8; border-radius: 3px; padding: 0 4px; white-space: nowrap; }