/* Shared dialog rhythm. Content-specific paper and working areas stay intact. */
:root{
  --modal-radius:4px;
  --modal-x:40px;
  --modal-y:32px;
  --modal-title:26px;
  --modal-body:13px;
  --modal-close:32px;
  --field-radius:18px;
  --field-height:52px;
  --field-focus:var(--ink-3);
}
dialog:is(#noteDialog,#profileDialog,#wa-extra,#globalSearchDialog,#monthPicker,#stackDialog,#helpDialog,#trashDialog,#miniCoverDialog,#noteShareDialog,.wa-sheet,.detail-leave){
  border:0;
  border-radius:var(--modal-radius);
  max-width:calc(100vw - 32px);
  max-height:calc(100dvh - 40px);
  color:var(--text,var(--ink));
  font-family:var(--sans);
  box-shadow:var(--shadow-pop);
  outline:none;
  scrollbar-width:thin;
  scrollbar-color:var(--ink-4) transparent;
  overscroll-behavior:contain;
}
dialog::backdrop,.wa-sheet::backdrop,#noteShareDialog::backdrop{
  background:var(--veil);
  backdrop-filter:blur(10px);
}
dialog:is(#noteDialog:not(.is-note-detail),#globalSearchDialog,#monthPicker,#stackDialog,#helpDialog,#trashDialog,#miniCoverDialog,.detail-leave){padding:var(--modal-y) var(--modal-x)}
.wa-sheet,#profileDialog.wa-sheet{padding:var(--modal-y) var(--modal-x)}
dialog .modal-header,dialog .modal-content{padding:0}
dialog .modal-header{height:0;min-height:0;margin:0;overflow:visible}
dialog .modal-header .eyebrow{display:none}
dialog :is(.modal-content,.global-search-head,.month-picker-head)>h2,
dialog .global-search-head h2,
dialog.wa-sheet h2,#profileDialog.wa-sheet h2,
dialog.detail-leave h2,#miniCoverDialog h2,
#noteShareDialog h2{
  font:500 var(--modal-title)/1.4 var(--sans);
  color:var(--text,var(--ink));
  letter-spacing:0;
  margin:0 28px 0 0;
  text-wrap:balance;
  overflow-wrap:anywhere;
}
dialog .modal-subtitle,.wa-sheet p,#miniCoverDialog>p,.detail-leave p,.global-search-head p{
  font:400 var(--modal-body)/1.85 var(--sans);
  color:var(--sub,var(--ink-2));
  margin:16px 0 0;
  overflow-wrap:anywhere;
}
dialog :is(.modal-content,.global-search-head,.month-picker-head){text-align:left}
dialog .form-field{margin:24px 0 0}
dialog .form-field>label,.wa-sheet label:not(.wa-range){font:400 12px/1.6 var(--sans);color:var(--sub,var(--ink-2));margin-bottom:10px}
/* One inset stroke provides focus feedback without the old second outline. */
dialog :is(input:not([type=checkbox],[type=radio],[type=range],[type=file]),textarea,select),
#profileDialog .wa-input,#wa-extra .wa-input{
  border:0;
  border-radius:var(--field-radius);
  background:var(--surface-soft);
  color:var(--text,var(--ink));
  box-shadow:inset 0 0 0 1px var(--line);
  outline:none;
  outline-offset:0;
  font:400 14px/1.7 var(--sans);
  transition:box-shadow .18s,background .18s;
}
dialog :is(input:not([type=checkbox],[type=radio],[type=range],[type=file]),select){min-height:var(--field-height);padding:12px 16px}
dialog textarea{padding:14px 16px;min-height:144px;resize:vertical}
dialog :is(input:not([type=checkbox],[type=radio],[type=range],[type=file]),textarea,select):is(:focus,:focus-visible),
#profileDialog .wa-input:is(:focus,:focus-visible),#wa-extra .wa-input:is(:focus,:focus-visible){
  border:0;
  outline:none;
  box-shadow:inset 0 0 0 1px var(--field-focus);
}
/* Editable writing keeps its paper surface instead of becoming a form field. */
#noteDialog .detail-editable:is(:focus,:focus-visible){outline:none;border:0;box-shadow:inset 0 -1px color-mix(in srgb,var(--sub) 35%,transparent)}
dialog :is(button,a):focus-visible{outline:1px solid var(--ink-3);outline-offset:3px}
/* Every dialog uses the same quiet cross, including legacy text-glyph buttons. */
dialog :is(.wa-close,.detail-close,.ns-close,#closeDialog,#closeGlobalSearch,#closeMonthPicker,#closeStack,#closeHelp,#closeTrash,#closeMiniCover){
  position:absolute;
  top:18px;
  right:18px;
  margin:0;
  width:var(--modal-close);
  height:var(--modal-close);
  min-width:var(--modal-close);
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:transparent;
  font-size:0;
  display:grid;
  place-items:center;
  cursor:pointer;
}
dialog :is(.wa-close,.detail-close,.ns-close,#closeDialog,#closeGlobalSearch,#closeMonthPicker,#closeStack,#closeHelp,#closeTrash,#closeMiniCover)>svg{display:none}
dialog :is(.wa-close,.detail-close,.ns-close,#closeDialog,#closeGlobalSearch,#closeMonthPicker,#closeStack,#closeHelp,#closeTrash,#closeMiniCover)::before,
dialog :is(.wa-close,.detail-close,.ns-close,#closeDialog,#closeGlobalSearch,#closeMonthPicker,#closeStack,#closeHelp,#closeTrash,#closeMiniCover)::after{
  content:"";position:absolute;width:13px;height:1px;background:var(--sub,var(--ink-3));transform:rotate(45deg);
}
dialog :is(.wa-close,.detail-close,.ns-close,#closeDialog,#closeGlobalSearch,#closeMonthPicker,#closeStack,#closeHelp,#closeTrash,#closeMiniCover)::after{transform:rotate(-45deg)}
dialog :is(.wa-close,.detail-close,.ns-close,#closeDialog,#closeGlobalSearch,#closeMonthPicker,#closeStack,#closeHelp,#closeTrash,#closeMiniCover):hover{background:var(--focus-ink)}
#noteShareDialog .ns-close{background:transparent;color:transparent;top:18px;right:18px}
.wa-sheet .wa-top{min-height:0;margin:0 0 24px;padding-right:30px}
.wa-top>span:empty{display:none}
.wa-sheet .wa-primary,dialog .primary,#noteDialog:not(.is-note-detail) #saveNote,#noteShareDialog .ns-save{
  min-height:48px;
  border:0;
  border-radius:var(--field-radius);
  padding:13px 20px;
  background:var(--ink);
  color:var(--paper-white);
  font:400 13px/1.6 var(--sans);
  letter-spacing:0;
}
.wa-sheet .wa-primary{margin-top:24px}
dialog .modal-actions{margin-top:24px;padding-top:0;border-top:0;gap:12px}
#noteDialog:not(.is-note-detail) .modal-actions>button{flex:1}
dialog .help-list{margin-top:28px}
dialog .help-list li{border-color:var(--line)}
#globalSearchDialog .global-search-head,#monthPicker .month-picker-head{padding:0;margin:0 0 24px}
#globalSearchDialog .calendar-search-bar{margin-bottom:0}
#globalSearchDialog .calendar-search-input{padding:0 16px;border:0;border-radius:var(--field-radius);background:var(--surface-soft);box-shadow:inset 0 0 0 1px var(--line)}
#globalSearchDialog .calendar-search-input:focus-within{box-shadow:inset 0 0 0 1px var(--field-focus)}
#globalSearchDialog .calendar-search-input input{background:none;box-shadow:none;min-width:0;padding:12px 0}
#globalSearchDialog .calendar-search-input input:focus{box-shadow:none;outline:none}
#monthPicker #pickerYear{background:var(--surface-soft);border:0;border-radius:12px;font-size:20px;min-height:44px;padding:6px 10px}
#monthPicker .year-picker-label{margin:0;align-items:center}
/* One image draft, confirmed with the same primary action as note details. */
#miniCoverDialog{width:520px;background:var(--paper-white);box-sizing:border-box;overflow:auto}
#miniCoverDialog .photo-intro{font:400 13px/1.8 var(--sans);color:var(--ink-2);margin:18px 0 0}
#miniCoverPreview{display:flex;align-items:center;justify-content:center;height:clamp(160px,30dvh,280px);margin-top:24px;position:relative;border-radius:8px;background:var(--surface-soft);box-shadow:inset 0 0 0 1px var(--line);flex-shrink:0}
#miniCoverPreview .photo-upload{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;border:1px dashed var(--ink-3);border-radius:8px;background:transparent;color:var(--ink-2);font:400 13px/1.7 var(--sans);cursor:pointer}
#miniCoverPreview .photo-upload small{font:400 11px/1.7 var(--sans);color:var(--ink-3)}
#miniCoverPreview .photo-upload:hover{background:color-mix(in srgb,var(--ink) 3%,transparent)}
#miniCoverDialog.photo-dragover #miniCoverPreview{box-shadow:inset 0 0 0 2px var(--ink);background:var(--surface-soft)}
#miniCoverPreview .photo-image{position:relative;width:100%;height:100%;padding:10px}
#miniCoverPreview .photo-replace{display:block;width:100%;height:100%;padding:0;background:none;border:0;border-radius:6px;cursor:pointer}
#miniCoverPreview img{display:block;width:100%;height:100%;max-height:100%;margin:0;border-radius:6px;object-fit:contain}
#miniCoverPreview .photo-remove{position:absolute;right:12px;top:12px;width:36px;height:36px;padding:0;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;color:var(--ink-2);background:var(--paper-white);box-shadow:0 2px 8px #00000012;opacity:0;transition:opacity .15s,background .15s;cursor:pointer}
#miniCoverPreview .photo-image:hover .photo-remove,#miniCoverPreview .photo-image:focus-within .photo-remove{opacity:1}
#miniCoverPreview .photo-remove:hover{color:var(--ink);background:var(--surface-soft)}
#miniCoverDialog :is(button):focus-visible{outline:2px solid var(--ink-3);outline-offset:3px}
#miniCoverDialog [hidden]{display:none!important}
#miniCoverDialog #miniCoverStatus{min-height:24px;margin:14px 0 0;font:400 12px/1.8 var(--sans);color:var(--ink-3)}
#miniCoverDialog .mini-cover-actions{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);background:var(--paper-white);position:sticky;bottom:0;z-index:2}
#miniCoverDialog .mini-cover-actions button{min-height:48px;border:1px solid var(--line);border-radius:var(--field-radius);padding:11px 20px;background:transparent;color:var(--ink);font:400 13px/1.6 var(--sans);cursor:pointer}
#miniCoverDialog #saveMiniCover{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;background:var(--ink);color:var(--paper-white);border-color:transparent}
#miniCoverDialog #saveMiniCover:hover{background:var(--ink-2)}
#miniCoverDialog button:disabled{opacity:.45;cursor:wait}
#miniCoverDialog .photo-discard{margin-top:16px;padding:14px;border-radius:8px;background:var(--surface-soft)}
#miniCoverDialog .photo-discard p{font:400 13px/1.7 var(--sans);margin:0 0 12px;color:var(--ink)}
#miniCoverDialog .photo-discard>div{display:flex;justify-content:flex-end;gap:12px}
#miniCoverDialog .photo-discard button{background:none;padding:8px 0;font:400 12px/1.6 var(--sans);color:var(--ink);cursor:pointer}
#miniCoverDialog #discardMiniCover{text-decoration:underline;text-underline-offset:4px}
.journal-photo{display:block;width:100%;height:145px;min-height:110px;margin:0 0 18px;padding:0;border:0;border-radius:8px;overflow:hidden;background:var(--surface-soft);flex-shrink:0;cursor:pointer}
.journal-photo img{display:block;width:100%;height:100%;object-fit:contain}
.note.inline-editing .journal-photo,.archive-note.inline-editing .journal-photo{display:none}
@media(hover:none){#miniCoverPreview .photo-remove{opacity:1;width:44px;height:44px}}
@media(max-width:420px){#miniCoverDialog .photo-intro{font-size:12px}#miniCoverDialog .mini-cover-actions button{padding-inline:16px}#miniCoverPreview{margin-top:20px}}

#noteDialog.is-note-detail .detail-sheet{padding:var(--modal-y) var(--modal-x) 0}
#noteDialog .detail-title{font:500 var(--modal-title)/1.4 var(--sans);padding-right:20px}
#noteDialog .detail-top{min-height:16px;padding-right:32px;margin-bottom:24px}
#noteDialog .detail-footer .detail-save{min-height:48px;border-radius:var(--field-radius);font:400 13px/1.6 var(--sans)}
.wa-pop.wa-menu{max-height:calc(100dvh - 90px);overflow-y:auto;overscroll-behavior:contain}
.wa-pop a.wa-item{text-decoration:none}
#wa-extra[data-kind=contact]{width:580px}
#wa-extra .wa-contact-list{margin-top:28px}
#wa-extra .wa-contact-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;border-top:1px solid var(--line);font:400 14px/1.6 var(--sans);text-decoration:none;color:var(--ink)}
#wa-extra .wa-contact-row:last-child{border-bottom:1px solid var(--line)}
#wa-extra .wa-contact-row>span{font-size:11px;color:var(--ink-3);flex-shrink:0}
#wa-extra .wa-contact-row :is(a,b,strong){font-weight:400;text-align:right;overflow-wrap:anywhere;min-width:0;color:var(--ink);text-decoration:none}
#wa-extra .wa-contact-row:hover :is(a,b,strong){text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){
  :root{--modal-x:26px;--modal-y:28px;--modal-title:24px}
  dialog:is(#noteDialog,#profileDialog,#wa-extra,#globalSearchDialog,#monthPicker,#stackDialog,#helpDialog,#trashDialog,#miniCoverDialog,#noteShareDialog,.wa-sheet,.detail-leave){max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}
  dialog :is(input:not([type=checkbox],[type=radio],[type=range],[type=file]),textarea,select),#profileDialog .wa-input,#wa-extra .wa-input{font-size:16px}
  #wa-extra .wa-contact-row{gap:12px;font-size:13px;padding:16px 0}
  #noteShareDialog .ns-studio{padding:52px 20px 28px}
  .wa-pop.wa-menu{max-height:calc(100dvh - 77px)}
}
@media(prefers-reduced-motion:reduce){dialog :is(input,textarea,select){transition:none}}



/* Fixed frame, original image extends beneath the soft outside mask. */
#miniCoverDialog{width:620px}
#miniCoverDialog.has-photo #miniCoverPreview{height:auto;background:var(--surface-soft)}
#miniCoverPreview .photo-image{padding:0}
#miniCoverPreview .photo-crop-stage{position:relative;width:100%;padding:40px 16px;box-sizing:border-box;overflow:hidden;border-radius:8px;touch-action:none;user-select:none;cursor:grab;isolation:isolate}
#miniCoverPreview .photo-crop-stage.is-dragging{cursor:grabbing}
#miniCoverPreview .photo-crop-stage>img{position:absolute;display:block;max-width:none;max-height:none;margin:0;border-radius:0;object-fit:fill;pointer-events:none;filter:none}
#miniCoverPreview .photo-crop-frame{position:relative;width:100%;height:auto;aspect-ratio:16/9;box-sizing:border-box;border:0;box-shadow:0 0 0 1000px #f1f1edb8,inset 0 0 0 1px #1616153d;pointer-events:none}
#miniCoverPreview .photo-crop-frame>span{position:absolute;inset:-1px;border:1px solid #16161559}
#miniCoverPreview .photo-remove{right:8px;top:6px;z-index:1}
#miniCoverDialog .photo-crop-tools{display:grid;grid-template-columns:auto minmax(60px,1fr) 44px;align-items:center;gap:12px;margin-top:16px;font:400 12px/1.7 var(--sans);color:var(--ink-2)}
#miniCoverDialog .photo-crop-tools input{width:100%;min-width:0;accent-color:var(--ink);cursor:pointer;height:28px;margin:0}
#miniCoverDialog .photo-crop-tools output{font-variant-numeric:tabular-nums;text-align:right;color:var(--ink-3)}
#miniCoverDialog .photo-crop-tools button{border:0;background:none;padding:4px 0;color:var(--ink-2);font:400 12px/1.7 var(--sans);text-align:left;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
#miniCoverDialog .photo-crop-tools .photo-reset{grid-column:1/3;justify-self:start}
#miniCoverDialog .photo-crop-tools .photo-replace{grid-column:3;justify-self:end;white-space:nowrap}
#miniCoverDialog .photo-crop-hint{font:400 11px/1.8 var(--sans);color:var(--ink-3);margin:12px 0 0}
#miniCoverDialog .photo-crop-stage:focus-visible{outline:2px solid var(--ink-3);outline-offset:3px}
@media(max-width:420px){#miniCoverPreview .photo-crop-stage{padding:32px 12px}#miniCoverDialog .photo-crop-tools{gap:8px}#miniCoverDialog .photo-crop-hint{font-size:10px}}

#miniCoverDialog #miniCoverStatus:empty{display:none}