/* Sky map: the working tool. The sky fills the screen; the controls stand on the ground and at the edges, in tone, not boxes.
   Search top left (phone: above the clock), the clock and its tape bottom left, what to show bottom right, the card lifts. */

/* the page title stays for screen readers and search engines; the map is the page */
.js #main[data-page='sky'] > .page { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:has(#main[data-page='sky']) { overflow: hidden; overscroll-behavior: none; }
html:has(#main[data-page='sky']) .foot { display: none; }

.map { position: fixed; inset: 0; z-index: 2; pointer-events: none; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.map [hidden] { display: none !important; }
.map-stage, .map-search, .map-card, .map-nogl, .map-dock button, .map-tape, .map-layers { pointer-events: auto; }
.map button { -webkit-user-select: none; user-select: none; }

/* the sky itself takes the hand */
.map-stage { position: absolute; inset: 0; touch-action: none; cursor: grab; outline: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.map-stage.is-grabbing { cursor: grabbing; }
.map-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }

/* names, placed on the drawn pixels by the page each frame */
.map-labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity var(--sheet) var(--shutter);
  -webkit-mask: linear-gradient(transparent calc(var(--bar-h) - 14px), #000 calc(var(--bar-h) + 18px)); mask: linear-gradient(transparent calc(var(--bar-h) - 14px), #000 calc(var(--bar-h) + 18px)); }
.is-named .map-labels { opacity: 1; }
.lbl-group { position: absolute; inset: 0; }
.lbl { position: absolute; left: 0; top: 0; visibility: hidden; white-space: nowrap; font-size: 15px; line-height: 1.1; text-shadow: 0 0 7px var(--ground), 0 0 2px var(--ground); }
.lbl-star { color: var(--ink-soft); font-weight: 460; }
.lbl-body { color: var(--ink); font-size: 16px; font-weight: 580; }
.lbl-con { color: var(--ink-faint); font-stretch: 125%; font-weight: 440; letter-spacing: .05em; }
.lbl-dir { color: var(--ink); font-size: 17px; font-stretch: 118%; font-weight: 560; }
.lbl-dir--minor { color: var(--ink-soft); font-size: 15px; font-weight: 460; }
.lbl-dso { color: var(--ink-faint); font-weight: 460; }

/* the selected object: a reticle in the sky's own colour */
.map-ring { position: absolute; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none; transition: opacity var(--touch) var(--shutter); }
.map-ring::before { content: ''; position: absolute; left: calc(-1 * var(--r, 15px)); top: calc(-1 * var(--r, 15px)); width: calc(2 * var(--r, 15px)); height: calc(2 * var(--r, 15px));
  border-radius: 50%; border: 2px solid var(--accent); box-sizing: border-box;
  -webkit-mask: repeating-conic-gradient(from 18deg, #000 0 54deg, transparent 0 90deg); mask: repeating-conic-gradient(from 18deg, #000 0 54deg, transparent 0 90deg); }
.map-ring.is-on::before { animation: map-ring var(--sheet) var(--hand) both; }
.map-ring.is-behind { opacity: .45; }
@keyframes map-ring { from { transform: scale(1.7) rotate(-45deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* search */
.map-search { position: absolute; top: calc(var(--bar-h) + var(--sp-2)); left: var(--edge); width: min(400px, calc(100vw - 2 * var(--edge))); z-index: 4; }
.map-field { display: flex; align-items: center; gap: var(--sp-3); min-height: 52px; padding: 0 var(--sp-5) 0 var(--sp-4); border-radius: 999px; background: color-mix(in srgb, var(--ground-up) 88%, transparent); cursor: text;
  transition: background var(--touch) var(--shutter), box-shadow var(--touch) var(--shutter); }
.map-field:hover { background: var(--ground-up); }
.map-field:focus-within { background: var(--ground-up); box-shadow: 0 0 0 2px var(--accent); }
.map-field svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--ink-soft); stroke-width: 1.8; stroke-linecap: round; }
.map-field input { flex: 1; min-width: 0; height: 52px; border: 0; padding: 0; background: none; outline: none; font-size: 17px; }
.map-field input::placeholder { color: var(--ink-faint); }
.map-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.map-results { margin-top: var(--sp-2); padding: var(--sp-2); max-height: min(58svh, 540px); overflow: auto; overscroll-behavior: contain; background: var(--ground-up); border-radius: 18px;
  box-shadow: 0 24px 80px -24px rgb(0 0 0 / 80%); transform-origin: left top; animation: map-sheet var(--touch) var(--shutter) both; }
.map-result { display: grid; gap: 2px; padding: var(--sp-3) var(--sp-4); border-radius: 12px; cursor: pointer; transition: background var(--touch) var(--shutter); }
.map-result b { font-weight: 560; font-size: 17px; }
.map-result span { color: var(--ink-soft); font-size: 15px; }
.map-result[aria-selected='true'], .map-result:hover { background: var(--ground-hi); }
.map-empty { padding: var(--sp-3) var(--sp-4); color: var(--ink-soft); }
@keyframes map-sheet { from { opacity: 0; transform: scaleX(.95); } }

/* the card: what it is, where it is, when it rises and sets, for this place and the time on the clock */
.map-card { position: absolute; left: var(--edge); top: calc(var(--bar-h) + 76px); z-index: 3; width: min(390px, calc(100vw - 2 * var(--edge)));
  max-height: calc(100svh - var(--bar-h) - 76px - 190px); overflow: auto; overscroll-behavior: contain; padding: var(--sp-5); background: var(--ground-up); border-radius: 18px;
  box-shadow: 0 24px 80px -24px rgb(0 0 0 / 80%); transform-origin: left top; }
.map-card.is-in { animation: map-card-in var(--sheet) var(--shutter) both; }
.map-card.is-out { animation: map-card-out var(--touch) var(--shutter) both; pointer-events: none; }
.map-card.is-swap .map-card-name { animation: draw var(--turn) var(--shutter) both; }
@keyframes map-card-in { from { opacity: 0; transform: scaleX(.94); } }
@keyframes map-card-out { to { opacity: 0; transform: scaleX(.96); } }
.map-grab { display: none; }
.map-close { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; color: var(--ink-soft);
  transition: background var(--touch) var(--shutter), color var(--touch) var(--shutter), transform var(--sheet) var(--hand); }
.map-close:hover { background: var(--ground-hi); color: var(--ink); }
.map-close:active { transform: scale(.92); }
.map-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.map-card-name { padding-right: 48px; font-size: var(--fs-3); font-weight: 470; font-stretch: var(--wide); line-height: 1.1; letter-spacing: -.012em; transform-origin: left center; }
.map-card-what { margin-top: var(--sp-3); color: var(--ink-soft); }
.map-card-where { margin-top: var(--sp-3); font-weight: 540; }
.map-facts { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); }
.map-facts div { display: grid; grid-template-columns: minmax(6.5em, auto) 1fr; gap: var(--sp-4); }
.map-facts dt { color: var(--ink-soft); }
.map-facts dd { font-variant-numeric: tabular-nums; }
.map-card-acts { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.map-card-acts:not(:has(> :not([hidden]))) { display: none; }

/* the dock: the clock bottom left, what to show bottom right. It stands on the ground; only controls take a tone */
.map-dock { position: absolute; left: var(--edge); right: var(--edge); bottom: var(--sp-6); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); pointer-events: none; }
.map-time { display: grid; gap: var(--sp-3); width: min(560px, 100%); }
.map-time-row { display: flex; align-items: center; gap: var(--sp-3); }
.map-play { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 999px; background: var(--ground-hi); color: var(--ink);
  transition: transform var(--sheet) var(--hand), background var(--touch) var(--shutter); }
.map-play:hover { background: color-mix(in srgb, var(--ink) 16%, var(--ground-hi)); }
.map-play:active { transform: scale(.92); }
.map-play svg { width: 24px; height: 24px; fill: currentColor; }
.map-play .i-stop, .map-play.is-running .i-play { display: none; }
.map-play.is-running .i-stop { display: inline; }
.map-clock { flex: 1; min-width: 0; font-size: var(--fs-3); font-stretch: 112%; font-weight: 480; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; transform-origin: left center; text-shadow: 0 0 12px var(--ground); }
.map-day { color: var(--ink-soft); transition: color var(--sheet) var(--shutter); }
.map-clock.is-live .map-day { color: var(--accent); }
.map-units { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--veil); }
.map-units button, .map-unit-cycle { min-height: 40px; padding: 0 var(--sp-3); border-radius: 999px; color: var(--ink-soft); font-size: 15px;
  transition: background var(--touch) var(--shutter), color var(--touch) var(--shutter), transform var(--sheet) var(--hand); }
.map-units button:hover { color: var(--ink); }
.map-units button[aria-checked='true'] { background: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--ink); }
.map-units button:active, .map-unit-cycle:active { transform: scale(.94); }
.map-unit-cycle { display: none; }
.map-now { flex: none; min-height: 44px; padding: 0 var(--sp-5); animation: draw var(--sheet) var(--shutter) both; transform-origin: right center; }

/* the tape: drag it like film. Dots at real clock steps; the band is the Sun's true height along it, day lighter */
.map-tape { position: relative; height: 40px; border-radius: 999px; overflow: hidden; cursor: ew-resize; touch-action: none; -webkit-user-select: none; user-select: none; outline: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.map-shade, .map-dots, .map-head { position: absolute; pointer-events: none; }
.map-shade { inset: 0; }
.map-dots { inset: 0; color: var(--ink-soft); background-repeat: repeat-x;
  background-image: radial-gradient(circle, currentColor 0 2.2px, transparent 2.8px), radial-gradient(circle, currentColor 0 1.1px, transparent 1.7px); }
.map-tape[data-unit='minutes'] .map-dots { background-size: 240px 100%, 40px 100%; }
.map-tape[data-unit='hours'] .map-dots { background-size: 384px 100%, 64px 100%; }
.map-tape[data-unit='days'] .map-dots { background-size: 64px 100%, 64px 100%; }
.map-head { left: 50%; top: 7px; bottom: 7px; width: 3px; margin-left: -1.5px; border-radius: 3px; background: var(--accent); transition: box-shadow var(--touch) var(--shutter); }
.map-tape:focus-visible .map-head, .map-tape.is-grabbing .map-head { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); }

/* what to show */
.map-tools { position: relative; display: flex; align-items: flex-end; gap: var(--sp-4); }
.map-layers { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }
.map-toggle { min-height: 40px; padding: 0 var(--sp-4); border-radius: 999px; background: color-mix(in srgb, var(--ground-hi) 82%, transparent); color: var(--ink-soft); font-size: 15px; white-space: nowrap;
  transition: background var(--touch) var(--shutter), color var(--touch) var(--shutter), transform var(--sheet) var(--hand); }
.map-toggle:hover { color: var(--ink); }
.map-toggle:active { transform: scale(.95); }
.map-toggle[aria-pressed='true'] { background: color-mix(in srgb, var(--accent) 28%, var(--ground-hi)); color: var(--ink); }
/* red ink on a red-mixed fill drops to 4:1 at 28 %; 16 % keeps it above 4.5:1 */
html[data-mode='red'] .map-toggle[aria-pressed='true'] { background: color-mix(in srgb, var(--accent) 16%, var(--ground-hi)); }
.map-layers-btn { display: none; }
.map-zoom { display: grid; gap: var(--sp-2); }
.map-zoom button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--ground-hi) 82%, transparent); color: var(--ink);
  transition: background var(--touch) var(--shutter), transform var(--sheet) var(--hand); }
.map-zoom button:hover { background: color-mix(in srgb, var(--ink) 14%, var(--ground-hi)); }
.map-zoom button:active { transform: scale(.92); }
.map-zoom svg, .map-layers-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* narrower screens: what to show folds into one button and a small sheet of switches */
@media (max-width: 1279px) {
  .map-layers-btn { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 48px; padding: 0 var(--sp-4) 0 var(--sp-3); border-radius: 999px; background: color-mix(in srgb, var(--ground-hi) 82%, transparent); color: var(--ink);
    transition: background var(--touch) var(--shutter), transform var(--sheet) var(--hand); }
  .map-layers-btn:active { transform: scale(.95); }
  .map-layers-btn[aria-expanded='true'] { background: var(--ground-hi); }
  .map-layers { position: absolute; right: 0; bottom: calc(100% + var(--sp-3)); width: 240px; display: grid; justify-content: stretch; gap: 2px; padding: var(--sp-2); background: var(--ground-up); border-radius: 18px;
    box-shadow: 0 24px 80px -24px rgb(0 0 0 / 80%); transform-origin: right bottom; opacity: 0; visibility: hidden; transform: scaleX(.94);
    transition: opacity var(--touch) var(--shutter), transform var(--sheet) var(--shutter), visibility 0s linear var(--sheet); }
  .is-layers .map-zoom { visibility: hidden; }
  .is-layers .map-layers { opacity: 1; visibility: visible; transform: none; transition: opacity var(--touch) var(--shutter), transform var(--sheet) var(--shutter), visibility 0s; }
  .map-layers .map-toggle { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 var(--sp-3); border-radius: 12px; background: none; color: var(--ink); font-size: 16px; }
  .map-layers .map-toggle:hover { background: var(--ground-hi); }
  .map-layers .map-toggle[aria-pressed='true'] { background: none; }
  .map-layers .map-toggle::after { content: ''; flex: none; width: 36px; height: 22px; border-radius: 999px; background: var(--ground-hi) radial-gradient(circle at 11px 50%, var(--ink-soft) 0 7px, transparent 7.5px) no-repeat 0 0 / 100% 100%;
    transition: background-color var(--touch) var(--shutter), background-position var(--sheet) var(--hand); }
  .map-layers .map-toggle[aria-pressed='true']::after { background-color: color-mix(in srgb, var(--accent) 45%, var(--ground-hi)); background-image: radial-gradient(circle at 25px 50%, var(--ink) 0 7px, transparent 7.5px); }
}

/* phones: everything a thumb needs sits in the lower half, above the tabs */
@media (max-width: 820px) {
  .map { --dock-b: calc(var(--tabs-h) + env(safe-area-inset-bottom) + 10px); }
  .map-dock { left: 12px; right: 12px; bottom: var(--dock-b); flex-direction: column; align-items: stretch; gap: 0; }
  .map-time { width: 100%; gap: var(--sp-2); }
  .map-time-row { gap: var(--sp-2); }
  .map-play { width: 48px; height: 48px; }
  .map-clock { display: grid; font-size: 23px; line-height: 1.05; }
  .map-day { font-size: 16px; font-stretch: 100%; line-height: 1.2; }
  .map-units { display: none; }
  .map-unit-cycle { display: inline-flex; align-items: center; min-height: 44px; background: color-mix(in srgb, var(--ground-hi) 82%, transparent); color: var(--ink); }
  .map-now { padding: 0 var(--sp-4); }
  .map-tape { height: 36px; }
  .map-tools { position: absolute; right: 0; bottom: calc(100% + 12px); }
  .map-zoom { position: absolute; right: 2px; bottom: calc(100% + 12px); }
  .map-layers-btn { width: 52px; height: 52px; padding: 0; justify-content: center; }
  .map-layers-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .map-search { top: auto; bottom: calc(var(--dock-b) + 104px); left: 12px; right: 76px; width: auto; }
  .is-searching .map-search { top: calc(var(--bar-h) + 6px); bottom: auto; right: 12px; }
  .is-searching .map-results { max-height: 46svh; }
  .is-searching .map-dock, .is-searching .map-card, .has-card .map-search { visibility: hidden; }
  .map-card { z-index: 6; left: 8px; right: 8px; top: auto; bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom) + 8px); width: auto; max-height: 62svh; padding: var(--sp-5) var(--sp-5) var(--sp-5);
    border-radius: 22px; transform-origin: center bottom; touch-action: pan-y; transition: transform var(--sheet) var(--hand); }
  .map-card.is-in { animation: map-card-up var(--sheet) var(--hand) both; }
  .map-card.is-out { animation: map-card-down var(--touch) var(--shutter) both; }
  .map-grab { display: block; width: 40px; height: 5px; margin: -8px auto var(--sp-3); border-radius: 5px; background: var(--ground-hi); }
  .map-card-acts .act { flex: 1; }
}
@keyframes map-card-up { from { transform: translateY(105%); } }
@keyframes map-card-down { to { transform: translateY(105%); } }

/* without WebGL: no map, but search and the card still answer when things rise and set */
.map-nogl { position: absolute; top: calc(var(--bar-h) + 96px); left: var(--edge); right: var(--edge); max-width: 32ch; font-size: var(--fs-lead); line-height: 1.3; }
.is-flat .map-stage, .is-flat .map-tools, .is-flat .map-tape { display: none; }
.is-flat .map-card { top: auto; bottom: 200px; }

@media (prefers-reduced-motion: reduce) {
  .map-ring.is-on::before, .map-card.is-in, .map-card.is-out, .map-card.is-swap .map-card-name, .map-results, .map-now { animation: none; }
}