/* Email page: the shared OHB shell with a one-screen desktop layout. */
.email-app {
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--app-font);
  font-size: 13px;
}
.email-app button, .email-app input, .email-app textarea { font-family: inherit; letter-spacing: 0; }
.email-app .email-workspace { background: var(--canvas); }
.email-content { width: min(985px, 100%); margin: 0 auto; }
.email-app .email-heading { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
.email-app .email-heading > div:first-child { min-width: 0; flex: 1; }
.email-app .email-heading h1 { margin: 0; color: var(--ink); font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: 0; }
.email-app .email-heading > div > p:last-child { max-width: none; margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.email-heading-actions { display: flex; align-items: center; flex: 0 0 auto; gap: 8px; }
.email-saved { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 500; white-space: nowrap; }
.email-saved svg { width: 14px; height: 14px; color: var(--charcoal); }
.email-app .email-grid { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 0; }
.email-app .email-card { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(23,34,38,.025); }
.email-app .email-recipients { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 16px; }
.email-recipients > div:first-child { min-width: 0; }
.email-recipients h2 { margin: 0; font-size: 14px; font-weight: 650; line-height: 1.3; }
.email-recipients p { margin: 2px 0 0; color: var(--muted); font-size: 11px; line-height: 1.35; }
.email-app .email-segmented { min-height: 38px; display: flex; flex: 0 0 auto; gap: 3px; margin: 0; padding: 3px; border: 0; border-radius: 9px; background: #eef1f1; }
.email-app .email-segmented button { min-width: auto; min-height: 32px; flex: 0 0 auto; padding: 0 12px; border: 0; border-radius: 7px; color: #455157; background: transparent; font-size: 11px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.email-app .email-segmented button.active { color: #fff; background: var(--charcoal); box-shadow: none; }
.email-app .email-sequence-card { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 12px; overflow: visible; }
.email-section-heading { min-width: 0; display: flex; align-items: center; gap: 10px; }
.email-section-icon { width: 24px; height: 24px; display: grid; flex: 0 0 24px; place-items: center; color: var(--charcoal); background: transparent; }
.email-section-icon svg { width: 20px; height: 20px; stroke-width: 1.8; }
.email-section-copy { min-width: 0; flex: 1; }
.email-section-copy h2 { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.25; }
.email-section-copy p { margin: 2px 0 0; color: var(--muted); font-size: 11px; line-height: 1.35; }
.email-toggle-wrap { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.email-toggle-wrap > span { color: #667176; font-size: 11px; font-weight: 600; }
.email-toggle-wrap > span.enabled { color: var(--charcoal); }
.email-app .email-toggle { position: relative; width: 42px; height: 24px; flex: 0 0 42px; padding: 0; border: 0; border-radius: 99px; background: #c8d0d3; cursor: pointer; transition: background .16s ease; }
.email-app .email-toggle.on { background: var(--charcoal); }
.email-app .email-toggle i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.14); transition: transform .16s ease; }
.email-app .email-toggle.on i { transform: translateX(18px); }
.email-app .email-sequence-list { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.email-app .email-sequence-list li { min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 0; border: 0; }
.email-app .email-sequence-list strong { color: var(--charcoal); font-size: 11px; font-weight: 700; line-height: 1.3; }
.email-app .email-sequence-list li > span:last-child { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.35; }
.email-app .email-card-actions { display: flex; align-items: center; gap: 7px; padding: 10px 0 0; border-top: 1px solid #e7ebed; background: transparent; }
.email-app .email-card-actions button:not(.email-view-all) { min-height: 34px; width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--charcoal); background: #fff; font-size: 11px; font-weight: 600; cursor: pointer; }
.email-app .email-card-actions button:not(.email-view-all):hover { background: #f5f7f8; }
.email-app .email-card-actions button svg { width: 14px; height: 14px; }
.email-app .email-card-actions .email-sequence-edit-link { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--charcoal); background: #fff; font-size: 11px; font-weight: 600; text-decoration: none; }
.email-app .email-card-actions .email-sequence-edit-link:hover { background: #f5f7f8; }
.email-app .email-card-actions .email-sequence-edit-link svg { width: 14px; height: 14px; }
.email-app .email-card-actions .email-view-all { width: auto; min-height: 34px; display: inline-flex; align-items: center; gap: 3px; margin-left: auto; padding: 0; border: 0; color: var(--charcoal); background: transparent; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.email-app .email-card-actions .email-view-all:hover { color: #000; background: transparent; text-decoration: underline; }
.email-app .email-preferences { padding: 4px 16px; overflow: visible; }
.email-listing-heading { padding: 8px 0 11px; }
.email-app .email-alert-list { display: block; }
.email-app .email-alert-row { min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid #e7ebed; border-bottom: 0; }
.email-alert-row > div:first-child { min-width: 0; }
.email-app .email-alert-row h3 { margin: 0; font-size: 13px; font-weight: 650; line-height: 1.3; }
.email-app .email-alert-row p { max-width: none; margin: 2px 0 0; color: var(--muted); font-size: 11px; line-height: 1.35; }
.email-app .dashboard-toast { z-index: 120; left: 50%; bottom: 24px; color: #fff; font-size: 12px; transform: translate(-50%,12px); }
.email-app .dashboard-toast.show { transform: translate(-50%,0); }
@media (min-width: 761px) {
  .app-shell.email-app > main.workspace { margin-left: 224px; padding: 74px 28px 16px !important; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .email-app .email-heading { align-items: flex-start; }
  .email-heading-actions { gap: 6px; }
  .email-saved { display: none; }
}
@media (max-width: 760px) {
  .app-shell.email-app > main.workspace { margin-left: 0; padding: 78px 14px 96px !important; }
  .email-app .email-heading { align-items: stretch; flex-direction: column; gap: 10px; margin-bottom: 12px; }
  .email-app .email-heading h1 { font-size: 22px; }
  .email-heading-actions { width: 100%; justify-content: flex-end; gap: 8px; }
  .email-saved { margin-right: auto; }
  .email-app .email-grid { gap: 10px; }
  .email-app .email-recipients { align-items: stretch; flex-direction: column; gap: 10px; padding: 12px; }
  .email-app .email-segmented { width: 100%; }
  .email-app .email-segmented button { min-width: 0; flex: 1; padding: 0 8px; white-space: normal; }
  .email-app .email-sequence-card { gap: 12px; padding: 12px; }
  .email-section-heading { flex-wrap: wrap; }
  .email-section-heading .email-toggle-wrap { margin-left: 34px; }
  .email-app .email-sequence-list { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 10px; }
  .email-app .email-card-actions { flex-direction: row; flex-wrap: wrap; }
  .email-app .email-preferences { padding: 4px 12px; }
  .email-app .email-alert-row { display: flex; align-items: center; }
}

/* Follow-up editor: two equal-height panels sized to fit the desktop viewport. */
.sequence-workspace { height: 100dvh; overflow: hidden; }
.sequence-content { width: min(1120px, 100%); height: calc(100dvh - 90px); display: flex; flex-direction: column; margin: 0 auto; }
.sequence-toolbar { min-height: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.sequence-back-link { display: inline-flex; align-items: center; gap: 3px; color: var(--charcoal); font-size: 11px; font-weight: 650; text-decoration: none; }
.sequence-back-link:hover { text-decoration: underline; }
.sequence-status { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
.sequence-status svg { color: var(--charcoal); }
.sequence-mobile-selector { display: none; }
.sequence-editor { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(250px, 33%) minmax(0,1fr); gap: 12px; }
.sequence-list-panel, .sequence-compose-panel { min-height: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(23,34,38,.025); }
.sequence-list-panel { display: flex; flex-direction: column; overflow: hidden; }
.sequence-list-panel h2 { flex: 0 0 auto; margin: 0; padding: 13px 14px 10px; color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.2; }
.sequence-email-list { min-height: 0; display: flex; flex: 1; flex-direction: column; gap: 2px; padding: 0 8px 8px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.sequence-email-list button { min-height: 39px; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 7px; flex: 0 0 39px; padding: 5px 7px; border: 1px solid transparent; border-radius: 7px; color: var(--charcoal); background: transparent; text-align: left; cursor: pointer; }
.sequence-email-list button:hover { background: #f5f7f8; }
.sequence-email-list button.selected { color: #fff; background: var(--charcoal); }
.sequence-email-list button > strong { font-size: 9px; font-weight: 750; line-height: 1.2; }
.sequence-email-list button > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sequence-email-list button b { overflow: hidden; font-size: 10px; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.sequence-email-list button small { overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.sequence-email-list button.selected small { color: #dce2e3; }
.sequence-list-footer { flex: 0 0 auto; padding: 8px; border-top: 1px solid #e7ebed; }
.sequence-list-footer button { min-height: 31px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 7px; color: var(--charcoal); background: #fff; font-size: 10px; font-weight: 650; cursor: pointer; }
.sequence-list-footer button:hover { background: #f5f7f8; }
.sequence-list-footer button:disabled { color: var(--muted); background: #f5f7f8; cursor: not-allowed; }
.sequence-mobile-dialog { width: min(100%, 480px); height: min(82dvh, 700px); max-height: calc(100dvh - 12px); margin: auto auto 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px 12px 0 0; color: var(--ink); background: #fff; box-shadow: 0 -12px 40px rgba(15,21,23,.18); }
.sequence-mobile-dialog[open] { display: flex; flex-direction: column; }
.sequence-mobile-dialog::backdrop { background: rgba(15,21,23,.5); }
.sequence-mobile-dialog-heading { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.sequence-mobile-dialog-heading h2 { margin: 0; font-size: 14px; font-weight: 700; }
.sequence-mobile-dialog-heading button { width: 32px; height: 32px; display: grid; flex: 0 0 32px; place-items: center; padding: 0; border: 0; border-radius: 6px; color: var(--charcoal); background: transparent; cursor: pointer; }
.sequence-mobile-dialog-heading button:hover { background: #f5f7f8; }
.sequence-mobile-dialog .sequence-email-list { padding: 8px; }
.sequence-mobile-dialog .sequence-email-list button { min-height: 52px; flex-basis: 52px; }
.sequence-mobile-dialog .sequence-list-footer { padding: 10px; }
.sequence-mobile-dialog .sequence-list-footer button { min-height: 40px; font-size: 11px; }
.sequence-compose-panel { display: flex; flex-direction: column; padding: 16px; overflow: hidden; }
.sequence-empty-state { margin: auto; text-align: center; }
.sequence-empty-state h2 { margin: 0 0 6px; color: var(--ink); font-size: 15px; font-weight: 700; }
.sequence-empty-state p { margin: 0; color: var(--muted); font-size: 11px; }
.sequence-compose-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.sequence-compose-heading h2 { margin: 0; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.25; }
.sequence-compose-heading p { margin: 3px 0 0; color: var(--muted); font-size: 10px; line-height: 1.3; }
.sequence-compose-heading > svg { color: var(--muted); }
.sequence-delete-button { width: 28px; height: 28px; display: grid; flex: 0 0 28px; place-items: center; padding: 0; border: 0; border-radius: 6px; color: var(--muted); background: transparent; cursor: pointer; }
.sequence-delete-button:hover { color: var(--charcoal); background: #f5f7f8; }
.sequence-delete-dialog { width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 20px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; box-shadow: 0 24px 60px rgba(15,21,23,.24); }
.sequence-delete-dialog::backdrop { background: rgba(15,21,23,.56); }
.sequence-delete-dialog h2 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.sequence-delete-dialog p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.sequence-delete-dialog p strong { color: var(--ink); font-weight: 650; }
.sequence-delete-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.sequence-delete-actions button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--charcoal); background: #fff; font-size: 11px; font-weight: 650; cursor: pointer; }
.sequence-delete-actions button:hover { background: #f5f7f8; }
.sequence-delete-actions .confirm-delete { border-color: var(--charcoal); color: #fff; background: var(--charcoal); }
.sequence-delete-actions .confirm-delete:hover { background: #11191c; }
.sequence-field { min-width: 0; display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.sequence-field > span { color: var(--charcoal); font-size: 11px; font-weight: 700; line-height: 1.2; }
.sequence-field input, .sequence-field textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); background: #fff; font-family: inherit; font-size: 11px; outline: none; }
.sequence-field input { height: 34px; padding: 0 10px; }
.sequence-field textarea { min-height: 0; height: 100%; flex: 1; padding: 10px; line-height: 1.45; resize: none; }
.sequence-field input:focus, .sequence-field textarea:focus { border-color: var(--charcoal); box-shadow: 0 0 0 3px rgba(23,34,38,.1); }
.sequence-message-field { min-height: 0; flex: 1; margin-bottom: 9px; }
.sequence-compose-bottom { min-height: 30px; display: flex; align-items: center; justify-content: flex-end; }
.sequence-test-button { min-height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--charcoal); background: #fff; font-family: inherit; font-size: 10px; font-weight: 650; cursor: pointer; }
.sequence-test-button:hover { background: #f5f7f8; }
.sequence-compose-bottom > span { min-width: 0; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.25; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.sequence-compose-bottom a { color: var(--charcoal); font-weight: 700; }
.sequence-compose-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.sequence-save-button { min-height: 32px; padding: 0 15px; border: 0; border-radius: 7px; color: var(--charcoal); background: var(--yellow); font-family: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.sequence-save-button:hover { background: var(--yellow-hover); }
@media (min-width: 761px) {
  .app-shell.sequence-app > main.workspace { padding-top: 75px !important; padding-bottom: 15px !important; }
}
@media (max-width: 760px) {
  .app-shell.sequence-app > main.workspace { padding-bottom: 81px !important; }
  .sequence-workspace { height: auto; min-height: 100dvh; overflow: visible; }
  .sequence-content { height: auto; }
  .sequence-mobile-selector { min-height: 58px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; }
  .sequence-mobile-selector > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .sequence-mobile-selector small { color: var(--muted); font-size: 10px; line-height: 1.2; }
  .sequence-mobile-selector strong { overflow: hidden; font-size: 13px; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  .sequence-mobile-selector > svg { flex: 0 0 18px; color: var(--charcoal); }
  .sequence-editor { grid-template-columns: 1fr; }
  .sequence-list-panel { display: none; }
  .sequence-compose-panel { height: calc(100dvh - 255px - env(safe-area-inset-bottom)); min-height: 0; }
}
@media (max-width: 380px) {
  .email-saved { display: none; }
  .email-app .email-segmented button { font-size: 10px; }
}