/* The night theme (loaded last). The app is dark from Maghrib to sunrise where the person is, or as chosen in
   Settings > Appearance; app.js sets <html data-theme="night">. The older stylesheets write their colours by hand,
   so the text is reset to the night's colours as a whole, then the muted and accent colours are given back. */
html[data-theme=night]{color-scheme:dark;--n-bg:#15191c;--n-surface:#20262a;--n-surface-2:#2a3136;--n-border:#3e484f;--n-text:#f1f3f2;--n-muted:#bcc4c6;--n-faint:#aab5b8;--n-accent:#a8c6b3;--n-button:#356c50;--paper:#15191c;--border:#3e484f}
html[data-theme=night] body{background:var(--n-bg)}
html[data-theme=night] body,html[data-theme=night] body *:not(.hero *):not(.appearance-preview):not(.appearance-preview *):not(.prayer-name *):not(.button.primary):not(.button.primary *):not(.toast *){color:var(--n-text)!important}
html[data-theme=night] body *:not(.hero):not(.hero *){border-color:var(--n-border)!important}
html[data-theme=night] :is(.eyebrow,.privacy-note,.modal-copy,small,#dateLine,.page-heading p,.times-footnote,.section-title span,.offline-badge,.name-card-count,.name-meaning,.name-item-text span,.name-number,.reminder-row-name span,.reminder-row-summary,.reminder-hint,.reminder-option-label,.dhikr-meaning,.dhikr-caption,.dhikr-tap span,.calendar-weekday,.calendar-table th,.field small,.toggle-row small,.tool-card>span:not(.tool-icon),.compass-note,.qibla-card>p,.qibla-distance,.qibla-letter,.city-result small,.health-item small,.site-footer,.site-footer p,.link-row small,.prayer-time-card .period,.mobile-nav button,.nav-item,.sidebar-bottom *,.dhikr-target,.names-progress p,.test-steps p,.companion-feature p,.help-section>p,.help-section details p){color:var(--n-muted)!important}
html[data-theme=night] :is(a,.text-link,.month-link,.reset-link,.dhikr-arabic,.name-arabic,.name-item-arabic,.tasbih-arabic,.dua-card>p[lang=ar],.prayer-bell.on,.reminder-row-bell,.prayer-icon,.link-row>svg:first-child,.tool-icon,.card-badge,.name-today,.dhikr-tap strong,.dhikr-option.add,.dhikr-picker-chevron,.dhikr-rounds,.qibla-letter.north,.qibla-guidance,.mobile-nav button.active,.nav-item.active,.help-section summary,.settings-more summary,.reminder-help summary,.dhikr-option-check,.dhikr-option-arabic){color:var(--n-accent)!important}
html[data-theme=night] :is(.prayer-bell:not(.on),.name-check:not([aria-pressed=true]),.reminder-row-chevron,.link-row>svg:last-child,#prayerCards .passed .prayer-hour,#prayerCards .passed .prayer-name,#prayerCards .sunrise-card .prayer-name,#prayerCards .sunrise-card .prayer-hour){color:var(--n-faint)!important}
html[data-theme=night] ::placeholder{color:var(--n-faint)!important}
html[data-theme=night] .brand-icon{content:url(./brand-mark-night.svg)}

/* Surfaces */
html[data-theme=night] :is(.topbar,.sidebar,.mobile-nav){background:var(--n-bg)!important}
html[data-theme=night] :is(.prayer-section,.name-card,.tool-card,.help-section,.settings-group,.reminder-master,.reminder-list,.dhikr-counter,.dhikr-picker-toggle,.dhikr-picker-list,.dhikr-custom,.practice-card,.name-item,.qibla-card,.table-scroll,.dua-card,.city-result,.sound-bar,.hijri-chip,.location-button,.icon-button,.name-check,.travel-current,.info-box,.health-row,.test-steps>div>span,.calendar-table th,.calendar-table td,.preset-cities button,.answer-buttons .button){background:var(--n-surface)!important}
html[data-theme=night] :is(input,select,textarea,.city-search){background:var(--n-surface-2)!important;color:var(--n-text)!important}
html[data-theme=night] :is(.segmented,.dhikr-modes){background:var(--n-surface-2)!important}
html[data-theme=night] .segmented button.selected{background:var(--n-surface)!important;box-shadow:none}
html[data-theme=night] :is(.reminder-panel,.reminder-item.open .reminder-row,.dhikr-option[aria-pressed=true],.name-memorise[aria-pressed=true],.calendar-table tr.current td,.calendar-table tr.current th,.chosen,#prayerCards .card-badge){background:var(--n-surface-2)!important}
html[data-theme=night] #prayerCards .prayer-time-card{background:var(--n-surface)!important}
html[data-theme=night] #prayerCards .next{background:#2b3b34!important}
html[data-theme=night] #prayerCards .next :is(.prayer-name,.prayer-hour){color:#fff!important}
html[data-theme=night] :is(.link-row:hover,.dhikr-option:hover,.prayer-bell:hover,.reminder-row:hover,.nav-item:hover,.tool-card:hover){background:var(--n-surface-2)!important}
html[data-theme=night] .nav-item.active,html[data-theme=night] .mobile-nav button.active svg{background:#2b3b34!important}
html[data-theme=night] :is(.notice,.reminders-off){background:#2a2414!important;border-color:#5b4b22!important}
html[data-theme=night] :is(.notice,.reminders-off) *,html[data-theme=night] :is(.notice,.reminders-off){color:#ead7a2!important}
html[data-theme=night] .button.primary{background:var(--n-button)!important}
html[data-theme=night] .button.primary:hover{background:#468a68!important}
html[data-theme=night] .listen-button.playing,html[data-theme=night] .name-check[aria-pressed=true]{background:var(--n-button)!important}
html[data-theme=night] .switch:before{background:#536067!important}
html[data-theme=night] .switch[aria-checked=true]:before{background:var(--n-button)!important}
html[data-theme=night] .dhikr-tap{background:#262e30!important;box-shadow:inset 0 0 0 1px var(--n-border),0 8px 26px #0006!important}
html[data-theme=night] .dhikr-tap.complete{background:#2b3b34!important}
html[data-theme=night] .dhikr-ring circle{stroke:var(--n-border)}
html[data-theme=night] .dhikr-ring circle+circle{stroke:var(--n-accent)}
html[data-theme=night] .names-bar{background:var(--n-border)}
html[data-theme=night] .names-bar span{background:var(--n-accent)}
html[data-theme=night] .name-card::after{border-color:#343e42!important}
html[data-theme=night] .qibla-dial{background:#2a3136!important;box-shadow:0 6px 22px #0006,inset 0 0 0 10px #20262a!important}
html[data-theme=night] .qibla-tick-minor{stroke:#365246}
html[data-theme=night] .qibla-tick-major{stroke:#7fa98a}
html[data-theme=night] .qibla-needle-head{fill:var(--n-accent)}
html[data-theme=night] .qibla-needle-tail{stroke:#4c6b5c}
html[data-theme=night] .qibla-kaaba rect:first-child{fill:#05080a}

@media(forced-colors:active){html[data-theme=night] body *{color:CanvasText!important}}