/* Centred design preview. Native <dialog> owns the top layer and focus trap. */
.show-reminders [hidden],
.show-reminders-reopen[hidden]{display:none!important}
body.show-reminders-open{overflow:hidden}
.show-reminders{
  position:fixed;
  inset:auto;
  top:var(--show-reminders-centre,50%);
  left:50%;
  transform:translate(-50%,-50%);
  margin:0;
  padding:0;
  width:480px;
  max-width:calc(100vw - 32px);
  max-height:var(--show-reminders-max-height,calc(100dvh - 32px));
  overflow-y:auto;
  overscroll-behavior:contain;
  color:#431c29;
  background:#fbf6ed;
  border:1px solid #b7a393;
  border-top:3px solid #68283b;
  box-shadow:0 16px 60px #180b1240;
}
.show-reminders::backdrop{background:rgb(25 14 19 / 64%);backdrop-filter:none}
.show-reminders[open]{animation:show-reminders-reveal .18s ease-out}
.show-reminders-card{position:relative;padding:42px 36px 28px;text-align:center}
.show-reminders h2{margin:0;line-height:1.1;letter-spacing:-.035em}
.show-reminders-days{display:block;font-family:var(--serif,Georgia,serif);font-size:80px;font-weight:500;line-height:1;letter-spacing:-.04em;font-variant-numeric:lining-nums tabular-nums}
.show-reminders-countdown-label{display:block;margin-top:9px;font-family:var(--sans,Arial,sans-serif);font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.07em;text-transform:uppercase}
.show-reminders-no-count .show-reminders-countdown-label{font-family:var(--serif,Georgia,serif);font-size:32px;line-height:1.2;letter-spacing:-.025em;text-transform:none}
.show-reminders .show-reminders-copy{margin:19px auto 0;max-width:310px;text-wrap:balance;font-size:15px;line-height:1.65;color:#6c5c5d}
.show-reminders-close{
  position:absolute;
  top:4px;
  right:4px;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  color:#68283b;
  background:transparent;
  border-radius:50%;
}
.show-reminders-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;pointer-events:none}
.show-reminders-close:hover{background:#68283b0c}
.show-reminders-form{margin-top:23px;text-align:left}
.show-reminders-form label{display:block;font-size:11px;font-weight:600;line-height:1.5;margin-bottom:6px}
.show-reminders-fields{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.show-reminders-fields input{
  display:block;
  width:100%;
  min-width:0;
  height:44px;
  padding:10px;
  border:1px solid #b7a393;
  border-radius:0;
  background:#fffcf6;
  color:#2c2023;
  font:16px/1.2 var(--sans,Arial,sans-serif);
}
.show-reminders-submit{min-height:44px;padding:10px 18px;background:#68283b;color:#fbf6ed;font-size:12px;white-space:nowrap}
.show-reminders-submit:hover{background:#431c29}
.show-reminders .show-reminders-note{margin:10px 0 0;text-align:center;font-size:11px;line-height:1.55;color:#6c5c5d}
.show-reminders .show-reminders-status{margin:0;font-size:12px;line-height:1.6;color:#431c29;text-align:center}
.show-reminders .show-reminders-status:not(:empty){margin-top:10px}
.show-reminders-social{margin-top:24px;border-top:1px solid #d7c9bb;padding-top:19px}
.show-reminders .show-reminders-social p{margin:0;font-size:12px;line-height:1.6;color:#6c5c5d}
.show-reminders-social nav{display:flex;justify-content:center;gap:10px;margin-top:8px}
.show-reminders-social a{display:grid;place-items:center;width:44px;height:44px;border:1px solid #b7a393;border-radius:50%;color:#68283b}
.show-reminders-social a:hover{background:#68283b0c}
.show-reminders-social svg{width:22px;height:22px;pointer-events:none}
.show-reminders-reopen{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;background:none;color:#68283b;font-size:12px;text-decoration:underline;text-underline-offset:4px}
.show-reminders :is(button,input,a):focus-visible,
.show-reminders-reopen:focus-visible{outline:2px solid #68283b;outline-offset:3px}
/* Native autofocus may match :focus-visible on Android. The explicit keyboard
   state controls only the X; all other controls retain their normal outlines. */
.show-reminders .show-reminders-close:focus{outline:none}
.show-reminders-close::after{
  content:"";
  position:absolute;
  inset:8px;
  border:2px solid transparent;
  border-radius:50%;
  pointer-events:none;
}
.show-reminders-keyboard .show-reminders-close:focus::after{border-color:currentColor}
@keyframes show-reminders-reveal{from{opacity:0}to{opacity:1}}
@media(max-width:700px){
  .show-reminders-card{padding:40px 24px 24px}
  .show-reminders-days{font-size:68px}
  .show-reminders .show-reminders-copy{font-size:14px}
  .show-reminders-submit{padding:10px 14px}
}
@media(prefers-reduced-motion:reduce){
  .show-reminders[open]{animation:none;transition:none}
}