/* =========================================================================
   Darul Fiqh layer, on top of amanah.css (the Amanah Intelligence build,
   recoloured). Only what Amanah does not have lives here: the ruling chip,
   the answer layout, Arabic references, working search, filters, forms.
   ========================================================================= */
:root{
  --burgundy:#9D0731; --burgundy-deep:#6E0522; --rose:#F5E7EB; --rose-light:#E8A9B8;
  --ink:#1E1E1E; --meta:#5F5F5F; --paper:#FAF8F5; --rule:#E5DED6; --rule-strong:#8A8A8A;
  --error:#B3261E;
  --indigo-ink:#1E1E1E; --fg:#1E1E1E; --muted:#5F5F5F; --line:#E5DED6;
  /* Amanah's footer is the deep brand colour, not ink; the recolour had put
     it on #1E1E1E, which read as a black slab under a burgundy site. */
  --footer-bg:var(--burgundy-deep); --footer-fg:rgba(255,255,255,.78); --footer-head:var(--rose-light);
  --focus:var(--burgundy);
  --silver-grad:linear-gradient(135deg,#F5E7EB 0%,#E8A9B8 55%,#C9788C 100%);

  /* Ruling chip: the only status colours in the system (brief) */
  --r-permissible:#0F5C43;   --r-permissible-bg:#E6F2EC;   --r-permissible-bd:#BFD9CE;
  --r-impermissible:#B3261E; --r-impermissible-bg:#FBEAE8; --r-impermissible-bd:#EFCAC6;
  --r-disliked:#5E3A8C;      --r-disliked-bg:#F0EAF6;      --r-disliked-bd:#D6C7E4;
  --r-conditional:#7A5200;   --r-conditional-bg:#FBF1DC;   --r-conditional-bd:#E8D4A8;
  --r-detail:#41454D;        --r-detail-bg:#EDEEF1;        --r-detail-bd:#CFD2D8;
}
:focus-visible{outline:2px solid var(--burgundy);outline-offset:3px}

/* Brand: the square-kufic emblem, burgundy; wordmark as Amanah sets it. */
/* Only the colour differs from Amanah. The height (1.06em) and the optical
   nudge (translateY .055em) are its own, and the overrides that sat here made
   the emblem too big for the cap height and dropped the nudge. */
.brand .emblem{color:var(--burgundy)}
.site-footer .brand .emblem{color:var(--rose-light)}
.brand .sub{color:var(--burgundy)}
.site-footer .brand .sub{color:rgba(255,255,255,.6)}

/* On a burgundy panel the burgundy button would vanish: invert it. */
.panel--purple,.hw-hero{--btn-bg:#fff;--btn-fg:var(--burgundy)}
.panel--purple .btn--ghost{--_fg:#fff;border-color:rgba(255,255,255,.55)}
.panel--purple .link,.panel--purple a.link{color:#fff}

/* Interactive borders at 3:1 (brief fix 3) */
.searchbox{border-color:var(--rule-strong)}
/* Amanah's ghost button keylines in --rule, which on the rose band (#F5E7EB)
   is all but invisible. It is a button, so it follows the same 3:1 rule as
   the fields; on the tinted bands it also takes the white fill that Amanah
   gives the input beside it, or it still reads as text, not as a control. */
.btn--ghost{border-color:var(--rule-strong)}
.hw-brief .btn--ghost,.panel--tint .btn--ghost{background:#fff}
.hw-hero .searchbox{border-color:transparent}

/* Nav utilities next to Amanah's ghost button */
.nav-icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:none;border:1px solid transparent;color:var(--fg);cursor:pointer;transition:border-color .15s,color .15s}
.nav-icon:hover{color:var(--burgundy);border-color:var(--line)}
.nav-icon svg{width:20px;height:20px}
/* The WhatsApp mark in a button. In em, so it keeps its proportion to the
   label in both button sizes, and flex:none, or the button's flex row shrinks
   the icon instead of the text: in the header it was squeezed from 18px wide
   to under 7, a sliver. */
.btn .wa{width:1.25em;height:1.25em;flex:none}
.wa-bubble{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;width:56px;height:56px;border-radius:50%;
  display:none;place-items:center;background:#fff;color:var(--ink);border:1px solid var(--rule-strong);box-shadow:0 14px 34px -14px rgba(30,30,30,.45)}
.wa-bubble svg{width:26px;height:26px}
@media(max-width:1080px){.wa-bubble{display:grid}}
body.menu-open .wa-bubble{display:none}

/* ---- Ruling chip -------------------------------------------------------- */
/* The word is always present; the dot is decorative. Pale ground, dark text,
   1px border, pill. */
.ruling{display:inline-flex;align-items:center;gap:.5em;align-self:flex-start;font-size:var(--step--1);font-weight:600;line-height:1;
  padding:.45em .9em .45em .75em;border-radius:999px;border:1px solid;white-space:nowrap}
.ruling::before{content:"";width:.5em;height:.5em;border-radius:50%;background:currentColor;flex:none}
.ruling[data-r="permissible"]{color:var(--r-permissible);background:var(--r-permissible-bg);border-color:var(--r-permissible-bd)}
.ruling[data-r="impermissible"]{color:var(--r-impermissible);background:var(--r-impermissible-bg);border-color:var(--r-impermissible-bd)}
.ruling[data-r="disliked"]{color:var(--r-disliked);background:var(--r-disliked-bg);border-color:var(--r-disliked-bd)}
.ruling[data-r="conditional"]{color:var(--r-conditional);background:var(--r-conditional-bg);border-color:var(--r-conditional-bd)}
.ruling[data-r="requires-detail"]{color:var(--r-detail);background:var(--r-detail-bg);border-color:var(--r-detail-bd)}
.card-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* The ruling chip and the section tag stand next to each other in a card top
   and in the answer header, so they must be one height. The ruling runs
   line-height 1 inside a 1px border, the tag had neither and stood 3px
   taller. Same box for both; the transparent border keeps them level. */
.tag{display:inline-flex;align-items:center;line-height:1;padding:.45em .9em;border:1px solid transparent}

/* ---- Search results (the Amanah searchbox, working) --------------------- */
.searchbox{position:relative}
.search-results{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:30;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 30px 70px -30px rgba(30,30,30,.45);overflow:hidden auto;text-align:left;max-height:min(62vh,560px);color:var(--ink)}
.search-results[hidden]{display:none}
.search-results .status{padding:12px 20px;font-size:var(--step--1);color:var(--muted);border-bottom:1px solid var(--line);background:var(--paper)}
.result{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:start;padding:14px 20px;min-height:44px;border-bottom:1px solid var(--line);color:var(--ink)}
.result:last-child{border-bottom:0}
.result:hover,.result[aria-selected="true"]{background:var(--rose)}
.result b{font-weight:600;font-size:var(--step-0);line-height:1.35}
.result small{grid-column:1/-1;color:var(--muted);font-size:var(--step--1);line-height:1.45}
.result mark{background:none;color:var(--burgundy);font-weight:700}
.result--none{display:block;padding:18px 20px;color:var(--muted)}
.result--none a{color:var(--burgundy);font-weight:600}
.palette{position:fixed;inset:0;z-index:120;display:none;background:rgba(30,30,30,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:clamp(12px,10vh,110px) var(--gutter) 20px}
.palette[data-open]{display:block}
.palette__box{max-width:720px;margin-inline:auto;background:#fff;border-radius:var(--radius-lg);box-shadow:0 40px 90px -30px rgba(0,0,0,.6);overflow:hidden}
.palette .searchbox{border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding:12px 16px 12px 22px}
.palette .search-results{position:static;border:0;border-radius:0;box-shadow:none}
.palette__hint{display:flex;gap:16px;justify-content:flex-end;padding:10px 16px;font-size:.78rem;color:var(--muted);border-top:1px solid var(--line);background:var(--paper)}

/* ---- Answer page -------------------------------------------------------- */
/* Header: Amanah's article head, with the ruling chip leading. */
.qa-meta{display:flex;align-items:center;gap:10px 18px;margin-top:18px;flex-wrap:wrap;color:var(--muted);font-size:var(--step--1)}
.qa-meta .byline b{color:var(--fg);font-weight:600}
.qa-tools{display:flex;gap:8px;margin-left:auto}
.qa-tools .btn{flex:none;white-space:nowrap}
@media(max-width:640px){.qa-tools{margin-left:0}}
/* The straight answer: the tinted box, before anything else. */
.answer-box{background:var(--rose);border-radius:var(--radius-lg);padding:clamp(22px,2.8vw,34px);margin-bottom:clamp(28px,4vw,44px)}
.answer-box h2{font-family:var(--font-body);font-size:var(--step--1);font-weight:700;color:var(--burgundy-deep);margin:0 0 10px!important;letter-spacing:0}
.answer-box .a{font-size:var(--step-1);line-height:1.55;color:var(--fg)}
.answer-box .a p{color:var(--fg)!important;line-height:1.55!important}
.answer-box .a p+p{margin-top:.6em}
.answer-box .note{margin-top:12px;font-size:var(--step--1);color:#4a4a4a}
.question-box{border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,2.6vw,28px);margin-bottom:clamp(28px,4vw,44px);background:var(--paper)}
.question-box h2{font-family:var(--font-body);font-size:var(--step--1);font-weight:700;color:var(--muted);margin:0 0 10px!important;letter-spacing:0}
.question-box p{color:var(--fg)!important}
/* A subheading must not be smaller than the paragraph under it: --step-0 is
   the page's base, but prose runs a little larger, so h3 came out below the
   body text. In em it stays a step above whatever the column is set in. */
.prose h3{font-size:1.06em;letter-spacing:-.01em;margin:1.7em 0 .6em}
.prose h2+h3{margin-top:.9em}
.prose ol{margin-top:.9em;padding-left:1.3em;display:flex;flex-direction:column;gap:.6em}
.prose ol li{color:var(--muted);line-height:1.7}
.prose sup{font-size:.7em;line-height:0}
.prose a.fn{color:var(--burgundy);text-decoration:none;font-weight:700;padding:0 1px}
.prose table{border-collapse:collapse;width:100%;font-size:var(--step--1);margin-top:1em}
.prose td{border:1px solid var(--line);padding:8px 10px;vertical-align:top;color:var(--muted)}
.prose tr:nth-child(even) td{background:var(--rose)}
.prose [dir="rtl"],.prose [lang="ar"]{font-family:var(--font-arabic);line-height:2;text-align:right;font-size:1.18em;color:var(--fg)}
/* No rule down the side of the Fiqh basis. It sat on every paragraph, so it
   read as a broken line with gaps rather than one rail, and the "Fiqh basis"
   heading already says where the section starts. */
.signoff{margin-top:clamp(28px,4vw,40px);padding-top:22px;border-top:1px solid var(--line)}
.signoff p{color:var(--fg)!important;margin:0!important}
.signoff .who{font-weight:600;margin-top:4px!important}
.signoff .role{color:var(--muted)!important;font-size:var(--step--1)}
/* References: one citation column, not a stack of cards. Each [n] opens a
   reference and gets a rule above it; the lines under it are the source and
   the passage it cites. The old posts give those in no fixed order and the
   build cannot tell them apart, so the block does not pretend to a structure
   it does not have — it just reads as one quoted column. */
.refs{margin-top:clamp(28px,4vw,44px);padding:clamp(22px,3vw,34px);border-radius:var(--radius-lg);background:var(--paper);border:1px solid var(--line)}
.refs h2{margin-top:0!important}
.refs p{font-size:var(--step--1);overflow-wrap:anywhere}
.refs p+p{margin-top:.8em}
.refs [dir="rtl"]{direction:rtl;text-align:right;font-family:var(--font-arabic);font-size:1.14rem;line-height:1.95;color:var(--fg)}
/* Beats the boxed Arabic of the long documents, which must not apply here. */
.prose .refs p[dir="rtl"]{background:none;border:0;border-radius:0;padding:0;margin-top:.8em;font-size:1.14rem;line-height:1.95}
/* ...and the rule above each [n] has to beat that reset in turn. */
.refs p.ref,.prose .refs p.ref[dir="rtl"]{margin-top:clamp(20px,2.4vw,28px);padding-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--line)}
/* No rule directly under the "References" heading; it would read as a second
   line. Not :first-of-type — some blocks open with an English note, and there
   the rule is right, because it separates that note from the first source. */
.refs h2+p.ref,.prose .refs h2+p.ref[dir="rtl"]{margin-top:14px;padding-top:0;border-top:0}
.refs h3{margin:clamp(20px,2.4vw,28px) 0 .4em;color:var(--fg)}
/* The marker stays Latin and upright inside the Arabic line. */
.ref__n{display:inline-block;direction:ltr;unicode-bidi:isolate;min-width:1.7em;margin-inline-end:.55em;
  color:var(--burgundy);font-family:var(--font-body);font-size:.78em;font-weight:600;font-variant-numeric:tabular-nums;vertical-align:.12em}
.refs a{color:var(--burgundy)}

/* ---- The About documents (/about/what-is-fiqh/, /disclaimer/, /terms-of-use/)
   Amanah's paper layout: one column of running text with the sticky contents
   rail. These pages are sectioned, which Amanah's prose rules did not expect. */
.prose section+section{margin-top:clamp(30px,4vw,48px)}
.prose p b,.prose li b{color:var(--fg);font-weight:600}
/* The Arabic source under a paragraph: the quoted text, set apart from the
   English that introduces it. Same treatment as the references block. */
.prose p[dir="rtl"]{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px clamp(16px,2vw,22px);margin-top:1em;font-size:1.1em;line-height:2}
.prose blockquote{margin-top:1.1em;padding-left:18px;border-left:2px solid var(--rose-light);color:var(--muted);line-height:1.75}
.prose blockquote cite{display:block;margin-top:10px;font-style:normal;font-size:var(--step--1);color:var(--muted)}
/* Numbered clauses: a hanging indent, so 13.1 and (a) line up down the page. */
.legal h2{font-size:var(--step-1)}
.legal p.cl{display:grid;grid-template-columns:3.4em minmax(0,1fr);gap:0 10px;margin-top:.9em}
.legal p.cl>b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
.legal p.cl>span{color:var(--muted);line-height:1.75}
.legal p.cl--sub{margin-left:3.4em;grid-template-columns:2.6em minmax(0,1fr)}
.legal blockquote{margin-left:3.4em}
@media(max-width:560px){
  .legal p.cl{grid-template-columns:2.9em minmax(0,1fr)}
  .legal p.cl--sub,.legal blockquote{margin-left:2.9em;grid-template-columns:2.4em minmax(0,1fr)}
}
/* The About Us panel carries two highlights, which 420px squeezes to five
   lines each. Amanah's own two-highlight panel (Q&A) is wider for the same
   reason. */
.nav-panel--slim:has(.nav-panel__hl+.nav-panel__hl){min-width:580px;grid-template-columns:1.35fr 1fr}
/* The contents rail. On the desktop it is Amanah's sticky rail and the
   summary is only its label. On a phone it is a disclosure: twenty wrapped
   links filled the whole first screen before a word of the document. */
.toc summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none}
.toc summary::-webkit-details-marker{display:none}
.longform__toc a[aria-current="true"]{color:var(--burgundy)}
@media(min-width:1081px){
  .toc summary{font-size:var(--step--1);font-weight:600;color:var(--muted);margin-bottom:12px;pointer-events:none}
  .toc summary .mm__chev{display:none}
}
@media(max-width:1080px){
  .toc{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);overflow:hidden}
  .toc summary{padding:13px 16px;min-height:48px;cursor:pointer;font-weight:600;color:var(--fg)}
  .toc[open] summary{border-bottom:1px solid var(--line)}
  .toc[open] summary .mm__chev{transform:rotate(45deg)}
  /* One link per row, not Amanah's wrapped word-salad. */
  .longform__toc{display:grid;gap:0;border:0;padding:6px}
  .longform__toc a{padding:11px 12px;border:0;border-radius:10px;color:var(--fg);margin:0}
  .longform__toc li+li a{box-shadow:0 -1px 0 var(--line)}
  .longform__toc a[aria-current="true"]{background:var(--rose)}
}

/* ---- Q&A archive -------------------------------------------------------
   The ruling chips were a filter here as well; the client dropped them, so
   only the section row is left and it uses the same swipe row as a section
   page. The old .filters wrapper set flex-wrap:wrap, which beat
   .chips--swipe on specificity and made the sections stack over five lines. */
.chip[aria-current]{background:var(--burgundy);border-color:var(--burgundy);color:#fff}
button.chip{background:none;font:inherit;cursor:pointer;min-height:40px}
.count{color:var(--muted);font-size:var(--step--1);font-weight:600}
.more-row{display:flex;justify-content:center;margin-top:28px}

.field .err{display:none;font-size:var(--step--1);color:var(--error);font-weight:600;margin-top:6px}
.field[data-invalid] input,.field[data-invalid] textarea{border-color:var(--error)}
.field[data-invalid] .err{display:block}
.form-status{padding:14px 16px;border-radius:var(--radius-sm);background:var(--paper);border:1px solid var(--line);font-size:var(--step--1)}
.form-status[data-kind="ok"]{background:var(--r-permissible-bg);border-color:var(--r-permissible-bd);color:var(--r-permissible)}
.form-status[data-kind="error"]{background:var(--r-impermissible-bg);border-color:var(--r-impermissible-bd);color:var(--error)}
.form-status a{color:inherit;font-weight:600;text-decoration:underline}

/* De oprichter op /about/: alleen tekst, want er staan geen portretten op de
   site. De kaart blijft een eigen component voor de leeswijdte. */
.founder{display:block}
.founder:hover{transform:none}
.founder__body>h3{margin-top:-.15em}
.quote-card blockquote{font-size:var(--step-1);line-height:1.6;margin:0}
.quote-card blockquote p+p{margin-top:.8em}
.quote-card figcaption{margin-top:18px;font-weight:600}
.quote-card figcaption span{display:block;font-weight:400;color:var(--muted);font-size:var(--step--1)}
.label-table{width:100%;border-collapse:collapse;margin-top:1em}
.label-table td,.label-table th{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-size:var(--step--1)}
.label-table td:last-child{color:var(--muted)}

/* ---- Toast -------------------------------------------------------------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:150;background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-size:var(--step--1);font-weight:500;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast[data-show]{opacity:1;transform:translate(-50%,0)}

/* ---- Print (brief: a print stylesheet that drops the navigation) -------- */
@media print{
  .site-header,.mm,.site-footer,.wa-bubble,.palette,.longform__aside,.qa-tools,.crumbs,.skip-link,.toast,.related,.panel--purple{display:none!important}
  body{font-size:11.5pt;color:#000;background:#fff}
  .container{max-width:none;padding:0}
  .longform{display:block}
  .section{padding-block:12pt}
  .reveal{opacity:1!important;transform:none!important}
  .answer-box,.question-box,.refs{background:none;border:1px solid #999}
  .ruling{border:1px solid #000!important;color:#000!important;background:none!important}
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}

/* ---- Amanah components, adjusted for Darul Fiqh ------------------------ */
/* The hero clips its glows; the live search results must not be clipped, so
   the glows move to their own clipped layer. Same geometry as Amanah's. */
.hw-hero{overflow:visible}
.hw-hero::before,.hw-hero::after{display:none}
.hw-glow{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0}
.hw-glow::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;top:-180px;right:-120px;background:radial-gradient(circle,rgba(232,169,184,.5),transparent 62%);opacity:.5}
.hw-glow::after{content:"";position:absolute;width:440px;height:440px;border-radius:50%;bottom:-220px;left:-80px;background:radial-gradient(circle,rgba(157,7,49,.65),transparent 60%);opacity:.6}
.hw-hero .search-results{z-index:40}
.hw-acard .card-top,.answer-card .card-top{margin-bottom:2px}
.answers--two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:820px){.answers--two{grid-template-columns:1fr}}
.answer-card h3{line-height:1.25}
.fine-note{color:var(--muted);font-size:var(--step--1);margin:0}
.paper-meta .qa-tools{margin-left:auto}

/* The search button stays solid burgundy, also inside the burgundy hero. */
.searchbox{--btn-bg:var(--burgundy);--btn-fg:#fff}
/* Amanah's page styles each lived on their own page; together, a later
   page's .sec-head overrode the mobile stacking. Restore it last. */
@media(max-width:640px){.sec-head{flex-direction:column;align-items:flex-start;gap:10px}}
/* On the dark community cards the "answered" label takes the light accent. */
.hw-comcard .answered{color:var(--rose-light)}
.hw-comcard .answered .dot{background:var(--rose-light)}

/* One swipeable row of chips instead of a wrapped block (sections, rulings).
   The row runs through the gutter so the next chip is visibly cut off. */
.chips--swipe{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;
  scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter) 6px;scroll-padding-inline:var(--gutter)}
.chips--swipe::-webkit-scrollbar{display:none}
.chips--swipe>*{flex:none;scroll-snap-align:start;white-space:nowrap}

/* ---- Text runs the full width (client request) ------------------------- */
/* Amanah caps paragraphs at 44–70ch. Here text uses the width it is given;
   headings keep their own measure. */
main p,main li,.prose,.faq-item p,.section-intro,.section-intro p,.lead,.ri-row__d,.research-cat__lede,.not-advice{max-width:none!important}

/* ---- Ask flow (/contact/) ---------------------------------------------- */
.ask-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(20px,3vw,32px);align-items:start}
@media(max-width:980px){.ask-wrap{grid-template-columns:1fr}}
.ask-flow{padding:clamp(22px,3.4vw,44px);display:grid;gap:22px}
.ask-flow:hover{transform:none}
.ask-steps{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.ask-steps li{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--paper);color:var(--muted);font-size:var(--step--1);font-weight:600}
.ask-steps li span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line);font-variant-numeric:tabular-nums}
.ask-steps li[aria-current]{background:var(--rose);color:var(--burgundy-deep)}
.ask-steps li[aria-current] span{background:var(--burgundy);border-color:var(--burgundy);color:#fff}
.ask-steps li[data-done] span{background:var(--burgundy-deep);border-color:var(--burgundy-deep);color:#fff}
.ask-step{border:0;margin:0;padding:0;min-width:0;display:grid;gap:14px}
.ask-step legend{padding:0;margin-bottom:2px}
.ask-step legend h2{font-size:var(--step-2);letter-spacing:-.03em}
.js .ask-step[hidden]{display:none}
.ask-help{color:var(--muted)}
.ask-topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.ask-topic{display:flex;align-items:center;gap:12px;min-height:60px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--fg);
  font:inherit;font-weight:600;text-align:left;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.ask-topic:hover{border-color:var(--burgundy);transform:translateY(-1px)}
.ask-topic[aria-pressed="true"]{border-color:var(--burgundy);background:var(--rose);box-shadow:inset 0 0 0 1px var(--burgundy)}
.ask-topic .ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--rose);color:var(--burgundy);flex:none}
.ask-topic[aria-pressed="true"] .ico{background:var(--burgundy);color:#fff}
.ask-topic .ico svg{width:19px;height:19px}
.ask-flow textarea,.ask-flow input{width:100%;border:1px solid var(--rule-strong);border-radius:var(--radius-sm);padding:.9em 1.1em;background:#fff;font:inherit;font-size:var(--step-0);color:var(--ink)}
.ask-flow textarea{min-height:170px;resize:vertical;line-height:1.6}
.ask-flow input{min-height:50px}
.ask-flow textarea:focus,.ask-flow input:focus{outline:0;border-color:var(--burgundy);box-shadow:0 0 0 3px rgba(157,7,49,.16)}
.ask-flow label{font-weight:600;font-size:var(--step--1);display:block;margin-bottom:6px}
.ask-flow .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.ask-flow .two{grid-template-columns:1fr}}
.ask-tips{border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;background:var(--paper)}
.ask-tips summary{cursor:pointer;font-weight:600;font-size:var(--step--1);color:var(--fg)}
.ask-tips ul{margin:10px 0 2px;padding-left:1.2em;display:grid;gap:6px;color:var(--muted);font-size:var(--step--1)}
.ask-suggest{border-radius:var(--radius);background:var(--rose);padding:16px 18px;display:grid;gap:10px}
.ask-suggest h3{font-size:var(--step-0);letter-spacing:-.01em}
.ask-suggest__list{display:grid;gap:8px}
.ask-suggest__list a{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:start;padding:12px 14px;border-radius:var(--radius-sm);background:#fff;color:var(--fg)}
.ask-suggest__list a:hover{box-shadow:0 0 0 1px var(--burgundy)}
.ask-suggest__list b{font-weight:600;line-height:1.35}
.ask-suggest__list small{grid-column:1/-1;color:var(--muted);font-size:var(--step--1)}
.ask-nav{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;margin-top:4px}
.ask-review{display:grid;gap:10px;padding:16px 18px;border-radius:var(--radius);background:var(--paper);border:1px solid var(--line)}
.ask-review>div{display:grid;grid-template-columns:90px 1fr auto;gap:10px;align-items:start;font-size:var(--step--1)}
.ask-review span{color:var(--muted);font-weight:600}
.ask-review p{white-space:pre-line;color:var(--fg);margin:0}
.link-btn{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--burgundy);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ask-done{display:grid;gap:14px;justify-items:start;padding:10px 0}
.ask-done__tick{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--rose);color:var(--burgundy)}
.ask-done__tick svg{width:28px;height:28px}
.ask-done h2{font-size:var(--step-2)}
.ask-done p{color:var(--muted)}
.ask-aside{display:grid;gap:16px;position:sticky;top:110px}
@media(max-width:980px){.ask-aside{position:static}}
.ask-wa{display:flex;gap:14px;align-items:center}
.ask-wa__ico{width:34px;height:34px;flex:none;color:var(--burgundy)}
.ask-wa b{display:block}
.ask-wa small{display:block;color:var(--muted);font-size:var(--step--1);margin-top:2px}
.ask-side h3{font-size:var(--step-1)}
.ask-side p{color:var(--muted);font-size:var(--step--1);margin:8px 0 14px}
.ask-side .searchbox{padding-left:14px}
.ask-side .searchbox .btn{display:none}
.more-inline{font-weight:600;color:var(--burgundy);font-size:var(--step--1)}
/* Components that set their own display must still honour [hidden]. */
[hidden]{display:none!important}


/* De knop onder een lange subsectie. Staat er alleen als JavaScript hem
   neerzet; zonder JavaScript staan alle antwoorden er gewoon. */
.more-btn{display:flex;align-items:center;gap:10px;margin:clamp(18px,2.4vw,26px) auto 0}
.more-btn__left{color:var(--muted);font-weight:500;font-size:var(--step--1)}
.btn--ghost.more-btn:hover .more-btn__left{color:inherit;opacity:.75}

/* ---- Today's nisab (/nisab/) ------------------------------------------- */
/* Two metal cards side by side. Silver, the one zakat is worked out with,
   sits on the burgundy panel; gold is the plain card beside it. */
.nisab-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap;margin-bottom:20px}
.nisab-bar__cur{display:grid;gap:6px;min-width:min(100%,280px)}
.nisab-bar__cur label{font-weight:600;font-size:var(--step--1)}
.nisab-bar__cur select{appearance:none;border:1px solid var(--rule-strong);border-radius:var(--radius-sm);padding:.75em 2.6em .75em 1em;font:inherit;font-size:var(--step-0);color:var(--fg);cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239D0731' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/16px}
.nisab-bar__status{display:flex;align-items:center;gap:10px;margin:0;color:var(--muted);font-size:var(--step--1)}
.nisab-dot{width:9px;height:9px;border-radius:50%;background:var(--rule-strong);flex:none}
[data-state="live"] .nisab-dot{background:var(--r-permissible);box-shadow:0 0 0 0 rgba(15,92,67,.45);animation:nisab-pulse 2.4s infinite}
[data-state="error"] .nisab-dot{background:var(--error)}
@keyframes nisab-pulse{70%{box-shadow:0 0 0 8px rgba(15,92,67,0)}100%{box-shadow:0 0 0 0 rgba(15,92,67,0)}}
@media(prefers-reduced-motion:reduce){[data-state="live"] .nisab-dot{animation:none}}

.nisab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,24px)}
@media(max-width:860px){.nisab-grid{grid-template-columns:1fr}}
.nisab-card{border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(24px,3.4vw,40px);background:#fff;display:flex;flex-direction:column}
.nisab-card.panel--purple{background:var(--burgundy-deep);border-color:transparent;color:#fff}
.nisab-card__top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.nisab-card h2{font-size:var(--step-1);margin:0}
.nisab-card__use{font-size:var(--step--1);font-weight:600;padding:.35em .9em;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;white-space:nowrap}
.nisab-card__value{font-family:var(--font-display);font-weight:600;font-size:clamp(2.4rem,1.4rem + 3.4vw,4.4rem);letter-spacing:-.03em;line-height:1;margin:clamp(22px,3vw,36px) 0 12px;min-height:1em;overflow-wrap:anywhere}
.nisab-card__weight{margin:0;color:var(--muted)}
.panel--purple .nisab-card__weight{color:rgba(255,255,255,.78)}
.nisab-card__rows{margin:clamp(22px,3vw,32px) 0 0;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:8px}
.panel--purple .nisab-card__rows{border-top-color:rgba(255,255,255,.2)}
.nisab-card__rows div{display:flex;justify-content:space-between;gap:12px;font-size:var(--step--1)}
.nisab-card__rows dt{color:var(--muted)}
.panel--purple .nisab-card__rows dt{color:rgba(255,255,255,.72)}
.nisab-card__rows dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.nisab-skel{display:inline-block;color:transparent;width:6ch;border-radius:10px;background:var(--rose);animation:nisab-skel 1.4s ease-in-out infinite}
.panel--purple .nisab-skel{background:rgba(255,255,255,.14)}
@keyframes nisab-skel{50%{opacity:.5}}
.nisab-card__value small{font-size:var(--step-1);font-weight:500;letter-spacing:0;opacity:.7;margin-left:.2em}
.nisab-retry{margin-left:6px}
.nisab-source{margin-top:18px}
/* De mahr-bedragen: dezelfde kaart, een maat kleiner, want het is een
   bijzaak op deze pagina en geen tweede hoofdcijfer. */
.mahr{margin-top:clamp(40px,6vw,72px)}
.mahr .sec-head p{max-width:62ch;color:var(--muted);margin:10px 0 0}
.mahr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,24px);margin-top:clamp(18px,2.4vw,28px)}
@media(max-width:860px){.mahr-grid{grid-template-columns:1fr}}
.mahr-card{border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,2.6vw,30px);background:#fff}
.mahr-card h3{font-size:var(--step-0);margin:0}
.mahr-card__value{font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,1.1rem + 1.8vw,2.6rem);letter-spacing:-.025em;line-height:1;margin:14px 0 10px;min-height:1em;overflow-wrap:anywhere}
.mahr-card__weight{margin:0;color:var(--muted);font-size:var(--step--1)}
.nisab-which{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,56px);align-items:start}
.nisab-which .h-sec{max-width:14ch}
@media(max-width:860px){.nisab-which{grid-template-columns:1fr}}

/* De hidjri-datum naast de gregoriaanse in een byline. Zelfde grijs als de
   rest van de meta; hij is context, geen tweede datum om te lezen. */
.date-hijri{color:var(--muted)}
.paper-meta .date-hijri{white-space:nowrap}