/* ==========================================================================
   zakat-page.css: dedicated /donate/zakat/ landing page
   --------------------------------------------------------------------------
   Loaded only on the ZakatPage. Reuses tokens from main.css (colours,
   spacing, type) so it inherits the active palette/font theme.
   ========================================================================== */

.zakat-page {
    background: var(--cream);
}

/* ----- Hero --------------------------------------------------------------- */
/* Manuscript-grade hero: cream paper continues from the body, with a
   gold-leaf hairline below to mark the section transition (replaces the
   legacy dark forest-green ribbon, which after the brand reset was
   resolving to dark indigo via the --forest alias and creating a heavy
   wall above the wizard. The dark band ALSO bled through the
   semi-transparent fixed nav, making the whole top of the page read as
   a dark mode regression). The hero now sits in the manuscript register:
   chapter eyebrow + Inria Serif headline + ink body, on cream paper. */
.zakat-page__hero {
    background: var(--paper);
    color: var(--ink);
    padding: var(--space-7) 0 var(--space-6);
    border-bottom: 1px solid var(--rule);
}
.zakat-page__hero-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-6);
    align-items: center;
}
.zakat-page__eyebrow {
    color: var(--vermillion-text, var(--vermillion, var(--gold)));
    margin-bottom: var(--space-2);
}
.zakat-page__headline {
    font-family: var(--font-en-display);
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.012em;
    margin: 0 0 var(--space-4);
    color: var(--ink);
}
.zakat-page__lead {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink-soft);
}
.zakat-page__lead p { margin: 0 0 var(--space-3); }

.zakat-page__nisab-strip {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
.zakat-page__nisab-strip li {
    padding: var(--space-3) var(--space-4);
    /* Manuscript-panel pattern: hairline above + below, paper-deep tint
       background, no border or border-radius. Replaces the dark-hero
       semi-transparent paper tint that worked when the surrounding hero
       was dark indigo. */
    background: oklch(from var(--paper-deep, var(--cream)) l c h / 0.5);
    border: 0;
    border-block: 1px solid var(--rule);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.zakat-page__nisab-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    opacity: 0.75;
}
.zakat-page__nisab-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.zakat-page__nisab-meta { font-size: 0.8125rem; opacity: 0.8; }

.zakat-page__hero-figure {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zakat-page__hero-image {
    width: 100%;
    max-width: 400px;
    border-radius: 14px;
    box-shadow: 0 8px 28px oklch(from var(--ink) l c h / 0.25);
}
.zakat-page__hero-figure--placeholder {
    color: var(--gold);
    opacity: 0.45;
}
.zakat-page__hero-figure--placeholder svg { width: 240px; height: 240px; }

@media (max-width: 880px) {
    .zakat-page__hero-inner { grid-template-columns: 1fr; }
    .zakat-page__hero-figure { order: -1; }
    .zakat-page__hero-figure--placeholder svg { width: 140px; height: 140px; }
}

/* ----- Body grid: sidebar + calculator ------------------------------------ */
.zakat-page__body { padding: var(--space-7) 0 var(--space-8); }
.zakat-page__grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}
@media (max-width: 1024px) {
    .zakat-page__grid { grid-template-columns: 1fr; }
}

/* ----- Explainer cards (3-up row above the wizard) ------------------------
   The educational sidebar that used to live next to the calculator is now a
   horizontal trio of expandable cards. Sits between the hero and the
   wizard so first-time donors can prime themselves on the basics before
   stepping into the calculator. The wizard itself is the focal point. */
.zakat-page__explainers {
    padding: var(--space-6) 0 var(--space-6);
}
.zakat-explainers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    /* Visible breathing space below the accordion trio so the inline
       citation underneath doesn't crowd them: this used to share a
       bare var(--space-4) with the quote which read as a bug. */
    margin-bottom: var(--space-6);
}
@media (max-width: 900px) {
    .zakat-explainers-grid {
        grid-template-columns: 1fr;
        margin-bottom: var(--space-5);
    }
}

/* Inline (full-width) variant of the citation block under the explainer
   cards: picks up the same forest treatment as the original sidebar
   quote but spans the container width. The relative-positioning + ::before
   pull-quote glyph give it a clearer "this is a citation" identity so the
   tile reads as a deliberate punctuation mark between the explainer trio
   and the wizard, not a third-class card. */
.zakat-quote--inline {
    position: relative;
    margin: var(--space-3) 0 0;
    padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
    background: linear-gradient(135deg, var(--forest) 0%,
                                color-mix(in srgb, var(--forest) 80%, var(--ink) 20%) 100%);
    box-shadow: 0 12px 28px oklch(from var(--ink) l c h / 0.18);
}
.zakat-quote--inline::before {
    content: "“";
    position: absolute;
    top: -10px;
    left: 18px;
    font-family: var(--font-en-display);
    font-size: 4rem;
    line-height: 1;
    color: var(--gold);
    opacity: 0.85;
}
@media (min-width: 901px) {
    .zakat-quote--inline {
        max-width: 760px;
        margin: var(--space-3) auto 0;
    }
}

/* ----- Educational sidebar ------------------------------------------------- */
.zakat-page__sidebar {
    position: sticky;
    top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
@media (max-width: 1024px) { .zakat-page__sidebar { position: static; } }

.zakat-explainer {
    background: var(--paper);
    border: 1px solid oklch(from var(--ink) l c h / 0.08);
    border-radius: 12px;
    overflow: hidden;
}
.zakat-explainer__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--ink);
    transition: background 0.15s ease;
}
.zakat-explainer__head::-webkit-details-marker { display: none; }
.zakat-explainer__head:hover { background: oklch(from var(--ink) l c h / 0.03); }
.zakat-explainer__head::after {
    content: "+";
    margin-left: auto;
    font-size: 1.25rem;
    color: var(--gold);
    font-weight: 400;
    line-height: 1;
}
.zakat-explainer[open] .zakat-explainer__head::after { content: "−"; }

.zakat-explainer__icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.12);
    color: var(--gold);
    border-radius: 8px;
    flex: 0 0 32px;
}
.zakat-explainer__icon svg { width: 18px; height: 18px; }
.zakat-explainer__title { flex: 1 1 auto; font-size: 0.9375rem; }

.zakat-explainer__body {
    padding: 0 var(--space-4) var(--space-4);
    color: var(--ink);
    opacity: 0.92;
    line-height: 1.6;
    font-size: 0.9375rem;
}
.zakat-explainer__body p { margin: 0 0 var(--space-2); }
.zakat-explainer__body p:last-child { margin-bottom: 0; }

.zakat-quote {
    margin: 0;
    padding: var(--space-4);
    background: var(--forest);
    color: var(--cream);
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--forest) 80%, var(--gold) 20%);
}
.zakat-quote__body {
    font-family: var(--font-en-display);
    font-style: italic;
    font-size: 1.0625rem;
    line-height: 1.55;
    margin: 0 0 var(--space-2);
    color: var(--cream);
}
.zakat-quote__attribution {
    font-size: 0.8125rem;
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ----- Calculator main column --------------------------------------------- */
.zakat-page__calc { display: flex; flex-direction: column; gap: var(--space-5); }

/* The summary box stays at top, sticks while user scrolls inputs. */
.zakat-page__summary {
    position: sticky;
    top: var(--space-4);
    z-index: 1;
    background: var(--paper);
    border: 1px solid oklch(from var(--ink) l c h / 0.08);
    border-radius: 14px;
    padding: var(--space-5);
    box-shadow: 0 4px 20px oklch(from var(--ink) l c h / 0.06);
}
@media (max-width: 1024px) { .zakat-page__summary { position: static; } }

.zakat-page__summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    font-size: 0.9375rem;
    color: var(--ink);
}
.zakat-page__summary-row strong {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.zakat-page__summary-row--net {
    border-top: 1px dashed oklch(from var(--ink) l c h / 0.12);
    padding-top: var(--space-3);
    margin-top: var(--space-1);
    font-size: 1rem;
}
.zakat-page__summary-row--net strong { color: var(--forest); font-size: 1.125rem; }

.zakat-page__nisab-status {
    margin: var(--space-3) 0 0;
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
    line-height: 1.45;
    border-radius: 8px;
    min-height: 1px;
}
.zakat-page__nisab-status--eligible {
    background: rgba(46, 125, 50, 0.10);
    color: #1f5e22;
    border: 1px solid rgba(46, 125, 50, 0.24);
}
.zakat-page__nisab-status--below {
    background: rgba(212, 175, 55, 0.14);
    color: var(--ink);
    border: 1px solid rgba(212, 175, 55, 0.32);
}

.zakat-page__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-4) 0 var(--space-3);
    padding: var(--space-4);
    background: var(--forest);
    color: var(--cream);
    border-radius: 12px;
}
.zakat-page__total-label {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cream);
    opacity: 0.85;
}
.zakat-page__total-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
}
.zakat-page__total-currency { font-size: 0.75rem; opacity: 0.8; margin-bottom: 4px; }
.zakat-page__total-amount > span:last-child {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 700;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.zakat-page__cta-form {
    margin: 0;
    padding: 0;
}
.zakat-page__cta {
    margin-top: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-align: center;
    /* The CTA is now a <button>; reset the user-agent default styling so it
       inherits .btn--gold cleanly. */
    border: 0;
    cursor: pointer;
    width: 100%;
    font: inherit;
}
.zakat-page__cta:disabled,
.zakat-page__cta[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}
.zakat-page__cta-amount { font-weight: 700; }
.zakat-page__cta-supporting {
    margin: var(--space-2) 0 0;
    font-size: 0.8125rem;
    text-align: center;
    color: var(--ink);
    opacity: 0.7;
    line-height: 1.5;
}

/* ----- Categorised input sections ------------------------------------------ */
.zakat-page__form { display: flex; flex-direction: column; gap: var(--space-3); }

.zakat-section {
    background: var(--paper);
    border: 1px solid oklch(from var(--ink) l c h / 0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}
.zakat-section[open] { box-shadow: 0 4px 14px oklch(from var(--ink) l c h / 0.05); }

.zakat-section__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    cursor: pointer;
    list-style: none;
    transition: background 0.15s ease;
}
.zakat-section__head::-webkit-details-marker { display: none; }
.zakat-section__head:hover { background: oklch(from var(--ink) l c h / 0.03); }
.zakat-section__head::after {
    content: "▾";
    margin-left: auto;
    font-size: 0.875rem;
    color: var(--gold);
    transition: transform 0.2s ease;
}
.zakat-section[open] .zakat-section__head::after { transform: rotate(180deg); }

.zakat-section__icon {
    font-size: 1.5rem;
    line-height: 1;
    flex: 0 0 auto;
}
.zakat-section__title {
    flex: 1 1 auto;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink);
}
.zakat-section__amount {
    font-variant-numeric: tabular-nums;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--forest);
    margin-right: var(--space-2);
}
.zakat-section--liabilities .zakat-section__amount { color: #b9532a; }

.zakat-section__body {
    padding: 0 var(--space-4) var(--space-4);
    border-top: 1px solid oklch(from var(--ink) l c h / 0.04);
    padding-top: var(--space-3);
}

.zakat-section__hint {
    margin: 0 0 var(--space-3);
    font-size: 0.875rem;
    color: var(--ink);
    opacity: 0.75;
    line-height: 1.55;
}

.zakat-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4) var(--space-3);
}
@media (max-width: 600px) { .zakat-fields { grid-template-columns: 1fr; } }

.zakat-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.875rem;
    position: relative;
}
.zakat-field--span2 { grid-column: 1 / -1; }
.zakat-field span {
    font-weight: 500;
    color: var(--ink);
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
}
.zakat-field__wrap {
    display: flex;
    align-items: stretch;
    background: var(--paper);
    border: 1.5px solid rgba(15, 53, 50, 0.14);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.zakat-field__wrap:hover { border-color: rgba(15, 53, 50, 0.28); }
.zakat-field__wrap:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.22);
    background: #fffdf6;
}
.zakat-field__prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-3);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--forest);
    background: rgba(15, 53, 50, 0.04);
    border-right: 1px solid rgba(15, 53, 50, 0.08);
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.zakat-field__suffix {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-3);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink);
    opacity: 0.7;
    background: rgba(15, 53, 50, 0.03);
    border-left: 1px solid rgba(15, 53, 50, 0.08);
    flex: 0 0 auto;
}
.zakat-field input {
    width: 100%;
    padding: 10px var(--space-3);
    border: none;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 500;
    font-family: inherit;
    background: transparent;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}
.zakat-field input::-webkit-outer-spin-button,
.zakat-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zakat-field input:focus { outline: none; }
.zakat-field input::placeholder { color: oklch(from var(--ink) l c h / 0.32); }

.zakat-page__reset {
    align-self: flex-end;
    margin-top: var(--space-3);
    font-size: 0.875rem;
}

/* ----- Q&A / FAQ ---------------------------------------------------------- */
.zakat-page__faq {
    padding: var(--space-8) 0;
    background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
    border-top: 1px solid oklch(from var(--ink) l c h / 0.06);
}
.zakat-page__faq-inner { max-width: 820px; }
.zakat-page__faq-head {
    text-align: center;
    margin-bottom: var(--space-6);
}
.zakat-page__faq-eyebrow { color: var(--gold); margin-bottom: var(--space-2); }
.zakat-page__faq-heading {
    font-family: var(--font-en-display);
    font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem);
    font-weight: 500;
    margin: 0;
    color: var(--forest);
    line-height: 1.2;
}
.zakat-page__faq-body { line-height: 1.7; color: var(--ink); margin-bottom: var(--space-5); }
.zakat-page__faq-body h3 {
    font-family: var(--font-en-display);
    font-size: 1.125rem;
    color: var(--forest);
    margin: var(--space-4) 0 var(--space-2);
}
.zakat-page__faq-body p { margin: 0 0 var(--space-3); }

.zakat-faq {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.zakat-faq__item {
    background: var(--paper);
    border: 1px solid oklch(from var(--ink) l c h / 0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.zakat-faq__item[open] {
    border-color: rgba(212, 175, 55, 0.42);
    box-shadow: 0 4px 18px rgba(15, 53, 50, 0.08);
}
.zakat-faq__q {
    list-style: none;
    cursor: pointer;
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-en-display);
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--forest);
    line-height: 1.4;
    transition: background 0.15s ease;
}
.zakat-faq__q::-webkit-details-marker { display: none; }
.zakat-faq__q:hover { background: rgba(212, 175, 55, 0.06); }
.zakat-faq__q span { flex: 1 1 auto; }
.zakat-faq__q::after {
    content: "";
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.18);
    color: var(--gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.2s ease, background 0.2s ease;
    background-image: linear-gradient(currentColor, currentColor),
                      linear-gradient(currentColor, currentColor);
    background-size: 11px 1.5px, 1.5px 11px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(212, 175, 55, 0.18);
}
.zakat-faq__item[open] .zakat-faq__q::after {
    background-size: 11px 1.5px, 0 0;
    background-color: var(--gold);
    color: var(--paper);
}
.zakat-faq__a {
    padding: 0 var(--space-5) var(--space-5);
    color: var(--ink);
    line-height: 1.7;
    font-size: 0.9375rem;
}
.zakat-faq__a p { margin: 0 0 var(--space-2); }
.zakat-faq__a p:last-child { margin-bottom: 0; }

.zakat-page__footer {
    padding: var(--space-6) 0;
    background: var(--cream);
    border-top: 1px solid oklch(from var(--ink) l c h / 0.06);
}
.zakat-page__footer-inner {
    max-width: 760px;
    text-align: center;
    color: var(--ink);
    line-height: 1.65;
}

/* ============================================================
   Dark theme: re-skin the white surfaces and forest-green text
   set by the rules above so the page reads against a dark ground.
   ============================================================ */
html[data-theme="dark"] .zakat-page__faq {
    background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
    border-top-color: var(--line);
}
html[data-theme="dark"] .zakat-page__faq-heading,
html[data-theme="dark"] .zakat-page__faq-body h3,
html[data-theme="dark"] .zakat-faq__q {
    color: var(--ink);
}
html[data-theme="dark"] .zakat-faq__item {
    background: var(--cream-light);
    border-color: var(--line);
}
html[data-theme="dark"] .zakat-faq__item[open] {
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow: 0 4px 18px oklch(from var(--ink) l c h / 0.4);
}
html[data-theme="dark"] .zakat-faq__a {
    color: var(--ink-soft);
}

/* Explainer / section / pillar / quote / inline cards. */
html[data-theme="dark"] .zakat-explainer,
html[data-theme="dark"] .zakat-section,
html[data-theme="dark"] .zakat-pillar,
html[data-theme="dark"] .zakat-page__intro-card,
html[data-theme="dark"] .zakat-page__step,
html[data-theme="dark"] .zakat-page__inline-card {
    background: var(--cream);
    border-color: var(--line);
    color: var(--ink);
}
html[data-theme="dark"] .zakat-explainer__head:hover,
html[data-theme="dark"] .zakat-section__head:hover {
    background: rgba(212, 175, 55, 0.08);
}
html[data-theme="dark"] .zakat-page__footer {
    background: var(--paper);
    border-top-color: var(--line);
}

/* ------------------------------------------------------------------
   Round 2 (2026-05): Zakat surface rebuild.

   Karat reference panel (.zakat-rates-*): two side-by-side cards,
   one for Gold (three karat tiers, 22k highlighted) and one for
   Silver (single pure rate). Each card carries an inline SVG icon
   in its native metal palette: warm yellow tones for the gold
   bar, cool grey tones with an "Ag" assay marking for the silver
   coin. The card surface stays neutral so the icon + price colour
   carry the visual identity, not a heavy tinted background.

   Display-only: underlying Nisab maths still uses 24k pure spot.

   .zakat-business-assets-callout and .nisab-wizard__eligibility-note
   follow further below.
   ------------------------------------------------------------------ */
/* Compact karat-rates ledger (2026-05 redesign).

   Was a 600-700px tall band with two tinted cards, big SVG metal
   icons, three rates each, and a featured-row highlight inside each
   card. For reference material that 95% of donors glance past, that
   was way too much real estate.

   New shape: one horizontal row of four rates (24k / 22k / 18k /
   silver .999), separated by gold-leaf hairlines. Small-caps eyebrow
   on top, indigo serif price below. 22k stays featured via a faint
   paper-deep tile background so the most-common-UK-jewellery purity
   still anchors the eye, without any card chrome.

   Total height ~140px on desktop. Mobile collapses to 2x2 grid. */
.zakat-rates {
    padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
    background: var(--paper);
    border-top: 1px solid oklch(from var(--gold-leaf) l c h / 0.45);
    border-bottom: 1px solid oklch(from var(--gold-leaf) l c h / 0.45);
}
.zakat-rates__inner {
    max-width: 56rem;
}
.zakat-rates__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin: 0 0 1rem;
}
.zakat-rates__eyebrow {
    margin: 0;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sepia);
}
.zakat-rates__source {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    margin: 0;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.78rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}
.zakat-rates__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    background: oklch(0.95 0.07 145);
    color: oklch(0.35 0.12 145);
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.zakat-rates__pill--static {
    background: oklch(0.94 0.01 80);
    color: var(--ink-soft);
}
.zakat-rates__pulse {
    color: oklch(0.55 0.18 145);
    animation: zakat-rates-pulse 1.8s ease-in-out infinite;
}
@keyframes zakat-rates-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%     { opacity: 0.4; transform: scale(0.7); }
}

/* The ledger row: four inline columns. Each column has a small-caps
   label on top and a serif price below. Gold-leaf hairlines between
   them as ledger rules: no card boxes anywhere. */
.zakat-rates__row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid oklch(from var(--gold-leaf) l c h / 0.45);
    border-radius: 4px;
    overflow: hidden;
}
@media (max-width: 720px) {
    .zakat-rates__row {
        grid-template-columns: repeat(2, 1fr);
    }
}
.zakat-rates__entry {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.85rem 1rem;
    border-right: 1px solid oklch(from var(--gold-leaf) l c h / 0.35);
}
.zakat-rates__entry:last-child {
    border-right: 0;
}
@media (max-width: 720px) {
    .zakat-rates__entry:nth-child(2n) {
        border-right: 0;
    }
    .zakat-rates__entry:nth-child(-n + 2) {
        border-bottom: 1px solid oklch(from var(--gold-leaf) l c h / 0.35);
    }
}
.zakat-rates__entry--featured {
    background: oklch(from var(--paper) calc(l - 0.025) c h);
}
.zakat-rates__entry-label {
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.74rem;
    color: var(--ink-soft);
    letter-spacing: 0.02em;
    line-height: 1.3;
}
.zakat-rates__entry-label strong {
    color: var(--ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-right: 0.15em;
}
.zakat-rates__entry-price {
    font-family: var(--font-en-display, "Inria Serif", Georgia, serif);
    font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
    font-weight: 400;
    line-height: 1.05;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.012em;
}
.zakat-rates__entry--featured .zakat-rates__entry-price {
    color: var(--vermillion);
}
.zakat-rates__note {
    margin: 0.85rem 0 0;
    font-family: var(--font-en-body, "Söhne", system-ui, sans-serif);
    font-size: 0.78rem;
    color: var(--ink-soft);
    line-height: 1.5;
    font-style: italic;
}

/* Dark theme: sepia + gold-leaf brighten, paper-deep tile darkens
   slightly for the featured 22k row. */
html[data-theme="dark"] .zakat-rates {
    border-top-color: oklch(from var(--gold-leaf-bright) l c h / 0.35);
    border-bottom-color: oklch(from var(--gold-leaf-bright) l c h / 0.35);
}
html[data-theme="dark"] .zakat-rates__row,
html[data-theme="dark"] .zakat-rates__entry {
    border-color: oklch(from var(--gold-leaf-bright) l c h / 0.3);
}
html[data-theme="dark"] .zakat-rates__pill {
    background: oklch(0.25 0.06 145);
    color: oklch(0.85 0.1 145);
}
html[data-theme="dark"] .zakat-rates__pill--static {
    background: oklch(0.22 0.005 80);
    color: var(--ink-soft);
}
html[data-theme="dark"] .zakat-rates__entry--featured {
    background: oklch(from var(--paper) calc(l + 0.035) c h);
}

/* Manuscript marginal note: the "To note" aside inside the wizard's
   business-assets step. Replaces the earlier vermillion-boxed callout
   (a UI footgun: vermillion is brand-reserved for chapter heads, and
   the 2px border read as an error).

   Anatomy follows the DESIGN.md manuscript-panel pattern:
     1px gold-leaf hairline above → ledger rule
     small-caps sepia eyebrow + tiny gold-leaf info glyph
     indigo-ink body, key phrase in sepia italic for emphasis
     no border-box, no shadow, no corner radius
     vertical breath sets the panel apart, not chrome
*/
/* The asset-head above already provides a dashed border-bottom; a
   second hairline on the aside reads as a stacked double-line. The
   internal __rule (gradient gold-leaf line inside the head) still
   marks this as a manuscript marginal aside, so we keep that and
   drop only the external top border. */
.zakat-asset-note {
    margin: 0 0 1.25rem;
    padding: 0;
    max-width: 62ch;
}
.zakat-asset-note__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}
.zakat-asset-note__glyph {
    flex: 0 0 auto;
    color: var(--gold-leaf);
    opacity: 0.95;
}
.zakat-asset-note__eyebrow {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sepia);
}
.zakat-asset-note__rule {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(
        90deg,
        oklch(from var(--gold-leaf) l c h / 0.45) 0%,
        oklch(from var(--gold-leaf) l c h / 0) 100%
    );
    margin-left: 0.35rem;
}
.zakat-asset-note__body {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.65;
    color: var(--ink);
}
.zakat-asset-note__body strong {
    font-weight: 600;
    color: var(--ink);
}
.zakat-asset-note__body em {
    font-style: italic;
    font-weight: 500;
    color: var(--sepia);
}

/* Legacy class kept around in case any other template still uses it.
   Renders silently as the new manuscript pattern by aliasing rules.
   Will be removed when the audit confirms no live references. */
.zakat-business-assets-callout {
    border: none;
    border-top: 1px solid oklch(from var(--gold-leaf) l c h / 0.55);
    border-radius: 0;
    padding: 0.85rem 0 0;
    background: transparent;
    max-width: 62ch;
    margin: 1.5rem 0 1.25rem;
}
.zakat-business-assets-callout__heading {
    margin: 0 0 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sepia);
}
.zakat-business-assets-callout__body {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.65;
    color: var(--ink);
}

.nisab-wizard__eligibility-note {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--cream-light, #fdfaf2);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.nisab-wizard__eligibility-heading {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}
.nisab-wizard__eligibility-body {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink);
}

html[data-theme="dark"] .zakat-page__rates {
    background: var(--paper);
    border-bottom-color: var(--line);
}
html[data-theme="dark"] .zakat-rates-card,
html[data-theme="dark"] .nisab-wizard__eligibility-note {
    background: var(--cream);
    border-color: var(--line);
    color: var(--ink);
}
html[data-theme="dark"] .zakat-asset-note,
html[data-theme="dark"] .zakat-business-assets-callout {
    background: transparent;
    color: var(--ink);
    /* Dark theme: gold-leaf brightens per DESIGN.md, sepia softens
       (eyebrow already reads against the inverted ink). The hairline
       picks up the brighter gold-leaf token automatically via the
       CSS variable inheritance. */
}
html[data-theme="dark"] .zakat-asset-note__glyph {
    color: var(--gold-leaf-bright);
}
html[data-theme="dark"] .zakat-asset-note__eyebrow {
    color: var(--sepia-soft);
}
html[data-theme="dark"] .zakat-asset-note__body em {
    color: var(--sepia-soft);
}

/* ------------------------------------------------------------------
   Round 2 (2026-05): Zakat surface rebuild.
   - .zakat-page__rates / .zakat-rates-card: karat reference panel
     (gold 24k/22k/18k + silver per-gram), sits beneath the educational
     explainers and above the wizard. Display-only helpers; underlying
     nisab maths still uses 24k spot.
   - .zakat-business-assets-callout: vermillion-bordered notice that
     equipment/vehicles/premises are NOT Zakat-eligible. Matches the
     existing Sadaqah Jariyah callout pattern so donors recognise the
     visual language.
   - .nisab-wizard__eligibility-note: simple "where your Zakat goes"
     note that renders when show_allocation is off (now the default).
   ------------------------------------------------------------------ */
.zakat-page__rates {
    padding: 2.5rem 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}
.zakat-rates-card {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.75rem 2rem;
    box-shadow: 0 2px 8px oklch(from var(--ink) l c h / 0.05);
}
.zakat-rates-card__head {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}
.zakat-rates-card__title {
    margin: 0 0 .25rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
}
.zakat-rates-card__source {
    margin: 0;
    font-size: .85rem;
    color: var(--ink-soft);
}
.zakat-rates-card__freshness {
    opacity: .8;
}
.zakat-rates-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
}
@media (max-width: 540px) {
    .zakat-rates-card__grid {
        grid-template-columns: 1fr;
    }
}
.zakat-rates-table h3 {
    margin: 0 0 .5rem;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-soft);
    font-weight: 600;
}
.zakat-rates-table table {
    width: 100%;
}

/* Phones: the photo pushed the calculator a full screen down (Oct 2026). */
@media (max-width: 720px) {
    .zakat-page__hero-figure { display: none; }
}