/* shiron.c1 — site stylesheet
 * @created 2026-05-09
 */

:root {
    /* Adjustable by the bottom-bar A+ / A− buttons. Scales only fonts. */
    --sm-font-scale: 1;
}

/* ── Impersonation banner ──────────────────────────────────────────── */
.sm-imp-banner {
    background: repeating-linear-gradient(45deg,
        #d35400, #d35400 16px,
        #c0392b 16px, #c0392b 32px);
    color: #fff;
    padding: 6px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.95em;
    border-bottom: 2px solid #a13420;
    flex-wrap: wrap;
}
body.is-impersonating .sm-shiron-hdr,
body.is-impersonating .sm-song-hdr,
body.is-impersonating .sm-author-hdr {
    box-shadow: 0 0 0 3px #d35400;
}

/* ── Navbar — uses w3-theme palette ──────────────────────────────── */
.sm-navbar {
    background: #826200;          /* w3-theme-d5 */
    border-bottom: 3px solid #ffc107;  /* w3-theme accent */
    position: sticky;
    top: 0;
    z-index: 100;
}
.sm-navbar .w3-bar-item, .sm-navbar a { color: #fffbf0; }    /* w3-theme-l5 */
.sm-navbar .sm-active { background: #ffc107 !important; color: #000 !important; }
.sm-navbar a:hover { background: #9c7500 !important; }       /* w3-theme-d4 */

/* ── Main / page wrapper ───────────────────────────────────────────── */
.sm-main {
    min-height: calc(100vh - 60px - 80px);
    padding: 8px 12px 80px;
}
.sm-page-body { padding: 0 8px; }
.sm-rcol-wrap { padding: 8px; }

/* ── Right column (rcol) ───────────────────────────────────────────── */
.sm-rcol {
    background: #fff;
    border: 1px solid #d6e8df;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.95em;
}
.sm-rcol-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

/* 2-row compact RCOL */
.sm-rcol-2row .sm-rcol-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.sm-rcol-2row .sm-rcol-pair {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
}
.sm-rcol-2row .sm-rcol-pair input { flex: 1 1 auto; min-width: 0; padding: 4px 6px; font-size: 0.92em; }
.sm-rcol-2row #smCodeInp { flex: 1 1 auto; min-width: 0; padding: 4px 6px; }
.sm-rcol-2row label { font-size: 0.88em; color: #555; }
.sm-rcol-cmt {
    background: #fff3cd;
    border: 1px solid #ffe69b;
    color: #826200;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sm-rcol-cmt:hover { background: #ffc107; color: #000; }
.sm-rcol-suggest { margin-top: 8px; }
.sm-rcol-ico { color: #eab000; }
.sm-rcol-code { width: 7em; }
.sm-rcol-results { margin-top: 4px; max-height: 320px; overflow-y: auto; }
.sm-rcol-result {
    display: flex;
    justify-content: space-between;
    padding: 4px 6px;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: #333;
    font-size: 0.92em;
}
.sm-rcol-result:hover { background: #f4faf7; }
.sm-rcol-result-meta { color: #888; font-size: 0.85em; }

/* ── Stats circles ─────────────────────────────────────────────────── */
.sm-stat-circles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 8px 0;
}
.sm-stat-circ {
    width: 96px;
    height: 96px;
    padding: 8px 4px;
    text-align: center;
    line-height: 1.15;
    font-size: 0.85em;
}
.sm-stat-circ b { font-size: 1.25em; }
.sm-stat-circ span { font-size: 0.8em; }

/* ── Author cloud ──────────────────────────────────────────────────── */
.sm-cloud {
    line-height: 2.4;
    text-align: center;
    padding: 6px 4px;
}
.sm-cloud-tag {
    display: inline-block;
    margin: 0 4px;
    text-decoration: none;
    transition: transform 0.15s;
}
.sm-cloud-tag:hover { transform: scale(1.08); }
.sm-cloud-more { color: #aaa; font-size: 1.2em; }

/* ── Footer ────────────────────────────────────────────────────────── */
.sm-footer {
    background: #826200;          /* w3-theme-d5 */
    color: #ccc;
    padding: 4px 0;
    font-size: 0.9em;
}
.sm-footer-link { color: #9fd5c1; text-decoration: none; }
.sm-footer-link:hover { color: #fff; }

/* ── Page content alignment ────────────────────────────────────────── */
/* Default (unlogged or main column without RCOL): centered. */
.sm-page-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 6px 8px;
}
.sm-page-content.sm-page-wide { max-width: 1100px; }

/* When logged in, the page body sits next to RCOL (right side in RTL).
   Anchor the content to the right edge so it hugs the RCOL instead of
   centering inside the l9 column. */
.sm-page-body .sm-page-content {
    margin-right: 0;
    margin-left: auto;
}

/* ── Shiron page (accordion list) — color theme ───────────────────── */
.sm-shiron { padding-bottom: 60px; }

/* Sticky header card — w3-theme amber palette */
.sm-shiron-hdr {
    position: sticky;
    top: 56px;
    z-index: 50;
    margin-bottom: 14px;
    background: #9c7500;          /* w3-theme-d4 */
    color: #fffbf0;
    border: 1px solid #826200;    /* w3-theme-d5 */
}
/* Mobile: header is too tall (~50% of viewport) — drop sticky so it
   scrolls off when the user starts reading the song list. */
@media (max-width: 768px) {
    .sm-shiron-hdr { position: static; }
    .sm-shiron-hdr-txt { font-size: calc(0.88em * var(--sm-font-scale)); }
}

/* Hamburger button: subtle highlight to make it visible against the navbar bg */
.sm-navbar-burger { padding: 0 12px !important; font-size: 1.1em; }
/* (Mobile-menu RTL alignment is now handled by aw-rtl.css's .w3-bar-block rules.) */
.sm-shiron-hdr-txt {
    font-size: calc(0.95em * var(--sm-font-scale));
    line-height: 1.5;
    color: #f4f7f5;
}

/* Compact shiron header — fixed 80px row with thumb + title + click-to-open */
.sm-shiron-hdr-compact {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 80px;
    padding: 0 14px;
    cursor: pointer;
    overflow: hidden;
}
.sm-shiron-hdr-compact:hover { filter: brightness(1.07); }
.sm-shiron-hdr-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid #fffbf0;
    flex: 0 0 auto;
}
.sm-shiron-hdr-titles {
    flex: 1 1 auto;
    overflow: hidden;
    min-width: 0;
}
.sm-shiron-hdr-title {
    margin: 0;
    color: #fffbf0;
    font-size: calc(1.25em * var(--sm-font-scale));
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sm-shiron-hdr-sub {
    color: #fff3cd;
    font-size: 0.9em;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sm-shiron-hdr-info {
    color: #fffbf0;
    font-size: 1.3em;
    flex: 0 0 auto;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.sm-shiron-hdr-compact:hover .sm-shiron-hdr-info { opacity: 1; }
.sm-shiron-notes { padding: 4px 0; color: #e8efe9; line-height: 1.5; }
.sm-shiron-presenter {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    font-size: calc(1.1em * var(--sm-font-scale));
}
.sm-shiron-presenter-link { color: #fff; text-decoration: underline dotted; }
.sm-shiron-presenter-link:hover { color: #fff; }
.sm-shiron-contact {
    color: #c9e2d5;
    font-size: 0.9em;
    direction: ltr;
}
.sm-shiron-hdr-foot {
    background: rgba(0,0,0,0.18);
    color: #fff;
    border-radius: 0 0 4px 4px;
}
.sm-shiron-hdr-foot h5 { color: #fff !important; font-weight: 600; }

/* Display-time sort toggle (viewer button, doesn't save) */
.sm-shiron-tools {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 6px;
}

/* ── תצוגת דפדוף (Vue paging viewer) ───────────────────────────── */
[v-cloak] { display: none !important; }
.sm-paging-app { padding-bottom: 60px; }
.sm-paging-stage {
    background: #fffbf0;
    border: 1px solid #ffe69b;
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    min-height: 60vh;
}
/* csview-style: thin top bar with light theme-l4 background and dark text */
.sm-paging-top {
    background: #fff3cd;          /* w3-theme-l4 */
    color: #4a3800;
    border-radius: 6px 6px 0 0;
    padding: 6px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95em;
    font-weight: 600;
    border-bottom: 1px solid #ffe69b;
}
.sm-paging-name { font-weight: 700; }
.sm-paging-counters { font-size: 0.85em; opacity: 0.85; direction: ltr; color: #826200; }
.sm-paging-pos {
    color: #fffbf0;
    font-family: monospace;
    direction: ltr;
    padding: 0 6px;
    font-size: 0.9em;
}

/* Cast / follow visuals */
.sm-paging-live {
    background: #c00; color: #fff;
    padding: 1px 8px; border-radius: 10px;
    font-size: 0.7em; font-weight: 700;
    margin-inline-end: 6px; vertical-align: 2px;
    animation: smPagingPulse 2s infinite;
}
@keyframes smPagingPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}
.sm-paging-waiting {
    text-align: center;
    padding: 50px 20px;
    background: linear-gradient(135deg, #fff8e1, #fff3cd);
    border-radius: 6px;
    color: #4a3800;
}
.sm-paging-waiting i.fa-broadcast-tower {
    font-size: 3em;
    color: #9c7500;
    margin-bottom: 14px;
    display: block;
}
.sm-paging-waiting h2 { color: #826200; font-size: 1.4em; margin: 0 0 12px; }
.sm-paging-waiting-msg {
    display: inline-block;
    margin-top: 8px;
    padding: 10px 22px;
    border: 2px solid #9c7500;
    border-radius: 8px;
    color: #826200;
    font-weight: 600;
}
.sm-paging-dot { color: #c00; animation: smPagingPulse 1.5s infinite; }
.sm-paging-dots { animation: smPagingPulse 1.5s infinite; }
.sm-paging-follow-bar {
    background: #fff3cd;
    color: #4a3800;
    border-top: 1px solid #ffe69b;
    border-radius: 0 0 6px 6px;
}
.sm-paging-toast {
    position: fixed;
    bottom: 60px; left: 50%; transform: translateX(-50%);
    background: #4a3800; color: #fffbf0;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 0.9em; font-weight: 600;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.sm-paging-slide.errored { display: none; }
.sm-paging-slide-err {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #fff; background: rgba(0,0,0,0.85);
    padding: 14px; text-align: center;
}
.sm-paging-slide-err i { font-size: 2.4em; margin-bottom: 10px; opacity: 0.65; }
.sm-paging-slide-err code { background: rgba(255,255,255,0.1); padding: 4px 8px; border-radius: 4px; margin-top: 8px; word-break: break-all; }

.sm-paging-frame {
    position: relative;
    flex: 0 0 auto;
    background: #1a1a1a;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sm-paging-slide {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
}
.sm-paging-nav {
    position: absolute;
    color: rgba(255,255,255,0.75);
    font-size: 2.4em;
    font-weight: 700;
    cursor: pointer;
    text-shadow: 0 0 6px rgba(0,0,0,0.85);
    padding: 6px 12px;
    user-select: none;
}
.sm-paging-nav:hover { color: #fff; }
.sm-paging-nav-r { right: 4px; top: 50%; transform: translateY(-50%); }
.sm-paging-nav-l { left:  4px; top: 50%; transform: translateY(-50%); }
.sm-paging-nav-t { top:    4px; left: 50%; transform: translateX(-50%); }
.sm-paging-nav-b { bottom: 4px; left: 50%; transform: translateX(-50%); }

.sm-paging-lyrics {
    flex: 0 0 auto;
    background: #fffbf0;
    padding: 14px 18px;
    overflow-y: auto;
    height: 60vh;
}
.sm-paging-lyr-credits {
    text-align: center;
    color: #4a3800;
    border-bottom: 2px solid #ffc107;
    padding-bottom: 6px;
    margin-bottom: 10px;
    font-size: 0.95em;
}
.sm-paging-lyr-text {
    white-space: pre-wrap;
    line-height: 1.6;
    text-align: right;
    direction: rtl;
    color: #4a3800;
}
.sm-paging-lyr-text.sm-ltr { text-align: left; direction: ltr; }

.sm-paging-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    background: #826200;
    padding: 8px 12px;
    border-radius: 0 0 6px 6px;
    color: #fffbf0;
}
.sm-paging-controls .w3-border {
    background: rgba(255,255,255,0.12) !important;
    color: #fffbf0 !important;
    border-color: rgba(255,255,255,0.25) !important;
}
.sm-paging-spacer { flex: 1 1 auto; }

.sm-paging-listbg {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.sm-paging-listcard {
    background: #fffbf0;
    border-radius: 8px;
    width: 100%;
    max-width: 600px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sm-paging-listhdr {
    background: #9c7500;
    color: #fffbf0;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sm-paging-listbody { flex: 1 1 auto; overflow-y: auto; padding: 6px; }
.sm-paging-listitem {
    background: #fff3cd;
    color: #4a3800;
    padding: 10px 12px;
    margin-bottom: 4px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border: 1px solid transparent;
}
.sm-paging-listitem:hover { border-color: #ffc107; }
.sm-paging-listitem-cur {
    background: #ffc107;
    color: #000;
    font-weight: 700;
}

/* Song row — warm cream tabs with green leading edge */
.sm-song-row {
    margin-bottom: 5px;
}
.sm-song-toggle {
    cursor: pointer;
    position: relative;
    padding: 9px 14px !important;
    border-radius: 4px;
    font-size: calc(1.05em * var(--sm-font-scale));
    line-height: 1.4;
    background: #fff3cd !important;          /* w3-theme-l4 */
    border: 1px solid #ffe69b !important;    /* w3-theme-l3 */
    border-right: 4px solid #ffc107 !important;   /* w3-theme accent */
    color: #4a3800;
    transition: background 0.15s, border-color 0.15s;
}
.sm-song-toggle b { font-weight: 600; color: #4a3800; }
.sm-song-toggle:hover {
    background: #ffe69b !important;          /* w3-theme-l3 */
    border-right-color: #eab000 !important;  /* w3-theme-d1 */
}

.sm-song-meta-l {
    /* Hebrew RTL: right-align puts text on right; this anchor is on the LEFT. */
    float: left;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #555;
}
.sm-song-expand { font-size: 1em; color: #4a3800; }
.sm-song-yt { color: #c4302b; text-decoration: none; font-size: 1.1em; }
.sm-song-yt:hover { color: #ff0000; }

.sm-song-flags {
    color: #4a3800;
    font-size: 0.92em;
    margin-inline-start: 8px;
}
.sm-song-num { color: #b68900; font-weight: 700; margin-inline-end: 4px; }   /* w3-theme-d3 */

/* Quick-action buttons inside the collapsed song bar (lyrics / slides) */
.sm-song-quick {
    background: rgba(26, 188, 156, 0.12);
    border: 1px solid #1abc9c;
    color: #826200;          /* w3-theme-d5 */
    border-radius: 12px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin: 0 2px;
    font-size: 0.85em;
    transition: background 0.12s, color 0.12s;
}
.sm-song-quick:hover {
    background: #1abc9c;
    color: #fff;
}
.sm-song-altname { color: #888; font-size: 0.92em; margin: 0 6px; }
.sm-song-flags .sm-song-ht { color: #eab000; font-weight: 700; }
.sm-song-flags .sm-song-sc { font-weight: 600; }

/* Expanded body */
.sm-song-body {
    padding: 6px 0 12px;
    background: #fff;
}

.sm-song-credits {
    background: #eaf2ed;        /* w3-theme-l3-ish */
    padding: 6px 12px;
    font-size: calc(0.95em * var(--sm-font-scale));
    color: #333;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
}
.sm-song-credits b { color: #4a3800; }
.sm-credit-link {
    color: #2c3e50;
    text-decoration: none;
    border-bottom: 1px dotted #999;
}
.sm-credit-link:hover {
    color: #eab000;
    border-bottom-color: #eab000;
}
.sm-mode-toggle {
    background: #fff;
    border: 1px solid #1abc9c;
    color: #4a3800;
    border-radius: 14px;
    padding: 2px 12px;
    cursor: pointer;
    font-size: 0.9em;
    margin-inline-start: auto;
}
.sm-mode-toggle:hover { background: #1abc9c; color: #fff; }

/* Lyrics — copies shiron.c0 .songFonts (David 22px) */
.songFonts {
    font-family: "David", "Frank Ruhl Libre", serif !important;
    font-size: calc(22px * var(--sm-font-scale)) !important;
    line-height: 1.45;
}
.sm-song-lyrics {
    padding: 10px 14px;
    background: #f4faf6;        /* w3-theme-l5-ish */
    color: #2c3e50;             /* w3-text-indigo-ish */
    text-align: right;
    direction: rtl;
}
.sm-song-lyrics.sm-ltr { text-align: left; direction: ltr; }
.sm-song-lyrics b { font-weight: normal; }   /* match c0: <b> wrap, but keep regular weight */

/* Slides view (hidden until toggled) */
.sm-song-slides {
    padding: 8px 12px;
    text-align: center;
}
.sm-song-slides img {
    display: block;
    max-width: 100%;
    margin: 0 auto 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.sm-song-empty { font-size: 0.95em; }

.sm-song-close {
    margin: 8px auto 0;
    display: inline-block;
}

/* ── Shironim list page ────────────────────────────────────────────── */
.sm-sh-grid { padding-bottom: 60px; }
.sm-sh-card {
    display: block;
    text-decoration: none;
    color: #4a3800;
    height: 100%;
    transition: transform 0.12s, box-shadow 0.12s;
}
.sm-sh-card:hover { transform: translateY(-2px); }
.sm-sh-card-body { padding: 10px 12px; }
.sm-sh-card-name {
    font-size: calc(1.05em * var(--sm-font-scale));
    font-weight: 600;
    line-height: 1.3;
}
.sm-sh-card-presenter {
    color: #888;
    font-size: 0.9em;
    margin-top: 2px;
}
.sm-sh-card-meta {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    color: #555;
    font-size: 0.88em;
}
.sm-sh-card-num { color: #eab000; }
.sm-sh-card-slug {
    color: #aaa;
    font-family: monospace;
    direction: ltr;
}

/* ── /author/<uwid> page ──────────────────────────────────────────── */
.sm-author { padding-bottom: 60px; }
.sm-author-songs {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sm-author-song {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 4px;
    border-bottom: 1px solid #eef2f0;
    flex-wrap: wrap;
}
.sm-author-song:last-child { border-bottom: none; }
.sm-author-song-num {
    color: #888;
    min-width: 2.5em;
    font-size: 0.9em;
}
.sm-author-song-name {
    font-weight: 600;
    color: #4a3800;
    text-decoration: none;
    flex: 1 1 auto;
    min-width: 200px;
}
.sm-author-song-name:hover { color: #eab000; text-decoration: underline; }
.sm-author-role-badge {
    font-size: 0.78em;
    padding: 2px 8px;
    border-radius: 10px;
    color: #fff;
    white-space: nowrap;
}
.sm-role-L { background: #8e44ad; }
.sm-role-C { background: #d35400; }
.sm-role-B { background: #16a085; }
.sm-author-song-counter {
    color: #888;
    font-size: 0.88em;
    flex: 0 0 auto;
}
.sm-author-song-slides {
    color: #eab000;
    font-size: 0.85em;
    margin-inline-start: 6px;
}

/* ── /shironim RCOL (mm category menu) ───────────────────────────── */
.sm-rcol-cat-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    padding: 4px 6px;
    color: #4a3800;
}
.sm-rcol-cat-link:hover { color: #eab000; }
.sm-rcol-cat-link .sm-rcol-mg-name { font-weight: 500; }
.sm-rcol-cat-link .sm-rcol-mg-cnt {
    background: rgba(26, 188, 156, 0.15);
    color: #826200;          /* w3-theme-d5 */
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 0.85em;
    font-weight: 600;
}

/* ── /mg RCOL (zg control panel) ─────────────────────────────────── */
.sm-rcol-mg-hdr {
    background: #826200;          /* w3-theme-d5 */
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px 6px 0 0;
    margin: -10px -12px 6px;
}
.sm-rcol-mg-hdr h4 { color: #fff; margin: 0; }
.sm-rcol-mg-toggle {
    background: transparent;
    border: 0;
    color: #fff;
    width: 100%;
    text-align: start;
    padding: 0;
    font: inherit;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sm-rcol-mg-toggle:hover { color: #c9e2d5; }
.sm-rcol-mg-toggle-ico { font-size: 0.75em; color: #c9e2d5; }
.sm-rcol-mg-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 480px;
    overflow-y: auto;
}
.sm-rcol-mg-item {
    border-bottom: 1px solid #eef2f0;
    padding: 6px 4px;
}
.sm-rcol-mg-item:last-child { border-bottom: none; }
.sm-rcol-mg-active {
    background: #fff3cd;          /* w3-theme-l4 */
    border-right: 3px solid #ffc107;
}
.sm-rcol-mg-line1 .sm-rcol-mg-name {
    font-weight: 600;
    color: #4a3800;
    text-decoration: none;
}
.sm-rcol-mg-line1 .sm-rcol-mg-name:hover { color: #eab000; }
.sm-rcol-mg-line2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
    font-size: 0.85em;
    color: #777;
    gap: 6px;
}
.sm-rcol-mg-slug {
    font-family: monospace;
    direction: ltr;
    color: #999;
}
.sm-rcol-mg-cnt { color: #eab000; font-weight: 600; }
.sm-rcol-mg-actions a {
    color: #555;
    margin: 0 2px;
    text-decoration: none;
}
.sm-rcol-mg-actions a:hover { color: #eab000; }

/* ── /mg editor — top button row ─────────────────────────────────── */
.sm-mg-topbar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px 10px;
    background: #9c7500;          /* w3-theme-d4 */
    border-radius: 6px;
}
.sm-mg-topbar .w3-button { font-size: 0.92em; }
.sm-mg-topbar > .w3-border {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.25) !important;
}
.sm-mg-topbar > .w3-border:hover { background: rgba(255,255,255,0.22) !important; }

/* ── /mg editor — songs header, position input, modal ─────────────── */
.sm-mg-songs-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}
.sm-mg-songs-tools { display: flex; gap: 6px; }
.sm-mg-song-pos {
    width: 3em;
    padding: 2px 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
    text-align: center;
    direction: ltr;
}

.sm-modal-bg {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.sm-modal-card {
    background: #fff;
    border-radius: 8px;
    max-width: 700px;
    width: 100%;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.sm-modal-hdr {
    background: #9c7500;          /* w3-theme-d4 */
    color: #fff;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sm-modal-hdr h3 { color: #fff; }
.sm-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
}

/* ── /mg pages ────────────────────────────────────────────────────── */
.sm-mg { padding-bottom: 60px; }
.sm-mg-hdr {
    padding: 14px 18px;
    margin-bottom: 14px;
    background: #9c7500;          /* w3-theme-d4 */
    color: #fffbf0;
    border: 1px solid #826200;
}
.sm-mg-hdr h2 { color: #fffbf0; }
.sm-mg-hdr-sub { margin-top: 10px; color: #fff3cd; }
.sm-mg-grid { padding-bottom: 20px; }
.sm-mg-card { transition: transform 0.12s; }
.sm-mg-card:hover { transform: translateY(-2px); }

.sm-mg-songs {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}
.sm-mg-song {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid #eef2f0;
    border-radius: 4px;
    margin-bottom: 4px;
    background: #fafdfb;
    flex-wrap: wrap;
}
.sm-mg-song-num   { color: #eab000; font-weight: 700; min-width: 2.5em; }
.sm-mg-song-name  { font-weight: 600; }
.sm-mg-song-credits { color: #888; font-size: 0.9em; }
.sm-mg-song-actions {
    display: inline-flex;
    gap: 4px;
    margin-inline-start: auto;
}
.sm-mg-song-actions .w3-button { padding: 2px 8px !important; }

.sm-mg-add-results {
    margin-top: 6px;
    max-height: 280px;
    overflow-y: auto;
}

/* ── Single-song page (/song/<id>) ─────────────────────────────────── */
.sm-song-page { padding-bottom: 60px; }

.sm-song-hdr {
    background: #9c7500;          /* w3-theme-d4 */
    color: #f4f7f5;
    padding: 14px 16px;
    border: 1px solid #826200;    /* w3-theme-d5 */
}
.sm-song-hdr h2 { color: #fff; margin: 0; }
.sm-song-hdr a { color: #b8e3d2; }

/* Author breadcrumb above the title */
.sm-song-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    color: #d4e6dd;
    font-size: 0.95em;
}
.sm-author-link { color: #fff; text-decoration: underline dotted; }
.sm-author-link:hover { color: #fff; }
.sm-song-nav { display: inline-flex; align-items: center; gap: 6px; }
.sm-song-nav .w3-button {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.25) !important;
}
.sm-song-nav .w3-button.w3-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.sm-song-pos { font-family: monospace; direction: ltr; padding: 0 6px; }

/* Title row */
.sm-song-title-row .sm-song-title {
    margin: 0;
    font-size: calc(1.6em * var(--sm-font-scale));
    color: #fff;
}
.sm-song-altname-big {
    font-size: 0.7em;
    color: #c9e2d5;
    font-weight: 400;
    margin-inline-start: 8px;
}
.sm-song-line1 {
    margin-top: 4px;
    color: #d4e6dd;
    font-style: italic;
    font-size: 1em;
}

/* "more from" pills (search context) */
.sm-song-morefrom {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.18);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    color: #d4e6dd;
    font-size: 0.92em;
}
.sm-author-pill {
    background: rgba(255,255,255,0.12);
    color: #fff !important;
    padding: 3px 10px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 0.92em;
}
.sm-author-pill:hover { background: rgba(255,255,255,0.22); }

/* ── /author/<uwid> compact header (≤80px content + pager bottom) ── */
.sm-author-hdr-compact {
    background: #9c7500;          /* w3-theme-d4 */
    color: #fffbf0;
    border: 1px solid #826200;
    margin-bottom: 12px;
    overflow: hidden;
}
.sm-author-hdr-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    height: 64px;
}
.sm-author-hdr-avatar { font-size: 2.4em; color: #fff3cd; flex: 0 0 auto; }
.sm-author-hdr-titles { flex: 1 1 auto; overflow: hidden; min-width: 0; }
.sm-author-hdr-title {
    margin: 0;
    color: #fffbf0;
    font-size: calc(1.2em * var(--sm-font-scale));
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sm-author-uwid {
    color: #fff3cd;
    font-family: monospace;
    direction: ltr;
    font-size: 0.65em;
    font-weight: 400;
    margin-inline-start: 8px;
}
.sm-author-hdr-sub {
    color: #fff3cd;
    font-size: 0.85em;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sm-author-controls-bottom {
    background: #826200;          /* w3-theme-d5 — slightly darker */
    color: #fff3cd;
    padding: 6px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.sm-author-controls-bottom select { background: #fffbf0; color: #4a3800; }
.sm-author-controls-bottom .sm-pg-btn { font-size: 0.85em; padding: 2px 8px; min-width: 26px; }

.sm-author-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 4px;
    margin-bottom: 8px;
    color: #555;
}
.sm-perpage {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 3px 6px;
}
.sm-pager { display: inline-flex; gap: 3px; align-items: center; }
.sm-pg-btn {
    background: #fff;
    border: 1px solid #d6d6d6;
    color: #4a3800;
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    min-width: 32px;
    font-size: 0.9em;
}
.sm-pg-btn:hover:not(.sm-pg-disabled):not(.sm-pg-active) {
    background: #f4faf6;
    border-color: #eab000;
}
.sm-pg-active {
    background: #1abc9c !important;
    color: #fff !important;
    border-color: #16a085 !important;
}
.sm-pg-disabled { opacity: 0.4; cursor: not-allowed; }
.sm-pg-gap { color: #aaa; padding: 0 4px; }

/* RCOL search-result enhancements (song + author) */
.sm-rcol-result-line1 {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.sm-rcol-result-name { font-weight: 600; }
.sm-rcol-result-alt { color: #888; font-weight: 400; font-size: 0.9em; }

/* ── Fixed bottom utility bar ──────────────────────────────────────── */
.sm-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #826200;          /* w3-theme-d5 */
    color: #fff;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 99;
    font-size: 1.1em;
}
.sm-bb-btn {
    color: #fff;
    text-decoration: none;
    padding: 2px 8px;
    border-radius: 4px;
}
.sm-bb-btn:hover { background: #285c44; }
.sm-bb-az { font-family: monospace; font-weight: bold; }
.sm-bb-sep {
    width: 1px;
    height: 18px;
    background: #4f7060;
    margin: 0 6px;
}