/* Shared instrument patterns for interactive, progressively enhanced content. */
.nc-instrument {
  border-block: 1px solid var(--border-subtle);
  display: grid;
  gap: var(--space-24);
  padding-block: var(--space-24);
}

.nc-instrument__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.nc-instrument__option {
  min-height: 44px;
  font-family:var(--font-sans);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-primary);
  padding-inline: var(--space-16);
}

.nc-instrument__option[aria-pressed="true"],
.nc-instrument__option[aria-selected="true"] {
  border-color: var(--signal-on-dark);
  color: var(--text-primary);
}

.nc-instrument__option[aria-pressed="true"]::before,
.nc-instrument__option[aria-selected="true"]::before {
  content: "✓";
  display: inline-block;
  margin-right: var(--space-8);
}

.nc-instrument__option:focus-visible {
  outline: 2px solid var(--signal-hover);
  outline-offset: 2px;
}

.nc-instrument__option[aria-invalid="true"] { border-color: var(--error); }
.nc-instrument__option[aria-busy="true"] { color: var(--text-secondary); }
.nc-instrument__option:disabled { color: var(--text-muted); }

.nc-instrument__stage { min-width: 0; }
.nc-instrument__fallback { color: var(--text-secondary); }

.nc-instrument__readout {
  min-width: 0;
  padding: clamp(var(--space-20), 3vw, var(--space-32));
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

.nc-instrument__points {
  margin: var(--space-12) 0 0;
  color: var(--text-primary);
}

.nc-instrument__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16) var(--space-24);
  margin: var(--space-24) 0 0;
}

.nc-instrument__meta div {
  min-width: 0;
  padding-top: var(--space-12);
  border-top: 1px solid var(--border-subtle);
}

.nc-instrument__meta dt {
  font: 500 .6875rem/1.2 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nc-instrument__meta dd {
  margin: var(--space-8) 0 0;
  color: var(--text-secondary);
}

@media (max-width: 560px) {
  .nc-instrument__meta { grid-template-columns: 1fr; }
}

@media (hover: hover) and (pointer: fine) {
  .nc-instrument__option:hover { border-color: var(--border-strong); }
}

@media (prefers-reduced-motion: reduce) {
  .nc-instrument *,
  .nc-instrument *::before,
  .nc-instrument *::after {
    animation: none !important;
    transition-duration: 0ms !important;
  }
}

/* Public identity selectors */
[data-talk-selector],
[data-media-angle-builder] {
  margin-top: clamp(var(--space-24), 4vw, var(--space-48));
  padding: clamp(var(--space-20), 3vw, var(--space-32));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

.public-instrument__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--space-16);
}

.public-instrument__field {
  display: grid;
  gap: var(--space-8);
  min-width: 0;
  color: var(--text-secondary);
  font: 500 .75rem/1.4 var(--font-sans);
  letter-spacing: .06em;
}

.public-instrument__field select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  padding-inline: var(--space-12);
  background: var(--ink-900);
  color: var(--text-primary);
  font: 400 .9375rem/1.4 var(--font-sans);
}

.public-instrument__field select:focus-visible,
[data-talk-selector] button:focus-visible,
[data-media-angle-builder] button:focus-visible,
[data-talk-result-link]:focus-visible {
  outline: 2px solid var(--signal-hover);
  outline-offset: 3px;
}

.public-instrument__status {
  min-height: 1.5em;
  margin: var(--space-16) 0 0;
  color: var(--text-muted);
  font: 400 .875rem/1.55 var(--font-sans);
}

.public-instrument__stage {
  margin-top: var(--space-20);
  padding-top: var(--space-20);
  border-top: 1px solid var(--border-subtle);
}

.public-instrument__stage h3 {
  margin: 0;
  color: var(--text-primary);
  font: 400 clamp(1.25rem, 2vw, 1.75rem)/1.2 var(--font-sans);
}

.public-instrument__stage p {
  margin: var(--space-8) 0 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.public-instrument__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-16);
}

[data-talk-selector] button,
[data-media-angle-builder] button,
[data-talk-result-link] {
  min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  [data-talk-selector] *,
  [data-media-angle-builder] * {
    animation: none !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}