/* XDM Explorer — two-panel layout, a collapsible field tree, and a detail pane.
   Loaded standalone (stylesheet_link_tag "xdm"); plain CSS, not Tailwind. The
   .xdm-* elements are built by xdm_explorer_controller.js. */

.xdm-explorer-layout {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 768px) {
  .xdm-explorer-layout { grid-template-columns: minmax(0, 1fr); }
}

.xdm-tree {
  max-height: 70vh;
  overflow: auto;
  font-size: 0.8125rem;
}

/* Tree rows */
.xdm-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.25rem;
  border-radius: 0.375rem;
  cursor: pointer;
  white-space: nowrap;
}

.xdm-row:hover { background: #f3f4f6; }
.xdm-leaf .xdm-row { cursor: default; }

.xdm-children { margin-left: 1rem; }

/* Caret: filled triangle that points right when collapsed, down when expanded.
   Leaf nodes have no caret. */
.xdm-caret {
  display: inline-block;
  width: 0.75rem;
  color: #9ca3af;
  font-size: 0.625rem;
}

.xdm-caret::before { content: "\25B8"; } /* ▸ */

.xdm-section:not(.collapsed) > .xdm-row .xdm-caret::before,
.xdm-branch:not(.collapsed) > .xdm-row .xdm-caret::before { content: "\25BE"; } /* ▾ */

.xdm-section.collapsed > .xdm-children,
.xdm-branch.collapsed > .xdm-children { display: none; }

/* Labels */
.xdm-section-title { font-weight: 600; color: #374151; }
.xdm-group-name { color: #6b7280; }

.xdm-dataset-link,
.xdm-field-link,
.xdm-const-link,
.xdm-alias-link {
  cursor: pointer;
  color: #1d4ed8;
  border-radius: 0.25rem;
  padding: 0 0.125rem;
}

.xdm-dataset-link { font-weight: 500; }
.xdm-dataset-link:hover,
.xdm-field-link:hover,
.xdm-const-link:hover,
.xdm-alias-link:hover { text-decoration: underline; }

.xdm-row .active,
.active { background: #dbeafe; color: #1e3a8a; }

.xdm-count {
  margin-left: auto;
  padding: 0 0.375rem;
  font-size: 0.6875rem;
  color: #6b7280;
  background: #f3f4f6;
  border-radius: 9999px;
}

.xdm-type-hint {
  margin-left: 0.375rem;
  font-size: 0.6875rem;
  color: #9ca3af;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Detail pane */
.xdm-detail-title { font-size: 1.125rem; font-weight: 700; color: #111827; }
.xdm-detail-subtitle { margin-top: 0.125rem; font-size: 0.8125rem; color: #6b7280; }
.xdm-detail-text { margin-top: 0.5rem; font-size: 0.875rem; color: #374151; }

.xdm-detail-heading {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #374151;
}

.xdm-detail-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.375rem 1rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
}

.xdm-detail-list dt { color: #6b7280; font-weight: 500; }
.xdm-detail-list dd { color: #1f2937; word-break: break-word; }

.xdm-detail-table {
  width: 100%;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  border-collapse: collapse;
}

.xdm-detail-table th {
  text-align: left;
  padding: 0.25rem 0.5rem;
  color: #6b7280;
  font-weight: 500;
  border-bottom: 1px solid #e5e7eb;
}

.xdm-detail-table td { padding: 0.25rem 0.5rem; border-bottom: 1px solid #f3f4f6; vertical-align: top; }

.xdm-detail-list code,
.xdm-detail-table code {
  background: #f3f4f6;
  border-radius: 0.25rem;
  padding: 0.05rem 0.3rem;
  font-size: 0.75rem;
}

.xdm-field-list { display: flex; flex-direction: column; gap: 0.25rem; }
.xdm-link { color: #1d4ed8; }
.xdm-link:hover { text-decoration: underline; }

/* The const jump-link is a <button> styled as an inline link (CSP-safe — no
   inline handlers; the controller delegates its click). */
.xdm-detail-const-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #1d4ed8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
}

.xdm-detail-const-link:hover { text-decoration: underline; }