@font-face { font-family: "Plex"; src: url("fonts/IBMPlexSansCondensed-Regular.ttf"); font-weight: 400; font-display: block; }
@font-face { font-family: "Plex"; src: url("fonts/IBMPlexSansCondensed-Medium.ttf"); font-weight: 500; font-display: block; }
@font-face { font-family: "Plex"; src: url("fonts/IBMPlexSansCondensed-SemiBold.ttf"); font-weight: 600; font-display: block; }

:root {
  --night: #050C22; --deep: #0A1736; --ink: #E9EEF8; --dim: #93A1BE; --faint: #4D5B7A; --line: rgba(160, 182, 230, .16);
  --gold: #E8C77A; --glass: rgba(9, 19, 46, .78); --r: 14px;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night); color: var(--ink);
  font: 15px/1.45 "Plex", -apple-system, "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; }
body { background: radial-gradient(120% 90% at 50% 42%, #0E2150 0%, #071233 45%, #030819 100%); }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#ink { z-index: 1; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- landing ---------- */
#landing { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; text-align: center; transition: opacity 1.4s ease; pointer-events: none; }
#landing > * { pointer-events: auto; }
#landing.gone { opacity: 0; }
.kicker { letter-spacing: .22em; text-transform: uppercase; font-size: 11px; color: var(--dim); margin-bottom: 18px; }
#landing h1 { font-weight: 400; font-size: clamp(30px, 6.2vw, 58px); line-height: 1.04; margin: 0 0 12px; letter-spacing: -.01em; }
.lede { color: var(--dim); margin: 0 0 26px; font-size: clamp(15px, 2.2vw, 18px); }
.searchbox { position: relative; width: min(520px, 100%); }
.searchbox input { width: 100%; border: 1px solid rgba(190, 205, 240, .28); background: rgba(5, 12, 34, .55); border-radius: 999px;
  padding: 11px 18px; outline: none; font-size: 16px; transition: border-color .3s; -webkit-appearance: none; }
.searchbox.big input { padding: 15px 24px; font-size: 18px; }
.searchbox input:focus { border-color: rgba(232, 199, 122, .7); }
.searchbox input::placeholder { color: #7D8BAA; }
.results { list-style: none; margin: 6px 0 0; padding: 6px; position: absolute; left: 0; right: 0; z-index: 9; text-align: left;
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: var(--r);
  max-height: 52vh; overflow: auto; }
.results:empty { display: none; }
.results li { padding: 8px 12px; border-radius: 9px; cursor: pointer; display: flex; gap: 10px; align-items: baseline; }
.results li.on, .results li:hover { background: rgba(120, 150, 220, .16); }
.results .t { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); min-width: 52px; }
.results .m { color: var(--dim); font-size: 13px; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.hints { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 560px; }
.hints button { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 5px 13px; color: var(--dim); font-size: 13px; }
.hints button:hover { color: var(--ink); border-color: rgba(190, 205, 240, .4); }
.hints.journeys { margin-top: 12px; }
.hints.journeys span { width: 100%; color: var(--faint); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 2px; }
.hints.journeys button { border-color: rgba(232, 199, 122, .25); color: #CDB98A; }
.jr { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 10px 0; font-size: 14px; }
.jr.open { border-color: rgba(232, 199, 122, .35); }
.jr .jt { font-weight: 500; }
.jr .jk { color: var(--dim); font-size: 12px; margin-top: 2px; }
.jr p { margin: 8px 0; line-height: 1.5; }
.tracks { list-style: none; padding: 0; margin: 6px 0; }
.tracks li { padding: 4px 0; color: var(--dim); font-size: 13px; }
.tracks li b { color: var(--ink); font-weight: 500; }
.tracks li span { display: block; }
.tracks a { color: #B9C9EE; margin-right: 12px; font-size: 12.5px; }
.jnav { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }
.jnav button { border: 0; background: rgba(232, 199, 122, .1); color: var(--gold); border-radius: 999px; padding: 5px 12px; font-size: 13px; }
.jnav .jend { color: var(--faint); font-size: 12px; align-self: center; }
.idle { margin-top: 34px; color: var(--faint); font-size: 13px; letter-spacing: .04em; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.idle i { display: block; width: 120px; height: 1px; background: linear-gradient(90deg, var(--gold) var(--p, 0%), rgba(255, 255, 255, .12) var(--p, 0%)); }

.credit { position: absolute; bottom: calc(18px + var(--safe-b)); left: 0; right: 0; text-align: center; color: var(--faint); font-size: 12px; letter-spacing: .08em; }
.about { background: none; border: 0; color: var(--dim); font-size: 13px; letter-spacing: .08em; padding: 4px 6px; }

/* ---------- the quiet chrome ---------- */
#hud { position: fixed; z-index: 4; top: calc(10px + var(--safe-t)); left: 12px; right: 12px; display: flex; gap: 12px; align-items: center; }
#hud .searchbox { width: min(360px, 60vw); margin-left: auto; }
.brand { background: none; border: 0; padding: 4px 2px; font-size: 15px; letter-spacing: .14em; text-transform: lowercase; color: var(--ink); }
.brand span { color: var(--gold); margin-left: .35em; }
#focusline { position: fixed; z-index: 3; left: 18px; top: calc(62px + var(--safe-t)); pointer-events: none; max-width: 60vw; transition: transform .6s ease; transform-origin: 0 0; }
body.read #focusline { transform: scale(.72); }
body.panel #hint { display: none; }
@media (min-width: 641px) { body.panel #legend { left: 18px; transform: none; width: calc(100vw - min(400px, 40vw) - 60px); justify-content: flex-start; } }
.fl-type { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.fl-name { font-size: clamp(24px, 4vw, 38px); line-height: 1.08; margin: 2px 0 4px; }
.fl-beat { color: var(--dim); font-size: 13px; display: flex; gap: 8px; align-items: center; letter-spacing: .06em; }
.fl-beat .dot { width: 7px; height: 7px; border-radius: 50%; background: #FF6C6D; box-shadow: 0 0 10px #FF6C6D; opacity: .5; }

#dock { position: fixed; z-index: 4; left: 50%; transform: translateX(-50%); bottom: calc(14px + var(--safe-b)); display: flex; gap: 10px; align-items: center;
  padding: 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  max-width: calc(100vw - 16px); overflow-x: auto; scrollbar-width: none; }
.seg { display: flex; border-radius: 999px; }
.seg button { border: 0; background: transparent; padding: 7px 13px; border-radius: 999px; color: var(--dim); white-space: nowrap; font-size: 14px; }
.seg button.on { background: rgba(232, 199, 122, .16); color: var(--ink); }
.sel { display: flex; align-items: center; gap: 6px; padding: 0 10px 0 6px; color: var(--dim); font-size: 13px; white-space: nowrap; }
.sel select { background: transparent; border: 0; color: var(--ink); font-size: 14px; outline: none; -webkit-appearance: none; padding: 6px 2px; cursor: pointer; }
.sel select option { background: var(--deep); }
.sel.phone { display: none; }
#legend { position: fixed; z-index: 3; left: 50%; transform: translateX(-50%); bottom: calc(68px + var(--safe-b)); font-size: 12px; color: var(--dim);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; pointer-events: none; width: min(980px, 96vw); }
#legend div { display: flex; align-items: center; gap: 8px; }
#legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; flex: none; }
#legend i.dash { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px) !important; height: 2px; }
#hint { position: fixed; z-index: 3; right: 20px; top: calc(66px + var(--safe-t)); color: var(--faint); font-size: 12px; letter-spacing: .05em; pointer-events: none; text-align: right; }

/* ---------- the station panel ---------- */
#panel { position: fixed; z-index: 6; top: calc(64px + var(--safe-t)); right: 12px; bottom: calc(76px + var(--safe-b)); width: min(400px, 40vw);
  background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line); border-radius: 18px;
  overflow: auto; padding: 22px 22px 28px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#panel .close { position: sticky; top: -8px; float: right; border: 0; background: rgba(255, 255, 255, .06); width: 30px; height: 30px; border-radius: 50%; font-size: 18px; line-height: 1; color: var(--dim); }
.p-type { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); display: flex; gap: 8px; align-items: center; }
.p-type i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
#panel h2 { font-weight: 500; font-size: 28px; line-height: 1.08; margin: 6px 0 6px; }
.p-meta { color: var(--dim); font-size: 14px; }
.p-aka { color: var(--faint); font-size: 13px; margin-top: 2px; }
.p-taste { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.p-taste span { font-size: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; color: var(--dim); }
.p-taste span.bpm { color: var(--ink); border-color: rgba(255, 108, 109, .45); }
.p-desc { margin: 16px 0; font-size: 15.5px; line-height: 1.55; }
.p-act { display: flex; gap: 8px; margin: 4px 0 18px; }
.p-act button { border: 1px solid rgba(232, 199, 122, .45); background: transparent; color: var(--gold); padding: 6px 14px; border-radius: 999px; font-size: 13px; }
.owner { border-left: 2px solid var(--gold); padding: 8px 0 8px 14px; margin: 14px 0; }
.owner b { color: var(--gold); font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; display: block; margin-bottom: 4px; }
.owner q { font-style: italic; }
.owner .st { display: block; margin-top: 6px; color: var(--dim); font-size: 13px; }
.dispute { border: 1px dashed rgba(190, 205, 240, .3); border-radius: 12px; padding: 10px 14px; margin: 12px 0; font-size: 14px; }
.dispute > b { font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); display: block; }
.dispute .about { margin: 3px 0 8px; }
.dispute .side { display: grid; grid-template-columns: 22px 1fr; gap: 4px; margin: 6px 0; }
.dispute .side em { font-style: normal; color: var(--gold); }
.dispute .side small { grid-column: 2; color: var(--dim); }
#panel h3 { font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin: 22px 0 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.conn { list-style: none; padding: 0; margin: 0; }
.conn li { padding: 5px 0; display: grid; grid-template-columns: 14px 1fr; gap: 6px; font-size: 14px; }
.conn li i { width: 10px; height: 2px; margin-top: 10px; border-radius: 1px; }
.conn li i.dash { background: repeating-linear-gradient(90deg, var(--c) 0 3px, transparent 3px 5px) !important; }
.conn a { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(190, 205, 240, .25); cursor: pointer; }
.conn small { display: block; color: var(--dim); font-size: 12.5px; }
.conn .rel { color: var(--dim); }
.srcs { padding-left: 18px; margin: 0; font-size: 13px; color: var(--dim); }
.srcs li { margin: 4px 0; }
.srcs a { color: #B9C9EE; }
.p-foot { color: var(--faint); font-size: 12px; margin-top: 18px; }

/* ---------- phone: a bottom sheet ---------- */
@media (max-width: 640px) {
  #panel { top: auto; left: 8px; right: 8px; width: auto; bottom: calc(70px + var(--safe-b)); max-height: 56vh; border-radius: 20px; padding: 18px 18px 26px; }
  #hud .searchbox { width: 100%; }
  .brand { display: none; }
  #focusline { top: calc(60px + var(--safe-t)); max-width: 86vw; }
  #legend { bottom: calc(62px + var(--safe-b)); font-size: 10.5px; gap: 1px 9px; }
  #hint { display: none; }
  .seg button { padding: 7px 10px; font-size: 13px; }
  #formSeg, .sel .wide, .sel.phone > span { display: none; }
  .sel.phone { display: flex; }
  #dock { width: calc(100vw - 16px); justify-content: space-between; }
  #dock { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  #landing { transition: none; }
}

/* ---------- touch lock (iOS Safari: page scroll / pinch-zoom must not take the map's gestures) ---------- */
html, body { position: fixed; inset: 0; height: 100%; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
canvas { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.results, #panel { touch-action: pan-y; overscroll-behavior: contain; }

/* ---------- flat-first (owner 21:38): heart form and beat retired ---------- */
#beatDot, #modeSeg, #formSeg, #formSel, [data-read] { display: none !important; }
@media (max-width: 640px) { body.read #legend { display: none; } }   /* the flat map's own time axis owns the bottom on a phone */

/* ---------- navigation hotfix (owner 21:47): home, trail, connect, a panel that folds away ---------- */
.homebtn { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(5, 12, 34, .6); color: var(--ink); display: grid; place-items: center; padding: 0; }
.homebtn svg { width: 22px; height: 22px; }
#hud .about { min-height: 44px; min-width: 44px; }
#trail { position: fixed; z-index: 4; top: calc(56px + var(--safe-t)); left: 10px; right: 10px; display: flex; align-items: center; gap: 2px; overflow: hidden; white-space: nowrap; font-size: 12.5px; color: var(--dim); pointer-events: none; }
#trail button { pointer-events: auto; min-height: 44px; min-width: 44px; border: 0; background: none; color: var(--dim); padding: 0 6px; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#trail button.here { color: var(--ink); }
#trail .sep { color: var(--faint); }
body:has(#trail:not([hidden])) #focusline { top: calc(100px + var(--safe-t)); }
#connectBar { position: fixed; z-index: 7; left: 50%; transform: translateX(-50%); bottom: calc(80px + var(--safe-b)); display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 16px; border-radius: 999px; background: var(--glass); border: 1px solid rgba(232, 199, 122, .45); color: var(--ink); font-size: 14px; max-width: calc(100vw - 16px); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
#connectBar b { font-weight: 500; color: var(--gold); }
#connectBar button { min-height: 40px; min-width: 44px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--dim); padding: 0 14px; }
#panel .grip { position: sticky; top: -22px; display: block; margin: -16px auto 4px; width: 88px; height: 44px; border: 0; background: none; padding: 0; cursor: grab; touch-action: none; }
#panel .grip i { display: block; width: 40px; height: 4px; border-radius: 2px; background: rgba(190, 205, 240, .35); margin: 0 auto; }
#panel .close { width: 44px; height: 44px; }
#panel.min { overflow: hidden; }
#panel.min .p-desc, #panel.min .p-act, #panel.min h3, #panel.min ul, #panel.min ol, #panel.min .p-foot, #panel.min .routes, #panel.min .owner, #panel.min .dispute, #panel.min .jr, #panel.min .showall, #panel.min .p-taste { display: none; }
.showall { min-height: 44px; border: 0; background: none; color: var(--gold); padding: 0; font-size: 13.5px; }
.conn a { display: inline-block; min-height: 44px; padding-top: 11px; }
.conn .ind { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
#panel h3.conn-h { color: var(--ink); }
.p-act button { min-height: 44px; }
.path { list-style: none; padding: 0; margin: 10px 0; }
.path .stop { display: grid; grid-template-columns: 14px 1fr; gap: 6px; font-size: 15px; }
.path .stop i { width: 10px; height: 10px; border-radius: 50%; margin-top: 17px; }
.path .stop a { display: block; min-height: 44px; padding: 11px 0 6px; color: var(--ink); text-decoration: none; }
.path .hop { margin: 0 0 0 4px; padding: 2px 0 6px 16px; border-left: 2px solid rgba(232, 199, 122, .55); color: var(--dim); font-size: 13.5px; }
.path .hop.ind { border-left-style: dashed; border-left-color: rgba(147, 161, 190, .5); }
.path .hop small { display: block; color: var(--faint); font-size: 12.5px; margin-top: 2px; }
.path .hop a { color: #B9C9EE; display: inline-block; min-height: 44px; min-width: 44px; padding-top: 12px; }
.routes { display: flex; flex-wrap: wrap; gap: 6px; }
.routes button { min-height: 44px; border: 1px solid var(--line); background: none; border-radius: 999px; color: var(--dim); padding: 0 14px; font-size: 13px; }
.routes button.on { border-color: rgba(232, 199, 122, .55); color: var(--ink); }
@media (max-width: 640px) {
  #panel.min { max-height: 116px; }
  #trail button { max-width: 28vw; }
  #hud .searchbox { flex: 1; width: auto; }
}
@media (min-width: 641px) { #panel.min { bottom: auto; max-height: 132px; } }
.sel select { min-height: 44px; }

/* ---------- one top grid (owner 22:24, iPhone): same left edge for every row, safe area respected ---------- */
:root { --mx: 16px; --top: calc(var(--safe-t) + 8px); --row: 44px; }
@media (min-width: 641px) { :root { --mx: 24px; --top: calc(var(--safe-t) + 14px); } }
#hud { top: var(--top); left: var(--mx); right: var(--mx); gap: 8px; height: var(--row); }
#hud .searchbox { flex: 1 1 auto; width: auto; min-width: 0; margin-left: 0; max-width: 560px; }
@media (min-width: 641px) { #hud .searchbox { margin-left: auto; } }
#hud .searchbox input { height: var(--row); padding: 0 16px; font-size: 16px; }
.iconbtn { flex: none; width: var(--row); height: var(--row); border-radius: 50%; border: 0; background: transparent; color: var(--dim); display: grid; place-items: center; padding: 0; }
.iconbtn:hover, .iconbtn.on { color: var(--ink); background: rgba(255, 255, 255, .06); }
.iconbtn svg { width: 22px; height: 22px; }
.homebtn { width: var(--row); height: var(--row); }
#trail { top: calc(var(--top) + var(--row) + 4px); left: calc(var(--mx) - 6px); right: var(--mx); height: var(--row); }
#focusline { left: var(--mx); top: calc(var(--top) + var(--row) + 14px); max-width: calc(100vw - 2 * var(--mx)); }
body:has(#trail:not([hidden])) #focusline { top: calc(var(--top) + 2 * var(--row) + 10px); }
.fl-type { font-size: 11px; letter-spacing: .16em; line-height: 1.3; }
.fl-name { font-size: clamp(26px, 4vw, 38px); line-height: 1.05; margin: 3px 0 2px; }
.fl-beat { font-size: 13px; line-height: 1.3; letter-spacing: .04em; }
.fl-beat:empty, .fl-beat:has(#flBpm:empty) { display: none; }
#hint { right: var(--mx); top: calc(var(--top) + var(--row) + 14px); }
#panel { top: calc(var(--top) + var(--row) + 12px); right: var(--mx); }
@media (max-width: 640px) { #panel { top: auto; left: 8px; right: 8px; } }

/* beat dot + heart form are opt-in (Options) */
body.pulse-on #beatDot { display: inline-block !important; opacity: .9; }
body.heart-on #modeSeg { display: flex !important; }
@media (min-width: 641px) { body.heart-on #formSeg { display: flex !important; } }
@media (max-width: 640px) { body.heart-on #formSel { display: inline-block !important; } }

/* options sheet */
.opt { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.opt b { font-weight: 500; font-size: 15.5px; }
.opt small { grid-column: 1; color: var(--dim); font-size: 13px; line-height: 1.45; }
.switch { grid-row: 1 / span 2; grid-column: 2; position: relative; width: 52px; height: 32px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); padding: 0; }
.switch::before { content: ""; position: absolute; inset: -7px -4px; }   /* 44 px touch target */
.switch::after { content: ""; position: absolute; top: 50%; left: 3px; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--dim); transition: transform .2s, background .2s; }
.switch[aria-checked="true"] { background-color: rgba(232, 199, 122, .35); border-color: rgba(232, 199, 122, .6); }
.switch[aria-checked="true"]::after { transform: translateX(20px); background: var(--gold); }
body.heart-on [data-read] { display: inline-flex !important; }
/* a quiet scrim under the header and title, so map labels pass behind them instead of crowding them */
#scrim { position: fixed; z-index: 2; left: 0; right: 0; top: 0; pointer-events: none; height: calc(var(--top) + var(--row) + 104px);
  background: linear-gradient(180deg, rgba(5, 12, 34, .97) 0%, rgba(5, 12, 34, .95) calc(100% - 26px), rgba(5, 12, 34, 0) 100%); }
body:has(#hud[hidden]) #scrim { display: none; }

/* ---------- Show layers (owner 22:27): one-line chip row above the dock; full list in the Options sheet ---------- */
/* padding-block 4px gives .chip::before room to exist INSIDE the scroll box: overflow-x:auto forces
   overflow-y to clip, so without it the 4 px the chips reach up and down for their 44 px touch target was
   being cut off and every chip in this row was a 36 px target. The 4 px comes off `bottom`, so nothing moves. */
#showbar { position: fixed; z-index: 4; left: 0; right: 0; bottom: calc(66px + var(--safe-b)); display: flex; gap: 6px; align-items: center;
  overflow-x: auto; overflow-y: hidden; white-space: nowrap; padding: 4px var(--mx); scrollbar-width: none; -webkit-overflow-scrolling: touch;
  touch-action: pan-x; overscroll-behavior-x: contain; mask-image: linear-gradient(90deg, transparent 0, #000 var(--mx), #000 calc(100% - 28px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--mx), #000 calc(100% - 28px), transparent 100%); }
#showbar::-webkit-scrollbar { display: none; }
@media (min-width: 641px) { #showbar { justify-content: center; } }
.chip { flex: none; height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 13px; border-radius: 18px; border: 1px solid var(--line);
  background: rgba(9, 19, 46, .78); color: var(--dim); font-size: 13px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); position: relative; }
.chip::before { content: ""; position: absolute; inset: -4px 0; }        /* 44 px touch target */
.chip.on { color: var(--ink); background: rgba(120, 150, 220, .22); border-color: rgba(190, 205, 240, .38); }
.chip.preset.on { color: var(--gold); border-color: rgba(232, 199, 122, .6); background: rgba(232, 199, 122, .12); }
.chip.temp { border-style: dashed; }
.chip.lead { color: var(--ink); }
.chip svg { width: 16px; height: 16px; }
.chipsep { flex: none; width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
#notice { position: fixed; z-index: 7; left: 50%; transform: translateX(-50%); bottom: calc(116px + var(--safe-b)); display: flex; align-items: center; gap: 10px;
  padding: 4px 4px 4px 16px; border-radius: 999px; background: rgba(9, 19, 46, .94); border: 1px solid rgba(232, 199, 122, .45); color: var(--ink); font-size: 13.5px;
  max-width: calc(100vw - 2 * var(--mx)); white-space: nowrap; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
#notice button { min-height: 36px; border: 0; border-radius: 999px; background: rgba(232, 199, 122, .14); color: var(--gold); padding: 0 14px; }
#connectBar { bottom: calc(116px + var(--safe-b)); }
@media (min-width: 641px) { #legend { bottom: calc(116px + var(--safe-b)); } }
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.presets button { min-height: 44px; border: 1px solid var(--line); background: none; border-radius: 999px; color: var(--dim); padding: 0 15px; font-size: 14px; }
.presets button.on { border-color: rgba(232, 199, 122, .6); color: var(--gold); background: rgba(232, 199, 122, .1); }
.opt.slim { padding: 8px 0; min-height: 52px; }
/* ?bare=1: map only, no chrome — the 8K export script and print proofs */
html.bare #hud, html.bare #showbar, html.bare #focusline, html.bare #trail, html.bare #legend,
html.bare #scrim, html.bare #dock, html.bare #hint, html.bare #notice, html.bare #splash { display: none !important; }
/* The feedback bubble (web/shared/feedback.js) floated in the middle of the map's right-hand side and covered nodes
   — owner 2026-10-07 21:02, "dock it so it doesn't cover nodes". On the map it sits on the chip row's line instead,
   below the band the map is drawn in, and the chips keep clear of it so neither can scroll under the other.
   `body #mbf-b` outranks the script's own `#mbf-b` rule whatever order the stylesheets land in. */
/* "I can't scroll the bottom menu... to select the ones on the right that I can't touch and can't see"
   (owner 2026-10-10). The row does scroll now, but a fade alone did not tell him there was more, so there is
   an arrow as well: it says there is more and it scrolls there when pressed. It hides at the end of the row. */
#showmore { position: fixed; z-index: 5; right: calc(var(--mx) + 54px); bottom: calc(66px + var(--safe-b)); width: 40px; height: 44px;
  display: grid; place-items: center; border: 1px solid rgba(232, 199, 122, .5); border-radius: 999px; padding: 0;
  background: rgba(9, 19, 46, .94); color: var(--gold); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#showmore svg { width: 19px; height: 19px; }
#showmore[hidden] { display: none; }
body.panel #showmore, body.touring #showmore, body.tracing #showmore { display: none; }
body #mbf-b { bottom: calc(64px + var(--safe-b)); right: 12px; }     /* the heart form keeps its dock below the chips */
body #mbf-p { bottom: calc(66px + var(--safe-b)); }
body.heart-on #mbf-p { bottom: calc(122px + var(--safe-b)); }
/* The chip row's track stops short of the bubble's seat. Padding alone was not enough — it only keeps the *last* chip
   clear, and a chip part-way through the scroll still slid under the bubble. Shortening the track means none can. */
#showbar { right: calc(var(--mx) + 54px); }
/* On a phone the 48 px bubble stood 6 px proud of the 36 px chip row above and below it, so it read as a disc dropped
   on the chips rather than the row's own trailing control, and the chip beside it looked covered (owner 2026-10-08,
   "it covers the Everything chip"). Seat it in the row: same height, same centre line, its own lane beyond the track. */
@media (max-width: 640px) {
  body:not(.heart-on) #mbf-b { width: 36px !important; height: 36px !important; bottom: calc(14px + var(--safe-b)) !important; right: 12px; }
  body:not(.heart-on) #mbf-b svg { width: 17px; height: 17px; }
}

/* ?frame=map|globe (owner 2026-10-07 20:39): the composition for Samsung The Frame in Art Mode. It hangs on a wall and
   is read from 2–3 m, so it is a poster, not the app: a calm even wash (Art Mode runs the panel dim, and a hard vignette
   reads as grime on a wall), a title band at the top, and the only other words the credit along the bottom. Every size
   is in vh, so the composition is identical at 4K and 8K; infra/export_frame_tv.mjs carries the pixels. */
html.frame #panel, html.frame #landing, html.frame #tour, html.frame #connectBar,
html.frame #mbf-b, html.frame #mbf-p { display: none !important; }
html.frame body { background: radial-gradient(150% 115% at 50% 40%, var(--bg0) 0%, var(--bg1) 58%, var(--bg2) 100%); }
#framePlate { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
#framePlate .fp-top { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 5vw; }
#framePlate .fp-kicker { letter-spacing: .34em; text-transform: uppercase; font-size: 1.55vh; color: var(--faint); }
#framePlate .fp-title { font-size: 6.6vh; line-height: 1.04; font-weight: 500; letter-spacing: -.012em; margin: 1.5vh 0 0; }
#framePlate .fp-sub { font-size: 2.3vh; color: var(--dim); margin-top: 1.1vh; }
#framePlate .fp-credit { position: absolute; left: 0; right: 0; bottom: 3.1vh; text-align: center; font-size: 1.7vh;
  letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
/* "Save this view": the 8K / 4K / HD still buttons (owner 2026-10-07, wall screens and print proofs) */
.opt.stack { grid-template-columns: 1fr; }
.exports { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.exports button { min-height: 44px; border: 1px solid var(--line); background: none; border-radius: 10px; color: var(--dim); padding: 0 14px; font-size: 14px; }
.exports button:first-child { border-color: rgba(232, 199, 122, .6); color: var(--gold); background: rgba(232, 199, 122, .1); }
/* the guided-tour list, once there is more than one tour (owner 2026-10-07: house, then reggae) */
.tourrow b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#mbf-b { bottom: calc(118px + var(--safe-b)) !important; }                 /* above the Show chips */
@media (max-width: 640px) { body.panel #mbf-b { display: none !important; } }   /* never over the bottom sheet */

/* ---------- splash (owner 22:30): navy sky, turning globe, the Digital Code Art logo, then into the map ---------- */
#splash { position: fixed; inset: 0; z-index: 50; cursor: pointer; outline: none; -webkit-user-select: none; user-select: none; }
#splash::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 42%, #0E2150 0%, #071233 45%, #030819 100%); transition: opacity .8s ease; }
#splashGlobe { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .7s ease; }
.splash-copy { position: absolute; left: 0; right: 0; top: var(--copy-top, 64vh); text-align: center; padding: 0 24px; transition: opacity .6s ease .25s, transform 1.2s ease; }
.splash-logo { width: min(240px, 62vw); height: auto; display: block; margin: 0 auto 18px; }
#splash h1 { font-weight: 400; font-size: clamp(26px, 6.4vw, 40px); line-height: 1.08; margin: 0; letter-spacing: -.005em; color: var(--ink); }
.splash-by { margin: 6px 0 0; color: var(--dim); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; }
.splash-line { width: 120px; height: 1px; margin: 22px auto 0; background: rgba(255, 255, 255, .12); overflow: hidden; }
.splash-line i { display: block; height: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); transition: transform .35s ease; }
.splash-credit { margin: 16px 0 0; color: var(--faint); font-size: 12px; letter-spacing: .08em; }
.splash-skip { position: absolute; left: 0; right: 0; bottom: calc(22px + var(--safe-b)); text-align: center; color: var(--faint); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
/* hand-over: the background and 2D globe dissolve onto the identical WebGL globe; the words lift away */
#splash.out { pointer-events: none; }
#splash.out::before { opacity: 0; }
#splash.out #splashGlobe { opacity: 0; }
#splash.out .splash-copy { opacity: 0; transform: translateY(18px); }
#splash.out .splash-skip { opacity: 0; transition: opacity .3s; }
@media (prefers-reduced-motion: reduce) { #splash::before, #splashGlobe, .splash-copy { transition-duration: .5s; transition-delay: 0s; } #splash.out .splash-copy { transform: none; } }
body:has(#splash) #mbf-b { opacity: 0; pointer-events: none; }                 /* the feedback bubble waits for the map */
#mbf-b { transition: opacity .6s ease; }
@keyframes mb-arrive { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes mb-arrive-b { from { opacity: 0; } to { opacity: 1; } }
body.arrive #hud, body.arrive #scrim { animation: mb-arrive .9s ease .35s both; }
body.arrive #focusline { animation: mb-arrive-b .9s ease .35s both; }
body.arrive #showbar, body.arrive #dock, body.arrive #legend { animation: mb-arrive-b .9s ease .6s both; }
@media (prefers-reduced-motion: reduce) { body.arrive * { animation-duration: .01s !important; animation-delay: 0s !important; } }

/* ---------- About (owner-approved copy, 2026-10-07) ---------- */
.about-page h2.about-h { font-size: clamp(30px, 6vw, 38px); font-weight: 500; letter-spacing: -.01em; margin: 8px 0 14px; }
.about-page .p-desc { font-size: 15.5px; line-height: 1.6; }
.about-people { display: grid; gap: 10px; margin: 6px 0 4px; }
.about-person { border-left: 2px solid var(--gold); padding: 6px 0 6px 14px; }
.about-person b { display: block; font-weight: 500; color: var(--gold); }
.about-person span { color: var(--dim); font-size: 14.5px; line-height: 1.5; }
.about-do { display: grid; gap: 8px; }
.about-do > button, .about-do > a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; text-align: left; min-height: 56px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .03); color: var(--ink); text-decoration: none; font-size: 14.5px; }
.about-do > button:hover, .about-do > a:hover { border-color: rgba(232, 199, 122, .45); }
.about-do b { font-weight: 500; }
.about-do span { grid-column: 1; color: var(--dim); line-height: 1.45; }
.about-do i { grid-row: 1 / span 2; grid-column: 2; font-style: normal; color: var(--gold); font-size: 18px; }
.about-journeys { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 6px; }
.about-journeys button { min-height: 40px; border: 1px solid rgba(232, 199, 122, .3); background: none; border-radius: 999px; color: #CDB98A; padding: 0 13px; font-size: 13px; }
.about-fb { min-height: 44px; border: 1px solid rgba(232, 199, 122, .55); background: rgba(232, 199, 122, .1); color: var(--gold); border-radius: 999px; padding: 0 20px; font-size: 14.5px; margin: 2px 0 8px; }
.about-credit { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 26px 0 6px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; }
.about-credit img { width: 150px; height: auto; }
.about-credit span { color: var(--faint); font-size: 12px; letter-spacing: .06em; }
@media (max-width: 640px) { #panel:has(.about-page) { max-height: calc(100dvh - var(--top) - var(--row) - 88px); } }   /* About is a read: give it the screen */

/* colour moved into the Show sheet (07:20 review): the bottom dock only exists for the opt-in heart form */
body:not(.heart-on) #dock { display: none !important; }
body:not(.heart-on) #showbar { bottom: calc(14px + var(--safe-b)); }
/* the arrow rides with the row: this rule moves the bar in the read view, and the arrow has to follow it
   or it floats 52 px above the chips it belongs to */
body:not(.heart-on) #showmore { bottom: calc(14px + var(--safe-b)); }
body:not(.heart-on) #mbf-b { bottom: calc(8px + var(--safe-b)) !important; }   /* docked on the chip row, not floating over the map */
body:not(.heart-on) #notice, body:not(.heart-on) #connectBar { bottom: calc(62px + var(--safe-b)); }
@media (min-width: 641px) { body:not(.heart-on) #legend { bottom: calc(62px + var(--safe-b)); } }
@media (max-width: 640px) { body:not(.heart-on) #panel { bottom: calc(60px + var(--safe-b)); } }
.colour-row label { cursor: pointer; }
.colour-row select { grid-row: 1 / span 2; grid-column: 2; min-height: 44px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .05); color: var(--ink);
  padding: 0 34px 0 16px; font-size: 14.5px; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.colour-row select option { background: var(--deep); }

/* ---------- background candidates (owner 07:19): slate (default), ink, navy (the old one); ?bg= to compare ---------- */
:root { --bg0: #232B3D; --bg1: #1B2130; --bg2: #121722; --night: #1B2130; --deep: #232A3A; --glass: rgba(27, 33, 48, .9); --dim: #AEB8CC; --faint: #7D879C; --line: rgba(190, 200, 225, .2); }
html[data-bg="ink"] { --bg0: #2A2B34; --bg1: #1E1F26; --bg2: #141419; --night: #1E1F26; --deep: #282932; --glass: rgba(30, 31, 38, .9); }
html[data-bg="navy"] { --bg0: #0E2150; --bg1: #071233; --bg2: #030819; --night: #050C22; --deep: #0A1736; --glass: rgba(9, 19, 46, .85); }
html, body { background: var(--bg1); }
body { background: radial-gradient(120% 90% at 50% 42%, var(--bg0) 0%, var(--bg1) 48%, var(--bg2) 100%); }
#splash::before { background: radial-gradient(120% 90% at 50% 42%, var(--bg0) 0%, var(--bg1) 48%, var(--bg2) 100%); }
#scrim { background: linear-gradient(180deg, var(--bg1) 0%, color-mix(in srgb, var(--bg1) 94%, transparent) calc(100% - 26px), transparent 100%); }
.chip { background: color-mix(in srgb, var(--bg1) 88%, transparent); }
.homebtn, .searchbox input { background: color-mix(in srgb, var(--bg2) 70%, transparent); }
#legend { display: none !important; }                       /* legend lives in the Show sheet now */
.sheet-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 4px 0 12px; font-size: 13px; color: var(--dim); }
.sheet-legend div { display: flex; align-items: center; gap: 7px; }
.sheet-legend i { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.sheet-legend i.dash { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px) !important; height: 2px; }
#mbf-b { background: var(--glass) !important; border-color: var(--line) !important; }

/* ---------- guided tour card (owner 07:19): bottom sheet on phone, side card on iPad/desktop ---------- */
#tour { position: fixed; z-index: 8; left: 8px; right: 8px; bottom: calc(8px + var(--safe-b)); max-height: 58dvh; overflow: auto; overscroll-behavior: contain;
  background: var(--glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(232, 199, 122, .35); border-radius: 20px;
  padding: 14px 18px 0; touch-action: pan-y; transition: transform .19s cubic-bezier(.22, .61, .36, 1); }
#tour.t-drag { transition: none; }           /* while a finger is on it the card tracks, it does not chase */
@media (max-width: 640px) { #tour { max-height: 50dvh; } }
@media (min-width: 641px) { #tour { left: auto; right: var(--mx); top: calc(var(--top) + var(--row) + 12px); bottom: calc(24px + var(--safe-b)); width: min(420px, 42vw); max-height: none; } }
body.touring #showbar, body.touring #panel, body.touring #notice { display: none !important; }
body.touring #mbf-b { display: none !important; }
.t-head { display: flex; align-items: center; gap: 8px; }
.t-name { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); flex: 1; }
.t-draft { font-size: 10.5px; letter-spacing: .14em; color: var(--bg1); background: var(--gold); border-radius: 4px; padding: 2px 6px; font-weight: 600; }
/* who has signed a tour off, on the last card (owner approved the house tour 2026-10-07; Morgan has not yet) */
.t-signoff { color: var(--faint); font-size: 12px; margin: 10px 0 0; }
.t-x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .06); color: var(--dim); font-size: 20px; margin-right: -8px; }
/* narration toggle: muted speaker when off, waves when on, waves pulsing while it is actually speaking */
.t-say { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .06); color: var(--dim); padding: 10px; }
.t-say svg { width: 100%; height: 100%; display: block; }
.t-say .w1, .t-say .w2 { display: none; }
.t-say.on { color: var(--gold); background: rgba(232, 199, 122, .16); }
.t-say.on .w1, .t-say.on .w2 { display: inline; }
.t-say.on .wx { display: none; }
.t-say.live .w1 { animation: t-wave 1.1s ease-in-out infinite; }
.t-say.live .w2 { animation: t-wave 1.1s ease-in-out .22s infinite; }
@keyframes t-wave { 0%, 100% { opacity: .25; } 45% { opacity: 1; } }
.t-swipe { font-size: 12.5px; color: var(--dim); margin: 6px 0 0; }
@media (hover: hover) and (pointer: fine) { .t-swipe { display: none; } }   /* a mouse has the arrow keys */
/* a voiced stop has no knowable length, so the autoplay bar breathes instead of claiming a countdown */
#tour.t-voiced .t-auto i { width: 100%; animation: t-breathe 1.6s ease-in-out infinite; }
@keyframes t-breathe { 0%, 100% { opacity: .22; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { #tour { transition: none; } .t-say.live .w1, .t-say.live .w2, #tour.t-voiced .t-auto i { animation: none; } }
.t-line { list-style: none; display: flex; align-items: center; padding: 0; margin: 8px 0 6px; position: relative; }
.t-line::before { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; background: var(--line); }
.t-line li { flex: 1; display: flex; justify-content: center; position: relative; }
.t-line button { width: 22px; height: 30px; border: 0; background: none; padding: 0; position: relative; }
.t-line button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--bg1); border: 2px solid var(--faint); }
.t-line li.done button::after { border-color: var(--gold); background: var(--gold); }
.t-line li.here button::after { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-color: var(--gold); background: var(--bg1); box-shadow: 0 0 0 3px rgba(232, 199, 122, .25); }
.t-meta { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.t-title { font-size: 24px; font-weight: 500; line-height: 1.12; margin: 4px 0 8px; }
.t-intro { color: var(--gold); font-size: 14.5px; line-height: 1.5; margin: 0 0 8px; }
.t-story { font-size: 15.5px; line-height: 1.58; margin: 0 0 10px; }
.t-next { font-size: 13.5px; color: var(--dim); margin: 0 0 10px; }
.t-next span { color: var(--gold); margin-right: 4px; }
.t-track { display: grid; gap: 2px; border-left: 2px solid var(--gold); padding: 4px 0 4px 12px; margin: 4px 0 8px; font-size: 14px; }
.t-kt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
/* the record itself: play/pause plus what is playing (owner 2026-10-09 "Tours don't play music") */
.t-now { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; }
.t-play { width: 44px; height: 44px; flex: none; border: 1px solid rgba(232, 199, 122, .6); border-radius: 50%;
  background: rgba(232, 199, 122, .16); color: var(--gold); padding: 11px; }
.t-play svg { width: 100%; height: 100%; display: block; }
.t-play .pa { display: none; }
.t-now.playing .t-play .pi { display: none; }
.t-now.playing .t-play .pa { display: inline; }
.t-nowt { display: grid; gap: 1px; min-width: 0; }
.t-nowt b { font-size: 14px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-nowt i { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--dim); }
.t-now.playing .t-nowt i { color: var(--gold); }
.t-asplayed, .t-nopre { font-size: 12.5px; color: var(--faint); display: block; margin-top: 2px; }
.t-listen { display: flex; gap: 14px; }
.t-listen a { color: #B9C9EE; display: inline-block; min-height: 32px; padding-top: 6px; }
.dimx { color: var(--dim); }
.t-src { font-size: 12.5px; color: var(--dim); margin-bottom: 8px; }
.t-src summary { cursor: pointer; min-height: 32px; padding-top: 6px; }
.t-src a { display: block; color: #B9C9EE; padding: 3px 0; }
.t-nav { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; position: sticky; bottom: 0; padding: 10px 0 14px; margin-top: 4px; background: var(--bg1); box-shadow: 0 -14px 14px -6px var(--bg1); }
.t-nav button { min-height: 46px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--ink); font-size: 14.5px; position: relative; overflow: hidden; }
.t-nav button:disabled { opacity: .35; }
.t-nav .t-go { border-color: rgba(232, 199, 122, .6); background: rgba(232, 199, 122, .16); color: var(--gold); }
.t-auto i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--gold); }
.tourchip { color: var(--gold) !important; border-color: rgba(232, 199, 122, .5) !important; }
.splash-tour { margin: 22px auto 0; display: block; min-height: 44px; border: 1px solid rgba(232, 199, 122, .6); background: rgba(232, 199, 122, .1); color: var(--gold); border-radius: 999px; padding: 0 20px; font-size: 14px; cursor: pointer; position: relative; z-index: 2; }
@media (min-width: 641px) { #tour { bottom: auto; max-height: calc(100dvh - var(--top) - var(--row) - 36px - var(--safe-b)); } }
.p-out { display: flex; gap: 16px; margin: 4px 0 10px; font-size: 13.5px; } .p-out a { color: #B9C9EE; min-height: 36px; display: inline-flex; align-items: center; }

/* ---------- Listen: example tracks per genre (owner 14:16) ---------- */
.ltracks { list-style: none; padding: 0; margin: 4px 0 6px; display: grid; gap: 10px; }
.ltracks li { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.lt-top { display: flex; gap: 12px; align-items: center; }
.lt-top b { display: block; font-weight: 500; font-size: 15px; line-height: 1.25; }
.lt-top span { color: var(--dim); font-size: 13px; }
.lt-play { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(232, 199, 122, .55); background: rgba(232, 199, 122, .1); color: var(--gold); font-size: 15px; padding: 0; }
.lt-play.on { background: var(--gold); color: var(--bg1); }
.lt-noplay { flex: none; width: 44px; }
.ltracks small { display: block; color: var(--dim); font-size: 13px; line-height: 1.45; margin: 6px 0 2px 56px; }
.lt-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-left: 56px; font-size: 13px; }
.lt-links a { color: #B9C9EE; min-height: 32px; display: inline-flex; align-items: center; }
.lt-links .lt-src { color: var(--faint); }

/* all of music + the era jumps (owner 2026-10-09: "it only shows and displays up to 1870") */
.chip.allchip { border-color: rgba(232, 199, 122, .55); color: var(--gold); }
.chip.allchip.on, .chip.era.on { background: rgba(232, 199, 122, .18); border-color: rgba(232, 199, 122, .7); color: var(--gold); }
.chip.newchip { border-color: rgba(232, 199, 122, .5); color: var(--gold); }
.chip.newchip.on { background: rgba(232, 199, 122, .18); border-color: rgba(232, 199, 122, .7); }
/* the week's arrivals, as a list (owner 2026-10-09: the weekly scan) */
.newrow { display: block; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--line);
  background: none; color: var(--ink); padding: 10px 2px; min-height: 44px; }
.newrow:first-of-type { border-top: 0; }
.newrow span { display: block; font-size: 14.5px; }
.newrow small { display: block; color: var(--dim); font-size: 12px; margin-top: 1px; }

/* Trace roots (owner 2026-10-10: "music from 40,000 BCE must have a link"). Same card as a tour stop. */
#trace { position: fixed; z-index: 8; left: 8px; right: 8px; bottom: calc(8px + var(--safe-b)); max-height: 50dvh;
  overflow: auto; overscroll-behavior: contain; background: var(--glass); -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px); border: 1px solid rgba(232, 199, 122, .35); border-radius: 20px; padding: 14px 18px 0; }
@media (min-width: 641px) { #trace { left: auto; right: var(--mx); top: calc(var(--top) + var(--row) + 12px);
  bottom: calc(24px + var(--safe-b)); width: min(420px, 42vw); max-height: none; } }
body.tracing #showbar, body.tracing #panel { display: none !important; }
.trc-k { display: inline-block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(232, 199, 122, .4); border-radius: 4px; padding: 1px 6px; margin-right: 7px; }
.trc-broad { display: inline-block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
  border: 1px dashed rgba(160, 182, 230, .45); border-radius: 4px; padding: 1px 6px; margin-right: 7px; }

/* Someone's own music story (owner 2026-10-10: "Maybe people could tell their stories as part of the app") */
.st-said { margin: 2px 0 10px; padding: 10px 0 10px 13px; border-left: 2px solid var(--gold); color: var(--ink);
  font-size: 15px; line-height: 1.55; white-space: pre-line; }
.st-ch p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink); }
.st-ch small { color: var(--dim); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.st-q { color: var(--faint); font-size: 13px; }
.st-q span { color: var(--gold); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; margin-right: 6px; }
.stchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.stchip { min-height: 32px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04); color: var(--ink); font-size: 13px; }
.storybtn { border-color: rgba(232, 199, 122, .55) !important; color: var(--gold) !important; }