/* The chart sheet rises like morning to show what's being spoken of. */
@layer components {

.sheet {
  margin: auto auto 0; border: 1px solid var(--line); border-bottom: none;
  border-radius: 16px 16px 0 0; padding: 0.6rem 1rem calc(1.1rem + env(safe-area-inset-bottom));
  width: min(100%, 30rem); max-height: 88dvh; overflow-y: auto;
  background: linear-gradient(var(--sheet-glow), var(--paper-high) 55%);
  color: var(--ink);
  box-shadow: 0 -18px 60px rgba(62, 50, 120, 0.28);
}
.sheet[open] { animation: sheet-rise 0.5s cubic-bezier(0.34, 1.3, 0.64, 1); }
.sheet--setting { animation: sheet-set 0.3s ease-in forwards; }
.sheet::backdrop { background: var(--veil); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.sheet[open]::backdrop { animation: backdrop-appear 0.4s ease-out; }
.sheet__grip { width: 2.6rem; height: 4px; border-radius: 999px; background: var(--line-strong); margin: 0 auto 0.5rem; }
.sheet__header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.sheet__title { margin: 0; font-size: 1.05rem; }
.sheet__close {
  background: none; border: 0; padding: 0.15rem 0.55rem;
  color: var(--ink-dim); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
@media (hover: hover) {
  .sheet__close:hover { color: var(--ink); }
}
.sheet .wheel { margin: 0.25rem 0 0.5rem; }
.sheet turbo-frame { display: block; min-height: min(88vw, 24rem); }
.sheet__turning {
  margin: 0; min-height: inherit;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-dim); font-style: italic;
}
.sheet turbo-frame[busy] .sheet__turning { animation: gazing-twinkle 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .sheet[open], .sheet--setting, .sheet[open]::backdrop { animation: none; transition: none; }
}

}

@keyframes sheet-rise { from { transform: translateY(100%); opacity: 0.5; } }
@keyframes sheet-set { to { transform: translateY(105%); opacity: 0.4; } }
@keyframes backdrop-appear { from { opacity: 0; } }