/* 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: var(--color-gray-100, #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.

   Drawn with borders rather than the ▸/▾ glyphs it used to be: at the size this
   wants those render tiny and inconsistently across fonts, and there is no font
   size small enough to keep them crisp while making them big enough to aim at.
   The box is a full row-height click target; the triangle inside it is not. */
.xdm-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  color: var(--color-gray-500, #6b7280);
}

.xdm-caret::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 0.3125rem solid currentColor;
  border-top: 0.3125rem solid transparent;
  border-bottom: 0.3125rem solid transparent;
  transition: transform 0.12s ease-out;
}

.xdm-row:hover .xdm-caret { color: var(--color-gray-700, #374151); }

.xdm-section:not(.collapsed) > .xdm-row .xdm-caret::before,
.xdm-branch:not(.collapsed) > .xdm-row .xdm-caret::before { transform: rotate(90deg); }

/* Respect a reduced-motion preference: the rotation is decoration, not feedback. */
@media (prefers-reduced-motion: reduce) {
  .xdm-caret::before { transition: none; }
}

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

/* Labels */
.xdm-section-title { font-weight: 600; color: var(--color-gray-700, #374151); }
.xdm-group-name { color: var(--color-gray-500, #6b7280); }

.xdm-dataset-link,
.xdm-field-link,
.xdm-const-link,
.xdm-alias-link {
  cursor: pointer;
  color: var(--color-blue-700, #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: var(--color-blue-100, #dbeafe); color: var(--color-blue-900, #1e3a8a); }

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

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

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

.xdm-detail-heading {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-gray-700, #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: var(--color-gray-500, #6b7280); font-weight: 500; }
.xdm-detail-list dd { color: var(--color-gray-800, #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: var(--color-gray-500, #6b7280);
  font-weight: 500;
  border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
}

.xdm-detail-table td { padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--color-gray-100, #f3f4f6); vertical-align: top; }

.xdm-detail-list code,
.xdm-detail-table code {
  background: var(--color-gray-100, #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: var(--color-blue-700, #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: var(--color-blue-700, #1d4ed8);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
}

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