/*
 * People detail / list / dashboard / matrix — shared per-view CSS
 * (slices 4 / 5 / 6 / 7 of comms+network redesign).
 *
 * Bespoke `.ppd-*` namespace covers: contact list table, contact detail
 * shell + header + right-pane plan + sub-tabs, dashboard, matrix.
 *
 * Spec: pwa/docs/comms-network-spec.md frames 04, 05, 06, 06A–06I, 07.
 */

/* ── Shell + chrome ───────────────────────────────────────────────── */
.ppd-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  color: var(--color-on-surface);
  font-family: 'Inter', system-ui, sans-serif;
  overflow: hidden;
}
.ppd-shell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ppd-shell-title {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}
.ppd-shell-sub {
  font-size: 12px;
  color: var(--color-on-surface-variant);
}
.ppd-shell-body {
  flex: 1;
  overflow: auto;
  overscroll-behavior-y: contain;
  min-height: 0;
}

.ppd-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-md, 8px);
  background: rgba(255, 255, 255, 0.04);
  min-width: 240px;
}
.ppd-search-wrap .material-symbols-outlined {
  font-size: 16px; color: var(--color-on-surface-variant);
}
.ppd-search {
  flex: 1; background: transparent; border: 0;
  color: var(--color-on-surface);
  font-size: 13px; font-family: inherit; outline: none; min-width: 0;
}

/* ── Contact list table (frame 05) ────────────────────────────────── */
.ppd-table-wrap { padding: 0 24px 24px; }
.ppd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ppd-table thead th {
  text-align: left;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: sticky;
  top: 0;
  background: var(--color-surface);
  z-index: 1;
}
.ppd-table thead th.sortable { cursor: pointer; user-select: none; }
.ppd-table thead th.sortable:hover { color: var(--color-on-surface); }
.ppd-table thead th .sort-arrow { margin-left: 4px; font-size: 10px; }
.ppd-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.ppd-table tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
.ppd-table tbody td {
  padding: 10px;
  vertical-align: middle;
}
.ppd-table-name {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600;
}
.ppd-table-name-avatar {
  width: 28px; height: 28px; border-radius: 999px;
  background: color-mix(in oklab, var(--color-primary) 25%, var(--color-surface-container, #1e2236));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px; font-weight: 600;
}
.ppd-table-cadence,
.ppd-table-channel,
.ppd-table-meta {
  color: var(--color-on-surface-variant);
  font-size: 12px;
  text-transform: lowercase;
}
.ppd-table-numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── Contact detail (frame 06) — shell ────────────────────────────── */
.ppd-detail-shell {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0;
  height: 100%;
  background: var(--color-surface);
  color: var(--color-on-surface);
  font-family: 'Inter', system-ui, sans-serif;
  overflow: hidden;
}
@media (max-width: 768px) {
  .ppd-detail-shell { grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; }
}

.ppd-detail-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.ppd-detail-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ppd-detail-avatar {
  width: 72px; height: 72px; border-radius: 999px;
  background: color-mix(in oklab, var(--color-primary) 30%, var(--color-surface-container, #1e2236));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 24px; font-weight: 600;
  flex: 0 0 72px;
}
.ppd-detail-headline { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.ppd-detail-name {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 24px; font-weight: 700;
}
.ppd-detail-sub { font-size: 13px; color: var(--color-on-surface-variant); }
.ppd-detail-pillrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.ppd-detail-meta { font-size: 12px; color: var(--color-on-surface-variant); }

.ppd-tab-strip {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0 24px;
  overflow-x: auto;
  flex-shrink: 0;
}
.ppd-tab {
  /* Padding tightened 2026-05-15 so all 9 tabs (Activity … Calendar) fit
     visibly at 1440px width without horizontal-scroll. */
  padding: 11px 10px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--color-on-surface-variant);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.ppd-tab:hover { color: var(--color-on-surface); }
.ppd-tab.active {
  color: var(--color-on-surface);
  border-bottom-color: var(--color-primary);
}

.ppd-detail-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 20px 24px;
  min-height: 0;
}

/* ── Right-pane Plan summary ──────────────────────────────────────── */
.ppd-plan-pane {
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding: 20px;
  gap: 18px;
  min-width: 0;
}
.ppd-plan-section {
  display: flex; flex-direction: column; gap: 8px;
}
.ppd-plan-section-label {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}
.ppd-plan-cadence { font-size: 14px; font-weight: 600; }
.ppd-plan-channels-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ppd-plan-actions { display: flex; flex-direction: column; gap: 6px; }
.ppd-plan-action {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-md, 8px);
  background: rgba(255, 255, 255, 0.03);
}
.ppd-plan-action-label { font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppd-plan-action-due { font-size: 11px; color: var(--color-on-surface-variant); }

/* ── Sub-tab generic ──────────────────────────────────────────────── */
.ppd-section-h {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 16px; font-weight: 700;
  margin: 0 0 12px;
}
.ppd-section { margin-bottom: 24px; }
.ppd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ppd-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ppd-card {
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md, 8px);
  padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.ppd-card-label {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}
.ppd-card-value { font-size: 16px; font-weight: 600; }

/* ── 06A Activity heatmap (12 months × 7 weekdays) ────────────────── */
.ppd-heatmap-12m {
  display: grid;
  grid-template-columns: repeat(52, minmax(8px, 1fr));
  gap: 2px;
  padding: 8px 0;
}
.ppd-heatmap-cell {
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.05);
}
.ppd-heatmap-cell.lv1 { background: color-mix(in oklab, var(--color-primary) 25%, transparent); }
.ppd-heatmap-cell.lv2 { background: color-mix(in oklab, var(--color-primary) 45%, transparent); }
.ppd-heatmap-cell.lv3 { background: color-mix(in oklab, var(--color-primary) 70%, transparent); }
.ppd-heatmap-cell.lv4 { background: var(--color-primary); }

.ppd-activity-stream {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 12px;
}
.ppd-activity-row {
  display: grid; grid-template-columns: 90px auto 1fr;
  gap: 12px; padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 13px;
}
.ppd-activity-when { color: var(--color-on-surface-variant); font-size: 11px; }
.ppd-activity-body { color: var(--color-on-surface); overflow: hidden; text-overflow: ellipsis; }

/* ── 06B Conversations ─────────────────────────────────────────────── */
.ppd-thread-list {
  display: flex; flex-direction: column; gap: 6px;
}
.ppd-thread-card {
  padding: 12px; background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md, 8px);
  cursor: pointer; border: 0; width: 100%; text-align: left;
  color: var(--color-on-surface); font-family: inherit;
}
.ppd-thread-card:hover { background: rgba(255, 255, 255, 0.06); }
.ppd-thread-card-meta { display: flex; align-items: center; gap: 8px; }
.ppd-thread-card-subj { font-weight: 600; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppd-thread-card-preview { color: var(--color-on-surface-variant); font-size: 12px; line-height: 1.5; margin-top: 6px; }

/* ── 06C Channels ─────────────────────────────────────────────────── */
.ppd-ch-card {
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md, 8px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
}
.ppd-ch-card-addr { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--color-on-surface-variant); }
.ppd-ch-card-stats { display: flex; gap: 14px; font-size: 12px; color: var(--color-on-surface-variant); }

/* ── 06D Cadence heatmap (52 weeks) ───────────────────────────────── */
.ppd-cadence-strip { display: flex; flex-direction: column; gap: 12px; }

/* ── 06E Influence map ────────────────────────────────────────────── */
.ppd-network-svg {
  width: 100%; height: 320px; max-width: 720px; display: block;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-md, 8px);
}
.ppd-mutuals-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ppd-mutual-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md, 8px);
}

/* ── 06F Notes ─────────────────────────────────────────────────────── */
.ppd-notes-editor {
  width: 100%; min-height: 320px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md, 8px);
  padding: 14px;
  color: var(--color-on-surface);
  font-family: inherit;
  font-size: 13px; line-height: 1.6;
  resize: vertical;
  outline: none;
}
.ppd-notes-editor:focus { border-color: var(--color-primary); }

/* ── 06G Files (9-tile grid) ──────────────────────────────────────── */
.ppd-files-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.ppd-file-tile {
  aspect-ratio: 1 / 1; padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md, 8px);
  display: flex; flex-direction: column; gap: 6px;
  justify-content: space-between;
}
.ppd-file-tile-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppd-file-tile-meta { font-size: 10px; color: var(--color-on-surface-variant); }
.ppd-file-tile .material-symbols-outlined { font-size: 28px; color: var(--color-on-surface-variant); }

/* ── 06H Trips ─────────────────────────────────────────────────────── */
.ppd-trip-list { display: flex; flex-direction: column; gap: 10px; }
.ppd-trip-card {
  padding: 14px; background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md, 8px);
  display: flex; flex-direction: column; gap: 4px;
}

/* ── 06I Calendar (mini month + upcoming/past list) ───────────────── */
.ppd-cal-shell { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ppd-cal-month {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md, 8px);
  padding: 10px;
}
.ppd-cal-cell {
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: var(--color-on-surface-variant);
}
.ppd-cal-cell.today { background: var(--color-primary); color: var(--color-on-primary, #fff); }
.ppd-cal-cell.has-event { background: color-mix(in oklab, var(--color-primary) 25%, transparent); color: var(--color-on-surface); }

/* ── Frame 04 Dashboard ───────────────────────────────────────────── */
.ppd-dash-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 24px;
}
@media (max-width: 768px) { .ppd-dash-tiles { grid-template-columns: repeat(2, 1fr); } }
.ppd-dash-tile {
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md, 8px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 3px solid transparent;
}
.ppd-dash-tile[data-target="INFLUENCE"] { border-top-color: var(--tgt-influence); }
.ppd-dash-tile[data-target="MANAGE"]    { border-top-color: var(--tgt-manage); }
.ppd-dash-tile[data-target="MAINTAIN"]  { border-top-color: var(--tgt-maintain); }
.ppd-dash-tile[data-target="DETACH"]    { border-top-color: var(--tgt-detach); }
.ppd-dash-tile-label {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}
.ppd-dash-tile-count {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 28px;
  font-weight: 700;
}
.ppd-dash-tile-sub {
  font-size: 11px;
  color: var(--color-on-surface-variant);
}

.ppd-dash-section { padding: 0 24px 24px; }

/* ── Frame 07 Network Matrix ─────────────────────────────────────── */
.ppd-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.ppd-matrix-table thead th {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  padding: 8px 6px;
  text-align: center;
  position: sticky; top: 0;
  background: var(--color-surface);
  z-index: 1;
}
.ppd-matrix-table tbody td {
  padding: 0;
}
.ppd-matrix-name-cell {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--color-on-surface);
  white-space: nowrap;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}
.ppd-matrix-cell {
  width: 32px;
  height: 32px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.ppd-matrix-cell.vol-1 { background: color-mix(in oklab, var(--color-primary) 15%, transparent); }
.ppd-matrix-cell.vol-2 { background: color-mix(in oklab, var(--color-primary) 35%, transparent); }
.ppd-matrix-cell.vol-3 { background: color-mix(in oklab, var(--color-primary) 55%, transparent); }
.ppd-matrix-cell.vol-4 { background: var(--color-primary); }
.ppd-matrix-cell.drift { box-shadow: inset 0 0 0 2px var(--color-warning); }
.ppd-matrix-cell.drift-bad { box-shadow: inset 0 0 0 2px var(--color-error); }