/* Qur'an reciters page (reciters.php) — right-to-left copy (all sides are logical, so the rules are the same) */
.rc-hero { margin: 8px 0 26px; }
.rc-kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t-accent); }
.rc-h1 { margin: 8px 0 0; font-family: "Space Grotesk", sans-serif; font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 700; line-height: 1.06; letter-spacing: -.02em; color: var(--t-text); }
.rc-sub { margin: 12px 0 0; max-width: 620px; font-size: 16px; line-height: 1.6; color: var(--t-text-secondary); }

.rc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rc-item { position: relative; display: flex; align-items: stretch; gap: 6px; border-radius: 20px; background: var(--t-card); transition: background .15s, box-shadow .15s; }
.rc-item:hover { background: color-mix(in srgb, var(--t-card) 92%, var(--t-text) 8%); }
.rc-item.is-mine { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--t-accent) 55%, transparent); }
.rc-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; padding: 14px 16px; color: inherit; text-decoration: none; border-radius: 20px; }
.rc-main:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.rc-av { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--t-bg); box-shadow: 0 0 0 3px var(--t-bg); }
.rc-av.is-ini { display: grid; place-items: center; background: hsl(var(--h) 38% 46%); color: #fff; font-family: "Space Grotesk", sans-serif; font-size: 22px; font-weight: 700; }
.rc-txt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.rc-txt strong { font-size: 16.5px; font-weight: 700; color: var(--t-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-ar { font-family: "Amiri", serif; font-size: 17px; line-height: 1.3; color: var(--t-text-secondary); text-align: right; }
.rc-style { font-size: 12.5px; color: var(--t-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-style b { color: var(--t-accent); font-weight: 700; }
.rc-mine { position: absolute; top: -9px; inset-inline-start: 22px; padding: 3px 10px; border-radius: 999px; background: var(--t-accent); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }
.rc-play { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--t-accent); color: #fff; transition: transform .2s; }
.rc-play svg { width: 18px; height: 18px; margin: 0; }
.rc-main:hover .rc-play { transform: scale(1.08); }
.rc-dl { flex: none; align-self: center; display: grid; place-items: center; width: 40px; height: 40px; margin-inline-end: 12px; border-radius: 12px; background: var(--t-bg); color: var(--t-text-secondary); transition: background .2s, color .2s; }
.rc-dl svg { width: 17px; height: 17px; }
.rc-item:not(:has(.rc-dl)) .rc-main { padding-inline-end: 74px; }
.rc-dl:hover { background: var(--t-text); color: var(--t-bg); }

/* where to start */
.rc-dlg { width: min(420px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 24px; background: var(--t-card); color: var(--t-text); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); }
.rc-dlg::backdrop { background: rgba(0, 0, 0, .45); backdrop-filter: blur(3px); }
.rc-dlg-in { display: grid; gap: 10px; padding: 22px; }
.rc-dlg-who { display: flex; align-items: center; gap: 12px; }
.rc-dlg-who .rc-av { width: 48px; height: 48px; font-size: 17px; }
.rc-dlg-who strong { font-size: 15px; }
.rc-dlg h2 { margin: 6px 0 4px; font-family: "Space Grotesk", sans-serif; font-size: 1.25rem; }
.rc-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--t-bg); color: var(--t-text); text-decoration: none; transition: background .2s, color .2s; }
.rc-opt > span { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--t-card); color: var(--t-accent); }
.rc-opt > span svg { width: 15px; height: 15px; }
.rc-opt b { display: grid; gap: 1px; font-size: 14.5px; }
.rc-opt small { font-size: 12.5px; font-weight: 500; opacity: .75; }
.rc-opt-main { background: var(--t-accent); color: #fff; }
.rc-opt-main > span { background: rgba(255, 255, 255, .2); color: #fff; }
.rc-opt:not(.rc-opt-main):hover { background: color-mix(in srgb, var(--t-bg) 85%, var(--t-accent) 15%); }
.rc-opt-main:hover { background: color-mix(in srgb, var(--t-accent) 88%, #000); }
.rc-x { justify-self: center; margin-top: 4px; padding: 6px 12px; border: 0; background: none; color: var(--t-text-secondary); font: inherit; font-size: 13.5px; cursor: pointer; }
.rc-x:hover { color: var(--t-text); }

.rc-about h2 { font-family: "Space Grotesk", sans-serif; font-size: 1.4rem; margin: 40px 0 10px; }
.rc-about p { max-width: 760px; font-size: 15px; line-height: 1.7; color: var(--t-text-secondary); }
.rc-links { margin-top: 20px; line-height: 1.9; }
.rc-links a { color: var(--t-accent); }

@media (max-width: 860px) { .rc-list { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
    .rc-main { gap: 12px; padding: 12px; }
    .rc-av { width: 54px; height: 54px; }
    .rc-play { width: 38px; height: 38px; }
    .rc-dl { margin-inline-end: 8px; width: 36px; height: 36px; }
    .rc-item:not(:has(.rc-dl)) .rc-main { padding-inline-end: 62px; }
    .rc-txt strong { white-space: normal; font-size: 15.5px; line-height: 1.25; }
    .rc-style { white-space: normal; }
    .rc-style span { display: none; }
}