/* UI-only study. No graph-label, canvas, animation, or runtime overrides. */
.design-study {
  --ui-surface: #10151e;
  --ui-control: #171e29;
  --ui-hover: #202a38;
  --ui-border: #2b3544;
  --ui-divider: #232c39;
  --ui-text: #e7edf5;
  --ui-secondary: #b1bdce;
  --ui-muted: #94a4bb;
  --ui-focus: #8ddccd;
  --ui-radius: 6px;
  --ui-project: #57dfbd;
  --ui-kol: #b79aff;
}
.topbar {
  padding: 0 24px;
  gap: 24px;
  background: var(--ui-surface);
  border-color: var(--ui-divider);
}
.brand {font-size: 24px; letter-spacing: -1px; font-weight: 650;}
.workspace-name {
  padding-left: 24px;
  border-left: 1px solid var(--ui-border);
  color: var(--ui-secondary);
  font-size: 13px;
}
.local-badge {
  border: 0;
  padding: 0;
  color: var(--ui-muted);
  font-size: 12px;
}
.dataset-context {margin-left: auto; display: flex; align-items: center; gap: 16px;}
#dataset {
  height: 36px;
  max-width: 240px;
  padding: 0 12px;
  font-size: 13px;
  background: var(--ui-control);
  color: var(--ui-text);
  border-color: var(--ui-border);
  border-radius: var(--ui-radius);
}
#data-status {font-size: 12px; color: var(--ui-muted);}
.toolbar {
  align-items: flex-end;
  padding: 8px 24px 12px;
  gap: 16px;
  background: var(--ui-surface);
  border-color: var(--ui-border);
}
.toolbar label {gap: 4px; font-size: 12px; line-height: 16px; color: var(--ui-secondary);}
.toolbar select, .toolbar button, .search-wrap input {
  height: 36px;
  margin: 0;
  padding: 0 12px;
  font-size: 13px;
  border-radius: var(--ui-radius);
  background: var(--ui-control);
  border-color: var(--ui-border);
  color: var(--ui-text);
}
.toolbar select {min-width: 140px; padding-right: 24px;}
.toolbar #category {min-width: 176px;}
.toolbar #reset-filters {background: transparent; color: var(--ui-secondary); padding: 0 16px;}
.search-wrap {max-width: 300px; margin-right: 8px;}
.search-wrap input {padding-left: 40px;}
.search-wrap input::placeholder {color: var(--ui-muted);}
.search-icon {position: absolute; width: 18px; height: 18px; left: 12px; top: 9px; color: var(--ui-muted); pointer-events: none;}
.toolbar button:hover, .toolbar select:hover, #dataset:hover {background: var(--ui-hover); border-color: var(--ui-muted);}
.toolbar :focus-visible, #dataset:focus-visible, #inspector :focus-visible, .view-actions button:focus-visible {
  outline: 2px solid var(--ui-focus); outline-offset: 3px;
}
#results {top: 44px; right: 0; padding: 8px; background: var(--ui-surface); border-color: var(--ui-border); box-shadow: none;}
#results button {min-height: 40px; gap: 16px; padding: 12px 8px; font-size: 14px; color: var(--ui-text);}
#results button:hover, #results button:focus-visible {background: var(--ui-hover);}
#results small {font-size: 12px; color: var(--ui-muted);}
.canvas-head {left: 24px; top: 20px; display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 24px;}
.canvas-head h1 {font-size: 22px; line-height: 1.25; font-weight: 550; letter-spacing: -.6px; margin: 0;}
.canvas-head .entity-key {font-size: 13px; gap: 24px; color: var(--ui-secondary); font-variant-numeric: tabular-nums;}
#data-note {grid-column: 1 / -1; font-size: 12px; line-height: 1.5; color: var(--ui-muted); margin: 4px 0 0;}
.canvas-foot {left: 24px; right: 24px; bottom: 16px; font-size: 12px; color: var(--ui-secondary);}
.view-actions {gap: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);}
.view-actions button {min-height: 36px; padding: 0 12px; font-size: 12px; border: 0; border-radius: 0; background: transparent; color: var(--ui-secondary);}
.view-actions button + button {border-left: 1px solid var(--ui-border);}
.view-actions button:first-child {border-radius: 5px 0 0 5px;}
.view-actions button:last-child {border-radius: 0 5px 5px 0;}
.view-actions button:hover {background: var(--ui-hover); color: var(--ui-text);}
.view-actions button[aria-pressed=true] {color: var(--ui-focus);}
#inspector {
  background: var(--ui-surface);
  border-color: var(--ui-border);
  padding: 0 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--ui-border) transparent;
}
.inspector-title {
  height: 64px;
  font-size: 14px;
  font-weight: 550;
  color: var(--ui-text);
  border-color: var(--ui-border);
  gap: 8px;
}
.inspector-title button {min-height: 36px; padding: 0 8px; font-size: 12px; background: transparent; border-color: var(--ui-border); color: var(--ui-secondary);}
.browse-list {padding: 24px 0;}
#force-graph {background-color: #000000;}
#force-graph > .map-dot-background {position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;}
.browse-list > .description {font-size: 14px;}
.browse-tabs {display: flex; gap: 4px; padding: 4px; margin-bottom: 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-control);}
.browse-tabs button {flex: 1; display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 36px; border: 0; background: transparent; color: var(--ui-secondary); font-size: 13px;}
.browse-tabs button[aria-selected=true] {background: var(--ui-hover); color: var(--ui-text); box-shadow: inset 0 -2px var(--ui-focus);}
.browse-tabs button span {font-size: 11px; color: var(--ui-muted); font-variant-numeric: tabular-nums;}
.browse-entries .connection {min-height: 60px; padding: 10px 0; font-size: 14px;}
.browse-range {margin: 16px 0 8px; color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums;}
.browse-pagination {display: flex; align-items: center; justify-content: space-between; gap: 8px;}
.browse-pagination button {min-height: 36px; padding: 0 10px; font-size: 12px; background: var(--ui-control); border-color: var(--ui-border);}
.browse-pagination span {font-size: 12px; color: var(--ui-secondary); white-space: nowrap; font-variant-numeric: tabular-nums;}
.browse-empty {padding: 24px 0;}
.description {font-size: 16px; line-height: 1.5; color: var(--ui-secondary); margin: 0 0 16px;}
.fine {font-size: 13px; line-height: 1.6; color: var(--ui-muted);}
.offline-note {border-left-color: var(--ui-border); padding-left: 12px; margin: 0 0 24px;}
.browse-list h3 {margin: 24px 0 8px; padding-top: 16px; border-top: 1px solid var(--ui-border);}
#inspector h3 {font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--ui-secondary);}
.connection {
  margin: 0;
  min-height: 64px;
  padding: 12px 0;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid var(--ui-divider);
  border-radius: 0;
  background: transparent;
  font-size: 15px;
  color: var(--ui-text);
}
.connection:hover {background: var(--ui-hover); border-color: var(--ui-divider);}
.connection i {width: 6px; height: 6px;}
.connection span:first-of-type {min-width: 0; flex: 1; font-weight: 500;}
.connection span:last-child {flex: 0; color: var(--ui-muted); font-size: 16px;}
.connection small {margin-top: 4px; font-size: 12px; line-height: 1.5; font-weight: 400; color: var(--ui-muted);}
.sort-row {justify-content: space-between; padding: 8px 0; color: var(--ui-muted); font-size: 12px;}
.sort-row select {height: 36px; font-size: 12px; background: var(--ui-control); border-color: var(--ui-border); border-radius: var(--ui-radius); color: var(--ui-secondary);}
.profile {gap: 16px; padding: 24px 0;}
.profile .avatar {width: 48px; height: 48px; flex-shrink: 0; font-size: 14px; background: var(--ui-control);}
.profile h2 {font-size: 28px; line-height: 1.2; font-weight: 550; letter-spacing: -.8px; color: var(--ui-text);}
.profile p {font-size: 13px; margin-top: 4px; color: var(--ui-muted);}
.impact-line {padding: 16px 0; border-block: 1px solid var(--ui-border); font-size: 13px; color: var(--ui-muted);}
.impact-line strong {font-size: 14px; color: var(--ui-text);}
.metrics {padding: 24px 0; gap: 16px; border-color: var(--ui-border);}
.metrics strong {font-size: 30px; line-height: 1.2; font-variant-numeric: tabular-nums; font-weight: 550; color: var(--ui-text);}
.metrics span {margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--ui-muted);}
.detail-section {padding: 24px 0; border-color: var(--ui-border);}
.detail-section h3 {margin-bottom: 16px;}
.pill {background: var(--ui-control); color: var(--ui-secondary); border-radius: 4px; font-size: 12px; padding: 6px 8px; margin: 0 4px 4px 0;}
.quality-grid {font-size: 13px; gap: 12px; color: var(--ui-secondary); font-variant-numeric: tabular-nums;}
.evidence {padding: 16px 0; border-color: var(--ui-border);}
.evidence strong {font-size: 14px; color: var(--ui-text); font-weight: 550;}
.evidence p {font-size: 14px; line-height: 1.6; color: var(--ui-secondary);}
.evidence .fine, .confidence {font-size: 12px; color: var(--ui-muted);}
.evidence button {min-height: 36px; padding: 0 12px; font-size: 12px; background: var(--ui-control); border-color: var(--ui-border); border-radius: var(--ui-radius);}
details.fine {padding: 8px 0;}
details summary {min-height: 36px; line-height: 36px; cursor: pointer; color: var(--ui-secondary);}
#empty {top: 136px; z-index: 200; padding: 16px; border-radius: var(--ui-radius); background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-secondary);}
#empty h2 {font-size: 16px; color: var(--ui-text);}
#empty p {font-size: 13px;}
#empty button {min-height: 36px; font-size: 13px;}
dialog {background: var(--ui-surface); border-color: var(--ui-border); border-radius: var(--ui-radius);}
.dialog-head {border-color: var(--ui-border);}
.profile-checked {font-size: 12px; line-height: 1.5; color: var(--ui-muted); margin: 0 0 8px;}
.profile-facts {margin: 0; padding: 16px 0; display: grid; gap: 16px; font-size: 13px; line-height: 1.5;}
.profile-facts > div {display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 12px;}
.profile-facts dt {color: var(--ui-muted);}
.profile-facts dd {margin: 0; text-align: right; color: var(--ui-text); overflow-wrap: anywhere;}
.profile-facts a {color: var(--ui-focus); text-decoration: underline; text-underline-offset: 3px;}
.profile-facts a:hover {color: var(--ui-text);}
.detail-section .profile-facts {padding: 0;}
.metrics strong.unavailable {font-size: 16px; font-weight: 400; line-height: 36px; color: var(--ui-muted);}
.unavailable {color: var(--ui-muted);}
.profile-evidence > summary {cursor: pointer; min-height: 36px; font-size: 13px; font-weight: 550; color: var(--ui-secondary);}
.profile-evidence > summary span {float: right; color: var(--ui-muted);}