/* Tajweed rules pages (book: Jami' Ahkam at-Tajweed). All rules are scoped under .tj */
@font-face { font-family: "KFGQPC Hafs"; font-display: swap; src: url(../fonts/kfgqpc-hafs-v18.ttf) format("truetype"); }
@font-face { font-family: "KFGQPC Nastaleeq"; font-display: swap; src: url(../fonts/kfgqpc-nastaleeq.otf) format("opentype"); }

.tj { --tj-teal: #113440; --tj-teal2: #1C4D59; --tj-gold: #C9A04E; --tj-gold2: #D4AE5C; --tj-goldtxt: #76591A; --tj-cream: #F7F1E3; --tj-line: #E6DCC4; --tj-mut: #5b6b70; }
.tj[data-ed="uth"] .e-ip, .tj[data-ed="ip"] .e-uth { display: none !important; }

/* head, byline, switch */
.tj-head .crumb a { color: var(--tj-goldtxt); text-decoration: none; font-weight: 600; }
.tj-by { margin-top: 1rem; font-size: .92rem; color: var(--tj-mut); line-height: 1.6; }
.tj-by p { margin: .1rem 0; }
.tj-by span { color: var(--tj-teal2); font-weight: 600; }
.tj-by a { color: inherit; }
.tj-by .tj-trnote { font-style: italic; }
.tj-switch { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 1.1rem 0 .4rem; font-size: .92rem; }
.tj-switch span { color: var(--tj-mut); }
.tj-switch button { font: inherit; font-size: .9rem; border: 1px solid var(--tj-line); background: #fff; color: var(--tj-teal); border-radius: 999px; padding: .3rem .8rem; cursor: pointer; white-space: nowrap; }
.tj-switch button[aria-pressed="true"] { background: var(--tj-teal); border-color: var(--tj-teal); color: #fff; }

/* layout */
.tj-grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .tj-grid { grid-template-columns: minmax(0, 46rem) 17rem; justify-content: space-between; } }
.tj-body { min-width: 0; }
.tj-toc { font-size: .9rem; align-self: start; position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow: auto; border-inline-start: 2px solid var(--tj-line); padding-inline-start: 1rem; }
.tj-toc-h a { font-weight: 700; color: var(--tj-teal); text-decoration: none; }
.tj-toc ol { list-style: none; margin: .5rem 0 0; padding: 0; }
.tj-toc li { margin: .3rem 0; }
.tj-toc a { color: var(--tj-mut); text-decoration: none; }
.tj-toc a[aria-current="page"] { color: var(--tj-teal); font-weight: 700; }
@media (max-width: 63.99rem) { .tj-toc { position: static; max-height: none; border: 0; padding: 0; border-top: 1px solid var(--tj-line); padding-top: 1.5rem; } }

.tj-list { padding-inline-start: 1.4rem; }
.tj-list li { margin: .7rem 0; }
.tj-list li a { font-weight: 700; }
.tj-list li span { display: block; font-size: .88rem; color: var(--tj-mut); }
.tj-dl { background: var(--tj-cream); border: 1px solid var(--tj-line); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 2rem; }
.tj-dl h2 { margin-top: 0; font-size: 1.15rem; border: 0; }
.tj-dl small { opacity: .7; font-weight: 400; }
.tj-cta { margin: 3rem 0 1.5rem; background: var(--tj-teal); color: #f3ead4; border-radius: 14px; padding: 1.5rem 1.75rem; }
.tj-cta h2 { color: var(--tj-gold2); margin-top: 0; border: 0; }
.tj-cta p { color: #f3ead4; }
.tj-cta .btn-line { color: #fff; border-color: rgba(255, 255, 255, .5); }
.tj-pn { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.tj-pn a { flex: 1; border: 1px solid var(--tj-line); border-radius: 10px; padding: .7rem 1rem; text-decoration: none; color: var(--tj-teal); font-weight: 600; }
.tj-pn a small { display: block; color: var(--tj-mut); font-weight: 400; }
.tj-pn .tj-next { text-align: end; }
.tj-promo { text-align: center; }

/* book content */
.tj-body h2 { color: var(--tj-teal2); border-bottom: 1px solid var(--tj-line); padding-bottom: .2em; margin-top: 2rem; }
.tj-body h3 { color: var(--tj-teal); }
.tj-body li::marker { color: var(--tj-gold); }
.tj .arx { unicode-bidi: isolate; font-family: "Amiri", "Noto Naskh Arabic", serif; font-style: normal; }
.tj .term.t1 { color: var(--tj-teal2); font-weight: 700; }
.tj .qi { font-size: 1.3em; direction: rtl; unicode-bidi: isolate; line-height: 1.2; }
.tj .qw { font-size: 1.2em; direction: rtl; unicode-bidi: isolate; }
/* Quran text only: the generator marks every Quran fragment with .q; headings and prose never get the Quran fonts */
.tj .qi, .tj .qw, .tj .exq, .tj .q.e-uth { font-family: "KFGQPC Hafs", "Amiri Quran", "Amiri", serif; }
.tj .q.e-ip, .tj div.e-ip .qi, .tj div.e-ip .qw, .tj div.e-ip .exq { font-family: "KFGQPC Nastaleeq", "Noto Nastaliq Urdu", serif; }
.tj .q.e-ip { line-height: 2.1; }
.tj .br { font-family: "Amiri", serif; color: var(--tj-goldtxt); font-size: .85em; }
.tj .qref { font-size: .78em; color: var(--tj-mut); white-space: nowrap; }
.tj .exbox { background: var(--tj-cream); border: 1px solid var(--tj-line); border-radius: 12px; padding: .7rem 1rem; margin: .8rem 0 1.2rem; }
.tj .exh { font-size: .9em; color: var(--tj-teal2); font-weight: 700; margin-bottom: .4rem; }
.tj .exg { display: grid; gap: .5rem .9rem; }
.tj .exg.cols2, .tj .exg.cols3 { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.tj .exc { background: #fff; border-radius: 8px; padding: .4rem .6rem; text-align: center; border: 1px solid #efe6d2; }
.tj .exq { font-size: 1.75rem; line-height: 2.1; direction: rtl; }
.tj .exr { font-size: .78rem; color: var(--tj-mut); line-height: 1.3; }
.tj .exn { font-size: .86em; color: var(--tj-teal); margin-top: .2rem; }
.tj .verses { border-inline-start: 3px solid var(--tj-gold2); background: #fbf7ee; padding: .6rem 1rem; margin: 1rem 0; direction: rtl; }
.tj .vh { font-size: .8rem; color: var(--tj-goldtxt); margin-bottom: .2rem; }
.tj .vr { display: grid; grid-template-columns: 2rem 1fr 1fr; gap: .8rem; font-family: "Amiri", serif; font-size: 1.15rem; line-height: 2.1; color: #13303a; }
.tj .vr .vn { color: var(--tj-goldtxt); font-size: .85rem; align-self: center; text-align: center; }
.tj .vr .h1 { text-align: right; } .tj .vr .h2 { text-align: left; }
@media (max-width: 40rem) { .tj .vr { grid-template-columns: 1.6rem 1fr; } .tj .vr .h2 { grid-column: 2; text-align: right; } }
.tj .src { font-size: .82em; color: #4a5a5e; border-top: 1px dashed var(--tj-line); margin: .4rem 0 1.4rem; padding-top: .35rem; }
.tj .src b { color: var(--tj-teal2); }
.tj .box { border-radius: 10px; padding: .7rem 1rem; margin: .9rem 0 1.2rem; border-inline-start: 4px solid; }
.tj .box .bh { font-weight: 700; font-size: .85em; margin-bottom: .15rem; }
.tj .box.note { background: #eef6f7; border-color: #1C4D59; } .tj .box.note .bh { color: #1C4D59; }
.tj .box.warn { background: #fdf3e4; border-color: #C9A04E; } .tj .box.warn .bh { color: #7A5410; }
.tj .box.err { background: #fbecec; border-color: #b4473c; } .tj .box.err .bh { color: #9b2c22; }
.tj .box.rule { background: var(--tj-teal); color: #f3ead4; border-color: var(--tj-gold2); } .tj .box.rule .bh { color: var(--tj-gold2); }
.tj .box.rule .term.t1 { color: #fff; }
.tj .tb-wrap { overflow-x: auto; margin: .6rem 0 1.2rem; }
.tj .tb-wrap .tb { margin: 0; }
.tj .tb { width: 100%; border-collapse: collapse; margin: .6rem 0 1.2rem; font-size: .92em; }
.tj .tb th { background: var(--tj-teal); color: #fff; font-weight: 700; padding: .4rem .6rem; border: 1px solid var(--tj-teal); text-align: start; }
.tj .tb td { border: 1px solid var(--tj-line); padding: .35rem .6rem; vertical-align: middle; text-align: start; }
.tj .tb tr:nth-child(even) td { background: #fbf8f1; }
.tj .tb.center td { text-align: center; }
.tj .tb .qi { font-size: 1.25em; white-space: nowrap; }
/* tajweed colours */
.tj .c-g{color:#15803D}.tj .c-iz{color:#1D4ED8}.tj .c-x{color:#6E6E6E}.tj .c-q{color:#7C3AED}
.tj .c-m2{color:#8F5B0E}.tj .c-m4{color:#C2410C}.tj .c-m6{color:#B91C1C}.tj .c-ma{color:#DB2777}
.tj .c-tf{color:#1E3A8A}.tj .c-tr{color:#0E7490}.tj .c-f{color:#0F766E}.tj .c-sp{color:#BE123C}
.tj .legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .45rem 1.2rem; margin: .5rem 0 1.2rem; }
.tj .legend div { display: flex; align-items: center; gap: .6rem; font-size: .92em; line-height: 1.5; }
.tj .legend i { display: inline-block; width: 1.2rem; height: 1.2rem; border-radius: 4px; flex: none; }
.tj .fig { text-align: center; margin: .8rem 0 1.2rem; }
.tj .fig svg { max-width: 100%; height: auto; }
.tj .figcap { font-size: .84em; color: var(--tj-mut); margin-top: .3rem; text-align: center; }
.tj .flow { display: grid; gap: .5rem; margin: .8rem 0 1.2rem; }
.tj .fbox { border: 1px solid var(--tj-line); border-radius: 10px; padding: .5rem .7rem; background: #fff; text-align: center; line-height: 1.5; }
/* :where keeps this default weak, so colour classes on dark boxes (for example the gold heading of a dark flow box) win */
.tj .fbox :where(b) { display: block; color: var(--tj-teal); }
.tj .fbox b { display: block; }
.tj .fbox .lt { font-family: "Amiri", serif; font-size: 1.15em; letter-spacing: .06em; color: #0A2128; direction: rtl; unicode-bidi: isolate; }
@media (max-width: 40rem) { .tj .flow { grid-template-columns: 1fr 1fr !important; } }
.tj .bar { display: flex; align-items: center; gap: .7rem; margin: .35rem 0; }
.tj .bar .lb { width: 12rem; font-size: .9em; line-height: 1.5; }
.tj .bar .tr { flex: 1; display: flex; gap: .25rem; }
.tj .bar .tr i { height: 1.1rem; flex: 1; border-radius: 3px; background: #ece6d6; }
.tj .bar .tr i.on { background: var(--c); }
.tj .bar .n { font-size: .85em; color: var(--tj-mut); text-align: center; }
@media (max-width: 40rem) { .tj .bar { flex-wrap: wrap; } .tj .bar .lb { width: 100%; } }
html[dir="rtl"] .tj .tb th, html[dir="rtl"] .tj .tb td { text-align: right; }
html[lang="ur"] .tj-body { line-height: 2.1; }

/* former inline styles (the site's CSP does not allow style attributes) */
.tj .ts1{font-size:1.25em;font-weight:700;color:#0F766E}
.tj .ts2{display:flex;gap:6mm;align-items:center;text-align:start}
.tj .ts3{flex:1}
.tj .ts4{grid-template-columns:1fr}
.tj .ts5{background:#0F766E}
.tj .ts6{background:#1D4ED8}
.tj .ts7{background:#8F5B0E}
.tj .ts8{background:#7C3AED}
.tj .ts9{background:#BE123C}
.tj .ts10{background:#6b7280}
.tj .ts11{background:#5a1f1c;color:#fff;text-align:center;font-size:9pt;line-height:5mm}
.tj .ts12{font-size:1.3em;font-weight:700;color:#0F766E}
.tj .ts13{font-size:1.35em;font-weight:700;color:#0F766E}
.tj .ts14{margin:.4em 0 1em;break-inside:avoid}
.tj .ts15{--c:#1E3A8A}
.tj .ts16{width:30mm}
.tj .ts17{grid-template-columns:repeat(4,1fr)}
.tj .ts18{grid-column:1/-1;background:#113440;color:#fff;border-color:#113440}
.tj .ts19{color:#D4AE5C}
.tj .ts20{border-top:4px solid #1D4ED8}
.tj .ts21{color:#1D4ED8}
.tj .ts22{font-size:.85em;color:#41565c}
.tj .ts23{border-top:4px solid #15803D}
.tj .ts24{color:#15803D}
.tj .ts25{--c:#15803D}
.tj .ts26{width:34mm}
.tj .ts27{margin:.5em 0 1em;break-inside:avoid}
.tj .ts28{--c:#8F5B0E}
.tj .ts29{}
.tj .ts30{--c:#C2410C}
.tj .ts31{opacity:.45}
.tj .ts32{--c:#DB2777}
.tj .ts33{--c:#B91C1C}
.tj .ts34{font-size:1.2em;font-weight:700}
.tj .ts35{font-size:1.8em}
.tj .ts36{text-align:center;padding-top:3mm}
.tj .ts37{font-family:"KFGQPC Nastaleeq";font-size:2.4em;line-height:1.6;color:#BE123C;display:inline-block;min-width:12mm;text-align:center}
.tj .ts38{text-align:center;white-space:nowrap}
.tj .ts39{white-space:nowrap}
.tj .ts40{font-weight:700;color:#0F766E}
.tj .ts41{line-height:2.3}
.tj .ts42{font-size:1.15em}
.tj .ts43{font-weight:700;color:#0F766E;font-size:1.2em}
.tj .ts44{text-align:center}
.tj .ts45{font-size:.85em}
.tj .ts46{font-size:1.25em}
.tj .ts47{text-align:center;line-height:2.4}
.tj .ts48{direction:rtl}
.tj .ts49{font-family:Amiri;font-weight:700;color:#1C4D59;font-size:13pt;text-align:center;margin:4mm 0 1mm;break-after:avoid}
.tj .ts50{break-inside:avoid}
.tj .ts51{text-align:start}
.tj .ts52{font-size:1.1em;text-align:right}
.tj .ts53{font-family:Literata;direction:ltr;text-align:left}
.tj .ts54{background:#15803D}
.tj .ts55{background:#6E6E6E}
.tj .ts56{background:#C2410C}
.tj .ts57{background:#B91C1C}
.tj .ts58{background:#DB2777}
.tj .ts59{background:#1E3A8A}
.tj .ts60{background:#0E7490}

/* Readable download buttons (the shared .btn-line style is for dark backgrounds) */
.tj-dl .actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.tj-dlbtn { gap: .5rem; }
.tj-dlbtn svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tj-dlbtn small { font-weight: 500; opacity: .85; font-size: .82em; }
.tj-dl .btn-quiet { border-color: #1C4D59; color: #113440; }
.tj-dl .btn-quiet:hover { background: #113440; color: #fff; }
.tj-head .crumb a { color: #8A6A1F; }

/* Folding colour key on each rule page */
.tj-key { margin: .9rem 0 0; border: 1px solid #E6DCC4; border-radius: 12px; background: #fff; }
.tj-key > summary { cursor: pointer; padding: .55rem .9rem; font-weight: 600; color: #1C4D59; list-style-position: inside; }
.tj-key-body { padding: 0 .9rem .8rem; font-size: .92rem; }
.tj-key-body p { margin: .2rem 0 .6rem; color: #5b6b70; }
@media (max-width: 599px) { .tj-switch > span { flex-basis: 100%; } }

/* Dark boxes: headings and text must stay light (the general .tj-body h2 rule is dark teal with an underline) */
.tj .tj-cta h2, .tj-body .tj-cta h2 { color: #D4AE5C; border: 0; padding-bottom: 0; margin: 0 0 .6rem; }
.tj .box.rule b, .tj .box.rule i, .tj .box.rule .term, .tj .box.rule .arx { color: inherit; }
.tj .box.rule .term.t1 { color: #fff; }
.tj .box.rule a { color: #F3E3BC; }

/* Download box: language picker */
.tj-dl-pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .9rem; margin: -.2rem 0 .8rem; font-size: .92rem; color: #5b6b70; }
.tj-dl-pick[hidden], .tj-dl-read[hidden] { display: none; }
.tj-dl-pick label { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: #113440; }
.tj-dl-pick select { font: inherit; font-weight: 500; color: #113440; background: #fff; border: 1px solid #C9B98F; border-radius: 10px; padding: .35rem 2rem .35rem .7rem; min-height: 40px; max-width: 12rem; }
.tj-dlbtn[hidden] { display: none; }
.tj-dlbtn small b { font-weight: inherit; }
.tj-dl-read { margin: .7rem 0 0; font-size: .92rem; }
.tj-dl-read a { color: #113440; font-weight: 600; }
.tj-dl-all { margin-top: .7rem; font-size: .9rem; }
.tj-dl-all ul { margin: .4rem 0 0; padding-inline-start: 1.1rem; }