/**
 * Deenscovery — Compact Authenticated Application Shell (Phase A of
 * the Global Compact Layout Standard).
 *
 * Loaded ONLY for authenticated NON-STUDENT roles (teacher, parent,
 * school admin, super admin) plus the compact auth pages (login /
 * register opt in via $appShellCss) — see includes/header.php. Public
 * marketing pages never load this file, students use
 * assets/css/student.css instead, and no Worksheet V2 or print/PDF
 * surface ever loads it. Everything here is additive and scoped
 * under .app-shell / .auth-compact so shared style.css primitives
 * (.section, .hero, .page-hero, .card, headings, footer, print
 * rules) remain untouched for marketing, Worksheet V1 PDF, and
 * reflection print paths.
 *
 * Locked geometry standard (approved blueprint decisions G-1/G-2):
 * 76px header · default app max 1840px (workbench pages may opt to
 * ~96vw later) · gutters clamp(16px, 2vw, 32px) · 50-70px title/action
 * row · compact spacing tokens · >=44px touch targets. Compact means
 * efficient, never cramped.
 */

.app-shell {
  --app-header-height: 76px;
  --app-max: 1840px;
  --app-gutter: clamp(16px, 2vw, 32px);
  --app-section-gap: 16px;
  --app-card-gap: 14px;
  --app-card-pad: clamp(18px, 1.5vw, 24px);
  --app-title-gap: 12px;
  --app-ink: var(--site-text-heading);
  --app-muted: var(--site-text-secondary);
  --app-line: var(--site-border-default);
  /* --app-surface / --app-bg are defined in the SURFACE SYSTEM block
     below (single source of truth for the pastel families). */
  --app-accent: var(--teal-dark, #087C8B);
  --app-accent-soft: #E4F1F4;
  --app-radius: 14px;
  --app-shadow: 0 4px 14px rgba(18, 58, 102, .08);
  background: var(--app-bg);
}

/* ------------------------------------------------------------
   DEENSCOVERY APPLICATION SURFACE SYSTEM — soft pastel families
   mixed from the logo palette. Approved refinement targets: 25-30
   percent tint strength (the inner color-mix), 75 percent surface
   opacity (the outer color-mix against transparent — panels are 25
   percent transparent, so the role ground shows through subtly),
   plus semantic tint utilities so the portal never reads as a sea
   of stark white boxes. Sticky chrome (header, collapsed nav) stays
   on the solid surface token so it never goes translucent. Text and
   controls stay fully opaque — only the background is tinted.
   ------------------------------------------------------------ */
.app-shell {
  --brand-teal: #14A3B0;
  --brand-blue: #1793BC;
  --brand-green: #67A02E;
  --brand-gold: #F0B01B;
  --brand-orange: #F2721C;
  --brand-purple: #8E6FD1;
  /* Surface depth calibrated to the original pre-V2 quran.php
     pastels, using only logo hues. Approved refinement targets:
     25-30 percent tint strength, 75 percent surface opacity - the
     inner color-mix sets the tint, the outer color-mix against
     transparent sets exactly the alpha, so the ground shows through
     subtly and panels read as soft frosted color, never flat white. */
  --app-surface: color-mix(in srgb, color-mix(in srgb, #F0B01B 13%, #FFFFFF) 75%, transparent);
  --app-surface-solid: #FBF7EE;
  --app-surface-teal: color-mix(in srgb, color-mix(in srgb, #14A3B0 28%, #FFFFFF) 75%, transparent);
  --app-surface-sky: color-mix(in srgb, color-mix(in srgb, #1793BC 27%, #FFFFFF) 75%, transparent);
  --app-surface-green: color-mix(in srgb, color-mix(in srgb, #67A02E 28%, #FFFFFF) 75%, transparent);
  --app-surface-gold: color-mix(in srgb, color-mix(in srgb, #F0B01B 30%, #FFFFFF) 75%, transparent);
  --app-surface-peach: color-mix(in srgb, color-mix(in srgb, #F2721C 27%, #FFFFFF) 75%, transparent);
  --app-surface-lavender: color-mix(in srgb, color-mix(in srgb, #8E6FD1 28%, #FFFFFF) 75%, transparent);
  --app-surface-cream: color-mix(in srgb, color-mix(in srgb, #F0B01B 20%, #FFFFFF) 75%, transparent);
  /* Page ground: pale branded neutral (role blocks re-tint it). */
  --app-bg: #F0F5F4;
}

/* Role accents + role page grounds — geometry identical, personality
   per role: teacher friendly teal, parent warm cream, school admin
   soft blue, super admin neutral teal-slate. */
.app-shell.role-teacher      { --app-accent: #0E7C7B; --app-accent-soft: #E2F1F0; --app-bg: #EFF5F3; }
.app-shell.role-parent       { --app-accent: #B26A00; --app-accent-soft: #FBEEDD; --app-bg: #F9F4EC; }
.app-shell.role-school-admin { --app-accent: #1D5FA8; --app-accent-soft: #E3EEF9; --app-bg: #EFF4F8; }
.app-shell.role-super-admin  { --app-accent: #123A66; --app-accent-soft: #E7EDF4; --app-bg: #F1F5F5; }

/* Dark theme (Phase 2B, docs/WEBSITE-LIGHT-DARK-THEME-PLAN.md) — first
   pass, flagged for visual QA. The base surface system above mixes each
   brand hue toward #FFFFFF on purpose (a pastel-tint effect); simply
   overriding --app-accent per role without also redoing that mix would
   leave light pastel panels floating on a dark page, so the color-mix
   target itself is redefined here too, toward a dark base instead of
   white. Role personality (which hue means which role) is preserved —
   only lightness/mix-target changes, not which color is which role. */
[data-theme="dark"] .app-shell {
  --app-surface: color-mix(in srgb, color-mix(in srgb, #F0B01B 16%, #12181C) 75%, transparent);
  --app-surface-solid: #1B2024;
  --app-surface-teal: color-mix(in srgb, color-mix(in srgb, #14A3B0 30%, #12181C) 75%, transparent);
  --app-surface-sky: color-mix(in srgb, color-mix(in srgb, #1793BC 30%, #12181C) 75%, transparent);
  --app-surface-green: color-mix(in srgb, color-mix(in srgb, #67A02E 30%, #12181C) 75%, transparent);
  --app-surface-gold: color-mix(in srgb, color-mix(in srgb, #F0B01B 32%, #12181C) 75%, transparent);
  --app-surface-peach: color-mix(in srgb, color-mix(in srgb, #F2721C 30%, #12181C) 75%, transparent);
  --app-surface-lavender: color-mix(in srgb, color-mix(in srgb, #8E6FD1 30%, #12181C) 75%, transparent);
  --app-surface-cream: color-mix(in srgb, color-mix(in srgb, #F0B01B 22%, #12181C) 75%, transparent);
  --app-bg: #12181C;
}
[data-theme="dark"] .app-shell.role-teacher      { --app-accent: #4FD3CE; --app-accent-soft: rgba(79, 211, 206, .16); --app-bg: #101A1A; }
[data-theme="dark"] .app-shell.role-parent       { --app-accent: #E2A23D; --app-accent-soft: rgba(226, 162, 61, .16); --app-bg: #1A1610; }
[data-theme="dark"] .app-shell.role-school-admin { --app-accent: #5FA8E8; --app-accent-soft: rgba(95, 168, 232, .16); --app-bg: #10161D; }
[data-theme="dark"] .app-shell.role-super-admin  { --app-accent: #9FB2C4; --app-accent-soft: rgba(159, 178, 196, .16); --app-bg: #13171B; }

/* Mirrors the block above for System-dark mode (no explicit choice
   made yet) — see the matching comment in style.css's own
   @media (prefers-color-scheme: dark) block. Without this, a
   first-time visitor whose OS is set to dark would get light text
   colors (from style.css's variable overrides, which already apply
   under this same media query) on top of these still-light role
   surfaces — the same bug already caught and fixed for `body`. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-shell {
    --app-surface: color-mix(in srgb, color-mix(in srgb, #F0B01B 16%, #12181C) 75%, transparent);
    --app-surface-solid: #1B2024;
    --app-surface-teal: color-mix(in srgb, color-mix(in srgb, #14A3B0 30%, #12181C) 75%, transparent);
    --app-surface-sky: color-mix(in srgb, color-mix(in srgb, #1793BC 30%, #12181C) 75%, transparent);
    --app-surface-green: color-mix(in srgb, color-mix(in srgb, #67A02E 30%, #12181C) 75%, transparent);
    --app-surface-gold: color-mix(in srgb, color-mix(in srgb, #F0B01B 32%, #12181C) 75%, transparent);
    --app-surface-peach: color-mix(in srgb, color-mix(in srgb, #F2721C 30%, #12181C) 75%, transparent);
    --app-surface-lavender: color-mix(in srgb, color-mix(in srgb, #8E6FD1 30%, #12181C) 75%, transparent);
    --app-surface-cream: color-mix(in srgb, color-mix(in srgb, #F0B01B 22%, #12181C) 75%, transparent);
    --app-bg: #12181C;
  }
  :root:not([data-theme="light"]) .app-shell.role-teacher      { --app-accent: #4FD3CE; --app-accent-soft: rgba(79, 211, 206, .16); --app-bg: #101A1A; }
  :root:not([data-theme="light"]) .app-shell.role-parent       { --app-accent: #E2A23D; --app-accent-soft: rgba(226, 162, 61, .16); --app-bg: #1A1610; }
  :root:not([data-theme="light"]) .app-shell.role-school-admin { --app-accent: #5FA8E8; --app-accent-soft: rgba(95, 168, 232, .16); --app-bg: #10161D; }
  :root:not([data-theme="light"]) .app-shell.role-super-admin  { --app-accent: #9FB2C4; --app-accent-soft: rgba(159, 178, 196, .16); --app-bg: #13171B; }
}

/* ------------------------------------------------------------
   APP HEADER — 76px, everything vertically centered, professional
   neutral surface. No wallpaper, no mascots, no marketing geometry.
   Keeps the shared .menu-toggle/.site-nav class pair so
   assets/js/script.js's existing mobile collapse works unchanged.
   ------------------------------------------------------------ */
.app-shell .app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  height: var(--app-header-height);
  padding: 0 var(--app-gutter);
  background: var(--app-surface-solid);
  border-bottom: 1px solid var(--app-line);
  box-shadow: 0 3px 12px rgba(18, 58, 102, .06);
}
.app-shell .app-brand { display: flex; align-items: center; flex-shrink: 0; }
.app-shell .app-brand img { width: clamp(140px, 11vw, 178px); height: auto; display: block; }

.app-shell .app-header .site-nav { display: flex; align-items: center; gap: 4px; }
.app-shell .app-header .site-nav a {
  color: var(--app-ink);
  font-weight: 800;
  font-size: .95rem;
  padding: 9px 16px;
  border-radius: 999px;
  text-decoration: none;
}
.app-shell .app-header .site-nav a:hover { background: var(--app-accent-soft); color: var(--app-accent); }
.app-shell .app-header .site-nav a.active { background: var(--app-accent); color: var(--site-text-inverse); }
/* Neutralize style.css's marketing last-link CTA treatment. */
.app-shell .app-header .site-nav a:last-child { background: none; color: var(--app-ink); padding: 9px 16px; box-shadow: none; }
.app-shell .app-header .site-nav a:last-child::before { content: none; }
.app-shell .app-header .site-nav a:last-child:hover { background: var(--app-accent-soft); color: var(--app-accent); }
.app-shell .app-header .site-nav a:last-child.active { background: var(--app-accent); color: var(--site-text-inverse); }

.app-shell .app-role-badge {
  background: var(--app-accent-soft);
  color: var(--app-accent);
  border: 1px solid var(--app-line);
  font-weight: 900;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 6px 13px;
  border-radius: 999px;
  white-space: nowrap;
}
.app-shell .app-profile {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.app-shell .app-profile .nav-link-button {
  border: 0;
  background: none;
  color: var(--app-muted);
  font-weight: 800;
  font-size: .9rem;
  cursor: pointer;
  padding: 9px 10px;         /* >=44px hit area with line-height */
  border-radius: 999px;
  min-height: 44px;
}
.app-shell .app-profile .nav-link-button:hover { color: var(--app-accent); background: var(--app-accent-soft); }
.app-shell .app-menu-toggle {
  display: none;
  border: 0;
  background: var(--app-accent);
  color: var(--site-text-inverse);
  border-radius: 12px;
  padding: 9px 13px;
  font-size: 1.25rem;
  min-height: 44px;
  margin-left: auto;
}

/* ------------------------------------------------------------
   PAGE CONTAINER + TITLE ROW
   ------------------------------------------------------------ */
.app-shell .app-page {
  width: min(100% , var(--app-max));
  margin: 0 auto;
  padding: 14px var(--app-gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: var(--app-section-gap);
}
.app-shell .app-page--wide { --app-max: 96vw; }

/* Title + context + actions on ONE row (50-70px) — omit entirely on
   pages that need no heading strip. */
.app-shell .app-titlebar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  min-height: 50px;
  padding: 4px 2px;
}
.app-shell .app-titlebar h1 {
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  margin: 0;
  color: var(--app-ink);
}
.app-shell .app-crumb { font-size: .82rem; font-weight: 800; color: var(--app-muted); }
.app-shell .app-crumb a { color: var(--app-accent); text-decoration: none; }
.app-shell .app-crumb a:hover { text-decoration: underline; }
.app-shell .app-title-sub { font-size: .88rem; font-weight: 700; color: var(--app-muted); margin: 0; }
.app-shell .app-title-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.app-shell .app-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius);
  padding: 10px 14px;
}

/* ------------------------------------------------------------
   CONTENT PRIMITIVES
   ------------------------------------------------------------ */
.app-shell .app-card {
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
  padding: var(--app-card-pad);
}
.app-shell .app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--app-card-gap);
  align-items: stretch;
}
/* Two-column desktop field layout for short fields; groups keep
   compact 10-12px gaps, controls keep >=44px targets. */
.app-shell .app-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 14px;
  align-items: end;
}
.app-shell .app-form-grid label { font-weight: 800; font-size: .84rem; color: var(--app-ink); }
.app-shell .app-table-wrap {
  overflow-x: auto;
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius);
}
.app-shell .app-table-wrap table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.app-shell .app-table-wrap th {
  text-align: left;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--app-muted);
  background: var(--app-accent-soft);
  padding: 9px 12px;
  border-bottom: 2px solid var(--app-line);
  white-space: nowrap;
}
.app-shell .app-table-wrap td { padding: 8px 12px; border-bottom: 1px solid var(--app-line); }
.app-shell .app-table-wrap tr:last-child td { border-bottom: none; }

/* Compact intentional empty state — never a giant blank panel. */
.app-shell .app-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--app-accent-soft);
  border-radius: var(--app-radius);
  padding: 14px 18px;
}
.app-shell .app-empty-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--app-surface);
  border: 2px solid var(--app-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.app-shell .app-empty-title { font-weight: 900; color: var(--app-ink); margin: 0; font-size: .95rem; }
.app-shell .app-empty-sub { font-weight: 700; color: var(--app-muted); margin: 2px 0 0; font-size: .82rem; }


/* Compact app footer (G-9) — a caption, not a marketing band. Shared
   by the authenticated app shell and the compact auth pages. */
.app-shell .app-footer,
.auth-shell .app-footer {
  margin-top: auto;
  padding: 18px 16px 24px;
  text-align: center;
}
.app-shell .app-footer .copyright,
.app-shell .app-footer .copyright a,
.auth-shell .app-footer .copyright,
.auth-shell .app-footer .copyright a { background: transparent; margin: 0; padding: 0; color: var(--app-muted, #52677A); font-weight: 700; font-size: .85rem; }
.app-shell .app-footer .copyright::before,
.app-shell .app-footer .copyright::after,
.auth-shell .app-footer .copyright::before,
.auth-shell .app-footer .copyright::after { content: none; }
.app-shell .app-footer .copyright a:hover,
.auth-shell .app-footer .copyright a:hover { color: var(--app-accent, #087C8B); }

/* ------------------------------------------------------------
   PHASE C PRIMITIVES — reusable application patterns for the
   Super/School Admin migrations (and Phase D later). All scoped
   under .app-shell; none of these touch shared style.css classes.
   ------------------------------------------------------------ */

/* Launcher grid — the dashboard's tool launchpad: compact cards in
   3-4 desktop columns instead of full-width stacked banners. */
.app-shell .app-launcher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--app-card-gap);
  align-items: stretch;
}
.app-shell .app-launcher {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
  padding: 14px 16px;
}
.app-shell .app-launcher-head { display: flex; align-items: center; gap: 10px; }
.app-shell .app-launcher-count {
  margin-left: auto;
  font-size: .78rem;
  font-weight: 800;
  color: var(--app-muted);
  white-space: nowrap;
}
.app-shell .app-launcher-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--app-accent-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.app-shell .app-launcher h2 { font-size: 1rem; margin: 0; color: var(--app-ink); }
.app-shell .app-launcher p { margin: 0; font-size: .85rem; font-weight: 600; color: var(--app-muted); flex: 1; }
.app-shell .app-launcher .btn { align-self: flex-start; margin-top: 4px; padding: 9px 18px; font-size: .88rem; }

/* Card headings inherit marketing's clamp(1.6-2.4rem) from style.css
   — far too loud for dense application panels. Compact hierarchy. */
.app-shell .app-card h2 { font-size: 1.2rem; margin-bottom: 10px; }
.app-shell .app-card h3 { font-size: 1.05rem; margin-bottom: 8px; }

/* Section heading outside cards — compact, never a stacked band. */
.app-shell .app-section-title {
  font-size: 1.02rem;
  color: var(--app-ink);
  margin: 6px 2px 0;
}

/* Status pill — compact state chip for titlebars/tables. */
.app-shell .app-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--app-accent-soft);
  color: var(--app-accent);
  border-radius: 999px;
  font-weight: 900;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 5px 12px;
  white-space: nowrap;
}

/* Actions row — buttons/links grouped on one wrapping line. */
.app-shell .app-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Two-column form behavior for legacy .form field groups: opt in by
   adding app-form-grid to the same element. Groups keep their
   markup; short fields flow into responsive columns, and anything
   long opts out with .app-field-full. The submit button always gets
   its own full row. */
.app-shell .app-form-grid > button[type="submit"],
.app-shell .app-form-grid > .app-field-full { grid-column: 1 / -1; }
.app-shell .app-form-grid > button[type="submit"] { justify-self: start; }
.app-shell .app-form-grid label { display: block; margin-bottom: 4px; }
.app-shell .app-form-grid input,
.app-shell .app-form-grid select { width: 100%; min-height: 44px; }

/* The marketing body decorations (sky gradient clouds + the fixed
   star/heart strip that style.css paints on every page) never render
   inside the professional application or auth shells. Scoped body
   overrides only — style.css itself is untouched. */
.app-shell::before,
.auth-shell::before { content: none; }
.app-shell::after,
.auth-shell::after { content: none; }

/* Setup-surah workbench compaction — the authoring page's own
   setup-* classes stay (style.css), the app shell only removes the
   dead vertical space around them and pulls the picker into the
   titlebar row. The form must never shrink below its two combos
   (flex: 0 0 auto), or it wraps into a stacked column. */
.app-shell .app-titlebar .setup-picker-row { display: flex; gap: 12px; flex-wrap: nowrap; flex: 0 0 auto; margin-left: auto; }
.app-shell .app-titlebar .setup-picker-row > div { flex: 0 1 300px; display: flex; flex-direction: column; gap: 3px; }
.app-shell .app-titlebar .setup-picker-row label { font-size: .78rem; font-weight: 900; color: var(--app-muted); }
/* Setup Surah: title on the left, the Surah/Ayah pickers centred on the page. */
.app-shell .app-titlebar:has(.setup-picker-row) { display: grid; grid-template-columns: 1fr auto 1fr; }
.app-shell .app-titlebar:has(.setup-picker-row) .setup-picker-row { margin-left: 0; grid-column: 2; }
@media (max-width: 1100px) {
  .app-shell .app-titlebar:has(.setup-picker-row) { display: flex; }
  .app-shell .app-titlebar .setup-picker-row { flex-wrap: wrap; flex: 1 1 100%; margin-left: 0; }
  .app-shell .app-titlebar .setup-picker-row > div { flex: 1 1 260px; }
}
.app-shell .setup-ayah-header { margin: 2px 0 8px; }
.app-shell .setup-tabs { justify-content: flex-start; margin-bottom: 10px; }

/* ------------------------------------------------------------
   QUR'AN PAGE — authenticated non-student (teacher) treatment
   (approved role-aware rule). Compact application geometry with NO
   wallpaper, NO mascots, NO student personalization — professional
   friendly pastel surfaces from the app families. Scoped to the
   .app-shell body class only: logged-out/public rendering has no
   shell class and stays pixel-identical, and students keep the
   Student V2 focus shell via student.css. The 1180px reading
   measure is kept — only vertical waste compacts (G-2).
   ------------------------------------------------------------ */
.app-shell .quran-explorer { padding: 8px clamp(16px, 2vw, 32px) 40px; }
.app-shell .quran-mascot { display: none; }
.app-shell .quran-picker-bar { margin: 2px 0 6px; gap: 10px; }
.app-shell .quran-picker-card { padding: 10px 18px; max-width: none; flex: 1; background: var(--app-surface-teal); }
.app-shell .quran-picker-card .quran-picker-title { margin-bottom: 6px; font-size: .95rem; }
.app-shell .ayah-display-card    { background: var(--app-surface-cream); }
.app-shell .translation-card     { background: var(--app-surface-teal); }
.app-shell .simple-translation-card { background: var(--app-surface-sky); }
.app-shell .explanation-card     { background: var(--app-surface-peach); }
.app-shell .story-card           { background: var(--app-surface-gold); }
.app-shell .connection-card      { background: var(--app-surface-green); }
.app-shell .reflection-card      { background: var(--app-surface-lavender); }
.app-shell .mark-complete-card   { background: var(--app-surface-teal); }
.app-shell .activities-card      { background: var(--app-surface-sky); }

/* Checkbox rows inside legacy .form blocks: style.css gives every
   .form input width:100%, which floats a lone checkbox onto its own
   line above its label text. Inside the app shell a checkbox sits
   inline with its label (teacher/parent Quran Screen setup). */
.app-shell .form label input[type="checkbox"] {
  width: auto;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

/* Tint utilities — apply to .app-card, .app-launcher, .app-toolbar,
   or any app surface. Border picks up a whisper of the same hue.
   Declared AFTER every surface primitive so the tint wins the
   cascade at equal specificity. */
.app-shell .app-tint-teal     { background: var(--app-surface-teal);     border-color: color-mix(in srgb, var(--brand-teal) 22%, transparent); }
.app-shell .app-tint-sky      { background: var(--app-surface-sky);      border-color: color-mix(in srgb, var(--brand-blue) 20%, transparent); }
.app-shell .app-tint-green    { background: var(--app-surface-green);    border-color: color-mix(in srgb, var(--brand-green) 22%, transparent); }
.app-shell .app-tint-gold     { background: var(--app-surface-gold);     border-color: color-mix(in srgb, var(--brand-gold) 28%, transparent); }
.app-shell .app-tint-peach    { background: var(--app-surface-peach);    border-color: color-mix(in srgb, var(--brand-orange) 20%, transparent); }
.app-shell .app-tint-lavender { background: var(--app-surface-lavender); border-color: color-mix(in srgb, var(--brand-purple) 22%, transparent); }
.app-shell .app-tint-cream    { background: var(--app-surface-cream);    border-color: color-mix(in srgb, var(--brand-gold) 18%, transparent); }

/* Keyboard focus — same accessibility layer the student shell has. */
.app-shell a:focus-visible,
.app-shell button:focus-visible,
.app-shell input:focus-visible,
.app-shell select:focus-visible,
.app-shell textarea:focus-visible,
.app-shell [tabindex]:focus-visible {
  outline: 3px solid var(--app-accent);
  outline-offset: 2px;
  border-radius: 10px;
}

/* ------------------------------------------------------------
   COMPACT AUTH SHELL (login/register, G-4 + Phase A final
   correction). A dedicated ~76px authentication header — brand plus
   one quiet way back Home, nothing else — then the small context
   heading, then the form immediately. Never a 138px marketing
   header or a 250px+ hero above a two-field form.
   ------------------------------------------------------------ */
.auth-shell .auth-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 76px;
  padding: 0 clamp(16px, 2vw, 32px);
  background: #FDFCF8;
  border-bottom: 1px solid var(--site-border-default);
  box-shadow: 0 3px 12px rgba(18, 58, 102, .06);
}
[data-theme="dark"] .auth-shell .auth-header { background: #14181B; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth-shell .auth-header { background: #14181B; }
}
.auth-shell .auth-header .app-brand { display: flex; align-items: center; flex-shrink: 0; }
.auth-shell .auth-header .app-brand img { width: clamp(140px, 11vw, 178px); height: auto; display: block; }
.auth-shell .auth-home-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #52677A;
  font-weight: 800;
  font-size: .92rem;
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 999px;
  min-height: 44px;
}
.auth-shell .auth-home-link:hover { color: var(--teal-dark, #087C8B); background: #E4F1F4; }
.auth-shell { background: #F2F7F5; }
/* Fixed backgrounds above (auth-header text and the auth-shell page
   ground itself) never change with theme, but their text reads either
   a literal light-mode hex or a token that DOES relighten in dark mode
   (body's `color: var(--text)` from style.css, and --teal-dark on
   hover here) — pin them so the auth/login pages stay legible instead
   of going light-text-on-light-background. */
[data-theme="dark"] .auth-shell { background: #12181C; }
[data-theme="dark"] .auth-shell .auth-home-link { color: #9FB2C4; }
[data-theme="dark"] .auth-shell .auth-home-link:hover { color: #087C8B; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth-shell { background: #12181C; }
  :root:not([data-theme="light"]) .auth-shell .auth-home-link { color: #9FB2C4; }
  :root:not([data-theme="light"]) .auth-shell .auth-home-link:hover { color: #087C8B; }
}
.auth-shell main { min-height: calc(100vh - 76px - 70px); }
.auth-compact .auth-heading {
  max-width: 480px;
  margin: 18px auto 0;
  padding: 0 16px;
  text-align: center;
}
.auth-compact .auth-heading h1 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: 0 0 4px; }
/* The marketing star-pill eyebrow reads as decoration — on the auth
   shell it becomes a quiet uppercase label. */
.auth-compact .auth-heading .eyebrow {
  background: none;
  box-shadow: none;
  color: var(--app-muted, #52677A);
  padding: 0;
  margin-bottom: 4px;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.auth-compact .auth-heading .eyebrow::before { content: none; }
.auth-compact .auth-heading p { color: var(--app-muted, #52677A); font-weight: 700; font-size: .92rem; margin: 0; }
.auth-compact .auth-card-slot { padding-top: 14px; }

/* ------------------------------------------------------------
   Responsive — reflow without giant vertical gaps; never reproduce
   the legacy mobile .section 44px inflation inside this shell.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .app-shell .app-menu-toggle { display: block; }
  .app-shell .app-header { height: 68px; }
  .app-shell .app-header .site-nav {
    display: none;
    position: absolute;
    left: 16px; right: 16px; top: 70px;
    background: var(--app-surface-solid);
    border: 1px solid var(--app-line);
    border-radius: 14px;
    padding: 10px;
    box-shadow: var(--app-shadow);
  }
  .app-shell .app-header .site-nav.open { display: grid; gap: 4px; }
  .app-shell .app-titlebar { min-height: 0; }
  .app-shell .app-title-actions { margin-left: 0; width: 100%; }
}
@media (max-width: 560px) {
  .app-shell .app-page { padding: 12px 16px 32px; }
  /* The header row must fit a 390px phone: the role badge is
     redundant context there, the brand shrinks, and the logout
     button tightens — no horizontal page overflow, ever. */
  .app-shell .app-header { gap: 10px; padding: 0 12px; }
  .app-shell .app-brand img { width: 118px; }
  .app-shell .app-role-badge { display: none; }
  .app-shell .app-profile { gap: 4px; }
  .app-shell .app-profile .nav-link-button { font-size: .82rem; padding: 8px 6px; }
}

/* Super Admin people-setup pages: sub-navigation between the four setup
   pages (numbered in the order they are normally done) and the student
   type filter. Theme-safe: only app tokens, no fixed colours. */
.app-shell .app-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 14px;
}
.app-shell .app-subnav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--app-line);
  color: var(--app-ink);
  font-size: .88rem;
  font-weight: 800;
  text-decoration: none;
}
.app-shell .app-subnav a:hover { background: var(--app-accent-soft); color: var(--app-accent); }
.app-shell .app-subnav a.is-active {
  background: var(--app-accent-soft);
  border-color: var(--app-accent);
  color: var(--app-accent);
}
.app-shell .app-subnav-step {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--app-accent-soft);
  color: var(--app-accent);
  font-size: .75rem;
}
.app-shell .app-subnav--filter { margin: 4px 0 10px; }


/* ============================================================
   Assignments (Super Admin pages: super-admin-assignments*.php)
   Theme-safe: app tokens only. Chips mirror the student state palette
   (the six agreed states plus lifecycle overlays).
   ============================================================ */
.app-shell .asg-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 800;
  white-space: nowrap;
  background: color-mix(in srgb, var(--app-ink) 8%, transparent);
  color: var(--app-ink);
}
.app-shell .asg-chip--in-progress { background: color-mix(in srgb, #3b82f6 18%, transparent); }
.app-shell .asg-chip--previously-completed { background: color-mix(in srgb, #8b5cf6 18%, transparent); }
.app-shell .asg-chip--completed, .app-shell .asg-chip--active { background: color-mix(in srgb, #16a34a 20%, transparent); }
.app-shell .asg-chip--completed-late { background: color-mix(in srgb, #d97706 22%, transparent); }
.app-shell .asg-chip--unavailable, .app-shell .asg-chip--cancelled, .app-shell .asg-chip--archived { color: var(--app-muted); }
.app-shell .asg-new { background: var(--app-accent-soft); border-color: var(--app-accent) !important; color: var(--app-accent) !important; }
.app-shell .asg-actions { white-space: nowrap; }
.app-shell .asg-hint { margin: 0 0 10px; font-size: .88rem; font-weight: 600; color: var(--app-muted); }
.app-shell .asg-summary { margin: 0 0 10px; }
.app-shell .asg-wide { grid-column: 1 / -1; }
.app-shell .asg-inline { display: inline; }
.app-shell .asg-flag { color: #b45309; font-weight: 700; }
.app-shell .asg-row-removed { opacity: .55; }
.app-shell .asg-due--past { color: #b45309; font-weight: 700; }
.app-shell .asg-empty { font-weight: 700; color: var(--app-muted); }
.app-shell .asg-legend { margin: 12px 0 0; padding-left: 18px; font-size: .84rem; color: var(--app-muted); }
.app-shell .asg-legend li { margin: 3px 0; }
.app-shell .asg-matrix th { vertical-align: bottom; min-width: 120px; }
.app-shell .asg-matrix th:first-child { min-width: 150px; }
.app-shell .asg-cell small, .app-shell .asg-matrix td small { display: block; color: var(--app-muted); font-weight: 600; margin-top: 2px; }
.app-shell .asg-recipient-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; align-items: center; }
.app-shell .asg-recipient-tools input[type="search"] { flex: 1 1 220px; max-width: 320px; }
.app-shell .asg-recipients {
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  padding: 8px 12px;
  display: grid;
  gap: 4px;
}
.app-shell .asg-pick { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; margin: 2px 0; padding: 4px 0; }
/* Larger tap target and a readable label inside the (red) confirmation notices */
.app-shell .asg-pick input[type="checkbox"] { width: 20px; height: 20px; margin: 1px 0 0; }
.app-shell .notice .asg-pick { color: inherit; margin-top: 8px; }
.app-shell .asg-list td:first-child { min-width: 190px; }
.app-shell .asg-nowrap { white-space: nowrap; }
.app-shell .asg-pick input { flex: 0 0 auto; }
.app-shell .asg-pick-note { color: var(--app-muted); font-size: .8rem; font-weight: 600; }
.app-shell .asg-picker-surah { border: 1px solid var(--app-line); border-radius: 10px; padding: 8px 12px; margin: 8px 0; }
.app-shell .asg-picker-surah > summary { cursor: pointer; font-weight: 800; }
.app-shell .asg-picker-ayah { border: 0; border-top: 1px dashed var(--app-line); margin: 8px 0 0; padding: 6px 0 0; }
.app-shell .asg-picker-ayah legend { font-size: .85rem; font-weight: 800; color: var(--app-muted); padding: 0 6px 0 0; }

/* ---- Documentation reader (super-admin-documentation.php) ----
   Article typography for rendered Markdown. Colours come only from the
   --app-* tokens so light and dark themes both work without overrides. */
.app-shell .doc-layout {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: var(--app-card-gap);
  align-items: start;
}
/* Not position: sticky — the site's <main> has overflow: hidden, which
   makes sticky a no-op for everything inside it. */
.app-shell .doc-sidebar { min-width: 0; }
.app-shell .doc-sidebar h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--app-muted); margin: 0 0 8px; }
.app-shell .doc-sidebar h2:not(:first-child) { margin-top: 18px; }
.app-shell .doc-toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.app-shell .doc-toc a { display: block; padding: 4px 8px; border-radius: 8px; color: var(--app-ink); text-decoration: none; font-size: .9rem; line-height: 1.35; }
.app-shell .doc-toc a:hover { background: var(--app-accent-soft); }
.app-shell .doc-toc a[aria-current="page"] { background: var(--app-accent-soft); color: var(--app-accent); font-weight: 800; }
.app-shell .doc-toc-l3 a { padding-left: 20px; font-size: .84rem; color: var(--app-muted); }
.app-shell .doc-notice { margin-bottom: var(--app-section-gap); font-weight: 700; }

.app-shell .doc-article { min-width: 0; line-height: 1.65; color: var(--app-ink); max-width: 920px; }
.app-shell .doc-article .doc-meta { color: var(--app-muted); font-size: .82rem; font-weight: 700; margin: 0 0 4px; }
.app-shell .doc-article h1 { font-size: 1.6rem; margin: 0 0 12px; }
.app-shell .doc-article h2 { font-size: 1.3rem; margin: 32px 0 10px; padding-top: 14px; border-top: 1px solid var(--app-line); scroll-margin-top: calc(var(--app-header-height) + 12px); }
.app-shell .doc-article h3 { font-size: 1.08rem; margin: 22px 0 8px; scroll-margin-top: calc(var(--app-header-height) + 12px); }
.app-shell .doc-article h4 { font-size: 1rem; margin: 18px 0 6px; }
.app-shell .doc-article p,
.app-shell .doc-article ul,
.app-shell .doc-article ol { margin: 0 0 12px; }
.app-shell .doc-article ul,
.app-shell .doc-article ol { padding-left: 24px; }
.app-shell .doc-article li { margin: 3px 0; }
.app-shell .doc-article a { color: var(--app-accent); }
.app-shell .doc-article blockquote { margin: 0 0 12px; padding: 10px 14px; border-left: 4px solid var(--app-accent); background: var(--app-accent-soft); border-radius: 0 10px 10px 0; }
.app-shell .doc-article blockquote p:last-child { margin-bottom: 0; }
.app-shell .doc-article code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: color-mix(in srgb, var(--app-ink) 8%, transparent); padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }
.app-shell .doc-article pre { margin: 0 0 14px; padding: 12px 14px; overflow-x: auto; border-radius: 10px; border: 1px solid var(--app-line); background: color-mix(in srgb, var(--app-ink) 6%, transparent); line-height: 1.5; }
.app-shell .doc-article pre code { background: none; padding: 0; font-size: .85rem; overflow-wrap: normal; white-space: pre; }
.app-shell .doc-article .doc-table-wrap { overflow-x: auto; margin: 0 0 14px; }
/* min-width: on a phone a table keeps readable columns and scrolls inside
   .doc-table-wrap, instead of squeezing its text column to a few letters. */
.app-shell .doc-article table { border-collapse: collapse; width: 100%; min-width: 44rem; font-size: .9rem; }
.app-shell .doc-article th,
.app-shell .doc-article td { border: 1px solid var(--app-line); padding: 6px 10px; text-align: left; vertical-align: top; }
.app-shell .doc-article th { background: color-mix(in srgb, var(--app-ink) 6%, transparent); font-weight: 800; }
/* Paths and flags stay whole inside table cells; the table scrolls instead. */
.app-shell .doc-article td code { white-space: nowrap; overflow-wrap: normal; }
.app-shell .doc-article hr { border: 0; border-top: 1px solid var(--app-line); margin: 24px 0; }

@media (max-width: 860px) {
  .app-shell .doc-layout { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================
   Community (Super Admin: super-admin-community.php)
   Theme-safe: app tokens only. Chip text is always --app-ink on a tint, so
   it keeps its contrast in both themes; state is also in the words, never
   colour alone.
   ============================================================ */
.app-shell .cmty-admin-chip {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--app-ink);
  background: color-mix(in srgb, var(--app-ink) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-ink) 18%, transparent);
}
.app-shell .cmty-admin-chip--on,
.app-shell .cmty-admin-chip--ok { background: color-mix(in srgb, #16a34a 20%, transparent); border-color: color-mix(in srgb, #16a34a 45%, transparent); }
.app-shell .cmty-admin-chip--warn { background: color-mix(in srgb, #d97706 22%, transparent); border-color: color-mix(in srgb, #d97706 50%, transparent); }
.app-shell .cmty-admin-chip--fail { background: color-mix(in srgb, #dc2626 20%, transparent); border-color: color-mix(in srgb, #dc2626 50%, transparent); }
.app-shell .cmty-admin-state { margin: 0 0 8px; }
.app-shell .cmty-admin-note { font-size: .86rem; font-weight: 600; color: var(--app-muted); }
.app-shell .cmty-admin-signals { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 0 0 10px; }
.app-shell .cmty-admin-signal {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border-left: 4px solid color-mix(in srgb, #16a34a 70%, transparent);
  background: color-mix(in srgb, var(--app-ink) 4%, transparent);
}
.app-shell .cmty-admin-signal--warning { border-left-color: #d97706; }
.app-shell .cmty-admin-signal--failure { border-left-color: #dc2626; }
.app-shell .cmty-admin-signal dt { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--app-muted); }
.app-shell .cmty-admin-signal dd { margin: 4px 0 0; font-weight: 700; color: var(--app-ink); }
/* The table contains its visually hidden labels: without a positioned
   ancestor they escape the table's own scroll box and widen the page on
   phones. */
.app-shell .app-table-wrap .cmty-admin-table { position: relative; }
/* Row headers are names: undo the shared column-header styling. */
.app-shell .app-table-wrap .cmty-admin-table th[scope="row"] {
  font-size: inherit;
  font-weight: 800;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  color: var(--app-ink);
  background: transparent;
  padding: 8px 12px;
  border-bottom: 1px solid var(--app-line);
}
.app-shell .app-table-wrap .cmty-admin-table tr:last-child th[scope="row"] { border-bottom: none; }
.app-shell .cmty-admin-table td,
.app-shell .cmty-admin-table th[scope="row"] { vertical-align: middle; }
.app-shell .cmty-admin-action { white-space: nowrap; text-align: right; }
/* Community's own action buttons are solid, not the shared gradient (whose
   light top stop leaves white text near 2.4:1): white on #087C8B is 4.9:1 and
   on #9A3030 7.4:1, the same in both themes. */
.app-shell .cmty-admin-btn { min-height: 44px; padding: 8px 18px; font-size: .9rem; box-shadow: none; }
.app-shell a.cmty-admin-btn--on, .app-shell button.cmty-admin-btn--on { background: #087C8B; color: #FFFFFF; }
.app-shell a.cmty-admin-btn--off, .app-shell button.cmty-admin-btn--off { background: #9A3030; color: #FFFFFF; }
.app-shell .cmty-admin-btn:hover { color: #FFFFFF; filter: brightness(1.08); }
.app-shell .cmty-admin-btn:focus-visible { outline: 3px solid var(--app-ink); outline-offset: 3px; }
.app-shell .cmty-admin-confirm { max-width: 760px; }
.app-shell .cmty-admin-confirm-form { margin: 14px 0 6px; }
.app-shell .cmty-admin-back { margin: 10px 0 0; font-weight: 700; }
.app-shell .cmty-admin-flash:focus { outline: 3px solid var(--app-accent); outline-offset: 2px; }
.app-shell .cmty-admin-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-shell .cmty-admin-entry { margin-bottom: var(--app-section-gap); }

/* ============================================================
   Bulk Surah Setup (Super Admin: super-admin-bulk-setup.php)
   App tokens only, so both themes work. Status and result are always in
   words as well as colour/icon.
   ============================================================ */
.app-shell .bulk-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.app-shell .bulk-field { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-weight: 800; color: var(--app-muted); min-width: 0; }
.app-shell .bulk-field select { min-width: 0; max-width: 100%; }
.app-shell .bulk-field--num input { width: 7rem; }
.app-shell .bulk-empty { color: var(--app-muted); font-weight: 600; }
.app-shell .bulk-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; border-bottom: 1px solid var(--app-line); }
.app-shell .bulk-tab { padding: 10px 14px; font-weight: 800; color: var(--app-muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.app-shell .bulk-tab:hover { color: var(--app-ink); }
.app-shell .bulk-tab.is-active { color: var(--app-ink); border-bottom-color: var(--app-accent); }
.app-shell .bulk-tab--out { margin-left: auto; font-weight: 700; }
.app-shell .bulk-selection { margin-bottom: 12px; }
.app-shell .bulk-select-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.app-shell .bulk-select-buttons .btn { min-height: 40px; padding: 6px 14px; font-size: .85rem; }
.app-shell .bulk-summary { margin: 10px 0 0; font-weight: 700; color: var(--app-ink); }
.app-shell .bulk-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.app-shell .bulk-filter {
  min-height: 36px; padding: 4px 14px; border-radius: 999px; font: inherit; font-size: .85rem; font-weight: 800;
  color: var(--app-ink); background: transparent; border: 1px solid var(--app-line); cursor: pointer;
}
.app-shell .bulk-filter.is-active { background: var(--app-accent-soft); border-color: var(--app-accent); }
.app-shell .bulk-filter:focus-visible { outline: 3px solid var(--app-accent); outline-offset: 2px; }
.app-shell .bulk-table-wrap { overflow-x: auto; position: relative; }
.app-shell .bulk-table th[scope="row"] { font-weight: 800; white-space: nowrap; text-transform: none; letter-spacing: normal; font-size: inherit; color: var(--app-ink); background: transparent; padding: 8px 12px; border-bottom: 1px solid var(--app-line); }
.app-shell .bulk-table td, .app-shell .bulk-table th[scope="row"] { vertical-align: top; }
.app-shell .bulk-table tr[hidden] { display: none; }
.app-shell .bulk-count { white-space: nowrap; font-variant-numeric: tabular-nums; }
.app-shell .bulk-issues { min-width: 220px; }
.app-shell .bulk-muted { color: var(--app-muted); font-weight: 600; font-size: .85em; }
.app-shell .bulk-ready { font-size: .8rem; font-weight: 800; color: var(--app-ink); background: color-mix(in srgb, #16a34a 16%, transparent); border-radius: 6px; padding: 0 6px; }
.app-shell .bulk-warning { color: var(--app-ink); border-left: 3px solid #d97706; padding-left: 6px; }
.app-shell .bulk-list { margin: 6px 0 0; padding-left: 18px; font-size: .85rem; }
.app-shell .bulk-list li { margin: 2px 0; }
.app-shell .bulk-predict { margin: 6px 0 0; font-size: .82rem; color: var(--app-muted); }
.app-shell .bulk-open { white-space: nowrap; font-weight: 700; font-size: .85rem; }
.app-shell .bulk-status {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800; white-space: nowrap;
  color: var(--app-ink); background: color-mix(in srgb, var(--app-ink) 8%, transparent); border: 1px solid color-mix(in srgb, var(--app-ink) 16%, transparent);
}
.app-shell .bulk-status--ready, .app-shell .bulk-status--published { background: color-mix(in srgb, #16a34a 18%, transparent); border-color: color-mix(in srgb, #16a34a 45%, transparent); }
.app-shell .bulk-status--published_locked { background: color-mix(in srgb, #d97706 18%, transparent); border-color: color-mix(in srgb, #d97706 45%, transparent); }
.app-shell .bulk-status--needs_attention { background: color-mix(in srgb, #dc2626 16%, transparent); border-color: color-mix(in srgb, #dc2626 45%, transparent); }
.app-shell .bulk-approve { margin-top: 14px; }
.app-shell .bulk-approve h2 { margin-top: 0; }
.app-shell .bulk-options { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.app-shell .bulk-options label { display: block; font-weight: 700; }
.app-shell .bulk-options input { margin-right: 6px; }
.app-shell .bulk-advanced .bulk-muted { display: block; margin: 2px 0 0 24px; }
.app-shell .bulk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
.app-shell .bulk-fingerprint { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; color: var(--app-muted); margin-top: 4px; }
.app-shell .bulk-result { min-width: 200px; }
.app-shell .bulk-state { display: inline-block; width: 1.4em; font-weight: 900; }
.app-shell .bulk-state--done, .app-shell .bulk-state--partial { color: #15803d; }
.app-shell .bulk-state--failed, .app-shell .bulk-state--changed, .app-shell .bulk-state--busy { color: #b91c1c; }
.app-shell .bulk-state--attention, .app-shell .bulk-state--unknown { color: #b45309; }
[data-theme="dark"] .app-shell .bulk-state--done, [data-theme="dark"] .app-shell .bulk-state--partial { color: #4ade80; }
[data-theme="dark"] .app-shell .bulk-state--failed, [data-theme="dark"] .app-shell .bulk-state--changed, [data-theme="dark"] .app-shell .bulk-state--busy { color: #f87171; }
[data-theme="dark"] .app-shell .bulk-state--attention, [data-theme="dark"] .app-shell .bulk-state--unknown { color: #fbbf24; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-shell .bulk-state--done, :root:not([data-theme="light"]) .app-shell .bulk-state--partial { color: #4ade80; }
  :root:not([data-theme="light"]) .app-shell .bulk-state--failed, :root:not([data-theme="light"]) .app-shell .bulk-state--changed, :root:not([data-theme="light"]) .app-shell .bulk-state--busy { color: #f87171; }
  :root:not([data-theme="light"]) .app-shell .bulk-state--attention, :root:not([data-theme="light"]) .app-shell .bulk-state--unknown { color: #fbbf24; }
}
.app-shell .bulk-confirm { margin: 14px 0; padding: 12px 14px; border-radius: 10px; border-left: 4px solid #d97706; background: color-mix(in srgb, var(--app-ink) 4%, transparent); }
.app-shell .bulk-confirm h3 { margin: 0 0 6px; }
.app-shell .bulk-confirm-check { display: block; margin-top: 10px; font-weight: 800; }
.app-shell .bulk-vh {
  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 (max-width: 560px) {
  .app-shell .bulk-tab--out { margin-left: 0; }
  .app-shell .bulk-field--num input { width: 5.5rem; }
}
.app-shell .setup-bulk-link { margin: 4px 0 0; font-size: .85rem; font-weight: 700; }
.app-shell .bulk-setup .btn:disabled { opacity: .5; cursor: not-allowed; }
.app-shell .bulk-missing { margin-top: 6px; font-size: .85rem; }
.app-shell .bulk-missing summary { font-weight: 700; }
/* Clipart Upload tab (stage 6, design §8). */
.app-shell .bulk-clipart { margin-top: 14px; }
.app-shell .bulk-clipart h2 { margin-top: 0; }
.app-shell .bulk-clip-defaults legend { font-weight: 800; margin-bottom: 6px; }
.app-shell .bulk-clip-defaults-grid { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-start; }
.app-shell .bulk-clip-defaults-grid [role="group"] label { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; font-weight: 700; }
.app-shell .bulk-clip-label { display: block; font-size: .82rem; font-weight: 800; color: var(--app-muted); margin-bottom: 4px; }
.app-shell .bulk-clip-pick { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; font-weight: 800; }
.app-shell .bulk-clip-pick input { max-width: 100%; }
.app-shell .bulk-clip-table td { min-width: 0; }
.app-shell .bulk-clip-image { width: 150px; }
.app-shell .bulk-clip-image img { display: block; max-width: 120px; max-height: 90px; border-radius: 8px; background: color-mix(in srgb, var(--app-ink) 6%, transparent); }
.app-shell .bulk-clip-file { font-weight: 700; font-size: .85rem; overflow-wrap: anywhere; margin-top: 4px; }
.app-shell .bulk-clip-remove, .app-shell .bulk-clip-action { min-height: 34px; padding: 4px 10px; font-size: .8rem; margin-top: 6px; }
.app-shell .bulk-clip-text { min-width: 220px; }
.app-shell .bulk-clip-field { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; font-size: .8rem; font-weight: 800; color: var(--app-muted); }
.app-shell .bulk-clip-field input, .app-shell .bulk-clip-field select, .app-shell .bulk-clip-field textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.app-shell .bulk-clip-field textarea { resize: vertical; font: inherit; font-weight: 400; }
.app-shell .bulk-clip-options summary { font-weight: 700; font-size: .85rem; cursor: pointer; }
.app-shell .bulk-clip-options label { display: block; font-size: .85rem; margin: 4px 0; }
.app-shell .bulk-clip-check { min-width: 200px; font-size: .85rem; }
.app-shell .bulk-clip-asset { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; font-size: .8rem; color: var(--app-muted); overflow-wrap: anywhere; }
.app-shell .bulk-clip-asset img { max-width: 48px; max-height: 48px; border-radius: 6px; flex: none; }
.app-shell .bulk-clip-choice { display: flex; gap: 14px; margin-top: 6px; font-weight: 700; }
.app-shell .bulk-clip-bad { color: #b91c1c; font-weight: 800; }
[data-theme="dark"] .app-shell .bulk-clip-bad { color: #f87171; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-shell .bulk-clip-bad { color: #f87171; }
}
@media (max-width: 720px) {
  /* One row becomes a card: no sideways scrolling on a phone. */
  .app-shell .bulk-clip-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .app-shell .bulk-clip-table, .app-shell .bulk-clip-table tbody, .app-shell .bulk-clip-table tr, .app-shell .bulk-clip-table td { display: block; width: auto; min-width: 0; }
  .app-shell .bulk-clip-table tr { border-bottom: 2px solid var(--app-line); padding: 8px 0; }
  .app-shell .bulk-clip-table td { border: 0; padding: 4px 0; }
}

/* ---- Bulk Surah Setup: Clipart Prompts tab (design §7B) ---- */
.app-shell .bcp-ideas, .app-shell .bcp-build { margin-bottom: 14px; }
.app-shell .bcp-build { margin-top: 14px; }
.app-shell .bcp-ideas h2, .app-shell .bcp-build h2 { margin-top: 0; }
.app-shell .bcp-panel { margin-top: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--app-line); background: color-mix(in srgb, var(--app-ink) 3%, transparent); }
.app-shell .bcp-textarea { width: 100%; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; line-height: 1.4; resize: vertical; }
.app-shell .bcp-check { display: block; margin: 8px 0; font-weight: 700; }
.app-shell .bcp-check input { margin-right: 6px; }
.app-shell .bcp-table .bcp-cell { min-width: 360px; }
.app-shell .bcp-ideas-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.app-shell .bcp-idea { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--app-line); font-size: .85rem; font-weight: 700; cursor: pointer; }
.app-shell .bcp-idea--archived { opacity: .7; }
.app-shell .bcp-archived { flex-basis: 100%; font-size: .85rem; }
.app-shell .bcp-archived summary { font-weight: 700; cursor: pointer; }
.app-shell .bcp-archived .bcp-idea { margin: 4px 4px 0 0; }
.app-shell .bcp-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: .72rem; font-weight: 800; white-space: nowrap; color: var(--app-ink); background: color-mix(in srgb, var(--app-ink) 8%, transparent); border: 1px solid color-mix(in srgb, var(--app-ink) 16%, transparent); }
.app-shell .bcp-badge--ok { background: color-mix(in srgb, #16a34a 18%, transparent); border-color: color-mix(in srgb, #16a34a 45%, transparent); }
.app-shell .bcp-badge--warn { background: color-mix(in srgb, #d97706 18%, transparent); border-color: color-mix(in srgb, #d97706 45%, transparent); }
.app-shell .bcp-badge--bad { background: color-mix(in srgb, #dc2626 16%, transparent); border-color: color-mix(in srgb, #dc2626 45%, transparent); }
.app-shell .bcp-cands-head { margin: 10px 0 4px; font-size: .9rem; }
.app-shell .bcp-cands { display: grid; gap: 6px; }
.app-shell .bcp-cand { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--app-line); font-size: .85rem; }
.app-shell .bcp-cand-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; cursor: pointer; }
.app-shell .bcp-cand-rank { font-weight: 800; color: var(--app-muted); }
.app-shell .bcp-cand-line { margin: 3px 0 0 24px; }
.app-shell .bcp-row-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.app-shell .bcp-btn { min-height: 34px; padding: 4px 12px; font-size: .82rem; }
.app-shell .bcp-row-status { margin: 6px 0 0; font-size: .82rem; }
.app-shell .bcp-resolved { margin-top: 6px; font-size: .85rem; }
.app-shell .bcp-resolved summary { font-weight: 700; cursor: pointer; }
.app-shell .bcp-options { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.app-shell .bcp-version { display: flex; flex-wrap: wrap; gap: 12px; font-weight: 700; }
.app-shell .bcp-version input { margin-right: 4px; }
.app-shell .bcp-group { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--app-line); }
.app-shell .bcp-group h3 { margin: 0 0 6px; }
.app-shell .bcp-result-idea { margin: 8px 0 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--app-line); }
.app-shell .bcp-result-idea h4 { margin: 0 0 6px; }
.app-shell .bcp-prompt-card { margin-top: 8px; }
.app-shell .bcp-prompt-meta { margin-bottom: 4px; font-size: .85rem; }
.app-shell .bcp-warning { margin: 4px 0; padding: 6px 10px; border-left: 3px solid #d97706; font-size: .85rem; background: color-mix(in srgb, var(--app-ink) 4%, transparent); }
.app-shell .bcp-copy-status { font-size: .82rem; }