/* Multi-variation generation — shared styles for the pill selector
   (used on create forms), the tab strip (above an editor body), and
   the per-variation refinement card. Uses --co-* tokens from app.css
   so every theme inherits the right colors. */

/* ── Pill selector on create forms ─────────────────────────────── */
.co-variations-picker {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.co-variations-pills {
  display: inline-flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
/* Pill buttons — shared by the variations picker and the form pill-fields
   (_pill_select.html) so both controls read as one system. Fully rounded,
   soft hover wash, and a gentle lift on the selected pill. */
.co-variations-pill,
.co-pillfield-option {
  min-width: 44px;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 1px solid var(--co-hairline);
  background: var(--co-canvas);
  color: var(--co-ink);
  font-family: var(--co-font-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease,
              color 0.14s ease, box-shadow 0.14s ease, transform 0.08s ease;
}
.co-variations-pill:hover,
.co-pillfield-option:hover {
  border-color: var(--co-action-blue);
  background: var(--co-pale-blue);
}
.co-variations-pill:active,
.co-pillfield-option:active {
  transform: translateY(1px);
}
.co-variations-pill.is-active,
.co-pillfield-option.is-active {
  background: var(--co-action-blue);
  border-color: var(--co-action-blue);
  color: var(--co-canvas);
  box-shadow: 0 2px 10px -3px rgba(24, 99, 220, 0.45);
}

/* ── Pill field on create forms — a small (<=5 option) select rendered as
   an always-visible pill group (see _pill_select.html). The pill buttons
   share the styling above with the variations picker; this block only sets
   the field's layout. ─────────────────────────────────────────────────── */
.co-pillfield-options {
  display: inline-flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* ── Tab strip above the editor body ──────────────────────────── */
.co-variation-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: var(--co-radius-md);
  background: var(--co-pale-blue);
  border: 1px solid var(--co-hairline);
  margin-bottom: 1.25rem;
  overflow-x: auto;
}
.co-variation-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--co-radius-sm);
  background: transparent;
  color: var(--co-slate);
  font-family: var(--co-font-body);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.co-variation-tab:hover {
  color: var(--co-ink);
}
.co-variation-tab.is-active {
  background: var(--co-canvas);
  color: var(--co-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.co-variation-star {
  color: var(--co-action-blue);
  font-size: 0.95em;
}

/* ── Refinement card inside each variation panel ──────────────── */
.co-variation-panel {
  display: block;
}
.co-variation-refine {
  margin-top: 1.5rem;
  padding: 1rem 1.125rem;
  border-radius: var(--co-radius-md);
  border: 1px dashed var(--co-hairline);
  background: var(--co-pale-blue);
}
.co-variation-refine-label {
  font-family: var(--co-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--co-ink);
  margin-bottom: 0.25rem;
}
.co-variation-refine-textarea {
  width: 100%;
  min-height: 72px;
  padding: 0.625rem 0.75rem;
  border-radius: var(--co-radius-sm);
  border: 1px solid var(--co-hairline);
  background: var(--co-canvas);
  color: var(--co-ink);
  font: inherit;
  font-family: var(--co-font-body);
  resize: vertical;
  margin-top: 0.5rem;
}
.co-variation-refine-textarea:focus {
  outline: 2px solid var(--co-focus-blue);
  outline-offset: 1px;
  border-color: var(--co-action-blue);
}
.co-variation-refine-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 0.625rem;
  align-items: center;
}
.co-variation-helper {
  color: var(--co-slate);
  font-size: 0.8125rem;
}