/* al-fatawa.com – single_fatwa.css (v12) – «النموذج الموحد».
   The whole site's stylesheet: home, fatwa page, search shells, scholar hubs, trust pages.
   The rules that paint the first screen are NOT here; they are in templates/_critical.css,
   inlined once by _head_common.html. This file is loaded render-blocking on every page type.

   Surfaces      : rounded sheets (#E7E4DF · 1px #C6BCB0 · r12).
   Headings      : the unwan — hairline · eight-point star · hairline.
   Semantics     : the green Kufi labels mark السؤال / الجواب / المصدر / الفتاوى المشابهة.
   Actions       : rectangles.  Filters and navigation: pills.  The shape says which is which.
   Arches        : gone from every band; they survive only as the bullets in الفتاوى المشابهة.
   Spacing       : one 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 scale.
   Elevation     : ONE shadow value (--shadow). Sheets are flat.

   Fonts: Amiri (display), Noto Naskh Arabic (body) and Reem Kufi (the labels) are self-hosted
   subsets. Their @font-face rules and the size-adjusted local fallback faces are in
   static/css/_fonts.css, which site/fonts.py generates and _head_common.html links just before
   this file; the stacks that use them are in _critical.css. Nothing here declares a font face,
   and nothing anywhere links Google Fonts — that is what the 2026-09-14 revert was about.

   Scripture spans (.scholar/.hadith/.aaya) and <mark> are DATA: they arrive inside the stored
   answer_html and are styled here only. Nothing in this file may assume markup around them. */

/* ============================================================ ornament assets
   The star lattice and the zellige strip are inlined as data URIs rather than fetched:
   _critical.css is inlined into the page, so a relative url() in it would resolve against the
   page URL; keeping both ornaments here keeps the critical block free of asset paths, and the
   band still paints its brown before the lattice arrives.
   (static/img/pattern-cream.svg is the same lattice as a file, but its <path> carries two `fill`
   attributes — duplicate attributes are fatal to the XML parser a standalone SVG is loaded with,
   so it renders as nothing. It is left untouched and unused; see docs/redesign/PORT-NOTES.md.) */
:root{
  --pattern:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwNCIgdmlld0JveD0iMCAwIDcyIDc0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPiA8cGF0aCBmaWxsPSIjRjNFQ0UyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTM2LjU1NTMgMC44MjY0NTdMMzUuODI3MyAtNi4xMDM1MmUtMDVMMzUuMDc0NyAwLjgwNDA3N0wyOS43OTg0IDYuNDQxNjZMMjguODg4OCA2Ljc1NzYyTDIyLjIzNTUgOS4wNjg3OEwxNS41NDI2IDYuNjAyMjZMMTMuNTE0NCA1Ljg1NDc5TDEzLjU5MjMgOC4wMTQ5OUwxMy44NDkzIDE1LjE0MzJMOS41NzkwNiAyMC43NDQ1TDkuNDU1NDkgMjAuOTA2NUwyLjYxNjA4IDI0LjYwNzlMMS43OTIyNCAyNS4wNTM4TDIuMTgzMzkgMjUuOTA0OUw1LjI4MjY3IDMyLjY0OTNMNS4zMDU0MSAzMy4yOEw1LjU2MjQyIDQwLjQwODNMMS4yOTIyIDQ2LjAwOTVMMCA0Ny43MDQ0TDIuMDM3MTIgNDguMzMxMkw4Ljg3MzY1IDUwLjQzNDVMMTIuOTQzMyA1Ni4zODM1TDEzLjQyNzUgNTcuMDkxNEwxNC4zNzI2IDYzLjUzOTRMMTQuNTA3OSA2NC40NjI4TDE1LjQzODUgNjQuMzkxNUwyMi45OTQ0IDYzLjgxMjNMMjMuNjc0NiA2NC4wMjE2TDMwLjUxMTIgNjYuMTI0OUwzNC41ODA4IDcyLjA3MzlMMzUuNzk0NSA3My44NDgyTDM3LjAwMDIgNzIuMDY4NEw0MC45NDM4IDY2LjI0N0w0Ny40MzU1IDY0LjM5MTdMNDcuNDM3NSA2NC4zOTQ0SDQ3Ljk0NTVINTUuNjc2M0g1Ni40MzdMNTYuNjQgNjMuNjYxM0w1OC41OTk5IDU2LjU4MzhMNTguNzI5IDU2LjExNzdMNTguNzE2OCA1Ni4xMDFMNjIuMzQ1MSA1MC43NDVMNjkuMTA1OCA0OC44MTI4TDcxLjE3MjggNDguMjIyMUw2OS44NjUzIDQ2LjUxNTdMNjUuNDgxNiA0MC43OTQzTDY1LjYxNDUgMzMuNjQyN0w2NS42MjMzIDMzLjE2OUw2OC41MDY5IDI2LjYzMjJMNjguODYzNSAyNS44MjRMNjguMTA1NCAyNS4zNzA1TDYyLjM0OTIgMjEuOTI2NEw2MS45Mzc0IDIxLjM4OUw1Ny41NTM2IDE1LjY2NzZMNTcuNjg2NSA4LjUxNjAyTDU3LjcyNjEgNi4zODUwM0w1NS43MTI3IDcuMDg0NEw0OS4wNTk0IDkuMzk1NTZMNDIuMzY2NiA2LjkyOTA0TDQxLjcyMDMgNi42OTA4OUwzNi41NTUzIDAuODI2NDU3Wk00MC43MzU2IDE4LjY4N0w0Mi44OTU0IDE2LjI4NTdMNDMuMTgyNyAxNS45NjYzTDQzLjE0ODcgMTUuNTM3OUw0Mi42NDMxIDkuMTYyNDRMNDguMzY3OCAxMS4yNzIyTDQ5LjAzOTUgMTEuNTE5N0w0OS43MTU3IDExLjI4NDhMNTUuNjczMiA5LjIxNTM5TDU1LjU1NCAxNS42MzA0TDU1LjU0MSAxNi4zMjkyTDU1Ljk2NiAxNi44ODM5TDU5Ljg3MDQgMjEuOTc5N0w1My44Njc1IDIzLjY5NTNMNTMuMTY4OCAyMy44OTVMNTIuNzYxMyAyNC40OTY2TDQ5LjI1OTcgMjkuNjY1NUw0NS42MzUxIDI0LjM2N0w0NS4yNDA1IDIzLjc5MDJMNDQuNTcyNSAyMy41ODQ3TDM4LjQ0MDEgMjEuNjk4TDQwLjczNTYgMTguNjg3Wk0zNC43MTI1IDIzLjI1NjlMMzQuNzY0MiAyMy4zMkwzNC42MTMxIDIzLjUzNDhMMzAuNTU1NSAyOS4zMDEyTDIzLjc5ODEgMzEuMTAzNUwyMy43Mjg0IDMwLjk5NjZMMjcuNTkzMiAyNS4yOTE1TDM0LjM1MzkgMjMuMzU5M0wzNC43MTI1IDIzLjI1NjlaTTI4Ljc3MiA4LjkxNTQ1TDI4LjgxNjIgMTAuNjY2OUwyOC43MyAxNS4zMDM2TDI4LjcxNzEgMTYuMDAyNEwyOS4xNDIxIDE2LjU1NzJMMzMuMDQ2NSAyMS42NTI5TDI3LjA0MzYgMjMuMzY4NUwyNi4zNDQ5IDIzLjU2ODJMMjUuOTM3NCAyNC4xNjk4TDIyLjU0MyAyOS4xODA0TDE5LjA3NTcgMjMuODY3NEwxOC44ODQ1IDIzLjU3NDVMMTguNTUyNiAyMy40NjQ2TDExLjczOTkgMjEuMjA4OUwxNS40Mzk4IDE2LjM1NThMMTUuODczOCAxNS43ODY1TDE1Ljg0OCAxNS4wNzEyTDE1LjYyMDUgOC43NjI0NUwyMS41NDM5IDEwLjk0NTRMMjIuMjE1NiAxMS4xOTI5TDIyLjg5MTggMTAuOTU4TDI4Ljc3MiA4LjkxNTQ1Wk00MC40MTIyIDguMjMxNjVMMzUuNzgyMyAyLjk3NDg2TDMwLjg2MTggOC4yMzIzNUwzMC44MTY3IDEwLjY2MDFMMzAuOTM4OCAxNS40OTM4TDM1LjY5NTEgMjEuMzAwM0wzOS4xOTQzIDE3LjQwOTlMNDAuNjczMiAxNS40N0w0MC40MTYyIDguMzQxNzdMNDAuNDEyMiA4LjIzMTY1Wk02My44OTk1IDMyLjEyMTJMNjMuNjQwNyAzMi4yMTExTDU2Ljk4NzQgMzQuNTIyM0w1NC4wOTUzIDMzLjQ1NjRMNTAuOTYyMiAzMi4wNTQxTDU0LjYwNDUgMjUuODAzMUw2MS4zMzkyIDIzLjY1MjhMNjYuMzIwNSAyNi42MzMyTDYzLjg5OTUgMzIuMTIxMlpNNTMuMzQgMzUuMzA5Nkw1MC4zNzI0IDM0LjIxNTlMNTAuNTk5OSA0MC41MjQ3TDUwLjYyNTcgNDEuMjRMNTAuMTkxNyA0MS44MDkzTDQ2LjM2ODEgNDYuODI0N0w1Mi4zNzU5IDQ4LjY3M0w1My4xOCA0OC44OTE1TDUzLjUxODUgNDguOTgzNEw1My43MjU0IDQ5LjI2NjdMNTcuNDYzNSA1NC4zODVMNjAuNjg5MyA0OS42MjMzTDYxLjA5NjggNDkuMDIxN0w2MS43OTU1IDQ4LjgyMkw2Ny43OTg0IDQ3LjEwNjRMNjMuODk0IDQyLjAxMDdMNjMuNDY5IDQxLjQ1NTlMNjMuNDgxOSA0MC43NTcxTDYzLjU5NDIgMzQuNzE3Mkw1Ny4yMDA4IDM2Ljc1ODVMNTYuODM2OCAzNi44NzQ3TDU2LjQ4ODEgMzYuNzE4Nkw1My4zNCAzNS4zMDk2Wk00Mi4yMTY2IDU3LjE1MjJMNDIuMDY3NyA1Ni45NTc4TDQyLjA4MDcgNTYuMjU5MUw0Mi4xOTk5IDQ5Ljg0NEwzNi4yNDI0IDUxLjkxMzVMMzUuNTY2MiA1Mi4xNDg0TDM0Ljg5NDYgNTEuOTAwOEwyOC45NzEyIDQ5LjcxNzlMMjkuMTA1NCA1My40NDE1TDI5LjMzMzIgNTUuOTU0NUwyOS4zNjc1IDU2LjMzMzdMMjkuMjE3IDU2LjUzN0wyOS4yMjQ0IDU2Ljc0MkwyOC43OTA0IDU3LjMxMTJMMjQuOTY2OCA2Mi4zMjY2TDMxLjA5OTMgNjQuMjEzM0wzMS43NjczIDY0LjQxODlMMzIuMTYxOSA2NC45OTU3TDM1Ljc4NjQgNzAuMjk0MUwzOS4yODggNjUuMTI1M0wzOS42OTU2IDY0LjUyMzdMNDAuMzk0MiA2NC4zMjRMNDYuMTc4NyA2Mi42NzA4TDQyLjQxOTYgNTcuNTIzOEw0Mi4yMTI3IDU3LjI0MDVMNDIuMjE2NiA1Ny4xNTIyWk0yNi45ODQ1IDQ2LjQ1OUwyNi45ODk3IDQ2LjMxNjNMMjcuMjQ1OCAzOS4xOTE4TDIzLjA3ODkgMzMuNTU2NkwyMi41NzA2IDMzLjcyNzhMMjIuNDQyOCA0MC42MDU4TDI2LjgyNjYgNDYuMzI3MkwyNi45MzgyIDQ2LjQ3MjlMMjYuOTg0NSA0Ni40NTlaTTUxLjgxOTQgNTAuNTk0M0w1MS45MTI0IDUwLjYyM0w1NS45ODIgNTYuNTcxOUw1Ni4zNzA2IDU3LjE0TDU0LjkxNTYgNjIuMzk0NEg0OC43NTI4TDQ4LjQ2NDEgNjIuMDE3Nkw0NC4yNDY2IDU2LjUxMzJMNDQuNTkzMiA0OC42MzEzTDUxLjgxOTQgNTAuNTk0M1pNMjcuMTA4NyA1My41Njc5TDI3LjE5MzEgNTUuOTA5OEwyMi44MTkzIDYxLjgxOTlMMTYuMjE2MSA2Mi4zMjZMMTUuMzc5NyA1Ni42MTkzTDE5LjUzMDMgNTAuNzgzOEwyNi42NjI0IDQ4LjY0MzhMMjcuMTA4NyA1My41Njc5Wk0xMy42NjgxIDM2LjUwNTVMNy4zNDM3NiAzNC4zMDc4TDcuNTYxMTIgNDAuMzM2Mkw3LjU4NjkxIDQxLjA1MTZMNy4xNTI5MiA0MS42MjA4TDMuMzI5MzEgNDYuNjM2Mkw5LjQ2MTc2IDQ4LjUyMjlMMTAuMTI5OCA0OC43Mjg0TDEwLjUyNDQgNDkuMzA1M0wxNC4xNDg5IDU0LjYwMzdMMTcuNjUwNSA0OS40MzQ4TDE4LjA1ODEgNDguODMzMkwxOC43NTY3IDQ4LjYzMzVMMjQuNzU5NiA0Ni45MTc5TDIwLjg1NTMgNDEuODIyMkwyMC40MzAyIDQxLjI2NzRMMjAuNDQzMiA0MC41Njg2TDIwLjU1NzcgMzQuNDA1OUwxNC4zMTU1IDM2LjUwODZMMTMuOTkxMyAzNi42MTc5TDEzLjY2ODEgMzYuNTA1NVpNNC4zOTE4MyAyNS45MjFMOS45MDUxNCAyMi45MzczTDEwLjMyNCAyMy4wNjYyTDE3LjE2MDUgMjUuMTY5NUwyMS4yMzAxIDMxLjExODVMMjEuNjA5MyAzMS42NzI3TDIwLjYwMiAzMi4wMjI2TDEzLjk0ODYgMzQuMzMzOEw3LjI1NTc3IDMxLjg2NzNMNy4wOTc1NSAzMS44MDlMNC4zOTE4MyAyNS45MjFaTTI5LjI2NjggNDcuNjk1M0wzNS41ODYxIDUwLjAyNDJMNDEuNjExMiA0Ny45MzEzTDM1LjYzMyA0NS42MDk5TDI5LjI2NjggNDcuNjk1M1pNNDQuMjUwMiA0Ni4zMDM5TDQ0LjMzMSA0Ni4xOTc5TDQ4LjYwMTIgNDAuNTk2N0w0OC4zNzQ3IDM0LjMxNDFMNDQuMTI2MyAzOS42ODU5TDQ0LjI1MDIgNDYuMzAzOVpNNDguMjkxIDMxLjk5MjhMNDguMjgzMyAzMS43ODA0TDQ4LjA1NCAzMS40NDUyTDQzLjk4NDQgMjUuNDk2MkwzNy4xNDc5IDIzLjM5MjlMMzYuODI2NCAyMy4yOTRMMzcuMDI3IDIzLjU5ODNMNDAuOTg4MiAyOS42MDY2TDQ3Ljc3NzQgMzEuODI1TDQ4LjI5MSAzMS45OTI4Wk0zMi4xODAzIDMwLjQ4NjJMMzUuODAyMyAyNS4zMzg3TDM5LjM0MDYgMzAuNzA1NEwzOS43MzM1IDMxLjMwMTRMNDAuNDA1MiAzMS41MjA5TDQ2LjQ1NDYgMzMuNDk3NUw0Mi41NjcyIDM4LjQxMjhMNDIuMTI1NiAzOC45NzEyTDQyLjEzOTEgMzkuNjkyMUw0Mi4yNTc5IDQ2LjAzODZMMzYuMzE4OCA0My43MzIzTDM1LjY1OTQgNDMuNDc2M0wzNC45OTQyIDQzLjY5NDJMMjkuMDAzMyA0NS42NTY3TDI5LjIzMiAzOS4yOTY5TDI5LjI1NzcgMzguNTgwN0wyOC44MyAzOC4wMDIyTDI1LjAzMDYgMzIuODYzOUwzMS4wOTAyIDMxLjI0NzlMMzEuNzcyNCAzMS4wNjU5TDMyLjE4MDMgMzAuNDg2MloiLz4gPC9zdmc+");
  --zellige:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10' viewBox='0 0 48 10'%3E%3Cpath fill='%237D6249' fill-opacity='.5' d='M6 1.6L9.4 5L6 8.4L2.6 5Z'/%3E%3Cpath fill='%23AB9C8E' d='M18 0.8L19.23 2.03L20.97 2.03L20.97 3.77L22.2 5L20.97 6.23L20.97 7.97L19.23 7.97L18 9.2L16.77 7.97L15.03 7.97L15.03 6.23L13.8 5L15.03 3.77L15.03 2.03L16.77 2.03Z'/%3E%3Cpath fill='%23C6BCB0' d='M30 1.6L33.4 5L30 8.4L26.6 5Z'/%3E%3Cpath fill='%23AB9C8E' fill-opacity='.62' d='M42 0.8L43.23 2.03L44.97 2.03L44.97 3.77L46.2 5L44.97 6.23L44.97 7.97L43.23 7.97L42 9.2L40.77 7.97L39.03 7.97L39.03 6.23L37.8 5L39.03 3.77L39.03 2.03L40.77 2.03Z'/%3E%3C/svg%3E");
}

/* ============================================================ bands */
.Band::before{
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pattern) center / 96px 100px repeat;
    opacity: .14;
    pointer-events: none;
}

/* ============================================================ search zone */
.IconButton:hover { background: rgba(125, 98, 73, .12); }
.SearchSubmit:hover { background: var(--accent-deep); }
.SearchBarInput::-webkit-search-cancel-button { -webkit-appearance: none; }
.Chip:hover { border-color: var(--accent); }
.SearchRadio:hover { background: var(--sheet-2); }
.SearchRadio:focus-visible { outline-offset: -3px; }

/* the field and the submit go quiet while متقدم owns the query */
.SearchBarInput.disabled { opacity: .5; }
.SearchSubmit.disabled { background: var(--tan); cursor: not-allowed; }

/* the three phrase fields: hidden until متقدم is chosen, then in the dropdown under the chips */
.AdvancedForm { display: none; }
.AdvancedForm.open { display: block; }
.AdvancedSearchBody {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.AdvancedSearchInput {
    flex: 1 1 180px;
    min-width: 0;
    max-width: 240px;
    height: 44px;
    padding: 0 16px;
    background: var(--sheet-2);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: 16px;
    color: var(--ink);
}
.AdvancedSearchInput::placeholder { color: var(--muted); }
/* The halo is the pill's own answer to focus; the ring is what makes it visible at 2px of
   real contrast, which a 1.4:1 tint is not. */
.AdvancedSearchInput:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(125, 98, 73, .28);
}
.AdvancedButtonSubmit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--cream);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.AdvancedButtonSubmit:hover { background: var(--accent-deep); }

/* ============================================================ the unwan
   A section opening: hairline · eight-point star · hairline. */
.Unwan h2 { font-size: 25px; line-height: 1.55; }
.Ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 16px auto 0;
    max-width: 300px;
    color: var(--accent);
}
.Ornament i {
    display: block;
    flex: 1 1 auto;
    height: 1px;
    background: var(--tan);
}
.Ornament.Short { max-width: 180px; }

/* ============================================================ inscription labels
   Reem Kufi appears ONLY here — the short labels that carry the المصدر / الفتاوى المشابهة
   semantics, and the stored السؤال / الجواب spans. */
.KufiLabel {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    font-family: var(--font-kufi);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.6;
    color: var(--accent-deep);
}
.KufiLabel::after {
    content: "";
    flex: 1;
    height: 7px;
    align-self: center;
    border-top: 1px solid var(--line);
    border-inline-end: 1px solid var(--line);
}

/* ============================================================ stored spans and highlights
   These four selectors are the site's content conventions. They are styled, never wrapped. */
.scholar {
    display: inline-block;
    font-family: var(--font-kufi);
    font-size: .82em;
    font-weight: 500;
    color: var(--speaker);
    background: rgba(28, 90, 80, .1);
    /* 1em, not --r-pill: a one-line label is 1.75em tall, so it is the same full pill, and a
       label that wraps is a rounded box rather than a capsule its text pokes out of. */
    border-radius: 1em;
    padding: 0 .6em;
    line-height: 1.75;
    vertical-align: .08em;
    /* No nowrap: some stored spans hold a whole sentence (fatwa 124110), which then ran past
       a phone's width. An inline-block keeps a short label on one line by itself. */
}
/* The two labels that open the question and the answer sit alone on their line in the stored
   markup (the first span of the record, and the one after the blank line). They read as the
   section inscriptions they are; a dialogue's «السائل» / «الشيخ» stay small inline pills. */
.FatwaArticle .FatwaText > .scholar:first-child,
.FatwaArticle .FatwaText > br + br + .scholar {
    font-size: .8em;
    padding: .1em .9em;
    letter-spacing: 0;
}
.hadith,
.hadith a { color: var(--hadith); font-weight: 600; }
.aaya { font-family: var(--font-display); color: var(--aaya); font-size: 1.06em; }
mark { background: var(--mark); color: inherit; padding: 0 .12em; border-radius: 3px; }

/* ============================================================ breadcrumb */
.Breadcrumbs li + li::before { content: "‹"; margin-inline-end: 8px; color: var(--tan); }
/* Inline metadata links sit inside running text, so they cannot be 44 px tall without
   wrecking the line. 6px of block padding takes them to ~30px of pointer target, which is
   what master gave them (4px) plus a little — an accepted shortfall against 2.5.5, noted in
   PORT-NOTES. The links that are controls rather than prose are all 44 px already. */
.Breadcrumbs a,
.SourceBoxHost,
.ResultSource a { padding-block: 6px; }
.Breadcrumbs a { color: var(--muted); }
.Breadcrumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.Breadcrumbs [aria-current] { color: var(--accent-deep); }

/* ============================================================ the fatwa page */
.FolioHead { text-align: start; }
.FolioHead .Ornament { margin-inline-start: 0; }
.Byline {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.7;
    font-size: 17px;
    color: var(--accent-deep);
}
.FolioHead .Byline { margin-top: 16px; }
.Byline svg { flex: none; color: var(--accent); }
.Byline a { color: inherit; }
.Byline a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* The reading rhythm the site has always had: 19-20 px at a 200% line height. */
.FatwaText {
    margin-top: 32px;
    font-size: 20px;
    line-height: 2;
    font-weight: 500;
}

/* The question panel: set apart by its tint alone, no rule on any edge. It needs a container,
   so it applies wherever the template owns one; a record's stored answer_html is a flat run of
   text and <br>, and is never rewritten to gain one. */
.QuestionPanel {
    background: var(--tint);
    border: 0;
    border-radius: var(--r-inset);
    padding: 24px;
}
.QuestionPanel p { font-size: 20px; line-height: 1.95; }
.QuestionPanel p + p { margin-top: 16px; }

.SourceBox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    margin-top: 32px;
    padding: 16px 24px;
    background: var(--sheet-2);
    border: 1px solid var(--line);
    border-radius: var(--r-inset);
    font-size: 16px;
}
.SourceBoxLabel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-kufi);
    font-weight: 500;
    font-size: 15px;
    color: var(--accent-deep);
}
.SourceBoxLabel svg { color: var(--accent); }
.SourceBoxHost { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.SourceBoxNote {
    flex-basis: 100%;
    font-size: 15px;
    line-height: 1.8;
    color: var(--muted);
}
.SourceBoxNote a { color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.SourceBoxNote a:hover { color: var(--ink); }

/* Actions are rectangles; filters and navigation are pills. */
.Actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.Button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid var(--accent);
    border-radius: 0;
    background: transparent;
    color: var(--accent-deep);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.Button:hover { background: var(--accent); color: var(--cream); text-decoration: none; }

/* الفتاوى المشابهة — the last arches in the design */
.SimilarList { margin: 0; padding: 0; list-style: none; }
.SimilarList li + li { border-top: 1px solid var(--line); }
.SimilarList a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    color: var(--ink);
    font-size: 18px;
}
.SimilarList a:hover { color: var(--accent-deep); text-decoration: none; }
.SimilarList a:hover .SimilarTitle {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}
.ArchBullet { width: 12px; height: 14px; flex: none; color: var(--tan); }
.SimilarList a:hover .ArchBullet { color: var(--accent); }
.SimilarTitle { flex: 1; min-width: 0; }
.SimilarScholar { color: var(--muted); font-size: 15px; white-space: nowrap; }

/* ============================================================ the home page */
.Zellige {
    height: 10px;
    margin: 48px 0;
    background: var(--zellige) center / 48px 10px repeat-x;
    opacity: .8;
}
.Zellige:last-child { margin-bottom: 0; }

.HomeSection + .HomeSection { margin-top: 48px; }
.ScholarGrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ScholarGrid li { display: flex; width: calc((100% - 64px) / 5); }
.ScholarCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-bottom: 16px;
    text-align: center;
    color: var(--ink);
    overflow: hidden;
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: var(--r-sheet);
}
.ScholarCard:hover {
    text-decoration: none;
    border-color: var(--accent);
    box-shadow: var(--shadow);
}
/* a short cap, not an arch — the star marks the shelf, nothing is elongated, no initials */
.ScholarCap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    margin-bottom: 16px;
    background: var(--sheet-2);
    border-bottom: 1px solid var(--line);
    color: var(--accent);
}
.ScholarCap .Star { width: 22px; height: 22px; }
.ScholarCard:hover .ScholarCap { border-color: var(--accent); }
.ScholarName {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;
    padding: 0 12px;
}

/* ============================================================ search results
   Built by single_fatwa.js card_html(); the shell around them is search_results.html. */
.CountLine {
    margin-top: 16px;
    font-size: 15.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
/* minmax(0, 1fr): the one column is the list's width. An auto column grows to the widest
   card's longest unbreakable run, and every card then overflows a phone's screen with it. */
.SearchResult { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.Result {
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: var(--r-sheet);
    padding: 24px;
}
.Result .FatwaTitle { font-family: var(--font-display); font-size: 20px; line-height: 1.6; }
.Result .FatwaTitle a { color: var(--accent-deep); }
.Result .FatwaTitle a:hover { color: var(--ink); }
.Result .Byline { margin-top: 8px; font-size: 15px; color: var(--muted); }
.Result .Byline svg { width: 16px; height: 16px; }
.Result .FatwaText { margin-top: 16px; font-size: 18px; line-height: 1.95; }
.Result .FatwaText.closed {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ResultMeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 15px;
}
.ResultSource {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    margin-inline-end: auto;
}
.ResultSource svg { color: var(--accent); }
.ResultSource a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-deep); }
.DownButton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--tan);
    border-radius: 0;
    background: transparent;
    color: var(--accent-deep);
    font-size: 15px;
    cursor: pointer;
}
.DownButton:hover { border-color: var(--accent); background: var(--accent); color: var(--cream); }
.DownButton svg { transform: rotate(-90deg); }
.FatwaFooterButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    min-width: 44px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--accent-deep);
    font-size: 15px;
    cursor: pointer;
}
.FatwaFooterButton:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }

.LoadMoreButton {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 32px 0 0;
    border: 1px solid var(--accent);
    border-radius: 0;
    background: transparent;
    color: var(--accent-deep);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
    cursor: pointer;
}
.LoadMoreButton:hover { background: var(--accent); color: var(--cream); }

.NothingFound {
    margin-top: 24px;
    padding: 24px;
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: var(--r-sheet);
    text-align: center;
    font-size: 18px;
    color: var(--accent-deep);
}

/* the loader: five bars breathing on the spot; a single quiet bar under reduced motion */
.spinner-wave {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    height: 34px;
    margin-top: 24px;
}
.spinner-wave > div {
    width: 5px;
    height: 100%;
    background: var(--accent);
    opacity: .75;
    animation: fatwa-wave 1.2s infinite ease-in-out;
}
.spinner-wave div:nth-child(2) { animation-delay: -1.1s; }
.spinner-wave div:nth-child(3) { animation-delay: -1s; }
.spinner-wave div:nth-child(4) { animation-delay: -.9s; }
.spinner-wave div:nth-child(5) { animation-delay: -.8s; }
@keyframes fatwa-wave {
    0%, 40%, 100% { transform: scaleY(.4); }
    20% { transform: scaleY(1); }
}

/* ============================================================ the scholar hubs
   The mockup does not draw this page; it is built from the same parts — band, breadcrumb, a
   sheet, the similar-list row, the unwan — so it reads as one system with the rest. */
.ScholarListTitle { margin-top: 32px; }
.Pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}
.Pagination a,
.Pagination strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--sheet-2);
    color: var(--accent-deep);
    font-size: 16px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.Pagination a:hover { border-color: var(--accent); text-decoration: none; }
.Pagination strong { background: var(--accent); border-color: var(--accent); color: var(--cream); }
/* the rest of the page numbers, collapsed: the row above stays five numbers wide */
.PageJump { margin-top: 8px; text-align: center; }
.PageJump summary { display: inline-block; padding: 12px; font-size: 15px; color: var(--muted); cursor: pointer; }
.PageJump .Pagination { margin-top: 8px; }

/* ============================================================ the trust pages
   Quiet document sheets: one measure, one rule above each heading, nothing else. */
.PageBody { font-size: 19px; line-height: 1.95; }
.PageBody .Lead { margin-top: 24px; font-size: 20px; line-height: 1.9; color: var(--accent-deep); }
.PageBody h2 {
    margin: 32px 0 12px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: 23px;
    line-height: 1.5;
}
.PageBody p { margin-top: 16px; }
.PageBody ul { margin: 16px 0 0; padding-inline-start: 1.4em; }
.PageBody li { margin-top: 8px; }
.PageBody a { text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================ the footer band */
.Footer {
    position: relative;
    overflow: hidden;
    flex: none;
    text-align: center;
    background: var(--accent);
    color: var(--cream);
    padding: 32px 24px;
}
.Footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pattern) center / 96px 100px repeat;
    opacity: .1;
    pointer-events: none;
}
.FooterInner { position: relative; z-index: 1; max-width: var(--page); margin: 0 auto; }
.FooterNav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 12px;
}
.FooterNav a { color: var(--cream); font-size: 16px; padding: 8px 0; }
.FooterNav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.FooterSep { color: var(--cream); opacity: .5; }

/* ============================================================ the edition line
   One quiet line under the byline: on an Arabic page the link to its English twin, on an
   English page the machine-translation disclosure and the link back. Both editions carry
   the element, so the rules live here rather than in the English stylesheet. */
.EditionLine { margin-top: 6px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.EditionLine a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 4px; }
.EditionLine a:hover { color: var(--ink); }

/* ============================================================ the copy / share tooltips */
.Tooltiptext {
    inset-block-end: 24px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    z-index: 30;
    padding: 12px 20px;
    background: var(--ink);
    color: var(--cream);
    border-radius: var(--r-pill);
    font-size: 15px;
    box-shadow: var(--shadow);
}

/* ============================================================ motion */
@media (prefers-reduced-motion: no-preference) {
    .Button, .FatwaFooterButton, .DownButton, .LoadMoreButton, .Chip,
    .SearchRadio, .IconButton, .SearchSubmit, .AdvancedButtonSubmit, .ScholarCard,
    .ScholarCap, .ArchBullet, .Result .FatwaTitle a, .SearchPill, .Pagination a {
        transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease,
                    box-shadow 140ms ease, transform 140ms ease;
    }
    .ScholarCard:hover { transform: translateY(-2px); }
    /* the options slide out of the pill and back; the sheet around them fades in step */
    .SearchSettings { transition: grid-template-rows 240ms ease; }
    .InnerSearchSettings { transition: visibility 0s linear 240ms; }
    .InnerSearchSettings.active { transition-delay: 0s; }
    .SearchZone { transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease; }
    .Tooltiptext { transition: opacity 150ms ease; }
}
@media (prefers-reduced-motion: reduce) {
    /* one bar, held still: the status line already says a search is running */
    .spinner-wave > div { animation: none; transform: scaleY(.55); }
    .spinner-wave div:nth-child(n + 2) { display: none; }
}

/* ============================================================ breakpoints */
@media (max-width: 1023px) {
    .ScholarGrid li { width: calc((100% - 32px) / 3); }   /* 3 + 2, the short row centred */
}
@media (max-width: 719px) {
    .ScholarGrid li { width: calc((100% - 16px) / 2); }   /* 2 + 2 + 1, the last one centred */
}
@media (max-width: 640px) {
    .Result { padding: 24px 16px; }
    .QuestionPanel { padding: 16px; }
    .Zellige { margin: 32px 0; }
    .Unwan h2 { font-size: 22px; }
    .ResultSource { flex-basis: 100%; margin-inline-end: 0; }
    .SimilarList a { flex-wrap: wrap; }
    .SimilarTitle { flex-basis: calc(100% - 24px); }
    .SimilarScholar { margin-inline-start: 24px; }
    .Actions .Button { flex: 1 1 auto; }
    .SourceBox { padding: 16px; }
    .PageBody h2 { font-size: 21px; }
}
@media (max-width: 520px) {
    .FatwaText { font-size: 19px; }
    .QuestionPanel p { font-size: 19px; }
    .Result .FatwaText { font-size: 17px; }
    .PageBody { font-size: 18px; }
}

/* ============================================================ print
   Paper wants the text and its source, nothing else. */
@media print {
    .Band, .SearchZone, .Footer, .Actions, .SimilarCard, .Pagination, .SkipLink,
    .Tooltiptext, .LoadMoreButton, .DownButton, .spinner-wave, .Zellige { display: none !important; }
    html, body { background: #fff; color: #000; }
    .Page { max-width: none; padding: 0; }
    .Sheet { background: none; border: 0; border-radius: 0; padding: 0; }
    .FatwaText { font-size: 12pt; line-height: 1.7; }
    .SourceBox { background: none; border: 0; padding: 0; }
    a { color: #000; text-decoration: underline; }
}