@import url('./design-system/tokens.css');
* { box-sizing: border-box; }
:root { font: 100%/1.5 var(--font-body); color: var(--color-text); background: var(--color-bg); color-scheme: light; }
body { margin: 0; background: linear-gradient(135deg,rgba(220,229,217,.55),transparent 45%,rgba(214,196,167,.22)),url('/assets/mihrab-background.svg') center top / max(100%,75rem) auto no-repeat,var(--color-bg); }
html:has(dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
a { color: inherit; text-underline-offset: .2em; }
button,input,select,textarea { font: inherit; }
button,a,summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button,summary { cursor: pointer; }
button:disabled { cursor: not-allowed; }
input,select,textarea { min-width: 0; max-width: 100%; min-height: 3rem; border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); background: var(--material-control-bg); color: var(--color-text); padding: .75rem .9rem; }
select { padding-right: 1.8rem; }
input:focus,textarea:focus { border-color: var(--color-accent); }
input,textarea { caret-color: var(--color-accent); }
::selection { background: var(--color-accent); color: var(--color-on-accent); }
html { scrollbar-color: var(--color-olive) var(--color-bg); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
[hidden] { display: none !important; }
svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
h1,h2,h3,p { margin: 0; }
h1,h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(1.75rem,3vw,2.75rem); max-width: 36ch; }
h2 { font-size: clamp(1.25rem,2vw,1.5rem); }
h3 { font-size: 1rem; font-weight: 600; }
p { overflow-wrap: anywhere; }
.wrap { width: min(88rem,calc(100% - 6rem)); margin-inline: auto; }
.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; }
.skip-link { position: fixed; top: .5rem; left: 1rem; transform: translateY(-200%); padding: .75rem; background: var(--color-surface); z-index: 2000; }
.skip-link:focus { transform: none; }
.glass { background: linear-gradient(135deg,var(--material-pane-sheen),transparent 48%,var(--material-sheen-end)),var(--color-glass); backdrop-filter: blur(var(--blur-glass)) saturate(110%); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(110%); box-shadow: inset var(--material-edge-light),inset var(--material-edge-dark),var(--shadow-float); border: 1px solid rgba(255,255,255,.55); border-radius: var(--radius-lg); }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .75rem; }
.brand { display: flex; align-items: center; flex-shrink: 0; gap: .7rem; font-size: 1.25rem; font-weight: 600; text-decoration: none; letter-spacing: -.025em; white-space: nowrap; }
.brand svg { width: 2rem; height: 2rem; }
.header-copy { min-width: 0; margin-right: auto; border-left: 1px solid var(--color-control-border); padding-left: 1.2rem; }
.header-copy h1 { font-size: .9375rem; line-height: 1.4; letter-spacing: -.015em; max-width: none; text-wrap: initial; }
.header-copy p { margin-top: .125rem; font-size: .75rem; line-height: 1.5; color: var(--color-muted); }
.header-actions { display: flex; align-items: center; flex-shrink: 0; gap: .75rem; }
.app-nav { z-index: 1000; display: flex; justify-content: space-between; padding: .35rem; gap: .3rem; border-radius: var(--radius-md); }
.app-nav a { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .5rem .9rem; text-decoration: none; font-size: .8125rem; border-radius: var(--radius-sm); white-space: nowrap; }
.language-switch { display: flex; align-items: center; padding: .35rem; gap: .2rem; border-radius: var(--radius-md); }
.language-switch button { min-height: 2.75rem; padding: .5rem .7rem; border-radius: var(--radius-sm); font-size: .75rem; color: var(--color-muted); white-space: nowrap; border: 1px solid transparent; background: transparent; }
.language-switch button[aria-pressed=true] { color: var(--color-text); background: linear-gradient(135deg,var(--material-control-sheen),var(--material-sheen-end)),rgba(255,255,255,.58); border-color: rgba(255,255,255,.8); box-shadow: inset var(--material-edge-light),inset var(--material-edge-dark),var(--material-control-shadow); }
.language-switch button:active { transform: scale(.98); }
.language-short { display: none; }
.app-nav a[aria-current] { background: var(--color-accent); color: var(--color-on-accent); }
.app-nav svg { width: 1.2rem; height: 1.2rem; }
.app-section { scroll-margin-top: 9rem; }
.supporting,.map-caption,.source-note,.qr-warning { color: var(--color-muted); font-size: .8125rem; line-height: 1.6; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: var(--button-min-height); padding: var(--button-padding-y) var(--button-padding-x); border: 1px solid transparent; border-radius: var(--button-radius); font-weight: 500; text-decoration: none; transition: transform var(--motion-fast),background var(--motion-fast); }
.primary { color: var(--button-text); background: var(--button-bg); }
.primary:hover:not(:disabled) { background: linear-gradient(rgba(255,255,255,.16),transparent),rgba(5,64,62,.94); }
.secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-control-border); }
.button:disabled { background: var(--color-bg); color: var(--color-muted); border-color: var(--color-control-border); }
.button:active:not(:disabled),.icon-button:active,.app-nav a:active { transform: scale(.98); }
.full-width { width: 100%; }
.text-button { display: inline-flex; align-items: center; justify-content: flex-start; gap: .5rem; min-height: 3rem; border: 1px solid transparent; border-radius: var(--radius-sm); padding: .5rem .75rem; color: inherit; text-decoration: none; font-size: .8125rem; }
.icon-button { display: grid; place-items: center; min-width: 3rem; min-height: 3rem; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--color-text); font-size: 1.6rem; }
.journey-workspace { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 1.5rem; }
.journey-controls { padding: 2rem; }
.journey-controls > .supporting { margin-top: .7rem; }
.section-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .65rem; }
.section-heading h2 { font-size: 1.25rem; }
.point-search { margin-top: 1.25rem; }
.point-search > label { display: flex; align-items: center; gap: .6rem; font-size: .875rem; margin-bottom: .5rem; }
.point-letter { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 1px solid currentColor; border-radius: 50%; font-size: .75rem; }
.destination-letter { color: var(--color-terracotta); }
.search-row { display: flex; gap: .5rem; }
.search-row input { flex: 1; width: 100%; }
.search-row .button { flex: 0 0 3rem; padding: .65rem; border-radius: var(--radius-sm); }
.point-search > .supporting { margin-top: .4rem; }
.search-results { padding: 0; margin: .5rem 0 0; list-style: none; max-height: 16rem; overflow: auto; }
.search-results:empty { display: none; }
.search-results li + li { margin-top: .4rem; }
.search-results button { display: block; width: 100%; text-align: left; padding: .8rem; min-height: 3rem; border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: .875rem; }
.gps-button { font-size: .75rem; }
#calculate-route { margin-top: 1.5rem; }
.route-summary { padding-block: 1rem; }
#route-status { font-size: .8125rem; font-weight: 500; }
#route-meta:empty { display: none; }
#route-meta { margin-top: .6rem; }
.jamak-result { padding: 1.25rem; margin-bottom: 1rem; border-radius: var(--radius-md); background: rgba(220,229,217,.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.75); }
.jamak-result h3 { font-size: 1.375rem; letter-spacing: -.02em; }
.jamak-result p { margin-top: .5rem; font-size: .875rem; }
#destination-navigation { margin-top: 1rem; }
.direction-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-block: .75rem; }
.direction-links a { display: inline-flex; align-items: center; min-height: 3rem; font-size: .875rem; }
details > summary { min-height: 3rem; align-content: center; font-size: .875rem; font-weight: 500; padding-block: .6rem; }
details p + p { margin-top: .6rem; }
.assessment-panel { margin-top: 1rem; border-top: 1px solid var(--color-line); }
.assessment { display: grid; gap: .5rem; margin-block: 1rem 1.5rem; }
.assessment label,.coordinate-entry label { font-size: .875rem; margin-top: .6rem; }
#boundary-question { display: grid; gap: .5rem; }
.guidance-detail { margin-top: .5rem; }
.guidance-detail li { margin-bottom: .8rem; font-size: .8125rem; }
.note-sources { display: flex; gap: .75rem; flex-wrap: wrap; }
.note-sources a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.journey-map-area { min-width: 0; overflow: hidden; padding: 1rem; }
.map-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .7rem; margin-bottom: 1rem; font-size: .8125rem; }
.map-toolbar select { flex: 1; }
.journey-map { width: 100%; height: 26rem; border-radius: var(--radius-md); border: 1px solid var(--color-control-border); z-index: 0; background: var(--color-accent-soft); }
.map-caption { margin-block: .75rem; }
.leaflet-container { font-family: var(--font-body); }
.leaflet-control-attribution { max-width: 100%; font-size: .75rem; }
.journey-pin { display: grid; place-items: center; background: var(--color-accent); color: var(--color-on-accent); border: 2px solid var(--color-surface); border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.3); font: 600 .875rem var(--font-body); }
.journey-pin-to { background: var(--color-terracotta); }
.journey-pin-current { background: var(--color-focus); }
.coordinate-entry form { display: grid; gap: .5rem; padding-bottom: 1rem; }
.coordinate-entry .button { margin-top: .5rem; }
.privacy-note { font-size: .75rem; }
.reference-list li { margin-bottom: .7rem; font-size: .8125rem; }
.reference-list a { display: inline-block; padding-block: .4rem; }
.lower-sections { padding-block: 3rem 1rem; }
.directory-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.directory-heading .supporting { margin-top: .8rem; }
.view-switch { display: flex; gap: .25rem; }
.view-switch button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .75rem; min-height: 3rem; font-size: .8125rem; color: var(--color-text); background: transparent; border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); }
.view-switch button[aria-pressed=true] { background: var(--color-accent); color: var(--color-on-accent); }
.nearby-panel { padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.nearby-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.nearby-tools > label { font-size: .875rem; }
.current-search { max-width: 38rem; }
#nearby-status { margin-top: .75rem; }
.filters { display: flex; gap: .75rem; }
.search-field { display: flex; align-items: center; gap: .75rem; border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); background: var(--color-surface); padding-left: 1rem; flex: 1; }
.search-field input { border: 0; background: transparent; width: 100%; }
.state-control { max-width: 40%; }
.state-control select { height: 100%; width: 100%; }
.result-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-block: 1.2rem; }
.result-options { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.25rem; }
.type-switch { display: flex; gap: .4rem; }
.type-switch button { padding: .5rem 1rem; min-height: 3rem; border: 1px solid transparent; border-radius: 2rem; background: transparent; color: var(--color-text); font-size: .8125rem; }
.type-switch button[aria-pressed=true] { background: var(--color-accent-soft); border-color: var(--color-control-border); }
#result-count { font-size: .75rem; color: var(--color-muted); }
.places { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.place-card { padding: 1rem; min-width: 0; background: linear-gradient(135deg,var(--material-pane-sheen),transparent 48%,var(--material-sheen-end)),var(--color-glass); box-shadow: inset var(--material-edge-light),inset var(--material-edge-dark),var(--material-card-shadow); border: 1px solid rgba(255,255,255,.55); border-radius: var(--radius-md); }
.card-meta { display: flex; justify-content: space-between; gap: .5rem; font-size: .6875rem; color: var(--color-muted); }
.place-heading { margin-block: .5rem; font-size: 1rem; line-height: 1.4; font-weight: 600; }
.name-button { text-align: left; color: inherit; border: 1px solid transparent; border-radius: var(--radius-sm); padding: .5rem .65rem; min-height: 3rem; font: inherit; overflow-wrap: anywhere; width: 100%; }
.card-location { font-size: .75rem; color: var(--color-muted); }
.qr-preview { display: flex; flex-direction: column; align-items: center; width: 100%; margin-block: 1rem .5rem; padding: .5rem; background: var(--color-qr); color: var(--color-text); border: 1px solid var(--color-line); border-radius: var(--radius-sm); }
.qr-preview img { display: block; width: 100%; height: 11rem; object-fit: contain; }
.qr-preview span { font-size: .6875rem; padding: .5rem; }
.qr-unavailable { font-size: .8125rem; color: var(--color-muted); padding-block: 1.5rem; }
.card-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.card-actions a { min-height: 3rem; display: inline-flex; align-items: center; font-size: .8125rem; }
.places.is-list { grid-template-columns: 1fr; }
.is-list .place-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .25rem 1.5rem; }
.is-list .card-meta { grid-column: 1 / -1; }
.is-list .place-heading,.is-list .card-location,.is-list .donation-box { grid-column: 1; }
.is-list .card-actions { grid-column: 2; grid-row: 2 / 5; align-self: center; justify-content: flex-end; gap: .5rem; }
.load-more { text-align: center; margin-block: 1.5rem; }
.source-note { font-size: .75rem; }
.trust-note { border-top: 1px solid var(--color-line); margin-top: 1.5rem; padding-top: 1.25rem; font-size: .8125rem; max-width: 90ch; }
.trust-note p { margin-top: .4rem; color: var(--color-muted); }
.empty-state { padding-block: 2rem; }
.empty-state p { margin-block: .5rem 1rem; }
#waktu { min-width: 0; position: sticky; top: max(.5rem,env(safe-area-inset-top)); z-index: 1100; margin-bottom: 1.25rem; }
.prayer-panel { display: grid; grid-template-columns: minmax(11rem,1fr) 3fr; align-items: center; gap: .5rem 1.5rem; padding: .5rem 1rem; background: linear-gradient(135deg,var(--material-pane-sheen),transparent 48%,var(--material-sheen-end)),var(--prayer-bg); color: var(--prayer-text); }
.prayer-strip-heading { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.prayer-strip-heading h2 { font-size: .875rem; white-space: nowrap; }
#prayer-zone-label { font-size: .6875rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#open-prayer-settings { min-width: 2.75rem; min-height: 2.75rem; margin-left: auto; }
#prayer-status:empty { display: none; }
#prayer-status { grid-column: 1 / -1; font-size: .75rem; }
#prayer-date { margin-block: .5rem; font-size: .875rem; }
#prayer-settings { margin-top: 1rem; }
#prayer-settings .zone-control { margin-top: 1rem; width: 100%; }
#prayer-settings-dialog,#jamak-info-dialog { width: min(34rem,calc(100% - 1rem)); }
#prayer-context { margin-top: .75rem; }
#prayer-times { grid-template-columns: repeat(5,minmax(0,1fr)); gap: .5rem; margin: 0; text-align: center; }
#prayer-times dt { font-size: .6875rem; }
#prayer-times dd { margin-top: .1rem; font-size: 1.25rem; font-weight: 600; }
.navigation-app-icon { display: block; flex: 0 0 auto; width: 1.375rem; height: 1.375rem; border-radius: .3rem; object-fit: contain; filter: none; }
[data-navigation-app] { gap: .5rem; }
.zone-control { display: grid; gap: .5rem; width: min(24rem,100%); font-size: .8125rem; }
.location-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; }
#location-status { margin-top: .65rem; }
.prayer-times { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1rem; padding: 0; margin: 2rem 0; }
.prayer-times dt { font-size: .8125rem; }
.prayer-times dd { margin: .5rem 0 0; font-size: 2rem; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.prayer-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem; font-size: .75rem; color: var(--color-muted); }
.site-footer { display: flex; justify-content: space-between; gap: 2rem; padding-block: 2rem 3rem; font-size: .8125rem; color: var(--color-muted); }
.site-footer > a { white-space: nowrap; }
.legal-page .journey-controls > :is(p,ul,ol) { margin-block: 1rem; max-width: 70ch; }
.legal-page .journey-controls h2 { margin-top: 1.75rem; }
.legal-page .journey-controls li + li { margin-top: .5rem; }
dialog { width: min(56rem,calc(100% - 2rem)); max-height: calc(100dvh - 2rem); border: 1px solid rgba(255,255,255,.8); border-radius: var(--radius-lg); padding: 0; color: var(--color-text); background: linear-gradient(135deg,var(--material-pane-sheen),transparent 48%,var(--material-sheen-end)),rgba(252,250,246,.64); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); box-shadow: inset var(--material-edge-light),inset var(--material-edge-dark),var(--shadow-float); overflow: auto; overscroll-behavior: contain; }
dialog::backdrop { background: var(--color-scrim); }
.sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; position: sticky; top: 0; background: rgba(252,250,246,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 1; font-size: .8125rem; }
.sheet-body { padding: .5rem 1.5rem 1.5rem; }
.jamak-info > p { margin-block: .75rem; font-size: .875rem; }
.jamak-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-block: 1rem .5rem; }
.jamak-pairs p { padding: .8rem .5rem; border: 1px solid var(--color-line); border-radius: var(--radius-sm); text-align: center; font-weight: 600; }
.jamak-timing { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-block: .75rem; border-block: 1px solid var(--color-line); }
.jamak-timing dt { font-weight: 600; }
.jamak-timing dd { margin: .3rem 0 0; font-size: .8125rem; }
.journey-help,.nearby-help { font-size: .8125rem; }
.nearby-help { margin-bottom: 1rem; }
#place-title { font-size: 1.5rem; margin-bottom: .75rem; }
.place-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-block: 1.5rem; }
.detail-qr img { display: block; width: 100%; height: auto; max-height: 30rem; object-fit: contain; background: var(--color-qr); }
.detail-qr .button { margin-block: 1rem .5rem; }
.qr-warning { margin-top: .5rem; }
.visit-details p { margin-block: .5rem; }
.source-link { display: inline-block; margin-top: 1rem; font-size: .8125rem; }
.place-prayers { padding-top: 1.5rem; border-top: 1px solid var(--color-line); }
.place-prayers .prayer-times dd { font-size: 1.5rem; }
#tuju-dialog { width: min(30rem,calc(100% - 2rem)); padding: 1.25rem; }
#tuju-dialog .sheet-header { padding: 0 0 1rem; position: static; background: transparent; }
#tuju-title { font-size: 1.25rem; }
#tuju-dialog label { display: block; margin-top: 1rem; font-size: .875rem; }
#tuju-destination { width: 100%; margin-block: .5rem 1rem; resize: vertical; }
#tuju-status { margin-top: .5rem; }
@media(max-width:1240px) {
  .site-header { flex-wrap: wrap; }
  .header-copy { order: 3; flex-basis: 100%; border-left: 0; padding: 0 0 .5rem; }
}
@media(max-width:1050px) {
  .wrap { width: calc(100% - 3rem); }
  .journey-workspace { gap: 1rem; }
  .journey-controls { padding: 1.25rem; }
  .places { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .wrap { width: calc(100% - 2rem); }
  .site-header { padding-block: .5rem; }
  .brand { font-size: 1.1rem; gap: .5rem; }
  .site-header { align-items: center; gap: .5rem; flex-wrap: wrap; }
  .header-copy { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .header-actions { margin-left: auto; }
  .language-switch { padding: .25rem; }
  .language-switch button { font-size: .6875rem; padding: .4rem .5rem; }
  .language-full { display: none; }
  .language-short { display: inline; }
  .app-nav { position: fixed; top: auto; bottom: max(.6rem,env(safe-area-inset-bottom)); left: 1rem; right: 1rem; width: auto; margin: 0; padding: .35rem; gap: .2rem; }
  .app-nav a { flex: 1; flex-direction: column; gap: .15rem; font-size: .6875rem; padding: .35rem; min-height: 3.25rem; }
  .app-nav svg { width: 1.2rem; height: 1.2rem; }
  .app-section { scroll-margin-top: 8rem; }
  .journey-workspace { grid-template-columns: 1fr; }
  .journey-controls { padding: 1rem; }
  .section-heading { align-items: center; gap: .25rem; }
  .section-heading h2 { font-size: 1.25rem; }
  .section-heading .text-button { min-height: 2.75rem; }
  .journey-map-area { margin-top: .25rem; }
  .journey-map { height: 22rem; }
  .map-toolbar { gap: .5rem; }
  .map-toolbar .text-button { width: 100%; min-height: 2.75rem; }
  .jamak-result { scroll-margin-top: 1rem; }
  .lower-sections { padding-top: 2rem; }
  .directory-heading { align-items: start; gap: .5rem; }
  .directory-heading h2 { font-size: 1.375rem; }
  .directory-heading .supporting { font-size: .75rem; }
  .view-switch button { min-height: 2.75rem; }
  .nearby-panel { padding: 1.25rem; }
  .nearby-tools > label { width: 100%; }
  .nearby-tools select,.nearby-tools .button { flex: 1; font-size: .8125rem; }
  .filters { flex-direction: column; }
  .state-control { max-width: 100%; }
  .places { grid-template-columns: 1fr; }
  .qr-preview img { height: 13rem; }
  .is-list .place-card { grid-template-columns: minmax(0,1fr); gap: .25rem; padding: .75rem; }
  .is-list .card-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; gap: .5rem; }
  #waktu { margin-bottom: 1rem; top: max(.35rem,env(safe-area-inset-top)); }
  .prayer-panel { grid-template-columns: 1fr; gap: 0; padding: .15rem .65rem .6rem; }
  .prayer-strip-heading { gap: .5rem; }
  #prayer-zone-label { margin-left: auto; }
  #open-prayer-settings { margin-left: 0; }
  #prayer-times { gap: .15rem; }
  #prayer-times dd { font-size: 1.125rem; }
  .place-prayers .prayer-times { gap: .35rem; }
  .place-prayers .prayer-times dd { font-size: 1.125rem; }
  .site-footer { flex-direction: column; gap: 1rem; padding-bottom: 7rem; }
  dialog { max-height: calc(100dvh - 1rem); width: calc(100% - 1rem); border-radius: var(--radius-lg); }
  .place-detail-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .sheet-body { padding-inline: 1.25rem; }
  #place-title { font-size: 1.375rem; }
  .detail-qr img { max-height: none; }
}

/* One shallow material for every actionable surface, including map chrome. */
:is(.button,.text-button,.icon-button,.name-button,.type-switch button,.view-switch button,.search-results button,.app-nav a,.direction-links a,.card-actions a,details > summary,.leaflet-bar a) {
  background: linear-gradient(135deg,var(--material-control-sheen),var(--material-sheen-end)),var(--material-control-bg);
  border: 1px solid var(--material-control-border);
  box-shadow: inset var(--material-edge-light),inset var(--material-edge-dark),var(--material-control-shadow);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast);
}
:is(.direction-links a,.card-actions a,details > summary) { padding: .6rem .75rem; border-radius: var(--radius-sm); text-decoration: none; }
details > summary { margin-block: .5rem; }
:is(.primary,.app-nav a[aria-current],.view-switch button[aria-pressed=true]) { background: linear-gradient(135deg,var(--material-accent-sheen),transparent),var(--material-accent-bg); color: var(--color-on-accent); border-color: var(--material-accent-border); box-shadow: inset var(--material-edge-accent),inset var(--material-edge-dark),var(--material-control-shadow); }
.type-switch button[aria-pressed=true] { background: rgba(220,229,217,.85); border-color: var(--color-accent); }
@media(hover:hover) {
  :is(button,.button,.app-nav a,.direction-links a,.card-actions a,summary,.leaflet-bar a):hover:not(:disabled) { box-shadow: inset var(--material-edge-light),inset var(--material-edge-dark),var(--material-hover-shadow); }
  :is(.primary,.app-nav a[aria-current],.view-switch button[aria-pressed=true]):hover:not(:disabled) { box-shadow: inset var(--material-edge-accent),inset var(--material-edge-dark),var(--material-hover-shadow); }
}
button:disabled { opacity: .65; box-shadow: none; }
.leaflet-bar { border: 0 !important; box-shadow: var(--shadow-float); }
.leaflet-bar a { color: var(--color-text); min-width: 2.75rem; min-height: 2.75rem; line-height: 2.75rem; }
#journey-result-dialog { width: min(42rem,calc(100% - 2rem)); }
#journey-result-dialog .sheet-header h2 { font-size: 1.125rem; }
#result-route-distance { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 1rem; }
#result-route-meta,#route-places-status,.route-offset { font-size: .8125rem; color: var(--color-muted); margin-top: .4rem; }
#route-places { display: grid; grid-template-columns: minmax(0,1fr); gap: .75rem; margin-top: 1rem; }
#route-places .place-card { padding: .875rem; }
#route-places .card-actions { justify-content: flex-start; gap: .5rem; }
#route-places .place-heading { margin-block: .35rem; }
.donation-box { margin-top: .75rem; }
.donation-box > summary,#place-donation > summary { font-size: .8125rem; }
.donation-box .qr-preview { max-width: 20rem; margin-inline: auto; }
.qr-preview img,.detail-qr img { object-fit: contain; filter: none; }
@media(max-width:760px) {
  #journey-result-dialog { width: calc(100% - 1rem); }
  #journey-result-dialog .sheet-header { padding: .75rem 1rem; }
  #journey-result-dialog .sheet-body { padding-inline: 1rem; padding-bottom: max(1rem,env(safe-area-inset-bottom)); }
  .jamak-result { padding: 1rem; }
}
@media(max-height:500px) and (min-width:480px) {
  .prayer-panel { grid-template-columns: minmax(9rem,1fr) 3fr; gap: .5rem; padding: .3rem .75rem; }
  .prayer-strip-heading h2 { font-size: .75rem; }
  #prayer-zone-label { display: none; }
  #prayer-times dd { font-size: 1rem; }
}
@media(prefers-reduced-motion:reduce) {
  :root { scroll-behavior: auto; }
  *,*::before,*::after { transition: none !important; animation: none !important; }
  :is(button,.button,.app-nav a):active { transform: none !important; }
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  :is(.glass,.place-card,dialog,.sheet-header,input,select,textarea,.button,.text-button,.icon-button,.name-button,.type-switch button,.view-switch button,.language-switch button,.search-results button,.app-nav a,.direction-links a,.card-actions a,details > summary,.leaflet-bar a) { background: var(--color-surface) !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
  :is(.primary,.app-nav a[aria-current],.view-switch button[aria-pressed=true]) { background: var(--color-accent) !important; }
  .type-switch button[aria-pressed=true],.language-switch button[aria-pressed=true],.jamak-result { background: var(--color-accent-soft) !important; }
  dialog::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media(prefers-contrast:more) {
  :is(.glass,.place-card,dialog,.button,.text-button,.icon-button,.name-button,.type-switch button,.view-switch button,.language-switch button,.search-results button,.app-nav a,.direction-links a,.card-actions a,details > summary,.leaflet-bar a) { border-color: currentColor; box-shadow: none !important; }
}
@media(prefers-contrast:more),(forced-colors:active) {
  body { background-image: none; }
}