/* AQSA UI refresh — layout and colour only.
   Font loading, families, sizes, weights, styles and line metrics remain in
   assets/app.css. This stylesheet never crosses the material iframe boundary. */
:root {
  --aqsa-emerald: #007a50;
  --aqsa-emerald-hover: #00613f;
  --aqsa-deep: #003d2e;
  --aqsa-deepest: #002e23;
  --aqsa-gold: #e9a817;
  --aqsa-gold-ink: #805000;
  --aqsa-blue: #0865b5;
  --aqsa-violet: #8029b8;
  --aqsa-amber: #995600;
  --aqsa-coral: #bf2d19;
  --aqsa-teal: #00777e;
  --aqsa-white: #ffffff;
  --aqsa-cream: #fcfaf2;
  --aqsa-muted: #52675d;
  --aqsa-border: #d6e1d8;
  --aqsa-success: #006a43;
  --aqsa-error: #a82430;
  --aqsa-radius-sm: 10px;
  --aqsa-radius: 18px;
  --aqsa-radius-lg: 24px;
  --aqsa-shadow: 0 6px 20px #003d2e0a;
  --aqsa-shadow-hover: 0 12px 28px #003d2e1a;
  --aqsa-space: 8px;
  --ink: #123c2d;
  --forest: var(--aqsa-emerald);
  --green-dark: var(--aqsa-deep);
  --gold: var(--aqsa-gold);
  --paper: var(--aqsa-cream);
  --line: var(--aqsa-border);
}

/* Shared shell and controls */
.site-header {
  height: 80px;
  padding-inline: max(24px, calc((100% - 1216px) / 2));
  gap: 24px;
  background: var(--aqsa-cream);
  border-bottom: 1px solid var(--aqsa-border);
  box-shadow: 0 2px 12px #003d2e05;
}
.site-header .brand { min-width: 0; gap: 12px; }
.about-hero-copy, .about-hero-aside, .hero, .grid > a { animation: none; }
.site-header .logo-image { width: 48px; height: 48px; }
.site-header .brand small { color: var(--aqsa-muted); }
.site-header nav { gap: 4px; }
.site-header nav a { min-height: 44px; padding: 12px 16px; border-radius: var(--aqsa-radius-sm); }
.site-header nav a:hover { color: var(--aqsa-deep); background: #e1eee4; transform: none; }
.site-header nav a.active { color: white; background: var(--aqsa-emerald); box-shadow: 0 3px 8px #007a5020; }
.site-header .auth { gap: 12px; }
.site-header .account { min-height: 44px; color: var(--aqsa-deep); }
.site-header .pill { min-height: 44px; padding-inline: 20px !important; }
.account small { color: #603d00; background: #f8d979; }
.menu { min-width: 44px; min-height: 44px; padding: 10px; border-radius: var(--aqsa-radius-sm); }
.pill, .primary { min-height: 44px; border-radius: 14px; background: var(--aqsa-emerald) !important; box-shadow: 0 4px 10px #007a501f; }
.pill:hover, .primary:hover { background: var(--aqsa-emerald-hover) !important; box-shadow: var(--aqsa-shadow-hover); transform: translateY(-1px); }
.logout-control, .secondary, .text-button { min-height: 44px; border-radius: var(--aqsa-radius-sm); }
.logout-control { border-color: var(--aqsa-border); color: var(--aqsa-deep); }
.secondary:hover, .text-button:hover { background: #e1eee4; transform: none; }
.secondary:active, .text-button:active, .pill:active, .primary:active { transform: translateY(1px); }
.site-header a, .site-header button, .library a, .library button,
.admin button, .admin input, .admin select, .admin textarea,
.readerbar a, .readerbar button, .book button, footer a {
  transition-duration: 160ms;
}
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid #007a50;
  outline-offset: 4px;
  box-shadow: 0 0 0 3px var(--aqsa-white);
}
footer a:focus-visible, .readerbar a:focus-visible, .book aside a:focus-visible,
.book aside textarea:focus-visible { outline-color: var(--aqsa-gold); }
button:disabled, .primary:disabled, .primary:disabled:hover {
  background: #e0e5df !important;
  color: #526159 !important;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.empty, .loading, .manager-empty { padding: 48px 24px; color: var(--aqsa-muted); border: 1px dashed var(--aqsa-border); border-radius: var(--aqsa-radius); background-color: white; }
.empty { margin-top: 24px; }

/* Library — controls stay together; colour is concentrated on book covers. */
.library { padding: 36px 0 72px; }
.library > .eyebrow { color: var(--aqsa-gold-ink); margin-bottom: 16px; }
.library .hero {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  gap: 24px;
  padding: 32px;
  border: 1px solid #007a50;
  border-radius: var(--aqsa-radius-lg);
  background: linear-gradient(120deg, #007a50, #004d36);
  color: white;
}
.hero h1 { margin: 0 0 16px; }
.hero h1 em { color: #ffcf5b; }
.hero p { margin-bottom: 0; color: #e5f5ec; }
.search { height: 52px; gap: 10px; padding-inline: 16px; border: 1px solid #b8d0c1; border-radius: 14px; box-shadow: 0 4px 14px #002e2317; color: var(--aqsa-deep); }
.search svg { flex: 0 0 auto; }
.search input { min-width: 0; color: var(--ink); }
.search input::placeholder { color: #5c7164; opacity: 1; }
.search:focus-within { border-color: var(--aqsa-gold); outline: 3px solid var(--aqsa-gold); outline-offset: 3px; box-shadow: none; transform: none; }
.tabs { margin-top: 24px; gap: 4px; padding: 5px; border: 1px solid var(--aqsa-border); border-radius: 16px; box-shadow: none; overflow: visible; }
.tabs button { min-height: 44px; padding: 10px 24px; border-radius: 11px; }
.tabs button:hover { background: #e1eee4; color: var(--aqsa-deep); }
.tabs button.selected { background: var(--aqsa-emerald); color: white; box-shadow: 0 3px 8px #007a5024; animation: none; }
.hint { margin: 16px 0 24px; padding-left: 12px; border-left: 3px solid var(--aqsa-gold); color: var(--aqsa-muted); }
.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.grid > a { min-width: 0; border-radius: var(--aqsa-radius); }
.card { display: flex; flex-direction: column; border: 1px solid var(--aqsa-border); border-radius: var(--aqsa-radius); box-shadow: var(--aqsa-shadow); }
.grid > a:hover .card { border-color: #88b7a0; box-shadow: var(--aqsa-shadow-hover); transform: translateY(-3px); }
.card.disabled { opacity: 1; box-shadow: none; }
.cover { --cover-base: var(--card); flex: 0 0 auto; height: 196px; padding: 20px; background: linear-gradient(125deg, var(--cover-base), color-mix(in srgb, var(--cover-base), #001b16 18%)); }
.cover[data-tone="emerald"] { --cover-base: var(--aqsa-emerald); }
.cover[data-tone="blue"] { --cover-base: var(--aqsa-blue); }
.cover[data-tone="violet"] { --cover-base: var(--aqsa-violet); }
.cover[data-tone="amber"] { --cover-base: var(--aqsa-amber); }
.cover[data-tone="coral"] { --cover-base: var(--aqsa-coral); }
.cover[data-tone="teal"] { --cover-base: var(--aqsa-teal); }
.cover::after { pointer-events: none; background-image: repeating-linear-gradient(45deg, transparent 0 28px, #ffffff0b 28px 29px, transparent 29px 58px), repeating-linear-gradient(-45deg, transparent 0 28px, #ffffff0b 28px 29px, transparent 29px 58px); background-size: auto; }
.cover .number { width: 44px; height: 44px; border-radius: 12px; border-color: #ffffff66; background: #001c1638; }
.cover .volume { position: relative; z-index: 1; }
.cover strong { z-index: 1; right: 24px; bottom: 48px; max-width: calc(100% - 48px); }
.cover i { bottom: 16px; left: 20px; padding: 6px 10px; background: white; color: var(--aqsa-deep); border: 1px solid #ffffff80; }
.card.disabled .cover i { color: #613d00; background: #ffe39a; border-color: #ffe39a; }
.card-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 24px; }
.card-body small { color: #52685b; }
.card-body h3 { margin: 12px 0 10px; color: var(--aqsa-deep); }
.card-body p { color: var(--aqsa-muted); margin-bottom: 24px; overflow-wrap: anywhere; }
.card-body span { width: 100%; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--aqsa-border); color: #00643f; }
.card.disabled .card-body span { color: var(--aqsa-muted); }

/* About — a measured reading rhythm and saturated, contained accents. */
.about-page { padding: 36px 24px 72px; background: var(--aqsa-cream); }
.about-hero { grid-template-columns: minmax(0, 1.5fr) minmax(330px, 1fr); gap: 24px; }
.about-hero-copy { min-height: 0; padding: 36px 44px; border-radius: var(--aqsa-radius-lg); background: linear-gradient(125deg, #007a50, #005638 65%, #003d2e); box-shadow: var(--aqsa-shadow); }
.about-hero-copy::before { opacity: 1; background-image: repeating-linear-gradient(45deg, transparent 0 34px, #ffffff07 34px 35px, transparent 35px 70px), repeating-linear-gradient(-45deg, transparent 0 34px, #ffffff07 34px 35px, transparent 35px 70px); background-size: auto; }
.hero-arabic, .hero-meta svg, .about-hero h1 em { color: #ffcc56; }
.about-hero .eyebrow { color: #dff5e9; margin-bottom: 20px; }
.about-hero h1 { margin-bottom: 22px; }
.hero-lead { color: #edf8f1; margin-bottom: 0; }
.hero-meta { margin-top: 24px; padding-top: 20px; gap: 14px 24px; border-top: 1px solid #ffffff35; }
.about-hero-aside { grid-template-rows: 1fr 1fr; gap: 20px; }
.community-card, .quote-card { padding: 24px 28px; border-radius: var(--aqsa-radius-lg); box-shadow: var(--aqsa-shadow); }
.community-card { border: 1px solid #a9cdb7; background: white; }
.community-card::before { background: #e9a81714; box-shadow: 0 0 0 24px #007a500b; }
.community-card img { width: 128px; height: 128px; margin: 0 0 16px; }
.community-card strong { color: var(--aqsa-deep); }
.community-card small { color: var(--aqsa-muted); }
.quote-card { justify-content: space-between; border: 1px solid #d39a1b; background: linear-gradient(125deg, #f2bd39, #e8a319); color: #392b07; }
.quote-card svg { margin-bottom: 12px; color: #684100; }
.quote-card p { margin: 8px 0 16px; color: #382806; }
.quote-card span { color: #392b07; }
.about-intro { padding-top: 64px; }
.section-kicker { margin-bottom: 16px; color: var(--aqsa-gold-ink); }
.about-page h2 { color: var(--aqsa-deep); }
.about-page h2 em { color: var(--aqsa-gold-ink); }
.split-heading { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; }
.intro-copy p { color: var(--aqsa-muted); }
.intro-copy p + p { margin-top: 20px; padding-top: 20px; border-color: var(--aqsa-border); }
.value-grid { gap: 20px; margin-top: 32px; }
.value-grid article { padding: 28px; border-radius: var(--aqsa-radius); box-shadow: var(--aqsa-shadow); }
.value-grid article:nth-child(n) { border-color: var(--aqsa-border); background: white; }
.value-grid article::after { display: none; }
.value-grid article:nth-child(1)::before { background: var(--aqsa-gold); }
.value-grid article:nth-child(2)::before { background: var(--aqsa-emerald); }
.value-grid article:nth-child(3)::before { background: var(--aqsa-blue); }
.value-grid article > span { align-self: flex-start; padding: 8px 12px; border-radius: 10px; background: #f8d979; color: #613e00; }
.value-grid article:nth-child(2) > span { color: white; background: var(--aqsa-emerald); }
.value-grid article:nth-child(3) > span { color: white; background: var(--aqsa-blue); }
.value-grid h3 { color: var(--aqsa-deep); }
.value-grid p, .value-grid li { color: var(--aqsa-muted); }
.value-grid li::marker { color: var(--aqsa-emerald); }
.value-grid article:hover, .leaders article:hover { transform: translateY(-2px); box-shadow: var(--aqsa-shadow-hover); }
.about-story { margin: 64px auto 0; border: 1px solid #006d49; border-radius: var(--aqsa-radius-lg); background: var(--aqsa-deep); box-shadow: none; }
.about-story::before { opacity: .08; }
.story-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 36px; padding: 44px; }
.story-layout > div:first-child { padding: 16px 0 16px 20px; }
.story-layout > div:first-child::before { background: var(--aqsa-gold); }
.about-story h2 { color: white; }
.about-story h2 em, .about-story .section-kicker { color: #ffcc56; }
.story-copy { padding: 0; border: 0; border-radius: 0; background: transparent; color: #e3f1e8; box-shadow: none; }
.story-copy::before { display: none; }
.story-copy blockquote { margin-top: 24px; padding: 24px; border-color: #e9a81766; border-left-color: var(--aqsa-gold); background: #002e23; }
.story-copy blockquote span { color: #ffcc56; border-color: #e9a81755; }
.story-copy blockquote p { color: #edf7f1; }
.organisation { padding-top: 64px; }
.organisation-head > span { border: 1px solid #b2cbb9; color: var(--aqsa-deep); background: #e3f0e5; white-space: nowrap; }
.organisation-head p { color: var(--aqsa-muted); }
.leaders { gap: 20px; margin-top: 28px; }
.leaders article:nth-child(n) { background: white; border: 1px solid var(--aqsa-border); border-radius: var(--aqsa-radius); box-shadow: var(--aqsa-shadow); padding: 28px 16px 24px; }
.leaders article:nth-child(1)::before { background: var(--aqsa-emerald); }
.leaders article:nth-child(2)::before { background: var(--aqsa-gold); }
.leaders article:nth-child(3)::before { background: var(--aqsa-coral); }
.leaders article:nth-child(4)::before { background: var(--aqsa-blue); }
.leaders article:nth-child(1) > div { color: white; background: var(--aqsa-emerald); }
.leaders article:nth-child(2) > div { color: #4b3400; background: var(--aqsa-gold); }
.leaders article:nth-child(3) > div { color: white; background: var(--aqsa-coral); }
.leaders article:nth-child(4) > div { color: white; background: var(--aqsa-blue); }
.leaders small, .division-grid article > span, .program-grid article > small { color: var(--aqsa-gold-ink); }
.leaders h3 { color: var(--aqsa-deep); }
.division-grid { gap: 20px; }
.division-grid article:nth-child(n) { padding: 28px; border: 1px solid var(--aqsa-border); border-top: 4px solid var(--aqsa-emerald); border-radius: var(--aqsa-radius); background: white; box-shadow: var(--aqsa-shadow); }
.division-grid article:nth-child(2) { border-top-color: var(--aqsa-gold); }
.division-grid article:nth-child(3) { border-top-color: var(--aqsa-coral); }
.division-grid article::after { display: none; }
.division-grid h3 { color: var(--aqsa-deep); }
.division-grid p, .division-grid small, .division-grid li { color: var(--aqsa-muted); }
.division-grid li { border-color: var(--aqsa-border); }
.division-grid li::before { color: var(--aqsa-emerald); }
.about-programs { margin-top: 64px; padding: 48px 24px; border-block: 1px solid #d4e3d5; background: #edf3e9; }
.quiet-link { min-height: 44px; padding: 10px 16px; border: 1px solid #99baa5; border-radius: 12px; color: var(--aqsa-deep); background: white; }
.quiet-link:hover { border-color: var(--aqsa-emerald); background: #dcebdc; transform: none; }
.program-grid { gap: 20px; margin-top: 28px; }
.program-grid article:nth-child(n) { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; border: 1px solid #bdd6c4; border-radius: var(--aqsa-radius); background: white; box-shadow: var(--aqsa-shadow); }
.program-grid article:nth-child(n)::after { right: -55px; bottom: -70px; background: #007a500c; }
.program-grid article:nth-child(2)::after { background: #e9a81720; }
.program-grid article:nth-child(3)::after { background: #b9382210; }
.program-grid article:nth-child(1) .program-icon { background: var(--aqsa-emerald); color: white; }
.program-grid article:nth-child(2) .program-icon { background: var(--aqsa-gold); color: #4b3400; }
.program-grid article:nth-child(3) .program-icon { background: var(--aqsa-coral); color: white; }
.program-grid h3 { color: var(--aqsa-deep); }
.program-grid p { color: var(--aqsa-muted); }
.program-grid ul { width: 100%; padding-top: 20px; margin-top: auto; border-top: 1px solid var(--aqsa-border); }
.program-grid li { color: #3e5a4a; }
.program-grid li svg { color: var(--aqsa-emerald); }
.program-grid article:hover { transform: translateY(-2px); box-shadow: var(--aqsa-shadow-hover); }
.address-card { margin-top: 64px; padding: 40px 44px; border: 1px solid #007a50; border-radius: var(--aqsa-radius-lg); background: linear-gradient(120deg, #005c3d, #007a50); }
.address-card h2 { color: white; }
.address-card p { color: #e5f5ec; }
.address-card .section-kicker, .address-symbol { color: #ffcc56; }
.address-card::after { pointer-events: none; background: #ffffff05; box-shadow: 0 0 0 32px #ffffff05; }

/* Auth and the existing administration workspace. */
.admin { margin: 40px auto 72px; }
.admin-head { padding: 24px 28px; border: 1px solid #c0d5c6; border-left: 5px solid var(--aqsa-emerald); border-radius: var(--aqsa-radius); background: #edf3e9; }
.admin-head > svg { flex: 0 0 auto; color: var(--aqsa-emerald); }
.admin-head p { margin-bottom: 0; color: var(--aqsa-muted); }
.admin > form { max-width: 560px; margin: 28px auto 0; }
.admin-state, .admin form, .material-manager { border: 1px solid var(--aqsa-border); border-radius: var(--aqsa-radius); background: white; box-shadow: var(--aqsa-shadow); }
.admin h2 { color: var(--aqsa-deep); }
.admin label { gap: 8px; margin: 20px 0; }
.admin input, .admin select, .admin textarea { min-width: 0; min-height: 48px; border-color: #b8cabb; border-radius: var(--aqsa-radius-sm); color: var(--ink); background: #fff; }
.admin input::placeholder, .admin textarea::placeholder { color: #607469; opacity: 1; }
.admin input:hover, .admin select:hover, .admin textarea:hover { border-color: var(--aqsa-emerald); }
.admin input:focus, .admin select:focus, .admin textarea:focus { border-color: var(--aqsa-emerald); outline: 2px solid var(--aqsa-emerald); outline-offset: 2px; box-shadow: none; }
.admin input:user-invalid, .admin textarea:user-invalid { border-color: var(--aqsa-error); outline-color: var(--aqsa-error); background: #fff9f8; }
.admin input[type="file"] { width: 100%; padding: 12px; border: 1px dashed #70a284; background: #f1f6ed; }
.admin input::file-selector-button { margin-right: 12px; padding: 10px 12px; border: 1px solid #99b9a4; border-radius: 8px; color: var(--aqsa-deep); background: white; cursor: pointer; }
.admin input[type="checkbox"] { min-height: 18px; }
.admin .optional, .setup-note, .admin-state p { color: var(--aqsa-muted); }
.admin-workspace { gap: 24px; }
.material-form { top: 104px; }
.form-title, .manager-head { padding-bottom: 20px; border-bottom: 1px solid var(--aqsa-border); flex-wrap: wrap; }
.tag { color: var(--aqsa-gold-ink); }
.material-list { max-height: 680px; padding: 4px; scrollbar-gutter: stable; }
.material-row { padding: 16px; border-radius: 12px; }
.material-row:nth-child(3n+1) { border-left-color: var(--aqsa-emerald); }
.material-row:nth-child(3n+2) { border-left-color: var(--aqsa-gold); }
.material-row:nth-child(3n) { border-left-color: var(--aqsa-coral); }
.material-row:hover { border-color: #97bda5; box-shadow: var(--aqsa-shadow); transform: none; }
.material-icon { background: var(--aqsa-emerald); color: white; }
.material-info p, .material-info small { color: var(--aqsa-muted); }
.icon-button { width: 44px; height: 44px; background: #e5f0e6; color: #00623f; }
.icon-button.danger { background: #ffebe7; color: var(--aqsa-error); }
.icon-button:hover { transform: none; }
.status { color: #694800; background: #ffe9ab; }
.status.live { color: white; background: var(--aqsa-success); }
.notice { padding: 16px 20px; border: 1px solid #d5af4b; border-left: 4px solid var(--aqsa-gold); color: #604400; background: #fff2cc; }
.notice[data-status="success"] { color: #005d3a; background: #e4f5e9; border-color: #4c9e70; }
.notice[data-status="error"] { color: #8d1e29; background: #fff0ed; border-color: #c45961; }
.tajwid-subcategory-note { color: #674500; background: #fff1c6; border-color: var(--aqsa-gold); }

/* Reader shell only — embedded HTML retains its own stylesheet and fonts. */
.reader { height: 100dvh; min-height: 0; background: #e9efe7; }
.readerbar { flex: 0 0 auto; min-height: 72px; height: auto; padding: 12px 24px; gap: 16px; background: var(--aqsa-cream); border-bottom: 1px solid #b8cdbd; }
.readerbar > a { flex: 0 0 auto; min-height: 44px; padding: 8px 12px; border: 1px solid #b8cdbd; border-radius: 10px; color: var(--aqsa-deep); background: white; }
.readerbar > div { min-width: 0; }
.readerbar > div b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.readerbar button { flex: 0 0 auto; min-height: 44px; padding: 10px 14px; border-color: #9ebeaa; color: var(--aqsa-deep); }
.readerbar button:first-of-type { background: var(--aqsa-emerald); border-color: var(--aqsa-emerald); color: white; }
.readerbar button:hover { transform: none; background: #e1eee4; }
.readerbar button:first-of-type:hover { background: var(--aqsa-emerald-hover); color: white; }
.reader iframe { display: block; min-height: 0; flex: 1 1 0; background: white; }
.reader > .loading { margin: 24px; }
.reader-notice { position: fixed; z-index: 60; bottom: 20px; left: 50%; width: min(480px, calc(100% - 32px)); transform: translateX(-50%); padding: 16px 20px; border: 1px solid #d5af4b; border-radius: 12px; color: #604400; background: #fff2cc; box-shadow: var(--aqsa-shadow-hover); }
.reader > .book { min-height: 0; flex: 1 1 0; height: auto; }
.book { grid-template-columns: 264px minmax(0, 1fr); }
.book aside { padding: 28px 24px; background: var(--aqsa-deep); scrollbar-gutter: stable; }
.book aside nav { gap: 4px; margin: 24px 0; }
.book aside nav a { min-height: 44px; border-radius: 8px; }
.book aside nav a:hover { padding-left: 12px; background: #007a50; }
.book aside textarea { color: #123c2d; border: 1px solid #abc4b2; }
.book aside > small { color: #d3e7da; }
.book > article { min-width: 0; background: var(--aqsa-cream); scrollbar-gutter: stable; }
.book-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 16px; padding: 10px 24px; border-bottom-color: var(--aqsa-border); background: #fff; }
.book-tools button { margin-left: 0; min-height: 44px; padding: 8px 12px; border: 1px solid #a3beac; border-radius: 10px; }
.book section { padding: 44px 32px; scroll-margin-top: 84px; overflow-wrap: anywhere; }
.book section + section { border-top: 1px solid var(--aqsa-border); }
.lesson, .practice { border-color: var(--aqsa-border); border-radius: var(--aqsa-radius); }
.practice button { min-height: 44px; }
.night .book > article, .night .book-tools { color: #edf5f0; background: #10291f; }
.night .book-tools button, .night .arabic-hero { color: #8ee5b5; }
.night .book .tag { color: #ffcc56; }
.night .lesson, .night .practice { border-color: #436153; background: #183a2b; }
.night .book section + section { border-color: #436153; }

/* Footer: same container, clear groups, comfortable touch targets. */
footer { grid-template-columns: minmax(0, 1.5fr) minmax(140px, .65fr) minmax(0, 1fr); gap: 36px 48px; padding-top: 44px; padding-bottom: 28px; border-top: 4px solid var(--aqsa-gold); background: var(--aqsa-deepest); }
footer::before { background: #007a5024; }
footer .brand { gap: 12px; }
footer .brand small, footer > div > p { color: #cee4d5; }
footer > div:nth-child(n+2) > b { margin-bottom: 8px; color: #ffcc56; }
footer > div:nth-child(2) { gap: 0; }
footer > div:nth-child(2) a { display: flex; align-items: center; min-height: 44px; width: fit-content; border-radius: 6px; }
footer > small { color: #bad6c6; padding-top: 20px; }

@media (max-width: 1100px) and (min-width: 801px) {
  .site-header { gap: 12px; padding-inline: 24px; }
  .site-header nav a { padding-inline: 10px; }
  .site-header .auth { gap: 8px; }
  .auth .account { white-space: normal; }
  .library .hero { grid-template-columns: minmax(0, 1fr) 270px; padding: 28px; }
  .about-hero-copy { padding: 32px; }
}
@media (max-width: 920px) {
  .about-hero { grid-template-columns: 1fr; }
  .about-hero-aside { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .community-card, .quote-card { min-height: 260px; }
  .split-heading, .story-layout { grid-template-columns: 1fr; gap: 28px; }
  .value-grid { grid-template-columns: 1fr; }
  .story-layout > div:first-child { padding: 20px 0 0; }
  .story-layout > div:first-child::before { width: 64px; height: 4px; top: 0; }
  .division-grid, .program-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .division-grid article:last-child, .program-grid article:last-child { grid-column: 1 / -1; }
  .admin-workspace { grid-template-columns: 1fr; }
  .material-form { position: static; }
  .material-list { max-height: none; }
}
@media (max-width: 800px) {
  .site-header { height: 70px; padding-inline: 18px; gap: 12px; }
  .site-header nav { top: 69px; right: 12px; left: 12px; margin: 0; padding: 12px; border: 1px solid var(--aqsa-border); border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: 0 12px 24px #003d2e14; }
  .site-header nav.open { display: grid; gap: 4px; }
  .site-header:has(nav.open) .auth { display: flex; flex-wrap: wrap; justify-content: flex-end; position: absolute; top: 234px; right: 12px; left: 12px; padding: 12px; border: 1px solid var(--aqsa-border); border-top: 1px solid #e4ebe4; border-radius: 0 0 16px 16px; background: white; box-shadow: 0 16px 24px #003d2e14; }
  .site-header .auth .account { margin-right: auto; white-space: normal; }
  .library { padding: 28px 0 48px; }
  .library .hero { grid-template-columns: 1fr; gap: 24px; padding: 28px; border-radius: 20px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .cover { height: 196px; }
  .tabs { margin-top: 20px; }
  .about-page { padding: 28px 18px 48px; }
  .about-hero-copy { padding: 32px; border-radius: 20px; }
  .hero-meta { flex-direction: row; }
  .about-hero-aside { gap: 20px; }
  .community-card, .quote-card { padding: 24px; border-radius: 20px; }
  .about-intro, .organisation { padding-top: 48px; }
  .about-story { margin-top: 48px; border-radius: 20px; }
  .story-layout { padding: 32px; }
  .story-copy { padding: 0; }
  .story-copy blockquote { padding: 20px; }
  .about-programs { margin: 48px -18px 0; padding: 36px 18px; }
  .organisation-head, .programs-heading { gap: 16px; }
  .address-card { margin-top: 48px; padding: 32px; }
  .address-symbol { display: flex; align-items: center; gap: 16px; }
  .address-symbol svg { margin: 0; }
  .admin { margin: 28px auto 48px; }
  .admin-head { padding: 24px; align-items: flex-start; }
  .admin > form > button { width: 100%; }
  .admin > form > .text-button { margin-top: 12px; }
  .readerbar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .readerbar > div { display: flex; flex: 1 1 140px; margin-right: 0; }
  .readerbar button:last-child { display: flex; }
  .readerbar button { flex-grow: 1; }
  .book { grid-template-columns: 1fr; }
  .book-tools { padding-inline: 16px; }
  .book section { padding: 32px 24px; }
  footer { grid-template-columns: 1fr 1fr; gap: 24px 32px; padding: 36px 18px 24px; }
  footer > div:first-child { grid-column: 1 / -1; }
  footer > small { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .grid, .division-grid, .program-grid { grid-template-columns: 1fr; }
  .division-grid article:last-child, .program-grid article:last-child { grid-column: auto; }
  .tabs { width: 100%; gap: 2px; padding: 4px; }
  .tabs button { flex: 1 1 auto; padding-inline: 10px; }
  .library .hero { padding: 24px; }
  .about-hero-copy { padding: 28px 24px; }
  .about-hero-aside { grid-template-columns: 1fr; }
  .community-card, .quote-card { min-height: 230px; }
  .hero-meta { flex-direction: column; }
  .value-grid article, .division-grid article:nth-child(n), .program-grid article:nth-child(n) { padding: 24px; }
  .leaders { gap: 12px; }
  .leaders article:nth-child(n) { padding: 24px 12px; }
  .story-layout { padding: 28px 20px; }
  .story-copy blockquote { padding: 18px; }
  .address-card { padding: 28px 24px; }
  .admin-head { padding: 24px 20px; gap: 12px; }
  .admin-head > svg { width: 36px; height: 36px; }
  .admin-state, .admin form, .material-manager { padding: 24px 20px; }
  footer { grid-template-columns: 1fr; }
  footer > div:first-child, footer > small { grid-column: auto; }
}