/* SkyyCast UTM Campaign Builder & Link QA (/tools/utm-builder).
 *
 * Loaded by that page only, after assets/sc-public.css, assets/sc-image-checker.css
 * and assets/sc-image-compressor.css: this file reuses the shared `ic-*` shell
 * (buttons, messages, workspace) and the shared `cm-*` form controls (mode
 * tabs, select/input, advanced toggle, decision banner) and only adds the
 * `ug-*` pieces specific to this tool (hero step list, field grid, QA
 * checklist, result card, tables). All scoped under `.pub-site` and built
 * from the `--pub-*` tokens: no new colours, no new fonts, nothing on
 * :root/html/body. Motion is limited to short state transitions and is
 * switched off under prefers-reduced-motion. */

/* ---- Hero workflow steps ---- */
.pub-site .ug-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--pub-text-secondary);
}
.pub-site .ug-step-n {
  display: inline-block;
  margin-right: .4rem;
  color: var(--pub-accent-strong);
  font-weight: 800;
}

/* ---- Fields ---- */
.pub-site .ug-field { margin-bottom: 1rem; }
.pub-site .ug-field-label {
  display: block;
  margin-bottom: .4rem;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--pub-text);
}
.pub-site .ug-req {
  margin-left: .4rem;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pub-text-muted);
}
.pub-site .ug-input-wide { width: 100%; }
.pub-site .ug-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 1rem;
}
.pub-site .ug-grid[hidden] { display: none; }

/* ---- Existing-UTM radio group ---- */
.pub-site .ug-radio-group { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; }
.pub-site .ug-radio-group label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--pub-text-secondary);
  min-height: 32px;
}

/* ---- Actions ---- */
.pub-site .ug-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }

/* ---- Result card ---- */
.pub-site .ug-result-card {
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-lg);
  background: var(--pub-accent-soft);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  margin-bottom: 1.25rem;
}
.pub-site .ug-result-label {
  margin: 0 0 .6rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pub-accent-strong);
}
.pub-site .ug-result-url-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}
.pub-site .ug-result-url {
  flex: 1 1 280px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-all;
  background: var(--pub-surface);
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-md);
  padding: .65rem .85rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--pub-text);
}
.pub-site .ug-copy-status {
  margin-left: .5rem;
  font-size: .875rem;
  font-weight: 700;
  color: var(--pub-success);
}

/* ---- QA checklist ---- */
.pub-site .ug-qa { margin-top: 1rem; }
.pub-site .ug-qa-title { font-size: 1.125rem; font-weight: 800; margin: 0 0 .6rem; }
.pub-site .ug-qa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pub-site .ug-qa-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .6rem .8rem;
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-md);
  background: var(--pub-surface);
  font-size: .9375rem;
  line-height: 1.5;
}
.pub-site .ug-qa-icon { flex: none; font-weight: 800; width: 1.25rem; text-align: center; }
.pub-site .ug-qa-item[data-level="pass"] { border-left: 4px solid var(--pub-success); }
.pub-site .ug-qa-item[data-level="pass"] .ug-qa-icon { color: var(--pub-success); }
.pub-site .ug-qa-item[data-level="warning"] { border-left: 4px solid var(--pub-warning); background: #FFF7E8; }
.pub-site .ug-qa-item[data-level="warning"] .ug-qa-icon { color: var(--pub-warning); }
.pub-site .ug-qa-item[data-level="error"] { border-left: 4px solid var(--pub-danger); background: #FFF5F5; }
.pub-site .ug-qa-item[data-level="error"] .ug-qa-icon { color: var(--pub-danger); }
.pub-site .ug-qa-item[data-level="info"] { border-left: 4px solid var(--pub-text-muted); }
.pub-site .ug-qa-item[data-level="info"] .ug-qa-icon { color: var(--pub-text-muted); }
.pub-site .ug-qa-suggest { display: block; margin-top: .25rem; font-weight: 700; color: var(--pub-text); }

/* ---- Tables (Inspector + Bulk) ---- */
.pub-site .ug-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: .9375rem;
}
.pub-site .ug-table th,
.pub-site .ug-table td {
  text-align: left;
  padding: .55rem .6rem;
  border-bottom: 1px solid var(--pub-border);
  vertical-align: top;
}
.pub-site .ug-table th {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pub-text-muted);
}
.pub-site .ug-table td code { font-size: .875rem; overflow-wrap: anywhere; }
.pub-site .ug-bulk-table input {
  width: 100%;
  min-height: 40px;
  padding: .4rem .5rem;
  border: 1px solid var(--pub-border-strong);
  border-radius: var(--pub-radius-md);
  font: inherit;
  font-size: .875rem;
  background: var(--pub-surface);
  color: var(--pub-text);
}
.pub-site .ug-bulk-table input:focus-visible { outline: none; box-shadow: var(--pub-ring); border-color: var(--pub-accent); }
.pub-site .ug-bulk-row-remove {
  appearance: none;
  border: 0;
  background: none;
  color: var(--pub-danger);
  font-weight: 800;
  cursor: pointer;
  min-width: 32px;
  min-height: 32px;
  border-radius: 8px;
}
.pub-site .ug-bulk-row-remove:focus-visible { outline: none; box-shadow: var(--pub-ring); }

/* ---- Bulk results ---- */
.pub-site .ug-bulk-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.pub-site .ug-bulk-list li {
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-md);
  background: var(--pub-surface);
  padding: .6rem .8rem;
  font-size: .875rem;
  word-break: break-all;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .pub-site .ug-grid { grid-template-columns: minmax(0, 1fr); }
  .pub-site .ug-result-url-row { flex-direction: column; align-items: stretch; }
  .pub-site .ug-result-url { flex: none; }
  .pub-site .ug-table, .pub-site .ug-table thead, .pub-site .ug-table tbody, .pub-site .ug-table tr { display: block; width: 100%; }
  .pub-site .ug-bulk-table th { display: none; }
  .pub-site .ug-bulk-table tr { border-bottom: 2px solid var(--pub-border); padding-bottom: .5rem; margin-bottom: .5rem; }
  .pub-site .ug-bulk-table td { display: block; border-bottom: none; padding: .3rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pub-site .ug-qa-item { transition: none; }
}