/* Calendar events float over their time slot; other details keep their drawer. */
body.minimal-calm #drawer:has(#event-form){
  inset:auto;
  top:var(--calendar-popup-top,12px);
  left:var(--calendar-popup-left,calc(50vw - 230px));
  width:460px;
  max-width:min(calc(100vw - 24px),var(--calendar-popup-available-width,460px));
  height:auto;
  max-height:min(calc(100dvh - 24px),var(--calendar-popup-available-height,calc(100dvh - 24px)));
  margin:0;
  padding:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 12px 36px rgb(18 29 27 / .17);
}
body.minimal-calm #drawer[open]:has(#event-form){animation:calendar-popup-enter 140ms cubic-bezier(.22,1,.36,1) backwards;transform:none}
body.minimal-calm #drawer:has(#event-form)::backdrop{background:rgb(18 29 27 / .035)}
body.minimal-calm #drawer:has(#event-form) .drawer-head{padding:12px 16px 12px 20px;min-height:54px;border:0}
body.minimal-calm #drawer:has(#event-form) .drawer-head h2{font-size:14px;font-weight:550;letter-spacing:-.015em}
body.minimal-calm #drawer:has(#event-form) #drawer-close{min-width:32px;min-height:32px}
body.minimal-calm #drawer:has(#event-form) .drawer-body{padding:0 20px 16px;min-height:0;flex:0 1 auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
body.minimal-calm #drawer:has(#event-form) .drawer-footer{padding:10px 20px;font-size:10px;line-height:1.5;flex-shrink:0}
body.minimal-calm #event-form .form-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
body.minimal-calm #event-form .form-field{min-width:0;gap:5px;line-height:1.4;font-size:11px}
body.minimal-calm #event-form .form-field.full{grid-column:1 / -1}
body.minimal-calm #event-form .input{min-width:0;min-height:36px;font-size:12px;border-color:var(--line);border-radius:6px;background:var(--surface);box-shadow:none}
body.minimal-calm #event-form textarea.input{min-height:64px;max-height:180px;line-height:1.6;resize:vertical}
body.minimal-calm #event-form .input::placeholder{color:var(--secondary);opacity:1}
body.minimal-calm #event-form .form-actions{margin-top:16px;gap:8px;flex-wrap:wrap}
body.minimal-calm #event-form .form-actions .btn{min-height:34px}
body.minimal-calm #event-form #delete-event{margin-left:auto}
body.minimal-calm #event-form .form-note{margin:10px 0 0;font-size:10px;line-height:1.5}
@keyframes calendar-popup-enter{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){
  body.minimal-calm #drawer:has(#event-form){width:460px}
  body.minimal-calm #drawer:has(#event-form) .drawer-head{padding-inline:16px 12px}
  body.minimal-calm #drawer:has(#event-form) .drawer-body{padding-inline:16px}
  body.minimal-calm #drawer:has(#event-form) .drawer-footer{padding-inline:16px}
  body.minimal-calm #event-form .input{font-size:16px;min-height:40px}
  body.minimal-calm #event-form .form-actions .btn{min-height:40px}
}
@media(max-width:360px){body.minimal-calm #event-form .form-grid{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){body.minimal-calm #drawer[open]:has(#event-form){animation:none}}

/* The whole appointment carries its type color, including month and drag views. */
body.minimal-calm{
  --calendar-event-fill:#cfece5;
  --calendar-event-ink:#24574b;
  --calendar-event-border:#acd6ca;
  --calendar-sales-fill:#f8dfaa;
  --calendar-sales-ink:#684615;
  --calendar-sales-border:#e6c58b;
  --calendar-success-fill:#d8e9ff;
  --calendar-success-ink:#25537a;
  --calendar-success-border:#b8d3f0;
  --calendar-team-fill:#e2d7f4;
  --calendar-team-ink:#584374;
  --calendar-team-border:#cabae1;
  --calendar-content-fill:#f4d2d8;
  --calendar-content-ink:#79384b;
  --calendar-content-border:#deb3be;
}
body.minimal-calm.theme-dark{
  --calendar-event-fill:#294c44;
  --calendar-event-ink:#d3f1e7;
  --calendar-event-border:#416a60;
  --calendar-sales-fill:#57432a;
  --calendar-sales-ink:#ffe6b8;
  --calendar-sales-border:#806646;
  --calendar-success-fill:#2b455f;
  --calendar-success-ink:#d8ecff;
  --calendar-success-border:#486987;
  --calendar-team-fill:#473c5d;
  --calendar-team-ink:#eadcfc;
  --calendar-team-border:#6d5d89;
  --calendar-content-fill:#5a3540;
  --calendar-content-ink:#ffdce4;
  --calendar-content-border:#7f5661;
}
body.minimal-calm #page-body :is(.cal-event,.month-event,.cal-selection-preview){
  --calendar-fill:var(--calendar-event-fill);
  --calendar-ink:var(--calendar-event-ink);
  --calendar-border:var(--calendar-event-border);
  background:var(--calendar-fill);
  color:var(--calendar-ink);
  border-color:var(--calendar-border);
  box-shadow:none;
}
body.minimal-calm #page-body :is(.cal-event,.month-event,.cal-selection-preview).sales{--calendar-fill:var(--calendar-sales-fill);--calendar-ink:var(--calendar-sales-ink);--calendar-border:var(--calendar-sales-border)}
body.minimal-calm #page-body :is(.cal-event,.month-event,.cal-selection-preview):is(.setter,.onboarding,.success){--calendar-fill:var(--calendar-success-fill);--calendar-ink:var(--calendar-success-ink);--calendar-border:var(--calendar-success-border)}
body.minimal-calm #page-body :is(.cal-event,.month-event,.cal-selection-preview).team{--calendar-fill:var(--calendar-team-fill);--calendar-ink:var(--calendar-team-ink);--calendar-border:var(--calendar-team-border)}
body.minimal-calm #page-body :is(.cal-event,.month-event,.cal-selection-preview):is(.content,.admin,.personal){--calendar-fill:var(--calendar-content-fill);--calendar-ink:var(--calendar-content-ink);--calendar-border:var(--calendar-content-border)}
body.minimal-calm #page-body .cal-event :is(strong,small){color:inherit}
body.minimal-calm #page-body .cal-event:hover{background:var(--calendar-fill);border-color:var(--calendar-ink)}
body.minimal-calm #page-body .cal-event .cal-resize-handle::after{background:currentColor}
body.minimal-calm #page-body .cal-selection-preview{border-color:var(--calendar-ink)}
body.minimal-calm #page-body .calendar-key .status.green{background:var(--calendar-event-fill);color:var(--calendar-event-ink)}
body.minimal-calm #page-body .calendar-key .status.amber{background:var(--calendar-sales-fill);color:var(--calendar-sales-ink)}
body.minimal-calm #page-body .calendar-key .status.blue{background:var(--calendar-success-fill);color:var(--calendar-success-ink)}
body.minimal-calm #page-body .calendar-key .status.purple{background:var(--calendar-team-fill);color:var(--calendar-team-ink)}
body.minimal-calm #event-form .calendar-repeat{display:flex;align-items:center;gap:8px;min-height:36px;color:var(--ink);font-size:12px}
body.minimal-calm #event-form .calendar-repeat input{margin:0}