/* Reference geometry; the owner images themselves never become the page. */
html { scrollbar-width:none; }
html::-webkit-scrollbar { width:0; }
.shell { grid-template-columns:220px minmax(0,1fr); }
.shell::before {
  content:""; position:sticky; top:min(0px,calc(100vh - 941px));
  grid-column:1/-1; grid-row:1; align-self:start; height:941px;
  background:url('assets/desktop-page-scene.png') left top/1672px 941px no-repeat;
  pointer-events:none;
}
.sidebar {
  grid-column:1; grid-row:1; position:sticky; top:min(0px,calc(100vh - 941px)); align-self:start; height:max(100vh,941px); min-height:0;
  padding-top:10px; border:0; z-index:2;
  background:url('assets/desktop-sidebar.png') center top/356px 941px no-repeat,#062934;
}
.sidebar .brand,.sidebar .brand small,.sidebar-footer,.sidebar-footer small { color:transparent; text-shadow:none; }
.sidebar .brand-mark { background:none; }
.sidebar nav { position:relative; z-index:1; padding:5px 0; background:linear-gradient(135deg,#062d37,#06323b); border-radius:12px; }
.sidebar nav>* { color:#e7f1ee; text-shadow:none; border:0; background:transparent; box-shadow:none; text-decoration:none; }
.sidebar nav .active { color:#f3faee; border:1px solid #477657; background:linear-gradient(95deg,#176f52,#20563e); box-shadow:0 0 16px #397d5970; }
.sidebar nav>*:hover,.sidebar nav>*:focus-visible { color:#fff; background:#18634f; outline:2px solid #b0d4a1; outline-offset:2px; }
.sidebar nav>*:active { background:#257658; }
.sidebar-footer { background:transparent; border:0; box-shadow:none; }
.brand { font-size:30px; margin-bottom:10px; line-height:1.25; }
.brand-mark,.identity .brand-mark {
  display:block; width:108px; height:79px; margin:auto;
  background:url('assets/logo-art.png') center/contain no-repeat;
  font-size:0; color:transparent;
}
.brand small { font-size:13px; margin-top:2px; }
.sidebar .brand .desktop-tagline { color:#ddc36b; min-height:32.5px; white-space:nowrap; }
.sidebar .brand .mobile-tagline { display:none; }
.sidebar nav { padding:0 12px; gap:5px; margin-top:11px; }
.sidebar nav>* { font-size:17px; padding:9px 26px; border-radius:25px; }
.sidebar nav .active { color:#f3faee; border:1px solid #477657; box-shadow:0 0 16px #397d5970; background:linear-gradient(95deg,#176f52,#20563e); }
.sidebar-footer { min-height:110px; padding-top:12px; background:transparent; border:0; font-size:26px; }
.sidebar-footer small { position:absolute; left:0; right:0; bottom:10px; color:#fff; font-size:16px; line-height:20px; white-space:nowrap; }
.content { grid-column:2; grid-row:1; position:relative; z-index:1; padding-right:3.8cqw; }
.topbar { height:4.3cqw; background:none; }
.topbar { position:sticky; top:0; z-index:3; }
.feed .card { scroll-margin-top:90px; }
.topbar .identity { display:none; }
.account,.notification { display:grid; place-items:center; flex:none; width:42px; height:42px; color:#fff; background:#004f4f; border:2px solid #d0aa63; border-radius:50%; box-shadow:0 0 6px #57e4c0; }
.account svg { width:30px; height:30px; fill:#fff; }
.notification { background:transparent; border:0; box-shadow:none; }
.notification svg { width:37px; height:37px; fill:none; stroke:#f5cf79; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 3px #15624e); }
.query { position:relative; margin:0; padding:0; gap:clamp(8px,.8cqw,14px); }
.header-search-icon { position:absolute; left:12px; top:50%; z-index:1; width:21px; height:21px; transform:translateY(-50%); pointer-events:none; }
.header-search-icon svg { width:100%; height:100%; fill:none; stroke:#163751; stroke-width:2.5; stroke-linecap:round; }
.query label { font-size:12px; gap:2px; }
.query .surah { width:175px; }
.query .verse { width:115px; }
.query select { width:100%; }
.query input,.query select { height:42px; border:1.5px solid #b79a63; background:#f6f9f9; box-shadow:0 1px 4px #031b23; color:#173950; font-size:15px; }
.query select:disabled { opacity:1; color:#173950; background:#f6f9f9; }
.query input { min-width:0; height:44px; border-radius:14px; font-size:12px; padding-left:36px; }
.query button { padding:10px 21px; font-size:14px; border:2px solid #ddc689; box-shadow:0 0 10px #00866a,inset 0 0 8px #48ecc8; }
@media(min-width:1001px) {
  .topbar { height:80px; align-items:flex-end; padding-bottom:10px; padding-inline:12px; }
  .query { align-items:flex-end; }
  .query label { line-height:16px; gap:0; }
  .query input,.query select,.query button,.account,.notification { height:42px; }
  .query button { padding-top:0; padding-bottom:0; }
  .header-search-icon { top:auto; bottom:10.5px; transform:none; }
  .notification svg { width:30px; height:30px; }
}
.feed { gap:18px; background:transparent; }
.card { height:auto; min-height:210px; border-color:#c5a157; background:#fffdfa; box-shadow:0 1px 4px #001b2460; }
.art { display:none; }
.card-body { width:100%; padding:.28cqw .55cqw; grid-template-rows:62px 34px minmax(100px,auto); }
.verse-line { position:relative; gap:7px; }
.meta { display:flex; flex-direction:column; order:-1; align-self:flex-start; flex:none; min-width:0; text-align:right; font-size:12px; line-height:1.15; max-width:92px; }
.meta span { white-space:nowrap; }
.bookmark { order:-2; align-self:flex-start; color:#a87936; line-height:1; }
.bookmark svg { display:block; width:19px; height:26px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; }
.verse-placeholder { margin-right:14px; }
.tabs { gap:5px; margin-right:0; }
.tabs button { font-size:13px; border-radius:9px; font-weight:bold; }
.tabs button[aria-selected=true] { box-shadow:0 0 9px #00a589,inset 0 0 8px #3cfed2; }
.empty-comment { direction:ltr; display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; padding:4px 0; gap:6px; background:transparent; }
.comment-preview { direction:rtl; display:flex; align-items:flex-start; gap:9px; width:100%; height:auto; min-height:62px; min-width:0; margin:0; padding:8px 11px; background:#f1f5f6; border-radius:11px; box-shadow:0 2px 5px #bacacc; }
.comment-preview p { min-width:0; font-size:12px; }
.avatar { width:25px; height:25px; font-size:15px; }
.actions { direction:ltr; width:100%; justify-content:flex-end; align-items:center; gap:24px; padding:1px 10px; font-size:12px; }
.actions [data-inspect-id$='.more'] { margin-inline-start:0; font-size:20px; line-height:1; }
@media(max-width:1000px) {
  .shell::before { display:none; }
  .sidebar { position:absolute; top:0; height:auto; align-self:auto; background:#07313c; border:1px solid #d5ad63; }
  .sidebar .brand .desktop-tagline { display:none; }
  .sidebar .brand .mobile-tagline { display:block; }
  .sidebar .brand,.sidebar .brand small,.sidebar nav>*,.sidebar-footer,.sidebar-footer small { color:#fff; }
  .sidebar nav { margin-top:0; gap:10px; }
  .sidebar .brand-mark { background:url('assets/logo-art.png') center/contain no-repeat; }
  .sidebar nav .active { border:1px solid #b9e0c4; background:linear-gradient(90deg,#005d62,#075533); box-shadow:inset 0 0 14px #00a88d; }
  .site { background:linear-gradient(90deg,#0a473f,#073039 5%,#073039 95%,#0a473f); }
  .content { padding:0 2.5cqw; }
  .topbar {
    height:43cqw; padding:0; background:
      url('assets/mobile-header-art.png') center top/100% 100% no-repeat,
      radial-gradient(circle at 49% 42%,#16616b,#06323d 75%);
  }
  .topbar .identity { display:block; padding-top:.6cqw; font-size:4.9cqw; line-height:1.12; }
  .identity .brand-mark { width:11.5cqw; height:8.4cqw; background-size:contain; }
  .identity small { display:block; max-width:31cqw; margin:1.7cqw auto 0; font-size:1.95cqw; line-height:1.25; }
  .mobile-menu { left:3.8cqw; top:2.8cqw; width:8.5cqw; height:7.5cqw; border:2px solid #d6ae61; border-radius:2.5cqw; font-size:4.8cqw; background:#003d42; box-shadow:0 0 7px #e9bd6d; }
  .account,.notification { position:absolute; top:2.9cqw; width:8cqw; height:7.5cqw; font-size:5cqw; border-width:2px; }
  .account { right:3.8cqw; }
  .notification { right:12.5cqw; }
  .query {
    position:absolute; top:20.8cqw; left:5cqw; right:5cqw; height:20cqw;
    display:grid; grid-template-columns:31% 28% 31%; grid-template-rows:6.2cqw 2.8cqw 7.3cqw;
    column-gap:3%; row-gap:.55cqw; margin:0; padding:0; justify-content:space-between;
  }
  .query input { grid-column:1/-1; grid-row:1; width:100%; height:6.2cqw; font-size:2.05cqw; border-radius:3cqw; padding-inline:2cqw; padding-left:6cqw; }
  .header-search-icon { top:3.1cqw; left:1.8cqw; width:3.3cqw; height:3.3cqw; }
  .query .surah { grid-column:1; grid-row:2/4; width:100%; }
  .query .verse { grid-column:2; grid-row:2/4; width:100%; }
  .query label { transform:translateY(2cqw); grid-template-rows:2.8cqw 7.3cqw; gap:.55cqw; font-size:2.35cqw; }
  .query select { height:7.3cqw; width:100%; font-size:2.6cqw; border-radius:1.7cqw; }
  .query button { transform:translateY(1.5cqw); grid-column:3; grid-row:3; width:100%; font-size:3cqw; border-radius:2cqw; padding:0; }
  .card,.card:nth-child(2),.card:nth-child(n + 3) { height:auto; min-height:380px; border-radius:2.4cqw; }
  .feed { gap:20px; background:none; }
  .feed .card { scroll-margin-top:calc(43cqw + 12px); }
  .card-body { grid-template-columns:minmax(0,1fr); padding:1cqw; grid-template-rows:100px 60px minmax(160px,auto); }
  .meta { font-size:1.75cqw; max-width:12cqw; }
  .bookmark svg { width:14px; height:20px; }
  .verse-placeholder { margin-right:0; }
  .tabs { align-items:center; gap:.5cqw; margin-right:0; }
  .tabs button { height:68%; font-size:1.9cqw; border-radius:1.3cqw; }
  .empty-comment { flex-wrap:nowrap; }
  .comment-preview { width:100%; height:auto; min-height:92px; gap:1cqw; margin:0; padding:1cqw; border-radius:2.2cqw; }
  .comment-preview p { font-size:2.1cqw; white-space:normal; }
  .avatar { width:5.6cqw; height:5.6cqw; font-size:3.5cqw; }
  .actions { width:100%; align-self:stretch; justify-content:flex-end; margin-inline-start:0; gap:2.4cqw; padding:0 1cqw; font-size:2.1cqw; }
  .actions [data-inspect-id$='.more'] { font-size:3.2cqw; }
}
@media(max-width:600px) {
  .topbar { height:190px; }
  .identity small { font-size:10px; }
  .mobile-menu,.account,.notification { min-width:44px; min-height:44px; }
  .notification { right:60px; }
  .account { right:14px; }
  .query { top:80px; height:95px; grid-template-rows:32px 16px 35px; row-gap:3px; }
  .query input { height:32px; font-size:12px; }
  .header-search-icon { top:16px; left:7px; width:17px; height:17px; }
  .query label { transform:none; grid-template-rows:16px 35px; font-size:11px; }
  .query select { height:35px; font-size:12px; }
  .query button { transform:none; font-size:13px; }
  .card,.card:nth-child(2),.card:nth-child(n + 3) { height:auto; min-height:270px; }
  .card-body { grid-template-rows:76px 45px minmax(130px,auto); }
  .feed { gap:14px; }
  .meta { font-size:10px; max-width:56px; }
  .verse-trigger { min-height:44px; }
  .tabs button { min-height:24px; font-size:11px; white-space:normal; text-overflow:clip; overflow:visible; line-height:1.25; flex:1 1 0; }
  .tabs button[data-section=impact] { flex:1.8 1 0; }
  .comment-preview { min-height:82px; padding:6px; }
  .comment-preview p { font-size:11px; line-height:1.35; }
  .actions { font-size:11px; min-height:30px; }
}
/* Local-only test interactions; the photo is decorative, the controls are DOM. */
#feed[hidden],#empty-page[hidden] { display:none; }
.page-empty .query,.page-empty .disclosure { display:none; }
.empty-page { max-width:700px; min-height:380px; margin:30px auto; padding:60px 30px; text-align:center; color:#f4e5bd; border:1px solid #b29357; border-radius:16px; background:#07323dcc; }
.empty-page h2 { margin:0 0 22px; font-size:30px; }
.empty-page p { color:#d6ddd2; }
.comment-copy { min-width:0; flex:1; text-align:right; display:flex; flex-direction:column; }
.comment-byline { display:flex; align-items:center; gap:6px; direction:ltr; }
.actions .comment-byline { margin-right:auto; flex:none; cursor:pointer; }
.comment-identity { display:flex; flex-direction:column; gap:2px; text-align:right; direction:rtl; }
.comment-time { color:#56718b; font-size:10px; line-height:1.2; }
.comment-time[hidden] { display:none; }
.comment-byline .avatar { order:-1; width:25px; height:25px; }
.comment-byline .avatar svg { display:block; width:70%; height:70%; fill:#173950; }
.comment-source { order:3; align-self:flex-start; margin-top:5px; font-size:10px; color:#246c61; }
.comment-source[hidden] { display:none; }
.comment-author { display:block; color:#274d50; font-size:12px; line-height:1.2; }
.comment-preview p { margin:2px 0 0; overflow-wrap:anywhere; line-height:1.4; }
.actions button { border:0; padding:3px 4px; background:transparent; color:#294e55; cursor:pointer; white-space:nowrap; direction:rtl; }
.like-icon { width:17px; height:17px; fill:#118bd0; vertical-align:middle; }
.actions .reply span { color:#08659b; font-size:19px; font-weight:bold; }
.actions .more { color:#124063; }
.actions button:hover,.actions button:focus-visible { color:#0c6850; text-decoration:underline; outline:2px solid #25805e; outline-offset:2px; }
.actions button[aria-pressed=true] { color:#08785e; font-weight:bold; }
.comment-preview[hidden],.actions[hidden],.comment-empty[hidden] { display:none; }
.comment-empty { direction:rtl; margin:0; padding:18px 10px; color:#476069; font-size:12px; text-align:right; }
.inline-reply[hidden] { display:none; }
.inline-reply { direction:rtl; align-self:stretch; display:grid; gap:6px; min-width:0; padding:10px 12px; margin:0 10px 5px 0; border-right:2px solid #bfd6d0; border-radius:9px; background:#f1f5f6; text-align:right; }
.reply-label { font-size:12px; font-weight:bold; color:#274d50; }
.reply-input { box-sizing:border-box; display:block; width:100%; min-height:54px; padding:8px; resize:vertical; border:1px solid #9ebcb7; border-radius:8px; color:#173950; background:#fff; }
.reply-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.reply-disclaimer { font-size:10px; color:#476069; }
.reply-cancel { padding:4px 8px; border:1px solid #9ebcb7; border-radius:6px; background:#fff; color:#173950; }
.reply-cancel:focus-visible,.reply-input:focus-visible { outline:2px solid #25805e; }
.actions .more { cursor:default; }
.actions .report[hidden] { display:none; }
.comments-dialog.comment-report-dialog { width:min(420px,calc(100vw - 24px)); height:fit-content; max-height:calc(100dvh - 24px); min-height:0; margin:auto; border-radius:12px; }
.comment-report-content { padding:16px; color:#274d50; line-height:1.5; }
.comment-report-content p { margin:0 0 8px; }
.comment-report-content p:last-child { margin:0; }
.comment-preview[role="button"] { cursor:pointer; }
.comment-preview[role="button"]:hover,.comment-preview[role="button"]:focus-visible { outline:2px solid #25805e; outline-offset:1px; }
.empty-comment { position:relative; }
.topic-card .empty-comment[hidden] { display:none; }
/* A local, contextual comments window; the feed above keeps its own layout. */
.comments-dialog { box-sizing:border-box; width:min(700px,calc(100vw - 24px)); height:min(936px,calc(100dvh - 48px)); max-width:none; max-height:none; padding:0; border:0; border-radius:12px; background:#fff; color:#1c1e21; box-shadow:0 12px 30px #0006; font:14px Arial,sans-serif; }
.comments-dialog[open] { display:flex; flex-direction:column; }
.comments-dialog::backdrop { background:#172127b3; }
.comments-heading { direction:ltr; flex:none; height:60px; display:grid; grid-template-columns:44px 1fr 44px; align-items:center; padding:0 16px; border-bottom:1px solid #e4e6eb; }
.comments-heading strong { text-align:center; direction:rtl; font-size:20px; }
.comments-heading button { width:36px; height:36px; border:0; border-radius:50%; background:#e4e6eb; color:#65676b; font-size:26px; cursor:pointer; }
.comments-scroll { min-height:0; flex:1; overflow:auto; overscroll-behavior:contain; }
.comments-post { padding:12px 16px; text-align:center; border-bottom:1px solid #e4e6eb; }
.comments-post>p:first-child { margin:0 0 10px; text-align:right; font-weight:bold; }
.comments-post img { display:block; max-width:100%; max-height:min(240px,22dvh); object-fit:contain; margin:auto; }
.comments-post img[hidden] { display:none; }
.comments-note { margin:10px 0 0; font-size:12px; color:#65676b; }
.comments-section { display:flex; gap:8px; flex-wrap:wrap; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #e4e6eb; }
.comments-section span { color:#65676b; font-size:12px; }
.comments-entry { display:flex; gap:8px; padding:16px; align-items:flex-start; }
.comments-entry>div { min-width:0; }
.comments-avatar { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#e4e6eb; color:#65676b; }
.comments-avatar[hidden] { display:none; }
.comments-avatar img { display:block; width:100%; height:100%; border-radius:50%; }
.comments-thread { padding:0 16px 18px 60px; }
.thread-item { margin-bottom:14px; }
.thread-head { display:flex; align-items:flex-start; gap:8px; }
.thread-avatar { flex:none; width:36px; height:36px; border-radius:50%; object-fit:cover; }
.thread-bubble { min-width:0; max-width:100%; padding:9px 12px; border-radius:16px; background:#f0f2f5; overflow-wrap:anywhere; }
.thread-bubble strong { display:block; font-size:13px; }
.thread-bubble p { margin:4px 0 0; line-height:1.45; white-space:pre-wrap; }
.thread-actions { display:flex; gap:15px; margin:4px 44px 0 0; }
.thread-actions button,.thread-toggle { border:0; padding:2px; background:transparent; color:#65676b; font-size:12px; font-weight:bold; cursor:pointer; }
.thread-actions button[aria-pressed=true] { color:#0866ff; }
.thread-toggle { display:block; margin:5px 44px 0 0; }
.thread-children { margin:8px 40px 0 0; padding-right:10px; border-right:2px solid #e4e6eb; }
.thread-children[hidden] { display:none; }
.thread-children .thread-avatar { width:28px; height:28px; }
.thread-children .thread-actions { margin-right:36px; }
.thread-actions button:focus-visible,.thread-toggle:focus-visible { outline:2px solid #0866ff; border-radius:3px; }
.comments-bubble { background:#f0f2f5; border-radius:15px; padding:10px 12px; overflow-wrap:anywhere; }
.comments-bubble p { margin:5px 0; line-height:1.6; white-space:pre-wrap; }
.comments-bubble a { display:block; margin-top:8px; color:#0866ff; }
.comments-bubble a[hidden] { display:none; }
#comments-reply { margin:6px 12px; padding:0; border:0; background:none; color:#65676b; font-weight:bold; cursor:pointer; }
#comments-replies { margin:4px 12px; color:#65676b; font-size:12px; }
.comments-composer { flex:none; border-top:1px solid #e4e6eb; padding:12px 16px; }
.comments-composer label { display:block; margin-bottom:8px; font-weight:bold; }
.comments-composer>div { display:flex; align-items:center; gap:8px; background:#f0f2f5; border-radius:20px; padding:8px 12px; }
.comments-composer textarea { flex:1; min-width:0; height:42px; resize:vertical; border:0; outline:0; background:transparent; color:#1c1e21; }
.comments-composer button { border:0; cursor:pointer; }
.comments-composer button:disabled { color:#99a1ac; cursor:not-allowed; }
.comments-composer small { display:block; margin-top:6px; color:#65676b; }
#comments-cancel-reply { margin-top:6px; background:transparent; color:#0866ff; }
#comments-cancel-reply[hidden] { display:none; }
.comments-dialog button:focus-visible,.comments-dialog textarea:focus-visible { outline:2px solid #0866ff; outline-offset:2px; }
@media(max-width:700px) { .comments-dialog { width:100vw; height:100dvh; max-width:none; max-height:none; border-radius:0; margin:0; } .comments-heading { height:54px; } .comments-heading strong { font-size:17px; } }
@media(max-width:1000px) {
  .sidebar nav { background:#07313c; }
  .empty-page { min-height:300px; margin:2cqw auto; }
}
@media(max-width:600px) {
  .comment-author { font-size:10px; }
  .actions button { font-size:11px; min-width:42px; min-height:25px; }
  .empty-page { min-height:240px; padding:36px 14px; }
}
.topic-card > .medallion { position:absolute; left:6px; top:.28cqw; z-index:1; width:2.3em; height:2.3em; border:0; border-radius:0; box-shadow:none; background:url('assets/desktop-badge-art.png') center/100% 100% no-repeat; display:grid; place-items:center; font-size:12px; color:#201b14; padding:1px 0 0 1px; pointer-events:none; }
.topic-card .verse-trigger:first-child { padding-left:74px; }
@media(max-width:1000px) {
  .topic-card > .medallion { left:-.64cqw; top:2.2cqw; font-size:1.75cqw; background-image:url('assets/mobile-badge-art.png'); }
  .topic-card .verse-trigger:first-child { padding-left:10.6cqw; }
}
@media(max-width:600px) { .topic-card > .medallion { font-size:10px; } }
@media(min-width:1001px) and (max-width:1239px) {
  .tajweed-preview .topic-card:not(:first-child) .verse-line .verse-placeholder { padding-left:80px; }
}
.topic-card .card-body { grid-template-rows:auto auto auto; }
/* Keep each topic post's text and identity in their original order, without reserved empty rows. */
.card.topic-card { min-height:0; }
.topic-card .comment-preview { min-height:0; }
.topic-card .comment-preview p { white-space:normal; overflow:visible; text-overflow:clip; }
.topic-card .empty-comment { justify-content:flex-start; }
.topic-card .actions .more { width:24px; min-width:0; min-height:0; padding:0 2px; line-height:1; cursor:pointer; }
#comment-options:popover-open { display:grid; gap:6px; box-sizing:border-box; width:min(280px,calc(100vw - 16px)); max-height:calc(100dvh - 16px); overflow:auto; right:auto; bottom:auto; margin:0; padding:10px; border:1px solid #b5c8c3; border-radius:9px; background:#fffdfa; color:#274d50; box-shadow:0 6px 18px #001b2450; font:13px Tahoma,Arial,sans-serif; }
#comment-options button { padding:7px 9px; border:0; border-radius:5px; background:#eef4f2; color:inherit; text-align:right; cursor:pointer; }
#comment-options button:focus-visible { outline:2px solid #25805e; }
#comment-options button:disabled { opacity:.65; cursor:not-allowed; }
#comment-options small { color:#56718b; line-height:1.5; }
#comment-options-status { margin:0; line-height:1.5; }
.post-feedback { direction:rtl; display:flex; align-items:center; gap:clamp(12px,2.2cqw,28px); min-width:0; min-height:34px; padding:4px 10px; border-block:1px solid #d9e1df; color:#5b6770; }
.post-feedback[hidden] { display:none; }
.post-feedback-item { display:inline-flex; align-items:center; gap:3px; flex:none; padding:0; border:0; background:none; color:inherit; font-size:12px; }
.post-feedback button.post-feedback-item { cursor:pointer; }
.post-feedback button.post-feedback-item:disabled { cursor:not-allowed; opacity:.5; }
.post-feedback button.post-feedback-item[aria-pressed=true] { color:#08785e; }
.post-feedback button.post-feedback-item:focus-visible { outline:2px solid #25805e; outline-offset:2px; }
.post-feedback-item svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; }
.post-feedback-reaction { margin-inline-start:auto; }
.post-feedback-reaction svg { fill:#d9e8f2; stroke:#7895a8; }
.post-comments-dialog[open] { display:flex; flex-direction:column; }
.post-comments-dialog .comments-scroll { flex:1; min-height:0; overflow:auto; }
.post-comments-dialog #post-comments-feedback { direction:rtl; }
.post-comments-dialog #post-comments-feedback .post-feedback { gap:clamp(12px,3vw,28px); }
.post-comments-dialog .post-comments-sort { position:relative; padding:8px 16px 4px; text-align:right; }
.post-comments-dialog #post-comments-sort-trigger { padding:4px 2px; border:0; background:none; color:#65676b; font:600 13px Arial,sans-serif; cursor:pointer; }
.post-comments-dialog #post-comments-sort-menu:popover-open { position:fixed; z-index:2; inset:auto; box-sizing:border-box; width:min(320px,calc(100vw - 32px)); max-height:calc(100dvh - 16px); overflow:auto; margin:0; padding:6px; border:1px solid #e4e6eb; border-radius:9px; background:#fff; box-shadow:0 6px 18px #0003; text-align:right; }
.post-comments-dialog #post-comments-sort-menu button { display:block; width:100%; padding:9px 10px; border:0; border-radius:5px; background:none; color:#1c1e21; font:600 14px Arial,sans-serif; text-align:right; cursor:pointer; }
.post-comments-dialog #post-comments-sort-menu button:disabled { color:#65676b; cursor:not-allowed; }
.post-comments-dialog #post-comments-sort-menu button:hover:not(:disabled) { background:#f0f2f5; }
.post-comments-dialog #post-comments-sort-menu small { display:block; margin-top:3px; font-size:11px; font-weight:normal; line-height:1.4; color:#65676b; }
.post-comments-verse { padding:12px 0; text-align:center; color:#18394a; line-height:1.8; }
.post-comments-verse .tajweed-text { display:block; font-size:clamp(25px,4vw,32px); }
.post-comments-stats { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:10px 16px; border-bottom:1px solid #e4e6eb; color:#65676b; font-size:12px; }
.post-comments-note { margin:12px 16px 0; padding:10px 12px; border-radius:8px; background:#f0f2f5; color:#464c53; line-height:1.6; }
.post-comments-dialog #post-comments-entries { direction:rtl; padding:4px 12px 12px; }
.post-comments-dialog .post-comment-item { min-width:0; padding:8px 2px; }
.post-comments-dialog #post-comments-entries>.post-comment-item { border-bottom:1px solid #f0f2f5; }
.post-comments-dialog .post-comment-line { display:flex; align-items:flex-start; gap:7px; min-width:0; }
.post-comments-dialog .post-comment-line .comments-avatar { width:36px; height:36px; }
.post-comments-dialog .post-comment-reply .comments-avatar { width:28px; height:28px; }
.post-comments-dialog .post-comment-line .comments-bubble { flex:0 1 auto; min-width:0; max-width:calc(100% - 85px); padding:7px 11px; }
.post-comments-dialog .post-comment-line .comments-bubble p { margin:3px 0; line-height:1.45; }
.post-comments-dialog .post-comment-line .comments-bubble small { display:block; color:#65676b; font-size:11px; line-height:1.45; }
.post-comments-dialog .post-comment-line .more { flex:none; align-self:center; border:0; padding:5px 8px; background:transparent; color:#65676b; font-size:18px; cursor:pointer; }
.post-comments-dialog .post-comment-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:2px 44px 0 0; color:#65676b; font-size:11px; }
.post-comments-dialog .post-comment-actions button { border:0; padding:3px 0; background:transparent; color:inherit; font-size:12px; font-weight:bold; cursor:pointer; }
.post-comments-dialog .post-comment-actions button[aria-pressed=true] { color:#0866ff; }
.post-comments-dialog #post-comment-share-menu:popover-open { position:fixed; inset:auto; box-sizing:border-box; width:min(360px,calc(100vw - 16px)); max-height:calc(100dvh - 16px); overflow:auto; margin:0; padding:8px; border:1px solid #e4e6eb; border-radius:12px; background:#fff; color:#1c1e21; box-shadow:0 8px 22px #0004; font:14px Arial,sans-serif; text-align:right; }
.post-comments-dialog #post-comment-share-menu button { display:flex; justify-content:space-between; gap:12px; width:100%; padding:9px 10px; border:0; border-radius:6px; background:transparent; color:inherit; font:inherit; text-align:right; }
.post-comments-dialog #post-comment-share-menu button:disabled { opacity:.65; cursor:not-allowed; }
.post-comments-dialog #post-comment-share-menu small { display:block; padding:8px 10px 3px; border-top:1px solid #e4e6eb; color:#65676b; font-size:11px; line-height:1.4; }
.post-comments-dialog .post-comment-thread { margin-right:36px; padding-right:8px; border-right:2px solid #e4e6eb; }
.post-comments-dialog .post-comments-composer { display:flex; direction:rtl; align-items:flex-start; gap:8px; padding:8px 12px; }
.post-comments-dialog .post-comments-compose-body { display:block; flex:1; min-width:0; padding:0; border-radius:0; background:transparent; }
.post-comments-dialog .post-comments-compose-body>div { display:flex; align-items:center; gap:8px; padding:5px 12px; border-radius:20px; background:#f0f2f5; }
.post-comments-dialog .post-comments-compose-body label { margin:0 0 3px; color:#65676b; font-size:12px; }
.post-comments-dialog .post-comments-compose-body textarea { height:28px; resize:none; }
.post-comments-dialog #post-comments-cancel-reply { padding:4px 0; background:transparent; color:#0866ff; }
.post-comments-dialog #post-comments-cancel-reply[hidden] { display:none; }
.post-comments-dialog .comments-composer textarea:disabled { cursor:not-allowed; }
@media(max-width:600px) { .post-comments-verse .tajweed-text { font-size:clamp(23px,7vw,30px); } }
.post-share-dialog { box-sizing:border-box; width:min(550px,calc(100vw - 24px)); max-width:none; max-height:min(90dvh,592px); padding:0; border:0; border-radius:12px; background:#fff; color:#1c1e21; box-shadow:0 12px 30px #0006; font:14px Arial,sans-serif; }
.post-share-dialog::backdrop { background:#172127b3; }
.post-share-dialog header { direction:ltr; height:60px; display:grid; grid-template-columns:44px 1fr 44px; align-items:center; padding:0 16px; border-bottom:1px solid #e4e6eb; }
.post-share-dialog header strong { text-align:center; direction:rtl; font-size:20px; }
.post-share-dialog header button { width:36px; height:36px; border:0; border-radius:50%; background:#e4e6eb; color:#65676b; font-size:26px; cursor:pointer; }
.post-share-content { padding:18px 16px 24px; }
.post-share-content>strong { display:block; }
.post-share-content p { margin:16px 0; color:#65676b; line-height:1.6; }
.post-share-options { display:flex; flex-wrap:wrap; gap:8px; }
.post-share-options button { border:0; border-radius:7px; padding:10px 14px; background:#e4e6eb; color:#1c1e21; font:inherit; cursor:pointer; }
.post-share-options button:disabled { opacity:.5; cursor:not-allowed; }
.post-share-dialog button:focus-visible { outline:2px solid #0866ff; outline-offset:2px; }
@media(max-width:600px) { .post-feedback { gap:12px; padding-inline:5px; } .post-feedback-item { font-size:11px; } .post-feedback-item svg { width:17px; height:17px; } }
.topic-card .verse-line { align-items:flex-start; min-height:0; }
.topic-card .verse-placeholder { display:block; height:auto; overflow:visible; margin-right:0; padding:4px 0; }
.topic-card .verse-trigger { display:block; height:auto; min-height:0; text-align:center; }