/* Living details (details.js): the «Nå i Oslo» tick on the day ruler. It stands where the ruler stands (site.css .dayline)
   and hides when the ruler hides, except while it has keyboard focus, so focus is never on something unseen.
   The label ends at the tick, so it never runs into the ruler's own clock below the ruler. */
.dl-now { position: fixed; right: calc(var(--margin) * .4); top: 30vh; z-index: 15; width: 14px; height: 40vh; pointer-events: none; color: var(--evergreen); transition: color .6s ease; }
.nav-dark .dl-now { color: var(--ivory); }
.dl-now button {
  position: absolute; right: 0; top: calc(var(--at, 0) * 100%); transform: translateY(calc(-100% + 6.5px));
  display: flex; align-items: flex-end; gap: 8px; padding: 6px 0 6px 8px; border: 0; background: none; color: inherit; cursor: pointer; pointer-events: auto;
  font: 400 11px/1 var(--sign); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; font-variant-numeric: tabular-nums;
  transition: opacity .6s ease, visibility 0s;
}
.dl-now span { writing-mode: vertical-rl; }
/* the tick crosses the ruler's line (left 6px of its 14px) */
.dl-now button::after { content: ''; flex: none; width: 11px; height: 1px; margin-right: 2px; background: currentColor; transition: height .2s ease; }
.dl-now button:hover::after, .dl-now button:focus-visible::after { height: 2px; }
.nav-dark .dl-now :focus-visible { outline-color: var(--ivory); box-shadow: 0 0 0 4px var(--evergreen); }
:is(.is-intro, .at-end, .wide-scene) .dl-now button:not(:focus-visible) { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }
/* The ruler's dot is the sky's own body (details.js sets --dl-warm, --dl-glow, --dl-moon, --dl-turn; main.js still moves it):
   a small sun with a soft Low Sun glow, warmer at dawn and dusk, crossfading into a thin crescent moon through the blue hour. */
.dayline.has-sky i { background: none; box-shadow: 0 0 6px 1.5px rgb(233 184 143 / var(--dl-glow, .3)); transition: box-shadow .35s linear; }
.dayline.has-sky svg { display: block; width: 7px; height: 7px; overflow: visible; }
.dl-sun { fill: color-mix(in srgb, var(--lowsun, #e9b88f) var(--dl-warm, 0%), currentColor); opacity: calc(1 - var(--dl-moon, 0)); transition: fill .35s linear, opacity .35s linear; }
.dl-moon { fill: currentColor; opacity: var(--dl-moon, 0); transform: rotate(var(--dl-turn, -8deg)); transition: opacity .35s linear, transform .35s linear; }
@media (max-width: 900px) { .dl-now { display: none; } }
@media print { .dl-now { display: none; } }