/*
 * Muslim.Blue Office: the token set (PHASE-B3-DESIGN section 1). Phase V (V1): the colors, faces, space, radii and shadow
 * are the family's (commons assets/design/family-blue.css, printed before this file by Office\Assets; built by
 * tools/design_tokens.mjs), which switch for dark themselves; this file names them for the Office.
 *
 * Every color, face, space and radius is a token on :root, with a dark set, so the Blue identity (FQ05)
 * replaces the tokens here without touching a template. Layout uses logical properties only (inline and
 * block, start and end), so a right-to-left page (Arabic, B9) turns around by itself.
 *
 * Contrast (WCAG 2.2 AA): text tokens are 4.5:1 or more on --mb-color-surface and --mb-color-bg in both
 * themes; --mb-color-field-line is 3:1 or more for form controls (1.4.11).
 */

:root {
	--mb-color-bg: var(--mc-bg);
	--mb-color-surface: var(--mc-surface);
	--mb-color-surface-2: var(--mc-surface-2);
	--mb-color-ink: var(--mc-ink);
	--mb-color-ink-soft: var(--mc-ink-soft);
	--mb-color-muted: var(--mc-muted);
	--mb-color-line: var(--mc-line);
	--mb-color-field-line: var(--mc-edge);
	--mb-color-accent: var(--mc-accent);
	--mb-color-accent-strong: var(--mc-accent-strong);
	--mb-color-accent-soft: var(--mc-tint);
	--mb-color-on-accent: var(--mc-on-accent);
	--mb-color-focus: var(--mc-focus);
	--mb-color-ok: var(--mc-good);
	--mb-color-ok-soft: var(--mc-good-bg);
	--mb-color-warn: var(--mc-warn);
	--mb-color-warn-soft: var(--mc-warn-bg);
	--mb-color-bad: var(--mc-bad);
	--mb-color-bad-soft: var(--mc-bad-bg);
	--mb-color-on-bad: var(--mc-on-bad);

	--mb-font-display: var(--mc-font-display);
	--mb-font-text: var(--mc-font-text);

	/*
	 * Blue's shared type scale (Phase U, the experience floor; the network's --mbn-text-* and the app's tokens use the
	 * same numbers). Body text is 17 px on a phone and 18 px from 64rem; a paragraph a person reads, help text included,
	 * is never smaller. --mb-text-sm (15 px) is for short supporting words only (dates, counts, table heads), and
	 * --mb-text-xs (14 px) is the floor, for tags and labels.
	 */
	--mb-text-xs: 0.875rem;
	--mb-text-sm: 0.9375rem;
	--mb-text-md: 1.0625rem;
	--mb-text-lg: 1.25rem;
	--mb-text-xl: 1.75rem;

	--mb-space-1: var(--mc-space-1);
	--mb-space-2: var(--mc-space-2);
	--mb-space-3: var(--mc-space-3);
	--mb-space-4: var(--mc-space-4);
	--mb-space-5: var(--mc-space-6);
	--mb-space-6: var(--mc-space-8);
	--mb-space-7: var(--mc-space-12);

	--mb-radius-1: var(--mc-radius-sm);
	--mb-radius-2: var(--mc-radius);
	--mb-radius-3: var(--mc-radius-card);
	--mb-shadow: var(--mc-shadow-1);

	--mb-gutter: 16px;
	--mb-page: 72rem;

	/* Touch: every control 44 px, a primary button and a field 48 px, neighbors 8 px apart. */
	--mb-target: 44px;
	--mb-target-primary: 48px;
	--mb-field: 48px;
	--mb-target-gap: 8px;

	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
}

/* ------------------------------------------------------------------ base */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* The phone's fixed bottom bar (.mbo-tabbar, about 65 px): a focused field always stops above it (WCAG 2.4.11). */
	scroll-padding-block-end: calc(80px + env(safe-area-inset-bottom));
}

body.mbo {
	margin: 0;
	background: var(--mb-color-bg);
	color: var(--mb-color-ink);
	font: var(--mb-text-md) / 1.55 var(--mb-font-text);
	overflow-wrap: break-word;
}

@media (min-width: 64rem) {
	:root {
		--mb-text-md: 1.125rem;
	}
}

[hidden] {
	display: none !important;
}

a {
	color: var(--mb-color-accent);
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--mb-color-accent-strong);
}

:focus-visible {
	outline: 3px solid var(--mb-color-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Safari moves focus into the parts of a date or time box, so the box itself never matches
   :focus-visible there; draw the same ring whenever it holds focus. */
input[type="date"]:focus,
input[type="date"]:focus-within,
input[type="time"]:focus,
input[type="time"]:focus-within {
	outline: 3px solid var(--mb-color-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

h1,
h2,
h3 {
	font-family: var(--mb-font-display);
	font-weight: var(--mc-heading-weight);
	line-height: 1.25;
	color: var(--mb-color-ink);
}

/* Blue's scale (Phase V, V1): the family's steps, Literata. */
h2 {
	font-size: var(--mc-h2);
	line-height: var(--mc-h2-leading);
	margin-block: 0 var(--mb-space-3);
}

h3 {
	font-family: var(--mc-font-h3);
	font-size: var(--mc-h3);
	line-height: var(--mc-h3-leading);
	font-weight: var(--mc-h3-weight);
	margin-block: var(--mb-space-4) var(--mb-space-2);
}

p {
	margin-block: 0 var(--mb-space-3);
}

.mbo-skip {
	position: absolute;
	inset-inline-start: var(--mb-space-2);
	inset-block-start: -100px;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	min-block-size: var(--mb-target);
	padding: var(--mb-space-2) var(--mb-space-4);
	background: var(--mb-color-accent);
	color: var(--mb-color-on-accent);
	border-radius: var(--mb-radius-1);
	font-weight: 600;
}

.mbo-skip:focus {
	inset-block-start: var(--mb-space-2);
}

.mbo-visually-hidden {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.mbo-muted {
	color: var(--mb-color-muted);
}

/* ------------------------------------------------------------------ frame */

.mbo-top {
	background: var(--mb-color-surface);
	border-block-end: 1px solid var(--mb-color-line);
	padding-inline: var(--mb-gutter);
}

.mbo-top > * {
	max-inline-size: var(--mb-page);
	margin-inline: auto;
}

.mbo-top__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mb-space-2) var(--mb-space-4);
	padding-block: var(--mb-space-3);
}

.mbo-brand {
	display: flex;
	align-items: center;
	gap: var(--mb-space-3);
	text-decoration: none;
	color: var(--mb-color-ink);
	min-inline-size: 0;
}

.mbo-brand__text {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
}

/* Muslim.Blue's lockup on the pages outside any masjid (design/brand/blue/): light by default, dark on a dark theme. */
.mbo-brand__lockup {
	flex: none;
	display: block;
	inline-size: auto;
	block-size: 1.75rem;
}

.mbo-brand__lockup--dark {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mbo-brand__lockup--light {
		display: none;
	}

	:root:not([data-theme="light"]) .mbo-brand__lockup--dark {
		display: block;
	}
}

:root[data-theme="dark"] .mbo-brand__lockup--light {
	display: none;
}

:root[data-theme="dark"] .mbo-brand__lockup--dark {
	display: block;
}

.mbo-brand__logo {
	flex: none;
	inline-size: auto;
	block-size: 2.75rem;
	max-inline-size: 6rem;
	object-fit: contain;
}

/* The Masjid profile's branding. */
.mbo-swatch-line {
	display: flex;
	align-items: center;
	gap: var(--mb-space-3);
}

.mbo-swatch {
	flex: none;
	border-radius: var(--mb-radius-1);
	outline: 1px solid var(--mb-color-line);
}

.mbo-logo-preview img {
	display: block;
	inline-size: auto;
	max-inline-size: min(100%, 12rem);
	block-size: auto;
	padding: var(--mb-space-2);
	border: 1px solid var(--mb-color-line);
	border-radius: var(--mb-radius-2);
	background: var(--mb-color-surface-2);
}

/* The masjid photo (Phase V Wave 2, 2.4): the photo that shows or waits, and the one just chosen, the column's width at
   most; the guidance as the family's dot list. */
.mbo-photo__thumb img,
.mbo-photo__preview img {
	display: block;
	inline-size: 100%;
	max-inline-size: 32rem;
	block-size: auto;
	border-radius: var(--mb-radius-2);
	background: var(--mb-color-surface-2);
}

.mbo-photo__tips {
	margin-block: 0 var(--mb-space-4);
}

.mbo-photo__tips li {
	max-inline-size: 52ch;
}

.mbo-photo__tips li + li {
	margin-block-start: var(--mb-space-1);
}

.mbo-field input[type="color"] {
	inline-size: 5rem;
	padding: var(--mb-space-1);
	cursor: pointer;
}

.mbo-brand__masjid {
	font-family: var(--mb-font-display);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.2;
}

/* A public page's masjid name links the masjid's own page (Phase U, BM-15): a whole 44 px target, in the name's look. */
a.mbo-brand__masjid {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--mb-target);
	color: var(--mb-color-ink);
	text-decoration: none;
}

a.mbo-brand__masjid:hover {
	color: var(--mb-color-accent-strong);
	text-decoration: underline;
}

/* A public page's masjid logo before its name, inside the link to its page (Phase V Wave 2, 2.4). */
.mbo-brand__masjid > .mbo-brand__logo {
	margin-inline-end: var(--mb-space-3);
	block-size: 2.25rem;
}

.mbo-brand:has(> a.mbo-brand__masjid) {
	flex-wrap: wrap;
	column-gap: var(--mb-space-3);
	row-gap: 0;
}

/* Muslim.Blue's mark at the end of a public page's bar, linking home. */
.mbo-top__home {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--mb-target);
	margin-inline-start: auto;
}

.mbo-top__home .mbo-brand__lockup {
	block-size: 1.5rem;
}

/* A link standing alone on its line ("Sign in to see your registrations"), and a card's title that is a link: whole
   44 px targets (Phase U, BM-10). */
.mbo-more {
	margin-block-start: var(--mb-target-gap);
}

.mbo-more a:not(.mbo-button),
.mbo-card > h2 > a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--mb-target);
}

/* "Back to {masjid}" above a public page's title. */
.mbo-back {
	margin: 0 0 var(--mb-space-2);
}

.mbo-back a {
	display: inline-flex;
	align-items: center;
	gap: var(--mb-space-1);
	min-block-size: var(--mb-target);
	font-weight: 600;
	text-decoration: none;
}

.mbo-back a::before {
	content: "\2039";
	content: "\2039" / "";
	font-size: 1.4em;
	line-height: 1;
}

[dir="rtl"] .mbo-back a::before {
	content: "\203A";
	content: "\203A" / "";
}

.mbo-back a:hover {
	text-decoration: underline;
}

.mbo-brand__office {
	font-size: var(--mb-text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mb-color-accent);
}

/*
 * The account menu (PHASE-U, BO-12): the person's name opens it, so the header is one line on a phone and the colors
 * button the script shows moves nothing.
 */
.mbo-top__bar {
	flex-wrap: nowrap;
}

/* The brand gives way to the account menu: its words wrap under the logo rather than run under the menu, and it is a
   whole 44 px target. */
.mbo-top__bar > .mbo-brand {
	flex: 1 1 auto;
	flex-wrap: wrap;
	row-gap: 0;
	min-block-size: var(--mb-target);
}

.mbo-acct {
	position: relative;
	flex: none;
}

.mbo-acct__summary {
	display: inline-flex;
	align-items: center;
	gap: var(--mb-space-2);
	min-block-size: var(--mb-target-primary);
	max-inline-size: 11rem;
	padding-inline: var(--mb-space-3);
	border: 1px solid var(--mb-color-line);
	border-radius: 999px;
	color: var(--mb-color-ink-soft);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.mbo-acct__summary::-webkit-details-marker {
	display: none;
}

.mbo-acct__summary::after {
	content: "";
	flex: none;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	margin-block-start: -0.25rem;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg);
}

.mbo-acct[open] > .mbo-acct__summary {
	background: var(--mb-color-surface-2);
}

.mbo-acct__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mbo-acct__menu {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: calc(100% + var(--mb-space-2));
	z-index: 70;
	display: grid;
	gap: var(--mb-target-gap);
	inline-size: min(21rem, calc(100vw - 2 * var(--mb-gutter)));
	padding: var(--mb-space-4);
	background: var(--mb-color-surface);
	border: 1px solid var(--mb-color-line);
	border-radius: var(--mb-radius-3);
	box-shadow: 0 8px 28px rgb(15 29 51 / 18%);
}

.mbo-acct__menu p {
	margin: 0;
}

.mbo-acct__menu .mbo-button {
	inline-size: 100%;
}

.mbo-switcher {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--mb-space-2);
	padding-block-end: var(--mb-space-3);
}

.mbo-switcher .mbo-field {
	flex: 1 1 14rem;
	margin: 0;
}

/*
 * The menu (PHASE-U, BO-01): the pages in four groups. On a phone it is a full-height list the bottom bar's Menu opens
 * (the script's .is-open, or the page's #mbo-menu target without it); from 64rem it is a sidebar beside the page.
 */
.mbo-nav ul {
	display: grid;
	gap: var(--mb-target-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbo-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mb-space-3);
	margin-block-end: var(--mb-space-2);
}

.mbo-nav__title {
	margin: 0;
	font-family: var(--mb-font-display);
	font-size: var(--mb-text-xl);
	font-weight: 600;
}

.mbo-nav__group {
	margin-block-start: var(--mb-space-5);
}

.mbo-nav__h {
	margin: 0 0 var(--mb-space-2);
	padding-inline: var(--mb-space-3);
	color: var(--mb-color-muted);
	font-size: var(--mb-text-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mbo-nav a:not(.mbo-button) {
	display: flex;
	align-items: center;
	min-block-size: var(--mb-target-primary);
	padding-inline: var(--mb-space-3);
	border-radius: var(--mb-radius-2);
	color: var(--mb-color-ink);
	text-decoration: none;
	font-weight: 500;
}

.mbo-nav a:not(.mbo-button):hover {
	background: var(--mb-color-surface-2);
}

.mbo-nav a[aria-current="page"] {
	background: var(--mb-color-accent-soft);
	color: var(--mb-color-accent-strong);
	font-weight: 700;
	box-shadow: inset 4px 0 0 var(--mb-color-accent);
}

[dir="rtl"] .mbo-nav a[aria-current="page"] {
	box-shadow: inset -4px 0 0 var(--mb-color-accent);
}

/* The Wave 2 review (P2-18): the family's glyph before each page's name, 20 px, in the link's own color. */
.mbo-nav__icon {
	flex: none;
	inline-size: 20px;
	block-size: 20px;
	margin-inline-end: var(--mb-space-3);
	color: var(--mb-color-muted);
}

.mbo-nav a[aria-current="page"] .mbo-nav__icon {
	color: currentColor;
}

/* The phone's bottom bar: four 56 px places, Home, the two pages most used, and Menu. */
.mbo-tabbar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 50;
	padding-block-end: env(safe-area-inset-bottom);
	background: var(--mb-color-surface);
	border-block-start: 1px solid var(--mb-color-line);
	box-shadow: 0 -2px 12px rgb(15 29 51 / 8%);
}

.mbo-tabbar ul {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--mb-target-gap);
	max-inline-size: 40rem;
	margin: 0 auto;
	padding: var(--mb-space-1) var(--mb-space-2);
	list-style: none;
}

.mbo-tabbar__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-block-size: 56px;
	border-radius: var(--mb-radius-2);
	color: var(--mb-color-ink-soft);
	text-decoration: none;
	font-size: var(--mb-text-xs);
	font-weight: 600;
	line-height: 1.2;
}

.mbo-tabbar__link[aria-current="page"],
.mbo-tabbar__link[data-here],
.mbo-tabbar__link[aria-expanded="true"] {
	background: var(--mb-color-accent-soft);
	color: var(--mb-color-accent-strong);
}

.mbo-tabbar__icon {
	flex: none;
	inline-size: 24px;
	block-size: 24px;
}

.mbo-tabbar__word {
	max-inline-size: 100%;
	overflow-wrap: anywhere;
	text-align: center;
}

body.mbo--menu {
	padding-block-end: calc(4.75rem + env(safe-area-inset-bottom));
}

body.mbo-menu-open {
	overflow: hidden;
}

@media (max-width: 63.999rem) {
	.mbo-nav {
		display: none;
	}

	.mbo-nav:target,
	.mbo-nav.is-open {
		position: fixed;
		inset: 0;
		z-index: 45;
		display: block;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--mb-space-4) var(--mb-gutter) calc(6rem + env(safe-area-inset-bottom));
		background: var(--mb-color-bg);
	}
}

@media (min-width: 64rem) {
	body.mbo--menu {
		display: grid;
		grid-template-columns: 16rem minmax(0, 1fr);
		grid-template-rows: auto 1fr auto;
		grid-template-areas: "top top" "nav main" "nav foot";
		min-block-size: 100vh;
		padding-block-end: 0;
	}

	body.mbo--menu > * {
		grid-column: 1 / -1;
	}

	body.mbo--menu > .mbo-top {
		grid-area: top;
	}

	body.mbo--menu > .mbo-nav {
		grid-area: nav;
		position: sticky;
		inset-block-start: 0;
		align-self: start;
		max-block-size: 100vh;
		overflow-y: auto;
		padding: var(--mb-space-4) var(--mb-space-3) var(--mb-space-6);
		border-inline-end: 1px solid var(--mb-color-line);
	}

	body.mbo--menu > .mbo-main {
		grid-area: main;
		inline-size: 100%;
	}

	body.mbo--menu > .mbo-foot {
		grid-area: foot;
		inline-size: 100%;
	}

	.mbo-nav__head,
	.mbo-tabbar {
		display: none;
	}

	html {
		scroll-padding-block-end: 0;
	}

	.mbo-nav__group {
		margin-block-start: var(--mb-space-4);
	}

	.mbo-nav a:not(.mbo-button) {
		min-block-size: var(--mb-target);
	}
}

.mbo-main {
	max-inline-size: var(--mb-page);
	margin-inline: auto;
	padding: var(--mb-space-5) var(--mb-gutter) var(--mb-space-7);
}

.mbo-main:focus {
	outline: none;
}

.mbo-main--bare {
	max-inline-size: 40rem;
}

/*
 * Lines a person reads stay near 70 characters on a wide screen (PHASE-U, BO-06): 52ch of the Office's face holds about
 * 66 letters of ordinary text and under 80 of the narrowest.
 */
.mbo-main p,
.mbo-main .mbo-bullets > li,
.mbo-main .mbo-guide li,
.mbo-help {
	max-inline-size: 52ch;
}

/*
 * A link standing alone (a paragraph or a list item that holds only it, marked mbo-go by Layout) is a whole 44 px target,
 * and so is a list row's title link, the masjid picker's names and a heading that is a link (PHASE-U, BO-13).
 */
.mbo-go > a:not(.mbo-button),
.mbo-main a.mbo-row__title,
.mbo-pick > a,
.mbo-main .mbo-bullets > li > a:first-child,
.mbo-main .mbo-bullets > li > a[href^="mailto:"],
.mbo-main .mbo-bullets > li > a[href^="tel:"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--mb-target);
	min-inline-size: var(--mb-target);
}

/*
 * A table cell that holds only a link (a payout's date, a gift's receipt number, a batch's name) makes it a whole 44 px
 * target, as a lone link is: the row grows to fit it, and the next row's link stays a cell's padding away.
 */
.mbo-table td > a:only-child:not(.mbo-button) {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--mb-target);
	min-inline-size: var(--mb-target);
}

/* A table's scrolling wrap is a keyboard stop of its own (role="region", tabindex 0): it keeps 8 px from a control above it. */
.mbo-main * + .mbo-table-wrap {
	margin-block-start: var(--mb-target-gap);
}

/* A lone link's paragraph or heading keeps its neighbors 8 px off (a list item in a pill row is spaced by its row). */
p.mbo-go,
h2.mbo-go,
h3.mbo-go {
	margin-block-start: var(--mb-target-gap);
}

/*
 * Neighbors keep 8 px apart: a choice row and what follows it, and the parts of a form that has no spacing of its own
 * (:where keeps these weaker than .mbo-form's own 12 px).
 */
.mbo-check + :not(.mbo-check),
:where(.mbo-main form) :where(.mbo-field, .mbo-check, .mbo-fieldset) + *,
:where(.mbo-main form) * + :where(.mbo-field, .mbo-check, .mbo-fieldset, .mbo-button) {
	margin-block-start: var(--mb-target-gap);
}

.mbo-bullets > li.mbo-go + li,
.mbo-bullets > li + li.mbo-go,
.mbo-bullets > li + li.mbo-call {
	margin-block-start: var(--mb-target-gap);
}

.mbo-button.mbo-button--danger {
	min-block-size: var(--mb-target-primary);
}

.mbo-title {
	font-size: var(--mc-h1);
	line-height: var(--mc-h1-leading);
	margin-block: 0 var(--mb-space-4);
}

.mbo-foot {
	max-inline-size: var(--mb-page);
	margin-inline: auto;
	padding: var(--mb-space-5) var(--mb-gutter);
	border-block-start: 1px solid var(--mb-color-line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-space-4);
	align-items: center;
	color: var(--mb-color-muted);
	font-size: var(--mb-text-sm);
}

.mbo-foot p {
	margin: 0;
}

.mbo-foot__help {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--mb-target);
	padding-inline: var(--mb-space-2);
}

/* The legal documents on every public page (commons Legal\Links). */
.mbo-foot__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-space-2) var(--mb-space-4);
}

.mbo-foot__legal a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--mb-target);
	color: inherit;
	text-underline-offset: 0.2em;
}

.mbo-foot__legal a:hover,
.mbo-foot__legal a:focus-visible {
	color: var(--mb-color-ink);
}

/* ------------------------------------------------------------------ blocks */

.mbo-grid {
	display: grid;
	gap: var(--mb-space-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	align-items: start;
}

.mbo-card {
	background: var(--mb-color-surface);
	border: 1px solid var(--mb-color-line);
	border-radius: var(--mb-radius-3);
	padding: var(--mb-space-5) var(--mb-space-4);
	box-shadow: var(--mb-shadow);
	min-inline-size: 0;
}

@media (min-width: 40rem) {
	.mbo-card {
		padding: var(--mb-space-5);
	}
}

.mbo-card--warn {
	border-inline-start: 5px solid var(--mb-color-warn);
}

.mbo-section + .mbo-section {
	margin-block-start: var(--mb-space-5);
}

.mbo-banner {
	margin-block-end: var(--mb-space-4);
	padding: var(--mb-space-3) var(--mb-space-4);
	border-radius: var(--mb-radius-2);
	background: var(--mb-color-accent-soft);
	color: var(--mb-color-ink);
	border-inline-start: 5px solid var(--mb-color-accent);
}

.mbo-banner--warn {
	background: var(--mb-color-warn-soft);
	border-inline-start-color: var(--mb-color-warn);
}

.mbo-notice,
.mbo-form-error {
	margin-block: 0 var(--mb-space-4);
	padding: var(--mb-space-3) var(--mb-space-4);
	border-radius: var(--mb-radius-2);
	border-inline-start: 5px solid var(--mb-color-accent);
	background: var(--mb-color-accent-soft);
	color: var(--mb-color-ink);
}

.mbo-notice--ok {
	background: var(--mb-color-ok-soft);
	border-inline-start-color: var(--mb-color-ok);
}

.mbo-notice--warn {
	background: var(--mb-color-warn-soft);
	border-inline-start-color: var(--mb-color-warn);
}

.mbo-notice--error,
.mbo-form-error {
	background: var(--mb-color-bad-soft);
	border-inline-start-color: var(--mb-color-bad);
}

/* A confirmation shown beside what was saved (PHASE-U, BO-03), in view after the reload. */
.mbo-notice--saved {
	margin-block: var(--mb-space-3);
	font-weight: 600;
	scroll-margin-block: 6rem;
}

/* Home's "To do" (PHASE-U, BO-02): what waits, each with its own button, the most pressing first. */
.mbo-todo {
	grid-column: 1 / -1;
	border-inline-start: 5px solid var(--mb-color-accent);
}

.mbo-todo__list {
	display: grid;
	gap: var(--mb-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbo-todo__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mb-space-2) var(--mb-space-4);
	padding-block: var(--mb-space-3);
	border-block-start: 1px solid var(--mb-color-line);
}

.mbo-todo__item:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}

.mbo-todo__item p {
	flex: 1 1 14rem;
	margin: 0;
}

.mbo-todo__item .mbo-button {
	flex: 0 1 auto;
}

.mbo-todo--clear {
	border-inline-start-color: var(--mb-color-ok);
}

/* Rows of links in the Office (week navigation, years, related pages) are 44 px pills (PHASE-U, BO-13). */
body.mbo--menu .mbo-links {
	gap: var(--mb-target-gap);
	margin-inline: 0;
	padding: 0;
	list-style: none;
}

body.mbo--menu .mbo-links > li {
	display: flex;
}

body.mbo--menu .mbo-links a,
body.mbo--menu .mbo-links [aria-current] {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--mb-target);
	padding-inline: var(--mb-space-4);
	border: 1px solid var(--mb-color-line);
	border-radius: 999px;
	background: var(--mb-color-surface);
	font-weight: 600;
	text-decoration: none;
}

body.mbo--menu .mbo-links [aria-current] {
	border-color: transparent;
	background: var(--mb-color-accent-soft);
	color: var(--mb-color-accent-strong);
}

/* Giving's pages used less often, folded under More in its tab row (PHASE-U, BO-19). */
.mbo-tabs__more > details > summary {
	display: inline-flex;
	align-items: center;
	gap: var(--mb-space-2);
	min-block-size: var(--mb-target);
	padding-inline: var(--mb-space-4);
	border: 1px solid var(--mb-color-line);
	border-radius: 999px;
	color: var(--mb-color-accent);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.mbo-tabs__more > details > summary::-webkit-details-marker {
	display: none;
}

.mbo-tabs__more > details > summary::after {
	content: "";
	inline-size: 0.45rem;
	block-size: 0.45rem;
	margin-block-start: -0.2rem;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg);
}

.mbo-tabs__more > details[open] > summary {
	background: var(--mb-color-surface-2);
}

.mbo-tabs__more > details > ul {
	margin-block-start: var(--mb-target-gap);
}

.mbo-tabs__more:has(> details[open]) {
	flex-basis: 100%;
}

/* A card's way onward, as a button (PHASE-U, BO-02). */
.mbo-card__go {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-target-gap);
	margin: var(--mb-space-4) 0;
}

.mbo-callout {
	margin-block: var(--mb-space-4);
	padding: var(--mb-space-3) var(--mb-space-4);
	border-radius: var(--mb-radius-2);
	background: var(--mb-color-surface-2);
}

.mbo-callout--warn {
	background: var(--mb-color-warn-soft);
}

.mbo-callout h3 {
	margin-block-start: 0;
}

.mbo-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-space-1);
	margin-block: var(--mb-space-1);
}

.mbo-badge {
	display: inline-block;
	padding: 1px var(--mb-space-2);
	border-radius: 999px;
	background: var(--mb-color-accent-soft);
	color: var(--mb-color-accent-strong);
	font-size: var(--mb-text-xs);
	font-weight: 600;
}

.mbo-badge--warn {
	background: var(--mb-color-warn-soft);
	color: var(--mb-color-warn);
}

.mbo-bullets {
	margin-block: 0 var(--mb-space-3);
	padding-inline-start: 1.25rem;
}

.mbo-bullets li + li {
	margin-block-start: var(--mb-space-1);
}

.mbo-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-space-2) var(--mb-space-5);
}

.mbo-toc ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-space-2);
	margin: 0 0 var(--mb-space-5);
	padding: 0;
	list-style: none;
}

.mbo-toc a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--mb-target);
	padding-inline: var(--mb-space-3);
	border: 1px solid var(--mb-color-line);
	border-radius: 999px;
	background: var(--mb-color-surface);
	text-decoration: none;
	font-size: var(--mb-text-sm);
	font-weight: 600;
}

.mbo-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mbo-step;
}

.mbo-steps li {
	position: relative;
	padding-inline-start: 2.25rem;
	padding-block: var(--mb-space-2);
	counter-increment: mbo-step;
}

.mbo-steps li::before {
	content: counter(mbo-step);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: var(--mb-space-2);
	inline-size: 1.6rem;
	block-size: 1.6rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 2px solid var(--mb-color-accent);
	color: var(--mb-color-accent);
	font-size: var(--mb-text-xs);
	font-weight: 700;
}

.mbo-steps li.is-done {
	color: var(--mb-color-muted);
}

.mbo-steps li.is-done::before {
	background: var(--mb-color-ok);
	border-color: var(--mb-color-ok);
	color: var(--mb-color-surface);
}

/* ------------------------------------------------------------------ lists and rows */

.mbo-list {
	display: grid;
	gap: var(--mb-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbo-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--mb-space-2) var(--mb-space-4);
	padding: var(--mb-space-3);
	border: 1px solid var(--mb-color-line);
	border-radius: var(--mb-radius-2);
	background: var(--mb-color-surface);
}

.mbo-row__main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 15rem;
	min-inline-size: 0;
}

.mbo-row__title {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.mbo-row__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-space-2);
}

.mbo-row__actions form {
	margin: 0;
}

.mbo-row > .mbo-details {
	flex-basis: 100%;
}

.mbo-list--compact .mbo-row {
	padding-block: var(--mb-space-2);
}

.mbo-pick {
	display: flex;
	flex-direction: column;
	gap: var(--mb-space-1);
}

.mbo-pick a {
	font-family: var(--mb-font-display);
	font-size: var(--mb-text-lg);
	font-weight: 600;
}

/* ------------------------------------------------------------------ tables */

.mbo-table-wrap {
	/* Relative, so a visually hidden header (position: absolute) stays inside the scrolling box instead of widening the page. */
	position: relative;
	overflow-x: auto;
	margin-block: 0 var(--mb-space-3);
}

.mbo-table {
	inline-size: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

/* An amount stays on one line: "-$12.26" never breaks after its sign. */
.mbo-table .mbo-num {
	text-align: end;
	white-space: nowrap;
}

.mbo-table caption {
	text-align: start;
	font-weight: 700;
	padding-block-end: var(--mb-space-2);
}

.mbo-table th,
.mbo-table td {
	padding: var(--mb-space-2) var(--mb-space-2);
	text-align: start;
	vertical-align: top;
	border-block-end: 1px solid var(--mb-color-line);
}

.mbo-table thead th {
	font-size: var(--mb-text-sm);
	color: var(--mb-color-muted);
	font-weight: 700;
}

.mbo-table tbody th {
	font-weight: 600;
}

.mbo-table--week {
	min-inline-size: 34rem;
	font-size: 0.95rem;
}

.mbo-time {
	display: block;
	font-weight: 600;
}

.mbo-time-sub {
	display: block;
	font-size: var(--mb-text-xs);
	font-weight: 400;
	color: var(--mb-color-muted);
}

.mbo-cell-warn {
	background: var(--mb-color-warn-soft);
}

/* The week, day by day, on a phone; the table from 40rem up (TimesView::week_table draws both). */
.mbo-days {
	display: grid;
	gap: var(--mb-space-3);
	margin: 0 0 var(--mb-space-3);
	padding: 0;
	list-style: none;
}

.mbo-day {
	padding: var(--mb-space-3);
	border: 1px solid var(--mb-color-line);
	border-radius: var(--mb-radius-2);
	background: var(--mb-color-surface);
}

.mbo-day__date {
	margin: 0 0 var(--mb-space-2);
	font-size: 1.05rem;
}

.mbo-day__times {
	display: grid;
	margin: 0;
}

.mbo-day__row {
	display: grid;
	grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
	gap: var(--mb-space-1) var(--mb-space-3);
	align-items: baseline;
	padding-block: var(--mb-space-2);
	padding-inline: var(--mb-space-1);
	border-block-end: 1px solid var(--mb-color-line);
	font-variant-numeric: tabular-nums;
}

.mbo-day__row:last-child {
	border-block-end: 0;
}

.mbo-day__row dt {
	font-weight: 600;
}

.mbo-day__row dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--mb-space-3);
}

.mbo-day__row dd {
	max-width: 60ch;
}

/* A link that stands on its own in a row is a target of its own: 44 px tall, not a line of text. */
.mbo-day__row dd > a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

.mbo-day__row .mbo-time,
.mbo-day__row .mbo-time-sub {
	display: inline;
}

.mbo-time--none {
	font-weight: 400;
	color: var(--mb-color-muted);
}

.mbo-day__note {
	margin-block: var(--mb-space-3) 0;
}

.mbo-day__note .mbo-label {
	display: block;
	margin-block-end: var(--mb-space-1);
}

.mbo-day__note .mbo-bullets {
	margin: 0;
}

.mbo-table-wrap--wide {
	display: none;
}

@media (min-width: 40rem) {
	.mbo-days {
		display: none;
	}

	.mbo-table-wrap--wide {
		display: block;
	}
}

/* Ramadan's 29 or 30 days on a phone (round three, s10-B2): each day a card of labeled times in two columns, so the month is
   about 190 px a day, not 400. Every time keeps its name. */
.mbo-days--compact .mbo-day {
	padding: var(--mb-space-2) var(--mb-space-3);
}

.mbo-days--compact .mbo-day__times {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--mb-space-3);
}

.mbo-days--compact .mbo-day__row {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	padding-block: var(--mb-space-1);
	border-block-end: 0;
}

.mbo-days--compact .mbo-day__row dt {
	font-size: var(--mb-text-xs);
	font-weight: 400;
	color: var(--mb-color-muted);
}

.mbo-days--compact .mbo-day__row dd .mbo-time {
	font-weight: 600;
}

.mbo-table--log td:first-child {
	white-space: nowrap;
	color: var(--mb-color-muted);
	font-size: var(--mb-text-sm);
}

/* ------------------------------------------------------------------ forms */

.mbo-form > * + * {
	margin-block-start: var(--mb-space-3);
}

.mbo-field {
	display: flex;
	flex-direction: column;
	gap: var(--mb-space-1);
}

.mbo-field label,
.mbo-label {
	font-weight: 600;
}

.mbo-static {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.mbo-help {
	margin: 0;
	color: var(--mb-color-muted);
}

.mbo-field input,
.mbo-field select,
.mbo-field textarea {
	inline-size: 100%;
	min-block-size: var(--mb-field);
	padding: var(--mb-space-2) var(--mb-space-3);
	font: inherit;
	color: var(--mb-color-ink);
	background: var(--mb-color-surface);
	border: 1px solid var(--mb-color-field-line);
	border-radius: var(--mb-radius-1);
}

.mbo-field input[type="file"] {
	padding-block: var(--mb-space-2);
}

/* Safari draws a native list box at its own small height (23px) whatever the size asked for, so the
   box is drawn here instead, with its arrow from currentColor so it follows the theme. */
.mbo-field select {
	appearance: none;
	-webkit-appearance: none;
	padding-inline-end: calc(var(--mb-space-3) + 1.5rem);
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 1.25rem - 6px) 50%,
		calc(100% - 1.25rem) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

[dir="rtl"] .mbo-field select {
	background-position:
		1.25rem 50%,
		calc(1.25rem + 6px) 50%;
}

@media (forced-colors: active) {
	.mbo-field select {
		appearance: auto;
		-webkit-appearance: menulist;
		background-image: none;
	}
}

.mbo-field input[aria-invalid="true"],
.mbo-field select[aria-invalid="true"],
.mbo-field textarea[aria-invalid="true"] {
	border: 2px solid var(--mb-color-bad);
}

/* A refusal under the field it is about (PHASE-U, BO-07): the words, marked with a bar so color is not the only sign. */
.mbo-field-error {
	margin: 0;
	padding-inline-start: var(--mb-space-3);
	border-inline-start: 4px solid var(--mb-color-bad);
	color: var(--mb-color-bad);
	font-weight: 600;
}

.mbo-check > .mbo-field-error {
	grid-column: 1 / -1;
}

.mbo-fieldset:has(> .mbo-field-error) {
	border-color: var(--mb-color-bad);
}

.mbo-check {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: var(--mb-space-3);
	min-block-size: var(--mb-field);
}

.mbo-check input {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	margin: 0;
	accent-color: var(--mb-color-accent);
}

.mbo-check label {
	display: flex;
	align-items: center;
	min-block-size: var(--mb-field);
}

/* The whole row is the target, not only its words (Phase U, BM-10): a thumb between two choices still picks one. A
   link inside the row stays its own target. */
.mbo-check label::before {
	content: "";
	position: absolute;
	inset: 0;
}

.mbo-check a {
	position: relative;
	z-index: 1;
}

.mbo-check + .mbo-check {
	margin-block-start: var(--mb-target-gap);
}

.mbo-check .mbo-help {
	grid-column: 2;
}

.mbo-fieldset {
	margin: 0;
	padding: var(--mb-space-3) var(--mb-space-4);
	border: 1px solid var(--mb-color-line);
	border-radius: var(--mb-radius-2);
}

.mbo-fieldset legend {
	padding-inline: var(--mb-space-1);
	font-weight: 700;
}

.mbo-fieldset > * + * {
	margin-block-start: var(--mb-space-3);
}

/* The khutbah's languages: named checkboxes, two or more to a row. */
.mbo-langs__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
	gap: 0 var(--mb-space-3);
}

.mbo-pair {
	display: grid;
	gap: var(--mb-space-3);
}

@media (min-width: 30rem) {
	.mbo-pair {
		grid-template-columns: 1fr 1fr;
	}
}

.mbo-filters {
	display: grid;
	gap: var(--mb-space-3);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	align-items: end;
	margin-block-end: var(--mb-space-5);
}

.mbo-filters__go,
.mbo-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-space-2);
	align-items: center;
}

.mbo-details {
	margin-block: var(--mb-space-2) 0;
}

.mbo-details > summary {
	display: flex;
	align-items: center;
	min-block-size: var(--mb-target);
	cursor: pointer;
	color: var(--mb-color-accent);
	font-weight: 600;
	list-style-position: inside;
}

.mbo-details > summary::-webkit-details-marker {
	margin-inline-end: var(--mb-space-2);
}

.mbo-details[open] > summary {
	margin-block-end: var(--mb-space-2);
}

.mbo-add {
	margin-block-start: var(--mb-space-4);
	padding-block-start: var(--mb-space-2);
	border-block-start: 1px dashed var(--mb-color-line);
}

.mbo-guide ol {
	margin-block: 0 var(--mb-space-3);
	padding-inline-start: 1.25rem;
}

/* ------------------------------------------------------------------ buttons */

.mbo-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mb-space-2);
	min-block-size: var(--mb-target);
	padding: var(--mb-space-2) var(--mb-space-4);
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--mb-radius-2);
	cursor: pointer;
}

.mbo-button:disabled {
	opacity: 0.6;
	cursor: progress;
}

.mbo-button--primary {
	min-block-size: var(--mb-target-primary);
	background: var(--mb-color-accent);
	color: var(--mb-color-on-accent);
}

.mbo-button--primary:hover {
	background: var(--mb-color-accent-strong);
	color: var(--mb-color-on-accent);
}

.mbo-button--secondary {
	background: var(--mb-color-surface);
	color: var(--mb-color-accent);
	border-color: var(--mb-color-accent);
}

.mbo-button--quiet {
	background: transparent;
	color: var(--mb-color-accent);
	padding-inline: var(--mb-space-2);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.mbo-button--danger {
	background: var(--mb-color-bad);
	color: var(--mb-color-on-bad);
}

.mbo-theme {
	font-size: var(--mb-text-sm);
	font-weight: 600;
}

/* ------------------------------------------------------------------ print */

@media print {
	.mbo-top,
	.mbo-foot,
	.mbo-nav,
	.mbo-tabbar,
	.mbo-toc,
	.mbo-add,
	.mbo-row__actions,
	.mbo-details,
	.mbo-skip {
		display: none !important;
	}

	body.mbo {
		display: block !important;
		padding: 0 !important;
		background: #fff;
		color: #000;
	}

	.mbo-card {
		box-shadow: none;
		border-color: #999;
	}

	/* Paper is wide enough for the week's table. */
	.mbo-days {
		display: none !important;
	}

	.mbo-table-wrap--wide {
		display: block !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}

/* ------------------------------------------------------------------ setup and claims (section 2 and 6) */

.mbo-onboard > * + *,
.mbo-onboard .mbo-section + * {
	margin-block-start: var(--mb-space-5);
}

.mbo-setup-nav {
	margin-block-end: var(--mb-space-5);
}

.mbo-steps--setup li.is-current {
	font-weight: 700;
}

.mbo-steps--setup li.is-current::before {
	background: var(--mb-color-accent);
	color: var(--mb-color-on-accent);
}

@media (min-width: 48rem) {
	.mbo-steps--setup {
		display: flex;
		flex-wrap: wrap;
		gap: var(--mb-space-2) var(--mb-space-5);
	}
}

.mbo-pin {
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.mbo-nudge .mbo-button {
	min-inline-size: 5.5rem;
}

.mbo-radios .mbo-check {
	align-items: start;
	padding-block: var(--mb-space-1);
}

.mbo-radios .mbo-check input {
	margin-block-start: 0.15rem;
}

.mbo-compare {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: var(--mb-space-3);
}

.mbo-compare > .mbo-field {
	flex: 1 1 14rem;
}

.mbo-compare > * + * {
	margin-block-start: 0;
}

/* ------------------------------------------------------------------ screens (B4) */

.mbo-tabs {
	margin-block: 0 var(--mb-space-5);
}

.mbo-tabs ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbo-tabs a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--mb-target);
	padding: 0 var(--mb-space-4);
	border: 1px solid var(--mb-color-line);
	border-radius: 999px;
	background: var(--mb-color-surface);
	color: var(--mb-color-ink);
	text-decoration: none;
}

.mbo-tabs a:hover {
	border-color: var(--mb-color-accent);
}

.mbo-tabs a[aria-current="page"] {
	background: var(--mb-color-accent);
	border-color: var(--mb-color-accent);
	color: var(--mb-color-on-accent);
	font-weight: 600;
}

.mbo-tabs--zones {
	margin-block-end: var(--mb-space-4);
}

.mbo-badge--ok {
	background: var(--mb-color-ok-soft);
	color: var(--mb-color-ok);
}

.mbo-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: var(--mb-space-2);
	margin: 0;
}

.mbo-inline .mbo-field {
	margin: 0;
}

.mbo-screen .mbo-row__actions {
	flex: 1 1 22rem;
	justify-content: flex-start;
}

@media (min-width: 48rem) {
	.mbo-screen .mbo-row__actions {
		justify-content: flex-end;
	}
}

.mbo-grid--2,
.mbo-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.mbo-code {
	font-size: var(--mb-text-lg);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	max-inline-size: 12rem;
}

.mbo-slides {
	display: grid;
	gap: var(--mb-space-3);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbo-slide {
	display: flex;
	flex-direction: column;
	gap: var(--mb-space-2);
	padding: var(--mb-space-2);
	border: 1px solid var(--mb-color-line);
	border-radius: var(--mb-radius-2);
}

.mbo-slide img,
.mbo-media__thumb img {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
	border-radius: var(--mb-radius-1);
	background: var(--mb-color-surface-2);
}

.mbo-order {
	max-inline-size: 6rem;
}

.mbo-media__thumb {
	flex: 0 0 auto;
	inline-size: 10rem;
}

.mbo-preview-frame {
	margin-block-start: var(--mb-space-4);
	border: 1px solid var(--mb-color-line);
	border-radius: var(--mb-radius-2);
	overflow: hidden;
	background: var(--mb-color-surface-2);
	max-inline-size: 100%;
}

.mbo-preview-frame iframe {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

.mbo-preview-frame--landscape {
	aspect-ratio: 16 / 9;
}

.mbo-preview-frame--portrait {
	aspect-ratio: 9 / 16;
	max-inline-size: 24rem;
}

.mbo-preview-state {
	font-weight: 600;
}

.mbo-emergency textarea {
	font-size: var(--mb-text-lg);
}

.mbo-button--big {
	min-block-size: 3.25rem;
	padding-inline: var(--mb-space-6);
	font-size: var(--mb-text-lg);
}

.mbo-alert-now {
	border-inline-start: 6px solid var(--mb-color-warn);
}

.mbo-alert-now--urgent {
	border-inline-start-color: var(--mb-color-bad);
}

.mbo-alert-now__message {
	font-size: var(--mb-text-xl);
	font-weight: 700;
	overflow-wrap: anywhere;
}

.mbo-lib__ref {
	font-size: var(--mb-text-lg);
	margin-block: 0 var(--mb-space-3);
}

.mbo-ayah {
	font-size: 1.6rem;
	line-height: 2;
	margin-block: 0 var(--mb-space-2);
}

.mbo-main .mbo-ayah {
	/* Arabic letters are narrow, so a measure of the Latin text's 52ch holds about 100 of them: 32ch is about 65. */
	max-inline-size: 32ch;
}

.mbo-ayah-en {
	margin-block: 0 var(--mb-space-3);
}

.mbo-library {
	display: grid;
	gap: var(--mb-space-4);
}

.mbo-row__main > .mbo-badge {
	align-self: flex-start;
}

.mbo-presets {
	margin-block: var(--mb-space-3) 0;
	padding: 0;
	list-style: none;
}

/* Messages and janazah (B6, src/Messages): DNS records, text previews, the email preview's header, a notice's facts. */

.mbn-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--mb-text-sm);
	background: var(--mb-color-surface-2);
	border-radius: var(--mb-radius-1);
	padding: 1px var(--mb-space-1);
}

.mbn-wrap {
	display: block;
	overflow-wrap: anywhere;
	word-break: break-all;
	padding: var(--mb-space-2);
}

.mbn-sms {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--mb-text-sm);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	margin: 0;
}

.mbn-mailhead,
.mbn-record,
.mbn-facts {
	display: grid;
	grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
	gap: var(--mb-space-1) var(--mb-space-3);
	margin: 0 0 var(--mb-space-3);
}

.mbn-mailhead dt,
.mbn-record dt,
.mbn-facts dt {
	font-weight: 600;
	color: var(--mb-color-ink-soft);
}

.mbn-mailhead dd,
.mbn-record dd,
.mbn-facts dd {
	margin: 0;
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.mbn-mail img {
	max-inline-size: 100%;
	block-size: auto;
}

.mbn-block {
	border: 1px solid var(--mb-color-line);
	border-radius: var(--mb-radius-2);
	padding: var(--mb-space-3);
	margin-block-end: var(--mb-space-3);
}

.mbn-url {
	overflow-wrap: anywhere;
}

/* Leaving Masjidal (PHASE-B8-DESIGN section 3): the steps as cards, each with where it stands. */
.mbo-leave {
	list-style: none;
	margin: 0 0 var(--mb-space-5);
	padding: 0;
	display: grid;
	gap: var(--mb-space-3);
	counter-reset: mbo-leave;
}

.mbo-leave__step {
	counter-increment: mbo-leave;
}

.mbo-leave__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mb-space-2);
}

.mbo-leave__head h2 {
	margin: 0;
	font-size: var(--mb-text-lg);
}

.mbo-leave__head h2::before {
	content: counter(mbo-leave) ". ";
	color: var(--mb-color-muted);
}

.mbo-leave__step .mbo-form {
	margin-block-start: var(--mb-space-2);
}

.mbo-quote {
	margin: var(--mb-space-3) 0;
	padding: var(--mb-space-3) var(--mb-space-4);
	border-inline-start: 4px solid var(--mb-color-accent);
	background: var(--mb-color-surface-2);
	border-radius: var(--mb-radius-1);
}

.mbo-quote p {
	margin: 0 0 var(--mb-space-1);
}

.mbo-quote footer {
	font-size: var(--mb-text-sm);
}

/* The embed preview is out of the Tab order (it only mirrors the form above it, and WebKit draws no focus on a frame). If a script
   focuses it, show where focus is (WCAG 2.4.7). */
.mbe-preview:focus {
	outline: 3px solid var(--mb-color-focus, currentColor);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ prayer times and the weekly check (U6) */

/* Iqamah first on Prayer times (TimesScreen::iqamah): a row a prayer, today's time large, Change beside each rule. */
.mbo-iq {
	display: grid;
	gap: var(--mb-space-3);
}

.mbo-iq__row {
	padding: var(--mb-space-3) var(--mb-space-4);
	border: 1px solid var(--mb-color-line);
	border-radius: var(--mb-radius-2);
	background: var(--mb-color-surface);
	scroll-margin-block-start: var(--mb-space-4);
}

.mbo-iq__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0 var(--mb-space-3);
}

.mbo-iq__name {
	margin: 0;
	font-size: var(--mb-text-lg);
}

.mbo-iq__time {
	margin: 0;
	font-size: var(--mb-text-lg);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--mb-color-ink);
}

.mbo-iq__today {
	margin-inline-end: var(--mb-space-1);
	font-size: var(--mb-text-sm);
	font-weight: 600;
	color: var(--mb-color-muted);
}

.mbo-iq__time--none {
	font-size: var(--mb-text-md);
	font-weight: 600;
	color: var(--mb-color-muted);
}

.mbo-iq__how {
	margin: var(--mb-space-1) 0 0;
	color: var(--mb-color-ink-soft);
}

.mbo-iq__rules {
	margin: var(--mb-space-2) 0 0;
	padding: 0;
	list-style: none;
}

.mbo-iq__rule + .mbo-iq__rule {
	margin-block-start: var(--mb-space-3);
	padding-block-start: var(--mb-space-3);
	border-block-start: 1px dashed var(--mb-color-line);
}

.mbo-iq__words,
.mbo-iq__meta {
	margin: 0;
}

.mbo-iq__meta {
	color: var(--mb-color-muted);
}

/* Change first, Remove last, 16 px apart (BO-14); an open form takes the whole row, and Remove follows it. */
.mbo-iq__acts {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--mb-space-2) var(--mb-space-4);
	margin-block-start: var(--mb-space-2);
}

.mbo-iq__acts > .mbo-iq__open {
	margin: 0;
}

.mbo-iq__acts > .mbo-iq__open[open] {
	flex: 1 1 100%;
}

.mbo-iq__open > summary.mbo-iq__btn {
	display: inline-flex;
	min-block-size: var(--mb-target-primary);
	list-style: none;
}

.mbo-iq__open > summary.mbo-iq__btn::-webkit-details-marker {
	display: none;
}

.mbo-iq__open > summary.mbo-button--secondary {
	padding-inline: var(--mb-space-5);
}

.mbo-iq__open[open] > summary.mbo-iq__btn {
	margin-block-end: var(--mb-space-3);
}

.mbo-iq__open[open] > summary.mbo-button--secondary {
	background: var(--mb-color-accent-soft);
}

/* The days as a compact table (TimesView::compact_table): a day row over the five times, read at 390 px with no sideways scroll. */
.mbo-d7 {
	table-layout: fixed;
	line-height: 1.3;
}

.mbo-d7 thead th {
	padding: var(--mb-space-1) 2px;
	font-size: var(--mb-text-xs);
	text-align: center;
}

.mbo-d7 td {
	padding: var(--mb-space-1) 2px;
	text-align: center;
	white-space: nowrap;
}

.mbo-d7 td .mbo-time {
	font-size: var(--mb-text-md);
	font-weight: 700;
}

.mbo-d7 td .mbo-time-sub {
	font-size: var(--mb-text-sm);
}

.mbo-d7__day th {
	padding: var(--mb-space-1) var(--mb-space-2);
	border-block-end: 0;
	background: var(--mb-color-surface-2);
	font-size: var(--mb-text-sm);
	font-weight: 700;
	text-align: start;
}

.mbo-d7__day .mbo-time-sub {
	display: inline;
	margin-inline-start: var(--mb-space-2);
	font-weight: 400;
}

/* AM and PM are read out on a phone, and shown from 40rem (the prayer names tell morning from evening). */
@media (max-width: 39.999rem) {
	.mbo-d7__ap {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* A folded section (TimesScreen::fold, the weekly check's Every day's times): the heading is the tap that opens it. */
.mbo-fold {
	padding-block: var(--mb-space-2);
}

.mbo-section.mbo-fold + .mbo-section.mbo-fold {
	margin-block-start: var(--mb-space-3);
}

.mbo-fold__head {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--mb-space-3);
	min-block-size: var(--mb-target-primary);
	padding-inline-end: var(--mb-space-6);
	cursor: pointer;
	list-style: none;
}

.mbo-fold__head::-webkit-details-marker {
	display: none;
}

.mbo-fold__head::after {
	content: "";
	position: absolute;
	inset-inline-end: var(--mb-space-2);
	inset-block-start: 50%;
	inline-size: 0.65rem;
	block-size: 0.65rem;
	border-block-end: 2px solid var(--mb-color-accent);
	border-inline-end: 2px solid var(--mb-color-accent);
	transform: translateY(-70%) rotate(45deg);
}

.mbo-fold__head:dir(rtl)::after {
	transform: translateY(-70%) rotate(-45deg);
}

.mbo-fold__panel[open] > .mbo-fold__head::after {
	transform: translateY(-20%) rotate(225deg);
}

.mbo-fold__panel[open] > .mbo-fold__head:dir(rtl)::after {
	transform: translateY(-20%) rotate(-225deg);
}

.mbo-fold__head h2 {
	margin: 0;
}

.mbo-fold__hint {
	font-size: var(--mb-text-sm);
	color: var(--mb-color-muted);
}

.mbo-fold__panel[open] > .mbo-fold__head {
	margin-block-end: var(--mb-space-3);
}

.mbo-fold__body {
	padding-block-end: var(--mb-space-3);
}

/* The weekly check (WeekScreen::summary): the week, what changes, where the check stands, then the buttons. */
.mbo-wk__week {
	margin-block-end: var(--mb-space-2);
	font-weight: 700;
	color: var(--mb-color-ink-soft);
}

.mbo-wk__changes li {
	font-weight: 600;
}

.mbo-wk__status p {
	margin-block-end: var(--mb-space-2);
	color: var(--mb-color-ink-soft);
}

.mbo-wk__acts {
	margin-block-start: var(--mb-space-4);
	gap: var(--mb-space-3);
}

.mbo-wk__approve {
	margin: 0;
}

.mbo-table a.mbo-button[aria-current="page"] {
	background: var(--mb-color-accent-soft);
}


/* A campaign's first-day meter in the Office (Phase V Wave 2, 4.7; the public page's is campaign.css's): the family's
   dots as the track, one full dot waiting at its start. */
.mbg-bar--first {
	color: var(--mb-color-accent);
}

.mbg-bar__dots {
	position: relative;
	display: block;
	block-size: 24px;
}

.mbg-bar__dots::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle, currentColor 0 3px, transparent 3.5px) 12px 50% / 18px 24px repeat-x;
	opacity: 0.34;
}

.mbg-bar__dots::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 24px;
	block-size: 24px;
	border-radius: 50%;
	background: currentColor;
}

.mbg-bar--first .mbg-bar__goal {
	margin-block: var(--mb-space-2) 0;
	color: var(--mb-color-ink);
}

/* "Your masjid is live" (Phase V Wave 2, 4.8): the first card on Home for two weeks, with the page's share card. */
.mbo-live {
	border-inline-start: 4px solid var(--mb-color-accent);
}

.mbo-live__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--mb-space-2);
	margin: 0;
	color: var(--mb-color-muted);
	font-weight: 600;
}

.mbo-live__address a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--mb-target);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.mbo-live__card {
	margin: var(--mb-space-3) 0;
}

.mbo-live__card img {
	display: block;
	inline-size: 100%;
	max-inline-size: 36rem;
	block-size: auto;
	border-radius: var(--mb-radius-2);
	border: 1px solid var(--mb-color-line);
}

.mbo-live__card figcaption {
	margin-block-start: var(--mb-space-2);
	color: var(--mb-color-muted);
	font-size: var(--mb-text-sm, 0.9375rem);
}

/* The print kit (Phase V Wave 2, W-K): each piece with its preview beside its words from 48rem, stacked on a phone. */
.mbo-kit {
	display: grid;
	gap: var(--mb-space-4);
	margin-block: var(--mb-space-4);
}

.mbo-kit__piece {
	display: grid;
	gap: var(--mb-space-4);
	align-items: start;
}

@media (min-width: 48rem) {
	.mbo-kit__piece:not(.mbo-kit__piece--waits) {
		grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
	}
}

.mbo-kit__piece--waits {
	border-style: dashed;
}

.mbo-kit__preview {
	margin: 0;
}

/* The Wave 2 review (P2-11): on a phone the preview takes the card's width (up to 20rem), centered, not a third of it
   empty beside it; from 48rem its column sets its width. */
.mbo-kit__preview img {
	display: block;
	inline-size: 100%;
	max-inline-size: 20rem;
	margin-inline: auto;
	block-size: auto;
	border: 1px solid var(--mb-color-line);
	border-radius: var(--mb-radius-1, 4px);
	background: #ffffff;
	box-shadow: 0 1px 3px rgb(15 29 51 / 12%);
}

@media (min-width: 48rem) {
	.mbo-kit__preview img {
		max-inline-size: 14rem;
		margin-inline: 0;
	}

	.mbo-kit__preview--slides img {
		max-inline-size: 20rem;
	}
}

.mbo-kit__words > h2 {
	margin-block-start: 0;
}

/* 50ch keeps a line near 70 characters of the body face at 1280 (the floor's line-length rule fails above 80). */
.mbo-kit__words p,
.mbo-kit__tips li {
	max-inline-size: 50ch;
}

.mbo-kit__slides {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--mb-target-gap, 8px);
}

.mbo-kit__slides a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--mb-target);
	font-weight: 600;
}

/* The Wave 2 review (P1-2): a small picture of the board in each look, beside its name (ScreensScreen::look_preview). */
.mbo-look__preview {
	flex: none;
	inline-size: 6rem;
	block-size: auto;
	margin-inline-end: var(--mb-space-3);
	border-radius: 6px;
	box-shadow: 0 0 0 1px var(--mb-color-line, rgb(0 0 0 / 12%));
}

/* A sample masjid's Give and campaign pages: the one plain line under the title (Network\Sample::give_notice). */
.mbo-sample-note {
	margin: 0.25rem 0 1rem;
	font-size: 1.125rem;
	font-weight: 600;
}

/* The ladder (Wave 2, Lane C): Home's next step after publishing. One step, one button; the rest behind "All steps". */
.mbo-ladder {
	grid-column: 1 / -1;
	border-inline-start: 4px solid var(--mb-color-accent);
}

.mbo-ladder__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--mb-space-2);
	margin: 0;
	color: var(--mb-color-muted);
	font-weight: 600;
}

.mbo-ladder__figure {
	font-weight: 600;
}

/* The ladder's quiet second link (Wave 3, Lane H: "Get a ready screen"), a full-size target under the button. */
.mbo-ladder__more {
	margin: var(--mb-space-2) 0 0;
}

.mbo-ladder__more > a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--mb-target);
}

/* One item for sale on the Hardware page: a rule between items inside the card. */
.mbo-hw-item + .mbo-hw-item {
	margin-block-start: var(--mb-space-4);
	padding-block-start: var(--mb-space-4);
	border-block-start: 1px solid var(--mb-color-line);
}

.mbo-ladder__all {
	margin-block-start: var(--mb-space-3);
}

.mbo-ladder__all > summary {
	display: flex;
	align-items: center;
	min-block-size: var(--mb-target);
	cursor: pointer;
	font-weight: 600;
}

.mbo-ladder__steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbo-ladder__steps li {
	position: relative;
	padding-inline-start: 2.25rem;
	padding-block: var(--mb-space-2);
}

.mbo-ladder__steps li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.1rem;
	inset-block-start: calc(var(--mb-space-2) + 0.1rem);
	inline-size: 1.4rem;
	block-size: 1.4rem;
	box-sizing: border-box;
	border-radius: 50%;
	border: 2px solid var(--mb-color-line);
}

.mbo-ladder__steps li.is-next::before {
	border-color: var(--mb-color-accent);
}

.mbo-ladder__steps li.is-done {
	color: var(--mb-color-muted);
}

.mbo-ladder__steps li.is-done::before {
	content: "\2713";
	display: grid;
	place-items: center;
	background: var(--mb-color-ok);
	border-color: var(--mb-color-ok);
	color: var(--mb-color-surface);
	font-size: var(--mb-text-xs);
	font-weight: 700;
}

.mbo-ladder__steps a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--mb-target);
}

.mbo-ladder__tag {
	display: inline-block;
	padding-inline: var(--mb-space-2);
	border: 1px solid var(--mb-color-accent);
	border-radius: 999px;
	color: var(--mb-color-accent);
	font-size: inherit;
	font-weight: 600;
}

.mbo-ladder__addon {
	color: var(--mb-color-muted);
}

.mbo-ladder__done {
	display: block;
	font-size: var(--mb-text-sm, 0.9375rem);
}

.mbo-ladder__beyond {
	margin-block: var(--mb-space-4) var(--mb-space-2);
}

.mbo-ladder__invite {
	padding-block: var(--mb-space-3);
	border-block-start: 1px solid var(--mb-color-line);
}

.mbo-ladder__invite h4 {
	margin: 0 0 var(--mb-space-2);
}

/* A link that fills a table cell's row height, so it is a full tap target (44 px), as in the iftar nights table. */
.mbo-cell-link {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
}

/* People: the turnover buttons (remove, sign out everywhere, reset two-step) sit apart from Save roles, so no two targets touch. */
.mbo-details > .mbo-turnover {
	margin-block-start: var(--mb-space-4);
}