/* ============================================================
   23-INSPECTOR — inspecteur d'entité + coupe du nid (apparence).
   Propriétaire : R3f (refonte). La géométrie de zone (position,
   largeur de nid, crans) reste à 04-layout.css (R1). Cf. §R3f.
   ============================================================ */

/* ---------- trait de rappel (SVG plein viewport, sous le HUD) ---------- */

#insp-lead {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--fm-z-overlay);
  pointer-events: none;
}

#insp-lead line {
  stroke: var(--fm-ink-2);
  stroke-opacity: 0.85;
  stroke-width: 1;
  stroke-dasharray: 5 4;
}

/* ---------- gabarit de zone : tête fixe + corps qui défile (≤ 44 % posé en JS) ---------- */

#inspector {
  width: 248px;
  padding: 0;
  overflow: hidden;
}

.fm-insp__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--fm-sp-3);
  overflow: hidden auto;
  overscroll-behavior: contain;
}

/* ---------- en-tête : identité de l'entité ---------- */

.fm-insp__dot {
  width: 8px;
  height: 8px;
  background: var(--fm-insp-dot, var(--fm-accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--fm-insp-dot, var(--fm-accent)) 45%, transparent);
}

.fm-insp__name {
  font-family: var(--fm-font-display);
  font-weight: 700;
  font-size: var(--fm-fs-300);
  letter-spacing: var(--fm-tr-1);
  white-space: nowrap;
}

.fm-insp__sub {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  font-size: var(--fm-fs-100);
  color: var(--fm-ink-3);
}

.fm-insp__head .in-close {
  margin-left: 0;
  flex: none;
  color: var(--fm-ink-3);
}

.fm-insp__head .in-close:hover { color: var(--fm-danger); }

/* ---------- phrase de tête ---------- */

.fm-insp__headline {
  margin: var(--fm-sp-1) 0 var(--fm-sp-2);
  font-size: var(--fm-fs-500);
  font-weight: 600;
  line-height: var(--fm-lh-2);
  color: var(--fm-ink-1);
}

/* ---------- barre de PV ---------- */

.fm-insp__hp {
  height: 4px;
  border-radius: var(--fm-r-pill);
  overflow: hidden;
  margin: 0 0 var(--fm-sp-1);
  background: color-mix(in srgb, var(--fm-ink-1) 10%, transparent);
}

.fm-insp__hp i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: var(--fm-r-pill);
  background: linear-gradient(90deg, var(--fm-danger), var(--fm-accent));
  transform-origin: 0 50%;
  transition: transform var(--fm-dur-2);
}

/* ---------- sections Vital / Activité / Détails ---------- */

.fm-insp__sec {
  margin-top: var(--fm-sp-3);
  padding-top: var(--fm-sp-2);
  border-top: 1px solid var(--fm-line-1);
}

.fm-insp__sec .fm-kv { width: 100%; }

.fm-insp__sec-t {
  margin: 0 0 var(--fm-sp-1);
  font-size: var(--fm-fs-100);
  font-weight: 600;
  letter-spacing: var(--fm-tr-2);
  text-transform: uppercase;
  color: var(--fm-ink-4);
}

details.fm-insp__fold summary { cursor: pointer; }

details.fm-insp__fold summary::marker { color: var(--fm-ink-3); }

.fm-insp__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fm-sp-1);
  margin-top: var(--fm-sp-2);
}

.fm-insp__chips span {
  font-size: var(--fm-fs-100);
  color: var(--fm-ink-1);
  padding: var(--fm-sp-0) var(--fm-sp-2);
  border: 1px solid var(--fm-line-1);
  border-radius: var(--fm-r-pill);
  font-variant-numeric: tabular-nums;
}

.fm-insp__chips em { color: var(--fm-ink-3); font-style: normal; }

/* ---------- actions : suivre / retirer ---------- */

.fm-insp__actions {
  display: flex;
  align-items: center;
  gap: var(--fm-sp-2);
  margin-top: var(--fm-sp-3);
}

.fm-insp__actions label {
  display: flex;
  align-items: center;
  gap: var(--fm-sp-1);
  font-size: var(--fm-fs-200);
  color: var(--fm-ink-2);
  cursor: pointer;
}

.fm-insp__actions input[type="checkbox"] { accent-color: var(--fm-accent); }

.fm-insp__actions .txt-btn {
  margin-left: auto;
  padding: var(--fm-sp-1) var(--fm-sp-2);
  font-size: var(--fm-fs-200);
}

.fm-insp__actions .txt-btn + .txt-btn { margin-left: 0; }

/* ---------- valeurs : tonalités (compagnes de .fm-kv dd.is-warn/.is-danger) ---------- */

.fm-kv dd.fm-insp__dim { color: var(--fm-ink-3); }

.fm-kv dd.fm-insp__ok { color: var(--fm-accent); }

.fm-insp__col {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--fm-ink-1);
  text-align: right;
  text-decoration: underline dotted color-mix(in srgb, var(--fm-ink-1) 45%, transparent);
  text-underline-offset: 2px;
  cursor: pointer;
}

.fm-insp__col:hover { color: var(--fm-accent); }

.fm-insp__col:disabled { cursor: default; text-decoration: none; color: var(--fm-ink-3); }

/* ---------- coupe du nid : tête de zone + canvas natif 440 ---------- */

#nestpanel { padding: 0; }

.np-head {
  display: flex;
  align-items: center;
  gap: var(--fm-sp-2);
  height: 28px;
  margin: 0;
  padding: 0 var(--fm-sp-3);
  border-bottom: 1px solid var(--fm-line-1);
  flex: none;
  min-width: 0;
}

.np-head .cc-dot { width: 8px; height: 8px; flex: none; }

#nest-title {
  font-family: var(--fm-font-display);
  font-weight: 800;
  font-size: var(--fm-fs-300);
  letter-spacing: var(--fm-tr-1);
  color: var(--fm-ink-1);
  white-space: nowrap;
}

#nest-sub {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: italic;
  font-size: var(--fm-fs-100);
  color: var(--fm-ink-3);
}

.np-head .txt-btn { margin-left: auto; flex: none; }

.np-head .in-close { margin-left: 0; flex: none; }

#nestCanvas {
  display: block;
  width: 440px;
  max-width: calc(100% - 2 * var(--fm-sp-3));
  height: auto;
  margin: var(--fm-sp-3) auto;
  border-radius: var(--fm-r-2);
  background: var(--fm-bg);
}

.fm-insp__inf {
  --fm-insp-inf: #c8a6ff;
  display: flex;
  align-items: center;
  gap: var(--fm-sp-2);
  margin: 0 0 var(--fm-sp-2);
  padding: var(--fm-sp-1) var(--fm-sp-2);
  font-size: var(--fm-fs-200);
  color: var(--fm-insp-inf);
  background: rgba(200, 166, 255, 0.1);
  border: 1px solid rgba(200, 166, 255, 0.32);
  border-radius: var(--fm-r-1);
}
.fm-insp__inf[hidden] { display: none; }
.fm-insp__inf[data-inf="2"] { color: #efe4ff; border-color: var(--fm-insp-inf); }
.fm-insp__inf-ic { flex: none; }
.fm-insp__inf-disc { fill: #1b1226; stroke: var(--fm-insp-inf); stroke-width: 1.3; }
.fm-insp__inf-stem { fill: none; stroke: #efe4ff; stroke-width: 1.6; stroke-linecap: round; }
.fm-insp__inf-cap { fill: #efe4ff; }