/* Approved slate and copper appearance palettes. */
[data-tide="morningtide"], :root {
  color-scheme: light;
  --background: #f3f0ea;
  --foreground: #303844;
  --card: #faf8f4;
  --card-foreground: #303844;
  --primary: #88583f;
  --primary-foreground: #f3f0ea;
  --muted: #e7e7e3;
  --muted-foreground: #626c76;
  --border: #c8ccd0;
  --ring: #88583f;
  --constellation: #746584;
  --constellation-glint: #a77e4d;
  --radius: 0.35rem;
  --appearance-sun: #e9a523;
  --appearance-moon: #fffbea;
  --appearance-comet: #8ed8f8;
  --appearance-dawn: #646580;
  --appearance-dusk: #514864;
  --appearance-slide-duration: 460ms;
  --appearance-palette-duration: 200ms;
  --appearance-settle-duration: 360ms;
  --appearance-slide-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --appearance-arrival-delay: 420ms;
  --appearance-arrival-duration: 280ms;
  --appearance-sun-delay: var(--appearance-arrival-delay);
  --appearance-sun-duration: var(--appearance-arrival-duration);
  --appearance-moon-delay: 0ms;
  --appearance-moon-duration: var(--appearance-slide-duration);
  --appearance-interlude-delay: 80ms;
  --appearance-interlude-duration: 480ms;
  --appearance-morningtide-x: 0px;
  --appearance-eventide-x: -24px;
  --appearance-sky-color: var(--appearance-dawn);
}

[data-tide="eventide"], :root[data-tide="eventide"] {
  color-scheme: dark;
  --background: #29323c;
  --foreground: #e0ddd5;
  --card: #333e4a;
  --card-foreground: #e0ddd5;
  --primary: #deaa83;
  --primary-foreground: #29323c;
  --muted: #3b4651;
  --muted-foreground: #a8b0b8;
  --border: #535e69;
  --ring: #deaa83;
  --constellation: #b5a8cc;
  --constellation-glint: #e7dfcf;
  --appearance-morningtide-x: 24px;
  --appearance-eventide-x: 0px;
  --appearance-sky-color: var(--appearance-dusk);
  --appearance-sun-delay: 0ms;
  --appearance-sun-duration: var(--appearance-slide-duration);
  --appearance-moon-delay: var(--appearance-arrival-delay);
  --appearance-moon-duration: var(--appearance-arrival-duration);
}

/* Fade one outgoing image over the live page, keeping paper, text, and mark on
   the same clock. The new DOM remains available to taps during the fade. */
:root[data-appearance-transition="fade"],
:root[data-appearance-transition="fade"] .appearance {
  view-transition-name: none;
}

:root[data-appearance-transition]::view-transition {
  pointer-events: none;
}

:root[data-appearance-transition]::view-transition-group(*),
:root[data-appearance-transition]::view-transition-old(*),
:root[data-appearance-transition]::view-transition-new(*) {
  animation: none;
  mix-blend-mode: normal;
}

:root[data-appearance-transition]::view-transition-old(*) {
  display: none;
}

:root[data-appearance-transition]::view-transition-old(root) {
  display: block;
  animation: appearance-palette-out var(--appearance-palette-duration)
    cubic-bezier(0.3333333333, 0, 0.6666666667, 1) both;
}

/* Hover color transitions must not lag behind the captured destination. */
:root[data-appearance-transition] a,
:root[data-appearance-transition] .post-meta time,
:root[data-appearance-transition] .share-toggle {
  transition: none;
}

@keyframes appearance-palette-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-appearance-transition]::view-transition-old(root) {
    animation: none;
  }
}

.appearance-symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.appearance[hidden] {
  display: none;
}

/* appearance.js chooses the initial tide in the head, before this stylesheet
   and the body. Include the inline control in the first paint while retaining
   the hidden fallback when JavaScript is unavailable. */
:root[data-controls-ready] .appearance[hidden] {
  display: block;
}

.appearance {
  flex: none;
  color: var(--primary);
  view-transition-name: var(--appearance-transition-name, none);
}

.appearance-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  color: inherit;
  background: transparent;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  cursor: pointer;
}

.appearance :focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 4px;
}

.appearance-current {
  display: block;
  position: relative;
  /* Give the inset sun and moon more presence within the 44px header target. */
  width: 32px;
  height: 32px;
  pointer-events: none;
}

.appearance-icon {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Resolve copper on the SVG before the study samples its children. */
  color: var(--primary);
  fill: currentColor;
}

/* Keep the window and fine rim in their own foreground layer. The opaque
   inverse window conceals moving edges before the rim is painted; separating
   the layer also keeps WebKit from compositing transformed artwork above it. */
.appearance-rim {
  z-index: 1;
}

.appearance-window-mask,
.appearance-motion-mask {
  fill: var(--background);
}

.appearance-motion-mask {
  opacity: 0;
}

.appearance-glyph {
  transition-property: none;
}

.appearance-shooting-star {
  transform-origin: 0 0;
}

.appearance-shooting-star,
.appearance-dipper {
  color: var(--appearance-moon);
}

.appearance-shooting-light stop {
  stop-color: var(--appearance-comet);
}

.appearance-sky {
  fill: var(--appearance-sky-color);
  opacity: 0;
}

.appearance-morningtide {
  --appearance-glint: var(--appearance-sun);
  transform: translateX(var(--appearance-morningtide-x));
}

.appearance-eventide {
  --appearance-glint: var(--appearance-moon);
  transform: translateX(var(--appearance-eventide-x));
}

/* The circular window stays still as the sun enters from the right or moon
   from the left. CSS transitions also reverse naturally on repeated taps. */
@media (prefers-reduced-motion: no-preference) {
  .appearance-glyph {
    transition: transform var(--appearance-slide-duration) var(--appearance-slide-easing);
  }
  .appearance-morningtide {
    transition-delay: var(--appearance-sun-delay);
    transition-duration: var(--appearance-sun-duration);
  }
  .appearance-eventide {
    transition-delay: var(--appearance-moon-delay);
    transition-duration: var(--appearance-moon-duration);
  }
}