/* Riwaq people, administration and communication surfaces: the personal start (/app), the
   people workspace (roster, staff, pending, invitations, former, import, conversion, one
   learner's record, the audited emergency-contact reveal), academic setup and curriculum,
   the organization's own settings family (profile, access, branding, lifecycle, marks,
   public profile, reflections), privacy requests, the activity record, the noticeboard,
   failed email delivery, the account screens, notifications, and the platform console.
   Every colour is a shared rw pair from the foundation; layout is by named contract (page
   gutter, panel inset, field stack, row density). Loaded after riwaq-quizlib.css.

   An interactive element may shed its min width (`min-inline-size: 0`) ONLY where the same
   rule guarantees the press another way — here `flex: 1 1 <large>` in a wrapping row (the
   security password input) or `inline-size: 100%` inside a zero-floored track — never as a
   bare reset, so no target falls below `--rw-target-min`. That pairing keeps the
   zero-specificity width-reset trap documented in riwaq-bespoke.css disarmed.

   SELECTION IS DRAWN FROM THE STATE THAT ANNOUNCES IT in the forced-colors-safe doubled
   border and heavier weight the operations sheet established — and every rule that grows
   the 1px border to 3px gives the 2px back in padding, so choosing never shifts the row.
   This sheet is scanned by the same mechanical compensation guard as the other page sheets
   (QuizLibraryStylesheetTests.A_selected_state_gives_back_the_borders_growth). */

/* ── The personal start (/app) ──────────────────────────────────────────────────────── */

/* "TODAY FIRST" (Riwaq, 2026-09-26). The one-card centered variant (`__cards--one`), the card body
   and the card's action pair went with their markup; the new blocks are ic-today and
   ic-start__layout/__main/__side/__waiting/__asked/__links.

   ONE THING TO LOOK AT. The page answers "what needs me now?" in one raised card (Today), drawn from
   every masjid the reader belongs to. Everything else stands on the ground: the masjids as a ledger
   of doors directly beneath it, and the record (what was asked for) and the account beside it on
   wide screens. Wells and cards follow SPEC §1.2: one raised plane per region, rows only tint. */

.ic-start { min-inline-size: 0; }
/* The reading frame widens from 56rem to 60rem to hold the aside; it is still well inside the
   shell's page measure (90rem). Its columns are chosen by a container query, not a media query: a
   media query's rem is the browser's 16px whatever the reader's text size, so at 200% text the aside
   would keep its width and crush the Today card. A container query's rem is the page's. */
.ic-start__inner { max-inline-size: 60rem; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-8); min-inline-size: 0; container: ic-start / inline-size; }
.ic-start__header { min-inline-size: 0; }

/* Now and the way in on one side, the record and the account on the other. Narrow, the DOM order is
   the reading order: waiting, today, where you are a member, what you asked for, your account. */
.ic-start__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-section-gap); align-items: start; min-inline-size: 0; }
.ic-start__main, .ic-start__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-section-gap); align-content: start; min-inline-size: 0; }
@container ic-start (min-width: 52rem) {
    .ic-start__layout { grid-template-columns: minmax(0, 1fr) minmax(13rem, 16rem); column-gap: clamp(2rem, 5vw, 4rem); }
}

/* Region heads are one quiet rung under the greeting, ruled like a ledger. The two raised regions
   (Today, Waiting for your answer) give their own titles the display face instead. */
.ic-start__region { display: grid; gap: 0; min-inline-size: 0; }
.ic-start__region-head { font-size: var(--rw-text-body); font-weight: 700; color: var(--rw-ink); padding-block-end: var(--rw-space-3); border-block-end: 1px solid var(--rw-line); }
.ic-start__selector { min-inline-size: 0; }

/* ── Today: the page's one raised plane ─────────────────────────────────────────────────── */
.ic-today {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-4); min-inline-size: 0;
    padding: var(--rw-panel-inset); padding-block-end: var(--rw-space-4);
    background: var(--rw-surface); border: 1px solid var(--rw-edge); border-radius: var(--rw-radius-panel);
    box-shadow: var(--rw-shadow-rest); --rw-hover-ground: var(--rw-surface-hover);
    container: ic-today / inline-size;
}
.ic-today__day { display: grid; gap: var(--rw-space-1); min-inline-size: 0; }
.ic-today__day--later { border-block-start: 1px solid var(--rw-line); padding-block-start: var(--rw-space-4); }
.ic-today__head { font-family: var(--rw-font-display); font-weight: 400; font-size: var(--rw-text-title); line-height: var(--rw-leading-display); }
/* The masjid Home's next-class kicker, so the personal hub and each masjid's Home read as one family. */
.ic-today__subhead, .ic-today__kicker { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; line-height: 1.4; color: var(--rw-accent-text); }
.ic-today__none { color: var(--rw-ink-muted); padding-block: var(--rw-space-2); }
.ic-today__items { list-style: none; margin: 0; padding: 0; display: grid; min-inline-size: 0; }

/* One obligation, narrow first: when over what, the day's action (a register) at inline-end.
   NO SUBGRID, ON PURPOSE: the wide rule below gives every item the same fixed "when" track, so the
   titles line up down the card on every engine, the MAUI iOS WebView included. */
.ic-today__item {
    --ic-today-when: 8.5rem;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "when go" "what go";
    align-items: center; column-gap: var(--rw-space-4); row-gap: 0;
    padding-block: var(--rw-space-3); min-inline-size: 0;
}
.ic-today__item + .ic-today__item { border-block-start: 1px solid var(--rw-line); }
.ic-today__when { grid-area: when; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--rw-space-2); min-inline-size: 0; font-variant-numeric: tabular-nums; }
.ic-today__when b { font-family: var(--rw-font-display); font-weight: 400; font-size: 1.375rem; line-height: 1.2; }
.ic-today__when .ic-today__date { font-family: var(--rw-font-body); font-weight: 700; font-size: var(--rw-text-body); line-height: var(--rw-leading-body); }
.ic-today__when > span { font-size: var(--rw-text-small); color: var(--rw-ink-muted); }
.ic-today__what { grid-area: what; display: grid; justify-items: start; min-inline-size: 0; }
.ic-today__title { font-weight: 700; min-inline-size: 0; overflow-wrap: break-word; }
.ic-today__go { grid-area: go; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--rw-space-2); }

/* THE MASJID IS THE DOOR. The inline identity under a title is the link, so what the reader clicks
   names where it goes (the masjid's entrance), not the class or the homework beside it. A resting
   brass underline is its link cue (SPEC §1.3's link-tile rule); the chevron is drawn. */
.ic-today__where, .ic-today__inbox {
    display: inline-flex; align-items: center; gap: var(--rw-space-2); max-inline-size: 100%;
    min-block-size: var(--rw-target-min); min-inline-size: var(--rw-target-min);
    color: var(--rw-ink); text-decoration: none;
    /* A 48px target that draws like a line of text: the box reaches into the row's own padding. */
    margin-block: calc(-1 * var(--rw-space-2));
}
.ic-today__where .ic-ident { gap: var(--rw-space-2); min-inline-size: 0; }
.ic-today__where .ic-ident__mark { inline-size: 1.75rem; block-size: 1.75rem; border-radius: .5rem; font-size: .8125rem; }
.ic-today__where .ic-ident__logo { max-inline-size: 1.75rem; max-block-size: 1.75rem; }
/* `anywhere`, not `break-word`: both links are inline-flex, and only `anywhere` lowers a flex item's
   min-content, so a word longer than the column (200% text at 320) wraps inside its own box with the
   chevron after it instead of running under the chevron and out of the card. */
.ic-today__where .ic-ident__name, .ic-today__inbox { font-weight: 600; overflow-wrap: anywhere; text-decoration: underline 1px var(--rw-accent-border); text-underline-offset: .3em; }
.ic-today__where:hover .ic-ident__name, .ic-today__inbox:hover { text-decoration-thickness: 2px; }

/* The lead: the day's first class, drawn in the masjid Home's next-class grammar — display
   numerals, a brass hairline, the kicker, the name in the display face. Narrow: numerals beside the
   kicker and the name, then the masjid and the register on their own full-width rows, so a masjid's
   name keeps a line of its own instead of folding beside the numerals. */
.ic-today__item--lead { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "when kicker" "when title" "where where" "go go"; align-items: start; padding-block: var(--rw-space-2) var(--rw-space-4); }
.ic-today__item--lead .ic-today__what { display: contents; }
.ic-today__item--lead .ic-today__kicker { grid-area: kicker; align-self: end; }
.ic-today__item--lead .ic-today__title { grid-area: title; font-family: var(--rw-font-display); font-weight: 400; font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); line-height: 1.15; margin-block-start: var(--rw-space-1); }
.ic-today__item--lead .ic-today__where { grid-area: where; margin-block: var(--rw-space-1) calc(-1 * var(--rw-space-1)); }
.ic-today__item--lead .ic-today__when { display: block; align-self: stretch; padding-inline-end: var(--rw-space-4); border-inline-end: 1px solid var(--rw-line-accent); }
.ic-today__item--lead .ic-today__when b { font-size: 2.25rem; line-height: 1; }
.ic-today__item--lead .ic-today__go { justify-content: flex-start; margin-block-start: var(--rw-space-2); }
.ic-today__item--lead .ic-today__go .ic-btn { flex: 1 1 auto; }
/* Narrowest (320, or any phone at large text): the numerals' auto track would take the row and leave
   the name a sliver, so the lead stacks — numerals, kicker, name — and the name gets the card's
   width. 18rem of card content is where the name column beside the numerals falls under ~10rem
   (a 360 phone keeps the side-by-side drawing, a 320 one stacks); a container rem scales with the
   reader's text size, so 200% text stacks at every phone width. */
@container ic-today (max-width: 18rem) {
    .ic-today__item--lead { grid-template-columns: minmax(0, 1fr); grid-template-areas: "when" "kicker" "title" "where" "go"; }
    .ic-today__item--lead .ic-today__when { padding-inline-end: 0; border-inline-end: 0; }
    .ic-today__item--lead .ic-today__kicker { margin-block-start: var(--rw-space-2); }
}

/* The unread row is one line at every width: the count, then the way to it. */
.ic-today__item--notices { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "when what"; }
.ic-today__item--notices .ic-today__when { align-self: center; }

/* Large text on a phone (150% or 200%): the 1.75rem mark, the chevron and an empty register column
   beside a masjid's name left it 56px at 320 and broke it two letters at a time. So every row stacks
   (the unread count over its link, as the other rows' times stand over their titles), and the mark
   stands above the name with the chevron after the name, the /account/organisations recipe. 14rem
   of card content keeps the one-line drawing at 320 with 100% text; a container rem scales with the
   reader's text size, so large text stacks at every phone width. */
@container ic-today (max-width: 14rem) {
    .ic-today__item:not(.ic-today__item--lead) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "when" "what" "go"; }
    .ic-today__item:not(.ic-today__item--lead) .ic-today__go { justify-content: flex-start; margin-block-start: var(--rw-space-2); }
    /* Stacked, the link's top is its mark or its first line rather than a centred line, so it no
       longer reaches up into the title or the count above it. */
    .ic-today__item:not(.ic-today__item--lead) :is(.ic-today__where, .ic-today__inbox) { margin-block-start: var(--rw-space-1); }
    .ic-today__where { display: inline-grid; grid-template-columns: minmax(0, auto) auto; grid-template-areas: "mark ." "name chev"; justify-content: start; justify-items: start; row-gap: var(--rw-space-1); }
    .ic-today__where .ic-ident { display: contents; }
    .ic-today__where .ic-ident__mark { grid-area: mark; }
    .ic-today__where .ic-ident__name { grid-area: name; }
    .ic-today__where::after { grid-area: chev; }
}

/* Wider: one "when" track for every item, so every title stands on one line down the card and the
   register shares one inline-end edge. The track is sized to the lead's numerals. */
@container ic-today (min-width: 32rem) {
    .ic-today__item { grid-template-columns: var(--ic-today-when) minmax(0, 1fr) auto; grid-template-areas: "when what go"; column-gap: var(--rw-space-6); }
    .ic-today__when { display: grid; justify-items: start; align-content: start; align-self: start; gap: .125rem; padding-block-start: var(--rw-space-1); }
    .ic-today__item--lead { grid-template-areas: "when what go"; align-items: center; padding-block: var(--rw-space-3) var(--rw-space-4); }
    .ic-today__item--lead .ic-today__what { display: grid; }
    .ic-today__item--lead .ic-today__what > * { grid-area: auto; }
    .ic-today__item--notices .ic-today__when { padding-block-start: 0; }
    .ic-today__item--lead .ic-today__when { display: grid; align-self: stretch; align-content: center; padding-block-start: 0; }
    .ic-today__item--lead .ic-today__when b { font-size: 2.5rem; }
    .ic-today__item--lead .ic-today__go { margin-block-start: 0; }
    .ic-today__item--lead .ic-today__go .ic-btn { flex: 0 0 auto; }
}

/* ── Where you are a member: a ledger of doors on the ground, directly under Today ───────── */
/* The way in is a full-width row with a real door (the outline pill), never a side-column text link,
   at one membership as at five. This replaces the one-card centered variant (owner amendment
   2026-08-31): the "big white box off centered" it answered was a lone CARD in a two-card grid, and
   there is no card here to be off centre — PersonalStartShellTests holds the re-signed guard. */
.ic-start__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-inline-size: 0; container: ic-start-ledger / inline-size; }
.ic-start__cards > li { min-inline-size: 0; display: grid; }
.ic-start__card {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mark name go" "mark role go" "mark next go";
    align-items: center; column-gap: var(--rw-space-4); row-gap: .125rem; min-inline-size: 0;
    padding: var(--rw-space-4) 0; background: none; border: 0; border-block-end: 1px solid var(--rw-line); border-radius: 0; box-shadow: none;
}
/* The identity's two parts become the row's mark and name cells; the id aria-labelledby points at
   stays on the wrapper, whose text is the name. */
.ic-start__identity, .ic-start__identity > .ic-ident { display: contents; }
.ic-start__identity .ic-ident__mark { grid-area: mark; }
.ic-start__identity .ic-ident__name { grid-area: name; min-inline-size: 0; overflow-wrap: break-word; }
/* A lettered mark is --rw-surface in the shell; a hairline keeps its tile visible on any plane.
   A masjid's own accent (the shell's (0,3,0) rule) keeps its fill. */
.ic-start .ic-ident:not([data-org-accent]) .ic-ident__mark--lettered { border: 1px solid var(--rw-line); }
.ic-start__roleline { grid-area: role; color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.ic-start__next { color: var(--rw-ink-muted); }
.ic-start__card .ic-start__next { grid-area: next; font-size: var(--rw-text-small); }
/* The door's word never splits (base.css lets every link break anywhere): a three-letter word over
   two lines, or "افت/ح" with its cursive join cut, is not a label. Every locale's word is short, and
   the ledger rules below always give the door room for it. */
.ic-start__enter { grid-area: go; justify-self: end; inline-size: auto; display: inline-flex; align-items: center; gap: var(--rw-space-2); padding-inline: var(--rw-space-4) var(--rw-space-3); white-space: nowrap; overflow-wrap: normal; }
/* A pending membership has no role line and no door: its state word takes the door's place. The
   word is twice the door's width ("Afventer gennemgang" against "Åbn"), so the row drops it under
   the name sooner than the door drops — below 28rem of ledger, a 390 phone included — and only a
   ledger with the room draws the row as one line with the name centred on its mark. The drop is the
   default, so the narrow rule below cannot be outranked by this (0,2,0) selector again. */
.ic-start__pending { grid-area: go; justify-self: start; margin-block-start: var(--rw-space-2); }
.ic-start__card:has(> .ic-start__pending) { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mark name" ". go"; }
@container ic-start-ledger (min-width: 28rem) {
    .ic-start__card:has(> .ic-start__pending) { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mark name go"; }
    .ic-start__pending { justify-self: end; margin-block-start: 0; }
}
/* Narrow ledger (320, or 200% text on a phone): the door drops under the role line so the name keeps
   the width and breaks at a space rather than at its own hyphen. */
@container ic-start-ledger (max-width: 22rem) {
    .ic-start__card { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mark name" "mark role" "mark next" ". go"; }
    .ic-start__enter, .ic-start__pending { justify-self: start; margin-block-start: var(--rw-space-2); }
}
/* Large text on a phone: the 3rem mark would still take the name's width (128px of a 256px ledger at
   320 with 200% text), so the mark stands above the name, as on /account/organisations. 16rem of
   ledger keeps the mark beside the name at 320 with 100% text; the container rem scales with text
   size, so 150% and 200% text stack. The pending row's own (0,2,0) drop is named, so it stacks too. */
@container ic-start-ledger (max-width: 16rem) {
    .ic-start__card, .ic-start__card:has(> .ic-start__pending) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mark" "name" "role" "next" "go"; justify-items: start; }
}

/* The drawn chevron, one recipe for every door on the page: two logical borders on a turned square
   point forward in either direction by rule ("›" in generated content mirrored in one flex context
   and not another). Static — a transform that never animates. */
.ic-today__where::after, .ic-today__inbox::after, .ic-start__enter::after, .ic-start__links a::after {
    content: ""; flex: none; inline-size: .45em; block-size: .45em;
    border-block-start: .125rem solid currentColor; border-inline-end: .125rem solid currentColor;
    transform: rotate(45deg);
}
.ic-today__where:dir(rtl)::after, .ic-today__inbox:dir(rtl)::after, .ic-start__enter:dir(rtl)::after, .ic-start__links a:dir(rtl)::after { transform: rotate(-45deg); }
.ic-today__where::after, .ic-today__inbox::after, .ic-start__links a::after { color: var(--rw-accent-text); }

/* ── Waiting for your answer: raised, with the brass attention edge ─────────────────────── */
/* The masjid Home's attention card: the region is the plane and carries the edge; its title takes
   Today's rung, so the two "now" objects match. It leads the page only while an offer is open. */
.ic-start__waiting {
    gap: var(--rw-space-1); padding: var(--rw-panel-inset); padding-block-end: var(--rw-space-2);
    background: var(--rw-surface); border: 1px solid var(--rw-edge); border-inline-start: var(--rw-space-1) solid var(--rw-accent-border);
    border-radius: var(--rw-radius-panel); box-shadow: var(--rw-shadow-rest); --rw-hover-ground: var(--rw-surface-hover);
}
.ic-start__waiting .ic-start__region-head { font-family: var(--rw-font-display); font-weight: 400; font-size: var(--rw-text-title); line-height: var(--rw-leading-display); padding-block-end: 0; border-block-end: 0; }

/* The two lists (offers owed, applications asked) are rows on their plane, never a box of their own. */
.ic-start__list { list-style: none; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.ic-start__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-2) var(--rw-space-4); padding-block: var(--rw-space-4); padding-inline: 0; border-block-end: 1px solid var(--rw-line); }
.ic-start__row:last-child { border-block-end: 0; }
/* The attention edge is the card's now, and the record needs no spacer edge. */
.ic-start__row--offer, .ic-start__row--asked { border-inline-start: 0; }
.ic-start__what { flex: 1 1 18rem; min-inline-size: 0; display: grid; gap: var(--rw-space-1); }
.ic-start__name { font-weight: 600; min-inline-size: 0; overflow-wrap: anywhere; }
.ic-start__meta { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.ic-start__go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-2) var(--rw-space-3); }
.ic-start__link { display: inline-flex; align-items: center; min-block-size: var(--rw-target-min); min-inline-size: var(--rw-target-min); }
.ic-start__asked .ic-start__next { font-size: var(--rw-text-small); }

/* ── The first run and the platform console: the membership region's own empty, as a raised door ── */
.ic-start__welcome {
    display: grid; gap: var(--rw-space-3); justify-items: start; min-inline-size: 0;
    padding: var(--rw-panel-inset); background: var(--rw-surface); border: 1px solid var(--rw-edge);
    border-radius: var(--rw-radius-panel); box-shadow: var(--rw-shadow-rest); --rw-hover-ground: var(--rw-surface-hover);
}
.ic-start__welcome > h2 { font-family: var(--rw-font-display); font-weight: 400; font-size: var(--rw-text-title); line-height: var(--rw-leading-display); }
.ic-start__welcome > p { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }
.ic-start__welcome > .ic-btn { margin-block-start: var(--rw-space-2); }

/* ── Your account: quiet doors, a destination rather than a panel (§8.1) ─────────────────── */
.ic-start__links { list-style: none; margin: 0; padding: 0; }
.ic-start__links li { border-block-end: 1px solid var(--rw-line); }
.ic-start__links a { display: flex; align-items: center; justify-content: space-between; gap: var(--rw-space-3); min-block-size: var(--rw-target-min); padding-block: var(--rw-space-2); color: var(--rw-ink); font-weight: 600; text-decoration: none; }
.ic-start__links a::after { margin-inline-end: var(--rw-space-1); }
.ic-start__links a:hover { text-decoration: underline 1px var(--rw-accent-border); text-underline-offset: var(--rw-space-1); }

/* Arabic and Urdu: tracking breaks cursive joins, so the kickers go plain (base.css B-3's rule for
   the Home's own kicker), and wrapped display titles take the Arabic display leading. */
:lang(ar) :is(.ic-today__kicker, .ic-today__subhead),
:lang(ur) :is(.ic-today__kicker, .ic-today__subhead) { letter-spacing: 0; text-transform: none; font-size: var(--rw-text-small); }
:lang(ar) :is(.ic-today__head, .ic-today__item--lead .ic-today__title, .ic-start__welcome > h2, .ic-start__waiting .ic-start__region-head),
:lang(ur) :is(.ic-today__head, .ic-today__item--lead .ic-today__title, .ic-start__welcome > h2, .ic-start__waiting .ic-start__region-head) { line-height: var(--rw-leading-arabic-display); }

/* ── The people workspace ───────────────────────────────────────────────────────────── */

/* The page's arrival actions ("Invite someone" beside "Invitation links"). The block name
   is historic — it predates the redesign and is retained markup API. */
.ic-org__title { display: flex; flex-wrap: wrap; gap: var(--rw-space-3); }
.ic-org__note--spaced { margin-block-start: var(--rw-space-6); }

/* A select inside a record table (the staff register's role column) may shrink below its
   widest option: a native select's min-content is its longest option text, and at 200% text
   the whole table's min-content measured 837px against 576px of available column (1280
   viewport, the rail and gutters scaled) — the one cell that cannot wrap was widening the
   page. The 3rem floor keeps the press; the labelled-records transform still owns phones.
   NOT a bare width reset: the floor is the guarantee. */
.ic-table .ic-input--inline { inline-size: 100%; max-inline-size: 16rem; min-inline-size: var(--rw-target-min); }

/* A RECORD TABLE THAT CANNOT FIT ITS COLUMN BECOMES LABELLED RECORDS — THE PRODUCT'S OWN
   ANSWER, KEYED ON THE SPACE IT ACTUALLY HAS. The kit's labelled-records transform fires at
   max-width: 40rem, but a media query's rem ignores the reader's text size: at 200% text on
   a 1280 viewport the former-students table measured 837px of min-content against 768px of
   content column (the two nowrap date columns are a deliberate, guarded reading decision —
   PeopleAtScaleTests.A_figure_a_reader_compares_down_a_column_stays_on_one_line) and the
   page grew a sideways scroll. A container query's rem DOES scale with the root font, so
   the same 40rem threshold measured against the table's own container is exactly "the
   space a 640px viewport gives at 100%" at every zoom level. The block below restates the
   kit's labelled-records rules under @container and adds the two desktop-yield rules,
   all scoped to the opt-in attribute; both transforms apply together at phone widths. The
   kit's 40rem block also carries `.ic-rowchoice { flex-basis: 100% }`, deliberately not
   mirrored here: no .ic-rowchoice renders inside an .ic-tablewrap (choice groups live in
   Collection filter slots and RecordList rows), so in a container context the mirror
   would be a rule with nothing to reach. This is the documented alternative-reading
   discipline, not overflow hiding — nothing scrolls and nothing is clipped. */
.ic-tablewrap { container-type: inline-size; }
@container (max-width: 40rem) {
    .ic-table[data-mobile-transform="labelled-records"], .ic-table[data-mobile-transform="labelled-records"] tbody, .ic-table[data-mobile-transform="labelled-records"] tr, .ic-table[data-mobile-transform="labelled-records"] td { display: block; inline-size: 100%; }
    .ic-table[data-mobile-transform="labelled-records"] thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .ic-table[data-mobile-transform="labelled-records"] tr { padding-block: var(--rw-row-padding-block); border-block-end: 1px solid var(--rw-control-border); }
    .ic-table[data-mobile-transform="labelled-records"] td { border: 0; padding-block: var(--rw-label-gap); }
    .ic-table[data-mobile-transform="labelled-records"] td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; font-size: var(--rw-text-small); font-weight: 600; color: var(--rw-ink-muted); margin-block-end: 2px; }
    /* Under its label a value is the reading, not a footnote: ink, not the muted meta tone. */
    .ic-table[data-mobile-transform="labelled-records"] td[data-label]:not([data-label=""]) > .ic-table__meta { color: var(--rw-ink); }
    /* The name and a button label wrap within the record, and a tiny press trades its inline
       padding, as in the kit's 40rem block. */
    .ic-table[data-mobile-transform="labelled-records"] td > .ic-table__name { min-inline-size: 0; }
    .ic-table[data-mobile-transform="labelled-records"] td .ic-btn { white-space: normal; overflow-wrap: anywhere; }
    .ic-table[data-mobile-transform="labelled-records"] td .ic-btn--tiny { padding-inline: var(--rw-space-3); }
    /* The desktop one-line rules (riwaq-operations.css's ≥40.0625rem pair) yield inside a
       table that has become labelled records: a blockified td must wrap. Scoped to the
       opt-in attribute on purpose — container-type on .ic-tablewrap is global, so a bare
       .ic-table here would reach ANY squeezed table, and AttendanceOverviewRegion's
       learners table (which carries no data-mobile-transform) would silently lose the
       nowrap reading columns guarded by
       PeopleAtScaleTests.A_figure_a_reader_compares_down_a_column_stays_on_one_line. */
    .ic-table[data-mobile-transform="labelled-records"] td > .ic-rowactions { flex-wrap: wrap; }
    .ic-table[data-mobile-transform="labelled-records"] td.ic-tabular { white-space: normal; }
}

/* Bulk selection: the bar states the count and its own safety rule. */
.ic-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-3); padding: var(--rw-space-3) var(--rw-row-padding-inline); background: var(--rw-ground-2); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-control); }
.ic-bulkbar__count { font-weight: 700; font-variant-numeric: tabular-nums; }
.ic-bulkbar__rule { flex-basis: 100%; color: var(--rw-ink-muted); font-size: var(--rw-text-small); max-inline-size: var(--rw-reading-measure); }

/* THE GROUP HEADING INSIDE ONE COLLECTION. Not a section title -- the collection carries the
   page's one count above it and `PageHeader` its one heading -- so this reads as a label on
   the rows beneath it rather than as a second subject. */
.ic-staff__group { margin-block: var(--rw-space-4) var(--rw-space-2); font-size: var(--rw-text-small); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rw-ink-muted); }
/* The label is the target, the input is the drawing: the whole square toggles. */
.ic-bulk__hit { display: flex; align-items: center; justify-content: center; min-inline-size: var(--rw-target-min); min-block-size: var(--rw-target-min); cursor: pointer; }
.ic-bulk__check { inline-size: var(--rw-space-4); block-size: var(--rw-space-4); margin: 0; accent-color: var(--rw-control-accent); }
/* Bulk work on a phone-width screen is a mis-tap on somebody else's record waiting to
   happen — the page's own documented rule, kept from the retired page-scoped sheet: the
   selection column is not drawn below 48rem, so the bar (which needs a selection) cannot
   appear either. A feature gate, not overflow hiding. */
@media (max-width: 48rem) { .ic-bulk__hit { display: none; } }

/* The decision queues (pending students, course applications) and the notifications list
   share one card-per-person vocabulary: each entry is one bounded decision. */
.ic-queue { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-3); }
.ic-queue__item { background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-panel); padding: var(--rw-panel-inset); display: grid; gap: var(--rw-space-3); min-inline-size: 0; }
.ic-queue__item--flagged { border-inline-start: var(--rw-space-1) solid var(--rw-accent-border); }
.ic-queue__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rw-space-2) var(--rw-space-3); }
.ic-queue__title { font-size: var(--rw-text-lead); font-weight: 600; min-inline-size: 0; overflow-wrap: anywhere; }
.ic-queue__link { display: inline-flex; align-items: center; min-block-size: var(--rw-target-min); color: var(--rw-ink); }
.ic-queue__when { color: var(--rw-ink-muted); font-size: var(--rw-text-small); margin-inline-start: auto; }
.ic-queue__body { color: var(--rw-ink); min-inline-size: 0; overflow-wrap: anywhere; white-space: pre-line; max-inline-size: var(--rw-reading-measure); }
.ic-queue__note { margin: 0; padding-inline-start: var(--rw-space-3); border-inline-start: var(--rw-space-1) solid var(--rw-line); color: var(--rw-ink-muted); overflow-wrap: anywhere; max-inline-size: var(--rw-reading-measure); }
.ic-queue__actions { display: flex; flex-wrap: wrap; gap: var(--rw-space-2); }

/* A CARD INSIDE A CARD IS ONE CARD WITH A MISTAKE IN IT. `.ic-queue__item` was written for a
   queue standing directly on the paper, and the F1 slice put those queues inside the modules that
   name them -- so a pending decision was a bordered, filled, radiused panel inside a bordered,
   filled, radiused panel. The concept says it itself: "the architecture is spent only on the
   moments you pause". The module is the moment; the rows inside it are rows. The item keeps its
   own card everywhere it is still drawn on the page directly, which is why this is scoped rather
   than a rewrite of the item. */
.ic-module__body .ic-queue__item { background: none; border: 0; border-radius: 0; padding: var(--rw-row-padding-block) 0; border-block-end: 1px solid var(--rw-line); }
.ic-module__body .ic-queue__item:last-child { border-block-end: 0; padding-block-end: 0; }
/* THE OUTSTANDING MARK SURVIVES THE RESET, and it has to be restated rather than inherited: the
   rule above and this one have the same specificity, so this wins only by standing after it. */
.ic-module__body .ic-queue__item--flagged { border-inline-start: var(--rw-space-1) solid var(--rw-accent-border); padding-inline-start: var(--rw-space-3); }

/* One applicant's facts, in labelled pairs a screen reader can follow. */
.ic-orgcard__facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--rw-space-2) var(--rw-space-4); }
.ic-orgcard__facts > div { min-inline-size: 0; }
.ic-orgcard__facts dt { color: var(--rw-ink-muted); font-size: var(--rw-text-small); font-weight: 600; }
.ic-orgcard__facts dd { margin: 0; overflow-wrap: anywhere; }
/* Rejection discloses a reason form first: the destructive weight is the edge mark, and
   the confirming button (danger pair) sits inside it — never a bare "are you sure?". */
.ic-orgcard__reject { display: grid; gap: var(--rw-label-gap); border-inline-start: var(--rw-space-1) solid var(--rw-danger-ink); padding-inline-start: var(--rw-space-3); }
.ic-orgcard__reject-actions, .ic-orgcard__actions { display: flex; flex-wrap: wrap; gap: var(--rw-space-2); }

/* The import: pasted rows, a mapping, and each row's own send outcome. */
.ic-import__paste { font-variant-numeric: tabular-nums; }
.ic-import__mapping { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--rw-field-stack); }
.ic-import__subhead { font-weight: 600; }
/* Row errors are the review's whole point, and F5 draws them as a TABLE: the line a reader
   finds in their own spreadsheet, the name as its own isolated cell, and the reason. It was a
   bulleted list of `name: reason`, where a right-to-left name tore against the colon after it.
   Every cell breaks rather than widening the page, so three columns still fit a 320px phone. */
.ic-import__problems { inline-size: 100%; border-collapse: collapse; color: var(--rw-danger-ink); table-layout: fixed; }
.ic-import__problems th, .ic-import__problems td { text-align: start; vertical-align: baseline; padding-block: var(--rw-row-padding-block); padding-inline-end: var(--rw-space-3); border-block-end: 1px solid var(--rw-line); min-inline-size: 0; overflow-wrap: anywhere; }
.ic-import__problems thead th { font-size: var(--rw-text-small); font-weight: 600; color: var(--rw-ink-muted); }
.ic-import__problems td:first-child { inline-size: 3rem; }
.ic-import__rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.ic-import__rows li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-1) var(--rw-space-3); padding-block: var(--rw-row-padding-block); border-block-end: 1px solid var(--rw-line); min-inline-size: 0; }
/* A row that did not send carries the mark beside its badge — never colour alone. */
.ic-import__rows li[data-row-state="failed"] { border-inline-start: var(--rw-space-1) solid var(--rw-danger-ink); padding-inline-start: var(--rw-space-2); }
.ic-import__who { flex: 1 1 14rem; min-inline-size: 0; font-weight: 600; overflow-wrap: anywhere; }
.ic-import__email { font-weight: 400; color: var(--rw-ink-muted); display: block; overflow-wrap: anywhere; }
.ic-import__state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-2); min-inline-size: 0; }
.ic-import__state .ic-table__meta { min-inline-size: 0; overflow-wrap: anywhere; }

/* ── Learners without an account: the conversion desk (LegacyLearnerConversion.razor) ────────────
   The work is the one raised plane: the kit's S2 collection sheet. The status (the undecided figure,
   its meter and the enforcement rule) is a recessed, read-only well that stays beside the work while
   it scrolls. The two ways to give a learner an account sit under the well, on the ground. Rows only
   tint, and no row uses brass. Page-scoped; var(--rw-*) tokens and the kit's classes only. */

.ic-convert { container: ic-convert / inline-size; min-inline-size: 0; }
.ic-convert__grid {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-6); min-inline-size: 0;
    grid-template-areas: "head" "side" "main";
}
.ic-convert__head { grid-area: head; min-inline-size: 0; }
.ic-convert__side { grid-area: side; min-inline-size: 0; display: grid; gap: var(--rw-space-3); align-content: start; }
.ic-convert__main { grid-area: main; min-inline-size: 0; }

/* 1 · The desk: a recessed well holding only what is read. */
.ic-convert__desk {
    display: grid; gap: var(--rw-space-3); align-content: start; min-inline-size: 0;
    padding: var(--rw-space-6); background: var(--rw-ground-2); border-radius: var(--rw-radius-panel);
    box-shadow: var(--rw-well-shade); --rw-hover-ground: var(--rw-ground-2-hover);
}
/* The kit's Figure, unframed: the well is its frame. */
.ic-convert__desk .ic-fig { padding: 0; border: 0; gap: var(--rw-space-1); }
.ic-convert__desk .ic-fig__n { font-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem); line-height: 1; }
/* The meter is the counts' picture, hidden from the tree; the Figure's note and the legend are the record.
   Drawn only once something is decided: at nought it said the figure twice. Each decided kind is an
   empty svg whose width attribute is its share of the whole queue (no style attribute), so nothing
   here may set a width; the undecided rest is the track itself. */
.ic-convert__meter {
    display: flex; gap: 2px; block-size: var(--rw-space-2); overflow: hidden;
    border-radius: var(--rw-radius-pill); background: var(--rw-surface); box-shadow: inset 0 0 0 1px var(--rw-line);
}
.ic-convert__seg { display: block; flex: 0 1 auto; block-size: 100%; min-inline-size: 3px; }
.ic-convert__seg--invited, .ic-convert__key--invited { background: var(--rw-warning-ink); }
.ic-convert__seg--deferred, .ic-convert__key--deferred { background: var(--rw-ink-muted); }
.ic-convert__seg--uncontactable, .ic-convert__key--uncontactable { background: var(--rw-danger-ink); }
.ic-convert__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rw-space-1); font-size: var(--rw-text-small); }
.ic-convert__legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--rw-space-2); }
.ic-convert__key { inline-size: .625rem; block-size: .625rem; border-radius: 2px; }
.ic-convert__count { font-weight: 700; font-variant-numeric: tabular-nums; }
.ic-convert__rule {
    margin: 0; padding-block-start: var(--rw-space-3); border-block-start: 1px solid var(--rw-line);
    font-size: var(--rw-text-small); color: var(--rw-ink); max-inline-size: 40ch;
}

/* 2 · The two ways in, on the ground under the well. */
.ic-convert__ways { display: flex; flex-wrap: wrap; gap: var(--rw-space-2); min-inline-size: 0; }

/* 3 · The queue: a Section, so its title is a page region (C-3) and the kit's collection sheet is
   the one raised plane. The collection's own parts become the section's grid items, so the count
   sentence can share the title's line. */
.ic-convert__queue { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-3); container: ic-convert-rows / inline-size; }
.ic-convert__queue > .ic-collection { display: contents; }
.ic-convert__queue .ic-collection__summary { margin: 0; color: var(--rw-ink-muted); font-variant-numeric: tabular-nums; }
.ic-convert__queue .ic-collection__more { margin: 0; display: flex; justify-content: center; padding-block-start: var(--rw-space-2); }

/* Untouched is this page's norm (every learner starts there), so it is not drawn; a decision is.
   data-record-state stays in the DOM for tests and the sweep. */
.ic-convert .ic-record[data-record-state="untouched"] { border-inline-start: 0; }

/* THE ROW, narrow (phone): the name and its two controls on line one, then one wrapping line of facts.
   The who-box dissolves so its parts and the controls can be ordered together. */
.ic-convert .ic-record {
    position: relative; display: flex; flex-wrap: wrap; align-items: center;
    column-gap: var(--rw-space-3); row-gap: 2px; padding: var(--rw-space-3);
}
.ic-convert .ic-record__who, .ic-convert .ic-convert__ids { display: contents; }
.ic-convert .ic-record__name { order: 0; flex: 1 1 0; min-inline-size: min(8.5rem, 100%); }
.ic-convert__act { order: 1; margin-inline-start: auto; min-inline-size: 0; }
.ic-convert .ic-record::after { content: ""; order: 2; flex-basis: 100%; }
.ic-convert__fact { order: 3; min-inline-size: 0; color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.ic-convert__history { order: 4; }
.ic-convert__now { order: 5; }
.ic-convert__decision { order: 6; flex-basis: 100%; }
.ic-convert .ic-record__extra { order: 7; }

/* What they would take with them, in ink, and nothing at all when there is nothing (History()'s own
   rule): the few rows with a past stand out from the many without. */
.ic-convert .ic-convert__history { color: var(--rw-ink); font-weight: 600; }
/* In a running class now: the one fact about the future. A named mark; the dot is for the eye. */
.ic-convert .ic-convert__now { display: inline-flex; align-items: center; font-size: var(--rw-text-small); gap: var(--rw-space-1); color: var(--rw-success-ink); font-weight: 600; }
.ic-convert__now::before { content: ""; inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: currentColor; flex: none; }
/* The decision and its reason, only once one exists. The chip sits in the line, so a long reason
   wraps under it instead of dropping below it. */
.ic-convert .ic-convert__decision { display: block; color: var(--rw-ink); margin-block-start: var(--rw-space-1); }
.ic-convert__decision > .ic-status { margin-inline-end: var(--rw-space-2); padding-block: 0; vertical-align: baseline; }

/* The row's one visible action is the kit's text button; More holds the way to the learner's record.
   Top-aligned, so an opened More list hangs under its own summary and the action stays beside it. */
.ic-convert__act .ic-rowactions { gap: var(--rw-space-2); justify-content: flex-end; align-items: flex-start; }
.ic-convert__decide.ic-textbtn { line-height: 1.25; }

/* Narrow sheet only: a two-line label on the action keeps the name on one line beside it. */
@container ic-convert-rows (max-width: 39.99rem) {
    .ic-convert__decide.ic-textbtn { max-inline-size: 6.5em; min-inline-size: min-content; text-wrap: balance; text-align: end; }
    /* A long name takes two lines inside the controls' 48px rather than pushing them down. */
    .ic-convert .ic-record__name { line-height: 1.35; }
    /* The trade the kit's own phone tables make: a tiny press gives up inline padding, not height. */
    .ic-convert__act .ic-btn--tiny { padding-inline: var(--rw-space-3); }
}

/* THE ROW, wide: name and history on one line, the facts under them, the controls at the end
   beside both. History ends on one edge, where it argues against a careless decision. */
@container ic-convert-rows (min-width: 40rem) {
    .ic-convert .ic-record {
        display: grid; align-items: baseline; column-gap: var(--rw-space-4); row-gap: 0;
        grid-template-columns: minmax(0, max-content) auto minmax(0, 1fr) auto;
        grid-template-areas: "name now hist act" "ids ids ids act" "dec dec dec dec" "extra extra extra extra";
        padding-inline: var(--rw-space-4);
    }
    .ic-convert .ic-record::after { content: none; }
    .ic-convert .ic-record__name { grid-area: name; }
    .ic-convert .ic-convert__now { grid-area: now; }
    .ic-convert .ic-convert__history { grid-area: hist; justify-self: end; text-align: end; }
    .ic-convert .ic-convert__ids { grid-area: ids; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--rw-space-4); }
    .ic-convert__act { grid-area: act; align-self: center; margin: 0; }
    /* An opened More list hangs into the decision row, which takes the extra height, so the name
       and facts lines keep their places. */
    .ic-convert .ic-record:has(.ic-rowactions__more[open]) {
        grid-template-rows: auto auto 1fr auto;
        grid-template-areas: "name now hist act" "ids ids ids act" "dec dec dec act" "extra extra extra extra";
    }
    .ic-convert .ic-record:has(.ic-rowactions__more[open]) > .ic-convert__act { align-self: start; }
    .ic-convert .ic-convert__decision { grid-area: dec; margin-block-start: var(--rw-space-2); }
    .ic-convert .ic-record__extra { grid-area: extra; }
}

/* The decision, in place: the open row tints in its sheet's family and the form sits under it.
   RecordRow writes its own class after the attribute splat, so the open row is found by its extra. */
.ic-convert .ic-record:has(> .ic-record__extra) { background: var(--rw-surface-hover); }
.ic-convert .ic-record__extra { margin-block-start: var(--rw-space-3); }
.ic-convert .ic-record__extra .ic-form-stack { gap: var(--rw-space-4); padding-block-end: var(--rw-space-1); }
.ic-convert .ic-record__extra .ic-field { max-inline-size: var(--rw-field-measure); }

/* WIDE PAGE: the desk takes the end column beside the title. 62rem of page leaves the queue column
   at least 42rem, so the rows keep their wide layout beside it; below that the desk is a band. */
@container ic-convert (min-width: 62rem) {
    .ic-convert__grid--desk {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 18rem);
        grid-template-areas: "head side" "main side";
        column-gap: var(--rw-space-8); align-items: start;
    }
    .ic-convert__ways { display: grid; }
    .ic-convert__ways > .ic-btn { inline-size: 100%; }
}
/* AND IT STAYS IN VIEW ONLY WHERE IT FITS (SPEC §7.2, amending §5's "no sticky bars"). On a viewport
   under 44rem tall it scrolls with the page. Where it sticks it is its own grid column, so it never
   covers a focused row (WCAG 2.4.11), and it is capped to the viewport with its own scroll, so two
   banners, the legend and a long rule at 200% text never put the ways out of reach. The 6px padding
   keeps every focus ring inside the scroller. */
@media (min-height: 44rem) {
    @container ic-convert (min-width: 62rem) {
        .ic-convert__side {
            position: sticky; inset-block-start: var(--rw-space-6);
            max-block-size: calc(100vh - 2 * var(--rw-space-6)); max-block-size: calc(100dvh - 2 * var(--rw-space-6));
            overflow-y: auto; overscroll-behavior: contain;
            padding: var(--rw-focus-clearance); margin: calc(-1 * var(--rw-focus-clearance));
        }
    }
}

/* MIDDLE (tablet, or a laptop with the rail): the desk is a band above the queue, the ways beside it.
   Inside the band the figure keeps its own column and the picture, legend and rule read beside it. */
@container ic-convert (min-width: 36rem) and (max-width: 61.99rem) {
    .ic-convert__side { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--rw-space-6); align-items: center; }
    .ic-convert__side > .ic-alert { grid-column: 1 / -1; }
    .ic-convert__ways { display: grid; }
    .ic-convert__desk { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--rw-space-8); align-items: center; }
    .ic-convert__desk:has(> .ic-convert__meter) > .ic-fig { grid-row: 1 / span 3; }
    .ic-convert__desk > :not(.ic-fig) { grid-column: 2; }
    .ic-convert__legend { display: flex; flex-wrap: wrap; gap: var(--rw-space-1) var(--rw-space-4); }
    .ic-convert__legend li { display: inline-flex; }
    .ic-convert__rule { padding-block-start: 0; border-block-start: 0; }
}

/* From a tablet up, the count sentence shares the queue title's line. */
@container ic-convert (min-width: 36rem) {
    .ic-convert__queue { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--rw-space-4); align-items: baseline; }
    .ic-convert__queue > .ic-section__head { grid-column: 1; grid-row: 1; }
    .ic-convert__queue .ic-collection__summary { grid-column: 2; grid-row: 1; justify-self: end; text-align: end; }
    .ic-convert__queue [data-part="records"], .ic-convert__queue .ic-collection__more { grid-column: 1 / -1; }
}

/* PHONE: the desk compacts to the figure beside its label, then the rule; the ways are a pair. */
@container ic-convert (max-width: 35.99rem) {
    .ic-convert__grid { gap: var(--rw-space-4); }
    .ic-convert__desk { padding: var(--rw-space-4); gap: var(--rw-space-2); }
    .ic-convert__desk .ic-fig { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--rw-space-3); }
    .ic-convert__desk .ic-fig__n { font-size: 2.25rem; }
    .ic-convert__desk .ic-fig__note { flex-basis: 100%; }
    .ic-convert__legend { display: flex; flex-wrap: wrap; gap: var(--rw-space-1) var(--rw-space-4); }
    .ic-convert__legend li { display: inline-flex; }
    .ic-convert__rule { padding-block-start: var(--rw-space-2); max-inline-size: none; }
}

/* Forced colours: the fills are backgrounds, so they are given system colours and kept; the track
   gets a line so the empty part still reads as a track. */
@media (forced-colors: active) {
    .ic-convert__meter { border: 1px solid CanvasText; box-shadow: none; }
    .ic-convert__seg, .ic-convert__key, .ic-convert__now::before { forced-color-adjust: none; }
    .ic-convert__seg--invited, .ic-convert__key--invited { background: Highlight; }
    .ic-convert__seg--deferred, .ic-convert__key--deferred { background: GrayText; }
    .ic-convert__seg--uncontactable, .ic-convert__key--uncontactable { background: CanvasText; }
    .ic-convert__key { outline: 1px solid CanvasText; }
    .ic-convert__now::before { background: CanvasText; }
}

/* A person's record: labelled facts in columns, not paired spans. Overview draws the
   masjid's record with the same block; this rule reaches both deliberately. */
.ic-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--rw-space-3) var(--rw-space-4); }
.ic-facts > div { min-inline-size: 0; }
.ic-facts dt { color: var(--rw-ink-muted); font-size: var(--rw-text-small); font-weight: 600; }
.ic-facts dd { margin: 0; overflow-wrap: anywhere; }
/* ABSENCE IS DRAWN, NOT OMITTED (F3): "Not given" in muted ink where a fact has no value, so
   two records with different data do not look like the same shape. Muted ink and never a bare
   dash, which is announced as "dash" or as nothing and skimmed as a low number. */
.ic-facts__absent { color: var(--rw-ink-muted); }

/* Moving a learner: the panel names what moves and what stays before anything is pressed. */
.ic-transfer { display: grid; gap: var(--rw-space-3); background: var(--rw-ground-2); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-panel); padding: var(--rw-panel-inset); box-shadow: var(--rw-well-shade); }
.ic-transfer__moves { margin: 0; padding-inline-start: var(--rw-space-4); display: grid; gap: var(--rw-space-1); }

/* The emergency-contact fieldset on the register's correction form. */
.ic-field-group { display: grid; gap: var(--rw-label-gap); margin: 0; padding: 0; border: 0; min-inline-size: 0; max-inline-size: var(--rw-field-measure); }
.ic-field-group > legend { font-weight: 600; padding: 0; }

/* ── The audited emergency-contact reveal ───────────────────────────────────────────── */

/* A DELIBERATE REVEALING ACT, NEVER AMBIENT RENDERING. The gate is drawn as a bounded
   control panel — the family's number is behind a stated audit and a required reason, and
   the visual boundary is part of the statement: nothing inside this frame is on screen
   until somebody chose to put it there and was told the office would know. */
.ic-reveal { display: grid; gap: var(--rw-space-3); background: var(--rw-surface); border: 1px solid var(--rw-control-border); border-radius: var(--rw-radius-panel); padding: var(--rw-panel-inset); max-inline-size: var(--rw-form-measure); }
.ic-reveal__audit { max-inline-size: var(--rw-reading-measure); }
.ic-reveal__countdown { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Large, for reading aloud over a phone. */
.ic-reveal__contact { font-size: var(--rw-text-heading); line-height: var(--rw-leading-display); font-weight: 600; min-inline-size: 0; overflow-wrap: anywhere; }
.ic-reveal__relationship { color: var(--rw-ink-muted); }
/* A phone number is an LTR structured identifier in every script. */
.ic-reveal__dial { display: inline-flex; align-items: center; min-block-size: var(--rw-target-min); direction: ltr; unicode-bidi: isolate; }
.ic-reveal__actions { display: flex; flex-wrap: wrap; gap: var(--rw-space-2); }
.ic-reveal__recorded { color: var(--rw-ink-muted); font-size: var(--rw-text-small); overflow-wrap: anywhere; }

/* ── Invitations: directed offers and open links ────────────────────────────────────── */

.ic-linkform { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-field-stack); max-inline-size: var(--rw-form-measure); justify-items: start; }
.ic-linkform .ic-field { justify-self: stretch; }
.ic-linkform__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rw-field-stack); justify-self: stretch; max-inline-size: var(--rw-field-measure); }
/* "Shown once" is a warning about the very next press: the warning pair, before the button. */
.ic-linkform__warning { background: var(--rw-warning-bg); color: var(--rw-warning-fg); padding: var(--rw-row-padding-block) var(--rw-row-padding-inline); border-inline-start: var(--rw-space-1) solid currentColor; max-inline-size: var(--rw-reading-measure); }
/* The one moment the raw secret exists on screen — loud on purpose, and never again. */
.ic-linkonce { display: grid; gap: var(--rw-space-3); background: var(--rw-warning-bg); color: var(--rw-warning-fg); border-inline-start: var(--rw-space-1) solid currentColor; border-radius: var(--rw-radius-control); padding: var(--rw-panel-inset); max-inline-size: var(--rw-form-measure); }
/* A URL is an LTR identifier; select-all helps the manual fallback copy. */
.ic-linkonce__url { font-weight: 600; direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; user-select: all; }
.ic-linkonce__actions { display: flex; flex-wrap: wrap; gap: var(--rw-space-2); }
.ic-linkonce__manual { font-weight: 600; }
.ic-linkonce__scope { font-size: var(--rw-text-small); }
.ic-linklist { list-style: none; margin: 0; padding: 0; }
.ic-linklist__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-2) var(--rw-space-3); padding: var(--rw-row-padding-block) 0; border-block-end: 1px solid var(--rw-line); min-inline-size: 0; }
/* The tail identifies a link against a sent message: tabular, LTR, never enough to use. */
.ic-linklist__tail { font-weight: 600; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.ic-linklist__scope { flex: 1 1 16rem; min-inline-size: 0; display: grid; gap: var(--rw-space-1); overflow-wrap: anywhere; }
.ic-linklist__meta { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.ic-linklist__state { flex: none; }
/* A revoked or exhausted link stays on the list as history, quieted but readable. */
.ic-linklist__row[data-link-state="revoked"] .ic-linklist__tail, .ic-linklist__row[data-link-state="exhausted"] .ic-linklist__tail, .ic-linklist__row[data-link-state="expired"] .ic-linklist__tail { color: var(--rw-ink-muted); font-weight: 400; }

/* ── Academic setup and curriculum ──────────────────────────────────────────────────── */

/* Programme groups breathe one step wider than the shell's section gap. */
.ic-acad { display: grid; gap: var(--rw-space-8); }
.ic-acad__setup { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-3); }
.ic-acad__setuppath { color: var(--rw-ink-muted); }
/* Unfinished setup is a warning a reader must act on, with its steps listed. */
.ic-acad__incomplete { background: var(--rw-warning-bg); color: var(--rw-warning-fg); border-inline-start: var(--rw-space-1) solid currentColor; padding: var(--rw-panel-inset); display: grid; gap: var(--rw-space-2); }
.ic-acad__incompletetitle { font-size: var(--rw-text-lead); font-weight: 600; }
.ic-acad__incompletelist { margin: 0; padding-inline-start: var(--rw-space-4); display: grid; gap: var(--rw-space-1); }
/* The repair links ("assign one", "set a room") are prose destinations and still take the
   product's 48px press — the "Open the text" precedent. */
.ic-acad__incompletelist a { display: inline-flex; align-items: center; min-block-size: var(--rw-target-min); min-inline-size: var(--rw-target-min); }
.ic-acad__programme { display: grid; gap: var(--rw-space-2); min-inline-size: 0; }
.ic-acad__programmehead { font-size: var(--rw-text-lead); font-weight: 600; min-inline-size: 0; overflow-wrap: anywhere; }
/* One class per row: the whole row is the press (the kit's 48px floor already sits on
   .ic-acad__class), the name leads, the fill count stands at the row's end. */
.ic-acad__class { flex-wrap: wrap; gap: var(--rw-space-1) var(--rw-space-3); padding: var(--rw-row-padding-block) var(--rw-row-padding-inline); border-block-end: 1px solid var(--rw-line); color: var(--rw-ink); text-decoration: none; max-inline-size: 100%; transition: background-color var(--rw-motion-fast) var(--rw-ease-enter); }
/* These rows always sit in programme Modules, so they tint parchment instead of snapping to a
   ground-2 hole, and the last one draws no rule to nothing. */
.ic-acad__class:hover { background: var(--rw-hover-ground, var(--rw-ground-2)); }
.ic-module__body .ic-acad__class:last-child { border-block-end: 0; }
.ic-acad__classname { flex: 1 1 16rem; min-inline-size: 0; font-weight: 600; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-2); }
.ic-acad__classmeta, .ic-acad__classteacher { color: var(--rw-ink-muted); font-size: var(--rw-text-small); min-inline-size: 0; overflow-wrap: anywhere; }
.ic-acad__classfill { margin-inline-start: auto; font-weight: 600; }
.ic-acad__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-3); border-block-start: 1px solid var(--rw-line); padding-block-start: var(--rw-space-4); }
.ic-acad__destination { display: inline-flex; align-items: center; min-block-size: var(--rw-target-min); min-inline-size: var(--rw-target-min); }

.ic-curric { display: grid; gap: var(--rw-space-6); }
.ic-curric__subject { background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-panel); padding: var(--rw-panel-inset); display: grid; gap: var(--rw-space-3); min-inline-size: 0; }
.ic-curric__subjecthead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--rw-space-2) var(--rw-space-3); }
.ic-curric__subjectlabel { font-size: var(--rw-text-lead); font-weight: 600; min-inline-size: 0; overflow-wrap: anywhere; }
.ic-curric__expectation { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-1) var(--rw-space-2); padding-block: var(--rw-space-2); border-block-end: 1px solid var(--rw-line); min-inline-size: 0; }
.ic-curric__scope { font-weight: 600; min-inline-size: 0; overflow-wrap: anywhere; }
.ic-curric__coverage { min-inline-size: 0; overflow-wrap: anywhere; }
.ic-curric__pace { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
/* THE FORM'S BOUNDARY IS THE FAMILY'S NOW, NOT A SECOND ONE OF ITS OWN. It is
   `.ic-fieldset--bounded` since the F2 slice — a group with its own Save earns a border, and the
   border is what says which fields that Save commits — so this rule kept only its own filled
   ground under the bordered one, which is two boundaries around one group and a fill the
   `--danger` variant's comment already refuses for the same reason: it puts every control inside
   on a ground none of their pairs were measured on. The bounded variant supplies the gap, the
   padding and the radius. */
.ic-curric__form { min-inline-size: 0; }
/* Same, for the one group that writes a new subject: the bounded fieldset carries the display,
   the gap and the padding. `justify-items: start` went with them — it shrink-wrapped every child
   to its content, which is what stopped a long legend wrapping. */
.ic-curric__add { min-inline-size: 0; }
.ic-curric__empty { display: grid; gap: var(--rw-space-2); }
.ic-curric__emptytitle { font-size: var(--rw-text-lead); font-weight: 600; }
.ic-curric__scopeline { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }

/* ── The organization's settings family ─────────────────────────────────────────────── */

/* The four `.ic-profile__link*` rules are gone with the second settings index they drew.
   `/my-organization/settings` already owns a row vocabulary for exactly this — `.ic-modulerow`
   — so the eight destinations arrived there wearing rules that already existed. */
/* `.ic-profile__actions` is gone too: it was one of the six action rows the seven sibling
   settings forms declared between them, and the form family writes that row once. */

.ic-brand__logo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-4); }
.ic-brand__img { max-inline-size: 6rem; max-block-size: 6rem; object-fit: contain; background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-control); }
.ic-brand__initials { display: grid; place-items: center; inline-size: var(--rw-target-min); block-size: var(--rw-target-min); flex: none; border-radius: var(--rw-radius-control); background: var(--rw-green); color: var(--rw-on-green); font-weight: 700; }
.ic-brand__upload { flex: 1 1 18rem; min-inline-size: 0; display: grid; gap: var(--rw-label-gap); }
.ic-brand__about { color: var(--rw-ink-muted); font-size: var(--rw-text-small); max-inline-size: var(--rw-reading-measure); }
.ic-brand__accents { display: flex; flex-wrap: wrap; gap: var(--rw-space-2); }
.ic-brand__accent { display: flex; align-items: center; gap: var(--rw-space-2); 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); background: var(--rw-surface); cursor: pointer; }
/* The chosen accent says so in the established doubled-border vocabulary; padding gives
   the 2px back so choosing never shifts the row (1px border + pad and 3px border + pad−2px
   occupy the same box on every side). Selection lives on the native radio's :checked,
   which the compensation guard's predicate reads alongside the aria states — this rule is
   mechanically held like the rest of the sheet. */
.ic-brand__accent:has(input:checked) { border: 3px double var(--rw-control-border); font-weight: 700; padding: calc(var(--rw-space-2) - 2px) calc(var(--rw-space-3) - 2px); }
.ic-brand__accent input { accent-color: var(--rw-control-accent); margin: 0; }
.ic-brand__swatch { inline-size: var(--rw-space-4); block-size: var(--rw-space-4); flex: none; border-radius: 50%; border: 1px solid var(--rw-line); }
.ic-brand__swatch--none { background: var(--rw-surface); }
/* Tenant identity fills only — the same six the shell's monogram wears. */
.ic-brand__swatch[data-swatch="clay"] { background: var(--rw-org-clay); }
.ic-brand__swatch[data-swatch="green"] { background: var(--rw-org-green); }
.ic-brand__swatch[data-swatch="indigo"] { background: var(--rw-org-indigo); }
.ic-brand__swatch[data-swatch="plum"] { background: var(--rw-org-plum); }
.ic-brand__swatch[data-swatch="slate"] { background: var(--rw-org-slate); }
.ic-brand__swatch[data-swatch="teal"] { background: var(--rw-org-teal); }
/* `.ic-brand__actions` and `.ic-brand__scope` are the form family's row and its note now.
   The note's sentence stays because on THIS page it is true: Save writes only the accent,
   and the logo above commits itself the moment a file is chosen -- which the page now says. */
.ic-brand__boundary { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }

.ic-life__figure { font-weight: 700; font-variant-numeric: tabular-nums; }
.ic-life__about { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }

/* The held-marks guarantee is who-sees-what information, not a success event: info pair. */
/* THE SETTINGS FAMILY'S SIX ACTION ROWS ARE ONE ROW NOW. `.ic-profile__actions`,
   `.ic-publish__actions`, `.ic-brand__actions`, `.ic-marks__actions`, `.ic-reflset__actions`
   and `.ic-life__actions` each declared the same flex row for the same job on seven sibling
   pages -- the count F2 opened on. `.ic-formactions` is the row and `.ic-formactions__note`
   its note; the two `__scope` rules go with them, and their sentence survives on the three
   pages where it is true. */
.ic-marks__guarantee { display: block; border-radius: var(--rw-radius-control); background: var(--rw-info-bg); color: var(--rw-info-fg); padding: var(--rw-row-padding-block) var(--rw-row-padding-inline); border-inline-start: var(--rw-space-1) solid currentColor; max-inline-size: var(--rw-reading-measure); }
.ic-marks__note { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }

.ic-publish { display: grid; gap: var(--rw-space-6); min-inline-size: 0; }
.ic-publish__fields { display: grid; gap: var(--rw-space-2); }
/* One published field per row: the checkbox is column one, the name and its consequence
   stack beside it, and the whole label is the press. */
/* Scoped to its form on purpose: the kit's `label:has(> input[type="radio"])` rule in the components
   sheet is more specific than one class and turned every one of these labels into a flex row, so the
   name and the description shared a line and the name — a label inherits `overflow-wrap: anywhere` —
   shrank to its narrowest break: "Not / publish / ed", "Whethe / r there / is room" at 1280 in a
   half-width column (root's read of the B1 fix round's publication frame, N-8). Two classes outrank
   it, and the grid the rule always described is what the reader now gets — on the masjid's form
   (`.ic-publish`, the directory switch included) and on the class's. The class's editor holds the
   fields twice over: the three states in `.ic-detail__publishstates` and the eight published fields
   in `.ic-publish__fields`, both inside `.ic-detail__publish` — the first selector reached only the
   states, so at 320 the field names still read "Whe / n it / meet / s" beside their descriptions
   (scoped re-review RR-2); the editor's own class reaches both lists. The B1 rig's `nameLabels`
   measure now reads every `.ic-publish__name` for a break the cell did not force. */
.ic-publish .ic-publish__field, .ic-detail__publish .ic-publish__field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: var(--rw-space-3); row-gap: var(--rw-space-1); min-block-size: var(--rw-target-min); cursor: pointer; max-inline-size: var(--rw-field-measure); }
.ic-publish__field input { margin-block-start: var(--rw-space-1); accent-color: var(--rw-control-accent); }
.ic-publish__name { font-weight: 600; grid-column: 2; }
.ic-publish__about { grid-column: 2; color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.ic-publish__locked { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }
/* `.ic-publish__actions` is the form family's row now, and `.ic-publish__scope` is gone with
   the sentence it styled -- "This section saves on its own", which was false: the one Save
   also wrote the directory switch in the module above it. A group states its scope with its
   own edge, not with a line of type. */
.ic-publish__withdraw { color: var(--rw-ink-muted); font-size: var(--rw-text-small); max-inline-size: var(--rw-reading-measure); }
/* The preview is the public page's content on the working page's ground — bounded and
   labelled so it cannot be mistaken for the page itself. */
.ic-publish__preview { display: grid; gap: var(--rw-space-3); background: var(--rw-ground-2); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-panel); padding: var(--rw-panel-inset); min-inline-size: 0; box-shadow: var(--rw-well-shade); }
.ic-publish__masjid { font-family: var(--rw-font-display); font-weight: 400; font-size: var(--rw-text-lead); min-inline-size: 0; overflow-wrap: anywhere; }
.ic-publish__line { min-inline-size: 0; overflow-wrap: anywhere; max-inline-size: var(--rw-reading-measure); }
.ic-publish__logo { max-inline-size: 6rem; max-block-size: 6rem; object-fit: contain; }
.ic-publish__nothing, .ic-publish__pending { color: var(--rw-ink-muted); }

.ic-reflset { display: grid; gap: var(--rw-space-6); min-inline-size: 0; }
.ic-reflset__choice { display: grid; gap: var(--rw-label-gap); }
.ic-reflset__switch { display: flex; align-items: center; gap: var(--rw-space-3); min-block-size: var(--rw-target-min); cursor: pointer; }
.ic-reflset__note { color: var(--rw-ink-muted); font-size: var(--rw-text-small); max-inline-size: var(--rw-reading-measure); }
.ic-reflset__consequence { max-inline-size: var(--rw-reading-measure); }
.ic-reflset__limits { color: var(--rw-ink-muted); font-size: var(--rw-text-small); max-inline-size: var(--rw-reading-measure); }
.ic-reflset__preview { display: grid; gap: var(--rw-space-2); background: var(--rw-ground-2); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-panel); padding: var(--rw-panel-inset); box-shadow: var(--rw-well-shade); }
.ic-reflset__empty { color: var(--rw-ink-muted); }

.ic-access__count { font-weight: 700; font-variant-numeric: tabular-nums; }
.ic-access__about { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }
.ic-access__fixed { max-inline-size: var(--rw-reading-measure); }
.ic-access__head { font-weight: 600; }
.ic-access__protection { background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-panel); padding: var(--rw-panel-inset); display: grid; gap: var(--rw-space-2); }
.ic-access__where { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }

/* ── Privacy requests (the masjid's queue and a person's own) ───────────────────────── */

.ic-privacy__counts { font-weight: 600; font-variant-numeric: tabular-nums; }
.ic-privacy__detail { min-inline-size: 0; overflow-wrap: anywhere; }
.ic-privacy__when { color: var(--rw-ink-muted); font-size: var(--rw-text-small); display: block; }
.ic-privacy__note { color: var(--rw-ink-muted); display: block; overflow-wrap: anywhere; }
/* Refusing a request opens the reason first — same destructive-weight edge as rejection. */
.ic-privacy__decide { display: grid; gap: var(--rw-label-gap); border-inline-start: var(--rw-space-1) solid var(--rw-line-accent); padding-inline-start: var(--rw-space-3); flex-basis: 100%; margin-block-start: var(--rw-space-2); }
.ic-privacy__reason { max-inline-size: var(--rw-field-measure); }
.ic-privacy__actions { display: flex; flex-wrap: wrap; gap: var(--rw-space-2); }
.ic-privacy__error { color: var(--rw-danger-fg); background: var(--rw-danger-bg); padding: var(--rw-space-1) var(--rw-label-gap); border-radius: var(--rw-radius-control); }
.ic-privacy__manual, .ic-privacy__where { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }
.ic-privacy__where a { display: inline-flex; align-items: center; min-block-size: var(--rw-target-min); min-inline-size: var(--rw-target-min); }
/* THE ROW LIST AND THE MODULE DIVIDER ARE BOTH GONE, and what replaced each is already in the
   product. The nine `__request*` rules hand-drew a flex row list with no `data-label` anywhere,
   so a phone showed bare values with nothing naming them; `RecordTable` supplies the attribute
   from the column set, which is what it exists for. The two `__module` rules drew a hairline
   BETWEEN three asks, which says they differ and never which of the three Start buttons commits
   which paragraph — `.ic-fieldset--bounded` draws each ask its own boundary instead. */
.ic-privacy__answered { display: grid; gap: var(--rw-space-3); margin-block-end: var(--rw-space-8); }
.ic-privacy__asktitle { font-size: var(--rw-text-lead); font-weight: 600; margin: 0; }
/* One word, and the record row's last column is the narrowest: at 1280 it broke as
   "Withdra / w". A control whose label wraps mid-word is not a label. */
.ic-privacy__withdraw { white-space: nowrap; }
/* The three asks stack with the form family's own rhythm rather than a divider between them. */
.ic-privacy__ask + .ic-privacy__ask { margin-block-start: var(--rw-field-stack); }
.ic-privacy__nomasjid { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }
/* What each masjid keeps, named, above the delete button. A list rather than a sentence because
   the reader is checking for their own masjid in it, and `list-style: none` because the names are
   the content — a bullet beside two entries is decoration that costs a screen reader a word each
   time. The inline start padding holds the rule the border draws. */
.ic-privacy__keeps { list-style: none; margin: 0 0 var(--rw-space-4); padding-inline-start: var(--rw-space-3); display: grid; gap: var(--rw-space-1); border-inline-start: 1px solid var(--rw-line); max-inline-size: var(--rw-reading-measure); color: var(--rw-ink-muted); }
.ic-privacy__verify { background: var(--rw-info-bg); color: var(--rw-info-fg); padding: var(--rw-row-padding-block) var(--rw-row-padding-inline); border-inline-start: var(--rw-space-1) solid currentColor; max-inline-size: var(--rw-reading-measure); }

/* ── The activity record ────────────────────────────────────────────────────────────── */

.ic-activity__counts { color: var(--rw-ink-muted); font-variant-numeric: tabular-nums; }
/* What the chooser above it can and cannot do, read before the filter is used rather than after
   it comes back empty. Capped to the reading measure like every other sentence a trustee is
   expected to read rather than scan. */
.ic-activity__scope { color: var(--rw-ink-muted); font-size: var(--rw-text-small); max-inline-size: var(--rw-reading-measure); }
.ic-activity__when, .ic-activity__detail { display: inline-block; margin-inline-end: var(--rw-space-3); color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.ic-activity__redacted { display: block; color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.ic-activity__retention { color: var(--rw-ink-muted); font-size: var(--rw-text-small); max-inline-size: var(--rw-reading-measure); }

/* ── The noticeboard ────────────────────────────────────────────────────────────────── */

.ic-notice__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-3); }
.ic-notice { background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-panel); padding: var(--rw-panel-inset); display: grid; gap: var(--rw-space-2); min-inline-size: 0; }
/* An ended notice is history: the ground quietens it, the "ended" words carry the state. */
.ic-notice--ended { background: var(--rw-ground-2); }
.ic-notice__title { font-size: var(--rw-text-lead); font-weight: 600; min-inline-size: 0; overflow-wrap: anywhere; }
.ic-notice__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-2); color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.ic-notice__when { color: var(--rw-ink-muted); }
/* "Plain text. Line breaks are kept." — the promise the form makes, honoured here. */
.ic-notice__body { white-space: pre-line; min-inline-size: 0; overflow-wrap: anywhere; max-inline-size: var(--rw-reading-measure); }
.ic-notice__by { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.ic-notice__ended { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.ic-notice__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-2); }
.ic-notice__confirm { font-weight: 600; }
.ic-notice__group, .ic-privacy__group { font-size: var(--rw-text-small); font-weight: 800; color: var(--rw-ink-muted); margin-block-start: var(--rw-space-4); }

/* WHAT ENDED, CLOSED. A noticeboard's job is what still applies, so the archive is a disclosure
   rather than a second list under every current notice. The summary carries the count, so the
   number is legible without opening it, and it is a 48px press like every other control. */
/* THE SAME DISCLOSURE ON THE PRIVACY QUEUE, sharing this vocabulary rather than repeating it:
   the F2 slice found the answered requests drawn as a second full list of the same shape as the
   waiting ones, so a masjid with nothing to do still read two queues. Same argument, same rules,
   one set of them. */
.ic-notice__archive, .ic-privacy__archive { border-block-start: 1px solid var(--rw-line); margin-block-start: var(--rw-space-6); }
/* NOT `display: flex`, WHICH WAS THE FIRST ATTEMPT AND DELETED THE TRIANGLE. A flex summary
   drops its `::marker` in Chrome, so the only sign that the archive opens at all disappeared
   and the count read as a dead line of prose. Photographed on the noticeboard fixture. */
.ic-notice__archive > summary, .ic-privacy__archive > summary { min-block-size: var(--rw-target-min); padding-block: var(--rw-row-padding-block); cursor: pointer; }
.ic-notice__archive > summary::marker, .ic-privacy__archive > summary::marker { color: var(--rw-ink-muted); }
.ic-notice__none { color: var(--rw-ink-muted); }
.ic-notice__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-field-stack); max-inline-size: var(--rw-form-measure); justify-items: start; }
.ic-notice__form .ic-field, .ic-notice__form .ic-form-stack { justify-self: stretch; }
.ic-notice__field { min-inline-size: 0; }
.ic-notice__email { display: grid; gap: var(--rw-label-gap); }
.ic-notice__switch { display: flex; align-items: center; gap: var(--rw-space-3); min-block-size: var(--rw-target-min); cursor: pointer; }
.ic-notice__emailnote { color: var(--rw-ink-muted); font-size: var(--rw-text-small); max-inline-size: var(--rw-reading-measure); }
/* "{n} people receive it once. It cannot be unsent." — the send's real consequence. */
.ic-notice__warn { display: inline-block; background: var(--rw-warning-bg); color: var(--rw-warning-fg); padding: var(--rw-space-1) var(--rw-label-gap); border-radius: var(--rw-radius-control); }
.ic-notice__preview { border-block-start: 1px solid var(--rw-line); padding-block-start: var(--rw-space-4); display: grid; gap: var(--rw-space-3); justify-self: stretch; min-inline-size: 0; }
.ic-notice__previewlabel { font-weight: 600; }

/* ── Failed email delivery ──────────────────────────────────────────────────────────── */

.ic-deliv__counts { color: var(--rw-ink-muted); font-variant-numeric: tabular-nums; }
.ic-deliv__note { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }
.ic-deliv__remedy { max-inline-size: var(--rw-reading-measure); }
.ic-deliv__when { display: block; color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
/* A per-row failure is stated where the finger is, in the danger pair. */
.ic-deliv__error { color: var(--rw-danger-fg); background: var(--rw-danger-bg); padding: var(--rw-space-1) var(--rw-label-gap); border-radius: var(--rw-radius-control); min-inline-size: 0; overflow-wrap: anywhere; }
.ic-deliv__bulk { display: grid; gap: var(--rw-label-gap); justify-items: start; }
.ic-deliv__uncertain { color: var(--rw-ink-muted); font-size: var(--rw-text-small); max-inline-size: var(--rw-reading-measure); }
.ic-deliv__truth { color: var(--rw-ink-muted); font-size: var(--rw-text-small); max-inline-size: var(--rw-reading-measure); }

/* ── The account screens ────────────────────────────────────────────────────────────── */

.ic-account__fact { font-weight: 600; overflow-wrap: anywhere; }
.ic-account__note { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }
/* `.ic-account__notes` is gone with the arrangement that needed it: it carried a hairline ABOVE
   two sentences that had been pushed under the last group's Save, which was a divide drawn to
   stop them reading as that masjid's small print. They frame the choice from above now, so the
   thing they needed separating from is no longer beneath them, and the rule that separated it
   has nothing left to do. */
.ic-account__frame { display: grid; gap: var(--rw-space-2); margin-block-end: var(--rw-space-8); }
/* The preferences this browser keeps, as a region of its own rather than as two unnamed strips
   appended after a Save they have nothing to do with. It sits above the account form and outside
   the page shell, so a settings endpoint that is slow or refusing cannot take the way to change
   the theme with it. */
.ic-account__device { display: grid; gap: var(--rw-space-4); justify-items: start; }
.ic-account__device > h2 { font-size: var(--rw-text-lead); font-weight: 600; }
/* THE REGION'S NAME HAS TO OUTRANK WHAT IS INSIDE IT, and photographing this is what showed it
   did not: the install offer's own title rendered LARGER than the heading of the region holding
   it. The cause is a gap worth recording rather than only patching — `h2` carries no font-size
   anywhere in these sheets, so an unclassed one falls back to the browser's 1.5em while every
   classed heading sits on the type scale. Inside this region the offer is a line with a name,
   not a section of the page. */

/* THE TWO "MODULE" RULES ARE GONE, and their absence is the recomposition rather than a tidy-up.
   `.ic-security__module` was a grid with a gap and `+ .ic-security__module` was a hairline between
   two of them: a divider drawn BETWEEN two groups, which says only that they are different and
   never which controls either of the page's two buttons commits. The shared kit's
   `.ic-fieldset--bounded` draws each group's own boundary instead, and `.ic-form-stack` supplies
   the gap the module rule was there for. */
/* The group name is a heading inside the legend, so it needs its own weight and no margin of the
   browser's — the legend's box is already the group's title row. */
.ic-security__grouptitle { font-size: var(--rw-text-lead); font-weight: 600; margin: 0; }
.ic-security__note { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }
/* The input sheds its min width because the flex basis guarantees the press (the sign-in
   panel's own pattern); the show/hide toggle keeps the full floor beside it. */
.ic-security__passwordwrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-2); inline-size: 100%; }
.ic-security__passwordwrap .ic-input { flex: 1 1 12rem; min-inline-size: 0; }
.ic-security__show { min-inline-size: var(--rw-target-min); min-block-size: var(--rw-target-min); }
.ic-security__sessions { list-style: none; margin: 0; padding: 0; inline-size: 100%; }
.ic-security__session { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-2) var(--rw-space-3); padding-block: var(--rw-row-padding-block); border-block-end: 1px solid var(--rw-line); min-inline-size: 0; }
.ic-security__sessionbody { flex: 1 1 16rem; min-inline-size: 0; display: grid; gap: var(--rw-space-1); }
.ic-security__device { font-weight: 600; overflow-wrap: anywhere; }
.ic-security__sessionmeta { color: var(--rw-ink-muted); font-size: var(--rw-text-small); overflow-wrap: anywhere; }
/* "Current" is a state word with a tint, never a tint alone. */
.ic-security__current { background: var(--rw-success-bg); color: var(--rw-success-fg); font-weight: 600; font-size: var(--rw-text-small); padding: var(--rw-space-1) var(--rw-label-gap); border-radius: var(--rw-radius-control); }
.ic-security__revoke { flex: none; }
/* `.ic-security__others` is gone with the module rules: the bulk sign-out is the sessions group's
   action row now, so it is `.ic-formactions` like every other commit in the form family. */
.ic-security__unavailable { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }

/* Your masjids (account) and every organisation (platform) shared a row vocabulary until F1.

   THE ACCOUNT PAGE'S HALF OF IT IS GONE, because `Collection` and `DataRow` draw what it drew:
   `__list`, `__row`, `__row--invited`, `__body`, `__name`, `__actions` and `__none` were a
   second spelling of `.ic-records`, `.ic-row`, `.ic-row--flagged`, `.ic-row__main`,
   `.ic-row__name`, `.ic-row__side` and `.ic-state--empty`, and a page that keeps its own copy
   of a shared row is a page that stops matching the others one fix at a time. The platform
   console's four cell classes stay: it draws its own rows through a table and they are its.

   `__meta` went with them, and only the photograph showed why: wrapped in `Detail` it rendered
   INSIDE `DataRow`'s own `.ic-row__meta`, which is the same muted small type — a span inside a
   span, both saying the same thing, and a second place the row's quiet voice could drift from. */
/* THE CHOOSER'S OWN FOOTNOTE, and the capped read's. Both are quiet sentences about the numbers
   beside them rather than states of their own, so neither takes a panel: muted, at the reading
   measure, in the same voice as the boundary sentence in the header. */
.ic-orgs__scope { color: var(--rw-ink-muted); font-size: var(--rw-text-small); max-inline-size: var(--rw-reading-measure); }
.ic-orgs__capped { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }
.ic-orgs__where { color: var(--rw-ink-muted); font-size: var(--rw-text-small); display: block; }
/* The reference the applicant was emailed, on its own line under the town and the date. Tabular
   figures because it is an identifier being compared against one somebody is reading off a
   screen, and a monospace-ish alignment is what makes two of them comparable at a glance. */
.ic-orgs__reference { display: block; color: var(--rw-ink-muted); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.ic-orgs__reason { color: var(--rw-ink-muted); overflow-wrap: anywhere; display: block; }
/* The last-admin warning is a `Banner` now — `BannerKind.Conflict`, which is what the code
   already calls that state — so the bespoke warning pair went with it. Two answers to one
   button drawn in two shapes was the thing worth removing, not the colour. */
/* Leaving is confirmed in place: a bounded frame with the destructive edge, what is kept
   spelled out inside it, and both answers present. */
.ic-orgs__confirm { display: grid; gap: var(--rw-space-3); background: var(--rw-surface); border: 1px solid var(--rw-control-border); border-inline-start: var(--rw-space-1) solid var(--rw-danger-ink); border-radius: var(--rw-radius-panel); padding: var(--rw-panel-inset); max-inline-size: var(--rw-form-measure); min-inline-size: 0; overflow-wrap: anywhere; }
/* AN h2 CARRIES NO FONT SIZE ANYWHERE IN THESE SHEETS, so one without a class falls back to
   the browser's 1.5em and can outrank the region heading above it — the defect photographed on
   /account/preferences. This panel's question is its own title and takes the lead size. */
.ic-orgs__confirmtitle { font-size: var(--rw-text-lead); font-weight: 600; margin: 0; }
.ic-orgs__consequences { display: grid; gap: var(--rw-space-3); min-inline-size: 0; }
.ic-orgs__kept { background: var(--rw-ground-2); border-radius: var(--rw-radius-control); padding: var(--rw-row-padding-block) var(--rw-row-padding-inline); }
.ic-orgs__confirmactions { display: flex; flex-wrap: wrap; gap: var(--rw-space-2); }

/* Profile: the sign-in address is a read-only fact, so it sinks into a well (SPEC §1.2: recessed
   well = read-only status) and reads as the identity the form below edits. */
.ic-account__identity { gap: var(--rw-space-1); max-inline-size: var(--rw-form-measure); padding: var(--rw-space-4) var(--rw-space-6); background: var(--rw-ground-2); border-radius: var(--rw-radius-panel); box-shadow: var(--rw-well-shade); }
.ic-account__identity .ic-section__title { font-family: var(--rw-font-body); font-size: var(--rw-text-small); font-weight: 700; line-height: 1.4; color: var(--rw-ink-muted); }
.ic-account__identity .ic-account__fact { font-size: var(--rw-text-lead); font-weight: 700; }
.ic-account__identity .ic-account__note { font-size: var(--rw-text-small); }
/* Phone and date of birth share a row where two fit, and fold by themselves where they do not
   (auto-fit on a rem floor, so 200% text folds them too — no breakpoint to forget). */
.ic-account__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--rw-field-stack) var(--rw-space-4); align-items: start; max-inline-size: var(--rw-form-measure); min-inline-size: 0; }
@media (max-width: 40rem) { .ic-account__identity { padding: var(--rw-space-4); } }

/* Your masjids: the kit's collection sheet (the rows are wrapped in .ic-records so the S2 recipe
   applies as it does everywhere else), and each row wears the masjid's own mark beside its name —
   the hub's ledger and this list are one drawing. */
.ic-myorgs .ic-records > .ic-row:last-child { border-block-end: 0; }
.ic-myorgs .ic-row { padding-block: var(--rw-space-3); }
.ic-myorgs .ic-row__main { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mark name" "mark meta"; column-gap: var(--rw-space-4); row-gap: .125rem; align-items: center; }
.ic-myorgs .ic-row__name, .ic-myorgs .ic-row__name > [data-orgs="name"], .ic-myorgs .ic-row__name .ic-ident { display: contents; }
.ic-myorgs .ic-ident__mark { grid-area: mark; }
.ic-myorgs .ic-ident:not([data-org-accent]) .ic-ident__mark--lettered { border: 1px solid var(--rw-line); }
.ic-myorgs .ic-ident__name { grid-area: name; align-self: end; min-inline-size: 0; overflow-wrap: break-word; }
.ic-myorgs .ic-row__meta { grid-area: meta; align-self: start; }
/* Large text on a phone: the rem-sized mark would take the name's width, so the mark stands above
   the name. 16rem of list keeps a 10rem name column beside the mark (320 at 100% text keeps the
   side-by-side drawing); the container rem scales with text size, so 150% and 200% text stack. */
.ic-myorgs .ic-records { container: ic-myorgs / inline-size; }
@container ic-myorgs (max-width: 16rem) {
    .ic-myorgs .ic-row__main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mark" "name" "meta"; justify-items: start; }
}
/* The door carries the hub's drawn chevron. */
.ic-myorgs .ic-row__side > a.ic-btn--outline { display: inline-flex; align-items: center; gap: var(--rw-space-2); padding-inline: var(--rw-space-4) var(--rw-space-3); }
.ic-myorgs .ic-row__side > a.ic-btn--outline::after { content: ""; flex: none; inline-size: .45em; block-size: .45em; border-block-start: .125rem solid currentColor; border-inline-end: .125rem solid currentColor; transform: rotate(45deg); }
.ic-myorgs .ic-row__side > a.ic-btn--outline:dir(rtl)::after { transform: rotate(-45deg); }

:lang(ar) .ic-account__identity .ic-account__fact, :lang(ur) .ic-account__identity .ic-account__fact { line-height: var(--rw-leading-arabic); }

/* ── Notifications ──────────────────────────────────────────────────────────────────── */

/* The body and its panel are one record: closer to each other than the record is to the header
   (the section gap), and far enough apart that the panel is not a caption glued to the body. */
.ic-notif { display: grid; gap: var(--rw-space-8); min-inline-size: 0; }
.ic-notif__body { white-space: pre-line; min-inline-size: 0; overflow-wrap: anywhere; max-inline-size: var(--rw-reading-measure); }
.ic-notif__actions { display: flex; flex-wrap: wrap; gap: var(--rw-space-2); }
.ic-notif__note { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }

/* A reading measure for an inbox: capped, so a notice's sentence is never one 1,300px line. */
.ic-notifs .ic-admin__inner { max-inline-size: 56rem; container: ic-notifs / inline-size; }

/* The page's one action stands beside the title instead of under the lede, where it read as the
   first row of the list. Container query, so 200% text puts it back under the lede. */
@container ic-notifs (min-width: 40rem) {
    .ic-notifs .ic-pagehead { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--rw-space-6); }
    .ic-notifs .ic-pagehead > * { grid-column: 1; }
    .ic-notifs .ic-pagehead > .ic-pagehead__actions { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin-block-start: 0; }
}

/* Each notice: title and time on the first line, then the sentence at BODY size — the notice is
   the content, not a footnote — with its one action in a shared column at inline-end. */
.ic-notifs .ic-module__body .ic-queue { gap: 0; }
.ic-notifs .ic-module__body .ic-queue__item {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head head" "body act";
    column-gap: var(--rw-space-6); row-gap: var(--rw-space-1); align-items: center; padding-block: var(--rw-space-4);
}
.ic-notifs .ic-queue__head { grid-area: head; }
.ic-notifs .ic-queue__title { font-size: var(--rw-text-body); font-weight: 700; }
.ic-notifs .ic-queue__link { min-block-size: var(--rw-target-min); text-decoration-color: var(--rw-accent-border); text-underline-offset: .25em; }
.ic-notifs .ic-queue__body { grid-area: body; }
.ic-notifs .ic-queue__actions { grid-area: act; align-self: center; }
/* A read notice is history: it steps back a tone. Never the only cue — the flag bar and the
   visually hidden word still carry unread. */
.ic-notifs [data-notif-state="read"] .ic-queue__title { font-weight: 600; }
.ic-notifs [data-notif-state="read"] .ic-queue__body { color: var(--rw-ink-muted); }

/* Two planes, two meanings: what needs a decision stays the one raised sheet with its brass edge;
   Updates settle onto the ground as a hairline list under the same label. */
.ic-notifs [data-notifs="updates"].ic-module { background: transparent; border-color: transparent; box-shadow: none; padding: 0; }
.ic-notifs [data-notifs="updates"] .ic-module__body .ic-queue { border-block-start: 1px solid var(--rw-line); }

@container ic-notifs (max-width: 39.99rem) {
    .ic-notifs .ic-module__body .ic-queue__item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body" "act"; }
    .ic-notifs .ic-queue__head { flex-direction: column; align-items: flex-start; gap: 0; }
    .ic-notifs .ic-queue__when { margin-inline-start: 0; }
    .ic-notifs .ic-queue__actions { justify-self: start; }
}

/* ── The platform console ───────────────────────────────────────────────────────────── */

.ic-platform { display: grid; gap: var(--rw-space-6); min-inline-size: 0; }
.ic-platform__quiet { color: var(--rw-ink-muted); }
.ic-platform__checked { font-variant-numeric: tabular-nums; }
/* One waiting data request: where, when asked, how long is left. Soon is the one coloured fact. */
.ic-platform__requestmeta { color: var(--rw-ink-muted); font-size: var(--rw-text-small); font-variant-numeric: tabular-nums; }
.ic-platform__reminded { color: var(--rw-ink-muted); font-size: var(--rw-text-small); white-space: nowrap; }
/* 12rem so four cards share a row beside the rail rather than leaving the fourth alone. */
.ic-platform__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--rw-space-4); }
/* Stat tiles are links: the edge stays --rw-line, the label carries a resting brass underline, and
   the rest shadow ships with its composite. `.is-below`'s danger stripe (later, (0,2,0)) still
   wins its edge while hovered. */
.ic-platform__card { display: grid; align-content: start; gap: var(--rw-space-2); background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-panel); padding: var(--rw-panel-inset); color: var(--rw-ink); text-decoration: none; min-inline-size: 0; min-block-size: var(--rw-target-min); box-shadow: var(--rw-shadow-rest); transition: var(--rw-transition-hand); }
.ic-platform__card:hover { border-color: var(--rw-control-border); background: var(--rw-surface-hover); }
/* Below the delivery floor: the edge marks it and the card's own note says so in words. */
.ic-platform__card.is-below { border-inline-start: var(--rw-space-1) solid var(--rw-danger-ink); }
.ic-platform__card:focus-visible { box-shadow: var(--rw-focus-bands), var(--rw-shadow-rest); }
a.ic-platform__card .ic-platform__cardlabel { text-decoration: underline; text-decoration-color: var(--rw-accent-border); text-underline-offset: .2em; }
.ic-platform__cardlabel { color: var(--rw-ink-muted); font-size: var(--rw-text-small); font-weight: 800; }
.ic-platform__figure { white-space: nowrap; font-size: var(--rw-text-heading); line-height: var(--rw-leading-display); font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* A word in place of a number ("No runs recorded") wraps inside its card: it is a sentence, and
   at the figure's size and nowrap it ran out of the card and over the next one. */
.ic-platform__figure--none { white-space: normal; overflow-wrap: anywhere; font-size: var(--rw-text-lead); font-weight: 600; letter-spacing: normal; color: var(--rw-ink-muted); }
.ic-platform__cardnote { color: var(--rw-ink-muted); font-size: var(--rw-text-small); overflow-wrap: anywhere; }
.ic-platform__boundary { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }

.ic-plaudit { display: grid; gap: var(--rw-space-3); min-inline-size: 0; }
.ic-plaudit__window, .ic-plaudit__scope { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }
.ic-plaudit__when { display: inline-block; margin-inline-end: var(--rw-space-3); color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.ic-plaudit__org { font-weight: 600; overflow-wrap: anywhere; }
.ic-plaudit__reason { display: block; overflow-wrap: anywhere; }
.ic-plaudit__redacted { display: block; color: var(--rw-ink-muted); font-size: var(--rw-text-small); }

.ic-orgdetail { display: grid; gap: var(--rw-space-6); min-inline-size: 0; }
.ic-orgdetail__lifecycle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-3); }
.ic-orgdetail__value { font-weight: 600; overflow-wrap: anywhere; }
.ic-orgdetail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-3); }
.ic-orgdetail__enter { display: grid; gap: var(--rw-field-stack); max-inline-size: var(--rw-field-measure); justify-items: start; }
.ic-orgdetail__enter .ic-field { justify-self: stretch; }
.ic-orgdetail__note { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }
/* A STANDING CLOSURE REQUEST, GROUPED AND NOT BOXED (owner decision #2). Two sentences that are
   one fact — who asked and why — so they are held together by the stack that separates every
   other group on this page, and by nothing else. No tint and no border: the design refuses a
   card, and this is not a fault or a warning. It is a masjid telling the platform something. */
.ic-orgdetail__request { display: grid; gap: var(--rw-space-2); margin-block-end: var(--rw-space-3); }
.ic-orgdetail__refusal { background: var(--rw-warning-bg); color: var(--rw-warning-fg); padding: var(--rw-row-padding-block) var(--rw-row-padding-inline); border-inline-start: var(--rw-space-1) solid currentColor; max-inline-size: var(--rw-reading-measure); }

.ic-ops__checked { color: var(--rw-ink-muted); font-variant-numeric: tabular-nums; }
/* ESCALATION IS A SENTENCE AND NOT A CONTROL (F9 §6). It was a chip in the warning colour reading
   "Escalate" — a rounded, tinted, small-type box beside a status, which is the shape of a button
   somebody has disabled, on a screen whose whole argument is that there is no button to press
   here. Plain running text inside the row it is about. */
.ic-ops__escalate { display: block; color: var(--rw-warning-ink); max-inline-size: var(--rw-reading-measure); }
.ic-ops__state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-3); }
.ic-ops__when { display: block; color: var(--rw-ink-muted); font-size: var(--rw-text-small); font-variant-numeric: tabular-nums; }
/* Why one message did not arrive, and what to do when sending it again cannot help. The remedy is
   ink rather than muted: it is the only line on the row somebody has to act on. */
.ic-ops__why { display: block; color: var(--rw-ink-muted); overflow-wrap: anywhere; }
.ic-ops__remedy { display: block; overflow-wrap: anywhere; max-inline-size: var(--rw-reading-measure); }
.ic-ops__actions { display: flex; flex-wrap: wrap; gap: var(--rw-space-2); }
.ic-ops__note { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }

/* THE QUEUE'S STATE IS THREE SENTENCES, NOT ONE RUN-ON. Each names a different population — how
   many are waiting, how long the oldest has, and how many have passed the platform's own
   threshold — so each gets its own line at the reading measure rather than being packed into a
   row a phone breaks wherever it likes. One source of rhythm: the grid's gap, no child margin. */
.ic-registration__count { display: grid; gap: var(--rw-label-gap); color: var(--rw-ink-muted); font-variant-numeric: tabular-nums; max-inline-size: var(--rw-reading-measure); }
.ic-registration__fact { display: block; }
/* An estimate the masjid did not give. Drawn rather than omitted, and quieter than a number. */
.ic-registration__absent { color: var(--rw-ink-muted); font-style: italic; }
.ic-registration__why { overflow-wrap: anywhere; }
.ic-registration__retry { display: grid; gap: var(--rw-field-stack); max-inline-size: var(--rw-field-measure); justify-items: start; }
.ic-registration__retry .ic-field { justify-self: stretch; }
/* The badge follows "Submitted 28 Aug 2026 · 13 days ago" on the same line, and Razor strips the
   whitespace between the expression and the span, so without its own gap it touched the text. */
.ic-registration__stale { background: var(--rw-warning-bg); color: var(--rw-warning-fg); padding: var(--rw-space-1) var(--rw-label-gap); border-radius: var(--rw-radius-control); font-size: var(--rw-text-small); margin-inline-start: var(--rw-label-gap); }
/* A phone number stays an LTR identifier in Arabic and Urdu. */
.ic-registration__phone { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.ic-registration__words { display: grid; gap: var(--rw-label-gap); }
.ic-registration__wordslabel { color: var(--rw-ink-muted); font-size: var(--rw-text-small); font-weight: 600; }
.ic-registration__quote { margin: 0; padding-inline-start: var(--rw-space-4); border-inline-start: var(--rw-space-1) solid var(--rw-line); overflow-wrap: anywhere; max-inline-size: var(--rw-reading-measure); }
.ic-registration__decide { display: grid; gap: var(--rw-field-stack); border-inline-start: var(--rw-space-1) solid var(--rw-danger-ink); padding-inline-start: var(--rw-space-3); justify-items: start; }
.ic-registration__decide .ic-field { justify-self: stretch; }
.ic-registration__actions { display: flex; flex-wrap: wrap; gap: var(--rw-space-2); }

.ic-policy { display: grid; gap: var(--rw-space-6); min-inline-size: 0; }
.ic-policy__window { font-variant-numeric: tabular-nums; }
.ic-policy__affected { margin: 0; padding-inline-start: var(--rw-space-4); display: grid; gap: var(--rw-space-1); }
.ic-policy__acknowledge { display: flex; align-items: center; gap: var(--rw-space-3); min-block-size: var(--rw-target-min); cursor: pointer; }
.ic-policy__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-3); }
.ic-policy__not { color: var(--rw-ink-muted); max-inline-size: var(--rw-reading-measure); }

/* Arabic and Urdu headings in this sheet's own title classes take the Arabic face, the
   same rule the kit applies to its shared titles. */
:lang(ar) :is(.ic-queue__title, .ic-notice__title, .ic-security__moduletitle, .ic-privacy__moduletitle, .ic-curric__subjectlabel, .ic-acad__programmehead, .ic-start__region-head),
:lang(ur) :is(.ic-queue__title, .ic-notice__title, .ic-security__moduletitle, .ic-privacy__moduletitle, .ic-curric__subjectlabel, .ic-acad__programmehead, .ic-start__region-head) { font-family: var(--rw-font-arabic); }

/* Two-column form rows collapse before they crush their fields. */
@media (max-width: 48rem) {
    .ic-linkform__row { grid-template-columns: minmax(0, 1fr); }
}

/* FIND A REFERENCE: one field and its button on a line, the answer under it as a small record. */
.ic-platform__lookup { max-inline-size: var(--rw-form-measure); }
.ic-platform__lookuprow { display: flex; flex-wrap: wrap; gap: var(--rw-space-2); }
.ic-platform__lookuprow .ic-input { flex: 1 1 14rem; min-inline-size: 0; font-variant-numeric: tabular-nums; }
.ic-platform__found {
    display: grid; gap: var(--rw-space-1); max-inline-size: var(--rw-form-measure);
    padding: var(--rw-panel-inset); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-panel);
}
.ic-platform__found p { margin: 0; }
.ic-platform__foundtitle { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ═══ THE PLATFORM AREA: the owner's cockpit (superadmin redesign) ═════════════════════════════
   Page-scoped: every rule starts
   at a page class the platform sections carry (.rw-rd-cockpit plus .rw-rd-plat, -ops, -orgdetail, -orgs,
   -regs or -audit), or at a class only these pages render. Nothing here restyles a kit component
   outside the platform area. Built on the depth spec: boards sit on the ground, instruments are the
   raised plane, rows only tint, and link tiles keep PA-4 exactly (this block sets no box-shadow on
   any focusable element, so the PA-4 composite stays the only one). Logical properties only. */

/* ── Shared by every platform page ─────────────────────────────────────────────────────────── */
.rw-rd-cockpit > .ic-admin__inner { gap: var(--rw-space-8); container: rw-plat / inline-size; }

/* The reading's freshness sits at the end of the title line on the two pages that read the live
   service (home and operations). On a narrow page it drops under the title. */
:is(.rw-rd-plat, .rw-rd-ops) .ic-pagehead__lede { color: var(--rw-ink-muted); font-size: var(--rw-text-small); font-variant-numeric: tabular-nums; }
@container rw-plat (min-width: 44rem) {
    :is(.rw-rd-plat, .rw-rd-ops) .ic-pagehead { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--rw-space-6); }
    :is(.rw-rd-plat, .rw-rd-ops) .ic-pagehead > * { grid-column: 1; }
    :is(.rw-rd-plat, .rw-rd-ops) .ic-pagehead > .ic-pagehead__title { grid-row: 2; }
    :is(.rw-rd-plat, .rw-rd-ops) .ic-pagehead > .ic-pagehead__lede { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; margin-block-end: var(--rw-space-2); text-align: end; }
}

/* ── A reference: the identifier somebody quotes, set as one recessed chip everywhere ─────────── */
.ic-platform__ref, .rw-rd-orgs .ic-orgs__reference {
    display: inline; padding: .125rem var(--rw-label-gap); border-radius: var(--rw-radius-control); box-decoration-break: clone; -webkit-box-decoration-break: clone;
    background: var(--rw-ground-2); color: var(--rw-ink); font-size: var(--rw-text-small);
    font-variant-numeric: tabular-nums; letter-spacing: .02em;
}

/* ═══ REQUEST ROWS: the home to-do and the masjid's own requests share one row ═══════════════
   WHAT (the kind of request, then its facts), WHEN (days left over the answer-by date) and ONE
   ACT. On a phone WHAT runs full width and WHEN and the act share the line under it, the act at
   the inline end. Where the card is wide enough, every row shares one set of column tracks
   (subgrid), so each due date and each act lines up whatever the language; the fold is the
   card's own width, never the viewport, so 200% text folds it too. */
.rw-rd-requests { container: rw-requests / inline-size; }
.rw-rd-requests .ic-records > .ic-record {
    display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; justify-items: start;
    gap: var(--rw-space-2) var(--rw-space-4); padding-block: var(--rw-space-4);
}
.rw-rd-requests .ic-records > .ic-record:first-child { padding-block-start: var(--rw-space-2); }
.rw-rd-requests .ic-record__who { grid-column: 1 / -1; justify-self: stretch; gap: var(--rw-space-1); }
.rw-rd-requests .ic-record > .ic-record__extra { flex-basis: auto; }
/* From 18rem (a phone at default text) WHEN and the act share the line under WHAT; narrower (320px,
   or text enlarged) they stack, so a wrapped deadline never runs under the button. */
@container rw-requests (min-width: 18rem) {
    .rw-rd-requests .ic-records > .ic-record { grid-template-columns: minmax(0, 1fr) auto; }
    .rw-rd-requests .ic-record > .ic-platform__due { grid-column: 1; }
    .rw-rd-requests .ic-record > .ic-record__extra { grid-column: 2; justify-self: end; }
    /* A row with no deadline (a service attention item) keeps its act beside its sentence. */
    .rw-rd-requests .ic-record:not(:has(> .ic-platform__due)) > .ic-record__who { grid-column: 1; }
}
@container rw-requests (min-width: 38rem) {
    .rw-rd-requests .ic-records { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--rw-space-6); }
    .rw-rd-requests .ic-records > .ic-record { grid-column: 1 / -1; grid-template-columns: subgrid; }
    .rw-rd-requests .ic-record__who { grid-column: 1; }
    .rw-rd-requests .ic-record > .ic-platform__due { grid-column: 2; grid-row: 1; justify-self: end; justify-items: end; text-align: end; }
    .rw-rd-requests .ic-record > .ic-record__extra { grid-column: 3; grid-row: 1; }
}

/* The facts line: reference chip, masjid, asked, reminded. Each fact is a unit that moves to the
   next line whole, and each separator is glued to the fact before it (markup: "&#160;· "), so a
   line never starts with a dot and a long masjid name still wraps inside a 320px phone. */
.ic-platform__fact { display: inline-block; max-inline-size: 100%; }
.rw-rd-requests .ic-platform__requestmeta { line-height: 1.8; }

/* WHEN: the days are the reading, the date its footnote. Three steps, and the words are always
   there: plain ink, due soon in the warning ink, overdue in the opaque danger pair. Soon used
   --rw-warning-fg on the card, which at night is the cream of the warning pair and read as
   ordinary ink; the warning INK is the token meant for text on a ground. */
.ic-platform__due { display: grid; gap: 2px; justify-items: start; font-variant-numeric: tabular-nums; }
.ic-platform__duefigure { color: var(--rw-ink); font-weight: 600; }
.ic-platform__duedate { color: var(--rw-ink-muted); font-size: var(--rw-text-small); font-weight: 400; }
.ic-platform__due--soon { color: var(--rw-warning-ink); }
.ic-platform__due--soon .ic-platform__duefigure { color: var(--rw-warning-ink); }
.ic-platform__due--over .ic-platform__duefigure { padding-inline: var(--rw-label-gap); border-radius: var(--rw-radius-control); background: var(--rw-danger-bg); color: var(--rw-danger-fg); }
.rw-rd-requests .ic-platform__reminded { display: inline-flex; align-items: center; min-block-size: var(--rw-target-min); }

/* ═══ /admin: the board ═══════════════════════════════════════════════════════════════════════
   One grid, and the DOM order is the reading order: the to-do (or the quiet sentence), then the
   service instruments (delivery, jobs), the estate (organisations, support), the reference tool
   and the boundary. Attention still precedes every count in the markup
   (PlatformHomeTests.What_needs_attention_comes_before_the_counts). The board has three shapes,
   chosen in markup from the to-do's own count, so a long to-do never strands a void beside it:
     normal (1 to 3 items) · to-do beside delivery and jobs, the estate and the tool beneath;
     long (4 or more)      · the lane beside the to-do carries all four instruments, the tool
                             runs as a strip beneath;
     quiet (none)          · the sentence runs full width, four instruments across, the strip. */
.rw-rd-plat__board { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-4); align-items: stretch; }
.rw-rd-plat__board > .ic-platform__cards { display: contents; }
@container rw-plat (min-width: 36rem) {
    .rw-rd-plat__board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rw-rd-plat__board > :not(.ic-platform__cards) { grid-column: 1 / -1; }
}
@container rw-plat (min-width: 50rem) {
    .rw-rd-plat__board { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    /* normal */
    .rw-rd-plat__board > .rw-rd-plat__todo { grid-column: 1 / span 8; grid-row: 1 / span 2; }
    .rw-rd-plat__board [data-platform="delivery"] { grid-column: 9 / -1; grid-row: 1; }
    .rw-rd-plat__board [data-platform="jobs"] { grid-column: 9 / -1; grid-row: 2; }
    .rw-rd-plat__board [data-platform="organizations"] { grid-column: 1 / span 4; grid-row: 3; }
    .rw-rd-plat__board [data-platform="support"] { grid-column: 5 / span 4; grid-row: 3; }
    .rw-rd-plat__board > .rw-rd-plat__find { grid-column: 9 / -1; grid-row: 3; }
    .rw-rd-plat__board > .ic-platform__boundary { grid-column: 1 / -1; grid-row: 4; }
    /* normal, answered: a lookup answer lengthens the tool, so the estate tiles beside it keep
       their own height rather than stretch to it (a card with a hole in it). The tool stays where
       it was used and opens downward; moving it to a strip would carry the field just typed in
       below the fold of a 1280 x 900 screen. */
    .rw-rd-plat__board:not(.rw-rd-plat__board--long, .rw-rd-plat__board--quiet):has(> .rw-rd-plat__find > :is(.ic-platform__found, .ic-field__error)) :is([data-platform="organizations"], [data-platform="support"]) { align-self: start; }
    /* long */
    .rw-rd-plat__board--long > .rw-rd-plat__todo { grid-row: 1 / span 4; }
    .rw-rd-plat__board--long [data-platform="organizations"] { grid-column: 9 / -1; grid-row: 3; }
    .rw-rd-plat__board--long [data-platform="support"] { grid-column: 9 / -1; grid-row: 4; }
    .rw-rd-plat__board--long > .rw-rd-plat__find { grid-column: 1 / -1; grid-row: 5; }
    .rw-rd-plat__board--long > .ic-platform__boundary { grid-row: 6; }
    /* quiet */
    .rw-rd-plat__board--quiet > .rw-rd-plat__verdict { grid-column: 1 / -1; grid-row: 1; }
    .rw-rd-plat__board--quiet [data-platform="delivery"] { grid-column: 1 / span 3; }
    .rw-rd-plat__board--quiet [data-platform="jobs"] { grid-column: 4 / span 3; }
    .rw-rd-plat__board--quiet [data-platform="organizations"] { grid-column: 7 / span 3; }
    .rw-rd-plat__board--quiet [data-platform="support"] { grid-column: 10 / span 3; }
    /* Four across share their rows, so a label that wraps never drops one figure below the others. */
    .rw-rd-plat__board--quiet .ic-platform__card { grid-row: 2 / span 3; grid-template-rows: subgrid; row-gap: var(--rw-space-2); }
    .rw-rd-plat__board--quiet .ic-platform__cardlabel { align-self: start; }
    .rw-rd-plat__board--quiet .rw-rd-plat__go { align-self: start; margin-block-start: .1875rem; }
    .rw-rd-plat__board--quiet > .rw-rd-plat__find { grid-column: 1 / -1; grid-row: 5; }
    .rw-rd-plat__board--quiet > .ic-platform__boundary { grid-row: 6; }
}

/* ── The to-do card ─────────────────────────────────────────────────────────────────────────── */
.rw-rd-plat__todo { align-content: start; }

/* ── Instruments: the existing link tiles, one anatomy ─────────────────────────────────────────
   Label (with PA-4's resting brass underline) and the forward cue on one line, the figure in the
   display face, the note under it. PA-4's edge, shadow, hover and focus composite are untouched. */
.rw-rd-plat .ic-platform__card {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label go" "figure figure" "note note";
    gap: var(--rw-space-2) var(--rw-space-3); padding: var(--rw-space-6); overflow-wrap: break-word;
}
.rw-rd-plat .ic-platform__cardlabel { grid-area: label; align-self: center; color: var(--rw-ink); font-weight: 600; }
.rw-rd-plat .ic-platform__figure {
    grid-area: figure; margin-block-start: var(--rw-space-2);
    font-family: var(--rw-font-display); font-weight: 400; font-size: clamp(2.25rem, 1.9rem + 1.2vw, 2.75rem);
    line-height: 1.05; letter-spacing: 0; font-synthesis: none;
}
/* A sentence where a rate would be is set as a sentence: the display face at the title step, muted. */
.rw-rd-plat .ic-platform__figure--none { font-size: var(--rw-text-title); line-height: 1.25; color: var(--rw-ink-muted); white-space: normal; overflow-wrap: break-word; }
.rw-rd-plat .ic-platform__cardnote { grid-area: note; }
.rw-rd-plat .ic-platform__card.is-below .ic-platform__cardnote { color: var(--rw-danger-ink); font-weight: 600; }
/* The drill-down cue is the kit's Back glyph mirrored. Forward is always the mirror of back, so
   one declaration serves both directions: in RTL the kit's own flip and this one cancel. */
.rw-rd-plat__go { grid-area: go; display: inline-flex; align-self: center; color: var(--rw-ink-muted); }
.rw-rd-plat__go .ic-icon { inline-size: 1.125rem; block-size: 1.125rem; scale: -1 1; }
.rw-rd-plat .ic-platform__card:hover .rw-rd-plat__go { color: var(--rw-ink); }

/* Compact anatomy: the figure and its note share a line, the note wrapping under the figure when
   they cannot. Used for the one-up tiles on a phone and for the lane beside a long to-do. The flex
   declarations below are inert while a tile is a grid (the default anatomy). */
@container rw-plat (max-width: 35.99rem) {
    .rw-rd-plat .ic-platform__card { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rw-space-1) var(--rw-space-3); padding: var(--rw-space-4); }
    .rw-rd-plat .ic-platform__figure { margin-block-start: var(--rw-space-1); }
}
/* The lane beside a long to-do: the label keeps the top line and the reading (figure, note beside
   it) settles at the foot, so a tile stretched to the to-do's height reads as an instrument, not
   as a card with a hole in it. */
@container rw-plat (min-width: 50rem) {
    .rw-rd-plat__board--long .ic-platform__card {
        grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto auto;
        grid-template-areas: "label label go" ". . ." "figure note note";
        gap: var(--rw-space-1) var(--rw-space-3); padding: var(--rw-space-4) var(--rw-space-6);
    }
    .rw-rd-plat__board--long .ic-platform__figure { margin-block-start: var(--rw-space-2); font-size: 2.25rem; align-self: last baseline; }
    .rw-rd-plat__board--long .ic-platform__cardnote { align-self: last baseline; }
    .rw-rd-plat__board--long .ic-platform__figure--none { grid-area: auto; grid-column: 1 / -1; grid-row: 3; font-size: var(--rw-text-lead); }
    .rw-rd-plat__board--long .ic-platform__figure--none + .ic-platform__cardnote { grid-area: auto; grid-column: 1 / -1; grid-row: 4; }
}
/* The label and the cue fill the first line, so the figure always starts the second. */
.rw-rd-plat .ic-platform__card > .ic-platform__cardlabel { flex: 1 1 calc(100% - 1.125rem - var(--rw-space-3)); min-inline-size: 0; }
.rw-rd-plat .ic-platform__card > .rw-rd-plat__go { flex: none; }
.rw-rd-plat .ic-platform__card > .ic-platform__figure { flex: none; max-inline-size: 100%; }
.rw-rd-plat .ic-platform__card > .ic-platform__cardnote { flex: 1 1 6rem; min-inline-size: 0; }
/* A sentence in place of a figure takes its own line; its note follows under it. */
.rw-rd-plat .ic-platform__card > .ic-platform__figure--none { flex-basis: 100%; }

/* ── The quiet state: one sentence, ruled in brass, level with the page it answers ─────────── */
.rw-rd-plat__verdict {
    margin: 0; max-inline-size: 40ch; padding-block: var(--rw-space-1); padding-inline-start: var(--rw-space-6);
    border-inline-start: 2px solid var(--rw-accent-border);
    margin-block-end: var(--rw-space-2);
    font-family: var(--rw-font-display); font-size: var(--rw-text-title); line-height: 1.4; color: var(--rw-ink);
}
.rw-rd-plat__verdict:lang(ar), .rw-rd-plat__verdict:lang(ur) { line-height: var(--rw-leading-arabic-display); }

/* ── The reference tool: a card in the lane, a strip under a long or quiet board ───────────── */
.rw-rd-plat__find { display: grid; align-content: start; gap: var(--rw-space-4); padding: var(--rw-space-6); }
.rw-rd-plat__find .ic-platform__lookup { max-inline-size: none; }
.rw-rd-plat__find .ic-field__label { font-weight: 600; }
.rw-rd-plat__find .ic-platform__lookuprow .ic-input { flex-basis: 10rem; }
.rw-rd-plat__find .ic-platform__found { max-inline-size: none; padding: var(--rw-space-4); background: var(--rw-ground-2); border: 0; box-shadow: var(--rw-well-shade); }
@container rw-plat (min-width: 50rem) {
    :is(.rw-rd-plat__board--long, .rw-rd-plat__board--quiet) .rw-rd-plat__find .ic-field {
        grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); column-gap: var(--rw-space-8); align-items: center; max-inline-size: none;
    }
    :is(.rw-rd-plat__board--long, .rw-rd-plat__board--quiet) .rw-rd-plat__find .ic-field > .ic-field__label { grid-column: 1; grid-row: 1; }
    :is(.rw-rd-plat__board--long, .rw-rd-plat__board--quiet) .rw-rd-plat__find .ic-field > .ic-field__hint { grid-column: 1; grid-row: 2; }
    :is(.rw-rd-plat__board--long, .rw-rd-plat__board--quiet) .rw-rd-plat__find .ic-field > .ic-platform__lookuprow { grid-column: 2; grid-row: 1 / span 2; }
}

/* ── The boundary, said once, quietly, under the board ────────────────────────────────────── */
.rw-rd-plat .ic-platform__boundary {
    margin: 0; padding-block-start: var(--rw-space-4); border-block-start: 1px solid var(--rw-line);
    max-inline-size: none; color: var(--rw-ink-muted); font-size: var(--rw-text-small);
}

/* ═══ /admin/operations: the cockpit's drill-down ═════════════════════════════════════════════
   Each module leads with its reading (the state in the head, the reading in the display face) and
   the definition of the figures moves to a hairline foot. Mail and the UmmahAPI ledger share the
   first row; the job history runs full width beneath, one line per job. When mail is struggling
   (the markup adds --wide to the board), the mail card takes the whole row for its failed sends
   and the ledger runs across the page under the jobs. Markup keeps the razor's order (mail, jobs, UmmahAPI); only
   the mail card holds controls, so no focus order changes. */
.rw-rd-ops__board { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-4); align-items: stretch; }
.rw-rd-ops__board > * { grid-column: 1 / -1; }
@container rw-plat (min-width: 50rem) {
    .rw-rd-ops__board { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .rw-rd-ops__board > .rw-rd-ops__email { grid-column: 1 / span 7; grid-row: 1; }
    .rw-rd-ops__board > .rw-rd-ops__ummah { grid-column: 8 / -1; grid-row: 1; }
    .rw-rd-ops__board > .rw-rd-ops__jobs { grid-column: 1 / -1; grid-row: 2; }
    .rw-rd-ops__board--wide > .rw-rd-ops__email { grid-column: 1 / -1; }
    .rw-rd-ops__board--wide > .rw-rd-ops__ummah { grid-column: 1 / -1; grid-row: 3; }
}
.rw-rd-ops .ic-module { align-content: start; }
.rw-rd-ops .ic-module__head { align-items: center; min-block-size: 2.25rem; }
.rw-rd-ops .ic-module__body { gap: var(--rw-space-3); }

/* Mail: the last event is the headline reading. */
.rw-rd-ops .ic-ops__state { margin: 0; font-family: var(--rw-font-display); font-size: var(--rw-text-title); line-height: 1.3; color: var(--rw-ink); }
.rw-rd-ops .ic-ops__state:lang(ar), .rw-rd-ops .ic-ops__state:lang(ur) { line-height: var(--rw-leading-arabic-display); }
.rw-rd-ops .ic-ops__note { margin: 0; }
.rw-rd-ops .ic-ops__define {
    margin: 0; margin-block-start: var(--rw-space-3); padding-block-start: var(--rw-space-3);
    border-block-start: 1px solid var(--rw-line); color: var(--rw-ink-muted); font-size: var(--rw-text-small);
    max-inline-size: var(--rw-reading-measure);
}
/* The definition is the card's foot: when the card is stretched beside the ledger, the foot stays
   at the bottom and the reading stays at the top, rather than both floating over an empty base. */
.rw-rd-ops__email { grid-template-rows: auto minmax(0, 1fr); }
.rw-rd-ops__email > .ic-module__body { display: flex; flex-direction: column; }
.rw-rd-ops__email .ic-ops__define { margin-block-start: auto; }
.rw-rd-ops__email .ic-alert { margin-block: var(--rw-space-2); }
.rw-rd-ops__email .ic-ops__actions { padding-block-start: var(--rw-space-2); }
/* A failed send given the page's width: the address in a fixed column, what happened beside it. */
.rw-rd-ops__email .ic-module__body { container: rw-mail / inline-size; }
@container rw-mail (min-width: 44rem) {
    .rw-rd-ops__email .ic-records > .ic-record > .ic-record__who { grid-template-columns: minmax(12rem, 20rem) minmax(0, 1fr); column-gap: var(--rw-space-6); align-items: baseline; }
    .rw-rd-ops__email .ic-records > .ic-record > .ic-record__who > * { grid-column: 2; }
    .rw-rd-ops__email .ic-records > .ic-record > .ic-record__who > .ic-record__name { grid-column: 1; grid-row: 1 / span 3; }
}

/* Jobs: one line per job from a tablet up (name, what it last did, its state), the escalation
   sentence under its own row. */
.rw-rd-ops__jobs { container: rw-jobs / inline-size; }
@container rw-jobs (min-width: 40rem) {
    .rw-rd-ops__jobs .ic-records > .ic-record { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--rw-space-6); }
    .rw-rd-ops__jobs .ic-record__who { grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); column-gap: var(--rw-space-6); align-items: baseline; }
    .rw-rd-ops__jobs .ic-record__who > .ic-ops__escalate { grid-column: 2; }
}
.rw-rd-ops__jobs .ic-ops__when { font-size: var(--rw-text-small); }

/* UmmahAPI: a ledger. The fact's name small, its reading under it, the key's state at the end. In
   the narrow column it runs down; given the page's width it runs across, three facts in a row.
   The state keeps its own column only where the reading still has 12rem beside it; narrower (a
   phone at 200% text, or 320px) the kit's wrapping row drops the state under the reading. A
   fixed two-track grid there left the reading 43-53px wide and a row over a screen tall. */
.rw-rd-ops__ummah { container: rw-ummah / inline-size; }
.rw-rd-ops__ummah .ic-records > .ic-record { align-items: start; gap: var(--rw-space-1) var(--rw-space-3); padding-block: var(--rw-space-3); }
@container rw-ummah (min-width: 18rem) {
    .rw-rd-ops__ummah .ic-records > .ic-record { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
}
.rw-rd-ops__ummah .ic-records > .ic-record:first-child { padding-block-start: 0; }
.rw-rd-ops__ummah .ic-record__who { gap: var(--rw-space-1); }
.rw-rd-ops__ummah .ic-record__name { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.rw-rd-ops__ummah .ic-ops__when { color: var(--rw-ink); font-size: var(--rw-text-body); }
@container rw-ummah (min-width: 44rem) {
    .rw-rd-ops .rw-rd-ops__ummah .ic-records { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--rw-space-8); }
    .rw-rd-ops .rw-rd-ops__ummah .ic-records > .ic-record { margin-inline: 0; padding: 0; border-block-end: 0; }
}

/* Jobs with no history: in a cockpit an empty instrument is a reading, not a moment of pause, so
   it is set like the mail card's reading (display face, title step, start-aligned) and the arch is
   kept for the pages where emptiness IS the page. The kit keeps the arch inside a card, so this is
   page-scoped; if the kit adopts "no arch inside a Module", this block can go. */
.rw-rd-ops .ic-module .ic-state--empty { justify-items: start; text-align: start; max-inline-size: none; min-inline-size: 0; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-2); padding: 0; }
.rw-rd-ops .ic-module .ic-state--empty::before { content: none; }
/* The display face at the title step is wider than a phone card at 200% text ("baggrundskørsel"
   is 324px), so the reading breaks inside a word rather than run past the card; the note already
   does (the kit's .ic-state__text). */
.rw-rd-ops .ic-module .ic-state--empty .ic-state__label { font-family: var(--rw-font-display); font-weight: 400; font-size: var(--rw-text-title); line-height: 1.3; overflow-wrap: anywhere; }
.rw-rd-ops .ic-module .ic-state--empty .ic-state__label:lang(ar), .rw-rd-ops .ic-module .ic-state--empty .ic-state__label:lang(ur) { line-height: var(--rw-leading-arabic-display); }
.rw-rd-ops .ic-module .ic-state--empty .ic-state__text { margin: 0; max-inline-size: var(--rw-reading-measure); color: var(--rw-ink-muted); font-size: var(--rw-text-small); }

/* ═══ /admin/organizations/{id}: the masjid, as the platform may see it ════════════════════════
   The identity line under the name: the lifecycle badge (and its reason) STAYS where the razor
   draws it, after any banner (RR-8), wrapped with where the masjid is and when it joined, which
   leave the facts card so the date is drawn once. It is pulled up to the title only when it is
   the first thing in the record, so a banner is never pulled under the name. Then the requests,
   the facts as one ledger across, and the two doors side by side: support (reversible, ordinary)
   first, lifecycle beside it. Modules carry explicit classes, so the layout does not depend on
   which modules or banners a state renders. */
.rw-rd-orgdetail .ic-orgdetail { gap: var(--rw-space-4); }
.rw-rd-orgdetail .ic-orgdetail > .ic-orgdetail__identity:first-child { margin-block-start: calc(var(--rw-space-2) - var(--rw-space-8)); }
.ic-orgdetail__identity { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-2) var(--rw-space-6); margin-block-end: var(--rw-space-4); min-inline-size: 0; }
.ic-orgdetail__identity > .ic-orgdetail__lifecycle { margin: 0; }
.ic-orgdetail__where { display: flex; flex-wrap: wrap; gap: var(--rw-space-1) var(--rw-space-6); margin: 0; min-inline-size: 0; }
.ic-orgdetail__where > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rw-space-2); min-inline-size: 0; }
.ic-orgdetail__where dt { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.ic-orgdetail__where dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@container rw-plat (min-width: 50rem) {
    .rw-rd-orgdetail .ic-orgdetail { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; }
    .rw-rd-orgdetail .ic-orgdetail > * { grid-column: 1 / -1; }
    .rw-rd-orgdetail .ic-orgdetail > .rw-rd-orgdetail__support { grid-column: 1 / span 6; }
    .rw-rd-orgdetail .ic-orgdetail > .rw-rd-orgdetail__lifecycle { grid-column: 7 / -1; }
}
.rw-rd-orgdetail .ic-orgdetail > .ic-module { align-content: start; }
.rw-rd-orgdetail .ic-orgdetail__note { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }

/* The facts: one ledger across. The fact's name small and muted, its value at the lead step, the
   explanation (where there is one) under the value. Cells, not rows: no rule, no tint. */
/* Four facts, so four across, two by two, or one down: never three over one. The fold is the
   card's own width, so 200% text folds it too. */
.rw-rd-orgdetail__facts { container: rw-facts / inline-size; }
.rw-rd-orgdetail .rw-rd-orgdetail__facts .ic-records { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-6) var(--rw-space-8); }
@container rw-facts (min-width: 30rem) {
    .rw-rd-orgdetail .rw-rd-orgdetail__facts .ic-records { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container rw-facts (min-width: 50rem) {
    .rw-rd-orgdetail .rw-rd-orgdetail__facts .ic-records { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.rw-rd-orgdetail .rw-rd-orgdetail__facts .ic-records > .ic-record {
    display: grid; grid-template-areas: "name" "value" "note"; align-content: start; gap: var(--rw-space-1);
    margin: 0; padding: 0; border: 0; color: var(--rw-ink-muted); font-size: var(--rw-text-small);
}
.rw-rd-orgdetail .rw-rd-orgdetail__facts .ic-record__who { display: contents; }
.rw-rd-orgdetail .rw-rd-orgdetail__facts .ic-record__name { grid-area: name; color: var(--rw-ink-muted); font-weight: 600; }
.rw-rd-orgdetail .rw-rd-orgdetail__facts .ic-record__extra { grid-area: value; }
.rw-rd-orgdetail .rw-rd-orgdetail__facts .ic-orgdetail__value { color: var(--rw-ink); font-size: var(--rw-text-lead); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ═══ /admin/organizations: the estate ═══════════════════════════════════════════════════════
   Search and the lifecycle chooser on one line (the chooser's counts ARE the estate's ledger), the
   scope note under them, and each row carrying its reference chip beside the name where both fit
   and on the line under it, whole, where they do not. */
.rw-rd-orgs .ic-collection__filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-space-3) var(--rw-space-6); align-items: end; }
@container rw-plat (min-width: 50rem) {
    .rw-rd-orgs .ic-collection__filters { grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr); }
    .rw-rd-orgs .ic-collection__filters > .ic-orgs__scope { grid-column: 1 / -1; }
}
.rw-rd-orgs .ic-collection__filters .ic-rowchoice { flex-wrap: wrap; }
.rw-rd-orgs .ic-collection__filters .ic-rowchoice__option { flex: 0 0 auto; }
.rw-rd-orgs .ic-orgs__scope { margin: 0; max-inline-size: none; }
.rw-rd-orgs .ic-collection__summary { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.rw-rd-orgs .ic-records > .ic-record { padding-block: var(--rw-space-3); }
/* A wrapping row, not a two-track grid: in a grid the name took the auto track and the chip got
   what was left, one character a line at 320px or 200% text. Here the chip moves to the next line
   as a whole, and breaks (at its hyphen) only where that line is narrower than the reference. The
   facts follow on lines of their own; the chip leads them visually, as it did in the grid. */
.rw-rd-orgs .ic-record__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rw-space-1) var(--rw-space-3); }
.rw-rd-orgs .ic-record__who > * { flex: 1 1 100%; }
.rw-rd-orgs .ic-record__who > :is(.ic-record__name, .ic-orgs__reference) { flex: 0 1 auto; }
.rw-rd-orgs .ic-record__who > :not(.ic-record__name, .ic-orgs__reference) { order: 1; }

/* ═══ /admin/registrations: the queue ═════════════════════════════════════════════════════════
   The queue's state is one line under the title; each application is a decision sheet: their
   words, four facts in a two-by-two ledger, and the three acts on one rule. */
.rw-rd-regs .ic-registration__count { display: flex; flex-wrap: wrap; gap: 0 .35em; margin-block-start: calc(var(--rw-space-4) - var(--rw-space-8)); color: var(--rw-ink-muted); }
.rw-rd-regs .ic-module__lede { font-variant-numeric: tabular-nums; }
.rw-rd-regs .ic-module .ic-module__body { container: rw-regs / inline-size; }
.rw-rd-regs .ic-module .ic-records { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--rw-space-8); }
@container rw-regs (min-width: 36rem) {
    .rw-rd-regs .ic-module .ic-records { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rw-rd-regs .ic-module .ic-records > .ic-record:nth-last-child(2):nth-child(odd) { border-block-end: 0; }
}
/* Two facts side by side start on one line, even when one of them wraps. */
.rw-rd-regs .ic-module .ic-records > .ic-record { align-items: flex-start; padding-block: var(--rw-space-3); }
.rw-rd-regs .ic-module .ic-record__who { gap: var(--rw-space-1); }
.rw-rd-regs .ic-module .ic-record__name { color: var(--rw-ink-muted); font-size: var(--rw-text-small); font-weight: 600; }
.rw-rd-regs .ic-registration__actions { padding-block-start: var(--rw-space-4); border-block-start: 1px solid var(--rw-line); }

/* ═══ /admin/audit: the trail ═════════════════════════════════════════════════════════════════
   The window and what it holds on one line; the chooser stops stretching; the bounds are a
   footnote under the trail rather than a second card saying one sentence. */
.rw-rd-audit .ic-plaudit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-3) var(--rw-space-6); }
.rw-rd-audit .ic-plaudit > .ic-rowchoice .ic-rowchoice__option { flex: 0 0 auto; }
.rw-rd-audit .ic-plaudit > .ic-plaudit__window { margin: 0; color: var(--rw-ink-muted); font-size: var(--rw-text-small); font-variant-numeric: tabular-nums; }
.rw-rd-audit .ic-plaudit > :not(.ic-rowchoice, .ic-plaudit__window) { flex: 1 1 100%; }
.rw-rd-audit .ic-plaudit > .ic-state { margin-block-start: var(--rw-space-4); }
.rw-rd-audit > .ic-admin__inner { row-gap: var(--rw-space-6); }
.rw-rd-audit .ic-module[data-part="bounds"] { gap: var(--rw-space-1); padding: 0; padding-block-start: var(--rw-space-4); background: none; border: 0; border-block-start: 1px solid var(--rw-line); border-radius: 0; box-shadow: none; }
.rw-rd-audit .ic-module[data-part="bounds"] .ic-module__label { font-size: var(--rw-text-small); font-weight: 600; }
.rw-rd-audit .ic-module[data-part="bounds"] .ic-plaudit__scope { margin: 0; color: var(--rw-ink-muted); font-size: var(--rw-text-small); }

.ic-privacy__preface { display: grid; gap: var(--rw-space-2); }
.ic-privacy__preface > p { margin: 0; }