/* ── Reset / base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: #00111f;
  color: #c8d8e8;
  margin: 0;
  padding: 0;
  font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue", sans-serif;
}

/* ── Page layout ─────────────────────────────────────────────────────────────── */
#page-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-bottom: 60px;
  width: 100%;
}

/* ── Header ──────────────────────────────────────────────────────────────────── */
#headerArea {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 24px 10px;
  text-align: center;
}

#myHeadline {
  font-size: clamp(36px, 8vw, 72px);
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  font-family: 'Dosis', sans-serif;
}

#subhead {
  font-size: clamp(11px, 1.8vw, 14px);
  color: #6a90b0;
  margin-top: 6px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#coords {
  font-size: clamp(11px, 1.5vw, 13px);
  color: #4a7090;
  margin-top: 8px;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

#dateToday { font-size: 13px; color: #4a7090; }

/* ── Clock wrap ──────────────────────────────────────────────────────────────── */
#clock-wrap {
  width: 100%;
  max-width: 900px;
  padding: 0 16px;
  margin: 8px auto 0;
}

#clock-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── SVG base ────────────────────────────────────────────────────────────────── */
svg {
  stroke: #fff;
  stroke-width: 1px;
  font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue";
}

svg text { stroke: none; stroke-width: 0; }

/* ── Ticks ───────────────────────────────────────────────────────────────────── */
.hour-tick    { stroke: rgba(255,255,255,0.25); stroke-width: 1.5; }
.second-tick  { stroke: rgba(255,255,255,0.10); stroke-width: 1; }

/* Cardinal labels — bold white, prominent */
.cardinal-label {
  font-size: 22px;
  font-weight: 700;
  fill: rgba(255,255,255,0.70);
  stroke: none;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.02em;
}

/* ── Twilight arc fills — sky-true dark palette ──────────────────────────────── */
.arc-astro    { fill: #0d1f3c; stroke-width: 0; }   /* astronomical — darker indigo, distinct from night */
.arc-nautical { fill: #163060; stroke-width: 0; }   /* nautical — mid navy */
.arc-civil    { fill: #1a3a6a; stroke-width: 0; }   /* blue hour */
.arc-day      { fill: #1a6090; stroke-width: 0; transition: fill 60s linear; } /* current sky */

/* ── Milky Way ───────────────────────────────────────────────────────────────── */
.mw-layer { fill: #fff; stroke: none; fill-rule: nonzero; }

/* ── Hand styles ─────────────────────────────────────────────────────────────── */
.hands-cover { stroke-width: 3; fill: #060e1c; stroke: rgba(255,255,255,0.3); }

.sun-hand     { stroke-width: 40;  stroke-linecap: round; stroke: #ffe100; transition: stroke-opacity 2s ease; }
.moon-hand    { stroke-width: 25;  stroke-linecap: round; stroke: #d0d8e0; transition: stroke-opacity 2s ease; }
.mercury-hand { stroke-width: 10;  stroke-linecap: round; stroke: #8b5e3c; transition: stroke-opacity 2s ease; }
.venus-hand   { stroke-width: 10;  stroke-linecap: round; stroke: #e8e0c0; transition: stroke-opacity 2s ease; }
.mars-hand    { stroke-width: 10;  stroke-linecap: round; stroke: #be1e2d; transition: stroke-opacity 2s ease; }
.jupiter-hand { stroke-width: 10;  stroke-linecap: round; stroke: #f15a29; transition: stroke-opacity 2s ease; }
.saturn-hand  { stroke-width: 10;  stroke-linecap: round; stroke: #f7941d; transition: stroke-opacity 2s ease; }
.uranus-hand  { stroke-width: 10;  stroke-linecap: round; stroke: #8dc63f; transition: stroke-opacity 2s ease; }
.neptune-hand { stroke-width: 10;  stroke-linecap: round; stroke: #1c75bc; transition: stroke-opacity 2s ease; }
.pluto-hand   { stroke-width: 10;  stroke-linecap: round; stroke: #7a6080; transition: stroke-opacity 2s ease; }

/* ── Hand labels ─────────────────────────────────────────────────────────────── */
.hand-label {
  font-size: 11px;
  font-family: Arial, Helvetica, sans-serif;
  fill: rgba(255,255,255,0.9);
  stroke: none;
  letter-spacing: 0.03em;
  pointer-events: none;
}
.hand-label-sun  { font-size: 18px; fill: #ffe100; }
.hand-label-moon { font-size: 16px; fill: #d0d8e0; }

/* ── Info panels ─────────────────────────────────────────────────────────────── */
/* merged into three-screen #info-panels below */

/* Full-width info cards — each one fills the screen width */
.info-card {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid #1a3a54;
  border-radius: 14px;
  padding: 24px 20px;
  box-sizing: border-box;
}

/* Keep .info-panel as alias for backward compat */
.info-panel { width: 100%; }

.info-heading {
  font-size: 26px;
  font-weight: 600;
  color: #7aabcb;
  border-bottom: 1px solid #1a3a54;
  padding-bottom: 8px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Sun panel heading — warm gold */
#panel-sun .info-heading {
  color: #f0c040;
  border-bottom-color: rgba(240,192,64,0.2);
}

/* Moon panel heading — cool silver-blue */
#panel-moon .info-heading {
  color: #a0c8e8;
  border-bottom-color: rgba(160,200,232,0.2);
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  font-size: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.info-label { color: #7aabcb; padding-right: 12px; flex-shrink: 0; }
.info-val   { color: #e0eaf4; font-variant-numeric: tabular-nums; text-align: right; font-weight: 500; }
.info-spacer { height: 10px; }

/* Twilight row colors — lighter versions that read on dark */
.twilight-civil    .info-label,
.twilight-civil    .info-val   { color: #5a9ad0; }
.twilight-nautical .info-label,
.twilight-nautical .info-val   { color: #3a6a9a; }
.twilight-astro    .info-label,
.twilight-astro    .info-val   { color: #2a4a6a; }

.info-heading-mw {
  font-size: 10px;
  margin-top: 6px;
  color: #8888aa;
  border-bottom-color: #1a2a3a;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ── Footer ──────────────────────────────────────────────────────────────────── */
#site-footer {
  width: 100%;
  max-width: 100%;
  margin-top: 48px;
  padding: 20px 24px;
  border-top: 1px solid #0a2030;
  text-align: center;
  background: #000c16;
}

#site-footer p { margin: 4px 0; font-size: 11px; color: #2a4a60; line-height: 1.6; }
#site-footer a { color: #2a6080; text-decoration: none; border-bottom: 1px dotted #2a4a60; }
#site-footer a:hover { color: #6ab0d0; border-bottom-color: #6ab0d0; }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  #info-panels { gap: 12px; padding: 12px 10px 80px; }
  /* Don't shrink text on mobile — keep base sizes */
}

@media (max-width: 600px) {
  #clock-wrap  { padding: 0 8px; }
  #info-panels { padding: 10px 8px 80px; }
  .sun-hand    { stroke-width: 30; }
  .moon-hand   { stroke-width: 20; }
  .mercury-hand, .venus-hand, .mars-hand,
  .jupiter-hand, .saturn-hand, .uranus-hand,
  .neptune-hand, .pluto-hand { stroke-width: 8; }
}

/* ── Theme variables ─────────────────────────────────────────────────────────── */
:root {
  --bg:            #00111f;
  --text:          #c8d8e8;
  --headline:      #ffffff;
  --subhead:       #6a90b0;
  --coords:        #4a7090;
  --panel-border:  #1a3a54;
  --panel-heading: #4a90c0;
  --label-color:   #5a7a90;
  --val-color:     #c8d8e8;
  --row-border:    rgba(255,255,255,0.05);
  --footer-bg:     #000c16;
  --footer-border: #0a2030;
  --footer-text:   #2a4a60;
  --footer-link:   #2a6080;
  --footer-hover:  #6ab0d0;
  --toggle-bg:     rgba(255,255,255,0.08);
  --toggle-color:  #6a90b0;
  --toggle-border: rgba(255,255,255,0.15);
  --tw-civil:      #5a9ad0;
  --tw-nautical:   #3a6a9a;
  --tw-astro:      #2a4a6a;
}

[data-theme="light"] {
  --bg:            #f4f7fa;
  --text:          #1a2a3a;
  --headline:      #0a1a2a;
  --subhead:       #3a6080;
  --coords:        #5a7a90;
  --panel-border:  #c8d8e8;
  --panel-heading: #2a6090;
  --label-color:   #4a6a80;
  --val-color:     #1a2a3a;
  --row-border:    rgba(0,0,0,0.06);
  --footer-bg:     #e8f0f8;
  --footer-border: #c0d0e0;
  --footer-text:   #5a7a90;
  --footer-link:   #2a6090;
  --footer-hover:  #0a4070;
  --toggle-bg:     rgba(0,0,0,0.05);
  --toggle-color:  #2a6090;
  --toggle-border: rgba(0,0,0,0.15);
  --tw-civil:      #1a5a9a;
  --tw-nautical:   #0a3a6a;
  --tw-astro:      #3a5a7a;
}

/* Apply variables */
body                { background: var(--bg); color: var(--text); }
#myHeadline         { color: var(--headline); }
#subhead            { color: var(--subhead); }
#coords, #dateToday { color: var(--coords); }
.info-heading       { color: var(--panel-heading); border-bottom-color: var(--panel-border); }
.info-label         { color: var(--label-color); }
.info-val           { color: var(--val-color); }
.info-row           { border-bottom-color: var(--row-border); }
#site-footer        { background: var(--footer-bg); border-top-color: var(--footer-border); }
#site-footer p      { color: var(--footer-text); }
#site-footer a      { color: var(--footer-link); border-bottom-color: var(--footer-text); }
#site-footer a:hover{ color: var(--footer-hover); border-bottom-color: var(--footer-hover); }

.twilight-civil    .info-label,
.twilight-civil    .info-val    { color: var(--tw-civil); }
.twilight-nautical .info-label,
.twilight-nautical .info-val    { color: var(--tw-nautical); }
.twilight-astro    .info-label,
.twilight-astro    .info-val    { color: var(--tw-astro); }

/* ── Theme toggle button ─────────────────────────────────────────────────────── */
/* #theme-toggle now uses .toggle-btn class — no separate styles needed */

#page-wrap { position: relative; }

/* ── MW top panel + bottom row layout ───────────────────────────────────────── */

.info-panel-full {
  width: 100%;
  padding: 16px 0 12px;
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: 8px;
}

/* info-panels-bottom removed — now using stacked info-card layout */

/* MW heading — slightly larger, starry accent color */
.mw-heading {
  font-size: 18px;
  color: #8888cc;
  border-bottom-color: #2a2a4a;
  margin-bottom: 12px;
}

/* MW stat row — three equal columns */
.mw-top-row {
  display: flex;
  flex-direction: row;
  gap: 24px;
}

.mw-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mw-stat-label {
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--label-color);
}

.mw-stat-val {
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  color: var(--val-color);
  letter-spacing: 0.02em;
}

.gc-up   { color: #8888cc; }
.gc-down { color: var(--label-color); }

@media (max-width: 600px) {
  .mw-top-row { gap: 12px; }
  /* Keep mw-stat-val at full size on mobile */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   THREE-SCREEN SNAP LAYOUT
   ═══════════════════════════════════════════════════════════════════════════════ */

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: pan-y;
}

#app {
  height: 100vh;
  width: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: none;
  /* iOS momentum scrolling */
  -webkit-overflow-scrolling: touch;
}

/* Each screen fills the viewport exactly */
.screen {
  height: 100vh;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* NO overflow:hidden here — it breaks snap detection on iOS */
  position: relative;
  background: var(--bg);
  box-sizing: border-box;
}

/* ── Screen 1: Clock ─────────────────────────────────────────────────────────── */
#screen-clock {
  justify-content: center;
}

#clock-header {
  text-align: center;
  padding: 12px 24px 4px;
  flex-shrink: 0;
}

#clock-header #myHeadline {
  font-size: clamp(24px, 6vw, 52px);
  font-weight: 400;
  color: var(--headline);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  font-family: 'Dosis', sans-serif;
}

#clock-header #coords {
  font-size: 11px;
  color: var(--coords);
  margin-top: 4px;
  letter-spacing: 0.05em;
}

#clock-wrap {
  width: 100%;
  max-width: min(90vw, 90vh);  /* square-ish, fits either orientation */
  flex-shrink: 0;
  padding: 0;
  margin: 0 auto;
}

/* ── Screen 2: Data ──────────────────────────────────────────────────────────── */
#screen-data {
  justify-content: flex-start;
  overflow: hidden;   /* clip content to 100vh so snap works in both directions */
}

#info-panels {
  width: 100%;
  max-width: 100%;
  padding: 12px 10px 80px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  overscroll-behavior: none;
  flex: 1;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#info-panels::-webkit-scrollbar { display: none; }

/* ── Screen 3: Settings ──────────────────────────────────────────────────────── */
#screen-settings {
  justify-content: flex-start;
  overflow: hidden;
}

#settings-body {
  width: 100%;
  max-width: 100%;
  padding: 12px 10px 80px;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 auto;
}
#settings-body::-webkit-scrollbar { display: none; }

.setting-group {
  background: rgba(255,255,255,0.03);
  border: 1px solid #1a3a54;
  border-radius: 14px;
  padding: 22px 20px;
}

.setting-label {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #7aabcb;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #1a3a54;
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 4px 0;
}

.setting-desc {
  font-size: 24px;
  color: var(--val-color);
}

.setting-about {
  font-size: 19px;
  color: var(--label-color);
  line-height: 1.7;
}

.setting-about p { margin: 6px 0; }

.setting-links a, .setting-about a {
  color: var(--footer-link);
  text-decoration: none;
  border-bottom: 1px dotted var(--footer-text);
  font-size: 19px;
}

.setting-links a:hover { color: var(--footer-hover); }

/* Plan The Night / support prominent link */
a.app-link {
  display: inline-block;
  font-size: 20px;
  font-weight: 500;
  color: #ffe100 !important;
  border-bottom: 1px solid rgba(255,225,0,0.3) !important;
  letter-spacing: 0.04em;
  margin-top: 4px;
}
a.app-link:hover { color: #fff !important; border-bottom-color: #fff !important; }

.setting-copy {
  font-size: 14px;
  color: var(--footer-text);
  margin-top: 12px !important;
}

/* Settings buttons */
#btn-relocate, #theme-toggle, .toggle-btn {
  background: var(--toggle-bg);
  border: 1px solid var(--toggle-border);
  color: var(--toggle-color);
  border-radius: 20px;
  padding: 16px 32px;
  font-size: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
  font-family: 'Dosis', sans-serif;
}

#btn-relocate:hover, #theme-toggle:hover, .toggle-btn:hover {
  background: var(--toggle-border);
}

.toggle-btn.active {
  background: rgba(255,225,0,0.12);
  border-color: rgba(255,225,0,0.4);
  color: #ffe100;
}

/* ── Shared screen header ────────────────────────────────────────────────────── */
.screen-header {
  width: 100%;
  max-width: 900px;
  padding: 20px 24px 12px;
  text-align: center;
  flex-shrink: 0;
}

.screen-title {
  font-size: clamp(32px, 7vw, 48px);
  font-weight: 200;
  color: var(--headline);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.screen-subtitle {
  font-size: 18px;
  color: var(--coords);
  margin-top: 4px;
  letter-spacing: 0.05em;
}

/* ── Swipe hints ─────────────────────────────────────────────────────────────── */
.swipe-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--coords);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  pointer-events: none;
  animation: swipe-bob 2.5s ease-in-out infinite;
}

.swipe-hint-top {
  bottom: auto;
  top: 12px;
  flex-direction: column-reverse;
}

.swipe-arrow {
  font-size: 14px;
  line-height: 1;
}

@keyframes swipe-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
  50%       { transform: translateX(-50%) translateY(4px); opacity: 0.9; }
}

.swipe-hint-top {
  animation-name: swipe-bob-up;
}

@keyframes swipe-bob-up {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
  50%       { transform: translateX(-50%) translateY(-4px); opacity: 0.9; }
}

/* ── Remove old page-wrap styles that conflict ───────────────────────────────── */
#page-wrap { display: block; } /* neutralised */
#headerArea { display: none; } /* replaced by #clock-header */
#site-footer { display: none; } /* moved to settings screen */

/* ── Milky Way fade transition ───────────────────────────────────────────────── */
#milky-way {
  /* No CSS transition — JS updates every second which is smooth enough */
}

#night-stars {
  transition: opacity 8s ease;  /* smooth fade-in at civil twilight */
}

#star-field {
  transition: opacity 2s ease;   /* quick appearance, stays bright */
}

/* ── Moon phase disc ─────────────────────────────────────────────────────────── */
#moon-phase-group {
  pointer-events: none;
}

/* ── Civil twilight tick marks ───────────────────────────────────────────────── */
.civil-tick {
  stroke: #5a9ad0;
  stroke-width: 2.5px;
  stroke-linecap: round;
}

/* ── Civil twilight tick marks ───────────────────────────────────────────────── */