/*
 * People-domain shared stylesheet.
 *
 * Spec: .claude/specs/people-domain-redesign/ FR-10 / FR-11 / FR-12.
 * Consumed by:
 *   pwa/views/people.js (.ppl-* class system — extracted from inline <style>)
 *   pwa/views/contacts-import.js (.cti-* class system — extracted from inline style attrs)
 *   pwa/views/groups.js (.grp-* class system — extracted from inline style attrs)
 *
 * Relationship-tone tokens (FR-10d) are defined once at :root level and
 * consumed by all 3 views. Mirrors the finance-canonical pattern of
 * `color-mix(in srgb, var(--color-X) 15%, transparent)` for tinted
 * backgrounds while keeping the saturated tone for borders + text.
 */

:root {
  --ppl-tone-family:    var(--color-success);
  --ppl-tone-partner:   var(--color-warning);
  --ppl-tone-friend:    var(--color-primary);
  --ppl-tone-colleague: var(--color-secondary, var(--color-on-surface-variant));
  --ppl-tone-contact:   var(--color-on-surface-variant);

  --ppl-tone-family-bg:    color-mix(in srgb, var(--color-success) 15%, transparent);
  --ppl-tone-partner-bg:   color-mix(in srgb, var(--color-warning) 15%, transparent);
  --ppl-tone-friend-bg:    color-mix(in srgb, var(--color-primary) 15%, transparent);
  --ppl-tone-colleague-bg: color-mix(in srgb, var(--color-secondary, var(--color-on-surface-variant)) 12%, transparent);
  --ppl-tone-contact-bg:   color-mix(in srgb, var(--color-on-surface-variant) 10%, transparent);
}

/* ─────────────────────────────────────────────────────────────────────────
 * .ppl-* — people.js (extracted from pwa/views/people.js:86-135 inline <style>)
 * ───────────────────────────────────────────────────────────────────────── */

.ppl-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface, var(--bg));
}

.ppl-header {
  padding: 16px 16px 8px;
  background: var(--color-surface, var(--bg));
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--color-outline-variant);
}

.ppl-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-snug);
}

.ppl-title {
  font-size: var(--type-title-md-size);
  font-weight: 700;
  color: var(--color-on-surface, var(--text));
}

.ppl-add-btn {
  background: var(--color-primary, var(--link));
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-full);
  width: 34px;
  height: 34px;
  font-size: var(--type-title-md-size);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

.ppl-search-wrap {
  position: relative;
  margin-bottom: var(--space-snug);
}

.ppl-search {
  width: 100%;
  padding: 9px 12px 9px 36px;
  border: 1.5px solid var(--color-outline-variant);
  border-radius: var(--radius-snug);
  background: var(--color-surface-container);
  color: var(--color-on-surface, var(--text));
  font-size: var(--type-body-md-size);
  box-sizing: border-box;
  outline: none;
}

.ppl-search:focus { border-color: var(--color-primary, var(--link)); }

.ppl-search-icon {
  position: absolute;
  left: var(--space-snug);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-on-surface-variant, var(--secondary-text));
  pointer-events: none;
}

.ppl-filter-host { margin-top: 0; }

.ppl-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 80px;
}

.ppl-week-host {
  padding: 0 12px;
  margin-top: var(--space-base);
}

/* Person card body (consumed by uxAccentCard's body slot). */
.ppl-card-body {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.ppl-card-text {
  flex: 1;
  min-width: 0;
}

.ppl-card-name {
  font-size: var(--type-body-lg-size);
  font-weight: 600;
  color: var(--color-on-surface, var(--text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ppl-card-sub {
  font-size: var(--type-data-point-size);
  color: var(--color-on-surface-variant, var(--secondary-text));
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ppl-card-host {
  padding: 0 8px 6px;
  cursor: pointer;
}

.ppl-card-host:active {
  --ux-accent-card-bg: color-mix(in srgb, var(--color-on-surface) 5%, transparent);
}

/* Detail overlay */
.ppl-detail-overlay {
  /* Mobile (<768px): full-screen sheet — chat host is also full-screen here
     so there's no rail to preserve. */
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--color-surface, var(--bg));
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}

.ppl-detail-overlay.open { transform: translateX(0); }

/* Tablet 768–1279px: constrain to the #app column so the rail stays
   visible. Chat is a slide-over at this breakpoint and won't conflict. */
@media (min-width: 768px) and (max-width: 1279px) {
  .ppl-detail-overlay {
    left: var(--app-rail-w-collapsed, 64px);
  }
  body:not(.is-rail-collapsed) .ppl-detail-overlay {
    left: var(--app-rail-w, 256px);
  }
}

/* Desktop ≥ 1280px: constrain to the #app column between the two rails so
   #appChatRail (the chatbot side panel) stays visible during contact
   inspection — review-ui 2026-05-09 finding C-1. */
@media (min-width: 1280px) {
  .ppl-detail-overlay {
    left: var(--app-rail-w, 256px);
    right: var(--app-chat-w, 360px);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1),
                left 0.18s ease-out, right 0.18s ease-out;
  }
  body.is-rail-collapsed .ppl-detail-overlay {
    left: var(--app-rail-w-collapsed, 64px);
  }
  body.is-chat-collapsed .ppl-detail-overlay {
    right: 0;
  }
}

.ppl-detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-snug);
  padding: var(--space-gutter);
  border-bottom: 1px solid var(--color-outline-variant);
  background: var(--color-surface, var(--bg));
}

.ppl-back-btn {
  background: none;
  border: none;
  color: var(--color-primary, var(--link));
  font-size: var(--type-title-sm-size);
  cursor: pointer;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.ppl-detail-title {
  flex: 1;
  font-size: var(--type-title-sm-size);
  font-weight: 600;
  color: var(--color-on-surface, var(--text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ppl-detail-edit-btn {
  background: none;
  border: none;
  color: var(--color-primary, var(--link));
  font-size: var(--type-body-md-size);
  cursor: pointer;
  padding: 4px 8px;
  font-weight: 500;
}

.ppl-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm);
}

.ppl-detail-tabs-host { margin: 12px 0 16px; }

/* Hero overlay — sits ABOVE the uxHeroGradient card so the avatar overlaps the
   gradient bottom edge for the "person card on a tinted hero" effect. */
.ppl-hero-overlay {
  display: flex;
  align-items: center;
  gap: var(--space-roomy);
  margin: -44px 0 16px;
  padding: 0 8px;
  position: relative;
  z-index: 3;
}

.ppl-hero-pref {
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 8px 12px;
}

.ppl-hero-pref-lbl {
  font-size: var(--type-label-sm-size);
  color: var(--color-on-surface-variant, var(--secondary-text));
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ppl-hero-pref-val {
  font-size: var(--type-body-md-size);
  color: var(--color-on-surface, var(--text));
  font-weight: 600;
  margin-top: 1px;
}

.ppl-detail-delete-btn {
  width: 100%;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-error-container, color-mix(in srgb, var(--color-error) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--color-error) 20%, transparent);
  color: var(--color-error);
  font-size: var(--type-body-md-size);
  font-weight: 500;
  cursor: pointer;
  margin-top: var(--space-base);
}

/* Modal-body form fields — used inside uxBottomSheet body slot. */
.ppl-form-group { margin-bottom: var(--space-sm); }

.ppl-form-label {
  font-size: var(--type-data-point-size);
  color: var(--color-on-surface-variant, var(--secondary-text));
  margin-bottom: var(--space-xs);
  display: block;
}

.ppl-form-input,
.ppl-form-select {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--color-outline-variant);
  border-radius: var(--radius-snug);
  background: var(--color-surface-container);
  color: var(--color-on-surface, var(--text));
  font-size: var(--type-body-md-size);
  box-sizing: border-box;
  outline: none;
}

.ppl-form-input:focus { border-color: var(--color-primary, var(--link)); }

/* Generic per-row hint copy — used by people.js + groups.js for empty-row
   text (e.g. "No members"). */
.ppl-hint-text {
  color: var(--color-on-surface-variant, var(--hint));
  font-size: var(--type-data-point-size);
}

/* ─────────────────────────────────────────────────────────────────────────
 * Layout + helper-fallback shells (people-domain-redesign Phase 2 sweep,
 * 2026-05-02). These classes replace 62 inline style="..." attrs across
 * pwa/views/people.js — primitive-fallback fallbacks that ran when
 * window.uxX was missing, plus repeating detail-card chrome.
 * ───────────────────────────────────────────────────────────────────────── */

/* Page wraps — .ppl-page-wrap migrated 2026-05-03 to compose with
   .base-stack from pwa/styles/base.css. Per-view class only carries
   the padding override; markup uses class="base-stack ppl-page-wrap". */
.ppl-page-wrap         { padding:var(--space-gutter); }
.ppl-page-wrap-tight   { padding:var(--space-gutter); }
.ppl-tabs-host-spaced  { margin-top:var(--space-base); }

/* Title row meta — DELETED 2026-05-02 with PwaPageHeader migration.
   `.ppl-title-row-flush` + `.ppl-title-meta` were the redundant
   overview-internal title row (`X contacts · Y follow-ups due`); that
   line is now the PwaPageHeader subtitle. */
/* Grid containers — migrated 2026-05-03 to .base-grid-{cards,stats}
   in pwa/styles/base.css. Markup uses base classes directly. */

/* Search wrap inner refinements (positions matched by .ppl-search and .ppl-search-icon already) */
.ppl-search-wrap-spaced { margin-bottom:var(--space-sm); }
.ppl-week-host-spaced   { margin-bottom:var(--space-sm); }
.ppl-filter-host-spaced { margin-bottom:var(--space-sm); }

/* Helper-fallback shells (used when ux-primitives.js is absent) */
.ppl-empty-shell {
  text-align:center; color:var(--color-on-surface-variant);
  padding:48px 24px; font-size:var(--type-body-md-size);
}
.ppl-skeleton-row {
  height:var(--ppl-skel-h, 72px);
  margin:6px 16px; border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--color-on-surface) 8%, transparent);
}
.ppl-relpill-muted {
  background:color-mix(in srgb, var(--color-on-surface-variant) 18%, transparent);
  color:var(--color-on-surface-variant);
  padding:2px 8px; border-radius:var(--radius-default); font-size:var(--type-label-sm-size); font-weight:600;
}
.ppl-accent-card-fallback {
  background:var(--color-surface-container-high);
  border-left:4px solid var(--color-primary);
  padding:var(--space-sm); border-radius:var(--radius-md); margin-bottom:var(--space-tight);
}
.ppl-hero-card-fallback {
  background:var(--color-primary-container);
  border-radius:var(--radius-wide); padding:var(--space-md); margin-bottom:var(--space-gutter);
  color:var(--color-on-primary-container);
}
.ppl-hero-card-fallback-value {
  font-size:var(--type-headline-md-size); font-weight:700;
}
.ppl-collapse-card-fallback {
  background:var(--color-surface-container-high);
  border-radius:var(--radius-md); margin-top:var(--space-snug); overflow:hidden;
}
.ppl-collapse-card-fallback-title {
  padding:10px 12px; font-size:var(--type-label-caps-size); font-weight:600;
  color:var(--color-on-surface-variant);
  text-transform:uppercase; letter-spacing:.3px;
}
.ppl-collapse-card-fallback-body {
  padding:0 12px 12px;
}
.ppl-agenda-fallback {
  padding:10px 14px; border-top:1px solid var(--color-outline-variant);
}
.ppl-agenda-fallback-meta {
  font-size:var(--type-label-caps-size); color:var(--color-on-surface-variant);
}

/* Pattern-card fallback (the _patternCard helper when window.card is absent).
   Base shape migrated 2026-05-03 to .base-card; per-view class is now
   used only as a hook for the child selectors below. Markup uses
   class="base-card" directly. */
.ppl-pattern-card-fallback h3 { margin:0 0 8px; }
.ppl-pattern-card-fallback-sub  { font-size:var(--type-data-point-size); color:var(--color-on-surface-variant); }
.ppl-pattern-card-fallback-body { margin-top:var(--space-sm); }

/* Detail page — Interactions / Network repeating stat-card chrome
   (was inlined 5× in people.js renderDetail) */
.ppl-stat-card {
  background:var(--color-surface-container);
  border:1px solid var(--color-outline-variant);
  border-radius:var(--radius-md);
  padding:14px 16px;
  margin-bottom:var(--space-sm);
}
.ppl-stat-card-flush { padding:0 12px; margin-bottom:0; }
.ppl-stat-card-padded-empty { padding:32px 0; }
.ppl-stat-card-label {
  font-size:var(--type-label-sm-size); text-transform:uppercase; letter-spacing:0.06em;
  color:var(--color-on-surface-variant); margin-bottom:var(--space-tight);
}
.ppl-stat-card-label--gap-lg { margin-bottom:var(--space-base); }
.ppl-stat-card-row     { display:flex; gap:var(--space-gutter); flex-wrap:wrap; }
.ppl-stat-card-strength-row {
  display:flex; align-items:center; gap:var(--space-sm); margin-bottom:var(--space-tight);
}
.ppl-stat-card-strength-value {
  font-size:var(--type-headline-md-size); font-weight:700; color:var(--color-on-surface);
}
.ppl-stat-card-mini-label {
  font-size:var(--type-label-caps-size); color:var(--color-on-surface-variant);
}
.ppl-stat-card-mini-value     {
  font-size:var(--type-body-md-size); color:var(--color-on-surface);
}
.ppl-stat-card-mini-value--lg {
  font-size:var(--type-title-sm-size); font-weight:600; color:var(--color-on-surface);
}
.ppl-stat-card-meta {
  font-size:var(--type-label-caps-size); color:var(--color-on-surface-variant);
}
.ppl-stat-card-meta-spaced  { margin-top:var(--space-hairline); }
.ppl-stat-card-meta-spaced4 { margin-top:var(--space-xs); }
.ppl-stat-card-community-row {
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm);
}
.ppl-stat-card-action {
  padding:6px 12px;
  border:1px solid var(--color-outline-variant);
  background:transparent; color:var(--color-primary);
  border-radius:var(--radius-default); font-size:var(--type-label-caps-size); font-weight:600; cursor:pointer;
}

/* Detail-tab-strip primitive-fallback (was inlined active-state branches) */
.ppl-detail-tabs-fallback {
  display:flex; gap:var(--space-xs);
  background:var(--color-surface-container);
  border-radius:var(--radius-snug); padding:3px;
}
.ppl-detail-tabs-fallback-btn {
  flex:1; padding:6px 8px; border:none; background:transparent;
  border-radius:var(--radius-default); font-size:var(--type-body-md-size); font-weight:500; cursor:pointer;
}
.ppl-detail-tabs-fallback-btn[data-ppl-active="true"] {
  background:var(--color-surface);
}

/* Modal fallbacks (uxBottomSheet absent) — bottom-sheet + center-modal */
.ppl-modal-scrim {
  position:fixed; inset:0; z-index:200;
  background:color-mix(in srgb, var(--color-on-surface) 45%, transparent);
  display:flex; align-items:flex-end;
}
.ppl-modal-scrim--center {
  z-index:300;
  background:color-mix(in srgb, var(--color-on-surface) 50%, transparent);
  align-items:center; justify-content:center; padding:var(--space-wide);
}
.ppl-modal-sheet {
  width:100%;
  background:var(--color-surface);
  border-radius:20px 20px 0 0;
  padding:20px 16px 32px; max-height:85vh; overflow-y:auto;
}
.ppl-modal-card {
  background:var(--color-surface);
  border-radius:var(--radius-roomy); padding:var(--space-wide);
  max-width:320px; width:100%; text-align:center;
}
.ppl-modal-title {
  font-size:var(--type-title-sm-size); font-weight:700;
  color:var(--color-on-surface); margin-bottom:var(--space-gutter);
}
.ppl-modal-title--small {
  font-size:var(--type-title-sm-size); margin-bottom:var(--space-base);
}
.ppl-modal-buttons   { display:flex; gap:var(--space-snug); margin-top:var(--space-gutter); }
.ppl-modal-confirm-msg {
  font-size:var(--type-body-md-size); color:var(--color-on-surface-variant);
  margin-bottom:18px; line-height:1.4;
}
.ppl-confirm-banner {
  font-size:var(--type-body-md-size); color:var(--color-on-surface-variant); line-height:1.4;
}

/* Destructive button overrride for delete-confirm (was inline el.style.X = "...") */
.ppl-destructive-confirm-btn {
  background:var(--color-error);
  color:var(--color-on-error, var(--color-on-primary));
}

/* ─────────────────────────────────────────────────────────────────────────
 * .cti-* — contacts-import.js
 * Spec FR-06 / FR-09 — extracted from inline style="..." attrs.
 * ───────────────────────────────────────────────────────────────────────── */

.cti-root {
  padding: var(--space-gutter);
  max-width: 720px;
  margin: 0 auto;
}

/* .cti-section base shape migrated 2026-05-03 to .base-card; per-view
   rule keeps only the bottom-margin override. Markup composes:
   class="base-card cti-section". */
.cti-section { margin-bottom: var(--space-sm); }

.cti-section-title {
  font-size: var(--type-body-lg-size);
  font-weight: 600;
  color: var(--color-on-surface);
  margin: 0 0 8px;
}

.cti-section-sub {
  font-size: var(--type-data-point-size);
  color: var(--color-on-surface-variant, var(--hint));
  margin: 0 0 12px;
}

.cti-empty-state {
  text-align: center;
  padding: 24px 12px;
}

.cti-empty-icon {
  font-size: 40px;
  margin-bottom: var(--space-sm);
  color: var(--color-on-surface-variant);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cti-success-icon {
  font-size: 36px;
  margin-bottom: var(--space-base);
  color: var(--color-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cti-error-line {
  color: var(--color-error);
  margin-bottom: var(--space-base);
  display: flex;
  align-items: center;
  gap: var(--space-tight);
}

.cti-error-details {
  margin-bottom: var(--space-sm);
}

.cti-error-summary {
  cursor: pointer;
  color: var(--color-warning);
}

.cti-error-pre {
  background: var(--color-surface, var(--bg));
  padding: var(--space-base);
  border-radius: var(--radius-tight);
  font-size: var(--type-label-sm-size);
  max-height: 160px;
  overflow: auto;
}

.cti-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--space-base);
  margin-bottom: var(--space-sm);
}

.cti-stat-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-snug);
  padding: 10px 12px;
  text-align: center;
}

.cti-stat-label {
  font-size: var(--type-label-sm-size);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}

.cti-stat-value {
  font-size: var(--type-title-sm-size);
  font-weight: 700;
  color: var(--color-on-surface);
  margin-top: var(--space-hairline);
}

.cti-actions {
  display: flex;
  gap: var(--space-base);
  justify-content: flex-end;
  margin-top: var(--space-sm);
  flex-wrap: wrap;
}

.cti-btn {
  padding: 10px 16px;
  border-radius: var(--radius-snug);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface);
  color: var(--color-on-surface);
  font-size: var(--type-body-md-size);
  font-weight: 500;
  cursor: pointer;
}

.cti-btn.primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

.cti-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.cti-stepper {
  display: flex;
  gap: var(--space-base);
  margin-bottom: var(--space-gutter);
}

.cti-step {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  font-size: var(--type-label-sm-size);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  border-radius: var(--radius-default);
  background: color-mix(in srgb, var(--color-on-surface) 4%, transparent);
}

.cti-step.active {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.cti-step.done {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 14%, transparent);
}

.cti-page-title {
  margin: 0 0 4px;
  font-size: var(--type-title-md-size);
  color: var(--color-on-surface);
}

.cti-stepper-host {
  margin-bottom: var(--space-gutter);
}

.cti-stats-host {
  margin-bottom: var(--space-gutter);
}

.cti-dropzone {
  border: 2px dashed var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 48px 24px;
  text-align: center;
  background: var(--color-surface-container);
  transition: background-color 0.12s, border-color 0.12s;
}

.cti-dropzone.hover {
  background: var(--color-surface);
  border-color: var(--color-primary);
}

.cti-file-label {
  display: inline-block;
  padding: 10px 16px;
  font-size: var(--type-body-md-size);
}

/* .cti-file-input removed 2026-05-03 — markup migrated to global .hidden. */

.cti-esc-hint {
  margin: 12px 0 0;
  text-align: center;
}

.cti-kbd {
  background: var(--color-surface-container);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: ui-monospace, monospace;
}

.cti-loading {
  padding: var(--space-md);
  text-align: center;
  color: var(--color-on-surface-variant, var(--hint));
}

/* ─────────────────────────────────────────────────────────────────────────
 * .grp-* — groups.js
 * Spec FR-09a — extracted from inline style="..." attrs.
 * ───────────────────────────────────────────────────────────────────────── */

.grp-page {
  padding: 16px 16px 8px;
}

.grp-page-title {
  margin: 0;
  font-size: var(--type-title-md-size);
  color: var(--color-on-surface, var(--fg));
}

.grp-page-sub {
  color: var(--color-on-surface-variant, var(--hint));
  font-size: var(--type-data-point-size);
  margin: 4px 0 12px;
}

.grp-row {
  cursor: pointer;
  padding: 0 12px;
}

.grp-row.selected {
  background: var(--color-surface-container);
}

.grp-card-body {
  display: flex;
  align-items: center;
  gap: var(--space-base);
  color: var(--color-on-surface, var(--fg));
  font-weight: 600;
  font-size: var(--type-body-md-size);
}

.grp-card-meta {
  color: var(--color-on-surface-variant, var(--hint));
  font-size: var(--type-label-caps-size);
  margin-top: var(--space-hairline);
}

.grp-detail {
  border-top: 1px solid var(--color-outline-variant);
  padding: var(--space-gutter);
}

.grp-detail-name {
  margin: 0 0 4px;
  font-size: var(--type-title-sm-size);
  color: var(--color-on-surface, var(--fg));
}

.grp-detail-desc {
  color: var(--color-on-surface-variant, var(--hint));
  font-size: var(--type-data-point-size);
  margin: 0 0 12px;
}

.grp-detail-spacer {
  margin-bottom: var(--space-sm);
}

.grp-loading,
.grp-error {
  padding: var(--space-md);
  text-align: center;
  color: var(--color-on-surface-variant, var(--hint));
}

.grp-error {
  color: var(--color-error);
}

.grp-empty {
  padding: 32px 16px;
  text-align: center;
}

.grp-empty-icon {
  font-size: 32px;
  margin-bottom: var(--space-base);
  color: var(--color-on-surface-variant);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.grp-empty-title {
  font-size: var(--type-title-sm-size);
  margin: 0 0 4px;
  color: var(--color-on-surface);
}

.grp-empty-body {
  color: var(--color-on-surface-variant, var(--hint));
  font-size: var(--type-body-md-size);
  margin: 0;
}

.grp-member-row {
  padding: 8px 14px;
  border-top: 1px solid var(--color-outline-variant);
  display: flex;
  align-items: center;
  gap: var(--space-base);
}

.grp-member-name {
  flex: 1;
  font-size: var(--type-body-md-size);
  color: var(--color-on-surface, var(--fg));
}

.grp-member-meta {
  color: var(--color-on-surface-variant, var(--hint));
  font-size: var(--type-label-sm-size);
}

.grp-member-empty {
  padding: 8px 14px;
  color: var(--color-on-surface-variant, var(--hint));
  font-size: var(--type-data-point-size);
}

.grp-rule-pre {
  background: var(--color-surface-container-high, var(--bg2));
  padding: var(--space-sm);
  border-radius: var(--radius-default);
  overflow-x: auto;
  font-size: var(--type-label-sm-size);
  margin: 0;
  color: var(--color-on-surface);
}

/* ── Two-pane Chatline (Overview tab, 2026-05-03) ───────────────────
   Left pane: contacts sorted by most-recent interaction across all
   channels. Right pane: full cross-channel chat history for the
   selected contact. Composes with .base-card for the outer shell. */
.ppl-chatline-shell {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
  min-height: 480px;
}
@media (max-width: 768px) {
  /* Mobile: stack panes; left list scrolls, right pane below it. */
  .ppl-chatline-shell { grid-template-columns: 1fr; }
}

/* Left pane — chatline list */
.ppl-chatline-list {
  border-right: 1px solid var(--color-outline-variant);
  overflow-y: auto;
  max-height: 540px;
}
@media (max-width: 768px) {
  .ppl-chatline-list { border-right: none; border-bottom: 1px solid var(--color-outline-variant); max-height: 280px; }
}
.ppl-chatline-row {
  display: flex;
  align-items: center;
  gap: var(--space-snug);
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-outline-variant);
  cursor: pointer;
  transition: background 0.12s ease;
}
.ppl-chatline-row:last-child { border-bottom: none; }
.ppl-chatline-row:hover {
  background: color-mix(in srgb, var(--color-on-surface) 4%, transparent);
}
.ppl-chatline-row--active {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.ppl-chatline-row--active:hover {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
}
.ppl-chatline-row-icon {
  flex-shrink: 0;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ppl-chatline-row-text { flex: 1; min-width: 0; }
.ppl-chatline-row-name {
  font-size: var(--type-body-md-size);
  font-weight: 600;
  color: var(--color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ppl-chatline-row-summary {
  font-size: var(--type-label-caps-size);
  color: var(--color-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: var(--space-hairline);
}
.ppl-chatline-row-meta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xs);
}
.ppl-chatline-row-time {
  font-size: var(--type-label-sm-size);
  color: var(--color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}
.ppl-chatline-row-count {
  font-size: var(--type-label-sm-size);
  font-weight: 600;
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
  border-radius: var(--radius-snug);
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
}

/* Right pane — full history */
.ppl-chatline-history {
  overflow-y: auto;
  max-height: 540px;
  padding: 16px 18px;
}
@media (max-width: 768px) {
  .ppl-chatline-history { max-height: none; }
}
.ppl-chatline-history-head {
  margin-bottom: var(--space-roomy);
  padding-bottom: var(--space-snug);
  border-bottom: 1px solid var(--color-outline-variant);
}
.ppl-chatline-history-name {
  font-size: var(--type-title-sm-size);
  font-weight: 700;
  color: var(--color-on-surface);
}
.ppl-chatline-history-rel {
  font-size: var(--type-label-caps-size);
  color: var(--color-on-surface-variant);
  margin-top: var(--space-hairline);
  text-transform: capitalize;
}
.ppl-chatline-history-open {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
  border-radius: var(--radius-default);
  padding: 6px 12px;
  font-size: var(--type-label-caps-size);
  font-weight: 600;
  cursor: pointer;
}
.ppl-chatline-history-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-roomy);
}
.ppl-chatline-msg {
  display: flex;
  gap: var(--space-sm);
  padding: 10px 12px;
  background: var(--color-surface-container);
  border-radius: var(--radius-snug);
  border-left: 3px solid var(--color-primary);
}
.ppl-chatline-msg-icon {
  flex-shrink: 0;
  width: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--space-hairline);
}
.ppl-chatline-msg-text { flex: 1; min-width: 0; }
.ppl-chatline-msg-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-base);
  margin-bottom: var(--space-xs);
}
.ppl-chatline-msg-channel {
  font-size: var(--type-label-sm-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-primary);
}
.ppl-chatline-msg-time {
  font-size: var(--type-label-sm-size);
  color: var(--color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}
.ppl-chatline-msg-body {
  font-size: var(--type-data-point-size);
  color: var(--color-on-surface);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.ppl-chatline-empty {
  font-size: var(--type-data-point-size);
  color: var(--color-on-surface-variant);
  padding: var(--space-md);
  text-align: center;
}

/* ── Intelligence ticker (Directory top, 2026-05-03) ──────────────────
   Horizontal-scrolling strip of recent person-level signals: profile
   updates, follow-up overdue items, news mentions (when wired). */
.ppl-intel-ticker {
  display: flex;
  align-items: center;
  gap: var(--space-roomy);
  padding: 10px 14px;
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  overflow: hidden;
}
.ppl-intel-label {
  flex-shrink: 0;
  font-size: var(--type-label-caps-size);
  font-weight: 700;
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ppl-intel-track {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.ppl-intel-track::-webkit-scrollbar { display: none; }
.ppl-intel-item {
  font-size: var(--type-data-point-size);
  color: var(--color-on-surface);
  flex-shrink: 0;
}
.ppl-intel-item b {
  font-weight: 700;
  color: var(--color-on-surface);
  margin-right: var(--space-xs);
}
.ppl-intel-sep {
  color: var(--color-on-surface-variant);
  font-size: var(--type-data-point-size);
}
.ppl-intel-ticker-empty .ppl-intel-empty-msg {
  font-size: var(--type-data-point-size);
  color: var(--color-on-surface-variant);
  font-style: italic;
}

/* ── Rich person card (Directory grid, 2026-05-03) ────────────────────
   3-zone vertical card: head (avatar + name + role) → AI insight →
   relationship strength bar. Composes with .base-card for the shell. */
.ppl-pcard-grid {
  /* extends .base-grid-cards — no overrides needed, just a hook for
     potential per-tab tuning (e.g. tighter mobile gap). */
}
.ppl-pcard {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-roomy);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  border-left: 3px solid var(--color-outline-variant);
}
.ppl-pcard:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-on-surface) 14%, transparent);
}
.ppl-pcard-accent-success { border-left-color: var(--color-success); }
.ppl-pcard-accent-warning { border-left-color: var(--color-warning); }
.ppl-pcard-accent-primary { border-left-color: var(--color-primary); }
.ppl-pcard-accent-secondary { border-left-color: var(--color-secondary, var(--color-on-surface-variant)); }
.ppl-pcard-accent-error { border-left-color: var(--color-error); }
.ppl-pcard-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.ppl-pcard-avatar { flex-shrink: 0; }
.ppl-pcard-ident { flex: 1; min-width: 0; }
.ppl-pcard-name {
  font-size: var(--type-body-lg-size);
  font-weight: 700;
  color: var(--color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ppl-pcard-role {
  font-size: var(--type-label-caps-size);
  color: var(--color-on-surface-variant);
  margin-top: var(--space-hairline);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* AI Insight callout */
.ppl-pcard-insight {
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  border-radius: var(--radius-snug);
  padding: 10px 12px;
}
.ppl-pcard-insight-pill {
  display: inline-block;
  font-size: var(--type-label-sm-size);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  margin-right: var(--space-base);
  vertical-align: middle;
}
.ppl-pcard-insight-text {
  font-size: var(--type-data-point-size);
  color: var(--color-on-surface);
  line-height: 1.45;
}

/* Relationship strength row + bar */
.ppl-pcard-strength {
  display: flex;
  flex-direction: column;
  gap: var(--space-tight);
}
/* .ppl-pcard-strength-row migrated 2026-05-03 to .base-row-between
   (pwa/styles/base.css). Markup composes class="base-row-between
   ppl-pcard-strength-row" — per-view rule kept as a hook for any
   future tuning. */
.ppl-pcard-strength-label {
  font-size: var(--type-label-caps-size);
  color: var(--color-on-surface-variant);
  font-weight: 500;
}
.ppl-pcard-strength-value {
  font-size: var(--type-label-caps-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ppl-pcard-strength-strong   { color: var(--color-success); }
.ppl-pcard-strength-active   { color: var(--color-primary); }
.ppl-pcard-strength-fading   { color: var(--color-warning); }
.ppl-pcard-strength-dormant  { color: var(--color-on-surface-variant); }

.ppl-pcard-strength-bar {
  width: 100%;
  height: 6px;
  background: color-mix(in srgb, var(--color-on-surface) 6%, transparent);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.ppl-pcard-strength-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}
.ppl-pcard-strength-fill-strong   { background: var(--color-success); }
.ppl-pcard-strength-fill-active   { background: var(--color-primary); }
.ppl-pcard-strength-fill-fading   { background: var(--color-warning); }
.ppl-pcard-strength-fill-dormant  { background: var(--color-on-surface-variant); }

/* ── Chatline quick-action toolbar (PWA-first interaction, 2026-05-03) ─
   Above the per-message timeline. WhatsApp send + log call/meeting/note.
   Each button POSTs to a /api/people/:id/* endpoint so the same flow
   works whether laptop is online (local SQLite + cloud proxy for WA)
   or offline (service-worker queues the request). */
.ppl-chatline-actions {
  flex-wrap: wrap;
  margin: 12px 0;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-outline-variant);
}
.ppl-chatline-action {
  padding: 6px 12px;
  border-radius: var(--radius-default);
  font-size: var(--type-label-caps-size);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container);
  color: var(--color-on-surface);
  transition: background 0.12s ease;
}
.ppl-chatline-action:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.ppl-chatline-action-wa {
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 25%, transparent);
  color: var(--color-success);
}
.ppl-chatline-action-wa:hover {
  background: color-mix(in srgb, var(--color-success) 20%, transparent);
}

/* ─────────────────────────────────────────────────────────────────────────
 * review-ui 2026-05-09 — contact detail H-2 (parsed handles) +
 * C-2 (cross-domain associations) + L-2 (tel/mailto links)
 * ───────────────────────────────────────────────────────────────────────── */

/* L-2: clickable contact links inside key-value rows. */
.ppl-link {
  color: var(--color-primary, var(--link));
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
.ppl-link:hover { border-bottom-style: solid; }

/* H-2: parsed social handles strip — chip row above the bio prose. */
.ppl-handles-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 4px 0 12px;
}
.ppl-handle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--color-outline-variant);
  border-radius: 999px;
  background: var(--color-surface-container);
  color: var(--color-on-surface, var(--text));
  text-decoration: none;
  font-size: 12px;
  transition: background 120ms ease, border-color 120ms ease;
}
.ppl-handle:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface-container));
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-outline-variant));
}
.ppl-handle-icon {
  font-size: 16px;
  color: var(--color-on-surface-variant);
}
.ppl-handle-label {
  font-weight: 500;
  color: var(--color-on-surface-variant);
}
.ppl-handle-value {
  font-family: var(--type-mono-family, ui-monospace, monospace);
  font-weight: 600;
}

/* C-2: association rows inside collapsible domain sections. */
.ppl-assoc-row {
  display: block;
  padding: 10px 12px;
  border-bottom: 1px dashed color-mix(in srgb, var(--color-on-surface) 6%, transparent);
  text-decoration: none;
  color: var(--color-on-surface, var(--text));
  transition: background 120ms ease;
}
.ppl-assoc-row:last-of-type { border-bottom: none; }
.ppl-assoc-row[href]:hover {
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
}
.ppl-assoc-row-title {
  font-size: 13px;
  font-weight: 500;
}
.ppl-assoc-row-sub {
  font-size: 11px;
  color: var(--color-on-surface-variant);
  margin-top: 2px;
}
.ppl-assoc-more {
  display: block;
  text-align: right;
  padding: 8px 12px 4px;
  font-size: 12px;
  color: var(--color-primary, var(--link));
  text-decoration: none;
  font-weight: 500;
}
.ppl-assoc-more:hover { text-decoration: underline; }