/* ---------- setup ---------- */
.controls { display: grid; gap: 12px; padding-bottom: 12px; }
.langs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { display: grid; gap: 4px; font-size: var(--text-xs); color: var(--color-text-muted); }
select, .where-row input, .goal {
  width: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-s);
  padding: 11px 12px; font-size: var(--text-base); color: var(--color-text);
}
/* Our own chevron, with room around it (the browser's sits tight against the right edge). */
select { appearance: none; -webkit-appearance: none; padding-inline-end: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6352' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.where-row { display: flex; gap: 8px; }
.where-row input { flex: 1; min-width: 0; }
.where-row button, .row button { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-s); padding: 0 14px; }
.where-now { font-size: var(--text-xs); color: var(--color-text-muted); min-height: 1em; }
.goal-field .goal { font-weight: 600; }