/* V2 world's colour (V2_SKY_BUILD.md), first-load half: the sky strip, and the P14.1 page tint typed so it fades.
   The grade, the accent, the night plate and festival dress are fx/sky.art.css (loaded with fx/sky.art.js). */
@property --atmo-tint { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --atmo-vignette { syntax: "<number>"; inherits: true; initial-value: 0; }

/* The strip sits in the tick slot beside the clock words; a phone shows the slot again, as one slim line. */
.sb-tick:has(> #fx-sky > .sky) { flex-flow: row wrap; align-items: center; column-gap: 10px; }
.sb-tick:has(> #fx-sky > .sky) > .sb-tick-track { flex: 1 0 100%; }
#fx-sky { flex: 1 1 150px; min-width: 0; }
.sky { position: relative; display: flex; align-items: center; gap: 7px; height: 17px; overflow: hidden; color: var(--ink-dim); font: italic var(--t-xs)/17px var(--f-book); }
.sky svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sky-arc { width: 40px; height: 17px; }
.sky-arc path { stroke: var(--rule-strong); stroke-width: 1.2; stroke-dasharray: 1.5 2.5; }
.sky-arc circle { fill: var(--gold); stroke: none; }
.sky[data-night="true"] .sky-arc circle { fill: var(--ink-bright); }
.sky-wx { width: 15px; height: 15px; }
.sky-gauge { width: 16px; height: 16px; color: var(--lapis); }
.sky-gauge[data-g="none"], .sky-fest[data-on="false"], .sky-season:empty { display: none; }
.sky-gauge:is([data-g="flood"], [data-g="ebb"]) :is(.sky-dial, .sky-hand), .sky-gauge:is([data-g="head"], [data-g="vented"]) .sky-wave { display: none; }
.sky-gauge[data-g="ebb"] { transform: scaleY(-1); }
.sky-gauge:is([data-g="head"], [data-g="vented"]) { color: var(--rubric); }
.sky-hand { transform-origin: 8px 13px; transform: rotate(-55deg); }
.sky-gauge[data-g="head"] .sky-hand { transform: rotate(55deg); }
.sky-season { font: 500 var(--t-xs)/1 var(--f-caps); }
.sky-season[data-s="spring"] { color: var(--verd); }
.sky-season[data-s="summer"] { color: var(--gold); }
.sky-season[data-s="autumn"] { color: var(--rubric); }
.sky-season[data-s="winter"] { color: var(--lapis); }
.sky-fest { width: 24px; height: 12px; color: var(--rubric); }
.sky-tag { position: absolute; inset: 0; background: var(--panel); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
.sky[data-tag] .sky-tag { opacity: 1; }
@media (max-width: 700px) {
  .sb-tick:has(> #fx-sky > .sky) { display: flex; flex: 1 1 100%; }
  .sb-tick:has(> #fx-sky > .sky) > .sb-tick-track { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  body:not([data-effects="off"])::after { transition: --atmo-tint 2s ease, --atmo-vignette 2s ease; }
  .sky-tag { transition: opacity var(--dur-calm) ease; }
}