/* <pp-header>, its menus and its right-side drawers. Shared by every page. */
:root {
  --pph-h: 64px;
  --pp-ink-0: #0d1114;      /* board / page background */
  --pp-ink-1: #151a1d;      /* header, footer */
  --pp-ink-2: #1c2124;      /* raised panels, menus */
  --pp-ink-3: #252a2d;      /* sidebar, buttons */
  --pp-ink-4: #30373b;      /* hover */
  --pp-line: #2b3236;
  --pp-text: #f4f4f4;
  --pp-text-2: #aab4ba;
  --pp-text-3: #78838a;
  --pp-blue: #34a9f7;
  --pp-blue-ink: #06131c;
  --pp-amber: #e3af4c;
  --pp-amber-deep: #6b4200;
  --pp-red: #b7282c;
  --pp-green: #0c7f3e;
  --pp-display: "Outfit", "Inter", sans-serif;
  --pp-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

pp-header, .pph {
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--pph-h);
  min-height: var(--pph-h);
  padding: 0 16px 0 14px;
  background: var(--pp-ink-1);
  color: var(--pp-text);
  font-family: var(--pp-sans);
  box-sizing: border-box;
  position: relative;
  z-index: 50;
  width: 100%;
}
.pph *, .pph-menu *, .pph-drawer * { box-sizing: border-box; }
.pph-icon { width: 18px; height: 18px; flex: none; }
.pph-icon--sm { width: 13px; height: 13px; }

.pph-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border: 0; border-radius: 9px;
  background: var(--pp-ink-3); color: var(--pp-text);
  font: 600 14px/1 var(--pp-display); letter-spacing: .01em;
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s;
}
.pph-btn:hover { background: var(--pp-ink-4); }
.pph-btn:focus-visible, .pph-mode:focus-visible, .pph-project:focus-visible, .pph-menu__item:focus-visible { outline: 2px solid var(--pp-blue); outline-offset: 2px; }
.pph-btn--icon { width: 40px; padding: 0; }
.pph-btn--small { height: 32px; padding: 0 12px; font-size: 13px; }
.pph-sidebar { width: 40px; padding: 0; }
.pph-bell { position: relative; }
.pph-badge { position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--pp-red); color: #fff; font: 700 10px/16px var(--pp-sans); }
.pph-badge[hidden] { display: none; }
.pph-btn--account { padding: 0 14px 0 6px; gap: 9px; }
.pph-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.pph-initials { display: inline-grid; place-items: center; background: #3b4a55; color: var(--pp-text); font: 700 11px/1 var(--pp-sans); }
.pph-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

.pph-brand { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.pph-project {
  display: inline-flex; align-items: center; gap: 6px; max-width: 280px;
  padding: 0; border: 0; background: none; color: var(--pp-blue); cursor: pointer;
  font: 600 11px/1.1 var(--pp-display); letter-spacing: .26em; text-transform: uppercase; text-align: left;
}
.pph-project span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pph-project--static { cursor: default; min-height: 12px; }
.pph-logo { display: block; line-height: 0; }
.pph-wordmark { height: 21px; width: auto; display: block; }
.pph-wordmark--dark { display: none; }

.pph-modes { display: flex; gap: 4px; padding: 4px; margin-left: 18px; background: var(--pp-ink-0); border-radius: 11px; }
.pph-mode {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px;
  border: 1px solid transparent; border-radius: 8px; color: var(--pp-blue); text-decoration: none;
  font: 600 14px/1 var(--pp-display); white-space: nowrap; transition: background .15s, color .15s;
}
.pph-mode:hover { background: rgba(52, 169, 247, .1); }
.pph-mode[aria-current="page"] { background: var(--pp-blue); color: var(--pp-blue-ink); }
.pph-mode--live { color: var(--pp-text); }
.pph-mode--live:hover { background: rgba(183, 40, 44, .18); }
.pph-live-dot { width: 13px; height: 13px; border-radius: 50%; background: #7a2427; flex: none; }
.pph-mode--live[aria-current="page"] { background: #4c0106; border-color: #b7282c; color: #fff; box-shadow: 0 0 0 1px rgba(183, 40, 44, .25); }
.pph-mode--live[aria-current="page"] .pph-live-dot { background: #e5373c; box-shadow: 0 0 10px rgba(229, 55, 60, .6); }

.pph-spacer { flex: 1; }
.pph-actions { display: flex; align-items: center; gap: 10px; }

/* Menus (account, share, settings, projects) */
.pph-menu {
  position: fixed; z-index: 9000; min-width: 240px; max-width: 340px; max-height: 70vh; overflow: auto; padding: 6px;
  background: var(--pp-ink-2); color: var(--pp-text); border: 1px solid var(--pp-line); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55); font-family: var(--pp-sans);
}
.pph-menu__label { padding: 10px 12px 6px; color: var(--pp-text-3); font: 700 11px/1.3 var(--pp-display); letter-spacing: .12em; text-transform: uppercase; }
.pph-menu__label b { display: block; color: var(--pp-text); font: 600 15px/1.3 var(--pp-display); letter-spacing: 0; text-transform: none; }
.pph-menu__label span { display: block; color: var(--pp-text-3); font: 400 12px/1.4 var(--pp-sans); letter-spacing: 0; text-transform: none; }
.pph-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 12px;
  border: 0; border-radius: 8px; background: none; color: var(--pp-text); text-decoration: none; text-align: left;
  font: 500 14px/1.2 var(--pp-sans); cursor: pointer;
}
.pph-menu__item:hover { background: var(--pp-ink-3); }
.pph-menu__item .pph-icon { color: var(--pp-text-2); }
.pph-menu__item[aria-checked="true"] { color: var(--pp-blue); }
.pph-menu__item[aria-checked="true"] .pph-icon { color: var(--pp-blue); }
.pph-menu__sep { height: 1px; margin: 6px 4px; background: var(--pp-line); }

/* Right-side drawers (notifications, contacts; the board's check-in uses the same pattern) */
.pph-drawer {
  position: fixed; z-index: 8000; top: 0; right: 0; bottom: 0; width: min(400px, 100vw);
  display: flex; flex-direction: column; background: var(--pp-ink-1); color: var(--pp-text);
  border-left: 1px solid var(--pp-line); box-shadow: -24px 0 60px rgba(0, 0, 0, .45);
  transform: translateX(104%); transition: transform .22s cubic-bezier(.2, .8, .2, 1); font-family: var(--pp-sans);
}
.pph-drawer.is-open { transform: none; }
.pph-drawer__head { display: flex; align-items: center; justify-content: space-between; height: var(--pph-h); padding: 0 14px 0 22px; border-bottom: 1px solid var(--pp-line); }
.pph-drawer__head h2 { margin: 0; font: 700 22px/1 var(--pp-display); }
.pph-drawer__body { flex: 1; overflow: auto; padding: 14px 16px 24px; }
.pph-drawer__tools { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.pph-search { flex: 1; height: 38px; padding: 0 12px; border: 1px solid var(--pp-line); border-radius: 9px; background: var(--pp-ink-0); color: var(--pp-text); font: 14px var(--pp-sans); }
.pph-link { border: 0; background: none; color: var(--pp-blue); font: 600 13px var(--pp-sans); cursor: pointer; padding: 4px 0; }
.pph-empty { color: var(--pp-text-3); font-size: 14px; line-height: 1.5; margin: 8px 4px; }
.pph-group { margin: 16px 4px 6px; color: var(--pp-amber); font: 700 11px/1 var(--pp-display); letter-spacing: .14em; text-transform: uppercase; }
.pph-person { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 10px; }
.pph-person:hover { background: var(--pp-ink-2); }
.pph-person__text { flex: 1; min-width: 0; }
.pph-person__text b { display: block; font: 600 15px/1.25 var(--pp-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pph-person__text small { display: block; color: var(--pp-text-3); font-size: 12px; }
.pph-person .pph-btn--icon { width: 34px; height: 34px; }
.pph-notice { display: flex; gap: 10px; width: 100%; overflow-wrap: anywhere; padding: 12px 8px; border: 0; border-radius: 10px; background: none; color: var(--pp-text); text-align: left; font: 14px/1.45 var(--pp-sans); cursor: pointer; }
.pph-notice:hover { background: var(--pp-ink-2); }
.pph-notice small { display: block; color: var(--pp-text-3); font-size: 12px; margin-top: 2px; }
.pph-notice__dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--pp-blue); flex: none; }
.pph-notice.is-read { color: var(--pp-text-2); }
.pph-notice.is-read .pph-notice__dot { background: transparent; }

/* Light theme */
[data-pp-theme="light"] .pph, [data-pp-theme="light"] pp-header { --pp-ink-1: #ffffff; --pp-ink-3: #eef1f3; --pp-ink-4: #e2e7ea; --pp-ink-0: #f3f5f6; --pp-text: #15191b; --pp-text-2: #4d585e; --pp-line: #dde3e6; border-bottom: 1px solid #e3e8eb; }
[data-pp-theme="light"] .pph-wordmark--light { display: none; }
[data-pp-theme="light"] .pph-wordmark--dark { display: block; }
[data-pp-theme="light"] .pph-menu, [data-pp-theme="light"] .pph-drawer { --pp-ink-1: #ffffff; --pp-ink-2: #ffffff; --pp-ink-3: #eef1f3; --pp-ink-0: #f3f5f6; --pp-text: #15191b; --pp-text-2: #4d585e; --pp-line: #dde3e6; }

/* Narrow screens: icons only, names hidden. */
@media (max-width: 1100px) {
  .pph-name { display: none; }
  .pph-btn--account { padding: 0 6px; }
}
@media (max-width: 820px) {
  .pph { gap: 8px; padding: 0 10px; }
  .pph-modes { margin-left: 4px; }
  .pph-mode { padding: 0 10px; font-size: 12px; }
  .pph-live-dot { display: none; }
  .pph-actions > .pph-btn--text:first-child { display: none; }
  .pph-project { max-width: 120px; }
}
@media (max-width: 560px) {
  pp-header, .pph { overflow: hidden; }
  .pph-brand { flex: 0 1 auto; }
  .pph-logo { display: none; }
  .pph-project { max-width: 90px; letter-spacing: .12em; }
  .pph-long { display: none; }
  .pph-actions { gap: 6px; }
  .pph-btn--icon, .pph-sidebar { width: 36px; height: 36px; }
  .pph-btn--account { height: 36px; }
  .pph-actions > [aria-label="Contacts"], .pph-actions > [aria-label="Share"] { display: none; }
}

/* ── People panel (pp-people.js) ───────────────────────────────────────── */
.ppl { width: min(460px, 100vw); }
.ppl-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ppl-head h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppl-back[hidden] { display: none; }
.ppl-tabs { display: flex; gap: 4px; margin: 12px 16px 0; padding: 4px; background: var(--pp-ink-0); border-radius: 11px; }
.ppl-tabs[hidden] { display: none; }
.ppl-tabs button { flex: 1; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--pp-text-2); font: 600 13px/1 var(--pp-display); cursor: pointer; }
.ppl-tabs button[aria-selected="true"] { background: var(--pp-ink-3); color: var(--pp-text); }
.ppl-add { position: relative; margin-bottom: 14px; }
.ppl-add__label { display: block; margin: 0 0 6px 2px; color: var(--pp-amber); font: 700 11px/1 var(--pp-display); letter-spacing: .14em; text-transform: uppercase; }
.ppl-add__field { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px; border: 1px solid var(--pp-line); border-radius: 11px; background: var(--pp-ink-0); color: var(--pp-text-2); }
.ppl-add__field:focus-within { border-color: var(--pp-amber); }
.ppl-add__input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--pp-text); font: 15px var(--pp-sans); }
.ppl-suggest { margin-top: 6px; padding: 4px; border: 1px solid var(--pp-line); border-radius: 11px; background: var(--pp-ink-2); box-shadow: 0 14px 40px rgba(0, 0, 0, .45); }
.ppl-suggest[hidden] { display: none; }
.ppl-suggest__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: none; color: var(--pp-text); text-align: left; cursor: pointer; font-family: var(--pp-sans); }
.ppl-suggest__item:hover, .ppl-suggest__item:focus { background: var(--pp-ink-3); outline: none; }
.ppl-suggest__item b { display: block; font: 600 14px/1.3 var(--pp-display); }
.ppl-suggest__item small { display: block; color: var(--pp-text-3); font-size: 12px; }
.ppl-suggest__new .pph-icon { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: rgba(227, 175, 76, .14); color: var(--pp-amber); }
.ppl-tools { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.ppl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.ppl-chip { height: 30px; padding: 0 11px; border: 1px solid var(--pp-line); border-radius: 15px; background: none; color: var(--pp-text-2); font: 600 12px/1 var(--pp-sans); cursor: pointer; }
.ppl-chip span { color: var(--pp-text-3); margin-left: 3px; }
.ppl-chip[aria-pressed="true"] { background: var(--pp-amber); border-color: var(--pp-amber); color: #1a1204; }
.ppl-chip[aria-pressed="true"] span { color: #4a3304; }
.ppl-row { cursor: pointer; }
.ppl-row:focus-visible { outline: 2px solid var(--pp-blue); outline-offset: 1px; }
.ppl-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ppl-badge { display: inline-flex; align-items: center; gap: 3px; height: 19px; padding: 0 7px; border-radius: 10px; background: rgba(52, 169, 247, .14); color: #8fcffb; font: 600 11px/1 var(--pp-sans); white-space: nowrap; }
.ppl-badge--amber { background: rgba(227, 175, 76, .16); color: var(--pp-amber); }
.ppl-badge--dim { background: var(--pp-ink-3); color: var(--pp-text-3); }
.ppl-num { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-right: 6px; padding: 0 5px; border-radius: 5px; background: var(--pp-ink-3); color: var(--pp-amber); font: 700 11px/1 var(--pp-display); vertical-align: 2px; }
.ppl-you { color: var(--pp-text-3); font: 500 12px var(--pp-sans); }
.ppl-card { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; }
.ppl-card h3 { margin: 0; font: 700 22px/1.15 var(--pp-display); }
.ppl-card p { margin: 3px 0 0; color: var(--pp-text-2); font-size: 14px; }
.ppl-avatar-lg { width: 56px; height: 56px; font-size: 18px; }
.ppl-reach { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ppl-reach .pph-btn { max-width: 100%; font-family: var(--pp-sans); font-weight: 500; }
.ppl-ellipsis { overflow: hidden; text-overflow: ellipsis; }
.ppl-section { padding: 14px 0; border-top: 1px solid var(--pp-line); }
.ppl-section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ppl-section h4 { margin: 0; color: var(--pp-amber); font: 700 11px/1 var(--pp-display); letter-spacing: .14em; text-transform: uppercase; }
.ppl-muted { margin: 4px 0 8px; color: var(--pp-text-3); font-size: 13px; line-height: 1.45; }
.ppl-muted a { color: var(--pp-blue); }
.ppl-lead { margin-top: 0; }
.ppl-form { display: grid; gap: 10px; }
.ppl-inline { grid-template-columns: 1fr; }
form.ppl-inline { grid-template-columns: 1fr auto; align-items: end; }
form.ppl-inline .ppl-field:first-child:not(:last-of-type) { grid-column: 1 / -1; }
.ppl-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ppl-field label { display: block; margin: 0 0 5px 2px; color: var(--pp-text-2); font: 600 12px var(--pp-sans); }
.ppl-field .pph-search { width: 100%; }
.ppl-field select.pph-search { appearance: auto; }
.ppl-check { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 10px; background: var(--pp-ink-2); cursor: pointer; }
.ppl-check input { margin-top: 3px; accent-color: var(--pp-amber); width: 16px; height: 16px; }
.ppl-check b { display: block; font: 600 14px/1.3 var(--pp-display); }
.ppl-check small { display: block; color: var(--pp-text-3); font-size: 12px; margin-top: 2px; }
.ppl-check:has(input:disabled) { cursor: default; opacity: .7; }
.ppl-invite-role[hidden] { display: none; }
.ppl-access { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.ppl-access .ppl-field { flex: 1; min-width: 180px; }
.ppl-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.pph-btn.ppl-primary { background: var(--pp-amber); color: #1a1204; }
.pph-btn.ppl-primary:hover { background: #f0c46e; }
.ppl-error { margin: 0; color: #f08487; font-size: 13px; }
.ppl-error[hidden] { display: none; }
.ppl-note { display: grid; gap: 6px; margin: 10px 0; padding: 12px; border-radius: 11px; background: var(--pp-ink-2); border: 1px solid var(--pp-line); }
.ppl-note b { font: 600 14px var(--pp-display); }
.ppl-note span { color: var(--pp-text-2); font-size: 13px; }
.ppl-note .pph-btn { justify-self: start; }
.ppl-note--ok { border-color: #047b37; background: #0d221b; }
.ppl-linkbox { display: flex; gap: 6px; }
.ppl-linkbox input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--pp-line); border-radius: 8px; background: var(--pp-ink-0); color: var(--pp-text-2); font: 12px var(--pp-sans); }
.ppl-danger { display: grid; gap: 4px; padding: 14px 0 4px; border-top: 1px solid var(--pp-line); }
.ppl-danger small { color: var(--pp-text-3); font-size: 12px; }
.pph-link.ppl-link-danger { display: inline-flex; align-items: center; gap: 6px; color: #f08487; justify-self: start; }
.ppl-toast { position: fixed; z-index: 9500; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 11px 18px; border-radius: 10px; background: #e9edef; color: #15191b; font: 600 14px var(--pp-sans); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); transition: opacity .25s, transform .25s; }
.ppl-toast.is-error { background: #b5292c; color: #fff; }
.ppl-toast.is-out { opacity: 0; transform: translate(-50%, 8px); }
html.pp-live .ppl-toast { zoom: 1.17647; }
@media (max-width: 560px) { .ppl-2 { grid-template-columns: 1fr; } }
.pph-person__text b .ppl-you, .ppl-card .ppl-you { display: inline; margin-left: 4px; }