/* Bespoke Riwaq layouts. All colour pairs and measures come from the shared foundation. */
/* ── Coming in: the concept's split auth card (owner alignment, 2026-09-06) ──
   One framed card: the deep-green brand panel (mark, verse, blurred light-mesh, arch line
   art) beside the form column, which stands on the page ground with the form itself lifted
   on it (owner, 2026-09-26; see the column rule below). The brand panel is supplementary and
   hides on phones; the h1 and every behaviour stays on the form side. */
/* SIGNING IN OWNS THE SCREEN. The concept draws this as a card because it is a specimen in a
   presentation, shown beside the loading state; in the product that card floated in the middle
   of a marketing page and filling it in felt like using a widget on a brochure. MainLayout
   gives these three routes a bare frame, and here the split takes every pixel of it — which
   means overriding the form measure this page inherits as a public page, not just adding a
   width: .ic-loginform caps itself at 42rem for a form in a column, and a full-bleed panel is
   not that. */
/* Grows to fill the bare frame's main, rather than asking for 100% of it: see the note on
   `.ic-main--bare`. The percentage was the thing that failed. */
.rw-auth { display: grid; align-content: stretch; max-inline-size: none; flex: 1 1 auto; margin-inline: 0; align-self: stretch; }
/* The frame's card clothes stay off: full-bleed leaves nothing for a radius, a border or a cast
   shadow to sit inside of. The 2026-09-06 call took the card clothes off the form as well; the
   owner reversed that part on 2026-09-26 (S5, options A and B together). A: the column is the
   page ground, not parchment. Parchment fields on a parchment column showed only as outlines,
   and a parchment card on it could not lift. B: the decision itself is the lifted card, see
   `.rw-auth .ic-loginform__panel`; the h1, lede and note stay on the ground. */
.rw-auth .ic-loginform__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: stretch; gap: 0; max-inline-size: none; min-block-size: 100%; background: var(--rw-ground); overflow: hidden; }
.rw-auth__brand { position: relative; overflow: hidden; background: var(--rw-portico); color: var(--rw-on-portico); padding: var(--rw-space-8) var(--rw-panel-inset); display: flex; flex-direction: column; justify-content: space-between; gap: var(--rw-space-12); min-inline-size: 0; }
/* The atmosphere: the concept's CSS light-mesh — two blurred radial pools, brass and green,
   both non-text atmosphere tokens like the shadow. */
.rw-auth__brand::before { content: ""; position: absolute; inset: -25%; background: radial-gradient(38% 38% at 24% 20%, var(--rw-mesh-brass), transparent 70%), radial-gradient(46% 46% at 84% 86%, var(--rw-mesh-green), transparent 72%); filter: blur(36px); }
.rw-auth__brand > * { position: relative; }
.rw-auth__brandarch { position: absolute; inset-block-end: -1.25rem; inset-inline-end: -1.25rem; inline-size: 9rem; block-size: auto; color: var(--rw-accent-on-portico); opacity: .55; }
/* The reversed lockup, not the bare mark: a person signing in is in no masjid yet, so the
   product's own name is the identity this panel can honestly carry (the concept's "reversed
   on green" cell). currentColor gives it the parchment ink; the star takes the brass fill. */
/* The mark links home. `align-self: start` because the brand panel is a column flex container and
   a link left to stretch would make the whole width of the panel clickable — a target that reaches
   the far edge of a decorative panel is a trap, not a convenience. The lockup keeps its own size,
   so the link is exactly the mark. */
.rw-auth__home { align-self: start; border-radius: var(--rw-radius-control); color: var(--rw-on-portico); }
.rw-auth__lockup { inline-size: min(11rem, 60%); block-size: auto; color: var(--rw-on-portico); }
/* The verse and its translation are ONE quotation, so they are held in one narrow column.
   Left to the panel's full width the Arabic aligned to its own right edge and the English to
   the left, and the pair read as two unrelated fragments in opposite corners. */
/* The verse stands in a mihrab: the arch frames the one thing on the panel, which is what Riwaq
   keeps the arch for. The corner arch it replaces left the panel an empty green block. */
.rw-auth__quote { position: relative; align-self: center; margin-block: auto; display: grid; align-content: end; justify-items: center; text-align: center; inline-size: min(17rem, 100%); aspect-ratio: 3 / 4; padding: var(--rw-space-8) var(--rw-space-6); }
.rw-auth__quote::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--rw-accent-on-portico); border-block-end: 0; border-radius: 8.5rem 8.5rem 0 0; opacity: .45; }
.rw-auth__brandarch { display: none; }
.rw-auth__verse { font-family: var(--rw-font-quran); font-size: 2.25rem; line-height: 1.9; color: var(--rw-accent-on-portico); margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
/* Marcellus ships no italic, so the browser synthesised an oblique ("italic must not be assumed",
   tokens.md). The translation sets upright in the body face; on-portico-muted is 7.07:1. */
.rw-auth__versetr { font-family: var(--rw-font-body); font-style: normal; letter-spacing: .02em; color: var(--rw-on-portico-muted); font-size: var(--rw-text-small); margin-block-start: var(--rw-space-2); min-inline-size: 0; overflow-wrap: anywhere; }
.rw-auth__main { display: grid; gap: var(--rw-field-stack); align-content: center; padding: var(--rw-space-8) var(--rw-panel-inset); min-inline-size: 0; }
/* A form a person fills in once holds a readable width in the middle of its panel; stretched to
   the panel, an email field ran 600px wide. */
.rw-auth .rw-auth__main > * { inline-size: 100%; max-inline-size: 28rem; justify-self: center; }
@media (min-width: 48.0625rem) { .rw-auth__main { padding-block-end: calc(var(--rw-space-8) + var(--rw-target-min) + var(--rw-space-8)); } }
.ic-loginform__head { display: grid; gap: var(--rw-space-2); align-content: start; max-inline-size: var(--rw-reading-measure); }
.rw-auth__mark { inline-size: 4.5rem; block-size: 4.5rem; color: var(--rw-accent-on-portico); }
.ic-loginform__panel { display: grid; gap: var(--rw-field-stack); min-inline-size: 0; }
/* THE DECISION LIFTS (owner, 2026-09-26, reversing the 2026-09-06 "the card clothes come off"
   for the form). On the ground column the panel is the page's one lifted object, like the
   /register request and the invitation offer; the h1, lede and "Register your masjid" note stay
   on the ground beside it. Login, CreateAccount, ForgotPassword and SetPassword all render it.
   It is a container and never takes focus; its fields keep --rw-control-border (4.46 / 3.97 on
   surface), and the Show/Hide text button tints within parchment. */
.rw-auth .ic-loginform__panel { 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); }
/* THE LIFT GIVES WAY WHEN THE COLUMN RUNS OUT, as the /register request card does (S3). At 320px
   with doubled text the column is 8rem wide, and the card's inset and border stacked inside the
   column's own inset: the form went from 256px to 190px, "Adgangsko / de" and "Anmelden" broke
   mid-word and the pill grew to four lines. At 15rem or less the card runs to the column's edges
   and its content sits back on the column's inset, the measure 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. */
.rw-auth__main { container: rw-auth / inline-size; }
@container rw-auth (max-width: 15rem) {
    .rw-auth .ic-loginform__panel { margin-inline: calc(-1 * var(--rw-panel-inset)); padding-inline: var(--rw-panel-inset); border-inline: 0; border-radius: 0; inline-size: auto; justify-self: stretch; }
}
.ic-loginform__passwordwrap { display: flex; flex-wrap: wrap; gap: var(--rw-space-2); align-items: center; }
.ic-loginform__passwordwrap .ic-input { flex: 1 1 12rem; min-inline-size: 0; }
.ic-loginform__show { min-inline-size: var(--rw-target-min); min-block-size: var(--rw-target-min); }
.ic-loginform__lede, .ic-loginform__aside, .ic-loginform__note, .ic-createaccount__resendnote { color: var(--rw-ink-muted); }
.ic-loginform__note, .ic-createaccount__reason { grid-column: 1 / -1; }
.ic-setpassword__routes { display: grid; gap: var(--rw-space-3); }
/* What to expect after the link is sent, under the confirmation and above the ways out. Muted,
   because it is the answer to "how long do I wait" rather than anything to act on now. */
.ic-forgot__after { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); margin: var(--rw-space-3) 0 var(--rw-space-4); }
/* The prompt after asking for a reset link with no address typed. Muted ink and a line of its
   own under the control that was pressed: it is a request for one more thing, and the moment it
   looks like the error banner above it, it reads as a refusal. */
.ic-loginform__needsemail { display: block; margin-block-start: var(--rw-space-2); color: var(--rw-ink-muted); }
/* Whose password this is. It sits above the field because it is the question the reader has
   before they type, not after — and the address is a block of its own so a long one wraps as a
   unit rather than breaking across the sentence that introduces it. */
.ic-setpassword__account { color: var(--rw-ink-muted); margin: 0 0 var(--rw-space-4); }
.ic-setpassword__address { display: block; color: var(--rw-ink); font-weight: 600; overflow-wrap: anywhere; }
.rw-auth .ic-createaccount__verifytitle { font-size: var(--rw-text-heading); }
/* ── The public front page (owner recomposition, 2026-09-06) ──
   The concept's own landing arc: a centred hero under the stroked double-arch line art,
   a three-feature strip divided by hairlines, one showcase moment (the sample register,
   in the concept's card language), the amanah band, and a closing door-band on the
   portico green. The old flow's niche/replaces/volunteers vocabulary is gone with its
   sections. Two border weights only (1px and 3px solid) — the arch is stroke, not
   border — and every colour is a token pair. */
.rw-land__hero { position: relative; overflow: hidden; text-align: center; padding-block: var(--rw-space-8) var(--rw-space-12); }
/* The arch is architecture behind the words, so its legs fade rather than stop: drawn to the
   hero's edge they met the feature strip's rule in a hard T and read as a stray graphic
   instead of a portico. The concept's own words for the lattice — present, never loud.
   Centred without a direction: an inline-start of 50% plus translateX(-50%) resolved in Arabic
   to the far side plus a shove the wrong way, so the arch sat a whole width off-centre. Both
   inline insets at 0 with auto inline margins centre it in either direction. */
.rw-land__arch { position: absolute; inset-block-start: var(--rw-space-4); inset-inline: 0; margin-inline: auto; transform: none; inline-size: min(38rem, 90vw); block-size: auto; -webkit-mask-image: linear-gradient(to bottom, #000 28%, transparent 46%); mask-image: linear-gradient(to bottom, #000 28%, transparent 46%); }
.rw-land__arch path { stroke: var(--rw-line-accent); stroke-width: 1.5; fill: none; }
.rw-land__arch-inner { opacity: .5; }
.rw-land__heroinner { position: relative; max-inline-size: 48rem; margin-inline: auto; padding-block-start: var(--rw-space-12); display: grid; gap: var(--rw-space-4); justify-items: center; }
.ic-hero__title { font-family: var(--rw-font-display); font-weight: 400; font-size: clamp(2.5rem, 7vw, 4.25rem); line-height: 1.04; letter-spacing: .02em; text-wrap: balance; }
.ic-hero__sub { font-family: var(--rw-font-display); font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--rw-ink-muted); max-inline-size: 52ch; }
.ic-hero__actions, .ic-doorband__actions { display: flex; flex-wrap: wrap; gap: var(--rw-space-3); justify-content: center; }
.ic-hero__actions { margin-block-start: var(--rw-space-2); }
/* Prose is capped everywhere it appears (ProseMeasureTests): the truth line and the honest
   band's paragraphs are the two public-home texts whose containers are wider than a readable
   line. */
.ic-hero__truth { font-size: var(--rw-text-small); color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }
/* The feature strip: three cells cut apart by 1px lines, the concept's promo pattern —
   the 1px gap over a line-coloured ground IS the divider, so no cell needs its own rule. */
.rw-land__feats { max-inline-size: var(--rw-page-measure); margin-inline: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rw-line); border-block: 1px solid var(--rw-line); }
.rw-land__feat { background: var(--rw-ground); padding: var(--rw-space-8) var(--rw-space-6); display: grid; align-content: start; gap: var(--rw-space-3); min-inline-size: 0; }
.rw-land__feat h2, .rw-land__feat h3 { font-family: var(--rw-font-display); font-weight: 400; font-size: var(--rw-text-lead); }
.rw-land__feat p { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }
/* The landing reads at the concept's measure, not the application's. --rw-page-measure (90rem)
   is the signed-in shell's working width; a marketing page run that wide puts its text almost
   against the window edge and loses the courtyard's margins. 70rem is the concept's wrap. */
.rw-land__hero, .rw-land__feats, .ic-fromproduct, .ic-homeamanah, .ic-doorband { max-inline-size: var(--rw-land-measure); margin-inline: auto; }
.ic-fromproduct, .ic-homeamanah { padding-block: var(--rw-space-12); }
.ic-homeamanah { border-block-start: 1px solid var(--rw-line); }
/* The recessed steps band above marks the boundary, so a hairline on top of it would be a second divider. */
.rw-land__steps + .ic-homeamanah { border-block-start: 0; }
.ic-homeamanah__inner { display: grid; gap: var(--rw-space-8); }
.ic-fromproduct__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rw-space-8); align-items: center; }
.ic-fromproduct__copy, .ic-homeamanah__head, .ic-doorband__copy { display: grid; gap: var(--rw-space-4); max-inline-size: var(--rw-reading-measure); }
.ic-fromproduct__copy h2, .ic-homeamanah__head h2 { font-family: var(--rw-font-display); font-weight: 400; font-size: var(--rw-text-heading); }
.ic-homeamanah__more { display: inline-flex; align-items: center; min-block-size: var(--rw-target-min); }

/* ── The front page's added regions (2026-09-23): facts, audiences, steps, commitments, questions ── */
/* Three facts under the hero's actions: small ink, a brass lozenge as the only ornament. */
.rw-land__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--rw-space-2) var(--rw-space-6); margin: 0; padding: 0; list-style: none; font-size: var(--rw-text-small); font-weight: 600; }
.rw-land__facts li { display: inline-flex; align-items: center; gap: var(--rw-space-2); }
.rw-land__facts li::before { content: ""; inline-size: .45rem; block-size: .45rem; background: var(--rw-accent-border); transform: rotate(45deg); flex: none; }
/* Every added region shares one measure, one rule above it and one head. */
.rw-land__who, .rw-land__steps, .rw-land__faq { max-inline-size: var(--rw-land-measure); margin-inline: auto; padding-block: var(--rw-space-12); display: grid; gap: var(--rw-space-8); }
.rw-land__steps, .rw-land__faq { border-block-start: 1px solid var(--rw-line); }
/* Landing rhythm: ground, then recess, then raised. "Getting started" sinks one step, and each
   brass-ringed numeral becomes a raised coin in it (accent-text on surface 6.65 / 6.53; the ring on
   surface 5.36 / 5.23, on ground-2 4.15 / 7.65). No motif is added. */
.rw-land__steps { background: var(--rw-ground-2); border-block-start: 0; border-radius: var(--rw-radius-frame); padding-inline: var(--rw-panel-inset); box-shadow: var(--rw-well-shade); }
.rw-land__sectionhead { display: grid; gap: var(--rw-space-3); max-inline-size: var(--rw-reading-measure); }
.rw-land__sectionhead h2 { font-family: var(--rw-font-display); font-weight: 400; font-size: var(--rw-text-heading); }
.rw-land__who .rw-land__feats { max-inline-size: none; inline-size: 100%; }
/* The amanah band: the claim on one side, what it commits to on the other. */
.ic-homeamanah__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; gap: var(--rw-space-12); }
.ic-homeamanah__head .ic-homeamanah__more { justify-self: start; }
.ic-homeamanah__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rw-space-6) var(--rw-space-8); margin: 0; padding: 0; list-style: none; }
.ic-homeamanah__list li { display: grid; align-content: start; gap: var(--rw-space-2); padding-block-start: var(--rw-space-4); border-block-start: 1px solid var(--rw-line-accent); min-inline-size: 0; }
.ic-homeamanah__list h3 { font-size: var(--rw-text-body); font-weight: 700; }
.ic-homeamanah__list p { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
/* Questions as disclosures on one raised panel, the marker drawn so it mirrors correctly in RTL.
   The panel's edge closes the list, so the last question draws no rule to nothing. */
.rw-land__faqlist { display: grid; max-inline-size: var(--rw-form-measure); 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-land__qa { border-block-end: 1px solid var(--rw-line); }
.rw-land__qa summary { display: flex; align-items: center; justify-content: space-between; gap: var(--rw-space-4); min-block-size: var(--rw-target-min); padding-block: var(--rw-space-3); font-weight: 600; cursor: pointer; list-style: none; transition: color var(--rw-motion-fast) var(--rw-ease-enter); }
/* A summary is not in base's overflow-wrap list, so at 320px with doubled text its longest word
   ("registreringer,") set the column's min-content, and the panel's inset pushed that 45px past
   the viewport. The track is clamped and the question wraps like every other line of prose. */
.rw-land__faq { grid-template-columns: minmax(0, 1fr); }
.rw-land__qa summary { min-inline-size: 0; overflow-wrap: anywhere; }
.rw-land__qa summary::-webkit-details-marker { display: none; }
.rw-land__qa summary::after { content: "+"; flex: none; font-family: var(--rw-font-display); font-size: var(--rw-text-lead); line-height: 1; color: var(--rw-accent-text); }
.rw-land__qa[open] summary::after { content: "–"; }
/* The summary is a 48px control that had no hover (accent-text on surface 6.65 / 6.53). The +/–
   glyph swap is kept: a rotated "+" would still be read as "plus" while the item is open. */
.rw-land__qa:last-child { border-block-end: 0; }
.rw-land__qa summary:hover { color: var(--rw-accent-text); }
.rw-land__qa p { color: var(--rw-ink-muted); padding-block-end: var(--rw-space-4); max-inline-size: var(--rw-reading-measure); }
.rw-land__faq > .ic-fromproduct__more { justify-self: start; }
@media (prefers-reduced-motion: no-preference) {
    .rw-land__qa[open] > :not(summary) { animation: rw-unfold var(--rw-motion-enter) var(--rw-ease-enter); }
}
/* FAQ layout on a desk: the head and "All questions" stand beside the panel, closing the void the
   form-measure panel left above the door-band. The second row is the flexible one, so an opened
   question grows only that row and the link stays under the head instead of drifting down. */
@media (min-width: 64rem) {
    .rw-land__faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); grid-template-rows: auto 1fr; align-items: start; column-gap: var(--rw-space-12); }
    .rw-land__faq > :is(.rw-land__sectionhead, .ic-fromproduct__more) { grid-column: 1; }
    .rw-land__faqlist { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 48rem) {
    .ic-homeamanah__inner, .ic-homeamanah__list { grid-template-columns: minmax(0, 1fr); }
    .ic-homeamanah__inner { gap: var(--rw-space-8); }
}
/* THE PANELS GIVE WAY WHEN THE COLUMN RUNS OUT, as the register card does (riwaq-public.css). At
   320px with doubled text the column is 8rem, and the FAQ panel's and the steps band's two 1rem
   insets took a quarter of it: questions broke inside words ("moskee / n") and the steps gained a
   split word. At 15rem or less both run to the screen's edges and their content sits back on the
   page gutter; the fill, the block edges and the shadow stay. The question's gap to its +/- glyph
   halves there too: "registreringer," plus a 1rem gap and the glyph is 267px against a 256px
   line, and fits with half the gap. The container is the landing's main, because the steps band
   is its own section and a query cannot restyle its container. The 390px phone keeps both panels. */
.ic-main:has(> .rw-land__steps) { container: rw-land / inline-size; }
@container rw-land (max-width: 15rem) {
    .rw-land__steps, .rw-land__faqlist { margin-inline: calc(-1 * var(--rw-page-gutter)); padding-inline: var(--rw-page-gutter); border-inline: 0; border-radius: 0; }
    .rw-land__qa summary { gap: var(--rw-space-2); }
}

/* ═══ The landing's product showcase (owner-approved "steps" variant, finalised 2026-09-26) ═══
   Two regions: (A) .rw-rd-show, the product window under the hero, at the landing measure;
   (B) .rw-rd-steps, "From request to first register", three steps each beside its screen. Built on
   the depth spec: the window is the page's ONE lifted object (--rw-shadow-lift), the step screens
   are raised at rest (--rw-shadow-rest) inside the recessed "Getting started" well (BE-6), and the
   chips are the float plane (--rw-shadow-float). Every colour is a --rw-* token; the only literal
   is the fade mask's alpha, as in .rw-land__arch. No "sample data" caption (owner, 2026-09-27). */

/* ── (A) The product window ── */
/* A named container, so the chips are placed by the room the window actually has, in rem. Placed by
   the viewport they were not: with the text alone at 200% the viewport rules still said "wide",
   the notice chip kept its 15.5rem inset at twice the size and ran 146px past a 1024px screen. */
.rw-rd-show { position: relative; max-inline-size: var(--rw-land-measure); margin-inline: auto; margin-block-end: var(--rw-space-8); padding-inline: clamp(0rem, 3vw, 2.75rem); container: rw-rd-show / inline-size; }
.rw-rd-show p { margin: 0; }
.rw-rd-show__stage { position: relative; }
/* Double bezel: a recessed parchment shell round the working surface, radii concentric (the
   shell's radius is the core's plus the gap). --rw-edge is spent on the shell, which casts the
   lift; the core inside it keeps the plain --rw-line. Its lower edge fades into the page instead of
   ending, so a wide window stays a view into the product rather than a slab on it.
   THE FADE IS A FIXED 4REM BAND, AND NOTHING IS WRITTEN IN IT: .rw-rd-show__main's end padding
   puts the last line of every column above it in every locale and at every width.
   THE MASK IS DRAWN 4REM LARGER THAN THE FRAME AND NOT CLIPPED TO IT (mask-clip: no-clip). A
   mask clips to the border box by default, and that erased the whole of --rw-shadow-lift. Above
   the band the mask is opaque, so the lift survives on the sides and top; below the frame it is
   empty, since a dissolving edge casts nothing. An engine without no-clip falls back to the clip,
   never to a harder edge. */
.rw-rd-show__bezel {
    padding: var(--rw-space-2); border: 1px solid var(--rw-edge); border-radius: calc(var(--rw-radius-frame) + var(--rw-space-2));
    background: var(--rw-ground-2); box-shadow: var(--rw-shadow-lift);
    -webkit-mask-image: linear-gradient(to top, transparent 4rem, #000 8rem); mask-image: linear-gradient(to top, transparent 4rem, #000 8rem);
    -webkit-mask-size: calc(100% + 8rem) calc(100% + 8rem); mask-size: calc(100% + 8rem) calc(100% + 8rem);
    -webkit-mask-position: -4rem -4rem; mask-position: -4rem -4rem;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    mask-clip: no-clip;
}
.rw-rd-show__core { overflow: hidden; border: 1px solid var(--rw-line); border-radius: var(--rw-radius-frame); background: var(--rw-surface); color: var(--rw-ink); font-size: .875rem; text-align: start; container-type: inline-size; }

/* The shell's header: the mark, and the reader's bell and initials. */
.rw-rd-show__bar { display: flex; align-items: center; gap: var(--rw-space-3); min-block-size: 3.25rem; padding-inline: 1.25rem; border-block-end: 1px solid var(--rw-line); }
.rw-rd-show__brand { display: inline-flex; align-items: center; gap: var(--rw-space-2); font-family: var(--rw-font-display); font-size: 1.125rem; }
/* The real mark (AynMark), at the shell header's size. */
.rw-rd-show__brand .ic-aynmark { inline-size: 1.375rem; block-size: 1.375rem; color: var(--rw-ink); }
.rw-rd-show__barorg { display: none; align-items: center; gap: var(--rw-space-2); min-inline-size: 0; font-weight: 800; white-space: nowrap; }
.rw-rd-show__barend { display: inline-flex; align-items: center; gap: .875rem; margin-inline-start: auto; color: var(--rw-ink-muted); }
.rw-rd-show__bell { inline-size: 1rem; block-size: 1rem; fill: currentColor; }
/* Initials only, never a photograph, drawn as the shell draws them. */
.rw-rd-show__av, .rw-rd-av { display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; flex: none; border-radius: .5rem; background: var(--rw-green); color: var(--rw-on-green); font-family: var(--rw-font-display); font-size: .8125rem; letter-spacing: .02em; }
/* The masjid's monogram in a tenant identity colour: the one place those tokens belong. */
.rw-rd-show__org, .rw-rd-org { display: inline-grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; flex: none; border-radius: .5rem; background: var(--rw-org-teal); color: var(--rw-on-org-teal); font-family: var(--rw-font-display); font-size: .75rem; }
.rw-rd-show__org--lg, .rw-rd-org { inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--rw-radius-control); font-size: 1rem; }

/* The shell's rail, recessed as the real one is. The current page is drawn as riwaq-shell.css
   draws .ic-side__link[aria-current]: the brass bar at its inline START, parchment fill and
   --rw-nav-active-ink. */
.rw-rd-show__app { display: grid; grid-template-columns: 13rem minmax(0, 1fr); }
.rw-rd-show__rail { display: grid; align-content: start; gap: 1.25rem; padding: 1.25rem .875rem; background: var(--rw-ground-2); border-inline-end: 1px solid var(--rw-line); }
.rw-rd-show__who { display: flex; align-items: center; gap: .625rem; min-inline-size: 0; }
.rw-rd-show__whotext { display: grid; gap: .1rem; min-inline-size: 0; }
.rw-rd-show__whoname { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-rd-show__nav { display: grid; gap: .125rem; margin: 0; padding: 0; list-style: none; }
.rw-rd-show__nav li { padding: .5rem .75rem; border-inline-start: 3px solid transparent; border-radius: var(--rw-radius-control); color: var(--rw-ink-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-rd-show__nav .is-on { background: var(--rw-surface); border-inline-start-color: var(--rw-accent-border); color: var(--rw-nav-active-ink); font-weight: 800; }

/* The day, as Home opens it: date, greeting, the next class in the display face, the verse niche.
   The end padding keeps every line above the bezel's 4rem fade (4rem less the bezel's .5rem
   padding, plus a quarter of breathing room). */
.rw-rd-show__main { display: grid; gap: 1.5rem; min-inline-size: 0; padding: 1.5rem 1.75rem 3.75rem; }
.rw-rd-show__opening { display: grid; grid-template-columns: minmax(0, 1fr) 11.5rem; gap: 1.5rem; align-items: start; }
/* One shrinkable track each: an auto track took the width of the button's longest word and the
   unbroken text link, and the core clipped the whole day at 200% text in German or Dutch. */
.rw-rd-show__lead { display: grid; grid-template-columns: minmax(0, 1fr); gap: .625rem; align-content: start; min-inline-size: 0; }
.rw-rd-show__eyebrow, .rw-rd-show__muted, .rw-rd-muted { color: var(--rw-ink-muted); font-size: .8125rem; }
.rw-rd-show__eyebrow { font-weight: 600; }
.rw-rd-show__title { font-family: var(--rw-font-display); font-size: 2.125rem; line-height: 1.1; }
.rw-rd-show__next { display: flex; align-items: center; gap: 1.125rem; min-inline-size: 0; margin-block-start: .625rem; }
.rw-rd-show__when { display: grid; justify-items: center; flex: none; padding-inline-end: 1.125rem; border-inline-end: 1px solid var(--rw-line-accent); }
.rw-rd-show__when span, .rw-rd-show__kicker, .rw-rd-card__kicker { font-size: .6875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rw-accent-text); }
.rw-rd-show__when b { font-family: var(--rw-font-display); font-weight: 400; font-size: 2.375rem; line-height: 1; }
.rw-rd-show__what { display: grid; grid-template-columns: minmax(0, 1fr); gap: .2rem; min-inline-size: 0; }
.rw-rd-show__class { font-family: var(--rw-font-display); font-size: 1.75rem; line-height: 1.1; }
.rw-rd-show__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-block-start: .5rem; }
/* Like the status pills, a mock button wraps only when it is alone on its line and still too wide
   (a phone at 200% text); every row that holds one breaks its line first. */
.rw-rd-show__btn, .rw-rd-btn { display: inline-flex; align-items: center; justify-content: center; max-inline-size: 100%; padding: .5rem 1.1rem; 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: .8125rem; font-weight: 800; text-align: center; }
.rw-rd-show__textlink { color: var(--rw-accent-text); font-size: .8125rem; font-weight: 700; white-space: nowrap; }
/* Swapped in RTL exactly as the real Home's .ic-nextclass__link is. Bidi mirroring of the
   generated glyph did not happen: the Arabic shot drew "›", pointing back. */
.rw-rd-show__textlink::after { content: "›"; margin-inline-start: .35em; }
.rw-rd-show__textlink:dir(rtl)::after { content: "‹"; }
/* The daily-verse niche: the arch used where Riwaq allows it, a moment of pause. */
.rw-rd-show__niche { position: relative; display: flex; flex-direction: column; align-items: center; min-block-size: 14.5rem; padding: 0 .75rem 1.25rem; text-align: center; }
.rw-rd-show__nicheframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.rw-rd-show__nichefill { fill: var(--rw-ground); }
.rw-rd-show__nicheedge { fill: none; stroke: var(--rw-line-accent); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.rw-rd-show__star { position: relative; inline-size: 1rem; block-size: 1rem; margin-block-start: 3rem; fill: var(--rw-accent-fill); }
.rw-rd-show__nichebody { position: relative; display: grid; justify-items: center; gap: .2rem; margin-block-start: auto; }
.rw-rd-show__surah { font-family: var(--rw-font-quran); font-size: 1.875rem; line-height: 1.4; color: var(--rw-green-ink); }

/* Below the day: the classes, and what is owed beside the one figure. Hairlines, no cards: the
   whole window is one lifted plane, so the attention panel is tinted, never a card in a card. */
.rw-rd-show__cols { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 1.75rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--rw-line); }
.rw-rd-show__h { font-family: var(--rw-font-display); font-size: 1.125rem; line-height: 1.2; }
.rw-rd-show__rows { display: grid; margin: .5rem 0 0; padding: 0; list-style: none; }
.rw-rd-show__rows li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; padding-block: .75rem; border-block-end: 1px solid var(--rw-line); }
.rw-rd-show__rowname { font-weight: 800; }
.rw-rd-show__side { display: grid; gap: 1.25rem; align-content: start; }
.rw-rd-show__attn { display: grid; gap: .375rem; padding: .875rem 1rem; border-inline-start: 3px solid var(--rw-accent-border); border-radius: var(--rw-radius-panel); background: var(--rw-ground-2); }
.rw-rd-show__attnrow { text-decoration: underline; text-decoration-color: var(--rw-accent-border); text-underline-offset: .2em; }
.rw-rd-show__fig { display: grid; gap: .1rem; }
.rw-rd-show__fig b { font-family: var(--rw-font-display); font-weight: 400; font-size: 2rem; line-height: 1.05; }
.rw-rd-show__figlabel { font-weight: 800; }

/* The two chips float above the window, straddling its edges on a diagonal: the notice over the
   quiet middle of the header, the languages across the faded lower edge. Neither sits over a word:
   the lower edge is below the last line of every column in every locale, whatever its length. */
.rw-rd-show__chip, .rw-rd-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .5rem; padding-block: .45rem; padding-inline: .45rem .9rem; border: 1px solid var(--rw-edge); border-radius: var(--rw-radius-pill); background: var(--rw-surface); color: var(--rw-ink); box-shadow: var(--rw-shadow-float); font-size: .8125rem; font-weight: 700; white-space: nowrap; }
.rw-rd-show__chipicon, .rw-rd-chip__icon { display: inline-grid; place-items: center; inline-size: 1.625rem; block-size: 1.625rem; flex: none; border-radius: var(--rw-radius-pill); background: var(--rw-ground-2); color: var(--rw-ink); }
.rw-rd-show__chipicon svg, .rw-rd-chip__icon svg { inline-size: .95rem; block-size: .95rem; fill: currentColor; }
.rw-rd-show__chipicon--brass { background: var(--rw-accent-fill); color: var(--rw-accent-ink); }
.rw-rd-chip__icon--ok { background: var(--rw-success-bg); color: var(--rw-success-fg); }
/* A narrow window never lets a chip run past it: the chip's words give way before the page does. */
.rw-rd-show__chip { max-inline-size: calc(100% - 2 * var(--rw-space-4)); }
.rw-rd-show__chip > span:last-child { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
/* Its width allowance counts its own inset, so it can never end past the window. */
.rw-rd-show__chip--notice { inset-block-start: -1.25rem; inset-inline-start: 15.5rem; max-inline-size: calc(100% - 15.5rem - var(--rw-space-4)); }
/* "Noticeboard" is the kind; the bell already says it. On a phone the kind steps aside so the
   notice itself is never the part cut to an ellipsis. The separator is drawn here so the markup
   needs no whitespace to survive. */
.rw-rd-show__chipkind::after { content: "·"; margin-inline: .4em; }
.rw-rd-show__chip--langs { inset-block-end: -1.25rem; inset-inline-end: -2.25rem; }
/* Each language an isolated token, so the scripts cannot reorder one another. */
.rw-rd-show__langs { display: inline-flex; align-items: center; gap: .55rem; }
.rw-rd-show__langs i { font-style: normal; color: var(--rw-ink-muted); }
.rw-rd-show__langs [lang="ar"], .rw-rd-show__langs [lang="ur"] { font-family: var(--rw-font-arabic); font-size: .95rem; font-weight: 400; line-height: 1; }

/* The window narrows: first the rail folds into the header, then the day stacks. */
@container (max-width: 52rem) {
    .rw-rd-show__app { grid-template-columns: minmax(0, 1fr); }
    .rw-rd-show__rail { display: none; }
    .rw-rd-show__barorg { display: inline-flex; margin-inline-start: var(--rw-space-4); padding-inline-start: var(--rw-space-4); border-inline-start: 1px solid var(--rw-line); }
}
@container (max-width: 34rem) {
    .rw-rd-show__brand span, .rw-rd-show__barorg { display: none; }
    .rw-rd-show__bar { padding-inline: 1rem; }
    .rw-rd-show__main { gap: 1.25rem; padding: 1.125rem 1rem 3.75rem; }
    .rw-rd-show__opening, .rw-rd-show__cols { grid-template-columns: minmax(0, 1fr); }
    .rw-rd-show__title { font-size: 1.75rem; }
    /* The niche becomes a strip under the day: same parts, no arch to squeeze. */
    .rw-rd-show__niche { flex-direction: row; gap: .75rem; min-block-size: 0; padding: .75rem 1rem; border: 1px solid var(--rw-line-accent); border-radius: var(--rw-radius-panel); background: var(--rw-ground); }
    .rw-rd-show__nicheframe { display: none; }
    .rw-rd-show__star { margin: 0; }
    .rw-rd-show__nichebody { flex: 1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: start; column-gap: .75rem; margin: 0; text-align: start; }
    .rw-rd-show__nichebody .rw-rd-show__kicker { grid-column: 1; }
    .rw-rd-show__surah { grid-column: 2; grid-row: 1 / span 2; font-size: 1.5rem; white-space: nowrap; }
    .rw-rd-show__side { display: none; }
}
/* At 320px the strip has no room for the surah beside the kicker: it goes under it, whole words. */
@container (max-width: 19rem) {
    .rw-rd-show__nichebody { grid-template-columns: minmax(0, 1fr); }
    .rw-rd-show__surah { grid-column: 1; grid-row: auto; }
}
/* Only enlarged text reaches this (at normal text the core is 15.7rem even at 320px): the next
   class goes under its date and the verse strip stacks, so the surah wraps between its words
   instead of being clipped by the core. The mock controls wrap too: a long German or Dutch word
   plus the pill's padding is wider than the track, so the button breaks inside it rather than
   being cut. Words that must break are hyphenated by the page's language, never the surah. */
@container (max-width: 12rem) {
    .rw-rd-show__main { padding-inline: .5rem; }
    .rw-rd-show__lead, .rw-rd-show__kicker { hyphens: auto; }
    .rw-rd-show__textlink { white-space: normal; }
    .rw-rd-show__btn { min-inline-size: 0; padding-inline: .75rem; overflow-wrap: anywhere; }
    .rw-rd-show__next { flex-direction: column; align-items: start; gap: .5rem; }
    .rw-rd-show__when { padding-inline-end: 0; border-inline-end: 0; justify-items: start; }
    .rw-rd-show__niche { flex-direction: column; align-items: start; padding-inline: .5rem; }
    .rw-rd-show__surah { white-space: normal; }
}

/* ── (B) From request to first register ── */
/* The recessed "Getting started" band of the depth spec (BE-5, BE-6): ground, then recess, then
   raised. The screens sit straight on the well, so there is no stage inside it. (0,2,0) beats the
   landing's section rules and BE-6 regardless of order. */
.rw-land__steps.rw-rd-steps { gap: clamp(1.75rem, 3.5vw, 2.5rem); padding: clamp(2.25rem, 4.5vw, 3.5rem) var(--rw-panel-inset); border-block-start: 0; border-radius: var(--rw-radius-frame); background: var(--rw-ground-2); box-shadow: var(--rw-well-shade); container: rw-rd-steps / inline-size; }
.rw-rd-steps__head { justify-self: center; justify-items: center; gap: var(--rw-space-2); max-inline-size: none; text-align: center; }
.rw-rd-steps__list { position: relative; display: grid; gap: clamp(2rem, 4vw, 3rem); margin: 0; padding: 0; list-style: none; counter-reset: rw-rd-step; }
/* The spine: one brass hairline down the middle, the portico's column, fading at both ends. */
.rw-rd-steps__list::before { content: ""; position: absolute; inset-block: 1rem; inset-inline-start: 50%; inline-size: 1px; margin-inline-start: -.5px; background: linear-gradient(to bottom, transparent, var(--rw-line-accent) 10%, var(--rw-line-accent) 90%, transparent); }
.rw-rd-step { counter-increment: rw-rd-step; display: grid; grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr); column-gap: clamp(1.25rem, 2.5vw, 2.5rem); align-items: center; min-inline-size: 0; }
/* The numeral: a raised coin on the well, the spine cut around it by a ring of the well's own colour. */
.rw-rd-step::before { content: counter(rw-rd-step); position: relative; z-index: 1; grid-column: 2; grid-row: 1; justify-self: center; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 1px solid var(--rw-accent-border); border-radius: var(--rw-radius-pill); background: var(--rw-surface); box-shadow: 0 0 0 .375rem var(--rw-ground-2); font-family: var(--rw-font-display); font-size: var(--rw-text-lead); color: var(--rw-accent-text); }
.rw-rd-step__text { grid-column: 1; grid-row: 1; justify-self: end; display: grid; gap: var(--rw-space-3); align-content: center; inline-size: 100%; max-inline-size: 25rem; min-inline-size: 0; }
/* Each screen is a container: how its parts sit depends on the room the screen has in rem, not on the
   viewport, so 200% text rearranges them exactly as a narrow screen does. */
.rw-rd-step__art { grid-column: 3; grid-row: 1; justify-self: start; inline-size: 100%; max-inline-size: 27rem; min-inline-size: 0; container-type: inline-size; }
.rw-rd-step:nth-child(even) .rw-rd-step__text { grid-column: 3; justify-self: start; }
.rw-rd-step:nth-child(even) .rw-rd-step__art { grid-column: 1; justify-self: end; }
.rw-rd-step__who { display: block; margin-block-end: calc(var(--rw-space-1) * -1); font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--rw-accent-text); }
.rw-rd-step h3 { margin: 0; font-family: var(--rw-font-display); font-weight: 400; font-size: var(--rw-text-title); line-height: 1.15; }
.rw-rd-step__text > p { margin: 0; color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }
.rw-rd-step__text > .rw-rd-step__note { display: flex; align-items: baseline; gap: var(--rw-space-2); color: var(--rw-ink); font-size: var(--rw-text-small); font-weight: 600; }
.rw-rd-step__note::before { content: ""; flex: none; inline-size: .45rem; block-size: .45rem; background: var(--rw-accent-border); transform: translateY(-.1rem) rotate(45deg); }

/* The screens: raised at rest on the well. */
.rw-rd-step__stage { position: relative; }
.rw-rd-step__stage p { margin: 0; }
.rw-rd-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; padding: 1.125rem 1.25rem; border: 1px solid var(--rw-edge); border-radius: var(--rw-radius-frame); background: var(--rw-surface); box-shadow: var(--rw-shadow-rest); color: var(--rw-ink); font-size: .875rem; text-align: start; min-inline-size: 0; }
.rw-rd-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; }
.rw-rd-card__kicker--ok { color: var(--rw-success-ink); }
.rw-rd-card__title { font-family: var(--rw-font-display); font-size: 1.3rem; line-height: 1.15; overflow-wrap: anywhere; }
/* A status wraps only when it is alone on its line and still wider than the screen (German
   "Hausaufgabe aufgegeben." at 200% text ran 9px past a 1024px screen). Beside a name it never
   does: a wrapping row breaks the line before it shrinks anything. */
.rw-rd-pill { display: inline-flex; align-items: center; max-inline-size: 100%; padding: .1875rem .625rem; border-radius: var(--rw-radius-pill); font-size: .75rem; font-weight: 700; }
.rw-rd-pill--ok { background: var(--rw-success-bg); color: var(--rw-success-fg); }
.rw-rd-pill--warn { background: var(--rw-warning-bg); color: var(--rw-warning-fg); }
.rw-rd-pill--danger { background: var(--rw-danger-bg); color: var(--rw-danger-fg); }
.rw-rd-pill--info { background: var(--rw-info-bg); color: var(--rw-info-fg); }
.rw-rd-btn--quiet { padding: .35rem .8rem; border-color: var(--rw-control-border); background: var(--rw-surface); color: var(--rw-ink); font-size: .75rem; font-weight: 700; }
.rw-rd-req__id { display: flex; align-items: center; gap: .875rem; }
/* The name gives way beside the monogram rather than dropping under it. */
.rw-rd-req__id > div { flex: 1 1 auto; min-inline-size: 0; }
/* Whole whenever a line can hold it: at 320px it broke after "REQ-". An atomic inline moves to
   the next line whole, and breaks inside only when no line can hold it (a phone at 200% text). */
.rw-rd-req__ref { display: inline-block; max-inline-size: 100%; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--rw-ink); }
.rw-rd-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem 1rem; margin: 0; padding-block-start: .875rem; border-block-start: 1px solid var(--rw-line); }
.rw-rd-facts > div { display: grid; gap: .15rem; align-content: start; min-inline-size: 0; }
.rw-rd-facts dt { color: var(--rw-ink-muted); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rw-rd-facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
/* The link is the step, so it is never cut to an ellipsis: where the button leaves it less than
   12rem the button drops under it, and on the narrowest phone it breaks, as the product's own
   .ic-linkonce__url does ("mono, breakable"). */
.rw-rd-url { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .3rem; padding-inline-start: .875rem; border: 1px solid var(--rw-control-border); border-radius: var(--rw-radius-control); background: var(--rw-ground); }
.rw-rd-url__text { flex: 1 1 12rem; min-inline-size: 0; overflow-wrap: anywhere; font-weight: 700; font-variant-numeric: tabular-nums; }
/* The link as /my-organization/people/invitations shows it the one time it exists ("Copy this
   now"): the raw link, the copy button and the scope line. Its end padding is where the joined
   chip straddles, so the chip covers no word whatever a language does to the line. */
.rw-rd-join { padding-block-end: 1.75rem; }
.rw-rd-roll { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
/* A name is never cut: where it and its status do not share a line, the status drops under it
   to the end (German "5 Min. verspätet" cut "Ibrahim" at 320px). */
.rw-rd-roll li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding-block: .4375rem; border-block-end: 1px solid var(--rw-line); }
.rw-rd-roll li:last-child { border-block-end: 0; }
.rw-rd-roll__name { flex: 1 1 auto; min-inline-size: 0; font-weight: 700; }
.rw-rd-roll .rw-rd-pill { margin-inline-start: auto; }
/* The saved chip straddles the register's top edge and reaches into it, so the kicker starts
   below that: German "ANWESENHEIT ERFASSEN" ran under the chip at 1440px. */
.rw-rd-reg { padding-block-start: 1.75rem; }
.rw-rd-reg__foot { display: flex; align-items: center; padding-block-start: .75rem; border-block-start: 1px solid var(--rw-line); }
/* The second screen, laid on the register's free corner: the same class's homework. In flow, not
   absolute: it rises over the register by less than the register's own foot, so it can only ever
   cover the empty end of the Save row, whatever a language does to the heights. */
.rw-rd-step__stage--pair { display: flex; flex-direction: column; }
.rw-rd-step__stage--pair .rw-rd-reg { inline-size: calc(100% - 4rem); }
.rw-rd-hw { z-index: 1; align-self: flex-end; inline-size: 14rem; margin-block-start: -3.25rem; gap: .3rem; padding: .875rem 1rem; box-shadow: var(--rw-shadow-float); }
.rw-rd-hw__title { font-family: var(--rw-font-display); font-size: 1.05rem; line-height: 1.2; }
.rw-rd-hw .rw-rd-pill { justify-self: start; margin-block-start: .3rem; }
/* The learner's side is JoinClass's own sentence, "You have joined {0} at {1}.", which names the
   masjid and so runs long (Turkish 52 characters). The chip therefore hangs IN FLOW under the join
   card, rising 1.1rem into the card's 1.75rem end padding: however a language wraps it, it grows
   downward, away from the words, and it can never run past the card.
   The saved chip does the same over the register: in flow and first (order: -1), it overlaps the
   register's 1.75rem top padding by 1.1rem, so a long message wraps into free space above rather
   than past the card. Absolute and unwrapped, six languages ran past the screen's edge at 320px. */
.rw-rd-chip--joined, .rw-rd-chip--saved { position: relative; inset: auto; display: flex; max-inline-size: calc(100% - 2.5rem); white-space: normal; }
.rw-rd-chip--joined { inline-size: fit-content; margin-block-start: -1.1rem; margin-inline: auto 1.25rem; }
.rw-rd-chip--saved { order: -1; align-self: flex-end; margin-block-end: -1.1rem; margin-inline-end: 1.25rem; }

/* A narrow screen (a tablet's column, any phone, or 200% text on a laptop): the homework card stops
   hanging over the register's corner and follows it, and the facts take two columns. Hung over a
   13.5rem register at 200% text, the 14rem homework card covered "Save register" whole. */
@container (max-width: 24rem) {
    .rw-rd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rw-rd-step__stage--pair .rw-rd-reg { inline-size: auto; }
    .rw-rd-hw { align-self: stretch; inline-size: auto; margin-block-start: -.75rem; margin-inline: var(--rw-space-6) var(--rw-space-3); }
    .rw-rd-chip--joined, .rw-rd-chip--saved { max-inline-size: calc(100% - 2 * var(--rw-space-3)); margin-inline-end: var(--rw-space-3); }
}
/* Too narrow for a name and its status on one line in some language: then every status goes under
   its name, never some, so the roster never reads ragged. Above 19rem of screen the widest row in
   all eleven languages fits (German, 18.9rem); if a font ever runs wider, the row's own wrap still
   cuts nothing. */
@container (max-width: 19rem) {
    .rw-rd-roll li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .125rem .75rem; }
    .rw-rd-roll .rw-rd-av { grid-row: span 2; }
    .rw-rd-roll .rw-rd-pill { justify-self: start; margin-inline-start: 0; }
}

/* Arabic script: tracking breaks cursive joins and small caps do not exist (spec B-3). */
:is(:lang(ar), :lang(ur)) :is(.rw-rd-show__when span, .rw-rd-show__kicker, .rw-rd-card__kicker, .rw-rd-step__who, .rw-rd-facts dt) { letter-spacing: 0; text-transform: none; font-size: var(--rw-text-small); }
:is(:lang(ar), :lang(ur)) :is(.rw-rd-show__title, .rw-rd-show__class, .rw-rd-card__title, .rw-rd-hw__title, .rw-rd-step h3) { line-height: var(--rw-leading-arabic-display); }

/* Motion: one arrival, translate, scale and opacity only, none at all if the reader asks. */
@media (prefers-reduced-motion: no-preference) {
    .rw-rd-show__bezel { animation: rw-rd-rise calc(var(--rw-motion-enter) * 3) var(--rw-ease-enter) both; }
    .rw-rd-show__chip { animation: rw-rd-pop calc(var(--rw-motion-enter) * 2) var(--rw-ease-enter) calc(var(--rw-motion-enter) * 1.5) both; }
    .rw-rd-show__chip--langs { animation-delay: calc(var(--rw-motion-enter) * 2.25); }
    @keyframes rw-rd-rise { from { opacity: 0; translate: 0 var(--rw-space-4); } }
    @keyframes rw-rd-pop { from { opacity: 0; translate: 0 var(--rw-space-2); scale: .97; } }
}

/* Once the rail folds (the core under 52rem, so the window under about 53.25rem) the notice has no
   rail to clear and moves to the window's start, and there is no side room, so the langs chip tucks
   inside. At normal text that is below a 1024px screen; at 200% text it is every screen. */
@container rw-rd-show (max-width: 53.25rem) {
    .rw-rd-show__chip--langs { inset-inline-end: var(--rw-space-4); }
    .rw-rd-show__chip--notice { inset-inline-start: var(--rw-space-6); max-inline-size: calc(100% - var(--rw-space-6) - var(--rw-space-4)); }
}
@container rw-rd-show (max-width: 32rem) {
    .rw-rd-show__chipkind { display: none; }
}
/* The narrowest phone: the languages chip lets its globe go, as the notice chip lets its kind go,
   so the names are never the part cut short. */
@container rw-rd-show (max-width: 19.5rem) {
    .rw-rd-show__chip--langs { padding-inline: .75rem; }
    .rw-rd-show__chip--langs .rw-rd-show__chipicon { display: none; }
    .rw-rd-show__langs { gap: .4rem; }
}
/* The steps are laid out by the room the section has, in rem, not by the viewport: at 200% text
   the viewport rules kept two 9.7rem columns on an 800px screen and the request card ran past it.
   Tablet: the rows still alternate, on a narrower spine. */
@container rw-rd-steps (max-width: 55.5rem) {
    .rw-rd-step { grid-template-columns: minmax(0, 1fr) 2.75rem minmax(0, 1fr); column-gap: var(--rw-space-4); }
}
/* One column: numeral, text, then its screen; no spine, no hanging chips. */
@container rw-rd-steps (max-width: 42.5rem) {
    .rw-rd-steps__head { justify-self: start; justify-items: start; text-align: start; }
    .rw-rd-steps__list::before { display: none; }
    .rw-rd-step { grid-template-columns: minmax(0, 1fr); row-gap: var(--rw-space-4); }
    .rw-rd-step::before { grid-column: 1; grid-row: 1; justify-self: start; inline-size: 2.5rem; block-size: 2.5rem; box-shadow: none; }
    .rw-rd-step__text, .rw-rd-step:nth-child(even) .rw-rd-step__text { grid-column: 1; grid-row: 2; justify-self: stretch; max-inline-size: none; }
    .rw-rd-step__art, .rw-rd-step:nth-child(even) .rw-rd-step__art { grid-column: 1; grid-row: 3; justify-self: stretch; max-inline-size: none; }
}
/* The phone's own gutters and type, which are the viewport's business. */
@media (max-width: 47.99rem) {
    .rw-rd-show { margin-block-end: var(--rw-space-6); }
    .rw-rd-show__chip, .rw-rd-chip { font-size: .75rem; }
    .rw-land__steps.rw-rd-steps { padding-inline: var(--rw-space-4); border-radius: var(--rw-radius-panel); }
}
/* The steps band still gives way when the column runs out (the rw-land rule above): at (0,2,0)
   this band's own padding and radius would otherwise outrank it. */
@container rw-land (max-width: 15rem) {
    .rw-land__steps.rw-rd-steps { padding-inline: var(--rw-page-gutter); border-radius: 0; }
}
/* The showcase register wears the concept's card language: the framing radius, the one
   shadow, a window bar with the brass dot, initials tiles, tinted pills. Still labelled
   sample data — the honesty rules moved into the new composition untouched. */
/* The unfinished-work note is limestone and brass, not the semantic info blue: this is the
   front door, and one cold slab in the middle of a warm page reads as a component that wandered
   in from another product. The keyline carries the "read this" job the colour was doing. */
/* The door-band: the deep portico green with the inner brass keyline inset — the same
   1px keyline the niche wears — a single girih star as lamplight, and the pill CTA. At night the
   portico measured 1.07:1 against the ground, so an outer ring separates it: invisible by day,
   2.17:1 at night. The on-portico inks are untouched. */
.ic-doorband { position: relative; max-inline-size: var(--rw-land-measure); margin-inline: auto; margin-block-end: var(--rw-space-12); background: var(--rw-portico); color: var(--rw-on-portico); border-radius: var(--rw-radius-frame); box-shadow: 0 0 0 1px var(--rw-portico-edge), var(--rw-shadow-rest); padding: var(--rw-space-12) var(--rw-panel-inset); text-align: center; overflow: hidden; }
.ic-doorband::before { content: ""; position: absolute; inset: var(--rw-space-2); border: 1px solid var(--rw-line-accent); border-radius: var(--rw-radius-panel); pointer-events: none; opacity: .6; }
/* The girih is texture, not a badge. At 3.5rem the eight-point lattice collapsed into an
   illegible blob sitting over the headline; the concept spends it as the night portico's quiet
   ground — large, faint, behind the words, "present, never loud". Centred the same way as the
   hero arch: auto inline margins across the panel, which do not mirror, and the vertical shift
   on the block axis only. */
.ic-doorband__mark { position: absolute; inset-block-start: 50%; inset-inline: 0; margin-inline: auto; transform: translateY(-50%); inline-size: min(26rem, 80%); block-size: auto; color: var(--rw-accent-on-portico); opacity: .13; pointer-events: none; }
.ic-doorband__inner { position: relative; display: grid; gap: var(--rw-space-6); justify-items: center; }
.ic-doorband__copy { justify-items: center; }
.ic-doorband__copy h2 { font-family: var(--rw-font-display); font-weight: 400; font-size: var(--rw-text-heading); }
.ic-doorband__copy p { color: var(--rw-on-portico-muted); }
.ic-doorband__free { font-size: var(--rw-text-small); }
/* The quiet action on the portico keeps the concept's bordered shape with the panel's own
   inks — a transparent fill would put ink-on-nothing behind the dim keyline. */
.ic-doorband .ic-btn--outline { background: transparent; color: var(--rw-on-portico); border-color: var(--rw-on-portico-muted); }
/* The kit's neutral hover (0,8,0) and press (0,6,0) painted this pill surface-hover or
   surface-press while its on-portico ink stayed: 1.12:1 by day, invisible. At (0,10,0) the pill
   stays on the portico (12.46 / 12.79); its edge brightens, and the kit's underline, 1px shift
   and press inset still apply. */
.ic-doorband .ic-btn.ic-btn--outline:not(.ic-btn--primary):not(.ic-btn--quiet):not(.ic-btn--destructive):not(.ic-btn--danger):is(:hover, :active):not(:disabled):not([aria-disabled="true"]) {
    background: transparent; color: var(--rw-on-portico); border-color: var(--rw-on-portico);
}
.ic-doorband__langs { color: var(--rw-on-portico-muted); font-size: var(--rw-text-small); }
/* The day's greeting is the pause; operational records below keep a plain list. */
/* The day's greeting is the concept's home card now (section 02, "Din moské i dag"):
   kicker, display title and sub on one parchment card. The old full-width 50% arch read
   as a stray oval at page width, and the architecture belongs to the niche below — one
   deliberate arch per screen is the concept's own economy. */
/* The greeting is the page's title, on the page ground like every other title; boxed, it read as
   one more card competing with the niche below it. */
.rw-home__welcome { padding: 0; }

/* THE DASHBOARD (2026-09-23 refinement). One column on a phone: what is owed, the day's work, the
   record. From 64rem the work runs down a main column and the rest stands beside it, so a desk
   screen stops being a long single scroll with half its width empty. */
.ic-home__cols, .ic-home__main, .ic-home__aside, .ic-home__attention { display: grid; gap: var(--rw-section-gap); align-content: start; min-inline-size: 0; }
.ic-home__attention:empty, .ic-home__aside:empty { display: none; }
@media (min-width: 64rem) {
    .ic-home__cols { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--rw-space-12); }
    .ic-home__attention { grid-column: 2; grid-row: 1; }
    .ic-home__main { grid-column: 1; grid-row: 1 / span 2; }
    .ic-home__aside { grid-column: 2; grid-row: 2; }
    .ic-home__cols:not(:has(> .ic-home__attention:not(:empty))) .ic-home__aside { grid-row: 1 / span 2; }
    /* Nothing beside the work (a teacher with nothing owed): the work takes the whole width. */
    .ic-home__cols:not(:has(> .ic-home__attention:not(:empty))):not(:has(> .ic-home__aside:not(:empty))) .ic-home__main { grid-column: 1 / -1; }
}
/* What is owed is a callout, not one more list: a card with the brass edge the register uses for
   an unmarked child. */
.ic-home__attention .ic-section { background: var(--rw-surface); border: 1px solid var(--rw-line); border-inline-start: var(--rw-space-1) solid var(--rw-accent-border); border-radius: var(--rw-radius-panel); padding: var(--rw-space-4) var(--rw-space-6); gap: var(--rw-space-3); }
/* The only card on Home was the only card in the product with no shadow. Logical per-side
   colours keep the brass inline-start stripe. */
.ic-home__attention .ic-section { border-block-color: var(--rw-edge); border-inline-end-color: var(--rw-edge); box-shadow: var(--rw-shadow-rest); --rw-hover-ground: var(--rw-surface-hover); }
/* Home in three layers: the work on ground, what is owed raised, the record recessed. :has(> *)
   and not :empty, because the region can render with no children for staff and whitespace would
   defeat :empty. The bar's track must not vanish into the well. */
.ic-home__figures:has(> *) { background: var(--rw-ground-2); border-radius: var(--rw-radius-panel); padding: var(--rw-panel-inset); box-shadow: var(--rw-well-shade); --rw-hover-ground: var(--rw-ground-2-hover); }
.ic-home__figures .ic-attend__bar { background: var(--rw-surface); }
/* In the well the recess edge is the division. The figure row's top rule and each figure's own
   drew a doubled line just under it that divided nothing, the box inside the box the card rule
   in riwaq-operations.css removes. Figures stacked in a narrow well keep the rule between them.
   The figures' own block padding is the inset there, so the well gives up its block padding and
   the row sits the same distance from all four edges. */
.ic-home__figures:has(> .ic-figrow:first-child) { padding-block: 0; }
.ic-home__figures > .ic-figrow:first-child,
.ic-home__figures > .ic-figrow:first-child > .ic-fig { border-block-start: 0; }
@container (max-width: 28rem) {
    .ic-home__figures > .ic-figrow:first-child > .ic-fig + .ic-fig { border-block-start: 1px solid var(--rw-line); }
}
@media (max-width: 40rem) {
    .ic-home__figures > .ic-figrow:first-child > .ic-fig + .ic-fig { border-block-start: 1px solid var(--rw-line); }
}
.ic-home__attention .ic-section + .ic-section { padding-block-start: var(--rw-space-4); border-block-start: 1px solid var(--rw-line); }
.ic-home__attention .ic-row { padding-inline: 0; }
.ic-home__attention .ic-row:last-child { border-block-end: 0; }
/* The entrance's five regions take the product's section rhythm rather than a 32px of their own.
   This override existed to be roomier than the 24px page default; now that the default IS the
   section rhythm, keeping 32px here would make the one screen every reader starts on the tightest
   in the product. One rhythm, and the grid is the only thing this rule still says. */
.rw-home .ic-org__inner { display: grid; gap: var(--rw-section-gap); }
/* The entrance's next obligation is the concept's mihrab niche now (owner alignment,
   2026-09-06 — concept section 02): deep zellige green under the arch-top radius, the
   inner brass keyline inset, the kicker in the on-green accent, and the brass pill CTA.
   The one deliberate moment of architecture on the page; every row below stays plain. */
/* ═══ HOME · THE ALCOVE (owner, 2026-09-25, "Mix A") ═════════════════════════════════════
   The day, the greeting and the next class down the left; the day's verse in a mihrab beside
   them. No box around either: the type does the work and one brass rule closes the opening. */
.rw-home__opening { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: var(--rw-space-12); align-items: stretch; padding-block-end: var(--rw-space-8); border-block-end: 1px solid var(--rw-line); }
.rw-home__opening:not(:has(.ic-niche)) { grid-template-columns: minmax(0, 1fr); }
.rw-home__lead { display: flex; flex-direction: column; justify-content: space-between; gap: var(--rw-space-8); min-inline-size: 0; }

/* The next class: one row, the date a small block, the class the headline. */
.ic-nextclass { display: grid; gap: var(--rw-space-6); }
.ic-nextclass__row { display: flex; align-items: center; gap: var(--rw-space-6); min-inline-size: 0; }
.ic-nextclass__when { flex: none; margin: 0; display: grid; justify-items: center; padding-inline-end: var(--rw-space-6); border-inline-end: 1px solid var(--rw-line-accent); }
.ic-nextclass__when span { font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--rw-accent-text); }
.ic-nextclass__when b { font-family: var(--rw-font-display); font-weight: 400; font-size: 2.5rem; line-height: 1; }
.ic-nextclass__what { min-inline-size: 0; }
.ic-nextclass__label { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--rw-accent-text); }
.ic-nextclass__title { margin: var(--rw-space-1) 0 0; font-family: var(--rw-font-display); font-weight: 400; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); line-height: 1.1; }
.ic-nextclass__meta { margin: var(--rw-space-1) 0 0; color: var(--rw-ink-muted); }
.ic-nextclass__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-3) var(--rw-space-6); }
.ic-nextclass__link { color: var(--rw-accent-text); font-weight: 700; text-decoration: none; min-block-size: var(--rw-target-min); display: inline-flex; align-items: center; }
.ic-nextclass__link:hover { text-decoration: underline; text-underline-offset: var(--rw-space-1); }
/* The onward arrow, drawn rather than typed so it keeps its space and turns with the page. */
.ic-nextclass__link::after, .ic-niche__open::after { content: "›"; margin-inline-start: .35em; }
:is(.ic-nextclass__link, .ic-niche__open):dir(rtl)::after { content: "‹"; }

/* The mihrab. A real pointed arch drawn behind the content — never a clip — with the lamp (the
   khatam star) near its apex and the day's verse named at its foot. */
.ic-niche { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-block-size: 19rem; padding: 0 var(--rw-space-4) var(--rw-space-6); }
.ic-niche__frame { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.ic-niche__fill { fill: var(--rw-surface); }
.ic-niche__edge { fill: none; stroke: var(--rw-line-accent); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ic-niche__star { position: relative; inline-size: 1.125rem; block-size: 1.125rem; fill: var(--rw-accent-fill); margin-block-start: 3.75rem; }
.ic-niche__body { position: relative; margin-block-start: auto; display: grid; justify-items: center; gap: var(--rw-space-1); }
.ic-niche__kicker { margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--rw-accent-text); }
.ic-niche__name { margin: 0; font-family: var(--rw-font-quran); font-size: 2.35rem; line-height: 1.25; color: var(--rw-green-ink); }
.ic-niche__name--latin { font-family: var(--rw-font-display); font-size: 1.6rem; }
.ic-niche__ref { margin: 0; font-size: var(--rw-text-small); color: var(--rw-ink-muted); }
.ic-niche__open { margin-block-start: var(--rw-space-2); color: var(--rw-accent-text); font-weight: 700; text-decoration: none; min-block-size: var(--rw-target-min); display: inline-flex; align-items: center; }
.ic-niche__open:hover { text-decoration: underline; text-underline-offset: var(--rw-space-1); }

/* ON A PHONE THE MIHRAB BECOMES AN INSCRIPTION (owner, 2026-09-25: "what if on the phone it
   looked like B"). A mihrab a phone's width wide is a sliver, and a framed card is one more box;
   instead the verse opens the page like an inscription over a door — above the date, between two
   fine brass lines, the lamp above the name, one small line under it. */
@media (max-width: 44rem) {
    .rw-home__opening { grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-6); }
    .ic-niche { order: -1; min-block-size: 0; display: grid; grid-template-columns: minmax(1rem, 1fr) auto minmax(1rem, 1fr); align-items: center; column-gap: var(--rw-space-3); padding: 0; }
    .ic-niche::before, .ic-niche::after { content: ""; block-size: 1px; background: var(--rw-line-accent); grid-row: 1 / span 2; align-self: center; }
    .ic-niche::before { grid-column: 1; background: linear-gradient(90deg, transparent, var(--rw-line-accent)); }
    .ic-niche::after { grid-column: 3; background: linear-gradient(90deg, var(--rw-line-accent), transparent); }
    .ic-niche__frame { display: none; }
    .ic-niche__star { grid-column: 2; grid-row: 1; justify-self: center; margin: 0; inline-size: .875rem; block-size: .875rem; }
    .ic-niche__body { grid-column: 2; grid-row: 2; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .4em; row-gap: 0; text-align: center; }
    .ic-niche__name { flex-basis: 100%; font-size: 2rem; order: -1; }
    .ic-niche__kicker { font-size: .72rem; letter-spacing: .04em; text-transform: none; font-weight: 600; color: var(--rw-ink-muted); }
    .ic-niche__ref::before, .ic-niche__open::before { content: "·"; margin-inline-end: .4em; color: var(--rw-ink-muted); }
    .ic-niche__ref { font-size: .72rem; }
    .ic-niche__open { margin: 0; min-block-size: var(--rw-target-min); font-size: .8rem; }
}

.ic-entrance__termname { color: var(--rw-ink-muted); font-size: var(--rw-text-small); font-weight: 800; }
.ic-entrance__top { display: flex; flex-wrap: wrap; gap: var(--rw-space-4); align-items: center; justify-content: space-between; }
.ic-entrance__list { list-style: none; padding: 0; margin: 0; }
.ic-entrance__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-2) var(--rw-space-4); padding: var(--rw-space-3) var(--rw-space-4); border-block-end: 1px solid var(--rw-line); transition: background-color var(--rw-motion-fast) var(--rw-ease-enter); }
.ic-entrance__what { display: grid; gap: var(--rw-space-1); flex: 1 1 18rem; min-inline-size: 0; }
.ic-entrance__what > span { display: block; }
.ic-entrance__go:empty { display: none; }
.ic-entrance__go { align-self: center; }
.ic-entrance__name { font-size: var(--rw-text-lead); font-weight: 800; }
/* The row is one link (worklist 4.5): the facts on the left, a chevron at the end. */
.ic-entrance__open { position: relative; padding-inline-end: var(--rw-space-6); color: inherit; text-decoration: none; min-block-size: var(--rw-target-min); }
.ic-entrance__open::after { content: "›"; position: absolute; inset-inline-end: 0; inset-block-start: 50%; transform: translateY(-50%); color: var(--rw-accent-text); font-size: 1.25rem; font-weight: 700; }
.ic-entrance__open:dir(rtl)::after { content: "‹"; }
.ic-entrance__open:hover .ic-entrance__name { color: var(--rw-accent-text); text-decoration: underline; }
/* The Home class rows were the only rows with no row response. A row the reader has only asked
   to join stays recessed, and the focus ring stays on the anchor. */
.ic-entrance__row:not(.ic-entrance__row--asked):has(.ic-entrance__open:hover) { background: var(--rw-hover-ground, var(--rw-ground-2)); }
.ic-entrance__meta { color: var(--rw-ink-muted); }
/* THE COUNTED FACT STAYS WHOLE. The meta line joins up to three facts with a neutral separator,
   and at 320 the last of them broke across lines as "12 of 18 / enrolled" — the run fits a line
   of this paragraph easily and was split because it began near the end of one. Found by the
   slice-D rig's isolated-run measure, which is why the separators are there: a fact that wraps
   inside itself reads as two facts. Only this one is pinned, because only this one is a count. */
.ic-entrance__meta .ic-tabular { white-space: nowrap; }
.ic-entrance__next { color: var(--rw-ink-muted); }
.ic-entrance__attention { color: var(--rw-warning-fg); background: var(--rw-warning-bg); padding: var(--rw-space-2); border-radius: var(--rw-radius-control); }
/* Guided forms: a decision index beside one readable field measure, stacked on phones. */
/* .ic-org__inner takes its grid and field-stack gap from the shared rule further down. */
.rw-setup .ic-admin__inner { display: grid; gap: var(--rw-space-6); }
.ic-setupentry__panel, .ic-setupentry__resume, .ic-suw__result, .ic-suw__conflict { display: grid; gap: var(--rw-field-stack); padding: var(--rw-panel-inset); background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-panel); }
.ic-setupentry__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rw-space-6);  }
.ic-setupentry__card { display: grid; gap: var(--rw-space-3); }
.ic-setupentry__cardlabel, .ic-setupentry__panelname { font-weight: 800; }
.ic-setupentry__resumeactions, .ic-suw__actions, .ic-wizard__actions { display: flex; flex-wrap: wrap; gap: var(--rw-space-3);  }
.ic-suw__bar { display: flex; flex-wrap: wrap; gap: var(--rw-space-4); align-items: center;  }
.ic-suw__title { flex: 1 1 16rem; }
.ic-suw__layout { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 3fr); gap: var(--rw-space-8); align-items: start; }
.ic-suw__rail { display: grid; gap: var(--rw-space-4); }
.ic-suw__steps, .ic-wizard__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--rw-space-2); }
.ic-suw__steplink { display: grid; gap: var(--rw-space-1); inline-size: 100%; min-block-size: var(--rw-target-min); padding: var(--rw-space-3); text-align: start; background: transparent; color: var(--rw-ink); border: 1px solid var(--rw-control-border); border-radius: var(--rw-radius-control); }
/* The current rung takes 2px off the start edge for its rule and gives the 2px back, like
   every other state in the product that grows a border. Both consumers pad by space-3. */
.ic-suw__step[aria-current="step"] .ic-suw__steplink, .ic-suw__step.is-current .ic-suw__steplink, .ic-wizard__step.is-current { border-inline-start: 3px solid var(--rw-accent-border); padding-inline-start: calc(var(--rw-space-3) - 2px); background: var(--rw-surface); font-weight: 800; }
.ic-suw__stepvalue, .ic-suw__note, .ic-suw__nothing, .ic-suw__reusemeta, .ic-suw__routewhen, .ic-wizard__note { font-size: var(--rw-text-small); color: var(--rw-ink-muted); }
.ic-suw__main { display: grid; gap: var(--rw-field-stack); max-inline-size: var(--rw-form-measure); min-inline-size: 0; padding: var(--rw-panel-inset); background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-panel); }
/* The setup wizard's panels were the only unshadowed bounded surfaces in their family. The three
   are never nested in one another. */
.ic-suw__main, .ic-suw__result, .ic-suw__conflict { border-color: var(--rw-edge); box-shadow: var(--rw-shadow-rest); --rw-hover-ground: var(--rw-surface-hover); }
/* One step, as its own named region inside the panel. It is what the panel's own gap used to
   space directly, now that the six alternative step bodies are six regions rather than loose
   children of one wrapper. */
.ic-suw__body { display: grid; gap: var(--rw-field-stack); min-inline-size: 0; }
/* F5'S SECOND INDICATOR, WHICH WAS RENDERING AS NOTHING AT ALL. The wizard has drawn five
   `.ic-suw__segment` spans since it was built and no sheet in the product ever carried a rule for
   them — so a span with no content, no size and no ground occupied no pixels, and the flow had one
   indicator where the family specifies two. The bar is a proportion and the sentence beside it is
   the count, which is why F5 asks for both. */
.ic-suw__stephead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-3); }
.ic-suw__segments { display: flex; gap: var(--rw-space-1); }
.ic-suw__segment { inline-size: var(--rw-space-6); block-size: var(--rw-space-1); border-radius: var(--rw-radius-control); background: var(--rw-control-border); }
.ic-suw__segment.is-done { background: var(--rw-accent-border); }
.ic-suw__create, .ic-suw__firstsession, .ic-suw__joins, .ic-suw__reusebody { display: grid; gap: var(--rw-space-3); }
.ic-suw__pair, .ic-suw__dates, .ic-wizard__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rw-field-stack); }
.ic-suw__reuserow { display: flex; flex-wrap: wrap; gap: var(--rw-space-3); padding: var(--rw-space-4); border: 1px solid var(--rw-control-border); border-radius: var(--rw-radius-control); align-items: center; }
.ic-suw__reusebody { flex: 1 1 12rem; min-inline-size: 0; }
.ic-suw__chips { display: flex; flex-wrap: wrap; gap: var(--rw-space-2); }
.ic-suw__chips .ic-suw__chip { min-block-size: var(--rw-target-min); min-inline-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); color: var(--rw-ink); background: var(--rw-ground); }
/* THE REVIEW AS A TABLE THAT LINES UP: label, value (with what happens to it beneath), Change —
   the same three columns on every row, so the eye runs down the values. It was "Label · Value ·
   fate" run together on one line, which read as a sentence per row with nothing aligned. */
.ic-suw__review { display: grid; margin: 0; border-block-start: 1px solid var(--rw-line); max-inline-size: var(--rw-form-measure); }
.ic-suw__reviewrow { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: var(--rw-space-4); align-items: baseline; padding-block: var(--rw-row-padding-block); border-block-end: 1px solid var(--rw-line); }
.ic-suw__reviewvalue { margin: 0; display: grid; gap: var(--rw-space-1); min-inline-size: 0; overflow-wrap: anywhere; }
.ic-suw__reviewchange { margin: 0; }

/* THE SCHEDULE SAID BACK: one strong line ("Every Saturday, 18:00–19:15"), the dates under it. */
.ic-suw__summary {
    display: grid; gap: var(--rw-space-2); justify-items: start;
    padding: var(--rw-panel-inset); max-inline-size: var(--rw-form-measure);
    background: var(--rw-ground-2); border-radius: var(--rw-radius-panel);
    border-inline-start: 3px solid var(--rw-accent-border);
}
.ic-suw__summaryhead { margin: 0; font-size: var(--rw-text-lead); font-weight: 800; }
.ic-suw__summaryline { margin: 0; font-variant-numeric: tabular-nums; }
.ic-suw__summaryempty { margin: 0; color: var(--rw-ink-muted); }

/* HOW LEARNERS JOIN: two tick boxes, each a whole card that is its own label, so the card is the
   target and the native checkbox carries the checked state (and its own focus ring). */
.ic-suw__join {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--rw-space-3); align-items: start;
    padding: var(--rw-space-4); max-inline-size: var(--rw-form-measure); cursor: pointer;
    border: 1px solid var(--rw-control-border); border-radius: var(--rw-radius-control); background: var(--rw-ground);
}
.ic-suw__join:has(.ic-suw__joinbox:checked) {
    background: var(--rw-ground-2); border-color: var(--rw-accent-border);
    box-shadow: inset 3px 0 0 var(--rw-accent-border);
}
[dir="rtl"] .ic-suw__join:has(.ic-suw__joinbox:checked) { box-shadow: inset -3px 0 0 var(--rw-accent-border); }
.ic-suw__joinbox { inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.15rem; accent-color: var(--rw-green); }
.ic-suw__jointext { display: grid; gap: var(--rw-space-1); }
.ic-suw__jointitle { font-weight: 700; }
.ic-suw__joinbody { color: var(--rw-ink-muted); }
.ic-suw__joinmeta { font-size: var(--rw-text-small); color: var(--rw-ink-muted); }

/* THE LINK ON THE RESULT, the one time it is readable. */
.ic-suw__joinlink {
    display: grid; gap: var(--rw-space-3); max-inline-size: var(--rw-form-measure);
    padding: var(--rw-panel-inset); border-radius: var(--rw-radius-panel);
    background: var(--rw-ground-2); border: 1px solid var(--rw-accent-border);
}
.ic-suw__joinlink .ic-linkonce__url { margin: 0; padding: var(--rw-space-3); background: var(--rw-ground); border-radius: var(--rw-radius-control); }

/* ── F5 · WHAT IS CHOSEN SAYS SO ──────────────────────────────────────────
   THE OWNER PRESSED A DAY AND A JOIN ROUTE AND NEITHER OF THEM CHANGED. `.ic-suw__chip` and
   `.ic-suw__route` each had exactly one rule in the whole product — the resting state above —
   and no sheet carried a rule for `[aria-pressed="true"]` or the `is-on`
   class the page drew beside them, so a chosen day was pixel-identical to an unchosen one. The
   routes are a radio group, and a radio group with no selected appearance is a form a masjid
   cannot see its own answer in.

   Selection is drawn from the attribute that announces it, in the pressed vocabulary the
   operations and quiz sheets established — a fill, a doubled border and a heavier weight, so it
   never rests on colour alone — and each rule that grows the 1px border to 3px gives the 2px
   back in padding, so choosing never shifts the row. Measured on the grounds these sit on:
   chosen text 8.90:1 by day and 5.35:1 at night, the quiet line inside a chosen route 6.56:1 and
   4.68:1, and the row's own boundary 3.85:1 and 5.87:1. */
.ic-suw__chips .ic-suw__chip[aria-pressed="true"] {
    background: var(--rw-green); color: var(--rw-on-green);
    border: 3px double var(--rw-control-border); font-weight: 700;
    padding: calc(var(--rw-space-2) - 2px) calc(var(--rw-space-3) - 2px);
}
/* THE SAME DEFECT A THIRD TIME, AND THIS ONE CANNOT USE AN ATTRIBUTE. The programme row and the
   staff row draw `is-chosen`, and no sheet styled that either. Neither row is itself a control —
   the press is the button inside it, which does change its word — so there is no aria state on
   the row to read and the class is the only honest hook. A raised ground and a rule down the
   start edge rather than a fill, because the row keeps a button whose own colours stay legible
   on it; the 2px the rule takes is given back in the same body. */
.ic-suw__reuserow.is-chosen {
    background: var(--rw-ground-2); font-weight: 600;
    border-inline-start: 3px solid var(--rw-accent-border);
    padding-inline-start: calc(var(--rw-space-4) - 2px);
}

/* ── F5 · THE TWENTY-SIX HOOKS THAT NO SHEET STYLED ─────────────────────────────
   Of the 61 `ic-suw__*` hooks this flow draws, 26 had no rule in any of the thirteen sheets, so
   the step's question, its lede, the character meter, the review sentence, the result and the
   conflict all rendered at whatever the cascade happened to leave them. A class no sheet styles
   is a hook that lies about being designed. Each one below is the role it names; nothing here
   invents a new vocabulary. */
.ic-suw__question, .ic-suw__resulttitle, .ic-suw__conflicttitle {
    font-size: var(--rw-text-lead); font-weight: 800; margin: 0;
    max-inline-size: var(--rw-reading-measure);
}
.ic-suw__createtitle { font-size: var(--rw-text-body); font-weight: 800; margin: 0; }
.ic-suw__lede, .ic-suw__resultbody, .ic-suw__conflictbody {
    margin: 0; max-inline-size: var(--rw-reading-measure); color: var(--rw-ink-muted);
}
.ic-suw__stepcount { font-weight: 700; font-variant-numeric: tabular-nums; }
.ic-suw__steplabel, .ic-suw__reusename, .ic-suw__firstlabel, .ic-suw__reviewlabel { font-weight: 700; }
/* The days' group has no control to label, so its label is a span; it is still a label. */
.ic-suw__grouplabel { display: block; font-weight: 700; margin-block-end: var(--rw-label-gap); }
.ic-suw__firstnote, .ic-suw__meter {
    font-size: var(--rw-text-small); color: var(--rw-ink-muted);
}
.ic-suw__meter { font-variant-numeric: tabular-nums; margin-inline-start: var(--rw-label-gap); }
/* What happens to a row, as a small tag under its value. */
.ic-suw__reviewfate {
    justify-self: start; font-size: var(--rw-text-small); color: var(--rw-ink-muted);
    padding: 0 var(--rw-space-2); border: 1px solid var(--rw-line); border-radius: 999px;
}
.ic-suw__invitefailures { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--rw-space-1); }
/* A description is written in, not typed into a slot: it grows downwards and never sideways. */
.ic-suw__desc { min-block-size: 6rem; resize: vertical; }
/* A number and a room name are short answers and a full-measure field invites a long one. */
.ic-suw__capacity, .ic-suw__room { max-inline-size: 16rem; }
/* The promise about whose account it is, kept as a promise rather than another paragraph. */
.ic-suw__ownership {
    margin: 0; max-inline-size: var(--rw-reading-measure);
    padding: var(--rw-space-3) var(--rw-space-4);
    background: var(--rw-ground-2); border-radius: var(--rw-radius-control);
}
/* `.ic-suw__draftkept` left this rule with the line it styled: the wizard printed "Your draft is
   saved either way." at the foot of every step while the bar above already carried the draft
   marker, so the same promise was on the screen twice. */
.ic-suw__saved { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.ic-wizard__steps { grid-template-columns: repeat(4, minmax(0, 1fr));  }
.ic-wizard__step { padding: var(--rw-space-3); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-control); }
.ic-wizard__stepnum { font-weight: 800;  }
/* F5 · the class wizard: a rail recording what is saved, and a main column with the count in words and in segments. */
.ic-wizard__layout { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 3fr); gap: var(--rw-space-8); align-items: start; }
.ic-wizard__rail { display: grid; gap: var(--rw-space-4); }
.ic-wizard__layout .ic-wizard__steps { grid-template-columns: minmax(0, 1fr); }
.ic-wizard__step { display: grid; gap: var(--rw-space-1); }
.ic-wizard__step.is-done { border-color: var(--rw-control-border); }
.ic-wizard__step.is-later { color: var(--rw-ink-muted); }
/* The import flow names its current step `is-here` (with aria-current) where the class wizard says
   `is-current`; both get the same brass edge and ground so the rail says where the reader is. */
.ic-wizard__step.is-here, .ic-wizard__step[aria-current="step"] { border-color: var(--rw-control-border); border-inline-start: 3px solid var(--rw-accent-border); background: var(--rw-surface); font-weight: 600; }
.ic-wizard__stepvalue, .ic-wizard__promise { font-size: var(--rw-text-small); color: var(--rw-ink-muted); }
.ic-wizard__main { display: grid; gap: var(--rw-field-stack); min-inline-size: 0; }
.ic-wizard__stephead { display: grid; gap: var(--rw-space-2); }
.ic-wizard__count { font-weight: 600; }
/* AS MANY SEGMENTS AS THE FLOW HAS STEPS. This was repeat(4), which is the class wizard's
   count and nobody else's: the roster import is three steps, and a three-segment bar in a
   four-column grid draws three quarters of a bar and an empty quarter. Auto-flow lays four
   children out identically - four equal implicit tracks instead of four equal explicit ones -
   so the wizard is unchanged (cohort C2, declared: one shared rule, one other consumer).

   AND THE CLAIM THAT IT WAS "RE-RENDERED AND RE-SHOT" WAS FALSE, which is the same defect as a
   false sentence on a page (rule 39). The correction written for that then dated the wizard's
   photographs to one sweep, and that was false in exactly the same way: the wizard's own route is
   also shot by tools/sweep/slice-b1-shots.mjs, as b1-wizard-step1 and b1-wizard-step2. Rule 39
   twice in one comment, both times about frames somebody had not looked for.

   SO NO DATE IS CITED HERE, and that is the correction rather than a better date. A date about
   photographs is not a fact this repository holds - artifacts/ is untracked, so a comment resting
   on a timestamp can only be checked by whoever happens to have the files in front of them. What
   is asserted instead is what a guard can read. The class wizard is not a case in this cohort's
   rig at all, the rig that does shoot its own route is B1's, and this cohort did not run it. This
   rule rests on the two declarations being equivalent at four children, which is a fact about the
   grid, and on the import's own frames, which this cohort did shoot. Nobody has photographed the
   wizard under it. */
.ic-wizard__segments { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--rw-space-1); }
.ic-wizard__segment { block-size: var(--rw-space-1); background: var(--rw-line); border-radius: var(--rw-radius-control); }
.ic-wizard__segment.is-done { background: var(--rw-accent-border); }
.ic-wizard__summary ul { margin: 0; padding-inline-start: var(--rw-space-4); }
@media (max-width: 52rem) {
 /* F5's recorded departure: below 52rem the rail keeps its promise and drops its step list; the count
    sentence and the segments already say where the reader is. */
 .ic-wizard__layout { grid-template-columns: minmax(0, 1fr); }
 .ic-wizard__layout .ic-wizard__steps { display: none; }
}
.rw-reader-niche { border: 1px solid var(--rw-accent-border); border-radius: var(--rw-arch-rise) var(--rw-arch-rise) var(--rw-radius-panel) var(--rw-radius-panel); background: var(--rw-ground-2); padding-block-start: var(--rw-space-12); }
.ic-qreader__pick { max-inline-size: var(--rw-form-measure); inline-size: 100%; }
.ic-qreader__select { min-block-size: var(--rw-target-min); }
@media (max-width: 48rem) {
 .rw-auth .ic-loginform__inner, .ic-fromproduct__inner, .rw-land__feats, .ic-setupentry__cards, .ic-suw__layout { grid-template-columns: minmax(0, 1fr); }
 /* On a phone the brand panel shrinks to a band with the mark rather than vanishing: hidden, a
    sign-in opened from a link carried no sign of whose page it was. The verse and the arch stay
    on the wide layout. */
 .rw-auth__brand { flex-direction: row; align-items: center; padding: var(--rw-space-4) var(--rw-page-gutter); }
 .rw-auth__brand .rw-auth__quote, .rw-auth__brand .rw-auth__brandarch { display: none; }
 .rw-auth__lockup { inline-size: 8.5rem; }
 /* The band keeps its own height and the form starts under it; stretched rows split the spare
    height between them and floated the form mid-screen. */
 .rw-auth .ic-loginform__inner { grid-template-rows: auto 1fr; }
 .rw-auth__main { align-content: start; }
 .rw-land__heroinner { padding-block-start: var(--rw-space-8); }
 .ic-suw__steps, .ic-wizard__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .ic-suw__pair, .ic-suw__dates, .ic-wizard__pair { grid-template-columns: minmax(0, 1fr); }
 .ic-suw__reviewrow { grid-template-columns: minmax(0, 1fr) auto; }
 .ic-suw__reviewlabel { grid-column: 1 / -1; }
}
.ic-section + .ic-figrow { border-block-start: 1px solid var(--rw-line); padding-block-start: var(--rw-space-8); }

.ic-entrance__classes { display: grid; gap: var(--rw-space-8); }
.ic-entrance__term { display: grid; gap: var(--rw-space-4); }
.ic-setupentry, .rw-setup .ic-org__inner { display: grid; gap: var(--rw-field-stack); }

.rw-auth__mark .ic-aynmark { inline-size: 100%; block-size: 100%; }

/* Prose destinations remain individually operable at the product target size. */
.rw-auth a, .ic-fromproduct__more { display: inline-flex; align-items: center; min-block-size: var(--rw-target-min); min-inline-size: var(--rw-target-min); }

.rw-auth h1 { font-family: var(--rw-font-display); font-weight: 400; }
/* Localized field labels and hints may shrink with the form at 200% text size. */
.rw-auth .ic-field, .rw-auth label, .rw-auth .ic-field__hint, .rw-auth .ic-loginform__passwordwrap { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; }
.rw-setup a { display: inline-flex; align-items: center; min-block-size: var(--rw-target-min); min-inline-size: var(--rw-target-min); }
/* Setup's advanced line: two links inside running prose. Block padding on an inline box enlarges
   what is pressed without growing the line box, so the 48px target holds and the paragraph keeps
   its own leading; the inline-flex rule above, borrowed for it once, set the lines 60px apart. */
.ic-setup__advanced a { padding-block: calc((var(--rw-target-min) - 1em) / 2); }
.rw-setup .ic-field, .rw-setup label, .rw-setup .ic-field__hint, .rw-setup select { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; }
/* Mixed-script records remain within shrinkable tracks when text is enlarged. Interactive
   elements are deliberately NOT in these lists: at zero specificity this reset loads after the
   foundation files and would silently strip the 48px min-inline-size from every anchor-button
   and button here — the exact trap that undersized the Urdu day chips. They wrap instead. */
.rw-home, .rw-home :where(div, section, header, p, h1, h2, h3, span, bdi), .rw-setup :where(div, nav, li, span) { min-inline-size: 0; overflow-wrap: anywhere; }
.rw-home a, .rw-setup button { overflow-wrap: anywhere; }
.rw-home .ic-btn, .rw-setup .ic-btn { white-space: normal; max-inline-size: 100%; }

/* ── F17 · The masjid home screen's remaining leaves ────────────────────────────────────
   NINE hooks on Organization/Home named no rule - the count said eight until a blind review
   found ic-entrance__row--asked hiding behind a class attribute built by interpolation. Five are fixed — one of them by joining
   the heading lists in riwaq-components.css rather than restating their values here, so the
   two cannot drift. The other four, ic-home__exceptions, ic-home__classes, ic-home__schedule and
   ic-home__figures, are grouping divs, and the page's two-level rhythm already comes from them
   — space between groups via .ic-org__inner's grid gap, a hairline within a group via
   `.ic-section + .ic-section`. NONE OF THEM TAKES A GAP OF ITS OWN: that would push sections
   apart and leave that hairline floating in the middle of the space, saying nothing. Three are
   deliberately left with no rule at all. The fourth, ic-home__figures, now carries the record's
   well (the depth pass, in the dashboard block above): a recessed ground, and only when the
   region has content, so a staff Home with no figures shows no empty well. */

/* An absence is not a value. Italic and nothing else: the base is already muted, and muting
   it further would cross the contrast floor. No status colour — a class with no session
   booked between terms is normal. */
.ic-entrance__next--none { font-style: italic; }

/* Two meta lines that do the same job as every other meta line in the product, and until now
   matched none of them. */
/* `.ic-row__by` is NOT declared here. It joins .ic-row__meta's own declaration in
   riwaq-components.css instead, so the two cannot drift - which is the rule this block's
   header states for the heading and then broke for this line. */

/* A class the reader has ASKED to join and that has not decided yet. The row already carries
   an "Awaiting review" badge; this makes the whole row recede, so a provisional row is not
   scanned as one of the classes they actually have. Recessed ground is the house idiom for
   exactly that, and muted text still clears AA on it. */
.ic-entrance__row--asked { background: var(--rw-ground-2); }

/* A SLOT FOR A TEMPORAL LABEL, NOT A TIME. Of its three uses only the schedule's is a clock;
   the other two return prose from DueLabel and Ago — "in 3 days", "an hour ago". So tabular
   figures are NOT set here: forcing them inside a sentence widens the digits against the
   letters and the phrase comes apart. The one real clock opts in with .ic-tabular itself. */
.ic-row__time { color: var(--rw-ink-muted); font-size: var(--rw-text-small); white-space: nowrap; }

/* ── F18 · one class, as the masjid holds it ────────────────────────────────────────────────
   Replaces `.ic-mockreg`, which drew a marking keypad and was the only picture of the product on
   the public page — so the page showed an attendance app while its own hero named four
   capabilities. Same frame, same slot; five capabilities in it instead of one. */
/* Raised at rest: the landing's one lifted object is the product window under the hero (depth
   spec §1.2, one lift per public page), so the sample class no longer competes with it. */
.ic-mockclass { display: grid; background: var(--rw-surface); border: 1px solid var(--rw-edge); border-radius: var(--rw-radius-frame); box-shadow: var(--rw-shadow-rest); overflow: hidden; min-inline-size: 0; }
.ic-mockclass__bar { display: flex; align-items: center; gap: var(--rw-space-2); padding: var(--rw-space-3) var(--rw-panel-inset); background: var(--rw-portico); color: var(--rw-on-portico); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.ic-mockclass__dot { inline-size: .5625rem; block-size: .5625rem; border-radius: var(--rw-radius-pill); background: var(--rw-accent-on-portico); flex: none; }
.ic-mockclass__body { display: grid; gap: var(--rw-space-3); padding: var(--rw-panel-inset); min-inline-size: 0; }
.ic-mockclass__name { margin: 0; font-family: var(--rw-font-display); font-weight: 400; font-size: var(--rw-text-lead); }
.ic-mockclass__meta { margin: 0; color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.ic-mockclass__rows { display: grid; gap: var(--rw-space-2); margin: 0; padding: 0; list-style: none; }
.ic-mockclass__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rw-space-2) var(--rw-space-3); padding: var(--rw-space-3); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-control); background: var(--rw-ground); min-inline-size: 0; }
/* The key names the capability, so it is the one brass thing in the card - a border-weight accent
   on a label, never brass as body text, which is 2.90:1 on limestone. */
.ic-mockclass__k { flex: none; min-inline-size: 6.5rem; font-size: var(--rw-text-small); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--rw-accent-text); }
.ic-mockclass__v { flex: 1 1 10rem; min-inline-size: 0; overflow-wrap: anywhere; }
.ic-mockclass__tag { white-space: nowrap; font-size: var(--rw-text-small); font-weight: 700; padding: .1rem .5rem; border-radius: var(--rw-radius-pill); }
/* A narrow card stacks each row's label over its value; side by side at phone width the value
   broke mid-phrase ("lines 1–" / "10") and the badge fell under the label. */
.ic-mockclass { container-type: inline-size; }
@container (max-width: 26rem) {
    .ic-mockclass__row { display: grid; justify-items: start; gap: var(--rw-space-1); }
}
/* A status bg travels with its own -fg. The state inks are for a surface, not a status bg: at
   night success-ink on success-bg was 3.73:1 and warning-ink 4.50. The paired fg measures
   8.53 / 5.69 and 6.92 / 6.67. */
.ic-mockclass__tag--ok { background: var(--rw-success-bg); color: var(--rw-success-fg); }
.ic-mockclass__tag--due { background: var(--rw-warning-bg); color: var(--rw-warning-fg); }
.ic-mockclass__ayah { font-family: var(--rw-font-quran); font-size: 1.15rem; unicode-bidi: isolate; }

/* ═══ THE READING VIEW (owner, 2026-09-25) ═══════════════════════════════════════════════
   One calm column and no box. The arch is its portal, the ayah is set large and whole, and the
   hadith leads with the Prophet's words ﷺ. */
.rw-read .ic-org__inner { max-inline-size: 42.5rem; margin-inline: auto; display: grid; gap: 0; }
.rw-read__back { justify-self: start; color: var(--rw-accent-text); font-weight: 700; text-decoration: none; min-block-size: var(--rw-target-min); display: inline-flex; align-items: center; }
.rw-read__back::before { content: "‹"; margin-inline-end: .35em; }
.rw-read__back:dir(rtl)::before { content: "›"; }
.rw-read__portal { position: relative; inline-size: min(100%, 19rem); block-size: 15.5rem; margin: var(--rw-space-6) auto var(--rw-space-2); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; padding-block-end: var(--rw-space-6); }
.rw-read__arch { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.rw-read__arch path { fill: none; stroke: var(--rw-line-accent); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.rw-read__star { position: absolute; inset-block-start: 2.75rem; inset-inline-start: calc(50% - .5625rem); inline-size: 1.125rem; block-size: 1.125rem; fill: var(--rw-accent-fill); }
.rw-read__portal > :not(svg) { position: relative; }
.rw-read__kicker { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--rw-accent-text); }
.rw-read__sura { margin: var(--rw-space-1) 0 0; font-family: var(--rw-font-quran); font-weight: 400; font-size: 3.5rem; line-height: 1.2; color: var(--rw-green-ink); }
.rw-read__sura bdi { font-family: var(--rw-font-display); font-size: 2.25rem; }
.rw-read__ref { margin: 0; color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.rw-read__ayah { margin: var(--rw-space-6) 0; font-family: var(--rw-font-quran); font-size: 1.95rem; line-height: 2.15; text-align: center; color: var(--rw-ink); }
.rw-read__end { color: var(--rw-accent-text); white-space: nowrap; }
/* The Arabic surah name and the ayah's end mark are children the base :lang(ar) rule would re-face
   in the interface's Arabic stack; they inherit the frozen scripture stack from their surface. The
   Latin name (the bdi) keeps its display face. */
.rw-read__sura > [lang="ar"], .rw-read__ayah * { font-family: inherit; }
.rw-read__lang { display: block; margin-block-end: var(--rw-space-2); font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rw-ink-muted); }
.rw-read__meaning { margin: 0; font-size: 1.125rem; line-height: 1.75; }
.rw-read__meaning--quiet { font-size: 1rem; color: var(--rw-ink-muted); }
.rw-read__ornament { display: flex; align-items: center; gap: var(--rw-space-4); margin: var(--rw-space-12) 0 var(--rw-space-8); }
.rw-read__ornament::before, .rw-read__ornament::after { content: ""; flex: 1; block-size: 1px; background: var(--rw-line-accent); }
.rw-read__ornament svg { inline-size: 1.125rem; block-size: 1.125rem; fill: var(--rw-accent-fill); }
.rw-read__hadith { display: grid; gap: var(--rw-space-3); }
.rw-read__hadith > .rw-read__kicker { text-align: center; }
.rw-read__saying { margin: var(--rw-space-2) 0 0; text-align: center; }
.rw-read__saying blockquote { margin: 0; }
.rw-read__saying p { margin: 0; font-family: var(--rw-font-display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.35; }
.rw-read__saying p::before { content: "“"; color: var(--rw-accent-fill); margin-inline-end: .1em; }
.rw-read__saying p::after { content: "”"; color: var(--rw-accent-fill); margin-inline-start: .1em; }
.rw-read__saying figcaption { margin-block-start: var(--rw-space-3); color: var(--rw-ink-muted); font-size: var(--rw-text-small); font-weight: 600; }
.rw-read__narration { border-block-start: 1px solid var(--rw-line); margin-block-start: var(--rw-space-4); }
.rw-read__narration > summary { cursor: pointer; list-style: none; min-block-size: var(--rw-target-min); display: flex; align-items: center; justify-content: center; gap: var(--rw-space-2); color: var(--rw-accent-text); font-weight: 700; }
.rw-read__narration > summary::-webkit-details-marker { display: none; }
.rw-read__narration > summary::after { content: "›"; transition: transform var(--rw-motion-fast); }
.rw-read__narration[open] > summary::after { transform: rotate(90deg); }
.rw-read__hadith-ar { margin: var(--rw-space-3) 0; font-family: var(--rw-font-quran); font-size: 1.5rem; line-height: 2; text-align: center; }
.rw-read__source { margin: 0; color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.rw-read__foot { margin: var(--rw-space-12) 0 0; text-align: center; }
/* A link on its own line, not in a sentence: it needs the target height (2.5.8) that a link in
   running text is excused. */
.rw-read__foot a { display: inline-flex; align-items: center; min-block-size: var(--rw-target-min); color: var(--rw-accent-text); font-weight: 700; text-decoration: none; }
.rw-read__foot a::after { content: "›"; margin-inline-start: .35em; }
.rw-read__none { text-align: center; color: var(--rw-ink-muted); }
.rw-read__credit { margin: var(--rw-space-4) 0 0; text-align: center; font-size: .8rem; color: var(--rw-ink-muted); }
.rw-read__credit a { color: inherit; }

/* Word by word and the tafsir: one quiet ruled line each until opened. */
.rw-deeper { margin-block-start: var(--rw-space-8); border-block-end: 1px solid var(--rw-line); }
.rw-deeper__part { border-block-start: 1px solid var(--rw-line); }
.rw-deeper__head { margin: 0; font: inherit; }
.rw-deeper__toggle { inline-size: 100%; min-block-size: var(--rw-target-min); display: flex; align-items: center; justify-content: space-between; gap: var(--rw-space-3); padding: var(--rw-space-3) 0; border: 0; background: none; color: var(--rw-ink); font: inherit; font-weight: 700; cursor: pointer; text-align: start; }
.rw-deeper__toggle svg { inline-size: .75rem; block-size: .75rem; fill: none; stroke: var(--rw-accent-text); stroke-width: 1.6; transition: transform var(--rw-motion-fast); }
.rw-deeper__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.rw-deeper__body { padding-block-end: var(--rw-space-6); }
.rw-deeper__note { margin: var(--rw-space-3) 0 0; font-size: var(--rw-text-small); color: var(--rw-ink-muted); }
.rw-deeper__more { margin-block-start: var(--rw-space-3); min-block-size: var(--rw-target-min); padding: 0; border: 0; background: none; color: var(--rw-accent-text); font: inherit; font-weight: 700; cursor: pointer; }
.rw-words { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--rw-space-3); }
.rw-words__word { display: grid; gap: var(--rw-space-1); justify-items: center; text-align: center; padding: var(--rw-space-3) var(--rw-space-2); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-control); background: var(--rw-surface); }
.rw-words__ar { font-family: var(--rw-font-quran); font-size: 1.6rem; line-height: 1.6; color: var(--rw-green-ink); }
.rw-words__tr { font-size: .8rem; font-style: italic; color: var(--rw-ink-muted); }
.rw-words__en { font-size: var(--rw-text-small); line-height: 1.35; }
.rw-tafsir__by { margin: 0 0 var(--rw-space-3); font-size: var(--rw-text-small); color: var(--rw-ink-muted); font-weight: 600; }
.rw-tafsir p { margin: 0 0 var(--rw-space-4); line-height: 1.75; }
.rw-tafsir[dir="rtl"] p { font-family: var(--rw-font-quran); font-size: 1.25rem; line-height: 2; }
.rw-tafsir__ar { font-family: var(--rw-font-quran); font-size: 1.15em; unicode-bidi: isolate; margin-inline: .2em; }

/* The season on home: a crescent and one line, only when there is a season to speak of. */
.rw-home__season { margin: 0; display: inline-flex; align-items: center; gap: var(--rw-space-2); color: var(--rw-accent-text); font-weight: 700; }
.rw-home__season svg { inline-size: 1rem; block-size: 1rem; fill: var(--rw-accent-fill); flex: none; }
.rw-home__season:dir(rtl) svg { transform: scaleX(-1); }

/* The listen control: one button, the reciter, a thin line of progress. */
.rw-listen { justify-self: center; display: flex; align-items: center; gap: var(--rw-space-4); margin: 0 auto var(--rw-space-8); inline-size: fit-content; max-inline-size: 100%; padding: var(--rw-space-2) var(--rw-space-6) var(--rw-space-2) var(--rw-space-2); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-pill); background: var(--rw-surface); }
.rw-listen audio { display: none; }
.rw-listen__play { flex: none; inline-size: var(--rw-target-min); block-size: var(--rw-target-min); border: 0; border-radius: var(--rw-radius-pill); background: var(--rw-green); color: var(--rw-on-green); display: grid; place-items: center; cursor: pointer; }
.rw-listen__icon { inline-size: .875rem; block-size: .875rem; fill: currentColor; }
.rw-listen__icon--play { margin-inline-start: 2px; }
.rw-listen__icon--pause, .rw-listen.is-playing .rw-listen__icon--play { display: none; }
.rw-listen.is-playing .rw-listen__icon--pause { display: block; }
.rw-listen__text { display: grid; min-inline-size: 0; }
.rw-listen__text b { font-size: var(--rw-text-small); }
.rw-listen__text > span { font-size: .8rem; color: var(--rw-ink-muted); font-variant-numeric: tabular-nums; }
/* The length joins the reciter only once it is known, so nothing trails off before it loads. */
.rw-listen__text [data-listen-time]:not(:empty)::before { content: " · "; }
.rw-listen__track { inline-size: 8.75rem; block-size: 3px; border-radius: 3px; background: var(--rw-line); overflow: hidden; }
.rw-listen__track > span { display: block; block-size: 100%; inline-size: 0; background: var(--rw-accent-fill); }

@media (max-width: 44rem) {
    .rw-read__portal { block-size: 12.5rem; inline-size: min(100%, 14.5rem); }
    .rw-read__star { inset-block-start: 2.1rem; }
    .rw-read__sura { font-size: 2.75rem; }
    .rw-read__ayah { font-size: 1.6rem; line-height: 2.05; }
    .rw-listen__track { display: none; }
}