/* public/map/map.css — the sunset map's look: SkyCast's own tokens (index.html
   :root, DESIGN.md): the night ground, glass panels, Jost, the amber accent.
   Phone first; the same layout holds on a desktop with more room. */
@font-face {
  font-family: 'Jost';
  src: url('fonts/Jost.woff2') format('woff2');   /* SIL OFL, fonts/OFL-Jost.txt */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg-0: #050608;
  --land: #11151d;
  --water: #050608;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text-1: #f2f4f7;
  --text-2: #aab2c0;
  --text-3: #6b7382;
  --accent: #f59e0b;
  --font-sans: 'Jost', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, Roboto, Helvetica, Arial, sans-serif;
  --glass-bg: rgba(17, 21, 29, 0.72);
  --glass-blur: blur(30px) saturate(180%);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --radius: 20px;
  --radius-sm: 12px;
  --gap: 12px;
  --legend-h: 96px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}
/* manipulation on every element, not html/body: WebKit won't walk the ancestor
   chain for it, so tapping + quickly double-tap-zoomed the whole page and cut
   the legend off (2026-10-23). #map keeps its own touch-action: none. */
* { box-sizing: border-box; touch-action: manipulation; }
html, body { margin: 0; height: 100%; background: var(--bg-0); color: var(--text-1); font-family: var(--font-sans); overflow: hidden; }
body { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; }
#app { position: fixed; inset: 0; overflow: hidden; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#map.dragging { cursor: grabbing; }

.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--glass-shadow);
}

/* The top bar: name, the Sunset / Sunrise switch, the days. */
.bar { position: absolute; left: calc(var(--gap) + var(--safe-left)); right: calc(var(--gap) + var(--safe-right)); border-radius: var(--radius); }
#top { top: calc(var(--gap) + var(--safe-top)); padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand seg" "days days"; gap: 8px 10px; align-items: center; }
.brand { grid-area: brand; display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
.brand .name { font-weight: 600; font-size: 15px; letter-spacing: 0.01em; }
.brand .sep { color: var(--text-3); }
.brand .what { font-size: 15px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.badge { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); border: 1px solid rgba(245, 158, 11, 0.45); border-radius: 6px; padding: 2px 5px 1px; margin-left: 4px; align-self: center; }

.seg { grid-area: seg; display: inline-flex; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px; }
.seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 9px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-2); cursor: pointer; min-height: 30px; }
.seg button[aria-checked="true"] { background: rgba(245, 158, 11, 0.22); color: var(--text-1); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.5); }

/* The days scroll sideways inside the bar, never the page. */
.days { grid-area: days; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 1px; }
.days::-webkit-scrollbar { display: none; }
.days button { flex: 0 0 auto; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.05); border-radius: var(--radius-sm); padding: 7px 12px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-1); cursor: pointer; min-height: 32px; font-variant-numeric: tabular-nums; }
.days button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.days button:focus-visible, .seg button:focus-visible, .round:focus-visible, .primary:focus-visible, .close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.days .none { font-size: 11px; color: var(--text-3); padding: 7px 2px; }

/* The legend: the app's score ramp, its words, the run. */
.legend { bottom: calc(var(--gap) + var(--safe-bottom)); padding: 10px 14px 9px; }
.ramp-row { position: relative; }
.ramp { height: 8px; border-radius: 4px; }
.ticks { position: relative; height: 15px; margin-top: 5px; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-2); }
.ticks span { position: absolute; top: 0; white-space: nowrap; }
.meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 11px; color: var(--text-3); flex-wrap: wrap; }
.meta #updated { color: var(--text-2); font-variant-numeric: tabular-nums; }
.meta .credits a { color: inherit; text-decoration: none; }
.meta .credits a:hover { text-decoration: underline; }
/* Why some land is blank on this event (the hatched areas): one quiet line. */
.note { margin-top: 5px; font-size: 11px; line-height: 1.4; color: var(--text-2); }
.note[hidden] { display: none; }

/* Zoom buttons for a mouse without a wheel, and for anyone who wants them. */
.zoom { position: absolute; right: calc(var(--gap) + var(--safe-right)); bottom: calc(2 * var(--gap) + var(--safe-bottom) + var(--legend-h)); display: flex; flex-direction: column; gap: 8px; }
.round { width: 40px; height: 40px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; color: var(--text-1); }

/* The spot card: tapped or clicked. */
.card { position: absolute; left: calc(var(--gap) + var(--safe-left)); right: calc(var(--gap) + var(--safe-right)); bottom: calc(var(--gap) + var(--safe-bottom)); border-radius: var(--radius); padding: 14px 16px 16px; max-width: 420px; margin: 0 auto; }
.card { background: rgba(12, 15, 21, 0.94); z-index: 2; }
.card[hidden] { display: none; }
.close { position: absolute; top: 6px; right: 8px; border: 0; background: transparent; color: var(--text-2); font-size: 22px; line-height: 1; width: 36px; height: 36px; cursor: pointer; border-radius: 10px; }
.spot-head { display: flex; gap: 14px; align-items: center; padding-right: 28px; }
.spot-score { font-size: 38px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; min-width: 2ch; }
.spot-kind { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-2); }
.spot-line { font-size: 15px; margin-top: 4px; }
.spot-times { margin-top: 10px; font-size: 13px; color: var(--text-1); font-variant-numeric: tabular-nums; line-height: 1.45; }
.spot-times b { font-weight: 500; }
.spot-where { margin-top: 2px; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.primary { display: block; margin-top: 12px; text-align: center; background: var(--accent); color: #1a1205; text-decoration: none; border-radius: var(--radius-sm); padding: 11px; font-size: 14px; font-weight: 500; }

.hover { position: absolute; pointer-events: none; padding: 6px 9px; border-radius: 9px; font-size: 12px; background: rgba(8, 10, 15, 0.86); border: 1px solid var(--line); color: var(--text-1); white-space: nowrap; font-variant-numeric: tabular-nums; transform: translate(12px, -50%); }
.hover[hidden] { display: none; }

/* Loading, empty and error. */
.state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; pointer-events: none; }
.state[hidden] { display: none; }
.state-box { pointer-events: auto; border-radius: var(--radius); padding: 18px 20px; max-width: 360px; text-align: center; }
.state-title { font-size: 15px; }
.state-detail { margin-top: 6px; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.state-detail:empty { display: none; }
.state-actions { margin-top: 12px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.state-actions:empty { display: none; }
.state-actions a, .state-actions button { border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); padding: 9px 14px; font-size: 13px; color: var(--text-1); text-decoration: none; cursor: pointer; }

@media (hover: hover) {
  .days button:hover, .seg button:hover { color: var(--accent); }
  .round:hover { color: var(--accent); }
}

/* A phone: the spot card takes the legend's place instead of stacking above
   it — both at once covered too much of the map (Erik, 2026-10-24). */
@media (max-width: 759px) {
  body:has(#spot:not([hidden])) #legend { visibility: hidden; }
  /* The key narrows so the zoom buttons stand beside it, bottoms aligned,
     and the credits fit one line: labels dropped, a size down (Erik,
     2026-10-24). */
  .legend { right: calc(var(--gap) + var(--safe-right) + 40px + 8px); }
  .zoom { bottom: calc(var(--gap) + var(--safe-bottom)); }
  .meta .credits { flex-basis: 100%; min-width: 0; font-size: 9px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .meta .credits .lbl { display: none; }
}

/* A wider screen: the bar on one row, the card beside the legend's corner. */
@media (min-width: 760px) {
  #top { grid-template-columns: auto auto 1fr; grid-template-areas: "brand seg days"; right: auto; max-width: calc(100% - 2 * var(--gap)); }
  .legend { right: auto; width: 440px; }
  .card { left: auto; right: calc(var(--gap) + var(--safe-right) + 56px); bottom: calc(var(--gap) + var(--safe-bottom)); width: 340px; margin: 0; }
  .zoom { bottom: calc(var(--gap) + var(--safe-bottom)); }
}

@media (prefers-reduced-motion: no-preference) {
  .card { animation: card-in 180ms ease both; }
  @keyframes card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .seg button, .days button { transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; }
}