/* Sun & Golden Hour Calculator — elevation chart */
.sun-chart {
    width: 100%;
    max-width: 720px;
    height: auto;
    background: #ffffff;
}

.band-night  { fill: var(--ink); fill-opacity: 0.08; }
.band-blue   { fill: var(--accent); fill-opacity: 0.16; }
.band-golden { fill: #f2b441; fill-opacity: 0.30; }
.horizon     { stroke: var(--ink); stroke-width: 1.5; }
.grid        { stroke: var(--line); stroke-width: 1; }
.now-line    { stroke: var(--danger); stroke-width: 1.5; stroke-dasharray: 4 3; }

.sun-path {
    fill: none;
    stroke: var(--caution);
    stroke-width: 2.5;
    stroke-linejoin: round;
}

.axis-label {
    font-size: 11px;
    fill: var(--muted);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.sun-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid var(--line-strong);
}

.legend-golden { background: rgba(242, 180, 65, 0.45); }
.legend-blue   { background: rgba(21, 89, 237, 0.22); }
.legend-night  { background: rgba(25, 42, 61, 0.12); }

.locate-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: -0.5rem 0 1.5rem;
}

.locate-status {
    color: var(--muted);
    font-size: 0.9rem;
}