/* ------------------------------------------------------------------
   Le soleil: live sun position and solar panel sizing (/soleil)
   ------------------------------------------------------------------ */

.sun-place { display: grid; gap: 0.8rem; margin-top: 2rem; max-width: 42rem; }
.sun-place__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; font-family: var(--font-display); font-size: var(--step-1); }
.sun-place__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 9rem)) auto; align-items: end; gap: 1rem; }
@media (max-width: 560px) {
  .sun-place__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sun-place__fields .button { grid-column: 1 / -1; justify-self: start; }
}

/* The sky dome, seen from above. */
.sky { display: grid; gap: 1rem; margin: 0; }
.sky__dome { width: 100%; max-width: 30rem; height: auto; justify-self: center; overflow: visible; }
.sky__disc { fill: color-mix(in srgb, var(--signal) 5%, var(--surface)); }
[data-sun-up="false"] .sky__disc { fill: var(--paper-2); }
.sky__ring { fill: none; stroke: var(--rule); stroke-width: 1; }
.sky__ring--horizon { stroke: var(--rule-strong); stroke-width: 1.5; }
.sky__tick { stroke: var(--rule-strong); stroke-width: 1; }
.sky__label { fill: var(--ink-2); font-family: var(--font-mono); font-size: 13px; }
.sky__small { fill: var(--muted); font-family: var(--font-mono); font-size: 10px; }
.sky__path polyline { fill: none; stroke: var(--signal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sky__path--solstice polyline { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 4; }
.sky__panel { fill: var(--moss-2); stroke: var(--surface); stroke-width: 2; }
.sky__glow { fill: color-mix(in srgb, var(--signal) 25%, transparent); }
.sky__sun { fill: var(--signal); stroke: var(--surface); stroke-width: 2; }
.sky__sun--below { fill: var(--paper-3); stroke: var(--muted); stroke-width: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .sky__glow { animation: sun-glow 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes sun-glow { 50% { transform: scale(1.25); opacity: 0.6; } }

/* Bar charts: on the dark result panel, or on paper for the year. */
.sun-chart { position: relative; display: grid; gap: 0.5rem; }
.sun-chart__svg { width: 100%; height: auto; overflow: visible; }
.sun-chart__grid { stroke: color-mix(in srgb, var(--panel-ink) 10%, transparent); stroke-width: 1; }
.sun-chart__base { stroke: color-mix(in srgb, var(--panel-ink) 35%, transparent); stroke-width: 1; }
.sun-chart__axis { fill: var(--panel-muted); font-family: var(--font-mono); font-size: 10px; }
.sun-chart__hit { fill: transparent; }
.sun-chart__bar { fill: var(--signal); transition: opacity 0.2s; }
.sun-chart__bar.is-short { fill: color-mix(in srgb, var(--signal) 45%, var(--panel)); }
.sun-chart__col.is-hover .sun-chart__bar { opacity: 0.8; }
.sun-chart__need { stroke: var(--panel-ink); stroke-width: 2; stroke-dasharray: 6 4; }
.sun-chart__need-label { fill: var(--panel-ink); font-family: var(--font-mono); font-size: 10px; paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; }
.sun-chart__tip {
  position: absolute;
  top: 0;
  transform: translate(-50%, -100%);
  z-index: 2;
  max-width: 18rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--step--2);
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.18);
}
.sun-chart--paper .sun-chart__grid { stroke: var(--rule); }
.sun-chart--paper .sun-chart__base { stroke: var(--rule-strong); }
.sun-chart--paper .sun-chart__axis { fill: var(--muted); }
.sun-chart--paper .sun-chart__bar.is-short { fill: color-mix(in srgb, var(--signal) 40%, var(--paper)); }
.sun-chart--paper .sun-chart__bar.is-highlight { stroke: var(--ink); stroke-width: 1.5; }
.sun-chart--paper .sun-chart__need { stroke: var(--ink); }
.sun-chart--paper .sun-chart__need-label { fill: var(--ink); stroke: var(--paper); }
@media (max-width: 560px) { .sun-chart__axis, .sun-chart__need-label { font-size: 13px; } }

.sun-year { display: grid; gap: 1rem; }

.sun-table summary { cursor: pointer; }
.sun-table table { width: 100%; margin-top: 0.6rem; border-collapse: collapse; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.sun-table th, .sun-table td { padding: 0.4rem 0.3rem; border-bottom: 1px solid var(--rule); text-align: left; font-weight: 400; }
.sun-table th { font-family: var(--font-mono); font-size: var(--step--2); color: var(--muted); }
.sun-table .num { text-align: right; white-space: nowrap; }
.sun-table .is-worst td { font-weight: 560; }
.tool__result .sun-table th, .tool__result .sun-table td { border-bottom-color: color-mix(in srgb, var(--panel-ink) 13%, transparent); }
.tool__result .sun-table th { color: var(--panel-muted); }

[data-verdict="tight"] .tool__big { color: #e6b04a; }
[data-loading] .sun-chart__svg { opacity: 0.55; transition: opacity 0.3s; }