/* ============================================================
   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, many mode's day rows
   and Save. Chosen kind chips wear the kind colors the Calendar's chips wear.
   Defines the cpk- classes, with the 2 Plan openers' cpk-plan and cpk-nbox.
   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;}

/* Many mode: the fixed kind and the count over the 7 day rows. */
.cpk-add{display:flex;align-items:center;gap:8px;margin:0;font-size:.86rem;color:var(--ink);}
.cpk-tag{
  display:inline-flex;align-items:center;padding:2px 9px;border-radius:var(--radius-sm);
  background:var(--hue-green-btn);color:var(--ink-inverse);font-size:.78rem;font-weight:700;
}

/* A day row: the day, its free door minutes and stops, and the room count on a day short of room. */
.cpk-days{display:flex;flex-direction:column;gap:6px;}
.cpk-day{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;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-day:hover{background:var(--surface-hover);}
.cpk-day-d{min-width:7.5em;font-size:.88rem;font-weight:700;}
.cpk-day-t{font-size:.72rem;font-weight:600;color:var(--ink-soft);}
.cpk-day-m{font-size:.8rem;color:var(--ink-soft);}
.cpk-day-r{margin-left:auto;font-size:.78rem;font-weight:700;}
/* A day short of room is grayed and stays pressable; a day off is disabled. */
.cpk-day-short,.cpk-day-short .cpk-day-m{color:var(--ink-faint);}
.cpk-day:disabled{opacity:.5;cursor:default;}
.cpk-day:disabled:hover{background:var(--surface-high);}
.cpk-day[aria-pressed="true"]{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink-inverse);}
.cpk-day[aria-pressed="true"] .cpk-day-m,.cpk-day[aria-pressed="true"] .cpk-day-t{color:var(--ink-inverse);}

/* Plan (n) of the bulk bar at 0 picked, and the number box of Take Action's Plan the next n. */
.cpk-plan:disabled{opacity:.5;cursor:default;}
.cpk-nbox{width:5.5em;min-height:36px;padding:6px 10px;}