/* Riwaq public and entry-lifecycle surfaces: the masjid directory (/find-masjids), a masjid's
   public profile (/masjids/{slug}), a published course (/courses/{slug}), the product page,
   questions (/help), Amanah (/privacy), contact and legal (/legal), masjid registration
   (/register), student registration (/register-student), the shared class link (/join), the
   invitation screen (/invitation) and the safe refusal (/not-found).
   Every colour is a shared rw pair from the foundation; layout is by named contract (page
   gutter, panel inset, field stack, row density). Loaded after riwaq-peopleadmin.css.

   PUBLIC PRIVACY IS A LAYOUT FACT TOO: nothing here draws a surface for data the pages do not
   already render — the directory and profile show only what an organization published, and the
   refusal screens are dressed exactly as the one sentence they carry.

   An interactive element may shed its min width (`min-inline-size: 0`) ONLY where the same
   rule guarantees the press another way — never as a bare reset, so no target falls below
   `--rw-target-min`. That pairing keeps the zero-specificity width-reset trap documented in
   riwaq-bespoke.css disarmed.

   This sheet is scanned by the same mechanical compensation guard as the other page sheets
   (QuizLibraryStylesheetTests.A_selected_state_gives_back_the_borders_growth); it currently
   writes no selected-state vocabulary at all — public pages select nothing — so the guard
   holds an empty set here until a rule earns membership. */

/* ── Shared public vocabulary ───────────────────────────────────────────────────────── */

/* The kit's block-button modifier gains its first rule product-wide here. Written unscoped on
   purpose: Login, CreateAccount and SetPassword spell the same class (Task 2's surfaces), and
   a full-width primary action is what the entry boards draw on all of them — one rule, not a
   per-area copy. The public matrix that photographs those routes is rerun for this line
   (task-6-report.md). */
.ic-btn--block { inline-size: 100%; }

/* Prose destinations remain individually operable at the product target size — the same rule
   riwaq-bespoke.css states for the auth pages, restated here because these pages' links are
   this sheet's responsibility. Scoped to the public shells so no signed-in surface is touched. */
.ic-directory a, .ic-masjidprofile a, .ic-course a, .ic-help a, .ic-amanahpage a,
.ic-legal a, .ic-product a, .ic-regform a, .ic-invite a, .ic-notfound a {
    display: inline-flex; align-items: center; min-block-size: var(--rw-target-min); min-inline-size: var(--rw-target-min);
}

/* Localized copy on entry surfaces may shrink with the column at 200% text size. Interactive
   elements are deliberately NOT in this list (the width-reset trap): they wrap instead. */
.ic-directory :where(div, p, span, header, li, bdi), .ic-masjidprofile :where(div, p, span, header, section, aside, bdi),
.ic-course :where(div, p, span, header, section, aside, dt, dd, li, bdi), .ic-invite :where(div, p, span, header, bdi),
.ic-regform :where(div, p, span, header, bdi), .ic-notfound :where(div, p, bdi),
.ic-help :where(div, p, header, article, nav, bdi), .ic-amanahpage :where(div, p, header, nav, section, span),
.ic-legal :where(div, p, header, section), .ic-product :where(div, p, header, section, article, span, dt, dd) {
    min-inline-size: 0; overflow-wrap: anywhere;
}
.ic-directory .ic-btn, .ic-masjidprofile .ic-btn, .ic-course .ic-btn, .ic-invite .ic-btn,
.ic-regform .ic-btn, .ic-notfound .ic-btn, .ic-amanahpage .ic-btn, .ic-product .ic-btn,
.ic-help .ic-help__clear { white-space: normal; max-inline-size: 100%; overflow-wrap: anywhere; }

/* ── The directory (/find-masjids) ──────────────────────────────────────────────────── */

/* A record list on the public measure every other public page reads at (public-pages redesign,
   2026-09-26), with the public title at display size. It stays the product's one public
   register: a record table on the collection sheet (C-17), not a card grid (A05). */
.ic-directory { min-inline-size: 0; }
.ic-directory__inner { max-inline-size: var(--rw-land-measure); margin-inline: auto; display: grid; gap: var(--rw-space-6); }
.ic-directory__head { display: grid; gap: var(--rw-space-3); padding-block: clamp(.5rem, 2vw, 1.5rem) var(--rw-space-2); }
.ic-directory__head h1 { font-size: clamp(2.25rem, 1.35rem + 2.9vw, 3.5rem); line-height: 1.05; letter-spacing: -.01em; }
:lang(ar) .ic-directory__head h1, :lang(ur) .ic-directory__head h1 { line-height: var(--rw-leading-arabic-display); letter-spacing: 0; }
/* The directory's prose reads at the prose measure wherever it appears: the empty states'
   sentences, the summary line, and the listing note at the foot of the list -- which is where
   the page's contract with masajid moved when the head stopped opening with a policy statement. */
.ic-directory__none p, .ic-directory__count { max-inline-size: var(--rw-reading-measure); }
.ic-directory__filters { display: flex; flex-wrap: wrap; gap: var(--rw-space-3); align-items: end; }
/* The fields shed their min width because the flex basis guarantees the press: each grows
   from a readable floor and wraps whole onto its own line at 320. */
.ic-directory__searchfield { flex: 1 1 16rem; min-inline-size: 0; display: grid; gap: var(--rw-label-gap); }
.ic-directory__countryfield { flex: 1 1 12rem; min-inline-size: 0; display: grid; gap: var(--rw-label-gap); }
.ic-directory__srlabel { font-weight: 600; }
.ic-directory__count { color: var(--rw-ink-muted); }
/* RECOMPOSED, RECORDED DESIGN-AUTHORITY DECISION (owner, 2026-09-07). The directory was the one
   collection in the product that hand-rolled its own row list, and the cost was the thing the
   collection family names first: the row's only door was a "View masjid →" link at the far end,
   so identity was not what opened the record. It draws RecordTable now, like the other
   twenty-four, so the name is the first column and is the link, and every cell carries the
   data-label that keeps a row readable once it becomes a card. `.ic-directory__row`, `__body`,
   `__name`, `__meta`, `__view` and `__list` went with it; the identity cell is all that is left
   for this sheet to say. Family artifact:
   claude.ai/code/artifact/a4ece786-8f6f-428d-8718-c379b557bb70. */
.ic-directory__ident { display: flex; align-items: center; gap: var(--rw-space-3); min-inline-size: 0; }
/* A masjid's mark is a seal: round and brass-edged, recessed into the sheet, so a logo and an
   initial read as the same kind of thing. Still the masjid's own mark or a labelled placeholder,
   never this product's (RecordedDefectTests' paid AynMark row); the initial is aria-hidden
   decoration beside the name. */
.ic-directory__logo { display: grid; place-items: center; inline-size: var(--rw-target-min); block-size: var(--rw-target-min); flex: none; border: 1px solid var(--rw-line-accent); border-radius: var(--rw-radius-pill); background: var(--rw-ground-2); overflow: hidden; overflow-wrap: normal; }
/* CLAMPED WITH A LENGTH, NOT A PERCENTAGE -- and the difference was a blown-out row. This read
   `max-block-size: 100%`, which looks like a clamp and is not one: the percentage resolves against
   the grid row track, and that track is `auto`, sized by the image itself. So a tall mark was
   measured against its own height and kept it. Lengths resolve against nothing, and this one is
   small enough that a square mark's corners stay inside the round seal. */
.ic-directory__logo img { max-inline-size: calc(var(--rw-target-min) * .7); max-block-size: calc(var(--rw-target-min) * .7); object-fit: contain; }
/* THE MASJID'S OWN INITIAL, where the words "NO LOGO" used to be, sized and weighted as a mark
   rather than as text. The name's own case is kept, so no text-transform here. */
.ic-directory__monogram { font-family: var(--rw-font-display); font-size: var(--rw-text-lead); line-height: 1; color: var(--rw-accent-text); text-align: center; }
/* The name is the row's identity and its door, in the display face; linked, it carries the resting
   brass underline every public door wears. */
.ic-directory .ic-directory__ident .ic-table__name { font-family: var(--rw-font-display); font-weight: 400; font-synthesis: none; font-size: 1.1875rem; line-height: 1.3; }
.ic-directory .ic-directory__ident .ic-table__name a { color: var(--rw-ink); text-decoration: underline; text-decoration-color: var(--rw-accent-border); text-decoration-thickness: 1px; text-underline-offset: .3em; }
.ic-directory .ic-directory__ident .ic-table__name a:hover { text-decoration-thickness: 2px; }
/* The name and the town each get the room to stay whole: the identity column takes its share first,
   the town keeps to one line on a desk, and the masjid's own sentence reads in what is left,
   unclamped, because a masjid without a page has nowhere else it could be read. */
@media (min-width: 64rem) {
    .ic-directory .ic-table th[data-priority="identity"] { inline-size: 36%; }
    .ic-directory .ic-table td[data-priority="primary"] { white-space: nowrap; }
}
.ic-directory .ic-table td[data-priority="secondary"] { color: var(--rw-ink-muted); }
/* WHO IS IN THIS LIST, at the foot rather than in the head: the sentence answers a question a
   reader has after failing to find their masjid, not before searching for it. A footnote with the
   family's diamond, and beside it the one act open to a masjid that is not in the list yet. */
.ic-directory__note { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rw-space-2) var(--rw-space-6); padding-block-start: var(--rw-space-2); }
.ic-directory__note p { color: var(--rw-ink-muted); font-size: var(--rw-text-small); max-inline-size: var(--rw-reading-measure); }
.ic-directory__note > p:not(.ic-directory__notlisted) { display: flex; align-items: baseline; gap: var(--rw-space-3); }
.ic-directory__note > p:not(.ic-directory__notlisted)::before { content: ""; inline-size: .4rem; block-size: .4rem; flex: none; background: var(--rw-accent-border); rotate: 45deg; translate: 0 -.1em; }
.ic-directory__register { color: var(--rw-accent-text); font-weight: 700; text-decoration: underline; text-underline-offset: var(--rw-space-1); }
.ic-directory__register:hover { text-decoration-thickness: 2px; }
/* The two empties and the failed read wear the state family's arch rather than a tinted box of
   this page's own; these are slot names so a test or a later rule can reach exactly them, and
   the prose cap above still lands on the sentences inside. */
.ic-directory__none, .ic-directory__failed { min-inline-size: 0; }
/* Skeleton rows hold the row shape while the count is unknown; the pulse respects
   prefers-reduced-motion below. */
.ic-directory__skeleton { display: grid; gap: var(--rw-space-2); }
.ic-directory__skelrow { display: flex; align-items: center; gap: var(--rw-space-4); padding-block: var(--rw-row-padding-block); border-block-end: 1px solid var(--rw-line); }
.ic-directory__skellogo { inline-size: var(--rw-target-min); block-size: var(--rw-target-min); flex: none; border-radius: var(--rw-radius-control); background: var(--rw-ground-2); }
.ic-directory__skellines { display: grid; gap: var(--rw-space-2); flex: 1 1 auto; min-inline-size: 0; }
.ic-directory__skelline { block-size: var(--rw-space-3); inline-size: 60%; border-radius: var(--rw-radius-control); background: var(--rw-ground-2); animation: rw-skeleton 1.2s ease-in-out infinite alternate; }
.ic-directory__skelline--short { inline-size: 35%; }
/* rw-skeleton is declared once, in riwaq-components.css, where Task 7F made the skeleton a named
   member of the loading family rather than something the directory happened to own. Two identical
   @keyframes in two sheets is one of them going stale. */
@media (prefers-reduced-motion: reduce) { .ic-directory__skelline { animation: none; opacity: 1; } }
/* ── A masjid's public profile (/masjids/{slug}) ────────────────────────────────────── */

/* A PLACE, READ IN THE ORDER A FAMILY ASKS (public-pages redesign, 2026-09-26). Who this is (on
   the ground: no arch, no portico slab; the arch belongs to the home hero, and the portico to the
   door-band), then the courses it is open for, then what it chose to publish, beside them. The
   courses lead on every width because they are the reason a family arrives (A06). It supersedes
   the 2026-09-07 record composition (identity, facts, then the panel of courses), whose order the
   A06 rule contradicted. */
.ic-masjidprofile { min-inline-size: 0; }
.ic-masjidprofile__inner { max-inline-size: var(--rw-land-measure); margin-inline: auto; display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-block: clamp(.5rem, 2vw, 1.5rem) var(--rw-space-8); }

/* ONE · IDENTITY. The seal, the town as the kicker, the name at the public display size, the
   masjid's own sentence, the provenance, and the one way in at the end of the line. */
.ic-masjidprofile__ident { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--rw-space-4) clamp(1.25rem, 3vw, 2.5rem); }
/* The plate is a seal: round and brass-edged, so a logo and a pair of initials read as the same
   kind of mark. It holds the masjid's own logo, or its initials in the display face at the size a
   logo would take (A06), never a generic building and never IlmClass's own mark. */
.ic-masjidprofile__plate { display: grid; place-items: center; inline-size: 6.5rem; block-size: 6.5rem; flex: none; align-self: start; border: 1px solid var(--rw-accent-border); border-radius: var(--rw-radius-pill); background: var(--rw-surface); overflow: hidden; }
/* A length, not a percentage (see the directory seal): a square mark's corners stay inside the circle. */
.ic-masjidprofile__plate img { max-inline-size: 4.5rem; max-block-size: 4.5rem; object-fit: contain; }
.ic-masjidprofile__initials { font-family: var(--rw-font-display); font-size: 2.25rem; letter-spacing: .04em; color: var(--rw-accent-text); }
.ic-masjidprofile__who { display: grid; gap: var(--rw-space-2); min-inline-size: 0; }
.ic-masjidprofile__town { color: var(--rw-ink-muted); font-size: var(--rw-text-small); font-weight: 700; letter-spacing: .04em; }
/* A masjid's name is a proper noun: balance would split "Al-Nur" at its hyphen to even the lines. */
.ic-masjidprofile__who h1 { font-size: clamp(2.25rem, 1.35rem + 2.9vw, 3.5rem); line-height: 1.05; letter-spacing: -.01em; text-wrap: pretty; }
:lang(ar) .ic-masjidprofile__who h1, :lang(ur) .ic-masjidprofile__who h1 { line-height: var(--rw-leading-arabic-display); letter-spacing: 0; }
:lang(ar) .ic-masjidprofile__town, :lang(ur) .ic-masjidprofile__town { letter-spacing: 0; }
.ic-masjidprofile__about { font-size: 1.125rem; line-height: 1.55; color: var(--rw-ink-muted); max-inline-size: 52ch; }
.ic-masjidprofile__provenance { display: inline-flex; align-items: center; gap: var(--rw-space-2); color: var(--rw-ink-muted); font-size: var(--rw-text-small); font-weight: 600; }
.ic-masjidprofile__provenance::before { content: ""; inline-size: .4rem; block-size: .4rem; flex: none; background: var(--rw-accent-border); rotate: 45deg; }
/* The record's own action, at the end of the identity's line: it applies to the whole record. It
   wraps to its own line before the press floor is threatened. */
.ic-masjidprofile__actions { display: flex; flex-wrap: wrap; gap: var(--rw-space-3); align-items: center; }

/* TWO · THE BODY. The courses (the wider column) and the published facts beside them on a desk; the
   facts follow the courses on a phone. */
.ic-masjidprofile__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-8) clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
/* Two columns only when the masjid published facts: a name-only page reads as complete, not as a
   page with an empty column (A06). */
.ic-masjidprofile__body:has(> .ic-masjidprofile__side) { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.ic-masjidprofile__panel { display: grid; gap: var(--rw-space-4); min-inline-size: 0; }
.ic-masjidprofile__panelhead h2 { font-family: var(--rw-font-display); font-weight: 400; font-synthesis: none; font-size: var(--rw-text-title); line-height: 1.2; }
.ic-masjidprofile__courses { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rw-space-3); }
/* A course is a link tile: raised at rest, the decorative --rw-line edge (a control's boundary is
   never the soft edge), no lift. The title is the door and wears the resting brass underline; the
   whole tile answers the pointer, and the focus ring is drawn on the tile, round the whole target.
   The title link sheds its own 48px floor because its ::after makes the whole tile the press. */
.ic-masjidprofile__course { position: relative; display: grid; gap: var(--rw-space-2); padding: var(--rw-space-4) var(--rw-space-6); background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-panel); box-shadow: var(--rw-shadow-rest); min-inline-size: 0; transition: background-color var(--rw-motion-fast) var(--rw-ease-enter), border-color var(--rw-motion-fast) var(--rw-ease-enter); }
.ic-masjidprofile__course:hover { background: var(--rw-surface-hover); border-color: var(--rw-control-border); }
.ic-masjidprofile__coursetitle { font-family: var(--rw-font-display); font-weight: 400; font-size: var(--rw-text-title); line-height: 1.2; }
.ic-masjidprofile__coursetitle a { min-block-size: 0; color: var(--rw-ink); text-decoration: underline; text-decoration-color: var(--rw-accent-border); text-decoration-thickness: 1px; text-underline-offset: .25em; }
.ic-masjidprofile__course:hover .ic-masjidprofile__coursetitle a { text-decoration-thickness: 2px; }
.ic-masjidprofile__coursetitle a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rw-radius-panel); }
/* THE RING MOVES TO THE TILE, WHOLE: the base rule's exact composite (the 2px dark outline at 2px,
   then both cream bands), plus the tile's own rest shadow under them. Only where :has() exists; a
   browser without it keeps the base ring on the title link. */
@supports selector(:has(a)) {
    .ic-masjidprofile__coursetitle a:focus-visible { outline: none; box-shadow: none; }
    .ic-masjidprofile__course:has(.ic-masjidprofile__coursetitle a:focus-visible) { outline: 2px solid var(--rw-focus-dark); outline-offset: 2px; box-shadow: var(--rw-focus-bands), var(--rw-shadow-rest); }
}
.ic-masjidprofile__summary { color: var(--rw-ink-muted); max-inline-size: 60ch; }
/* When it meets and how many places are left are two facts, so two labels: the time neutral, the
   places in the opaque warning pair only when none are left, so a full course reads as full before
   anybody opens it. Static text, not controls: no border that could read as a button's. */
.ic-masjidprofile__courseline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-2); margin-block-start: var(--rw-space-1); }
.ic-masjidprofile__when, .ic-masjidprofile__places { display: inline-flex; align-items: center; padding: .2rem .7rem; border-radius: var(--rw-radius-pill); background: var(--rw-ground-2); color: var(--rw-ink); font-size: var(--rw-text-small); font-weight: 700; }
.ic-masjidprofile__places[data-places-left="0"] { background: var(--rw-warning-bg); color: var(--rw-warning-fg); }
.ic-masjidprofile__nocourses { max-inline-size: var(--rw-reading-measure); padding: var(--rw-panel-inset); background: var(--rw-ground-2); border-radius: var(--rw-radius-panel); box-shadow: var(--rw-well-shade); }
.ic-masjidprofile__note { color: var(--rw-ink-muted); font-size: var(--rw-text-small); max-inline-size: var(--rw-reading-measure); padding-inline-start: var(--rw-space-4); border-inline-start: 3px solid var(--rw-accent-border); }

/* THREE · WHAT IT PUBLISHED. FACTS ARE A DESCRIPTION LIST, NOT A TABLE AND NOT TILES: values, not
   measurements. One raised card at rest beside the courses; hairlines between the facts. */
.ic-masjidprofile__side { display: grid; gap: var(--rw-space-4); padding: var(--rw-panel-inset); background: var(--rw-surface); border: 1px solid var(--rw-edge); border-radius: var(--rw-radius-panel); box-shadow: var(--rw-shadow-rest); min-inline-size: 0; }
.ic-masjidprofile__facts { display: grid; gap: var(--rw-space-4); margin: 0; }
.ic-masjidprofile__facts > div { display: grid; gap: var(--rw-space-1); min-inline-size: 0; }
.ic-masjidprofile__facts > div + div { padding-block-start: var(--rw-space-4); border-block-start: 1px solid var(--rw-line); }
.ic-masjidprofile__facts dt { color: var(--rw-ink-muted); font-size: var(--rw-text-small); font-weight: 700; }
.ic-masjidprofile__facts dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; font-weight: 600; }
.ic-masjidprofile__published { color: var(--rw-ink-muted); font-size: var(--rw-text-small); max-inline-size: var(--rw-reading-measure); }
/* Slot names on the two states, so a test or a later rule can reach exactly them; the arch and
   its ink come from the state family. */
.ic-masjidprofile__refused, .ic-masjidprofile__failed { min-inline-size: 0; }

@media (max-width: 55rem) {
    .ic-masjidprofile__ident { grid-template-columns: auto minmax(0, 1fr); }
    .ic-masjidprofile__actions { grid-column: 2; }
    .ic-masjidprofile__body:has(> .ic-masjidprofile__side) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
    .ic-masjidprofile__ident { grid-template-columns: minmax(0, 1fr); }
    .ic-masjidprofile__actions { grid-column: 1; }
    .ic-masjidprofile__plate { inline-size: 4.5rem; block-size: 4.5rem; }
    .ic-masjidprofile__plate img { max-inline-size: 3rem; max-block-size: 3rem; }
    .ic-masjidprofile__initials { font-size: 1.625rem; }
    .ic-masjidprofile__actions .ic-btn { flex: 1 1 100%; }
    .ic-masjidprofile__course { padding: var(--rw-space-4); }
}
/* ── A published course (/courses/{slug}) ───────────────────────────────────────────── */

.ic-course { min-inline-size: 0; }
.ic-course__ident { display: block; }
/* The hover underlines the link itself rather than reaching into OrgIdentity's own block —
   BrandCombinationTests keeps the identity vocabulary claimed by exactly the component and
   the shell, and an anchor's decoration does not propagate into the atomic inline-level
   monogram box, so only the name text underlines anyway. */
.ic-course__masjidlink { color: inherit; text-decoration: none; }
.ic-course__masjidlink:hover { text-decoration: underline; text-underline-offset: var(--rw-space-1); }
/* RECOMPOSED, RECORDED REVERSAL (public-pages redesign, 2026-09-26), superseding "ONE COLUMN, NOT
   TWO" (owner, 2026-09-07). That decision fixed a real fault: the sidebar came BEFORE the course
   on a desk and AFTER all of it on a phone, two documents from one markup. This composition keeps
   the fix and drops the cost: the DOM reads lede, then the course card (its facts and the way in),
   then the panels, on every width; on a desk the card simply stands beside the reading column
   instead of under it. The action moved from the identity into the card's entry section, directly
   under the sentence that says whether the course is taking anybody, so nobody presses before
   reading why. It stays a pill at its own size, not a block button. */
.ic-course__inner { max-inline-size: var(--rw-land-measure); margin-inline: auto; display: grid; gap: var(--rw-space-8); padding-block: clamp(.5rem, 2vw, 1.5rem) var(--rw-space-8); }
.ic-course__head { display: grid; gap: var(--rw-space-3); justify-items: start; }
.ic-course__head .ic-course__ident { margin-block-end: var(--rw-space-2); }
.ic-course__head h1 { font-size: clamp(2.25rem, 1.35rem + 2.9vw, 3.75rem); line-height: 1.05; letter-spacing: -.01em; text-wrap: pretty; }
:lang(ar) .ic-course__head h1, :lang(ur) .ic-course__head h1 { line-height: var(--rw-leading-arabic-display); letter-spacing: 0; }

/* The body: the reading column and the card. Three auto rows for the column and a last 1fr row the
   card alone spans into, so a card taller than the column never pulls the panels apart. */
.ic-course__body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 1fr); grid-template-rows: auto auto auto 1fr; gap: var(--rw-space-8) clamp(2rem, 5vw, 4.5rem); align-items: start; }
.ic-course__body > :not(.ic-course__card) { grid-column: 1; }
.ic-course__card { grid-column: 2; grid-row: 1 / -1; }
.ic-course__lede { font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem); line-height: 1.55; max-inline-size: 36rem; }

/* What you will learn: the masjid's own outcomes, one per line, each on the family's brass diamond. */
.ic-course__panel { display: grid; gap: var(--rw-space-3); min-inline-size: 0; }
.ic-course__panel h2 { font-family: var(--rw-font-display); font-weight: 400; font-synthesis: none; font-size: var(--rw-text-title); line-height: 1.2; }
.ic-course__panel p { max-inline-size: var(--rw-reading-measure); }
.ic-course__outcomes { list-style: none; margin: 0; padding: 0; display: grid; max-inline-size: 38rem; }
.ic-course__outcomes li { display: flex; align-items: baseline; gap: var(--rw-space-3); padding-block: var(--rw-space-3); border-block-end: 1px solid var(--rw-line); font-size: 1.0625rem; }
.ic-course__outcomes li:last-child { border-block-end: 0; }
.ic-course__outcomes li::before { content: ""; flex: none; inline-size: .45rem; block-size: .45rem; background: var(--rw-accent-border); rotate: 45deg; translate: 0 -.15em; }
/* Before you apply is a condition, so it reads as one: the promise stripe the registration forms use,
   on a recessed well (read, not acted on). */
.ic-course__before { padding: var(--rw-space-4) var(--rw-space-6); background: var(--rw-ground-2); border-inline-start: 3px solid var(--rw-accent-border); border-start-end-radius: var(--rw-radius-control); border-end-end-radius: var(--rw-radius-control); box-shadow: var(--rw-well-shade); max-inline-size: 38rem; }
.ic-course__before h2 { font-family: var(--rw-font-body); font-weight: 800; font-size: var(--rw-text-body); }

/* The course card: raised at rest, the whole card the raised object (it supersedes depth spec U-1,
   which raised the entry section alone). Its facts first, then the way in; the entry section
   inside it stays flat, so there is no card in a card. */
.ic-course__card { display: grid; gap: var(--rw-space-6); padding: var(--rw-panel-inset); background: var(--rw-surface); border: 1px solid var(--rw-edge); border-radius: var(--rw-radius-frame); box-shadow: var(--rw-shadow-rest); --rw-hover-ground: var(--rw-surface-hover); min-inline-size: 0; }
.ic-course__facts { display: grid; margin: 0; }
.ic-course__fact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--rw-space-3); align-items: baseline; padding-block: var(--rw-space-3); border-block-end: 1px solid var(--rw-line); }
.ic-course__fact:first-child { padding-block-start: 0; }
.ic-course__fact dt { color: var(--rw-ink-muted); font-size: var(--rw-text-small); font-weight: 700; }
.ic-course__fact dd { margin: 0; font-weight: 700; text-align: end; }
.ic-course__entry { display: grid; gap: var(--rw-space-3); min-inline-size: 0; }
.ic-course__entry h2 { font-family: var(--rw-font-display); font-weight: 400; font-synthesis: none; font-size: var(--rw-text-lead); line-height: 1.3; }
.ic-course__places { font-weight: 700; }
.ic-course__closed, .ic-course__mine { max-inline-size: var(--rw-reading-measure); }
.ic-course__actions { display: grid; gap: var(--rw-space-3); justify-items: start; margin-block-start: var(--rw-space-2); }
.ic-course__note { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }

/* Below a desk the card follows the lede, which is where the DOM already has it. */
@media (max-width: 60rem) {
    .ic-course__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--rw-space-6); }
    .ic-course__body > :not(.ic-course__card), .ic-course__card { grid-column: 1; grid-row: auto; }
}
@media (max-width: 30rem) {
    .ic-course__fact { grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-1); }
    .ic-course__fact dd { text-align: start; }
    .ic-course__actions .ic-btn { justify-self: stretch; }
}
/* ── Questions (/help) ──────────────────────────────────────────────────────────────── */

/* RECOMPOSED (public-pages redesign, 2026-09-26). Questions read like the landing's FAQ, and the
   page spends the width it has: it reads at the public measure, not the reader's single column.
   The search leads, beside the title. Each group's head (who is asking) holds the start column
   and stays in view while its answers scroll; its answers sit on ONE raised sheet, the landing
   FAQ's plane, never a card per answer. Every answer keeps its id. */
.ic-help { max-inline-size: var(--rw-land-measure); margin-inline: auto; display: grid; gap: clamp(2.5rem, 5vw, 4rem); min-inline-size: 0; padding-block: clamp(.5rem, 2vw, 1.5rem) var(--rw-space-8); }
.ic-help__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); align-items: end; gap: var(--rw-space-4) clamp(2rem, 5vw, 4.5rem); }
.ic-help__head h1 { font-size: clamp(2.25rem, 1.35rem + 2.9vw, 3.5rem); line-height: 1.05; letter-spacing: -.01em; }
:lang(ar) .ic-help__head h1, :lang(ur) .ic-help__head h1 { line-height: var(--rw-leading-arabic-display); letter-spacing: 0; }
.ic-help__searchfield { display: grid; gap: var(--rw-label-gap); justify-items: stretch; min-inline-size: 0; }
.ic-help__searchlabel { font-weight: 600; }
.ic-help__search { min-block-size: var(--rw-target-min); padding: var(--rw-space-2) var(--rw-space-3); border: 1px solid var(--rw-control-border); border-radius: var(--rw-radius-control); background: var(--rw-surface); color: var(--rw-ink); font: inherit; inline-size: 100%; max-inline-size: var(--rw-field-measure); transition: background-color var(--rw-motion-fast) var(--rw-ease-enter), border-color var(--rw-motion-fast) var(--rw-ease-enter); }
/* Base's input rule (0,3,1) overrode the field's own measure; this ties it at (0,3,1) and wins on
   order. The page's one field takes its column now, a step taller than a form field because it
   is the page's first act. The transition stays on the (0,1,0) rule above so the theme crossfade
   (0,1,1) still outranks it. The one public field with no hover gets the kit's (ink 13.21 / 8.48). */
.ic-help__searchfield input.ic-help__search:not([type="hidden"]) { max-inline-size: none; min-block-size: 3.25rem; padding-inline: var(--rw-space-4); font-size: 1.0625rem; }
.ic-help__search:hover { background: var(--rw-surface-hover); }
.ic-help__group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); align-items: start; gap: var(--rw-space-6) clamp(2rem, 5vw, 4.5rem); }
.ic-help__grouphead { display: grid; gap: var(--rw-space-2); align-content: start; }
.ic-help__grouphead h2 { font-family: var(--rw-font-display); font-weight: 400; font-synthesis: none; font-size: var(--rw-text-heading); line-height: 1.1; }
:lang(ar) .ic-help__grouphead h2, :lang(ur) .ic-help__grouphead h2 { line-height: var(--rw-leading-arabic-display); }
/* Sticky only where the viewport is wide AND tall enough to hold the head whole. */
@media (min-width: 55.01rem) and (min-height: 40rem) {
    .ic-help__grouphead { position: sticky; inset-block-start: var(--rw-space-6); }
}
/* Questions are set in Mulish 700, not the display face: Marcellus wraps badly in long Danish and
   German compounds. */
.ic-help__answers { display: grid; padding-inline: var(--rw-panel-inset); background: var(--rw-surface); border: 1px solid var(--rw-edge); border-radius: var(--rw-radius-panel); box-shadow: var(--rw-shadow-rest); --rw-hover-ground: var(--rw-surface-hover); min-inline-size: 0; }
.ic-help__answer { display: grid; gap: var(--rw-space-2); padding-block: var(--rw-space-6); border-block-start: 1px solid var(--rw-line); scroll-margin-block-start: var(--rw-space-6); }
.ic-help__answer:first-child { border-block-start: 0; }
.ic-help__answer h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.35; }
.ic-help__answer p { color: var(--rw-ink-muted); }
/* A slot name on the filtered empty, so a test or a later rule can reach exactly it; the arch
   and its ink come from the state family. */
.ic-help__noresults { min-inline-size: 0; }
.ic-help__noresultsnote { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
/* A button doing link work keeps link clothes: the surrounding sentence explains it, and a
   bordered control mid-paragraph would read as a form. The press floor still applies. */
.ic-help__clear { display: inline-flex; align-items: center; min-block-size: var(--rw-target-min); min-inline-size: var(--rw-target-min); padding: 0; border: 0; background: none; color: var(--rw-accent-text); font: inherit; text-decoration: underline; text-underline-offset: var(--rw-space-1); cursor: pointer; }
/* Prose is capped everywhere it appears. */
.ic-help p { max-inline-size: var(--rw-reading-measure); }

@media (max-width: 55rem) {
    .ic-help__head, .ic-help__group { grid-template-columns: minmax(0, 1fr); }
}
/* ── Amanah (/privacy) ──────────────────────────────────────────────────────────────── */

.ic-amanahpage { max-inline-size: var(--rw-reader-measure); margin-inline: auto; display: grid; gap: var(--rw-space-8); min-inline-size: 0; }
.ic-amanahpage p { max-inline-size: var(--rw-reading-measure); }
.ic-amanahpage__head { display: grid; gap: var(--rw-space-4); }
.ic-amanahpage__intro { font-size: var(--rw-text-lead); }
.ic-amanahpage__contents { display: grid; gap: var(--rw-space-1); justify-items: start; }
.ic-amanahpage__contentslabel { color: var(--rw-ink-muted); font-size: var(--rw-text-small); font-weight: 700; letter-spacing: .04em; }
.ic-amanahpage__claim { display: grid; gap: var(--rw-space-3); padding-block-start: var(--rw-space-6); border-block-start: 1px solid var(--rw-line); }
/* The lead claim wears the quiet niche edge the public hero established: the page's one
   emphasis, and an accent border rather than a colour that could read as status. */
.ic-amanahpage__claim--lead { border-block-start: 3px solid var(--rw-accent-border); }
.ic-amanahpage__aside { padding: var(--rw-panel-inset); background: var(--rw-info-bg); color: var(--rw-info-fg); border-radius: var(--rw-radius-panel); max-inline-size: var(--rw-reading-measure); }
.ic-amanahpage__actions { display: flex; flex-wrap: wrap; gap: var(--rw-space-3); }
.ic-amanahpage__note { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }

/* ── Contact and legal (/legal) ─────────────────────────────────────────────────────── */

/* RECOMPOSED (public-pages redesign, 2026-09-26). The two routes are the page's decision, so they
   lead as a raised pair, and the address sits inside "Ask us", where a reader is when they want
   it: a recessed well with the address as its one large line. The four documents follow as
   ledger rows at the prose measure, every word kept. */
.ic-legal { max-inline-size: var(--rw-land-measure); margin-inline: auto; display: grid; gap: clamp(2.5rem, 4vw, 3.5rem); min-inline-size: 0; padding-block: clamp(.5rem, 2vw, 1.5rem) var(--rw-space-8); container: legal / inline-size; }
.ic-legal p { max-inline-size: var(--rw-reading-measure); }
.ic-legal__head { display: grid; gap: var(--rw-space-4); }
.ic-legal__head h1 { font-size: clamp(2.25rem, 1.35rem + 2.9vw, 3.5rem); line-height: 1.05; letter-spacing: -.01em; }
:lang(ar) .ic-legal__head h1, :lang(ur) .ic-legal__head h1 { line-height: var(--rw-leading-arabic-display); letter-spacing: 0; }
.ic-legal__head p { font-size: 1.125rem; color: var(--rw-ink-muted); }
.ic-legal__routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rw-space-4); align-items: start; }
.ic-legal__route { display: grid; gap: var(--rw-space-3); align-content: start; padding: clamp(1.25rem, 3vw, 2rem); background: var(--rw-surface); border: 1px solid var(--rw-edge); border-radius: var(--rw-radius-frame); box-shadow: var(--rw-shadow-rest); --rw-hover-ground: var(--rw-surface-hover); }
/* The masjid route leads: most questions belong there, and the accent edge says so without
   colour-as-status. */
.ic-legal__route--masjid { border-inline-start: 3px solid var(--rw-accent-border); }
.ic-legal__route h2 { font-family: var(--rw-font-display); font-weight: 400; font-synthesis: none; font-size: var(--rw-text-title); line-height: 1.2; }
.ic-legal__route > p { color: var(--rw-ink-muted); }
/* A reading panel is a well: the recess's faint shade under its top edge. */
.ic-legal__contact { display: grid; gap: var(--rw-space-2); margin-block-start: var(--rw-space-3); padding: var(--rw-space-4); background: var(--rw-ground-2); border-radius: var(--rw-radius-panel); box-shadow: var(--rw-well-shade); }
.ic-legal__contact > p:not(.ic-legal__email) { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
/* An email address is an LTR structured identifier in every script; the line itself follows the
   page, so in Arabic and Urdu it starts at the right like every other line. */
.ic-legal__email { font-size: var(--rw-text-lead); font-weight: 700; }
.ic-legal__email a { direction: ltr; unicode-bidi: isolate; }
.ic-legal__docs { display: grid; border-block-start: 1px solid var(--rw-line); }
.ic-legal__doc { display: grid; gap: var(--rw-space-3) var(--rw-space-12); padding-block: var(--rw-space-8); border-block-end: 1px solid var(--rw-line); scroll-margin-block-start: var(--rw-space-8); }
.ic-legal__doc h2 { font-family: var(--rw-font-display); font-weight: 400; font-synthesis: none; font-size: var(--rw-text-title); line-height: 1.25; }
:lang(ar) .ic-legal__doc h2, :lang(ur) .ic-legal__doc h2 { line-height: var(--rw-leading-arabic-display); }
.ic-legal__docbody { display: grid; gap: var(--rw-space-3); justify-items: start; min-inline-size: 0; }
.ic-legal__docbody p { color: var(--rw-ink-muted); }
/* The page's own width decides (container queries follow the reader's text size): the ledger rows
   pair only where a document's name has room to stay whole, and the routes stack before they cramp. */
@container legal (min-width: 60rem) {
    .ic-legal__doc { grid-template-columns: minmax(0, min(20rem, 30%)) minmax(0, 1fr); }
}
@container legal (max-width: 44rem) {
    .ic-legal__routes { grid-template-columns: minmax(0, 1fr); }
}
/* ── The product page (/product) ────────────────────────────────────────────────────── */

/* RECOMPOSED AGAIN, PRODUCT-LED (public-pages redesign, 2026-09-26). The page said what the product
   is in six sentences and showed none of it. It keeps the six sentences, word for word, and puts a
   picture of each screen beside its sentence: one hero that answers "what is it" and "what do I
   do", one bento of capabilities, one closing promise. The six capabilities are recessed wells and
   the pictures rest on the raised plane inside them (read-only previews: depth spec §1.2). The
   pictures draw what the product's own components draw, in its own words, and carry no caption
   (owner, 2026-09-27). It reads at the landing's measure (depth spec U-5). */
.ic-product { max-inline-size: var(--rw-land-measure); margin-inline: auto; display: grid; gap: clamp(3.5rem, 2rem + 4vw, 6rem); min-inline-size: 0; padding-block: clamp(.5rem, 2vw, 2rem) var(--rw-space-8); container: product / inline-size; }
.ic-product :where(li, h3) { min-inline-size: 0; overflow-wrap: anywhere; }

/* ONE · THE HERO. The claim on the start side; the sentence and the one decision on the end side.
   The directory is the quiet second destination: a brass-underlined link, not a second pill. */
.ic-product__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 5rem); row-gap: var(--rw-space-4); align-items: end; }
.ic-product__head > .ic-eyebrow { grid-column: 1 / -1; }
.ic-product__head h1 { grid-column: 1; font-size: clamp(2.25rem, 1.35rem + 2.9vw, 3.75rem); line-height: 1.05; letter-spacing: -.01em; }
:lang(ar) .ic-product__head h1, :lang(ur) .ic-product__head h1 { line-height: var(--rw-leading-arabic-display); letter-spacing: 0; }
.ic-product__intro { grid-column: 2; display: grid; gap: var(--rw-space-6); justify-items: start; min-inline-size: 0; padding-block-end: var(--rw-space-1); }
.ic-product__intro > p { font-size: 1.125rem; line-height: 1.6; color: var(--rw-ink-muted); max-inline-size: 34rem; }
.ic-product__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-3) var(--rw-space-6); }
.ic-product__browse { color: var(--rw-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--rw-accent-border); text-decoration-thickness: 1px; text-underline-offset: .35em; }
.ic-product__browse:hover { text-decoration-thickness: 2px; }

/* TWO · WHAT A MASJID CAN USE. The head names the band. */
.ic-product__caps { display: grid; gap: var(--rw-space-6); min-inline-size: 0; }
.ic-product__capstitle { display: grid; gap: var(--rw-space-2); min-inline-size: 0; }
.ic-product__capstitle h2 { font-family: var(--rw-font-display); font-weight: 400; font-synthesis: none; font-size: var(--rw-text-heading); line-height: 1.1; }
:lang(ar) .ic-product__capstitle h2, :lang(ur) .ic-product__capstitle h2 { line-height: var(--rw-leading-arabic-display); }

/* The bento. Twelve tracks: the register leads across seven and two rows, the queue and homework
   share the other five, and the last three split the width. A capability is a recessed well; its
   numeral is a counter, so no digit is copy. */
.ic-product__caplist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--rw-space-4); counter-reset: cap; }
.ic-product__cap { counter-increment: cap; display: grid; grid-template-rows: auto 1fr; gap: var(--rw-space-6); padding: clamp(1.25rem, 2.4vw, 2rem); background: var(--rw-ground-2); border-radius: var(--rw-radius-frame); box-shadow: var(--rw-well-shade); }
.ic-product__cap--registers { grid-column: span 7; grid-row: span 2; }
.ic-product__cap--queue, .ic-product__cap--homework { grid-column: span 5; }
.ic-product__cap--quizzes, .ic-product__cap--library, .ic-product__cap--export { grid-column: span 4; }
.ic-product__captext { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--rw-space-3); row-gap: var(--rw-space-2); align-content: start; align-items: baseline; }
.ic-product__captext::before { content: counter(cap, decimal-leading-zero); font-family: var(--rw-font-display); font-size: var(--rw-text-lead); line-height: 1; color: var(--rw-accent-text); font-variant-numeric: tabular-nums; }
.ic-product__captext h3 { font-family: var(--rw-font-display); font-weight: 400; font-synthesis: none; font-size: var(--rw-text-title); line-height: 1.2; }
.ic-product__captext p { grid-column: 2; color: var(--rw-ink-muted); max-inline-size: 58ch; }
.ic-product__cap--registers h3 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem); }
.ic-product__cap--registers .ic-product__captext p { font-size: 1.0625rem; }
:lang(ar) .ic-product__captext h3, :lang(ur) .ic-product__captext h3 { line-height: var(--rw-leading-arabic-display); }
/* The screen sits on the well's floor with the well's inset round it: whole, never cropped. */
.ic-product__stage { align-self: end; min-inline-size: 0; }

/* ── The pictures. aria-hidden illustrations in the product's own words. They draw what the real
   screens draw (the register's untouched bar and three choices, the queue's "Take it", the
   library's one meta sentence and its dead-link notice) and nothing they do not. Type is never
   under 12px, and every status is the kit's opaque pair. The raised plane at rest: a picture is a
   preview in a well, not something above the page. ── */
.ic-sample { display: grid; gap: .75rem; padding: 1rem 1.125rem 1.125rem; background: var(--rw-surface); border: 1px solid var(--rw-edge); border-radius: var(--rw-radius-panel); box-shadow: var(--rw-shadow-rest); color: var(--rw-ink); font-size: .8125rem; line-height: 1.45; text-align: start; min-inline-size: 0; }
.ic-sample__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; }
.ic-sample__kicker { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rw-accent-text); }
:lang(ar) .ic-sample__kicker, :lang(ur) .ic-sample__kicker { letter-spacing: 0; text-transform: none; font-size: .8125rem; }
.ic-sample__count { font-weight: 700; font-variant-numeric: tabular-nums; }
.ic-sample__muted { color: var(--rw-ink-muted); font-size: .75rem; }
.ic-sample__title { font-family: var(--rw-font-display); font-size: 1.125rem; line-height: 1.25; }
.ic-sample__rows { list-style: none; margin: 0; padding: 0; display: grid; }
.ic-sample__rows > li { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .625rem; min-block-size: 2.5rem; padding-block: .3rem; border-block-end: 1px solid var(--rw-line); }
.ic-sample__rows > li:last-child { border-block-end: 0; }
/* The register's own "not marked" cue: a brass bar at the row's start and the words. */
.ic-sample__rows > li.is-untouched { margin-inline-start: -.625rem; padding-inline-start: calc(.625rem - 3px); border-inline-start: 3px solid var(--rw-accent-border); }
.ic-sample__av { display: inline-grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; flex: none; border-radius: .45rem; background: var(--rw-green); color: var(--rw-on-green); font-size: .75rem; font-weight: 700; }
.ic-sample__name { flex: 1 1 auto; min-inline-size: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-sample__quiet { color: var(--rw-ink-muted); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.ic-sample__pill { display: inline-flex; align-items: center; padding: .1875rem .625rem; border-radius: var(--rw-radius-pill); font-size: .75rem; font-weight: 700; white-space: nowrap; flex: none; }
.ic-sample__pill--ok { background: var(--rw-success-bg); color: var(--rw-success-fg); }
.ic-sample__pill--warn { background: var(--rw-warning-bg); color: var(--rw-warning-fg); }
.ic-sample__pill--danger { background: var(--rw-danger-bg); color: var(--rw-danger-fg); }
.ic-sample__pill--quiet { background: var(--rw-ground-2); color: var(--rw-ink); }
.ic-sample__choice { display: flex; flex-wrap: wrap; gap: .3rem; flex-basis: 100%; padding-inline-start: 2.375rem; }
.ic-sample__choice > span { padding: .2rem .6rem; border: 1px solid var(--rw-control-border); border-radius: var(--rw-radius-control); background: var(--rw-surface); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.ic-sample__notice { display: flex; align-items: flex-start; gap: .5rem; padding: .55rem .75rem; border-radius: var(--rw-radius-control); background: var(--rw-info-bg); color: var(--rw-info-fg); font-size: .75rem; font-weight: 600; }
.ic-sample__notice svg { inline-size: 1rem; block-size: 1rem; flex: none; }
.ic-sample__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.ic-sample__btn { display: inline-flex; align-items: center; justify-content: center; justify-self: start; padding: .45rem .95rem; border: 1px solid var(--rw-accent-fill); border-radius: var(--rw-radius-pill); background: var(--rw-accent-fill); color: var(--rw-accent-ink); font-size: .75rem; font-weight: 800; }
.ic-sample__btn--quiet { background: var(--rw-surface); color: var(--rw-ink); border-color: var(--rw-control-border); font-weight: 700; }
.ic-sample__link { color: var(--rw-accent-text); font-size: .75rem; font-weight: 700; white-space: nowrap; text-decoration: underline; text-underline-offset: .2em; }
/* The register and the explained absence waiting on the masjid: a second screen beside the first. */
.ic-product__cap--registers .ic-product__stage { display: grid; grid-template-columns: minmax(0, 1fr) 15.5rem; align-items: end; }
.ic-sample--register { grid-column: 1; grid-row: 1; font-size: .9375rem; }
.ic-sample--register .ic-sample__rows > li { min-block-size: 3rem; }
.ic-sample--register .ic-sample__av { inline-size: 2rem; block-size: 2rem; }
.ic-sample--register .ic-sample__choice { padding-inline-start: 2.625rem; }
.ic-sample--review { grid-column: 2; grid-row: 1; position: relative; margin-inline-start: -1rem; margin-block-end: 3.5rem; gap: .5rem; padding: .875rem 1rem 1rem; }
.ic-sample__who { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
/* The queue: when, which class, its state, its door. */
.ic-sample__rows--queue > li { gap: .5rem .75rem; }
.ic-sample__when { display: grid; flex: 1 1 8rem; min-inline-size: 0; line-height: 1.3; }
.ic-sample__when b { font-weight: 700; }
.ic-sample__when span { color: var(--rw-ink-muted); font-size: .75rem; }
/* Quizzes: two counts and the one release. */
.ic-sample__figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.ic-sample__figure { display: grid; gap: .125rem; padding: .55rem .75rem; border: 1px solid var(--rw-line); border-radius: var(--rw-radius-control); }
.ic-sample__figure b { font-family: var(--rw-font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; color: var(--rw-green-ink); }
.ic-sample__figure--due { border-inline-start: 3px solid var(--rw-accent-border); }
/* The library: topics, then each file as the library lists it. */
.ic-sample__topics { display: flex; flex-wrap: wrap; gap: .375rem; }
.ic-sample__topics > span { padding: .15rem .6rem; border: 1px solid var(--rw-control-border); border-radius: var(--rw-radius-control); font-size: .75rem; font-weight: 600; }
.ic-sample__file { display: grid; gap: .125rem; min-inline-size: 0; padding-block: .25rem; }
.ic-sample__file > span { color: var(--rw-ink-muted); font-size: .75rem; }
.ic-sample__file > .ic-sample__deadlink { justify-self: start; margin-block-start: .25rem; padding: .25rem .5rem; border-radius: var(--rw-radius-control); background: var(--rw-warning-bg); color: var(--rw-warning-fg); font-weight: 600; }
/* Export: a document, its name, and its download. */
.ic-sample__rows--export > li { gap: .625rem; }
.ic-sample__doc { inline-size: 1.125rem; block-size: 1.125rem; flex: none; color: var(--rw-ink-muted); }
:lang(ar) .ic-sample__title, :lang(ur) .ic-sample__title { line-height: var(--rw-leading-arabic-display); }

/* THREE · THE CLOSE. The promise a masjid needs before it begins, beside the way to begin. Raised at
   rest: the page's last object, not a second hero. */
.ic-product__close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rw-space-6) var(--rw-space-8); padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--rw-surface); border: 1px solid var(--rw-edge); border-radius: var(--rw-radius-frame); box-shadow: var(--rw-shadow-rest); }
.ic-product__closecopy { display: grid; gap: var(--rw-space-2); flex: 1 1 26rem; min-inline-size: 0; }
.ic-product__closecopy h2 { font-family: var(--rw-font-display); font-weight: 400; font-synthesis: none; font-size: var(--rw-text-title); line-height: 1.2; }
:lang(ar) .ic-product__closecopy h2, :lang(ur) .ic-product__closecopy h2 { line-height: var(--rw-leading-arabic-display); }
.ic-product__closecopy p { color: var(--rw-ink-muted); max-inline-size: 60ch; }
.ic-product__close > .ic-product__cta { flex: none; }

/* THE PAGE'S OWN WIDTH DECIDES, NOT THE WINDOW'S. Container queries in rem follow the reader's text
   size, so at 200% text the bento becomes the phone list instead of squeezing six screens into
   columns a word wide (a media query in rem never moves with text-only zoom).
   Tablet: the hero stacks; two columns of capabilities, the register still across both. */
@container product (max-width: 63.99rem) {
    .ic-product__head { grid-template-columns: minmax(0, 1fr); }
    .ic-product__head h1, .ic-product__intro { grid-column: 1; }
    .ic-product__caplist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ic-product__cap--registers { grid-column: 1 / -1; grid-row: auto; }
    .ic-product__cap--queue, .ic-product__cap--homework, .ic-product__cap--quizzes, .ic-product__cap--library { grid-column: span 1; }
    .ic-product__cap--export { grid-column: 1 / -1; }
}
/* Phone: one numbered list on the ground, and one proof. The six sentences read as rows; only the
   register keeps its screen, in a well under its sentence (the other five are aria-hidden
   pictures, so hiding them hides nothing a reader of the text needs). */
@media (max-width: 47.99rem) {
    .ic-product { gap: var(--rw-section-gap); }
}
@container product (max-width: 47.99rem) {
    .ic-product__head { grid-template-columns: minmax(0, 1fr); }
    .ic-product__head h1, .ic-product__intro { grid-column: 1; }
    .ic-product__caplist { grid-template-columns: minmax(0, 1fr); gap: 0; border-block-start: 1px solid var(--rw-line); }
    .ic-product__cap, .ic-product__cap--registers, .ic-product__cap--export { grid-column: 1; grid-row: auto; gap: var(--rw-space-4); padding: var(--rw-space-6) 0; background: none; border-radius: 0; box-shadow: none; border-block-end: 1px solid var(--rw-line); }
    .ic-product__cap:not(.ic-product__cap--registers) > .ic-product__stage { display: none; }
    .ic-product__cap--registers h3 { font-size: var(--rw-text-title); }
    .ic-product__cap--registers .ic-product__captext p { font-size: inherit; }
    .ic-product__cap--registers .ic-product__stage { grid-template-columns: minmax(0, 1fr); padding: var(--rw-space-4) var(--rw-space-3); background: var(--rw-ground-2); border-radius: var(--rw-radius-frame); box-shadow: var(--rw-well-shade); }
    .ic-sample--register { font-size: .8125rem; }
    .ic-sample--review { grid-column: 1; grid-row: 2; margin: -1.25rem 0 0; margin-inline-start: 2rem; }
}
/* On a phone the closing pill takes the width, like the kit's phone actions. */
@media (max-width: 30rem) {
    .ic-product__close > .ic-product__cta, .ic-product__close > .ic-product__cta .ic-btn { flex: 1 1 100%; }
}
/* ── Registration (/register, /register-student) ────────────────────────────────────── */

/* A guided form at the form measure, centred — the shape riwaq-slices.css gives .ic-regform
   itself; the inner shell names the same token so OneMeasureTests can hold it. */
.ic-regform__inner { max-inline-size: var(--rw-form-measure); margin-inline: auto; display: grid; gap: var(--rw-space-8); min-inline-size: 0; }
/* RECOMPOSED, RECORDED DESIGN-AUTHORITY DECISION (owner, 2026-09-07). Both registration pages
   led with a heading and a covering sentence and then went straight into fields: the masjid form
   put what a masjid is agreeing to second-to-last, after thirteen questions, and kept "Nothing is
   created until we approve it" as small print beside the submit button; the learner form never
   said what pressing send did at all. Both now carry the guided-flow family's promise as
   furniture in the masthead, and the request is a named section rather than the page's remainder.
   Family artifact: claude.ai/code/artifact/f77a6150-02a1-4cca-b0be-58ee2b0bcd27. */
.ic-regform__masthead { display: grid; gap: var(--rw-space-3); }
/* THE PROMISE. The same panel the entry pages spend on the two halves of an invitation's
   promise, for the same reason: it is true of the whole flow rather than of any one control, so
   it is furniture, and it is what somebody deciding whether to begin needs before they begin.
   The stripe side stays square and the open side rounds, by logical corner, so it mirrors: the
   physical four-value radius rounded the stripe side in Arabic and squared the open one. */
.ic-regform__promise { display: grid; gap: var(--rw-space-2); padding: var(--rw-row-padding-block) var(--rw-row-padding-inline); background: var(--rw-ground-2); border-inline-start: 3px solid var(--rw-accent-border); border-radius: 0; border-start-end-radius: var(--rw-radius-control); border-end-end-radius: var(--rw-radius-control); }
.ic-regform__promiselead { font-weight: 800; }
.ic-regform__promise p { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }
.ic-regform__promiselead { color: var(--rw-ink); }
/* What the masjid takes on, and what we need in order to answer: a pair, each headed, in that
   order. One source of vertical rhythm per stack — the shell's own gap spaces them. */
.ic-regform__deal, .ic-regform__request { display: grid; gap: var(--rw-space-4); min-inline-size: 0; }
/* What the masjid agrees to is read, not acted on, so it is a well beside the lifted task. */
.ic-regform__deal { padding: var(--rw-panel-inset); background: var(--rw-ground-2); border-radius: var(--rw-radius-panel); box-shadow: var(--rw-well-shade); }
/* THE DECISION LIFTS. The depth was inverted: the sign-up sat on bare ground under a recessed
   reading panel. It is the page's one lifted object now. Inputs keep --rw-control-border (4.46 /
   3.97 on surface); .ic-regform__inner's measure is untouched. */
.ic-regform__request { padding: var(--rw-panel-inset); background: var(--rw-surface); border: 1px solid var(--rw-edge); border-radius: var(--rw-radius-panel); box-shadow: var(--rw-shadow-lift); --rw-hover-ground: var(--rw-surface-hover); }
/* A new group starts 40px down, not 24px, so it reads as a new group. Spacing, not a border: a
   rendered legend notches a border-block-start. */
.ic-regform__request .ic-form-stack > .ic-fieldset ~ .ic-fieldset { margin-block-start: var(--rw-space-4); }
/* THE LIFT GIVES WAY WHEN THE COLUMN RUNS OUT. At 320px with doubled text the form is 8rem wide
   and the card's two 1rem insets took a quarter of it: the send pill closed into a circle round
   "anmod / ning" and hints broke mid-word. At 15rem or less the card runs to the screen's edges
   and its content sits back on the page gutter, the column it had before the lift; the surface,
   the block edges and the shadow stay. A container query, because a media query's rem is the
   browser's initial size and never sees the page's text step. The 390px phone keeps the card. */
.ic-regform { container: ic-regform / inline-size; }
@container ic-regform (max-width: 15rem) {
    .ic-regform__request { margin-inline: calc(-1 * var(--rw-page-gutter)); padding-inline: var(--rw-page-gutter); border-inline: 0; border-radius: 0; }
}
.ic-regform__deal h2, .ic-regform__request h2 { font-family: var(--rw-font-display); font-weight: 400; font-size: var(--rw-text-lead); }
/* One display step for public section heads. /privacy and /legal were Mulish 700, and the register
   h2s read smaller than their own legends. Wording is untouched. The /legal document heads and the
   /help group heads set their own step in their own blocks (public-pages redesign, 2026-09-26). */
.ic-amanahpage__claim h2, .ic-regform__deal h2, .ic-regform__request h2 {
    font-family: var(--rw-font-display); font-weight: 400; font-size: var(--rw-text-title); font-synthesis: none;
}
.ic-regform__deal p { max-inline-size: var(--rw-reading-measure); }
.ic-regform__done { display: grid; gap: var(--rw-space-4); padding: var(--rw-panel-inset); background: var(--rw-surface); border: 1px solid var(--rw-edge); border-radius: var(--rw-radius-panel); justify-items: start; box-shadow: var(--rw-shadow-rest); }
.ic-regform__donelabel { color: var(--rw-success-ink); font-size: var(--rw-text-small); font-weight: 700; letter-spacing: .04em; }
/* A reference is an LTR structured identifier in every script. */
.ic-regform__ref { direction: ltr; unicode-bidi: isolate; font-weight: 700; font-variant-numeric: tabular-nums; }
/* The receipt's emphasised values (the masjid's name, the reply address) are record values
   built inside a localized format string in @code, where <bdi> cannot be written without a
   logic change this task does not make — CSS isolation is the same bidi boundary drawn from
   the sheet instead. */
.ic-regform__done strong { unicode-bidi: isolate; }
.ic-regform__nothing { padding: var(--rw-space-4); background: var(--rw-info-bg); color: var(--rw-info-fg); border-radius: var(--rw-radius-control); }
.ic-regform__wait { display: grid; gap: var(--rw-space-2); }
.ic-regform__wait h3 { font-size: var(--rw-text-body); font-weight: 800; }
.ic-regform__wait ul { margin: 0; padding-inline-start: var(--rw-space-6); display: grid; gap: var(--rw-space-1); }
.ic-regform__consent { display: grid; gap: var(--rw-space-2); padding: var(--rw-panel-inset); background: var(--rw-ground-2); border-radius: var(--rw-radius-panel); box-shadow: var(--rw-well-shade); }
.ic-regform__consentlead { font-weight: 800; }
.ic-regform__actions { display: grid; gap: var(--rw-space-3); justify-items: start; }
/* The family's most important conversion was its smallest pill; it now spans the field column.
   Stretch is clamped by the field measure, and (0,3,0) outranks the public 100% cap. */
.ic-regform__actions > .ic-btn--primary[type="submit"] { justify-self: stretch; max-inline-size: var(--rw-field-measure); }
.ic-regform__required { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }

/* ── Masjid registration (/register): rules under the page's own modifier ─────────────────
   THE STORY BESIDE THE TASK (public-pages redesign, 2026-09-26). The page was one 42rem column
   down the middle of a desk: the promise and the deal scrolled away as the typing began. Now the
   story (the title, the promise, what a masjid agrees to) holds the start column and stays in
   view; the request beside it is the page's one lifted object, sized so the kit's 32rem field
   measure fills it. On a phone they stack in the same order. Scoped to .ic-regform--masjid
   because /register-student shares the .ic-regform vocabulary and is designed separately. */
.ic-regform--masjid { max-inline-size: var(--rw-land-measure); }
.ic-regform--masjid .ic-regform__inner { max-inline-size: var(--rw-land-measure); gap: var(--rw-space-8); padding-block: clamp(.5rem, 2vw, 1.5rem) var(--rw-space-8); }
.ic-regform--masjid .ic-regform__story { display: grid; gap: var(--rw-space-6); align-content: start; min-inline-size: 0; }
.ic-regform--masjid .ic-regform__masthead { gap: var(--rw-space-6); }
.ic-regform--masjid .ic-regform__masthead h1 { font-size: clamp(2.25rem, 1.35rem + 2.9vw, 3.5rem); line-height: 1.05; letter-spacing: -.01em; }
:lang(ar) .ic-regform--masjid .ic-regform__masthead h1, :lang(ur) .ic-regform--masjid .ic-regform__masthead h1 { line-height: var(--rw-leading-arabic-display); letter-spacing: 0; }
/* The promise is the story's second line, not a notice box: the brass inline-start rule stays (the
   family's promise mark), the tint goes because the column frames it, and its lead takes the
   display face. The square stripe has no open side left to round. */
.ic-regform--masjid .ic-regform__promise { padding: 0; padding-inline-start: var(--rw-space-4); background: none; border-radius: 0; }
.ic-regform--masjid .ic-regform__promiselead { font-family: var(--rw-font-display); font-weight: 400; font-synthesis: none; font-size: var(--rw-text-title); line-height: 1.25; }
:lang(ar) .ic-regform--masjid .ic-regform__promiselead, :lang(ur) .ic-regform--masjid .ic-regform__promiselead { line-height: var(--rw-leading-arabic-display); }
/* What the masjid agrees to is read, not acted on: a well beside the lifted task. */
.ic-regform--masjid .ic-regform__deal { gap: var(--rw-space-3); box-shadow: var(--rw-well-shade); }
.ic-regform--masjid .ic-regform__deal h2, .ic-regform--masjid .ic-regform__request > h2 { font-size: var(--rw-text-title); line-height: 1.2; }
.ic-regform--masjid .ic-regform__deal p { color: var(--rw-ink-muted); }
/* THE DECISION LIFTS, and its groups breathe. */
.ic-regform--masjid .ic-regform__request { gap: var(--rw-space-6); padding: clamp(1.25rem, 3vw, 2.25rem); background: var(--rw-surface); border: 1px solid var(--rw-edge); border-radius: var(--rw-radius-frame); box-shadow: var(--rw-shadow-lift); --rw-hover-ground: var(--rw-surface-hover); }
.ic-regform--masjid .ic-regform__request .ic-form-stack > .ic-fieldset ~ .ic-fieldset { margin-block-start: var(--rw-space-4); }
/* Two short numbers share a line where there is room; each keeps its own label, hint slot and
   validation slot. Town, address and the imam's two fields stay full width (an address at half
   width is cramped at 1000px and at 200% text). */
.ic-regform--masjid .ic-regform__pair { display: flex; flex-wrap: wrap; gap: var(--rw-field-stack) var(--rw-space-6); }
.ic-regform--masjid .ic-regform__pair > .ic-field { flex: 1 1 10rem; max-inline-size: var(--rw-short-field-measure); min-inline-size: 0; }
/* The family's most important conversion spans the field column. */
.ic-regform--masjid .ic-regform__actions > .ic-btn--primary[type="submit"] { justify-self: stretch; max-inline-size: var(--rw-field-measure); }
/* The receipt is the same raised card, and takes the request's column. */
.ic-regform--masjid .ic-regform__done { border-color: var(--rw-edge); border-radius: var(--rw-radius-frame); box-shadow: var(--rw-shadow-rest); }
@media (min-width: 64rem) {
    .ic-regform--masjid .ic-regform__inner { grid-template-columns: minmax(0, 24rem) minmax(0, 38rem); justify-content: space-between; align-items: start; column-gap: clamp(2.5rem, 5vw, 5rem); }
}
/* Sticky only where the viewport is wide AND tall enough to hold the story whole. */
@media (min-width: 64rem) and (min-height: 44rem) {
    .ic-regform--masjid .ic-regform__story { position: sticky; inset-block-start: var(--rw-space-6); }
}
/* The lift still gives way when the column runs out (the 15rem rule above), for this page's own
   radius and padding too: at 320px with doubled text the card runs to the screen's edges and its
   content sits back on the page gutter. */
@container ic-regform (max-width: 15rem) {
    .ic-regform--masjid .ic-regform__request { margin-inline: calc(-1 * var(--rw-page-gutter)); padding-inline: var(--rw-page-gutter); border-inline: 0; border-radius: 0; }
}

/* ── The invitation and the shared class link (/invitation, /join) ──────────────────── */

/* A decision screen: one column, the offer read before it is taken. The shell itself
   (.ic-invite__inner at the form measure, .ic-invite__actions) lives in riwaq-components.css
   because two pages write it — SharedShellScopeTests holds that split; this sheet adds only
   what the kit does not carry.

   RECOMPOSED, RECORDED DESIGN-AUTHORITY DECISION (owner, 2026-09-07). Both entry pages were a
   card head followed by one undifferentiated body for the offer and bare fragments for
   everything else. They are now a MASTHEAD and one of three named compositions — the offer, the
   outcome, the refusal — because those are three different things and the page was drawing two
   of them as leftovers. The guided-flow family artifact
   (claude.ai/code/artifact/f77a6150-02a1-4cca-b0be-58ee2b0bcd27) draws each of them. */
.ic-invite { min-inline-size: 0; }
/* The page's own identity, above whichever of the three stands below it. Not the card's head:
   nothing about the masthead belongs to the offer in particular. */
.ic-invite__masthead { display: grid; gap: var(--rw-space-2); }

/* The offer. One source of vertical rhythm: the section's own gap, and nothing inside it
   carries a margin. It is that page's one decision, so it lifts. */
.ic-invite__offer { display: grid; gap: var(--rw-space-6); padding: var(--rw-panel-inset); background: var(--rw-surface); border: 1px solid var(--rw-edge); border-radius: var(--rw-radius-panel); justify-items: start; box-shadow: var(--rw-shadow-lift); --rw-hover-ground: var(--rw-surface-hover); }
.ic-invite__lede { font-size: var(--rw-text-lead); max-inline-size: var(--rw-reading-measure); }
/* THE PROMISE, BOUNDED. The held place and its deadline are not two facts a reader collects one
   after another; they are the two halves of one promise, and the deadline only means anything
   beside the thing being held. One panel, one brass edge, so the eye takes them together — the
   shape the family artifact draws for the invitation's facts. The shared class link spends the
   same panel on what a link is and is not. Its corners are logical, as on the register promise. */
.ic-invite__promise { display: grid; gap: var(--rw-space-2); inline-size: 100%; min-inline-size: 0; padding: var(--rw-row-padding-block) var(--rw-row-padding-inline); background: var(--rw-ground-2); border-inline-start: 3px solid var(--rw-accent-border); border-radius: 0; border-start-end-radius: var(--rw-radius-control); border-end-end-radius: var(--rw-radius-control); }
/* The emphasised half is the one that can run out. */
.ic-invite__reserved { font-weight: 700; }
.ic-invite__expiry { color: var(--rw-ink-muted); font-size: var(--rw-text-small); max-inline-size: var(--rw-reading-measure); }

/* One shape for accepted and declined: what happened, and the one thing left to do. */
.ic-invite__outcome { display: grid; gap: var(--rw-field-stack); justify-items: start; }
.ic-invite__onward { display: flex; flex-wrap: wrap; gap: var(--rw-space-3); }

/* A REFUSAL IS NOT AN ERROR AND NOT AN EMPTY, which is why it wears the dashed arch and no red.
   Nothing went wrong: a link expired, which is what links do. The arch is the niche in outline —
   "this did not resolve", without the alarm — and it is decoration with no text, so it is
   generated content rather than an element assistive technology has to skip. The danger pair
   stays with true alerts, where a reader needs to feel the weight. */
/* A refusal is one raised card, the same as the kit's refusal states. */
.ic-invite__refusal { display: grid; justify-items: center; text-align: center; gap: var(--rw-space-3); padding: var(--rw-panel-inset); max-inline-size: var(--rw-reading-measure); margin-inline: auto; background: var(--rw-surface); border: 1px solid var(--rw-edge); border-radius: var(--rw-radius-panel); box-shadow: var(--rw-shadow-rest); }
.ic-invite__refusal::before { content: ""; inline-size: 3rem; block-size: 3.375rem; border: 2px dashed var(--rw-line-accent); border-block-end: 0; border-start-start-radius: 50% 78%; border-start-end-radius: 50% 78%; }
/* What happened, in the display face at lead size: it is the sentence the reader came for. */
.ic-invite__refusallabel { font-family: var(--rw-font-display); font-size: var(--rw-text-lead); }
/* What to do about it, quieter, because it is the second question. */
.ic-invite__refusaltext { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }

/* ── The safe refusal (/not-found) ──────────────────────────────────────────────────── */

.ic-notfound { min-inline-size: 0; }
/* The safe refusal wears the same raised card as the invitation's refusal and the kit's states. */
.ic-notfound__inner { max-inline-size: var(--rw-form-measure); margin-inline: auto; display: grid; gap: var(--rw-space-4); justify-items: start; background: var(--rw-surface); border: 1px solid var(--rw-edge); border-radius: var(--rw-radius-panel); box-shadow: var(--rw-shadow-rest); padding: var(--rw-panel-inset); }
.ic-notfound__inner p { max-inline-size: var(--rw-reading-measure); }
.ic-notfound__actions { display: flex; flex-wrap: wrap; gap: var(--rw-space-3); align-items: center; }
.ic-notfound__footnote { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
/* The help route is the quiet third beside the two buttons: a plain link, told apart from
   the surrounding prose by the accent link colour the kit's quiet actions wear. */
.ic-notfound__help { color: var(--rw-accent-text); text-decoration: underline; text-underline-offset: var(--rw-space-1); }

/* ── The brass light (public and entry pages only) ──────────────────────────────────────
   The pill's own box-shadow stays reserved for the focus bands and the kit's press composite;
   the light lives on ::after. It hides under :focus-visible (a z-index -1 child paints above its
   stacking root's shadow, so it would dim the bands), under press, disabled and busy, and it
   NEVER translates. Scoped by container rather than by shell, because a signed-in visitor sees
   these pages in the app shell. The box-shadow in its transition list is on a non-focusable
   pseudo-element and lets the light follow the theme crossfade. The busy spinner is ::before,
   so the two never share a box. */
:is(.ic-hero__actions, .ic-doorband__actions, .ic-header__actions, .ic-mobile, .ic-regform__actions, .ic-invite__actions, .ic-course__actions, .ic-masjidprofile__actions, .ic-product__cta, .ic-notfound__actions, .rw-auth) .ic-btn--primary { position: relative; isolation: isolate; }
:is(.ic-hero__actions, .ic-doorband__actions, .ic-header__actions, .ic-mobile, .ic-regform__actions, .ic-invite__actions, .ic-course__actions, .ic-masjidprofile__actions, .ic-product__cta, .ic-notfound__actions, .rw-auth) .ic-btn--primary::after {
    content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
    box-shadow: var(--rw-shadow-cta); opacity: .5; pointer-events: none;
    transition: opacity var(--rw-motion-exit) var(--rw-ease-exit), box-shadow var(--rw-motion-theme) ease;
}
:is(.ic-hero__actions, .ic-doorband__actions, .ic-header__actions, .ic-mobile, .ic-regform__actions, .ic-invite__actions, .ic-course__actions, .ic-masjidprofile__actions, .ic-product__cta, .ic-notfound__actions, .rw-auth) .ic-btn--primary:hover:not(:active):not(:focus-visible):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"])::after {
    opacity: 1; transition: opacity var(--rw-motion-enter) var(--rw-ease-enter), box-shadow var(--rw-motion-theme) ease;
}
:is(.ic-hero__actions, .ic-doorband__actions, .ic-header__actions, .ic-mobile, .ic-regform__actions, .ic-invite__actions, .ic-course__actions, .ic-masjidprofile__actions, .ic-product__cta, .ic-notfound__actions, .rw-auth) .ic-btn--primary:is(:active, :focus-visible, :disabled, [aria-disabled="true"], [aria-busy="true"])::after { opacity: 0; }

/* ── Narrow viewports ───────────────────────────────────────────────────────────────── */

@media (max-width: 48rem) {
    .ic-invite__actions .ic-btn { flex: 1 1 100%; }
}