/* V0.4.2 — Form Sheet geometry contract
   Sheet = Header / Scrollable Form Content / Fixed Footer.
   No nested sticky actions, no content rendered below the footer.
   Scoped overrides remain last in the stylesheet order. */
.modal-sheet {
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  width:min(100%,620px);
  min-width:0;
  max-width:620px;
  height:min(90dvh,820px);
  min-height:0;
  max-height:calc(100dvh - env(safe-area-inset-top,0px) - 8px);
  margin:0 auto;
  padding:0;
  border-radius:24px 24px 0 0;
  overflow:hidden;
}
.modal-sheet:focus { outline:none; }
.modal-sheet > .modal-header {
  flex:0 0 auto;
  min-height:88px;
  padding:36px 18px 13px;
  box-sizing:border-box;
}
.modal-sheet > form {
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
}
.modal-sheet > form > .modal-body {
  display:flex;
  flex-direction:column;
  gap:18px;
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  width:100%;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:18px 18px 24px;
  box-sizing:border-box;
}
.modal-sheet > form > .modal-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
  gap:10px;
  position:relative;
  inset:auto;
  z-index:3;
  flex:0 0 auto;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  margin:0;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));
  border-top:1px solid #F0E9ED;
  background:#FFFEFD;
  box-shadow:none;
}
.modal-sheet > form > .modal-actions .btn { min-height:44px; }
.modal-sheet .field { display:flex;flex-direction:column;gap:8px;flex:0 0 auto;min-width:0;margin:0; }
.modal-sheet .field > label { display:block;margin:0;padding:0;line-height:1.35; }
.modal-sheet .field input:not([type=checkbox]),
.modal-sheet .field select,.modal-sheet .field textarea {
  display:block;width:100%;min-width:0;max-width:100%;max-inline-size:100%;box-sizing:border-box;font-size:16px;
}
.modal-sheet .field select,.modal-sheet .field input:not([type=checkbox]) { min-height:46px; }
.modal-sheet.modal-editor .modal-body { padding-bottom:24px; }
.modal-sheet.modal-editor > form > .modal-editor-actions { padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px)); }
.modal-sheet.modal-editor .modal-editor-actions .btn { width:100%; }
.modal-sheet.anniversary-modal {
  width:min(100%,620px);
  max-height:calc(100dvh - env(safe-area-inset-top,0px) - 8px);
  border-radius:24px 24px 0 0;
}
.anniversary-modal .anniversary-form-body { gap:18px; }
.anniversary-modal .anniversary-modal-actions { flex-wrap:nowrap;gap:10px; }
.anniversary-modal-actions > .btn-primary { flex:1 1 auto;min-width:0;margin-left:auto; }
.anniversary-delete-area { flex:0 0 auto; }
.anniversary-delete-area > .btn-quiet {
  min-height:44px;background:transparent;color:#A46D80;border:1px solid #E9DCE3;
}
.anniversary-delete-confirm { max-width:min(260px,70vw);min-width:0; }
.anniversary-reminders {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(114px,1fr));
  gap:9px;
}
.anniversary-reminder-option {
  display:flex;
  align-items:center;
  box-sizing:border-box;
  gap:9px;
  min-height:44px;
  padding:8px 10px;
  border:1px solid #E9DCE3;
  border-radius:14px;
  background:#FBF5F7;
  color:#806371!important;
  font-size:12px!important;
  font-weight:560;
  cursor:pointer;
}
.anniversary-modal .anniversary-reminder-option input[type=checkbox] {
  -webkit-appearance:none!important;
  appearance:none!important;
  box-sizing:border-box;
  position:relative;
  flex:0 0 19px;
  display:grid;
  place-items:center;
  margin:0;padding:0;
  width:19px!important;min-width:19px!important;max-width:19px!important;
  height:19px!important;min-height:19px!important;
  border:1.5px solid #BEA7B2;
  border-radius:6px;
  background:#FFF;
  box-shadow:none;
  cursor:pointer;
}
.anniversary-modal .anniversary-reminder-option input[type=checkbox]:checked {
  border-color:#BD8198;background:#BD8198;
}
.anniversary-modal .anniversary-reminder-option input[type=checkbox]:checked::after {
  content:"";
  position:absolute;
  width:9px;height:5px;
  border-bottom:2px solid white;
  border-left:2px solid white;
  transform:translateY(-1px) rotate(-45deg);
}
.anniversary-modal .anniversary-reminder-option input[type=checkbox]:focus-visible {
  outline:2px solid #BD8198;outline-offset:3px;
}
.modal-sheet textarea { resize:vertical; }
.modal-alert { height:auto; }
@media (max-width:680px) {
  .modal-sheet,.modal-sheet.anniversary-modal {
    width:100%;max-width:100%;
    height:min(92dvh,820px);
    max-height:calc(100dvh - env(safe-area-inset-top,0px) - 8px);
    border-radius:24px 24px 0 0;
  }
  .modal-sheet > .modal-header { padding:36px 16px 13px; }
  .modal-sheet > form > .modal-body { padding:16px 16px 22px; }
  .modal-sheet > form > .modal-actions,
  .modal-sheet.modal-editor > form > .modal-editor-actions {
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  }
}
@media (max-height:700px) {
  .modal-sheet,.modal-sheet.anniversary-modal { height:min(95dvh,820px); }
  .modal-sheet > .modal-header { min-height:79px;padding-top:32px;padding-bottom:10px; }
}
@media (prefers-color-scheme:dark) {
  .modal-sheet { color-scheme:dark; }
  .modal-sheet > form > .modal-actions {
    background:#25222A;border-top-color:#443944;
  }
  .modal-sheet .field input:not([type=checkbox]),
  .modal-sheet .field select,.modal-sheet .field textarea {
    background:#302D33;color:#F7F0F5;border:1px solid #514852;box-shadow:none;
  }
  .modal-sheet .field input:focus,.modal-sheet .field select:focus,.modal-sheet .field textarea:focus {
    border-color:#DA9EB5;outline:none;box-shadow:0 0 0 2px rgba(218,158,181,.16);
  }
  .modal-sheet .field label { color:#BDB2BC; }
  .modal-sheet .field-hint { color:#B6A8B3; }
  .anniversary-delete-area > .btn-quiet {
    background:#352B34;color:#E7B0C4;border-color:#574452;
  }
  .anniversary-reminder-option {
    background:#322A33;border-color:#51404E;color:#D8C5D2!important;
  }
  .anniversary-modal .anniversary-reminder-option input[type=checkbox] {
    background:#29242C;border-color:#8A7683;
  }
  .anniversary-modal .anniversary-reminder-option input[type=checkbox]:checked {
    background:#DEA7BD;border-color:#DEA7BD;
  }
  .anniversary-modal .anniversary-reminder-option input[type=checkbox]:checked::after {
    border-color:#2B2129;
  }
}

/* v0.4.3 — WebKit native date control intrinsic width. */
.modal-sheet .modal-body .field input[type=date],
.modal-sheet .modal-body .field input[type=datetime-local],
.modal-sheet .modal-body .field input[type=time] {
  -webkit-appearance:none;
  appearance:none;
  display:block;
  box-sizing:border-box;
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  inline-size:100%;
  max-inline-size:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  padding-inline:12px;
}
.modal-sheet input[type=date]::-webkit-date-and-time-value,
.modal-sheet input[type=datetime-local]::-webkit-date-and-time-value {
  min-width:0;
  width:100%;
  max-width:100%;
  text-align:left;
}
.modal-sheet input[type=date]::-webkit-datetime-edit,
.modal-sheet input[type=datetime-local]::-webkit-datetime-edit {
  min-width:0;
  max-width:100%;
  overflow:hidden;
}
/* Reserve a distinct visual lane for the sheet handle. */
.modal-sheet::before {
  top:11px;
  height:4px;
  width:35px;
}