/* Riwaq shell: document order is visual order; the rail is inline-start in both directions. */
.ic-shell { min-block-size: 100dvh; }
.ic-shell__chrome { background: var(--rw-ground); border-block-end: 1px solid var(--rw-line); }
.ic-header__inner { max-inline-size: var(--rw-page-measure); margin-inline: auto; padding: var(--rw-space-3) var(--rw-page-gutter); display: flex; align-items: center; gap: var(--rw-space-4); flex-wrap: wrap; }
.ic-header__brand { display: inline-flex; align-items: center; min-block-size: var(--rw-target-min); text-decoration: none; color: var(--rw-ink); }
.ic-header__actions, .ic-header__nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--rw-space-3); }
.ic-header__actions { margin-inline-start: auto; }
/* `.ic-mobile a` at (0,1,1) beat `.ic-btn--primary` (0,1,0), so the phone menu's brass pill took
   sepia ink (4.36:1 by day, cream at 1.88:1 at night) and 12px corners. Excluding .ic-btn lets the
   pill keep accent-ink (4.91 / 7.56) and its pill shape. */
.ic-header__link, .ic-header__notify, .ic-header__accountlink, .ic-header__logout, .ic-mobile a:not(.ic-btn) { min-inline-size: var(--rw-target-min); display: flex; align-items: center; min-block-size: var(--rw-target-min); padding-inline: var(--rw-space-3); gap: var(--rw-space-2); color: var(--rw-ink); text-decoration: none; border-radius: var(--rw-radius-control); transition: var(--rw-transition-hand); }
/* The top bar rides the courtyard ground, so its hover deepens to the recessed ground — the
   same one step in that surface's own family. The underline comes with it, because the top bar
   is where a reader is most likely to be scanning rather than aiming. (Task 7F · D3.) */
/* On the bar the value is unchanged; inside the account menu it tints parchment instead of punching
   a #141E1A hole at night. */
.ic-header__link:hover, .ic-header__notify:hover, .ic-header__accountlink:hover, .ic-header__logout:hover, .ic-mobile a:not(.ic-btn):hover { background: var(--rw-hover-ground, var(--rw-ground-2)); text-decoration: underline; text-underline-offset: var(--rw-space-1); }
/* The public nav never showed where the reader was, although the markup already emits
   aria-current. It is a decoration, never a box-shadow, and it comes after the hover so a hovered
   current link keeps its mark. nav-active-ink measures 8.90 / 8.33 on the ground; the brass
   underline 4.63 / 6.67. */
.ic-header__link[aria-current="page"], .ic-mobile a:not(.ic-btn)[aria-current="page"] {
    color: var(--rw-nav-active-ink); font-weight: 700;
    text-decoration: underline 2px var(--rw-accent-border); text-underline-offset: .5em;
}
/* The account summary takes the ground and NOT the underline: it is a stack of three lines and
   a chevron rather than a link, and underlining it draws three rules across a person's name,
   their masjid and their role. The tonal step alone is 1.08:1 after dark, which is why every
   single-line control above also carries the underline and this one has to earn its cue from
   the chevron it already draws. */
.ic-header__summary:hover { background: var(--rw-ground-2); border-radius: var(--rw-radius-control); }
.ic-header__link:active, .ic-header__notify:active, .ic-header__accountlink:active, .ic-header__logout:active, .ic-mobile a:not(.ic-btn):active, .ic-header__summary:active { background: transparent; translate: 0 1px; box-shadow: var(--rw-press-inset); }
/* The press inset replaced the cream bands under a held key. Both, in that order. */
.ic-header__link:active:focus-visible, .ic-header__notify:active:focus-visible, .ic-header__accountlink:active:focus-visible,
.ic-header__logout:active:focus-visible, .ic-mobile a:not(.ic-btn):active:focus-visible, .ic-header__summary:active:focus-visible {
    box-shadow: var(--rw-press-inset), var(--rw-focus-bands);
}
.ic-header__notifycount, .ic-side__count { border-radius: var(--rw-radius-control); padding-inline: var(--rw-space-2); background: var(--rw-accent-fill); color: var(--rw-accent-ink); font-weight: 800; }
.ic-header__account { position: relative; }
.ic-header__summary { display: flex; align-items: center; gap: var(--rw-space-3); padding: var(--rw-space-2); cursor: pointer; list-style: none; transition: var(--rw-transition-hand); }
.ic-header__identity, .ic-header__context { display: flex; flex-direction: column; min-inline-size: 0; }
.ic-header__name { font-weight: 700; }
.ic-header__context { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
/* Initials tiles, not circles: the concept draws every monogram — the avatar, the masjid
   mark, the roster initials — as a softly rounded square on deep green. */
.ic-header__avatar, .ic-side__avatar { 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-family: var(--rw-font-display); }
.ic-header__menu { position: absolute; inset-inline-end: 0; z-index: 30; inline-size: min(20rem, calc(100vw - 2rem)); padding: var(--rw-space-3); border: 1px solid var(--rw-control-border); border-radius: var(--rw-radius-panel); background: var(--rw-surface); display: grid; gap: var(--rw-space-1); box-shadow: var(--rw-shadow-float); --rw-hover-ground: var(--rw-surface-hover); }
.ic-header__email { overflow-wrap: anywhere; padding: var(--rw-space-3); color: var(--rw-ink-muted); }
.ic-header__toggle { display: none; align-items: center; justify-content: center; flex: none; border-radius: var(--rw-radius-control); transition: var(--rw-transition-hand); }
.ic-header__bars { display: grid; gap: var(--rw-space-1); inline-size: 1.25rem; }
.ic-header__bars span { block-size: 2px; background: currentColor; }
.ic-header__chevron, .ic-side__chevron { direction: ltr; inline-size: .5rem; block-size: .5rem; border-inline-end: 2px solid; border-block-end: 2px solid; transform: rotate(45deg); flex: none; transition: transform var(--rw-motion-fast); }
/* And it turns when the disclosure opens. It never did: there was no [open] rule anywhere in the
   twelve sheets, so the caret that exists to say "this row opens" pointed the same way whether it
   was open or shut. (Task 7F.) */
.ic-side__fold[open] .ic-side__chevron, .ic-header__account[open] .ic-header__chevron { transform: rotate(225deg); }
.ic-shell__row { max-inline-size: var(--rw-page-measure); margin-inline: auto; display: grid; grid-template-columns: 16rem minmax(0, 1fr); }
.ic-shell--norail .ic-shell__row { grid-template-columns: minmax(0, 1fr); }
.ic-shell__body, .ic-main { min-inline-size: 0; }
.ic-main { padding: var(--rw-page-gutter); }
/* The parchment rail against the concept's brass hairline column — "a brass hairline
   divides without a wall" (concept, motif 02). Decorative separation, so the flattened
   brass-line token carries no AA obligation. */
.ic-side { display: flex; flex-direction: column; gap: var(--rw-space-4); padding: var(--rw-space-4); background: var(--rw-ground-2); border-inline-end: 1px solid var(--rw-line-accent); }
.ic-side__groups, .ic-side__group, .ic-side__foldbody { display: grid; gap: var(--rw-space-1); }
.ic-side__groups { gap: var(--rw-space-4); }
.ic-side__link, .ic-side__back, .ic-side__foldhead { display: flex; align-items: center; gap: var(--rw-space-3); min-block-size: var(--rw-target-min); padding: var(--rw-space-2) var(--rw-space-3); border-inline-start: 3px solid transparent; border-radius: var(--rw-radius-control); color: var(--rw-ink); text-decoration: none; transition: var(--rw-transition-hand); }
/* ── THE RAIL ANSWERS THE POINTER (Task 7F · D3) ─────────────────────────────────────────
   Every rule from here to the language panel is new. The rail, the header, the local nav and
   the language panel had no :hover rule anywhere in the twelve sheets: a volunteer moving a
   mouse down the rail got nothing back until they clicked.

   The rail's own ground is --rw-ground-2, so its hover deepens one step within that family
   rather than borrowing the parchment the current item wears — each surface tints its own
   ground, which is the rule the whole system is built on. The brass hairline comes up with it,
   so the row that answers the pointer is the row with a line beside it. */
.ic-side__link:hover, .ic-side__back:hover, .ic-side__foldhead:hover { background: var(--rw-ground-2-hover); border-inline-start-color: var(--rw-line-accent); }
/* The concept's active item: inset brass bar, parchment fill, green ink by day and
   brass-lift by night (the pair is the token's own). */
.ic-side__link[aria-current="page"], .ic-localnav__link[aria-current="page"] { border-inline-start-color: var(--rw-accent-border); background: var(--rw-surface); font-weight: 800; color: var(--rw-nav-active-ink); }
/* THE CURRENT PAGE HOVERS TOO. A rail where the row under the pointer stops responding the
   moment you are on it reads as broken rather than as finished. It deepens from parchment
   instead of lifting toward it, so it acknowledges the pointer without ever impersonating a row
   you have not visited. */
.ic-side__link[aria-current="page"]:hover, .ic-localnav__link[aria-current="page"]:hover { background: var(--rw-surface-hover); }
/* PRESS, within each row's own family — a DEPARTURE from the specification, recorded.
   The specification presses every rail row to --rw-surface-press, which is a PARCHMENT tone:
   against the rail's recessed ground it is lighter in both themes (#EDE5D5 over #E8DFCF by day,
   #14291F over #0E1F19 at night), so an ordinary row would have LIFTED under the finger while
   every other control in the product pressed in. The specification's own stated rule is that a
   press is the withdrawal of the hover tone, so an ordinary row withdraws to the rail's ground
   and the current row — whose rest IS parchment — presses to parchment's own press tone. */
.ic-side__link:active, .ic-side__back:active, .ic-side__foldhead:active { background: transparent; translate: 0 1px; box-shadow: var(--rw-press-inset); }
.ic-side__link[aria-current="page"]:active, .ic-localnav__link[aria-current="page"]:active { background: var(--rw-surface-press); }
.ic-side__link:active:focus-visible, .ic-side__back:active:focus-visible, .ic-side__foldhead:active:focus-visible { box-shadow: var(--rw-press-inset), 0 0 0 2px var(--rw-focus-light), 0 0 0 6px var(--rw-focus-light); }
.ic-side__label { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
.ic-side__roles { display: flex; flex-wrap: wrap; gap: var(--rw-space-2); }
.ic-side__role, .ic-side__soon { font-size: var(--rw-text-small); color: var(--rw-ink-muted); }
.ic-side__account, .ic-side__foot { border-block-start: 1px solid var(--rw-line); padding-block-start: var(--rw-space-4); }
.ic-side__foot { display: grid; gap: var(--rw-space-3); margin-block-start: auto; }
.ic-side__person { display: grid; min-inline-size: 0; }
.ic-side__personname { overflow-wrap: anywhere; font-weight: 700; }
.ic-side__personrole { color: var(--rw-ink-muted); font-size: var(--rw-text-small); }
.ic-side__foldhead { cursor: pointer; list-style: none; }
.ic-side__logout { border-radius: var(--rw-radius-control); transition: var(--rw-transition-hand); }
.ic-localnav { padding: var(--rw-space-3) var(--rw-page-gutter); border-block-end: 1px solid var(--rw-line); }
.ic-localnav__inner { display: flex; flex-wrap: wrap; gap: var(--rw-space-2); }
/* min-inline-size: a one-word label can be narrower than the press floor — Urdu's
   "Staff" measured 47.8px wide (found by the Task 5 sweep) — so the link carries the
   48px floor on both axes like every other strip control. */
.ic-localnav__link { display: flex; align-items: center; min-block-size: var(--rw-target-min); min-inline-size: var(--rw-target-min); padding: var(--rw-space-2) var(--rw-space-3); border-inline-start: 3px solid transparent; color: var(--rw-ink); text-decoration: none; border-radius: var(--rw-radius-control); transition: var(--rw-transition-hand); }
/* The local nav has no ground of its own — it sits on the page's courtyard ground — so it
   deepens to the recessed ground rather than to the rail's darker hover tone. Same move, one
   step, in that strip's own family. */
.ic-localnav__link:hover { background: var(--rw-ground-2); border-inline-start-color: var(--rw-line-accent); }
.ic-localnav__link:active { background: transparent; translate: 0 1px; box-shadow: var(--rw-press-inset); }
.ic-localnav__link:active:focus-visible { box-shadow: var(--rw-press-inset), 0 0 0 2px var(--rw-focus-light), 0 0 0 6px var(--rw-focus-light); }
/* THE SETTINGS ROOM. MainLayout puts one class on .ic-shell__body inside the account area
   (AccountSections.Holds), so nothing in the shell reads :has(). Wide: the section level stands at
   inline-start and the page sits at form width beside it, centred as one unit. Narrow, including
   200% text (a container query, whose rem is the page's): the one-line strip, unchanged. */
.ic-shell__body--settings { container: ic-settings / inline-size; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; column-gap: var(--rw-space-4); row-gap: 0; }
.ic-shell__body--settings > .ic-localnav, .ic-shell__body--settings > .ic-main { flex: 1 1 100%; min-inline-size: 0; }
@container ic-settings (min-width: 60rem) {
    .ic-shell__body--settings > .ic-localnav { flex: 0 0 calc(14rem + var(--rw-page-gutter)); padding: var(--rw-page-gutter) 0 0; padding-inline-start: var(--rw-page-gutter); border-block-end: 0; }
    .ic-shell__body--settings > .ic-localnav .ic-localnav__inner { flex-direction: column; flex-wrap: nowrap; overflow: visible; gap: .125rem; }
    /* A zero basis that grows to form width, not a form-width basis that shrinks: a flex line breaks
       on the basis, so at 1024 (a 60rem container, too narrow for 14rem + 46rem + three gutters) the
       page wrapped under the level, which stood alone above it as a column. */
    .ic-shell__body--settings > .ic-main { flex: 1 1 0; max-inline-size: calc(46rem + 2 * var(--rw-page-gutter)); }
}
.ic-supportbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-3); padding: var(--rw-space-3) var(--rw-page-gutter); background: var(--rw-warning-bg); color: var(--rw-warning-fg); }
.ic-supportbar__text, .ic-supportbar__facts { display: flex; flex-wrap: wrap; gap: var(--rw-space-3); }
.ic-supportbar__leave { margin-inline-start: auto; }
.ic-supportbar__ref, .ic-supportbar__time { direction: ltr; unicode-bidi: isolate; }
.ic-scrim { position: fixed; inset: 0; z-index: 39; background: rgb(18 38 31 / 65%); border: 0; }
.ic-mobile { display: grid; padding: var(--rw-space-4); gap: var(--rw-space-2); border-block-start: 1px solid var(--rw-line); }
.ic-skip { position: fixed; inset-block-start: var(--rw-space-2); inset-inline-start: var(--rw-space-2); z-index: 100; padding: var(--rw-space-3); background: var(--rw-surface); transform: translateY(-200%); }
/* Shown to a keyboard, not whenever a page moves focus under a mouse: the import flow's step
   changes put it on screen mid-page. */
.ic-skip:focus-visible { transform: none; }
.ic-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* The footer is the page's base layer, topped with the rail's brass column. Accent-text on
   ground-2 is 5.15 / 9.55; muted 5.20 / 9.35. */
.ic-footer { padding: var(--rw-page-gutter); background: var(--rw-ground-2); border-block-start: 1px solid var(--rw-line-accent); }
/* A filled floor has to reach the bottom of the screen, or a short page (not-found, join) shows it
   as a band floating over a strip of plain ground. The page grows and pushes the floor down. A
   column, not `auto 1fr auto` rows, for the reason the bare frame records: PlatformNoticeBands
   may add a band above the header, so the child count varies. */
.ic-shell:not(.ic-shell--app, .ic-shell--bare) { display: flex; flex-direction: column; }
.ic-shell:not(.ic-shell--app, .ic-shell--bare) > .ic-main { flex: 1 0 auto; }
/* The brand column holds a mark and one sentence, so 2fr left a void beside it; 1.4fr gives the
   link columns the room instead. The single column at 67.5rem and under is unchanged. */
.ic-footer__inner { max-inline-size: var(--rw-page-measure); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: var(--rw-space-8); }
.ic-footer__brand, .ic-footer__col { display: grid; align-content: start; gap: var(--rw-space-3); }
/* A link's 48px target is already its spacing; a gap on top spread four links over 240px. */
.ic-footer__col { gap: 0; }
.ic-footer__col > p { font-weight: 600; margin-block-end: var(--rw-space-2); }
.ic-footer__col a { display: flex; align-items: center; min-block-size: var(--rw-target-min); transition: color var(--rw-motion-fast) var(--rw-ease-enter); }
/* Footer links had no hover; ink on ground-2 is 11.34 / 14.39. On the recessed floor the quiet
   controls deepen within their own ground (ink 10.30 / 13.32; control-border 3.14 by day) instead
   of lifting to parchment, and a press withdraws the tone. */
.ic-footer__col a:hover { color: var(--rw-ink); text-decoration-thickness: 2px; }
.ic-footer :is(.ic-lang__toggle, .ic-appearance):hover { background: var(--rw-ground-2-hover); }
.ic-footer :is(.ic-lang__toggle, .ic-appearance):active { background: transparent; }
.ic-footer__legal { max-inline-size: var(--rw-page-measure); margin-inline: auto; display: flex; align-items: center; flex-wrap: wrap; gap: var(--rw-space-4); padding-block-start: var(--rw-space-8); }
/* ONE SOURCE OF VERTICAL RHYTHM FOR EVERY WORKING PAGE, and it is the section rhythm now.
   --rw-section-gap carries the argument; what belongs here is what a page has to do to earn it: a
   direct child of this wrapper is a REGION. Two controls that belong to the region under them — a
   tablist and the filter row beneath it — are one child wrapped together, not two children spaced
   apart, and the attendance workspace was the one page that had them loose. */
/* One column that never outgrows the page: an `auto` track took the widest region's min-content,
   and a long word in a heading at 200% text (Danish "Notifikationer" on a 375 px phone) pushed
   every region past the edge. */
.ic-org__inner, .ic-admin__inner, .ic-account__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rw-section-gap); min-inline-size: 0; }
.ic-lang { position: relative; }
/* QUIET UNTIL TOUCHED, and a pair with the appearance control beside it (family board F13,
   treatment A). This carried a bordered parchment pill, and not by choice: riwaq-base.css
   gives every button `border: 1px solid` and a surface through a zero-specificity :where(),
   so a control that declared neither inherited the loud version. In a floor holding one text
   link and one icon button, that pill was the only shouting thing on the screen.

   The INTERACTION is untouched and was never the defect: it filters as you type, lists every
   language in its own script with the English name beside it, and answers to arrow keys and
   Escape. At eleven languages that is the right pattern and the accessible one. Only the
   chrome changes — the same tokens, weights and radius as `.ic-appearance`, so the two read
   as one pair rather than two unrelated widgets. */
.ic-lang__toggle { display: flex; align-items: center; gap: var(--rw-label-gap); padding: var(--rw-label-gap) var(--rw-row-padding-inline); border: 1px solid transparent; background: transparent; border-radius: var(--rw-radius-pill); font-weight: 600; transition: var(--rw-transition-hand); }
.ic-lang__toggle:hover { border-color: var(--rw-control-border); }
/* The globe matches the appearance mark's size exactly; the attribute on the svg is 14px. */
.ic-lang__globe svg { inline-size: 1.25rem; block-size: 1.25rem; }
.ic-lang__current { font-size: var(--rw-text-small); }
/* The three shell buttons that are not .ic-btn and therefore inherited no state at all: the
   language pill, the rail's sign-out and the mobile nav toggle. Each rests on the parchment the
   base sheet gives a bare <button>, so each warms within parchment. (Task 7F · D3 — the defect
   was "navigation does not know the pointer is on it", and these are navigation.) */
.ic-lang__toggle:hover, .ic-side__logout:hover, .ic-header__toggle:hover { background: var(--rw-surface-hover); }
.ic-lang__toggle:active, .ic-side__logout:active, .ic-header__toggle:active { background: var(--rw-surface-press); translate: 0 1px; box-shadow: var(--rw-press-inset); }
.ic-lang__toggle:active:focus-visible, .ic-side__logout:active:focus-visible, .ic-header__toggle:active:focus-visible { box-shadow: var(--rw-press-inset), 0 0 0 2px var(--rw-focus-light), 0 0 0 6px var(--rw-focus-light); }
.ic-lang__panel { position: absolute; inset-inline-start: 0; inset-block-end: 100%; inline-size: min(18rem, calc(100vw - 2rem)); z-index: 45; background: var(--rw-surface); border: 1px solid var(--rw-control-border); border-radius: var(--rw-radius-panel); padding: var(--rw-space-3); box-shadow: var(--rw-shadow-float); }
.ic-lang__search { inline-size: 100%; min-block-size: var(--rw-target-min); padding-inline: var(--rw-space-3); margin-block-end: var(--rw-space-2); border: 1px solid var(--rw-control-border); border-radius: var(--rw-radius-control); background: var(--rw-ground); color: var(--rw-ink); font: inherit; }
/* padding, not 0: the list scrolls, and the focus ring's cream halo reaches 6px past the box, so
   with no inset the ring on every option was clipped by this container's own overflow — a
   clipped focus ring is a lost keyboard reader. --rw-focus-clearance is that 6px, and it is the
   same inset .ic-select__list and .ic-tablewrap already carry for the same reason. (Task 7F.) */
.ic-lang__list { list-style: none; display: grid; gap: var(--rw-space-1); margin: 0; padding: var(--rw-focus-clearance); max-block-size: 18rem; overflow: auto; scroll-padding-block: var(--rw-focus-clearance); }
/* The option is two named lines and a mark, not one run: without these rules the native name,
   the English name and the tick concatenated into "DanskDanish✓" — found by the owner's eyes
   after five clean matrices, because the sweeps only open pages, never this panel. */
.ic-lang__option { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--rw-space-3); align-items: center; inline-size: 100%; min-block-size: var(--rw-target-min); padding: var(--rw-space-2) var(--rw-space-3); text-align: start; background: transparent; border: 0; border-radius: var(--rw-radius-control); color: var(--rw-ink); cursor: pointer; transition: var(--rw-transition-hand); }
/* The panel is parchment, so an option warms one step within that family. The chosen language
   does NOT hover, for the same reason the chosen segment does not: watching the thing you have
   already picked change tone reads as "you can pick this". (Task 7F · D3 and §4.) */
.ic-lang__option:hover:not(.is-current) { background: var(--rw-surface-hover); }
.ic-lang__option:active:not(.is-current) { background: var(--rw-surface-press); translate: 0 1px; box-shadow: var(--rw-press-inset); }
.ic-lang__option:active:not(.is-current):focus-visible { box-shadow: var(--rw-press-inset), 0 0 0 2px var(--rw-focus-light), 0 0 0 6px var(--rw-focus-light); }
/* Its own direction for the letters, the list's edge for the line: an RTL name aligned right in a
   left-aligned list and read as a different kind of row. */
.ic-lang__native { font-weight: 600; justify-self: start; text-align: start; unicode-bidi: isolate; }
.ic-lang__english { grid-column: 1; font-size: var(--rw-text-small); color: var(--rw-ink-muted); }
.ic-lang__tick { grid-column: 2; grid-row: 1 / -1; color: var(--rw-accent-text); }
/* The markup marks the chosen row with is-current on the button; aria-selected sits on the li,
   so the old [aria-selected] selector here never matched and the highlight never rendered. */
/* Ground-2 inside the parchment panel was a #141E1A hole at night. Surface-press is the recess
   within parchment's own family: ink 11.97 / 11.16, the English name 5.49 / 7.25, the tick 5.44 / 7.41. */
.ic-lang__option.is-current { background: var(--rw-surface-press); }
.ic-lang__none { padding: var(--rw-space-3); color: var(--rw-ink-muted); }
@media (max-width: 67.5rem) {
    .ic-header__toggle { display: inline-flex; }
    .ic-shell__row { grid-template-columns: minmax(0, 1fr); }
    .ic-side { display: none; }
    .is-navopen .ic-side { display: flex; position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: min(22rem, calc(100vw - 3rem)); overflow-y: auto; z-index: 40; box-shadow: var(--rw-shadow-float); }
    .ic-header__nav { display: none; }
    .ic-header__identity { max-inline-size: 12rem; }
    .ic-header__name { display: none; }
    .ic-footer__inner { grid-template-columns: 1fr; }
}
/* A variable on the rail, not an icon flip, and in this sheet, so the single-icon-rule guard in
   ShellNavigationTests (riwaq-components.css) is unaffected. */
.ic-side:dir(rtl) { --rw-inline-sign: -1; }
/* On a phone the masjid and role pushed the bell and avatar onto a second header row. The menu
   names both, so the words step aside here and stay in the account button's accessible name. */
@media (max-width: 30rem) {
    .ic-header__identity { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .ic-header__brand { --rw-lockup-width: 7.5rem; }
}
@media (max-width: 40rem) {
    .ic-header__inner { gap: var(--rw-space-2); }
    .ic-header__actions { gap: var(--rw-space-1); }
    .ic-shell:not(.ic-shell--app) .ic-header__actions { display: none; }
    .ic-header__notify { padding-inline: var(--rw-space-2); }
}
/* Tenant identity is scoped to its monogram, separate from attendance/status tokens. */
.ic-ident { display: inline-flex; align-items: center; gap: var(--rw-space-3); min-inline-size: 0; }
.ic-ident__mark { 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-surface); color: var(--rw-ink); }
/* A length, not a percentage. This is the identity mark in the shell chrome, so the same
   not-a-clamp was on every signed-in screen: measured 48 x 144 in a 48 x 48 plate for a mark
   three times taller than it is wide. */
.ic-ident__logo { max-inline-size: var(--rw-target-min); max-block-size: var(--rw-target-min); object-fit: contain; }
.ic-ident__name { font-weight: 700; overflow-wrap: anywhere; }
.ic-ident[data-org-accent="clay"] { --rw-org-accent: var(--rw-org-clay); --rw-on-org-accent: var(--rw-on-org-clay); }
.ic-ident[data-org-accent="green"] { --rw-org-accent: var(--rw-org-green); --rw-on-org-accent: var(--rw-on-org-green); }
.ic-ident[data-org-accent="indigo"] { --rw-org-accent: var(--rw-org-indigo); --rw-on-org-accent: var(--rw-on-org-indigo); }
.ic-ident[data-org-accent="plum"] { --rw-org-accent: var(--rw-org-plum); --rw-on-org-accent: var(--rw-on-org-plum); }
.ic-ident[data-org-accent="slate"] { --rw-org-accent: var(--rw-org-slate); --rw-on-org-accent: var(--rw-on-org-slate); }
.ic-ident[data-org-accent="teal"] { --rw-org-accent: var(--rw-org-teal); --rw-on-org-accent: var(--rw-on-org-teal); }
.ic-ident[data-org-accent] .ic-ident__mark--lettered { background: var(--rw-org-accent); color: var(--rw-on-org-accent); }
@media (display-mode: standalone) {
    .ic-shell { padding-block-start: env(safe-area-inset-top); padding-block-end: env(safe-area-inset-bottom); }
    .ic-header__inner { padding-inline: max(var(--rw-page-gutter), env(safe-area-inset-left), env(safe-area-inset-right)); }
    .is-navopen .ic-side { padding-block-start: max(var(--rw-space-4), env(safe-area-inset-top)); padding-block-end: max(var(--rw-space-4), env(safe-area-inset-bottom)); }
}

.ic-side > * { flex-shrink: 0; }
.ic-side__count { flex: none; }
.ic-ident__name { color: inherit; }
.ic-header a { min-inline-size: var(--rw-target-min); }
@media (min-width: 67.5rem) { .ic-side__account { display: none; } }
.ic-header__brand { min-inline-size: 0; max-inline-size: 100%; }
.ic-header__brand a { max-inline-size: 100%; }
.ic-lockup { max-inline-size: 100%; }
.ic-header__actions, .ic-header__account, .ic-header__summary { min-inline-size: 0; max-inline-size: 100%; }
.ic-header__identity, .ic-header__context { overflow-wrap: anywhere; }

/* ── The bare frame: the sign-in owns the viewport ────────────────────────────────────
   No marketing header, no footer columns. The shell becomes a single column that fills the
   screen and gives all of its remaining height to the page, so a split auth panel reaches
   every edge instead of floating as a card in the middle of a brochure.

   A COLUMN, NOT THREE NAMED ROWS. This was `grid-template-rows: auto 1fr auto`, which is correct
   only if the shell always has exactly three children — and it does not. `PlatformNoticeBands`
   renders NOTHING unless there is a platform notice, and every branch in it is conditional, so in
   normal operation the shell has two children: `main` took the first `auto` track and the floor
   took the `1fr` and swallowed the rest of the viewport. The owner met it on /login: the floor's
   hairline sat under the card with its contents centred in half a screen of empty ground.

   A named-track layout cannot be right here, because the thing it counts is a thing that varies.
   The column asks each child what it is instead: the page grows, the floor is a floor. Adding or
   removing a band changes nothing. */
.ic-shell--bare { min-block-size: 100dvh; display: flex; flex-direction: column; }
/* A column as well as a grower, so the page inside it can grow too. `.rw-auth` asked for the
   full height with `min-block-size: 100%`, and a percentage resolves against an explicitly
   sized containing block — this one is sized by flex layout, so the percentage computed to
   nothing and the card sat at its content height with the ground below it unclaimed. Measured:
   main 819px, card 703px. The same not-a-clamp as the logo plates, one layer up. */
.ic-main--bare { padding: 0; max-inline-size: none; min-inline-size: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
/* The floor: a way home, the language and the appearance, laid quietly under the panel so the
   screen is escapable and readable before anybody has an account. */
/* The way home, language and appearance end the form rather than sitting under the whole screen
   as a separate band: same ground as the form's column, no rule, quiet ink. On a wide screen they
   sit at the foot of the form's own column. The column is the page ground since the owner's
   2026-09-26 call (riwaq-bespoke.css, the auth column), so on a phone the floor is too. */
.ic-authfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--rw-space-2) var(--rw-space-6); padding: var(--rw-space-4) var(--rw-page-gutter); background: var(--rw-ground); font-size: var(--rw-text-small); }
@media (min-width: 48.0625rem) {
    .ic-shell--bare { position: relative; }
    .ic-authfoot { position: absolute; inset-block-end: 0; inset-inline-end: 0; inline-size: calc(100% * 1.2 / 2.2); background: transparent; }
}
.ic-authfoot__home { display: inline-flex; align-items: center; min-block-size: var(--rw-target-min); color: var(--rw-accent-text); }
/* The floor stays a floor. The appearance group carries its own vertical padding for the
   marketing footer's stacked columns; here it sits in a single row that should not take a
   fifth of a full-bleed screen, so the padding comes off and the label tucks against its
   buttons. */
.ic-authfoot .rw-theme { padding-block: 0; inline-size: auto; min-inline-size: 0; }
.ic-authfoot .rw-theme .ic-rowchoice { flex-wrap: nowrap; }
.ic-authfoot .rw-theme .ic-rowchoice__option { white-space: normal; }

/* ── The app's tab bar (AppTabBar.razor) ──────────────────────────────────────────────────
   Rendered only inside the iOS and Android apps, and shown only at phone widths, where the rail
   is a drawer: the tabs lead into the rail and More opens it. On a tablet or a wide window the
   tab bar is not shown and the shell is exactly the website's. The website never renders it.

   Fixed to the bottom above the scrim (39) so More stays reachable to close the drawer it opened;
   the drawer (40) stops above it so Sign out at the drawer's foot is never under it. Every tab is
   a 48px target with its label always visible; the current tab takes the rail's own current-item
   treatment (surface ground, accent rule, heavier ink). */
.ic-tabbar { display: none; }
@media (max-width: 47.99rem) {
    .ic-shell--tabbed { --ic-tabbar-block: 4rem; }
    .ic-shell--tabbed .ic-header__toggle { display: none; }
    .ic-shell--tabbed .ic-shell__body { padding-block-end: calc(var(--ic-tabbar-block) + env(safe-area-inset-bottom)); }
    .ic-shell--tabbed.is-navopen .ic-side { inset-block-end: calc(var(--ic-tabbar-block) + env(safe-area-inset-bottom)); }
    .ic-shell--tabbed .ic-tabbar {
        display: block;
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 41;
        padding-block-end: env(safe-area-inset-bottom);
        padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
        background: var(--rw-ground);
        border-block-start: 1px solid var(--rw-line);
    }
    /* Typing: the keyboard has the bottom of the screen, and the tab bar steps aside for it as a
       native tab bar does, rather than riding on top of the keyboard and taking a fifth of what
       is left. Only fields that raise a keyboard count; a select opens the phone's own picker.
       Two flat rules, not a nested one: iOS 16's Safari has no CSS nesting. */
    .ic-shell--tabbed:has(:is(input:not([type=checkbox], [type=radio], [type=button], [type=submit], [type=reset], [type=file], [type=range], [type=color]), textarea, [contenteditable="true"]):focus) { --ic-tabbar-block: 0rem; }
    .ic-shell--tabbed:has(:is(input:not([type=checkbox], [type=radio], [type=button], [type=submit], [type=reset], [type=file], [type=range], [type=color]), textarea, [contenteditable="true"]):focus) .ic-tabbar { display: none; }
    .ic-tabbar__list { display: flex; margin: 0; padding: 0; list-style: none; }
    .ic-tabbar__item { flex: 1 1 0; min-inline-size: 0; }
    .ic-tabbar__tab {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .125rem;
        inline-size: 100%; min-block-size: var(--ic-tabbar-block); padding: var(--rw-space-1) .125rem;
        /* A fifth of the bar is target enough. More is a button, and the buttons' rem minimum
           doubled with 200% text and pushed it off the screen. */
        min-inline-size: 0;
        border: 0; border-block-start: 3px solid transparent; background: transparent;
        color: var(--rw-ink-muted); font: inherit; text-decoration: none; cursor: pointer;
    }
    .ic-tabbar__tab.is-current { border-block-start-color: var(--rw-accent-border); background: var(--rw-surface); color: var(--rw-nav-active-ink); font-weight: 800; }
    .ic-tabbar__tab:active { background: var(--rw-surface-press); box-shadow: var(--rw-press-inset); }
    .ic-tabbar__tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--rw-focus-light), inset 0 0 0 4px var(--rw-focus-dark); }
    .ic-tabbar__glyph { position: relative; display: inline-grid; place-items: center; }
    .ic-tabbar__glyph .ic-icon { inline-size: var(--rw-icon-size); block-size: var(--rw-icon-size); }
    /* Fixed chrome does not grow with the phone's text size the way the page does: past 135% the
       labels stop growing (--ic-text-zoom is the app's measured text zoom, 1 elsewhere), as iOS
       caps its own tab bars. A word is never split: at 200% the labels had broken mid-word. */
    .ic-tabbar { --ic-tabbar-text: min(1, calc(1.35 / var(--ic-text-zoom, 1))); }
    .ic-tabbar__label {
        max-inline-size: 100%; overflow: hidden;
        font-size: calc(.75rem * var(--ic-tabbar-text)); line-height: 1.2; text-align: center;
        overflow-wrap: normal; hyphens: manual;
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    }
    .ic-tabbar__badge {
        position: absolute; inset-block-start: -.5rem; inset-inline-start: 60%;
        min-inline-size: 1.8em; padding-inline: .35em; border-radius: var(--rw-radius-control);
        background: var(--rw-accent-fill); color: var(--rw-accent-ink);
        font-size: calc(.6875rem * var(--ic-tabbar-text)); font-weight: 800; line-height: 1.8em; text-align: center;
    }
}

/* The app's one-time notifications offer on a masjid's Home (PushOffer.razor). */
.ic-pushoffer { display: grid; gap: var(--rw-space-2); margin-block-end: var(--rw-space-4); }
.ic-pushoffer p { margin: 0; }

/* ── Arrival (depth pass §2.5) ────────────────────────────────────────────────────────────
   Overlays arrive in 180ms and leave instantly. rw-popin, rw-fadein and rw-unfold are declared in
   riwaq-components.css under the same no-preference condition. */
@media (prefers-reduced-motion: no-preference) {
    .ic-header__account[open] .ic-header__menu { animation: rw-popin var(--rw-motion-enter) var(--rw-ease-enter); }
    /* The language panel opens upward, so it rises from below. */
    .ic-lang__panel { --rw-pop-from: var(--rw-space-1); animation: rw-popin var(--rw-motion-enter) var(--rw-ease-enter); }
    .ic-scrim { animation: rw-fadein var(--rw-motion-enter) var(--rw-ease-enter); }
    .ic-mobile.is-open { animation: rw-unfold var(--rw-motion-enter) var(--rw-ease-enter); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 67.5rem) {
    /* The one inline-axis motion in the system: the drawer slides from its own edge, and the
       sign flips in RTL (see .ic-side:dir(rtl) above). */
    .is-navopen .ic-side { animation: rw-railin var(--rw-motion-enter) var(--rw-ease-enter); }
    @keyframes rw-railin { from { opacity: 0; translate: calc(var(--rw-inline-sign, 1) * -1.5rem) 0; } }
}