/* ==============================================================================================
   AGENT ENGAGEMENT CENTER  (/admin/agent-engagement)

   A guided three-step tool, so the page is laid out as a sequence rather than a dashboard. Each
   step is a bordered block with a numbered heading, and the numerals encode real order: you cannot
   usefully do step 3 before step 2.

   The previous stylesheet supported nineteen tiles, thirty chips and a 1600px-wide table. What
   replaced it is deliberately smaller in every dimension — four cards, one dropdown, a table that
   fits the content column — because the page never had a styling problem. It had a quantity one.
   ============================================================================================== */

.wr-eng2__loading { padding: 28px; color: var(--wr3-ink-2, #475569); }

/* ---------- Blocked sender ---------- */

.wr-eng2__warning {
    padding: 16px 18px;
    margin-bottom: 18px;
    border-left: 4px solid #d94b4b;
    background: rgba(217, 75, 75, 0.05);
}

.wr-eng2__warning h2 { margin: 0 0 8px; font-size: 1.02rem; font-weight: 800; color: #a5312f; }
.wr-eng2__warning p { margin: 0 0 8px; font-size: 0.87rem; }
.wr-eng2__warning ul { margin: 0; padding-left: 20px; font-size: 0.86rem; line-height: 1.6; }

/* ---------- Four cards ---------- */

.wr-eng2__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.wr-eng2__card {
    padding: 16px 18px;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 13px;
    background: #fff;
}

.wr-eng2__card strong {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--wr3-ink, #0f172a);
}

.wr-eng2__card span {
    display: block;
    margin-top: 4px;
    font-size: 0.76rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--wr3-ink-2, #475569);
}

/* The audience card is the one that changes as the administrator works, so it is the one that
   signals it is carrying a live value. */
.wr-eng2__card.is-active {
    border-color: var(--wr3-blue, #1d5ff5);
    background: var(--wr3-blue-soft, #e8f0ff);
}

.wr-eng2__card.is-active strong { color: var(--wr3-blue-ink, #12408f); }

/* ---------- Expandables ---------- */

.wr-eng2__stats {
    margin-bottom: 18px;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 12px;
    background: #fff;
}

.wr-eng2__stats > summary {
    padding: 12px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--wr3-ink, #0f172a);
    cursor: pointer;
}

.wr-eng2__stats[open] > summary { border-bottom: 1px solid var(--wr3-border, #eef1f5); }

.wr-eng2__statgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px 20px;
    padding: 14px 16px;
}

.wr-eng2__statgrid > div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.84rem; }
.wr-eng2__statgrid dt { color: var(--wr3-ink-2, #475569); }
.wr-eng2__statgrid dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.wr-eng2__note {
    margin: 0;
    padding: 12px 16px;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--wr3-ink-2, #475569);
    max-width: 90ch;
}

.wr-eng2__checks { list-style: none; margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.wr-eng2__checks li { display: flex; gap: 10px; font-size: 0.84rem; line-height: 1.55; }
.wr-eng2__checks li.is-ok i { color: #2fa66a; }
.wr-eng2__checks li.is-unknown i { color: var(--wr3-ink-3, #7c8798); }

/* ---------- Campaigns in flight ----------

   Above the three steps and visually distinct from them: a campaign already sending is a thing to
   monitor, not a step to perform. A left border carries the state, so a paused or cancelled
   campaign is identifiable at a glance in a stack of several. */

.wr-eng2__campaigns { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }

.wr-eng2__campaign {
    padding: 16px 18px;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-left: 4px solid var(--wr3-blue, #1d5ff5);
    border-radius: 14px;
    background: #fff;
}

.wr-eng2__campaign--paused { border-left-color: #c99a2e; }
.wr-eng2__campaign--completed { border-left-color: #2fa66a; }
.wr-eng2__campaign--canceled { border-left-color: var(--wr3-ink-3, #7c8798); }

.wr-eng2__campaign > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 11px;
}

.wr-eng2__campaign h3 { margin: 0; font-size: 1rem; font-weight: 800; color: var(--wr3-ink, #0f172a); }

.wr-eng2__campaignstatus {
    display: inline-block;
    margin-top: 3px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--wr3-ink-2, #475569);
}

.wr-eng2__campaignpct {
    font-size: 1.3rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--wr3-ink, #0f172a);
}

.wr-eng2__bar {
    height: 7px;
    border-radius: 999px;
    background: var(--wr3-surface-2, #eef2f7);
    overflow: hidden;
}

.wr-eng2__bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--wr3-blue, #1d5ff5);
    transition: width 300ms ease;
}

.wr-eng2__campaign--paused .wr-eng2__bar > span { background: #c99a2e; }
.wr-eng2__campaign--completed .wr-eng2__bar > span { background: #2fa66a; }
.wr-eng2__campaign--canceled .wr-eng2__bar > span { background: var(--wr3-ink-3, #7c8798); }

@media (prefers-reduced-motion: reduce) {
    .wr-eng2__bar > span { transition: none; }
}

.wr-eng2__campaignstats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: 13px 0 0;
}

.wr-eng2__campaignstats > div { display: flex; align-items: baseline; gap: 7px; font-size: 0.82rem; }
.wr-eng2__campaignstats dt { color: var(--wr3-ink-2, #475569); }
.wr-eng2__campaignstats dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--wr3-ink, #0f172a); }

.wr-eng2__nextbatch {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 13px 0 0;
    font-size: 0.84rem;
    color: var(--wr3-ink-2, #475569);
}

.wr-eng2__nextbatch i { color: var(--wr3-blue, #1d5ff5); }

.wr-eng2__note--inline {
    padding: 9px 12px;
    margin-top: 10px;
    border-radius: 9px;
    background: var(--wr3-surface-2, #f7f9fc);
    font-size: 0.79rem;
}

.wr-eng2__campaignactions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--wr3-border, #eef1f5);
}

/* The cancel confirmation. Bordered and amber because discarding the unsent remainder cannot be
   undone, and this is the last moment at which that is still true. */
.wr-eng2__confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border: 1px solid rgba(224, 163, 46, 0.5);
    border-radius: 10px;
    background: rgba(224, 163, 46, 0.09);
    font-size: 0.83rem;
    color: #7a5410;
}

/* Not defined anywhere else in the design system, and only one control in this module needs it. */
.wr-btn-danger {
    background: #c0392f;
    border-color: #c0392f;
    color: #fff;
}

.wr-btn-danger:hover:not(:disabled) { background: #a5312f; border-color: #a5312f; }
.wr-btn-danger:focus-visible { outline: 2px solid #c0392f; outline-offset: 2px; }

/* ---------- Email settings ---------- */

.wr-eng2__settings { padding: 14px 16px; }

.wr-eng2__settings .wr-eng2__filtergrid { margin-bottom: 12px; }

.wr-eng2__settings label em {
    font-style: normal;
    font-weight: 600;
    color: var(--wr3-ink-3, #7c8798);
}

/* What the recipient will actually see, shown next to the fields that produce it. An address
   assembled from seven inputs is one nobody can picture until they see it composed. */
.wr-eng2__footerpreview {
    margin: 0 0 12px;
    padding: 11px 13px;
    border-radius: 9px;
    border-left: 3px solid var(--wr3-blue, #1d5ff5);
    background: var(--wr3-surface-2, #f7f9fc);
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--wr3-ink-2, #475569);
}

.wr-eng2__footerpreview span { text-decoration: underline; color: var(--wr3-blue, #1d5ff5); }

/* A blocking check is a problem in the way; an unsatisfied recommendation is not. They are
   different colours because they call for different responses, and showing both as warnings is
   what made an administrator believe SPF was stopping them from sending. */
.wr-eng2__checks li.is-blocking i { color: #c0392f; }

/* Advisory is a third state, distinct from both "blocking" and "could not be checked". It is a
   thing worth doing that we DID check and found undone -- informational blue, not warning red and
   not the grey of an unanswered question. */
.wr-eng2__checks li.is-advisory i { color: #2f6fc0; }

.wr-eng2__recommended {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: 0.76rem;
    color: var(--wr3-ink-3, #7c8798);
}

/* ---------- SendGrid account status ---------- */

/* The headline above the checklist. An administrator opening this panel is answering "is SendGrid
   working" or "why was that rejected"; both are answered by the account state, so it leads. */
.wr-eng2__provider {
    padding: 14px 16px;
    border-bottom: 1px solid var(--wr3-border, #e4e8f0);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.wr-eng2__providerline {
    margin: 0;
    display: flex;
    gap: 8px;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--wr3-ink-2, #4a5568);
}

.wr-eng2__providerline i { margin-top: 3px; color: #2fa66a; }
.wr-eng2__providerline.is-unknown i { color: var(--wr3-ink-3, #7c8798); }

/* Sandbox is stated loudly on purpose: a "sent" count that quietly meant "delivered to nobody"
   would be the single most misleading number on this page. */
.wr-eng2__sandbox {
    margin: 0;
    padding: 10px 12px;
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 0.84rem;
    line-height: 1.55;
    border: 1px solid #f0c36d;
    border-radius: 8px;
    background: #fdf6e6;
    color: #7a5a12;
}

.wr-eng2__sandbox i { margin-top: 3px; }
.wr-eng2__sandbox code { font-size: 0.8rem; }

.wr-btn-sm { padding: 6px 12px; font-size: 0.82rem; }

/* ---------- Steps ---------- */

.wr-eng2__step {
    padding: 20px 22px;
    margin-bottom: 16px;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 16px;
    background: #fff;
}

.wr-eng2__step > h2 {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 16px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--wr3-ink, #0f172a);
}

.wr-eng2__num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--wr3-blue, #1d5ff5);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
}

/* ---------- Step 1 ---------- */

.wr-eng2__field { display: flex; flex-direction: column; gap: 7px; max-width: 560px; }
.wr-eng2__field > span { font-size: 0.88rem; font-weight: 700; color: var(--wr3-ink, #0f172a); }

.wr-eng2__select,
.wr-eng2__input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--wr3-border-strong, #d3d9e5);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 0.88rem;
    color: var(--wr3-ink, #0f172a);
}

.wr-eng2__select:focus,
.wr-eng2__input:focus {
    outline: none;
    border-color: var(--wr3-blue, #1d5ff5);
    box-shadow: 0 0 0 3px rgba(29, 95, 245, 0.16);
}

.wr-eng2__count { margin: 14px 0 4px; font-size: 1rem; color: var(--wr3-ink, #0f172a); }
.wr-eng2__desc { margin: 0; font-size: 0.86rem; line-height: 1.6; color: var(--wr3-ink-2, #475569); max-width: 84ch; }

.wr-eng2__filters {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 12px;
    background: var(--wr3-surface-2, #f7f9fc);
}

.wr-eng2__filterhint {
    display: flex;
    gap: 9px;
    margin: 0 0 14px;
    font-size: 0.83rem;
    line-height: 1.55;
    color: var(--wr3-ink-2, #475569);
}

.wr-eng2__filterhint i { color: var(--wr3-blue, #1d5ff5); }

.wr-eng2__filtergrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.wr-eng2__filtergrid label { display: flex; flex-direction: column; gap: 5px; font-size: 0.78rem; font-weight: 700; }

.wr-eng2__filtergrid select {
    padding: 9px 10px;
    border: 1px solid var(--wr3-border-strong, #d3d9e5);
    border-radius: 9px;
    font: inherit;
    font-size: 0.85rem;
    background: #fff;
}

.wr-eng2__filteractions { display: flex; gap: 9px; margin-top: 14px; }

/* ---------- Step 2 ---------- */

.wr-eng2__empty {
    margin: 0;
    padding: 20px;
    border-radius: 11px;
    background: var(--wr3-surface-2, #f7f9fc);
    font-size: 0.88rem;
    color: var(--wr3-ink-2, #475569);
    text-align: center;
}

.wr-eng2__tabletop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.wr-eng2__search { max-width: 340px; }

.wr-eng2__selectctl { display: flex; flex-wrap: wrap; gap: 14px; }

.wr-eng2__link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--wr3-blue, #1d5ff5);
    cursor: pointer;
}

.wr-eng2__link:hover { text-decoration: underline; }

.wr-eng2__link:focus-visible {
    outline: 2px solid var(--wr3-blue, #1d5ff5);
    outline-offset: 2px;
    border-radius: 4px;
}

.wr-eng2__selcount {
    margin: 0 0 10px;
    padding: 9px 13px;
    border-radius: 9px;
    background: var(--wr3-blue-soft, #e8f0ff);
    font-size: 0.85rem;
    color: var(--wr3-blue-ink, #12408f);
}

.wr-eng2__selcount .wr-eng2__link { margin-left: 9px; }

.wr-eng2__exclusions {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.84rem;
}

.wr-eng2__exclusions li { padding: 7px 11px; border-radius: 8px; background: var(--wr3-surface-2, #f7f9fc); }
.wr-eng2__exclusions strong { font-variant-numeric: tabular-nums; margin-right: 6px; }

/* No min-width and no horizontal scroll: eight columns fit the content column, which is the
   entire reason the twenty-two-column version was replaced. */
.wr-eng2__tablewrap { width: 100%; }

.wr-eng2__table { width: 100%; font-size: 0.84rem; table-layout: auto; }
.wr-eng2__table th { white-space: nowrap; }
.wr-eng2__table tr.is-selected td { background: var(--wr3-blue-soft, #e8f0ff); }

.wr-eng2__check { width: 34px; }
.wr-eng2__actions { width: 84px; white-space: nowrap; text-align: right; }

.wr-eng2__name { display: block; font-weight: 700; color: var(--wr3-ink, #0f172a); }
.wr-eng2__context { display: block; font-size: 0.78rem; color: var(--wr3-ink-2, #475569); }
.wr-eng2__email { overflow-wrap: anywhere; }

.wr-eng2__pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--wr3-surface-2, #f1f5f9);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.wr-eng2__pill--ok { background: #dcfce7; color: #15803d; }
.wr-eng2__pill--warn { background: #fef3c7; color: #b45309; }
.wr-eng2__pill--blocked { background: #fee2e2; color: #b3352f; }

.wr-eng2__iconbtn {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 8px;
    background: #fff;
    color: var(--wr3-ink-2, #475569);
    cursor: pointer;
}

.wr-eng2__iconbtn:hover { border-color: var(--wr3-blue, #1d5ff5); color: var(--wr3-blue, #1d5ff5); }
.wr-eng2__iconbtn:focus-visible { outline: 2px solid var(--wr3-blue, #1d5ff5); outline-offset: 2px; }

.wr-eng2__menu { position: relative; display: inline-block; }

.wr-eng2__menulist {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 30;
    min-width: 230px;
    margin: 0;
    padding: 5px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
    text-align: left;
}

.wr-eng2__menulist button {
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: none;
    font: inherit;
    font-size: 0.84rem;
    text-align: left;
    color: var(--wr3-ink, #0f172a);
    cursor: pointer;
}

.wr-eng2__menulist button:hover { background: var(--wr3-blue-soft, #e8f0ff); }

.wr-eng2__pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    font-size: 0.85rem;
    color: var(--wr3-ink-2, #475569);
}

/* ---------- Step 3 ---------- */

.wr-eng2__composegrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 13px;
    margin-bottom: 13px;
}

.wr-eng2__compose label,
.wr-eng2__full { display: flex; flex-direction: column; gap: 5px; font-size: 0.79rem; font-weight: 700; }
.wr-eng2__full { margin-bottom: 13px; }

.wr-eng2__editor { font-family: inherit; line-height: 1.6; resize: vertical; }

/* Read-only rather than disabled: the sender must stay legible, and a disabled control reads as
   broken rather than as fixed by configuration. */
.wr-eng2__compose input[readonly] {
    background: var(--wr3-surface-2, #f7f9fc);
    color: var(--wr3-ink-2, #475569);
}

.wr-eng2__sending {
    margin: 4px 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 12px;
    background: var(--wr3-surface-2, #f7f9fc);
}

.wr-eng2__sending legend {
    padding: 0 6px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--wr3-ink-2, #475569);
}

.wr-eng2__estimate { margin: 4px 0 0; font-size: 0.85rem; font-weight: 600; color: var(--wr3-ink, #0f172a); }

.wr-eng2__composeactions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wr-eng2__gatehint { font-size: 0.8rem; color: var(--wr3-ink-2, #475569); }

.wr-eng2__msg { margin: 14px 0 0; font-size: 0.87rem; color: var(--wr3-ink, #0f172a); }

/* ---------- Sticky bar ---------- */

.wr-eng2__sticky {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 11px 18px;
    border-radius: 999px;
    background: var(--wr3-navy, #0c1a3a);
    color: #fff;
    font-size: 0.86rem;
    box-shadow: 0 12px 30px rgba(12, 26, 58, 0.3);
}

.wr-eng2__sticky > div { display: flex; gap: 8px; }

/* ---------- Preview modal ---------- */

.wr-eng2__backdrop { position: fixed; inset: 0; z-index: 1040; background: rgba(12, 26, 58, 0.5); }

.wr-eng2__modal {
    position: fixed;
    z-index: 1050;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(720px, calc(100vw - 32px));
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(12, 26, 58, 0.26);
    overflow: hidden;
}

.wr-eng2__modal > header,
.wr-eng2__modal > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 20px;
}

.wr-eng2__modal > header { border-bottom: 1px solid var(--wr3-border, #e4e8f0); }
.wr-eng2__modal > footer { border-top: 1px solid var(--wr3-border, #e4e8f0); justify-content: flex-end; }
.wr-eng2__modal h2 { margin: 0; font-size: 1.05rem; font-weight: 800; }

.wr-eng2__modal h3 {
    margin: 18px 0 8px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--wr3-ink-2, #475569);
}

.wr-eng2__modalbody { overflow-y: auto; padding: 16px 20px 20px; }

.wr-eng2__previewstats { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.wr-eng2__previewstats > div { display: flex; gap: 12px; font-size: 0.86rem; }
.wr-eng2__previewstats dt { flex: 0 0 120px; font-weight: 700; color: var(--wr3-ink-2, #475569); }
.wr-eng2__previewstats dd { margin: 0; overflow-wrap: anywhere; }

.wr-eng2__samplemail {
    padding: 14px;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 11px;
    background: var(--wr3-surface-2, #f7f9fc);
    font-size: 0.85rem;
}

.wr-eng2__samplemail p { margin: 0 0 6px; }

.wr-eng2__samplemail pre {
    margin: 10px 0 0;
    white-space: pre-wrap;
    font-family: inherit;
    line-height: 1.6;
    color: var(--wr3-ink-2, #475569);
}

/* ---------- Three actions, kept visibly apart ----------

   Remove from audience, exclude from marketing and close the account are three different things
   with three different consequences, and the row menu is where they are most easily confused. A
   separator before each escalation makes the boundary legible without labelling it. */

.wr-eng2__menusep {
    border-top: 1px solid var(--wr3-border, #eef1f5);
    margin-top: 4px;
    padding-top: 4px;
}

.wr-eng2__menulist button.is-danger { color: #c0392f; }
.wr-eng2__menulist button.is-danger:hover { background: rgba(192, 57, 47, 0.07); }

/* ---------- Removed-from-audience banner ---------- */

.wr-eng2__removed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0 0;
    padding: 11px 14px;
    border-radius: 10px;
    border-left: 3px solid var(--wr3-blue, #1d5ff5);
    background: var(--wr3-blue-soft, #e8f0ff);
    font-size: 0.85rem;
    color: var(--wr3-blue-ink, #12408f);
}

/* ---------- Small modal ---------- */

.wr-eng2__modal--sm { width: min(520px, calc(100vw - 32px)); }

.wr-eng2__modalbody .wr-eng2__field { max-width: none; margin-bottom: 14px; }

.wr-eng2__modalbody p { margin: 0 0 12px; font-size: 0.88rem; line-height: 1.62; color: var(--wr3-ink-2, #475569); }

.wr-eng2__req {
    margin-left: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--wr3-ink-3, #7c8798);
}

.wr-eng2__modalerror {
    margin: 10px 0 0 !important;
    padding: 10px 12px;
    border-radius: 9px;
    border-left: 3px solid #c0392f;
    background: rgba(192, 57, 47, 0.06);
    font-size: 0.85rem !important;
    color: #8f2f2d !important;
}

.wr-eng2__impact {
    margin: 0 0 14px;
    padding-left: 20px;
    font-size: 0.86rem;
    line-height: 1.7;
    color: var(--wr3-ink-2, #475569);
}

/* The billing warning. Amber and boxed because it is the one thing an administrator must not
   discover after the fact: closing an account does not stop a subscription billing. */
.wr-eng2__warnbox {
    display: flex;
    gap: 10px;
    margin: 0 0 14px !important;
    padding: 11px 13px;
    border-radius: 9px;
    border-left: 3px solid #c99a2e;
    background: rgba(224, 163, 46, 0.09);
    font-size: 0.84rem !important;
    line-height: 1.6;
    color: #7a5410 !important;
}

.wr-btn-danger {
    background: #c0392f;
    border-color: #c0392f;
    color: #fff;
}

.wr-btn-danger:hover:not(:disabled) { background: #a5312f; border-color: #a5312f; }
.wr-btn-danger:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- View agent panel ----------

   A right-hand panel rather than a modal: an administrator opens it, reads, and goes back to the
   table, often several times in a row. A centred dialog would cover the list they are working
   through each time. */

.wr-eng2__panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    width: min(520px, 100vw);
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -12px 0 40px rgba(12, 26, 58, 0.18);
}

.wr-eng2__panel > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--wr3-border, #e4e8f0);
}

.wr-eng2__panel h2 { margin: 0; font-size: 1.05rem; font-weight: 800; }

.wr-eng2__panelsub {
    margin: 3px 0 0;
    font-size: 0.83rem;
    color: var(--wr3-ink-2, #475569);
    overflow-wrap: anywhere;
}

.wr-eng2__panelbody { overflow-y: auto; padding: 16px 20px 24px; }

.wr-eng2__panelbody h3 {
    margin: 20px 0 9px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--wr3-ink-2, #475569);
}

.wr-eng2__panelbody h3:first-child { margin-top: 0; }

.wr-eng2__deflist div {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--wr3-border, #f1f3f7);
}

.wr-eng2__deflist dt { flex: 0 0 105px; font-weight: 700; color: var(--wr3-ink-2, #475569); }
.wr-eng2__deflist dd { margin: 0; overflow-wrap: anywhere; }

/* Eligibility gets its own treatment because it is the answer to the question the panel is opened
   to settle, and because "blocked by something you cannot override" must not look like a warning
   the reader can dismiss. */
.wr-eng2__eligibility {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 11px 13px;
    border-radius: 9px;
    font-size: 0.85rem;
    line-height: 1.6;
}

.wr-eng2__eligibility.is-ok { background: #dcfce7; color: #15803d; }
.wr-eng2__eligibility.is-blocked { background: #fee2e2; color: #8f2f2d; }

.wr-eng2__checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
}

.wr-eng2__checklist li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 9px;
    border-radius: 7px;
    background: var(--wr3-surface-2, #f7f9fc);
}

.wr-eng2__checklist li.is-done { background: transparent; color: var(--wr3-ink-2, #475569); }
.wr-eng2__checklist li.is-done i { color: #2fa66a; }
.wr-eng2__checklist li:not(.is-done) i { color: #c99a2e; }

.wr-eng2__history {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.84rem;
    line-height: 1.55;
}

.wr-eng2__history li { padding: 7px 10px; border-radius: 7px; background: var(--wr3-surface-2, #f7f9fc); }
.wr-eng2__history strong { margin-right: 7px; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .wr-eng2__panel { width: 100vw; }
}

/* ---------- Responsive ----------

   Below 900px the table becomes cards. Eight columns on a phone is a horizontal scroll, and
   removing horizontal scrolling is one of the things this redesign exists for. The checkbox and
   the email button stay pinned on each card because those are the two actions the table is for. */

@media (max-width: 1100px) {
    .wr-eng2__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .wr-eng2__table thead { display: none; }

    .wr-eng2__table,
    .wr-eng2__table tbody,
    .wr-eng2__table tr,
    .wr-eng2__table td { display: block; width: 100%; }

    .wr-eng2__table tr {
        position: relative;
        margin-bottom: 10px;
        padding: 12px 14px 12px 42px;
        border: 1px solid var(--wr3-border, #e4e8f0);
        border-radius: 12px;
    }

    .wr-eng2__table td { padding: 2px 0; border: 0; }

    .wr-eng2__check { position: absolute; left: 12px; top: 14px; width: auto; }
    .wr-eng2__actions { position: absolute; right: 10px; top: 10px; width: auto; text-align: right; }

    .wr-eng2__step { padding: 16px; }
    .wr-eng2__tabletop { flex-direction: column; align-items: stretch; }
    .wr-eng2__search { max-width: 100%; }

    .wr-eng2__composeactions .wr-btn { width: 100%; justify-content: center; }

    .wr-eng2__sticky {
        left: 12px;
        right: 12px;
        transform: none;
        border-radius: 14px;
        justify-content: space-between;
    }
}

/* ==============================================================================================
   QUICK FILTERS, DUPLICATE WARNING AND SEND CONFIRMATION

   Added to the existing Agent Engagement Center rather than replacing anything: the table, the
   step cards and the SMS composer keep the styles they already had. These are the four blocks the
   bulk-SMS workflow needed and nothing else.
   ============================================================================================== */

.wr-eng2__quick {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 10px;
    background: var(--wr3-surface-2, #f7f9fc);
}

.wr-eng2__quickrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.wr-eng2__quicklabel {
    min-width: 88px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wr3-ink-2, #475569);
}

/* A chip reads as a toggle whether or not it is on, which a plain link does not. */
.wr-eng2__chip {
    padding: 5px 12px;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wr3-ink-2, #475569);
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.wr-eng2__chip:hover { border-color: var(--wr3-blue, #1d5ff5); color: var(--wr3-blue, #1d5ff5); }

.wr-eng2__chip.is-on {
    border-color: var(--wr3-blue, #1d5ff5);
    background: var(--wr3-blue, #1d5ff5);
    color: #fff;
}

.wr-eng2__chip:focus-visible {
    outline: 2px solid var(--wr3-blue, #1d5ff5);
    outline-offset: 2px;
}

.wr-eng2__quicknote { font-size: 0.78rem; color: var(--wr3-ink-2, #475569); font-style: italic; }

.wr-eng2__quicksummary {
    margin: 2px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    font-size: 0.82rem;
    color: var(--wr3-ink-2, #475569);
}

/* ---- "already received this" ---- */

.wr-eng2__smsdupe {
    margin: 12px 0;
    padding: 12px 14px;
    border: 1px solid #f0c674;
    border-left: 4px solid #e8991f;
    border-radius: 8px;
    background: #fdf6e7;
}

.wr-eng2__smsdupe p { margin: 0 0 8px; font-size: 0.86rem; color: #6b4b10; }
.wr-eng2__smsdupe i { color: #e8991f; margin-right: 6px; }

.wr-eng2__smsdupeactions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.wr-eng2__smsdupelist {
    margin: 10px 0 0;
    padding-left: 18px;
    max-height: 190px;
    overflow-y: auto;
    font-size: 0.8rem;
    color: #6b4b10;
}

.wr-eng2__smsdupelist li { margin-bottom: 3px; }

/* ---- the confirmation step ---- */

.wr-eng2__smsconfirm {
    margin: 12px 0;
    padding: 14px 16px;
    border: 1px solid var(--wr3-blue, #1d5ff5);
    border-radius: 10px;
    background: var(--wr3-blue-soft, #e8f0ff);
}

.wr-eng2__smsconfirm p { margin: 0 0 10px; font-size: 0.9rem; color: var(--wr3-blue-ink, #12408f); }
.wr-eng2__smsconfirmnote { font-size: 0.82rem !important; opacity: 0.9; }

@media (max-width: 575.98px) {
    .wr-eng2__quicklabel { min-width: 100%; }
}