/* CRM tab: Email setup. Every rule is scoped to su- classes the setup module creates.
   admin.html's own <style> loads after this file, so overrides of its shared classes use two classes. */

.su-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.su-muted { color: var(--ink-soft); }
.su-error { background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--error); padding: 16px 18px; }
.su-error .err { margin: 0 0 12px; }

/* Progress: four segments, one per step */
.su-progress { display: grid; grid-template-columns: minmax(0, 340px) auto; align-items: center; gap: 8px 16px; margin: -6px 0 22px; }
.su-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.su-bar i { display: block; height: 10px; background: var(--chalk-2); border: 1.5px solid var(--line); }
.su-bar i.su-on { background: var(--hivis); border-color: var(--asphalt); }
.su-progress .su-progress-text { margin: 0; font: 400 1.35rem/1 var(--f-display); text-transform: uppercase; white-space: nowrap; }
.su-progress .su-progress-note { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
@media (max-width: 480px) { .su-progress { grid-template-columns: minmax(0, 1fr) auto; } }

/* The checklist */
.su-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.su-step { display: grid; grid-template-columns: 64px minmax(0, 1fr); background: #fff; border: 1px solid var(--line); }
.su-num { display: flex; justify-content: center; align-items: flex-start; padding-top: 18px; background: var(--asphalt); color: var(--hivis); font: 400 2rem/1 var(--f-display); }
.su-num svg { width: 28px; height: 28px; }
.su-step.su-done .su-num { background: var(--ok); color: #fff; }
.su-step.su-dns .su-num { background: var(--orange); color: #fff; }
.su-main { min-width: 0; padding: 18px 20px 20px; }
.su-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 12px; flex-wrap: wrap; }
.su-head h2 { margin: 0; font-size: 1.4rem; }
.su-head h2:focus:not(:focus-visible) { outline: none; }
.su-what { margin: 6px 0 14px; max-width: 760px; color: var(--ink-soft); }
.su-b-done { background: var(--ok); color: #fff; }
.su-b-todo { background: var(--asphalt); color: var(--hivis); }
.su-b-dns { background: var(--orange); color: #fff; }
.su-err.err { margin-top: 12px; }

.su-text { margin: 0 0 14px; max-width: 780px; }
.su-inline { font: 400 0.85em/1 var(--f-mono); background: var(--chalk); padding: 2px 5px; overflow-wrap: anywhere; }
.su-warn { margin: 0 0 14px; max-width: 820px; padding: 10px 14px; background: #FFF1EA; border-left: 6px solid var(--orange); font-weight: 500; }
.su-warn strong { font-weight: 700; }
.su-ok { margin: 0 0 14px; max-width: 820px; padding: 10px 14px; background: #EEF7F1; border-left: 6px solid var(--ok); font-weight: 600; }
.su-actions { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-top: 14px; }

/* Key/value list (the webhook) */
.su-kv { margin: 0; background: var(--chalk); border: 1px solid var(--line); }
.su-kv div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); align-items: baseline; }
.su-kv div:last-child { border-bottom: 0; }
.su-kv dt { font: 500 0.68rem/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.su-kv dd { margin: 0; min-width: 0; font-weight: 600; }
.su-kv .su-val { background: #fff; }
@media (max-width: 480px) { .su-kv div { grid-template-columns: minmax(0, 1fr); } }

/* Domain status line */
.su-meta { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font: 500 0.72rem/1.6 var(--f-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.su-meta b { font-weight: 500; color: var(--ink); }
.su-meta .su-rs { margin-left: 4px; }

/* Record status chips */
.su-rs { display: inline-block; padding: 4px 6px; font: 500 0.64rem/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.su-rs-ok { background: #DDF0E4; color: #135C38; }
.su-rs-wait { background: var(--chalk-2); color: var(--ink-soft); }
.su-rs-bad { background: #FBE1DE; color: var(--error); }

/* DNS values: long, monospace, wrapped anywhere */
.su-val { display: inline-block; max-width: 100%; padding: 3px 6px; background: var(--chalk); font: 400 0.82rem/1.5 var(--f-mono); color: var(--ink); white-space: normal; word-break: break-all; overflow-wrap: anywhere; }
.su-copyrow { display: flex; align-items: flex-start; gap: 8px; }
.su-copyrow .su-val { flex: 1 1 auto; min-width: 0; }
.su-copy {
  flex: none;
  font: 600 0.78rem/1 var(--f-cond);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 6px 8px;
  border: 1.5px solid var(--line);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.su-copy:hover { border-color: var(--asphalt); }
.su-copy.su-copied { background: var(--asphalt); border-color: var(--asphalt); color: var(--hivis); }

/* Records table */
.su-wrap.table-wrap { margin: 0 0 4px; }
.su-records tbody tr { cursor: default; }
.su-records tbody tr:hover { background: transparent; }
.su-records td.su-c { vertical-align: top; }
.su-records td.su-c-copy { min-width: 210px; }
.su-records td.su-c-value { min-width: 280px; width: 46%; }
.su-records td.su-type, .su-records td.su-prio { font: 500 0.82rem/1.5 var(--f-mono); white-space: nowrap; }

.su-more { margin-top: 12px; }
.su-more summary { cursor: pointer; padding: 6px 0; font: 600 0.92rem/1.2 var(--f-cond); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); }
.su-more summary:hover { color: var(--ink-soft); }
.su-more[open] summary { margin-bottom: 8px; }

/* Campaign details form */
.su-form .fields { max-width: 720px; }
.su-fhint { margin: 6px 0 0; font-size: 0.85rem; line-height: 1.4; color: var(--ink-soft); }
.su-saved { font: 500 0.72rem/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }

/* Narrow screens: a slimmer step number and each DNS record as a card of "Label ..... value" rows */
@media (max-width: 560px) {
  .su-step { grid-template-columns: 44px minmax(0, 1fr); }
  .su-num { padding-top: 16px; font-size: 1.5rem; }
  .su-num svg { width: 22px; height: 22px; }
  .su-main { padding: 14px 14px 16px; }
  .su-head h2 { font-size: 1.2rem; }
}
@media (max-width: 760px) {
  .su-wrap.table-wrap { overflow: visible; background: none; border: 0; }
  .su-records thead { display: none; }
  .su-records, .su-records tbody { display: block; width: 100%; }
  /* Purpose | Type, then name and value full width, then Priority | Status */
  .su-records tr.su-rec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; background: var(--chalk); border: 1px solid var(--line); border-top: 3px solid var(--asphalt); margin-bottom: 10px; padding: 0 12px 2px; }
  .su-records tr.su-rec td.su-c { display: block; width: auto; min-width: 0; padding: 8px 0; border-bottom: 1px dashed var(--line); text-align: left; white-space: normal; }
  .su-records tr.su-rec td.su-c:nth-last-child(-n+2) { border-bottom: 0; }
  .su-records tr.su-rec td.su-c::before { content: attr(data-label); display: block; margin-bottom: 4px; font: 500 0.64rem/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
  .su-records tr.su-rec td.su-c .su-v { min-width: 0; }
  .su-records tr.su-rec td.su-c.su-c-copy { grid-column: 1 / -1; }
  .su-records tr.su-rec .su-val { background: #fff; }
}