/* The hymn page (hymn_page.php), for ?v=2 while it is on trial.
 *
 * The HymnPage template of the Tasbeha design system
 * (https://claude.ai/artifact/RiqyCR21AfAyVT4GGPtNrF, components/HymnPage), with the
 * masthead, breadcrumb and footer it sits in. Built on hymn_library/design/tokens.css
 * (every value a --ts- token) and ornaments.css (the quiet rope, .ts-cord). The page
 * loads neither Bootstrap nor style.css, hymn_sync.css or library.css: this file is
 * the whole of its styling, so the old pages are untouched by it. The lesson's class
 * names (sync-*, sp-*, hd-*) are kept so hymn_sync.js drives the lines and player.
 *
 * Light theme only, as the site has no dark theme. The phone rules are @media
 * (max-width: 767px) rather than the design's container queries: a container would
 * hold the docked player, which must stay fixed to the screen.
 */

:root { color-scheme: light; }

/* ---------- The page ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
.hp-body { margin: 0; background: var(--ts-surface); color: var(--ts-text); font-family: var(--ts-font-serif); font-size: 18px;
    line-height: 1.55; -webkit-font-smoothing: antialiased; }
:where(.hp-body) a { color: var(--ts-link); }
:where(.hp-body) a:hover { color: var(--ts-brown); }
:where(.hp-body) img { max-width: 100%; }
:where(.hp-body) :focus-visible { outline: var(--ts-size-focus-ring) solid var(--ts-focus); outline-offset: 2px; }
:where(.hp-body) h1, :where(.hp-body) h2, :where(.hp-body) h3 { margin: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
/* ---------- The scripts ---------- */
.coptictext_utf8, .ts-coptic { font-family: var(--ts-font-coptic); font-weight: 400; }
.arabictext, .ts-arabic { font-family: var(--ts-font-arabic); direction: rtl; unicode-bidi: embed; }
.ts-display { font-family: var(--ts-font-display); font-weight: 400; letter-spacing: .01em; }
.ts-kicker { font-family: var(--ts-font-sans); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ts-ochre); }
.ts-rubric { font-family: var(--ts-font-serif); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ts-text-muted); }
.ts-sep-coptic { color: var(--ts-bronze); padding: 0 .35em; }




/* ---------- Breadcrumb ---------- */
.breadcrumb, .ts-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0 0 14px; padding: 0; list-style: none; font-size: 15px; line-height: 1.5; }
.ts-crumbs li { display: inline-flex; align-items: center; }
.ts-crumbs li + li::before { content: ""; width: 5px; height: 5px; margin: 0 10px; background: var(--ts-bronze); border-radius: 50%; flex: none; }
.ts-crumbs a { color: var(--ts-text-muted); text-decoration: none; }
.ts-crumbs a:hover { color: var(--ts-brown); text-decoration: underline; }
.ts-crumbs [aria-current=page] { color: var(--ts-text); font-weight: 600; }
.ts-crumbs .arabictext { font-size: 15px; margin-left: 6px; color: var(--ts-text-muted); }

/* ---------- The lesson and hymn pages (site class names) ---------- */
.sync-translit, .sync-english, .cl-reading { font-family: var(--ts-font-serif); }

/* The toolbar above the lines */
.sync-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 12px 0 0; padding: 10px 14px;
    background: var(--ts-surface-raised); border: 1px solid var(--ts-border); border-bottom: 0; border-radius: var(--ts-radius-xs) var(--ts-radius-xs) 0 0; font-size: 16px; }
.sync-toolbar + .sync-panel { border-top-left-radius: 0; border-top-right-radius: 0; }
.sync-toolbar label { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; color: var(--ts-text); }
.sync-toolbar label input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--ts-border-control);
    border-radius: var(--ts-radius-xs); background: var(--ts-surface); display: grid; place-content: center; cursor: pointer; }
.sync-toolbar label input:checked { background: var(--ts-umber); border-color: var(--ts-umber); }
.sync-toolbar label input:checked::after { content: ""; width: 10px; height: 5px; border: 2.5px solid var(--ts-white); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.sync-toolbar label input:focus-visible { outline: var(--ts-size-focus-ring) solid var(--ts-focus); outline-offset: 2px; }
.sync-font { display: inline-flex; }
.sync-font-btn { height: var(--ts-size-control-s); min-width: 36px; border: 1px solid var(--ts-border-control); background: var(--ts-surface); color: var(--ts-brown);
    font-family: var(--ts-font-serif); font-weight: 700; line-height: 1; padding: 0 9px; font-size: 16px; cursor: pointer; }
.sync-font-btn:first-child { border-radius: var(--ts-radius-xs) 0 0 var(--ts-radius-xs); font-size: 13px; }
.sync-font-btn + .sync-font-btn { border-left: 0; border-radius: 0 var(--ts-radius-xs) var(--ts-radius-xs) 0; }
.sync-font-btn:hover:not(:disabled) { background: var(--ts-surface-raised); }
.sync-font-btn:disabled { color: var(--ts-ink-soft); background: var(--ts-surface-raised); cursor: not-allowed; }
.sync-title { color: var(--ts-brown); font-size: 17px; font-weight: 700; margin-right: auto; display: inline-flex; align-items: baseline; gap: 6px; }
.sync-title .fa { color: var(--ts-ochre); }
.sync-title small { color: var(--ts-text-muted); font-weight: 400; font-size: 15px; }

/* Difficulty, 1 to 10 */
.hd-dots { display: inline-flex; gap: 3px; align-items: center; vertical-align: middle; }
.hd-dot { width: 7px; height: 7px; background: var(--ts-border); display: inline-block; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(200,156,101,.6); }
.hd-dot.hd-on { background: var(--ts-bronze); box-shadow: inset 0 0 0 1px var(--ts-brown); }
.hd-num { font-size: 14px; color: var(--ts-text-muted); margin-left: 4px; font-variant-numeric: tabular-nums; }

/* The panel and its lines */
.sync-panel { border: 1px solid var(--ts-border); border-radius: var(--ts-radius-xs); background: var(--ts-surface); }
.sync-body { padding: var(--ts-panel-pad); font-size: var(--ts-text-step-3); }
.sync-para { padding: var(--ts-para-pad-y) 0; border-bottom: 1px solid var(--ts-border); }
.sync-para:last-child { border-bottom: 0; }
.sync-line { position: relative; padding: var(--ts-line-pad-y) var(--ts-line-pad-x); margin: var(--ts-line-gap) 0;
    border-left: var(--ts-size-active-bar) solid transparent; border-radius: 0 var(--ts-radius-sm) var(--ts-radius-sm) 0; cursor: pointer;
    transition: background-color var(--ts-duration-base) var(--ts-ease-standard); }
.sync-line:hover { background: var(--ts-surface-raised); }
.sync-line:focus-visible { outline: var(--ts-size-focus-ring) solid var(--ts-focus); outline-offset: -2px; }
.sync-line.active { background: var(--ts-highlight); border-left-color: var(--ts-highlight-edge); }
.sync-line.upcoming { border-left-color: var(--ts-border-control); border-left-style: dotted; }
.sync-line.sync-cue { cursor: default; color: var(--ts-text-muted); font-style: italic; }
.sync-line.sync-cue:hover { background: none; }
.sync-line.row { display: flex; align-items: flex-end; gap: 0; }
.sync-line.row > .sync-text { flex: 1 1 60%; min-width: 0; }
.sync-line.row > .sync-translation { flex: 1 1 40%; min-width: 0; padding-bottom: 3px; padding-left: 15px; }
.sync-text { line-height: 1.25; }
.sync-coptic { display: block; font-family: var(--ts-font-coptic); font-size: 1.45em; color: var(--ts-text); }
.sync-translit { display: block; font-size: 1.05em; font-weight: 500; color: var(--ts-reading); }
.sync-english { font-size: 1.2em; line-height: 1.4; color: var(--ts-text-muted); }
.sync-line.row.active .sync-english { color: var(--ts-text); }
.wp { display: inline-block; vertical-align: bottom; margin: 2px var(--ts-word-gap) 2px 0; border-radius: var(--ts-radius-sm); }
.wp .sync-translit, .wp .sync-coptic { padding: 0 1px; }
.sync-line.active .sync-translit { color: var(--ts-ochre); }
.sync-line.active .sung, .sync-line.active .sung .w { color: var(--ts-ochre); }
.sync-line.active .now, .sync-line.active .now .w { color: var(--ts-ink); background: var(--ts-bronze); border-radius: var(--ts-radius-sm); box-shadow: var(--ts-shadow-word-now); }
.sync-line.active .wp.now .w { background: none; box-shadow: none; }
.sync-arabic { float: none; text-align: right; margin-top: 1px; font-family: var(--ts-font-arabic); font-size: 1.3em; line-height: 1.6; color: var(--ts-text-muted); }
.sync-line.active .sync-arabic { color: var(--ts-text); }
.sync-rubric { display: block; font-size: .8em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ts-text-muted); padding: 4px 14px 0; }
.sync-progress { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: var(--ts-size-progress); background: var(--ts-border); }
.sync-progress > div { height: 100%; background: var(--ts-bronze); }
.sync-line.active .sync-progress { display: block; }
.sync-countdown { position: absolute; right: 10px; top: -10px; z-index: 1; font-family: var(--ts-font-sans); font-size: 11.5px; line-height: 16px;
    font-variant-numeric: tabular-nums; color: var(--ts-ochre); background: var(--ts-gold-pale); border: 1px solid var(--ts-bronze);
    border-radius: var(--ts-radius-pill); padding: 0 8px; }
.sync-countdown:empty { display: none; }

/* The docked player: kept exactly as the lesson pages have it (hymn_sync.css), with its
   gold play button, gold timeline and warm ground; the user preferred it to the restyle. */
/* ---- 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; }
/* The play controls sit in the exact middle of the bar: what plays on the left,
   download and speed on the right. On a phone, what plays and download and speed
   share the top row, and the controls are centred on their own row below. */
.sp-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 16px; }
.sp-bar > .sp-group:first-child { grid-column: 2; grid-row: 1; }
.sp-bar > .sp-now { grid-column: 1; grid-row: 1; }
.sp-bar > .sp-group:last-child { grid-column: 3; grid-row: 1; justify-self: end; }
@media (max-width: 767px) {
    .sp-bar, .hp-player .sp-bar { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 2px; }
    .sp-bar > .sp-now, .hp-player .sp-bar > .sp-now { grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
    .sp-bar > .sp-group:last-child { grid-column: 2; grid-row: 1; }
    .sp-bar > .sp-group:first-child { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}
.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; }
}
.sync-keys { color: #666; font-size: 13px; white-space: nowrap; }
.sync-keys kbd { background: #f6f1e1; color: #5c4a10; box-shadow: inset 0 -1px 0 #d9c98f; padding: 1px 5px; font-size: 11px; }

/* Recordings (the old Related Audio cards; the HymnPage uses .hp-recs) */
.related_audio { margin: 28px 0 8px; }
.ra-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px 16px; }
.ra-list li { position: relative; padding: 12px 14px; border: 1px solid var(--ts-border); border-radius: var(--ts-radius-xs); background: var(--ts-surface); line-height: 1.35; font-size: 16px; }
.ra-list li:hover { border-color: var(--ts-border-control); box-shadow: var(--ts-shadow-raised); }
.ra-title { font-weight: 600; color: var(--ts-text); text-decoration: none; }
.ra-title:hover { color: var(--ts-brown); text-decoration: underline; }
.ra-title .fa { color: var(--ts-ochre); margin-right: 4px; }
.ra-artist, .ra-album { display: block; font-size: 14.5px; }
.ra-artist { color: var(--ts-text-muted); margin-top: 4px; }
.ra-album { color: var(--ts-link); }
.ra-lesson { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 0 7px; height: 20px; border-radius: var(--ts-radius-sm);
    background: var(--ts-gold-pale); color: var(--ts-ochre); font-size: 12.5px; font-weight: 700; text-decoration: none; vertical-align: 2px; }
.ra-lesson:hover { background: var(--ts-bronze); }


/* On to the next lesson */
.sync-next { margin: 14px 0 0; padding: 14px 18px; background: var(--ts-surface-raised); border: 1px solid var(--ts-bronze); border-radius: var(--ts-radius-xs);
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 17px; box-shadow: inset 0 0 0 3px var(--ts-surface-raised), inset 0 0 0 4px var(--ts-border); }
.sync-next b { color: var(--ts-brown); }
.sync-next .fa-graduation-cap { color: var(--ts-ochre); font-size: 20px; }
.sync-next .ts-grow { margin-right: auto; }


/* ---------- Hymn page (template) ---------- */
/* One page for every hymn text, in three modes set by the data: Read (no recording
   chosen), Listen and read (a recording without timings), Lesson (a recording with
   approved timings). It reuses the lesson's own classes (sync-*, sp-*, hd-*, ra-*) for
   the lines, toolbar and player, and adds hp-* for the page around them.
   .hp is a size container: the phone rules below follow the page's own width, so a
   preview frame shows the phone layout. On the site .hp spans the viewport, so the
   same rules can ship as @media (max-width: 767px) / (max-width: 599px) if a browser
   without container queries matters. */
.hp { background: var(--ts-surface); color: var(--ts-text);
    font-family: var(--ts-font-serif); font-size: 18px; line-height: 1.55; }
.hp-in { max-width: var(--ts-container); margin: 0 auto; padding: 0 var(--ts-gutter-desktop) var(--ts-space-12); }

/* Where it sits: the library path, parent category last */
.hp-crumbs .ts-crumbs { margin: 18px 0 8px; font-size: 15px; }
.hp-crumbs .ts-crumbs a { text-decoration: none; }

/* The names: English (the h1, Marcellus), Coptic, Arabic; a missing one is left out */
.hp-names { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; }
.hp-en { font-family: var(--ts-font-display); font-weight: 400; font-size: 28px; line-height: 1.12; letter-spacing: .01em; margin: 0; color: var(--ts-title); text-wrap: balance; }
.hp-cop { font-family: var(--ts-font-coptic); font-size: 30px; line-height: 1.25; color: var(--ts-brown); }
.hp-ar { font-family: var(--ts-font-arabic); font-size: 26px; font-weight: 600; line-height: 1.5; color: var(--ts-title); margin-left: auto; }
.hp-head .ts-cord { margin: 12px 0 0; }

/* The recording line: what plays, or the way in to it */
.hp-listen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 0 0; font-size: 16.5px; color: var(--ts-text-muted); }
.hp-mode { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ts-font-sans); font-size: 12.5px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ts-ochre); }
.hp-mode svg, .hp-ic { width: 1em; height: 1em; flex: none; fill: currentColor; }
.hp-who { color: var(--ts-text); font-weight: 600; }
.hp-album { color: var(--ts-link); }
.hp-len { font-family: var(--ts-font-sans); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ts-text-muted); }
.hp-listen-more { margin-left: auto; font-size: 16px; color: var(--ts-link); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.hp-listen-more:hover { text-decoration: underline; }
.hp-listen-none { font-style: italic; }
.hp-cta { display: inline-flex; align-items: center; gap: 8px; height: var(--ts-size-control); padding: 0 16px; border-radius: var(--ts-radius-xs);
    font-family: var(--ts-font-serif); font-size: 17px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.hp-cta--lesson { background: var(--ts-accent); color: var(--ts-white); }
.hp-cta--lesson:hover { background: var(--ts-ink); color: var(--ts-white); }
.hp-cta--play { background: var(--ts-surface); color: var(--ts-brown); border-color: var(--ts-border-control); }
.hp-cta--play:hover { background: var(--ts-surface-raised); }
.hp-cta .hp-ic { font-size: 15px; }

/* The text: the lesson's toolbar and panel, on every hymn page */
.hp-text { margin-top: 16px; }
.hp .sync-toolbar.hp-tools { position: sticky; top: 0; z-index: var(--ts-z-sticky); margin: 0; border-bottom: 1px solid var(--ts-border);
    border-radius: var(--ts-radius-xs) var(--ts-radius-xs) 0 0; }
.hp .hp-tools + .sync-panel { border-top: 0; border-radius: 0 0 var(--ts-radius-xs) var(--ts-radius-xs); }
.hp .sync-panel { font-size: 14px; }  /* the A-/A+ steps are % of this, as on the site */
.hp .sync-line:not([data-start]) { cursor: default; }
.hp .sync-line:not([data-start]):hover { background: none; }
.hp .sync-title .hp-ic { color: var(--ts-ochre); align-self: center; }
/* Speaker cues (People, Deacon, Priest) stay as the lesson shows them: text-muted italic, not sung */
.hp .sync-para > .sync-note { margin: 6px var(--ts-line-pad-x) 0; font-size: 1.05em; font-style: italic; color: var(--ts-text-muted); }
.hp-empty-tr { margin: 0; padding: 10px var(--ts-line-pad-x) 4px; font-size: 1.05em; font-style: italic; color: var(--ts-text-muted); }
/* Which scripts show (hymn_sync.js sets these; remembered per visitor) */
#hymn-sync.hide-coptic .sync-text, #hymn-sync.hide-translit .sync-translit,
#hymn-sync.hide-english .sync-english, #hymn-sync.hide-arabic .sync-arabic,
#hymn-sync.hide-english .hp-prose-en, #hymn-sync.hide-arabic .hp-prose-ar { display: none; }
#hymn-sync.hide-english.hide-arabic .sync-translation { display: none; }

/* A text without Coptic (English, Arabic or both): paragraph beside paragraph */
.hp-prose { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 40px; padding: 12px var(--ts-line-pad-x); }
.hp-prose--one, #hymn-sync.hide-english .hp-prose, #hymn-sync.hide-arabic .hp-prose { grid-template-columns: minmax(0, 1fr); }
.hp-prose-en { font-size: 1.2em; line-height: 1.5; color: var(--ts-text); max-width: 34em; }
.hp-prose-ar { font-family: var(--ts-font-arabic); font-size: 1.3em; line-height: 1.8; color: var(--ts-text); text-align: right; }
.hp-prose p { margin: 0; }

/* About this text: notes, where it sits, who wrote it down, editors' links */
.hp-about { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 10px 24px; margin: 28px 0 0; padding: 18px 0 0; border-top: 1px solid var(--ts-border); font-size: 16.5px; }
.hp-about dt { font-family: var(--ts-font-sans); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ts-text-muted); padding-top: 4px; }
.hp-about dd { margin: 0; max-width: var(--ts-measure); }
.hp-about .hp-note { font-style: italic; }
.hp-place { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.hp-place a { text-decoration: none; }
.hp-place a:hover { text-decoration: underline; }
.hp-edit { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.hp-edit small { color: var(--ts-text-muted); font-size: 14px; }
/* an action that changes data is a button, styled like the links beside it */
.hp-edit-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--ts-link); text-decoration: underline; cursor: pointer; }

/* The recordings: one list, grouped by who sings, the lessons first */
.hp-recs { margin: 40px 0 0; scroll-margin-top: 60px; }
.hp-recs > .ts-cord { margin: 0 0 20px; }
.hp-recs > h2 { font-family: var(--ts-font-display); font-size: 20px; font-weight: 400; letter-spacing: .01em; text-transform: none; margin: 0 0 4px; }
.hp-recs > h2 span { font-family: var(--ts-font-sans); font-size: 17px; letter-spacing: 0; color: var(--ts-text-muted); font-weight: 400; margin-left: 6px; }
.hp-recs-by { margin: 18px 0 0; }
.hp-recs-by > h3 { font-size: 17px; font-weight: 700; color: var(--ts-brown); margin: 0 0 4px; }
.hp-recs-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ts-border); }
.hp-rec { display: grid; grid-template-columns: 36px minmax(0, 1.2fr) minmax(0, 1fr) 56px 90px; align-items: center; gap: 0 14px;
    padding: 6px 4px; border-bottom: 1px solid var(--ts-border); font-size: 16.5px; line-height: 1.35; }
.hp-rec:hover { background: var(--ts-surface-raised); }
.hp-rec[hidden] { display: none; }
.hp-rec-play { width: 32px; height: 32px; border-radius: var(--ts-radius-round); border: 1px solid var(--ts-border-control); color: var(--ts-brown);
    display: grid; place-items: center; text-decoration: none; background: var(--ts-surface); }
.hp-rec-play .hp-ic { width: 11px; height: 11px; margin-left: 2px; }
.hp-rec-play:hover { background: var(--ts-bronze); border-color: var(--ts-brown); color: var(--ts-ink); }
.hp-rec-title { color: var(--ts-text); font-weight: 600; text-decoration: none; }
.hp-rec-title:hover { color: var(--ts-brown); text-decoration: underline; }
.hp-rec-album { color: var(--ts-text-muted); font-size: 15px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-rec-album:hover { color: var(--ts-link); text-decoration: underline; }
.hp-rec-len { font-family: var(--ts-font-sans); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ts-text-muted); text-align: right; }
.hp-rec .ra-lesson { margin: 0; justify-self: start; }
.hp-recs-more { margin: 6px 0 0; padding: 4px 0; border: 0; background: none; color: var(--ts-link); font: inherit; font-size: 16px; cursor: pointer; }
.hp-recs-more:hover { text-decoration: underline; }

/* The player: docked to the foot of the screen (sticky to the page's end; the site's
   #sync-player may stay position: fixed) */
.hp-player { position: sticky; bottom: 0; z-index: var(--ts-z-player); }
.hp-player .sp-now .sp-rec { color: var(--ts-text-muted); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-player .sp-btn .hp-ic { width: 16px; height: 16px; }
.hp-player .sp-play .hp-ic { width: 18px; height: 18px; margin-left: 3px; }
.hp-player .sp-play.is-playing .hp-ic { margin-left: 0; }
.hp-player .sync-keys { display: none; }
@media (min-width: 1100px) { .hp-player .sync-keys { display: inline; } }

/* Phones */
@media (max-width: 767px) {
    .hp-in { padding: 0 var(--ts-gutter-phone) var(--ts-space-10); }
    .hp-crumbs .ts-crumbs li { display: none; }
    .hp-crumbs .ts-crumbs li:last-child { display: inline-flex; }
    .hp-crumbs .ts-crumbs li:last-child::before { content: "\2039"; width: auto; height: auto; margin: 0 6px 0 0; background: none; transform: none; color: var(--ts-text-muted); font-size: 20px; line-height: 1; }
    .hp-names { flex-direction: column; align-items: stretch; gap: 0; }
    .hp-en { font-size: 25px; }
    .hp-cop { font-size: 24px; }
    .hp-ar { font-size: 22px; margin-left: 0; text-align: right; }
    .hp-listen { font-size: 15.5px; gap: 6px 12px; }
    .hp-listen-more { margin-left: 0; }
    .hp .sync-toolbar.hp-tools { gap: 6px 14px; padding: 8px 10px; font-size: 15px; }
    .hp .sync-title { flex-basis: 100%; }
    .hp .sync-line.row { display: block; }
    .hp .sync-line.row > .sync-translation { padding: 2px 0 0; }
    .hp .sync-line.row .sync-english { font-style: italic; }
    .hp .sync-body { padding: 8px 4px; }
    .hp-prose { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .hp-about { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .hp-about dd { margin-bottom: 10px; }
    .hp-rec { grid-template-columns: 36px minmax(0, 1fr) auto; row-gap: 0; }
    .hp-rec-album { grid-column: 2 / 4; grid-row: 2; }
    .hp-rec .ra-lesson { grid-column: 3; grid-row: 1; }
    .hp-rec-len { grid-column: 3; grid-row: 1; }
    .hp-rec-len:has(+ .ra-lesson) { display: none; }
    .hp-player .sp-bar { flex-wrap: wrap; gap: 2px 6px; justify-content: center; }
    .hp-player .sp-now { order: -1; flex-basis: 100%; gap: 8px; padding-top: 2px; }
    .hp-player .sp-label { display: none; }
    .hp-player .sp-group { gap: 0; }
}

/* ---------- Typography: the interface in Figtree ---------- */
/* (The masthead, menu and footer are in design/site_frame.css.) */
/* Titles and section heads are Marcellus (400, its only weight; never uppercased
   by CSS); English running text and translations Crimson Pro; Coptic and Arabic their
   own faces. Everything a visitor operates or scans (menus, buttons, chips, labels,
   the breadcrumb, metadata, recording rows, forms, the player) is Figtree. */
.ts-btn, .ts-tag, .ts-badge, .ts-crumbs, .breadcrumb, .ts-mast-nav a, .ts-mast-search, .ts-submenu a,
.ts-field, .ts-field label, .ts-input, .ts-select, .ts-textarea, .ts-help, .ts-error, .ts-check, .ts-radio, .ts-toggle,
.ts-tab, .ts-pages, .ts-toast, .ts-tooltip, .ts-alert-title, .ts-progress, .ts-table th, .ts-hh-meta, .ts-cantor-meta,
.ts-cantor-albums, .ts-footer ul, .ts-footer-base, .ts-search, .ts-empty .ts-btn, .lu-album, .lu-count, .lu-length,
.sync-toolbar, .sync-title, .sync-title small, .sync-font-btn, .sp-btn, .sp-time, .sp-next, .sync-keys, .sync-countdown, .sync-next,
.ra-title, .ra-artist, .ra-album, .ra-lesson, .hd-num,
.hp-crumbs, .hp-listen, .hp-cta, .hp-about, .hp-rec, .hp-recs-by > h3, .hp-recs-more, .hp-empty-tr, .hp-player .sp-rec {
    font-family: var(--ts-font-sans); }
.hp-crumbs .ts-crumbs { font-size: 14px; }
.hp-listen { font-size: 15px; }
.hp-cta { font-size: 15px; border-radius: var(--ts-radius-pill); }
.hp-about { font-size: 15px; }
.hp-about .hp-note { font-family: var(--ts-font-serif); font-size: 17px; }
.hp-rec { font-size: 15px; }
.hp-rec-album { font-size: 14px; }
.hp-recs-by > h3 { font-size: 15px; font-weight: 600; }
.sync-toolbar { font-size: 15px; }
.sync-title { font-size: 15px; font-weight: 600; }
.sync-title small { font-size: 14px; }
.sync-font-btn { font-weight: 600; }
.sp-btn { font-weight: 600; }


/* Breadcrumb and headings. The sizes are those of the approved review page (its
   page styles set the title at 40px and the Recordings heads larger than the
   component's own 28px and 15px). */
.hp .hp-en { font-size: 40px; line-height: 1.1; }
.hp .hp-recs > h2 { font-size: 24px; letter-spacing: .01em; margin: 0 0 6px; }
.hp .hp-recs-by { margin-top: 26px; }
.hp .hp-recs-by > h3 { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.hp-crumbs { font-family: var(--ts-font-sans); }
.hp-head { margin: 0; }
.hp-gone { font-family: var(--ts-font-serif); font-size: 18px; margin: 16px 0 0; }

/* The toolbar sticks under the top of the screen as the text scrolls. */
.hp .sync-toolbar.hp-tools { top: 0; }
.hp .sync-toolbar .fa { color: var(--ts-ochre); }
.hp .sync-title .fa { align-self: center; }

/* Lines: the site's markup has a wrapper per paragraph when an older lesson keeps
   its translation per paragraph rather than per line. */
.hp-para-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 15px; align-items: start; }
.hp-para-en { padding: var(--ts-line-pad-y) var(--ts-line-pad-x); }
.hp .sync-line { color: var(--ts-text); }
.hp .sync-line.sync-cue { color: var(--ts-text-muted); }
.hp .sync-line:not(.row) .sync-text { max-width: none; }
.hp .sync-line[data-start] .w:hover { text-decoration: underline; text-decoration-color: var(--ts-bronze); }
.hp .sync-line.active .w, .hp .sync-line.active .wp { transition: color var(--ts-duration-fast), background-color var(--ts-duration-fast); }
.hp .sync-note { margin: 6px var(--ts-line-pad-x) 4px; padding-top: 6px; border-top: 1px dashed var(--ts-border); font-size: 1.05em; font-style: italic; color: var(--ts-text-muted); }
.hp .sync-note b, .hp .hp-note b { font-style: normal; }
.hp #hymn-sync.hide-coptic .sync-text { display: none; }
#hymn-sync.hide-coptic .hp-para-cols { grid-template-columns: minmax(0, 1fr); }
.hp .hp-prose-en p, .hp .hp-prose-ar p { margin: 0; }
.hp .hp-prose-en hr, .hp .hp-prose-ar hr { border: 0; border-top: 1px dashed var(--ts-border); margin: 10px 0; }
.hp-rec-title .arabictext { font-weight: 500; margin-left: 6px; }

/* Previews of timings visitors do not see yet, for their editors */
.hp-alert { margin: 16px 0 0; padding: 10px 14px; border: 1px solid var(--ts-border); border-left: 4px solid var(--ts-warning); border-radius: var(--ts-radius-xs);
    background: var(--ts-surface-raised); font-family: var(--ts-font-sans); font-size: 15px; }
.hp-alert.alert-info { border-left-color: var(--ts-info); }
.hp-alert .btn { font: inherit; font-size: 14px; font-weight: 600; padding: 3px 12px; margin-left: 6px; border-radius: var(--ts-radius-pill); cursor: pointer;
    border: 1px solid var(--ts-border-control); background: var(--ts-white); color: var(--ts-brown); }
.hp-alert .btn-success { background: var(--ts-accent); border-color: var(--ts-accent); color: var(--ts-on-accent); }
.hp-alert .btn-danger { color: var(--ts-danger); border-color: var(--ts-danger); }
.hp-alert .text-danger { color: var(--ts-danger); }
.hp .alert-success { border-left-color: var(--ts-success); }

/* The next lesson, once the recording has been heard to the end */
.hp .sync-next { margin-top: 16px; }
.hp .sync-next .hp-cta { height: var(--ts-size-control-s); }

/* The docked player: fixed to the foot of the screen (hymn_sync.js pads the page
   for it), and the album pages' parts it shares: the hover tip, bookmarks, the
   keyboard list behind "?". */
#sync-player.hp-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--ts-z-player); font-family: var(--ts-font-sans); }
.hp-player .sp-bar { max-width: calc(var(--ts-container) - 2 * var(--ts-gutter-desktop)); margin: 0 auto; }
.hp-player .sp-timeline { cursor: pointer; touch-action: none; }
.hp-player .sp-played { width: 0; }
.hp-player .sp-timeline:hover .sp-head { transform: scale(1.15); }
.hp-player .sp-timeline:focus { outline: none; }
.hp-player .sp-timeline:focus-visible .sp-head { box-shadow: 0 0 0 1px var(--ts-brown), 0 0 0 4px var(--ts-focus); }
.hp-player .sp-tip { display: none; position: absolute; bottom: 28px; transform: translateX(-50%); z-index: 1; pointer-events: none;
    background: var(--ts-ink); color: var(--ts-white); font-size: 13px; padding: 3px 8px; border-radius: var(--ts-radius-sm);
    white-space: nowrap; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; }
.hp-player .sp-tip b { font-weight: 400; color: var(--ts-gold-pale); margin-right: 6px; font-variant-numeric: tabular-nums; }
.hp-player .sp-next:empty { display: none; }
.hp-player .sp-line:empty { display: none; }
.hp-player .sp-btn .fa { line-height: 1; }
.hp-player .sp-btn.sp-play .fa-pause { margin-left: 0; }
.hp-player .sp-btn.sp-play.sp-hint { animation: hp-pulse 1.4s ease-out infinite; }
@keyframes hp-pulse { 0% { box-shadow: inset 0 0 0 1px var(--ts-brown), 0 0 0 0 rgba(200,156,101,.7); }
    100% { box-shadow: inset 0 0 0 1px var(--ts-brown), 0 0 0 14px rgba(200,156,101,0); } }
.hp-player .sp-help { display: none; min-width: 36px; width: 36px; height: 36px; padding: 0; font-family: var(--ts-font-sans); font-size: 15px;
    border: 1px solid var(--ts-border-control); }
.hp-player .sp-keys-pop { position: absolute; right: 8px; bottom: 100%; margin-bottom: 8px; z-index: 1; padding: 10px 14px; white-space: nowrap;
    background: var(--ts-white); border: 1px solid var(--ts-border); border-radius: var(--ts-radius-md); box-shadow: var(--ts-shadow-overlay);
    font-size: 14px; line-height: 1.9; color: var(--ts-text); }
.hp-player .sp-keys-pop b { display: block; color: var(--ts-brown); margin-bottom: 2px; }
@media (min-width: 600px) and (max-width: 1099px) { .hp-player .sp-help { display: inline-block; } }
.hp-player .sp-marks { position: absolute; inset: 0; pointer-events: none; }
.hp-player .bm-tl { position: absolute; top: 3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; pointer-events: auto; cursor: pointer;
    box-shadow: 0 0 0 2px var(--ts-white), 0 0 0 3px var(--ts-brown); }
.hp .bm-text { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 3px 0 0; vertical-align: middle; cursor: pointer;
    box-shadow: 0 0 0 2px var(--ts-white); }
.hp-player .bm-tl:hover, .hp-player .bm-tl:focus, .hp .bm-text:hover, .hp .bm-text:focus { outline: none; box-shadow: 0 0 0 2px var(--ts-white), 0 0 0 3px var(--ts-focus); }
.hp-player .sp-bm-list { font-variant-numeric: tabular-nums; min-width: 36px; }
.hp-player .sp-bm-count { background: var(--ts-accent); color: var(--ts-on-accent); border-radius: var(--ts-radius-pill); padding: 1px 7px; font-size: 12px; font-family: var(--ts-font-sans); }
.hp-player .sp-bm-add.sp-flash { background: var(--ts-selected); color: var(--ts-umber); }
.hp-player .sp-bm-pop { position: absolute; right: 0; bottom: 100%; margin-bottom: 8px; z-index: 1; width: 320px; max-width: 90vw; max-height: 50vh; overflow: auto;
    padding: 10px 8px 8px 14px; background: var(--ts-white); border: 1px solid var(--ts-border); border-radius: var(--ts-radius-md); box-shadow: var(--ts-shadow-overlay); font-size: 14px; }
.hp-player .bm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; padding-right: 6px; }
.hp-player .bm-head b { color: var(--ts-brown); }
.hp-player .bm-clear { border: 0; background: none; color: var(--ts-link); font: inherit; font-size: 13px; text-decoration: underline; padding: 4px 0; cursor: pointer; }
.hp-player .bm-row { display: flex; align-items: center; gap: 8px; }
.hp-player .bm-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.hp-player .bm-go { flex: 1; min-width: 0; border: 0; background: none; text-align: left; padding: 5px 0; font: inherit; color: var(--ts-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.hp-player .bm-go b { margin-right: 6px; font-variant-numeric: tabular-nums; }
.hp-player .bm-go:hover { text-decoration: underline; }
.hp-player .bm-del { flex: none; border: 0; background: none; font-size: 18px; line-height: 1; color: var(--ts-text-muted); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }
.hp-player .bm-del:hover { background: var(--ts-surface-raised); color: var(--ts-brown); }

/* Phones */
@media (max-width: 767px) {
    .hp .hp-en { font-size: 34px; }
    .hp .hp-recs > h2 { font-size: 22px; }
    .hp .hp-recs-by > h3 { font-size: 18px; }
    .hp-para-cols { grid-template-columns: minmax(0, 1fr); }
    .hp-para-en { font-style: italic; padding-top: 0; }
    .hp .sync-coptic { font-size: 1.35em; }
    .hp .sync-countdown { top: -8px; }
    #sync-player.hp-player { padding: 0 8px 6px; }
    .hp-player .sp-timeline { margin: 0 -8px; }
    .hp-player .sp-btn { min-width: 40px; padding: 0 6px; }
    .hp-player .sp-now { font-size: 13px; }
    .hp-player .sp-line { font-size: 15px; }
    .hp-player .sync-keys { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hp-player .sp-btn.sp-play.sp-hint { animation: none; box-shadow: inset 0 0 0 1px var(--ts-brown), 0 0 0 4px var(--ts-bronze); }
    .hp .sync-line, .hp .sync-line.active .w, .hp .sp-btn { transition: none; }
}

/* ---------- Category page (cat_page.php, /hymn_library/cat/N?v=2) ---------- */
.cp-head { padding-bottom: var(--ts-space-4); border-bottom: 1px solid var(--ts-border); }
.cp-facts { margin: 6px 0 0; font-family: var(--ts-font-sans); font-size: 15px; color: var(--ts-text-muted); }
.cp-facts span { margin: 0 4px; color: var(--ts-bronze); }
.cp-h2 { margin: var(--ts-space-8) 0 var(--ts-space-3); font-family: var(--ts-font-sans); font-size: 13px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ts-text-muted); }

/* The sections under a category, as cards */
.cp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cp-card { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px;
    background: var(--ts-surface-raised); border: 1px solid var(--ts-border); border-radius: var(--ts-radius-sm);
    color: var(--ts-text); text-decoration: none; }
.cp-card:hover { border-color: var(--ts-gold); background: var(--ts-highlight); text-decoration: none; }
.cp-card:focus-visible { outline: var(--ts-size-focus-ring) solid var(--ts-focus); outline-offset: 2px; }
.cp-card-en { font-family: var(--ts-font-display); font-weight: 400; font-size: 18px; line-height: 1.25; color: var(--ts-title); }
.cp-card-ar { font-family: var(--ts-font-arabic); font-size: 16px; line-height: 1.5; color: var(--ts-title); text-align: right; }
.cp-card-n { margin-top: auto; padding-top: 6px; font-family: var(--ts-font-sans); font-size: 14px; color: var(--ts-text-muted); }

/* The texts, in the order they are sung */
.cp-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ts-border); }
.cp-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 4px 16px; padding: 14px 8px;
    border-bottom: 1px solid var(--ts-border); }
.cp-row:hover { background: var(--ts-highlight); }
.cp-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ts-gold);
    font-family: var(--ts-font-sans); font-size: 17px; font-weight: 700; color: var(--ts-white); font-variant-numeric: tabular-nums; }
.cp-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-width: 0; }
.cp-name { font-family: var(--ts-font-serif); font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--ts-text); text-decoration: none; }
.cp-name:hover { color: var(--ts-brown); text-decoration: underline; }
.cp-cop { font-family: var(--ts-font-coptic); font-size: 21px; line-height: 1.3; color: var(--ts-brown); }
.cp-meta { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--ts-font-sans); font-size: 14px; color: var(--ts-text-muted); }
.cp-meta i { margin-right: 6px; }
.cp-lesson { color: var(--ts-brown); font-weight: 600; text-decoration: none; }
.cp-lesson:hover { text-decoration: underline; }
.cp-edit { color: var(--ts-text-muted); text-decoration: none; }
.cp-ar { font-family: var(--ts-font-arabic); font-size: 19px; font-weight: 500; line-height: 1.5; color: var(--ts-text-muted); text-align: right; }
.cp-empty { margin: var(--ts-space-8) 0; color: var(--ts-text-muted); }

@media (max-width: 767px) {
    .cp-row { grid-template-columns: 30px 1fr; padding: 12px 4px; }
    .cp-num { width: 30px; height: 30px; font-size: 15px; }
    .cp-ar { grid-column: 2; text-align: right; font-size: 17px; }
    .cp-name { font-size: 18px; }
    .cp-cop { font-size: 19px; }
}

/* ---------- Media: folders and albums (media/media_pages.php) ---------- */
.mp-artist { margin: 4px 0 0; font-family: var(--ts-font-sans); font-size: 17px; color: var(--ts-text-muted); }
.mp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 8px; }
.mp-bar .cp-facts { margin: 0; }
.mp-play { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 0; border-radius: var(--ts-radius-pill);
    background: var(--ts-gold); color: var(--ts-white); font-family: var(--ts-font-sans); font-size: 16px; font-weight: 700; cursor: pointer; }
.mp-play:hover { background: var(--ts-player-gold-hover); }
.mp-play:focus-visible { outline: var(--ts-size-focus-ring) solid var(--ts-focus); outline-offset: 2px; }
.mp-details { margin: var(--ts-space-4) 0 0; max-width: 70ch; color: var(--ts-text-muted); font-size: 17px; line-height: 1.55; overflow: hidden; }
.mp-details img { max-width: 100%; height: auto; border-radius: var(--ts-radius-xs); }
.mp-details img[align=left], .mp-details img[style*="float: left"] { margin: 0 16px 8px 0; }
.mp-details img[align=right], .mp-details img[style*="float: right"] { margin: 0 0 8px 16px; }
.mp-details a { color: var(--ts-link, var(--ts-sienna)); }

/* The recordings: the number gives way to a play button on hover, and to a
   speaker while the track plays (media.js sets .nowplaying and .paused). */
table.tracks { width: 100%; border-collapse: collapse; margin: var(--ts-space-6) 0 var(--ts-space-4); border-top: 1px solid var(--ts-border); }
table.tracks td { border-bottom: 1px solid var(--ts-border); padding: 8px 6px; height: 54px; vertical-align: middle; line-height: 1.3; }
table.tracks td.tracknumber { width: 48px; text-align: center; cursor: pointer; }
table.tracks .number { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ts-gold);
    color: var(--ts-white); font-family: var(--ts-font-sans); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
table.tracks .play-button { display: none; position: relative; width: 30px; height: 30px; margin: 0 auto; border-radius: 50%; background: var(--ts-umber); }
table.tracks .play-button::after { content: ""; position: absolute; left: 11px; top: 8px; border-style: solid; border-width: 7px 0 7px 11px;
    border-color: transparent transparent transparent var(--ts-white); }
table.tracks .now-icon { display: none; font-size: 18px; color: var(--ts-gold); }
table.tracks td.mediatitle { font-family: var(--ts-font-serif); font-size: 19px; color: var(--ts-text); cursor: pointer; padding-right: 12px; }
table.tracks td.mediatitle:hover { color: var(--ts-title); }
table.tracks td.mediatitle:focus-visible { outline: var(--ts-size-focus-ring) solid var(--ts-focus); outline-offset: -2px; }
table.tracks div.title { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
table.tracks div.arabic { font-family: var(--ts-font-arabic); font-size: 18px; color: var(--ts-text-muted); text-align: right; }
table.tracks td.identify { width: 30px; text-align: center; font-family: var(--ts-font-sans); font-size: 13px; }
table.tracks td.identify .mp-bad { color: var(--ts-cinnabar); font-weight: 700; }
table.tracks td.duration { width: 60px; text-align: right; padding-right: 10px; color: var(--ts-text-muted); font-family: var(--ts-font-sans); font-size: 14px; font-variant-numeric: tabular-nums; }
table.tracks td.track-icon, table.tracks td.track-dl { width: 46px; text-align: center; padding: 0; }
table.tracks a.icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ts-gold); font-size: 18px; text-decoration: none; }
table.tracks a.icon:hover, table.tracks a.icon:focus-visible { background: var(--ts-cream); color: var(--ts-brown); }
table.tracks td.lesson a.icon { color: var(--ts-umber); }
table.tracks .lesson-pending { opacity: .5; }
table.tracks tr.nowplaying td { background: var(--ts-gold-pale); }
table.tracks tr.nowplaying td.tracknumber { box-shadow: inset 4px 0 0 var(--ts-gold); }
table.tracks tr.nowplaying .number { display: none; }
table.tracks tr.nowplaying .now-icon { display: inline-block; }
table.tracks.paused tr.nowplaying .now-icon { display: none; }
table.tracks.paused tr.nowplaying .play-button { display: block; }
@media (hover: hover) {
    table.tracks tr:hover td { background: var(--ts-cream); }
    table.tracks tr.nowplaying:hover td { background: var(--ts-gold-pale); }
    table.tracks tr:hover:not(.nowplaying) .number { display: none; }
    table.tracks tr:hover:not(.nowplaying) .play-button { display: block; }
}

/* Folders: each section a card with its first albums */
.mp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; margin: var(--ts-space-6) 0 0; padding: 0; list-style: none; }
.mp-card { padding: 14px 16px; background: var(--ts-surface-raised); border: 1px solid var(--ts-border); border-radius: var(--ts-radius-sm); }
.mp-card-h { margin: 0; font-family: var(--ts-font-display); font-weight: 400; font-size: 19px; line-height: 1.25; }
.mp-card-h a { color: var(--ts-title); text-decoration: none; }
.mp-card-h a:hover { text-decoration: underline; }
.mp-card-n { margin: 2px 0 0; font-family: var(--ts-font-sans); font-size: 14px; color: var(--ts-text-muted); }
.mp-card-note { margin: 6px 0 0; font-size: 16px; color: var(--ts-text-muted); }
.mp-card-kids { margin: 8px 0 0; padding: 0; list-style: none; font-family: var(--ts-font-sans); font-size: 15px; line-height: 1.35; }
.mp-card-kids li { margin: 5px 0; }
.mp-card-kids a { color: var(--ts-sienna); text-decoration: none; }
.mp-card-kids a:hover { text-decoration: underline; }
.mp-card-kids .mp-more { font-weight: 600; }

/* The albums beside this one: pills, this one filled gold */
.mp-more-albums { margin-top: var(--ts-space-8); }
.mp-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mp-pills a { display: inline-block; padding: 7px 16px; border: 1px solid var(--ts-player-line); border-radius: var(--ts-radius-pill); background: var(--ts-white);
    font-family: var(--ts-font-sans); font-size: 15px; color: var(--ts-text); text-decoration: none; }
.mp-pills a:hover { background: var(--ts-cream); border-color: var(--ts-gold); }
.mp-pills a[aria-current=page] { background: var(--ts-gold); border-color: var(--ts-gold); color: var(--ts-white); font-weight: 600; }
.mp-search-sec { margin-top: var(--ts-space-8); }
.mp-search select { border: 0; border-left: 1px solid var(--ts-border); padding: 0 8px; min-height: 36px; background: none; font-family: var(--ts-font-sans); font-size: 15px; color: var(--ts-text); }
.mp-admin { margin-top: var(--ts-space-6); font-family: var(--ts-font-sans); font-size: 14px; }

@media (max-width: 767px) {
    table.tracks { table-layout: fixed; }
    table.tracks td { padding: 8px 3px; }
    table.tracks td.tracknumber { width: 40px; }
    table.tracks td.mediatitle { font-size: 17px; word-wrap: break-word; }
    table.tracks div.title { flex-direction: column; align-items: stretch; gap: 0; }
    table.tracks td.duration { width: 46px; font-size: 13px; padding-right: 4px; }
    table.tracks td.track-icon, table.tracks td.track-dl { width: 42px; }
}

/* ---------- Hymn Library front page and search (library_pages.php) ---------- */
.cp-list--plain .cp-row { grid-template-columns: 1fr auto; }
.lp-notice { margin: var(--ts-space-4) 0 0; padding: 10px 14px; background: var(--ts-cream); border: 1px solid var(--ts-border); border-radius: var(--ts-radius-xs); font-family: var(--ts-font-sans); font-size: 15px; }
.lp-hero { padding-top: var(--ts-space-6); padding-bottom: var(--ts-space-6); }
.lp-lede { margin: 6px 0 var(--ts-space-4); font-size: 19px; color: var(--ts-text-muted); max-width: 60ch; }
.lp-search { display: flex; align-items: center; gap: 10px; max-width: 640px; min-height: 52px; padding: 0 6px 0 18px; margin-top: var(--ts-space-3);
    background: var(--ts-white); border: 1px solid var(--ts-border-control); border-radius: var(--ts-radius-pill); }
.lp-search:focus-within { outline: var(--ts-size-focus-ring) solid var(--ts-focus); outline-offset: 2px; }
.lp-search .fa { color: var(--ts-text-muted); }
.lp-search input { flex: 1; min-width: 0; border: 0; background: none; font-family: var(--ts-font-sans); font-size: 17px; color: var(--ts-text); outline: none; }
.lp-search button { min-height: 40px; padding: 0 18px; border: 0; border-radius: var(--ts-radius-pill); background: var(--ts-gold); color: var(--ts-white);
    font-family: var(--ts-font-sans); font-size: 16px; font-weight: 700; cursor: pointer; }
.lp-search button:hover { background: var(--ts-player-gold-hover); }
.lp .cp-h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lp-all { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ts-sienna); text-decoration: none; }
.lp-all:hover { text-decoration: underline; }
.lp-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.lp-card-ar { margin: 0 0 0 auto; font-family: var(--ts-font-arabic); font-size: 17px; color: var(--ts-title); text-align: right; }
.lp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 var(--ts-space-8); }
.lp-cols .cp-name { font-size: 18px; }
.lp-cols .cp-cop { font-size: 18px; }
.lp-cols .cp-ar { font-size: 17px; }
.lp-group { margin-top: var(--ts-space-6); }
.lp-group-h { margin: 0 0 6px; font-family: var(--ts-font-sans); font-size: 15px; font-weight: 600; color: var(--ts-text-muted); }
.lp-group-h a { color: var(--ts-sienna); text-decoration: none; }
.lp-group-h a:hover { text-decoration: underline; }

@media print {
    .hp .sync-line.active { background: none; }
}

/* ---- The home page (templates/home/index.html.twig) ---- */
.hm-grid { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 20px 24px; margin-top: var(--ts-space-6); align-items: start; }
.hm-art { margin: 0; }
.hm-art img { display: block; width: 100%; height: auto; border-radius: var(--ts-radius-sm); border: 1px solid var(--ts-border); }
.hm-cols { column-count: 2; column-gap: 20px; }
.hm-box { break-inside: avoid; margin: 0 0 20px; padding: 14px 16px 12px; background: var(--ts-surface-raised); border: 1px solid var(--ts-border); border-radius: var(--ts-radius-sm); min-width: 0; }
.hm-h { margin: 0 0 8px; font-family: var(--ts-font-display); font-weight: 400; font-size: 19px; line-height: 1.25; color: var(--ts-title); }
.hm-lect { font-size: 17px; line-height: 1.5; }
.hm-lect a { color: var(--ts-link); }
.hm-list { margin: 0; padding: 0; list-style: none; font-family: var(--ts-font-sans); font-size: 15px; line-height: 1.4; }
.hm-list li { padding: 6px 0; border-top: 1px solid var(--ts-border); }
.hm-list li:first-child { border-top: 0; padding-top: 0; }
.hm-list a { color: var(--ts-sienna); text-decoration: none; }
.hm-list a:hover { text-decoration: underline; color: var(--ts-brown); }
.hm-list span { color: var(--ts-text-muted); font-size: 14px; }
.hm-ranked { counter-reset: hm; }
.hm-ranked li { counter-increment: hm; display: block; }
.hm-ranked li::before { content: counter(hm) ". "; color: var(--ts-text-muted); }
.hm-ranked li b { font-weight: 600; color: var(--ts-text); display: inline; }
.hm-ranked li a { display: block; padding-left: 1.3em; }
.hm-more { margin: 8px 0 0; font-family: var(--ts-font-sans); font-size: 14px; }
.hm-more a { color: var(--ts-brown); font-weight: 600; text-decoration: none; }
.hm-more a:hover { text-decoration: underline; }
@media (max-width: 900px) {
    .hm-grid { grid-template-columns: minmax(0, 1fr); }
    .hm-art { max-width: 300px; }
}
@media (max-width: 640px) {
    .hm-cols { column-count: 1; }
}

/* ---- Articles (templates/content/articles/index.html.twig, article.html.twig) ---- */
.ar-cols { column-count: 2; column-gap: 28px; }
.ar-sec { break-inside: avoid; margin: 0 0 8px; }
.ar-sec .cp-h2 { margin-top: var(--ts-space-6); }
.ar-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ts-border); font-family: var(--ts-font-sans); font-size: 16px; line-height: 1.4; }
.ar-list li { padding: 9px 4px; border-bottom: 1px solid var(--ts-border); }
.ar-list a { color: var(--ts-sienna); text-decoration: none; }
.ar-list a:hover { color: var(--ts-brown); text-decoration: underline; }
.ar-sub { margin: 14px 0 6px; font-family: var(--ts-font-sans); font-size: 15px; font-weight: 600; color: var(--ts-text); }
.ar-sec > .ar-list + .ar-sub { margin-top: 18px; }
.ar-article { max-width: none; padding-top: var(--ts-space-6); font-family: var(--ts-font-serif); font-size: 19px; line-height: 1.6; color: var(--ts-text); }
.ar-article h1 { font-family: var(--ts-font-display); font-weight: 400; font-size: 34px; line-height: 1.15; color: var(--ts-title); margin: 0 0 14px; }
.ar-article h2, .ar-article h3 { font-family: var(--ts-font-display); font-weight: 400; color: var(--ts-title); }
.ar-article p, .ar-article h1, .ar-article h2, .ar-article h3, .ar-article ul, .ar-article ol, .ar-article blockquote { max-width: 75ch; }
.ar-article p { margin: 0 0 14px !important; line-height: 1.6 !important; word-spacing: normal !important; }
.ar-article font { color: inherit !important; font-family: inherit !important; font-size: inherit !important; }
.ar-article a { color: var(--ts-link); }
.ar-article img { max-width: 100%; height: auto; }
.ar-article table { max-width: 100%; }
@media (max-width: 760px) { .ar-cols { column-count: 1; } }
.ar-article h2 { font-size: 26px; line-height: 1.25; margin: 28px 0 10px; }
.ar-article h3 { font-size: 21px; margin: 22px 0 8px; }
.ar-article blockquote { margin: 0 0 14px; padding: 0 0 0 18px; border-left: 3px solid var(--ts-gold); font-size: inherit; }
.ar-article ul, .ar-article ol { margin: 0 0 14px; padding-left: 26px; }
.ar-article li { margin: 0 0 6px; }

/* ---- The converted books (templates/content/papal_book.html.twig) ---- */
.ar-books { column-count: 2; column-gap: 28px; }
.ar-books li { break-inside: avoid; }
.ar-back { margin: var(--ts-space-8) 0 0; font-family: var(--ts-font-sans); font-size: 15px; }
.ar-back a { color: var(--ts-brown); font-weight: 600; text-decoration: none; }
.bk-book { max-width: 75ch; font-family: var(--ts-font-serif); font-size: 19px; line-height: 1.6; color: var(--ts-text); }
.bk-page { position: relative; padding: 18px 0 18px 0; border-top: 1px solid var(--ts-border); }
.bk-n { float: right; margin: 0 0 4px 12px; font-family: var(--ts-font-sans); font-size: 12px; color: var(--ts-text-muted); text-decoration: none; }
.bk-n:hover { color: var(--ts-brown); }
.bk-page img { display: block; max-width: 100%; height: auto; margin: 0; border: 0; }
.bk-page a { color: var(--ts-link); }
@media (max-width: 760px) { .ar-books { column-count: 1; } .bk-book { font-size: 18px; } }
.bk-page h2 { margin: 6px 0 12px; font-family: var(--ts-font-display); font-weight: 400; font-size: 24px; line-height: 1.25; color: var(--ts-title); }
.bk-page p { margin: 0 0 12px; }
.bk-toc { max-width: 75ch; margin: 0 0 var(--ts-space-6); }
.bk-toc ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ts-border); columns: 2; column-gap: 28px; }
.bk-toc li { break-inside: avoid; border-bottom: 1px solid var(--ts-border); }
.bk-toc a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 4px; color: var(--ts-text); text-decoration: none; font-family: var(--ts-font-sans); font-size: 15px; line-height: 1.3; }
.bk-toc a:hover { background: var(--ts-highlight); color: var(--ts-brown); }
.bk-toc small { display: block; font-size: 13px; color: var(--ts-text-muted); }
.bk-pn { color: var(--ts-text-muted); font-size: 13px; }
@media (max-width: 760px) { .bk-toc ol { columns: 1; } }
.bk-toc ol { columns: 1; }
.bk-toc li.l2 a { padding-left: 22px; font-size: 14px; }
.bk-toc li.l3 a { padding-left: 40px; font-size: 13.5px; color: var(--ts-text-muted); }
.bk-toc details > summary { cursor: pointer; list-style: none; }
.bk-toc details > summary::-webkit-details-marker { display: none; }
.bk-toc summary .cp-h2 { display: inline-block; margin: 0; }
.bk-toc summary small { font-weight: 400; color: var(--ts-text-muted); text-transform: none; letter-spacing: 0; }
.bk-toc summary::after { content: " ▾"; color: var(--ts-text-muted); }
.bk-page p.bk-orn { text-align: center; color: var(--ts-text-muted); letter-spacing: .4em; margin: 18px 0; }

/* The articles-and-books index, by subject */
.ar-jump { display: flex; flex-wrap: wrap; gap: 8px 8px; margin: 14px 0 0; }
.ar-jump a { padding: 6px 14px; border: 1px solid var(--ts-border-control); border-radius: var(--ts-radius-pill); font-family: var(--ts-font-sans); font-size: 14px; color: var(--ts-brown); text-decoration: none; background: var(--ts-surface); }
.ar-jump a:hover { background: var(--ts-highlight); }
.ar-note { margin: 0 0 8px; max-width: 70ch; color: var(--ts-text-muted); }
.ar-sec { scroll-margin-top: 16px; }
.ar-list li span { color: var(--ts-text-muted); font-size: 14px; }
.ar-list li > span a { color: var(--ts-sienna); }
.ar-sub-sec { break-inside: avoid; }
.ar-shen .ar-sub { margin: 4px 0 6px; font-size: 14px; letter-spacing: .02em; color: var(--ts-brown); }

.ar-books { column-count: 1; }
.bk-book[dir=rtl] { font-family: var(--ts-font-arabic, "Noto Naskh Arabic", Tahoma, serif); font-size: 22px; line-height: 1.9; }
.bk-book[dir=rtl] .bk-n { float: left; margin: 0 12px 4px 0; }

/* The Lenten schedule table */
.ar-article .ls-sub { margin: 0 0 14px; color: var(--ts-text-muted); }
.ls-scroll { overflow-x: auto; margin: 0 0 var(--ts-space-4); }
table.ls { border-collapse: collapse; width: 100%; min-width: 900px; font-family: var(--ts-font-sans); font-size: 13.5px; line-height: 1.35; max-width: none; }
.ls th, .ls td { border: 1px solid var(--ts-border-control); padding: 8px 8px; text-align: center; vertical-align: middle; }
.ls thead th { background: var(--ts-gold-light); color: var(--ts-brown); font-weight: 600; }
.ls td span { display: block; color: var(--ts-text-muted); font-size: 13px; margin-top: 2px; }
.ls .ls-part { background: var(--ts-surface-raised); color: var(--ts-brown); width: 90px; font-weight: 600; }
.ls .ls-part small { display: block; font-weight: 400; margin-top: 4px; color: var(--ts-text-muted); }
.ls .ls-wk { background: var(--ts-surface-raised); width: 40px; }
.ls .ls-th { text-align: left; font-weight: 400; min-width: 150px; }
.ls .ls-th b { font-weight: 700; }
.ls .ls-gospel { font-weight: 600; background: var(--ts-surface-raised); min-width: 130px; }
.ar-article .ls-note { color: var(--ts-text-muted); font-size: 15px; }
.ar-h-ar { font-family: var(--ts-font-arabic); font-size: 1.15em; text-transform: none; letter-spacing: 0; margin-inline-start: 8px; }
.ar-ar .ar-t { font-family: var(--ts-font-arabic); font-size: 21px; line-height: 1.6; }
.ar-jump-ar { background: var(--ts-gold-light) !important; }

/* Section titles of the articles-and-books lists: the display serif at the size of a page's h2, not the small label */
.ar .ar-sec > .cp-h2 { display: block; font-family: var(--ts-font-display); font-size: 28px; font-weight: 400; line-height: 1.2; letter-spacing: .005em; text-transform: none; color: var(--ts-title); margin: 0 0 10px; padding-top: 30px; }
.ar .ar-sec > .cp-h2 .ar-h-ar { font-size: .8em; color: var(--ts-text-muted); }
.ar .ar-list { font-size: 17px; }
.ar .ar-list li { padding: 10px 6px; }
@media (max-width: 760px) { .ar .ar-sec > .cp-h2 { font-size: 24px; padding-top: 22px; } }