/* Sous le Sapin 1.6 — crystal glass, stronger refraction, and responsive snowfall.
 * Visual-only overlay: the v1.5 design and Cloudflare/D1 endpoints are retained.
 * Low alpha = genuine transparency; backdrop-filter maintains frosted readability. */
:root {
  --slp-glass: linear-gradient(127deg,
    rgba(255,255,255,.34) 0%, rgba(255,255,255,.13) 43%,
    rgba(192,231,212,.15) 100%);
  --slp-hairline: rgba(255,255,255,.68);
  --slp-glass-inset: inset 0 1px rgba(255,255,255,.88), inset 1px 0 rgba(255,255,255,.34), inset 0 -1px rgba(68,123,100,.08);
  --slp-glass-shadow: 0 20px 48px rgba(28,67,48,.12), 0 3px 14px rgba(29,65,46,.06);
  --slp-input: rgba(255,255,255,.28);
  --slp-inner: rgba(255,255,255,.20);
}
html[data-slp-theme="dark"] {
  --slp-glass: linear-gradient(125deg,
    rgba(77,125,108,.43) 0%, rgba(28,65,57,.30) 48%,
    rgba(16,43,42,.34) 100%);
  --slp-hairline: rgba(220,255,237,.27);
  --slp-glass-inset: inset 0 1px rgba(237,255,246,.38), inset 1px 0 rgba(201,255,228,.13), inset 0 -1px rgba(3,23,21,.22);
  --slp-glass-shadow: 0 26px 68px rgba(0,10,9,.42), 0 3px 18px rgba(0,12,10,.13);
  --slp-input: rgba(7,36,31,.27);
  --slp-inner: rgba(171,229,190,.09);
}

/* Cards and panes genuinely show their moving backdrop instead of being opaque. */
.glass,
#slp-family-root .slp-family-card {
  background: var(--slp-glass);
  border-color: var(--slp-hairline);
  box-shadow: var(--slp-glass-shadow), var(--slp-glass-inset);
  -webkit-backdrop-filter: blur(36px) saturate(192%) brightness(1.045);
  backdrop-filter: blur(36px) saturate(192%) brightness(1.045);
}
html[data-slp-theme="dark"] .glass,
html[data-slp-theme="dark"] #slp-family-root .slp-family-card {
  background: var(--slp-glass);
  border-color: var(--slp-hairline);
  -webkit-backdrop-filter: blur(34px) saturate(176%);
  backdrop-filter: blur(34px) saturate(176%);
}
.site-header {
  background: linear-gradient(116deg,rgba(255,255,255,.34),rgba(230,251,236,.15) 60%,rgba(245,255,242,.12));
  border-bottom-color: rgba(255,255,255,.63);
  -webkit-backdrop-filter: blur(35px) saturate(193%);
  backdrop-filter: blur(35px) saturate(193%);
}
html[data-slp-theme="dark"] .site-header {
  background: linear-gradient(115deg,rgba(38,81,69,.49),rgba(17,51,46,.33) 60%,rgba(16,38,35,.34));
  border-bottom-color: rgba(204,255,231,.23);
  -webkit-backdrop-filter: blur(37px) saturate(182%);
  backdrop-filter: blur(37px) saturate(182%);
}

/* Modal is the material the user sees most clearly: 25–39% fill + strong blur. */
dialog.modal.glass, .install-dialog {
  background: linear-gradient(129deg,rgba(255,255,253,.35),rgba(237,253,243,.22) 56%,rgba(224,241,232,.26));
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 35px 95px rgba(7,43,29,.25), inset 0 2px rgba(255,255,255,.82), inset 1px 0 rgba(255,255,255,.38);
  -webkit-backdrop-filter: blur(46px) saturate(195%) brightness(1.045);
  backdrop-filter: blur(46px) saturate(195%) brightness(1.045);
}
html[data-slp-theme="dark"] dialog.modal.glass,
html[data-slp-theme="dark"] .install-dialog {
  background: linear-gradient(127deg,rgba(66,117,94,.44),rgba(23,63,55,.34) 53%,rgba(11,40,38,.39));
  border: 1px solid rgba(221,255,239,.37);
  box-shadow: 0 36px 95px rgba(0,6,6,.56), inset 0 1px rgba(243,255,247,.32);
  -webkit-backdrop-filter: blur(45px) saturate(165%);
  backdrop-filter: blur(45px) saturate(165%);
}
dialog.modal::backdrop {
  background: rgba(9,31,24,.20);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html[data-slp-theme="dark"] dialog.modal::backdrop { background: rgba(0,9,8,.38); }

/* Give dialogs / lists the same light, clear material and strong foreground text. */
.field input, .field select, .field textarea,
#slp-family-root .slp-family-form input:not([type="checkbox"]),
#slp-family-root .slp-family-form textarea,
.modal .field input, .modal .field textarea, .modal .field select {
  background: var(--slp-input);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
html[data-slp-theme="dark"] .field input,
html[data-slp-theme="dark"] .field select,
html[data-slp-theme="dark"] .field textarea,
html[data-slp-theme="dark"] .modal .field input,
html[data-slp-theme="dark"] .modal .field textarea,
html[data-slp-theme="dark"] .modal .field select,
html[data-slp-theme="dark"] #slp-family-root .slp-family-form input:not([type="checkbox"]),
html[data-slp-theme="dark"] #slp-family-root .slp-family-form textarea {
  background: rgba(9,35,31,.33);
  color: #f2fff6;
  border-color: rgba(215,255,228,.35);
}
.slp-family-member, .slp-family-event, .slp-family-picker-row,
#slp-family-root .slp-family-member,
#slp-family-root .slp-family-event,
#slp-family-root .slp-family-picker-row,
.privacy-banner, .draw-notification-status, .notice:not(.notice-error) {
  background: linear-gradient(118deg,rgba(255,255,255,.23),rgba(224,245,233,.12));
  -webkit-backdrop-filter: blur(25px) saturate(165%);
  backdrop-filter: blur(25px) saturate(165%);
}
html[data-slp-theme="dark"] :is(.slp-family-member,.slp-family-event,.slp-family-picker-row,.privacy-banner,.draw-notification-status,.notice:not(.notice-error)) {
  background: linear-gradient(118deg,rgba(110,187,146,.16),rgba(52,126,102,.08));
}
.slp-theme-toggle, .snow-toggle,
.button-soft, .button-plain, .slp-family-button.secondary {
  -webkit-backdrop-filter: blur(22px) saturate(178%);
  backdrop-filter: blur(22px) saturate(178%);
}
/* Tall green hero remains slightly denser so white text always stays readable. */
.welcome-hero, .dashboard-hero, #slp-family-root .slp-family-welcome {
  background: radial-gradient(circle at 90% 5%,rgba(147,207,165,.25),transparent 65%),
    linear-gradient(118deg,rgba(15,58,44,.81),rgba(23,77,56,.69) 62%,rgba(24,82,60,.65));
  -webkit-backdrop-filter: blur(34px) saturate(160%);
  backdrop-filter: blur(34px) saturate(160%);
}
html[data-slp-theme="dark"] :is(.welcome-hero,.dashboard-hero,#slp-family-root .slp-family-welcome) {
  background: radial-gradient(circle at 93% 8%,rgba(137,191,153,.21),transparent 62%),
    linear-gradient(117deg,rgba(14,52,42,.79),rgba(18,63,52,.67) 57%,rgba(20,70,57,.65));
}

/* Additional floating background movement, refraction and tiny holiday glints. */
.festive-backdrop__contours { animation-duration: 24s; }
.festive-backdrop__bokeh { animation-duration: 19s; }
.festive-backdrop__glow--pine { animation: slp-winter-aurora 28s ease-in-out -8s infinite alternate; }
.festive-backdrop__glow--gold { animation: slp-winter-aurora 32s ease-in-out -14s infinite alternate-reverse; }
.festive-backdrop__glow--mint { animation: slp-winter-aurora 39s ease-in-out -20s infinite alternate; }
@keyframes slp-winter-aurora {
  from { transform: translate3d(-2.5vw,-1.4vh,0) scale(.96); }
  to { transform: translate3d(2.5vw,2.3vh,0) scale(1.08); }
}
.festive-backdrop__flake {
  background: rgba(252,255,251,.97);
  box-shadow: 0 0 1px rgba(26,96,62,.38), 0 0 6px rgba(255,255,255,.58);
}
html[data-slp-theme="dark"] .festive-backdrop__flake {
  background: rgba(246,255,250,.96);
  box-shadow: 0 0 8px rgba(255,255,255,.34);
}
.festive-backdrop--still .festive-backdrop__glow { animation: none; }
#slp-family-root::before { animation: slp-winter-aurora 35s ease-in-out -10s infinite alternate; }
.welcome-hero::after, .dashboard-hero::after { animation: slp-liquid-sheen 11s ease-in-out -4s infinite alternate; }
@keyframes slp-liquid-sheen {
  0%,100% { opacity: .25; transform: translate3d(-2%,0,0); }
  50% { opacity: .63; transform: translate3d(3%,0,0); }
}
/* Extra snowfall lives beneath text, interactions and dialogs on both surfaces. */
.slp-winter-snow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  user-select: none;
  contain: layout paint style;
}
.slp-winter-flake {
  position: absolute;
  top: -30px;
  left: var(--slp-flake-x);
  width: var(--slp-flake-size);
  height: var(--slp-flake-size);
  border-radius: 50%;
  background: rgba(250,255,251,.93);
  box-shadow: 0 0 1px rgba(36,105,80,.57), 0 0 8px rgba(250,255,248,.36);
  opacity: 0;
  transform: translate3d(0,-30px,0);
  animation: slp-snow-fall var(--slp-flake-time) linear var(--slp-flake-delay) infinite;
}
.slp-winter-flake--crystal {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  color: rgba(250,255,253,.88);
  font-size: var(--slp-flake-size);
  line-height: 1;
  text-shadow: 0 0 2px rgba(13,88,60,.51), 0 0 12px rgba(255,255,255,.4);
}
.slp-winter-spark {
  position: absolute;
  left: var(--slp-spark-x);
  top: var(--slp-spark-y);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(246,221,156,.72);
  box-shadow: 0 0 15px 3px rgba(252,220,140,.32);
  opacity: 0;
  animation: slp-winter-twinkle var(--slp-spark-time) ease-in-out var(--slp-spark-delay) infinite;
}
@keyframes slp-snow-fall {
  0% { transform: translate3d(0,-30px,0) rotate(0); opacity: 0; }
  12% { opacity: var(--slp-flake-opacity); }
  85% { opacity: var(--slp-flake-opacity); }
  100% { transform: translate3d(var(--slp-flake-drift),calc(100vh + 55px),0) rotate(var(--slp-flake-spin)); opacity: 0; }
}
@keyframes slp-winter-twinkle {
  0%,100% { opacity: 0; transform: scale(.5); }
  50% { opacity: .70; transform: scale(1.5); }
}
html[data-slp-theme="dark"] .slp-winter-flake { box-shadow: 0 0 7px rgba(246,255,250,.46); }
html[data-slp-theme="dark"] .slp-winter-flake--crystal { box-shadow:none; color: rgba(246,255,250,.96); text-shadow: 0 0 12px rgba(255,255,255,.49); }
#slp-family-root > .slp-winter-snow { z-index: 0; }
#slp-family-root > .slp-family-page { position:relative; z-index:1; }
#slp-family-root .slp-family-card { position:relative; }
.slp-winter-snow--paused .slp-winter-flake,
.slp-winter-snow--paused .slp-winter-spark,
body.slp-family-visible #slp-winter-snow-app .slp-winter-flake,
body.slp-family-visible #slp-winter-snow-app .slp-winter-spark { animation-play-state: paused; }
.slp-winter-snow--off .slp-winter-flake,
.slp-winter-snow--off .slp-winter-spark { display: none; }
.app-shell.animations-paused .festive-backdrop__glow,
.app-shell.animations-paused .welcome-hero::after,
.app-shell.animations-paused .dashboard-hero::after,
html.slp-winter-motion-off #slp-family-root::before { animation: none; }
@media (max-width: 640px) {
  /* Mobile: keep many flakes, but fewer moving nodes for smooth touch/scroll. */
  .slp-winter-flake:nth-of-type(n+37) { display: none; }
  .slp-winter-spark:nth-of-type(n+7) { display: none; }
  .festive-backdrop__contours { animation-duration: 31s; }
  .festive-backdrop__bokeh { animation-duration: 27s; }
  .slp-winter-flake { box-shadow: 0 0 1px rgba(39,112,78,.52); }
  .slp-winter-flake--crystal { text-shadow: 0 0 3px rgba(9,84,53,.48); }
  .slp-winter-snow { contain: layout paint; }
  dialog.modal.glass, html[data-slp-theme="dark"] dialog.modal.glass, .install-dialog, #slp-family-root .slp-family-card {
    -webkit-backdrop-filter: blur(33px) saturate(182%);
    backdrop-filter: blur(33px) saturate(182%);
  }
}
@media (pointer: coarse) and (min-width: 641px) and (max-width: 1024px) { .slp-winter-flake:nth-of-type(n+45) { display:none; } }
@media (max-width: 370px) { .slp-winter-flake:nth-of-type(n+31) { display:none; } }
/* Native motion preference overrides every decorative animation. */
@media (prefers-reduced-motion: reduce) {
  .slp-winter-flake, .slp-winter-spark { display: none !important; animation: none !important; }
  .festive-backdrop__glow, #slp-family-root::before,
  .welcome-hero::after, .dashboard-hero::after { animation: none !important; }
}
/* Respect platform preferences for reduced transparency, high contrast, and older engines. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, dialog.modal.glass, .install-dialog, #slp-family-root .slp-family-card { background:rgba(243,249,241,.96); }
  html[data-slp-theme="dark"] .glass,
  html[data-slp-theme="dark"] dialog.modal.glass,
  html[data-slp-theme="dark"] .install-dialog,
  html[data-slp-theme="dark"] #slp-family-root .slp-family-card { background:rgba(18,52,45,.96); }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  .glass, dialog.modal.glass, .install-dialog, #slp-family-root .slp-family-card { background:#f0f6ee; }
  html[data-slp-theme="dark"] .glass,
  html[data-slp-theme="dark"] dialog.modal.glass,
  html[data-slp-theme="dark"] .install-dialog,
  html[data-slp-theme="dark"] #slp-family-root .slp-family-card { background:#193c32; }
}