.content-mode-switch {
  display: flex;
  gap: 0.2rem;
  width: min(100%, 30rem);
  margin: 0.25rem auto 0.75rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 0.25rem;
  background: color-mix(in srgb, var(--paper-strong) 92%, transparent);
  scrollbar-width: none;
}
.content-mode-switch::-webkit-scrollbar { display: none; }

.content-mode-switch button {
  display: inline-flex;
  flex: 1 0 auto;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
  min-width: 5.4rem;
  min-height: 2.55rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  color: var(--muted);
  background: transparent;
  font-weight: 800;
  white-space: nowrap;
}

.content-mode-switch button.active { color: white; background: var(--accent-strong); }

.content-mode-switch svg,
.online-search svg,
.hadith-row svg,
.inline-back svg,
.primary-action svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.is-reader .content-mode-switch,
.mode-hadith .advanced-home,
.mode-hadith .simple-home,
.mode-hadith .advanced-bottom-nav,
.mode-hadith .favourites-fab,
.mode-ask .advanced-home,
.mode-ask .simple-home,
.mode-ask .advanced-bottom-nav,
.mode-ask .favourites-fab,
.mode-prayerTimes .advanced-home,
.mode-prayerTimes .simple-home,
.mode-prayerTimes .advanced-bottom-nav,
.mode-prayerTimes .favourites-fab,
.mode-qibla .advanced-home,
.mode-qibla .simple-home,
.mode-qibla .advanced-bottom-nav,
.mode-qibla .favourites-fab,
.mode-tasbih .advanced-home,
.mode-tasbih .simple-home,
.mode-tasbih .advanced-bottom-nav,
.mode-tasbih .favourites-fab,
.mode-calendar .advanced-home,
.mode-calendar .simple-home,
.mode-calendar .advanced-bottom-nav,
.mode-calendar .favourites-fab { display: none; }

.advanced-home[hidden],
.simple-home[hidden] { display: none !important; }

.online-home[hidden], .hadith-detail[hidden], #hadithBrowse[hidden] { display: none; }
.online-home { max-width: 46rem; margin: 0 auto; padding: 0.2rem 0 1.5rem; }

.online-search {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2.7rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--paper-strong);
  box-shadow: var(--shadow);
}

.online-search > svg { justify-self: center; color: var(--accent-strong); }
.online-search input { min-width: 0; min-height: 3rem; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 1rem; }
.online-search button { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border: 0; border-radius: 50%; color: white; background: var(--accent-strong); }
.online-filter-strip { display: flex; gap: 0.45rem; overflow-x: auto; padding: 0.7rem 0; scrollbar-width: none; }

.online-filter {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.45rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 0.7rem;
  color: var(--muted);
  background: var(--paper-strong);
  font-weight: 750;
}

.online-filter small { font-size: 0.68rem; opacity: 0.75; }
.online-filter.active { border-color: var(--accent-strong); color: var(--accent-strong); }
.online-indicator { color: #1a7650; font-size: 0.76rem; font-weight: 800; }
.online-indicator::before { display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.3rem; border-radius: 50%; background: currentColor; content: ''; }
.hadith-list { display: grid; gap: 0.55rem; }

.hadith-row {
  position: relative;
  display: grid;
  gap: 0.2rem;
  width: 100%;
  min-height: 5rem;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  padding: 0.8rem 2.7rem 0.8rem 0.9rem;
  color: var(--ink);
  background: var(--paper-strong);
  text-align: left;
}

.hadith-row strong { font-size: 0.95rem; line-height: 1.35; }
.hadith-row small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.hadith-row > svg { position: absolute; top: 50%; right: 0.85rem; color: var(--accent-strong); transform: translateY(-50%); }
.hadith-reference { color: var(--accent-strong); font-size: 0.76rem; font-weight: 850; }
.inline-back { display: inline-flex; gap: 0.35rem; align-items: center; border: 0; padding: 0.4rem 0; color: var(--accent-strong); background: transparent; font-weight: 800; }
.hadith-detail header { margin: 0.45rem 0 0.9rem; }
.hadith-detail header span { color: var(--accent-strong); font-size: 0.8rem; font-weight: 850; }
.hadith-detail h2 { margin: 0.3rem 0 0; font-size: 1.22rem; line-height: 1.35; }
.hadith-metadata { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-block: 1px solid var(--line); }
.hadith-metadata div { padding: 0.65rem 0.3rem; }
.hadith-metadata dt { color: var(--muted); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; }
.hadith-metadata dd { margin: 0.18rem 0 0; font-size: 0.85rem; }
.hadith-text { padding: 0.45rem 0; }
.source-link { display: inline-flex; margin-top: 0.5rem; color: var(--accent-strong); font-weight: 800; }
/* Ask reads bottom-up like every other chat: the conversation above, the composer pinned beneath
   it. The old layout put a four-row textarea and its filters above the answer, which pushed the
   answer 150px below the fold on a phone -- and with the keyboard open it was off-screen entirely.
   People asked a question, saw nothing happen, and concluded it was broken. It was not; it was
   just below where they could see. */
/* The thread scrolls, not the page, and the composer never leaves the screen. Anchoring the whole
   column to the viewport is what stops the answer being pushed below the fold: on a phone the old
   layout put the answer 519px down and 151px past the bottom, which read as "nothing happened". */
/* Pinned to the viewport rather than sized inside the page. Sizing it in flow meant competing with
   the shell's 100vh floor, its padding and the view's own height, and every correction left either
   a strip of dead space under the composer or a page that could still scroll it out of reach.
   Fixed, the composer is on the bottom edge by construction and the thread takes what is left.
   --ask-top is measured (see fitAssistantHeight) because the header and tabs above are not a
   constant between phone and desktop. */
.mode-ask .assistant-home {
  position: fixed;
  left: 0; right: 0;
  top: var(--ask-top, 10rem);
  /* --ask-bottom is whatever the soft keyboard is covering (see keyboardInset). It is 0 with no
     keyboard open, and on Android, where the keyboard shrinks the layout viewport by itself. */
  bottom: var(--ask-bottom, 0px);
  display: flex;
  flex-direction: column;
  padding: 0 0.75rem env(safe-area-inset-bottom);
}
/* No scroll-behavior: smooth here. The only thing that scrolls this element from script is the
   pin to the newest turn, and smooth turned that one assignment into an animation -- which the
   next word of the answer interrupted, and which reported its own intermediate positions back as
   if the reader had scrolled up. The thread ended up at the top of a long conversation instead of
   at the answer. See pinToLatest() in assistant.js. */
.assistant-result { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 0.15rem; }
/* No gap under the composer: it sits on the bottom edge of the column, which is the bottom of the
   screen. A margin there reads as the bar floating above a strip of nothing. */
.assistant-bar {
  flex: none;
  display: grid; gap: 0.35rem; margin-top: 0.7rem;
  padding: 0.55rem 0.6rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--line); border-radius: 1rem;
  background: var(--paper-strong);
  box-shadow: 0 -10px 24px -18px rgb(0 0 0 / 45%);
}
/* "New" sits in the composer bar, outside the thread entirely: a control that resets the
   conversation should not live inside the thing it resets, where it scrolls away the moment there
   is anything to read. */
.assistant-reset { flex: none; padding: 0.3rem 0.5rem; font-weight: 700; }

/* A citation opens. Seeing "[1] Sahih al-Bukhari 6499" and having to leave to find it is the point
   at which a grounded answer stops being checkable, so the words come with it. */
.assistant-source { display: block; border: 1px solid var(--line); border-left-width: 3px; border-radius: 0.6rem; background: var(--surface); }
.assistant-source summary {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.5rem 0.65rem; cursor: pointer; list-style: none;
}
.assistant-source summary::-webkit-details-marker { display: none; }
.assistant-source summary::after { content: '⌄'; color: var(--muted); font-size: 1rem; line-height: 1; }
.assistant-source[open] summary::after { content: '⌃'; }
.assistant-source-ref { display: grid; gap: 0.1rem; min-width: 0; }
.assistant-source-ref span { color: var(--muted); font-size: calc(0.72rem * var(--font-scale)); }
.assistant-source-ref strong { font-size: calc(0.85rem * var(--font-scale)); }
.assistant-source-body { display: grid; gap: 0.5rem; padding: 0 0.65rem 0.6rem; border-top: 1px solid var(--line); padding-top: 0.55rem; }
.assistant-source-body .verse-arabic { font-size: calc(1.1rem * var(--font-scale)); line-height: 1.95; }
.assistant-source-body .verse-translation { font-size: calc(0.85rem * var(--font-scale)); }
.assistant-source-body .text-button { justify-self: start; font-weight: 800; }
.assistant-bar textarea {
  width: 100%;
  min-height: 2.6rem;
  max-height: 9rem;
  resize: none;                 /* grows to fit what is typed; see autoGrow() in assistant.js */
  border: 0; outline: 0;
  padding: 0.45rem 0.35rem;
  color: var(--ink); background: transparent;
  font: inherit; line-height: 1.5;
}
.assistant-bar-controls { display: flex; align-items: center; gap: 0.5rem; }
.assistant-bar-controls .assistant-hint { flex: 1; margin: 0; text-align: right; }
.primary-action { display: inline-flex; gap: 0.45rem; align-items: center; justify-content: center; min-width: 5.5rem; min-height: 2.5rem; padding: 0 0.9rem; border: 0; border-radius: 0.7rem; color: white; background: var(--accent-strong); font-weight: 850; }
.primary-action:disabled { opacity: 0.55; }
.assistant-note, .assistant-remaining, .assistant-hint { color: var(--muted); font-size: 0.78rem; line-height: 1.45; }
.assistant-bar select {
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  padding: 0.4rem 0.6rem;
  color: var(--ink);
  background: var(--paper);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* The hint is for people with a keyboard; on a touch screen Enter is the on-screen return key and
   the advice would be wrong as well as useless. */
@media (pointer: coarse) { .assistant-bar-controls .assistant-hint { display: none; } }
.assistant-answer { margin-top: 1rem; border-block: 1px solid var(--line); padding: 0.85rem 0; line-height: 1.65; }
.assistant-answer p { margin: 0; }
.assistant-sources { display: grid; gap: 0.45rem; margin-top: 0.75rem; }
/* Sources were anchors; they are <details> now so a citation can be opened and read in place. The
   accent edge stays -- it is how an unverified source is marked. */
.assistant-source { border-left-color: var(--accent-strong); color: var(--ink); }
.assistant-source summary small { color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
.assistant-source--unverified { border-left-color: #b7791f; }
.assistant-source--unverified small { color: #b7791f; font-weight: 700; }
.assistant-thinking { display: flex; gap: 0.32rem; justify-content: center; padding: 2rem; }
.assistant-thinking span { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent-strong); animation: assistant-pulse 0.9s ease-in-out infinite alternate; }
.assistant-thinking span:nth-child(2) { animation-delay: 0.18s; }
.assistant-thinking span:nth-child(3) { animation-delay: 0.36s; }
/* The answer arrives over several seconds, so the wait says which stage it is on rather than
   leaving three dots to stand for everything from "searching" to "writing". */
.assistant-stage { display: flex; align-items: center; justify-content: center; gap: 0.2rem; color: var(--muted); font-size: calc(0.85rem * var(--font-scale)); }
.assistant-stage .assistant-thinking { padding: 1.4rem 0.4rem; }
/* Marks where the next word will land while the model is still writing. */
.assistant-cursor { display: inline-block; width: 0.5rem; height: 1.05em; margin-left: 0.12rem; vertical-align: text-bottom; background: var(--accent-strong); animation: assistant-caret 1s steps(1) infinite; }
@keyframes assistant-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .assistant-cursor { animation: none; opacity: 0.6; }
}
.segment.reference { border-top: 1px solid var(--line); padding-top: 0.8rem; color: var(--muted); font-size: calc(0.78rem * var(--font-scale)); line-height: 1.5; }

/* Prayer Times & Qibla -- computed entirely on-device, no network calls. */
.prayer-home { display: grid; gap: 1rem; }

/* A sky above a quiet foreground keeps the clock legible at noon and at night. */
.prayer-next-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .15rem .8rem;
  align-content: end;
  min-height: clamp(18rem, 38vw, 22rem);
  padding: 1.25rem 1.4rem;
  border: 1px solid rgba(176, 200, 215, .25);
  border-radius: 1.25rem;
  overflow: hidden;
  isolation: isolate;
  color: #f8f4e9;
  background: linear-gradient(160deg, #1c4e73, #071a29);
  text-align: left;
}
.prayer-next-card .sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.prayer-next-card > :not(.sky) {
  position: relative;
  text-shadow: 0 1px 8px rgba(2, 8, 18, .35);
}
.sky-rays path { opacity: .55; animation: sky-ray-light 9s ease-in-out infinite; animation-delay: var(--ray-delay); }
.sky-aura { animation: sky-aura 8s ease-in-out infinite; transform-origin: 0 0; }
.sky-corona { animation: sky-corona 6s ease-in-out infinite; transform-origin: 0 0; }
.sky-stars circle { animation: sky-twinkle 5s ease-in-out infinite; animation-delay: var(--twinkle-delay, 0s); }
.sky-moon-glow { animation: sky-aura 10s ease-in-out infinite; transform-origin: 0 0; }
.sky-full .sky-rays path { animation-duration: 6s; }
.sky-full .sky-aura { animation-duration: 5s; }
.sky-full .sky-corona { animation-duration: 4s; }
.sky-full .sky-haze path { animation: sky-haze 16s ease-in-out infinite alternate; }
@keyframes sky-ray-light {
  0%, 100% { opacity: .25; }
  50% { opacity: .8; }
}
@keyframes sky-aura {
  0%, 100% { opacity: .6; transform: scale(.88); }
  50% { opacity: 1; transform: scale(1.12); }
}
@keyframes sky-corona {
  0%, 100% { opacity: .12; transform: scale(1); }
  50% { opacity: .28; transform: scale(1.22); }
}
@keyframes sky-twinkle {
  0%, 100% { opacity: .22; }
  50% { opacity: .9; }
}
@keyframes sky-haze { to { transform: translateX(4px); opacity: .6; } }
.sky-static *, .sky-static.sky-full * { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .sky * { animation: none !important; }
}
.prayer-next-label { grid-column: 1; font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .72; }
.prayer-next-card strong { grid-column: 1; font-size: 1.85rem; font-weight: 650; line-height: 1.2; }
.prayer-next-time { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.prayer-next-countdown { grid-column: 1 / -1; font-size: .78rem; opacity: .72; }

.prayer-location-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 0.85rem; color: var(--muted); }
.prayer-timezone-note { margin: -0.4rem 0 0; padding: 0.6rem 0.8rem; border-left: 3px solid #b7791f; border-radius: 0.3rem; background: color-mix(in srgb, #b7791f 10%, var(--paper-strong)); color: var(--muted); font-size: 0.76rem; line-height: 1.4; }

.prayer-location-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: var(--paper-strong);
}
.prayer-location-form label { display: grid; gap: 0.3rem; font-size: 0.78rem; color: var(--muted); font-weight: 700; }
.prayer-location-form input { min-height: 2.6rem; padding: 0 0.7rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--paper); color: var(--ink); font: inherit; }
.prayer-location-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; grid-column: 1 / -1; }

.prayer-times-list { display: grid; gap: 0.4rem; }
.prayer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--paper-strong);
}
.prayer-row-label { font-weight: 750; }
.prayer-row-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.prayer-row-sunrise { opacity: 0.75; border-style: dashed; }
.prayer-row-active { border-color: var(--accent-strong); background: color-mix(in srgb, var(--accent-strong) 10%, var(--paper-strong)); }
.prayer-row-active .prayer-row-time { color: var(--accent-strong); font-weight: 800; }

.qibla-card { display: grid; gap: 0.6rem; padding: 1rem; border: 1px solid var(--line); border-radius: 0.7rem; background: var(--paper-strong); }
.qibla-heading { display: flex; align-items: center; justify-content: space-between; }
.qibla-heading span { font-size: 1.2rem; font-weight: 800; color: var(--accent-strong); }
.qibla-note { margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.4; }

.qibla-compass { display: flex; justify-content: center; padding: 0.6rem 0; }
.qibla-compass-ring {
  position: relative;
  width: 9rem;
  height: 9rem;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  /* Rotates the whole ring opposite the device heading so "true north" on the dial always points
     at real north as the phone turns -- the needle drawn inside then only has to point at the
     fixed Qibla bearing relative to that ring. */
  transform: rotate(calc(-1 * var(--device-heading, 0deg)));
  transition: transform 0.15s linear;
}
.qibla-compass-n { position: absolute; top: 0.35rem; left: 50%; color: var(--muted); font-size: 0.72rem; font-weight: 800; transform: translateX(-50%); }
.qibla-needle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.22rem;
  height: 3.6rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-strong), transparent);
  transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(var(--qibla-bearing, 0deg));
}

@keyframes assistant-pulse { to { opacity: 0.25; transform: translateY(-0.25rem); } }

/* Tasbih Counter -- fully offline, no dependency on Prayer Times or Reminders. */
.tasbih-home { display: grid; gap: 1rem; }

.tasbih-preset-tabs { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.1rem 0; scrollbar-width: none; }
.tasbih-preset-tabs::-webkit-scrollbar { display: none; }
.tasbih-preset-tab {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  color: var(--muted);
  background: var(--paper-strong);
  font-weight: 750;
  white-space: nowrap;
}
.tasbih-preset-tab.active { border-color: var(--accent-strong); color: white; background: var(--accent-strong); }

.tasbih-tap-area {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  min-height: min(56vh, 26rem);
  padding: 1.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  background: var(--paper-strong);
  text-align: center;
  /* Removes the ~300ms tap delay some browsers use to disambiguate a tap from the start of a
     double-tap-to-zoom gesture -- dhikr counting needs every tap to register immediately. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.tasbih-tap-area:active { background: color-mix(in srgb, var(--accent-strong) 6%, var(--paper-strong)); }
.tasbih-tap-area.tasbih-target-reached { border-color: var(--accent-strong); background: color-mix(in srgb, var(--accent-strong) 9%, var(--paper-strong)); }

.tasbih-progress-ring { position: relative; width: 11rem; height: 11rem; }
.tasbih-progress-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tasbih-ring-track { fill: none; stroke: var(--line); stroke-width: 8; }
.tasbih-ring-fill {
  fill: none;
  stroke: var(--accent-strong);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s ease;
}
.tasbih-count-display {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  line-height: 1.1;
}
.tasbih-count-display strong { font-size: 2.6rem; }
.tasbih-count-display span { color: var(--muted); font-size: 1rem; }

.tasbih-arabic { margin: 0; font-family: "Traditional Arabic", "Scheherazade New", "Noto Naskh Arabic", serif; font-size: calc(1.6rem * var(--arabic-scale)); line-height: 1.6; }
.tasbih-label { margin: 0; font-size: 1.15rem; font-weight: 800; }
.tasbih-hint { color: var(--muted); }

.tasbih-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.2rem; }
.tasbih-lifetime { margin: 0; color: var(--muted); font-size: 0.8rem; text-align: center; }

.tasbih-preset-field { display: grid; gap: 0.3rem; margin-bottom: 0.9rem; font-size: 0.82rem; color: var(--muted); font-weight: 700; }
.tasbih-preset-field input { min-height: 2.6rem; padding: 0 0.7rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--paper); color: var(--ink); font: inherit; }
.tasbih-preset-form-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.4rem; }
.tasbih-confirm-dialog p { margin: 0 0 1rem; }

@media (min-width: 720px) {
  .hadith-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assistant-home { max-width: 40rem; }
}

/* --- Quran --- */
.quran-search input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  color: var(--ink);
  background: var(--paper-strong);
  font-size: 1rem;
}

.chip-toggle {
  flex: none;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--paper-strong);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.chip-toggle.active {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

.resume-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  margin-bottom: 0.7rem;
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: 0.8rem;
  color: white;
  background: var(--accent-strong);
  text-align: left;
}

.resume-card small { display: block; opacity: 0.85; font-size: 0.76rem; }
.resume-card strong { display: block; margin-top: 0.1rem; font-size: 1rem; }
.resume-card span[aria-hidden] { font-size: 1.4rem; line-height: 1; }

.surah-list {
  display: grid;
  overflow: hidden;
  border-radius: 0.85rem;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}

.surah-row {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.8rem 0.9rem;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease;
}

.surah-row + .surah-row { box-shadow: inset 0 1px 0 var(--line); }
.surah-row:active { background: color-mix(in srgb, var(--accent) 12%, transparent); }

@media (hover: hover) {
  .surah-row:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
}

.surah-number {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-strong);
  font-size: 0.85rem;
  font-weight: 700;
}

.surah-names strong, .surah-names small { display: block; }
.surah-names small { margin-top: 0.12rem; color: var(--muted); font-size: 0.79rem; }

.surah-arabic {
  font-family: "Traditional Arabic", "Scheherazade New", "Noto Naskh Arabic", serif;
  font-size: calc(1.3rem * var(--arabic-scale));
  color: var(--accent-strong);
}

.star-toggle {
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
}

.star-toggle.active { color: #d0a215; }

.surah-header { margin: 0.9rem 0; text-align: center; }
.surah-header h2 { margin: 0; font-size: 1.28rem; }

.surah-header h2 span {
  font-family: "Traditional Arabic", "Scheherazade New", "Noto Naskh Arabic", serif;
  color: var(--accent-strong);
}

.surah-header p { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.86rem; }

.surah-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
  margin-top: 0.75rem;
}

.surah-bismillah {
  margin: 0 0 1.3rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  font-family: "Traditional Arabic", "Scheherazade New", "Noto Naskh Arabic", serif;
  font-size: calc(1.5rem * var(--font-scale) * var(--arabic-scale));
  text-align: center;
}

.ayah-list { display: grid; margin: 0; padding: 0; list-style: none; }

.ayah {
  display: grid;
  gap: 0.5rem;
  padding: 1.1rem 0.2rem;
  border-bottom: 1px solid var(--line);
}

.ayah:last-child { border-bottom: 0; }

.ayah.is-favourite {
  margin: 0 -0.5rem;
  padding-inline: 0.7rem;
  border-radius: 0.6rem;
  background: color-mix(in srgb, #d0a215 9%, transparent);
}

.ayah.has-sajdah {
  margin: 0 -0.5rem;
  padding-inline: 0.7rem;
  border-left: 3px solid var(--accent-strong);
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.ayah-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.ayah-number { color: var(--accent-strong); font-size: 0.76rem; font-weight: 800; }

.sajdah-mark {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--accent-strong);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
}

.ayah-arabic {
  margin: 0;
  font-family: "Traditional Arabic", "Scheherazade New", "Noto Naskh Arabic", serif;
  font-size: calc(1.6rem * var(--font-scale) * var(--arabic-scale));
  line-height: 2.15;
  text-align: right;
}

.ayah-english {
  margin: 0;
  color: color-mix(in srgb, var(--ink) 88%, var(--muted));
  font-size: calc(1.02rem * var(--font-scale));
  line-height: 1.6;
}

.ayah-actions { display: flex; gap: 0.4rem; }

.ayah-action {
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 0.76rem;
  font-weight: 600;
}

.ayah-action.active { border-color: #d0a215; color: #d0a215; }

.ayah-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.ayah-pager span { color: var(--muted); font-size: 0.85rem; }

.ayah-pager button {
  padding: 0.55rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--accent-strong);
  background: var(--paper-strong);
  font-weight: 700;
}

.ayah-pager button:disabled { opacity: 0.4; }

/* Tajweed colouring, following the widely used colour-coded mushaf convention: reds and oranges for
   the madd (elongation) family graded by length, green for ghunnah/nasalisation, blue for idghaam
   (merging), teal for ikhfa, and grey for letters written but not pronounced. */
.tj-madda_necessary { color: #e2211c; }
.tj-madda_obligatory { color: #e2211c; }
.tj-madda_permissible { color: #cc7a00; }
.tj-madda_normal { color: #e08a1e; }
.tj-ghunnah { color: #1f8a3c; }
.tj-idgham_ghunnah { color: #1f8a3c; }
.tj-ikhafa { color: #1f7a8a; }
.tj-ikhafa_shafawi { color: #1f7a8a; }
.tj-idgham_shafawi { color: #2a63b8; }
.tj-idgham_wo_ghunnah { color: #2a63b8; }
.tj-idgham_mutajanisayn { color: #2a63b8; }
.tj-idgham_mutaqaribayn { color: #2a63b8; }
.tj-iqlab { color: #7a3fb8; }
.tj-qalaqah { color: #b8365f; }
.tj-ham_wasl { color: #9a9384; }
.tj-laam_shamsiyah { color: #9a9384; }
.tj-slnt { color: #9a9384; }

:root.dark .tj-madda_necessary,
:root.dark .tj-madda_obligatory { color: #ff6b66; }
:root.dark .tj-madda_permissible { color: #f0a23c; }
:root.dark .tj-madda_normal { color: #f5b45c; }
:root.dark .tj-ghunnah,
:root.dark .tj-idgham_ghunnah { color: #4fce74; }
:root.dark .tj-ikhafa,
:root.dark .tj-ikhafa_shafawi { color: #4fc2ce; }
:root.dark .tj-idgham_shafawi,
:root.dark .tj-idgham_wo_ghunnah,
:root.dark .tj-idgham_mutajanisayn,
:root.dark .tj-idgham_mutaqaribayn { color: #6f9dea; }
:root.dark .tj-iqlab { color: #b58bea; }
:root.dark .tj-qalaqah { color: #ef7099; }
:root.dark .tj-ham_wasl,
:root.dark .tj-laam_shamsiyah,
:root.dark .tj-slnt { color: #7e786c; }

.saved-block { margin-bottom: 0.9rem; }

.saved-block h3 {
  margin: 0 0 0.45rem;
  padding: 0 0.2rem;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.saved-ayah-list {
  display: grid;
  overflow: hidden;
  border-radius: 0.85rem;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}

.saved-ayah {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0.9rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.saved-ayah + .saved-ayah { box-shadow: inset 0 1px 0 var(--line); }
.saved-ayah:active { background: color-mix(in srgb, var(--accent) 12%, transparent); }

@media (hover: hover) {
  .saved-ayah:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
}

.saved-ayah-ref {
  color: var(--accent-strong);
  font-size: 0.76rem;
  font-weight: 800;
}

.saved-ayah-text {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.surah-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.surah-nav button {
  display: grid;
  gap: 0.1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: var(--paper-strong);
  color: var(--ink);
  text-align: left;
}

.surah-nav button:last-child { text-align: right; }
.surah-nav small { color: var(--muted); font-size: 0.72rem; }
.surah-nav strong { color: var(--accent-strong); font-size: 0.94rem; }

.mode-quran .advanced-home,
.mode-quran .simple-home,
.mode-quran .advanced-bottom-nav,
.mode-quran .favourites-fab {
  display: none;
}

/* Sub-navigation for the worship tools. Sits at the bottom of the viewport rather than under the
   top bar, so switching between Times, Qibla and Tasbih is a thumb movement while the content keeps
   the full height above it. */
.worship-subnav {
  position: fixed;
  left: 50%;
  bottom: max(0.7rem, env(safe-area-inset-bottom));
  z-index: 20;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.25rem;
  width: min(100% - 1.5rem, 22rem);
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper-strong) 92%, transparent);
  box-shadow: var(--shadow);
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
}

.worship-subnav[hidden] {
  display: none;
}

.worship-subnav button {
  display: grid;
  place-items: center;
  gap: 0.1rem;
  padding: 0.45rem 0.3rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.worship-subnav button[hidden] {
  display: none;
}

.worship-subnav button svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.worship-subnav button.active {
  background: var(--accent-strong);
  color: #fff;
}

/* Content clears the floating bar in the modes that show it. */
.mode-prayerTimes main,
.mode-qibla main,
.mode-tasbih main,
.mode-calendar main {
  padding-bottom: 5rem;
}


/* Ayah-end numeral drawn as the ringed medallion a printed mushaf uses, rather than a bare digit
   sitting in the line of text. */
.ayah-end {
  display: inline-grid;
  place-items: center;
  width: 1.75em;
  height: 1.75em;
  margin: 0 0.2em;
  border: 1.5px solid var(--accent-strong);
  border-radius: 50%;
  color: var(--accent-strong);
  font-size: 0.62em;
  line-height: 1;
  vertical-align: middle;
}

/* Surahs / Juz -- the two ways through the mushaf, sitting above the list they both fill. */
.quran-browse-modes {
  display: flex;
  gap: 0.5rem;
  margin: 0.6rem 0;
}

.quran-browse-modes .chip-toggle { flex: 1; }

/* A juz row has no Arabic name and no star, so its grid is the surah row's without those columns. */
.juz-row { grid-template-columns: 2.2rem 1fr auto; }
.juz-play { color: var(--accent-strong); font-size: 0.95rem; }

/* Which juz is open, above the surah it starts in, with a step either side. */
.juz-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
  padding: 0.45rem 0.6rem;
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.juz-strip-label { text-align: center; }
.juz-strip-label strong { display: block; color: var(--accent-strong); font-size: 0.92rem; }
.juz-strip-label small { display: block; margin-top: 0.05rem; color: var(--muted); font-size: 0.74rem; }

/* Quran list filter row, matching the dua list's count + Clear arrangement. */
.quran-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.quran-filter-row .result-count {
  margin: 0;
}

.quran-filter-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quran-filter-actions .text-button[hidden] {
  display: none;
}

.surah-names mark {
  padding: 0 0.1em;
  border-radius: 0.2em;
  background: color-mix(in srgb, var(--accent) 34%, transparent);
  color: inherit;
}

/* Previous/next surah buttons carry the Arabic name alongside the transliteration. */
.surah-nav-arabic {
  font-family: "Traditional Arabic", "Scheherazade New", "Noto Naskh Arabic", serif;
  font-size: 0.95rem;
  color: var(--muted);
}

.surah-nav button:last-child .surah-nav-arabic {
  display: block;
  text-align: right;
}

/* The phrase strip hid its scrollbar entirely, so with more phrases than fit there was no sign the
   rest existed and no way to drag to them with a mouse. A slim scrollbar is shown on pointer devices
   and a fade on the trailing edge hints at more on touch, where dragging already works. */
.tasbih-preset-tabs {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent-strong) 45%, transparent) transparent;
  mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent 100%);
}

.tasbih-preset-tabs::-webkit-scrollbar {
  display: block;
  height: 5px;
}

.tasbih-preset-tabs::-webkit-scrollbar-track {
  background: transparent;
}

.tasbih-preset-tabs::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-strong) 45%, transparent);
}

/* Once the strip is scrolled to the end the fade is misleading, so it only applies while there is
   more to reach. Set by tasbih.js. */
.tasbih-preset-tabs.at-end {
  mask-image: none;
  -webkit-mask-image: none;
}

.tasbih-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 0 0 0.9rem;
}

/* --- Recitation player ---------------------------------------------------- */

.ayah.is-playing {
  margin: 0 -0.5rem;
  padding-inline: 0.7rem;
  border-radius: 0.6rem;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: inset 3px 0 0 var(--accent-strong);
}

/* The player sits above the utility strip rather than replacing it, so the reader's controls stay
   where they were learned. The strip itself is lifted while the player is on screen. */
.quran-player {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* Sits clear of the utility strip. The strip's height depends on how the eight buttons lay out
     at the current width and text size, so it is measured and published as --reader-controls-height
     rather than guessed at -- a guess was 32px short on a 375px screen. */
  bottom: calc(max(0.7rem, env(safe-area-inset-bottom)) + var(--reader-controls-height, 3.6rem) + 0.5rem);
  z-index: 21;
  display: grid;
  gap: 0.4rem;
  width: min(100% - 1rem, 28rem);
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--paper-strong) 96%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.quran-player-main {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.quran-player-button {
  flex: 0 0 auto;
  min-width: 2.1rem;
  padding: 0.35rem 0.4rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1;
  cursor: pointer;
}

.quran-player-button:hover { background: var(--chip-bg); }
.quran-player-button.active { color: var(--accent-strong); font-weight: 700; }

.quran-player-toggle {
  background: var(--accent-strong);
  color: #fff;
  font-size: 0.9rem;
}

.quran-player-toggle:hover { background: var(--accent-strong); filter: brightness(1.08); }

.quran-player-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.quran-player-reciter select {
  width: 100%;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 0.45rem;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.74rem;
}

body.has-player .reader-controls {
  bottom: max(0.7rem, env(safe-area-inset-bottom));
}

/* --- Word by word --------------------------------------------------------- */

.ayah-words {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-start;
}

.qword {
  display: grid;
  gap: 0.1rem;
  justify-items: center;
  padding: 0.3rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: center;
}

.qword:hover { background: var(--chip-bg); }

.qword.is-active {
  border-color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.qword-ar {
  font-family: var(--arabic-font, inherit);
  font-size: calc(1.35rem * var(--font-scale, 1));
  line-height: 1.9;
}

.qword-en {
  max-width: 9rem;
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.25;
}

/* Shown when a location attempt fails. A toast disappears before anyone can act on it, and a
   browser-level block cannot be undone from inside the page -- so the way out has to stay put. */
.prayer-location-hint {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
  text-wrap: pretty;
}

/* Thematic verse search. Offered under the surah list rather than replacing it: searching the list
   for a surah name and searching the whole mushaf for a theme are different questions, and the
   second one costs a network request that typing a surah name should not trigger. */
.quran-verse-results { display: grid; gap: 0.6rem; }
.verse-search-prompt {
  display: flex; align-items: center; gap: 0.55rem; width: 100%;
  padding: 0.7rem 0.9rem; border: 1px dashed var(--line); border-radius: 0.8rem;
  background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.verse-search-prompt:hover { border-color: var(--accent-strong); border-style: solid; }
.verse-search-prompt strong { color: var(--accent-strong); }
.verse-search-state { display: flex; align-items: center; justify-content: center; gap: 0.3rem; color: var(--muted); }
.verse-search-state .assistant-thinking { padding: 1rem 0.4rem; }
.verse-search-count { margin: 0.2rem 0; color: var(--muted); font-size: calc(0.82rem * var(--font-scale)); }
.verse-result {
  display: grid; gap: 0.45rem; padding: 0.85rem 0.95rem;
  border: 1px solid var(--line); border-radius: 0.9rem; background: var(--surface); cursor: pointer;
}
.verse-result:hover { border-color: var(--accent-strong); }
.verse-result header { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.verse-result header small { color: var(--muted); }
.verse-arabic { margin: 0; font-size: calc(1.25rem * var(--font-scale)); line-height: 2; text-align: right; }
.verse-translation { margin: 0; color: var(--ink); font-size: calc(0.92rem * var(--font-scale)); line-height: 1.6; }
.verse-search-note { margin: 0.3rem 0 0; color: var(--muted); font-size: calc(0.75rem * var(--font-scale)); line-height: 1.5; }

/* Ask as a conversation: each turn keeps its own question, answer and sources, so a citation is
   always attached to the answer it belongs to rather than to whatever was asked most recently. */
.assistant-turn { display: grid; gap: 0.6rem; padding: 0.9rem 0; }
.assistant-turn + .assistant-turn { border-top: 1px solid var(--line); }
.assistant-question {
  margin: 0; padding: 0.55rem 0.8rem; border-radius: 0.8rem 0.8rem 0.8rem 0.2rem;
  background: var(--surface-subtle, var(--surface)); border: 1px solid var(--line);
  color: var(--ink); font-weight: 600; font-size: calc(0.92rem * var(--font-scale));
}

/* In Ask the chat column already sizes itself to the screen, so the shell's 100vh floor -- on top
   of its own padding -- is pure overflow: it is what leaves the page scrollable and lets the
   composer scroll out of reach. Only this mode opts out; every other view still wants it. */
.app-shell.mode-ask { min-height: 0; }

/* Islamic calendar: today, the next date that matters, and the year ahead. */
.calendar-home { display: grid; gap: 0.75rem; padding-bottom: 5.5rem; }
.calendar-home[hidden] { display: none; }
.calendar-today {
  display: grid;
  gap: 0.15rem;
  justify-items: center;
  padding: 1.4rem 1rem;
  border-radius: 0.9rem;
  color: white;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  text-align: center;
}
.calendar-today strong { font-size: 1.55rem; line-height: 1.2; }
.calendar-today span:last-child { font-size: 0.85rem; opacity: 0.9; }
.calendar-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.calendar-next {
  display: grid;
  gap: 0.1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.85rem;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}
.calendar-next .calendar-label { color: var(--muted); opacity: 1; }
.calendar-next strong { font-size: 1.1rem; color: var(--accent-strong); }
.calendar-next span:last-child { color: var(--muted); font-size: 0.85rem; }
.calendar-next[hidden], .calendar-today[hidden], .calendar-list[hidden],
.calendar-heading[hidden], .calendar-caveat[hidden] { display: none; }
.calendar-heading { margin: 0.4rem 0 0; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.calendar-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border-radius: 0.85rem;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}
.calendar-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.75rem 1rem; }
.calendar-row + .calendar-row { box-shadow: inset 0 1px 0 var(--line); }
.calendar-row.is-today { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.calendar-row span { display: grid; gap: 0.1rem; min-width: 0; }
.calendar-row small { color: var(--muted); font-size: 0.78rem; }
.calendar-row-when { text-align: right; flex: none; }
.calendar-caveat { margin: 0; color: var(--muted); font-size: 0.75rem; line-height: 1.4; }
/* Which convention the dates follow -- chosen from the prayer location, or set by hand. */
.calendar-settings { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; margin: 0; font-size: 0.82rem; color: var(--muted); }
.calendar-settings[hidden] { display: none; }
.calendar-settings select { min-height: 2.4rem; max-width: 100%; padding: 0.35rem 0.6rem; border: 1px solid var(--line); border-radius: 0.6rem; background: var(--paper-strong); color: var(--ink); font: inherit; }