/* Floating glass navigation. A solid surface is the default; blur is progressive enhancement. */
html[data-edition] .bottom-nav {
  --nav-glass: color-mix(in srgb, var(--bg2) 78%, transparent);
  --nav-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  left: max(12px, env(safe-area-inset-left, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: var(--nav-bottom);
  width: auto;
  max-width: 720px;
  margin-inline: auto;
  align-items: stretch;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--bg2);
  box-shadow: 0 8px 32px rgba(12, 24, 43, .13), inset 0 1px 0 rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  isolation: isolate;
}
html:not([data-night-reading='on']) body:not(.quran-reading) .bottom-nav {
  background: var(--bg2);
  border-color: var(--border);
}
html[data-edition] .bottom-nav button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 56px;
  max-width: none;
  padding: 7px 2px 6px;
  gap: 4px;
  border-radius: 19px;
  opacity: 1;
  color: var(--muted);
}
html:not([data-night-reading='on']) .bottom-nav button.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}
html[data-edition] .bottom-nav button.active::after { display: none; }
html[data-edition] .bottom-nav .nav-icon { width: 24px; height: 24px; }
html[data-edition] .bottom-nav .nav-icon svg { width: 23px; height: 23px; stroke-width: 1.75; }
html[data-edition] .bottom-nav .nav-label {
  max-width: 100%;
  font-size: .67rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
html[data-edition] .bottom-nav button:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
@supports (background: color-mix(in srgb, white, transparent)) and ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-edition] .bottom-nav,
  html:not([data-night-reading='on']) body:not(.quran-reading) .bottom-nav {
    background: var(--nav-glass);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    backdrop-filter: blur(24px) saturate(145%);
  }
}
/* Floating insets must also be cleared while the Quran or dhikr reader is open. */
html[data-edition] .bottom-nav.nav-hidden,
html body.quran-reading .bottom-nav,
html body.adhkar-session .bottom-nav {
  transform: translate3d(0, calc(100% + var(--nav-bottom) + 16px), 0);
  -webkit-transform: translate3d(0, calc(100% + var(--nav-bottom) + 16px), 0);
  pointer-events: none;
  visibility: hidden;
}
html { scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
html body:not(.quran-reading):not(.adhkar-session):not(.adhan-landing) main {
  padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) {
  html[data-edition] .bottom-nav { left: 24px; right: 24px; padding: 6px; }
  html[data-edition] .bottom-nav button { min-height: 58px; }
  html[data-edition] .bottom-nav .nav-label { font-size: .76rem; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html[data-edition] .bottom-nav,
  html:not([data-night-reading='on']) body:not(.quran-reading) .bottom-nav {
    background: var(--bg2);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border-color: var(--fg);
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-edition] .bottom-nav, html[data-edition] .bottom-nav button, html[data-edition] .bottom-nav .nav-icon { transition: none; }
  html[data-edition] .bottom-nav button:active { transform: none; }
}
@media (forced-colors: active) {
  html[data-edition] .bottom-nav { border: 1px solid CanvasText; }
  html[data-edition] .bottom-nav button.active { outline: 2px solid Highlight; outline-offset: -3px; }
}

/* Prayer diagnostics belong in Settings, not between the city and today's prayers. */
#settings .prayer-accuracy { margin: 16px 0 0; text-align: start; }
#settings .prayer-accuracy summary { cursor: pointer; color: var(--accent); font-weight: 700; padding-block: 4px; }
#settings .prayer-accuracy__hint { margin: 8px 0 12px; color: var(--muted); }
#settings .prayer-accuracy__grid { margin: 0; display: grid; gap: 0; }
#settings .prayer-accuracy__grid > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--border); }
#settings .prayer-accuracy__grid dt { color: var(--muted); }
#settings .prayer-accuracy__grid dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; text-align: end; unicode-bidi: isolate; }
#settings #btnRefreshPrayerAccuracy { width: 100%; margin-top: 16px; min-height: 44px; }
@media (max-width: 359px) {
  #settings .prayer-accuracy__grid > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  #settings .prayer-accuracy__grid dd { text-align: start; }
}

/* Help and feedback, with an explicitly local report composer. */
#support { text-align: start; }
.support-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; }
.support-header h2 { margin: 0; color: var(--fg); font-size: clamp(1.2rem, 4.7vw, 1.55rem); }
.support-header .btn { min-height: 44px; font-size: .85rem; }
.support-content { display: grid; gap: 20px; }
.support-intro { display: flex; align-items: flex-start; gap: 14px; }
.support-intro__icon { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 16px; background: var(--hero-bg, var(--bg2)); color: var(--accent); }
.support-intro__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.support-intro h3, .support-report h3, .support-contact h3 { margin: 0 0 6px; color: var(--fg); font-size: 1.1rem; }
.support-intro p, .support-note { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.85; }
.support-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.support-shortcuts button { padding: 16px; min-height: 80px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg2); color: var(--fg); text-align: start; font: inherit; cursor: pointer; }
.support-shortcuts strong, .support-shortcuts span { display: block; }
.support-shortcuts strong { font-size: .91rem; margin-bottom: 6px; }
.support-shortcuts span { color: var(--muted); font-size: .77rem; line-height: 1.6; }
#support .pager-card { margin: 0; padding: 22px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg2); box-shadow: none; }
.support-form { display: grid; gap: 16px; margin-top: 20px; }
.support-field { display: grid; gap: 8px; min-width: 0; }
.support-field label { font-weight: 600; font-size: .9rem; color: var(--fg); }
.support-field input, .support-field textarea, .support-field select {
  display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px;
  padding: 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg); color: var(--fg); font: inherit; font-size: 1rem; line-height: 1.6;
  scroll-margin-top: calc(84px + env(safe-area-inset-top, 0px));
  scroll-margin-bottom: calc(124px + env(safe-area-inset-bottom, 0px));
}
.support-field textarea { resize: vertical; }
.support-field input::placeholder, .support-field textarea::placeholder { color: var(--muted); opacity: .9; }
#support :is(button, a, input, select, textarea):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
#support .support-copy { min-height: 48px; width: 100%; font-size: 1rem; }
.support-status { margin: 0; color: var(--accent); font-size: .87rem; line-height: 1.8; }
.support-status:empty { display: none; }
#supportReportPreview[hidden], #supportLanguageNote[hidden] { display: none; }
.support-contact { display: grid; gap: 16px; }
#support .support-contact .btn { width: fit-content; min-height: 44px; text-decoration: none; font-size: .9rem; }
#supportLanguageNote { padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; }
@media (max-width: 389px) {
  #support .pager-card { padding: 16px; }
  .support-shortcuts { grid-template-columns: minmax(0, 1fr); }
}