/* Shared pieces for the three web UX options (Maalam tokens from design/system/tokens.css). */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 400 var(--text-md)/1.55 var(--font-ui); }
button { font-family: inherit; }
#map { position: absolute; inset: 0; }
.wordmark { font: 700 22px/1 var(--font-brand); color: var(--accent); }
.tag { font-size: var(--text-xs); color: var(--text-muted); background: var(--surface-sunk); border-radius: var(--r-pill); padding: 3px 9px; }
.btn { font: 600 var(--text-sm) var(--font-ui); min-height: 38px; padding: 0 14px; border-radius: var(--r-pill); border: 0; cursor: pointer;
       display: inline-flex; align-items: center; gap: 6px; transition: transform var(--t-fast) var(--ease); }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.secondary { background: var(--accent-soft); color: var(--accent); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn.sm { min-height: 32px; padding: 0 11px; font-size: var(--text-xs); }
.btn.icon { width: 32px; padding: 0; justify-content: center; }
.btn:focus-visible, .chip:focus-visible, .row:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.search { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--e2); padding: 0 14px; min-height: 48px; }
.search input { flex: 1; width: 0; border: 0; background: transparent; font: 400 var(--text-md) var(--font-ui); color: var(--text); min-width: 0; outline: none; }
.search input::placeholder { color: var(--text-muted); }
.search .mark { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; flex: none; }
.search .mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--highlight); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none; scroll-snap-type: x proximity;
         mask-image: linear-gradient(to left, #000 85%, transparent); }
[dir="ltr"] .chips { mask-image: linear-gradient(to right, #000 85%, transparent); }
.chips::-webkit-scrollbar { display: none; }
.chips .chip { scroll-snap-align: start; }
.chips.cities { flex-wrap: wrap; overflow: visible; mask-image: none; padding-top: 4px; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: var(--r-pill);
        background: var(--surface); border: 1px solid var(--line); font: 500 var(--text-sm) var(--font-ui); color: var(--text); cursor: pointer; }
.chip .dot { width: 7px; height: 7px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chip[aria-pressed="true"] .dot { background: var(--highlight); }
.list { display: grid; }
.row { all: unset; box-sizing: border-box; display: flex; gap: 12px; align-items: center; padding: 11px 16px; cursor: pointer;
       position: relative; transition: background var(--t-fast); }
.row + .row::before { content: ""; position: absolute; top: 0; inset-inline: 62px 16px; border-top: 1px solid var(--line); }
.row:hover { background: var(--surface-sunk); }
.ico { width: 36px; height: 36px; border-radius: 12px; background: var(--accent-soft); flex: none; display: grid; place-items: center; color: var(--icon, var(--accent)); }
.ico.big { width: 44px; height: 44px; border-radius: 14px; }
.row .txt { min-width: 0; flex: 1; }
.row b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: match-parent; }
.row .sub { color: var(--text-muted); font-size: var(--text-sm); }
.row .end { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.place-head { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; }
/* quiet scrollbars that follow the theme */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
.section { padding: 12px 16px; }
.section h3 { font: 600 var(--text-xl)/1.3 var(--font-ui); margin: 0 0 2px; }
.section h4 { font: 600 var(--text-xs) var(--font-ui); color: var(--text-muted); margin: 8px 0 2px; letter-spacing: .02em; }
.meta { color: var(--text-muted); font-size: var(--text-sm); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.num { font-family: var(--font-num); direction: ltr; unicode-bidi: isolate; }
.summary { display: flex; align-items: baseline; gap: 10px; }
.summary .big { font: 600 var(--text-2xl)/1 var(--font-num); color: var(--positive); direction: ltr; }
.steps { list-style: none; margin: 8px 0 0; padding: 0; }
.steps li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.steps .arr { width: 26px; height: 26px; border-radius: 8px; background: var(--surface-sunk); display: grid; place-items: center; flex: none; direction: ltr; }
.steps .d { margin-inline-start: auto; color: var(--text-muted); font: 500 var(--text-xs) var(--font-num); direction: ltr; white-space: nowrap; }
.seg { display: inline-flex; background: var(--surface-sunk); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: var(--r-pill); font: 500 var(--text-xs) var(--font-ui); color: var(--text); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface); box-shadow: var(--e1); }
.empty { padding: 16px; color: var(--text-muted); font-size: var(--text-sm); }
.err { padding: 12px 16px; color: var(--danger); font-size: var(--text-sm); }
.toast { position: fixed; bottom: 24px; inset-inline-start: 50%; transform: translateX(50%); background: var(--text); color: var(--bg); padding: 8px 14px; border-radius: var(--r-pill); font-size: var(--text-sm); z-index: 50; }
[dir="ltr"] .toast { transform: translateX(-50%); }
/* product features (2.5): home tiles, prayer times, directions ends, routes, navigation, layers */
.between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.link { all: unset; cursor: pointer; color: var(--accent); font-size: var(--text-sm); font-weight: 500; }
.link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.row .del { margin-inline-start: 6px; color: var(--text-muted); padding: 4px 6px; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile { all: unset; box-sizing: border-box; display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: var(--r-md); background: var(--surface-sunk); cursor: pointer; min-width: 0; }
.tile svg { flex: none; color: var(--accent); }
.tile b { display: block; font-weight: 600; }
.tile > span { min-width: 0; }
.tile .sub { display: block; font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile:focus-visible { outline: 2px solid var(--accent); }
.prayer { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ptimes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin: 6px 0; }
.pt { text-align: center; padding: 6px 2px; border-radius: var(--r-md); background: var(--surface-sunk); font-size: var(--text-xs); }
.pt span { display: block; color: var(--text-muted); }
.pt b { font-weight: 600; font-size: var(--text-sm); }
.pt.on { background: var(--accent); color: var(--accent-ink); }
.pt.on span { color: inherit; opacity: .85; }
.ends { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 6px 8px; align-items: center; margin-top: 8px; }
.ends label { grid-column: 1; display: flex; align-items: center; gap: 8px; background: var(--surface-sunk); border-radius: var(--r-md); padding: 0 10px; min-height: 38px; }
.ends label span { font-size: var(--text-xs); color: var(--text-muted); min-width: 22px; }
.ends input { flex: 1; border: 0; background: transparent; font: 400 var(--text-sm) var(--font-ui); color: var(--text); outline: none; min-width: 0; }
.ends #sw { grid-column: 2; grid-row: 1 / span 2; }
.suggest .row { padding: 8px 4px; }
.opts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: var(--text-sm); }
.opts label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.row.route .txt b { font-size: var(--text-lg); color: var(--positive); }
.row.route.on { background: var(--accent-soft); }
.legend-row { display: flex; gap: 12px; margin-top: 8px; font-size: var(--text-xs); }
.legend-row i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 4px; vertical-align: -1px; }
.navnext { display: flex; gap: 12px; align-items: center; background: var(--accent); color: var(--accent-ink); border-radius: var(--r-lg); padding: 12px; margin-bottom: 10px; }
.navnext .arr.big { font-size: 28px; width: 44px; height: 44px; display: grid; place-items: center; background: rgba(255,255,255,.15); border-radius: 12px; direction: ltr; }
.navnext b { font-size: var(--text-xl); }
.limit { margin-inline-start: auto; width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 4px solid #C8302C; color: #111; display: grid; place-items: center; font-size: var(--text-sm); }
/* map controls: on the corner away from the panel, one column of matching cards (layers, locate,
   zoom and compass), then the scale and the credit under them, all on the same edge. MapLibre puts
   the last-added control first in a bottom corner, so `order` sets the column. */
/* (ltr: in an Arabic page flex-start would be the right edge; the column must hug the map's edge) */
.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; direction: ltr; }
.maplibregl-ctrl-bottom-left { align-items: flex-start; }
.maplibregl-ctrl-bottom-right { align-items: flex-end; }
.maplibregl-ctrl-bottom-left .maplibregl-ctrl, .maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin: 0; }
.maplibregl-ctrl.layer-ctl { order: 1; }
.maplibregl-ctrl-group:has(.maplibregl-ctrl-geolocate) { order: 2; }
.maplibregl-ctrl-group:has(.maplibregl-ctrl-zoom-in) { order: 3; }
.maplibregl-ctrl-scale { order: 4; }
.maplibregl-ctrl-attrib { order: 5; }
.maplibregl-ctrl.maplibregl-ctrl-group { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--e2), 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent); overflow: hidden; }
.maplibregl-ctrl-group button { width: 40px; height: 40px; display: grid; place-items: center; color: var(--text); background-color: transparent; transition: background-color var(--t-fast); }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--line); }
.maplibregl-ctrl-group button:not(:disabled):hover { background-color: var(--surface-sunk); }
.maplibregl-ctrl-group button:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
:root[data-theme="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) brightness(1.1); }
.layer-ctl svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.layer-ctl button[aria-pressed="true"], .layer-ctl button[aria-pressed="true"]:hover { background: var(--accent); color: var(--accent-ink); }
.maplibregl-ctrl-scale { background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--text); border-color: var(--text-muted); font: 500 11px var(--font-ui); padding: 1px 6px; }
.maplibregl-ctrl-attrib.maplibregl-compact { background: var(--surface); color: var(--text-muted); box-shadow: var(--e1), 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent); border-radius: var(--r-pill); min-height: 24px; font: 400 11px var(--font-ui); }
.maplibregl-ctrl-attrib a { color: var(--text); }
:root[data-theme="dark"] .maplibregl-ctrl-attrib-button { filter: invert(1); }
.report textarea { width: 100%; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-sunk); color: var(--text); font: 400 var(--text-sm) var(--font-ui); padding: 8px; resize: vertical; }
.btn[disabled] { opacity: .5; cursor: default; }
.hours .open { color: var(--positive); font-weight: 600; }
.hours .shut { color: var(--danger); font-weight: 600; }
.stopfield { grid-column: 1; }
.stopfield span { color: #7B3FA0 !important; font-weight: 700; }
.stop-pin { color: #fff; font: 700 11px/12px var(--font-ui); text-align: center; border-color: #fff !important; box-shadow: 0 0 0 4px rgba(123,63,160,.3) !important; }
.facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.fact { font-size: var(--text-xs); padding: 3px 9px; border-radius: var(--r-pill); background: var(--surface-sunk); color: var(--text); }
.fact.brand { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.fact.stars { color: #C98A0B; letter-spacing: 1px; }
.hazard { margin: 0 0 10px; padding: 8px 12px; border-radius: var(--r-md); font-weight: 600; font-size: var(--text-sm); background: #FFF4DE; color: #7A4B00; }
.hazard.camera { background: #FDE7E5; color: #8E1B1B; }
.car-arrow { filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.steps .arr svg, .navnext .arr svg { display: block; }
.navnext .arr.big { color: #fff; }
.truck { margin-top: 10px; }
.tfields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tfields label { display: grid; gap: 2px; font-size: var(--text-xs); color: var(--text-muted); }
.tfields input[type=number] { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-sunk); color: var(--text); font: 400 var(--text-sm) var(--font-num); padding: 6px; }
.tfields .chk { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; color: var(--text); font-size: var(--text-sm); }
.hijri { margin: -2px 0 4px; }
.measure-box { position: absolute; z-index: 4; bottom: 16px; inset-inline-end: 64px; background: var(--surface); border-radius: var(--r-pill); box-shadow: var(--e2); padding: 6px 14px; display: flex; gap: 12px; align-items: center; font-size: var(--text-sm); }
.measure-box b { font-size: var(--text-lg); color: #C8302C; }
.measure-box[hidden] { display: none; }
/* phones: above the bottom sheet, under the search bar */
@media (max-width: 900px) { .measure-box { top: 12px; bottom: auto; inset-inline: 12px; justify-content: space-between; } }
.area-btn { position: absolute; z-index: 4; top: 14px; left: 50%; transform: translateX(-50%); box-shadow: var(--e2); }
.area-btn[hidden] { display: none; }
.newlist { display: flex; gap: 6px; margin-top: 8px; }
.newlist input, .report input, .report select { flex: 1; width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-sunk); color: var(--text); font: 400 var(--text-sm) var(--font-ui); padding: 7px 9px; margin-top: 6px; }
.chip.all { font-weight: 600; }
.meta.owner { color: var(--positive); font-weight: 600; }