/* The native top layer escapes editor/list clipping and transformed ancestors.
   DOM ancestry remains unchanged, including form and event ownership. */
.viewport-overlay{overscroll-behavior:contain;overflow-wrap:anywhere}
.viewport-overlay[popover]:not(:popover-open){display:none!important}
.viewport-overlay[popover]:popover-open{visibility:visible}
.viewport-overlay[data-overlay-mode="inline"]{float:none!important}
.viewport-overlay[data-overlay-mode="inline"] :is(input,select,textarea){max-width:100%;min-width:0}

/* One section-heading scale, independent of body and metadata typography.
   Keep each section's existing CRM foreground/accent color. */
#editor{--task-detail-heading-size:.875rem}
#editor .task-description .section-label,
#editor .task-description .description-toggle,
#editor .checklist-group input.checklist-name,
#editor .checklists-heading h3,
#editor .task-attachments-header h3.section-label,
#editor .task-extra-details .editor-more-settings>summary{
  font-size:var(--task-detail-heading-size);font-weight:600;line-height:1.5;
}
@media(max-width:820px){#editor{--task-detail-heading-size:16px}}

/* Compact, calm task-section bars. Spacing belongs to the visible header,
   never to a closed wrapper. All controls keep their native event owners. */
#editor{--task-section-control-height:30px;--task-section-bar-height:36px}
#editor .task-extra-details{padding:0;border:0;background:transparent}
#editor .task-description .section-label{margin:0}
#editor .task-extra-details .editor-more-settings>summary,
#editor .task-description .description-toggle,
#editor .checklist-group-heading{
  box-sizing:border-box;display:flex;align-items:center;gap:4px;
  min-width:0;min-height:var(--task-section-bar-height);margin:0;
  padding:3px 6px;border:0;border-radius:6px;background:var(--soft,#edf2fa);
}
#editor .task-extra-details .editor-more-settings>summary{gap:8px;overflow-wrap:anywhere}
#editor .task-extra-details .editor-more-settings>summary::before{
  flex:0 0 8px;width:8px;height:8px;margin:0 9px;
}
#editor .task-description .description-chevron{flex:0 0 26px;width:26px;height:16px}
#editor .task-description .description-toggle>span{min-width:0;padding:4px;overflow-wrap:anywhere}
#editor .checklist-group-heading .checklist-fold,
#editor .checklist-group-heading .checklist-delete{
  display:flex;align-items:center;justify-content:center;align-self:center;
  flex:0 0 26px;width:26px;height:var(--task-section-control-height);
  min-height:var(--task-section-control-height);padding:0;margin:0;line-height:1;
}
#editor .checklist-name-wrap{position:relative;display:grid;align-items:center;flex:1;min-width:0}
#editor .checklist-name-display{
  display:flex;align-items:center;min-width:0;min-height:var(--task-section-control-height);padding:4px;
  font-size:var(--task-detail-heading-size);font-weight:600;line-height:1.5;
  white-space:pre-wrap;overflow-wrap:anywhere;pointer-events:none;
}
#editor .checklist-name-wrap input.checklist-name{
  position:absolute;inset:0;width:100%;height:100%;min-height:var(--task-section-control-height);
  margin:0;padding:4px;opacity:0;
}
#editor .checklist-name-wrap:focus-within input.checklist-name{opacity:1}
#editor .checklist-name-wrap:focus-within .checklist-name-display{visibility:hidden}
#editor .checklist-group-count{flex:0 0 auto;align-self:center;margin:0 3px;line-height:1.5}
#editor .checklist-group+.checklist-group{padding-top:0;border-top:0;margin-top:12px}
#editor .checklist-group-body,#editor #description-body{padding:8px 0 0}
#editor .task-extra-details .editor-more-content{padding:10px 10px 0}
#editor .task-description .description-add{
  min-height:32px;padding:5px 10px;border:0;background:transparent;
  color:var(--muted,#687a96);font-size:var(--task-detail-text-size);line-height:1.5;
}
#editor .description-toggle:hover:not(:disabled){transform:none;box-shadow:none}
@media(max-width:820px),(pointer:coarse){
  #editor{--task-section-control-height:44px;--task-section-bar-height:50px}
  #editor .checklist-group-heading .checklist-fold,
  #editor .checklist-group-heading .checklist-delete{flex-basis:44px;width:44px}
  #editor .task-description .description-chevron{flex-basis:44px;width:44px}
  #editor .task-extra-details .editor-more-settings>summary::before{margin-inline:18px}
  #editor .task-description .description-add{min-height:44px}
}

/* 0.37: one fine frame belongs to the real section, not to its form fields.
   Hidden bodies and native details naturally reduce it to the closed header.
   Keep overflow visible so focus rings and relationship/attachment menus are
   not clipped. These task-only rules leave customer/project cards untouched. */
#editor .task-extra-details .editor-more-settings,
#editor .task-description,
#editor .checklist-group,
#editor .checklist-group+.checklist-group,
#editor .task-attachments{
  min-width:0;padding:0;border:1px solid var(--line,#e3e6ec);
  border-radius:7px;background:transparent;
}
#editor .task-extra-details .editor-more-settings>summary,
#editor .task-description .description-toggle,
#editor .checklist-group-heading,
#editor .task-attachments-header{
  box-sizing:border-box;display:flex;align-items:center;gap:4px;
  min-width:0;min-height:calc(var(--task-section-bar-height) - 2px);margin:0;
  padding:2px 6px;border:0;border-radius:6px;background:transparent;
}
/* The frame takes one pixel from each side of the old symmetric header
   padding: the complete closed bar still measures 36px / 50px minimum. */
#editor .task-extra-details .editor-more-settings>summary{gap:8px}
#editor .task-extra-details .editor-more-content,
#editor .checklist-group-body,#editor #description-body,
#editor .task-attachments-body{padding:8px 10px 10px}
#editor .task-attachments-header{flex-wrap:wrap}
#editor .task-attachments-header h3.section-label{
  flex:1 1 auto;min-width:0;margin:0 auto 0 0;overflow-wrap:anywhere;
}
#editor .task-attachments-header .task-attachments-fold{
  display:flex;align-items:center;justify-content:center;align-self:center;
  flex:0 0 26px;width:26px;height:var(--task-section-control-height);
  min-height:var(--task-section-control-height);padding:0;margin:0;
}
#editor .task-attachments-add,#editor .task-attachments-refresh{
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  min-width:0;max-width:100%;min-height:var(--task-section-control-height);
  overflow-wrap:anywhere;
}
@media(max-width:820px),(pointer:coarse){
  #editor .task-attachments-header .task-attachments-fold{flex-basis:44px;width:44px}
}

/* The three task-menu actions use the same row height. Extra privacy notices
   remain outside the row, so information never competes with the checkbox. */
#editor .task-options-content .task-privacy{padding:0;margin:0;border:0;background:transparent}
#editor .task-options-content .task-privacy-choice,
#editor .task-options-content .day-choice,
#editor .task-options-content .task-options-delete{
  box-sizing:border-box;display:flex;align-items:center;min-height:44px;
  padding:0 12px;font-size:.875rem;line-height:20px;border-radius:8px;
}
#editor .task-options-content .task-privacy-choice{padding-right:0;background:var(--soft,#edf2fa)}
#editor .task-options-content .task-privacy-choice>.member-option{
  flex:1;min-width:0;min-height:44px;padding:0;margin:0;font-size:inherit;line-height:inherit;
}
#editor .task-options-content .privacy-help{
  flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;
}
#editor .task-options-content .member-option input[type=checkbox],
#editor .task-options-content .day-choice input[type=checkbox]{width:18px;height:18px;flex:0 0 18px;margin:0}
#editor .task-options-content .day-choice{margin:8px 0 0}
#editor .task-options-content .task-options-delete{justify-content:center;margin:8px 0 0}
#editor #task-privacy-menu-notice:empty{display:none}