/* Atlas map page. Warm near-black glass over the picture, cream type, one saffron accent. */
:root {
  --glass: rgba(24, 20, 17, .94); --glass-soft: rgba(24, 20, 17, .86); --line: rgba(243, 235, 221, .16); --line-2: rgba(243, 235, 221, .32);
  --cream: #f3ebdd; --muted: #c9bda9; --saffron: #e9a23b; --on-saffron: #1a140d; --lead: 24px;
  --f-title: "Cormorant SC", "Iowan Old Style", Georgia, serif; --f-sub: "Cormorant Garamond", Georgia, serif;
}
html, body { height: 100%; margin: 0; }
body.atlas { background: #15120f; color: var(--cream); font-family: var(--font-ui); overflow: hidden; overscroll-behavior: none; }
#app { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
#labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
button { font-family: inherit; }

/* labels: poster chips */
.lbl { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: opacity .25s ease; will-change: transform; font-size: var(--fs, 13px); }
.lbl.off { opacity: 0; pointer-events: none; } .lbl.off .chip { pointer-events: none; }
.lbl .chip { position: absolute; left: 0; top: 0; transform: translate(calc(-50% + var(--ox, 0px)), calc(-100% + var(--oy, -29px))); pointer-events: auto; white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: .3em .7em .32em; border-radius: 3px; cursor: pointer;
  background: rgba(21, 18, 15, .88); color: var(--cream); border: 1px solid rgba(243, 235, 221, .28); font: 500 1em/1.15 var(--font-ui); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.chip .el { font-size: .82em; font-weight: 400; color: var(--muted); }
.lbl .lead { position: absolute; left: -.5px; top: 0; width: 1px; height: var(--ll, 29px); transform-origin: 0 0; transform: rotate(var(--la, 3.14159rad)); background: rgba(243, 235, 221, .75); }
.lbl .dot { position: absolute; left: -5px; top: -5px; width: 7px; height: 7px; border-radius: 50%; background: #fbfaf6; border: 1.5px solid #15120f; box-shadow: 0 0 0 1px rgba(243, 235, 221, .55); }
.lbl.ghost { opacity: .8; }                                    /* behind a ridge: dashed leader, hollow dot */
.lbl.ghost .lead { background: repeating-linear-gradient(to bottom, rgba(243, 235, 221, .85) 0 3px, transparent 3px 6px); }
.lbl.ghost .dot { background: transparent; border-color: #f3ebdd; box-shadow: none; }
.lbl .chip:hover, .lbl .chip:focus-visible { border-color: var(--cream); outline: none; }
.lbl .dot { pointer-events: none; }
.lbl.mini .chip { opacity: 0; pointer-events: none; } .lbl.mini .chip:focus-visible { opacity: 1; z-index: 3; }   /* declutter: dot only; the chip returns on keyboard focus */
.lbl.mini .lead { display: none; } .lbl.mini .dot { pointer-events: auto; cursor: pointer; width: 6px; height: 6px; left: -4.5px; top: -4.5px; opacity: .92; }
.lbl.mini .dot::after { content: ""; position: absolute; inset: -16px; }
.lbl.mini.ghost .dot { opacity: .8; }
.lbl .chip:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
.lbl.sel { z-index: 2; } .lbl.sel .chip .kic { color: var(--on-saffron); }
.lbl.sel .chip { background: var(--saffron); color: var(--on-saffron); border-color: var(--saffron); } .lbl.sel .chip .el { color: #3a2a12; }

/* title cartouche */
.cartouche { position: fixed; left: clamp(14px, 3vw, 44px); top: clamp(10px, 2.2vw, 30px); pointer-events: none; text-shadow: 0 2px 14px rgba(21, 18, 15, .65), 0 0 2px rgba(21, 18, 15, .5); max-width: calc(100vw - 28px); }
.cartouche::before { content: ""; position: absolute; inset: -30px -90px -30px -50px; z-index: -1; background: radial-gradient(closest-side ellipse at 45% 55%, rgba(20, 14, 8, .8), rgba(20, 14, 8, .5) 60%, transparent 100%); }
.cartouche h1 { margin: 0; font: 600 clamp(1.6rem, 1rem + 3.2vw, 3.7rem)/1 var(--f-title); letter-spacing: .07em; color: var(--cream); }
.cartouche h1 .w { margin-right: .3em; } .cartouche h1 b { font-weight: 700; font-size: 1.2em; }
.cartouche .sub { margin: .5em 0 0; display: flex; align-items: center; gap: .8em; color: var(--muted); font: italic 500 clamp(.95rem, .6rem + 1.1vw, 1.7rem)/1.2 var(--f-sub); }
.cartouche .sub em { white-space: nowrap; flex: none; color: #f3ebdd; text-shadow: 0 0 6px rgba(20, 14, 8, .95), 0 1px 3px rgba(20, 14, 8, .95), 0 0 16px rgba(20, 14, 8, .8); }
.cartouche .rule { flex: 0 1 3.4em; height: 1px; background: rgba(243, 235, 221, .6); }

/* top right: search, icon buttons, light pill */
.topright { position: fixed; top: clamp(10px, 2vw, 24px); right: clamp(10px, 2vw, 24px); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; z-index: 3; }
.trow { display: flex; gap: 8px; align-items: center; }
.search { position: relative; width: min(340px, calc(100vw - 130px)); display: flex; align-items: center; background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; height: 40px; gap: 8px; color: var(--muted); }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--cream); font: 14px var(--font-ui); } .search input::placeholder { color: var(--muted); }
.search:focus-within { border-color: var(--saffron); }
.ic { width: 20px; height: 20px; }
.results { position: absolute; top: 46px; left: 0; right: 0; margin: 0; padding: 6px; list-style: none; background: var(--glass); border: 1px solid var(--line); border-radius: 10px; }
.results[hidden], .settings[hidden], .about[hidden] { display: none; }
.results button { width: 100%; display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; background: none; border: 0; border-radius: 6px; color: var(--cream); font-size: 14px; cursor: pointer; text-align: left; }
.results button:hover, .results button:focus-visible { background: rgba(233, 162, 59, .18); outline: none; } .results small { color: var(--muted); text-transform: capitalize; }
.results .empty { padding: 10px; color: var(--muted); font-size: 13px; }
.ibtn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); color: var(--cream); display: grid; place-items: center; padding: 0; cursor: pointer; }
.ibtn:hover, .ibtn[aria-expanded=true] { border-color: var(--saffron); color: var(--saffron); }
.light { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--glass); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }
.light .lbl-k { font: 600 11px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.light input { width: 150px; accent-color: var(--saffron); } .light .lt { min-width: 138px; color: var(--cream); }
.settings, .about { width: min(320px, calc(100vw - 20px)); padding: 12px 14px 8px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); font-size: 13px; box-sizing: border-box; }
.about p { margin: 0 0 6px; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.settings .row { display: grid; grid-template-columns: 1fr 1.2fr 3ch; align-items: center; gap: 10px; margin: 0 0 9px; color: var(--muted); }
.settings .row.chk { display: flex; gap: 8px; margin-bottom: 6px; } .settings output { font-variant-numeric: tabular-nums; text-align: right; color: var(--cream); }
.settings input[type=range] { width: 100%; accent-color: var(--saffron); } .settings input[type=checkbox] { accent-color: var(--saffron); }
.settings .mob-only { display: none; }
.settings .tier { margin: 8px 0 2px; font-size: 11px; color: #a89c82; }

/* explore dock */
.dockwrap { display: contents; }
.dock { position: fixed; left: 50%; transform: translateX(-50%); bottom: clamp(34px, 5vh, 52px); display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 16px; background: var(--glass); border: 1px solid var(--line); border-radius: 999px; z-index: 2; max-width: calc(100vw - 150px); overflow-x: auto; scrollbar-width: none; }
.dock .dk { font: 600 11px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.dock button { white-space: nowrap; padding: 8px 14px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--cream); font: 500 13px var(--font-ui); cursor: pointer; }
.dock button:hover { border-color: var(--line-2); } .dock button.sel { background: var(--saffron); color: var(--on-saffron); }

/* bottom right: compass, zoom, home */
.tools { position: fixed; right: clamp(10px, 2vw, 24px); bottom: clamp(34px, 5vh, 52px); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 2; }
.mbtn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); color: var(--cream); font: 500 20px/1 var(--font-ui); cursor: pointer; display: grid; place-items: center; padding: 0; }
.zoomgrp { display: flex; flex-direction: column; border-radius: 20px; background: var(--glass); border: 1px solid var(--line); } .zoomgrp .mbtn { background: none; border: 0; }
.dock button:focus-visible, .results button:focus-visible, .edge-prompt:focus-visible, .pn-close:focus-visible, .modal-actions button:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
.ibtn:active, .mbtn:active, .dock button:active { transform: scale(.96); } .ibtn:disabled, .mbtn:disabled { opacity: .5; cursor: default; }
.mbtn:hover { color: var(--saffron); } .mbtn:focus-visible, .compass:focus-visible, .ibtn:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
.compass { width: 56px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; } .compass svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }

.attrib { position: fixed; left: 0; right: 0; bottom: 0; padding: 5px clamp(12px, 3vw, 44px); font-size: 11px; line-height: 1.35; color: rgba(243, 235, 221, .85);
  background: linear-gradient(transparent, rgba(21, 18, 15, .62)); pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.loading { position: fixed; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; gap: 14px; background: #15120f; color: var(--cream); transition: opacity .6s ease; }
.loading.gone { opacity: 0; pointer-events: none; }
.ld-t { margin: 0; font: 600 2.2rem var(--f-title); letter-spacing: .08em; }
.ld-bar { width: min(280px, 70vw); height: 3px; background: rgba(243, 235, 221, .2); } .ld-bar i { display: block; height: 100%; width: 0; background: var(--saffron); transition: width .3s ease; }
.ld-l { margin: 0; font-size: 13px; color: var(--muted); }
.fps { position: fixed; left: 8px; top: 150px; margin: 0; padding: 6px 8px; font: 11px/1.4 ui-monospace, Consolas, monospace; background: rgba(0, 0, 0, .65); color: #9f9; border-radius: 4px; pointer-events: none; z-index: 9; }

/* place sheet */
.panel { position: fixed; z-index: 5; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--glass); backdrop-filter: blur(14px); color: var(--cream); border-left: 1px solid var(--line);
  box-shadow: -14px 0 40px rgba(0, 0, 0, .45); transform: translateX(102%); transition: transform .26s var(--ease); display: flex; flex-direction: column; outline: none; }
.panel[hidden] { display: none; } .panel.open { transform: none; }
.pn-close { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(24, 20, 17, .72); color: var(--cream); font-size: 24px; line-height: 1; cursor: pointer; z-index: 3; transition: border-color .15s, background .15s; }
.pn-close:hover { border-color: var(--saffron); color: var(--saffron); } .pn-close:active { background: rgba(233, 162, 59, .2); }
.pn-grab { display: none; }   /* phone only: the bottom sheet's drag handle */
.pn-body { overflow-y: auto; overscroll-behavior: contain; flex: 1; padding-bottom: 40px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.panel button:focus-visible, .panel a:focus-visible, .panel summary:focus-visible, .panel .pn-track:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
.panel .pn-track:focus-visible { outline-offset: -3px; }

/* hero: photo carousel; no photo = no hero at all (the sheet starts at the kind line) */
.pn-hero { position: relative; margin: 0; background: #2a241c; }
.pn-stage { position: relative; height: 236px; overflow: hidden; }
.pn-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x; overscroll-behavior-x: contain; }
.pn-track::-webkit-scrollbar { display: none; }
.pn-slide { position: relative; flex: 0 0 100%; height: 100%; padding: 0; border: 0; background: #2a241c; scroll-snap-align: start; scroll-snap-stop: always; cursor: zoom-in; display: block; }
.pn-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .3s ease; user-select: none; -webkit-user-drag: none; }
.pn-slide.loading img { opacity: 0; }
.pn-slide.loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, #2a241c 30%, #3a3227 50%, #2a241c 70%); background-size: 200% 100%; animation: pn-shimmer 1.3s linear infinite; }
.pn-slide.broken { cursor: default; background: #2a241c; } .pn-slide.broken img { display: none; }
.pn-slide.broken::after { content: "Photo unavailable"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font: 500 13px var(--font-ui); }
@keyframes pn-shimmer { to { background-position: -200% 0; } }
.pn-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(24, 20, 17, .72); color: var(--cream);
  display: grid; place-items: center; padding: 0; cursor: pointer; opacity: 0; transition: opacity .18s, border-color .15s; z-index: 2; }
.pn-nav svg { width: 20px; height: 20px; } .pn-nav.prev { left: 10px; } .pn-nav.next { right: 10px; }
.pn-hero:hover .pn-nav, .pn-nav:focus-visible { opacity: 1; } .pn-nav:hover { border-color: var(--saffron); color: var(--saffron); }
.pn-count { position: absolute; left: 12px; top: 14px; padding: 2px 9px; border-radius: 999px; background: rgba(24, 20, 17, .72); font: 600 11.5px var(--font-ui); letter-spacing: .04em; font-variant-numeric: tabular-nums; z-index: 2; }
.pn-dots { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; z-index: 2; pointer-events: none; }
.pn-dots button { pointer-events: auto; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.pn-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(243, 235, 221, .5); box-shadow: 0 0 0 1px rgba(21, 18, 15, .5); transition: transform .15s, background .15s; }
.pn-dots button[aria-current] i { background: var(--saffron); transform: scale(1.3); } .pn-dots button:hover i { background: var(--cream); }
.pn-dots button:focus-visible { outline: 2px solid var(--saffron); outline-offset: -4px; border-radius: 50%; }
.pn-hero figcaption { padding: 8px 22px 10px; background: #1d1915; border-bottom: 1px solid var(--line); }
.pn-cap { margin: 0 0 4px; font: italic 400 13.5px/1.45 var(--font-text); color: var(--cream); } .pn-cap[hidden] { display: none; }
.pn-credit { display: block; font: 400 11.5px/1.4 var(--font-ui); color: var(--muted); }
.pn-credit a { color: var(--saffron); }

.pn-head, .pn-body > section { padding: 0 22px; }
.pn-kind { margin: 18px 0 6px; font: 600 11.5px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--saffron); }
.panel.no-hero .pn-kind { margin-top: 22px; padding-right: 48px; }
.pn-title { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0 14px; }
.pn-name { margin: 0; min-width: 0; font: 600 38px/1.05 var(--f-title); letter-spacing: .02em; overflow-wrap: anywhere; }
.pn-ur { margin-left: auto; font: 1.45rem/2.1 "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Gulzar", "Noto Naskh Arabic", "Segoe UI", Tahoma, serif; color: var(--muted); padding-block: .1em; unicode-bidi: isolate; }
.pn-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; padding: 10px 0; border-block: 1px solid var(--line); }
.pn-stats dt { font: 600 10.5px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .pn-stats dd { margin: 2px 0 0; font: 500 14px var(--font-ui); text-transform: capitalize; overflow-wrap: anywhere; }
.pn-sum { margin: 0 0 16px; font: 400 16px/1.55 var(--font-text); color: var(--cream); }
.pn-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pn-actions button { min-height: 40px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--cream); font: 500 13px var(--font-ui); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.pn-actions button:hover { border-color: var(--saffron); color: var(--saffron); } .pn-actions button:active { background: rgba(233, 162, 59, .18); }
.pn-actions .primary { background: var(--saffron); border-color: var(--saffron); color: var(--on-saffron); font-weight: 600; } .pn-actions .primary:hover { background: #f3b04f; border-color: #f3b04f; color: var(--on-saffron); } .pn-actions .primary:active { background: #d4902f; }
.panel h3 { margin: 26px 0 10px; font: 600 11.5px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.panel section > p { margin: .6em 0; font: 400 .95rem/1.55 var(--font-text); }
.pn-empty p { color: var(--muted); font-style: italic; }
.pn-tl { list-style: none; margin: 0; padding: 0; }
.pn-tl li { position: relative; display: grid; grid-template-columns: 5.2em 1fr; gap: 0 14px; padding: 0 0 16px 18px; border-left: 2px solid rgba(233, 162, 59, .45); margin-left: 4px; }
.pn-tl li:last-child { border-left-color: transparent; padding-bottom: 0; }
.pn-tl li::before { content: ""; position: absolute; left: -7px; top: .35em; width: 10px; height: 10px; border-radius: 50%; background: var(--saffron); border: 2px solid #1c1813; }
.pn-tl .d { font: 600 12.5px/1.5 var(--font-ui); color: var(--saffron); font-variant-numeric: tabular-nums; padding-top: .1em; } .pn-tl .ev { font: 400 .95rem/1.5 var(--font-text); }
.pn-facts { list-style: none; margin: 0; padding: 0; counter-reset: fact; }
.pn-facts li { counter-increment: fact; position: relative; margin: 0; padding: 11px 0 11px 28px; border-top: 1px solid var(--line); font: 400 .95rem/1.5 var(--font-text); }
.pn-facts li:last-child { border-bottom: 1px solid var(--line); }
.pn-facts li::before { content: counter(fact); position: absolute; left: 0; top: 13px; width: 18px; font: 600 11px/1.9 var(--font-ui); color: var(--saffron); text-align: left; font-variant-numeric: tabular-nums; }
.pn-facts li p { margin: 0; }
.sref { font: 600 .72em/0 var(--font-ui); margin-left: 3px; vertical-align: super; white-space: nowrap; }
.fq { display: inline-block; position: relative; margin-left: 6px; padding: 1px 8px; border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--muted); font: 500 11px/1.5 var(--font-ui); cursor: pointer; vertical-align: 1px; }
.fq::after { content: ""; position: absolute; inset: -11px -4px; } .fq:hover, .fq[aria-expanded=true] { border-color: var(--saffron); color: var(--saffron); }
.sref a { display: inline-block; min-width: 1.4em; padding: 0 .2em; margin: 0 -.05em; border: 0; border-radius: 3px; background: none; color: var(--saffron); font: inherit; text-decoration: none; cursor: pointer; line-height: 1.2; position: relative; }
.sref a::after { content: ""; position: absolute; inset: -12px -6px; }       /* a thumb-sized hit area around the tiny mark */
.sref a:hover { background: rgba(233, 162, 59, .2); }
.fq-body { margin: 8px 0 2px; padding: 8px 0 8px 12px; border-left: 2px solid var(--line-2); font: italic .9rem/1.5 var(--font-text); color: var(--muted); } .fq-body[hidden] { display: none; }
.fq-body p { margin: 0; } .fq-body cite { display: block; margin-top: 4px; font: normal 11.5px var(--font-ui); }
.panel a { color: var(--saffron); } .panel a:hover { color: #f3b04f; }
.panel details { margin-top: 4px; } .panel summary { cursor: pointer; font: 12px var(--font-ui); color: var(--muted); }
.panel blockquote { margin: 6px 0 0; padding: 6px 0 6px 12px; border-left: 2px solid var(--line-2); font: italic .9rem/1.5 var(--font-text); color: var(--muted); }

/* photo viewer */
.pn-viewer { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: rgba(12, 10, 8, .95); color: var(--cream); animation: pv-in .18s ease; }
@keyframes pv-in { from { opacity: 0; } }
.pv-close { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(24, 20, 17, .8); color: var(--cream); font-size: 26px; line-height: 1; cursor: pointer; z-index: 2; }
.pv-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 56px 12px 8px; }
.pv-stage img { flex: 0 1 auto; min-width: 0; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.pv-nav { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(24, 20, 17, .8); color: var(--cream); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 0 3px; }
.pv-close:hover, .pv-nav:hover { border-color: var(--saffron); color: var(--saffron); }
.pn-viewer button:focus-visible, .pn-viewer a:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
.pv-meta { max-width: 720px; width: 100%; margin: 0 auto; padding: 8px 20px max(18px, env(safe-area-inset-bottom)); box-sizing: border-box; text-align: center; }
.pv-cap { margin: 0 0 4px; font: italic 400 16px/1.45 var(--font-text); } .pv-cap[hidden] { display: none; }
.pv-credit { margin: 0; font: 400 12px/1.4 var(--font-ui); color: var(--muted); } .pv-credit a { color: var(--saffron); } .pv-count { font: 500 12px var(--font-ui); color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .pv-stage { padding-top: 60px; } .pv-nav { position: absolute; bottom: 120px; z-index: 2; } .pv-nav.prev { left: 10px; } .pv-nav.next { right: 10px; } }

body.has-panel .topright { right: calc(440px + 24px); }
body.has-panel .tools { right: calc(440px + clamp(10px, 2vw, 24px)); }   /* the sheet covers the right 440 px: keep the dock and the compass column in the free map */
body.has-panel .dock, body.has-panel .day-pill, body.has-panel .edge-prompt { left: calc((100vw - 440px) / 2); } body.has-panel .dock { max-width: calc(100vw - 440px - 170px); }
@media (max-width: 700px) {
  body.has-panel .topright { right: 10px; } body.has-panel .tools { right: 10px; } body.has-panel .dock { left: auto; max-width: none; } body.has-panel .day-pill, body.has-panel .edge-prompt { left: 50%; }
  .panel { top: auto; width: 100vw; max-height: 72vh; border-left: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; transform: translateY(102%);
    transition: transform .26s var(--ease), max-height .3s var(--ease); }
  .panel.open { transform: none; } .panel.open.peek { max-height: 46vh; }   /* the peek card: kind, name, stats, actions */
  .pn-stage { height: 168px; } .panel.peek .pn-stage { height: 124px; } .pn-nav { opacity: 1; width: 44px; height: 44px; } .pn-hero figcaption { padding: 6px 16px 8px; }
  .panel.peek .pn-cap { display: none; } .panel.peek .pn-credit { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pn-head, .pn-body > section { padding: 0 16px; } .pn-name { font-size: 30px; } .pn-close { width: 44px; height: 44px; top: 6px; }
  .panel.no-hero .pn-kind { margin-top: 4px; }
  .pn-grab { display: grid; place-items: center; width: 100%; min-height: 32px; padding: 13px 0 9px; background: none; border: 0; cursor: pointer; touch-action: none; }
  .pn-grab i { width: 38px; height: 4px; border-radius: 2px; background: var(--line-2); }
  .pn-grab:focus-visible i { background: var(--saffron); }
  .pn-head { display: flex; flex-direction: column; }                        /* the action row rides above the fold */
  .pn-kind { order: 1; margin: 12px 0 4px; } .pn-title { order: 2; } .sheet .pn-head .pn-name { order: 2; }   /* kind line above the title, as on desktop */
  .pn-actions { order: 3; margin: 12px 0 2px; } .pn-actions button { min-height: 44px; padding: 10px 16px; }
  .pn-stats { order: 4; } .pn-sum { order: 5; } .pn-listen { order: 6; }
  .topright { left: 10px; align-items: stretch; top: 76px; } .search { width: auto; flex: 1; } .light input { width: 100px; } .light .lt { min-width: 0; }
  .tools { bottom: 100px; } .mbtn, .ibtn { width: 44px; height: 44px; } .zoomgrp { border-radius: 22px; }
  .dockwrap { display: block; position: fixed; left: 10px; right: 10px; bottom: 30px; z-index: 2; pointer-events: none; }
  .dockwrap .dock { position: static; transform: none; max-width: none; pointer-events: auto; flex-wrap: nowrap; justify-content: flex-start; border-radius: 999px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 5px 6px 5px 12px; }
  .dockwrap::after { content: ""; position: absolute; top: 1px; bottom: 1px; right: 0; width: 34px; border-radius: 0 999px 999px 0;
    background: linear-gradient(90deg, rgba(24, 20, 17, 0), var(--glass) 82%); pointer-events: none; }   /* more this way */
  .dockwrap.end::after { display: none; }
  .dock .dk { display: none; } .dock button { flex: none; scroll-snap-align: start; min-height: 44px; padding: 10px 14px; }
  .light { display: none; }
  .settings .mob-only { display: grid; } .settings .desk-only { display: none; }
  .settings .stp-row { grid-template-columns: 1fr auto; align-items: center; margin-bottom: 8px; color: var(--muted); }
  .settings .stp-grp { display: flex; align-items: center; gap: 8px; }
  .settings .stp { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: transparent; color: var(--cream);
    font: 500 20px/1 var(--font-ui); cursor: pointer; display: grid; place-items: center; padding: 0; }
  .settings .stp:hover, .settings .stp:active { border-color: var(--saffron); color: var(--saffron); }
  .stp-row output { min-width: 5ch; text-align: center; color: var(--cream); font-variant-numeric: tabular-nums; }
  .settings .chk { min-height: 44px; align-items: center; } .settings .chk span { font-size: 14px; } .settings .chk input { width: 18px; height: 18px; }
  .cartouche h1 { font-size: 1.32rem; cursor: pointer; pointer-events: auto; } .cartouche h1:focus-visible { outline: 2px solid var(--saffron); outline-offset: 4px; }
  .cartouche .sub { display: none; } body.cart-open .cartouche .sub { display: flex; margin: .35em 0 0; }
  .ibtn.layers-btn { display: none; } .light .lbl-k { display: none; }
}
@media (max-width: 520px) {      /* icon-only toolbar: name stays in aria-label and the tooltip; nothing wraps or clips */
  .topright { left: 10px; right: 10px; } body.has-panel .topright { right: 10px; }
  .settings, .about { width: auto; } .about { max-height: 24vh; overflow-y: auto; }   /* full width over the compass column, never past the screen */
  .ibtn.off-btn { width: 44px; padding: 0; justify-content: center; } .off-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .trow { gap: 6px; } .trow .search { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .panel, .lbl, .loading, .pn-slide img, .pn-nav, .pn-dots i { transition: none; } .pn-slide.loading::after, .pn-viewer { animation: none; } .pn-track { scroll-behavior: auto; }
}

/* neighbour switch + edge prompt */
.dock .nb { border: 1px dashed var(--line-2); margin-left: 6px; color: var(--saffron); }
.dock .nb:hover { border-color: var(--saffron); }
.edge-prompt { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(clamp(34px, 5vh, 52px) + 62px); z-index: 3; padding: 9px 18px; border-radius: 999px;
  background: var(--saffron); color: var(--on-saffron); border: 0; font: 600 13px var(--font-ui); cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, .4); }
.edge-prompt[hidden] { display: none; }
.chip .kic { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; color: var(--saffron); }

/* back link, offline button, plan sheet, drawn day, offline dialog */
.cartouche .back { display: inline-block; margin: 0 0 .55em; pointer-events: auto; color: var(--cream); font: 500 13px var(--font-ui); letter-spacing: .02em; text-decoration: none; padding: 4px 11px 4px 9px;
  border: 1px solid var(--line-2); border-radius: 999px; background: rgba(21, 18, 15, .6); text-shadow: none; }
.cartouche .back { position: relative; } .cartouche .back::after { content: ""; position: absolute; inset: -9px -2px; }   /* 44 px hit area, same look */
.cartouche .back:hover, .cartouche .back:focus-visible { border-color: var(--saffron); color: var(--saffron); outline: none; }
.sheet { z-index: 6; } .sheet .pn-head { padding-top: 22px; } .sheet .pn-name { font-size: 30px; }
.sheet-body { overflow-y: auto; flex: 1; padding: 0 22px 40px; font: 400 14px/1.5 var(--font-ui); }
.sheet .vintro { margin: 0 0 12px; color: var(--muted); font: 400 14px/1.5 var(--font-ui); }
.sheet .plan-form { display: grid; gap: 8px; }
.sheet textarea { font: 400 15px/1.5 var(--font-text); color: var(--cream); background: rgba(243, 235, 221, .07); border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 12px; resize: vertical; }
.sheet textarea:focus-visible, .sheet select:focus-visible { outline: 2px solid var(--saffron); outline-offset: 1px; }
.sheet .plan-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.sheet select { font: inherit; color: var(--cream); background: #241f19; border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 6px; }
.sheet .btn { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--cream); font: 500 13px var(--font-ui); cursor: pointer; }
.sheet .btn-primary { background: var(--saffron); border-color: var(--saffron); color: var(--on-saffron); font-weight: 600; } .sheet .btn:disabled { opacity: .6; cursor: progress; }
.sheet .ask-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.sheet .chip { border: 1px solid var(--line-2); background: transparent; color: var(--cream); border-radius: 999px; padding: 5px 12px; font: 400 12.5px var(--font-ui); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.sheet .chip:hover, .sheet .chip:focus-visible { border-color: var(--saffron); color: var(--saffron); outline: none; } .sheet .chip .ic { width: 16px; height: 16px; }
.sheet svg.ic { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sheet .plan-out { display: grid; gap: 14px; margin-top: 14px; } .sheet .plan-wait { color: var(--muted); }
.sheet .plan-title { margin: 0; font: 600 24px/1.1 var(--f-title); letter-spacing: .02em; } .sheet .plan-sum { margin: 0; font: 400 15px/1.55 var(--font-text); }
.sheet .plan-day { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.sheet .plan-day-head { display: flex; align-items: center; gap: 10px; } .sheet .plan-day h4 { margin: 0; font: 600 15px var(--font-ui); }
.sheet .plan-day-head .n { width: 24px; height: 24px; border-radius: 50%; background: var(--saffron); color: var(--on-saffron); display: grid; place-items: center; font: 700 12px var(--font-ui); flex: none; }
.sheet .plan-stats { margin: 0; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.sheet .plan-stops { margin: 0; padding-left: 20px; display: grid; gap: 3px; } .sheet .plan-stops .leg { display: block; color: var(--muted); font-size: 12px; }
.sheet .plan-notes { margin: 0; font: 400 14px/1.55 var(--font-text); }
.sheet .plan-warn { margin: 0; font-size: 13px; background: rgba(233, 162, 59, .14); color: #f0c98a; border: 1px solid rgba(233, 162, 59, .45); padding: 6px 10px; border-radius: 8px; }   /* no left-border cards (design system) */
.sheet .mode { color: var(--muted); font-size: 12px; margin: 0; }
.pn-listen { margin-top: 12px; }
.pn-actions .listen-btn:disabled { opacity: .55; cursor: not-allowed; border-style: dashed; }
.listen-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .listen-row b { display: block; font: 600 14px var(--font-ui); } .listen-sub { font-size: 12px; color: var(--muted); }
.listen .icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--saffron); background: var(--saffron); color: var(--on-saffron); display: grid; place-items: center; cursor: pointer; padding: 0; }
.listen .icon-btn .ic { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; }
.listen .segs { display: flex; gap: 4px; margin-left: auto; } .listen .seg { border: 1px solid var(--line-2); background: transparent; color: var(--cream); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; } .listen .seg[aria-pressed=true] { border-color: var(--saffron); color: var(--saffron); }
.listen-text p { font: 400 .92rem/1.55 var(--font-text); }
.day-markers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.day-mk { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: opacity .2s; will-change: transform; }
.day-mk span { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; background: var(--saffron); color: var(--on-saffron); border: 2px solid #15120f; box-shadow: 0 2px 8px rgba(0, 0, 0, .55), 0 0 0 1px rgba(243, 235, 221, .6);
  display: grid; place-items: center; font: 700 13px var(--font-ui); }
.day-pill { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(clamp(34px, 5vh, 52px) + 62px); z-index: 4; display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 16px; border-radius: 999px; background: var(--glass); border: 1px solid var(--saffron); color: var(--cream); font: 500 13px var(--font-ui); max-width: calc(100vw - 28px); }
.day-pill button { position: relative; } .day-pill button::after { content: ""; position: absolute; inset: -9px; }   /* 44 px hit area */
.day-pill[hidden] { display: none; } .day-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-pill button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--cream); cursor: pointer; font-size: 16px; line-height: 1; padding: 0; }
.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(10, 8, 6, .55); padding: 16px; }
.modal-card { width: min(440px, 100%); background: var(--glass); border: 1px solid var(--line-2); border-radius: 14px; padding: 22px 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.modal-card h2 { margin: 0 0 8px; font: 600 26px/1.1 var(--f-title); letter-spacing: .02em; } .modal-card p { margin: 8px 0; font: 400 14px/1.5 var(--font-text); color: var(--muted); }
.modal-card .ofl-sizes { color: var(--cream); font: 600 18px var(--font-ui); margin: 14px 0 8px; }
.modal-card .chk { display: flex; align-items: center; gap: 10px; font: 500 14px var(--font-ui); cursor: pointer; } .modal-card .chk input { width: 18px; height: 18px; accent-color: var(--saffron); }
.ofl-bar { height: 6px; border-radius: 3px; background: rgba(243, 235, 221, .15); margin: 14px 0 4px; overflow: hidden; } .ofl-bar[hidden] { display: none; } .ofl-bar i { display: block; height: 100%; width: 0; background: var(--saffron); transition: width .2s; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.modal-actions button { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--cream); font: 500 13px var(--font-ui); cursor: pointer; }
.modal-actions .primary { background: var(--saffron); border-color: var(--saffron); color: var(--on-saffron); font-weight: 600; } .modal-actions button:disabled { opacity: .5; cursor: progress; }
#toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { background: var(--cream); color: var(--on-saffron); padding: 9px 16px; border-radius: 8px; font: 500 13px var(--font-ui); box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }

/* trip kit button and the in-browser day planner */
.ibtn.off-btn { width: auto; border-radius: 22px; padding: 0 14px 0 11px; display: inline-flex; gap: 6px; align-items: center; font: 500 13px var(--font-ui); }
.off-btn .ic { width: 18px; height: 18px; flex: none; }
.sheet .lp-stops { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.sheet .lp-stops li { display: flex; align-items: center; gap: 8px; }
.sheet .lp-stops .n { width: 24px; height: 24px; border-radius: 50%; background: var(--saffron); color: var(--on-saffron); display: grid; place-items: center; font: 700 12px var(--font-ui); flex: none; }
.sheet .lp-name { flex: 1; min-width: 0; font: 500 15px var(--font-ui); overflow-wrap: anywhere; }
.sheet .lp-b { width: 44px; height: 44px; flex: none; border-radius: 10px; border: 1px solid var(--line-2); background: transparent; color: var(--cream); font: 500 18px/1 var(--font-ui); cursor: pointer; }
.sheet .lp-b:hover:not(:disabled), .sheet .lp-b:focus-visible { border-color: var(--saffron); color: var(--saffron); outline: none; } .sheet .lp-b:disabled { opacity: .3; cursor: default; }
.sheet .lp-add { position: relative; } .sheet .lp-find, .sheet .lp-opts input { font: 400 15px var(--font-text); color: var(--cream); background: rgba(243, 235, 221, .07); border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 12px; min-height: 44px; box-sizing: border-box; }
.sheet .lp-find { width: 100%; } .sheet .lp-find:focus-visible, .sheet .lp-opts input:focus-visible { outline: 2px solid var(--saffron); outline-offset: 1px; }
.sheet .lp-hits { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.sheet .lp-hits button { width: 100%; min-height: 44px; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--cream); font: 400 14px var(--font-ui); cursor: pointer; }
.sheet .lp-hits button:hover, .sheet .lp-hits button:focus-visible { color: var(--saffron); outline: none; } .sheet .lp-hits small { color: var(--muted); }
.sheet .lp-sug { align-items: center; } .sheet .lp-sug .chip, .sheet .lp-opts .chip { min-height: 44px; } .sheet .lp-k { color: var(--muted); font-size: 12.5px; }
.sheet .lp-opts { flex-wrap: wrap; margin-top: 4px; } .sheet .lp-opts label { display: flex; align-items: center; gap: 6px; }
.sheet .lp-route { margin: 0; font: 600 14px var(--font-ui); } .sheet .lp-leg { gap: 4px; }
.sheet .lp-total { margin: 0; padding-top: 10px; border-top: 1px solid var(--line-2); font: 400 15px var(--font-ui); }   /* no tabular-nums: it spaces the decimal point ("7 . 6 km") in this face */
.sheet .lp-acts { display: flex; flex-wrap: wrap; gap: 8px; } .sheet .lp-acts .btn { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; box-sizing: border-box; }
.sheet .lp-acts .btn:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
.sheet .lp-more { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 12px; } .sheet .lp-more summary { cursor: pointer; color: var(--muted); min-height: 44px; display: flex; align-items: center; }
.sheet .lp-more summary:focus-visible { outline: 2px solid var(--saffron); }
.trow .ibtn { flex: none; } .off-lbl { white-space: nowrap; } .trow .search { min-width: 0; }