/* ============================================================
   Pipezoom - calpick.css

   The Calendar picker over the shell's .stuck-sheet and .stuck-panel
   rules: a bottom sheet under 900px and a popover under the pressed
   control at 900px and up, with its chips, fields and Save. Chosen kind
   chips wear the kind colors the Calendar's chips wear.
   Defines the cpk- classes.
   Notes: docs/notes/app.pipezoom.com/css/calpick.css.md
   ============================================================ */

@media (max-width:899px){
  .cpk-sheet{align-items:flex-end;padding:0;}
  .cpk-panel{margin-top:0;border-radius:var(--radius) var(--radius) 0 0;}
}
@media (min-width:900px){
  .cpk-sheet{position:absolute;inset:auto;display:block;background:none;padding:0;overflow:visible;}
  .cpk-panel{width:380px;max-width:86vw;margin-top:0;}
}

.cpk-head{margin-bottom:4px;}
.cpk-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cpk-x{width:44px;height:44px;color:var(--ink-soft);}
.cpk-x:hover{background:var(--surface-hover);color:var(--ink);}

.cpk-sec{display:flex;flex-direction:column;gap:6px;margin-top:12px;}
.cpk-sec[hidden],.cpk-foot[hidden]{display:none;}
.cpk-l{font-size:.8rem;font-weight:700;color:var(--ink-soft);}

/* An unchosen chip is light with a neutral border; a chosen chip is colored with white text. */
.cpk-chips{display:flex;flex-wrap:wrap;gap:6px;}
.cpk-chip{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;min-width:44px;padding:0 12px;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--surface-high);color:var(--ink);font-size:.86rem;font-weight:600;cursor:pointer;
}
.cpk-chip:hover{background:var(--surface-hover);}
.cpk-chip[aria-pressed="true"]{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink-inverse);}
.cpk-k-call[aria-pressed="true"]{background:var(--hue-blue-btn);border-color:var(--hue-blue-btn);}
.cpk-k-visit[aria-pressed="true"]{background:var(--hue-green-btn);border-color:var(--hue-green-btn);}
.cpk-k-appt[aria-pressed="true"]{background:var(--hue-purple-btn);border-color:var(--hue-purple-btn);}
.cpk-k-task[aria-pressed="true"]{background:var(--hue-grey-btn);border-color:var(--hue-grey-btn);}

.cpk-date,.cpk-t,.cpk-q{min-height:44px;}
.cpk-n{min-height:64px;resize:vertical;}
.cpk-count{align-self:flex-end;font-size:.76rem;color:var(--ink-faint);}

/* The name search of Add. */
.cpk-rows{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto;}
.cpk-row{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:44px;padding:8px 10px;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--surface-high);color:var(--ink);font:inherit;text-align:left;cursor:pointer;
}
.cpk-row:hover{background:var(--surface-hover);}
.cpk-row span{font-size:.8rem;color:var(--ink-soft);}
.cpk-none{font-size:.88rem;color:var(--ink-soft);}

.cpk-err{
  margin-top:12px;padding:9px 12px;border-radius:var(--radius-sm);
  background:var(--danger-wash);color:var(--ink);font-size:.86rem;
}
.cpk-foot{display:flex;justify-content:flex-end;margin-top:14px;}
.cpk-save{min-height:44px;}
.cpk-save:disabled{opacity:.5;cursor:default;}