/* =====================================================================
   Awqōt Finder — components
   Every value comes from finder-tokens.css. No colours or sizes here.
   Fonts: self-hosted. Only these four faces are used.
   ===================================================================== */

@font-face { font-family: "Amiri"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/amiri-400.woff2") format("woff2"); }
@font-face { font-family: "Amiri"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/amiri-700.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/source-sans-3-400.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/source-sans-3-600.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); }
h1, h2, h3, p, ol, ul, table { margin: 0; }
a { color: var(--text-primary); }
button { font: inherit; color: inherit; }
svg { display: block; }

:focus { outline: none; }
:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-s); }
.focus-demo { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }  /* design-only: shows the focus state on one element per board */

.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; }

/* ---------- Screen shell ---------- */
.screen { min-width: var(--min-width); max-width: var(--content-max); margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); position: relative; overflow-x: hidden; }
/* Location prompt only (locate-prompt, locate-prompt-prayer-unavailable). One left edge: topbar, header card
   and attribution keep their own --gutter; the screen's .stack blocks take --gutter as side padding. */
.screen--fill { gap: var(--space-5); padding: var(--space-7) 0 var(--space-6); }
.screen--fill > .stack { padding-inline: var(--gutter); }
.screen--fill > .header-card + .attribution { margin-top: calc(-1 * var(--space-5)); }  /* attribution hugs its card, as on every other screen */
.screen--fill > .stack > .sub { text-align: center; }  /* footnote centred, matching the centred title and lead */
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--tight { gap: var(--space-2); }
.stack--center { align-items: center; text-align: center; }
.spacer { height: var(--space-5); flex: none; }
.spacer--s { height: var(--space-3); flex: none; }

/* ---------- Top bar + date ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--gutter); min-height: var(--topbar-height); }
.wordmark { height: var(--wordmark-height); width: auto; display: block; }
.date { font-size: var(--fs-small); color: var(--text-secondary); text-align: right; line-height: var(--lh-tight); display: flex; flex-direction: column; gap: 2px; }
.date-greg { font-weight: var(--fw-semibold); color: var(--text-primary); }
/* Today's five prayers, one row under the top bar. Hidden when prayer times are unavailable or loading. */
.day-times { list-style: none; margin: 0 var(--gutter) var(--space-3); padding: var(--space-2) 0; border-top: var(--rule) solid var(--divider); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); border-bottom: var(--rule) solid var(--divider); }
.day-time { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-width: 0; padding-bottom: var(--space-1); position: relative; }
.day-time-name { font-size: var(--fs-label); color: var(--text-secondary); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.day-time-at { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: var(--lh-tight); }
.day-time--past .day-time-name, .day-time--past .day-time-at { color: var(--text-muted); font-weight: var(--fw-regular); }
.day-time[aria-current] .day-time-name { color: var(--text-primary); font-weight: var(--fw-semibold); }
.day-time[aria-current]::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: calc(-1 * var(--space-2) - var(--rule)); height: calc(2 * var(--rule)); background: var(--accent); border-radius: var(--radius-pill); }  /* marks the next prayer; weight change carries it without colour */
.screen--fill > .day-times { margin-block: calc(-1 * var(--space-5) + var(--space-1)) calc(var(--space-3) - var(--space-5)); }  /* same spacing as on other screens inside the fill layout's gap */
.desktop-pane > .day-times { margin-top: 0; border-top: 0; padding-top: 0; }  /* the desktop header already has a rule */
.back { min-height: var(--tap); display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-primary); text-decoration: none; font-weight: var(--fw-semibold); padding-right: var(--space-2); }
.back svg, .icon-btn svg { width: var(--icon-l); height: var(--icon-l); }
.icon-btn { width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); border: var(--rule) solid var(--divider); background: var(--bg); color: var(--text-primary); text-decoration: none; cursor: pointer; }

/* ---------- Header card (next prayer) ---------- */
.header-card { margin: 0 var(--gutter); background: var(--sand); border: var(--rule) solid var(--sand-rule); border-radius: var(--radius-m); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.header-card-top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.eyebrow { font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-ink); }
.prayer-name { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-prayer); line-height: 1; margin-top: 2px; }
.countdown { font-size: var(--fs-countdown); font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; line-height: 1; }
.header-times { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--fs-small); color: var(--text-secondary); border-top: var(--rule) solid var(--sand-rule); padding-top: var(--space-2); }
.header-times b { color: var(--text-primary); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.header-card--unavailable .header-message { font-size: var(--fs-body); color: var(--text-primary); }
.header-note { font-size: var(--fs-small); color: var(--text-secondary); }  /* adzan hold: says why there is no countdown */
.attribution { font-size: var(--fs-attribution); color: var(--text-muted); line-height: var(--lh-body); padding: var(--space-2) var(--gutter) 0; }

/* ---------- Travel-mode selector ---------- */
.modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); padding: var(--space-1); background: var(--panel-bg); border-radius: var(--radius-m); margin: 0 var(--gutter); }
.mode { min-height: calc(var(--tap) + var(--space-3)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: transparent; border-radius: var(--radius-s); font-size: var(--fs-label); color: var(--text-secondary); padding: var(--space-1); cursor: pointer; text-align: center; overflow-wrap: anywhere; line-height: var(--lh-tight); }
.mode svg { width: var(--icon-l); height: var(--icon-l); }
.mode[aria-pressed="true"] { background: var(--bg); color: var(--text-primary); font-weight: var(--fw-semibold); box-shadow: 0 0 0 var(--rule) var(--divider); }

/* ---------- Section head + List/Map switch ---------- */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-5) var(--gutter) var(--space-2); }
.h2 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-heading); line-height: var(--lh-tight); }
.h2--large { font-size: var(--fs-title); }
.sub { font-size: var(--fs-small); color: var(--text-secondary); }
.switch { display: inline-flex; border: var(--rule) solid var(--divider); border-radius: var(--radius-pill); padding: 2px; }
.switch a { min-height: var(--tap); min-width: calc(var(--tap) + var(--space-5)); padding: 0 var(--space-4); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border-radius: var(--radius-pill); font-size: var(--fs-small); color: var(--text-secondary); text-decoration: none; }
.switch a[aria-current="page"] { background: var(--text-primary); color: var(--color-secondary); font-weight: var(--fw-semibold); }
.switch a[aria-current="page"]:focus-visible { outline-color: var(--focus-ring-color); }
.switch a[aria-disabled="true"] { color: var(--text-muted); cursor: not-allowed; }  /* List before a location is set */
.switch svg { width: var(--icon-m); height: var(--icon-m); }

/* ---------- Banner (info / warning) ---------- */
.banner { margin: var(--space-3) var(--gutter) 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); font-size: var(--fs-small); display: flex; gap: var(--space-3); align-items: flex-start; background: var(--panel-bg); color: var(--text-secondary); }
.banner svg { width: var(--icon-m); height: var(--icon-m); flex: none; margin-top: 2px; color: var(--text-primary); }
.banner-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.banner-body strong { color: var(--text-primary); font-weight: var(--fw-semibold); }
.banner--warn { background: var(--verdict-tight-bg); color: var(--verdict-tight-ink); }
.banner--warn svg, .banner--warn strong { color: var(--verdict-tight-ink); }
.link-btn { min-height: var(--tap); display: inline-flex; align-items: center; padding: 0; border: 0; background: none; color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; font-weight: var(--fw-semibold); cursor: pointer; text-align: left; }
.banner--warn .link-btn { color: var(--verdict-tight-ink); }

/* ---------- Place row ---------- */
.list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.list > li { border-top: var(--rule) solid var(--divider); }
.list > li:last-child { border-bottom: var(--rule) solid var(--divider); }
.row { display: grid; grid-template-columns: var(--mark-size) minmax(0, 1fr) auto; column-gap: var(--space-3); row-gap: var(--space-2); padding: var(--space-3) var(--gutter); text-decoration: none; color: var(--text-primary); align-items: start; min-height: var(--tap); }
.row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row-type { font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); font-weight: var(--fw-semibold); }
.row-name { font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.row-meta { font-size: var(--fs-small); color: var(--text-secondary); }
.row-figure { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.row-figure .n { font-size: var(--fs-title); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; line-height: 1; }
.row-figure .u { font-size: var(--fs-small); color: var(--text-secondary); }
.row-note { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--accent-ink); }  /* Friday: place without a khutbah, measured as Zohor under a Jumaat header */
.row-foot { grid-column: 2 / 4; display: flex; flex-direction: column; gap: var(--space-1); }
.row-verdict { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }

/* Markers: verified by mosque = gold-ringed disc, compiled by Awqōt = plain disc */
.mark { width: var(--mark-size); height: var(--mark-size); border-radius: 50%; margin-top: 3px; flex: none; display: inline-block; }
.mark--claimed { background: var(--pin-claimed-fill); box-shadow: inset 0 0 0 4px var(--pin-claimed-fill), inset 0 0 0 6px var(--pin-claimed-ring); }
.mark--unclaimed { background: var(--pin-unclaimed-fill); }

/* Loading placeholder row */
.skel { display: block; background: var(--skeleton); border-radius: var(--radius-s); height: 0.9em; }
.skel--type { width: 40%; height: 0.7em; }
.skel--name { width: 75%; }
.skel--meta { width: 25%; }
.skel--title { width: 45%; height: 2em; }
.skel--date { width: calc(var(--tap) * 2); }
.skel--figure { width: calc(var(--tap) - var(--space-2)); height: 1.6em; }
.skel--mark { border-radius: 50%; width: var(--mark-size); height: var(--mark-size); }
@media (prefers-reduced-motion: no-preference) {
  .skel { animation: skel-pulse 1.4s ease-in-out infinite; }
  @keyframes skel-pulse { 50% { opacity: 0.5; } }
}

/* ---------- Verdict badge + basis line ---------- */
.verdict { display: inline-flex; align-items: center; gap: var(--space-2); min-height: calc(var(--space-5) + 2px); padding: 2px var(--space-3) 2px var(--space-2); border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.verdict svg { width: var(--icon-s); height: var(--icon-s); flex: none; }
.verdict--ok { background: var(--verdict-ok-bg); color: var(--verdict-ok-ink); }
.verdict--tight { background: var(--verdict-tight-bg); color: var(--verdict-tight-ink); }
.verdict--late { background: var(--verdict-late-bg); color: var(--verdict-late-ink); }
.verdict--ok .glyph-tick { stroke: var(--verdict-ok-bg); }
.spare { font-size: var(--fs-small); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.basis { font-size: var(--fs-small); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.basis b { color: var(--text-primary); font-weight: var(--fw-semibold); }
.text-ok { color: var(--verdict-ok-ink); } .text-tight { color: var(--verdict-tight-ink); } .text-late { color: var(--verdict-late-ink); }
.text-ok .glyph-tick { stroke: var(--bg); }

/* ---------- Footer note ---------- */
.privacy { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-small); color: var(--text-secondary); padding: var(--space-4) var(--gutter) var(--space-6); }
.privacy svg { width: var(--icon-m); height: var(--icon-m); flex: none; margin-top: 2px; }

/* ---------- Buttons ---------- */
.btn { min-height: calc(var(--tap) + 4px); padding: 0 var(--space-5); border-radius: var(--radius-s); font-size: var(--fs-body); font-weight: var(--fw-semibold); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); text-decoration: none; cursor: pointer; text-align: center; line-height: var(--lh-tight); border: var(--rule) solid transparent; }
.btn svg { width: var(--icon-m); height: var(--icon-m); flex: none; }
.btn--primary { background: var(--text-primary); color: var(--color-secondary); border-color: var(--text-primary); }
.btn--secondary { background: var(--bg); color: var(--text-primary); border-color: var(--divider); }
.btn--quiet { background: transparent; color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: default; }
.actions { display: flex; flex-direction: column; gap: var(--space-2); }

/* ---------- State panel (locating, failed, denied, empty, errors) ---------- */
.panel { margin: var(--space-5) var(--gutter) 0; padding: var(--space-5); border: var(--rule) solid var(--divider); border-radius: var(--radius-m); display: flex; flex-direction: column; gap: var(--space-4); }
.panel--plain { border: 0; align-items: center; text-align: center; padding-top: var(--space-6); }
.panel-icon { width: var(--panel-icon); height: var(--panel-icon); border-radius: 50%; background: var(--panel-bg); display: flex; align-items: center; justify-content: center; color: var(--text-primary); flex: none; }
.panel-icon svg { width: var(--icon-l); height: var(--icon-l); }
.panel-icon--alert { background: var(--verdict-late-bg); color: var(--verdict-late-ink); }
.panel-icon--dashed { background: transparent; border: 2px dashed var(--divider); }
.panel-text { color: var(--text-secondary); }
.steps { padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); color: var(--text-secondary); font-size: var(--fs-small); }
.spinner { width: var(--spinner); height: var(--spinner); border-radius: 50%; border: 3px solid var(--divider); border-top-color: var(--text-primary); }
@media (prefers-reduced-motion: no-preference) {
  .spinner { animation: spin 0.9s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
}

/* ---------- Locate prompt ---------- */
.mark-logo { width: calc(var(--panel-icon) * 2); height: auto; }
.privacy-box { padding: var(--space-4); border-radius: var(--radius-m); background: var(--panel-bg); color: var(--text-secondary); font-size: var(--fs-small); display: flex; gap: var(--space-3); align-items: flex-start; }
.privacy-box svg { width: var(--icon-l); height: var(--icon-l); flex: none; color: var(--text-primary); }
.privacy-box strong { color: var(--text-primary); font-weight: var(--fw-semibold); display: block; }
.lead { color: var(--text-secondary); max-width: 32ch; }
.title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-title); line-height: var(--lh-tight); overflow-wrap: anywhere; }

/* ---------- Detail ---------- */
.detail-head { padding: var(--space-2) var(--gutter) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.type-chip { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); font-weight: var(--fw-semibold); }
.type-chip .mark { margin-top: 0; }
.address { color: var(--text-secondary); }
.facts { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--fs-small); color: var(--text-secondary); }  /* after v1: type, jemaah, Jumaat */
.facts li:not(:last-child)::after { content: "·"; margin-left: var(--space-3); color: var(--text-muted); }  /* separator trails, so a wrapped line never starts with a dot */
.source-line { font-size: var(--fs-small); color: var(--text-secondary); }
.contact { margin: 0 var(--gutter) var(--space-4); padding: 0; list-style: none; display: flex; flex-direction: column; }
.contact a { min-height: var(--tap); display: flex; align-items: center; gap: var(--space-3); color: var(--text-primary); text-decoration: none; font-size: var(--fs-body); overflow-wrap: anywhere; }
.contact svg { width: var(--icon-m); height: var(--icon-m); flex: none; color: var(--text-secondary); }
.site-link { margin: 0 var(--gutter) var(--space-4); display: flex; align-items: center; gap: var(--space-3); min-height: calc(var(--tap) + var(--space-3)); padding: var(--space-2) var(--space-4); background: var(--panel-bg); border: var(--rule) solid var(--divider); border-radius: var(--radius-m); text-decoration: none; color: var(--text-primary); }
.site-link svg { width: var(--icon-m); height: var(--icon-m); flex: none; }
.site-link-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.site-link-text strong { font-weight: var(--fw-semibold); }
.site-link-text span { font-size: var(--fs-small); color: var(--text-secondary); overflow-wrap: anywhere; }
.note { margin: 0 var(--gutter) var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: var(--panel-bg); color: var(--text-secondary); font-size: var(--fs-small); display: flex; gap: var(--space-3); }
.note svg { width: var(--icon-m); height: var(--icon-m); flex: none; margin-top: 2px; color: var(--text-primary); }
.note strong { color: var(--text-primary); font-weight: var(--fw-semibold); }

.card { margin: 0 var(--gutter); border: var(--rule) solid var(--divider); border-radius: var(--radius-m); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.card-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.card-figures { display: flex; justify-content: space-between; gap: var(--space-3); border-top: var(--rule) solid var(--divider); padding-top: var(--space-3); }
.figure { display: flex; flex-direction: column; gap: 2px; }
.figure--end { align-items: flex-end; text-align: right; }
.figure .n { font-size: var(--fs-title); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; line-height: 1; }
.card-note { font-size: var(--fs-small); color: var(--text-secondary); }
.live { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); color: var(--text-secondary); }
.live-dot { width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--accent); display: inline-block; flex: none; }

.section { padding: var(--space-5) var(--gutter) var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0 var(--gutter); padding: 0; list-style: none; }
.mode-cell { border: var(--rule) solid var(--divider); border-radius: var(--radius-m); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.mode-cell-top { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); color: var(--text-secondary); }
.mode-cell-top svg { width: var(--icon-m); height: var(--icon-m); flex: none; }
.mode-cell .n { font-size: var(--fs-heading); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.mode-cell--na .n { color: var(--text-secondary); font-size: var(--fs-body); font-weight: var(--fw-regular); }
.dot-verdict { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.dot-verdict svg { width: var(--icon-s); height: var(--icon-s); flex: none; }

.times { width: calc(100% - 2 * var(--gutter)); margin: 0 var(--gutter); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.times caption { text-align: left; }
.times th { font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); font-weight: var(--fw-semibold); text-align: left; padding: var(--space-2) var(--space-3); border-bottom: var(--rule) solid var(--divider); }
.times td { padding: var(--space-2) var(--space-3); border-bottom: var(--rule) solid var(--divider); }
.times th:not(:first-child), .times td:not(:first-child) { text-align: right; }
.times td:first-child { color: var(--text-secondary); }
.times tr.is-target td { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text-primary); font-weight: var(--fw-semibold); }
.target-tag { font-size: var(--fs-small); font-weight: var(--fw-regular); color: var(--text-secondary); }
.claim { margin: var(--space-6) var(--gutter) 0; padding-top: var(--space-4); border-top: var(--rule) solid var(--divider); display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start; }
.directions { padding: var(--space-5) var(--gutter) 0; display: flex; flex-direction: column; gap: var(--space-2); }
.directions .sub { text-align: center; }
.end { height: var(--space-7); flex: none; }

/* ---------- Map ---------- */
.map { position: relative; flex: 1; min-height: calc(var(--panel-icon) * 10); overflow: hidden; background-color: var(--map-placeholder); background-image: repeating-linear-gradient(0deg, transparent 0 63px, var(--divider) 63px 64px), repeating-linear-gradient(90deg, transparent 0 63px, var(--divider) 63px 64px); border-top: var(--rule) solid var(--divider); }
.pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: var(--space-1); background: transparent; border: 0; padding: 0; cursor: pointer; min-width: var(--tap); min-height: var(--tap); }
.pin-dot { width: var(--pin-size); height: var(--pin-size); border-radius: 50%; display: block; box-shadow: var(--shadow-pin); }
.pin--claimed .pin-dot { background: var(--pin-claimed-fill); box-shadow: inset 0 0 0 7px var(--pin-claimed-fill), inset 0 0 0 10px var(--pin-claimed-ring), var(--shadow-pin); }
.pin--unclaimed .pin-dot { background: var(--pin-unclaimed-fill); }
.pin[aria-pressed="true"] .pin-dot { outline: 3px solid var(--pin-selected-ring); outline-offset: 3px; }
.pin-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-pill); font-size: var(--fs-label); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: var(--shadow-pin); }
.pin-chip svg { width: var(--icon-s); height: var(--icon-s); }
.pin-chip--distance { background: var(--bg); color: var(--text-primary); }
.user-pin { position: absolute; transform: translate(-50%, -50%); width: var(--icon-m); height: var(--icon-m); border-radius: 50%; background: var(--pin-user-fill); border: 3px solid var(--pin-user-border); box-shadow: var(--shadow-pin); z-index: 2; }
.user-pin--draggable { width: calc(var(--icon-l) + 4px); height: calc(var(--icon-l) + 4px); cursor: grab; }
.user-pin--dragging { transform: translate(-50%, -50%) translateY(calc(-1 * var(--space-3))) scale(1.15); box-shadow: var(--shadow-float); cursor: grabbing; }
.user-pin-shadow { position: absolute; transform: translate(-50%, -50%); width: var(--space-3); height: var(--space-1); border-radius: 50%; background: var(--scrim); }
.accuracy { position: absolute; transform: translate(-50%, -50%); width: var(--accuracy-normal); height: var(--accuracy-normal); border-radius: 50%; background: var(--accuracy-fill); border: var(--rule) solid var(--accuracy-stroke); }
.accuracy--low { width: var(--accuracy-low); height: var(--accuracy-low); }
.map-float { position: absolute; background: var(--bg); border-radius: var(--radius-m); box-shadow: var(--shadow-float); }
.legend { left: var(--space-3); top: var(--space-3); padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--fs-label); color: var(--text-secondary); margin: 0; list-style: none; }
.legend li { display: flex; align-items: center; gap: var(--space-2); }
.legend .mark { margin: 0; width: var(--icon-s); height: var(--icon-s); }
.legend .mark--claimed { box-shadow: inset 0 0 0 3px var(--pin-claimed-fill), inset 0 0 0 5px var(--pin-claimed-ring); }
.locate-btn { position: absolute; right: var(--space-3); top: var(--space-3); }
.map-attribution { position: absolute; right: 0; bottom: 0; max-width: calc(100% - 2 * var(--space-3)); display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px var(--space-2); padding: 2px var(--space-2); background: color-mix(in srgb, var(--bg) 85%, transparent); font-size: var(--fs-attribution); color: var(--text-secondary); border-top-left-radius: var(--radius-s); z-index: 3; }  /* room for a logo and links: wraps to two lines */
.map-attribution img { height: var(--icon-m); width: auto; }
.map-attribution a { color: inherit; min-height: var(--tap); display: inline-flex; align-items: center; }
.map-attribution--raised { bottom: var(--map-attr-offset, 0); }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: var(--sheet-max); background: var(--bg); border-radius: var(--radius-l) var(--radius-l) 0 0; box-shadow: var(--shadow-float); padding: var(--space-3) var(--space-5) calc(var(--space-5) + var(--space-4)); display: flex; flex-direction: column; gap: var(--space-3); z-index: 4; }
.sheet-grab { width: var(--grab-w); height: var(--grab-h); border-radius: var(--radius-pill); background: var(--divider); align-self: center; }
.sheet > * { flex: none; }
.map--failed { background-image: none; }
.map-failed-note { position: absolute; left: var(--gutter); right: var(--gutter); top: var(--space-4); display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: var(--bg); box-shadow: var(--shadow-float); font-size: var(--fs-small); color: var(--text-secondary); }
.map-failed-note svg { width: var(--icon-m); height: var(--icon-m); flex: none; margin-top: 2px; color: var(--text-primary); }
.sheet .map-attribution { position: static; align-self: flex-end; background: none; padding: 0; }
.place-card { position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-7); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.strip { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin: 0 var(--gutter); padding: var(--space-2) var(--space-4); background: var(--sand); border: var(--rule) solid var(--sand-rule); border-radius: var(--radius-m); }
.strip-name { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-heading); line-height: var(--lh-tight); }
.strip-count { font-size: var(--fs-heading); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

/* SAMPLE map positions — at runtime JS sets left/top from the map projection */
.at-user { left: 50%; top: 46%; }
.at-p1 { left: 28%; top: 40%; }
.at-p2 { left: 78%; top: 22%; }
.at-p3 { left: 66%; top: 50%; }
.at-p4 { left: 16%; top: 54%; }
.at-p5 { left: 88%; top: 42%; }
.at-centre { left: 50%; top: calc((100% - var(--sheet-max)) / 2); }  /* middle of the map area the sheet can never cover */
.map:has(> .sheet) .at-user { top: calc((100% - var(--sheet-max)) / 2); }  /* check-location sheets: same rule, so the pin and its accuracy circle stay in view */
.map:has(> .sheet) .at-user-shadow { top: calc((100% - var(--sheet-max)) / 2 + var(--space-2)); }
.at-user-shadow { left: 50%; top: 47.5%; }

/* ---------- Desktop two-pane (≥ 1024 px) ---------- */
.desktop { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.desktop-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-5); min-height: calc(var(--topbar-height) + 4px); border-bottom: var(--rule) solid var(--divider); }
.desktop-header .date { flex-direction: row; gap: var(--space-2); }
.desktop-body { display: flex; flex: 1; min-height: 0; flex-wrap: wrap; }
.desktop-pane { flex: 0 0 var(--desktop-pane); max-width: 100%; display: flex; flex-direction: column; overflow-y: auto; border-right: var(--rule) solid var(--divider); padding-top: var(--space-4); }
.desktop-map { flex: 999 1 calc(var(--desktop-pane) + var(--space-7)); min-width: 0; display: flex; }
.desktop-map .map { border-top: 0; }
.float-detail { right: var(--space-5); bottom: var(--space-7); width: var(--float-w); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.map-float .attribution, .card .attribution { padding: 0; }
.map-float .site-link { margin: 0; }
.row-btn { display: block; width: 100%; border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; }
.row-btn[aria-pressed="true"] { background: var(--selected-bg); }

/* ---------- Review index (design/html/index.html only — not shipped) ---------- */
.index-head { padding: var(--space-2) var(--gutter) var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.index-group { padding: var(--space-4) 0 0; }
.index-group .h2 { padding: 0 var(--gutter) var(--space-2); }
.index-list { margin: 0; padding: 0; list-style: none; }
.index-list > li { border-top: var(--rule) solid var(--divider); }
.index-list > li:last-child { border-bottom: var(--rule) solid var(--divider); }
.index-link { display: flex; flex-direction: column; gap: 2px; min-height: calc(var(--tap) + var(--space-3)); justify-content: center; padding: var(--space-2) var(--gutter); text-decoration: none; color: var(--text-primary); }
.index-name { font-weight: var(--fw-semibold); }
.index-file { font-size: var(--fs-small); color: var(--text-secondary); overflow-wrap: anywhere; }

/* ---------- Export 14 (appended; existing tokens only) ---------- */

/* Links to the "How it works" page, only where the app talks about location.
   hrefs are placeholders (#how-your-location-is-used, #how-it-works); the app fills them from config. */
.privacy-body { display: flex; flex-direction: column; align-items: flex-start; }
.privacy-link { min-height: var(--tap); display: inline-flex; align-items: center; color: var(--text-primary); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; }
.privacy-box .privacy-link { margin-top: var(--space-1); }
.privacy .privacy-link { margin-bottom: calc(-1 * var(--space-2)); }
.how-it-works { padding: 0 var(--gutter) var(--space-6); font-size: var(--fs-small); }
.how-it-works a { min-height: var(--tap); display: inline-flex; align-items: center; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }  /* quiet: secondary text, regular weight */
.privacy + .how-it-works { margin-top: calc(-1 * var(--space-5)); }

/* Choose your area: one native dropdown for the 26 areas. The phone's own picker opens on tap
   (iOS wheel, Android list), so the sheet stays short and the map and pin stay in view. */
.area-field { display: flex; flex-direction: column; gap: var(--space-1); }
.area-label { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--text-primary); }
.area-select-wrap { position: relative; display: block; }
.area-select { appearance: none; -webkit-appearance: none; width: 100%; min-height: var(--tap); padding: 0 calc(var(--space-4) + var(--icon-m)) 0 var(--space-3);
  border: var(--rule) solid var(--text-secondary); border-radius: var(--radius-s); background: var(--bg); color: var(--text-primary);
  font: inherit; font-size: var(--fs-body); cursor: pointer; }
.area-select-wrap::after { content: ""; position: absolute; right: var(--space-4); top: 50%; width: var(--space-2); height: var(--space-2);
  border-right: calc(2 * var(--rule)) solid var(--text-primary); border-bottom: calc(2 * var(--rule)) solid var(--text-primary);
  transform: translateY(-70%) rotate(45deg); pointer-events: none; }  /* chevron drawn in CSS, so no image and no hard-coded colour */

/* Map stacking: the map layer (OneMap tiles, Leaflet panes) stays below the floating controls. */
.map { isolation: isolate; font: inherit; }
.map > .map-float, .map > .locate-btn, .map > .map-attribution { z-index: 1000; }

/* Map place card, compact by default: name (links to the detail page), minutes chip, expand toggle.
   The toggle shows .place-card-more (the app removes [hidden] and sets aria-expanded="true"). */
.place-card--compact { padding: var(--space-2) var(--space-2) var(--space-3) var(--space-4); gap: var(--space-2); }
.place-card-row { display: flex; align-items: center; gap: var(--space-2); }
.place-card-name { flex: 1; min-width: 0; min-height: var(--tap); display: flex; align-items: center; font-weight: var(--fw-semibold); color: var(--text-primary); line-height: var(--lh-tight); text-decoration: underline; text-decoration-thickness: var(--rule); text-underline-offset: 3px; overflow-wrap: anywhere; }
.place-card-row .pin-chip { flex: none; box-shadow: none; }
.place-card-toggle { flex: none; border-color: transparent; }
.place-card-toggle svg { transition: transform var(--duration-fast); }
.place-card-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.place-card-more { display: flex; flex-direction: column; gap: var(--space-2); padding-right: var(--space-2); }
.place-card-more[hidden] { display: none; }
.place-card--compact > .attribution { padding-right: var(--space-2); }
/* Short phones: the map's minimum height (10 × --panel-icon) pushed the page past the screen on map-view,
   so the place card sat below the fold. Below 760 px tall the map may shrink to fit the screen instead. */
@media (max-height: 759px) { .map { min-height: calc(var(--panel-icon) * 6); } }
/* Closed place card: a quiet hint in place of the attribution line (owner's canvas edit). */
.place-card-hint { font-size: var(--fs-attribution); color: var(--text-muted); text-align: right; padding-right: var(--space-2); line-height: var(--lh-body); }
/* Map, opened place card: the MUIS attribution is centred (owner's canvas edit). */
.place-card--compact > .attribution { text-align: center; padding-right: var(--space-2); }

/* ---------- Travelling button (accepted 24 Oct; replaces the 4-button mode row) ---------- */
/* ---------- List: one row for Nearby + count, Travelling button, List/Map ---------- */
.travel-head { position: relative; flex-wrap: nowrap; align-items: center; gap: var(--space-2); }
.travel-head-text { flex: 1 1 auto; min-width: 0; }
.travel-head-text .sub { overflow-wrap: anywhere; }
.travel-head-controls { flex: none; display: flex; align-items: flex-start; gap: var(--space-2); }

/* Square tile, first in the row: the current mode's icon with its name inside.
   At rest: white with the same light border as the List/Map switch. Pressed or open: dark teal, white icon and label. */
.travel-btn { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: calc(var(--tap) + var(--space-2)); min-height: calc(var(--tap) + var(--space-3)); padding: var(--space-1);
  border: var(--rule) solid var(--divider); border-radius: var(--radius-pill); background: var(--bg); color: var(--text-primary);
  font: inherit; font-size: var(--fs-label); font-weight: var(--fw-semibold); line-height: var(--lh-tight); cursor: pointer; }
.travel-btn svg { width: var(--icon-l); height: var(--icon-l); }
.travel-btn:active, .travel-btn[aria-expanded="true"] { background: var(--text-primary); border-color: var(--text-primary); color: var(--color-secondary); }
.travel-btn[disabled] { cursor: not-allowed; background: var(--panel-bg); color: var(--text-muted); }

/* List / Map with the label under the icon (same .switch, stacked) */
.switch--stacked { border-radius: var(--radius-pill); }
.switch--stacked a { flex-direction: column; gap: 2px; min-width: calc(var(--tap) + var(--space-5)); min-height: calc(var(--tap) + var(--space-3)); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill); font-size: var(--fs-label); line-height: var(--lh-tight); }   /* equal-width tabs (owner's edit) */

/* ---------- Open: modal choice ---------- */
.screen--modal { position: relative; }                 /* the app uses position: fixed on the backdrop instead */
.travel-inert { display: contents; }                   /* wrapper that carries [inert] without changing layout */
.travel-backdrop { position: absolute; inset: 0; z-index: 1100;
  background: color-mix(in srgb, var(--bg) 35%, transparent);
  -webkit-backdrop-filter: blur(var(--space-1)); backdrop-filter: blur(var(--space-1)); }
@supports not ((backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0))) {
  .travel-backdrop { background: var(--scrim); }       /* no-blur fallback: the existing scrim */
}

/* List chooser: the button grows to the full row width, over Nearby and List/Map */
.travel-chooser { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--space-1); z-index: 1200;
  background: var(--bg); border-radius: var(--radius-pill); box-shadow: var(--shadow-float); padding: var(--space-1);
  transform-origin: 0 50%; animation: travel-grow var(--duration-fast) ease-out; }
.travel-modes, .travel-modes .mode { border-radius: var(--radius-pill); }
.travel-modes { margin: 0; }
.travel-modes .mode[aria-pressed="true"] { background: var(--text-primary); color: var(--color-secondary); box-shadow: none; }
@keyframes travel-grow { from { transform: scaleX(0.2); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .travel-chooser, .travel-pin-chooser { animation: none; }  /* --duration-fast is already 0 here; this is belt and braces */
}

/* ---------- Map: your location pin carries the mode icon ---------- */
.user-pin--mode { position: absolute; z-index: 2; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center;
  padding: 0; border: 0; background: none; cursor: pointer; color: var(--text-primary); }
.user-pin-head { width: var(--tap); height: var(--tap); border-radius: var(--radius-pill); display: grid; place-items: center;
  background: var(--bg); border: 3px solid var(--pin-user-fill); box-shadow: var(--shadow-float); }   /* white head, dark teal ring and icon */
.user-pin--mode:active .user-pin-head, .user-pin--mode[aria-expanded="true"] .user-pin-head { background: var(--pin-user-fill); color: var(--color-secondary); }
.user-pin-head svg { width: var(--icon-l); height: var(--icon-l); }
.user-pin-tail { width: 0; height: 0; border-left: var(--space-2) solid transparent; border-right: var(--space-2) solid transparent;
  border-top: var(--space-3) solid var(--pin-user-fill); margin-top: -2px; }   /* tip = your exact position */
.user-pin--mode:focus-visible { outline: none; }
.user-pin--mode:focus-visible .user-pin-head { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }

/* Map chooser: the pin head opens into the 4 modes, the tail still marks your position */
.screen--modal .map { isolation: auto; }              /* lets the chooser sit above the backdrop while open */
.travel-pin-chooser { position: absolute; z-index: 1200; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center;
  width: min(calc(100% - 2 * var(--gutter)), calc(var(--tap) * 7)); animation: travel-grow var(--duration-fast) ease-out; transform-origin: 50% 100%; }
.travel-pin-chooser .travel-modes { width: 100%; background: var(--bg); box-shadow: var(--shadow-float); }
.travel-pin-chooser .user-pin-tail { border-top-color: var(--bg); }

/* Desktop: the row sits in the list pane; the chooser covers that row only */
.desktop.screen--modal .travel-backdrop { position: fixed; }
.desktop-pane .travel-head { padding-top: var(--space-4); }

/* Map place card, closed: the arrival status and its basis instead of the minutes chip */
.place-card-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding-right: var(--space-2); }
.place-card-more .spare { font-size: var(--fs-small); }


/* Disabled List/Map tab: grey (greyscale of --text-muted), on the check screens and when the map couldn't load */
.switch a[aria-disabled="true"] { filter: grayscale(1); }

/* ---------- Owner rule (24 Oct): every disabled control dims to half opacity. Matches the app's owner stylesheet. ---------- */
[aria-disabled="true"], :disabled { opacity: 0.5; }


/* Owner (24 Oct): disabled List/Map tabs stay dark teal; the 0.5 opacity alone marks them. Overrides the muted colour and the grey filter above. */
.switch a[aria-disabled="true"] { color: var(--text-primary); filter: none; }


/* Links (24 Oct, owner): dark teal in every state. Zero extra specificity beyond one pseudo-class, so component rules (buttons, tabs, quiet links) still win. */
:where(a):is(:link, :visited, :hover, :active) { color: var(--text-primary); }


/* ---------- Map place card: one state, always open (owner's design, 24 Oct). Replaces the closed/opened card and the strip above the map. ---------- */
.place-card--map { padding-top: var(--space-3); gap: calc((var(--space-1) + var(--space-2)) / 2); }
.place-card--map .place-card-status { justify-content: space-between; }
.place-card--map .place-card-status .basis { margin-left: auto; text-align: right; }   /* right-aligned, also when it wraps under the badge */
.strip.place-card-prayer { margin: 0 var(--space-2) 0 0; padding: var(--space-1) var(--space-3); border-radius: var(--radius-s); }   /* next prayer, inside the card */
.place-card-prayer .strip-name, .place-card-prayer .strip-count { font-size: var(--fs-body); }
.place-card-facts { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }   /* distance | spare time, one row */
.place-card-divider { align-self: stretch; width: var(--rule); background: var(--divider); }


/* ---------- Standalone app (PWA), 24 Oct: offline states, install sheet, safe areas ---------- */
.offline-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--gutter); background: var(--text-primary); color: var(--color-secondary); font-size: var(--fs-small); line-height: var(--lh-tight); }
.offline-bar svg { width: var(--icon-m); height: var(--icon-m); flex: none; }
.offline-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-2) var(--gutter) 0; font-size: var(--fs-small); color: var(--text-secondary); }
.offline-note svg { width: var(--icon-m); height: var(--icon-m); flex: none; margin-top: 2px; }
.place-card .offline-note { margin: 0; padding-right: var(--space-2); }
p.saved-through { font-size: var(--fs-label); color: var(--text-secondary); }
.place-card > .saved-through { margin-top: calc(-1 * var(--space-1)); }

.screen--locked { height: 100dvh; overflow: hidden; }          /* static board: the page behind a sheet doesn't scroll. The app can use position: fixed instead. */
.install-scrim { position: absolute; inset: 0; z-index: 1100; background: var(--scrim); }
.install-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1200; display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-3) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom)); background: var(--bg);
  border-radius: var(--radius-l) var(--radius-l) 0 0; box-shadow: var(--shadow-float); }
.install-head { display: flex; align-items: center; gap: var(--space-4); }
.install-icon { width: calc(var(--tap) + var(--space-4)); height: calc(var(--tap) + var(--space-4)); border-radius: var(--radius-m); flex: none; }
.install-title { font-size: var(--fs-title); }
.install-body { color: var(--text-secondary); }
.install-actions { display: flex; flex-direction: column; gap: var(--space-2); }
.install-once { text-align: center; }
.install-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.install-steps li { display: flex; align-items: center; gap: var(--space-3); }
.install-step-n { width: calc(var(--space-6) - var(--space-1)); height: calc(var(--space-6) - var(--space-1)); border-radius: var(--radius-pill); flex: none;
  display: inline-flex; align-items: center; justify-content: center; background: var(--panel-bg); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.install-share-icon { display: inline-flex; vertical-align: middle; }
.install-share-icon svg { width: var(--icon-m); height: var(--icon-m); }

/* Installed (standalone): the app draws under nothing but the status bar and home indicator. With viewport-fit=cover these insets are non-zero; otherwise they are 0 and nothing moves. */
@media (display-mode: standalone) {
  .screen, .desktop { padding-top: env(safe-area-inset-top); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); }
}


/* Pin chooser tail offset (24 Oct). --travel-tail-x = where the tail tip sits, measured from the chooser's left edge.
   Default 50% (centred). When the chooser is shifted sideways to stay on screen, set it on .travel-pin-chooser so the tip still points at the pin,
   e.g. style="--travel-tail-x: 64px" or "--travel-tail-x: 20%". The open animation grows from the same point. */
.travel-pin-chooser { transform-origin: var(--travel-tail-x, 50%) 100%; }
.travel-pin-chooser > .user-pin-tail { align-self: flex-start; margin-left: calc(var(--travel-tail-x, 50%) - var(--space-2)); }


/* Pin chooser flipped below the pin (24 Oct): when the pin is too near the top of the map for the chooser to fit above it,
   add .travel-pin-chooser--below. The chooser hangs below the pin and the tail sits on its top edge, pointing up.
   --travel-tail-x works the same way in both placements. */
.travel-pin-chooser--below { flex-direction: column-reverse; transform: translate(-50%, 0); transform-origin: var(--travel-tail-x, 50%) 0; }
.travel-pin-chooser--below > .user-pin-tail { border-top: 0; border-bottom: var(--space-3) solid var(--bg); margin-top: 0; margin-bottom: -2px; }

/* SAMPLE positions for the static boards only. At runtime the app sets left/top (or right) and --travel-tail-x from the pin's screen position.
   Edge samples: the chooser is held one gutter from the map edge and the pin sits 48 px (--tap + --space-1) in from that edge. */
.at-user-edge-left { left: var(--gutter); top: 46%; transform: translate(0, -100%); --travel-tail-x: calc(var(--tap) + var(--space-1) - var(--gutter)); }
.at-user-edge-right { left: auto; right: var(--gutter); top: 46%; transform: translate(0, -100%); --travel-tail-x: calc(100% - (var(--tap) + var(--space-1) - var(--gutter))); }
.at-user-top { left: 50%; top: var(--space-6); }