/* Aydeen prayer times. Builds on ../read/read.css (site chrome, theme
   tokens, cards, buttons, settings drawer); only page-specific parts here. */

.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; }
.tab[aria-current="page"] { background: linear-gradient(180deg, var(--gold-400), var(--gold-500)); color: var(--emerald-950); }
.tab[aria-current="page"]:hover { color: var(--emerald-950); }
.link-btn { border: 0; background: none; padding: 6px 0; color: var(--r-primary); font-weight: 600; font-size: 14px; cursor: pointer; }
.btn:disabled { opacity: 0.6; cursor: progress; }

.toolbar-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--cream-100); }
.toolbar-title svg { width: 20px; height: 20px; fill: var(--gold-300); }

/* ---------- calculation settings card ---------- */
.calc-card { padding: 16px 20px; margin-bottom: 20px; }
.calc-fields { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .calc-fields { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.calc-field span { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--r-muted); margin-bottom: 6px; }
.calc-field select { width: 100%; height: 44px; padding: 0 36px 0 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--r-muted) 35%, transparent); background: var(--r-bg); color: var(--r-body); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px; background-repeat: no-repeat; }
.calc-field select:focus { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.calc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 12px; }
.calc-detail { font-size: 13px; color: var(--r-muted); min-width: 0; flex: 1 1 260px; }
#calc-more { flex-shrink: 0; }

/* ---------- location ---------- */
.loc { padding: 18px 20px; margin-bottom: 20px; }
.loc-set { display: flex; align-items: center; gap: 12px; }
.loc-set .pin { width: 26px; height: 26px; fill: var(--r-primary); flex-shrink: 0; }
.loc-main { flex: 1; min-width: 0; }
.loc-k { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--r-muted); font-weight: 600; }
.loc-label { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; line-height: 1.3; }
.loc-meta { font-size: 13px; color: var(--r-muted); overflow-wrap: anywhere; }
.loc-title { margin: 0 0 4px; font-size: 20px; }
.loc-help { margin: 0 0 14px; color: var(--r-muted); font-size: 14px; }
.loc-search { display: flex; gap: 8px; }
.loc-search input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--r-muted) 35%, transparent); background: var(--r-bg); color: var(--r-body); font: inherit; font-size: 16px; }
.loc-search input:focus { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.loc-search .btn { height: 44px; padding: 0 18px; }
.loc-or { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--r-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; }
.loc-or::before, .loc-or::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--r-muted) 25%, transparent); }
#loc-gps { height: 44px; padding: 0 18px; }
.loc-status { margin: 10px 0 0; font-size: 14px; color: var(--r-muted); min-height: 0; }
.loc-status:empty { display: none; }
.loc-status.err { color: #C62828; }
:root[data-rt="dark"] .loc-status.err { color: #EF9A9A; }
@media (prefers-color-scheme: dark) { :root[data-rt="system"] .loc-status.err { color: #EF9A9A; } }
.loc-results { list-style: none; margin: 12px 0 0; padding: 0; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--r-muted) 22%, transparent); overflow: hidden; }
.loc-results li + li { border-top: 1px solid color-mix(in srgb, var(--r-muted) 18%, transparent); }
.loc-results button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--r-body); }
.loc-results button:hover, .loc-results button:focus-visible { background: color-mix(in srgb, var(--r-primary) 8%, transparent); }
.loc-results svg { width: 18px; height: 18px; fill: var(--r-primary); flex-shrink: 0; }
.loc-results b { display: block; font-size: 15px; }
.loc-results small { display: block; font-size: 12px; color: var(--r-muted); overflow-wrap: anywhere; }
.loc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.attr { font-size: 11px; color: var(--r-muted); }
.attr a { color: inherit; text-decoration: underline; }

/* ---------- next prayer ---------- */
.next-card { position: relative; overflow: hidden; background: var(--emerald-900); color: #fff; border-radius: 16px; padding: 20px 22px; margin-bottom: 16px; }
.next-card::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; border: 28px solid rgba(255,255,255,0.06); pointer-events: none; }
.next-card .k { font-size: 12px; letter-spacing: 1px; color: rgba(255,255,255,0.7); text-transform: uppercase; }
.next-card .t { font-size: 30px; font-weight: 700; line-height: 1.2; }
.next-card .s { font-size: 16px; color: rgba(255,255,255,0.75); }
.next-card .cd { margin-top: 12px; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gold-300); }
.next-card .date { margin-top: 6px; font-size: 13px; color: rgba(255,255,255,0.65); }

/* ---------- today / other timings ---------- */
.pt-grid { margin-bottom: 12px; }
.pt-card { padding: 8px 6px; }
.pt-title { font-size: 12px; letter-spacing: 0.12em; font-weight: 700; text-transform: uppercase; color: var(--r-muted); margin: 10px 14px 6px; }
.pt-list { list-style: none; margin: 0; padding: 0; }
.pt-list li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; }
.pt-list .n { flex: 1; min-width: 0; font-weight: 600; font-size: 16px; }
.pt-list .n small { display: block; font-weight: 400; font-size: 12px; color: var(--r-muted); }
.pt-list .tm { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; font-size: 16px; }
.pt-list li.muted .n, .pt-list li.muted .tm { color: var(--r-muted); font-weight: 500; }
.pt-list li.past .n, .pt-list li.past .tm { opacity: 0.6; }
.pt-list li.next { background: color-mix(in srgb, var(--r-primary) 14%, transparent); box-shadow: inset 3px 0 0 var(--r-primary); }
.pt-list li.next .n, .pt-list li.next .tm { color: var(--r-primary); opacity: 1; }
.pt-list li.next .badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; vertical-align: 2px; color: var(--r-chip-ink); background: var(--r-chip); }
.pt-list.other .n { font-size: 15px; }
.pt-list.other .tm { font-size: 15px; }
.pt-list li.warn { background: color-mix(in srgb, #E65100 9%, transparent); }
.pt-list li.warn .n, .pt-list li.warn .tm { color: #B23C00; }
:root[data-rt="dark"] .pt-list li.warn .n, :root[data-rt="dark"] .pt-list li.warn .tm { color: #FFB74D; }
@media (prefers-color-scheme: dark) { :root[data-rt="system"] .pt-list li.warn .n, :root[data-rt="system"] .pt-list li.warn .tm { color: #FFB74D; } }


/* ---------- 10-day table ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.days { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
table.days th, table.days td { padding: 10px 12px; text-align: right; white-space: nowrap; }
table.days th:first-child, table.days td:first-child { text-align: left; position: sticky; left: 0; background: var(--r-bg); }
table.days thead th { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--r-muted); font-weight: 700; border-bottom: 1px solid color-mix(in srgb, var(--r-muted) 25%, transparent); }
table.days tbody tr + tr td { border-top: 1px solid color-mix(in srgb, var(--r-muted) 14%, transparent); }
table.days td:first-child b { display: block; font-weight: 600; }
table.days td:first-child small { display: block; font-size: 11px; color: var(--r-muted); }
table.days tr.today td { background: color-mix(in srgb, var(--r-primary) 10%, var(--r-bg)); }
table.days tr.today td:first-child b { color: var(--r-primary); }
table.days td.sr { color: var(--r-muted); }
table.days .ap { font-size: 0.78em; color: var(--r-muted); margin-left: 2px; }
@media (max-width: 560px) {
  table.days { font-size: 12.5px; }
  table.days th, table.days td { padding: 9px 4px; }
  table.days th:first-child, table.days td:first-child { padding-left: 8px; }
  table.days th:last-child, table.days td:last-child { padding-right: 8px; }
  table.days thead th { font-size: 10px; letter-spacing: 0; }
  /* Timetable style on phones: the column order already says AM/PM. */
  table.days .ap { display: none; }
}

.err-card { padding: 18px 20px; margin-bottom: 16px; border-color: color-mix(in srgb, #C62828 40%, transparent); }
.err-card b { display: block; margin-bottom: 4px; }
.err-card p { margin: 0 0 10px; color: var(--r-muted); font-size: 14px; }

.app-note { margin: 28px 4px 0; font-size: 14px; color: var(--r-muted); }

/* ---------- settings drawer extras (drawer itself is always light) ---------- */
.s-help { font-size: 12px; color: #5C5C5C; margin: -2px 4px 8px; line-height: 1.45; }
.s-angles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 16px; }
.s-angles label span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.s-angles input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.15); background: #fff; font: inherit; font-size: 15px; color: #1B1B1B; }
.s-angles input:focus { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.s-angles-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 16px 12px; font-size: 12px; color: #5C5C5C; }
.s-angles-foot button { border: 0; background: none; color: var(--emerald-900); font-weight: 600; font-size: 13px; cursor: pointer; padding: 4px 0; }
.s-adj { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 16px; }
.s-adj + .s-adj { border-top: 1px solid rgba(0,0,0,0.06); }
.s-adj .t { flex: 1; font-weight: 600; font-size: 15px; }
.s-adj output { width: 64px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.s-adj button { width: 40px; height: 40px; border-radius: 999px; border: 0; background: transparent; color: #1B1B1B; cursor: pointer; display: grid; place-items: center; }
.s-adj button:hover { background: rgba(6,78,59,0.08); }
.s-adj button svg { width: 22px; height: 22px; fill: currentColor; }