/* PERIGEE — cyberpunk mission control × Bloomberg terminal. Readability first. */

@font-face { font-family: 'Chakra Petch'; font-weight: 500; src: url('/fonts/chakra-petch-latin-500-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Chakra Petch'; font-weight: 600; src: url('/fonts/chakra-petch-latin-600-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Chakra Petch'; font-weight: 700; src: url('/fonts/chakra-petch-latin-700-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Azeret Mono'; font-weight: 400; src: url('/fonts/azeret-mono-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Azeret Mono'; font-weight: 500; src: url('/fonts/azeret-mono-latin-500-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Azeret Mono'; font-weight: 600; src: url('/fonts/azeret-mono-latin-600-normal.woff2') format('woff2'); font-display: swap; }

:root {
  --void: #04060c;
  --panel: rgba(9, 14, 26, 0.95);
  --panel-solid: #0a101c;
  --line: #1c2a42;
  --line-bright: #4b6385;
  --amber: #ffb454;
  --cyan: #53e0ff;
  --red: #ff4d5e;
  --orange: #ff8a3d;
  --green: #4ade80;
  --text: #d9e3f2;
  --dim: #94a2b9;
  --faint: #74819a;
  --mono: 'Azeret Mono', ui-monospace, monospace;
  --disp: 'Chakra Petch', var(--mono);
  /* iOS-native UI font — used only inside the mobile (≤760px) restyle */
  --ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, system-ui, sans-serif;
  /* frosted-glass material tokens (mobile) */
  --glass: rgba(10, 14, 24, .72);
  --glass-strong: rgba(12, 17, 28, .82);
  --glass-solid: #0d1220; /* @supports fallback */
  --hair: rgba(255, 255, 255, .09);
  --glass-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  --spring: cubic-bezier(.32, .72, .33, 1);
  --sheet-ease: cubic-bezier(.26, .75, .28, 1.02); /* slight overshoot for sheet rise */
}

* { box-sizing: border-box; margin: 0; padding: 0; letter-spacing: 0 !important; }

html, body { height: 100%; overflow: hidden; }

body {
  background: var(--void);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.45;
}

#globe-stage, #gl { position: fixed; inset: 0; display: block; }
#gl { width: 100%; height: 100%; cursor: grab; }
#gl:active { cursor: grabbing; }

button {
  font-family: var(--mono);
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-bright);
  border-radius: 2px;
  min-height: 32px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
  transition: border-color .15s, color .15s, background .15s;
}
button:hover { border-color: var(--cyan); color: var(--cyan); }
button:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
button.active { border-color: var(--amber); color: var(--amber); background: rgba(255, 180, 84, .08); }
.icon-button { width: 34px; padding: 0; display: inline-grid; place-items: center; flex: none; }
.icon-button svg { width: 16px; height: 16px; stroke-width: 1.8; }

/* ============ status bar ============ */
#statusbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  height: calc(46px + env(safe-area-inset-top));
  display: flex; align-items: center; gap: 22px;
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  background: rgba(6, 10, 20, .96);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand .mark {
  width: 10px; height: 10px; align-self: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--cyan), #0a4a66 70%);
  box-shadow: 0 0 8px var(--cyan);
}
.brand h1 { font-family: var(--disp); font-weight: 700; font-size: 17px; color: var(--text); }
.brand .sub { font-size: 10px; color: var(--faint); }
.clocks { display: flex; gap: 18px; }
.clock { display: flex; align-items: baseline; gap: 7px; }
.clock label { font-size: 10px; color: var(--faint); }
.clock span { font-size: 13px; font-weight: 500; color: var(--dim); font-variant-numeric: tabular-nums; }
.clock.sim span { color: var(--amber); }
.clock .offset { font-size: 10px; color: var(--faint); }
.clock .offset.warped { color: var(--red); }
.feeds { display: flex; gap: 10px; margin-left: auto; }
.feed { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--faint); }
.feed .led { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 5px var(--green); }
.feed .led.stale { background: var(--amber); box-shadow: 0 0 5px var(--amber); }
.feed .led.dead { background: var(--red); box-shadow: 0 0 5px var(--red); }
.counts { font-size: 11px; color: var(--dim); }
.counts span { color: var(--cyan); font-weight: 600; }
#mobile-panel-toggle { display: none; flex: none; border-color: rgba(83, 224, 255, .45); color: var(--cyan); }
#mobile-panel-toggle[aria-expanded="true"] { border-color: var(--cyan); background: rgba(83, 224, 255, .1); }

/* location chip — jump straight to the SKY location search */
#loc-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 28px; max-width: 168px; padding: 3px 10px;
  border-color: rgba(83, 224, 255, .38); color: var(--cyan);
  font-size: 11px; letter-spacing: .04em; border-radius: 2px;
}
#loc-chip:hover { border-color: var(--cyan); background: rgba(83, 224, 255, .08); color: var(--cyan); }
#loc-chip .lc-icon { display: inline-grid; place-items: center; flex: none; }
#loc-chip .lc-icon svg { width: 14px; height: 14px; stroke-width: 1.8; }
#loc-chip .lc-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; text-transform: uppercase; }

/* ============ left rail ============ */
#rail {
  position: fixed; z-index: 15;
  top: calc(56px + env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left));
  bottom: 104px; width: 302px; /* clears the two-row transport (scrub + date rows) */
  display: flex; flex-direction: column; gap: 10px;
}
/* grab handle + backdrop only materialise for the mobile bottom sheet */
.rail-handle { display: none; }
.tp-grab { display: none; }
#rail-backdrop {
  /* full-screen scrim — no seam where the blur starts. The top pills float
     ABOVE it (mobile #statusbar z 35) so sheet-switching stays one tap. */
  position: fixed; inset: 0; z-index: 33;
  background: rgba(3, 6, 12, .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  animation: backdrop-in .24s ease both;
}
#rail-backdrop.closing { animation: backdrop-out .26s ease forwards; }
@keyframes backdrop-in { from { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } }
@keyframes backdrop-out { to { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.panel.grow { flex: 1; min-height: 0; }
.panel h2 {
  font-family: var(--disp); font-size: 12px; font-weight: 600;
  color: var(--amber); padding: 9px 12px 7px;
  border-bottom: 1px solid var(--line);
}
#layers-panel h2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 5px; }
.layers-help {
  width: 24px; min-height: 24px; height: 24px; border-color: transparent;
  color: var(--dim); flex: none;
}
.layers-help:hover { color: var(--cyan); border-color: transparent; }
.layers-help.active { color: var(--amber); border-color: var(--amber); background: rgba(255, 180, 84, .08); }
.layers-help svg { width: 15px; height: 15px; }

#layer-toggles { padding: 7px 8px 9px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 6px; align-items: start; }
/* with all 13 descriptions open the grid can outgrow the rail — scroll it */
#layer-toggles.show-desc { max-height: 44vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-bright) transparent; }
.ltoggle-cell { display: flex; flex-direction: column; min-width: 0; }
.ltoggle {
  display: flex; align-items: center; gap: 7px; padding: 4px 6px;
  width: 100%; min-height: 30px; text-align: left; background: transparent;
  border: 1px solid transparent; border-radius: 2px; cursor: pointer;
  font-size: 11px; color: var(--text); user-select: none;
}
.ltoggle:hover { border-color: var(--line-bright); }
.ltoggle:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.ltoggle .chip { width: 8px; height: 8px; border-radius: 1px; flex: none; box-shadow: 0 0 6px currentColor; }
.ltoggle > span:not(.chip):not(.n) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ltoggle .n { margin-left: auto; padding-left: 6px; color: var(--dim); font-size: 10px; font-variant-numeric: tabular-nums; }
.ltoggle.off { color: var(--dim); background: rgba(116, 129, 154, .04); }
.ltoggle.off .chip { background: transparent !important; border: 1px solid var(--faint); box-shadow: none; }
/* one-line layer explainer, hidden until the header "?" is engaged */
.ldesc { display: none; }
#layer-toggles.show-desc .ldesc {
  display: block; padding: 1px 6px 5px 21px; margin-top: -1px;
  font-size: 10px; line-height: 1.4; color: var(--faint);
}

.ticker-tabs {
  display: flex; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none; /* 8 tabs don't fit the rail — scroll, don't cram */
}
.ticker-tabs::-webkit-scrollbar { display: none; }
.ticker-tabs button {
  flex: 0 0 auto; border: none; border-radius: 0; padding: 8px 11px; font-size: 11px;
  letter-spacing: .05em; white-space: nowrap;
  color: var(--dim); border-bottom: 2px solid transparent;
}
.ticker-tabs button.active { color: var(--amber); border-bottom-color: var(--amber); background: none; }
.ticker-body { overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: var(--line-bright) transparent; }

.trow { width: 100%; min-height: 52px; padding: 8px 12px; border: 0; border-bottom: 1px solid rgba(28, 42, 66, .75); border-radius: 0; cursor: pointer; text-align: left; }
.trow:hover { background: rgba(83, 224, 255, .05); }
.trow:focus-visible { position: relative; outline: 2px solid var(--amber); outline-offset: -2px; }
.trow .t1 { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.trow .t1 .name { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .t1 .val { color: var(--amber); font-variant-numeric: tabular-nums; white-space: nowrap; }
.trow .t2 { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--dim); margin-top: 2px; }
.trow.alert .t1 .val { color: var(--red); }
.trow .tag { font-size: 10px; padding: 1px 5px; border: 1px solid var(--line-bright); border-radius: 2px; color: var(--dim); }
.tempty { padding: 16px 12px; color: var(--faint); font-size: 11px; }
/* non-clickable section headers inside the ticker body (SKY tab) */
.trow.summary { min-height: 0; padding: 7px 12px 5px; cursor: default; border-bottom: 1px solid var(--line); background: rgba(83, 224, 255, .03); }
.trow.summary .t1 .name { color: var(--dim); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }

/* ============ SKY tab: observer location + overhead sentence ============ */
.sky-panel { border-bottom: 1px solid var(--line); }
.sky-loc { padding: 9px 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.sky-loc-head { display: flex; align-items: center; gap: 8px; }
.sky-loc-label { flex: 1; min-width: 0; color: var(--cyan); font-size: 12px; font-weight: 600; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.sky-loc-coords { color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.sky-geo, .sky-apply { min-height: 26px; padding: 3px 8px; font-size: 10px; letter-spacing: .05em; border-color: rgba(83, 224, 255, .4); color: var(--cyan); flex: none; }
.sky-geo:hover, .sky-apply:hover { border-color: var(--cyan); background: rgba(83, 224, 255, .08); }
.sky-loc-manual { display: flex; gap: 6px; }
.sky-loc-manual input {
  flex: 1; min-width: 0; width: 100%; background: rgba(4, 8, 16, .6);
  border: 1px solid var(--line); border-radius: 2px; color: var(--text);
  font-family: var(--mono); font-size: 11px; padding: 4px 7px;
}
.sky-loc-manual input::placeholder { color: var(--faint); }
.sky-loc-manual input:focus { outline: none; border-color: var(--cyan); }
.sky-loc-msg:empty { display: none; }
.sky-loc-msg { font-size: 10.5px; color: var(--amber); line-height: 1.4; }
.sky-sentence { padding: 9px 12px 10px; font-size: 11.5px; line-height: 1.5; color: var(--text); border-top: 1px solid rgba(28, 42, 66, .6); }

/* smart location search (place name or "lat, lon") */
.sky-find { display: flex; flex-direction: column; gap: 0; }
.sky-find-in {
  width: 100%; background: rgba(4, 8, 16, .6); border: 1px solid var(--line);
  border-radius: 2px; color: var(--text); font-family: var(--mono); font-size: 11px; padding: 5px 8px;
}
.sky-find-in::placeholder { color: var(--faint); }
.sky-find-in:focus { outline: none; border-color: var(--cyan); }
.sky-find-in::-webkit-search-cancel-button { -webkit-appearance: none; }
.sky-find-results { max-height: 168px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-bright) transparent; }
.sky-find-results:not(:empty) { border: 1px solid var(--line); border-top: none; border-radius: 0 0 2px 2px; }
.sky-find-results .srow { padding: 6px 9px; }
.sky-find-attr { display: none; padding: 4px 2px 0; font-size: 9.5px; color: var(--faint); letter-spacing: .02em; }
.sky-find-attr.show { display: block; }

/* ============ SKY tab: push alerts ============ */
.sky-alerts { padding: 9px 12px 11px; border-top: 1px solid rgba(28, 42, 66, .6); display: flex; flex-direction: column; gap: 7px; }
.sky-alerts-head { font-size: 10px; color: var(--dim); letter-spacing: .09em; text-transform: uppercase; }
.sky-alerts-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; }
.sky-al-tog {
  display: flex; align-items: center; gap: 7px; min-height: 28px; padding: 3px 6px;
  text-align: left; background: transparent; border: 1px solid var(--line); border-radius: 2px;
  color: var(--dim); font-size: 10.5px; line-height: 1.2;
}
.sky-al-tog .box {
  width: 11px; height: 11px; flex: none; border: 1px solid var(--line-bright); border-radius: 2px;
  background: transparent; box-shadow: none; transition: background .12s, border-color .12s;
}
.sky-al-tog:hover { border-color: var(--line-bright); }
.sky-al-tog.on { color: var(--cyan); border-color: rgba(83, 224, 255, .5); }
.sky-al-tog.on .box { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 6px rgba(83, 224, 255, .6); }
.sky-alerts-actions { display: flex; gap: 6px; }
.sky-al-main { flex: 1; min-height: 30px; padding: 4px 8px; font-size: 10.5px; letter-spacing: .05em; border-color: rgba(83, 224, 255, .4); color: var(--cyan); }
.sky-al-main:hover { border-color: var(--cyan); background: rgba(83, 224, 255, .08); }
.sky-al-main.active { border-color: var(--amber); color: var(--amber); background: rgba(255, 180, 84, .08); }
.sky-al-main:disabled { opacity: .5; cursor: not-allowed; }
.sky-al-off { min-height: 30px; padding: 4px 8px; font-size: 10.5px; letter-spacing: .05em; color: var(--dim); border-color: var(--line); flex: none; }
.sky-al-off:hover { border-color: var(--red); color: var(--red); }
.sky-al-msg:empty { display: none; }
.sky-al-msg { font-size: 10.5px; color: var(--amber); line-height: 1.4; }

/* ============ LAYERS panel: LIVE / ATLAS basemap control ============ */
.earth-mode { padding: 7px 8px 6px; border-bottom: 1px solid rgba(28, 42, 66, .6); }
.earth-info {
  display: block; margin-top: 3px; padding: 2px 0; background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 10px; color: var(--faint); text-decoration: underline dotted; text-underline-offset: 2px;
}
.earth-info:hover { color: var(--dim); }
.earth-explain { font-size: 11px; line-height: 1.55; color: var(--dim); padding: 4px 0 2px; }
.earth-seg { display: flex; align-items: center; gap: 6px; }
.earth-seg-lead { font-size: 9.5px; color: var(--faint); letter-spacing: .1em; margin-right: 2px; }
.earth-opt {
  flex: 1; min-height: 26px; padding: 3px 6px; font-size: 10.5px; letter-spacing: .06em;
  border-color: var(--line); color: var(--dim); border-radius: 2px;
}
.earth-opt:hover { border-color: var(--line-bright); color: var(--text); }
.earth-opt.on { border-color: var(--amber); color: var(--amber); background: rgba(255, 180, 84, .1); }
.earth-mode-note { padding: 5px 2px 0; font-size: 9.5px; color: var(--faint); line-height: 1.4; }
.earth-mode-note.hidden { display: none; }

/* ============ inspector ============ */
#inspector {
  position: fixed; top: 56px; right: max(10px, env(safe-area-inset-right)); width: 330px; max-height: calc(100vh - 170px); /* bottom clearance for the two-row transport */ z-index: 16;
  background: var(--panel); border: 1px solid var(--line-bright); border-radius: 3px;
  padding: 12px 14px 14px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--line-bright) transparent;
  transition: transform .18s ease, opacity .18s ease;
}
#inspector.hidden { transform: translateX(24px); opacity: 0; pointer-events: none; }
.insp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.kind { font-size: 10px; color: var(--cyan); border: 1px solid rgba(83,224,255,.4); padding: 2px 8px; border-radius: 2px; }
#insp-close { border: none; color: var(--dim); font-size: 13px; padding: 2px 6px; }
#insp-close:hover { color: var(--red); }
#insp-title { font-family: var(--disp); font-size: 16px; font-weight: 600; margin: 2px 0 10px; color: var(--text); }
.irow { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid rgba(28,42,66,.5); font-size: 12px; }
.irow label { color: var(--dim); flex: none; }
.irow span { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.irow span.hot { color: var(--amber); }
.irow span.danger { color: var(--red); }
#insp-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
#inspector .note { margin-top: 10px; font-size: 11.5px; color: var(--faint); line-height: 1.5; }

/* ============ selection mini-bar ============ */
/* Compact one-row summary that sits directly above the transport on every
   viewport. Selecting an object shows this first; DETAILS opens the full panel. */
#mini-bar {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 21;
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + 104px); /* clears the transport incl. its date row */
  display: flex; align-items: center; gap: 11px;
  height: 44px; padding: 0 8px 0 13px;
  max-width: min(560px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  background: var(--panel); border: 1px solid var(--line-bright); border-radius: 6px;
  box-shadow: 0 6px 26px rgba(0, 0, 0, .55);
  animation: mb-rise .2s ease;
  transition: opacity .24s ease, transform .28s var(--spring, ease);
}
@keyframes mb-rise { from { transform: translate(-50%, 8px); opacity: 0; } }
#mini-bar .mb-chip { width: 10px; height: 10px; border-radius: 2px; flex: none; box-shadow: 0 0 7px currentColor; }
#mini-bar .mb-name {
  font-family: var(--disp); font-weight: 600; font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
#mini-bar .mb-stat { color: var(--amber); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
#mini-bar .mb-details {
  min-height: 30px; padding: 4px 13px; font-size: 11px; letter-spacing: .06em; flex: none;
  border-color: rgba(83, 224, 255, .45); color: var(--cyan);
}
#mini-bar .mb-details:hover { border-color: var(--cyan); background: rgba(83, 224, 255, .1); }
#mini-bar .mb-close { border: none; color: var(--dim); flex: none; }
#mini-bar .mb-close:hover { color: var(--red); }
/* a guided tour owns the bottom-centre slot — never show both at once */
body.tour-active #mini-bar { display: none !important; }

/* ============ transport ============ */
#transport {
  position: fixed; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20;
  width: min(760px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  background: var(--panel); border: 1px solid var(--line-bright); border-radius: 4px;
  display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; align-items: center;
  padding: 8px 14px 7px;
}
.tp-buttons { display: flex; align-items: center; gap: 7px; }
.tp-buttons .rate {
  min-width: 74px; text-align: center; color: var(--amber); font-weight: 600; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.tp-buttons .rate.rev { color: var(--red); }
#tp-rev.active { border-color: var(--red); color: var(--red); background: rgba(255,77,94,.08); }
#tp-now { color: var(--green); border-color: rgba(74,222,128,.5); }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; }
#tp-now.warped { color: var(--amber); border-color: var(--amber); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.tp-scrub { display: flex; align-items: center; gap: 10px; }
.scrub-label { font-size: 10px; color: var(--faint); }
#tp-slider { flex: 1; appearance: none; height: 20px; background: transparent; border-radius: 2px; outline: none; cursor: pointer; }
#tp-slider:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
#tp-slider::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--line-bright), var(--amber) 50%, var(--line-bright)); }
#tp-slider::-webkit-slider-thumb {
  appearance: none; width: 13px; height: 13px; border-radius: 2px;
  background: var(--amber); border: 1px solid #0a0a0a; box-shadow: 0 0 8px rgba(255,180,84,.7); cursor: ew-resize;
}
#tp-slider::-moz-range-track { height: 3px; border-radius: 2px; background: var(--line-bright); }
#tp-slider::-moz-range-thumb { width: 15px; height: 15px; border-radius: 2px; background: var(--amber); border: 1px solid #0a0a0a; cursor: ew-resize; }

/* ============ guided tours ============ */
/* The playback card takes the transport's spot at bottom-centre while a tour
   plays; the transport is hidden so they never overlap. */
body.tour-active #transport { display: none !important; }
#rail.mobile-open ~ #transport, body:has(#rail.mobile-open) #transport { z-index: 34; }

#tour-card {
  position: fixed; z-index: 22; left: 50%; transform: translateX(-50%);
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(560px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  background: var(--panel); border: 1px solid var(--line-bright); border-radius: 5px;
  padding: 11px 14px 13px; box-shadow: 0 8px 34px rgba(0, 0, 0, .55);
  display: flex; flex-direction: column; gap: 8px;
  animation: tour-rise .28s ease;
}
@keyframes tour-rise { from { transform: translate(-50%, 12px); opacity: 0; } }
.tour-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-kicker {
  font-family: var(--disp); font-size: 11px; font-weight: 700; color: var(--amber);
  text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tour-end {
  min-height: 26px; padding: 3px 9px; font-size: 10px; letter-spacing: .06em;
  color: var(--dim); border-color: var(--line); flex: none;
}
.tour-end:hover { border-color: var(--red); color: var(--red); }
.tour-text { font-size: 12.5px; line-height: 1.55; color: var(--text); }
.tour-note {
  font-size: 10.5px; line-height: 1.45; color: var(--faint);
  border-left: 2px solid var(--line-bright); padding-left: 8px;
}
.tour-note:empty { display: none; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 1px; }
.tour-dots { display: flex; gap: 6px; align-items: center; }
.tour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-bright); transition: background .2s; }
.tour-dot.done { background: var(--dim); }
.tour-dot.on { background: var(--amber); box-shadow: 0 0 7px var(--amber); }
.tour-next {
  min-height: 32px; padding: 5px 16px; font-size: 12px; font-weight: 600;
  border-color: var(--amber); color: var(--amber); background: rgba(255, 180, 84, .08); flex: none;
}
.tour-next:hover { border-color: var(--amber); color: var(--void); background: var(--amber); }
.tour-progress { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.tour-bar { display: block; height: 100%; width: 0%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }

@media (max-width: 760px) {
  #tour-card {
    width: calc(100vw - 16px); padding: 14px 16px 15px; gap: 9px; font-family: var(--ui);
    border: 0.5px solid var(--hair); border-radius: 20px;
    background: var(--glass-strong); backdrop-filter: blur(26px) saturate(1.6); -webkit-backdrop-filter: blur(26px) saturate(1.6);
    box-shadow: var(--glass-shadow); animation: tour-rise .32s var(--spring);
  }
  .tour-kicker { font-family: var(--disp); }
  .tour-text { font-family: var(--ui); font-size: 15px; line-height: 1.5; }
  .tour-note { font-family: var(--ui); font-size: 12px; border-left-color: var(--hair); }
  .tour-end { font-family: var(--ui); border-radius: 999px; text-transform: lowercase; }
  .tour-end::first-letter { text-transform: uppercase; }
  /* id-qualified so the filled cyan capsule beats the generic button.active rule */
  #tour-card .tour-next, #tour-card .tour-next.active {
    min-height: 40px; padding: 8px 20px; border-radius: 999px; font-family: var(--ui); font-size: 14px; font-weight: 600;
    border: none; color: var(--void); background: var(--cyan); text-transform: lowercase;
  }
  #tour-card .tour-next::first-letter { text-transform: uppercase; }
  #tour-card .tour-next:hover { background: var(--cyan); color: var(--void); border: none; }
  /* lift the mobile inspector sheet clear of the card */
  body.tour-active #inspector { bottom: calc(172px + env(safe-area-inset-bottom)); }
}
/* embedded consoles get tours too — keep the card inside narrow iframes */
body.embed #tour-card { width: min(376px, calc(100vw - 16px)); }

/* ============ tooltip / loading ============ */
#tooltip {
  position: fixed; z-index: 30; pointer-events: none;
  background: var(--panel-solid); border: 1px solid var(--line-bright); border-radius: 2px;
  padding: 4px 9px; font-size: 11px; color: var(--cyan); white-space: nowrap;
  box-shadow: 0 2px 14px rgba(0,0,0,.5);
}
#tooltip .cat { color: var(--faint); font-size: 10px; margin-left: 7px; }
.hidden { display: none !important; }

#loading {
  position: fixed; inset: 0; z-index: 100; background: var(--void);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  transition: opacity .5s;
}
#loading.done { opacity: 0; pointer-events: none; }
.load-ring {
  width: 54px; height: 54px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--cyan);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#loading-text { font-family: var(--disp); font-size: 12px; color: var(--dim); }

/* ============ responsive ============ */
@media (max-width: 1100px) {
  #rail { width: 250px; }
  #layer-toggles { grid-template-columns: 1fr; }
  .brand .sub, .counts { display: none; }
}
/* ======================================================================
   iOS-NATIVE MOBILE RESKIN (≤760px). Desktop (>760px) is untouched.
   Frosted-glass materials, system font for UI / mono for data, floating
   chrome, grouped-list sheet, capsule dock. Every id / testid / aria
   attribute and every [data-ui-region] stays live and non-overlapping.
   ====================================================================== */
@media (max-width: 760px) {
  html, body { min-height: 100dvh; }
  body { font-family: var(--ui); }

  /* ---------- top chrome: floating frosted pills, no status bar ---------- */
  #statusbar {
    height: auto; min-height: 0; gap: 8px; background: none; border-bottom: none;
    z-index: 35; /* above the sheet scrim (33): the pills stay bright + tappable */
    align-items: flex-start; pointer-events: none;
    padding: calc(env(safe-area-inset-top) + 10px) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
  }
  #statusbar > * { pointer-events: auto; }
  .brand {
    gap: 8px; align-items: center; padding: 7px 13px 7px 11px;
    background: var(--glass); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
    border: 0.5px solid var(--hair); border-radius: 999px; box-shadow: var(--glass-shadow);
  }
  .brand h1 { font-family: var(--disp); font-size: 15px; }
  .brand .sub, .counts, .feeds, .clock:first-child { display: none; }

  /* single centered SIM pill — only while time is warped (amber, mono data).
     Sits BELOW the corner brand/location pills so it never collides on narrow screens. */
  .clocks {
    position: fixed; left: 50%; transform: translateX(-50%);
    top: calc(env(safe-area-inset-top) + 60px); gap: 0; min-width: 0; display: none;
    max-width: calc(100vw - 24px); white-space: nowrap;
    padding: 6px 14px; background: var(--glass); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
    border: 0.5px solid rgba(255, 180, 84, .28); border-radius: 999px; box-shadow: var(--glass-shadow);
    pointer-events: auto;
  }
  body:has(#tp-now.warped) .clocks { display: flex; }
  .clock.sim { gap: 6px; align-items: baseline; }
  .clock.sim label { display: inline; font-family: var(--mono); font-size: 10px; color: var(--amber); opacity: .85; }
  .clock.sim span { font-family: var(--mono); font-size: 12px; color: var(--amber); }
  .clock .offset { display: inline; font-family: var(--mono); font-size: 10px; }
  .clock .offset:not(:empty)::before { content: '· '; color: var(--faint); }

  /* location pill, top-right */
  #loc-chip {
    max-width: 46vw; min-height: 36px; padding: 7px 13px; border-radius: 999px;
    border: 0.5px solid var(--hair); color: var(--cyan);
    background: var(--glass); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
    box-shadow: var(--glass-shadow); font-family: var(--ui);
  }
  #loc-chip .lc-label { text-transform: none; font-size: 13px; }
  #mobile-panel-toggle { display: inline-grid; }

  /* ---------- bottom sheet: frosted, grouped-list, grabber ---------- */
  #rail {
    display: none; flex-direction: column; width: auto; z-index: 40;
    top: auto; left: 0; right: 0;
    /* full-bleed sheet: anchored to the very bottom edge, covering the dock
       (z 40 beats the raised transport's 34); content padding clears the home
       indicator via the safe-area inset */
    bottom: 0;
    height: min(68vh, calc(100dvh - 140px));
    padding: 0 max(12px, env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right));
    font-family: var(--ui);
    background: var(--glass-strong); backdrop-filter: blur(26px) saturate(1.6); -webkit-backdrop-filter: blur(26px) saturate(1.6);
    border: none; border-top: 0.5px solid var(--hair);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -16px 44px rgba(0, 0, 0, .55);
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  /* the whole sheet scrolls as one grouped list — no nested scroll wells */
  #rail .panel.grow { flex: 0 0 auto; min-height: 0; }
  #ticker-body, .ticker-body { overflow: visible; max-height: none; flex: none; }
  .rail-handle { position: sticky; top: 0; z-index: 3; background: #10151f; border-radius: 20px 20px 0 0; touch-action: none; cursor: grab; }
  #rail.mobile-open { display: flex; animation: rail-rise .42s var(--sheet-ease); }
  @keyframes rail-rise { from { transform: translateY(100%); } } /* true slide from the screen edge */
  .rail-handle { display: flex; justify-content: center; padding: 8px 0 6px; flex: none; touch-action: none; cursor: grab; }
  .rail-handle:active { cursor: grabbing; }
  .rail-grip { width: 40px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .22); }

  /* sections flow with whitespace — kill the boxed sub-panels */
  #rail .panel { background: none; border: none; border-radius: 0; overflow: visible; }
  #rail #search-panel { flex: none; margin-bottom: 4px; }
  #search {
    background: rgba(255, 255, 255, .06); border-radius: 12px; padding: 11px 14px;
    font-family: var(--ui); font-size: 15px;
  }
  #search::placeholder { color: var(--dim); }
  #search:focus { box-shadow: inset 0 0 0 1px rgba(83, 224, 255, .5); }
  #search-results:not(:empty) { border-top: none; margin-top: 4px; }
  .srow { font-family: var(--ui); font-size: 14px; padding: 10px 6px; border-radius: 10px; }
  .srow .stag { font-family: var(--mono); }

  /* grouped-list section headers (LAYERS etc.) */
  .panel h2, #layers-panel h2 {
    font-family: var(--ui); font-size: 12px; font-weight: 600; color: var(--dim);
    border-bottom: none; padding: 10px 4px 6px;
  }
  .panel h2 .hd { display: inline-block; text-transform: lowercase; }
  .panel h2 .hd::first-letter { text-transform: uppercase; }
  .layers-help { color: var(--dim); }

  /* layer toggles → pill chips (filled+tinted on, dim outline off) */
  #layer-toggles { grid-template-columns: 1fr 1fr; gap: 8px; padding: 2px 4px 10px; }
  #layer-toggles.show-desc { max-height: 40vh; }
  .ltoggle {
    gap: 9px; padding: 10px 12px; min-height: 46px; border-radius: 13px; font-family: var(--ui); font-size: 14px;
    background: color-mix(in srgb, currentColor 12%, transparent); border: 0.5px solid transparent; color: var(--text);
  }
  .ltoggle:hover { border-color: transparent; }
  .ltoggle .chip { width: 10px; height: 10px; border-radius: 50%; }
  .ltoggle .n { font-family: var(--mono); font-size: 11px; }
  .ltoggle.off { background: rgba(255, 255, 255, .04); border-color: var(--hair); color: var(--dim); }
  #layer-toggles.show-desc .ldesc { font-family: var(--ui); padding-left: 23px; }

  /* EARTH: iOS segmented control (sliding filled thumb) */
  .earth-mode { border-bottom: none; padding: 4px 4px 8px; }
  .earth-seg {
    gap: 0; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .07);
    position: relative;
  }
  .earth-seg-lead { display: none; }
  .earth-opt {
    flex: 1; min-height: 44px; border: none; border-radius: 9px; background: transparent;
    color: var(--dim); font-family: var(--ui); font-size: 14px; font-weight: 500; text-transform: lowercase;
    transition: color .25s var(--spring), background .25s var(--spring);
  }
  .earth-opt::first-letter { text-transform: uppercase; }
  .earth-opt:hover { border-color: transparent; color: var(--text); }
  .earth-opt.on {
    background: rgba(255, 255, 255, .16); color: var(--text); border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  }
  .earth-mode-note { font-family: var(--ui); padding-left: 4px; }

  /* ticker: scrollable pill tabs + roomy rows with chevron */
  #ticker-panel { min-height: 0; }
  .ticker-tabs {
    border-bottom: none; gap: 10px; padding: 6px 2px 10px; overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; touch-action: pan-x; overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .ticker-tabs::-webkit-scrollbar { display: none; }
  .ticker-tabs button {
    flex: 0 0 auto; border-radius: 999px; padding: 9px 18px; font-family: var(--ui); font-size: 13px; font-weight: 500;
    background: rgba(255, 255, 255, .06); border-bottom: none; color: var(--dim); text-transform: lowercase;
  }
  .ticker-tabs button::first-letter { text-transform: uppercase; }
  .ticker-tabs button.active { background: rgba(83, 224, 255, .16); color: var(--cyan); border-bottom: none; }
  .trow { min-height: 56px; padding: 12px 8px; border-bottom: 0.5px solid var(--hair); position: relative; }
  .trow:not(.summary) { padding-right: 26px; }
  .trow:not(.summary)::after {
    content: '›'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    color: var(--faint); font-size: 18px; font-family: var(--ui);
  }
  .trow:hover { background: rgba(255, 255, 255, .04); }
  .trow .t1 { font-size: 14px; }
  .trow .t1 .name { font-family: var(--ui); }
  .trow .t1 .val, .trow .t2 { font-family: var(--mono); }
  .trow.summary { background: none; border-bottom: none; padding: 12px 8px 4px; }
  .trow.summary .t1 .name { font-family: var(--ui); font-size: 12px; font-weight: 600; text-transform: lowercase; color: var(--dim); }
  .trow.summary .t1 .name::first-letter { text-transform: uppercase; }

  /* SKY location block */
  .sky-panel { border-bottom: none; }
  .sky-loc { padding: 8px 4px 10px; }
  .sky-loc-label { font-family: var(--ui); font-size: 15px; text-transform: none; }
  .sky-loc-coords { font-family: var(--mono); }
  .sky-geo, .sky-apply {
    min-height: 44px; padding: 9px 15px; border-radius: 999px; font-family: var(--ui); font-size: 13px;
    text-transform: lowercase; border: 0.5px solid rgba(83, 224, 255, .4);
  }
  .sky-geo::first-letter, .sky-apply::first-letter { text-transform: uppercase; }
  .sky-find-in { background: rgba(255, 255, 255, .06); border-radius: 11px; font-family: var(--ui); font-size: 14px; padding: 12px 12px; min-height: 44px; }
  .sky-find-results:not(:empty) { border: none; }
  .sky-loc-manual input { background: rgba(255, 255, 255, .06); border-radius: 11px; font-family: var(--ui); }
  .sky-sentence { font-family: var(--ui); font-size: 14px; border-top: 0.5px solid var(--hair); padding: 12px 4px; }

  /* SKY alerts: grouped header + iOS switches */
  .sky-alerts { border-top: 0.5px solid var(--hair); padding: 10px 4px 12px; gap: 10px; }
  .sky-alerts-head { font-family: var(--ui); font-size: 12px; font-weight: 600; color: var(--dim); text-transform: lowercase; }
  .sky-alerts-head::first-letter { text-transform: uppercase; }
  .sky-alerts-toggles { grid-template-columns: 1fr; gap: 2px; }
  .sky-al-tog {
    justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 4px; border: none;
    border-bottom: 0.5px solid var(--hair); border-radius: 0; background: none; color: var(--text);
    font-family: var(--ui); font-size: 14px; text-align: left;
  }
  .sky-al-tog:last-child { border-bottom: none; }
  .sky-al-tog:hover { border-color: transparent; border-bottom: 0.5px solid var(--hair); }
  .sky-al-tog > span:not(.box) { order: -1; flex: 1; }
  .sky-al-tog .box {
    width: 46px; height: 28px; flex: none; border-radius: 999px; border: none;
    background: rgba(255, 255, 255, .16); position: relative; box-shadow: none;
    transition: background .25s var(--spring);
  }
  .sky-al-tog .box::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform .25s var(--spring);
  }
  .sky-al-tog.on { color: var(--text); border-color: transparent; border-bottom: 0.5px solid var(--hair); }
  .sky-al-tog.on .box { background: var(--green); box-shadow: none; }
  .sky-al-tog.on .box::after { transform: translateX(18px); }
  .sky-alerts-actions { gap: 8px; }
  .sky-al-main {
    min-height: 44px; border-radius: 12px; font-family: var(--ui); font-size: 15px; font-weight: 600;
    text-transform: lowercase; background: rgba(83, 224, 255, .14); border: 0.5px solid transparent; color: var(--cyan);
  }
  .sky-al-main::first-letter { text-transform: uppercase; }
  .sky-al-main.active { background: rgba(255, 180, 84, .14); color: var(--amber); border-color: transparent; }
  .sky-al-off {
    min-height: 44px; border-radius: 12px; font-family: var(--ui); font-size: 14px; text-transform: lowercase;
    border: 0.5px solid var(--hair); color: var(--dim);
  }
  .sky-al-off::first-letter { text-transform: uppercase; }
  .sky-al-msg, .sky-loc-msg { font-family: var(--ui); }

  /* relocated feed-health + object count → footer row inside the sheet */
  #rail-status {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
    padding: 10px 4px 2px; margin-top: auto; border-top: 0.5px solid var(--hair);
    font-family: var(--ui); font-size: 11px; color: var(--faint);
  }
  #rail-status .feeds { display: flex; gap: 10px; flex-wrap: wrap; }
  #rail-status .feed { font-family: var(--ui); font-size: 11px; }
  #rail-status .counts { display: block; font-family: var(--ui); font-size: 11px; color: var(--dim); }
  #rail-status .counts span { font-family: var(--mono); color: var(--cyan); }

  .rail-foot { font-family: var(--ui); font-size: 11px; padding: 4px 4px 2px; text-transform: none; align-items: center; }
  .rail-foot a { text-transform: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }

  /* ---------- inspector bottom sheet ---------- */
  #inspector {
    top: auto; width: auto; z-index: 22;
    left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right));
    bottom: calc(144px + env(safe-area-inset-bottom));
    max-height: min(62dvh, calc(100dvh - 210px));
    padding: 8px 18px 18px; font-family: var(--ui);
    background: var(--glass-strong); backdrop-filter: blur(26px) saturate(1.6); -webkit-backdrop-filter: blur(26px) saturate(1.6);
    border: 0.5px solid var(--hair); border-radius: 20px 20px 14px 14px; box-shadow: var(--glass-shadow);
  }
  #inspector::before {
    content: ''; display: block; width: 40px; height: 5px; border-radius: 3px;
    background: rgba(255, 255, 255, .22); margin: 6px auto 8px;
  }
  #inspector.hidden { transform: translateY(28px); }
  .insp-head { margin-bottom: 4px; }
  .kind { font-family: var(--ui); font-size: 11px; border-radius: 999px; padding: 3px 10px; }
  #insp-title { font-family: var(--ui); font-size: 20px; font-weight: 600; margin: 4px 0 12px; }
  .irow { font-size: 14px; padding: 9px 0; border-bottom: 0.5px solid var(--hair); }
  .irow label { font-family: var(--ui); }
  .irow span { font-family: var(--mono); }
  #insp-summary { font-family: var(--ui); font-size: 14px; }
  #inspector .note { font-family: var(--ui); font-size: 13px; }
  #insp-actions { gap: 10px; margin-top: 14px; }
  #insp-actions button {
    min-height: 44px; border-radius: 12px; font-family: var(--ui); font-size: 14px; font-weight: 500;
    text-transform: lowercase; background: rgba(255, 255, 255, .07); border: 0.5px solid var(--hair); color: var(--text);
  }
  #insp-actions button::first-letter { text-transform: uppercase; }
  #insp-actions button.active { background: rgba(83, 224, 255, .16); border-color: transparent; color: var(--cyan); }

  /* ---------- mini-bar: frosted two-row card — the name gets its own full
     row so long titles stop truncating behind the stat and buttons ---------- */
  #mini-bar {
    bottom: calc(92px + env(safe-area-inset-bottom)); max-width: calc(100vw - 16px);
    width: calc(100vw - 16px);
    display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center;
    grid-template-areas: "chip name name name name" "stat stat center details close";
    height: auto; row-gap: 4px; column-gap: 10px; padding: 10px 10px 8px 15px; border-radius: 22px;
    background: var(--glass); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
    border: 0.5px solid var(--hair); box-shadow: var(--glass-shadow);
  }
  #mini-bar .mb-chip { grid-area: chip; }
  #mini-bar .mb-name { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #mini-bar .mb-stat { grid-area: stat; }
  #mini-bar .mb-center { grid-area: center; }
  #mini-bar .mb-details { grid-area: details; }
  #mini-bar .mb-close { grid-area: close; }
  #mini-bar .mb-chip { width: 11px; height: 11px; border-radius: 50%; }
  #mini-bar .mb-name { font-family: var(--ui); font-size: 15px; font-weight: 600; }
  #mini-bar .mb-stat { font-family: var(--mono); font-size: 13px; }
  #mini-bar .mb-details {
    min-height: 36px; padding: 6px 14px; border-radius: 999px; font-family: var(--ui); font-size: 13px;
    text-transform: lowercase; border: 0.5px solid rgba(83, 224, 255, .45);
  }
  #mini-bar .mb-details::first-letter { text-transform: uppercase; }
  #mini-bar .mb-details::after { content: ' ›'; }

  /* ---------- transport: floating capsule dock + detached FAB ---------- */
  #transport {
    bottom: max(8px, env(safe-area-inset-bottom)); width: calc(100vw - 16px);
    left: 50%; transform: translateX(-50%);
    background: none; border: none; border-radius: 0; padding: 0;
    display: flex; align-items: center; justify-content: center; gap: 10px;
  }
  .tp-buttons {
    flex: 0 1 auto; justify-content: center; gap: 3px; padding: 5px 7px; border-radius: 999px;
    background: var(--glass); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
    border: 0.5px solid var(--hair); box-shadow: var(--glass-shadow);
  }
  .tp-buttons button, #insp-close, #mobile-panel-toggle { min-width: 44px; width: 44px; min-height: 44px; }
  .tp-buttons .icon-button { border: none; border-radius: 50%; background: transparent; }
  .tp-buttons .icon-button:hover { background: rgba(255, 255, 255, .08); color: var(--cyan); }
  #tp-slower { display: none; } /* dock stays lean; LIVE + scrub cover the range */
  .tp-buttons .rate {
    min-width: 46px; width: auto; font-family: var(--mono); font-size: 13px; cursor: pointer;
    padding: 0 4px; align-self: center;
  }
  #tp-now {
    width: auto; min-width: 62px; padding: 0 14px; border: none; border-radius: 999px;
    font-family: var(--ui); font-size: 13px; font-weight: 600; background: rgba(74, 222, 128, .14);
  }
  #tp-now.warped { background: rgba(255, 180, 84, .16); }
  #tp-now .lbl { display: inline-block; text-transform: lowercase; }
  #tp-now .lbl::first-letter { text-transform: uppercase; }

  /* detached round menu FAB, right of the dock */
  #mobile-panel-toggle {
    flex: none; border-radius: 50%; border: 0.5px solid var(--hair); color: var(--cyan);
    background: var(--glass); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
    box-shadow: var(--glass-shadow);
  }
  #mobile-panel-toggle[aria-expanded="true"] { background: rgba(83, 224, 255, .18); border-color: rgba(83, 224, 255, .5); }

  /* scrub: hidden by default, revealed as a slim frosted pill above the dock */
  .tp-scrub {
    position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px);
    display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px;
    background: var(--glass); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
    border: 0.5px solid var(--hair); box-shadow: var(--glass-shadow);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .3s var(--spring), transform .3s var(--spring), visibility .3s var(--spring);
  }
  #transport.scrub-open .tp-scrub { opacity: 1; visibility: visible; transform: translateY(0); }
  .scrub-label { font-family: var(--mono); font-size: 10px; }
  #tp-slider { min-width: 0; height: 24px; }
  #tp-slider::-webkit-slider-runnable-track { height: 4px; background: rgba(255, 255, 255, .18); }
  #tp-slider::-webkit-slider-thumb { width: 18px; height: 18px; border-radius: 50%; margin-top: -7px; border: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
  #tp-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; border: none; }

  /* embed inherits the frosted dock; keep its wordmark frosted and lifted clear
     of the centered dock so they never collide on a narrow phone iframe */
  body.embed .embed-wordmark {
    border: 0.5px solid var(--hair); border-radius: 14px;
    background: var(--glass); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
    bottom: calc(env(safe-area-inset-bottom) + 66px);
  }
}

/* solid-colour fallback where backdrop-filter is unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 760px) {
    .brand, .clocks, #loc-chip, #rail, #inspector, #mini-bar, .tp-buttons,
    #mobile-panel-toggle, .tp-scrub, #tour-card, body.embed .embed-wordmark { background: var(--glass-solid); }
    #rail { background: #0b1120; }
  }
}

/* Touch devices: guarantee ≥44px hit targets without changing desktop metrics. */
@media (pointer: coarse) {
  .tp-buttons button, #tp-now, #insp-close, #mobile-panel-toggle, .layers-help, .mb-details, #loc-chip { min-height: 44px; }
  .tp-buttons .icon-button, #mini-bar .mb-close { min-width: 44px; min-height: 44px; }
  .layers-help { width: 44px; height: 44px; }
  .ltoggle { min-height: 44px; }
  .ticker-tabs button { min-height: 44px; }
  .sky-geo, .sky-apply, .earth-opt { min-height: 44px; }
  /* keep small chevron/plain controls tappable via an invisible expanded area */
  .srow { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============ object search ============ */
#search-panel { flex: none; }
#search {
  width: 100%; background: transparent; border: none; outline: none;
  color: var(--text); font-family: var(--mono); font-size: 12px;
  padding: 9px 12px; letter-spacing: .02em;
}
#search::placeholder { color: var(--faint); }
#search:focus { box-shadow: inset 0 -1px 0 var(--amber); }
#search-results { max-height: 210px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-bright) transparent; }
#search-results:not(:empty) { border-top: 1px solid var(--line); }
.srow {
  display: flex; justify-content: space-between; gap: 8px; width: 100%;
  padding: 6px 12px; border: none; border-radius: 0; text-align: left;
  font-size: 11.5px; color: var(--text); background: none; cursor: pointer;
}
.srow:hover, .srow:focus-visible { background: rgba(83, 224, 255, .07); color: var(--cyan); }
.srow .stag { color: var(--faint); font-size: 9.5px; letter-spacing: .08em; white-space: nowrap; }

/* ============ inspector plain-english summary ============ */
#insp-summary {
  font-size: 12px; line-height: 1.55; color: var(--dim);
  border-left: 2px solid var(--amber); padding: 2px 0 2px 10px;
  margin: 0 0 10px;
}

/* ============ WebGL context-loss overlay ============ */
#gl-lost {
  position: fixed; inset: 0; z-index: 200; background: var(--void);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--disp); font-size: 13px; color: var(--cyan);
}

/* ============ embed mode (?embed) ============ */
/* Iframe-friendly console: drop the rail and most chrome, keep the clocks, the
   globe and a minimal transport (play/pause · rate · LIVE). Inspector still opens
   on click — an interactive embed is the whole point. */
body.embed #rail,
body.embed #mobile-panel-toggle,
body.embed #feed-health,
body.embed .counts,
body.embed #tp-rev,
body.embed #tp-slower,
body.embed #tp-faster,
body.embed .tp-scrub { display: none !important; }
body.embed #transport {
  grid-template-columns: auto; width: auto; /* shrink to the 3 controls, stay centered */
}

.embed-wordmark { display: none; }
body.embed .embed-wordmark {
  display: flex; flex-direction: column; gap: 1px; z-index: 25;
  position: fixed; text-decoration: none;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 3px;
  background: rgba(6, 10, 20, .72);
}
.embed-wordmark .ew-mark { font-family: var(--disp); font-weight: 700; font-size: 13px; color: var(--text); }
.embed-wordmark .ew-open { font-size: 9.5px; color: var(--cyan); }
.embed-wordmark:hover { border-color: var(--cyan); }
.embed-wordmark:hover .ew-open { color: var(--amber); }
.embed-wordmark:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }

/* rail footer: credits + privacy (App Store attribution surface) */
.rail-foot { display: flex; gap: 7px; align-items: center; padding: 2px 4px 0; font-size: 9.5px; letter-spacing: .08em; color: var(--faint); }
.rail-foot a { color: var(--dim); text-decoration: none; }
.rail-foot a:hover, .rail-foot a:focus-visible { color: var(--cyan); }
body.embed .rail-foot { display: none; }
body.embed #loc-chip { display: none; } /* no rail to open inside an embed */

/* ======================================================================
   Mobile overrides for sections defined AFTER the main ≤760px block above
   (object search, inspector summary). Placed last so they win the cascade
   at equal specificity. Desktop (>760px) untouched.
   ====================================================================== */
@media (max-width: 760px) {
  #search {
    background: rgba(255, 255, 255, .06); border-radius: 12px; padding: 12px 14px; min-height: 44px;
    font-family: var(--ui); font-size: 15px; color: var(--text);
  }
  #search::placeholder { color: var(--dim); }
  #search:focus { box-shadow: inset 0 0 0 1px rgba(83, 224, 255, .5); }
  #search-results { max-height: 220px; }
  #search-results:not(:empty) { border-top: none; margin-top: 4px; }
  .srow { font-family: var(--ui); font-size: 14px; padding: 11px 8px; border-radius: 10px; }
  .srow:hover, .srow:focus-visible { background: rgba(83, 224, 255, .1); }
  .srow .stag { font-family: var(--mono); font-size: 11px; }
  #insp-summary { font-family: var(--ui); font-size: 14px; line-height: 1.5; }
  /* embed wordmark: frosted + lifted clear of the centered dock (defined here so
     it wins over the base body.embed rule that sits earlier in this section) */
  body.embed .embed-wordmark {
    border: 0.5px solid var(--hair); border-radius: 14px; padding: 8px 12px;
    background: var(--glass); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
    bottom: calc(env(safe-area-inset-bottom) + 66px);
  }
}

/* hover tooltip is desktop-only — on touch it strands mid-screen after a tap */
@media (pointer: coarse) { #tooltip { display: none !important; } }

/* ======================================================================
   v1.9 — mobile time dock + layer-chip clarity + settings + motion.
   New chrome (time pill / panel / backdrop, now-tick) is display:none on
   desktop so the >760px console stays byte-for-byte v1.8. Only the SETTINGS
   ticker tab is intentionally shared with desktop (inherits console styling).
   ====================================================================== */

/* new phone-only transport chrome is invisible on desktop */
#time-pill, #time-panel, #time-backdrop, .scrub-tick-now { display: none; }

/* ---- SETTINGS tab: console idiom on desktop (grouped rows in the ticker) ---- */
.settings { padding: 2px 0 6px; }
.set-group { border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.set-group:last-child { border-bottom: none; }
.set-head {
  font-family: var(--disp); font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--dim); padding: 9px 12px 5px;
}
.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: 40px; padding: 9px 12px; border: none; border-radius: 0; background: none;
  color: var(--text); font-family: var(--mono); font-size: 12px; text-align: left; text-decoration: none;
  transition: background .15s, color .15s;
}
button.set-row { cursor: pointer; }
.set-row.set-static { cursor: default; }
.set-link:hover { background: rgba(83, 224, 255, .05); color: var(--cyan); border-color: transparent; }
.set-chev { color: var(--faint); font-size: 15px; flex: none; }
.set-val { color: var(--cyan); font-variant-numeric: tabular-nums; }
.set-foot { padding: 10px 12px 4px; font-size: 10.5px; color: var(--faint); line-height: 1.45; }

/* ======================================================================
   ≤760px mobile: overrides for v1.9. Appended last so equal-specificity
   rules win the cascade over the earlier mobile block.
   ====================================================================== */
@media (max-width: 760px) {
  /* ---------- (1) layer chips: unmistakable ON vs OFF at arm's length ---------- */
  .ltoggle {
    background: color-mix(in srgb, var(--cat, #7f8ba0) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--cat, #7f8ba0) 45%, transparent);
    color: var(--text);
    transition: transform .12s var(--spring), background .2s ease, border-color .2s ease, opacity .2s ease;
  }
  .ltoggle:active { transform: scale(.97); }
  .ltoggle .chip { box-shadow: 0 0 8px var(--cat, currentColor); }
  .ltoggle .n { color: color-mix(in srgb, var(--cat, #ffffff) 55%, #ffffff); font-weight: 600; }
  .ltoggle.off { opacity: .4; background: transparent; border-color: var(--hair); color: var(--dim); }
  .ltoggle.off .chip { background: var(--faint) !important; box-shadow: none !important; }

  /* ---------- (2) time dock — non-embed phones only ---------- */
  body:not(.embed) .tp-buttons { gap: 6px; padding: 5px 8px; }
  /* obsolete on phones: the ladder/reverse now live in the time panel */
  body:not(.embed) #tp-rev,
  body:not(.embed) #tp-slower,
  body:not(.embed) #tp-faster,
  body:not(.embed) .tp-buttons .rate { display: none; }

  /* the time pill: compact clock readout + the tap target for the panel */
  body:not(.embed) #time-pill {
    display: inline-flex; align-items: center; gap: 7px; width: auto; min-width: 0;
    min-height: 44px; padding: 0 15px; border: none; border-radius: 999px; cursor: pointer;
    background: rgba(255, 255, 255, .08); color: var(--text);
    font-family: var(--mono); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
    transition: background .2s var(--spring), color .2s var(--spring);
  }
  body:not(.embed) #time-pill:hover { background: rgba(255, 255, 255, .12); color: var(--text); border: none; }
  body:not(.embed) #time-pill[aria-expanded="true"] { background: rgba(83, 224, 255, .2); }
  body:not(.embed) #time-pill.warped { color: var(--amber); background: rgba(255, 180, 84, .16); }
  #time-pill .tp-pill-dot {
    width: 7px; height: 7px; border-radius: 50%; flex: none;
    background: var(--cyan); box-shadow: 0 0 7px var(--cyan);
  }
  #time-pill.warped .tp-pill-dot { background: var(--amber); box-shadow: 0 0 7px var(--amber); }

  /* LIVE renders ONLY when time is warped (you're already live otherwise) */
  body:not(.embed) #tp-now { display: none; }
  body:not(.embed) #tp-now.warped {
    display: inline-flex; align-items: center; justify-content: center;
    width: auto; min-width: 62px; min-height: 44px; padding: 0 16px; border: none; border-radius: 999px;
    font-family: var(--ui); font-size: 13px; font-weight: 600; text-transform: lowercase;
    background: var(--green); color: #062712;
    animation: live-pulse 2.4s ease-in-out infinite;
  }
  body:not(.embed) #tp-now.warped:hover { background: var(--green); color: #062712; border: none; }
  body:not(.embed) #tp-now.warped .live-dot { background: #062712; }

  /* the time panel: springs up above the dock */
  body:not(.embed) #time-panel {
    display: flex; flex-direction: column; gap: 12px;
    position: absolute; left: 8px; right: 8px; bottom: calc(100% + 12px);
    padding: 14px; border-radius: 20px; z-index: 41;
    background: var(--glass-strong); backdrop-filter: blur(26px) saturate(1.6); -webkit-backdrop-filter: blur(26px) saturate(1.6);
    border: 0.5px solid var(--hair); box-shadow: var(--glass-shadow);
    opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98); transform-origin: bottom center;
    pointer-events: none;
    transition: opacity .3s var(--spring), transform .34s var(--spring), visibility .34s var(--spring);
  }
  body:not(.embed) #time-panel.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  body:not(.embed) #time-panel .tp-grab { display: block; padding: 0 0 6px; margin: -4px 0 0; touch-action: none; cursor: grab; }
  body:not(.embed) #time-panel .tp-grab::before {
    content: ''; display: block; width: 36px; height: 4px; border-radius: 2px;
    background: rgba(255, 255, 255, .22); margin: 0 auto;
  }
  body:not(.embed) #time-backdrop { display: block; position: fixed; inset: 0; z-index: 40; background: transparent; }
  /* the time panel owns the bottom while open: the selection mini-bar steps
     aside (selection is kept) and glides back when the panel closes */
  body.time-open #mini-bar { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(10px); }
  body:not(.embed) #time-backdrop.hidden { display: none; }

  /* (a) scrubber relocated into the panel — full-width slider + −7d / now / +7d ticks */
  #time-panel .tp-scrub {
    position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    padding: 2px 2px 4px; opacity: 1; visibility: visible; transform: none;
    background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  #time-panel #tp-slider { order: -1; flex: 0 0 100%; width: 100%; min-width: 0; }
  #time-panel .scrub-label { flex: 1; }
  #time-panel .tp-scrub .scrub-label:first-of-type { text-align: left; }
  #time-panel .scrub-tick-now { display: block; text-align: center; color: var(--dim); }
  #time-panel .tp-scrub .scrub-label:last-of-type { text-align: right; }

  /* (b) speed ladder — labelled from SimClock's real rungs */
  .tp-speeds { display: flex; flex-wrap: wrap; gap: 6px; }
  .tp-speed {
    flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 8px 6px; border-radius: 12px;
    border: 0.5px solid var(--hair); background: rgba(255, 255, 255, .05); color: var(--dim);
    font-family: var(--ui); font-size: 13px; font-weight: 500;
    transition: background .2s var(--spring), color .2s var(--spring), transform .12s var(--spring);
  }
  .tp-speed:hover { color: var(--text); border-color: var(--hair); }
  .tp-speed:active { transform: scale(.96); }
  .tp-speed.on { background: rgba(83, 224, 255, .18); color: var(--cyan); border-color: transparent; font-weight: 600; }

  /* (c) direction segmented control */
  .tp-dir { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .07); }
  .tp-dir-opt {
    flex: 1; min-height: 46px; border: none; border-radius: 9px; background: transparent; color: var(--dim);
    font-family: var(--ui); font-size: 14px; font-weight: 500;
    transition: background .25s var(--spring), color .25s var(--spring);
  }
  .tp-dir-opt:hover { border: none; color: var(--text); }
  .tp-dir-opt.on { background: rgba(255, 255, 255, .16); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
  .tp-dir-opt[data-dir="rev"].on { color: var(--red); }

  /* (d) jump to now */
  .tp-jump {
    width: 100%; min-height: 46px; border: none; border-radius: 12px;
    background: rgba(74, 222, 128, .16); color: var(--green);
    font-family: var(--ui); font-size: 15px; font-weight: 600;
    transition: transform .12s var(--spring), background .2s;
  }
  .tp-jump:hover { background: rgba(74, 222, 128, .24); color: var(--green); border: none; }
  .tp-jump:active { transform: scale(.985); }

  /* ---------- (3) motion pass ---------- */
  /* boot entrance for the floating chrome + dock (initial-hidden state lives in the
     keyframe, never in the base rule, so reduced-motion shows them instantly) */
  .brand, #loc-chip { animation: chrome-in .42s var(--spring) both; }
  body:not(.embed) .tp-buttons { animation: chrome-in .46s var(--spring) both; }
  #mobile-panel-toggle { animation: chrome-in .5s var(--spring) both; }

  /* bottom sheet: spring up 14% below rest with a slight overshoot; the active
     mode's sections then cascade (opacity + translateY, staggered via --i) */
  #rail.mobile-open { animation: rail-rise .42s var(--sheet-ease); }
  #rail .sheet-mode.on .sheet-sect {
    animation: sheet-section .26s var(--sheet-ease) both;
    animation-delay: calc(80ms + var(--i, 0) * 45ms);
  }
  /* mode switch while open: content re-cascades + the sheet height eases — never
     a close/reopen, so #rail keeps .mobile-open the whole time */
  #rail.mode-switching { transition: max-height .3s var(--sheet-ease); }
  /* bottom sheet: animate DOWN before hiding (JS adds .closing, removes on animationend) */
  #rail.closing { display: flex; animation: rail-fall .26s ease-in forwards; }

  /* ---------- (4) settings: iOS grouped list ---------- */
  .settings { padding: 4px 0 10px; }
  .set-group { border-bottom: none; padding-bottom: 0; margin-bottom: 14px; }
  .set-head {
    font-family: var(--ui); font-size: 12px; font-weight: 600; color: var(--dim);
    text-transform: lowercase; letter-spacing: 0; padding: 6px 4px 8px;
  }
  .set-head::first-letter { text-transform: uppercase; }
  .set-row {
    min-height: 50px; padding: 13px 14px; font-family: var(--ui); font-size: 15px;
    background: rgba(255, 255, 255, .05); border-bottom: 0.5px solid var(--hair);
  }
  .set-group .set-row:first-of-type { border-radius: 14px 14px 0 0; }
  .set-group .set-row:last-of-type { border-radius: 0 0 14px 14px; border-bottom: none; }
  .set-link:hover { background: rgba(255, 255, 255, .08); color: var(--text); }
  .set-val { font-family: var(--mono); color: var(--cyan); font-size: 14px; }
  .set-chev { font-size: 20px; }
  .set-foot { font-family: var(--ui); font-size: 12px; color: var(--faint); padding: 12px 4px 2px; }

  @keyframes chrome-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes sheet-section { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes rail-fall { from { transform: translateY(0); } to { transform: translateY(100%); } }
  @keyframes anchor-glow {
    0% { box-shadow: 0 0 0 0 rgba(83, 224, 255, 0); }
    35% { box-shadow: 0 0 0 3px rgba(83, 224, 255, .28), var(--glass-shadow); }
    100% { box-shadow: 0 0 0 0 rgba(83, 224, 255, 0); }
  }
  @keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
}

/* solid-colour fallback for the new frosted panel where backdrop-filter is absent */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 760px) {
    body:not(.embed) #time-panel { background: var(--glass-solid); }
  }
}

/* mini-bar center-view button */
#mini-bar .mb-center { flex: none; color: var(--cyan); border-color: rgba(83, 224, 255, .35); }
#mini-bar .mb-center:hover { border-color: var(--cyan); }
@media (pointer: coarse) { #mini-bar .mb-center { min-width: 44px; min-height: 44px; } }

/* home location: card treatment (mobile) */
@media (max-width: 760px) {
  .sky-loc {
    background: rgba(255, 255, 255, .05); border-radius: 14px;
    padding: 12px 14px 13px; margin: 2px 0 6px; gap: 8px;
  }
  .sky-loc-head { align-items: center; }
  .sky-loc-label { font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--text); }
  .sky-loc-label::before {
    content: ''; display: inline-block; width: 9px; height: 9px; margin: 0 8px 1px 0;
    border-radius: 50%; border: 2px solid var(--cyan); box-shadow: 0 0 7px rgba(83, 224, 255, .6);
    vertical-align: baseline;
  }
  .sky-loc-coords { font-size: 12px; color: var(--faint); margin-top: -4px; padding-left: 21px; }
  .sky-geo {
    border: none; background: rgba(83, 224, 255, .12); border-radius: 999px;
    padding: 7px 13px; font-family: var(--ui); font-size: 13px; font-weight: 600; letter-spacing: 0;
  }
}

/* ALERTS is its own ticker tab (not stacked under the SKY location card), so it
   has no sibling above it — drop the divider that separated the two in-panel. */
.sky-alerts.sky-alerts-tab { border-top: none; }

/* ======================================================================
   v1.13 — details-panel 3D preview, Go-to-date time machine, PERIGEE Pro
   ====================================================================== */

/* ---- details-panel 3D model preview (shared singleton renderer) ---- */
.insp-preview {
  position: relative; width: 100%; height: 148px; margin: 2px 0 12px;
  border: 1px solid var(--line); border-radius: 3px; overflow: hidden;
  background:
    radial-gradient(130% 96% at 50% 0%, rgba(83, 224, 255, .08), transparent 68%),
    linear-gradient(180deg, rgba(10, 16, 28, .6), rgba(4, 7, 13, .78));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
}
.insp-preview-canvas { display: block; width: 100%; height: 100%; }

/* ---- "Go to date" time machine (desktop: right end of the scrub row) ---- */
.tp-date {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0;
  grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 6px; margin-top: 1px;
}
.tp-scrub { min-width: 0; }
.tp-scrub #tp-slider { flex: 1 1 120px; min-width: 90px; }
.tp-date-lbl { display: none; } /* the PRO badge + picker is self-explanatory in the scrub row */
.tp-date-badge {
  font-family: var(--disp); font-size: 8.5px; font-weight: 700; line-height: 1;
  color: var(--amber); border: 1px solid var(--amber); border-radius: 3px; padding: 2px 4px;
}
.tp-date-lbl { font-size: 10px; color: var(--faint); text-transform: uppercase; }
.tp-date-input {
  font-family: var(--mono); font-size: 11px; color: var(--text); color-scheme: dark; width: 156px;
  background: rgba(4, 8, 16, .6); border: 1px solid var(--line); border-radius: 2px; padding: 3px 6px;
}
.tp-date-input:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.tp-date-today {
  font-family: var(--mono); font-size: 10px; color: var(--dim); background: none;
  border: 1px solid var(--line); border-radius: 2px; padding: 3px 7px;
}
.tp-date-today:hover { color: var(--text); border-color: var(--line-bright); }
.tp-date-go {
  font-family: var(--disp); font-size: 11px; font-weight: 700; letter-spacing: .06em !important;
  color: var(--amber); border: 1px solid var(--amber); border-radius: 2px; padding: 3px 11px; background: rgba(255, 180, 84, .08);
}
.tp-date-go:hover { background: var(--amber); color: var(--void); }
/* keep the scrub row from squeezing on narrower desktops: drop the word label */

/* ---- Settings → Membership row badge ---- */
.set-pro-badge {
  font-family: var(--disp); font-size: 8.5px; font-weight: 700; line-height: 1; white-space: nowrap;
  color: var(--amber); border: 1px solid var(--amber); border-radius: 3px; padding: 1px 4px; margin-left: 7px;
}

/* ---- PERIGEE Pro upsell sheet ---- */
.pro-sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.pro-sheet.hidden { display: none !important; }
.pro-backdrop { position: absolute; inset: 0; background: rgba(3, 6, 12, .62); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; transition: opacity .25s ease; }
.pro-sheet.open .pro-backdrop { opacity: 1; }
.pro-card {
  outline: none; /* dialog container takes initial focus; no ring needed */
  touch-action: none; /* the card owns downward drags (flick to dismiss) */
  position: relative; z-index: 1; width: min(440px, calc(100vw - 24px));
  background: var(--panel); border: 1px solid var(--line-bright); border-radius: 12px;
  padding: 20px 22px 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  transform: translateY(16px); opacity: 0;
  transition: transform .32s var(--spring), opacity .28s var(--spring);
}
.pro-sheet.open .pro-card { transform: none; opacity: 1; }
.pro-badge {
  display: inline-block; font-family: var(--disp); font-size: 10px; font-weight: 700; letter-spacing: .1em !important;
  color: var(--amber); border: 1px solid var(--amber); border-radius: 4px; padding: 2px 9px; margin-bottom: 13px;
}
.pro-card h2 { font-family: var(--disp); font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.pro-copy { font-size: 13.5px; line-height: 1.6; color: var(--dim); margin-bottom: 12px; }
.pro-feats { list-style: none; margin: 0 0 12px; padding: 0; }
.pro-feats li { font-size: 13px; line-height: 1.55; color: var(--dim); padding: 3px 0 3px 18px; position: relative; }
.pro-feats li::before { content: '+'; position: absolute; left: 2px; color: var(--amber); font-weight: 700; }
.pro-fine { font-size: 12px; line-height: 1.5; color: var(--faint); margin-bottom: 18px; }
.pro-mini {
  display: inline-block; font-family: var(--disp); font-size: 7.5px; font-weight: 700;
  color: var(--amber); border: 1px solid var(--amber); border-radius: 3px;
  padding: 1px 3px; margin-left: 5px; vertical-align: 2px; letter-spacing: .06em;
}
.pro-cta {
  display: block; width: 100%; margin-top: 4px; min-height: 50px; cursor: pointer;
  background: var(--amber); color: #14100a; border: none; border-radius: 12px;
  font-family: var(--ui); font-size: 16px; font-weight: 700; letter-spacing: .01em;
}
.pro-cta:hover { filter: brightness(1.08); }
.pro-redeem {
  display: block; margin: 10px auto 0; background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 11.5px; color: var(--dim); text-decoration: underline;
  text-underline-offset: 3px; padding: 4px 8px;
}
.pro-redeem:hover { color: var(--text); }
/* hierarchy: the trial CTA is the hero; "keep free" is a quiet text action */
#pro-sheet .pro-dismiss {
  display: block; width: auto; margin: 12px auto 0; min-height: 0; padding: 8px 10px;
  background: none; border: none; cursor: pointer;
  font-family: var(--ui); font-size: 13px; color: var(--dim); text-decoration: none;
}
#pro-sheet .pro-dismiss:hover { color: var(--text); }

/* (legacy .pro-dismiss button styles removed — the quiet text style above is the design) */

@media (max-width: 760px) {
  /* preview reads as a framed viewport inside the frosted sheet */
  .insp-preview { border-radius: 14px; border: 0.5px solid var(--hair); background:
    radial-gradient(130% 96% at 50% 0%, rgba(83, 224, 255, .1), transparent 66%),
    rgba(255, 255, 255, .03); }

  /* date row becomes a stacked panel row: [PRO] [label] [Today] / [input] / [GO] */
  #time-panel .tp-date { flex-wrap: wrap; gap: 8px; padding: 0; border: none; }
  #time-panel .tp-date-badge { order: 0; }
  #time-panel .tp-date-lbl { display: block; order: 1; flex: 1; font-family: var(--ui); font-size: 13px; color: var(--dim); text-transform: none; }
  #time-panel .tp-date-input { flex: 1 1 100%; min-width: 0; width: auto; }
  #time-panel .tp-date-go { flex: none; }
  #time-panel .tp-date-today {
    order: 2; flex: none; min-height: 34px; padding: 4px 12px; border-radius: 999px;
    font-family: var(--ui); font-size: 12px; border: 0.5px solid var(--hair); color: var(--dim); background: rgba(255, 255, 255, .05);
  }
  #time-panel .tp-date-input {
    order: 3; flex: 1 1 100%; width: 100%; min-height: 46px; padding: 0 12px; border-radius: 12px;
    font-family: var(--mono); font-size: 15px; background: rgba(255, 255, 255, .05); border: 0.5px solid var(--hair);
  }
  #time-panel .tp-date-go {
    order: 4; flex: 1 1 100%; min-height: 46px; border-radius: 12px; font-family: var(--ui); font-size: 15px;
    color: var(--amber); border: 0.5px solid rgba(255, 180, 84, .5); background: rgba(255, 180, 84, .14);
  }
  #time-panel .tp-date-go:hover { background: rgba(255, 180, 84, .14); color: var(--amber); }

  /* upsell: bottom sheet, frosted, with a grabber */
  .pro-sheet { align-items: flex-end; }
  .pro-card {
    width: calc(100vw - 16px); margin-bottom: max(8px, env(safe-area-inset-bottom));
    padding: 20px 22px 24px; font-family: var(--ui); border-radius: 22px;
    background: var(--glass-strong); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6);
    border: 0.5px solid var(--hair); box-shadow: var(--glass-shadow);
  }
  .pro-card::before { content: ''; display: block; width: 40px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .22); margin: -4px auto 14px; }
  .pro-card h2 { font-family: var(--disp); font-size: 21px; }
  .pro-copy { font-family: var(--ui); font-size: 15px; }
  .pro-fine { font-family: var(--ui); font-size: 13px; }
  .pro-cta { min-height: 52px; border-radius: 14px; }
  #pro-sheet .pro-dismiss { min-height: 44px; } /* quiet text link, tap-target sized */
}

/* Reduced motion: the preview holds a static pose (JS also skips its rAF spin) */
@media (prefers-reduced-motion: reduce) {
  .pro-card, .pro-backdrop { transition: none; }
}

/* Go-to-date input: native datetime widgets need explicit dark treatment or
   they render cramped with a white calendar glyph (the "weird UI" report) */
#tp-date, .tp-date-input {
  color-scheme: dark;
  min-width: 186px; height: 30px; padding: 0 8px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line-bright); border-radius: 4px;
  color: var(--text); font-family: var(--mono); font-size: 12px;
}
#tp-date::-webkit-calendar-picker-indicator, .tp-date-input::-webkit-calendar-picker-indicator {
  filter: invert(0.75) sepia(0.3) saturate(3) hue-rotate(160deg); opacity: .8; cursor: pointer;
}
#tp-date:focus, .tp-date-input:focus { outline: none; border-color: var(--cyan); }
.tp-scrub #tp-date { flex: none; }
@media (max-width: 760px) {
  .tp-date-input, #tp-date { height: 44px; border-radius: 12px; font-size: 15px; width: 100%; min-width: 0; background: rgba(255,255,255,.07); border: none; padding: 0 12px; }
}

/* ======================================================================
   v1.14 — FOUR-MODE BOTTOM SHEET (mobile). One physical #rail, four content
   modes summoned from their own anchors (wordmark pill · location pill ·
   browser FAB · filters FAB). Desktop (>760px) is untouched: the mode
   wrappers stay empty + display:none, both FABs are hidden, and the SETTINGS
   ticker tab remains. All motion is transform/opacity (+ one max-height),
   with a full reduced-motion fallback via the global rule above.
   ====================================================================== */

/* wrappers: hidden everywhere except the active mode on a mobile sheet.
   On desktop they are empty (content lives back in the rail), so display:none
   is a no-op and the persistent rail renders exactly as before. */
.sheet-mode { display: none; }
/* the second FAB is phone-only, mirroring #mobile-panel-toggle */
#mobile-browser-toggle { display: none; }

@media (max-width: 760px) {
  /* only the active mode's content group is shown inside the sheet */
  #rail .sheet-mode.on { display: flex; flex-direction: column; }

  /* mode-scoped sheet heights (max-height cap; content-driven below it). The
     switch between modes eases this value while #rail stays .mobile-open. */
  #rail {
    height: auto;
    max-height: min(58vh, calc(100dvh - 176px));
    transition: max-height .3s var(--sheet-ease);
  }
  #rail[data-sheet-mode="location"] { max-height: min(42vh, calc(100dvh - 176px)); }
  #rail[data-sheet-mode="filters"]  { max-height: min(58vh, calc(100dvh - 176px)); }
  #rail[data-sheet-mode="browser"]  { max-height: min(62vh, calc(100dvh - 176px)); }
  #rail[data-sheet-mode="wordmark"] { max-height: min(54vh, calc(100dvh - 176px)); }

  /* rail-foot (credits/privacy) is duplicated inside the wordmark sheet's
     Settings content — hide the rail's own copy on phones */
  #rail > .rail-foot { display: none; }
  /* SETTINGS moved to the wordmark sheet: drop its ticker tab on mobile */
  .ticker-tabs button[data-key="settings"] { display: none; }

  /* wrappers carry no chrome of their own — they just group relocated panels.
     The panels keep their natural height (ticker body overflows visibly) and the
     whole #rail sheet scrolls as one grouped list, so the feed-health footer flows
     after the ticker rows instead of overlapping them. */
  .sheet-mode { gap: 0; }
  .sheet-mode > #layers-panel, .sheet-mode > #search-panel,
  .sheet-mode > #ticker-panel, .sheet-mode > .sky-loc, .sheet-mode > .settings { width: 100%; }
  /* the browser footer (feed LEDs + count) simply follows the ticker — no auto push */
  .sheet-mode[data-mode="browser"] > #rail-status { margin-top: 10px; }

  /* ---------- browser FAB: frosted round, left of the filters FAB ---------- */
  #mobile-browser-toggle {
    display: inline-grid; flex: none; min-width: 44px; width: 44px; min-height: 44px;
    border-radius: 50%; border: 0.5px solid var(--hair); color: var(--cyan);
    background: var(--glass); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
    box-shadow: var(--glass-shadow); animation: chrome-in .54s var(--spring) both;
  }
  #mobile-browser-toggle[aria-expanded="true"] { background: rgba(83, 224, 255, .18); border-color: rgba(83, 224, 255, .5); }

  /* ---------- SKY tab: slim location summary line (opens the location sheet) ---------- */
  .sky-loc-summary {
    display: flex; align-items: center; gap: 9px; width: 100%; min-height: 48px;
    padding: 11px 13px; margin: 2px 0 8px; border-radius: 13px; text-align: left;
    background: rgba(255, 255, 255, .05); border: 0.5px solid var(--hair); color: var(--text);
    font-family: var(--ui); font-size: 14px;
    transition: transform .12s var(--spring), background .2s var(--spring);
  }
  .sky-loc-summary:hover { background: rgba(255, 255, 255, .08); border-color: var(--hair); color: var(--text); }
  .sky-loc-summary:active { transform: scale(.985); }
  .sky-loc-summary .sls-dot {
    width: 9px; height: 9px; flex: none; border-radius: 50%;
    border: 2px solid var(--cyan); box-shadow: 0 0 7px rgba(83, 224, 255, .6);
  }
  .sky-loc-summary .sls-label { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sky-loc-summary .sls-edit { flex: none; color: var(--cyan); font-size: 13px; }

  /* ---------- anchors: 120ms press-scale + a brief glow tick on open ---------- */
  .brand, #loc-chip, #mobile-panel-toggle, #mobile-browser-toggle {
    transition: transform .12s var(--spring), background .2s var(--spring), border-color .2s var(--spring), box-shadow .2s var(--spring);
  }
  .brand[role="button"] { cursor: pointer; }
  .brand[role="button"]:active,
  #loc-chip:active, #mobile-panel-toggle:active, #mobile-browser-toggle:active { transform: scale(.94); }
  .anchor-tick { animation: anchor-glow .5s ease; }
}

/* solid-colour fallback for the new frosted FAB where backdrop-filter is absent */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 760px) { #mobile-browser-toggle { background: var(--glass-solid); } }
}