/* ==================== page bootstrap ==================== */
html, body { margin: 0; padding: 0; background: #070A14; }
#root { min-height: 100vh; }
* { -webkit-tap-highlight-color: transparent; } /* remove the gray tap flash on mobile taps */

/* ==================== page shell / layout ==================== */
/* Reserved height for the fixed bottom nav bar (BottomNav.js), used both by
   the bar itself and by .af-root's extra bottom padding so real content
   never sits underneath it. */
:root { --bottom-nav-height: 60px; }
.af-root { font-family: 'IBM Plex Sans', -apple-system, sans-serif; background: radial-gradient(120% 140% at 15% -10%, #16203D 0%, #0B0F1E 55%, #070A14 100%); color: #EDF2F7; min-height: 100vh; padding: 28px 20px 40px; box-sizing: border-box; }
/* Applied only on the logged-in view (where BottomNav renders) — pushes
   scrollable content up so the last card isn't hidden behind the fixed bar. */
.af-root--with-bottom-nav { padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 28px); }
.af-max { max-width: 980px; margin: 0 auto; }
.af-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.af-title { display: flex; align-items: center; gap: 10px; }
.af-title h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 22px; margin: 0; letter-spacing: 0.2px; }
.af-dot { width: 8px; height: 8px; border-radius: 50%; background: #3DFFC4; box-shadow: 0 0 8px #3DFFC4; }
.af-me { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: #C4CEE0; }
.af-refresh { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #C4CEE0; padding: 7px 12px; border-radius: 8px; font-size: 12.5px; cursor: pointer; font-family: 'IBM Plex Mono', monospace; }
.af-refresh:hover { background: rgba(255,255,255,0.09); }
.af-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.af-tabs button { background: none; border: none; color: #8593AD; font-family: 'Space Grotesk', sans-serif; font-size: 13.5px; font-weight: 600; padding: 9px 4px; cursor: pointer; border-bottom: 2px solid transparent; margin-right: 18px; }
.af-tabs button.active { color: #3DFFC4; border-color: #3DFFC4; }
.af-badge { background: #E4487A; color: white; font-size: 10px; padding: 1px 6px; border-radius: 10px; margin-left: 5px; font-family: 'IBM Plex Mono', monospace; }

/* Fixed/sticky bottom navigation (mobile-app style) — see BottomNav.js.
   `position: fixed` takes it fully out of document flow, so it's never part
   of the scrollable content and never moves as the page scrolls — only
   .af-root's own content (padded via --with-bottom-nav above) scrolls
   underneath it. `env(safe-area-inset-bottom)` adds the iOS home-indicator
   inset as real padding, so the bar's tap targets sit above it instead of
   being partly covered. `z-index` keeps it above every other card/overlay. */
.af-bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  display: flex;
  height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(11, 15, 30, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.af-bottom-nav button {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  background: none; border: none;
  color: #8593AD;
  font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 600;
  cursor: pointer;
}
.af-bottom-nav button .af-bn-icon { font-size: 20px; line-height: 1; }
.af-bottom-nav button.active { color: #3DFFC4; }
.af-banner { background: rgba(255,178,77,0.1); border: 1px solid rgba(255,178,77,0.3); color: #FFC97A; font-size: 12.5px; padding: 9px 13px; border-radius: 8px; margin-bottom: 18px; }

/* ==================== generic card + forecast hero ==================== */
.af-hero { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 720px) { .af-hero, .af-social-grid { grid-template-columns: 1fr; } } /* stack to one column on narrow/mobile screens */
.af-card { background: linear-gradient(165deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 20px; }
.af-card h2 { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; margin: 0 0 14px; color: #9AA8C4; }
.af-gauge-wrap { display: flex; flex-direction: column; align-items: center; }
.af-kp-num { font-family: 'Space Grotesk', sans-serif; font-size: 52px; font-weight: 700; margin-top: -46px; line-height: 1; } /* negative margin pulls the number up into the gauge's empty center */
.af-kp-scale { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #9AA8C4; margin-top: 6px; }
.af-verdict-loc { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.af-verdict-name { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 600; }
.af-verdict-country { color: #7C8AA0; font-size: 12.5px; margin-left: 4px; }
.af-verdict-headline { font-size: 15px; line-height: 1.55; color: #D5DCEA; margin: 14px 0 16px; }
.af-verdict-headline b { color: #EDF2F7; }
.af-chip { display: inline-flex; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; padding: 5px 10px; border-radius: 20px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); margin-right: 8px; }
.af-locbar { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.af-loc-btn { font-size: 12px; padding: 6px 11px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #B7C1D6; cursor: pointer; }
.af-loc-btn.active { background: rgba(61,255,196,0.14); border-color: rgba(61,255,196,0.4); color: #9CFFDF; }
.af-loc-custom { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.af-loc-custom input { width: 70px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: #EDF2F7; padding: 5px 8px; border-radius: 7px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; }

/* ==================== aurora oval map + Kp trend chart ==================== */
.af-map-card { margin-bottom: 16px; }
.af-map-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.af-map-sub { font-size: 11.5px; color: #7C8AA0; font-family: 'IBM Plex Mono', monospace; }
.af-canvas-wrap { display: flex; justify-content: center; margin-top: 10px; }
.af-legend { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 12px; font-size: 11px; color: #8593AD; }
.af-legend-bar { width: 130px; height: 6px; border-radius: 4px; background: linear-gradient(90deg, rgba(61,255,196,0.3), rgba(61,255,196,0.9), rgba(139,111,255,0.9)); }
.af-tl-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.af-tl-view-switch { display: flex; gap: 4px; background: rgba(255,255,255,0.05); border-radius: 8px; padding: 3px; }
.af-tl-view-switch button { background: none; border: none; color: #8593AD; font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 6px; cursor: pointer; }
.af-tl-view-switch button.active { color: #04121A; background: #3DFFC4; }
.af-tl-bars { display: flex; align-items: flex-end; gap: 4px; height: 130px; margin-top: 14px; }
.af-tl-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.af-tl-bar { width: 100%; border-radius: 4px 4px 2px 2px; min-height: 3px; }
.af-tl-bar.forecast { opacity: 0.55; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.18) 0 3px, transparent 3px 6px); } /* diagonal hatch marks forecast (vs. solid = observed) */
.af-tl-label { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: #6B7A99; margin-top: 6px; white-space: nowrap; }
.af-tl-key { display: flex; gap: 16px; margin-top: 6px; font-size: 11px; color: #8593AD; flex-wrap: wrap; }
.af-tl-key span { display: inline-flex; align-items: center; gap: 5px; }
.af-tl-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.af-footer { margin-top: 22px; font-size: 11.5px; color: #5C6A87; line-height: 1.7; text-align: center; }

/* ==================== auth screen ==================== */
.af-auth-wrap { max-width: 380px; margin: 40px auto; }
.af-auth-card { display: flex; flex-direction: column; }
.af-auth-tabs { display: flex; gap: 4px; background: rgba(255,255,255,0.04); border-radius: 10px; padding: 4px; margin-bottom: 16px; }
.af-auth-tabs button { flex: 1; background: none; border: none; color: #8593AD; padding: 8px; border-radius: 7px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 13px; cursor: pointer; }
.af-auth-tabs button.active { background: rgba(61,255,196,0.15); color: #9CFFDF; }
.af-field-label { font-size: 11.5px; color: #8593AD; margin: 10px 0 5px; display: block; font-family: 'IBM Plex Mono', monospace; }
.af-input { width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: #EDF2F7; padding: 9px 11px; border-radius: 8px; font-size: 13.5px; }
.af-avatar-row { display: flex; gap: 6px; flex-wrap: wrap; }
.af-avatar-btn { font-size: 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 6px 9px; cursor: pointer; }
.af-avatar-btn.active { background: rgba(61,255,196,0.18); border-color: #3DFFC4; }
.af-auth-error { color: #FF9A9A; font-size: 12px; margin-top: 10px; }
.af-auth-notice { color: #9CFFDF; font-size: 12px; margin-top: 10px; line-height: 1.5; }
.af-primary-btn { background: linear-gradient(135deg, #3DFFC4, #8B6FFF); color: #0B0F1E; font-weight: 600; border: none; border-radius: 9px; padding: 10px 16px; cursor: pointer; font-family: 'Space Grotesk', sans-serif; font-size: 13.5px; }
.af-auth-note { font-size: 11px; color: #6B7A99; margin-top: 14px; line-height: 1.5; text-align: center; }

/* ==================== sightings tab ==================== */
.af-file-drop { display: flex; align-items: center; gap: 8px; border: 1.5px dashed rgba(255,255,255,0.2); border-radius: 10px; padding: 14px; cursor: pointer; color: #B7C1D6; font-size: 13px; }
.af-upload-preview { width: 100%; max-height: 240px; object-fit: cover; border-radius: 10px; margin-top: 12px; }
.af-feed { display: flex; flex-direction: column; gap: 16px; }
.af-photo-card { padding: 16px; }
.af-photo-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; font-size: 13px; }
.af-photo-img { width: 100%; border-radius: 10px; display: block; max-height: 420px; object-fit: cover; }
.af-photo-caption { margin-top: 10px; font-size: 13.5px; color: #D5DCEA; }
.af-photo-actions { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.af-heart-btn { display: flex; align-items: center; gap: 6px; background: none; border: none; color: #B7C1D6; font-size: 12.5px; cursor: pointer; }
.af-heart-btn.active { color: #FF6F9E; }
.af-comments { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.af-comment { font-size: 12.5px; color: #C4CEE0; }
.af-comment-input { display: flex; gap: 6px; margin-top: 10px; }

/* ==================== friends & chat tab ==================== */
.af-social-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; align-items: start; }
.af-friend-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.af-friend-row.clickable { cursor: pointer; }
.af-friend-row.active { color: #3DFFC4; }
.af-chat-card { min-height: 320px; display: flex; flex-direction: column; }
.af-chat-log { flex: 1; display: flex; flex-direction: column; gap: 8px; margin: 10px 0; max-height: 340px; overflow-y: auto; }
.af-chat-msg { align-self: flex-start; background: rgba(255,255,255,0.06); padding: 7px 11px; border-radius: 10px 10px 10px 3px; font-size: 13px; max-width: 80%; }
.af-chat-msg.me { align-self: flex-end; background: rgba(61,255,196,0.16); border-radius: 10px 10px 3px 10px; } /* my own messages align right + tinted */

/* ==================== expandable metric cards (Bz / Clouds / Solar Speed / Moonlight / Sunlight) ==================== */
.af-metric-card { padding: 14px 16px; margin-bottom: 16px; } /* shorter padding than a regular .af-card so these read as "compact" */
.af-metric-head-btn { cursor: pointer; }
.af-metric-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.af-metric-icon { font-size: 14px; }
.af-metric-label { font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; color: #9AA8C4; letter-spacing: 0.3px; }
.af-metric-caret { margin-left: auto; font-size: 9px; color: #6B7A99; } /* ▲/▼ open/closed indicator, pushed to the right edge */
.af-metric-value { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 700; line-height: 1.1; }
.af-metric-spark { width: 100%; height: 26px; margin-top: 6px; display: block; }
.af-metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; margin-top: -4px; }
.af-metric-grid .af-metric-card { margin-bottom: 0; } /* grid gap already provides spacing, avoid doubling it */
.af-metric-card.open { grid-column: 1 / -1; } /* the expanded card takes the full grid width instead of half */
@media (max-width: 560px) { .af-metric-grid { grid-template-columns: 1fr; } }
.af-metric-detail { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); }
.af-metric-chart { width: 100%; height: 90px; display: block; }
.af-metric-chart-empty { display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 16px; font-size: 12.5px; color: #6B7A99; }
.af-metric-chart-label { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: #6B7A99; margin-top: 4px; text-align: center; }
/* Clouds card's low/mid/high altitude breakdown, shown in the detail view */
.af-cloud-bands { display: flex; gap: 8px; margin-top: 12px; }
.af-cloud-band { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 8px 6px; }
.af-cloud-band-label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: #7C8AA0; }
.af-cloud-band-value { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600; color: #D5DCEA; }
.af-explainer { margin-top: 12px; }
.af-explainer h3 { font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600; color: #9CFFDF; margin: 0 0 4px; }
.af-explainer p { font-size: 12.5px; color: #C4CEE0; line-height: 1.55; margin: 0; }
/* Sunlight card's day/night horizon bar (sunrise -> sunset with a "now" marker) */
.af-sun-track { margin-top: 4px; }
.af-sun-track-bar { position: relative; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,178,77,0.25), rgba(255,178,77,0.7), rgba(255,178,77,0.25)); }
.af-sun-track-now { position: absolute; top: -3px; width: 3px; height: 14px; border-radius: 2px; background: #EDF2F7; transform: translateX(-50%); }
.af-sun-track-labels { display: flex; justify-content: space-between; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #B7C1D6; margin-top: 8px; }

/* ==================== Space tab (added 2026-09-14) ====================
   Deliberately flatter/quieter than Home's cards per the user's explicit
   design note: no glow effects, no neon, no heavy borders — reuses the
   existing `.af-card` base (already a subtle gradient + 1px border, no
   glow of its own) rather than introducing a new, louder card style. */
.af-space { padding-bottom: 8px; }
/* Glow-glass card look, added 2026-09-16 — third attempt at this. The
   first (full background blur + shadow) and second (a two-tone border,
   brighter top/left than bottom/right, to fake a "light from above" cue)
   both got dropped: the two-tone border in particular read as "half the
   frame is just white" rather than glass, since a hard-edged rectangle
   with two different border colors doesn't look like light falling on a
   round/soft surface. This version: a UNIFORM border (same color all 4
   sides, no directional cue) + a soft outward glow via box-shadow
   (spread, no hard edge) + a mild backdrop blur for the actual "glass"
   part + a faint inset top highlight for a touch of thickness — but kept
   subtle enough that it reads as glow, not a visible white line. Scoped
   by `.af-space` so it can ONLY affect cards in this tab, never Home's
   identical `.af-card` elsewhere. */
.af-space .af-card {
  background: rgba(24, 30, 44, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 24px rgba(160, 200, 255, 0.12), 0 0 2px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.af-space-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.af-space-title { display: flex; align-items: center; gap: 10px; }
.af-space-title span { font-size: 20px; }
.af-space-title h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; margin: 0; }
.af-space-info-btn { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #8593AD; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); font-size: 13px; cursor: default; }
.af-space-subtitle { font-size: 12.5px; color: #8593AD; margin-bottom: 16px; }

.af-space-hero { margin-bottom: 16px; }
.af-space-hero-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.af-space-hero-label { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; color: #D5DCEA; }
.af-space-badge { font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 20px; }
.af-space-hero-body { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.af-space-hero-desc { flex: 1; min-width: 140px; font-size: 13px; color: #B7C1D6; line-height: 1.6; margin: 0; }

.af-space-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.af-space-tile { padding: 14px 16px; }
.af-space-tile-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.af-space-tile-icon { font-size: 15px; }
.af-space-tile-label { font-family: 'Space Grotesk', sans-serif; font-size: 12.5px; color: #9AA8C4; }
.af-space-tile-value { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700; color: #EDF2F7; }
.af-space-tile-unit { font-size: 13px; font-weight: 500; color: #8593AD; }
.af-space-tile-sub { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: #8593AD; margin-top: 2px; }
.af-space-tile-tag { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #B7C1D6; margin-top: 8px; }
.af-space-tile-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } /* no box-shadow here on purpose — flat, not glowing */

.af-space-chart-card h2 { text-transform: uppercase; letter-spacing: 0.04em; }
.af-space-chart-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.af-space-chart-tab { font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); color: #8593AD; cursor: pointer; }
.af-space-chart-tab.active { background: rgba(61,255,196,0.14); border-color: rgba(61,255,196,0.35); color: #9CFFDF; }
.af-space-chart-svg { width: 100%; height: 110px; display: block; }
.af-space-chart-labels { display: flex; justify-content: space-between; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: #6B7A99; margin-top: 6px; }