/* firebase-changelog-service/admin/views/people.css
   People: the list of people on the left, one person and their notes on the
   right. Admin theme tokens only; no new tokens. */

.ppl-root { max-width: 1280px; margin: 0 auto; padding: 24px; }
.ppl-top-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.ppl-top-bar h1 { font-size: 22px; font-weight: 700; margin: 0; }
.ppl-note { color: var(--lf-text-muted); font-size: 12px; margin-bottom: 18px; max-width: 820px; }

.ppl-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.ppl-list-pane { display: flex; flex-direction: column; gap: 8px; }
.ppl-list { display: flex; flex-direction: column; gap: 4px; max-height: 70vh; overflow-y: auto; }

.ppl-input {
  width: 100%; box-sizing: border-box; background: var(--lf-input-bg); color: var(--lf-text);
  border: 1px solid var(--lf-border); border-radius: var(--radius-sm, 8px); padding: 7px 10px; font: inherit; font-size: 13px;
}
textarea.ppl-input { resize: vertical; }
.ppl-input:focus-visible { outline: 2px solid var(--lf-accent); outline-offset: 1px; }

.ppl-btn, .ppl-btn-primary {
  background: var(--lf-btn-bg); color: var(--lf-text); border: 1px solid var(--lf-border);
  border-radius: var(--radius-sm, 8px); padding: 6px 12px; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.ppl-btn:hover { background: var(--lf-btn-hover); }
.ppl-btn-primary { background: var(--lf-accent); color: var(--lf-accent-contrast, #1b0b20); border-color: var(--lf-accent); font-weight: 600; }
.ppl-btn-primary:hover { background: var(--lf-accent-hover); }
.ppl-btn:disabled, .ppl-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.ppl-btn:focus-visible, .ppl-btn-primary:focus-visible, .ppl-row:focus-visible, .ppl-link:focus-visible { outline: 2px solid var(--lf-accent); outline-offset: 2px; }

.ppl-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; text-align: left;
  background: var(--lf-panel); color: var(--lf-text); border: 1px solid var(--lf-border);
  border-radius: var(--radius-sm, 8px); padding: 8px 10px; cursor: pointer; font: inherit;
}
.ppl-row:hover { background: var(--lf-panel-hover); }
.ppl-row.active { border-color: var(--lf-accent); background: var(--lf-accent-bg); }
.ppl-row-name { font-weight: 600; font-size: 14px; }
.ppl-row-rel { color: var(--lf-text-muted); font-size: 12px; }
.ppl-row-chips, .ppl-chips { display: flex; flex-wrap: wrap; gap: 4px; }

.ppl-chip { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--lf-border); color: var(--lf-text-muted); }
.ppl-chip-lf-audio { color: var(--lf-accent); border-color: var(--lf-accent); }
.ppl-chip-stamp-house { color: var(--lf-purple); border-color: var(--lf-purple-border); background: var(--lf-purple-bg); }
.ppl-chip-personal { color: var(--lf-info); border-color: var(--lf-info-border); background: var(--lf-info-bg); }

.ppl-detail { background: var(--lf-panel); border: 1px solid var(--lf-border); border-radius: var(--radius-sm, 8px); padding: 18px; min-height: 240px; }
.ppl-empty, .ppl-dim { color: var(--lf-text-muted); font-size: 13px; padding: 8px 2px; }
.ppl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.ppl-head h2 { margin: 0 0 6px; font-size: 20px; }
.ppl-aliases { color: var(--lf-text-muted); font-size: 12px; margin-top: 6px; }

.ppl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 18px; margin-bottom: 8px; }
.ppl-field { margin-bottom: 10px; }
.ppl-label { color: var(--lf-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px; }
.ppl-value { font-size: 13px; color: var(--lf-text); }
.ppl-pre { white-space: pre-wrap; }
.ppl-handles, .ppl-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.ppl-kind { display: inline-block; min-width: 76px; color: var(--lf-text-muted); font-size: 12px; }
.ppl-link { color: var(--lf-accent); text-decoration: none; }
.ppl-link:hover { text-decoration: underline; }

.ppl-notes-head h3 { font-size: 15px; margin: 18px 0 8px; }
.ppl-note-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ppl-note-controls { display: flex; flex-wrap: wrap; gap: 6px; }
.ppl-note-controls .ppl-input { width: auto; flex: 1 1 140px; }
.ppl-notes { display: flex; flex-direction: column; gap: 6px; }
.ppl-note-row { border: 1px solid var(--lf-border); border-radius: var(--radius-sm, 8px); padding: 8px 10px; background: var(--lf-panel-alt); }
.ppl-note-text { font-size: 13px; white-space: pre-wrap; }
.ppl-note-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; color: var(--lf-text-muted); font-size: 11px; align-items: center; }
.ppl-tag { border: 1px solid var(--lf-border); border-radius: 999px; padding: 0 6px; }
.ppl-tag-commit { color: var(--lf-warn); border-color: var(--lf-warn-border); background: var(--lf-warn-bg); }

.ppl-form h2 { margin: 0 0 12px; font-size: 18px; }
.ppl-form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 12px; color: var(--lf-text-muted); }
.ppl-checks { display: flex; flex-wrap: wrap; gap: 14px; color: var(--lf-text); font-size: 13px; }
.ppl-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ppl-form-error { color: var(--lf-error); font-size: 12px; min-height: 16px; }
.ppl-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ppl-error { padding: 12px; border: 1px solid var(--lf-error-border); background: var(--lf-error-bg); color: var(--lf-error); border-radius: var(--radius-sm, 8px); font-size: 13px; }

@media (max-width: 760px) {
  .ppl-root { padding: 16px; }
  .ppl-layout { grid-template-columns: 1fr; }
  .ppl-list { max-height: 40vh; }
}