/* TreeEdit: three-pane editor - people list, form, inspector. */

.header-field { min-width: 160px; }
.header-field > span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 3px;
}

/* Which file is open, and whether it has unsaved edits. Sits in the header
   beside the save button so the answer is always in view. */
.file-status {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-size: 12.5px;
}

.file-status__name {
  font-weight: 600;
  color: var(--text);
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-status__name.muted { font-weight: 500; color: var(--text-muted); }

.dirty-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--warning);
  white-space: nowrap;
}

.dirty-flag[hidden] { display: none !important; }
.dirty-flag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); }

/* ------------------------------------------------------------ people list */

.people-pane {
  flex: none;
  width: 262px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  min-height: 0;
}

/* Each tab's content fills the pane below the tab strip. */
.pane-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.pane-body[hidden] { display: none !important; }

.issues-body { padding: 10px 12px 24px; display: block; }

.people-toolbar {
  display: flex;
  gap: 6px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
}

.people-list { flex: 1; min-height: 0; padding: 5px; }

.person-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  border-radius: 5px;
  padding: 6px 9px;
  cursor: pointer;
  border-left: 3px solid transparent;
}

.person-item:hover { background: var(--surface-2); }

.person-item.active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}

.person-item .pname { font-size: 13px; font-weight: 550; color: var(--text); }
.person-item .pmeta { font-size: 11.5px; color: var(--text-muted); }
.person-item.flagged .pname::after { content: " ▲"; color: var(--danger); font-size: 10px; }

.people-footer {
  padding: 7px 11px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
}

/* ----------------------------------------------------------------- editor */

.editor-pane {
  flex: 1;
  min-width: 0;
  padding: 18px 22px 40px;
}

.editor-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.editor-head h2 {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.015em;
  margin: 0;
}

.edit-section { margin-top: 18px; }

.edit-section h3 {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 9px;
}

.grid-2, .grid-3 { display: grid; gap: 10px; }
.grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.grid-3 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .55fr); }

.hint { font-size: 11.5px; color: var(--text-muted); margin: 7px 0 0; }

.radio-row { display: flex; gap: 16px; }
.radio-row label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.radio-row input { margin: 0; accent-color: var(--accent); }

/* ------------------------------------------------------------------ photo */

.photo-row { display: flex; gap: 12px; align-items: flex-start; }
.photo-fields { flex: 1; min-width: 0; display: grid; gap: 10px; }

.photo-preview {
  flex: none;
  width: 108px;
  height: 132px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2, rgba(0, 0, 0, .03));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

.photo-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.photo-preview img[hidden] { display: none !important; }

.photo-preview__msg {
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-muted);
  padding: 6px;
}

.photo-preview[data-state="error"] { border-color: var(--danger, #c0392b); }
.photo-preview[data-state="error"] .photo-preview__msg { color: var(--danger, #c0392b); }

@media (max-width: 820px) {
  .photo-row { flex-direction: column; }
  .photo-preview { width: 96px; height: 118px; }
}

/* --------------------------------------------------------- relationships */

.rel-block { margin-bottom: 12px; }

.rel-block > h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
}

.rel-family {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 11px;
  margin-bottom: 8px;
  background: var(--surface);
}

.rel-family-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  font-size: 12px;
  color: var(--text-muted);
}

.rel-family-head .spacer { flex: 1; }

.rel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
}

.rel-row .role {
  flex: none;
  width: 68px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
}

.rel-row .who { flex: 1; min-width: 0; }
.rel-row select { font-size: 13px; padding: 4px 7px; }

/* Date and place for one event, side by side. */
.rel-row .who.pair { display: flex; gap: 6px; }
.rel-row .who.pair input { min-width: 0; }
.rel-row .who.pair input:first-child { flex: 0 1 38%; }
.rel-row .who.pair input:last-child { flex: 1 1 auto; }

/* ---------------------------------------------------------- person picker */

.person-pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

.person-pick__input {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  padding: 4px 7px;
}

.person-pick__clear {
  flex: none;
  padding: 3px 7px;
  font-size: 12px;
  line-height: 1;
  color: var(--text-muted);
}
.person-pick__clear:hover { color: var(--danger); border-color: var(--danger); }

.person-pick__menu {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 280px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 4px;
}
.person-pick__menu[hidden] { display: none !important; }

.person-pick__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
}
.person-pick__item:hover,
.person-pick__item.active { background: var(--surface-2); }
.person-pick__item.active { outline: 1px solid var(--accent); outline-offset: -1px; }

.person-pick__item .pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-pick__item .pmeta { flex: none; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.person-pick__hint {
  padding: 6px 8px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.rel-empty { font-size: 12.5px; color: var(--text-muted); padding: 4px 0 8px; }

.note-row { display: flex; gap: 7px; margin-bottom: 7px; align-items: flex-start; }
.note-row textarea { flex: 1; }

/* -------------------------------------------------------------- inspector */

.inspector-pane {
  flex: none;
  width: 320px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  min-height: 0;
}

/* Tab strip at the top of a side pane. Used for People/Issues on the left;
   on the right it carries the single "Record" label so the two panes line up. */
.pane-tabs {
  display: flex;
  flex: none;
  border-bottom: 1px solid var(--border);
  padding: 0 6px;
}

.pane-tabs .tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 9px 11px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
}

.pane-tabs button.tab { cursor: pointer; }
.pane-tabs button.tab:hover { background: transparent; color: var(--text); }
.pane-tabs .tab.active { color: var(--text); border-bottom-color: var(--accent); }

.badge {
  display: inline-block;
  min-width: 17px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--danger);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
}

.badge[hidden] { display: none !important; }
.badge.clean { background: var(--ok); }

.inspector-body { flex: 1; min-height: 0; padding: 12px 14px 24px; }
.inspector-body[hidden] { display: none !important; }

.record-source {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  padding: 10px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}

.issue {
  border-left: 3px solid var(--warning);
  background: var(--surface-2);
  border-radius: 0 5px 5px 0;
  padding: 7px 10px;
  margin-bottom: 7px;
  font-size: 12.5px;
  line-height: 1.45;
}

.issue.error { border-left-color: var(--danger); }
.issue button {
  border: none;
  background: none;
  padding: 0;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--accent);
  text-decoration: underline;
}

.issues-clean { color: var(--ok); font-size: 13px; font-weight: 550; }

#editor-form[hidden], #editor-empty[hidden] { display: none !important; }

@media (max-width: 1100px) {
  .inspector-pane { display: none; }
}

@media (max-width: 820px) {
  .people-pane { width: 200px; }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}