/* The engagement email on the staff site (public/staff-engagement.js): its
   column on a firm's pairings, the dialog that sends it, and GROW Member
   Portal -> Engagement. Staff pages use the staff site's own tokens and
   components (--blue, .badge, .btn, .chip, .panel, .history-table,
   .pm-dialog), never colours of their own: this file only lays them out. */

/* A pairing's cell on the firm's page: the chip, when it was sent, and the
   buttons, one under another, every line free to wrap and the button's
   words short ("Send email"), so the wide table grows no wider: its Notes
   and each row's Edit stay in view on a laptop, as before the column. */
.eg-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
/* Even so, the table was already as narrow as it could go at 1366px, so
   the column pushes the last ones past the edge of its scroll area on a
   laptop. Each row's Edit (the one way to change or remove a pairing)
   stays at the right of the scroll area, as the Partnership Tracker's
   capacity table keeps its first column, so no row needs a sideways
   scroll to be edited; Notes is a scroll away when it is cut off. */
.tr-pairings > thead > tr > th:last-child, .tr-pairings > tbody > tr > td:last-child {
  position: sticky; right: 0; z-index: 1; background: white; box-shadow: -1px 0 0 var(--line);
}
/* A long chip ("Link made, not emailed (8 hours left)") wraps rather than
   widening the table, its corners kept round on two lines. */
.eg-chip { white-space: normal; text-align: left; line-height: 1.35; border-radius: 12px; }
.eg-table .eg-chip { white-space: nowrap; }
/* A chip with the mentee's note is a button that opens it. */
button.eg-chip-note { border: 0; font: inherit; font-size: 0.75rem; font-weight: 700; cursor: pointer; }
button.eg-chip-note:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.eg-note {
  display: block; max-width: 280px; padding: 6px 10px; border-left: 3px solid var(--blue-pale);
  background: var(--blue-wash); border-radius: 0 8px 8px 0; color: var(--ink); white-space: pre-line; line-height: 1.45;
}
.eg-sent, .eg-why { display: block; color: var(--muted); font-size: 0.78rem; line-height: 1.35; }
.eg-why { color: var(--danger); }
.eg-tick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0 2px;
  font-size: 0.8rem;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.eg-tick input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
}
.eg-tick span {
  font-weight: 500;
  white-space: nowrap;
}
.eg-actions { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.eg-actions .btn-small { white-space: nowrap; }

/* The dialog: who it goes to, then the words to read and change. */
.eg-dialog { width: min(680px, calc(100vw - 32px)); }
.eg-dialog textarea { width: 100%; resize: vertical; line-height: 1.5; font-size: 0.95rem; }
.eg-dialog input { width: 100%; }
.eg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 16px; margin: 4px 0 14px; }
.eg-facts div { min-width: 0; }
.eg-facts dt { color: var(--muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.eg-facts dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.eg-warn { background: var(--blue-wash); border: 1px solid var(--blue-pale); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; line-height: 1.45; }
.eg-link { font-size: clamp(0.8rem, 3vw, 1rem); letter-spacing: 0; }
/* Which email, where the pre-launch one can go: two choices on a line. */
.eg-variant { border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px 10px; margin: 0 0 14px; }
.eg-variant legend { padding: 0 6px; font-size: 0.75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.eg-variant-choice { display: inline-flex; align-items: center; gap: 6px; margin: 2px 18px 2px 0; cursor: pointer; }
.eg-dialog .eg-variant input[type="radio"] { width: auto; margin: 0; }
.eg-variant .hint { margin: 6px 0 0; }
/* The pre-launch email chosen where it cannot go: why, in place of Send. */
.eg-send-why { margin: 0; flex: 1 1 260px; }
/* The day the link expires, beside its words; and the row Schedule send
   opens, with the time to send at. */
.eg-when { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: flex-start; margin: 4px 0 10px; }
.eg-when .eg-expires { flex: 0 0 auto; margin: 0; }
.eg-dialog .eg-expires input { width: auto; }
.eg-when .hint { flex: 1 1 260px; margin: 22px 0 0; line-height: 1.45; }
.eg-schedule { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px 12px; margin: 0 0 12px; background: var(--blue-wash); }
.eg-schedule .field { margin: 0 0 6px; }
.eg-dialog .eg-schedule input { width: auto; }
.eg-schedule .hint { margin: 0 0 10px; line-height: 1.45; }
.eg-scheduled { margin-top: 4px; }

/* The preview window: To, From and Subject, then the email itself in a
   frame that runs nothing, then the plain text folded under it. */
.eg-preview-dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.eg-preview-head .hint { margin: 0 0 12px; line-height: 1.45; }
.eg-preview-facts { margin-bottom: 10px; }
.eg-preview-facts .eg-preview-subject { grid-column: 1 / -1; }
.eg-preview-frame { width: 100%; height: min(58vh, 600px); border: 1px solid var(--line); border-radius: 10px; background: var(--blue-wash); }
.eg-preview-text { margin: 12px 0 4px; }
.eg-preview-text summary { cursor: pointer; font-weight: 700; color: var(--blue); }
.eg-preview-text pre {
  white-space: pre-wrap; overflow-wrap: anywhere; background: white; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin: 10px 0 0; font: inherit; font-size: 0.88rem; line-height: 1.5;
}

/* The sub-tab. */
.eg-filters { margin-bottom: 14px; }
.eg-count { font-weight: 400; margin-left: 2px; }
.eg-table td, .eg-table tbody th { vertical-align: top; }
.eg-table .md-person { text-align: left; }
.eg-note-cell { min-width: 180px; max-width: 320px; }
.eg-note-text { display: block; white-space: pre-line; overflow-wrap: anywhere; font-size: 0.88rem; line-height: 1.45; }
.eg-template { margin-top: 20px; }
#egPrelaunchTemplate:empty { display: none; }
.eg-template-summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.eg-template-summary .planner-subtitle { margin: 0; }
.eg-template[open] .eg-template-summary { margin-bottom: 12px; }
.eg-template textarea { width: 100%; resize: vertical; line-height: 1.5; }
.eg-template input { width: 100%; }
.eg-placeholders { margin: 6px 0 16px; padding-left: 20px; line-height: 1.6; color: var(--muted); font-size: 0.9rem; }
.eg-placeholders code { color: var(--ink); }

@media (max-width: 760px) {
  .eg-dialog textarea { font-size: 16px; }
  .eg-dialog input { font-size: 16px; }
}

/* Attachments in the send dialog: the library as boxes, the email's
   standard set ticked, each with a link to read it; and the preview
   window's Attachments line. */
.eg-attachments { margin: 12px 0 0; padding: 10px 14px 12px; border: 1px solid var(--line); border-radius: 10px; }
.eg-attachments legend { font-weight: 700; padding: 0 4px; }
.eg-attachment { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0; }
.eg-attachment .pm-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.eg-attachment small { color: var(--muted); }
.eg-attachment-link { font-size: 0.88rem; }
.eg-attachments .hint { margin: 8px 0 0; }