/* ============================================================
   Milk & Moon — the sky (see sky.js). Delete this file and the
   #sky / #sky-light / #sky-chips elements to remove it.
   ============================================================ */

/* The sky takes the Last feed card's place at the top of the Feed screen. */
#tab-feed .last-card { display: none; }
#tab-feed > .sides { position: relative; z-index: 1; }

.sky {
  position: relative; z-index: 0; flex: none;
  /* The sky reaches down behind the timer row (--overlap) so it blends into it
     instead of ending in a line; the negative bottom margin means that extra
     sky costs no layout height. The timer row sits on top (z-index 1). */
  --overlap: calc(var(--timer, 150px) * .55);
  height: calc(118px + var(--g, 0px) * .75 + var(--overlap));   /* idle: grows into spare height on taller phones */
  margin-top: 2px; margin-bottom: calc(4px - var(--overlap));
  /* Clip sideways at the screen edges: the path, clouds and plane run past them
     (fading out), and some browsers would otherwise widen the page to fit,
     pushing everything off-centre. Vertically the glows may still spill over. */
  overflow-x: clip; overflow-y: visible; -webkit-tap-highlight-color: transparent;
  animation: skyIn 1.2s ease both;
}
.sky svg { position: absolute; inset: 0; display: block; overflow: visible; pointer-events: none; }
/* each layer gets its own compositing surface; the path layer never animates */
.sky-layer { transform: translateZ(0); }
.sky-layer.path { shape-rendering: geometricPrecision; }
@keyframes skyIn { from { opacity: 0; } }

/* the path the sun / moon travels — fades out towards both edges */
.sky-track { fill: none; stroke: url(#sky-fade); stroke-width: 1.2; stroke-dasharray: 1.5 6; stroke-linecap: round; opacity: .3; }
.sky-track.done { opacity: .55; }
/* morning / evening at the path's ends, noon / midnight at its top */
.sky-end {
  font-size: 8.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  /* soft muted grey against a day or night sky; while the dawn / dusk glow is up
     (--tw, set by sky.js) it eases to a darker grey so it still reads */
  fill: color-mix(in srgb, #4a3d44 calc(var(--tw, 0) * 100%), var(--ink-2));
  opacity: calc(.75 + var(--tw, 0) * .15);
}

/* sun: golden when high, deep orange-red on the horizon */
.sky-sun {
  fill: color-mix(in srgb, #f0703f calc(var(--sky-low, 0) * 100%), #f7c95c);
  filter: drop-shadow(0 0 5px rgba(247, 150, 80, .6));
}
.sky-rays line { stroke: color-mix(in srgb, #f0703f calc(var(--sky-low, 0) * 100%), #f7c95c); stroke-width: 2; stroke-linecap: round; opacity: .75; }
.sky-rays { animation: skySpin 40s linear infinite; }
@keyframes skySpin { to { transform: rotate(360deg); } }

/* moon: lit part in cream, the rest a faint disc, a soft breathing halo */
.sky-moon { fill: #fff6e3; filter: drop-shadow(0 0 4px rgba(255, 243, 214, .7)); }
.sky-moon-dark { fill: var(--ink-2); opacity: .16; }
.sky-halo { animation: skyBreathe 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes skyBreathe { 50% { opacity: .65; transform: scale(.92); } }

.sky-star { fill: color-mix(in srgb, #fff6e3 70%, var(--ink-2)); opacity: .3; animation: skyTwinkle 4s ease-in-out infinite; }
@keyframes skyTwinkle { 50% { opacity: .9; } }
/* shooting star: a thin streak, bright at its head, slid along by sky.js */
.sky-shoot {
  position: absolute; height: 1.6px; border-radius: 2px; pointer-events: none; opacity: 0;
  transform-origin: 0 50%; will-change: transform, opacity;
  background: linear-gradient(to right, rgba(255, 246, 227, 0), rgba(255, 246, 227, .55) 70%, #fff8ea);
  filter: drop-shadow(0 0 3px rgba(255, 244, 220, .85));
}

/* feed markers: cartoon plane by day, smiley satellite by night.
   last = full colour, next = faded with a dashed outline, overdue = rosy */
.sky-toy { --toy-body: #fffaf4; --toy-line: #6f5a63; --toy-accent: #eaa29f; --toy-glass: #a9cdea; --toy-panel: #b9d6ee; }
.sky-toy-body { fill: var(--toy-body); stroke: var(--toy-line); stroke-width: .9; }
.sky-toy-accent { fill: var(--toy-accent); stroke: var(--toy-line); stroke-width: .8; stroke-linejoin: round; }
.sky-toy-window { fill: var(--toy-glass); stroke: var(--toy-line); stroke-width: .6; }
.sky-toy-eye { fill: var(--toy-line); }
.sky-toy-smile, .sky-toy-line { fill: none; stroke: var(--toy-line); stroke-width: .8; stroke-linecap: round; }
.sky-toy-blush { fill: #f4a7a3; opacity: .7; }
.sky-toy-panel { fill: var(--toy-panel); stroke: var(--toy-line); stroke-width: .8; }
.sky-toy-grid { stroke: var(--toy-line); stroke-width: .5; opacity: .45; fill: none; }
.sky-puff { fill: #fff; stroke: var(--toy-line); stroke-width: .5; stroke-opacity: .25; }
.sky-prop { fill: var(--toy-line); opacity: .45; animation: skyProp .25s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes skyProp { 50% { transform: scaleY(.2); } }
.sky-blink { fill: var(--rose); animation: skyBlink 2.4s steps(1) infinite; }
@keyframes skyBlink { 50% { opacity: .25; } }
.sky-bob { animation: skyBob 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes skyBob { 50% { transform: translateY(-1.2px) rotate(-4deg); } }

.sky-toy.next { opacity: .7; }
.sky-toy.next .sky-toy-body, .sky-toy.next .sky-toy-accent, .sky-toy.next .sky-toy-panel { stroke-dasharray: 1.6 1.2; fill-opacity: .55; }
.sky-toy.late { --toy-body: #fde3e1; --toy-accent: var(--rose); opacity: 1; }
.sky-toy.late .sky-toy-body, .sky-toy.late .sky-toy-accent, .sky-toy.late .sky-toy-panel { stroke-dasharray: none; fill-opacity: 1; }

/* one look for the pins, on the path and in the chips: the next feed is the
   bold dot (rose when overdue), the last one a faded dashed ring — what's
   coming matters more than what's done. Each sits in a soft halo. */
.sky-pin { stroke: var(--bg); stroke-width: 2; }
.sky-pin.next { fill: var(--ink); stroke-width: 2.2; }
.sky-pin.next.late { fill: var(--rose); stroke: var(--rose-deep); }
.sky-pin.last { fill: var(--card); stroke: var(--ink-2); stroke-width: 1.8; stroke-dasharray: 2.8 2.2; }
.sky-pin-halo { fill: var(--ink); opacity: .12; }
.sky-pin-halo.late { fill: var(--rose); opacity: .3; }
:root[data-theme="dark"] .sky-pin-halo { fill: #fff6e3; opacity: .16; }
.sky-pin-halo.last { opacity: .07; }
:root[data-theme="dark"] .sky-pin-halo.last { opacity: .09; }
/* passing over the sun or moon: in front, but a little see-through */
.sky-pin-group.over { opacity: .7; }
/* the pins can be tapped (the rest of the sky lets taps through) */
.sky-pin-hit { fill: transparent; pointer-events: all; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:root[data-theme="dark"] .sky-pin-halo.late { fill: var(--rose); opacity: .35; }
:root[data-theme="dark"] .sky-toy { --toy-body: #f7ece6; --toy-line: #4a3540; }
:root[data-theme="dark"] .sky-toy.late { --toy-body: #fde3e1; }
:root[data-theme="dark"] .sky-toy.next:not(.late) { opacity: .85; }
:root[data-theme="dark"] .sky-toy.next:not(.late) .sky-toy-body,
:root[data-theme="dark"] .sky-toy.next:not(.late) .sky-toy-panel { fill-opacity: .8; }

/* daytime sky: faint blue wash + drifting clouds */
.sky, .sky-light { --sky-blue: #b9d6ee; }
:root[data-theme="dark"] :is(.sky, .sky-light) { --sky-blue: #4c6a8a; }
/* drifting clouds / plane / satellite: HTML layers slid by the GPU (smooth, sub-pixel) */
.sky-floaters, .sky-floaters-group { position: absolute; inset: 0; pointer-events: none; }
.sky-floater {
  position: absolute; left: 0;
  transform: translate3d(-60px, 0, 0);   /* moved by sky.js (Web Animations) */
  will-change: transform; backface-visibility: hidden;
}
.sky-floater svg { display: block; overflow: visible; }
.sky-floater.plane, .sky-floater.satellite { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .12)); }
/* clouds catch the dawn / dusk light */
.sky-cloud-shape { fill: color-mix(in srgb, color-mix(in srgb, #ff9d8f calc(var(--deep, 0) * 100%), #ffd4a3) calc(var(--tw, 0) * 75%), #fff); opacity: .78; }
:root[data-theme="dark"] .sky-cloud-shape { fill: color-mix(in srgb, #ff9d8f calc(var(--tw, 0) * 70%), #d9cfd8); opacity: calc(.25 + var(--tw, 0) * .3); }

/* ---------- visitors: birds, balloon, butterfly by day; saucer, rocket, bat, fireflies by night ---------- */
.sky-visitors { position: absolute; inset: 0; pointer-events: none; }
.sky-visitor { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; backface-visibility: hidden; }
.sky-visitor svg { position: static; display: block; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .1)); }   /* not the full-band layers */
/* birds: wings beat from the shoulder */
.v-beak { fill: #f3b46c; stroke: var(--toy-line); stroke-width: .5; stroke-linejoin: round; }
.v-wing { transform-box: fill-box; transform-origin: 85% 95%; animation: vFlap var(--flap, .34s) ease-in-out infinite alternate; }
.v-wing-far { opacity: .75; animation-delay: calc(var(--flap, .34s) * -.15); }
@keyframes vFlap { to { transform: scaleY(-.55); } }
/* balloon: sways gently under its envelope */
.v-sway { transform-box: fill-box; transform-origin: 50% 0; animation: vSway 7s ease-in-out infinite alternate; }
@keyframes vSway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.v-rope { stroke: var(--toy-line); stroke-width: .5; opacity: .7; fill: none; }
.v-basket { fill: #e8c39c; stroke: var(--toy-line); stroke-width: .7; }
/* butterfly: quick wingbeats, seen from above */
.v-flutter { transform-box: fill-box; transform-origin: 50% 50%; animation: vFlutter var(--flap, .17s) ease-in-out infinite alternate; }
@keyframes vFlutter { to { transform: scaleX(.22); } }
.v-wing-a { fill: #f4b8ca; stroke: var(--toy-line); stroke-width: .6; }
.v-wing-b { fill: #cbb6ec; stroke: var(--toy-line); stroke-width: .6; }
.v-wing-dot { fill: #fffaf4; opacity: .85; }
.v-bfly-body { stroke: var(--toy-line); stroke-width: 1.3; stroke-linecap: round; }
/* flying saucer: bobs as it hovers, lights chasing round its rim */
.v-hover { transform-box: fill-box; transform-origin: 50% 50%; animation: vHover 2.4s ease-in-out infinite alternate; }
@keyframes vHover { from { transform: translateY(-1.2px) rotate(-2deg); } to { transform: translateY(1.2px) rotate(2deg); } }
.v-alien { fill: #bfe3a4; stroke: var(--toy-line); stroke-width: .6; }
.v-ufo-band { fill: none; stroke: var(--toy-accent); stroke-width: 1.2; stroke-linecap: round; }
.v-light { fill: #ffe38a; animation: vBlink 1.2s steps(1) infinite; }
@keyframes vBlink { 50% { fill: #fff8e1; opacity: .5; } }
/* rocket: a flickering flame */
.v-flame { fill: #f6a85a; transform-box: fill-box; transform-origin: 50% 0; animation: vFlame .12s ease-in-out infinite alternate; }
.v-flame-core { fill: #ffe38a; transform-box: fill-box; transform-origin: 50% 0; animation: vFlame .09s ease-in-out infinite alternate-reverse; }
@keyframes vFlame { from { transform: scaleY(.75) scaleX(.9); } to { transform: scaleY(1.15) scaleX(1.05); } }
/* bat: fast, papery wingbeats */
.v-bat { fill: #7b6272; stroke: #4a3540; stroke-width: .7; stroke-linejoin: round; }
.v-bat-eye { fill: #fff6e3; }
.v-bat-smile { fill: none; stroke: #fff6e3; stroke-width: .5; stroke-linecap: round; }
.v-bwing-l, .v-bwing-r { transform-box: fill-box; animation: vBatFlap var(--flap, .15s) ease-in-out infinite alternate; }
.v-bwing-l { transform-origin: 100% 40%; }
.v-bwing-r { transform-origin: 0% 40%; }
@keyframes vBatFlap { to { transform: scaleY(.3); } }
/* fireflies: a slow glow, each on its own beat */
.v-glow { fill: #ffe98a; opacity: .35; filter: blur(1.4px); animation: vGlow var(--glow, 2s) ease-in-out var(--glow-delay, 0s) infinite alternate; }
.v-glow-core { fill: #fff6c4; animation: vGlow var(--glow, 2s) ease-in-out var(--glow-delay, 0s) infinite alternate; }
.v-firefly { fill: #6f5a63; }
@keyframes vGlow { from { opacity: .15; } to { opacity: 1; } }

/* ---------- last / next chips (in the top bar) ---------- */
.sky-chips { position: relative; flex: none; display: flex; flex-direction: column; gap: 4px; width: 172px; }   /* both chips one fixed width */
.sky-chips[hidden] { display: none; }
@media (max-width: 360px) {   /* small phones: slimmer chips leave the name room */
  .sky-chips { width: 150px; }
  .sky-chip { padding: 3px 8px 3px 6px; gap: 0 5px; }
  .sky-b-label { font-size: .58rem; letter-spacing: .05em; }
  .sky-b-time { font-size: .84rem; }
}
.sky-chip {
  position: relative; display: inline-flex; align-items: baseline; gap: 0 6px;
  padding: 3px 10px 3px 7px; border-radius: 99px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 72%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm); color: var(--ink); text-align: left;
  font: inherit; line-height: 1.25; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: box-shadow .2s, transform .15s;
  animation: skyPop .45s cubic-bezier(.2, 1.3, .4, 1) both;
}
.sky-chip.next { animation-delay: .08s; }
.sky-chip:active { transform: scale(.97); }
.sky-chip-pin { width: 21px; height: 21px; margin: -3px -2px -3px -5px;   /* 1:1 with the path pins */ align-self: center; flex: none; overflow: visible; }
.sky-b-label { white-space: nowrap; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); }
.sky-b-time { margin-left: auto; font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: .92rem; white-space: nowrap; }
.sky-chip.last .sky-b-time { color: var(--ink-2); }   /* last feed faded, next feed bold */
.sky-chip.late { border-color: var(--rose); }
.sky-chip.late .sky-b-label, .sky-chip.late .sky-b-time { color: var(--rose-deep); }
.sky-chip.open { z-index: 5; box-shadow: var(--shadow); background: color-mix(in srgb, var(--card) 90%, transparent); }

/* a pin's details: a card just above it, with a tail pointing down at it */
.sky-pin-card {
  position: absolute; z-index: 4; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px;
  width: max-content; max-width: min(240px, calc(100% - 16px)); padding: 7px 11px;
  border-radius: 14px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow);
  color: var(--ink); line-height: 1.25; animation: skyPop .25s cubic-bezier(.2, 1.3, .4, 1) both;
}
.sky-pin-card::after {
  content: ""; position: absolute; left: calc(var(--tail, 50%) - 5px); bottom: -5px;
  width: 9px; height: 9px; transform: rotate(45deg);
  background: inherit; border: inherit; border-top: 0; border-left: 0;
}
.sky-pin-card.last .sky-b-time { color: var(--ink-2); }
.sky-pin-card.late { border-color: var(--rose); }
.sky-pin-card.late .sky-b-label, .sky-pin-card.late .sky-b-time { color: var(--rose-deep); }
.sky-pin-card .sky-b-time { margin-left: auto; }
.sky-pin-card .sky-b-more {
  display: flex; position: static; flex-basis: 100%; width: auto; max-width: none;
  margin-top: 3px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}

/* details drop down from the chip */
.sky-b-more {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 5;
  width: max-content; max-width: min(240px, calc(100vw - 36px));
  flex-direction: column; gap: 2px; padding: 8px 11px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow);
  font-size: .78rem; font-weight: 700; color: var(--ink-2); cursor: default;
}
.sky-chip.open .sky-b-more { display: flex; }
.sky-b-actions { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.sky-edit {
  display: inline-block; padding: 4px 10px; border-radius: 99px; cursor: pointer;
  background: var(--blush-2); color: var(--ink); font-weight: 800; font-size: .74rem;
}
.sky-hint { position: absolute; left: 0; right: 0; top: 18%; margin: 0; text-align: center; font-size: .82rem; font-weight: 700; color: var(--ink-2); }
@keyframes skyPop { from { opacity: 0; transform: translateY(4px) scale(.94); } }
.sky-chips.settled .sky-chip { animation: none; }

/* ---------- page light from the sun and the moon (both, while they share the sky) ---------- */
/* Registered so the light can ease smoothly between sky.js's updates (every
   30 s) instead of stepping; browsers without @property just step. */
@property --tw     { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --deep   { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --spread { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --dusk   { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --belt   { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --wa     { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --ss     { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --ms     { syntax: '<number>'; inherits: true; initial-value: 0; }
.sky-light {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity 1.5s ease;
  /* twilight colours: --deep 1 = sun on/below the horizon (reds, pinks, violet), 0 = climbing (golds) */
  --tw-core: color-mix(in srgb, #ff8f5a calc(var(--deep, 0) * 100%), #ffd98f);
  --tw-mid:  color-mix(in srgb, #f0627a calc(var(--deep, 0) * 100%), #ffae74);
  --tw-far:  color-mix(in srgb, #9a5aa8 calc(var(--deep, 0) * 100%), #f5a3a6);
  background:
    radial-gradient(circle at var(--sx, 50%) var(--sy, 20%), rgba(255, 214, 140, var(--ss, 0)) 0, rgba(255, 214, 140, 0) 55vmax),
    radial-gradient(circle at var(--mx, 50%) var(--my, 20%), rgba(255, 240, 210, var(--ms, 0)) 0, rgba(255, 240, 210, 0) 45vmax),
    /* sunrise / sunset: a glow along the horizon under the sun — a thin band
       in deep twilight that spreads up the sky as the sun nears and clears it… */
    radial-gradient(ellipse calc(80vmax + var(--spread, 1) * 45vmax) calc(var(--spread, 1) * 62vmax) at var(--gx, 50%) var(--gy, 25%),
      color-mix(in srgb, var(--tw-core) calc(var(--tw, 0) * 82%), transparent) 0,
      color-mix(in srgb, var(--tw-mid) calc(var(--tw, 0) * 60%), transparent) 22%,
      color-mix(in srgb, var(--tw-far) calc(var(--tw, 0) * 34%), transparent) 50%,
      transparent 78%),
    /* …and on the far side, the belt of Venus: a pink band over the earth's
       grey-blue shadow rising from the horizon (dusk; the reverse at dawn) */
    radial-gradient(ellipse 110vmax 30vmax at var(--bx, 100%) var(--gy, 25%),
      color-mix(in srgb, #405087 calc(var(--belt, 0) * 55%), transparent) 0,
      color-mix(in srgb, #5f5c96 calc(var(--belt, 0) * 35%), transparent) 16%,
      color-mix(in srgb, #e7a3bb calc(var(--belt, 0) * 55%), transparent) 34%,
      color-mix(in srgb, #f2c0c8 calc(var(--belt, 0) * 25%), transparent) 52%,
      transparent 72%),
    /* …under a deep blue-hour sky that lifts as the sun climbs */
    linear-gradient(to bottom,
      color-mix(in srgb, #1c2452 calc(var(--dusk, 0) * 100%), transparent) 0,
      color-mix(in srgb, #3b3f7a calc(var(--dusk, 0) * 70%), transparent) 30%,
      color-mix(in srgb, #6a4f86 calc(var(--dusk, 0) * 30%), transparent) 55%,
      transparent 80%),
    /* daytime: the faint blue sky band, edge to edge (behind everything else) */
    linear-gradient(to bottom,
      transparent var(--wt, 0px),
      color-mix(in srgb, var(--sky-blue) calc(var(--wa, 0) * 50%), transparent) calc(var(--wt, 0px) + var(--wh, 0px) * .3),
      color-mix(in srgb, var(--sky-blue) calc(var(--wa, 0) * 30%), transparent) calc(var(--wt, 0px) + var(--wh, 0px) * .62),
      transparent calc(var(--wt, 0px) + var(--wh, 0px)));
}
.sky-light.on { opacity: 1; }
.sky-light.live {
  transition: opacity 1.5s ease, --tw 30s linear, --deep 30s linear, --spread 30s linear, --dusk 30s linear,
    --belt 30s linear, --wa 30s linear, --ss 30s linear, --ms 30s linear;
}

/* Older browsers without overflow: clip — hide sideways overflow the old way */
@supports not (overflow: clip) {
  .sky { overflow: hidden; }
}
.app { overflow-x: clip; }   /* belt and braces: nothing inside the app can widen the page */

/* While feeding the timer and controls need the room: the sky tucks in a little. */
.app.feeding .sky { height: calc(116px + var(--g, 0px) * .5 + var(--overlap)); }
.app.auto-logged .sky { height: calc(90px + var(--overlap)); }