/* CALMF inspector. Scoped to the detail panel; existing data hooks stay intact. */
.function-map .function-map__detail {
  --detail-text: #edece5;
  --detail-muted: #a5ada6;
  --detail-accent: #dfc58a;
  --detail-border: #ffffff14;
  color-scheme: dark;
  width: min(480px, calc(100% - 36px)) !important;
  min-width: 0 !important;
  max-width: calc(100% - 36px) !important;
  height: min(660px, calc(100% - 94px)) !important;
  max-height: calc(100% - 94px) !important;
  border: 1px solid #d9bf823b !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #1d241f, #111713 70%) !important;
  box-shadow: 0 24px 64px #0007, inset 0 1px #ffffff0a !important;
  color: var(--detail-text);
  font: 400 11px/1.55 system-ui, sans-serif;
  touch-action: auto;
}
.function-map .function-map__detail *,
.function-map .function-map__detail *::before { box-sizing: border-box; }
.function-map .function-map__detail > header {
  gap: 12px;
  min-height: 72px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--detail-border);
  background: #ffffff03;
}
.function-map .function-map__detail > header > i {
  display: grid;
  flex: 0 0 36px;
  height: 36px;
  place-items: center;
  border: 1px solid #dfc58a30;
  border-radius: 11px;
  color: var(--detail-accent);
  background: #dfc58a09;
  font: normal 18px/1 system-ui;
}
.function-map .function-map__detail > header > span { display: grid; flex: 1; gap: 3px; }
.function-map .function-map__detail > header b {
  color: var(--detail-text);
  font: 650 12px/1.3 system-ui;
  letter-spacing: .01em;
  text-transform: none;
}
.function-map .function-map__detail > header small {
  color: var(--detail-muted);
  font: 400 10px/1.4 system-ui;
  letter-spacing: 0;
  text-transform: none;
}
.function-map .function-map__detail-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  grid-auto-rows: max-content;
  gap: 10px;
  flex: 1;
  padding: 22px 20px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #647064 transparent;
  scrollbar-gutter: stable;
}
.function-map__detail-body > * { grid-column: 1 / -1; min-width: 0; }
.function-map .function-map__detail span { text-transform: none; letter-spacing: 0; }
.function-map .function-map__detail-body > span {
  justify-self: start;
  padding: 4px 9px;
  border: 1px solid #dfc58a26;
  border-radius: 6px;
  color: var(--detail-accent);
  background: #dfc58a08;
  font: 600 9px/1.5 system-ui;
  overflow-wrap: anywhere;
}
.function-map .function-map__detail h2 {
  margin: 0 0 6px;
  color: var(--detail-text);
  font: 650 18px/1.25 system-ui;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.function-map .function-map__detail h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  background: none;
  color: var(--detail-text);
  font: 600 11px/1.5 system-ui;
}
.function-map .function-map__detail h3 > b {
  display: grid;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  place-items: center;
  border-radius: 7px;
  background: #dfc58a12;
  color: var(--detail-accent);
  font: 600 10px/1 system-ui;
}
.function-map .function-map__detail p { margin: 0; color: var(--detail-muted); font: 400 11px/1.65 system-ui; overflow-wrap: anywhere; }
.function-map .function-map__meaning { gap: 14px; margin: 0 0 8px; padding: 16px; border: 1px solid var(--detail-border); border-radius: 12px; background: #ffffff03; }
.function-map .function-map__meaning > div { padding: 0; border: 0; border-radius: 0; background: none; }
.function-map .function-map__meaning small { margin-bottom: 5px; color: var(--detail-accent); font: 600 9px/1.5 system-ui; letter-spacing: .035em; text-transform: none; }
.function-map .function-map__detail .function-map__metric {
  grid-column: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 82px;
  margin: 0;
  padding: 13px 14px !important;
  border: 1px solid var(--detail-border) !important;
  border-radius: 12px !important;
  background: #ffffff04 !important;
  box-shadow: none !important;
  white-space: normal;
  text-align: left;
}
.function-map .function-map__detail .function-map__metric span { color: var(--detail-muted); font: 500 10px/1.4 system-ui; }
.function-map .function-map__detail .function-map__metric b { color: var(--detail-text); font: 600 16px/1.25 system-ui; letter-spacing: -.025em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.function-map .function-map__detail [data-errors] { border-color: #dfc58a38 !important; background: #dfc58a08 !important; }
.function-map .function-map__detail [data-errors] span::after { content: ' ↗'; color: var(--detail-accent); }
.function-map .function-map__detail-section,
.function-map .function-map__routes,
.function-map .function-map__detail-all,
.function-map .function-map__diagnostics { margin: 8px 0 0; padding: 16px; border: 1px solid var(--detail-border); border-radius: 12px; background: #080e092e; }
.function-map .function-map__detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
.function-map .function-map__detail-grid > div { display: grid; gap: 4px; min-width: 0; }
.function-map .function-map__detail-grid small { color: var(--detail-muted); font: 400 9px/1.4 system-ui; }
.function-map .function-map__detail-grid b { color: var(--detail-text); font: 600 11px/1.5 system-ui; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.function-map .function-map__detail-row { display: grid; grid-template-columns: minmax(80px, .8fr) minmax(0, 1.4fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--detail-border); }
.function-map .function-map__detail-row:last-child { padding-bottom: 0; border-bottom: 0; }
.function-map .function-map__detail-row small { color: var(--detail-muted); font: 400 10px/1.5 system-ui; overflow-wrap: anywhere; }
.function-map .function-map__detail-row b { color: var(--detail-text); font: 500 10px/1.6 ui-monospace, monospace; overflow-wrap: anywhere; white-space: pre-wrap; }
.function-map .function-map__detail-section > small { display: block; margin: 16px 0 8px; color: var(--detail-muted); font: 600 9px/1.5 system-ui; }
.function-map .function-map__detail-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  width: 100%;
  min-height: 56px;
  margin: 6px 0 0;
  padding: 10px 12px !important;
  border: 1px solid var(--detail-border) !important;
  border-radius: 9px !important;
  background: #ffffff03 !important;
  color: var(--detail-text) !important;
  text-align: left;
  box-shadow: none !important;
  transition: background .16s, border-color .16s;
}
.function-map .function-map__detail-link span { grid-column: 1; color: var(--detail-text); font: 550 11px/1.4 system-ui; overflow-wrap: anywhere; }
.function-map .function-map__detail-link small { grid-column: 1; color: var(--detail-muted); font: 400 9px/1.5 system-ui; font-variant-numeric: tabular-nums; }
.function-map .function-map__detail-link::after { content: '↗'; grid-column: 2; grid-row: 1 / 3; color: var(--detail-accent); font: 400 14px/1 system-ui; }
.function-map .function-map__detail button:hover { background: #dfc58a14 !important; border-color: #dfc58a65 !important; }
.function-map .function-map__detail :is(button, summary):focus-visible { outline: 2px solid var(--detail-accent); outline-offset: 3px; }
.function-map .function-map__detail button:active { background: #dfc58a22 !important; }
.function-map .function-map__detail button:disabled { opacity: .45; cursor: not-allowed; }
.function-map .function-map__detail ol { max-height: 220px; margin: 0; padding: 0 0 0 20px; border: 0; border-radius: 0; background: none; color: var(--detail-muted); font: 400 10px/1.7 system-ui; overflow-wrap: anywhere; }
.function-map .function-map__detail li { padding: 7px 4px; border-bottom: 1px solid var(--detail-border); }
.function-map .function-map__detail li::marker { color: var(--detail-accent); }
.function-map .function-map__detail summary { padding: 2px 0; color: var(--detail-muted); font: 500 11px/1.6 system-ui; cursor: pointer; overflow-wrap: anywhere; }
.function-map .function-map__detail summary:hover { color: var(--detail-accent); }
.function-map .function-map__detail details[open] > summary { margin-bottom: 12px; color: var(--detail-accent); }
.function-map .function-map__endpoint { margin: 0; padding: 12px 14px; border-color: var(--detail-border); background: #ffffff03; }
.function-map .function-map__endpoint b { white-space: normal; font: 550 11px/1.5 system-ui; }
.function-map .function-map__endpoint small { color: var(--detail-accent); font: 500 9px/1.5 system-ui; letter-spacing: 0; text-transform: none; }
.function-map .function-map__diagnostics { border-color: #ee9d8738; background: #ee9d8705; }
.function-map .function-map__diagnostics > span { display: flex; align-items: center; gap: 10px; color: var(--detail-muted); font: 400 11px/1.5 system-ui; }
.function-map .function-map__diagnostics > span::before { content: ''; width: 14px; height: 14px; flex: 0 0 14px; border: 2px solid #dfc58a30; border-top-color: var(--detail-accent); border-radius: 50%; animation: detail-spin 1s linear infinite; }
.function-map .function-map__diagnostics details { padding: 10px 0; border-top: 1px solid var(--detail-border); }
.function-map .function-map__diagnostics summary b { color: #f2b3a3; }
.function-map .function-map__diagnostics time,
.function-map .function-map__diagnostics summary small { display: block; margin-top: 4px; color: var(--detail-muted); font: 400 9px/1.5 system-ui; }
.function-map .function-map__diagnostics pre { max-height: 260px; margin: 12px 0 0; padding: 12px; border: 1px solid var(--detail-border); border-radius: 8px; background: #070b09; color: #e7c7be; font: 400 10px/1.65 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; }
.function-map .function-map__detail-body > p { padding: 24px 18px; border: 1px dashed #dfc58a30; border-radius: 12px; background: #dfc58a04; }
@keyframes detail-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .function-map .function-map__detail * { animation: none !important; transition: none !important; }
}
@media (max-width: 720px) {
  .function-map .function-map__detail { width: calc(100% - 20px) !important; max-width: calc(100% - 20px) !important; height: calc(100% - 84px) !important; max-height: calc(100% - 84px) !important; border-radius: 15px !important; }
  .function-map .function-map__detail > header { min-height: 62px; padding: 12px 14px; }
  .function-map .function-map__detail-body { padding: 16px 12px; gap: 8px; }
  .function-map .function-map__detail h2 { font-size: 17px; }
  .function-map .function-map__detail-section,
  .function-map .function-map__routes,
  .function-map .function-map__detail-all,
  .function-map .function-map__diagnostics { padding: 12px; }
  .function-map .function-map__detail .function-map__metric { padding: 11px !important; }
  .function-map .function-map__detail .function-map__metric b { font-size: 14px; }
  .function-map .function-map__detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.function-map .function-map__minimap { margin:14px 0; border:1px solid #ffffff16; background:radial-gradient(ellipse at 50% 30%,#213d3b55,#0c1411 85%); border-radius:12px; overflow:hidden; }
.function-map .function-map__minimap h3 { padding:12px 12px 0; margin:0; }
.function-map .function-map__minimap h3 small { font-size:9px; color:#91a89a; float:right; }
.function-map .function-map__minimap svg { display:block; width:100%; max-height:190px; mask-image:linear-gradient(#000 60%,#0008); }
.function-map .function-map__minimap nav { display:flex; flex-wrap:wrap; gap:5px; padding:10px; }
.function-map .function-map__minimap nav button { color:#becfc4!important; background:#ffffff05!important; border:1px solid #ffffff13!important; padding:5px 8px!important; font:10px/1.4 system-ui!important; border-radius:6px!important; }