/* ============================================================
   Field Notebook — DAY / NIGHT SPACE TOGGLE
   A self-contained CSS + SVG switch (the astronaut/moon "space"
   toggle). It drives nothing itself — it simply reflects the
   theme's existing [data-theme] attribute and carries the
   [data-theme-toggle] hook, so assets/js/theme-toggle.js flips
   and persists the choice exactly as before. Never flashes the
   wrong state because the no-flash boot script sets [data-theme]
   before first paint.
   ============================================================ */

.fn-daynight{
  font-size:15px;                 /* one knob to scale the whole control */
  position:relative;display:inline-block;flex:0 0 auto;vertical-align:middle;
  width:4.15em;height:2.05em;padding:0;border:0;border-radius:2.05em;
  background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;
  line-height:0;
}
.fn-daynight__track{
  position:absolute;inset:0;border-radius:2.05em;overflow:hidden;
  background:linear-gradient(160deg,#7db2e8 0%,#a9d0f5 60%,#c9e2fb 100%);
  box-shadow:inset 2px 2px 6px rgba(40,60,90,.35), inset -2px -2px 6px rgba(255,255,255,.35), 3px 3px 8px rgba(0,0,0,.14);
  transition:background .6s var(--ease,ease), box-shadow .5s var(--ease,ease);
}
:root[data-theme="dark"] .fn-daynight__track{
  background:linear-gradient(160deg,#26264f 0%,#161536 55%,#0c0b22 100%);
  box-shadow:inset 2px 2px 7px rgba(0,0,0,.6), inset -1px -1px 5px rgba(120,120,180,.18), 3px 3px 8px rgba(0,0,0,.5);
}

/* Stars — fade in at night */
.fn-daynight__stars{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease,ease)}
.fn-daynight__stars::before,
.fn-daynight__stars::after{
  content:"";position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;top:.15em;left:.35em;
  box-shadow:
    .7em .35em 0 -.3px #fff, 1.15em .8em 0 -.5px rgba(255,255,255,.8),
    1.7em .3em 0 -.4px #fff, 2.15em .95em 0 -.6px rgba(255,255,255,.7),
    2.7em .5em 0 -.4px #fff, 1.35em 1.25em 0 -.6px rgba(255,255,255,.6),
    2.05em 1.4em 0 -.7px rgba(255,255,255,.55), .95em 1.5em 0 -.7px rgba(255,255,255,.5);
}
.fn-daynight__stars::after{top:.05em;left:1.15em;opacity:.7;transform:scale(.8)}
:root[data-theme="dark"] .fn-daynight__stars{opacity:1}

/* Comets / shooting stars — animate only at night */
.fn-daynight__comet{position:absolute;top:.4em;left:2.4em;width:.9em;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff);border-radius:2px;opacity:0;transform:rotate(28deg)}
.fn-daynight__comet::after{content:"";position:absolute;right:-1px;top:-1px;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 4px 1px rgba(255,255,255,.9)}
:root[data-theme="dark"] .fn-daynight__comet--1{animation:fn-comet 3.6s var(--ease,ease) infinite;animation-delay:.4s}
:root[data-theme="dark"] .fn-daynight__comet--2{top:1.1em;left:2.9em;transform:rotate(28deg) scale(.7);animation:fn-comet 4.8s var(--ease,ease) infinite;animation-delay:2s}
@keyframes fn-comet{0%{opacity:0;transform:translate(.6em,-.4em) rotate(28deg)}8%{opacity:1}30%{opacity:0;transform:translate(-1.1em,.7em) rotate(28deg)}100%{opacity:0}}

/* Astronaut — floats in the open sky (left of the moon) at night */
.fn-daynight__astro{position:absolute;left:.62em;bottom:.32em;width:1.05em;height:1.05em;opacity:0;transform:translateY(.3em) rotate(8deg);transition:opacity .6s var(--ease,ease) .1s, transform .6s var(--ease,ease) .1s;z-index:2}
.fn-daynight__astro svg{width:100%;height:100%;display:block}
:root[data-theme="dark"] .fn-daynight__astro{opacity:1;transform:translateY(0) rotate(8deg);animation:fn-float 4s ease-in-out infinite}
@keyframes fn-float{0%,100%{transform:translateY(0) rotate(8deg)}50%{transform:translateY(-.14em) rotate(5deg)}}

/* Knob: sun (day) -> moon (night) */
.fn-daynight__knob{
  position:absolute;top:.23em;left:.23em;width:1.59em;height:1.59em;border-radius:50%;z-index:3;
  background:radial-gradient(circle at 35% 30%,#fff7e0,#ffe6a1 60%,#ffd873);
  box-shadow:0 0 .5em .12em rgba(255,231,160,.85), inset -2px -2px 4px rgba(196,150,40,.4);
  transition:transform .6s var(--ease,ease), background .6s var(--ease,ease), box-shadow .6s var(--ease,ease);
}
:root[data-theme="dark"] .fn-daynight__knob{
  transform:translateX(2.1em);
  background:radial-gradient(circle at 38% 32%,#f4f2ff,#d9d8ec 62%,#b9b8d2);
  box-shadow:0 0 .5em .08em rgba(210,214,240,.5), inset -2px -2px 4px rgba(120,122,150,.5);
}
.fn-daynight__crater{position:absolute;border-radius:50%;background:rgba(150,152,180,.55);opacity:0;transition:opacity .5s var(--ease,ease) .15s}
.fn-daynight__crater--1{width:.38em;height:.38em;top:.35em;left:.5em}
.fn-daynight__crater--2{width:.24em;height:.24em;top:.85em;left:.95em}
.fn-daynight__crater--3{width:.18em;height:.18em;top:.5em;left:1.05em}
:root[data-theme="dark"] .fn-daynight__crater{opacity:1}

.fn-daynight:focus-visible{outline:2px solid var(--sage);outline-offset:3px;border-radius:2.05em}

/* The header instance hides on mobile — the drawer carries its own toggle
   (mirrors the old .nav__theme behaviour). */
@media (max-width:760px){ .fn-daynight--nav{display:none} }
/* Mobile drawer instance sits inline next to its "Dark mode" label. */
.mm-theme .fn-daynight{font-size:16px}

@media (prefers-reduced-motion:reduce){
  .fn-daynight__comet,
  .fn-daynight__astro{animation:none!important}
  .fn-daynight__knob,
  .fn-daynight__track,
  .fn-daynight__astro,
  .fn-daynight__crater,
  .fn-daynight__stars{transition-duration:.001ms}
}