/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue-dark:   #1a3a5c;
  --blue:        #1e5799;
  --blue-light:  #2980b9;
  --green:       #27ae60;
  --yellow:      #f39c12;
  --orange:      #e67e22;
  --red:         #e74c3c;
  --purple:      #8e44ad;
  --grey-bg:     #f4f6f9;
  --card-bg:     #ffffff;
  --text:        #2c3e50;
  --text-light:  #7f8c8d;
  --border:      #dce1e7;
  --radius:      12px;
  --shadow:      0 2px 12px rgba(0,0,0,0.10);
}

html { font-size: 16px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--grey-bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
}

/* ===== Header ===== */
header {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: #fff;
  padding: 1rem 1rem 1.1rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.header-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.header-title { display: flex; align-items: center; gap: 0.7rem; }
.header-icon  { font-size: 1.9rem; }
header h1     { font-size: 1.25rem; font-weight: 700; }
.header-sub   { font-size: 0.78rem; opacity: 0.72; }
.header-meta  { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.header-buttons { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.last-updated { font-size: 0.72rem; opacity: 0.8; }

.settings-link-btn {
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 0.4rem 0.85rem;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: background 0.2s;
}
.settings-link-btn:hover { background: rgba(255,255,255,0.22); }

.refresh-btn {
  background: rgba(255,255,255,0.16);
  border: 1.5px solid rgba(255,255,255,0.38);
  color: #fff;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.refresh-btn:hover  { background: rgba(255,255,255,0.26); }
.refresh-btn:active { transform: scale(0.97); }
.btn-icon { font-size: 1rem; display: inline-block; }
.btn-icon.spinning { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Main ===== */
main { max-width: 900px; margin: 0 auto; padding: 1rem; }

/* ===== Loading ===== */
.loading-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 40vh; gap: 1rem; color: var(--text-light);
}
.spinner {
  width: 40px; height: 40px;
  border: 4px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ===== Error Banner ===== */
.error-banner {
  background: #ffeaea; border: 1px solid #f5c6c6;
  color: var(--red); border-radius: var(--radius);
  padding: 0.75rem 1rem; margin-bottom: 1rem;
  display: flex; align-items: center;
  justify-content: space-between; gap: 0.5rem; font-size: 0.88rem;
}
.error-banner button {
  background: none; border: none; color: var(--red);
  cursor: pointer; font-size: 1rem; padding: 0 0.2rem;
}

/* ===== Days container ===== */
.days-container { display: flex; flex-direction: column; gap: 1.25rem; }

/* ===== Day Card ===== */
.day-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ── Toggle button (the whole header) ── */
.day-toggle {
  width: 100%;
  background: linear-gradient(to right, #f2f6fb, #fff);
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 0.9rem 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
  transition: background 0.15s;
}
.day-toggle:hover { background: linear-gradient(to right, #e8f0fb, #f8faff); }

.day-toggle-left  { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.day-toggle-right { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }

.day-name  { font-size: 1.05rem; font-weight: 700; color: var(--blue-dark); }
.day-route { font-size: 0.82rem; color: var(--text-light); }
.day-note  { font-size: 0.75rem; color: var(--text-light); margin-top: 2px; }

.day-km-badge {
  font-size: 0.75rem;
  background: var(--blue-dark);
  color: #fff;
  padding: 0.18rem 0.55rem;
  border-radius: 20px;
  font-weight: 600;
  white-space: nowrap;
}
.score-stars-sm { font-size: 1rem; letter-spacing: 1px; }
.score-stars-sm.score-5, .score-stars-sm.score-4 { color: var(--green); }
.score-stars-sm.score-3 { color: var(--yellow); }
.score-stars-sm.score-2 { color: var(--orange); }
.score-stars-sm.score-1 { color: var(--red); }

.day-chevron {
  font-size: 1rem;
  color: var(--text-light);
  transition: transform 0.2s;
  line-height: 1;
}

/* ── Collapsible body ── */
.day-body { }
.day-body.collapsed { display: none; }

/* ── Meta bar ── */
.day-meta-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.6rem 1.25rem;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.day-departure-info { color: var(--text); }
.day-departure-info strong { color: var(--blue-dark); }
.sun-info { color: var(--text-light); }

/* ===== UV badge ===== */
.uv-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
  display: inline-block;
}
.uv-low     { color: var(--green); }
.uv-mod     { color: var(--yellow); background: #fef9e7; }
.uv-high    { color: var(--orange); background: #fdebd0; }
.uv-extreme { color: #fff; background: var(--red); }

/* ===== Cycling Score ===== */
.cycling-score {
  padding: 0.65rem 1.25rem;
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap;
  gap: 0.5rem; border-bottom: 1px solid var(--border);
}
.score-stars { font-size: 1.25rem; letter-spacing: 2px; }
.score-label {
  font-size: 0.88rem; font-weight: 600;
  padding: 0.18rem 0.7rem; border-radius: 20px;
}
.score-5 .score-label, .score-4 .score-label { background: #d4efdf; color: #1a7a40; }
.score-3 .score-label { background: #fef9e7; color: #9a6f00; }
.score-2 .score-label { background: #fdebd0; color: #a04000; }
.score-1 .score-label { background: #fadbd8; color: #a00000; }

/* ===== Departure Rec ===== */
.departure-rec {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: #f8fafc;
}
.rec-title {
  font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-light); margin-bottom: 0.35rem;
}
.rec-adjusted {
  background: #fff3cd; color: #856404;
  font-size: 0.68rem; padding: 0.1rem 0.4rem;
  border-radius: 8px; font-weight: 700;
  text-transform: none; letter-spacing: 0;
}
.rec-time { font-size: 1.5rem; font-weight: 700; color: var(--blue-dark); }
.rec-reasons { margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.2rem; }
.rec-reason { font-size: 0.8rem; display: flex; align-items: flex-start; gap: 0.3rem; }
.rec-reason.ok   { color: var(--green); }
.rec-reason.warn { color: var(--orange); }

/* ===== Sections ===== */
.section { padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--border); }
.section:last-child { border-bottom: none; }
.section-title {
  font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-light);
  margin-bottom: 0.6rem; font-weight: 600;
}
.section-sub { font-size: 0.68rem; text-transform: none; letter-spacing: 0; font-weight: 400; }

/* ===== Rain Window Bar ===== */
.rain-bar-wrap { display: flex; flex-direction: column; gap: 0.3rem; }
.rain-bar-legend {
  display: flex; gap: 0.75rem; font-size: 0.7rem; flex-wrap: wrap;
}
.rb-leg {
  display: inline-flex; align-items: center; gap: 0.25rem; color: var(--text-light);
}
.rb-leg::before {
  content: ''; display: inline-block;
  width: 10px; height: 10px; border-radius: 3px;
  background: var(--c);
}
.rain-bar {
  display: flex; height: 28px; border-radius: 6px;
  overflow: hidden; gap: 1px; background: var(--border);
}
.rain-bar-cell { flex: 1; transition: opacity 0.15s; cursor: default; }
.rain-bar-cell:hover { opacity: 0.75; }
.rain-bar-times {
  display: flex; justify-content: space-between;
  font-size: 0.65rem; color: var(--text-light);
  padding: 0 1px;
}

/* ===== Elevation Chart ===== */
.elev-wrap { display: flex; flex-direction: column; gap: 0.5rem; }
.elev-stats { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.elev-stat {
  font-size: 0.78rem; font-weight: 600;
  padding: 0.15rem 0.55rem; border-radius: 20px;
}
.elev-stat.gain  { background: #d4efdf; color: #1a7a40; }
.elev-stat.loss  { background: #fdebd0; color: #a04000; }
.elev-stat.range { background: #eaf4fb; color: var(--blue-dark); }
.elev-chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.elev-svg { width: 100%; min-width: 280px; max-width: 500px; display: block; }

/* ===== Hourly table ===== */
.hourly-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.hourly-table { border-collapse: collapse; min-width: 100%; font-size: 0.82rem; }
.hourly-table th {
  text-align: left; padding: 0.28rem 0.55rem;
  color: var(--text-light); font-weight: 600;
  font-size: 0.72rem; white-space: nowrap; background: #f8fafc;
}
.hourly-table td { padding: 0.38rem 0.55rem; white-space: nowrap; border-top: 1px solid var(--border); }
.hourly-table tr.highlight-row { background: #eaf4fb; }
.hourly-table tr.highlight-row td { font-weight: 600; }

.rain-low   { color: var(--green); }
.rain-mid   { color: var(--yellow); }
.rain-high  { color: var(--red); }
.wind-low   { color: var(--green); }
.wind-mid   { color: var(--yellow); }
.wind-high  { color: var(--orange); }
.wind-xhigh { color: var(--red); }
.temp-val   { font-weight: 600; }

/* Wind relative */
.wind-rel       { font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.35rem; border-radius: 8px; display: inline-block; margin-left: 2px; }
.wind-tail      { background: #d4efdf; color: #1a7a40; }
.wind-head      { background: #fadbd8; color: #a00000; }
.wind-cross     { background: #fef9e7; color: #9a6f00; }
.wind-rel-small { font-size: 0.68rem; }

/* ===== Route Timeline ===== */
.route-timeline { display: flex; flex-direction: column; }
.route-point {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: start;
  gap: 0 0.6rem;
  position: relative;
}
.route-spine { display: flex; flex-direction: column; align-items: center; }
.route-dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--blue); border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--blue);
  margin-top: 5px; flex-shrink: 0;
  position: relative; z-index: 1;
}
.route-dot.start    { background: var(--green);  box-shadow: 0 0 0 2px var(--green); }
.route-dot.end      { background: var(--red);    box-shadow: 0 0 0 2px var(--red); }
.route-dot.train    { background: var(--yellow); box-shadow: 0 0 0 2px var(--yellow); }
.route-line {
  width: 2px; background: var(--border);
  flex: 1; min-height: 16px;
}
.route-info { padding: 0.4rem 0 0.7rem; }
.route-name {
  font-size: 0.92rem; font-weight: 600; color: var(--text);
  display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap;
}
.pt-elev { font-size: 0.72rem; color: var(--text-light); font-weight: 400; }
.route-eta  { font-size: 0.75rem; color: var(--blue-light); margin-top: 1px; }
.route-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.25rem; }
.pt-badge {
  font-size: 0.68rem; font-weight: 700;
  padding: 0.12rem 0.45rem; border-radius: 8px;
  display: inline-block; color: #fff;
}
.badge-train     { background: var(--yellow); color: #fff; }
.badge-train-arr { background: var(--blue-light); }
.badge-overnight { background: var(--purple); }
.route-weather {
  font-size: 0.8rem; color: var(--text);
  margin-top: 0.3rem; display: flex; flex-wrap: wrap; gap: 0.3rem;
}
.route-weather-item {
  display: inline-flex; align-items: center; gap: 0.18rem;
  background: var(--grey-bg); padding: 0.12rem 0.45rem; border-radius: 8px;
}
.route-km {
  font-size: 0.72rem; color: var(--text-light);
  padding-top: 0.55rem; text-align: right; white-space: nowrap;
}

/* ===== Stop advice ===== */
.stop-advice {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  display: inline-block;
}
.stop-storm { background: #f0e6f6; color: var(--purple); border: 1px solid #d7bde2; }
.stop-rain  { background: #eaf4fb; color: var(--blue);   border: 1px solid #aed6f1; }

/* ===== Utility ===== */
.hidden { display: none !important; }
.no-data { color: var(--text-light); font-size: 0.82rem; font-style: italic; }

/* ===== Responsive ===== */
@media (max-width: 520px) {
  header h1 { font-size: 1.05rem; }
  .header-sub { display: none; }
  .header-meta { align-items: flex-start; }
  .day-toggle { padding: 0.75rem 1rem; }
  .section, .departure-rec, .day-meta-bar, .cycling-score { padding-left: 1rem; padding-right: 1rem; }
  .day-toggle-right { gap: 0.4rem; }
  .score-stars-sm { display: none; }
}