/* ============================================================================
   PROTOTYPE HARNESS — not application code.

   A panel for driving the three switches and the navbar's states so the whole
   matrix can be checked without a rebuild. Delete this folder to ship.
   It still uses semantic tokens only: a harness that hard-codes colour cannot
   demonstrate a token system.
   ========================================================================== */

.harness,
.harness-toggle {
  position: fixed;
  z-index: 90; /* TODO(tokens): z-index scale not built — DESIGN.md §12.4 */
  inset-block-end: var(--space-md);
  /* Bottom-LEFT on purpose: the navbar's panels open from the inline end, and
     the harness must not sit on top of the thing it is there to exercise. */
  inset-inline-start: var(--space-md);
  font-family: var(--font-family-text);
}

.harness-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-solid-neutral-default);
  color: var(--color-on-solid-neutral);
  border-radius: var(--radius-full);
  box-shadow: var(--elevation-overlay);
}
.harness-toggle:hover {
  background: var(--color-solid-neutral-hover);
}
.harness-toggle:active {
  background: var(--color-solid-neutral-pressed);
}
.harness-toggle[hidden] {
  display: none;
}

.harness {
  display: flex;
  inline-size: min(320px, calc(100vw - var(--space-xl)));
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-surface-raised);
  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: var(--shape-radius-card);
  box-shadow: var(--elevation-popover);
  max-block-size: calc(100vh - var(--space-xl));
  overflow-y: auto;
}
.harness[hidden] {
  display: none;
}

.harness__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}

.harness__title {
  color: var(--color-content-headline);
}

.harness__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: var(--radius-full);
  color: var(--color-content-secondary);
}
.harness__close:hover {
  background: var(--color-soft-neutral-hover);
  color: var(--color-content-headline);
}

.harness__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  border: 0;
}

.harness__legend {
  padding: 0;
  color: var(--color-content-secondary);
}

.harness__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

/* Segmented-style chips — Segmented Control (§21.1) treatment in miniature.
   Selected carries tint + ink + weight, the same three channels as the
   Dropdown item Active state. */
.harness__chip {
  padding: var(--space-3xs) var(--space-sm);
  background: var(--color-soft-neutral-default);
  color: var(--color-content-primary);
  border-radius: var(--shape-radius-chip);
  font-size: var(--font-label-sm-size);
  line-height: var(--font-label-sm-line-height);
  font-weight: var(--font-weight-regular);
}
.harness__chip:hover {
  background: var(--color-soft-neutral-hover);
}
.harness__chip:active {
  background: var(--color-soft-neutral-pressed);
}
.harness__chip[aria-pressed="true"] {
  background: var(--color-soft-brand-default);
  color: var(--color-on-soft-brand);
  font-weight: var(--font-weight-medium);
}

.harness__field {
  display: flex;
  flex: 1 1 120px;
  flex-direction: column;
  gap: var(--space-3xs);
  color: var(--color-content-secondary);
}

.harness__field input {
  block-size: 32px;
  padding-inline: var(--space-xs);
  background: var(--color-surface-raised);
  color: var(--color-content-primary);
  border: var(--border-width-thin) solid var(--color-border-strong);
  border-radius: var(--shape-radius-input);
}
.harness__field input:focus-visible {
  border-color: var(--color-border-brand-default);
}

.harness__note {
  margin: 0;
  color: var(--color-on-soft-warning);
  background: var(--color-soft-warning-default);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--shape-radius-card);
}
.harness__note:empty {
  display: none;
}