/* The broker workspace pages: Dashboard, Companies, Enrollments, Library, Settings and Help, plus the Emails,
   Text Drops and Campaigns pages, whose rules are kept here with the rest of the broker workspace.
   Linked right after base.css in each page's <head> (see port/CONVENTIONS.md). Every rule names its page with
   body[data-broker-page="..."] (or body.em-standalone for Emails), so a page only takes its own rules.

   Weight: `:root` starts every rule that needs to outrank Mint's page styles, and `:not(#ui)` adds one id's weight
   (it matches every page, since nothing has id="ui") where a rule must beat Mint's id-scoped or !important rules. */

/* ==== Ported from the redesign's 10-core.css ==== */
/* The broker workspace's share of the core rules (the shell and shared components are in base.css). */

/* Emails: sub-tabs join the white header bar, actions sit on the same row. */
html:root:not([data-cs-embed]) body.em-standalone main#main { background: transparent !important; }
html:root.cs-shell:not([data-cs-embed]) body.em-standalone .main > .page-header:first-child { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: 0 !important; }
html:root:not([data-cs-embed]) body.em-standalone #subtabBar {
  margin: 0 -24px 24px !important;
  padding: 0 24px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--cs-slate-100) !important;
  width: auto !important;
  max-width: none !important;
}
html:root:not([data-cs-embed]) body.em-standalone #subtabInner {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 16px !important;
  overflow: visible !important;
}
html:root:not([data-cs-embed]) body.em-standalone #subtabInner > .docs-subtab-track { flex: 1 1 auto !important; min-width: 0 !important; overflow-x: auto !important; scrollbar-width: none; gap: 2px !important; margin-bottom: -1px !important; align-items: flex-end !important; overflow-y: visible !important; }
html:root:not([data-cs-embed]) body.em-standalone #subtabInner > .page-header-right { flex: none !important; margin: 0 0 12px !important; }
html:root:not([data-cs-embed]) body.em-standalone .docs-subtab {
  margin-right: 0 !important;
  padding: 16px 0 !important;
  font-size: 15px !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--cs-gray-500) !important;
}
html:root:not([data-cs-embed]) body.em-standalone .docs-subtab:hover { color: var(--cs-primary) !important; }
html:root:not([data-cs-embed]) body.em-standalone .docs-subtab.active { color: var(--cs-primary) !important; box-shadow: inset 0 -3px 0 var(--cs-primary) !important; }
html:root:not([data-cs-embed]) body.em-standalone .docs-subtab.active::after { display: none !important; }
html:root:not([data-cs-embed]) body.em-standalone .em-delivery-notice { margin: 0 0 16px !important; border-radius: var(--cs-radius-md) !important; }
html:root[data-cs-embed] body #subtabBar { margin: 0 0 20px !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
/* The Emails page's own tabs are drawn as folder tabs by base.css ("Main tabs read as tabs"). The redesign's earlier
   underline version of them is not carried over: its folder-tab rules came later and won, so the preview never
   showed the underline, and here base.css loads first, so the underline would win instead. */

/* Embedded Emails (company record tab): sits on the record's grid. */
html:root[data-cs-embed] body.em-standalone #content { padding: 0 !important; max-width: none !important; margin: 0 !important; }

html:root[data-cs-embed] body.em-standalone .page-header-right { align-self: center !important; margin: 0 0 0 auto !important; }
html:root[data-cs-embed] body.em-standalone .em-delivery-notice { margin: 0 0 16px !important; border-radius: var(--cs-radius-md) !important; }
@media (max-width: 768px) {
  html:root:not([data-cs-embed]) body.em-standalone #subtabBar { margin: 0 -16px 16px !important; padding: 0 16px !important; }
}

html:root[data-cs-embed] body.em-standalone #subtabBar { margin: 0 0 20px !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
html:root[data-cs-embed] body.em-standalone #subtabInner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  flex-wrap: wrap !important;
  row-gap: 12px !important;
}
html:root[data-cs-embed] body.em-standalone #subtabInner > .page-header-right { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 16px !important; margin: 0 0 0 auto !important; }
html:root[data-cs-embed] body.em-standalone main#main { background: transparent !important; padding: 24px 0 !important; }

/* Embedded Emails: when the header row wraps (#subtabInner above), the view switcher keeps its full width. */
html:root[data-cs-embed] body.em-standalone #subtabInner > .docs-subtab-track.docs-subtab-track { flex: 0 0 auto !important; overflow: visible !important; }
html:root[data-cs-embed] body.em-standalone .docs-subtab.docs-subtab.docs-subtab.active { border-bottom: 0 !important; }

/* Emails header at tablet width (Codex request X-sweep-A): below 860px the company picker and Create template
   take the full row and squeezed the section tabs to 0px, so no tab could be reached. Actions on the first row,
   tabs on their own full-width (scrollable) row. */
@media (max-width: 860px) {
  html:root body.em-standalone #subtabInner.docs-subtab-bar-inner { flex-wrap: wrap !important; row-gap: 12px; }
  html:root body.em-standalone #subtabInner > .page-header-right { order: -1; flex: 1 1 100% !important; }
  html:root body.em-standalone #subtabInner > .docs-subtab-track { flex: 1 1 100% !important; min-width: 0 !important; }
}

/* Help: a readable column instead of full-width FAQ rows (its white title band is in the page's own .help-header). */
html:root.cs-shell body[data-broker-page="help"] .main > :not(.help-header) { max-width: 960px !important; }

/* ---------- From 40-codex-text-drops.css ---------- */
/* X8: narrow Text Drop rows give the message its own line, then status and actions.
   Keep the shared badge, button and desktop row styles intact. */
@media (max-width: 768px) {
  html:root body[data-broker-page="all-text-drops"] .text-drop-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 16px;
  }

  html:root body[data-broker-page="all-text-drops"] .text-drop-status {
    margin-top: 5px;
  }

  html:root body[data-broker-page="all-text-drops"] .text-drop-content {
    grid-column: 2 / -1;
  }

  html:root body[data-broker-page="all-text-drops"] .text-drop-message {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
    margin-bottom: 8px;
  }

  html:root body[data-broker-page="all-text-drops"] .text-drop-meta {
    flex-wrap: wrap;
    gap: 6px 16px;
  }

  html:root body[data-broker-page="all-text-drops"] .text-drop-meta > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  html:root body[data-broker-page="all-text-drops"] .text-drop-badge {
    grid-column: 2;
    align-self: center;
    justify-self: start;
  }

  html:root body[data-broker-page="all-text-drops"] .text-drop-actions {
    grid-column: 3;
    align-self: center;
    justify-self: end;
  }
}

/* ---------- From 41-codex-readable-text.css ---------- */
/* X9: readable status colours (Help's contact details now set their own 13px in the page). */
html:root body[data-broker-page="dashboard"] .status-pill.not-started,
html:root body[data-broker-page="library"] .status-badge.voided,
html:root body[data-broker-page="all-text-drops"] .text-drop-badge.failed {
  background: var(--cs-bad-bg) !important;
  color: var(--cs-bad-fg) !important;
}

/* Text Drop totals are large text (3:1), so they keep clear warning, success and danger hues. */
html:root body[data-broker-page="all-text-drops"] .stat-value.scheduled {
  color: var(--cs-warn-strong) !important;
}
html:root body[data-broker-page="all-text-drops"] .stat-value.sent {
  color: var(--cs-success-fg) !important;
}
html:root body[data-broker-page="all-text-drops"] .stat-value.failed {
  color: var(--cs-bad-strong) !important;
}
html:root body[data-broker-page="all-text-drops"] .text-drop-status.scheduled {
  background: var(--cs-warn-icon) !important;
}
html:root body[data-broker-page="all-text-drops"] .text-drop-status.sent {
  background: var(--cs-ok-icon) !important;
}
html:root body[data-broker-page="all-text-drops"] .text-drop-status.failed {
  background: var(--cs-bad-strong) !important;
}

/* ---------- From 45-codex-tablet-settings.css ---------- */
/* X13: the page hides its sidebar through 900px, while Mint's phone layout
   restores it only through 767px. Carry the existing horizontal section nav
   across that tablet gap so every Settings section remains reachable. */
@media (min-width: 768px) and (max-width: 900px) {
  html:root body[data-broker-page="settings"] .settings-layout {
    flex-direction: column;
    min-height: 0;
  }

  html:root body[data-broker-page="settings"] .settings-sidebar {
    display: block;
    position: static;
    width: 100%;
    height: auto;
    padding: 24px 40px 0;
    box-sizing: border-box;
    border-right: 0;
    opacity: 1;
    transform: none;
    overflow: visible;
  }

  html:root body[data-broker-page="settings"] .sidebar-header {
    padding: 0 0 12px;
    margin-bottom: 8px;
  }

  html:root body[data-broker-page="settings"] .sidebar-nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    max-width: 100%;
    padding: 0;
  }

  html:root body[data-broker-page="settings"] .sidebar-nav-item {
    flex-shrink: 0;
  }

  html:root body[data-broker-page="settings"] .sidebar-nav-link {
    min-height: 44px;
    white-space: nowrap;
    padding: 12px;
  }

  html:root body[data-broker-page="settings"] .sidebar-nav-divider {
    display: none;
  }

  html:root.cs-shell body[data-broker-page="settings"] main.settings-main {
    width: 100%;
    min-width: 0;
    max-width: none !important;
    box-sizing: border-box;
  }

  html:root body[data-broker-page="settings"] .settings-section:not(.active) {
    display: none;
  }
}

/* ---------- From 48-codex-dashboard-progress.css ---------- */
/* X16: on phones, keep the title and dates beside the native progress ring,
   then give the four legend items a stable two-column row below it. */
@media (max-width: 480px) {
  html:root body[data-broker-page="dashboard"] .enrollment-content {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    align-items: center;
    gap: 8px 16px;
  }

  html:root body[data-broker-page="dashboard"] .enrollment-info {
    display: contents;
  }

  html:root body[data-broker-page="dashboard"] .progress-circle {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  html:root body[data-broker-page="dashboard"] .enrollment-info h3 {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    min-width: 0;
    overflow-wrap: anywhere;
    margin: 0;
  }

  html:root body[data-broker-page="dashboard"] .enrollment-info .date-range {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 0;
  }

  html:root body[data-broker-page="dashboard"] .status-row {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    padding-top: 8px;
  }
}

/* ==== Ported from the redesign's 50-codex-record-dialogs.css ==== */
/* Broker/company/employee record dialogs, inline record forms and new-hire drawers.
   Explicit page lists preserve the reviewed broker/company/employee scope.
   Contrast is width-independent; inline-style/onclick hooks are retained only where Mint has no named hook. */
@media (max-width: 480px) {
  html:root body[data-broker-page="companies"] #addCompanyModal .form-row-3 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px;
  }
}

/* ==== Ported from the redesign's 51-codex-message-dialogs.css ==== */
/* X19: broker Email, Text Drop, campaign and editor forms. */
html:root body[data-broker-page="all-text-drops"] #selectCompanyModal .company-item-meta {
  color: var(--cs-gray-500);
}

@media (max-width: 768px) {
  /* History links have native text-only boxes; give each filter a touch area. */
  html:root body[data-broker-page="text-drops"] .compose-area .history-filter {
    font-size: max(12px, 0.85rem);
    display: inline-flex;
    align-items: center;
    min-width: 36px;
    min-height: 36px;
  }
}

@media (max-width: 768px) {
  html:root body[data-broker-page="email-editor"] #checklistSummary span {
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  /* base.css adds an outer card inset; compose keeps its padding in the header and body only. */
  html:root body[data-broker-page="text-drops"] .compose-area > .card {
    padding: 0 !important;
  }
  html:root body[data-broker-page="text-drops"] .compose-area > .card > .card-header,
  html:root body[data-broker-page="text-drops"] .compose-area > .card > .card-body {
    padding: 16px !important;
  }
  html:root body[data-broker-page="email-editor"] input:not([type="checkbox"]):not([type="radio"]),
  html:root body[data-broker-page="email-editor"] select,
  html:root body[data-broker-page="email-editor"] textarea {
    font-size: 16px !important;
    min-height: 36px;
  }
  html:root body[data-broker-page="email-editor"] .ed-name {
    min-height: 36px;
  }
  html:root body[data-broker-page="email-editor"] .ed-stepper {
    min-height: 44px;
    align-items: center;
  }
  html:root body[data-broker-page="email-editor"] .ed-switch {
    height: 36px;
  }
  html:root body[data-broker-page="email-editor"] .ed-switch-track {
    inset-block: 7px;
  }
  html:root body[data-broker-page="email-editor"] .ed-check,
  html:root body[data-broker-page="email-editor"] .ed-replace-phone,
  html:root body[data-broker-page="campaigns"] #createModal .checkbox-row label {
    display: flex;
    align-items: center;
    min-height: 36px;
  }
}

@media (max-width: 480px) {
  html:root body[data-broker-page="text-drops"] .compose-area .schedule-datetime {
    flex-direction: column;
    align-items: stretch;
  }
  html:root body[data-broker-page="text-drops"] .compose-area .schedule-datetime .form-input {
    flex: none;
    width: 100%;
  }
}

/* ==== Ported from the redesign's 52-codex-library-dialogs.css ==== */
/* X20: company enrollment and Plan Library, Extend, Library upload/Packet,
   form/template preview, share dialogs, the Plans wizard and Settings forms. Color corrections also apply on desktop. */

html:root body[data-broker-page="library"] #createPacketModal input::placeholder,
html:root body[data-broker-page="library"] #sendFormTextModal input::placeholder,
html:root body[data-broker-page="library"] .send-email-modal-overlay:has(#secureLinkExpiration) input::placeholder {
  color: var(--cs-muted) !important;
  opacity: 1;
}

/* base.css's painted-label rule makes both radio labels white. Keep Mint's backgrounds
   and checked-state shadow; neutral text distinguishes the selected delivery channel. */
html:root body[data-broker-page="library"] #createPacketModal #packetEmailToggle:has(> input:checked),
html:root body[data-broker-page="library"] #createPacketModal #packetTextToggle:has(> input:checked) {
  color: var(--cs-gray-700) !important;
}

html:root body[data-broker-page="library"] #createPacketModal #packetEmailToggle:has(> input:not(:checked)),
html:root body[data-broker-page="library"] #createPacketModal #packetTextToggle:has(> input:not(:checked)) {
  color: var(--cs-gray-500) !important;
}

/* Generated markup has no semantic class/id on the required marker or submit button. */
html:root body[data-broker-page="library"] #createPacketModal label span[style*="ef4444"],
html:root body[data-broker-page="library"] #sendFormTextModal .send-email-field > label > span {
  color: var(--cs-bad-fg) !important;
}

/* Dark text stays readable on the mapped fields' translucent ownership colors. */
html:root body[data-broker-page="library"] #previewModal .preview-field-label {
  color: var(--cs-gray-700);
}

/* Mint's inline password hint and close glyph use a gray below the text/icon floors. */
html:root body[data-broker-page="library"] #sendEmailModal .generate-modal-close,
html:root body[data-broker-page="library"] #sendEmailModal #passwordFieldWrap .form-group > p {
  color: var(--cs-gray-500) !important;
}

html:root body[data-broker-page="library"] #createPacketModal .send-email-footer button[onclick*="submitCreatePacket"] {
  background: var(--cs-primary) !important;
}

/* Three presets share the card width; Mint's moulded button padding otherwise clips the last one. */
html:root body[data-broker-page="enrollments"] #extendModal .quick-extend-btns {
  flex-wrap: wrap;
}

html:root body[data-broker-page="enrollments"] #extendModal .quick-extend-btn {
  flex: 1 1 90px;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  white-space: normal;
}
html:root body[data-broker-page="enrollments"] #extendModal .quick-extend-btn small {
  color: var(--cs-gray-500) !important;
  font-size: max(12px, 0.75rem) !important;
}

/* Allow date flex items to shrink below the native input's intrinsic width.
   Main aligns at 1440/1280; at 390 two 165px minimums plus a 12px gap overflow 332px. */
html:root body[data-broker-page="enrollments"] #extendModal .date-input-group {
  min-width: 0;
}
html:root body[data-broker-page="enrollments"] #extendModal .date-input {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 768px) {

  html:root body[data-broker-page="library"] #createPacketModal #packetFormsList + div,
  html:root body[data-broker-page="library"] #packetFormsList .packet-form-item > div:last-child > div + div {
    font-size: max(12px, 0.7rem) !important;
  }
}

@media (max-width: 768px) {

  /* Expand the switch hit area while retaining Mint's 30px visual track. */
  html:root body[data-broker-page="settings"] .theme-switch {
    height: 36px;
  }

  html:root body[data-broker-page="settings"] .theme-slider {
    top: 3px;
    bottom: 3px;
  }
}

@media (max-width: 768px) {

  html:root body[data-broker-page="enrollments"] #extendModal > .modal {
    max-width: 100% !important;
    max-height: calc(100dvh - 100px) !important;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }
}

@media (max-width: 768px) {

  html:root body[data-broker-page="library"] #createPacketModal > .send-email-modal {
    width: 100% !important;
    max-height: calc(100dvh - 24px);
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }

  html:root body[data-broker-page="library"] #createPacketModal .send-email-close {
    min-width: 36px;
    min-height: 36px;
  }

  html:root body[data-broker-page="library"] #createPacketModal input:not([type="checkbox"]):not([type="radio"]),
  html:root body[data-broker-page="library"] #createPacketModal select {
    font-size: 16px !important;
    min-height: 44px;
  }

  /* Font follows Mint's .85rem; 44px is the target height, not a text-size scale. */
  html:root body[data-broker-page="library"] #createPacketModal .send-email-footer button {
    font-size: max(12px, 0.85rem) !important;
    min-height: 44px;
  }

  html:root body[data-broker-page="library"] #createPacketModal .send-email-footer {
    flex-shrink: 0;
  }

  html:root body[data-broker-page="library"] #createPacketModal #packetEmailToggle,
  html:root body[data-broker-page="library"] #createPacketModal #packetTextToggle {
    font-size: max(12px, 0.85rem) !important;
    min-height: 44px;
  }

  /* Existing Library fixtures expose separate preview/share controls.
     Floors preserve native text sizes; 16px fields bridge exactly 768px.
     PDF labels keep native box coordinates; the body starts wide paper at its left edge.
     Card height deducts 24px for the overlay's two 12px insets. */

  html:root body[data-broker-page="library"] #previewModal .preview-page-info,
  html:root body[data-broker-page="library"] #sendEmailModal .form-label,
  html:root body[data-broker-page="library"] #sendFormTextModal .send-email-doc > span,
  html:root body[data-broker-page="library"] .send-email-modal-overlay:has(#secureLinkExpiration) .send-email-doc > span {
    font-size: max(12px, 0.85rem) !important;
  }
  html:root body[data-broker-page="library"] #previewModal .preview-field-count,
  html:root body[data-broker-page="library"] #previewModal .legend-item,
  html:root body[data-broker-page="library"] #sendFormTextModal .send-email-field > label,
  html:root body[data-broker-page="library"] .send-email-modal-overlay:has(#secureLinkExpiration) .send-email-field > label {
    font-size: max(12px, 0.8rem) !important;
  }
  html:root body[data-broker-page="library"] #sendEmailModal #passwordFieldWrap .form-group > p {
    font-size: max(12px, 0.75rem) !important;
  }
  html:root body[data-broker-page="library"] #previewModal .preview-field-label {
    font-size: 12px;
  }
  html:root body[data-broker-page="library"] #previewModal .preview-field-tooltip,
  html:root body[data-broker-page="library"] .send-email-modal-overlay:has(#secureLinkExpiration) div:has(> #secureLinkExpiration) + div,
  html:root body[data-broker-page="library"] .send-email-modal-overlay:has(#secureLinkExpiration) #secureLinkAccessCode + div {
    font-size: 12px !important;
  }
  html:root body[data-broker-page="library"] #sendEmailModal input:not([type="checkbox"]):not([type="hidden"]),
  html:root body[data-broker-page="library"] #sendFormTextModal input,
  html:root body[data-broker-page="library"] .send-email-modal-overlay:has(#secureLinkExpiration) input,
  html:root body[data-broker-page="library"] .send-email-modal-overlay:has(#secureLinkExpiration) select {
    font-size: 16px !important;
  }
  html:root body[data-broker-page="library"] #sendEmailModal .toggle-row:has(#enablePassword) {
    min-height: 36px;
  }
  html:root body[data-broker-page="library"] #sendEmailModal .password-toggle-btn {
    min-width: 36px;
    min-height: 36px;
    right: 4px;
  }
  /* Library overlays paint above the 65px navigation (1200/6000 versus 1000).
     A 12px inset on every edge leaves room for modal body scrolling. */
  html:root body[data-broker-page="library"] #uploadModal,
  html:root body[data-broker-page="library"] #createPacketModal,
  html:root body[data-broker-page="library"] #previewModal,
  html:root body[data-broker-page="library"] #sendEmailModal,
  html:root body[data-broker-page="library"] #sendFormTextModal,
  html:root body[data-broker-page="library"] .send-email-modal-overlay:has(#secureLinkExpiration) {
    padding: 12px;
    box-sizing: border-box;
    overflow: auto;
  }
  html:root body[data-broker-page="library"] #uploadModal > .modal {
    max-width: 100% !important;
    max-height: calc(100dvh - 24px) !important;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }
  html:root body[data-broker-page="library"] #previewModal > .preview-modal-box {
    max-height: calc(100dvh - 24px);
    overflow: auto;
  }
  html:root body[data-broker-page="library"] #previewModal .preview-legend {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
  }
  html:root body[data-broker-page="library"] #previewModal .preview-modal-body {
    justify-content: flex-start;
    overscroll-behavior: contain;
  }
  html:root body[data-broker-page="library"] #previewModal .preview-pdf-container {
    margin-inline: auto;
  }
  html:root body[data-broker-page="library"] #sendEmailModal > .generate-modal-content,
  html:root body[data-broker-page="library"] #sendFormTextModal > .send-email-modal,
  html:root body[data-broker-page="library"] .send-email-modal-overlay:has(#secureLinkExpiration) > .send-email-modal {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 24px);
    overflow: auto;
  }
  html:root body[data-broker-page="library"] #sendEmailModal .generate-modal-body,
  html:root body[data-broker-page="library"] #sendFormTextModal .send-email-body,
  html:root body[data-broker-page="library"] .send-email-modal-overlay:has(#secureLinkExpiration) .send-email-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  html:root body[data-broker-page="library"] #sendEmailModal .generate-modal-header,
  html:root body[data-broker-page="library"] #sendEmailModal .generate-modal-footer,
  html:root body[data-broker-page="library"] #sendFormTextModal .send-email-header,
  html:root body[data-broker-page="library"] #sendFormTextModal .send-email-footer,
  html:root body[data-broker-page="library"] .send-email-modal-overlay:has(#secureLinkExpiration) .send-email-header,
  html:root body[data-broker-page="library"] .send-email-modal-overlay:has(#secureLinkExpiration) .send-email-footer {
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {

  /* This generated two-field row has no class; field ids anchor it without style text. */
  html:root body[data-broker-page="library"] #createPacketModal .send-email-body > div:has(> div > #packetName),
  html:root body[data-broker-page="library"] #createPacketModal .send-email-body > div:has(> div > #packetRecipientName) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 480px) {

  /* Native title flex:1 has basis 0; reserve 36px close plus its 10px gap on row 1. */

  html:root body[data-broker-page="library"] #previewModal .preview-modal-title {
    flex: 1 1 calc(100% - 46px);
    width: auto;
    order: 0;
  }
  html:root body[data-broker-page="library"] #previewModal .preview-modal-close {
    order: 1;
  }
}

/* ==== Ported from the redesign's 95-john-library-controls.css ==== */
/* John: Library uses the company tabs and the same quiet search and view controls. */

/* base.css's older 53px Library tabs were clipped by their 44px rail, hiding the rounded tops. */
html:root:not(#ui) body[data-broker-page="library"] .page-header .tabs > .tab {
  height: 44px !important;
  min-height: 44px !important;
}

/* Use the same quiet white fields as company Employees, without a raised shadow. */
html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > .search-box {
  height: 44px !important;
  border: 0 !important;
  border-radius: var(--cs-radius) !important;
  background: var(--bg-primary) !important;
  box-shadow: inset 0 0 0 1px var(--cs-border) !important;
  overflow: visible !important;
}
html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > .search-box:focus-within {
  box-shadow: inset 0 0 0 1px var(--cs-gray-500) !important;
}
html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > .search-box > button.search-icon {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  color: var(--cs-gray-500) !important;
}
html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > .search-box > button.search-icon i {
  font-size: 18px !important;
}
html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > .search-box:focus-within > button.search-icon {
  color: var(--cs-primary) !important;
}
html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > .search-box > input {
  height: 44px !important;
  border: 0 !important;
  padding: 0 8px 0 0 !important;
  border-radius: var(--cs-radius-md) !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--cs-gray-700) !important;
  font-size: max(14px, .92rem) !important;
}
html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > .search-box > input::placeholder {
  color: var(--cs-gray-500) !important;
  opacity: 1;
}
/* Keep Mint's native filter values and keyboard behavior, with quiet closed controls. */
html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > select.filter-select {
  height: 44px !important;
  min-width: 104px !important;
  width: auto !important;
  max-width: 100% !important;
  field-sizing: content;
  padding: 0 32px 0 12px !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius) !important;
  background-color: var(--bg-primary) !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--cs-gray-700) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  transition: background-color 120ms ease, color 120ms ease !important;
}
html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > select.filter-select:hover {
  background-color: var(--cs-gray-50) !important;
}
html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > select.filter-select:has(> option:checked:not([value=""])) {
  color: var(--cs-primary-deep) !important;
}
html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > select.filter-select:focus-visible {
  border-color: var(--cs-gray-500) !important;
  background-color: var(--cs-gray-50) !important;
}
html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > select.filter-select > option {
  background: var(--bg-primary);
  color: var(--cs-gray-700);
}

/* Style the browser's own picker; browsers without this support keep their native menu. */
@supports (appearance: base-select) {
  html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > select.filter-select,
  html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > select.filter-select::picker(select) {
    appearance: base-select !important;
  }
  html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > select.filter-select {
    display: inline-flex !important;
    align-items: center !important;
  }
  html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > select.filter-select:open {
    background-color: var(--cs-gray-50) !important;
  }
  html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > select.filter-select::picker-icon {
    display: none;
  }
  html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > select.filter-select::picker(select) {
    width: max-content;
    min-width: max(144px, anchor-size(width));
    max-width: calc(100vw - 24px);
    margin-block: 4px;
    padding: 4px 0;
    border: 1px solid var(--cs-border);
    border-radius: calc(var(--cs-radius-md) / 2);
    background: var(--bg-primary);
    box-shadow: var(--cs-shadow-sm);
    color: var(--cs-gray-700);
    font-family: inherit;
    font-size: 14px;
  }
  /* The menu's 1px border plus 11px padding aligns its labels with the 12px trigger inset. */
  html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > select.filter-select > option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 11px;
    border: 0;
    border-radius: 0;
    outline: none;
    font-weight: 400;
    cursor: pointer;
  }
  html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > select.filter-select > option:hover {
    background: var(--cs-gray-50);
  }
  html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > select.filter-select > option:focus {
    background: var(--cs-gray-100);
  }
  /* Reserve the check column on every row so the menu does not resize with its selection. */
  html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > select.filter-select > option::checkmark {
    content: "";
    display: block;
    visibility: hidden;
    order: 1;
    flex: none;
    width: 16px;
    height: 16px;
    margin-left: auto;
    background: var(--cs-primary);
    mask: url("/icons/mint-v3/check.svg") center / contain no-repeat;
  }
  html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > select.filter-select > option:checked::checkmark {
    visibility: visible;
  }
}

/* The same Illustrator icons and flat selected fill as the Companies view switch. */
html:root:not(#ui) body[data-broker-page="library"] .controls > .view-toggle {
  padding: 0 !important;
  flex-wrap: nowrap !important;
}
html:root:not(#ui) body[data-broker-page="library"] .controls > .view-toggle > button.view-btn {
  width: auto !important;
  min-width: 80px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin-left: 0 !important;
  padding: 0 10px !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: var(--cs-radius-md) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cs-gray-500) !important;
  font-family: inherit !important;
  font-size: max(13px, .85rem) !important;
  font-weight: 500 !important;
  transition: color 120ms ease, background-color 120ms ease !important;
}
html:root:not(#ui) body[data-broker-page="library"] .controls > .view-toggle > button.view-btn.active {
  background: var(--cs-gray-100) !important;
  color: var(--cs-primary-deep) !important;
  font-weight: 600 !important;
}
html:root:not(#ui) body[data-broker-page="library"] .controls > .view-toggle > button.view-btn:hover {
  color: var(--cs-primary) !important;
}
html:root:not(#ui) body[data-broker-page="library"] .controls > .view-toggle > button.view-btn:not(.active):hover {
  background: var(--cs-gray-50) !important;
}
html:root:not(#ui) body[data-broker-page="library"] .controls > .view-toggle > button.view-btn:focus-visible {
  outline: 2px solid var(--cs-primary) !important;
  outline-offset: 2px !important;
}
html:root:not(#ui) body[data-broker-page="library"] .controls > .view-toggle > button.view-btn[data-view="list"]::after {
  content: "List";
}
html:root:not(#ui) body[data-broker-page="library"] .controls > .view-toggle > button.view-btn[data-view="grid"]::after {
  content: "Grid";
}
html:root:not(#ui) body[data-broker-page="library"] .controls > .view-toggle > button.view-btn i {
  width: 20px !important;
  height: 20px !important;
}
html:root:not(#ui) body[data-broker-page="library"] .controls > .view-toggle > button.view-btn i::before {
  width: 20px;
  height: 20px;
}
html:root:not(#ui) body[data-broker-page="library"] .controls > .view-toggle > button.view-btn[data-view="list"] {
  --jv-icon: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Mint_list-view__x2F__24px__x2F__round_1.8pt%22%0D%0A%09%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2024%2024%22%0D%0A%09%20enable-background%3D%22new%200%200%2024%2024%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cline%20id%3D%22First_row%22%20fill%3D%22none%22%20stroke%3D%22%23125853%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%229%22%20y1%3D%226%22%20x2%3D%2220%22%20y2%3D%226%22%2F%3E%0D%0A%3Cline%20id%3D%22Second_row%22%20fill%3D%22none%22%20stroke%3D%22%23125853%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%229%22%20y1%3D%2212%22%20x2%3D%2218%22%20y2%3D%2212%22%2F%3E%0D%0A%3Cline%20id%3D%22Third_row%22%20fill%3D%22none%22%20stroke%3D%22%23125853%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%229%22%20y1%3D%2218%22%20x2%3D%2220%22%20y2%3D%2218%22%2F%3E%0D%0A%3Ccircle%20id%3D%22Row_marker%22%20fill%3D%22%23125853%22%20cx%3D%224%22%20cy%3D%226%22%20r%3D%221%22%2F%3E%0D%0A%3Ccircle%20id%3D%22Row_marker_00000139996160444496160800000004778952637866394270_%22%20fill%3D%22%23125853%22%20cx%3D%224%22%20cy%3D%2212%22%20r%3D%221%22%2F%3E%0D%0A%3Ccircle%20id%3D%22Row_marker_00000150790805813212182980000004747012693252561844_%22%20fill%3D%22%23125853%22%20cx%3D%224%22%20cy%3D%2218%22%20r%3D%221%22%2F%3E%0D%0A%3C%2Fsvg%3E");
}
html:root:not(#ui) body[data-broker-page="library"] .controls > .view-toggle > button.view-btn[data-view="grid"] {
  --jv-icon: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Mint_grid-view__x2F__24px__x2F__round_1.8pt%22%0D%0A%09%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2024%2024%22%0D%0A%09%20enable-background%3D%22new%200%200%2024%2024%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20id%3D%22Company_card%22%20fill%3D%22none%22%20stroke%3D%22%23125853%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20d%3D%22%0D%0A%09M4%2C8.6V5.4C4%2C4.63%2C4.63%2C4%2C5.4%2C4h3.2C9.37%2C4%2C10%2C4.63%2C10%2C5.4v3.2C10%2C9.37%2C9.37%2C10%2C8.6%2C10H5.4C4.63%2C10%2C4%2C9.37%2C4%2C8.6z%22%2F%3E%0D%0A%3Cpath%20id%3D%22Company_card_00000180351628439198415360000013563775467979758248_%22%20fill%3D%22none%22%20stroke%3D%22%23125853%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20d%3D%22%0D%0A%09M14%2C8.6V5.4C14%2C4.63%2C14.63%2C4%2C15.4%2C4h3.2C19.37%2C4%2C20%2C4.63%2C20%2C5.4v3.2c0%2C0.77-0.63%2C1.4-1.4%2C1.4h-3.2C14.63%2C10%2C14%2C9.37%2C14%2C8.6z%22%2F%3E%0D%0A%3Cpath%20id%3D%22Company_card_00000088125072087334684100000005466035326173349537_%22%20fill%3D%22none%22%20stroke%3D%22%23125853%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20d%3D%22%0D%0A%09M4%2C18.6v-3.2C4%2C14.63%2C4.63%2C14%2C5.4%2C14h3.2c0.77%2C0%2C1.4%2C0.63%2C1.4%2C1.4v3.2c0%2C0.77-0.63%2C1.4-1.4%2C1.4H5.4C4.63%2C20%2C4%2C19.37%2C4%2C18.6z%22%2F%3E%0D%0A%3Cpath%20id%3D%22Company_card_00000026855061433279434220000005940275747317076896_%22%20fill%3D%22none%22%20stroke%3D%22%23125853%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20d%3D%22%0D%0A%09M14%2C18.6v-3.2c0-0.77%2C0.63-1.4%2C1.4-1.4h3.2c0.77%2C0%2C1.4%2C0.63%2C1.4%2C1.4v3.2c0%2C0.77-0.63%2C1.4-1.4%2C1.4h-3.2C14.63%2C20%2C14%2C19.37%2C14%2C18.6z%22%0D%0A%09%2F%3E%0D%0A%3C%2Fsvg%3E");
}

@media (max-width: 600px) {
  html:root:not(#ui) body[data-broker-page="library"] .controls > .view-toggle > button.view-btn {
    min-width: 64px !important;
    padding: 0 6px !important;
    gap: 6px !important;
  }
}
@media (max-width: 480px) {
  html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > .search-box > input {
    font-size: 16px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > select.filter-select,
  html:root:not(#ui) body[data-broker-page="library"] .controls > .view-toggle > button.view-btn {
    transition: none !important;
  }
}

/* At 768 and below the controls sit on the grey page, not the white card (as on Companies, 98): the selected view
   becomes a white chip, and grey labels darken to keep 4.5:1 on grey. */
@media (max-width: 768px) {
  html:root:not(#ui) body[data-broker-page="library"] .controls > .view-toggle > button.view-btn.active {
    background-color: #fff !important;
  }
  html:root:not(#ui) body[data-broker-page="library"] .controls > .view-toggle > button.view-btn:not(.active),
  html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > .search-box > input::placeholder {
    color: #656c79 !important;
  }
}

/* At 1024 the controls row needed 909px of its 900: the search field may shrink a little (to 160px) so Upload stays
   inside the card. Above 1024 nothing changes. */
@media (min-width: 769px) and (max-width: 1024px) {
  html:root:not(#ui) body[data-broker-page="library"] .tab-content > .controls > .search-box {
    flex-shrink: 1 !important;
    min-width: 160px !important;
  }
}

/* ==== Ported from the redesign's 98-john-company-controls.css ==== */
/* John: quieter Companies tools, with Illustrator-drawn view and open-record icons.
   The company placeholder stays a building; opening its record has its own arrow. */

html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .search-box {
  border-radius: var(--cs-radius) !important;
}
html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .search-box > input {
  height: 44px !important;
  padding: 0 12px 0 42px !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius) !important;
  background: var(--bg-primary) !important;
  box-shadow: none !important;
  color: var(--cs-gray-700) !important;
  font-size: max(14px, .92rem) !important;
  transition: background-color 120ms ease !important;
}
html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .search-box > input::placeholder {
  color: var(--cs-gray-500) !important;
  opacity: 1;
}
html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .search-box > input:focus {
  outline: none !important;
  background: var(--bg-primary) !important;
  border-color: var(--cs-gray-500) !important;
}
html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .search-box > i {
  left: 14px !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--cs-gray-500) !important;
  font-size: 18px !important;
}
html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .search-box:focus-within > i {
  color: var(--cs-primary) !important;
}

/* A quiet fill marks the selected view; the pair has no enclosing track or rules. */
html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .view-toggle {
  padding: 0 !important;
}
html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .view-btn {
  width: auto !important;
  min-width: 80px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin-left: 0 !important;
  padding: 0 10px !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: var(--cs-radius-md) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cs-gray-500) !important;
  font-family: inherit !important;
  font-size: max(13px, .85rem) !important;
  font-weight: 500 !important;
  transition: color 120ms ease, background-color 120ms ease !important;
}
html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .view-btn.active {
  background: var(--cs-gray-100) !important;
  color: var(--cs-primary-deep) !important;
  font-weight: 600 !important;
}
html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .view-btn:hover {
  color: var(--cs-primary) !important;
}
html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .view-btn:not(.active):hover {
  background: var(--cs-gray-50) !important;
}
html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .view-btn:focus-visible {
  outline: 2px solid var(--cs-primary) !important;
  outline-offset: 2px !important;
}
html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .view-btn[data-view="list"]::after {
  content: "List";
}
html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .view-btn[data-view="grid"]::after {
  content: "Grid";
}
html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .view-btn i {
  width: 20px !important;
  height: 20px !important;
}
html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .view-btn i::before {
  width: 20px;
  height: 20px;
}
html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .view-btn[data-view="list"] {
  --jv-icon: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Mint_list-view__x2F__24px__x2F__round_1.8pt%22%0D%0A%09%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2024%2024%22%0D%0A%09%20enable-background%3D%22new%200%200%2024%2024%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cline%20id%3D%22First_row%22%20fill%3D%22none%22%20stroke%3D%22%23125853%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%229%22%20y1%3D%226%22%20x2%3D%2220%22%20y2%3D%226%22%2F%3E%0D%0A%3Cline%20id%3D%22Second_row%22%20fill%3D%22none%22%20stroke%3D%22%23125853%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%229%22%20y1%3D%2212%22%20x2%3D%2218%22%20y2%3D%2212%22%2F%3E%0D%0A%3Cline%20id%3D%22Third_row%22%20fill%3D%22none%22%20stroke%3D%22%23125853%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%229%22%20y1%3D%2218%22%20x2%3D%2220%22%20y2%3D%2218%22%2F%3E%0D%0A%3Ccircle%20id%3D%22Row_marker%22%20fill%3D%22%23125853%22%20cx%3D%224%22%20cy%3D%226%22%20r%3D%221%22%2F%3E%0D%0A%3Ccircle%20id%3D%22Row_marker_00000139996160444496160800000004778952637866394270_%22%20fill%3D%22%23125853%22%20cx%3D%224%22%20cy%3D%2212%22%20r%3D%221%22%2F%3E%0D%0A%3Ccircle%20id%3D%22Row_marker_00000150790805813212182980000004747012693252561844_%22%20fill%3D%22%23125853%22%20cx%3D%224%22%20cy%3D%2218%22%20r%3D%221%22%2F%3E%0D%0A%3C%2Fsvg%3E");
}
html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .view-btn[data-view="grid"] {
  --jv-icon: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Mint_grid-view__x2F__24px__x2F__round_1.8pt%22%0D%0A%09%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2024%2024%22%0D%0A%09%20enable-background%3D%22new%200%200%2024%2024%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20id%3D%22Company_card%22%20fill%3D%22none%22%20stroke%3D%22%23125853%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20d%3D%22%0D%0A%09M4%2C8.6V5.4C4%2C4.63%2C4.63%2C4%2C5.4%2C4h3.2C9.37%2C4%2C10%2C4.63%2C10%2C5.4v3.2C10%2C9.37%2C9.37%2C10%2C8.6%2C10H5.4C4.63%2C10%2C4%2C9.37%2C4%2C8.6z%22%2F%3E%0D%0A%3Cpath%20id%3D%22Company_card_00000180351628439198415360000013563775467979758248_%22%20fill%3D%22none%22%20stroke%3D%22%23125853%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20d%3D%22%0D%0A%09M14%2C8.6V5.4C14%2C4.63%2C14.63%2C4%2C15.4%2C4h3.2C19.37%2C4%2C20%2C4.63%2C20%2C5.4v3.2c0%2C0.77-0.63%2C1.4-1.4%2C1.4h-3.2C14.63%2C10%2C14%2C9.37%2C14%2C8.6z%22%2F%3E%0D%0A%3Cpath%20id%3D%22Company_card_00000088125072087334684100000005466035326173349537_%22%20fill%3D%22none%22%20stroke%3D%22%23125853%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20d%3D%22%0D%0A%09M4%2C18.6v-3.2C4%2C14.63%2C4.63%2C14%2C5.4%2C14h3.2c0.77%2C0%2C1.4%2C0.63%2C1.4%2C1.4v3.2c0%2C0.77-0.63%2C1.4-1.4%2C1.4H5.4C4.63%2C20%2C4%2C19.37%2C4%2C18.6z%22%2F%3E%0D%0A%3Cpath%20id%3D%22Company_card_00000026855061433279434220000005940275747317076896_%22%20fill%3D%22none%22%20stroke%3D%22%23125853%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20d%3D%22%0D%0A%09M14%2C18.6v-3.2c0-0.77%2C0.63-1.4%2C1.4-1.4h3.2c0.77%2C0%2C1.4%2C0.63%2C1.4%2C1.4v3.2c0%2C0.77-0.63%2C1.4-1.4%2C1.4h-3.2C14.63%2C20%2C14%2C19.37%2C14%2C18.6z%22%0D%0A%09%2F%3E%0D%0A%3C%2Fsvg%3E");
}

/* The mask inherits the action colour; the original company art elsewhere is untouched. */
html:root:not(#ui) body[data-broker-page="companies"] .companies-table a.action-btn[data-tooltip="View Company"] {
  min-width: 44px !important;
  min-height: 44px !important;
}
html:root:not(#ui) body[data-broker-page="companies"] .companies-table a.action-btn[data-tooltip="View Company"] > i {
  width: 20px !important;
  height: 20px !important;
  font-size: 0 !important;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Mint_open-company__x2F__24px__x2F__round_1.8pt%22%0D%0A%09%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2024%2024%22%0D%0A%09%20enable-background%3D%22new%200%200%2024%2024%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20id%3D%22Open_record%22%20fill%3D%22none%22%20stroke%3D%22%23125853%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20d%3D%22%0D%0A%09M13%2C4h5c1.105%2C0%2C2%2C0.895%2C2%2C2v12c0%2C1.105-0.895%2C2-2%2C2h-5%22%2F%3E%0D%0A%3Cline%20id%3D%22Enter_company%22%20fill%3D%22none%22%20stroke%3D%22%23125853%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%224%22%20y1%3D%2212%22%20x2%3D%2214%22%20y2%3D%2212%22%2F%3E%0D%0A%3Cpolyline%20id%3D%22Arrowhead%22%20fill%3D%22none%22%20stroke%3D%22%23125853%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20points%3D%22%0D%0A%0910%2C8%2014%2C12%2010%2C16%20%22%2F%3E%0D%0A%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Mint_open-company__x2F__24px__x2F__round_1.8pt%22%0D%0A%09%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2024%2024%22%0D%0A%09%20enable-background%3D%22new%200%200%2024%2024%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20id%3D%22Open_record%22%20fill%3D%22none%22%20stroke%3D%22%23125853%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20d%3D%22%0D%0A%09M13%2C4h5c1.105%2C0%2C2%2C0.895%2C2%2C2v12c0%2C1.105-0.895%2C2-2%2C2h-5%22%2F%3E%0D%0A%3Cline%20id%3D%22Enter_company%22%20fill%3D%22none%22%20stroke%3D%22%23125853%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%224%22%20y1%3D%2212%22%20x2%3D%2214%22%20y2%3D%2212%22%2F%3E%0D%0A%3Cpolyline%20id%3D%22Arrowhead%22%20fill%3D%22none%22%20stroke%3D%22%23125853%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20points%3D%22%0D%0A%0910%2C8%2014%2C12%2010%2C16%20%22%2F%3E%0D%0A%3C%2Fsvg%3E") center / contain no-repeat;
}
html:root:not(#ui) body[data-broker-page="companies"] .companies-table a.action-btn[data-tooltip="View Company"] > i::before {
  display: none !important;
}
html:root:not(#ui) body[data-broker-page="companies"] .companies-table a.action-btn[data-tooltip="View Company"] > i > svg {
  display: none !important;
}
html:root:not(#ui) body[data-broker-page="companies"] .companies-table a.action-btn[data-tooltip="View Company"]:focus-visible {
  outline: 2px solid var(--cs-primary) !important;
  outline-offset: 2px !important;
}

@media (max-width: 600px) {
  html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .view-toggle {
    width: 100% !important;
    height: auto !important;
    flex-wrap: nowrap !important;
  }
  html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .view-btn {
    width: 64px !important;
    min-width: 64px !important;
    padding: 0 6px !important;
    gap: 6px !important;
  }
  html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .view-toggle > .controls-add {
    margin-left: auto !important;
  }
}
@media (max-width: 480px) {
  html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .search-box > input {
    font-size: 16px !important;
  }
}
@media (max-width: 360px) {
  html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .view-btn {
    width: 44px !important;
    min-width: 44px !important;
  }
  html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .view-btn::after {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .search-box > input,
  html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .view-btn {
    transition: none !important;
  }
}

/* At 768 and below the controls sit on the grey page, not the white card: the selected view becomes a white chip
   (the same step as grey on white above), and the grey labels darken to keep 4.5:1 on grey. */
@media (max-width: 768px) {
  html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .view-btn.active {
    background: #fff !important;
  }
  html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .view-btn:not(.active),
  html:root:not(#ui) body[data-broker-page="companies"] .content > .controls:has(+ .companies-table) .search-box > input::placeholder {
    color: #656c79 !important;
  }
}

/* ==== Ported from the redesign's 99-john-communications-flows.css ==== */
/* John: finish the remaining communication drawers, pickers and review steps.
   Keep native flows and preview content, with readable labels and reachable native inputs. */

/* Supporting text must remain readable on the gray canvas and preview tiles. */
html:root:not(#ui) body[data-broker-page="emails"] .em-thumb-unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 8px 0;
  color: var(--cs-gray-600);
  font-size: max(12px, .8rem);
  line-height: 1.4;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-mint-feature-caption > span,
html:root:not(#ui) body[data-broker-page="emails"] .em-tpl-updated {
  font-size: max(12px, .8125rem);
}

/* The Text Drop chooser should identify companies exactly like other company pickers. */
html:root:not(#ui) body[data-broker-page="all-text-drops"] #selectCompanyModal .company-item-logo:not(:has(img)) {
  background: var(--cs-slate-100);
  border-radius: var(--cs-radius-md);
  color: var(--cs-primary-deep);
}
html:root:not(#ui) body[data-broker-page="all-text-drops"] #selectCompanyModal .company-item-logo:not(:has(img)) > i {
  display: none;
}
html:root:not(#ui) body[data-broker-page="all-text-drops"] #selectCompanyModal .company-item-logo:not(:has(img))::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Mint__x2F__company_identity__x2F__24px%22%0D%0A%09%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2024%2024%22%0D%0A%09%20enable-background%3D%22new%200%200%2024%2024%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpolyline%20id%3D%22Primary_building%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20points%3D%22%0D%0A%094.5%2C20.5%204.5%2C5%205.5%2C4%2014.5%2C4%2015.5%2C5%2015.5%2C20.5%20%22%2F%3E%0D%0A%3Cpolyline%20id%3D%22Side_wing%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20points%3D%22%0D%0A%0915.5%2C10%2019.5%2C10%2020.5%2C11%2020.5%2C20.5%20%22%2F%3E%0D%0A%3Cline%20id%3D%22Ground%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%223%22%20y1%3D%2220.5%22%20x2%3D%2222%22%20y2%3D%2220.5%22%2F%3E%0D%0A%3Cpolyline%20id%3D%22Entrance%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20points%3D%22%0D%0A%098.5%2C20.5%208.5%2C16%2011.5%2C16%2011.5%2C20.5%20%22%2F%3E%0D%0A%3Cline%20id%3D%22Upper_left_window%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%228%22%20y1%3D%228%22%20x2%3D%228%22%20y2%3D%229%22%2F%3E%0D%0A%3Cline%20id%3D%22Upper_right_window%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2212%22%20y1%3D%228%22%20x2%3D%2212%22%20y2%3D%229%22%2F%3E%0D%0A%3Cline%20id%3D%22Lower_left_window%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%228%22%20y1%3D%2212%22%20x2%3D%228%22%20y2%3D%2213%22%2F%3E%0D%0A%3Cline%20id%3D%22Lower_right_window%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2212%22%20y1%3D%2212%22%20x2%3D%2212%22%20y2%3D%2213%22%2F%3E%0D%0A%3C%2Fsvg%3E") center / contain no-repeat;
}
html:root:not(#ui) body[data-broker-page="all-text-drops"] #selectCompanyModal .company-item-meta {
  font-size: max(12px, 0.75rem);
}
html:root:not(#ui) body[data-broker-page="text-drops"] #confirmModal .confirm-warning {
  font-size: max(12px, 0.85rem);
}

/* Native chips hide their inputs with display:none, removing keyboard access. */
html:root:not(#ui) body[data-broker-page="emails"] .em-pageview .em-seg-multi input,
html:root:not(#ui) body[data-broker-page="emails"] #emDrawerRoot .em-seg-multi input {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--cs-primary);
}
html:root:not(#ui) body[data-broker-page="emails"] .em-pageview .em-seg-multi label,
html:root:not(#ui) body[data-broker-page="emails"] #emDrawerRoot .em-seg-multi label {
  min-height: 44px;
}
html:root:not(#ui) body[data-broker-page="emails"] #emDrawerRoot .modal-close {
  border-radius: var(--cs-radius-md) !important;
}
html:root:not(#ui) body[data-broker-page="emails"] #emModalRoot .em-preview-toggle button {
  height: 36px;
  min-height: 36px;
}

/* Column examples must remain readable when CSV mapping narrows on a phone. */
html:root:not(#ui) body[data-broker-page="emails"] #emModalRoot .em-map-row {
  font-size: max(12px, 0.82rem);
}
html:root:not(#ui) body[data-broker-page="emails"] #emModalRoot .em-map-row .col {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}
html:root:not(#ui) body[data-broker-page="emails"] #emModalRoot .em-map-row .sample {
  display: block;
  margin-top: 2px;
  font-size: max(12px, 0.72rem);
}
html:root:not(#ui) body[data-broker-page="emails"] .em-pageview .em-gallery-sub {
  font-size: max(12px, 0.85rem);
}
html:root:not(#ui) body[data-broker-page="emails"] .em-pageview .em-step:not(.done) .n {
  font-size: max(12px, 0.72rem);
}

/* base.css's generic card rule repaints these native divider rows as nested cards. */
html:root:not(#ui) body[data-broker-page="emails"] .em-pageview .em-review-grid {
  background: white;
  border-color: var(--cs-border);
  overflow: hidden;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-pageview .em-review-card,
html:root:not(#ui) body[data-broker-page="emails"] .em-pageview .em-gallery-card {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-pageview .em-review-card + .em-review-card,
html:root:not(#ui) body[data-broker-page="emails"] .em-pageview .em-gallery-card + .em-gallery-card {
  border-top: 1px solid var(--cs-border) !important;
}

/* Keep the browser-owned file chooser, with a compact Mint button inside its 44px field. */
html:root:not(#ui) body[data-broker-page="emails"] #emModalRoot input[type="file"] {
  padding: 5px 8px !important;
}
html:root:not(#ui) body[data-broker-page="emails"] #emModalRoot input[type="file"]::file-selector-button {
  height: 32px;
  margin: 0 10px 0 0;
  padding: 0 12px;
  border: 0;
  border-radius: var(--cs-radius-md);
  background: var(--cs-gray-100);
  color: var(--cs-gray-700);
  font: inherit;
  cursor: pointer;
}
html:root:not(#ui) body[data-broker-page="emails"] #emModalRoot input[type="file"]::file-selector-button:hover {
  background: var(--cs-gray-200);
}

/* The checklist owns its header/body gutters; navbar.js also pads generic cards. */
html:root:not(#ui) body[data-broker-page="emails"] .em-pageview #wizBody > .card {
  padding: 0 !important;
  border-radius: var(--cs-radius-md) !important;
  box-shadow: none !important;
}

/* ==== Ported from the redesign's 99-john-company-dialogs.css ==== */
/* Company management dialogs retain Mint's native forms and handlers while
   resolving cramped inline editors, clipped branding controls and nested cards. */

/* Access chips and payroll choices belong to the same neutral form palette. */
html:root:not(#ui) body[data-broker-page="companies"] #addCompanyModal .broker-select-trigger {
  min-height: 44px;
  padding: 6px 12px;
  border-radius: var(--cs-radius-md);
}
html:root:not(#ui) body[data-broker-page="companies"] #addCompanyModal .broker-tag {
  min-height: 28px;
  padding: 2px 8px;
  background: var(--cs-primary-lightest);
  color: var(--cs-primary-deep);
}
html:root:not(#ui) body[data-broker-page="companies"] #addCompanyModal .broker-option {
  gap: 12px;
  padding: 10px 12px;
}
html:root:not(#ui) body[data-broker-page="companies"] #addCompanyModal .broker-option.selected {
  background: var(--cs-primary-lightest);
}
html:root:not(#ui) body[data-broker-page="companies"] #addCompanyModal .broker-option-email {
  color: var(--cs-gray-600);
  font-size: 12px;
  line-height: 18px;
}
html:root:not(#ui) body[data-broker-page="companies"] #addCompanyModal .broker-option-avatar {
  border-radius: var(--cs-radius-md);
}
html:root:not(#ui) body[data-broker-page="companies"] #addCompanyModal .broker-option-avatar:not(:has(img)) {
  background: var(--cs-slate-100);
  color: var(--cs-primary-deep);
  font-size: 0;
}
html:root:not(#ui) body[data-broker-page="companies"] #addCompanyModal .broker-option-avatar:not(:has(img))::before {
  content: "";
  width: 22px;
  height: 22px;
  background: currentColor;
  /* Same Illustrator broker geometry used in the navbar fallback. */
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.25' r='3.5'/%3E%3Cpath d='M4.5,19.5c0-3.2,2.2-5.1,5-5.8l2.5,3.8l2.5-3.8c2.8,0.7,5,2.6,5,5.8c0,0.9-0.6,1.5-1.5,1.5H6C5.1,21,4.5,20.4,4.5,19.5zM12,13.5l-1.1,1.2l1.1,1.7l1.1-1.7L12,13.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html:root:not(#ui) body[data-broker-page="companies"] #addCompanyModal .payroll-tax-option {
  min-height: 44px;
  background: var(--bg-primary);
  border-radius: var(--cs-radius-md);
}
html:root:not(#ui) body[data-broker-page="companies"] #addCompanyModal .payroll-tax-option:has(input:checked) {
  background: var(--cs-primary-lightest);
  border-color: var(--cs-primary);
}

@media (max-width: 480px) {
  html:root:not(#ui) body[data-broker-page="companies"] #addCompanyModal .form-row-3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    margin-bottom: 20px;
  }
  html:root:not(#ui) body[data-broker-page="companies"] #addCompanyModal .form-row-3 > .form-group:first-child {
    grid-column: 1 / -1;
  }
}

/* ==== Ported from the redesign's 99-john-dashboard.css ==== */
/* John: polish the full-width dashboard without changing Mint's page composition.
   Keep the existing company identity and native enrollment drawing; remove card dividers. */

html:root:not(#ui) body[data-broker-page="dashboard"] main.main {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 24px 24px 120px !important;
}
html:root:not(#ui) body[data-broker-page="dashboard"] .main > .dashboard-header:first-child {
  margin: -24px -24px 24px !important;
  padding: 24px !important;
  border: 0 !important;
  background: var(--bg-primary) !important;
}
html:root:not(#ui) body[data-broker-page="dashboard"] .greeting h1 {
  font-size: 24px !important;
  line-height: 32px !important;
}
html:root:not(#ui) body[data-broker-page="dashboard"] .greeting p {
  font-size: 15px !important;
  line-height: 24px !important;
  color: color-mix(in srgb, var(--cs-gray-500) 88%, var(--cs-gray-700)) !important;
}
/* Keep Mint's original gesture, then let it rest while the broker works. */
html:root:not(#ui) body[data-broker-page="dashboard"] .greeting .wave {
  animation-iteration-count: 1 !important;
}
html:root:not(#ui) body[data-broker-page="dashboard"] .section-header {
  margin-bottom: 16px !important;
}
html:root:not(#ui) body[data-broker-page="dashboard"] .section-header h2 {
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 600 !important;
  color: var(--cs-fg) !important;
}
html:root:not(#ui) body[data-broker-page="dashboard"] .section-header > a {
  display: inline-block;
  color: var(--cs-primary-deep) !important;
  text-decoration: none !important;
  transform-origin: right center;
  transition: color 140ms ease, transform 140ms cubic-bezier(.2, .7, .3, 1) !important;
}
html:root:not(#ui) body[data-broker-page="dashboard"] .section-header > a:hover {
  color: var(--cs-tertiary) !important;
  text-decoration: none !important;
  transform: scale(1.025);
}
html:root:not(#ui) body[data-broker-page="dashboard"] .section-header > a:focus-visible {
  outline: 2px solid var(--cs-primary);
  outline-offset: 4px;
  transition: none !important;
}

/* Keep the company preview compact; spacing replaces the decorative divider. */
html:root:not(#ui) body[data-broker-page="dashboard"] .companies-grid {
  gap: 20px !important;
  margin-bottom: 40px !important;
}
html:root:not(#ui) body[data-broker-page="dashboard"] .company-card {
  display: grid !important;
  /* auto: the logo column follows the logo (52px on desktop, Mint's 40px on phones). */
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 6px;
  align-content: center;
  min-height: 128px !important;
  padding: 24px !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius) !important;
  box-shadow: none !important;
  background: var(--bg-primary) !important;
  transition: border-color 140ms ease !important;
}
html:root:not(#ui) body[data-broker-page="dashboard"] .company-card-top {
  display: contents !important;
}
html:root:not(#ui) body[data-broker-page="dashboard"] .company-logo {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
}
html:root:not(#ui) body[data-broker-page="dashboard"] .company-card:hover {
  border-color: var(--cs-gray-400) !important;
  box-shadow: none !important;
  transform: none !important;
}
html:root:not(#ui) body[data-broker-page="dashboard"] .company-card:focus-visible {
  outline: 2px solid var(--cs-primary) !important;
  outline-offset: 3px !important;
  transition: none !important;
}
html:root:not(#ui) body[data-broker-page="dashboard"] .company-card-bottom {
  grid-column: 2;
  grid-row: 2;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
html:root:not(#ui) body[data-broker-page="dashboard"] .company-name {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  line-height: 24px !important;
}
html:root:not(#ui) body[data-broker-page="dashboard"] .employee-count {
  font-size: 14px !important;
  line-height: 22px !important;
  color: color-mix(in srgb, var(--cs-gray-500) 88%, var(--cs-gray-700)) !important;
}

/* The dashboard reuses Mint's Original CSS drawing, with room before the message. */
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > .empty-enrollments {
  padding: 32px 24px !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius) !important;
  background: var(--bg-primary) !important;
  box-shadow: none !important;
}
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > .empty-enrollments::before {
  display: none !important;
}
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > .empty-enrollments > .mg {
  display: flex !important;
  width: 232px;
  max-width: 100%;
  margin: 0 auto 24px !important;
  animation: none !important;
}
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > .empty-enrollments .mg-enroll > .card {
  min-height: 0 !important;
  height: 54px !important;
  padding: 11px 12px !important;
  margin: 0 !important;
}
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > .empty-enrollments > h3 {
  font-size: 18px !important;
  line-height: 26px !important;
  margin-bottom: 8px !important;
}
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > .empty-enrollments > p {
  max-width: 42ch !important;
  font-size: 14px !important;
  line-height: 22px !important;
}

@media (max-width: 1100px) {
  html:root:not(#ui) body[data-broker-page="dashboard"] .dashboard-header {
    flex-direction: column;
    gap: 20px;
  }
  html:root:not(#ui) body[data-broker-page="dashboard"] .onboard-box {
    align-items: flex-start;
    text-align: left;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  html:root:not(#ui) body[data-broker-page="dashboard"] main.main {
    padding: 24px 16px 112px !important;
  }
  html:root:not(#ui) body[data-broker-page="dashboard"] .main > .dashboard-header:first-child {
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  html:root:not(#ui) body[data-broker-page="dashboard"] .section-header {
    align-items: baseline;
    gap: 12px;
  }
  html:root:not(#ui) body[data-broker-page="dashboard"] .section-header h2 {
    font-size: 18px !important;
    line-height: 26px !important;
  }
  html:root:not(#ui) body[data-broker-page="dashboard"] .company-card {
    min-height: 128px !important;
    padding: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:root:not(#ui) body[data-broker-page="dashboard"] .section-header > a {
    transition: none !important;
    transform: none !important;
  }
  html:root:not(#ui) body[data-broker-page="dashboard"] .greeting .wave {
    animation: none !important;
  }
  html:root:not(#ui) body[data-broker-page="dashboard"] .company-card {
    transition: none !important;
  }
}

/* ==== Ported from the redesign's 99-john-dialog-chrome.css ==== */
/* John: floating workspace tools must not cover dialog controls on smaller screens.
   The shared focus controller owns this state for the native overlay variants. */
html:root body[data-broker-page="library"] #uploadZone:focus-visible {
  outline: 2px solid var(--cs-primary);
  outline-offset: 3px;
}

/* ==== Ported from the redesign's 99-john-email-contacts.css ==== */
/* John: Contacts is one workspace with a list sidebar, not nested cards. */

html:root:not(#ui) body[data-broker-page="emails"] .em-contacts {
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0 !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius) !important;
  background: var(--bg-primary) !important;
  box-shadow: none !important;
  overflow: hidden;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-contacts > .card,
html:root:not(#ui) body[data-broker-page="emails"] .em-contacts [data-main] > .card {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-contacts > .card {
  border-right: 1px solid var(--cs-border) !important;
  align-self: stretch;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-contacts > .card > .card-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 76px;
  padding: 16px !important;
  border: 0 !important;
  background: transparent !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-contacts > .card > .card-header > .card-actions {
  width: auto !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-contacts [data-main] > .card > .card-header {
  min-height: 76px;
  padding: 16px 24px !important;
  background: transparent !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-contacts .card-title {
  color: var(--cs-gray-700) !important;
  font-size: 15px !important;
  line-height: 22px !important;
  font-weight: 600 !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-contacts .card-title > i {
  display: none !important;
}

/* The list name is the navigation target; its selection stays a single quiet row. */
html:root:not(#ui) body[data-broker-page="emails"] .em-list-nav {
  padding: 0 12px 20px !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-list-item {
  min-height: 44px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: calc(var(--cs-radius-md) / 2) !important;
  color: var(--cs-gray-700) !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-list-item.active {
  background: var(--cs-gray-100) !important;
  color: var(--cs-primary-deep) !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-list-item .name {
  min-height: 44px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  color: inherit !important;
  font-size: 14px !important;
  line-height: 22px !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-list-item.active .name {
  font-weight: 600 !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-list-item .name:focus-visible {
  outline: 2px solid var(--cs-primary) !important;
  outline-offset: -2px !important;
  transition: none !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-list-nav > .em-muted {
  padding: 14px 12px 0 !important;
  max-width: 50ch;
  color: color-mix(in srgb, var(--cs-gray-500) 88%, var(--cs-gray-700)) !important;
  font-size: 13px !important;
  line-height: 20px !important;
}

/* Creating a list is secondary to working with the selected contacts. */
html:root:not(#ui) body[data-broker-page="emails"] .em-contacts [data-add-list] {
  min-height: 44px !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--cs-primary-deep) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: transform 140ms cubic-bezier(.2, .7, .3, 1), color 140ms ease !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-contacts [data-add-list]:hover {
  color: var(--cs-tertiary) !important;
  transform: scale(1.025) !important;
  text-decoration: none !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-contacts [data-add-list]:focus-visible {
  outline: 2px solid var(--cs-primary) !important;
  outline-offset: 2px !important;
  transition: none !important;
  transform: none !important;
}

@media (max-width: 900px) {
  html:root:not(#ui) body[data-broker-page="emails"] .em-contacts {
    grid-template-columns: minmax(0, 1fr);
  }
  html:root:not(#ui) body[data-broker-page="emails"] .em-contacts > .card {
    border-right: 0 !important;
    border-bottom: 1px solid var(--cs-border) !important;
  }
  html:root:not(#ui) body[data-broker-page="emails"] .em-contacts [data-main] > .card > .card-header {
    padding: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:root:not(#ui) body[data-broker-page="emails"] .em-contacts [data-add-list] {
    transition: none !important;
  }
  html:root:not(#ui) body[data-broker-page="emails"] .em-contacts [data-add-list]:hover {
    transform: none !important;
  }
}

/* ==== Ported from the redesign's 99-john-email-overview.css ==== */
/* John: a quiet delivery notice, clear actions, and an intentional email empty state. */

/* A contained notice keeps delivery status separate from the email workspace. */
html:root:not(#ui) body[data-broker-page="emails"] .em-delivery-notice {
  gap: 16px !important;
  padding: 10px 18px !important;
  margin-bottom: 16px !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-md) !important;
  background: var(--bg-primary) !important;
  box-shadow: none !important;
  color: var(--cs-gray-700) !important;
  font-size: 14px !important;
  line-height: 22px !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-delivery-notice > [role="status"] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-delivery-notice > [role="status"]::before {
  content: "";
  flex: 0 0 18px;
  height: 18px;
  background: var(--cs-primary-deep);
  mask: url("/icons/mint-v3/pause.svg") center / contain no-repeat;
  margin-top: 2px;
}

/* Secondary routes remain available, with one filled action in the overview. */
html:root:not(#ui) body[data-broker-page="emails"] .em-delivery-notice > button,
html:root:not(#ui) body[data-broker-page="emails"] .em-start-quiet .em-start-actions > .btn-secondary {
  min-height: 44px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--cs-primary-deep) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transform: none !important;
  transition: transform 140ms cubic-bezier(.2, .7, .3, 1), color 140ms ease !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-delivery-notice > button:hover,
html:root:not(#ui) body[data-broker-page="emails"] .em-start-quiet .em-start-actions > .btn-secondary:hover {
  color: var(--cs-tertiary) !important;
  text-decoration: none !important;
  transform: scale(1.025) !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-delivery-notice > button:focus-visible,
html:root:not(#ui) body[data-broker-page="emails"] .em-start-quiet .em-start-actions > .btn-secondary:focus-visible {
  outline: 2px solid var(--cs-primary) !important;
  outline-offset: 2px !important;
  transition: none !important;
  transform: none !important;
}
html:root:not(#ui) body[data-broker-page="emails"]:has(#tab-overview.active) #newEmailBtn {
  background: var(--bg-primary) !important;
  background-image: none !important;
  border: 1px solid var(--cs-border) !important;
  box-shadow: var(--cs-shadow-xs) !important;
  color: var(--cs-primary-deep) !important;
}
html:root:not(#ui) body[data-broker-page="emails"]:has(#tab-overview.active) #newEmailBtn:hover {
  background: var(--cs-gray-50) !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-overview-workspace .em-start-quiet {
  padding: 24px !important;
  margin: 0 0 16px !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius) !important;
  background: var(--bg-primary) !important;
  box-shadow: none !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-start-quiet .em-section-intro {
  margin-bottom: 16px !important;
  max-width: 72ch;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-start-quiet h2 {
  margin: 0 0 8px !important;
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 600 !important;
  color: var(--cs-gray-700) !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-start-quiet .em-section-intro > p {
  font-size: 14px !important;
  line-height: 22px !important;
  color: color-mix(in srgb, var(--cs-gray-500) 88%, var(--cs-gray-700)) !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-start-quiet .em-start-actions {
  gap: 8px 16px !important;
}

/* These rows are decorative and aria-hidden, not email records or a loading state. */
html:root:not(#ui) body[data-broker-page="emails"] .em-ghost-card .em-table-wrap {
  display: none !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-ghost-card .card-header {
  padding: 20px 24px 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-ghost-card .card-title {
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 600 !important;
  color: var(--cs-gray-700) !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-ghost-card .card-title > i {
  display: none !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-ghost-card .card-body {
  padding: 40px 24px 48px !important;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-ghost-note {
  max-width: 52ch;
  margin: 0 auto !important;
  font-size: 14px !important;
  line-height: 23px !important;
  color: color-mix(in srgb, var(--cs-gray-500) 88%, var(--cs-gray-700)) !important;
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 600px) {
  html:root:not(#ui) body[data-broker-page="emails"] .em-delivery-notice {
    gap: 0 10px !important;
    padding: 14px 16px 6px !important;
  }
  html:root:not(#ui) body[data-broker-page="emails"] .em-delivery-notice > button {
    margin-left: 22px;
  }
  html:root:not(#ui) body[data-broker-page="emails"] .em-overview-workspace .em-start-quiet {
    padding: 20px 16px !important;
  }
  html:root:not(#ui) body[data-broker-page="emails"] .em-start-quiet .em-start-actions > .btn-secondary {
    width: auto !important;
    justify-content: flex-start !important;
  }
  html:root:not(#ui) body[data-broker-page="emails"] .em-ghost-card .card-body {
    padding: 32px 20px 40px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:root:not(#ui) body[data-broker-page="emails"] .em-delivery-notice > button,
  html:root:not(#ui) body[data-broker-page="emails"] .em-start-quiet .em-start-actions > .btn-secondary {
    transition: none !important;
  }
  html:root:not(#ui) body[data-broker-page="emails"] .em-delivery-notice > button:hover,
  html:root:not(#ui) body[data-broker-page="emails"] .em-start-quiet .em-start-actions > .btn-secondary:hover {
    transform: none !important;
  }
}

/* ==== Ported from the redesign's 99-john-enrollment-dialogs.css ==== */
/* John: keep every extension choice and date inside the existing dialog.
   Dates, optional effective date and actions share one compact form hierarchy. */

html:root:not(#ui) body[data-broker-page="enrollments"] #extendModal .modal {
  width: calc(100vw - 32px);
  max-width: 480px;
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
}
html:root:not(#ui) body[data-broker-page="enrollments"] #extendModal .modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 24px 24px;
}
html:root:not(#ui) body[data-broker-page="enrollments"] #extendModal .modal-header,
html:root:not(#ui) body[data-broker-page="enrollments"] #extendModal .modal-footer {
  flex-shrink: 0;
}
html:root:not(#ui) body[data-broker-page="enrollments"] #extendModal .modal-close {
  width: 36px;
  height: 36px;
  color: var(--cs-gray-500);
}
html:root:not(#ui) body[data-broker-page="enrollments"] #extendModal .quick-extend-btns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}
html:root:not(#ui) body[data-broker-page="enrollments"] #extendModal .quick-extend-btn {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 2px !important;
  min-width: 0;
  min-height: 64px !important;
  padding: 8px !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-md) !important;
  box-shadow: none !important;
}
html:root:not(#ui) body[data-broker-page="enrollments"] #extendModal .quick-extend-btn.selected {
  background: var(--cs-primary-lightest) !important;
  border-color: var(--cs-primary) !important;
}
html:root:not(#ui) body[data-broker-page="enrollments"] #extendModal .quick-extend-btn span {
  font-size: 14px;
  color: var(--cs-gray-700);
}
html:root:not(#ui) body[data-broker-page="enrollments"] #extendModal .quick-extend-btn small {
  font-size: 12px !important;
  color: var(--cs-gray-500) !important;
}
html:root:not(#ui) body[data-broker-page="enrollments"] #extendModal .date-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
html:root:not(#ui) body[data-broker-page="enrollments"] #extendModal .date-input-group,
html:root:not(#ui) body[data-broker-page="enrollments"] #extendModal .date-input {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}
html:root:not(#ui) body[data-broker-page="enrollments"] #extendModal .effective-date-picker {
  padding: 0;
  border: 0;
  background: none;
}
html:root:not(#ui) body[data-broker-page="enrollments"] #extendModal .extend-option {
  border-radius: var(--cs-radius-md);
  background: var(--cs-gray-50);
}
html:root:not(#ui) body[data-broker-page="enrollments"] #extendModal #effectiveDateHint {
  font-size: 12px !important;
  color: var(--cs-gray-500) !important;
}
@media (max-width: 480px) {
  html:root:not(#ui) body[data-broker-page="enrollments"] #extendModal .modal {
    max-height: calc(100dvh - 24px);
  }
  html:root:not(#ui) body[data-broker-page="enrollments"] #extendModal .date-inputs {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==== Ported from the redesign's 99-john-enrollment-search.css ==== */
/* John: enrollment search uses the same white field as Companies and Employees. */

html:root:not(#ui) body[data-broker-page="enrollments"] .search-box > input {
  height: 44px !important;
  padding: 0 12px 0 42px !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius) !important;
  background: var(--bg-primary) !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--cs-gray-700) !important;
  font-size: 14px !important;
}
html:root:not(#ui) body[data-broker-page="enrollments"] .search-box > input:focus {
  border-color: var(--cs-gray-500) !important;
}
html:root:not(#ui) body[data-broker-page="enrollments"] .search-box > input::placeholder {
  color: color-mix(in srgb, var(--cs-gray-500) 88%, var(--cs-gray-700)) !important;
  opacity: 1;
}
html:root:not(#ui) body[data-broker-page="enrollments"] .search-box > i {
  color: var(--cs-gray-500) !important;
}
html:root:not(#ui) body[data-broker-page="enrollments"] .search-box:focus-within > i {
  color: var(--cs-primary) !important;
}
@media (max-width: 480px) {
  html:root:not(#ui) body[data-broker-page="enrollments"] .search-box > input {
    font-size: 16px !important;
  }
}

/* ==== Ported from the redesign's 99-john-library-dialogs.css ==== */
/* John: finish Library's native upload, packet, email, link and preview dialogs.
   Preserve the form steps and document canvas; align controls and keep actions reachable. */

/* mint-buttons-v1.css paints every modal footer as flex, including upload step one. */
html:root:not(#ui) body[data-broker-page="library"] #uploadModal #modalFooter:not(.show) {
  display: none;
}
html:root:not(#ui) body[data-broker-page="library"] #uploadModal .modal-body {
  min-height: 0;
}

html:root:not(#ui) body[data-broker-page="library"] #uploadModal > .modal,
html:root:not(#ui) body[data-broker-page="library"] .generate-modal-content,
html:root:not(#ui) body[data-broker-page="library"] .send-email-modal,
html:root:not(#ui) body[data-broker-page="library"] .preview-modal-box {
  border-radius: var(--cs-radius-md) !important;
}
html:root:not(#ui) body[data-broker-page="library"] .send-email-footer {
  border-radius: 0 0 var(--cs-radius-md) var(--cs-radius-md);
}

/* The native inputs range from 41px to 46px beside 44px selects. */
html:root:not(#ui) body[data-broker-page="library"] #uploadModal .form-input,
html:root:not(#ui) body[data-broker-page="library"] #uploadModal .form-select,
html:root:not(#ui) body[data-broker-page="library"] #uploadModal .btn-back,
html:root:not(#ui) body[data-broker-page="library"] #uploadModal .btn-upload,
html:root:not(#ui) body[data-broker-page="library"] .generate-modal .form-input,
html:root:not(#ui) body[data-broker-page="library"] .generate-modal .form-select,
html:root:not(#ui) body[data-broker-page="library"] .send-email-modal input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html:root:not(#ui) body[data-broker-page="library"] .send-email-modal select,
html:root:not(#ui) body[data-broker-page="library"] #searchFormsLibrary {
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  border-radius: var(--cs-radius-md) !important;
}

html:root:not(#ui) body[data-broker-page="library"] #sendEmailModal .password-toggle-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  right: 4px;
  padding: 0;
  border-radius: var(--cs-radius-md);
}
html:root:not(#ui) body[data-broker-page="library"] #emailPassword {
  padding-right: 44px !important;
}

/* Generated helper text has inline 10.5/11px sizes. Preserve the compact hierarchy at 12px. */
html:root:not(#ui) body[data-broker-page="library"] #packetFormCount,
html:root:not(#ui) body[data-broker-page="library"] #packetFormsList + div,
html:root:not(#ui) body[data-broker-page="library"] .packet-form-item > div:last-child > div + div,
html:root:not(#ui) body[data-broker-page="library"] .send-email-field > label,
html:root:not(#ui) body[data-broker-page="library"] .send-email-field > label > span,
html:root:not(#ui) body[data-broker-page="library"] .send-email-doc > span,
html:root:not(#ui) body[data-broker-page="library"] .send-email-field > div:has(> select) + div,
html:root:not(#ui) body[data-broker-page="library"] #sendEmailAccessCode + div,
html:root:not(#ui) body[data-broker-page="library"] #secureLinkAccessCode + div,
html:root:not(#ui) body[data-broker-page="library"] #generateModal .form-label,
html:root:not(#ui) body[data-broker-page="library"] #generateModal .company-select-meta {
  font-size: max(12px, 0.8rem) !important;
}

/* Packet's generated, classless buttons miss the shared reference material variables. */
html:root:not(#ui) body[data-broker-page="library"] #createPacketModal .send-email-footer > button {
  height: 44px;
  border-radius: var(--cs-radius-md) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html:root:not(#ui) body[data-broker-page="library"] #createPacketModal .send-email-footer > button:first-child {
  background: white !important;
  border: 1px solid var(--cs-border) !important;
  color: var(--cs-gray-700) !important;
}
html:root:not(#ui) body[data-broker-page="library"] #createPacketModal .send-email-footer > button:first-child:hover {
  background: var(--cs-gray-50) !important;
}
html:root:not(#ui) body[data-broker-page="library"] #createPacketModal .send-email-footer > button:last-child:hover {
  background: var(--cs-primary-hover) !important;
}

/* Recipient fields are the last row: their lookup opens into the available space above. */
html:root:not(#ui) body[data-broker-page="library"] #packetContactSuggestions,
html:root:not(#ui) body[data-broker-page="library"] #packetEmailSuggestions {
  top: auto;
  bottom: calc(100% + 4px);
  max-height: min(280px, 40dvh) !important;
  box-shadow: var(--cs-shadow-md);
}
html:root:not(#ui) body[data-broker-page="library"] .send-email-modal .contact-suggestion-meta,
html:root:not(#ui) body[data-broker-page="library"] .generate-modal .contact-suggestion-meta,
html:root:not(#ui) body[data-broker-page="library"] .contact-suggestion-name > span,
html:root:not(#ui) body[data-broker-page="library"] .contact-suggestion-company {
  font-size: 12px !important;
}
html:root:not(#ui) body[data-broker-page="library"] #createPacketModal .contact-suggestions > div:not(.contact-suggestion) {
  font-size: 12px !important;
  color: var(--cs-gray-500) !important;
}
/* Native DM text uses bright amber on pale amber; keep its hue with readable dark ink. */
html:root:not(#ui) body[data-broker-page="library"] #createPacketModal .contact-suggestion-name > span[style*="color: #d97706"] {
  color: var(--cs-warn-fg) !important;
}

/* Keep Mint's folder drawing and hover cue, with a quieter flat finish. */
html:root:not(#ui) body[data-broker-page="library"] #uploadZone {
  border: 1px dashed var(--cs-gray-400);
  border-radius: var(--cs-radius-md);
  background: var(--cs-gray-50);
}
html:root:not(#ui) body[data-broker-page="library"] #uploadZone:hover,
html:root:not(#ui) body[data-broker-page="library"] #uploadZone.dragover {
  background: var(--cs-primary-lightest);
  border-color: var(--cs-primary);
}
html:root:not(#ui) body[data-broker-page="library"] #uploadZone .folder-icon {
  zoom: 0.65;
  margin-bottom: 24px;
}
html:root:not(#ui) body[data-broker-page="library"] #uploadZone .folder-back,
html:root:not(#ui) body[data-broker-page="library"] #uploadZone .folder-tab {
  background: var(--cs-primary-deep);
  box-shadow: none;
}
html:root:not(#ui) body[data-broker-page="library"] #uploadZone .folder-front {
  background: var(--cs-primary);
  box-shadow: none;
}
html:root:not(#ui) body[data-broker-page="library"] #uploadModal .file-preview {
  background: var(--cs-gray-50);
  border-radius: var(--cs-radius-md);
}
html:root:not(#ui) body[data-broker-page="library"] #uploadModal .file-preview-icon {
  box-shadow: none;
  border-radius: var(--cs-radius-md);
}

/* Generate and generic document email lacked the existing phone dialog clearance. */
html:root:not(#ui) body[data-broker-page="library"] #generateModal,
html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(#sendEmailRecipient) {
  padding: 24px;
  box-sizing: border-box;
  overflow: auto;
}
html:root:not(#ui) body[data-broker-page="library"] #generateModal > .generate-modal-content,
html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(#sendEmailRecipient) > .send-email-modal {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 48px);
  overflow: hidden;
}
html:root:not(#ui) body[data-broker-page="library"] #generateModal .generate-modal-body,
html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(#sendEmailRecipient) .send-email-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html:root:not(#ui) body[data-broker-page="library"] #generateModal .generate-modal-header,
html:root:not(#ui) body[data-broker-page="library"] #generateModal .generate-modal-footer,
html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(#sendEmailRecipient) .send-email-header,
html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(#sendEmailRecipient) .send-email-footer {
  flex-shrink: 0;
}

/* Reuse the Library filter's browser-owned menu treatment for dialog selects.
   Short native option labels fit their full-width fields; unsupported browsers keep their native picker. */
@supports (appearance: base-select) {
  html:root:not(#ui) body[data-broker-page="library"] #uploadModal select,
  html:root:not(#ui) body[data-broker-page="library"] .send-email-modal select {
    appearance: base-select !important;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
  }
  html:root:not(#ui) body[data-broker-page="library"] #uploadModal select::picker-icon,
  html:root:not(#ui) body[data-broker-page="library"] .send-email-modal select::picker-icon {
    display: none;
  }
  html:root:not(#ui) body[data-broker-page="library"] #uploadModal select::picker(select),
  html:root:not(#ui) body[data-broker-page="library"] .send-email-modal select::picker(select) {
    appearance: base-select !important;
    width: anchor-size(width);
    min-width: 180px;
    max-width: calc(100vw - 24px);
    max-height: min(360px, calc(100dvh - 24px));
    margin-block: 4px;
    padding: 4px;
    overflow: auto;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-md);
    background: white;
    color: var(--cs-gray-700);
    box-shadow: var(--cs-shadow-md);
    font-family: inherit;
    font-size: 14px;
  }
  html:root:not(#ui) body[data-broker-page="library"] #uploadModal select > option,
  html:root:not(#ui) body[data-broker-page="library"] .send-email-modal select > option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--cs-gray-700);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    white-space: normal;
    outline: none;
    cursor: pointer;
  }
  html:root:not(#ui) body[data-broker-page="library"] #uploadModal select > option:checked,
  html:root:not(#ui) body[data-broker-page="library"] .send-email-modal select > option:checked {
    background: var(--cs-gray-100);
    color: var(--cs-primary-deep);
  }
  html:root:not(#ui) body[data-broker-page="library"] #uploadModal select > option:hover,
  html:root:not(#ui) body[data-broker-page="library"] #uploadModal select > option:focus,
  html:root:not(#ui) body[data-broker-page="library"] .send-email-modal select > option:hover,
  html:root:not(#ui) body[data-broker-page="library"] .send-email-modal select > option:focus {
    background: var(--cs-outline);
  }
  html:root:not(#ui) body[data-broker-page="library"] #uploadModal select > option::checkmark,
  html:root:not(#ui) body[data-broker-page="library"] .send-email-modal select > option::checkmark {
    content: "";
    visibility: hidden;
    order: 1;
    flex: none;
    width: 16px;
    height: 16px;
    margin-left: auto;
    background: var(--cs-primary);
    mask: url("/icons/mint-v3/check.svg") center / contain no-repeat;
  }
  html:root:not(#ui) body[data-broker-page="library"] #uploadModal select > option:checked::checkmark,
  html:root:not(#ui) body[data-broker-page="library"] .send-email-modal select > option:checked::checkmark {
    visibility: visible;
  }
}

@media (max-width: 768px) {
  /* All of these backdrops already sit above the broker's bottom navigation. */
  html:root:not(#ui) body[data-broker-page="library"] #uploadModal,
  html:root:not(#ui) body[data-broker-page="library"] #createPacketModal {
    padding: 12px !important;
  }
  html:root:not(#ui) body[data-broker-page="library"] #uploadModal > .modal,
  html:root:not(#ui) body[data-broker-page="library"] #createPacketModal > .send-email-modal {
    max-height: calc(100dvh - 24px) !important;
  }
  html:root:not(#ui) body[data-broker-page="library"] #generateModal,
  html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(#sendEmailRecipient) {
    padding: 12px;
  }
  html:root:not(#ui) body[data-broker-page="library"] #generateModal > .generate-modal-content,
  html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(#sendEmailRecipient) > .send-email-modal {
    max-height: calc(100dvh - 24px);
  }
}

/* Reuse the employee and DM Illustrator artwork from the role avatars in base.css.
   Native role badges identify the row; real company/contact images are left intact. */
html:root:not(#ui) body[data-broker-page="library"] .contact-suggestion:not(.add-custom) .contact-suggestion-avatar:not(:has(img)) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--cs-radius-md) !important;
  background: var(--cs-slate-100) !important;
  color: var(--cs-primary-deep) !important;
  font-size: 0 !important;
  box-shadow: none !important;
}
html:root:not(#ui) body[data-broker-page="library"] .contact-suggestion:not(.add-custom) .contact-suggestion-avatar:not(:has(img))::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%0D%0A%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.8.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%209.03%20Build%200)%20%20--%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Mint__x2F__employee__x2F__24px%22%0D%0A%09%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2024%2024%22%0D%0A%09%20enable-background%3D%22new%200%200%2024%2024%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%2212%22%20cy%3D%227.25%22%20r%3D%223.5%22%2F%3E%0D%0A%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M4.5%2C19.5c0-4%2C3.5-6%2C7.5-6s7.5%2C2%2C7.5%2C6c0%2C0.9-0.6%2C1.5-1.5%2C1.5H6C5.1%2C21%2C4.5%2C20.4%2C4.5%2C19.5z%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A") center / contain no-repeat;
}
html:root:not(#ui) body[data-broker-page="library"] .contact-suggestion[data-cs-contact-role="dm"] .contact-suggestion-avatar:not(:has(img))::before,
html:root:not(#ui) body[data-broker-page="library"] .contact-suggestion .contact-suggestion-avatar[style*="color: #d97706"]:not(:has(img))::before {
  mask: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%0D%0A%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.8.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%209.03%20Build%200)%20%20--%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Mint__x2F__decision-maker__x2F__24px%22%0D%0A%09%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2024%2024%22%0D%0A%09%20enable-background%3D%22new%200%200%2024%2024%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%2211%22%20cy%3D%227.25%22%20r%3D%223.5%22%2F%3E%0D%0A%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M3.5%2C19.5c0-4%2C3.5-6%2C7.5-6c1.4%2C0%2C2.7%2C0.2%2C3.9%2C0.7c-2.05%2C1.63-2.65%2C4.49-1.4%2C6.8H5C4.1%2C21%2C3.5%2C20.4%2C3.5%2C19.5z%0D%0A%09%22%2F%3E%0D%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%23FFFFFF%22%20d%3D%22M22%2C18.5c0%2C2.21-1.79%2C4-4%2C4s-4-1.79-4-4s1.79-4%2C4-4%0D%0A%09S22%2C16.29%2C22%2C18.5z%20M15%2C18.6l2.1%2C2.1l3.6-3.6l-1-1l-2.6%2C2.6L16%2C17.6L15%2C18.6z%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A") center / contain no-repeat;
}

/* Generate uses the same company fallback as the dashboard and record switchers.
   Keep the native logo size and uploaded-image branch intact. */
html:root:not(#ui) body[data-broker-page="library"] #generateModal .company-select-logo:not(:has(img)) {
  background: var(--cs-slate-100);
  border-radius: var(--cs-radius-md);
  color: var(--cs-primary-deep);
  font-size: 0;
}
html:root:not(#ui) body[data-broker-page="library"] #generateModal .company-select-logo:not(:has(img))::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Mint__x2F__company_identity__x2F__24px%22%0D%0A%09%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2024%2024%22%0D%0A%09%20enable-background%3D%22new%200%200%2024%2024%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpolyline%20id%3D%22Primary_building%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20points%3D%22%0D%0A%094.5%2C20.5%204.5%2C5%205.5%2C4%2014.5%2C4%2015.5%2C5%2015.5%2C20.5%20%22%2F%3E%0D%0A%3Cpolyline%20id%3D%22Side_wing%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20points%3D%22%0D%0A%0915.5%2C10%2019.5%2C10%2020.5%2C11%2020.5%2C20.5%20%22%2F%3E%0D%0A%3Cline%20id%3D%22Ground%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%223%22%20y1%3D%2220.5%22%20x2%3D%2222%22%20y2%3D%2220.5%22%2F%3E%0D%0A%3Cpolyline%20id%3D%22Entrance%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20points%3D%22%0D%0A%098.5%2C20.5%208.5%2C16%2011.5%2C16%2011.5%2C20.5%20%22%2F%3E%0D%0A%3Cline%20id%3D%22Upper_left_window%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%228%22%20y1%3D%228%22%20x2%3D%228%22%20y2%3D%229%22%2F%3E%0D%0A%3Cline%20id%3D%22Upper_right_window%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2212%22%20y1%3D%228%22%20x2%3D%2212%22%20y2%3D%229%22%2F%3E%0D%0A%3Cline%20id%3D%22Lower_left_window%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%228%22%20y1%3D%2212%22%20x2%3D%228%22%20y2%3D%2213%22%2F%3E%0D%0A%3Cline%20id%3D%22Lower_right_window%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2212%22%20y1%3D%2212%22%20x2%3D%2212%22%20y2%3D%2213%22%2F%3E%0D%0A%3C%2Fsvg%3E") center / contain no-repeat;
}

/* ==== Ported from the redesign's 99-john-library-helpers.css ==== */
/* John: finish Library's three confirmations and the native Packet Details helper.
   Keep the existing content and actions; restore danger meaning and readable packet rows. */

html:root:not(#ui) body[data-broker-page="library"] .confirm-modal-overlay {
  padding: 24px;
  box-sizing: border-box;
  overflow-y: auto;
  transition-property: opacity, visibility;
}
html:root:not(#ui) body[data-broker-page="library"] .confirm-modal {
  width: 400px;
  max-width: 100%;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  box-shadow: var(--cs-shadow-lg);
  transform: none;
  transition: none;
}
html:root:not(#ui) body[data-broker-page="library"] .confirm-modal-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--cs-radius-md);
  background: var(--cs-bad-bg);
}
html:root:not(#ui) body[data-broker-page="library"] .confirm-modal-icon i {
  font-size: 18px;
  color: var(--cs-bad-fg);
}
html:root:not(#ui) body[data-broker-page="library"] #voidModal .confirm-modal-icon {
  background: var(--cs-warn-bg) !important;
}
html:root:not(#ui) body[data-broker-page="library"] #voidModal .confirm-modal-icon i {
  color: var(--cs-warn-fg) !important;
}
html:root:not(#ui) body[data-broker-page="library"] .confirm-modal-title {
  color: var(--cs-gray-700);
}
html:root:not(#ui) body[data-broker-page="library"] .confirm-modal-message {
  font-size: max(12px, 0.9rem);
  color: var(--cs-gray-600);
}

/* The native and theme button maps classify .confirm-modal-confirm as a teal primary. */
html:root:not(#ui) body[data-broker-page="library"] #confirmModal .confirm-modal-confirm,
html:root:not(#ui) body[data-broker-page="library"] #deleteDraftModal .confirm-modal-confirm {
  --jb-brand: var(--cs-bad-strong);
  --jb-primary-hover-fill: var(--cs-bad-fg);
}
html:root:not(#ui) body[data-broker-page="library"] #voidModal .confirm-modal-confirm {
  --jb-brand: var(--cs-warn-fg);
  --jb-primary-hover-fill: var(--cs-warn-fg);
}

/* Packet Details is the only dynamic email-style helper with a folder in its heading. */
html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(.send-email-header .fa-folder-open) {
  padding: 24px;
  box-sizing: border-box;
  overflow-y: auto;
}
html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(.send-email-header .fa-folder-open) .send-email-modal {
  display: flex;
  flex-direction: column;
  width: 420px;
  max-width: 100% !important;
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  border: 1px solid var(--cs-border);
  box-shadow: var(--cs-shadow-lg);
}
html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(.send-email-header .fa-folder-open) .send-email-header,
html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(.send-email-header .fa-folder-open) .send-email-footer {
  flex-shrink: 0;
}
html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(.send-email-header .fa-folder-open) .send-email-header h3 {
  min-width: 0;
  overflow-wrap: anywhere;
}
html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(.send-email-header .fa-folder-open) .send-email-header .fa-folder-open {
  color: var(--cs-gray-600) !important;
}
html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(.send-email-header .fa-folder-open) .send-email-close {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
}
html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(.send-email-header .fa-folder-open) .send-email-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
}
html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(.send-email-header .fa-folder-open) .send-email-body > div:first-child > div:first-child,
html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(.send-email-header .fa-folder-open) .send-email-body > div:nth-child(2) {
  font-size: max(12px, 0.8rem) !important;
  color: var(--cs-gray-600) !important;
}
html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(.send-email-header .fa-folder-open) .send-email-body > div:first-child > div:last-child {
  font-size: max(12px, 0.85rem) !important;
  color: var(--cs-gray-600) !important;
}
html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(.send-email-header .fa-folder-open) .send-email-body > div:last-child > div {
  min-height: 44px;
}
html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(.send-email-header .fa-folder-open) .send-email-body > div:last-child > div > i {
  flex-shrink: 0;
}
html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(.send-email-header .fa-folder-open) .send-email-body > div:last-child > div > span:first-of-type {
  min-width: 0;
  font-size: max(12px, 0.85rem) !important;
}
html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(.send-email-header .fa-folder-open) .send-email-body > div:last-child > div > span:last-child {
  flex-shrink: 0;
  font-size: max(12px, 0.75rem) !important;
  color: var(--cs-gray-600) !important;
}

@media (max-width: 768px) {
  html:root:not(#ui) body[data-broker-page="library"] .confirm-modal-overlay,
  html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(.send-email-header .fa-folder-open) {
    padding: 12px;
  }
  html:root:not(#ui) body[data-broker-page="library"] .confirm-modal,
  html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(.send-email-header .fa-folder-open) .send-email-modal {
    max-height: calc(100dvh - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:root:not(#ui) body[data-broker-page="library"] .confirm-modal-overlay {
    transition: none;
  }
  html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(.send-email-header .fa-folder-open),
  html:root:not(#ui) body[data-broker-page="library"] .send-email-modal-overlay:has(.send-email-header .fa-folder-open) .send-email-modal {
    animation: none;
  }
}

/* ==== Ported from the redesign's 99-john-loading-layout.css ==== */
/* John: keep the actual reading area in place while Mint fetches its data.
   Reuse the native loading lifecycle and table cells; no synthetic wait or cached records. */

/* Library panels share a floor, so empty, waiting and short results never collapse the card. */
html:root:not(#ui) body[data-broker-page="library"] .content > .tab-content {
  min-height: 486px;
}
html:root:not(#ui) body[data-broker-page="library"] .docs-list table {
  table-layout: fixed;
}
html:root:not(#ui) body[data-broker-page="library"] .docs-list th:first-child {
  width: 28%;
}
html:root:not(#ui) body[data-broker-page="library"] .docs-list th:last-child {
  /* Three 36px row actions (download, send, more) and their gaps, plus the cell padding. */
  width: 164px;
}
/* Agency rows have four (view, download, email, more): 4 x 36 + 3 x 4 + 48. */
html:root:not(#ui) body[data-broker-page="library"] #tab-agency .docs-list th:last-child {
  width: 204px;
}
html:root:not(#ui) body[data-broker-page="library"] .docs-list td:has(> .loading-state) {
  padding: 0 !important;
}
html:root:not(#ui) body[data-broker-page="library"] .docs-list .loading-state {
  position: relative;
  height: 362px;
  padding: 0 !important;
  display: block;
  container-type: inline-size;
}
html:root:not(#ui) body[data-broker-page="library"] .docs-list .loading-spinner {
  display: none;
}
/* Keep the existing loading announcement available without a centered spinner replacing rows. */
html:root:not(#ui) body[data-broker-page="library"] .docs-list .loading-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
html:root:not(#ui) body[data-broker-page="library"] .docs-list .loading-state::before {
  content: "";
  display: block;
  height: min(320px, 100%);
  background: var(--john-sk-row) 24px 0 / 19% 64px repeat-y,
              var(--john-sk-row) calc(28cqw + 24px) 0 / 9% 64px repeat-y,
              var(--john-sk-row) calc(42.4cqw + 11.2px) 0 / 8% 64px repeat-y,
              var(--john-sk-row) calc(56.8cqw - 1.6px) 0 / 5% 64px repeat-y,
              var(--john-sk-row) calc(71.2cqw - 14.4px) 0 / 8% 64px repeat-y,
              var(--john-sk-row) calc(85.6cqw - 27.2px) 0 / 7% 64px repeat-y;
  mask-image: linear-gradient(to bottom, var(--cs-fg) 30%, transparent 100%);
}
html:root:not(#ui) body[data-broker-page="library"] #tab-sent .loading-state::before {
  background-position: 24px 0, calc(28cqw + 24px) 0, calc(52cqw + 2.667px) 0, calc(76cqw - 18.667px) 0;
  background-size: 19% 64px, 16% 64px, 10% 64px, 8% 64px;
  background-image: var(--john-sk-row), var(--john-sk-row), var(--john-sk-row), var(--john-sk-row);
}
html:root:not(#ui) body[data-broker-page="library"] #tab-agency .loading-state::before {
  background-position: 24px 0, calc(28cqw + 24px) 0, calc(64cqw - 8px) 0;
  background-size: 19% 64px, 14% 64px, 18% 64px;
  background-image: var(--john-sk-row), var(--john-sk-row), var(--john-sk-row);
}
html:root:not(#ui) body[data-broker-page="library"] #tab-drafts .loading-state::before,
html:root:not(#ui) body[data-broker-page="library"] #tab-packets .loading-state::before {
  background-position: 24px 0, calc(28cqw + 24px) 0, calc(46cqw + 8px) 0, calc(64cqw - 8px) 0, calc(82cqw - 24px) 0;
  background-size: 19% 64px, 10% 64px, 9% 64px, 8% 64px, 9% 64px;
  background-image: var(--john-sk-row), var(--john-sk-row), var(--john-sk-row), var(--john-sk-row), var(--john-sk-row);
}

/* Top-level lists already have real headers; their loading cell supplies only body marks. */
html:root:not(#ui) body[data-broker-page="companies"] #companiesBody > tr > td:has(.fa-spinner),
html:root:not(#ui) body[data-broker-page="enrollments"] #enrollmentsBody > tr > td:has(.fa-spinner) {
  position: relative;
  height: 320px;
  padding: 0 !important;
  color: transparent !important;
  background: var(--john-sk-row) 24px 0 / 22% 64px repeat-y,
              var(--john-sk-row) 38% 0 / 6% 64px repeat-y,
              var(--john-sk-row) 57% 0 / 12% 64px repeat-y,
              var(--john-sk-row) 79% 0 / 13% 64px repeat-y;
}
html:root:not(#ui) body[data-broker-page="companies"] #companiesBody > tr > td > .fa-spinner,
html:root:not(#ui) body[data-broker-page="enrollments"] #enrollmentsBody > tr > td > .fa-spinner {
  visibility: hidden;
}

/* Native dashboard containers start empty. Reserve the first card row and enrollment panel. */
html:root:not(#ui) body[data-broker-page="dashboard"] #companiesContainer {
  min-height: 128px;
  display: flow-root;
}
html:root:not(#ui) body[data-broker-page="dashboard"] #companiesContainer > .companies-grid {
  margin-bottom: 0 !important;
}
html:root:not(#ui) body[data-broker-page="dashboard"] .enrollments-section {
  margin-top: 48px !important;
}
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer {
  min-height: 284px;
}
html:root:not(#ui) body[data-broker-page="dashboard"] #companiesContainer:empty,
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer:empty {
  opacity: 1 !important;
  position: relative;
}
html:root:not(#ui) body[data-broker-page="dashboard"] #companiesContainer:empty::before {
  content: "";
  display: block;
  width: calc((100% - 40px) / 3);
  height: 128px;
  box-sizing: border-box;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: linear-gradient(var(--john-sk-fill), var(--john-sk-fill)) 24px center / 52px 52px no-repeat,
              linear-gradient(var(--john-sk-fill), var(--john-sk-fill)) 90px 44px / 48% 13px no-repeat,
              linear-gradient(var(--john-sk-fill), var(--john-sk-fill)) 90px 72px / 34% 10px no-repeat,
              var(--bg-primary);
}
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer:empty::before {
  content: "";
  display: block;
  height: 284px;
  box-sizing: border-box;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--john-sk-row) 24px 20px / 30% 64px repeat-y,
              var(--john-sk-row) 72% 20px / 25% 64px repeat-y,
              var(--bg-primary);
}

@media (max-width: 767px) {
  html:root:not(#ui) body[data-broker-page="library"] .content > .tab-content {
    min-height: 540px;
  }
  html:root:not(#ui) body[data-broker-page="dashboard"] #companiesContainer:empty::before {
    width: 100%;
  }
  html:root:not(#ui) body[data-broker-page="library"] .docs-list .loading-state::before,
  html:root:not(#ui) body[data-broker-page="library"] #tab-drafts .loading-state::before,
  html:root:not(#ui) body[data-broker-page="library"] #tab-packets .loading-state::before,
  html:root:not(#ui) body[data-broker-page="library"] #tab-sent .loading-state::before,
  html:root:not(#ui) body[data-broker-page="library"] #tab-agency .loading-state::before,
  html:root:not(#ui) body[data-broker-page="companies"] #companiesBody > tr > td:has(.fa-spinner),
  html:root:not(#ui) body[data-broker-page="enrollments"] #enrollmentsBody > tr > td:has(.fa-spinner) {
    background: var(--john-sk-row) 24px 0 / 55% 72px repeat-y,
                linear-gradient(to bottom, transparent 45px, var(--john-sk-fill) 45px, var(--john-sk-fill) 53px, transparent 53px) 24px 0 / 35% 72px repeat-y;
  }
}
@media (max-width: 480px) {
  html:root:not(#ui) body[data-broker-page="library"] .content > .tab-content {
    min-height: 580px;
  }
  html:root:not(#ui) body[data-broker-page="library"] .docs-list .loading-state {
    height: 312px;
  }
}

/* ==== Ported from the redesign's 99-john-page-motion.css ==== */
/* John: a short content arrival with a stationary shell, not a moving page.
   Storyboard: 0ms keep the header and rail; 160ms tab content settles;
   220ms dashboard cards settle, with 24ms between the first three cards. */
html:root:not(#ui) body[data-broker-page="dashboard"] #companiesContainer,
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer {
  transition: none !important;
}
html:root:not(#ui) body[data-broker-page="dashboard"] .companies-grid > .company-card,
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > * {
  animation: john-card-arrive var(--john-card-arrive) var(--john-arrive-ease) both;
}
html:root:not(#ui) body[data-broker-page="dashboard"] .companies-grid > .company-card:nth-child(2) {
  animation-delay: 24ms;
}
html:root:not(#ui) body[data-broker-page="dashboard"] .companies-grid > .company-card:nth-child(n+3) {
  animation-delay: 48ms;
}

/* Loading has a quiet rhythm; empty-state artwork stays still. */
html:root:not(#ui) body[data-broker-page="library"] .docs-list .loading-state::before {
  animation: john-loading-breathe 1.8s ease-in-out infinite alternate;
}
@keyframes john-card-arrive {
  from { opacity: 0; translate: 0 4px; }
}
@keyframes john-loading-breathe {
  from { opacity: .65; }
}

/* ==== Ported from the redesign's 99-john-settings-detail.css ==== */
/* John: account panels share Mint's flat surface and the broker fallback identity.
   Uploaded photos and the native edit control remain intact. */

html:root:not(#ui) body[data-broker-page="settings"] .settings-section .card {
  border: 0 !important;
  border-radius: var(--cs-radius-md) !important;
  box-shadow: none !important;
}
/* No outlines on the boxes inside the panels; fields, buttons and the password checks keep theirs. */
html:root:not(#ui) body[data-broker-page="settings"] .settings-section :is(.twofa-status, .default-er-apps-list, .connection-icon) {
  border: 0 !important;
}
/* The white Google tile keeps its shape as a fill instead of an outline. */
html:root:not(#ui) body[data-broker-page="settings"] .settings-section .connection-icon[style*="#fff"] {
  background: var(--cs-gray-100) !important;
}
html:root:not(#ui) body[data-broker-page="settings"] #section-profile .profile-header {
  border-bottom: 0 !important;
  padding-bottom: 0;
}
html:root:not(#ui) body[data-broker-page="settings"] .settings-section .btn-row {
  border-top: 0 !important;
  padding-top: 0;
}
/* The settings nav has no lines: its edge, under its title, or between its groups (the gap stays). */
html:root:not(#ui) body[data-broker-page="settings"] .settings-sidebar {
  border-right: 0 !important;
}
html:root:not(#ui) body[data-broker-page="settings"] .sidebar-header {
  border-bottom: 0 !important;
}
html:root:not(#ui) body[data-broker-page="settings"] .sidebar-nav-divider {
  background: none !important;
}
html:root:not(#ui) body[data-broker-page="settings"] #profileAvatar:not(:has(img)) {
  background: var(--cs-slate-100) !important;
  border-radius: var(--cs-radius-md) !important;
  color: var(--cs-primary-deep) !important;
}
html:root:not(#ui) body[data-broker-page="settings"] #profileAvatar:not(:has(img)) #profileInitials {
  display: none;
}
html:root:not(#ui) body[data-broker-page="settings"] #profileAvatar:not(:has(img))::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%0D%0A%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.8.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%209.03%20Build%200)%20%20--%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Mint__x2F__broker__x2F__24px%22%0D%0A%09%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2024%2024%22%0D%0A%09%20enable-background%3D%22new%200%200%2024%2024%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%2212%22%20cy%3D%227.25%22%20r%3D%223.5%22%2F%3E%0D%0A%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M4.5%2C19.5c0-3.2%2C2.2-5.1%2C5-5.8l2.5%2C3.8l2.5-3.8c2.8%2C0.7%2C5%2C2.6%2C5%2C5.8c0%2C0.9-0.6%2C1.5-1.5%2C1.5H6%0D%0A%09C5.1%2C21%2C4.5%2C20.4%2C4.5%2C19.5z%22%2F%3E%0D%0A%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M12%2C13.5l-1.1%2C1.2l1.1%2C1.7l1.1-1.7L12%2C13.5z%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A") center / contain no-repeat;
}
html:root:not(#ui) body[data-broker-page="settings"] .profile-avatar:focus-within .profile-avatar-edit {
  opacity: 1;
}

/* Retain the outgoing section during Mint's 150ms switch delay. */
html:root:not(#ui) body[data-broker-page="settings"] .settings-section.active {
  opacity: 1;
  transform: none !important;
  animation: john-content-arrive var(--john-content-arrive) var(--john-arrive-ease) both !important;
}
html:root:not(#ui) body[data-broker-page="settings"] .settings-section.active[style*="opacity: 0"] {
  opacity: 1 !important;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html:root:not(#ui) body[data-broker-page="settings"] .settings-section.active {
    opacity: 1 !important;
    animation: none !important;
  }
  html:root:not(#ui) body[data-broker-page="settings"] .profile-avatar-edit {
    transition: none;
  }
}

/* ==== Ported from the redesign's 99-john-tablet-tables.css ==== */
/* John: narrow tablets use Mint's existing record composition inside the same
   table surface. Keep every field and anchored action, without page overflow. */

/* Native 0.7rem type labels fall below the text floor when Mint scales its root. */
html:root:not(#ui) body[data-broker-page="library"] .docs-list .type-badge {
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
}
/* Keep the native category fills while using readable text in the same hues. */
html:root:not(#ui) body[data-broker-page="library"] .docs-list .type-badge.type-employee-form {
  color: var(--cs-primary-deep);
}
html:root:not(#ui) body[data-broker-page="library"] .docs-list .type-badge.type-employer-form {
  color: var(--cs-warn-fg);
}

@media (min-width: 769px) and (max-width: 1024px) {
  html:root:not(#ui) body[data-broker-page="library"] .controls {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  html:root:not(#ui) body[data-broker-page="library"] .docs-list .type-badge {
    padding: 4px 6px;
  }
}
@media (min-width: 769px) and (max-width: 959px) {

  /* Library already supplies field labels; keep its menu attached to the More button. */
  html:root:not(#ui) body[data-broker-page="library"] .docs-list > table.mint-records > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  html:root:not(#ui) body[data-broker-page="library"] .docs-list > table.mint-records > tbody > tr {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  html:root:not(#ui) body[data-broker-page="library"] .docs-list td:first-child:not([colspan]) {
    grid-column: 1 / 4;
    grid-row: 1;
  }
  html:root:not(#ui) body[data-broker-page="library"] .docs-list td:last-child:not([colspan]) {
    grid-column: 4 / -1;
    grid-row: 1;
    align-self: center;
  }
  html:root:not(#ui) body[data-broker-page="library"] .docs-list .doc-cell,
  html:root:not(#ui) body[data-broker-page="library"] .docs-list .doc-info,
  html:root:not(#ui) body[data-broker-page="library"] .docs-list .doc-name-wrap {
    min-width: 0;
  }
  html:root:not(#ui) body[data-broker-page="library"] .docs-list .doc-name {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 20px;
  }
  html:root:not(#ui) body[data-broker-page="library"] .docs-list .actions-cell {
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

/* At wider tablet sizes the native table has room once its inner gutters step down. */
@media (min-width: 960px) and (max-width: 1024px) {
  html:root:not(#ui) body[data-broker-page="library"] .docs-list th:not(:first-child):not(:last-child),
  html:root:not(#ui) body[data-broker-page="library"] .docs-list td:not(:first-child):not(:last-child) {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  html:root:not(#ui) body[data-broker-page="library"] .docs-list th:last-child {
    width: 152px;
  }
}

/* ==== Ported from the redesign's 99-john-workspace-empty.css ==== */
/* John: empty states preview the work to come, using Mint's native decorative DOM.
   Match the quiet materials and scale of the New Hires flow; preserve state and actions. */
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > .empty-enrollments .mg-enroll,
html:root:not(#ui) body[data-broker-page="enrollments"] .mg-enroll,
html:root:not(#ui) body[data-broker-page="library"] #formsEmpty .mg,
html:root:not(#ui) body[data-broker-page="library"] #draftsEmpty .mg,
html:root:not(#ui) body[data-broker-page="library"] #sentEmpty .mg,
html:root:not(#ui) body[data-broker-page="library"] #packetsEmpty .mg {
  display: block;
  gap: 0;
}
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > .empty-enrollments .mg-enroll > .card,
html:root:not(#ui) body[data-broker-page="enrollments"] .mg-enroll > .card,
html:root:not(#ui) body[data-broker-page="library"] #formsEmpty .mg > .card,
html:root:not(#ui) body[data-broker-page="library"] #draftsEmpty .mg > .card,
html:root:not(#ui) body[data-broker-page="library"] #sentEmpty .mg > .card,
html:root:not(#ui) body[data-broker-page="library"] #packetsEmpty .mg > .card {
  position: absolute;
  display: block;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--cs-gray-200) !important;
  border-radius: 6px !important;
  background: var(--bg-primary) !important;
  box-shadow: none !important;
  opacity: 1;
  transform: none;
}
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > .empty-enrollments .mg-enroll .b,
html:root:not(#ui) body[data-broker-page="enrollments"] .mg-enroll .b,
html:root:not(#ui) body[data-broker-page="library"] #formsEmpty .mg .b,
html:root:not(#ui) body[data-broker-page="library"] #draftsEmpty .mg .b,
html:root:not(#ui) body[data-broker-page="library"] #sentEmpty .mg .b,
html:root:not(#ui) body[data-broker-page="library"] #packetsEmpty .mg .b {
  display: block;
  background: var(--cs-gray-200);
  border-radius: 2px;
}
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > .empty-enrollments .mg-enroll .mark,
html:root:not(#ui) body[data-broker-page="enrollments"] .mg-enroll .mark,
html:root:not(#ui) body[data-broker-page="library"] #formsEmpty .mg .mark,
html:root:not(#ui) body[data-broker-page="library"] #draftsEmpty .mg .mark,
html:root:not(#ui) body[data-broker-page="library"] #sentEmpty .mg .mark,
html:root:not(#ui) body[data-broker-page="library"] #packetsEmpty .mg .mark,
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > .empty-enrollments .mg-enroll .lines,
html:root:not(#ui) body[data-broker-page="enrollments"] .mg-enroll .lines,
html:root:not(#ui) body[data-broker-page="library"] #formsEmpty .mg .lines,
html:root:not(#ui) body[data-broker-page="library"] #draftsEmpty .mg .lines,
html:root:not(#ui) body[data-broker-page="library"] #sentEmpty .mg .lines,
html:root:not(#ui) body[data-broker-page="library"] #packetsEmpty .mg .lines,
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > .empty-enrollments .mg-enroll .pill,
html:root:not(#ui) body[data-broker-page="enrollments"] .mg-enroll .pill,
html:root:not(#ui) body[data-broker-page="library"] #formsEmpty .mg .pill,
html:root:not(#ui) body[data-broker-page="library"] #draftsEmpty .mg .pill,
html:root:not(#ui) body[data-broker-page="library"] #sentEmpty .mg .pill,
html:root:not(#ui) body[data-broker-page="library"] #packetsEmpty .mg .pill {
  position: absolute;
  margin: 0;
  flex: none;
}

/* Forms and drafts show a small form, including its unfilled fields. */
html:root:not(#ui) body[data-broker-page="library"] #formsEmpty .mg > .card:first-child,
html:root:not(#ui) body[data-broker-page="library"] #draftsEmpty .mg > .card:first-child {
  left: 26px;
  top: 8px;
  width: 100px;
  height: 96px !important;
}
html:root:not(#ui) body[data-broker-page="library"] #formsEmpty .mg > .card + .card,
html:root:not(#ui) body[data-broker-page="library"] #draftsEmpty .mg > .card + .card,
html:root:not(#ui) body[data-broker-page="library"] #sentEmpty .mg > .card + .card,
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > .empty-enrollments .mg-enroll > .card + .card,
html:root:not(#ui) body[data-broker-page="enrollments"] .mg-enroll > .card + .card {
  display: none !important;
}
html:root:not(#ui) body[data-broker-page="library"] #formsEmpty .mg .mark,
html:root:not(#ui) body[data-broker-page="library"] #draftsEmpty .mg .mark {
  left: 12px;
  top: 12px;
  width: 36px;
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: var(--cs-gray-200);
}
html:root:not(#ui) body[data-broker-page="library"] #formsEmpty .mg .mark::after,
html:root:not(#ui) body[data-broker-page="library"] #draftsEmpty .mg .mark::after,
html:root:not(#ui) body[data-broker-page="library"] #packetsEmpty .mg .mark::after {
  display: none;
}
html:root:not(#ui) body[data-broker-page="library"] #formsEmpty .mg .lines,
html:root:not(#ui) body[data-broker-page="library"] #draftsEmpty .mg .lines {
  left: 12px;
  top: 27px;
  width: 74px;
  gap: 8px;
}
html:root:not(#ui) body[data-broker-page="library"] #formsEmpty .mg .lines .b,
html:root:not(#ui) body[data-broker-page="library"] #draftsEmpty .mg .lines .b {
  width: 100% !important;
  height: 16px;
  border: 1px solid var(--cs-gray-200);
  border-radius: 3px;
  background: var(--cs-gray-50);
}
html:root:not(#ui) body[data-broker-page="library"] #formsEmpty .mg .pill,
html:root:not(#ui) body[data-broker-page="library"] #draftsEmpty .mg .pill {
  left: 12px;
  bottom: 10px;
  width: 28px;
  height: 5px;
  border-radius: 2px;
  background: var(--cs-gray-200);
}
html:root:not(#ui) body[data-broker-page="library"] #draftsEmpty .mg .lines .b:last-child {
  width: 52px !important;
  border-style: dashed;
  background: transparent;
}
html:root:not(#ui) body[data-broker-page="library"] #draftsEmpty .mg .pill {
  width: 18px;
  background: var(--cs-gray-100);
}

/* A sent item has an attachment, recipient lines and a small delivery status. */
html:root:not(#ui) body[data-broker-page="library"] #sentEmpty .mg > .card:first-child {
  left: 10px;
  top: 24px;
  width: 132px;
  height: 64px !important;
}
html:root:not(#ui) body[data-broker-page="library"] #sentEmpty .mg .mark {
  left: 12px;
  top: 17px;
  width: 23px;
  height: 28px;
  border-color: var(--cs-gray-200);
  border-radius: 3px;
  background: var(--cs-gray-50);
}
html:root:not(#ui) body[data-broker-page="library"] #sentEmpty .mg .lines {
  left: 45px;
  top: 17px;
  width: 72px;
  gap: 6px;
}
html:root:not(#ui) body[data-broker-page="library"] #sentEmpty .mg .lines .b {
  height: 5px;
}
html:root:not(#ui) body[data-broker-page="library"] #sentEmpty .mg .pill {
  left: 45px;
  bottom: 13px;
  width: 26px;
  height: 5px;
  border-radius: 2px;
  background: var(--cs-gray-200);
}

/* Packets are overlapping sheets, distinct from a sent record. */
html:root:not(#ui) body[data-broker-page="library"] #packetsEmpty .mg > .card {
  left: 42px;
  top: 18px;
  width: 72px;
  height: 86px !important;
}
html:root:not(#ui) body[data-broker-page="library"] #packetsEmpty .mg > .card:first-child {
  z-index: 1;
}
html:root:not(#ui) body[data-broker-page="library"] #packetsEmpty .mg > .card + .card {
  left: 30px;
  top: 8px;
  background: var(--cs-gray-50) !important;
}
html:root:not(#ui) body[data-broker-page="library"] #packetsEmpty .mg .mark {
  left: 12px;
  top: 14px;
  width: 32px;
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: var(--cs-gray-200);
}
html:root:not(#ui) body[data-broker-page="library"] #packetsEmpty .mg .lines {
  left: 12px;
  top: 31px;
  width: 46px;
  gap: 7px;
}
html:root:not(#ui) body[data-broker-page="library"] #packetsEmpty .mg .lines .b {
  height: 4px;
  width: 100% !important;
}
html:root:not(#ui) body[data-broker-page="library"] #packetsEmpty .mg .pill {
  left: 12px;
  bottom: 12px;
  width: 20px;
  height: 5px;
  border-radius: 2px;
  background: var(--cs-gray-200);
}

/* Enrollment preview pairs a date tile with a progress track. */
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > .empty-enrollments .mg-enroll > .card:first-child,
html:root:not(#ui) body[data-broker-page="enrollments"] .mg-enroll > .card:first-child {
  left: 8px;
  top: 16px;
  width: 136px;
  height: 80px !important;
}
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > .empty-enrollments .mg-enroll .ring,
html:root:not(#ui) body[data-broker-page="enrollments"] .mg-enroll .ring {
  position: absolute;
  left: 12px;
  top: 14px;
  width: 30px;
  height: 32px;
  border: 1px solid var(--cs-gray-200);
  border-radius: 4px;
  background: var(--bg-primary);
}
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > .empty-enrollments .mg-enroll .ring::before,
html:root:not(#ui) body[data-broker-page="enrollments"] .mg-enroll .ring::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  border-top: 1px solid var(--cs-gray-200);
}
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > .empty-enrollments .mg-enroll .ring::after,
html:root:not(#ui) body[data-broker-page="enrollments"] .mg-enroll .ring::after {
  content: "";
  position: absolute;
  inset: auto;
  left: 6px;
  top: 13px;
  width: 3px;
  height: 3px;
  border-radius: 1px;
  background: var(--cs-gray-200);
  box-shadow: 7px 0 var(--cs-gray-200), 14px 0 var(--cs-gray-200), 0 7px var(--cs-gray-200), 7px 7px var(--cs-gray-200);
}
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > .empty-enrollments .mg-enroll .lines,
html:root:not(#ui) body[data-broker-page="enrollments"] .mg-enroll .lines {
  left: 54px;
  top: 18px;
  width: 68px;
  gap: 7px;
}
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > .empty-enrollments .mg-enroll .lines .b,
html:root:not(#ui) body[data-broker-page="enrollments"] .mg-enroll .lines .b {
  height: 5px;
}
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > .empty-enrollments .mg-enroll .lines .b:first-child,
html:root:not(#ui) body[data-broker-page="enrollments"] .mg-enroll .lines .b:first-child {
  width: 100%;
}
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > .empty-enrollments .mg-enroll .pill,
html:root:not(#ui) body[data-broker-page="enrollments"] .mg-enroll .pill {
  left: 12px;
  bottom: 14px;
  width: 112px;
  height: 6px;
  border-radius: 3px;
  background: var(--cs-gray-100);
}
html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > .empty-enrollments .mg-enroll .pill::after,
html:root:not(#ui) body[data-broker-page="enrollments"] .mg-enroll .pill::after {
  content: "";
  display: block;
  width: 62%;
  height: 100%;
  border-radius: inherit;
  background: var(--cs-gray-200);
}

/* ==== Emails tab inside the company record ==== */
/* Same flat panels as the other company tabs: no outlines, no lines under headers. Thumbnails and fields keep theirs. */
html:root:not(#ui) body[data-broker-page="emails"].em-embed :is(
  .em-delivery-notice, .em-start, .card, .em-mint-collection, .em-template-library, .em-stat
) {
  border: 0 !important;
}
html:root:not(#ui) body[data-broker-page="emails"].em-embed :is(.em-mint-collection-head, .em-toolbar, .card-header) {
  border-bottom: 0 !important;
}
html:root:not(#ui) body[data-broker-page="emails"].em-embed .em-ghost-note {
  border-top: 0 !important;
}

/* ==== Emails overview: one screen instead of a stack of cards ==== */
/* The actions are a plain row; the six numbers sit in one compact bar; the sends table pages at its foot. */
html:root:not(#ui) body[data-broker-page="emails"] .em-start-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-statbar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px 24px;
  margin-bottom: 16px;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--bg-primary, #fff);
}
html:root:not(#ui) body[data-broker-page="emails"] .em-statbar-item {
  min-width: 0;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-statbar-label {
  overflow: hidden;
  color: var(--cs-gray-500);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-statbar-value {
  margin-top: 4px;
  color: var(--cs-gray-900, #111827);
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  font-variant-numeric: tabular-nums;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-statbar-sub {
  overflow: hidden;
  color: var(--cs-gray-500);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 960px) {
  html:root:not(#ui) body[data-broker-page="emails"] .em-statbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  html:root:not(#ui) body[data-broker-page="emails"] .em-statbar { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 16px; }
}

/* Recent sends: view the email and download its receipt from the row. */
html:root:not(#ui) body[data-broker-page="emails"] .em-sends-table .em-col-actions {
  width: 1%;
  padding-left: 0 !important;
  text-align: right;
  white-space: nowrap;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-row-actions {
  display: inline-flex;
  gap: 2px;
}
/* Row icons follow Mint's table glyph rule: an 18px glyph in a 38px box, hover is colour only. */
html:root:not(#ui) body[data-broker-page="emails"] .em-row-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--cs-gray-500);
  font-size: 18px;
  cursor: pointer;
  transition: color 150ms ease;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-row-btn:hover {
  color: var(--cs-primary);
}
html:root:not(#ui) body[data-broker-page="emails"] .em-row-btn:focus-visible {
  outline: 2px solid var(--cs-primary);
  outline-offset: 1px;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-row-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
/* The last icon sits at the table's right edge, so its label opens leftward instead of hanging past the edge
   (which also made the table scroll sideways). */
html:root:not(#ui) body[data-broker-page="emails"] .em-row-actions > [data-tooltip]:last-child::before {
  right: 0 !important;
  transform: none !important;
}
html:root:not(#ui) body[data-broker-page="emails"] [data-sends-body] tbody {
  transition: opacity 150ms ease;
}
html:root:not(#ui) body[data-broker-page="emails"] [data-sends-body].is-paging tbody {
  opacity: 0.45;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  font-variant-numeric: tabular-nums;
}
html:root:not(#ui) body[data-broker-page="emails"] :is(.em-pager-side, .em-pager-nums) {
  display: flex;
  align-items: center;
  gap: 6px;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-pager :is(.page-btn, .page-num) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 40px;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-pager :is(.page-btn, .page-num):disabled {
  opacity: 0.45;
  cursor: default;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-pager-info {
  margin-left: 8px;
  color: var(--cs-gray-600);
  font-size: 14px;
  white-space: nowrap;
}

/* The sent email's record: who, what, when, and the email itself. */
html:root:not(#ui) body[data-broker-page="emails"] .em-send-facts {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-send-facts > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-send-facts dt {
  color: var(--cs-gray-500);
  font-size: 13px;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-send-facts dd {
  margin: 0;
  color: var(--cs-gray-900, #111827);
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-send-timeline {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
  padding: 12px 14px;
  list-style: none;
  border-radius: 12px;
  background: var(--cs-gray-50);
}
html:root:not(#ui) body[data-broker-page="emails"] .em-send-timeline li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-send-timeline li span:first-child {
  color: var(--cs-gray-900, #111827);
  font-weight: 600;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-send-timeline li span:last-child {
  color: var(--cs-gray-600);
  font-variant-numeric: tabular-nums;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-send-preview {
  display: block;
  width: 100%;
  height: 520px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 6px var(--cs-gray-50);
}
html:root:not(#ui) body[data-broker-page="emails"] .em-send-nobody {
  margin: 0;
  color: var(--cs-gray-500);
  font-size: 13px;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-print-frame {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border: 0;
}

/* Create template, inside the company's Emails tab: on the Templates heading, not in the tab row. */
html:root:not(#ui) body[data-broker-page="emails"].em-embed .page-header-right #newEmailWrap {
  display: none !important;
}
html:root:not(#ui) body[data-broker-page="emails"].em-embed .em-section-intro:has(> #newEmailWrap) {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  align-items: center;
}
html:root:not(#ui) body[data-broker-page="emails"].em-embed .em-section-intro > #newEmailWrap {
  grid-column: 2;
  grid-row: 1 / span 2;
}
html:root:not(#ui) body[data-broker-page="emails"].em-embed .em-section-intro > :not(#newEmailWrap) {
  grid-column: 1;
  max-width: 760px;
}

/* Recent sends uses the Employees column-heading pattern. The popover sits
   outside the table scroller so the first and last columns do not clip it. */
html:root:not(#ui) body[data-broker-page="emails"] .em-send-filter-trigger {
  display: inline-flex !important; align-items: center !important; gap: 7px;
  min-height: 36px; padding: 0; border: 0; background: transparent;
  font: inherit; color: var(--cs-gray-600); cursor: pointer; white-space: nowrap;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-send-filter-trigger > i { font-size: 10px; color: var(--cs-gray-400); }
html:root:not(#ui) body[data-broker-page="emails"] .em-send-filter-trigger:is(:hover, .is-filtered),
html:root:not(#ui) body[data-broker-page="emails"] .em-send-filter-trigger:is(:hover, .is-filtered) > i { color: var(--cs-primary) !important; }
html:root:not(#ui) body[data-broker-page="emails"] .em-filter-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cs-primary); }
html:root:not(#ui) body[data-broker-page="emails"] .em-send-filter {
  position: absolute; z-index: 1200; width: 296px; max-width: calc(100vw - 16px);
  padding: 18px; border: 0; border-radius: 10px; background: #fff;
  box-shadow: 0 8px 32px #003a341f; color: var(--cs-gray-700); font-size: 14px;
}
html:root:not(#ui) body[data-broker-page="emails"] .em-send-filter form { display: grid; gap: 16px; }
html:root:not(#ui) body[data-broker-page="emails"] .em-send-filter strong { font-size: 15px; font-weight: 600; color: var(--cs-fg); }
html:root:not(#ui) body[data-broker-page="emails"] .em-send-filter fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
html:root:not(#ui) body[data-broker-page="emails"] .em-send-filter-field { display: grid; gap: 8px; font-size: 13px; }
html:root:not(#ui) body[data-broker-page="emails"] .em-send-filter .form-input { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; }
html:root:not(#ui) body[data-broker-page="emails"] .em-send-filter-options { max-height: 240px; overflow-y: auto; }
html:root:not(#ui) body[data-broker-page="emails"] :is(.em-send-filter-options, .em-send-filter-sort) label { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
html:root:not(#ui) body[data-broker-page="emails"] .em-send-filter input:is([type="checkbox"], [type="radio"]) { width: 16px; height: 16px; accent-color: var(--cs-primary); }
html:root:not(#ui) body[data-broker-page="emails"] .em-send-filter-sort { display: flex; gap: 18px; }
html:root:not(#ui) body[data-broker-page="emails"] .em-send-filter-sort legend { margin-bottom: 6px; color: var(--cs-gray-500); font-size: 12px; }
html:root:not(#ui) body[data-broker-page="emails"] :is(.em-send-filter-select, .em-send-filter-actions, .em-sends-filter-summary) { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html:root:not(#ui) body[data-broker-page="emails"] .em-send-filter-dates { display: grid; gap: 12px; }
html:root:not(#ui) body[data-broker-page="emails"] .em-send-filter-select button,
html:root:not(#ui) body[data-broker-page="emails"] .em-sends-filter-summary button { padding: 0; min-height: 36px; background: transparent; border: 0; color: var(--cs-primary); font: inherit; cursor: pointer; }
html:root:not(#ui) body[data-broker-page="emails"] .em-send-filter-actions .btn { box-shadow: none !important; }
html:root:not(#ui) body[data-broker-page="emails"] .em-sends-filter-summary { padding: 4px 20px 12px; font-size: 13px; color: var(--cs-gray-500); }
html:root:not(#ui) body[data-broker-page="emails"] .em-sends-no-results { padding: 40px 20px !important; text-align: center; color: var(--cs-gray-500); }
html:root:not(#ui) body[data-broker-page="emails"] :is(.em-send-filter-trigger, .em-send-filter button, .em-sends-filter-summary button):focus-visible { outline: 2px solid var(--cs-primary); outline-offset: 3px; }

/* Center the desktop greeting within the existing header height. */
@media (min-width: 1101px) {
  html:root:not(#ui) body[data-broker-page="dashboard"] .main > .dashboard-header:first-child { align-items: center; }
}