/* Phase 7: People (the workload), check-ins and notifications. Loaded right after final.css. */

/* ================================================================ the bell */
.notify-wrap { position: relative; display: inline-flex; }
.notify-wrap[hidden] { display: none; }
#notify-btn { position: relative; }
#notify-btn.has-unread { color: var(--text); }
.notify-count { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--on-accent, #0e0f12); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; letter-spacing: 0; box-shadow: 0 0 0 2px var(--bg); }
.notify-count[hidden] { display: none; }

/* the panel: a popover under the bell on desktop (top and right are set from the bell's place) */
.notify-panel {
  position: fixed; top: 64px; right: 24px; bottom: auto; left: auto; z-index: 30; width: 380px; max-width: calc(100vw - 32px);
  max-height: min(560px, calc(100vh - 96px)); margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
}
.notify-panel:not(.on) { display: none; }
.notify-panel.on { display: block; animation: pop-in .2s cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) { .notify-panel.on { animation: none; } }
.notify-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 12px 10px 10px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.notify-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 16px; font-weight: 600; line-height: 24px; }
.notify-all { flex: none; }
.notify-all[hidden] { display: none; }
.notify-close { display: none; } /* desktop: a click elsewhere or Esc closes it */
.notify-list { display: flex; flex-direction: column; padding: 6px; }
.notify-row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px;
  border: 0; border-radius: 12px; background: none; color: var(--muted); font: inherit; font-size: 14px; line-height: 20px; text-align: left; cursor: pointer;
}
.notify-row:hover { background: rgba(255, 255, 255, .05); }
.notify-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.notify-row.unread { color: var(--text); }
.notify-text { min-width: 0; overflow-wrap: anywhere; }
.notify-text b { font-weight: 600; color: var(--text); }
.notify-row .face.sm { font-size: 9px; }
.notify-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--muted); }
.notify-ic svg { width: 13px; height: 13px; }
.k-slipped .notify-ic { background: rgba(236, 122, 122, .14); color: var(--danger); }
.k-decision .notify-ic { background: rgba(255, 181, 71, .14); color: var(--amber); }
.notify-when { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.notify-row.unread .notify-when::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.notify-empty { margin: 0; padding: 28px 20px; color: var(--muted); font-size: 14px; line-height: 20px; text-align: center; }

/* ================================================================ People */
.pmv-pp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 0 0 16px; }
.pmv-pp-hint { margin: 0; color: var(--muted); font-size: 13px; }
.pmv-pp-switch .btn { margin-left: 8px; }
/* a column per person, side by side; more people than fit scroll sideways inside the box */
.pmv-pp-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.pmv-pp-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; border: 1px dashed transparent; border-radius: 16px; background: rgba(255, 255, 255, .03); scroll-snap-align: start; transition: border-color .15s, background .15s; }
.pmv-pp-col.over { border-color: var(--accent); background: rgba(52, 211, 153, .06); }
.pmv-pp-col.no { border-color: var(--danger); }
.pmv-pp-col.none { background: rgba(255, 255, 255, .015); border-color: var(--line); }
.pmv-pp-head { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.pmv-pp-col.me .pmv-pp-head .face { box-shadow: 0 0 0 2px var(--accent); }
.pmv-pp-noface { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border: 1px dashed var(--line); border-radius: 50%; color: var(--muted); }
.pmv-pp-noface svg { width: 18px; height: 18px; }
.pmv-pp-who { min-width: 0; }
.pmv-pp-who b { display: block; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.pmv-pp-who small { display: block; color: var(--muted); font-size: 12px; line-height: 16px; }
.pmv-pp-who small b { display: inline; font-size: 12px; }
.pmv-pp-who small b.late { color: var(--danger); }
.pmv-pp-list { display: flex; flex-direction: column; gap: 8px; min-height: 72px; }
.pmv-pp-empty { margin: 0; padding: 12px 4px; color: var(--muted); font-size: 13px; }
/* ⇄ on a card: move it by a list */
.pmv-pp-move { display: inline-grid; flex: none; place-items: center; width: 28px; height: 28px; margin-left: auto; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.pmv-pp-move svg { width: 15px; height: 15px; }
.pmv-pp-move:hover { color: var(--text); border-color: var(--text); }
.pmv-pp-move:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pmv-pp-move + .pm-cyc { margin-left: 6px; }
/* the check-in under a column */
.pmv-pp-ci { margin-top: auto; padding: 10px 2px 2px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; line-height: 18px; }
.pmv-pp-ci-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pmv-pp-ci-btn { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--accent); }
.pmv-pp-ci dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 0; }
.pmv-pp-ci dt { color: var(--text); font-weight: 600; }
.pmv-pp-ci dd { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; white-space: pre-line; overflow-wrap: anywhere; }
/* the Move to list */
.panel.pmv-pp-pick { width: min(360px, calc(100vw - 32px)); }
.pmv-pp-pick-list { display: flex; flex-direction: column; gap: 2px; }
.pmv-pp-pick-list button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.pmv-pp-pick-list button:hover:not(:disabled) { background: rgba(255, 255, 255, .06); }
.pmv-pp-pick-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pmv-pp-pick-list button:disabled { color: var(--muted); cursor: default; }
.pmv-pp-pick-list button small { margin-left: auto; color: var(--muted); font-size: 12px; }
.pmv-pp-pick-none { display: inline-grid; flex: none; place-items: center; width: 22px; height: 22px; border: 1px dashed var(--line); border-radius: 50%; color: var(--muted); font-size: 11px; }

/* ================================================================ Check in */
.panel.pm-checkin { width: min(520px, calc(100vw - 32px)); }
.pm-checkin-day { margin: -8px 0 0; color: var(--muted); font-size: 13px; }
.pm-checkin-fields { display: flex; flex-direction: column; gap: 14px; }
.pm-checkin-f { gap: 6px; }
.pm-checkin-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pm-checkin-label label { color: var(--muted); font-size: 13px; font-weight: 600; }
.pm-checkin-mic { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.pm-checkin-mic svg { width: 16px; height: 16px; }
.pm-checkin-mic:hover { color: var(--text); border-color: var(--text); }
.pm-checkin-mic.on { border-color: transparent; background: var(--accent); color: var(--on-accent, #0e0f12); animation: pm-talk-pulse 1.4s ease-out infinite; }
.pm-checkin textarea { min-height: 56px; font-size: 14px; resize: vertical; }
.pm-checkin-hint { min-height: 18px; margin: 0; color: var(--muted); font-size: 13px; line-height: 18px; }
.pm-checkin-foot { justify-content: flex-end; }
.more-list .more-checkin[hidden] { display: none; }

/* ================================================================ Settings › Account */
.notify-choices { gap: 10px; }

/* ================================================================ light theme */
:where(html[data-theme="light"]) .notify-count { box-shadow: 0 0 0 2px var(--surface); }
:where(html[data-theme="light"]) .notify-panel { box-shadow: 0 16px 48px -12px rgba(15, 23, 42, .28); }
:where(html[data-theme="light"]) .notify-row:hover { background: rgba(15, 23, 42, .05); }
:where(html[data-theme="light"]) .notify-ic { background: rgba(15, 23, 42, .06); }
:where(html[data-theme="light"]) .pmv-pp-col { background: rgba(15, 23, 42, .03); }
:where(html[data-theme="light"]) .pmv-pp-col.none { background: rgba(15, 23, 42, .015); }
:where(html[data-theme="light"]) .pmv-pp-pick-list button:hover:not(:disabled) { background: rgba(15, 23, 42, .05); }
@media (prefers-reduced-motion: reduce) { .pm-checkin-mic.on { animation: none; } }

/* ================================================================ phone */
@media (max-width: 760px) {
  .notify-panel {
    position: fixed; top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-width: none; max-height: calc(100dvh - 48px);
    padding: 0 max(0px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(0px, env(safe-area-inset-left, 0px));
    border: 0; border-top: 1px solid var(--line); border-radius: 20px 20px 0 0; box-shadow: 0 -16px 48px rgba(0, 0, 0, .45);
  }
  .notify-panel.on { animation: more-sheet-up .28s cubic-bezier(.2, .8, .2, 1); }
  .notify-panel::backdrop { background: rgba(0, 0, 0, .5); }
  .notify-head { padding: 20px 10px 8px 20px; }
  .notify-head::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--line); }
  .topbar #notify-btn { width: 40px; height: 40px; }
  .topbar #notify-btn svg { width: 19px; height: 19px; }
  .notify-count { top: 2px; right: 2px; }
  .notify-close { display: inline-grid; width: 40px; height: 40px; }
  .notify-all { min-height: 40px; }
  .notify-row { min-height: 56px; padding: 10px 12px; }
  :where(html[data-theme="light"]) .notify-panel::backdrop { background: rgba(15, 23, 42, .35); }
  @media (prefers-reduced-motion: reduce) { .notify-panel.on { animation: none; } }

  /* People: the columns stack, one under the other, nothing scrolls sideways */
  .pmv-pp-bar { margin-bottom: 8px; }
  .pmv-pp-hint { display: none; }
  .pmv-pp-bar .btn { min-height: 40px; }
  .pmv-pp-cols { display: flex; flex-direction: column; gap: 4px; overflow: visible; padding: 0; }
  .pmv-pp-col { gap: 12px; padding: 14px 0 12px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
  .pmv-pp-col.none { background: none; }
  .pmv-pp-list { min-height: 0; }
  .pmv-pp-move { width: 40px; height: 40px; border-radius: 10px; }
  .pmv-pp-move svg { width: 18px; height: 18px; }
  .pmv-pp-ci { padding-top: 12px; font-size: 13px; line-height: 20px; }
  .pmv-pp-ci-btn { min-height: 40px; }
  .pm-checkin-mic { width: 40px; height: 40px; }
  .pm-checkin-mic svg { width: 18px; height: 18px; }
  .pm-checkin-day { margin-top: 12px; }
}