/*
 * The public site's shared sheet - linked by home_{ar,en}.dwt and global/{ar,en}/header.dwt,
 * after the theme bundles and before any module sheet.
 *
 * 1. Tokens. ONE palette for every public page. A module sheet keeps its own prefix
 *    (--fxpg-teal, --fxt-*, ...) but points it at these, so a colour changes here once.
 * 2. SVG icons (.ic) from assets/icons/site.svg, and the two icon modifiers.
 * 3. Skip link, focus ring, reduced motion.
 * 4. Notice: one component for every alert, empty state and form message.
 * 5. Page chrome that used to sit in <style> blocks inside <body> (header band, footer).
 *
 * Breakpoints used across the public sheets - stay on these:
 *   575.98px (phone)   767.98px (large phone)   991.98px (tablet: menu becomes a drawer)
 *   1199.98px (small laptop)
 */

/* ------------------------------------------------------------------ 1. tokens */
:root {
	--site-teal: #26667c;          /* the site's --bs-primary */
	--site-teal-deep: #0e3d4c;
	--site-teal-light: #4fa3ba;
	--site-teal-rgb: 38, 102, 124; /* the theme's --bs-primary-rgb is a different blue */
	--site-ink: #0b2b33;
	--site-muted: #5b7076;
	--site-mist: #eff3f4;
	--site-rule: #dce4e6;
	--site-surface: #ffffff;
	--site-surface-raised: #ffffff;

	--site-success: #1f8a5b;       /* --bs-success is the teal here: not usable for "done" */
	--site-success-rgb: 31, 138, 91;
	--site-warning: #b7791f;
	--site-warning-rgb: 183, 121, 31;
	--site-danger: #c0392b;
	--site-danger-rgb: 192, 57, 43;
	--site-info-rgb: 38, 102, 124;

	--site-space-1: 4px;
	--site-space-2: 8px;
	--site-space-3: 12px;
	--site-space-4: 16px;
	--site-space-5: 24px;
	--site-space-6: 32px;
	--site-space-7: 48px;

	--site-radius-sm: 10px;
	--site-radius: 14px;
	--site-radius-pill: 999px;

	--site-text-xs: .8125rem;
	--site-text-sm: .875rem;
	--site-text: 1rem;
	--site-text-lg: 1.125rem;
	--site-text-xl: 1.375rem;

	--site-shadow: 0 1px 2px rgba(11, 43, 51, .06), 0 6px 20px rgba(11, 43, 51, .06);
	--site-focus: 0 0 0 3px rgba(79, 163, 186, .55);
}

[data-bs-theme="dark"] {
	--site-teal: #4fa3ba;          /* #26667c is 2.85:1 on the dark surface */
	--site-ink: #e8f0f2;
	--site-muted: #9fb3b9;
	--site-mist: #0f1b1f;
	--site-rule: rgba(255, 255, 255, .10);
	--site-surface: #16242a;
	--site-surface-raised: #1b2c33;

	--site-success: #5cc08f;
	--site-warning: #e0a94a;
	--site-danger: #f07a6c;
	--site-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
}

/* ------------------------------------------------------------------ 2. icons */
/* <svg class="ic" aria-hidden="true" focusable="false"><use href="assets/icons/site.svg#phone"></use></svg>
   Lucide outlines (stroke) and filled brand logos, built by tools/site-icons.php. Sized like
   a font icon: 1em, currentColor, on the text baseline. Names: https://lucide.dev/icons */
.ic {
	display: inline-block;
	width: 1em;
	height: 1em;
	flex: none;
	vertical-align: -.125em;
	overflow: visible;
}

/* A left/right arrow or chevron points with the reading direction on an RTL page. */
[dir="rtl"] .ic.is-directional {
	transform: scaleX(-1);
}

.is-flipped {
	display: inline-block;
	transform: rotate(180deg);
}

.is-spinning {
	display: inline-block;
	animation: site-spin 1s linear infinite;
}

@keyframes site-spin {
	to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------ 3. access */
.skip-link {
	position: absolute;
	inset-inline-start: var(--site-space-4);
	top: -100px;
	z-index: 10000;
	padding: var(--site-space-2) var(--site-space-4);
	border-radius: var(--site-radius-sm);
	background: var(--site-teal-deep);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	transition: top .15s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
	top: var(--site-space-3);
	color: #fff;
	outline: none;
	box-shadow: var(--site-focus);
}

/* The theme removes the outline on most controls; keyboard users need it back. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--site-teal-light);
	outline-offset: 2px;
}

main:focus {
	outline: none;
}

/* Visually hidden, still read by a screen reader. */
.visually-hidden-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------------ 4. notice */
/* <div class="notice is-info" role="status"><i class="flaticon4-info-circle" aria-hidden="true"></i>
     <div class="notice-body"><strong class="notice-title">…</strong><p>…</p></div></div>
   Tones: is-info (default), is-success, is-warning, is-danger. .notice-empty is the
   centred "nothing here" state a list shows. */
.notice {
	--notice-rgb: var(--site-info-rgb);
	--notice-ink: var(--site-teal);
	display: flex;
	align-items: flex-start;
	gap: var(--site-space-3);
	padding: var(--site-space-3) var(--site-space-4);
	border: 1px solid rgba(var(--notice-rgb), .28);
	border-inline-start-width: 4px;
	border-radius: var(--site-radius-sm);
	background: rgba(var(--notice-rgb), .08);
	color: var(--site-ink);
	font-size: var(--site-text-sm);
	line-height: 1.6;
}

.notice.is-success { --notice-rgb: var(--site-success-rgb); --notice-ink: var(--site-success); }
.notice.is-warning { --notice-rgb: var(--site-warning-rgb); --notice-ink: var(--site-warning); }
.notice.is-danger { --notice-rgb: var(--site-danger-rgb); --notice-ink: var(--site-danger); }

.notice > i,
.notice > .ic {
	flex: none;
	margin-top: 2px;
	color: var(--notice-ink);
	font-size: 1.25rem;
}

.notice-body {
	flex: 1 1 auto;
	min-width: 0;
}

.notice-body > :last-child {
	margin-bottom: 0;
}

.notice-title {
	display: block;
	margin-bottom: 2px;
	color: var(--site-ink);
	font-weight: 700;
}

.notice-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--site-space-2);
	padding: var(--site-space-7) var(--site-space-4);
	border: 1px dashed var(--site-rule);
	border-radius: var(--site-radius);
	background: var(--site-surface);
	color: var(--site-muted);
	text-align: center;
}

.notice-empty > i,
.notice-empty > .ic {
	color: var(--site-teal);
	font-size: 2.5rem;
	opacity: .8;
}

.notice-empty .notice-title {
	font-size: var(--site-text-lg);
}

/* ------------------------------------------------------------------ 5. page chrome */
/* The header band behind every module page (global/{ar,en}/header.dwt): a 350px video
   with a teal tint. Was a <style> block inside <body>. */
.video-container {
	position: relative;
}

.devOfEdu-header-h {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 350px;
	object-fit: cover;
}

.video-overlay {
	z-index: -2;
	display: block;
	max-width: 100%;
	opacity: .2;
}

.overlayx {
	left: 0;
	z-index: -1;
	background-color: rgba(6, 59, 66, .4);
}

/* The theme shrinks the page backdrop to 200px under 992px
   (style.bundle: body { background-size: 100% 200px }), which drew a hard line across
   the 350px band. The band owns its height, so the backdrop follows it.
   (0,1,1) beats the theme's (0,0,1) without !important. */
@media (max-width: 991.98px) {
	body:not(.app-blank) {
		background-size: 100% 350px;
	}
}

/* The footer band on module pages (global/{ar,en}/footer.dwt). Was an inline style. */
.site-footer-band {
	width: 100%;
	background: #596c6c linear-gradient(180deg, #15d5ff80 20%, #045f73 18%, #00809c 100%) 0 0 no-repeat padding-box;
}

[data-bs-theme="dark"] .site-footer-band {
	background: #0b1a1f linear-gradient(180deg, #0e3d4c 0%, #0b2b33 100%) 0 0 no-repeat padding-box;
}

/* Wide tables inside stored article bodies scroll on their own, never the page. */
.table-scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* An image never pushes the page wider than the phone. */
img,
video,
iframe {
	max-width: 100%;
}

/* Buttons that replaced links and divs in the header (Block-HMenu): keep the look the
   theme gave the old element. */
button.scrolltop {
	border: 0;
}

.menu-link.theme-choice {
	width: 100%;
	border: 0;
	background: transparent;
	text-align: start;
}

button.btn-custom {
	border: 0;
}

/* English pages (LTR): the accessibility and sign-language floating buttons sit on the
   right. Was a <style> block in the body of global/en/footer.dwt. */
[dir="ltr"] #MrAccessInHand,
[dir="ltr"] #DeafServicePlace {
	left: auto !important;
	right: 5px !important;
}

/* ------------------------------------------------------------------ pager (class/class.pager.php)
   Was a <style> block the pager printed inside <body> on every list page. Module sheets
   still recolour the active button under #kt_content. */
.fx-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--site-space-3);
}

.fx-pager-btns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--site-space-1);
}

.fx-pg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--site-space-2);
	border: 1px solid var(--site-rule);
	border-radius: var(--site-radius-sm);
	background: var(--site-surface);
	color: var(--site-ink);
	font-size: var(--site-text-sm);
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.fx-pg-btn:hover,
.fx-pg-btn:focus-visible {
	border-color: var(--site-teal);
	color: var(--site-teal);
}

.fx-pg-btn.active {
	border-color: var(--site-teal-deep);
	background: var(--site-teal-deep);
	color: #fff;
	font-weight: 700;
}

.fx-pg-info {
	color: var(--site-muted);
	font-size: var(--site-text-xs);
	font-weight: 500;
}

/* ------------------------------------------------------------------ footer block (Block-footer)
   Was a <style> block inside <body>. The link nudge points with the reading direction. */
[dir="ltr"] { --footer-nudge: 3px; }
.fx-links-trigger { cursor: pointer; transition: opacity .2s ease; }
.fx-links-trigger:hover { opacity: 0.85; }

.fx-links-popover {
border: none !important;
border-radius: 16px !important;
overflow: hidden;
box-shadow: 0 12px 48px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08) !important;
background: rgba(255,255,255,0.85) !important;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
max-width: 340px !important;
}
.fx-links-popover .popover-arrow::before,
.fx-links-popover .popover-arrow::after { border-color: transparent !important; }
.fx-links-popover .popover-header {
background: transparent !important;
border-bottom: 1px solid rgba(0,0,0,0.06) !important;
padding: 14px 18px 12px !important;
}
.fx-links-popover .popover-body { padding: 8px 10px !important; }

.fx-links-list { display: flex; flex-direction: column; gap: 2px; }

.fx-link-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 10px;
text-decoration: none !important;
transition: all .2s ease;
color: inherit;
}
.fx-link-item:hover {
background: rgba(13,122,141,0.06);
}
.fx-link-icon {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(13,122,141,0.08);
color: #0D7A8D;
flex-shrink: 0;
}
.fx-link-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.fx-link-name {
font-size: 0.88rem;
font-weight: 600;
color: var(--bs-gray-900);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
}
.fx-link-url {
font-size: 0.73rem;
color: var(--bs-gray-500);
font-weight: 400;
}
.fx-link-arrow {
color: var(--bs-gray-400);
opacity: 0;
transition: all .2s ease;
flex-shrink: 0;
}
.fx-link-item:hover .fx-link-arrow {
opacity: 1;
color: #0D7A8D;
transform: translateX(var(--footer-nudge, -3px));
}
.fx-link-item:hover .fx-link-name { color: #0D7A8D; }

[data-bs-theme="dark"] .fx-links-popover {
background: rgba(30,30,40,0.88) !important;
box-shadow: 0 12px 48px rgba(0,0,0,0.4) !important;
}
[data-bs-theme="dark"] .fx-links-popover .popover-header {
border-bottom-color: rgba(255,255,255,0.06) !important;
}
[data-bs-theme="dark"] .fx-link-item:hover {
background: rgba(255,255,255,0.06);
}
[data-bs-theme="dark"] .fx-link-icon {
background: rgba(13,122,141,0.15);
}

/* Seven items no longer fit on one line below ~1200px (measured: 59px spare at 1024px),
   and the row is nowrap, so without this the items squeeze instead of wrapping. */
#kt_footer .container-xxl { flex-wrap: wrap; row-gap: .5rem; }
#kt_footer .fx-foot-tajawob { border-radius: 6px; vertical-align: middle; }

/* ------------------------------------------------------------------ phone menu drawer (Block-HMenu)
   A title and a close button at the top of the drawer, and the two floating accessibility
   buttons step aside while it is open (they sat on top of the menu items). */
.drawer-head {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: var(--site-space-4) var(--site-space-5) var(--site-space-2);
	background: var(--bs-body-bg);
	border-bottom: 1px solid var(--site-rule);
}

.drawer-head-title {
	color: var(--site-ink);
	font-size: var(--site-text-lg);
	font-weight: 700;
}

.drawer-head-close {
	width: 40px;
	height: 40px;
	border: 1px solid var(--site-rule) !important;
	border-radius: var(--site-radius-sm);
	color: var(--site-ink);
	font-size: 1.1rem;
}

.drawer-head-close:hover,
.drawer-head-close:focus-visible {
	border-color: var(--site-teal) !important;
	color: var(--site-teal);
}

body[data-kt-drawer-header-menu="on"] #MrAccessInHand,
body[data-kt-drawer-header-menu="on"] #DeafServicePlace,
body[data-kt-drawer-header-menu="on"] #fx-poll-wrap {
	visibility: hidden;
}

@media (max-width: 991.98px) {
	#kt_header_nav_menu.drawer {
		flex-direction: column;
		align-items: stretch !important;
		overflow-y: auto;
	}

	#kt_header_nav_menu.drawer > .menu {
		width: 100%;
	}
}

.drawer-head-close i.flaticon4-close {
	color: var(--site-ink) !important;
	font-size: 1rem;
}

/* The logo files are 2.74:1. When the phone header squeezes the slot, keep the artwork's
   shape instead of stretching it (Lighthouse: "incorrect aspect ratio"). */
#kt_header .logo-default,
#kt_header .logo-sticky {
	object-fit: contain;
}

/* ------------------------------------------------------------------ dark mode fixes for the shared chrome */
/* The sticky header's logo is the dark artwork; on the dark header it disappeared. In dark
   mode the light logo stays in place when the header sticks. */
[data-bs-theme="dark"] body[data-kt-sticky-header="on"] #kt_header .logo-sticky {
	display: none !important;
}

[data-bs-theme="dark"] body[data-kt-sticky-header="on"] #kt_header .logo-default {
	display: inline-block !important;
}

/* .text-light is var(--bs-text-light), a dim grey in the dark theme: the footer's white
   links and labels dropped to about 2:1 on the teal band. */
[data-bs-theme="dark"] #kt_footer .text-light,
[data-bs-theme="dark"] #kt_footer a.text-light {
	color: rgba(255, 255, 255, .88) !important;
}

/* Header tool icons drawn as SVG (theme sun/moon, language globe). The theme colours only
   <i> and .svg-icon inside .btn-custom: white on the transparent header, the button's own
   ink once it sticks. The SVGs follow the same two states. */
#kt_header .topbar .btn.btn-custom .ic,
#kt_header .topbar .btn.btn-custom .ic-line {
	color: inherit;
}

body:not([data-kt-sticky-header="on"]) #kt_header .topbar .btn.btn-custom .ic,
body:not([data-kt-sticky-header="on"]) #kt_header .topbar .btn.btn-custom .ic-line {
	color: #fff;
}

#kt_header .topbar .btn.btn-custom .ic {
	font-size: 1.5rem;
}

/* ==============================================================================
   SHARED COMPONENTS - every public module page is built from these (the public
   counterpart of the admin's screen.css). Plain names, no module prefix:
   page-hero / page-crumbs / page-band - the banner and the page surface
   list-toolbar, search-pill(-field/-icon/-input/-btn/-clear), result-line
   section-head + count-badge, cat-section / cat-grid / cat-card - sections
   card-grid (.is-list / .is-grid), item-card (+ -cover / date-tile), meta-chip
   empty-state, pager-wrap
   article (-media/-inner/-head/-cat/-title/-meta), prose, fact-list, content-section,
   attach-bar, article-actions, share-bar, item-pager, back-link, related
   What only one module has lives at the end of this file, under .page-<module>.
   Built from the pages module's sheet, which every list/detail module had copied.
   ============================================================================== */
/* ==============================================================================
   The hero, on the band header.dwt paints behind every module page
   ============================================================================== */
.page-hero {
	position: relative;
	z-index: 3;
	padding: 18px 0 0;
}
/* A one-way ramp: nothing at the top, where the band's video is left alone behind the
   nav, coming on through the lower half and ending opaque under the search pill.

   It was a near-opaque slab from edge to edge, which is the same mistake the library
   made: it read as a dark rectangle dropped on the page and drew a hard line where it
   met the bright band above it. Measured here at every width from 390 to 1920 — the
   scrim started at .87 immediately, so the cut was at the hero's top edge, around y=103
   on a desktop.

   The stops are deliberately uneven. A straight two-stop ramp spends most of its length
   pale, and that is the height at which the band's video changes tone, so the darkening
   is held back and then brought on quickly. These values are the library's, exactly —
   the two pages are meant to be indistinguishable here. */
.page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg,
		rgba(5, 27, 34, 0) 0%,
		rgba(5, 27, 34, .10) 30%,
		rgba(5, 27, 34, .34) 52%,
		rgba(5, 27, 34, .70) 74%,
		rgba(5, 27, 34, .92) 89%,
		rgba(5, 27, 34, 1) 100%);
	pointer-events: none;
}
/* text-align: start resolves to right in Arabic and left in English on its own -
   header.dwt sets dir on <html>. No <RTL>/<LTR> tags and no dir= attribute needed. */
.page-hero-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: start;
	padding-bottom: 26px;
}
.page-crumbs .breadcrumb {
	justify-content: flex-start;
	margin-bottom: 6px;
	opacity: .85;
}
.page-crumbs .breadcrumb-item,
.page-crumbs .breadcrumb-item a {
	color: rgba(255, 255, 255, .85);
	font-size: 13px;
	font-weight: 500;
}
/* The crumbs carry Metronic's .text-hover-primary, whose rule is
   `color: var(--bs-text-primary) !important` — #26667c, the hero's own colour, so a
   hovered crumb vanished. Colour is not winnable here (.text-white is !important too),
   so the feedback rides on opacity. */
.page-crumbs .breadcrumb-item.opacity-75 {
	opacity: .72 !important;
	transition: opacity .2s ease;
}
.page-crumbs .breadcrumb-item.opacity-75:hover {
	opacity: 1 !important;
}
.page-crumbs .breadcrumb-item a:hover {
	color: #fff !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}
.page-hero-title {
	margin: 0;
	color: #fff;
	/* The shared hero scale. These three were clamp(32px, 18px + 3.2vw, 56px) while
	   the other 22 module sheets used this one, so a heading changed size when you
	   moved between, say, the news list and the library. */
	font-size: clamp(32px, 18px + 3.2vw, 56px);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -.01em;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .28);
}

/* ------------------------------------------------------------ the toolbar ---- */
/* The search used to be a 620px pill centred in the hero, straddling the seam on a
   -46px margin, which is why the band below reserved 86px at its top. It sits in a
   toolbar above the cards now - search on the start side, the count on the end - the
   same object library, updates and topics carry. */
.list-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 20px;
	margin: 0 0 28px;
}
.list-toolbar-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.search-pill {
	display: flex;
	align-items: center;
	gap: 8px;
	width: min(460px, 100%);
	margin: 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
}
.search-pill-field {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 1 1 auto;
	min-width: 0;
	height: 42px;
	padding-inline: 14px;
	margin: 0;
	background: var(--bs-body-bg);
	border: 1px solid var(--site-rule);
	border-radius: 10px;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.search-pill-icon {
	flex: 0 0 auto;
	color: var(--site-muted);
	font-size: 15px;
}
.search-pill-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--site-ink);
	font-size: 13.5px;
	font-family: inherit;
	font-weight: 500;
	padding: 0;
}
.search-pill-input::placeholder {
	color: var(--site-muted);
	font-weight: 400;
	opacity: 1;
}
.search-pill-input:focus {
	outline: 0;
}
/* The ring is on the FIELD, not the form: the form also holds the button, and a ring
   around both reads as one giant control. */
.search-pill-field:focus-within {
	border-color: var(--site-teal);
	box-shadow: 0 0 0 3px rgba(var(--site-teal-rgb), .18);
}
.search-pill-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}
.search-pill-btn {
	flex: 0 0 auto;
	height: 42px;
	border: 0;
	border-radius: 10px;
	background: var(--site-teal-deep);
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	padding: 0 22px;
	transition: background .2s ease;
}
.search-pill-btn:hover,
.search-pill-btn:focus-visible {
	background: var(--site-teal);
}
[data-bs-theme="dark"] .search-pill-btn:hover,
[data-bs-theme="dark"] .search-pill-btn:focus-visible {
	background: #2E7E96;
}
/* On the field, not the form: the form is transparent now. */
[data-bs-theme="dark"] .search-pill-field {
	background: #16262B;
}
[data-bs-theme="dark"] .search-pill-btn {
	background: #2E7F96;
}
[data-bs-theme="dark"] .search-pill-btn:hover {
	background: #3C9AB4;
}

@media (max-width: 767.98px) {
	.page-hero {
		padding-top: 6px;
	}
	.page-hero-inner {
		padding-bottom: 20px;
	}
	.search-pill {
		width: 100%;
	}
}

/* 40px, not the 86px this reserved for the pill that used to overlap the seam. */
/* A line of explanation under the hero title (lists that describe themselves). */
.page-hero-sub {
	max-width: 54ch;
	margin: 14px 0 0;
	color: rgba(255, 255, 255, .86);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.9;
}

.page-band {
	position: relative;
	z-index: 2;
	background: var(--site-mist);
	padding: 40px 0 56px;
}

.result-line {
	margin: 0;
	color: var(--site-muted);
	font-size: 15px;
	font-weight: 500;
}
.result-line strong {
	color: var(--site-ink);
	font-weight: 700;
}
.search-pill-clear {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--site-teal);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.search-pill-clear,
.search-pill-clear:hover {
	transition: color .2s ease;
}
.search-pill-clear:hover {
	color: var(--site-teal-deep);
}
[data-bs-theme="dark"] .search-pill-clear:hover {
	color: var(--site-ink);
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 64px 20px;
	background: var(--bs-body-bg);
	border: 1px solid var(--site-rule);
	border-radius: 14px;
}
.empty-state-icon {
	color: var(--site-muted);
	font-size: 36px;
	opacity: .5;
	margin-bottom: 16px;
}
.empty-state-title {
	margin: 0;
	color: var(--site-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.7;
}
.empty-state-text {
	margin: 10px 0 0;
	color: var(--site-muted);
	font-size: 15px;
}
.empty-state-text:empty {
	display: none;
}
.empty-state-btn {
	display: inline-flex;
	align-items: center;
	margin-top: 20px;
	padding: 11px 26px;
	border-radius: 999px;
	background: var(--site-teal);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s ease;
}
.empty-state-btn:hover {
	background: var(--site-teal-deep);
	color: #fff;
}

/* ==============================================================================
   Sections
   ============================================================================== */
/* The number beside a section heading. */
.count-badge {
	padding: 3px 10px;
	border-radius: var(--site-radius-pill);
	background: rgba(var(--site-teal-rgb), .10);
	color: var(--site-teal);
	font-size: 12.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.cat-section {
	margin-bottom: 40px;
}
.section-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	color: var(--site-ink);
	font-size: 17px;
	font-weight: 700;
}
.section-head .ic {
	color: var(--site-teal);
	font-size: 15px;
}
.cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	/* Equal rows: as plain flex items the cards take their height from their own text
	   and one two-line name makes its whole row taller. */
	grid-auto-rows: 1fr;
	gap: 14px;
}
.cat-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border: 1px solid var(--site-rule);
	border-radius: 14px;
	background: var(--bs-body-bg);
	text-decoration: none;
	/* Declared on :hover too. These are <a> elements and the theme's
	   a:hover { transition: color .2s ease } at (0,1,1) REPLACES the list below, so a
	   transition set only here is dropped the moment the pointer arrives. */
	transition: border-color .2s ease, transform .2s ease;
}
.cat-card:hover {
	border-color: var(--site-teal);
	transform: translateY(-2px);
	transition: border-color .2s ease, transform .2s ease;
}
.cat-card-icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(var(--site-teal-rgb), .10);
	color: var(--site-teal);
}
.cat-card-icon .ic {
	font-size: 17px;
	color: inherit;
}
.cat-card-body {
	min-width: 0;
}
.cat-card-name {
	display: block;
	color: var(--site-ink);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cat-card-meta {
	display: block;
	margin-top: 2px;
	color: var(--site-muted);
	font-size: 12.5px;
}
/* A section card may say two things: how many, and when the newest arrived. */
.cat-card-date {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-inline-start: 10px;
}

/* ==============================================================================
   Tender cards
   ==============================================================================
   Only ONE of the 718 published tenders names a picture that is on disk, so a photo
   tile would be a placeholder 717 times. The date leads instead - a tender is a thing
   with a date - and the title sits beside it, printed once.
   ============================================================================== */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	grid-auto-rows: 1fr;
	gap: 16px;
}
/* «طريقة العرض» = list: one full-width row per page, so the excerpt has room to read.
   «grid» keeps the cards above in columns. */
/* A card whose parts stack (section label, title, text, chips) - no date tile or cover. */
.item-card.is-stacked {
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px;
}

/* The section an item belongs to, above its title, on lists that mix sections. */
.item-card-cat {
	overflow: hidden;
	color: var(--site-teal);
	font-size: 11.5px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* A detail page with no search toolbar above it starts closer to the hero. */
.page-band.is-flush {
	padding-top: 40px;
}

.card-grid.is-list {
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
}
.item-card {
	display: flex;
	gap: 16px;
	padding: 16px;
	border: 1px solid var(--site-rule);
	border-radius: 14px;
	background: var(--bs-body-bg);
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease;
}
.item-card:hover {
	border-color: var(--site-teal);
	transform: translateY(-2px);
	transition: border-color .2s ease, transform .2s ease;
}
.date-tile {
	flex: 0 0 auto;
	width: 64px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 0;
	border-radius: 12px;
	background: linear-gradient(160deg,
		rgba(var(--site-teal-rgb), .13) 0%,
		rgba(var(--site-teal-rgb), .05) 100%);
	color: var(--site-teal);
	line-height: 1.15;
}
.date-tile-day {
	font-size: 22px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.date-tile-month {
	font-size: 12px;
	font-weight: 600;
}
.date-tile-year {
	margin-top: 2px;
	font-size: 11px;
	opacity: .75;
	font-variant-numeric: tabular-nums;
}
.item-card-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.item-card-title {
	margin: 0;
	color: var(--site-ink);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.65;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.item-card-excerpt {
	margin: 0;
	color: var(--site-muted);
	font-size: 12.5px;
	line-height: 1.75;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.item-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 4px;
	color: var(--site-muted);
	font-size: 12.5px;
}
/* A chip per fact the row actually carries. nomonq is filled on 193 of 718 rows and
   lastdate on 150, so an always-printed labelled row would be empty most of the time. */
.meta-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* One fixed height for every chip, so a row of them sits on one line however many
	   there are and whatever each says. Padding alone gives a chip with an icon a
	   different height from one without. */
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	border: 1px solid transparent;
	background: rgba(var(--site-teal-rgb), .09);
	color: var(--site-teal);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
/* An icon-only chip (an attachment, an outbound link): the title says what it is. */
.meta-chip.is-icon {
	width: 24px;
	padding: 0;
	justify-content: center;
}
.meta-chip .ic {
	/* fs-5 escapes the theme's i[class] { font-size: 1.5rem } in markup; here the
	   sheet sets it, but the COLOUR half of that rule is (0,1,1) and still outranks a
	   single class - hence .meta-chip i rather than a bare .meta-chip-icon. */
	font-size: 11px;
	color: inherit;
	line-height: 1;
}
/* A status chip states a fact about the tender, so it carries a quiet outline of its
   own tone - enough to read as a badge rather than a tinted label. */
.meta-chip.is-danger,
.meta-chip.is-open {
	border-color: currentColor;
	/* The tint is already light; at 28% the border reads without boxing the chip in. */
	border-color: color-mix(in srgb, currentColor 28%, transparent);
}
/* The CLOSING DATE is a deadline, so it carries its own red rather than the teal the
   other facts use - the one chip on the card that is about running out of time.
   An explicit red, not --bs-danger: that token is a background colour here and lands
   near 3:1 as ink on its own tint. Both values below were measured on the tint they
   actually sit on, in both themes. */
.meta-chip.is-danger {
	background: rgba(214, 57, 57, .10);
	color: #B32020;
}
[data-bs-theme="dark"] .meta-chip.is-danger {
	background: rgba(255, 110, 110, .16);
	color: #FF9B9B;
}
/* Still open. An EXPLICIT green: --bs-success is #00a39a in this theme, identical to
   --bs-primary, so a chip built on it would be indistinguishable from the teal ones
   beside it - which is the whole point of the state. */
.meta-chip.is-open {
	background: rgba(23, 139, 86, .10);
	color: #15794C;
}
[data-bs-theme="dark"] .meta-chip.is-open {
	background: rgba(80, 205, 137, .16);
	color: #6FD9A0;
}
/* The view count is not a status - it is the quietest thing on the card, so it keeps
   no chrome at all and sits at the end of the row. */
.meta-chip.is-plain {
	height: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--site-muted);
	font-weight: 500;
	margin-inline-start: auto;
}

[data-bs-theme="dark"] .date-tile {
	background: linear-gradient(160deg,
		rgba(var(--site-teal-rgb), .26) 0%,
		rgba(var(--site-teal-rgb), .10) 100%);
}

@media (max-width: 575.98px) {
	.item-card {
		gap: 12px;
		padding: 14px;
	}
	.date-tile {
		width: 56px;
	}
}

@media (max-width: 991.98px) {
	/* The off-canvas drawer sits outside the viewport; without this the page can be
	   scrolled sideways to reach it. */
	.wrapper {
		overflow-x: clip;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Reduced motion means no MOVEMENT, not a dead page: the travel goes, the colour
	   change stays. */
	.item-card:hover,
	.cat-card:hover {
		transform: none;
	}
}

/* The pager. Centred like every other list's. */
.pager-wrap {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

/* A page may carry a cover image. It sits where the date tile does, at the same size,
   so a mixed grid still lines up. */
.item-card-cover {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--bs-body-bg);
}
.item-card-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* =============================================================================
   THE DETAIL SHELL
   =============================================================================
   Copied from assets/css/modules/topics/topics.css (the .fxt-article* block, the
   origin) and shared verbatim with monq, mazaya, album, media, zawity, manaheg,
   govdalil and participate. Change one, change all nine.

   DELIBERATE DIVERGENCE between the copies - do not "fix" these back:
     album, media          -article-media is .is-figure: the picture IS the subject,
                           so it is contained, not cropped to 16/9
     media                 additionally .is-video, which holds an embed
     zawity, manaheg       -article-media is .is-cover: a portrait book cover
     govdalil, participate no -article-media rules at all - those rows carry no image

   -facts, -section, -filebar, -pager and -related are new vocabulary this shell
   introduces; they do not exist in topics.css.
   ============================================================================= */
.article {
	max-width: 900px;
	margin: 0 auto;
	border-radius: 18px;
	overflow: hidden;
	background: var(--bs-body-bg);
	border: 1px solid var(--site-rule);
}
.article-media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--site-mist);
}
.article-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* No picture on disk: the placeholder is centred small and dimmed rather than
   stretched, so an absent image reads as absent instead of as a bad photograph. */
.article-media.is-empty img {
	width: 32%;
	height: auto;
	margin: auto;
	position: absolute;
	inset: 0;
	opacity: .5;
	object-fit: contain;
}
[data-bs-theme="dark"] .article-media.is-empty img {
	/* The shared SVG paints its own light gradient because the listings use it too. */
	filter: invert(.92) hue-rotate(180deg);
	opacity: .35;
}
.article-inner {
	padding: 28px 38px 26px;
}
.article-head {
	padding-bottom: 20px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--site-rule);
}
.article-cat {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 12px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(var(--site-teal-rgb), .10);
	color: var(--site-teal);
	font-size: 12.5px;
	font-weight: 700;
}
.article-cat .ic {
	font-size: 11px;
	color: inherit;
}
/* The category arrives as a finished <a>, and the theme's --bs-link-color is ORANGE
   in a teal panel. (0,2,1) beats the link rule without reaching for !important. */
.article-cat a {
	color: inherit;
	text-decoration: none;
}
.article-title {
	margin: 0 0 14px;
	color: var(--site-ink);
	font-size: 27px;
	font-weight: 800;
	line-height: 1.45;
	/* A stored title can be one unbroken token; without this it overflows the card. */
	overflow-wrap: anywhere;
}
.article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
	color: var(--site-muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}
.article-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.article-meta-item .ic {
	font-size: 12px;
	color: inherit;
}

/* The body is the one place the stored HTML runs the show, so these rules CONTAIN it
   rather than style it: the measure, images that overflow, lists, and tables. */
.prose {
	max-width: 68ch;
	margin: 0 auto;
	color: var(--site-ink);
	font-size: 15.5px;
	line-height: 2;
	overflow-wrap: anywhere;
}
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child  { margin-bottom: 0; }
.prose img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}
.prose a {
	color: var(--site-teal);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.prose h1,
.prose h2,
.prose h3,
.prose h4 {
	color: var(--site-ink);
	font-weight: 700;
	line-height: 1.6;
}
/* Lists: the reference leaves these to the browser, which in RTL puts the marker on
   the wrong side and indents from the wrong edge. padding-inline-start is the fix in
   both directions. */
.prose ul,
.prose ol {
	padding-inline-start: 1.6em;
	margin-block: 0 16px;
}
.prose li {
	margin-bottom: 6px;
}
.prose blockquote {
	margin: 0 0 16px;
	padding-inline-start: 16px;
	border-inline-start: 3px solid rgba(var(--site-teal-rgb), .35);
	color: var(--site-muted);
}
.prose table {
	max-width: 100%;
	border-collapse: collapse;
}
.prose th,
.prose td {
	padding: 8px 12px;
	border: 1px solid var(--site-rule);
	text-align: start;
}
/* A wide table scrolls inside the column instead of widening the page. The wrapper is
   added by assets/js/fx-detail.js from the body's data-fx-tables attribute. */
.table-scroll {
	overflow-x: auto;
	margin: 0 0 18px;
	-webkit-overflow-scrolling: touch;
}
/* Editor HTML carries inline colours chosen against a white page; in dark mode they
   become unreadable. These neutralise the colour without touching the structure, and
   are the only !important rules in this sheet. */
[data-bs-theme="dark"] .prose [style*="color"]      { color: inherit !important; }
[data-bs-theme="dark"] .prose [style*="background"] { background: transparent !important; }
[data-bs-theme="dark"] .prose font[color]           { color: inherit !important; }
[data-bs-theme="dark"] .prose a[style*="color"],
[data-bs-theme="dark"] .prose a[style*="color"]:hover { color: var(--site-teal) !important; }

/* ---- facts: label/value pairs for the fields a row actually carries ---------- */
.fact-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px 24px;
	margin: 26px 0 0;
	padding: 20px 22px;
	border: 1px solid var(--site-rule);
	border-radius: 14px;
	background: var(--site-mist);
}
.fact {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.fact-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--site-muted);
	font-size: 12px;
	font-weight: 600;
}
.fact-label .ic {
	font-size: 11px;
	color: inherit;
}
.fact-value {
	color: var(--site-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

/* ---- section: a titled block of stored HTML, repeated ----------------------- */
.content-section {
	margin-top: 28px;
}
.content-section-title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	color: var(--site-ink);
	font-size: 17px;
	font-weight: 700;
}
.content-section-title .ic {
	color: var(--site-teal);
	font-size: 14px;
}

/* ---- filebar: download / watch / open an external link ---------------------- */
.attach-bar {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 26px;
	padding: 16px 18px;
	border: 1px solid var(--site-rule);
	border-radius: 14px;
	background: var(--site-mist);
}
.attach-bar-icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(var(--site-teal-rgb), .10);
	color: var(--site-teal);
}
.attach-bar-icon .ic {
	font-size: 17px;
	color: inherit;
}
.attach-bar-info {
	flex: 1 1 180px;
	min-width: 0;
}
.attach-bar-title {
	display: block;
	color: var(--site-ink);
	font-size: 14px;
	font-weight: 700;
	overflow-wrap: anywhere;
}
.attach-bar-hint {
	display: block;
	margin-top: 2px;
	color: var(--site-muted);
	font-size: 12.5px;
}
.attach-bar-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: var(--site-teal-deep);
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	/* Declared on :hover too - these are <a> elements and the theme's
	   a:hover { transition: color .2s ease } at (0,1,1) REPLACES the list. */
	transition: background-color .2s ease, color .2s ease;
}
.attach-bar-btn:hover {
	background: var(--site-teal);
	color: #fff;
	transition: background-color .2s ease, color .2s ease;
}
/* btn-outline-* paints no border in this theme, so the quiet button gets its own. */
.attach-bar-btn.is-quiet {
	background: transparent;
	border-color: var(--site-rule);
	color: var(--site-teal);
}
.attach-bar-btn.is-quiet:hover {
	background: transparent;
	border-color: var(--site-teal);
	color: var(--site-teal);
}

/* ---- pager: previous / next within the same section ------------------------- */
.item-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--site-rule);
}
.item-pager-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--site-teal);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	transition: color .2s ease;
}
.item-pager-link:hover {
	color: var(--site-teal-deep);
	transition: color .2s ease;
}
/* Arrows are drawn in the markup in the reading direction (sprite arrow-left/right). */

/* A picture in stored text whose file is missing (site.js marks it). */
.prose img.is-broken {
	display: none;
}

/* The picture is the subject (album, media): shown whole, not cropped to 16/9. A video
   holds an embed. */
.article-media.is-figure {
	aspect-ratio: auto;
	max-height: 72vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--site-mist);
}
.article-media.is-figure img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 72vh;
	object-fit: contain;
}
.article-media.is-figure a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.article-media.is-video {
	aspect-ratio: 16 / 9;
	max-height: none;
	background: #000;
}
.article-media.is-video iframe, .article-media.is-video .ratio {
	width: 100%;
	height: 100%;
	border: 0;
}

/* A section picture fills its icon square; a book cover is shown whole (is-cover);
   result-bar is the count line with a rule under it (book lists). */
.result-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 32px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--site-rule);
}
.cat-card-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.article-media.is-cover {
	aspect-ratio: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px 20px 4px;
	background: transparent;
}
.article-media.is-cover img {
	width: auto;
	height: auto;
	max-width: 240px;
	max-height: 340px;
	object-fit: contain;
	border-radius: 10px;
	border: 1px solid var(--site-rule);
}

/* An attachment that IS the item (no body text above it) leads with more weight. */
.attach-bar.is-lead {
	padding: 20px;
	border-color: rgba(var(--site-teal-rgb), .28);
	background: rgba(var(--site-teal-rgb), .07);
}
.attach-bar.is-lead .attach-bar-title {
	font-size: 15.5px;
}

/* A category label that is a link keeps the label's colour (the theme's link colour is orange). */
.article-cat a, .article-cat a:hover {
	color: inherit;
	text-decoration: none;
}

/* Spacing between consecutive content sections; the clear-search icon size. */
.search-pill-clear .ic {
	font-size: 13px;
}
.content-section + .content-section {
	margin-top: 52px;
	padding-top: 44px;
	border-top: 1px solid var(--site-rule);
}

/* An icon inside the empty-state circle. */
.empty-state-icon .ic {
	color: inherit;
	font-size: 22px;
}

/* ---- attach-list: several attachments, built in PHP as a.moe-attach-link ---- */
.attach-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.attach-list .moe-attach-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--site-rule);
	border-radius: 12px;
	background: rgba(var(--site-teal-rgb), .05);
	color: var(--site-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .18s ease, background-color .18s ease;
}
.attach-list .moe-attach-link:hover,
.attach-list .moe-attach-link:focus-visible {
	border-color: var(--site-teal);
	background: rgba(var(--site-teal-rgb), .10);
	color: var(--site-teal);
}
.attach-list .moe-attach-link .ic {
	flex: 0 0 auto;
	color: var(--site-teal);
	font-size: 18px;
}
.attach-list .moe-attach-name {
	flex: 1 1 auto;
	overflow-wrap: anywhere;
}
[data-bs-theme="dark"] .attach-list .moe-attach-link {
	background: rgba(var(--site-teal-rgb), .14);
}

/* ---- the share footer ------------------------------------------------------- */
.article-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--site-rule);
}
.article-actions-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--site-muted);
	font-size: 13px;
	font-weight: 600;
}
.article-actions-label .ic {
	font-size: 12px;
	color: inherit;
}
.share-bar {
	display: flex;
	flex-wrap: wrap;           /* seven 36px buttons do not fit a 320px phone on one row */
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.share-bar > * {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: var(--site-mist);
	color: var(--site-muted);
	cursor: pointer;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.share-bar > *:hover {
	background: rgba(var(--site-teal-rgb), .12);
	color: var(--site-teal);
	transition: background-color .2s ease, color .2s ease;
}
.share-bar .ic {
	font-size: 14px;
	color: inherit;
}
/* The copy button after a successful copy, set by assets/js/fx-detail.js. */
.share-bar > .is-done {
	background: rgba(23, 139, 86, .12);
	color: #15794C;
}
[data-bs-theme="dark"] .share-bar > .is-done {
	background: rgba(80, 205, 137, .18);
	color: #6FD9A0;
}

/* ---- back to the section ---------------------------------------------------- */
.back-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-top: 22px;
	color: var(--site-muted);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: color .2s ease;
}
.back-link:hover {
	color: var(--site-teal);
	transition: color .2s ease;
}

/* ---- related: the block that used to be a sidebar --------------------------- */
.related {
	max-width: 900px;
	margin: 36px auto 0;
}
.related-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	color: var(--site-ink);
	font-size: 17px;
	font-weight: 700;
}
.related-head .ic {
	color: var(--site-teal);
	font-size: 15px;
}

@media (max-width: 767.98px) {
	.article-inner {
		padding: 22px 18px 20px;
	}
	.article-title {
		font-size: 21px;
	}
	.article-actions {
		justify-content: center;
	}
	.fact-list {
		padding: 16px 18px;
	}
}

@media print {
	.article-actions,
	.back-link,
	.item-pager,
	.related,
	.page-hero {
		display: none;
	}
	.article {
		border: 0;
		max-width: none;
	}
}

/* A page with few or no items still fills the screen, so the footer stays at the bottom
   instead of rising to the middle. */
main#main {
	display: block;
	min-height: 100vh;
	min-height: 100svh;
}

/* ------------------------------------------------------------------ dialogs and toasts
   The public counterpart of the admin's confirm modal (screen.css .confirm-modal): a
   rounded card, a tinted icon tile, a square close button, buttons at the start. Built by
   Site.dialog() in site.js; the services and organisation-chart modals use the same card
   through .site-modal. */
:root {
	--site-shadow-modal: 0 18px 70px rgba(11, 43, 51, .22);
}

[data-bs-theme="dark"] {
	--site-shadow-modal: 0 18px 70px rgba(0, 0, 0, .55);
}

.site-modal .modal-content {
	overflow: hidden;
	border: 0;
	border-radius: 16px;
	background: var(--site-surface);
	box-shadow: var(--site-shadow-modal);
	color: var(--site-ink);
}

.site-modal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 22px 22px 0;
}

.site-modal-symbol {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--site-radius);
	background: rgba(var(--site-teal-rgb), .10);
	color: var(--site-teal);
	font-size: 26px;
}

.site-modal.is-success .site-modal-symbol {
	background: rgba(var(--site-success-rgb), .12);
	color: var(--site-success);
}

.site-modal.is-warning .site-modal-symbol {
	background: rgba(var(--site-warning-rgb), .14);
	color: var(--site-warning);
}

.site-modal.is-danger .site-modal-symbol {
	background: rgba(var(--site-danger-rgb), .12);
	color: var(--site-danger);
}

.site-modal-close {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 9px;
	background: var(--site-mist);
	color: var(--site-muted);
	font-size: 16px;
	transition: background-color .2s ease, color .2s ease;
}

.site-modal-close:hover,
.site-modal-close:focus-visible {
	background: rgba(var(--site-danger-rgb), .12);
	color: var(--site-danger);
}

.site-modal .modal-body {
	padding: 16px 22px 6px;
}

.site-modal-title {
	margin: 0 0 6px;
	color: var(--site-ink);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
}

.site-modal-text {
	margin: 0 0 10px;
	color: var(--site-muted);
	font-size: var(--site-text-sm);
	line-height: 1.8;
}

.site-modal-lines {
	margin: 0 0 10px;
	padding-inline-start: 18px;
	color: var(--site-muted);
	font-size: var(--site-text-sm);
	line-height: 1.8;
}

.site-modal .modal-footer {
	justify-content: flex-start;
	gap: 8px;
	padding: 14px 22px 22px;
	border: 0;
}

.site-modal .modal-footer > * {
	margin: 0;
}

/* A modal that carries a heading of its own (services, a unit of the chart): the head row
   holds the icon tile, the title and the close button on one line. */
.site-modal-head.has-title {
	align-items: center;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--site-rule);
}

.site-modal-head.has-title .site-modal-title {
	flex: 1 1 auto;
	margin: 0;
	font-size: 18px;
}

.site-modal-head.has-title .site-modal-symbol {
	width: 44px;
	height: 44px;
	font-size: 20px;
}

.site-toast-host {
	position: fixed;
	inset-inline: 0;
	bottom: 24px;
	z-index: 1090;                          /* above an open Bootstrap modal (1055) */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	pointer-events: none;
}

.site-toast {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: min(520px, calc(100vw - 32px));
	padding: 12px 18px;
	border-radius: 12px;
	background: var(--site-teal-deep);
	box-shadow: var(--site-shadow-modal);
	color: #fff;
	font-size: var(--site-text-sm);
	font-weight: 600;
	animation: site-toast-in .25s ease both;
	pointer-events: auto;
}

.site-toast .ic {
	flex: none;
	font-size: 18px;
}

.site-toast.is-success .ic { color: #7fe0b1; }
.site-toast.is-warning .ic { color: #f5c842; }
.site-toast.is-danger .ic { color: #ff9a8f; }

.site-toast.is-leaving {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .25s ease, transform .25s ease;
}

@keyframes site-toast-in {
	from { opacity: 0; transform: translateY(8px); }
}

/* A map pin drawn with the sprite (Leaflet divIcon, contact page): the icon's own box
   is 40px, its point at the bottom centre (iconAnchor 20, 37). */
.leaflet-marker.map-marker {
	background: none;
	border: 0;
}

.leaflet-marker.map-marker .ic {
	width: 40px;
	height: 40px;
	color: var(--site-teal);
	filter: drop-shadow(0 2px 3px rgba(11, 43, 51, .35));
}

/* The services modal: its grid of cards sits on the page tint under the head. */
.site-modal.moe-modal .ss-modal-body {
	padding: 22px 20px 28px;
	background: var(--site-mist);
}

@media (max-width: 575.98px) {
	.site-modal .modal-dialog {
		margin: auto 12px;
	}
}


/* ==============================================================================
   GALLERY - shared by album and media (photo albums and the media library):
   album-section / album-grid / album-card (-cover/-body/-name/-meta), tile-name for an
   album with no cover, photo-grid / photo-card (-cap, -anon, -missing), tag-list / tag.
   ============================================================================== */
.album-section {
	margin-bottom: 44px;
}
.album-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	grid-auto-rows: 1fr;
	gap: 16px;
}
.album-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--site-rule);
	border-radius: 14px;
	background: var(--bs-body-bg);
	overflow: hidden;
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease;
}
.album-card:hover {
	border-color: var(--site-teal);
	transform: translateY(-2px);
	transition: border-color .2s ease, transform .2s ease;
}
.album-card-cover {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bs-body-bg);
}
.album-card-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tile-name {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 18px;
	background-image: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .13) 0%,
	rgba(var(--site-teal-rgb), .05) 100%);
	color: var(--site-teal);
	text-align: center;
}
.tile-name span {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
[data-bs-theme="dark"] .tile-name {
	background-image: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .26) 0%,
	rgba(var(--site-teal-rgb), .10) 100%);
	color: #7FC3D6;
}
.album-card-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px 16px;
}
.album-card-name {
	margin: 0;
	color: var(--site-ink);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.album-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 6px;
	color: var(--site-muted);
	font-size: 12.5px;
}
.photo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	grid-auto-rows: 1fr;
	gap: 14px;
}
.photo-card {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	overflow: hidden;
	background: var(--bs-body-bg);
	border: 1px solid var(--site-rule);
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease;
}
.photo-card:hover {
	border-color: var(--site-teal);
	transform: translateY(-2px);
	transition: border-color .2s ease, transform .2s ease;
}
.photo-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.photo-cap {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 24px 12px 10px;
	background: linear-gradient(to top,
	rgba(5, 27, 34, .88) 0%,
	rgba(5, 27, 34, .55) 55%,
	rgba(5, 27, 34, 0) 100%);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.photo-missing {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	background-image: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .13) 0%,
	rgba(var(--site-teal-rgb), .05) 100%);
	color: var(--site-teal);
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	overflow: hidden;
}
[data-bs-theme="dark"] .photo-missing {
	background-image: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .26) 0%,
	rgba(var(--site-teal-rgb), .10) 100%);
	color: #7FC3D6;
}
.photo-anon .ic {
	display: block;
	font-size: 30px;
	color: inherit;
	opacity: .55;
}
@media (max-width: 575.98px) {
	.photo-grid {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}
}
@media (prefers-reduced-motion: reduce) {
	.album-card:hover,
	.photo-card:hover {
		transform: none;
	}
}
.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}
.tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 26px;
	padding: 0 11px;
	border-radius: 999px;
	background: rgba(var(--site-teal-rgb), .09);
	color: var(--site-teal);
	font-size: 12px;
	font-weight: 600;
}
.tag .ic {
	font-size: 10px;
	color: inherit;
}


/* ==============================================================================
   BOOKS - shared by zawity and manaheg (book libraries): shelf / book-card
   (-body/-title/-meta), cover-fallback + cover-title for a book with no cover image,
   filter-bar (-field/-label/-input/-select/-actions), the in-page reader (reader,
   -head/-title/-actions/-frame), action-btn (+ -quiet) and attach-bar-btns.
   ============================================================================== */
/* A book's cover box: portrait 3/4, the picture fills it. */
.book-cover {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--bs-body-bg);
}
.book-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
	padding: 18px 20px;
	margin: 0 0 20px;
	border: 1px solid var(--site-rule);
	border-radius: 14px;
	background: var(--bs-body-bg);
}
.filter-bar-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	flex: 1 1 180px;
}
.filter-bar-label {
	color: var(--site-muted);
	font-size: 12.5px;
	font-weight: 600;
}
.filter-bar-select,
.filter-bar-input {
	width: 100%;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var(--site-rule);
	border-radius: 10px;
	background: var(--bs-body-bg);
	color: var(--site-ink);
	font-size: 13.5px;
	font-family: inherit;
	transition: border-color .2s ease;
}
.filter-bar-select {
	appearance: none;
	-webkit-appearance: none;
	padding-inline-end: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23697A8D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: calc(100% - 14px) center;
	background-size: 12px 8px;
	background-repeat: no-repeat;
}
[dir="rtl"] .filter-bar-select {
	background-position: 14px center;
}
[data-bs-theme="dark"] .filter-bar-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23A8B4C4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.filter-bar-select:disabled {
	opacity: .55;
	cursor: not-allowed;
}
.filter-bar-select:focus,
.filter-bar-input:focus {
	outline: none;
	border-color: var(--site-teal);
	box-shadow: 0 0 0 3px rgba(var(--site-teal-rgb), .14);
}
.filter-bar-actions {
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
}
.action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: var(--site-teal-deep);
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.action-btn:hover {
	background: var(--site-teal);
	color: #fff;
}
.action-btn-quiet {
	background: transparent;
	border-color: var(--site-rule);
	color: var(--site-muted);
}
.action-btn-quiet:hover {
	background: transparent;
	border-color: var(--site-teal);
	color: var(--site-teal);
}
[data-bs-theme="dark"] .action-btn:hover {
	background: var(--site-teal-deep);
	color: #fff;
}
.shelf {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	grid-auto-rows: 1fr;
	gap: 16px;
}
.book-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--site-rule);
	border-radius: 14px;
	background: var(--bs-body-bg);
	overflow: hidden;
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease;
}
.book-card:hover {
	border-color: var(--site-teal);
	transform: translateY(-2px);
	transition: border-color .2s ease, transform .2s ease;
}
.cover-title {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 14px;
	background-color: var(--bs-body-bg);
	background-image: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .13) 0%,
	rgba(var(--site-teal-rgb), .05) 100%);
	color: var(--site-teal);
	text-align: center;
}
.cover-title span {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
[data-bs-theme="dark"] .cover-title {
	background-image: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .26) 0%,
	rgba(var(--site-teal-rgb), .10) 100%);
	color: #7FC3D6;
}
.book-card-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 14px 14px;
}
.book-card-title {
	margin: 0;
	color: var(--site-ink);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.book-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	color: var(--site-muted);
	font-size: 12px;
}
@media (max-width: 575.98px) {
	.shelf {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}
}
@media (prefers-reduced-motion: reduce) {
	.book-card:hover {
		transform: none;
	}
}
@media (max-width: 767.98px) {
	.reader-frame iframe {
		height: 60vh;
		min-height: 360px;
	}
	.filter-bar-actions {
		flex: 1 1 100%;
	}
	.action-btn {
		flex: 1 1 auto;
	}
}
.cover-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	min-height: 280px;
	padding: 20px 16px;
	border-radius: 10px;
	background-color: var(--bs-body-bg);
	background-image: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .13) 0%,
	rgba(var(--site-teal-rgb), .05) 100%);
	color: var(--site-teal);
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	overflow-wrap: anywhere;
}
[data-bs-theme="dark"] .cover-fallback {
	background-image: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .26) 0%,
	rgba(var(--site-teal-rgb), .10) 100%);
	color: #7FC3D6;
}
.attach-bar-btns {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.reader {
	max-width: 1100px;
	margin: 0 auto;
	border-radius: 18px;
	overflow: hidden;
	background: var(--bs-body-bg);
	border: 1px solid var(--site-rule);
	padding: 20px;
}
.reader-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}
.reader-title {
	margin: 0;
	color: var(--site-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
.reader-frame {
	overflow: hidden;
	border: 1px solid var(--site-rule);
	border-radius: 14px;
	background: var(--bs-body-bg);
}
.reader-frame iframe {
	display: block;
	width: 100%;
	height: 78vh;
	min-height: 520px;
	border: 0;
}
.reader-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}


/* ==============================================================================
   LOGO CARDS - governorates and overseas offices: a centred card, a logo or flag
   (logo-card-media) over a title. logo-grid, .is-centered when there are few.
   ============================================================================== */
.logo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	grid-auto-rows: 1fr;
	gap: 16px;
}
.logo-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	height: 100%;
	padding: 22px 16px;
	border: 1px solid var(--site-rule);
	border-radius: 14px;
	background: var(--site-surface);
	text-align: center;
	text-decoration: none;
	transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.logo-card:hover,
.logo-card:focus-visible {
	border-color: var(--site-teal);
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(11, 43, 51, .10);
	text-decoration: none;
	transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
[data-bs-theme="dark"] .logo-card:hover,
[data-bs-theme="dark"] .logo-card:focus-visible {
	box-shadow: 0 12px 26px rgba(0, 0, 0, .45);
}
.logo-card:focus-visible {
	outline: 3px solid rgba(var(--site-teal-rgb), .55);
	outline-offset: 2px;
}
.logo-card-media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100px;
}
.logo-card-media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform .25s ease;
}
.logo-card:hover .logo-card-media img {
	transform: scale(1.05);
}
.logo-card-title {
	color: var(--site-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}
.logo-card:hover .logo-card-title {
	color: var(--site-teal);
}
@media (max-width: 767.98px) {
	.logo-grid {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		gap: 12px;
	}
	.logo-card-media {
		height: 76px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.logo-card:hover,
	.logo-card:focus-visible {
		transform: none;
	}
	.logo-card:hover .logo-card-media img {
		transform: none;
	}
	.logo-card,
	.logo-card-media img {
		transition: none;
	}
}
/* Few cards (the overseas offices): fixed-width columns, centred. */
.logo-grid.is-centered {
	grid-template-columns: repeat(auto-fill, minmax(260px, 320px));
	justify-content: center;
}


/* ==== module: mazaya ================================================================
   Benefits/offers: photo category tiles with stats, offer picture cards, related grid.
   Only what no other module has; every rule is scoped under .page-mazaya (set on the
   module's page-band). Shared parts use the components above. */
.page-mazaya .tile-title {
	position: absolute;
	inset: 0;
	background-color: var(--bs-body-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 18px;
	background-image: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .13) 0%,
	rgba(var(--site-teal-rgb), .05) 100%);
	color: var(--site-teal);
	text-align: center;
}
.page-mazaya .tile-title span {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
[data-bs-theme="dark"] .page-mazaya .tile-title {
	background-image: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .26) 0%,
	rgba(var(--site-teal-rgb), .10) 100%);
	color: #7FC3D6;
}
.page-mazaya .cat-tile:hover .tile-title,
.page-mazaya .offer-card:hover .tile-title {
	background-image: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .19) 0%,
	rgba(var(--site-teal-rgb), .08) 100%);
}
@media (prefers-reduced-motion: reduce) {
	.page-mazaya .cat-tile:hover,
	.page-mazaya .offer-card:hover {
		transform: none;
	}
}
.page-mazaya .cat-tile {
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0,0,0,.02);
	transition: transform .25s ease, box-shadow .25s ease;
}
.page-mazaya .cat-tile:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 30px rgba(0,0,0,.12);
}
.page-mazaya .cat-tile-thumb {
	position: relative;
	height: 170px;
	overflow: hidden;
	background: radial-gradient(ellipse at 50% 40%, #fff3cd 0%, #ffd580 60%, #ffb300 100%);
}
.page-mazaya .cat-tile-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.page-mazaya .cat-tile:hover .cat-tile-thumb img {
	transform: scale(1.06);
}
.page-mazaya .cat-tile-thumb.no-img {
	display: flex;
	align-items: center;
	justify-content: center;
}
.page-mazaya .cat-tile-thumb.no-img::after {
	content: '\e838';
	font-family: 'Flaticon';
	font-size: 56px;
	color: rgba(255,168,0,.6);
}
.page-mazaya .cat-tile-dim {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.02) 55%);
}
.page-mazaya .cat-tile-stats {
	position: absolute;
	bottom: 12px;
	right: 14px;
	left: 14px;
	display: flex;
	gap: 10px;
	z-index: 2;
}
.page-mazaya .stat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	background: rgba(255,255,255,.18);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	padding: 4px 10px;
	border-radius: 20px;
}
.page-mazaya .tile-title ~ .cat-tile-stats .stat,
.page-mazaya .cat-tile-thumb:has(.tile-title) .stat {
	background: var(--site-teal-deep);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.page-mazaya .stat .ic {
	font-size: 13px;
}
.page-mazaya .cat-tile-info {
	padding: 14px 16px 16px;
}
.page-mazaya .cat-tile-title {
	font-size: 15px;
	font-weight: 700;
	color: #1a1a2e;
	margin: 0 0 4px;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.page-mazaya .cat-tile-desc {
	font-size: 13px;
	color: #8b8fa3;
	margin: 0;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 20px;
}
.page-mazaya .offer-card {
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0,0,0,.02);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.page-mazaya .offer-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 28px rgba(0,0,0,.1);
}
.page-mazaya .offer-thumb-link {
	display: block;
	text-decoration: none;
}
.page-mazaya .offer-thumb {
	position: relative;
	height: 160px;
	overflow: hidden;
	background: linear-gradient(135deg, #f0f4fa 0%, #e4e8f0 100%);
}
.page-mazaya .offer-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.page-mazaya .offer-card:hover .offer-thumb img {
	transform: scale(1.05);
}
.page-mazaya .offer-thumb .no-img {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.page-mazaya .offer-thumb .no-img::after {
	content: '\e838';
	font-family: 'Flaticon';
	font-size: 40px;
	color: rgba(0,0,0,.08);
}
.page-mazaya .offer-type {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color: #fff;
	z-index: 2;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.page-mazaya .offer-type-page {
	background: rgba(0,158,247,.75);
}
.page-mazaya .offer-type-file {
	background: rgba(11,183,131,.75);
}
.page-mazaya .offer-type-link {
	background: rgba(137,80,252,.75);
}
.page-mazaya .offer-body {
	padding: 14px 16px 16px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.page-mazaya .offer-title {
	display: -webkit-box;
	font-size: 14.5px;
	font-weight: 700;
	color: #1a1a2e;
	margin-bottom: 6px;
	line-height: 1.55;
	text-decoration: none;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .2s;
}
.page-mazaya .offer-title:hover {
	color: var(--bs-primary, #3699ff);
}
.page-mazaya .offer-excerpt {
	font-size: 13px;
	color: #8b8fa3;
	margin: 0 0 10px;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.page-mazaya .offer-meta {
	display: flex;
	gap: 14px;
	font-size: 12px;
	color: #a1a5b7;
	margin-top: auto;
}
.page-mazaya .offer-meta span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.page-mazaya .offer-meta .ic {
	font-size: 13px;
}
.page-mazaya .related-item {
	padding: 10px 0;
	transition: padding-right .2s;
}
.page-mazaya .related-item + .related-item {
	border-top: 1px dashed #ebedf3;
}
.page-mazaya .related-item:hover {
	padding-right: 6px;
}
.page-mazaya .related-title {
	display: -webkit-box;
	font-size: 13.5px;
	font-weight: 600;
	color: #3f4254;
	line-height: 1.55;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .2s;
}
.page-mazaya .related-item:hover .related-title {
	color: var(--bs-primary, #3699ff);
}
.page-mazaya .related-date {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: #a1a5b7;
	margin-top: 4px;
}
.page-mazaya .related-date .ic {
	font-size: 12px;
}
[data-bs-theme="dark"] .page-mazaya .cat-tile {
	background: #1e2433;
	box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
[data-bs-theme="dark"] .page-mazaya .cat-tile:hover {
	box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
[data-bs-theme="dark"] .page-mazaya .cat-tile-title {
	color: #e2e8f0;
}
[data-bs-theme="dark"] .page-mazaya .cat-tile-desc {
	color: #6b7280;
}
[data-bs-theme="dark"] .page-mazaya .offer-card {
	background: #1e2433;
	box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
[data-bs-theme="dark"] .page-mazaya .offer-card:hover {
	box-shadow: 0 8px 28px rgba(0,0,0,.4);
}
[data-bs-theme="dark"] .page-mazaya .offer-thumb {
	background: linear-gradient(135deg, #252d3a 0%, #1e2433 100%);
}
[data-bs-theme="dark"] .page-mazaya .offer-thumb .no-img::after {
	color: rgba(255,255,255,.06);
}
[data-bs-theme="dark"] .page-mazaya .offer-title {
	color: #e2e8f0;
}
[data-bs-theme="dark"] .page-mazaya .offer-excerpt {
	color: #6b7280;
}
[data-bs-theme="dark"] .page-mazaya .offer-meta {
	color: #6b7280;
}
[data-bs-theme="dark"] .page-mazaya .related-item + .related-item {
	border-top-color: rgba(255,255,255,.06);
}
[data-bs-theme="dark"] .page-mazaya .related-title {
	color: #d1d5db;
}
.page-mazaya .related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	grid-auto-rows: 1fr;
	gap: 14px;
}
.page-mazaya .related-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px;
	border: 1px solid var(--site-rule);
	border-radius: 14px;
	background: var(--bs-body-bg);
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease;
}
.page-mazaya .related-item:hover {
	border-color: var(--site-teal);
	transform: translateY(-2px);
	transition: border-color .2s ease, transform .2s ease;
}
.page-mazaya .related-title {
	color: var(--site-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.page-mazaya .related-date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	color: var(--site-muted);
	font-size: 12.5px;
}
.page-mazaya .related-date .ic {
	font-size: 11px;
	color: inherit;
}
@media (prefers-reduced-motion: reduce) {
	.page-mazaya .related-item:hover {
		transform: none;
	}
}

/* ==== module: topics ================================================================
   News: photo section cards, the lead story (feature), the masonry of story cards, the archive's story rows and month select, article lede and credits.
   Only what no other module has; every rule is scoped under .page-topics (set on the
   module's page-band). Shared parts use the components above. */
.page-topics .masonry {
	column-count: 3; column-gap: 1.5rem;
}
@media (max-width: 991px) {
	.page-topics .masonry {
		column-count: 2;
	}
}
@media (max-width: 575px) {
	.page-topics .masonry {
		column-count: 1;
	}
}
.page-topics .masonry-item {
	break-inside: avoid; margin-bottom: 1.5rem;
}
.page-topics .photo-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	grid-auto-rows: 1fr;
	gap: 14px;
	margin-bottom: 36px;
}
.page-topics .photo-cat {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 14px;
	overflow: hidden;
	background: var(--bs-body-bg);
	border: 1px solid var(--site-rule);
	text-decoration: none;
}
.page-topics .photo-cat,
.page-topics .photo-cat:hover {
	transition: border-color .25s ease, transform .25s ease;
}
.page-topics .photo-cat:hover {
	border-color: var(--site-teal);
	transform: translateY(-3px);
}
.page-topics .photo-cat-media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--site-mist);
	overflow: hidden;
}
.page-topics .photo-cat-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.page-topics .photo-cat-media.is-title {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .13) 0%,
	rgba(var(--site-teal-rgb), .05) 100%);
	color: var(--site-teal);
}
.page-topics .photo-cat-media.is-title span {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
[data-bs-theme="dark"] .page-topics .photo-cat-media.is-title {
	background: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .26) 0%,
	rgba(var(--site-teal-rgb), .10) 100%);
}
.page-topics .photo-cat-body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 14px 16px 16px;
}
.page-topics .photo-cat-name {
	color: var(--site-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.page-topics .photo-cat:hover .photo-cat-name {
	color: var(--site-teal);
}
.page-topics .photo-cat-count {
	color: var(--site-teal);
	font-size: 12.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.page-topics .feature {
	display: flex;
	margin-bottom: 1.5rem;
	border-radius: 14px;
	overflow: hidden;
	background: var(--bs-body-bg);
	border: 1px solid var(--site-rule);
	text-decoration: none;
}
.page-topics .feature,
.page-topics .feature:hover {
	transition: border-color .25s ease, transform .25s ease;
}
.page-topics .feature:hover {
	border-color: var(--site-teal);
	transform: translateY(-3px);
}
.page-topics .feature-media {
	position: relative;
	flex: 0 0 52%;
	align-self: stretch;
	min-height: 300px;
	background: var(--site-mist);
	overflow: hidden;
}
.page-topics .feature-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.page-topics .feature:hover .feature-media img {
	transform: scale(1.03);
}
.page-topics .feature-media.is-empty img {
	width: 26%;
	height: auto;
	margin: auto;
	opacity: .45;
	object-fit: contain;
	transform: none;
}
.page-topics .feature:hover .feature-media.is-empty img {
	transform: none;
}
[data-bs-theme="dark"] .page-topics .feature-media.is-empty img {
	filter: invert(.92) hue-rotate(180deg);
	opacity: .3;
}
.page-topics .feature-media.is-empty {
	background: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .13) 0%,
	rgba(var(--site-teal-rgb), .05) 100%);
}
[data-bs-theme="dark"] .page-topics .feature-media.is-empty {
	background: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .26) 0%,
	rgba(var(--site-teal-rgb), .10) 100%);
}
.page-topics .feature-media.is-title {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 34px 32px;
	background: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .13) 0%,
	rgba(var(--site-teal-rgb), .05) 100%);
	color: var(--site-teal);
}
[data-bs-theme="dark"] .page-topics .feature-media.is-title {
	background: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .26) 0%,
	rgba(var(--site-teal-rgb), .10) 100%);
}
.page-topics .feature-tile-title {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.6;
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.page-topics .feature:hover .feature-tile-title {
	color: var(--site-teal);
}
@media (max-width: 767.98px) {
	.page-topics .feature-tile-title {
		font-size: 18px;
	}
	.page-topics .feature-media.is-title {
		padding: 24px 18px;
	}
}
.page-topics .feature-badge {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-start: 14px;
	z-index: 1;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--site-teal);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
}
[data-bs-theme="dark"] .page-topics .feature-badge {
	background: var(--site-teal-deep);
}
.page-topics .feature-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 30px 32px;
}
.page-topics .feature-title {
	color: var(--site-ink);
	font-size: 23px;
	font-weight: 800;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.page-topics .feature:hover .feature-title {
	color: var(--site-teal);
}
.page-topics .feature-excerpt {
	color: var(--site-muted);
	font-size: 14.5px;
	line-height: 1.95;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.page-topics .feature-read {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	color: var(--site-teal);
	font-size: 14px;
	font-weight: 600;
}
[dir="rtl"] .page-topics .feature-read .ic {
	transform: scaleX(-1);
}
@media (max-width: 767.98px) {
	.page-topics .feature {
		flex-direction: column;
	}
	.page-topics .feature-media {
		flex: 0 0 auto;
		min-height: 0;
		aspect-ratio: 16 / 9;
	}
	.page-topics .feature-body {
		padding: 20px 18px;
	}
	.page-topics .feature-title {
		font-size: 19px;
	}
	.page-topics .feature-excerpt {
		-webkit-line-clamp: 4;
	}
}
@media (prefers-reduced-motion: reduce) {
	.page-topics .feature:hover {
		transform: none;
	}
	.page-topics .feature:hover .feature-media img {
		transform: none;
	}
}
.page-topics .story-card {
	display: flex;
	flex-direction: column;
	border-radius: 14px;
	overflow: hidden;
	background: var(--bs-body-bg);
	border: 1px solid var(--site-rule);
	text-decoration: none;
}
.page-topics .story-card,
.page-topics .story-card:hover {
	transition: border-color .25s ease, transform .25s ease;
}
.page-topics .story-card:hover {
	border-color: var(--site-teal);
	transform: translateY(-3px);
}
.page-topics .story-card-media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--site-mist);
	overflow: hidden;
}
.page-topics .story-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.page-topics .story-card:hover .story-card-media img {
	transform: scale(1.04);
}
.page-topics .story-card-media.is-empty img,
.page-topics .photo-cat-media.is-empty img {
	width: 46%;
	height: auto;
	margin: auto;
	position: absolute;
	inset: 0;
	opacity: .5;
	object-fit: contain;
}
[data-bs-theme="dark"] .page-topics .story-card-media.is-empty img,
[data-bs-theme="dark"] .page-topics .photo-cat-media.is-empty img {
	filter: invert(.92) hue-rotate(180deg);
	opacity: .35;
}
.page-topics .story-card-date {
	position: absolute;
	inset-block-end: 10px;
	inset-inline-start: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(5, 27, 34, .72);
	color: #fff;
	font-size: 11.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	backdrop-filter: blur(4px);
}
.page-topics .story-card-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	padding: 14px 16px 16px;
}
.page-topics .story-card-title {
	color: var(--site-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.page-topics .story-card:hover .story-card-title {
	color: var(--site-teal);
}
.page-topics .story-card-excerpt {
	color: var(--site-muted);
	font-size: 13.5px;
	line-height: 1.85;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.page-topics .story-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 14px;
	margin-top: auto;
	color: var(--site-muted);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}
.page-topics .story-card-meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.page-topics .story-card-meta .ic {
	font-size: 12px;
}
.page-topics .is-lead .story-card-media {
	aspect-ratio: 21 / 9;
}
.page-topics .is-lead .story-card-title {
	font-size: 21px;
	-webkit-line-clamp: 2;
}
.page-topics .is-lead .story-card-excerpt {
	color: var(--site-muted);
	font-size: 14px;
	line-height: 1.9;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.page-topics .story-card-media.is-title {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px 20px;
	background: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .13) 0%,
	rgba(var(--site-teal-rgb), .05) 100%);
	color: var(--site-teal);
}
.page-topics .story-card-media.is-title .tile-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.65;
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.page-topics .story-card:hover .story-card-media.is-title {
	background: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .19) 0%,
	rgba(var(--site-teal-rgb), .08) 100%);
}
[data-bs-theme="dark"] .page-topics .story-card-media.is-title {
	background: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .26) 0%,
	rgba(var(--site-teal-rgb), .10) 100%);
}
.page-topics .masonry-item:nth-child(4n + 4) .story-card-media.is-title {
	aspect-ratio: 16 / 9;
}
.page-topics .story-card-media.is-title .story-card-date {
	background: var(--site-teal-deep);
}
.page-topics .masonry-item:nth-child(3n + 1) .story-card-media {
	aspect-ratio: 4 / 3;
}
.page-topics .masonry-item:nth-child(5n + 2) .story-card-media {
	aspect-ratio: 1 / 1;
}
.page-topics .masonry-item:nth-child(7n + 3) .story-card-media {
	aspect-ratio: 3 / 2;
}
.page-topics .masonry-item:nth-child(4n + 4) .story-card-media {
	aspect-ratio: 21 / 9;
}
.page-topics .masonry-item:nth-child(3n + 2) .story-card-excerpt {
	-webkit-line-clamp: 3;
}
.page-topics .masonry-item:nth-child(5n + 4) .story-card-excerpt {
	-webkit-line-clamp: 4;
}
@media (max-width: 575.98px) {
	.page-topics .masonry-item:nth-child(n) .story-card-media {
		aspect-ratio: 16 / 9;
	}
	.page-topics .masonry-item:nth-child(n) .story-card-excerpt {
		-webkit-line-clamp: 2;
	}
}
.page-topics .article-lede {
	max-width: 68ch;
	margin: 0 auto 22px;
	padding-inline-start: 14px;
	border-inline-start: 3px solid var(--site-teal);
	color: var(--site-ink);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.9;
	overflow-wrap: anywhere;
}
.page-topics .credit-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	max-width: 68ch;
	margin: 26px auto 0;
	padding-top: 18px;
	border-top: 1px solid var(--site-rule);
}
.page-topics .credit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--site-muted);
	font-size: 13px;
}
.page-topics .credit strong {
	color: var(--site-ink);
	font-weight: 700;
}
.page-topics .credit .ic {
	color: var(--site-teal);
	font-size: 12.5px;
}
.page-topics .toolbar-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--site-muted);
	font-size: 13.5px;
	font-weight: 600;
}
.page-topics .toolbar-label .ic {
	color: var(--site-teal);
}
.page-topics .toolbar-select {
	min-width: 200px;
	padding: 9px 14px;
	border-radius: 10px;
	border: 1px solid var(--site-rule);
	background: var(--bs-body-bg);
	color: var(--site-ink);
	font-size: 14px;
}
.page-topics .toolbar-select:focus {
	outline: 0;
	border-color: var(--site-teal);
	box-shadow: 0 0 0 3px rgba(var(--site-teal-rgb), .18);
}
.page-topics .story-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.page-topics .story-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	border-radius: 12px;
	background: var(--bs-body-bg);
	border: 1px solid var(--site-rule);
	text-decoration: none;
}
.page-topics .story-row,
.page-topics .story-row:hover {
	transition: border-color .25s ease, transform .25s ease;
}
.page-topics .story-row:hover {
	border-color: var(--site-teal);
	transform: translateY(-2px);
}
.page-topics .story-row-date {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 62px;
	padding: 8px 0;
	border-radius: 10px;
	background: var(--site-mist);
	color: var(--site-teal);
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}
.page-topics .story-row-day {
	font-size: 18px;
	font-weight: 800;
}
.page-topics .story-row-month {
	font-size: 11px;
	font-weight: 600;
	opacity: .85;
}
.page-topics .story-row-title {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--site-ink);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.7;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.page-topics .story-row:hover .story-row-title {
	color: var(--site-teal);
}
.page-topics .story-row-views {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--site-muted);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
	.page-topics .story-card:hover,
	.page-topics .photo-cat:hover,
	.page-topics .story-row:hover {
		transform: none;
	}
	.page-topics .story-card:hover .story-card-media img {
		transform: none;
	}
}
@media (max-width: 767.98px) {
	.page-topics .is-lead .story-card-title {
		font-size: 18px;
	}
}

/* ==== module: library ===============================================================
   Library: photo category cards, the 3D book (stage/spine/front), the document page (cover, facts, viewer frame, states), read/download buttons.
   Only what no other module has; every rule is scoped under .page-library (set on the
   module's page-band). Shared parts use the components above. */
.page-library .lb-cat-card {
	display: block;
	height: 100%;
	border-radius: 14px;
	overflow: hidden;
	background: var(--bs-body-bg);
	border: 1px solid var(--site-rule);
	text-decoration: none;
}
.page-library .lb-cat-card,
.page-library .lb-cat-card:hover {
	transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.page-library .lb-cat-card:hover {
	border-color: var(--site-teal);
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(11, 43, 51, .10);
}
[data-bs-theme="dark"] .page-library .lb-cat-card:hover {
	box-shadow: 0 12px 26px rgba(0, 0, 0, .45);
}
.page-library .lb-cat-card:focus-visible,
.page-library .lb-book-card a:focus-visible {
	outline: 3px solid rgba(var(--site-teal-rgb), .55);
	outline-offset: 2px;
	border-color: var(--site-teal);
}
.page-library .lb-cat-thumb {
	position: relative;
	height: 190px;
	overflow: hidden;
	background: var(--site-teal-deep);
}
.page-library .lb-cat-thumb.is-noimg {
	background: transparent;
}
.page-library .lb-cat-thumb.is-noimg .lb-cat-scrim {
	display: none;
}
.page-library .lb-cat-thumb.is-noimg .lb-cat-count {
	background: var(--site-teal-deep);
}
[data-bs-theme="dark"] .page-library .lb-cat-thumb.is-noimg .lb-cat-count {
	background: rgba(var(--site-teal-rgb), .9);
}
.page-library .lb-cat-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.page-library .lb-cat-card:hover .lb-cat-thumb img {
	transform: scale(1.05);
}
.page-library .lb-cat-scrim {
	position: absolute;
	inset: 0;
	background: rgba(11, 43, 51, .22);
	pointer-events: none;
}
.page-library .lb-cat-count {
	position: absolute;
	top: 14px;
	inset-inline-start: 14px;
	z-index: 2;
	padding: 5px 13px;
	border-radius: 999px;
	background: rgba(11, 43, 51, .82);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}
.page-library .lb-cat-info {
	padding: 18px 20px 20px;
}
.page-library .lb-cat-title {
	margin: 0;
	color: var(--site-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.55;
}
.page-library .lb-cat-desc {
	margin: 8px 0 0;
	color: var(--site-muted);
	font-size: 14px;
	line-height: 1.75;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.page-library .lb-cat-desc:empty {
	display: none;
}
.page-library .lb-cat-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 12px 0 0;
	color: var(--site-muted);
	font-size: 12.5px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.page-library .lb-cat-meta .ic {
	font-size: 14px;
}
.page-library .lb-cat-noimg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--site-teal-deep);
	color: rgba(255, 255, 255, .28);
	font-size: 40px;
}
.page-library .lb-book-card {
	border-radius: 14px;
	background: var(--bs-body-bg);
	border: 1px solid var(--site-rule);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.page-library .lb-book-card,
.page-library .lb-book-card:hover {
	transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.page-library .lb-book-card:hover {
	border-color: var(--site-teal);
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(11, 43, 51, .10);
}
[data-bs-theme="dark"] .page-library .lb-book-card:hover {
	box-shadow: 0 12px 26px rgba(0, 0, 0, .45);
}
.page-library .lb-book-stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 250px;
	background: var(--site-mist);
	perspective: 900px;
	flex-shrink: 0;
}
[data-bs-theme="dark"] .page-library .lb-book-stage {
	background: rgba(255, 255, 255, .04);
}
.page-library .lb-book-3d {
	position: relative;
	display: block;
	width: 160px;
	height: 220px;
	transform-style: preserve-3d;
	transform: rotateY(14deg);
	transition: transform .4s ease;
	text-decoration: none;
}
.page-library .lb-book-card:hover .lb-book-3d {
	transform: rotateY(6deg);
}
.page-library .lb-book-front {
	position: absolute;
	inset: 0;
	background: var(--bs-body-bg);
	border-radius: 6px 2px 2px 6px;
	overflow: hidden;
	box-shadow: -2px 2px 10px rgba(11, 43, 51, .10);
	transform: translateZ(12px);
}
.page-library .lb-book-front img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.page-library .lb-book-front.lb-no-cover,
.page-library .lb-book-front > .lb-no-cover {
	background: var(--site-teal-deep);
	display: flex;
	align-items: center;
	justify-content: center;
}
.page-library .lb-book-front > .lb-no-cover {
	position: absolute;
	inset: 0;
	color: rgba(255, 255, 255, .3);
	font-size: 40px;
}
.page-library .lb-book-front.lb-no-cover::after {
	content: '';
	width: 48px;
	height: 56px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.45'%3E%3Cpath d='M4 19.5A2.5 2.5 0 016.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}
.page-library .lb-cover-title {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	padding: 18px 14px;
	background: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .13) 0%,
	rgba(var(--site-teal-rgb), .05) 100%);
	color: var(--site-teal);
	text-align: center;
	overflow: hidden;
}
[data-bs-theme="dark"] .page-library .lb-cover-title {
	background: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .26) 0%,
	rgba(var(--site-teal-rgb), .10) 100%);
	color: #7FC3D6;
}
.page-library .lb-cover-title::before {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: 6px;
	background: rgba(var(--site-teal-rgb), .22);
}
.page-library .lb-cover-title-text {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.page-library .lb-cover-title-rule {
	width: 28px;
	height: 2px;
	margin: 0 auto;
	background: rgba(var(--site-teal-rgb), .40);
	flex: 0 0 auto;
}
.page-library .lb-cover-title.is-long .lb-cover-title-text {
	font-size: 11.5px;
	-webkit-line-clamp: 7;
}
.page-library .lb-cover-title.is-short .lb-cover-title-text {
	font-size: 15px;
}
.page-library .lb-cat-nameonly {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .13) 0%,
	rgba(var(--site-teal-rgb), .05) 100%);
	color: var(--site-teal);
	text-align: center;
}
[data-bs-theme="dark"] .page-library .lb-cat-nameonly {
	background: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .26) 0%,
	rgba(var(--site-teal-rgb), .10) 100%);
	color: #7FC3D6;
}
.page-library .lb-cat-nameonly span {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	padding: 0 6px;
}
.page-library .lb-book-spine {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 24px;
	background: var(--site-rule);
	transform: rotateY(-90deg) translateZ(0px) translateX(12px);
	border-radius: 0 2px 2px 0;
}
.page-library .lb-book-pages {
	position: absolute;
	top: 3px;
	bottom: 3px;
	right: 0;
	width: 24px;
	background: repeating-linear-gradient(
	90deg,
	var(--bs-body-bg) 0px,
	var(--bs-body-bg) 1px,
	var(--site-rule) 1px,
	var(--site-rule) 2px
	);
	transform: rotateY(-90deg) translateZ(12px) translateX(12px);
	border-radius: 2px 0 0 2px;
	border-top: 1px solid var(--site-rule);
	border-bottom: 1px solid var(--site-rule);
}
.page-library .lb-book-3d::after {
	content: '';
	position: absolute;
	bottom: -14px;
	left: 10%;
	width: 80%;
	height: 12px;
	background: radial-gradient(ellipse, rgba(11, 43, 51, .16) 0%, transparent 70%);
	border-radius: 50%;
	transform: translateZ(-14px);
}
[data-bs-theme="dark"] .page-library .lb-book-3d::after {
	background: radial-gradient(ellipse, rgba(0, 0, 0, .35) 0%, transparent 70%);
}
.page-library .lb-book-stage .lb-book-actions {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: rgba(11, 43, 51, .42);
	opacity: 0;
	transition: opacity .3s ease;
	z-index: 5;
}
.page-library .lb-book-card:hover .lb-book-actions,
.page-library .lb-book-card:focus-within .lb-book-actions {
	opacity: 1;
}
.page-library .lb-btn-read,
.page-library .lb-btn-dl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: #fff;
	font-size: 17px;
	background: rgba(11, 43, 51, .78);
	transition: background .2s, transform .25s;
	transform: translateY(10px);
	text-decoration: none;
}
.page-library .lb-book-card:hover .lb-btn-read,
.page-library .lb-book-card:hover .lb-btn-dl,
.page-library .lb-book-card:focus-within .lb-btn-read,
.page-library .lb-book-card:focus-within .lb-btn-dl {
	transform: translateY(0);
}
.page-library .lb-btn-read:hover,
.page-library .lb-btn-dl:hover {
	background: var(--site-teal);
	color: #fff;
}
.page-library .lb-book-body {
	padding: 16px 18px 18px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.page-library .lb-book-title {
	display: -webkit-box;
	font-size: 15px;
	font-weight: 700;
	color: var(--site-ink);
	margin-bottom: 6px;
	line-height: 1.6;
	text-decoration: none;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .2s;
}
.page-library .lb-book-title:hover {
	color: var(--site-teal);
}
.page-library .lb-book-author {
	font-size: 13px;
	color: var(--site-muted);
	margin-bottom: 10px;
}
.page-library .lb-book-author .ic {
	font-size: 14px;
}
.page-library .lb-book-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 12.5px;
	color: var(--site-muted);
	margin-top: auto;
	font-variant-numeric: tabular-nums;
}
.page-library .lb-book-meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.page-library .lb-book-meta .ic {
	font-size: 14px;
}
@media (prefers-reduced-motion: reduce) {
	.page-library .lb-cat-thumb img,
	.page-library .lb-book-3d,
	.page-library .lb-btn-read,
	.page-library .lb-btn-dl {
		transition: none;
		transform: none;
	}
	.page-library .lb-cat-card:hover,
	.page-library .lb-book-card:hover {
		transform: none;
	}
}
@media (max-width: 767.98px) {
	.page-library .lb-book-stage {
		height: 200px;
	}
	.page-library .lb-book-3d {
		width: 120px;
		height: 168px;
	}
}
.page-library .lb-doc-page {
	max-width: 1040px;
	margin-inline: auto;
}
.page-library .lb-hero-doc {
	padding-bottom: 26px;
}
.page-library .lb-hero-title-doc {
	font-size: clamp(24px, 14px + 2.2vw, 40px);
	max-width: 22ch;
	line-height: 1.35;
}
.page-library .lb-doc-head {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	padding: 26px;
	background: var(--bs-body-bg);
	border: 1px solid var(--site-rule);
	border-radius: 14px;
}
.page-library .lb-doc-cover {
	position: relative;
	flex: 0 0 auto;
	width: 170px;
	aspect-ratio: 3 / 4;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--site-rule);
	background: var(--site-mist);
}
.page-library .lb-doc-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.page-library .lb-doc-nocover {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--site-teal-deep);
	color: rgba(255, 255, 255, .3);
	font-size: 40px;
}
.page-library .lb-doc-facts {
	flex: 1 1 320px;
	min-width: 0;
}
.page-library .lb-doc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
	padding-top: 2px;
}
.page-library a.lb-chip-link:hover {
	background: rgba(var(--site-teal-rgb), .10);
	color: var(--site-teal);
}
.page-library .lb-doc-meta {
	margin: 0 0 18px;
}
.page-library .lb-doc-meta:empty {
	display: none;
}
.page-library .lb-doc-meta-row {
	display: flex;
	gap: 10px;
	padding: 7px 0;
	border-top: 1px solid var(--site-rule);
	font-size: 14px;
	max-width: 520px;
}
.page-library .lb-doc-meta-row:first-child {
	border-top: 0;
}
.page-library .lb-doc-meta dt {
	flex: 0 0 auto;
	min-width: 86px;
	color: var(--site-muted);
	font-weight: 600;
}
.page-library .lb-doc-meta dd {
	margin: 0;
	color: var(--site-ink);
	font-weight: 500;
}
.page-library .lb-doc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.page-library .lb-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.page-library .lb-btn,
.page-library .lb-btn:hover {
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.page-library .lb-btn .ic {
	font-size: 15px;
}
.page-library .lb-btn-primary {
	background: var(--site-teal);
	color: #fff;
}
.page-library .lb-btn-primary:hover {
	background: var(--site-teal-deep);
	color: #fff;
}
.page-library .lb-btn-ghost {
	background: transparent;
	border-color: var(--site-rule);
	color: var(--site-ink);
}
.page-library .lb-btn-ghost:hover {
	border-color: var(--site-teal);
	color: var(--site-teal);
}
.page-library .lb-btn-sm {
	padding: 8px 16px;
	font-size: 13px;
}
.page-library .lb-doc-sub {
	margin: 0;
	color: var(--site-ink);
	font-size: 17px;
	font-weight: 700;
}
.page-library .lb-doc-about,
.page-library .lb-doc-view,
.page-library .lb-doc-more {
	margin-top: 28px;
}
.page-library .lb-doc-about {
	padding: 24px 26px;
	background: var(--bs-body-bg);
	border: 1px solid var(--site-rule);
	border-radius: 14px;
}
.page-library .lb-doc-text {
	margin-top: 12px;
	color: var(--site-muted);
	font-size: 15px;
	line-height: 1.9;
}
.page-library .lb-doc-text :is(p, li):last-child {
	margin-bottom: 0;
}
.page-library .lb-doc-view-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.page-library .lb-doc-frame {
	border: 1px solid var(--site-rule);
	border-radius: 14px;
	overflow: hidden;
	background: var(--site-mist);
}
.page-library .lb-doc-iframe {
	display: block;
	width: 100%;
	height: min(78vh, 820px);
	min-height: 420px;
	border: 0;
}
.page-library .lb-doc-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	padding: 56px 24px;
	background: var(--bs-body-bg);
	border: 1px solid var(--site-rule);
	border-radius: 14px;
}
.page-library .lb-doc-state-icon {
	color: var(--site-muted);
	font-size: 38px;
	opacity: .55;
}
.page-library .lb-doc-state-title {
	margin: 0;
	max-width: 46ch;
	color: var(--site-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.8;
}
.page-library .lb-doc-more-all {
	margin-top: 20px;
}
@media (max-width: 575.98px) {
	.page-library .lb-doc-head {
		padding: 18px;
		gap: 18px;
	}
	.page-library .lb-doc-cover {
		width: 120px;
	}
	.page-library .lb-doc-title {
		font-size: 18px;
	}
	.page-library .lb-doc-about {
		padding: 18px;
	}
}
.page-library .lb-side-main {
	min-width: 0;
}

/* ==== module: events ================================================================
   Events: picture cards with a date badge, the filter bar, list/calendar/map panels, the event page (big date, facts with icons, map bar, next events).
   Only what no other module has; every rule is scoped under .page-events (set on the
   module's page-band). Shared parts use the components above. */
.page-events .ev-filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 20px;
	margin: 0 0 28px;
}
.page-events .ev-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	grid-auto-rows: 1fr;
	gap: 16px;
}
.page-events .ev-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 14px;
	overflow: hidden;
	background: var(--bs-body-bg);
	border: 1px solid var(--site-rule);
	text-decoration: none;
}
.page-events .ev-card,
.page-events .ev-card:hover {
	transition: border-color .25s ease, transform .25s ease;
}
.page-events .ev-card:hover {
	border-color: var(--site-teal);
	transform: translateY(-3px);
}
.page-events .ev-card-media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--site-mist);
	overflow: hidden;
}
.page-events .ev-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.page-events .ev-card-media.is-empty img {
	position: absolute;
	inset: 0;
	width: 42%;
	height: auto;
	margin: auto;
	opacity: .5;
	object-fit: contain;
}
[data-bs-theme="dark"] .page-events .ev-card-media.is-empty img {
	filter: invert(.92) hue-rotate(180deg);
	opacity: .35;
}
.page-events .ev-card-media.is-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	background: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .13) 0%,
	rgba(var(--site-teal-rgb), .05) 100%);
	color: var(--site-teal);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.page-events .ev-card-media.is-date .ev-bigday {
	font-size: 42px;
	font-weight: 800;
	letter-spacing: -.02em;
}
.page-events .ev-card-media.is-date .ev-bigmonth {
	font-size: 15px;
	font-weight: 700;
}
.page-events .ev-card-media.is-date .ev-bigyear {
	font-size: 12.5px;
	font-weight: 600;
	opacity: .75;
}
[data-bs-theme="dark"] .page-events .ev-card-media.is-date {
	background: linear-gradient(160deg,
	rgba(var(--site-teal-rgb), .26) 0%,
	rgba(var(--site-teal-rgb), .10) 100%);
}
.page-events .ev-card-media.is-blank {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--site-muted);
	font-size: 26px;
	opacity: .5;
}
.page-events .ev-card-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	padding: 14px 16px 16px;
}
.page-events .ev-card-title {
	color: var(--site-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.page-events .ev-card:hover .ev-card-title {
	color: var(--site-teal);
}
.page-events .ev-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 14px;
	margin-top: auto;
	color: var(--site-muted);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}
.page-events .ev-meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
}
.page-events .ev-meta .ic {
	font-size: 12px;
	flex: 0 0 auto;
}
.page-events .ev-meta .ev-ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.page-events .ev-card-date {
	position: absolute;
	inset-block-end: 10px;
	inset-inline-start: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(5, 27, 34, .72);
	color: #fff;
	font-size: 11.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	backdrop-filter: blur(4px);
}
.page-events .ev-next-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	grid-auto-rows: 1fr;
	gap: 14px;
	margin-bottom: 36px;
}
.page-events .ev-next {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding: 16px;
	border-radius: 14px;
	background: var(--bs-body-bg);
	border: 1px solid var(--site-rule);
	text-decoration: none;
}
.page-events .ev-next,
.page-events .ev-next:hover {
	transition: border-color .25s ease, transform .25s ease;
}
.page-events .ev-next:hover {
	border-color: var(--site-teal);
	transform: translateY(-3px);
}
.page-events .ev-next-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	flex: 1 1 auto;
}
.page-events .ev-next-title {
	color: var(--site-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.page-events .ev-next:hover .ev-next-title {
	color: var(--site-teal);
}
.page-events .ev-panel {
	padding: 20px;
	margin-bottom: 36px;
	border-radius: 14px;
	background: var(--bs-body-bg);
	border: 1px solid var(--site-rule);
}
.page-events .ev-map {
	height: 480px;
	border-radius: 12px;
	overflow: hidden;
}
.page-events .ev-pin {
	display: block;
	width: 22px;
	height: 22px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	background: var(--site-teal-deep);
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(5, 27, 34, .45);
}
.page-events .ev-pin::after {
	content: '';
	display: block;
	width: 7px;
	height: 7px;
	margin: 5.5px 0 0 5.5px;
	border-radius: 50%;
	background: #fff;
}
.page-events .ev-mapbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.page-events .ev-panel .fc {
	--fc-border-color: var(--site-rule);
	--fc-today-bg-color: rgba(var(--site-teal-rgb), .08);
	--fc-page-bg-color: transparent;
	--fc-neutral-bg-color: var(--site-mist);
	--fc-event-bg-color: var(--site-teal);
	--fc-event-border-color: var(--site-teal);
}
.page-events .ev-panel .fc .fc-toolbar-title {
	color: var(--site-ink);
	font-size: 17px;
	font-weight: 700;
}
.page-events .ev-panel .fc .fc-col-header-cell-cushion,
.page-events .ev-panel .fc .fc-daygrid-day-number {
	color: var(--site-muted);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
}
.page-events .ev-panel .fc .fc-button {
	background: var(--bs-body-bg);
	border: 1px solid var(--site-rule);
	color: var(--site-ink);
	font-size: 13px;
	font-weight: 600;
	padding: 7px 14px;
	box-shadow: none;
}
.page-events .ev-panel .fc .fc-button:hover {
	border-color: var(--site-teal);
	color: var(--site-teal);
	background: rgba(var(--site-teal-rgb), .07);
}
.page-events .ev-panel .fc .fc-button-active,
.page-events .ev-panel .fc .fc-button-primary:not(:disabled).fc-button-active {
	background: var(--site-teal-deep);
	border-color: var(--site-teal-deep);
	color: #fff;
}
.page-events .ev-panel .fc .fc-button:disabled {
	opacity: .45;
}
.page-events .ev-panel .fc-event {
	cursor: pointer;
	font-size: 12px;
	padding: 2px 6px;
}
[data-bs-theme="dark"] .page-events .ev-panel .fc {
	--fc-page-bg-color: transparent;
	--fc-neutral-bg-color: var(--site-mist);
}
.page-events .ev-event {
	max-width: 900px;
	margin: 0 auto;
	border-radius: 18px;
	overflow: hidden;
	background: var(--bs-body-bg);
	border: 1px solid var(--site-rule);
}
.page-events .ev-event-media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--site-mist);
}
.page-events .ev-event-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.page-events .ev-event-media.is-empty img {
	position: absolute;
	inset: 0;
	width: 30%;
	height: auto;
	margin: auto;
	opacity: .5;
	object-fit: contain;
}
[data-bs-theme="dark"] .page-events .ev-event-media.is-empty img {
	filter: invert(.92) hue-rotate(180deg);
	opacity: .35;
}
.page-events .ev-event-inner {
	padding: 28px 38px 26px;
}
.page-events .ev-event-head {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding-bottom: 20px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--site-rule);
}
.page-events .ev-event-title {
	margin: 0 0 12px;
	color: var(--site-ink);
	font-size: 25px;
	font-weight: 800;
	line-height: 1.5;
}
.page-events .ev-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	margin-bottom: 26px;
}
.page-events .ev-fact {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border-radius: 12px;
	background: var(--site-mist);
}
.page-events .ev-fact-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: rgba(var(--site-teal-rgb), .12);
	color: var(--site-teal);
	font-size: 16px;
}
.page-events .ev-fact-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.page-events .ev-fact-label {
	color: var(--site-muted);
	font-size: 12px;
}
.page-events .ev-fact-value {
	color: var(--site-ink);
	font-size: 14px;
	font-weight: 700;
	overflow-wrap: anywhere;
}
.page-events .ev-body {
	max-width: 68ch;
	margin: 0 auto;
	color: var(--site-ink);
	font-size: 15.5px;
	line-height: 2;
	overflow-wrap: anywhere;
}
.page-events .ev-body > *:first-child {
	margin-top: 0;
}
.page-events .ev-body > *:last-child {
	margin-bottom: 0;
}
.page-events .ev-body img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}
.page-events .ev-body a {
	color: var(--site-teal);
	text-decoration: underline;
	text-underline-offset: 3px;
}
[data-bs-theme="dark"] .page-events .ev-body [style*="color"] {
	color: inherit !important;
}
[data-bs-theme="dark"] .page-events .ev-body [style*="background"] {
	background: transparent !important;
}
[data-bs-theme="dark"] .page-events .ev-body a[style*="color"] {
	color: var(--site-teal) !important;
}
.page-events .ev-backbtn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: 10px;
	border: 1px solid var(--site-rule);
	background: var(--site-mist);
	color: var(--site-ink);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.page-events .ev-backbtn:hover {
	border-color: var(--site-teal);
	color: var(--site-teal);
	background: rgba(var(--site-teal-rgb), .07);
}
@media (max-width: 767.98px) {
	.page-events .ev-event-inner {
		padding: 22px 18px 20px;
	}
	.page-events .ev-event-title {
		font-size: 20px;
	}
	.page-events .ev-event-head {
		gap: 14px;
	}
	.page-events .ev-panel {
		padding: 14px;
	}
	.page-events .ev-map {
		height: 340px;
	}
	.page-events .ev-panel .fc .fc-toolbar {
		flex-direction: column;
		gap: 10px;
	}
	.page-events .ev-panel .fc .fc-button {
		padding: 6px 10px;
		font-size: 12px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.page-events .ev-card:hover,
	.page-events .ev-next:hover {
		transform: none;
	}
}
@media print {
	.page-events .ev-map {
		display: none;
	}
	.page-events .ev-event {
		border: 0;
		max-width: none;
	}
}
.page-events .ev-meta .ev-chip-cat {
	padding: 2px 9px;
	border-radius: 999px;
	background: rgba(0, 163, 154, .16);
	box-shadow: inset 0 0 0 1px rgba(0, 163, 154, .45);
	color: inherit;
	font-weight: 600;
	max-width: 14rem;
}
.page-events .ev-fact-link .ev-fact-value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 22rem;
}

/* ==== module: governemants ==========================================================
   Governorates: the panel with Oman's map behind the cards.
   Only what no other module has; every rule is scoped under .page-governemants (set on the
   module's page-band). Shared parts use the components above. */
.page-governemants .gv-panel {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--site-rule);
	border-radius: 18px;
	background: var(--site-surface);
	padding: 28px;
}
.page-governemants .gv-map {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: url("../../media/maps/oman.svg") no-repeat center center;
	background-size: 63%;
	opacity: .2;
	pointer-events: none;
}
[data-bs-theme="dark"] .page-governemants .gv-map {
	filter: invert(.92) hue-rotate(180deg);
	opacity: .14;
}
.page-governemants .gv-panel-inner {
	position: relative;
	z-index: 2;
}
@media (max-width: 767.98px) {
	.page-governemants .gv-panel {
		padding: 18px;
		border-radius: 14px;
	}
}

/* ==== module: bisat =================================================================
   Bisat (the land-allocation documents page): the numbered document list with download buttons.
   Only what no other module has; every rule is scoped under .page-bisat (set on the
   module's page-band). Shared parts use the components above. */
.page-bisat .bs-count {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 28px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(var(--site-teal-rgb), .09);
	color: var(--site-teal);
	font-size: 12.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
[data-bs-theme="dark"] .page-bisat .bs-count {
	background: rgba(var(--site-teal-rgb), .26);
}
.page-bisat .bs-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.page-bisat .bs-doc {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	border: 1px solid var(--site-rule);
	border-radius: 14px;
	background: var(--site-surface);
	transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.page-bisat .bs-doc:hover {
	border-color: var(--site-teal);
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(11, 43, 51, .10);
}
[data-bs-theme="dark"] .page-bisat .bs-doc:hover {
	box-shadow: 0 12px 26px rgba(0, 0, 0, .45);
}
.page-bisat .bs-num {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--site-mist);
	color: var(--site-muted);
	font-size: 12.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
[data-bs-theme="dark"] .page-bisat .bs-num {
	background: rgba(255, 255, 255, .06);
}
.page-bisat .bs-doc-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: rgba(var(--site-teal-rgb), .09);
	color: var(--site-teal);
}
[data-bs-theme="dark"] .page-bisat .bs-doc-icon {
	background: rgba(var(--site-teal-rgb), .26);
}
.page-bisat .bs-doc-icon .ic {
	font-size: 18px;
}
.page-bisat .bs-doc-info {
	flex: 1 1 auto;
	min-width: 0;
}
.page-bisat .bs-doc-title {
	margin: 0;
	color: var(--site-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.65;
}
.page-bisat .bs-doc:hover .bs-doc-title {
	color: var(--site-teal);
}
.page-bisat .bs-doc-meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	color: var(--site-muted);
	font-size: 12.5px;
	font-weight: 500;
}
.page-bisat .bs-doc-meta .ic {
	font-size: 12px;
}
.page-bisat .bs-dl {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 18px;
	border-radius: 10px;
	background: var(--site-teal-deep);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s ease;
}
.page-bisat .bs-dl:hover,
.page-bisat .bs-dl:focus-visible {
	background: #185C73;
	color: #fff;
	text-decoration: none;
	transition: background-color .2s ease;
}
[data-bs-theme="dark"] .page-bisat .bs-dl {
	background: #2E7F96;
}
[data-bs-theme="dark"] .page-bisat .bs-dl:hover,
[data-bs-theme="dark"] .page-bisat .bs-dl:focus-visible {
	background: #3C9AB4;
}
.page-bisat .bs-dl:focus-visible {
	outline: 3px solid rgba(var(--site-teal-rgb), .55);
	outline-offset: 2px;
}
@media (max-width: 767.98px) {
	.page-bisat .bs-doc {
		flex-wrap: wrap;
	}
	.page-bisat .bs-doc-info {
		flex: 1 1 100%;
		order: 3;
	}
	.page-bisat .bs-dl {
		order: 4;
		width: 100%;
		justify-content: center;
	}
}
@media (prefers-reduced-motion: reduce) {
	.page-bisat .bs-doc:hover {
		transform: none;
	}
	.page-bisat .bs-doc,
	.page-bisat .bs-dl {
		transition: none;
	}
}

/* ==== module: privatehe =============================================================
   Private higher education: rich-text section cards, numbered lists, resource tiles.
   Only what no other module has; every rule is scoped under .page-privatehe (set on the
   module's page-band). Shared parts use the components above. */
.page-privatehe .ph-card {
	padding: 22px 24px;
	border: 1px solid var(--site-rule);
	border-radius: 14px;
	background: var(--site-surface);
}
.page-privatehe .ph-card p {
	margin: 0;
	color: var(--site-ink);
	font-size: 15px;
	line-height: 2;
}
.page-privatehe .ph-card p + p,
.page-privatehe .ph-card ol + p,
.page-privatehe .ph-card ul + p,
.page-privatehe .ph-card p + ol,
.page-privatehe .ph-card p + ul {
	margin-top: 16px;
}
.page-privatehe .ph-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.page-privatehe .ph-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--site-ink);
	font-size: 15px;
	line-height: 2;
}
.page-privatehe .ph-list .ic {
	flex: 0 0 auto;
	margin-top: .55em;
	color: var(--site-teal);
	font-size: 14px;
}
.page-privatehe .ph-ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ph-n;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.page-privatehe .ph-ol li {
	counter-increment: ph-n;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--site-ink);
	font-size: 15px;
	line-height: 2;
}
.page-privatehe .ph-ol li::before {
	content: counter(ph-n);
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-top: .4em;
	border-radius: 999px;
	background: rgba(var(--site-teal-rgb), .09);
	color: var(--site-teal);
	font-size: 11.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
[data-bs-theme="dark"] .page-privatehe .ph-ol li::before {
	background: rgba(var(--site-teal-rgb), .26);
}
.page-privatehe .ph-res-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	grid-auto-rows: 1fr;
	gap: 12px;
}
.page-privatehe .ph-res {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 16px;
	border: 1px solid var(--site-rule);
	border-radius: 14px;
	background: var(--site-surface);
	color: var(--site-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.7;
	text-decoration: none;
	transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.page-privatehe .ph-res:hover,
.page-privatehe .ph-res:focus-visible {
	border-color: var(--site-teal);
	color: var(--site-teal);
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(11, 43, 51, .10);
	text-decoration: none;
	transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
[data-bs-theme="dark"] .page-privatehe .ph-res:hover,
[data-bs-theme="dark"] .page-privatehe .ph-res:focus-visible {
	box-shadow: 0 12px 26px rgba(0, 0, 0, .45);
}
.page-privatehe .ph-res:focus-visible {
	outline: 3px solid rgba(var(--site-teal-rgb), .55);
	outline-offset: 2px;
}
.page-privatehe .ph-res-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: rgba(var(--site-teal-rgb), .09);
	color: var(--site-teal);
}
[data-bs-theme="dark"] .page-privatehe .ph-res-icon {
	background: rgba(var(--site-teal-rgb), .26);
}
.page-privatehe .ph-res-icon .ic {
	font-size: 14px;
}
@media (max-width: 767.98px) {
	.page-privatehe .ph-card {
		padding: 18px 16px;
	}
	.page-privatehe .ph-res-grid {
		grid-template-columns: 1fr;
	}
}
@media (prefers-reduced-motion: reduce) {
	.page-privatehe .ph-res:hover,
	.page-privatehe .ph-res:focus-visible {
		transform: none;
	}
	.page-privatehe .ph-res {
		transition: none;
	}
}
.page-privatehe .ph-rich > :last-child {
	margin-bottom: 0;
}
.page-privatehe .ph-rich p {
	margin: 0 0 14px; line-height: 2; color: var(--site-ink); font-size: 15px;
}
.page-privatehe .ph-rich ul,
.page-privatehe .ph-rich ol {
	margin: 0 0 14px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px;
}
.page-privatehe .ph-rich ol {
	counter-reset: ph-n;
}
.page-privatehe .ph-rich li {
	display: flex; align-items: flex-start; gap: 12px; color: var(--site-ink); font-size: 15px; line-height: 2;
}
.page-privatehe .ph-rich ul li::before {
	content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-top: .85em; border-radius: 50%; background: var(--site-teal);
}
.page-privatehe .ph-rich ol li {
	counter-increment: ph-n;
}
.page-privatehe .ph-rich ol li::before {
	content: counter(ph-n); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: .4em;
	border-radius: 999px; background: rgba(var(--site-teal-rgb), .09); color: var(--site-teal); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
}
[data-bs-theme="dark"] .page-privatehe .ph-rich ol li::before {
	background: rgba(var(--site-teal-rgb), .26);
}

/* ==== module: govhe =================================================================
   Government higher education: institution tabs (govhe.js), institution panels with logos, campuses, visit link.
   Only what no other module has; every rule is scoped under .page-govhe (set on the
   module's page-band). Shared parts use the components above. */
.page-govhe .gh-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 24px;
}
.page-govhe .gh-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 18px;
	border: 1px solid var(--site-rule);
	border-radius: 999px;
	background: var(--site-surface);
	color: var(--site-ink);
	font-size: 13.5px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.page-govhe .gh-tab .ic {
	font-size: 14px;
	color: var(--site-muted);
	transition: color .2s ease;
}
.page-govhe .gh-tab:hover {
	border-color: var(--site-teal);
	color: var(--site-teal);
}
.page-govhe .gh-tab:hover .ic {
	color: var(--site-teal);
}
.page-govhe .gh-tab[aria-selected="true"] {
	border-color: var(--site-teal-deep);
	background: var(--site-teal-deep);
	color: #fff;
}
.page-govhe .gh-tab[aria-selected="true"] .ic {
	color: #fff;
}
[data-bs-theme="dark"] .page-govhe .gh-tab[aria-selected="true"] {
	border-color: #2E7F96;
	background: #2E7F96;
}
.page-govhe .gh-tab:focus-visible {
	outline: 3px solid rgba(var(--site-teal-rgb), .55);
	outline-offset: 2px;
}
.page-govhe .gh-panel[hidden] {
	display: none;
}
.page-govhe .gh-inst {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 32px 24px;
	border: 1px solid var(--site-rule);
	border-radius: 18px;
	background: var(--site-surface);
	text-align: center;
}
.page-govhe .gh-inst-logo {
	max-width: 160px;
	max-height: 96px;
	width: auto;
	height: auto;
	object-fit: contain;
}
[data-bs-theme="dark"] .page-govhe .gh-inst-logo {
	padding: 10px 14px;
	border-radius: 12px;
	background: #fff;
}
.page-govhe .gh-inst-name {
	margin: 0;
	max-width: 60ch;
	color: var(--site-ink);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.7;
}
.page-govhe .gh-inst-desc {
	margin: 0;
	max-width: 70ch;
	color: var(--site-muted);
	font-size: 15px;
	line-height: 1.9;
}
.page-govhe .gh-visit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 22px;
	border-radius: 10px;
	background: var(--site-teal-deep);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s ease;
}
.page-govhe .gh-visit:hover,
.page-govhe .gh-visit:focus-visible {
	background: #185C73;
	color: #fff;
	text-decoration: none;
	transition: background-color .2s ease;
}
[data-bs-theme="dark"] .page-govhe .gh-visit {
	background: #2E7F96;
}
[data-bs-theme="dark"] .page-govhe .gh-visit:hover,
[data-bs-theme="dark"] .page-govhe .gh-visit:focus-visible {
	background: #3C9AB4;
}
.page-govhe .gh-visit:focus-visible {
	outline: 3px solid rgba(var(--site-teal-rgb), .55);
	outline-offset: 2px;
}
.page-govhe .gh-campus-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	grid-auto-rows: 1fr;
	gap: 12px;
}
.page-govhe .gh-campus {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 14px 16px;
	border: 1px solid var(--site-rule);
	border-radius: 14px;
	background: var(--site-surface);
	color: var(--site-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
	transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.page-govhe .gh-campus:hover,
.page-govhe .gh-campus:focus-visible {
	border-color: var(--site-teal);
	color: var(--site-teal);
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(11, 43, 51, .10);
	text-decoration: none;
	transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
[data-bs-theme="dark"] .page-govhe .gh-campus:hover,
[data-bs-theme="dark"] .page-govhe .gh-campus:focus-visible {
	box-shadow: 0 12px 26px rgba(0, 0, 0, .45);
}
.page-govhe .gh-campus:focus-visible {
	outline: 3px solid rgba(var(--site-teal-rgb), .55);
	outline-offset: 2px;
}
.page-govhe .gh-campus-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: rgba(var(--site-teal-rgb), .09);
	color: var(--site-teal);
}
[data-bs-theme="dark"] .page-govhe .gh-campus-icon {
	background: rgba(var(--site-teal-rgb), .26);
}
.page-govhe .gh-campus-icon .ic {
	font-size: 15px;
}
@media (max-width: 767.98px) {
	.page-govhe .gh-inst {
		padding: 24px 16px;
		border-radius: 14px;
	}
	.page-govhe .gh-campus-grid {
		grid-template-columns: 1fr;
	}
	.page-govhe .gh-tabs {
		flex-direction: column;
		align-items: stretch;
	}
	.page-govhe .gh-tab {
		justify-content: center;
	}
}
@media (prefers-reduced-motion: reduce) {
	.page-govhe .gh-campus:hover,
	.page-govhe .gh-campus:focus-visible {
		transform: none;
	}
	.page-govhe .gh-campus,
	.page-govhe .gh-tab,
	.page-govhe .gh-visit {
		transition: none;
	}
}

/* ==== module: 404 ===================================================================
   Not found: the panel shown by include/page_not_found.php (big code, title, text, two buttons). Not scoped - the fragment is printed inside any module page; names carry nf-. */
.nf-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 56px 24px;
	border: 1px solid var(--site-rule);
	border-radius: 18px;
	background: var(--site-surface);
	text-align: center;
}
.nf-code {
	color: var(--site-teal);
	font-size: clamp(72px, 40px + 7vw, 132px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.04em;
	opacity: .16;
	user-select: none;
}
[data-bs-theme="dark"] .nf-code {
	opacity: .26;
}
.nf-title {
	margin: 0;
	color: var(--site-ink);
	font-size: clamp(22px, 14px + 1.6vw, 30px);
	font-weight: 800;
	line-height: 1.5;
}
.nf-text {
	margin: 10px 0 0;
	max-width: 54ch;
	color: var(--site-muted);
	font-size: 15px;
	line-height: 1.95;
}
.nf-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 26px;
}
.nf-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 22px;
	border: 1px solid var(--site-teal-deep);
	border-radius: 10px;
	background: var(--site-teal-deep);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease;
}
.nf-btn:hover,
.nf-btn:focus-visible {
	background: #185C73;
	border-color: #185C73;
	color: #fff;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease;
}
[data-bs-theme="dark"] .nf-btn {
	background: #2E7F96;
	border-color: #2E7F96;
}
[data-bs-theme="dark"] .nf-btn:hover,
[data-bs-theme="dark"] .nf-btn:focus-visible {
	background: #3C9AB4;
	border-color: #3C9AB4;
}
.nf-btn-ghost {
	background: transparent;
	border-color: var(--site-rule);
	color: var(--site-ink);
}
.nf-btn-ghost:hover,
.nf-btn-ghost:focus-visible {
	background: transparent;
	border-color: var(--site-teal);
	color: var(--site-teal);
}
[data-bs-theme="dark"] .nf-btn-ghost {
	background: transparent;
	border-color: var(--site-rule);
}
[data-bs-theme="dark"] .nf-btn-ghost:hover,
[data-bs-theme="dark"] .nf-btn-ghost:focus-visible {
	background: transparent;
	border-color: var(--site-teal);
}
.nf-btn:focus-visible {
	outline: 3px solid rgba(var(--site-teal-rgb), .55);
	outline-offset: 2px;
}
.nf-panel .nf-btn .ic {
	color: inherit;
}
@media (max-width: 767.98px) {
	.nf-panel {
		padding: 40px 18px;
		border-radius: 14px;
	}
	.nf-actions {
		width: 100%;
	}
	.nf-btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}
@media (prefers-reduced-motion: reduce) {
	.nf-btn {
		transition: none;
	}
}

/* ==== module: contactus =============================================================
   Contact us: the form card (fields, captcha, submit), contact items, the map.
   Only what no other module has; every rule is scoped under .page-contactus (set on the
   module's page-band). Shared parts use the components above. */
/* Crumbs written as plain links (not the shared breadcrumb list). */
.page-crumbs.is-links {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}
.page-crumbs.is-links a {
	color: rgba(255, 255, 255, .85);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: color .2s ease, opacity .2s ease;
}
.page-crumbs.is-links a:hover, .page-crumbs.is-links a:focus-visible {
	color: #fff;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	transition: color .2s ease, opacity .2s ease;
}
.page-crumbs.is-links a:focus-visible {
	outline: 2px solid rgba(255, 255, 255, .9);
	outline-offset: 3px;
	border-radius: 4px;
}
.page-crumbs.is-links .ic {
	color: rgba(255, 255, 255, .55);
	font-size: 11px;
}
.page-crumbs.is-links .cu-crumb-current {
	color: rgba(255, 255, 255, .70);
	font-size: 13px;
	font-weight: 500;
}
.page-contactus .cu-grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 24px;
	align-items: start;
}
.page-contactus .cu-card {
	border: 1px solid var(--site-rule);
	border-radius: 14px;
	background: var(--bs-body-bg);
	padding: 28px;
}
.page-contactus .cu-card + .cu-card {
	margin-top: 16px;
}
.page-contactus .cu-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
	color: var(--site-ink);
	font-size: 17px;
	font-weight: 700;
}
.page-contactus .cu-card-head .ic {
	color: var(--site-muted);
	font-size: 17px;
}
.page-contactus .cu-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 16px;
}
.page-contactus .cu-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.page-contactus .cu-label {
	color: var(--site-ink);
	font-size: 13.5px;
	font-weight: 600;
}
.page-contactus .cu-label.is-required::after {
	content: ' *';
	color: #B32020;
}
.page-contactus .cu-input,
.page-contactus .cu-textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--site-rule);
	border-radius: 10px;
	background: var(--bs-body-bg);
	color: var(--site-ink);
	font-size: 14px;
	font-family: inherit;
	transition: border-color .2s ease;
}
.page-contactus .cu-textarea {
	min-height: 150px;
	resize: vertical;
	line-height: 1.8;
}
.page-contactus .cu-input::placeholder,
.page-contactus .cu-textarea::placeholder {
	color: var(--site-muted);
	opacity: .75;
}
.page-contactus .cu-input:focus,
.page-contactus .cu-textarea:focus {
	outline: none;
	border-color: var(--site-teal);
	box-shadow: 0 0 0 3px rgba(var(--site-teal-rgb), .14);
}
.page-contactus .cu-captcha {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 14px 16px;
	border: 1px solid var(--site-rule);
	border-radius: 10px;
	background: rgba(var(--site-teal-rgb), .05);
}
.page-contactus .cu-captcha-q {
	color: var(--site-ink);
	font-size: 17px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	direction: ltr;
	unicode-bidi: isolate;
}
.page-contactus .cu-captcha .cu-input {
	width: 110px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.page-contactus .cu-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 32px;
	border: 0;
	border-radius: 999px;
	background: var(--site-teal-deep);
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s ease;
}
.page-contactus .cu-submit:hover:not(:disabled) {
	background: var(--site-teal);
}
.page-contactus .cu-submit:disabled {
	opacity: .6;
	cursor: default;
}
.page-contactus .cu-actions {
	margin-top: 24px;
}
.page-contactus .cu-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.page-contactus .cu-item + .cu-item {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--site-rule);
}
.page-contactus .cu-item-icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(var(--site-teal-rgb), .10);
	color: var(--site-teal);
}
.page-contactus .cu-item-icon .ic {
	font-size: 17px;
	color: inherit;
}
.page-contactus .cu-item-body {
	min-width: 0;
}
.page-contactus .cu-item-label {
	display: block;
	color: var(--site-muted);
	font-size: 12.5px;
	font-weight: 600;
	margin-bottom: 2px;
}
.page-contactus .cu-item-value {
	display: block;
	color: var(--site-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	overflow-wrap: anywhere;
}
.page-contactus a.cu-item-value {
	text-decoration: none;
	color: var(--site-ink);
	transition: color .2s ease;
}
.page-contactus a.cu-item-value:hover {
	color: var(--site-teal);
	transition: color .2s ease;
}
.page-contactus .cu-ltr {
	direction: ltr;
	unicode-bidi: isolate;
	text-align: start;
}
@media (max-width: 991.98px) {
	.page-contactus .cu-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 575.98px) {
	.page-contactus .cu-card {
		padding: 20px;
	}
}

/* ==== module: sitemap ===============================================================
   Site map: section cards with category rows, sub-rows and static links.
   Only what no other module has; every rule is scoped under .page-sitemap (set on the
   module's page-band). Shared parts use the components above. */
.page-sitemap .sm-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 0 0 20px;
	align-items: start;
}
@media (min-width: 1200px) {
	.page-sitemap .sm-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
.page-sitemap .sm-card {
	border: 1px solid var(--site-rule);
	border-radius: 18px;
	background: var(--site-surface);
	overflow: hidden;
}
.page-sitemap .sm-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--site-rule);
}
.page-sitemap .sm-card-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: rgba(var(--site-teal-rgb), .09);
	color: var(--site-teal);
}
[data-bs-theme="dark"] .page-sitemap .sm-card-icon {
	background: rgba(var(--site-teal-rgb), .26);
}
.page-sitemap .sm-card-icon .ic {
	font-size: 16px;
}
.page-sitemap .sm-card-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: var(--site-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
}
.page-sitemap .sm-card-n {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 8px;
	border-radius: 999px;
	background: rgba(var(--site-teal-rgb), .09);
	color: var(--site-teal);
	font-size: 11.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
[data-bs-theme="dark"] .page-sitemap .sm-card-n {
	background: rgba(var(--site-teal-rgb), .26);
}
.page-sitemap .sm-card-body {
	padding: 8px 12px 12px;
}
.page-sitemap .sm-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--site-ink);
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.page-sitemap .sm-row:hover,
.page-sitemap .sm-row:focus-visible {
	background: rgba(var(--site-teal-rgb), .07);
	color: var(--site-teal);
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
[data-bs-theme="dark"] .page-sitemap .sm-row:hover,
[data-bs-theme="dark"] .page-sitemap .sm-row:focus-visible {
	background: rgba(var(--site-teal-rgb), .20);
}
.page-sitemap .sm-row:focus-visible {
	outline: 3px solid rgba(var(--site-teal-rgb), .55);
	outline-offset: 2px;
}
.page-sitemap .sm-row-icon {
	flex: 0 0 auto;
	color: var(--site-teal);
	font-size: 14px;
}
.page-sitemap .sm-row-title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
}
.page-sitemap .sm-row-n {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--site-mist);
	color: var(--site-muted);
	font-size: 11px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
[data-bs-theme="dark"] .page-sitemap .sm-row-n {
	background: rgba(255, 255, 255, .07);
}
.page-sitemap .sm-row-arrow {
	flex: 0 0 auto;
	color: var(--site-teal);
	font-size: 11px;
	opacity: 0;
	transform: rotate(-90deg);
	transition: opacity .15s ease;
}
[dir="rtl"] .page-sitemap .sm-row-arrow {
	transform: rotate(90deg);
}
.page-sitemap .sm-row:hover .sm-row-arrow,
.page-sitemap .sm-row:focus-visible .sm-row-arrow {
	opacity: 1;
}
.page-sitemap .sm-sep {
	height: 0;
	margin: 2px 12px;
	border-top: 1px dashed var(--site-rule);
}
.page-sitemap .sm-sub {
	margin-inline-start: 20px;
	padding-inline-start: 10px;
	padding-bottom: 4px;
	border-inline-start: 2px solid var(--site-rule);
}
.page-sitemap .sm-sub-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 8px;
	color: var(--site-muted);
	font-size: 12.5px;
	line-height: 1.7;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.page-sitemap .sm-sub-row:hover,
.page-sitemap .sm-sub-row:focus-visible {
	background: rgba(var(--site-teal-rgb), .07);
	color: var(--site-teal);
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
[data-bs-theme="dark"] .page-sitemap .sm-sub-row:hover,
[data-bs-theme="dark"] .page-sitemap .sm-sub-row:focus-visible {
	background: rgba(var(--site-teal-rgb), .20);
}
.page-sitemap .sm-sub-row:focus-visible {
	outline: 3px solid rgba(var(--site-teal-rgb), .55);
	outline-offset: 2px;
}
.page-sitemap .sm-dot {
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--site-muted);
	opacity: .6;
}
.page-sitemap .sm-sub-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.page-sitemap .sm-static-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	grid-auto-rows: 1fr;
	gap: 12px;
	padding: 16px 20px 20px;
}
.page-sitemap .sm-static {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 14px 16px;
	border: 1px dashed var(--site-rule);
	border-radius: 14px;
	color: var(--site-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.page-sitemap .sm-static:hover,
.page-sitemap .sm-static:focus-visible {
	border-color: var(--site-teal);
	border-style: solid;
	background: rgba(var(--site-teal-rgb), .07);
	color: var(--site-teal);
	text-decoration: none;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
[data-bs-theme="dark"] .page-sitemap .sm-static:hover,
[data-bs-theme="dark"] .page-sitemap .sm-static:focus-visible {
	background: rgba(var(--site-teal-rgb), .20);
}
.page-sitemap .sm-static:focus-visible {
	outline: 3px solid rgba(var(--site-teal-rgb), .55);
	outline-offset: 2px;
}
.page-sitemap .sm-static-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(var(--site-teal-rgb), .09);
	color: var(--site-teal);
}
[data-bs-theme="dark"] .page-sitemap .sm-static-icon {
	background: rgba(var(--site-teal-rgb), .26);
}
.page-sitemap .sm-static-icon .ic {
	font-size: 14px;
}
.page-sitemap .page-band .sm-card-icon .ic,
.page-sitemap .page-band .sm-static-icon .ic,
.page-sitemap .page-band .sm-card-n .ic,
.page-sitemap .page-band .sm-row-n .ic {
	color: inherit;
}
@media (max-width: 767.98px) {
	.page-sitemap .sm-card-head {
		padding: 14px 16px;
	}
	.page-sitemap .sm-static-grid {
		grid-template-columns: 1fr;
		padding: 14px 16px 16px;
	}
	.page-sitemap .sm-sub {
		margin-inline-start: 12px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.page-sitemap .sm-row,
	.page-sitemap .sm-sub-row,
	.page-sitemap .sm-static,
	.page-sitemap .sm-row-arrow {
		transition: none;
	}
}

/* ==== module: vote ==================================================================
   Polls: poll cards, answers with result bars (vt-bar-0..5), percentages and totals.
   Only what no other module has; every rule is scoped under .page-vote (set on the
   module's page-band). Shared parts use the components above. */
.page-vote .vt-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	grid-auto-rows: 1fr;
	gap: 16px;
}
.page-vote .vt-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 22px;
	border: 1px solid var(--site-rule);
	border-radius: 14px;
	background: var(--bs-body-bg);
}
.page-vote .vt-card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.page-vote .vt-question {
	margin: 0;
	color: var(--site-ink);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.75;
	overflow-wrap: anywhere;
}
.page-vote .vt-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	background: rgba(23, 139, 86, .10);
	color: #15794C;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
}
[data-bs-theme="dark"] .page-vote .vt-badge {
	background: rgba(80, 205, 137, .16);
	color: #6FD9A0;
}
.page-vote .vt-answers {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.page-vote .vt-answer {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.page-vote .vt-answer-label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	color: var(--site-ink);
	font-size: 13px;
	line-height: 1.6;
}
.page-vote .vt-answer-text {
	min-width: 0;
	overflow-wrap: anywhere;
}
.page-vote .vt-answer.is-top .vt-answer-text {
	font-weight: 700;
}
.page-vote .vt-pct {
	flex: 0 0 auto;
	color: var(--site-muted);
	font-size: 12.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.page-vote .vt-answer.is-top .vt-pct {
	color: var(--site-ink);
}
.page-vote .vt-bar-wrap {
	height: 8px;
	border-radius: 999px;
	background: rgba(var(--site-teal-rgb), .09);
	overflow: hidden;
}
[data-bs-theme="dark"] .page-vote .vt-bar-wrap {
	background: rgba(255, 255, 255, .07);
}
.page-vote .vt-bar {
	height: 100%;
	border-radius: 999px;
	background: var(--site-teal);
	min-width: 2px;
}
.page-vote .vt-bar-0 {
	background: #3699FF;
}
.page-vote .vt-bar-1 {
	background: #F0B11D;
}
.page-vote .vt-bar-2 {
	background: #1BC5BD;
}
.page-vote .vt-bar-3 {
	background: #F64E60;
}
.page-vote .vt-bar-4 {
	background: #8950FC;
}
.page-vote .vt-bar-5 {
	background: #FFA621;
}
.page-vote .vt-card-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 4px;
	color: var(--site-muted);
	font-size: 12.5px;
}
.page-vote .vt-total {
	font-weight: 700;
	color: var(--site-ink);
	font-variant-numeric: tabular-nums;
}
.page-vote .vt-date {
	margin-inline-start: auto;
	white-space: nowrap;
}
@media (max-width: 575.98px) {
	.page-vote .vt-card {
		padding: 16px 18px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.page-vote .vt-bar {
		transition: none;
	}
}

/* ==== module: opendata ==============================================================
   Open data: the document card with preview, description, meta and actions.
   Only what no other module has; every rule is scoped under .page-opendata (set on the
   module's page-band). Shared parts use the components above. */
.page-opendata .od-count {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 28px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(var(--site-teal-rgb), .09);
	color: var(--site-teal);
	font-size: 12.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.page-opendata .od-count .ic {
	color: inherit;
	font-size: 12.5px;
}
.page-opendata .od-card {
	border: 1px solid var(--site-rule);
	border-radius: 14px;
	background: var(--site-surface);
	padding: 24px;
}
.page-opendata .od-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
}
.page-opendata .od-badge {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: rgba(var(--site-teal-rgb), .09);
	color: var(--site-teal);
}
.page-opendata .od-badge .ic {
	color: inherit;
	font-size: 18px;
}
.page-opendata .od-head-text {
	min-width: 0;
}
.page-opendata .od-title {
	margin: 0;
	color: var(--site-ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.65;
}
.page-opendata .od-sub {
	margin: 2px 0 0;
	color: var(--site-muted);
	font-size: 12.5px;
	font-weight: 500;
}
.page-opendata .od-desc {
	margin: 0 0 20px;
	max-width: 76ch;
	color: var(--site-muted);
	font-size: 14.5px;
	line-height: 1.9;
}
.page-opendata .od-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}
.page-opendata .od-btn,
.page-opendata .od-btn:hover {
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.page-opendata .od-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}
.page-opendata .od-btn .ic {
	color: inherit;
	font-size: 13.5px;
}
.page-opendata .od-btn:focus-visible {
	outline: 3px solid rgba(var(--site-teal-rgb), .55);
	outline-offset: 2px;
}
.page-opendata .od-btn-primary {
	background: var(--site-teal-deep);
	color: #fff;
}
.page-opendata .od-btn-primary:hover {
	background: #0a2f3b;
	color: #fff;
}
.page-opendata .od-btn-ghost {
	border-color: var(--site-rule);
	background: transparent;
	color: var(--site-ink);
}
.page-opendata .od-btn-ghost:hover {
	border-color: var(--site-teal);
	background: rgba(var(--site-teal-rgb), .06);
	color: var(--site-teal);
}
.page-opendata .od-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	border-top: 1px solid var(--site-rule);
	padding-top: 16px;
}
.page-opendata .od-meta span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--site-muted);
	font-size: 12.5px;
	font-weight: 500;
}
.page-opendata .od-meta .ic {
	color: var(--site-teal);
	font-size: 12.5px;
}
.page-opendata .od-preview {
	overflow: hidden;
	border: 1px solid var(--site-rule);
	border-radius: 14px;
	background: var(--site-surface);
	margin-top: 20px;
}
.page-opendata .od-preview iframe {
	display: block;
	width: 100%;
	height: 78vh;
	min-height: 520px;
	border: 0;
}
.page-opendata .od-empty-body {
	margin: 0;
	max-width: 52ch;
	color: var(--site-muted);
	font-size: 13.5px;
	line-height: 1.9;
}
@media (max-width: 767.98px) {
	.page-opendata .od-card {
		padding: 18px;
	}
	.page-opendata .od-actions {
		flex-direction: column;
	}
	.page-opendata .od-btn {
		justify-content: center;
		width: 100%;
	}
	.page-opendata .od-preview iframe {
		height: 60vh;
		min-height: 360px;
	}
}

/* ==== module: search ================================================================
   Site search: the search form (modes, options, captcha), suggestions and history, result lists and tiles, the results pager.
   Only what no other module has; every rule is scoped under .page-search (set on the
   module's page-band). Shared parts use the components above. */
.page-search .sr-panel {
	margin: 0 0 20px;
	padding: 20px;
	border: 1px solid var(--site-rule);
	border-radius: 18px;
	background: var(--site-surface);
}
/* The search form's own row. It shared .sr-row with the result rows, so their hover
   (border, lift, shadow) also lit up around the search box. */
.page-search .sr-form-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}
.page-search .sr-field {
	position: relative;
	flex: 1 1 320px;
	display: flex;
	align-items: center;
	min-width: 0;
	height: 42px;
	padding-inline: 14px;
	border: 1px solid var(--site-rule);
	border-radius: 10px;
	background: var(--site-surface);
}
.page-search .sr-field:focus-within {
	border-color: var(--site-teal);
}
.page-search .sr-field-icon {
	flex: 0 0 auto;
	margin-inline-end: 10px;
	color: var(--site-muted);
	font-size: 14px;
}
.page-search .sr-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--site-ink);
	font-size: 14px;
	font-family: inherit;
}
.page-search .sr-input:focus {
	outline: none;
}
.page-search .sr-input::placeholder {
	color: var(--site-muted);
}
.page-search .sr-input::-webkit-search-cancel-button {
	appearance: none;
}
.page-search .sr-select {
	flex: 0 1 200px;
	height: 42px;
	padding-inline: 12px;
	border: 1px solid var(--site-rule);
	border-radius: 10px;
	background: var(--site-surface);
	color: var(--site-ink);
	font-size: 13.5px;
	font-family: inherit;
}
.page-search .sr-select:focus {
	outline: none;
	border-color: var(--site-teal);
	box-shadow: 0 0 0 3px rgba(var(--site-teal-rgb), .18);
}
.page-search .sr-submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 42px;
	padding: 0 24px;
	border: 0;
	border-radius: 10px;
	background: var(--site-teal-deep);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background-color .2s ease;
}
.page-search .sr-submit:hover {
	background: #185C73;
}
[data-bs-theme="dark"] .page-search .sr-submit {
	background: #2E7F96;
}
[data-bs-theme="dark"] .page-search .sr-submit:hover {
	background: #3C9AB4;
}
.page-search .sr-submit:focus-visible {
	outline: 3px solid rgba(var(--site-teal-rgb), .55);
	outline-offset: 2px;
}
.page-search .sr-submit[disabled] {
	opacity: .6;
	cursor: wait;
}
.page-search .sr-suggest {
	position: absolute;
	top: calc(100% + 4px);
	inset-inline: 0;
	z-index: 100;
	max-height: 320px;
	overflow-y: auto;
	border: 1px solid var(--site-rule);
	border-radius: 10px;
	background: var(--site-surface);
	box-shadow: 0 12px 30px rgba(11, 43, 51, .12);
}
[data-bs-theme="dark"] .page-search .sr-suggest {
	box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}
.page-search .sr-suggest-list {
	margin: 0;
	padding: 6px;
	list-style: none;
}
.page-search .sr-suggest-list li {
	padding: 9px 12px;
	border-radius: 8px;
	color: var(--site-ink);
	font-size: 13.5px;
	line-height: 1.6;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.page-search .sr-suggest-list li:hover,
.page-search .sr-suggest-list li.is-active {
	background: rgba(var(--site-teal-rgb), .09);
	color: var(--site-teal);
}
[data-bs-theme="dark"] .page-search .sr-suggest-list li:hover,
[data-bs-theme="dark"] .page-search .sr-suggest-list li.is-active {
	background: rgba(var(--site-teal-rgb), .26);
}
.page-search .sr-options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed var(--site-rule);
}
.page-search .sr-modes {
	display: flex;
	align-items: center;
	gap: 16px;
}
.page-search .sr-mode {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--site-ink);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}
.page-search .sr-mode input {
	accent-color: var(--site-teal);
	cursor: pointer;
}
.page-search .sr-captcha {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-inline-start: auto;
}
.page-search .sr-captcha-q {
	color: var(--site-ink);
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.page-search .sr-captcha-input {
	width: 72px;
	height: 36px;
	padding-inline: 10px;
	border: 1px solid var(--site-rule);
	border-radius: 8px;
	background: var(--site-surface);
	color: var(--site-ink);
	font-size: 13.5px;
	font-family: inherit;
	text-align: center;
}
.page-search .sr-captcha-input:focus {
	outline: none;
	border-color: var(--site-teal);
	box-shadow: 0 0 0 3px rgba(var(--site-teal-rgb), .18);
}
.page-search .sr-captcha-input.is-invalid {
	border-color: #B32020;
	box-shadow: 0 0 0 3px rgba(214, 57, 57, .18);
}
.page-search .sr-hint {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--site-muted);
	font-size: 12px;
}
.page-search .sr-hint kbd {
	padding: 2px 6px;
	border: 1px solid var(--site-rule);
	border-radius: 5px;
	background: var(--site-mist);
	color: var(--site-muted);
	font-size: 11px;
	font-family: inherit;
}
[data-bs-theme="dark"] .page-search .sr-hint kbd {
	background: rgba(255, 255, 255, .06);
}
.page-search .sr-history {
	margin: 0 0 20px;
}
.page-search .sr-history-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}
.page-search .sr-history-label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--site-muted);
	font-size: 12.5px;
	font-weight: 600;
}
.page-search .sr-history-clear {
	color: var(--site-muted);
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
}
.page-search .sr-history-clear:hover {
	color: #B32020;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.page-search .sr-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.page-search .sr-tag {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 14px;
	border: 1px solid var(--site-rule);
	border-radius: 999px;
	background: var(--site-surface);
	color: var(--site-ink);
	font-size: 12.5px;
	font-weight: 500;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.page-search .sr-tag:hover,
.page-search .sr-tag:focus-visible {
	border-color: var(--site-teal);
	background: rgba(var(--site-teal-rgb), .09);
	color: var(--site-teal);
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
[data-bs-theme="dark"] .page-search .sr-tag:hover {
	background: rgba(var(--site-teal-rgb), .26);
}
.page-search .sr-results-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px dashed var(--site-rule);
}
.page-search .sr-results-head.d-none {
	display: none;
}
.page-search .sr-results-text {
	margin: 0;
	color: var(--site-ink);
	font-size: 15px;
	font-weight: 500;
}
.page-search .sr-results-text strong {
	color: var(--site-teal);
	font-weight: 700;
}
.page-search .sr-results-n {
	display: inline-flex;
	align-items: center;
	height: 24px;
	margin-inline-start: 10px;
	padding: 0 10px;
	border-radius: 999px;
	background: rgba(var(--site-teal-rgb), .09);
	color: var(--site-teal);
	font-size: 11.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
[data-bs-theme="dark"] .page-search .sr-results-n {
	background: rgba(var(--site-teal-rgb), .26);
}
.page-search .sr-results-cat {
	color: var(--site-muted);
	font-size: 12.5px;
}
.page-search .sr-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	grid-auto-rows: 1fr;
	gap: 16px;
}
.page-search .sr-grid-tiles {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.page-search .sr-result {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--site-rule);
	border-radius: 14px;
	background: var(--site-surface);
	text-decoration: none;
	transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.page-search .sr-result:hover {
	border-color: var(--site-teal);
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(11, 43, 51, .10);
	transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
[data-bs-theme="dark"] .page-search .sr-result:hover {
	box-shadow: 0 12px 26px rgba(0, 0, 0, .45);
}
.page-search .sr-result-media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--site-mist);
}
.page-search .sr-grid-tiles .sr-result-media {
	aspect-ratio: 4 / 3;
}
.page-search .sr-result-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.page-search .sr-result:hover .sr-result-media img {
	transform: scale(1.05);
}
.page-search .sr-result-media.is-title {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: linear-gradient(160deg, rgba(var(--site-teal-rgb), .13) 0%, rgba(var(--site-teal-rgb), .05) 100%);
	color: var(--site-teal);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.7;
	text-align: center;
}
[data-bs-theme="dark"] .page-search .sr-result-media.is-title {
	background: linear-gradient(160deg, rgba(var(--site-teal-rgb), .26) 0%, rgba(var(--site-teal-rgb), .10) 100%);
}
.page-search .sr-result-cat {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 10px;
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	background: rgba(5, 27, 34, .72);
	color: #fff;
	font-size: 11.5px;
	font-weight: 600;
}
.page-search .sr-result-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	padding: 14px 16px 16px;
}
.page-search .sr-result-title {
	color: var(--site-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.65;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.page-search .sr-result:hover .sr-result-title {
	color: var(--site-teal);
}
.page-search .sr-result-desc {
	margin: 0;
	color: var(--site-muted);
	font-size: 13px;
	line-height: 1.8;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.page-search .sr-result-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-top: auto;
	color: var(--site-muted);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}
.page-search .sr-result-meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.page-search .sr-result-meta .ic {
	font-size: 11px;
}
.page-search .sr-mark {
	padding: 1px 4px;
	border-radius: 4px;
	background: rgba(var(--site-teal-rgb), .16);
	color: inherit;
}
[data-bs-theme="dark"] .page-search .sr-mark {
	background: rgba(var(--site-teal-rgb), .34);
}
.page-search .sr-result-cover {
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
}
.page-search .sr-result-cover img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.page-search .sr-play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(5, 27, 34, .62);
	color: #fff;
	font-size: 14px;
}
[dir="rtl"] .page-search .sr-play {
	transform: translate(50%, -50%);
}
.page-search .sr-result-chip {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 9px;
	border-radius: 999px;
	background: rgba(var(--site-teal-rgb), .09);
	color: var(--site-teal);
	font-size: 11px;
	font-weight: 600;
}
[data-bs-theme="dark"] .page-search .sr-result-chip {
	background: rgba(var(--site-teal-rgb), .26);
}
.page-search .sr-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.page-search .sr-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--site-rule);
	border-radius: 14px;
	background: var(--site-surface);
	color: var(--site-ink);
	text-decoration: none;
	transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.page-search .sr-row:hover,
.page-search .sr-row:focus-visible {
	border-color: var(--site-teal);
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(11, 43, 51, .10);
	text-decoration: none;
	transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
[data-bs-theme="dark"] .page-search .sr-row:hover,
[data-bs-theme="dark"] .page-search .sr-row:focus-visible {
	box-shadow: 0 12px 26px rgba(0, 0, 0, .45);
}
.page-search .sr-row:focus-visible {
	outline: 3px solid rgba(var(--site-teal-rgb), .55);
	outline-offset: 2px;
}
.page-search .sr-row-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(var(--site-teal-rgb), .09);
	color: var(--site-teal);
}
[data-bs-theme="dark"] .page-search .sr-row-icon {
	background: rgba(var(--site-teal-rgb), .26);
}
.page-search .sr-row-icon .ic {
	font-size: 14px;
}
.page-search .sr-row-title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.65;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.page-search .sr-row:hover .sr-row-title {
	color: var(--site-teal);
}
.page-search .sr-row-meta {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--site-muted);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.page-search .sr-row-meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.page-search .sr-row-meta .ic {
	font-size: 11px;
}
.page-search .sr-empty {
	padding: 48px 20px;
	text-align: center;
}
.page-search .sr-empty > i {
	color: var(--site-muted);
	font-size: 32px;
	opacity: .5;
}
.page-search .sr-empty-title {
	margin: 14px 0 6px;
	color: var(--site-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.7;
}
.page-search .sr-empty-term {
	margin: 0 0 20px;
	color: var(--site-muted);
	font-size: 14px;
}
.page-search .sr-empty-label {
	display: block;
	margin-bottom: 10px;
	color: var(--site-muted);
	font-size: 12.5px;
}
.page-search .sr-empty .sr-tags {
	justify-content: center;
}
.page-search .sr-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 32px;
}
.page-search .sr-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border: 1px solid var(--site-rule);
	border-radius: 6px;
	background: var(--site-surface);
	color: var(--site-ink);
	font-size: 12.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}
.page-search .sr-page:hover {
	border-color: var(--site-teal);
	color: var(--site-teal);
	text-decoration: none;
}
.page-search .sr-page-prev i,
.page-search .sr-page-next .ic {
	font-size: 10px;
}
.page-search .sr-page-prev .ic {
	transform: rotate(90deg);
}
.page-search .sr-page-next .ic {
	transform: rotate(-90deg);
}
[dir="rtl"] .page-search .sr-page-prev .ic {
	transform: rotate(-90deg);
}
[dir="rtl"] .page-search .sr-page-next .ic {
	transform: rotate(90deg);
}
.page-search .sr-page.is-active {
	border-color: var(--site-teal-deep);
	background: var(--site-teal-deep);
	color: #fff;
}
[data-bs-theme="dark"] .page-search .sr-page.is-active {
	border-color: #2E7F96;
	background: #2E7F96;
}
.page-search .page-band .sr-submit i,
.page-search .page-band .sr-result-meta i,
.page-search .page-band .sr-history-label i,
.page-search .page-band .sr-hint i,
.page-search .page-band .sr-result-cat i,
.page-search .page-band .sr-row-icon i,
.page-search .page-band .sr-row-meta i,
.page-search .page-band .sr-play i,
.page-search .page-band .sr-page i,
.page-search .page-band .sr-empty > i {
	color: inherit;
}
@media (max-width: 767.98px) {
	.page-search .sr-panel {
		padding: 16px;
	}
	.page-search .sr-field,
	.page-search .sr-select,
	.page-search .sr-submit {
		flex: 1 1 100%;
	}
	.page-search .sr-captcha {
		margin-inline-start: 0;
	}
	.page-search .sr-grid,
	.page-search .sr-grid-tiles {
		grid-template-columns: 1fr;
	}
	.page-search .sr-row {
		flex-wrap: wrap;
	}
	.page-search .sr-row-meta {
		width: 100%;
		padding-inline-start: 48px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.page-search .sr-result:hover {
		transform: none;
	}
	.page-search .sr-result:hover .sr-result-media img {
		transform: none;
	}
	.page-search .sr-result,
	.page-search .sr-tag,
	.page-search .sr-page,
	.page-search .sr-suggest-list li {
		transition: none;
	}
}

/* ==== module: universities ==========================================================
   Universities: filters, the table view and the tree view (search.js-free; universities.js builds the rows), counts, notices.
   Only what no other module has; every rule is scoped under .page-universities (set on the
   module's page-band). Shared parts use the components above. */
.page-universities .un-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 20px;
	margin: 0 0 20px;
}
.page-universities .un-tools {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.page-universities .un-counts {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.page-universities .un-search {
	position: relative;
	display: flex;
	align-items: center;
	width: min(340px, 100%);
	height: 42px;
	padding-inline: 14px;
	border: 1px solid var(--site-rule);
	border-radius: 10px;
	background: var(--site-surface);
}
.page-universities .un-search:focus-within {
	border-color: var(--site-teal);
	box-shadow: 0 0 0 3px rgba(var(--site-teal-rgb), .18);
}
.page-universities .un-search-icon {
	flex: 0 0 auto;
	margin-inline-end: 10px;
	color: var(--site-muted);
	font-size: 14px;
}
.page-universities .un-search-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--site-ink);
	font-size: 14px;
	font-family: inherit;
}
.page-universities .un-search-input:focus {
	outline: none;
}
.page-universities .un-search-input::placeholder {
	color: var(--site-muted);
}
.page-universities .un-search-input::-webkit-search-cancel-button {
	appearance: none;
}
.page-universities .un-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 16px;
	border: 1px solid var(--site-rule);
	border-radius: 10px;
	background: var(--site-surface);
	color: var(--site-ink);
	font-size: 13.5px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.page-universities .un-btn .ic {
	font-size: 13px;
	color: var(--site-muted);
	transition: color .2s ease;
}
.page-universities .un-btn:hover {
	border-color: var(--site-teal);
	color: var(--site-teal);
}
.page-universities .un-btn:hover .ic {
	color: var(--site-teal);
}
.page-universities .un-btn:focus-visible {
	outline: 3px solid rgba(var(--site-teal-rgb), .55);
	outline-offset: 2px;
}
.page-universities .un-btn-primary,
.page-universities .un-btn.un-btn-primary {
	border-color: var(--site-teal-deep);
	background: var(--site-teal-deep);
	color: #fff;
}
.page-universities .un-btn-primary i,
.page-universities .un-btn.un-btn-primary .ic {
	color: #fff;
}
.page-universities .un-btn-primary:hover,
.page-universities .un-btn.un-btn-primary:hover {
	border-color: #185C73;
	background: #185C73;
	color: #fff;
}
.page-universities .un-btn-primary:hover .ic {
	color: #fff;
}
[data-bs-theme="dark"] .page-universities .un-btn-primary {
	border-color: #2E7F96;
	background: #2E7F96;
}
[data-bs-theme="dark"] .page-universities .un-btn-primary:hover {
	border-color: #3C9AB4;
	background: #3C9AB4;
}
.page-universities .un-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 28px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(var(--site-teal-rgb), .09);
	color: var(--site-teal);
	font-size: 12.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
[data-bs-theme="dark"] .page-universities .un-chip {
	background: rgba(var(--site-teal-rgb), .26);
}
.page-universities .page-band .un-table thead th i,
.page-universities .page-band .un-chip i,
.page-universities .page-band .un-tree-icon i,
.page-universities .page-band .un-tree-count i,
.page-universities .page-band .un-link i,
.page-universities .page-band .un-tree-website .ic {
	color: inherit;
}
.page-universities .un-filters {
	margin: 0 0 20px;
	padding: 18px;
	border: 1px solid var(--site-rule);
	border-radius: 14px;
	background: var(--site-surface);
}
.page-universities .un-filters-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	grid-auto-rows: 1fr;
	gap: 14px;
	align-items: end;
}
.page-universities .un-filter {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.page-universities .un-filter label {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--site-muted);
	font-size: 12.5px;
	font-weight: 600;
}
.page-universities .un-filter label .ic {
	color: var(--site-teal);
	font-size: 12px;
}
.page-universities .un-filter select {
	width: 100%;
	height: 42px;
	padding-inline: 12px;
	border: 1px solid var(--site-rule);
	border-radius: 10px;
	background: var(--site-surface);
	color: var(--site-ink);
	font-size: 13.5px;
	font-family: inherit;
}
.page-universities .un-filter select:focus {
	outline: none;
	border-color: var(--site-teal);
	box-shadow: 0 0 0 3px rgba(var(--site-teal-rgb), .18);
}
.page-universities .un-filter select:disabled {
	opacity: .55;
	cursor: not-allowed;
}
.page-universities .un-filter-actions {
	display: flex;
	align-items: flex-end;
}
.page-universities .un-reset {
	width: 100%;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 16px;
	border: 1px solid var(--site-rule);
	border-radius: 10px;
	background: var(--site-surface);
	color: var(--site-ink);
	font-size: 13.5px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}
.page-universities .un-reset .ic {
	color: var(--site-muted);
	font-size: 12px;
	transition: color .2s ease;
}
.page-universities .un-reset:hover {
	border-color: var(--site-teal);
	color: var(--site-teal);
}
.page-universities .un-reset:hover .ic {
	color: var(--site-teal);
}
.page-universities .un-reset:focus-visible {
	outline: 3px solid rgba(var(--site-teal-rgb), .55);
	outline-offset: 2px;
}
.page-universities .un-panel {
	border: 1px solid var(--site-rule);
	border-radius: 18px;
	background: var(--site-surface);
	overflow: hidden;
}
.page-universities .un-panel-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 18px 24px;
	border-bottom: 1px solid var(--site-rule);
	color: var(--site-ink);
	font-size: 17px;
	font-weight: 700;
}
.page-universities .un-panel-head .ic {
	color: var(--site-teal);
	font-size: 15px;
}
.page-universities .un-panel-body {
	padding: 0;
}
.page-universities .un-loading {
	display: none;
	padding: 48px 20px;
	text-align: center;
	color: var(--site-muted);
}
.page-universities .un-loading.is-loading {
	display: block;
}
.page-universities .un-loading .ic {
	font-size: 24px;
	animation: site-spin 1s linear infinite;
}
.page-universities .un-loading p {
	margin: 12px 0 0;
	font-size: 14px;
}
.page-universities .un-table-wrap {
	overflow-x: auto;
}
.page-universities .un-table {
	width: 100%;
	border-collapse: collapse;
}
.page-universities .un-table thead th {
	padding: 14px 20px;
	background: var(--site-teal-deep);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	text-align: start;
	white-space: nowrap;
}
[data-bs-theme="dark"] .page-universities .un-table thead th {
	background: #2E7F96;
}
.page-universities .un-table thead th .ic {
	margin-inline-end: 6px;
	opacity: .85;
}
.page-universities .un-table tbody td {
	padding: 12px 20px;
	border-bottom: 1px solid var(--site-rule);
	color: var(--site-ink);
	font-size: 13.5px;
	line-height: 1.7;
	vertical-align: middle;
}
.page-universities .un-table tbody tr:last-child td {
	border-bottom: 0;
}
.page-universities .un-table tbody tr:hover td {
	background: rgba(var(--site-teal-rgb), .05);
}
[data-bs-theme="dark"] .page-universities .un-table tbody tr:hover td {
	background: rgba(var(--site-teal-rgb), .16);
}
.page-universities .un-table tbody tr.is-hidden {
	display: none;
}
.page-universities .un-table tbody tr.is-match td {
	background: rgba(var(--site-teal-rgb), .09);
}
[data-bs-theme="dark"] .page-universities .un-table tbody tr.is-match td {
	background: rgba(var(--site-teal-rgb), .26);
}
.page-universities .un-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--site-teal);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.page-universities .un-link:hover {
	color: var(--site-teal);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.page-universities .un-link .ic {
	font-size: 11px;
}
.page-universities .un-tree {
	display: none;
	padding: 18px 24px 24px;
}
.page-universities .un-tree.is-active {
	display: block;
}
.page-universities .un-tree-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}
.page-universities .un-tree-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.page-universities .un-tree-list .un-tree-list {
	margin-inline-start: 19px;
	padding-inline-start: 18px;
	border-inline-start: 1px dashed var(--site-rule);
}
.page-universities .un-tree-item > .un-tree-list {
	display: none;
}
.page-universities .un-tree-item.is-expanded > .un-tree-list {
	display: block;
}
.page-universities .un-tree-item.is-hidden {
	display: none;
}
.page-universities .un-tree-node {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0;
	padding: 10px 12px;
	border: 1px solid transparent;
	border-radius: 14px;
	background: var(--site-mist);
	transition: border-color .2s ease, background-color .2s ease;
}
[data-bs-theme="dark"] .page-universities .un-tree-node {
	background: rgba(255, 255, 255, .04);
}
.page-universities .un-tree-node:hover {
	border-color: var(--site-teal);
}
.page-universities .un-tree-item.is-match > .un-tree-node {
	border-color: var(--site-teal);
	background: rgba(var(--site-teal-rgb), .09);
}
[data-bs-theme="dark"] .page-universities .un-tree-item.is-match > .un-tree-node {
	background: rgba(var(--site-teal-rgb), .26);
}
.page-universities .un-tree-toggle {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--site-muted);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.page-universities .un-tree-toggle:hover {
	background: rgba(var(--site-teal-rgb), .09);
	color: var(--site-teal);
}
.page-universities .un-tree-toggle:focus-visible {
	outline: 3px solid rgba(var(--site-teal-rgb), .55);
	outline-offset: 2px;
}
.page-universities .un-tree-toggle .ic {
	font-size: 12px;
	transform: rotate(-90deg);
	transition: transform .2s ease;
}
[dir="rtl"] .page-universities .un-tree-toggle .ic {
	transform: rotate(90deg);
}
.page-universities .un-tree-item.is-expanded > .un-tree-node > .un-tree-toggle i,
[dir="rtl"] .page-universities .un-tree-item.is-expanded > .un-tree-node > .un-tree-toggle .ic {
	transform: rotate(0deg);
}
.page-universities .un-tree-leaf > .un-tree-node {
	padding-inline-start: 48px;
}
.page-universities .un-tree-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: rgba(var(--site-teal-rgb), .09);
	color: var(--site-teal);
}
[data-bs-theme="dark"] .page-universities .un-tree-icon {
	background: rgba(var(--site-teal-rgb), .26);
}
.page-universities .un-tree-icon .ic {
	font-size: 12px;
}
.page-universities .un-tree-label {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--site-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
}
.page-universities .un-tree-leaf .un-tree-label {
	font-weight: 500;
}
.page-universities .un-tree-count {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 8px;
	border-radius: 999px;
	background: rgba(var(--site-teal-rgb), .09);
	color: var(--site-teal);
	font-size: 11.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
[data-bs-theme="dark"] .page-universities .un-tree-count {
	background: rgba(var(--site-teal-rgb), .26);
}
.page-universities .un-tree-website {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--site-teal);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.page-universities .un-tree-website:hover {
	color: var(--site-teal);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.page-universities .un-tree-website .ic {
	font-size: 11px;
}
.page-universities .un-empty {
	display: none;
	padding: 48px 20px;
	text-align: center;
}
.page-universities .un-empty.is-visible {
	display: block;
}
.page-universities .un-empty .ic {
	color: var(--site-muted);
	font-size: 32px;
	opacity: .5;
}
.page-universities .un-empty-title {
	margin: 14px 0 0;
	color: var(--site-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.7;
}
@media (max-width: 767.98px) {
	.page-universities .un-search,
	.page-universities .un-tools {
		width: 100%;
	}
	.page-universities .un-btn {
		flex: 1 1 auto;
		justify-content: center;
	}
	.page-universities .un-filters-grid {
		grid-template-columns: 1fr;
	}
	.page-universities .un-panel-head {
		padding: 16px 16px;
	}
	.page-universities .un-table thead {
		display: none;
	}
	.page-universities .un-table,
	.page-universities .un-table tbody,
	.page-universities .un-table tbody tr,
	.page-universities .un-table tbody td {
		display: block;
		width: 100%;
	}
	.page-universities .un-table tbody tr {
		margin: 12px;
		padding: 12px;
		border: 1px solid var(--site-rule);
		border-radius: 14px;
	}
	.page-universities .un-table tbody td {
		padding: 6px 0;
		border-bottom: 0;
	}
	.page-universities .un-table tbody td:empty {
		display: none;
	}
	.page-universities .un-table tbody td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 2px;
		color: var(--site-muted);
		font-size: 11.5px;
		font-weight: 600;
	}
	.page-universities .un-tree {
		padding: 14px;
	}
	.page-universities .un-tree-list .un-tree-list {
		margin-inline-start: 10px;
		padding-inline-start: 10px;
	}
	.page-universities .un-tree-leaf > .un-tree-node {
		padding-inline-start: 12px;
	}
}
@media print {
	.page-universities .un-toolbar,
	.page-universities .un-filters,
	.page-universities .un-tree-actions {
		display: none !important;
	}
	.page-universities .un-panel {
		border: 0;
	}
	.page-universities .un-table thead th {
		background: #eee;
		color: #000;
	}
}
.page-universities .un-intro,
.page-universities .un-outro {
	color: var(--site-ink);
	line-height: 1.9;
	font-size: 1rem;
}
.page-universities .un-intro {
	margin: 0 0 18px;
}
.page-universities .un-outro {
	margin: 24px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--site-rule);
	color: var(--site-muted);
	font-size: .9375rem;
}
.page-universities .un-notice {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0 0 18px;
	padding: 14px 18px;
	border-radius: 12px;
	border: 1px solid rgba(var(--site-teal-rgb), .25);
	background: rgba(var(--site-teal-rgb), .07);
	color: var(--site-ink);
	line-height: 1.8;
}
.page-universities .page-band .un-notice .ic {
	color: var(--site-teal); font-size: 1.1rem; margin-top: 4px;
}
@media (prefers-reduced-motion: reduce) {
	.page-universities .un-tree-toggle i,
	.page-universities .un-tree-node,
	.page-universities .un-btn,
	.page-universities .un-reset {
		transition: none;
	}
}

/* ==== module: hierarchical ==========================================================
   Organisation chart: the tree of units (hierarchical.js), the toolbar with search and print, the unit info modal.
   Only what no other module has; every rule is scoped under .page-hierarchical (set on the
   module's page-band). Shared parts use the components above. */
.page-hierarchical .hr-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 20px;
	margin: 0 0 28px;
}
.page-hierarchical .hr-tools {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.page-hierarchical .hr-search {
	position: relative;
	display: flex;
	align-items: center;
	width: min(360px, 100%);
	height: 42px;
	padding-inline: 14px;
	border: 1px solid var(--site-rule);
	border-radius: 10px;
	background: var(--site-surface);
}
.page-hierarchical .hr-search:focus-within {
	border-color: var(--site-teal);
	box-shadow: 0 0 0 3px rgba(var(--site-teal-rgb), .18);
}
.page-hierarchical .hr-search-icon {
	flex: 0 0 auto;
	margin-inline-end: 10px;
	color: var(--site-muted);
	font-size: 14px;
}
.page-hierarchical .hr-search-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--site-ink);
	font-size: 14px;
	font-family: inherit;
}
.page-hierarchical .hr-search-input:focus {
	outline: none;
}
.page-hierarchical .hr-search-input::placeholder {
	color: var(--site-muted);
}
.page-hierarchical .hr-search-input::-webkit-search-cancel-button {
	appearance: none;
}
.page-hierarchical .hr-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 16px;
	border: 1px solid var(--site-rule);
	border-radius: 10px;
	background: var(--site-surface);
	color: var(--site-ink);
	font-size: 13.5px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.page-hierarchical .hr-btn .ic {
	font-size: 13px;
	color: var(--site-muted);
	transition: color .2s ease;
}
.page-hierarchical .hr-btn:hover {
	border-color: var(--site-teal);
	color: var(--site-teal);
}
.page-hierarchical .hr-btn:hover .ic {
	color: var(--site-teal);
}
.page-hierarchical .hr-btn:focus-visible {
	outline: 3px solid rgba(var(--site-teal-rgb), .55);
	outline-offset: 2px;
}
.page-hierarchical .hr-btn-primary {
	border-color: var(--site-teal-deep);
	background: var(--site-teal-deep);
	color: #fff;
}
.page-hierarchical .hr-btn-primary .ic {
	color: #fff;
}
.page-hierarchical .hr-btn-primary:hover {
	border-color: #185C73;
	background: #185C73;
	color: #fff;
}
.page-hierarchical .hr-btn-primary:hover .ic {
	color: #fff;
}
[data-bs-theme="dark"] .page-hierarchical .hr-btn-primary {
	border-color: #2E7F96;
	background: #2E7F96;
}
[data-bs-theme="dark"] .page-hierarchical .hr-btn-primary:hover {
	border-color: #3C9AB4;
	background: #3C9AB4;
}
.page-hierarchical .hr-count {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 28px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(var(--site-teal-rgb), .09);
	color: var(--site-teal);
	font-size: 12.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
[data-bs-theme="dark"] .page-hierarchical .hr-count {
	background: rgba(var(--site-teal-rgb), .26);
}
.page-hierarchical .hr-panel {
	border: 1px solid var(--site-rule);
	border-radius: 18px;
	background: var(--site-surface);
	overflow: hidden;
}
.page-hierarchical .hr-panel-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 18px 24px;
	border-bottom: 1px solid var(--site-rule);
	color: var(--site-ink);
	font-size: 17px;
	font-weight: 700;
}
.page-hierarchical .hr-panel-head .ic {
	color: var(--site-teal);
	font-size: 15px;
}
.page-hierarchical .hr-panel-body {
	padding: 16px 24px 24px;
}
.page-hierarchical .hr-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.page-hierarchical .hr-children {
	margin-inline-start: 19px;
	padding-inline-start: 18px;
	border-inline-start: 1px dashed var(--site-rule);
}
.page-hierarchical .hr-item > .hr-children {
	display: none;
}
.page-hierarchical .hr-item.is-expanded > .hr-children {
	display: block;
}
.page-hierarchical .hr-item.is-hidden {
	display: none;
}
.page-hierarchical .hr-node {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0;
	padding: 10px 12px;
	border: 1px solid transparent;
	border-radius: 14px;
	background: var(--site-mist);
	transition: border-color .2s ease, background-color .2s ease;
}
.page-hierarchical .hr-node:hover {
	border-color: var(--site-teal);
}
[data-bs-theme="dark"] .page-hierarchical .hr-node {
	background: rgba(255, 255, 255, .04);
}
.page-hierarchical .hr-item.is-match > .hr-node {
	border-color: var(--site-teal);
	background: rgba(var(--site-teal-rgb), .09);
}
[data-bs-theme="dark"] .page-hierarchical .hr-item.is-match > .hr-node {
	background: rgba(var(--site-teal-rgb), .26);
}
.page-hierarchical .hr-toggle {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--site-muted);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.page-hierarchical .hr-toggle:hover {
	background: rgba(var(--site-teal-rgb), .09);
	color: var(--site-teal);
}
.page-hierarchical .hr-toggle:focus-visible {
	outline: 3px solid rgba(var(--site-teal-rgb), .55);
	outline-offset: 2px;
}
.page-hierarchical .hr-toggle .ic {
	font-size: 12px;
	transition: transform .2s ease;
}
.page-hierarchical .hr-item.is-expanded > .hr-node > .hr-toggle .ic {
	transform: rotate(180deg);
}
.page-hierarchical .hr-toggle-spacer {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
}
.page-hierarchical .hr-content {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	color: var(--site-ink);
	text-decoration: none;
}
.page-hierarchical a.hr-content:hover {
	color: var(--site-teal);
	text-decoration: none;
}
.page-hierarchical .hr-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: rgba(var(--site-teal-rgb), .09);
	color: var(--site-teal);
}
[data-bs-theme="dark"] .page-hierarchical .hr-icon {
	background: rgba(var(--site-teal-rgb), .26);
}
.page-hierarchical .hr-icon .ic {
	font-size: 12px;
}
.page-hierarchical .hr-title {
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
}
.page-hierarchical .hr-info {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-inline-start: auto;
	padding: 0;
	border: 1px solid var(--site-rule);
	border-radius: 8px;
	background: var(--site-surface);
	color: var(--site-muted);
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}
.page-hierarchical .hr-info:hover {
	border-color: var(--site-teal);
	color: var(--site-teal);
}
.page-hierarchical .hr-info:focus-visible {
	outline: 3px solid rgba(var(--site-teal-rgb), .55);
	outline-offset: 2px;
}
.page-hierarchical .hr-info .ic {
	font-size: 11px;
}
.page-hierarchical .hr-empty {
	display: none;
	padding: 48px 20px;
	text-align: center;
}
.page-hierarchical .hr-empty.is-visible {
	display: block;
}
.page-hierarchical .hr-empty .ic {
	color: var(--site-muted);
	font-size: 32px;
	opacity: .5;
}
.page-hierarchical .hr-empty-title {
	margin: 14px 0 0;
	color: var(--site-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.7;
}
.page-hierarchical .hr-modal .modal-body {
	padding: 16px 22px 22px;
	color: var(--site-ink);
	font-size: 15px;
	line-height: 2;
}
.page-hierarchical .hr-info-list {
	margin: 0;
	padding-inline-start: 22px;
	display: grid;
	gap: 10px;
}
.page-hierarchical .hr-info-list li {
	padding-inline-start: 4px;
}
.page-hierarchical .hr-info-list li::marker {
	color: var(--site-teal);
	font-weight: 700;
}
.page-hierarchical .hr-modal .modal-body > p {
	margin: 0 0 10px;
}
.page-hierarchical .hr-modal .modal-body > p:last-child {
	margin-bottom: 0;
}
.page-hierarchical .hr-warning {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 16px;
	padding: 12px 14px;
	border: 1px solid #ffc700;
	border-radius: 12px;
	background: rgba(255, 199, 0, .12);
	color: #4a3a00;
	font-size: 14px;
	line-height: 1.8;
}
.page-hierarchical .hr-warning .ic {
	color: #9a7a00;
	margin-top: 4px;
}
[data-bs-theme="dark"] .page-hierarchical .hr-warning {
	background: rgba(255, 199, 0, .10);
	color: #ffe08a;
}
[data-bs-theme="dark"] .page-hierarchical .hr-warning .ic {
	color: #ffc700;
}
@media (max-width: 767.98px) {
	.page-hierarchical .hr-search {
		width: 100%;
	}
	.page-hierarchical .hr-tools {
		width: 100%;
	}
	.page-hierarchical .hr-btn {
		flex: 1 1 auto;
		justify-content: center;
	}
	.page-hierarchical .hr-panel-body {
		padding: 12px 14px 18px;
	}
	.page-hierarchical .hr-children {
		margin-inline-start: 10px;
		padding-inline-start: 10px;
	}
}
@media print {
	.page-hierarchical .hr-toolbar {
		display: none !important;
	}
	.page-hierarchical .hr-panel {
		border: 0;
	}
	.page-hierarchical .hr-item > .hr-children {
		display: block !important;
	}
	.page-hierarchical .hr-toggle,
	.page-hierarchical .hr-info {
		display: none !important;
	}
	.page-hierarchical .hr-node {
		background: #fff;
		border-color: #ddd;
	}
}
@media (prefers-reduced-motion: reduce) {
	.page-hierarchical .hr-toggle i,
	.page-hierarchical .hr-node,
	.page-hierarchical .hr-btn,
	.page-hierarchical .hr-info {
		transition: none;
	}
}

/* ==============================================================================
   HOME PAGE
   The home page (templates/fiction/home_{ar,en}.dwt, body.page-home) and its blocks:
   the audience tiles, the latest-news strip and the announcements carousel (the poll
   is its own POLL section below). Copied from assets/css/modules/home/home.css,
   templates/fiction/assets/css/block-announcements.css and the poll sheets, which stay
   only for the region sites. The slides keep block-carousel.css: the admin's slide
   preview loads that same file, so it stays the one source for the carousel.
   ============================================================================== */

/* Arabic headings and body copy in Tajawal on the home page. */
[dir="rtl"] .page-home :is(h1, h2, h3, h4, p) {
	font-family: 'Tajawal', sans-serif !important;
}

/* One viewport over a looping video: the teal shows while the video is arriving and on
   any device that will not play it. */
body.page-home {
	margin: 0;
	line-height: inherit;
	background: #2b647f !important;
}

body.page-home video {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

/* The tint that keeps white text legible over whatever frame is playing. */
body.page-home .overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: linear-gradient(180deg, #0000009f 0%, #00505fd1 78%, #009bb7 100%);
}

/* Zero-specificity resets (as the old sheet's bare element rules were), so .ic and
   every class still wins. */
:where(.page-home) :where(img, video) {
	max-width: 100%;
	height: auto;
}

:where(.page-home) :where(audio, canvas, embed, iframe, img, object, video) {
	display: block;
	vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
	body.page-home video {
		display: none;
	}
}

/* The six audience tiles, each a link into the services directory; equal heights. */
.audience-row {
	align-items: stretch;
}

.audience-tile {
	width: 100%;
	height: 100%;
	border: unset;
	text-align: start;
}

.audience-icon {
	width: auto;
	height: 50px;
}

/* Latest news: the photograph is an <img> filling its rounded tile. */
.news-thumb {
	overflow: hidden;
}

.news-thumb > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: inherit;
}

/* The header's notification dot. The theme blinks it by animating visibility, which the
   browser cannot hand to the compositor (a repaint every step, flagged by PageSpeed);
   opacity blinks the same way on the compositor. */
.animation-blink {
	animation: site-blink 1s steps(5, start) infinite;
}

@keyframes site-blink {
	to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.animation-blink { animation: none; }
}

/* ---- chatbot launcher (home). The button is printed by home_{ar,en}.dwt; the chatbot
   itself (templates/fiction/assets/plugins/custom/chatbot/) loads on its first click. */
#chatbot-toggler {
  position: fixed;
  bottom: 28px;
  right: 28px;
  border: none;
  height: 56px;
  width: 56px;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(232, 163, 23, 0.6);
  -webkit-backdrop-filter: blur(12px) saturate(170%);
  backdrop-filter: blur(12px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 6px 24px rgba(232, 163, 23, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.45);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9999999999;
}
#chatbot-toggler:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 32px rgba(232, 163, 23, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.5);
}
.chatbot-container.show-chatbot #chatbot-toggler {
  transform: rotate(90deg);
}
#chatbot-toggler span {
  color: #fff;
  position: absolute;
  font-size: 1.3rem;
}
#chatbot-toggler span:last-child,
.chatbot-container.show-chatbot #chatbot-toggler span:first-child {
  opacity: 0;
}
.chatbot-container.show-chatbot #chatbot-toggler span:last-child {
  opacity: 1;
}
#chatbot-toggler .fx-ai-toggler-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#chatbot-toggler .fx-ai-toggler-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
#chatbot-toggler .ic { width: 1.3rem; height: 1.3rem; }
[data-bs-theme="dark"] #chatbot-toggler {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
@media (max-width: 480px) {
  #chatbot-toggler {
    bottom: 16px;
    right: 16px;
    height: 50px;
    width: 50px;
  }
}

/* ---- announcements (Block-announcements) */
.announce-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 0 12px;
}

.announce-heading {
	display: flex;
	align-items: center;
	gap: 10px;
}

.announce-heading-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(255, 166, 33, .18);
	color: #FFA621;
	font-size: 18px;
}

.announce-header h3 {
	margin: 0;
	color: #fff;
	font-size: 1.3rem;
	font-weight: 600;
}

.announce-all {
	color: rgba(255, 255, 255, .7);
	font-size: .8rem;
	text-decoration: none;
	transition: color .2s;
}

.announce-all:hover,
.announce-all:focus-visible {
	color: #FFA621;
}

.announce-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.announce-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	overflow: hidden;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 12px;
	background: rgba(255, 255, 255, .04);
	text-decoration: none;
	transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}

.announce-item::before {
	content: '';
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	width: 3px;
	height: 100%;
	border-start-end-radius: 3px;
	border-end-end-radius: 3px;
	transition: height .3s;
}

.announce-item:hover {
	border-color: rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .08);
	transform: translateX(-3px);
}

[dir="ltr"] .announce-item:hover {
	transform: translateX(3px);
}

.announce-dot {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-top: 2px;
	border-radius: 10px;
	font-size: 18px;
}

.announce-body {
	flex: 1;
	min-width: 0;
}

/* Two lines are always reserved: the carousel rotates every 4 s and a one-line title
   made the card 24px shorter, pushing the rows below on every turn (layout shift). */
.announce-body .announce-title {
	display: -webkit-box;
	overflow: hidden;
	min-height: calc(2 * 1.5em);
	margin: 0 0 4px;
	color: #fff !important;
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.5;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	transition: color .2s;
}

.announce-item:hover .announce-title {
	color: #FFA621 !important;
}

/* Both chips are optional; the row keeps one chip's height so it never collapses. */
.announce-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	min-height: calc(.72rem * 1.5 + 4px);
}

.announce-cat {
	padding: 2px 8px;
	border-radius: 6px;
	font-size: .72rem;
	font-weight: 500;
	line-height: 1.6;
}

.announce-date {
	display: flex;
	align-items: center;
	gap: 4px;
	color: rgba(255, 255, 255, .6);
	font-size: .72rem;
}

.announce-indicators {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding-top: 14px;
}

.announce-indicators button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.announce-indicators button::before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .3);
	transition: width .3s, background-color .3s;
}

.announce-indicators button.active::before {
	width: 22px;
	border-radius: 4px;
	background: #FFA621;
}

/* ==============================================================================
   POLL
   One poll component for the home launcher card (blocks/fiction/{ar,en}/Block-survey.php)
   and the open poll on the vote page (modules/vote/index.php). Behaviour: [data-poll] and
   [data-poll-dock] in site.js. The default tone sits on a light card (vote page, dark mode
   aware); .is-glass is the home card over the video. Logical sides only, so one set of
   rules serves both directions; --poll-from is the side the launcher is on.
   Motion: transform / opacity / filter only; everything off under reduced motion.
   ============================================================================== */
:root {
	/* The home page's own accent: the announcements' icon tiles, category chips and the
	   active carousel dot are all #FFA621, solid or as a tint. No gradients, no glows. */
	--poll-amber: #ffa621;                /* the announcements' accent: tiles, chips, bars */
	--poll-amber-ink: #1e1e2d;
	/* The buttons are the header's «تسجيل الدخول» (.btn-warning): same yellow, same white
	   label, same hover, read from the theme so they can never drift apart. */
	--poll-btn: var(--bs-warning, #f6c000);
	--poll-btn-hover: #dead00;
	--poll-btn-ink: #fff;
	--poll-ease: cubic-bezier(.22, 1, .36, 1);   /* ease-out: arrives fast, settles softly */
	--poll-glass: rgba(255, 255, 255, .10);
	--poll-spring: cubic-bezier(.34, 1.56, .64, 1);
	--poll-from: 14px;                    /* LTR: the launcher is on the right */
}

[dir="rtl"] {
	--poll-from: -14px;                   /* RTL: the launcher is on the left */
}

/* ---- the launcher on the screen edge */
.poll-dock {
	position: fixed;
	top: 50%;
	inset-inline-end: 0;
	z-index: 1040;                        /* under Bootstrap modals (1055) */
}

.poll-launcher {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	overflow: hidden;
	width: 46px;
	padding: 14px 0 16px;
	border: 0;
	border-start-start-radius: 10px;
	border-end-start-radius: 10px;
	background: var(--poll-btn);
	box-shadow: 0 3px 4px rgba(0, 0, 0, .08);
	color: var(--poll-btn-ink);
	cursor: pointer;
	translate: 0 -50%;
	transition: width .35s var(--poll-spring), background-color .2s ease;
}

.poll-launcher:hover,
.poll-launcher:focus-visible,
.poll-dock.is-open .poll-launcher {
	width: 50px;                          /* grows out of the edge; never leaves a gap */
	background: var(--poll-btn-hover);
}

.poll-launcher:focus-visible {
	outline: 3px solid var(--site-teal-deep);
	outline-offset: -5px;
}

.poll-launcher-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .22);
	font-size: 16px;
}

.poll-launcher-text {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-orientation: mixed;
	white-space: nowrap;
	writing-mode: vertical-rl;
}

/* "You have not voted yet": a dot in the site's deep teal that breathes. */
.poll-dot {
	position: absolute;
	top: 7px;
	inset-inline-start: 7px;
	width: 10px;
	height: 10px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--site-teal-deep);
}

.poll-dot::after {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	background: var(--site-teal-deep);
	animation: poll-halo 2.2s ease-out infinite;
}

.poll-launcher.is-nudge {
	animation: poll-nudge .9s var(--poll-spring);
}

/* ---- the card */
.poll-card {
	position: fixed;
	top: 50%;
	inset-inline-end: 60px;
	display: flex;
	flex-direction: column;
	width: min(370px, calc(100vw - 84px));
	max-height: min(88vh, 660px);
	overflow: hidden auto;
	padding: 18px 20px 14px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 12px;
	/* The home panels' frosted white (10% + blur 21px), over a dark base so the text stays
	   readable where the card covers the bright announcements or news. */
	background-color: rgba(8, 34, 42, .78);    /* white text >= 6.5:1 even over a white photo */
	background-image: linear-gradient(var(--poll-glass), var(--poll-glass));
	box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
	color: #fff;
	translate: 0 -50%;
	-webkit-backdrop-filter: blur(21px);
	backdrop-filter: blur(21px);
	transform-origin: right center;
	overscroll-behavior: contain;
}

[dir="rtl"] .poll-card {
	transform-origin: left center;
}

.poll-card[hidden],
.poll-backdrop[hidden] {
	display: none;
}

.poll-card:focus {
	outline: none;
}

/* Opening: the card unfolds out of the tab - its edge sweeps open from the tab's side
   while it slides out a little - and the content arrives with it, not after it. No blur
   (a filter switches the frosted backdrop off while it runs) and no overshoot. */
.poll-card {
	--poll-clip-from: inset(0 0 0 100% round 12px);    /* LTR: the tab is on the right */
}

[dir="rtl"] .poll-card {
	--poll-clip-from: inset(0 100% 0 0 round 12px);    /* RTL: the tab is on the left */
}

.poll-card.is-opening {
	animation: poll-unfold .42s var(--poll-ease) both;
}

.poll-card.is-closing {
	animation: poll-fold-away .2s ease-in both;
}

.poll-card.is-opening :is(.poll-head, .poll-question, .poll-hint, .poll-choice, .poll-result, .poll-submit, .poll-meta, .poll-all) {
	animation: poll-settle .4s var(--poll-ease) both;
	animation-delay: calc(var(--i, 0) * 30ms);
}

.poll-handle {
	display: none;
}

.poll-backdrop {
	display: none;
}

.poll-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.poll-head-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(255, 166, 33, .18);
	color: var(--poll-amber);
	font-size: 18px;
}

.poll-title {
	flex: 1 1 auto;
	margin: 0;
	color: #fff;
	font-size: 1.3rem;
	font-weight: 600;
}

.poll-close {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, .06);
	color: rgba(255, 255, 255, .8);
	font-size: 16px;
	transition: background-color .2s ease, color .2s ease, transform .3s var(--poll-spring);
}

.poll-close:hover,
.poll-close:focus-visible {
	background: rgba(255, 255, 255, .12);
	color: #fff;
	transform: rotate(90deg);
}

.poll-close:focus-visible {
	outline: 2px solid var(--poll-amber);
	outline-offset: 2px;
}

.poll-all {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px dashed rgba(255, 255, 255, .25);
	color: rgba(255, 255, 255, .75);
	font-size: .8rem;
	font-weight: 500;
	text-decoration: none;
}

.poll-all .ic {
	transition: transform .3s var(--poll-spring);
}

.poll-all:hover,
.poll-all:focus-visible {
	color: var(--poll-amber);
	text-decoration: none;
}

.poll-all:hover .ic,
.poll-all:focus-visible .ic {
	transform: translateX(calc(var(--poll-from) * -.35));
}

/* ---- one poll: question, choices, vote button (light tone first) */
.poll-fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.poll-question {
	float: none;
	width: 100%;
	margin: 0 0 4px;
	padding: 0;
	color: var(--site-ink);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.65;
}

.poll-hint {
	margin: 0 0 12px;
	color: var(--site-muted);
	font-size: .85rem;
}

.poll-choices {
	display: grid;
	gap: 8px;
}

.poll-choice {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	overflow: hidden;
	margin: 0;
	padding: 12px 14px;
	border: 1.5px solid var(--site-rule);
	border-radius: 12px;
	background: var(--site-surface);
	color: var(--site-ink);
	font-size: .9rem;
	line-height: 1.6;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease, transform .25s var(--poll-spring);
}

.poll-choice:hover {
	border-color: rgba(var(--site-teal-rgb), .45);
	transform: translateY(-1px);
}

.poll-choice.is-picked {
	border-color: var(--site-teal);
	background: rgba(var(--site-teal-rgb), .06);
}

/* Keyboard focus only: a mouse pick is already shown by .is-picked. */
.poll-choice:has(.poll-choice-input:focus-visible) {
	outline: 3px solid rgba(var(--site-teal-rgb), .45);
	outline-offset: 2px;
}

/* The radio stays in the form and the tab order; only its look is replaced. */
.poll-choice-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.poll-choice-mark {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 2px solid rgba(var(--site-teal-rgb), .45);
	border-radius: 50%;
	transition: border-color .2s ease, background-color .2s ease;
}

.poll-choice-mark::after {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--site-teal);
	transform: scale(0);
}

.poll-choice.is-picked .poll-choice-mark {
	border-color: var(--site-teal);
}

.poll-choice.is-picked .poll-choice-mark::after {
	animation: poll-pop .4s var(--poll-spring) both;
}

.poll-choice-text {
	position: relative;
	flex: 1 1 auto;
}

.poll-ripple {
	position: absolute;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	background: rgba(var(--site-teal-rgb), .18);
	animation: poll-ripple .65s ease-out forwards;
	pointer-events: none;
}

.poll-error {
	margin: 10px 0 0;
	color: var(--site-danger);
	font-size: .82rem;
	font-weight: 600;
}

.poll-error[hidden],
.poll-results[hidden],
.poll-form[hidden] {
	display: none;
}

.poll-submit {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 46px;
	margin: 14px auto 0;
	overflow: hidden;
	border: 0;
	border-radius: 10px;
	background: var(--site-teal);
	color: #fff;
	font-size: .95rem;
	font-weight: 700;
	transition: width .4s var(--poll-spring), border-radius .4s var(--poll-spring), background-color .3s ease, opacity .2s ease;
}

.poll-submit:disabled {
	opacity: .45;
	cursor: not-allowed;
}

.poll-submit:not(:disabled):hover {
	background: var(--site-teal-deep);
}

.poll-submit:focus-visible {
	outline: 3px solid rgba(var(--site-teal-rgb), .55);
	outline-offset: 2px;
}

.poll-submit.is-ready {
	animation: poll-wake .55s var(--poll-spring);
}

/* Voting: the button becomes a circle with a spinning ring, then a check draws itself. */
.poll-submit.is-voting,
.poll-submit.is-success {
	width: 46px;
	border-radius: 50%;
	opacity: 1;
}

.poll-submit-label {
	transition: opacity .15s ease;
}

.poll-submit.is-voting .poll-submit-label,
.poll-submit.is-success .poll-submit-label {
	opacity: 0;
}

.poll-submit-spin,
.poll-submit-check {
	position: absolute;
	inset: 0;
	margin: auto;
	opacity: 0;
}

.poll-submit-spin {
	width: 22px;
	height: 22px;
	border: 3px solid rgba(127, 127, 127, .3);
	border-top-color: currentColor;
	border-radius: 50%;
}

.poll-submit.is-voting .poll-submit-spin {
	opacity: 1;
	animation: poll-spin .7s linear infinite;
}

.poll-submit-check {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-dasharray: 24;
	stroke-dashoffset: 24;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 3;
}

.poll-submit.is-success {
	background: var(--site-success);
	color: #fff;
}

.poll-submit.is-success .poll-submit-check {
	opacity: 1;
	animation: poll-draw .4s ease-out .05s forwards;
}

[data-poll].is-folding .poll-form {
	animation: poll-fold .26s ease-in forwards;
}

/* ---- results */
.poll-result-list {
	display: grid;
	gap: 14px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.poll-result-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
	font-size: .88rem;
	line-height: 1.55;
}

.poll-result-text {
	flex: 1 1 60%;
	min-width: 0;
	color: var(--site-ink);
}

.poll-result.is-mine .poll-result-text {
	font-weight: 700;
}

.poll-pct {
	min-width: 3.2ch;
	margin-inline-start: auto;
	color: var(--site-ink);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	text-align: end;
}

.poll-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 9px;
	border-radius: 6px;
	font-size: .7rem;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}

.poll-tag .ic {
	font-size: 12px;
}

.poll-tag.is-mine {
	background: rgba(var(--site-teal-rgb), .12);
	color: var(--site-teal);
}

.poll-tag.is-top {
	background: rgba(var(--site-warning-rgb), .14);
	color: #7a5200;
}

[data-bs-theme="dark"] .poll-tag.is-top {
	color: var(--poll-amber);
}

.poll-track {
	display: block;
	overflow: hidden;
	height: 9px;
	border-radius: var(--site-radius-pill);
	background: var(--site-mist);
}

.poll-bar {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--site-teal);
	transform: scaleX(var(--p, 0));
	transform-origin: left center;
}

[dir="rtl"] .poll-bar {
	transform-origin: right center;
}

.poll-result.is-top .poll-bar {
	background: var(--site-warning);
}

/* The reveal: rows rise, bars grow with a little overshoot, the tags pop in last. */
[data-poll].is-reveal .poll-result {
	animation: poll-rise .45s both;
	animation-delay: calc(var(--i, 0) * 80ms);
}

[data-poll].is-reveal .poll-bar {
	animation: poll-grow .95s var(--poll-spring) both;
	animation-delay: calc(.12s + var(--i, 0) * 80ms);
}

[data-poll].is-reveal .poll-tag.is-mine {
	animation: poll-tag-in .5s var(--poll-spring) both;
	animation-delay: calc(.5s + var(--i, 0) * 80ms);
}

[data-poll].is-reveal .poll-tag.is-top {
	animation: poll-pop .55s var(--poll-spring) both;
	animation-delay: calc(.75s + var(--i, 0) * 80ms);
}

[data-poll].is-reveal .poll-tag.is-top .ic {
	animation: poll-wiggle .7s ease-in-out both;
	animation-delay: calc(1.2s + var(--i, 0) * 80ms);
}

.poll-status {
	margin: 12px 0 0;
	color: var(--site-success);
	font-size: .82rem;
	font-weight: 700;
}

.poll-status:empty {
	display: none;
}

.poll-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 12px 0 0;
	color: var(--site-muted);
	font-size: .78rem;
}

.poll-date {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.poll-confetti {
	position: fixed;
	inset: 0;
	z-index: 1100;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* ---- the glass tone (home card over the video) */
.poll.is-glass .poll-question,
.poll.is-glass .poll-result-text,
.poll.is-glass .poll-pct {
	color: #fff;
}

.poll.is-glass .poll-hint,
.poll.is-glass .poll-meta {
	color: rgba(255, 255, 255, .72);
}

.poll.is-glass .poll-choice {
	border: 1px solid rgba(255, 255, 255, .06);
	background: rgba(255, 255, 255, .04);
	color: #fff;
}

.poll.is-glass .poll-choice:hover {
	border-color: rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .08);
}

.poll.is-glass .poll-choice.is-picked {
	border-color: var(--poll-amber);
	background: rgba(255, 166, 33, .12);
}

.poll.is-glass .poll-choice:has(.poll-choice-input:focus-visible) {
	outline-color: var(--poll-amber);
}

.poll.is-glass .poll-choice-mark {
	border-color: rgba(255, 255, 255, .45);
}

.poll.is-glass .poll-choice-mark::after {
	background: var(--poll-amber);
}

.poll.is-glass .poll-choice.is-picked .poll-choice-mark {
	border-color: var(--poll-amber);
}

/* On the home card the button is the page's accent, as the active carousel dot is. */
.poll.is-glass .poll-submit {
	background: var(--poll-btn);
	color: var(--poll-btn-ink);
}

.poll.is-glass .poll-submit:not(:disabled):hover {
	background: var(--poll-btn-hover);
}

.poll.is-glass .poll-ripple {
	background: rgba(255, 255, 255, .35);
}

.poll.is-glass .poll-error {
	color: #ffb4ab;
}

.poll.is-glass .poll-submit:focus-visible {
	outline-color: #fff;
}

.poll.is-glass .poll-track {
	background: rgba(255, 255, 255, .12);
}

/* Bars as the carousel dots: white for the others, the accent for the leader. */
.poll.is-glass .poll-bar {
	background: rgba(255, 255, 255, .7);
}

.poll.is-glass .poll-result.is-top .poll-bar {
	background: var(--poll-amber);
}

.poll.is-glass .poll-tag.is-mine {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

/* As the announcements' category chip. */
.poll.is-glass .poll-tag.is-top {
	background: rgba(255, 166, 33, .15);
	color: var(--poll-amber);
}

.poll.is-glass .poll-status {
	color: rgba(255, 255, 255, .9);
}

[dir="rtl"] :is(.poll-card, [data-poll]) {
	font-family: 'Tajawal', sans-serif;
}

/* ---- phones: a smaller tab, and the card is a bottom sheet over a dim backdrop */
@media (max-width: 575.98px) {
	.poll-launcher {
		gap: 8px;
		width: 38px;
		padding: 10px 0 12px;
	}

	.poll-launcher-icon {
		width: 24px;
		height: 24px;
		font-size: 14px;
	}

	.poll-launcher-text {
		font-size: .72rem;
	}

	.poll-backdrop {
		position: fixed;
		inset: 0;
		display: block;
		background: rgba(4, 18, 23, .5);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
		animation: poll-fade .3s ease both;
	}

	.poll-card {
		top: auto;
		bottom: 0;
		inset-inline: 0;
		width: 100%;
		max-height: 84vh;
		max-height: 84dvh;
		/* The accessibility and chatbot buttons sit in the bottom corners above everything
		   (z-index 2147483647); the sheet's content ends above them. */
		padding: 10px 18px calc(76px + env(safe-area-inset-bottom));
		border-radius: 16px 16px 0 0;
		translate: none;
		transform-origin: center bottom;
	}

	.poll-card.is-opening {
		animation: poll-sheet-in .42s var(--poll-ease) both;
	}

	.poll-card.is-closing {
		animation: poll-sheet-out .22s ease-in both;
	}

	.poll-handle {
		display: block;
		width: 44px;
		height: 5px;
		margin: 0 auto 12px;
		border-radius: 3px;
		background: rgba(255, 255, 255, .3);
	}
}

/* ---- keyframes */
@keyframes poll-halo {
	0% { opacity: .7; transform: scale(1); }
	100% { opacity: 0; transform: scale(2.6); }
}

@keyframes poll-nudge {
	0%, 100% { width: 46px; }
	20% { width: 58px; }
	40% { width: 48px; }
	60% { width: 54px; }
	80% { width: 47px; }
}

@keyframes poll-unfold {
	from { clip-path: var(--poll-clip-from); opacity: .9; transform: translateX(calc(var(--poll-from) * 1.4)); }
	to { clip-path: inset(0 0 0 0 round 12px); opacity: 1; transform: none; }
}

@keyframes poll-fold-away {
	to { clip-path: var(--poll-clip-from); opacity: .4; transform: translateX(calc(var(--poll-from) * 1)); }
}

@keyframes poll-settle {
	from { opacity: 0; transform: translateX(calc(var(--poll-from) * .6)); }
	to { opacity: 1; transform: none; }
}

@keyframes poll-sheet-in {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}

@keyframes poll-sheet-out {
	to { transform: translateY(100%); }
}

@keyframes poll-rise {
	from { opacity: 0; transform: translateX(var(--poll-from)); }
	to { opacity: 1; transform: none; }
}

@keyframes poll-pop {
	0% { opacity: 0; transform: scale(0); }
	70% { opacity: 1; transform: scale(1.15); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes poll-tag-in {
	from { opacity: 0; transform: translateX(var(--poll-from)) scale(.8); }
	to { opacity: 1; transform: none; }
}

@keyframes poll-wiggle {
	0%, 100% { transform: rotate(0); }
	25% { transform: rotate(-14deg); }
	50% { transform: rotate(10deg); }
	75% { transform: rotate(-6deg); }
}

@keyframes poll-ripple {
	from { opacity: 1; transform: scale(1); }
	to { opacity: 0; transform: scale(28); }
}

@keyframes poll-wake {
	0% { transform: scale(.96); }
	55% { transform: scale(1.04); }
	100% { transform: scale(1); }
}

@keyframes poll-spin {
	to { transform: rotate(360deg); }
}

@keyframes poll-draw {
	to { stroke-dashoffset: 0; }
}

@keyframes poll-fold {
	to { opacity: 0; transform: translateY(-10px) scale(.97); }
}

@keyframes poll-grow {
	from { transform: scaleX(0); }
}

@keyframes poll-fade {
	from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.poll-dot::after {
		display: none;
		animation: none;
	}

	.poll-launcher.is-nudge,
	.poll-submit.is-ready,
	.poll-card.is-opening *,
	[data-poll].is-reveal *,
	.poll-choice.is-picked .poll-choice-mark::after {
		animation: none !important;
	}

	.poll-choice.is-picked .poll-choice-mark::after {
		transform: scale(1);
	}

	.poll-card.is-opening,
	.poll-card.is-closing,
	[data-poll].is-folding .poll-form {
		animation: poll-fade .15s ease both !important;
	}

	.poll-launcher,
	.poll-choice,
	.poll-submit,
	.poll-close {
		transition: none;
	}
}