/* picker.css — "Choose your calendars" Interests-Grid popup + drawer summary +
   appbar Calendars button. Light Google-Calendar product theme, self-hosted assets
   only. Dark-mode tokens reuse theme.css variables. */

/* ===== appbar Calendars button ===== */
.wc-cal-ico { display: inline-flex; align-items: center; justify-content: center; }
.wc-cal-ico svg { display: block; }
#wc-calendars { gap: 8px; color: var(--wc-text-strong); }
#wc-calendars .wc-cal-ico { color: var(--wc-accent); }
#wc-calendars-m .wc-cal-ico { color: var(--wc-text-muted); }

/* ===== drawer "My calendars" summary ===== */
.wc-cal-summary {
  margin: 6px 8px 2px; padding: 14px 14px 10px;
  background: var(--wc-surface-2); border-radius: var(--wc-radius-lg);
  text-align: left;
}
.wc-cal-summary__num { font-size: 30px; font-weight: 700; color: var(--wc-text-strong); line-height: 1; }
.wc-cal-summary__tot { font-size: 16px; font-weight: 500; color: var(--wc-text-muted); }
.wc-cal-summary__label { font-size: 13px; color: var(--wc-text-muted); margin-top: 4px; }
.wc-manage-btn {
  margin: 10px 8px 0; width: calc(100% - 16px);
  min-height: 48px; padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: none; border-radius: var(--wc-radius-lg);
  background: var(--wc-accent); color: #fff;
  font-size: 15px; font-weight: 600; cursor: pointer;
  box-shadow: var(--wc-sh-1); transition: filter .15s ease, box-shadow .15s ease;
}
.wc-manage-btn:hover { filter: brightness(1.05); box-shadow: var(--wc-sh-2); }
.wc-manage-btn:active { filter: brightness(.96); }
.wc-manage-btn__ico { display: inline-flex; }
.wc-manage-btn__ico svg { display: block; }
.wc-cal-summary__hint { font-size: 12px; color: var(--wc-text-faint); padding: 10px 8px 4px; }

/* ===== popup overlay ===== */
.wc-pk-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: var(--wc-overlay);
  display: none; align-items: center; justify-content: center; padding: 24px;
  -webkit-tap-highlight-color: transparent;
}
.wc-pk-scrim.open { display: flex; }
body.wc-pk-lock { overflow: hidden; }

.wc-pk {
  background: var(--wc-surface);
  width: min(960px, 100%); height: min(88vh, 880px);
  border-radius: 24px; box-shadow: var(--wc-sh-3);
  display: flex; flex-direction: column; overflow: hidden;
}

/* header */
.wc-pk__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px 14px; border-bottom: 1px solid var(--wc-line-soft); flex: 0 0 auto;
}
.wc-pk__titlewrap { flex: 1 1 auto; min-width: 0; }
.wc-pk__title { font-size: 20px; font-weight: 600; color: var(--wc-text-strong); }
.wc-pk__sub { font-size: 13px; color: var(--wc-text-muted); margin-top: 2px; }
.wc-pk__count {
  background: var(--wc-accent-weak); color: var(--wc-accent);
  font-size: 13px; font-weight: 700; border-radius: 999px; padding: 7px 14px; white-space: nowrap;
}
.wc-pk__x {
  width: 44px; height: 44px; flex: 0 0 auto; border: none; background: transparent;
  color: var(--wc-text-muted); border-radius: 50%; cursor: pointer; display: grid; place-items: center;
}
.wc-pk__x:hover { background: var(--wc-surface-hover); }
.wc-pk__x svg { display: block; }

/* tools row: search + bulk */
.wc-pk__tools { padding: 14px 18px 12px; flex: 0 0 auto; }
.wc-pk__search {
  display: flex; align-items: center; gap: 10px;
  background: var(--wc-surface-2); border-radius: 999px; padding: 0 16px; height: 52px;
}
.wc-pk__search:focus-within { background: var(--wc-surface); box-shadow: 0 0 0 2px var(--wc-accent) inset; }
.wc-pk__search svg { flex: 0 0 auto; color: var(--wc-text-muted); }
.wc-pk__search input {
  flex: 1 1 auto; border: none; background: transparent; outline: none;
  font-size: 16px; color: var(--wc-text); height: 100%;
}
.wc-pk__bulk { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.wc-pk__bulkbtn {
  border: 1px solid var(--wc-line); border-radius: 999px; padding: 9px 16px;
  font-size: 14px; font-weight: 600; color: var(--wc-accent); background: var(--wc-surface);
  cursor: pointer; min-height: 40px;
}
.wc-pk__bulkbtn:hover { background: var(--wc-accent-weak); }
.wc-pk__bulkbtn.muted { color: var(--wc-text-muted); }
.wc-pk__bulkbtn.muted:hover { background: var(--wc-surface-hover); }

/* scrollable body */
.wc-pk__body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 6px 18px 24px; -webkit-overflow-scrolling: touch; }
.wc-pk-empty { text-align: center; color: var(--wc-text-muted); padding: 56px 20px; font-size: 15px; }

/* segment group */
.wc-pk-seg { padding: 4px 0 2px; }
.wc-pk-seg__head { display: flex; align-items: center; gap: 9px; margin: 18px 2px 11px; }
.wc-pk-seg__dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.wc-pk-seg__name { font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.wc-pk-seg__count {
  font-size: 12px; font-weight: 600; color: var(--wc-text-muted);
  background: var(--wc-surface-2); border-radius: 999px; padding: 3px 10px;
}
.wc-pk-seg__chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* pill chip */
.wc-pk-chip {
  display: inline-flex; align-items: center; gap: 9px;
  border-radius: 999px; padding: 11px 16px;
  font-size: 14.5px; font-weight: 600;
  border: 2px solid var(--wc-line); background: var(--wc-surface); color: var(--wc-text-strong);
  min-height: 46px; max-width: 100%; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.wc-pk-chip:hover { border-color: var(--wc-text-faint); }
.wc-pk-chip__dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; background: var(--cc); }
.wc-pk-chip__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.wc-pk-chip__n { font-size: 11.5px; font-weight: 700; opacity: .65; }
.wc-pk-chip__tick { width: 0; overflow: hidden; opacity: 0; display: inline-flex; transition: .12s; }
.wc-pk-chip__tick svg { display: block; }
/* ON state */
.wc-pk-chip.on { color: #fff; border-color: transparent; }
.wc-pk-chip.on:hover { filter: brightness(1.04); }
.wc-pk-chip.on .wc-pk-chip__dot { background: rgba(255,255,255,.92); }
.wc-pk-chip.on .wc-pk-chip__n { color: rgba(255,255,255,.9); opacity: 1; }
.wc-pk-chip.on .wc-pk-chip__tick { width: 16px; opacity: 1; color: #fff; }

/* footer */
.wc-pk__foot {
  flex: 0 0 auto; border-top: 1px solid var(--wc-line-soft);
  padding: 12px 18px; display: flex; align-items: center; gap: 12px; background: var(--wc-surface);
}
.wc-pk__fcount { flex: 1 1 auto; font-size: 13.5px; color: var(--wc-text-muted); }
.wc-pk__done {
  background: var(--wc-accent); color: #fff; border: none; border-radius: 999px;
  padding: 12px 28px; font-size: 15px; font-weight: 600; cursor: pointer; min-height: 46px;
}
.wc-pk__done:hover { filter: brightness(1.05); }
.wc-pk__done:active { filter: brightness(.96); }

/* ===== phone: near-full-screen sheet ===== */
@media (max-width: 720px) {
  .wc-pk-scrim { padding: 0; }
  .wc-pk { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; }
  .wc-pk__title { font-size: 18px; }
  .wc-pk-chip__name { max-width: 60vw; }
}