/* UTM Campaign Builder — tool-specific styles (Brief 6.9).
   Loaded only by templates/tools/utm-builder.php. Shared tokens and
   components come from tokens.css + site.css; only the workspace grid,
   medium chips, QR panel, preset rows and bulk table live here. */

.utm-grid { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .utm-grid { grid-template-columns: 1fr 1fr; } }

.utm-preview {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  word-break: break-all;
  background: var(--color-code-bg);
  color: var(--color-code-text);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
}

.utm-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 var(--space-4); }

.utm-qr-panel {
  display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-start;
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  padding: var(--space-5); margin-top: var(--space-5);
}
.utm-qr-box {
  width: 200px; height: 200px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-sm);
  overflow: hidden;
}
.utm-qr-box img, .utm-qr-box canvas, .utm-qr-box table { max-width: 100%; }
.utm-qr-side { flex: 1 1 260px; }

.utm-preset-row {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-line);
}
.utm-preset-row span { font-weight: var(--weight-medium); margin-right: auto; }

.utm-messages ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.utm-messages li { margin-bottom: var(--space-1); }

.table-wrap .utm-bulk-table { min-width: 1080px; }
.utm-bulk-table input[type="text"] { min-width: 130px; min-height: 40px; padding: 6px 8px; }
.utm-bulk-table td.utm-bulk-built {
  font-family: var(--font-mono); font-size: var(--text-xs);
  word-break: break-all; max-width: 300px;
}
.utm-bulk-table td.utm-bulk-flag { max-width: 240px; }