body.detail-open{overflow:hidden}

/* All create/edit flows are full-screen secondary pages. */
.modal{display:block;padding:0;background:var(--surface);overflow:hidden}
.modal-backdrop{display:none}
.dialog{position:absolute;inset:0;width:100%;height:100%;height:100dvh;max-height:none;overflow:hidden;border-radius:0;box-shadow:none;padding:0;background:var(--surface);display:grid;grid-template-rows:auto minmax(0,1fr)}
.dialog-head{position:relative;z-index:2;min-height:72px;padding:14px max(18px,env(safe-area-inset-right)) 14px max(18px,env(safe-area-inset-left));border-bottom:1px solid var(--line);background:inherit}
.dialog-head h2{font-size:21px}
.dialog-head .icon-btn{order:-1;border:0;background:transparent;width:44px;height:44px}
.dialog-head .icon-btn svg{width:23px;height:23px}
.dialog-head .icon-btn:before{content:""}
#recordForm{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px max(18px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:inherit}
#recordForm .form-grid{width:min(100%,760px);min-height:100%;margin:0 auto;align-content:start;gap:4px 18px}
#recordForm .field label{font-size:13px;margin-top:16px}
#recordForm .field input,#recordForm .field textarea,#recordForm .field select{min-height:48px;font-size:16px}
#recordForm .field textarea{min-height:180px}
#recordForm .form-actions{position:sticky;bottom:calc(-1 * max(32px,env(safe-area-inset-bottom)));z-index:3;margin:28px -18px calc(-1 * max(32px,env(safe-area-inset-bottom)));padding:14px 18px max(16px,env(safe-area-inset-bottom));background:inherit;border-top:1px solid var(--line);display:grid;grid-template-columns:auto minmax(100px,1fr) minmax(120px,1.35fr);align-items:center}
#recordForm .form-actions button{min-height:48px;font-size:15px}
#recordForm .form-actions .danger-btn{margin:0;justify-self:start}
#recordForm .form-actions .save{width:100%}

.modal[data-domain="sleep"]{background:#1a1a2e}
.modal[data-domain="sleep"] .dialog-head,#recordForm{background:inherit}
.modal[data-domain="sleep"] .dialog-head{border-color:rgba(255,255,255,.09)}
.modal[data-domain="sleep"] .dialog-head .icon-btn{color:#e2e2f0}
.modal[data-domain="sleep"] #recordForm .form-actions{border-color:rgba(255,255,255,.09)}
.modal[data-domain="sleep"] #recordForm .secondary{background:#252543;border-color:#444466;color:#e2e2f0}
.modal[data-domain="sleep"] #recordForm .save{background:#7c83ff}

.modal[data-domain="intimacy"]{background:#1a1a1a}
.modal[data-domain="intimacy"] .dialog-head{border-color:#2a2a2a}
.modal[data-domain="intimacy"] .dialog-head .icon-btn{color:#e0d6c8}
.modal[data-domain="intimacy"] #recordForm .form-actions{border-color:#2a2a2a}
.modal[data-domain="intimacy"] #recordForm .secondary{background:#111;border-color:#333;color:#e0d6c8}
.modal[data-domain="intimacy"] #recordForm .save{background:#d4a574;color:#1a1a1a}

.modal[data-domain="period"]{background:#fff8fa}
.modal[data-domain="period"] #recordForm .save{background:#db4470}
.modal[data-domain="diary"]{background:#faf8fc}
.modal[data-domain="diary"] #recordForm .save{background:#8975a0}

/* The diary read/edit decision is also a full-screen secondary page. */
.diary-action-modal{background:#fbf9fc}
.diary-detail-backdrop{display:none}
.diary-action-sheet{position:absolute;inset:0;transform:none;width:100%;height:100%;height:100dvh;border:0;border-radius:0;box-shadow:none;padding:0 max(20px,env(safe-area-inset-right)) max(30px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));display:flex;flex-direction:column;overflow-y:auto;background:#fbf9fc}
.diary-action-heading{position:sticky;top:0;z-index:2;min-height:72px;margin:0 -20px;padding:14px 20px;border-bottom:1px solid #e3dce6;background:rgba(251,249,252,.96);grid-template-columns:44px 1fr 44px;backdrop-filter:blur(12px)}
.diary-action-preview{width:min(100%,760px);margin:clamp(38px,8vh,86px) auto 24px;font-size:16px;line-height:1.9;-webkit-line-clamp:4}
.diary-action-buttons{width:min(100%,760px);margin:0 auto;gap:14px}
.diary-action-choice{min-height:92px;padding:18px;border-radius:8px}
.diary-action-choice strong{font-size:17px}
.diary-action-choice small{font-size:12px;margin-top:6px}

@media(max-width:620px){
  .dialog-head{min-height:64px;padding-top:10px;padding-bottom:10px}
  .dialog-head h2{font-size:19px}
  #recordForm{padding-top:10px}
  #recordForm .form-grid{display:block}
  #recordForm .field label{margin-top:14px}
  #recordForm .field textarea{min-height:190px}
  #recordForm .choice-field{grid-template-columns:repeat(5,minmax(0,1fr))}
  #recordForm .choice-field span{height:48px}
  #recordForm .form-actions{display:grid;grid-template-columns:auto 1fr 1.25fr;gap:8px}
  #recordForm .form-actions .danger-btn{padding-left:12px;padding-right:12px}
  .diary-action-heading{min-height:64px;padding-top:10px;padding-bottom:10px}
  .diary-action-preview{margin-top:42px}
  .diary-action-choice{min-height:88px}
}

@media(min-width:900px){
  .dialog-head h2{width:min(100%,760px);margin-left:auto;margin-right:auto}
}