/* TELLALOOM — Story Night reminder card (W-08) — honey-amber storybook tokens */
.tl-remind { padding: 0 0 4rem; background-color: #f9e1ef; background-image: radial-gradient(540px 300px at 85% 0%, rgba(224, 87, 138, 0.22), transparent 70%), radial-gradient(500px 300px at 10% 100%, rgba(109, 95, 232, 0.15), transparent 70%), radial-gradient(280px 190px at 18% 12%, rgba(255, 197, 61, 0.15), transparent 70%), repeating-linear-gradient(45deg, rgba(194, 37, 92, 0.05) 0 2px, transparent 2px 26px), repeating-linear-gradient(-45deg, rgba(109, 95, 232, 0.05) 0 2px, transparent 2px 26px); background-size: auto, auto, auto, 180px 180px, 180px 180px; animation: tlPanelDrift 30s ease-in-out infinite alternate; }
@keyframes tlPanelDrift { from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; } to { background-position: 0 0, 0 0, 0 0, -32px 20px, 28px -16px; } }
@media (prefers-reduced-motion: reduce) { .tl-remind { animation: none; } }
.tl-remind-card { max-width: 44rem; margin: 0 auto; background: #fffdf6; border: 2px solid #f5a623; border-radius: 18px; box-shadow: 0 14px 30px rgba(185, 122, 14, .13); padding: 1.6rem 2rem 1.5rem; text-align: center; transition: background .3s ease, border-color .3s ease; }
.tl-remind-card.is-today { background: #ffedb8; border-color: #b97a0e; }
.tl-remind-card h3 { font-family: "Lexend", sans-serif; font-size: 1.38rem; margin: 0 0 .45rem; color: #7a4d00; }
.tl-remind-count { font-family: "Lexend", sans-serif; font-weight: 600; font-size: 1.05rem; margin: 0 0 .35rem; color: #4a2f00; }
.tl-remind-state { margin: 0 0 1.1rem; line-height: 1.6; }
.tl-remind-days { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin: 0 0 1.1rem; }
.tl-remind-day { font-family: "Lexend", sans-serif; font-weight: 600; background: #fff; color: #7a4d00; border: 2px solid #f5a623; border-radius: 999px; cursor: pointer; padding: .42rem .85rem; font-size: 1rem; }
.tl-remind-day:hover { background: #fff3d6; }
.tl-remind-day.is-active { background: #f5a623; color: #4a2f00; }
.tl-remind-toggle { display: inline-flex; align-items: center; justify-content: center; font-family: "Lexend", sans-serif; font-weight: 700; background: #f5a623; color: #4a2f00; border: 2.5px solid #f5a623; border-radius: 999px; cursor: pointer; min-height: 3rem; padding: .7rem 1.6rem; font-size: 1rem; }
.tl-remind-toggle:hover { background: #ffb63e; }
.tl-remind-privacy { margin: .85rem 0 0; font-size: .98rem; color: #67563f; }
@media (max-width: 640px) { .tl-remind-card { padding: 1.4rem 1.2rem 1.3rem; } }