/* People Intelligence Module — per-person file page.
   Editorial magazine aesthetic: Instrument Serif display, DM Sans body,
   brand tokens (navy #1B2B5E, orange #E8751A, cream #f5f0e8).
   All rules scoped to .pi-root (or #people-intel-view) to avoid clashes
   with the main app shell styles in style.css.
*/

#people-intel-view { padding: 24px; background: #f5f0e8; }

.pi-loading, .pi-error {
  padding: 80px 20px;
  text-align: center;
  color: #7a6e5c;
  font-style: italic;
}
.pi-error { color: #c63d3d; }

.pi-root {
  max-width: 880px;
  margin: 0 auto;
  font-family: 'DM Sans', system-ui, sans-serif;
  color: #1B2B5E;
  line-height: 1.55;
}

.pi-root * { box-sizing: border-box; }

/* -------- Eyebrow / masthead -------- */
.pi-eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid #1B2B5E;
  padding-bottom: 10px;
  margin-bottom: 24px;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pi-wordmark {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  text-transform: none;
  letter-spacing: 0;
}
.pi-eyebrow-meta { color: #7a6e5c; font-size: 11px; }

/* -------- Hero -------- */
.pi-hero {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 32px;
  align-items: end;
  margin: 40px 0 32px;
}
.pi-hero-video { align-self: stretch; }
.pi-video-frame {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, #1B2B5E 0%, #E8751A 100%);
  border-radius: 2px;
  overflow: hidden;
  text-decoration: none;
  color: white;
}
.pi-video-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pi-video-missing { background: linear-gradient(135deg, #1B2B5E 0%, #E8751A 100%); }
.pi-video-badge {
  position: absolute; top: 12px; left: 12px;
  font-size: 10px; letter-spacing: 0.15em;
  background: rgba(255,255,255,0.15); backdrop-filter: blur(6px);
  padding: 4px 8px;
}
.pi-video-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px; color: white; opacity: 0.85;
}

.pi-hero-name h1.pi-name {
  font-family: 'Instrument Serif', serif;
  font-size: 64px;
  font-weight: 400;
  line-height: 1.0;
  margin: 0 0 18px;
}
.pi-name em { font-style: italic; font-weight: 400; }
.pi-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pi-pill {
  font-size: 12px;
  padding: 5px 11px;
  background: white;
  border: 1px solid #d0c6b8;
  border-radius: 20px;
  letter-spacing: 0.02em;
}
.pi-topcat {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 16px;
  color: #7a6e5c;
}

/* -------- Ledger -------- */
.pi-ledger {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: 1px solid #d0c6b8;
  border-bottom: 1px solid #d0c6b8;
  padding: 18px 0;
  margin: 24px 0 32px;
}
.pi-cell {
  display: flex; flex-direction: column; align-items: center;
  border-right: 1px solid #d0c6b8;
  text-align: center;
}
.pi-cell:last-child { border-right: none; }
.pi-cell-v {
  font-family: 'Instrument Serif', serif;
  font-size: 28px;
  line-height: 1;
}
.pi-cell-l {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; color: #7a6e5c; margin-top: 6px;
}

/* -------- Current focus -------- */
.pi-focus {
  background: white;
  border-left: 3px solid #E8751A;
  padding: 16px 18px;
  margin-bottom: 40px;
}
.pi-focus-eyebrow {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #7a6e5c; margin-bottom: 8px;
}
.pi-focus-text {
  font-family: 'Instrument Serif', serif;
  font-size: 20px;
  line-height: 1.4;
  outline: none;
}
.pi-focus-text[contenteditable="true"] { cursor: text; min-height: 1.4em; }
.pi-focus-text[contenteditable="true"]:focus { background: #fffcf5; outline: none; }
.pi-focus-text[contenteditable="true"]:empty:before {
  content: attr(data-placeholder);
  color: #a6917a;
  font-style: italic;
}
.pi-focus-stale .pi-focus-nudge { color: #c58a2b; font-style: italic; }

/* -------- Sections -------- */
.pi-section {
  padding: 32px 0;
  border-top: 1px solid #d0c6b8;
}
.pi-sec-title {
  font-family: 'Instrument Serif', serif;
  font-size: 24px;
  font-weight: 400;
  margin: 0 0 16px;
  letter-spacing: -0.005em;
}

/* Sections that aren't live yet — heading greys down, body renders as a
   visibly dimmed hashed block so no one mistakes the placeholder for data. */
.pi-sec-pending {
  color: #a6917a !important;
}
.pi-pending-block {
  padding: 28px 24px;
  background: repeating-linear-gradient(
    135deg,
    rgba(208, 198, 184, 0.18) 0 10px,
    transparent 10px 20px
  );
  border: 1px dashed #d0c6b8;
  text-align: center;
  color: #a6917a;
  font-style: italic;
}
.pi-pending-block .pi-chip {
  background: white;
  color: #7a6e5c;
  font-style: normal;
}
.pi-prose p {
  font-family: 'Instrument Serif', serif;
  font-size: 18px;
  line-height: 1.55;
  margin: 0 0 12px;
}
.pi-muted { color: #7a6e5c; font-size: 13px; font-style: italic; }

.pi-sources {
  margin-top: 14px;
  font-size: 11px;
  color: #7a6e5c;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pi-src { color: #E8751A; text-decoration: none; margin: 0 2px; }
.pi-src:hover { text-decoration: underline; }

/* -------- Capacity: util bars + radar -------- */
.pi-capacity { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.pi-util-label { font-size: 11px; color: #7a6e5c; margin-bottom: 10px; letter-spacing: 0.05em; }
.pi-util-bars {
  display: flex; gap: 8px; align-items: flex-end;
  height: 140px; padding-top: 10px;
  border-bottom: 1px solid #d0c6b8;
}
.pi-bar {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  height: 100%; position: relative;
}
.pi-bar-fill {
  width: 70%; background: #1B2B5E; margin-top: auto;
  opacity: 0.5; transition: opacity 0.2s;
}
.pi-bar-in-band { background: #E8751A; opacity: 1; }
.pi-bar-label { font-size: 10px; color: #7a6e5c; margin-top: 6px; letter-spacing: 0.04em; }
.pi-bar-pct { font-size: 10px; color: #1B2B5E; margin-top: 2px; }

.pi-radar { display: flex; flex-direction: column; align-items: center; }
#pi-radar-canvas { display: block; }

/* -------- Projects -------- */
.pi-projects { list-style: none; padding: 0; margin: 0; }
.pi-project {
  display: flex; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid #eee5d5;
}
.pi-project:last-child { border-bottom: none; }
.pi-project-name { font-family: 'Instrument Serif', serif; font-size: 18px; }
.pi-project-meta { color: #7a6e5c; font-size: 13px; }

/* -------- Values scaffold -------- */
.pi-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.pi-values-area {
  background: white; border: 1px solid #d0c6b8; padding: 14px;
}
.pi-values-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pi-values-head strong { font-family: 'Instrument Serif', serif; font-size: 18px; }
.pi-values-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pi-value-pill {
  font-size: 11px; padding: 3px 8px; border: 1px solid #d0c6b8;
  border-radius: 12px; color: #7a6e5c;
}
.pi-value-primary { background: #1B2B5E; color: white; border-color: #1B2B5E; }
.pi-chip {
  font-size: 10px; padding: 2px 6px; background: #eee5d5;
  border-radius: 10px; letter-spacing: 0.05em;
}

/* -------- Heatmap -------- */
.pi-heatmap {
  display: grid;
  grid-template-columns: repeat(45, 1fr);
  gap: 2px;
  margin-bottom: 10px;
}
.pi-heat {
  aspect-ratio: 1; min-height: 10px; background: #eee5d5; border-radius: 1px;
}
.pi-heat-1 { background: #d7c6b0; }
.pi-heat-2 { background: #c49a6c; }
.pi-heat-3 { background: #E8751A; }
.pi-heat-4 { background: #1B2B5E; }

/* -------- Tables -------- */
.pi-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.pi-table th, .pi-table td {
  text-align: left; padding: 10px 8px;
  border-bottom: 1px solid #eee5d5;
}
.pi-table th {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: #7a6e5c; font-weight: 500;
}
.pi-table .pi-num { text-align: right; font-variant-numeric: tabular-nums; }
.pi-faster { color: #2f7d3a; }
.pi-slower { color: #c63d3d; }

/* -------- Delivery stats -------- */
.pi-delivery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 12px; }
.pi-deliv-stat { display: flex; flex-direction: column; align-items: flex-start; }
.pi-stat-v { font-family: 'Instrument Serif', serif; font-size: 40px; line-height: 1; }
.pi-stat-l { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #7a6e5c; margin-top: 6px; }

/* -------- Milestones -------- */
.pi-milestones { display: flex; flex-wrap: wrap; gap: 8px; }
.pi-milestone {
  font-family: 'Instrument Serif', serif;
  font-size: 15px; font-style: italic;
  padding: 6px 12px; background: white;
  border: 1px solid #E8751A; color: #1B2B5E;
}

/* -------- Colophon -------- */
.pi-colophon {
  margin-top: 48px; padding-top: 16px;
  border-top: 1px solid #d0c6b8;
  font-size: 10px; color: #7a6e5c;
  text-transform: uppercase; letter-spacing: 0.08em;
  text-align: center;
}

/* -------- Responsive -------- */
@media (max-width: 720px) {
  .pi-hero { grid-template-columns: 1fr; }
  .pi-ledger { grid-template-columns: repeat(3, 1fr); gap: 12px 0; }
  .pi-cell:nth-child(3) { border-right: none; }
  .pi-capacity, .pi-values, .pi-delivery { grid-template-columns: 1fr; }
  .pi-heatmap { grid-template-columns: repeat(30, 1fr); }
  .pi-name { font-size: 44px; }
}