/* StitchFlow private 8082 - compact Email Test Center layout only. */
body:has(#emailTestForm) .title,
body:has(#emailTestForm) .safe-banner,
body:has(#emailTestForm) .email-test-form,
body:has(#emailTestForm) .template-list,
body:has(#emailTestForm) .table-wrap,
body:has(#emailTestForm) .tools {
  width: min(100%, 92rem);
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

body:has(#emailTestForm) .title {
  margin-bottom: .6rem;
}

body:has(#emailTestForm) .title h1 {
  margin-top: .18rem;
  margin-bottom: .18rem;
}

body:has(#emailTestForm) .title p,
body:has(#emailTestForm) .email-test-form p {
  margin-top: .25rem;
  margin-bottom: .25rem;
}

body:has(#emailTestForm) .safe-banner {
  margin-top: .45rem;
  margin-bottom: .55rem;
  padding: .55rem .8rem;
}

body:has(#emailTestForm) .email-test-form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .55rem .8rem;
  margin-bottom: .65rem;
  padding: .75rem .9rem;
}

body:has(#emailTestForm) .email-test-form h2 {
  margin: .15rem 0 .25rem !important;
}

body:has(#emailTestForm) .email-test-form label {
  gap: .25rem;
}

body:has(#emailTestForm) .email-test-form input,
body:has(#emailTestForm) .email-test-form select,
body:has(#emailTestForm) .email-test-form textarea {
  min-height: 2.15rem;
  box-sizing: border-box;
  padding: .42rem .55rem;
}

body:has(#emailTestForm) #emailTestForm textarea {
  min-height: 3.4rem;
  max-height: 6rem;
  resize: vertical;
}

body:has(#emailTestForm) .email-test-actions {
  gap: .35rem;
}

body:has(#emailTestForm) .email-test-actions button,
body:has(#emailTestForm) .email-test-actions select {
  min-height: 1.9rem;
  box-sizing: border-box;
}

body:has(#emailTestForm) .template-list {
  padding: 0 .8rem .65rem;
}

body:has(#emailTestForm) .template-list .attention {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center !important;
  gap: .6rem 1rem;
  padding: .55rem .7rem;
}

body:has(#emailTestForm) .template-list .email-test-actions {
  justify-content: flex-end;
  align-items: center;
}

body:has(#emailTestForm) .template-list select {
  width: min(16rem, 26vw);
}

body:has(#emailTestForm) .table-wrap {
  overflow-x: auto;
}

body:has(#emailTestForm) .table {
  table-layout: fixed;
  min-width: 70rem;
}

body:has(#emailTestForm) .table th,
body:has(#emailTestForm) .table td {
  padding: .48rem .55rem;
  vertical-align: top;
}

body:has(#emailTestForm) .table th:nth-child(1) { width: 8.5rem; }
body:has(#emailTestForm) .table th:nth-child(2) { width: 11rem; }
body:has(#emailTestForm) .table th:nth-child(3) { width: 12rem; }
body:has(#emailTestForm) .table th:nth-child(5) { width: 8rem; }
body:has(#emailTestForm) .table th:nth-child(6) { width: 19rem; }

body:has(#emailTestForm) .email-body-preview {
  max-width: 28rem;
}

body:has(#emailTestForm) #emailTestForm button[type="submit"] {
  position: fixed;
  right: 1.5rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 1200;
  width: auto;
  min-width: 10.5rem;
  box-shadow: 0 .45rem 1.2rem rgb(0 0 0 / 18%);
}

body:has(#emailTestForm) #emailTestForm {
  padding-bottom: 1rem;
}

@media (max-width: 900px) {
  body:has(#emailTestForm) .email-test-form {
    grid-template-columns: 1fr;
  }

  body:has(#emailTestForm) .email-test-form .wide {
    grid-column: auto;
  }

  body:has(#emailTestForm) .template-list .attention {
    grid-template-columns: 1fr;
  }

  body:has(#emailTestForm) .template-list .email-test-actions {
    justify-content: flex-start;
  }

  body:has(#emailTestForm) .template-list select {
    width: min(100%, 18rem);
  }
}

@media (max-width: 600px) {
  body:has(#emailTestForm) #emailTestForm button[type="submit"] {
    right: .75rem;
    bottom: max(.75rem, env(safe-area-inset-bottom));
  }
}

/* V2: four clearly identified blocks arranged as two side-by-side rows. */
body:has(#emailTestForm) .content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: .8rem;
}

body:has(#emailTestForm) .content > .back,
body:has(#emailTestForm) .content > .title,
body:has(#emailTestForm) .content > .safe-banner {
  grid-column: 1 / -1;
  width: 100%;
}

body:has(#emailTestForm) .content > .email-test-form,
body:has(#emailTestForm) .content > section.card:has(> .template-list),
body:has(#emailTestForm) .content > .table-wrap {
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
}

body:has(#emailTestForm) .content > .email-test-form:not(#emailTestForm) {
  grid-column: 1;
  grid-row: auto;
}

body:has(#emailTestForm) .content > #emailTestForm {
  grid-column: 2;
}

body:has(#emailTestForm) .content > section.card:has(> .template-list) {
  grid-column: 1;
  margin-bottom: 0 !important;
}

body:has(#emailTestForm) .content > .table-wrap {
  grid-column: 2;
  max-height: 34rem;
  overflow: auto;
}

body:has(#emailTestForm) .content > .tools {
  grid-column: 2;
  width: 100%;
  margin: -.2rem 0 0;
}

body:has(#emailTestForm) .email-test-form:not(#emailTestForm)::before,
body:has(#emailTestForm) #emailTestForm::before,
body:has(#emailTestForm) section.card:has(> .template-list)::before,
body:has(#emailTestForm) .table-wrap::before {
  display: block;
  grid-column: 1 / -1;
  margin: 0 0 .6rem;
  padding: .55rem .7rem;
  border-left: .28rem solid var(--green);
  background: color-mix(in srgb, var(--green) 8%, transparent);
  color: var(--ink);
  font-size: .78rem;
  line-height: 1.35;
  font-weight: 650;
  white-space: normal;
}

body:has(#emailTestForm) .email-test-form:not(#emailTestForm)::before {
  content: "1  MICROSOFT ACCOUNT CONNECTION  —  Connects the mailbox and restricts controlled delivery to one approved test address.";
}

body:has(#emailTestForm) #emailTestForm::before {
  content: "2  CREATE A TEST PREVIEW  —  Builds a manual test message and optional cost-sheet attachment without enabling automated delivery.";
}

body:has(#emailTestForm) section.card:has(> .template-list)::before {
  content: "3  PRODUCTION EMAIL TEMPLATES  —  Reviews or edits reusable subjects and messages, then creates a rendered test from a selected cost sheet.";
}

body:has(#emailTestForm) .table-wrap::before {
  content: "4  NOTIFICATION HISTORY  —  Reviews generated messages, delivery status, attempts, and safe test controls.";
  position: sticky;
  top: 0;
  z-index: 3;
}

body:has(#emailTestForm) .content > .table-wrap .table {
  min-width: 64rem;
}

@media (max-width: 1100px) {
  body:has(#emailTestForm) .content {
    grid-template-columns: 1fr;
  }

  body:has(#emailTestForm) .content > .email-test-form:not(#emailTestForm),
  body:has(#emailTestForm) .content > #emailTestForm,
  body:has(#emailTestForm) .content > section.card:has(> .template-list),
  body:has(#emailTestForm) .content > .table-wrap,
  body:has(#emailTestForm) .content > .tools {
    grid-column: 1;
  }
}