/* V152 — dedicated Surah detail tab, safer letter spacing, individually colored nav icons */

/* ── Surah detail browser ── */
#pageQuran #qocSurahDetailPane{overflow:visible}
#pageQuran #qocSurahDetailPane .ss-detail-browser{
  margin:.9rem 0 1rem;padding:1rem;border:1px solid var(--bdr);border-radius:14px;background:var(--card,var(--bg3));overflow:visible;
}
#pageQuran #qocSurahDetailPane .ss-detail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
#pageQuran #qocSurahDetailPane .ss-detail-head h3{margin:0 0 .24rem;color:var(--gold2,var(--gold));font-size:1rem}
#pageQuran #qocSurahDetailPane .ss-detail-head p{margin:0;color:var(--txt3);font-size:.75rem;line-height:1.75;max-width:760px}
#pageQuran #qocSurahDetailPane .ss-detail-search-wrap{flex:0 1 360px;min-width:250px}
#pageQuran #qocSurahDetailPane #ssDetailSearch{width:100%;box-sizing:border-box;border:1px solid var(--bdr);border-radius:10px;background:var(--bg2);color:var(--txt1);padding:.62rem .78rem;font:inherit;font-size:.82rem;outline:none}
#pageQuran #qocSurahDetailPane #ssDetailSearch:focus{border-color:var(--gold2,var(--gold));box-shadow:0 0 0 2px color-mix(in srgb,var(--gold2,var(--gold)) 10%,transparent)}
#pageQuran #qocSurahDetailPane .ss-detail-search-meta{margin:.6rem 0 .5rem;color:var(--txt3);font-size:.7rem}
#pageQuran #qocSurahDetailPane .ss-surah-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.48rem;max-height:none;overflow:visible}
#pageQuran #qocSurahDetailPane .ss-surah-pick{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:.48rem;min-width:0;padding:.52rem .58rem;border:1px solid var(--bdr);border-radius:10px;background:var(--bg2);color:var(--txt1);font:inherit;text-align:right;cursor:pointer;transition:.15s ease}
#pageQuran #qocSurahDetailPane .ss-surah-pick:hover,#pageQuran #qocSurahDetailPane .ss-surah-pick.active{border-color:var(--gold2,var(--gold));background:color-mix(in srgb,var(--gold2,var(--gold)) 8%,var(--bg2));transform:translateY(-1px)}
#pageQuran #qocSurahDetailPane .ss-surah-pick-no{display:grid;place-items:center;width:30px;height:30px;border:1px solid color-mix(in srgb,var(--gold2,var(--gold)) 46%,var(--bdr));border-radius:8px;color:var(--gold2,var(--gold));font-family:'Ubuntu Mono',monospace;font-weight:800;font-size:.76rem}
#pageQuran #qocSurahDetailPane .ss-surah-pick-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:750;font-size:.78rem}
#pageQuran #qocSurahDetailPane .ss-surah-pick small{color:var(--txt3);font-size:.61rem;white-space:nowrap}

/* The frequency panel lives only in the dedicated tab now. */
#pageQuran #qocSurahDetailPane .ss-letter-panel{scroll-margin-top:92px;margin:0 0 1.05rem;border:1px solid var(--bdr);border-radius:14px;background:var(--card,var(--bg3));padding:1rem;overflow:hidden}
#pageQuran #qocSurahDetailPane .ss-letter-head{margin-bottom:.72rem}
#pageQuran #qocSurahDetailPane .ss-letter-head h3{margin:0 0 .2rem;color:var(--gold2,var(--gold));font-size:1.04rem}
#pageQuran #qocSurahDetailPane .ss-letter-head p{margin:0;color:var(--txt3);font-size:.74rem;line-height:1.7}
#pageQuran #qocSurahDetailPane .ss-detail-identity{display:flex;align-items:center;gap:.72rem;margin:.65rem 0 .82rem;padding:.68rem .75rem;border:1px solid var(--bdr);border-radius:11px;background:var(--bg2)}
#pageQuran #qocSurahDetailPane .ss-detail-surah-no{width:44px;height:44px;flex:0 0 44px;border:1px solid var(--gold2,var(--gold));border-radius:12px;background:color-mix(in srgb,var(--gold2,var(--gold)) 8%,var(--bg2));color:var(--gold2,var(--gold));font:800 .92rem 'Ubuntu Mono',monospace;cursor:pointer}
#pageQuran #qocSurahDetailPane .ss-detail-identity strong{display:block;color:var(--txt1);font-size:1rem}
#pageQuran #qocSurahDetailPane .ss-detail-identity span{display:block;margin-top:.14rem;color:var(--txt3);font-size:.67rem}
#pageQuran #qocSurahDetailPane .ss-detail-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.58rem;margin:.7rem 0 1rem}
#pageQuran #qocSurahDetailPane .ss-detail-stat{min-width:0;border:1px solid var(--bdr);border-radius:10px;background:var(--bg2);padding:.62rem .48rem;text-align:center}
#pageQuran #qocSurahDetailPane .ss-detail-stat b{display:block;color:var(--gold2,var(--gold));font-family:'Ubuntu Mono',monospace;font-size:1rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pageQuran #qocSurahDetailPane .ss-detail-num{cursor:pointer}
#pageQuran #qocSurahDetailPane .ss-detail-num:hover{text-decoration:underline;text-underline-offset:3px}
#pageQuran #qocSurahDetailPane .ss-detail-stat span{display:block;margin-top:.18rem;color:var(--txt3);font-size:.67rem;line-height:1.3}

/* Important: each letter/count owns a separate cell and never shares line space with another count. */
#pageQuran #qocSurahDetailPane .ss-letter-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.72rem .68rem;direction:rtl;width:100%;box-sizing:border-box}
#pageQuran #qocSurahDetailPane .ss-letter-cell{position:relative;box-sizing:border-box;min-width:0;min-height:86px;border:1px solid var(--bdr);border-radius:11px;background:var(--bg2);padding:.52rem .4rem .54rem;text-align:center;overflow:hidden}
#pageQuran #qocSurahDetailPane .ss-letter-cell.present{border-color:color-mix(in srgb,var(--gold2,var(--gold)) 48%,var(--bdr))}
#pageQuran #qocSurahDetailPane .ss-letter-cell.absent{opacity:.58;border-style:dashed;background:color-mix(in srgb,var(--bg2) 78%,transparent)}
#pageQuran #qocSurahDetailPane .ss-letter-char{display:block;font-family:var(--font-ar,var(--font-main));font-size:1.3rem;font-weight:850;color:var(--txt1);line-height:1.15;white-space:nowrap}
#pageQuran #qocSurahDetailPane .ss-letter-cell.present .ss-letter-char{color:var(--gold2,var(--gold))}
#pageQuran #qocSurahDetailPane .ss-letter-count{display:block;width:100%;margin-top:.25rem;font-family:'Ubuntu Mono',monospace;font-size:.86rem;font-weight:850;line-height:1.15;color:var(--txt1);white-space:nowrap;overflow:hidden;text-overflow:clip;font-variant-numeric:tabular-nums}
#pageQuran #qocSurahDetailPane .ss-letter-cell.absent .ss-letter-count{color:var(--txt3)}
#pageQuran #qocSurahDetailPane .ss-letter-bar{position:absolute;right:8px;left:8px;bottom:8px;height:4px;border-radius:999px;background:color-mix(in srgb,var(--txt3) 16%,transparent);overflow:hidden}
#pageQuran #qocSurahDetailPane .ss-letter-bar i{display:block;height:100%;width:var(--pct,0%);max-width:100%;border-radius:inherit;background:var(--gold2,var(--gold))}
#pageQuran #qocSurahDetailPane .ss-letter-missing{margin-top:1rem;border-top:1px solid var(--bdr);padding-top:.75rem;color:var(--txt2);font-size:.76rem;line-height:1.75}
#pageQuran #qocSurahDetailPane .ss-letter-missing b{color:var(--gold2,var(--gold))}
#pageQuran #qocSurahDetailPane .ss-letter-missing-list{display:inline-flex;gap:.36rem;flex-wrap:wrap;vertical-align:middle;margin-inline-start:.38rem}
#pageQuran #qocSurahDetailPane .ss-letter-missing-list span{display:inline-flex;align-items:center;justify-content:center;min-width:29px;height:29px;padding:0 .28rem;border:1px dashed var(--bdr);border-radius:7px;color:var(--txt1);font-weight:800}
#pageQuran #qocSurahDetailPane .ss-letter-method{margin-top:.58rem;color:var(--txt3);font-size:.66rem;line-height:1.7}

/* ── Main dropdown miniatures: neutral cards, individual icon colors ── */
#raqeemCategoryNav .raqeem-category-tool{background:var(--bg2)!important;border-color:var(--bdr)!important;box-shadow:none!important}
#raqeemCategoryNav .raqeem-category-tool::before{display:none!important}
#raqeemCategoryNav .raqeem-category-tool:hover{background:color-mix(in srgb,var(--rq-tool-icon,var(--gold)) 7%,var(--bg2))!important;border-color:color-mix(in srgb,var(--rq-tool-icon,var(--gold)) 55%,var(--bdr))!important;box-shadow:0 6px 18px color-mix(in srgb,var(--rq-tool-icon,var(--gold)) 10%,transparent)!important}
#raqeemCategoryNav .raqeem-category-tool .tgi{color:var(--rq-tool-icon,var(--gold))!important;text-shadow:0 0 12px color-mix(in srgb,var(--rq-tool-icon,var(--gold)) 38%,transparent)!important}
#raqeemCategoryNav .raqeem-category-tool .tgl{color:var(--txt2)!important;font-weight:650}
html[data-theme="light"] #raqeemCategoryNav .raqeem-category-tool{background:#fff!important;border-color:#d8d2c4!important}
html[data-theme="light"] #raqeemCategoryNav .raqeem-category-tool:hover{background:color-mix(in srgb,var(--rq-tool-icon,var(--gold)) 6%,#fff)!important}

@media(max-width:900px){
  #pageQuran #qocSurahDetailPane .ss-surah-picker{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  #pageQuran #pg-surastats .qoc-subtabs{gap:.4rem}
  #pageQuran #pg-surastats .qoc-subtab{flex:1 1 calc(50% - .4rem);min-width:0;font-size:.75rem;padding:.55rem .45rem}
  #pageQuran #qocSurahDetailPane .ss-detail-browser,#pageQuran #qocSurahDetailPane .ss-letter-panel{padding:.75rem;border-radius:12px}
  #pageQuran #qocSurahDetailPane .ss-detail-head{display:block}
  #pageQuran #qocSurahDetailPane .ss-detail-search-wrap{min-width:0;width:100%;margin-top:.65rem}
  #pageQuran #qocSurahDetailPane .ss-surah-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
  #pageQuran #qocSurahDetailPane .ss-surah-pick{grid-template-columns:30px minmax(0,1fr);gap:.38rem;padding:.45rem}
  #pageQuran #qocSurahDetailPane .ss-surah-pick small{grid-column:2;font-size:.58rem}
  #pageQuran #qocSurahDetailPane .ss-detail-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:.42rem}
  #pageQuran #qocSurahDetailPane .ss-letter-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.52rem .46rem}
  #pageQuran #qocSurahDetailPane .ss-letter-cell{min-height:78px;padding:.45rem .25rem .48rem}
  #pageQuran #qocSurahDetailPane .ss-letter-char{font-size:1.17rem}
  #pageQuran #qocSurahDetailPane .ss-letter-count{font-size:.79rem;margin-top:.22rem}
}
@media(max-width:390px){
  #pageQuran #qocSurahDetailPane .ss-surah-picker{grid-template-columns:1fr}
  #pageQuran #qocSurahDetailPane .ss-letter-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.46rem}
}

/* V153 — verse-analysis style letter strip + desktop pairing */
#pageQuran #qocSurahDetailPane .ss-letter-strip-card{margin-top:.7rem;border:1px solid var(--bdr);border-radius:13px;background:var(--bg2);padding:.85rem .9rem;overflow:visible}
#pageQuran #qocSurahDetailPane .ss-letter-strip-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:.65rem}
#pageQuran #qocSurahDetailPane .ss-letter-strip-title,#pageQuran #qocSurahDetailPane .ss-letter-strip-filters{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
#pageQuran #qocSurahDetailPane .ss-letter-strip-title strong{color:var(--txt1);font-size:.86rem}.ss-letter-strip-title span{color:var(--txt3);font-size:.76rem}.ss-letter-strip-title b{color:var(--gold2,var(--gold))}
#pageQuran #qocSurahDetailPane .ss-letter-strip-filters{margin-inline-start:auto;direction:ltr;color:var(--txt2);font-size:.73rem}
#pageQuran #qocSurahDetailPane .ss-letter-strip-filters label{display:flex;align-items:center;gap:.3rem;cursor:pointer;white-space:nowrap}
#pageQuran #qocSurahDetailPane .ss-letter-strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:8px 10px;direction:rtl;padding:.35rem 0;width:100%}
#pageQuran #qocSurahDetailPane .ss-letter-column{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;flex:0 0 34px;min-width:34px;max-width:34px;overflow:visible}
#pageQuran #qocSurahDetailPane .ss-letter-column.absent{opacity:.22}
#pageQuran #qocSurahDetailPane .ss-letter-count{display:block;min-height:1.2rem;width:34px;text-align:center;font:700 .87rem 'Ubuntu Mono',monospace;color:var(--gold2,var(--gold));white-space:nowrap;overflow:visible}
#pageQuran #qocSurahDetailPane .ss-letter-column.absent .ss-letter-count{color:var(--txt3)}
#pageQuran #qocSurahDetailPane .ss-letter-track{display:flex;align-items:flex-end;justify-content:center;width:18px;height:38px;border-radius:3px;background:rgba(255,255,255,.055);overflow:hidden}
#pageQuran #qocSurahDetailPane .ss-letter-track i{display:block;width:100%;max-height:34px;border-radius:3px 3px 0 0;background:var(--gold2,var(--gold));transition:height .25s ease}
#pageQuran #qocSurahDetailPane .ss-letter-char{display:block;font-family:'Amiri',var(--font-ar,var(--font-main));font-size:1.13rem;line-height:1.1;color:var(--txt1);white-space:nowrap}
#pageQuran .qoc-nida-ayah-btn{border:0;background:transparent;color:var(--gold2,var(--gold));font:800 .78rem 'Ubuntu Mono',monospace;cursor:pointer;padding:.15rem .22rem;border-radius:5px}
#pageQuran .qoc-nida-ayah-btn:hover{background:color-mix(in srgb,var(--gold2,var(--gold)) 10%,transparent);text-decoration:underline}
@media(min-width:901px){#pageQuran .qoc-desktop-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;max-width:1180px;margin:0 auto 1rem;align-items:start}#pageQuran .qoc-desktop-pair>.qoc-section{margin:0;max-width:none;height:100%;box-sizing:border-box}}
@media(max-width:900px){#pageQuran .qoc-desktop-pair{display:block}#pageQuran #qocSurahDetailPane .ss-letter-strip{gap:7px 8px}#pageQuran #qocSurahDetailPane .ss-letter-column{flex-basis:32px;min-width:32px;max-width:32px}#pageQuran #qocSurahDetailPane .ss-letter-count{width:32px}}
@media(max-width:520px){#pageQuran #qocSurahDetailPane .ss-letter-strip-card{padding:.7rem .45rem}#pageQuran #qocSurahDetailPane .ss-letter-strip-head{display:block}#pageQuran #qocSurahDetailPane .ss-letter-strip-filters{margin-top:.55rem;direction:rtl;gap:.45rem}#pageQuran #qocSurahDetailPane .ss-letter-strip{gap:6px 7px}#pageQuran #qocSurahDetailPane .ss-letter-column{flex-basis:30px;min-width:30px;max-width:30px}#pageQuran #qocSurahDetailPane .ss-letter-count{width:30px;font-size:.78rem}#pageQuran #qocSurahDetailPane .ss-letter-char{font-size:1.05rem}}