/* The sun UI fragment, on top of the app's tokens in web/style.css. */
.sun-panel {
  --sun-night: #2b3550;
  --sun-twilight: #7d6a9a;
  --sun-golden: #e9a64b;
  --sun-day: #cfe3ef;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
}
:root[data-theme="hlbina"] .sun-panel { --sun-day: #8fb4c8; --sun-night: #141b2b; }
.sun-pickers { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.sun-field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--soft); }
.sun-field input {
  height: 44px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--input-border);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
}
.sun-field:first-child { flex: 1 1 140px; }
.sun-field:first-child input { width: 100%; }
.sun-now { height: 44px; }
.sun-day-top { display: flex; justify-content: space-between; align-items: baseline; }
.sun-day-top .label { color: var(--soft); font-size: 12.5px; }
.sun-clock { font-weight: 600; font-variant-numeric: tabular-nums; }
input.slider.sun-slider { width: 100%; margin: 6px 0 0; }
input.slider.sun-slider::-webkit-slider-runnable-track { height: 10px; background: var(--sun-track, var(--band)); }
input.slider.sun-slider::-moz-range-track { height: 10px; background: var(--sun-track, var(--band)); }
input.slider.sun-slider::-moz-range-progress { background: transparent; }
input.slider.sun-slider::-webkit-slider-thumb { margin-top: -5px; }
.sun-marks { position: relative; height: 18px; font-size: 11.5px; color: var(--soft); }
.sun-mark { position: absolute; top: 2px; transform: translateX(-50%); white-space: nowrap; }
.sun-mark.sunrise { transform: translateX(-100%); padding-right: 2px; }
.sun-mark.sunset { transform: none; padding-left: 2px; }
.sun-readout { display: flex; flex-direction: column; gap: 4px; }
.sun-pos { display: flex; gap: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sun-times { color: var(--soft); font-size: 13px; }
.sun-note { color: var(--amber); font-size: 13px; }