@iann29/rastro 0.10.8 → 0.11.0

package/dist/ui/ui.css

@@ -1027,6 +1027,18 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.rastro-campaigns__form-lead {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  min-width: 0;
+  margin-bottom: 12px;
+}
+.rastro-campaigns__form-lead > .rastro-forms__lead {
+  align-self: stretch;
+  min-width: 0;
+}
 .rastro-campaigns__timeline {
   display: flex;
   flex-direction: column;
@@ -1192,6 +1204,2295 @@
   color: var(--rastro-fg);
 }
 
+/* src/ui/forms/forms.css */
+/*
+ * Formulários (Lead Ads): FormsView (D1), FormRulesDrawer (D2, D7; D8 under
+ * 640px of its own width), WhatsAppButtonGuide (D3), and the lead's badge and
+ * answers for the host's card (D4–D6, D9). Container queries, not media
+ * queries: each piece reads its own width, wherever the host puts it.
+ */
+
+.rastro-forms {
+  --rastro-forms-meta: #0866ff;
+  --rastro-forms-meta-bg: color-mix(in oklab, #0866ff 13%, var(--rastro-card));
+  --rastro-forms-meta-fg: color-mix(in oklab, #0866ff 70%, var(--rastro-fg));
+  --rastro-forms-tint: color-mix(
+    in oklab,
+    var(--rastro-accent) 7%,
+    var(--rastro-card)
+  );
+  --rastro-forms-tint-line: color-mix(
+    in oklab,
+    var(--rastro-accent) 22%,
+    var(--rastro-card)
+  );
+  --rastro-forms-quiet: color-mix(
+    in oklab,
+    var(--rastro-muted) 55%,
+    var(--rastro-card)
+  );
+  --rastro-forms-discard: oklch(0.52 0.08 285);
+  --rastro-forms-danger-line: color-mix(
+    in oklab,
+    var(--rastro-weak) 28%,
+    var(--rastro-card)
+  );
+  --rastro-forms-ring: color-mix(in oklab, var(--rastro-fg) 9%, transparent);
+  line-height: normal;
+}
+/* Reset with one class of weight, so each part's own margin wins. */
+.rastro-forms :where(p, h2, h3, ul, ol, dl, dd) {
+  margin: 0;
+}
+.rastro-forms :where(button, input, select, textarea) {
+  font: inherit;
+  color: inherit;
+}
+.rastro-forms :focus-visible {
+  outline: 2px solid var(--rastro-accent);
+  outline-offset: 2px;
+}
+.rastro-forms__icon {
+  flex: none;
+}
+.rastro-forms__grow {
+  flex: 1;
+  min-width: 0;
+}
+.rastro-forms__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+.rastro-forms__inline {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+.rastro-forms__eyebrow {
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__tip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--rastro-muted-fg);
+  line-height: 1.4;
+}
+.rastro-forms__none {
+  color: var(--rastro-muted-fg);
+  font-size: 12.5px;
+}
+.rastro-forms__dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 999px;
+  display: inline-block;
+  flex: none;
+  background: var(--rastro-muted-fg);
+}
+
+/* Pills and badges */
+.rastro-forms__pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 24px;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  background: var(--rastro-muted);
+  color: var(--rastro-fg);
+}
+.rastro-forms__pill[data-tone="ok"] {
+  background: var(--rastro-strong-bg);
+  color: var(--rastro-strong);
+}
+.rastro-forms__pill[data-tone="warn"] {
+  background: var(--rastro-ok-bg);
+  color: var(--rastro-ok);
+}
+.rastro-forms__pill[data-tone="line"] {
+  background: var(--rastro-card);
+  box-shadow: inset 0 0 0 1px var(--rastro-border);
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__pill[data-tone="sync"] {
+  background: var(--rastro-forms-meta-bg);
+  color: var(--rastro-forms-meta-fg);
+}
+.rastro-forms__live {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: currentColor;
+  box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 22%, transparent);
+  flex: none;
+}
+.rastro-forms__spin {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  display: inline-block;
+  flex: none;
+  animation: rastro-forms-spin 0.9s linear infinite;
+}
+@keyframes rastro-forms-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .rastro-forms__spin {
+    animation: none;
+  }
+}
+.rastro-forms__badge {
+  display: inline-flex;
+  align-items: center;
+  height: 18px;
+  padding: 0 7px;
+  border-radius: 999px;
+  font-size: 9.5px;
+  font-weight: 800;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  background: var(--rastro-muted);
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__badge[data-tone="rec"] {
+  background: var(--rastro-accent);
+  color: var(--rastro-accent-fg);
+}
+.rastro-forms__badge[data-tone="on"] {
+  background: var(--rastro-forms-tint);
+  color: var(--rastro-fg);
+  box-shadow: inset 0 0 0 1px var(--rastro-forms-tint-line);
+}
+.rastro-forms__badge[data-tone="risk"] {
+  background: var(--rastro-weak-bg);
+  color: var(--rastro-weak);
+}
+
+/* Buttons */
+.rastro-forms__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  height: 36px;
+  padding: 0 14px;
+  border: 0;
+  border-radius: 10px;
+  font-size: 13.5px;
+  font-weight: 600;
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  background: var(--rastro-accent);
+}
+.rastro-forms .rastro-forms__btn {
+  color: var(--rastro-accent-fg);
+}
+.rastro-forms .rastro-forms__btn[data-variant="outline"],
+.rastro-forms .rastro-forms__btn[data-variant="ghost"] {
+  color: var(--rastro-fg);
+}
+.rastro-forms__btn[data-variant="outline"] {
+  background: var(--rastro-card);
+  box-shadow: inset 0 0 0 1px var(--rastro-border);
+}
+.rastro-forms__btn[data-variant="ghost"] {
+  background: transparent;
+}
+.rastro-forms .rastro-forms__btn[data-variant="danger"] {
+  background: var(--rastro-weak);
+  color: var(--rastro-card);
+}
+.rastro-forms__btn[data-size="sm"] {
+  height: 32px;
+  padding: 0 12px;
+  font-size: 13px;
+  border-radius: 9px;
+}
+.rastro-forms__btn[data-size="xs"] {
+  height: 26px;
+  padding: 0 9px;
+  font-size: 12px;
+  border-radius: 7px;
+}
+.rastro-forms__btn[data-block] {
+  width: 100%;
+  height: 40px;
+}
+.rastro-forms__btn:hover:not(:disabled) {
+  filter: brightness(1.06);
+}
+.rastro-forms__btn[data-variant="outline"]:hover:not(:disabled),
+.rastro-forms__btn[data-variant="ghost"]:hover:not(:disabled) {
+  filter: none;
+  background: var(--rastro-muted);
+}
+.rastro-forms__btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.rastro-forms__icon-btn {
+  display: inline-grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--rastro-muted-fg);
+  cursor: pointer;
+  flex: none;
+  padding: 0;
+}
+.rastro-forms__icon-btn:hover:not(:disabled) {
+  background: var(--rastro-muted);
+  color: var(--rastro-fg);
+}
+.rastro-forms__icon-btn:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+.rastro-forms__close {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border: 0;
+  border-radius: 10px;
+  background: var(--rastro-card);
+  box-shadow: inset 0 0 0 1px var(--rastro-border);
+  color: var(--rastro-muted-fg);
+  cursor: pointer;
+}
+.rastro-forms__close:hover {
+  color: var(--rastro-fg);
+  background: var(--rastro-muted);
+}
+.rastro-forms__lnk {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: 0;
+  background: none;
+  padding: 0;
+  font-weight: 700;
+  font-size: inherit;
+  color: var(--rastro-fg);
+  white-space: nowrap;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-color: var(--rastro-forms-tint-line);
+  text-underline-offset: 3px;
+}
+.rastro-forms__lnk[data-tone="muted"] {
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__lnk:hover {
+  text-decoration-color: currentColor;
+}
+
+/* Callouts */
+.rastro-forms__callout {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  padding: 10px 12px;
+  border-radius: 10px;
+  font-size: 13px;
+  line-height: 1.45;
+  background: var(--rastro-muted);
+}
+.rastro-forms__callout > .rastro-forms__icon {
+  margin-top: 2px;
+}
+.rastro-forms__callout[data-tone="bad"] {
+  background: var(--rastro-weak-bg);
+  color: var(--rastro-weak);
+}
+.rastro-forms__callout[data-tone="ok"] {
+  background: var(--rastro-strong-bg);
+  color: var(--rastro-strong);
+}
+.rastro-forms__callout b {
+  font-weight: 600;
+}
+
+/* FormsView (D1) */
+.rastro-forms__view {
+  container: rastro-forms / inline-size;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-width: 0;
+}
+.rastro-forms__skeleton {
+  height: 260px;
+}
+.rastro-forms__skeleton[data-size="sm"] {
+  height: 36px;
+}
+.rastro-forms__status {
+  display: flex;
+  align-items: center;
+  gap: 8px 12px;
+  flex-wrap: wrap;
+}
+.rastro-forms__summary {
+  margin-left: auto;
+  font-size: 12.5px;
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__summary b {
+  font-weight: 700;
+  color: var(--rastro-fg);
+}
+.rastro-forms__card {
+  background: var(--rastro-card);
+  border-radius: calc(var(--rastro-radius) + 6px);
+  box-shadow:
+    0 0 0 1px var(--rastro-border),
+    0 1px 2px rgb(0 0 0 / 5%);
+  min-width: 0;
+  overflow: hidden;
+}
+.rastro-forms__card-h {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  min-width: 0;
+}
+.rastro-forms__card-title {
+  font-size: 15px;
+  font-weight: 700;
+  overflow-wrap: anywhere;
+}
+.rastro-forms__card-sub {
+  margin-top: 2px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+  font-size: 12px;
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__card-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+.rastro-forms__confirm-stop {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12.5px;
+}
+.rastro-forms__card-error {
+  flex-wrap: wrap;
+  margin: 0 20px 14px;
+}
+.rastro-forms__card-error > span {
+  flex: 1 1 12rem;
+  min-width: 0;
+}
+.rastro-forms__card-error > .rastro-forms__btn {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+.rastro-forms__card-empty {
+  padding: 0 20px 18px;
+  font-size: 13px;
+  color: var(--rastro-muted-fg);
+}
+/* The Page's tile with the Facebook mark on its corner, inside its box. */
+.rastro-forms__pg-wrap {
+  position: relative;
+  width: 45px;
+  height: 45px;
+  flex: none;
+}
+.rastro-forms__pg {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  display: grid;
+  place-items: center;
+  flex: none;
+  font-weight: 800;
+  font-size: 13px;
+  background: var(--rastro-forms-tint);
+  box-shadow: inset 0 0 0 1px var(--rastro-forms-tint-line);
+}
+.rastro-forms__pg[data-muted] {
+  background: var(--rastro-muted);
+  box-shadow: none;
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__pg-badge {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  background: var(--rastro-card);
+  box-shadow: 0 0 0 1px var(--rastro-border);
+}
+.rastro-forms__blocked {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 12px;
+  border-radius: 12px;
+  background: var(--rastro-weak-bg);
+  box-shadow: inset 0 0 0 1px var(--rastro-forms-danger-line);
+  color: var(--rastro-weak);
+  font-size: 13px;
+}
+.rastro-forms__blocked .rastro-forms__btn {
+  margin-left: 6px;
+}
+.rastro-forms__link-page {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.rastro-forms__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.rastro-forms__table th {
+  text-align: left;
+  font-size: 10.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--rastro-muted-fg);
+  padding: 9px 12px;
+  border-top: 1px solid var(--rastro-border);
+  border-bottom: 1px solid var(--rastro-border);
+  background: var(--rastro-forms-quiet);
+  white-space: nowrap;
+}
+.rastro-forms__table td {
+  padding: 12px;
+  border-bottom: 1px solid var(--rastro-border);
+  vertical-align: middle;
+  white-space: nowrap;
+}
+.rastro-forms__table th:first-child,
+.rastro-forms__table td:first-child {
+  padding-left: 20px;
+  white-space: normal;
+}
+.rastro-forms__table th:last-child,
+.rastro-forms__table td:last-child {
+  padding-right: 16px;
+  text-align: right;
+  width: 44px;
+}
+.rastro-forms__table tbody tr:last-child td {
+  border-bottom: 0;
+}
+.rastro-forms__table tbody tr {
+  cursor: pointer;
+}
+.rastro-forms__table tbody tr:hover td,
+.rastro-forms__table tbody tr[data-open] td {
+  background: var(--rastro-forms-tint);
+}
+.rastro-forms__table tbody tr[data-off] td {
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__fn {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+.rastro-forms__fi {
+  width: 30px;
+  height: 30px;
+  border-radius: 9px;
+  background: var(--rastro-muted);
+  color: var(--rastro-muted-fg);
+  display: grid;
+  place-items: center;
+  flex: none;
+}
+.rastro-forms__table tr:hover .rastro-forms__fi,
+.rastro-forms__table tr[data-open] .rastro-forms__fi {
+  background: var(--rastro-card);
+  color: var(--rastro-fg);
+}
+.rastro-forms__t {
+  display: block;
+  font-weight: 700;
+  color: var(--rastro-fg);
+  overflow-wrap: anywhere;
+}
+[data-off] .rastro-forms__t {
+  color: inherit;
+}
+.rastro-forms__s {
+  display: block;
+  margin-top: 1px;
+  font-size: 11.5px;
+  color: var(--rastro-muted-fg);
+  overflow-wrap: anywhere;
+}
+.rastro-forms__leads {
+  display: flex;
+  align-items: center;
+}
+.rastro-forms__num {
+  font-weight: 800;
+  font-size: 15px;
+}
+.rastro-forms__last {
+  margin-top: 1px;
+  font-size: 11.5px;
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__spark {
+  display: inline-flex;
+  align-items: flex-end;
+  gap: 2px;
+  height: 18px;
+  margin-left: 8px;
+}
+.rastro-forms__spark i {
+  width: 4px;
+  border-radius: 2px;
+  background: var(--rastro-forms-tint-line);
+}
+.rastro-forms__dst {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12.5px;
+  font-weight: 600;
+}
+.rastro-forms__dst[data-muted] {
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__rl {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 24px;
+  padding: 0 9px;
+  border: 0;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--rastro-muted-fg);
+  background: var(--rastro-muted);
+}
+.rastro-forms__rl[data-none] {
+  background: transparent;
+  padding: 0;
+  color: var(--rastro-fg);
+  cursor: pointer;
+}
+.rastro-forms__rl[data-none]:hover {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.rastro-forms__cell-skeleton {
+  display: inline-block;
+  width: 70px;
+  height: 12px;
+}
+.rastro-forms__chev {
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__list {
+  display: none;
+  list-style: none;
+  padding: 0 0 4px;
+  margin: 0;
+  border-top: 1px solid var(--rastro-border);
+}
+.rastro-forms__list li + li {
+  border-top: 1px solid var(--rastro-border);
+}
+.rastro-forms__list-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 11px 14px;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  min-width: 0;
+}
+.rastro-forms__list-item:hover {
+  background: var(--rastro-forms-tint);
+}
+.rastro-forms__list-item[data-off] {
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__list-item > .rastro-forms__icon:last-child {
+  color: var(--rastro-muted-fg);
+}
+
+@container rastro-forms (max-width: 1023px) {
+  .rastro-forms__table [data-col="entry"] {
+    display: none;
+  }
+}
+@container rastro-forms (max-width: 859px) {
+  .rastro-forms__table {
+    display: none;
+  }
+  .rastro-forms__list {
+    display: block;
+  }
+  .rastro-forms__card-h {
+    flex-wrap: wrap;
+    padding: 14px;
+  }
+  .rastro-forms__card-actions,
+  .rastro-forms__blocked,
+  .rastro-forms__link-page {
+    width: 100%;
+    justify-content: flex-start;
+  }
+  .rastro-forms__blocked {
+    flex-wrap: wrap;
+  }
+  .rastro-forms__blocked .rastro-forms__btn {
+    margin-left: 0;
+  }
+  .rastro-forms__summary {
+    margin-left: 0;
+  }
+  .rastro-forms__card-empty {
+    padding: 0 14px 14px;
+  }
+}
+@container rastro-forms (max-width: 479px) {
+  .rastro-forms__list-item .rastro-forms__pill {
+    display: none;
+  }
+  .rastro-forms__link-page {
+    flex-wrap: wrap;
+  }
+  .rastro-forms__link-page .rastro-forms__select {
+    flex: 1 1 100%;
+  }
+}
+
+/* Overlays: the drawer (a sheet on the right) and the guide (centered). */
+.rastro-forms__scrim {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  border: 0;
+  padding: 16px;
+  color: var(--rastro-fg);
+  font-family: var(--rastro-font);
+  font-size: 14px;
+  line-height: normal;
+  background: rgb(46 46 46 / 42%);
+  overflow-y: auto;
+}
+.rastro-forms__scrim[open] {
+  display: grid;
+  place-items: center;
+}
+.rastro-forms__scrim::backdrop {
+  background: transparent;
+}
+.rastro-forms__scrim[data-side] {
+  place-items: stretch end;
+  padding: 0;
+  overflow: hidden;
+}
+
+/* FormRulesDrawer (D2, D7) */
+.rastro-forms__drawer {
+  container: rastro-forms-drawer / inline-size;
+  position: relative;
+  width: min(680px, 100vw);
+  height: 100dvh;
+  max-height: 100dvh;
+  background: var(--rastro-card);
+  border-radius: 20px 0 0 20px;
+  box-shadow: -30px 0 70px -20px rgb(0 0 0 / 35%);
+  display: flex;
+  flex-direction: column;
+  outline: none;
+  overflow: hidden;
+}
+.rastro-forms__drawer [data-narrow] {
+  display: none;
+}
+.rastro-forms__drawer-head {
+  position: relative;
+  flex: none;
+  padding: 16px 24px 12px;
+  border-bottom: 1px solid var(--rastro-border);
+}
+.rastro-forms__drawer-head .rastro-forms__close {
+  position: absolute;
+  right: 18px;
+  top: 18px;
+}
+.rastro-forms__drawer-head .rastro-forms__eyebrow {
+  padding-right: 48px;
+}
+.rastro-forms__drawer-title {
+  margin-top: 6px;
+  padding-right: 48px;
+  font-size: 22px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+}
+.rastro-forms__drawer-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-top: 8px;
+  font-size: 12.5px;
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__ext {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-weight: 700;
+  color: var(--rastro-muted-fg);
+  text-decoration: none;
+}
+.rastro-forms__ext:hover {
+  color: var(--rastro-fg);
+}
+.rastro-forms__note {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  border-radius: 10px;
+  background: var(--rastro-muted);
+  font-size: 12px;
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__drawer-bar {
+  flex: none;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--rastro-border);
+}
+.rastro-forms__drawer-bar .rastro-forms__icon-btn {
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+}
+.rastro-forms__drawer-name {
+  display: block;
+  font-size: 16px;
+  font-weight: 800;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rastro-forms__drawer-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 4px 24px 8px;
+  display: flex;
+  flex-direction: column;
+}
+.rastro-forms__drawer-body > .rastro-forms__callout {
+  margin-top: 12px;
+}
+/* A refused save: above the footer, so the draft stays in view. */
+.rastro-forms__drawer-error {
+  flex: none;
+  margin: 0 24px 10px;
+}
+.rastro-forms__drawer-skeleton {
+  height: 160px;
+  margin-top: 16px;
+}
+.rastro-forms__drawer-foot {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 24px;
+  border-top: 1px solid var(--rastro-border);
+}
+.rastro-forms__drawer-foot .rastro-forms__tip {
+  flex: 1;
+  min-width: 0;
+}
+.rastro-forms__foot-actions {
+  margin-left: auto;
+  display: flex;
+  gap: 8px;
+}
+.rastro-forms__dsec {
+  padding: 12px 0 10px;
+  border-bottom: 1px solid var(--rastro-border);
+}
+.rastro-forms__dsec:last-child {
+  border-bottom: 0;
+}
+.rastro-forms__sec-t {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  margin: 0 0 8px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__sec-t b {
+  font-size: 14px;
+  font-weight: 800;
+  color: var(--rastro-fg);
+}
+.rastro-forms__n {
+  align-self: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 7px;
+  display: grid;
+  place-items: center;
+  flex: none;
+  font-size: 11px;
+  font-weight: 800;
+  color: var(--rastro-fg);
+  background: var(--rastro-forms-tint);
+  box-shadow: inset 0 0 0 1px var(--rastro-forms-tint-line);
+}
+
+/* Fields */
+.rastro-forms__entry {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+.rastro-forms__entry[data-single] {
+  grid-template-columns: 1fr;
+}
+.rastro-forms__select {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 38px;
+  padding: 0 12px;
+  border-radius: 12px;
+  background: var(--rastro-card);
+  box-shadow: inset 0 0 0 1px var(--rastro-border);
+  font-size: 13px;
+  font-weight: 600;
+  min-width: 0;
+  white-space: nowrap;
+}
+.rastro-forms__select[data-size="sm"] {
+  height: 32px;
+  border-radius: 9px;
+}
+.rastro-forms__select > .rastro-forms__icon:last-child {
+  color: var(--rastro-muted-fg);
+  pointer-events: none;
+}
+.rastro-forms__select select {
+  appearance: none;
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  outline: none;
+}
+.rastro-forms__select:focus-within {
+  box-shadow:
+    inset 0 0 0 1px var(--rastro-accent),
+    0 0 0 3px var(--rastro-forms-tint);
+}
+.rastro-forms__select select:disabled {
+  cursor: default;
+  opacity: 1;
+}
+.rastro-forms__select[data-tone="discard"] {
+  box-shadow: inset 0 0 0 1px var(--rastro-forms-danger-line);
+}
+.rastro-forms__select[data-static] {
+  gap: 8px;
+}
+.rastro-forms__select-k {
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__select-v {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rastro-forms__door {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 18px;
+  padding: 0 7px;
+  border-radius: 999px;
+  background: var(--rastro-accent);
+  color: var(--rastro-accent-fg);
+  font-size: 9.5px;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  pointer-events: none;
+  flex: none;
+}
+
+/* Rules */
+.rastro-forms__rules {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.rastro-forms__rule {
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr) 18px 160px 62px 28px;
+  gap: 4px 10px;
+  align-items: center;
+  padding: 7px 6px 7px 4px;
+  border-radius: 14px;
+  background: var(--rastro-card);
+  box-shadow: inset 0 0 0 1px var(--rastro-border);
+}
+.rastro-forms__rule[data-tone="discard"] {
+  background: var(--rastro-weak-bg);
+  box-shadow: inset 0 0 0 1px var(--rastro-forms-danger-line);
+}
+.rastro-forms__rule[data-dragging] {
+  opacity: 0.6;
+}
+.rastro-forms__grip .rastro-forms__icon-btn {
+  width: 16px;
+  height: 28px;
+  cursor: grab;
+  color: color-mix(in oklab, var(--rastro-muted-fg) 70%, transparent);
+}
+.rastro-forms__rule-body {
+  min-width: 0;
+}
+.rastro-forms__rule-q {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 4px;
+  font-size: 11.5px;
+  color: var(--rastro-muted-fg);
+  white-space: nowrap;
+  min-width: 0;
+}
+.rastro-forms__rule-q b {
+  color: var(--rastro-fg);
+  font-weight: 700;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rastro-forms__q-select {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+  max-width: 100%;
+  color: var(--rastro-fg);
+}
+.rastro-forms__q-select select {
+  appearance: none;
+  /* As wide as the question chosen, not the longest one. */
+  field-sizing: content;
+  border: 0;
+  padding: 0 14px 0 0;
+  margin-right: -14px;
+  background: transparent;
+  font-size: 11.5px;
+  font-weight: 700;
+  min-width: 0;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.rastro-forms__q-select .rastro-forms__icon {
+  pointer-events: none;
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__answers {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  min-width: 0;
+}
+.rastro-forms__ans-wrap {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+}
+.rastro-forms__ans {
+  display: inline-flex;
+  align-items: center;
+  height: 24px;
+  padding: 0 9px;
+  border: 1px dashed var(--rastro-border);
+  border-radius: 999px;
+  background: transparent;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--rastro-muted-fg);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+button.rastro-forms__ans {
+  cursor: pointer;
+}
+.rastro-forms__ans[data-on] {
+  border-style: solid;
+  background: var(--rastro-muted);
+  color: var(--rastro-fg);
+}
+.rastro-forms__or {
+  margin: 0 4px;
+  font-size: 11px;
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__ans-edit {
+  display: inline-grid;
+  place-items: center;
+  min-width: 24px;
+  height: 24px;
+  padding: 0 6px;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  font-size: 11.5px;
+  font-weight: 700;
+  color: var(--rastro-muted-fg);
+  cursor: pointer;
+}
+.rastro-forms__ans-edit:hover {
+  background: var(--rastro-muted);
+  color: var(--rastro-fg);
+}
+.rastro-forms__rule-arrow {
+  display: flex;
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__rule-dest {
+  min-width: 0;
+}
+.rastro-forms__cnt {
+  text-align: right;
+  line-height: 1.1;
+}
+.rastro-forms__cnt b {
+  display: block;
+  font-size: 14px;
+  font-weight: 800;
+}
+.rastro-forms__cnt span {
+  font-size: 10.5px;
+  color: var(--rastro-muted-fg);
+  white-space: nowrap;
+}
+.rastro-forms__rule-trash {
+  display: flex;
+  justify-content: center;
+}
+.rastro-forms__motivo {
+  grid-column: 2 / -1;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: -2px;
+  font-size: 11.5px;
+  color: var(--rastro-weak);
+  min-width: 0;
+}
+.rastro-forms__motivo b,
+.rastro-forms__motivo input {
+  font-weight: 700;
+}
+.rastro-forms__motivo input {
+  flex: 0 1 260px;
+  min-width: 80px;
+  height: 22px;
+  padding: 0 6px;
+  border: 0;
+  border-radius: 6px;
+  background: color-mix(in oklab, var(--rastro-card) 70%, transparent);
+  box-shadow: inset 0 0 0 1px var(--rastro-forms-danger-line);
+  font-size: 11.5px;
+  color: var(--rastro-weak);
+}
+.rastro-forms__motivo input::placeholder {
+  color: color-mix(in oklab, var(--rastro-weak) 55%, transparent);
+  font-weight: 500;
+}
+.rastro-forms__motivo-tail {
+  white-space: nowrap;
+}
+.rastro-forms__rule-problem {
+  grid-column: 2 / -1;
+  font-size: 11.5px;
+  color: var(--rastro-ok);
+}
+.rastro-forms__empty-rules {
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px dashed var(--rastro-border);
+  font-size: 12.5px;
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__addr {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin: 8px 0 0 4px;
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 12.5px;
+  font-weight: 700;
+  color: var(--rastro-fg);
+  cursor: pointer;
+}
+.rastro-forms__addr:disabled {
+  color: var(--rastro-muted-fg);
+  cursor: default;
+}
+.rastro-forms__sim {
+  margin-top: 8px;
+  padding: 9px 12px;
+  border-radius: 14px;
+  background: var(--rastro-muted);
+}
+.rastro-forms__sim[data-pending] .rastro-forms__bar,
+.rastro-forms__sim[data-pending] .rastro-forms__leg {
+  opacity: 0.55;
+  transition: opacity 0.2s;
+}
+.rastro-forms__sim p {
+  margin-bottom: 6px;
+  font-size: 12px;
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__sim p b {
+  color: var(--rastro-fg);
+}
+.rastro-forms__bar {
+  display: flex;
+  height: 10px;
+  border-radius: 999px;
+  overflow: hidden;
+  gap: 2px;
+}
+.rastro-forms__bar i {
+  display: block;
+  height: 100%;
+  min-width: 3px;
+}
+.rastro-forms__leg {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 14px;
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__leg li {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.rastro-forms__leg b {
+  color: var(--rastro-fg);
+}
+
+/* First contact */
+.rastro-forms__contact {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+.rastro-forms__fc {
+  padding: 10px 12px;
+  border-radius: 14px;
+  background: var(--rastro-card);
+  box-shadow: inset 0 0 0 1px var(--rastro-border);
+}
+.rastro-forms__fc[data-tone="rec"] {
+  box-shadow:
+    inset 0 0 0 1px var(--rastro-forms-tint-line),
+    0 0 0 3px var(--rastro-forms-tint);
+}
+.rastro-forms__fc[data-tone="off"] {
+  background: var(--rastro-forms-quiet);
+}
+.rastro-forms__fc[data-tone="risk"] {
+  box-shadow:
+    inset 0 0 0 1px var(--rastro-forms-danger-line),
+    0 0 0 3px var(--rastro-weak-bg);
+}
+.rastro-forms__fc[data-collapsed] {
+  padding-block: 8px;
+}
+.rastro-forms__fc-h {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+}
+.rastro-forms__fc[data-collapsed] .rastro-forms__fc-h {
+  align-items: center;
+}
+.rastro-forms__fc-ico {
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  display: grid;
+  place-items: center;
+  flex: none;
+  background: var(--rastro-muted);
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__fc[data-tone="rec"] .rastro-forms__fc-ico {
+  background: var(--rastro-forms-tint);
+  color: var(--rastro-fg);
+}
+.rastro-forms__fc[data-tone="risk"] .rastro-forms__fc-ico {
+  background: var(--rastro-weak-bg);
+  color: var(--rastro-weak);
+}
+.rastro-forms__fc-title {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  font-size: 13px;
+  font-weight: 800;
+}
+.rastro-forms__fc-desc {
+  margin-top: 2px;
+  font-size: 12px;
+  color: var(--rastro-muted-fg);
+  line-height: 1.45;
+}
+.rastro-forms__fc-f {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  margin: 6px 0 0 42px;
+  font-size: 12px;
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__fc-text {
+  margin: 8px 0 0 42px;
+}
+.rastro-forms__ta {
+  display: block;
+  width: 100%;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: 12px;
+  background: var(--rastro-card);
+  box-shadow: inset 0 0 0 1px var(--rastro-border);
+  font-size: 12.5px;
+  line-height: 1.55;
+  color: var(--rastro-fg);
+  text-align: left;
+}
+textarea.rastro-forms__ta {
+  resize: vertical;
+}
+.rastro-forms__ta[data-preview] {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: text;
+}
+.rastro-forms__ta[data-preview]:disabled {
+  cursor: default;
+}
+.rastro-forms__ta[data-preview]:hover:not(:disabled) {
+  box-shadow: inset 0 0 0 1px var(--rastro-forms-tint-line);
+}
+.rastro-forms__var {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 7px;
+  margin: 0 1px;
+  border-radius: 6px;
+  background: var(--rastro-forms-tint);
+  box-shadow: inset 0 0 0 1px var(--rastro-forms-tint-line);
+  font-size: 12px;
+  font-weight: 700;
+}
+.rastro-forms__ta-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 6px;
+  font-size: 12px;
+}
+.rastro-forms__ta-bar .rastro-forms__tip {
+  margin-left: auto;
+}
+.rastro-forms__confirm {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 24px;
+  padding: 0 10px;
+  border-radius: 999px;
+  background: var(--rastro-muted);
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.rastro-forms__confirm input {
+  margin: 0;
+  accent-color: var(--rastro-accent);
+}
+.rastro-forms__switch {
+  position: relative;
+  width: 38px;
+  height: 22px;
+  margin-top: 4px;
+  border: 0;
+  border-radius: 999px;
+  padding: 0;
+  flex: none;
+  background: color-mix(
+    in oklab,
+    var(--rastro-muted-fg) 45%,
+    var(--rastro-card)
+  );
+  cursor: pointer;
+}
+.rastro-forms__switch::after {
+  content: "";
+  position: absolute;
+  left: 3px;
+  top: 3px;
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  background: var(--rastro-card);
+  transition: transform 0.15s;
+}
+.rastro-forms__switch[aria-checked="true"] {
+  background: var(--rastro-accent);
+}
+.rastro-forms__switch[aria-checked="true"]::after {
+  transform: translateX(16px);
+}
+.rastro-forms__switch:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.rastro-forms__auto {
+  margin: 12px 0 0 42px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.rastro-forms__risk {
+  display: flex;
+  gap: 10px;
+  padding: 11px 12px;
+  border-radius: 12px;
+  background: var(--rastro-weak-bg);
+  box-shadow: inset 0 0 0 1px var(--rastro-forms-danger-line);
+  color: var(--rastro-weak);
+  font-size: 12.5px;
+  line-height: 1.5;
+}
+.rastro-forms__risk b {
+  font-weight: 700;
+}
+.rastro-forms__brakes-title {
+  margin-top: 2px;
+  font-size: 12px;
+  font-weight: 800;
+}
+.rastro-forms__brakes {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+.rastro-forms__field {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.rastro-forms__lab {
+  display: block;
+  margin: 0 0 5px;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--rastro-weak);
+}
+.rastro-forms__field-box {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 34px;
+  padding: 0 10px;
+  border-radius: 10px;
+  background: var(--rastro-card);
+  box-shadow: inset 0 0 0 1px var(--rastro-border);
+  font-size: 12.5px;
+  font-weight: 600;
+  min-width: 0;
+}
+.rastro-forms__field-box[data-static] {
+  color: var(--rastro-fg);
+}
+.rastro-forms__field-box select {
+  appearance: none;
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.rastro-forms__ack {
+  display: flex;
+  gap: 9px;
+  align-items: flex-start;
+  font-size: 12.5px;
+  line-height: 1.45;
+  cursor: pointer;
+}
+.rastro-forms__ack input {
+  width: 16px;
+  height: 16px;
+  margin: 1px 0 0;
+  flex: none;
+  accent-color: var(--rastro-weak);
+}
+.rastro-forms__auto-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+/* The phone (D8): the drawer full screen, no rounded edge. */
+@media (max-width: 679px) {
+  .rastro-forms__drawer {
+    border-radius: 0;
+  }
+}
+@container rastro-forms-drawer (max-width: 639px) {
+  .rastro-forms__drawer [data-wide] {
+    display: none;
+  }
+  .rastro-forms__drawer [data-narrow] {
+    display: revert;
+  }
+  .rastro-forms__drawer .rastro-forms__drawer-bar {
+    display: flex;
+  }
+  .rastro-forms__drawer-body {
+    padding: 0 16px 8px;
+  }
+  .rastro-forms__drawer .rastro-forms__sec-t b {
+    display: inline;
+  }
+  .rastro-forms__rule {
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 8px;
+    padding: 10px 12px;
+  }
+  .rastro-forms__grip,
+  .rastro-forms__rule-arrow {
+    display: none;
+  }
+  .rastro-forms__rule-body {
+    grid-column: 1;
+    grid-row: 1;
+  }
+  .rastro-forms__cnt {
+    grid-column: 2;
+    grid-row: 1;
+    align-self: start;
+  }
+  .rastro-forms__rule-dest {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    display: flex;
+    gap: 6px;
+    align-items: center;
+  }
+  .rastro-forms__rule-dest .rastro-forms__select {
+    flex: 1;
+  }
+  .rastro-forms__rule-trash {
+    grid-column: 2;
+    grid-row: 2;
+    display: none;
+  }
+  .rastro-forms__motivo {
+    grid-column: 1 / -1;
+  }
+  .rastro-forms__motivo input {
+    flex: 1 1 auto;
+  }
+  .rastro-forms__motivo-tail {
+    display: none;
+  }
+  .rastro-forms__rule-problem {
+    grid-column: 1 / -1;
+  }
+  .rastro-forms__fc-ico {
+    display: none;
+  }
+  .rastro-forms__fc-title {
+    font-size: 12.5px;
+  }
+  .rastro-forms__fc-h {
+    align-items: center;
+  }
+  .rastro-forms__fc .rastro-forms__pill,
+  .rastro-forms__confirm {
+    margin-left: auto;
+    height: 22px;
+    font-size: 11px;
+  }
+  .rastro-forms__auto,
+  .rastro-forms__fc-f,
+  .rastro-forms__fc-text {
+    margin-left: 0;
+  }
+  .rastro-forms__brakes {
+    grid-template-columns: 1fr;
+  }
+  .rastro-forms__drawer-foot {
+    padding: 12px 16px 18px;
+  }
+  .rastro-forms__foot-actions {
+    margin-left: 0;
+    width: 100%;
+    gap: 10px;
+  }
+  .rastro-forms__foot-actions .rastro-forms__btn {
+    flex: 1;
+    height: 44px;
+    font-size: 15px;
+  }
+  .rastro-forms__foot-actions .rastro-forms__btn:last-child {
+    flex: 1.4;
+  }
+}
+@container rastro-forms-drawer (max-width: 639px) {
+  .rastro-forms__drawer .rastro-forms__drawer-bar .rastro-forms__pill {
+    margin-left: auto;
+  }
+}
+
+/* WhatsAppButtonGuide (D3) */
+.rastro-forms__guide {
+  container: rastro-forms-guide / inline-size;
+  width: min(1180px, 100%);
+  height: min(870px, calc(100dvh - 32px));
+  background: var(--rastro-card);
+  border-radius: 20px;
+  box-shadow: 0 40px 90px -20px rgb(0 0 0 / 45%);
+  display: grid;
+  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
+  overflow: hidden;
+  outline: none;
+}
+.rastro-forms__guide-l {
+  padding: 24px 24px 20px;
+  border-right: 1px solid var(--rastro-border);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+}
+.rastro-forms__guide-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+.rastro-forms__close[data-inline] {
+  width: 32px;
+  height: 32px;
+  flex: none;
+}
+.rastro-forms__guide-title {
+  margin-top: 6px;
+  font-size: 21px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+.rastro-forms__guide-desc {
+  margin-top: 8px;
+  font-size: 13px;
+  color: var(--rastro-muted-fg);
+  line-height: 1.5;
+}
+.rastro-forms__steps {
+  list-style: none;
+  margin-top: 16px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.rastro-forms__steps li {
+  display: flex;
+  gap: 12px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+.rastro-forms__steps li > b {
+  flex: none;
+  width: 26px;
+  height: 26px;
+  border-radius: 9px;
+  display: grid;
+  place-items: center;
+  font-size: 12px;
+  font-weight: 800;
+  background: var(--rastro-forms-tint);
+  box-shadow: inset 0 0 0 1px var(--rastro-forms-tint-line);
+}
+.rastro-forms__steps li[data-on] > b {
+  background: var(--rastro-accent);
+  color: var(--rastro-accent-fg);
+  box-shadow: none;
+}
+.rastro-forms__steps em {
+  font-style: normal;
+  font-weight: 700;
+}
+.rastro-forms__guide-checks {
+  margin-top: 18px;
+  padding-top: 14px;
+  border-top: 1px solid var(--rastro-border);
+}
+.rastro-forms__guide-sub {
+  font-size: 12px;
+  font-weight: 800;
+}
+.rastro-forms__checks {
+  list-style: none;
+  margin-top: 10px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.rastro-forms__checks li {
+  display: flex;
+  gap: 9px;
+  align-items: flex-start;
+  font-size: 12.5px;
+  line-height: 1.4;
+}
+.rastro-forms__checks li[data-state="optional"] {
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__chk {
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  flex: none;
+}
+.rastro-forms__chk[data-state="ok"] {
+  background: var(--rastro-strong);
+  color: var(--rastro-card);
+}
+.rastro-forms__chk[data-state="waiting"] {
+  border: 2px solid var(--rastro-accent);
+}
+.rastro-forms__chk[data-state="waiting"]::after {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--rastro-accent);
+}
+.rastro-forms__chk[data-state="todo"] {
+  border: 2px solid var(--rastro-muted-fg);
+}
+.rastro-forms__chk[data-state="optional"] {
+  border: 2px dashed var(--rastro-border);
+}
+.rastro-forms__guide-actions {
+  margin-top: auto;
+  padding-top: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.rastro-forms__guide-r {
+  position: relative;
+  padding: 18px;
+  min-height: 0;
+  background: color-mix(in oklab, var(--rastro-muted) 80%, var(--rastro-fg) 4%);
+}
+.rastro-forms__ilus {
+  position: absolute;
+  right: 28px;
+  top: 26px;
+  z-index: 3;
+  padding: 3px 8px;
+  border-radius: 6px;
+  background: rgb(28 43 51 / 80%);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+/* The drawing of Meta's editor keeps Meta's own colors, whatever the theme. */
+.rastro-forms__mwin {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 10px;
+  background: #fff;
+  box-shadow:
+    0 0 0 1px rgb(0 0 0 / 8%),
+    0 12px 30px -12px rgb(0 0 0 / 30%);
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #1c2b33;
+}
+.rastro-forms__chrome {
+  height: 34px;
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 0 12px;
+  background: #eceef1;
+  border-bottom: 1px solid #d9dce1;
+}
+.rastro-forms__chrome > i {
+  width: 9px;
+  height: 9px;
+  border-radius: 999px;
+  background: #c9ccd1;
+}
+.rastro-forms__url {
+  flex: 1;
+  min-width: 0;
+  margin-left: 8px;
+  height: 22px;
+  border-radius: 6px;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 10px;
+  font-size: 11.5px;
+  color: #4b5563;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.rastro-forms__mtop {
+  height: 48px;
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 16px;
+  border-bottom: 1px solid #dadde1;
+  font-size: 15px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+.rastro-forms__mtop .rastro-forms__grow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rastro-forms__mb {
+  display: flex;
+  gap: 8px;
+}
+.rastro-forms__mb span {
+  height: 32px;
+  padding: 0 14px;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  font-size: 13px;
+  font-weight: 600;
+  background: #e4e6eb;
+}
+.rastro-forms__mb span[data-primary] {
+  background: #0866ff;
+  color: #fff;
+}
+.rastro-forms__mbody {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
+}
+.rastro-forms__mleft {
+  padding: 12px 14px;
+  border-right: 1px solid #dadde1;
+  overflow: hidden;
+}
+.rastro-forms__msec {
+  margin-bottom: 8px;
+  border-radius: 8px;
+  box-shadow: inset 0 0 0 1px #dadde1;
+  font-size: 13px;
+}
+.rastro-forms__msec[data-open] {
+  box-shadow: inset 0 0 0 2px #0866ff;
+}
+.rastro-forms__msec-hd {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 12px;
+  font-weight: 700;
+}
+.rastro-forms__mck {
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  background: #31a24c;
+  color: #fff;
+}
+.rastro-forms__msec-bd {
+  padding: 0 12px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+}
+.rastro-forms__mf {
+  position: relative;
+}
+.rastro-forms__mf > span {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 12px;
+  font-weight: 700;
+}
+.rastro-forms__mf > div {
+  height: 34px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 10px;
+  border-radius: 6px;
+  box-shadow: inset 0 0 0 1px #cbd2d9;
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.rastro-forms__mf > div[data-dd] {
+  justify-content: space-between;
+}
+/* An outline rings step 3 without growing the editor's scroll area. */
+.rastro-forms__mf[data-ring] {
+  border-radius: 6px;
+  outline: 2.5px solid var(--rastro-accent);
+  outline-offset: 5px;
+}
+.rastro-forms__ring-n {
+  position: absolute;
+  left: -19px;
+  top: -19px;
+  z-index: 1;
+  width: 24px;
+  height: 24px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  font-size: 12px;
+  font-weight: 800;
+  background: var(--rastro-accent);
+  color: var(--rastro-accent-fg);
+}
+.rastro-forms__mright {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: #f0f2f5;
+  min-width: 0;
+  overflow: hidden;
+}
+.rastro-forms__mlbl {
+  font-size: 12px;
+  font-weight: 600;
+  color: #65676b;
+}
+.rastro-forms__mphone {
+  width: 238px;
+  height: 470px;
+  max-height: calc(100% - 40px);
+  border-radius: 30px;
+  background: #fff;
+  box-shadow:
+    0 0 0 8px #1c1e21,
+    0 20px 40px -12px rgb(0 0 0 / 40%);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.rastro-forms__mph {
+  height: 44px;
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+  border-bottom: 1px solid #e4e6eb;
+  font-size: 12px;
+  font-weight: 700;
+}
+.rastro-forms__mpg {
+  width: 24px;
+  height: 24px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  font-size: 9px;
+  font-weight: 800;
+  background: #fef1e9;
+  color: #a53f0e;
+}
+.rastro-forms__mpb {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 10px;
+  padding: 40px 18px 18px;
+}
+.rastro-forms__mpb strong {
+  font-size: 16px;
+}
+.rastro-forms__mpb p {
+  font-size: 12.5px;
+  line-height: 1.45;
+  color: #65676b;
+}
+.rastro-forms__mok {
+  width: 52px;
+  height: 52px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  background: #e7f3ff;
+  color: #0866ff;
+}
+.rastro-forms__mcta {
+  margin-top: auto;
+  width: 100%;
+  height: 38px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  background: #0866ff;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 700;
+}
+@container rastro-forms-guide (max-width: 899px) {
+  .rastro-forms__guide-r {
+    display: none;
+  }
+  .rastro-forms__guide-l {
+    border-right: 0;
+    grid-column: 1 / -1;
+  }
+}
+@container rastro-forms-guide (max-width: 1099px) {
+  .rastro-forms__mbody {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .rastro-forms__mright {
+    display: none;
+  }
+}
+
+/* The lead's pieces for the host (D4–D6, D9) */
+.rastro-forms__seal {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 20px;
+  padding: 0 7px 0 5px;
+  border-radius: 999px;
+  background: var(--rastro-forms-meta-bg, #dbeafe);
+  color: var(--rastro-forms-meta-fg, #1d4ed8);
+  font-size: 10.5px;
+  font-weight: 700;
+  white-space: nowrap;
+  max-width: 100%;
+  overflow: hidden;
+  /* The chip stands alone in a host's card: its own colors, no scope. */
+  --rastro-forms-meta-bg: color-mix(in oklab, #0866ff 13%, var(--rastro-card));
+  --rastro-forms-meta-fg: color-mix(in oklab, #0866ff 70%, var(--rastro-fg));
+}
+.rastro-forms__seal[data-size="md"] {
+  height: 24px;
+  padding: 0 9px 0 7px;
+  font-size: 12px;
+}
+.rastro-forms__seal[data-variant="wrote"] {
+  background: color-mix(in oklab, var(--rastro-accent) 8%, var(--rastro-card));
+  color: var(--rastro-fg);
+}
+.rastro-forms__seal-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rastro-forms__lead {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+.rastro-forms__box {
+  padding: 13px 14px;
+  border-radius: 16px;
+  background: var(--rastro-card);
+  box-shadow: inset 0 0 0 1px var(--rastro-border);
+  min-width: 0;
+}
+.rastro-forms__box[data-highlight] {
+  box-shadow:
+    inset 0 0 0 1px
+      color-mix(in oklab, var(--rastro-forms-meta) 30%, var(--rastro-card)),
+    0 0 0 3px color-mix(in oklab, var(--rastro-forms-meta) 8%, transparent);
+}
+.rastro-forms__box-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 800;
+}
+.rastro-forms__sub {
+  margin-top: 3px;
+  font-size: 11.5px;
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__qa {
+  list-style: none;
+  padding: 0;
+  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.rastro-forms__qa li {
+  font-size: 12px;
+  line-height: 1.4;
+}
+.rastro-forms__qa li span {
+  display: block;
+  font-size: 11px;
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__qa li b {
+  font-weight: 700;
+  overflow-wrap: anywhere;
+}
+.rastro-forms__divider {
+  height: 1px;
+  margin: 12px 0 0;
+  border: 0;
+  background: var(--rastro-border);
+}
+.rastro-forms__kv {
+  margin-top: 10px;
+  display: grid;
+  gap: 6px;
+  font-size: 12px;
+}
+.rastro-forms__kv > div {
+  display: grid;
+  grid-template-columns: 76px minmax(0, 1fr);
+  gap: 10px;
+}
+.rastro-forms__kv dt {
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__kv dd {
+  font-weight: 600;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.rastro-forms__ruleline {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 7px 10px;
+  border-radius: 10px;
+  background: var(--rastro-muted);
+  font-size: 11.5px;
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__ruleline b {
+  color: var(--rastro-fg);
+}
+.rastro-forms__ruleline[data-tone="discard"] {
+  background: var(--rastro-weak-bg);
+  color: var(--rastro-weak);
+}
+.rastro-forms__path {
+  list-style: none;
+  margin-top: 10px;
+  padding: 0;
+}
+.rastro-forms__path li {
+  position: relative;
+  padding: 0 0 11px 22px;
+  font-size: 12px;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+.rastro-forms__path li::before {
+  content: "";
+  position: absolute;
+  left: 5px;
+  top: 13px;
+  bottom: -2px;
+  width: 2px;
+  background: var(--rastro-border);
+}
+.rastro-forms__path li:last-child {
+  padding-bottom: 0;
+}
+.rastro-forms__path li:last-child::before {
+  display: none;
+}
+.rastro-forms__path li > i {
+  position: absolute;
+  left: 0;
+  top: 3px;
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+  background: var(--rastro-card);
+  border: 2px solid var(--rastro-border);
+}
+.rastro-forms__path li[data-tone="meta"] > i {
+  border-color: var(--rastro-forms-meta);
+}
+.rastro-forms__path li[data-tone="rule"] > i {
+  border-color: oklch(0.45 0.15 320);
+}
+.rastro-forms__path li[data-tone="discard"] > i {
+  border-color: var(--rastro-weak);
+}
+.rastro-forms__path li[data-tone="wrote"] > i {
+  border-color: var(--rastro-fg);
+  background: var(--rastro-fg);
+}
+.rastro-forms__path li[data-tone="waiting"] > i {
+  border-color: var(--rastro-accent);
+  background: var(--rastro-accent);
+  box-shadow: 0 0 0 3px var(--rastro-forms-tint-line);
+}
+.rastro-forms__path b {
+  font-weight: 700;
+}
+.rastro-forms__path-time {
+  margin-right: 6px;
+  font-size: 11px;
+  color: var(--rastro-muted-fg);
+}
+.rastro-forms__lead[data-layout="compact"] .rastro-forms__box {
+  padding: 12px;
+}
+
 /* src/ui/integrations/integrations.css */
 /*
  * IntegrationsView (Integrações). Desktop is the B artboards; under 640px of