/* Native Jannah skin state. Removing dark-skin restores all saved light colors.
 * Keep this sheet mobile-only; never invert photos, thumbnails, or cover art. */
@media (max-width: 767px) {
  html.dark-skin body #ahl-about-school .aa-brandbar { background: #182634 !important; color: #e6eef6 !important; }
  html.dark-skin body {
    --ssk-mobile-bg: #101923;
    --ssk-mobile-surface: #182634;
    --ssk-mobile-raised: #203345;
    --ssk-mobile-line: #364b5e;
    --ssk-mobile-ink: #e6eef6;
    --ssk-mobile-muted: #b0becd;
    --ssk-mobile-link: #8fceff;
    color: var(--ssk-mobile-ink) !important;
    background-color: var(--ssk-mobile-bg) !important;
    background-image: none !important;
  }

  html.dark-skin body #tie-wrapper,
  html.dark-skin body #content .container-wrapper,
  html.dark-skin body .main-content .container-wrapper,
  html.dark-skin body .mag-box > .container-wrapper,
  html.dark-skin body .post-layout-1 .post-content {
    background-color: var(--ssk-mobile-bg) !important;
    background-image: none !important;
  }

  /* Home photo feature: retain translucency over the original image. */
  html.dark-skin body #ahl-home-hero {
    --ahh-ink: var(--ssk-mobile-ink) !important;
    --ahh-blue: var(--ssk-mobile-link) !important;
    --ahh-paper: var(--ssk-mobile-bg) !important;
  }
  html.dark-skin body #ahl-home-hero .ahh-media__wash {
    background: linear-gradient(90deg, transparent 44%, #1019230a 57%, #101923a3 78%, #101923 98%) !important;
  }
  html.dark-skin body #ahl-home-hero .ahh-caption {
    border-color: #aec8df66;
    background: linear-gradient(110deg, #101923d9, #182634ed);
    box-shadow: 0 4px 18px #0003, inset 0 1px #ffffff1a;
  }
  html.dark-skin body #ahl-home-hero .ahh-caption__meta { color: var(--ssk-mobile-muted); }
  html.dark-skin body #ahl-home-hero .ahh-leaf { background: #254558; }
  html.dark-skin body #ahl-home-hero :is(.ahh-control, .ahh-progress__item):hover { background: var(--ssk-mobile-raised); }
  html.dark-skin body #ahl-home-hero .ahh-progress__item { color: var(--ssk-mobile-muted); }

  /* Each shortcut keeps its blue, green, violet, or gold identity. */
  html.dark-skin body #ahl-home-services {
    background: var(--ssk-mobile-surface) !important;
    border-color: var(--ssk-mobile-line) !important;
    color: var(--ssk-mobile-ink);
  }
  html.dark-skin body #ahl-home-services :is(.ahs-card, .ahs-label) { color: var(--ssk-mobile-ink); }
  html.dark-skin body #ahl-home-services .ahs-card { border-color: var(--ahs-edge) !important; }
  html.dark-skin body #ahl-home-services .ahs-blue {
    --ahs-accent: #8fcfff;
    --ahs-surface: #19354a !important;
    --ahs-surface-end: #142b40 !important;
    --ahs-edge: #376580;
    --ahs-tint: #254d68;
    --ahs-tint-end: #1d405c;
    --ahs-icon-edge: #477b9b;
  }
  html.dark-skin body #ahl-home-services .ahs-teal {
    --ahs-accent: #91dfc9;
    --ahs-surface: #173b34 !important;
    --ahs-surface-end: #142f2b !important;
    --ahs-edge: #376e5d;
    --ahs-tint: #285445;
    --ahs-tint-end: #204739;
    --ahs-icon-edge: #4e856e;
  }
  html.dark-skin body #ahl-home-services .ahs-violet {
    --ahs-accent: #d2b7f5;
    --ahs-surface: #332b48 !important;
    --ahs-surface-end: #292338 !important;
    --ahs-edge: #65517e;
    --ahs-tint: #4a3b62;
    --ahs-tint-end: #3e3154;
    --ahs-icon-edge: #806799;
  }
  html.dark-skin body #ahl-home-services .ahs-gold {
    --ahs-accent: #efd08b;
    --ahs-surface: #3e3522 !important;
    --ahs-surface-end: #302b20 !important;
    --ahs-edge: #7e6b3f;
    --ahs-tint: #594a2c;
    --ahs-tint-end: #493d26;
    --ahs-icon-edge: #9a814a;
  }

  /* Weekly events, notices, and their text details; video layers stay native. */
  html.dark-skin body #ssk-weekly {
    --sw-ink: var(--ssk-mobile-ink) !important;
    --sw-muted: var(--ssk-mobile-muted) !important;
  }
  html.dark-skin body #ssk-weekly :is(.ssk-weekly-calendar, .ssk-weekly-dialog),
  html.dark-skin body #ssk-weekly .ssk-weekly-events .ssk-weekly-day-group {
    background: var(--ssk-mobile-surface) !important;
    border-color: var(--ssk-mobile-line) !important;
  }
  html.dark-skin body #ssk-weekly .ssk-weekly-events .ssk-weekly-day-group.is-next {
    background: #1d384c !important;
    border-inline-start-color: #78bdec !important;
  }
  html.dark-skin body #ssk-weekly :is(.ssk-weekly-filters, .ssk-weekly-group-date, .ssk-weekly-calendar-link, .ssk-weekly-retry, .ssk-weekly-panel-heading h3 > svg) {
    background: var(--ssk-mobile-raised);
    border-color: var(--ssk-mobile-line);
    color: var(--ssk-mobile-link);
  }
  html.dark-skin body #ssk-weekly :is(.ssk-weekly-filter, .ssk-weekly-icon-button, .ssk-weekly-chevron) { color: var(--ssk-mobile-muted); }
  html.dark-skin body #ssk-weekly .ssk-weekly-filter[aria-pressed="true"] { background: #315f83; color: #fff; }
  html.dark-skin body #ssk-weekly :is(.ssk-weekly-event-title, .ssk-weekly-event.is-next .ssk-weekly-event-title) { color: var(--ssk-mobile-ink) !important; }
  html.dark-skin body #ssk-weekly :is(.ssk-weekly-event-date, .ssk-weekly-event.is-next .ssk-weekly-event-date) { color: var(--ssk-mobile-muted) !important; }
  html.dark-skin body #ssk-weekly :is(.ssk-weekly-filter, .ssk-weekly-icon-button, .ssk-weekly-event, .ssk-weekly-calendar-link):hover,
  html.dark-skin body #ssk-weekly .ssk-weekly-day-group.is-next .ssk-weekly-event:hover { background: #294459; color: var(--ssk-mobile-ink); }
  html.dark-skin body #ssk-weekly .ssk-weekly-day-group.is-shared .ssk-weekly-event + .ssk-weekly-event { border-color: var(--ssk-mobile-line); }
  html.dark-skin body #ssk-weekly .ssk-weekly-notice:not(.is-video) {
    background: #302d25 !important;
    border-color: #615744;
  }
  html.dark-skin body #ssk-weekly .ssk-weekly-notice-body { background: #182634db; border-color: var(--ssk-mobile-line); }
  html.dark-skin body #ssk-weekly .ssk-weekly-notice-icon { background: #49402b; border-color: #71613d; color: #ecd08b; }
  html.dark-skin body #ssk-weekly :is(.ssk-weekly-notice-kicker, .ssk-weekly-notice-loading) { color: var(--ssk-mobile-muted); }
  html.dark-skin body #ssk-weekly .ssk-weekly-notice-text { color: var(--ssk-mobile-ink); }
  html.dark-skin body #ssk-weekly .ssk-weekly-notice-link { background: var(--ssk-mobile-raised); border-color: var(--ssk-mobile-line); color: var(--ssk-mobile-link); }
  html.dark-skin body #ssk-weekly .ssk-weekly-notice-link:hover { background: #294459; }
  html.dark-skin body #ssk-weekly .ssk-weekly-notice.is-active { background: #3c2732 !important; border-color: #775063; }
  html.dark-skin body #ssk-weekly .is-active :is(h3, .ssk-weekly-notice-kicker, .ssk-weekly-notice-text) { color: #ffd9e3; }
  html.dark-skin body #ssk-weekly .is-active .ssk-weekly-notice-icon { background: #583344; border-color: #88556a; color: #ffb8ce; }
  html.dark-skin body #ssk-weekly .is-active .ssk-weekly-notice-link { background: #583344; border-color: #88556a; color: #ffd9e3; }
  html.dark-skin body #ssk-weekly :is(.ssk-weekly-dialog-date, .ssk-weekly-dialog-location, .ssk-weekly-dialog-description) { color: var(--ssk-mobile-muted); border-color: var(--ssk-mobile-line); }

  /* News cards and tab states. */
  html.dark-skin body #ssk-news {
    --sn-ink: var(--ssk-mobile-ink) !important;
    --sn-muted: var(--ssk-mobile-muted) !important;
    --sn-accent: var(--ssk-mobile-link);
    background: var(--ssk-mobile-bg) !important;
  }
  html.dark-skin body #ssk-news :is(.ssk-news-card, .ssk-news-tabs, .ssk-news-empty) {
    background: var(--ssk-mobile-surface) !important;
    border-color: var(--ssk-mobile-line) !important;
  }
  html.dark-skin body #ssk-news .ssk-news-tab { color: var(--ssk-mobile-muted); }
  html.dark-skin body #ssk-news .ssk-news-tab:hover { background: var(--ssk-mobile-raised); color: var(--ssk-mobile-ink); }
  html.dark-skin body #ssk-news .ssk-news-tab[aria-selected="true"] { background: #315f83; color: #fff; }
  html.dark-skin body #ssk-news :is(.ssk-news-image-wrap, .ssk-news-image-placeholder) { background: var(--ssk-mobile-raised); color: var(--ssk-mobile-muted); }

  /* About page and constitution reader use embedded, explicit light colors. */
  html.dark-skin body #ahl-about-school {
    --ink: var(--ssk-mobile-ink) !important;
    --muted: var(--ssk-mobile-muted) !important;
    --line: var(--ssk-mobile-line) !important;
    --paper: var(--ssk-mobile-bg) !important;
    --teal: #80d2cf;
    --gold: #d8bd81;
    background: var(--ssk-mobile-bg) !important;
  }
  html.dark-skin body #ahl-about-school :is(.aa-chapter-nav, .aa-contact, .aa-since, .aa-guide-preview, dialog, .aa-dialog-top, .aa-icon-btn, .ac-toolbar, .ac-search-field, .ac-reader-footer, .ac-result-button, .ac-search-status, .ac-pdf-frame) {
    background: var(--ssk-mobile-surface) !important;
    border-color: var(--ssk-mobile-line);
    color: var(--ssk-mobile-ink);
  }
  html.dark-skin body #ahl-about-school .aa-hero { background-color: var(--ssk-mobile-surface) !important; }
  html.dark-skin body #ahl-about-school .aa-hero::before { background: linear-gradient(270deg, #182634ee, #182634e6 58%, #182634bb) !important; }
  html.dark-skin body #ahl-about-school .aa-hero::after { background: linear-gradient(0deg, #101923a8, transparent); }
  html.dark-skin body #ahl-about-school :is(.aa-hero h2, .aa-hero-headline, .aa-since strong, summary, .aa-vision-quote, .aa-original-link, .ac-section-title, .ac-search-heading, .ac-result-chapter) { color: #9cdbdf; }
  html.dark-skin body #ahl-about-school #aa-page-title { color: var(--ssk-mobile-muted); }
  html.dark-skin body #ahl-about-school :is(.aa-brand-sub, .aa-hero-lead, .aa-principal-role, .aa-portrait figcaption, .aa-copy p, .aa-long-copy p, .aa-value p, .aa-section-heading p, .aa-life p, .aa-guide-heading p, .aa-guide-preview p, .aa-guide-meta, .aa-guide-nav button span:last-child, .aa-contact-links a, .aa-message-body p, .ac-toolbar p, .ac-chapter-description, .ac-source, .ac-search-empty, .ac-search-clear, .ac-chapter-index, .ac-clause-number, .ac-empty, .ac-pdf-help, [data-ac-reader-status], [data-ac-progress]) { color: var(--ssk-mobile-muted); }
  html.dark-skin body #ahl-about-school .aa-staff-note { color: var(--ssk-mobile-muted) !important; }
  html.dark-skin body #ahl-about-school .aa-portrait figcaption { background: transparent; }
  html.dark-skin body #ahl-about-school :is(.aa-portrait-slot, .aa-story-small) { border-color: var(--ssk-mobile-line); }
  html.dark-skin body #ahl-about-school :is(.aa-vision, .aa-guide-section, .aa-subject, .aa-photo-placeholder) { background: var(--ssk-mobile-surface); border-color: var(--ssk-mobile-line); }
  html.dark-skin body #ahl-about-school .aa-guide-section::before { background: radial-gradient(ellipse at 10% 50%, #345968, transparent 65%); }
  html.dark-skin body #ahl-about-school .aa-guide-section::after { background: linear-gradient(270deg, #182634 35%, #182634e0 70%, transparent); }
  html.dark-skin body #ahl-about-school :is(.aa-btn, .aa-value, .ac-clause, .ac-table th, .ac-table td) { border-color: var(--ssk-mobile-line); }
  html.dark-skin body #ahl-about-school :is(.aa-btn:hover, .aa-icon-btn:hover, .ac-result-button:hover, .ac-chapter-button:hover) { background: var(--ssk-mobile-raised) !important; color: var(--ssk-mobile-ink); }
  html.dark-skin body #ahl-about-school .aa-btn-solid { background: #226673; border-color: #438c98; color: #fff; }
  html.dark-skin body #ahl-about-school .aa-guide-nav button { background: var(--ssk-mobile-raised); color: var(--ssk-mobile-muted); }
  html.dark-skin body #ahl-about-school .aa-guide-nav button:first-child,
  html.dark-skin body #ahl-about-school .aa-guide-nav button:hover { background: #244853; color: #b3ebeb; border-color: #80d2cf; }
  html.dark-skin body #ahl-about-school #ac-chapters { background: var(--ssk-mobile-bg); }
  html.dark-skin body #ahl-about-school #ac-content,
  html.dark-skin body #ahl-about-school #ac-search { color: var(--ssk-mobile-ink); }
  html.dark-skin body #ahl-about-school .ac-chapter-button { color: var(--ssk-mobile-muted); }
  html.dark-skin body #ahl-about-school .ac-chapter-button.is-active { background: #244853; color: #b3ebeb; border-color: #80d2cf; }
  html.dark-skin body #ahl-about-school .ac-table th { background: var(--ssk-mobile-raised); }
  html.dark-skin body #ahl-about-school mark.ac-highlight { background: #725a23; color: #fff0ba; }
  html.dark-skin body #ahl-about-school .ac-progress-track { background: var(--ssk-mobile-line); }
  html.dark-skin body #ahl-about-school .ac-page-buttons .aa-btn { background: var(--ssk-mobile-raised); }
  html.dark-skin body #ahl-about-school .aa-chapter-nav.aa-chapter-nav-premium { background: var(--ssk-mobile-surface) !important; border-color: var(--ssk-mobile-line); }
  html.dark-skin body #ahl-about-school .aa-chapter-nav-premium .aa-chapter-links .aa-chapter-link { color: var(--ssk-mobile-ink); border-color: var(--ssk-mobile-line); }
  html.dark-skin body #ahl-about-school .aa-chapter-nav-premium .aa-chapter-links .aa-chapter-link:hover,
  html.dark-skin body #ahl-about-school .aa-chapter-nav-premium .aa-chapter-links .aa-chapter-link:focus-visible { background: var(--ssk-mobile-raised); }
  html.dark-skin body #ahl-about-school .aa-chapter-nav-premium .aa-chapter-icon { background: var(--ssk-mobile-raised); border-color: var(--ssk-mobile-line); color: #80d2cf; }

  /* Team directory, organization groups, and person details. */
  html.dark-skin body #ssk-team {
    --st-ink: var(--ssk-mobile-ink) !important;
    --st-muted: var(--ssk-mobile-muted) !important;
    --st-line: var(--ssk-mobile-line) !important;
    --st-accent: var(--ssk-mobile-link);
    background: var(--ssk-mobile-bg) !important;
  }
  html.dark-skin body #ssk-team :is(.ssk-team-group, .ssk-team-person, .ssk-team-role, .ssk-team-principal-card, .ssk-team-dialog) { background: var(--ssk-mobile-surface) !important; border-color: var(--ssk-mobile-line) !important; }
  html.dark-skin body #ssk-team :is(.ssk-team-intro-symbol, .ssk-team-tabs, .ssk-team-search, .ssk-team-principal-kicker, .ssk-team-avatar, .ssk-team-group summary, .ssk-team-group-title small, .ssk-team-empty, .ssk-team-empty button, .ssk-team-dialog-close, .ssk-team-profile-roles li) { background: var(--ssk-mobile-raised); border-color: var(--ssk-mobile-line); color: var(--ssk-mobile-muted); }
  html.dark-skin body #ssk-team .ssk-team-tabs button { color: var(--ssk-mobile-muted); }
  html.dark-skin body #ssk-team .ssk-team-tabs button[aria-selected="true"] { background: #315f83; color: #fff; }
  html.dark-skin body #ssk-team :is(.ssk-team-role h3, .ssk-team-profile-roles h3, .ssk-team-profile-bio) { color: var(--ssk-mobile-muted); }
  html.dark-skin body #ssk-team :is(.ssk-team-role h3, .ssk-team-principal-link, .ssk-team-person-compact + .ssk-team-person-compact, .ssk-team-profile-head) { border-color: var(--ssk-mobile-line); }
  html.dark-skin body #ssk-team .ssk-team-profile-head { background: radial-gradient(ellipse at 50% 30%, #244254, transparent 72%); }
  html.dark-skin body #ssk-team .ssk-team-avatar-large { border-color: var(--ssk-mobile-surface); box-shadow: 0 0 0 1px var(--ssk-mobile-line); }
  html.dark-skin body #ssk-team :is(.ssk-team-person-compact:hover, .ssk-team-dialog-close:hover) { background: #294459 !important; color: var(--ssk-mobile-ink); }

  /* Library files keep type icons and folder accent colors. */
  html.dark-skin body #elahlya-library {
    --el-navy: var(--ssk-mobile-ink) !important;
    --el-ink: var(--ssk-mobile-ink) !important;
    --el-muted: var(--ssk-mobile-muted) !important;
    --el-border: var(--ssk-mobile-line) !important;
    --el-surface: var(--ssk-mobile-surface);
    --el-blue: var(--ssk-mobile-link);
    background: var(--ssk-mobile-bg) !important;
  }
  html.dark-skin body #elahlya-library :is(.el-hero, .el-home-link, .el-entry, .el-entrance, .el-refresh, .el-toolbar, .el-search input, .el-sort, .el-view, .el-search-notice, .el-state, .el-action) { background: var(--ssk-mobile-surface); border-color: var(--ssk-mobile-line); color: var(--ssk-mobile-ink); }
  html.dark-skin body #elahlya-library .el-card,
  html.dark-skin body #elahlya-library .el-list .el-card { background: var(--ssk-mobile-surface) !important; }
  html.dark-skin body #elahlya-library .el-card.el-folder { border-inline-start-color: var(--el-accent); }
  html.dark-skin body #elahlya-library .el-list .el-results > li + li { border-color: var(--ssk-mobile-line); }
  html.dark-skin body #elahlya-library :is(.el-card-path, .el-list-head, .el-search-hint),
  html.dark-skin body #elahlya-library .el-search input::placeholder { color: var(--ssk-mobile-muted); }
  html.dark-skin body #elahlya-library :is(.el-home-link:hover, .el-refresh:hover, .el-entrance:hover, .el-list .el-card:hover, .el-file-actions a, .el-file-actions a:hover, .el-view button[aria-pressed="true"], .el-filters button:hover, .el-filters button[aria-pressed="true"]) { background: var(--ssk-mobile-raised) !important; border-color: var(--ssk-mobile-line); color: var(--ssk-mobile-link); }
  html.dark-skin body #elahlya-library :is(.el-entry[aria-pressed="true"], .el-entrance[aria-pressed="true"], .el-search-submit, .el-action-primary) { background: #315f83; border-color: #5985a8; color: #fff; }
  html.dark-skin body #elahlya-library .el-file-name:hover { color: var(--ssk-mobile-link); }
  html.dark-skin body #elahlya-library .el-shared-link { background: #1c3d36; border-color: #426d61; color: #a0e5d2; }
  html.dark-skin body #elahlya-library .el-search-notice.el-partial { background: #3c3423; border-color: #786540; color: #efd49d; }

  /* Media controls and metadata; retain dark shorts cards and player overlays. */
  html.dark-skin body #ahl-school-media {
    --asm-ink: var(--ssk-mobile-ink) !important;
    --asm-muted: var(--ssk-mobile-muted) !important;
    --asm-line: var(--ssk-mobile-line) !important;
    --asm-blue: var(--ssk-mobile-link);
    background: var(--ssk-mobile-bg) !important;
  }
  html.dark-skin body #ahl-school-media :is(.asm-home, .asm-tabs, .asm-search, .asm-empty, .asm-more) { background: var(--ssk-mobile-surface); border-color: var(--ssk-mobile-line); color: var(--ssk-mobile-ink); }
  html.dark-skin body #ahl-school-media :is(.asm-kicker, .asm-tab, .asm-clear, .asm-result-count, .asm-feed-status, .asm-card-meta) { color: var(--ssk-mobile-muted); }
  html.dark-skin body #ahl-school-media .asm-shorts .asm-card-meta { color: #dfebf4; }
  html.dark-skin body #ahl-school-media .asm-search input::placeholder { color: var(--ssk-mobile-muted); }
  html.dark-skin body #ahl-school-media :is(.asm-home:hover, .asm-tab:hover, .asm-clear:hover, .asm-more:hover) { background: var(--ssk-mobile-raised); color: var(--ssk-mobile-ink); }
  html.dark-skin body #ahl-school-media .asm-tab[aria-selected="true"] { background: #315f83; color: #fff; }
  html.dark-skin body #ahl-school-media .asm-tab[data-asm-category="shorts"][aria-selected="true"] { background: #bc2858; }
  html.dark-skin body #ahl-school-media h1 span { background-image: linear-gradient(100deg, #8fceff, #80d2cf); }
  html.dark-skin body #ahl-school-media .asm-card-button:hover .asm-card-title { color: var(--ssk-mobile-link); }
  html.dark-skin body #ahl-school-media .asm-shorts .asm-card-button:hover .asm-card-title { color: #fff; }

  /* Preserved legacy calendar sidebar and its detail dialog. */
  html.dark-skin body #ahl-school-program { background: var(--ssk-mobile-surface) !important; color: var(--ssk-mobile-ink); border-color: var(--ssk-mobile-line); }
  html.dark-skin body #ahl-school-program :is(.cp-header, .cp-icon-button, .cp-event, .cp-state, .cp-dialog) { background: var(--ssk-mobile-surface); color: var(--ssk-mobile-ink); border-color: var(--ssk-mobile-line); }
  html.dark-skin body #ahl-school-program :is(.cp-title-icon, .cp-date, .cp-more, .cp-retry) { background: var(--ssk-mobile-raised); color: var(--ssk-mobile-link); border-color: var(--ssk-mobile-line); }
  html.dark-skin body #ahl-school-program :is(h2, .cp-event-title, .cp-state-title) { color: var(--ssk-mobile-ink); }
  html.dark-skin body #ahl-school-program :is(.cp-event-time, .cp-description, .cp-location, .cp-state-copy, .cp-updated, .cp-dialog-date) { color: var(--ssk-mobile-muted); border-color: var(--ssk-mobile-line); }
  html.dark-skin body #ahl-school-program .cp-details summary { color: var(--ssk-mobile-link); }
  html.dark-skin body #ahl-school-program :is(.cp-icon-button, .cp-event, .cp-more):hover { background: var(--ssk-mobile-raised); border-color: var(--ssk-mobile-line); }
}