/* ============================================================
   Sun Direction & Shadows — sun-path ring drawn over the real map
   ============================================================ */

.sun-section .sun-intro {
  font-size: 0.9rem;
  margin: 0 0 1rem;
  max-width: 62ch;
  opacity: 0.85;
}

#sunWidget {
  background: #ffffff;
  border: 1px solid #e6e6ea;
  border-radius: 16px;
  padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
  color: #2a2a2a;
  max-width: 760px;
}

/* ---- map + overlay ---- */
.sun-map-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e2e6;
}
.sun-map { height: 400px; width: 100%; background: #eef1f6; z-index: 0; }
.sun-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 650; }
.sun-hint {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 700; background: rgba(20, 24, 31, 0.86); color: #fff;
  font-size: 0.78rem; padding: 0.35rem 0.75rem; border-radius: 999px;
  pointer-events: none; white-space: nowrap;
}

/* overlay strokes — tuned to read over OpenStreetMap tiles */
.sun-ring { fill: none; stroke: #ffffff; stroke-width: 2.5; opacity: 0.9; }
.sun-ring-inner { stroke-dasharray: 3 5; opacity: 0.55; }
.sun-card { font-size: 14px; font-weight: 800; fill: #ffffff; stroke: #2a2a2a; stroke-width: 3px; paint-order: stroke; }
.sun-arc { stroke: #f5a623; stroke-width: 3; stroke-dasharray: 5 4; opacity: 0.95; }
.sun-ray { stroke: #fbbf24; stroke-width: 2.5; opacity: 0.9; }
.sun-shadow { stroke: #1f2630; stroke-width: 6; stroke-linecap: round; opacity: 0.55; }
.sun-dot { fill: #f59e0b; stroke: #ffffff; stroke-width: 3; }
.sun-edge { fill: #fde68a; stroke: #b45309; stroke-width: 2; }
.sun-building { fill: #2563eb; stroke: #ffffff; stroke-width: 2; }

/* ---- controls ---- */
.sun-controls {
  display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; align-items: center;
  margin: 1rem 0 0.6rem;
}
.sun-ctl { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: #444; font-weight: 600; }
.sun-ctl-time { flex: 1; min-width: 230px; }
.sun-ctl input[type="date"] {
  padding: 0.35rem 0.5rem; border: 1px solid #ccc; border-radius: 6px;
  color: #222; background: #fff; font: inherit;
}
.sun-ctl input[type="range"] { flex: 1; accent-color: #f0b429; }
.sun-ctl strong { min-width: 3.4em; color: #111; }

/* ---- quick-jump buttons ---- */
.sun-jumps { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.9rem; }
.sun-jumps button {
  border: 1px solid #e0c074;
  background: #fff8e8;
  color: #8a6a18;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sun-jumps button:hover { background: #f0b429; border-color: #f0b429; color: #1a1a1a; }

/* ---- readout ---- */
.sun-readout { list-style: none; margin: 0; padding: 0; border-top: 1px solid #ececf0; }
.sun-readout li { display: flex; gap: 0.75rem; padding: 0.45rem 0; border-bottom: 1px solid #ececf0; font-size: 0.86rem; }
.sun-readout .sun-k { flex: 0 0 92px; color: #8a8a8a; font-weight: 600; }
.sun-readout .sun-v { color: #222; }
.sun-readout .sun-v strong { color: #b6892b; }

/* ---- legend + foot ---- */
.sun-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin: 0.7rem 0 0; font-size: 0.74rem; color: #666; }
.sun-legend span { display: flex; align-items: center; gap: 0.35rem; }
.sun-legend .lg { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.sun-legend .lg-sun { width: 11px; height: 11px; border-radius: 50%; background: #f59e0b; }
.sun-legend .lg-arc { height: 0; border-top: 2px dashed #f5a623; }
.sun-legend .lg-shadow { height: 5px; background: #1f2630; opacity: 0.6; }
.sun-legend .lg-bldg { width: 10px; height: 10px; border-radius: 50%; background: #2563eb; }

.sun-foot { margin: 0.8rem 0 0; font-size: 0.76rem; color: #9a9a9a; }

/* ---- optional 3D ---- */
.sun-3d-btn {
  margin-top: 0.85rem;
  border: 1px solid var(--color-gold, #c9a64c);
  background: transparent;
  color: var(--color-gold, #c9a64c);
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sun-3d-btn:hover { background: var(--color-gold, #c9a64c); color: #1a1a1a; }

.sun3d-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: #0c0f14; display: flex; flex-direction: column;
}
.sun3d-bar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.7rem 1rem; background: #14181f; color: #fff;
  border-bottom: 1px solid #232a33;
}
.sun3d-bar strong { font-size: 0.95rem; }
.sun3d-time { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 220px; font-size: 0.82rem; color: #cfd4db; }
.sun3d-time .sun3d-tlabel { min-width: 3.2em; color: #f0b429; font-weight: 700; }
.sun3d-time input[type="range"] { flex: 1; accent-color: #f0b429; }
.sun3d-close {
  background: #2a313c; border: none; color: #fff; padding: 0.45rem 0.9rem;
  border-radius: 6px; cursor: pointer; font-size: 0.82rem; font-weight: 600;
}
.sun3d-close:hover { background: #3a434f; }
.sun3d-canvas { position: relative; flex: 1; min-height: 0; }
.sun3d-canvas .cesium-widget, .sun3d-canvas .cesium-widget canvas { width: 100%; height: 100%; }
.sun3d-status {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #cfd4db; font-size: 0.95rem; text-align: center; padding: 2rem;
}

@media (max-width: 560px) {
  .sun-map { height: 320px; }
  .sun-readout .sun-k { flex-basis: 78px; }
}