/* Sun tracker demo — sky diagram */

.sky {
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
}

.sky__path {
  fill: none;
  stroke: var(--c-line-strong);
  stroke-dasharray: 2 6;
}

.sky__horizon,
.sky__post {
  stroke: var(--c-ink-2);
  stroke-width: 1;
}

.sky__ticks line {
  stroke: var(--c-line-strong);
  stroke-width: 1;
}

.sky__ticks line.is-major {
  stroke: var(--c-muted);
}

.sky__ticks text,
.sky__text {
  fill: var(--c-muted);
  font-family: var(--f-mono);
  font-size: 11px;
}

.sky__text--big {
  fill: var(--c-ink);
  font-size: 22px;
}

.sky__sun {
  fill: var(--c-accent-fill);
}

.sky__sun-ring {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 1;
}

.sky__ray {
  stroke: var(--c-accent);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.sky__ghost {
  fill: none;
  stroke: var(--c-line-strong);
  stroke-dasharray: 3 3;
}

.sky__panel {
  fill: var(--c-ink);
}

.sky__normal {
  stroke: var(--c-ink-2);
  stroke-width: 1;
}

.sky__pivot {
  fill: var(--c-bg);
  stroke: var(--c-ink);
}

[data-sun],
[data-panel] {
  transition: opacity 0.4s var(--ease-soft);
}

[data-sun].is-down,
.sky__ray.is-down {
  opacity: 0;
}