/* Features-specific functional specimens. Global page anatomy lives in app.css; shared reference-content anatomy lives in reference.css. */
.feature-mode-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(180px, auto);
  gap: var(--ui-gap-7);
  align-items: end;
}

.feature-sign-control {
  min-height: 32px;
}



.feature-table-controls {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: var(--ui-gap-7);
  align-items: end;
}

.feature-table-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ui-gap-7);
  color: var(--muted);
  font-size: 0.72rem;
}

.feature-table-summary strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
}

.feature-scientific-table-shell {
  --data-table-max-height: 300px;
}

.feature-table-id {
  color: var(--text);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .feature-mode-controls,
  .feature-table-controls { grid-template-columns: 1fr; }
  .feature-table-summary { justify-content: flex-start; }
}

.feature-file-summary {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(80px, auto));
  gap: var(--ui-gap-7);
  align-items: baseline;
  padding: var(--panel-card-padding-y) var(--panel-card-padding-x);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 0.72rem;
}

.feature-file-summary span {
  display: grid;
  gap: var(--ui-gap-2);
  min-width: 0;
}

.feature-file-summary strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
}

.feature-file-message[data-state="error"] { color: var(--error); }
.feature-file-message[data-state="ready"] { color: var(--success); }

.feature-file-preview {
  max-height: 320px;
}

.feature-file-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--panel-row-gap) var(--panel-row-gap-inline);
  align-items: center;
}

.feature-file-actions .feature-note {
  flex: 1 1 420px;
  min-width: 0;
}

@media (max-width: 760px) {
  .feature-file-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-file-actions { align-items: stretch; }
}

.feature-visualization-controls {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: var(--ui-gap-7);
  align-items: end;
}

.feature-visualization-export-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 170px)) minmax(300px, 1fr);
  gap: var(--ui-gap-7);
  align-items: center;
  padding-top: max(var(--ui-gap-8), 18px);
}

.feature-visualization-export-field select {
  width: 100%;
}

.feature-visualization-export-actions {
  justify-self: end;
  flex-wrap: nowrap;
}

.feature-visualization-export-notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, auto);
  gap: var(--ui-gap-7);
  align-items: start;
}

.feature-visualization-export-summary {
  min-width: 0;
  justify-content: flex-end;
  text-align: right;
}

.feature-visualization-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ui-gap-7);
  color: var(--muted);
  font-size: 0.72rem;
}

.feature-visualization-summary strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
}

.feature-visualization-host .visualization-host-viewport {
  min-height: 300px;
  height: 300px;
}

.feature-visualization-svg .visualization-grid-line {
  stroke: color-mix(in srgb, var(--border) 72%, transparent);
  stroke-width: 1;
}

.feature-visualization-svg .visualization-axis-line {
  stroke: var(--border-strong);
  stroke-width: 1;
}

.feature-visualization-svg .visualization-series-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.feature-visualization-svg .visualization-point {
  fill: var(--secondary);
  stroke: var(--panel-2);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.feature-visualization-svg .visualization-axis-label,
.feature-visualization-svg .visualization-tick-label {
  fill: var(--muted);
  font-family: var(--font-interface);
  font-size: 11px;
}

.feature-visualization-svg .visualization-axis-label {
  fill: var(--text);
  font-size: 12px;
  font-weight: var(--weight-semibold);
}

@media (max-width: 980px) {
  .feature-visualization-export-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: max(var(--ui-gap-8), 24px);
  }
  .feature-visualization-export-actions {
    grid-column: 1 / -1;
    justify-self: end;
  }
  .feature-visualization-export-notes { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (max-width: 760px) {
  .feature-visualization-controls,
  .feature-visualization-export-controls { grid-template-columns: 1fr; }
  .feature-visualization-summary { justify-content: flex-start; }
  .feature-visualization-export-field { justify-self: stretch; }
  .feature-visualization-export-actions { grid-column: auto; justify-self: start; flex-wrap: wrap; }
  .feature-visualization-export-notes { grid-template-columns: 1fr; }
  .feature-visualization-export-summary { justify-content: flex-start; text-align: left; }
  .feature-visualization-host .visualization-host-viewport { min-height: 250px; height: 250px; }
}

.feature-color-scale-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 220px)) minmax(90px, 120px) minmax(140px, auto) minmax(0, 1fr);
  gap: var(--ui-gap-7);
  align-items: end;
}

.feature-color-scale-reverse {
  min-height: 32px;
  align-self: end;
}

.feature-color-scale-diverging-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--panel-row-gap);
  align-items: center;
}

.feature-color-scale-diverging-controls[hidden] {
  display: none;
}

.feature-color-scale-diverging-slider {
  grid-template-columns: 104px minmax(0, 1fr) var(--slider-value-width);
}

.feature-color-scale-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ui-gap-7);
  align-self: center;
  color: var(--muted);
  font-size: 0.72rem;
}

.feature-color-scale-summary strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
}

.feature-color-scale-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(270px, 0.7fr);
  gap: var(--panel-row-gap);
  align-items: stretch;
}

.feature-color-scale-host .visualization-host-viewport {
  min-height: 300px;
  height: 300px;
}

.feature-color-scale-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.feature-color-scale-point {
  stroke: var(--panel-2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.feature-color-scale-frame {
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.feature-color-scale-axis-label {
  fill: var(--muted);
  font-family: var(--font-interface);
  font-size: 11px;
}

.feature-color-scale-legend-card {
  display: grid;
  align-content: start;
  gap: var(--panel-card-gap);
}

.feature-color-scale-legend {
  display: grid;
  gap: var(--ui-gap-4);
  min-height: 68px;
  align-content: center;
}

.feature-color-scale-gradient,
.feature-color-scale-quantized {
  display: grid;
  min-height: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.feature-color-scale-gradient {
  display: block;
}

.feature-color-scale-gradient--alpha {
  background-color: var(--panel-2);
}

.feature-color-scale-legend-labels {
  display: flex;
  justify-content: space-between;
  gap: var(--ui-gap-4);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--quantitative-readout-font-size);
  font-variant-numeric: tabular-nums;
}

.feature-color-scale-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-gap-4) var(--ui-gap-7);
}

.feature-color-scale-category {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: var(--ui-gap-4);
  align-items: center;
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.feature-color-scale-swatch {
  width: 14px;
  height: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
}

.feature-color-scale-readout {
  padding-top: var(--ui-gap-4);
  border-top: 1px solid var(--border);
}

@media (max-width: 1100px) {
  .feature-color-scale-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-color-scale-diverging-controls { grid-template-columns: 1fr; }
  .feature-color-scale-summary { justify-content: flex-start; }
}

@media (max-width: 900px) {
  .feature-color-scale-layout { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .feature-color-scale-controls { grid-template-columns: 1fr; }
  .feature-color-scale-host .visualization-host-viewport { min-height: 250px; height: 250px; }
}

.feature-latest-task-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1.05fr) minmax(280px, 0.95fr);
  gap: var(--panel-row-gap);
  align-items: stretch;
}

.feature-latest-task-controls,
.feature-latest-task-state-card { align-content: start; }

.feature-latest-task-buttons { flex-wrap: wrap; }

.feature-latest-task-state-card .data-table-shell { margin-top: var(--panel-card-gap); }

@media (max-width: 900px) {
  .feature-latest-task-layout { grid-template-columns: 1fr; }
}

.feature-binding-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  gap: var(--panel-row-gap);
  align-items: stretch;
}

.feature-binding-controls {
  align-content: start;
}

.feature-binding-scale-row {
  align-items: center;
}

.feature-binding-state-card {
  align-content: start;
}

.feature-binding-state {
  min-height: 128px;
  margin: 0;
  padding: var(--panel-card-padding-y) var(--panel-card-padding-x);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--input);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--quantitative-readout-font-size);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  white-space: pre-wrap;
}

@media (max-width: 760px) {
  .feature-binding-layout { grid-template-columns: 1fr; }
}

.feature-preset-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  gap: var(--panel-row-gap);
  align-items: stretch;
}

.feature-preset-controls,
.feature-preset-library-card { align-content: start; }

.feature-preset-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--panel-row-gap) var(--panel-row-gap-inline);
  min-width: 0;
}
.feature-preset-field-span { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .feature-preset-layout { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .feature-preset-field-grid { grid-template-columns: 1fr; }
  .feature-preset-field-span { grid-column: auto; }
}

.feature-snapshot-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
  gap: var(--panel-row-gap);
  align-items: stretch;
}

.feature-history-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1.15fr) minmax(260px, 0.85fr);
  gap: var(--panel-row-gap);
  align-items: stretch;
}

.feature-history-controls,
.feature-history-state-card { align-content: start; }

@media (max-width: 900px) {
  .feature-history-layout { grid-template-columns: 1fr; }
}

.feature-snapshot-controls,
.feature-snapshot-preview-card {
  align-content: start;
}

.feature-snapshot-domain {
  align-items: start;
}

.feature-snapshot-domain span {
  display: grid;
  gap: var(--ui-gap-2);
}

.feature-snapshot-domain small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: var(--weight-regular);
  line-height: 1.35;
}

.feature-snapshot-domain-table-shell {
  --data-table-max-height: none;
}

.feature-snapshot-preview {
  min-height: 260px;
  max-height: 420px;
  margin: 0;
  padding: var(--panel-card-padding-y) var(--panel-card-padding-x);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--input);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--quantitative-readout-font-size);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  white-space: pre;
}

@media (max-width: 900px) {
  .feature-snapshot-layout { grid-template-columns: 1fr; }
}

.feature-feedback-layout,
.feature-random-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--panel-row-gap);
  align-items: stretch;
}

.feature-feedback-controls,
.feature-feedback-result-card,
.feature-random-controls,
.feature-random-output-card { align-content: start; }

.feature-feedback-buttons { flex-wrap: wrap; }
.feature-feedback-controls .checkbox-field small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: var(--weight-regular);
}

.feature-popover-demo {
  min-height: 150px;
}

.feature-popover-anchor-card {
  width: min(520px, 100%);
  align-content: start;
}

.feature-popover-status {
  align-self: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--quantitative-readout-font-size);
  font-variant-numeric: tabular-nums;
}

.feature-random-metadata { margin-bottom: var(--panel-card-gap); }
.feature-random-result {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  gap: var(--ui-gap-7);
  align-items: baseline;
  padding-block: var(--ui-gap-5);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--quantitative-readout-font-size);
}
.feature-random-result strong {
  min-width: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .feature-feedback-layout,
  .feature-random-layout { grid-template-columns: 1fr; }
  .feature-random-result { grid-template-columns: 1fr; }
}

.feature-layer-layout,
.feature-clipboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
  gap: var(--panel-row-gap);
  align-items: stretch;
}

.feature-layer-controls,
.feature-layer-preview-card,
.feature-clipboard-editor-card,
.feature-clipboard-result-card { align-content: start; }

.feature-layer-preview {
  display: block;
  width: 100%;
  min-height: 190px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
}
.feature-layer-render { --feature-layer-tone: var(--muted); }
.feature-layer-render[data-tone="accent"] { --feature-layer-tone: var(--accent); }
.feature-layer-render[data-tone="secondary"] { --feature-layer-tone: var(--secondary); }
.feature-layer-grid line { stroke: var(--feature-layer-tone); stroke-width: 1; vector-effect: non-scaling-stroke; }
.feature-layer-series polyline { fill: none; stroke: var(--feature-layer-tone); stroke-width: 2.25; vector-effect: non-scaling-stroke; }
.feature-layer-markers circle { fill: var(--feature-layer-tone); stroke: var(--panel-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.feature-layer-state {
  max-height: 190px;
  margin: 0;
  padding: var(--panel-card-padding-y) var(--panel-card-padding-x);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--input);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--quantitative-readout-font-size);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  white-space: pre;
}

.feature-clipboard-payload {
  width: 100%;
  min-height: 190px;
  resize: vertical;
  padding: var(--panel-card-padding-y) var(--panel-card-padding-x);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--input);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--quantitative-readout-font-size);
  line-height: 1.45;
}
.feature-clipboard-actions { flex-wrap: wrap; }

@media (max-width: 900px) {
  .feature-layer-layout,
  .feature-clipboard-layout { grid-template-columns: 1fr; }
}

.feature-viewport-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
  gap: var(--panel-row-gap);
  align-items: stretch;
}
.feature-viewport-demo-card,
.feature-viewport-state-card { align-content: start; }
.feature-viewport-hint {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: var(--weight-medium);
}
.feature-viewport-surface {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  cursor: grab;
  touch-action: none;
  outline: none;
}
.feature-viewport-surface:active { cursor: grabbing; }
.feature-viewport-surface:focus-visible { box-shadow: 0 0 0 2px var(--focus-ring); }
.feature-viewport-svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  user-select: none;
}
.feature-viewport-scene { transform-origin: 0 0; }
.feature-viewport-grid path {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1;
  opacity: 0.6;
  vector-effect: non-scaling-stroke;
}
.feature-viewport-objects circle { fill: var(--secondary); }
.feature-viewport-trace {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}
.feature-viewport-state-card .value-list { margin-bottom: var(--panel-card-gap); }

@media (max-width: 900px) {
  .feature-viewport-layout { grid-template-columns: 1fr; }
}


.feature-selection-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: var(--panel-row-gap);
  align-items: stretch;
}
.feature-selection-demo-card,
.feature-selection-state-card { align-content: start; }
.feature-selection-hint {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: var(--weight-medium);
}
.feature-selection-surface {
  overflow: hidden;
  min-height: 280px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
}
.feature-selection-svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
}
.feature-selection-guide path {
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
  opacity: 0.5;
  vector-effect: non-scaling-stroke;
}
.feature-selection-object {
  cursor: pointer;
  outline: none;
}
.feature-selection-object circle {
  fill: var(--secondary);
  stroke: transparent;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  transition: fill 120ms ease, stroke 120ms ease, opacity 120ms ease;
}
.feature-selection-object text {
  fill: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  pointer-events: none;
  user-select: none;
}
.feature-selection-object[data-hovered="true"] circle,
.feature-selection-object:focus-visible circle {
  stroke: var(--text);
}
.feature-selection-object[data-selected="true"] circle {
  fill: var(--accent);
  stroke: var(--accent);
}
.feature-selection-object[data-primary="true"] circle {
  stroke: var(--text);
  stroke-width: 4;
}
.feature-selection-object[data-selected="true"] text { fill: var(--text); }
.feature-selection-state-card .value-list { margin-bottom: var(--panel-card-gap); }
.feature-selection-state-card .value-list dd { max-width: 190px; overflow-wrap: anywhere; }
.feature-selection-actions { flex-wrap: wrap; }

@media (max-width: 900px) {
  .feature-selection-layout { grid-template-columns: 1fr; }
}

.feature-render-scheduler-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--panel-row-gap);
  align-items: stretch;
}
.feature-render-scheduler-controls,
.feature-render-scheduler-state { align-content: start; }
.feature-render-scheduler-controls .button-row { flex-wrap: wrap; }
.feature-render-scheduler-state .value-list dd {
  max-width: 28rem;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .feature-render-scheduler-layout { grid-template-columns: 1fr; }
}

/* Virtual-anchor data-point inspection. Point colors deliberately consume the
   rendered categorical palette while point geometry and metadata stay local to
   the specimen/application. */
.feature-point-inspection-card { align-content: start; }
.feature-point-inspection-surface {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
}
.feature-point-inspection-svg {
  display: block;
  width: 100%;
  aspect-ratio: 30 / 13;
}
.feature-point-inspection-point {
  --inspection-point-color: var(--accent);
  cursor: pointer;
  outline: none;
}
.feature-point-inspection-point[data-point-color-index="1"],
.feature-data-point-swatch[data-point-color-index="1"] { --inspection-point-color: var(--palette-6-cat-01, var(--accent)); }
.feature-point-inspection-point[data-point-color-index="2"],
.feature-data-point-swatch[data-point-color-index="2"] { --inspection-point-color: var(--palette-6-cat-02, var(--secondary)); }
.feature-point-inspection-point[data-point-color-index="3"],
.feature-data-point-swatch[data-point-color-index="3"] { --inspection-point-color: var(--palette-6-cat-03, var(--success)); }
.feature-point-inspection-point[data-point-color-index="4"],
.feature-data-point-swatch[data-point-color-index="4"] { --inspection-point-color: var(--palette-6-cat-04, var(--warning)); }
.feature-point-inspection-point[data-point-color-index="5"],
.feature-data-point-swatch[data-point-color-index="5"] { --inspection-point-color: var(--palette-6-cat-05, var(--error)); }
.feature-point-inspection-point[data-point-color-index="6"],
.feature-data-point-swatch[data-point-color-index="6"] { --inspection-point-color: var(--palette-6-cat-06, var(--secondary)); }
.feature-point-inspection-point > * {
  fill: var(--inspection-point-color);
  stroke: transparent;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  transition: stroke 120ms ease, opacity 120ms ease;
}
.feature-point-inspection-point:hover > *,
.feature-point-inspection-point:focus-visible > *,
.feature-point-inspection-point[data-inspected="true"] > * { stroke: var(--text); }
.feature-point-inspection-point[data-inspected="true"] > * { stroke-width: 4; }

.feature-data-point-popover {
  width: min(260px, calc(100vw - 16px));
}
.feature-data-point-popover .anchored-popover-heading {
  padding-bottom: var(--ui-gap-4);
  border-bottom: 0;
}
.feature-data-point-popover .anchored-popover-heading h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.015em;
}
.feature-data-point-popover .anchored-popover-body {
  gap: var(--ui-gap-6);
  padding-top: 0;
}
.feature-data-point-identity {
  display: flex;
  align-items: center;
  gap: var(--ui-gap-5);
  color: var(--muted);
  font-size: 0.78rem;
}
.feature-data-point-swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--inspection-point-color) 68%, var(--border));
  border-radius: 50%;
  background: var(--inspection-point-color);
}
.feature-data-point-divider { border-top: 1px solid var(--border); }
.feature-data-point-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ui-gap-7);
  margin: 0;
}
.feature-data-point-values div {
  display: flex;
  align-items: baseline;
  gap: var(--ui-gap-3);
  min-width: 0;
}
.feature-data-point-values dt {
  color: var(--muted);
  font-size: 0.74rem;
}
.feature-data-point-values dd {
  margin: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--quantitative-readout-font-size);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
}

/* Build-time metadata diagnostics and page-runtime registry. */
.feature-metadata-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-gap-4);
}
.feature-metadata-table-shell {
  max-height: 34rem;
}
.feature-metadata-table-shell th,
.feature-metadata-table-shell td {
  vertical-align: top;
}
.feature-metadata-canonical code {
  display: block;
  max-width: 24rem;
  overflow-wrap: anywhere;
  white-space: normal;
}
.feature-metadata-issues {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-gap-3);
}
.feature-code-sample {
  margin: 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  padding: var(--panel-card-padding);
}
.feature-code-sample code {
  white-space: pre;
}
.feature-runtime-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--panel-row-gap);
}
.feature-runtime-environment {
  align-content: start;
}

.feature-debug-status-shell .data-table {
  min-width: 100%;
}

.feature-debug-links {
  flex-wrap: wrap;
}

.feature-debug-links [aria-current="page"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.feature-debug-overlay-surface {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #26313f;
}

.feature-debug-overlay-backdrop {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgb(255 255 255 / 10%);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 4rem);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  user-select: none;
}

.feature-debug-overlay-surface .debug-overlay {
  position: absolute;
  top: 12px;
  left: 14px;
  max-width: calc(100% - 28px);
  max-height: calc(100% - 24px);
}