rdbr 0.1.0

data/app/public/styles.css

@@ -0,0 +1,2141 @@
+:root {
+  color-scheme: light;
+  --light-canvas: #f2f5f6;
+  --light-surface: #fbfcfc;
+  --light-surface-raised: #fff;
+  --light-border: #d5dde1;
+  --light-border-strong: #aebbc2;
+  --light-text: #26343b;
+  --light-muted: #687981;
+  --light-orange: #b65b08;
+  --light-orange-bright: #934604;
+  --light-cool: #197d99;
+  --light-cool-bright: #11657d;
+  --light-blue: #256f98;
+  --light-blue-bright: #195675;
+  --light-green: #587d35;
+  --light-green-bright: #426326;
+  --light-yellow: #80651d;
+  --light-brown: #855a38;
+  --light-teal: #187b76;
+  --light-teal-bright: #0f5e5a;
+  --theme-text: var(--light-text);
+  --theme-surface-raised: var(--light-surface-raised);
+  --theme-border-strong: var(--light-border-strong);
+  --theme-muted: var(--light-muted);
+  --theme-accent: var(--light-cool);
+  --theme-link: var(--light-blue);
+  --theme-link-hover: var(--light-blue-bright);
+  --theme-primary: var(--light-orange);
+  --theme-primary-hover: var(--light-orange-bright);
+  --theme-data-action: var(--light-green);
+  --theme-data-action-hover: var(--light-green-bright);
+  --theme-utility: var(--light-teal);
+  --theme-metadata: var(--light-yellow);
+  --theme-warning: var(--light-brown);
+  --theme-overlay: rgb(23 32 51 / 45%);
+  --theme-popup-shadow: 0 0.8rem 2rem rgb(23 32 51 / 24%);
+  --theme-control-surface: var(--light-surface-raised);
+  --theme-control-text: var(--light-text);
+  --theme-important: #a94d0a;
+  --diagram-canvas: #edf2f3;
+  --diagram-grid: #d7e0e2;
+  --diagram-edge: #74868e;
+  --diagram-node: #fff;
+  --diagram-node-selected: #e3f2f1;
+  font-family: system-ui, sans-serif;
+  line-height: 1.5;
+}
+
+.popup-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: grid;
+  padding: 1.5rem;
+  background: var(--theme-overlay);
+  place-items: center;
+}
+
+.popup-surface {
+  color: var(--theme-text);
+  border: 1px solid var(--theme-border-strong);
+  border-radius: 0.5rem;
+  background: var(--theme-surface-raised);
+  box-shadow: var(--theme-popup-shadow);
+}
+
+.popup-surface .dialog-close {
+  color: var(--theme-control-text);
+  border-color: var(--theme-border-strong);
+  background: var(--theme-control-surface);
+}
+
+.popup-surface .dialog-close:hover {
+  color: var(--theme-accent);
+  border-color: var(--theme-accent);
+  background: var(--theme-control-surface);
+}
+
+body {
+  margin: 0;
+  color: #172033;
+  background: #f4f6f8;
+}
+
+a {
+  color: #075f52;
+  text-underline-offset: 0.15em;
+}
+
+body > header,
+body > main {
+  width: min(70rem, calc(100% - 2rem));
+  margin: 0 auto;
+}
+
+body > header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.25rem 0;
+}
+
+body > header .brand {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+  color: #172033;
+  text-decoration: none;
+}
+
+.brand-container {
+  position: relative;
+  z-index: 40;
+}
+
+.database-summary {
+  position: absolute;
+  top: calc(100% + 0.65rem);
+  left: 0;
+  z-index: 10;
+  width: max-content;
+  min-width: 18rem;
+  max-width: min(28rem, calc(100vw - 2rem));
+  padding: 0.85rem 1rem;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-0.25rem);
+  transition: opacity 120ms ease, transform 120ms ease;
+}
+
+.brand-container:hover .database-summary,
+.brand-container:focus-within .database-summary {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.database-summary p {
+  margin: 0 0 0.65rem;
+}
+
+.database-summary dl {
+  display: flex;
+  gap: 1.5rem;
+  margin: 0;
+}
+
+.database-summary dl div {
+  display: flex;
+  gap: 0.4rem;
+}
+
+.database-summary dt {
+  color: #667085;
+}
+
+.database-summary dd {
+  margin: 0;
+  font-weight: 700;
+}
+
+body > header .brand strong {
+  font-size: 1.35rem;
+}
+
+body > header .brand-logo {
+  display: block;
+  width: 5.5rem;
+  height: auto;
+}
+
+body > header .brand span,
+small,
+.eyebrow {
+  color: #667085;
+}
+
+body > header nav {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.theme-picker {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  color: var(--theme-muted);
+  font-size: 0.85rem;
+}
+
+.theme-picker select {
+  width: auto;
+  padding: 0.3rem 1.8rem 0.3rem 0.5rem;
+}
+
+main {
+  padding-bottom: 2rem;
+}
+
+.catalog-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+section {
+  padding: 1.5rem;
+  border: 1px solid #d9dee8;
+  border-radius: 0.5rem;
+  background: #fff;
+}
+
+.page-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.page-heading h2,
+.page-heading p,
+.record-section h3,
+.relationship-section h3 {
+  margin-top: 0;
+}
+
+.page-heading h2 {
+  margin-bottom: 0.25rem;
+}
+
+.table-page-heading {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+  padding: 0.85rem 1rem;
+}
+
+.table-page-heading .heading-copy {
+  flex: 1 1 10rem;
+}
+
+.table-page-heading h2 {
+  margin: 0;
+  font-size: 1.3rem;
+  line-height: 1.25;
+}
+
+.table-page-heading .heading-copy > p {
+  margin: 0.35rem 0 0;
+}
+
+.eyebrow {
+  margin-bottom: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.table-search {
+  position: relative;
+  flex: 0 1 18rem;
+  width: 18rem;
+}
+
+.table-search > span {
+  position: absolute;
+  top: 50%;
+  left: 0.65rem;
+  z-index: 1;
+  color: #667085;
+  font-size: 0.9rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.table-search input[type='search'] {
+  width: 100%;
+  min-height: 2rem;
+  padding: 0.3rem 0.6rem 0.3rem 2rem;
+}
+
+.table-page-heading .table-heading-actions {
+  flex: 0 0 auto;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+
+.date-filter-trigger,
+.temporal-value-filter {
+  min-height: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #075f52;
+  font-weight: 400;
+}
+
+.date-filter-trigger {
+  color: #667085;
+  font-size: 0.9rem;
+}
+
+.temporal-value-filter {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 0.15em;
+}
+
+.date-filter {
+  z-index: 110;
+}
+
+.date-filter[hidden] {
+  display: none;
+}
+
+.date-filter-panel {
+  box-sizing: border-box;
+  width: min(30rem, 100%);
+  padding: 1rem;
+}
+
+.date-filter-panel h3,
+.date-filter-panel p {
+  margin: 0 0 0.75rem;
+}
+
+.date-filter-panel .dialog-close {
+  float: right;
+  min-width: 2rem;
+  min-height: 2rem;
+  padding: 0;
+  border-radius: 50%;
+}
+
+.date-presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  margin-bottom: 1rem;
+}
+
+.date-presets button {
+  min-height: 1.9rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.8rem;
+}
+
+.date-range-form {
+  display: grid;
+  grid-template-columns: 9rem 9rem auto;
+  align-items: end;
+  gap: 0.5rem;
+  justify-content: start;
+}
+
+.date-range-form label {
+  display: grid;
+  gap: 0.2rem;
+  min-width: 0;
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.iso-date-input {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr auto;
+}
+
+.iso-date-input > input[type='text'] {
+  width: 100%;
+  min-width: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.date-picker-button {
+  min-width: 2.35rem;
+  padding: 0.35rem;
+  border-left: 0;
+  border-color: #b8c1cc;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  color: #075f52;
+  background: #fff;
+}
+
+.native-date-picker {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  opacity: 0;
+  pointer-events: none;
+}
+
+input,
+select,
+button {
+  min-height: 2.35rem;
+  box-sizing: border-box;
+  padding: 0.45rem 0.6rem;
+  border: 1px solid #b8c1cc;
+  border-radius: 0.25rem;
+  background: #fff;
+  color: inherit;
+  font: inherit;
+}
+
+.column-picker-trigger,
+.secondary-button {
+  border-color: #81b8ad;
+  background: #fff;
+  color: #075f52;
+}
+
+.column-picker {
+  position: fixed;
+  z-index: 100;
+  width: min(24rem, calc(100vw - 1rem));
+  max-height: calc(100vh - 1rem);
+  padding: 0.8rem;
+  overflow: auto;
+}
+
+.column-picker[hidden] {
+  display: none;
+}
+
+.column-picker-heading,
+.column-picker-actions,
+.column-picker li,
+.column-picker label,
+.column-move-actions {
+  display: flex;
+  align-items: center;
+}
+
+.column-picker-heading {
+  justify-content: space-between;
+}
+
+.column-picker h3,
+.column-picker p {
+  margin: 0;
+}
+
+.column-picker p {
+  margin-top: 0.25rem;
+  color: #667085;
+  font-size: 0.75rem;
+}
+
+.column-picker-list {
+  display: grid;
+  gap: 0.25rem;
+  margin: 0.75rem 0;
+  padding: 0;
+  list-style: none;
+}
+
+.column-picker li {
+  gap: 0.4rem;
+  padding: 0.3rem;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  background: #f8fafb;
+}
+
+.column-picker li.dragging {
+  border-color: #81b8ad;
+  opacity: 0.55;
+}
+
+.column-drag-handle {
+  color: #98a2b3;
+  cursor: grab;
+}
+
+.column-picker label {
+  flex: 1;
+  gap: 0.4rem;
+  min-width: 0;
+}
+
+.column-picker label span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.column-picker input[type='checkbox'] {
+  min-height: 0;
+}
+
+.column-move-actions {
+  gap: 0.2rem;
+}
+
+.column-move-actions button,
+.column-picker .dialog-close {
+  min-width: 1.7rem;
+  min-height: 1.7rem;
+  padding: 0;
+}
+
+.column-picker-actions {
+  justify-content: flex-end;
+  gap: 0.4rem;
+}
+
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+select:focus-visible {
+  outline: 3px solid #f2b84b;
+  outline-offset: 2px;
+}
+
+button {
+  border-color: #075f52;
+  background: #075f52;
+  color: #fff;
+  cursor: pointer;
+  font-weight: 700;
+}
+
+.active-filters {
+  position: sticky;
+  top: var(--table-toolbar-height, 0);
+  z-index: 29;
+  display: flex;
+  align-items: center;
+  padding: 0.85rem 1rem;
+  border-top: 0;
+  border-radius: 0;
+  background: #eaf5f2;
+}
+
+.filter-chips {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  max-width: 100%;
+  padding: 0.3rem 0.5rem;
+  border: 1px solid #81b8ad;
+  border-radius: 0.25rem;
+  background: #fff;
+  font-size: 0.85rem;
+}
+
+.filter-chip strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.95rem;
+}
+
+.filter-chip small {
+  color: #667085;
+  font-size: 0.75rem;
+}
+
+.clear-all {
+  margin-left: 0.25rem;
+  color: #667085;
+  font-size: 0.8rem;
+}
+
+.remove-filter {
+  color: #98a2b3;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1;
+  text-decoration: none;
+}
+
+.data-section {
+  padding: 0;
+  border-top: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.table-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+}
+
+.table-heading-actions,
+.table-pagination {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+
+.table-heading-actions {
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.rows-control,
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.rows-control label {
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.rows-control select {
+  min-height: 1.75rem;
+  padding: 0.1rem 1.6rem 0.1rem 0.4rem;
+  font-size: 0.8rem;
+}
+
+.pagination a,
+.pagination .disabled {
+  min-width: 1.5rem;
+  text-align: center;
+}
+
+.pagination input {
+  width: 3.8rem;
+  min-height: 1.75rem;
+  padding: 0.1rem 0.3rem;
+  font-size: 0.8rem;
+  text-align: center;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.table-meta p {
+  margin: 0;
+}
+
+.notice {
+  color: #8a4b08;
+  font-size: 0.875rem;
+}
+
+.table-scroll {
+  overflow-x: auto;
+  border-top: 1px solid #d9dee8;
+  border-bottom: 1px solid #d9dee8;
+  scrollbar-width: none;
+}
+
+[data-restore-table-scroll] .table-scroll {
+  visibility: hidden;
+}
+
+.table-scroll::-webkit-scrollbar {
+  height: 0;
+}
+
+.data-table {
+  white-space: nowrap;
+}
+
+.data-table tbody tr:hover {
+  background: #f3f8f7;
+}
+
+.data-table th {
+  vertical-align: bottom;
+  background: #f8fafb;
+  box-shadow: 0 0.35rem 0.5rem -0.5rem rgba(23, 32, 51, 0.65);
+}
+
+.floating-table-header {
+  position: fixed;
+  top: 0;
+  z-index: 20;
+  display: none;
+  overflow: hidden;
+  border-bottom: 1px solid #d9dee8;
+  background: #f8fafb;
+  box-shadow: 0 0.35rem 0.7rem rgba(23, 32, 51, 0.18);
+}
+
+.floating-table-header.visible {
+  display: block;
+}
+
+.floating-horizontal-scroll {
+  position: sticky;
+  z-index: 21;
+  display: none;
+  box-sizing: border-box;
+  height: 1rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  border-top: 1px solid #d7dde5;
+  border-bottom: 1px solid #bfc8d3;
+  background: #eef2f4;
+  scrollbar-color: #8d969f #eef2f4;
+}
+
+.floating-horizontal-scroll.visible {
+  display: block;
+}
+
+.floating-horizontal-scroll-width {
+  height: 1px;
+}
+
+.floating-table-header .data-table {
+  table-layout: fixed;
+}
+
+.floating-table-header th {
+  box-sizing: border-box;
+}
+
+.floating-table-header th.record-link-column {
+  z-index: 2;
+}
+
+.data-table td {
+  max-width: 28rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.value-filter {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  color: inherit;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+  white-space: nowrap;
+  text-decoration-color: #81b8ad;
+  text-decoration-style: dotted;
+}
+
+.value-filter:hover {
+  color: #075f52;
+  text-decoration-style: solid;
+}
+
+.relationship-link {
+  margin-left: 0.4rem;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.column-heading {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.column-heading .column-name {
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: #98a2b3;
+  text-underline-offset: 0.2em;
+}
+
+.group-link,
+.secondary-link {
+  margin-left: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 400;
+}
+
+.record-link-column {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  background: rgba(248, 250, 251, 0.94);
+  box-shadow: 0.45rem 0 0.65rem -0.65rem rgba(23, 32, 51, 0.8);
+  backdrop-filter: blur(3px);
+  font-weight: 600;
+}
+
+.pagination .disabled {
+  color: #98a2b3;
+}
+
+.null,
+.binary,
+.empty {
+  color: #667085;
+  font-style: italic;
+}
+
+.boolean,
+.number {
+  font-variant-numeric: tabular-nums;
+}
+
+.structured {
+  white-space: pre-wrap;
+}
+
+.record-section,
+.relationship-section {
+  margin-top: 1rem;
+}
+
+.record-section {
+  padding: 0;
+  overflow: hidden;
+}
+
+.relationship-section {
+  padding: 1rem;
+}
+
+.relationship-section h3 {
+  margin-bottom: 0.4rem;
+}
+
+.record-fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin: 0;
+}
+
+.record-fields > div {
+  display: grid;
+  grid-template-columns: minmax(7rem, 30%) minmax(0, 1fr);
+  align-items: baseline;
+  gap: 0.65rem;
+  min-width: 0;
+  padding: 0.65rem 0.75rem;
+  border-bottom: 1px solid #d9dee8;
+}
+
+.record-fields > div:nth-child(odd) {
+  border-right: 1px solid #d9dee8;
+}
+
+.record-fields dt,
+.record-fields dd {
+  min-width: 0;
+  margin: 0;
+}
+
+.record-fields dt {
+  font-weight: 700;
+  overflow-wrap: anywhere;
+}
+
+.record-fields dd {
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.record-fields dd.related-record-value {
+  white-space: normal;
+}
+
+.text-preview {
+  display: block;
+  width: 100%;
+  min-height: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font-weight: 400;
+  text-align: left;
+}
+
+.text-preview span {
+  display: block;
+}
+
+.text-preview small {
+  display: block;
+  margin-top: 0.25rem;
+  color: #075f52;
+  font-weight: 700;
+}
+
+.json-preview {
+  min-height: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #075f52;
+  font-weight: 700;
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+
+.deferred-value-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.deferred-value-view,
+.deferred-value-copy {
+  min-height: 0;
+  padding: 0.1rem 0.25rem;
+  border: 0;
+  background: transparent;
+  color: #075f52;
+}
+
+.deferred-value-view {
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+
+.deferred-value-copy {
+  display: inline-grid;
+  place-items: center;
+}
+
+.deferred-value-copy svg {
+  width: 1rem;
+  height: 1rem;
+  fill: currentColor;
+}
+
+.deferred-copy-status {
+  color: #667085;
+  font-size: 0.7rem;
+}
+
+.deferred-value-summary {
+  color: #667085;
+  font-size: 0.75rem;
+}
+
+.deferred-value-summary::before {
+  content: '· ';
+}
+
+.deferred-dialog-copy {
+  position: sticky;
+  top: 0;
+  float: right;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  margin-right: 0.3rem;
+}
+
+.deferred-dialog-copy .deferred-value-copy {
+  min-width: 2rem;
+  min-height: 2rem;
+}
+
+.deferred-value-popover {
+  position: fixed;
+  z-index: 100;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: min(32rem, calc(100vw - 1rem));
+  max-height: min(28rem, calc(100vh - 1rem));
+  padding: 0.7rem 2.4rem 0.7rem 0.8rem;
+  overflow: auto;
+}
+
+.deferred-value-popover[hidden] {
+  display: none;
+}
+
+.deferred-value-popover .dialog-close {
+  position: sticky;
+  top: 0.3rem;
+  float: right;
+  margin: -0.4rem -2.1rem 0 0.4rem;
+  min-width: 1.6rem;
+  min-height: 1.6rem;
+  padding: 0;
+  border-radius: 50%;
+  line-height: 1;
+}
+
+.deferred-value-popover pre {
+  margin: 0;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  font: inherit;
+}
+
+.text-dialog[hidden] {
+  display: none;
+}
+
+.text-dialog-panel {
+  position: relative;
+  width: min(52rem, calc(100% - 3rem));
+  max-height: calc(100vh - 3rem);
+  padding: 1.25rem;
+  overflow: auto;
+}
+
+.text-dialog .dialog-close {
+  position: sticky;
+  top: 0;
+  float: right;
+  min-width: 2rem;
+  min-height: 2rem;
+  padding: 0;
+  border-radius: 50%;
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+.text-dialog pre {
+  margin: 0;
+  padding-right: 2.5rem;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  font: inherit;
+}
+
+.relationship-list {
+  display: grid;
+  gap: 0.5rem;
+  padding-left: 1.25rem;
+}
+
+.relationship-list small {
+  margin-left: 0.5rem;
+}
+
+.related-records {
+  border-top: 1px solid #d9dee8;
+}
+
+.related-records header {
+  display: flex;
+  align-items: baseline;
+  gap: 0.65rem;
+  padding: 0.5rem 0 0;
+}
+
+.related-records h4 {
+  margin: 0;
+}
+
+.related-records ul {
+  margin: 0.4rem 0;
+}
+
+.empty-related-records {
+  margin: 0.4rem 0;
+  color: var(--theme-muted);
+}
+
+.related-records > .secondary-link {
+  display: inline-block;
+  margin: 0.1rem 0 0.35rem;
+}
+
+.empty-state {
+  padding: 2rem;
+  color: #667085;
+  text-align: left;
+}
+
+@media (max-width: 60rem) {
+  .table-page-heading {
+    flex-wrap: wrap;
+  }
+
+  .table-search {
+    order: 3;
+    flex-basis: 100%;
+    width: 100%;
+  }
+}
+
+@media (max-width: 40rem) {
+  body > header,
+  .page-heading,
+  .table-meta {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  body > header nav {
+    margin-top: 0.5rem;
+  }
+
+  .record-fields > div {
+    grid-template-columns: minmax(6rem, 35%) minmax(0, 1fr);
+    border-right: 0;
+  }
+
+  .record-fields {
+    grid-template-columns: 1fr;
+  }
+
+  .date-range-form {
+    grid-template-columns: 1fr;
+  }
+
+  .date-range-form > button {
+    width: 100%;
+  }
+}
+
+dl.summary {
+  display: flex;
+  gap: 2rem;
+}
+
+dl.summary div {
+  display: flex;
+  gap: 0.5rem;
+}
+
+dl.summary dt {
+  font-weight: 700;
+}
+
+section.namespace {
+  margin-top: 1rem;
+}
+
+.database-diagram[hidden] {
+  display: none;
+}
+
+.database-diagram {
+  padding: 0.75rem;
+}
+
+.database-diagram-shell {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.database-diagram-heading,
+.database-diagram-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.7rem 1rem;
+  border-bottom: 1px solid var(--theme-border-strong);
+}
+
+.database-diagram-heading h2,
+.database-diagram-heading p,
+.database-diagram-toolbar p {
+  margin: 0;
+}
+
+.database-diagram-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.database-diagram-actions button {
+  min-width: 2.25rem;
+}
+
+.database-diagram-toolbar input {
+  width: min(22rem, 40vw);
+}
+
+.database-diagram-help,
+.database-diagram-kind {
+  color: var(--theme-muted);
+}
+
+.database-diagram-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 20rem;
+  min-height: 0;
+}
+
+.database-diagram-canvas {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background-color: var(--diagram-canvas);
+  background-image:
+    linear-gradient(var(--diagram-grid) 1px, transparent 1px),
+    linear-gradient(90deg, var(--diagram-grid) 1px, transparent 1px);
+  background-size: 24px 24px;
+}
+
+.database-diagram-status {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 1;
+  margin: 0;
+  transform: translate(-50%, -50%);
+}
+
+.database-diagram-canvas svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+  touch-action: none;
+}
+
+.database-diagram-canvas svg.panning {
+  cursor: grabbing;
+}
+
+.database-diagram-edge {
+  fill: none;
+  stroke: var(--diagram-edge);
+  stroke-width: 1.5;
+  vector-effect: non-scaling-stroke;
+}
+
+.database-diagram-edge.inferred {
+  stroke-dasharray: 5 4;
+}
+
+#database-diagram-arrow path {
+  fill: var(--diagram-edge);
+}
+
+.database-diagram-node {
+  cursor: pointer;
+}
+
+.database-diagram-node rect {
+  fill: var(--diagram-node);
+  stroke: var(--theme-border-strong);
+  stroke-width: 1.5;
+  vector-effect: non-scaling-stroke;
+}
+
+.database-diagram-node.search-match rect {
+  stroke: var(--theme-important);
+  stroke-width: 3;
+}
+
+.database-diagram-node:hover rect,
+.database-diagram-node:focus rect {
+  fill: var(--diagram-node-selected);
+  stroke: var(--theme-accent);
+  stroke-width: 2.5;
+  outline: none;
+}
+
+.database-diagram-node.selected rect {
+  fill: var(--diagram-node-selected);
+  stroke: var(--theme-accent);
+  stroke-width: 3;
+  outline: none;
+}
+
+.database-diagram-node:focus {
+  outline: none;
+}
+
+.database-diagram-node-name {
+  fill: var(--theme-text);
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.database-diagram-node-namespace {
+  fill: var(--theme-muted);
+  font-size: 11px;
+}
+
+.database-diagram-details {
+  min-width: 0;
+  padding: 1rem;
+  overflow: auto;
+  border-left: 1px solid var(--theme-border-strong);
+  overscroll-behavior: contain;
+}
+
+.database-diagram-details h3,
+.database-diagram-details p {
+  margin-top: 0;
+  overflow-wrap: anywhere;
+}
+
+.database-diagram-details dl {
+  margin: 1rem 0 0;
+}
+
+.database-diagram-details dl div {
+  padding: 0.45rem 0;
+  border-top: 1px solid var(--theme-border-strong);
+}
+
+.database-diagram-details dt {
+  font-weight: 700;
+  overflow-wrap: anywhere;
+}
+
+.database-diagram-details dd {
+  margin: 0.1rem 0 0;
+  color: var(--theme-muted);
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 50rem) {
+  .database-diagram {
+    padding: 0;
+  }
+
+  .database-diagram-shell {
+    border-radius: 0;
+  }
+
+  .database-diagram-heading,
+  .database-diagram-toolbar {
+    align-items: flex-start;
+  }
+
+  .database-diagram-toolbar {
+    flex-direction: column;
+  }
+
+  .database-diagram-toolbar input {
+    width: min(22rem, calc(100vw - 2rem));
+  }
+
+  .database-diagram-body {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(16rem, 1fr) minmax(8rem, 35%);
+  }
+
+  .database-diagram-details {
+    border-top: 1px solid var(--theme-border-strong);
+    border-left: 0;
+  }
+}
+
+.relation-cell {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.relation-schema {
+  position: relative;
+}
+
+.relation-schema summary {
+  display: grid;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 1px solid var(--theme-border-strong);
+  border-radius: 50%;
+  color: var(--theme-muted);
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1;
+  cursor: pointer;
+  list-style: none;
+  place-items: center;
+}
+
+.relation-schema summary::-webkit-details-marker {
+  display: none;
+}
+
+.relation-schema summary:hover,
+.relation-schema summary:focus-visible,
+.relation-schema[open] summary {
+  border-color: var(--theme-accent);
+  color: var(--theme-accent);
+  outline: none;
+}
+
+.schema-popover {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 100;
+  width: min(44rem, calc(100vw - 3rem));
+  max-height: calc(100vh - 3rem);
+  padding: 1rem;
+  overflow: auto;
+  overscroll-behavior: contain;
+  transform: translate(-50%, -50%);
+}
+
+.schema-popover .dialog-close {
+  position: sticky;
+  top: 0;
+  float: right;
+  min-width: 1.75rem;
+  min-height: 1.75rem;
+  margin: -0.25rem -0.25rem 0 0.5rem;
+  padding: 0;
+  border-radius: 50%;
+  font-size: 1.1rem;
+  line-height: 1;
+}
+
+.schema-popover-heading {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+}
+
+.schema-popover-heading h4,
+.schema-popover-heading p {
+  margin: 0;
+}
+
+.schema-table-scroll {
+  overflow-x: auto;
+}
+
+.schema-table {
+  min-width: 36rem;
+  font-size: 0.875rem;
+}
+
+.schema-table th,
+.schema-table td {
+  vertical-align: top;
+}
+
+.schema-table tbody th {
+  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+}
+
+.schema-key {
+  display: block;
+  width: max-content;
+  color: var(--theme-accent);
+  font-size: 0.8rem;
+  font-weight: 700;
+}
+
+.schema-empty {
+  color: var(--theme-muted);
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th,
+td {
+  padding: 0.5rem;
+  border-bottom: 1px solid #d9dee8;
+  text-align: left;
+}
+
+/* Light theme */
+body {
+  color: var(--light-text);
+  background:
+    radial-gradient(circle at 88% -8%, rgb(25 125 153 / 12%), transparent 28rem),
+    var(--light-canvas);
+}
+
+a,
+.text-preview-toggle,
+.json-value-toggle {
+  color: var(--theme-link);
+}
+
+a:hover,
+.text-preview-toggle:hover,
+.json-value-toggle:hover {
+  color: var(--theme-link-hover);
+}
+
+body > header .brand {
+  color: var(--light-text);
+}
+
+body > header .brand strong {
+  color: var(--light-cool-bright);
+}
+
+body > header .brand span,
+body > header small,
+.eyebrow,
+.database-summary dt,
+.table-search-icon,
+.filter-label,
+.filter-remove,
+.page-jump-label,
+.empty-state {
+  color: var(--light-muted);
+}
+
+.database-summary {
+  background: rgb(255 255 255 / 98%);
+}
+
+section {
+  border-color: var(--light-border);
+  background: var(--light-surface);
+  box-shadow: 0 0.65rem 1.6rem rgb(38 52 59 / 8%);
+}
+
+.table-page-heading {
+  background: var(--light-surface);
+  box-shadow: 0 0.35rem 0.9rem rgb(38 52 59 / 11%);
+}
+
+input,
+select,
+button,
+.text-preview-dialog,
+.json-value-dialog {
+  color: var(--light-text);
+  border-color: var(--light-border-strong);
+  background: var(--light-surface-raised);
+}
+
+input::placeholder {
+  color: var(--light-muted);
+}
+
+button {
+  color: #fff;
+  border-color: var(--theme-primary);
+  background: var(--theme-primary);
+}
+
+button:hover {
+  border-color: var(--theme-primary-hover);
+  background: var(--theme-primary-hover);
+}
+
+.date-filter-trigger,
+.temporal-value-filter,
+.date-filter-trigger:hover,
+.temporal-value-filter:hover {
+  border: 0;
+  background: transparent;
+}
+
+.date-filter-trigger {
+  color: var(--light-muted);
+}
+
+.date-filter-trigger:hover {
+  color: var(--light-cool-bright);
+}
+
+.temporal-value-filter {
+  color: var(--theme-data-action);
+}
+
+.temporal-value-filter:hover {
+  color: var(--theme-data-action-hover);
+}
+
+.group-link,
+.secondary-link {
+  color: var(--theme-utility);
+}
+
+.group-link:hover,
+.secondary-link:hover {
+  color: var(--light-teal-bright);
+}
+
+.active-filters {
+  border-color: var(--light-border);
+  border-left: 0.25rem solid var(--light-green);
+  background: #edf4e8;
+}
+
+.filter-chip {
+  border-color: #b8c8ad;
+  background: var(--light-surface-raised);
+}
+
+.filter-chip strong,
+.relationship-link {
+  color: var(--light-green);
+}
+
+.filter-chip strong:hover,
+.relationship-link:hover {
+  color: var(--light-green-bright);
+}
+
+.notice {
+  color: var(--theme-warning);
+}
+
+.filter-chip small,
+.clear-all,
+.remove-filter,
+.column-picker p,
+.column-drag-handle,
+.deferred-copy-status,
+.deferred-value-summary {
+  color: var(--light-muted);
+}
+
+.table-scroll {
+  border-color: var(--light-border);
+}
+
+.data-table tbody tr:hover td {
+  background: #edf5f4;
+}
+
+.data-table th,
+.floating-table-header,
+.floating-table-header table {
+  background: #edf3f5;
+}
+
+.floating-table-header,
+.floating-horizontal-scroll {
+  border-color: var(--light-border);
+  box-shadow: 0 0.4rem 0.9rem rgb(38 52 59 / 14%);
+}
+
+.record-link-column {
+  background: rgb(242 247 248 / 97%);
+}
+
+.data-table tbody tr:hover .record-link-column {
+  background: rgb(230 241 240 / 98%);
+}
+
+.disabled,
+.null,
+.related-empty,
+.empty {
+  color: var(--light-muted);
+}
+
+.binary {
+  color: var(--light-brown);
+}
+
+.boolean {
+  color: var(--theme-metadata);
+}
+
+.number {
+  color: var(--light-blue);
+}
+
+.value-filter {
+  color: var(--light-text);
+  text-decoration-color: var(--light-teal);
+}
+
+.value-filter:hover {
+  color: var(--theme-data-action-hover);
+  text-decoration-color: var(--theme-data-action);
+}
+
+.record-fields dt,
+.schema-table tbody th {
+  color: var(--theme-metadata);
+}
+
+.schema-key {
+  color: var(--light-green);
+}
+
+.record-fields,
+.record-fields > div,
+.related-records,
+th,
+td {
+  border-color: var(--light-border);
+}
+
+.text-preview,
+.text-preview:hover {
+  color: var(--light-text);
+  border: 0;
+  background: transparent;
+}
+
+.text-preview small,
+.json-preview,
+.deferred-value-view,
+.deferred-value-copy {
+  color: var(--theme-utility);
+  border: 0;
+  background: transparent;
+}
+
+.text-preview:hover small,
+.json-preview:hover,
+.deferred-value-view:hover,
+.deferred-value-copy:hover {
+  color: var(--light-teal-bright);
+  border: 0;
+  background: transparent;
+}
+
+.column-picker-trigger,
+.date-picker-button,
+.secondary-button {
+  color: var(--light-cool-bright);
+  border-color: var(--light-border-strong);
+  background: var(--light-surface-raised);
+}
+
+.column-picker-trigger:hover,
+.date-picker-button:hover,
+.secondary-button:hover {
+  color: var(--light-cool-bright);
+  border-color: var(--light-cool);
+  background: #edf4f5;
+}
+
+.column-picker li {
+  background: #f2f6f7;
+}
+
+.column-picker li.dragging {
+  border-color: var(--light-cool);
+}
+
+.column-move-actions button,
+.deferred-dialog-copy button {
+  color: var(--light-text);
+  border-color: var(--light-border-strong);
+  background: var(--light-surface-raised);
+}
+
+.column-move-actions button:hover,
+.deferred-dialog-copy button:hover {
+  color: var(--light-cool-bright);
+  border-color: var(--light-cool);
+  background: #edf4f5;
+}
+
+/* Dark theme */
+:root[data-theme='dark'] {
+  color-scheme: dark;
+  --dark-canvas: #101213;
+  --dark-surface: #17191b;
+  --dark-surface-raised: #202326;
+  --dark-border: #34383c;
+  --dark-border-strong: #4a5055;
+  --dark-text: #d8dadb;
+  --dark-muted: #92989d;
+  --dark-accent: #f39819;
+  --dark-accent-bright: #ffb044;
+  --dark-cool: #18a8c7;
+  --dark-cool-bright: #41c5df;
+  --dark-state: #91ad58;
+  --dark-blue: #4aa5d8;
+  --dark-blue-bright: #70bce8;
+  --dark-green: #91ad58;
+  --dark-green-bright: #b0ca72;
+  --dark-yellow: #d7ba7d;
+  --dark-brown: #b88a5a;
+  --dark-teal: #4db6ac;
+  --theme-text: var(--dark-text);
+  --theme-surface-raised: var(--dark-surface-raised);
+  --theme-border-strong: var(--dark-border-strong);
+  --theme-muted: var(--dark-muted);
+  --theme-accent: var(--dark-cool);
+  --theme-link: var(--dark-blue);
+  --theme-link-hover: var(--dark-blue-bright);
+  --theme-primary: var(--dark-accent);
+  --theme-primary-hover: var(--dark-accent-bright);
+  --theme-data-action: var(--dark-green);
+  --theme-data-action-hover: var(--dark-green-bright);
+  --theme-utility: var(--dark-teal);
+  --theme-metadata: var(--dark-yellow);
+  --theme-warning: var(--dark-brown);
+  --theme-overlay: rgb(2 6 13 / 78%);
+  --theme-popup-shadow: 0 0.8rem 2rem rgb(0 0 0 / 55%);
+  --theme-control-surface: var(--dark-surface);
+  --theme-control-text: var(--dark-text);
+  --theme-important: var(--dark-accent-bright);
+  --diagram-canvas: #0d1011;
+  --diagram-grid: #1b2023;
+  --diagram-edge: #68747b;
+  --diagram-node: var(--dark-surface-raised);
+  --diagram-node-selected: #183239;
+}
+
+[data-theme='dark'] body {
+  color: var(--dark-text);
+  background:
+    radial-gradient(circle at 85% -10%, rgb(24 88 106 / 20%), transparent 30rem),
+    var(--dark-canvas);
+}
+
+[data-theme='dark'] a,
+[data-theme='dark'] .text-preview-toggle,
+[data-theme='dark'] .json-value-toggle {
+  color: var(--theme-link);
+}
+
+[data-theme='dark'] a:hover,
+[data-theme='dark'] .text-preview-toggle:hover,
+[data-theme='dark'] .json-value-toggle:hover {
+  color: var(--theme-link-hover);
+}
+
+[data-theme='dark'] body > header .brand {
+  color: var(--dark-text);
+}
+
+[data-theme='dark'] body > header .brand strong {
+  color: var(--dark-cool-bright);
+}
+
+[data-theme='dark'] body > header .brand span,
+[data-theme='dark'] body > header small,
+[data-theme='dark'] .eyebrow,
+[data-theme='dark'] .database-summary dt,
+[data-theme='dark'] .table-search-icon,
+[data-theme='dark'] .filter-label,
+[data-theme='dark'] .filter-remove,
+[data-theme='dark'] .page-jump-label,
+[data-theme='dark'] .empty-state {
+  color: var(--dark-muted);
+}
+
+[data-theme='dark'] .database-summary {
+  background: rgb(23 25 27 / 97%);
+}
+
+[data-theme='dark'] section {
+  border-color: var(--dark-border);
+  background: var(--dark-surface);
+  box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 18%);
+}
+
+[data-theme='dark'] .table-page-heading {
+  background: var(--dark-surface);
+  box-shadow: 0 0.4rem 1rem rgb(0 0 0 / 24%);
+}
+
+[data-theme='dark'] input,
+[data-theme='dark'] select,
+[data-theme='dark'] button,
+[data-theme='dark'] .text-preview-dialog,
+[data-theme='dark'] .json-value-dialog {
+  color: var(--dark-text);
+  border-color: var(--dark-border-strong);
+  background: var(--dark-surface-raised);
+}
+
+[data-theme='dark'] input::placeholder {
+  color: var(--dark-muted);
+}
+
+[data-theme='dark'] button {
+  color: #1b1308;
+  border-color: var(--theme-primary);
+  background: var(--theme-primary);
+}
+
+[data-theme='dark'] button:hover {
+  border-color: var(--theme-primary-hover);
+  background: var(--theme-primary-hover);
+}
+
+[data-theme='dark'] .date-filter-trigger,
+[data-theme='dark'] .temporal-value-filter,
+[data-theme='dark'] .date-filter-trigger:hover,
+[data-theme='dark'] .temporal-value-filter:hover {
+  border: 0;
+  background: transparent;
+}
+
+[data-theme='dark'] .date-filter-trigger {
+  color: var(--dark-muted);
+}
+
+[data-theme='dark'] .date-filter-trigger:hover {
+  color: var(--dark-cool-bright);
+}
+
+[data-theme='dark'] .temporal-value-filter {
+  color: var(--theme-data-action);
+}
+
+[data-theme='dark'] .temporal-value-filter:hover {
+  color: var(--theme-data-action-hover);
+}
+
+[data-theme='dark'] .popup-surface .dialog-close {
+  color: var(--theme-control-text);
+  border-color: var(--theme-border-strong);
+  background: var(--theme-control-surface);
+}
+
+[data-theme='dark'] .popup-surface .dialog-close:hover {
+  color: var(--theme-accent);
+  border-color: var(--theme-accent);
+  background: var(--theme-control-surface);
+}
+
+[data-theme='dark'] .group-link,
+[data-theme='dark'] .secondary-link {
+  color: var(--theme-utility);
+}
+
+[data-theme='dark'] .group-link:hover,
+[data-theme='dark'] .secondary-link:hover {
+  color: var(--dark-cool-bright);
+}
+
+[data-theme='dark'] .active-filters {
+  border-color: var(--dark-border);
+  border-left-color: var(--dark-state);
+  background: #1c201d;
+}
+
+[data-theme='dark'] .filter-chip {
+  border-color: var(--dark-border-strong);
+  background: var(--dark-surface-raised);
+}
+
+[data-theme='dark'] .filter-chip strong,
+[data-theme='dark'] .relationship-link {
+  color: var(--dark-state);
+}
+
+[data-theme='dark'] .filter-chip strong:hover,
+[data-theme='dark'] .relationship-link:hover {
+  color: var(--dark-green-bright);
+}
+
+[data-theme='dark'] .notice {
+  color: var(--theme-warning);
+}
+
+[data-theme='dark'] .filter-chip small,
+[data-theme='dark'] .clear-all,
+[data-theme='dark'] .remove-filter,
+[data-theme='dark'] .column-picker p,
+[data-theme='dark'] .column-drag-handle,
+[data-theme='dark'] .deferred-copy-status,
+[data-theme='dark'] .deferred-value-summary {
+  color: var(--dark-muted);
+}
+
+[data-theme='dark'] .table-scroll {
+  border-color: var(--dark-border);
+}
+
+[data-theme='dark'] .data-table tbody tr:hover td {
+  background: #24282a;
+}
+
+[data-theme='dark'] .data-table th,
+[data-theme='dark'] .floating-table-header,
+[data-theme='dark'] .floating-table-header table,
+[data-theme='dark'] .floating-horizontal-scroll {
+  background: var(--dark-surface-raised);
+}
+
+[data-theme='dark'] .floating-table-header,
+[data-theme='dark'] .floating-horizontal-scroll {
+  border-color: var(--dark-border);
+  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 35%);
+}
+
+[data-theme='dark'] .floating-horizontal-scroll {
+  scrollbar-color: #a6a6a6 var(--dark-surface-raised);
+}
+
+[data-theme='dark'] .floating-horizontal-scroll::-webkit-scrollbar-track {
+  background: var(--dark-surface-raised);
+}
+
+[data-theme='dark'] .floating-horizontal-scroll::-webkit-scrollbar-thumb {
+  border-color: var(--dark-surface-raised);
+  background: #a6a6a6;
+}
+
+[data-theme='dark'] .floating-horizontal-scroll::-webkit-scrollbar-thumb:hover {
+  background: #c0c0c0;
+}
+
+[data-theme='dark'] .data-table .horizontal-scroll-clearance td {
+  background: var(--dark-surface-raised);
+}
+
+[data-theme='dark'] .data-table .record-link-column,
+[data-theme='dark'] .floating-table-header .record-link-column {
+  background: rgb(27 30 32 / 97%);
+}
+
+[data-theme='dark'] .data-table tbody tr:hover .record-link-column {
+  background: rgb(36 40 42 / 98%);
+}
+
+[data-theme='dark'] .disabled,
+[data-theme='dark'] .null,
+[data-theme='dark'] .related-empty,
+[data-theme='dark'] .empty {
+  color: var(--dark-muted);
+}
+
+[data-theme='dark'] .binary {
+  color: var(--dark-brown);
+}
+
+[data-theme='dark'] .boolean {
+  color: var(--dark-yellow);
+}
+
+[data-theme='dark'] .number {
+  color: var(--dark-blue-bright);
+}
+
+[data-theme='dark'] .value-filter {
+  color: var(--dark-text);
+  text-decoration-color: var(--dark-teal);
+}
+
+[data-theme='dark'] .value-filter:hover {
+  color: var(--theme-data-action-hover);
+  text-decoration-color: var(--theme-data-action);
+}
+
+[data-theme='dark'] .record-fields dt,
+[data-theme='dark'] .schema-table tbody th {
+  color: var(--theme-metadata);
+}
+
+[data-theme='dark'] .schema-key {
+  color: var(--dark-green);
+}
+
+[data-theme='dark'] .record-fields,
+[data-theme='dark'] .record-fields > div,
+[data-theme='dark'] .related-records,
+[data-theme='dark'] th,
+[data-theme='dark'] td {
+  border-color: var(--dark-border);
+}
+
+[data-theme='dark'] .text-preview,
+[data-theme='dark'] .text-preview:hover {
+  color: var(--dark-text);
+  border: 0;
+  background: transparent;
+}
+
+[data-theme='dark'] .text-preview small,
+[data-theme='dark'] .json-preview,
+[data-theme='dark'] .deferred-value-view,
+[data-theme='dark'] .deferred-value-copy {
+  color: var(--theme-utility);
+  border: 0;
+  background: transparent;
+}
+
+[data-theme='dark'] .text-preview:hover small,
+[data-theme='dark'] .json-preview:hover,
+[data-theme='dark'] .deferred-value-view:hover,
+[data-theme='dark'] .deferred-value-copy:hover {
+  color: var(--dark-cool-bright);
+  border: 0;
+  background: transparent;
+}
+
+[data-theme='dark'] .column-picker-trigger,
+[data-theme='dark'] .date-picker-button,
+[data-theme='dark'] .secondary-button {
+  color: var(--dark-cool-bright);
+  border-color: var(--dark-border-strong);
+  background: var(--dark-surface-raised);
+}
+
+[data-theme='dark'] .column-picker-trigger:hover,
+[data-theme='dark'] .date-picker-button:hover,
+[data-theme='dark'] .secondary-button:hover {
+  color: var(--dark-cool-bright);
+  border-color: var(--dark-cool);
+  background: #292d30;
+}
+
+[data-theme='dark'] .column-picker li {
+  background: var(--dark-surface);
+}
+
+[data-theme='dark'] .column-picker li.dragging {
+  border-color: var(--dark-cool);
+}
+
+[data-theme='dark'] .column-move-actions button,
+[data-theme='dark'] .deferred-dialog-copy button {
+  color: var(--dark-text);
+  border-color: var(--dark-border-strong);
+  background: var(--dark-surface);
+}
+
+[data-theme='dark'] .column-move-actions button:hover,
+[data-theme='dark'] .deferred-dialog-copy button:hover {
+  color: var(--dark-cool-bright);
+  border-color: var(--dark-cool);
+  background: #292d30;
+}