/* App hooks only. decor.css is the packet file and stays scoped to .theme-fall.
   Extra art is hidden until the theme is on, so the app stays unchanged when off.
   Banner and garland hide under 480px instead of scaling to a blurry size. */

.fall-only,
hr.fall-divider {
  display: none !important;
  margin: 0;
  border: 0;
}

body.theme-fall .fall-only {
  display: block !important;
}

body.theme-fall .fall-only.fall-inline {
  display: inline-block !important;
}

body.theme-fall hr.fall-divider {
  display: block !important;
  height: 16px;
  margin: 12px 0;
}

body.theme-fall .fall-banner {
  display: block;
  width: 320px;
  height: 48px;
  margin: 0 auto 8px;
}

body.theme-fall img.fall-empty-art {
  display: block !important;
  width: 96px;
  height: 96px;
  margin: 0 auto 8px;
}

body.theme-fall .min-h-dvh.bg-paper {
  background-color: var(--fall-bg);
}

body.theme-fall .fall-header .fall-header-copy {
  color: var(--fall-on-dark);
}

body.theme-fall .fall-btn:focus-visible {
  outline: 2px solid var(--fall-ink);
  outline-offset: 3px;
}

/* Calm and reduced motion must still hide the leaves. The packet rule
   is not !important, and the show rule above is, so this one has to be too. */
body.theme-fall.fall-calm .fall-leaves {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body.theme-fall .fall-leaves {
    display: none !important;
  }
}
body.theme-fall a[role="tab"].text-paper\/75,
body.theme-fall a[role="tab"].text-paper {
  color: var(--fall-on-dark);
}
body.theme-fall a[role="tab"].text-ember,
body.theme-fall a[role="tab"].text-ember-2\/80 {
  color: var(--color-ember-2);
}
body.theme-fall a[role="tab"].text-forest {
  color: var(--fall-ink);
}

@media (max-width: 479px) {
  body.theme-fall .fall-banner,
  body.theme-fall .fall-garland {
    display: none !important;
  }
}

@media print {
  body.theme-fall .fall-only,
  body.theme-fall hr.fall-divider,
  body.theme-fall .fall-garland,
  body.theme-fall .fall-banner,
  body.theme-fall .fall-leaves {
    display: none !important;
  }
}