/* ---------------------------------------------------------------
   Prayer Times — palette

   Light is the base. Dark applies either because the system asks for it
   (and the user has not forced light), or because the user picked dark.
   Layout uses logical properties throughout so the Arabic RTL mode needs
   no separate rules.
   --------------------------------------------------------------- */
:root {
  --bg:        #f4f6f4;
  --card:      #ffffff;
  --ink:       #16201b;
  --ink-soft:  #5c6b62;
  --ink-faint: #8b9a91;
  --line:      #e2e8e3;
  --accent:    #0f7a5a;
  --accent-ink:#ffffff;
  --accent-bg: #e8f4ef;
  --shadow:    0 1px 2px rgba(16, 32, 24, .06), 0 6px 20px rgba(16, 32, 24, .05);
  --radius:    14px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #101512;
    --card:      #182019;
    --ink:       #e8efea;
    --ink-soft:  #9fb0a6;
    --ink-faint: #71837a;
    --line:      #26312a;
    --accent:    #4ec39a;
    --accent-ink:#08100c;
    --accent-bg: #1c2b24;
    --shadow:    0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
  }
}

:root[data-theme="dark"] {
  --bg:        #101512;
  --card:      #182019;
  --ink:       #e8efea;
  --ink-soft:  #9fb0a6;
  --ink-faint: #71837a;
  --line:      #26312a;
  --accent:    #4ec39a;
  --accent-ink:#08100c;
  --accent-bg: #1c2b24;
  --shadow:    0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  /* safe-area insets keep content clear of notches and home indicators */
  padding:
    calc(1rem + env(safe-area-inset-top))
    calc(0.9rem + env(safe-area-inset-right))
    calc(2.5rem + env(safe-area-inset-bottom))
    calc(0.9rem + env(safe-area-inset-left));
  background: var(--bg);
  color: var(--ink);
  /* 16px minimum keeps iOS Safari from zooming when an input gains focus */
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

:root[dir="rtl"] body {
  font-family: "Segoe UI", system-ui, -apple-system, "Noto Naskh Arabic", Tahoma, sans-serif;
}

.app {
  max-width: 34rem;
  margin: 0 auto;
  display: grid;
  gap: .8rem;
}

/* Grid items default to min-width:auto, which lets the wide month table
   stretch the whole column past the viewport. Pinning it to 0 keeps the
   cards inside the screen and lets .table-wrap scroll sideways instead. */
.app > * { min-width: 0; }

@media (min-width: 30rem) {
  body { padding: 1.5rem 1rem 3rem; }
  .app { gap: 1rem; }
}

/* pointer-based hover effects only — avoids sticky :hover on touch */
@media (hover: none) {
  .btn-icon:hover, .btn-line:hover { color: var(--ink-soft); border-color: var(--line); }
}

h2 { font-size: 1rem; font-weight: 600; margin: 0; letter-spacing: .01em; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:where(button, select, input, summary, a):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

svg { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; fill: none; }
svg circle[fill]:not([fill="none"]), svg path[fill]:not([fill="none"]) { fill: currentColor; }

/* ---------------------------------------------------------------
   header, search, saved places
   --------------------------------------------------------------- */
.head { display: grid; gap: .75rem; }

.head-row { display: flex; align-items: flex-start; gap: .5rem; }

.place { flex: 1; min-width: 0; }

.place-name {
  margin: 0;
  font-size: clamp(1.3rem, 5.5vw, 1.5rem);
  font-weight: 650;
  letter-spacing: -.02em;
  overflow-wrap: break-word;
}

.place-sub {
  margin: .1rem 0 0;
  font-size: .8125rem;
  color: var(--ink-faint);
}

.btn-icon {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--card);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.btn-icon:hover { color: var(--accent); border-color: var(--accent); }
.btn-icon svg { width: 20px; height: 20px; }
.btn-icon[aria-busy="true"] { opacity: .5; pointer-events: none; }
.btn-icon.on { color: var(--accent); border-color: var(--accent); }
.btn-icon.on svg path { fill: currentColor; }

.search { position: relative; }

.search-icon {
  position: absolute;
  inset-inline-start: .875rem;
  top: 50%;
  width: 18px; height: 18px;
  margin-top: -9px;
  color: var(--ink-faint);
  pointer-events: none;
}

#cityInput {
  width: 100%;
  height: 46px;
  padding-block: 0;
  padding-inline: 2.6rem .875rem;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: var(--shadow);
}
#cityInput::placeholder { color: var(--ink-faint); }
#cityInput:focus { border-color: var(--accent); }

.results {
  position: absolute;
  z-index: 20;
  top: calc(100% + .35rem);
  inset-inline: 0;
  margin: 0; padding: .3rem;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: var(--shadow);
  max-height: min(16rem, 45dvh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.results li {
  min-height: 44px;
  padding: .55rem .65rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: .9375rem;
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
}
.results li[aria-selected="true"] { background: var(--accent-bg); }
.results li .r-sub { color: var(--ink-faint); font-size: .8125rem; }
.results li.empty { cursor: default; color: var(--ink-faint); }

/* saved places */
.chips {
  display: flex;
  gap: .4rem;
  margin: 0; padding: 0 0 .15rem;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }

.chips li {
  display: flex;
  align-items: center;
  flex: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.chips li.on { border-color: var(--accent); }
.chips li.on .chip { color: var(--accent); font-weight: 600; }

.chip, .chip-x {
  min-height: 36px;
  padding: 0 .3rem 0 .7rem;
  font: inherit;
  font-size: .8125rem;
  color: var(--ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.chip-x {
  padding: 0 .6rem 0 .3rem;
  color: var(--ink-faint);
  font-size: 1.05rem;
  line-height: 1;
}
.chip-x:hover { color: var(--ink); }

.notice {
  margin: 0;
  padding: .6rem .75rem;
  font-size: .8125rem;
  color: var(--ink-soft);
  background: var(--accent-bg);
  border-radius: 9px;
}

/* ---------------------------------------------------------------
   cards
   --------------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .9rem;
}

@media (min-width: 30rem) {
  .card { padding: 1.1rem; }
}

.card-head {
  display: flex; align-items: baseline;
  justify-content: space-between; gap: 1rem;
  margin-bottom: .35rem;
}

.dates { text-align: end; margin: 0; }
.dates p { margin: 0; font-size: .8125rem; color: var(--ink-soft); }
.dates .hijri { color: var(--ink-faint); }
p.dates { font-size: .8125rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------
   next prayer: ring + countdown
   --------------------------------------------------------------- */
.next {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
  text-align: center;
  padding: 1.2rem .9rem 1.3rem;
}

.ring-wrap {
  position: relative;
  width: 156px; height: 156px;
  margin: 0 auto;
}

.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg, .ring-fg { fill: none; stroke-width: 5; }
.ring-bg { stroke: color-mix(in srgb, var(--accent-ink) 22%, transparent); }
.ring-fg {
  stroke: var(--accent-ink);
  stroke-linecap: round;
  transition: stroke-dashoffset .4s linear;
}

.ring-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: .1rem;
}

.next-label {
  margin: 0;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .85;
}
:root[dir="rtl"] .next-label { text-transform: none; letter-spacing: 0; font-size: .875rem; }

.next-time {
  margin: 0;
  font-size: clamp(1.9rem, 9vw, 2.3rem);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.next-count {
  margin: .7rem 0 0;
  font-size: .9375rem;
  opacity: .9;
  font-variant-numeric: tabular-nums;
}

.ramadan {
  margin: .6rem 0 0;
  padding-top: .6rem;
  border-top: 1px solid color-mix(in srgb, var(--accent-ink) 22%, transparent);
  font-size: .8125rem;
  opacity: .95;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------
   today's list
   --------------------------------------------------------------- */
.times { list-style: none; margin: 0; padding: 0; }

.times li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: .6rem .35rem;
  border-bottom: 1px solid var(--line);
}
.times li:last-child { border-bottom: 0; }

.times .t-name { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.times .t-name > svg { width: 17px; height: 17px; color: var(--ink-faint); flex: none; }
.t-names { display: grid; }
.t-label { line-height: 1.25; }
.t-alt { font-size: .75rem; color: var(--ink-faint); line-height: 1.3; }

.t-vals { text-align: end; display: grid; }
.times .t-val {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  color: var(--ink);
  font-weight: 550;
  white-space: nowrap;
}
.t-second {
  font-size: .75rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.times li.minor .t-label, .times li.minor .t-val {
  color: var(--ink-soft);
  font-weight: 400;
}

.times li.now {
  background: var(--accent-bg);
  border-radius: 9px;
  border-bottom-color: transparent;
  margin-inline: -.25rem;
  padding-inline: .75rem;
}
.times li.now .t-label, .times li.now .t-val { color: var(--accent); font-weight: 650; }
.times li.now .t-name > svg { color: var(--accent); }

.empty-times { color: var(--ink-faint); font-size: .875rem; }

/* ---------------------------------------------------------------
   qibla
   --------------------------------------------------------------- */
.qibla { display: flex; align-items: center; gap: 1.1rem; }

.dial { width: 118px; height: 118px; flex: none; }
.dial-face { fill: var(--bg); stroke: var(--line); stroke-width: 1; }
.dial .tick { stroke: var(--ink-faint); stroke-width: 1; opacity: .7; }
.dial .tick-major { stroke: var(--ink-soft); stroke-width: 1.8; }
.dial-n {
  fill: var(--ink-soft);
  stroke: none;
  font: 600 12px/1 system-ui, sans-serif;
}
.needle { stroke: var(--accent); stroke-width: 2.6; }
.needle-head { fill: var(--accent); stroke: none; }
.needle-hub { fill: var(--accent); stroke: none; }
#dialRose, #dialNeedle { transition: transform .2s linear; }

.qibla-read { min-width: 0; }
.qibla-deg {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 650;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.qibla-sub { margin: .1rem 0 .6rem; font-size: .8125rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------
   details panels & form controls
   --------------------------------------------------------------- */
.details { padding: 0; }

.details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}
.details summary::-webkit-details-marker { display: none; }
.details .chev { width: 20px; height: 20px; color: var(--ink-faint); transition: transform .18s; }
.details[open] .chev { transform: rotate(180deg); }

.fields { display: grid; gap: .85rem; padding: 0 .9rem .9rem; }

@media (min-width: 30rem) {
  .details summary { padding: 1rem 1.1rem; }
  .fields { padding: 0 1.1rem 1.1rem; }
  .hint { padding: .85rem 1.1rem 1.1rem; }
}

.field { margin: 0; display: grid; gap: .3rem; }
.field label { font-size: .8125rem; color: var(--ink-soft); }

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .85rem;
}

select, input[type="number"], input[type="text"] {
  width: 100%;
  min-height: 44px;
  padding: .5rem .65rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
}
select { cursor: pointer; }
input[type="number"] { font-variant-numeric: tabular-nums; }

.check-field label {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  font-size: .9375rem;
  color: var(--ink);
  cursor: pointer;
}
.check-field input { width: 19px; height: 19px; margin: 0; accent-color: var(--accent); flex: none; }

.hint {
  margin: 0;
  padding: .85rem .9rem .9rem;
  font-size: .8125rem;
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
}

.sub-hint { margin: .5rem 0 0; font-size: .75rem; color: var(--ink-faint); }

/* ---- fieldsets: "Times shown", angles, tuning ---- */
.toggles {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;   /* fieldsets default to min-content, which breaks the grid */
  display: grid;
  gap: .3rem;
}

.toggles legend {
  padding: 0;
  margin-bottom: .3rem;
  font-size: .8125rem;
  color: var(--ink-soft);
}

.toggle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .2rem .5rem;
}

.toggle-list label {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;          /* comfortable thumb target */
  padding: 0 .5rem;
  border-radius: 9px;
  cursor: pointer;
  font-size: .9375rem;
  color: var(--ink-soft);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.toggle-list label:hover { background: var(--bg); }
.toggle-list label svg { width: 16px; height: 16px; color: var(--ink-faint); flex: none; }

.toggle-list input {
  flex: none;
  width: 19px; height: 19px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.toggle-list label:has(input:checked) { color: var(--ink); }
.toggle-list label:has(input:checked) svg { color: var(--accent); }
.toggle-list label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

.tune-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .5rem;
}
.tune-list li { display: grid; gap: .2rem; }
.tune-list label { font-size: .75rem; color: var(--ink-soft); }
.tune-list input { min-height: 40px; padding: .35rem .5rem; }

/* ---- buttons ---- */
.btn-line {
  min-height: 44px;
  padding: 0 .9rem;
  font: inherit;
  font-size: .9375rem;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.btn-line:hover { color: var(--accent); border-color: var(--accent); }
.btn-line.wide { display: block; width: 100%; }

.share-out {
  font-size: .8125rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------------------------------------------------------------
   month table
   --------------------------------------------------------------- */
.month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: 0 .9rem .75rem;
}
.month-label { margin: 0; font-weight: 600; font-size: .9375rem; }

.table-wrap {
  overflow-x: auto;
  border-top: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* fades at the edge to signal the table scrolls sideways on narrow screens */
  mask-image: linear-gradient(to right, transparent 0, #000 .5rem, #000 calc(100% - .5rem), transparent 100%);
}

table.month {
  width: 100%;
  border-collapse: separate;   /* separate keeps sticky cell borders painted */
  border-spacing: 0;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}

table.month th, table.month td {
  padding: .55rem .45rem;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

table.month thead th {
  position: sticky; top: 0;
  z-index: 2;
  background: var(--card);
  font-size: .6875rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
}
:root[dir="rtl"] table.month thead th { text-transform: none; letter-spacing: 0; }

/* the day column stays put while the times scroll under it */
table.month tbody th {
  position: sticky; inset-inline-start: 0;
  z-index: 1;
  background: var(--card);
  font-weight: 500;
  color: var(--ink-soft);
  text-align: start;
  padding-inline-start: .9rem;
  border-inline-end: 1px solid var(--line);
}

table.month thead th:first-child {
  inset-inline-start: 0; z-index: 3;
  text-align: start;
  padding-inline-start: .9rem;
  border-inline-end: 1px solid var(--line);
}

table.month tr.today th, table.month tr.today td {
  color: var(--accent);
  font-weight: 650;
  background: var(--accent-bg);
}

/* Narrow screens use the abbreviated headers. The full word stays in the DOM,
   visually hidden, so assistive tech still announces "Maghrib" not "Magh". */
.lbl-short { display: none; }

@media (max-width: 29.999rem) {
  table.month { font-size: .75rem; }
  table.month th, table.month td { padding: .5rem .3rem; }
  table.month tbody th, table.month thead th:first-child { padding-inline-start: .6rem; }
  .lbl-short { display: inline; }
  .lbl-full {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* very small phones (≤ 320px): tighten further */
@media (max-width: 22rem) {
  table.month th, table.month td { padding: .5rem .22rem; }
}

@media (min-width: 30rem) {
  table.month { font-size: .875rem; }
  table.month thead th { font-size: .75rem; }
  .month-nav { padding: 0 1.1rem .75rem; }
}

#printBtn { width: calc(100% - 1.8rem); margin: 1rem .9rem .9rem; }
@media (min-width: 30rem) {
  #printBtn { width: calc(100% - 2.2rem); margin: 1rem 1.1rem 1.1rem; }
}

/* ---------------------------------------------------------------
   footer, toast
   --------------------------------------------------------------- */
.foot {
  margin-top: .5rem;
  font-size: .75rem;
  color: var(--ink-faint);
  text-align: center;
}
.foot p { margin: 0 0 .3rem; }
.foot-note { font-style: italic; }

.toast {
  position: fixed;
  inset-inline: 0;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 50;
  width: max-content;
  max-width: calc(100% - 2rem);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .9rem;
  font-size: .8125rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.toast button {
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 0;
  padding: .2rem .3rem;
  cursor: pointer;
}

/* ---------------------------------------------------------------
   embed mode (?embed=1)
   --------------------------------------------------------------- */
body.embed { padding: .6rem; }
body.embed .search,
body.embed .chips,
body.embed .details,
body.embed .foot,
body.embed #saveBtn,
body.embed #geoBtn { display: none !important; }

/* ---------------------------------------------------------------
   motion + print
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media print {
  body { background: #fff; color: #000; padding: 0; font-size: 11pt; }
  .head, .next, .foot, .toast, .qibla,
  #settingsPanel, #calendarPanel, .month-nav, #printBtn, .btn-icon { display: none !important; }
  .card:not(#monthPanel) { display: none !important; }
  #monthPanel { border: 0; box-shadow: none; padding: 0; break-inside: avoid; }
  #monthPanel summary { display: none; }
  .table-wrap { overflow: visible; border: 0; mask-image: none; }
  table.month { font-size: 9.5pt; }
  table.month th, table.month td { padding: .18rem .3rem; border-bottom: 1px solid #ddd; }
  table.month thead th { color: #000; background: #fff; }
  table.month tr.today th, table.month tr.today td { color: #000; background: #f0f0f0; }
  .lbl-short { display: none !important; }
  .lbl-full { position: static !important; width: auto !important; height: auto !important; clip: auto !important; margin: 0 !important; }
  #printTitle { display: block !important; }
}

#printTitle { display: none; margin: 0 0 .5rem; font-size: 13pt; }