

.picker-back {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: var(--surface-base);
}

.picker {
  width: min(620px, 100%);
  max-height: min(680px, calc(100vh - var(--space-7)));
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.picker-head {
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: var(--hairline) solid var(--line-hairline);
}

.picker-title {
  margin: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--type-xl);
  font-weight: 500;
  letter-spacing: 0.08em;
}

.picker-sub {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: var(--type-sm);
}

.picker-sub-bad {
  color: var(--state-danger);
  max-width: 52ch;
  line-height: 1.45;
}

.picker-list {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  padding: var(--space-2);
}
.picker-list:focus-visible { outline: none; }

.picker-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease);
}

.picker-row:hover { background: var(--surface-inset); }

.picker-row.selected {
  background: var(--surface-inset);
  border-color: var(--accent-quiet);
}

.row-name {
  color: var(--text-primary);
  font-size: var(--type-md);
}

.row-meta {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--type-sm);
}

.picker-empty {
  margin: 0;
  padding: var(--space-6) var(--space-3);
  color: var(--text-muted);
  font-size: var(--type-sm);
  text-align: center;
}

.picker-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: var(--hairline) solid var(--line-hairline);
}

.picker-name {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--control-height);
  padding: 0 var(--space-3);
  background: var(--surface-inset);
  color: var(--text-primary);
  border: var(--hairline) solid var(--line-hairline);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--type-sm);
}
.picker-name:focus {
  outline: none;
  border-color: var(--accent-quiet);
}
.picker-name::placeholder { color: var(--text-muted); }
