/* Instagram Caption Formatter — per-tool layout.
   Options live in view.php markup (.ig-options / .ig-radio / .ig-check);
   the caption preview rows are injected by assets/js/tools/instagram-line-break.js
   (#ig-preview .ig-caption-line[.--blank]). Tokens only. */

/* --- Option group: radios + checkboxes stacked with a calm rhythm --- */
.ig-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ig-radio,
.ig-check {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-2) 0;
  cursor: pointer;
}

.ig-radio input,
.ig-check input {
  margin-top: 3px;
  flex: none;
  accent-color: var(--blue-600);
}

.ig-radio-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ig-radio-title {
  font: 500 14px/1.4 var(--font-sans);
  color: var(--text-primary);
}

/* Disabled option (visible-dot toggle outside spacer mode). */
.ig-radio.is-disabled,
.ig-check.is-disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* --- Caption preview: shows blank/spacer lines so spacing is visible --- */
.ig-caption-preview {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--neutral-25);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  min-height: 120px;
  color: var(--text-primary);
}

.ig-caption-line {
  min-height: 1.2em;
}

/* Blank / spacer lines keep their height so the gap is visible — the point of the tool. */
.ig-caption-line--blank {
  min-height: 1.2em;
}